Website For New Restaurants and Venders To Purchase and Sell Products

Raw material delivery system(Quantity
identifier/ delivering the items in need)
Author Name: Nihal Nawaz Kaleem
Author Student ID: 2940424
Supervisor: Dr. Shamik
April 2023
Dissertation submitted in partial fulfilment for the degree of

Bachelor of Science with Honours (BSc Computing Science Hons)
Computing Science and Mathematics

University of Stirling
Abstract
Due to the ongoing fast pace of business the restaurant needs their ingredients as soon as
possible instead of waiting for a long period of time. Due to the ongoing competitive
restaurant business the first priority for the business is to give the customer the best service
possible which ensures customer satisfaction helping build your business, The aim of this
Website is to give the restaurants a variety of choices and giving them different options to
choose from rather than depending on one vender when they have man other good venders
who have better products and better prices to offer and if the old vender doesn’t have a
particular product and the restaurant have to compromise in their service with the help of this
website they can explore different options the other venders have to offer for the restaurants,
The main objective of this website is to give the restaurant the best choices on the available
raw materials and connecting the barrier between the vendors and the restaurant.
Restaurants may miss out the various options of raw materials they can get which this
software can help in giving them different choices and make it easier for them to find and get
it delivered to them instead of looking for different vendors and delivery. As it’s a new website
I will be adding four restaurants name like Karachi Darbar, Nando’s, TGIF and Delhi Darbar and
four vendors Karachi vegetables & fruits, Nesto, LULU and wholesale of fruits and vegetables
(street vendors) For example, if the particular restaurant requires baby carrots and their local
vendor doesn’t have then then they can find it on the website and place the order.
The basic concept of this software is to connect the barrier between the small scale and large
scale venders to the e-commerce industry giving them an idea of what all products can be
available to them and making it easy for both the venders and the restaurant to find or sell
their product and the restaurant can get the products delivered to them instead of going out
and finding for the product it would be available on their door step. This could help them
boost their business in terms of venders their products can be recognized to other people and
in terms of the restaurant they would not need to worry about the raw materials as the
software would tell them how much stock is left and they can order the item.
Problem: - Restaurants play an important role in the world market the aim off an good
restaurant is to provide a good quality food to their customers to maintain their business in
the ongoing competitive market for a good growth of the business they should ensure an good
quality of products and give the customers a good taste if an restaurant lacks in giving services
like food due to not enough raw materials to produce the food it could give an bad review for
their restaurant in the market and most of the customers might not decide on going to the
restaurant again and can affect the growth of the business, The restaurants need their raw
materials as soon as possible to offer their customers the great dishes they prepare and
maintain their image in the market which can help them in the future for their business the
main motive for an restaurant is to provide their customers food on time and not lack in any
raw material which can affect the taste of their food and give them a bad review, The new
venders may find hard time on where to sell their good and to who most of them don’t know
who to sell or where to sell their good rather than streets or markets and are not aware of the
on-going advanced E-commerce world what all the E-commerce world can offer or do to them
and the good sides of putting their goods on sale in the E-commerce market.
Analysis: - The aim of the website is to provide the restaurant on what all products are
available or offered to them in the website and can select the particular vender of their choice
the new restaurant owners would find it easy from where to get their raw materials with
-i-
various choices on different types of raw materials rather than depending on their local
vender and if their local vender delays on the delivery due to lack of an particular ingredient
and the restaurant may find low price products to. The website offers both restaurants and
the venders free delivery up to 3 months due to the beginning stage of the website to gain
popularity in the market and offer same day delivery according to the size of the materials 3
New vendors in the market would find this website useful as they would find a platform on
where they can sell their products and would help them a lot on thee beginning stages to build
their website and show case the products they can offer to the people and the prices. The
payment could be cash on delivery(COD) or end of month pay(EMP) a new feature offered to
the customers the restaurants owners are to pay the amount by end of the month and the
venders will get their money at the beginning of the every month making it easy for the
restaurants and venders.
Objectives:
1. To find out the how many restaurants are nearby to the vender.
2. To know the timing of the vender when does their service starts from.
3. To deliver the materials as soon as possible.
4. To know how the restaurants work to design the website appropriately.
5. Find out the ingredients most in need and keep them in stock.
The project in the end will produce a website which builds the barriers between a
restaurant and its vender and help the venders into selling their products on the E-
commerce platform and boost their business it would also help the restaurants to stay
in stock and order any ingredient they lack of to keep their customers happy. It would
also help the new vender the venders that are new on the market having a platform
to sell their goods in less cost and helping the restraint having different options for
their raw materials (ingredients) initially the website provides the customers with free
delivery to build up the website and later charge some amount in the near future if
the website starts generating good amount, they can go for free delivery with the ad
revenue
Methodology:
1. Defining the requirements.
2. Planning the architecture.
3. Designing the website how it should look like.
4. Start developing the website.
5. Designing the database.
6. Start developing the database.
7. Test them.
8. Update if needed.
-ii-
Achievements: I have achieved knowledge on how the front end development works and the
new challenges I faced and over came in producing the website I even went in dept on learning
about HTML, CSS and JavaScript and knew what all could have been done with these three I
always wanted to learn Web Designing and how to design a website and what all functions
and things could be done for designing a website knowing how websites are made and the
things needed for making a websites the role of HTML for the website and CSS in designing
the website and JavaScript for the different transitions needed, We use a lot of websites in
your day to day life and don’t know what all it take for designing a website the amount of skill,
creative thinking required in making a website I have achieved a lot in the process of making
the website making it semi functional as it is a proto type the front end of the website is fully
designed completely and half of the functions work and the rest needs update in it which can
be done for the future work by others I would say the main achievement for me was that I
believed in myself that I could make such website and I made it.
-iii-
Attestation
I understand the nature of plagiarism, and I am aware of the University’s academic integrity
policy.
I certify that this dissertation reports original work by me during my University project except
for the following (examples given below: adjust according to the circumstances):
The State of art in Section 2. was largely taken from [1] - [7].
The State of art in Section 2.2 was taken from [8] – [10].
The code of website requirement in Section 3 was done by youtube.com/@CyberWarriors.
The code of website requirement in Section 3.2.5 was taken from www.swiperjs.com.
The code discussed in Section 3.5 was done with the help of lecture notes and online resources
from last module.
Signature : Date : 26-04-2023
-iv-
Acknowledgements
I want to use this chance to convey my sincere gratitude to everyone who helped this project
be completed successfully. I want to start by thanking my project mentor/professor, Dr.
Shamik, for their crucial advice, encouragement, and support during the project. Their sage
advice, endurance, and knowledge have been crucial in determining the course and result of
this undertaking. I would like to thank University of Stirling for their assistance and
collaboration, without which this project would not have been feasible. Their assistance,
resources, and support have been crucial to the project's successful completion. I also want
to express my appreciation to my family and friends for their constant help, inspiration, and
drive during the project. They have been a source of strength and inspiration throughout this
journey through their love, support, and encouragement. Finally, I want to thank everyone
who helped this project be completed successfully and to say thank you to everyone for their
contributions. Their assistance, inspiration, and insightful advice have been crucial to the
accomplishment of this endeavour. I want to use this opportunity to show my sincere
gratitude once again to everyone who has helped with this project. I am also extremely
appreciative of all the support and advice I have gotten. I would also like to give a special
thanks to my mom who helped me thru this time when I almost wanted to leave everything
her mental support and her prayers were the main thing which got me going and I would like
to thank my dad to for his support.
-v-
Table of Contents
Raw material delivery system(Quantity identifier/ delivering the items in need) i
Abstract i
Attestation iv
Acknowledgements v
Table of Contents vi
List of Figures viii
1 Introduction
1.1 Introduction to my project. 1
1.2 Scope and Objectives 1
1.3 Achievements 2
1.3.1 Overview of Dissertation 2
2 State-of-The-Art 3
2.1 Food delivery system 3
2.1.1 Growth of delivery apps in the middle east (Past, Present and future). 3
2.1.2 Rising demand for delivery apps 4
2.1.3 Talabat revenue and business model 4
2.1.4 Target customers 5
2.1.5 Commissions 5
2.1.6 Delivery cost 5
2.1.7 advertising cost 5
2.2 Grocery delivery system 6
2.3 Connecting the restaurant and venders. 8
2.3.1 Food/raw materials suppliers for restaurants 8
2.3.2 Getting raw materials suppliers for restaurants 11
2.3.3 Things to keep in mind before connecting raw materials suppliers to
restaurants. 11
3 Website requirements 13
3.1 Overview 13
3.2 Web Page 13
3.2.1 HTML implementation 13
3.2.2 home Section 14
3.2.3 Features 14
3.2.4 products 15
3.2.5 Swiper 15
3.2.6 Restaurant 1 16
-vi-
3.2.10 vender 1 17
3.2.11 vender 2 18
3.2.12 vender 3 18
3.2.13 vender 4 19
3.2.14 Add your products. 19
3.2.15 footer 20
3.2.16 Flow diagram of the website 21
3.3 CSS implementation 21
3.3.1 Stylesheet 22
3.4 JavaScript 28
3.4.1 JavaScript Implementation 28
3.5 Database 31
3.5.1 MongoDB 31
4 Conclusion 38
4.1 Summary 38
4.2 Critical Evaluation of your Achievements 38
4.3 Limitations and Future Work 39
4.4 Critical Reflection on your Project 39
References 40
Appendix 1 42
Appendix 2 – User guide / Installation Guide 45
-vii-
List of Figures
Figure 1 : Talabat class diagram ................................................................................................ 4
Figure 2 : statistics of talabat revenue in the middle east(2019). ............................................. 6
Figure 3 : insta shop UML class diagram ................................................................................... 7
Figure 4 : Statistics of Insta Shop (2020). .................................................................................. 8
Figure 5 : Supply chain............................................................................................................. 10
Figure 6 : home section ........................................................................................................... 14
Figure 7 : features.................................................................................................................... 14
Figure 8 : products. .................................................................................................................. 15
Figure 9 : Swiper slider ............................................................................................................ 15
Figure 10 : categories for restaurant 1. ................................................................................... 16
Figure 14 : products of vender 1. ............................................................................................ 18
Figure 18 : add your products. ................................................................................................ 20
Figure 19 : footer page ............................................................................................................ 20
Figure 19 : flow diagram .......................................................................................................... 21
Figure 20 : media queries. ....................................................................................................... 24
Figure 21 : HTML, CSS and JavaScript ...................................................................................... 29
Figure 22 : mongoDB ............................................................................................................... 32
Figure 23 : Entering the shop details. ...................................................................................... 34
Figure 24 : Entering the items details...................................................................................... 35
Figure 25 : entering the delivery man details.......................................................................... 35
Figure 26 : saved ...................................................................................................................... 35
Figure 27 : details table ........................................................................................................... 36
Figure 28 : Viewing the saved data of shops in mongo db compass. ...................................... 36
Figure 29 : Viewing the saved data of items in mongo db compass. ...................................... 37
Figure 30 : Viewing the saved data of delivery man in mongo db compass. .......................... 37
Figure 31 : question 1 .............................................................................................................. 42
Figure 32 : question 2. ............................................................................................................. 42
Figure 33 : question 3 .............................................................................................................. 42
-viii-
Figure 34 : question 4 .............................................................................................................. 43
Figure 35 : question 5 .............................................................................................................. 43
Figure 36 : question 6 .............................................................................................................. 43
Figure 37 : question 7 .............................................................................................................. 44
Figure 38 : question 8 .............................................................................................................. 44
-ix-
1 Introduction
1.1 Introduction to my project.
Due to the ongoing fast pace of business the restaurant need their
ingredients as soon as possible instead of waiting for a long period of
time. Due to the ongoing competitive restaurant business the first
priority for the business is to give the customer the best service
possible which ensures customer satisfaction helping build your
business, The aim of this software ixs to find the item which is missing
in a restaurant and open the website where there would be options for
the restaurant to choose which item they are looking for and select a
particular vendor of the restaurant choice. The main objective of this
website is to give the restaurant the best choices on the available raw
materials and connecting the barrier between the vendors and the
restaurant. Restaurants may miss out the various options of raw
materials they can get which this software can help in giving them
different choices and make it easier for them to find and get it delivered
to them instead of looking for different vendors and delivery. As it’s a
new website I will be adding four restaurants name like Karachi Darbar,
Nando’s, TGIF and Delhi Darbar and four vendors Karachi vegetables &
fruits, Nesto, LULU and wholesale of fruits and vegetables (street
vendors) For example, if the particular restaurant requires baby carrots
and their local vendor doesn’t have then then they can find it on the
website and place the order.
The basic concept of this software is to connect the barrier between
the small scale and large scale venders to the e-commerce industry
giving them an idea of what all products can be available to them and
making it easy for both the venders and the restaurant to find or sell
their product and the restaurant can get the products delivered to
them instead of going out and finding for the product it would be
available on their door step. This could help them boost their business
in terms of venders their products can be recognized to other people.
1.2 Scope and Objectives

