1. Trang chủ
  2. » Giáo Dục - Đào Tạo

Xây dựng website bán sách online sử dụng công nghệ mern stack

230 4 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây Dựng Website Bán Sách Online Sử Dụng Công Nghệ MERN Stack
Tác giả Lưu Đình Chuẩn, Phan Thị Thu Trang
Người hướng dẫn TS. Huỳnh Xuân Phụng
Trường học Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành Công Nghệ Thông Tin
Thể loại Đồ Án Tốt Nghiệp
Năm xuất bản 2022
Thành phố Tp. Hồ Chí Minh
Định dạng
Số trang 230
Dung lượng 13,33 MB

Cấu trúc

  • Chương 1: TỔNG QUAN VỀ ĐỀ TÀI (28)
    • 1.1. Tính cấp thiết của đề tài (6)
    • 1.2. Mục đích của đề tài (6)
    • 1.3. Cách tiếp cận và phương pháp nguyên cứu (6)
    • 1.4. Các giả thiết, ràng buộc và rủi ro (29)
    • 1.5. Kết quả dự kiến đạt được (30)
  • Chương 2: CƠ SỞ LÝ THUYẾT (31)
    • 2.1. Tổng quan về MERN stack (7)
      • 2.1.1. Khái niệm về MERN stack (31)
      • 2.1.2. Các thành phần trong MERN stack (31)
      • 2.1.3. Cách thức hoạt động của MERN stack (32)
      • 2.1.4. Ưu điểm của MERN Stack (33)
    • 2.2. Tổng quan về Node js (7)
      • 2.2.1. Khái niệm về Node Js (33)
      • 2.2.2. Nguyên tắc hoạt động của Node Js (34)
      • 2.2.3. Ưu nhược điểm của Node Js (35)
    • 2.3. Tổng quan về Express js (7)
      • 2.3.1. Khái niệm về Express Js (36)
      • 2.3.2. Công dụng của Express Js (36)
    • 2.4. Tổng quan về React js (7)
      • 2.4.1. Khái niệm về React Js (37)
      • 2.4.2. Kiến trúc của React Js (37)
      • 2.4.3. Ưu nhược điểm của React Js (38)
    • 2.5. Tổng quan về Mongodb (7)
      • 2.5.1. Khái niệm về MongoDB (39)
      • 2.5.2. Các tính năng của MongoDB (39)
      • 2.5.3. Ưu nhược điểm của MongoDB (40)
    • 2.6. Tổng quan về kiểm thử tự động (7)
      • 2.6.1. Khái niệm về kiểm thử phần mềm (41)
      • 2.6.2. Kiểm thử tự động (42)
      • 2.6.3. Tổng quan về Selenium Webdriver (42)
  • Chương 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU (44)
    • 3.1. Khảo sát hiện trạng (7)
      • 3.1.1. Các nguồn khảo sát (44)
      • 3.1.2. Một số website bán sách trên thị trường (44)
      • 3.1.3. Kết quả khảo sát (50)
    • 3.2. Xác định yêu cầu (7)
      • 3.2.1. Chức năng website (51)
      • 3.2.2. Các yêu cầu phi chức năng (52)
      • 3.2.3. Ma trận quyền – Permission matrix (53)
      • 3.2.4. Đối tưởng sử dụng (54)
      • 3.2.5. Môi trường hoạt động (54)
      • 3.2.6. Sơ đồ nghiệp vụ (55)
  • Chương 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG (56)
    • 4.1. Phân tích yêu cầu chức năng (7)
      • 4.1.1. Chức năng đăng ký (56)
      • 4.1.2. Chức năng đăng nhập (56)
      • 4.1.3. Chức năng xem trang chủ (56)
      • 4.1.4. Chức năng đăng xuất (57)
      • 4.1.5. Chức năng đổi mật khẩu (57)
      • 4.1.6. Chức năng quên mật khẩu (58)
      • 4.1.7. Chức năng chỉnh sửa thông tin (58)
      • 4.1.8. Chức năng tìm kiếm sản phẩm (58)
      • 4.1.9. Chức năng xem chi tiết sách (59)
      • 4.1.10. Chức năng xem danh mục (59)
      • 4.1.11. Chức năng lọc sản phẩm (59)
      • 4.1.12. Chức năng quản lý giỏ hàng (60)
      • 4.1.13. Chức năng quản lý đơn hàng (60)
      • 4.1.14. Chức năng thanh toán (61)
      • 4.1.15. Chức năng quản lý User (61)
      • 4.1.16. Chức năng quản lý danh mục (62)
      • 4.1.17. Chức năng quản lý sản phẩm (62)
      • 4.1.18. Chức năng quản lý đơn đơn hàng (admin) (63)
      • 4.1.19. Chức năng đánh giá, bình luận sản phẩm (63)
      • 4.1.20. Chức năng quản lý chương trình khuyến mãi, voucher giảm giá (64)
      • 4.1.21. Chức năng thống kê (64)
    • 4.2. Thiết kế chức năng (66)
      • 4.2.1. Thiết kế usecase tổng quát (66)
      • 4.2.2. Thiết kế chức năng đăng ký (66)
      • 4.2.3. Thiết kế chức năng đăng nhập (71)
      • 4.2.3. Thiết kế chức năng xem trang chủ (74)
      • 4.2.4. Thiết kế chức năng đăng xuất (77)
      • 4.2.5. Thiết kế chức năng đổi mật khẩu (79)
      • 4.2.6. Thiết kế chức năng quên mật khẩu (82)
      • 4.2.7. Thiết kế chức năng chỉnh sửa thông tin (86)
      • 4.2.8. Thiết kế chức năng tìm kiếm sản phẩm (88)
      • 4.2.9. Thiết kế chức năng xem chi tiết sách (91)
      • 4.2.10. Thiết kế chức năng xem danh mục (93)
      • 4.2.11. Thiết kế chức năng lọc sản phẩm (96)
      • 4.2.12. Thiết kế chức năng quản lý giỏ hàng (98)
      • 4.2.13. Thiết kế chức năng quản lý đơn hàng (103)
      • 4.2.14. Thiết kế chức năng thanh toán (109)
      • 4.2.15. Thiết kế chức năng quản lý user (111)
      • 4.2.16. Thiết kế chức năng quản lý danh mục (117)
      • 4.2.17. Thiết kế chức năng quản lý sản phẩm (123)
      • 4.2.18. Thiết kế chức năng quản lý đơn hàng (admin) (129)
      • 4.2.19. Thiết kế chức năng đánh giá, bình luận (135)
      • 4.2.20. Thiết kế chắc năng quản lý khuyến mãi (139)
      • 4.2.21. Thiết kế chức thống kê (145)
    • 4.3. Thiết kế cơ sở dữ liệu (7)
      • 4.3.1. Sơ đồ thiết kế dữ liệu (150)
      • 4.3.2. Mô tả sơ đồ thiết kế dữ liệu (151)
    • 4.4. Thiết kế giao diện (7)
      • 4.4.1. Header và footer (155)
      • 4.4.2. Màn hình trang chủ (160)
      • 4.4.3. Màn hình đăng ký và đăng nhập (163)
      • 4.4.4. Màn hình trang sản phẩm (166)
      • 4.4.5. Màn hình quản lý giỏ hàng (170)
      • 4.4.6. Màn hình quản lý thông tin (173)
      • 4.4.7. Màn hình quản lý user (176)
      • 4.4.8. Màn hình quản lý danh mục (179)
      • 4.4.9. Màn hình quản lý sản phẩm (181)
      • 4.4.10. Màn hình quản lý đơn hàng (183)
      • 4.4.11. Màn hình thêm sản phẩm (185)
      • 4.4.12. Màn hình chi tiết sản phẩm (188)
      • 4.4.13. Màn hình hiển thị thông tin nhận hàng (191)
      • 4.4.14. Màn hình đánh giá, bình luận sản phẩm (192)
      • 4.4.15. Màn hình thống kê (195)
      • 4.4.15. Màn hình khuyến mãi (197)
    • 4.5. Thiết kế lược đồ lớp (200)
  • Chương 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG (201)
    • 5.1. Cài đặt ứng dụng (8)
    • 5.2. Hướng dẫn thanh toán (201)
      • 5.2.1 Hướng dẫn thanh toán paypal (201)
      • 5.2.2 Hướng dẫn thanh toán vnpay (203)
    • 5.3. Kiểm thử phần mềm (205)
      • 5.3.1. Kế hoạch kiểm thử (205)
      • 5.3.2. Kiểm thử thủ công (206)
      • 5.3.3. Kiểm thử tự động sử dụng Selenium (217)
    • 5.4. Danh sách API (218)
      • 5.4.1. API đăng nhập – phương thức POST (218)
      • 5.4.2. API đăng ký – phương thức POST (219)
      • 5.4.3. API lấy thông tin sản phẩm – phương thức GET (219)
      • 5.4.4. API tạo user mới – phương thức POST (220)
      • 5.4.5. API chỉnh sửa user – phương thức PUT (221)
      • 5.4.6. API thêm sản phẩm – phương thức POST (222)
      • 5.4.7. API chỉnh sửa sản phẩm – phương thức PUT (223)
      • 5.4.8. API thêm danh mục – phương thức POST (224)
      • 5.4.9. API lấy thông tin đơn hàng – phương thức GET (224)
  • Chương 6: KẾT LUẬN (226)
    • 6.1. Kết quả đạt được (226)
    • 6.2. Ưu nhược điểm (226)
      • 6.2.1. Ưu điểm (226)
      • 6.2.2. Nhược điểm (227)
    • 6.3. Hướng phát triển (227)
  • TÀI LIỆU THAM KHẢO (228)

Nội dung

Yêu cầu chức năng quản lý sản phẩm .... Trang 29 Website cơ bản phải đạt được một số yêu cầu sau: - Quản lý thông tin tài khoản khách hàng và sản phẩm, đơn hàng.. Các giả thiết, ràng buộ

TỔNG QUAN VỀ ĐỀ TÀI

Cách tiếp cận và phương pháp nguyên cứu

1.4 Kết quả dự kiến đạt được

2 Chương 2: Cơ sở lý thuyết

2.1 Tổng quan về Mern Stack

2.2 Tổng quan về Node JS

2.3 Tổng quan về Express JS

2.4 Tổng quan về React JS

2.6 Tổng quan về kiểm thử tự động

3 Chương 3: Khảo sát hiện trạng và xác định yêu cầu

4 Chương 4: Phân tích và thiết kế hệ thống

4.1 Phân tích yêu cầu chức năng

4.3 Thiết kế cơ sở dữ liệu

4.6 Thiết kế lược đồ lớp

5 Chương 5: Cài đặt và kiểm thử ứng dụng

STT Thời gian Công việc Ghi chú

1 07/03/2022 – 20/03/2022 Thay đổi GlobalState sang Redux

2 21/03/2022 – 10/04/2022 Chỉnh sửa lại các chức năng

3 11/04/2022 – 24/04/2022 Thiết kế và viết chức năng đánh giá, bình luận

4 25/04/2022 – 15/05/2022 Thiết kế và viết chức năng khuyến mãi

5 16/05/2022 – 29/05/2022 Thiết kế giao diện và viết chức năng thống kê

6 30/05/2022 – 12/06/2022 Viết chắc năng đăng ký nhận thông báo qua email Kiểm tra và sửa lỗi

7 13/06/2022 – 19/06/2022 Viết báo cáo và hoàn chỉnh đồ án

Ngày 16 tháng 06 năm 2022 Người viết đề cương Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

DANH MỤC HÌNH ẢNH I DANH MỤC BẢNG BIỂU VII DANH MỤC CÁC TỪ VIẾT TẮT XIV

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI 1

1.1 Tính cấp thiết của đề tài 1

1.2 Mục đích của đề tài 1

1.3 Cách tiếp cận và phương pháp nguyên cứu 2

1.4 Các giả thiết, ràng buộc và rủi ro 2

1.5 Kết quả dự kiến đạt được 3

Chương 2: CƠ SỞ LÝ THUYẾT 4

2.1 Tổng quan về MERN stack 4

2.1.1 Khái niệm về MERN stack 4

2.1.2 Các thành phần trong MERN stack 4

2.1.3 Cách thức hoạt động của MERN stack 5

2.1.4 Ưu điểm của MERN Stack 6

2.2 Tổng quan về Node js 6

2.2.1 Khái niệm về Node Js 6

2.2.2 Nguyên tắc hoạt động của Node Js 7

2.2.3 Ưu nhược điểm của Node Js 8

2.3 Tổng quan về Express js 9

2.3.1 Khái niệm về Express Js 9

2.3.2 Công dụng của Express Js 9

2.4 Tổng quan về React js 10

2.4.1 Khái niệm về React Js 10

2.4.2 Kiến trúc của React Js 10

2.4.3 Ưu nhược điểm của React Js 11

2.5.2 Các tính năng của MongoDB 12

2.5.3 Ưu nhược điểm của MongoDB 13

2.6 Tổng quan về kiểm thử tự động 14

2.6.1 Khái niệm về kiểm thử phần mềm 14

2.6.3 Tổng quan về Selenium Webdriver 15

Chương 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 17

3.1.2 Một số website bán sách trên thị trường 17

3.2.2 Các yêu cầu phi chức năng 25

3.2.3 Ma trận quyền – Permission matrix 26

Chương 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 29

4.1 Phân tích yêu cầu chức năng 29

4.1.3 Chức năng xem trang chủ 29

4.1.5 Chức năng đổi mật khẩu 30

4.1.6 Chức năng quên mật khẩu 31

4.1.7 Chức năng chỉnh sửa thông tin 31

4.1.8 Chức năng tìm kiếm sản phẩm 31

4.1.9 Chức năng xem chi tiết sách 32

4.1.10 Chức năng xem danh mục 32

4.1.11 Chức năng lọc sản phẩm 32

4.1.12 Chức năng quản lý giỏ hàng 33

4.1.13 Chức năng quản lý đơn hàng 33

4.1.15 Chức năng quản lý User 34

4.1.16 Chức năng quản lý danh mục 35

4.1.17 Chức năng quản lý sản phẩm 35

4.1.18 Chức năng quản lý đơn đơn hàng (admin) 36

4.1.19 Chức năng đánh giá, bình luận sản phẩm 36

4.1.20 Chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

4.2.1 Thiết kế usecase tổng quát 39

4.2.2 Thiết kế chức năng đăng ký 39

4.2.3 Thiết kế chức năng đăng nhập 44

4.2.3 Thiết kế chức năng xem trang chủ 47

4.2.4 Thiết kế chức năng đăng xuất 50

4.2.5 Thiết kế chức năng đổi mật khẩu 52

4.2.6 Thiết kế chức năng quên mật khẩu 55

4.2.7 Thiết kế chức năng chỉnh sửa thông tin 59

4.2.8 Thiết kế chức năng tìm kiếm sản phẩm 61

4.2.9 Thiết kế chức năng xem chi tiết sách 64

4.2.10 Thiết kế chức năng xem danh mục 66

4.2.11 Thiết kế chức năng lọc sản phẩm 69

4.2.12 Thiết kế chức năng quản lý giỏ hàng 71

4.2.13 Thiết kế chức năng quản lý đơn hàng 76

4.2.14 Thiết kế chức năng thanh toán 82

4.2.15 Thiết kế chức năng quản lý user 84

4.2.16 Thiết kế chức năng quản lý danh mục 90

4.2.17 Thiết kế chức năng quản lý sản phẩm 96

4.2.18 Thiết kế chức năng quản lý đơn hàng (admin) 102

4.2.19 Thiết kế chức năng đánh giá, bình luận 108

4.2.20 Thiết kế chắc năng quản lý khuyến mãi 112

4.2.21 Thiết kế chức thống kê 118

4.3 Thiết kế cơ sở dữ liệu 123

4.3.1 Sơ đồ thiết kế dữ liệu 123

4.3.2 Mô tả sơ đồ thiết kế dữ liệu 124

4.4.3 Màn hình đăng ký và đăng nhập 136

4.4.4 Màn hình trang sản phẩm 139

4.4.5 Màn hình quản lý giỏ hàng 143

4.4.6 Màn hình quản lý thông tin 146

4.4.7 Màn hình quản lý user 149

4.4.8 Màn hình quản lý danh mục 152

4.4.9 Màn hình quản lý sản phẩm 154

4.4.10 Màn hình quản lý đơn hàng 156

4.4.11 Màn hình thêm sản phẩm 158

4.4.12 Màn hình chi tiết sản phẩm 161

4.4.13 Màn hình hiển thị thông tin nhận hàng 164

4.4.14 Màn hình đánh giá, bình luận sản phẩm 165

4.5 Thiết kế lược đồ lớp 173

Chương 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 174

5.2.1 Hướng dẫn thanh toán paypal 174

5.2.2 Hướng dẫn thanh toán vnpay 176

5.3.3 Kiểm thử tự động sử dụng Selenium 190

5.4.1 API đăng nhập – phương thức POST 191

5.4.2 API đăng ký – phương thức POST 192

5.4.3 API lấy thông tin sản phẩm – phương thức GET 192

5.4.4 API tạo user mới – phương thức POST 193

5.4.5 API chỉnh sửa user – phương thức PUT 194

5.4.6 API thêm sản phẩm – phương thức POST 195

5.4.7 API chỉnh sửa sản phẩm – phương thức PUT 196

5.4.8 API thêm danh mục – phương thức POST 197

5.4.9 API lấy thông tin đơn hàng – phương thức GET 197

Hình 2.1 Cấu trúc hoạt động MERN stack [1] 5

Hình 2.2 Sơ đồ hoạt động Node JS [2] 8

Hình 2.3 Sơ đồ hoạt động Node JS [3] 11

Hình 3.1 Giao diện trang chủ website Tiki [4] 17

Hình 3.2 Giao diện trang chủ website Fahasa [5] 19

Hình 3.3 Giao diện trang chủ website Vinabook [6] 20

Hình 3.4 Giao diện trang chủ website Shopee [7] 21

Hình 3.5 Giao diện trang chủ website Newshop [8] 22

Hình 3.6 Sơ đồ nghiệp vụ 28

Hình 4.3 Sequence đăng ký tài khoản 42

Hình 4.4 Activity đăng ký tài khoản 43

Hình 4.8 Usecase xem trang chủ 48

Hình 4.9 Sequence xem trang chủ 49

Hình 4.10 Activity xem trang chủ 49

Hình 4.14 Usecase đổi mật khẩu 52

Hình 4.15 Sequence đổi mật khẩu 53

Hình 4.16 Activity đổi mật khẩu 54

Hình 4.17 Usecase quên mật khẩu 55

Hình 4.18 Sequence quên mật khẩu 57

Hình 4.19 Activity quên mật khẩu 58

Hình 4.20 Usecase chỉnh sửa thông tin 59

Hình 4.21 Sequence chỉnh sửa thông tin 60

Hình 4.22 Activity chỉnh sửa thông tin 61

Hình 4.26 Usecase xem chi tiết sách 64

Hình 4.27 Sequence xem chi tiết thông tin sản phẩm 65

Hình 4.28 Activity xem chi tiết thông tin sản phẩm 66

Hình 4.29 Usecase xem danh mục sản phẩm 66

Hình 4.30 Sequence xem danh mục sản phẩm 68

Hình 4.31 Activity xem danh mục sản phẩm 68

Hình 4.32 Usecase lọc sản phẩm 69

Hình 4.33 Sequence lọc sản phẩm 70

Hình 4.34 Activity lọc sản phẩm 71

Hình 4.35 Usecase quản lý giỏ hàng 71

Hình 4.36 Sequence thêm sản phẩm vào giỏ hàng 74

Hình 4.37 Sequence sửa giỏ hàng 74

Hình 4.38 Sequence xoá khỏi giỏ hàng 75

Hình 4.39 Activity quản lí giỏ hàng 75

Hình 4.40 Usecase quản lý đơn hàng 76

Hình 4.41 Sequence xem đơn hàng 79

Hình 4.42 Sequence xem chi tiết đơn hàng 79

Hình 4.43 Sequence huỷ đơn hàng 80

Hình 4.44 Activity xem danh sách đơn hàng 80

Hình 4.45 Activity xem chi tiết đơn hàng 81

Hình 4.46 Activity huỷ đơn hàng 81

Hình 4.48 Sequence thanh toán đơn hàng 83

Hình 4.49 Activity thanh toán đơn hàng 83

Hình 4.50 Usecase quản lý user 84

Hình 4.57 Usecase quản lý danh mục 90

Hình 4.58 Sequence thêm danh mục sách 93

Hình 4.59 Sequence sửa danh mục sách 93

Hình 4.60 Sequence xoá danh mục sách 94

Hình 4.61 Activity thêm danh muc sách 94

Hình 4.62 Activity sửa danh muc sách 95

Hình 4.63 Activity xoá danh mục sách 95

Hình 4.64 Usecase quản lý sản phẩm 96

Hình 4.66 Sequence sửa chi tiết sách 100

Hình 4.68 Activity thêm sản phẩm 101

Hình 4.69 Activity sửa sản phẩm 101

Hình 4.70 Activity xoá sản phẩm 102

Hình 4.71 Usecase quản lí đơn hàng 103

Hình 4.72 Sequence xem đơn hàng 105

Hình 4.73 Sequence xem chi tiết đơn hàng 106

Hình 4.74 Sequence thay đổi trạng thái đơn hàng 106

Hình 4.75 Activity chuyển trạng thái đơn hàng 107

Hình 4.76 Activity xem chi tiết đơn hàng 107

Hình 4.77 Usecase đánh giá, bình luận 108

Hình 4.78 Sequence đánh giá, bình luận 111

Hình 4.79 Activity đánh giá, bình luận 112

Hình 4.80 Usecase quản lý khuyến mãi 113

Hình 4.81 Sequence thêm mã khuyến mãi 115

Hình 4.82 Sequence sửa mã khuyến mãi 116

Hình 4.83 Sequence xoá mã khuyến mãi 116

Hình 4.84 Activity thêm mã khuyến mãi 117

Hình 4.85 Activity sửa mã khuyến mãi 117

Hình 4.86 Activity xoá khuyễn mãi 118

Hình 4.90 Sơ đồ thiết kế dữ liệu 123

Hình 4.91 Thiết kế giao diện header 129

Hình 4.92 Thiết kế xử lý header 130

Hình 4.93 Thiết kế giao diện footer 131

Hình 4.94 Thiết kế xử lý footer 133

Hình 4.95 Thiết kế giao diện trang chủ 134

Hình 4.96 Thiết kế xử lý trang chủ 135

Hình 4.97 Thiết kế giao đăng ký và đăng nhập 136

Hình 4.98 Thiết kế xử lý đăng ký và đăng nhập 137

Hình 4.99 Thiết kế giao diện trang sản phẩm 139

Hình 4.100 Thiết kế xử lý trang sản phẩm 141

Hình 4.101 Thiết kế giao diện quản lí giỏ hàng 143

Hình 4.102 Thiết kế xử lý quản lí giỏ hàng 145

Hình 4.103 Thiết kế giao diện quản lý thông tin 146

Hình 4.104 Thiết kế xử lý quản lý thông tin 148

Hình 4.105 Thiết kế giao diện quản lý user 149

Hình 4.106 Thiết kế xử lý quản lý user 151

Hình 4.107 Thiết kế giao diện quản lý danh mục 152

Hình 4.108 Thiết kế xử lý quản lý danh mục 153

Hình 4.109 Thiết kế giao diện quản lý sản phẩm 154

Hình 4.110 Thiết kế xử lý quản lý sản phẩm 155

Hình 4.111 Thiết kế giao diện quản lý đơn hàng 157

Hình 4.112 Thiết kế xử lý quản lý đơn hàng 158

Hình 4.113 Thiết kế giao diện thêm sản phẩm 159

Hình 4.114 Thiêt kế xử lý chi tiết sản phẩm 161

Hình 4.115 Thiết kế giao diện chi tiết sản phẩm 162

Hình 4.116 Thiết kế xử lý chi tiết sản phẩm 163

Hình 4.117 Thiết kế giao diện hiển thị thông tin nhận hàng 164

Hình 4.118 Thiết kế xử lý hiển thị thông tin nhận hàng 165

Hình 4.119 Thiêt kế giao diện đánh giá, bình luận sản phẩm 166

