Development of Online Food Ordering System

A Proposal

Presented to the Faculty of the

Information Technology Department

College of Technology and Engineering

Palompon Institute of Technology

In Partial Fulfillment of the Requirements

For the degree Bachelor of Science in Information Technology

By:

Pelayo, Jeczy Von

Uy, Dhen F.
Nardo, Mave
Sanico, Christian Jay A.
Baraquil, John Fhil C.

JANETH S. ACLAO, MM,MIT

Adviser

May 2021

i
 APPROVAL SHEET

In partial fulfilment of the requirements for the degree of Bachelor of Science

in Information Technology, this Capstone Project Proposal entitled “Development of
Online Food Ordering System”, has been prepared and submitted by Jeczy Von
Pelayo, Dhen F. Uy, Mave Nardo, Christian Jay A. Sanico, John Fhil C. Baraquil
who is hereby recommended for Proposal Hearing.

DR. HAIDE D. SELPA

Adviser

APPROVED in partial fulfilment of the requirements for the degree of Bachelor

of Science in Information Technology by the Proposal Hearing Committee.

DR. LEVI G. ESMERO

Chairman

JECZY VON PELAYO DHEN F. UY

Member Member

CHRISTIAN JAY A. SANICO MAVE NARDO

Member Member

JOHN FHIL C. BARAQUIL

Member

ENGR. ROMIL L. ASOQUE

Dean, College of Technology and Engineering

Date of Proposal Hearing: June 08, 2021

ii
 TABLE OF CONTENTS

Page

TITLE PAGE ……………………………………………………… i

APPROVAL SHEET …………………………………………….. ii

TABLE OF CONTENTS ………………………………………... iii

LIST OF TABLES ………………………………………………. v

CHAPTER

1 INTRODUCTION
Project Description …………………………………………. 1
Objective of the Project ………...…… ……………………. 2
Scope and Delimitations of the project …………………... 3
Theoretical Framework …...……………………………….. 4
Agile Model …………………………………………………. 6
Conceptual Framework……. ……………………………… 8
Significance…………………………………………………. 8

CHAPTER

2 REVIEW OF RELATED LITERATURE AND STUDIES

Technical Background ……………………………........... 10
Related of Literature………………………………………. 10
Local and Foreign Literature……………………………… 12
Related Studies …………………………………………… 15
Local and Foreign Studies………………………….......... 15
Synthesis and Significance of the Study ……………….. 17

CHAPTER

3 DESIGN AND METHODOLOGY

Technical Background …………………………………… 18
Narrative Explanation of the Existing System ……. ….. 18

iii
Narrative Explanation of the Proposed System ………………. 20
List of Tables ……………………………………………………… 23
APPENDICES………………………………………..................... 28
Unformalized ……………………………………………………… 28
Data Dictionary…………………………………………………… 31

iv
 CHAPTER I

INTRODUCTION

Project Description

Since the pandemic began most all of the business round the world are affected

and struggling to work due to pandemic. one among businesses that are severely

affected is that the restaurants. Mostly, restaurants today are close

because they're struggling to operate the business due to the pandemic protocols.

Here in Palompon one of the restaurant that are affected is the Café Bo’s. Since

the pandemic started their business is not in demand and become lay low that result

them to temporarily close their business.

The researcher came up with an idea to help CAFÉ’ BO’s to catch up and

continue their business while following the protocols. The researcher develop an

online food ordering system, which this method can operate without the assistance to

staffs and having contactless transactions while buying and ordering foods to the shop.

The system is essentially for the users where they'll add and also modify the

orders. The users of the system include the customers where they'll register initially with

the minimum details and can be allowed to check the menu items before ordering them,

adding them to the list and submit the order. The user of the system also includes

employee/admin who will handle variety of users (i.e. Customers) and info associated

with the product addition. They're also responsible for updating the menu items. All the

activities such as adding the items, ordering them, etc. are recorded in the database for

1
 all the events. For the safer system, the login system is integrated. The system

supports on counter payments, cash on delivery and gcash.

Objectives of the Project

General Objective

 To increase efficiency and improve services provided to the customers

through better application of technology in daily operations while following the

pandemic protocols.

 To be able to stand out from competitors in the food service industry.

Specific Objectives

   The main objective of this study is to provide Café Bo’s a system for online-based

ordering and transactions.

1. This study will design and develop an Online Ordering System for Café Bo’s that

will:

 Provide an online ordering system for registered users

 Can manage reservation and orders dine in, take-out or delivery

 Assess the acceptability of the entire system to the end-users in terms of; (a)