Objectives:-
1. To find out the how many restaurants are available to the vender.
2. To know the timing of the vender when does their service starts from.
3. To deliver the materials as soon as possible.
4. To know how the restaurants work to design the website appropriately.
1
5. Find out the ingredients most in need and keep them in stock.
The project in the end will produce a website which builds the barriers between a restaurant
and its vender and help the venders into selling their products on the E-commerce platform
and boost their business it would also help the restaurants to stay in stock and order any
ingredient they lack of to keep their customers happy.
It would also help the new vender the venders that are new on the market having a platform
to sell their goods in less cost and helping the restraint having different options for their raw
materials (ingredients) initially the website provides the customers with free delivery to build
up the website and later charge some amount in the near future if the website starts
generating good amount, they can go for free delivery with the ad revenue.
1.3 Achievements
I have achieved knowledge on how the front end development works and the new challenges
I faced and over came in producing the website I even went in dept on learning about HTML,
CSS and JavaScript and knew what all could have been done with these three I always wanted
to learn Web Designing and how to design a website and what all functions and things could
be done for designing a website knowing how websites are made and the things needed for
making a websites the role of HTML for the website and CSS in designing the website and
JavaScript for the different transitions needed, We use a lot of websites in your day to day life
and don’t know what all it take for designing a website the amount of skill, creative thinking
required in making a website I have achieved a lot in the process of making the website making
it semi functional as it is a proto type the front end of the website is fully designed completely
and half of the functions work and the rest needs update in it which can be done for the future
work by others I would say the main achievement for me was that I believed in myself that I
could make such website and I made it.
1.3.1 Overview of Dissertation

I created a website for restaurants and venders to show case their products in the E-commerce
world of business as this is a prototype website I have created only the front end of the
website in this I have added four restaurants and four vendors later the website will only
support only one Restaurant which ever restaurant wants to buy the subscription the
restaurant will have access to various venders and the different type of products and prices
available to them and I have also added a notice for the restaurants on the items they are
running low on for the starting it will just show is it fruits or vegetables once they website is
fully functioning it will give them in detail on which product they are missing and which all
products need restocking as it would affect their business the main role they play of food
delivery and restaurants need not worry on which product they r running low on which would
be done as a future project when we go in detail of the website, for now the website has a
restaurant and four different venders with them which the person ordering can choose which
one to select from some of the venders don’t have a particular product and other have them
this tells us about the various options each venders give and some of the venders have the
same products with different prices so that they need not worry about the high price and the
various options.
2
2 State-of-The-Art
2.1 Food delivery system
In 2004, a food delivery company named Talabat was created by a group of entrepreneurs to
make food delivery an easy experience for all. Their aim was to connect the barriers between
the restaurant and its customers delivery those days weren’t as easy as it is not due to lack of
advance technology and no maps so the riders would often get confused with the location,
Fast-forward to 2020, we’ve revolutionised the food delivery industry in the MENA region. For
customers, it’s now much, much easier – a few taps of an app, and voila, your delivery is on
its way – with amazing tracking, superfast delivery, and the possibility to communicate with
the rider in-app [1]. Talabat began as a small website that deliver food from a couple of known
restaurants that have no delivery system in place. But the website had small publicity and
advertising plan, but it got the attention of the person who made it what it is today,
Mohammad Jaffar. He developed the marketing department and talabat became widely
known and used. And by that it launched the way for talabat success story, after the website
came talabat application that is downloaded in closely every person in Kuwait. Talabat has
achieved a huge success and it became very popular locally, the business won the Best E-
business Award repeatedly in 2008 and 2009 with a special recognition from His Highness the
Amir of Kuwait, it was co-founded by Abdulaziz B. Al Loughani (CEO) and Khaled Al Otaibi in
2004.[2] this is an example of the how the restaurants are selling their finished product(food)
to the customer and offering the delivery and food services now they even offer grocery
services after having partnered up with some of the local venders.
Startups in the food delivery industry strive to adopt a strategy that allows customers to spend
less time and effort. It provides comfort and the quickest way to order preferred meals directly
from mobile devices and have them delivered anywhere customers wish. Additionally, the
safety and pandemic restrictions have caused an unheard-of rise in the use of online meal
delivery apps. When it comes to the Middle East and North Africa, Talabat is one of these
businesses that makes use of conventional food-delivery mechanisms.
Talabat, one of the largest meal delivery app companies, was founded in 2004 and has been
credited with successfully reinventing the idea of food delivery in the MENA area. After
operating successfully for several years, Talabat purchased Zomato in 2019 for $172 million.
UberEATS was compelled to cease operations in several areas as a result .
2.1.1 Growth of delivery apps in the middle east (Past, Present and future).
The Middle East is not an exception to the global boom in the online delivery sector. The
Middle East and North Africa (MENA) region is seeing an increase in the demand for online
delivery, with Saudi Arabia, the United Arab Emirates, and Kuwait leading the way.
• With a CAGR(Compound annual growth) of 8.2%, the Saudi Arabian market for online
meal delivery is anticipated to reach $2.25 billion in 2024.
• In 2019, the foodservice industry in the UAE was worth $15 billion.
3
• With a CAGR(Compound annual growth) of 26.3%, the restaurant-to-delivery market
in Kuwait is anticipated to reach $519 million by 2024.
• According to a different recent report, the global market for online meal delivery
services is anticipated to increase from $115.07 billion in 2020 to $126.91 billion in
2021 at a compound annual growth rate (CAGR) of 10.3%, and from $192.16 billion in
2025 to $202.16 billion at a CAGR of 11%.
2.1.2 Rising demand for delivery apps

