Xây dựng website bán đồ công nghệ sử dụng mern stack

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 BÁN ĐỒ CÔNG NGHỆ GVHD: Th.S LÊ THỊ MINH CHÂU SVTH: NGUYỄN VĂN TỪ LÊ TẤN Q SKL009521 Tp.Hồ Chí Minh, năm 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN  NGUYỄN VĂN TỪ - 18110389 LÊ TẤN QUÍ - 18110350 Đề Tài: XÂY DỰNG WEBSITE BÁN ĐỒ CƠNG NGHỆ KHĨA LUẬN TỐT NGHIỆP GIÁO VIÊN HƯỚNG DẪN ThS LÊ THỊ MINH CHÂU KHOÁ 2018 – 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THƠNG TIN KHĨA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ SINH VIÊN THỰC HIỆN: Nguyễn Văn Từ : 18110389 Lê Tấn Quí : 18110350 GIÁO VIÊN HƯỚNG DẪN: Thạc sĩ Lê Thị Minh Châu TP HỒ CHÍ MINH – 2022 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên 1: LÊ TẤN QUÍ MSSV1: 18110350 Họ tên sinh viên 2: NGUYỄN VĂN TỪ MSSV2: 18110389 Ngành: Công nghệ thông tin Tên đề tài: WEBSITE BÁN ĐỒ CÔNG NGHỆ SỬ DỤNG MERN STACK Họ tên Giáo viên hướng dẫn: ThS.LÊ THỊ MINH CHÂU 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: Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng năm 20 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên 1: LÊ TẤN QUÍ MSSV1: 18110350 Họ tên sinh viên 2: NGUYỄN VĂN TỪ MSSV2: 18110389 Ngành: Công nghệ thông tin Tên đề tài: WEBSITE BÁN ĐỒ CÔNG NGHỆ SỬ DỤNG MERN STACK Họ tên Giáo viên phản biện: 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: Đánh giá loại: 10 Điểm: Tp Hồ Chí Minh, ngày tháng năm 20 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) LỜI CẢM ƠN Lời đầu tiên, chúng em xin chân thành cảm ơn Cô Lê Thị Minh Châu, người trực tiếp giảng dạy, truyền đạt kiến thức quý báu tận tình giúp cho nhóm chúng em suốt q trình thực đề tài Chúng em xin gửi lời cảm ơn sâu sắc đến tất giảng viên khoa Công Nghệ Thông Tin thuộc trường đại học Sư Phạm Kỹ Thuật thành phố Hồ Chí Minh dẫn dắt tạo điều kiện cho chúng em hoàn thành tiểu luận Với điều kiện thời gian kinh nghiệm hạn chế học viên, đồ án khơng thể tránh thiếu sót Chúng em mong nhận bảo, đóng góp ý kiến thầy để bọn em bổ sung nâng cao kiến thức nhằm phục vụ tốt đồ án sau MỤC LỤC PHẦN MỞ ĐẦU 14 Tính cấp thiết đề tài: 14 Vì vậy, nhóm chúng em thực đề tài:”Website bán đồ công nghệ sử dụng MERN STACK” 14 Mục đích đề tài: 14 Cách tiếp cận phạm vi nghiên cứu: 15 PHẦN NỘI DUNG 16 CHƯƠNG GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG VÀ Ý TƯỞNG VỀ CÁCH LẬP TRÌNH ĐỂ XÂY DỰNG WEBSITE BÁN HÀNG 16 I NODE.JS: 16 Giới thiệu 16 Lịch sử hình thành phát triển: 16 Ưu nhược điểm Node.js: 18 Công dụng Node.js đề tài: 19 Cài đặt 20 II MONGODB: 20 Giới thiệu NoSQL: MongoDB: Ưu nhược điểm MongoDB: Công dụng MongoDB đề tài: Cài đặt: 20 21 22 23 23 III REACTJS: 32 ReactJS: 32 IV REACTJS: 34 ExpressJS: 34 CHƯƠNG TỔNG QUAN VỀ CÁC WEBSITE TƯƠNG TỰ 37 I CLICKBUY.COM 37 Giới thiệu: 37 Ưu điểm: 38 Các tính bật: 38 II WALMART.COM 39 Giới thiệu: 39 Ưu điểm: 39 Các tính bật: III THEGIOIDIDONG.COM: 40 41 Giới thiệu: 41 Ưu điểm: 42 Các tính bật: 42 IV EBAY.COM: 43 Giới thiệu: 43 Ưu điểm: 43 Các tính bật: 44 V SHOPEE.VN: 45 Giới thiệu: 45 Ưu điểm: 45 Các tính bật: 45 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ WEBSITE BÁN ĐỒ CÔNG NGHỆ 47 I ĐẶC TẢ ĐỀ TÀI:47 II THIẾT KẾ CƠ SỞ DỮ LIỆU: 48 Thiết kế sở liệu mức quan niệm: 48 Thiết kế sở liệu mức logic: 48 Chuyển sang sở liệu MongoDB: 52 III THIẾT KẾ CHỨC NĂNG: 59 Xây dựng biểu đồ use case: 59 Xây dụng biểu đồ trình tự cho chức năng: 76 Trình bày chức giải thuật: 86 IV THIẾT KẾ GIAO DIỆN: .105 PHẦN KẾT LUẬN 113 Kết đạt được: .113 Những điểm hạn chế: .113 Hướng phát triển đề tài: .113 TÀI LIỆU THAM KHẢO 114 DANH MỤC HÌNH VẼ Hình Node.js 16 Hình Cài đặt Node.js thành cơng 20 Hình MongoDB 21 Hình Cài đặt MongoDB 24 Hình Cài đặt MongoDB 24 Hình Cài đặt MongoDB 25 Hình Cài đặt MongoDB 25 Hình Cài đặt MongoDB 26 Hình Cài đặt MongoDB 26 Hình 10 Cài đặt MongoDB 27 Hình 11 Cài đặt MongoDB 27 Hình 12 Cài đặt MongoDB 28 Hình 13 Cài đặt MongoDB 28 Hình 14 Cài đặt MongoDB Compass 29 Hình 15 Cài đặt MongoDB Compass 29 Hình 16 Cài đặt MongoDB Compass 30 Hình 17 Cài đặt MongoDB Compass 30 Hình 18 Cài đặt MongoDB Compass 31 Hình 19 ReactJS 32 Hình 20 ExpressJS 34 Hình 21 ClickBuy 37 Hình 22 Walmart 39 Hình 23 thegioididong 41 Hình 24 eBay 43 Hình 25 Shopee 45 Hình 26 Sơ đồ ERD 48 Hình 27 Collection products 55 Hình 28 Collection Orders 57 Hình 29 Collection Users 58 Hình 30 Sơ đồ Use Case 60 Hình 31 Usercase đăng xuất 61 Hình 32 Usercase đăng kí 62 Hình 33 Usercase thêm vào giỏ hàng 63 Hình 34 Xóa mặt hàng khỏi giỏ hàng 64 Hình 35 Usercase Điều chỉnh số lượng mặt hàng 65 Hình 36 Usercase đặt hàng 66 Hình 37 Usercase Tìm sản phẩm 67 Hình 38 Usercase Lọc sản phẩm 67 Hình 39 Usercase Đánh giá 68 Hình 40 Usercase Thêm người dùng 69 Hình 41 Usercase Xóa người dùng 70 Hình 42 Usercase Chỉnh sửa người dùng 71 Hình 43 Usercase Thêm sản phẩm 72 Hình 44 Usercase Xóa sản phẩm 73 Hình 45 Usercase Chỉnh sửa sản phẩm 74 Hình 46 Usercase Xóa review 75 Hình 47 Sơ đồ chức đăng nhập 77 Hình 48 Sơ đồ chức đăng xuất 77 Hình 49 Sơ đồ chức thêm hàng vào giỏ 78 Hình 50 Sơ đồ chức xoá hàng khỏi giỏ 78 Hình 51 Sơ đồ chức chỉnh sửa số lượng giỏ 79 Hình 52 Sơ đồ chức đặt hàng 79 Hình 53 Sơ đồ chức thêm người dùng 80 Hình 54 Sơ đồ chức chỉnh sửa thông tin người dùng 81 Hình 55 Sơ đồ chức xóa người dùng 82 Hình 56 Sơ đồ chức thêm sản phẩm 83 Hình 57 Sơ đồ chức xóa sản phẩm 84 Hình 58 Sơ đồ chức sửa sản phẩm 85 Hình 59 Sơ đồ chức xóa đánh giá 86 Hình 60 Đăng nhập .105