AGUA BOO WATER WEB-BASED

MANAGEMENT SYSTEM

FRANCIS BEHING
CHRISTIAN ELEAZAR LAZANAS
JAYRALD ZAMBRANO

UNDERGRADUATE CAPSTONE PROJECT SUBMITTED TO THE FACULTY

OF THE INFORMATION TECHNOLOGY DEPARTMENT,
COLLEGE OF INFORMATION SCIENCES AND COMPUTING,
CENTRAL MINDANAO UNIVERSITY, IN PARTIAL FULFILLMENT OF THE
REQUIREMENTS FOR THE DEGREE

BACHELOR OF SCIENCE IN INFORMATION TECHNOLOGY

JUNE 2024
 Republic of the Philippines
CENTRAL MINDANAO UNIVERSITY
Musuan, Maramag, Bukidnon

College of Information Sciences and Computing

Department of Information Technology

APPROVAL SHEET

The undergraduate capstone project attached hereto entitled, “AGUA

BOO WATER WEB-BASED MANAGEMENT SYSTEM” (Research No.
22899), prepared and submitted by FRANCIS BEHING, CHRISTIAN
ELEAZAR C. LAZANAS, and JAYRALD A. ZAMBRANO, in partial fulfillment of
the requirements for the degree Bachelor of Science in Information
Technology, is hereby endorsed.

FERDINAND D. BASCONES JR. Date

Chair, Capstone Project Committee

GLYRHIZ MARHIEL A. TABAMO Date

Member, Capstone Project Committee

JEREMY YVES P. CAPILI Date

Member, Capstone Project Committee

Recommending Approval:

EYERYL JUN J. TANO Date

Department Chair

NATHALIE JOY G. CASILDO Date

Research Coordinator

Accepted in partial fulfillment of the requirements for the degree in

Batchelor of Science in Information Technology

Approved:

JOHN D. TAJONES Date

College Dean

Noted:

JUPITER V. CASAS Date

Director for Research

ii
 AUTHOR’S BIOGRAPHICAL SKETCH

Francis Behing is a versatile IT

professional with a Bachelor of Science in
Information Technology. He blends deep
technical expertise with artistic prowess. He
possesses a broad programming skill set,
including Python, PHP, Java, SQL, and
essential web development, complemented
by his proficiency in Microsoft Office and
Adobe Photoshop. This combination allows
him to create both functional and visually
appealing digital solutions.

Educated from primary school through college, Francis has a well-

rounded foundation in both the arts and sciences. This comprehensive
education equips him with a unique perspective on problem-solving and
innovation in his field. His professional journey includes significant roles, such
as Layout Artist, where his meticulous design skills contributed to visually
compelling layouts.

Francis has been instrumental in developing significant projects like the

Barangay Lumbo Information Management System and the Agua Boo Water
Web-Based Management System. These projects showcase his programming
and design capabilities and highlight his ability to manage complex information
systems and leverage technology for community development. His combined
skills make him a valuable asset to any software development, information
system management, or design project.

iii
 AUTHOR’S BIOGRAPHICAL SKETCH

Christian Eleazar C. Lazanas is a

dedicated IT professional. He graduated with
honors from Valencia City Central School and
Valencia National High School and earned his
Bachelor of Science in Information Technology
from Central Mindanao University. Christian's
academic journey is marked by consistent
excellence and a strong commitment to his
field.

During his senior high school years,

Christian interned as a graphic designer at
Olarte Advertising, where he gained practical experience. His technical skills
span across Microsoft Office, Tech Support, Python, PHP, HTML, CSS, and
MySQL, showcasing his ability to handle diverse IT tasks effectively. He excels
in data analysis using Python libraries like Pandas and Numpy and has a robust
foundation in creating comprehensive reports and presentations.

Christian's professional achievements include a significant contribution

to the integration of the CMU Homestay Booking System, which earned him a
System Integration Architecture certificate from Greppo. His data visualization,
interpretation, and system integration skills underscore his potential and
readiness to impact the dynamic field of Information Technology positively.

iv
 AUTHOR’S BIOGRAPHICAL SKETCH

JayraldZambrano is distinguished by his

patience, technical proficiency, and extensive
background in information technology. His
educational journey commenced at Quezon
Central Elementary School. It progressed
through Bukidnon Comprehensive High
School, formerly Quezon National High School,
where he earned National Certification II in
Computer Systems Servicing/Information and
Communications Technology. This certification
underscores his commitment to his IT career.

Jayrald's expertise includes minor troubleshooting and cabling. His skills

extend to proficiency in Microsoft Office, enhancing his versatility in various
professional environments. He is also skilled in programming languages such
as Java, Python, and PHP and has foundational competencies in basic web
development. These abilities enable him to address diverse IT-related
challenges confidently.

Furthering his ambition, Jayrald is pursuing higher education at Central

Mindanao University, where he is likely engaged with an intensive curriculum
that sharpens his technical skills and broadens his knowledge in IT. His
enrollment at this prestigious institution reflects his relentless pursuit of
excellence and his aspiration to impact the IT industry significantly.

v
 ACKNOWLEDGMENT

First and foremost, the proponents would like to praise and give their
deepest thanks to our Heavenly Father for His great love for the proponents,
for granting us this outstanding achievement, and for His showers of blessings
throughout the completion of this project.

Appreciation is extended to the esteemed panelists, Sir Jeremy Yves P.

Capili and Ma'am Glyrhiz Marhiel A. Tabamo, whose invaluable advice and aid
were instrumental in developing and establishing the project. The valuable,
constructive feedback received throughout the evaluation process played a
substantial role in improving the project.

Special recognition extends to Sir Ferdinand D. Bascones Jr., the

Capstone advisor, for his immeasurable guidance and commitment. His
invaluable assistance and advice have been crucial in overcoming obstacles
and guaranteeing the project’s successful completion.

Sincere gratitude is extended to Central Mindanao University and the

College of Information Sciences and Computing for allowing the proponents to
fulfill their dream of being students at one of the most prestigious universities in
the country, fostering an environment that benefits learning and offers
opportunities for individuals to grow.

Heartfelt and special thanks to our family, parents, guardians, siblings,

friends and classmates for their full and utmost support and motivation to
complete the capstone and for all the moments they shared, will be treasured
forever.

Furthermore, the proponent’s express gratitude to the stakeholders of

Agua Boo Water for their collaborative efforts, making this capstone project a
meaningful and enriching experience.

vi
 EXECUTIVE SUMMARY

The "AGUA BOO WATER WEB-BASED MANAGEMENT SYSTEM," an

innovative solution to upgrade Agua Boo Water Refilling Station operations,
was created. Agua Boo struggles with partially automated activities like time-
consuming client transactions and inventory inputting, storing, and retrieving.
These issues have caused errors, data loss, and inefficiencies that hinder
business growth and consumer satisfaction.

The system has meticulously digitized Agua Boo's primary functions.

The system has a consumer interface for ordering and tracking and an
administrative module for data management and decision-making. The
customer interface is well-designed to simplify ordering and tracking
transactions, boosting customer experience. In addition, the administrative
module gives Agua Boo's personnel significant real-time data management
capabilities. These include customer data, order processing, delivery, and sales
reporting. This project uses agile development to emphasize flexibility.
Flexibility, repeated testing, and improvement are ensured. The Agua Boo
Web-based Management System was effective after extensive testing and
feedback from users. Administrators gave the system an average System
Usability Scale (SUS) score of 81.25%, indicating outstanding usability. Staff
response was strong, with an average SUS score of 80.33%, indicating
excellent usability. For customers, the largest user group, the system scored
75 for SUS, indicating good usability. The system's mean SUS score of 76.5%
earned it a 'B' grade and demonstrated its good usability.

This project represents a substantial advancement towards digital

transformation for Agua Boo while also recognizing the potential for additional
improvements. The "AGUA BOO WATER WEB-BASED MANAGEMENT
SYSTEM" solves operational issues and provides a scalable framework for
future technical updates. This project represents a purposeful shift toward using
technology to maximize water refilling efficiency.

vii
Copyright © 2024 by Francis Behing, Christian Eleazar C. Lazanas, and
Jayrald A. Zambrano

viii
 TABLE OF CONTENTS

TITLE PAGE i
APPROVAL SHEET ii
AUTHOR’S BIOGRAPHICAL SKETCH iii
ACKNOWLEDGMENT vi
EXECUTIVE SUMMARY vii
COPYRIGHT PAGE viii
TABLE OF CONTENTS ix
LIST OF FIGURES xii
LIST OF TABLES xiv
LIST OF APPENDICES xv
CHAPTER I 1
1. Background of the Project 1
2. Statement of the Problem 2
3. Objectives of the Project 3
4. Scope and Limitation of the Project 4
5. Significance of the Project 4
CHAPTER II 6
1. REVIEW OF RELATED CONCEPT 6
2. REVIEW OF RELATED SYSTEM 7
CHAPTER III 9
TECHNICAL BACKGROUND 9
1. PHP 9
2. Laravel 9
3. HTML 10
4. CSS 10
5. Bootstrap 11
6. Javascript 11
7. PhpMyAdmin 12
8. MYSQL 12
9. XAMPP 13
10. Visual Studio Code 13
CHAPTER IV 15
1. Conceptual Framework 15
2. Project Approach 15
3. System Development Methodology 16
4. System Analysis 18

ix
 i. Flowchart 19
ii. Context Level Data Flow Diagram 20
iii. Level 0 Data Flow Diagram 21
iv. Use Case Diagram 22
v. Entity Relationship Diagram 23
5. System Requirements Specification 23
i. Functional Requirements 24
ii. Non-functional Requirements 25
iii. Other Project Requirements 25
6. Project Management 25
i. Gantt Chart 25
7. Plan for Implementation and Testing 26
i. Step 1 Unit Testing 26
ii. Step 2 Integration 27
iii. Step 3 Usability Testing 27
 3.1 Orientation 27
 3.2 System Demonstration 27
 3.3 System Testing 28
 3.4 Survey Using SUS Questionnaire 28
iv. Deployment 30
CHAPTER V 31
1. Results 31
i. Landing Page 31
ii. Customer Login 33
iii. Customer Registration 34
iv. Customer Profile Page 34
v. Customer Add Order Page 35
vi. Customer Order History Page 37
vii. Staff and Admin Login 39
viii. Staff Dashboard Page 40
ix. Admin Dashboard Page 43
x. Admin Order Page 44
xi. Admin Inventories Page 46
xii. Admin Resource Page 47
xiii. Admin Account Page 48
xiv. Admin Setting Page 49
xv. Admin Generate Reports 50
2. Discussion 51
x
CHAPTER VI 54
1. Conclusion 54
2.Recommendation 55
REFERENCES 56

xi
 LIST OF FIGURES

Figure 1. Conceptual Framework 15

Figure 2. Agile Development Model 16
Figure 3. Flowchart 19
Figure 4. Context Level Data Flow Diagram 20
Figure 5. Level 0 Data Flow Diagram 21
Figure 6. Use Case Diagram 22
Figure 7. Entity Relationship Diagram 23
Figure 8. Gantt Chart 26
Figure 9. Likert Scale 29
Figure 10. System Usability Scale Scoring 29
Figure 11. Landing Home Section 31
Figure 12. About Section 32
Figure 13. Contact Section 32
Figure 14. Customer Login Page 33
Figure 15. Customer Registration Page 34
Figure 16. Customer Profile Page 34
Figure 17. Customer Current Delivery Address 35
Figure 18. Customer Add Delivery Address 35
Figure 19. Customer Create and Submit Order Page 36
Figure 20. Customer Edit Details 37
Figure 21. Customer Order History 37
Figure 22. Customer Active Orders 38
Figure 23. Customer View Active Order Details and Status 39
Figure 24. Staff and Admin Login Page 39
Figure 25. Staff Active Orders Dashboard 40
Figure 26. Staff Active Orders Update 41
Figure 27. Staff Delivered Orders Dashboard 41
Figure 28. Staff Canceled Orders Dashboard 42
Figure 29. Admin Dashboard 43
Figure 30. Admin Orders Module 44
Figure 31. Admin Add New Order 45
Figure 32. Admin Update Order Status 45

xii
Figure 33. Admin Inventories page 46
Figure 34. Admin Resource (trucks, products, borrowed gallons) 47
Figure 35. Admin Customer Account Page 48
Figure 36. Admin Staff Account Page 49
Figure 37. Admin Settings 49
Figure 38. Generate Sales Report 50
Figure 39. SUS Survey Results 51
Figure 40. SUS Rating Distribution 53
Figure 41. Customer Password Reset Link 73
Figure 42. Customer Reset & Type New Password 73
Figure 43. Customer Changed Password 74
Figure 44 Customer View Order History Details 74
Figure 45. Admin Truck Deliveries 75
Figure 46. Admin Add Truck 75
Figure 47. Admin Edit Truck 76
Figure 48. Admin Add Products 76
Figure 49. Admin Edit Product Details 77
Figure 50. Admin Add Customer 77
Figure 51. Admin Edit Customer Details 78
Figure 52. Admin View Customer Transactions 78
Figure 53. Admin Add Staff 79
Figure 54. Admin Edit Staff Details 79
Figure 55. Admin View Staff Details 80
Figure 56. Admin Edit Site Settings 80
Figure 57. Data Gathering (1) 82
Figure 58. Data Gathering (2) 82
Figure 59. System Presentation & Testing (1) 83
Figure 60. System Presentation & Testing (2) 83
Figure 61. System Presentation & Testing (3) 84
Figure 62. SUS Survey (1) 84
Figure 63. SUS Survey (2) 85
Figure 64. SUS Survey (3) 85