The Middle East's growing preference for online food delivery can be attributed to three key
factors:
• The expansion of the world market for online meal delivery

• The expansion of eCommerce and online commerce in MENA
• the rise in popularity of food delivery services like Talabat
• Presently, Talabat is the biggest player in the market.
2.1.3 Talabat revenue and business model

• Restaurant joins forces with Talabat and registers on the website.
• The user downloads the app, registers, and then peruses the menus of his preferred
restaurants.
• The customer decides which foods to purchase, how much money to pay, and
whether to confirm the transaction.
• After receiving the order, the restaurant begins to make the food.
• The restaurant selects the courier to bring the food.
• The order is taken from the restaurant by the delivery person, who then gives it to the
customer.
• The client receives instant order progress updates.
Figure 1 : Talabat class diagram
4
2.1.4 Target customers
Talabat caters to customers who want to place their meal orders online rather than going into
restaurants to pick up their orders. Gen Z and millennial customers who want hot, delicious
cuisine delivered to their door make up the majority of the audience.
2.1.5 Commissions
There is no flat commission structure at Talabat. It costs 15–25% of the total price of the
restaurant's order. Talabat, however, promotes exclusivity. Therefore, restaurants that
exclusively work with Talabat receive a 5–10% commission rate discount.
The fee Talabat charges on each order is based on a variety of elements, including the
restaurant's location, how frequently customers place orders, their level of reliance on the
eatery, etc.
2.1.6 Delivery cost

Each order placed with Talabat includes a shipping fee. The delivery fee is variable and is
affected by things like the location of the restaurant and the surrounding circumstances.
Storms, late-night deliveries, and increased demand all result in higher prices.
By placing an order worth more than a certain amount, Talabat customers can reduce and
even avoid paying delivery fees. Other meal delivery services frequently employ this tactic.
2.1.7 advertising cost

Priority listings and banner ads are the two types of advertising options that Talabat provides
to eateries. The restaurant has a chance to show up at the top of the restaurant listings under
the priority listing concept.
As you undoubtedly already know, banner advertising entails displaying banner ads within the
app. These two models are used by Talabat to produce advertising revenue [3].
5
Figure 2 : statistics of talabat revenue in the middle east(2019) [4].
2.2 Grocery delivery system
Here we see an example of a grocery store who introduced their business in the E- commerce
platform named InstaShop was founded in 2015 in Dubai, by John Tsioris and Ioanna
Angelidaki as an online grocery delivery service. Twelve months later, the company was
nominated by Forbes Middle East as one of "The most promising UAE start-ups" of the year[5],
having partnered with more than 50 supermarkets and having more than 60,000 users, reason
why Souq.com(now Amazon) quickly decided to invest on the project.[6] In the following years
the company expanded outside the UAE, starting its operations in Qatar and Bahrain in
2017,[7] After the expansions in Oman, Kuwait, and Saudi Arabia occurred in 2021, the app -
which is currently active in 9 countries - has also gradually expanded its offer (originally
focused on grocery), adding other categories such as pharmacies, restaurants, fitness
nutrition, electronics, perfumes, stationery, home & living, and cosmetics, this is to give an
example of how the e grocery stores work to provide the local customers rather than providing
bulk orders to the restaurants.
Delivery Hero, a Berlin-based restaurant delivery service that primarily serves emerging
markets, has acquired InstaShop, a grocery delivery platform with about 500,000 users across
five markets in Dubai. On InstaShop, customers can order food and other household goods,
pharmacy supplies, flowers, and other items, as well as food and other items.
According to Delivery Hero, the transaction is valued at $360 million, with $270 million paid
up front and an extra $90 million contingent upon InstaShop reaching specific growth
objectives. United Arab Emirates, Lebanon, Egypt, Bahrain, and Greece, the country where
Ioanna Angelidaki and John Tsioris were born, make up the five markets in which it presently
works. Investors received a fantastic return because the five-year-old firm had only raised $7
million before being purchased.
6
InstaShop and Delivery Hero are already profitable. The larger of the two companies today
released half-year results, noting that revenues increased 93.7% year over year to €1,126.8
million ($1.3 billion) during the period, despite a slight decline in gross profit due to the impact
of lockdowns and curfews, posting €167.2 million versus €168.3 million previously.
Figure 3 : insta shop UML class diagram [8]
InstaShop will continue to operate independently under the direction of its present
management team, with the goal of growing in the MENA region while also considering how
to adapt its business model to other areas.
"The partnership with Delivery Hero is a great opportunity for us to continue growing our
business and put the group's expertise to use," said Tsioris, the CEO. "It was a pleasure working
with Delivery Hero on this transaction, and I'm excited to keep improving the scope and caliber
of our service here at InstaShop. We are happy to join this family because Delivery Hero is a
network run by ambitious startups and business owners much like us.
According to reports, the deal represents one of the largest recent exits in the MENA region
overall and a record value for a Greek firm. Microsoft's $150 million acquisition of Soft motive
was the previous biggest Greek transaction. Other significant Greek exits before this included
7
Samsung's acquisition of Intetics and Daimler's acquisition of Taxi Beat, both for less than $50
million apiece.
Venture Friends, a European early-stage investor from Greece, and Jabbar, an investor from
the MENA region, provided InstaShop with its inaugural funding in 2015. Notably, in 2015,
Apostolos Apostolakis, a founding partner of Venture Friends, co-founded e-food, a platform
for food delivery that was also bought by Delivery Hero [9].
Figure 4 : Statistics of Insta Shop (2020). [10]
2.3 Connecting the restaurant and venders.
After having enough research, it was found not many website or application have been built
to connect the restaurants and the venders there is not enough resources stating the costs
particular website or an app is developed where the restaurants can find an website where
they can buy their raw materials and a website for the new or the local venders to put up their
products in the E-commerce platform to sell their products online and offer the restaurants
with various raw materials available with them instead of knowing where to start selling in
the E-commerce platform they could start with this and would help them give good business
growth in their future and the this website mainly focuses on building the platform between
the restaurants and the venders and offer them free delivery as part of the website and to
help them maintain their business growth and customer satisfaction and the new venders in
the market can find it useful and helpful on what all the site has to offer and the restaurant
owners need not worry on choosing one particular vendor and have many choices on where
to buy their ingredients another aspect is the free delivery offered the restraint nor the
venders need to worry about the delivery of the goods and would help them is saving costs.
2.3.1 Food/raw materials suppliers for restaurants

Making connections with suppliers could seem like a difficult endeavour if you're a new
restaurant owner. If you don't already have a network of vendors at your disposal, where do
8
you begin? You want to make sure you're receiving the best deal for the best ingredients even
if you know you'll need to find suppliers for food and drinks.
1. National Wholesale food suppliers
They have all the products u need and they sell in bulk but they mostly work in shops
or outlets and sell their products a good number of them don’t know how to being
their products online in the E-commerce world and cant get ahead with their
business.
Pros:
• A wide variety of products
• centralized source for a variety of products
• More bulk discounts
Cons:
• Insincere: less prone to forge relationships
• less specialized and more general
• Typically, ingredients are not as fresh.
2. Farmers
• Restaurants that use farm-to-table methods get their ingredients from a farm
or farming cooperative. Working with local farmers can be done directly or
through larger farms with distribution networks like to those of major
wholesalers.
Pros:
• Fresh
• Developing relationships may result in discounts.
• favourable to developing a seasonal menu.
Cons:
• High prices.
• Limited ingredients.
• Don’t have all the things needed.
3. Local food markets
Although it was first meant to provide regional food from farms to communities, more
chefs are purchasing ingredients from regional food markets. Due to their increasing
presence at markets, farmers who sell at markets have started to reserve some of
their best harvests for restaurateurs. Restaurant owners can hand-pick items and
interact with the farmers who cultivate their food by shopping at a neighbourhood
market.
Pros:
• Fresh
• Developing relationships may result in discounts.
9
• Find more about the different ingredients.
Cons:
• High prices.
• Limited ingredients.
• Takes too much time and effort.
4. Organic suppliers
There are many different types of organic providers, from big national wholesalers to
neighbourhood farmers. Less chemicals are used in organic farming's fertilizers, which
are known to contaminate nearby rivers. Antibiotic-free organic livestock is raised in
conditions that are more like those found in nature.
Pros:
• Environmentally friendly
• Mostly fresh ingredients,
• interesting to diners.
Cons:
• High process because they are organic.
• Seasonal restrictions.
• Produce's shelf life could be reduced.
Figure 5 : Supply chain. [11]
10
2.3.2 Getting raw materials suppliers for restaurants
You must comprehend the operation of the food supply chain. Here is how food is transported
to your restaurant from the source.
1. Farmers - Farmers, fishermen, and ranchers all cultivate crops and care for livestock.
2. First-line handlers - Get ready the raw materials for processing and production.
Livestock is fed by-products from this branch of the supply chain.
3. Manufacturers and Processors - Processed raw materials are transformed into
packaged items by meatpackers, bakeries, and consumer goods businesses.
4. Wholesale suppliers - These are the suppliers that restaurants use. They keep their
materials in storage facilities before selling and distributing them using a sophisticated
transportation network.
2.3.3 Things to keep in mind before connecting raw materials suppliers to

