Session: 2023-2024

MINI PROJECT REPORT

ON
“Food Ordering Website”

Bachelor Of Technology In Computer

Science And Engineering

Submitted to – Ms. Rachna Mahawar

(Department of Computer Science & Engineering)

Submitted by –
Student Name Roll No.
Somiya Rana 2200680100319
Smiriti Kapoor 2200680100316

3RD SEMESTER
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
MEERUT INSTITUTE OF ENINEERING AND TECHNOLOGY MEERU
 DECLARATION

We hereby declare that the project entitled – “Food Ordering Website”, which is
being submitted as Mini Project in department of Computer Science and Engineering
to Meerut Institute of Engineering and Technology ,Meerut (U.P.) is authentic record
of our genuine work done under the guidance of Prof. “Rachna Mahawar” of
Computer Science and Engineering , Meerut Institute of Engineering and Technology
, Meerut .

Date: 27-11-2023 Student Name: Somiya Rana

Smiriti Kapoor

Place: MIET Roll No. 2200680100319

2200680100316
 CERTIFICATE

This is to certify that mini project report entitled – “Food Ordering Website “ submitted by
“Somiya Rana’ and “Smiriti Kapoor” has been carried out under the guidance of Prof.
“Rachna Mahawar” of Computer Science and Engineering , Meerut Institute of Engineering
and Technology , Meerut . This project report is approved for Mini Project in 3rd semester in
“department name” from Meerut Institute of Engineering and Technology , Meerut .

Internal Examiner - MS RACHNA MAHAWAR

Date:25-10-2023
 ACKNOWLEDGEMENT

We express our sincere indebtedness towards our guide Prof. “ Rachna Mahawar “
of Computer Science and Engineering , Meerut Institute of Engineering and
Technology , Meerut for her valuable suggestion, guidance and supervision
throughout the work . Without his king patronage and guidance the project would not
have taken shape. I would also like to express my gratitude and sincere regards for
his kind approval of the project. Time to time counseling and advises .

I would also like to thank to our HoD Dr. “ Mukesh Rawat “ , Department of Computer
Science and Engineering , Meerut Institute of Engineering and Technology , Meerut
for his expert advice and counseling from time to time .

We owe sincere thanks to all the faculty members in the department of Computer
Science and Engineering for their kind guidance and engagement time to time .

Date: 25-10-2023 Student Name:

Somiya Rana
Smiriti Kapoor
 TABLE OF CONTENT

Description Page No.

Declaration i
Certificate ii
Acknowledgement iii
Chapter 1 Introduction
Chapter 2 System Design
(Work flow/flow chart/DFD/working principle/
Constructional details of individual components)
Chapter 3 Technology Bucket
3.1 Description of HTML
3.2 Description of CSS
Chapter 4 Output screens
Appendices Implementation code
References
 CHAPTER 1
INTRODUCTION

The ere we live in today, is the digital age . Day by day it changes the lifestyle of people and
is very helpful for every part of life . You can even control your home appliances through
digitally. In order to avoid the rush , which is the major issue in restaurants because ordering
food takes a lot of time while orders are being prepared , we create an online website for a
restaurant through which a customer can easily access all the things belonging to a
restaurant while siting anywhere rather than going to the restaurant .

Why set up an online food ordering system?

Setting up an online food ordering system for your restaurant is a bit of work initially
but will provide you with many long-term benefits.

 Save money: Many third-party services like Uber Eats and

Deliveroo take a commission of up to 30% from every order. Setting
up your own online ordering system will mean some upfront costs,
but once you’re up and running, you’ll only have to pay a
subscription fee and small transaction fee. Square Online charges
just 2.2% per transaction on your restaurant website when your
customers place an order online, with no monthly fees on our free
plan.
 Receive larger orders: Customers feel less rushed when ordering
food online. Studies have shown that orders placed via an online
ordering system are likely to be larger – you’re also able to add
upsell suggestions when a customer is checking out with most
online ordering systems.
 Enjoy flexibility and control: Whether it’s displaying your items
differently, creating bundles, or offering multiple delivery options,
an in-house online ordering system puts you in charge.
 Keep your customers: Third-party sites list your restaurant along
with many others offering similar cuisine, putting you at risk of
losing loyal customers. Your own online ordering system will keep
your customers coming back and away from tempting competitor
offers.
 CHAPTER 2
SYSTEM DESIGN
Designing an online food ordering website for bulk ordering, catering services,
and regular online ordering involves various components and considerations to
ensure a seamless user experience. Here's a high-level overview of the system
design for such a platform:

1. User Interface (UI):

 Homepage: Displays options for regular online ordering, bulk
ordering, and catering services.
 Menu Pages: Categorized menus for regular orders, bulk
orders, and catering with filtering and search options.
 Order Customization: Ability to customize orders, specify
quantities, delivery dates, and any special instructions.
 Checkout Process: Secure and user-friendly payment
gateway for both individual and bulk orders.
 User Account Dashboard: Profiles for customers, catering
