(Đồ án hcmute) build a website that sale electronics using angular net technology

LE VAN VINH STUDENT: PHAM TIEN THAO GRADUATION PROJECT SOFTWARE ENGINEERING BUILD A WEBSITE THAT SALE ELECTRONICS USING ANGULAR .NET TECHNOLOGY... ---?????--- GRADUATION PROJECT BUILD

FACULTY FOR HIGH QUALITY TRAINING

Ho Chi Minh City, Febuary, 2023

HOANG MANH TIEN

SKL 0 1 0 5 4 2

ADVISOR: PhD LE VAN VINH STUDENT: PHAM TIEN THAO

GRADUATION PROJECT SOFTWARE ENGINEERING

BUILD A WEBSITE THAT SALE ELECTRONICS

USING ANGULAR NET TECHNOLOGY

-🙞🙜🕮🙞🙜 -

GRADUATION PROJECT

BUILD A WEBSITE THAT SALE ELECTRONICS

USING ANGULAR NET TECHNOLOGY

PHAM TIEN THAO Student ID: 18110200 HOANG MANH TIEN Student ID: 18110212 Major: SOFTWARE ENGINEERING Advisor: PhD LE VAN VINH

FACULTY FOR HIGH QUALITY TRAINING

FACULTY FOR HIGH QUALITY TRAINING

-🙞🙜🕮🙞🙜 -

GRADUATION PROJECT

BUILD A WEBSITE THAT SALE ELECTRONICS

USING ANGULAR NET TECHNOLOGY

PHAM TIEN THAO Student ID: 18110200 HOANG MANH TIEN Student ID: 18110212 Major: SOFTWARE ENGINEERING Advisor: PhD LE VAN VINH

Ho Chi Minh City, December, 2022

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

-

Ho Chi Minh City, December, 2022

GRADUATION PROJECT ASSIGNMENT

Student name: Pham Tien Thao Student ID: 18110200Student name: Hoang Manh Tien Student ID: 18110212Major: Information Technology Class: 18110CLST1

Advisor: Ph.D Lê Văn Vinh Phone number: ……… Date of assignment: ……… Date of submission: ………

1 Project title: Build a website that sells electronics using Angular Net technology

2 Initial materials provided by the advisor:

Provide report templates for groups of students with exact wording orientation Documentation of new technologies and the instructor will guide if the authors want to integrate that technology into the project

3 Content of the project:

The author team will make an electronic sales website using Angular Net technology, including many basic functions of a sales website such as users can go to search for products, view product information, place orders, order tracking, online payment Besides, administrators can make detailed statistics of data over time, management operations are also guaranteed such as product management, customer management, order management, and many other necessary functions

4 Final product:

After researching further study and creating a website We have accomplished the following:

• Acquire a wealth of knowledge about the internet sales process

• More solid understanding of systems design and analysis

• Effortlessly incorporate the most recent technologies into the project

• Understand more about interface design so that it is friendly and easy to use for users

interface is also easy to use and user-friendly

CHAIR OF THE PROGRAM

(Sign with full name)

ADVISOR

(Sign with full name)

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

-

Ho Chi Minh City, December, 2022

ADVISOR’S EVALUATION SHEET

Student name: Pham Tien Thao Student ID: 18110200 Student name: Hoang Manh Tien Student ID: 18110212 Major: Information Technology

Project title: Build a website that sells electronics using Angular Net technology

Advisor: Ph.D Lê Văn Vinh

EVALUATION

1 Content of the project:

2 Strengths:

3 Weaknesses:

4 Approval for oral defense? (Approved or denied)

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

-

Ho Chi Minh City, December, 2022 PRE-DEFENSE EVALUATION SHEET Student name: Pham Tien Thao Student ID: 18110200 Student name: Hoang Manh Tien Student ID: 18110212 Major: Information Technology Project title: Build a website that sells electronics using Angular Net technology Name of Reviewer:

EVALUATION 1 Content and workload of the project

2 Strengths:

3 Weaknesses:

4 Approval for oral defense? (Approved or denied)

5 Overall evaluation: (Excellent, Good, Fair, Poor)

6 Mark:……….(in words: )

