Web-Based Ordering System For Ritz Cravings

Republic of the Philippines
BATANGAS STATE UNIVERSITY JPLPC-Malvar

Malvar, Batangas
COLLEGE OF INFORMATICS AND COMPUTING SCIENCES
WEB-BASED ORDERING SYSTEM FOR RITZ CRAVINGS
A Capstone Project Presented to the Faculty of the

College of Informatics and Computing Sciences
Batangas State University JPLPC – Malvar
Malvar, Batangas
In Partial Fulfillment of the Requirements for the Degree

Bachelor of Science in Information Technology
Major in Service Management
GUEVARRA, PAULO M.
MACASAET, JOEY L.
NUNEZ, DARYL
MS. ANGELINE B. JAURIGUE

Adviser
May 2022
i
Malvar, Batangas
TABLE OF CONTENTS
PAGE
TITLE PAGE ............................................................................................................ i
TABLE OF CONTENTS ........................................................................................ ii
LIST OF FIGURES ................................................................................................. v
LIST OF TABLES ................................................................................................. vii
CHAPTER 1.................................................................................................. 1
INTRODUCTION ..................................................................................... 1
Project Context .................................................................................... 1
Purpose and Description ..................................................................... 2
Objectives of the Study ....................................................................... 3
Scopes and Limitations ....................................................................... 4
Definition of Terms ............................................................................. 6
CHAPTER 2.................................................................................................. 8
REVIEW OF RELATED SYSTEM ............................................... 8
Technical Background ............................................................. 8
ii
Malvar, Batangas
System Architecture ................................................................... 10
Related Systems ......................................................................... 11
CHAPTER 3................................................................................................ 17
RESEARCH DESIGN AND METHODOLOGY............................... 17
Data Gathering .................................................................................. 17
Project Concept ................................................................................. 18
Context flow Diagram ....................................................................... 19
Data flow Diagram ............................................................................ 20
Development Method ........................................................................ 22
Development Approach .................................................................... 23
Functional Requirements .................................................................. 25
Non-Functional Requirements .......................................................... 27
User Design Interface ........................................................................ 28
Hardware Requirements .................................................................... 47
Software Requirements ..................................................................... 48
Testing and Evaluation ...................................................................... 50
iii
Malvar, Batangas
Method of Testing ............................................................................. 51
Test Cases .......................................................................................... 51
Project Teams and Responsibilities .................................................. 54
Schedule of Activity (Gantt Chart) .................................................. 54
Bibliography ...................................................................................... 56
iv
Malvar, Batangas
LIST OF FIGURES
FIGURE PAGE
1. System Architecture of the Developed System ................................................. 10
2. Context Flow Diagram of the Developed System .............................................. 19
3. Data Flow Diagram of the Admin ....................................................................... 20
4. Data Flow Diagram of the User .......................................................................... 21
5. Rapid Application Development Model ............................................................. 23
6. Top-Down Approach ........................................................................................... 24
7. Home Page ........................................................................................................... 29
8. Menu Page ........................................................................................................... 30
9. Item Preview Page ............................................................................................... 31
10. Login Page ......................................................................................................... 32
11. Registration Form Page ..................................................................................... 33
12. My Order Page ................................................................................................... 34
13. Billing Form Page .............................................................................................. 35
14. Payment Page..................................................................................................... 36
15. Account Settings Page ....................................................................................... 37
v
Malvar, Batangas
16. Notification Page ............................................................................................... 38
17. Review Page ...................................................................................................... 39
18. Contact Us Page ................................................................................................. 40
19. Admin Dashboard Page ..................................................................................... 41
20. Admin View Orders........................................................................................... 42
21. Admin Orders Page ........................................................................................... 43
22. Admin Promotion Page ..................................................................................... 44
23. Admin Menu Page ............................................................................................. 45
24. Admin Account Settings Page ........................................................................... 46
vi
Malvar, Batangas
LIST OF TABLES
TABLE PAGE
1. Functional Requirements ..................................................................................... 26
2. Non-Functional Requirements ............................................................................ 27
3. Hardware Requirements for Developers and Users in Computer/Laptop ......... 47
4. Hardware Requirements for Users in Mobile Devices ...................................... 48
5. Software Requirements for Developers ............................................................. 49
6. Software Requirements for Users in Computer/Laptop .................................... 49
7. Software Requirements for users in Mobile Devices ........................................ 50
8. Test Case for Admin/Owner................................................................................ 52
8. Test Case for User Customer............................................................................... 53
vii
Malvar, Batangas
CHAPTER 1
INTRODUCTION
This chapter presents the overview, and purpose of the study, as well as the
system’s objectives, scope and limitations, and the definitions of terminologies used
in the developed system.
Project Context
With the advent of modern technology this has been used extensively when
the pandemic hits us in 2020 most of eateries are close due to Covid-19, here during
this times the delivery apps have grown and the number of delivery riders has also
increase. Various eateries have also grown on fb pages, but fb is not enough to
manage orders. There are few accounts on messenger/fb that are private so
sometimes the other customer’s order is not notice when just using the messenger
app.
[1]Online food ordering system is a web application that allows food
businesses to accept and manage orders via a website or mobile app. With an online
ordering system, you can reduce staffing cost. The orders will be appearing on the
system with no extra work required. It can help the business in day-to-day
operations to be more efficient, it makes the ordering process easier and also can
1
Malvar, Batangas
improved the customer service .And also having an online presence can help the
business to increase in sales and boosts the revenue that is why online food ordering
system is one of the best way to streamline a food business.
Purpose and Description
The main purpose of this project is to develop and implement a web based
food ordering system that will help to simplify the order process for both user
customer and the food business. For the user customer side, the system provide
functionalities to place order and supply necessary details, they can explore menu’s
that they may desire and wish to order, and also they can add a menu to their
shopping cart and update the cart quantity. On the other side of the system, an admin
or owner of the food business can allow to manage the menu that is display to the
users, they can add, edit, delete for food category and food item, also they can update
the price and additional information for a given food item.
The developers chose Ritz Cravings as the client who will obtain the benefits
of the system. As of today, the food business only used Facebook page to have
transaction with their customers, but it’s still not enough to manage the orders, there
some issues they have encounter about booking the orders also they wanted to
2
Malvar, Batangas
improve and expand the food business so that the developers think to develop an
innovative system that will meet their satisfaction.
Objectives of the Study
The main objective of the project is to develop a web-based application that
will be useful for a food business to increase efficiency and improve their services.
For developing the Web-based Ordering System for Ritz Cravings, the
system must achieve its tasks and complete the following specific objectives:
1. To provide a functionality for customers to place their order and supply necessary
details:
1.1 Create an account.
1.2 Manage their account.
1.3 Select an item from the menu.
1.4 Add an item to their current order.
1.5 Remove an item/remove all items from their current order.
1.6 Place an order.
1.7 Receive confirmation in the form of an order number.
3
Malvar, Batangas
1.8 View order placed.
1.9 Add payment (Only Gcash)
2. To provide functionality for admin or owner of food business:
2.1 Add/update/delete food category to/from the menu.
2.2 Add /update/delete food item to/from the menu.
2.3 Update price for a given food item.
2.4 Update additional information for a given food item.
2.5 Order Ready notification
3. To develop an implementation plan for the developed project.
Scope and Limitations of the Study
In order to clarify the systems features it is necessary to have its own scope
and limitation. These must be stated clearly in order to avoid misconception of what
the developed system is bound to accomplish.
This study aims to develop a system that would help Ritz Cravings to be able
to manage and organize food orders with the help of a web application. The system
allows the customer to login or register in order to create food order and schedule
4
Malvar, Batangas
the date and time of the foods expected arrival. Based on the customer satisfaction
the system allows the customers to rate and write a review on the foods. To avoid
delivering food on the wrong house the system utilize Google maps in order to pin
exact locations. And a notification feature to remind users of the order status.
As for the Client panel separated and inaccessible to customers the system
provide a dashboard that would display business statistics, a calendar to display
scheduled order appointments, management of food i.e., adding, editing and
deleting from menu, confirming, declining and cancelling of an order, and changing
item status to active or inactive.
The system however has a few limitations that should be pointed out by the
developers. Regarding the modes of payment, the system does not support any
payment methods other than Cash on Delivery due to lack of permit required for
applying a payment gateway API. And with email notifications concerns the system
at the moment is limited to send 500 emails per day. Furthermore the email are
received and is saved in the spam of the customers g-mail account.
5
Malvar, Batangas
Definitions of Terms
The following terms are defined for better and clearer understanding of
study, both conceptually and operationally. It serves as a reference for each of the
system’s functionalities
Admin/Administrator. The one who have rights to control the website processes
such as order, delivery, track and payment etc., Admin can also change the settings
if required.
Ordering systems. The "mechanical" part of inventory management. They're the
programs that take our forecasts, actual orders, safety stock, and, and order
quantities, and turn them into purchase orders or production orders.
Website. A collection of related material that contains text, images, and may also
include video, audio or other media.
Web-based application. Any program that is accessed over a network connection
using HTTP, rather than existing within a device's memory. Web-based applications
often run inside a web browser.
Database. An organized collection of structured information, or data, typically
stored electronically in a computer system.
6
Malvar, Batangas
Facebook Page. A public Facebook account that can be used by brands,
organizations, artists and public figures.
API (Application Programming Interface). A set of defined rules that explain
how computers or applications communicate with one another.
API gateway. An API management tool that sits between a client and a collection
of backend services.
7
Malvar, Batangas
CHAPTER 2
REVIEW OF RELATED SYSTEMS
This chapter presents the related systems used as reference in doing this
project. Also, it includes the technical background to support the requirements
needed by the system and specify its functionalities.
Technical Background
In order to support the features and requirements of the system to be
developed, a number of software tools where used. This tools where chosen for its
suitability and applicability and also made developing the system more efficient and
easier to construct.
The developers notice the difficulties of online food businesses that only use
social media to provide service to their customers. And in response to that problem,
development of a web based application should remove a few manual process
turning it into an automated process and making the task like accepting orders more
organized and manageable.
For the developers to be able to create an efficient and accessible web
application, PHP (Hypertext Preprocessor) a general-purpose scripting language
was chosen. Its ability to produce dynamic page content, collect and encrypt data
8
Malvar, Batangas
for security and can be used to control user-access makes PHP a widely used web
application scripting language. Furthermore it is also a free to use software which is
very useful for both the developers and the client. In order for the developers to be
able to write and save the code, a software should be installed and the developers
chose Notepad++, a lightweight software tool for web development that also support
a wide range of programming languages.
A web application that receives a lot of data such as customer details and
orders, a database to store those information is very much needed. MySQL a free
relational database management system allows the web application to store and
retrieve data. With the collection of sensitive data a secure and reliable database
management system that is scalable are a few reasons of the developers in choosing
the right relational database management system. This few selected software are
open source which are free of use allowing the system to be developed without any
cost.
9
Malvar, Batangas
System Architecture
Figure 1 shows the System Architectural Design of the website. This shows
how the system will be used Web-based Ordering System for Ritz Craving provides
the functionality for customers to place their order supply necessary details. The
Admin or owner can allow to control what can be order by the customers, and also
can allow to keep track of all order placed, take caring of the order retrieving and
displaying order notification
Figure 1. System Architecture of the Developed System
10
Malvar, Batangas
Related Systems
In this section, the related systems of the developed system are discussed.
Related information and ideas are gathered in order to make the system accessible
and functional. The system's goals will be achieved with the help of the relevant
system and the ideas addressed.
[2]Mishra N. et al., (2018) had discussed the “Automation in Restaurants:
Ordering to Robots in Restaurant via Smart Ordering System”. They focus on
utilizing relevant and available technology to everyone which are devices like
mobile phones, and with the accessibility of the internet both aims to develop web
based application skipping a few business process with just a few taps on a screen.
Unlike Mishra’s developed system, the system being developed does not use robots
in order to fulfill customer services and is also limited to food takeaways or food
delivery.
[3]Rubel R. et al. (2020) explains that pre-ordering system that manage order
online through web application which would also keep track of sales. Both systems
have the functionality to view and manage the status of the order like cooking,
delivered and cancel which are a few status that will be displayed in the system
being developed by the developers. On the other hand Rubel R’s developed system
11
Malvar, Batangas
is limited to universities, while the system being developed is limited to Santo
Tomas, Batangas.
[4]Hatim S. et al (2019) proposed the “E-FoodCart: An online Food Ordering
Service”. Similar with the system being developed it aims to provide online service
in rural areas. Both systems provide support to the client in terms of making their
business available to everyone without having to pay any rent for premises since
obtaining monetary resources for a small and medium firm would be challenging.
As a result, the systems will operate as an agent for them to conveniently complete
any transactions. Furthermore, the systems differ on the target customers since
EFoodCart is focused on Hostels in UiTM Campus.
[5]R Herikson and P S Kurniati (2019) created a Web-based Ordering
Information System that can help food shop owners and customers to make
transactions on the website without having to come to the store.
Basically the study aims to help Feandra Cake to perform transaction during
on web and create order report base on customers order data in website and also has
aim to increase the effectiveness and make it easier for customers to order food and
the admin can provide maximum service to customers via the web.
12
Malvar, Batangas
[6]L Warlina and S M Noersidik (2018) develop a web-based ordering
application that enables customers to place an order food and beverages in
restaurant. Based on their research that has been done, the effectiveness of web-
based food ordering system to solve the queue problem of ordering food is still in
doubt, but the enthusiasm for customers and employees to the existence of web-
based food ordering system is vast.
[7]Trupthi, B., et al. (2019) proposed an Online Food Ordering System that
has been designed for Fast Food restaurant, Take-Out or College Cafeterias. It
simplifies the process of food ordering for both the customer and the restaurant, as
the entire process of taking orders is automated, also their system is can be used in
any delivery food industry.
They prove that it's more cost effective and reliable over other systems. It
does not require any human intervention and can be called fully automated. Their
system is developed where the customers can make an order for the food and avoid
the hassles of waiting for the order to be taken by the waiter.
[8]According to Naresh Prajapati (2018), an online shopping system that
permits a customer to submit online orders for items and/or services from a store
that serves both walk-in customers and online customers. The online shopping
13
Malvar, Batangas
system presents an online display of an order cut off time and an associated delivery
window for items selected by the customer. The system accepts the customer’s
submission of a purchase order for the item in response to a time of submission
being before the order cut off time. The online shopping system does not settle with
a credit supplier of the customer until the item selected by the customer is picked
from inventory but before it is delivered. Therefore, the customer can go online and
make changes to the order. In addition, available service windows are presented to
the customer as a function of customer selected order and service types and further,
the order picking is assigned in accordance with a picker’s preference. When
ordering goods, many shopping systems provide a virtual shopping cart for holding
items selected for purchase. Successive items selected for purchase are placed into
the virtual shopping cart until a customer completes their shopping trip. Virtual
shopping carts may be examined at any time, and their contents can be edited or
deleted at the option of the customer. Once the customer decides to submit a
purchase order, the customer may print the contents of the virtual shopping basket
in order to obtain a hard copy record of the transaction.
[9]Shamsor Masra Othman (2019) “Online Ordering System of LIDO
Enterprise” a web-based system that helps LIDO Enterprise to manage their
business digitally, and allow customer to make order online. As a fast growing
14
Malvar, Batangas
company, online enterprise system becoming a need compared to manual method.
Therefore, this system has been developed to help LIDO Enterprise to manage their
sales and services online .It is a better approach to optimize the relationship between
LIDO Enterprise and customers. There are two target users in this system, admin
staff and the customers of LIDO Enterprise. The system consists of ten modules:
login and registration, customize stock specification, manage order and profile,
search product, manage stock and specification, approve order, advisory
administration for admin side function and Live Chat. Rapid Application
Development (RAD) model has been used in this project. The four phases are
requirements planning, user design, construction and cutover. The implementation
of interface and coding to each module in the system has been completed. The
testing shows that the acceptance criteria of the system has achieve the objectives
of this project.
[10]Julie O. Baritos (2018) “BR Chua Enterprises Inc. Online Shopping
Cart”. The purpose of this research is to design an interactive online shopping
system that can satisfy consumers to buy products and 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
15
Malvar, Batangas
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.
[11]Nico A. Brigula. (2019) proposed “Geancyfood Online Reservation
System” 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.
16
Malvar, Batangas
CHAPTER 3
RESEARCH DESIGN AND METHODOLOGY
This chapter presents the designs used, and different diagrams to be applied
in developing the system. To accomplish the desired objective of the group, the
developers also looked for various methodologies.
Data Gathering
At the height of the pandemic, social media was often used by people to
obtain information about the virus, find food, supplies, medicines, and etc. The
developers will use a Quantitative research method to gather data. Quantitative
method is the most appropriate method to be used to obtain information that needed
to the system. This method will help the developers to understand the requirements
that needed to meet the objectives of the developed system.
The developers developed a Web-based Food ordering system. For the data
gathering, the developers planned to interview the client and the recent customers.
Quantitative research method is used to this project because it is appropriate for a
large number of subjects to get accurate results in this project.
The developers will set a questionnaires that will help and evaluate the
developing system. The questionnaires will be used to determine the opinion of the
17
Malvar, Batangas
client and the recent customers. This will also help the developers to understand
their opinions. The data will be collected in the survey and will be used as a starting
point in the developing of the system.
Project Concept
The developers aim to develop a website for Ritz Cravings. The developers
used a quantitative methods to develop the system. Quantitative method is a process
of opinions and concepts. Using these method, the developers will conduct a one on
one interview to their client and to the recent customers, and to conduct surveys
through the use of social media. The data will be collected and will be used by the
developers to develop the system.
The system is built to manage the orders, to simplify the order process for
both user customer and the food business, the system provide functionalities to place
order and supply necessary details, they can explore menu’s that they may desire
and wish to order, and also they can add a menu to their shopping cart and update
the cart quantity. In addition, the customers will be able to send feedbacks about
their suggestions and opinions in the system.
The system is useful for managing orders, and tracking their exact locations
to make sure their orders will be delivered on exact location. The system will help
18
Malvar, Batangas
the client manage the order of the customers, which will be more orderly than
making an order through the use social media.
Context Flow Diagram
The figure 1 shows the context flow of the website. The administrator has
full access to the system while the user can only view and send request or send
feedback. The registered users will be saved from the database on the system. The
user will input their order information to the system where it will be generated as a
register to view the list of Ritz cravings information.
Figure 2. Context Flow Diagram of the Developed System
19
Malvar, Batangas
Data Flow Diagram
Figure 3 shows the data flow diagram for the admin/owner. The first process
is requesting for login, the admin is required to input the given username and
password to access the system. After login process, the admin can manage the
product from adding, updating or deleting a product. The third is viewing an order,
the admin/owner can check the order detail coming from the user customer. Fourth
process is view payment, the admin can check the payment detail of their customer.
Lastly, the admin can generate a report for order and payment.
Figure 3. Data Flow Diagram of the Admin
20
Malvar, Batangas
Figure 4 shows the data flow diagram of the user. Based on the diagram we
can see that upon registering and login in, the user customer can check their order
detail and cart from place order and add to cart section also the user customer can
check the payment detail from payment section.
Figure 4. Data Flow Diagram of the User
21
Malvar, Batangas
Development Method
The method used in developing the system is Rapid Application
Development or RAD. It is a type of agile methodology that focuses on prototypes
and constant iterations. It prioritizes user feedback and believes in incorporating
changes based on usage over sticking to a rigid plan. The RAD process is designed
to evolve with changing requirements in real-time. While it is based on specific core
guidelines, the development philosophies go through constant evolution based on
user feedback. Figure 5 illustrate the Rapid Application Development Model. It
consists of five (5) phases.
The first phase is defining the requirements where in the requirements, scale,
and scope of the project are determined. All the stakeholders, including designers,
developers, clients, and other experts collaboratively discuss and finalize the project
requirements. The second phase is building a prototype, this phase includes
designers and developers who work with clients to create one or multiple prototypes
and improve them constantly until a final product can be created. The third phase is
obtaining a feedback, users provide their feedback on the prototypes and beta
versions after these are converted to working models. Once feedback comes in,
developers can modify or improve the prototypes to create an optimized product.
The fourth phase is testing the product, the product must be tested to check for
22
Malvar, Batangas
errors, bugs, or malfunctioning components. Here, the user and developer can work
together to determine whether the finished code is working fine or needs to be
improved or changed to create a better user experience. The fifth and last phase is
presenting the application, in this phase the developer performs data conversion and
trains users on how to operate the software. This phase again involves collaboration
between the maker and the user, and can be conducted smoothly since the user’s
feedback has been considered during development.
Figure 5. Rapid Application Development Model
Development Approach
The developers will use the Top-down Approach. This method emphasizes
preparation through understanding of the developed system, as well as a method
that begins with the big picture and breaks down into smaller parts.
23
Malvar, Batangas
Figure 6 illustrates the Top-down Approach that will be used by the
developers. After conducting an interview with the client. The developers will
review the data collected, the developers will begin preparing the requirements. The
developers would put their ideas to create a plan that meets the needs of the user.
The third is the design phase, which involves the development of structures,
database and user interfaces. The developers would create a visual representation
for the draft of the user design interface. The developer aims to have a user-friendly
wherein it is simple to use, understand and learn.
The fourth step is the implementation phase, which involves several testing
of the developed system to ensure that it meets all operational and functional
requirements. Installing the developed system in its environment.
Figure 6. Top-Down Approach
24
Malvar, Batangas
The final step is the maintenance phase, where the developers track
functionalities. The developers will also keep the developed system updated. This
involves repairing defects after the developed system has been deployed.
Functional Requirements
This section defines the function of the system and its components including
data manipulation, processing, and other specific functionality that the system is
supposed to accomplish. Functional user requirements have high-level statements
of what the system does, as well as describe clearly the software services in detail.
The table below shows the functional requirements of the system undergoing
development. In order to further understand the system processes, functional
requirements is necessary to document. Functional requirements are description of
the services or functions that the software offer.
Table 1. Functional Requirements
MODULE DESCRIPTION
In order for a user to access the order
function of the website the user is
Login
required to login for personal
information i.e., contact and address.
For first time user of the web application
Register a registration form is necessary to create
an account to login with.
25
Malvar, Batangas
To allow users to select foods and