restaurants.
1. Start with one Supplier.

• You want to work with a limited number of providers. If your concept allows
you to operate with just one supplier for each of your essentials, don't
overcomplicate your processes.
2. For each service, obtain three to five estimates.
• You may compare pricing by getting three to five quotations for each service,
but you won't have to spend a lot of time looking for bids.
3. Start small before going big by requesting quotations from smaller companies.
• You should utilize quotes from smaller companies as leverage for better offers
because larger companies are better able to negotiate costs.
4. Develop your relationships.
• You should begin cultivating those ties as soon as possible, especially if you've
chosen to engage with smaller providers. When you know your vendors will
be there, go to farmers' markets and talk to them about their ingredients.
They may be more inclined to give you discounts and bulk promotions in the
future and to promote your restaurant to their customers if they can tell that
you are passionate about what you do.
5. Conclusion
• The vendors you work with are heavily influenced by the menu and restaurant
concept. When it comes to selecting local ingredients, your suppliers may
even be a reflection of your basic company principles. For example, if you
prioritize partnerships with small farmers over those with large corporations,
your suppliers may reflect this. The best option is to buy bigger quantities of
ingredients in bulk from national providers.
11
• No matter whose suppliers you work with, it's crucial to always keep in mind
that finding suppliers is mostly about developing relationships. So start small,
establish some ties, and you'll probably discover that scaling up is simpler
once you've established contacts and are completely familiar with your
notion. [12]
• This project was done via the help of online videos and information on codes
found online [13].
12
3 Website requirements
3.1 Overview
The Website’s main focus was the build a website for restaurants to order their products thru
online like mentioned above how talabat delivers its finished products like food to people to
their door step and making profits I wanted to make a website for the restaurants to order
their Raw materials thru online you may say many websites like these exist but these websites
don’t target the restaurants more to the common people for household uses and not in bulk
( insta shop, Noon Grocery, etc…. ) these website provide to the house customers who need
2 or 3 products. We built the website for the restaurants to order in a large quantity and get
bulk offers. We also make it easy for the new restaurants owner to select from where they
can buy their products from as the products determine their taste, growth of their business.
We also make it easy for the venders too bring up their products into the online E-commerce
world giving then a chance to show case their products and make people aware of the
products they have and bring them out to the market and expand their business, most of the
whole sellers are not aware of the technology these days and this could help them and
enhance their business.
3.2 Web Page
3.2.1 HTML implementation

The requirements in creating a Web Page are HTML, CSS, Java Script, and a Web browser.
We start first with the basic layout of the website in the index.html file where we implement
the code for the layout.
• Nav bar – In the header section we create a nav bar for the five sections we are adding
in the top which are Home, Features, Products, Categories and add your product
section these cover all the sections in the website when u click the home page it
navigates the website to the home page, the features navigate to what all features
the website has to offer when clicked on products it navigates to the products offered
in this case there are four restaurants and each restaurants have four different
venders who are already given to the restaurant as what the website will look next
come the categories when clicked on that it takes to the restaurant categories in this
case two are given Fruits and Vegetables and the last section we add is the Add your
own product section where the venders can add their own products.
• Icons – we create four icons for menu, search, cart, and login which will later be
converted to functional buttons.
• Search btn functionality – once the search button is pressed a search form will come
out in which you can search for the product you want or the vender you are looking
for.
• Cart button – once the cart button is pressed it will show the list of products selected
which are added to the cart.
• Login form – we add a button for login people can login with their username and
below we give four more option with a button if you forget your password next to
register a new account if you are a new user pr mew to the app then we put a sign up
for the vender and next last we add sign in for the restaurants.
13
3.2.2 home Section
In the home section we add the background of the web page as it is the first thing you
would notice when you open a website is the background, the content of the website
what it provides here in the home section the main job which the website is designed
to is shown in writing and a button is also added to start shopping in the website.
Figure 6 : home section
3.2.3 Features
Next part is the features of the website, the features offered by the website to the
restaurants we add three features the first is the organic and fresh and a paragraph
under it saying what it means and add the a explore button to go more in detail next
we add Free and Fast delivery and the paragraph under it that there would be free
and fast deliver and third the last we add the feature of payment which can be done
online or thru secure card payments.
Figure 7 : features
14
3.2.4 products
The products section has both vegetables and fruits each fruit and vegetable are the
once that are a little expensive to get in the local store and its special fruits and
vegetables like baby carrots, cherry tomato etc… the description od these fruits and
vegetables are written and sold per kg and below the once which are selling fast are
written and the once that are sold out are given running low and the ones which have
discounts are also mentioned there is once restaurant and four venders below given to
Them this is just to say how the website would look like if they got the subscription and
what all the website would offer if they got the subscription and there is also a ratings
given for the fruits and vegetables below which would give the restaurants an idea of
how the product is and its ratings and a button is added to the products named add to
cart once they click the button then they can select the quantity and location etc..
Figure 8 : products.
3.2.5 Swiper
For the transition of swipe, we add swiper named responsive breakpoint which is found
online this uses the code from online for the swipe transition used in the products and
requires internet connectivity for it to work as this is an online transition and this
transition works for all the products in all four restaurants given. [14]
Figure 9 : Swiper slider
15
3.2.6 Restaurant 1
We add the two categories which are fruits and vegetables to the first restaurant and
add the products to it and in this all the products are present which shows the different
products that are available to the restaurants and the different prices and even the
description of the products that are sold in kg and their ratings.
Figure 10 : categories for restaurant 1.
3.2.7 Restaurant 2
We add the two categories which are fruits and vegetables to the second restaurant
and add the products to it and in this some vender’s product are less shows how they
are different from others which shows the different products that are available to the
restaurants and the different prices and even the description of the products that are
sold in kg and their ratings.
3.2.8 Restaurant 3
16
3.2.9 Restaurant 4
3.2.10 vender 1
Venders are four the first one is Karachi vegetables and fruits this is a wholesale vender
who has his products displayed on the website to the different restaurant owners and
u can see with the help of swiper by swiping left or right the various fruits and
vegetables available.
17
Figure 14 : products of vender 1.
3.2.11 vender 2
Venders are four the first one is Nesto is a vender who has his products displayed on
the website to the different restaurant owners and u can see with the help of swiper by
swiping left or right the various fruits and vegetables available.
3.2.12 vender 3
Venders are four the first one is lulu is a vender who has his products displayed on the
website to the different restaurant owners and u can see with the help of swiper by
swiping left or right the various fruits and vegetables available.
18
3.2.13 vender 4
Venders are four the first one is wholesale of fruits and vegetables this is a wholesale
vender who has his products displayed on the website to the different restaurant
owners and u can see with the help of swiper by swiping left or right the various fruits
and vegetables available.
3.2.14 Add your products.

The main aim of the website was to let the vendors sell their products online and so we
add this section named Add your products this is given to identify where the vendors
can add their products online its just a section made to identify where to add the
products in the website as of now it has no function but later on in the future it would
work and would add the venders’ products.
19
Figure 18 : add your products.
3.2.15 footer
This is the last section in the HTML file here we add the footer too the website in the
footer we add 4 boxes the first box we add the name oof the website and write
description and give them the links of Facebook, Instagram, YouTube and LinkedIn.
The next box contains contact info of the admin or the place where the website is
getting operated from and if they have any query or complaint, they can contact that
number and we add the location.
Then we give links to the website which are home, features products categories and
add your product this section once clicked on will take u to the section selected.
The fourth box we add an email id box and if u enter the email and finish the payment
u can get updates of the products and news and what all thing happen in the website
and it can also provide you subscription to add your products in the website.
Figure 19 : footer page
20
3.2.16 Flow diagram of the website
Figure 19 : flow diagram
3.3 CSS implementation
• Cascading Style Sheets is what CSS stands for.

