Xây dựng website bán giày trực tuyến

Thực hành: - Xây dựng website thương mại điện tử, với các tính năng chính như sau: o Cho phép quản trị viên xem được dữ liệu của hệ thống doanh thu, người dùng, sản phẩm, đơn hàng, đánh

THÀNH PHỐ HỒ CHÍ MINH

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

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

XÂY DỰNG WEBSITE BÁN GIÀY TRỰC TUYẾN GVHD: ThS NGUYỄN MINH ĐẠO SVTH : TÔ LÊ TẤN ĐẠT

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

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

Ngành: CÔNG NGHỆ THÔNG TIN GVHD: ThS NGUYỄN MINH ĐẠO SVTH: TÔ LÊ TẤN ĐẠT

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh Phúc

*******

NHIỆM VỤ THỰC HIỆN KHÓA LUẬN TỐT NGHIỆP

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

Tên đề tài: Xây dựng website bán giày trực tuyến

Nội dung thực hiện:

Lý thuyết:

- Tìm hiểu MERN Stack: MongoDB, ExpressJS, ReactJS, NodeJS

- Tìm hiểu Restful APIs và cách gắn các APIs

Thực hành:

- Xây dựng website thương mại điện tử, với các tính năng chính như sau:

o Cho phép quản trị viên xem được dữ liệu của hệ thống (doanh thu, người dùng, sản phẩm, đơn hàng, đánh giá) và có thể thêm, xóa, cập nhật dữ liệu

phẩm, thêm sản phẩm vào giỏ hàng, đặt hàng và có thể thanh toán trực tuyến, xem các đơn hàng của mình

Thời gian thực hiện: 15 tuần (Bắt đầu từ 20/2/2023 đến 29/5/2023)

Chữ ký của SV: ………

Tp Hồ Chí Minh, tháng 6 năm 2022

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh Phúc

*******

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

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

Tên đề tài: Xây dựng website bán giày trực tuyến

Họ và tên Giáo viên hướng dẫn: Th.S Nguyễn Minh Đạo

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh Phúc

*******

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

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

Tên đề tài: Xây dựng website bán giày trực tuyến

Họ và tên Giáo viên phản biện: TS Lê Văn Vinh

LỜI CẢM ƠN

Đầu tiên, em xin cảm ơn trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh đặc biệt Khoa Đào tạo Chất lượng cao vì đã tạo điều kiện cho em được học tập, trao dồi kỹ năng và kiến thức nền tảng để thực hiện đề tài này

Bên cạnh đó, em xin được gửi lời cảm ơn chân thành nhất đến thầy Nguyễn Minh Đạo, người thầy đã tận tình dạy bảo em cơ những kiến thức cơ bản từ những năm đầu đại học đến hướng dẫn thực hiện đề tài này

Xin cảm ơn đến những người bạn, các anh, các chị đang học và đã tốt nghiệp

đã giúp đỡ em đặc biệt khi gặp khó khăn trong suốt thời gian em học tập và thực hiện

đồ án trong trường Sư phạm Kỹ Thuật thành phố Hồ Chí Minh

Em chân thành cảm ơn

Sinh viên thực hiện

Tô Lê Tấn Đạt– 19110030

3 Các phương pháp giải quyết vấn đề

- Sử dụng JWT để cải thiện độ bảo mật của hệ thống

4 Kết quả đạt được

- Hệ thống mua bán giày gồm: website cho người dùng cuối và cho quản trị viên

- Đáp ứng được các chức năng cơ bản

Mục lục

LỜI CẢM ƠN IV TÓM TẮT TIẾNG VIỆT V DANH MỤC HÌNH ẢNH IX DANH MỤC BẢNG BIỂU XI DANH MỤC TỪ VIẾT TẮT XIII

KẾ HOẠCH THỰC HIỆN XIV

CHƯƠNG 1: PHẦN MỞ ĐẦU 1

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

1.2 ĐỐI TƯỢNG NGHIÊN CỨU 1

1.3 PHẠM VI NGHIÊN CỨU 1

1.4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 1

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 3

2.1 NODEJS 3

2.1.1.Khái niệm 3

2.1.2.Các tính năng của NodeJS 3

2.1.3.Ưu điểm và nhược điểm của NodeJS 3

2.2 EXPRESSJS 4

2.2.1.Khái niệm 4

2.2.2.Các tính năng của ExpressJS 4

2.3 MONGODB 5

2.3.1.Định nghĩa 5

2.3.2.Các tính năng nổi trội của MongoDB 5

2.3.3.Ưu điểm và nhược điểm của MongoDB 6

2.4 REACTJS 7

