Xây dựng website và ứng dụng mobile kinh doanh phụ kiện máy tính

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

KHĨA LUẬN TỐT NGHIỆP
NGÀNH CƠNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE VÀ ỨNG DỤNG MOBILE
KINH DOANH PHỤ KIỆN MÁY TÍNH

GVHD: THS. NGUYỄN TRẦN THI VĂN
SVTH: LÊ VĂN HỒN
ĐẶNG QUỐC TRUNG

SKL009620

Tp. Hồ Chí Minh, tháng 6/2022


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TPHCM
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO
NGÀNH CƠNG NGHỆ THƠNG TIN
---------🙦 🙦 🙦---------

KHĨA LUẬN TỐT NGHIỆP
XÂY DỰNG WEBSITE VÀ ỨNG DỤNG MOBILE
KINH DOANH PHỤ KIỆN MÁY TÍNH
GVHD: ThS. Nguyễn Trần Thi Văn
Sinh viên thực hiện

MSSV

1. Lê Văn Hồn

18110111

2. Đặng Quốc Trung

18110220

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


CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
*******

NHIỆM VỤ THỰC HIỆN KHÓA LUẬN TỐT NGHIỆP
Họ và tên Sinh viên: Lê Văn Hoàn

MSSV: 18110111

Họ và tên Sinh viên: Đặng Quốc Trung

MSSV: 18110220

Ngành: Công nghệ thông tin
Tên đề tài: Xây dựng website và ứng dụng mobile kinh doanh phụ kiện máy tính
Nội dung thực hiện:
Lý thuyết:
-

Tìm hiểu MERN Stack: MongoDB, ExpressJS, ReactJS, NodeJS.
Tìm hiểu Flutter.
Tìm hiểu gắn các API.
Tìm hiểu cách triển khai back-end với Heroku.
Thực hành:

- Xây dựng website và ứng dụng mobile kinh doanh phụ kiện máy tính, với các tính
năng chính như sau:
o Cho phép quản trị viên quản lý được dữ liệu của hệ thống (doanh thu,
người dùng, sản phẩm, đơn hàng, đánh giá) và có thể thêm, xóa, cập nhật
dữ liệu.
o Cho phép người dùng thực hiện được quyền lợi khách hàng cơ bản: xem,
tìm kiếm, chọn lọc sản phẩm theo ý muốn, đặt hàng nếu có nhu cầu mua
và có thể thanh tốn ngay lập tức với thẻ tín dụng (VnPay hoặc PayPal).
o Cho phép người dùng hoặc quản trị viên tìm kiếm sản phẩm, hóa đơn để
xem thơng tin chi tiết của sản phẩm, xem thông tin chi tiết của hóa đơn
Thời gian thực hiện: 15 tuần (Bắt đầu từ 7/3/2022 đến 27/6/2022)
Chữ ký của SV: ……………………………………………………………
Chữ ký của SV: ……………………………………………………………
TRƯỞNG NGÀNH CNTT
(Ký và ghi rõ họ tên)

TP.HCM, Ngày… tháng… năm 2022
GIẢNG VIÊN HƯỚNG DẪN
(Ký và ghi rõ họ tên)


CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên: Lê Văn Hoàn

MSSV: 18110111

Họ và tên Sinh viên: Đặng Quốc Trung

MSSV: 18110220

Ngành: Công nghệ thông tin
Tên đề tài: Xây dựng website và ứng dụng mobile kinh doanh phụ kiện máy tính
Họ và tên Giảng viên hướng dẫn: ThS. 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:
- Về lý thuyết:
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
- Về thực hành:
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
2. Ưu điểm:
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
3. Khuyết điểm:
..................................................................................................................................

..................................................................................................................................
4. Đánh giá loại: ........................................................................................................
5. Điểm: ................................ (Bằng chữ: ................................................................. )
Tp. Hồ Chí Minh, ngày… tháng … năm 2022
GIẢNG VIÊN HƯỚNG DẪN
(Ký & ghi rõ họ tên)


CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT
NAM
Độc lập – Tự do – Hạnh phúc
*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên Sinh viên: Lê Văn Hoàn

MSSV: 18110111

Họ và tên Sinh viên: Đặng Quốc Trung

MSSV: 18110220

Ngành: Công nghệ thông tin
Tên đề tài: Xây dựng website và ứng dụng mobile kinh doanh phụ kiện máy tính
Họ và tên Giảng viên phản biện: ThS. Nguyễn Thanh Phước
NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện:
- Về lý thuyết:
..................................................................................................................................
..................................................................................................................................

..................................................................................................................................
- Về thực hành:
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
2. Ưu điểm:
..................................................................................................................................
..................................................................................................................................
3. Khuyết điểm:
..................................................................................................................................
..................................................................................................................................
4. Đánh giá loại:
..................................................................................................................................
..................................................................................................................................
5. Điểm: ................................ (Bằng chữ: ................................................................. )
Tp. Hồ Chí Minh, ngày… tháng… năm 2022
GIẢNG VIÊN PHẢN BIỆN
(Ký & ghi rõ họ tên)


LỜI CAM ĐOAN
Chúng em xin cam đoan đề tài tiểu luận chuyên ngành "Xây dựng website và
ứng dụng mobile kinh doanh phụ kiện máy tính" là thành quả của quá trình học,
nghiên cứu và những kinh nghiệm đút kết được của cả nhóm dưới sự hướng dẫn của
giáo viên hướng dẫn là thầy Nguyễn Trần Thi Văn. Mọi sự tham khảo và nguồn tham
khảo của khóa luận chuyên ngành được trích dẫn trong phần Tài liệu tham khảo.
TP.HCM, tháng 06 năm 2022
Nhóm sinh viên thực hiện
Lê Văn Hồn

