(Đồ án tốt nghiệp) Build ECommerce website using mern stack

(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack

HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY FOR HIGH QUALITY TRAINING

    

GRADUATION THESIS BUILD E-COMMERCE WEBSITE

USING MERN STACK

HO NGOC DINH CHAU Student ID: 17110008 NGUYEN THI BICH NHAN Student ID: 17110195

Major: SOFTWARE TECHNOLOGY School Year: 2017 – 2021

Advisor: Dr LE VAN VINH

Ho Chi Minh City, June 2021

Secondly, we would sincerely appreciate Mr Le Van Vinh helping our completion of the project who is really enthusiastic about guiding theories as well as programming skills, especially how to solve problems Once again we are eternally grateful for everything you’ve taught us and we wish you have a lot of heaths

With the conditions of time and limited experience of student, this report cannot avoid defects We look forward to receiving your advice and comments so that we can improve the actual system in the future

And finally, We wish nothing but the best for everybody

We are sincerely grateful!

Ho Chi Minh City, June 28, 2021

STUDENTS

Ho Ngoc Dinh Chau Nguyen Thi Bich Nhan

ABSTRACTS

    

As you all know, any business in the world has its proprietary name, specific characteristics and the own trademark to they can approach their all customers even though they're far away They can approach customers through the way to create their own website to help them give their products and services to customers lively at that time Furthermore, it's also an easy way to buying and selling products but also does not take the most time On the other hand, help marketing strategy quickly and does not take the most time For individuals, the website brings full necessary products information and easy to choose items

TABLE OF CONTENTS

ACKNOWLEDGEMENTS 1

ABSTRACTS 2

ABBREVIATION LIST 3

CHAPTER 1: INTRODUCTION 16

1 Rationale 16

2 Objectives 16

3 Contents 16

4 Research methods 17

5 Practical scientific significance 17

CHAPTER 2: FUNDAMENTALS 18

1 Introduction to the Technical Stack 18

1.1 What is the Technical Stack? 18

1.2 List of the top Stacks 18

2 Introduction to the MERN stack 18

2.1 What is the MERN stack? 18

2.2 How does the MERN Stack work? 18

2.3 Why use the MERN Stack? 19

3 Introduction to the MongoDB 19

3.1 What is the MongoDB? 19

3.2 What is the MongoDB Atlas? 19

3.3 Why use the MongoDB? 20

4 Introduction to the Express 20

4.1 What is the Express 20

4.2 Feature of Express 21

4.3 Why use the Express 21

5 Introduction to the ReactJS 21

5.1 What is the ReactJS? 21

5.2 Why use the ReactJS? 22

5.3 What is the JSX? 22

5.4 What is the Virtual Dom? 22

5.5 What is the Hooks? 22

6 Introduction to the NodeJS 23

6.1 What is the NodeJS? 23

6.2 What can NodeJS do? 23

6.3 Why use the NodeJS? 23

7 Introduction to the Redux 23

7.1 What is the Redux? 23

7.2 How Redux works? 24

7.3 Why use the Redux? 24

8 Introduction to the PayPal 24

8.1 What is the PayPal? 24

8.2 Why uses the PayPal? 25

CHAPTER 3: SURVEYS AND USER REQUIREMENTS 26

1 Reality survey 26

1.1 Websites 26

1.1.1 ZARA 26

1.1.2 SHEIN 27

1.1.3 H&M 27

1.1.4 LIBÉ 28

1.2 Conclusion 28

2 User Requirement 29

2.1 The function of Guest 29

2.2 The function of User 30

2.3 The function of Administrator 32

2.4 The function of Super Admin 33

2.5 Use Case Diagram 34

2.5.1 Module End-User 34

2.5.2 Module Administrator 35

2.6 Use Case Description 35

2.6.1 Guest 35

2.6.1.1 <Guest> Register 35

2.6.1.2 <Guest> Login 37

2.6.1.3 <Guest> View Product List 38

2.6.1.4 <Guest> View Detailed Product 40

2.6.1.5 <Guest> Filter Product 41

2.6.1.6 <Guest> Add Email 42

2.6.1.7 <Guest> Add to Compare 44

2.6.1.8 <Guest> Remove Product from Compare 45

2.6.1.9 <Guest> Add to cart 46

2.6.1.10 <Guest> Remove Product from Cart 47

2.6.2 User 48

2.6.2.1 <User> Logout 48

2.6.2.2 <User> Edit Profile 50

2.6.2.3 <User> Add to Wishlist 51

2.6.2.4 <User> Remove Product from Wishlist 52

2.6.2.5 <User> Send Feedback 53

2.6.2.6 <User> Using Voucher 55

2.6.2.7 <User> Place Orders 56

2.6.2.8 <User> Order Tracking 57

2.6.2.9 <User> Cancel Order 59

2.6.2.10 <User> Comment Product 60

2.6.2.11 <User> Rating Product 61

2.6.2.12 <User> Payment 62

2.6.3 Supper Administrator 64

2.6.3.1 <SA> Create New Administrator 64

2.6.3.2 <SA> Update Administrator 65

2.6.3.3 <SA> Delete Administrator 67

2.6.3.4 <SA> Block Administrator 68

2.6.3.5 <SA> Unblock Administrator 70

2.6.4 Administrator 71

2.6.4.1 <Administrator> Login 71

2.6.4.2 <Administrator> Logout 72

2.6.4.3 <Administrator> Create New Category 74

2.6.4.4 <Administrator> Update Category 75

2.6.4.5 <Administrator> Delete Category 77

2.6.4.6 <Administrator> Create New Product 78

2.6.4.7 <Administrator> Update Product 80

2.6.4.8 <Administrator> Delete Product 81

2.6.4.9 <Administrator> View Detailed Product 82

2.6.4.10 <Administrator> Block Products 84

2.6.4.11 <Administrator> Unblock Products 85

2.6.4.12 <Administrator> Import Goods 86

2.6.4.13 <Administrator> Create New User 88

2.6.4.14 <Administrator> Update User 89

2.6.4.15 <Administrator> Delete User 91

2.6.4.16 <Administrator> Change The Order Status 92

2.6.4.17 <Administrator> Send Email 93

2.6.4.18 <Administrator> View Statistical Page 95

CHAPTER 4: SYSTEM DESIGN 97

1 System architecture 97

2 Class Diagram 97

3 Sequence Diagram 98

3.1 <SD001> Administrator Login 98

3.2 <SD002> Administrator Create New Product 99

3.3 <SD003> Administrator Update Product 99

3.4 <SD004> Administrator Delete Product 100

3.5 <SD005> Administrator Change The Order Status 101

3.6 <SD006> Administrator View Statistical Page 101

3.7 <SD007> Administrator Send Email 101

3.8 <SD008> Guest Add to Cart 102

3.9 <SD009> Guest Filter Product 102

3.10 <SD010> User Payment 103

3.11 <SD011> User Order Tracking 103

3.12 <SD012> User Cancel Order 104

4 Entity Relationship Diagram 104

4.1 ERD 104

4.2 Database Description 105

4.2.1 Product Table 105

4.2.2 User Table 106

4.2.3 Comment Table 107

4.2.4 Order Table 108

4.2.5 Statistical Table 108

4.2.6 Category Table 109

4.2.7 Tag Table 109

4.2.8 Voucher Table 109

4.2.9 Email Table 110

4.2.10 Size Table 110

5 Screen Interface 110

5.1 Administrator Interface 110

5.1.1 <AI001> Login Page 110

5.1.2 <AI002> Dashboard Page 111

5.1.3 <AI003> Category Page 113

5.1.4 <AI004> Product Page 114

5.1.5 <AI005> Modal Create New Product 115

5.1.6 <AI006> Modal Delete Product 116

5.1.7 <AI007> Modal Block Product 116

5.1.8 <AI008> Modal Details Product 117

5.1.9 <AI009> Email Page 118

5.1.10 <AI010> Modal Discount Product 119

5.1.11 <AI011> List Product Blocked Page 119

5.1.12 <AI012> Order Page 120

5.2 User Interface 121

5.2.1 <UI001> Home Page 121

5.2.2 <UI002> Login Page 122

5.2.3 <UI003> Register Page 123

5.2.4 <UI004> User Logged 124

5.2.5 <UI005> Product Store Page 125

5.2.6 <UI006> Details Product Page 126

5.2.7 <UI007> Related Products 127

5.2.8 <UI008> Review Page 127

5.2.9 <UI009> Modal Details Product 128

5.2.10 <UI010> Cart Page 129

5.2.11 <UI011> Checkout Page 01 130

5.2.12 <UI012> Checkout Page 02 131

5.2.13 <UI013> My Order Page 131

5.2.14 <UI014> My Profile Page 132

CHAPTER 5: IMPLEMENT AND TESTING 134

1 Tools in Project 134

2 Technology in Project 134

3 Setup 134

4 Deployment 134

5 Testing 134

CHAPTER 6: CONCLUSION 137

REFERENCES 139

LIST OF FIGURES

Figure 1: Structure Redux 24

Figure 2: The website https://www.zara.com 27

Figure 3: The website https://www.shein.com.vn 27

Figure 4: The website https://www.hm.com 28

Figure 5: The website https://libeworkshop.com/ 28

Figure 6: Use Case Diagram - User 34

Figure 7: Use Case Diagram - Admin 35

Figure 8: UC Guest – Register 35

Figure 9: UC Guest – Login 37

Figure 10: UC Guest - View Product List 39

Figure 11: UC Guest View Product Details 40

Figure 12: UC Guest Filter Product by Keyword 41

Figure 13: UC Guest Add Email 42

Figure 14: UC Guest Add to Compare 44

Figure 15: UC Guest Remove Product from Compare 45

Figure 16: UC Guest Add to Cart 46

Figure 17: <Guest> Add to Cart 47

Figure 18: UC Guest Remove Product from Cart 47

Figure 19: UC User Logout 49

Figure 20: UC User Edit Profile 50

Figure 21: UC User Add to Wishlist 51

Figure 22: US User Remove Product from Wishlist 52

Figure 23: UC User Send Feedback 54

Figure 24: UC User Using Voucher 55

Figure 25: UC User Place Orders 56

Figure 26: UC User Order Tracking 58

Figure 27: UC User Cancel Order 59

Figure 28: UC User Comment Product 60

Figure 29: UC User Rating Product 61

Figure 30: UC User Payment 63

Figure 31: UC SA Create New Administrator 64

Figure 32: <SA> Update Administrator 66

Figure 33: UC SA Delete Administrator 67

Figure 34: UC SA Block Administrator 69

Figure 35: UC SA Unblock Administrator 70

Figure 36: UC Administrator Login 71

Figure 37: UC Administrator Logout 73

Figure 38: UC Administrator Create New Category 74

Figure 39: UC Administrator Update Category 75

Figure 40: UC Administrator Delete Category 77

Figure 41: UC Administrator Create New Product 78

Figure 42: UC Administrator Update Product 80

Figure 43: UC Administrator Delete Product 81

Figure 44: UC Administrator View Detailed Product 83

Figure 45: UC Administrator Block Products 84

Figure 46: UC Administrator Unblock Products 85

Figure 47: UC Administrator Import Goods 86

Figure 48: UC Administrator Create New User 88

Figure 49: UC Administrator Update User 89

Figure 50: UC Administrator Delete User 91

Figure 51: UC Administrator Change The Order Status 92

Figure 52: UC Administrator Send Email 94

Figure 53: View Statistical Page 95

Figure 54: Website Architecture 97

Figure 55: System architecture 97

Figure 56 : Class Diagram 98

Figure 57: SD Administrator Login 99

Figure 58: SD Administrator Create New Product 99

Figure 59: SD Administrator Update Product 100

Figure 60: SD Administrator Delete Product 100

Figure 61: SD Administrator Change The Order Status 101

Figure 62: SD Administrator View Statistical Page 101

Figure 63: SD Administrator Send Email 102

Figure 64: SD Guest Add to Cart 102

Figure 65: SD Guest Filter Product 103

Figure 66: SD User Payment 103

Figure 67: SD User Order Tracking 104

Figure 68: SD User Cancel Order 104

Figure 69: Entity Relationship Diagram 105

Figure 70: Administrator - Login Page 111

Figure 71: Administrator - Dashboard Page 112

Figure 72: Administrator - Category Page 113

Figure 73: Administrator - Product Page 114

Figure 74: Administrator - Modal Create New Product 115

Figure 75: Administrator – Modal Delete Product 116

Figure 76: Administrator - Modal Block Product 117

Figure 77: Administrator - Modal Details Product 118

Figure 79: Administrator - Modal Discount Product 119

Figure 80: Administrator - List Product Blocked Page 120

Figure 81: Administrator - Order Page 120

Figure 82: User - Home Page 121

Figure 83: User – Login Page 122

Figure 84: User – Register Page 123

Figure 85: User - User Logged 124

Figure 86: User – Product Store Page 125

Figure 87: User - Details Product Page 126

Figure 88: User - Related Product 127

Figure 89: User - Review Page 128

Figure 90: User - Modal Details Product 129

Figure 91: User - Cart Page 129

Figure 92: User - Checkout Page 01 130

Figure 93: User - Checkout Page 02 131

Figure 94: User - My Order Page 132

Figure 95: User - My Profile Page 133

LIST OF TABLES

Table 1: List of the top Stacks 18

Table 2: The function of Guest 30

Table 3: The function of User 32

Table 4: The function of Administrator 33

Table 5: The function of Super Admin 34

Table 6: <Guest> Register 37

Table 7: <Guest> Login 38

Table 8: <Guest> View Product List 40

Table 9: <Guest> View Detailed Product 41

Table 10: <Guest> Filter Product by Keyword 42

Table 11: <Guest> Add Email 44

Table 12: <Guest> Add to Compare 45

Table 13: <Guest> Remove Product from Compare 46

Table 14: <Guest> Remove Product from Cart 48

Table 15: <User> Logout 50

Table 16: <User> Edit Profile 51

Table 17: <User> Add to Wishlist 52

Table 18: <User> Remove Product from Wishlist 53

Table 19: <User> Send Feedback 55

Table 20: <User> Using Voucher 56

Table 21: <User> Place Orders 57

Table 22: <User> Order Tracking 59

Table 23: <User> Cancel Order 60

Table 24: <User> Comment Product 61

Table 25: <User> Rating Product 62

Table 26: <User> Payment 64

Table 27: <SA> Create New Administrator 65

Table 28: <SA> Update Admin 67

Table 29: <SA> Delete Administrator 68

Table 30: <SA> Block Administrator 70

Table 31: <SA> Unblock Administrator 71

Table 32: <Administrator> Login 72

Table 33: <Administrator> Logout 74

Table 34: <Administrator> Create New Category 75

Table 35 <Administrator> Update Category 77

Table 36: <Administrator> Delete Category 78

Table 37: <Administrator> Create New Product 80

Table 38: <Administrator> Update Product 81

Table 39: <Administrator> Delete Product 82

Table 40: <Administrator> View Detailed Product 84

Table 41: <Administrator> Block Products 85

Table 42: <Administrator> Unblock Products 86

Table 43: <Administrator> Import Goods 88

Table 44: <Administrator> Create New User 89

Table 45: <Administrator> Update User 91

Table 46: <Administrator> Delete User 92

Table 47: <Administrator> Change The Order Status 93

Table 48: <Administrator> Send Email 95

Table 49: <Administrator> View Statistical Page 96

Table 50: Product Table 106

Table 51: User Table 107

Table 52: Comment Table 108

Table 53: Order Table 108

Table 54: Statistical Table 109

Table 55: Category Table 109

Table 56: Tag Table 109

Table 57: Voucher Table 109

Table 58: Email Table 110

Table 59: Size Table 110

Table 60: <AI> Login Page 111

Table 61: <AI> Dashboard Page 001 113

Table 62: <AI> Category Page 114

Table 63: <AI> Product Page 115

Table 64: <AI> Modal Create New Product 116

Table 65: <AI> Modal Block Product 117

Table 66: <AI> Modal Details Product 118

Table 67: <AI> Order Page 121

Table 68: <UI> Home Page 01 122

Table 69: <UI> Login Page 123

Table 70: <UI> Register Page 124

Table 71: <UI> User Logged 125

Table 72: <UI> Product Store Page 02 126

Table 73: <UI> Details Product Page 127

Table 74: <UI> Review Page 128

Table 75: <UI> Cart Page 130

Table 76: <UI> Checkout Page 01 131

Table 77: <UI> Checkout Page 02 131

Table 78: <UI> My Order Page 132

Table 79: <UI> My Profile Page 133

Table 80: Tools in Project 134

Table 81: Technology in Project 134

Table 82: Test Case 136

CHAPTER 1: INTRODUCTION

1 Rationale

People's quality of life is improving day by day, the demand for buying and selling

is increasing Grasping those needs, we decided to build an e-commerce website - Clothing items The purpose of building this website is to create tools for customers

to easily make purchases, saving time Businesses can approach and sell many products to customers Moreover, the website is built in a simple, user-friendly manner, which enhances the experience and makes it easy for them to use There many ways in many programming languages to build such a website: Java, PHP, C#, and in this topic, we use JavaScript

JavaScript’s flavor is overpowered by Typescript popularity What can we say, TypeScript is definitely way past being a top JavaScript trend and we can talk about

a standard now and an obvious choice for the vast majority of software development projects Thanks to that, its application will meet the management and operation needs of a sales website easily and conveniently Make your business easier and more efficient, it will meet the management and operation needs of a sales website easily and conveniently Make your business easier and more efficient

2 Objectives

In this graduate project, we tried to concentrate on researching MERN Stack technology and its effect on the development of the programming industry now Furthermore Researching about it also helps us to understand more deeply From there we can build a website having full basic functions as the others, and that functions are below:

 Introducing products and items of the website

 Support the customers chat with admin by messenger connection

 Purchased items & Online payment

 Support the system owner to manage the products

 Support the system owner to manage the orders & users

3 Contents

 Find out the MERN Stack technology

 Find out how to manage the databases on Mongo Atlas

 Find out the Express with the MVC model

 Find out the React Framework & Redux model

 Find out the NodeJS

 Find out the Heroku to deploy API

 Find out the Netlify to deploy a website

4 Research methods

 Researching documents, websites and video related to applied technologies

 Refer to the videos it describes regarding the model applied in the graduate project

 Consult with instructors and classmates

5 Practical scientific significance

The website's user interface is designed to be simple, making it easier for users to navigate and use the site when they purchase products

CHAPTER 2: FUNDAMENTALS

1 Introduction to the Technical Stack

1.1 What is the Technical Stack?

The Technical Stack, also known as the Solution Stack, is a collection of technologies used to build and run a single application [1]

1.2 List of the top Stacks

Table 1: List of the top Stacks

2 Introduction to the MERN stack

2.1 What is the MERN stack?

The MERN stack is a software stack comprised of four open-source technologies So M stands for MongoDB and it's a database solution, E stands for Express, this is the framework for NodeJS and building NodeJS applications, R stands for of ReactJS and this is a browser-side JavaScript library, help us build great UI and N stands for NodeJS which is a server-side JavaScript runtime and environment where JavaScript can be executed outside the browser Combining these 4 technologies creates a MERN Stack [2]

2.2 How does the MERN Stack work?

The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON

At each client, react does the processing and creates the user interface, and React also executes the single-page-application on each client

At the server, NodeJS and Express are responsible for handling logic, business, and authentication

MongoDB on the server is responsible for organizing and storing data

Client and server will communicate by sending requests and responses Request and Response send implicitly by AJAX technology to help users do not need to reload the website

2.3 Why use the MERN Stack?

The big advantage is the separation of concern of we have a separate end and a separate back-end and therefore if we’re working in each part of our team can focus on the front-end, back-end

front-Allow us to build a powerful front-end which is a single page application give experience offers a great user

The MERN stack uses a common JavaScript language for both client-side and server-side, making website development accessible

NodeJS capable of running on both Linux, Windows and OS X so it is not

OS dependent

MERN stack uses JSON as an exchange data type between all components,

so there is no need for additional libraries to convert data during the interaction between the client and the server-side

MongoDB capable of managing a large amount of data, can add new properties to the tables without updating the entire table

The technologies used in the MERN stack are all free and open source

3 Introduction to the MongoDB

3.1 What is the MongoDB?

MongoDB is a document – oriented, no sequel (No SQL) database

3.2 What is the MongoDB Atlas?

MongoDB Atlas is a paid service that allows users to store application data

in the cloud

MongoDB Atlas is built on best-in-class automation and proven practices that help provide continuous availability, elastic scalability, fast performance, and support with regulatory compliance It is the easiest way to try out MongoDB for free on AWS, Google Cloud, and Azure [3]

Features of MongoDB Atlas:

 Fully managed database lifecycle backed by uptime SLA

 Elastic deployments with on-demand vertical & horizontal scaling

 Multi-cloud, global data distribution at the click of a button

 Enterprise-grade security controls and compliance offerings

 Advanced data privacy protection with client-side encryption

 Auto-pilot capabilities such as auto-scale and auto-generated tuning guidance

 Integrated full-text search powered by Lucene

 Automated data archival to Queryble cloud storage

 Real-time triggers for building event-driven data infrastructures

 Embedded live migration service enables data migrations with minimal downtime

3.3 Why use the MongoDB?

 MongoDB use data is Document JSON should be easy in the access

out

 flexible when it comes to storage

 Data contained in MongoDB is usually not bound together

 Insert, delete or update, you won't lose too much time like in

RDBMS

 MongoDB is easily extensible

 The _id field will always be automatically indexed, so information

retrieval speed will always be at peak performance

 we have a data query, the write will be saved to the memory cache

Then the query will go faster without you having to read from the hard drive

 MongoDB query speed is always faster than the administrative

database system

 Thanks to a large enough amount of data, the test for MongoDB insert speed will be 100 times faster than MySQL

4 Introduction to the Express

4.1 What is the Express

Express is a modular web application framework for NodeJS It provides powerful features for web or mobile development Express Js supports HTTP and middleware methods creating an extremely powerful and easy-to-use API [5]

4.2 Feature of Express

Faster server-side development: Express.js provides many commonly used features of Node.js in the form of functions that can be readily used anywhere in the program This removes the need to code for several hours and thus saves time [6]

Middleware: Middleware is a part of the program that has access to the database, client request, and the other Middleware It is mainly responsible for the systematic organization of different functions of Express.js

Routing: Express provides a highly advanced routing mechanism which helps to preserve the state of the webpage with the help of their URLs

Templating: Express provides templating engines that allow the developers

to build dynamic content on the web pages by building HTML templates on the server-side

Debugging: Debugging is crucial for the successful development of web applications Express makes debugging easier by providing a debugging mechanism that has ability to pinpoint the exact part of the web application which has bugs

4.3 Why use the Express

 It is easy to learn because many front-end users are already familiar with JavaScript so they don’t have to learn a new language in order to learn Express

 This makes backend development much easier for front-end developers using Express

 The Express.js framework is very simple to customize and use as per the needs

 Express.js provides a flexible middleware module It is mainly useful for doing extra tasks on response and request

 Set up intermediate classes to return HTTP requests

 Define router allows use with different actions based on HTTP method and URL

 Allows returning HTML pages based on parameters

5 Introduction to the ReactJS

5.1 What is the ReactJS?

React JS is a JavaScript library used in web development to build interactive elements on websites But if you’re not familiar with JavaScript or JavaScript libraries, that’s not a helpful definition so let’s take a step back and deal with those terms first [7]

5.2 Why use the ReactJS?

React is a JavaScript library that specializes in helping developers build user interfaces, or UIs In terms of websites and web applications, UIs are the collection

of on-screen menus, search bars, buttons, and anything else someone interacts with

to USE a website or app

In addition to providing reusable React library code (saving development time and cutting down on the chance for coding errors), React comes with two key features that add to its appeal for JavaScript developers:

is compatible with any browser platform you might be working with

5.4 What is the Virtual Dom?

The Virtual DOM (like the name implies) is a copy of the site’s DOM, and React JS uses this copy to see what parts of the actual DOM need to change when

an event happens (like a user clicking a button)

Let’s say a user enters a comment in a blog post form and pushes the Comment button Without using React JS, the entire DOM would have to update

to reflect this change (using the time and processing power it takes to make this update) React, on the other hand, scans the Virtual DOM to see what changed after a user action (in this case, a comment being added) and selectively updates that section of the DOM only

5.5 What is the Hooks?

Hooks are a new addition in React 16.8 They let you use state and other React features without writing a class

6 Introduction to the NodeJS

6.1 What is the NodeJS?

 Node.js is an open-source server environment

 Node.js is free

 Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X)

 Node.js uses JavaScript on the server

