1. Trang chủ
  2. » Luận Văn - Báo Cáo

Developing a website for selling sneakers

80 2 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Developing a website for selling sneakers
Tác giả Ngo Tai Vuong
Người hướng dẫn Dr. Nguyen Dang Khoa
Trường học Vietnam National University, Hanoi International School
Chuyên ngành Informatics and Computer Engineering
Thể loại Graduation project
Năm xuất bản 2024
Thành phố Hanoi
Định dạng
Số trang 80
Dung lượng 4,31 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Cấu trúc

  • CHAPTER I: INTRODUCTION TO THE TOPIC – SYSTEM (14)
    • 1. Reason for choosing the topic (14)
    • 2. Topic objective (14)
    • 3. Topic scope (14)
    • 4. Survey (15)
      • 4.1 Survey (16)
      • 4.2 Conclusion after survey (18)
    • 5. Planning (19)
      • 5.1 Planning (19)
      • 5.2 Identify system users (20)
    • 6. Software development methods (21)
      • 6.1 Some things to know about E-commerce (21)
        • 6.1.1 What is E-commerce? (21)
        • 6.1.2 What is an Ecommerce website? (21)
      • 6.2 Web-Service (22)
        • 6.2.1 What is Web-Service? (22)
        • 6.2.2 Components of Web Service (22)
    • 7. Product development context (23)
    • 8. Tools and technologies used in the project (24)
      • 8.1 Tools (24)
      • 8.2 Technologies (24)
        • 8.2.1 ReactJs (24)
          • 8.2.1.1 What is ReactJS? (24)
          • 8.2.1.2 Why do JavaScript Developers use ReactJS? (25)
        • 8.2.2 Java SpringBoot (26)
        • 8.2.3 MySQL Workbench (26)
        • 8.2.4 Redux (27)
          • 8.2.4.1 What is Redux? (27)
          • 8.2.4.2 How does Redux work? (28)
        • 8.2.5 Ant-design (29)
  • CHAPTER II: SYSTEM DESIGN ANALYSIS (31)
    • 1. System specification (31)
      • 1.1. Identify system actors (31)
      • 1.2 Identify Use Cases (31)
    • 2. Use Case diagram (32)
      • 2.1. Use Case diagram decomposes the Manager actor (34)
      • 2.2. Use Case diagram of employee actor decomposition (35)
      • 2.3. Use Case diagram decomposes the Customer actor (36)
      • 2.4. Use Case diagram decomposing the visiter actor (36)
    • 3. Workflow (37)
      • 3.1. Workflow offline (37)
    • 4. Activity diagram (38)
      • 4.1 Login Use Case (39)
      • 4.2 Registration Use Case (40)
      • 4.3 Product Use Case (42)
        • 4.3.1 Add Product Use Case (42)
        • 4.3.2 Edit Product Use Case (44)
        • 4.3.3 Delete Product Use Case (46)
      • 4.4 Order Use Case (48)
        • 4.4.1 Add Order Use Case (0)
        • 4.4.2 Edit Status Order Use Case (50)
      • 4.5 Revenue and profit statistics Use Case (52)
      • 4.6 Use Case of ordering in cart (53)
      • 4.7 Brand (56)
        • 4.7.1 Add Brand (56)
        • 4.7.2 Edit brand (58)
        • 4.7.3 Delete brand (60)
      • 5.1 General Database table (62)
      • 5.2 Product table details (63)
      • 5.3 Customer_order table details (63)
      • 5.4 Employee table details (64)
      • 5.5 Account table details (65)
      • 5.6 Category table details (65)
      • 5.7 Brand table details (66)
      • 5.8 Color table details (66)
      • 5.9 Size table details (66)
      • 5.10 Product_category table details (67)
      • 5.11 Order_detail table details (67)
      • 5.12 Carts table details (67)
      • 5.13 Payment table details (68)
      • 5.14 Order_status table details (68)
      • 5.15 Employee_status table details (69)
      • 5.16 Role table details (69)
      • 5.17 Account_role table details (69)
  • CHAPTER III: DESIGN THE THEME (70)
    • 1. User interface (70)
      • 1.1 User home page interface (70)
      • 1.2 Product detail view page interface (71)
      • 1.3 Cart page interface (71)
      • 1.4 Order page interface (72)
      • 1.5 Product page interface (72)
      • 1.6 Registration interface (73)
      • 1.7 Login interface (73)
      • 2.1 Management home page/statistics page interface (74)
      • 2.2 Product management page interface (74)
      • 2.3 Order management page interface (75)
      • 2.4 Category management page interface (75)
      • 2.5 Brand management page interface (76)
      • 2.6 Color management page interface (76)
      • 2.7 Employee management page interface (77)
  • CHAPTER IV: CONCLUSION (78)
    • 1. Project development time (78)
    • 2. Level of project completion (78)
    • 3. Difficulties and risks encountered and how to solve them (78)
    • 4. Lessons learned after doing the project (78)
  • CHAPTER V: FUTURE DEVELOPMENT (79)