Ho Chi Minh City, December, 2022

REVIEWER

(Sign with full name)

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

-EVALUATION SHEET OF DEFENSE COMMITTEE MEMBER Student name: Pham Tien Thao Student ID: 18110200 Student name: Hoang Manh Tien Student ID: 18110212 Major: Information Technology Project title: Build a website that sells electronics using Angular Net technology Name of Defense Committee Member:

EVALUATION 1 Content and workload of the project

2 Strengths:

3 Weaknesses:

4 Overall evaluation: (Excellent, Good, Fair, Poor)

5 Mark:……….(in words: )

Ho Chi Minh City, December, 2022

ASSURANCE

We are sure that this project is our own We do not copy or use any other people's

materials or source code without identifying the source We take full responsibility for any

violation

Ho Chi Minh City, December, 2022

Student group made

Pham Tien Thao Hoang Manh Tien

ACKNOWLEDGEMENTS

First of all, I would like to express my love and gratitude to Mr Le Van Vinh – a lecturer from the Faculty of Information Technology - Ho Chi Minh City University of Technology and Education, who has given me a lot of precious time, direct guidance, dedicated help, and guidance throughout the process of making specialized essays

The authors also sincerely thank all the teachers in the Faculty of Information Technology - Ho Chi Minh City University of Technology and Education, sincerely thank the teachers and teachers who participated in teaching and imparting knowledge During our time at school, reading and reviewing our essay helped us better understand the issues

we researched, so that we could complete this essay

I would like to thank the University Board of Directors, the Faculty of Information Technology and Faculty for High Quality Training, as other Functional Departments for creating the best conditions for my study and graduation In spite of great efforts we made

in the learning process, during the internship period as well as in the process of writing the essay, shortcomings are inevitable Our group is looking forward to valuable comments from teachers as well as all friends so that we can improve the project results

Thanks again!

Ho Chi Minh City, December, 2022

Student group made

Pham Tien Thao Hoang Manh Tien

TABLE OF CONTENTS

ASSURANCE 1

ACKNOWLEDGEMENTS 2

TABLE OF CONTENTS 3

LIST Of PICTURES 6

LIST OF FIGURES 8

LIST OF TABLES 10

ABSTRACT 14

Chapter 1 INTRODUCTION 15

1.1 Urgency and objectives of project 15

1.1.1 The urgency of the project 15

1.1.2 Project objectives 15

1.2 Objects, scope and methods of research 2

1.2.1 Research objects 2

1.2.2 Research scope 3

1.2.3 Methods of research 3

1.3 Expected results 4

Chapter 2 FUNDAMENTALS 5

2.1 Overview of ASP.NET Core 5

2.1.1 Introduction to ASP.NET Core 5

2.1.2 Features 5

2.1.3 Introduction to Web APIs in ASP.NET Core 5

2.1.4 Advantages of ASP.NET Core 6

2.2 Angular Framework 6

2.2.1 Introduction to Angular 6

2.2.2 Angular concepts 7

2.3 Json Web Token 7

2.3.1 Introduce to Json Web Token 7

Chapter 3 SURVEY AND USER REQUIREMENT 9

3.1 Current systems 9

3.1.1 Website Phong Vu 9

3.1.2 Website GEARVN 9

3.1.3 Website TCL 10

3.2 User requirement 11

3.2.1 Actor of system 11

3.2.2 Document Management System 15

3.2.3 Usecase Diagram 17

3.2.4 Usecase Description 19

3.2.5 Non-functional Requirement 61

Chapter 4 SYSTEM DESIGN 62

4.1 Class Diagram 62

4.2 Sequence Diagram 63

4.2.1 Sequence Diagram of “Admin” 63

4.2.2 Sequence Diagram of “Customer” and “Guest” 77

4.3 Database Design 88

4.4 Interface Design 89

4.4.1 Customer 89

4.4.2 Admin 101

Chapter 5 IMPLEMENTATION AND TESTING 121

5.1 System Architecture 121

5.2 Tools in Project 121

5.3 Technologies in Project 121

5.4 Implement code 122

5.4.1 Clone Project 122

5.4.2 Install Frontend 122

5.4.3 Install Backend 123