continue browsing, an “Add to Cart”
Add to Cart function where the user can store their
past selected food is implemented in the
system.
Confirm order is the final part of the
ordering process. Here the system will
Confirm Order
ask for address and billing information
to finalize each order.
The system helps the admin be
reminded about the orders. In this page
Dashboard the admin will be shown stats of orders
and a calendar to view orders expected
in each day.
This feature allows the user to write
Submit Review their review on the goods and service
that they got.
Adding new items is necessary to grow
Add Item as a business. And increasing the items
to sell is very much needed in the future.
The process involving data adjustment
when invalid or inconsistent data
Edit Item records are present. It is important that
the data available for users is correct and
accurate.
To erase the data content of a specified
Delete Item item, it is always necessary to have a
delete function in a system.
Orders are requested by the users and
the admin will receive the request.
During that time the order would be in
pending status. After the admin review
Change Order Status the order they can then change the status
to accept or cancel. This feature will
allow our client to accept the amount of
order that they can handle to avoid
failed deliveries and bad reviews.
26
Malvar, Batangas
Non-Functional Requirements
Non-functional requirements are often called quality attributes of the
software; this type of requirements are important as the functional requirements, for
they ensure the efficiency of the system.
The table shows non-functional requirements which states and specifies the
criteria of the system. This can be used to judge the operation of a system, rather
than specific behaviors. This can also be a system’s constraint or restrictions on
system’s design.
Table 2. Non-Functional Requirements
CRITERIA DESCRIPTION
The admin panel of the web application
is separated with the public web
Security
application and is also protected with an
account login function.
The web application is lightweight
which means that low end pc/phone can
Performance
access the web application and responds
smoothly without much delay.
The system have a simple UI and is very
Usability
user friendly.
It does not require high end processors
and graphics card or a high end phone,
as long as the computer/phone have a
Compatibility
working browser installed and an
internet connection the web based
application can be accessed.
27
Malvar, Batangas
The data provided by the web