Nội dung

Developing a website for selling Sneakers Xây dựng website bán giày thể thao Developing a website for selling Sneakers

INTRODUCTION TO THE TOPIC – SYSTEM

Reason for choosing the topic

Selecting a website design theme for selling Stylish Online Store shoes is driven by several key factors The shoe market draws diverse customers, including fashion enthusiasts and collectors, creating a broad audience Additionally, an online shoe retail platform presents significant business potential, unrestricted by geographical boundaries or time constraints, which enhances accessibility and revenue opportunities Furthermore, developing this website serves as an exciting challenge, allowing for the integration of innovative technologies such as user-friendly interfaces, secure payment systems, and efficient inventory management.

Topic objective

Building the Stylish Online shoe-selling website with various practical features: For the Store:

Introduction of the Store: The website will comprehensively introduce the store, creating a positive impression for new customers

Online Product Selling: Providing the capability to introduce and sell products online, contributing to flexible and effective revenue growth

Clear and transparent product information builds customer confidence in purchasing decisions, while offering diverse payment options, including QR code and cash, enhances convenience during the payment process.

User-Friendly Interface: A simple and friendly interface design helps customers easily interact and conduct transactions

Convenient Sales: Allowing sales staff at the counter to efficiently carry out transactional operations

Quick Inventory Check: An automated system that checks the quantity of inventory, making it convenient for employees to monitor the status of goods.

Topic scope

Build websites using Java, JS and Web Service combined with restful API

Target users: Website is applied to Stylish Online Store shoe store for customers outside Hanoi with the following functions:

Survey

Name of the store: Bitis sports shoe

Address: 272 Tran Thanh Ngo - Kien An – Hai Phong

Interviewee: Manager of a shoe store

What is the current business situation of your store?

The current business situation of my store is quite good Customers have access to both online and offline purchases

What products does your store currently offer?

Currently my house is providing a variety of products from affordable to mid-range and high-end shoe products

Items in the store are primarily organized by category and color, with only a select few products categorized by brand Notably, two models are prominently featured under the brand name, Hunter, specifically labeled as Hunter Street and Hunter X.

Can you show me your restaurant management software, especially the orders section, I need to see the order statuses?

How will prices change? How is the product price calculated?

Prices usually do not change much, because shoes usually have prices listed in advance, if there are promotions on birthdays, or welcoming new students, back to school, etc

Can I see the items in your management software?

What means are you currently using to store information about revenue, products, customers, especially invoices?

Currently, we mainly use Excel on computers for management and paper books

How many users does your store have, and like this software, do I have full rights to use it or can I only sell?

Our store employs three staff members along with one manager, who will assist you in obtaining an account for system access to add products and place orders However, please note that you will not have access to view the revenue generated.

What is the store's exchange and purchase policy?

They care about the versatility of shoes, the comfort of the feet as well as the sole, material of the shoe and color

So what do customers care about We mainly do statistics via Excel on the

16 when buying a watch? computer and manage books

How do you measure store revenue?

We mainly do statistics via Excel on the computer and manage books

Current situation: Because the store is managed in a traditional form, it encounters problems such as:

Difficulty in management, consuming a lot of time and energy

