(Đồ án tốt nghiệp) xây dựng website bán đồ cũ sử dụng công nghệ mean stack

PHẦN 2: NỘI DUNGCHƯƠNG 1: TỔNG QUÁT VỀ MEAN STACK Để tạo một ứng dụng hoàn chỉnh như một trang web động thật sự thì cần phải có sựkết hợp với các ngôn ngữ phía server và ngôn ngữ thao tá

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM

KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE BÁN ĐỒ CŨ SỬ DỤNG

CÔNG NGHỆ MEAN STACK

GVHD: NGUYỄN THÀNH SƠN SVTH: NGUYỄN ĐÌNH ĐẠT MSSV: 16110304

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN HỆ THỐNG THÔNG TIN

NGUYỄN ĐÌNH ĐẠT - 16110304

ĐỀ TÀI:

XÂY DỰNG WEBSITE BÁN ĐỒ CŨ

SỬ DỤNG CÔNG NGHỆ MEAN STACK

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN

TS NGUYỄN THÀNH SƠN

KHÓA 2016 - 2020

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN HỆ THỐNG THÔNG TIN

NGUYỄN ĐÌNH ĐẠT - 16110304

ĐỀ TÀI:

XÂY DỰNG WEBSITE BÁN ĐỒ CŨ

SỬ DỤNG CÔNG NGHỆ MEAN STACK

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN

TS NGUYỄN THÀNH SƠN

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên : Nguyễn Đình Đạt , MSSV: 16110304

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack

Họ và tên Giáo viên hướng dẫn: TS Nguyễn Thành Sơn

Tp Hồ Chí Minh, ngày 05 tháng 07 năm 2020

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên : Nguyễn Đình Đạt, MSSV: 16110304

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack

Họ và tên Giáo viên phản biện:

Hồ Chí Minh, ngày 05 tháng 07 năm 2020

Giáo viên phản biện

(Ký & ghi rõ họ tên)

LỜI CẢM ƠN

Em xin chân thành cảm ơn Thầy Nguyễn Thành Sơn – giảng viên khoa Công nghệ thông tin trường Đại học Sư Phạm Kỹ Thuật TP.HCM, đã nhiệt tình giúp đỡ em rất nhiều trong việc định hướng thực hiện đề tài khóa luận tốt nghiệp, hướng dẫn thực hiện, nêu ý kiến nhận xét, cung cấp tài liệu tham khảo trong quá trình thực hiện đề tài

“Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack”.

Bên cạnh đó, em xin gửi lời cảm ơn đến các thầy cô giảng viên của trường Đại học Sư Phạm Kỹ Thuật TP.HCM nói chung cũng như các thầy cô giảng viên khoa Công nghệ thông tin nói riêng, những người đã giảng dạy, tạo điều kiện cho em tích lũy được những kiến thức quý báu trong những năm học qua.

Dù đã cố gắng hoàn thành khóa luận tốt nghiệp đúng yêu cầu, nhưng do thời gian hạn hẹp và khả năng còn hạn chế nên chắc chắn sẽ không tránh khỏi thiếu sót.

Em mong sẽ nhận được sự thông cảm và tận tình chỉ bảo của quí thầy cô.

TP Hồ Chí Minh, ngày 05 tháng 07 năm 2020

Sinh viên thực hiện

Nguyễn Đình Đạt

ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

-ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

Họ tên sinh viên thực hiện : Nguyễn Đình Đạt MSSV: 16110304

Thời gian làm khóa luận tốt nghiệp: Từ 01/03/2020 Đến 01/08/2020

Chuyên ngành: Hệ Thống Thông Tin

Tên đề tài: Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack

Giảng viên hướng dẫn: TS Nguyễn Thành Sơn

Nhiệm vụ khóa luận:

* Tìm hiểu tổng quan thế nào là MEAN stack

* Tìm hiểu về MongoDB và AngularJS

* Tìm hiểu về Express và NodeJS

* Cấu hình môi trường và kết nối được database

* Tiến hành cài đặt website bán đồ cũ

- Sử dụng passportjs làm chức năng đăng ký đăng nhập + sử dụng token

để lưu tiến trình đăng nhập

- Làm chức năng tìm kiếm

- Làm chức năng hồ sơ cá nhân và chỉnh sửa thông tin cá nhân

- Làm chức năng upload hình ảnh vào cơ sở dữ liệu

- Làm chức năng quản lý bài đăng,người dùng,comment

- Làm chức năng xác thực bài đăng,người dùng

- Làm chức năng gửi email

Giáo viên hướng dẫn

KẾ HOẠCH THỰC HIỆNp

STT Ngày bắt Ngày kết Công việc được giao Kết quả Đánh giá

Tìm hiểu tổng quan khái

1 1/03/2020 26/03/2020 niệm về công nghệ MEAN 80%

4 10/05/2020 16/05/2020 trường: Back-End và Front- 60%

End

5 17/04/2020 23/04/2020 Thiết kế cơ sở dữ liệu 100%

6 24/04/2020 30/04/2020 Xây dựng ứng dung Back- 50%

End, viết api

8 08/05/2020 14/05/2020 Xây dựng ứng dung Back- 80%

End, viết api

9 15/05/2020 21/05/2020 Hoàn thành bài đặc tả về 90%

website bán đồ cũ

10 22/05/2020 28/05/2020 Xây dựng project Angular 30%

11 29/05/2020 04/05/2020 Xây dựng project Angular 50%

12 05/06/2020 11/06/2020 Xây dựng project Angular 85%

14 19/06/2020 25/06/2020 Tiến hành thiết kế giao diện 30%

15 26/06/2020 02/07/2020 Tiếp tục hoàn thiện giao diện 80%

16 03/07/2020 09/07/2020 Viết báo cáo khóa luận 100%

Ngày 5 tháng 7 năm 2020

7

DANH MỤC HÌNH ẢNH

Hình 1.2 1: Cấu trúc express 27

Hình 2 1: Mở lệnh "mongod–dbpath D:\MongoDB\data" 30

Hình 2 2: Kết quả sau khi chạy thành công với Port 27017 30

