Web-based Point of Sale and Online Ordering

System for Zsakers Café Hagonoy Branch

Group 6

Estrada, Arthur P.

Libao, Jade J.

Regidor, Jeffrey DR.

Salamat, Romnick B.

Zaspa, Joshua B.

BSIT 3C
 1

CHAPTER I

INTRODUCTION

Project Context

In our present day, technology provides a big impact in changing our daily lives. It

became an essential part of our day-to-day activities and much more essential in business

operations. According to ZenBusiness INC. (n.d), Technology can simplify and streamline

various business operations, saving you time, energy, and even money.

Business owners can improve the use of their resources by implementing

technological solutions on their business operations. Using technology, transactions can be

done faster and in efficient way compared to transactions done manually. One of the

technologies commonly used in restaurant and retailing business is Point of Sale System

(POS) and Online Ordering System. According to Deutch (2022), A POS system allows the

business to accept payments from customers and keep track of sales at the same time.

According to Blink (2021), “An online ordering system is a simple automated system that

enables your restaurant to process internet-based food orders from online customers

through a branded website or mobile app.” Both point of sale and online ordering systems

can provide a reliable, efficient, and productive business operation. Productive business

operations equal stress-free business. Furthermore, a productive business can serve or

deliver better service to its stakeholders.

Zsakers Café Hagonoy Branch is a business in-line in the coffee chain industry just

like Starbucks, Tim Hortons, Dunkin' Donuts, and etc. The Zsakers Café Hagonoy Branch
 2

sells different kinds of goods like pizza, donuts, and coffee. Zsakers Café also provides

services like dine-in, take-out and reservation of customers’ orders.

Zsakers Café Hagonoy Branch uses a manual and traditional method to compute,

manage, and record their day-to-day transactions. Payments take a long time to process

because they are done manually, and they frequently result in errors. They are also having a

hard time managing their stocks using a manual method. Another problem that they are

facing is that the online ordering process is only done using social media. They manage

their online orders through Facebook and Messenger, and it can be tedious for the one that

will answer all queries in online ordering because he/she needs to manually respond to the

customers' inquiries. This system will manage transactions that will report the total sales of

the customer's payments. It also displays and tracks the information of the transactions and

can monitor the inventory. This system can also provide an online ordering system to

handle all the customers' orders that they can only do using Facebook and Messenger.

Purpose and Description

The Web-based Point of Sale and Online Ordering System for Zsakers Café

Hagonoy Branch will certainly benefit the following:

To the Zsakers Café Hagonoy Branch. This project will enhance the transaction process

in Zsakers Café Hagonoy Branch. And it will boost and increase the sales of their business.

To the Customer. This project will provide the customers a better and faster transaction on

their orders, and the customers will no longer be impatient.

 3

To the Business Owner/Admin. This project will provide a better, more efficient, and

reliable monitoring of stocks and sales. And they can also monitor their customer's history

of transactions.

To the Employee. This project will provide a hassle-free processing of customers’ orders.

To the Future Researchers. This proposed research will be used as a reference or guide,

especially if it is related to a Web-based Point of Sale System or Online Ordering System.

General and Specific Objectives

The general objective of the study is to design and develop a Web-based Point of

Sales and Online Ordering System that can improve the overall transactions in Zsakers

Café Hagonoy Branch.

Specifically, the study seek to achieve the following specific objectives:

1. To be able to identify the existing problems encountered by the Zsakers Café

Hagonoy Branch in managing and processing the customer’s order.

2. To provide a better transaction by implementing a Web-based Point of Sale and

Online Ordering System that have a feature such as:

a. User login of Admin, Staff and Customers

b. Customer Order Management

c. Issuing Receipts

d. Viewing of transactions history

e. Inventory Management

f. Generating Sales Report

 4

g. Online Ordering

h. Delivery Mapping/Tracking

i. Online Payment

j. Tapping of delivery couriers