Excel management has many errors, making it difficult to grasp store operations Store revenue statistics are not accurate

Have not received all feedback from customers

Conclusion: Based on the above survey, I have built a website "Website selling

Stylish Online Store shoes" with the following information:

System users: store managers, employees, and customers

Entities: account, cart, category, order details, order, order history, product (product details), size, color, brand, photo

Functions + operations: Product management, user account management, order management:

Based on the above results, I have agreed on the following decentralization matrix:

Functions Manage Staff User Customer

Planning

The name of the job Start time End time Complete

Draw the use cases of the flows 21/09/2023 10/10/2023 100%

FUNCTIONS CODE OF MANAGEMENT AND EMPLOYEES

WRITE A REPORT ABOUT THE PROJECT

Based on the survey, I have identified 3 main users of the system as follows: Manager:

Product management (view, search, add, edit)

Manage categories (view, search, add, edit)

Brand management (view, search, add, edit)

Color management (view, search, add, edit)

Add or remove products to the shopping cart

Software development methods

6.1 Some things to know about E-commerce

Although it was born in 1969, it was not until 1995 that the Internet was officially put into use in Vietnam and became popular in the 2000s During the period from

Between 2000 and 2003, e-commerce was gaining traction but remained relatively niche However, from 2004 onwards, its popularity surged, particularly with the rise of mobile devices and social media Today, e-commerce has become an integral aspect of modern society, shaping how people shop and interact online.

E-commerce, or electronic commerce, refers to the buying and selling of products and services over the Internet, utilizing electronic devices such as computers, laptops, smartphones, and tablets It functions similarly to traditional stores by facilitating transactions between individuals, organizations, and businesses, but distinguishes itself through its online nature Prominent examples of e-commerce platforms today include Shopee, Sendo, and Lazada.

6.1.2 What is an Ecommerce website?

E-commerce websites serve as platforms that enable online business transactions, offering goods and services to consumers The rise of the Internet has significantly contributed to the popularity of online shopping, making these websites an integral part of everyday life Unlike traditional websites, E-commerce platforms allow users to easily access information while also facilitating smooth buying and selling experiences.

E-commerce websites are primarily categorized into two types: product business websites and E-commerce platforms While product business websites provide detailed information on various topics, fields, organizations, or businesses, E-commerce platforms facilitate online transactions, enabling users to buy and sell products seamlessly.

20 websites enable users to easily and swiftly purchase or sell products through features such as ordering, online payment, and shopping carts [1]

Web services are understood in Vietnamese as Web services This is an extensive set of protocols and standards used to exchange data between applications or systems

Web services facilitate seamless integration between two computers, enabling effective interaction over a network They allow computer programs to communicate with websites directly, eliminating the need for users to manually browse to access information.

Figure 2:Introduction to Web Services

Software applications are typically developed using various programming languages and can operate on different platforms They also utilize Web Services to facilitate data exchange, resembling the communication processes that occur within a computer system.

SOAP Web Service stands for "Simple Object Access Protocol Web Service", roughly translated: Simple object access protocol Web service [2]

This is considered one of the protocols built on XML to define plain text data via HTTP Soap Web Service in Java is considered a solid pillar for distributed

21 applications such as a skeleton structure composed of many different languages and operating systems Web Services often use SOAP to transmit data

SOAP Web Service, built on XML, is a versatile protocol that operates independently of platform or programming language, allowing developers to implement it using various languages such as Java, PHP, and NET, and deploy it across different operating systems like Windows and Linux.

REST stands for "REpresentational State Transfer", roughly translated: representational state transfer

REST is considered a type of software architecture (architectural style) and not a protocol

RESTful Web Services are understood as Web Services written based on REST architecture Besides, REST is widely used as a replacement for Web Services based on SOAP and WSDL

Quite similar to SOAP, RESTful Web Service does not depend on the platform or any programming language Therefore, REST can use SOAP Web Service as an implementation of REST [2]

Product development context

In the age of Industry 4.0, an online shopping website is essential to every business strategy, serving not just as a transaction platform but also as a vital tool for delivering a comprehensive shopping experience and enhancing customer interactions.

