building a fashion store website

HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INTERNATIONAL EDUCATION --- CAPSTONE PROJECT BUILDING A FASHION STORE WEBSITE Students: Instructor: MSc.. Nguyễn Trần

INTRODUCTION

Reason for choosing the topic

In the age of digital evolution, the online fashion industry has experienced an unprecedented surge, driven by the proliferation of digital channels, increased mobile accessibility, and continuous technological innovations This growth presents a compelling opportunity for entrepreneurs with a keen eye for fashion, offering a dynamic space to carve their niche Whether you're a startup or an established enterprise, the realm of e-commerce beckons, providing a platform to launch and grow without the traditional overhead associated with brick-and-mortar operations

As we embark on this capstone project, our focus extends beyond establishing a mere online fashion store We delve into the intricacies of creating a seamless, user- friendly experience accessible both through web and mobile platforms Recognizing the paramount importance of personalized engagement, our project integrates a sophisticated recommender system This strategic inclusion aims not only to enhance user satisfaction but also to redefine the landscape of fashion retail by leveraging technological advantages This venture is poised to not just explore, but to pioneer, within the ever-expanding realm of e-commerce and fashion.

Purpose of project

The purpose of this project is to develop a comprehensive fashion store accessible through web and mobile platforms, prioritizing user convenience, stability, and security The incorporation of a robust recommender system, analyzing user preferences and product interests, aims to enhance the overall user experience and satisfaction, setting our fashion store apart in the digital landscape.

Object & scope

- The primary objective of this project is to establish a robust online fashion store that seamlessly operates on both web and mobile platforms The focus is on creating a user-centric environment, allowing customers to conveniently browse, purchase, comment, and rate products from renowned brands The overarching aim is to enhance the overall online shopping experience for users with a user-friendly interface and personalized engagement through the incorporation of a sophisticated recommender system The project strives to leverage technological advancements to revolutionize the traditional fashion retail landscape, emphasizing stability, security, and efficiency

- The scope of this project encompasses a comprehensive set of functionalities for users, shippers, and administrators Users will enjoy a feature-rich interface for purchasing, viewing, searching, and interacting with fashion items Shippers will be equipped with tools to accept orders, report delivery status, and access shipping history seamlessly Administrators will have the capability to manage products, user accounts, and invoices efficiently The scope extends to the integration of a recommender system that analyzes user preferences for tailored product recommendations This project ultimately seeks to create a secure, stable, and interactive online fashion store, positioning itself as a reliable and user-friendly platform in the competitive e-commerce landscape

- Project scope: " Building a fashion store website" is the topic's project scope.

Expected results

- The anticipated outcomes encompass the creation of a dynamic fashion marketplace where users experience seamless interactions, from browsing and purchasing to commenting and rating With the integration of a reliable recommender system, personalized product suggestions based on user interests are expected to enhance engagement and satisfaction The streamlined functionalities for shippers and administrators aim to ensure efficient order management and administrative control, contributing to a successful, user-centric online fashion store accessible on both web and mobile platforms.

THEORY FUNDAMENTAL

System Architecture

In our front-end development, we utilize React JS and Flutter, coupled with Bootstrap to optimize the user experience At back-end, we harness the capabilities of Java and Spring Boot for API development, employ TensorFlow to create our recommender system model and utilize Flask for the API implementation of the recommender system Our database solution is powered by MySQL The overall system architecture adheres to the Client-Server Model, strategically capitalizing on the inherent flexibility and performance benefits offered by these seamlessly integrated technologies

Libraries

Library Version Description axios 1.5.1 A promise-based HTTP client for the browser and Node.js It simplifies making asynchronous HTTP requests customize-cra 1.0.0 A package for customizing Create React App configuration without ejecting js-cookie 3.0.5 A simple, lightweight JavaScript API for handling cookies react and react-dom 18.2.0 React is a JavaScript library for building user interfaces React DOM is the entry point for working with the DOM react-app-rewired 2.2.1 A package that allows you to customize Create

React App configuration without ejecting react-bootstrap- pagination-control

1.0.5 A pagination control component for React

Bootstrap react-router-dom 6.16.0 A collection of navigational components for

React applications that enables declarative routing react-scripts 5.0.1 Configuration and scripts for Create React

App web-vitals 2.1.4 A library for measuring key web vitals and sending the data to Google Analytics babel-plugin- module-resolver

5.0.0 A Babel plugin that allows you to specify custom module directories

Library Version Description org.springframework.boot 3.0.1 Starter for building web, including

RESTful, applications using Spring MVC Uses Tomcat as the default embedded container mysql 8.0.33 This driver supports auto-registration with the Driver Manager, standardized validity checks, categorized SQLExceptions, support for large update counts org.springframework.security 6.2.0 Spring Security is a powerful and highly customizable authentication and access-control framework It provides protection against attacks like session fixation, clickjacking, cross site request forgery, com.google.oauth-client 1.34.1 Google OAuth Client Library for

Java Functionality that works on all supported Java platforms com.google.apis v1-rev171-

Cloud Storage JSON API V1 com.fasterxml.jackson.core 2.16.0 General data-binding functionality for Jackson: works on core streaming API com.google.code.gson 2.10.1 Used to convert Java Objects into their JSON representation It can also be used to convert a JSON string to an equivalent Java object io.jsonwebtoken 0.12.3 realize the jwt for java web application base on io.jsonwebtoken jjwt com.google.firebase 9.2.0 Firebase Messaging numpy 1.26.1 NumPy is a library for the Python programming language that adds support for large, multidimensional arrays and matrices, along with a large collection of high-level math functions to operate on these arrays tensorflow 2.14.0 Tensorflow is an open-source software library that strongly supports mathematical operations for machine learning and deep learning streamlit 1.28.2 Streamlit is a Python framework for rapidly creating user interfaces for web applications tqdm 4.65.0 tqdm is a Python library for displaying progress bars during lengthy iterations or computations Keras 2.14.0 Keras is a high-level neural network library, making it easy to build and train machine learning models

