Building an e commerce website for fashion shop totoro store

Building an e commerce website for fashion shop totoro store Building an e commerce website for fashion shop totoro store

VIETNAM NATIONAL UNIVERSITY, HANOI

SUPERVISOR: PhD Nguyen Van Tinh

STUDENT: Nguyen Duc Thinh

STUDENT ID: 19071632 COHORT: Faculty of Applied Sciences

SUBJECT CODE: INS401401

MAJOR: Informatics and Computer Engineering

Hanoi – Year 2024

3

THANKS

I want to express my sincere gratitude to PhD Nguyen Van Tinh for his enthusiastic guidance throughout the design project, which has led to today's successful results I deeply appreciate the invaluable support and guidance you provided during the project completion His consistent, in-depth knowledge, coupled with his enthusiastic and dedicated spirit, helped me overcome challenges and develop comprehensive skills

I also want to convey my appreciation for his valuable assistance and advice in editing and refining the project The constructive feedback and detailed comments have helped

me gain a deeper understanding of the content and improve my evaluation and assessment abilities

self-Furthermore, I want to extend my thanks to the entire school, friends, family, and everyone who shared knowledge, opinions, and encouragement during the project The support from supervisor and the surrounding community has been a significant source

of motivation, greatly contributing to the successful completion of this project I believe that the acquired knowledge and skills will form a solid foundation for future development

Once again, I sincerely thank you and everyone who supported me on this journey Best regards,

4

DECLARATION OF AUTHORSHIP

I, Nguyen Duc Thinh, solemnly declare that the project is the result of my own research, conducted under the guidance of PhD Nguyen Van Tinh All the findings presented in this project are genuine and original, and not plagiarized from any other source Every reference in this project, including images, tables, figures, and citations, is properly and thoroughly documented in the bibliography I take full responsibility for any instance of plagiarism that violates the school's regulations

Hanoi, date 17 month 06 year 2024

Student (Signature and Full name)

5

ABT RACT

I am currently witnessing the growth of the e-commerce market in Vietnam, and as a result, I have decided to create my own sales website My goal is to establish a modern, user-friendly e-commerce platform that can cater to users and has the potential for future expansion To start, I identify the target audience and understand their shopping needs I will conduct research on similar sales websites to assess their strengths and weaknesses, evaluate market potential, trends, and development opportunities From my analysis, I have found that the fashion sector is one of the leading e-commerce markets with great potential for the future From the reasons above, to build a sales website, I need to focus

on designing the MySQL database, creating a user-friendly interface, and developing wireframes and prototypes for the main pages The technology I choose, including programming languages, frameworks, libraries such as HTML, SCSS, Angular, Bootstrap 5, Java, JavaSpringBoot, and JwtToken, will cater to the project's specific needs Web development will involve programming essential website functions such as the shopping cart, user registration/login, and product management, AI chatbox with a focus on addressing any arising issues and ensuring timely recovery to maintain the website's stability and security

Building a sales website involves careful planning and preparation, including market research, design, and development The success of the project hinges on investing in user experience (UX), enhancing security, and developing new features to meet evolving market needs It is important to continually improve the user interface and experience, prioritize information security, and expand features to enhance the customer shopping experience

Keywords: Fashion shop, Java web, Java SrpingBoot, Srping Security Authentication,

AI chatbox

6

Table of Contents

THANKS 3

PROTEST Error! Bookmark not defined. ABTRACT 5

Chapter 1 Overview 10

Chapter 2 Theory 12

2.1 ChatGPT 12

2.1.1 Introduction of ChatGPT 12

2.1.2 Benefits of ChatGPT in customer care 13

2.1.3 Limitation of ChatGPT 13

2.2 Angular 14

2.2.1 History of Angular 15

2.2.2 Advantage and disadvantage of Angular 16

2.2.3 Reason to choose Angular 17

2.3 Spring Boot 19

2.3.1 Advantage of Spring Boot 20

2.3.2 Reason to choose Spring Boot 20

2.4 MySQL 22

2.4.1 History of MySQL 22

2.4.2 Reason to choose MySQL 22

Chapter 3 Result 23

3.1 Back-end designs 23

3.1.1 Database 26

3.1.2 Data Transfer Objects (DTO) 30

7

3.1.3 Controllers 32