An online shopping website is a powerful promotional tool that enables businesses to effectively reach and engage their target audience on a global scale By integrating digital marketing strategies with creative content, these platforms create a lasting impression that captivates customers and enhances brand visibility.

Management: can use all functions in the system

The staff is essential for managing products, including catalogs, customer interactions, and details such as materials, sizes, colors, and brands They oversee customer orders and monitor user account activities while also introducing new promotions to enhance customer engagement.

22 discount codes to attract customers But you can't view product and revenue statistics

Customers: search and filter products, manage shopping cart, order online, pay with

Tools and technologies used in the project

ReactJS, an open-source JavaScript library developed by Facebook in 2013, is designed to create fast, efficient, and engaging web applications with minimal coding effort Its primary goal is to ensure that websites built with ReactJS are smooth, fast, highly scalable, and easy to implement.

Figure 3: What is React JS? [3]

8.2.1.2 Why do JavaScript Developers use ReactJS?

ReactJS is a powerful JavaScript library designed to assist developers in building dynamic user interfaces (UIs) for front-end applications It focuses on two essential components: creating the user interface, which includes elements like menus, search bars, and buttons, and managing user interactions For instance, in an e-commerce website, when a user selects a product and clicks "Add to Cart," ReactJS efficiently handles the interaction by updating the cart and displaying the selected products seamlessly.

Figure 4: Why do JavaScript developers use ReactJS? [3]

Before ReactJS, it was difficult for programmers to create user interfaces using

Vanilla JavaScript, also known as pure JavaScript, can lead to longer application development times and increased risks of errors compared to using libraries like jQuery In 2011, ReactJS was introduced by Facebook contributor Jordan Walke to enhance the user interface development process.

To accelerate development and minimize coding risks, React facilitates the creation of reusable code through two key concepts: JSX and Virtual DOM.

Java Spring Boot is a powerful web application development framework that enhances the Java programming language by simplifying application development Built on the Spring Framework, it eliminates the need for complex XML configurations, thereby boosting developer productivity and reducing complexity As a result, Spring Boot has significantly strengthened and popularized the Spring ecosystem, making it more effective than ever.

MySQL Workbench is a powerful visual tool for database access that offers SQL development, data modeling, and data migration capabilities It also includes extensive administration features for server configuration, user management, and backup, among other essential functions.

MySQL Workbench provides a user-friendly interface packed with essential features such as table creation, data editing, SQL query writing, and user management This powerful tool simplifies database manipulation, making it ideal for developers and MySQL database administrators.

MySQL Workbench, which began as an open-source tool in November 2005, became a commercial product after Oracle's acquisition starting with version 5.0 Despite this change, it remains a popular choice for managing MySQL databases.

Figure 5: Install MySQL products and features [5]

Redux is a popular state management library in web development, especially for JavaScript and ReactJS applications It enables the development of consistent and flexible applications that function smoothly across different environments, such as client, server, and native platforms Originating from the Elm language and influenced by Facebook's Flux architecture, Redux is frequently used in conjunction with React.

Redux plays a crucial role in managing complex state in web applications, facilitating a clear separation between logic and user interface Its structured approach allows for efficient monitoring and updating of application state, ensuring data consistency This clarity simplifies debugging, enabling developers to quickly identify and resolve issues.

Redux centralizes application state in a common storage known as the Store Components access this state via a Reducer, and to modify the states, Actions are created to perform various operations.

So there are 3 main components of Redux that we need to pay attention to: Store, Reducer and Action

In Redux, the store acts as a centralized repository that holds the entire state of the application, similar to a warehouse When a component requires access to a specific state, it simply retrieves it from the store, ensuring efficient state management and data flow within the application.

Reducers play a crucial role in managing application state by executing specific actions that alter its current condition They take the current state and a desired action as inputs, generating a new state in response An action signifies the intended operation on the state, such as modifying its values.

Redux features Middleware, an intermediary component that facilitates the management of actions prior to their arrival at the Reducer This functionality is particularly useful for executing tasks like API calls and handling asynchronous processing.