Hình 2 3: Gõ lệnh "mongo" khi khởi động mongoDB xong 31

Hình 2 4: Gõ câu lệnh "show dbs" 31

Hình 2 5: Tạo database trong MongoDB 31

Hình 2 6: Xóa database 31

Hình 2 7: Thêm 1 document vào collection 31

Hình 2 8: Thêm nhiều document vào collection 32

Hình 2 9: Hiện thị tất cả các docment có trong collection 32

Hình 2 10: Update 1 document trong collection 32

Hình 2 11: Xóa document 33

Hình 2 12: Kết nối thành công với mongodb 35

Hình 2 13: Các bước thiết lập project Angular 35

Hình 2 14: Cấu trúc file với một project Angular 36

Hình 2 15: khởi chạy project Angular 37

Hình 2 16: Download postman về máy tính 37

Hình 2 17: Sau khi download xong 38

Hình 2 18:Giao diện postman 38

Hình 3 1:Xác định các Actor 40

Hình 3 2:Mô hình ERD database 42

Hình 3 3:Collection Product 49

Hình 3 4:Collection Comment 50

Hình 3 5:Collection Comment Children 51

Hình 3 6:Collection Users 51

Hình 3 7:Collection Category 52

Hình 4 1: Tạo 2 folder con là BackEnd và FrontEnd 53

Hình 4 2: Tạo mới một project backend 53

Hình 4 3:Khởi tạo git 54

Hình 4 4: Thực hiện cài đặt express 54

Hình 4 5: Cài đặt express thành công 54

Hình 4 6: Cài đặt nodemon 55

Hình 4 7: Cài đặt thành công 55

Hình 4 8: Khởi tạo FrontEnd 56

Hình 4 9: Thực hiện lệnh để chạy project 56

Hình 4 10: Giao diên FrontEnd 56

Hình 4 11: Cài đặt mongoose 57

Hình 4 12: File cấu hình môi trường 57

Hình 4 13: Cấu hình file server.js 58

Hình 4 14: Folder chứa hình ảnh 58

Hình 4 15: Code xử lý gửi email 59

Hình 4 16: Tạo model 60

Hình 4 17: Xử lý tải hình ảnh và xác thực token 61

Hình 4 18: Thiết lập request đăng nhập 62

Hình 4 19: Api đăng nhập thành công 62

Hình 4 20: Thiết lập request đăng ký người dùng 63

Hình 4.21 : Api đăng ký người dùng thành công 63

Hình 4 22: Thiết lập request lấy danh sách người dùng 64

Hình 4 23: Api lấy danh sách người dùng thành công 64

Hình 4 24: Gán token request lấy thông tin người dùng 65

Hình 4 25: Api lấy thông tin người dùng theo ID thành công 65

Hình 4 26: Thiết lập request upload hình ảnh 66

Hình 4 27: Api upload hình ảnh thành công 66

Hình 4 28: Thiết lập request tìm người dùng theo email 66

Hình 4 29: Api tìm kiếm người dùng theo email thành công 67

Hình 4 30: Gán token request đổi mật khẩu 67

Hình 4 31: Thiết lập request thay đổi mật khẩu mới 68

Hình 4 32: Api thay đổi mật khẩu thành công 68

Hình 4 36: Gán token request lấy danh sách sản phẩm 70

Hình 4 37: Api lấy tất cả danh sách sản phẩm thành công 70

Hình 4 38: Gán token request lấy chi tiết sản phẩm 71

Hình 4 39: Thiết lập request lấy chi tiết sản phẩm 71

Hình 4 40: Api lấy chi tiết một sản phẩm theo ID thành công 71

Hình 4 41: Gán token request xóa một sản phẩm 72

Hình 4 42: Thiết lập request xóa một sản phẩm 72

Hình 4 43: Xóa một sản phẩm thành công 72

Hình 4 44: Gán token request upload ảnh đại diện sản phẩm 73

Hình 4 45: Thiết lập request upload ảnh đại diện 73

Hình 4 46: Api upload ảnh đại diện sản phẩm thành công 73

Hình 4 47: Gán token request upload danh sách hình ảnh 74

Hình 4 48: Thiết lập request upload danh sách hình ảnh 74

Hình 4 49: Api upload danh sách hình ảnh chi tiết sản phẩm thành công 74

Hình 4 50: Thiết lập request tìm kiếm một sản phẩm 75

Hình 4 51: Api tìm kiếm một sản phẩm thành công 75

Hình 4 52: Gán token request tạo một bình luận 75

Hình 4 53: Thiết lập request tạo một bình luận 76

Hình 4 54: Api tạo bình luận mới thành công 76

Hình 4 55: Api lấy danh sách tất cả bình luận thành công 77

Hình 4 56: Api lấy danh sách danh mục sản phẩm thành công 78

Hình 4 57: Thiết lập request lây chi tiết danh mục sản phẩm 79

Hình 4 58: Api lấy chi tiết danh mục sản phẩm thành công 79

Hình 4 59: Thiết lập request lấy danh sách chi tiết danh mục sản phẩm 80

Hình 4 60: Api lấy danh sách chi tiết danh mục con thành công 80

Hình 4 61: Cấu trúc thư muc frontend 81

Hình 4 62:Diagram NgRx trong Angular 82

Hình 4 63:Cấu trúc thư mục tạo form login 83

Hình 4 64: Xử lý form login 83

Hình 4 65: Tạo service 84

Hình 4 66: Code file auth.guard.ts 84

Hình 4 67: Danh sách danh mục sản phẩm 85

Hình 4 68: Gán token khi người dùng tạo một request xuống server 85

Hình 4 69: code server 86

Hình 4 70: Cấu trúc Module home 86

Hình 4 71: Giao diện danh mục sản phẩm 88

Hình 4 72: Giao diện danh sách sản phẩm 88

Hình 4 73: Lọc sản phẩm có giá từ thấp đến cao 88

Hình 4 74: Lọc sản phẩm có giá từ cao xuống thấp 89

Hình 4.75: Giao diện chi tiết sản phẩm 90

