Xây dựng website bán thiết bị điện tử
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (7.06 MB, 128 trang )
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH
ĐỒ ÁN TỐT NGHIỆP
NGÀNH CƠNG NGHỆ THÔNG TIN
XÂY DỰNG WEBSITE BÁN THIẾT BỊ ĐIỆN TỬ
GVHD: ThS. NGUYỄN TRẦN THI VĂN
SVTH : HUỲNH LAI PHÚ
NGUYỄN ĐÀM VĨNH KHANG
SKL011419
Tp. Hồ Chí Minh, tháng 07/2023
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN CÔNG NGHỆ PHẦN MỀM
HUỲNH LAI PHÚ
19110428
NGUYỄN ĐÀM VĨNH KHANG
19110374
Đề tài:
XÂY DỰNG WEBSITE BÁN THIẾT BỊ ĐIỆN TỬ
KHÓA LUẬN TỐT NGHIỆP
GIÁO VIÊN HƯỚNG DẪN:
ThS. Nguyễn Trần Thi Văn
KHÓA 2019 - 2023
ĐẠI HỌC SƯ PHẠM KỸ THUẬT HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
KHOA CNTT
Độc lập - Tự do - Hạnh phúc
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên 1: Nguyễn Đàm Vĩnh Khang
MSSV 1: 19110374
Họ và tên Sinh viên 2: Huỳnh Lai Phú
MSSV 2: 19110428
Ngành: Công nghệ Thông tin
Tên đề tài: Xây dựng website bán thiết bị điện tử
Giáo viên hướng dẫn: Nguyễn Trần Thi Văn
NHẬN XÉT
1. Về nội dung đề tài khối lượng thực hiện:
..........................................................................................................................................
..........................................................................................................................................
2. Ưu điểm:
...........................................................................................................................................
...........................................................................................................................................
3. Khuyết điểm
......................................................................................................................................................
......................................................................................................................................................
4. Đề nghị cho bảo vệ hay không ?
...........................................................................................................................................
...........................................................................................................................................
5. Đánh giá loại : ..............................................................................................................
6. Điểm : .............................................. Bằng chữ ...........................................................
Tp. Hồ Chí Minh, ngày … tháng 07 năm 2023
Giáo viên hướng dẫn
(Ký & ghi rõ họ tên)
ĐẠI HỌC SƯ PHẠM KỸ THUẬT HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
KHOA CNTT
Độc lập - Tự do - Hạnh phúc
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên Sinh viên 1 : Nguyễn Đàm Vĩnh Khang
MSSV 1: 19110374
Họ và tên Sinh viên 2 : Huỳnh Lai Phú
MSSV 2: 19110428
Ngành: Công nghệ Thông tin
Tên đề tài: Xây dựng website bán thiết bị điện tử
Giáo viên phản biện: Huỳnh Xuân Phụng
NHẬN XÉT
7. Về nội dung đề tài khối lượng thực hiện:
..........................................................................................................................................
..........................................................................................................................................
8. Ưu điểm:
...........................................................................................................................................
...........................................................................................................................................
9. Khuyết điểm
......................................................................................................................................................
......................................................................................................................................................
10. Đề nghị cho bảo vệ hay không ?
...........................................................................................................................................
...........................................................................................................................................
11. Đánh giá loại : ............................................................................................................
12. Điểm :............................................. Bằng chữ ...........................................................
Tp. Hồ Chí Minh, ngày … tháng 07 năm 2023
Giáo viên phản biện
(Ký & ghi rõ họ tên)
Trường Đại học Sư phạm Kỹ thuật TP.HCM
Khoa Công nghệ Thông tin
ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
Họ và Tên SV thực hiện 1: Nguyễn Đàm Vĩnh Khang Mã Số SV: 19110374
Họ và Tên SV thực hiện 2: Huỳnh Lai Phú
Mã Số SV: 19110428
Thời gian làm luận văn: Từ 14/03/2022 đến 05/07/2022.
Chuyên ngành: Công nghệ phần mềm
Tên luận văn: Xây dựng website bán thiết bị điện tử
Giảng viên hướng dẫn: ThS. Nguyễn Trần Thi Văn
Nhiệm vụ của luận văn:
1. Lý thuyết:
Tìm hiểu về các công nghệ: ReactJS, Node Js, MongoDB, JSON WebToken.
2. Thực hành:
-
Sử dụng NodeJs và ExpressJS để xây dựng Backend, viết API cho các module
trong hệ thống.
-
Sử dụng MongoDB để lưu trữ dữ liệu người dùng của hệ thống.
-
Sử dụng JSON Web Token để xác thực và ủy quyền cho hệ thống API với Redis
quản lý các token.
-
Sử dụng thư viện React để thiết kế và xử lý giao diện web cho người dùng sử
dụng.
Đề cương viết luận văn:
MỤC LỤC
1. Phần MỞ ĐẦU
1.1. Tính cấp thiết của đề tài
1.2. Mục tiêu của đề tài
1.3. Đối tượng nghiên cứu
1.4. Phương pháp nghiên cứu
1.5. Ý nghĩa khoa học và thực tiễn
2. Phần NỘI DUNG
1. Chương 1: CƠ SỞ LÝ THUYẾT
1.1. ReactJS
1.2. NodeJS
1.3. MongoDB
2. Chương 2: KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HĨA U CẦU
2.1. Khảo sát hiện trạng
2.2. Xác định u cầu
2.3. Mơ hình hóa u cầu
3. Chương 3: THIẾT KẾ PHẦN MỀM
3.1. Lược đồ lớp
3.2. Lược đồ tuần tự
3.3. Thiết kế cơ sở dữ liệu
3.4. Thiết kế giao diện
4. Chương 4: CÀI ĐẶT VÀ KIỂM THỬ
4.1. Công cụ dùng trong dự án
4.2. Cài đặt ứng dụng
4.3. Kiểm thử
3. Phần KẾT LUẬN
4. Tài liệu tham khảo
KẾ HOẠCH THỰC HIỆN
STT
1
2
3
Thời gian
14/03/2022 –
20/03/2022
21/03/2022 –
07/04/2022
08/04/2022 –
Công việc
-
Khảo sát hiện trạng.
-
Thiết kế usecase và mơ hình hóa u cầu.
-
Thiết kế cơ sở dữ liệu.
-
Tìm hiểu về NodeJS và ExpressJS
-
Tìm hiểu về MongoDB để áp dụng vào lưu
trữ dữ liệu.
-
của đề tài
17/04/2022
-
4
18/04/2022 –
08/05/2022
Tìm hiểu về React và cách tổ chức thư mục
Tiến hành phát triển API dựa trên các kiến
thức đã tìm hiểu được và các tài liệu.
-
Tiến hành xây dựng giao diện người dùng
cho hệ thống.
5
6
7
09/05/2022 –
-
09/06/2022
09/06/2022 –
20/06/2022
21/06/2022 –
07/07/2022
Kết hợp các phần đã xây dựng lại với nhau
(giao diện và API).
-
Kiểm thử chương trình và tiến hành sửa lỗi.
-
Viết và hoàn thiện báo cáo.
Ghi chú
LỜI CẢM ƠN
Lời cảm ơn đầu tiên nhóm thực hiện đồ án xin gửi đến giảng viên hướng dẫn là thầy
Nguyễn Trần Thi Văn – người đã tận tình chỉ dẫn, hỗ trợ và giải đáp thắc mắc của nhóm
trong suốt q trình thực hiện đồ án.
Nhóm em cũng xin chân thành cảm ơn các thầy cô giáo trong trường Đại học sư
Phạm Kỹ Thuật TP.HCM nói chung, các thầy cơ trong khoa CNTT nói riêng đã dạy dỗ
cho chúng em kiến thức về các môn đại cương cũng như các mơn chun ngành, giúp
chúng em có được cơ sở lý thuyết vững vàng và tạo điều kiện giúp đỡ chúng em trong
suốt quá trình học tập.
Với điều kiện thời gian cũng như kinh nghiệm cịn hạn chế thì đồ án này khơng thể
tránh được những thiếu sót. Do đó, nhóm em mong sẽ nhận được sự góp ý chân thành
của thầy cơ. Những ý kiến đóng góp về đề tài sẽ được nhóm em tiếp nhận để cải thiện
đồ án cũng như tích lũy thêm kinh nghiệm khi làm các đề tài nghiên cứu khác.
Cuối cùng một lần nữa chúng em xin gửi lời cảm ơn sâu sắc nhất đến với thầy Nguyễn
Trần Thi Văn và tập thể quý thầy (cô) Khoa Công Nghệ Thông Tin – Trường Đại Học
Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh. Chúc các thầy cơ có sức khỏe thật tốt.
Nhóm thực hiện
Nguyễn Đàm Vĩnh Khang – 19110374
Huỳnh Lai Phú - 19110428
MỤC LỤC
MỤC LỤC ....................................................................................................................... 6
PHẦN MỞ ĐẦU ............................................................................................................. 1
1. GIỚI THIỆU ĐỀ TÀI .......................................................................................... 1
2. MỤC TIÊU CỦA ĐỀ TÀI .................................................................................. 1
3. ĐỐI TƯỢNG NGHIÊN CỨU ............................................................................. 1
4. PHƯƠNG PHÁP NGHIÊN CỨU ....................................................................... 1
5. Ý NGHĨA KHOA HỌC THỰC TIỄN ................................................................ 2
PHẦN NỘI DUNG.......................................................................................................... 3
CHƯƠNG 1. CƠ SỞ LÝ THUYẾT ................................................................................ 3
1.1. REACTJS ......................................................................................................... 3
1.1.1. Giới thiệu ............................................................................................... 3
1.1.2. Ưu điểm ................................................................................................. 3
1.1.3. Nhược điểm ........................................................................................... 3
1.1.4. Các thư viện sử dụng trong đồ án:......................................................... 4
1.2. NODEJS ........................................................................................................... 5
1.2.1. Giới thiệu ............................................................................................... 5
1.2.2. Ưu điểm ................................................................................................. 5
1.2.3. Nhược điểm ........................................................................................... 5
1.2.4. ExpressJs ............................................................................................... 5
1.3. MONGODB ..................................................................................................... 6
1.3.1. Giới thiệu ............................................................................................... 6
1.3.2. Ưu điểm ................................................................................................. 6
1.3.3. Nhược điểm ........................................................................................... 6
CHƯƠNG 2. KHẢO SÁT HIỆN TRẠNG ..................................................................... 7
2.1. KHẢO SÁT HIỆN TRẠNG ............................................................................. 7
2.1.1. Thegioididong........................................................................................ 7
2.1.2. Gearvn ................................................................................................... 7
2.1.3. Kết luận ................................................................................................. 8
2.2. XÁC ĐỊNH YÊU CẦU .................................................................................... 8
2.2.1. Nghiệp vụ .............................................................................................. 8
2.2.2. Phạm vi .................................................................................................. 9
2.2.3. Nội dung .............................................................................................. 10
2.3. MÔ HÌNH HĨA HỆ THỐNG........................................................................ 10
2.3.1. Danh sách các Actor ............................................................................ 10
2.3.2. Sơ đồ Usecase ...................................................................................... 11
2.3.3. Danh sách Usecase .............................................................................. 11
2.4. ĐẶC TẢ MỘT SỐ USECASE CHÍNH ......................................................... 13
2.4.1. Quyền Admin ...................................................................................... 13
2.4.2. Quyền User .......................................................................................... 31
CHƯƠNG 3. THIẾT KẾ PHẦN MỀM ........................................................................ 44
3.1. THIẾT KẾ HỆ THỐNG ................................................................................. 44
3.1.1 Sơ đồ lớp............................................................................................... 44
3.1.2 Sơ đồ tuần tự ......................................................................................... 45
3.1.3 Thiết kế dữ liệu ..................................................................................... 51
3.2. THIẾT KẾ GIAO DIỆN ................................................................................. 51
3.3.1. Danh sách giao diện............................................................................. 51
CHƯƠNG 4. CÀI ĐẶT VÀ KIỂM THỬ ..................................................................... 91
4.1. CÀI ĐẶT ........................................................................................................ 91
4.2. CÁC BƯỚC CHẠY HỆ THỐNG .................................................................. 91
4.3. KIỂM THỬ HỆ THỐNG ............................................................................... 91
4.3.1. Quyền người dùng ............................................................................... 91
4.3.2. Quyền quản trị ................................................................................... 102
PHẦN KẾT LUẬN ..................................................................................................... 110
1. KẾT QUẢ ĐẠT ĐƯỢC .................................................................................. 110
1.1. Về mặt lý thuyết ................................................................................... 110
1.2. Về mặt hiện thực................................................................................... 110
1.3. Ưu điểm ................................................................................................ 111
1.4. Nhược điểm .......................................................................................... 111
2. HƯỚNG PHÁT TRIỂN .................................................................................. 111
DANH MỤC THAM KHẢO ...................................................................................... 112
DANH MỤC HÌNH ẢNH
Hình 1 . Giao diện trang thegioididong ........................................................................... 7
Hình 2 . Giao diện trang Gearvn ..................................................................................... 8
Hình 3 . Sơ đồ Use case ................................................................................................. 11
Hình 4 . Sơ đồ lớp.......................................................................................................... 44
Hình 5 . Lược đồ tuần tự chức năng đăng nhập bằng điện thoại................................... 45
Hình 6 . Lược đồ tuần tự chức năng đăng nhập bằng email.......................................... 46
Hình 7 . Lược đồ tuần tự chức năng đăng nhập bằng tài khoản Google ....................... 47
Hình 8 . Lược đồ tuần tự chức năng sắp xếp, lọc sản phẩm.......................................... 47
Hình 9 . Lược đồ tuần tự chức năng đánh giá sản phẩm ............................................... 48
Hình 10 . Lược đồ tuần tự chức năng quản lý thông tin cá nhân .................................. 49
Hình 11 . Lược đồ tuần tự chức năng thêm sản phẩm vào giỏ hàng ............................. 49
Hình 12 . Lược đồ tuần tự chức năng quản lý giỏ hàng ................................................ 50
Hình 13 . Lược đồ tuần tự chức năng đặt hàng ............................................................. 50
Hình 14 . Lược đồ thực thể ERD ................................................................................... 51
Hình 15 . Màn hình Dashboard ..................................................................................... 54
Hình 16 . Màn hình quản lý người dùng ....................................................................... 55
Hình 17 . Màn hình biểu mẫu thêm mới, chỉnh sửa người dùng ................................... 56
Hình 18 . Màn hình biểu mẫu xác nhận xóa người dùng .............................................. 57
Hình 19 . Màn hình quản lý đơn hàng ........................................................................... 58
Hình 20 . Màn hình chi tiết đơn hàng ............................................................................ 59
Hình 21 . Màn hình biểu mẫu cập nhật trạng thái đơn hàng ......................................... 59
Hình 22 . Màn hình quản lý đánh giá ............................................................................ 60
Hình 23 . Màn hình chi tiết đánh giá ............................................................................. 61
Hình 24 . Màn hình quản lý sản phẩm........................................................................... 62
Hình 25 . Màn hình biểu mẫu thêm mới, chỉnh sửa sản phẩm ...................................... 63
Hình 26 . Màn hình biểu mẫu xác nhận xóa sản phẩm ................................................. 64
Hình 27 . Màn hình quản lý mã giảm giá ...................................................................... 65
Hình 28 . Màn hình biểu mẫu thêm mới, chỉnh sửa mã giảm giá ................................. 66
Hình 29 . Màn hình biểu mẫu xác nhận xóa mã giảm giá ............................................. 67
Hình 30 . Màn hình quản lý loại sản phẩm.................................................................... 68
Hình 31 . Màn hình biểu mẫu thêm mới, chỉnh sửa loại sản phẩm ............................... 69
Hình 32 . Màn hình biểu mẫu xác nhận xóa loại sản phẩm .......................................... 70
Hình 33 . Màn hình quản lý thương hiệu sản phẩm ...................................................... 70
Hình 34 . Màn hình biểu mẫu thêm mới, chỉnh sửa thương hiệu sản phẩm ................. 71
Hình 35 . Màn hình biểu mẫu xác nhận xóa thương hiệu sản phẩm ............................. 72
Hình 36 . Màn hình trang chủ ........................................................................................ 74
Hình 37 . Màn hình đăng nhập ...................................................................................... 75
Hình 38 . Màn hình đăng nhập bằng số điện thoại ........................................................ 76
Hình 39 . Màn hình đăng nhập bằng email ................................................................... 77
Hình 40 . Màn hình danh sách sản phẩm....................................................................... 77
Hình 41 . Màn hình chi tiết sản phẩm ........................................................................... 80
Hình 42 . Màn hình giỏ hàng ......................................................................................... 81
Hình 43 . Màn hình đặt hàng ......................................................................................... 83
Hình 44 . Màn hình quản lý thơng tin cá nhân .............................................................. 84
Hình 45 . Màn hình thay đổi số điện thoại .................................................................... 85
Hình 46 . Màn hình thay đổi email ................................................................................ 86
Hình 47 . Màn hình thay đổi mật khẩu .......................................................................... 86
Hình 48 . Màn hình quản lý đơn hàng ........................................................................... 87
Hình 49 . Màn hình chi tiết đơn hàng ............................................................................ 88
Hình 50 . Màn hình quản lý số địa chỉ .......................................................................... 88
Hình 51 . Màn hình biểu mẫu thêm mới, chỉnh sửa địa chỉ .......................................... 89
Hình 52 . Màn hình biểu mẫu xác nhận xóa địa chỉ ...................................................... 90
DANH MỤC BẢNG BIỂU
Bảng 1 . Mô tả Use case ................................................................................................ 11
Bảng 2 . Mô tả Use case Đăng nhập Admin ................................................................. 13
Bảng 3 . Mô tả Use case Đăng xuất Admin .................................................................. 13
Bảng 4 . Mô tả Use case Xem danh sách sản phẩm ...................................................... 14
Bảng 5 . Mô tả Use case Thêm sản phẩm...................................................................... 15
Bảng 6 . Mô tả Use case Cập nhật sản phẩm ................................................................ 15
Bảng 7 . Mơ tả Use case Xóa sản phẩm ........................................................................ 16
Bảng 8 . Mô tả Use case Xem danh sách người dùng ................................................... 17
Bảng 9 . Mô tả Use case Thêm người dùng .................................................................. 17
Bảng 10 . Mô tả Use case Cập nhật người dùng ........................................................... 18
Bảng 11 . Mô tả Use case Xóa người dùng ................................................................... 19
Bảng 12 . Mơ tả Use case Xem danh sách đánh giá ...................................................... 20
Bảng 13 . Mơ tả Use case Xóa đánh giá ........................................................................ 20
Bảng 14 . Mô tả Use case Xem danh sách đơn hàng .................................................... 21
Bảng 15 . Mô tả Use case Cập nhật trạng thái đơn hàng............................................... 22
Bảng 16 . Mô tả Use case Xem danh sách mã giảm giá................................................ 23
Bảng 17 . Mô tả Use case Thêm mã giảm giá ............................................................... 23
Bảng 18 . Mô tả Use case Cập nhật mã giảm giá .......................................................... 24
Bảng 19 . Mô tả Use case Xóa mã giảm giá .................................................................. 25
Bảng 20 . Mơ tả Use case Xem danh sách loại sản phẩm ............................................. 25
Bảng 21 . Mô tả Use case Thêm loại sản phẩm ............................................................ 26
Bảng 22 . Mô tả Use case Cập nhật loại sản phẩm ....................................................... 27
Bảng 23 . Mô tả Use case Xóa loại sản phẩm ............................................................... 28
Bảng 24 . Mô tả Use case Xem danh sách nhãn hàng ................................................... 28
Bảng 25 . Mô tả Use case Thêm nhãn hàng .................................................................. 29
Bảng 26 . Mô tả Use case Cập nhật nhãn hàng ............................................................. 30
Bảng 27 . Mô tả Use case Xóa nhãn hàng ..................................................................... 31
Bảng 28 . Mơ tả Use case Đăng ký ............................................................................... 31
Bảng 29 . Mô tả Use case Đăng nhập ............................................................................ 32
Bảng 30 . Mô tả Use case Đăng xuất............................................................................. 33
Bảng 31 . Mô tả Use case Xem thông tin cá nhân......................................................... 34
Bảng 32 . Mô tả Use case Cập nhật thông tin cá nhân .................................................. 34
Bảng 33 . Mô tả Use case Xem lịch sử đơn hàng.......................................................... 35
Bảng 34 . Mô tả Use case Xem danh sách sản phẩm u thích .................................... 35
Bảng 35 . Mơ tả Use case Xem địa chỉ.......................................................................... 36
Bảng 36 . Mô tả Use case Thêm địa chỉ ........................................................................ 37
Bảng 37 . Mô tả Use case Cập nhật địa chỉ ................................................................... 37
Bảng 38 . Mơ tả Use case Xóa địa chỉ ........................................................................... 38
Bảng 39 . Mô tả Use case Xem danh sách sản phẩm .................................................... 39
Bảng 40 . Mô tả Use case Xem chi tiết sản phẩm ......................................................... 39
Bảng 41 . Mô tả Use case Xem thông tin giỏ hàng ....................................................... 40
Bảng 42 . Mơ tả Use case Xóa sản phẩm khỏi giỏ hàng ............................................... 41
Bảng 43 . Mô tả Use case Thêm sản phẩm vào giỏ hàng .............................................. 41
Bảng 44 . Mô tả Use case Cập nhật số lượng sản phẩm trong giỏ hàng ....................... 42
Bảng 45 . Mô tả Danh sách giao diện ............................................................................ 51
Bảng 46 . Mô tả giao diện Dashboard ........................................................................... 54
Bảng 47 . Mô tả giao diện quản lý người dùng ............................................................. 55
Bảng 48 . Mô tả giao diện biểu mẫu thêm mới, chỉnh sửa người dùng ........................ 56
Bảng 49 . Mô tả giao diện biểu mẫu xác nhận xóa người dùng .................................... 57
Bảng 50 . Mô tả giao diện quản lý đơn hàng................................................................. 58
Bảng 51 . Mô tả giao diện chi tiết đơn hàng ................................................................. 59
Bảng 52 . Mô tả giao diện biểu mẫu cập nhật trạng thái đơn hàng ............................... 59
Bảng 53 . Mô tả giao diện quản lý đánh giá .................................................................. 60
Bảng 54 . Mô tả giao diện chi tiết đánh giá ................................................................... 61
Bảng 55 . Mô tả giao diện quản lý sản phẩm ................................................................ 62
Bảng 56 . Mô tả giao diện biểu mẫu thêm mới, chỉnh sửa sản phẩm............................ 63
Bảng 57 . Mơ tả giao diện biểu mẫu xác nhận xóa sản phẩm ....................................... 64
Bảng 58 . Mô tả giao diện quản lý mã giảm giá ............................................................ 65
Bảng 59 . Mô tả giao diện biểu mẫu thêm mới, chỉnh sửa mã giảm giá ....................... 66
Bảng 60 . Mô tả giao diện biểu mẫu xác nhận xóa mã giảm giá ................................... 67
Bảng 61 . Mô tả giao diện quản lý loại sản phẩm ......................................................... 68
Bảng 62 . Mô tả giao diện biểu mẫu thêm mới, chỉnh sửa loại sản phẩm..................... 69
Bảng 63 . Mơ tả giao diện biểu mẫu xác nhận xóa loại sản phẩm ................................ 70
Bảng 64 . Mô tả giao diện quản lý thương hiệu sản phẩm ............................................ 70
Bảng 65 . Mô tả giao diện biểu mẫu thêm mới, chỉnh sửa thương hiệu sản phẩm ....... 71
Bảng 66 . Mô tả giao diện biểu mẫu xác nhận xóa thương hiệu sản phẩm ................... 72
Bảng 67 . Mô tả giao diện trang chủ ............................................................................. 74
Bảng 68 . Mô tả giao diện đăng nhập ............................................................................ 75
Bảng 69 . Mô tả giao diện đăng nhập bằng số điện thoại.............................................. 76
Bảng 70 . Mô tả giao diện đăng nhập bằng email ......................................................... 77
Bảng 71 . Mô tả giao diện danh sách sản phẩm ............................................................ 78
Bảng 72 . Mô tả giao diện chi tiết sản phẩm ................................................................. 80
Bảng 73 . Mô tả giao diện giỏ hàng............................................................................... 81
Bảng 74 . Mô tả giao diện đặt hàng ............................................................................... 83
Bảng 75 . Mô tả giao diện quản lý thông tin cá nhân .................................................... 84
Bảng 76 . Mô tả giao diện thay đổi số điện thoại .......................................................... 85
Bảng 77 . Mô tả giao diện thay đổi email...................................................................... 86
Bảng 78 . Mô tả giao diện thay đổi mật khẩu................................................................ 87
Bảng 79 . Mô tả giao diện quản lý đơn hàng................................................................. 87
Bảng 80 . Mô tả giao diện chi tiết đơn hàng ................................................................. 88
Bảng 81 . Mô tả giao diện quản lý số địa chỉ ................................................................ 88
Bảng 82 . Mô tả giao diện biểu mẫu thêm mới, chỉnh sửa địa chỉ ................................ 89
Bảng 83 . Mô tả giao diện biểu mẫu xác nhận xóa địa chỉ ............................................ 90
Bảng 84 . Kiểm thử đăng nhập ...................................................................................... 91
Bảng 85 . Kiểm thử thêm sản phẩm vào giỏ hàng......................................................... 93
Bảng 86 . Kiểm thử đặt hàng ......................................................................................... 94
Bảng 87 . Kiểm thử cập nhật thông tin cá nhân ............................................................ 95
Bảng 88 . Kiểm thử cập nhật số điện thoại.................................................................... 96
Bảng 89 . Kiểm thử cập nhật mật khẩu ......................................................................... 97
Bảng 90 . Kiểm thử liên kết tài khoản Google .............................................................. 97
Bảng 91 . Kiểm thử thêm địa chỉ ................................................................................... 98
Bảng 92 . Kiểm thử thêm sản phẩm vào danh sách yêu thích ....................................... 99
Bảng 93 . Kiểm thử thêm đánh giá sản phẩm................................................................ 99
Bảng 94 . Kiểm thử thêm thảo luận đánh giá .............................................................. 100
Bảng 95 . Kiểm thử sản phẩm theo tên ....................................................................... 101
Bảng 96 . Kiểm thử lọc sản phẩm theo giá tiền và số sao ........................................... 101
Bảng 97 . Kiểm thử thêm sản phẩm mới ..................................................................... 102
Bảng 98 . Kiểm thử cập nhật trạng thái đơn hàng ....................................................... 103
Bảng 99 . Kiểm thử cập nhật mã giảm giá .................................................................. 103
Bảng 100 . Kiểm thử hiển thị các yêu cầu xác thực dữ liệu khi thêm, cập nhật ......... 104
Bảng 101 . Kiểm thử xem chi tiết đơn hàng ................................................................ 105
Bảng 102 . Kiểm thử xóa người dùng ......................................................................... 105
Bảng 103 . Kiểm thử chặn người dùng truy cập vào hệ thống .................................... 106
Bảng 104 . Kiểm thử tìm kiếm thương hiệu theo tên .................................................. 107
Bảng 105 . Kiểm thử lọc sản phẩm theo giá tiền, loại sản phẩm và số sao................. 108
Bảng 106 . Kiểm thử sắp xếp đánh giá theo sản phẩm ............................................... 108
Phần mở đầu
PHẦN MỞ ĐẦU
1. GIỚI THIỆU ĐỀ TÀI
Ngày nay, Internet đã trở thành dịch vụ phổ biến và thiết yếu đối với thói quen, sinh
hoạt, giải trí của nhiều người. Cùng với sự phát triển nhanh chóng đó, các hình thức
mua bán trực tuyến ngày càng đa dạng và phát triển hơn. Trước nhu cầu đó, nhóm
chúng em quyết định chọn đề tài Xây dựng Website bán hàng trực tuyến, cụ thể là
bán thiết bị điện tử.
2. MỤC TIÊU CỦA ĐỀ TÀI
‐
Xây dựng một hệ thống bán thiết bị điện tử trực tuyến thân thiện, dễ sử dụng,
cho phép khách hàng dùng mua sắm các thiết bị điện tử online một cách dễ dàng
với các chức năng cơ bản như đăng nhập, xem sản phẩm, đặt hàng, thanh toán,
...
‐
Hỗ trợ quản trị viên quản lý sản phẩm, người dùng, đơn hàng … rõ ràng, linh
hoạt bằng các thao tác cơ bản.
3. ĐỐI TƯỢNG NGHIÊN CỨU
Trong đề tài này nhóm em đã tìm hiểu và áp dụng những cơng nghệ sau để xây dựng
các chức năng:
‐
Front-end: Ứng dụng web xây dựng bởi ReactJS.
‐
Back-end: Nền tảng NodeJs và Express.
‐
Database: sử dụng MongoDB.
4. PHƯƠNG PHÁP NGHIÊN CỨU
Phương pháp tổng hợp lý thuyết:
‐
Các kiến thức được nghiên cứu, tìm hiểu dựa trên các tài liệu, website có liên
quan.
Phương pháp chuyên gia:
‐
Tham khảo ý kiến đóng góp từ giáo viên hướng dẫn, bạn bè về các vấn đề công
nghệ, tư duy logic, kinh nghiệm thực tiễn trong q trình thực hiện tiểu luận để
có thể thiết kế website đáp ứng đúng yêu cầu đề tài, thân thiện với người dùng.
1
Phần mở đầu
5. Ý NGHĨA KHOA HỌC THỰC TIỄN
‐
Website thiết kế dựa theo có giao diện đơn
giản, dễ nhìn và bố cục phân bố hợp lý.
‐
Website bao gồm các chức năng tương đối đầy đủ của một trang web bán hàng
cơ bản.
2
Chương 1 Cơ sở lý thuyết
PHẦN NỘI DUNG
CHƯƠNG 1. CƠ SỞ LÝ THUYẾT
1.1. REACTJS
1.1.1. Giới thiệu
ReactJS là một thư viện mã nguồn mở được phát triển bởi Facebook, ra mắt vào
năm 2013, bản thân nó là một thư viện giao diện Javascript được dùng để để xây
dựng các tương tác với các thành phần trên website. Nó giúp tạo ra các ứng dụng
web ấn tượng đòi hỏi nỗ lực và mã hóa tối thiểu. Mục tiêu chính của ReactJS là phát
triển Giao diện người dùng (UI) giúp cải thiện tốc độ của ứng dụng.
1.1.2. Ưu điểm
‐
React hoạt động trên kiến trúc dựa trên components, nó cho phép tạo các ứng
dụng “single-page” có khả năng mở rộng cao, hiệu suất cao, đổng thời dễ dàng
tái sử dụng và quản lý các components một cách độc lập.
‐
React sử dụng “virtual DOM” giúp tăng tốc độ, tối ưu hóa hiệu suất, tăng khả
năng SEO của website.
‐
React không chỉ là một thư viện tốt để xây dựng giao diện người dùng mà nó
cịn được hỗ trợ bởi React Developer Tools, một tiện ích mở rộng trình duyệt có
sẵn cho cả Google Chrome và Mozilla Firefox.
‐
Có cộng đồng người dùng sử dụng đơng đảo hiện nay với nhiều thư viện hỗ trợ,
dễ dàng sử dụng, cập nhật liên tục.
1.1.3. Nhược điểm
‐
ReactJS không là một Framework mà là một thư viện JavaScript phong phú với
một tập hợp các tính năng tương tác và hữu ích cần thiết để tạo các ứng dụng
quy mô lớn. Theo kiến trúc MVC (Model View Controller), React chỉ xử lý
phần view, đối với controller và model , bạn cần các thư viện và cơng cụ bổ
sung, điều này có thể dẫn đến cấu trúc code kém.
‐
Các công nghệ mới, cập nhật liên tục và tăng tốc nhanh cũng khiến nguồn tài
liệu phù hợp cịn hạn chế, khơng kịp cung cấp đầy đủ cũng như cịn nhiều thiếu
sót.
3
Chương 1 Cơ sở lý thuyết
‐
ReactJS là thư viện thích hợp cho những ứng dụng cần mở rộng, quy mô lớn
chứ không dành cho những ứng dụng nhỏ.
1.1.4. Các thư viện sử dụng trong đồ án:
1.1.4.1. Tanstack React Table
‐
Giúp hiển thị giao diện người dùng bảng trong React bao gồm hiển thị dữ liệu,
hỗ trợ các tính năng cơ bản như sắp xếp, lọc và phân trang, hỗ trợ linh động cả
dữ liệu tĩnh và động.
‐
Khả năng mở rộng dễ dàng; có thể tùy chỉnh, xây dựng các tính năng của riêng
mình dựa trên React Table.
‐
Được áp dụng trong hầu hết tất cả các bảng dữ liệu của đồ án giúp quản trị viên
dễ dàng thao tác, tra cứu dữ liệu hệ thống. Đồng thời cũng hỗ trợ đầy đủ các tính
năng xem, thêm, cập nhật, xóa dữ liệu (CRUD), đồng thời hỗ trợ sắp xếp, tìm
kiếm, lọc, phân trang dữ liệu.
1.1.4.2. React Hook Form
‐
React Hook Form hỗ trợ biểu mẫu dễ dàng, cho phép bạn xây dựng các biểu
mẫu hoạt động hiệu quả, linh hoạt và có thể mở rộng. Thư viện rất nhe do không
yêu cầu các phần phụ thuộc, đồng thời sử dụng ref thay vì state để tăng tốc hiệu
suất.
‐
Với React Hook Form, bạn có thể cô lập một thành phần và tránh để các thành
phần khác re-render. Sử dụng tính năng này, các thành phần con khác sẽ không
được hiển thị theo cách không mong muốn, điều này sẽ cải thiện hiệu suất.
‐
Được áp dụng trong hầu hết tất cả các biểu mẫu của đồ án giúp hạn chế re-render
các components liên tục khi nhập dữ liệu, tăng hiệu suất cho website. Đồng thời
giúp cải thiện code, xác thực dữ liệu nhập, xử lý lỗi, …, đồng thời dễ dàng tích
hợp với các thư viện khác để hỗ trợ biểu mẫu như React-select, Material UI, …
1.1.4.3. Yup
‐
Yup là thư viện giúp xác thực lược đồ đối tượng trong Javascript. Yup làm cho
ứng dụng trở nên dễ dàng hơn trong việc kiểm tra dữ liệu mà không cần can
thiệp vào logic. Lược đồ Yup cho phép mơ hình hóa các xác thực phức tạp, phụ
thuộc lẫn nhau hoặc chuyển đổi giá trị.
4
Chương 1 Cơ sở lý thuyết
‐
Được áp dụng vào đồ án để xác thực giá trị cho các trường dữ liệu được nhập
vào biểu mẫu. Yup giúp xác thực, thông báo lỗi theo lược đồ xác thực, đồng thời
dễ dàng kết hợp với React Hook Form khiến biểu mẫu trở lên linh hoạt, dễ dàng
quản lý.
1.1.4.4. Các thư viện khác
‐
Recharts: Hỗ trợ vẽ biểu đồ, thống kê doanh thu sản phẩm.
‐
Swiper: Là một thư viện mã nguồn mở giúp thao tác tạo, xem slider, carousel
một cách dễ dàng.
‐
…
1.2. NODEJS
1.2.1. Giới thiệu
NodeJS là một nền tảng được xây dựng trên V8 JavaScript Engine – trình thơng dịch
thực thi mã JavaScript, giúp xây dựng các ứng dụng web một cách đơn giản và dễ
dàng mở rộng. NodeJS được phát triển để có thể chạy trên nhiều hệ điều hành khác
nhau: OS X, Microsoft Windows, Linux.
1.2.2. Ưu điểm
-
Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non-blocking). Bạn có thể
dễ dàng xử lý hàng ngàn kết nối trong khoảng thời gian ngắn nhất.
-
Dễ dàng mở rộng khi có nhu cầu phát triển ứng dụng.
-
Nhận và xử lý nhiều kết nối chỉ với một single-thread. Nhờ đó, hệ thống xử lý sẽ
sử dụng ít lượng RAM nhất và giúp q trình xử Nodejs lý nhanh hơn rất nhiều.
-
Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất.
-
Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất.
-
NodeJS được viết bằng JavaScript với cộng đồng người dùng đông đảo với nhiều
thư viện hỗ trợ dễ dàng.
1.2.3. Nhược điểm
Nodejs gây hao tốn tài nguyên và thời gian. Nodejs được viết bằng C++ và
JavaScript nên khi xử lý cần phải trải qua một quá trình biên dịch. Nếu cần xử lý
những ứng dụng tốn tài ngun CPU thì khơng nên sử dụng Nodejs.
1.2.4. ExpressJs
5