18110111

Đặng Quốc Trung

18110220


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 thầy Nguyễn Trần Thi Văn, 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ũng xin gửi lời cảm ơn chân thành các quý thầy cô trong khoa Đào
tạo Chất lượng cao 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 quý báu của thầy để kiến thức của chúng em được hồ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. Chúng em xin chân
thành cảm ơn.
Cuối lời, chúng em kính chúc thầy luôn 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.
TP.HCM, ngày tháng 06 năm 2022
Nhóm sinh viên thực hiện
Lê Văn Hoàn

18110111

Đặng Quốc Trung 18110220


TÓM TẮT
Trong hai mươi năm trở lại đây, thế giới đã trải qua nhiều sự phát triển, thay đổi
chóng mặt. Điều đó được thể hiện qua trong tất cả ngành nghề như liên quan đến kỹ
thuật, giáo dục, khoa học,… Nhưng đặc biệt đến với kỷ nguyên của sự đột phá vượt
bậc của khoa học công nghệ ngày nay, vừa là một lợi ích đến lồi người, nhưng nó
cũng đã và đang đặt ra khơng ít thử thách đối với sự phát triển toàn diện và thay đổi
cuộc sống nhân loại.
Trước đây khi ở thời kỳ chưa phát triển, con người có những nhu cầu sinh hoạt
và tiêu dùng hết sức đơn giản, chẳng hạn như ăn các loại thú hoặc thực vật mà họ săn
bắt được, dùng những chiếc khố bằng lá để giữ ấm và che chắn cơ thể, hay hiện đại
hơn một chút là dùng trí thơng minh đã hình thành dần dần từ hàng nghìn năm trước
để học tập bằng đèn đom đóm.
Tuy nhiên, với sự phát triển vượt bậc, đặc biệt là khoa học công nghệ, lồi người
đã tạo nên được một thị trường bn bán điện tử bên cạnh việc mua bán trực tiếp.
Điều này giúp chúng ta có thể mua hàng tiện lợi hơn trong khi nắm bắt được hết tất
cả những thông tin của sản phẩm cần mua và mua nó chỉ bằng cú click chuột.
Cho đến hiện nay, Việt Nam cũng đang là nước sử dụng rất nhiều nguồn tài
nguyên Internet để phục vụ cho việc mua bán thương mại điện tử đó. Bắt kịp xu
hướng mua sắm ấy, thêm vào việc Việt Nam chúng ta đang gánh phải hậu quả nặng
nề của đại dịch Covid-19, sinh viên - học sinh khó khăn hơn trong việc tiếp cận các
sản phẩm cơng nghệ để học trực tuyến. Đó chính là lý do để nhóm em chọn đề tài
"Xây dựng website và ứng dụng mobile kinh doanh phụ kiện máy tính".
Nền tảng website và app mobile kinh doanh phụ kiện máy tính hướng tới nhóm
người dùng là sinh viên - học sinh - giáo viên có nhu cầu sử dụng các thiết bị công
nghệ ở mức cao do đại dịch Covid gây nên.

MỤC LỤC
CHƯƠNG 1 : TỔNG QUAN ..................................................................................2
1.1. Lý do chọn đề tài ..........................................................................................2
1.2. Tính cấp thiết của đề tài ................................................................................2
1.3. Mục tiêu nghiên cứu .....................................................................................2
1.4. Kết quả dự kiến đạt được ..............................................................................3
1.5. Môi trường hoạt động ...................................................................................3
1.6. Ràng buộc.....................................................................................................3
CHƯƠNG 2 : CƠ SỞ LÝ THUYẾT .......................................................................4
2.1. Cơ sở lý thuyết Front-end .............................................................................4
2.2. Cơ sở lý thuyết Back-end ..............................................................................5
2.2.1. NodeJS ..................................................................................................5
2.2.2. ExpressJS ..............................................................................................6
2.3. Cơ sở lý thuyết Flutter ..................................................................................6
2.4. Cơ sở lý thuyết Database ..............................................................................6
2.5. Cơ sở lý thuyết Host .....................................................................................7
2.6. Các công cụ liên quan ...................................................................................7
2.6.1. Postman .................................................................................................7
CHƯƠNG 3 : KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU .................9
3.1. Khảo sát hiện trạng .......................................................................................9
3.2. Xác định yêu cầu ..........................................................................................9
3.2.1. Yêu cầu chức năng ................................................................................9
3.2.2. Yêu cầu phi chức năng.........................................................................10
CHƯƠNG 4 : PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .....................................11
4.1. Mơ hình hố u cầu...................................................................................11
4.1.1. Usecase tổng qt ................................................................................11
4.1.2. Chi tiết Usecase ...................................................................................11
4.1.2.1. Usecase Quản lý khách hàng ........................................................11

4.1.2.1.1. Usecase Xem thông tin khách hàng ...........................................11
4.1.2.2. Usecase Quản lý sản phẩm ...........................................................12
4.1.2.2.1. Usecase Tạo sản phẩm ..............................................................12