xiii
 LIST OF TABLES

Table 1. Respondents Testing Results 52

Table 2. Add Staffs 67
Table 3. Customers 67
Table 4. Addresses 68
Table 5. Customer Forgot Password 69
Table 6. Orders 69
Table 7. Products 70
Table 8. Order Products 70
Table 9. Trucks 71
Table 10. Site Settings 71

xiv
 LIST OF APPENDICES

APPENDIX TITLE PAGE

A Use Case Suite 59

B Data Dictionary 66

C System’s Other UI 72

D Testing Documentation 81

E Summary of Answered Survey during Testing 86

F System’s Relevant Codes 92

xv
 CHAPTER I
INTRODUCTION

1. Background of the Project

Technology and Communication always try to make people’s lives easier

Magalona (2012). The development of computers, software, and the internet
has led to unprecedented connectivity and information sharing. Web-based
systems are one such application of technology, which uses the internet and
web browsers to deliver dynamic content to users. They offer a more accessible
and user-friendly experience than traditional desktop applications, allowing
users to access their content from any device with an internet connection.

Water refilling stations are becoming increasingly popular as people

become more aware of the importance of clean and safe drinking water. They
organize user data, including the personal information of the customers, as well
as the payment on the transactions they purchased, gallon counts, and
accumulated sales. They also record the customer's information, such as their
location, transaction date, delivery schedule, contact number, and other
information that assists with daily business transactions.

In the Philippines, water refilling stations are currently one of the fastest-
growing businesses. Ms. Gamboa established Agua Boo on June 16, 2014, in
Valencia City and has been in operation for almost ten years. Currently, it has
an estimated customer base of 3000. Through walk-in purchases and
deliveries, it provides customers with clean and purified drinking water.
However, the company is still using the semi-manual method, which includes
recording customer information and keeping track of their daily sales by writing
it down in a notebook and inputting it into MS Office and Excel, also referred to
as manual filing. The manual method has led them to various problems,
including human errors, loss of documents, duplication of data, difficulty, and
slow retrieval of records.

1
 The Agua Boo Water Web-based Management
System revolutionizes the operational efficiency of Agua Boo water refilling
stations by replacing semi-manual processes with advanced web-based
technologies. This comprehensive system tracks daily sales and customer
information, including orders and borrowed gallon counts, and significantly
mitigates common issues like human errors, document loss, and slow record
retrieval associated with manual methods. It also offers a user-friendly online
interface, allowing customers to effortlessly place orders and track their
transactions, enhancing their engagement and satisfaction.

2. Statement of the Problem

Like other new businesses, Agua Boo Water, currently reliant on a semi-
manual system using Microsoft Office and Excel, faces significant operational
inefficiencies. Manual entry and transaction tracking are time-consuming and
prone to errors, leading to inaccurate sales records and customer information.
This method results in cluttered documentation, slow information retrieval, and
security risks regarding sensitive data. Additionally, the limited analytical
capabilities of the current system hinder strategic decision-making, impacting
overall business performance and customer satisfaction. The project aims to
replace this system with a streamlined, automated approach to enhance
productivity, data accuracy, and customer service, ultimately improving the
company's decision-making process and business efficiency.

1. Manual management of data is time-consuming and inconvenient. It may

result in lost documents, duplication of records, and human error, leading
to inaccurate information.

2. Traditional filing techniques limit the number of orders per time, which
might cost businesses during peak times. Traditional filing techniques
need more real-time inventory and sales data, making it difficult to track
performance and make data-driven decisions.

2
 3. Manual tracking and management of gallons can be prone to human
error, leading to inaccurate record-keeping and inventory management.
The stakeholder offers service for borrowing water gallons; however,
manual failure to track and manage gallons regularly will result in the
loss of borrowed gallons.

4. The company relies on manual monitoring and managing deliveries,

which may consume a lot of time. It may cause a delay in delivery and
will result in low customer satisfaction.

5. Producing and generating sales reports manually will consume a lot of

time, just like manual filing, human error may also occur and lead to
inaccurate sales reports.

6. When assessed using inspection techniques and an empirical approach,

how usable is the web-based management system?

3. Objectives of the Project

The general objective of this project is to develop the Agua Boo Water
Web-based Management System.
More specifically, this project aims to:

1. To develop a comprehensive database management system that

replaces manual data management, mitigates the risk of lost documents,
prevents duplication, and minimizes human errors to ensure accuracy in
information.

2. To implement an automated order processing and filing system that can

handle multiple orders efficiently during peak times, and provides real-
time data to enhance performance tracking and enable data-driven
decisions.

3
 3. To establish a robust tracking system for gallon management that
accurately records and manages the inventory of gallons, including
those being produce and borrowed, to prevent losses and improve
inventory accuracy.

4. To create a real-time delivery tracking and management feature that

speeds up the delivery process, thereby increasing customer
satisfaction by reducing wait times and improving service reliability.

5. To automate the generation of sales reports to reduce the time

consumed in manual report preparation, increase the reliability of sales
data, and eliminate human errors in report generation.

6. To evaluate the level of usability of web-based management system

functions and features, based on the SUS usability tool using a 5-point
Likert scale.

4. Scope and Limitation of the Project

The project "Agua Boo Water Refilling Station Web-based Management

System" concentrates on the business's sales, customer monitoring, and gallon
management. The system maintains admin, customer information, and
ordering details from customers. Allows for editing, updating, and changing the
delivery and gallon status. The manager acts as the admin of the Agua Boo
Water Web-based Management System, and they are permitted to maintain
and update the system's data, including the number of gallons, manage
customer orders and information, and monitor the gallon and sales report. The
staff could only update the assigned orders. The admin cannot accept online
payment. Cash on Delivery is only the mode of payment. The system features
a dashboard that displays the total number of users, total sales, number of
gallons, number of orders, and other information that assists the administrator
in monitoring the system activity.

4
5. Significance of the Project

The significance of this project is particularly relevant in today's digital

age, where technology plays a critical role in society. The system have a
significant impact on the Agua Boo's owner and manager and also for the staff
who manage the system. The system's key features include a user account,
orders and resource module, managing trucks, gallon products and borrowed
gallons, and sales reports. While online payment transactions cannot yet be
implemented due to specific prerequisites, the system offers a more convenient
way for customers to create and submit orders from the comfort of their homes
using their personal devices and internet connection.

Agua Boo Owner/Manager. This can help them monitor and track all their
transactions, including the number of gallons, manage customer information
and orders, and generate sales reports.

Agua Boo Staff. It will provide them with a systematized method of monitoring
and managing the orders, deliveries, and gallons returned by the customers.

Customers. It will provide them with a systematized water ordering method via
walk-in or online transactions.

Developers. The system will help them gather new ideas and improve their
knowledge and skills, enabling them to create a system that will benefit the
water station's owner, staff, and users.

Future Developers. This project could be used as a guideline or reference for

future developers who plan to conduct similar studies and improve the system.

5
 CHAPTER II

REVIEW OF RELATED LITERATURE

1. REVIEW OF RELATED CONCEPT

Water Refilling Station

According to Vegh (2017), one of the fastest-expanding businesses

nationwide is the Water Refilling Station. Water Refilling Stations are small
water systems that have their water purification facility producing potable
drinking water. Agua Boo Water is one of the best and most good quality
purified water. Also, he states management and therefore the decision-making
process, financing, operations, and marketing considerations are studied, with
actual cases wanting to illustrate problems in small and large businesses.

Sustaining Beneficial Relationships with Clients

Pacinabao (2016), Developing and sustaining long-term, mutually

beneficial relationships with its clients. Finding potential clients every day is
going to be useless if the corporation cannot maintain an honest relationship
with them considering that water may be a continuous need and other people
will easily replace you if they're not satisfied with your services.

Significance of Water Filling Business

In 2016, Dela Cruz stated the water-filling business is one of the fastest-
growing businesses here in the Philippines. As this business grows, the
complexity of managing customer accounts and transactions, product
inventory, control, and report generation also grows and can lead to the
business instinct not to survive. Most businesses have water refills, staff
working on their reports, and inventory of products manually. They sell purified
water of comparable quality with bottled water at a lower price Magtibay said
(2016). For example, the price per gallon of refilled water purified in Agua Boo
Water ranges from ₱ 20-30 per container per gallon.

6
Challenges in Water Refilling Stations

A study of the operational performance of a purified water refilling station

in Batangas City has conveyed that the lack of advertising, equipment
maintenance, and the inefficiency of employees are the factors hindering the
business from unlocking its full potential. Bottle inventory tracking, pilferage,
and undocumented sales are other concerns that need to be addressed. These
are all typical characteristics of a manual-based management system.
Additionally, a great deal of research focused on the business aspect of a water
refilling station; this includes the procurement of capital, location, permits,
equipment, and human resources. Other research, like Drinking Water as a
Source of Income by Bayer (2013), is more focused on the challenges and
reasons why water-refilling stations are being established (Domingo, 2017).

2. REVIEW OF RELATED SYSTEM

Aqua Water Refilling Management System Database Design 3

The project by Glayy Eliver (2019), titled "Aqua Water Refilling

Management System Database Design," described how the system manages
the data, which the user fills out according to the customers' information in an
organized manner that includes their details. Also, customers pay for the
transactions they make in the water refilling station system and the services
they wish to use. The primary goal of this project is to replace the outdated,
manually operated refilling station operation with a computerized system to
satisfy customers and resolve operational challenges.

Water Delivery System 1

According to them, a water delivery system efficiently facilitates the

essential processes of the business, like counting the daily sales and, therefore,
the number of containers/gallons delivered. A water delivery system ensures
that enterprise workers compute and document daily transactions and sales.
Water delivery is the physical work of providing water from the source to the

7
intended end or user. Implementing a water business system benefits the
desired company by reducing human error and making their work efficient and
effective. They also stated that the system transforms the current manual
system into an automated one, lessening errors when tabulating sales
manually. Its quality is designed to meet the customer's requirements, Galan,
Semiano & Libertad (2020). So, the proponents developed a system that is
easily accessible in online ordering, user-friendly, and easy transaction to have
an order on time.

Water Refilling Station as Inventory Management System

Bucao (2020) stated that a water refilling station has an inventory

management system that permits owners to watch their items regularly. The
author conducted an in-depth interview to collect the required data to make the
new inventory system using data system tools. A data system may be software
that will help organize and analyze the info by turning data into useful
information.

Information System Plan for Water Zip Purified Drinking Water

They stated that one is responsible for administrative duties like keeping
records, logging, and handling cash sales. They also receive calls or SMS from
the customer's orders or delivery requests to develop an Information System
Plan for Water Zip Purified Drinking Water, Pilones et al., (2020).

Inventory System for Water Refilling Stations

The requirement for water replenishing stations has grown over time,
according to M.Young., et al (April 2020). These tiny firms must become more
efficient to meet the increased demand. This project aims to develop an
inventory system for water refilling stations, allowing owners to track their
inventory regularly.

8
 CHAPTER III
TECHNICAL BACKGROUND

1. PHP

PHP is a server-side scripting language used on the Internet to create

dynamic web pages. It is often coupled with MySQL, a relational database
server that can store the information and variables the PHP files may use,
(Bradley, 2017). It is used as the scripting language, which is especially suited
for web development and can be embedded into HTML. PHP is a scripting
language specially designed to put up websites. A common use is data retrieval
from SQL databases. PHP is a scripting language that creates dynamic and
interactive HTML Web pages. A server processes PHP commands when a
website visitor opens a page and then sends results to the visitor’s browser.

The proponents chose PHP as the programming language due it is a

server-side scripting language designed specifically for web development. It is
easy to learn, widely used, and has a large community of developers who
contribute to its ongoing development and improvement. Additionally, PHP is
compatible with many popular databases, making it versatile for building
dynamic websites with interactive features.

2. Laravel

Laravel is a free, open-source PHP web application framework that

enables developers to create scalable, secure, and robust web applications. It
is one of the most widely used PHP frameworks and is renowned for its
expressive syntax, graceful and intuitive syntax, and extensive collection of
tools and libraries that help streamline web application development.

The proponents chose Laravel as PHP framework because it provides

an efficient, feature-rich, and user-friendly development environment that
makes it easier to build scalable, secure, and high-performance web
applications.

9
 3. Hypertext Markup Language (HTML)