5.5 Test Plan 123

5.5.1 Test Scenarios 124

5.5.2 Test Results 125

Chapter 6 CONCLUSION 132

6.1 Results 132

6.2 Advantages and disadvantages of the program 132

6.3 Future works 133

REFERENCES 134

LIST Of PICTURES

Picture 3.1 Website Phong Vu 9

Picture 3.2 Website GEARVN 10

Picture 3.3 Website TCL 11

Picture 4.1 Login Page 89

Picture 4.2 Register Page 90

Picture 4.3 Header 91

Picture 4.4 Footer 92

Picture 4.5 Category Page 93

Picture 4.6 Home Page 94

Picture 4.7 Product Detail Page 95

Picture 4.8 Cart Page 97

Picture 4.9 Information Page 99

Picture 4.10 Order Tracking Page 100

Picture 4.11 Change Password Page 101

Picture 4.12 Login Page 102

Picture 4.13 Dashboard Page 103

Picture 4.14 Orders To Be Processed Page 105

Picture 4.15 Order List Page 106

Picture 4.16 Product List Page 107

Picture 4.17 Product Detail Page 108

Picture 4.18 Product Attribute List Page 110

Picture 4.19 Product Review List Page 111

Picture 4.21 Order Statistics Page 113

Picture 4.22 Report By Product Page 114

Picture 4.23 Revenue Report Page 114

Picture 4.24 Website Informtion Page 115

Picture 4.25 Website Informtion Page 116

Picture 4.26 Footer Information Page 117

Picture 4.27 Baner Information Page 118

Picture 4.28 Email Template List Page 118

Picture 4.29 Email Account Page 119

Picture 4.30 Admin Account Page 120

Picture 5.1 Folder project Frontend 122

Picture 5.2 Folder project Backend 123

LIST OF FIGURES

Figure 2.1 Structure of a JSON Web Token (JWT) [9] 8

Figure 3.1 Usecase Diagram of Customer Side 18

Figure 3.2 Usecase Diagram of Admin Side 19

Figure 4.1 Model Class Diagram 62

Figure 4.2 Service Class Diagram 63

Figure 4.3 Sequence Diagram of Login 64

Figure 4.4 Sequence Diagram of Logout 65

Figure 4.5 Sequence Diagram of View Order Details 65

Figure 4.6 Sequence Diagram of Update Order Status 66

Figure 4.7 Sequence Diagram of Add Product Attribute 66

Figure 4.8 Sequence Diagram of Edit Product Attribute 67

Figure 4.9 Sequence Diagram of Delete Product Attribute 67

Figure 4.10 Sequence Diagram of Add Product 68

Figure 4.11 Sequence Diagram of Edit Product 68

Figure 4.12 Sequence Diagram of Delete Product 69

Figure 4.13 Sequence Diagram of Update Status Product Review 69

Figure 4.14 Sequence Diagram of View Customer List 70

Figure 4.15 Sequence Diagram of Add Article 70

Figure 4.16 Sequence Diagram of Edit Article 71

Figure 4.17 Sequence Diagram of Delete Article 71

Figure 4.18 Sequence Diagram of View Order Statistics 72

Figure 4.19 Sequence Diagram of View Report By Product 72

Figure 4.21 Sequence Diagram of Edit Website Information 73

Figure 4.22 Sequence Diagram of Configuration For Email Templates 74

Figure 4.23 Sequence Diagram of Set Up An Email Account 74

Figure 4.24 Sequence Diagram of Add Admin Account 75

Figure 4.25 Sequence Diagram of Edit Admin Account 75

Figure 4.26 Sequence Diagram of Delete Admin Account 76

Figure 4.27 Sequence Diagram of Change Password Admin Account 76

Figure 4.28 Sequence Diagram of Register 77

Figure 4.29 Sequence Diagram of Register with Google 78

Figure 4.30 Sequence Diagram of Login 79

Figure 4.31 Sequence Diagram of Login with Google 80

Figure 4.32 Sequence Diagram of Logout 80

Figure 4.33 Sequence Diagram of View Product Information 81

Figure 4.34 Sequence Diagram of Search Product 82