6.2 What can NodeJS do?

 Node.js can generate dynamic page content

 Node.js can create, open, read, write, delete, and close files on the server

 Node.js can collect form data

 Node.js can add, delete, modify data in your database

6.3 Why use the NodeJS?

Node.js uses asynchronous programming

A common task for a web server can be to open a file on the server and return the content to the client

Here is how PHP or ASP handles a file request:

 Sends the task to the computer's file system

 Waits while the file system opens and reads the file

 Returns the content to the client

 Ready to handle the next request

Here is how Node.js handles a file request:

 Sends the task to the computer's file system

 Ready to handle the next request

 When the file system has opened and read the file, the server returns the content to the client

Node.js eliminates the waiting, and simply continues with the next request

Node.js runs single-threaded, non-blocking, asynchronously programming, which is very memory efficient

7 Introduction to the Redux

7.1 What is the Redux?

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test

With Redux, the state of your application is kept in a store, and each component can access any state that it needs from this store

7.2 How Redux works?

Redux is based on a flux structure proposed by Facebook, following a unidirectional data flow model to avoid overlapping calls

All states are kept in one place, the store, and the views get the changes from the store to display

Events from the view must send action to update the state in the store

The Reducer relies on actions to update the state in the store

State is a plain JavaScript object, it cannot be modified directly, it must create new object for reducer to return

