Building an e commerce website for selling shoes

19 Table 8: Change profile usecase specification .... 23 Table 13: Change Password of Admin usecase specification.... 11 Edit product in cart list Customer can edit products in cart list

INTRODUCTION

Reason for choosing the topic

The rapid advancement of information technology and software applications has significantly enhanced productivity and work efficiency across various socio-economic sectors.

Building an e-commerce website for selling shoes offers significant advantages, including the ability to reach a global market beyond local boundaries It enables attractive product displays and intuitive search features, making it easy for customers to find what they need Additionally, the streamlined online ordering and payment process enhances the overall shopping experience, minimizing transaction friction and encouraging customer satisfaction.

Purpose of project

To effectively expand market reach both locally and internationally, businesses should leverage online platforms to attract a diverse customer base Enhancing the online shopping experience is crucial, ensuring it is convenient, secure, and user-friendly, particularly in the ordering process and payment options Additionally, implementing an efficient inventory management system is essential to mitigate risks associated with stockouts and overstocking, thereby maintaining an optimal balance between supply and demand.

Object & scope

This article explores essential strategies for showcasing your products attractively while incorporating a user-friendly search feature By enhancing product visibility and accessibility, customers can effortlessly find and select items that meet their specific needs.

Research the footwear market to understand shopping trends, customer preferences, and competitors Identify passion and specific market needs

Expected results

The anticipated results encompass the creation of a dynamic online footwear marketplace that facilitates smooth user experiences, including effortless browsing, purchasing, commenting, and rating Enhanced functionalities for both shoppers and administrators will promote efficient order management and robust administrative controls, fostering a successful, user-focused online footwear platform.

THEORETICAL BASIS

System Architecture

We utilize React.js and Redux Toolkit for the website's user interface, while Spring Boot and Spring Data JPA are employed to develop the back-end Prior to updating the MySQL database, we implement various logic events, all structured within the MVC model framework.

Technologies Employed

ReactJS, an open-source JavaScript library developed by Facebook and launched in 2013, is designed for building interactive components on websites A key feature of ReactJS is its ability to render data on both the server and client layers, enhancing the performance and user experience of web applications.

Virtual DOM technology significantly enhances application performance by ensuring that only the root node maintains state When this state changes, it triggers a restructuring of the entire application, leading to partial updates in the DOM tree, which can impact processing speed React JS effectively utilizes this approach to optimize rendering and improve efficiency.

The Virtual DOM is a JavaScript object that encapsulates all necessary information to create a DOM, allowing for efficient updates by calculating changes when data is modified This mechanism enables seamless switching between the Virtual DOM and the real DOM tree, optimizing re-rendering processes React employs a one-way data binding approach, where data flows from parent to child through props, facilitating straightforward data management and error resolution These features make React an ideal choice for developing large applications with continuously changing data, as data modifications are often linked to interface updates.

JSX is a powerful language that enables developers to write HTML code within JavaScript, offering several key advantages Firstly, it enhances performance by optimizing code during compilation, resulting in faster execution times compared to traditional JavaScript Secondly, JSX is safer due to its static typing, which allows for early error detection during the compilation process, similar to languages like Java and C++ Additionally, it provides excellent debugging features, making it easier to identify and fix issues Finally, JSX's foundation in JavaScript makes it accessible and user-friendly for JavaScript programmers.

React built around components, not using templates like other frameworks In

In React, we create websites by utilizing small, reusable components that can have varying states or properties and can also nest within one another Each component maintains its own mutable state, allowing React to update them dynamically based on state changes This component-based architecture simplifies code maintenance in large projects A basic React component primarily requires a single render method, although several other methods are available, with render being the most essential.

Props: helps components interact with each other The component that receives input is called props, and returns properties that describe what the child component will render

Prop is immutable State: represents the state of the application When the state changes, the component simultaneously re-renders to update the UI

Spring Boot embraces the principle of convention over configuration, offering sensible default settings that can be customized to meet your specific requirements This approach significantly minimizes the amount of boilerplate code developers need to write, streamlining the development process.

Spring Boot enables the creation of standalone JAR files that include an embedded web server, such as Tomcat, Jetty, or Undertow, simplifying the deployment and distribution of applications.