3. To reduce the time needed to process the customer’s orders.

4. To eliminate the inaccuracies in the Sales Report.

5. To be able to manage the stocks easily.

Scope and limitation of the Study

This study will focus on developing and providing a system that will automate the

manual transactions in Zsakers Café Hagonoy Branch, such as managing inventory,

recording sales reports, and managing the customers' in-store and online orders.

The scope of this Web-based Point of Sale and Online Ordering System is to

provide and record sales reports and to have better and hassle-free inventory management.

This can also provide an online ordering system that can help their customers purchase their

desired product easily, and they can get their purchased product through pickup or

delivery. This system also focused in storing data in a database and safeguarding all

business information. The beneficiary, Zsakers Café in this case, can add, delete, update,

view, and print specific reports for their business. For security reasons, the admin can also

change the username and password.

The limitation of this Web-based Point of Sale and Online Ordering System is that

it can only be accessed through the use of a website by the Admin, Staff, and Customers

from Zsakers Café Hagonoy Branch. The user needs to have an internet connection before
 5

accessing the system. If the user doesn’t have internet access, the user will often be unable

to use the website, or the functionalities will be limited. Like the online ordering feature, it

requires the customers to have an internet connection to be able to order their desired

products. Online ordering is the only feature that is visible to the customers. Employee and

Payroll management are not part of this system. Also, adding staff accounts is limited to

only 15 accounts, and adding a new admin account is not possible. This project will only

focus on Zsaker Café Hagonoy Branch. Other Zsakers Café Branch and businesses related

to coffee chain business is not included in the scope of this project.

 6

Chapter II

REVIEW OF RELATED LITERATURE/SYSTEMS

The researcher presents related literatures and studies that are essential to this study.

This section also discusses the capabilities and limits of existing work, algorithms, or

software that are related or relevant to the project.

Related Literature

Point Of Sale (POS)

The time and location where a transaction is completed is referred to as the point of

sale. A point-of-sale (POS) system is a combination of computer hardware and software

that manages transactions during the sale of a product or service. It aids in the storage,

collection, sharing, and reporting of sales transaction data. It improves the shopping

experience and speeds up the checkout process, resulting in increased customer satisfaction.

Inventory management, stock in hand, product availability, and pricing information are

examples of primary data obtained from the systems (Morder Intelligence, 2021). A point

of sale, commonly known as a point of purchase, is where you charge customers.

Customers are at the point of sale when they check out online, come up to your checkout

counter, or select an item from your stand or booth (Deutch, 2022).

De Castro (2022) asserts that a point of sale (POS) system allows your company to

collect payments from clients while also tracking the company sales. While these two

advantages appear basic, their implementation may differ depending on whether you

operate a physical store, sell online, or both. For Physical stores, you can have a POS
 7

terminal and payment processing system installed. And for Online stores. the POS could be

a cloud-based system.

Point of sale is a tool that every business can use to streamline the struggles that

business operations are facing. POS systems may drastically cut costs while simultaneously

increasing productivity and business profit. Upgrading from a traditional method to a point-

of-sale system will result in a rapid return on investment (ROI), both in terms of money and

time spent on day-to-day operations.

Advantages of using POS system

With this system in place, you will have smooth transactions and a better chance of

standing out in today's competitive business industry. Brands without a POS system may

miss out on several business opportunities and cost savings, as well as opportunities to

improve customer service (De Castro, 2022). This are the advantages that businesses can

obtain if POS system will implement in their business operations:

Strengthen efficiency. When the POS system builds staff confidence in a variety of ways,

this is one of the most significant POS advantages in retail. Your employees will no longer

need to remember product names or prices. The products now have thumbnail photos on

the POS screen. In addition, as mentioned in the preceding section, POS can reduce

transaction time. As a result, your checkout counter might handle more customers each

hour. It aids in increasing store earning potential. Furthermore, because most manual