Figure 4.35 Sequence Diagram of Filter Products 82

Figure 4.36 Sequence Diagram of Edit Information 83

Figure 4.37 Sequence Diagram of Order Tracking 83

Figure 4.38 Sequence Diagram of Product Reviews 84

Figure 4.39 Sequence Diagram of Change Password 85

Figure 4.40 Sequence Diagram of Add To Cart 86

Figure 4.41 Sequence Diagram of Purchase 86

Figure 4.42 Sequence Diagram of Online Payment 87

Figure 4.43 Database Schema 88

Figure 5.1 Overview of architectural design for system 121

LIST OF TABLES

Table 3.1 Admin’s function 12

Table 3.2 Guest functions 13

Table 3.3 Customer’s functions 14

Table 3.4 Scenario Login Admin 19

Table 3.5 Scenario Logout 20

Table 3.6 Scenario View Order Details 21

Table 3.7 Scenario Update Order Status 22

Table 3.8 Scenario Add Product Attribute 23

Table 3.9 Scenario Edit Product Attribute 24

Table 3.10 Scenario Delete Product Attribute 26

Table 3.11 Scenario Add Product 27

Table 3.12 Scenario Edit Product 28

Table 3.13 Scenario Delete Product 29

Table 3.14 Scenario Update Status Product Review 30

Table 3.15 Scenario View Customer List 31

Table 3.16 Scenario Add Article 32

Table 3.17 Scenario Edit Article 33

Table 3.18 Scenario Delete Article 34

Table 3.19 Scenario View Order Statistics 35

Table 3.20 Scenario View Report By Product 36

Table 3.21 Scenario View Revenue Report 37

Table 3.22 Scenario Edit Website Information 38

Table 3.24 Scenario Set Up An Email Account 40

Table 3.25 Scenario Add Admin Account 41

Table 3.26 Scenario Edit Admin Account 42

Table 3.27 Scenario Delete Admin Account 44

Table 3.28 Scenario Change Password Admin Account 45

Table 3.29 Scenario Register 46

Table 3.30 Scenario Register with Google 47

Table 3.31 Scenario Login 48

Table 3.32 Scenario Login with Google 49

Table 3.33 Scenario Logout 50

Table 3.34 Scenario View Product Information 51

Table 3.35 Scenario Search Product 52

Table 3.36 Scenario Filter Products 53

Table 3.37 Scenario Edit Information 54

Table 3.38 Scenario Order Tracking 55

Table 3.39 Scenario Product Reviews 56

Table 3.40 Scenario Change Password 57

Table 3.41 Scenario Add To Cart 58

Table 3.42 Scenario Purchase 59

Table 3.43 Scenario Online Payment 60

Table 4.1 Detailed description of the Login Page 89

Table 4.2 Detailed description of the Register Page 90

Table 4.3 Detailed description of the Header 91

Table 4.4 Detailed description of the Footer 92

Table 4.5 Detailed description of the Category Page 93

Table 4.6 Detailed description of the Home Page 94

Table 4.7 Detailed description of the Product Detail Page 95

Table 4.8 Detailed description of the Cart Page 97

Table 4.9 Detailed description of the Information Page 99

Table 4.10 Detailed description of the Order Tracking Page 100

Table 4.11 Detailed description of the Change Password Page 101

Table 4.12 Detailed description of the Login Page 102

Table 4.13 Detailed description of the Dashboard Page 103

Table 4.14 Detailed description of the Orders To Be Processed Page 105

Table 4.15 Detailed description of the Order List Page 106

Table 4.16 Detailed description of the Product List Page 107

Table 4.17 Detailed description of the Product Detail Page 108

Table 4.18 Detailed description of the Product Attribute List Page 110

Table 4.19 Detailed description of the Product Review List Page 111

Table 4.20 Detailed description of the Article List Page 112

Table 4.21 Detailed description of the Order Statistics Page 113

Table 4.22 Detailed description of the Report By Product Page 114

Table 4.23 Detailed description of the Website Informtion Page 115

Table 4.24 Detailed description of the Website Informtion Page 116

Table 4.25 Detailed description of the Footer Information Page 117

Table 4.26 Detailed description of the Baner Information Page 118