Figure 1: Structure Redux

7.3 Why use the Redux?

 Lightweight, easy-to-integrate library

 Easy-to-read code

 Simple, easy to learn

 Return the result of the middleware function inside the component

8 Introduction to the PayPal

8.1 What is the PayPal?

PayPal is simply understood as an intermediary service for international payments and money transfers over the Internet With PayPal, you can pay when shopping online abroad or receive payments from abroad sent to Vietnam [8]

It can be considered as an electronic wallet or similar as Internet Banking of banks: you can transfer - withdraw to another PayPal account, pay for online purchases if the seller supports PayPal, or receive money international payments

8.2 Why uses the PayPal?

 Extremely secure payment system

 Wide network of systems, used all over the world quickly and conveniently

 Good and fast customer service support

 Limit disclosure of bank account information, because each time you make

a payment, you do not have to enter an international payment card number (VISA, Mastercard) because you provided PayPal when registering to create an account

CHAPTER 3: SURVEYS AND USER REQUIREMENTS

1 Reality survey

Nowadays most people have approached information technology, its strong development and practical applications in life have helped us take a new step forward which is to promote economic development making the trend of the world economy become globalized, especially people's demand for services in buying and selling goods become increase in terms of quantity and quality There are many leading corporations in the world that are constantly expanding the scale of their goods and services to commercialize them on the internet Based on that we can see the importance of e-commerce, one-click right at your computer connected to the internet can bring you many things that you need without spending too much time Realizing its benefits along with a passion for learning, we have researched and built a website Build E-commerce Website to serve people's clothing shopping needs