operations are now automated and precise, POS can remove human errors (Nguyen, 2022).
 8

Manage stock at ease. According to Nguyen (2022) “With the traditional register, staff has

to physically view inventory while POS supports them to automate checking stock on-

screen. Even any adjustment happens, they only have to look at the POS screen. And you’ll

save time on stock control at your stores. This second POS advantage will surprise you.

Read on for the suprising benefits of the POS and inventory system integration.”

Optimize checkout process. Nguyen (2022) said that “In an eye blink, all information of

picked products will go straightly to the system. Next, right on POS, cashiers also access

the data automatically and add the transaction info to the customer history.”

Generate accurate reports. POS will automatically extract point of sale reports containing

crucial information based on the history of store transactions. This feature assists managers

in obtaining a broad picture of their company's performance. Reports, for example,

illustrate current sales trends or identify areas of needless overspending, allowing

management to take appropriate action (Nguyen, 2022).

Detailed Receipts. According to Monocello (2010), “OS systems provide your customers

with more detailed receipts rather than just a slip of paper with the date and the amount of

the sale. POS systems use inventory data to provide much more information, including item

description, price, and savings from a sale or coupon. With some systems, you also have

the option to customize a particular portion of the receipt like the footer.”
 9

Faster Service. “A POS solution provides a faster checkout process than cash registers,

especially if they’re using a barcode scanner to ring up the products. POS technology

allows you to make the most of the checkout experience to engage customers and make

sure they leave with a good impression of your brand” (Monocello, 2010).

POS for Small Businesses

In “Retail Point of Sale Market” (2021), the author state that small businesses are

using POS systems to reap the benefits that come with them. Effective POS systems enable

business owners to spend less time on business/store administration by providing relevant

reports that aid in quick decision-making. The improved POS systems also help to increase

store profitability through better inventory management. Through customer data obtained

during sales transactions, solutions also enable targeted and tailored marketing activities.

As small businesses struggle to manage capital expenses, POS data reports can provide a

bird's eye perspective of business operations to measure the effectiveness of various areas.

POS in Retailing Business

Retail businesses nowadays have been using Point-of-Sale (POS) in their daily

sales and inventory. Managers can do better analysis about the business with POS

integrated into the operation (Mangmang, 2018). Small businesses can be more benifited

to POS system and to that According to Morales et al., (2020). “For small businesses such

as a mini-grocery, some use manual computation that can consume considerable time and

bring more hustle to their customer and workers. Point-of-sale (POS) system is a
 10

computerized system that can be used in groceries to compute fast and determine the prices

quickly.”

According to Luna (2021), POS system may drastically improve the speed and

smoothness of the checkout process, especially with barcode technology. Cashiers can scan

the code fast, locate the product, allocate it to a transaction, and immediately update the

inventory after payment. Customers can enter the store, look around for what they want,

and buy the things they desire in incredible speeds.

Inventory

According to Praveen et al., (2020), "Inventory is the supply of raw materials,

partially finished goods called work-in-progress and finished goods, an organization

maintains to meet its operational needs. It represents a sizeable investment and a potential

source of waste that needs to be carefully controlled. Inventory is defined as a stock of

goods that is maintained by a business in anticipation of some future demand" (p. 866).

Inventory has an impact on both product processing and also the delivery of completed

goods to customers. Inventory management requires a significant amount of strategic

knowledge and skills (StudyCorgi., 2020).

Inventory is typically described as the stage between manufacturing and order

fulfillment, Inventory is important to all of an organization's commercial activities because

it is often a key source of income growth. Regardless of how inventory is characterized and

classified, it is mainly its management that has a direct impact on an organization's order

fulfillment capabilities (Jenkins, 2021).

 11

Inventory Management

According to lal Pruthi (2017), “Inventory management is a systematic approach to

sourcing, storing, and selling inventory—both raw materials (components) and finished