Keras-Preprocessing 1.1.2 Keras preprocessing is the data enhancement and preprocessing module of the Keras deep learning library It provides facilities for working with image data, text data, and sequence data mysql 0.0.3 mysql is a Python package that provides tools for working with MySQL databases mysql-connector-python 8.2.0 mysql-connector-python is a Python interface for the MySQL client library, facilitating the connection and interaction with MySQL databases mysqlclient 2.2.0 mysqlclient is a Python interface for the MySQL client library, supporting connection and interaction with MySQL databases

Flask 3.0.0 Flask is a Python web framework, also known as a micro-framework because it doesn't require specific tools or libraries used to build lightweight and flexible web applications API writing and deployment support

Flask-Cors 4.0.0 Flask-Cors is a Flask extension that handles Cross-Origin Resource Sharing (CORS) to enable access to resources from different domains

Technology

React.js is an open-source JavaScript library for building user interfaces Developed by Facebook, it's widely used for creating dynamic and efficient web applications React.js employs a component-based architecture, allowing developers to build UIs as a collection of reusable and modular components It utilizes a virtual DOM, enhancing performance by minimizing actual DOM manipulations React.js supports a unidirectional data flow, making it easier to manage and update state changes Its declarative syntax simplifies the creation of complex UIs, promoting code readability and maintainability React.js is often used in conjunction with other libraries or frameworks and is known for its efficiency in handling real-time updates and rendering large datasets

- Component-Based Architecture: React.js promotes code reusability and maintainability through a component-based approach, where UIs are built as a collection of modular components

- Virtual DOM Efficiency: React's use of a virtual DOM minimizes actual DOM manipulations, ensuring efficient updates and optimizing overall performance

- Declarative Syntax: The declarative nature of React simplifies the development of complex UIs, making code more readable and easier to understand

- Unidirectional Data Flow: React supports a unidirectional data flow, facilitating the management of state changes and enhancing predictability in application behavior

- Community and Ecosystem: The strong community and extensive ecosystem surrounding React provide ample support, libraries, and tools for developers, contributing to the framework's robustness

- Popularity and Adoption: React's widespread adoption by major companies ensures long-term viability and continuous improvement, making it a reliable choice for web application development

How apply Reactjs to build our project?

In our project, ReactJS is fundamental for front-end development, enabling a dynamic user interface

- Front-end Construction: React's component-based architecture streamlines code organization, ensuring a maintainable codebase

- Event Handling: React facilitates seamless responses to user interactions through functions responding to events like clicks or input changes

- Route Management: Incorporating React Router enhances navigation, ensuring intuitive updates based on URL changes

- API Interaction: React facilitates efficient data communication with the backend through technologies like Fetch API or Axios

In conclusion, our strategy maximizes ReactJS, empowering the creation of a robust, interactive web application with a responsive UI, effective event handling, streamlined navigation, and seamless API interactions

Bootstrap is a widely-used open-source front-end framework for web development It offers a collection of pre-designed components, styles, and tools, simplifying the process of creating responsive and visually appealing websites With a responsive grid system, Bootstrap enables developers to design interfaces that adapt seamlessly to different screen sizes Its comprehensive documentation and active community support make it a go-to choice for developers seeking efficiency and consistency in building modern, mobile-friendly web applications

- Responsive Design: Bootstrap provides a responsive grid system and components, ensuring that your website looks good and functions well on various devices and screen sizes

- Time Efficiency: By using pre-designed components and styles, Bootstrap accelerates the development process, saving time and effort in creating a visually appealing and consistent user interface

- Consistency: Bootstrap offers a consistent and uniform design across different browsers, helping maintain a cohesive look and feel for your website

- Cross-browser Compatibility: Bootstrap handles cross-browser compatibility issues, reducing the need for extensive testing and adjustments for different browsers

- Customizable: While providing a solid foundation, Bootstrap is also customizable, allowing developers to tailor the framework to fit specific project requirements

- Mobile-First Approach: Bootstrap follows a mobile-first approach, prioritizing mobile responsiveness and ensuring a positive user experience on smartphones and tablets

- Extensive Component Library: The framework includes a rich set of UI components, such as navigation bars and modals, easily integrable into projects, saving development time and ensuring a polished appearance

- CSS and JavaScript Functionality: Bootstrap includes predefined styles and JavaScript plugins that enhance the functionality of your website without the need for extensive coding

- Open Source: Being an open-source framework, Bootstrap is freely available, making it accessible to developers and promoting collaboration within the development community

How apply Bootstrap to build our project?

Bootstrap plays a pivotal role in simplifying interface construction Simplified Interface Building: Bootstrap is instrumental in streamlining the process of building a user interface Its pre-designed components and responsive grid system simplify the creation of a visually appealing and user-friendly front end With Bootstrap, we can efficiently structure and style our web pages, reducing the complexity of interface development

Flutter, developed by Google, is an open-source UI toolkit for building cross- platform applications It uses the Dart programming language and offers a comprehensive set of pre-designed widgets, enabling developers to create visually appealing and responsive user interfaces A notable feature is its ability to compile natively for mobile, web, and desktop from a single codebase Flutter facilitates a consistent and high-performance experience across various platforms, and its "hot reload" feature allows developers to quickly iterate during the development process With its flexibility and the efficiency of a single codebase for multiple platforms, Flutter has become a popular choice for building versatile and dynamic applications

- Cross-Platform Development: Write code once, deploy on iOS, Android, web, and desktop

- Consistent UI: Pre-designed widgets for a uniform user interface

- Hot Reload: Instantly see and test code changes for efficient development

- Performance: Native ARM code compilation ensures high performance

- Expressive UI: Allows easy implementation of complex designs and interactions

How apply Flutter to build our project?

To implement Flutter for our project, focusing on building an Android application with event handling and mobile UI development, we can follow these key steps:

- Android Application Development: Utilize Flutter to develop the Android application, taking advantage of its cross-platform capabilities to ensure compatibility with both Android and iOS devices

- Event Handling: Leverage Flutter's event handling mechanisms to seamlessly respond to user interactions Implement functions or methods that execute specific actions in response to events such as button clicks or user gestures

