A PROJECT REPORT

on
“O NLINE F OOD ”

Submitted in Partial fulfillment for the award of degree of

Bachelor of Technology
(Computer Science and Engineering )

Mentor: Submitted By:

Mr.Sohan Lal Sharad Baghla
CSE, SKIT 21ESKCS812

Coordinator: HOD:
Mr. Manish Bhardwaj Dr. Mukesh Kumar Gupta
CSE, SKIT CSE, SKIT

Department of Computer Science & Engineering

Swami Keshvanand Institute of Technology, M & G, Jaipur
Ramnagaria (Jagatpura), Jaipur-302017
September, 2022
 Swami Keshvanand Institute of Technology,
Management & Gramothan, Jaipur
Department of Computer Science and Engineering

CERTIFICATE

«Students_Name»«Students_Name»

SHARAD B
BAGHLA
forr completion of 15 days of In
In-House Summer Internship 2022 on Web
forr completion of 15 days of In
In-House Summer Internship 2022 on Web
Development
evelopment using HTML/CSS/JS/PHP .
Development
evelopment using HTML/CSS/JS/PHP from 18 July,2022 to 4
Aug,2022.

Dr. Ramesh K
Kumar Pachar Dr. Mukesh Kumar Gupta Dr. Anil chaudhary
Sh. Jaipal Meel Principal
Dr. Ramesh Kumar Pachar Head,
Dr. Mukesh cse Gupta
Kumar Dr. AnilHead, it
Chaudhary
Director Principal Head, CSE Head, IT

Designed By: Sharad Baghla, 21ESKCS812 i

 ACKNOWLEDGEMENT

It is my pleasure to be indebted to various people, who directly or indirectly con-

tributed in the development of proposed work and who influenced my thinking, be-
havior, and acts during the course of study.

I express my sincere gratitude to Dr. Mukesh Kumar Gupta, Professor and Head,
Department of Computer Science and Engineering for providing me an oppor-
tunity to undergo In-house Internship programme at SKIT, Jaipur. I am thankful
to Mr. Manish Bhardwaj Coordinator (II year In-house internship 2022-23), for
his support, cooperation and motivation provided during the internship for constant
inspiration, presence and blessings. I also extend my sincere appreciation to Mr.
Manish Bhardwaj, Mr. Sumit Kumar, Mr. Pawan Kumar Patidar, Ms. Mamta
Sakpal, Mr. Loveleen Kumar, Mr. Madhav Khatri, Ms. Surbhi Sharma and
Ms. Priyanka Sharma who helped me in learning HTML, CSS, JAVASCRIPT,
PHP and SQL.

I also extend my I also extend my sincere appreciation to Mr. Sohan Lal who
flourished and helped me in lab sessions conducted during internship.

I also extend my sincere appreciation to Mr. Manish Bhardwaj who provided his
valuable suggestions and precious time in accomplishing my report.

At last I must express my sincere heartfelt gratitude to all the staff members of
Department of Computer Science and Engineering, who helped me directly or
indirectly during this course of work.

Sharad Baghla
21ESKCS812

Designed By: Sharad Baghla, 21ESKCS812 ii

 Contents

1 INTRODUCTION 1
1.1 Problem Identification . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Project Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Intended Users . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.4 Tools and Technologies to be used . . . . . . . . . . . . . . . . . . 2

2 METHODOLOGY 6
2.1 Software Model Used . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 Product User Interfaces . . . . . . . . . . . . . . . . . . . . . . . . 8
2.3 Product Feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.4 Design and Implementation Constraints . . . . . . . . . . . . . . . 12
2.5 E-R Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.6 Use-Case Diagrams . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.7 Activity Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3 DEPENDENCIES 16
3.1 Assumptions and Dependencies . . . . . . . . . . . . . . . . . . . 16
3.2 Hardware Requirements . . . . . . . . . . . . . . . . . . . . . . . 16
3.3 Software Requirements . . . . . . . . . . . . . . . . . . . . . . . . 17

4 NON-FUNCTIONAL REQUIREMENTS 18
4.1 Security Requirements . . . . . . . . . . . . . . . . . . . . . . . . 18
4.2 Scalability Requirements . . . . . . . . . . . . . . . . . . . . . . . 18

5 IMPLEMENTATION AND TESTING 19

5.1 Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
5.1.1 HTML Code . . . . . . . . . . . . . . . . . . . . . . . . . 19
5.1.2 CSS Code . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5.2 Code Snipets(Products) . . . . . . . . . . . . . . . . . . . . . . . . 26
5.2.1 CSS Code . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