HTML stands for Hypertext Markup Language, the most widely used
language to write Web Pages. HTML is the language used to create web pages.
"Hypertext" refers to the hyperlinks that an HTML page may contain. "Markup
language" refers to the way tags are used to define the page layout and
elements within the page.

The proponents used html to create the structure of the web page, collect
user input through forms, link elements and display images.

4. Cascading Style Sheet (CSS)

Cascading Style Sheets (CSS) were used to customize the frontend

design of the system. Cascading Style Sheets, fondly called CSS, is a simple
design language intended to simplify the process of making web pages
presentable and handles the look and feel part of a web page. Using CSS,
developers can control the color of the text, the style of fonts, the spacing
between paragraphs, how columns are sized and laid out, what background
images or colors are used, layout designs, and variations in display for different
devices and screen sizes as well as a variety of other effects. CSS is easy to
learn and understand, but it provides robust control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup language
HTML.(TutorialsPoint Contributors, n.d.).

The proponents used CSS because it separates the content of an HTML

document from the style and layout of that document. The proponents writes
CSS once, and then the same code could be applied to the groups of HTML
elements and reused in multiple HTML pages. Most pages from this module
use the CSS framework so the user could have a better experience using the
system interface.

10
 5. Bootstrap

Bootstrap is one of the best and most used HTML/CSS/JS front-end

frameworks. It offers many ready-made components and resources; Bootstrap
significantly speeds up application development (Saniukaite, L., 2018). It is a
free, open-source front-end library, a collection of tools that helps developers
create websites or web applications. It provides a faster, easier, and less
repetitive solution for designing and building applications. Bootstrap quickly
became famous as a front-end framework that offered a wide set of tools, from
page grids to components that render a web page, all in the best possible way
for any device (Moreto, S., 2017). Unlike many web frameworks, it concerns
itself with front-end development only.

The proponents used a bootstrap template in the system to make the

development faster and more convenient, especially in designing the whole
structure of the system.

6. Javascript

JavaScript is a client-side scripting language, which means the source

code is processed by the client's web browser rather than on the web server.
JavaScript has made modern web applications possible, applications with
which you can interact directly without doing a page reload for every action.
Traditional websites also use JavaScript to provide various forms of interactivity
and cleverness (Haverbeke, 2018).

The proponents used JavaScript for the user interface of the system. In
some of the system's functions, especially in updating the list, the user interface
must change without refreshing the page to provide an interactive and friendly
user interface.

11
 7. PHPMyAdmin

PhpMyAdmin is an open-source tool built on PHP that enables

proponents to administer MySQL and MariaDB databases online. To use it, the
developer must install the software on a server running either Windows or one
of the several Linux distros it supports. The software enables developers to
manage as many databases as possible. Developers can edit tables and
values, create and delete databases, or even import and export them (Hughes
J. , 2017).

The proponents chose to use PhpMyAdmin because installation is

straightforward and very fast. However, using PhpMyAdmin provides the
proponents with a web interface of the database structure. Hence, the
proponents use it to organize the database component of this module.

8. MYSQL

To add, access, and process data stored in a computer database,

developers need a database management system such as MySQL Server.
Since computers are very good at handling large amounts of data, database
management systems are central in computing as standalone utilities or as
parts of other applications. A relational database stores data in separate tables
rather than putting all the data in one big storeroom. The logical model, with
objects such as databases, tables, views, rows, and columns, offers a flexible
programming environment. Developers set up rules governing the relationships
between different data fields, such as one-to-one, one-to-many, unique,
required, or optional, and “pointers” between other tables. The database
enforces these rules so that with a well-designed database, the application
never sees inconsistent, duplicate, orphan, out-of-date, or missing data, as
stated (MySQL, 2017).

The purpose of using it is to provide a reliable and efficient way to store

and manage large amounts of data that is required by the website. MYSQL can
handle complex data structures and queries, making it a popular choice for
12
websites that require a high degree of data management. MySQL is used with
PHP as a back-end tool. MySQL is a popular online database that can be
interfaced with PHP. Therefore, PHP and MySQL are excellent choices for the
proponents.

9. XAMPP

XAMPP stands for Cross-Platform (X), Apache (A), MySQL (M), PHP
(P), and Perl (P). It is a simple, lightweight Apache distribution that makes it
easy for developers to create a local web server for testing. Everything the
developer needs to set up a web server – server application (Apache),
database (MySQL), and scripting language (PHP) – is included in a simple
extractable file. XAMPP is also cross-platform, which works equally well on
Linux, Mac, and Windows. Since most actual web server deployments use the
same components as XAMPP, it also makes transitioning from a local test
server to a live server extremely easy. Web development using XAMPP is
especially beginner-friendly, as stated by MIKOLUK (2013).

The proponent's purpose in using XAMPP is to run the project

development locally; running on a local machine speeds up the development
stage of this project. Installation of XAMPP is effortless and fast; all the tools
needed to set up a web server are included in a simple extractable file, as
mentioned above by Kasia Mikulok (2013). There is no need for the proponents
to upload the scripts to a live server.

10. Visual Studio Code

Visual Studio Code is a code editor that supports development

processes such as debugging, task execution, and version control. It tries to
give only the tools necessary for a speedy code-build-debug cycle, leaving
more sophisticated processes to IDEs with more features, such as Visual
Studio IDE.

13
 Visual Studio Code was utilized during the development of the system.
It provides easy access to folders, especially when utilizing the code. Visual
Studio Code is used for debugging, syntax highlighting, intelligent code
completion, snippets, and code refactoring.

14
 CHAPTER IV

METHODOLOGY

1. Conceptual Framework

A conceptual framework is a written or visual representation of an

expected relationship between variables. Figure 1 Demonstrates how the
admin, staff, and customer used their account credentials to process
information. The concept of the project includes the input, process, and output
of the Agua Boo Water Web-based management. The inputs consist of the
given features of the system, including registrations and logins of admin, staff
& customers, management of customer orders, and online ordering. Also,
processes were completed, such as requirements gathering, interviewing with
the client, analysis of similar projects, developing a project design, actual
coding of the system, testing a project, deployment, and reviewing user
feedback. As a result, the Agua Boo Water Web-Based Management System
is developed and performs well as output.

Figure 1. Conceptual Framework

2. Project Approach

In conducting the project, an interview was conducted together with the

manager of the Agua Boo Water. This interview aims to learn about the issues
and challenges they faced while semi-manually managing the transaction.
Through this interview, the proponents determined the problems regarding the
company's manual filing and management of records. According to the

15
manager of Agua Boo, they find it hard to manually write and record the sales
of the company, customer information and orders, counts of the gallons being
borrowed, and sales reports. Also, they find it time-consuming to check those
previous transactions made by the customers manually. Some customers also
find it hard to determine the status of their orders.

With the support of several project studies, the challenges were then
assessed, and the idea of establishing a Web-based Management System to
conduct transactions between the admin and customers was established.

3. System Development Methodology

The agile technique was utilized during each phase of the completion of
this project. It begins with the preparation of the system that was produced for
the analysis, then moves on to the development, construction, testing, and
assessment of the system to conduct the extra projects. Finally, it culminates
with the evaluation of the system. The objective of the agile software
development life cycle is to produce and deliver working software in an efficient
and timely manner. The capacity to design and deploy simultaneously inside a
predetermined environment is one of its many advantages. Other benefits
include rapid capability creation and demonstration, suitability for fixed or
changing demands, and suitability for both.

Figure 2. Agile Development Model

16
 Figure 2 depicts the Agile Model SDLC model chosen for this project.
The agile model's stages are well-defined and easy to comprehend for
consumers. It also enables proponents to update the established system in the
future for the consumers' comfort. Plan, Design, Development, Testing,
Release, and Feedback were all followed by the proponents

Requirements go with Identifying and prioritizing the needs and

expectations of the customer and stakeholders for the project. The proponents
utilized an interview with the stakeholders in the first step to obtain more
information that would drive the creation of their project, which included
planning for required needs, ideas, and other system features.

Designing concerns with creating a high-level design for the product,

including user interfaces, and system architecture. The proponents begin
creating the GUI of the program and how the system will work in the second
stage. This is where the proponents established the project's purpose and
objectives.

The development phase includes building and coding the product in

short, iterative sprints, with regular feedback and collaboration from the
customer. Following the design step, the proponents begin the actual coding
for the system to fulfill the system requirements. Algorithm design, coding,
program compilation, testing, and debugging of produced programs all begin
here.

Testing deals with performing rigorous testing throughout the

development phase to guarantee that the prodject works as it should. The
proponents test the system at this step to ensure that it is created according to
the users' demands and that any flaws are detected. If there are any difficulties
with the system, the proponents debug and correct it right away, and the
process is continued until the software program is fully functional.

17
 Deployment concerns with releasing the project to production after
ensuring that it's stable and ready for use by end-users. The system is now
complete, and the proponents have released or are about to release it to their
client, which has been uploaded to the internet and is ready to use. Users tests
the web system in this phase to see if it satisfies their needs and will be valuable
to them.

The last phase is review. This phase includes evaluating the project's
progress and finding opportunities for improvement, with a focus on continual
improvement and collaboration among team members and stakeholders. The
user input or review was delivered to the system in the last stage. They were
given questionnaires to complete to grade the overall system's performance
and provide feedback. The users also looked for any issues so that proponents
may address them as quickly as feasible.

4. System Analysis

i. Flowchart

Figure 3 below illustrates a systematic approach to handling users and

their activities within the system. It begins with the initial system start-up,
leading to a user authentication phase where it's determined whether a login
page should be presented. New users are guided to a registration process
where they input credentials to create an account—existing users log in with
their credentials, which the system verifies for accuracy.

Upon successful login, the system allocates appropriate access rights,

segregating users into three categories: Admin, Staff, and Customer, each with
tailored functionalities. System administrators are granted comprehensive
control, enabling them to manage trucks, orders, products, gallons, and user
accounts, and they can also generate detailed sales reports. Staff members
can manage orders assigned to them and update the number of gallons the
customer returns. Customers are given a more limited set of functions to place
orders, track their progression, and review their transaction history.

18
 The process flow ensures secure and role-specific access to system
functions, enhancing operational efficiency. The sequence concludes when the
user session is terminated by logging out or exiting the system.

Figure 3. Flow Chart

19
 ii. Context Level Data Flow Diagram

The data flow diagram at the Context Level represents the entire system,
including the essential inputs and outputs and the system as a whole. The
context flow for Agua Boo's Web-Based Management System is depicted in
Figure 4. They are composed of three different users. Every customer makes
a request or produces and submits an order transaction to the admin/staff. The
admin then accesses the system to supply the necessary data for the
processes, and the system generates information based on the queries that the
admin performs. In contrast, the staff manages the assigned orders and
delivery.

Figure 4. Context Level Data Flow Diagram

20
 iii. Level 0 Data Flow Diagram

Figure 5. Level 0 Data Flow Diagram

The level 0 flow diagram is a detailed context diagram. The explosive

flow diagram of the system is shown above in Figure 5. The system admin
manages all of the system information, including the system info setting, user
info, managing orders, managing gallons, managing sales, and generating
reports. The staff manages orders and gallons returned. The customer can only
manage their user information, create and submit orders, view order details,
and monitor or track order status.

iv. Use Case Diagram

This section describes how users, specifically customers,

administrators, and staff, could use the system to accomplish a
task. This outlines how a system responds to a request from the point of view

21
of the customer, staff, and administrative modules. Customers can create and
submit orders, but admins have complete control over the system and can do
whatever they want. The staff can manage orders assigned to them, including
viewing the assigned orders to deliver and changing their status to delivered
or canceled. They can also manage the gallons returned by the customer.

Figure 6. Use Case Diagram

22
 v. Entity Relationship Diagram

Figure 7. Entity Relationship Diagram

The Entity Relationship Diagram, seen in Figure 7, depicts the structures

and connection of each system data detailing customer profiles, orders, and
product information. It shows relationships where customers can have multiple
addresses and orders, orders can include various products, and these are
linked to specific delivery trucks. Additionally, the database manages staff
details, website settings, and password reset functionalities with a design that
emphasizes normalization and data integrity and supports the system's
scalability. Each table has timestamps for tracking data modifications, ensuring
a comprehensive and efficient data management system.

5. System Requirements Specification

i. Functional Requirements

The web-based management system contain a dashboard. The system

administrator have access to a dashboard that displays essential information
such as the total number of daily, weekly, and monthly sales, the total number

23
of orders, the total number of gallons borrowed, and the sales reports. The
admin runs as the head of the organization and has full access to all system
features. The staff can only view his assigned order and allows recording of
returned gallons. For the customer side, the system provides an easy and
hassle-free way to place orders online. Customers can create an account and
log in to view their order history, track their current orders, and make new
orders.

Administrator
● Can view the system.
● Can log in to the system.
● Can access dashboard
● Can access, add and manage users.
● Can access order list
● Can access the gallon management.
● Can access the products
● Can access trucks
● Can access and generate sales reports.
● Can access system settings

Staff
● Can view the system.
● Can log in to the system.
● Can access order list
● Can access gallons returned