application is reliable and accurate
especially the realtime dashboard
Reliability
figures. It is generated from the
database where the calculations of data
are stored.
User Design Interface

User interface (UI) design is the process designers use to build interfaces in
software or computerized devices, focusing on looks or style. Designers aim to
create interfaces which users find easy to use and pleasurable. Good user interface
design facilitates finishing the task at hand without drawing unnecessary attention
to itself. Graphics design and typography are utilized to support its usability,
influencing how the user performs certain interactions and improving the aesthetic
appeal of the design. The design process must balance technical functionality and
visual elements to create a system that is not only operational but also usable and
adaptable to changing user needs.
Opening the website, users would be redirected to the home page of the
website as shown in the figure below. This page consists of the banner and a few
posted promotions of the products available. And at the top of the page in the
navigation bar the (1) Home is a hyperlink that would redirect the current page to
28
Malvar, Batangas
the home page of the website. For the users convenience there’s also (2) Menu
which jumps to the page where a user can check available products at the moment.
If a user adds a few products and wants to proceed checking out (3) My Order direct
Figure 7. Home Page
to a page to manage the orders. And if ever a customer has a complaint, comment
or suggestion the website allows the customer to voice out their opinion through (4)
Contact Us page. The (5) user icon allows the user to open user settings or if not
logged it will redirect the user to the login page. For promoting a few product the
home page will show posted (6) promo of the products posted by the admin account.
29
Malvar, Batangas
The next table shows the menu page of the website. Here the customers can
explore the products available. The Menu page have a (1) Sort By dropdown box
that allows the user to sort by price low and high, Aa-Zz or ratings. And for user to
check specific products the website supports (2) Search box. An inventory of orders
before check out is a feature that the website possess and is the reason for an (3)
Add Order button under the items info.
Figure 8. Menu Page
For a user to gain more knowledge about the product selected, the website
redirect the user to page that shows more information about the specific product.
The page contains the name of the product, the price, images and ratings of past
30
Malvar, Batangas
customers. To allow the users to change the quantity needed the website contains a
(1) Quantity textbox. Furthermore, a minus and plus button is also added at the end
of the textbox for increment and decrement. And also a (2) Add order button to add
the item to list in My Order page. To add appeal to the users the website allows to
write a review and express what kind of service the user experience for other user
to view.
Figure 9. Item Preview Page
Before the website allow the user to add items a login it with an account
would be required as shown in the figure. This allow the website connect an order
to an account registered inside the database of the website. The page contains a (1)
username textbox where the user input a registered account username. And the (2)
31
Malvar, Batangas
Password textbox is for the user to input the password of the account the user is
trying to login with. If a user forgot their password, the website support a feature
(3) Forgot password to send a temporary password on the email saved on the
registered account for the user to be able to login and change the password later.
And if the user does not have an account the login page has the (4) Create Account
hyperlink that redirect the user to registration form page. After the user input the
necessary credentials the (5) Login button would then activate the function that
would validate the credentials from the database and would let the user access the
system and its functions.
Figure 10. Login Page
32
Malvar, Batangas
For new users the website have a registration form page that takes personal
information specifically for users contact information and address. The figure below shows
the first textbox (1) username, which should be filled with a unique name which would be
used to login the next time a user use the website. The next textbox is the (2) password,
which is a key to match with the username to secure a user’s account and its information
to public. After that is the (3) confirm password to confirm and make sure that there’s no
human error on the creation of the account since the password is a sensitive information
use to secure a user’s account. The (4) first name then is requested by the website from the
user together with the (5) last name. Next to that are contact information of the user like
the (6) email textbox for notifying and the (7) Contact textbox or the phone number. And
lastly the (8) Address textbox for delivering purposes. After the user fill the fields a (9)
Register button should then be pressed to save the information filled inside the textbox and
be used to login in the website.
Figure 11. Registration Form Page
33
Malvar, Batangas
The next figure illustrates the My Order page, this shows the list of added
products before proceeding to checkout. In this page the website allows the logged
in user’s to increase or decrease the quantity of a product by pressing the plus and
minus button or the user can type the amount they want in the (1) QTY textbox.
Aside from that the user can also delete a product in their order list with the (2)
delete button. If the user is very much satisfied with their order and the list of their
orders are finalized they can then proceed to billing information after pressing the
(3) Proceed button at the bottom of the page.
Figure 12. My Order Page
34
Malvar, Batangas
In the figure shown below the information needed by the website are very
important in the process of delivering the product since this consists the address and
the information of the person receiving the product. The textbox (1) receiver name
is a field that is required to be filled for the product to be delivered at the right
person. The (2) email textbox is required for the user to receive notification on the
status of their order and also for them to receive the temporary password from forgot
password feature. Lastly in contact information the (3) contact number is required
Figure 13. Billing Form Page
to be filled for additional contact information. (4) Address textbox is important for
delivering the product and is advisable to input an address that is within St. Tomas
Batangas. The system supports a map feature that allows the user to pin the exact
location for accurate delivery. Last few important details are about the date and time
if the order expected to be received. The (6) dropdown is for the date of the order to
35
Malvar, Batangas
expectedly arrive and the (7) time textbox is for the suggested time of the order to
arrive. After finalizing and filling all the necessary fields the (8) confirm button is
to confirm the data filled.
To avoid fake order/booking the clients ask the customers to pay 50% of the
final price of the order. In the website before the user’s order to be recorded and
sent to the developer’s client the final step of setting an order is for the user to send
an amount to the developer’s client in Gcash. After successfully sending payment
using Gcash app the user will be required to put their Gcash number in the (1)
textbox and the transanction reference number of the payment in (2) textbox. And
finally sending all the order details to the developer’s client by pressing the (3)
confirm button.
Figure 14. Payment Page
36
Malvar, Batangas
For the users to change personal information the website contains account
settings which can be seen in the figure below. In this page user is presented with
(1) first name textbox and (2) last name textbook, the (3) email textbox for changing
where to receive notification, a (4) contact number textbox for changing phone
number. The (5) username textbox if a user decides to change it and an (7) old
password textbox is required to fill up inorder for the (8) new password to be saved.
To save the changes made in the user’s personal info the (9) button should be
pressed.
Figure 15. Account settings Page
37
Malvar, Batangas
Another page in the user profile is shown in the figure. The notification page
show the recent status changes of orders and other information. There are a few
profile settings for a user one of them is the (1) Account Settings where the user can
change account information and the (2) Notifications where the orders are listed. If
the users order are not yet accepted and for some circumstances that they would like
to cancel the order the (3) Cancel hyperlink for pending orders is available. And if
the order completed there would be a (4) Write a Review hyperlink for the user to
write their opinion about the service that the user received.
Figure 16. Notifications Page
38
Malvar, Batangas
The Figure shown illustrates review page for the user to express their opinion
regarding to the completed order. In this page the website allows users to (1) upload
images concerning the order that is under review. The user also is given the ability
to (2) rate the product from 1 to 5. And ofcourse a short (3) comment to finish of a
review. A (4) submit button is located at the bottom of the page to submit the review
created by the user.
Figure 17. Review Page
39
Malvar, Batangas
The last page available for the public and the users is the Contact Us page
show in the figure. The (1) first name textbox and (2) last name textbox is requested
by the website acknowledge that the response was from a real person with a
legitimate concerns regarding the website and the business. An (3) email textbox is
also required in order for the business owner to respond to the request or answer the
questions the users might have. The (4) message textbox should be filled with a brief
and direct comment, message or concern regarding the business. And to send the
concern/message to the website owner a (5) submit button is located at the bottom
end.
Figure 17. Contact Us Page
40
Malvar, Batangas
The website supports an admin panel secured by an account. The figure shown
below presents a dashboard creating a visual aid to understand the demand of orders
and a calendar showing scheduled orders that are accepted by the admin. The admin
panel supports a lot of feature that is made to aid the business owner with the order
inquiries. The (1) Dashboard redirect the admin the figure shown below. While, the
(2) Orders jumps to the page where the admin can see all the orders organized and
Figure 18: Admin Dashboard Page
separated by the status. The (3) Promos direct the admin to a page where the admin
can manage the promotions that can be seen by the public users. The (4) Food Lists
will take the admin to the page of food lists/Menu available for the users to order.
And the (5) Account settings where the admin can change a few personal
41
Malvar, Batangas
information. The admin panel also allows the admin to change the figures base by
week, month or year using the (6) dropdown box. And in the calendar feature, the
website allows the admin to view the orders in a list in a specific date with the (7) order
hyperlink.
When an admin select a date to view an order list in a specific date a pop-up
window will appear like the figure below. The window will display the date and a
table that lists the order number, the name, the quantity and the price. The window
does not support any operation which is why there’s only an (1) OK button to close
the window and return to the admin dashboard.
Figure 19. Admin View Orders
42
Malvar, Batangas
In the Orders page shown below, the admin is presented with an organized list
of orders. Separated by the order status pending, accepted, completed and cancelled.
In this part of the website the admin has the ability and control to moderate the
accepted orders by changing the (1) dropdown box in the status column of the table.
Figure 20. Admin Orders Page
For the admin to be able to manage posted promos in the website shown to
the users a Promos Page in needed as shown in the figure. The (1) upload image
allows the admin to upload an image of the product being promoted and in the (2)
description textbox contains what the promotions is about. There’s also a (3) title
textbox to title the promotion post and a (4) submit button to publish the post for the
43
Malvar, Batangas
users. Aside from creation the page also allow the admin to manage the promotions
by editing the post with the (5) edit button or deleting the post with the (6) delete
button.
Figure 21. Admin Promotion Page
To manage the available product for the users to order there should also be a
page to manage it as shown in the figure. The page allows the admin the (1) upload
image of the product name the product in the (2) name textbox and put a price on it
in the (3) price textbox. The (4) status dropbox on the other hand is used to hide or
show a product if in some circumstances that it is not possible to prepare. And for
the admin to explain what is included in the product a description is necessary to be
44
Malvar, Batangas
filled in the (5) description textbox. If all the necessary fields are filled the (6) submit
button allows the admin to add the product to the menu for the users. For managing
the data already in the menu the (7) edit button allows the admin to modify fields
and the (8) delete button allows admin to delete an existing product in the menu.
Figure 22. Admin Menu Page
The last page available in the Admin panel is shown in the figure below. The
Account Settings Page allows the admin to change personal information like profile
picture, name etc. The (1) upload image can change the admins logo or the image
of the user when logged in. the (2) name textbox changes the name of the account
which in admins case is “Admin”. And similar to the normal user settings the admin
45
Malvar, Batangas
account settings also have the (3) username textbox in case the developer’s client
wants to change it from the old one created by the developers. The (4) email textbox
is one of the important fields that should be accurate since the messages from the
website that the users want to send will be directed to the email in that field. And
the (5) phone textbox should also be accurate since it’s the contact info that would
be available for the users to use in case there’s a concern regarding the products or
the website. There’s also the field (6) new password for changing of password from
the old password. Furthermore, the (7) old password textbox is for the admin to
confirm the changes like a security key. And to finalize every changes made with
the field a (8) submit button is located at the end of the page to be triggered.
Figure 23. Admin Account Settings Page
46
Malvar, Batangas
Hardware Requirements
Computer hardware specification is one of the most important part to know
when implementing and developing systems. This hardware specifications allowed
the developers and the user’s computer to run the program developed. It can also
allow users to properly and precisely operate the system that has been created. To
satisfy a contract, solve a problem, achieve an objective, meet a standard, or to meet
any other guidelines of the project hardware requirements will always vary
depending on the project and no two systems would have identical requirements.
The table lists the minimum hardware requirements to run the developed
system. The function of the system and the performance of the system relies on the
hardware being used by the users and the developers.
Table 3. Hardware Requirements for Developers and Users in Computer/Laptop
HARDWARE SPECIFICATION
Processor Intel Core 2 Duo
RAM 2 GB
Hard Drive 120 GB
47
Malvar, Batangas
The table shown below list the minimum recommended mobile hardware
requirements to ensure developed system run for the users.
Table 4. Hardware Requirements for Users in Mobile Devices
HARDWARE SPECIFICATION
Processor Snapdragon 480/Apple A8
RAM 2 GB
Storage 16 GB
Software Requirements
Software tools are another requirements that are necessary to run the
developed system. The tools are used to write code and are needed by the developers
in the developments phase. A condition or capability that must be met or possessed
by a system or system component to satisfy a contract, standard, specification, or
other formally imposed document.
The Operating system that the developer uses in creating the project is
Windows 10 or a higher windows with a 64-bit software architecture. The
developers used notepad++ as the programming tool for the system, while PHP,
HTML, CSS and JavaScript as the programming language. MySQL as database and
for testing the developers used XAMPP as local web server. Lastly, to run and view
48
Malvar, Batangas
the result of the program, the developers use Google chrome Web Server. It is also
tested to use in Microsoft Edge as well as Mozilla Firefox.
Table 5. Software Requirements for Developers
SOFTWARE SPECIFICATION
Operating System Windows 7
Programming Tool Notepad++
Database/Local Web Server XAMPP, MySQL
Internet Browser Chrome, Firefox, Edge, Opera etc.
Table 6 illustrates the minimum software requirements for the user to run the
system smoothly without encountering issues. The developers recommends Google
Chrome, Mozilla Firefox or Microsoft Edge. Other web browser that are available
on the internet that are not mentioned are not yet tested by the developers
Table 6. Software Requirements for Users in Computer/Laptop
Operating System Windows 7
Web Browser Chrome, Firefox, Edge, Opera etc.
The table shows the minimum mobile software requirements for the user to
run the system smoothly without encountering issues. The developers recommends
Google Chrome, Mozilla Firefox or Microsoft Edge. Other web browser that are
available on the internet that are not mentioned are not yet tested by the developers.
49
Malvar, Batangas
Table 7. Software Requirements for users in Mobile Devices
Operating System Android 5.0 lollipop/iOS 8.0
Web Browser Chrome, Firefox, Edge, Opera etc.
Testing and Evaluation
In the developmental advancement of the system, system testing plays a
critical role because it tests whether or not the system meets the functional
requirements. The developers have conducted many types of tests that aim to verify
the various aspects of the developed framework, and these are as follows.
The developers perform a white box test during the development stage of the
system to verify all the system components to ensure that the designed system meets
the specifications expected by the client. The developers used the data gathered from
the client interview to develop this system with parameters to calculate each part of
the system.
The developers have considered the use of black box testing to verify whether
the targets were accomplished by the project. Testing of the black box verifies the
proper handling of the external functions offered by the program, or whether the
behavior detected meets user expectations.
50
Malvar, Batangas
Method of Testing
In order to evaluate the potential defects or errors in the system, the testing
method to be used is important. It will also assist in developing and allowing
framework revisions. The black box method of testing was also used by the
developers.
To the expected users of the system, the developers will explain the
developed system. Each function of the system will be discussed by the developers.
By adding input and making some comments to the system, the expected users will
have their comments and proposed system improvements. If required, the
developers will apply the suggested modifications to the system.
Test Cases
The developers used test cases to determine whether the designed framework
fulfilled the goals successfully. The test cases were administered to the admin and
staff members. The test case is a series of conditions or variables in which the tester
can determine whether the test system meets or works properly. The developers used
a series of similar tasks for users to perform. It can determine whether or not the
system is ready for implementation by using a test case. If the user/s responses were
equivalent to 100%, that would be considered success. But if the result is lower than
51
Malvar, Batangas
100%, it is considered as failed. The success rate of the system will be determined
using the formula n/t*100=Success rate percentage, where t = total number of users
and n = number of the user.
Tables below shows the test cases that will be used to test and evaluate the
system. The following test cases consist of the main requirements the developed
system must meet in order to validate the effectiveness of the system.
Table 8. Test Case for Admin/Owner

