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: 20 MongoDB: 21 Ưu nhược điểm MongoDB: 22 Công dụng MongoDB đề tài: 23 Cài đặt: 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: 40 III THEGIOIDIDONG.COM: 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 xố 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 exports.deleteOrder = catchAsyncErrors(async (req, res, next) => { const order = await Order.findById(req.params.id); if (!order) { return next(new ErrorHander("Order not found with this Id", 404)); } await order.remove(); res.status(200).json({ success: true, }); }); Bảng 41 Thuật tốn Xóa đơn hàng Chức Cập nhật đơn hàng (Admin) 103 // update Order Status Admin exports.updateOrder = catchAsyncErrors(async (req, res, next) => { const order = await Order.findById(req.params.id); if (!order) { return next(new ErrorHander("Order not found with this Id", 404)); } if (order.orderStatus === "Delivered") { return next(new ErrorHander("You have already delivered this order", 400)); } if (req.body.status === "Shipped") { order.orderItems.forEach(async (o) => { await updateStock(o.product, o.quantity); }); } order.orderStatus = req.body.status; if (req.body.status === "Delivered") { order.deliveredAt = Date.now(); } await order.save({ validateBeforeSave: false }); res.status(200).json({ success: true, }); }); async function updateStock(id, quantity) { const product = await Product.findById(id); product.Stock -= quantity; await product.save({ validateBeforeSave: false }); } Bảng 42 Thuật toán Cập nhật đơn hàng 104 IV THIẾT KẾ GIAO DIỆN: Đăng nhập Hình 60 Đăng nhập Đăng ký Hình 61 Đăng kí 105 Trang chủ Hình 62 Trang chủ Danh mục sản phẩm Hình 63 Danh mục sản phẩm 106 Chi tiết sản phẩm Hình 64 Chi tiết sản phẩm Giỏ hàng Hình 65 Giỏ hàng 107 Địa giao hàng Hình 66 Thơng tin giao hàng Hình 67 Thơng tin giao hàng 108 Hình 68 Thơng tin tốn Danh sách đơn hàng Hình 69 Danh sách đơn hàng 109 Chi tiết đơn hàng Hình 70 Chi tiết đơn hàng 110 Admin Danh sách sản phẩm Hình 71 Danh sách sản phẩm Danh sách đơn hàng Hình 72 Danh sách đơn hàng 111 Chỉ tiết đơn hàng + sửa đổi trạng thái Hình 73 Chi tiết đơn hàng 112 PHẦN KẾT LUẬN Kết đạt được: Quá trình thực tiểu luận chuyên ngành, nhóm đã: - Tham khảo tổng hợp lý thuyết từ nhiều nguồn khác thành báo cáo hồn chỉnh - Tìm hiểu khái niệm, lý thuyết MERN Stack để xây dựng website bán đồ công nghệ - Thực việc phân tích hệ thống thơng tin cho web thực xây dựng trang website bán đồ công nghệ có chứng đơn giản cơng nghệ nêu - Cài đặt website bao gồm chức năng: Đăng nhập vào website, Đăng kí website, Thêm hàng vào giỏ hàng, Chỉnh sửa giỏ hàng, Quản lí đơn hàng, Đặt hàng, Thanh tốn Stripe, Thay đổi thơng tin cá nhân, Thêm người dùng, Xóa người dùng, Chỉnh sửa thông tin người dùng, Thêm sản phẩm, Xóa sản phẩm, Chỉnh sửa sản phẩm, Xóa đánh giá Những điểm hạn chế: Giao diện website đơn giản, chưa thân thiện với người dùng Những chức cịn thiếu website đồ cơng nghệ: cho người sử dụng đánh giá sản phẩm, lập thống kê doanh thu, gợi ý sản phẩm cho khách hàng mua Hướng phát triển đề tài: Cải tiến website cho thân thiện phù hợp với khách hàng Bổ sung chức thiếu như: cho người sử dụng đánh giá sản phẩm, lập thống kê doanh thu Nghiên cứu xây dựng chức gợi ý sản phẩm cho khách hàng 113 TÀI LIỆU THAM KHẢO [1] shttps://www.mongodb.com/mern-stack [2] https://www.codecademy.com/learn/learn-nodejs?g_network=g&g_device=c&g_adid=525783088775&g_keyword=tutorial% 20node%20js&g_campaign=ROW+Language%3A+Pro++Broad&g_acctid=243-0397011&g_adtype=search&g_adgroupid=104765212062&g_keywordid=kwd337344085858&g_ca [3] https://www.udemy.com/course/full-stack-mern/ [4] https://www.npmjs.com/package/@stripe/react-stripe-js [5] https://www.youtube.com/watch?v=mI_-1tbIXQI [6] https://viblo.asia/p/cach-tao-va-deploy-mot-ung-dung-don-gian-lenheroku-Az45bAjOlxY [7] https://vi.wikipedia.org/wiki/Thegioididong.com [8] https://clickbuy.com.vn/ [9] https://www.ebay.com/ [10].https://viblo.asia/p/gioi-thieu-he-quan-tri-co-so-du-lieu-nosql-MongoDBoOVlYMLzl8W [11] https://viblo.asia/p/reactjs-uu-diem-va-nhuoc-diem-V3m5WzexlO7 [12].https://tothanhthuong1995.medium.com/1-s%E1%BB%B1-ra%C4%91%E1%BB%9Di-c%E1%BB%A7a-reactjs-a4d227ab2a [13] https://nq.com.vn/react-la-gi-cach-thuc-hoat-dong-va-loi-ich-khi-su-dungreact/ [14].https://kb.pavietnam.vn/su-khac-nhau-giua-react-js-voi-react-native.html [15] https://topdev.vn/blog/express-js-la-gi/ [16].https://itnavi.com.vn/blog/ExpressJS-la-gi [17].https://m.facebook.com/OnlineMarketing4Newbie/photos/a.51323663543 2382/618128238276554/?type=3&locale2=vi_VN [18] https://www.duhoctrungquoc.vn/wiki/vi/Nike,_Inc [19] https://marketingai.vn/dai-su-thuong-hieu-nike/ [20] https://pakago.com/tin-tuc/web-ebay-la-gi-ban-gi.html 114 115 116 S K L 0