- Mobile UI Development: Utilize Flutter's rich set of widgets and UI components to construct a visually appealing and responsive mobile user interface Flutter provides a declarative approach to building UIs, allowing for efficient development and customization

In conclusion, our strategy involves harnessing Flutter's cross-platform capabilities to build an Android application We'll prioritize event handling for a smooth user experience and leverage Flutter's UI development features to create a visually appealing and responsive mobile interface

Spring Boot is an open-source Java-based framework developed by Pivotal, designed to simplify the process of building robust, production-ready applications It offers a convention-over-configuration approach, allowing developers to quickly set up and deploy applications with minimal configuration Spring Boot is built on top of the Spring framework, providing a set of opinionated defaults and conventions for faster development It includes an embedded web server, making it easy to create standalone, deployable micro-services or applications

- Rapid Development: Spring Boot minimizes configuration, enabling quick application development

- Micro-services: Ideal for micro-services architecture, offering easy deployment

- Spring Ecosystem Integration: Seamlessly integrates with the broader Spring ecosystem

- Embedded Server: Includes an embedded web server, simplifying deployment

- Community Support: Benefits from a large community for resources and solutions

- Production-Ready Defaults: Built-in features ensure applications are production-ready with minimal effort

- Wide Adoption: Industry-wide acceptance ensures ongoing support and updates

How apply spring boot to build our project?

To implement Spring Boot for our project, focusing on building APIs, connecting to a database, ensuring security with JWT, configuring Google Drive for image storage, utilizing Firebase for notifications, and integrating Google Translate for bilingual search, we can follow these key steps:

- Building APIs with Spring Boot: Use Spring Boot to develop robust APIs that serve as the backend for the project Leverage annotations and conventions for efficient API development

- Database Connectivity: Connect Spring Boot to the desired database (e.g., MySQL, PostgreSQL) using Spring Data JPA to facilitate seamless interaction and data management

- Security with JWT: Implement JSON Web Token (JWT) authentication for securing the APIs Utilize Spring Security to configure JWT-based authentication and authorization

- Google Drive Integration: Configure Spring Boot to interact with the Google Drive API for storing and retrieving images Utilize Google Drive service integration to seamlessly manage image resources

- Firebase for Notifications: Integrate Firebase Cloud Messaging (FCM) with Spring Boot to send push notifications Configure the necessary settings to enable real-time communication and notification delivery

- Google Translate Integration: Utilize the Google Translate API to implement bilingual search functionality Configure Spring Boot to interact with the Google Translate service to provide users with content in multiple languages

In conclusion, our approach involves leveraging the capabilities of Spring Boot to build a comprehensive project This includes developing APIs, connecting to a database, implementing security with JWT, configuring Google Drive and Firebase services, and integrating Google Translate for bilingual search functionality

Flask is a lightweight and open-source web framework for Python It is designed to be simple, flexible, and easy to use, making it an excellent choice for building web applications and APIs Flask provides the essentials for web development without imposing a rigid structure, allowing developers to choose the tools and libraries they prefer It follows the WSGI (Web Server Gateway Interface) standard and comes with built-in support for unit testing

- Simplicity: Minimalistic design for easy understanding and quick development

- Flexibility: Allows freedom in choosing components and libraries

- Ease of Learning: Straightforward structure facilitates quick learning

- Micro-services/APIs: Ideal for lightweight micro-services and API development

- Extensibility: Easily integrates with third-party libraries and extensions

- Community Support: Active community provides resources and support

- Scalability: Scales effectively for larger applications while maintaining simplicity

- Pythonic: Follows Python principles, appealing to Python developers for clean and readable code

How apply Flask to build our project?

Create API Endpoints: Develop API endpoints specifically tailored for a recommender system using Flask These endpoints encompass routes for user preferences, authentication, and delivering personalized recommendations

Design Routes: Structure the routes within Flask to handle various aspects of the recommender system, including user preferences, authentication processes, and the generation of personalized recommendations

Utilize Flask's Simplicity and Flexibility: Leverage Flask's simplicity and flexibility to efficiently handle HTTP requests This characteristic makes Flask an ideal choice for constructing the backend of our recommender system

Integrate with Backend Services: Seamlessly integrate Flask with backend services to establish communication with the recommendation engine This integration ensures effective processing of user data and the delivery of personalized recommendations

Ensure Efficient Data Flow: Capitalize on the lightweight nature of Flask to ensure an efficient data flow within the recommender system This quality is essential for swift information processing and optimizing overall system performance

SURVEY AND SYSTEM REQUIREMENT

Surveys

- A recent survey by Milieu Insight on Lazada's online consumer behavior in Southeast Asia indicates a substantial shift, with 73% of users considering online shopping an integral part of their daily lives—a significant increase from around 60% two years ago Vietnam's digital economy leads Southeast Asia in growth, expecting a 28% GMV surge from USD 18 billion in 2021 to USD 23 billion, primarily fueled by a 26% e-commerce uptick

- Despite a slight dip in average spending per customer, 80% of consumers persist in online shopping, prioritizing comfort and convenience Key search terms include men's clothing, women's handbags, skincare, and electronics The Tet gift season is anticipated to further boost online shopping Khôi Lê from Meta observes a continued trend of online

"checkout" for various categories, with rising order values, reaching an average of USD 50 in 2022, up from USD 45 in 2021

Figure 15: Vietnam B2C e-commerce revenue in 2017-2022

Advantages and Disadvantages of Shopee and Lazada

✔ Ensures swift access for user-friendly operation

✔ Presents an aesthetically pleasing interface for effortless visibility

✔ Facilitates online support through a seamlessly integrated chat box connecting buyers with sellers

✔ Features intuitively located functions for ease of use and implementation

✔ Offers logical navigation during the product information examination process

✔ Comprehensively outlines website content, covering introductions, policies, and collaboration-affiliation details

✔ Demonstrates compatibility across various screen types, including laptops, tablets, and smartphones

Table 3: Advantages and Disadvantages of Shopee and Lazada

Advantages and Disadvantages of Amazon

✔ Enables multilingual support for a diverse user base

✔ Boasts a straightforward yet fitting and comfortable interface