6 CONCLUSION AND FUTURE SCOPE 32

7 REFERENCES 33

Designed By: Sharad Baghla, 21ESKCS812 iii

 Chapter 1

INTRODUCTION

1.1 Problem Identification

Food security is one of the main ethical issues in food service. Since food is at the
center of every restaurant, you should treat it with the utmost care. As a restau-
ranteur, you can encounter many food transportation issues such as the items not
arriving on time, needing temperature-controlled transportation, or being contami-
nated. These can lead to other poor food safety problems in restaurant like customers
or staff getting sick. The truth is even if you know how to manage restaurant staff,
you won’t have the time to do that and also keep a close eye on day-to-day oper-
ations. Plenty of restaurant problems and their solutions have to do with customer
service. To turn customers into return customers, you need to keep them happy and
offer them a flawless dining experience. This can be particularly challenging when
they’re disrespectful or disruptive, such as when they’re clearly inebriated and are
asking for more alcohol.

1.2 Project Scope

Food Ordering app can sale Food product, preferred brands, kitchen needs, essential
restaurant supplies and more, through this online, onestop Food store. It provides
you with a convenient way to sale from your Food shopping app. You can use this
app as one big super market app to sale product of your store. This app make easy
for user to buy product from store with easy steps and store can get easy order.

1.3 Intended Users

Food lovers or popularly known as ‘Foodies’ have an ardent interest in food. They
are a prominent hobbyist group found all over the world and thrive on their colourful
palate. They are constantly on the lookout for more interesting foods to try, making
them an interesting segment in the market. Here are some high-quality audience
segments that can help target foodies.

Designed By: Sharad Baghla, 21ESKCS812 1

 • Customer :-
Customer interacts with system directly in order to place order modify order
get bill and give feedback.

• Admin :-
Admin’s job is to manage the inventory and other information related to menu
and shapes in the system.

1.4 Tools and Technologies to be used

There are following Web technology has used for build this Educational website.
• HTML :-
The HyperText Markup Language or HTML is the standard markup language
for documents designed to be displayed in a web browser. It can be assisted
by technologies such as Cascading Style Sheets (CSS) and scripting languages
such as JavaScript. Web browsers receive HTML documents from a web server
or from local storage and render the documents into multimedia web pages.
HTML describes the structure of a web page semantically and originally in-
cluded 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.
HTML provides a means to create structured documents by denoting structural
semantics for text such as headings, paragraphs, lists, links, quotes and other
items. The HyperText Markup Language or HTML is the standard markup
language for documents designed to be displayed in a web browser. It can be
assisted by technologies such as Cascading Style Sheets (CSS) and scripting
languages such as JavaScript. Web browsers receive HTML documents from
a web server or from local storage and render the documents into multimedia
web pages. HTML describes the structure of a web page semantically and orig-
inally 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.
HTML 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 image tag and input tag directly introduce content into the page.
Other tags such as paragraph tag surround and provide information about doc-
ument text and may include other tags as sub-elements.

Designed By: Sharad Baghla, 21ESKCS812 2

 • CSS :-
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language such as HTML
or XML (including XML dialects such as SVG, MathML or XHTML) CSS
is a cornerstone technology of the World Wide Web, alongside HTML and
JavaScript CSS is designed to enable the separation of presentation and con-
tent, including layout, colors, and fonts. This separation can improve content
accessibility; provide more flexibility and control in the specification of pre-
sentation characteristics; enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file, which reduces complexity
and repetition in the structural content; and enable the .css file to be cached to
improve the page load speed between the pages that share the file and its for-
matting. Separation of formatting and content also makes it feasible to present
the same markup page in different styles for different rendering methods, such
as onscreen, in print, by voice (via speech-based browser or screen reader),
and on Braille-based tactile devices. CSS also has rules for alternate format-
ting if the content is accessed on a mobile device. CSS is designed to enable
the separation of presentation and content, including layout, colors, and fonts.
This separation can improve content accessibility; provide more flexibility and
control in the specification of presentation characteristics; enable multiple web
pages to share formatting by specifying the relevant CSS in a separate .css file,
which reduces complexity and repetition in the structural content; and enable
the .css file to be cached to improve the page load speed between the pages
that share the file and its formatting. Separation of formatting and content also
makes it feasible to present the same markup page in different styles for differ-
ent rendering methods, such as on-screen, in print, by voice (via speech-based
browser or screen reader), and on Braille-based tactile devices. CSS also has
rules for alternate formatting if the content is accessed on a mobile device. The
name cascading comes from the specified priority scheme to determine which
style rule applies if more than one rule matches a particular element. This cas-
cading priority scheme is predictable.