Hình 4.76:Giao diện xem danh sách bình luận 90

Hình 4.77:Giao diện đăng bình luận 91

Hình 4.78:Thông báo đăng nhập để có thể truy cập 91

Hình 4.79:Thông tin người dùng 93

Hình 4.80:Giao diện Form đăng nhập người dùng 93

Hình 4.81 : Giao diện người dùng đăng nhập thành công 94

Hình 4.82:Giao diện nhập thông tin vào form đăng ký 95

Hình 4.83:Giao diện thông báo đăng ký thành công 96

Hình 4.84:Thông báo về địa chỉ email sau khi đăng ký 97

Hình 4.85:Thông báo về email sau khi tài khoản được xác nhận 97

Hình 4.86:Giao diện Form lấy thông tin sản phẩm 98

Hình 4.87: Giao diện sản phẩm đăng ký thành công 99

Hình 4.88:Giao diện tìm kiếm 99

Hình 4.89:Giao diện danh sách sản phẩm được tìm thấy 100

Hình 4.90:Chọn địa chỉ và danh mục sản phẩm bạn tìm kiếm 100

Hình 4.91:Sản phẩm được tìm thấy 101

Hình 4.92:Giao diện đăng nhập của quản trị viên 102

Hình 4.93:Thông báo lỗi đăng nhập 102

Hình 4.94:Giao diện bảng điều khiển 103

Hình 4.95:Danh sách sản phẩm 103

Hình 4.96:Tài khoản cần xác thực 104

DANH MỤC BẢNG BIỂU

Bảng 3 1 Ràng buộc bảng User 42

Bảng 3 2: Ràng buộc bảng Product 44

Bảng 3 3Ràng buộc bảng Comment 45

Bảng 3 4Ràng buộc bảng Comment Children 46

Bảng 3 5 Ràng buộc bảng Category Level1 47

Bảng 3 6 Ràng buộc bảng Category Level2 48

PHẦN 1: PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI:

Nếu đã từng xây dựng một vài ứng dụng Web, chắc hẳn bạn đã từng nghe đến cái tênAngular, một Frameworks Javascript giúp chúng ta xây dựng ứng dụng Web đầy đủ tínhnăng từ phía Client Angular lần đầu được phát hành bởi gã khổng lồ Google vào năm

2010 với phiên bản AngularJS, sau đó đã có chỗ đứng khá vững chắc trong một thời giandài, phiên bản Angular 2 phát hành năm 2016 mang đến một bước chuyển mình vượt bậc,một công cụ thực sự mạnh mẽ cho việc phát triển ứng dụng Web trên cả nền tảng Mobile

và Desktop … Angular là một công nghệ được phát triển bởi google

và là một trong những thành phần quang trọng trong việc thiết kế giao diện ( End) của công nghệ MEAN STACK MEAN STACK là gì? MEAN có đủ để làm mộttrang Web hoàn thiện hay không? Cơ hội phát triển khi thành thạo MEAN là gì? Vângrất nhiều câu hỏi được đặt ra và để giải quyết những vấn đề đó nhóm chúng em chọn

Front-đề tài “Xây dựng một Website bán đồ cũ đơn giản bằng công nghệ MEAN STACK”

2 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN:

Đề tài hướng đến mục đích xây dựng một Website bán đồ cũ giúp mang ý nghĩatiết kiệm tránh lãng phí dụng những kiến thức về lý thuyết biến nó thành thực tiễn Từmột Website đơn giản phát triển hoàn thiện hơn thành đồ án “Khóa luận tốt nghiệp”sau này cũng như tạo tiền đề căn bản để các em khóa sau tham khảo và phát triển dự

án toàn diện hơn

Hoàn thành nghiên cứu các bạn sẽ hiểu rõ hơn về MongoDB, NodeJS, Angular và

Website bán đồ cũ gồm những gì, các thao tác căn bản trên Database NoSql xử lý như thế nào Liên kết giữa các phần ra sao…

PHẦN 2: NỘI DUNG

CHƯƠNG 1: TỔNG QUÁT VỀ MEAN STACK

Để tạo một ứng dụng hoàn chỉnh như một trang web động thật sự thì cần phải có sựkết hợp với các ngôn ngữ phía server và ngôn ngữ thao tác cơ sở dữ liệu Và MEANStack là một sự kết hợp như thế

MEAN stack là sự kết hợp giữa :

(RDBMS)như MySQL, Oracle DB, MSSQL thì MongoDB lại thuộc trường phái cơ sở

dữ liệu phi quan hệ (NoSQL) MongoDB lưu trữ các dữ liệu dưới dạng giống với JSON(JavaScript Object Notation) và gọi tên là BSON (Binary JSON)

ứng dụng Web bằng cách sử dụng ExpressJS Tuy nhiên, chúng ta có thể sử dụng sứcmạnh của ExpressJS để tạo ra các API một cách nhanh chóng

• Angular: Angular là một javascript framework Dùng để xây dựng giao diện người

dùng(Front-end) Angular được phát triển bởi Google AngularJS là từ dùng để nói vềAngular 1 ra đời 2009 được viết bằng javascript.Còn Angular được gọi chung là

Angular 2 ra đời 2016 được viết bằng TypeScript phiên bản nâng cấp javascript

Engine Sức mạnh của NodeJS hiện nay được sử dụng ở rất nhiều dự án và công ty nổitiếng như Uber, NetFlix, Facebook, Google…NodeJS có thể xử lý hàng ngàn kết nốisong song – điều mà các web server thông thường không dễ để xử lý được

1.1 MONGODB

- Giới thiệu: MongoDB là một trong những cơ sở dữ liệu mã nguồn mở NoSQL

phổ biến nhất được biết bằng C++ Tính đến tháng 2/2015, MongoDB được xếp thứ 4trong số các hệ thống cơ sở dữ liệu phổ biến nhất MongoDB là một cơ sở dữ liệu

* Một số điểm quan trọng của MongoDB:

• MongoDB được thiết kế theo kiểu hướng đối tượng trong đó các bảng đượccấu trúc một cách linh hoạt cho phép các dữ liệu lưu trên bảng không cần phải tuân theomột dạng cấu trúc nhất định nào(về định dạng bảng, thuộc tính)

• JSON document lưu trữ các dữ liệu theo kiểu định dạng “key-value”, ví dụ

• Có 2 kiểu cấu trúc cơ bản trong JSON là:

 Array: Một danh sách chứa các thể hiện của một list các “key-value”.

 Dictionaries: Lưu trữ các cặp “key-value”.

• MongoDb có cấu trúc Schema động Một cơ sở dữ liệu NoSQL cho phép chúng ta phát triển ứng dụng mà không cần định nghĩa trước một schema, còn đối với các

cơ sở dữ liệu quan hệ khác thì chúng ta cần phải định nghĩa một schema trước khi chúng

ta có thể thêm dữ liệu vào hệ thống Không có schema được định nghĩa trước cho phép các cơ sở dữ liệu NoSQL dễ dàng cập nhật lại dữ liệu của bạn mỗi khi có yêu cầu thay đổi

• MongoDB không hỗ trợ Joins và Transaction

- Trước khi tìm hiểu sâu về MongoDB, ta cùng tìm hiều hệ cơ sở dữ liệu phiquan hệ (NoSQL): Cơ sở dữ liệu NoSQL tên gốc là “Non SQL” (phi SQL) hoặc “nonrelational” (phi quan hệ) Các cơ sở dữ liệu NoSQL đang được sử dụng ngày càng nhiềutrong các ứng dụng dữ liệu lớn Vậy NoSQL khác gì với hệ cơ sở dữ liệu quan hệ(RDBMS)? Và lý do gì để chúng ta lựa chọn NoSQL cho các dự án hiện tại cũng như sắptới ?

* Các đặc điểm khác biệt giữa MongoDB(NoSQL) và RDBMS như sau:

• Mô hình dữ liệu: Một cơ sở dữ liệu NoSQL cho phép chúng ta phát triển ứng

dụng mà không cần định nghĩa trước một schema, còn đối với các cơ sở dữ liệu quan hệkhác thì chúng ta cần phải định nghĩa một schema trước khi chúng ta có thể thêm dữ liệuvào hệ thống Không có schema được định nghĩa trước cho phép các cơ sở dữ liệuNoSQL dễ dàng cập nhật lại dữ liệu của bạn mỗi khi có yêu cầu thay đổi

nó có hiệu suất cao, tương tác nhanh và khả năng mở rộng tốt, nó hoạt động trên khái

niệm Database=> Collections=> _id và document RDBMS cung cấp kiểu lưu trữ dữ

liệu dưới dạng bảng và các bảng này có quan hệ với nhau và nó hoạt động trên khái niệm

Databases=> Tables=> Columns

ta có thể lấy dữ liệu liên quan trong nhiều bảng bằng cách sử dụng một câu lệnh SQL Còn NoSQL không trang bị JOIN, chúng ta phải làm bằng tay khi chúng ta code

thực hiện trong một transaction - đảm bảo tất cả update thành công hoặc nếu một bảnupdate fails thì sẽ rollback lại toàn bộ các record khác Điều này đảm bảo tính đồng nhấtcho dữ liệu Trong NoSQL, việc sửa đổi một document là riêng lẻ Nói cách khác, nếubạn đang cập nhật ba giá trị trong một document, cả ba đều được cập nhật thành cônghoặc nó vẫn không thay đổi Tuy nhiên, không có transaction tương đương để update chonhiều document Có những option tương tụ như transaction Nhưng chúng phải được xử

lý thủ công trong khi viết code

o Ưu điểm của MongoDB:

• Do Mongodb lưu trữ dữ liệu dạng JSON, không có tính ràng buộc về

các mối quan hệ và cấu trúc lưu trữ nên khả năng mở rộng rất linh động, tính sẵn sàng cao và tốc độ truy vấn cực nhanh (Nhanh hơn nhiều so với SQL)

• Sử dụng bộ nhớ nội tại(RAM) để lưu giữ phần công việc, hạn chế truy cập vào ổ cứng nên truy vấn sẽ rất nhanh

o Nhược điểm của MongoDB:

• Điều đầu tiên phải kể đến ở đây là MongoDB không có các tính chấtràng buộc như trong RDBMS nên khi thao tác với MongoDB thì phải hết sức cẩn thận vìrất dễ sai sót Không ứng dụng được cho các mô hình giao dịch yêu cầu độ chính xác cao

• Vì không hỗ trợ join giống như RDBMS nên khi viết function join trong code ta phải làm bằng tay

• Mọi thay đổi về dữ liệu mặc định đều chưa được ghi xuống ổ cứng ngaylập tức vì vậy khả năng bị mất dữ liệu từ nguyên nhân mất điện đột xuất là rất cao

(Nội dung mongodb được tham khảo trong tài liệu tham khảo số 6)

1.2 EXPRESSJS

nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile.Express rất dễ dàng để phát triển các ứng dụng nhanh dựa trên Node.js cho các ứng dụng Web Express hỗ trợ các phương thức HTTP và middleware tạo ra 1 API rất mạnh mẽ và

sử dụng dễ dàng hơn

* Các tính năng của Express framework phải kể đến như:

• Cho phép thiết lập các lớp trung gian để trả về các HTTP request

• Định nghĩa routing có thể được sử dụng với các hành động khác nhau dựa

trên phương thức HTTP và URL

• Cho phép trả về các trang HTML dựa vào các tham số truyền vào đến template

• Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ nên các bạn không phải lo lắng khi làm việc với Framework này

• Express hỗ trợ các phương thức HTTP và middleware để tạo ra API một cách dễ dàng, nhanh chóng và rất mạnh mẽ

• Về hiệu năng thì Express rất tối ưu vì Express cung cấp một layer bao gồm các tính năng cơ bản của ứng dụng web và không hề tác động đến các tính năng của Node.js

* Cấu trúc của ExpressJS

package.json chứa các package cho ứng dụng chạy

Routes: chứa các route có trong ứng dụng Views:

chứa view/template cho ứng dụng

Public: chứa các file css, js, images, cho ứng dụng.

1.3 ANGULAR

• Angular là một Javascript frameword dùng để viết giao diện web

(Front-end),được phát triển bởi google

• Angular hỗ trợ việc xây dựng những thành phần (components) UI có tính tương

tác cao, có trạng thái và có thể sử dụng lại được

* Các tính năng cốt lõi của Angular:

- Angular Module: Angular bao gồm một số các khối như Component, Service và

Chúng ta tạo ra các component, service, và directive sau đó đặt chúng trong AngularModule Chúng ta sử dụng một directive đặc biệt gọi là @NgModule để tạo module.Angular Module cũng được gọi là NgModule.

Sử dụng Angular Module (hoặc ngModule) để tổ chức code ứng dụng Angular với mộtứng dụng Angular lớn hơn Ứng dụng sẽ gộp lại bởi nhiều Angular Module Mỗi Module triển khai một tính năng cụ thể voặc các tính năng của ứng dụng

- Component: Angular Component là một class nó được bổ trợ bởi @Component

decorator Component điều khiển một phần của UI

Template chỉ là một tập con của HTML, nó chỉ cho Angular biết làm sao để hiểnthị view Nó là một trang HTML chuẩn sử dụng các thẻ H1, H2 Nó cũng sử dụngcác lệnh của Angular như {}, []

- Diective: Directive giúp chúng ta thao tác với View Một directive là một class, chúng ta tạo ra sử dụng @Directive nó chứa metadata và logic thao tác trên DOM

View được tạo ra bởi Angular sử dụng template metadata được định nghĩa trongComponent Các template là động và được chuyển đổi sử dụng directive

Angular không có bất cứ đặc tả nào cho Service nó chỉ là các class có export method và chứa một số task Bạn không cần làm gì cả

* Ưu điểm của Angular:

- Tốc độ và hiệu suất: Đạt được tốc độ tối đa có thể có trên Nền tảng Web hiện nay

và tiếp tục thực hiện nó thông qua Công việc Web và hiển thị phía máy chủ Angular giúpbạn kiểm soát khả năng mở rộng Đáp ứng các yêu cầu dữ liệu lớn bằng cách xây dựng các

mô hình dữ liệu trên RxJS, Immutable.js hoặc một mô hình đẩy khác

- Công cụ đáng kinh ngạc: Xây dựng các tính năng nhanh chóng với các mẫu đơn

giản, khai báo Mở rộng ngôn ngữ mẫu với các thành phần của riêng bạn và sửdụng một mảng rộng các thành phần hiện có Nhận trợ giúp và phản hồi cụ thểtheo góc cạnh với hầu hết mọi IDE và trình chỉnh sửa Tất cả điều này đến vớinhau để bạn có thể tập trung vào việc xây dựng các ứng dụng tuyệt vời thay vì cốgắng làm cho mã hoạt động

- Được nhiều nhà phát triển yêu thích: Angular cung cấp cơ sở hạ tầng năng suất

và khả năng mở rộng hỗ trợ các ứng dụng lớn nhất của Google

- Angular có thể chạy trên hầu hết các trình duyệt điện thoại thông minh

* Nhược điểm của Angular:

- Mặc dù angular có nhiều lợi thế ưu điểm nhưng nó cũng có mặt trái ngược lại:

Không an toàn: Được phát triển từ javascript nên nó không an toàn, phía máy chủphải thường xuyên xác nhận quyền để hệ thống chạy trơn tru Phụ thuộc: Nếu người dùng vô hiệu hóa javascript thì ứng dụng sẽ không hoạt động được

- Khó tiếp cận cho người mới học Web

(Nôi dung về Angular được tham khảo phần tài liệu tham khảo số 7)

1.4 NODEJS

• Có thể hiểu Node.js là 1 nền tảng hay 1 môi trường được sử dụng để xây dựng

các ứng dụng web, ứng dụng mạng, công cụ, thư viện,

• Nền tảng ở đây có nghĩa là tập hợp các công cụ, các framework, các thư viện,các khả năng và sử dụng ngôn ngữ lập trình gì để hỗ trợ bạn xây dựng (build) ứng dụngcủa bạn

• NodeJS là một nền tảng Server side được xây dựng dựa trên Javascript Engine (V8Engine) Cho phép lập trình viên có thể xây dựng các ứng dụng chạy trên máy chủ Ban đầu,Node.js được phát triển bởi Ryan Dahl Phiên bản đầu tiên của Node.js

được cho ra mắt vào năm 2009

• Node.js có thể chạy được trên nhiều nền tảng khác nhau như Windows, Linux hay Mac OS,…

• Node.js là bộ thư viện JavaScript được Google phát triển để viết trình duyệt web Chrome

• Bản thân Node.js không phải là một ngôn ngữ lập trình mới, thay vào đó Node.js

là một nền tảng mã nguồn mở (hay phần mềm mã nguồn mở) được viết dựa trên ngôn ngữ JavaScript

khi có thể tiếp tục chạy tiếp Với Node.js, bạn xác định các function sẽ chạy để hoàn thành một tác vụ nào đó, trong khi phần còn lại của ứng dụng vẫn chạy đồng thời.

* Đặc điểm của NodeJS:

- Không đồng bộ và Phát sinh sự kiện (Event Driven): Tất các các APIs của thư

viện Node.js đều không đồng bộ, nghĩa là không blocking (khóa) Nó rất cần thiết

vì Node.js không bao giờ đợi một API trả về dự liệu Server chuyển sang một APIsau khi gọi nó và có cơ chế thông báo về Sự kiện của Node.js giúp Server nhậnđựa phản hồi từ các API gọi trước đó

Node.js rất nhanh trong các quá trình thực hiện code

- Các tiến trình đơn giản nhưng hiệu năng cao: Node.js sử dụng một mô hình

luồng đơn (single thread) với các sự kiện lặp Các cơ chế sự kiện giúp Server trả lại các phảnhồi với một cách không khóa và tạo cho Server hiệu quả cao ngược lại với các cách truyềnthống tạo ra một số lượng luồng hữu hạn để quản lý request Nodejs sử dụng các chươngtrình đơn luồng và các chương trình này cung cấp các dịch vụ