✔ Ensures easy access and implementation of functions through well-placed locations

✔ Provides logical navigation when clicking to explore product details

✔ Presents comprehensive information about the website, covering introductions, policies, and collaboration-affiliation details

✔ Demonstrates compatibility across a variety of screens, including laptops, tablets, and smartphones

- Only accept Paypal and master card as payment method

Table 4: Advantages and Disadvantages of Amazon

Advantages and Disadvantages of Amazon

✔ Enables multilingual support for a diverse user base

✔ Boasts a straightforward yet fitting and comfortable interface

✔ Ensures easy access and implementation of functions through well-placed locations

✔ Provides logical navigation when clicking to explore product details

✔ Presents comprehensive information about the website, covering introductions, policies, and collaboration-affiliation details

Disadvantages - There are many unnecessary ads

- Can only be used on mobile.

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/Login Customer creates a new account/ login to website and application

2 Forgot Password Customer forgots password and want to get password again

Admin can add, update, delete the user information

4 Manage accounts Admin can view and ban accounts

5 Call customer for order confirmation

Admin can call customers to ask them for order confirm

6 Manage products Admin can add, update, remove product information

7 View all products Admin, guest and customer can see the product list

8 View all invoices Admin can see all invoices and filter them customer can only see his/her invoice history

9 View all users Admin can see the users list

Customer can choose a payment method

11 Rate products Customer can rate products

12 Comment products Customer can comment about products

13 Manage cart Customer can add, update, delete products from cart

14 Order acceptance Admin can accept or refuse COD orders, shipper can accept invoice to delivery

15 Notification Notify to admin when there is some customer do online payment and notify to customer when admin has some actions with their orders

16 Cancel order Customer can cancel order and get refund conditionally

17 Proceed payment Customer can pay for their order in two main ways which are COD and online

18 Refund Admin can refund customers when an order is canceled under some specific conditions

Non-Functional requirements

- User-friendly interface for easy navigation

- Swift data processing to ensure efficient system performance

- Strong security measures to protect customer's personal information

- Easy updates and future expansions through a user-friendly system

- Maintain data integrity to ensure customer trust and satisfaction.

Modeling requirements

- Edit product in cart list

SYSTEM DESIGN

USECASE DIAGRAMS

Figure 20: Fashion Store System Usecase Diagram

Usecase specification

Brief Description The way user website logins

Actor(s) All user login into system

This use case starts when the user wants to access the system

1 User select “Login” function on the system

2 The system displays the Login page

3 User enter the correct username and password then click "Log in"

4 The system will return the user to Home page

Enter the wrong login information

1 If the user enters an invalid password, the system will announce the username or password is invalid and ask the user to re-enter the password.

The user already has an account on the system

Success Log in successfully, the user accesses the system.

Failure Login failed, the user cannot log in.

Brief Description The way customer creates personal account

This use case starts when the user chooses the function to register

1 User chooses the "Register" function in the system

2 The system displays a Register page with information about username, password, phone number, email, address, …

3 Customer fills out the above information and presses the "Register" button

4 The notification system has successfully registered.

Fill out the information missing

1 The system requires re-fill and full information in the "Register" page.

Failed Account has already existed in the system

Success Register successfully, user create account successfully.

Failure Register failed, user created account failure.

Brief Description The way user can get an temporary password from email sent by system to log in to system

Actor(s) All kinds of users

This use case starts when the user chooses the function forgot password

1 User chooses the "Forgot password" function in the system

2 The system will send you an email that gives you a random password for you to log in to the system

1 The system requires re-fill username at the "Login" page.

Table 10: Forgot password usecase specification

Brief Description User changes personal profile

This use case starts when the user wants to edit profile

1 User fill in text boxes

1 The system requires re-fill empty text box at the

Logged in Must be logged in

Table 11: Change profile usecase specification

Brief Description User add a product to cart

This use case starts when the user chooses the function Add to cart

2 User choose size, quantity and color

3 Click Add to cart button

1 The system requires re-fill empty size checkbox at the

Table 12: Add to cart usecase specification

User remove a product from cart

This use case starts when the user chooses the function Add to cart

Table 13: Remove from cart usecase specification

This use case starts when the user selects a cart item to edit

Table 14: Filter cart item usecase specification

User edit information of cart item

This use case starts when the user selects a cart item to edit

6 Click confirm to update information

Brief Description Process for user to checkout

This use case starts when the user checkout

1 Select products in the cart

2 Select location at the map page

4 Leave some note for shipper if the customer wants

Select shipping location Select location for shipper to deliver the order’s package

Success Create a new order successfully

Failure Cannot create a new order

Table 16: Choose from cart to buy usecase specification

Brief Description Customer cancel order

This use case starts when the user cancels an order

2 Click on the order you want to cancel

Order is COD Cannot cancel

Order has finished Cannot cancel

Table 17: Cancel order when waiting admin to confirm usecase specification

Brief Description Customer search for product

This use case starts when the user cancels an order

1 Move to Shop products page

Forget clicking Update cart before clicking

Check out render information of cart before clicking Update cart

Data cannot be empty Must have data in filter or searching text box

Table 18: Search product usecase specification

This use case starts when the user rates a product

1 Move to Product details page

2 Click into rating stars’ bar

3 Click on star you want to rate

Forgot log in System auto redirect to login page

Table 19: Rating product usecase specification

Brief Description The way user comment in product reviews

Actor(s) All customer login into system

This use case starts when the user wants to comment product

1 User select product from shop page

Fill out information missing User click Post button with empty comment textbox

The user already has an account on the system

Table 20: Comment product usecase specification

Name Add or edit product

Brief Description The way admin adds new product to shop

Actor(s) Just admin into system

This use case starts when the admin wants to add new product

1 Admin click in “Add new product” in Product Management

2 Admin fill in all information textbox of product

Fill out information missing Admin click add button with empty information textbox

The admin already has an account on the system

Success Add new product successfully.

Failure Add new product failed.

Table 21: Add product usecase specification

The way admin processes product from shop

This use case starts when the admin wants to process an order

2 Select action you want to update on this order status

Must be logged in The admin already has an account on the system