2.4.1.Tổng quan về ReactJS 7

2.4.2.Đặc trưng của ReactJS 7

2.5 JSON WEB TOKEN 8

2.5.1.Định nghĩa 8

2.5.2.Ưu điểm của JSON Web Token 8

3.1.1.BITIS.COM.VN 9

3.1.2.ANANAS.VN 10

3.1.3.NIKE.COM.VN 11

3.1.4.KẾT LUẬN 11

3.2 XÁC ĐỊNH YÊU CẦU 12

3.2.1 Yêu cầu chức năng 12

3.2.2 Yêu cầu phi chức năng 12

3.3 MÔ HÌNH HÓA YÊU CẦU 13

3.3.1 Bảng chức năng 13

3.3.2 Lược đồ Usecase 15

3.3.3 Đặc tả Usecase 15

CHƯƠNG 4 THIẾT KẾ PHẦN MỀM 41

4.1 LƯỢC ĐỒ LỚP 41

4.2 CHI TIẾT BẢNG DỮ LIỆU 42

4.2.1 Collection users 42

4.2.2 Collection addresses 43

4.2.1 Collection vouchers 43

4.2.1 Collection orders 44

4.2.1 Collection paymentResult 44

4.2.1 Collection orderItems 44

4.2.1 Collection address 45

4.2.1 Collection reviews 45

4.2.1 Collection products 46

4.2.1 Collection inventory 47

4.2.1 Collection categories 47

4.3 LƯỢC ĐỒ TUẦN TỰ 48

4.4.5 Trang tìm kiếm sản phẩm 68

4.4.6 Trang thông tin tài khoản 68

4.4.7 Trang thông tin đơn hàng 69

4.4.8 Trang thông tin địa chỉ giao hàng 69

4.4.9 Trang giỏ hàng 70

4.4.10 Trang tạo đơn hàng 71

4.4.11 Trang thống kê 72

4.4.12 Trang quản lý tài khoản 73

4.4.13 Trang quản lý đơn hàng 73

4.4.14 Trang quản lý sản phẩm 74

4.4.15 Trang quản lý voucher 75

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM 76

5.1 CÔNG CỤ DÙNG TRONG DỰ ÁN 76

5.2 CÀI ĐẶT ỨNG DỤNG 76

5.2.1 Thư viện và môi trường 76

5.2.2 Lệnh cài đặt và chạy chương trình 76

5.2.3 Các bước cài đặt 76

5.3 KẾ HOẠCH KIỂM THỬ 77

5.4.1 Kịch bản kiểm thử 77

5.4.2 Kết quả kiểm thử 77

CHƯƠNG 6: TỔNG KẾT 82

6.1 KẾT QUẢ ĐẠT ĐƯỢC 82

6.2 ƯU ĐIỂM 82

6.3 NHƯỢC ĐIỂM 82

6.4 HƯỚNG PHÁT TRIỂN 82

CHƯƠNG 7: TÀI LIỆU THAM KHẢO 84

DANH MỤC HÌNH ẢNH

Hình 1 Trang Bitis 9

Hình 2 Trang ananas 10

Hình 3 Trang nike 11

Hình 4 Lược đồ usecase 15

Hình 5 Lược đồ lớp 41

Hình 6 Lược đồ tuần tự đăng nhập 48

Hình 7 Lược đồ tuần tự đăng ký 48

Hình 8 Lược đồ tuần tự đăng xuất 49

Hình 9 Lược đồ tuần tự xem toàn bộ sản phẩm 50

Hình 10 Lược đồ tuần tự tìm kiếm bằng từ khóa 51

Hình 11 Lược đồ tuần tự lọc sản phẩm 51

Hình 12 Lược đồ tuần tự xem chi tiết sản phẩm 52

Hình 13 Lược đồ tuần tự xem tất cả người dùng 52

Hình 14 Lược đồ tuần tự khóa tài khoản người dùng 53

Hình 15 Lược đồ tuần tự tạo sản phẩm mới 53

Hình 16 Lược đồ tuần tự cập nhật sản phẩm 54

Hình 17 Lược đồ tuần tự xóa sản phẩm 54

Hình 18 Lược đồ tuần tự Xem toàn bộ đơn hàng 55

Hình 19 Lược đồ tuần tự cập nhật trạng thái đơn hàng 55

Hình 20 Lược đồ tuần tự xem bình luận sản phẩm 56

Hình 21 Lược đồ tuần tự phê duyệt bình luận 56

Hình 22 Lược đồ tuần tự thêm địa chỉ giao hàng 57

Hình 23 Lược đồ tuần tự cập nhật thông tin tài khoản 57

