INTRODUCTION

Introduction of the system

Welcome to CafeMate: Smart Cafe Control, a system designed to help cafe owners
manage their business easily. Our system makes it simple to handle orders, track inventory, and
provide better service to customers.

Running a cafe can be busy and challenging. With CafeMate, cafe owners can save time,
reduce mistakes, and keep everything organized. The system allows staff to take orders quickly,
update menu items, and check stock levels without hassle. Customers can also enjoy a smoother
and faster experience when ordering their favorite drinks and food.

With modern technology, CafeMate makes cafe management smarter and more efficient.
Whether you have a small coffee shop or a big cafe, our system is built to improve your daily
operations and boost customer satisfaction.

Objectives of the system

The objectives of this system are:

• To ensure smooth and fast order processing through a centralized POS system.
• To minimize mistakes in order handling, billing, and stock updates.
• To allow easy updating of menu items, prices, and availability.
• To ensure data security and prevent unauthorized access.
• To ensure secure data storage with backup options to prevent data loss.

Motivation of the System

Managing a cafe involves handling multiple tasks, such as processing orders, tracking
inventory, and managing sales. Without a proper system, these tasks can become time-
consuming, prone to errors, and difficult to manage efficiently.
The motivation behind developing CafeMate is to provide cafe owners with a smart
POS system that simplifies business operations. By having an admin-only control page, cafe
owners can manage orders, update menu items, track stock levels, and monitor sales from a
single platform.

1
 With the increasing demand for digital solutions in the food industry, CafeMate aims to
bring accuracy, efficiency, and organization to cafe management. This system helps reduce
manual errors, save time, and improve decision-making with real-time reports.
By automating daily operations, CafeMate allows cafe owners to focus more on
customer satisfaction and business growth rather than operational challenges. It is designed to
make running a cafe smoother, faster, and more profitable.

2
 SYSTEM DESIGN

Overview of the Rangoon Sneaker Hug System

In the Sneaker Hug Website, the admin can view member customers list and normal
customers list. Users need to login with email and password. Users can view the home page, all
products page, contact us page, invoice page and, can add to cart process, view cart process and
view product details process. The admin can register and login. The admin can view the admin
home page. Furthermore, the admin can view, add, update, and delete the brand and category and
product. The admin can also view customers list.

Figure (1) Use Case Diagram of the System

3
Use Case Diagram of the User

Firstly, in the use case for users where the customer can access the home page, select a
category, add and delete items to the cart, view the shopping cart, and decide to either continue
shopping or check out. Customers require to go through the user authentication form (login)
which would only allow them to place an order for the items they selected.

Figure (2) Use Case Diagram of the User

Use Case Diagram of the Admin

The admin must login with email and password correctly. And then, the admin can view
the user list and visit their website. The admin can also update product, brand and category and
manage the order lists.

4
 Figure (3) Use Case Diagram of the admin

Class Diagram of the System

The class diagram represents the important classes implemented for the system with the
attributes and operation. The diagram also shows each class is associated and dependent with
other classes in the system. Each activity is represented as a class and, the attributes and
functions associated with the class are represented within.

5
 Figure (4) Class diagram of the System

Entity Relationship (ER) Diagram of the System

The Sneaker Hub system’s entity-relationship diagram shows all of the important
database tables. The ER diagram of the system shows the system entity and the supposed
database design of the project. This conveys the data that would be presented in the Fashion
Collect system, its characteristics and its connection with other data (entity).

6
 Figure (5) Entity Relationship diagram of the System

Software Requirements

Operating system - at least Windows 7 is used as the operating system as it is stable and
supports more features and is more user friendly. Database - MYSQL is used as database as it is
easy to maintain and retrieve records by simple queries and which are easy to understand and
easy to write. The development tools and programming language - HTML is used to write the
whole code and develop webpages with CSS, JavaScript for styling work and Laravel for sever
side scripting.

Hardware Requirements

The requirement is at least one laptop and Intel core i3 2nd generation is used as a
processor because it is faster than other processors. By using this processor, this system can keep
on developing the project without any worries. Run 2 GB is used as it will provide fast and
writing capabilities and will in turn support in processing.

