Web Application Project

GeePab’s Pet Stop

In Partial Fulfillment of the Requirements for the Course

Web Application Development
(ITL206)

Submitted by
Idrian Ilgin H. Libo-on
Clyde Amar

Submitted to
Rics Rojas, MIT
Asst. Professor

Submitted on
1/04/2023
I. Introduction

Background of the study

During the pandemic, Mr. GLENN I. PABUAYA returned to his hobby of fishkeeping.
After having collected several varieties of fish, supplies, and accessories, he thought of
turning it into an income-generating sideline. And so, GeePab was established.
GeePab is a local pet supply store supplier, especially for the needs of ornamental fish
owners/breeders. They are located in Prk. Mainuswagon (sawmill road near brgy.
hall/public market) Brgy. Bata, Bacolod City, Negros Occidental

Mission-vision:
GeePab's Pet Stop is dedicated to providing high quality yet pet&pocket friendly
products.
Products/services offered:

They used to sell live fish and birds but now they mainly sell feeds for fish, fish vitamins,
medicines and enhancers, aquarium accessories, hamster cages, accessories, bird cages,
and accessories.
II. Planning

The computing environment for this web application includes SQL for the database
management system, HTML for the website's structure, CSS for styling the website, and
JavaScript for adding interactivity to the website. A sales inventory web application that
stores the sales and inventories of products as a stock supply.The purpose of this
application is to help the pet store manage their sales. By having a record of each sale, the
pet store can track which products are selling well and which ones are not. This
information can be used to make decisions about which products to order more of and
which ones to discontinue.

Gantt Chart
III. Analysis

The user can view the Amounts of Price, Product Types, Orders and the Total Price of
Sales. It will be useful for managing sales of products in a pet store and the list of their
customers and what they usually order at the store. The application allows the pet store to
create new sales orders by entering the client name, product name, and amount then the
amount of price will appear and the total price will show up. The price of the sale is
automatically calculated based on the product price and amount entered.

This will also serve as a means to show and reflect the preferences of the majority of the
clients who buy from them. Through that they will be able to know and acknowledge the
products to restock more often and not waste their investments in re-stocking rarely
bought products.
 ERD Representation

IV. Design and Development

Design and Development

The GeePab Pet Stop Inventory and Order System Web Application has been
designed and developed to cater to the specific requirements of the pet shop owner. The
application consists of various pages and functionalities to facilitate efficient inventory
management and order processing. The objective of this project was to create a user-
friendly interface that aligns with the roles and responsibilities of authorized users,
providing them with seamless access to the required features.

Key Features:

1. Dashboard: The main page of the application displays essential information such
as the Amount of Products, Amount of Product Types, Amount of Orders, and the
 Total Price of Sales. This allows users to have a quick overview of the system's
performance and key metrics.
2. User Authentication: The log-in page ensures secure access to the application.
Users are required to log in with their credentials to access their respective
dashboards and perform authorized actions.
3. User Roles and Permissions: The system supports different user roles, including
supervisors, managers, and staff members. Each role has specific permissions and
access levels within the application, ensuring that users can only perform actions
relevant to their roles.
4. Employee and Product Management: The Manager role has the ability to add,
delete, and edit employee and product information. This functionality enables
efficient management of employee records and the product catalog.
5. Inventory Control: The system provides features for managing the inventory,
including tracking product availability, stock levels, and handling stock
replenishment. This ensures that supervisors and managers have real-time
visibility into the current inventory status.
6. Order Management: The application facilitates seamless order processing,
allowing staff members to create, update, and track orders. It provides a user-
friendly interface for managing order details, customer information, and order
status.
7. Reporting: The system includes reporting capabilities to generate comprehensive
reports on various aspects, such as sales, inventory, and order history. These
reports provide valuable insights for decision-making and performance analysis.
8. Password Verification: To ensure the security of user accounts, the application
incorporates password verification. When users create an account or update their
password, the system enforces password requirements such as minimum length,
inclusion of alphanumeric characters, and special characters.
9. Encryption: The system incorporates encryption algorithms and techniques to
secure sensitive data, such as passwords, customer information, and financial
records. Encryption ensures that data is encrypted before storage or transmission,
providing an additional layer of protection against unauthorized access and data
breaches.

V. Testing

Test Descriptio Pass/

Case n Expected Response Actual Response Fail Comments

TC01 User Successful login Successful login Pass User was successfully
 redirects to
Login redirects to homepage homepage logged in

Successful logout
User Successful logout redirects to login User was successfully
TC02 Logout redirects to login page page Pass logged out

Settings module was

Settings Shows user module and Shows user module successfully
TC03 Module product module and product module Pass displayed

The list of System

Users, List of Users,
Shows System and New User
Shows List of System Users, List of Users navigation was
Users Users, List of Users and and New User successfully
TC04 Module New User navigation navigation Pass displayed

Users' list with Name,

