CLOUD KITCHEN WEBSITE

A Report
Submitted for the Partial Fulfillment
of

BACHELOR OF TECHNOLOGY

Computer Science and Engineering

By

Paritosh Nigam Roll No. :202010101110078

Devesh Mishra Roll No. :202010101110080
Abhinav Pathak Roll No. :202010101110097
Mohin Verma Roll No. :202010101110105

Under the Supervision of

Mr. Neeraj Kumar
(Assistant Professor)

Department of Computer Science and Engineering

Shri Ramswaroop Memorial University

May 2024
 CERTIFICATE
This is to certify that the project entitled “CAUSE_CONNECT” submitted by : Paritosh Nigam
- 202010101110078, Devesh Mishra - 202010101110080, Abhinav Pathak -202010101110097,
Mohin Verma - 202010101110105 has been carried out under supervision at the Department of
Computer Science and Engineering, Shri Ramswaroop Memorial University, Lucknow-Deva
Road Barabanki, Uttar Pradesh, and that this work has not been submitted elsewhere for any
other degree.

Signature of Supervisor(s)
Name(s)
Department(s)
Shri Ramswaroop Memorial University

May 2024

Signature of Dean
Name(s)
Department(s)
Shri Ramswaroop Memorial University

ii
 ACKNOWLEDGEMENT
I would like to express my sincere gratitude to all those who have contributed to the successful
completion of this project. First and foremost, I would like to thank my project supervisor Mr Neeraj
Kumar sir, for their invaluable guidance, support and encouragement throughout the project. Their
expertise and insights were instrumental in shaping the direction of this work.
I would also like to extend my appreciation to all my team members who provided me with valuable
resources and assistance during the course of this project. Their inputs and feedback helped me to refine
my ideas and improve the quality of my work.
Finally, I would like to acknowledge my family and friends for their unwavering support and
understanding during this challenging time. Their encouragement and belief in me kept me motivated
and focused on achieving my goals.

We would not like to miss the opportunity to acknowledge the contribution of Mr. Satya
Bhusan Verma, Head of Department of Computer Science and Engineering for her kind assistance
and cooperation during the development of our project.

Thank you all once again for your invaluable contributions.

iii
 DECLARATION

We affirm that this submission is entirely our own creation, and we have not included any
previously published or written material by another individual, nor material that has been largely
accepted for any other degree or diploma from the university or other institute of higher learning.
We have provided due acknowledgment within the text where necessary.

Overall, the statement is a declaration of academic integrity and honesty, highlighting the
importance of originality, proper citation, and ethical academic practices.

Signature:
Name: Paritosh Nigam
Roll No.: 202010101110078

Signature:
Name: Devesh Mishra
Roll No.: 202010101110080

Signature:
Name: Abhinav Pathak
Roll No.: 202010101110097

Signature:
Name: Mohin Verma
Roll No.: 202010101110105

Date:

iv
 ABSTRACT

Cause-Connect is the name of the website. This website is a platform for food delivery and charitable
donations. It allows users to order food from local restaurants for delivery to their homes, while also
giving them the option to donate a portion of their order total to a selected charity. The website also
features a section where users can browse and donate directly to charities in need. Through this platform,
users can enjoy convenient food delivery while also contributing to charitable causes, making a positive
impact on their local community.
In this website we have basically 2 modules. The first module includes the customer module and
second module includes admin module. The customer have to register for buy purpose. The registered
customer and non registered customer both can view details of Food products and he/she can make order
according to his/her need. He/she has to pay and will get home delivery. The admin module contains the
access of admin page on the website. The admin can change everything in the website. He have the
ability to add, delete, and update any information regarding the products.
This platform provides a simple and effective way to fight food waste and hunger in the
community, while also supporting local businesses.

v
 TABLE OF CONTENTS

Certificate………………………………………………………………………………………..i
Acknowledgement……………………………………………………………………………….ii
Declaration……………………………………………………………………………………….iii
Abstract…………………………………………………………………………………………..iv

1. Introduction…………………………………………………………………………………………..1
1.1 Objectives…......................................................................................................................01

2. Web Development… ...................................................................................................... …………02

2.1 Web Site…………………………………………………………………………….………02
2.2 Web Page……………………………………………………….…………………….……..03

3. The Step to Create a Web Site… ................................................................................................... 04

