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

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ự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Nguyễn Cao Trí MSSV 1: 19110482 Họ 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 ReactJS Họ tên Giáo viên hướng dẫn: TS Lê Văn Vinh NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Đ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ự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Nguyễn Cao Trí MSSV 1: 19110482 Họ 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 ReactJS Họ tên Giáo viên phản biện: ThS Trương Thị Ngọc Phượng NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Đ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 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 suốt trình làm đề tài Chúng em cảm ơn thầy đưa lời khuyên từ kinh nghiệm thực tiễn để định hướng cho chúng em với yêu cầu đề tài chọn, giải đáp thắc mắc đưa góp ý, chỉnh sửa kịp thời giúp chúng em khắc phục nhược điểm hoàn thành tốt thời hạn đề Chúng em xin gửi lời cảm ơn chân thành quý thầy khoa nói chung ngành Cơng Nghệ Thơng Tin nói riêng tận tình truyền đạt kiến thức cần thiết giúp chúng em có tảng để làm nên đề tài này, tạo điều kiện để chúng em tìm hiểu thực tốt đề tài Cùng với đó, chúng em xin gửi cảm ơn đến bạn khóa cung cấp nhiều thơng tin kiến thức hữu ích giúp chúng em hồn thiện đề tài Đề tài báo cáo chúng em thực khoảng thời gian ngắn, với kiến thức hạn chế nhiều hạn chế khác mặt kĩ thuật kinh nghiệm việc thực dự án phần mềm Do đó, q trình làm nên đề tài có thiếu sót điều tránh khỏi nên chúng em mong nhận ý kiến đóng góp quý báu quý thầy cô để kiến thức chúng em hồn thiện chúng em làm tốt lần sau Cuối lời, chúng em kính chúc thầy ln dồi sức khỏe thành công nghiệp trồng người Một lần chúng em xin chân thành cảm ơn Nhóm thực Nguyễn Cao Trí – 19110482 Nguyễn Hữu Tín – 19110474 KHÓA LUẬN TỐT NGHIỆP Trang Đ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ự – Hạnh Phúc ******* ******* ĐỀ CƯƠNG TIỂU LUẬN CHUYÊN NGÀNH Họ tên Sinh viên 1: Nguyễn Cao Trí MSSV 1: 19110482 Họ 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 ReactJS Giáo viên hướng dẫn: TS Lê Văn Vinh Nhiệm vụ tiểu luận: Lý thuyết - Tìm hiểu cơng nghệ: NodeJS, ReactJS, JSON Web Token - Tìm hiểu MongoDB để quản lý liệu Thực hành - Sử dụng NodeJS, ExpressJS để xây dựng Back-end, API - Ứng dụng JSON Web Token để xác thực phân quyền cho hệ thống API cho người dùng - Ứng dụng thư viện ReactJS để xây dựng xử lý giao diện Website - Sử dụng MongoDB làm hệ quản trị sở liệu để lưu trữ liệu hệ thống KHÓA LUẬN TỐT NGHIỆP Trang MỤC LỤC LỜI CẢM ƠN MỤC LỤC DANH MỤC HÌNH ẢNH 10 DANH MỤC BẢNG BIỂU 12 CHƯƠNG 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 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 Reactjs 17 2.3 MONGODB 18 2.3.1 Định nghĩa 18 2.3.2 Tính 19 2.4 JSON WEB TOKEN 19 2.4.1 Định nghĩa 19 2.4.2 Cấu trúc 20 CHƯƠNG KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HỐ 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 24 3.2.2 Yêu cầu phi chức 25 3.3 MƠ HÌNH HOÁ YÊU CẦU 26 3.3.1 Lược đồ Use case 26 KHÓA LUẬN TỐT NGHIỆP Trang 3.3.2 Đặc tả usecase 29 CHƯƠNG 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 Đăng nhập 51 4.2.2 Chức đăng kí 53 4.2.3 Chức đăng xuất 54 4.2.4 Chức xem thông tin cá nhân 55 4.2.5 Chức chỉnh sửa thông tin cá nhân 55 4.2.6 Chức xem danh sách địa 57 4.2.7 Chức thêm địa 57 4.2.8 Chức Chỉnh sửa địa 58 4.2.9 Chức Xem thông tin sản phẩm 59 4.2.10 Chức tra cứu sản phẩm 61 4.2.11 Chức thêm sản phẩm vào giỏ hàng 61 4.2.12 Chức xóa sản phẩm khỏi giỏ hàng 62 4.2.13 Chức toán 63 4.2.14 Chức Thêm sản phẩm 64 4.2.15 Chức Cập nhật sản phẩm 65 4.2.16 Chức xoá sản phẩm 65 4.2.17 Chức Thêm loại sản phẩm 67 4.2.18 Chức cập nhật loại sản phẩm 68 4.2.19 Chức xoá loại sản phẩm 69 4.2.20 Chức thêm người dùng 70 4.2.21 Chức chỉnh sửa thông tin người dùng 71 4.2.22 Chức thêm thương hiệu 73 4.2.23 Chức Cập nhật thương hiệu 74 4.2.24 Chức xoá thương hiệu 75 4.2.25 Chức cập nhật trạng thái đơn hàng 75 4.2.26 Chức 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 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 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 kiểm thử 113 5.2.2 Kết kiểm thử 114 CHƯƠNG 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 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 đồ Chức Đăng nhập 52 Hình 4.3: Lược đồ Chức Đăng ký 53 Hình 4.4: Lược đồ Chức Đăng xuất 54 Hình 4.5: Lược đồ Chức xem thông tin cá nhân 55 Hình 4.6: Lược đồ Chức Chỉnh sửa thông tin cá nhân 56 Hình 4.7: Lược đồ chức xem danh sách địa 57 Hình 4.8: Lược đồ chức thêm địa 58 Hình 4.9: Lược đồ chức Chỉnh sửa địa 59 Hình 4.10: Lược đồ Chức Xem thông tin sản phẩm 60 Hình 4.11: Lược đồ Chức tra cứu sản phẩm 61 Hình 4.12: Lược đồ thêm sản phẩm vào giỏ hàng 62 Hình 4.13: Lược đồ Chức xóa sản phẩm khỏi giỏ hàng 62 Hình 4.14: Lược đồ Chức toán 63 Hình 4.15: Lược đồ Chức Thêm sản phẩm 64 Hình 4.16: Lược đồ Chức Cập nhật sản phẩm 65 Hình 4.17: Lược đồ Chức xoá sản phẩm 66 Hình 4.18: Lược đồ Chức thêm loại sản phẩm 67 Hình 4.19: Lược đồ Chức cập nhật loại sản phẩm 68 Hình 4.20: Lược đồ Chức xoá loại sản phẩm 69 Hình 4.21: Lược đồ Chức thêm người dùng 70 Hình 4.22: Lược đồ Chức chỉnh sửa thông tin người dùng 71 Hình 4.23: Lược đồ Chức xoá người dùng 72 Hình 4.24: Lược đồ Chức thêm thương hiệu 73 Hình 4.25: Lược đồ Chức cập nhật thương hiệu 74 Hình 4.26: Lược đồ Chức xoá thương hiệu 75 Hình 4.27: Lược đồ Chức cập nhật trạng thái đơn hàng 76 Hình 4.28: Lược đồ Chức 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ủ 89 Hình 4.33: Giao diện trang chủ 90 Hình 4.34: Giao diện trang chủ 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