Hình 24 Lược đồ tuần tự đổi mật khẩu 58

Hình 25 Lược đồ tuần tự xem lịch sử giao hàng 58

Hình 26 Lược đồ tuần tự thanh toán 59

Hình 27 Lược đồ tuần tự xem trạng thái đơn hàng 59

Hình 28 Lược đồ tuần tự xem bình luận sản phẩm 60

Hình 29 Lược đồ tuần tự thêm sản phẩm vào giỏ hàng 60

Hình 30 Lược đồ tuần tự đổi số lượng sản phẩm trong giỏ hàng 61

Hình 31 Lược đồ ERD 62

Hình 32 Giao diện đăng nhập 63

Hình 40 Giao diện trang giỏ hàng 70

Hình 41 Giao diện trang tạo đơn hàng 71

Hình 42 Giao diện trang thống kê 72

Hình 43 Giao diện trang quản lý tài khoản 73

Hình 44 Giao diện trang quản lý đơn hàng 73

Hình 45 Giao diện trang quản lý sản phẩm 74

Hình 46 Giao diện trang quản lý voucher 75

DANH MỤC BẢNG BIỂU

Bảng 1: Danh mục từ viết tắt XIII Bảng 2 Kế hoạch thực hiện XV

Bảng 3 Chức năng của quản trị viên 13

Bảng 4 Chức năng của khách hàng 14

Bảng 5 Chức năng của khách hàng vãng lai 14

Bảng 6 Kịch bản đăng nhập 16

Bảng 7 Kịch bản đăng ký 18

Bảng 8 Kịch bản đăng xuất 19

Bảng 9 Kịch bản xem toàn bộ sản phẩm 20

Bảng 10 Kịch bản tìm kiếm sản phẩm bằng từ khóa 21

Bảng 11 Kịch bản lọc sản phẩm 21

Bảng 12 Kịch bản xem chi tiết sản phẩm 22

Bảng 13 Kịch bản xem tất cả người dùng 23

Bảng 14 Kịch bản khóa tài khoản người dùng 24

Bảng 15 Kịch bản tạo sản phẩm 25

Bảng 16 Kịch bản cập nhật sản phẩm 26

Bảng 17 Kịch bản xóa sản phẩm 27

Bảng 18 Kịch bản xem toàn bộ đơn hàng 28

Bảng 19 Kịch bản cập nhật đơn hàng 28

Bảng 20 Kịch bản xem tất cả bình luận của một sản phẩm 29

Bảng 21 Kịch bản phê duyệt sản phẩm 30

Bảng 22 Kịch bản thêm địa chỉ giao 31

Bảng 23 Kịch bản cập nhật thông tin tài khoản 32

Bảng 24 Kịch bản đổi mật khẩu 33

Bảng 25 Kịch bản xem lịch sử đặt hàng 34

Bảng 26 Kịch bản xem trạng thái đơn hàng 35

Bảng 27 Kịch bản thanh toán 36

Bảng 28 Kịch bản bình luận sản phẩm 37

Bảng 29 Kịch bản thêm sản phẩm vào giỏ hàng 38

Bảng 30 Kịch bản đổi số lượng sản phẩm giỏ hàng 39

Bảng 31 Kịch bản xóa sản phẩm khỏi giỏ hàng 40

Bảng 32 Bảng collection users 42

Bảng 40 Bảng collection products 47

Bảng 41 Bảng collection inventory 47

Bảng 42 Bảng collection categories 47

Bảng 43 Giao diện đăng nhập 63

Bảng 44 Giao diện Đăng ký 64

Bảng 45 Giao diện trang chủ người dùng 66

Bảng 46 Giao diện trang tất cả sản phẩm 68

Bảng 47 Giao diện trang tìm kiếm sản phẩm 68

Bảng 48 Giao diện trang thông tin tài khoản 69

Bảng 49 Giao diện trang thông tin đơn hàng 69

Bảng 50 Giao diện trang thông tin địa chỉ giao hàng 70

Bảng 51 Giao diện trang giỏ hàng 70

Bảng 52 Giao diện trang tạo đơn hàng 71

Bảng 53 Giao diện trang thống kê 72

Bảng 54 Giao diện trang quản lý tài khoản 73

Bảng 55 Giao diện trang quản lý đơn hàng 74

Bảng 56 Giao diện trang quản lý sản phẩm 74

Bảng 57 Giao diện trang quản lý voucher 75

Bảng 58 Kịch bản kiểm thử 77

Bảng 59 Bảng kiểm thử TC_01 77

Bảng 60 Bảng kiểm thử TC_02 78

Bảng 61 Bảng kiểm thử TC_03 79