Customer
● Can view the system.
● Can sign up and log in to the system.
● Can access online ordering orders and view status.
● Can access profile information

24
 ii. Non-functional Requirements

The web-based system had non-functional requirements identified such as:

● The system should have separate system functionality based on the

roles.
● The customers should not be able to access the admin-level
management.
● The system should have a list of the orders and number of gallons for
every customer borrowed, sales reports, and user management
● The system should have details or profile information for every customer.

iii. Other Project Requirements

Software Requirements
Software requirements in building the system are:
● Operating Systems (at least Windows 7 or any equivalent OS or higher).
● Browsers like Google Chrome, Firefox, Safari, Internet Explorer and
Opera Mini.
● Text editors like Visual Studio and Sublime Text Editor, MYSQL, and
XAMPP.

6.Project Management

i. Gantt Chart

Figure 8 is a Gantt chart that depicts the time needed to complete the
work necessary to accomplish the system's goals. It also presents a graphical
illustration of the tasks or stages that are planned out across a given period of
time. At this phase, the proponents were responsible for preparing and
coordinating the numerous tasks that needed to be finished to develop the
project based on the system's agile methodology and attain the target date of
implementation and deployment of the system

25
 Figure 8. Gantt Chart

7. Plan for Implementation and Testing

After evaluating each unit, all the units developed during the
implementation phase were integrated into a system. Following system
integration, the entire system was thoroughly examined for bugs and errors. It
underwent a comprehensive evaluation, and suggestions were provided for
future revisions and enhancements. The system was then pushed beyond its
limitations to ensure that it would not crash under extreme conditions.

The website was tested across various browsers, during which errors
were noted, and the application was subsequently debugged. After the testing
phase, the proponents gathered all comments from those who participated in
the system test. These insights served as a guide for adding and eliminating
unnecessary features of the system, as well as determining whether the
software requirement specifications and the specific objectives of the system
had been successfully met.

I. Step 1 Unit Testing

During the testing phase, the proponents conducted comprehensive

tests on the system, focusing on each component as well as its functionality.
Additionally, the admin of the system was composed of the management and
staff who work at the Agua Boo Water Station. This allowed for the identification
and rectification of any issues, in addition to investigating the most likely cases

26
to determine whether or not the code was flawed. Before deploying the
management system, specific bugs in the code that were causing problems
were fixed. Furthermore, the graphical user interface and database design of
both modules were adjusted to conform to the requirements that were intended
for them.

II. Step 2 Integration

During this phase, all of the individual parts of the system were brought
together and evaluated in the context of the whole. This was crucial to ensure
that the system's subcomponents interacted properly with external
dependencies, guaranteeing the system's proper functioning. The devices that
were submitted by the stakeholders were investigated by the proponents to
determine whether or not they conformed to the specification.

III. Step 3 Usability Testing

During this stage of the process, the owner, manager, staff, and
customers tested the system. The proponents anticipated receiving feedback
from the participants regarding whether or not it satisfied the organization's
requirements, both functional and non-functional.

 3.1 Orientation

At this stage of the usability testing of the system, the proponents

presented the system to the stakeholders. In particular, they presented
it to the owner, manager, and staff of Agua Boo. Additionally, the
contents of the system, along with its objectives and functionality, were
discussed in detail.

 3.2 System Demonstration

27
 This stage included hands-on experience with the system up to the
admin module, as well as step-by-step instruction on the execution of a
number of different tasks. Additionally, each of the navigational elements
and buttons were explained in terms of the function they serve and the
scope of the actions that are generated when they are triggered.

 3.3 System Testing

This step occurred after the system had been demonstrated, and it
required users to have a fundamental understanding of how to utilize the
system. The entire process of testing the system involved staff from
Agua Boo being chosen by the manager, which entailed using the
system in general. All functionalities of the system, from the
administrator side to the customer side, were tested and observed to see
if they adhered to the system's objectives without any errors. This testing
was performed by the manager, staff, and customers from Agua Boo.

 3.4 Survey Using System Usability Scale (SUS) Questionnaire

The following is a list of questions that were taken from the

System Usability Scale (SUS) template and were utilized by the
proponents to evaluate the level of satisfaction provided by the
respondents regarding the product.

1. I think that I would like to use this system frequently.

2. I found the system unnecessarily complex.
3. I thought the system was easy to use.
4. I think that I would need the support of a technical person to be able to
use this system.
5. I found the various functions in this system were well integrated.
6. I thought there was too much inconsistency in this system.
7. I would imagine that most people would learn to use this system very
quickly.
8. I found the system very cumbersome to use.

28
 9. I felt very confident using the system.
10. I needed to learn a lot of things before I could get going with this system.

The final score was determined using a Likert scale with five points,
ranging from strongly agree to strongly disagree (as shown in Figure 9).

Figure 9. Likert Scale

Each response is assigned a value for the SUS score calculation. The
following is a breakdown of the points for the responses: Strongly Disagree
receives one point, disagree receives two points, Neutral receives three points,
agree receives four points, and Strongly Agree receives five points.

According to (Chinn, 2022), to calculate the overall SUS score, the

following framework were used.:

● Add up the total score for all odd-numbered questions, then

subtract 5 from the total to get (X).
● Add up the total score for all even-numbered questions, then
subtract that total from 25 to get (Y).
● Add up the total score of the new values (X+Y) and multiply by
2.5.

Figure 10. System Usability Scale Scoring

29
 Figure 10 is a snapshot of the range of scores and what they mean after
adding the total score of the new values (X+Y) and multiplying it by 2.5. This
snapshot was created after calculating the total score of the new values.To
provide further clarification, a System Usability Scale score above 60 was
considered above average, while below 60 was deemed below average. A
score of 70 or above was considered acceptable, and an unacceptable score
corresponded to 50 percent. To assess if the system's capabilities and features
meet the users’ expectations.

IV. Deployment

The deployment took place in the Agua Boo Water Store. At this phase,
it was required that the handlers of the program administer the system that had
already been through and conform to the steps that were described earlier. The
approach involved installing the system on the laptop owned by the
shareholder, as well as installing the system online. The design of the system
itself was adaptable, making it possible to accommodate any changes or
modifications that might have occurred in the future.

30
 CHAPTER V

RESULTS AND DISCUSSION

1. Results

This chapter details the module as implemented by the proponents. The

interfaces illustrated in Gantt Chart Figure 8, align with all specifications from
the planning phase. This section's graphical user interface (GUI) highlights the
user interface specified in the project objectives and its key features, with
additional interfaces relegated to the appendices. The GUI was intentionally
designed to be straightforward to facilitate user-friendly interactions.
Testing was conducted using SUS survey questionnaires, enabling the
proponents to collect robust data on the system's usability.

I. Landing Page

Figure 11. Landing Home Section

The landing page for the "Agua Boo Water" utilizes a split layout design,
with a dominant purple color scheme on the left that effectively draws attention
to the company logo and the call-to-action button. This layout is optimized for
user engagement, directing visitors' eyes towards the ordering process.

31
 Figure 12. About Section

The "About Us" section of the website features a headline "Quench your
thirst on time." which implies a promise of timely service, which is a valuable
aspect of customer satisfaction in the water refilling industry. The collage of
images supports this by showing different stages of the service, such as the
filtration systems, the delivery vehicles, and the storefront, giving customers a
visual tour of the efficiency and reach of Agua Boo's operations. This ties back
to the section's purpose by demonstrating the company's commitment to
delivering on its value proposition promptly.

Figure 13. Contact Page

32
 The "Reach Us Out" section on the website's Contact is designed for
accessibility and customer interaction. It prominently features a map to assist
customers in locating Agua Boo Water Refilling Station, enhancing physical
accessibility. The section also provides various means of communication,
including a Facebook link, a phone number, and an email address, offering
multiple channels for customer inquiries and support.

ii Customer Login

Figure 14. Customer Login Page

The login form displayed is minimalist in design, focusing the user's

attention on entering their credentials. The fields for email and password are
presented in a straightforward layout, with a clear option for those who may
have forgotten their password. The continuity of the brand's color scheme with
the purple and the background image of the refilling station subtly reinforces
the company's identity.

33
 iii. Customer Registration

Figure 15. Customer Registration Page

The registration page is well-organized and requests essential

information such as full name, email address, password, phone number, city,
barangay, and purok. The layout is intuitive and user-centric, with clear fields
for input and a contrasting "Register" button that stands out against the purple
theme. A link for users who are "Already registered?" suggests a thoughtful
consideration for navigation, ensuring that returning users can easily switch to
the login page if they've mistakenly accessed the registration form.

iv. Customer Profile Page

Figure 16. Customer Profile Page

34
 The Customer Profile Page on the website is designed for a
personalized and informative user experience. It neatly presents the user's
information, including full name, address, and contact details, with options to
edit the profile or change the password for account security. The panel also
includes a summary of account activity, showing the number of borrowed
gallons, and a concise order summary for active orders, delivered, canceled,
and total orders. The interface allows for easy tracking of user activity, which
can enhance customer satisfaction by providing a clear and manageable
overview of the user's interactions with the service. The "Add Order" button is
strategically placed to encourage continued engagement.

v. Customer Add Order Page

Figure 17. Customer Current Delivery Address

Figure 18. Customer Add Delivery Address

35
 The customer delivery address interface is designed to provide a
seamless and user-friendly experience. Initially, it presents the customer's
default address, with an option to change the recipient, indicating flexibility for
the delivery locations. Upon changing the recipient, a modal lists multiple saved
addresses, allowing the user to quickly select an alternative delivery point
without the need for manual re-entry. This system enhances convenience,
saves time, and reduces the potential for input errors, catering to customers
who may have different locations for receiving orders.

Figure 19. Customer Create and Submit OrderPage

The "Customer Create Order Page" serves as a functional element of

the website andt also embodies one of the objectives of the project to facilitate
a seamless ordering process. The design of the page, with its intuitive product
selection and bundle deal options, directly demonstrates the realization of this
objective by providing an effective, user-centered ordering system. The
simplicity and clarity of the page align with the project's goals of enhancing
customer experience and operational efficiency.

36
 Figure 20. Customer Edit Details

The "Customer Edit Details" interface on the profile page is designed to

give users the ability to update their personal information easily. This feature is
essential for maintaining accurate records and ensuring that service delivery
can be performed efficiently. The modal window provides a straightforward form
where customers can quickly update their name, email, address, and phone
number, which are critical details for order processing and communication.

vi. Customer Order History Page

Figure 21. Customer Order History

37
 The "Customer Order History" page is designed to provide users with a
comprehensive view of their past transactions. The tabular format lists the order
number, recipient, total price, quantity returned, date ordered, and date
updated, giving users full visibility into their purchase history. The 'View' action
button for each order suggests that more detailed information can be accessed,
allowing users to review individual order specifics. This setup not only offers
users transparency regarding their interactions with the service but also aligns
with business objectives of fostering trust and accountability by keeping a clear
and accessible record of customer transactions.

Figure 22. Customer Active Orders

The figure 26 page offers a streamlined view for customers to monitor

their current engagements with the service. This proves the fourth objective of
the project which is tracking and managementI of delivery process increasing
customer satisfaction by reducing wait times and improving service reliability. It
lists active orders with details like order ID, recipient name, total price, product
ordered, and transaction status, providing clarity on the progress of each order.

38
 Figure 23. Customer View Active Order Details and Status

The image displays a detailed view of specific enabling users to track

individual transactions and manage their orders efficiently. This page lists the
product, price, quantity, and total cost, helping improve transparency and
efficiency in the delivery process. Users can easily navigate to see detailed
information about their orders. The design is straightforward and minimalistic,
focusing on usability and easy access to information.

vii. Staff & Admin Login

Figure 24. Staff and Admin Login Page

39
 The Staff and Admin Login Page presents a clean and professional
interface, with a straightforward form for login credentials. The backdrop
features a relevant image of water bottles, which immediately contextualizes
the page to the water refilling business. The login form itself is minimalistic,
requesting just the essential information—email and password—with a
prominent login button. This design suggests an efficient and secure entry point
for staff and administrative access, underscoring the importance of functionality
and ease of use for internal users who require access to the system's backend
for management and operational tasks.

viii. Staff Dashboard Page

Figure 25. Staff Active Orders Dashboard

Staff Active Orders Dashboard is efficient and easy to monitor. It shows

a table of active orders with columns for the customer's name, address, contact
number, total quantity of things ordered, total amount, date created, and actions
(check marked to update order status). Staff can evaluate and manage orders
in real time with this arrangement. The search capability and pagination controls
indicate a system that can handle a huge volume of orders, helping staff
streamline process and improve service.

40
 Figure 26. Staff Active Orders Update

The "Staff Active Orders Update" page provides a structured interface

for staff to view and update the details of a customer's order. It is split into
sections for customer details and order details, presenting all the necessary
information such as the customer's name, address, contact number, assigned
truck, and the specifics of the order including item description and price. There's
also a section for the status of the order and the number of returned gallons.
Editable fields and 'Save' and 'Cancel' buttons suggest that the staff can modify
the order details and update the order's progress. This design prioritizes
functionality and operational management, allowing for efficient tracking and
modifications of ongoing orders.