3.1 UI Development……………………………………………………………………………...05
3.1.1 HTML………………………………………………………………………………………..06
3.1.2 CSS…………………………………………………………………………………………..07
3.1.3 Bootstrap……………………………………………………………………………………..09
3.2 Scripting………………………………………………………………………………………10
3.2.1 Server Side Scripting……………..…………………………………………………..11
3.2.2 Server Side Scripting Language………………………………………………………………12
3.2.3 Client side Scripting……..…………………………………………………………………….12
3.3 Database……………………………………………………………………………………………….13

4. Software requirement Specification(SRS)……………………………………………………………..14

4.1 Hardware Requirement…………………………………………………………..……………..14
4.2 Software Requirement………………………………………………………………………….14

5. Data Flow Diagram………….………………………………………………………………………….16

6.1 DFD-1……………………………………………………………………………………………………..17
6.2 DFD-2……………………………………………………………………………………………………..18
6.3 DFD-3……………………………………………………………………………………………………..19
6. Project………………………………………………………………………………………………………………20.
7.1 Project(Advanced Technologies)………………………………………………………………………….20

vi
 7.2 Technologies Used……………………………………………………………………………………….. 20
7.3 Technical details………………………………………………………………………………………….. 20
7. Screenshots…………………………………………………………………………………………………………21
8. Maintenance………………………………………………………………………………………………………..26
9. Future scope and future enhancement……………………………………………………………………………27
10. Conclusion……………………………………………………………………………………………………...28

References…………………………………………………………………………………………………. 29

vi
 LIST OF FIGURES

Figure No. Page No.

Figure 3.1 Steps to create a website…… …………………………………………………..12

Figure 3.2 Login form without CSS ………………………………... …………………….16
Figure 3.3 Login form without CSS. ...………………………………. ………………….. 17
Figure 3.2.1 Programming language popularity. …………………….…………………… 20
Figure 3.2.2 Scripting ……………… …………………………………. …………………21
Figure 4.1.1 … ………………………………………… ………………………...………..25
Figure 6.1 DFD. ..…………………………………………………………………………. 30
Figure 6.1.1 DFD-1……...…………………………………………….………………….. 31
Figure 6.2.1 DFD-2……………………………………………………………………….. 31
Figure 6.2.2 DFD-2 …………………………………………………….…. …………….. 32
Figure 6.3.1 DFD-3 ………………………………………………………………………. 33
Figure 8.1.1 Front Page……………….……………………………..……………………. 35
Figure 8.1.2 Front Page products …….……………………………..……………………. 36
Figure 8.1.3 Single Product..………….……………………………..……………………. 35
Figure 8.1.4 Login Page...…………….……………………………..……………………. 38
Figure 8.1.5 Sign up Page…………….……………………………..…..………………… 39
Figure 8.1.6 Check out…..…………….……………………………..…. ……………….. 37
Figure 8.1.7 Sell Request..…………….……………………………..……………………. 36
Figure 8.1.8 Admin Panel.…………….……………………………..…………………… 39
Figure 8.1.9 Contact Us and ………....……………………………..……………………. 35

ix
 Chapter 1: Introduction

Food delivery has become an increasingly popular option for people who are looking for
convenient and fast meal solutions. With the rise of technology and mobile apps, it's now
possible to order food from a variety of restaurants, cafes, and grocery stores, and have it
delivered right to your doorstep. The food delivery industry has grown significantly in
recent years, with many businesses and platforms competing for customers' attention.
These services offer a range of benefits, including time-saving convenience, access to a
variety of cuisines and dishes, and the ability to enjoy restaurant-quality meals from the
comfort of your own home. Additionally, food delivery can be a lifeline for people who
are unable to leave their homes due to illness, disability, or other circumstances. In recent
times, food delivery has also played an important role in supporting local businesses
during the COVID-19 pandemic.

Cause Connect is an interactive food delivery solution providing users with an

opportunity to buy Food product online.

1.1 OBJECTIVES

Food delivery has become an essential part of many people's lives, providing an easy
and efficient way to access delicious meals on-demand.. The goal of this website is to
develop a web based interface for home cooks and chiefs to showcase their talents , the
website would be easy to use. The main goal of this website is:

 It is a platform that empowers home cooks and chefs to share their culinary talents with
a wider audience

1
 It offers an opportunity for home cooks who are passionate about food and have a talent
for cooking to monetize their skills and sell their dishes online.
 Any one can order food using our platform.
 If anyones wants to donate the extra food they can contact their nearby charity house.

2
 CHAPTER-2
WEB-DEVELOPMENT:

Web development is the process of creating and maintaining websites. It involves a wide
range of skills and disciplines, including web design, front-end development, back-end
development, and web content management.
Web developers use programming languages such as HTML, CSS, and JavaScript to create
websites that are visually appealing, functional, and user-friendly. They work closely with
web designers to ensure that the website's design is translated into a working, interactive
site.
Front-end developers focus on the visual elements of the website, including its layout,
graphics, and user interface. They use programming languages such as HTML and CSS to
create the structure and design of the website, and JavaScript to create interactive features.
Back-end developers, on the other hand, focus on the server-side of the website, including
databases, web servers, and application programming interfaces (APIs). They use
programming languages such as PHP, Ruby on Rails, and Python to create dynamic and
interactive websites that can respond to user input.

Web content managers are responsible for creating and maintaining the content on the
website, including text, images, videos, and other media. They use content management
systems (CMS) such as WordPress and Drupal to manage the website's content and ensure
that it is up-to-date and relevant.

In a large organization, web development plays a crucial role in building and maintaining
an effective online presence. Large organizations typically have complex websites with
multiple pages, features, and functionalities, which require a team of skilled web
developers to manage.
Overall, in a large organization, web development is a complex and collaborative process
that involves multiple specialized roles. A successful web development team must be able
to work together effectively to ensure that the website is optimized for user experience,
functionality, and security.

Web development encompasses various aspects, including web design, front-end

development, back-end development, and web server configuration. Web developers use

3
 programming languages such as HTML, CSS, and JavaScript to create the structure,
layout, and interactivity of web pages. Front-end developers focus on the client-side
components of websites, implementing user interfaces and interactions using front-end
frameworks like React.js or AngularJS. Back-end developers work on the server-side
logic, databases, and server configurations that power web applications, often using
programming languages like Python, Ruby, PHP, or Node.js. Additionally, web
development involves considerations such as responsiveness, accessibility, performance
optimization, and security to ensure a seamless and secure user experience across different
devices and platforms. Continuous learning and staying updated with emerging
technologies and best practices are essential for web developers to adapt to evolving
trends and meet the demands of modern web development projects.

2.1 WEB-SITE

A website is a collection of related web pages, including multimedia content, typically

identified with a common domain name, and published on at least one web server. A
website may be accessible via a public Internet Protocol (IP) network, such as the Internet,
or a private local area network (LAN), by referencing a uniform resource locator (URL)
that identifies the site.

Websites have many functions and can be used in various fashions; a website can be a
personal website, a commercial website for a company, a government website or a non-
profit organization website. Websites are typically dedicated to a particular topic or
purpose, ranging from entertainment and social networking to providing news and
education. All publicly accessible websites collectively constitute the World Wide Web,
while private websites, such as a company's website for its employees, and are typically
a part of an intranet.

Web pages, which are the building blocks of websites, are documents, typically composed
in plain text interspersed with formatting instructions of Hypertext Markup Language
(HTML, XHTML). They may incorporate elements from other websites with

suitable markup anchors. Web pages are accessed and transported with the Hypertext Transfer
Protocol (HTTP), which may optionally employ encryption (HTTP Secure, HTTPS) to
provide security and privacy for the user. The user's application, often a web browser, renders
the page content according to its HTML markup instructions onto a display terminal.
4
 Hyperlinking between web pages conveys to the reader the site structure and guides the
navigation of the site, which often starts with a home page containing a directory of the site
web content. Some websites require user registration or subscription to access content.
Examples of subscription websites include many business sites, news websites, academic
journal websites, gaming websites, file-sharing websites, message boards, web-based email,
social networking websites, websites providing real-time stock market data, as well as sites
providing various other services. As of 2016 end users can access websites on a range of
devices, including desktop and laptop computers, tablet computers, smartphones and smart
TVs. A web site consists of web pages which are interconnected to each other and contain
various data and functionalities.

A website is a collection of interconnected webpages hosted on a web server and accessible

over the internet through a uniform resource locator (URL) or domain name. It serves as a
digital platform for presenting information, resources, or services to users across the globe.
Websites vary widely in scope and purpose, catering to diverse needs such as business
promotion, e-commerce, education, entertainment, or communication. They typically consist
of multiple pages organized hierarchically, with navigation menus and hyperlinks facilitating
seamless navigation between different sections and content. Websites are built using a
combination of technologies such as HTML, CSS, JavaScript, and server-side scripting
languages like PHP or Python, depending on their complexity and functionality requirements.
They can range from simple static sites with fixed content to dynamic sites with interactive
features, user-generated content, and database integration. Websites play a fundamental role
in the digital era, serving as virtual storefronts, information hubs, communication channels,
and platforms for collaboration, creativity, and expression on the internet.

2.2 WEB-PAGE