• Javascript :-
JavaScript (/dvskrpt/), often abbreviated as JS, is a programming language that
is one of the core technologies of the World Wide Web, alongside HTML and
CSS. JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled pro-
gramming language with first-class functions. While it is most well-known as
the scripting language for Web pages, many non-browser environments also
use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a
prototype-based, multi-paradigm, single-threaded, dynamic language, support-
ing object-oriented, imperative, and declarative (e.g. functional programming)
styles. JavaScript is a high-level, often just-in-time compiled language that con-

Designed By: Sharad Baghla, 21ESKCS812 3

 forms to the ECMAScript standard. It has dynamic typing, prototype-based ob-
jectorientation, and first-class functions. It is multi-paradigm, supporting event-
driven, functional, and imperative programming styles. It has application pro-
gramming interfaces (APIs) for working with text, dates, regular expressions,
standard data structures, and the Document Object Model (DOM). JavaScript
often abbreviated as JS, is a programming language that is one of the core tech-
nologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98
percent of websites use JavaScript on the client side for web page behavior,
often incorporating third-party libraries. All major web browsers have a dedi-
cated JavaScript engine to execute the code on users’ devices. The JavaScript
client-side mechanism provides many advantages over traditional CGI server-
side scripts. For example, you might use JavaScript to check if the user has
entered a valid e-mail address in a form field. The JavaScript code is executed
when the user submits the form, and only if all the entries are valid, they would
be submitted to the Web Server. JavaScript can be used to trap user-initiated
events such as button clicks, link navigation, and other actions that the user
initiates explicitly or implicitly.
• PHP :-
PHP code is usually processed on a web server by a PHP interpreter imple-
mented as a module, a daemon or as a Common Gateway Interface executable.
On a web server, the result of the interpreted and executed PHP code – which
may be any type of data, such as generated HTML or binary image data –
would form the whole or part of an HTTP response. Various web template
systems, web content management systems, and web frameworks exist which
can be employed to orchestrate or facilitate the generation of that response.
Additionally, PHP can be used for many programming tasks outside the web
context, such as standalone graphical applications and robotic drone control.
PHP code can also be directly executed from the command line. The stan-
dard PHP interpreter, powered by the Zend Engine, is free software released
under the PHP License. PHP has been widely ported and can be deployed on
most web servers on a variety of operating systems and platforms. PHP is a
general-purpose scripting language geared toward web development. It was
originally created by Danish-Canadian programmer Rasmus Lerdorf in 1994.
The PHP reference implementation is now produced by The PHP Group. PHP
originally stood for Personal Home Page, but it now stands for the recursive
initialism PHP: Hypertext Preprocessor. PHP code is usually processed on a
web server by a PHP interpreter implemented as a module, a daemon or as a
Common Gateway Interface (CGI) executable. On a web server, the result of
the interpreted and executed PHP code – which may be any type of data, such
as generated HTML or binary image data – would form the whole or part of
an HTTP response. Various web template systems, web content management
systems, and web frameworks exist which can be employed to orchestrate or fa-

Designed By: Sharad Baghla, 21ESKCS812 4

 cilitate the generation of that response. Additionally, PHP can be used for many