Figure 27. Staff Delivered Orders Dashboard

41
 The Staff Delivered Orders Dashboard is a tool designed for monitoring
the status of completed deliveries. It displays a list with columns for the
customer's name, address, contact number, total quantity of items delivered,
the total amount of the order, and the date delivered. This straightforward layout
aids in providing a quick reference for staff to review completed transactions.
The table is equipped with search functionality, enhancing the ability to filter
through records efficiently. Additionally, pagination is included, indicating the
system can handle and display a large volume of data, which is essential for
high-operational businesses.

Figure 28. Staff Canceled Orders Dashboard

The staff canceled orders dashboard is a specialized interface for

tracking orders that have not been completed, providing clear information such
as customer name, address, contact number, total quantity, total amount, and
reasons for cancellation.

42
 ix. Admin Dashboard Page

Figure 29. Admin Dashboard

The admin dashboard provides a comprehensive overview of key

business metrics at a glance, with widgets displaying sales data, sales returns,
pending order totals, and recovered cans. It includes graphical representations
like a daily sales trend line and a bar chart for sales per truck, enabling quick
analysis of business performance over time. This dashboard is a critical tool for
administrators to monitor, analyze, and make informed decisions to drive the
business forward.

43
 x. Admin Order Page

Figure 30. Admin Orders Module

The Admin Orders Module exemplifies one of the project's objectives,

which is the effective management of orders. This system streamlines the
administrative oversight of customer transactions, enabling the tracking of order
statuses and updates. The implementation of such a module directly aligns with
the intention to enhance operational efficiency and customer service
management within the business.

44
 Figure 31. Admin Add New Customer

The add new order allows the system administrator to access all features
of managing new orders. This includes adding a new order, entering or
searching the data of the customer, and selecting the items being ordered.

Figure 32. Admin Update Order status

45
 The update order module allows the system administrator to access all
features of managing the progress or status of orders. This includes the ability
to assigned the order to specific delivery truck, update the status of orders as
well as updating the number of returned gallons. The interface indicates an
interactive, real-time system for managing customer orders, designed to offer
an overview of transactions for efficient administration.

xi. Admin Inventories Page

Figure 33. Admin Inventories Page

The admin inventories pages show the dashboard for monitoring the
inventories. It provides real-time monitoring of gallons being produced and
returned in daily operations. Each product also features the number of gallons
returned and borrowed, and a specific date can be selected for viewing and
monitoring.

46
 xii. Admin Resource Page

Figure 34. Admin Resources Page

(truck, products and borrowed gallon management)

The resource module, Figure 34, showcases an administrative panel for

managing trucks, products, and borrowed items within the Agua Boo Water
Web-based Management System. It presents a table listing trucks, each with
an ID and editable actions, alongside a similar table for products, detailing
product names, prices, status and options for modification. The other table
features tracking borrowed items, such as water gallons, displaying customer
information, address, phone number, and quantity of items borrowed. This table
represents the third objective of the project, which is to establish a robust
tracking system for gallon management to prevent losses and improve

47
inventory accuracy. These interfaces provide a centralized, user-friendly
platform for administrators to oversee and manage resources critical to the
delivery service, including vehicle logistics maintenance, products, and
borrowed gallons highlighted from the project’s objectives.

xiii. Admin Account Page

Figure 35. Admin Customer Account Page

The "Admin Customer Account Module" is a segment of the

administrative dashboard that provides a list of customer accounts. It features
sortable columns for ID, name, address, contact details, account status, and
actions, likely including functions like edit, view, or delete. The icon plus sign
registers new customers. This module is an essential tool for administrators to
manage customer data, monitor account activity, and perform necessary
administrative actions efficiently.

48
 Figure 36. Admin Staff account module

The Admin Staff Account Module displays a table listing staff members,
which is a key component of the internal management system for an
administrator. It shows essential details such as staff ID, first and last names,
addresses, and roles, and has an 'Actions' column with options to presumably
view, edit, or deactivate staff records.

xiv. Admin Settings Page

Figure 37. Admin Settings

49
 The figure "Admin Settings" module, specifically the "Site Settings"
section user interface, allows the super admin to view and edit the company's
profile and contact information on the website landing page. It includes editable
fields for the company's slogan, which is currently set to a customer-centric
message, "Quench your thirst," and a brief description of the business, defining
Agua Boo as a water refilling station. The contact side lists the company's
Facebook page for social media presence, a phone number, and an email
address for direct contact. The 'Edit' button indicates that you can update these
fields as needed, indicating a dynamic system that allows you to manage site
content directly through the admin panel.

xv. Generate Sales Report

Figure 38. Admin Generate Sales Report

The figure above displays the report generation and printing features of
the Agua Boo Water Management System's report generation and printing
features. In Figure 38, the dashboard provides an interface for selecting a date
range to generate sales reports either summary or detailed, with fields for the
start and end dates and a submit button to process the request. The pop up
image shows the rendered sales report within the system's interface, ready for
download or printing. This functionality provides the administrative user with a
streamlined process for creating periodical sales reports for analysis or record-

50
keeping purposes. It makes it easy to access printed versions of sales data for
any given timeframe as a reference to the project's fifth objective.

2. Discussion

The SUS survey results for the "Agua Boo Web-based Management
System" showed a variation in perceived usability across different user roles
which are the admins, staff, and customers or consumers (as shown in Table
1).

As depicted in Figure 38 below, Administrators rated the system highly,

with an average SUS score of 81.25%, indicative of an 'A' grade or excellent
usability. Staff members' scores were also strong, averaging 80.33%, an
'A' grade that points to excellent usability. Customers, the largest group with 15
participants, gave the system a SUS score of 75%, corresponding to a
'B' grade, signifying good usability.

The system's mean SUS score was 76.5%, translating to a 'B' grade.
This solid rating reflects the system's generally good usability. The relative
score gap between customers, staff, and administrators highlights specific
areas of improvement.

Figure 39. SUS Survey Results

51
Table 1. Respondents Testing Results

R# Module Q Q Q Q Q Q Q Q Q Q SUS Grade

1 2 3 4 5 6 7 8 9 10 SCORE

Resp. 1 Admin 5 2 5 5 5 1 5 1 4 4 77.50 B

Resp. 2 Admin 5 4 5 1 5 4 5 1 5 1 85.00 A

Resp. 3 Staff 5 5 5 4 5 1 4 2 5 2 75.00 B

Resp. 4 Staff 5 3 5 2 5 1 5 1 5 1 92.50 A

Resp. 5 Staff 5 5 5 3 5 1 5 1 3 3 75.00 B

Resp. 6 Customer 4 4 4 3 5 2 5 2 3 3 67.50 C

Resp. 7 Customer 3 2 5 3 4 1 5 1 5 2 82.50 A

Resp. 8 Customer 4 5 3 2 5 1 5 2 5 1 77.50 B

Resp. 9 Customer 2 4 3 4 5 3 5 1 3 3 57.50 D

Resp. 10 Customer 5 3 3 3 5 1 3 1 5 3 75.00 B

Resp. 11 Customer 3 2 5 3 5 1 5 1 5 4 80.00 A

Resp. 12 Customer 3 4 4 4 5 2 3 2 4 3 60.00 D

Resp. 13 Customer 4 3 3 2 5 2 4 1 4 2 75.00 B

Resp. 14 Customer 3 2 5 3 5 2 5 1 5 2 82.50 A

Resp. 15 Customer 5 5 3 2 5 1 5 1 5 1 82.50 A

Resp. 16 Customer 3 4 5 3 5 2 5 1 4 3 72.50 C

Resp. 17 Customer 3 4 4 3 5 1 4 1 3 2 85.00 A

Resp. 18 Customer 4 4 4 3 5 1 4 1 3 2 72.50 C

Resp. 19 Customer 4 5 3 2 5 1 5 1 5 1 80.00 A

Resp. 20 Customer 4 5 3 2 5 1 5 1 5 3 75.00 B

Average 76.5 B

52
 The table above shows the 20 respondents' testing results and how
individual SUS scores were calculated. The process involves summing the
scores for all odd-numbered questions and subtracting 5 to obtain (X).
Simultaneously, the total score for all even-numbered questions is summed,
and the result is subtracted from 25 to derive (Y). Combining these new values
(X and Y) and multiplying the sum by 2.5 yields the final SUS score. For the
overall mean of the system's SUS score, all respondents' results are summed
up and divided to get the average mean score of the system. See Figure 54 for
a detailed rating distribution for each of SUS questions.

Figure 40. SUS Rating Distribution

The bar graphs visually summarize the distribution of responses for ten
questions on SUS survey, differentiated by odd-numbered questions
represented in blue and even-numbered in red. In the odd-numbered questions,
Question 5 is notable for receiving the highest count of '5' ratings, with 19
respondents indicating strong agreement, suggesting that the majority view is
that the website's functions are well integrated. On the other hand, within the
even-numbered questions, Question 8 stands out with the most '1' ratings,
accumulating 16 responses, which suggests that most of the respondents
strongly disagree with the statement, "I found the system very awkward to use."
a sign of positive user feedback. The graph pattern points to specific areas
where users feel the system excels or needs enhancement.

53
 CHAPTER VI
CONCLUSION AND RECOMMENDATION

1. Conclusion

Based on the conducted testing, the implementation of the Agua Boo

Web-based Management System was acceptable and has been
thoroughly assessed and proven effective in achieving the set
objectives. The successful development and integration of a
comprehensive database management system have eliminated manual
data handling, as evidenced by the reduction of document losses and
duplications reported in the results section. This system enhancement
has significantly minimized human errors, enhancing the accuracy and
reliability of stored information.

Additionally, the automated order processing and filing system

implemented as part of this project has demonstrated its efficiency
during peak operational hours, effectively handling multiple orders
simultaneously. This system's capability to provide real-time inventory
and sales data has been crucial in improving performance tracking and
facilitating data-driven decisions, as highlighted in the figures in the
results and discussion.

The introduction of a robust gallon management tracking system has

accurately monitored and managed gallon inventory, including borrowed
items. This system has proven instrumental in preventing losses and
improving overall inventory accuracy, contributing to the streamlined
operations discussed earlier in the report.

Furthermore, the real-time delivery tracking and management feature

has significantly expedited the delivery process, enhancing customer
satisfaction by reducing wait times and improving service reliability.
Improved customer feedback scores and reduced delivery times have
quantitatively supported these benefits.

54
 Lastly, the automation of sales report generation has effectively
reduced the time spent on manual report preparation. As a result, sales
data reliability has increased, and human errors in report generation
have been substantially decreased, as evidenced by the accuracy and
timeliness of reports detailed in the results.

Overall, the system's mean SUS score was 76.5%, translating to a

'B' grade. This solid rating reflects the system's generally good usability,
acceptable, and well-integrated. It provided solutions to the problems of
the current process, primarily for the stakeholders.

2. Recommendation

The following are the recommendations for this system:

1. The developers who would enhance this system can add a legend
that distinguishes the colors of the delivery truck to which the order
was assigned.
2. The system developers are encouraged to add another field to
upload a customer ID photo for validation and verification purposes.
3. Future developers of the system should put a restriction that allows
the customers to be marked inactive for not making new orders for
the next 15 days.
4. Future system developers would enhance it by adding an online
payment option for hassle-free and cashless transactions.

55
 REFERENCES

Bradley, A. (2018, March 10). Learn PHP. Retrieved from ThoughtCo.:

https://www.thoughtco.com/learn-php-2693925
Bucao, S. C., Carreon, A. G., Lauengco, T. D., & Young, M. N. (2020,
April). Designing a Computer Based Inventory System of Crystal Clear
Water Refilling Station: A Case Study. Retrieved from IEEEXplore:
https://ieeexplore.ieee.org/document/9101939/authors#authors
Chinn, A. (2022, July 22). What's the System Usability Scale (SUS) &
How Can You Use It? Retrieved from Hubspot:
https://blog.hubspot.com/service/system-usability-scale-sus
Clemmens, A. (1987). Delivery System Schedules and Required
Capacities. Retrieved from Semantic Scholar:
https://www.semanticscholar.org/paper/Delivery-System-Schedules-
and-Required-Capacities-
Clemmens/f03eac88d067b0ea1bb2bc07007f331ca07cc0e9
Contributors, T. P. (n.d.). What is CSS? . Retrieved from tutorialspoint:
http://www.tutorialspoint.com/css/what_is_css.htm
Dela Cruz, I. G. (2016, December). Water Refilling System. Retrieved
from Scribd: https://www.scribd.com/document/191086399/Water-
Refilling-System#
Eliver, G. (2019, September 20). Aqua Water Refilling Management
System Database Design. Retrieved from ItSourceCode:
https://itsourcecode.com/free-projects/database-design-projects/aqua-
water-refilling-management-system-database-design/
Eliver, G. T. (2019, March). AQUA WATER REFILLING MANAGEMENT
SYSTEM. Retrieved from Course Hero:
https://docs.google.com/document/d/1u1BZzkHkteQF0asVYAufgSZ0B
MtxpXz-/edit#
Haverbeke, M. (2018). Eloquent JavaScript 3rd edition. Retrieved from
Academia:
https://www.academia.edu/40513205/Eloquent_JavaScript_3rd_edition
Hughes, J. (2017, December 16). A Quick Guide to phpMyAdmin(And
How You User It). Retrieved from Elegant Themes:
https://www.elegantthemes.com/blog/resources/a-quick-guide-to-
phpmyadmin-and- how-you-can-use-it
Mikoluk, K. (2013, September 18). XAMPP Tutorial: How to Use XAMPP
to Run Your Own Web Server. Retrieved from Udemy:
https://blog.udemy.com/xampp-tutorial/