A web page, or webpage, is a document that is suitable for the World Wide Web and web
browsers. A web browser displays a web page on a monitor or mobile device. The web
page is what displays, but the term also refers to a computer file, usually written in HTML
or comparable markup language. Web
browsers coordinate the various web resource elements for the written web page, such as
style sheets, scripts, and images, to present the web page.

Typical web pages provide hypertext that includes a navigation bar or a sidebar menu to
5
other web pages via hyperlinks, often referred to as links.

On a network, a web browser can retrieve a web page from a remote web server. On a
higher level, the web server may restrict access to only a private network such as a
corporate intranet or it provides access to the World Wide Web. On a lower level, the web
browser uses the Hypertext Transfer Protocol (HTTP) to make such requests.

A static web page is delivered exactly as stored, as web content in the web server's file
system, while a dynamic web page is generated by a web application that is driven by
server- side software or client-side scripting. Dynamic website pages help the browser (the
client) to enhance the web page through user input to the server.

A webpage is a digital document that is accessible through a web browser and displayed
on the internet. It typically consists of various elements such as text, images, multimedia
content, and interactive features, organized within a structured layout. Webpages serve
diverse purposes, ranging from providing information about businesses, organizations, or
individuals to offering entertainment, education, or e-commerce services. They are
designed using markup languages like HTML, styled with CSS for layout and visual
presentation, and enhanced with JavaScript for interactivity. Webpages are accessed by
users worldwide, enabling them to browse, interact, and consume content seamlessly
across different devices and platforms. Whether it's a personal blog, corporate website,
online store, or social media platform, webpages play a crucial role in shaping the digital
landscape and facilitating communication, collaboration, and connectivity on the internet.

6
 CHAPTER-3

THE STEPS TO CREATE A WEBSITE

Creating a web site required multiple steps which includes the following:

 Creating a UI(User Interface)

 Scripting (Both at server and Client end)

 Creating a Backend or the database

Fig 3.1

7
 3.1 UI DEVELOPMENT

Technologies that are mostly used to develop a User Interface are:

 HTML
 CSS
 Bootstrap

3.1.1 HTML

Hypertext Markup Language (HTML) is the standard markup language for creating web
pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms
a triad of cornerstone technologies for the World Wide Web. Web browsers receive
HTML documents from a webserver or from local storage and render them into
multimedia web pages. HTML describes the structure of a web page semantically and
originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images
and other objects, such as interactive forms, may be embedded into the rendered page. It
provides a means to create structured documents by denoting structural semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are
delineated by tags, written using angle brackets. Tags such as <img /> and <input />
introduce content into the page directly. Others such as <p>...</p> surround and provide
information about document text and may include other tags as sub-elements. Browsers
do not display the HTML tags, but use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript which
affect the behavior and content of web pages. Inclusion of CSS defines the look and layout
of content. The World Wide Web Consortium (W3C), maintainer of both the HTML and
the CSS standards, has encouraged the use of CSS over explicit presentational HTML
since 1997.

HTML markup consists of several key components, including those called tags (and their
attributes), character-based data types, character references and entity references. HTML

8
tags most commonly come in pairs like <h1> and </h1>, although some represent empty
elements and so are unpaired, for example <img>. The first tag in such a pair is the start
tag, and the second is the end tag (they are also called opening tags and closing tags).

HTML documents consist of a hierarchy of elements, organized into a tree-like structure

known as the Document Object Model (DOM). Each HTML element represents a specific
type of content or structural component, such as headings, paragraphs, lists, links, images,
forms, and more.

HTML documents are typically created using a text editor and saved with a .html file
extension. They can be viewed in web browsers, which parse the HTML code and
render it as a formatted web page.

HTML is often combined with Cascading Style Sheets (CSS) and JavaScript to create
dynamic and visually appealing web pages and web applications. CSS is used to style
and format the HTML content, while JavaScript adds interactivity and functionality to the
webpage. Together, these technologies form the core building blocks of modern web
development.

HTML, or Hypertext Markup Language, is the backbone of web development, providing

the structure and content of web pages. It consists of a series of elements or tags that
define the different parts of a webpage. These elements range from headings (<h1> to
<h6>) for titles, paragraphs (<p>) for text content, to links (<a>) for navigation. HTML5,
the latest version, introduced semantic elements like <header>, <footer>, and <article>,
which offer more meaningful and organized ways to structure content. Attributes can be
added to elements to provide additional information or functionality, such as the href
attribute in links or the src attribute in images. HTML also supports forms, enabling users
to input data and submit it to a server for processing. With HTML5, form validation
features were introduced, allowing browsers to validate user input natively. Overall,
HTML is essential for creating the foundation of web pages, providing a standardized
way to communicate and display content on the internet.