effectiveness, (b) efficiency, (c) quality, (d) timeliness

 Make a website for easier purchasing process ordering and reservations

2
  To provide customers for a way to place an order at a restaurant over

the internet. With a website, customers can easily browse all the dishes/menu of

the restaurant, customize dishes to their requirements and place an order.

 To make sure less contact automated order system and can order from home

and/or deliver it anywhere in palompon. You can order using your PC or phone

device online.

Scope and Delimitations of the Project

Scope

This research study focuses on the Development of Online Food Ordering

System of Cafe Bo’s, located at Evangelista St. Brgy. Guiwan 2, Palompon, Leyte. This

establishment was started as a small business way back 2015. Hunk – Silogan was the

first name of the business. After a while CAFE BO’s come up and become the real

name and registered. CAFE BO’s managed by siblings and now became family

business.

The study covers on developing online ordering of Café Bo’s. The restaurant will

provide service to make customers order convenient at their own time, within Palompon,

Leyte.  The customers can choose from the menu. The menu details, availability of the

foods and beverages is posted in the web page of Café Bo’s.  The customers can

purchase using cash or gcash.  The customers can also check the estimated time of

their orders and delivery by visiting the website and log in on their account.

3
Limitation

The restaurant will not allowed customers to request for a refund if the foods were

delivered in good condition.

The items posted on the web page, delivery cost is not included in the product price

depending on how far is the area.

The system will limit the delivery to Palompon area only.

Theoretical Framework

Thomassen (2003, p. 69) defines satisfaction as follows: “the perception of the

customer as a result of consciously or unconsciously comparing his experiences

with his expectations”. Kotler & Keller (2008, p. 80) build on this definition, stating

that customer satisfaction is determined by “the degree to which someone is happy

or disappointed with the observed performance of a product in relation to his or her

expectations”. Performance that is below expectations leads to a dissatisfied

customer, while performance that satisfies expectations produces satisfied

customers. Expectations being exceeded leads to a “very satisfied or even

pleasantly surprised customer” (Kotler & Keller, 2003, p. 80).

The definition of Zeithaml & Bitner (2003, p. 86) is slightly different from that of

Thomassen: “Satisfaction is the consumer fulfilment response. It is a judgement that

a product or service feature, or the product of service itself, provides a pleasurable

4
level of consumption-related fulfilment.” The emphasis of Zeithaml & Bitner is thus

on finding a certain satisfaction in relation to purchasing.

(Gan, 2002) proposed to develop an online fast food restaurant ordering system

that allows customers to place orders anytime at any place. The system helps to

manage order from customer as well as advertise promotion. It allows kitchen staff

to view ordering information, management to manage fast food raw materials and

staff to search customer delivery and profile information. This system helps to

reduce line problems during peak hours, speed up food preparation and increase

customer volumes. As a result, market share of fast food restaurant can be

increased and rises return of asset for the stockholders. The system should be

simple to direct, not gathered and easy to make an order, (Sharma, 2007,)

Requirements

Analysis

Design

Coding

Testing

Installing 5
 FIGURE 1
Agile Model
(System Development Life Cycle)

Figure 1 shows the system development life cycle of the Development of Online
Food Ordering System. The Agile software development model was mainly intended for
helping developers build a project which can adapt to transforming requests quickly. So,
the most important endeavour for developing the Agile model is to make easy and rapid
project achievement. For attaining this task, developers need to preserve agility during
development. Agility can be achieved by correcting the progression to the project by
eliminating activities that may not be crucial for that specific project.

The system requirements are the information’s to be stored in the database of

the system and it identifies the problem, the scope of the project, and its feasibility of
completion given the available resources.

Analysis, this is where the researchers itemize the use of the requirements
analysis that provides the information, processing, services that are needed to support
selected objectives, functions, and features of the system. In this stage, the developers
can determine what are needed to be done and its purpose.

The design is the interface of the system that shows the interactivity between the
user and the computer. The creation of the best structure and systematic arrangement
of the developed project of the overall system. There are the following languages use to
create the system:

 PHP: Hypertext Pre-processor PHP is a popular general-purpose scripting

language that is especially suited to web development. PHP is embedded within
tags, the author can jump between HTML and PHP. PHP as a general-purpose
programming language. But a large percentage of software developers use PHP
as a robust server-side scripting language. It simplifies enterprise application
development by generating content dynamically and interacting with databases
efficiently.

6
  Hypertext Mark-up Language (HTML) is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages
such as JavaScript. By applying these HTML conventions to a text file in virtually
any text editor, a user can write and design a basic webpage, and then upload it
to the internet. Software Application for the Database of the system we the
researchers need the MySQL.
 Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML. CSS is