Ant Design is a React-based user interface toolkit that enables developers to efficiently create high-quality web applications It features a collection of pre-designed UI components, including buttons, charts, and tables, which significantly streamline the design and development process.

SYSTEM DESIGN ANALYSIS

System specification

The manager is the key figure in overseeing the website system, holding the highest authority and responsible for operating and delegating user rights Their primary functions include product management, invoice management, employee management, category management, brand management, color management, account management, and sales statistics.

An employee is an individual responsible for carrying out designated tasks in a store, operating under the direction of the store owner Their roles encompass a variety of functions, including logging in, viewing, adding, editing, and searching for product information, as well as managing invoices.

A customer is an individual who has registered and logged into the website, enabling them to access various functions These functions include logging in, searching for and viewing product information, managing their shopping carts, and placing orders.

A visitor is an individual who accesses a website without the need to log in or register They can perform various functions, including logging in, registering for an account, viewing product information, searching for items, and placing orders directly.

- Product management: Add, edit, delete, search, filter products

- View, search and filter products

- View, search and filter products

- Order online without logging in

Use Case diagram

Actor is used to refer to a user or some external object that interacts with the system

Use Case: are the functions that Actors will use or demonstrate the interaction between users and the system

Represents each required relationship between Use Cases

Represents the extended relationship between Use Cases

Relationship between actor and entity

System: this is the boundary of the system

2.1 Use Case diagram decomposes the Manager actor

2.2 Use Case diagram of employee actor decomposition

Figure 10: The use case decomposes the Employee actor

2.3 Use Case diagram decomposes the Customer actor

Figure 11: Usecase decomposes the Customer actor 2.4 Use Case diagram decomposing the visiter actor

Figure 12: Usecase decomposes the Guest actor

Workflow

Figure 13: Workflow offline 3.2 Workflow online

Activity diagram

Start: Start before the activity takes place

Condition: condition occurs, branching Yes - No

Action state: An activity represents the execution of an action on objects or by objects

Fork: Used when 2 operations at the same time

Description Function helps users log into the website to perform functions

1 User enters the login page from the browser

4 Check the login information is successful and issue a notification

5 Display the home page interface corresponding to the user's role

4.1 Check failed login credentials and issue a notification

Figure 15: Login Activity 4.2 Registration Use Case

Description The function helps managers register accounts so they can issue accounts to employees

Starting conditions The manager accesses the website

Select the “Register” function from the login interface

Verify registration information successfully and issue a notification

Validation of registration information fails and a message is issued

Figure 16: Registration Activity 4.3 Product Use Case

Use case name Add Product

Description The function helps managers add new products to the product list

Starting conditions Signed in to the manager account

Select the “Register” function from the login interface

3 Select the “Add new” button

4 Display the product adding interface

Enter product information and select

Check the information is valid, save the information to the database and display a success message

7 Return to the product management page interface

6.1 Check for invalid information and display a failure message

Figure 17: Add Product Activity 4.3.2 Edit Product Use Case

Use case name Edit Product

Description This function helps managers edit information about products already on the website

Starting conditions Signed in to the manager account

Access the “Product Management” section from the management page navigation bar

Select the product whose information needs to be edited

4 Displays the selected product information interface

Edit product information and select

Check the information is valid, save the information to the database and display a success message

7 Return to product management page

6.1 Check for invalid information and display a failure message

Figure 18: Edit Product Activity 4.3.3 Delete Product Use Case

Use case name Delete Product

Description This function helps managers delete products from the list

Starting conditions Signed in to the manager account

45 from the management page navigation bar

3 Select the product to delete

4 Display the product deletion confirmation interface

6 Delete the product from the database and display a success message

7 Display the product management page

7.1 Return to product management page

Figure 19: Delete Product Activity 4.4 Order Use Case

Use case name Add Order

Description The function helps managers and employees add invoices to the list

Starting conditions Signed in to manager and employee accounts

Access the “Invoice Management” section from the management page navigation bar

2 Display the invoice management interface

3 Select the “Add new” function

4 Display the invoice adding interface

Enter the invoice information and select