Another important component is the HTML document type declaration, which triggers
standards mode rendering.

9
The following is an example of the classic Hello world program, a common test
employed for comparing programming languages, scripting languages and markup
languages. This example is made using 9 lines of code:

General Syntax of HTML

<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
(The text between <html> and </html> describes the web page, and the text between
<body> and </body> is the visible page content. The markup text "<title>This is a
title</title>" defines the browser page title.)

The Document Type Declaration <!DOCTYPE html> is for HTML5. If a declaration is

not included, various browsers will revert to "quirks mode" for rendering.

3.1.2 CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language. Although most often used to
set the visual style of web pages and user interfaces written in HTML and XHTML, the
language can be applied to any XML document, including plain XML, SVG and XUL,
and is applicable to rendering in speech, or on other media. Along with HTML and
JavaScript, CSS is a cornerstone technology used by most websites to create visually
engaging webpages, user interfaces for web applications, and user interfaces for many
mobile applications.

CSS is designed primarily to enable the separation of presentation and content, including
aspects such as the layout, colors, and fonts. This separation can improve content
10
accessibility, provide more flexibility and control in the specification of presentation
characteristics, enable multiple HTML pages to share formatting by specifying the
relevant CSS in a separate .css file, and reduce complexity and repetition in the structural
content.

Separation of formatting and content makes it possible to present the same markup page
in different styles for different rendering methods, such as on-screen, in print, by voice
(via speech-based browser or screen reader), and on Braille-based tactile devices.

It can also display the web page differently depending on the screen size or viewing
device. Readers can also specify a different style sheet, such as a CSS file stored on their
own computer, to override the one the author specified.

Changes to the graphic design of a document (or hundreds of documents) can be applied
quickly and easily, by editing a few lines in the CSS file they use, rather than by
changing markup in the documents.

The CSS specification describes a priority scheme to determine which style rules apply
if more than one rule matches against a particular element. In this so-called cascade,
priorities (or weights) are calculated and assigned to rules, so that the results are
predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C).
Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318
(March 1998). The W3C operates a free CSS validation service for CSS documents.

Types of CSS:

 Inline CSS:
In this CSS is applied in between the tags
Eg: <tag style=”styling”>Hello World</tag>
 Internal CSS:
In this The css code is defined inside the style tag in the head section of the HTML
page.

11
General Syntax:

<html>
<head>
<style>
<! -- CSS STYLING -- >
</style>
</head>
</html>

12
 External CSS:

In this the CSS code is written on another page and is linked to the HTML page. It is
advantageous to use this type of styling as we can use the same file to style various
HTML pages.
External CSS uses the extension .css and is applied using the following syntax
<html>
<head>
<link relation=”stylesheet” type=”css” href=”url to the page”>
</head>
</html>

All the CSS style types are important but can be used in different situations.

 Inline CSS is used when only small changes are to be done to the HTML tag and the
changes are to be reflected only to that specific tag

 Internal CSS is used when the individual HTML pages have to be designed
differently. This also slows the page load system if the internal styling is long.

 External CSS files are maintained to design multiple pages and use common styles
over various pages. It is useful as it helps in managing the resources in an easy manner.

Both HTML and CSS are used to create a UI but CSS behaves like a makeup on the
face of an actress which makes her look even more beautiful than she is in reality.

And here is the difference:

Before using CSS in HTML:

13
Fig 3.2

14
 After using CSS in HTML Page:

Fig 3.3

3.1.3 BOOTSTRAP

Bootstrap is a free and open-source front-end web framework for designing websites
and web applications. It contains HTML- and CSS-based design templates for
typography, forms, buttons, navigation and other interface components, as well as
optional JavaScript extensions. Unlike many web frameworks, it concerns itself with
front-end development only.

Bootstrap is the second most-starred project on GitHub, with more than 107,000 stars
and 48,000 forks.

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob
Thornton at Twitter as a framework to encourage consistency across internal tools.
Before Bootstrap, various libraries were used for interface development, which led to
inconsistencies and a high maintenance burden. According to twitter developer Mark
15
Otto:

“A super small group of developers and I got together to design and build a new
internal tool and saw an opportunity to do something more. Through that process, we
saw ourselves build something much more substantial than another internal tool.
Months later, we ended up with an early version of Bootstrap as a way to document and
share common design patterns and assets within the company.”