a cornerstone technology of the World Wide Web, alongside HTML and
JavaScript.
 XAMPP (Apache MariaDB PHP Apache HTTP server, MariaDB database, and
Perl) and interpreters for scripts written in the PHP and Perl programming
languages.
 Bootstrap is a free and open-source CSS framework directed at
responsive, mobile-first front-end web development. It contains CSS- and
(optionally) JavaScript-based design templates
or typography, forms, buttons, navigation, and other interface components.
 jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and
manipulation, as well as event handling, CSS animation, and Ajax.
 OS (Operating System) OS − is software that communicates with the hardware
and allows other programs to run.

Coding, the process of how the system works, controls the database and the interface
of the system. All the list of instructions can be run all throughout the whole system.

Testing, the process to measure the capacities of the system if it is functional or not.
And examine and identify if there’s something to change and needs improvement.

Installation, when the system is completely done. This process is the moving of ideas
from concept to reality. And it is ready to use by the person in charge.

7
 Conceptual Framework

INPUT PROCESS
OUTPUT

 Customer’s Personal  Recording and saving the  Secure customer’s

Information and personal information of the personal access.
password customer  Customer log in to
 Customer’s account  Validating customer’s account their personal
access and password and password account
 Customer’s order and  Recording/posting of orders and  Items reserved for
delivery delivery of customer to report dine-in, pick-up and
delivery

FEEDBACK

Significance of the Project

The objective of the project is to achieve:

 Manage Admin and User accounts

 To help the restaurant to increase more customers

 Maintain restaurant reports

 To make the procedure of ordering much easier

 They can easily to visit and see the menu foods and beverages using the

internet

8
  Easy to register to the website

 Provide an easy access of customers in getting their orders

 Easy to pay by using Cash and Gcash

As more and more people are staying at home and quarantining themselves, the

researchers want to achieve the objectives stated above. The online order and door-to-

door delivery start-ups are all facing both new opportunities and challenges.

Future Researchers

 This study will be effective tool to serve as a reference to the future researcher and

they can also use this study to widen and enlighten them for the research.

9
 CHAPTER II

REVIEW OF RELATED LITERATURE

Technical Background

The concepts of Development of Online Food Ordering System, since it is web

application, keep everything as simple as possible. The project consists in web

application that can be used by employees in a restaurant to handle the clients, their

orders and can help them easily find free tables or place orders. This system, created

mainly for proof of proper web interaction. The restaurant menu is organized by

categories (silog, burger, fries, pasta, drinks and beverages) of menu items. Each menu

item has a name (e.g., fried rice), price and associated recipe. A preparation instruction

sand associated ingredients. The ingredients are identified by their ingredient id and the

quantity of the ingredient needed to prepare a particular recipe, the unit of measure and

a name.

Related Literature

A major cause for retail stock-outs is store ordering (Corsten and Gruen, 2014;

Anon.,2015). Ordering can also take up a large part of store employees’ time, thus

using valuable resources. Not surprisingly, automated store ordering (ASO) or

computer assisted ordering (CAO) have been offered as solutions for improving

performance and reducing costs since the beginning of the nineties, when the electronic

point-of-sale (ePOS) systems became more common (Corsten and Gruen, 2003; Baron

and Lock, 1995; Thayer, 1991). It has also been argued that ASO can help to reduce

10
inventories in stores (Van der Vorst et al., 1997). However, despite the potential

advantages, it seems that the majority of retailers have only just started to implement

automated ordering systems at store level. This master’s thesis examines how

automated store ordering could more efficiently be utilized to improve store operations

and performance. The thesis was done as a part of a two-year logistics research project

Cyclog, which is carried out at Helsinki University of Technology.

There are two types of production ordering systems. One is the push type

production ordering system and another is pull type production ordering system. In the

push type production ordering system, the ordered quantity in each stage is determined

by forecasted demand. In this system the ordered quantity of each production stage is

ordered by a central controller. Material flows are controlled just as if they are pushed

out from the raw materials stage toward the final stage. In pull type production ordering

systems, the ordered quantities in each stage are determined by actual quantities

consumed by the immediate downriver stage. Here no central controller is needed.

Material flows are controlled just as if they pulled into the final product stage from the

stages preceding final production (Raouf and Daya, 2016).

The former type of integration implies that the system consists of two levels, the

upper level consisting of a push type production ordering system and the lower level

consisting of a pull type ordering system (Gupta and Brennann, 2015).

11
Local Literature

 Geancyfood Online Reservation System

Geancyfood Online Reservation System is an online web-based system wherein

clients can make catering reservations through online. The system can help the catering