56
Moreto, S. (2017). Getting Started with Bootstrap 4 for Web
Development [Video]. Retrieved from PackPub:
https://www.packtpub.com/product/getting-started-with-bootstrap-4-for-
web-development-video/9781788999113
MySQL. (2017). What is MySQL? Retrieved from MySQL:
https://dev.mysql.com/doc/refman/5.7/en/what-is-%20Mysql.html
Norozpour, S., Momenzadeh, M., & Abolhasani, A. (2021, June).
Proposing new system for handling business data systems with more
functionality and usability. Retrieved from ResearchGate:
https://www.researchgate.net/publication/352298830_Proposing_new_
system_for_handling_business_data_systems_with_more_functionality
_and_usability
Olan, A. (2016). https://dev.mysql.com/doc/refman/5.7/en/what-is-
%20Mysql.html. Retrieved from Academia:
https://independent.academia.edu/ArleneOlan
Pacinabao, K. (2016, April). Marketing Plan: Water Refilling Station.
Retrieved from Course Hero:
https://www.coursehero.com/file/82278241/purified-water-refill-
stationdocx/
Pilones, D. G., Decasa, J. P., De Vera, V. E., & Alejandrino, J. (2020,
July). INFORMATION SYSTEMS DEVELOPMENT PLAN FOR WATER
ZIP PURIFIED DRINKING WATER. Retrieved from ResearchGate:
https://www.researchgate.net/publication/349895910_INFORMATION_
SYSTEMS_DEVELOPMENT_PLAN_FOR_WATER_ZIP_PURIFIED_D
RINKING_WATER
Saniukaite, L. (2018). Speeding up Application Development With
Bootstrap. Retrieved from Toptal: https://www.toptal.com/twitter-
bootstrap/speeding-up-development-bootstrap
UIUXTrend. (n.d.). Measuring and Interpreting System Usability Scale
(SUS). Retrieved from UIUXTrend: https://uiuxtrend.com/measuring-
system-usability-scale-sus/
Vegh, C. D. (2017, July). Water Refilling Station Management System.
Retrieved from Scribd: https://www.scribd.com/doc/141646258/Water-
Refilling-Station-Management-System

57
APPENDICES

57
 APPENDIX A
USE CASE SUITE

59
 ● Administrator
○ UC-00 Manage System Settings
○ UC-01 Manage Accounts/Users
○ UC-02 Manage Orders
○ UC-03 Manage Trucks
○ UC-04 Manage Gallons
○ UC-05 Manage Products
○ UC-06 Manage Sales
○ UC-07 Generate Report
● Staff
○ UC-08 Update Order status
● Customer
○ UC-09 Create & Submit Order
○ UC-10 View/Track Order Status

Default Aspects of All Use Cases

Direct Actors Administrator Refers to the manager and

owner of the Agua Boo
Water that manages the
overall business
transaction

Staff Refers to the delivery guys

who manage the assigned
orders.

Customer Refers to the buyers or

consumers of Agua Boo
Water

Prerequisites The user login first using their credentials to be

able to use the system.

60
 UC-00 Manage System Settings

Summary: The administrator can manage the system

settings such as updating the organization’s
tagline, fb page link, contact number , email
and description of the company

Priority: Expected

Use Frequency: Often

Direct Actors System Administrator, staff

Main Success Scenario 1. On the bottom sidebar, click settings

2. Click the edit button to update the
tagline, description, facebook link,
contact number and email.

Alternative Scenario: None

UC-01 Manage Users

Summary: The administrator can manage the users of the

system, specifically registering new users such
as the staff or customer’ data.

Priority: Expected

Use Frequency: Often

Direct Actors System Administrator

Main Success Scenario 1. On the bottom sidebar, click Accounts

Alternative Scenario: None

UC-02 Manage Orders

Summary: The administrator can manage orders. This

include creation of orders, assigning to
deliveries as well as updating the order’s status.

61
Priority: Expected

Use Frequency: Often

Direct Actors System Administrator

Main Success Scenario 1. On the bottom sidebar, click resource.

2. Inside of it “Van’s” Table can be found

Alternative Scenario: None

UC-03 Manage Trucks

Summary: The administrator can manage the delivery vans
by entering all the vehicles they’re using in
delivering gallons ordered by the customers

Priority: Expected

Use Frequency: Often

Direct Actors System Administrator

Main Success Scenario 3. On the bottom sidebar, click resource.

4. Inside of it “Trucks” table can be found

Alternative Scenario: None

UC-04 Manage Gallons

Summary: The administrator can manage the gallons, this

includes adding new gallon products and
tracking of borrowed gallons whereas the staff
can only update the number of returned gallons
by the customer

Priority: Expected

Use Frequency: Often

62
Direct Actors System Administrator, staff

Main Success Scenario 1. On the bottom sidebar, click resource.

2. Inside of it “Borrowed Gallons” table can
be found

Alternative Scenario: None

UC-05 Manage Products

Summary: The administrator can manage the products. It can

add, update, and delete products

Priority: Expected

Use Frequency: Often

Direct Actors System Administrator

Main Success Scenario 3. On the bottom sidebar, click resource.

4. Inside of it “Products” table can be found

Alternative Scenario: None

UC-06 Manage Sales

Summary: The administrator can manage and oversee the

sales. It provides real time monitoring of sales
per day, weekly, and monthly.

Priority: Expected

Use Frequency: Often

Direct Actors System Administrator

63
Main Success Scenario 1. On the bottom sidebar, click the
dashboard.
2. Inside of it is the graphical presentation
of sales.

Alternative Scenario: None

UC-07 Generate Reports

Summary: The administrator can generate sales reports.

Priority: Expected

Use Frequency: Often

Direct Actors System Administrator

Main Success Scenario 1.On the bottom sidebar, click the dashboard.

Alternative Scenario: None

UC-08 Update Order Status

Summary: The administrator and staff can update order

status as well as recording the number of gallons
returned.

Priority: Expected

Use Frequency: Often

Direct Actors staff

Main Success Scenario 1.On the top of staff dashboard, active orders
can be found and update it accordingly

Alternative Scenario: None

64
 UC-09 Create, Submit order

Summary: The administrator can create and submit orders

as well as the customers who wish to order
online.

Priority: Expected

Use Frequency: Often

Direct Actors customer

Main Success Scenario 1. Inside the profile page, click the “Add
Order” button.
2. Enter delivery address and create and
submit orders.

Alternative Scenario: None

UC-10 View order status

Summary: The administrator and customers can view each

of the transaction orders.

Priority: Expected

Use Frequency: Often

Direct Actors customer

Main Success Scenario 1. In the profile page, scroll down and find
the active order table.
2. Click the specific order and view status

Alternative Scenario: None

65
 APPENDIX B
DATA DICTIONARY

66
Table 2. Add Staffs

Database Table Name: addstaffs

Field Name Data Type Description

id BIGINT(20) Holds the STAFF ID, Auto

Generated, Acts as the Primary key

Truck id BIGINT(20) Holds the TRUCK ID

first_name VARCHAR(255) Holds the staff first name

last_name VARCHAR(255) Holds the staff lastname

address VARCHAR(255) Holds the staff address

contact_number VARCHAR(255) Holds the staff contact number

role VARCHAR(255) Type of user

email_address VARCHAR(255) Email of the user

password VARCHAR(255) The password of the user

created_at TIMESTAMP Date and time created

updated_at TIMESTAMP Date and time updated

Table 3. Customers

Database Table Name: customers

Field Name Data Type Description

customer_id BIGINT(20) Holds the customers or consumers

ID, Auto Generated, Acts as the
Primary key

customer_name VARCHAR(255) Holds the customers fullname name

customer_purok VARCHAR(255) Purok of the customer

customer_barang VARCHAR(255) Barangay of the customer

ay

customer_city VARCHAR(255) City of the customer

customer_phone VARCHAR(255) Contact number of the customer

num

67
borrowed INT(11) Quantity of the borrowed gallons of
the customer

is_active TINYINT(1) Status of the customer

customer_email VARCHAR(255) Email of the customer

customer_passw VARCHAR(255) The password of the customer

ord

created_at TIMESTAMP Date and time created

updated_at TIMESTAMP Date and time updated

Table 4. Addresses

Database Table Name: addresses

Field Name Data Type Description

id BIGINT(20) Holds the ID of the address, Auto

Generated, Acts as the Primary key

customer_id BIGINT(20) Holds theID of the customer

fullname VARCHAR(255) Holds the name of the customer

purok VARCHAR(255) Holds the purok address of the

customer

barangay VARCHAR(255) Holds the barangay address of the

customer

city VARCHAR(255) Holds the city address of the

customer

phonenum VARCHAR(255) Holds of the contact number of the

addresss

created_at TIMESTAMP Date and time created

updated_at TIMESTAMP Date and time updated

68
Table 5. Customer Forgot Password

Database Table Name: custom_forgotpassword

Field Name Data Type Description

customer_email VARCHAR(255) Holds the customer email where

reset link will be send

token VARCHAR(255) Holds the token

created_at VARCHAR(255) Date and time created

Table 6. Orders

Database Table Name: orders

Field Name Data Type Description

id BIGINT(20) Holds orders ID, Auto Generated,

Acts as the Primary key

customer_id BIGINT(20) Holds unique ID of the customer

order_cname VARCHAR(255) Holds the name of the customer

order_purok VARCHAR(255) Purok address of the order

order_barangay VARCHAR(255) Barangay address of the order

order_city VARCHAR(255) City of the order

order_pnumber VARCHAR(255) Contact number of the order

truck_id VARCHAR(255) Holds the truck id of the order

total_quantity INT(11) Holds the total quantity of the order

returned INT(11) Holds the quantity of returned

gallons of the customer

reason TEXT Reason for canceling order

total_price DECIMAL(8,2) Holds the total price of the order

order_status VARCHAR(255) Holds the status of the order

created_at TIMESTAMP Date and time created

updated_at TIMESTAMP Date and time updated

69
Table 7. Products

Database Table Name: products

Field Name Data Type Description

product_id BIGINT20) Holds ID of the products, Auto

Generated, Acts as the Primary key

product_name VARCHAR(255) Holds the name of the product

product_price DECIMAL(8,2) Holds the price of the product

bundle_quantity INT(11) Holds the bundle quantity of the

product

bundle_price DECIMAL(8,2) Holds the price of the bundle

product

created_at TIMESTAMP Date and time created

updated_at TIMESTAMP Date and time updated

Table 8. Order Products

Database Table Name: orders_products

Field Name Data Type Description

id BIGINT(20) Holds the ID of the created order,

Auto Generated, Acts as the
Primary key

order_id BIGINT(20) Holds the O

product_id BIGINT(20) Holds the dentist and employee

middle name

price DECIMAL(8,2) Holds the price of the ordered

product

quantity INT(11) Holds the quantity of ordered

products

is_bundle TINYINT(1) Is the the ordered product bundle

70
 created_at TIMESTAMP Date and time created

updated_at TIMESTAMP Date and time updated

Table 9. Trucks

Database Table Name: trucks

Field Name Data Type Description

id BIGINT(20) Holds the trucks ID, Auto

Generated, Acts as the Primary key

trucks VARCHAR(255) Holds the name of the tuck

created_at TIMESTAMP Date and time created

updated_at TIMESTAMP Date and time updated

Table 10. Site Settings

Database Table Name: site settings

Field Name Data Type Description

id BIGINT(20) Holds the info ID of the organization

slogan VARCHAR(255) Slogan or Tagline of the stakeholder

description TEXT Holds the short description of the

stakeholder

fb_account VARCHAR(255) Holds fb link account of the

stakeholder

phone_number VARCHAR(255) Contact number of the stakeholder

email_account VARCHAR(255) Holds the email of the company

created_at TIMESTAMP Date and time created

updated_at TIMESTAMP Date and time updated

71
 APPENDIX C
SYSTEM’S OTHER UI

72
 Figure 41. Customer Password Reset Link

Figure 42. Customer Reset & Type New Password

73
 Figure 43. Customer Change password

Figure 44. Customer View Order History Details

74
Figure 45. Admin Truck Deliveries

Figure 46. Admin Add Truck