Table 4.27 Detailed description of the Email Template List Page 119

Table 4.28 Detailed description of the Email Account Page 119

Table 4.29 Detailed description of the Admin Account Page 120

Table 5.1 Tool using for develop project 121

Table 5.2 Technologies using for project 121

Table 5.3 Test Scenarios 124

Table 5.4 Testcase Order 126

Table 5.5 Testcase Login 126

Table 5.6 Testcase Order Tracking 127

Table 5.7 Testcase Search Product 127

Table 5.8 Testcase View Product Detail 128

Table 5.9 Testcase Filter Products 128

Table 5.10 Testcase Order Processing 129

Table 5.11 Testcase View Customer List 129

Table 5.12 Testcase Add Product 130

Table 5.13 Testcase Change Product Information 131

ABSTRACT

Online sales are becoming a need as information technology advances and the human race moves towards the Industrial 4.0 era Online transactions make both buyers and sellers feel more at ease, making them ideal for time-constrained purchasers

Cyberspace transactions for purchasing and selling electronic items are ever more essential Manufacturers produce hundreds of new smartphones, laptops, smart watches, and other products every year, thus online retailers on a website enable customers to stay more up to speed on product information Additionally, it is simple for vendors to add new goods, and vendors and customers may connect more easily

Any modifications to the "store" will be simpler and more condensed Selling on the seller's website just requires a few simple actions, such as adding, removing, and editing

on the computer, as opposed to selling offline, where the product's repair and price change takes a lot of time Due to the ease with which new trends may be followed and the increased attention of customers, websites can easily adapt to special occasions by modifying their user interface Everything is quick and simple

Consequently, the writers chose on the subject “Build a website that sells electronics using Angular Net technology” in an effort to support the expansion of Vietnam's online market and make it simpler for consumers to access new products

With the guidance of Master Le Van Vinh, the authors have tried their best to complete the essay However, mistakes are inevitable, the group wishes to receive the input

of teachers and friends to make the essay more complete

Student group made

Chapter 1 INTRODUCTION 1.1 Urgency and objectives of project

1.1.1 The urgency of the project

- Businesses or sellers can benefit from online sales in more and more ways generating massive sales and boosting revenue from sales Additionally, purchases can be made at any moment, with no time restrictions Customers may quickly look up company information, which contributes to the development of a credible and professional brand image Finally, the least amount of manpower is required for the best operating expenses, which eliminates the need to rent space

- A sales website is indeed a required instrument with advantages comparable to those of company antecedents in the 4.0 era Up to 26.28% of the global population of 7.7 billion people will engage in online shopping in 2020, predicts Statista.com (2.05 billion people) By 2023, this population, which is increasing quickly, is anticipated to reach 2.14 billion The role of e-commerce in this trend

is enormous Additionally, users are becoming more and more reliant on the Internet to research products, compare prices, etc As a result, creating a sales website by combining it with numerous additional channels is a popular alternative Businesses should establish an online presence to provide customers options

- Building a website for administration and sales is crucial, especially for e-sales Electronic products are becoming more and more prevalent on the market, necessitating the updating of prices and new product information By knowing what customers need, being able to give them advice and take care of them when necessary, businesses can assist their customers purchases, increasing the company's sales For this reason, we made the decision to construct an e-commerce website for this project

1.1.2 Project objectives

Topic “BUILD A WEBSITE THAT SELLS ELECTRONICS USING ANGULAR NET TECHNOLOGY” is solve the issues include:

- The group of students working on the project should be skilled in employing technologies, techniques, and application libraries in the development process They should also comprehend the generalization and applicability of ASP.NET Core and Angular software creation for website creation

- Creating a website to sell electronic items like mobile phones, computers, watches, etc with tools that let customers shop online, filter and search for products, pay with a credit card, verify orders, follow orders, and assess products

In addition, there are daily and weekly articles about items and articles with the hottest technology news When it comes to the Admin, tasks like adding, removing, and updating products, articles, and revenue figures by day, month, and year will be available In addition, you may browse product reviews, update order details, and examine statistics on the top-selling products and top customers