TASK TASK EXPECTED ACTUAL
STATUS
NO. DESCRIPTION RESULT RESULT
The admin
1 System Login should be able to
view order.
The admin
Register Account should be able to
2
register an
account.
The admin
should be able to
3 Promo option manage posted
promos in the
website.
The admin
Should be able
Manage Menu to manage the
menu in terms of
4
adding new
product, deleting
52
Malvar, Batangas
an existing
product.
The admin
Account Settings should be able to
5
change personal
information.
Table 9. Test Case for User Customer
TASK TASK EXPECTED ACTUAL

STATUS
NO. DESCRIPTION RESULT RESULT
The user should
be able to login
System Login the system with
1
required
username and
password.
The user should
Register Account be able to
2
register an
account.
The user should
3 Add to Cart be able to add
order into cart.
The user should
Checkout Order be able to
4
checkout and
review order.
The user should
be able to
5
Account settings change personal
information.
53
Malvar, Batangas
Project Teams and Responsibilities
Paulo Guevarra - Programmer
Joey Macasaet - Documentation
Daryl Nunez – Documentation
Schedule of Activities (Gantt Chart)
MONTHS
ACTIVITIES
MARCH APRIL MAY JUN JULY AUG SEP OCT NOV DEC
1
Brain
Storming
2
Requirement
s Gathering
Planning the
3 System
Design
4 Chapter 1
5 Chapter 2
6 Chapter 3
Chapter 4
Chapter 5
7 Login Page
Registration
8
Form Page
9 Home Page
10 Menu Page
54
Malvar, Batangas
Item Preview
11
Page
My Order
12
Page
Billing Form
13
Page
Payment
14
Page
Account
15
Settings Page
Notification
16
Page
17 Review Page
Contact Us
18
Page
Admin
19 Dashboard
Page
Admin View
20
Orders
Admin
21
Orders Page
Admin
22 Promotion
Page
Admin Menu
23
Page
Admin
24 Accounts
Settings Page
55
Malvar, Batangas
Bibliography
[1] CloudWaitress © 2020. What is an online ordering system? Retrieve April
2022 from https://doi. org/10.35940/ijrte. B 1156 (2019): 0782S319
[2] Mishra N. et al., (2018) “Automation in Restaurants: Ordering to Robots in
Restaurant via Smart Ordering System”. Retrieve April 2022 from
https://www.gyanvihar.org/researchjournals/ctmpaper2017/IJCTM%20Vol_4_Iss_
1_1.pdf
[3] Rubel R. et al. (2020) “Design of an Electronic Pre-Ordering System for
Academia”. Retrieve April 2022 from https://diverseresearchjournals.com/wp-
content/uploads/2021/02/design-of-an-electronic-pre-ordering-system-for-
academia.pdf
[4] Hatim S. et al (2019) “E-FoodCart: An online Food Ordering Service”.
Retrieve April 2022 from https://www.researchgate.net/profile/Shahirah-
Hatim/publication/334558836_E-
FoodCart_An_Online_Food_Ordering_Service/links/5dcb81ac458515143506d406
/E-FoodCart-An-Online-Food-Ordering-Service.pdf
56
Malvar, Batangas
[5] R Herikson and P S Kurniati 2019 IOP Conf. Ser.: Mater. Sci. Eng. 662
022010 “Web-Based Ordering Information System on Food Store” Retrieve April
2022 from https://iopscience.iop.org/article/10.1088/1757-899X/662/2/022010/pdf
[6] L Warlina and S M Noersidik 2018 IOP Conf. Ser.: Mater. Sci. Eng. 407
012029 “Designing Web-based Food Ordering Information System in Restaurant”.
Retrieve April 2022 from https://iopscience.iop.org/article/10.1088/1757-
899X/407/1/012029/pdf
[7] Trupthi, B., et al. "Online food ordering system." International Journal of
Recent Technology and Engineering. Retrieve April 2022 from https://doi.
org/10.35940/ijrte. B 1156 (2019): 0782S319
[8] Naresh Prajapati (2018) Retrieve April 2022 from
https://capstoneguide.com/online-ordering-system-capstone-project-
document/#:~:text=Foreign%20Studies&text=According%20to%20Naresh%20Pr
ajapati%2C
[9] Shamsor Masra Othman (2019) “Online Ordering System of LIDO Enterprise”.
Retrieve April 2022 from https://capstoneguide.com/online-ordering-system-
capstone-project-
57
Malvar, Batangas
ajapati%2C
[10] Julie O. Baritos (2018) “BR Chua Enterprises Inc. Online Shopping Cart”.
Retrieve April 2022 from https://capstoneguide.com/online-ordering-system-
capstone-project-
ajapati%2C
[11] Nico A. Brigula. (2019) “Geancyfood Online Reservation System”. Retrieve
April 2022 from https://capstoneguide.com/online-ordering-system-capstone-
project-
ajapati%2C
58