The operating criteria of the website are to serve the needs of wearing clothes and add a layer of value to consumers, giving them a great experience when accessing the website, high-quality products go hand in hand with a beautiful but extremely comfortable period, comfortable to wear

1.1 Websites

Next, we conducted a survey of the three most popular clothes websites that are used by many people today

1.1.1 ZARA

Figure 2: The website https://www.zara.com

1.1.2 SHEIN

1.1.3 H&M

Figure 4: The website https://www.hm.com

the system's stable operation so that they can update information & product prices daily, strictly manage orders, and send users promotional codes

Most of the functions are the same, integrating a chatbot or a game to get points to a clothing website is a difficult thing not all websites can do Besides, an easy-to-use interface and a website that integrates many features will certainly attract more customers and that is also the decision of whether the clothing business succeeds or fails

it is managed by super admin

admin

2.1 The function of Guest

Ordinary

an account to become a user of the system

discount code

This function allows users to add their email to the system to receive a discount code

6 Filter product by tag This function helps guests to find products

This function allows guests to add products

to compare each other

Table 2: The function of Guest

2.2 The function of User

Ordinary

5 Filter product by size This function helps users to find products

9 View detailed product This function helps users to view detailed

products as color, size, description

This function allows users to add products

to compare each other

19 Place the orders This function allows users place the orders