7
 SYSTEM IMPLEMENTATION

User Home Page

When starting Fashion Collect System, the User Home Page will appear as shown in
figure (6). From this home page, users can view latest products and best-seller products. Users
can also view many brands which are available from this store.

Figure (6) User Home Page

User Register Page

After users can view fashion information, users can also order. Firstly, users can register.
When users click the ‘Register’ menu, the User Register Page will appear. Users will enter name,
email, phone number, address, city and password as shown in figure (7).

8
 Figure (7) User Register Page

User Login Page

If users click the ‘Login’ menu, the ‘User Login Page’ will appear. Users must enter with
their email and password in the text boxes as shown in figure (8).

Figure (8) Login Page

9
All Product Page

If users click the ‘All Product’ menu, ‘All Product Page’ will appear as shown in figure
(9). Users can view products with list view and grid view and search the product with name,
category, and brand and refine search.

F
igure (9) All Products Page

Contact Us Page

If users click the ‘Contact us’ menu, the ‘Contact Us Page’ will appear. Users can view
store name, phone number to contact and know office location, email address as shown in figure
(10).

10
 Figure (10) Contact Us Page

Last Invoice Page

If users click the ‘Last Invoice’ menu, the ‘Last Invoice Page’ will appear. If users have
no account and not buy products, they will not see the voucher in the Last Invoice Page as shown
in figure (11).

Figure (11) Last Invoice Page for Guest User

If users have an account and buy the product, they can view the voucher in the Last
Invoice Page as shown in figure (12).

11
 Figure (12) Last Invoice Page for Member User

4.1.6 Product Details Page

If users click the product image or product name, the Product Details Page will appear.
Users can see the product details as shown in figure (4.8).

Figure (4.8) Product Detail Page

4.1.7 Search Page

Users can search with product name, category and brand as shown in figure (4.9).

12
 Figure (4.9) Search Page

4.1.8 Add to Cart Page

Users can add many products into the cart and also view the added products. They can
remove the product if they don't want to buy it as shown in figure (4.10).

Figure (4.10) Add to Cart Page

13
4.1.9 Cart View Page

If users click the ‘View Cart’ button, Cart View Page will appear shown in figure (4.11).
Users can increase or decrease the quantity of products and can also remove the products if they
don’t want to buy it. If users want to buy other products, they can do shopping by clicking the
‘Continue Shopping’ button. After all, users can click the checkout button.

Figure (4.11) Cart View Page

4.1.10 Checkout Page

If users click the ‘Checkout’ button, they can view the confirm order process as shown in
figure (4.12). Before users do the confirm order process, they need to login if their account
already exists. If users do not have an account, they need to register with the user's information.
And then, users can choose the delivery address that they want to send. After all, users can
continue to confirm the order process and view the invoice page.

14
 Figure (4.12) Checkout Page
If users click the ‘Confirm Order’ button, the Invoice Page will appear as shown in figure
(4.13).

Figure (4.13) Invoice Page

4.2 Admin Login Page

The following figure (4.14) is the login page of the system. From this page, admin can
enter into the system. The admin must enter with email and password into the text boxes as
shown in figure.

15
 Figure (4.14) Admin Login Form

4.2.1 Admin Dashboard

If the admin’s email and password in ‘Admin Login Page’ are incorrect, an error message
alert will appear. If the admin’s email and password are correct, Admin dashboard will appear as
shown in figure (4.15).

Figure (4.15) Admin Dashboard

4.2.2 Notification Pag

16
 If the admin clicks the notification icon, all new orders of the user will appear as shown
in figure (4.16).

Figure (4.16) Notification Page

4.2.3 Brand Page

If the admin clicks the 'Brand Add’ menu, the Brand Add Page will appear. The admin
must insert brand information with text boxes as shown in figure (4.17).

Fi
gure (4.17) Create Brand Page

17
 If the admin clicks the 'Edit’ button, the admin can update brand information as shown in