Hình 4.120 Thiết kế xử lý đánh giá, bình luận sản phẩm 167

Hình 4.121 Thiết kế giao diện thống kê 168

Hình 4.122 Thiết kế xử lý thống kê 169

Hình 4.123 Thiết kế giao diện khuyến mãi 171

Hình 4.124 Thiết kế xử lý khuyến mãi 172

Hình 5.1 Màn hình nhập tên tài khoản paypal 175

Hình 5.2 Màn hình nhập mật khẩu tài khoản paypal 175

Hình 5.3 Màn hình chọn hình thức thanh toán 176

Hình 5.4 Màn hình thanh toán thành công 176

Hình 5.5 Màn hình chọn hình thanh toán vnpay 177

Hình 5.6 Màn hình ngân hàng thanh toán 177

Hình 5.7 Màn hình nhập thông tin tài khoản 178

Hình 5.8 Màn hình nhập mã OTP 178

Hình 5.11 API lấy thông tin sản phẩm 193

Hình 5.12 API tạo user mới 194

Hình 5.13 API chỉnh sửa user 195

Hình 5.14 API thêm sản phẩm 196

Hình 5.15 API thêm chỉnh sửa sản phẩm 197

Hình 5.16 API lấy thông tin đơn hàng 197

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro 2

Bảng 3.1 Các yêu cầu phi chức năng 25

Bảng 3.2 Bảng chú thích ký hiệu 26

Bảng 3.3 Ma trận quyền – Permission matrix 26

Bảng 4.1 Yêu cầu chức năng đăng ký 29

Bảng 4.2 Yêu cầu chức năng đăng nhập 29

Bảng 4.3 Yêu cầu chức năng xem màn trang chủ 30

Bảng 4.4 Yêu cầu chức năng đăng xuất 30

Bảng 4.5 Yêu cầu chức năng đổi mật khẩu 30

Bảng 4.6 Yêu cầu chức năng quên mật khẩu 31

Bảng 4.7 Yêu cầu chức năng chỉnh sửa thông tin 31

Bảng 4.8 Yêu cầu chức năng tìm kiếm 31

Bảng 4.9 Yêu cầu chức năng xem chi tết sách 32

Bảng 4.10 Yêu cầu chức năng xem danh mục 32

Bảng 4.11 Yêu cầu chức năng xem danh mục 32

Bảng 4.12 Yêu cầu chức năng quản lý giỏ hàng 33

Bảng 4.13 Yêu cầu chức năng xem đơn hàng 33

Bảng 4.14 Yêu cầu chức năng thanh toán 34

Bảng 4.15 Yêu cầu chức năng quản lý user 34

Bảng 4.16 Yêu cầu chức năng quản lý danh mục 35

Bảng 4.17 Yêu cầu chức năng quản lý sản phẩm 35

Bảng 4.18 Yêu cầu chức năng quản lý đơn hàng 36

Bảng 4.19 Yêu cầu chức năng đánh giá, bình luận sản phẩm 36

Bảng 4.20 Yêu cầu chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

Bảng 4.21 Yêu cầu chức năng thống kê 38

Bảng 4.22 Usecase đăng ký tài khoản 40

Bảng 4.23 Usecase đăng ký tài khoản bằng google 40

Bảng 4.24 Usecase đăng ký tài khoản bằng facebook 41

Bảng 4.25 Business Rule chức năng đăng ký 42

Bảng 4.26 Mô tả chi tiết Activity digram đăng ký 43

Bảng 4.28 Usecase đăng nhập tài khoản bằng google 45

Bảng 4.29 Usecase đăng nhập bằng facebookk 45

Bảng 4.30 Business Rule chức năng đăng nhập 46

Bảng 4.31 Mô tả chi tiết Activity digram đăng nhập 47

Bảng 4.32 Usecase xem trang chủ 48

Bảng 4.33 Mô tả chi tiết Activity digram xem trang chủ 49

Bảng 4.35 Mô tả chi tiết Activity digram đăng xuất 52

Bảng 4.36 Usecase đổi mật khẩu 52

Bảng 4.37 Business Rule chức năng đổi mật khẩu 53

Bảng 4.38 Mô tả chi tiết Activity diagram đổi mật khẩu 54

Bảng 4.39 Usecase quên mật khẩu 55

Bảng 4.40 Business Rule chức năng quên mật khẩu 56

Bảng 4.41 Mô tả chi tiết Activity digram quên mật khẩu 58

Bảng 4.42 Usecase chỉnh sửa thông tin 59

Bảng 4.43 Mô tả chi tiết Activity digram quên mật khẩu 61

Bảng 4.45 đến Bảng 4.70 cung cấp cái nhìn tổng quan về các chức năng quan trọng trong hệ thống, bao gồm quy tắc kinh doanh và mô tả chi tiết các hoạt động Các chức năng như tìm kiếm sản phẩm, xem chi tiết sách, và quản lý danh mục được thể hiện qua các usecase và activity digram, nhằm tối ưu hóa trải nghiệm người dùng Đặc biệt, các quy tắc kinh doanh liên quan đến giỏ hàng và quản lý đơn hàng cũng được nêu rõ, cho phép người dùng dễ dàng thêm, chỉnh sửa, và hủy đơn hàng Cuối cùng, các chức năng liên quan đến quản lý người dùng được trình bày, giúp hệ thống duy trì tính bảo mật và hiệu quả trong việc quản lý thông tin người dùng.

Bảng 4.71 mô tả Business Rule cho chức năng quản lý user, trong khi Bảng 4.72 cung cấp chi tiết về Activity diagram quản lý user Các usecase liên quan đến danh mục, bao gồm thêm, sửa và xoá danh mục, được trình bày trong Bảng 4.73 đến 4.75, cùng với Activity diagram quản lý danh mục tại Bảng 4.76 Bảng 4.77 đến 4.79 liệt kê các usecase cho việc thêm, chỉnh sửa và xoá sản phẩm, và Bảng 4.80 tiếp tục với Business Rule cho chức năng quản lý sản phẩm Bảng 4.81 đến 4.83 mô tả các usecase liên quan đến đơn hàng, bao gồm xem đơn hàng, xem chi tiết đơn hàng và chuyển trạng thái đơn hàng, trong khi Bảng 4.84 trình bày Business Rule cho chức năng quản lý đơn hàng Bảng 4.85 cung cấp Activity diagram cho quản lý đơn hàng, và Bảng 4.86 đến 4.88 giới thiệu các usecase đánh giá, bình luận và trả lời bình luận sản phẩm, với Bảng 4.89 mô tả Activity diagram cho các hoạt động này Cuối cùng, Bảng 4.90 đến 4.93 trình bày các usecase liên quan đến mã giảm giá, bao gồm thêm, sửa và xoá mã, trong khi Bảng 4.94 và 4.95 thống kê user và danh mục.

The article outlines various use cases and detailed descriptions of data collections related to payments, orders, and user information Key sections include the statistical use cases for payment and order tracking, as well as comprehensive data descriptions for user collections, product collections, and order details It also covers the design specifications for interface elements such as headers, footers, and homepage layouts, along with processing details for user login, product pages, and shopping cart management Each section is systematically numbered, facilitating easy navigation through the content.

Bảng 4.122 đến Bảng 4.141 mô tả chi tiết thiết kế giao diện và xử lý cho các chức năng quản lý người dùng, danh mục, sản phẩm, đơn hàng, thêm sản phẩm, chi tiết sản phẩm, thông tin nhận hàng, đánh giá và bình luận sản phẩm, thống kê, và khuyến mãi Mỗi bảng cung cấp cái nhìn tổng quan về cách thức hoạt động và giao diện của từng phần, giúp người dùng dễ dàng quản lý và tương tác với hệ thống.

Bảng 5.1 trình bày kiểm thử chức năng đăng ký, trong khi Bảng 5.2 tập trung vào kiểm thử chức năng đăng nhập Bảng 5.3 liên quan đến kiểm thử chức năng quản lý giỏ hàng, còn Bảng 5.4 đề cập đến kiểm thử chức năng quản lý sản phẩm Cuối cùng, Bảng 5.5 mô tả kiểm thử chức năng quản lý người dùng.

Bảng 5.6 trình bày kiểm thử chức năng quản lý đơn hàng, trong khi Bảng 5.7 mô tả API đăng nhập Bảng 5.8 cung cấp thông tin chi tiết về API đăng ký, và Bảng 5.9 mô tả API lấy thông tin sản phẩm Bảng 5.10 giải thích API tạo user mới, tiếp theo là Bảng 5.11 với mô tả API chỉnh sửa user Bảng 5.12 nêu rõ API thêm sản phẩm, trong khi Bảng 5.13 trình bày API chỉnh sửa sản phẩm Bảng 5.14 mô tả API thêm danh mục, và cuối cùng, Bảng 5.15 cung cấp thông tin về API lấy thông tin đơn hàng.

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

MERN: MongoDB (M), ExpressJS (E), ReactJS (R) và NodeJS (N)

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tính cấp thiết của đề tài

Tri thức là tài sản quý giá của nhân loại, phần lớn được lưu giữ trong sách báo Hiện nay, có nhiều cửa hàng và công ty kinh doanh sách báo, do đó, việc giới thiệu và tiếp cận sản phẩm đến tay độc giả là nhu cầu thiết yếu.

Trong thời đại công nghệ 4.0 phát triển mạnh mẽ, nhu cầu truy cập internet để tìm hiểu tri thức và mua bán sách, báo ngày càng gia tăng Việc phát triển mô hình kinh doanh trực tuyến không chỉ giúp các cửa hàng và cá nhân thuận tiện hơn trong hoạt động kinh doanh mà còn cần thiết cho sự tồn tại của họ Do đó, việc tạo ra một website bán hàng trực tuyến là rất quan trọng đối với doanh nghiệp, nhà kinh doanh, cửa hàng bán lẻ và cá nhân Kết hợp sách với thương mại điện tử sẽ đơn giản hóa quá trình mua sách, giúp những tác phẩm quý giá dễ dàng đến tay độc giả Chính vì vậy, nhóm chúng tôi quyết định xây dựng một website bán sách online.

1.2 Mục đích của đề tài Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” được thực hiện nhằm phục vụ cho việc tạo cho người dùng là khách hàng có thể dễ dàng mua được những cuốn sách mà không phải ra ngoài tìm kiếm Đồng thời trong lúc tình hình dịch bệnh mua bán sách qua website sẽ trở nên an toàn và tiết kiệm thời gian Cũng như tạo điều kiện để các cửa hàng có thể thông qua website giới thiệu, quảng bá sản phẩm của tới tay khách hàng Tạo điều kiện thuận lợi cho việc tìm kiếm khách hàng thân quen và cả những khách hàng ở xa chưa từng sử dụng sản phẩm của cửa hàng Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” đặt ra vấn đề trọng tâm về mục tiêu mà nhóm cần thực hiện được bao gồm: tìm hiểu về MERN Stack và ứng dụng mô hình MERN Stack vào xây dựng một sản phẩm cụ thể là Website bán sách Sản phẩm hoàn thành phải là một ứng dụng website được xây dựng có đầy đủ các thành phần của mô hình MERN Stack

Website cơ bản phải đạt được một số yêu cầu sau:

- Quản lý thông tin tài khoản khách hàng và sản phẩm, đơn hàng

- Quản lý nhật ký mua hàng

- Đăng nhập, đăng ký, giỏ hàng, hoá đơn, quản lý thông tin cá nhân

- Bình luận, đánh giá sản phẩm

1.3 Cách tiếp cận và phương pháp nguyên cứu Đề tài được thực hiện nghiên cứu xoay quanh hai nhóm đối tượng trọng tâm bao gồm: nhóm đối tượng về kiến thức công nghệ và nhóm đối tượng có nhu cầu mua, bán sách

Nhóm đối tượng nghiên cứu về kiến thức công nghệ bao gồm bốn thành phần chính: Mã nguồn mở NodeJS, thư viện ReactJS, cơ sở dữ liệu MongoDB và thư viện ExpressJS Ngoài ra, còn có một số thư viện JavaScript hữu ích như JWT (Json Web Token) và bcrypt, góp phần nâng cao giá trị ứng dụng trong lĩnh vực này.

Phạm vi nghiên cứu được xác định một cách tổng quát, giúp người thực hiện nắm vững kiến thức chung và áp dụng hiệu quả vào sản phẩm thực tế Đề tài không tập trung vào các lý thuyết phức tạp mà thiếu tính ứng dụng.

Các giả thiết, ràng buộc và rủi ro

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro

STT Hạng mục Mô tả

1 Các giả thiết của dự án - Luôn có người có thể thay thế khi có thành viên nhóm bận việc đột xuất

- Hoàn thành dự án sớm hơn mong đợi

- Sản pẩm ra mắt không xảy ra lỗi

2 Các ràng buộc của dự án - Trong thời gian bảo trì nếu có lỗi xảy ra nhóm sẽ chịu trách nhiệm toàn bộ trách nhiệm và khắc phục lỗi

- Sau khi hoàn thành dự án thì nhóm phải xóa toàn bộ dữ liệu đã được thêm trong quá trình thực hiện dự án

- Bên khách hàng không chấp nhận nếu sản phẩm chậm quá 10 ngày, sản phẩm không đảm bảo chất lượng, không đúng yêu cầu ban đầu

- Khi phát sinh thêm yêu cầu khách hàng sẽ phải chi trả thêm chi phí

3 Các rủi ro và hướng xử lý - Rủi ro về mặt kỹ thuật, con người thì khách hàng không chịu trách nhiệm

- Kinh phí có thể sẽ tăng lên trong quá trình thực hiện dự án vì lý do bị trì hoãn dự án từ phía khách hàng

- Thành viên tham gia vào dự án có thể nghỉ hoặc bận đột xuất

- Khách hàng thay đổi yêu cầu đột ngột, cần thêm thời gian để lập lại kế hoạch thực hiện và tính chi phí dự án.

Kết quả dự kiến đạt được

Hiểu biết về MERN Stack và Restful API là rất quan trọng để xây dựng một website bán hàng online hoàn chỉnh Việc nắm vững các kiến thức này không chỉ giúp bạn phát triển kỹ năng lập trình mà còn tạo nền tảng vững chắc cho cơ hội nghề nghiệp trong tương lai.

CƠ SỞ LÝ THUYẾT

Tổng quan về kiểm thử tự động

3 Chương 3: Khảo sát hiện trạng và xác định yêu cầu

4 Chương 4: Phân tích và thiết kế hệ thống

4.1 Phân tích yêu cầu chức năng

4.3 Thiết kế cơ sở dữ liệu

4.6 Thiết kế lược đồ lớp

5 Chương 5: Cài đặt và kiểm thử ứng dụng

STT Thời gian Công việc Ghi chú

1 07/03/2022 – 20/03/2022 Thay đổi GlobalState sang Redux

2 21/03/2022 – 10/04/2022 Chỉnh sửa lại các chức năng

3 11/04/2022 – 24/04/2022 Thiết kế và viết chức năng đánh giá, bình luận

4 25/04/2022 – 15/05/2022 Thiết kế và viết chức năng khuyến mãi

5 16/05/2022 – 29/05/2022 Thiết kế giao diện và viết chức năng thống kê

6 30/05/2022 – 12/06/2022 Viết chắc năng đăng ký nhận thông báo qua email Kiểm tra và sửa lỗi

7 13/06/2022 – 19/06/2022 Viết báo cáo và hoàn chỉnh đồ án

Ngày 16 tháng 06 năm 2022 Người viết đề cương Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

DANH MỤC HÌNH ẢNH I DANH MỤC BẢNG BIỂU VII DANH MỤC CÁC TỪ VIẾT TẮT XIV

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI 1

1.1 Tính cấp thiết của đề tài 1

1.2 Mục đích của đề tài 1

1.3 Cách tiếp cận và phương pháp nguyên cứu 2

1.4 Các giả thiết, ràng buộc và rủi ro 2

1.5 Kết quả dự kiến đạt được 3

Chương 2: CƠ SỞ LÝ THUYẾT 4

2.1 Tổng quan về MERN stack 4

2.1.1 Khái niệm về MERN stack 4

2.1.2 Các thành phần trong MERN stack 4

2.1.3 Cách thức hoạt động của MERN stack 5

2.1.4 Ưu điểm của MERN Stack 6

2.2 Tổng quan về Node js 6

2.2.1 Khái niệm về Node Js 6

2.2.2 Nguyên tắc hoạt động của Node Js 7

2.2.3 Ưu nhược điểm của Node Js 8

2.3 Tổng quan về Express js 9

2.3.1 Khái niệm về Express Js 9

2.3.2 Công dụng của Express Js 9

2.4 Tổng quan về React js 10

2.4.1 Khái niệm về React Js 10

2.4.2 Kiến trúc của React Js 10

2.4.3 Ưu nhược điểm của React Js 11

2.5.2 Các tính năng của MongoDB 12

2.5.3 Ưu nhược điểm của MongoDB 13

2.6 Tổng quan về kiểm thử tự động 14

2.6.1 Khái niệm về kiểm thử phần mềm 14

2.6.3 Tổng quan về Selenium Webdriver 15

Chương 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 17

3.1.2 Một số website bán sách trên thị trường 17

3.2.2 Các yêu cầu phi chức năng 25

3.2.3 Ma trận quyền – Permission matrix 26

Chương 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 29

4.1 Phân tích yêu cầu chức năng 29

4.1.3 Chức năng xem trang chủ 29

4.1.5 Chức năng đổi mật khẩu 30

4.1.6 Chức năng quên mật khẩu 31

4.1.7 Chức năng chỉnh sửa thông tin 31

4.1.8 Chức năng tìm kiếm sản phẩm 31

4.1.9 Chức năng xem chi tiết sách 32

4.1.10 Chức năng xem danh mục 32

4.1.11 Chức năng lọc sản phẩm 32

4.1.12 Chức năng quản lý giỏ hàng 33

4.1.13 Chức năng quản lý đơn hàng 33

4.1.15 Chức năng quản lý User 34

4.1.16 Chức năng quản lý danh mục 35

4.1.17 Chức năng quản lý sản phẩm 35

4.1.18 Chức năng quản lý đơn đơn hàng (admin) 36

4.1.19 Chức năng đánh giá, bình luận sản phẩm 36

4.1.20 Chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

4.2.1 Thiết kế usecase tổng quát 39

4.2.2 Thiết kế chức năng đăng ký 39

4.2.3 Thiết kế chức năng đăng nhập 44

4.2.3 Thiết kế chức năng xem trang chủ 47

4.2.4 Thiết kế chức năng đăng xuất 50

4.2.5 Thiết kế chức năng đổi mật khẩu 52

4.2.6 Thiết kế chức năng quên mật khẩu 55

4.2.7 Thiết kế chức năng chỉnh sửa thông tin 59

4.2.8 Thiết kế chức năng tìm kiếm sản phẩm 61

4.2.9 Thiết kế chức năng xem chi tiết sách 64

4.2.10 Thiết kế chức năng xem danh mục 66

4.2.11 Thiết kế chức năng lọc sản phẩm 69

4.2.12 Thiết kế chức năng quản lý giỏ hàng 71

4.2.13 Thiết kế chức năng quản lý đơn hàng 76

4.2.14 Thiết kế chức năng thanh toán 82

4.2.15 Thiết kế chức năng quản lý user 84

4.2.16 Thiết kế chức năng quản lý danh mục 90

4.2.17 Thiết kế chức năng quản lý sản phẩm 96

4.2.18 Thiết kế chức năng quản lý đơn hàng (admin) 102

4.2.19 Thiết kế chức năng đánh giá, bình luận 108

4.2.20 Thiết kế chắc năng quản lý khuyến mãi 112

4.2.21 Thiết kế chức thống kê 118

4.3 Thiết kế cơ sở dữ liệu 123

4.3.1 Sơ đồ thiết kế dữ liệu 123

4.3.2 Mô tả sơ đồ thiết kế dữ liệu 124

4.4.3 Màn hình đăng ký và đăng nhập 136

4.4.4 Màn hình trang sản phẩm 139

4.4.5 Màn hình quản lý giỏ hàng 143

4.4.6 Màn hình quản lý thông tin 146

4.4.7 Màn hình quản lý user 149

4.4.8 Màn hình quản lý danh mục 152

4.4.9 Màn hình quản lý sản phẩm 154

4.4.10 Màn hình quản lý đơn hàng 156

4.4.11 Màn hình thêm sản phẩm 158

4.4.12 Màn hình chi tiết sản phẩm 161

4.4.13 Màn hình hiển thị thông tin nhận hàng 164

4.4.14 Màn hình đánh giá, bình luận sản phẩm 165

4.5 Thiết kế lược đồ lớp 173

Chương 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 174

5.2.1 Hướng dẫn thanh toán paypal 174

5.2.2 Hướng dẫn thanh toán vnpay 176

5.3.3 Kiểm thử tự động sử dụng Selenium 190

5.4.1 API đăng nhập – phương thức POST 191

5.4.2 API đăng ký – phương thức POST 192

5.4.3 API lấy thông tin sản phẩm – phương thức GET 192

5.4.4 API tạo user mới – phương thức POST 193

5.4.5 API chỉnh sửa user – phương thức PUT 194

5.4.6 API thêm sản phẩm – phương thức POST 195

5.4.7 API chỉnh sửa sản phẩm – phương thức PUT 196

5.4.8 API thêm danh mục – phương thức POST 197

5.4.9 API lấy thông tin đơn hàng – phương thức GET 197

Hình 2.1 Cấu trúc hoạt động MERN stack [1] 5

Hình 2.2 Sơ đồ hoạt động Node JS [2] 8

Hình 2.3 Sơ đồ hoạt động Node JS [3] 11

Hình 3.1 Giao diện trang chủ website Tiki [4] 17

Hình 3.2 Giao diện trang chủ website Fahasa [5] 19

Hình 3.3 Giao diện trang chủ website Vinabook [6] 20

Hình 3.4 Giao diện trang chủ website Shopee [7] 21

Hình 3.5 Giao diện trang chủ website Newshop [8] 22

Hình 3.6 Sơ đồ nghiệp vụ 28

Hình 4.3 Sequence đăng ký tài khoản 42

Hình 4.4 Activity đăng ký tài khoản 43

Hình 4.8 Usecase xem trang chủ 48

Hình 4.9 Sequence xem trang chủ 49

Hình 4.10 Activity xem trang chủ 49

Hình 4.14 Usecase đổi mật khẩu 52

Hình 4.15 Sequence đổi mật khẩu 53

Hình 4.16 Activity đổi mật khẩu 54

Hình 4.17 Usecase quên mật khẩu 55

Hình 4.18 Sequence quên mật khẩu 57

Hình 4.19 Activity quên mật khẩu 58

Hình 4.20 Usecase chỉnh sửa thông tin 59

Hình 4.21 Sequence chỉnh sửa thông tin 60

Hình 4.22 Activity chỉnh sửa thông tin 61

Hình 4.26 Usecase xem chi tiết sách 64

Hình 4.27 Sequence xem chi tiết thông tin sản phẩm 65

Hình 4.28 Activity xem chi tiết thông tin sản phẩm 66

Hình 4.29 Usecase xem danh mục sản phẩm 66

Hình 4.30 Sequence xem danh mục sản phẩm 68

Hình 4.31 Activity xem danh mục sản phẩm 68

Hình 4.32 Usecase lọc sản phẩm 69

Hình 4.33 Sequence lọc sản phẩm 70

Hình 4.34 Activity lọc sản phẩm 71

Hình 4.35 Usecase quản lý giỏ hàng 71

Hình 4.36 Sequence thêm sản phẩm vào giỏ hàng 74

Hình 4.37 Sequence sửa giỏ hàng 74

Hình 4.38 Sequence xoá khỏi giỏ hàng 75

Hình 4.39 Activity quản lí giỏ hàng 75

Hình 4.40 Usecase quản lý đơn hàng 76

Hình 4.41 Sequence xem đơn hàng 79

Hình 4.42 Sequence xem chi tiết đơn hàng 79

Hình 4.43 Sequence huỷ đơn hàng 80

Hình 4.44 Activity xem danh sách đơn hàng 80

Hình 4.45 Activity xem chi tiết đơn hàng 81

Hình 4.46 Activity huỷ đơn hàng 81

Hình 4.48 Sequence thanh toán đơn hàng 83