Auto-Configuration in Spring Boot offers a variety of pre-built settings that automatically configure your application according to the dependencies you incorporate For instance, when you add the Spring Data JPA dependency, Spring Boot automatically establishes a data source and an entity manager, streamlining the setup process for developers.

Spring Boot Starters are essential dependency descriptors that streamline the process of managing dependencies in your projects They are designed to simplify development for common scenarios, including web applications, data access, and messaging, making it easier for developers to focus on building features without getting bogged down in configuration.

- Spring Boot CLI: It provides a Command Line Interface for creating and testing Spring Boot applications It's particularly useful for rapid prototyping and development

- Microservices Architecture: Spring Boot is well-suited for building microservices-based architectures It includes features like embedded service registration and discovery, making it easy to create and scale microservices

Spring Boot Actuator offers essential production-ready functionalities that enable effective monitoring and management of your application It features built-in endpoints for health checks, metrics, application information, and various other capabilities, ensuring optimal performance and reliability.

- Spring Boot DevTools: This set of tools includes features like automatic application restart, live reloading of changes, and enhanced development experience

2.2.2.2 Overview of Spring Data JPA

Spring Data JPA, a key component of the Spring Data ecosystem, simplifies the implementation of JPA-based repositories, facilitating the development of Spring-powered applications that leverage various data access technologies.

Implementing a data access layer in an application can be challenging due to the extensive boilerplate code required for even the simplest queries When additional features such as pagination, auditing, and other frequently needed options are included, the complexity increases significantly, making it easy to feel overwhelmed.

Spring Data JPA enhances the development of data access layers by minimizing the effort required for implementation Developers can create repository interfaces using various techniques, and Spring automatically configures them, streamlining the process and improving efficiency.

SYSTEM REQUIREMENTS CAPTURING AND MODELLING

Surveys

Figure 2: Page interface adidas.com.vn

CHAPTER 03: SYSTEM REQUIREMENTS CAPTURING AND MODELLING

Figure 3: Page interface nike.com.vn

Adidas, Nike, and Puma are renowned global brands that offer the latest and most prestigious shoe models These commercial sites provide a user-friendly shopping experience, allowing customers to easily browse and purchase their desired products.

+ Select quantity and shoe size

Functional requirements

1 Guest Users do not have any account

2 Customer Users have already had a customer account on this application

3 Admin Users have already had an admin account on this application

1 Register Guest creates new account

2 Login Customers, Admin can log in to website

3 Logout Customers, Admin can log out of the website

4 View all products Guest, customer can see the product list

5 Filter product Guest, customer can find the product list

6 Categories filter Guest, customer can filter product

7 Add to Wishlist Customer can add product to wish list

8 View Wishlist Customer can view all products in wish list

9 Add to Cart Customer can add product to cart from wish list, product detail page or home page

10 View cart list Customer can view all products in cart list

11 Edit product in cart list Customer can edit products in cart list

12 Checkout Customer can pay for their orders

13 View product detail Guest and customer can view detail of product

14 View profile Customers can view their profile

15 Edit profile Customer can edit their profile

16 View order history Customer can view order history

17 Change password Customers can change password if forget

18 View all product Admin can view all products

19 Add new product Admin can add new products

20 Edit product Admin can edit products

21 Delete product Admin can delete products

22 View all category Admin can view all category

23 Add new category Admin can add new category

24 Edit category Admin can edit category

25 Delete category Admin can delete category

26 View all brand Admin can view all brand

27 Add new brand Admin can add new brand

28 Edit brand Admin can edit brand

25 Delete brand Admin can delete brand

26 View all paid orders Admin can view all paid orders

27 Edit the status orders Admin can edit the status of paid orders

28 View all customers Admin can view all customers

29 Delete customer Admin can delete customer

31 Edit sale Admin can edit sale price of product

Non-Functional requirements

2 Process data as quickly as possible

3 Ensure the security of personal information about customers

4 Be simple to update and expand in the future

5 Maintain high integrity for customers

Modelling requirements

- Edit product in cart list

- View order history Change password

SYSTEM ANALYSIS AND DESIGN

Usecase diagrams

CHAPTER 04: SYSTEM ANALYSIS AND DESIGN