administration manage their filter, monitor, and store and secure of all the reservations

records. The system will help the administration in making their work easy and fast such

as updating, adding new menu, and printing of records since all the files will be stored in

the database. It is more secure in an automated online system and it is more reliable in

processing reports and records of the reservation than using manual based. The system

allows clients to check their reservations and availability whenever they are online and

can make catering reservations right away. Only the authorized personnel can access

the system with the use of its username and password for the security purposes.

Author: Nico A. Brigula. (October 2016)

 BR Chua Enterprises Inc. Online Shopping Cart

Shopping is very important in our daily life, especially to those who love to shop

some furniture, whenever we need, we usually move to shopping complex. Day by day,

a large amount of consumers increased in shopping area. As a result, to provide a

better consumer services and satisfaction. Thus, consumers are not required to

physically visits to shops to make a purchase including spend to find out specific

products, wait for a long queue for payment. The purpose of this research is to design

an interactive online shopping system that can satisfy consumers to buy products and

12
which system will save cost, fewer employees, reduce administration work and less

time.The system online shopping cart made for BR Chua Enterprises Inc. was one way

of enhancing the business competitively. Though the only problem was their usage of

manual inventory system, it was decided to make a system that can really help it

compete globally. Since BR Chua Enterprises Inc. produces high quality and low-price

kind of made-to-order furniture. It helps customers to shop conveniently and accessibly.

It helps customers to choose items they desire to buy. It could also generate bills and

update records automatically. It was also capable of maintaining various records and

storing all day-to-day transactions.

Author: Julie O. Baritos (March 2018)

Foreign Literature

 Big Daddy’s Restaurants

Based on the proponents research Murray L. Handwerker owner of big Daddys

located at Coney Island Avenue in their Sheep shead Bay were a chain of restaurant

located at in New York, Florida and the Bahamas, local landmarks in Brooklyn and

competitor to the better-know Nathan’s Famous also Coney Island. Big Daddys was

founded in 1964, and the last location closed circa 1991. The First Big Daddys

Restaurant opened in 1964, and was located on Coney Island Avenue inb the Sheep

shead Bay section Brooklyn NY. It was known to be the only true competitor of Nathans

Famous Hot dogs. The driving force behind Big Daddy’s success Was the partnership

of Murray L. Handwerker, the nephew of Nathan Handwerker , founded of Nathans

famous and Robert “big daddy’s “ Napp.

13
 During the mind-2016s Miami club fighter Jerry Powers whose claim to fame was 44

fights in one year worked at Big Daddy’s Restaurant on Lincoln Road in Miami Beach

URL: http:/www.bigdaddyssnyc.com

 Baggers Restaurant

Based on research Mr. Michael Mack owner of the Baggers Restaurant

they reinvented the restaurant and overtaken the restaurant of the first and

second dimension (service and self- service restaurant) all good things come

from above: freshly prepared delicious meals and drinks ordered per touch

screen transported on the metallic tracks directly to your table. They only use

fresh high- quality ingredients, many of which are organic produce, directly from

the local region You will also experience a futuristic but cosy ambience, cheerful,

warm-hearted service staff and last but not least scrumptious, freshly prepared

dishes at a good price- performance ratio. Experience the state of art information

technology in a restaurant for the first time. Before placing the orders via touch

screen, the customer can read about selected suppliers, the concept or attractive

bonus system. Baggers restaurant software offers hit list of other guets to ease

their choice. And after dinner they can evaluate the meals, service or the

ambience of the restaurant, recommend us Via E-mail or SMS- The customer

can do directly per touch screen at your seat.

URL : http://www.sbaggers.de/main-ger/?sid=home&lang=en

14
Related Studies

In exploration, we find new techniques, new knowledge, event develop new

substances, gadgets, equipment, processes or procedures, imagination and skill is

employed by the researcher. The commodities, new devices, services, in technology

are needs of man for a better fuller life which is the concern of the research. These

useful arts are the products of the technological environment and the end-user is

society in general. The excerpt was stated by Josefina Estolas in the book

Fundamentals of Research (1995).

Science and technology are essential for national development and progress.

The State shall give priority to research and development, invention, and their

utilization, and to science and technology education according to the 1987 Philippine

Constitution (Article XIV, Section 10).

Since computer power was the critical resource, efficiency of processing

became the main goal. Emphasis was placed on automating existing process such as

purchasing or paying, often within single department as indicated by Jeffrey A. Hofer on

Modern System Analysis and Design (2016).

Local Studies

 Lopez 2017 conducted a study on a restaurants in Baguio City and found out that

1 Restaurant are largely sole proprietorship in organization they are mostly