Check the information is valid, save the information to the database and display the message added successfully

7 Return to the invoice management page

6.1 Check for invalid information and display a failure message

Figure 20: Add Order Activity 4.4.2 Edit Status Order Use Case

Use case name Edit Status Order

Description The function helps managers change the status of existing invoices on the website

Starting conditions Signed in as account manager or account user

Management” section from the management page navigation bar

2 Display the invoice management interface

Choose the invoice whose status needs to be changed

4 Display the selected invoice information interface

5 Change the invoice status and select “OK”

Check the status for validity, save the information to the database and display a success message

7 Return to the invoice management page

6.1 Check for invalid status and display a failure message

Figure 21: Edit Order Activity 4.5 Revenue and profit statistics Use Case

Use case name Revenue and profit statistics

Description The function helps managers to statistics the shop's revenue over a period of time

Starting conditions Signed in to the manager account

Main event Step Actor Response system

1 Log in to the website home page

2 Display the home page interface

3 Display revenue statistics chart over time

Figure 22: Revenue and profit statistics Activity 4.6 Use Case of ordering in cart

Use case name Revenue and profit statistics

Description The function helps customers place orders in the shopping cart on the website

Starting Signed in to the customer account

Select “Products” on the navigation bar from the user interface

2 Displays the product list interface

3 Select 1 product in the product list

Select the product quantity and press

6 Display notification successfully added to cart

8 Click on the shopping cart icon

9 Display shopping cart management interface

Enter recipient information and press

Check the information is valid, add new data to the database and display a successful order message

12 Displays the invoice interface containing invoice information

11.1 Check for invalid information, display an error message

Re-enter the information so it is valid

Figure 23: Ordering in cart Activity 4.7 Brand

Use case name Add Brand

Description The function helps managers add new brand to the brand list

Starting conditions Signed in to the manager account

Select the “Register” function from the login interface

2 Display the brand management interface

3 Select the “Add new” button

4 Display the brand adding interface

Enter product information and select

Check the information is valid, save the information to the database and display a success message

7 Return to the brand management page interface

Flow 6.1 Check for invalid information and display a failure message

Figure 24: Add Brand Activity 4.7.2 Edit brand

Use case name Edit Brand

Description This function helps managers edit information about brands already on the website

Starting Signed in to the manager account

Access the “Brand Management” section from the management page navigation bar

Select the product whose information needs to be edited

4 Displays the selected brand information interface

5 Edit brand information and select “OK”

Check the information is valid, save the information to the database and display a success message

7 Return to brand management page

6.1 Check for invalid information and display a failure message

Figure 25: Edit Brand Activity 4.7.3 Delete brand

Use case name Delete Brand

Description This function helps managers delete brands from the list

Starting conditions Signed in to the manager account

Main event Step Actor Response system

Access the “Brand Management” section from the management page navigation bar

3 Select the brand to delete

4 Display the brand deletion confirmation interface

6 Delete the brand from the database and display a success message

7 Display the brand management page

7.1 Return to brand management page

The article outlines a database schema featuring various properties and their data types It includes a primary key (PK) identified as 'id' of type BIGINT, and essential fields such as 'product_name' and 'product_description' as VARCHAR(255), with the latter being optional The schema also incorporates foreign keys (FK) for 'brand_id', 'color_id', and 'size_id', all of which are BIGINT Additionally, it specifies 'quantity' as an INT, along with 'import_price' and 'export_price' as INT types The 'image_url' is defined as CHAR(255) and is optional, while 'create_at' and 'update_at' are VARCHAR(255), indicating the creation and update dates, respectively.

The Product database table serves as a comprehensive resource for the products available in the store, providing essential data fields that enhance understanding for both users and managers Key fields such as Size, Color, and Brand establish a Many To One relationship with the Product database, facilitating better organization and categorization of products.