goods (products). In business terms, inventory management means the right stock, at the

right levels, in the right place, at the right time, and at the right cost as well as price” (p.

103). Moreover, Inventory management is defined as "the intended course of planning,

arranging, and managing inventory with the goal of minimizing inventory investment while

preserving the supply and demand balanced." In particular, the process involves monitoring

the supply, storage, and accessibility of commodities to maintain an adequate supply

without excessive oversupply (Singh & Verma, 2018).

Inventory management is a must even for small and medium-sized businesses. A

system that maintains inventory levels, orders, and sales in order to do predictive analysis

and forecast demand that will help in the reduction of over-stock and out-of-stock

situations. All organizations should manage optimal inventory in order to eliminate under

inventory, which disrupts financial numbers. A careful review of internal and external

factors, together with greater planning, can enhance inventory status (Praveen et al., 2020,

p. 866).

POS for Inventory Management

POS system that has an inventory tracking system can help a business know when

to order product to avoid stockouts, as well as how to avoid having too much product on

hand. Here are some advantages of using POS system for Inventory Management:
 12

Real-time Inventory Status. Inventory and pricing are tracked in real time using the POS

system. The system will update as soon as a product is purchased. You always know how

many of each item you have in the inventory with the help of real-time inventory updates

(Fulcaldo, 2021).

Improve Profitability. “When you misjudge demand by purchasing too much of a slow-

selling item, you’ll usually end up discounting that item to make room, negatively

impacting your profitability. Since your POS system can show you exactly which products

are selling – and how many you have – you can gear your future purchases toward high-

demand areas while cutting back on less popular products” (Fulcaldo, 2021).

Enhance the Customer Experience. Inventory management decisions on a daily basis have

a direct impact on customer experience by ensuring you have what your customers want to

buy when they want to buy it. It is critical to have accurate inventory forecasting and to

estimate the amount of inventory is also required to satisfy consumer demand (Shook,

2020).

Product Demand Forecasting

“The Demand Forecasting will help Small/Medium businesses to maintain

inventory and minimize manual labor. Allowing it to reduce the capital spent on

maintaining inventory. In this process it aims at simultaneously improve in profitability.

With the forecasting technique, the overstock and stock-out of items are reduced as the

stocks are ordered based on the Demand” (Praveen et al., 2020, p. 866). In addition to that,
 13

Product demand forecasting is a vital prerequisite for many operations, marketing, sales,

and supply chain planning tasks, ranging from resource procurement to production and

inventory decisions, all the way to delivering orders to customers (Fahimnia, 2018).

In relation to that, the main cause of wasted products and stockouts in the retail food

industry is the inaccuracy of sales/demand forecasting leading to incorrect orders (Tarallo

et al., 2019). This means that product demand forecasting is also very important in

businesses. Inaccurate forecasting can cause problems in business operations.

Importance of Data Accuracy to the Business Success

Digital Aroma (2022) asserts that data accuracy is a quality data component that

refers to whether the data values collected for an item are correct. To keep data reliable, the

data value must be correct and conveyed in a consistent and unambiguous manner.

Furthermore, Data accuracy refers to records that are free of errors and may be used as a

trusted source of information (Kim, 2020). Data Accuracy is also a vital part in a bussiness.

It gives the business an edge to other competitors if data accuracy will be preserved and

inaccuracy will be avoided. To show the importance of data accuracy to the business

success, this are the advantages of data accuracy:

Improves Decision Making. When data quality and accuracy are sufficient, it allows the

organization's users to obtain better results and boosts worker confidence (ERP

Information, 2020).
 14

Improves Productivity. Accurate data makes your employees' tasks considerably easier.

Instead of wasting time searching for and correcting data inaccuracies, your team may

focus on more important tasks and goals than fixing data inaccuracies (Delhi School of

Internet Marketing [DSIM], 2019).

Better Marketing. Data accuracy enables you to promote to the proper market, saving you