Use Case Specifications

Description Allow users to log into the system

Pre-conditions User has an account

(3) Click the “Login” button or press Enter

(4) If failure, message “Wrong password” Re-enter and login again

(5) If the login is successful, show a program interface with full functions of employees

Description Allow users to create accounts

(2) Enter username and email, password, repeat password

(3) Click the “Sign up” button or press Enter

(4) If failure, return and sign up again

(5) If the sign up is successful, the user will be taken to the sign in page

Description Allow users to forgot password

(4) Enter email to receive OTP

(6) Change new password and repeat

Table 7: Forgot password usecase specification

Description Allow users want to change your profile

Pre-conditions Users have an account and log in

(3) Choose the button top right of the website

(4) Choose the profile and change

(5) Click button “Save” to update

Table 8: Change profile usecase specification

Description Allow users to detail page

(3) Choose price range and brand

(4) Choose the shoe by clicking the button

(5) The shoe user will go to the single page

(6) User have to choose the size and the quantity

(7) Click to the “Add to cart” to take the shoe to shopping cart

Table 9: Add to cart usecase specification

Description Allow users to cart page

(8) Check the information if user rethink, click to “remove” or click to check out

Table 10: Check cart usecase specification

Description Allow users want to pay your products

(8) Check the information if user rethink, click to “remove” or click to check out

(9) Click the button to pay

Description Allow admin to create accounts

Table 12: Log in Admin usecase specification

Description Allow admin to change your password

(3) Go to profile of admin

(5) Enter new password and repeat

Table 13: Change Password of Admin usecase specification

Description Allow admin to update product

(5) Click button save to update

Table 14: Update Product usecase specification

Description Allow admin to update customers

Table 15: Update Customers usecase specification

Description Allow admin to update brands

Table 16: Update Brands usecase specification

Description Allow admin to review statistic

Table 17: Manage statistic usecase specification

Sequence diagrams

Database design

No Attribute Type Domain Meaning Note

Default unique identifier for the table

2 create_at Date Date when the product was created

3 update_at Date Date when the product was last updated

4 color String Color of product

Number Sale percent of product

7 discounter_price Number Sale price of product

8 name String Name of Product

9 price Number Price of Product

10 quantity Number Quantity of Product

11 title String Title of Product

12 brand_id ObjectId Brand of Product

ObjectId Child category of Product

ObjectId Parent category of Product

15 main_image String Image of Product

2 create_at Date Date when the brand was created

3 update_at Date Date when the brand was last updated

4 name String Name of Brand

No Attribute Type Domain Meaning

2 create_at Date Date when the product was token to cart

3 update_at Date Date when the product was last updated in cart

4 quantity Number Quantity of Product

5 size Number Size of Product

6 total_price Number Total price of product in cart

7 product_id Number Id of product

8 user_id String Id of user

No Attribute Type Domain Meaning

2 create_at Date Date when the product was token the comment

3 update_at Date Date when the product’s comment was last updated

4 comment String Comment of product

5 product_id Number Id of product

6 user_id String Id of user

2 create_at Date Date when the user was created

3 update_at Date Date when the user was last updated

4 address String Address of User

5 district String District of User

6 email String Email of User

7 first_name String First name of User

8 last_name String Last name of User

9 mobile Number Phone number of User

10 password String Password of User

11 province String Province of User

12 ward String Ward of User

13 gender String Gender of User

14 Avatar_base String Image of User

2 create_at Date Date when the orders was created

3 update_at Date Date when the orders was last updated

4 address String Address of Orders

Number Alternate number of Orders

6 delivery_date Date Delivery date of Orders

7 distric String District of Orders

8 full_name String Full name of Orders

9 phone_number Number Phone number of Orders

10 province String Province of Orders

11 status String Status of Orders

12 transaction_id String Transaction id of Orders

13 transport_fee String Transport fee of Orders

14 ward String Ward of Orders

15 user_id ObjectId User id of Orders

16 total_price Number Toal price of Orders

2 create_at Date Date when the orders line was created

3 update_at Date Date when the orders line was last updated

4 quantity String Quantity of Order line

5 size Number Size of Order line

6 total_price Number Toal price of Order line

7 order_id ObjectId Oder id of Order line