75
Figure 47. Admin Edit Truck Details

Figure 48. Admin Add Products

76
Figure 49. Admin Edit Product Details

Figure 50. Admin Add Customer

77
 Figure 51. Admin Edit Customer Details

Figure 52. Admin View Customer Transactions

78
 Figure 53. Admin Add Staff

Figure 54. Admin Edit Staff Details

79
Figure 55. Admin View Staff Details

Figure 56. Admin Edit Site Settings

80
 APPENDIX D
TESTING DOCUMENTATION

81
Figure 58. Data Gathering (1)

Figure 59. Data Gathering (2)

82
Figure 60. System Presentation & Testing (1)

Figure 61. System Presentation & Testing (2)

83
Figure 62. System Presentation & Testing (3)

Figure 63. SUS Survey (1)

84
Figure 64. SUS Survey (2)

Figure 65. SUS Survey (3)

85
 APPENDIX E

SUMMARY OF ANSWERED SUS SURVEY DURING TESTING

86
87
88
89
90
91
 APPENDIX F
SYSTEM’S RELEVANT CODE

92
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\DB;
use App\Models\addstaff;
use App\Models\customers;
use App\Models\products;
use App\Models\trucks;
use App\Models\orders;
use App\Models\Sitesetting;
use App\Models\Address;
use Carbon\Carbon;

class AdminController extends Controller