Hình 4.49 Activity thanh toán đơn hàng 83

Hình 4.50 Usecase quản lý user 84

Hình 4.57 Usecase quản lý danh mục 90

Hình 4.58 Sequence thêm danh mục sách 93

Hình 4.59 Sequence sửa danh mục sách 93

Hình 4.60 Sequence xoá danh mục sách 94

Hình 4.61 Activity thêm danh muc sách 94

Hình 4.62 Activity sửa danh muc sách 95

Hình 4.63 Activity xoá danh mục sách 95

Hình 4.64 Usecase quản lý sản phẩm 96

Hình 4.66 Sequence sửa chi tiết sách 100

Hình 4.68 Activity thêm sản phẩm 101

Hình 4.69 Activity sửa sản phẩm 101

Hình 4.70 Activity xoá sản phẩm 102

Hình 4.71 Usecase quản lí đơn hàng 103

Hình 4.72 Sequence xem đơn hàng 105

Hình 4.73 Sequence xem chi tiết đơn hàng 106

Hình 4.74 Sequence thay đổi trạng thái đơn hàng 106

Hình 4.75 Activity chuyển trạng thái đơn hàng 107

Hình 4.76 Activity xem chi tiết đơn hàng 107

Hình 4.77 Usecase đánh giá, bình luận 108

Hình 4.78 Sequence đánh giá, bình luận 111

Hình 4.79 Activity đánh giá, bình luận 112

Hình 4.80 Usecase quản lý khuyến mãi 113

Hình 4.81 Sequence thêm mã khuyến mãi 115

Hình 4.82 Sequence sửa mã khuyến mãi 116

Hình 4.83 Sequence xoá mã khuyến mãi 116

Hình 4.84 Activity thêm mã khuyến mãi 117

Hình 4.85 Activity sửa mã khuyến mãi 117

Hình 4.86 Activity xoá khuyễn mãi 118

Hình 4.90 Sơ đồ thiết kế dữ liệu 123

Hình 4.91 Thiết kế giao diện header 129

Hình 4.92 Thiết kế xử lý header 130

Hình 4.93 Thiết kế giao diện footer 131

Hình 4.94 Thiết kế xử lý footer 133

Hình 4.95 Thiết kế giao diện trang chủ 134

Hình 4.96 Thiết kế xử lý trang chủ 135

Hình 4.97 Thiết kế giao đăng ký và đăng nhập 136

Hình 4.98 Thiết kế xử lý đăng ký và đăng nhập 137

Hình 4.99 Thiết kế giao diện trang sản phẩm 139

Hình 4.100 Thiết kế xử lý trang sản phẩm 141

Hình 4.101 Thiết kế giao diện quản lí giỏ hàng 143

Hình 4.102 Thiết kế xử lý quản lí giỏ hàng 145

Hình 4.103 Thiết kế giao diện quản lý thông tin 146

Hình 4.104 Thiết kế xử lý quản lý thông tin 148

Hình 4.105 Thiết kế giao diện quản lý user 149

Hình 4.106 Thiết kế xử lý quản lý user 151

Hình 4.107 Thiết kế giao diện quản lý danh mục 152

Hình 4.108 Thiết kế xử lý quản lý danh mục 153

Hình 4.109 Thiết kế giao diện quản lý sản phẩm 154

Hình 4.110 Thiết kế xử lý quản lý sản phẩm 155

Hình 4.111 Thiết kế giao diện quản lý đơn hàng 157

Hình 4.112 Thiết kế xử lý quản lý đơn hàng 158

Hình 4.113 Thiết kế giao diện thêm sản phẩm 159

Hình 4.114 Thiêt kế xử lý chi tiết sản phẩm 161

Hình 4.115 Thiết kế giao diện chi tiết sản phẩm 162

Hình 4.116 Thiết kế xử lý chi tiết sản phẩm 163

Hình 4.117 Thiết kế giao diện hiển thị thông tin nhận hàng 164

Hình 4.118 Thiết kế xử lý hiển thị thông tin nhận hàng 165

Hình 4.119 Thiêt kế giao diện đánh giá, bình luận sản phẩm 166

Hình 4.120 Thiết kế xử lý đánh giá, bình luận sản phẩm 167

Hình 4.121 Thiết kế giao diện thống kê 168

Hình 4.122 Thiết kế xử lý thống kê 169

Hình 4.123 Thiết kế giao diện khuyến mãi 171

Hình 4.124 Thiết kế xử lý khuyến mãi 172

Hình 5.1 Màn hình nhập tên tài khoản paypal 175

Hình 5.2 Màn hình nhập mật khẩu tài khoản paypal 175

Hình 5.3 Màn hình chọn hình thức thanh toán 176

Hình 5.4 Màn hình thanh toán thành công 176

Hình 5.5 Màn hình chọn hình thanh toán vnpay 177

Hình 5.6 Màn hình ngân hàng thanh toán 177

Hình 5.7 Màn hình nhập thông tin tài khoản 178

Hình 5.8 Màn hình nhập mã OTP 178

Hình 5.11 API lấy thông tin sản phẩm 193

Hình 5.12 API tạo user mới 194

Hình 5.13 API chỉnh sửa user 195

Hình 5.14 API thêm sản phẩm 196

Hình 5.15 API thêm chỉnh sửa sản phẩm 197

Hình 5.16 API lấy thông tin đơn hàng 197

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro 2

Bảng 3.1 Các yêu cầu phi chức năng 25

Bảng 3.2 Bảng chú thích ký hiệu 26

Bảng 3.3 Ma trận quyền – Permission matrix 26

Bảng 4.1 Yêu cầu chức năng đăng ký 29

Bảng 4.2 Yêu cầu chức năng đăng nhập 29

Bảng 4.3 Yêu cầu chức năng xem màn trang chủ 30

Bảng 4.4 Yêu cầu chức năng đăng xuất 30

Bảng 4.5 Yêu cầu chức năng đổi mật khẩu 30

Bảng 4.6 Yêu cầu chức năng quên mật khẩu 31

Bảng 4.7 Yêu cầu chức năng chỉnh sửa thông tin 31

Bảng 4.8 Yêu cầu chức năng tìm kiếm 31

Bảng 4.9 Yêu cầu chức năng xem chi tết sách 32

Bảng 4.10 Yêu cầu chức năng xem danh mục 32

Bảng 4.11 Yêu cầu chức năng xem danh mục 32

Bảng 4.12 Yêu cầu chức năng quản lý giỏ hàng 33

Bảng 4.13 Yêu cầu chức năng xem đơn hàng 33

Bảng 4.14 Yêu cầu chức năng thanh toán 34

Bảng 4.15 Yêu cầu chức năng quản lý user 34

Bảng 4.16 Yêu cầu chức năng quản lý danh mục 35

Bảng 4.17 Yêu cầu chức năng quản lý sản phẩm 35

Bảng 4.18 Yêu cầu chức năng quản lý đơn hàng 36

Bảng 4.19 Yêu cầu chức năng đánh giá, bình luận sản phẩm 36

Bảng 4.20 Yêu cầu chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

Bảng 4.21 Yêu cầu chức năng thống kê 38

Bảng 4.22 Usecase đăng ký tài khoản 40

Bảng 4.23 Usecase đăng ký tài khoản bằng google 40

Bảng 4.24 Usecase đăng ký tài khoản bằng facebook 41

Bảng 4.25 Business Rule chức năng đăng ký 42

Bảng 4.26 Mô tả chi tiết Activity digram đăng ký 43

Bảng 4.28 Usecase đăng nhập tài khoản bằng google 45

Bảng 4.29 Usecase đăng nhập bằng facebookk 45

Bảng 4.30 Business Rule chức năng đăng nhập 46

Bảng 4.31 Mô tả chi tiết Activity digram đăng nhập 47

Bảng 4.32 Usecase xem trang chủ 48

Bảng 4.33 Mô tả chi tiết Activity digram xem trang chủ 49

Bảng 4.35 Mô tả chi tiết Activity digram đăng xuất 52

Bảng 4.36 Usecase đổi mật khẩu 52

Bảng 4.37 Business Rule chức năng đổi mật khẩu 53

Bảng 4.38 Mô tả chi tiết Activity diagram đổi mật khẩu 54

Bảng 4.39 Usecase quên mật khẩu 55

Bảng 4.40 Business Rule chức năng quên mật khẩu 56

Bảng 4.41 Mô tả chi tiết Activity digram quên mật khẩu 58

Bảng 4.42 Usecase chỉnh sửa thông tin 59

Bảng 4.43 Mô tả chi tiết Activity digram quên mật khẩu 61

Bảng 4.45 trình bày Business Rule cho chức năng tìm kiếm sản phẩm, trong khi Bảng 4.46 mô tả chi tiết Activity diagram liên quan đến tìm kiếm Bảng 4.47 cung cấp Usecase xem chi tiết sách, và Bảng 4.48 nêu rõ Business Rule cho chức năng này Bảng 4.49 tiếp tục với mô tả Activity diagram xem chi tiết sách Bảng 4.50 giới thiệu Usecase xem danh mục, kèm theo Business Rule trong Bảng 4.51 và mô tả Activity diagram trong Bảng 4.52 Bảng 4.53 cung cấp Usecase lọc sản phẩm, với Business Rule trong Bảng 4.54 và mô tả Activity diagram trong Bảng 4.55 Bảng 4.56, 4.57, và 4.58 lần lượt trình bày Usecase thêm vào, chỉnh sửa, và xoá khỏi giỏ hàng, cùng với Business Rule trong Bảng 4.59 và 4.60 Bảng 4.61 và 4.62 cung cấp Usecase xem đơn hàng và xem chi tiết đơn hàng, với Business Rule quản lý đơn hàng trong Bảng 4.64 và mô tả Activity diagram trong Bảng 4.65 Bảng 4.66 giới thiệu Usecase thanh toán, với mô tả Activity diagram trong Bảng 4.67 Cuối cùng, Bảng 4.68, 4.69, và 4.70 trình bày Usecase thêm, sửa, và xoá user.

Bảng 4.71 trình bày Business Rule cho chức năng quản lý người dùng, trong khi Bảng 4.72 mô tả chi tiết Activity diagram cho việc này Bảng 4.73 đến 4.75 đề cập đến các Usecase cho việc thêm, sửa và xoá danh mục Bảng 4.76 cung cấp mô tả chi tiết Activity diagram quản lý danh mục Các Usecase thêm, chỉnh sửa và xoá sản phẩm được trình bày trong Bảng 4.77 đến 4.79, cùng với Bảng 4.80 mô tả Business Rule cho chức năng quản lý sản phẩm Bảng 4.81 và 4.82 nêu rõ Usecase xem và xem chi tiết đơn hàng, trong khi Bảng 4.83 đề cập đến việc chuyển trạng thái đơn hàng Bảng 4.84 cung cấp Business Rule cho chức năng quản lý đơn hàng, và Bảng 4.85 mô tả Activity diagram liên quan Các Usecase đánh giá, bình luận và trả lời bình luận sản phẩm được nêu trong Bảng 4.86 đến 4.88, với Bảng 4.89 mô tả Activity diagram cho các chức năng này Bảng 4.90 đến 4.92 trình bày Usecase cho việc thêm, sửa và xoá mã giảm giá, cùng với Bảng 4.93 mô tả Activity diagram cho việc xoá mã khuyến mãi Cuối cùng, Bảng 4.94 và 4.95 nêu rõ Usecase thống kê người dùng và danh mục.

This article provides a comprehensive overview of various use cases and detailed descriptions related to payment statistics, order tracking, and user data collections Key sections include the detailed activity diagram for statistics, data descriptions for user collections, products, categories, orders, and carts, as well as insights into comment and promotion data Additionally, it covers the design and processing of interface elements such as headers, footers, the homepage, product pages, and shopping cart management Each table is numbered for easy reference, ensuring a structured approach to understanding the system's design and functionality.

Bảng 4.122 đến Bảng 4.141 mô tả chi tiết thiết kế giao diện và xử lý cho các chức năng quản lý người dùng, danh mục, sản phẩm, đơn hàng, thêm sản phẩm, chi tiết sản phẩm, thông tin nhận hàng, đánh giá và bình luận sản phẩm, thống kê, và khuyến mãi Mỗi bảng cung cấp thông tin quan trọng về cách thức hoạt động và giao diện của các phần mềm quản lý, giúp người dùng dễ dàng tiếp cận và sử dụng các tính năng này một cách hiệu quả.

Bảng 5.1 trình bày kiểm thử chức năng đăng ký, trong khi Bảng 5.2 tập trung vào kiểm thử chức năng đăng nhập Bảng 5.3 mô tả kiểm thử chức năng quản lý giỏ hàng, và Bảng 5.4 đề cập đến kiểm thử chức năng quản lý sản phẩm Cuối cùng, Bảng 5.5 phân tích kiểm thử chức năng quản lý người dùng.

Bảng 5.6 trình bày kiểm thử chức năng quản lý đơn hàng, trong khi Bảng 5.7 mô tả API đăng nhập Bảng 5.8 cung cấp thông tin chi tiết về API đăng ký, và Bảng 5.9 giải thích API lấy thông tin sản phẩm Bảng 5.10 mô tả API tạo user mới, còn Bảng 5.11 trình bày API chỉnh sửa user Bảng 5.12 cung cấp thông tin về API thêm sản phẩm, trong khi Bảng 5.13 mô tả API chỉnh sửa sản phẩm Bảng 5.14 giải thích API thêm danh mục, và cuối cùng, Bảng 5.15 mô tả API lấy thông tin đơn hàng.

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

MERN: MongoDB (M), ExpressJS (E), ReactJS (R) và NodeJS (N)

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tính cấp thiết của đề tài

Tri thức là tài sản quý giá của nhân loại, phần lớn được lưu giữ trong sách báo Hiện nay, có nhiều cửa hàng và công ty kinh doanh sách báo, do đó việc giới thiệu và tiếp cận sản phẩm đến tay độc giả trở thành nhu cầu thiết yếu.

Với sự bùng nổ của công nghệ 4.0, hàng triệu người truy cập internet mỗi ngày để tìm kiếm kiến thức và nhu cầu mua sắm sách báo ngày càng tăng Việc phát triển mô hình kinh doanh trực tuyến giúp các cửa hàng và cá nhân thuận tiện hơn trong việc kinh doanh Do đó, việc tạo ra một website bán hàng trực tuyến là cần thiết cho doanh nghiệp, nhà kinh doanh, cửa hàng bán lẻ và cá nhân Kết hợp sách với thương mại điện tử giúp việc mua sách trở nên đơn giản hơn, đưa những quyển sách quý và hay đến tay độc giả dễ dàng, từ đó nhóm em quyết định xây dựng một website bán sách online.

1.2 Mục đích của đề tài Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” được thực hiện nhằm phục vụ cho việc tạo cho người dùng là khách hàng có thể dễ dàng mua được những cuốn sách mà không phải ra ngoài tìm kiếm Đồng thời trong lúc tình hình dịch bệnh mua bán sách qua website sẽ trở nên an toàn và tiết kiệm thời gian Cũng như tạo điều kiện để các cửa hàng có thể thông qua website giới thiệu, quảng bá sản phẩm của tới tay khách hàng Tạo điều kiện thuận lợi cho việc tìm kiếm khách hàng thân quen và cả những khách hàng ở xa chưa từng sử dụng sản phẩm của cửa hàng Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” đặt ra vấn đề trọng tâm về mục tiêu mà nhóm cần thực hiện được bao gồm: tìm hiểu về MERN Stack và ứng dụng mô hình MERN Stack vào xây dựng một sản phẩm cụ thể là Website bán sách Sản phẩm hoàn thành phải là một ứng dụng website được xây dựng có đầy đủ các thành phần của mô hình MERN Stack

Website cơ bản phải đạt được một số yêu cầu sau:

- Quản lý thông tin tài khoản khách hàng và sản phẩm, đơn hàng

- Quản lý nhật ký mua hàng

- Đăng nhập, đăng ký, giỏ hàng, hoá đơn, quản lý thông tin cá nhân

- Bình luận, đánh giá sản phẩm

1.3 Cách tiếp cận và phương pháp nguyên cứu Đề tài được thực hiện nghiên cứu xoay quanh hai nhóm đối tượng trọng tâm bao gồm: nhóm đối tượng về kiến thức công nghệ và nhóm đối tượng có nhu cầu mua, bán sách

Nhóm đối tượng nghiên cứu về kiến thức công nghệ bao gồm bốn thành phần chính: mã nguồn mở NodeJS, thư viện ReactJS, cơ sở dữ liệu MongoDB và thư viện ExpressJS Ngoài ra, còn có một số thư viện JavaScript hữu ích khác như JWT (Json Web Token) và bcrypt.

Phạm vi nghiên cứu được xác định ở mức độ tổng quát, giúp người thực hiện nắm vững kiến thức chung và áp dụng hiệu quả vào sản phẩm thực tế, tránh xa các lý thuyết phức tạp không có tính ứng dụng.

1.4 Các giả thiết, ràng buộc và rủi ro

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro

STT Hạng mục Mô tả

1 Các giả thiết của dự án - Luôn có người có thể thay thế khi có thành viên nhóm bận việc đột xuất

- Hoàn thành dự án sớm hơn mong đợi

- Sản pẩm ra mắt không xảy ra lỗi

2 Các ràng buộc của dự án - Trong thời gian bảo trì nếu có lỗi xảy ra nhóm sẽ chịu trách nhiệm toàn bộ trách nhiệm và khắc phục lỗi

- Sau khi hoàn thành dự án thì nhóm phải xóa toàn bộ dữ liệu đã được thêm trong quá trình thực hiện dự án

- Bên khách hàng không chấp nhận nếu sản phẩm chậm quá 10 ngày, sản phẩm không đảm bảo chất lượng, không đúng yêu cầu ban đầu

- Khi phát sinh thêm yêu cầu khách hàng sẽ phải chi trả thêm chi phí

3 Các rủi ro và hướng xử lý - Rủi ro về mặt kỹ thuật, con người thì khách hàng không chịu trách nhiệm

- Kinh phí có thể sẽ tăng lên trong quá trình thực hiện dự án vì lý do bị trì hoãn dự án từ phía khách hàng

- Thành viên tham gia vào dự án có thể nghỉ hoặc bận đột xuất

- Khách hàng thay đổi yêu cầu đột ngột, cần thêm thời gian để lập lại kế hoạch thực hiện và tính chi phí dự án

1.5 Kết quả dự kiến đạt được

Nắm vững kiến thức về MERN Stack và Restful API để hiểu rõ cách thức hoạt động của chúng Xây dựng hoàn chỉnh một website bán hàng online dựa trên những kiến thức đã học Trang bị nền tảng vững chắc để phát triển và áp dụng trong tương lai.

Chương 2: CƠ SỞ LÝ THUYẾT

2.1 Tổng quan về MERN stack

2.1.1 Khái niệm về MERN stack

MERN Stack là một ngăn xếp Javascript giúp triển khai nhanh chóng và dễ dàng các ứng dụng web toàn ngăn xếp Ngăn xếp này bao gồm bốn công nghệ chính: MongoDB, ExpressJS, React JS và NodeJS.

Bốn công nghệ mạnh mẽ này cung cấp khung làm việc end-to-end cho các nhà phát triển, đóng vai trò quan trọng trong việc phát triển ứng dụng website.

2.1.2 Các thành phần trong MERN stack

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

Xác định yêu cầu

4 Chương 4: Phân tích và thiết kế hệ thống

4.1 Phân tích yêu cầu chức năng

4.3 Thiết kế cơ sở dữ liệu

4.6 Thiết kế lược đồ lớp

5 Chương 5: Cài đặt và kiểm thử ứng dụng

STT Thời gian Công việc Ghi chú

1 07/03/2022 – 20/03/2022 Thay đổi GlobalState sang Redux

2 21/03/2022 – 10/04/2022 Chỉnh sửa lại các chức năng

3 11/04/2022 – 24/04/2022 Thiết kế và viết chức năng đánh giá, bình luận

4 25/04/2022 – 15/05/2022 Thiết kế và viết chức năng khuyến mãi

5 16/05/2022 – 29/05/2022 Thiết kế giao diện và viết chức năng thống kê

6 30/05/2022 – 12/06/2022 Viết chắc năng đăng ký nhận thông báo qua email Kiểm tra và sửa lỗi

7 13/06/2022 – 19/06/2022 Viết báo cáo và hoàn chỉnh đồ án

Ngày 16 tháng 06 năm 2022 Người viết đề cương Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

DANH MỤC HÌNH ẢNH I DANH MỤC BẢNG BIỂU VII DANH MỤC CÁC TỪ VIẾT TẮT XIV

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI 1

1.1 Tính cấp thiết của đề tài 1

1.2 Mục đích của đề tài 1

1.3 Cách tiếp cận và phương pháp nguyên cứu 2

1.4 Các giả thiết, ràng buộc và rủi ro 2

1.5 Kết quả dự kiến đạt được 3

Chương 2: CƠ SỞ LÝ THUYẾT 4

2.1 Tổng quan về MERN stack 4

2.1.1 Khái niệm về MERN stack 4

2.1.2 Các thành phần trong MERN stack 4

2.1.3 Cách thức hoạt động của MERN stack 5

2.1.4 Ưu điểm của MERN Stack 6

2.2 Tổng quan về Node js 6

2.2.1 Khái niệm về Node Js 6

2.2.2 Nguyên tắc hoạt động của Node Js 7

2.2.3 Ưu nhược điểm của Node Js 8

2.3 Tổng quan về Express js 9

2.3.1 Khái niệm về Express Js 9

2.3.2 Công dụng của Express Js 9

2.4 Tổng quan về React js 10

2.4.1 Khái niệm về React Js 10

2.4.2 Kiến trúc của React Js 10

2.4.3 Ưu nhược điểm của React Js 11

2.5.2 Các tính năng của MongoDB 12

2.5.3 Ưu nhược điểm của MongoDB 13

2.6 Tổng quan về kiểm thử tự động 14

2.6.1 Khái niệm về kiểm thử phần mềm 14

2.6.3 Tổng quan về Selenium Webdriver 15

Chương 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 17

3.1.2 Một số website bán sách trên thị trường 17

3.2.2 Các yêu cầu phi chức năng 25

3.2.3 Ma trận quyền – Permission matrix 26

Chương 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 29

4.1 Phân tích yêu cầu chức năng 29

4.1.3 Chức năng xem trang chủ 29

4.1.5 Chức năng đổi mật khẩu 30

4.1.6 Chức năng quên mật khẩu 31

4.1.7 Chức năng chỉnh sửa thông tin 31

4.1.8 Chức năng tìm kiếm sản phẩm 31

4.1.9 Chức năng xem chi tiết sách 32

4.1.10 Chức năng xem danh mục 32

4.1.11 Chức năng lọc sản phẩm 32

4.1.12 Chức năng quản lý giỏ hàng 33

4.1.13 Chức năng quản lý đơn hàng 33

4.1.15 Chức năng quản lý User 34

4.1.16 Chức năng quản lý danh mục 35

4.1.17 Chức năng quản lý sản phẩm 35

4.1.18 Chức năng quản lý đơn đơn hàng (admin) 36

4.1.19 Chức năng đánh giá, bình luận sản phẩm 36

4.1.20 Chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

4.2.1 Thiết kế usecase tổng quát 39

4.2.2 Thiết kế chức năng đăng ký 39

4.2.3 Thiết kế chức năng đăng nhập 44

4.2.3 Thiết kế chức năng xem trang chủ 47

4.2.4 Thiết kế chức năng đăng xuất 50

4.2.5 Thiết kế chức năng đổi mật khẩu 52

4.2.6 Thiết kế chức năng quên mật khẩu 55

4.2.7 Thiết kế chức năng chỉnh sửa thông tin 59

4.2.8 Thiết kế chức năng tìm kiếm sản phẩm 61

4.2.9 Thiết kế chức năng xem chi tiết sách 64

4.2.10 Thiết kế chức năng xem danh mục 66

4.2.11 Thiết kế chức năng lọc sản phẩm 69

4.2.12 Thiết kế chức năng quản lý giỏ hàng 71

4.2.13 Thiết kế chức năng quản lý đơn hàng 76

4.2.14 Thiết kế chức năng thanh toán 82