8 product_id ObjectId Product id of Order line

2 create_at Date Date when the child category was created

3 update_at Date Date when the child category was last updated

4 name String Name of child category

5 size Number Size of child category

ObjectId Parent category id of child category

2 create_at Date Date when role was created

3 update_at Date Date when role was last updated

4 description String Description of Role

5 name Number Name of Role

2 role_id ObjectId Role id of user

2 image_base String Image base of comment

2 create_at Date Date when parent catego was created

3 update_at Date Date when parent catego was last updated

4 name Number Name of Parent catego

5 Brand_id ObjectId Brand id of Parent catego

2 Expiry_date Date Expiry date of Refresh token

3 user_id ObjectId User id of Refresh token

String Code of Refresh token

2 name String Name of Product size

3 quantity Number Quantity of Product size

4 id String Id of Product size

String Image secondary of Product image secondaries

Table 32: Product image secondaries table

User Interface Design

1 Login Button Log in to the login page

2 Email Textbox For customers to input email

3 Password Textbox For customers to input password

4 Login Button After clicking, redirect to homepage

5 Register Text Direct to customer register page

1 First name Textbox Enter user's first name

2 Last name Textbox Enter user's last name

3 Email Textbox Enter user's email

4 Mobile Textbox Enter user's phone number

5 Gender Select Select user's gender

6 Street address Textbox Enter user's street address

7 Province Select Select user's province

8 District Select Select user's district

9 Ward Select Select user's ward

10 Password Textbox Enter user's password

11 Repeat password Textbox Enter user's repeat password

12 Sign up Button Click on the button to sign up user

13 Login Button Click the button to return login page

1 Email Textbox Re-enter the previously registered email

2 Submit Button Click on the button to send the Otp code to the newly entered email

3 Login Button If remember your password, click this button to return to the login page

1 Password Textbox Enter the Otp code obtained in gmail to change the new password

2 Submit Button Click the button to go to the new password reset page

1 Password Textbox Enter your new password

2 Repeat Password Textbox Repeat enter a new password

3 Reset Button Enter the button to regenerate a new password

1 Email of admin Text Admin's email address

2 Email info Text Email content for users

3 OTP number Text Otp code for users to reset their password

Table 38: Email Reset Interface Object

1 Username Button Click to go to the Home page

2 Phone number Button Click to go to the Shop Now page

3 Email Button Click to go to the About page

4 Address Button Click to go to the Contact page

5 City address Button Click to go to the Sysrem Store page

6 District address Textbox Enter suggested content to search

7 Ward address Button Click on the pages of different shoe brands to view shoes

1 List of products of category

List Display list of products of category

2 See more Button Click the button to see more product

1 Brandist List Click to choose brand

2 Category Drop menu Filter products by category

3 Activity Drop menu Filter products by activity

4 Sale & Offers Drop menu Filter products by sales

5 Colors Drop menu Filter products by colors

6 Hide filters Button Click to hide filters

7 Sort Drop menu Sort by newest product, by price

8 List of products List Display list of products of category

1 Time create Textbox The time the user account was created and it cannot be changed

2 Email Textbox The user account email is created and it cannot be changed

3 First name Textbox The user's first name is saved and can be changed

4 Last name Textbox The user's last name is saved and can be changed

5 Phone number Textbox The user's moblie is saved and can be changed

6 Gender Drop menu The user's gender is saved and can be changed

7 Street address Textbox The user's street address is saved and can be changed

8 Province Drop menu The user's province is saved and can be changed

9 District Drop menu The user's district is saved and can be changed

10 Ward Drop menu The user's ward is saved and can be changed

11 Select photo Button The user's photo is saved and can be changed

12 Save Button Click on the save button to save the changed user profile

1 Product image Image Display product image

Text Display product name, price, description, category, colour, size of product

3 Select size Button Choose size of product

4 Add to cart Button Add product to cart

1 Choose all Button Click to select all products

2 Delete Button Click the button to delete all selected products

3 Delete icon Button Delete each product from cart

4 Information of bill Box Information on product price and shipping cost

5 Checkout Button Increase the number of products in the shopping cart

1 First name Textbox Fill in information about first name

2 Last name Textbox Fill in information about last name