time and money. Furthermore, it allows you to keep your customers interested. This is one

of the primary reasons why data accuracy is critical to your business (Digital Aroma, 2022).

Leads to Lower Cost. Data that is correct and up to date saves you money that might

otherwise be wasted on poor decisions, techniques, and strategies (DSIM, 2019).

Keep the Customers Close. Data can assist decision makers in generating more value from

existing consumers, attracting new customers, and preventing customers from leaving.

Above all, the customer should benefit (Nheng, 2019).

Web-based application

According to LVIVITY TEAM (2018), “Web-based applications are a type of

software that enables users to interact with a remote server via a web browser interface.

Users do not need to install additional software to use web-based apps, and developers do

not need to create multiple versions of the same application for different operating

systems.” Web applications aid in the automation of business processes, allowing you to

complete more tasks in less time and with greater accuracy. Furthermore, Delvin (2020)
 15

state that “Web applications, also known as web-based software, are computer programs

that use a website as their user interface, allowing them to be accessed from any internet-

connected device, such as a desktop, mobile, or tablet.”

Shared Commerce

According to Harrison (2021), “By taking its operations online, a business can grow

exponentially. Previously, businesses had to run data from their e-commerce platforms and

their physical POS systems. To run a report, you would have to import both results into a

spreadsheet, accounting system or other reporting software. However, because of shared

commerce POS systems, businesses can save plenty of time by automating the process. One

e-commerce solution is Shopify’s POS system. It syncs with the Shopify app for iOS and

Android to track both online and offline transactions. Instead of managing two sets of

inventories and payment systems, the Shopify POS synchronizes financial and product

information in a centralized dashboard. This way, you have quick and easy access to real-

time data and customer insights across two sales channels, without the hassle of running

reports on multiple systems.”

Related Systems

Point of Sale System at Bibingkinitan

Flores et al., (2020) conduct a study and provide a system entitled a point-of-sale at

Bibingkinitan. A point-of-sale system allows customers to pay merchants in return for

products and services. The company's recent transactions have been slow and unstable. For

their business, the business was using a manual transaction. As a result, the business
 16

depends on its team's ability to correctly compute sales transactions, which can result in

errors and inaccuracies. This procedure is also time-consuming. With this method, the

company may easily do a computerized transaction without having to manually record the

names of the sold products in the inventory records. The proponents developed the system

using the systems development life cycle as a reference. A point of sale system can improve

the Bibingkinitan's business transactions and processes with its customers. With this

method, the business may quickly do a computerized transaction without having to

manually record the names of the sold products in inventory. This automated method turns

the manual procedure into a modern way that benefits the workforce, particularly the

cashier, employees, customers, and the owner.

Point of Sale with Sale Monitoring System for Eduardo’s Kitchenette

The study of Dumlao et al., 2019, a Bachelor of Science in information technology

in the AMA Computer College – Olongapo City, Inc. built a Point of Sale with Sales

Monitory System for Eduardo’s Kitchenette. Eduardo's Kitchenette calculates transactions

and generates sales reports manually. The manual approach is prone to human errors, which

result in payment miscalculation and task repetition. The manual method cannot handle

large transactions while also producing reports for the customer. The system has its features

to handle big transaction, providing a Sales report and managing the relationship

interactions with customers. The system was developed using System Development Life

Cycle (SDLC) methodology.

Website-Based Point of Sale System at 26Store Sports Stores

 17

Rachmawati (2021), from Indonesia develop a Website-Based Point of Sale System

for 26Store sports shop. 26Store sports shop is a shop that sells all kinds of sports needs

such as basketball, football, futsal shoes, soccer shoes, sports clothes, team suits, and

others. All types of transactions ranging from sales to purchases and data collection at the

26Store Sports Shop are still carried out manually in the form of books. For a company, the

bookkeeping system is an important thing that records all types of transactions ranging