4.2.15 Thiết kế chức năng quản lý user 84

4.2.16 Thiết kế chức năng quản lý danh mục 90

4.2.17 Thiết kế chức năng quản lý sản phẩm 96

4.2.18 Thiết kế chức năng quản lý đơn hàng (admin) 102

4.2.19 Thiết kế chức năng đánh giá, bình luận 108

4.2.20 Thiết kế chắc năng quản lý khuyến mãi 112

4.2.21 Thiết kế chức thống kê 118

4.3 Thiết kế cơ sở dữ liệu 123

4.3.1 Sơ đồ thiết kế dữ liệu 123

4.3.2 Mô tả sơ đồ thiết kế dữ liệu 124

4.4.3 Màn hình đăng ký và đăng nhập 136

4.4.4 Màn hình trang sản phẩm 139

4.4.5 Màn hình quản lý giỏ hàng 143

4.4.6 Màn hình quản lý thông tin 146

4.4.7 Màn hình quản lý user 149

4.4.8 Màn hình quản lý danh mục 152

4.4.9 Màn hình quản lý sản phẩm 154

4.4.10 Màn hình quản lý đơn hàng 156

4.4.11 Màn hình thêm sản phẩm 158

4.4.12 Màn hình chi tiết sản phẩm 161

4.4.13 Màn hình hiển thị thông tin nhận hàng 164

4.4.14 Màn hình đánh giá, bình luận sản phẩm 165

4.5 Thiết kế lược đồ lớp 173

Chương 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 174

5.2.1 Hướng dẫn thanh toán paypal 174

5.2.2 Hướng dẫn thanh toán vnpay 176

5.3.3 Kiểm thử tự động sử dụng Selenium 190

5.4.1 API đăng nhập – phương thức POST 191

5.4.2 API đăng ký – phương thức POST 192

5.4.3 API lấy thông tin sản phẩm – phương thức GET 192

5.4.4 API tạo user mới – phương thức POST 193

5.4.5 API chỉnh sửa user – phương thức PUT 194

5.4.6 API thêm sản phẩm – phương thức POST 195

5.4.7 API chỉnh sửa sản phẩm – phương thức PUT 196

5.4.8 API thêm danh mục – phương thức POST 197

5.4.9 API lấy thông tin đơn hàng – phương thức GET 197

Hình 2.1 Cấu trúc hoạt động MERN stack [1] 5

Hình 2.2 Sơ đồ hoạt động Node JS [2] 8

Hình 2.3 Sơ đồ hoạt động Node JS [3] 11

Hình 3.1 Giao diện trang chủ website Tiki [4] 17

Hình 3.2 Giao diện trang chủ website Fahasa [5] 19

Hình 3.3 Giao diện trang chủ website Vinabook [6] 20

Hình 3.4 Giao diện trang chủ website Shopee [7] 21

Hình 3.5 Giao diện trang chủ website Newshop [8] 22

Hình 3.6 Sơ đồ nghiệp vụ 28

Hình 4.3 Sequence đăng ký tài khoản 42

Hình 4.4 Activity đăng ký tài khoản 43

Hình 4.8 Usecase xem trang chủ 48

Hình 4.9 Sequence xem trang chủ 49

Hình 4.10 Activity xem trang chủ 49

Hình 4.14 Usecase đổi mật khẩu 52

Hình 4.15 Sequence đổi mật khẩu 53

Hình 4.16 Activity đổi mật khẩu 54

Hình 4.17 Usecase quên mật khẩu 55

Hình 4.18 Sequence quên mật khẩu 57

Hình 4.19 Activity quên mật khẩu 58

Hình 4.20 Usecase chỉnh sửa thông tin 59

Hình 4.21 Sequence chỉnh sửa thông tin 60

Hình 4.22 Activity chỉnh sửa thông tin 61

Hình 4.26 Usecase xem chi tiết sách 64

Hình 4.27 Sequence xem chi tiết thông tin sản phẩm 65

Hình 4.28 Activity xem chi tiết thông tin sản phẩm 66

Hình 4.29 Usecase xem danh mục sản phẩm 66

Hình 4.30 Sequence xem danh mục sản phẩm 68

Hình 4.31 Activity xem danh mục sản phẩm 68

Hình 4.32 Usecase lọc sản phẩm 69

Hình 4.33 Sequence lọc sản phẩm 70

Hình 4.34 Activity lọc sản phẩm 71

Hình 4.35 Usecase quản lý giỏ hàng 71

Hình 4.36 Sequence thêm sản phẩm vào giỏ hàng 74

Hình 4.37 Sequence sửa giỏ hàng 74

Hình 4.38 Sequence xoá khỏi giỏ hàng 75

Hình 4.39 Activity quản lí giỏ hàng 75

Hình 4.40 Usecase quản lý đơn hàng 76

Hình 4.41 Sequence xem đơn hàng 79

Hình 4.42 Sequence xem chi tiết đơn hàng 79

Hình 4.43 Sequence huỷ đơn hàng 80

Hình 4.44 Activity xem danh sách đơn hàng 80

Hình 4.45 Activity xem chi tiết đơn hàng 81

Hình 4.46 Activity huỷ đơn hàng 81

Hình 4.48 Sequence thanh toán đơn hàng 83

Hình 4.49 Activity thanh toán đơn hàng 83

Hình 4.50 Usecase quản lý user 84

Hình 4.57 Usecase quản lý danh mục 90

Hình 4.58 Sequence thêm danh mục sách 93

Hình 4.59 Sequence sửa danh mục sách 93

Hình 4.60 Sequence xoá danh mục sách 94

Hình 4.61 Activity thêm danh muc sách 94

Hình 4.62 Activity sửa danh muc sách 95

Hình 4.63 Activity xoá danh mục sách 95

Hình 4.64 Usecase quản lý sản phẩm 96

Hình 4.66 Sequence sửa chi tiết sách 100

Hình 4.68 Activity thêm sản phẩm 101

Hình 4.69 Activity sửa sản phẩm 101

Hình 4.70 Activity xoá sản phẩm 102

Hình 4.71 Usecase quản lí đơn hàng 103

Hình 4.72 Sequence xem đơn hàng 105

Hình 4.73 Sequence xem chi tiết đơn hàng 106

Hình 4.74 Sequence thay đổi trạng thái đơn hàng 106

Hình 4.75 Activity chuyển trạng thái đơn hàng 107

Hình 4.76 Activity xem chi tiết đơn hàng 107

Hình 4.77 Usecase đánh giá, bình luận 108

Hình 4.78 Sequence đánh giá, bình luận 111

Hình 4.79 Activity đánh giá, bình luận 112

Hình 4.80 Usecase quản lý khuyến mãi 113

Hình 4.81 Sequence thêm mã khuyến mãi 115

Hình 4.82 Sequence sửa mã khuyến mãi 116

Hình 4.83 Sequence xoá mã khuyến mãi 116

Hình 4.84 Activity thêm mã khuyến mãi 117

Hình 4.85 Activity sửa mã khuyến mãi 117

Hình 4.86 Activity xoá khuyễn mãi 118

Hình 4.90 Sơ đồ thiết kế dữ liệu 123

Hình 4.91 Thiết kế giao diện header 129

Hình 4.92 Thiết kế xử lý header 130

Hình 4.93 Thiết kế giao diện footer 131

Hình 4.94 Thiết kế xử lý footer 133

Hình 4.95 Thiết kế giao diện trang chủ 134

Hình 4.96 Thiết kế xử lý trang chủ 135

Hình 4.97 Thiết kế giao đăng ký và đăng nhập 136

Hình 4.98 Thiết kế xử lý đăng ký và đăng nhập 137

Hình 4.99 Thiết kế giao diện trang sản phẩm 139

Hình 4.100 Thiết kế xử lý trang sản phẩm 141

Hình 4.101 Thiết kế giao diện quản lí giỏ hàng 143

Hình 4.102 Thiết kế xử lý quản lí giỏ hàng 145

Hình 4.103 Thiết kế giao diện quản lý thông tin 146

Hình 4.104 Thiết kế xử lý quản lý thông tin 148

Hình 4.105 Thiết kế giao diện quản lý user 149

Hình 4.106 Thiết kế xử lý quản lý user 151

Hình 4.107 Thiết kế giao diện quản lý danh mục 152

Hình 4.108 Thiết kế xử lý quản lý danh mục 153

Hình 4.109 Thiết kế giao diện quản lý sản phẩm 154

Hình 4.110 Thiết kế xử lý quản lý sản phẩm 155

Hình 4.111 Thiết kế giao diện quản lý đơn hàng 157

Hình 4.112 Thiết kế xử lý quản lý đơn hàng 158

Hình 4.113 Thiết kế giao diện thêm sản phẩm 159

Hình 4.114 Thiêt kế xử lý chi tiết sản phẩm 161

Hình 4.115 Thiết kế giao diện chi tiết sản phẩm 162

Hình 4.116 Thiết kế xử lý chi tiết sản phẩm 163

Hình 4.117 Thiết kế giao diện hiển thị thông tin nhận hàng 164

Hình 4.118 Thiết kế xử lý hiển thị thông tin nhận hàng 165

Hình 4.119 Thiêt kế giao diện đánh giá, bình luận sản phẩm 166

Hình 4.120 Thiết kế xử lý đánh giá, bình luận sản phẩm 167

Hình 4.121 Thiết kế giao diện thống kê 168

Hình 4.122 Thiết kế xử lý thống kê 169

Hình 4.123 Thiết kế giao diện khuyến mãi 171

Hình 4.124 Thiết kế xử lý khuyến mãi 172

Hình 5.1 Màn hình nhập tên tài khoản paypal 175

Hình 5.2 Màn hình nhập mật khẩu tài khoản paypal 175

Hình 5.3 Màn hình chọn hình thức thanh toán 176

Hình 5.4 Màn hình thanh toán thành công 176

Hình 5.5 Màn hình chọn hình thanh toán vnpay 177

Hình 5.6 Màn hình ngân hàng thanh toán 177

Hình 5.7 Màn hình nhập thông tin tài khoản 178

Hình 5.8 Màn hình nhập mã OTP 178

Hình 5.11 API lấy thông tin sản phẩm 193

Hình 5.12 API tạo user mới 194

Hình 5.13 API chỉnh sửa user 195

Hình 5.14 API thêm sản phẩm 196

Hình 5.15 API thêm chỉnh sửa sản phẩm 197

Hình 5.16 API lấy thông tin đơn hàng 197

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro 2

Bảng 3.1 Các yêu cầu phi chức năng 25

Bảng 3.2 Bảng chú thích ký hiệu 26

Bảng 3.3 Ma trận quyền – Permission matrix 26

Bảng 4.1 Yêu cầu chức năng đăng ký 29

Bảng 4.2 Yêu cầu chức năng đăng nhập 29

Bảng 4.3 Yêu cầu chức năng xem màn trang chủ 30

Bảng 4.4 Yêu cầu chức năng đăng xuất 30

Bảng 4.5 Yêu cầu chức năng đổi mật khẩu 30

Bảng 4.6 Yêu cầu chức năng quên mật khẩu 31

Bảng 4.7 Yêu cầu chức năng chỉnh sửa thông tin 31

Bảng 4.8 Yêu cầu chức năng tìm kiếm 31

Bảng 4.9 Yêu cầu chức năng xem chi tết sách 32

Bảng 4.10 Yêu cầu chức năng xem danh mục 32

Bảng 4.11 Yêu cầu chức năng xem danh mục 32

Bảng 4.12 Yêu cầu chức năng quản lý giỏ hàng 33

Bảng 4.13 Yêu cầu chức năng xem đơn hàng 33

Bảng 4.14 Yêu cầu chức năng thanh toán 34

Bảng 4.15 Yêu cầu chức năng quản lý user 34

Bảng 4.16 Yêu cầu chức năng quản lý danh mục 35

Bảng 4.17 Yêu cầu chức năng quản lý sản phẩm 35

Bảng 4.18 Yêu cầu chức năng quản lý đơn hàng 36

Bảng 4.19 Yêu cầu chức năng đánh giá, bình luận sản phẩm 36

Bảng 4.20 Yêu cầu chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

Bảng 4.21 Yêu cầu chức năng thống kê 38

Bảng 4.22 Usecase đăng ký tài khoản 40

Bảng 4.23 Usecase đăng ký tài khoản bằng google 40

Bảng 4.24 Usecase đăng ký tài khoản bằng facebook 41

Bảng 4.25 Business Rule chức năng đăng ký 42

Bảng 4.26 Mô tả chi tiết Activity digram đăng ký 43

Bảng 4.28 Usecase đăng nhập tài khoản bằng google 45

Bảng 4.29 Usecase đăng nhập bằng facebookk 45

Bảng 4.30 Business Rule chức năng đăng nhập 46

Bảng 4.31 Mô tả chi tiết Activity digram đăng nhập 47

Bảng 4.32 Usecase xem trang chủ 48

Bảng 4.33 Mô tả chi tiết Activity digram xem trang chủ 49

Bảng 4.35 Mô tả chi tiết Activity digram đăng xuất 52

Bảng 4.36 Usecase đổi mật khẩu 52

Bảng 4.37 Business Rule chức năng đổi mật khẩu 53

Bảng 4.38 Mô tả chi tiết Activity diagram đổi mật khẩu 54

Bảng 4.39 Usecase quên mật khẩu 55

Bảng 4.40 Business Rule chức năng quên mật khẩu 56

Bảng 4.41 Mô tả chi tiết Activity digram quên mật khẩu 58

Bảng 4.42 Usecase chỉnh sửa thông tin 59

Bảng 4.43 Mô tả chi tiết Activity digram quên mật khẩu 61

Bảng 4.45 đến Bảng 4.70 trình bày các Business Rule và Usecase liên quan đến chức năng tìm kiếm sản phẩm, xem chi tiết sách, xem danh mục, lọc sản phẩm, quản lý giỏ hàng, quản lý đơn hàng, và quản lý người dùng Mỗi bảng cung cấp mô tả chi tiết Activity digram tương ứng, giúp người dùng hiểu rõ quy trình và chức năng của từng hoạt động trong hệ thống Các thông tin này không chỉ hỗ trợ việc phát triển ứng dụng mà còn tối ưu hóa trải nghiệm người dùng trong việc tìm kiếm và quản lý sản phẩm, đơn hàng, và thông tin người dùng.

Bảng 4.71 đến Bảng 4.95 mô tả các quy tắc kinh doanh và usecase liên quan đến quản lý user, danh mục, sản phẩm và đơn hàng Cụ thể, các bảng này bao gồm mô tả chi tiết về activity digram quản lý user, danh mục, sản phẩm và đơn hàng, cũng như các usecase như thêm, sửa, xoá danh mục, sản phẩm và mã giảm giá Ngoài ra, các bảng cũng trình bày các usecase để xem đơn hàng, đánh giá và bình luận sản phẩm, cùng với các hoạt động thống kê liên quan đến user và danh mục.

The article includes detailed descriptions and diagrams related to various use cases and data collections, such as payment statistics (Table 4.96) and order statistics (Table 4.97) It outlines the data structures for user collections (Table 4.99), product collections (Table 4.100), categories (Table 4.101), orders (Table 4.102), and more, including details on carts (Table 4.104) and promotions (Table 4.107) Additionally, it provides insights into the design and processing of interface elements, covering headers (Tables 4.108 and 4.109), footers (Tables 4.110 and 4.111), the homepage (Tables 4.112 and 4.113), product pages (Tables 4.116 and 4.117), and shopping cart management (Tables 4.118 and 4.119), along with user information management (Tables 4.120 and 4.121).

Bảng 4.122 đến 4.141 mô tả chi tiết thiết kế giao diện và xử lý cho các chức năng quản lý trong hệ thống, bao gồm quản lý người dùng, danh mục, sản phẩm, đơn hàng, và thông tin nhận hàng Các bảng này cũng trình bày thiết kế giao diện cho việc thêm sản phẩm, chi tiết sản phẩm, đánh giá và bình luận sản phẩm, cũng như thống kê và khuyến mãi Mỗi bảng cung cấp thông tin cần thiết để hiểu rõ hơn về cách thức hoạt động và tương tác của người dùng với các chức năng này.

Bảng 5.1 trình bày kiểm thử chức năng đăng ký, trong khi Bảng 5.2 tập trung vào kiểm thử chức năng đăng nhập Bảng 5.3 mô tả kiểm thử chức năng quản lý giỏ hàng, và Bảng 5.4 giới thiệu kiểm thử chức năng quản lý sản phẩm Cuối cùng, Bảng 5.5 nêu rõ kiểm thử chức năng quản lý người dùng.

Bảng 5.6 trình bày kiểm thử chức năng quản lý đơn hàng, trong khi Bảng 5.7 mô tả API đăng nhập và Bảng 5.8 cung cấp thông tin về API đăng ký Bảng 5.9 chi tiết hóa API lấy thông tin sản phẩm, còn Bảng 5.10 và 5.11 lần lượt mô tả API tạo user mới và chỉnh sửa user Bảng 5.12 giới thiệu API thêm sản phẩm, trong khi Bảng 5.13 mô tả API chỉnh sửa sản phẩm Bảng 5.14 cung cấp thông tin về API thêm danh mục, và cuối cùng, Bảng 5.15 mô tả API lấy thông tin đơn hàng.

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

MERN: MongoDB (M), ExpressJS (E), ReactJS (R) và NodeJS (N)

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tính cấp thiết của đề tài

Tri thức là tài sản quý giá của nhân loại, phần lớn được lưu giữ trong sách báo Hiện nay, có nhiều cửa hàng và công ty kinh doanh sách báo, do đó, việc giới thiệu và phân phối sản phẩm đến tay độc giả trở thành nhu cầu thiết yếu.

Ngày nay, sự phát triển mạnh mẽ của công nghệ 4.0 đã dẫn đến hàng triệu người truy cập internet mỗi ngày để tìm hiểu kiến thức và nhu cầu mua bán sách báo ngày càng gia tăng Việc phát triển mô hình kinh doanh trực tuyến giúp các cửa hàng và cá nhân thuận tiện hơn trong việc kinh doanh Do đó, tạo ra một website bán hàng trực tuyến là điều cần thiết cho doanh nghiệp, nhà kinh doanh, cửa hàng bán lẻ và cá nhân Kết hợp sách với thương mại điện tử giúp việc mua sách trở nên đơn giản hơn, mang lại cho độc giả những quyển sách quý giá Vì vậy, nhóm chúng tôi đã quyết định xây dựng một website bán sách online.

1.2 Mục đích của đề tài Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” được thực hiện nhằm phục vụ cho việc tạo cho người dùng là khách hàng có thể dễ dàng mua được những cuốn sách mà không phải ra ngoài tìm kiếm Đồng thời trong lúc tình hình dịch bệnh mua bán sách qua website sẽ trở nên an toàn và tiết kiệm thời gian Cũng như tạo điều kiện để các cửa hàng có thể thông qua website giới thiệu, quảng bá sản phẩm của tới tay khách hàng Tạo điều kiện thuận lợi cho việc tìm kiếm khách hàng thân quen và cả những khách hàng ở xa chưa từng sử dụng sản phẩm của cửa hàng Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” đặt ra vấn đề trọng tâm về mục tiêu mà nhóm cần thực hiện được bao gồm: tìm hiểu về MERN Stack và ứng dụng mô hình MERN Stack vào xây dựng một sản phẩm cụ thể là Website bán sách Sản phẩm hoàn thành phải là một ứng dụng website được xây dựng có đầy đủ các thành phần của mô hình MERN Stack

Website cơ bản phải đạt được một số yêu cầu sau:

- Quản lý thông tin tài khoản khách hàng và sản phẩm, đơn hàng

- Quản lý nhật ký mua hàng

- Đăng nhập, đăng ký, giỏ hàng, hoá đơn, quản lý thông tin cá nhân

- Bình luận, đánh giá sản phẩm

1.3 Cách tiếp cận và phương pháp nguyên cứu Đề tài được thực hiện nghiên cứu xoay quanh hai nhóm đối tượng trọng tâm bao gồm: nhóm đối tượng về kiến thức công nghệ và nhóm đối tượng có nhu cầu mua, bán sách

Nhóm đối tượng nghiên cứu về kiến thức công nghệ bao gồm 4 yếu tố chính: Mã nguồn mở NodeJS, thư viện ReactJS, cơ sở dữ liệu MongoDB, và thư viện ExpressJS Ngoài ra, một số thư viện Javascript hữu ích như JWT (Json Web Token) và bcrypt cũng được đưa vào nhóm nghiên cứu này.

Phạm vi nghiên cứu được xác định một cách tổng quát, giúp người thực hiện nắm bắt kiến thức chung và áp dụng hiệu quả vào sản phẩm thực tế, đồng thời tránh xa các lý thuyết phức tạp không có tính ứng dụng.

1.4 Các giả thiết, ràng buộc và rủi ro

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro

STT Hạng mục Mô tả

1 Các giả thiết của dự án - Luôn có người có thể thay thế khi có thành viên nhóm bận việc đột xuất

- Hoàn thành dự án sớm hơn mong đợi

- Sản pẩm ra mắt không xảy ra lỗi

2 Các ràng buộc của dự án - Trong thời gian bảo trì nếu có lỗi xảy ra nhóm sẽ chịu trách nhiệm toàn bộ trách nhiệm và khắc phục lỗi

- Sau khi hoàn thành dự án thì nhóm phải xóa toàn bộ dữ liệu đã được thêm trong quá trình thực hiện dự án

- Bên khách hàng không chấp nhận nếu sản phẩm chậm quá 10 ngày, sản phẩm không đảm bảo chất lượng, không đúng yêu cầu ban đầu

- Khi phát sinh thêm yêu cầu khách hàng sẽ phải chi trả thêm chi phí

3 Các rủi ro và hướng xử lý - Rủi ro về mặt kỹ thuật, con người thì khách hàng không chịu trách nhiệm

- Kinh phí có thể sẽ tăng lên trong quá trình thực hiện dự án vì lý do bị trì hoãn dự án từ phía khách hàng

- Thành viên tham gia vào dự án có thể nghỉ hoặc bận đột xuất

- Khách hàng thay đổi yêu cầu đột ngột, cần thêm thời gian để lập lại kế hoạch thực hiện và tính chi phí dự án

1.5 Kết quả dự kiến đạt được

Nắm vững kiến thức về MERN Stack và Restful API cùng với nguyên lý hoạt động của chúng là bước đầu tiên quan trọng Tiếp theo, bạn sẽ xây dựng thành công một website bán hàng online dựa trên những kiến thức đã học Cuối cùng, việc trang bị những kiến thức và nền tảng này sẽ mở ra nhiều cơ hội phát triển và ứng dụng trong tương lai.

Chương 2: CƠ SỞ LÝ THUYẾT

2.1 Tổng quan về MERN stack

2.1.1 Khái niệm về MERN stack

MERN Stack là một ngăn xếp JavaScript giúp triển khai nhanh chóng và dễ dàng các ứng dụng web toàn ngăn xếp Ngăn xếp này bao gồm bốn công nghệ chính: MongoDB, ExpressJS, React JS và NodeJS.

Bốn công nghệ mạnh mẽ này cung cấp khung làm việc end-to-end cho các nhà phát triển, đóng vai trò quan trọng trong việc phát triển ứng dụng website.

2.1.2 Các thành phần trong MERN stack

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Phân tích yêu cầu chức năng

4.3 Thiết kế cơ sở dữ liệu

4.6 Thiết kế lược đồ lớp

5 Chương 5: Cài đặt và kiểm thử ứng dụng

STT Thời gian Công việc Ghi chú

1 07/03/2022 – 20/03/2022 Thay đổi GlobalState sang Redux

2 21/03/2022 – 10/04/2022 Chỉnh sửa lại các chức năng

3 11/04/2022 – 24/04/2022 Thiết kế và viết chức năng đánh giá, bình luận

4 25/04/2022 – 15/05/2022 Thiết kế và viết chức năng khuyến mãi

5 16/05/2022 – 29/05/2022 Thiết kế giao diện và viết chức năng thống kê

6 30/05/2022 – 12/06/2022 Viết chắc năng đăng ký nhận thông báo qua email Kiểm tra và sửa lỗi

7 13/06/2022 – 19/06/2022 Viết báo cáo và hoàn chỉnh đồ án

