Tìm hiểu công nghệ mern stack và áp dụng xây dựng website thương mại điện tử

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 CƠNG NGHỆ THƠNG TIN TÌM HIỂU CƠNG NGHỆ MERN STACK VÀ ÁP DỤNG XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ GVHD: ThS NGUYỄN TRẦN THI VĂN SVTH : TRẦN LÊ THANH TUYỀN HUỲNH TẤN LỘC S K L0 Tp Hồ Chí Minh, tháng 5/2023 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO  KHĨA LUẬN TỐT NGHIỆP TÌM HIỂU CÔNG NGHỆ MERN STACK VÀ ÁP DỤNG XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ GVHD: ThS Nguyễn Trần Thi Văn Nhóm SVTH: Trần Lê Thanh Tuyền 19110012 Huỳnh Tấn Lộc 19110236 TP Hồ Chí Minh – tháng 05/2023 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** NHIỆM VỤ THỰC HIỆN KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên 1: Huỳnh Tấn Lộc MSSV: 19110236 Họ tên sinh viên 2: Trần Lê Thanh Tuyền MSSV: 19110012 Ngành: Công nghệ thông tin Giảng viên hướng dẫn: ThS Nguyễn Trần Thi Văn Ngày nhận đề tài: 20/02/2023 Ngày nộp đề tài: 29/05/2023 Tên đề tài: TÌM HIỂU CÔNG NGHỆ MERN STACK VÀ ÁP DỤNG XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ Các số liệu, tài liệu ban đầu: Khảo sát trạng qua website thương mại điện tử bán rau củ mạng ngày Nội dung thực đề tài: Tìm hiểu lý thuyết cơng nghệ MERN STACK, thuật tốn áp dụng để thực đề tài: - Frontend: React JS Framework, Redux, Tailwind CSS, Bootstrap CSS - Backend: Node.js, Express JS Framework - Database: Mongo DB Atlas Sản phẩm: Xây dựng website thương mại điện tử bán rau củ với chức chính: - Tìm kiếm xem chi tiết sản phẩm - Thêm sản phẩm vào giỏ hàng - Thanh toán đơn hàng - Quản lý hóa đơn, sản phẩm danh mục sản phẩm TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Họ tên sinh viên 1: Huỳnh Tấn Lộc MSSV: 19110236 Họ tên sinh viên 2: Trần Lê Thanh Tuyền MSSV: 19110012 Ngành: Công nghệ thông tin Tên đề tài: TÌM HIỂU CƠNG NGHỆ MERN STACK VÀ ÁP DỤNG XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ Giảng viên hướng dẫn: ThS Nguyễn Trần Thi Vă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: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: ….…… (Bằng chữ: .) Tp Hồ Chí Minh, ngày… tháng… năm 2023 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ự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN Họ tên sinh viên 1: Huỳnh Tấn Lộc MSSV: 19110236 Họ tên sinh viên 2: Trần Lê Thanh Tuyền MSSV: 19110012 Ngành: Công nghệ thông tin Tên đề tài: TÌM HIỂU CƠNG NGHỆ MERN STACK VÀ ÁP DỤNG XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ Giảng viên phản biện: PGS TS Hoàng Văn Dũ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: ….…… (Bằng chữ: .) Tp Hồ Chí Minh, ngày… tháng… năm 2023 Giảng viên phản biện (Ký & ghi rõ họ tên) LỜI CẢM ƠN Để hoàn thành tốt đề tài này, chúng em xin gửi lời cảm ơn chân thành đến quý thầy cô khoa Đào tạo Chất Lượng Cao nói chung ngành Cơng Nghệ Thơng Tin nói riêng ln tận tình truyền đạt kiến thức, kỹ bổ ích suốt q trình học tập Bên cạnh đó, chúng em xin cảm ơn trường Đại học Sư phạm Kỹ thuật TP.HCM tạo điều kiện sở vật chất điều kiện cần thiết khác giúp chúng em có mơi trường học tập thực đề tài cách thuận lợi Đặc biệt, chúng em xin gửi lời cảm ơn chân thành đến giảng viên, thạc sĩ Nguyễn Trần Thi Văn, người trực tiếp hỗ trợ chúng em suốt trình thực đề 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 nhóm với yêu cầu đề tài Bên cạnh đó, chúng em cảm ơn thầy ln 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 thời hạn đề Đề tài chúng em thực khoảng thời gian không dài, với kiến thức hạn chế mặt kỹ thuật kinh nghiệm việc triển khai dự án phần mềm Do đó, q trình thực đề 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 từ quý thầy để cải thiện sau Cuối lời, chúng em kính chúc q 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! Tp Hồ Chí Minh, ngày 29 tháng 05 năm 2023 Nhóm sinh viên thực MỤC LỤC LỜI CẢM ƠN CHƯƠNG 1: TỔNG QUAN 16 1.1 Tính cấp thiết đề tài 16 1.2 Mục tiêu đề tài 16 1.3 Nội dung nghiên cứu 17 1.4 Phương pháp nghiên cứu 17 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 18 2.1 Giới thiệu Technical Stack 18 2.1.1 Technical Stack gì? 18 2.1.2 Một số Stack thông dụng 18 2.2 Giới thiệu MERN Stack 18 2.2.1 Định nghĩa MERN Stack 18 2.2.2 Cách thức hoạt động MERN Stack 19 2.2.3 Vai trò MERN Stack 19 2.3 Giới thiệu MongoDB 20 2.3.1 Định nghĩa MongoDB 20 2.3.2 Định nghĩa MongoDB Atlas 20 2.3.3 Vai trò MongoDB 20 2.4 Giới thiệu ExpressJS 21 2.4.1 Định nghĩa ExpressJS 21 2.4.2 Một số tính Express 21 2.4.3 Vai trò Express 22 2.5 Giới thiệu ReactJS 22 2.5.1 Định nghĩa ReactJS 22 2.5.2 Vai trò ReactJS 22 2.5.3 Định nghĩa JSX 23 2.5.4 Định nghĩa Virtual Dom 23 2.5.5 Định nghĩa Hooks 23 2.5.6 Định nghĩa Component 23 2.6 Giới thiệu NodeJS 24 2.6.1 Định nghĩa NodeJS 24 2.6.2 Một số tính NodeJS 24 2.6.3 Vai trò NodeJS 24 2.7 Giới thiệu Redux 25 2.7.1 Định nghĩa Redux 25 2.7.2 Cách thức hoạt động Redux 25 2.7.3 Vai trò Redux 26 CHƯƠNG 3: KHẢO SÁT VÀ XÁC ĐỊNH YÊU CẦU 27 3.1 Khảo sát trạng 27 3.1.1 Website nước 27 3.1.1.1 https://fruitworld.co.nz/ 27 3.1.1.2 https://freshindiaorganics.com/ 30 3.1.2 Website nước 32 3.1.2.1 https://hoamau24h.com/ 32 3.1.2.2 https://bio-ngon.com/ 35 3.1.3 Kết luận sau khảo sát 37 3.1.3.1 Điểm giống websites 37 3.1.3.2 Điểm khác websites 38 3.2 Xác định yêu cầu 39 3.2.1 Yêu cầu chức 39 3.2.2 Yêu cầu phi chức 42 3.3 Mơ hình hóa u cầu 44 3.3.1 Danh sách tác nhân 44 3.3.2 Lược đồ Use Case 45 3.3.2.1 Module End-User 45 3.3.2.2 Module Administrator 46 3.3.3 Đặc tả Use Case 47 3.3.3.1 Guest 47 3.3.3.2 User 53 3.3.3.3 Administrator 61 CHƯƠNG 4: THIẾT KẾ HỆ THỐNG 72 4.1 Kiến trúc hệ thống 72 4.2 Lược đồ lớp 73 4.3 Lược đồ 73 4.3.1 Administrator Login 73 4.3.2 Administrator Create New Product 74 4.3.3 Administrator Update Product 75 4.3.4 Administrator Delete Product 75 4.3.5 Administrator Change The Order Status 76 4.3.6 Administrator View Statistical Page 76 4.3.7 Guest Filter Product 77 4.3.8 User Add to Cart 77 4.3.9 User Checkout 78 4.3.10 User View Order Tracking 78 4.4 Thiết kế sở liệu 79 4.4.1 Mơ hình sở liệu 79 4.4.2 Mô tả thuộc tính bảng 80 4.4.2.1 Bảng Product 80 4.4.2.2 Bảng User 80 4.4.2.3 Bảng Order 81 4.4.2.4 Bảng Category 81 4.4.2.5 Bảng DeliveryInfo 82 4.5 Thiết kế giao diện 82 4.5.1 Thiết kế giao diện hình Admin 82 4.5.1.1 Giao diện đăng nhập (Admin) 82 4.5.1.2 Giao diện trang chủ (Admin) 83 4.5.1.3 Giao diện trang quản lý người dùng 83 4.5.1.4 Giao diện quản lý user bị vơ hiệu hố 84 4.5.1.5 Giao diện quản lý sản phẩm 86 4.5.1.6 Giao diện quản lý sản phẩm bị xoá 87 4.5.1.7 Giao diện tạo sản phẩm 87 4.5.1.8 Giao diện cập nhật sản phẩm 88 4.5.1.9 Giao diện danh mục sản phẩm 89 4.5.1.10 Giao diện thêm danh mục sản phẩm 91 4.5.1.11 Giao diện cập nhật danh mục sản phẩm 92 4.5.1.12 Giao diện quản lý danh mục sản phẩm bị xoá 92 4.5.1.13 Giao diện quản lý hoá đơn 93 4.5.1.14 Giao diện thống kê 94 4.5.2 Thiết kế giao diện User 95 4.5.2.1 Giao diện đăng nhập 95 4.5.2.2 Giao diện đăng nhập 96 4.5.2.3 Giao diện Header 96 4.5.2.4 Giao diện Footer 97 4.5.2.5 Giao diện trang chủ 98 4.5.2.6 Giao diện chi tiết sản phẩm 99 4.5.2.7 Giao diện danh mục sản phẩm 101 4.5.2.8 Giao diện giỏ hàng 102 4.5.2.9 Giao diện thêm địa giao hàng 103 4.5.2.10 Giao diện sổ địa 104 4.5.2.11 Giao diện toán 105 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 106 5.1 Các công cụ 106 5.2 Các công nghệ 106 5.3 Cài đặt 106 5.4 Deploy 107 5.5 Kiểm thử 107 CHƯƠNG 6: KẾT LUẬN 110 6.1 Kết 110 6.2 Ưu điểm 111