• CSS explains how HTML elements should appear on screens, in print, or in other
media.
• A lot of work is saved via CSS. It can manage the design of several web pages
simultaneously.
• In CSS files, external stylesheets are kept.
• HTML WAS NEVER INTENDED to have tags for web page formatting!
• HTML was developed to describe a web page's content, such as:
This heading is indented as h1.
The following paragraph.<p> para </p>
21
• For web developers, a nightmare began when tags like "font" and "color" attributes
were added to the HTML 3.2 specification. The creation of huge websites became a
time-consuming and expensive procedure since font and color information was added
to every page.
• The World Wide Web Consortium (W3C) developed CSS to address this issue.
• The HTML page's style formatting was removed by CSS!
3.3.1 Stylesheet
We start with making our own custom colours in the root
• Root – Gray, black , light colour, box-shadow, border, outline, yellow, brown, blue,
white and add their colour code provided online.
• Next we describe the font size scroll-behaviour as smooth and provide padding
• We sent the background colour to white.
• Header – the position of the header is fixed cause it isn’t moving anywhere and we
apply Z-index for the items under not to over lap on top of the header once scrolled
down align the items in centre and use flex display if we want to use the website on
our phone we created a box-shadow which provides a background shade when
clicked on the item.
• Logo was set in the html file and here we tell the font size and apply the colour of
the logo.
• Hover – when the mouse goes on top of any clickable item it changes different
colour this is done with the help of hover
• Activating the nav bar once clicked the search button should come out and the menu
button then the cart and the login page when pressed on login button.
• Styling the search form when the mouse pointer touches the search button it
changes colour notifying that the button is selected that happens because of the
hover option it changes its colour from white to brown due to that when the search
button is pressed the search form comes out where u can search
• Shopping cart was added in the HTML file with 3 images not here we make the
images proper in size and move the cart go to the right by putting -110% in this way
the cart option hides it self and when we click on it, it comes back showing the things
in the cart this is done in the JavaScript part and here also we apply box shadow
• Now that the search for is designed now its time to make it active as it goes back
inside, we put -110% to the right and apply a transition of .4 seconds time for it to
come out when pressed.
• The images are kept at 10rem size, rem stands for Root element we use this to size
any image or text, since a pixel is an absolute measurement, when you set the font
size to 24, it will actually be 24 pixels. Rems, on the other hand, are relative
measurements dependent on the font size of the document. The default font size
for the document is 16 pixels; hence, 1.5rems x 16px is equivalent to 24 pixels.
• A section of text or a section of a document can be marked up using the inline
container known as the "span" tag. The class or id attribute of the <span> tag allows
for simple styling using CSS or manipulation with JavaScript. The <div> element and
22
the </span> tag are quite similar, however div is a block-level element and span is
an inline element for the heading such as the for restaurants, products we use span
tag to highlight the word.
• In the end of the cart button we put the total of the order it shows how much total
happened after selecting the products u need.
• The span tag can be designed thee way u want here I use a polygon design for the
span tag by putting the code from clip path, The clip-path CSS property establishes
the portion of an element that should be visible by creating a clipping region. The
portions that are inside the area are visible, while the portions outside are
concealed.
• Button(btn) we create a simple rectangle button provide padding, font size, colour,
cursor property when you take the pointer towards it the button gets activated.
• Hover effect is also created when the cursor goes near the button the button
changes colour telling us that the button is activated, when a user hovers over an
element in CSS, the element responds by triggering transition effects. It is an
efficient approach to improve the user experience and is used to highlight the
important elements on the web page.
• Login form was designed in the html in CSS we just make the transition happen but
putting the form -110% to the right hiding it so that the transition could take place.
And make it active by putting thr transition of .4s transition.
• The next three codes .box, .login-form 0, .login-form p a in this we put the width
thee margin the background colour the border radius apply padding and the font
size for the login form, within any given margins and/or borders, the padding
property in CSS determines the innermost area of the box model and adds space
around the content of an element. Padding values cannot be negative and must be
set using lengths or percentages. All padding properties have a default value of zero
(the original value).
• Media queries - You can use media queries to apply CSS styles based on the overall
kind of a device (such as print vs. screen) or other details like screen resolution or
browser viewport width. These purposes call for the usage of media queries: CSS
@media and @import at-rules can be used to conditionally apply styles.
• Structure of the media queries –
@media <media-type> and (media feature) {
/*...*/
}
The use of media queries helps create responsive web design. They can also be
utilized to determine whether a mouse or a touchscreen is being used by the user.
• Every website is seen on a variety of screens and resolutions of devices. Known as a
breakpoint in the media query, a website's content responds to these points and
changes to the screen size to present the appropriate layout.
23
Figure 20 : media queries. [15]
• We use media queries for the header, menu button, search-form to view them in
991px, 768px. [16]
• The next section is the home section here we put the display as flex soo that the
website can be viewed in the phone screen then we justify its content to centre and
add the URL of the image and do the positioning of the image to centre and the
image should cover the whole background, so we use cover for the background size
and apply padding for top and bottom.
• The content of the home page is aligned to centre with the width of 60rem.
• The colour and the font size for the heading 3 h3 is applied and the font size of the
paragraph tag P is set and the colour and padding is provides and the colour of the
span tag is made in the .home .content class.
• Next we come to the features section we add a grid to the display and columns and
leave a gap of 1.5rem between them next for the box in the features section we add
padding, the background colour give a outline which we had created in the root
folder of -1rem what this does is it take the outline feel inside for the box-shadow
to look more effective and provide the outline-offset(The outline-offset CSS
property controls the distance between an outline and an element's edge or
border.) then align them to centre and then apply the box shadow which we have
created in the root section on top.
• The hover function is added which was explained in detail at top and apply a custom
box shadow here by giving the specified px size then we do the sizing of the images
by creating its margin and applying the height, next we style the heading 3 h3 tag by
making its font size into 2.5rem and giving a line-height(The height of a line box is
determined by the CSS line-height attribute. It's frequently used to specify the space
between text lines. It sets the bare minimum height of line boxes for block-level
items.) of 1.7rem for the P(paragraph tag) we set its font size, line-height and give
its colour to light-shade we use var for colour because, The var() CSS function allows
you to replace any portion of the value of another property with the value of a
custom property (also known as a "CSS variable").
• Styling the slider option we put using the swiper code we apply its padding of 1.7rem
we use .product-slider:firstchild to apply the same styling method for all the boxes
24
which comes under the sliding property we apply thee slider property for the
products to moves left or right to see the products available.
• The we style the .box class where we apply its background colour to #fff which is
white and give a border-radius(An element's outer border side's edges are rounded
using the border-radius CSS property. If you want to create circular or elliptical
corners, you can specify either one or two radii.) and make the text alignment to
centre also apply a padding of 3rem and top 2rem and give its outline-offset to
-1rem, apply the outline which we had created before then give it a box shadow for
when the box is pressed it gives a brow shade in its outline and give a transition on
.2s linear(The transition effect is described as linear if it is linear from beginning to
end. The transition effect ease-in specifies a gradual start. ease-out - designates a
gradual finish to the transition effect. ease-in-out designates a transition effect with
a gradual start and termination.).
• We then add the hover properties to the slider and resize the images to fit inside
the boxes by applying height and giving them a padding of 3rem 0, next the heading
1 h1 tag is given a font-size of 2.5rem and its colour is set to black.
• After the heading tag is done styling then we style the price class giving them a font-
size of 2rem and colour set to light-colour which we made at first in the root class
and also apply a little padding of .5rem so that it doesn’t stick to the others, then we
style the starts we made for the review section and give its colour as yellow the font-
size as 1.6rem and padding of 5rem.
• Now we style the categories by giving them a padding of 3rem background colour
as white #fff, give it a border radius so that the outlines are not sharp edged, add an
outline-offset of -1rem and align the text to centre, next the images are given a
margin and height, then the hover function is added for this one and give it a box-
shadow and make the colour to brown.
• Next the heading 3 H3 tag is given a font size of 2rem and set the colour to black and
give it a line-height of 1.8rem then the paragraph tag is styled providing a font size
of 1.7rem its colour to black and line-height to 1.8rem next the last part of adding
your own product section we make its display to grid(When it comes to dividing a
page into key areas or specifying the relationship between components of a control
constructed from HTML primitives, CSS Grid Layout excels. Grid layout allows an
author to align objects into columns and rows similarly to tables.) set its over flow
to hidden and give it a border radius as .5rem and also apply a box shadow.
• The footer section we start by applying the background colour as white #fff we put
the display to grid and set the column sizes and the gap which should be kept in
between those two in the .box class of the footer the heading 3 H3 tag we apply its
font size its colour to black and give it a padding of 1rem then we make another
section in the html file as H3 i we style this class by giving its colour as light colour.
• We add styles for 3 more boxes giving them a padding, font-size, colour, line-height,
border-radius, box-shadow also apply a margin to it and this ends the
implementation of the CSS file where I have briefly described all the sections of the
code and justified what all properties I have used in them
• Key functions in the CSS file
1. Display-
25
An element's box type is determined by the display property. Despite the display
having a wide range of possible values, just four are most usually used. Each
element's default display setting is described in the CSS specification.
2. Color-
An element's color argument determines what color the text will be. For
instance, the color attribute of the body selector determines the text's default
color on the page. Although there are various suitable formats for color values,
hex values, RGB, and named colors are the most used ones.
3. Syntax-
A CSS stylesheet consists of a set of rules that the associated page
components—such as paragraphs, headings, etc.—are applied to when the web
browser reads and applies them. The two essential parts of a CSS rule are a
selector and one or more declarations.
4. Background-
The background of a web page has a considerable impact on its visual
presentation. The background of an element can be altered using a number of
CSS attributes, including background color, image placement, positioning, and
more. Background-color, Background-image, Background-Repeat, Background-
Attachment, and Background-Position are the background properties.
5. Fonts-
To make the content easily readable, the proper font and style must be used. In
CSS, you may style text fonts by changing the font's face, modifying its size and
boldness, managing variants, and more. The various font features include font
family, font style, font weight, font size, and font variant.
6. Text-
Different text styles can be specified simply and effectively using the features
provided by CSS, such as color, alignment, spacing, decoration, transformation,
etc. Text-align, text-decoration, text-transform, text-indent, line-height, letter-
spacing, and word-spacing are a few often used text characteristics.
7. Dimension-
CSS has various dimension attributes, including width, height, max-width, min-
width, max-height, and min-height, that developers can use to control an
element's width and height. Height and width attributes are commonly used in
the display. The dimensions of width and height do not include padding,
borders, or margins.
8. Margin-
The border-spacing for a box element may be set using CSS margin properties.
Regardless of the color of the background, an element's margin is always
transparent. The margin area will display the background color of the parent
element if it already exists.
9. Lists-
The most popular sorted and unordered lists can be styled and formatted using
a variety of CSS elements. These list attributes are typically used to control the
26
marker's shape or appearance. You can change the distance between a marker
and the list's text, among other things.
10. Links-
Links, often known as hyperlinks, are essential for a website to work. Users are
able to navigate the website thanks to it. The links must be properly designed in
order for the website to be user-friendly. Links can be in one of four main states:
link, visited, active, or hover.
11. Layers-
HTML pages are thought of as two-dimensional since text, graphics, and other
elements are placed on the page without contacting one another. Boxes may be
stacked vertically, horizontally, or along the z-axis.
12. Gradients-
Gradients can be used to speed up downloads and consume less bandwidth.
Because the output is generated by the browser, it will render considerably
more quickly, and elements that contain gradients can be scaled up or down
without compromising quality.
13. Outline-
An element's outline settings allow developers to define a box-shaped outline
region around it. An outline is a line drawn just outside the boundaries of the
elements. For items like buttons, form fields, and so forth, the outline signifies
focus or active states.
14. Filters-
The filter effects can be applied to the element using the CSS filter property,
which accepts one or more filter functions in the order given. It can be used by
developers to implement visual effects like color saturation, brightness or
contrast balancing, and blur.
15. Units-
Length can be measured using either absolute or relative units, such as pixels,
points, and so on. There is no default unit for non-zero numbers, thus CSS units
must be provided. A missing or neglected unit would be viewed as a mistake.
16. Opacity-
Opacity existed before it was specified in the CSS version 3 specifications.
However, opacity or transparency settings can be adjusted in older browsers.
The opacity attribute has a range of 0.0 to 1.0. Developers can also make
transparent images by using CSS opacity.
17. Validation-
Making sure a website's pages follow the formal guidelines and standards
defined by the World Wide Web Consortium (W3C) is the process of website
validation. Validation is essential. It will make sure that your web pages are
interpreted uniformly by all web browsers, search engines, etc.
18. Position-
27
Correct element placement on the web pages is necessary for a decent layout
design. Several CSS approaches can be used to position things. Each of these
placement strategies is discussed individually in the section that follows.
19. Padding-
Padding attributes let you to decide how much space there is between an
element's content and border. The padding of the element depends on its
background color. If you set a background color for an element, for instance, the
padding area will display that color.
20. Tables-
Tables are frequently used to present tabular data, such as financial reports
retrieved from a database management system (DBMS). Browsers display HTML
tables without borders when they are created without any styles or attributes.
With CSS, you may dramatically improve your tables' visual appeal.
These were the key features which were used in the stylesheet.css to style all
the necessary things which were implied in the HTML page. [17]
3.4 JavaScript
3.4.1 JavaScript Implementation