Properties Data Types Interpretation Required Note id BIGINT Code Bill True PK order_code VARCHAR(255 String invoice True

The article outlines the structure of a database table that includes various fields related to order details Key attributes include 'order_date' as a DATETIME, 'order_code' as a BIGINT, and foreign keys such as 'color_id' and 'size_id', both also BIGINT The table tracks 'quantity' as an INT, along with 'import_price' and 'export_price', both represented as INT values Additionally, an 'image_url' field is defined as CHAR(255) for storing image paths, and 'update_date' is included as a DATETIME for recording the last update.

Properties Data Types Interpretation Required Note id BIGINT Employee code True PK employee_name VARCHAR(255

) Staff's name False employee_descr iption

Additional description of the staff

) Employee address True email VARCHAR(255

) Employee emails True hire_date DATETIME Date of starting work True phone VARCHAR(255

63 total_salary INT Total employee salary True empl_status_id BIGINT Employee status code True

The Employee table is a vital resource for administrators to oversee both current and former employees at the store This database enables managers to effectively manage and monitor the total salary of each employee Additionally, every employee is assigned an account by the manager, which includes essential contact information such as address, email, and phone number.

The article outlines the properties and data types for a database schema, including an account identifier (id) as a BIGINT, which serves as the primary key (PK) The user_name is a mandatory VARCHAR(100) field representing the name list, while the password is an optional VARCHAR(100) for account security The email, also a VARCHAR(100), is required for account communication, and the is_active field, a VARCHAR(255), indicates the account status Additionally, the employee_id, a BIGINT, is an optional foreign key (FK) representing the employee code, and carts_id, another BIGINT, is a required foreign key for the associated cart code.

The Account table serves as a vital support system for the employee table, enabling managers to create new accounts for incoming employees at the store Additionally, it allows managers to update the account statuses of existing employees efficiently.

Properties Data Types Interpretatio n Required Note

64 id BIGINT Category code True PK name VARCHAR(255) Name list True description VARCHAR(255) Describe False

A category table is an essential tool for organizing products into various classifications, enabling store managers to efficiently categorize items This structured approach allows customers to easily search for shoe products by specific categories, such as sports and mountain climbing, enhancing their shopping experience with greater speed and convenience.

Properties Data Types Interpretation Required Note id BIGINT Brand code True PK name VARCHAR(255) Brand name True description VARCHAR(255) Describe False

Properties Data Types Interpretatio n Required Note id BIGINT Color code True PK name VARCHAR(255) Color name True description VARCHAR(255) Describe False

Properties Data Types Interpretatio n Required Note id BIGINT Size code True PK size_number VARCHAR(255) Size number True

Types Interpretation Required Note product_category_id BIGINT Code

Product_category True PK category_id BIGINT Category code True product_id BIGINT Product code True

The article outlines the properties and data types for an invoice detail database, emphasizing the significance of each field Key properties include the 'id' as a BIGINT serving as the primary key (PK), 'name' as a VARCHAR(255) for the invoice detail name, and 'order_id' and 'product_id' as BIGINTs representing foreign keys (FK) related to the bill and product codes, respectively Additionally, it specifies the 'image' field as a VARCHAR(255) for the image path, along with essential financial fields such as 'price', 'quantity', and 'total', all represented as BIGINT or INT types, which are required for accurate invoice processing.

The properties of the data types include an 'id' as a BIGINT representing the cart code, which is a required primary key The 'product_id' is also a BIGINT that serves as the product code and is a required foreign key The 'product_name' is a VARCHAR(255) that represents the name of the product and is not mandatory Lastly, the 'account_id' is a BIGINT that functions as the account code, which is a required foreign key.

66 image VARCHAR(255) Image path False price DOUBLE Selling price of the product False quantity INT Quantity of 1 product False total BIGINT Total product cost False

The Carts table is essential for managers to track the total quantity of products in customer orders, detailing each product's price and calculating the overall amount due for payment.

Properties Data Types Interpretation Required Note id BIGINT Payment method code True PK method_name VARCHAR(255) Payment method name True

The payment table offers customers various payment methods upon successful order placement Currently, it features two default options: paying upon receipt of goods or transferring funds via QR code.

Properties Datatypes Interpretation Required Note id BIGINT Order status code True PK order_status_name VARCHAR(255) Order status name True

The Order Status table provides a comprehensive overview of the order's progress, displaying various statuses at each stage Once a product is successfully ordered, customers can easily track its progress and current location, such as whether it is being packaged or is with the shipper awaiting transportation.

Properties Data Types Interpretation Required Note id BIGINT Employee status code True PK empl_status_name INT Employee status name True

Properties Data Types Interpretation Required Note id BIGINT Permission code True PK name VARCHAR(255) Permission name True

Properties Data Types Interpretation Required Note account_id BIGINT Account code True FK role_id BIGINT Permission code True FK

In my current project, I am separating the user interface from the management interface to enhance accessibility The Account Role table is designed to facilitate access for both employees and managers Employees will have restricted access, unable to view or manage account and employee settings, and they will not have the ability to delete product lines, brands, colors, or categories Only manager accounts will have the permissions necessary to perform deletion functions.

DESIGN THE THEME

User interface

Figure 28: User home page interface

- User home page interface: This interface can be viewed by both visitors and customers At this interface, users can navigate to other interfaces

1.2 Product detail view page interface

Figure 29: Product detail view page interface

Product detail interface: Users can proceed to add products to the cart and continue shopping Or click the "buy now" button to make an invoice for the product

- Product interface: Users can filter products by: brand, category or color The product will be displayed according to the user's request to check the box

- Registration interface: Users register an account with the handle @gmail.com to access the user interface

2.1 Management home page/statistics page interface

Figure 35: Management home page statistics page interface

- Statistics page interface: Managers will capture the total number of orders, number of products running out, revenue and profit by week, month, year,

Figure 36: Product management page interface

Figure 37: Order management page interface

- Order management interface: When the user places an order, the invoice will be transferred to this interface Employees rely on this interface to give orders to customers.

Figure 38: Category management page interface

Figure 39: Brand management page interface

- Brand management interface: Managers can add, edit or delete product brands.

2.6 Color management page interfa ce

Figure 40: Color management page interface

Figure 41: Employee management page interface

The employee management interface effectively monitors the status of all employees, including those currently working, those who have previously worked, and those who have departed from the store Additionally, it provides a comprehensive overview of each employee's compensation, clearly displayed in the "total salary" column.

Figure 42: Account management page interface

Account management interface: Managers can add, edit or delete accounts for each employee

CONCLUSION

Project development time

Project development period from 21/09/2023 to 11/01/2024

Level of project completion

The level of project completion reached about 80% of the initial target

- Friendly, eye-catching interface, balanced layout, harmonious colors

- Can handle a lot of input and output data

- Arrange files scientifically, easily detect and fix errors when the system has problems.

Difficulties and risks encountered and how to solve them

Lack of experience with a real project

I'm still weak in coding, so completing functions is still slow because I have to both learn and code

Get logic help from your instructor and learn more on your own via the internet

The coded flows have not been thoroughly examined, leading to inconsistencies when interacting with the API Consequently, some threads function properly while others exhibit bugs, resulting in extended timeframes for bug resolution.

Was careful and checked more closely on the streams afterwards

Interaction between users and the system is not good

Still in the process of handling that interaction

Lessons learned after doing the project

During the project, I have concluded the following experiences:

Be proactive in surveying to get the most overview of a sales project

Be more careful in implementing code and handling bugs

You should estimate the time to code the streams appropriately

Doing this project has taught me how to divide my time appropriately From surveying to building interfaces, then deploying code,

Review and learn a lot of new knowledge from the project

FUTURE DEVELOPMENT

In the future, I will perfect the system's functions more convenient for users Fix errors that arise In addition, a few new functions will also be developed:

Set schedules and manage bookings

Customers can easily schedule appointments to visit the store and purchase their desired products They select the items they wish to buy and choose a convenient time for their visit Our staff efficiently manages these bookings to ensure optimal service and a seamless shopping experience for all customers.

Product reviews Once logged in, users can evaluate products on the website

Export invoice data Invoices can be exported to different files

Integrated management interface located in the user interface

Upon logging in, the management account will access the user interface, where a navigation button will appear next to the logout option, allowing users to switch to the management interface seamlessly.

Ngày đăng: 26/02/2025, 22:29

w