3.1.4 Other configuration 40

3.2 Front-end designs 50

3.2.1 Login/Registration and Account 50

3.2.2 Shopping 51

3.2.3 Manager 52

Chapter 4 Conclusion 55

References 56

8

List of Figures

Figure 2.1 Angular workflow (CSSChopper, 2024) 15

Figure 2.2 History of Angular 16

Figure 2.3 MySQL Foreign Keys Supporter 23

Figure 3.1 Website workflow 23

Figure 3.2 Sql script for MySQL 29

Figure 3.3 Imports of ProductDTO 30

Figure 3.4 Configuration of ProductDTO 32

Figure 3.5 Create product 33

Figure 3.6 update product 35

Figure 3.7 View product’s images 36

Figure 3.8 Get production without any condition 37

Figure 3.9 Get product by ID(s) 38

Figure 3.10 Detele product by ID 39

Figure 3.11 Create virtual datas with javaFaker 40

Figure 3.12 Flyway diagram 40

Figure 3.13 Flyway configuration 42

Figure 3.14 Kafka and Zookeeper workflow 43

Figure 3.15 Kafka configuration 44

Figure 3.16 Redis configuration imports 45

Figure 3.17 Redis configuration 46

Figure 3.18 Spring Security configuration 48

Figure 3.19 Merlin on Chrome web store 49

Figure 3.20 Merlin on Totoro shop 49

9

Figure 3.21 Login Form 50

Figure 3.22 User’s information page 50

Figure 3.23 Totoro’s home page 51

Figure 3.24 Product’s details page 51

Figure 3.25 Order page 52

Figure 3.26 List of orders 52

Figure 3.27 Update order’s details 53

Figure 3.28 Update category 53

Figure 3.29 Product management 54

Figure 3.30 Insert Product 54

Figure 3.31 Update Product 55

10

Overview

E-commerce (EC) currently plays a crucial role in the economic growth of countries by facilitating business activities and meeting the new demands of businesses and consumers In Vietnam, EC is rapidly developing, becoming a popular business method due to modern internet infrastructure and technology In 2020, despite the impact of the Covid-19 pandemic, Vietnam's EC market achieved a growth rate of 18%, reaching a scale of $11.8 billion It is projected that Vietnam's digital economy could surpass $52 billion by 2025 However, Vietnam's EC still faces challenges in terms of human resources and technical infrastructure, leading to a lack of consumer trust (Capital, 2024) According to Statista, the compound annual growth rate (CAGR) of the fashion e-commerce industry is expected to increase by 14.2% from 2017 to 2025 CAGR is expected to reach a value of 1,000 billion USD in 2025, in The US market accounts for about 20%, equivalent to 204.9 billion USD Particularly in the Vietnamese market, the fashion sector is the main pillar of the e-commerce industry, second only to the food industry (Renna, 2022)

To ensure sustainable EC development, it is necessary to improve the legal framework, enhance IT infrastructure, and improve the quality of after-sales services Legal policies should ensure a healthy business environment, protect the legitimate interests of participants, and prevent commercial fraud Simultaneously, investment in technology infrastructure, particularly in increasing internet speed, will help make EC transactions smoother and safer From a business standpoint, focusing on enhancing brand reputation and the quality of after-sales services is crucial in increasing customer loyalty (Vu, 2024) The development of EC is not only an inevitable trend but also a decisive factor in promoting the digital economy and improving the quality of life The government needs

to continue improving the legal framework and technology infrastructure, while businesses need to improve service quality to build trust and attract more customers I've decided to create a shop website that integrates traditional website functions with modern technologies such as SHA256 security and an AI shopping assistant The user-

11

friendly interface is designed using artificial intelligence (AI) and the Bootstrap framework The ultimate aim is to establish a convenient e-commerce system that stays up-to-date with technological advancements in today's era

to swiftly respond to users' inquiries

ChatGPT is often credited with kickstarting the AI boom, sparking significant investment and public attention in the field of artificial intelligence By January 2023, it had become the fastest-growing consumer software application in history, attracting over 100 million users and contributing to OpenAI's current valuation of $86 billion Its release spurred the launch of competing products such as Gemini, Claude, Llama, Ernie, and Grok Microsoft introduced Copilot, based on OpenAI's GPT-4 In June 2024, Apple Inc and OpenAI announced a partnership, integrating ChatGPT into the Apple Intelligence feature of the Apple operating system However, some observers have expressed concerns about the potential for ChatGPT and similar programs to replace or undermine human intelligence, by enabling plagiarism or disseminating misinformation (Wikipedia, ChatGPT, 2024)