3 Phone number Textbox Fill in information about phone number

Textbox Fill in information about alternate phone number

5 Street address Textbox Fill in information about street address

6 Province Drop menu Fill in information about province

7 District Drop menu Fill in information about district

8 Ward Drop menu Fill in information about ward

9 Notes Textbox Fill in information about notes of user

1 Order status Textbox Search product information by order status

2 Payment method Textbox Search product information by payment method

3 Order date Textbox Search product information by order date

4 Delivery date Textbox Search product information by delivery date

5 Receiving date Textbox Search product information by receiving date

6 Reset Drop menu Click the button to reset all filters

7 Search Drop menu Click the button to search product

8 Order info Drop menu Fill in information about ward

9 Image Image Information of price’s product

10 Payment Select Select how to pay product

11 Place order Button Click the button to order

1 Email Textbox For admin to input email

2 Password Textbox For admin to input password

3 Forgot password Button Click to get new password

4 Login Button Click to log in admin page

Table 47: Login Admin Interface Object

Figure 33: Reset Password Admin Interface

1 Old password Textbox Re-enter the old admin password

2 New password Textbox Enter your new password

3 Repeat password Textbox Re-enter the new password entered previously

4 Save Button Click the button to complete changing the new password

Table 48: Reset Password Admin Object

Figure 34: Change Profile Admin Interface

1 Time create Textbox The time the admin account was created and it cannot be changed

2 Email Textbox The admin account email is created and it cannot be changed

3 First name Textbox The admin's first name is saved and can be changed

4 Last name Textbox The admin's last name is saved and can be changed

5 Phone number Textbox The admin's moblie is saved and can be changed

6 Gender Drop menu The admin's gender is saved and can be changed

7 Street address Textbox The admin's street address is saved and can be changed

8 Province Drop menu The admin's province is saved and can be changed

9 District Drop menu The admin's district is saved and can be changed

10 Ward Drop menu The admin's ward is saved and can be changed

11 Select photo Button The admin's photo is saved and can be changed

12 Save Button Click on the save button to save the changed admin profile

Table 49: Change Profile Admin Object

1 Search product Button Press the button to open the product filter

2 Create product Button Click the button to create more products

3 Select product Button Press the button to select all products or press each button to select each different product

4 Time create Text Product creation date information

5 Name of product Text Product name information

6 Description Text Product description information

7 Price Text Product price information

8 Discounted Text Product discounted information

Text Product price after discounted information

10 Brand Text Product brand information

11 Change table Button Click one of the two buttons to expand or shrink the table information

12 Delete Button Click the button to delete all products

13 Image Button Click this button to open the full image of that product

14 Edit product Button Click this button to edit product information

15 Delete Button Click this button to delete each product

1 Name Textbox Change name of product

2 Title Textbox Change title of product

3 Description Textbox Change description of product

4 Price Textbox Change price of product

5 Discounted Textbox Change discounted of product

6 Discounted price Textbox Price after discounted

7 Color Textbox Change color of product

8 Brand Select Change brand of product

9 Parent category Select Change parent category of product

10 Child category Select Change child category of product

11 Main image Image Change main image of product

12 Secondary image Image Change secondary image of product

Figure 38: Order Admin Interface Interface

Figure 39: Order Admin Interface Interface

1 Order by Textbox Enter to find information by order by

2 Phone number Textbox Enter to find information by phone number

3 Order status Select Enter to find information by order status

4 Payment method Textbox Enter to find information by payment method

5 Oder date Select Enter to find information by order date

6 Delivery date Select Enter to find information by delivery date

7 Receiving date Select Enter to find information by receiving date

8 Province Select Enter to find information by province

9 District Select Enter to find information by order by

10 Ward Select Enter to find information by ward

11 Reset Button Click the button to reset all search information

12 Search Button Click to display the order status table

13 Change table Select Click one of the two buttons to expand or shrink the table information

15 Order status Button Click to display the order status table

16 Image Image Click this button to open the full image of that product

17 Delete Button Click this button to delete each product

Table 52: Order Admin Interface Object

Figure 40: Brands Admin Interface Interface

1 Delete Button Delete the product's brand

2 Nike table Table Nike brand content table

3 Adidas table Table Adidas brand content table