from sales, purchases to data collection of goods. If transaction activities in a company are

not monitored properly and there is no record of activity in the business processes that

occur, it can cause a very large risk of loss.

At-Thoyyib Shop Inventory Management System

Ilias et al., (2018), developed a Inventory Management System for At-Thoyyib

Shop to facilitate inventory management that includes the entry and exit of goods in

storage, and the inventory will be managed systematically and efficiently. According to

observations and interviews, the problem is that the system employed in the At-Thoyyib

Shop is managed manually. For example, if inventory data were maintained in a book, there

are a couple drawbacks: books are perishable, and a person can make mistakes when

putting the data in the book. The waterfall model has been implemented in the development

of this system. The waterfall methodology has the advantage of being simple to convey

to people. Lastly, the inventory management system is designed to speed up the process of

recording inventory information and increase the efficiency and accuracy with which

management reports are generated.

 18

Mobile Based POS Systems

In the study of Dunn et al., (2016), they assert that in the coming years, mobile POS

applications that run on customers' mobile devices will become more popular. Customers

can use their mobile device to explore mobile POS and complete the purchase order based

on their preferences. Customers will be able to checkout things on their mobile devices in

the near future, as if it were their own portable POS system. This scenario benefits both

sides because retailers wind up doing more business while creating a significantly higher

ratio of satisfied customers. Businesses will be able to keep their enthusiastic, loyal clients

as long as they allow for checkout via mobile device and human interaction.
 19

Chapter III

TECHNICAL BACKGROUND

In this chapter, the researchers discussed the various research approaches for

creating the system presented in this chapter. Furthermore, the researchers gathered

information and conducted research are used to provide a solution and for the system's

development.

Software Development Methodology

A SDLC model is a conceptual framework that describes all processes in a software

development project, from planning to maintenance. This process is linked to various

models, each of which includes several duties and activities. The System Methodology that

researchers will use in this study is the waterfall model.

The waterfall model was utilized by the researchers to demonstrates the

development technique. Waterfall model is used in the system development life cycle to

build a system in a systematic and standardized manner. The model is called a waterfall

because it progresses methodically from one phase to the next in a downward direction.

The system planning, analysis, design, system development, testing, deployment, and

maintenance are all part of this model.

 20

Figure 1.0 System Development Life Cycle (Waterfall Model)

The following discuss the phases involved in the waterfall model:

Planning Phase

In this part, problems and solutions to those problems should be determine by the

researchers. To provide a better result to this project that will aid the determined problems,

the researchers need to set up a plan that will help the whole project. Team Engagement is

the characteristic that a team must possess in this stage to provide a robust planning.

Analysis Phase

This phase the researchers need to have a better understanding on the requirements

that the client provide. Those requirements will be used to set the satisfactory level of the

client on the possible outcome of this project. To know the requirements required on this

project, the researchers conduct an interview. The gathered information for the

requirements and specifications of this project, will be used to create the ideal design and
 21

functionalities based on the gathered requirements.

Design Phase

During the designing process, the researchers will create the precise design base on

the client requirements. This phase covers the aspect of designing, conceptualizing and

framing the ideal outcome of the system. This will work as a "blueprint" for the researchers

on developing the system. In constructing the system's design, the developers will adhere to

the client's requirements and specifications and utilize various tools such as non-relational

databases and data flow diagrams.

Development Phase

During this step, the system function will be coded using the researchers' knowledge

to make the planned system specification work. The researcher will utilize Visual Studio

Code to create the proposed system. To provide the functionalities, the researchers will use

Html, CSS, React JS, and Node JS. And for the database that the data will be stored,

MongoDB will be utilized.

Testing Phase

In this phase errors in the functionality of the system must be identified. Because

this stage will be the researcher’s basis if the system is ready and prepared for the

implementation. This phase will also discuss whether the client suggested functionalities

and ideas for the system were met. The researchers will do functional testing to ensure that