{

public function __construct(){

$this->middleware('auth');
}

public function toDashboard(Request $request){

$timeFrame = $request->input('timeFrame', 'Daily');

switch ($timeFrame) {
case 'Weekly':
$groupBy = "CONCAT(YEAR(created_at), '-', WEEK(created_at))";
break;
case 'Monthly':
$groupBy = 'MONTH(created_at)';
break;
default:
$groupBy = 'DATE(created_at)';
}

// Sales data by Time (barangay)

$salesData = orders::selectRaw("$groupBy as period, SUM(total_price)
as total_sales")
->where('order_status', 'Delivered')
->groupBy('period')
->orderBy('period')

93
 ->get();

// Sales data by Trucks

// Get the start and end dates of the current week
$startOfWeek = Carbon::now()->startOfWeek()->format('Y-m-d H:i');
$endOfWeek = Carbon::now()->endOfWeek()->format('Y-m-d H:i');
$truckPerformance = orders::select('trucks.trucks',
DB::raw('SUM(orders.total_price) as total_sales'))
->join('trucks', 'orders.truck_id', '=', 'trucks.id')
->where('orders.order_status', 'Delivered')
->whereBetween('orders.created_at', [$startOfWeek,
$endOfWeek])
->groupBy('trucks.trucks')
->orderBy('total_sales', 'desc')
->get();

// Sales data by location (barangay)

$salesByLocation = orders::select('order_barangay',
DB::raw('SUM(total_price) as total_sales'))
->where('order_status', 'Delivered')
->groupBy('order_barangay')
->orderBy('total_sales', 'desc')
->get();

// Sales data by Week (barangay)

$startDate = now()->startOfWeek();
$endDate = now()->endOfWeek();

$weeklyData = orders::selectRaw('DAYNAME(created_at) as
day_of_week, SUM(total_price) as total_sales')
->whereBetween('created_at', [$startDate, $endDate])
->where('order_status', 'Delivered')
->groupBy('day_of_week')
->orderByRaw("FIELD(day_of_week , 'Sunday', 'Monday',
'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday')")
->get();

$daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',

'Friday', 'Saturday'];
$weeklyData = collect($daysOfWeek)->map(function ($day) use
($weeklyData) {
return [
'day_of_week' => $day,
'total_sales' => $weeklyData->firstWhere('day_of_week', $day)-
>total_sales ?? 0
];
});

// Total sales of the week

94
 $totalWeeklySales = $weeklyData->sum('total_sales');

// Total sales of the month

$beginOfMonth = Carbon::now()->startOfMonth()->format('Y-m-d H:i');
$endOfMonth = Carbon::now()->endOfMonth()->format('Y-m-d H:i');
$totalSalesThisMonth = orders::where('order_status', 'Delivered')
->whereBetween('created_at', [$beginOfMonth,
$endOfMonth])
->sum('total_price');

// Total pending orders for this day

$startOfToday = Carbon::now()->startOfDay()->format('Y-m-d H:i:s');
$endOfToday = Carbon::now()->endOfDay()->format('Y-m-d H:i:s');
$totalOrdersToConfirmToday = orders::where('order_status', 'To
Confirm')
->whereBetween('created_at', [$startOfToday,
$endOfToday])
->count();

// Total borrowed.
$totalBorrowed = customers::sum('borrowed');

return view('admin.admindashboard',
compact(
'salesData',
'truckPerformance',
'salesByLocation',
'timeFrame',
'weeklyData',
'totalWeeklySales',
'totalSalesThisMonth',
'totalOrdersToConfirmToday',
'totalBorrowed'
));
}

public function toCustomer(){

$customers = customers::where('is_active', true)->get();

$inactiveCustomers = customers::where('is_active', false)->get();

return view('admin.customers', ['customers' => $customers,

'inactiveCustomers' => $inactiveCustomers]);
}

public function toStaff(){

$staffs = addstaff::all();
return view('admin.staff', ['staffs' => $staffs]);

95
 public function toOrders(){
$orders = orders::with('customer', 'product')
->orderBy('updated_at', 'desc')
->get();
return view('admin.orders', compact('orders'));
}

public function toDeliveries(){

$orders = orders::with('customer', 'product', 'truck')
->orderBy('updated_at', 'desc')
->paginate(20);
return view('admin.deliveries', compact('orders'));
}

public function toResource(){

$trucks = trucks::all();
$products = products::all();
$borrowers = customers::where('borrowed', '>', 0)->get();
return view('admin.resource', ['trucks' => $trucks, 'products' =>
$products, 'borrowers' => $borrowers]);
}

public function toProducts(){

$products = products::all();
return view('admin.products', ['products' => $products]);

public function toTrucks(){

$trucks = trucks::all();
return view('admin.trucks', ['trucks' => $trucks]);

public function toSettings(){

$settings = Sitesetting::all();
return view('admin.settings', compact('settings'));
}

public function toAddCustomer(){

return view('admin.addcustomer');
}

public function toAddStaff(){

$trucks = trucks::all();
return view('admin.addstaff', compact('trucks'));
}

public function toAddProducts(){

96
 return view('admin.addproduct');
}

public function toAddTruck(){

return view('admin.addtruck');
}

public function toAddOrders(){

$customers = customers::all();
$trucks = trucks::all();
$products = products::all();

return view('admin.addorder', [
'customers' => $customers,
'trucks' => $trucks,
'products' => $products
]);
}

public function toTrucksOrder(){

$trucks = trucks::with('order')->get();

return view('admin.bytruckorders', compact('trucks'));

}

public function toPrintables(){

return view('admin.printreport');
}

// --------------- logout ------------------

public function logoutStaff()
{
Auth::logout();
return redirect(route('display.login'));
}

// --------------- Staff Functions ------------------

// --------------- Add a Staff ------------------

97
 function addStaff(Request $request){
$staffData = $request->validate([
'first_name'=>'required',
'last_name'=>'required',
'address'=>'required',
'contact_number'=>'required|numeric',
'role'=>'required',
'email_address'=>'required',
'password'=>'required',
'truck_id'=>'required'
]);

$staffData['password'] = Hash::make($staffData['password']);

$newStaff = addstaff::create($staffData);

return redirect(route('view.staff'))->with('success', 'Account added

successfully');
}

// --------------- Edit Staff Route ------------------

public function editStaff(addstaff $id){

$trucks = trucks::all();
return view('admin.editstaff', ['id' => $id, 'trucks'=>$trucks]);
}

// --------------- Update Staff Details ------------------

public function updateStaff(addstaff $id, Request $request){
$staffData = $request->validate([
'first_name'=>'required',
'last_name'=>'required',
'address'=>'required',
'contact_number'=>'required|numeric',
'role'=>'required',
'email_address'=>'required',
'truck_id'=>'required'
]);

$id->update($staffData);

return redirect(route('view.staff'))->with('success', 'Account updated

successfully');
}

// --------------- Update Staff Details ------------------

public function updateStaffPassword(addstaff $id, Request $request){

98
 $staffData = $request->validate([
'password'=>'required'
]);

// Hash the password only if it was entered

if (!empty($staffData['password'])) {
$staffData['password'] = Hash::make($staffData['password']);
}

$id->update($staffData);

return redirect(route('view.staff'))->with('success', 'Account updated

successfully');
}

// --------------- Delete ------------------

public function deleteStaff(addstaff $id){

// Prevent self-deletion
if (auth()->id() == $id->id) {
return redirect()->back()->withErrors(['error' => "Cannot delete
currently logged in account"]);
}

$id->delete();
return redirect(route('view.staff'))->with('success', 'Account deleted
successfully');
}

// --------------- Customer Functions ------------------

// --------------- Add Customer ------------------

function addCustomer(Request $request){
$customerData = $request->validate([
'customer_name'=>'required',
'customer_purok'=>'required',
'customer_barangay'=>'required',
'customer_city'=>'required',
'customer_phonenum'=>'required|numeric',
'customer_email'=>'required',
'customer_password'=>'required',
]);

$customerData['customer_password'] =
Hash::make($customerData['customer_password']);

99
 $newCustomer = customers::create($customerData);

if ($newCustomer) {
// Create an address entry using the customer's information
Address::create([
'customer_id' => $newCustomer->customer_id,
'fullname' => $newCustomer->customer_name,
'purok' => $newCustomer->customer_purok,
'barangay' => $newCustomer->customer_barangay,
'city' => $newCustomer->customer_city,
'phonenum' => $newCustomer->customer_phonenum,
]);
}

return redirect(route('view.customers'))->with('success', 'Customer added

successfully');
}

// --------------- Edit Customer Route ------------------

public function editCustomer(customers $customer_id){

return view('admin.editcustomer', ['customer_id' => $customer_id]);

}

// --------------- Update Customer Information ------------------

public function updateCustomer(customers $customer_id, Request
$request){
$customerData = $request->validate([
'customer_name'=>'required',
'customer_purok'=>'required',
'customer_barangay'=>'required',
'customer_city'=>'required',
'customer_phonenum'=>'required|numeric',
'is_active'=>'required|boolean',
'returned_gallons'=>'nullable|numeric',
'customer_email'=>'required'

]);

$currentBorrowed = $customer_id->borrowed;

$updatedBorrowed = max(0, $currentBorrowed -

$customerData['returned_gallons']);

$customer_id->customer_name = $customerData['customer_name'];
$customer_id->customer_purok = $customerData['customer_purok'];

100
 $customer_id->customer_barangay =
$customerData['customer_barangay'];
$customer_id->customer_city = $customerData['customer_city'];
$customer_id->borrowed = $updatedBorrowed;
$customer_id->customer_phonenum =
$customerData['customer_phonenum'];
$customer_id->is_active = $customerData['is_active'];
$customer_id->customer_email = $customerData['customer_email'];
$customer_id->update();

return redirect(route('view.customers'))->with('success', 'Customer

updated successfully');
}

// --------------- Delete Customer ------------------

public function deleteCustomer(customers $customer_id){

$orderCount = $customer_id->order()->count();

if ($orderCount > 0) {
return redirect()->back()->with('warning', 'This customer has an order
and cannot be deleted.');
}

$customer_id->delete();
return redirect(route('view.customers'))->with('success', 'Customer
deleted successfully');
}

public function updateCustomerStatus(Request $request){

$customer = customers::find($request->id);
if ($customer) {
$customer->is_active = $request->status;
$customer->save();
return response()->json(['success' => 'Status updated successfully.']);
}

return response()->json(['error' => 'Customer not found.'], 404);

}

// --------------- Products Functions ------------------

101
 // --------------- Add a Product ------------------
function addProduct(Request $request){
$productData = $request->validate([
'product_name'=>'required',
'product_price'=>'required|numeric',
'bundle_quantity' => 'nullable|numeric',
'bundle_price' => 'nullable|numeric'
]);

$newProduct = products::create($productData);

return redirect(route('view.resource'))->with('success', 'Products added

successfully');
}

// --------------- Edit Product Route ------------------

public function editProduct(products $product_id){

$orderCount = orders::whereHas('product', function ($query) use

($product_id) {
$query->where('orders_products.product_id', $product_id-
>product_id);
})->count();

// if ($orderCount > 0) {
// return redirect()->back()->with('warning', 'This product is part of an
order and cannot be edited.');
// }
return view('admin.editproduct', ['product_id' => $product_id]);
}

// --------------- Update Product Information ------------------

public function updateProduct(products $product_id, Request $request){
$productData = $request->validate([
'product_price'=>'required|numeric',
'bundle_price'=>'nullable|numeric'
]);

$product_id->update($productData);

return redirect(route('view.resource'))->with('success', 'Products updated

successfully');
}

// --------------- Delete Product ------------------

public function deleteProduct(products $product_id){

102
 // Check if the product is part of any orders
$orderCount = orders::whereHas('product', function ($query) use
($product_id) {
$query->where('orders_products.product_id', $product_id-
>product_id);
})->count();

if ($orderCount > 0) {
return redirect()->back()->with('warning', 'This product is part of an
order and cannot be deleted.');
}

$product_id->delete();
return redirect(route('view.resource'))->with('success', 'Products deleted
successfully');
}

// --------------- Trucks Functions ------------------

// --------------- Add a Truck ------------------

function addTruck(Request $request){
$truckData = $request->validate([
'trucks'=>'required'
]);

$newTruck = trucks::create($truckData);

return redirect(route('view.resource'))->with('success', 'Truck added

successfully');
}

// --------------- Edit Truck Route ------------------

public function editTruck(trucks $id){

return view('admin.edittruck', ['id' => $id]);
}

// --------------- Update Truck Information ------------------

public function updateTruck(trucks $id, Request $request){
$truckData = $request->validate([
'trucks'=>'required'
]);

$id->update($truckData);

103
 return redirect(route('view.resource'))->with('success', 'Truck updated
successfully');
}

// --------------- Delete Truck ------------------

public function deleteTruck(trucks $id){

$orderCount = $id->order()->count();

if ($orderCount > 0) {
return redirect()->back()->with('warning', 'This truck has an order
and cannot be deleted.');
}
$id->delete();
return redirect(route('view.resource'))->with('success', 'Truck deleted
successfully');
}

// --------------- Orders Functions ------------------

// --------------- add order ------------------

public function addOrder(Request $request){
$validation = $request->validate([
'customer_id'=>'required',
'order_cname'=>'required',
'order_purok'=>'required',
'order_barangay'=>'required',
'order_city'=>'required',
'order_pnumber'=>'required',
'truck_id'=>'required',
'total_price'=>'required'
]);

$orderStatus = 'For Delivery';

$total_price = 0;
$total_quantity = 0;
$selected_products = $request->input('selected_products', []);
foreach ($selected_products as $productId => $quantity) {
$quantityForm = $request->input('quantities.' . $productId, 0);
$product = products::find($productId);
$total_price += $product->product_price * $quantityForm;
$total_quantity += $quantityForm;
}

// Process bundle products

104
 $selected_bundle_products = $request-
>input('selected_bundle_products', []);
foreach ($selected_bundle_products as $productId => $quantity) {
$quantityForm = $request->input('bundle_quantities.' . $productId,
0);
$product = products::find($productId);

// Check if product exists and is a bundle

if ($product && !is_null($product->bundle_quantity) &&
!is_null($product->bundle_price)) {
$total_price += $product->bundle_price * $quantityForm;
$bundleQuantity = $quantityForm * $product->bundle_quantity;
$total_quantity += $bundleQuantity;
}

// Attach the product to the order

$order = new orders;

$order->customer_id = $request->input('customer_id');
$order->order_cname = $request->input('order_cname');
$order->order_purok = $request->input('order_purok');
$order->order_barangay = $request->input('order_barangay');
$order->order_city = $request->input('order_city');
$order->order_pnumber = $request->input('order_pnumber');
$order->truck_id = $request->input('truck_id');
$order->total_quantity = $total_quantity;
$order->total_price = $total_price;
$order->order_status = $orderStatus;
$order->save();

foreach ($selected_products as $productId => $quantity) {

$quantityForm = $request->input('quantities.' . $productId, 0);
$product = products::find($productId);
$productPrice = $product->product_price;
$order->product()->attach($productId, ['price' => $productPrice,
'quantity' => $quantityForm]);

foreach ($selected_bundle_products as $productId => $quantity) {

$quantityForm = $request->input('bundle_quantities.' . $productId,
0);
$product = products::find($productId);
$order->product()->attach($productId, ['price' => $product-
>bundle_price, 'quantity' => $quantityForm, 'is_bundle' => true]);

105
 }

// Update Customer's borrowed column

$customer = customers::find($request->input('customer_id')); //
Ensure your model name is correct
$customer->borrowed += $total_quantity;
$customer->save();

return redirect(route('view.orders'))->with('success', 'Order added

successfully');
}

// --------------- view order ------------------

public function viewOrder(orders $id){
$id->load('customer', 'product');
$trucks = trucks::all();
return view('admin.vieworder', compact('id', 'trucks'));
}

// --------------- Update Order Information ------------------

public function updateOrder(orders $id, Request $request){
$orderData = $request->validate([
'truck_id'=>'nullable',
'returned'=>'nullable',
'reason'=>'nullable',
'order_status'=>'nullable'
]);

if ($request->input('order_status') == 'Delivered') {

$orderData['reason'] = null;

// Get the customer associated with the order

$customer = customers::find($id->customer_id);

// Subtract the returned quantity from the customer's borrowed

count
$customer->borrowed = max($customer->borrowed - $request-
>returned, 0);

// Save the customer

$customer->save();
}

106
 $id->update($orderData);

return redirect(route('view.orders'))->with('success', 'Order updated

successfully');
}

public function selectStatus(Request $request){

$ordersQuery = orders::query();

// Filter based on status if provided

if ($request->has('status_filter') && $request->status_filter != '') {
$ordersQuery->where('order_status', str_replace('_', ' ', $request-
>status_filter));
}

if ($request->filled('date_filter')) {
$dateFilter = $request->date_filter;
switch ($dateFilter) {
case 'today':
$ordersQuery->whereDate('created_at', Carbon::today());
break;
case 'yesterday':
$ordersQuery->whereDate('created_at', Carbon::yesterday());
break;
case 'this_week':
$ordersQuery->whereBetween('created_at', [Carbon::now()-
>startOfWeek(), Carbon::now()->endOfWeek()]);
break;
}
}

$orders = $ordersQuery
->orderBy('updated_at', 'desc')
->get();

return view('admin.orders', compact('orders'));

}

// --------------- Delete order ------------------

public function deleteOrder(orders $id){
$id->delete();
return redirect(route('view.orders'))->with('success', 'Order deleted
successfully');
}

107
// --------------- Deliveries Functions ------------------

// --------------- search orders ------------------

public function searchDeliveries(Request $request) {
$query = strtolower($request->input('search')); // Convert the search
query to lowercase
$orders = orders::with('customer')
->whereHas('customer', function($q) use ($query) {
$q->whereRaw('LOWER(customer_name) LIKE ?', ['%' .
$query . '%']);
})
->paginate(20);

return view('admin.pages.partialsdeliveries_table', compact('orders'))-

>render();
}

// --------------- update deliveries ------------------

public function updateDeliveries(orders $id){
$id->load('customer', 'product');
return view('admin.updatedeliveries', compact('id'));
}

// --------------- save updated deliveries ------------------

public function UpdatedDelivery(orders $id, Request $request){
$orderData = $request->validate([
'returned'=>'nullable',
'order_status'=>'nullable'
]);

$id->update($orderData);

if ($request->input('order_status') == 'Delivered') {
// Get the customer associated with the order
$customer = customers::find($id->customer_id);

// Subtract the returned quantity from the customer's borrowed

count
$customer->borrowed = max($customer->borrowed - $id->returned,
0);

// Save the customer

$customer->save();
}

return redirect(route('view.deliveries'))->with('success', 'Order updated

successfully');
}

108
 // --------------- live update deliveries ------------------
public function toDeliveriesLive(){
$orders = orders::with('customer', 'product', 'truck')
->orderBy('updated_at', 'desc')
->paginate(20);
return view('admin.pages.partialsdeliveries_table', compact('orders'));
}

// --------------- Printable Functions ------------------

public function getMonthlySales(Request $request) {

$validation = $request->validate([
'start_date'=>'required',
'end_date'=>'required'
]);

$startDate = $request->start_date;
$endDate = $request->end_date;

$orders = orders::with('product')
->where('order_status', 'Delivered')
->whereBetween('created_at', [$startDate, $endDate])
->get();

// Total Sales
$orderstoSum = orders::where('order_status', 'Delivered')
->whereBetween('created_at', [$startDate, $endDate])
->get();
$totalSales = $orderstoSum->sum('total_price');

//Sales Per Truck

$salesPerTruck = orders::where('order_status', 'Delivered')
->whereBetween('orders.created_at', [$startDate,
$endDate])
->join('trucks', 'orders.truck_id', '=', 'trucks.id')
->select('trucks.id as truck_id', 'trucks.trucks as truck_name',
DB::raw('SUM(orders.total_price) as total_sales'))
->groupBy('trucks.id', 'trucks.trucks')
->orderBy('total_sales', 'desc')
->get();

//Sales Per Day

$salesPerDay = orders::where('order_status', 'Delivered')
->whereBetween('created_at', [$startDate, $endDate])

109
 ->select(DB::raw('DATE(created_at) as order_date'),
DB::raw('SUM(total_price) as daily_sales'))
->groupBy('order_date')
->orderBy('order_date', 'asc')
->get();

// Get the total sales per product

$salesPerProduct = DB::table('orders_products')
->join('orders', 'orders.id', '=', 'orders_products.order_id')
->join('products', 'products.product_id', '=',
'orders_products.product_id')
->where('orders.order_status', 'Delivered')
->whereBetween('orders.created_at', [$startDate,
$endDate])
->select(
'products.product_name',
DB::raw('SUM(orders_products.quantity) as
total_quantity'),
DB::raw('SUM(orders_products.price *
orders_products.quantity) as total_sales'),
'orders_products.is_bundle'
)
->groupBy('products.product_name',
'orders_products.is_bundle')
->get();

// Prepare chart data

$labels = $salesPerProduct->pluck('product_name')->unique()-
>values()->all();;
$dataBundles = array_fill_keys($labels, 0);
$dataSingles = array_fill_keys($labels, 0);

foreach ($salesPerProduct as $sale) {

if ($sale->is_bundle) {
// Add to the total sales for bundles
$dataBundles[$sale->product_name] += $sale->total_sales;
} else {
// Add to the total sales for singles
$dataSingles[$sale->product_name] += $sale->total_sales;
}
}

$dataBundles = array_values($dataBundles);
$dataSingles = array_values($dataSingles);

110
 $totalNumOrders = orders::whereBetween('created_at',[$startDate,
$endDate])
->where('order_status', 'Delivered')
->count();

$totalreturnedValue = orders::whereBetween('created_at',[$startDate,
$endDate])
->where('order_status', 'Delivered')
->sum('returned');

return view('admin.printreport',
compact(
'startDate',
'endDate',
'orders',
'totalSales',
'salesPerTruck',
'salesPerDay',
'labels',
'salesPerProduct',
'dataBundles',
'dataSingles',
'totalNumOrders',
'totalreturnedValue'
));

// --------------- Settings Functions ------------------

public function updateSiteSettings(Sitesetting $sitesettings, Request
$request){
$siteData = $request->validate([
'slogan'=>'required',
'description'=>'required',
'fb_account'=>'required',
'phone_number'=>'required|numeric',
'email_account'=>'required'
]);

$sitesettings->update($siteData);

return redirect(route('view.settings'))->with('success', 'Account updated

successfully');
}

// --------------- Customer-Infos Functions ------------------

111
public function toCustomerinfos($customer_id){

$chistories = orders::where('customer_id', $customer_id)

->where('order_status', 'Delivered')
->get();

$customer = customers::with('addresses')->findorFail($customer_id);
return view('admin.customerinfos', compact('customer', 'chistories'));
}

public function addAddresses(Request $request, customers $customer){

$validation = $request->validate([
'Fullname'=>'required',
'Purok'=>'required',
'Barangay'=>'required',
'City'=>'required',
'Phonenumber'=>'required'
]);

$addressData = new Address;

$addressData->customer_id = $customer->customer_id;
$addressData->fullname = $request->input('Fullname');
$addressData->purok = $request->input('Purok');
$addressData->barangay = $request->input('Barangay');
$addressData->city = $request->input('City');
$addressData->phonenum = $request->input('Phonenumber');
$addressData->save();

return redirect(route('view.customerinfos', ['customer' => $customer-

>customer_id]))->with('success', 'Order added successfully');

public function getAddressesForCustomer($customerId)

{
$addresses = Address::where('customer_id', $customerId)->get();
return response()->json($addresses);
}

public function addAddressMethod(Request $request)

{
// Validate the incoming request data
$validatedData = $request->validate([
'Fullname' => 'required',
'Purok' => 'required',
'Barangay' => 'required',
'City' => 'required',
'Phonenumber' => 'required'

112
 ]);
// Create a new address
$address = new Address();
$address->fullname = $validatedData['Fullname'];
$address->purok = $validatedData['Purok'];
$address->barangay = $validatedData['Barangay'];
$address->city = $validatedData['City'];
$address->phonenum = $validatedData['Phonenumber'];
// Assuming you need to attach this address to a customer
// You should pass the customer ID to this method
$address->customer_id = $request->customer_id;
$address->save();
// Return a JSON response
return response()->json([
'success' => true,
'message' => 'Address added successfully.',
'address' => $address // Optionally send back the added address
]);
}

113