Reportedly, the GPT Chat tool developed by OpenAI has amassed a user base of 100 million people per month, just two months after its release, making it one of the fastest-growing applications in history According to Sensor Tower statistics, the short video-sharing platform TikTok took 9 months to reach 100 million users after its global release, while Instagram achieved this milestone in 2.5 years, and the Google Translate application accomplished it in 6.5 years (Tower, 2023)

13

1.1.2 Benefits of ChatGPT in customer care

ChatGPT integrated into chatbox brings intelligence to automated customer care technology The giants such as Google, Microsoft, Amazon and Facebook to Startup companies all spend time and resources to develop ones AI chatbox excel in the customer service market thanks to the messaging explosion in this era

1.1.2.1 Quick Problem Solving

AI virtual assistants process vast amounts of data to understand previous customer interactions, preferences, requirements, and context This allows them to recommend relevant content and prevent customer frustration, increasing their intelligence in problem-solving

1.1.2.2 Significant Cost Reduction

AI chatbox provide an effective solution to reduce personnel costs by efficiently handling simple tasks and responding to messages automatically They prove to be much more productive than traditional customer service departments

1.1.2.3 Personalized Customer Care

AI-integrated chatbots offer personalized and real-time customer care through proactive conversations They are widely used across various industries, such as banking, retail, and fashion, to improve customer service and maintain real-time conversations with customers

1.1.2.4 24/7 Customer Service

AI chatbots leverage a business's information to provide 24/7 customer support, replacing the need for human teams to handle frequently asked queries and customer issues, regardless of time and location

The training data may contain algorithmic bias, which becomes apparent when ChatGPT generates responses to prompts involving descriptions of people For example, in one instance, ChatGPT created a rap in which women and scientists of color were portrayed

as inferior to white male scientists This misrepresentation highlights the harm that can occur due to bias in training data (Wikipedia, ChatGPT, 2024)

1.2 Angular

Angular is an open-source framework written in TypeScript and is used to create web interfaces It was created by Google in 2009 and is still maintained by the company Angular is known for being a powerful front-end framework used for advanced HTML programming It is often employed to develop Single Page Application projects The current stable version is Angular 18.0.2, which was released on June 5, 2024 and uses TypeScript 5.2 (Angular, 2024)

Many large companies, such as Upwork, Forbes, and General Motors, use Angular Proficiency in Angular could lead to excellent job opportunities However, users must have a solid understanding of CSS, and HTML, and be familiar with the Model-View-Controller architecture

16

Figure 2.2 History of Angular

1.2.2 Advantage and disadvantage of Angular

1.2.2.1 Advantage

Angular is highly regarded by experts for its ability to help Single Page Applications work easily and quickly Thanks to its capacity to bind data onto HTML platforms, front-end code is often very user-friendly It also enables convenient unit testing and makes it easier to reuse components Furthermore, Angular allows programmers to write less code with increased functionality, ultimately saving programming time and enhancing work efficiency Angular is compatible with a wide range of platforms and can be used on various browsers, including those on computers and mobile devices

17

1.2.2.2 Disadvantage

Security: Angular is primarily a end framework Typically, the security of the end is not as robust as the back end Therefore, it is important to develop a data validation system to ensure the best results when using the API

front-Security considerations: The website may be vulnerable if accessed using browsers that have JavaScript disabled

1.2.3 Reason to choose Angular

1.2.3.1 Angular helps improve programming productivity

In recent years, there have been significant advancements and increased attention on website development In ECMAScript (ES) 2015, commonly known as ES6, new features such as classes and arrow functions have been introduced These updates have made coding with Angular 2+ much more detailed and easier

Additionally, the adoption of TypeScript, seen as an improved version or a remarkable language extension of JavaScript, has further enhanced Angular The combination of Angular and TypeScript provides a tool to address existing issues of AngularJS, such as data type checking and safer code refactoring As a result, debugging has become easier, and programmers have gained a deeper understanding of their source code