After a few months of development by a small group, many developers at Twitter began
to contribute to the project as a part of Hack Week, a hackathon-style week for the
Twitter development team. It was renamed from Twitter Blueprint to Bootstrap, and
released as an

16
open source project on August 19, 2011. It has continued to be maintained by Mark
Otto, Jacob Thornton, and a small group of core developers, as well as a large
community of contributors.

On January 31, 2012, Bootstrap 2 was released, which added a twelve-column

responsive grid layout system, inbuilt support for Glyphicons, several new
components, as well as changes to many of the existing components.

On August 19, 2013, Bootstrap 3 was released, which redesigned components to use
flat design, and a mobile first approach.

On October 29, 2014, Mark Otto announced that Bootstrap 4 was in development.
The first alpha version of Bootstrap 4 was released on August 19, 2015.

Bootstrap 3 supports the latest versions of the Google Chrome, Firefox, Internet
Explorer, Opera, and Safari (except on Windows). It additionally supports back to
IE8 and the latest Firefox Extended Support Release (ESR).

Since 2.0, Bootstrap supports responsive web design. This means the layout of web
pages adjusts dynamically, taking into account the characteristics of the device used
(desktop, tablet, mobile phone).

Starting with version 3.0, Bootstrap adopted a mobile-first design philosophy,

emphasizing responsive design by default.

The version 4.0 alpha release added Sass and flexbox support.

Installing and linking bootstrap to the HTML page:

 Install bootstrap from https://getbootstrap.com/

 Copy the bootstrap.min.css file to your CSS folder and link it to the HTML
page in the similar manner to how any other CSS file is linked.
 Link the bootstrap.min.js file which is present in the JS folder of the bootstrap.
It can be linked using script tag. Eg: <script src=”url to bootstrap.min.js”></script>

17
 Now use bootstrap classes to reduce the work of designing which was earlier
done through CSS.

3.2 SCRIPTING

There are two scripting methodologies.

1. Server side scripting: This scripting is done at the server end

2. Client side scripting: This scripting is done at the client end or the browser

18
 3.2.1 SERVER SIDE SCRIPTING

Server-side scripting is a technique used in web development which involves

employing scripts on a web server which produce a response customized for each
user’s (client’s) request to the website. The alternative is for the web server itself to
deliver a static web page. Scripts can be written in any of a number of server-side
scripting languages that are available (see below). Server-side scripting is
distinguished from client-side scripting where embedded scripts, such as JavaScript,
are run client-side in a web browser, but both techniques are often used together.

Server-side scripting is often used to provide a customized interface for the user.
These scripts may assemble client characteristics for use in customizing the response
based on those characteristics, the user’s requirements, access rights, etc. Server-
side scripting also enables the website owner to hide the source code that generates
the interface, whereas with client-side scripting, the user has access to all the code
received by the client. A down-side to the use of server-side scripting is that the
client needs to make further requests over the network to the server in order to show
new information to the user via the web browser. These requests can slow down the
experience for the user, place more load on the server, and prevent use of the
application when the user is disconnected from the server.

When the server serves data in a commonly used manner, for example according to
the HTTP or FTP protocols, users may have their choice of a number of client
programs (most modern web browsers can request and receive data using both of
those protocols). In the case of more specialized applications, programmers may
write their own server, client, and communications protocol that can only be used
with one another.

Programs that run on a user’s local computer without ever sending or receiving data
over a network are not considered clients, and so the operations of such programs
would not be considered client-side operations.

3.2.2 Server Side scripting Languages