4 Puma table Table Puma brand content table

6 Create Button Click the button to create additional brands for the product

Table 53: Brands Admin Interface Object

1 Order Box Number of orders

2 Users Box Number of users

3 Stock Box Number of stock

4 Sold Box Number of sold

5 AOV Box Number of aov

6 Revenue Box Number of revenue

7 Number of product Chart Number of product in stock and sold by brand

8 Chart line Chart Monthly statistic by year

9 Chart column Chart Monthly statistic by year

10 Select chart Select Enter to find information by ward

1 Code Text Enter code of customer

2 Email Text Enter email of customer

3 Province Select Select province of customer

4 District Select Select district of customer

5 Ward Select Select ward of customer

6 Reset Button Click the button to reset the filter

7 Search Button Click the button to search the customer

8 Create Button Click the button to create the button

9 Reduce Select Select reduce of customer’s table

10 Full Column Select Select full column of customer’s table

12 Choose STT Button Click the button to choose stt of customers

13 Edit customers Button Click this button to edit customer information

14 Delete Button Click the button to delete each customer

IMPLEMENTATION AND TESTING

Implementation

First, our backend is development by mySQL database, we use mySQL to store data from customer and seller

After selecting the database for our project, we chose Visual Studio Code (VSCode) as our integrated development environment (IDE) due to its popularity and positive reputation among developers VSCode supports various programming language extensions that enhance project development, and its Visual Studio Live Share extension allows multiple users to collaborate in real-time on the same project By logging in through GitHub, we can seamlessly code and debug together.

Our project is built using ReactJS, a JavaScript framework that leverages Functional Components to develop our application, opting for this modern approach over traditional Class Components.

Next, we use the Redux Toolkit to manage the state and make global state and pass data from page to page easily

About Back-end development, we use Sping Boot framework of JAVA to write API, access to database and run handle events interacting with Google and Firebase

Testing

ID Description Test steps Test data Expected

“Log in” button on the top right

Email: user@exam ple.com Phone Number:

Register successfully and direct to Login Page

Email: user@exam ple.com

Page | 76 email account - Click on

“Log in” button on the top right

-Enter email and passwor d -Click submit

Email: user@exam ple.com Password:

“Login successfully” and direct to Home Page

“Login successfully ” and direct to Home Page

Log in with an account that doesn't exist

Email: example@e xample.co m Password: user1234

Email or password is not correct”

” Email or password is not correct”

Log in with an account that is the wrong password

Email: user@exam ple.com Password: example123

Email or password is not correct”

” Email or password is not correct”

-Access Admin Site -Enter email and passwor d -Click Submit

Email: admin@gm ail.com Password: admin123

Alert: “Login Successfully” and direct to dashboard page

” and direct to dashboar d page

Customer add product to wishlist

Desired products will be added to the wishlist page

Page | 78 heart icon on top right product card

-Login by custome r -Select Wishlist in header

Display the list of desired products

-Login by custome r -Select Wishlist in header -Click trash bin icon on the right table

The product has deleted from wishlist

Add to Cart a product in

-Login by custome r -Select Wishlist in header -Click button cart on the right table

The product will be added to the cart, and the Cart page will increment by 1 in the header

The product will be added to the cart, and the Cart page will increment by

Add to cart the product in product detail page

-Login by custome r -Choose any product

The product will be added to the cart, and the Cart page will increment by 1 in the header

The product will be added to the cart, and the Cart page will increment by

Add a product that already exists in the cart

The Cart button's indicator does not increase, but on the Cart page, the product count increases by 1

The Cart button's indicator does not increase, but

“Add to cart” button Back to home page- -Select the recently added product -Click

“Add to on the Cart page, the product count increases by

-Login by custome r account -Select Cart button -Click on the

The quantity will update, subsequently updating the total price

The quantity will update, subsequentl y updating the total price

Page | 81 minus (- ) or plus (+) button on the product.

-Login by custome r account -Select Cart button -Click delete icon

Delete product existed in table cart and subsequently updating the total price

Delete product existed in table cart and subsequentl y updating the total price

Payment -Login by custome r account Select Cart

Success notification and redirect to the checkout page

Success notification and redirect to the