Table 22: Accept/Decline order (admin) usecase specification

The way admin manages customer accounts

This use case starts when the admin wants to manage accounts

2 View information or allow or ban this account

Table 23: Manage customer account usecase specification

4.2.17 Add third-party delivery order (GHN)

Name Create new shipping order

The way admin create shipping order of a third-party shipping service (GHN)

This use case starts when the admin wants to manage accounts

2 Click on ‘Create delivery order’

Success Create shipping order successfully.

Failure Create shipping order failed.

Sequence diagrams

Figure 28: Add to cart sequence

Figure 29: Remove from cart sequence

Figure 31: Edit cart item sequenceFigure 30: Filter cart items sequence

Figure 33: Cancel order when waiting admin to confirm the order sequence

Figure 35: Filter products sequence diagram

Figure 38: Add or edit product

Figure 39: Accept/Decline order (admin) sequence

4.3.17 Add third-party delivery order (GHN)

Figure 41: Manage customer account sequence diagram

Database

Ord Attribute Type Domain Meaning Note

2 user_name varchar Username of account

3 password text Password of account

4 role varchar Role of account

5 status varchar Allowance status of account user

6 current_jwt text Current JWT of account

Use for avoid parallel login of account

1 id bigint Primary Key Id of staff

2 name varchar Name of staff

3 hometown varchar Home town of staff

4 position varchar Position of staff

5 birth_date date Birth date of staff

6 email varchar Email of staff

7 phone_number varchar Phone number of staff

8 account_id bigint Foreign Key Account ID of staff

9 avatar varchar Avatar URL of staff

2 type varchar Type of notification

3 content text Content of notification

4 additional_data text Data attached to notification

5 receiver_login_account_id bigint Foreign

6 notification_date datetime Sent date of notification

3 phone_fcm_token text Phone fcm token

Used for sending firebase notification

Table 28: device_fcm_token table

2 product_management_id varchar Foreign

Product detail id of product importation

3 import_date datetime Date of importation

4 import_quantity bigint Product quantity of product importation

5 out_of_stock_date datetime Date that a product runs out

Table 29: product_import_manager table

2 product_id varchar Foreign Key Id of product

5 available_quantity bigint product available quatity

6 sold_quantity bigint product sold quantity

7 one_star_quantity bigint product one-star rating

8 two_star_quantity bigint product two-star rating

9 three_star_quantity bigint product three-star rating

10 four_star_quantity bigint product four-star rating

11 five_star_quantity bigint product five-star rating

12 overall_rating int product overall rating

3 product_management_id bigint Product detail ID

4 quantity int Quantity of cart item

5 buying_status varchar Buying status of cart item

Flag to determine cart item has been bought or not

6 select_status tinyint Select status of cart item

Flag to determine cart item that customer chooses to checkout

1 id bigint Primary Key Id of customer

2 name varchar Name of customer

5 account_id bigint Foreign Key Account ID of customer

6 country text Country of customer

7 address text Address of customer

8 city text City of customer

9 avatar varchar Avatar URL of customer

3 Invoice_Date date Created date of invoice

4 payment_status varchar Payment status of invoice

5 order_status varchar Status of invoice

6 admin_acceptance varchar Admin acceptance status of invoice

7 Payment_method varchar Payment method of invoice

8 Reason text Failed reason of invoice

9 Refund_Percentage double Refund percentage of canceled order

10 Currency varchar Currency of invoice

11 Description text Description of invoice

12 total_price double Total price of invoice

13 online_payment_account text Online payment accounts that customer used to pay the order

14 admin_in_charge_id bigint Foreign key

Admin ID who in charge to solve the order

15 note text Note that customer want to leaves

19 Delivery_fee double Shipping fee of order

3 shipping_order_code varchar Foreign

Code of GHN delivery order

4 ship_date datetime Date of finishing delivery

Id of online payment account

2 receiver_account varchar Receiver account number of online payment account

3 receiver_name varchar Receiver name of online payment account

4 additional_info varchar Additional information of online payment account

5 type varchar Payment method of online payment account

Table 35: online_payment_accounts table

1 Invoice-ID bigint Primary Key,

2 Product_Management_ID bigint Primary Key,

3 Quantity int Quantity of product

Table 36: invoice_with_product table

3 product_color varchar Product color

5 comment_content text Comment content

6 comment_date datetime Created date of comment

7 like_quantity int Like quantity of comment

8 reply_quantity int Reply quantity of comment

9 reply_on bigint Id of the comment this comment replies on

If this is original comment, the value will be 0

1 customer_id bigint Primary Key, Foreign Key Id of customer

2 comment_id bigint Primary Key, Foreign Key Id of comment

2 name varchar Name of product

3 selling_price double Selling price of product

4 original_price double Original price of product

5 brand varchar Brand of product

6 discount double Current discount percentage

7 description text Description of product

8 height double Height of product centimeter

9 length double Length of product centimeter

10 weight double Weight of product gam

11 width double Width of product centimeter

1 product_id bigint Primary Key, Foreign key Id of product

2 color varchar Primary key Color of product

Table 40: product_images_management table

1 catalog_id bigint Primary Key, Foreign key Id of category

2 product_id bigint Primary Key, Foreign key Id of product

Table 41: catalogs_with_products table

1 id bigint Primary Key Id of category

2 name varchar Name of category

3 image varchar Image URL of category

Application interfaces

1 Home Button For customer to return to home page

2 Username Text For customers to input username

3 Password Text For customers to input password

4 Customer name Text For customers to input customer name

5 Email Text For customers to input email

6 Phone number Text For customers to input phone number

7 Register Button Register account to system

8 Login Button For customer to return to login page

1 Customer name Text For customers to input username

2 Email Text For customers to input email

3 Phone number Text For customers to input phone number

4 Username Text For customers to input customer name

6 Show password Button Allows users to see the passwords they input

7 Confirm password Text For customers to input confirm password

9 Register Button Register account to system

Table 44: Register mobile interface object

2 User name Text For customers to input username of the account which want to reset

3 Email Text For customers to input email of the account which want to reset

4 Reset password Button Reset password request to the system