4.1.2.2.2. Usecase Update sản phẩm .........................................................12
4.1.2.3. Usecase Quản lý nhãn hiệu ...........................................................13
4.1.2.3.1. Usecase Tạo nhãn hiệu ..............................................................13
4.1.2.4. Usecase Quản lý đơn hàng............................................................14
4.1.2.4.1. Usecase xác nhận đơn hàng .......................................................14
4.1.2.5. Usecase Quản lý sản phẩm (admin) ..............................................14
4.1.2.5.1. Usecase Xóa sản phẩm ..............................................................15
4.1.2.6. Usecase Quản lý danh mục sản phẩm ...........................................15
4.1.2.6.1. Usecase Tạo danh mục ..............................................................15
4.1.2.6.2. Usecase Xóa danh mục..............................................................16
4.1.2.7. Usecase Quản lý nhân viên ...........................................................16
4.1.2.7.1. Usecase xóa nhân viên ..............................................................16
4.1.2.8. Usecase Quản lý khách hàng ........................................................17
4.1.2.8.1. Usecase xóa khách hàng ............................................................17
4.1.2.9. Usecase Quản lý thống kê .............................................................18
4.1.2.9.1. Usecase Xem thống kê ..............................................................18
4.1.2.10. Usecase Chỉnh sửa thông tin cá nhân ..........................................19
4.1.2.10.1. Usecase Update thông tin cá nhân ...........................................19
4.1.2.11. Usecase Đăng xuất .....................................................................20
4.1.2.12. Usecase Quên mật khẩu và Reset password ................................ 21
4.1.2.12.1. Usecase Reset password ..........................................................21
4.1.2.13. Usecase Đăng nhập.....................................................................22
4.1.2.14. Usecase Xem giỏ hàng................................................................ 23
4.1.2.14.1. Usecase Thêm sản phẩm vào giỏ hàng ....................................23
4.1.2.14.2. Usecase Xóa sản phẩm khỏi giỏ hàng ......................................24

4.1.2.15. Usecase Thanh toán ....................................................................24
4.1.2.16. Usecase Review sản phẩm ..........................................................25
4.1.2.16.1. Usecase Tạo review .................................................................25
4.1.2.16.2. Usecase Xóa review ................................................................ 25
4.1.2.16.3. Usecase Update review ...........................................................26
4.1.2.17. Usecase Tìm kiếm sản phẩm.......................................................26
4.1.2.18. Usecase Đăng ký ........................................................................27
4.1.3. Đặc tả yêu cầu .....................................................................................27
4.1.3.1. Yêu cầu khách hàng......................................................................27
4.1.3.1.1. Khách hàng chưa có tài khoản ...................................................27
4.1.3.1.2. Khách hàng đã có tài khoản .......................................................28
4.1.3.2. Yêu cầu quản trị viên ....................................................................28


4.1.3.2.1. Quản trị viên với quyền là Assistant (Nhân viên) ......................28
4.1.3.2.2. Quản trị viên với quyền là Admin .............................................28
4.1.3.3. Yêu cầu hệ thống ..........................................................................29
4.1.3.3.1. Yêu cầu về giao diện .................................................................29
4.1.3.3.2. Yêu cầu về Internet ...................................................................29
4.1.3.3.3. Yêu cầu về hệ điều hành............................................................29
4.1.3.3.4. Kiến trúc hệ thống .....................................................................29
4.2. Thiết kế chung ............................................................................................30
4.2.1. Mô tả các thành phần của ứng dụng .....................................................30
4.2.2. Backend ............................................................................................... 31
4.2.2.1. Cách tổ chức thư mục/ package trong backend .............................31
4.2.2.2. Thư viện sử dụng trong backend ...................................................32
4.2.3. Frontend ..............................................................................................34
4.2.3.1. Cách tổ chức thư mục/package trong frontend ..............................34
4.2.3.2. Thư viện sử dụng trong Frontend ..................................................35
4.2.4. Flutter ..................................................................................................38

4.2.4.1. Cách tổ chức thư mục/package trong flutter ..................................38
4.2.4.2. Thư viện sử dụng trong flutter ......................................................39
4.3. Thiết kế chi tiết ...........................................................................................40
4.3.1. Lược đồ cơ sở dữ liệu ..........................................................................40
4.3.2. Thiết kế giao diện website ...................................................................40
4.3.2.1. Màn hình trang chủ.......................................................................40
4.3.2.2. Màn hình đăng nhập .....................................................................41
4.3.2.3. Màn hình đăng ký .........................................................................42
4.3.2.4. Màn hình quên mật khẩu ..............................................................42
4.3.2.5. Màn hình reset password ..............................................................43
4.3.2.6. Màn hình quản lý của Admin ........................................................44
4.3.2.7. Màn hình chức năng quản lý nhân viên.........................................45
4.3.2.8. Màn hình chức năng quản lý khách hàng ......................................45
4.3.2.9. Màn hình chức năng quản lý sản phẩm .........................................46
4.3.2.10. Màn hình chức năng quản lý danh mục .......................................47
4.3.2.11. Màn hình chức năng quản lý thống kê ........................................48
4.3.2.12. Màn hình chức năng quản lý nhãn hiệu .......................................49
4.3.2.13. Màn hình chức năng quản lý đơn hàng .......................................50
4.3.2.14. Màn hình chức năng xem danh sách sản phẩm............................51
4.3.2.15. Màn hình chức năng xem chi tiết sản phẩm ................................ 52
4.3.2.16. Màn hình review sản phẩm .........................................................53
4.3.2.17. Màn hình giỏ hàng ......................................................................54


4.3.2.18. Màn hình theo dõi tình trạng đơn hàng (Khách hàng) .................55
4.3.3. Thiết kế giao diện mobile ....................................................................56
4.3.3.1. Màn hình trang chủ ......................................................................56
4.3.3.2. Màn hình đăng nhập .....................................................................57
4.3.3.3. Màn hình đăng ký .........................................................................58
4.3.3.4. Màn hình giỏ hàng ........................................................................59