Page | 82 continu e button -Select paymen t method paypal -Enter user name and passwor d paypal account

-Check total price and click Comple te Purchas e

Redirect to HomePage and disappear label Customer name in header

Redirect to HomePage and disappear label

The admin adds products on the admin page

-The Admin visits the dashboa rd page

"Produc t" in the Navigat io n bar on the left side of the screen

The system adds the product information to the database

"Add" to upload the product to the system

-The Admin visits the dashboa rd page

"brand " in the Navigat io n bar on the left side of the screen

The system adds the brand information to the database

-Enter the brand informa tio n

"Add" to upload the brand to the system

-Admin visits the dashboa rd page

"Custo me r" in the Navigat io n bar

The system deletes the customer information from the database

Page | 86 on the left side of the screen

CONCLUSION

Achievements

• The course provides the background knowledge in new technologies and framework in software programming and engineering Especially in new methods for software development

This article offers insights into React.js, covering essential aspects such as environment setup, software design, implementation, testing, packaging, and deployment It also emphasizes the importance of complementary skills, including effective communication, teamwork, project management, and report writing, to enhance overall project success.

During the project implementation, the team focused on the PHP programming language while utilizing React.js and Ant Design, alongside various CSS libraries, to enhance the product's quality Additionally, they emphasized the importance of effectively separating the frontend and backend components.

• Know the theory of MySQL and Laravel Framework Learn how to build front-end websites and build databases and connect to them

• Know the theory of SpringBoot Learn how to build an image recognition system and call an API that returns results and connects to a website

• Know some JavaScript theory Learn how to use it to handle some special website operations

• Gain effective teamwork skills Logical thinking is also significantly improved Know how to start a project effectively and divide the work evenly among team members

• The program built by the team has fully ensured the basic required functions for a system of buying and selling clothes products in website and application such as:

- Add , Delete and Edit products function in Admin Page

- Search the products that the users want to see and Search according to filter

- Manage products, brands, categories, users, orders and statistics on Admin Page

- Manage available quantity of products for prevent the users orders so many products

- Allows users to choose the colors and the sizes of products what they want

- Add to Cart, Remove products and Delete all products from the Cart

- Log in, Log out, Register Account, Change Password and Change Information for users

- Allows users to review orders placed and follow the order status

- Allows users to comment about products and review by rating

- Have Checkout Page for users sign the necessary informations

- Have two payment type (payment later and online payment by Momo) for users to choose

- Have email notification for user after ordering products

- Users can see contact of website to know location and communications

- Users can see the best seller of website and the discount of products to know for choosing products when they buy

- Users can see the recommended products of any products to have many more options when they buy

- Users can see what percentage of certain products are on sale and which products are currently out of stock

- Users can add to favorite when they like this products

Advantages and Disadvantages

• The user interface is guided enthusiastically by the instructors, showing good or bad points continuously, ensuring aesthetics

• Database, applications are uploaded on the internet, users do not need to install third- party applications to be able to use them

• The errors have been thoroughly tested by all members who have been learning through the software testing course Understand the procedures for finding errors and making corrections

• Login and account registration by google, facebook, …

• Cannot calculate shipping price based on different distances

Future improvements

• Build an addictional mobile app for our website

• Build more features for the website, for example a map suitable for ordering,

[1] React team Getting Started, 20/11/2022, from

[2] Sequelize team Associations, 27/11/2022, from < https://sequelize.org/docs/v6/core- concepts/assocs/>

[3] https://spring.io/projects/spring-boot

[4] https://www.nike.com/vn

[5] https://www.adidas.com.vn/vi

[6] https://us.puma.com/us/en

[7] MySQL (2019) MySQL: MySQL Documentation Mysql.com https://dev.mysql.com/doc/

[8] Bootstrap 5 Tutorial (n.d.) Www.w3schools.com https://www.w3schools.com/bootstrap5/

Tiêu đề	Building An E-Commerce Website For Selling Shoes
Tác giả	Vu Tien Dat, Hoang Dai Nghia
Người hướng dẫn	Nguyen Tran Thi Van, MSc.
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Project
Năm xuất bản	2024
Thành phố	Ho Chi Minh City

Định dạng
Số trang	108
Dung lượng	5,01 MB