15
 owned by Filipinos, although many others are owned by Chinese and American 2

Most Restaurants personnel are male, single and predominantly high school

graduates 3.In terms of available facilities and practices the following are found a

on service facilities, entrance and exits are properly situated, good furniture and

fixture parking space available good lighting and ventilation. Some foods

restaurants as limited mean restaurants that do not have table service(Eherts

and Gisler 2000)netting food to then customer is less than a minute after order is

take specialize in Chicken, seafood roast beef and etc.

Foreign Studies

There are two types of production ordering systems. One is the push type

production ordering system and another is pull type production ordering system. In the

push type production ordering system, the ordered quantity in each stage is determined

by forecasted demand. In this system the ordered quantity of each production stage is

ordered by a central controller. Material flows are controlled just as if they are pushed

out from the raw materials stage toward the final stage. In pull type production ordering

systems, the ordered quantities in each stage are determined by actual quantities

consumed by the immediate downriver stage. Here no central controller is needed.

Material flows are controlled just as if they pulled into the final product stage from the

stages preceding final production (Raouf and Daya, 2015).

16
 The former type of integration implies that the system consists of two levels, the

upper level consisting of a push type production ordering system and the lower level

consisting of a pull type ordering system (Gupta and Brennann, 2014).

Synthesis and Significance of the Study

In this chapter we look at the process of finding, collecting, analysing and

synthesizing research articles which relate to the topic of our study. Before we can add

to the knowledge base of our field of study, we must learn what is already known. The

literature search provides a factual base for the proposed study.

17
 CHAPTER III

TECHNICAL BACKGROUND

This study is qualitative in which it centres on the events that the

respondents had encountered during food ordering online in this pandemic time. In this

concern, the proponents found this an opportunity to help the café/restaurant that the

researchers chosen. In admin system it can add, update and delete (categories, dishes,

and beverage on the menu), it may also view and update sales and inventory, also

can view payment details, reports, and ratings from the customers. The customers also

receive notification if the order is accepted or cancelled. In users system can view or

search items, augment cart, place orders, and can process a payment they can choose

a payment method (Cash on delivery, GCASH). User also can choose order method

(Dine-in, Pick up, and delivery), and leave a ratings.

This presents the figures of the existing system and proposed system namely the

context diagrams, diagram, child diagrams, entity relationship, normalization, un-

normalization and data dictionary.

To fully implement the propose project the proponents needs to characterize

what are the segments, the programming determination and the flow use to the system

and how the propose project works.

Narrative Explanation of the Existing System

Since the administration of the CAFÉ’ BOS, it has been using a manual system,

and obviously its time consuming and hassle to use in terms of speed, reliability,

18
accuracy, and efficiency. The administration is seeking a better way that will help them

handle the ordering and delivery better, more efficiently, and more conveniently for them

and for the customers.

Cashier
Process

Order details
Payment

Order Details

Customers Staff
Chef
Payment

Served

Fig. 1 Context Diagram of Existing System

Context Diagram of Existing System (Fig.1) :

The explanation within the context diagram of the existing system is that the

customers will order manually to the staff, and after they made an order they'll place a

payment. The staff will give the order details and payment to the cashier and therefore

the cashier will forward the details of the order and can be processed by the chef,

afterwards, the chef will serve the order to the customers.

19
Narrative Explanation of the Proposed System

Online food ordering system is the proposed system, which would make the

manual system more convenient and time-saving. In this proposed system gives

restaurants the ability to increase sales and expand their business by giving customers

the facility to order food online and it will also allow the restaurants too quickly and

easily manage an online menu which customer can browse and use to place orders with

just a few clicks. There will be a system administrator who will have the right to add and

manage user accounts, a manager who will be managing delivery boy, products and

orders.

The online food ordering system is defined as software that enables restaurant

businesses to simply accept and manage orders placed over the internet (hosted within

the cloud).

Online food ordering system generally consists of two main components. First

maybe a website or mobile device for the customers who want to look at the

restaurant's dishes and place an online order. The second is an admin management

interface for the restaurants to receive and manage the customer's orders.

User Interfaces:

The customer ordering website or app will generally have several key

requirements to function adequately. These are the functions:

• Accessible across all devices from tablets to PCs.

20
• Easily search the restaurant's menu and see what’s available

• Configure their order types such as delivery or pickup

• Also users can easily track his/her food orders at any time with this food delivery

system.

• Choose after they would really like to receive the order

• Make online payments via gcash or cash on delivery

• Stay up to date on the status of the orders they need to be placed

• View all their past orders and quickly re-order their favorite items