Bảng 62 Bảng kiểm thử TC_04 79

Bảng 63 Bảng kiểm thử TC_05 81

DANH MỤC TỪ VIẾT TẮT

Bảng 1: Danh mục từ viết tắt

KẾ HOẠCH THỰC HIỆN Tuần Ngày Công việc dự kiến Kết quả

- Tìm hiểu NodeJS, ExpressJS

- Tìm hiểu và thiết kế MongoDB

Hoàn thành

4+5+6 13/3 – 3/4

- Áp dụng MongoDB vào hệ thống

- Tìm hiểu về JWT và áp dụng vào phân quyền và bảo mật của hệ thống

- Lấy danh sách người dùng, khóa,

mở khóa tài khoản người dùng

Hoàn thành

- Tìm hiểu Restful API

- Xây dựng giao diện trang đăng nhập, đăng ký, quên mật khẩu và quản lý tài khoản người dùng

- Ghép APIs: Đăng nhập, đăng ký, quên mật khẩu, cập nhật mật khẩu, thông tin tài khoản

Xây dựng APIs:

- Xem, thêm, sửa, xóa sản phẩm

Hoàn thành

- Xây dựng chức năng tìm kiếm, lọc sản phẩm

Hoàn thành

10+11 24/4 - 8/5

- Xây dựng chức năng giỏ hàng

- Xây dựng giao diện đơn hàng của người dùng và admin

- Xây dựng chức năng quản lý đơn hàng

- Xây dựng chức năng bình luận

- Tìm hiểu thanh toán và áp dụng vào hệ thống

Hoàn thành

- Viết báo cáo

Bảng 2 Kế hoạch thực hiện

CHƯƠNG 1: PHẦN MỞ ĐẦU

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

Hiện tại công nghệ thông tin đang được phát triển mạnh mẽ kéo theo những sản phẩm liên quan tới công nghệ được làm ra với tốc độ nhanh chóng và ngày càng phổ biến và hoạt động hiệu quả Đặc biệt kỳ đại dịch COVID-19 đã thay đổi thói quen người dùng rất lớn Người dùng ngày càng quan tâm với việc mua sắm trực tuyến

Nắm bắt thói quen đó em đã nhận ra được rằng nhu cầu mua giày trực tuyến của người dùng ngày càng nhiều và sản phẩm mà em hướng tới là giày dép Em quyết định tìm hiểu và thực hiện đề tài “Xây dựng website bán giày trực tuyến”

1.2 ĐỐI TƯỢNG NGHIÊN CỨU

Đối tượng nghiên cứu của đề tài dựa trên nhu cầu mua giày nhanh chóng Đồng thời kèm theo đó là công nghệ được sử dụng vào để xây dưng hệ thống Cụ thể như sau:

− Nghiên cứu Restful API, NodeJS, ExpressJs để xây dựng các APIs tương tác với cơ sở dữ liệu nhanh, hiệu quả và chính xác nhất

− Nghiên cứu cơ sở dữ liệu NoSQL cụ thể là MongoDB để lưu trữ dữ liệu của người dùng hệ thống

− Về phần hiển thị cho người dùng thì nghiên cứu thư viện ReactJS và một số thư viện, framework hỗ trợ cho ReactJS để xây dựng và xử lý giao diện

− Về phần bảo mật, tiến hành nghiên cứu công nghệ JWT và kèm theo sử dụng một số “best practices” để đảm bảo an toàn dữ liệu cho người dùng

1.3 PHẠM VI NGHIÊN CỨU

Đề tài này chủ yếu tập trung vào việc xử lý các nghiệp vụ cơ bản của một website thương mại điện thử như là xem thông tin sản phẩm, thêm vào giỏ hàng, xem lịch sử giao dịch,… Về phần hệ thống xử lý, xây dựng đầy đủ APIs phục vụ cho phần giao diện hiển thị cuối cùng

− Xây dựng được một website bán giày với những tính năng cơ bản như: Xem thông tin sản phẩm, thêm chỉnh sửa giỏ hàng, thanh toán và bình luận sản phẩm đã mua ở phía người dùng; Quản lý sản phẩm, quản lý người dùng và thống kê ở phía người quản trị

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

2.1 NODEJS

2.1.1.Khái niệm

NodeJS là một môi trường runtime JavaScript đa nền tảng và có mã nguồn mở,

NodeJS còn là một thư viện được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của khách hàng

Là một nền tảng phía máy chủ được xây dựng trên JavaScript Engine của Google Chrome (V8 Engine) được phát triển bởi Ryan Dahl vào năm 2009 với phiên bản mới nhất là v19.8.1, NodeJS cung cấp một thư viện phong phú gồm nhiều modules JavaScript khác nhau giúp đơn giản hóa rất nhiều trong việc phát triển các ứng dụng web