cho số lượng request nhiều hơn so với các Server truyền thống như Apache HTTP Server

- Có thể tải được một lượng truy cập khá lớn mà vẫn mượt Phần Core bên dướicủa Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao

➔ Với những đặc điểm này NodeJS là một sự lựa chọn hoàn hảo cho các ứng dụngwebsite trên các lĩnh vực công nghệ bao gồm:

- Các ứng dụng về I/O

- Các ứng dựng về luồng dữ liệu

- Các ứng dụng về dữ liệu hướng đến thời gian thực

- Các ứng dụng dựa vào JSON APIs

- Các ứng dụng Single Page Application Hiện tại có rất nhiều hệ thống lớn hiện tại

đang sử dụng NodeJS, trong số này có thể kể đến như: eBay, GE, GoDaddy, Microsoft, Yahoo, Linkedin, Paypal, Uber,…

* Ưu điểm của NodeJS:

hình kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằngJSON

(Gmail?) NodeJS rất phù hợp để làm Với khả năng xử lý nhiều Request/s đồng thời thờigian phản hồi nhanh Các ứng dụng bạn định viết không muốn nó tải lại trang, gồm rấtnhiều request từ người dùng cần sự hoạt động nhanh để thể hiện sự chuyên nghiệp thìNodeJS sẽ là sự lựa chọn của bạn

NodeJS có thể xử lý hàng nghìn Process và trả ra 1 luồng khiến cho hiệu xuất hoạt độngđạt mức tối đa nhất và tuyệt vời nhất

- Streamming Data (Luồng dữ liệu): Các web thông thường gửi HTTP request và

nhận phản hồi lại (Luồng dữ liệu) Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn, NodeJS sẽxây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt

động cho các luồng dữ liệu khác

Twitter là điển hình cho Web thực NodeJS làm khá tốt điều đó !

* Nhược điểm của NodeJS:

- Giống như hầu hết các công nghệ mới, việc triển khai Node.js trên host không phải là điều dễ dàng

CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụngtương tự như vậy thì không nên dùng NodeJS (Lý do: NodeJS được viết bằng C++

& Javascript, nên phải thông qua thêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1chút )

- NodeJS và ngôn ngữ khác NodeJS, PHP, Ruby, Python NET …thì việc cuốicùng là phát triển các App Web NodeJS mới sơ khai như các ngôn ngữ lập trình khác.Với những gì các ngôn ngữ tiền bối đang có, nếu chưa biết về NodeJS thì việc cần xây

- Xây dựng các ứng dụng hao tốn tài nguyên: Bạn đừng mơ mộng đến Node.jskhi bạn đang muốn viết một chương trình convert video Node.js hay bị rơi vào trườnghợp thắt cổ chai khi làm việc với những file dung lượng lớn.

- Một ứng dụng chỉ toàn CRUD: Node.js không nhanh hơn PHP khi bạn làm cáctác vụ mang nặng tính I/O như vậy Ngoài ra, với sự ổn định lâu dài của các webserverscript khác, các tác vụ CRUD của nó đã được tối ưu hóa Còn Node.js?

- Khi bạn cần sự ổn định trong ứng dụng của bạn: Chỉ với 4 năm phát triển củamình (2009-2013), version của Node.js đã là 0.10.15 (hiện tại tới thời điểm này làv0.10.35) Mọi API đều có thể thay đổi – một cách không tương thích ngược – hãy thậtcẩn thận với những API mà bạn đang dùng, và luôn đặt câu hỏi: “Khi nó thay đổi, nó sẽảnh hưởng gì đến dự án của tôi?”

- Và quan trọng nhất: Bạn chưa hiểu hết về Node.js Node.js cực kỳ nguy hiểm

trong trường hợp này, bạn sẽ rơi vào một thế giới đầy rẫy cạm bẫy, khó khăn Vớiphần lớn các API hoạt động theo phương thức non-blocking/async việc không hiểu

rõ vấn đề sẽ làm cho việc xuất hiện những error mà thậm chí bạn không biết nóxuất phát từ đâu? Và mệt mỏi hơn nữa: Khi cộng đồng Node.js chưa đủ lớn mạnh,

và sẽ ít có sự support từ cộng đồng Khi mà phần lớn cộng đồng cũng không kháhơn bạn là bao

* Nên sử dụng Node.js khi:

- Node.js thực sự tỏa sáng trong việc xây dựng RESTful API (json) Gần như

không có ngôn ngữ nào xử lý JSON dễ dàng hơn Javascript, chưa kể các APIserver thường không phải thực hiện những xử lý nặng nề nhưng lượng concurrentrequest thì rất cao Mà Node.js thì xử lý non-blocking Chẳng còn gì thích hợp hơnNode.js trong trường hợp này!

- Những ứng dụng đòi hỏi các giao thức kết nối khác chứ không phải chỉ có http.Với việc hỗ trợ giao thức tcp, từ nó bạn có thể xây dựng bất kỳ một giao thức custom

một biến global, và thế là mọi request đều có thể truy cập đến bộ nhớ đệm đó.Caching sẽ không còn quá đau đầu như trước đây, và bạn có thể lưu cũng như chia

sẻ trạng thái của một client với các client khác ngay trong ngôn ngữ, chứ bạnkhông cần thông qua các bộ nhớ ngoài!

- Quan trọng nhất: Có yêu thích và muốn sử dụng nó hay không?

(Nội dung Nodejs được tham khảo trong phầm tài liệu số 2)

CHƯƠNG 2: CÀI ĐẶT CHƯƠNG TRÌNH

2.1.2 Yêu cầu hệ thống Windows

chỉ chạy trên Windows Server 2008 R2, Windows 7 64-bit, và các phiên bản mới hơncủa Windows Các phiên bản này tận dụng các cải tiến gần đây cho nền tảng Windows vàkhông thể hoạt động trên các phiên bản cũ của Windows