Admin Management Interface:

The admin management interface could be a crucial part of a web ordering

system. It's accountable for notifying the restaurants of the latest orders and helping

them manage the order fulfilment process. The key functions of this are:

• Accessible across all devices for straightforward use in-store and on the move

• Real-time order management interface that permits restaurants to determine

which orders to prepare

• Easy to grasp settings and configuration options to tune the system

• An array of notification methods to stay the restaurant up to date on new orders

21
How this system works:

• Customers can place an online order using the website or mobile app

• Admin can receive instant notification about the new order.

• Customers can receive confirmation about the order placed and delivery time

• Deliver food to the customer’s address (mention while placing the order)

Software tools/technologies used for development:

The backend of the system is developed with PHP and XAMPP and the frontend

of the system is developed with HTML, CSS, Bootstap4, JavaScript, jQuery. Visual

studio code is used for developing this system. Hence, this section is providing a brief

description of the technologies used for this project.

• PHP is a general-purpose scripting language especially suited to web

development. It was originally created by Danish-Canadian programmer Rasmus

Lerdorf in 1994. The PHP reference implementation is now produced by The PHP

Group. [7] PHP originally stood for Personal Home Page, but it now stands for the

recursive initialism PHP: Hypertext Preprocessor.

PHP code is usually processed on a web server by a PHP interpreter

implemented as a module, a daemon, or as a Common Gateway Interface (CGI)

executable. On a web server, the result of the interpreted and executed PHP code –

22
which may be any type of data, such as generated HTML or binary image data – would

form the whole or part of an HTTP response. Various web template systems, web

content management systems, and web frameworks exist which can be employed to

orchestrate or facilitate the generation of that response. Additionally, PHP can be used

for many programming tasks outside of the web context, such as standalone graphical

applications and robotic drone control. PHP code can also be directly executed from the

command line.

• XAMPP is a free and open-source cross-platform web server solution stack

package developed by Apache Friends, consisting mainly of the Apache HTTP Server,

MariaDB database, and interpreters for scripts written in the PHP and Perl programming

languages. Since most actual web server deployments use the same components as

XAMPP, it makes transitioning from a local test server to a live server possible.

XAMPP also stands for X ("cross"-platform), Apache HTTP Server, MySQL,

PHP, and Perl

XAMPP's ease of deployment means a WAMP or LAMP stack can be installed

quickly and simply on an operating system by a developer, with the advantage that

common add-in applications such as WordPress and Joomla! can also be installed with

similar ease using Bitnami.

23
• Bootstrap is a free and open-source CSS framework directed at responsive,

mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-

based design templates for typography, forms, buttons, navigation, and other interface

components.

Responsive design makes it possible for a web page or app to detect the visitor’s

screen size and orientation and automatically adapt the display accordingly; the mobile-

first approach assumes that smartphones, tablets, and task-specific Mobile apps are

employees' primary tools for getting work done and addresses the requirements of

those technologies in design.

• JavaScript often abbreviated as JS, is a programming language that conforms to

the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and

multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object

orientation, and first-class functions.

Alongside HTML and CSS, JavaScript is one of the core technologies of the

World Wide Web. Over 97% of websites use its client-side for web page behavior, often

incorporating third-party libraries. All major web browsers have a dedicated JavaScript

engine to execute the code on the user's device.

As a multi-paradigm language, JavaScript supports event-driven, functional, and

imperative programming styles. It has application programming interfaces (APIs) for

working with text, dates, regular expressions, standard data structures, and the

Document Object Model (DOM).

24
• jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and

manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-

source software using the permissive MIT License. As of May 2019, jQuery is used by

73% of the 10 million most popular websites. Web analysis indicates that it is the most

widely deployed JavaScript library by a large margin, having at least 3 to 4 times more

usage than any other JavaScript library.

jQuery's syntax is designed to make it easier to navigate a document, select

DOM elements, create animations, handle events, and develop Ajax applications.

jQuery also provides capabilities for developers to create plug-ins on top of the

JavaScript library. This enables developers to create abstractions for low-level

interaction and animation, advanced effects, and high-level, themeable widgets. The

modular approach to the jQuery library allows the creation of powerful dynamic web

pages and Web applications.

• Visual Studio Code is a dual-licensed source-code editor made by Microsoft for

Windows, Linux, and macOS. Features include support for debugging, syntax

highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

Users can change the theme, keyboard shortcuts, preferences, and install extensions

that add additional functionality.

Microsoft has released most of Visual Studio Code's source code on the

Microsoft/vscode (Code – OSS) repository of GitHub, under the permissive MIT

License, while the releases by Microsoft are proprietary freeware.