Table 45: Reset password page object

4 Forgot password Button For customer to reset password page

5 Sign in Button For customer to send login request to the system

6 Create account Button For customer to go to the register page

3 Show password Button Allows users to see the passwords they input

Button Stores usernames and passwords for subsequent use

6 Login Button For customer to send login request to the system

7 Register Button For customer to go to the register page

Table 47: Login mobile interface object

1 Translation Button For customer to open translation popup

2 Customer avatar Image Display customer avatar image

3 Customer name Text Display customer avatar name

4 Profile Button For customer to view the customer profile

5 Logout Button For customers to send a logout request to the system

6 Shop logo Image Display shop logo

7 Search Text For customer to input anything for search product

8 Search Button For customer to send search request to the system

9 Invoice Button For customer to go to the customer invoice page

10 Cart Button For customer to go to the customer cart page

11 Shop Button For customer to go to the customer shop page

12 Categories Button Display all category of product

13 Banner Image Display shop banner

Figure 51: Customer’s homepage mobile interface

1 Customer avatar Image Display customer avatar image

2 Side bar Button For customer to open side bar

3 Search bar Button Allows users to search for products

4 Categories Text Displays some categories of the shop

5 View categories Button Allows users to view all categories

6 Arrival part Text Show some new products

7 Product Image Display product’s image

8 Product information Text Shows the information of the product

9 Home Button Allows users to return directly to the home page

10 Notification Button Allows users to return directly to the notification page

11 Clothing Button Allows users to return directly to the clothing page

12 Shopping cart Button For users to go to the customer cart page

Table 49: Customer’s homepage mobile interface object

1 Hot discount Image Display hot discount background’s image

2 Product Image Display product’s image

3 Add to cart Button For customer to add that product to their shopping cart

4 View product Button For customer to view the product detail page

Table 50: Product homepage interface object

1 Translate text Text Allow users to enter what they want translated

2 Translate language Button Allows users to select the language they want translated to

3 Language list Text Shows all languages that can be translated

4 Translate result Test Displays translation results from the selected language

5 Translate Button Allows customers to send translation requests to the system

Table 51: Translate language interface object

1 Product large image Image Display the image of the product

Image Customers can select this image to display on large image

3 Zoom Button Customers can click here to zoom and see product details

4 Product’s brand Text Display the product’s brand

5 Product’s name Text Display the product’s name

6 Product’s rate Text Display the product’s rate

Text Display the product’s description

Text Display the product’s discount price

Text Display the product’s selling price

10 Product’s color Text Display all product's color

11 Product’s size Text Display all product's size

12 Product’s value Button Let customer increase or decrease the number of products they want to add to the cart

13 Add to cart Button Let customers send requests to add to cart to the system

Table 52: Product Detail Page Object

Figure 55: Product Detail Page mobile interface

1 Product image Image Display the image of the product

4 Product’s rate Text Display the product’s rate

5 Product’s status Text Display the product’s status

6 Product’s name Text Display the product’s name

Text Display the product’s discount price

Text Display the product’s selling price

10 Product’s color Text Display all product's color

11 Return Button Allows users to return to the previous page

12 Product’s value Button Allows users to enter the number of products they want to add to the cart

13 Add to cart Button Let customers send requests to add to cart to the system

Table 53: Product Detail Page mobile interface object

1 Shop description Button Display the shop description section

Button Display the product specification section

3 Customer review Button Display the customer review section

4 Customer rating Button Let customers vote on the product's rating

5 Rating Button Let customers to submit product reviews to the system

6 Comment Text Let customer to input a comment about the product

7 Comment Button Let customer to send a comment about the product

8 Cancel Button Let customer to cancel a comment about the product

Table 54: Rating product interface object

1 User avatar Image Shows the image that people have left comments on

2 User name Text Shows name that people have left comments on

3 Time Text Shows time that people have left comments on

4 Comment content Text Shows content that has received comments from users

5 Like Button Let customer to reaction any comment they want

6 Comment Button Customers can click on it to display the reply to the selected comment

7 Reply comment Text Customers can enter content to reply to comments

8 Reply comment Button Let customer to send a reply comment

9 Cancel Button Allow customers to cancel to send a reply comment

10 Reply comment Text Displays the content of reply comments

11 Close comment Button Allow customers to hide all reply comments

12 Another comment Button Allow customers to show more reply comments

Table 55: User comment interface object

Figure 58: User comment mobile interface

1 Product’s size Button Allows users to choose product size

Text Display the product’s description

3 Previous comment Button Allows customers to view previous comments

Text Display the user comment name

5 Comment date Text Displays the date that user commented

6 Comment content Text Display user comment content

7 Reaction count Text Displays the number of people who have reacted to this comment

8 Reply Button Allows users to reply to selected comments

9 Reaction Button Allow users to react to selected comments

10 Show replies Button Displays comments that have replied to the selected comment

Table 56: User comment mobile interface object

Image Shows the image of the related product

Text Shows the information of the related product

4 Quick view Button For customer to view the product detail page

Table 57: Related products interface object

1 Search product Text For customer to input anything for search product

2 Categories Button For customer to input anything for search product

3 Brands Button Users can choose any brand to filter

4 Price Text Displays the price range that the user wants to filter

5 Price slider Button Users can click and drag and drop to adjust the price

6 Filter Button Users can click to send a filter request to the system

7 Return default Button Return all filter values to default

8 Sort product Button Customers can choose to sort by desired product name

9 Show Button Customers can see the number of products displayed on each page

10 Number of products Text Displays the total number of products available

11 Product’s image Image Display images of the product

13 Quick view Button For customer to view the product detail page

14 Product’s detail Text Display details of the product

15 Page Button Users can use it to navigate between product pages

Figure 61: Clothing page mobile interface

1 Product filter Button Allows users to filter products by category

2 Sale Text Show users products that are currently on sale

3 Product’s image Image Display images of the product

4 Product’s rate Text Displays the product's rating rate

5 Product’s detail Text Display details of the product

Table 59: Clothing page mobile interface object

1 Brands Button Users can choose any brand to filter

2 Price Text Displays the price range that the user wants to filter