• JavaScript (JS) is a computer programming language used to create dynamic,
interactive webpages and apps.
• Due to the fact that it may run on your browser instead of only a server, it is special.
• One of the most widely used internet programming languages, along with HTML and
CSS, is JavaScript.
• The user-facing components of the majority of websites and online apps are
composed of JavaScript, CSS, and HTML.
• The skeleton of the house is HTML. It offers a website's fundamental design,
organization, and content.
• The interior design is CSS. It offers visual components including design, fonts, colors,
and effects.
• The plumbing and electrical systems are JavaScript. The webpage becomes dynamic
and interactive thanks to JS. For instance, JavaScript is used to create pop-up
windows, animations, video and social media embeds, drop-down menus, and many
other website elements. [18]
28
Figure 21 : HTML, CSS and JavaScript
• The code's first line chooses an HTML element with the class "search-form" and
assigns it to the searchForm variable.
• The second line of code adds a onclick event listener to an HTML element with the
id'search-btn'. The function enclosed in the curly braces will be used when the
element with this ID is clicked.
• The first line of the method switches the searchForm element's 'active' class on and
off. The 'active' class will be deleted from the element if it already has one; otherwise,
it will be added.
• The 'active' class is removed from the shoppingCart, loginForm, and navbar HTML
elements in the next three lines. To guarantee that just one element is active at once,
this is done.
• In conclusion, this code ensures that other items are hidden simultaneously with the
visibility of a search form when a button is clicked.
• 2nd - A variable called shoppingCart is assigned an HTML element with the class
"shopping-cart" in the first line of the code.
• An onclick event listener is added to an HTML element with the id 'cart-btn' in the
second line of code. The function enclosed in the curly braces will be used when the
element with this ID is clicked.
• The first line of the code switches the shoppingCart element's 'active' class on and off.
The 'active' class will be deleted from the element if it already has one; otherwise, it
will be added.
• The 'active' class is removed from the searchForm, loginForm, and navbar HTML
this is done.
29
• In conclusion, this code ensures that other items are hidden simultaneously with the
visibility of a shopping cart when a button is clicked. This method is frequently applied
in web development to produce engaging web pages.
• 3rd - In the first line of the code, a variable called loginForm is assigned an HTML
element with the class "login-form."
• The second line of code adds a onclick event listener to the HTML element with the id
'login-btn'. The function enclosed in the curly braces will be used when the element
with this ID is clicked.
• The first line of the code switches the loginForm element's 'active' class on and off.
The 'active' class will be deleted from the element if it already has one; otherwise, it
will be added.
• The 'active' class is removed from the shoppingCart, searchForm, and navbar HTML
this is done.
• In conclusion, this code ensures that other items are also hidden when the visibility of
a login form is toggled when a button is pressed. This strategy enables the website to
give users a more engaging and intuitive experience.
• 4th - The first line of the code chooses a navbar-classed HTML element and sets it to
the navbar variable.
• An HTML element with the id "menu-btn" receives a onclick event listener when the
second line of code is executed. The function enclosed in the curly braces will be used
when the element with this ID is clicked.
• The first line of the function changes the navbar element's 'active' class. The 'active'
class will be deleted from the element if it already has one; otherwise, it will be added.
• The 'active' class is removed from the loginForm, shoppingCart, and searchForm
HTML elements in the following three lines. To guarantee that just one element is
active at once, this is done.
• In essence, this code ensures that other items are also hidden when the display of a
navigation bar is toggled when a button is clicked. This method is frequently applied
to develop responsive and interactive web pages.
• Onscroll - An onscroll event listener is added to the window object in the first line of
the code. The curly braced function will be used when the user scrolls the page.
• The first line of the code deletes the 'active' class from an HTML element with the
class-search-form'.
• The 'active' class is removed from the shoppingCart, loginForm, and navbar HTML
elements in the next three lines. In order to prevent active items from appearing while
a user scrolls the page, this is done.
• In conclusion, when the user scrolls the website, this code removes the 'active' class
from a number of HTML elements. This can help to ensure that the user doesn't
encounter any extra distractions while scrolling and to reset the status of the website
when they leave a certain portion.
• Swiper - The first line of code creates a new instance of the "product-slider" class of
the Swiper library for a slider. The method of construction accepts an object as an
input that specifies the slider's behaviour and appearance.
30
• Since the loop property is set to true, the slides will keep looping.
• The spaceBetween attribute, which in this case is set to 20 pixels, determines the
separation between slides.
• The autoplay property configures the slider's automated slide transitions. Take an
object with the following two qualities:
• The delay attribute specifies a delay of 7500 milliseconds (or 7.5 seconds) between
slide transitions.
• When a user interacts with the slider, the autoplay will not be disabled because the
disableOnInteraction property is set to false.
• The breakpoints property configures the slider's settings based on the screen size.
Take the following object, which has three characteristics that each correspond to a
particular screen size:
• When the screen size is less than 768 pixels wide, the first attribute sets the number
of slides per view to 1.
• The second property, which applies to screens with a width between 768 and 1020
pixels, sets the number of slides per view to 2.
• When the screen size is larger than or equal to 1020 pixels wide, the third attribute
limits the number of slides per view to 3.
• In conclusion, this code creates a product slider with autoplay, looping, and
responsive behaviour at various screen sizes using the Swiper library.
• This explains the full code written in the JavaScript library explaining the full code and
its usage on the website.
3.5 Database
3.5.1 MongoDB
• I changed the database from MySQL to mongo DB as it was one of my modules this
semester and found it easier to work with the main aim of the database is to store the
details of the shop, items, and the delivery details.
• A document database called MongoDB is used to create scalable and highly accessible
web applications. It's well-liked by agile development teams due to its flexible schema
approach.
• While MongoDB allows JSON querying, a SQL database only supports SQL queries. In
contrast to a SQL Database, which is still more predetermined and good for various
forms of data storage, MongoDB is a more dynamic and complex option that is
suitable for hierarchical data because of its core qualities.
31
Figure 22 : mongoDB [19]
• The "head" tag, which is located inside the "html" tag, includes information about the
document. The character set, compatibility mode, title, and description of the
document are all specified in a number of meta tags.
• Additionally, we have two script tags that load JavaScript files: one for the well-known
JavaScript library jQuery and another for the unique JavaScript code found in app.js,
Our last link tag fetches a style.css style sheet from an external source.
• The website's major content is located in the middle. The first thing we do is create a
navigation bar using the <nav> tag, which has three buttons with onclick properties
that, when pressed, activate JavaScript methods, The next major content of the page
is included within the section> tag, which has a heading (h5>) with the text "Shop
Details" present in this section. Below it, there is a div with the class "box" that
contains two other divs with the class "subbox." A label and an input area, one for the
shop name and one for the shop address, are present in each subbox, Last but not
least, we have a submit button with the class of submit, which when clicked calls the
JavaScript method data Post(). Sending the form data to a server is the responsibility
of this function, which is defined in the app.js file.
• Db_config.js - This program exports a function called mongo_connection that uses the
Mongoose library to establish a connection to a MongoDB database.
• The modules dotenv and mongoose are imported first in the code. A common
MongoDB ODM (Object Data Modeling) framework for Node.js applications is
mongoose, and dotenv is used to read variables from an.env file.
• The database URL to connect to is set to mongodb://127.0.0.1:27017/custom_form
by the function mongo_connection. This URL provides the name of the database to
connect to (custom_form in this example), the MongoDB server address (127.0.0.1 in
this case), and the port number (27017 in this case).
• We also download node.js for the database. [20]
• The function then connects to the URL-specified MongoDB database using Mongoose.
It employs UseCreateIndex:true to enable automatic index generation,
32
NewUrlParser:true to activate the new URL parser, and useUnifiedTopology:true to
activate the new topology engine.
• The function logs "connection successful" when the connection is successful. If not,
an error message and error object are logged, In order to utilize the function in other
files, it is finally exported as a module.
• App.js - With the help of this JavaScript code, you can add HTML elements to websites
and send data via the HTTP POST method to a variety of endpoints, depending on the
value of the section variable.
• The server endpoint's base URL, which will be used to send the data, is stored in the
const baseUrl variable. The HTML form that is currently displayed and the endpoint
to which the data will be delivered are both determined by the section variable, which
is initially set to 1.
• The main portion of the homepage receives HTML components when the addShop(),
addItems(), and addDelivery() procedures are called. Each function generates a
unique HTML form depending on the value of the section variable.
• Depending on the value of the section variable, the dataPost() function is in charge of
using the HTTP POST method to deliver data to various destinations. When a form is
submitted, this function is called. The data is taken from the HTML form inside the
switch statement, and the proper endpoint is called using the jQuery $.post() method.
• The result message is displayed along with an alert if the HTTP POST request's
outcome is successful. Otherwise, nothing occurs.
• Delivery_modal.js - This Node.js code creates a Mongoose model for a delivery
collection in a MongoDB database and defines a Mongoose schema for the collection,
A Mongoose schema for the delivery collection is defined using the imported
mongoose module. Delivery_name and Delivery_number, both of which are defined
as a string and a number, respectively, are the two fields that make up the
delivery_schema variable.
• The mongoose.model() method, which requires the name of the collection (in this
example, delivery) and the schema object (which is, in this case, delivery_schema), is
then used to construct the delivery variable. The outcome is an object that may be
used to interact with the delivery collection called a Mongoose model.
• The module.exports statement is used to export the delivery model, allowing it to be
imported and utilized in other Node.js application components.
• Item_modal.js - This Node.js code creates a Mongoose model for a MongoDB item
collection and exports the model as a Mongoose schema, A Mongoose schema for the
item collection is created using the imported mongoose module. The name and
quantity fields, each of which is defined as a string and a number, are stored in the
item_schema variable as the definition of the schema.
• The mongoose.model() method, which requires the name of the collection (in this
case, item) and the schema object (in this case, item_schema), is then used to
generate the item variable. The end result is an item collection Mongoose model that
can be used to interact with the collection.
• The module.exports statement is used to export the item model, allowing it to be
imported and used in other Node.js application components. This makes defining and
utilizing the item collection within the framework of a Node.js application simple.
33
• Table.html - This HTML page shows a detailed table with details on the stores,
products, and delivery addresses. It has a script tag, a section tag with three tables, a
header tag, and a body tag with a navigation bar.
• In order to receive information about the stores, products, and delivery addresses,
the script element contains JavaScript code that sends HTTP GET requests to a local
server with a base URL of "http://localhost:3135/". Following that, the information is
used to fill the respective tables in the HTML content.
• The first table with the class "shop-table" lists the name and location of each business,
and the information in it is obtained from the response of an HTTP GET request made
to the "/shop" endpoint.
• The results of the HTTP GET request to the "/item" endpoint are used to populate the
data in the second table, which has the class "item-table" and displays the name and
amount of each item.
• The third table with the class "delivery-table" lists the name and number of each
delivery address, and its data is filled from the response of the HTTP GET request to
the "/delivery" endpoint.
• The script utilizes jQuery to make the HTTP queries and leverages the HTML
innerHTML attribute to dynamically add the retrieved data to the appropriate tables.
Figure 23 : Entering the shop details.
34
Figure 24 : Entering the items details.
Figure 25 : entering the delivery man details.
Figure 26 : saved
35
Figure 27 : details table
• The details entered in the form will appear in the table.html form we
created
Figure 28 : Viewing the saved data of shops in mongo db compass.