Web-Based Ordering System For Ritz Cravings - Chapters 1 To 3

Uploaded by

Document Information

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

Web-Based Ordering System For Ritz Cravings - Chapters 1 To 3

Uploaded by

Copyright:

Available Formats

Republic of the Philippines

BATANGAS STATE UNIVERSITY JPLPC-Malvar

A Capstone Project Presented to the Faculty of the

In Partial Fulfillment of the Requirements for the Degree

MS. ANGELINE B. JAURIGUE

TABLE OF CONTENTS ........................................................................................ ii

LIST OF FIGURES ................................................................................................. v

LIST OF TABLES ................................................................................................. vii

Project Context .................................................................................... 1

Purpose and Description ..................................................................... 2

Objectives of the Study ....................................................................... 3

Scopes and Limitations ....................................................................... 4

Definition of Terms ............................................................................. 6

REVIEW OF RELATED SYSTEM ............................................... 8

Technical Background ............................................................. 8

System Architecture ................................................................... 10

Related Systems ......................................................................... 11

RESEARCH DESIGN AND METHODOLOGY............................... 17

Data Gathering .................................................................................. 17

Project Concept ................................................................................. 18

Context flow Diagram ....................................................................... 19

Data flow Diagram ............................................................................ 20

Development Method ........................................................................ 22