3 Price slider Button Users can click and drag and drop to adjust the price

4 Filter Button Users can click to send a filter request to the system

5 Return default Button Return all filter values to default

6 Page Button Users can use it to navigate between product pages

1 Product’s image Image Display the product’s image

2 Product’s details Text Display the product’s details

3 Change Button Display a popup window for users to change product information

4 Product’s price Text Display the product’s price

5 Product’s quantity Text Display the product’s quantity

6 Product’s discount Text Display the product’s discount

7 Product’s total Text Display the product’s total price

8 Delete product Button Allow users to remove products from their cart

9 Continue Button Return to clothing page

10 Update Button The user sends a request to the system about the product he wants to pay for

11 Cart price Text Displays the total price of the shopping cart

12 Check out Button The customer sends a payment request to the system

Figure 64: Cart page mobile interface

1 Filter product Button Allows users to filter products in the shopping cart

2 Cart price Text Displays the total price of the shopping cart

3 Check out product Button Allows users to select products to check out

4 Product’s image Image Displays images of the product

5 Product’s detail Text Displays some product information

6 Product’s price Text Display the product’s price

7 Product’s quantity Text Display the product’s quantity

8 Delete product Button Allow users to remove products from their cart

9 Check out Button The customer sends a payment request to the system

Table 62: Cart page mobile interface object

1 Address Text Shows the address that was located

2 Search Text Allows users to enter the address they want to search

3 Search Button Allows users to send search request to the system

4 User location Button Obtain the user's address based on the device that is in use

5 Confirm Button Allows users to confirm location for delivery

6 Map Image Display the map to the user

7 User map location Text Displays the exact value of the user's location on the map

Table 63: Location selects interface object

Figure 66: Location selects mobile interface

1 Return Button Help users return to the shopping cart page

2 Search Text Allows users to enter the address they want to search

3 Clear Button Help users delete content they've entered

4 Map Image Display the map to the user

5 User map location Text Displays the exact value of the user's location on the map

6 User location Button Obtain the user's address based on the device that is in use

7 Confirm Button Allows users to confirm location for delivery

Table 64: Location selects mobile interface object

Text Display information of the checkout product

2 Product’s price Text Displays the price of the checkout product

3 Subtotal Text Displays the subtotal price of the order

4 Shipping fee Text Displays shipping fees based on the user's selected location

5 Total Text Displays the total price of the order

6 Payment method Button Allow users to choose payment methods of their choice

7 Confirm order Text The user sends an order confirmation request to the system

Table 65: Place order interface object

Figure 68: Place order mobile interface

1 Payment method Button Allow users to choose payment methods of their choice

2 Subtotal Text Displays the subtotal price of the order

3 Shipping fee Text Displays shipping fees based on the user's selected location

4 Total Text Displays the total price of the order

5 Confirm order Text The user sends an order confirmation request to the system

Table 66: Place order mobile interface object

3 Account number Text Display account number for users when transferring money

4 Account name Text Display account name for users when transferring money

5 Payment content Text Display content for users to enter when transferring money

6 Payment price Text Shows the entire amount that the user needs to transfer

7 Confirm payment Button Verify your payment and get straight to the home page

Table 67: Confirm payment interface object

Figure 70: Confirm payment mobile interface

1 Return Button Help users return to the shopping cart page

5 Payment method Text Show payment method

4 Copy Button Helps users quickly copy selected content

7 Confirm payment Button Verify your payment and get straight to the home page

Table 68: Confirm payment mobile interface object

1 Profile image Image Show the user's profile image

2 Profile name Text Show the user's profile name

3 Profile email Text Show the user's profile email

4 Profile number Text Show the user's profile phone number

5 Profile address Text Show the user's profile address

6 Profile city Text Show the user's profile city

7 Profile country Text Show the user's profile country

8 Edit Button Allows users to send edit requests to the system

Table 69: Profile details page object

1 Profile image Image Show the user's profile image

2 Upload image Button Let’s users choose a picture from their personal computer

3 Save image Button Allows users to send image change requests to the system

4 Edit name Text Allows users to enter the name they want to edit

5 Edit email Text Allows users to enter the email they want to edit

6 Edit number Text Allows users to enter the phone number they want to edit

7 Edit address Text Allows users to enter the address they want to edit

8 Edit city Text Allows users to enter the city they want to edit

9 Edit country Text Allows users to enter the country they want to edit

10 Save Button Allows users to send requests to change information to the system

Table 70: Edit profile page object

1 Admin acceptance Button Users can filter invoices according to admin acceptance

2 Payment status Button Users can filter invoices according to payment status

3 Order status Button Users can filter invoices according to order status

4 Payment method Button Users can filter invoices according to payment method

5 Invoice information Text Shows the user the amount and origination date of the invoice

6 Invoice acceptance Text Displays the admin acceptance status of the invoice

Text Displays the admin payment status of the invoice

8 Invoice order status Text Displays the order status of the invoice

Text Displays the payment method of the invoice

10 Detail Button Take users to the page to view product information in the invoice

11 Page Button Allows users to move between invoice pages

Table 71: Purchase history page object

Figure 74: Purchase history mobile interface

1 Filter Invoice Button Display a popup page for users to filter invoices

2 Date Button Helps users filter invoices by date

3 Invoice id Text Displays invoice id information

4 Invoice information Text Displays some other information of the invoice

5 View detail Button Helps users navigate to the page to view detailed invoice information

6 Cancel Button Allows users to send requests to cancel invoices to the system

Table 72: Purchase history mobile interface object

7 Return Button Takes the user to the

8 Cancel Invoice Button Allows users to send a request to cancel this invoice to the system

Table 73: Purchase detail interface object

Figure 76: Purchase detail mobile interface

1 Invoice id Text Displays information about the product's invoice id

2 Product’s image Image Show images of products in the invoice

Text Show information of products in the invoice

4 Product’s price Text Show price of products in the invoice

5 Product’s quantity Text Show quantity of products in the invoice

6 Invoice date Text Displays the date of establishment of the invoice

7 Payment method Text Displays the payment method of the invoice