- In addition to carrying out its intended purposes, a system must also adhere to security standards, which include decentralized mechanisms, user-server authentication forms, and private information encryption algorithms system compatibility

- Because the website has two different permission levels, User and Admin, the user interface will be entirely different, yet it must still be simple to use

1.2 Objects, scope and methods of research

1.2.1 Research objects

- Look up product information on users' websites to learn more about this issue, which is based on user needs Create a website that enables customers to select and filter products using a variety of criteria in addition to consulting customer reviews To create the most comprehensive website that can function without a hitch in practice, learn what influences visitors' decisions to purchase things from that website

- On the other side, learning the technologies used to make the product is important

As following:

• To create an API system that supports accessing and modifying data in the

Core and Web APIs

• The system stores data using a SQL Server database

• Our team researched the AngularJS 14 Framework and a few supporting libraries for AngularJS to develop and process interfaces and for users to use

on the website with regard to the presentation for end users

• To secure the system, doing research on Json Web Token technology, which controls all data flows into and out of the system

1.2.2 Research scope

- The website primarily focuses on managing the fundamental functions of an online e-commerce website, such as seeing product lists, conducting product searches, sorting products by price, evaluating products after purchases, and reading articles on technology In the admin area, you can manage users, goods, and articles as well as track orders, view historical revenue and profit statistics, search for product and customer data, and more Build a complete set of APIs to offer the display for users' end use in the processing core

1.2.3 Methods of research

- Researching research topics: Doing research before launching a website project

to sell electronics enables you to use your understanding of financial research to solve issues Specifically, using the information acquired to create a thorough, practical program

- Planning and execution: The author team has established explicit plans for each

task from the moment the idea first came to fruition in order to effectively implement the suggested themes Planning gives the author team a more detailed understanding of the job they will be doing, allowing them to work faster and more effectively

- Search for documents: To help the topic of the group, always actively look for

documents and information on forums, social networking sites, books, friends, and even in emails sent to other group members The group does not want to depend on the opinions of others and believes that in order to get the desired results, it is necessary to actively research, evaluate and learn

- Apply knowledge: Use what you've learned to solve challenges To investigate and

deepen research, stay on themes and research materials The written program must

be implemented practically and be appropriate for the setting that the author group

is trying to reach Additionally, the authors use their expertise in databases, web programming, software engineering, and other subjects to make the article move along more quickly and efficiently thanks to understanding the subjects, the author team is able to apply the database queries with success new soft

- Select and organize documents: After having a sufficient number of documents,

the group must read through the selection process again It is essential to read every article already published Highlight critical points Make methodical notes and summaries Put things in the order that best meets the group's preferences or goals

1.3 Expected results

- Be familiar with ASP.NET Core, RESTful APIs, and the Angular framework

- Utilizing the above-mentioned architectural formulas to construct an electronic sales and management website

Chapter 2 FUNDAMENTALS 2.1 Overview of ASP.NET Core

2.1.1 Introduction to ASP.NET Core

- An open source, cross-platform framework called ASP.NET Core is used to create and integrate contemporary web applications such web apps, Internet of Things applications, and mobile backends with web APIs

- The architecture offered by ASP.NET Core makes it easier to construct standalone

or cloud apps (using Microsoft Azure) With open source code available at Github, you can create cross-platform ASP.NET Core applications for Windows, Macs, and Linux [2]

2.1.2 Features

- On Windows, Mac, and Linux (open source and community development), you may create and execute cross-platform ASP.NET apps ASP.NET Core combines ASP.NET MVC with ASP.NET Web API

- Can self-host or host on IIS

- There is a dependency injection option

- Simple front-end framework integration, such as Angular and Knockout

- Support for various environments' setup

- A new pipeline technique for HTTP requests

- Support for version management

- Distribute the whole Nuget package [2]

2.1.3 Introduction to Web APIs in ASP.NET Core

- Building services that are accessible to a variety of customers, including browsers and mobile devices, is simple with ASP.NET With ASP.NET, you can create web pages and services concurrently inside the same project using the same framework and design conventions

- Modern online experiences were created with ASP.NET in mind Your classes are automatically serialized to correctly formatted JSON by endpoints out of the box