1.2.3.2 The structure develops clearly

Angular offers a powerful framework for application development, with a detailed structure that revolves around three main elements: class, added dependencies, and model-view-viewmodel (MVVM) Angular makes use of ES6 classes with various properties to construct important structures For instance, creating an Angular component involves creating a class with essential properties, while creating Angular modules requires defining a class and adding necessary properties

Angular provides a clear structure for developing each feature of an application Dependencies are used as needed within the application; for instance, HTTP and router dependencies can be easily integrated by placing them inside the class constructor

18

Moreover, the MVVM model greatly supports Angular in client-side application development Developers typically need to focus on three key factors: user interface, interface control source code, and data model for the interface

Angular with MVVM clearly defines the various components of the MVVM pattern:

- The interface (view) is defined in a template that includes the HTML for a specific component This template contains all layouts or elements within that layout

- The properties of the component class are referred to as models, which essentially represent the data used by the view for execution

- The view/model is a class that observes both the views and models It is responsible for retrieving data and ensuring user interactions on the view

1.2.3.3 Extensive Binding

Many web applications rely on data to function These applications retrieve data from a server, display it to users, and use templates When users interact with the data, it can be modified, verified, and saved back to the server Angular's data binding simplifies this process by allowing HTML elements in the template to automatically update when connected to features in the class

Angular applies two-way binding for interactions that require changing user data This means that changes made in the view will automatically update the model properties in the class Moreover, Angular supports property binding, allowing users to control the DOM by binding HTML properties to component class properties, resulting in automatic updates in the view

Angular's event binding is also beneficial, as it enables users to handle events in the view

by attaching events and methods to the class When an event occurs, the corresponding method will be executed This extensive binding feature helps to display data, manage the DOM, and execute events quickly and smoothly

19

1.2.3.4 Full navigation feature support

Web applications typically consist of multiple views with similar functions, such as introduction pages, instructions, and informational views These views need to be displayed at the right place and time, which is where routing comes in

Angular's routing feature is activated based on user interaction and allows for adding data to routers to display content dynamically Routers can also be protected, allowing access only to logged-in users or those with specific permissions This helps prevent users from leaving a page midway through an operation and allows them to leave only after confirmation

Angular also supports child-routing for navigation within a router, making navigation within an Angular application effective and flexible

1.2.3.5 Minimize the size and maximize the performance of the application

Size and performance are closely related when working on a website platform Using smaller components can speed up startup, download and compile times in the browser Angular aims to reduce component size and increase performance for programmers There are many methods to reduce application size One approach is to minimize the size

of each component and arrange them in sequence within the Angular module to allow related logic to be downloaded simultaneously Additionally, lazy loading can be used in routes to download modules for displaying the user-requested content

During the application build process, a compiler called AOT will operate once The uncompiled version of the app is rendered to the user by the browser for the first time

1.3 Spring Boot

Spring Boot is a Java framework that simplifies the process of building web applications and services It comes with default configurations for various libraries and toolkits, which support the building, deploying, and managing of Spring-based applications Spring Boot optimizes the Java application development process by allowing developers

to focus on building the main features of the application, without having to deal with complex configurations

20

1.3.1 Advantage of Spring Boot

Spring Boot reduces the need for manual configuration in Java application development through its automatic default configuration

Spring Boot seamlessly integrates with various technologies and libraries in the Spring Framework ecosystem, enabling easy integration of different modules and services without complex configuration

Spring Boot includes embedded servers such as Tomcat, Jetty, or Undertow, eliminating the need for additional server configuration when deploying applications

Spring Boot uses intelligent auto-configuration to adapt the application's configuration based on the libraries and modules used

Spring Boot offers robust dependency management tools like Maven or Gradle, facilitating effective management of application dependencies

Spring Boot provides tools for simple application monitoring and management, such as the Spring Boot Actuator

1.3.2 Reason to choose Spring Boot

1.3.2.1 Spring Application

The Spring Application takes advantage of Spring Boot's automatic configuration to reduce the complexity of application setup It scans packages containing application classes and components to detect and configure necessary beans automatically

The utility comes with default configurations for web applications and allows integration with embedded servers like Tomcat, Jetty, or Undertow for easier web application deployment