4.3.3.5. Màn hình danh mục sản phẩm ......................................................60
4.3.3.6. Màn hình lọc sản phẩm .................................................................61
4.3.3.7. Màn hình thơng tin cá nhân ..........................................................62
4.3.3.8. Màn hình chi tiết sản phẩm ...........................................................64
4.3.3.9. Màn hình đơn hàng của bạn ..........................................................65
4.3.3.10. Màn hình đổi mật khẩu ............................................................... 66
4.3.3.11. Màn hình đánh giá sản phẩm ......................................................66
4.4. Thiết kế lược đồ tuần tự và lược đồ lớp.......................................................68
4.4.1. Lược đồ tuần tự ...................................................................................68
4.4.1.1. Lược đồ tuần tự chức năng đăng ký ..............................................68
4.4.1.2. Lược đồ tuần tự chức năng đăng nhập ..........................................68
4.4.1.3. Lược đồ tuần tự chức năng xem sản phẩm ....................................69
4.4.1.4. Lược đồ tuần tự chức năng thêm sản phẩm ...................................69
4.4.1.5. Lược đồ tuần tự chức năng sửa sản phẩm .....................................70
4.4.1.6. Lược đồ tuần tự chức năng xóa sản phẩm .....................................70
4.4.1.7. Lược đồ tuần tự chức năng thêm sản phẩm ...................................71
4.4.1.8. Lược đồ tuần tự chức năng xóa loại sản phẩm ..............................71
4.4.1.9. Lược đồ tuần tự chức năng mua hàng ...........................................72
4.4.1.10. Lược đồ tuần tự chức năng theo dõi đơn hàng ............................72
4.4.1.11. Lược đồ tuần tự chức năng quản lý đơn hàng .............................73
4.4.2. Lược đồ lớp .........................................................................................73
4.4.2.1. Lược đồ lớp hệ thống Shop phụ kiện ............................................73
CHƯƠNG 5 : CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG .......................................74
5.1. Cài đặt ........................................................................................................74
5.1.1. Thực thi front-end................................................................................74
5.1.2. Thực thi back-end ................................................................................74
5.1.3. Thực thi mobile ...................................................................................75
5.2. Các testcases ............................................................................................... 76
5.2.1. Đăng ký ............................................................................................... 76
5.2.1.1. Đăng ký thành công ......................................................................76

5.2.1.2. Lỗi email đăng ký .........................................................................76
5.2.1.3. Đăng ký thiếu thông tin ................................................................ 77
5.2.1.4. Đăng ký mật khẩu dưới 8 ký tự.....................................................77


5.2.1.5. Đăng ký với Xác nhận mật khẩu không trùng khớp ......................78
5.2.2. Đăng nhập ...........................................................................................78
5.2.2.1. Đăng nhập sai email .....................................................................78
5.2.2.2. Mật khẩu đăng nhập sai ................................................................ 79
5.2.2.3. Đăng nhập thành công ..................................................................79
5.2.3. Cập nhật thông tin ...............................................................................80
5.2.3.1. Cập nhật thông tin cá nhân ...........................................................80
5.2.3.2. Quên mật khẩu .............................................................................80
5.2.4. Admin .................................................................................................81
5.2.4.1. Admin quản lý khách hàng ...........................................................81
5.2.4.2. Admin xoá khách hàng .................................................................81
5.2.4.3. Admin quản lý nhân viên ..............................................................82
5.2.4.4. Admin quản lý sản phẩm ..............................................................82
5.2.4.5. Admin xoá sản phẩm ....................................................................83
5.2.4.6. Admin lọc sản phẩm .....................................................................83
5.2.4.7. Admin quản lý danh mục ..............................................................84
5.2.4.8. Admin tạo danh mục ....................................................................84
5.2.4.9. Admin xoá danh mục ....................................................................85
5.2.4.10. Admin thống kê ..........................................................................85
5.2.5. Nhân viên ............................................................................................86
5.2.5.1. Nhân viên quản lý khách hàng ......................................................86
5.2.5.2. Nhân viên tạo thương hiệu ............................................................86
5.2.5.3. Nhân viên liệt kê sản phẩm ...........................................................87
5.2.5.4. Nhân viên cập nhật sản phẩm .......................................................87
5.2.5.5. Nhân viên tạo sản phẩm................................................................ 88

5.2.5.6. Nhân viên tìm kiếm sản phẩm thành cơng ....................................88
5.2.5.7. Nhân viên quản lý đơn hàng .........................................................89
5.2.5.8. Nhân viên chấp nhận đơn hàng đang xử lý ...................................89
5.2.5.9. Nhân viên chấp nhận đơn hàng hoàn thành ...................................90
5.2.5.10. Nhân viên xem chi tiết đơn hàng khách hàng ..............................90
5.2.5.11. Nhân viên theo dõi đơn hàng khách hàng....................................91
5.2.5.12. Nhân viên xem chi tiết hoá đơn ..................................................91
5.2.6. Khách hàng..........................................................................................92
5.2.6.1. Xem danh sách sản phẩm..............................................................92
5.2.6.2. Tìm kiếm sản phẩm ......................................................................92
5.2.6.3. Sắp xếp sản phẩm .........................................................................93
5.2.6.4. Thay đổi bố cục ............................................................................93
5.2.6.5. Phân trang ....................................................................................94
5.2.6.6. Xem chi tiết sản phẩm ..................................................................94
5.2.6.7. Xem review ..................................................................................95
5.2.6.8. Tạo review....................................................................................95


5.2.6.9. Xoá review ...................................................................................96
5.2.6.10. Sửa review ..................................................................................96
5.2.6.11. Thêm vào giỏ hàng .....................................................................97
5.2.6.12. Xoá sản phẩm trong giỏ hàng .....................................................97
5.2.6.13. Thanh tốn (PayPal) ...................................................................98
5.2.6.14. Khơng được thanh tốn............................................................... 99
CHƯƠNG 6 : KẾT LUẬN .................................................................................. 100
6.1. Kết quả đạt được....................................................................................... 100
6.2. Ưu điểm.................................................................................................... 100
6.3. Nhược điểm .............................................................................................. 100
6.4. Hướng phát triển ....................................................................................... 100