programming tasks outside the web context, such as standalone graphical ap-
plications and robotic drone control. PHP code can also be directly executed
from the command line.
• Mysql :-
MySQL is an Oracle-backed open source relational database management sys-
tem (RDBMS) based on Structured Query Language (SQL). MySQL runs on
virtually all platforms, including Linux, UNIX and Windows. Although it can
be used in a wide range of applications, MySQL is most often associated with
web applications and online publishing. MySQL is an important component
of an open source enterprise stack called LAMP. LAMP is a web development
platform that uses Linux as the operating system, Apache as the web server,
MySQL as the relational database management system and PHP as the object-
oriented scripting language. (Sometimes Perl or Python is used instead of PHP)
A relational database stores data in separate tables rather than putting all the
data in one big storeroom. The database structures are organized into physical
files optimized for speed. The logical model, with objects such as databases,
tables, views, rows, and columns, offers a flexible programming environment.
You set up rules governing the relationships between different data fields, such
as one-to-one, one-to-many, unique, required or optional, and “pointers” be-
tween different tables. The database enforces these rules, so that with a well-
designed database, your application never sees inconsistent, duplicate, orphan,
out-of-date, or missing data. The SQL part of “MySQL” stands for “Structured
Query Language”. SQL is the most common standardized language used to
access databases. Depending on your programming environment, you might
enter SQL directly (for example, to generate reports), embed SQL statements
into code written in another language, or use a language-specific API that hides
the SQL syntax. SQL is defined by the ANSI/ISO SQL Standard. The SQL
standard has been evolving since 1986 and several versions exist. In this man-
ual, “SQL-92” refers to the standard released in 1992, “SQL:1999” refers to
the standard released in 1999, and “SQL:2003” refers to the current version
of the standard. We use the phrase “the SQL standard” to mean the current
version of the SQL Standard at any time. A database is a structured collection
of data. It may be anything from a simple shopping list to a picture gallery or
the vast amounts of information in a corporate network. To add, access, and
process data stored in a computer database, you need a database management
system such as MySQL Server. Since computers are very good at handling
large amounts of data, database management systems play a central role in
computing, as standalone utilities, or as parts of other applications.

Designed By: Sharad Baghla, 21ESKCS812 5

 Chapter 2

METHODOLOGY

2.1 Software Model Used

Water Fall Method
This Document plays a vital role in the software development life cycle (SDLC)
as it describes the complete requirements of thee system.It is meant for use by the
developers and will be the basic during testing phase.Any changes made to the re-
quirements in the future will have to go through formal change approval process.
WATER FALL MODEL was being chosen because all requirements were known be-
forehand and the objective of our software development is the computerization/au-
tomation of an already existing working system.

Designed By: Sharad Baghla, 21ESKCS812 6

The difference phase in Water Fall Model are -
• Requirement Analysis
In this phase, all requirements of the project are analyzed and document in a
specification document and a feasibility analysis is done to check if the require-
ments are valid.
• System Design
In this phase, the system design is prepared which specifies hardware and sys-
tem requirements such as data layers, programming languages, network infras-
tructure, user interfaces, etc.
• Implementation
As the name implies in this phase the source code is written as per require-
ments.The physical design specifications are turned into a working code.The
system is developed in small programs called units,after which these units are
integrated.
• Testing and Deployment
The code is then handed over to the testing team.Testers check the program for
all possible defects,by running test cases either manually or by automation.And
last the software is deployed into alive environment (client’s server) in order to
test its performance.
• Maintenance
There are some issues which come up in the client environment. To fix those
issues, patches are released. Also to enhance the product some better versions
are released. Maintenance is done to deliver these changes in the customer
environment.
• Advantages of Waterfall Mode:
1. Upfront documentation and planning stages allow for large or shifting teams
to remain informed and move towards a common goal.
2. Forces structured, disciplined organization.
3. Is simple to understand, follow and arrange tasks.
4. Facilities departmentalization and managerial control based on schedule or
deadlines.
5. Clearly defines milestones and deadlines.
6. Easy to manage due to the rigidity of the model. Each phase has specific
deliverables and a review process.
7. Phases are processed and completed one at a time.
8. Works well for smaller projects where requirements are very well under-
stood.
9. Easy to arrange tasks.

Designed By: Sharad Baghla, 21ESKCS812 7

2.2 Product User Interfaces
Following are the User Interfaces of project.
1. Loading Page
This is the loading page of our website which is uploaded as a gif and can be
changed as per user preference.

2. Home Page
This is how the home page of our site looks where we used anchor tag on the
Home, Dishes, Menu, etc. It contains the overview or short information of the
site

Designed By: Sharad Baghla, 21ESKCS812 8

 3. Dishes
This section of the website shows the variety of dishes that are delivered by our
firm. It also has a rating system and image of the dish for the user to easily
choose what to order

4. About This section contains the information about the dishes on how its made
and its benefits to our health. This helps the user select the dish of particular
nutrient that he/she wants

Designed By: Sharad Baghla, 21ESKCS812 9

 5. Menu These are the detailed view of the dishes, deserts that are delivered by us.
We serve evrything from fastfood to healthy food and even beverages such has
ice-cream, mocktails and cocktails.One can also put a dish in favorite section if
he/she wants to reorder it.

Second menu page contains all the remaining dishes in the sane format as the
menu page one. You can see the stars below the image that shows you the ver-
ified customers reviews on that particular dish.