của Windows mới hơn so với Windows XP, bao gồm Windows Server 2008 R2 vàWindows 7 64-bit

• MongoDB dành cho Windows 32-bit : hay trên bất kỳ phiên bản 32-bit của

Windows mới hơn so với Windows XP Phiên bản 32-bit của MongoDB chỉ được dành cho

hệ thống cũ và để sử dụng trong thử nghiệm và phát triển hệ thống Phiên bản 32-bit củaMongoDB chỉ hỗ trợ cơ sở dữ liệu nhỏ hơn 2GB

2.1.3 Các phiên bản

• MongoDB có 2 phiên bản, Community Server và Enterprice Server.

Trong đó Community là phiên bản miễn phí, còn Enterprice là phiên bản

Link cài đặt : “ https://www.mongodb.com/download-center#community”

2.1.5 Cấu hình

- Từ file cài đặt của MongoDB, tạo một thư mục tên “data”, vào thư mục “data”tạo một thư mục “db” Thư mục này có tác dụng chứa những dữ liệu mà chúng ta tạo saunày

- Thiết lập đường dẫn đến thư mục “data” vừa mới tạo bằng cách chạy file

“mongod.exe” trong thư mục server trên CMD và trỏ tới thư mục “data” đã tạo

- Vào thư mục server, bấm tổ hợp phím Ctrl + Shift + Chuột phải vào thư mục

“bin”, Chọn “Open command window here” để mở chương trình console

* Khai báo đường dẫn thư mục chứa data:

Hình 2 1: Mở lệnh "mongod–dbpath D:\MongoDB\data"

- Nếu thành công, màn hình sẽ hiển thị như sau (Chú ý dòng chữ cuối là port 27017,

đây là port kết nối của MongoDB):

Hình 2 2: Kết quả sau khi chạy thành công với Port 27017

2.1.6 Những thao tác cơ bản với MongoDB

Trước khi bắt đầu code, ta cần mở cửa sổ cmd lên với đường dẫn vào file cài đặt MongoDB ban đầu

- Gõ lệnh “mongo” và bắt đầu viết code:

Hình 2 3: Gõ lệnh "mongo" khi khởi động mongoDB xong

- Muốn biết có tất cả bao nhiêu database (trong đây màn hình hiển thị 4 database):

Hình 2 4: Gõ câu lệnh "show dbs"

- Tạo một database có các collection (collection ~ table trong SQL)

Hình 2 5: Tạo database trong MongoDB

- Xóa một database nào đó

Hình 2 6: Xóa database

- Thêm 1 document vào collection “test” (document nằm trong collection)

Hình 2 7: Thêm 1 document vào collection

- Thêm nhiều document vào collection “test”

Hình 2 8: Thêm nhiều document vào collection

- Hiển thị tất cả document trong collection “users”(hoặc db.users.find().pretty() để

hiển thị rõ hơn) :

Hình 2 9: Hiện thị tất cả các docment có trong collection

- Update “age” của người tên “Giang” trong collection thay bằng 24

Hình 2 10: Update 1 document trong collection

- Xóa document có tên “giang”:

Link cài đặt là : https://git-scm.com/downloads

• Visual Studio Code

Link cài đặt là : https://code.visualstudio.com/download

2.2.3 Kết nối NodeJS với MongoDB sử dụng Mongoose [4]

Bước 1: Tạo một Folder có tên “NODEJS” ngoài desktop.

Bước 2: Mở Visual Studio Code => Thêm một thư mục project tên

“myMongoose” đường dẫn tới Folder “NODEJS” phía trên

Bước 3: Tải thư viện Mongoose.

a Khởi chạy MongoDB lên

b Mở CMD lên, kéo đường dẫn tới thư mục “myMongoose” phía trên

c Tiếp tục câu lệnh “npm init -y” để tự động trả lời “Yes” của tất cả các tùy chọn

d Đã có file package.json

e Tiếp tục câu lệnh “npm install –save mongoose” Xong

Bước 4: Tạo một file để cấu hình cho Mongoose kết nối với Database Server

(myMongoose)

a Mở Visual Studio Code

b Chuột phải vào “myMongoose” chọn New File

c Đặt tên là db.js

Bước 5: Kết nối Mongoose với MongoDB.

a Mở Visual Studio Code

b Vào file “db.js” và thực hiện các câu lệnh kết nối

c Gọi thư viện mongoose:

const mongoose = require('mongoose')

d Kết nối:

mongoose.connect('mongodb://localhost/27017/demo')

e Tạo Schema (tạo cấu trúc cho model):