Ngày 16 tháng 06 năm 2022 Người viết đề cương Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

DANH MỤC HÌNH ẢNH I DANH MỤC BẢNG BIỂU VII DANH MỤC CÁC TỪ VIẾT TẮT XIV

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI 1

1.1 Tính cấp thiết của đề tài 1

1.2 Mục đích của đề tài 1

1.3 Cách tiếp cận và phương pháp nguyên cứu 2

1.4 Các giả thiết, ràng buộc và rủi ro 2

1.5 Kết quả dự kiến đạt được 3

Chương 2: CƠ SỞ LÝ THUYẾT 4

2.1 Tổng quan về MERN stack 4

2.1.1 Khái niệm về MERN stack 4

2.1.2 Các thành phần trong MERN stack 4

2.1.3 Cách thức hoạt động của MERN stack 5

2.1.4 Ưu điểm của MERN Stack 6

2.2 Tổng quan về Node js 6

2.2.1 Khái niệm về Node Js 6

2.2.2 Nguyên tắc hoạt động của Node Js 7

2.2.3 Ưu nhược điểm của Node Js 8

2.3 Tổng quan về Express js 9

2.3.1 Khái niệm về Express Js 9

2.3.2 Công dụng của Express Js 9

2.4 Tổng quan về React js 10

2.4.1 Khái niệm về React Js 10

2.4.2 Kiến trúc của React Js 10

2.4.3 Ưu nhược điểm của React Js 11

2.5.2 Các tính năng của MongoDB 12

2.5.3 Ưu nhược điểm của MongoDB 13

2.6 Tổng quan về kiểm thử tự động 14

2.6.1 Khái niệm về kiểm thử phần mềm 14

2.6.3 Tổng quan về Selenium Webdriver 15

Chương 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 17

3.1.2 Một số website bán sách trên thị trường 17

3.2.2 Các yêu cầu phi chức năng 25

3.2.3 Ma trận quyền – Permission matrix 26

Chương 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 29

4.1 Phân tích yêu cầu chức năng 29

4.1.3 Chức năng xem trang chủ 29

4.1.5 Chức năng đổi mật khẩu 30

4.1.6 Chức năng quên mật khẩu 31

4.1.7 Chức năng chỉnh sửa thông tin 31

4.1.8 Chức năng tìm kiếm sản phẩm 31

4.1.9 Chức năng xem chi tiết sách 32

4.1.10 Chức năng xem danh mục 32

4.1.11 Chức năng lọc sản phẩm 32

4.1.12 Chức năng quản lý giỏ hàng 33

4.1.13 Chức năng quản lý đơn hàng 33

4.1.15 Chức năng quản lý User 34

4.1.16 Chức năng quản lý danh mục 35

4.1.17 Chức năng quản lý sản phẩm 35

4.1.18 Chức năng quản lý đơn đơn hàng (admin) 36

4.1.19 Chức năng đánh giá, bình luận sản phẩm 36

4.1.20 Chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

4.2.1 Thiết kế usecase tổng quát 39

4.2.2 Thiết kế chức năng đăng ký 39

4.2.3 Thiết kế chức năng đăng nhập 44

4.2.3 Thiết kế chức năng xem trang chủ 47

4.2.4 Thiết kế chức năng đăng xuất 50

4.2.5 Thiết kế chức năng đổi mật khẩu 52

4.2.6 Thiết kế chức năng quên mật khẩu 55

4.2.7 Thiết kế chức năng chỉnh sửa thông tin 59

4.2.8 Thiết kế chức năng tìm kiếm sản phẩm 61

4.2.9 Thiết kế chức năng xem chi tiết sách 64

4.2.10 Thiết kế chức năng xem danh mục 66

4.2.11 Thiết kế chức năng lọc sản phẩm 69

4.2.12 Thiết kế chức năng quản lý giỏ hàng 71

4.2.13 Thiết kế chức năng quản lý đơn hàng 76

4.2.14 Thiết kế chức năng thanh toán 82

4.2.15 Thiết kế chức năng quản lý user 84

4.2.16 Thiết kế chức năng quản lý danh mục 90

4.2.17 Thiết kế chức năng quản lý sản phẩm 96

4.2.18 Thiết kế chức năng quản lý đơn hàng (admin) 102

4.2.19 Thiết kế chức năng đánh giá, bình luận 108

4.2.20 Thiết kế chắc năng quản lý khuyến mãi 112

4.2.21 Thiết kế chức thống kê 118

4.3 Thiết kế cơ sở dữ liệu 123

4.3.1 Sơ đồ thiết kế dữ liệu 123

4.3.2 Mô tả sơ đồ thiết kế dữ liệu 124

4.4.3 Màn hình đăng ký và đăng nhập 136

4.4.4 Màn hình trang sản phẩm 139

4.4.5 Màn hình quản lý giỏ hàng 143

4.4.6 Màn hình quản lý thông tin 146

4.4.7 Màn hình quản lý user 149

4.4.8 Màn hình quản lý danh mục 152

4.4.9 Màn hình quản lý sản phẩm 154

4.4.10 Màn hình quản lý đơn hàng 156

4.4.11 Màn hình thêm sản phẩm 158

4.4.12 Màn hình chi tiết sản phẩm 161

4.4.13 Màn hình hiển thị thông tin nhận hàng 164

4.4.14 Màn hình đánh giá, bình luận sản phẩm 165

4.5 Thiết kế lược đồ lớp 173

Chương 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 174

5.2.1 Hướng dẫn thanh toán paypal 174

5.2.2 Hướng dẫn thanh toán vnpay 176

5.3.3 Kiểm thử tự động sử dụng Selenium 190

5.4.1 API đăng nhập – phương thức POST 191

5.4.2 API đăng ký – phương thức POST 192

5.4.3 API lấy thông tin sản phẩm – phương thức GET 192

5.4.4 API tạo user mới – phương thức POST 193

5.4.5 API chỉnh sửa user – phương thức PUT 194

5.4.6 API thêm sản phẩm – phương thức POST 195

5.4.7 API chỉnh sửa sản phẩm – phương thức PUT 196

5.4.8 API thêm danh mục – phương thức POST 197

5.4.9 API lấy thông tin đơn hàng – phương thức GET 197

Hình 2.1 Cấu trúc hoạt động MERN stack [1] 5

Hình 2.2 Sơ đồ hoạt động Node JS [2] 8

Hình 2.3 Sơ đồ hoạt động Node JS [3] 11

Hình 3.1 Giao diện trang chủ website Tiki [4] 17

Hình 3.2 Giao diện trang chủ website Fahasa [5] 19

Hình 3.3 Giao diện trang chủ website Vinabook [6] 20

Hình 3.4 Giao diện trang chủ website Shopee [7] 21

Hình 3.5 Giao diện trang chủ website Newshop [8] 22

Hình 3.6 Sơ đồ nghiệp vụ 28

Hình 4.3 Sequence đăng ký tài khoản 42

Hình 4.4 Activity đăng ký tài khoản 43

Hình 4.8 Usecase xem trang chủ 48

Hình 4.9 Sequence xem trang chủ 49

Hình 4.10 Activity xem trang chủ 49

Hình 4.14 Usecase đổi mật khẩu 52

Hình 4.15 Sequence đổi mật khẩu 53

Hình 4.16 Activity đổi mật khẩu 54

Hình 4.17 Usecase quên mật khẩu 55

Hình 4.18 Sequence quên mật khẩu 57

Hình 4.19 Activity quên mật khẩu 58

Hình 4.20 Usecase chỉnh sửa thông tin 59

Hình 4.21 Sequence chỉnh sửa thông tin 60

Hình 4.22 Activity chỉnh sửa thông tin 61

Hình 4.26 Usecase xem chi tiết sách 64

Hình 4.27 Sequence xem chi tiết thông tin sản phẩm 65

Hình 4.28 Activity xem chi tiết thông tin sản phẩm 66

Hình 4.29 Usecase xem danh mục sản phẩm 66

Hình 4.30 Sequence xem danh mục sản phẩm 68

Hình 4.31 Activity xem danh mục sản phẩm 68

Hình 4.32 Usecase lọc sản phẩm 69

Hình 4.33 Sequence lọc sản phẩm 70

Hình 4.34 Activity lọc sản phẩm 71

Hình 4.35 Usecase quản lý giỏ hàng 71

Hình 4.36 Sequence thêm sản phẩm vào giỏ hàng 74

Hình 4.37 Sequence sửa giỏ hàng 74

Hình 4.38 Sequence xoá khỏi giỏ hàng 75

Hình 4.39 Activity quản lí giỏ hàng 75

Hình 4.40 Usecase quản lý đơn hàng 76

Hình 4.41 Sequence xem đơn hàng 79

Hình 4.42 Sequence xem chi tiết đơn hàng 79

Hình 4.43 Sequence huỷ đơn hàng 80

Hình 4.44 Activity xem danh sách đơn hàng 80

Hình 4.45 Activity xem chi tiết đơn hàng 81

Hình 4.46 Activity huỷ đơn hàng 81

Hình 4.48 Sequence thanh toán đơn hàng 83

Hình 4.49 Activity thanh toán đơn hàng 83

Hình 4.50 Usecase quản lý user 84

Hình 4.57 Usecase quản lý danh mục 90

Hình 4.58 Sequence thêm danh mục sách 93

Hình 4.59 Sequence sửa danh mục sách 93

Hình 4.60 Sequence xoá danh mục sách 94

Hình 4.61 Activity thêm danh muc sách 94

Hình 4.62 Activity sửa danh muc sách 95

Hình 4.63 Activity xoá danh mục sách 95

Hình 4.64 Usecase quản lý sản phẩm 96

Hình 4.66 Sequence sửa chi tiết sách 100

Hình 4.68 Activity thêm sản phẩm 101

Hình 4.69 Activity sửa sản phẩm 101

Hình 4.70 Activity xoá sản phẩm 102

Hình 4.71 Usecase quản lí đơn hàng 103

Hình 4.72 Sequence xem đơn hàng 105

Hình 4.73 Sequence xem chi tiết đơn hàng 106

Hình 4.74 Sequence thay đổi trạng thái đơn hàng 106

Hình 4.75 Activity chuyển trạng thái đơn hàng 107

Hình 4.76 Activity xem chi tiết đơn hàng 107

Hình 4.77 Usecase đánh giá, bình luận 108

Hình 4.78 Sequence đánh giá, bình luận 111

Hình 4.79 Activity đánh giá, bình luận 112

Hình 4.80 Usecase quản lý khuyến mãi 113

Hình 4.81 Sequence thêm mã khuyến mãi 115

Hình 4.82 Sequence sửa mã khuyến mãi 116

Hình 4.83 Sequence xoá mã khuyến mãi 116

Hình 4.84 Activity thêm mã khuyến mãi 117

Hình 4.85 Activity sửa mã khuyến mãi 117

Hình 4.86 Activity xoá khuyễn mãi 118

Hình 4.90 Sơ đồ thiết kế dữ liệu 123

Hình 4.91 Thiết kế giao diện header 129

Hình 4.92 Thiết kế xử lý header 130

Hình 4.93 Thiết kế giao diện footer 131

Hình 4.94 Thiết kế xử lý footer 133

Hình 4.95 Thiết kế giao diện trang chủ 134

Hình 4.96 Thiết kế xử lý trang chủ 135

Hình 4.97 Thiết kế giao đăng ký và đăng nhập 136

Hình 4.98 Thiết kế xử lý đăng ký và đăng nhập 137

Hình 4.99 Thiết kế giao diện trang sản phẩm 139

Hình 4.100 Thiết kế xử lý trang sản phẩm 141

Hình 4.101 Thiết kế giao diện quản lí giỏ hàng 143

Hình 4.102 Thiết kế xử lý quản lí giỏ hàng 145

Hình 4.103 Thiết kế giao diện quản lý thông tin 146

Hình 4.104 Thiết kế xử lý quản lý thông tin 148

Hình 4.105 Thiết kế giao diện quản lý user 149

Hình 4.106 Thiết kế xử lý quản lý user 151

Hình 4.107 Thiết kế giao diện quản lý danh mục 152

Hình 4.108 Thiết kế xử lý quản lý danh mục 153

Hình 4.109 Thiết kế giao diện quản lý sản phẩm 154

Hình 4.110 Thiết kế xử lý quản lý sản phẩm 155

Hình 4.111 Thiết kế giao diện quản lý đơn hàng 157

Hình 4.112 Thiết kế xử lý quản lý đơn hàng 158

Hình 4.113 Thiết kế giao diện thêm sản phẩm 159

Hình 4.114 Thiêt kế xử lý chi tiết sản phẩm 161

Hình 4.115 Thiết kế giao diện chi tiết sản phẩm 162

Hình 4.116 Thiết kế xử lý chi tiết sản phẩm 163

Hình 4.117 Thiết kế giao diện hiển thị thông tin nhận hàng 164

Hình 4.118 Thiết kế xử lý hiển thị thông tin nhận hàng 165

Hình 4.119 Thiêt kế giao diện đánh giá, bình luận sản phẩm 166

Hình 4.120 Thiết kế xử lý đánh giá, bình luận sản phẩm 167

Hình 4.121 Thiết kế giao diện thống kê 168

Hình 4.122 Thiết kế xử lý thống kê 169

Hình 4.123 Thiết kế giao diện khuyến mãi 171

Hình 4.124 Thiết kế xử lý khuyến mãi 172

Hình 5.1 Màn hình nhập tên tài khoản paypal 175

Hình 5.2 Màn hình nhập mật khẩu tài khoản paypal 175

Hình 5.3 Màn hình chọn hình thức thanh toán 176

Hình 5.4 Màn hình thanh toán thành công 176

Hình 5.5 Màn hình chọn hình thanh toán vnpay 177

Hình 5.6 Màn hình ngân hàng thanh toán 177

Hình 5.7 Màn hình nhập thông tin tài khoản 178

Hình 5.8 Màn hình nhập mã OTP 178

Hình 5.11 API lấy thông tin sản phẩm 193

Hình 5.12 API tạo user mới 194

Hình 5.13 API chỉnh sửa user 195

Hình 5.14 API thêm sản phẩm 196

Hình 5.15 API thêm chỉnh sửa sản phẩm 197

Hình 5.16 API lấy thông tin đơn hàng 197

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro 2

Bảng 3.1 Các yêu cầu phi chức năng 25

Bảng 3.2 Bảng chú thích ký hiệu 26

Bảng 3.3 Ma trận quyền – Permission matrix 26

Bảng 4.1 Yêu cầu chức năng đăng ký 29

Bảng 4.2 Yêu cầu chức năng đăng nhập 29

Bảng 4.3 Yêu cầu chức năng xem màn trang chủ 30

Bảng 4.4 Yêu cầu chức năng đăng xuất 30

Bảng 4.5 Yêu cầu chức năng đổi mật khẩu 30

Bảng 4.6 Yêu cầu chức năng quên mật khẩu 31

Bảng 4.7 Yêu cầu chức năng chỉnh sửa thông tin 31

Bảng 4.8 Yêu cầu chức năng tìm kiếm 31

Bảng 4.9 Yêu cầu chức năng xem chi tết sách 32

Bảng 4.10 Yêu cầu chức năng xem danh mục 32

Bảng 4.11 Yêu cầu chức năng xem danh mục 32

Bảng 4.12 Yêu cầu chức năng quản lý giỏ hàng 33

Bảng 4.13 Yêu cầu chức năng xem đơn hàng 33

Bảng 4.14 Yêu cầu chức năng thanh toán 34

Bảng 4.15 Yêu cầu chức năng quản lý user 34

Bảng 4.16 Yêu cầu chức năng quản lý danh mục 35

Bảng 4.17 Yêu cầu chức năng quản lý sản phẩm 35

Bảng 4.18 Yêu cầu chức năng quản lý đơn hàng 36

Bảng 4.19 Yêu cầu chức năng đánh giá, bình luận sản phẩm 36

Bảng 4.20 Yêu cầu chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

Bảng 4.21 Yêu cầu chức năng thống kê 38

Bảng 4.22 Usecase đăng ký tài khoản 40

Bảng 4.23 Usecase đăng ký tài khoản bằng google 40

Bảng 4.24 Usecase đăng ký tài khoản bằng facebook 41

Bảng 4.25 Business Rule chức năng đăng ký 42

Bảng 4.26 Mô tả chi tiết Activity digram đăng ký 43

Bảng 4.28 Usecase đăng nhập tài khoản bằng google 45

Bảng 4.29 Usecase đăng nhập bằng facebookk 45

Bảng 4.30 Business Rule chức năng đăng nhập 46

Bảng 4.31 Mô tả chi tiết Activity digram đăng nhập 47

Bảng 4.32 Usecase xem trang chủ 48

Bảng 4.33 Mô tả chi tiết Activity digram xem trang chủ 49

Bảng 4.35 Mô tả chi tiết Activity digram đăng xuất 52

Bảng 4.36 Usecase đổi mật khẩu 52

Bảng 4.37 Business Rule chức năng đổi mật khẩu 53

Bảng 4.38 Mô tả chi tiết Activity diagram đổi mật khẩu 54

Bảng 4.39 Usecase quên mật khẩu 55

Bảng 4.40 Business Rule chức năng quên mật khẩu 56

Bảng 4.41 Mô tả chi tiết Activity digram quên mật khẩu 58

Bảng 4.42 Usecase chỉnh sửa thông tin 59

Bảng 4.43 Mô tả chi tiết Activity digram quên mật khẩu 61

Bảng 4.45 đến 4.70 trình bày các quy tắc kinh doanh và mô tả chi tiết các chức năng trong hệ thống, bao gồm tìm kiếm sản phẩm, xem chi tiết sách, xem danh mục, lọc sản phẩm, và quản lý giỏ hàng Các usecase như thêm vào giỏ hàng, chỉnh sửa giỏ hàng, và xoá khỏi giỏ hàng cũng được nêu rõ Ngoài ra, quy trình quản lý đơn hàng và thanh toán được mô tả chi tiết, cùng với các chức năng thêm, sửa và xoá người dùng Mỗi bảng cung cấp thông tin cần thiết để hiểu rõ các hoạt động trong hệ thống.

Bảng 4.71 đến Bảng 4.95 trình bày các quy tắc kinh doanh và mô tả chi tiết các hoạt động liên quan đến quản lý người dùng, danh mục, sản phẩm và đơn hàng Các usecase như thêm, sửa, xoá danh mục và sản phẩm được mô tả rõ ràng, cùng với các quy tắc quản lý đơn hàng và đánh giá sản phẩm Ngoài ra, các hoạt động liên quan đến mã giảm giá và thống kê người dùng, danh mục cũng được đề cập, tạo thành một hệ thống quản lý toàn diện cho người dùng và sản phẩm.

The article presents a comprehensive overview of various use cases and data collections relevant to payment statistics, order statistics, and user interactions It includes detailed descriptions of activity diagrams, user data collections, product collections, category data, and order management Additionally, the document outlines the design specifications for interface elements such as headers, footers, and homepage layouts, alongside processing details for user login, product pages, cart management, and information management systems Each section is systematically numbered for easy reference, ensuring clarity and organization throughout the content.

Bảng 4.122 đến Bảng 4.141 mô tả chi tiết thiết kế giao diện và xử lý cho các chức năng quản lý trong hệ thống, bao gồm quản lý user, danh mục, sản phẩm, đơn hàng, và các tính năng bổ sung như thêm sản phẩm, hiển thị thông tin nhận hàng, đánh giá sản phẩm, thống kê, và khuyến mãi Mỗi bảng cung cấp cái nhìn sâu sắc về cách thức giao diện và xử lý dữ liệu được triển khai nhằm tối ưu hóa trải nghiệm người dùng và hiệu quả quản lý.

Bảng 5.1 trình bày kiểm thử chức năng đăng ký, trong khi Bảng 5.2 tập trung vào kiểm thử chức năng đăng nhập Bảng 5.3 giới thiệu kiểm thử chức năng quản lý giỏ hàng, tiếp theo là Bảng 5.4 với kiểm thử chức năng quản lý sản phẩm Cuối cùng, Bảng 5.5 đề cập đến kiểm thử chức năng quản lý người dùng.

Trong bài viết này, chúng tôi trình bày các bảng mô tả chi tiết về các API quan trọng trong hệ thống quản lý đơn hàng Bảng 5.6 tập trung vào kiểm thử chức năng quản lý đơn hàng, trong khi Bảng 5.7 và 5.8 mô tả API cho việc đăng nhập và đăng ký người dùng Bảng 5.9 cung cấp thông tin về API lấy thông tin sản phẩm, còn Bảng 5.10 và 5.11 mô tả API để tạo và chỉnh sửa người dùng Bảng 5.12 và 5.13 lần lượt giải thích API thêm và chỉnh sửa sản phẩm Cuối cùng, Bảng 5.14 mô tả API thêm danh mục, và Bảng 5.15 cung cấp thông tin về API lấy thông tin đơn hàng.

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

MERN: MongoDB (M), ExpressJS (E), ReactJS (R) và NodeJS (N)

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tính cấp thiết của đề tài

Tri thức là tài sản quý giá của nhân loại, chủ yếu được lưu giữ trong sách báo Hiện nay, có nhiều cửa hàng và công ty kinh doanh sách báo, vì vậy việc giới thiệu sản phẩm đến tay độc giả trở thành nhu cầu thiết yếu.

Trong thời đại công nghệ 4.0 bùng nổ, hàng triệu người truy cập internet mỗi ngày để tìm kiếm tri thức và nhu cầu mua bán sách báo ngày càng gia tăng Việc phát triển mô hình kinh doanh trực tuyến giúp các cửa hàng và cá nhân thuận tiện hơn trong hoạt động kinh doanh Do đó, việc xây dựng một website bán hàng trực tuyến trở nên cần thiết cho doanh nghiệp, nhà kinh doanh, cửa hàng bán lẻ và cá nhân Kết hợp sách với thương mại điện tử không chỉ đơn giản hóa quy trình mua sách mà còn giúp những cuốn sách quý, sách hay dễ dàng đến tay người đọc Vì vậy, nhóm chúng tôi đã quyết định thử sức xây dựng một website bán sách online.

1.2 Mục đích của đề tài Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” được thực hiện nhằm phục vụ cho việc tạo cho người dùng là khách hàng có thể dễ dàng mua được những cuốn sách mà không phải ra ngoài tìm kiếm Đồng thời trong lúc tình hình dịch bệnh mua bán sách qua website sẽ trở nên an toàn và tiết kiệm thời gian Cũng như tạo điều kiện để các cửa hàng có thể thông qua website giới thiệu, quảng bá sản phẩm của tới tay khách hàng Tạo điều kiện thuận lợi cho việc tìm kiếm khách hàng thân quen và cả những khách hàng ở xa chưa từng sử dụng sản phẩm của cửa hàng Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” đặt ra vấn đề trọng tâm về mục tiêu mà nhóm cần thực hiện được bao gồm: tìm hiểu về MERN Stack và ứng dụng mô hình MERN Stack vào xây dựng một sản phẩm cụ thể là Website bán sách Sản phẩm hoàn thành phải là một ứng dụng website được xây dựng có đầy đủ các thành phần của mô hình MERN Stack

Website cơ bản phải đạt được một số yêu cầu sau:

- Quản lý thông tin tài khoản khách hàng và sản phẩm, đơn hàng

- Quản lý nhật ký mua hàng

- Đăng nhập, đăng ký, giỏ hàng, hoá đơn, quản lý thông tin cá nhân

- Bình luận, đánh giá sản phẩm

1.3 Cách tiếp cận và phương pháp nguyên cứu Đề tài được thực hiện nghiên cứu xoay quanh hai nhóm đối tượng trọng tâm bao gồm: nhóm đối tượng về kiến thức công nghệ và nhóm đối tượng có nhu cầu mua, bán sách

Nhóm đối tượng nghiên cứu về kiến thức công nghệ bao gồm bốn thành phần chính: mã nguồn mở NodeJS, thư viện ReactJS, cơ sở dữ liệu MongoDB và thư viện ExpressJS Ngoài ra, một số thư viện JavaScript hữu ích như JWT (Json Web Token) và bcrypt cũng được đưa vào nhóm nghiên cứu này.