Designed By: Sharad Baghla, 21ESKCS812 10

 6. Review This section contains the review of verified users who have ordered
food from our site. You can check a person review on a particular dish and may
think or trying it or decide whether it is good for you or not.

7. Order This section is for ordering the dishes you have put in cart. You have
to enter the details as requested and your permanent address with your phone
number for us to contact you in case of any failure in order.

Designed By: Sharad Baghla, 21ESKCS812 11

 8. Search This helps you navigate quickly to any part of the website without hav-
ing to scroll through the entire site.

2.3 Product Feature

1. Users can order food anytime and anywhere.
2. On-Demand Food Ordering App Push Notifications.
3. Providing Contact Information for the Delivery Person.
4. Reward/Discount Programs, Cashback Programs, and Loyalty Programs.
5. Users can make payment and contact team if any issue is there.

2.4 Design and Implementation Constraints

1. Operating system constraints
• System should be compatible and will smoothly run on windows xp or
above.
2. Device Constraints
• Codexpert core system and its user interface should be compatible with
Windows.

Designed By: Sharad Baghla, 21ESKCS812 12

2.5 E-R Diagram
ER Diagram stands for Entity Relationship Diagram, also known as ERD is a di-
agram that displays the relationship of entity sets stored in a database. In other
words, ER diagrams help to explain the logical structure of databases. ER diagrams
are created based on three basic concepts: entities, attributes and relationships. ER
Diagrams contain different symbols that use rectangles to represent entities, ovals to
define attributes and diamond shapes to represent relationships.

This ER diagram for a coffee store represents the entity of a supermarket manage-
ment system.This ER diagram of a Online Food store depicts all the visual instru-
ments of database tables and the relationships between customers,sales,stores,products,etc.
It used structured data to define the relationships between structured data groups of
online Online Food management system functionalities

Designed By: Sharad Baghla, 21ESKCS812 13

2.6 Use-Case Diagrams
Use-case diagrams describe the high-level functions and scope of a system. These
diagrams also identify the interactions between the system and its actors. The use
cases and actors in use-case diagrams describe what the system does and how the
actors use it, but not how the system operates internally. A use case outlines the suc-
cess and failure scenarios that can occur when the actor(s) interact with the system.
In this section, you’d establish the main success scenario, i.e., the most desirable
outcome between the actor and the system. A use case is a written description of
how users will perform tasks on your website. It outlines, from a user’s point of
view, a system’s behavior as it responds to a request. Each use case is represented as
a sequence of simple steps, beginning with a user’s goal and ending when that goal
is fulfilled.

This use case diagram is a graphic depiction of interactions among the elements of
Online Food management system. It represents the methodology used in system
analysis to identify ,clarify and organize system requirements of online Online Food
management system.
1. Customer : Use cases of customer are to login, view products, add to cart, make
payments.
2. Database server : Use cases of database server are validate account,manage
customer,manage products,sales etc.

Designed By: Sharad Baghla, 21ESKCS812 14

2.7 Activity Diagram
To have a clear understanding of it, let me tell you its purpose and role. The Online
Food Ordering System must have an activity diagram so that the programmers have
a basis on how the software should approach its users.

It is because the activity diagram guides the programmer in creating the software
and its must-have behavior. So if you want friendly and effective or easy-to-use
software, then you must also complete the activity diagram. Through the activity
diagram, you’ll be able to illustrate the flow of activities and know what should be
the interactions between the Online Food Ordering System and its users. The activity
diagram will also help your readers and users understand how to use the system.

Designed By: Sharad Baghla, 21ESKCS812 15

 Chapter 3

DEPENDENCIES

3.1 Assumptions and Dependencies

One assumption about the software is that it will always be used on And tablets
that have enough resources to run the application if the tablet does not have enough
hardware resources available for the application then maybe some are used where
the application does not work as intended or not even at all. The application uses
firebase database for online storage of information like Orders and many items that
need to be in working state. If the fire bass interface changes the application need to
be adjusted accordingly. PC should have min.2Gb RAM ,Windows xp (32-bit) and
dual core.Website use mysql database for online storage of information like login
information,bookings that need to be in working state. System should have Internet
Access.

3.2 Hardware Requirements

• We strongly recommend a computer fewer than 5 years old.
• Must have atleast AMD Ryzen processor or Intel Core i5 (8th generation).
• Processor: Minimum 1 GHz; Recommended 2GHz or more
• Ethernet connection (LAN) OR a wireless adapter (Wi-Fi)
• Hard Drive: Minimum 32 GB; Recommended 64 GB or more
• Memory (RAM): Minimum 1 GB; Recommended 4 GB or above
• Sound card w/speakers
• Screen resolution of 1366 X 768 pixels is needed for better visibility.
• Some classes require a camera and microphone