• The details can also be viewed in the mongo DB compass.
36
Figure 29 : Viewing the saved data of items in mongo db compass.
• The items entered in the html file can also be viewed in the mongo DB
compass.
Figure 30 : Viewing the saved data of delivery man in mongo db compass.

• The details of the delivery boy can be also viewed in the mongo DB compass.
• You can also delete the details from the mongo DB compass,
37
4 Conclusion
4.1 Summary
Due to the ongoing fast pace of business the restaurant need their
ingredients as soon as possible instead of waiting for a long period of
time. Due to the ongoing competitive restaurant business the first
priority for the business is to give the customer the best service
possible which ensures customer satisfaction helping build your
business, The aim of this software ixs to find the item which is missing
in a restaurant and open the website where there would be options for
the restaurant to choose which item they are looking for and select a
particular vendor of the restaurant choice. The main objective of this
website is to give the restaurant the best choices on the available raw
materials and connecting the barrier between the vendors and the
restaurant. Restaurants may miss out the various options of raw
materials they can get which this software can help in giving them
different choices and make it easier for them to find and get it delivered
to them instead of looking for different vendors and delivery. As it’s a
new website I will be adding four restaurants name like Karachi Darbar,
Nando’s, TGIF and Delhi Darbar and four vendors Karachi vegetables &
fruits, Nesto, LULU and wholesale of fruits and vegetables (street
vendors) For example, if the particular restaurant requires baby carrots
and their local vendor doesn’t have then then they can find it on the
website and place the order.
The basic concept of this software is to connect the barrier between
the small scale and large scale venders to the e-commerce industry
giving them an idea of what all products can be available to them and
making it easy for both the venders and the restaurant to find or sell
their product and the restaurant can get the products delivered to
them instead of going out and finding for the product it would be
available on their door step. This could help them boost their business
in terms of venders their products can be recognized to other people.
4.2 Critical Evaluation of your Achievements
I have achieved knowledge on how the front end development works and the new challenges
I faced and over came in producing the website I even went in dept on learning about HTML,
CSS and JavaScript and knew what all could have been done with these three I always wanted
to learn Web Designing and how to design a website and what all functions and things could
be done for designing a website knowing how websites are made and the things needed for
making a websites the role of HTML for the website and CSS in designing the website and
JavaScript for the different transitions needed, We use a lot of websites in your day to day life
and don’t know what all it take for designing a website the amount of skill, creative thinking
required in making a website I have achieved a lot in the process of making the website making
38
it semi functional as it is a proto type the front end of the website is fully designed completely
and half of the functions work and the rest needs update in it which can be done for the future
work by others I would say the main achievement for me was that I believed in myself that I
could make such website and I made it.
I have also achieved the solutions for the various problems I faced either it was the JavaScript
not working or the webpage not giving the outcome and I had to review the code many times
to find the problems and later it would be the problem of a missing comma or a semicolon or
spelling mistakes I enjoyed doing the project overall of creating a website and a database.
4.3 Limitations and Future Work

As this is a front end project the page is a show only page how it would look like the future
work of this website would be making the page fully functional as it would require a lot of
work in the databases and adding new vendors, restaurants and making them be able to buy
and sell their products with the help of the website the limitations is that for now the website
just shows the products, restaurants and whether they need restocking or no is given as a
paragraph later in the future they can make this all work and make this a fully functioning
website as this is a new idea of selling your products to the target audience as the restaurants
and this can be also developed into an app by seeing how the website is doing. So they future
work for this project in summary will be making it fully functional making every thing work
and do what it is designed to do.
4.4 Critical Reflection on your Project