Phạm vi nghiên cứu được xác định một cách tổng quát, giúp người thực hiện nắm bắt các kiến thức cơ bản và áp dụng chúng vào sản phẩm thực tế, đồng thời tránh xa những lý thuyết phức tạp không có tính ứng dụng.

1.4 Các giả thiết, ràng buộc và rủi ro

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro

STT Hạng mục Mô tả

1 Các giả thiết của dự án - Luôn có người có thể thay thế khi có thành viên nhóm bận việc đột xuất

- Hoàn thành dự án sớm hơn mong đợi

- Sản pẩm ra mắt không xảy ra lỗi

2 Các ràng buộc của dự án - Trong thời gian bảo trì nếu có lỗi xảy ra nhóm sẽ chịu trách nhiệm toàn bộ trách nhiệm và khắc phục lỗi

- Sau khi hoàn thành dự án thì nhóm phải xóa toàn bộ dữ liệu đã được thêm trong quá trình thực hiện dự án

- Bên khách hàng không chấp nhận nếu sản phẩm chậm quá 10 ngày, sản phẩm không đảm bảo chất lượng, không đúng yêu cầu ban đầu

- Khi phát sinh thêm yêu cầu khách hàng sẽ phải chi trả thêm chi phí

3 Các rủi ro và hướng xử lý - Rủi ro về mặt kỹ thuật, con người thì khách hàng không chịu trách nhiệm

- Kinh phí có thể sẽ tăng lên trong quá trình thực hiện dự án vì lý do bị trì hoãn dự án từ phía khách hàng

- Thành viên tham gia vào dự án có thể nghỉ hoặc bận đột xuất

- Khách hàng thay đổi yêu cầu đột ngột, cần thêm thời gian để lập lại kế hoạch thực hiện và tính chi phí dự án

1.5 Kết quả dự kiến đạt được

Hiểu biết về MERN Stack và Restful API là rất quan trọng để xây dựng một website bán hàng online Việc nắm vững các kiến thức này sẽ giúp bạn hoàn thành dự án một cách hiệu quả Đồng thời, bạn cũng sẽ được trang bị nền tảng vững chắc để phát triển và áp dụng các kỹ năng này trong tương lai.

Chương 2: CƠ SỞ LÝ THUYẾT

2.1 Tổng quan về MERN stack

2.1.1 Khái niệm về MERN stack

MERN Stack là một ngăn xếp Javascript giúp triển khai ứng dụng web toàn ngăn xếp một cách nhanh chóng và dễ dàng Ngăn xếp này bao gồm bốn công nghệ chính: MongoDB, ExpressJS, React JS và NodeJS.

Bốn công nghệ mạnh mẽ này cung cấp một khuôn khổ end-to-end cho các nhà phát triển, đóng vai trò quan trọng trong việc phát triển ứng dụng web.

2.1.2 Các thành phần trong MERN stack

Thiết kế giao diện

4.6 Thiết kế lược đồ lớp

5 Chương 5: Cài đặt và kiểm thử ứng dụng

STT Thời gian Công việc Ghi chú

1 07/03/2022 – 20/03/2022 Thay đổi GlobalState sang Redux

2 21/03/2022 – 10/04/2022 Chỉnh sửa lại các chức năng

3 11/04/2022 – 24/04/2022 Thiết kế và viết chức năng đánh giá, bình luận

4 25/04/2022 – 15/05/2022 Thiết kế và viết chức năng khuyến mãi

5 16/05/2022 – 29/05/2022 Thiết kế giao diện và viết chức năng thống kê

6 30/05/2022 – 12/06/2022 Viết chắc năng đăng ký nhận thông báo qua email Kiểm tra và sửa lỗi

7 13/06/2022 – 19/06/2022 Viết báo cáo và hoàn chỉnh đồ án

Ngày 16 tháng 06 năm 2022 Người viết đề cương Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

DANH MỤC HÌNH ẢNH I DANH MỤC BẢNG BIỂU VII DANH MỤC CÁC TỪ VIẾT TẮT XIV

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI 1

1.1 Tính cấp thiết của đề tài 1

1.2 Mục đích của đề tài 1

1.3 Cách tiếp cận và phương pháp nguyên cứu 2

1.4 Các giả thiết, ràng buộc và rủi ro 2

1.5 Kết quả dự kiến đạt được 3

Chương 2: CƠ SỞ LÝ THUYẾT 4

2.1 Tổng quan về MERN stack 4

2.1.1 Khái niệm về MERN stack 4

2.1.2 Các thành phần trong MERN stack 4

2.1.3 Cách thức hoạt động của MERN stack 5

2.1.4 Ưu điểm của MERN Stack 6

2.2 Tổng quan về Node js 6

2.2.1 Khái niệm về Node Js 6

2.2.2 Nguyên tắc hoạt động của Node Js 7

2.2.3 Ưu nhược điểm của Node Js 8

2.3 Tổng quan về Express js 9

2.3.1 Khái niệm về Express Js 9

2.3.2 Công dụng của Express Js 9

2.4 Tổng quan về React js 10

2.4.1 Khái niệm về React Js 10

2.4.2 Kiến trúc của React Js 10

2.4.3 Ưu nhược điểm của React Js 11

2.5.2 Các tính năng của MongoDB 12

2.5.3 Ưu nhược điểm của MongoDB 13

2.6 Tổng quan về kiểm thử tự động 14

2.6.1 Khái niệm về kiểm thử phần mềm 14

2.6.3 Tổng quan về Selenium Webdriver 15

Chương 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 17

3.1.2 Một số website bán sách trên thị trường 17

3.2.2 Các yêu cầu phi chức năng 25

3.2.3 Ma trận quyền – Permission matrix 26

Chương 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 29

4.1 Phân tích yêu cầu chức năng 29

4.1.3 Chức năng xem trang chủ 29

4.1.5 Chức năng đổi mật khẩu 30

4.1.6 Chức năng quên mật khẩu 31

4.1.7 Chức năng chỉnh sửa thông tin 31

4.1.8 Chức năng tìm kiếm sản phẩm 31

4.1.9 Chức năng xem chi tiết sách 32

4.1.10 Chức năng xem danh mục 32

4.1.11 Chức năng lọc sản phẩm 32

4.1.12 Chức năng quản lý giỏ hàng 33

4.1.13 Chức năng quản lý đơn hàng 33

4.1.15 Chức năng quản lý User 34

4.1.16 Chức năng quản lý danh mục 35

4.1.17 Chức năng quản lý sản phẩm 35

4.1.18 Chức năng quản lý đơn đơn hàng (admin) 36

4.1.19 Chức năng đánh giá, bình luận sản phẩm 36

4.1.20 Chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

4.2.1 Thiết kế usecase tổng quát 39

4.2.2 Thiết kế chức năng đăng ký 39

4.2.3 Thiết kế chức năng đăng nhập 44

4.2.3 Thiết kế chức năng xem trang chủ 47

4.2.4 Thiết kế chức năng đăng xuất 50

4.2.5 Thiết kế chức năng đổi mật khẩu 52

4.2.6 Thiết kế chức năng quên mật khẩu 55

4.2.7 Thiết kế chức năng chỉnh sửa thông tin 59

4.2.8 Thiết kế chức năng tìm kiếm sản phẩm 61

4.2.9 Thiết kế chức năng xem chi tiết sách 64

4.2.10 Thiết kế chức năng xem danh mục 66

4.2.11 Thiết kế chức năng lọc sản phẩm 69

4.2.12 Thiết kế chức năng quản lý giỏ hàng 71

4.2.13 Thiết kế chức năng quản lý đơn hàng 76

4.2.14 Thiết kế chức năng thanh toán 82

4.2.15 Thiết kế chức năng quản lý user 84

4.2.16 Thiết kế chức năng quản lý danh mục 90

4.2.17 Thiết kế chức năng quản lý sản phẩm 96

4.2.18 Thiết kế chức năng quản lý đơn hàng (admin) 102

4.2.19 Thiết kế chức năng đánh giá, bình luận 108

4.2.20 Thiết kế chắc năng quản lý khuyến mãi 112

4.2.21 Thiết kế chức thống kê 118

4.3 Thiết kế cơ sở dữ liệu 123

4.3.1 Sơ đồ thiết kế dữ liệu 123

4.3.2 Mô tả sơ đồ thiết kế dữ liệu 124

4.4.3 Màn hình đăng ký và đăng nhập 136

4.4.4 Màn hình trang sản phẩm 139

4.4.5 Màn hình quản lý giỏ hàng 143

4.4.6 Màn hình quản lý thông tin 146

4.4.7 Màn hình quản lý user 149

4.4.8 Màn hình quản lý danh mục 152

4.4.9 Màn hình quản lý sản phẩm 154

4.4.10 Màn hình quản lý đơn hàng 156

4.4.11 Màn hình thêm sản phẩm 158

4.4.12 Màn hình chi tiết sản phẩm 161

4.4.13 Màn hình hiển thị thông tin nhận hàng 164

4.4.14 Màn hình đánh giá, bình luận sản phẩm 165

4.5 Thiết kế lược đồ lớp 173

Chương 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 174

5.2.1 Hướng dẫn thanh toán paypal 174

5.2.2 Hướng dẫn thanh toán vnpay 176

5.3.3 Kiểm thử tự động sử dụng Selenium 190

5.4.1 API đăng nhập – phương thức POST 191

5.4.2 API đăng ký – phương thức POST 192

5.4.3 API lấy thông tin sản phẩm – phương thức GET 192

5.4.4 API tạo user mới – phương thức POST 193

5.4.5 API chỉnh sửa user – phương thức PUT 194

5.4.6 API thêm sản phẩm – phương thức POST 195

5.4.7 API chỉnh sửa sản phẩm – phương thức PUT 196

5.4.8 API thêm danh mục – phương thức POST 197

5.4.9 API lấy thông tin đơn hàng – phương thức GET 197

Hình 2.1 Cấu trúc hoạt động MERN stack [1] 5

Hình 2.2 Sơ đồ hoạt động Node JS [2] 8

Hình 2.3 Sơ đồ hoạt động Node JS [3] 11

Hình 3.1 Giao diện trang chủ website Tiki [4] 17

Hình 3.2 Giao diện trang chủ website Fahasa [5] 19

Hình 3.3 Giao diện trang chủ website Vinabook [6] 20

Hình 3.4 Giao diện trang chủ website Shopee [7] 21

Hình 3.5 Giao diện trang chủ website Newshop [8] 22

Hình 3.6 Sơ đồ nghiệp vụ 28

Hình 4.3 Sequence đăng ký tài khoản 42

Hình 4.4 Activity đăng ký tài khoản 43

Hình 4.8 Usecase xem trang chủ 48

Hình 4.9 Sequence xem trang chủ 49

Hình 4.10 Activity xem trang chủ 49

Hình 4.14 Usecase đổi mật khẩu 52

Hình 4.15 Sequence đổi mật khẩu 53

Hình 4.16 Activity đổi mật khẩu 54

Hình 4.17 Usecase quên mật khẩu 55

Hình 4.18 Sequence quên mật khẩu 57

Hình 4.19 Activity quên mật khẩu 58

Hình 4.20 Usecase chỉnh sửa thông tin 59

Hình 4.21 Sequence chỉnh sửa thông tin 60

Hình 4.22 Activity chỉnh sửa thông tin 61

Hình 4.26 Usecase xem chi tiết sách 64

Hình 4.27 Sequence xem chi tiết thông tin sản phẩm 65

Hình 4.28 Activity xem chi tiết thông tin sản phẩm 66

Hình 4.29 Usecase xem danh mục sản phẩm 66

Hình 4.30 Sequence xem danh mục sản phẩm 68

Hình 4.31 Activity xem danh mục sản phẩm 68

Hình 4.32 Usecase lọc sản phẩm 69

Hình 4.33 Sequence lọc sản phẩm 70

Hình 4.34 Activity lọc sản phẩm 71

Hình 4.35 Usecase quản lý giỏ hàng 71

Hình 4.36 Sequence thêm sản phẩm vào giỏ hàng 74

Hình 4.37 Sequence sửa giỏ hàng 74

Hình 4.38 Sequence xoá khỏi giỏ hàng 75

Hình 4.39 Activity quản lí giỏ hàng 75

Hình 4.40 Usecase quản lý đơn hàng 76

Hình 4.41 Sequence xem đơn hàng 79

Hình 4.42 Sequence xem chi tiết đơn hàng 79

Hình 4.43 Sequence huỷ đơn hàng 80

Hình 4.44 Activity xem danh sách đơn hàng 80

Hình 4.45 Activity xem chi tiết đơn hàng 81

Hình 4.46 Activity huỷ đơn hàng 81

Hình 4.48 Sequence thanh toán đơn hàng 83

Hình 4.49 Activity thanh toán đơn hàng 83

Hình 4.50 Usecase quản lý user 84

Hình 4.57 Usecase quản lý danh mục 90

Hình 4.58 Sequence thêm danh mục sách 93

Hình 4.59 Sequence sửa danh mục sách 93

Hình 4.60 Sequence xoá danh mục sách 94

Hình 4.61 Activity thêm danh muc sách 94

Hình 4.62 Activity sửa danh muc sách 95

Hình 4.63 Activity xoá danh mục sách 95

Hình 4.64 Usecase quản lý sản phẩm 96

Hình 4.66 Sequence sửa chi tiết sách 100

Hình 4.68 Activity thêm sản phẩm 101

Hình 4.69 Activity sửa sản phẩm 101

Hình 4.70 Activity xoá sản phẩm 102

Hình 4.71 Usecase quản lí đơn hàng 103

Hình 4.72 Sequence xem đơn hàng 105

Hình 4.73 Sequence xem chi tiết đơn hàng 106

Hình 4.74 Sequence thay đổi trạng thái đơn hàng 106

Hình 4.75 Activity chuyển trạng thái đơn hàng 107

Hình 4.76 Activity xem chi tiết đơn hàng 107

Hình 4.77 Usecase đánh giá, bình luận 108

Hình 4.78 Sequence đánh giá, bình luận 111

Hình 4.79 Activity đánh giá, bình luận 112

Hình 4.80 Usecase quản lý khuyến mãi 113

Hình 4.81 Sequence thêm mã khuyến mãi 115

Hình 4.82 Sequence sửa mã khuyến mãi 116

Hình 4.83 Sequence xoá mã khuyến mãi 116

Hình 4.84 Activity thêm mã khuyến mãi 117

Hình 4.85 Activity sửa mã khuyến mãi 117

Hình 4.86 Activity xoá khuyễn mãi 118

Hình 4.90 Sơ đồ thiết kế dữ liệu 123

Hình 4.91 Thiết kế giao diện header 129

Hình 4.92 Thiết kế xử lý header 130

Hình 4.93 Thiết kế giao diện footer 131

Hình 4.94 Thiết kế xử lý footer 133

Hình 4.95 Thiết kế giao diện trang chủ 134

Hình 4.96 Thiết kế xử lý trang chủ 135

Hình 4.97 Thiết kế giao đăng ký và đăng nhập 136

Hình 4.98 Thiết kế xử lý đăng ký và đăng nhập 137

Hình 4.99 Thiết kế giao diện trang sản phẩm 139

Hình 4.100 Thiết kế xử lý trang sản phẩm 141

Hình 4.101 Thiết kế giao diện quản lí giỏ hàng 143

Hình 4.102 Thiết kế xử lý quản lí giỏ hàng 145

Hình 4.103 Thiết kế giao diện quản lý thông tin 146

Hình 4.104 Thiết kế xử lý quản lý thông tin 148

Hình 4.105 Thiết kế giao diện quản lý user 149

Hình 4.106 Thiết kế xử lý quản lý user 151

Hình 4.107 Thiết kế giao diện quản lý danh mục 152

Hình 4.108 Thiết kế xử lý quản lý danh mục 153

Hình 4.109 Thiết kế giao diện quản lý sản phẩm 154

Hình 4.110 Thiết kế xử lý quản lý sản phẩm 155

Hình 4.111 Thiết kế giao diện quản lý đơn hàng 157

Hình 4.112 Thiết kế xử lý quản lý đơn hàng 158

Hình 4.113 Thiết kế giao diện thêm sản phẩm 159

Hình 4.114 Thiêt kế xử lý chi tiết sản phẩm 161

Hình 4.115 Thiết kế giao diện chi tiết sản phẩm 162

Hình 4.116 Thiết kế xử lý chi tiết sản phẩm 163

Hình 4.117 Thiết kế giao diện hiển thị thông tin nhận hàng 164

Hình 4.118 Thiết kế xử lý hiển thị thông tin nhận hàng 165

Hình 4.119 Thiêt kế giao diện đánh giá, bình luận sản phẩm 166

Hình 4.120 Thiết kế xử lý đánh giá, bình luận sản phẩm 167

Hình 4.121 Thiết kế giao diện thống kê 168

Hình 4.122 Thiết kế xử lý thống kê 169

Hình 4.123 Thiết kế giao diện khuyến mãi 171

Hình 4.124 Thiết kế xử lý khuyến mãi 172

Hình 5.1 Màn hình nhập tên tài khoản paypal 175

Hình 5.2 Màn hình nhập mật khẩu tài khoản paypal 175

Hình 5.3 Màn hình chọn hình thức thanh toán 176

Hình 5.4 Màn hình thanh toán thành công 176

Hình 5.5 Màn hình chọn hình thanh toán vnpay 177

Hình 5.6 Màn hình ngân hàng thanh toán 177

Hình 5.7 Màn hình nhập thông tin tài khoản 178

Hình 5.8 Màn hình nhập mã OTP 178

Hình 5.11 API lấy thông tin sản phẩm 193

Hình 5.12 API tạo user mới 194

Hình 5.13 API chỉnh sửa user 195

Hình 5.14 API thêm sản phẩm 196

Hình 5.15 API thêm chỉnh sửa sản phẩm 197

Hình 5.16 API lấy thông tin đơn hàng 197

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro 2

Bảng 3.1 Các yêu cầu phi chức năng 25

Bảng 3.2 Bảng chú thích ký hiệu 26

Bảng 3.3 Ma trận quyền – Permission matrix 26

Bảng 4.1 Yêu cầu chức năng đăng ký 29

Bảng 4.2 Yêu cầu chức năng đăng nhập 29

Bảng 4.3 Yêu cầu chức năng xem màn trang chủ 30

Bảng 4.4 Yêu cầu chức năng đăng xuất 30

Bảng 4.5 Yêu cầu chức năng đổi mật khẩu 30

Bảng 4.6 Yêu cầu chức năng quên mật khẩu 31

Bảng 4.7 Yêu cầu chức năng chỉnh sửa thông tin 31

Bảng 4.8 Yêu cầu chức năng tìm kiếm 31

Bảng 4.9 Yêu cầu chức năng xem chi tết sách 32

Bảng 4.10 Yêu cầu chức năng xem danh mục 32

Bảng 4.11 Yêu cầu chức năng xem danh mục 32

Bảng 4.12 Yêu cầu chức năng quản lý giỏ hàng 33

Bảng 4.13 Yêu cầu chức năng xem đơn hàng 33

Bảng 4.14 Yêu cầu chức năng thanh toán 34

Bảng 4.15 Yêu cầu chức năng quản lý user 34

Bảng 4.16 Yêu cầu chức năng quản lý danh mục 35

Bảng 4.17 Yêu cầu chức năng quản lý sản phẩm 35

Bảng 4.18 Yêu cầu chức năng quản lý đơn hàng 36

Bảng 4.19 Yêu cầu chức năng đánh giá, bình luận sản phẩm 36

Bảng 4.20 Yêu cầu chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

Bảng 4.21 Yêu cầu chức năng thống kê 38

Bảng 4.22 Usecase đăng ký tài khoản 40

Bảng 4.23 Usecase đăng ký tài khoản bằng google 40

Bảng 4.24 Usecase đăng ký tài khoản bằng facebook 41

Bảng 4.25 Business Rule chức năng đăng ký 42

Bảng 4.26 Mô tả chi tiết Activity digram đăng ký 43

Bảng 4.28 Usecase đăng nhập tài khoản bằng google 45

Bảng 4.29 Usecase đăng nhập bằng facebookk 45

Bảng 4.30 Business Rule chức năng đăng nhập 46

Bảng 4.31 Mô tả chi tiết Activity digram đăng nhập 47

Bảng 4.32 Usecase xem trang chủ 48

Bảng 4.33 Mô tả chi tiết Activity digram xem trang chủ 49

Bảng 4.35 Mô tả chi tiết Activity digram đăng xuất 52

Bảng 4.36 Usecase đổi mật khẩu 52

Bảng 4.37 Business Rule chức năng đổi mật khẩu 53

Bảng 4.38 Mô tả chi tiết Activity diagram đổi mật khẩu 54

Bảng 4.39 Usecase quên mật khẩu 55

Bảng 4.40 Business Rule chức năng quên mật khẩu 56

Bảng 4.41 Mô tả chi tiết Activity digram quên mật khẩu 58

Bảng 4.42 Usecase chỉnh sửa thông tin 59

Bảng 4.43 Mô tả chi tiết Activity digram quên mật khẩu 61

Bảng 4.45 trình bày Business Rule cho chức năng tìm kiếm sản phẩm, trong khi Bảng 4.46 mô tả chi tiết Activity digram liên quan đến việc tìm kiếm Bảng 4.47 và Bảng 4.48 cung cấp thông tin về Usecase và Business Rule cho chức năng xem chi tiết sách Tiếp theo, Bảng 4.49 và Bảng 4.50 giới thiệu Activity digram và Usecase cho việc xem danh mục Bảng 4.53 và Bảng 4.54 đề cập đến Usecase và Business Rule cho chức năng lọc sản phẩm Các Bảng 4.56 đến 4.63 trình bày các Usecase liên quan đến giỏ hàng, bao gồm thêm, chỉnh sửa và xoá sản phẩm, cùng với Business Rule quản lý giỏ hàng Bảng 4.61 đến 4.64 mô tả Usecase và Business Rule cho việc quản lý đơn hàng, bao gồm xem và huỷ đơn hàng Cuối cùng, Bảng 4.66 và Bảng 4.67 đề cập đến Usecase và Activity digram cho quy trình thanh toán, trong khi Bảng 4.68 đến 4.70 cung cấp thông tin về các Usecase liên quan đến quản lý người dùng.

Bảng 4.71 đến Bảng 4.95 trình bày các quy tắc kinh doanh và mô tả chi tiết các hoạt động quản lý người dùng, danh mục, sản phẩm và đơn hàng Các usecase bao gồm thêm, sửa, và xoá danh mục, sản phẩm, và mã giảm giá, cùng với các hoạt động như xem đơn hàng, chuyển trạng thái đơn hàng, và đánh giá sản phẩm Mỗi bảng cung cấp thông tin cụ thể về quy trình và chức năng, từ quản lý người dùng đến thống kê danh mục, giúp tối ưu hóa quy trình làm việc và nâng cao trải nghiệm người dùng.

This article outlines various use cases and detailed descriptions related to payment statistics, order statistics, and user data collections It includes comprehensive information on the design and processing of various interface elements such as headers, footers, and homepages, as well as product pages and shopping cart management Each section is meticulously numbered, detailing the design and processing of user login and registration, product management, and information management The content is structured to facilitate understanding of the system's architecture and functionality, ensuring a clear presentation of the data collections and interface designs.

Bảng 4.122 đến Bảng 4.141 mô tả chi tiết thiết kế giao diện và xử lý cho các chức năng quản lý trong hệ thống, bao gồm quản lý người dùng, danh mục, sản phẩm, đơn hàng, và các tính năng bổ sung như thêm sản phẩm, chi tiết sản phẩm, hiển thị thông tin nhận hàng, đánh giá và bình luận sản phẩm, thống kê, và khuyến mãi Mỗi bảng cung cấp thông tin cụ thể về cách thức hoạt động và giao diện người dùng, nhằm cải thiện trải nghiệm và hiệu quả quản lý trong hệ thống.

Bảng 5.1 trình bày kiểm thử chức năng đăng ký, trong khi Bảng 5.2 tập trung vào kiểm thử chức năng đăng nhập Bảng 5.3 mô tả kiểm thử chức năng quản lý giỏ hàng, và Bảng 5.4 đề cập đến kiểm thử chức năng quản lý sản phẩm Cuối cùng, Bảng 5.5 phân tích kiểm thử chức năng quản lý người dùng.