Designed By: Sharad Baghla, 21ESKCS812 16

3.3 Software Requirements
• Server Requirements
– Operating System: Microsoft Windows7
– Database Server: MySQL.5.1.30 database(Windows)
– Web Server: Apache 2.2.11
– Tools/IDE :V.S.Code
– Technologies Used : HTML,CSS,JAVA SCRIPT
• Client Requirements
– Internet browser: Internet Explorer 6.0 or above,Google chrome,Mozilla
Firefox

Designed By: Sharad Baghla, 21ESKCS812 17

 Chapter 4

NON-FUNCTIONAL REQUIREMENTS

4.1 Security Requirements

There is a need for a proper and encrypted login authentication for head chef and
admin as employee sensitive information as well as inventory should be protected
form hacking.

4.2 Scalability Requirements

Selection of serve side configuration and database software should be done in such
as manner that a large number of visitor’s order can be booked and seats can be of-
fered to them.

Designed By: Sharad Baghla, 21ESKCS812 18

 Chapter 5

IMPLEMENTATION AND TESTING

5.1 Code
5.1.1 HTML Code
Firstly we provided the HTML codes for the navigation bar of the website.We use a
’header’ name class to create this.Contents of navigation bar are coded with the help
of ’Unordered list’ tag.We use image tag to insert images.

After that we just inserted 3 random images form our products by image tag. We
use input tag to tag the inputs from the user and button tag tho create a button
named”Send Message”.In the last we provided the code of the footer. We also use
text-margin,padding from left and right both,gray-scale filter for brands logo,box
shadow,width,and different colors filters to give an unique style to our website. In
the last we copy the code of footer of the website which is same as of home page
footer. There’s no need to fix every individual page. We design CSS file of brands
section home page in such a manner that if user clicks on the image of the brand
logo it changes from gray to its original color.

Designed By: Sharad Baghla, 21ESKCS812 19

After then we created Featured products section by giving title using ’h2’heading
tag.We also use image tag to insert images of the products,paragraph tag to dis-
play the prices of the products.We also use text-margin,padding from left and right
both,gray-scale filter for brands logo,box shadow,width,and different colors filters to
give an unique style to our website.

We use ’h4’ heading tag to display the names of the products and italic tag to display
ratings.After this we created a new section named Latest products in a division tag.
We use heading tags to display the address,phone no.and email-id to contact us and
paragraph tag for their information.We use form tag to create the contact form on
the page. Latest Products include total 3 products.To insert images of the products
we use image tag,paragraph tag for details. Also I have used button icons which
are implemented from inbuilt libraries.The main reason for using buttons is that it
makes the website attractive which in turn enhances the user experience. Buttons
also enhance usability of our website

Designed By: Sharad Baghla, 21ESKCS812 20

In this we also mention links of different pages by using anchor tag. We use in-
put tags to take inputs from the user.We create different input fields for the user
according to different forms. In the above snippets I have provided the reviews of
the customer who have used our services. This section uses tags like div tag , image
tag , anchor tags,para tags etc. Class id are used to provide the more attractive as-
pects to website . Classes names like box,stars,user etc. are used. Different headings
are provided using different heading tags.Icons like stars (half, full filled stars) are
used. These are contact section snippets of our website where we are taking user
details to supply our food orders. This section provides a form to be filled by the
customer.This section also includes the map which helps the user to get directions if
they want to visit the restro.

CSS not only makes web pages easy on the eye, it also allows for user-friendly
formatting. When buttons and text are in logical places and well organized, user
experience improves.If you need to change the format of a specific set of pages, it’s

Designed By: Sharad Baghla, 21ESKCS812 21

easy to do so with CSS. There’s no need to fix every individual page.

After that we inserted some brands logo images using image tag. The above code
snippets include the different social media handles on which our Online food has
an account and where people can get in touch with us.We post regularly on these
accounts so that users can be up to date about our Online food. Following are the
social media apps linked with our website :
- Facebook
- Twitter
- Instagram
- Pinterest etc.
The user can access the different sections like Home , About , Menu, Products, Con-
tacts, Reviews etc. directly from this section from here, as we have provided the
navigation bar.