25
 Admin Staff
Accept or decline

Order details
Process

Order
Customers 0
Delivery
CAFÉ BOS online food
Dine in or delivery
ordering system

Served
Cash on delivery

FIGURE 2.CONTEXT DIAGRAM OF PROPOSED SYSTEM

Context Diagram of Proposed System Fig.2)

Context Diagram of Proposed System (Fig. 2) : The proposed enhancement of

existing manual system goes to be an online Food Ordering System. Its function is to

view menu, add to cart, place order and it also includes payment methods (Gcash and

Cash on delivery) and order method (delivery and dine in). By this system it will be very

useful during this this time of pandemic, using this system, this café can still operates

while following the pandemic protocols.

26
Diagram 0 of existing process (Fig.3)

The diagram of the proposed system is stated in the figure below. The figure

shows how the proposed system works within the user’s registration of the new system.

Before purchasing, the user has to register an account to achieve access to the web

site, after creating an account the user has to log in, upon creating an account it

will automatically reflect within the database, the database will quickly respond that the

user have successfully created an account. Just in case the user forgot their passwords,

they still have a choice to recover them by entering forgot password button, your

previous account within the database are going to be updated.

Request for Check for

Registration Registration
\
USER Registration user_id
Response Response
Accept/reject

Request for Login Check for Login

Login
Response Accept/reject Response

Request for get password Check for new password

Forgot
Password
Response Accept/reject Response

Fig.3 Diagram 0 of existing process

27
Child Diagram of Process 1 (Fig.4)

The flow diagram of the proposed system is stated within the figure below. The

figure shows how the proposed system works within the user’s interface of the new

system, this technique includes the method that the users can view or search

items, augment cart, place orders, and can process a payment they can choose a

payment method (Cash on delivery, GCASH). User also can choose order method

(Dine-in, Pick up, and delivery), and leave a ratings.

Fig.4 Child Diagram of Process 1

Check for
Show Categories Show categories
Show/Search
USER category_id
Response
Category
Response
Accept/reject m
Request for Check for
Available Dish Available Dish

Dishes
Response Response
Accept/reject
order_id
Check for order
detail
Request for food order

Add to cart
Response Response
Accept/reject

Check for placing the

Request for placing the order
order
Place Order
Response Response
Accept/reject 28
Child Diagram of Process 2 (Fig.5)

The flow diagram of the proposed system is stated within the figure below. The

figure shows how the proposed system works within the admin’s interface of the new

system. In the admin interface, it can add, update and delete (categories, dishes, and

beverage on the menu), admin can also manage users and also the delivery guy, it may

also view and update sales and inventory. Admin also can view payment details,

reports, and ratings from the customers. If customers have already placed orders the

admin will notify the customer if the order is accepted or cancelled.

29
s ADMIN
Request for Login
0

LOGIN

Response accept/reject

Product manage
(Add, update, Delete) 1 Check product detail
admin_id
MANAGE
PRODUCTS
Response accept/reject Response

Request for view order Check payment detail

admin_id
2

VIEW ORDER
Response accept/reject

Check Active/Deative
Active/Deactive Delivery boy delivery_boy
3

MANAGE DELIVERY
Response
Response

Request review for payment

Check payment detail
4 admin_id
Response accept/reject
VIEW PAYMENT
Response
Response

View report/ratings Generate report/ratings

5

REPORTS/RATING
Response
S
Generate report/ratings

Fig.5 Child Diagram of Process 2

30
 user_id First_Name Last_Name Middle_Name

rating
ID Account_Status

Rating rate Customer

order_id Password
Email

dish_detail Username
_id
Phone Number

has

menu_i ID qty order_id ID menu_id

d
category_id
image
Menu has Order Details
place

Status amt no of serving total_amt

belong
s

Fig.6 Entity Relationship of the Proposed System

order_n payment_i
Category msg amt
umber d

amt
user_id
user_id
category status Order status
_id Payment id
added_on

order_date
type

process
process
id name

email_addr
description ess

contact_usn Site username

update User
fo Information
password
address
31
name id contact
user_id
APPENDICES

TABLE 2: NOMALIZATION

UNFORMALIZED

admin banner

category contact_us

coupon_code delivery_boy

dish dish_cart

dish_details order_details

order_master order_status

rating setting

user wallet

1st Normal Form

Table 2.1 Tbl Admin Login

Primary key: id
Id name username password email

Table 2.2 Tbl Category

Primary key: id
Id category order_number status added_on

Table 2.3 Tbl Coupon Code

Primary key: id
Id coupon_code coupon_type coupon_value cart_min_value