every functionality of the system will be accomplished according to the client requirements.
 22

Implementation Phase

In this stage any errors in the functionalities of the system must be exact and

accurate base on the client desired outcome. The validated system is deployed in the field

during the implementation phase. Announcing the implementation timeline, system end-

users training, and installation of the system are the key responsibilities of this stage.

Maintenance Phase

Once the system is implemented, it must be maintained in order to function

properly. It is essential to have a planned maintenance programmer in place to evaluate all

maintenance work before initiating the operation.

Figure 2.0 Gantt Chart

 23

Requirements Analysis and Documentation

The primary purpose of this research is to develop a Web-based Point-of-Sale and

Online Ordering System for Zakers Cafe Hagonoy Branch. Addressing the client's

difficulties in their current business operation, the researchers suggested that this system be

designed in response to the challenges that the client has experienced and to the client's

requirements.

This part will discuss the different requirements that the system needs to make

client satisfied with the output of the system. During this phase, the client describes the

project's expectations, including who will use the product, how they will use the product,

and any special requirements linked to the software. Each individual requirement is

essential and vital to the functionality of the system.

System Requirements Analysis. The researchers look into many types of data required in

the proposed methodology. The researchers want to develop a thorough design

requirements that defines the set of system capabilities to be implemented, as well as

accompanying data and process models that illustrate the information to be managed and

the operations that the system will enable. This is the process of acquiring the client's

requirements and information.

Software Requirements. The researchers analyzed this study in designing the system

using JavaScript as framework, MongoDB as database, and Html, CSS, React JS and Node

JS for the front-end and back-end of the system. The MongoDB database will be capable of

handling various types and amounts of entities. It must also be possible to insert and

retrieve data at any time of day. To access and use the web-based system, an operating

system at least Windows 10 is recommended.

 24

Fig

ure 3.0 Architectural Design

Figure 3.0, served as the foundation for the system's design of this project. This

figure illustrates the architectural diagram for Web-based Point of Sale and Online

Ordering System. The researchers will use HTML, CSS, JavaScript, React JS and Node JS

for the front-end of the system. For the back end the researchers will use JavaScript. For

storing the data that the system will handle, the researchers will used MongoDB as the

database. MongoDB is a NoSQL database that is open source, and it can handle semi-

structured, and unstructured data as a non-relational database.

Hardware Requirements. To properly implement the functionality of the system, the

hardware requirements listed below are suggested:

1. Computer with at least Windows 10 Operating System.

2. Intel Pentium or any processor with at least 1GHz.

 25

3. RAM must be at least 2 GB.

4. Generic Monitor or higher.

5. Generic USB Mouse and Keyboard.

Design of Software, Systems, Product, and/or Processes

Figure 4.0 Data Flow Diagram Level 0

 26

The data flow diagram for the system is shown in Figure 4.0. According to figure

4.0, the administrator is capable of storing and inputting product data to the system and

they are also capable of viewing Stock Details and Sales Data. The Administrator is

responsible for online ordering features like manipulating products in an online catalog. On

the side of the staff, they are capable on managing the data of in-store customers and their

order details. The staff can access the Inventory of the system and they are responsible for

confirming the orders of online customers. There are two types of customers that can

benefit on this system. First, the in-store customer. This type of customer can order with the

help of staff that will utilize the system to process their orders, and they can get a receipt

when their order is done. The second type of customer is the online customer. They can

directly browse their desired products in the system through their own devices.
 27

Figure 4.0 Use Case Administrator Module

Figure 4.0 shows how the system administrator has access to the Sales and

Inventory feature of the POS system. The administrator is also can access the product

adding, editing and deletion. The administrator can generate a sales report and they can

view the sales and transactions history.

 28

Figure 5.0 Use Case Staff Module

In figure 5.0, the staff can access the data in inventory and can monitor sales. Staff

can do the transaction such as customer payments and printing receipts.

 29