Bảng 5.6 trình bày kiểm thử chức năng quản lý đơn hàng, trong khi Bảng 5.7 mô tả API đăng nhập Bảng 5.8 cung cấp thông tin về API đăng ký, và Bảng 5.9 mô tả API lấy thông tin sản phẩm Bảng 5.10 tập trung vào API tạo user mới, tiếp theo là Bảng 5.11 với mô tả API chỉnh sửa user Bảng 5.12 giới thiệu API thêm sản phẩm, còn Bảng 5.13 trình bày API chỉnh sửa sản phẩm Bảng 5.14 mô tả API thêm danh mục, và cuối cùng, Bảng 5.15 cung cấp thông tin về API lấy thông tin đơn hàng.

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

MERN: MongoDB (M), ExpressJS (E), ReactJS (R) và NodeJS (N)

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tính cấp thiết của đề tài

Tri thức là tài sản quý giá của nhân loại, chủ yếu được lưu giữ trong sách báo Hiện nay, có nhiều cửa hàng và công ty kinh doanh sách báo, vì vậy việc giới thiệu và phân phối sản phẩm đến tay độc giả trở thành nhu cầu thiết yếu.

Trong bối cảnh công nghệ 4.0 phát triển mạnh mẽ, nhu cầu truy cập internet để tìm hiểu tri thức và mua bán sách báo ngày càng gia tăng Việc phát triển mô hình kinh doanh trực tuyến trở nên cần thiết, giúp các doanh nghiệp, cửa hàng và cá nhân thuận tiện hơn trong việc giao dịch Kết hợp sách với thương mại điện tử không chỉ đơn giản hóa quá trình mua sắm mà còn giúp đưa những cuốn sách quý đến tay độc giả dễ dàng hơn Chính vì vậy, nhóm chúng tôi đã quyết định xây dựng một website bán sách online.

1.2 Mục đích của đề tài Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” được thực hiện nhằm phục vụ cho việc tạo cho người dùng là khách hàng có thể dễ dàng mua được những cuốn sách mà không phải ra ngoài tìm kiếm Đồng thời trong lúc tình hình dịch bệnh mua bán sách qua website sẽ trở nên an toàn và tiết kiệm thời gian Cũng như tạo điều kiện để các cửa hàng có thể thông qua website giới thiệu, quảng bá sản phẩm của tới tay khách hàng Tạo điều kiện thuận lợi cho việc tìm kiếm khách hàng thân quen và cả những khách hàng ở xa chưa từng sử dụng sản phẩm của cửa hàng Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” đặt ra vấn đề trọng tâm về mục tiêu mà nhóm cần thực hiện được bao gồm: tìm hiểu về MERN Stack và ứng dụng mô hình MERN Stack vào xây dựng một sản phẩm cụ thể là Website bán sách Sản phẩm hoàn thành phải là một ứng dụng website được xây dựng có đầy đủ các thành phần của mô hình MERN Stack

Website cơ bản phải đạt được một số yêu cầu sau:

- Quản lý thông tin tài khoản khách hàng và sản phẩm, đơn hàng

- Quản lý nhật ký mua hàng

- Đăng nhập, đăng ký, giỏ hàng, hoá đơn, quản lý thông tin cá nhân

- Bình luận, đánh giá sản phẩm

1.3 Cách tiếp cận và phương pháp nguyên cứu Đề tài được thực hiện nghiên cứu xoay quanh hai nhóm đối tượng trọng tâm bao gồm: nhóm đối tượng về kiến thức công nghệ và nhóm đối tượng có nhu cầu mua, bán sách

Nhóm đối tượng nghiên cứu về kiến thức công nghệ bao gồm bốn thành phần chính: Mã nguồn mở NodeJS, thư viện ReactJS, cơ sở dữ liệu MongoDB và thư viện ExpressJS Ngoài ra, còn có một số thư viện Javascript hữu ích như JWT (Json Web Token) và bcrypt được kết hợp trong nghiên cứu này.

Phạm vi nghiên cứu được xác định một cách tổng quát, giúp người thực hiện nắm bắt các kiến thức chung và áp dụng chúng vào sản phẩm thực tiễn Đề tài không chú trọng vào các lý thuyết phức tạp mà thiếu tính ứng dụng.

1.4 Các giả thiết, ràng buộc và rủi ro

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro

STT Hạng mục Mô tả

1 Các giả thiết của dự án - Luôn có người có thể thay thế khi có thành viên nhóm bận việc đột xuất

- Hoàn thành dự án sớm hơn mong đợi

- Sản pẩm ra mắt không xảy ra lỗi

2 Các ràng buộc của dự án - Trong thời gian bảo trì nếu có lỗi xảy ra nhóm sẽ chịu trách nhiệm toàn bộ trách nhiệm và khắc phục lỗi

- Sau khi hoàn thành dự án thì nhóm phải xóa toàn bộ dữ liệu đã được thêm trong quá trình thực hiện dự án

- Bên khách hàng không chấp nhận nếu sản phẩm chậm quá 10 ngày, sản phẩm không đảm bảo chất lượng, không đúng yêu cầu ban đầu

- Khi phát sinh thêm yêu cầu khách hàng sẽ phải chi trả thêm chi phí

3 Các rủi ro và hướng xử lý - Rủi ro về mặt kỹ thuật, con người thì khách hàng không chịu trách nhiệm

- Kinh phí có thể sẽ tăng lên trong quá trình thực hiện dự án vì lý do bị trì hoãn dự án từ phía khách hàng

- Thành viên tham gia vào dự án có thể nghỉ hoặc bận đột xuất

- Khách hàng thay đổi yêu cầu đột ngột, cần thêm thời gian để lập lại kế hoạch thực hiện và tính chi phí dự án

1.5 Kết quả dự kiến đạt được

Nắm vững kiến thức về MERN Stack và Restful API cùng cách thức hoạt động của chúng Xây dựng thành công một trang web bán hàng trực tuyến dựa trên những kiến thức đã học Trang bị nền tảng vững chắc để mở ra cơ hội phát triển và ứng dụng trong tương lai.

Chương 2: CƠ SỞ LÝ THUYẾT

2.1 Tổng quan về MERN stack

2.1.1 Khái niệm về MERN stack

MERN Stack là một ngăn xếp JavaScript giúp triển khai nhanh chóng và dễ dàng các ứng dụng web toàn ngăn xếp Ngăn xếp này bao gồm bốn công nghệ chính: MongoDB, ExpressJS, React JS và NodeJS.

Bốn công nghệ mạnh mẽ này cung cấp một khuôn khổ end-to-end cho các nhà phát triển, đóng vai trò quan trọng trong việc phát triển ứng dụng website.

2.1.2 Các thành phần trong MERN stack

Thiết kế lược đồ lớp

CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG

Cài đặt ứng dụng

STT Thời gian Công việc Ghi chú

1 07/03/2022 – 20/03/2022 Thay đổi GlobalState sang Redux

2 21/03/2022 – 10/04/2022 Chỉnh sửa lại các chức năng

3 11/04/2022 – 24/04/2022 Thiết kế và viết chức năng đánh giá, bình luận

4 25/04/2022 – 15/05/2022 Thiết kế và viết chức năng khuyến mãi

5 16/05/2022 – 29/05/2022 Thiết kế giao diện và viết chức năng thống kê

6 30/05/2022 – 12/06/2022 Viết chắc năng đăng ký nhận thông báo qua email Kiểm tra và sửa lỗi

7 13/06/2022 – 19/06/2022 Viết báo cáo và hoàn chỉnh đồ án

Ngày 16 tháng 06 năm 2022 Người viết đề cương Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

DANH MỤC HÌNH ẢNH I DANH MỤC BẢNG BIỂU VII DANH MỤC CÁC TỪ VIẾT TẮT XIV

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI 1

1.1 Tính cấp thiết của đề tài 1

1.2 Mục đích của đề tài 1

1.3 Cách tiếp cận và phương pháp nguyên cứu 2

1.4 Các giả thiết, ràng buộc và rủi ro 2

1.5 Kết quả dự kiến đạt được 3

Chương 2: CƠ SỞ LÝ THUYẾT 4

2.1 Tổng quan về MERN stack 4

2.1.1 Khái niệm về MERN stack 4

2.1.2 Các thành phần trong MERN stack 4

2.1.3 Cách thức hoạt động của MERN stack 5

2.1.4 Ưu điểm của MERN Stack 6

2.2 Tổng quan về Node js 6

2.2.1 Khái niệm về Node Js 6

2.2.2 Nguyên tắc hoạt động của Node Js 7

2.2.3 Ưu nhược điểm của Node Js 8

2.3 Tổng quan về Express js 9

2.3.1 Khái niệm về Express Js 9

2.3.2 Công dụng của Express Js 9

2.4 Tổng quan về React js 10

2.4.1 Khái niệm về React Js 10

2.4.2 Kiến trúc của React Js 10

2.4.3 Ưu nhược điểm của React Js 11

2.5.2 Các tính năng của MongoDB 12

2.5.3 Ưu nhược điểm của MongoDB 13

2.6 Tổng quan về kiểm thử tự động 14

2.6.1 Khái niệm về kiểm thử phần mềm 14

2.6.3 Tổng quan về Selenium Webdriver 15

Chương 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 17

3.1.2 Một số website bán sách trên thị trường 17

3.2.2 Các yêu cầu phi chức năng 25

3.2.3 Ma trận quyền – Permission matrix 26

Chương 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 29

4.1 Phân tích yêu cầu chức năng 29

4.1.3 Chức năng xem trang chủ 29

4.1.5 Chức năng đổi mật khẩu 30

4.1.6 Chức năng quên mật khẩu 31

4.1.7 Chức năng chỉnh sửa thông tin 31

4.1.8 Chức năng tìm kiếm sản phẩm 31

4.1.9 Chức năng xem chi tiết sách 32

4.1.10 Chức năng xem danh mục 32

4.1.11 Chức năng lọc sản phẩm 32

4.1.12 Chức năng quản lý giỏ hàng 33

4.1.13 Chức năng quản lý đơn hàng 33

4.1.15 Chức năng quản lý User 34

4.1.16 Chức năng quản lý danh mục 35

4.1.17 Chức năng quản lý sản phẩm 35

4.1.18 Chức năng quản lý đơn đơn hàng (admin) 36

4.1.19 Chức năng đánh giá, bình luận sản phẩm 36

4.1.20 Chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

4.2.1 Thiết kế usecase tổng quát 39

4.2.2 Thiết kế chức năng đăng ký 39

4.2.3 Thiết kế chức năng đăng nhập 44

4.2.3 Thiết kế chức năng xem trang chủ 47

4.2.4 Thiết kế chức năng đăng xuất 50

4.2.5 Thiết kế chức năng đổi mật khẩu 52

4.2.6 Thiết kế chức năng quên mật khẩu 55

4.2.7 Thiết kế chức năng chỉnh sửa thông tin 59

4.2.8 Thiết kế chức năng tìm kiếm sản phẩm 61

4.2.9 Thiết kế chức năng xem chi tiết sách 64

4.2.10 Thiết kế chức năng xem danh mục 66

4.2.11 Thiết kế chức năng lọc sản phẩm 69

4.2.12 Thiết kế chức năng quản lý giỏ hàng 71

4.2.13 Thiết kế chức năng quản lý đơn hàng 76

4.2.14 Thiết kế chức năng thanh toán 82

4.2.15 Thiết kế chức năng quản lý user 84

4.2.16 Thiết kế chức năng quản lý danh mục 90

4.2.17 Thiết kế chức năng quản lý sản phẩm 96

4.2.18 Thiết kế chức năng quản lý đơn hàng (admin) 102

4.2.19 Thiết kế chức năng đánh giá, bình luận 108

4.2.20 Thiết kế chắc năng quản lý khuyến mãi 112

4.2.21 Thiết kế chức thống kê 118

4.3 Thiết kế cơ sở dữ liệu 123

4.3.1 Sơ đồ thiết kế dữ liệu 123

4.3.2 Mô tả sơ đồ thiết kế dữ liệu 124

4.4.3 Màn hình đăng ký và đăng nhập 136

4.4.4 Màn hình trang sản phẩm 139

4.4.5 Màn hình quản lý giỏ hàng 143

4.4.6 Màn hình quản lý thông tin 146

4.4.7 Màn hình quản lý user 149

4.4.8 Màn hình quản lý danh mục 152

4.4.9 Màn hình quản lý sản phẩm 154

4.4.10 Màn hình quản lý đơn hàng 156

4.4.11 Màn hình thêm sản phẩm 158

4.4.12 Màn hình chi tiết sản phẩm 161

4.4.13 Màn hình hiển thị thông tin nhận hàng 164

4.4.14 Màn hình đánh giá, bình luận sản phẩm 165

4.5 Thiết kế lược đồ lớp 173

Chương 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 174

5.2.1 Hướng dẫn thanh toán paypal 174

5.2.2 Hướng dẫn thanh toán vnpay 176

5.3.3 Kiểm thử tự động sử dụng Selenium 190

5.4.1 API đăng nhập – phương thức POST 191

5.4.2 API đăng ký – phương thức POST 192

5.4.3 API lấy thông tin sản phẩm – phương thức GET 192

5.4.4 API tạo user mới – phương thức POST 193

5.4.5 API chỉnh sửa user – phương thức PUT 194

5.4.6 API thêm sản phẩm – phương thức POST 195

5.4.7 API chỉnh sửa sản phẩm – phương thức PUT 196

5.4.8 API thêm danh mục – phương thức POST 197

5.4.9 API lấy thông tin đơn hàng – phương thức GET 197

Hình 2.1 Cấu trúc hoạt động MERN stack [1] 5

Hình 2.2 Sơ đồ hoạt động Node JS [2] 8

Hình 2.3 Sơ đồ hoạt động Node JS [3] 11

Hình 3.1 Giao diện trang chủ website Tiki [4] 17

Hình 3.2 Giao diện trang chủ website Fahasa [5] 19

Hình 3.3 Giao diện trang chủ website Vinabook [6] 20

Hình 3.4 Giao diện trang chủ website Shopee [7] 21

Hình 3.5 Giao diện trang chủ website Newshop [8] 22

Hình 3.6 Sơ đồ nghiệp vụ 28

Hình 4.3 Sequence đăng ký tài khoản 42

Hình 4.4 Activity đăng ký tài khoản 43

Hình 4.8 Usecase xem trang chủ 48

Hình 4.9 Sequence xem trang chủ 49

Hình 4.10 Activity xem trang chủ 49

Hình 4.14 Usecase đổi mật khẩu 52

Hình 4.15 Sequence đổi mật khẩu 53

Hình 4.16 Activity đổi mật khẩu 54

Hình 4.17 Usecase quên mật khẩu 55

Hình 4.18 Sequence quên mật khẩu 57

Hình 4.19 Activity quên mật khẩu 58

Hình 4.20 Usecase chỉnh sửa thông tin 59

Hình 4.21 Sequence chỉnh sửa thông tin 60

Hình 4.22 Activity chỉnh sửa thông tin 61

Hình 4.26 Usecase xem chi tiết sách 64

Hình 4.27 Sequence xem chi tiết thông tin sản phẩm 65

Hình 4.28 Activity xem chi tiết thông tin sản phẩm 66

Hình 4.29 Usecase xem danh mục sản phẩm 66

Hình 4.30 Sequence xem danh mục sản phẩm 68

Hình 4.31 Activity xem danh mục sản phẩm 68

Hình 4.32 Usecase lọc sản phẩm 69

Hình 4.33 Sequence lọc sản phẩm 70

Hình 4.34 Activity lọc sản phẩm 71

Hình 4.35 Usecase quản lý giỏ hàng 71

Hình 4.36 Sequence thêm sản phẩm vào giỏ hàng 74

Hình 4.37 Sequence sửa giỏ hàng 74

Hình 4.38 Sequence xoá khỏi giỏ hàng 75

Hình 4.39 Activity quản lí giỏ hàng 75

Hình 4.40 Usecase quản lý đơn hàng 76

Hình 4.41 Sequence xem đơn hàng 79

Hình 4.42 Sequence xem chi tiết đơn hàng 79

Hình 4.43 Sequence huỷ đơn hàng 80

Hình 4.44 Activity xem danh sách đơn hàng 80

Hình 4.45 Activity xem chi tiết đơn hàng 81

Hình 4.46 Activity huỷ đơn hàng 81

Hình 4.48 Sequence thanh toán đơn hàng 83

Hình 4.49 Activity thanh toán đơn hàng 83

Hình 4.50 Usecase quản lý user 84

Hình 4.57 Usecase quản lý danh mục 90

Hình 4.58 Sequence thêm danh mục sách 93

Hình 4.59 Sequence sửa danh mục sách 93

Hình 4.60 Sequence xoá danh mục sách 94

Hình 4.61 Activity thêm danh muc sách 94

Hình 4.62 Activity sửa danh muc sách 95

Hình 4.63 Activity xoá danh mục sách 95

Hình 4.64 Usecase quản lý sản phẩm 96

Hình 4.66 Sequence sửa chi tiết sách 100

Hình 4.68 Activity thêm sản phẩm 101

Hình 4.69 Activity sửa sản phẩm 101

Hình 4.70 Activity xoá sản phẩm 102

Hình 4.71 Usecase quản lí đơn hàng 103

Hình 4.72 Sequence xem đơn hàng 105

Hình 4.73 Sequence xem chi tiết đơn hàng 106

Hình 4.74 Sequence thay đổi trạng thái đơn hàng 106

Hình 4.75 Activity chuyển trạng thái đơn hàng 107

Hình 4.76 Activity xem chi tiết đơn hàng 107

Hình 4.77 Usecase đánh giá, bình luận 108

Hình 4.78 Sequence đánh giá, bình luận 111

Hình 4.79 Activity đánh giá, bình luận 112

Hình 4.80 Usecase quản lý khuyến mãi 113

Hình 4.81 Sequence thêm mã khuyến mãi 115

Hình 4.82 Sequence sửa mã khuyến mãi 116

Hình 4.83 Sequence xoá mã khuyến mãi 116

Hình 4.84 Activity thêm mã khuyến mãi 117

Hình 4.85 Activity sửa mã khuyến mãi 117

Hình 4.86 Activity xoá khuyễn mãi 118

Hình 4.90 Sơ đồ thiết kế dữ liệu 123

Hình 4.91 Thiết kế giao diện header 129

Hình 4.92 Thiết kế xử lý header 130

Hình 4.93 Thiết kế giao diện footer 131

Hình 4.94 Thiết kế xử lý footer 133

Hình 4.95 Thiết kế giao diện trang chủ 134

Hình 4.96 Thiết kế xử lý trang chủ 135

Hình 4.97 Thiết kế giao đăng ký và đăng nhập 136

Hình 4.98 Thiết kế xử lý đăng ký và đăng nhập 137

Hình 4.99 Thiết kế giao diện trang sản phẩm 139

Hình 4.100 Thiết kế xử lý trang sản phẩm 141

Hình 4.101 Thiết kế giao diện quản lí giỏ hàng 143

Hình 4.102 Thiết kế xử lý quản lí giỏ hàng 145

Hình 4.103 Thiết kế giao diện quản lý thông tin 146

Hình 4.104 Thiết kế xử lý quản lý thông tin 148

Hình 4.105 Thiết kế giao diện quản lý user 149

Hình 4.106 Thiết kế xử lý quản lý user 151

Hình 4.107 Thiết kế giao diện quản lý danh mục 152

Hình 4.108 Thiết kế xử lý quản lý danh mục 153

Hình 4.109 Thiết kế giao diện quản lý sản phẩm 154

Hình 4.110 Thiết kế xử lý quản lý sản phẩm 155

Hình 4.111 Thiết kế giao diện quản lý đơn hàng 157

Hình 4.112 Thiết kế xử lý quản lý đơn hàng 158

Hình 4.113 Thiết kế giao diện thêm sản phẩm 159

Hình 4.114 Thiêt kế xử lý chi tiết sản phẩm 161

Hình 4.115 Thiết kế giao diện chi tiết sản phẩm 162

Hình 4.116 Thiết kế xử lý chi tiết sản phẩm 163

Hình 4.117 Thiết kế giao diện hiển thị thông tin nhận hàng 164

Hình 4.118 Thiết kế xử lý hiển thị thông tin nhận hàng 165

Hình 4.119 Thiêt kế giao diện đánh giá, bình luận sản phẩm 166

Hình 4.120 Thiết kế xử lý đánh giá, bình luận sản phẩm 167

Hình 4.121 Thiết kế giao diện thống kê 168

Hình 4.122 Thiết kế xử lý thống kê 169

Hình 4.123 Thiết kế giao diện khuyến mãi 171

Hình 4.124 Thiết kế xử lý khuyến mãi 172

Hình 5.1 Màn hình nhập tên tài khoản paypal 175

Hình 5.2 Màn hình nhập mật khẩu tài khoản paypal 175

Hình 5.3 Màn hình chọn hình thức thanh toán 176

Hình 5.4 Màn hình thanh toán thành công 176

Hình 5.5 Màn hình chọn hình thanh toán vnpay 177

Hình 5.6 Màn hình ngân hàng thanh toán 177

Hình 5.7 Màn hình nhập thông tin tài khoản 178

Hình 5.8 Màn hình nhập mã OTP 178

Hình 5.11 API lấy thông tin sản phẩm 193

Hình 5.12 API tạo user mới 194

Hình 5.13 API chỉnh sửa user 195

Hình 5.14 API thêm sản phẩm 196

Hình 5.15 API thêm chỉnh sửa sản phẩm 197

Hình 5.16 API lấy thông tin đơn hàng 197

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro 2

Bảng 3.1 Các yêu cầu phi chức năng 25

Bảng 3.2 Bảng chú thích ký hiệu 26

Bảng 3.3 Ma trận quyền – Permission matrix 26

Bảng 4.1 Yêu cầu chức năng đăng ký 29

Bảng 4.2 Yêu cầu chức năng đăng nhập 29

Bảng 4.3 Yêu cầu chức năng xem màn trang chủ 30

Bảng 4.4 Yêu cầu chức năng đăng xuất 30

Bảng 4.5 Yêu cầu chức năng đổi mật khẩu 30

Bảng 4.6 Yêu cầu chức năng quên mật khẩu 31

Bảng 4.7 Yêu cầu chức năng chỉnh sửa thông tin 31

Bảng 4.8 Yêu cầu chức năng tìm kiếm 31

Bảng 4.9 Yêu cầu chức năng xem chi tết sách 32

Bảng 4.10 Yêu cầu chức năng xem danh mục 32

Bảng 4.11 Yêu cầu chức năng xem danh mục 32

Bảng 4.12 Yêu cầu chức năng quản lý giỏ hàng 33

Bảng 4.13 Yêu cầu chức năng xem đơn hàng 33

Bảng 4.14 Yêu cầu chức năng thanh toán 34

Bảng 4.15 Yêu cầu chức năng quản lý user 34

Bảng 4.16 Yêu cầu chức năng quản lý danh mục 35

Bảng 4.17 Yêu cầu chức năng quản lý sản phẩm 35

Bảng 4.18 Yêu cầu chức năng quản lý đơn hàng 36

Bảng 4.19 Yêu cầu chức năng đánh giá, bình luận sản phẩm 36

Bảng 4.20 Yêu cầu chức năng quản lý chương trình khuyến mãi, voucher giảm giá 37

Bảng 4.21 Yêu cầu chức năng thống kê 38

Bảng 4.22 Usecase đăng ký tài khoản 40

Bảng 4.23 Usecase đăng ký tài khoản bằng google 40

Bảng 4.24 Usecase đăng ký tài khoản bằng facebook 41

Bảng 4.25 Business Rule chức năng đăng ký 42

Bảng 4.26 Mô tả chi tiết Activity digram đăng ký 43

Bảng 4.28 Usecase đăng nhập tài khoản bằng google 45

Bảng 4.29 Usecase đăng nhập bằng facebookk 45

Bảng 4.30 Business Rule chức năng đăng nhập 46

Bảng 4.31 Mô tả chi tiết Activity digram đăng nhập 47

Bảng 4.32 Usecase xem trang chủ 48

Bảng 4.33 Mô tả chi tiết Activity digram xem trang chủ 49

Bảng 4.35 Mô tả chi tiết Activity digram đăng xuất 52