expired_on status added_on

Table 2.4 Tbl Delivery Boy

Primary key: id

32
 Id name mobile password status

added_on

Table 2.5 Tbl Dish management

Primary key: id
Id category_id dish dish_detail image

type status added_on Table 2.6 Tbl Dish Details

Primary key: id
Id dish_id attribute price status

added_on
2nd Normal Form

Table 2.7 User management

Primary key: id
Id name email mobile password

status email_verify rand_str referral_code from_refferal_code

added_on

Table 2.8 Tbl Banner

Primary key: id
Id image heading sub_heading link

link_txt order_number added_on status

Table 2.9 Tbl Contact Us

Primary key: id
Id name email mobile subject

message added_on
Table 2.10 Tbl Dish Cart
Primary Key: id

33
 Id user_id dish_detail_id qty added_on

Table 2.11 Tbl Order Detail

Id order_id dish_details_id price qty
Primary Key: id

Table 2.12 Tbl Order Master

Id user_id name email mobile
address total_price coupon_code final_price zipcode
delivery_boy_i payment_status payment_type payment_id order_status
d
Primary key: id

Table 2.13 Tbl Order Status

Primary Key: id
id order_status

cancel_by cancel_at added_on delivered_on

Table 2.14 Tbl Rating
Primary Key: id
id user_id order_id dish_detail_id rating

Table 2.15 Tbl Settings

Primary Key: id
id cart_min_price cart_min_price_ms website_close wallet_amt
g
Table 2.16 Tbl Wallet
website_close_msg referral_amt Primary key:
id user_id amt msg type

TABLE 3: DATA DICTIONARY

payment_id added_on
Fieldname Data Type

Table 3.0 Tbl Admin Login

Primary key: id
id Integer

34
 name varchar

username varchar

password varchar

email varchar

Table 3.1 Tbl Category

Primary Key: id
id Integer

category varchar

order_number Integer

status Integer

added_on datetime

Table 3.2 Tbl Coupon Code

Primary Key: id
id Integer

coupon_code varchar

coupon_type enum(‘P’,’F’)

coupon_value Integer

cart_min_value Integer

expired_on date

status Integer

added_on date_time

Table 3.3 Tbl Delivery Boy

id Integer

name varchar

mobile varchar

password varchar

status Integer

35
 added_on datetime

Primary key: id

Table 3.4 Tbl Dish Management

Primary key: id
id Integer

category_id Integer

dish varchar

dish_detail text

image varchar

type enum(‘veg’,’non-veg’)

status Integer

added_on datetime

Table 3.5 Tbl Dish Details

Primary Key: id
id Integer

dish_detail Integer

attribute varchar

price integer

status Integer

added_on datetime

Table 3.6 User Management

Primary key: id
id Integer

name varchar

email varchar

mobile varchar

password varchar

36
 status integer

email_verify integer

rand_str varchar

referral_code varchar

from_referral_code varchar

added_on datetime

Table 3.7 Tbl Banner

Primary key: id
id Integer

image varchar

heading varchar

sub_heading varchar

link varchar

link_txt varchar

order_number integer

added_on datetime

status integer

Table 3.8 Tbl Contact Us

Primary Key: id
id Integer

name varchar

email varchar

mobile varchar

subject varchar

message text

added_on datetime

Table 3.9 Tbl Dish Cart

37
Primary Key: id
id Integer

user_id integer

dish_detail_id integer

qty integer

added_on datetime

Table 3.10 Tbl Order Detail

id Integer

order_id integer

dish_details_id varchar

price float

Primary Key: id
Table 3.11 Tbl Order Master
Primary Key: id
id Integer

user_id integer

name varchar

email varchar

mobile varchar

address text

total_price float

coupon_code varchar

final_price float

zipcode varchar

delivery_boy_id integer

payment_status varchar

payment_status varchar

payment_id varchar

order_status integer

38
 cancel_by enum(‘user’,’admin’)

cancel_at datetime

added_on datetime

delivered_on datetime

Table 3.12 Tbl Order Status

Primary key: id
id Integer

order_status vachar

Table 3.13 Tbl Rating

Primary Key: id
id Integer

user_id integer

order_id integer

dish_detail_id integer

rating integer

Table 3.14 Tbl Settings

Primary key: id
id Integer

cart_min_price integer

cart_min_price_msg varchar

website_close integer

wallet_amt integer

wallet_close_msg varchar

referral_amt integer

39
Table 3.15 Tbl Wallet
Primary Key: id
id Integer

user_id integer

amt integer

msg vachar

type enum(‘in’,’out’)

payment_id varchar

added_on datetime

40