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