DANH MỤC HÌNH ẢNH
Hình 2.1.Giới thiệu về ReactJS [10] .........................................................................4
Hình 2.2.Giới thiệu về NodeJS. [11] ........................................................................5
Hình 4.1. Hình Usecase Quản lý khách hàng .........................................................11
Hình 4.2. Hình Usecase Quản lý sản phẩm ............................................................12
Hình 4.3.Hình Usecase Quản lý nhãn hiệu .............................................................13
Hình 4.4. Hình Usecase Quản lý đơn hàng .............................................................14
Hình 4.5. Hình Usecase Quản lý sản phẩm (admin) ...............................................14
Hình 4.6. Hình Usecase Quản lý danh mục sản phẩm ............................................15
Hình 4.7. Hình Usecase Quản lý nhân viên ............................................................16
Hình 4.8. Hình Usecase Quản lý khách hàng .........................................................17
Hình 4.9. Hình Usecase Quản lý thống kê ..............................................................18
Hình 4.10. Hình Usecase Chỉnh sửa thơng tin cá nhân ...........................................19
Hình 4.11. Hình Usecase Đăng xuất ......................................................................20
Hình 4.12. Hình Usecase Quên mật khẩu và Reset mật khẩu .................................21
Hình 4.13. Hình Usecase Đăng nhập......................................................................22
Hình 4.14. Hình Usecase Xem giỏ hàng.................................................................23
Hình 4.15. Hình Usecase Thanh tốn .....................................................................24
Hình 4.16. Hình Usecase Review sản phẩm ...........................................................25
Hình 4.17. Hình Usecase Tìm kiếm sản phẩm ........................................................26
Hình 4.18. Hình Usecase Đăng ký .........................................................................27
Hình 4.19. Hình mơ tả các thành phần ứng dụng....................................................30
Hình 4.20. Hình tổ chức thư mục/ package trong backend .....................................31
Hình 4.21. Hình tổ chức thư mục/ package trong frontend .....................................34
Hình 4.22. Hình lược đồ cơ sở dữ liệu ...................................................................40
Hình 4.23. Màn hình chính của trang web khi người dùng truy cập hệ thống .........40
Hình 4.24. Màn hình đăng nhập giúp khách hàng vào trang web để xem và mua các
sản phẩm................................................................................................................41
Hình 4.25. Màn hình giúp khách hàng tạo tài khoản ..............................................42

Hình 4.26. Màn hình Quên mật khẩu .....................................................................42
Hình 4.27. Màn hình tạo mật khẩu mới cho khách hàng.........................................43


Hình 4.28. Màn hình có chức năng quản lý khách hàng, nhân viên, sản phẩm,… của
admin .....................................................................................................................44
Hình 4.29. Màn hình có các chức năng quản lý khách hàng, sản phẩm… của nhân
viên ........................................................................................................................45
Hình 4.30. Màn hình quản lý tài khoản người dùng của admin ..............................45
Hình 4.31. Màn hình quản lý sản phẩm của admin .................................................46
Hình 4.32. Màn hình quản lý danh mục của admin ................................................47
Hình 4.33. Màn hình thống kê doanh thu trong 1 năm............................................48
Hình 4.34. Màn hình có chức năng quản lý nhãn hiệu của nhân viên .....................49
Hình 4.35. Màn hình theo dõi đơn hàng khách hàng của nhân viên ........................50
Hình 4.36. Màn hình xem danh sách sản phẩm (1) .................................................51
Hình 4.37. Màn hình xem danh sách sản phẩm (2) .................................................51
Hình 4.38. Màn hình xem chi tiết sản phẩm ...........................................................52
Hình 4.39. Màn hình review sản phẩm ...................................................................53
Hình 4.40. Màn hình hiển thị giỏ hàng ...................................................................54
Hình 4.41. Màn hình hiển thị tình trạng đơn hàng bên khách hàng .........................55
Hình 4.42.Màn hình trang chủ (mobile) .................................................................56
Hình 4.43. Màn hình đăng nhập (mobile) ............................................................... 57
Hình 4.44. Màn hình đăng ký (mobile) ..................................................................58
Hình 4.45. Màn hình giỏ hàng (mobile) .................................................................59
Hình 4.46. Màn hình danh mục category (mobile) .................................................60
Hình 4.47. Màn hình lọc sản phẩm (mobile) ..........................................................61
Hình 4.48. Màn hình thơng tin cá nhân (mobile) ....................................................62
Hình 4.49. Màn hình chi tiết sản phẩm (mobile) ....................................................64
Hình 4.50. Màn hình đơn hàng (mobile) ................................................................ 65
Hình 4.51. Màn hình thay đổi mật khẩu (mobile) ...................................................66

Hình 4.52. Màn hình đánh giá sản phẩm (mobile) ..................................................67
Hình 4.53. Lược đồ tuần tự chức năng Đăng ký .....................................................68
Hình 4.54. Lược đồ tuần tự chức năng Đăng nhập .................................................68
Hình 4.55. Lược đồ tuần tự chức năng Xem sản phẩm ...........................................69
Hình 4.56. Lược đồ tuần tự chức năng Thêm sản phẩm .........................................69