2.1.2.Các tính năng của NodeJS

Lập trình hướng sự kiện và bất đồng bộ: Toàn bộ API trong thư viện NodeJS đều không đồng bộ, một máy chủ sử dụng NodeJS không đợi một API trả về dữ liệu mà chuyển sang API kế tiếp sau khi gọi API đó và nhận phản hồi từ lần gọi API trước nhờ cơ chế thông báo của Events trong NodeJS

Xử lý cực kỳ nhanh chóng: Được xây dựng trên V8 JavaScript Engine của Google Chrome, NodeJS có khả năng thực thi code rất nhanh

Xử lý đơn luồng (Single Thread) nhưng có khả năng mở rộng cao: NodeJS sử dụng mô hình đơn luồng với event loop cho phép máy chủ phản hồi non-blocking, do

đó các ứng dụng có thể xử lý số lượng yêu cầu lớn hơn rất nhiều so với các máy chủ truyền thống như Apache HTTP Server

Không có vùng nhớ tạm thời: Các ứng dụng NodeJS không có vùng nhớ tạm thời (buffer) cho bất kỳ dữ liệu nào mà chỉ đơn giản xuất dữ liệu theo từng phần (chunk), giúp tiết kiệm thời gian xử lý file

Node Package Manager (NPM): Với hơn 50,000 packages khác nhau, các nhà phát triển phần mềm có thể dễ dàng xây dựng và phát triển ứng dụng của mình dựa trên những packages sẵn có

− IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời với

xử lý đơn luồng giúp hệ thống tốn ít bộ nhớ RAM nhất và xử lý nhanh hơn

− Node Package Manager (NPM) ngày càng phát triển mạnh mẽ và miễn phí

− Tận dụng tối đa tài nguyên của máy chủ mà không tạo ra độ trễ

− Có thể xây dựng code ở cả phía người dùng(client) và máy chủ(server): nhanh

và phát triển hiệu quả hơn

− Có cộng đồng lập trình viên lớn

− Các công ty như Netflix, Uber, PayPal, Epay đã sử dụng node trong sản phẩm

− Phù hợp để xâp dựng các ứng dụng single page, các ứng dụng cần sự phản hồi nhanh, các ứng dụng thời gian thực như các ứng dụng chat, dịch vụ mạng xã hội,

2.2.2.Các tính năng của ExpressJS

gian khác, chịu trách nhiệm chính cho việc tổ chức có hệ thống các chức năng của ExpressJS

Định tuyến – Routing: ExpressJS cung cấp cơ chế định tuyến giúp duy trì trạng thái của website với sự trợ giúp của URL

Tạo mẫu – Templating: ExpressJS cung cấp các công cụ tạo khuôn mẫu cho phép các nhà phát triển phần mềm xây dựng nội dung động trên các website bằng cách tạo dựng các mẫu HTML ở phía máy chủ

Gỡ lỗi – Debugging: Nhờ khả năng xác định chính xác các phần ứng dụng web có lỗi, ExpressJS đã giúp việc gỡ lỗi dễ dàng hơn

2.3 MONGODB

2.3.1.Định nghĩa

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở thuộc NoSQL viết bằng C++ Bảng ghi trong MongoDB được lưu trữ dạng dữ liệu văn bản (document), là một cấu trúc dữ liệu bao gồm các cặp giá trị và trường tương tự như các đối tượng JSON

Được bắt đầu phát triển vào năm 2007 và tung ra sản phẩm sẵn sàng đầu tiên vào tháng 3 năm 2010, MongoDB đã và đang được sử dụng rất nhiều và được đánh giá

vô cùng cao nhờ sở hữu nhiều đặc điểm nổi trội

2.3.2.Các tính năng nổi trội của MongoDB

Hỗ trợ search bằng field, phép search thông thường, regular expression và range queries trong MongoDB

Indexing: bất kì field nào trong BSON document cũng có thể được index

Replication: có ý nghĩa là “nhân bản”, là có một phiên bản giống hệt phiên bản đang tồn tại, đang được sử dụng Ở các cơ sở dữ liệu có nhu cầu lưu trữ lớn, luôn đi đôi với việc đảm bảo cơ sở dữ liệu toàn vẹn, không bị mất mát trước những sự cố ngoài dự đoán Vì vậy, người ta nghĩ ra khái niệm “nhân bản”, tạo một bản sao cho

cơ sở dữ liệu và lưu trữ ở một nơi khác, đề phòng có sự cố