Access Level, and
Shows existing Users' Shows existing Email was
Name, Access Level, Users' Name, Access successfully
TC05 Users List and Email Level, and Email Pass displayed

Required fields for

Shows Required creating New Users
Shows Required field field for creating were successfully
TC06 New User for creating New Users New Users Pass displayed

New user was

successfully created
Create Creates new user, insert Creates new user, and added to the user
TC07 New User to user list insert to user list Pass list

Unable to create user if

email field is not valid Unable to create Email validation was
Email eg. does not end in user if email field is successfully
TC08 Validation @gmail etc. not valid Pass performed
 Unable to create user if
password does not
contain at least one Unable to create
capital letter, one user if password Password validation
Password number, and one special does not meet was successfully
TC09 Validation character criteria Pass performed

Displays the current user User profile User profile was

View User information, access information successfully
TC10 Profile level, and account status displayed Pass displayed

User information User information or

Update Change user information and access level access level was
TC11 User or access level updated Pass successfully updated

User email
Change successfully User email was
TC12 Email Change user email changed Pass successfully changed

User password
Change successfully User password was
TC13 Password Change user password changed Pass successfully changed

Disables account which

makes user of the Account
Disable account unable to log in successfully Account was
TC14 Account with that account disabled Pass successfully disabled

Relevant search
User results were
Search Relevant search successfully
TC15 Function Relevant search results results displayed Pass displayed

List of products, new

List of products, product, and product
Shows list of products, new product and type navigation were
Products new product and product product type successfully
TC16 Module type navigation displayed Pass displayed
 Shows existing List of products, new
products’ details- product, and product
product description, type navigation were
Product product type and Shows existing successfully
TC17 List product price. products’ details Pass displayed

View Successfully Product details were

Product Displays current product displays current successfully
TC18 Details details product details Pass displayed

Change product
Update Change product details- details-name,
Product name, description, description, product Product details were
TC19 Details product type, price type, and price Pass successfully updated

New product was

Create Creates new successfully created
New Creates new product, product, inserts to and added to the
TC20 Product inserts to product list product list. Pass product list

Creates new product New product type

type, adds to product Creates new product was successfully
Create selection in creating new type, adds to product created and added to
TC21 New Type products. selection. Pass the selection

Order module was

Order Displays the field to Displays the field to successfully
TC22 Module create an order create an order Pass displayed

New order was

Creates a new order successfully created
Create Creates a new order and and inserts it to the and added to the sales
TC23 Order inserts it to the sales list. sales list Pass list

Displays sales list Sales list was

Displays sales list and a and a button to edit a successfully
TC24 Sales List button to edit a sale sale Pass displayed
 Able to change sale
Able to change sale information - Client
information - Client name, Product, Sale information was
TC25 Edit Sale name, Product, Amount Amount Pass successfully updated

Displays Sales and

Displays Sales and Orders Reports Reports were
Orders Reports starting starting from successfully
TC26 Reports from January to June. January to June Pass displayed

Displays the records

Displays the records of - of - amount of
amount of products products available,
available, and amount of amount of product Records on the
product type, amount of type, amount of homepage were
Main/ orders created, and total orders created, and successfully
TC27 Homepage price of sales. total price of sales Pass displayed

Updating or creating Updating or creating User password was

Password new user encrypt user new user encrypt successfully
TC28 Encryption password user password Pass encrypted

User
Access User
Test Access
Case Levels Admin Supervisor Staff

01 Login YES Yes Yes

02 Logout YES YES YES

 View
03 Profile YES YES NO

Create
04 new user YES YES NO

Disable
05 user YES NO NO

Change
User
06 Details YES NO NO

Change
07 Email YES NO NO

Change
08 Password YES NO NO

View
09 Product YES YES YES

Create
New
10 Product YES YES YES

Create
11 New YES YES YES
Product
 Type

Change
Product
12 Details YES YES YES

Create
13 Order YES YES YES

View
14 Sales List YES YES YES

Edit Sales
15 List YES YES YES

View
16 Reports YES YES YES

View
Homepage
17 Reports YES YES YES
VI. Implementation and Maintenance

A. Implementation

The implementation phase involves the deployment and setup of the GeePab Pet Stop Inventory
and Order System Web Application. The following steps outline the implementation process:

1. Local Environment Setup:

a. Install XAMPP, a local development environment that includes Apache web
server, MySQL database, and PHP.
b. Configure XAMPP to meet the system requirements and ensure the necessary
modules (e.g., PHP extensions) are enabled.
2. Database Setup:
a. Launch the phpMyAdmin interface provided by XAMPP to manage the MySQL
database.
b. Create a new database specifically for the application.
c. Set up the required database tables and relationships based on the system's design
and data schema.
3. Application Deployment:
a. Transfer the application files to the XAMPP server.
 b. Place the files in the appropriate directory (e.g., htdocs) based on XAMPP's