Development Approach .................................................................... 23

Functional Requirements .................................................................. 25

Non-Functional Requirements .......................................................... 27

User Design Interface ........................................................................ 28

Hardware Requirements .................................................................... 47

Software Requirements ..................................................................... 48

Testing and Evaluation ...................................................................... 50

Method of Testing ............................................................................. 51

Test Cases .......................................................................................... 51

Project Teams and Responsibilities .................................................. 54

Schedule of Activity (Gantt Chart) .................................................. 54

1. System Architecture of the Developed System ................................................. 10

2. Context Flow Diagram of the Developed System .............................................. 19

3. Data Flow Diagram of the Admin ....................................................................... 20

4. Data Flow Diagram of the User .......................................................................... 21

5. Rapid Application Development Model ............................................................. 23

6. Top-Down Approach ........................................................................................... 24

7. Home Page ........................................................................................................... 29

8. Menu Page ........................................................................................................... 30

9. Item Preview Page ............................................................................................... 31

10. Login Page ......................................................................................................... 32

11. Registration Form Page ..................................................................................... 33

12. My Order Page ................................................................................................... 34

13. Billing Form Page .............................................................................................. 35

14. Payment Page..................................................................................................... 36

15. Account Settings Page ....................................................................................... 37

16. Notification Page ............................................................................................... 38

17. Review Page ...................................................................................................... 39

18. Contact Us Page ................................................................................................. 40

19. Admin Dashboard Page ..................................................................................... 41

20. Admin View Orders........................................................................................... 42

21. Admin Orders Page ........................................................................................... 43

22. Admin Promotion Page ..................................................................................... 44

23. Admin Menu Page ............................................................................................. 45

24. Admin Account Settings Page ........................................................................... 46

1. Functional Requirements ..................................................................................... 26

2. Non-Functional Requirements ............................................................................ 27

3. Hardware Requirements for Developers and Users in Computer/Laptop ......... 47

4. Hardware Requirements for Users in Mobile Devices ...................................... 48