const userSchema = new mongoose.Schema({

f Tạo model từ Schema đã có:

const user = mongoose.model('user', userSchema)

Bước 6: Chạy file chúng ta vừa code bằng cách:

a Mở CMD kéo đường dẫn tới thư mục “demo”

b Thực hiện câu lệnh: “node db.js” (chạy tập tin db.js chứa code)

Bước 7: Mở mongodb lên để kiểm tra kết nối có thành công hay không

Hình 2 12: Kết nối thành công với MongoDB

• Kết nối thành công, đã có Collection “demo” và Document…

(Nôi dung thao tác với mongodb được tham khảo trong tài liệu tham khảo số 1)

2.3 CÀI ĐẶT ANGULAR:

Điều kiện: Đã cài đặt Nodejs, cài đặt các modul cần thiết

Lần lượt thực hiện từng bước sau:

Hình 2 13:Các bước thiết lập project angular

Bước 1: Tạo một Folder tên “Angular” ngoài màn hình desktop

Bước 2: Tiếp theo vẫn trên cửa sổ dòng lệnh bạn chạy câu lệnh sau đây để cài đặtAngular CLI: npm install -g @angular/cli

Bước 3: Sau khi cài đặt xong Angular CLI chạy câu lệnh ng new

demo-angular “demo-demo-angular” chính là tên của project

Bước 4: Chạy tiếp câu lệnh “npm start” hoăc “ng serve” để khởi động angular.

Hình 2 15: Khởi chaỵ projectangular

• Tiến trình cài đặt Angular hoàn tất

2.4 CÀI ĐẶT POSTMAN TEST API:

Postman: Là công cụ phổ biến được sử dụng để thử nghiệm api.Api viết tắt của

application Programming Interface cho phép ứng dụng phần mềm giao tiếp với nhauthông qua các lệnh gọi api

Bước 1: Truy cập tranghttps://www.getpostman.com/downloads/ và chọn nền tảngmuốn tải về như cho Mac, Windows hoặc Linux Kích Download

Hình 2 16: Download postman về máy tính

Bước 2: File tải về sẽ được hiển thị ở dưới cửa sổ của trình duyệt Khi quá trình tải về

hoàn tất, kích nút Run

Hình 2 17: Sau khi download xong

 Click run để cài đặt

Bước 3: Màn hình sau khi cài đặt xong.

Hình 2 18: Giao diện của postman

Cách sử dụng Postman

1.HTTP Request – Click vào đây sẽ hiển thị danh sách thả xuống với các request

khác nhau như GET, POST, COPY, DELETE, v.v Trong thử nghiệm, các yêu cầu

3.Params – Đây là nơi bạn sẽ viết các tham số cần thiết cho một request, ví dụ như

các cặp key – value

4.Authorization – Để truy cập API, cần được cấp quyền Nó có thể ở dạng tên người

dùng và mật khẩu, bearer token, v.v

5.Headers – Bạn có thể thiết lập các header như nội dung kiểu JSON tùy theo cách tổ

chức của bạn

6.Body – Đây là nơi chúng ta có thể tùy chỉnh chi tiết trong request thường được sử

dụng trong request POST

CHƯƠNG 3: BÀI ĐẶC TẢ WEB THƯƠNG MAI ĐIỆN TỬ

3.1 Giới thiệu

Ngày nay công nghệ ngày càng phát triển sự giao dịch qua lại giữa con người cũng dễdàng nhanh chóng hơn.Mục tiêu của website resale là sẽ trở thành thị trường mua bántrực tuyến.Mục tiêu cho phép người dùng và người bán kết nối và giao dịch an toàn ,dễdàng trong một môi trường thuận lợi và rõ ràng.Tất cả các hàng mục điều có trênwebsite,cho dù là dành cho mua,bán,tìm kiếm nhà cửa ,xe ô tô,tuyền dụng ,đồ điện tử đãqua sử dụng,vật nuôi,và cả dịch vụ gia đình.Mục tiêu của website là cung cấp cho ngườidùng một nền tảng trực tuyến để sử dụng một cách đơn giản,tiện lợi không cần rắc rốiphức tạp.Không cần đăng ký và ai cũng có thể tìm kiếm và đăng các thông tin liên quan

về danh mục sản phẩm cần bán khác nhau,từ bất động sản ,xe ô tô và còn nhiều hơn nữa

Mỗi người trong chúng ta đều có những sản phẩm có thể bán được.bên cạnh việc giữnhững sản phẩm không cần đến ở nhà, bất kì ai cũng có thể kiếm thêm tiền bằng việc bán

nó cho người khác thông qua thị trường mua bán trực tuyến này

3.2 Mô tả chức năng ứng dụng

3.2.1.Mô tả phân tích

a Mô tả chức năng ứng dụng của website

Thao tác đối với người dùng chưa đăng nhập hoặc chưa đăng kí tài khoản

Người dùng không cần đăng nhập vẫn có thể xem được thông tin danh sách sảnphẩm, chi tiết một sản phẩm ,thông tin người bán từ những thông tin về sản phẩm ngườibán SĐT liên hệ người dùng có thể liên hệ trực tiếp với người bán để mua sản phẩm.Saukhi đã trao đổi được với người bán, người mua có thể quyết định đặt hàng.Người mua lựachọn cách thức giao dịch (tùy vào thỏa thuận của người mua và người bán)

• Đọc và xem thông tin, quy định của website

• Người dùng có thể vào chi tiết một sản phẩm để xem số người quan tâm bình luận về sản phẩm để từ đó có thể quyết định có nên mua sản phẩm đó hay không

• Thực hiện thao tác tạo mới một tài khoản.Khi tạo một tài khoản mới phải chờ

Thao tác đối với người dùng đã đăng ký tài khoản và thực hiện đăng nhập.

• Có sẵn đầy đủ các thao tác khi mà người dùng chưa thực hiện đăng nhập

• Có thể thực hiện đăng chào bán một sản phẩm bất kì sản phẩm.Viết bài đăng liênquan đến sản phẩm (mô tả sản phẩm, hình ảnh, giá và thông tin liên hệ của người

bán) theo đúng “Loại tin”, “Danh mục” … mà người bán muốn đăng.Ban quản trị

sẽ tiến hành kiểm duyệt nội dung đăng tin trong thời gian 24h kể từ khi người bánđăng tin.Sau khi kiểm duyệt tin sẽ được hiện thị lên website

• Thực hiện mình luận một sản phẩm bất kỳ

• Sau khi người dùng đăng một sản phẩm thì cũng sẽ nhận được email thông báo

b Mô tả chức năng website quản trị

Tao tác quản trị đối với người dùng

• Quản lý danh sách sản phẩm đã đăng bởi chính người dùng, thêm sửa xóa sản phẩm

• Xem thông tin tài khoản thực hiện thay đổi mật khẩu

Tao tác quản trị đối với admin

• Có đầy đủ thao tác quản trị của người dùng

• Quản lý danh sách người dùng thực hiện thêm sửa xóa một người dùng

 Người dùng có 2 loại (Đã có tài khoản và chưa có tài khoản) đây được xem là

đối tượng sử dụng website để thực hiện các thao tác mua bán trao đổi hàng hóa

 Người dùng (đã có tài khoản) sử dụng website để đăng bài, đây cũng có thể là mộtcông ty hoặc một cửa hàng có đầy đủ các quyền thực hiện thao tác trên website chính

 Người dùng (chưa có tài khoản) đây là đối tượng khách hàng vãng lai, đối tượng chỉ

có nhu cầu mua sản phẩm , bị hạn chế một số quyền trên website chính