Hình 4.57. Lược đồ tuần tự chức năng Sửa sản phẩm ............................................70
Hình 4.58. Lược đồ tuần tự chức năng Xố sản phẩm ............................................70
Hình 4.59. Lược đồ tuần tự chức năng Thêm loại sản phẩm...................................71
Hình 4.60. Lược đồ tuần tự chức năng Xố loại sản phẩm .....................................71
Hình 4.61. Lược đồ tuần tự chức năng Mua hàng...................................................72
Hình 4.62. Lược đồ tuần tự chức năng Theo dõi đơn hàng .....................................72
Hình 4.63. Lược đồ tuần tự chức năng Quản lý đơn hàng ......................................73
Hình 4.64. Lược đồ lớp cho hệ thống Shop Phụ Kiện ............................................73
Hình 5.1. Hình đăng ký thành cơng ........................................................................76
Hình 5.2. Hình lỗi email đăng ký ...........................................................................76
Hình 5.3. Hình đăng ký thiếu thơng tin ..................................................................77
Hình 5.4. Hình đăng ký mật khẩu dưới 8 ký tự ......................................................77
Hình 5.5. Hình đăng ký với xác nhận mật khẩu khơng khớp ..................................78
Hình 5.6. Hình đăng nhập sai email .......................................................................78
Hình 5.7. Hình đăng nhập sai mật khẩu..................................................................79
Hình 5.8. Hình đăng nhập thành cơng ....................................................................79
Hình 5.9. Hình cập nhật thơng tin cá nhân .............................................................80
Hình 5.10. Hình qn mật khẩu .............................................................................80
Hình 5.11. Hình admin quản lí khách hàng ............................................................81
Hình 5.12. Hình admin xố khách hàng .................................................................81
Hình 5.13. Hình admin quản lí nhân viên ............................................................... 82
Hình 5.14. Hình admin quản lí sản phẩm ............................................................... 82
Hình 5.15. Hình admin xố sản phẩm ....................................................................83

Hình 5.16. Hình admin lọc sản phẩm .....................................................................83
Hình 5.17. Hình admin quản lí danh mục ............................................................... 84
Hình 5.18. Hình admin tạo danh mục .....................................................................84
Hình 5.19. Hình admin xố danh mục ....................................................................85
Hình 5.20. Hình admin thống kê ............................................................................85
Hình 5.21.Hình nhân viên quản lý khách hàng .......................................................86
Hình 5.22. Hình nhân viên tạo thương hiệu ............................................................86
Hình 5.23. Hình nhân viên liệt kê sản phẩm ...........................................................87


Hình 5.24. Hình nhân viên cập nhật sản phẩm .......................................................87
Hình 5.25. Hình nhân viên tạo sản phẩm................................................................ 88
Hình 5.26. Hình nhân viên tìm kiếm sản phẩm thành cơng ....................................88
Hình 5.27. Hình nhân viên quản lý đơn hàng .........................................................89
Hình 5.28. Hình nhân chấp nhận đơn đang xử lý....................................................89
Hình 5.29. Hình nhân viên chấp nhận đơn hồn thành ...........................................90
Hình 5.30. Hình nhân viên xem chi tiết đơn khách hàng ........................................90
Hình 5.31. Hình nhân viên theo dõi đơn khách hàng ..............................................91
Hình 5.32. Hình nhân viên xem chi tiết đơn khách hàng ........................................91
Hình 5.33. Hình khách hàng xem danh sách sản phẩm ...........................................92
Hình 5.34. Hình khách hàng tìm kiếm sản phẩm ....................................................92
Hình 5.35. Hình khách hàng sắp xếp sản phẩm ......................................................93
Hình 5.36. Hình khách hàng thay đổi bố cục ..........................................................93
Hình 5.37. Hình khách hàng phân trang sản phẩm .................................................94
Hình 5.38. Hình khách hàng xem chi tiết sản phẩm................................................94
Hình 5.39. Hình khách hàng xem review sản phẩm................................................95
Hình 5.40. Hình khách hàng tạo review sản phẩm..................................................95
Hình 5.41. Hình khách hàng xố review sản phẩm .................................................96
Hình 5.42. Hình khách hàng sửa review sản phẩm .................................................96
Hình 5.43. Hình khách hàng thêm vào giỏ hàng .....................................................97

Hình 5.44. Hình khách hàng xố sản phẩm trong giỏ hàng.....................................97
Hình 5.45. Hình khách hàng thanh tốn với PayPal................................................98
Hình 5.46. Hình khách hàng khơng thanh toán được ..............................................99


DANH MỤC BẢNG BIỂU
Bảng 4.1 .Usecase Xem thông tin khách hàng ........................................................12
Bảng 4.2 .Usecase Tạo sản phẩm ...........................................................................12
Bảng 4.3 . Usecase Update sản phẩm .....................................................................13
Bảng 4.4. Usecase Tạo nhãn hiệu...........................................................................13
Bảng 4.5. Usecase Xác nhận đơn hàng...................................................................14
Bảng 4.6. Usecase Xoá sản phẩm...........................................................................15
Bảng 4.7. Usecase Tạo danh mục...........................................................................16
Bảng 4.8. Usecase Xoá danh mục ..........................................................................16
Bảng 4.9. Usecase Xoá nhân viên ..........................................................................17
Bảng 4.10. Usecase Xoá khách hàng ......................................................................17
Bảng 4.11. Usecase Xem thống kê .........................................................................18
Bảng 4.12. Usecase Update thông tin cá nhân ........................................................19
Bảng 4.13. Usecase Đăng xuất ...............................................................................20
Bảng 4.14. Usecase Reset mật khẩu .......................................................................22
Bảng 4.15. Usecase Đăng nhập ..............................................................................22
Bảng 4.16. Usecase Thêm vào giỏ hàng .................................................................23
Bảng 4.17. Usecase Xoá khỏi giỏ hàng ..................................................................24
Bảng 4.18. Usecase Thanh toán .............................................................................24
Bảng 4.19. Usecase Review sản phẩm ...................................................................25
Bảng 4.20. Usecase Xoá review .............................................................................26
Bảng 4.21. Usecase Update review ........................................................................26
Bảng 4.22. Usecase Tìm kiếm sản phẩm ................................................................ 27
Bảng 4.23. Usecase Đăng ký..................................................................................27
Bảng 4.24. Bảng các library được sử dụng trong dự án backend ............................33