managers, and administrators with order history, preferences,
and billing details.
2. Database Management:
 User Data: Store user profiles, order history, preferences,
and payment information securely.
 Menu and Inventory: Manage food items, their availability,
pricing, and descriptions for regular orders, bulk orders, and
catering services.
 Order Processing: Track orders, delivery details, order
statuses, and integrate with the inventory system for stock
management.
3. Authentication and Authorization:
 Implement secure login/registration mechanisms for
customers, catering managers, and admins.
 Role-based access control to manage permissions for different
user types.
4. Order Management:
 Regular Orders: Process individual food orders with delivery
options, real-time tracking, and order status updates.
 Bulk Orders: Allow for larger quantity orders, specific
delivery dates/times, and customized pricing.
 Catering Services: Provide options for event catering,
including menu customization, guest count, venue details, and
delivery logistics.
 5.Integration and External Services:
 Payment Gateway: Integrate a secure payment system that
supports various payment methods.
 Third-Party APIs: Connect with map services for location-
based delivery, messaging services for notifications, and
analytics tools for tracking user behaviour.
6.Logistics and Delivery:
 Implement a robust logistics system to manage delivery
schedules, routes, and optimize for efficient delivery.
 Provide real-time tracking and notifications for users to
monitor their orders.
7.Scalability and Performance:
 Design the system to handle high traffic during peak hours
and scalable to accommodate increased user demand.
 Use caching mechanisms and CDNs to improve website
performance.
8.Security Measures:
 Implement SSL encryption for secure data transmission.
 Regular security audits, data encryption, and measures to
protect against common web vulnerabilities.
9.Feedback and Support:
 Include a feedback system to gather user reviews and ratings.
 Provide customer support channels (chat, email, phone) for
assistance with orders and inquiries.
10.Analytics and Reporting:
 Track user interactions, popular items, order trends, and
generate reports for business insights and decision-making.
 WORK FLOW

Browsing and Restaurant Selection:

Users visit s The Glutton Chili’s website , browse a variety of local

restaurants, and select the one they desire.

Menu Exploration and Order Customization :

User explore the restaurant menu and add items to their cart

Payment and Confirmation:

User proceed to the checkout ,where they securely make payments,

review the order and confirm it.

Order processing and delivery tracking

The restaurant receive the order prepares it, and user can
track the real time delivery status until their delicious meal
arrives at their doorstep

Interface
Our website logo:

Our Services:
Our Clients :

User Registration:
 Appendices
Implementation
Code
1. HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Best Online Food Delivery Service in India |
Glutton_Chilli.com</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media= "screen and (max-width:1035px)"
href="css/phone.css">
<link href="https://fonts.googleapis.com/css2?
family=Baloo+Bhai+2&family=Bree+Serif&family=Caveat&display=swap"
rel="stylesheet">
</head>

<body>
<nav id="navbar">
<div id="logo">
<img src="logo2.png" alt="Glutton Chill.com">
</div>
<ul>
<li class="item"><a href="#home">Home</a></li>
<li class="item"><a href="#services-
container">Services</a></li>
<li class="item"><a href="#client-section">Our
Clients</a></li>
 <li class="item"><a href="#contact">Contact
Us</a></li>

</ul>
</nav>

<section id="home">
<h1 class="h-primary">Welcome to the Glutton Chilli</h1>
<p>For the love of
delicious food, Flavors Inspired by
the Seasons
</p>

<p>Where Every Flavour Tells A Story</p>

<button class="btn">Order Now</button>
</section>
<section id="services-container">
<h1 class="h-primary center">Our Services</h1>
<div id="services">
<div class="box">
<img src="img/img3.jpg" alt="">
<h2 class="h-secondary center">Catering</h2>
<p class="center"> Lorem ipsum dolor sit amet
consectetur adipisicing elit. Soluta praesentium
</p>
</div>
<div class="box">
<img src="img/img5.jpg" alt="">
<h2 class="h-secondary center">Bulk Ordering</h2>
<p class="center"> Lorem ipsum dolor sit amet
consectetur adipisicing elit. Soluta praesentium
</p>
</div>
<div class="box">
<img src="img/FREE DELIVERY POST TEMPLATE.png"
alt="">
<h2 class="h-secondary center">Food Ordering</h2>
<p class="center"> Lorem ipsum dolor sit amet
consectetur adipisicing elit. Soluta praesentium
</p>
</div>
</div>
</section>
<section id="client-section">
<h1 class="h-primary center">Our Clients</h1>
<div id="clients">
 <div class="client-item">
<img src="img/logo2.png" alt="Our Clients">
</div>
<div class="client-item">
<img src="img/logo1.png" alt="Our Clients">
</div>
<div class="client-item">
<img src="img/logo3.png" alt="Our Clients">
</div>
<div class="client-item">
<img src="img/logo4.png" alt="Our Clients">
</div>
<div class="client-item">
<img src="img/logo5.png" alt="Our Clients">
</div>
</div>