8 Payment status Text Displays the payment status of the invoice

9 Total item price Text Total original price of the products

10 Total invoice price Text Total price of the invoice

Table 74: Purchase detail mobile interface object

1 Home Button Let the admin return to the client's home page

2 Username Text For admin to input username

3 Password Text For admin to input password

4 Login Button Allows admin to send a request for login to the system

Table 75: Admin login page object

1 Logo Image Displays the page's logo image

2 Home Button Direct admin to the exact admin home page

3 User Button Direct admin to the exact admin user page

4 Product Button Direct admin to the exact admin product page

5 Invoice Button Direct admin to the exact admin invoice page

6 Refund history Button Direct admin to the exact admin refund history page

7 Logout Button Allows admin to send a request for logout to the system

8 User Button Allows admins to filter users by status

9 User’s id Text Displays information about the user's id

10 User’s name Text Displays information about the user's name and their profile image

11 User’s email Text Displays information about the user's email

12 User’s level Text Displays information about the user's level

13 User’s status Text Displays information about the user's status

14 User’s detail Button Take the admin to the page to view user information

Table 76: Customer management page object

1 User’s image Image Displays information about the user profile's image

2 User’s name Text Displays information about the user profile's name

3 User’s email Text Displays information about the user profile's email

Text Displays information about the user profile's phone number

5 User’s address Text Displays information about the user profile's address

6 User’s city Text Displays information about the user profile's city

7 User’s country Text Displays information about the user profile's country

8 User’s status Button Allow admin to manage user account status: allow or ban

9 Cancel Button Admin returns to the invoice page

10 Save Button Admin sends request to change user status to the system

Table 77: Information detail page object

1 Create Button Allows admins to add a new product

2 Product’s id Text Displays information about the product’s id

3 Product’s name Text Displays information about the product’s name and image

4 Product’s brand Text Displays information about the product’s brand

5 Product’s price Text Displays information about the product’s price

6 Product’s discount Text Displays information about the product’s discount

7 Product’s quantity Text Displays information about the product’s quantity

8 Product’s detail Button Take the admin to the page to view product’s information

Table 78: Customer product page object

1 Invoice name Text For admin to input product’s name

2 Product’s brand Text For admin to input product’s name

Text For admin to input product’s selling price

4 Product’s discount Text For admin to input product’s discount

5 Product’s length Text For admin to input product’s length

6 Product’s weight Text For admin to input product’s weight

7 Product’s height Text For admin to input product’s height

8 Product’s width Text For admin to input product’s width

Text For admin to input product’s description

10 Product’s color Text For admin to input product’s color

11 Product’s image url Text For admin to input product image url

12 Product’s size Text For admin to input product’s size

13 Product’s quantity Text For admin to input product’s quantity

14 Cancel Button Admin returns to the product page

15 Save Button Admin sends request to add new product to the system

Table 79: Add product page object

1 Product’s image Image Displays images of the product

2 Product’s name Text Displays name of the product

3 Product’s brand Text Displays brand of the product

3 Product’s color Text Displays color of the product

4 Product’s quantity Text Displays quantity of the product

Text Displays original price of the product

Text Displays selling price of the product

Text Displays description of the product

14 Cancel Button Admin returns to the product page

14 Edit Button Admin go to the edit product page

15 Add color Button An additional interface appears for the admin to add other colors of the product

Table 80: Product detail page object

1 Start invoice date Text Allows admins to filter invoices by start date

2 End Invoice Date Text Allows admins to filter invoices by end date

3 Admin acceptance Button Admin can filter invoices according to acceptance

4 Payment status Button Admin can filter invoices according to payment status

5 Order status Button Admin can filter invoices according to order status

6 Payment method Button Admin can filter invoices according to payment method

7 Return default Button Allows admin to return to original filter status

8 Invoice id Text Displays the invoice id

9 Invoice date Text Displays the invoice date

Text Displays the payment method of the invoice

Text Displays the admin payment status of the invoice

12 Invoice acceptance Text Displays the admin acceptance status of the invoice

13 Invoice order status Text Displays the order status of the invoice

14 Invoice price Button Displays the total price of the invoice

15 Detail Button Allows users to invoice detail page

1 Invoice title Text Display the id and payment method of the invoice

3 Product’s price Text Displays the price of the product

4 Invoice price Text Displays the price of the invoice

5 Invoice status Button Allows admin to update invoice status

6 Return Button Bring admin back to invoice page

7 Confirm Button Admin can send request to update invoice status to the system

Table 82: Invoice detail page objec

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 choose VSCode is an extremely popular and very positive IDE for developers to create projects because VSCode can add extensions of the programming language to help them run on IDE easily and VSCode has the extension visual studio live share extension can let we join the project together on the host IDE and we can code or debug together, we can log in that extension via GitHub

First, the base technology we use to code around our project is ReactJS, that base on JavaScript programming language using Functional Component to create function for our project instead of Class Component

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

To make a mobile application for customers, we use Flutter – a framework of Dart language to build and handle events, API response and enhance UX of customers This can make our application more popular and user-friendly

Lastly, we use Flask to write API and deploy, use sequential neural network keras to create a model neural network and to develop the recommendation system for our applications (tensorflow to implement resnet50 model, data processing and write API.)

- This is our Back-end file structure

Figure 91 Back-end file structure

- This is our mobile file structure

- This is our recommendation system file structure

Figure 93: Recommendation system file structure

- This is our Front-end file structure

Figure 94: Front-end file structure

Deploymentation

We deploy Front-end, Back-end and Recommender System on Vietnix

Link website and account information:

Link website Username Password admin 123 user 123

Testing

Figure 96: Add to cart successful

Figure 98: Product detail and add to cart

CONCLUSION

Tiêu đề	Building a Fashion Store Website
Tác giả	Nguyễn Hoàng Sang, Nguyễn Minh Hiếu, Nguyễn Quang Tùng
Người hướng dẫn	MSc. Nguyễn Trần Thi Văn
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Capstone Project
Năm xuất bản	2023
Thành phố	Ho Chi Minh City

Định dạng
Số trang	210
Dung lượng	9,54 MB