No unique setup is necessary Of course, serialization may be adapted to endpoints with particular needs

- Using attributes, ASP.NET enables you to specify routes and verbs directly within your code The query string, request body, and request path data are all automatically tied to method parameters

- First-rate HTTPS compatibility is included into.NET right out of the box Create

a test certificate automatically and import it with ease to enable local HTTPS, allowing you to run and test your apps in the safe manner that was intended [2]

2.1.4 Advantages of ASP.NET Core

- Fast - It is a high-performance, lightweight web framework

- Integration of a client-side framework, such as AngularJs, ReactJs, and React with Redux, etc., with a contemporary UI framework is supported by ASP.NET Core Client-side framework templates for AngularJs, ReactJs, and React with Redux, among others, are supported by the ASP.NET framework

- Hosting - It may be self-hosted, run on Apache, IIS, or Docker

- Cross-Platform - Windows, Mac, and Linux development tools can all execute ASP.NET Core web applications

- Built-in Dependency Injection Support: It has built-in Dependency Injection support

- It supports HTTP requests that are modular

- It is an open-source web framework with a strong focus on the community

- Versioning of apps side by side - ASP.NET Core is based on.NET Core, which allows for the simultaneous use of several versions of an application

- A cohesive narrative for creating web UI and web APIs [2]

2.2 Angular Framework

2.2.1 Introduction to Angular

- With the use of HTML and TypeScript, single-page client apps may be created

Angular As a collection of TypeScript libraries that you load into your projects,

it offers both essential and optional functionality [4]

2.2.2 Angular concepts

The following are some of Angular's concepts:

- Module: JavaScript (ES2015) modules are different from and incomplete without

Angular's NgModules For a group of components that are dedicated to a workflow, an application domain, or a collection of closely linked capabilities, a NgModule specifies a compilation context An NgModule may create functional units by connecting its parts to relevant code, such services

- Component: Each Angular application contains at least one component, the root

component connecting a component hierarchy to the page document object model (DOM) Each component has an accompanying HTML template that provides a view to be presented in the target environment, along with a class that describes the application data and logic

- Templates, directives, and data binding: An Angular template mixes HTML with

Angular syntax, allowing it to alter HTML components before they are shown Binding markup binds your application's data to the DOM, while template directives give program logic

- Services and dependency injection: The @Injectable() decorator comes just

before the declaration of a service class The decorator provide the metadata necessary for additional providers to be injected into your class as dependencies

- Routing: You may design a navigation path between the various application states

and view hierarchies in your app using the Angular Router NgModule service [4]

2.3 Json Web Token

2.3.1 Introduce to Json Web Token

- The information in the JWT string is structured in JSON, and it serves as a way for the two Client - Server parties to convey transfer requests The header, payload, and signature sections of the token string must all be separated by "."

Figure 2.1 Structure of a JSON Web Token (JWT) [9]

- An open standard token called JWT (Json Web Token) is used to exchange data with HTTP requests Based on the signature, this information is authenticated and reliably marked JWT is far better than sessions in many ways [9]

• Stateless means that no data is kept on the server

• Easy to grow and evolve

• Due to the server reading the information in the request, performance is improved (if use session, the system must query information in storage or database)

Chapter 3 SURVEY AND USER REQUIREMENT

3.1 Current systems

3.1.1 Website Phong Vu

Picture 3.1 Website Phong Vu

- Phongvu.vn is a website for buying and selling electronic equipment of one of

the major distributors of electronic equipment and products in Vietnam The website has typical features of managing, buying and selling technology

products

- Advantages:

• Beautiful, modern interface

• Full of basic features of an e-commerce site

• Product information is clearly stated

• Simple purchase process, multiple payment methods

- Disadvantage:

• Can't see how many configurations the product has

• Chat with employees must be via messenger

3.1.2 Website GEARVN

Picture 3.2 Website GEARVN

- Gearvn.com is also a buying and selling website of one of the major distributors

in Vietnam Gearvn is famous for its articles on popular technology topics today

as well as comments on new product lines

- Advantages:

• The interface is fresh and eye-catching

• There is online support with staff

• Simple ordering, diversified payment

• The article section on technology is well-invested

- Disadvantages:

• Can't see how many configurations the product has

• The interface is a bit confusing

• There are no written instructions for the functions

3.1.3 Website TCL

Picture 3.3 Website TCL

- Laptoptcl.vn is a buying and selling website of Truong Chi Lam distributor,

specializing in distributing laptops and components in Hanoi

- Advantages:

• Simple interface but full of information

• There is online support with staff

• Diversified payment

- Disadvantages:

• The interface is too simple

• There are no written instructions for the functions

• Can't see how many configurations the product has

- Guest: Product descriptions, reviews, product searches, account

registration and other features are available

- Customer: Having all of the features of a guest, including the ability to make purchases, read product evaluations, examine orders' histories, and track orders

❖ Main functions:

- Admin’s functions:

Table 3.1 Admin’s function

1 Login Access the application with Admin rights

2 Logout Exit application access with Admin rights

Statistics

View statistics on sales, order status, order statistics, best-selling products and top-buying customers over time

Add, remove, edit possible product attributes

7 Manage Product Add, delete, edit new product information for

10 Manage Article Add, delete, edit post content Update display

status for posts

11 View Email List See the list of emails that have subscribed to

13 Edit Website

Information

Edit the information displayed on the website such as banner, logo, website name, main menu, sub menu, …

14 Configuration For

Email

Configure email templates every time a customer places a successful order, has a new order, forgot his password,…

Table 3.2 Guest functions

Username and password are required The system will grant access to carry out system functions if the authorisation is valid

2 Register Create an account as role “User”

3 View Product

Information

You can view detailed product information such as quantity, attributes, detailed product description,

4 Search Product Search products by product name

5 Filter Products Filter products by price, alphabetical,

6 View Product List View product list, product short

information,

7 See Product

Reviews

See reviews of previous buyers, total number

of stars for the product

- Customer’s functions:

Table 3.3 Customer’s functions

Username and password are required The system will grant access to carry out system functions if the authorisation is valid

2 Logout Log out of the website

3 View Product

Information

You can view detailed product information such as quantity, attributes, detailed product description,

4 Search Product Search products by product name

5 Filter Products Filter products by price, alphabetical,

6 View Product List View product list, product short

information,

7 See Product

Reviews

See reviews of previous buyers, total number

of stars for the product

8 Edit Information Change personal information such as name,

phone number, address, birthday, gender

9 Order Tracking Track purchased order information such as

shipping, delivered,

10 Product Reviews After making a purchase, the customer can

leave a review and rating for that product

13 Purchase Users can choose the number of products, the

product's attributes before purchase

14 Enter Purchase

Information

Enter personal information before making a purchase so that the seller can deliver the goods to the right place, to the right person

15 Online Payment

After purchase, users can pay online Make payment more convenient and faster for customers

3.2.2 Document Management System

- This system will keep track of all documents, information, and a full description of the complete system, making it easier for novices to the construction and development industries to read and comprehend the system Additionally, this approach will make it simple to perform maintenance and upgrades or to swiftly and effectively transfer technology

to a new team

- Admin’s functions:

• Login

• Logout

• View Order Detail

• Update Order Status

• Manage Product Attribute

• Manage Product

• Updatde Status Product Reviews

• View Customer List

• Manage Article

• View Order Statistics

• View Report By Product

• View Revenue Report

• Edit Website Information

• Configuration For Email Templates

• Manage Admin Account

• Change Password Admin Account

• See Product Reviews

Add To Card

Buy Products

Cancel Orders

Change Change

Change Information

Change Name

Change Password

Change Phone Number

Change Sex

Choose Attributes Choose

Delete Rating Product

Edit Rating Product

Facebook

Facebook

Forgot Password Google

Google

Insert Address

Insert Note

Insert Phone Number

Logout

Payment

Payment Offline

Payment Online

Rating Product

Read News

Read News

Remember Account

Search News Search News

Search

Sort by Fit

Sort by Fit

Sort by Price Sort by Price

Tracking Order View Cart

View Category Products

View Grid

View Grid

View Infor Orders

View Information

View List

View List

View Products

View Products Detail

Customer

Guest

View Products

Detail

View Category Products

Search Products Register Login