</section>

<section id="contact">
<h1 class="h-primary center">Contact Us</h1>
<div id="contact-box">
<form action="">
<div class="form-group">
<label for="name">Name : </label>
<input type="text" name="name" id="name"
placeholder="Enter Your name">
</div>
<div class="form-group">
<label for="email">Email : </label>
<input type="email" name="email" id="email"
placeholder="Enter Your email">
</div>
<div class="form-group">
<label for="phone">Phone number : </label>
<input type="phone" name="phone" id="phone"
placeholder="Enter Your Phone number">
</div>
<div class="form-group">
<label for="Message">Message : </label>
<textarea name="Message" id="Message" cols="30"
rows="10"></textarea>
</div>
</form>
</div>
 </section>

<footer>
<div class="center">
Copyright &copy; www.gluttonchilli.com All rights
reserved!
</div>
</footer>
</body>

</html>
<!-- /* width="90" height="145"*/ -->

2. CSS

/*css reset*/
* {
margin: 0;
padding: 0;

}
html{
scroll-behavior: smooth;
}

/*css variables*/
:root {
--navbar-height: 59px;
}

/*Navigation bar*/
#navbar {
display: flex;
align-items: center;
position: sticky;
top: 0px;
}

#navbar::before {
content: "";
background-color: #260f04a8;
position: absolute;
height: 100%;
 width: 100%;
z-index: -1;
}

/*navigtaion bar: logo and image*/

#logo {

margin: 20px 68px;

#logo img {
height: 56px;
margin: 5px 5px;
}

/*navigtaion bar: list styling*/

#navbar {
position: sticky;

#navbar ul {
display: flex;
font-family: 'Bree Serif', serif;
}

#navbar ul li {

list-style: none;
font-size: 1.5rem;
}

#navbar ul li a {

color: wheat;
display: block;
padding: 6px 10px;
border-radius: 60px;
text-decoration: none;
}

#navbar ul li a:hover {
 color: wheat;
background-color: #260f04ba;
}

/*home section*/
#home {
display: flex;
flex-direction: column;
padding: 3px 200px;
height: 349px;
justify-content: center;
align-items: center;
}

#home::before {
content: "";
position: absolute;
background: url('../bg2.jpg') no-repeat center center/cover;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0.9;
}

#home h1 {
color:wheat ;
background: #260f04ab;
font-size: 2.5rem;
font-family: 'Bree Serif', serif;
padding: 12px;
border-radius: 60px;
}

#home p {
color:wheat ;
background: #260f04ab;

border-radius: 5px;
padding: 5px;
text-align: center;
font-size: 1.5rem;
font-family: 'Bree Serif', serif;
}

/*services section*/
#services {
 margin: 7px;
display: flex;

#services .box {
border: 2px #260f04;
padding: 5px;
height: 270px;
border-radius: 20px;
margin-top: -11px;
}

#services .box img {

display: block;
margin: auto;
padding: 5px;
height: 250px;
width: 250px;
border-radius: 32px;
cursor: pointer;
}

#services .box p {
font-family: 'Bree Serif', serif;
font-size: 1rem;
}

/*client section*/
#client-section {
position: relative;
height: 344px;
}

#client-section::before {
content: "";
position: absolute;
background: url('../img/img6.jpg') no-repeat center
center/cover;
width: 100%;
height: 125%;
z-index: -1;
opacity: 0.7;
}
#clients {
display: flex;
justify-content: center;
align-items: center;
}

.client-item {
padding: 34px;
}

#clients img {
height: 200px;
border-radius: 100px;
cursor: pointer;
}
/*Contact Section*/
#contact{
position: relative;
}
#contact::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.7;
background: url('../contact\ us.jpg') no-repeat center
center/cover;
}
#contact-box{
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 34px;

}
#contact-box form{
width: 40%;

#contact-box label{
font-size: 1.3rem;
font-family: 'Bree Serif', serif;
}
#contact-box input,
#contact-box textarea{
width: 100%;
padding: 0.5rem;
border-radius: 20px;
font-size: 1.1rem;
}
footer{
background: #260f04;
color: wheat;
padding: 1px 20px;

}
/*utility classes*/
.h-primary {
font-size: 2.8rem;
margin-top: 170px;
margin-bottom: 20px;
padding: 2px;
font-family: 'Bree Serif', serif;
}

.h-secondary {
font-size: 1.8rem;
padding: 12px;
font-family: 'Bree Serif', serif;
cursor: pointer;
}

.btn {
padding: 6px 20px;
border: wheat;
background-color: #260f04;
color: wheat;
margin: 17px;
font-size: 1.5rem;
border-radius: 20px;
cursor: pointer;
font-family: 'Bree Serif', serif;
}

.center {
text-align: center;
}
 Chapter 4

Output Screen

References:
Code- HTML and CSS
Images- Pexels.com
Technology used- HTML and CSS
Code- Code with harry