19
There are several languages that can be used for server-side programming:
 PHP
 ASP.NET (C# OR Visual Basic)
 C++
 Java and JSP
 Python
 Ruby on Rails and so on.

20
 Fig 3.2.1

3.2.3 CLIENT SIDE SCRIPTING

Client-side scripting is changing interface behaviors within a specific web page in

response to mouse or keyboard actions, or at specified timing events. In this case,
the dynamic behavior occurs within the presentation. The client-side content is
generated on the user's local computer system.

Such web pages use presentation technology called rich interfaced pages. Client-
side scripting languages like JavaScript or ActionScript, used for Dynamic HTML
(DHTML) and Flash technologies respectively, are frequently used to orchestrate
media types (sound, animations, changing text, etc.) of the presentation. Client-
side scripting also allows the use of remote scripting, a technique by which the
DHTML page requests additional information from a server, using a hidden frame,

21
XML Http Requests, or a Web service.

The first widespread use of JavaScript was in 1997, when the language was
standardized as ECMAScript and implemented in Netscape 3.

Example:

The client-side content is generated on the client's computer. The web browser
retrieves a page from the server, then processes the code embedded in the page
(typically written in JavaScript) and displays the retrieved page's content to the
user.

The most popularly used client side scripting languages is Java Script. Flow of
request from browser to server:

Fig 3.2.2

3.3 DATABASE

A database is an organized collection of data. It is the collection of schemas,

tables, queries, reports, views, and other objects. The data are typically organized
to model aspects of reality in a way that supports processes requiring information,
such as modelling the availability of rooms in hotels in a way that supports finding
a hotel with vacancies.

22
A database management system (DBMS) is a computer software application that
interacts with the user, other applications, and the database itself to capture and
analyze data. A general-purpose DBMS is designed to allow the definition,
creation, querying, update, and administration of databases. Well-known DBMSs
include MySQL, PostgreSQL, MongoDB, MariaDB, Microsoft SQL Server,
Oracle, Sybase, SAP HANA, MemSQL and IBM DB2. A database is not
generally portable across different DBMSs, but different DBMS can interoperate
by using standards such as SQL and ODBC or JDBC to allow a single application
to work with more than one DBMS. Database management systems are often
classified according to the database model that they support; the most popular
database systems since the 1980s have all supported the relational model as
represented by the SQL language. Sometimes a DBMS is loosely referred to as a
"database".

23
 CHAPTER-4
SOFTWARE REQUIREMENT SPECIFICATION

5.1 Hardware Requirements

The selection of hardware is very important in the existence and proper working of any
software. When selecting hardware, the size and requirements are also important.

5.2 Software Requirements

Number Description
1. Windows 7,8,10,11
2. HTML/CSS/React/Bootstrap/Javascript
3. Firebase Real Time Database
4. Firebase Authentication

24
 CHAPTER-6

DATA FLOW DIAGRAM

Data Flow Diagrams show the flow of data from external entities into the system, and from one
process to another within the system. There are four symbols for drawing a DFD:

I. Rectangles representing external entities, which are sources or destinations of data.

II. Ellipses representing processes, which take data as input, validate and process it and output it.
III. Arrows representing the data flows, which can either, be electronic data or physical items.
IV. Open-ended rectangles or a Disk symbol representing data stores, including electronic stores
such as databases or HTML files and physical stores such as filing cabinets or stacks of paper.

Figures below are the Data Flow Diagrams for the current system. Each process within the system
is first shown as a Context Level DFD and later as a Detailed DFD. The Context Level DFD
provides a conceptual view of the process and its surrounding input, output and data stores. The
Detailed DFD provides a more detailed and comprehensive view of the interaction among the sub-
processes within the system.

Fig 6.1

25
 6.1 DFD-1

Fig 6.1.1

6.2 DFD-2

View food items

Fig 6.2.1

26
Second Level DFD

Fig 6.2.2

27
 6.3 DFD-3

Use Case Diagram

Search Products

Enter City Name

Filter Items

View Items

Fill Contact & Address

Form

Fig 6.3.1

28
 CHAPTER-7

PROJECT

7.1 PROJECT (Advanced Technologies):

Name: CAUSE_CONNECT
7.2 Technologies Used:

 HTML
 CSS
 Bootstrap
 Java Script
 ReactJS
 Node Js
 Express Js
 MongoDB

Server: Apache (XAMPP)

Database: Firebase Real Time Data Base , Firebase Authentication
Operating System: Windows7/8/8.1/10
Team Size: 4

7.3 TECHNICAL DETAILS:

 Front end is designed using HTML, CSS and Bootstrap. React used to
perform behind the screen requests and JavaScript used to perform client side
scripting
 Backend is based on MongoDB & Express Js.
 Backend online host includes a centralized database resident on the server of
Firebase which will be imported via fetch API.
 The forms are made using the HTML, CSS, Bootstrap for designing and
Node js for back-end.
29
CHAPTER - 8

Fig 8.1.1

Fig 8.1.2
30
Fig 8.1.3

31
Fig 8.1.4

32
 Fig 8.1.5

Fig 8.1.6

33
Fig 8.1.7

Fig 8.1.8

34
Fig 8.1.9

35
 CHAPTER-9

MAINTENANCE

During the maintenance phase, adjustments are made to the hardware, software, and
documentation to maintain optimal performance. These changes may include improving the
system's efficiency, fixing problems, enhancing security, or meeting user needs. To prevent
disruptions or negative impacts on the system's performance and security, it is important for
organizations to establish appropriate change management guidelines and procedures.
Minor changes are simpler than major ones and can often be implemented without
significant disruption to regular business operations. For routine changes, there should be
procedures in place for requesting, evaluating, approving, testing, installing, and
documenting website modifications. Keeping accurate and up-to-date hardware and
software inventories is a crucial aspect of all change management processes. Management
should carefully document all modifications to ensure that inventories are accurate.
All technology-related changes should be coordinated through an oversight committee, and
a responsible party should be assigned to manage software patch management programs.
The change management process should involve quality assurance, security, audit,
regulatory compliance, network, and end-user personnel as appropriate. Risk and security
reviews should be conducted whenever system modifications are made to ensure that
controls are maintained.

For maintenance of the website:

1. The database has to be updated regularly according to new available information.

2. Redundant and false information must be removed from the database.
3. New features of Javascript and ES6 can be used for up gradation of website and
to improve the overall performance of the system.
36
 CHAPTER-10

FUTURE SCOPE & FUTURE ENHANCEMENT

PROJECT NAME: CAUSE_CONNECT

1. Cause-Connect would help each and every person to find a platform

where buyers can orders specialties from their nearby.
2. The platform can help chefs and home makers to start their business
careers on a low scale, which they can expand after positive response
from the market.
3. It would provide huge collection of product of all fields.
4. Customers will also get huge discount when they buy items from our
website.
5. We will be providing some special gift on first purchase.

37
 CHAPTER-11

CONCLUSION

In conclusion, virtual restaurants represent a dynamic and innovative

approach to meeting the evolving demands of today's food industry. With
their cost-effective operations, flexibility in menu offerings, and focus on
efficiency and convenience, virtual restaurants have emerged as a viable
alternative to traditional brick-and-mortar establishments.

As we look to the future, the potential for virtual restaurants is limitless.

With advancements in technology, expansion of delivery infrastructure, and
a growing emphasis on sustainability and customer experience, virtual
restaurants are poised to continue their upward trajectory.

By embracing emerging technologies, diversifying menu offerings, and

expanding their reach to new markets, virtual restaurants can stay ahead of
the curve and remain relevant in an increasingly competitive landscape.

In essence, virtual restaurants offer a glimpse into the future of dining—a

future where culinary creativity knows no bounds, where convenience and
quality go hand in hand, and where the joy of food is accessible to all. As we
embark on this culinary journey, let us embrace the opportunities that virtual
restaurants present and savour the flavours of innovation and possibility.

38
 REFERENCES
[1] "What is Web Development? - Definition from
Techopedia". Techopedia.com.
[2] Campbell, Jennifer (2017). Web Design: Introductory. Cengage Learning.
[3] Northwood, Chris (2018-11-19). The Full Stack Developer: Your
Essential Guide to the Everyday Skills Expected of a Modern Full Stack Web
Developer. Apress. ISBN 978-1-4842-4152-3.
[4] "Longer Bio for Tim Berners-Lee". www.w3.org. Retrieved 2022-04-27.
[5] Occhino, Tom; Walke, Jordan. "JS Apps at Facebook". YouTube."18.2.0
(June 14, 2022)". Retrieved 23 June 2022.
[6] Jump up to:a b "React - A JavaScript library for building user
interfaces". reactjs.org. Retrieved 7 April 2018.
[7] "Chapter 1. What Is React? - What React Is and Why It Matters
[Book]". www.oreilly.com. Retrieved 2023-05-06.
[8] Krill, Paul (May 15, 2014). "React: Making faster, smoother UIs for data-
driven Web apps". InfoWorld. Retrieved 2021-02-23.
[9] Hemel, Zef (June 3, 2013). "Facebook's React JavaScript User Interfaces
Library Receives Mixed Reviews". infoq.com. Retrieved 2022-01-11.
[10] Dawson, Chris (July 25, 2014). "JavaScript's History and How it Led To
ReactJS". The New Stack. Retrieved 2020-07-19.
[11] Dere, Mohan (2018-02-19). "How to integrate create-react-app with all
the libraries you need to make a great app". freeCodeCamp. Retrieved 2018-
06-14.
[12] Panchal, Krunal (2018-02-19). "Angular vs React Detailed
Comparison". Groovy Web. Retrieved 2022-04-25.

39
[13] Schwarzmüller, Max (2018-05-01). "React - The Complete
Guide". O'Reilly. Packt Publishing. Retrieved 19 February 2022.
[14] "Components and Props". React. Facebook. Retrieved 7 April 2018.
[15] "Introducing Hooks". react.js. Retrieved 2019-05-20.
[16] "Hooks at a Glance – React". reactjs.org. Retrieved 2019-08-08.
[17] "What the Heck is React Hooks?". Soshace. 2020-01-16.

40