20 Payment the order This function allows users to pay for orders

21 Order tracking This function helps users to track orders

22 Cancel the orders This function allows users to cancel orders

23 Comment & rating the

product

This function allows users to comment &

rating the product purchased

24 Send feedback This function helps users to send their

feedback to admin

Table 3: The function of User

2.3 The function of Administrator

Ordinary

system

categories to the system

3 Update categories This function allows admin to update

categories to the system

4 Delete categories This function allows admin to categories

products to the system

to the system

6 Update products This function allows admin to update

products to the system

7 Delete products This function allows admin to delete

products to the system

8 View detailed product This function allows users to view detailed

product

9 Block products This function allows users to block product

10 Unblock products This function allows users to unblock

users to the system

15 Unblock users This function allows users to unblock user

16 Add tags This function allows admin to add tags to

22 Update vouchers This function allows admin to update

vouchers to the system

23 Delete vouchers This function allows admin to delete

vouchers to the system

discount codes to users

This function helps the admin send codes to

3 groups: guest, all system's users, VIP

28 Change status the orders

This function allows admin to change status

of orders: not accept, packed, delivery, complete, cancel

29 Delete the orders This function allows admin to delete orders

Table 4: The function of Administrator

2.4 The function of Super Admin

Table 5: The function of Super Admin