Now we created the last section of the home page which is named as ’footer’. To
create this we use image tag to insert logo image ,unordered tags and list tag for

Designed By: Sharad Baghla, 21ESKCS812 22

different purposes. We also use button tag to create login and register button.In the
last we copy the code of the footer of the website. Now we created a new section for
exclusive products using a new division tag.In this we again use image tag to insert
image, paragraph details to display the details of the product,’h1’ heading tag for
product name and button tag for ’ORDER NOW’ button.

In the last we provided the code of the footer. We also use text-margin,padding
from left and right both,gray-scale filter for brands logo,box shadow,width,and dif-
ferent colors filters to give an unique style to our website. We also use box-shadow
filter,height and width filter and other filters for the styling.

5.1.2 CSS Code

In the CSS code first we set the margin,padding and box size.Then we set filters
for the body of the page.Then we set display, padding, align items,color and many
more filters for different classes. We also use text-margin,padding from left and right

Designed By: Sharad Baghla, 21ESKCS812 23

both,gray-scale filter for brands logo,box shadow,width,and different colors filters to
give an unique style to our website.

After then we created Featured products section by giving title using ’h2’heading
tag.We also use image tag to insert images of the products,paragraph tag to dis-
play the prices of the products.We also use text-margin,padding from left and right
both,gray-scale filter for brands logo,box shadow,width,and different colors filters to
give an unique style to our website.

This use case diagram is a graphic depiction of interactions among the elements
of Online Food management system.
It represents the methodology used in system analysis to identify ,clarify and orga-
nize system requirements of online Online Food management system. Then there is
banner section which is showing limited offers and discount offers . It also contains
about us section ,that section uses different id and class to provide them in more
presentable format.

Designed By: Sharad Baghla, 21ESKCS812 24

Along with the different food items I have mentioned there price and discount. For
all these attributes I have used different classes and id . Here, I have used the fol-
lowing tags:
- Div tags
- Image tags
- Anchor tag etc. Also I have used button icons which are implemented from inbuilt
libraries.The main reason for using buttons is that it makes the website attractive
which in turn enhances the user experience. Buttons also enhance usability of our
website

We also use text-margin,padding from left and right both,gray-scale filter for brands
logo,box shadow,width,and different colors filters to give an unique style to our web-
site. To define a list or menu of commands the HTML menu tag is used. The user
can perform or activate these commands. It thus creates a context menu as well as a
list menu and can contain multiple li tags or menu item tags elements within it.

Designed By: Sharad Baghla, 21ESKCS812 25

By using these filters in our CSS file we create our first page which is home page of
our website and this take total 197 lines of code to complete. Now we created a new
section for exclusive products using a new division tag.In this we again use image
tag to insert image, paragraph details to display the details of the product,’h1’ head-
ing tag for product name and button tag for ’ORDER NOW’ button. I have provided
the users with the price of the products, an image of the product for reference and
customers can also rate these products. I have also provided users the ability to add
any item to cart , if they want to buy.

5.2 Code Snipets(Products)

HTML Code
In HTML file of products page we copy the code of navigation bar which is created
in the home page file.In this we also mention links of different pages by using anchor
tag. We use transform-translateY filter for the hover effect applied on the images of
our team members .Thus by using these filters we design our about us page. We use
input tags to take inputs from the user.We create different input fields for the user ac-
cording to different forms. We also use button tag to create login and register button.
In the snippet below, to make my website attractive and to enhance user experience
I have used the following CSS properties:
- Display
- Position
- Background
- Width
- Transform
- Font size
- Cursor
- Height

Designed By: Sharad Baghla, 21ESKCS812 26

The above code snippet consists of the following CSS properties
- Border
- Outline
- Box-sizing
- Transition
- Overflow
- Text-transition
- Border radius
- Scroll Behavior

We also inserted products images by using image tag.We write the names of the
products by using heading tag and prices by using paragraph tag. In the next snip-
pet, product section starts and menu section ends. Products are the most important
aspect of any website. It tells the user if the thing he is looking for is available at
the website or not. Following are the product section snippets of our website where

Designed By: Sharad Baghla, 21ESKCS812 27

I have told about different products available at our Food shop and discount offered
on them, if any.

We currently provide the link of the single product details page on the image and
name of the very first product inserted which is Red Printed T-shirt.We also use divi-
sion tags for creating different sections on the page. After then we created Featured
products section by giving title using ’h2’heading tag.We also use image tag to insert
images of the products,paragraph tag to display the prices of the products.

Here I have used the following icons:

- Shopping cart
- Heart icons
- View icons etc.
I have used following tags to make the page more attractive :
- Anchor tag
- Div tag
- Image tag.

Designed By: Sharad Baghla, 21ESKCS812 28

I have also used class and id to provide more presentation to our page. I have pro-
vided the users with the price of the products, an image of the product for reference.

We created one more section named as Latest Products on this page which contains
different products which are inserted by using image, paragraph ,italic and heading
tag.We use ’h4’ heading tag to display the names of the products and italic tag to dis-
play ratings.After this we created a new section named Latest products in a division
tag. In the HTML file of this page we again firstly copy the codes for the navigation
bar of this page.After then we provide a sample image of the google map by using
image tag. In the next snippet review section starts. Reviews are very important
for a business as it helps us understand our customers better and improve customer
service. The review feature allows consumers to have a voice and creates customer
loyalty. No doubt, we are social creatures since the moment we come to this world
and we are interested in knowing what other say before we make our buying de-
cisions. Much like we would ask friends and family for recommendations, review
sites allow us to do this online with just some clicks.

Designed By: Sharad Baghla, 21ESKCS812 29

In the last we copy the code of footer of the website which is same as of home
page footer. We use heading tags to display the address,phone no.and email-id to
contact us and paragraph tag for their information.We use form tag to create the
contact form on the page.

5.2.1 CSS Code

We use different types of filters in the CSS filter for the styling of products page
such as padding,text align, justify- content, outline,margin,display,border,cursor,etc.
We also use image tag to insert images of the products,paragraph tag to display the
prices of the products. We use transform-translateY filter for the hover effect applied
on the images of our team members. We provided details and email-id of our team
members by using paragraph tag and in the last we copy the code of the footer of the
website in this file. We also use button tag to create login and register button.In the
last we copy the code of the footer of the website.

Designed By: Sharad Baghla, 21ESKCS812 30

In the CSS file of this page we use padding filter for space.Font-size and Fontweight
filters to give style to the fonts used on the page.We use some other filters such as
border filter,height and width filter,color filter to give amazing styling to our page.We
use input tags to take inputs from the user. We create different input fields for the
user according to different forms.

In the CSS file of this page we use background radial-gradient filter for the back-
ground red color of the page. We also use padding filter,border-color filter,text-
decoration filter and some other filters for the styling of this page. We also use button
tag to create login and register button.In the last we copy the code of the footer of the
website. We also use box-shadow filter,height and width filter and other filters for
the styling. Thus by using these filters we design our about us page. In HTML file
of products page we copy the code of navigation bar which is created in the home
page file. We also use button tag to create login and register button.In the last we
copy the code of the footer of the website.

Designed By: Sharad Baghla, 21ESKCS812 31

 Chapter 6

CONCLUSION AND FUTURE SCOPE

A description of the background and context of the project and its relation to work
already done in the area. Made statement of the aims and objectives of the project.
The description of Purpose. Scope, and applicability We define the problem on
which we are working in the project. We describe the requirement Specifications
of the system and the actions that can be done on these things. We understand the
problem domain and produce a model of the system, which describes operations
that can be performed on the system. We included features and operations in detail,
including screen layouts. We designed user interface and security issues related to
system. Finally the system is implemented and tested according to test cases.

Here we can maintain the records of Food Item and Category. Also, as it can be seen
that now-a-days the players are versatile,i.e. so there is a scope for introducing a
method to maintain the Online Food Ordering System. Enhancements can be done
to maintain all the Food Item, Category,Customer, Order, Confirm Order.We have
left all the options open so that if there is any other future requirement in the system
by the user for the enhancement of the system then it is possible to implement them.

Designed By: Sharad Baghla, 21ESKCS812 32

 Chapter 7

REFERENCES

We take help from many of the websites to create our project which are listed below:
1. HTML form (w3school)
https://www.w3schools.com/html/
2. CSS from GeeksforGeeks
https://www.geeksforgeeks.org/css/
3. Javascript from GeeksforGeeks
https://www.geeksforgeeks.org/javascript/
4. Database from InHouse Summer Intership Training PDF
5. HTML,CSS,JAVASCRIPT(YouTube) [Login/Sign]
https://www.youtube.com/watch?v=piG91X4sV2U
6. HTML, CSS, JAVASCRIPT(YouTube) [Home Page]
https://www.youtube.com/watch?v=LO4YTml3IAQ

Designed By: Sharad Baghla, 21ESKCS812 33