Figure 6.0 Use Case Online Customer Module

In figure 6.0, the online customer can browse their desired product through online

ordering feature of the system.

 30

Figure 7.0 Flowchart Admin: Dashboard

Figure 7.0 shows how the processes, sequences, and decisions involved in the

process or workflow in this system.

 31

Figure 8.0 Flowchart Admin: POS

Figure 8.0 shows how the processes, sequences, and decisions involved in the

process or workflow in this system.

 32

Figure 9.0 Flowchart Admin: Inventory

Figure 9.0 shows how the processes, sequences, and decisions involved in the

process or workflow in this system.

 33

Figure 10.0 Flowchart Admin: Sales

Figure 10.0 shows how the processes, sequences, and decisions involved in the

process or workflow in this system.

 34

Figure 11.0 Flowchart Admin: Online Ordering

Figure 11.0 shows how the processes, sequences, and decisions involved in the

process or workflow in this system.

 35

Figure 12.0 Flowchart Staff: Dashboard

Figure 12.0 shows how the processes, sequences, and decisions involved in the

process or workflow in this system.

 36

Figure 13.0 Flowchart Staff: POS

Figure 13.0 shows how the processes, sequences, and decisions involved in the

process or workflow in this system.

 37

Figure 14.0 Flowchart Staff: Inventory and Sales

Figure 14.0 shows how the processes, sequences, and decisions involved in the

process or workflow in this system.

 38

Figure 15.0 Flowchart Staff: Online Ordering

Figure 15.0 shows how the processes, sequences, and decisions involved in the

process or workflow in this system.

Figure 16.0 Flowchart Customer: Online Ordering

Figure 16.0 shows how the processes, sequences, and decisions involved in the

process or workflow in this system.

 39

Figure 17.0 Entity Relationship Diagram

Figure 17.0 showed the Entity Relationship Diagram of the different entities and

attributes used in the database in our proposed system.

 40

Development and Testing

The researchers will use the ISO 25010 criteria to evaluate the system that will be

developed. The system will be evaluated and tested to verify whether a specific activities

development products meet the requirements and whether the system and/or software meets

its intended usage and user requirements. The researchers will evaluate the system using

these criteria to know that the functionality of the Web-based Point-of-Sale and Online

Ordering System meets the client's stated needs.

Description of the Prototype

In this system the researchers will be use Visual Studio Code as the IDE, with

JavaScript as the major scripting language, MongoDB as the database and Adobe XD for

the UI/UX designing/prototyping.

 41

Figure 18.0 Front Page

Figure 18.0 shows the page that the user can choose between Admin and Staff

account to be login.

Figure 19.0 Login Form (Administrator)

Figure 19.0 shows the system's log-in form for Administrator. To log in as an

admin, the system requires a username and a password. To log into the account, you'll need

to know your username and password.

 42

Figure 20.0 Registration Form (Staff)

Figure 20.0 shows the system's Registration form for staff. To register as staff. the

system requires a username, number, address email and password.

 43

Figure 21.0 Dashboard Page

The dashboard page is included in Figure 21.0. Dashboard page consist of all the

functions of the system such as POS, stocks or inventory, and sales monitoring.

Figure 22.0 POS Page

Figure 22.0 includes the POS page of this proposed system. POS page manage the

transaction like buying products. It also displays all the product that can be purchase.
 44

Figure 23.0 Inventory Page

Figure 23.0 illustrates the Inventory Page of the proposed POS system. Inventory

page allows the admin to mange the products in the inventory. Admin can manipulate the

inventory by adding, editing, and deleting products.

 45

Figure 24.0 Sales Page

This figure shows the Sales page of the system. Sales Page can be the administrator

basis to make sales report and to know if the sales are doing well.
 46

Figure 25.0 Receipt Page

This figure shows the Receipt page of the system. Receipt Page can show the total

prices of every product that customer buy.