Additionally, the Spring Application can download application configuration from various sources such as properties files, environment variables, and command-line configurations By managing events at startup and application initialization, developers can easily intervene in the application's startup process

21

1.3.2.2 Externalized configuration

In Spring Boot, this feature enables users to handle the application configuration process using external configuration files and environment variables without needing to modify the source code It enhances application flexibility by facilitating configuration changes without requiring recompilation of the source code

Spring Boot allows application configuration using various file formats such as YAML, Properties, or JSON Users can specify the file locations using command-line parameters, environment variables, or default locations Moreover, different profiles can

be utilized to configure applications for various environments like development, testing, staging, and production This allows for configuring unique profiles for each environment without having to alter the source code Spring Boot also supports configuration using environment variables, making it easy to adjust application settings without modifying configuration files

1.3.2.3 Profiles

Spring Boot profiles enable the definition and management of application configurations for different environments (e.g., development, testing, staging, and production) without requiring changes to the source code This flexibility makes the application easily deployable in various environments

Separate configuration files for each profile can be defined using the prefix

"application-" followed by the profile name For instance, "application-"application-dev.yml"application-" for development environments, "application-prod.yml" for production environments, and corresponding properties can be used

The desired profile can be specified via profiles or command line parameters when launching the application Spring Boot loads the configuration from the file that matches the specified profile

Profiles allow the overriding of default configurations specified in the global configuration file, enabling customization without modifying the original file

22

1.4 MySQL

MySQL is an open-source Relational Database Management System (RDBMS) that operates based on the client-server model It is developed by Oracle Corporation and provided to the user community for free MySQL is widely used globally due to its high-performance optimization, support for multiple programming languages, and important features such as ACID (Atomicity, Consistency, Isolation, Durability) to ensure data integrity, support for foreign keys to connect data between tables, and data backup and restoration capabilities (Wikipedia, MySQL, 2024)

1.4.1 History of MySQL

In 1995, two Swedish programmers, Michael Widenius and David Axmark, developed MySQL as a tool for database management for a website being developed by Widenius Over time, MySQL gained popularity as a widely used database management system, leading to the founding of MySQL AB in 2000 to oversee its development MySQL AB released new and improved versions of MySQL regularly until it was acquired by Sun Microsystems in 2008 Following Sun Microsystems' acquisition by Oracle Corporation

in 2010, MySQL has continued to be updated and developed to meet the needs of users and remains widely used in web applications and other data storage systems (Wikipedia, MySQL, 2024)

1.4.2 Reason to choose MySQL

MySQL supports a wide range of programming languages, including C, C++, Python, Perl, Java, and PHP This allows developers to create applications on various platforms using MySQL The ACID feature in MySQL ensures data integrity during operations by performing all database operations simultaneously and safely Website administrators can easily back up and restore data to ensure the safety and reliability of their users' and customers' data in case of problems

Moreover, MySQL provides performance optimization tools to help developers process data quickly and efficiently In addition, supports foreign keys to establish connections between tables within the same database, making it simple for developers to retrieve information from different tables in the database

23

Figure 2.3 MySQL Foreign Keys Supporter

Result

1.5 Back-end designs

Figure 3.1 Website workflow

In this project, I implemented the model-view-controller (MVC) paradigm When a client sends a request, it includes specific parameters and values for the controller to handle Upon receipt, the parameters and values of request go through a filtering process

to categorize the request type This filtering acts as a mediator for incoming requests Different HTTP methods are assigned to specific endpoints to categorize request types:

@GetMapping("/products") to get a list of products

@PostMapping("/products") to create a new product

@PutMapping("/products/{id}") to update an existing product

24

@DeleteMapping("/products/{id}") to delete a product

After passing through the filter, these requests are converted into JSON objects These JSON objects are then transformed into Data Transfer Objects (DTO) request objects During this transformation, data validation is performed using annotations:

@NotBlank to validate that a string is not empty and does not contain only spaces

@NotNull to validate that a value is not null

@Pattern to validate that a string matches a regular expression

Once the DTOs have reached the controller, they will be methodically handled by

@RestController which marks a class as a RESTful web service controller The method will then return JSON data The controller handles different responses:

25

After data operations are performed, the controller recognizes the completion of the process by receiving information from Repositories and Services It will return data to the client in the form of HTTP response

26

1.5.1 Database

27

28