The project went on a slow start than I thought due to various reasons and religious reasons
the past 1 months has been like a roller coaster full of ups and downs either it would be the
code not work or the Ramadan timing many factors arrived and had a very tough situation but
in the end I managed to over come those by finishing my pending exam and staying awake
the whole night as it was difficult in the evening to work for and as it was Eid many relative
had come stayed and still took the time sacrificing my quality time with them to complete the
project and finally over came all that to this day where I can say I fulfilled the project as I
wanted it to look like and added all the things I wanted to add.
39
References
[1] “Our story:” Talabat Blog. [Online]. Avalable: https://blog.talabat.com/our-story/.
[Accessed: 21-Oct-2022].
[2] S. Alsumait and R. Alenezi, “Online food industry (a study case: Talabat),” International
journal of Tourism and hospitality in Asia Pasific (IJTHAP). [Online]. Available:
http://www.ejournal.aibpm.org/index.php/IJTHAP/article/view/523/526.Jacobson, J.
and Andersen, O., editors. Software Controlled Medical Devices. SP Report 1997:11,
Swedish National Testing and Research Institute, Sweden, 1997.
[3] Admin, “Talabat Food Delivery App: Business Model, Cost & Features Explained,”
Esferasoft, Mar. 31, 2023. https://www.esferasoft.com/blog/talabat-food-delivery-app-
business-model-development-cost-features-explained/
[4] J. Yang and J. Yang, “The Rise of Food Delivery Market in the Middle East | Data Insights
- Measurable AI,” Data Insights - Measurable AI, May 2021, [Online]. Available:
https://blog.measurable.ai/2021/05/11/the-rise-of-food-delivery-market-in-the-
middle-east/
[5] "Forbes Most Promising UAE Startups In 2016". AM Marketing, Media, Advertising News
in MENA. 2016-10-06. Retrieved 2020-09-09.
[6] Hariharan, Sindhu (2016-10-31). "UAE-Based Online Grocery Startup InstaShop Raises
Funds From Souq.Com". Entrepreneur. Retrieved 2020-09-09.
[7] Vinita (2019-10-28). "Redefining Grocery Shopping: An Interview with John Tsioris,
Founder & CEO of InstaShop". Gulf Insider. Archived from the original on 2020-10-23.
Retrieved 2020-09-09.
[8] K. Fakhroutdinov, “UML class diagram example for online shopping domain - web
customer, shopping cart, product, user account, payments, orders.” https://www.uml-
diagrams.org/examples/online-shopping-domain-uml-diagram-example.html
[9] S. O'Hear and I. Lunden, “Delivery hero picks up InstaShop in $360m deal to expand in
groceries in the Middle East,” TechCrunch, 27-Aug-2020. [Online]. Available:
https://techcrunch.com/2020/08/26/on-demand-grocery-startup-instashop-acquired-
by-delivery-hero-for-360m/. [Accessed: 26-Apr-2023].
[10] “Instashop Growth Story: The One-stop-shop fuelled by Dubaians' culture of
convenience,” Lucidity Insights. [Online]. Available:
https://lucidityinsights.com/spotlights/instashop-the-one-stop-shop-fuelled-by-
dubaians-culture-of-convenience. [Accessed: 26-Apr-2023].
[11] Sonali, “How to streamline restaurant supply chain operations with technology in 2023,”
The Restaurant Times, 16-Mar-2023. [Online]. Available:
https://www.posist.com/restaurant-times/posist-product/simplify-supply-chain-
restaurants.html. [Accessed: 26-Apr-2023].
[12] “Restaurant Food Suppliers: A guide to vendors and wholesalers,” RestoHub. [Online].
Available: https://www.restohub.org/operations/inventory/food-suppliers-for-
restaurants/. [Accessed: 26-Apr-2023].
[13] How to create a website using HTML and CSS | Create a Responsive Website Using
HTML,CSS & JavaScript. YouTube, 2022.
[14] “Swiper demos,” Swiper. [Online]. Available: https://swiperjs.com/demos#responsive-
breakpoints. [Accessed: 26-Apr-2023].
40
[15] B. Munnelly, “Responsive web design and media queries,” https://www.munnelly.com/.
[Online]. Available: https://www.munnelly.com/webdev/responsive-web-design-media-
queries.html. [Accessed: 26-Apr-2023].
[16] Code studio. [Online]. Available: https://www.codingninjas.com/codestudio/library/css-
media-queries-414. [Accessed: 26-Apr-2023].
[17] C. B. M. T. Writer, C. BasuMallick, T. Writer, N. 7, Chiradeep BasuMallick Technical Writer
opens a new window opens a new window Chir, Chiradeep BasuMallick Technical Writer
opens a new window, Chiradeep BasuMallick Technical Writer, and opens a new window
Chiradeep is a content marketing professional, “What are CSS (Cascading style sheets)?
meaning, types, and properties,” Spiceworks, 07-Nov-2022. [Online]. Available:
https://www.spiceworks.com/tech/tech-general/articles/what-are-css/. [Accessed: 26-
Apr-2023].
[18] “What is JavaScript & What is it used for? A basic guide to JS,” Semrush Blog. [Online].
Available:
https://www.semrush.com/blog/javascript/?kw=&cmp=WW_SRCH_DSA_Blog_EN&labe
l=dsa_pagefeed&Network=g&Device=c&utm_content=622204042442&kwid=dsa-
1753200738893&cmpid=18352133756&agpid=142750785113&BU=Core&extid=60162
684324&adpos=&gad=1&gclid=CjwKCAjw9J2iBhBPEiwAErwpeSjHYPaZ78kwEh0xJSpomZ
DIiuSmFtzxmFwZfw-pGTD0AYH1Msp8SRoC1AYQAvD_BwE. [Accessed: 26-Apr-2023].
[19] D. F. Team, “MongoDB tutorial for 2022 - learn what is mongodb?,” DataFlair, 27-Jan-
2022. [Online]. Available: https://data-flair.training/blogs/mongodb-tutorial/. [Accessed:
26-Apr-2023].
[20] “NPM-install,” npm Docs. [Online]. Available:
https://docs.npmjs.com/cli/v8/commands/npm-install. [Accessed: 26-Apr-2023].
[21] G. Chrome,“Websiteform,” Google. [Online]. Available:
https://docs.google.com/forms/d/1BjORw1z2ChynEN3aoUKjP2-OKG6xWlVhdUf-
ubcbVMI/edit. [Accessed: 26-Apr-2023].
41
Appendix 1
I made a small questionnaire and told my friends and family to fill them after looking thru my
website and database. [21]
Figure 31 : question 1
Figure 32 : question 2.
42
43
44
Appendix 2 – User guide / Installation Guide
The website don’t need any installation a web browser like google chrome etc will do and it
can be opened from the index.html file and that will redirect the html file to your web browser
and the website will open.
For the database you would need mongo DB and Visual studio code to activate the database
and view the data entered into the data base .
In visual studio code you would have to enter the following data in the image or enter this
text cd .\Custom-Form\ , cd .\server\ and node api.js this will activate the database and
deliver a success messaged if the database is active and you can view the details entered in
the mongo DB compass and edit according to your needs.
45

Website For New Restaurants and Venders To Purchase and Sell Products

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Website For New Restaurants and Venders To Purchase and Sell Products

Uploaded by

Copyright:

Available Formats

Raw material delivery system(Quantity

identifier/ delivering the items in need)

Author Name: Nihal Nawaz Kaleem

Author Student ID: 2940424

Supervisor: Dr. Shamik

Dissertation submitted in partial fulfilment for the degree of

Computing Science and Mathematics

Signature : Date : 26-04-2023

1.2 Scope and Objectives

1.3.1 Overview of Dissertation

2.1.2 Rising demand for delivery apps

• The expansion of the world market for online meal delivery

2.1.3 Talabat revenue and business model

Figure 1 : Talabat class diagram

2.1.6 Delivery cost

2.1.7 advertising cost

2.2 Grocery delivery system

Figure 3 : insta shop UML class diagram [8]

Figure 4 : Statistics of Insta Shop (2020). [10]

2.3 Connecting the restaurant and venders.

2.3.1 Food/raw materials suppliers for restaurants

Figure 5 : Supply chain. [11]

2.3.3 Things to keep in mind before connecting raw materials suppliers to

1. Start with one Supplier.

3.2 Web Page

3.2.1 HTML implementation

Figure 6 : home section

Figure 9 : Swiper slider

Figure 10 : categories for restaurant 1.

Figure 11 : categories for restaurant 2.

Figure 13 : categories for restaurant 4.

Figure 15 : products of vender 2.

Figure 17 : products of vender 4.

3.2.14 Add your products.

Figure 19 : footer page

Figure 19 : flow diagram

3.3 CSS implementation

• Cascading Style Sheets is what CSS stands for.

3.4.1 JavaScript Implementation

Figure 23 : Entering the shop details.

Figure 25 : entering the delivery man details.

Figure 28 : Viewing the saved data of shops in mongo db compass.

Figure 30 : Viewing the saved data of delivery man in mongo db compass.

4.3 Limitations and Future Work

4.4 Critical Reflection on your Project

You might also like