2.5 Use Case Diagram

Login With Google

Login Witth Account View Product List

Payment w ith COD

Place Orders Logout

Remov e Product from Cart

Remov e Product from Wishlist

2.5.2 Module Administrator

Figure 7: Use Case Diagram - Admin

2.6 Use Case Description

2.6.1 Guest

2.6.1.1 <Guest> Register

Figure 8: UC Guest – Register

USE CASE - GUEST_01

Update Category

Delete Category

Super Administrator

Manage Category Groups

Manage Tag Groups

Create New Tag

Update Tag

Delete Tag

Manage Product Groups

Create New Product

Update Produt Delete Product

View Detailed Product

Manage Administrator Groups

Create New Administrator Update

Administrator Delete Administrator

Manage User Groups

Create New User

Update User

Delete User

Manage Order Groups

Change The Order Status

Delete Order

View Statistical Page

View Profit Statistics

View Sales Statistics

View Orders statistics View Best Seller Statistics View Non Best Seller Statistics

View Sold Out Statistics Block Users

Unblock Users

Block Administrator

Unblock Administrator

Manage Voucher Groups

Create New Voucher Update Voucher

Use Case No GUEST_01 Use Case Version 2.0

Use Case Name Register

- Success: The system will have an account

- Fail: The system shows error messages