Bảng 4.25. Bảng các framework được sử dụng trong dự án backend......................34
Bảng 4.26. Bảng các library được sử dụng trong dự án frontend ............................37
Bảng 4.27. Bảng các thao tác ở màn hình trang chủ ...............................................41
Bảng 4.28. Bảng các thao tác ở màn hình đăng nhập..............................................41
Bảng 4.29. Bảng các thao tác ở màn hình đăng ký .................................................42
Bảng 4.30. Bảng các thao tác ở màn hình quên mật khẩu .......................................43


Bảng 4.31. Bảng các thao tác ở màn hình Reset password .....................................43
Bảng 4.32. Bảng các thao tác ở màn hình quên mật khẩu .......................................44
Bảng 4.33. Bảng các thao tác ở màn hình quản lý người dùng của admin ..............46
Bảng 4.34. Bảng các thao tác ở màn hình quản lý sản phẩm ..................................47
Bảng 4.35. Bảng các thao tác ở màn hình quản lý danh mục ..................................47
Bảng 4.36. Bảng các thao tác ở màn hình thống kê ................................................48
Bảng 4.37. Bảng các thao tác ở màn hình quản lý nhãn hiệu ..................................49
Bảng 4.38. Bảng các thao tác ở màn hình quản lý đơn hàng...................................50
Bảng 4.39. Bảng các thao tác ở màn hình xem danh sách sản phẩm (1) .................51
Bảng 4.40. Bảng các thao tác ở màn hình xem danh sách sản phẩm (2) .................52
Bảng 4.41. Bảng các thao tác ở màn hình xem chi tiết sản phẩm............................53
Bảng 4.42. Bảng các thao tác ở màn hình xem review sản phẩm ............................54
Bảng 4.43. Bảng các thao tác ở màn hình xem giỏ hàng.........................................54
Bảng 4.44. Bảng các thao tác ở màn hình theo dõi đơn hàng..................................55
Bảng 4.45. Bảng các thao tác ở màn hình trang chủ (mobile) .................................57
Bảng 4.46. Bảng các thao tác ở màn hình đăng nhập (mobile) ............................... 57
Bảng 4.47. Bảng các thao tác ở màn hình đăng ký (mobile) ...................................58
Bảng 4.48. Bảng các thao tác ở màn hình giỏ hàng (mobile) ..................................59
Bảng 4.49. Bảng các thao tác ở màn hình danh mục (mobile) ................................ 61
Bảng 4.50. Bảng các thao tác ở màn hình lọc sản phẩm (mobile) ...........................62
Bảng 4.51. Bảng các thao tác ở màn hình thơng tin cá nhân (mobile).....................63
Bảng 4.52. Bảng các thao tác ở màn hình chi tiết sản phẩm (mobile) .....................64

Bảng 4.53. Bảng các thao tác ở màn hình đơn hàng (mobile) .................................65
Bảng 4.54. Bảng các thao tác ở màn hình đổi mật khẩu (mobile) ...........................66
Bảng 4.55. Bảng các thao tác ở màn hình đánh giá sản phẩm (mobile) ..................67


DANH MỤC TỪ VIẾT TẮT
1. MERN: MongoDB - ExpressJS - ReactJS - NodeJS
2. DB: Database
3. UC: Usecase
4. CSDL: Cơ sở dữ liệu
5. RDBMS: Relational Database Management System
6. JSON: JavasScript Object Notation
7. JS: JavaScript
8. SEO: Search Engine Optimization
9. HTML: Hyper Text Markup Language
10. CSS: Cascade Style Sheets
11. REST: Representational State Transfer
12. API: Application Programming Interface


Chương 1: Tổng quan

CHƯƠNG 1 : TỔNG QUAN
1.1. Lý do chọn đề tài
Khi nền kinh tế trên thế giới phát triển, ngành công nghệ thông tin trở thành một
trợ thủ, điều không thể thiếu với tất cả các ngành nghề, thời gian con người gắn bó với
cơng việc ngày càng nhiểu và tình hình dịch bệnh ngày càng phức tạp thì việc ra ngồi
các cửa hàng để mua sắm rất bất tiện và nguy hiểm tới sức khỏe. Trong những năm gần
đây, thị trường kinh doanh trực tuyến ngày càng đa dạng và việc mua sắm online là một
giải pháp hết sức cần thiết và phù hợp, giúp bảo vệ sức khỏe con người. Chính vì vậy

