Tải bản đầy đủ (.pdf) (122 trang)

Xây dựng website kinh doanh linh kiện máy tính sử dụng nodejs và reactjs

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 (6.61 MB, 122 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 KINH DOANH LINH KIỆN MÁY TÍNH
SỬ DỤNG NODEJS VÀ REACTJS

GVHD: TS. LÊ VĂN VINH
SVTH : NGUYỄN CAO TRÍ
NGUYỄN HỮU TÍN

SKL011160

Tp. Hồ Chí Minh, tháng 8/2023


BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HCM
KHOA CƠNG NGHỆ THƠNG TIN

KHĨA LUẬN TỐT NGHIỆP
ĐỀ TÀI
XÂY DỰNG WEBSITE KINH DOANH LINH KIỆN MÁY
TÍNH SỬ DỤNG NODEJS VÀ REACTJS
GIẢNG VIÊN HƯỚNG DẪN: TS LÊ VĂN VINH
SINH VIÊN THỰC HIỆN:
NGUYỄN CAO TRÍ


19110482

NGUYỄN HỮU TÍN

19110474

KHỐ 2019

Thành phố Hồ Chí Minh năm 2023


ĐH SƯ PHẠM KỸ THUẬT TP. HCM

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

KHOA CÔNG NGHỆ THÔNG TIN

Độ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 Cao Trí

MSSV 1: 19110482

Họ và tên Sinh viên 2: Nguyễn Hữu Tín


MSSV 2: 19110474

Ngành: Công nghệ Thông tin
Tên đề tài: Xây dựng website kinh doanh linh kiện máy tính sử dụng NodeJS và
ReactJS
Họ và tên Giáo viên hướng dẫn: TS. Lê Văn Vinh
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:
...................................................................................................................................................
Tp. Hồ Chí Minh, ngày

tháng

Giáo viên hướng dẫn
(Ký & ghi rõ họ tên)

năm 2023



ĐH SƯ PHẠM KỸ THUẬT TP. HCM

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

KHOA CÔNG NGHỆ THÔNG TIN

Độ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 Cao Trí

MSSV 1: 19110482

Họ và tên Sinh viên 2: Nguyễn Hữu Tín

MSSV 2: 19110474

Ngành: Công nghệ Thông tin
Tên đề tài: Xây dựng website kinh doanh linh kiện máy tính sử dụng NodeJS và
ReactJS
Họ và tên Giáo viên phản biện: ThS. Trương Thị Ngọc Phượng
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:
...................................................................................................................................................
Tp. Hồ Chí Minh, ngày

tháng

Giáo viên phản biện
(Ký & ghi rõ họ tên)

năm 2023


LỜI CẢM ƠN
Để hoàn thành tốt đề tài và bài báo cáo này, chúng em xin gửi lời cảm
ơn chân thành đến giảng viên, thầy Lê Văn Vinh, người đã trực tiếp hỗ trợ
chúng em trong suốt quá trình làm đề tài. Chúng em cảm ơn thầy đã đưa ra
những lời khuyên từ kinh nghiệm thực tiễn của mình để định hướng cho
chúng em đi đúng với yêu cầu của đề tài đã chọn, luôn giải đáp thắc mắc và
đưa ra những góp ý, chỉnh sửa kịp thời giúp chúng em khắc phục nhược

điểm và hoàn thành tốt cũng như đúng thời hạn đã đề ra.
Chúng em cũng xin gửi lời cảm ơn chân thành các quý thầy cô trong
khoa nói chung và ngành Cơng Nghệ Thơng Tin nói riêng đã tận tình truyền
đạt những kiến thức cần thiết giúp chúng em có nền tảng để làm nên đề tài
này, đã tạo điều kiện để chúng em có thể tìm hiểu và thực hiện tốt đề tài.
Cùng với đó, chúng em xin được gửi cảm ơn đến các bạn cùng khóa đã cung
cấp nhiều thơng tin và kiến thức hữu ích giúp chúng em có thể hồn thiện
hơn đề tài của mình.
Đề tài và bài báo cáo được chúng em thực hiện trong khoảng thời gian
ngắn, với những kiến thức còn hạn chế cùng nhiều hạn chế khác về mặt kĩ
thuật và kinh nghiệm trong việc thực hiện một dự án phần mềm. Do đó,
trong q trình làm nên đề tài có những thiếu sót là điều khơng thể tránh
khỏi nên chúng em rất mong nhận được những ý kiến đóng góp q báu của
các q thầy cơ để kiến thức của chúng em được hoàn thiện hơn và chúng
em có thể làm tốt hơn nữa trong những lần sau.
Cuối lời, chúng em kính chúc thầy ln dồi dào sức khỏe và thành
công hơn nữa trong sự nghiệp trồng người. Một lần nữa chúng em xin chân
thành cảm ơn.

Nhóm thực hiện
Nguyễn Cao Trí – 19110482
Nguyễn Hữu Tín – 19110474

KHĨA LUẬN TỐT NGHIỆP

Trang 5


ĐH SƯ PHẠM KỸ THUẬT TP. HCM


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

KHOA CÔNG NGHỆ THÔNG TIN

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

*******

*******

ĐỀ CƯƠNG TIỂU LUẬN CHUYÊN NGÀNH
Họ và tên Sinh viên 1: Nguyễn Cao Trí

MSSV 1: 19110482

Họ và tên Sinh viên 2: Nguyễn Hữu Tín

MSSV 2: 19110474

Ngành: Công nghệ Thông tin
Tên đề tài: Xây dựng website kinh doanh linh kiện máy tính sử dụng NodeJS và
ReactJS
Giáo viên hướng dẫn: TS. Lê Văn Vinh
Nhiệm vụ của tiểu luận:
1. Lý thuyết
- Tìm hiểu về các cơng nghệ: NodeJS, ReactJS, JSON Web Token.
- Tìm hiểu về MongoDB để quản lý dữ liệu.
2. Thực hành
- Sử dụng NodeJS, ExpressJS để xây dựng Back-end, các API.
- Ứng dụng JSON Web Token để xác thực và phân quyền cho hệ thống API cho

từng người dùng.
- Ứng dụng thư viện ReactJS để xây dựng và xử lý giao diện Website.
- Sử dụng MongoDB làm hệ quản trị cơ sở dữ liệu để lưu trữ dữ liệu của hệ thống.

KHÓA LUẬN TỐT NGHIỆP

Trang 6


MỤC LỤC
LỜI CẢM ƠN........................................................................................................................... 5
MỤC LỤC................................................................................................................................. 7
DANH MỤC HÌNH ẢNH ...................................................................................................... 10
DANH MỤC BẢNG BIỂU .................................................................................................... 12
CHƯƠNG 1. PHẦN MỞ ĐẦU.............................................................................................. 14
1.1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI ................................................................................ 14
1.2. MỤC TIÊU CỦA ĐỀ TÀI ............................................................................................ 14
1.3. ĐỐI TƯỢNG NGHIÊN CỨU ...................................................................................... 14
1.4. CÔNG NGHỆ SỬ DỤNG ............................................................................................ 15
1.5. PHẠM VI NGHIÊN CỨU ............................................................................................ 15
1.6. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN ................................................................... 15
CHƯƠNG 2. CƠ SỞ LÝ THUYẾT...................................................................................... 16
2.1. NODEJS ........................................................................................................................ 16
2.1.1. Định nghĩa .............................................................................................................. 16
2.1.2. Ứng dụng................................................................................................................ 16
2.1.3. Ưu, nhược điểm...................................................................................................... 16
2.2. REACTJS ...................................................................................................................... 17
2.2.1. Định nghĩa .............................................................................................................. 17
2.2.2. Đặc trưng của Reactjs ............................................................................................ 17
2.3. MONGODB .................................................................................................................. 18

2.3.1. Định nghĩa .............................................................................................................. 18
2.3.2. Tính năng ............................................................................................................... 19
2.4. JSON WEB TOKEN ..................................................................................................... 19
2.4.1. Định nghĩa .............................................................................................................. 19
2.4.2. Cấu trúc .................................................................................................................. 20
CHƯƠNG 3. KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HỐ YÊU CẦU ................... 21
3.1. KHẢO SÁT HIỆN TRẠNG ......................................................................................... 21
3.1.1. Website X-Gear - Kinh doanh linh kiện máy tính ................................................. 21
3.1.2. Website GearVN - Hi end PC & Gaming Gear ..................................................... 22
3.1.3. Website PHONGVU.VN - Website kinh doanh Laptop, PC ................................. 23
3.1.4. Kết luận .................................................................................................................. 24
3.2. XÁC ĐỊNH YÊU CẦU................................................................................................. 24
3.2.1. Yêu cầu chức năng ................................................................................................. 24
3.2.2. Yêu cầu phi chức năng ........................................................................................... 25
3.3. MƠ HÌNH HỐ U CẦU ......................................................................................... 26
3.3.1. Lược đồ Use case ................................................................................................... 26

KHÓA LUẬN TỐT NGHIỆP

Trang 7


3.3.2. Đặc tả usecase ........................................................................................................ 29
CHƯƠNG 4. THIẾT KẾ PHẦN MỀM ............................................................................... 51
4.1. LƯỢC ĐỒ LỚP ............................................................................................................ 51
4.2. LƯỢC ĐỒ TUẦN TỰ .................................................................................................. 51
4.2.1. Chức năng Đăng nhập ............................................................................................ 51
4.2.2. Chức năng đăng kí ................................................................................................. 53
4.2.3. Chức năng đăng xuất .............................................................................................. 54
4.2.4. Chức năng xem thông tin cá nhân .......................................................................... 55

4.2.5. Chức năng chỉnh sửa thông tin cá nhân ................................................................. 55
4.2.6. Chức năng xem danh sách địa chỉ .......................................................................... 57
4.2.7. Chức năng thêm địa chỉ mới .................................................................................. 57
4.2.8. Chức năng Chỉnh sửa địa chỉ ................................................................................. 58
4.2.9. Chức năng Xem thông tin sản phẩm ...................................................................... 59
4.2.10. Chức năng tra cứu sản phẩm ................................................................................ 61
4.2.11. Chức năng thêm sản phẩm vào giỏ hàng ............................................................. 61
4.2.12. Chức năng xóa sản phẩm khỏi giỏ hàng .............................................................. 62
4.2.13. Chức năng thanh toán........................................................................................... 63
4.2.14. Chức năng Thêm sản phẩm .................................................................................. 64
4.2.15. Chức năng Cập nhật sản phẩm ............................................................................. 65
4.2.16. Chức năng xoá sản phẩm ..................................................................................... 65
4.2.17. Chức năng Thêm loại sản phẩm ........................................................................... 67
4.2.18. Chức năng cập nhật loại sản phẩm ....................................................................... 68
4.2.19. Chức năng xoá loại sản phẩm .............................................................................. 69
4.2.20. Chức năng thêm người dùng ................................................................................ 70
4.2.21. Chức năng chỉnh sửa thông tin người dùng ......................................................... 71
4.2.22. Chức năng thêm thương hiệu ............................................................................... 73
4.2.23. Chức năng Cập nhật thương hiệu ......................................................................... 74
4.2.24. Chức năng xoá thương hiệu ................................................................................. 75
4.2.25. Chức năng cập nhật trạng thái đơn hàng .............................................................. 75
4.2.26. Chức năng xem Thống kê .................................................................................... 76
4.3. BẢNG DỮ LIỆU .......................................................................................................... 78
4.4. LƯỢC ĐỒ THỰC THỂ KẾT HỢP (ERD)................................................................... 86
4.5. THIẾT KẾ GIAO DIỆN ............................................................................................... 87
4.5.1. Giao diện người dùng ............................................................................................. 87
4.5.2. Giao diện quản trị viên ......................................................................................... 101
CHƯƠNG 5. CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM ................................................... 113
5.1. CÀI ĐẶT PHẦN MỀM .............................................................................................. 113


KHÓA LUẬN TỐT NGHIỆP

Trang 8


5.1.1. Yêu cầu hệ thống.................................................................................................. 113
5.1.2. Các bước tiến hành ............................................................................................... 113
5.2. KIỂM THỬ PHẦN MỀM........................................................................................... 113
5.2.1. Kịch bản kiểm thử ................................................................................................ 113
5.2.2. Kết quả kiểm thử .................................................................................................. 114
CHƯƠNG 6. TỔNG KẾT ................................................................................................... 120
6.1. KẾT QUẢ ĐẠT ĐƯỢC ............................................................................................. 120
6.1.1. Về lý thuyết .......................................................................................................... 120
6.1.2. Về ứng dụng ......................................................................................................... 120
6.2. ƯU ĐIỂM ................................................................................................................... 120
6.3. NHƯỢC ĐIỂM ........................................................................................................... 120
6.4. HƯỚNG PHÁT TRIỂN .............................................................................................. 120
TÀI LIỆU THAM KHẢO ................................................................................................... 121

KHÓA LUẬN TỐT NGHIỆP

Trang 9


DANH MỤC HÌNH ẢNH
Hình 2.1: NodeJS ..................................................................................................................... 16
Hình 2.2: ReactJs .................................................................................................................... 17
Hình 2.3: MongoDB ................................................................................................................ 18
Hình 2.4: Json Web Token....................................................................................................... 19
Hình 3.1:Website X-gear ......................................................................................................... 21

Hình 3.2: Website GearVN ...................................................................................................... 22
Hình 3.3: Website Phongvu ..................................................................................................... 23
Hình 3.4: Lược đồ Usecase Người dùng.................................................................................. 26
Hình 3.5: Lược đồ Usecase Người quản lý (1) ........................................................................ 27
Hình 3.6: Lược đồ Usecase Người quản lý (2) ........................................................................ 28
Hình 4.1: Lược đồ lớp .............................................................................................................. 51
Hình 4.2: Lược đồ tuần tự Chức năng Đăng nhập ................................................................... 52
Hình 4.3: Lược đồ tuần tự Chức năng Đăng ký ....................................................................... 53
Hình 4.4: Lược đồ tuần tự Chức năng Đăng xuất .................................................................... 54
Hình 4.5: Lược đồ tuần tự Chức năng xem thơng tin cá nhân ................................................. 55
Hình 4.6: Lược đồ tuần tự Chức năng Chỉnh sửa thơng tin cá nhân ....................................... 56
Hình 4.7: Lược đồ chức năng xem danh sách địa chỉ .............................................................. 57
Hình 4.8: Lược đồ chức năng thêm địa chỉ mới ...................................................................... 58
Hình 4.9: Lược đồ chức năng Chỉnh sửa địa chỉ ..................................................................... 59
Hình 4.10: Lược đồ tuần tự Chức năng Xem thơng tin sản phẩm ........................................... 60
Hình 4.11: Lược đồ tuần tự Chức năng tra cứu sản phẩm ....................................................... 61
Hình 4.12: Lược đồ tuần tự thêm sản phẩm vào giỏ hàng ....................................................... 62
Hình 4.13: Lược đồ tuần tự Chức năng xóa sản phẩm khỏi giỏ hàng ..................................... 62
Hình 4.14: Lược đồ tuần tự Chức năng thanh tốn.................................................................. 63
Hình 4.15: Lược đồ tuần tự Chức năng Thêm sản phẩm ......................................................... 64
Hình 4.16: Lược đồ tuần tự Chức năng Cập nhật sản phẩm .................................................... 65
Hình 4.17: Lược đồ tuần tự Chức năng xố sản phẩm ............................................................ 66
Hình 4.18: Lược đồ tuần tự Chức năng thêm loại sản phẩm ................................................... 67
Hình 4.19: Lược đồ tuần tự Chức năng cập nhật loại sản phẩm .............................................. 68
Hình 4.20: Lược đồ tuần tự Chức năng xố loại sản phẩm ..................................................... 69
Hình 4.21: Lược đồ tuần tự Chức năng thêm người dùng ....................................................... 70
Hình 4.22: Lược đồ tuần tự Chức năng chỉnh sửa thông tin người dùng ................................ 71
Hình 4.23: Lược đồ tuần tự Chức năng xố người dùng ......................................................... 72
Hình 4.24: Lược đồ tuần tự Chức năng thêm thương hiệu ...................................................... 73
Hình 4.25: Lược đồ tuần tự Chức năng cập nhật thương hiệu ................................................. 74

Hình 4.26: Lược đồ tuần tự Chức năng xoá thương hiệu ........................................................ 75
Hình 4.27: Lược đồ tuần tự Chức năng cập nhật trạng thái đơn hàng ..................................... 76
Hình 4.28: Lược đồ tuần tự Chức năng xem Thống kê ........................................................... 77
Hình 4.29: Lược đồ thực thể kết hợp ....................................................................................... 86
Hình 4.30: Giao diện trang đăng nhập ..................................................................................... 87
Hình 4.31: Giao diện trang Đăng ký ........................................................................................ 88
Hình 4.32: Giao diện trang chủ 1 ............................................................................................. 89
Hình 4.33: Giao diện trang chủ 2 ............................................................................................. 90
Hình 4.34: Giao diện trang chủ 3 ............................................................................................. 91
Hình 4.35: Giao diện trang sản phẩm ...................................................................................... 92
Hình 4.36: Giao diện trang Chi tiết sản phẩm ......................................................................... 93
Hình 4.37: Giao diện trang Thơng tin người dùng .................................................................. 94

KHĨA LUẬN TỐT NGHIỆP

Trang 10


Hình 4.38: Giao diện trang Quản lý mật khẩu ......................................................................... 95
Hình 4.39: Giao diện trang Quản lý địa chỉ ............................................................................. 96
Hình 4.40: Giao hiện trang Lịch sử mua hàng ......................................................................... 97
Hình 4.41: Giao diện giỏ hàng ................................................................................................. 98
Hình 4.42: Giao diện trang chi tiết giỏ hàng ............................................................................ 99
Hình 4.43: Giao diện trang thanh tốn ................................................................................... 100
Hình 4.44: Giao diện trang Đăng nhập .................................................................................. 101
Hình 4.45: Giao diện phần Quản lý ....................................................................................... 102
Hình 4.46: Giao diện trang Thống kê .................................................................................... 103
Hình 4.47: Giao diện trang Quản lý đơn hàng ....................................................................... 104
Hình 4.48: Giao diện trang Chi tiết đơn hàng ........................................................................ 105
Hình 4.49: Giao diện trang Quản lý người dùng ................................................................... 106

Hình 4.50: Giao diện trang Thêm người dùng mới ............................................................... 107
Hình 4.51: Giao diện trang Chỉnh sửa thông tin người dùng................................................. 108
Hình 4.52: Giao diện trang Quản lý nhãn hiệu ...................................................................... 109
Hình 4.53: Giao diện trang Chỉnh sửa thơng tin nhãn hiệu ................................................... 110
Hình 4.54: Giao diện trang Quản lý loại sản phẩm................................................................ 111
Hình 4.55: Giao diện Nhắn tin với người dùng ..................................................................... 112

KHÓA LUẬN TỐT NGHIỆP

Trang 11


DANH MỤC BẢNG BIỂU
Bảng 3.1: Usecase Đăng nhập ................................................................................................. 29
Bảng 3.2: Usecase Đăng xuất .................................................................................................. 30
Bảng 3.3: Usecase đăng ký ...................................................................................................... 31
Bảng 3.4: Usecase xem thông tin chi tiết sản phẩm ................................................................ 32
Bảng 3.5: Usecase Tra cứu sản phẩm ...................................................................................... 33
Bảng 3.6: Usecase chỉnh sửa thông tin tài khoản .................................................................... 34
Bảng 3.7: Usecase Thay đổi mật khẩu ..................................................................................... 35
Bảng 3.8: Usecase Thêm địa chỉ mới ...................................................................................... 36
Bảng 3.9: Usecase Chỉnh sửa địa chỉ ....................................................................................... 37
Bảng 3.10: Usecase thêm sản phẩm vào giỏ hàng ................................................................... 38
Bảng 3.11: Usecase Xoá sản phẩm khỏi giỏ hàng ................................................................... 39
Bảng 3.12: Usecase thanh toán ................................................................................................ 40
Bảng 3.13: Usecase thêm sản phẩm vào cửa hàng .................................................................. 41
Bảng 3.14: Usecase chỉnh sửa thông tin sản phẩm .................................................................. 42
Bảng 3.15: Usecase Cập nhật trạng thái đơn hàng .................................................................. 42
Bảng 3.16: Usecase thêm loại Sản phẩm ................................................................................. 44
Bảng 3.17: Usecase chỉnh sửa thông tin loại sản phẩm ........................................................... 45

Bảng 3.18: Usecase Thêm người dùng .................................................................................... 46
Bảng 3.19: Usecase chỉnh sửa người dùng .............................................................................. 47
Bảng 3.20: Usecase Thêm thương hiệu ................................................................................... 48
Bảng 3.21: Usecase chỉnh sửa thương hiệu ............................................................................. 49
Bảng 3.22: Usecase Thống kê.................................................................................................. 50
Bảng 4.1: Bảng Role ................................................................................................................ 78
Bảng 4.2: Bảng User ................................................................................................................ 78
Bảng 4.3: Bảng Customer ........................................................................................................ 79
Bảng 4.4: Bảng Address .......................................................................................................... 80
Bảng 4.5: Bảng Product ........................................................................................................... 81
Bảng 4.6: Bảng ProductType ................................................................................................... 82
Bảng 4.7: Bảng Brand .............................................................................................................. 83
Bảng 4.8: Bảng Cart ................................................................................................................. 83
Bảng 4.9: Bảng Order .............................................................................................................. 84
Bảng 4.10: Các đối tượng trang Đăng nhập............................................................................. 87
Bảng 4.11: Các đối tượng trang Đăng ký ................................................................................ 88
Bảng 4.12: Các đối tượng Trang chủ 1 .................................................................................... 89
Bảng 4.13: Các đối tượng Trang chủ 2 .................................................................................... 90
Bảng 4.14: Các đối tượng Trang chủ 3 .................................................................................... 91
Bảng 4.15: Các đối tượng trang Sản phẩm .............................................................................. 92
Bảng 4.16: Các đối tượng trang Chi tiết sản phẩm .................................................................. 93
Bảng 4.17: Các đối tượng trang Thông tin cá nhân ................................................................. 94
Bảng 4.18: Các đối tượng trang Quản lý mật khẩu ................................................................. 95
Bảng 4.19: Các đối tượng trang Quản lý địa chỉ ..................................................................... 96
Bảng 4.20: Các đối tượng trang Lịch sử mua hàng ................................................................. 97
Bảng 4.21: Các đối tượng Trang Giỏ hàng .............................................................................. 98
Bảng 4.22: Các đối tượng trang Chi tiết giỏ hàng ................................................................... 99
Bảng 4.23: Đối tượng trang thanh toán.................................................................................. 100
Bảng 4.24: Các đối tượng trang Đăng nhập........................................................................... 101
Bảng 4.25: Các đối tượng phần Quản lý ................................................................................ 103


KHÓA LUẬN TỐT NGHIỆP

Trang 12


Bảng 4.26: Các đối tượng trang Thống kê ............................................................................. 104
Bảng 4.27: Các đối tượng trang Đơn hàng ............................................................................ 104
Bảng 4.28: Các đối tượng trang Chi tiết đơn hàng ................................................................ 105
Bảng 4.29: Các đối tượng trang Người dùng ......................................................................... 106
Bảng 4.30: Các đối tượng trang Thêm người dùng mới ........................................................ 107
Bảng 4.31: Các đối tượng trang Chỉnh sửa người dùng ........................................................ 108
Bảng 4.32: Các đối tượng trang Quản lý nhãn hiệu............................................................... 109
Bảng 4.33: Các đối tượng trang Chỉnh sửa nhãn hiệu ........................................................... 110
Bảng 4.34: Các đối tượng trang Quản lý loại sản phẩm ........................................................ 111
Bảng 4.35: Các đối tượng trang Nhắn tin .............................................................................. 112
Bảng 5.1: Kịch bản kiểm thử ................................................................................................. 114
Bảng 5.2: Kiểm tra chức năng đăng nhập (1) ........................................................................ 114
Bảng 5.3: Kiểm tra chức năng đăng nhập (2) ........................................................................ 115
Bảng 5.4: Kiểm tra chức năng mua hàng (1) ......................................................................... 115
Bảng 5.5: Kiểm tra chức năng mua hàng (2) ......................................................................... 116
Bảng 5.6: Kiểm tra chức năng mua hàng (3) ......................................................................... 116
Bảng 5.7: Kiểm tra giao diện trang Quản trị (1) .................................................................... 117
Bảng 5.8: Kiểm tra giao diện trang Quản trị (2) .................................................................... 117
Bảng 5.9: Kiểm tra giao diện trang Quản trị (3) .................................................................... 118
Bảng 5.10: Kiểm thử chức năng thêm mới (1) ...................................................................... 118
Bảng 5.11: Kiểm thử chức năng thêm mới (2) ...................................................................... 119

KHÓA LUẬN TỐT NGHIỆP


Trang 13


CHƯƠNG 1. PHẦN MỞ ĐẦU
1.1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Công nghệ thông tin đã và đang ngày càng phát triển mạnh mẽ trong mọi lĩnh
vực của đời sống, kinh tế, xã hội. Đặc biệt trong cơ chế thị trường sự phát triển của
các quan hệ kinh tế cũng như sự mở rộng ngày càng lớn về quy mô của các doanh
nghiệp, xí nghiệp, cơ quan đã làm tăng các luồng và khối lượng thông tin, làm cho
công tác quản lý trở nên phức tạp hơn. Với việc làm công tác quản lý thủ công bằng
sổ sách (như trước kia) thì khơng thể đáp ứng được với sự phát triển như hiện nay.
Trong xu thế ấy, việc quản lý dựa vào máy tính là một nhu cầu thiết yếu của hầu hết
mọi ngành, mọi doanh nghiệp, việc tin học hóa từng bước trong công tác quản lý,
khai thác, điều hành sản xuất kinh doanh và quản lý hoạt động là một địi hỏi ngày
càng cấp thiết.
Nói khơng xa thì trong lĩnh vực mua bán và sử dụng máy tính, nhu cầu của con
người lại càng tăng dần theo thời đại cơng nghiệp hóa hiện đại hóa hiện nay. Cùng
với đó, người lao động, học sinh, sinh viên đều chuyển sang xu hướng học và làm
việc online.. Trong bối cảnh đó, máy tính trở nên vơ cùng cần thiết để đảm bảo cuộc
sống và cơng việc được vận hành bình thường. Học sinh, sinh viên cần máy tính để
phục vụ việc học trực tuyến, tra cứu tài liệu, ôn tập. Phụ huynh cũng áp dụng hình
thức họp trực tuyến. Nhân viên một số ngành nghề như: Thiết kế, marketing, kế
toán… cũng cần máy tính để cơng việc có thể vận hành bình thường. Bởi vậy, máy
tính trở thành thiết bị “hút hàng” ở thời điểm hiện tại và trở thành 1 thứ khơng thể
thiếu trong mỗi gia đình.
Xuất phát từ những nhu cầu thực tế và tạo sự linh hoạt trong việc trao đổi mua
bán linh kiện máy tính. Nhóm em xin thực hiện đề tài Quản lý cửa hàng mua bán linh
kiện máy tính.

1.2. MỤC TIÊU CỦA ĐỀ TÀI

Mục đích chính của việc xây dựng website bán linh kiện máy tính đó là tạo nên
sự tiện lợi, tiết kiệm thời gian, kinh phí nhưng vẫn đem lại hiệu quả cao, ngồi ra
nhóm hướng tới các mục tiêu sau khi thực hiện để tài:
-

Áp dụng được các kiến thức đã học được vào quá trình thực hiện đồ án.
Xây dựng một website “Dễ nhìn, dễ sử dụng”.
Cung cấp cho người dùng các sản phẩm thuộc về mảng máy tính và thơng
tin chi tiết của chúng.
Việc quản lý cửa hàng cũng được thiết kế dễ vận hành.
Bảo mật thông tin của khách hàng.

1.3. ĐỐI TƯỢNG NGHIÊN CỨU
-

Đối với khách hàng: Website mà em xây dựng chưa thật sự hồn chỉnh nhưng
có thể giúp ích cho người sử dụng có thể dễ dàng mua bán sản phẩm, cập nhật
thông tin của các sản phẩm mới, sản phẩm bán chạy của cửa hàng, tìm kiếm
sản phẩm, có thể đăng nhập để mua hàng.

KHĨA LUẬN TỐT NGHIỆP

Trang 14


-

Đối với chúng em: Nâng cao trình độ thiết kế website và phân tích một website
thương mại điện tử. Ngồi ra có thể giúp em hiểu biết sâu rộng về những ngôn
ngữ và phần mềm hỗ trợ em trong quá trình làm đồ án.


1.4. CƠNG NGHỆ SỬ DỤNG
Để thực hiện đề tài, nhóm chúng em sử dụng cơng nghệ:
- Restful API, NodeJS, ExpressJS để xây dựng nên hệ thống các APIs hỗ trợ lấy
dữ liệu một cách chính xác và nhanh chóng nhất.
- Cơ sở dữ liệu NoSQL là MongoDB để lưu trữ dũ liệu người dùng của hệ thống.
- ReacJS và các thư viện hỗ trợ thiết kế giao diện để thiết kế một giao diện đẹp
mắt và thân thiện với người dùng.
1.5. PHẠM VI NGHIÊN CỨU
Nhóm phát triển trang web kinh doanh linh kiện máy tính với các chức năng cơ
bản của 1 trang web bán hàng như: Xem sản phẩm, tìm kiếm sản phẩm, mua sản
phẩm, thanh tốn,… cùng với đó là các chức năng quản lý website như: Thêm,
xoá, sửa sản phẩm, người dùng.

1.6. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Sau khi hoàn thiện đề tài, nhóm chúng em đã rèn luyện, tiếp thu được nhiều kỹ
năng và kiến thức bổ ích, đặc biệt là về những công nghệ mới đang được sử dụng
hiện nay. Qua đó nhóm cũng có kinh nghiệm trong những dự án tiếp theo. Khi
sản phẩm của nhóm được áp dụng vào thực tế sẽ đáp ứng được việc mua sắm
máy tính và các linh kiện đi kèm của mọi người, đặc biệt là giới trẻ. Đem lại sự
tiện lợi, nhanh chóng khi mua hàng trực tuyến.

KHÓA LUẬN TỐT NGHIỆP

Trang 15


CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
2.1. NODEJS


Hình 2.1: NodeJS

2.1.1. Định nghĩa
- Node.js là một mã nguồn mở, một môi trường cho các máy chủ và
ứng dụng mạng.
- Node.js sử dụng Google V8 JavaScript engine để thực thi mã, và
một tỷ lệ lớn các mô-đun cơ bản được viết bằng JavaScript. Các ứng
dụng node.js thì được viết bằn JavaScript.
- Node.js chứa một thư viện built-in cho phép các ứng dụng hoạt động
như một Webserver mà không cần phần mềm như Nginx, Apache
HTTP Server hoặc IIS.
- Node.js cung cấp kiến trúc hướng sự kiện (event-driven) và nonblocking I/O API, tối ưu hóa thơng lượng của ứng dụng và có khả năng
mở rộng cao.
2.1.2. Ứng dụng
-

Xây dựng websocket server (Chat server)
Hệ thống Notification (Giống như facebook hayTwitter)
Ứng dụng upload file trên client
Các máy chủ quảng cáo
Các ứng dụng dữ liệu thời gian thực khác.

2.1.3. Ưu, nhược điểm
- Ưu điểm:
 Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (nonblocking).
 Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website.
 Có khả năng xử lý nhiều Requests cùng một lúc trong thời gian
ngắn nhất.

KHÓA LUẬN TỐT NGHIỆP


Trang 16


 Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng
dụng chat, mạng xã hội.
- Nhược diểm:
 Nodejs gây hao tốn tài nguyên và thời gian.
 Nodejs có thể sẽ phù hợp với việc phát triển ứng dụng mới. Tuy
nhiên khi xây dựng và triển khai dự án quan trọng thì Nodejs
khơng phải là sự lựa chọn hồn hảo nhất. [1]
2.2. REACTJS

Hình 2.2: ReactJs

2.2.1. Định nghĩa
ReactJS là một thư viện JavaScript mã nguồn mở được thiết kế bởi
Facebook để tạo ra những ứng dụng web hấp dẫn, nhanh và hiệu quả
với mã hóa tối thiểu. Mục đích cốt lõi của ReactJS khơng chỉ khiến cho
trang web phải thật mượt mà còn phải nhanh, khả năng mở rộng cao và
đơn giản.
2.2.2. Đặc trưng của Reactjs
- JSX
Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố
cục trang web thì sẽ dùng JSX. JSX được đánh giá là sử dụng đơn giản
hơn JavaScript và cho phép trích dẫn HTML cũng như việc sử dụng các
cú pháp thẻ HTML để render các subcomponent. JSX tối ưu hóa code

KHÓA LUẬN TỐT NGHIỆP


Trang 17


khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương
đương.
- Single-way data flow (Luồng dữ liệu một chiều)
ReactJS khơng có những module chun dụng để xử lý data, vì vậy
ReactJS chia nhỏ view thành các component nhỏ có mỗi quan hệ chặt
chẽ với nhau.
Việc ReactJS sử dụng one-way data flow có thể gây ra một chút khó
khăn cho những người muốn tìm hiểu và ứng dụng vào trong các dự án.
Tuy nhiên, cơ chế này sẽ phát huy được ưu điểm của mình khi cấu trúc
cũng như chức năng của view trở nên phức tạp thì ReactJS sẽ phát huy
được vai trị của mình. [2]
- Redux
Redux là một thư viện Javascript có tác dụng tạo ra một lớp quản lý
mọi trạng thái của ứng dụng. Hay nói cách khác, Redux là một
predictable state management tool (cơng cụ quản lý cao cấp) cho các
ứng dụng được viết bằng ngơn ngữ lập trình Javascript và cịn được gọi
là Redux js. [3]
2.3. MONGODB

Hình 2.3: MongoDB

2.3.1. Định nghĩa
- MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL
hàng đầu, được hàng triệu người sử dụng.

KHÓA LUẬN TỐT NGHIỆP


Trang 18


- Ngoài ra, MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên
các khái niệm Collection và Document, nó cung cấp hiệu suất cao, tính
khả dụng cao và khả năng mở rộng dễ dàng.
2.3.2. Tính năng
- Truy vấn ad hoc: giúp các trường truy vấn phạm vi, kết hợp cùng
việc tìm kiếm biểu thức nhằm trả về kết quả tài liệu cụ thể với kích
thước nhất định.
- Nhân rộng: MongoDB cung cấp Replica Set cho phép nhân 2 hoặc
nhiều bản sao của dữ liệu. Đồng thời, mỗi bản sao lại đóng vai trị
chính và phụ.
- Cân bằng tải: MongoDB cân bằng tải bằng cách dựa vào các Shard
key để chia dữ liệu thành các phạm vi và phân phối đồng đều. Chúng
có thể chạy trên nhiều máy chủ khác nhau và thực hiện chức năng
sao chép dữ liệu hay cân bằng tải nhằm giữ hệ thống hoạt động liên
tục trong trường hợp phát sinh lỗi về phần cứng.
- Lưu trữ tệp: tính năng lưu trữ tệp được dùng như một hệ thống tệp
(gọi là GridFS) đóng vai trò cân bằng tải, đồng thời, sao chép dữ liệu
trên nhiều máy tính.
- Giới hạn kích thước collection: Các collection được MongoDB hỗ
trợ thường có kích thước cố định. [4]
2.4. JSON WEB TOKEN

Hình 2.4: Json Web Token

2.4.1. Định nghĩa
JSON Web Token (JWT) là một chuẩn mở (RFC 7519) định nghĩa
một cách nhỏ gọn và khép kín để truyền một cách an tồn thơng tin giữa

KHĨA LUẬN TỐT NGHIỆP

Trang 19


các bên dưới dạng đối tượng JSON. Trong đó chuỗi Token phải có 3
phần là header, phần payload và phần signature được ngăn nhau bằng
dấu “.”.
2.4.2. Cấu trúc
JSON Web Token bao gồm 3 phần:
- Header: Phần header sẽ chứa kiểu dữ liệu , và thuật tốn sử dụng để
mã hóa ra chuỗi JWT.
- Payload: Phần payload sẽ chứa các thông tin mình muốn đặt trong
chuỗi Token như username, userId,…
- Signature: Phần Signature sẽ được tạo ra bằng cách mã hóa phần
header , payload kèm theo một chuỗi secret (khóa bí mật). [5]

KHÓA LUẬN TỐT NGHIỆP

Trang 20



×