Bảng 4.36 Usecase đổi mật khẩu 52

Bảng 4.37 Business Rule chức năng đổi mật khẩu 53

Bảng 4.38 Mô tả chi tiết Activity diagram đổi mật khẩu 54

Bảng 4.39 Usecase quên mật khẩu 55

Bảng 4.40 Business Rule chức năng quên mật khẩu 56

Bảng 4.41 Mô tả chi tiết Activity digram quên mật khẩu 58

Bảng 4.42 Usecase chỉnh sửa thông tin 59

Bảng 4.43 Mô tả chi tiết Activity digram quên mật khẩu 61

Bảng 4.45 đến Bảng 4.70 trình bày các Business Rule và Usecase liên quan đến chức năng tìm kiếm sản phẩm, xem chi tiết sách, danh mục, lọc sản phẩm, quản lý giỏ hàng, quản lý đơn hàng, và thanh toán Mỗi bảng cung cấp mô tả chi tiết Activity digram tương ứng, giúp người dùng hiểu rõ hơn về quy trình và chức năng của từng hoạt động trong hệ thống Các Usecase như thêm, sửa, và xoá user cũng được đề cập, đảm bảo việc quản lý người dùng hiệu quả.

Bảng 4.71 đến 4.95 trình bày chi tiết các Business Rule và Usecase liên quan đến quản lý người dùng, danh mục, sản phẩm, đơn hàng, và mã giảm giá Các mô tả Activity digram cung cấp cái nhìn sâu sắc về quy trình quản lý user (Bảng 4.72), danh mục (Bảng 4.76), sản phẩm (Bảng 4.80), và đơn hàng (Bảng 4.85) Những Usecase như thêm, sửa, và xoá danh mục (Bảng 4.73-4.75), sản phẩm (Bảng 4.77-4.79), và mã giảm giá (Bảng 4.90-4.92) được nêu rõ, cùng với các chức năng đánh giá và bình luận sản phẩm (Bảng 4.86-4.89) Cuối cùng, các bảng thống kê người dùng và danh mục (Bảng 4.94-4.95) đóng vai trò quan trọng trong việc phân tích và tối ưu hóa hoạt động kinh doanh.

This article outlines various data collections and design specifications essential for understanding system functionalities Key sections include detailed descriptions of payment and order statistics (Tables 4.96 and 4.97), as well as comprehensive data models for users, products, categories, orders, and carts (Tables 4.99 to 4.106) Additionally, the document covers interface designs for headers, footers, and the homepage (Tables 4.108 to 4.113), along with processing details for user login, registration, product pages, and shopping cart management (Tables 4.115 to 4.121) These elements are crucial for creating a cohesive user experience and efficient data handling in the system.

Bảng 4.122 đến 4.141 mô tả chi tiết thiết kế giao diện và xử lý cho các chức năng quản lý trong hệ thống Các bảng này bao gồm thiết kế giao diện quản lý user, danh mục, sản phẩm, đơn hàng, cũng như các chức năng thêm sản phẩm, hiển thị thông tin nhận hàng, đánh giá và bình luận sản phẩm Ngoài ra, còn có các bảng liên quan đến thống kê và khuyến mãi, cung cấp cái nhìn tổng quan về cách thức hoạt động và tương tác trong hệ thống quản lý.

Bảng 5.1 trình bày kiểm thử chức năng đăng ký, trong khi Bảng 5.2 tập trung vào kiểm thử chức năng đăng nhập Bảng 5.3 đề cập đến kiểm thử chức năng quản lý giỏ hàng, còn Bảng 5.4 giới thiệu kiểm thử chức năng quản lý sản phẩm Cuối cùng, Bảng 5.5 nêu rõ kiểm thử chức năng quản lý người dùng.

Bảng 5.6 trình bày kiểm thử chức năng quản lý đơn hàng, trong khi Bảng 5.7 mô tả API đăng nhập Bảng 5.8 cung cấp thông tin về API đăng ký, và Bảng 5.9 giải thích API lấy thông tin sản phẩm Bảng 5.10 mô tả API tạo user mới, tiếp theo là Bảng 5.11 với API chỉnh sửa user Bảng 5.12 trình bày API thêm sản phẩm, còn Bảng 5.13 mô tả API chỉnh sửa sản phẩm Bảng 5.14 cung cấp thông tin về API thêm danh mục, và cuối cùng, Bảng 5.15 mô tả API lấy thông tin đơn hàng.

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

MERN: MongoDB (M), ExpressJS (E), ReactJS (R) và NodeJS (N)

Chương 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tính cấp thiết của đề tài

Tri thức là tài sản quý giá của nhân loại, chủ yếu được lưu giữ trong sách báo Hiện nay, có nhiều cửa hàng và công ty kinh doanh sách báo, vì vậy việc giới thiệu sản phẩm đến tay độc giả trở thành nhu cầu thiết yếu.

Ngày nay, sự phát triển mạnh mẽ của công nghệ 4.0 đã dẫn đến hàng triệu người truy cập internet mỗi ngày để tìm kiếm tri thức và nhu cầu mua bán sách báo ngày càng gia tăng Việc phát triển mô hình kinh doanh trực tuyến không chỉ giúp các cửa hàng và cá nhân kinh doanh thuận tiện hơn mà còn là điều cần thiết cho sự tồn tại và phát triển của họ Tạo ra một website bán hàng trực tuyến là bước đi quan trọng cho các doanh nghiệp, nhà kinh doanh, và cửa hàng bán lẻ Kết hợp sách với thương mại điện tử sẽ giúp việc mua sách trở nên đơn giản hơn, mang đến cho độc giả những quyển sách quý giá một cách dễ dàng Chính vì vậy, nhóm chúng tôi đã quyết định xây dựng một website bán sách online để đáp ứng nhu cầu này.

1.2 Mục đích của đề tài Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” được thực hiện nhằm phục vụ cho việc tạo cho người dùng là khách hàng có thể dễ dàng mua được những cuốn sách mà không phải ra ngoài tìm kiếm Đồng thời trong lúc tình hình dịch bệnh mua bán sách qua website sẽ trở nên an toàn và tiết kiệm thời gian Cũng như tạo điều kiện để các cửa hàng có thể thông qua website giới thiệu, quảng bá sản phẩm của tới tay khách hàng Tạo điều kiện thuận lợi cho việc tìm kiếm khách hàng thân quen và cả những khách hàng ở xa chưa từng sử dụng sản phẩm của cửa hàng Đề tài “Xây dựng website bán sách sử dụng công nghệ MERN Stack” đặt ra vấn đề trọng tâm về mục tiêu mà nhóm cần thực hiện được bao gồm: tìm hiểu về MERN Stack và ứng dụng mô hình MERN Stack vào xây dựng một sản phẩm cụ thể là Website bán sách Sản phẩm hoàn thành phải là một ứng dụng website được xây dựng có đầy đủ các thành phần của mô hình MERN Stack

Website cơ bản phải đạt được một số yêu cầu sau:

- Quản lý thông tin tài khoản khách hàng và sản phẩm, đơn hàng

- Quản lý nhật ký mua hàng

- Đăng nhập, đăng ký, giỏ hàng, hoá đơn, quản lý thông tin cá nhân

- Bình luận, đánh giá sản phẩm

1.3 Cách tiếp cận và phương pháp nguyên cứu Đề tài được thực hiện nghiên cứu xoay quanh hai nhóm đối tượng trọng tâm bao gồm: nhóm đối tượng về kiến thức công nghệ và nhóm đối tượng có nhu cầu mua, bán sách

Nhóm đối tượng nghiên cứu về kiến thức công nghệ bao gồm bốn thành phần chính: mã nguồn mở NodeJS, thư viện ReactJS, cơ sở dữ liệu MongoDB và thư viện ExpressJS Ngoài ra, một số thư viện Javascript hữu ích như JWT (Json Web Token) và bcrypt cũng được xem xét trong nghiên cứu này.

Phạm vi nghiên cứu được xác định ở mức độ tổng quát, giúp người thực hiện nắm vững kiến thức chung và áp dụng hiệu quả vào sản phẩm thực tiễn, đồng thời tránh xa những lý thuyết phức tạp không mang tính ứng dụng.

1.4 Các giả thiết, ràng buộc và rủi ro

Bảng 1.1 Các giả thiết, ràng buộc và rủi ro

STT Hạng mục Mô tả

1 Các giả thiết của dự án - Luôn có người có thể thay thế khi có thành viên nhóm bận việc đột xuất

- Hoàn thành dự án sớm hơn mong đợi

- Sản pẩm ra mắt không xảy ra lỗi

2 Các ràng buộc của dự án - Trong thời gian bảo trì nếu có lỗi xảy ra nhóm sẽ chịu trách nhiệm toàn bộ trách nhiệm và khắc phục lỗi

- Sau khi hoàn thành dự án thì nhóm phải xóa toàn bộ dữ liệu đã được thêm trong quá trình thực hiện dự án

- Bên khách hàng không chấp nhận nếu sản phẩm chậm quá 10 ngày, sản phẩm không đảm bảo chất lượng, không đúng yêu cầu ban đầu

- Khi phát sinh thêm yêu cầu khách hàng sẽ phải chi trả thêm chi phí

3 Các rủi ro và hướng xử lý - Rủi ro về mặt kỹ thuật, con người thì khách hàng không chịu trách nhiệm

- Kinh phí có thể sẽ tăng lên trong quá trình thực hiện dự án vì lý do bị trì hoãn dự án từ phía khách hàng

- Thành viên tham gia vào dự án có thể nghỉ hoặc bận đột xuất

- Khách hàng thay đổi yêu cầu đột ngột, cần thêm thời gian để lập lại kế hoạch thực hiện và tính chi phí dự án

1.5 Kết quả dự kiến đạt được

Nắm vững kiến thức về MERN Stack và Restful API là bước đầu tiên để hiểu cách thức hoạt động của chúng Bằng việc áp dụng những kiến thức này, bạn có thể xây dựng một website bán hàng online hoàn chỉnh Điều này không chỉ giúp bạn phát triển kỹ năng mà còn tạo nền tảng vững chắc cho cơ hội nghề nghiệp trong tương lai.

Chương 2: CƠ SỞ LÝ THUYẾT

2.1 Tổng quan về MERN stack

2.1.1 Khái niệm về MERN stack

MERN Stack là một ngăn xếp JavaScript giúp triển khai nhanh chóng và dễ dàng các ứng dụng web toàn ngăn xếp Ngăn xếp này bao gồm bốn công nghệ chính: MongoDB, ExpressJS, ReactJS và NodeJS, tạo thành một giải pháp hoàn chỉnh cho phát triển ứng dụng.

Bốn công nghệ mạnh mẽ này cung cấp một khuôn khổ end-to-end cho các nhà phát triển, đóng vai trò quan trọng trong việc phát triển ứng dụng web.

2.1.2 Các thành phần trong MERN stack

Hướng dẫn thanh toán

5.2.1 Hướng dẫn thanh toán paypal

- Bước 1: Chọn button thanh toán với Paypal

- Bước 2: Nhập tên tài khoản: sb-04fj478059170@personal.example.com

Hình 5.1 Màn hình nhập tên tài khoản paypal

Bước 3: Nhập password: thanhda2000 (Đây là tài khoản test thanh toán trên môi trường dev)

Hình 5.2 Màn hình nhập mật khẩu tài khoản paypal

- Bước 4: Chọn hình thức thanh toán và thanh toán (Pay now)

Hình 5.3 Màn hình chọn hình thức thanh toán

- Bước 5: Đợi thông báo thanh toán thành công và vào kiểm tra đơn hàng

Hình 5.4 Màn hình thanh toán thành công

5.2.2 Hướng dẫn thanh toán vnpay

- Bước 1: Chọn button thanh toán với VnPay

- Bước 2: Web sẽ điều hướng đến trang thanh toán, chọn thanh toán bằng thẻ ATM và tài khoản ngân hàng

Hình 5.5 Màn hình chọn hình thanh toán vnpay

- Bước 3: Chọn ngân hàng NCB – Ngân Hàng Quốc Dân

Hình 5.6 Màn hình ngân hàng thanh toán

- Bước 5: Nhập tên chủ thẻ: NGUYEN VAN A

- Bước 6: Nhập ngày phát hành: 07/15

Hình 5.7 Màn hình nhập thông tin tài khoản

- Bước 7: Chọn thanh toán, sau đó nhập mã OTP: 123456 (Đây là tài khoản test thanh toán trên môi trường dev)

Hình 5.8 Màn hình nhập mã OTP

- Bước 8: Đợi thông báo thanh toán thành công và vào kiểm tra đơn hàng

Kiểm thử phần mềm

Xây dựng kế hoặc kiểm thử:

- Các rủi ro và yếu tố bất ngờ

- Môi trường kiểm thử: trên nhiều trình duyệt khác nhau

- Thực hiện test các testcase với các Actor

5.3.2.1 Kiểm thử chức năng đăng ký

Bảng 5.1 Kiểm thử chức năng đăng ký

Kiểm tra chức năng đăng ký tài khoản user

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

3 Nhập email, tên, password, và confirm password

4 Click button đăng ký Đăng ký thành công

Kiểm tra định dạng email

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

Không thể đăng ký và hiển thị thông báo sai định dạng email

Kiểm tra mật khẩu không đủ 6 ký tự

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

3 Nhập email thiếu “@”, tên, password, confirm password

Không thể đăng ký và hiển thị thông báo mật khẩu không đủ 6 ký tự

Kiểm tra confirm password không trùng khớp

1.Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

Không thể đăng ký và hiển thị thông báo password không trùng khớp

Kiểm tra bỏ trống các trường

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

Yêu cầu nhập lại thông tin đầy đủ tương ứng với từng trường

Kiểm tra nhập vào email đã tồn tại

1 Truy cập vào trang web: https://bookstore-ecommerce- beta.herokuapp.com

Không thể đăng ký và hiển thị thông báo email đã tồn tại

3 Nhập email, tên, password, và confirm password

Kiểm tra việc verify email khi đăng ký xong

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

3 Nhập email, tên, password, và confirm password

Gửi email thành công Pass

5.3.2.2 Kiểm thử chức năng đăng nhập

Bảng 5.2 Kiểm thử chức năng đăng nhập

Kiểm tra khi nhập sai mật khẩu khách hàng không thể đăng nhập

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

Không thể đăng nhập Pass

Kiểm tra khi khách hàng không nhập email hoặc

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

Không và đăng nhập và hiển thị thông báo nhắc nhập

182 mật khẩu sẽ không thể đăng nhâp

3 Click đăng nhập đầy đủ emial và mật khẩu

Kiểm tra khi khách hàng nhập sai định dạng email sẽ không thể đăng nhập

1 Truy cập vào trang web: https://bookstore-ecommerce- beta.herokuapp.com/

3.Click email thiếu “@” và password

Không thể đăng nhập và hiển thị thông báo

Kiểm tra khi khách hàng không nhập sai email sẽ không thể đăng nhập

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

Không thể đăng nhập và hiển thị thông báo

Kiểm tra khi khách thông tin đúng có thể đăng nhập

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

Có thể đăng nhập Pass

5.3.2.3 Kiểm thử chức năng quản lý giỏ hàng

Bảng 5.3 Kiểm thử chức năng quản lý giỏ hàng

Kiểm tra chức năng thêm sản phẩm vào giỏ hàng khi chưa đăng nhập vào tài khoản

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

3 Click chọn 1 cuốn sách bất kì

4 Click chọn Add to cart

Không thể thêm vào giỏ hàng và hiển thị thông báo

Kiểm tra chức năng thêm sản phẩm vào giỏ hàng khi đã đăng nhập vào tài khoản

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

3 Click nhập email và password

6 Click chọn 1 cuốn sách bất 7

Click chọn Add to cart

Kiểm tra chức năng tăng số lượng sản phẩm trong giỏ hàng

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Click nhập email và password

Số hiển thị tăng theo số lượng click

5 Click tăng số lượng sản phẩm

Kiểm tra chức năng giảm số lượng sản phẩm trong giỏ hàng

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Click nhập email và password

5 Click giảm số lượng sản phẩm

Số hiển thị giảm theo số lượng click

Kiểm tra chức năng xoá sản phẩm khỏi giỏ hàng

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

3 Click nhập email và password Click đăng nhập

5 Click icon xoá sản phẩm

Xoá sản phẩm khỏi giỏ hàng thành công

5.3.2.4 Kiểm thử chức năng quản lý sản phẩm

Bảng 5.4 Kiểm thử chức năng quản lý sản phẩm

Kiểm tra chức năng xoá sản phẩm

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Đăng nhập với tài khoản Admin

5 Click icon xoá ở cuối dòng thông tin sản phẩm

Xoá sản phẩm và cập nhật lại trang web

Kiểm tra chức năng hiển thị thông tin sản phẩm theo thời gian

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Đăng nhập với tài khoản Admin

Hiển thị danh sách thông tin sản phẩm theo thứ tự từ cũ đến đến mới nhất

Kiểm tra chức năng tìm kiếm sản phẩm

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

Hiện thông tin về sản phẩm vừa tìm

2 Đăng nhập với tài khoản Admin

5 Nhập vào khung Enter your search

6 Bấm Enter từ bàm phím

5.3.2.5 Kiểm thử chức năng quản lý user

Bảng 5.5 Kiểm thử chức năng quản lý user

Kiểm tra chức năng hiển thị theo Role tài khoản

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Đăng nhập với tài khoản Admin

Hiển thị danh sách thông tin tài khoản của User

Kiểm tra chức năng tìm kiếm email người dùng

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Đăng nhập với tài khoản Admin

Hiện thông tin về tài khoản vừa tìm

6 Bấm Enter từ bàm phím

Kiểm tra chức năng xoá tài khoản người dùng

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Đăng nhập với tài khoản Admin

5 Click icon xoá ở cuối dòng thông tin người dùng

Xoá tài khoản thành công Pass

Kiểm tra hiển thị theo số lượng trên 1 trang

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Đăng nhập với tài khoản Admin

Hiển thị danh sách thông tin tài khoản của

Kiểm tra thao tác chuyển sang trang sau trong

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

Hiển thị danh sách thông tin tài khoản ở trang tiếp theo

2 Đăng nhập với tài khoản Admin

5 Click ">" ở góc dưới bên phải màn hình

Kiểm tra thao tác chỉnh sửa role người dùng

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Đăng nhập với tài khoản Admin

5 Click icon bút chì của 1 user

6 Click chọn lại role thành 1

Chuyển thành công và tài khoản user chuyển thành admin

5.3.2.6 Kiểm thử chức năng quản lý đơn hàng

Bảng 5.6 Kiểm thử chức năng quản lý đơn hàng

Kiểm tra chức năng hiển thị theo trạng thái đơn hàng

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Đăng nhập với tài khoản Admin

Hiển thị danh sách các đơn hàng có trạng thái “Đã Xác Nhận”

5 Chọn Filters Đã Xác Nhận

Kiểm tra chức năng tìm đơn hàng theo tên user

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Đăng nhập với tài khoản Admin

6 Bấm Enter từ bàm phím

Hiện thông tin các đơn hàng về user vừa tìm

Kiểm tra hiển thị theo số lượng trên 1 trang

1 Truy cập vào trang web: https://kltn-bookstore- website.vercel.app/

2 Đăng nhập với tài khoản Admin

Hiển thị danh sách thông tin đơn hàng của User trên 1 trang tối đa 10 đơn

Kiểm tra chức năng thay đổi trạng thái đơn hàng

1 Truy cập vào trang web: https://bookstore-ecommerce- beta.herokuapp.com/

2 Đăng nhập với tài khoản Admin

Trạng thái được chuyển thành công

5.3.3 Kiểm thử tự động sử dụng Selenium

5.3.3.1 Kịch bản kiểm thử tự động Đồ án trình bày một số test case cơ bản bằng Selenium WebDriver và thực hiện báo cáo kết quả Quy trình kiểm thử tự động bao gồm: tester sử dụng các kịch bản tự động (automation scripts) và thực thi các script để chạy ứng dụng với sự giúp sức của các automation tool

Các hoạt động của kiểm thử tự đông:

- Phân tích yêu cầu, xác định môi trường, công cụ kiểm thử

- Xác định tiêu chí đầu ra

- Lên kế hoạch và kiểm soát

- Thiết lập môi trường kiểm thử

- Triển khai thiết kế kiểm thử

Quá trình thực hiện kiểm thử sẽ dựa trên các test case đã được xây dựng cho kiểm thử thủ công Kết quả thực tế sẽ được so sánh với kết quả mong đợi để tiến hành đánh giá hiệu quả kiểm thử.

5.3.3.2 Chức năng kiểm thử tự động

Do hạn chế về kinh nghiệm và thời gian sử dụng công cụ, nhóm đã tiến hành viết và kiểm thử một số chức năng cơ bản.

5 Chuyển đơn hàng đang có trạng thái 'Chờ xác nhận' thành 'Đã xác nhận'

- Chức năng quản lý user: thêm user, chỉnh sửa user và xoá user

- Chức năng quản lý danh mục: thêm danh mục, chỉnh sửa và xoá danh mục

- Chức năng quản lý đơn hàng

- Chức năng quản lý sản phẩm

Danh sách API

5.4.1 API đăng nhập – phương thức POST

Hình 5.9 API đăng nhập Bảng 5.7 Mô tả API đăng nhập

Route Method Request JSON Response JSON Mô tả https://app- bookstore- kltn.herokuapp.co m/user/login

Xác thực tài khoản đăng nhập

5.4.2 API đăng ký – phương thức POST

Hình 5.10 API đăng ký Bảng 5.8 Mô tả API đăng ký

Route Method Request JSON Response JSON Mô tả https://app- bookstore- kltn.herokuapp.co m/user/register

- password: string msg: string Thông báo tạo tài khoản thành công

5.4.3 API lấy thông tin sản phẩm – phương thức GET

Hình 5.11 API lấy thông tin sản phẩm

Bảng 5.9 Mô tả API lấy thông tin sản phẩm

Route Method Request JSON Response JSON Mô tả https://app- bookstore- kltn.herokuapp.co m/api/products/_id

Get product: object Hiển thị thông tin chi tiết sản phẩm

5.4.4 API tạo user mới – phương thức POST

Hình 5.11 API tạo user mới Bảng 5.10 Mô tả API tạo user mới

Route Method Request JSON Response JSON Mô tả https://app- bookstore- kltn.herokuapp.co m/user/create_info r

- role: number msg: string Thông báo tạo tài khoản thành công

5.4.5 API chỉnh sửa user – phương thức PUT

Hình 5.12 API chỉnh sửa user Bảng 5.11 Mô tả API chình sửa user

Route Method Request JSON Response JSON Mô tả https://app- bookstore- kltn.herokuapp.co m/user/create_info r

- role: number msg: string Thông báo tạo tài khoản thành công

5.4.6 API thêm sản phẩm – phương thức POST

Hình 5.13 API thêm sản phẩm Bảng 5.12 Mô tả API thêm sản phẩm

Route Method Request JSON Response JSON Mô tả https://app- bookstore- kltn.herokuapp.co m/api/products

- images: images msg: string Thông báo thêm sản phẩm mới thành công

5.4.7 API chỉnh sửa sản phẩm – phương thức PUT

Hình 5.14 API chỉnh sửa sản phẩm Bảng 5.13 Mô tả API chình sửa sản phẩm

Route Method Request JSON Response JSON Mô tả https://app- bookstore- kltn.herokuapp.co m/user/create_info r

- images: images msg: string Thông báo chỉnh sửa sản phẩm thành công

5.4.8 API thêm danh mục – phương thức POST

Hình 5.15 API thêm danh mục Bảng 5.14 Mô tả API thêm danh mục

Route Method Request JSON Response JSON Mô tả https://app- bookstore- kltn.herokuapp.co m/api/category/

Post - name: string msg: string Thông báo thêm danh mục mới thành công 5.4.9 API lấy thông tin đơn hàng – phương thức GET

Hình 5.16 API lấy thông tin đơn hàng

Bảng 5.15 Mô tả API lấy thông tin đơn hàng

Route Method Request JSON Response JSON Mô tả https://app- bookstore- kltn.herokuapp.co m/api/order

Get order: object Hiển thị thông tin đơn hàng thành công

Ngày đăng: 28/12/2023, 18:50

w