mà nhóm em đã cùng nhau lên ý tưởng và xây dựng nên một “ Website và App Mobile
về kinh doanh phụ kiện máy tính”, có thể giúp khách hàng mua sắm và lựa chọn sản
phẩm một cách tốt nhất và tiện lợi nhất.
1.2. Tính cấp thiết của đề tài
Trong bối cảnh tình hình Việt Nam nói riêng và thế giới nói chung, từ cuối năm
2019, các nước trên thế giới đã dần hứng chịu hậu quả của đại dịch Covid-19 gây ra. Cụ
thể, năm 2021 là năm mà Việt Nam có diễn biến Covid-19 xảy ra trầm trọng, hầu hết
các doanh nghiệp vừa và nhỏ, các hàng quán ăn uống, các công ty cung cấp dịch vụ phải
đóng cửa. Đặc biệt, học sinh - sinh viên từ cấp 1 đến cấp bậc sau phổ thông đều phải
nghỉ học trực tiếp và làm quen với việc học trực tuyến. Điều này gây ra khó khăn khơng
nhỏ đối với các gia đình và bản thân những bạn sinh viên - học sinh đó trong việc thiếu
các sản phẩm công nghệ để phục vụ việc học trực tuyến tốt hơn, cụ thể là: máy tính xách
tay và máy tính để bàn, điện thoại, máy tính bảng, đặc biệt là các linh kiện dành cho
máy tính. Và website kinh doanh phụ kiện máy tính, cùng với app mobile kinh
doanh phụ kiện máy tính ra đời với mục đích khắc phục tối đa những khó khăn mà
dịch Covid-19 mang lại đối với học sinh - sinh viên.
1.3. Mục tiêu nghiên cứu
Nhằm đáp ứng nhu cầu lựa chọn các mặt hàng hiện đại và mới nhất hiện nay, thao
tác mua sắm dễ dàng, nhanh chóng, nắm được chi tiết sản phẩm cần mua, nhiều nhãn
hàng sẽ giúp khách hàng có nhiều lựa chọn, thiết kế đơn giản dễ thao tác.

2


Chương 1: Tổng quan
1.4. Kết quả dự kiến đạt được
Xây dựng được 2 nền tảng đó là trang web kinh doanh phụ kiện máy tính và app
mobile kinh doanh phụ kiện máy tính, nhằm kết nối giữa những người có nhu cầu với
các sản phẩm linh kiện máy tính như: chuột, bàn phím, USB, màn hình máy tính, …và
nhóm chúng em về nền tảng website đã sử dụng công nghệ MERN stack, và ở nền tảng

app mobile đã sử dụng công nghệ Flutter
1.5. Môi trường hoạt động
Editor: Visual Studio Code.
Công nghệ:
Back-End: Javascript (NodeJS).
Front-End: HTML, CSS, Javascript (ReactJS).
Mobile: Flutter
Database: MongoDB.
Host: Heroku.
1.6. Ràng buộc
Môi trường hoạt động cần phải kết nối Internet.

3


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

CHƯƠNG 2 : CƠ SỞ LÝ THUYẾT
2.1. Cơ sở lý thuyết Front-end
Nhóm sẽ sử dụng ReactJS là công cụ để phát triển front-end.
ReactJS là một thư viện trong đó có chứa nhiều JavaScript mã nguồn mở và cha
đẻ của ReactJS là Facebook. Mục đích của việc tạo ra ReactJS là để tạo ra những ứng
dụng website hấp dẫn với tốc độ nhanh và hiệu quả cao với những mã hóa tối thiểu. Và
mục đích chủ chốt của ReactJS là mỗi website khi đã sử dụng ReactJS thì phải chạy thật
mượt thật nhanh và có khả năng mở rộng cao và đơn giản thực hiện. [9]

Hình 2.1.Giới thiệu về ReactJS [10]

Lợi ích khi sử dụng ReactJS: [9]
Lợi ích đầu tiên mà ReactJS đó chính là việc tạo ra cho chính bản thân nó một dom

ảo, đây là nơi mà các component được tồn tại trên đó. Việc tạo ra dom như vậy giúp cải
thiện hiệu suất làm việc rất nhiều, khi có tính tốn cần thay đổi hoặc cần cập nhật những
gì lên Dom thì ReactJS đều tính tốn trước và việc cịn lại chỉ là thực hiện chúng lên
DOM.
Lợi ích thứ hai mà ReactJS đem lại đó chính là việc viết các đoạn code JS sẽ trởi
nên dễ dàng hơn vì nó sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX nghĩa là
cú pháp này cho phép ta trộn được giữa code HTML và Javascript.
Có nhiều cơng cụ phát triển là lợi ích tiếp theo của ReactJS.
Thân thiện với SEO: đây là một trong những điều đặc biệt và chỉ có mỗi ReactJS,
đây cũng chính là vấn đề lớn của các JS Frameworks vì hầu như các JS Frameworks
khơng thân thiện với các cổ máy tìm kiếm mặc dù đã được cải thiện nhiều. Còn riêng
4


Chương 2: Cơ sở lý thuyết
đối với ReactJS thì khá tự hào vì khơng nằm trong nhóm khơng thân thiện với SEO vì
dưới sự hỗ trợ của các render và trả về trình duyệt dưới dạng webpage khi mà bạn chạy
ReactJS trên sever và các virtual DOM. Chính vì lý do này mà React có thể đáp ứng đầy
đủ được tính SEO Friendly.
2.2. Cơ sở lý thuyết Back-end
2.2.1. NodeJS
Nhóm sẽ sử dụng NodeJS là môi trường để phát triển back-end.
NodeJS là một nền tảng phát triển độc lập được xây dựng ở trên Javascript
Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách
nhanh chóng và dễ dàng mở rộng. [11]

Hình 2.2.Giới thiệu về NodeJS. [11]

Lý do để tự tin khi sử dụng Node: [11]
Các ứng dụng NodeJS được viết bằng JavaScript, ngôn ngữ này là một ngôn ngữ

khá thông dụng. Theo tác giả của ngơn ngữ JavaScript, Ryan Dahl: “Javascript có những
đặc tính mà làm cho nó rất khác biệt so với các ngơn ngữ lập trình động cịn lại, cụ thể
là nó khơng có khái niệm về đa luồng, tất cả là đơn luồng và hướng sự kiện.”
Nodejs chạy đa nền tảng phía server, sử dụng kiến trúc hướng sự kiện Eventdriven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả.
Có thể chạy ứng dụng NodeJS ở bất kỳ đâu trên máy Mac – Window – Linux, hơn
nữa cộng đồng NodeJS rất lớn và hồn tồn miễn phí.
Các ứng dụng NodeJS đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị.

5