figure (4.18).

Figure (4.18) Edit Brand Page

If the admin clicks the 'Delete’ button, the admin can delete brand information by
confirming the alert box as shown in figure (4.19). When the admin chooses the ‘OK’ button,
products will be deleted using this brand.

Figure (4.19) Delete Brand Page

18
 If the admin clicks the 'Brand List’ menu, the Brand List Page will appear. Admin can
add a new brand by clicking the ‘New Brand’ button. The admin can click the edit button if he
wants to change brand information. And, the admin can also delete the brand. Moreover, the
admin can view all brands from the database as shown in figure (4.20).

Figure (4.20) Brand List Page

4.2.4 Category Page

If the admin clicks the ‘Category Add’ menu, Category Add Page will appear. The admin
must insert category information with text boxes as shown in figure (4.21).

Figure (4.21) Create Category Page

19
 If the admin clicks the 'Edit’ button, he can update category information as shown in
figure (4.22).

Figure (4.22) Category Update Page

If the admin clicks the 'Delete’ button, he can delete brand information by confirming the
alert box as shown in figure (4.23). When he chooses the ‘OK’ button, products will be deleted
using this category.

Figure (4.23) Category Delete Page

20
 If the admin clicks ‘Category List’ menu, Category List Page will appear. Admin can add
a new category by clicking the ‘New Category’ button. The admin can also click the edit button
if the admin wants to change category information. The admin can also delete the category and
view all categories from the database as shown in figure (4.24).

Figure (4.24) Category List Page

4.2.5 Product Page

If the admin clicks the 'Product Add’ menu, the Product Add Page will appear. The
admin must insert product information with text boxes as shown in figure (4.25).

21
 Figure (4.25) Product Create Page
If the admin clicks the 'Product List’ menu, the Product List Page will appear. The admin
can add a new product by clicking the ‘New Product’ button. The admin can click the edit button
if he wants to change product information. Admin can also delete the product and view all
products from the database as shown in figure (4.26).

Figure (4.26) Product List Page

If the admin clicks product id, ‘Product Detail Page’ will appear. The admin can see the
product details by clicking product id in the following figure (4.27).

Figure (4.27) Product Detail Pag

22
4.2.6 Order Page

If the admin clicks the ‘Order List’ menu, Order List Page will appear. All of the orders
that are made by users are shown in figure (4.28).

Figure (4.28) Order List Page

Admin can see all new orders that are made by customers. The New Order Page is shown
in figure (4.29).

Figure (4.29) New Order Page

23
 The admin can view user information, order detail, billing address, shipping address,
invoice description and he can also update order status such as new (new order), confirm (the
state when the user receives the total cost of order product), shipped (the state when order
product is packaged to deliver to the bus station), complete (the state when order product is
reached to the user) as shown in figure (4.30).

Figure (4.30) Order Detail Page

The voucher can be printed by the admin if he clicks the invoice menu as shown in figure
(4.31). The admin can view order summary and the place where to ship.

Figure (4.31) Order Invoice Page

24
4.2.7 Customer List Page

If the admin clicks the 'Member Customer List’ menu, the admin can view information of
member customers who made the order process as shown in figure (4.32).

Figure (4.32) Customer List Page

CONCLUSION

This system helps shop owners to maintain their products and they can keep information
about customers. The system can be extended to allow the user to save products into a wish list.
The system can calculate flat shipping rate and tax. Technology has made significant progress
over the years to provide consumers a better online shopping experience and will continue to do
so for years to come. With the rapid growth of products and brands, people have speculated that
online shopping will overtake in-store shopping. While this has been the case in some areas,
there is still demand for brick and mortar stores in market areas where the consumer feels more
comfortable seeing and touching the product being bought. However, the availability of online
shopping has produced a more educated consumer that can shop around with relative ease
without having to spend a large amount of time. This system can quickly search latest fashion
and customers can easily use the system to buy the latest fashion. The customers can order the

25
fashion items with delivery from this system. At the end, it has been a win-win situation for both
consumer and sellers.

26