Aggregation: Các Aggregation operation xử lý các bản ghi dữ liệu và trả về kết quả đã được tính toán Các phép toán tập hợp nhóm các giá trị từ nhiều Document lại

để trả về một kết quả duy nhất Trong SQL, count(*) và GROUP BY là tương đương với Aggregation trong MongoDB

Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng những function trên và hoạt động như một cách phân phối qua sharding

Ở tính năng tập hợp, chương trình này cung cấp ba cách chính để thực hiện tập hợp là Aggregation Pipeline, chức năng Mapreduce và Single-purpose Aggregation Trong đó, theo tài liệu của MongoDB thì Aggregation Pipeline được công nhận là cung cấp hiệu suất tốt hơn hầu hết các hoạt động tổng hợp

MongoDB hỗ trợ collection có kích thước cố định được gọi là collection giới hạn Những collection này có kích cỡ cố định theo sau thứ tự chèn làm tăng hiệu suất các hoạt động khác có liên quan đến dữ liệu Khi dữ liệu vượt quá mức giới hạn thì các tài liệu cũ sẽ tự động được xóa mà không cần dùng bất cứ dòng lệnh nào

2.3.3.Ưu điểm và nhược điểm của MongoDB

− Không có cơ chế transaction

− Dữ liệu lấy RAM làm trọng tâm hoạt động nên khi hoạt động yêu cầu một bộ

2.4 REACTJS

2.4.1.Tổng quan về ReactJS

React (còn được gọi là React.js hay ReactJS) là thư viện JavaScript mã nguồn mở

và miễn phí để xây dựng giao diện người dùng dựa trên các thành phần giao diện người dùng (UI components)

React được phát triển bởi Meta Mục đích cốt lõi của ReactJS là khiến cho trang web phải mượt mà, nhanh, có khả năng mở rộng cao và đơn giản

2.4.2.Đặc trưng của ReactJS

2.4.2.1.JSX

Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trang web thì sẽ dùng JSX JSX được đánh giá là sử dụng đơn giản hơn JavaScript và cho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render các subcomponent JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương

2.4.2.2.Luồng dữ liệu một chiều (Single-way data flow)

ReactJS không có những module chuyên dụng để xử lý data, vì vậy ReactJS chia nhỏ view thành các component nhỏ có mỗi quan hệ chặt chẽ với nhau Tại sao chúng

ta phải quan tâm tới cấu trúc và mối quan hệ giữa các components trong ReactJS? Câu trả lời chính là luồng truyền dữ liệu trong ReactJS: Luồng dữ liệu một chiều từ cha xuống con Việc ReactJS sử dụng one-way data flow có thể gây ra một chút khó khăn cho những người muốn tìm hiểu và ứng dụng vào trong các dự án Tuy nhiên,

cơ chế này sẽ phát huy được ưu điểm của mình khi cấu trúc cũng như chức năng của view trở nên phức tạp thì ReactJS sẽ phát huy được vai trò của mình

2.4.2.3.Virtual DOM

Những Framework sử dụng Virtual-DOM như ReactJS khi Virtual-DOM thay đổi, chúng ta không cần thao tác trực tiếp với DOM trên View mà vẫn phản ánh được sự thay đổi đó Do Virtual-DOM vừa đóng vai trò là Model, vừa đóng vai trò là View nên mọi sự thay đổi trên Model đã kéo theo sự thay đổi trên View và ngược lại Có nghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tử DOM ở View

nhưng vẫn thực hiện được cơ chế Data-binding Điều này làm cho tốc độ ứng dụng tăng lên đáng kể – môt lợi thế không thể tuyệt vời hơn khi sử dụng Virtula-DOM

2.5 JSON WEB TOKEN

2.5.1.Định nghĩa

JSON Web Token – JWT là một chuỗi mã hóa hay một tiêu chuẩn mở RFC 7519 được sử dụng như một phương tiện đại diện nhỏ gọn có khả năng thông qua chuỗi JSON để truyền đạt thông tin giữa client và server

Cấu trúc của JSON Web Token bao gồm 3 phần chính: Header, Payload và Signature

2.5.2.Ưu điểm của JSON Web Token

Nhỏ gọn hơn rất nhiều so với XML, nên khi thực hiện mã hóa, JWT cũng sẽ nhỏ gọn hơn SAML, trở thành một sự lựa chọn phù hợp cho các lập trình viên trong môi trường HTTP và HTML

Sử dụng cặp khóa Public Key/Private Key dưới dạng X.509 hoặc một mã bí mật

sử dụng thuật toán HMAC nên an toàn hơn so với SAML

Dễ dàng xử lý và phổ biến hơn

CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG

có thể mua hàng dễ dàng và thuận tiện hơn

Ưu điểm:

− Xem những ưu đãi cho tài khoản theo bậc hạng

− Hiển thị mã khuyến mãi rõ ràng

− Mua hàng dễ dàng ngay trên ứng dụng nhanh chóng, an toàn và tiện lợi

− Đăng nhập & xem thông tin tài khoản

Nhược điểm:

− Điều hướng người dùng chưa tốt

− Chuyển trang còn chậm

− Không có chức năng đăng nhập

− Không hiển thị mã giảm giá

− Sản phẩm hết hàng không sắp xếp ở cuối

− Xem màu sản phẩm phải load lại trang

3.1.3.NIKE.COM.VN

Hình 3 Trang nike

Ưu điểm:

− Có mục thông báo tới người dùng

− Có các thông tin về sản phẩm sắp được ra mắt

− Giới thiệu thêm sản phẩm tương tự ở trang chi tiết sản phẩm

− Phát triển các chức năng thêm, sửa, xóa cho quản trị viên để quản lý các đối tượng như là sản phẩm, trạng thái đơn hàng,…

− Khách đã mua thì có thể bình luận sản phẩm đó

− Tìm kiếm sản phẩm và xem thông tin chi tiết sản phẩm

− Thêm hoặc chỉnh sửa sản phẩm trong giỏ hàng, tiến hành đặt hàng và thanh toán

− Người dùng có thể hủy đơn hàng nếu đơn hàng có trạng thái là chờ xác nhận

− Đăng ký: Tạo một tài khoản mới cho người dùng

− Đăng xuất: Người dùng đăng xuất khỏi tài khoản đã đăng nhập

3.2.2 Yêu cầu phi chức năng

− Bảo mật: Mật khẩu được lưu dưới dạng mã hóa

− Tính khả dụng: Phù hợp với nhu cầu và dễ sử dụng

3.3 MÔ HÌNH HÓA YÊU CẦU

3.3.1 Bảng chức năng

3.3.1.1 Chức năng của Quản trị viên

STT Tên chức năng Giải thích

đơn hàng, số lượng người dùng, doanh thu và tỉ lệ các loại sản phẩm

Bảng 3 Chức năng của quản trị viên

3.3.1.2 Chức năng của Khách hàng

STT Tên chức năng Giải thích

là: Họ tên, danh sách địa chỉ, email,

hình đại diện

sách địa chỉ, email và hình đại diện

Xem lịch sử giao dịch Hiển thị các sản phẩm đã được

khách hàng mua thành công, hủy

đơn và giao thất bại

COD

phẩm

Bảng 4 Chức năng của khách hàng

3.3.1.3 Chức năng của Khách hàng vãng lai

STT Tên chức năng Giải thích

có thể thực hiện được các chức năng của tài khoản khách hàng

mục, tên hoặc mã sản phẩm

như là: màu sắc, size giày, loại giày,

Mô tả nhanh Đăng nhập để thực hiện các chức năng tương ứng với chức vụ

trong Web bán giày

Điều kiện tiên

quyết

Người dùng đã có tài khoản trong hệ thống

Khi thành công Người dùng được xác thực và hệ thống hiển thị chức năng tương

ứng với vai trò của người dùng

4 Hệ thống xác định vai trò của người dùng

5 Hệ thống chuyển sang màn hình trang chủ và người dùng

có thể truy cập các chức năng đúng với vai trò của mình

Thất bại Nếu đăng nhập không thành công: Người dùng không thực hiện

chức năng hệ thống, cần phải kiểm tra lại thông tin đăng nhập Nếu người dùng nhập sai email hoặc mật khẩu, cũng có thể là

cả hai Những công việc sau được thực hiện:

1 Hệ thống mô tả lý do xác thực bị sai

2 Hệ thống lưu ý người dùng đăng nhập lại

3 Người dùng nhập lại tên đăng nhập và mật khẩu, bước 3

ở Basic flow được thực hiện

3.3.3.2 Usecase “ĐĂNG KÝ”

Tên ĐĂNG KÝ

Mô tả nhanh Đăng ký để thực hiện chức năng mua hàng, chỉnh sửa thông tin

tài khoản và bình luận sản phẩm đã mua

Các đối tượng Khách hàng chưa có tài khoản

Điều kiện tiên

Thành công Use case bắt đầu khi người dùng chọn chức năng đăng ký

1 Hệ thống chuyển trang cho người dùng nhập thông tin đăng ký

2 Hệ thống kiểm tra thông tin người dùng nhập

3 Hệ thống hiển thị thông báo đăng ký thành công