configuration.
c. Ensure that the file and folder permissions are correctly set to allow the
application to be accessed.
4. Application Deployment:
d. Transfer the application files to the XAMPP server.
e. Place the files in the appropriate directory (e.g., htdocs) based on XAMPP's
configuration.
f. Ensure that the file and folder permissions are correctly set to allow the
application to be accessed.

g. Update the application's configuration files with the appropriate database

connection details and server-specific settings.

h. Customize the application's branding, including logos, colors, and other visual
elements, to align with the organization's identity.

B. Maintenance

To ensure the optimal performance and longevity of the GeePab Pet Stop Inventory and
Order System Web Application, a comprehensive maintenance plan should be
implemented. The maintenance activities include:

1. Security Updates:

a. Regularly update XAMPP, including its components (Apache, MySQL, PHP), to

benefit from security patches and updates provided by the XAMPP project.

b. Stay updated with security advisories and patches released by the XAMPP project
and apply them promptly.

2. Bug Fixes and Enhancements:

a. Continuously monitor the application's usage and user feedback to identify and
address any reported bugs or issues.
b. Implement feature enhancements and improvements based on user requirements
and evolving business needs.

3. Backup and Disaster Recovery:

 a. Implement a regular backup strategy to ensure data integrity and availability.

b. Create backups of the application files and databases, and store them securely in a
separate location or using backup solutions.

4. Performance Optimization:

a. Monitor the application's performance using XAMPP's built-in tools or third-party

performance monitoring tools.

b. Optimize the database queries, caching mechanisms, and code structure to

improve the application's speed and efficiency.

5. Content Updates:

a. Assign responsible personnel or a content management team to regularly update

and maintain the application's content, including employee and product
information, pricing, and other relevant data.

b. Establish content update processes and guidelines to ensure accurate and up-to-
date information.

By following a well-defined implementation plan and implementing, the GeePab Pet Stop
Inventory and Order System Web Application will remain secure, up-to-date, and optimized,
providing reliable functionality and meeting the needs of supervisors, managers, and staff.

VII. Conclusion and Recommendation

A. Conclusion

The development of the GeePab Pet Stop Inventory and Order System Web
Application has successfully addressed the requirements and objectives of creating an
efficient and user-friendly system for inventory management and order processing.
Throughout the design and development process, key features such as user
authentication, employee and product management, inventory control, order
management, password verification, and daily/weekly reporting have been implemented.

The system provides supervisors, managers, and staff with inventory tracking,
simplifies order processing, and generates insightful reports. By leveraging the
functionalities of XAMPP, including the Apache web server, MySQL database, and PHP
scripting language, the application is capable of handling data securely and efficiently.
B. Recommendation

Based on the successful implementation of the GeePab Pet Stop Inventory and
Order System Web Application, the following recommendations are provided:

1. Daily/Weekly Reports: Instead of relying solely on overall sales reports, consider

implementing daily or weekly reports to provide more granular insights into sales
performance. These reports can help identify trends, track progress, and make timely
decisions based on up-to-date sales data. The reports can include information such as
daily/weekly sales totals, top-selling products, and sales by customer or product category.

2. Customizable Reports: Allow users to customize and generate reports based on specific
criteria and parameters. This flexibility enables users to extract the information most
relevant to their needs and facilitates in-depth analysis of sales data. Consider
implementing filters, sorting options, and customizable report templates to enhance the
reporting capabilities of the application.

3. Automated Report Generation: Automate the process of generating daily or weekly

reports to save time and improve efficiency. Implement scheduled tasks or notifications
that automatically generate and deliver reports to designated recipients at specified
intervals. This feature ensures that key stakeholders receive timely and accurate sales
information without manual intervention.

4. Data Visualization: Enhance the reporting capabilities of the application by

incorporating data visualization techniques. Utilize charts, graphs, and other visual
representations to present sales data in a more intuitive and easily understandable format.
Data visualization can help identify patterns, spot trends, and communicate information
effectively to stakeholders.

5. Regular System Updates and Maintenance: Continuously update and maintain the web
application to ensure optimal performance, security, and compatibility with the
underlying XAMPP infrastructure. Keep the software components, including the web
server, database management system, and scripting language, up to date to leverage the
latest features and security patches.
VIII. References

Hasan, Ibrahimy, M. I., Motakabber, S. M. A., Ferdaus, M. M., Khan, M. N. H., &
Mostafa, M. G. (2013). Development of a Web-based financial application System. IOP
Conference Series. Materials Science and Engineering, 53(1), 12080–12088.
https://doi.org/10.1088/1757-899X/53/1/012080

Coffee Shop Cashiering System (PHP OOP) - Free Source Code. (n.d.). Source Code
Free. Retrieved from https://www.sourcecodester.com/php/15289/coffee-shop-
cashiering-system-phpoop-free-source-code.html

Simple Inventory Management System (PHP OOP) - Free Source Code. (n.d.). Source
Code Free. Retrieved from https://www.sourcecodester.com/php/15419/simple-
inventory-management-system-phpoop-free-source-code.html