Main Success Scenario:

1 The guest needs access to the

Customer enter first name, last

name, email, password and click

to the Register button

The system creates a new account The system redirects to the main view

Alternative Scenario: N/A

Exceptions:

1

Please! Check your internet connection

2

This name already exists The system shows the message

Name already exists

3

Please! Fill in your full information

Relationships: N/A

Business Rules:

- The length of the character must not exceed 50 characters

Table 6: <Guest> Register

2.6.1.2 <Guest> Login

Figure 9: UC Guest – Login

USE CASE - GUEST_02

Use Case No GUEST_02 Use Case Version 2.0

Use Case Name Login

Login With Google

Login Witth Account

- The guest can login to the system

- Success: The guest is redirected to the home screen

- Fail: System show error messages

Main Success Scenario:

1 The guest needs access to the

login page

The login page is displayed

2 The guest enters the id &

password

The id & password is displayed

of each the textbox

3 The guest clicks on the Login

button

The home screen is displayed

Alternative Scenario: N/A

Exceptions:

1

Please! Check your internet connection

2

Please! Fill in your full information

Relationships: N/A

Business Rules:

- Email: must not be empty

- Password: must not be empty

Table 7: <Guest> Login

2.6.1.3 <Guest> View Product List

Figure 10: UC Guest - View Product List

USE CASE - GUEST_03

Use Case No GUEST_03 Use Case Version 2.0

Use Case Name View Product List

- Success: The system will display product list

- Fail: The system shows error messages

Main Success Scenario:

1 The guest needs access to the

Please! Check your internet connection

uc User

Guest

View Product List