4 Hệ thống chuyển sang màn hình trang chủ và người dùng

có thể truy cập các chức năng đúng với vai trò của mình

Thất bại Nếu đăng ký không thành công Những công việc sau được thực

hiện:

1 Hệ thống mô tả lý do xác thực bị sai (thông tin sai hoặc email đã tồn tại.)

3 Quay lại bước 2 nếu người dùng muốn tiếp tục

Điểm mở rộng Không có

Bảng 7 Kịch bản đăng ký

3.3.3.3 Usecase “ĐĂNG XUẤT”

Tên ĐĂNG XUẤT

Mô tả nhanh Thoát khỏi các chức năng với từng vai trò trong Web bán giày

Các đối tượng Khách hàng, quản trị viên

Điều kiện tiên

quyết

Người dùng đã đăng nhập vào hệ thống

Khi thành công Chuyển người dùng về trang chủ, phần popup biểu tượng người

dùng chuyển sang đăng nhập hoặc đăng ký

Luồng tương

tác

Thành công Use case bắt đầu khi người dùng chọn chức năng đăng xuất

Thất bại Nếu đăng xuất không thành công Những công việc sau được

thực hiện:

1 Hệ thống giữ nguyên hiện trạng của trạng thái

Điểm mở rộng Không có

Bảng 8 Kịch bản đăng xuất

3.3.3.4 Usecase “XEM TOÀN BỘ SẢN PHẨM”

Tên XEM TOÀN BỘ SẢN PHẨM

Mô tả nhanh Xem toàn bộ sản phẩm với thông tin tóm tắt

Các đối tượng Khách hàng,

Điều kiện tiên

quyết

Người dùng đã truy cập vào hệ thống

Khi thành công Chuyển người dùng về trang chủ

Thất bại Nếu truy cập không thành công Những công việc sau được thực

Tên TÌM KIẾM SẢN PHẨM BẰNG TỪ KHÓA

Mô tả nhanh Tìm kiếm sản phẩm bằng từ

Các đối tượng Khách hàng,

Điều kiện tiên

quyết

Người dùng đã truy cập vào hệ thống

Khi thành công Chuyển người dùng về trang danh sách tìm kiếm

Luồng tương tác

Thành công Use case bắt đầu khi người dùng truy cập hệ thống

1 Người dùng truy cập hệ thống

Thất bại Nếu truy cập không thành công Những công việc sau được

Người dùng đã truy cập vào hệ thống

Khi thành công Hiển thị danh sách sản phẩm đã lọc

Luồng tương tác

Thành công Use case bắt đầu khi người dùng truy cập hệ thống

1 Người dùng truy cập hệ thống

2 Hệ thống hiển thị trang chủ

3 Người dùng chọn loại sản phẩm ở header

4 Hệ thống chuyển trang hiển thị danh sách sản phẩm theo loại người dùng chọn

5 Người dùng chọn lọc theo giá, loại sản phẩm

6 Hệ thống hiển thị sản phẩm theo loại lọc người dùng

sử dụng

Thất bại Nếu truy cập không thành công Những công việc sau được

thực hiện:

1 Hệ thống không hiển thị sản phẩm

3.3.3.6 Usecase “XEM CHI TIẾT SẢN PHẨM”

Tên XEM CHI TIẾT SẢN PHẨM

Mô tả nhanh Xem thông tin chi tiết sản phẩm

Các đối tượng Khách hàng,

Điều kiện tiên

quyết

Người dùng đã truy cập vào hệ thống

Khi thành công Chuyển người dùng về chi tiết sản phẩm

3 Người dùng chọn sản phẩm muốn xem chi tiết

4 Hiển thị trang thông tin chi tiết

3.3.3.7 Usecase “QUẢN LÝ NGƯỜI DÙNG”

Tên XEM TẤT CẢ NGƯỜI DÙNG

Mô tả nhanh Xem danh sách tài khoản của người dùng trong hệ thống

Các đối tượng Quản trị viên

Điều kiện tiên

quyết

Quản trị viên đã đăng nhập với tài khoản có vai trò là admin

Khi thành công Quản trị viên được hệ thống hiển thị danh sách người dùng

Luồng tương tác

Thành công Use case bắt đầu khi quản trị viên đăng nhập hệ thống với tài

khoản có vai trò admin

1 Hệ thống chuyển trang chủ cho quản trị viên

2 Quản trị viên chọn tab Tài khoản ở navigate bên trái

3 Hệ thống hiển thị danh sách người dùng

Thất bại Nếu không thành công

1 Hệ thống không hiển thị danh sách người dùng

Điểm mở rộng Không có