Thông tin tài liệu
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 TÌM HIỂU EXPRESSJS, NEXTJS VÀ PHÁT TRIỂN WEBSITE BÁN ĐỒ ĐIỆN TỬ GVHD: TS LÊ VĂN VINH SVTH: NGUYỄN VĂN LÀNH SVTH: LÊ MẠNH HÙNG SKL 0 Tp Hồ Chí Minh, tháng 07/2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP TÌM HIỂU EXPRESSJS, NEXTJS VÀ PHÁT TRIỂN WEBSITE BÁN ĐỒ ĐIỆN TỬ SVTH : NGUYỄN VĂN LÀNH MSSV : 15110069 SVTH : LÊ MẠNH HÙNG MSSV : 15110058 Khoá : 2015 Ngành : CÔNG NGHỆ THÔNG TIN GVHD: TS LÊ VĂN VINH Tp Hồ Chí Minh, tháng 07 năm 2020 an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -Tp Hồ Chí Minh, ngày 29 tháng 06 năm 2020 NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP Họ và tên sinh viên: Lê Mạnh Hùng MSSV: 15110058 Họ và tên sinh viên: Nguyễn Văn Lành MSSV: 15110069 Ngành: Công nghệ thông tin Lớp: 15110CL4 Giảng viên hướng dẫn: TS Lê Văn Vinh Ngày nhận đề tài: 24/2/2020 Ngày nộp đề tài: 01/07/2020 Tên đề tài: Tìm hiểu ExpressJs, NextJs phát triển website bán đồ điện tử Nội dung thực đề tài: Tìm hiểu phát triển ứng dụng web bán đồ điện tử công nghệ ExpressJs NextJs Sản phẩm: Website bán đồ điện tử TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN an CỘNG HOÀ 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ÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên: Lê Mạnh Hùng MSSV: 15110058 Họ tên Sinh viên: Nguyễn Văn Lành MSSV: 15110069 Ngành: Công nghệ thông tin Tên đề tài: Tìm hiểu ExpressJs, NextJs phát triển website bán đồ điện tử 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: Bằng chữ: Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn an năm 20 CỘNG HOÀ 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ÁO VIÊN PHẢN BIỆN Họ tên Sinh viên: Lê Mạnh Hùng MSSV: 15110058 Họ tên Sinh viên: Nguyễn Văn Lành MSSV: 15110069 Ngành: Công nghệ thông tin Tên đề tài: Tìm hiểu ExpressJs, NextJs phát triển website bán đồ điện tử 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: Đề 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 Giáo viên phản biện an năm 20 LỜI CẢM ƠN Chúng em xin chân thành cảm ơn Khoa Đào Tạo Chất Lượng Cao, trường đại học Sư phạm Kỹ Thuật Thành phố Hồ Chí Minh tạo điều kiện thuận lợi cho chúng em học tập thực đồ án tốt nghiệp Chúng em xin chân thành cảm ơn quý thầy Khoa cơng nghệ thơng tận tình giảng dạy, trang bị cho em kiến thức quý báu thời gian vừa qua Chúng em xin bày tỏ lòng biết ơn sâu sắc tới thầy Lê Văn Vinh tận tình hướng dẫn bảo chúng em trình thực đề tài Bước đầu tìm hiểu cơng nghệ nhóm em cịn gặp nhiều khó khăn, khơng tránh khỏi thiết sót điều chắn, nhóm em mong nhận ý kiến đóng góp q báu thầy, bạn đọc để giúp tiểu luận hồn thiện Đồng thời trình độ lý luận kinh nghiệm thực tiễn hạn chế nên báo cáo tránh khỏi thiết sót, em mong nhận ý kiến đóng góp từ thầy, để em học thêm nhiều kinh nghiệm hoàn thành tốt cho luận văn tốt nghiệp tới Một lần nhóm em xin gửi lời cảm ơn chân thành đến thầy Lê Văn Vinh hướng dẫn tận tình cho nhóm để hồn thành đồ án Nhóm em xin chân thành cảm ơn! Nhóm sinh viên thực Nguyễn Văn Lành Lê Mạnh Hùng i an TÓM TẮT Đồ án website giới thiệu bán sản phẩm điện tử Website vận hành website thương mại điện tử, cung cấp cho người dùng giao diện dễ thao tác thiết kế theo nguyên lý responsive Do website hoạt động tảng web, mobile, tablet Hệ quản trị website cung cấp giao diện chuẩn trang admin thương mại điện tử, giúp admin dễ dàng quản lý thông tin xử lý đơn hàng Website có chức năng: Về phía người dùng: - Xem danh mục sản phẩm Tìm kiếm sản phẩm Xem chi tiết hình ảnh, mô tả, video clip sản phẩm Giỏ hàng Thanh tốn Quản lý thơng tin đặt hàng Quản lý profile cá nhân Đăng nhập, đăng xuất tài khoản , google facebook Về phía quản trị viên: - Quản lý thông tin đặt hàng Quản lý đơn hàng Quản lý danh mục sản phẩm Quản lý nhà cung cấp Quản lý account Quản lý thông tin chung website Xem số liệu thống kê Website sử dụng công nghệ: - Front-end: NextJS, Bootstrap - Back-end: ExpressJS - Database: MongoDB ii an SUMMARY Project is a selling website that introduces and sells electronic products The website operates like an e-commerce website, providing users with an interface that is relatively easy to operate and designed according to responsive principles Therefore, website can work on web, mobile, tablet platforms Admin system provides a standard interface of an e-commerce admin page, making it easy for admin to manage information as well as handling orders Website has the following functions: On the client side: - View product catalog Search for products View details of pictures, descriptions, video clips about the product Cart Pay Manage ordering information Manage personal profile Log in, log out, change your password with your account, google or facebook On the administrator side: - Manage ordering information Manage orders Manage product portfolio Account management See the statistics Website uses technologies: - Front-end: NextJS, Bootstrap Back-end: ExpressJS Database: MongoDB iii an MỤC LỤC LỜI CẢM ƠN i TÓM TẮT ii MỤC LỤC iv DANH MỤC CÁC TỪ VIẾT TẮT vii DANH MỤC CÁC BẢNG BIỂU viii DANH MỤC CÁC HÌNH ẢNH xi Chương 1: TỔNG QUAN 1.1 Lý chọn đề tài 1.2 Mục đích, nhiệm vụ đề tài 1.2.1 Mục đích 1.2.2 Nhiệm vụ 1.2.3 Phương pháp nghiên cứu 1.2.4 Kết đạt Chương 2: CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu ReactJS 2.1.1 ReactJS gì? 2.1.2 Các tính ReactJS 2.1.3 Tại nên sử dụng ReactJS? 2.2 Giới thiệu NextJS 2.2.1 NextJS gì? 2.2.2 Tại sử dụng NextJS? 2.3 Giới thiệu NodeJS 2.3.1 NodeJS gì? 2.3.2 Những ứng dụng viết NodeJS 2.3.3 Lý chọn NodeJS? 2.4 Giới thiệu Framework ExpressJS iv an 2.4.1 ExpressJS gì? 2.4.2 Cấu trúc ExpressJS 2.4.3 Router Express 10 2.4.4 Middleware ExpressJS 10 2.5 Giới thiệu MongoDB 11 2.5.1 Giới thiệu sở liệu NoSQL 11 2.5.2 Giới thiệu MongoDB 11 Chương 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 13 3.1 Khảo sát trạng 13 3.2 Xác định yêu cầu 19 3.2.1 Lược đồ Use case 19 3.2.2 Mô tả chức năng, kịch 20 Chương 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 36 4.1 Phân tích hệ thống 36 4.1.1 Chức phía Frontend 36 4.1.2 Chức phía Backend 40 4.2 Thiết kế hệ thống 44 4.2.1 Lược đồ lớp 44 4.2.2 Lược đồ tuần tự 45 4.3 Thiết kế sở liệu 68 4.3.1 Sơ đồ ERD 68 4.3.2 Lược đồ sở liệu 69 4.3.3 Mô tả liệu 70 4.4 Thiết kế giao diện 73 4.4.1 Trang quản trị 73 4.4.2 Trang người dùng 93 Chương 5: CÀI ĐẶT VÀ KIỂM THỬ 104 v an Bảng 4.32 Mô tả giao diện giỏ hàng Stt Tên Giảm Tăng Bỏ sản phẩm Kiểu Mô tả chi tiết Button Nhấn vào để giảm số lượng sản phẩm giỏ hàng Button Nhấn vào để tăng số lượng sản phẩm giỏ hàng Button Nhấn vào để loại bỏ sản phẩm giỏ hàng Hình 4.51 Giao diện xem nhanh sản phẩm Bảng 4.33 Mô tả giao diện xem nhanh sản phẩm Stt Tên Thêm vào giỏ hàng Kiểu Button Mô tả chi tiết Nhấn vào để thêm sản phẩm vào giỏ hàng 96 an Hình 4.52 Trang chi tiết sản phẩm 97 an Bảng 4.34 Mô tả trang chi tiết sản phẩm Stt Tên Trang chủ Category Kiểu Mua Button Mô tả chi tiết Nhấn vào để chuyển đến trang chủ Nhấn vào để chuyển đến trang sản phẩm thuộc category Nhấn vào để thêm sản phẩm vào giỏ hàng Hình 4.53 Trang hiển thị sản phẩm theo category Bảng 4.35 Mô tả trang hiển thị sản phẩm theo category Stt Tên Danh mục Kiểu Mô tả chi tiết Nhấn vào để hiển thị sản phẩm theo danh mục 98 an Hình 4.54 Trang hiển thị sản phẩm theo supplier Bảng 4.36 Mô tả trang hiển thị sản phẩm theo supplier Stt Tên Nhà cung cấp Checkbox nhà cung cấp Checkbox giá sản phẩm Kiểu Mô tả chi tiết Hiển thị tên nhà cung cấp checkbox Click vào checkbox để lọc nhà cung cấp checkbox Click vào checkbox để lọc giá sản phẩm 99 an Hình 4.55 Trang hiển thị thông tin tài khoản khách hàng Bảng 4.37 Mô tả trang hiển thị thông tin tài khoản khách hàng Stt Tên Tên khách hàng Kiểu Input Input Input Mô tả chi tiết Hiển thị tên khách hàng Nhấn vào để hiển thị thông tin khách hàng Nhập họ tên Nhập địa Nhập số điện thoại Thông tin tài khoản Họ tên Địa Số điện thoại Giới tính Email Cập nhật Checkbox Input Button Chọn giới tính Nhập email Nhấn vào để cập nhật 100 an Hình 4.56 Trang hiển thị tất hóa đơn Bảng 4.38 Mơ tả trang hiển thị tất hóa đơn Stt Tên Quản lý đơn hàng Xem chi tiết Nhận xét Kiểu Mô tả chi tiết Hiển thị trang quản lý đơn hàng Hiển thị modal chi tiết đơn hàng Hiển thị modal nhận xét 101 an Hình 4.57 Trang hiển thị chi tiết đơn hàng Bảng 4.39 Mô tả trang hiển thị chi tiết đơn hàng Stt Tên Ảnh sản phẩm Tên sản phẩm Số lượng Giá gốc Giá khuyến Giá sản phẩm Kiểu Mô tả chi tiết Hiển thị text ảnh sản phẩm Hiển thị text tên sản phẩm Hiển thị text số lượng Hiển thị text giá gốc Hiển thị text giá khuyến Hiển thị text giá sản phẩm 102 an Hình 4.58 Khung tìm kiếm Bảng 4.40 Mơ tả khung tìm kiếm Stt Tên Kiểu Mơ tả chi tiết Khung tìm kiếm input Nhâp thơng tin cần tìm kiếm 103 an Chương 5: CÀI ĐẶT VÀ KIỂM THỬ 5.1 Cài đặt Trong trình xây dựng đề tài, nhóm sử dụng phần mềm hỗ trợ sau: • Sử dụng Visual Studio Code v1.4.2 để viết code • Sử dụng node.js v12.3.1 • Sử dụng mongoose v5.7.14 để tạo sở liệu • Sử dụng trang web draw.io để vẽ sơ đồ UML, sequense, erd Cài đặt chung: - Bước 1: Cài đặt node.js trang chủ https://nodejs.org/en/download/ - Bước 2: Cài đặt git trang chủ https://git-scm.com/download/win - Bước 3: Cài đặt MongoDB trang chủ https://www.mongodb.com/download- center/community - Bước 4: Truy cập địa https://github.com/LanhNguyen97/DATN- WebsiteBanDoDienTu - Bước 5: Mở CommandLine lên gõ dòng lệnh sau để clone source code Backend FontEnd máy git clone https://github.com/LanhNguyen97/DATN-WebsiteBanDoDienTu.git Cài đặt chương trình BackEnd: - Bước 1: Truy cập vào folder DATN-WebsiteBanDoDienTu → back-end - Bước 2: Mở Mở CommandLine chạy lệnh npm install để cài gói package cần thiết cho chương trình - Bước 3: Sau cài đặt gói package thành cơng Ta chạy lệnh: npm run dev để chạy chương trình Backend - Bước 4: Truy cập địa sau http://localhost:8088/ Cài đặt chương trình FrontEnd: 104 an - Bước 1: Truy cập vào folder DATN-WebsiteBanDoDienTu → front-end - Bước 2: Mở CommandLine chạy lệnh npm install để cài gói package cần thiết cho chương trình - Bước 3: Sau cài đặt gói package thành công Ta chạy lệnh: yarn run dev để chạy chương trình FrontEnd - Bước 4: Truy cập địa sau http://localhost:8080/ Cấu trúc FrontEnd: Cấu trúc BackEnd: Hình 5.2 Cấu trúc FrontEnd Hình 5.2 Cấu trúc Backend 105 an 5.2 Kiểm thử Các chức kiểm thử: Bảng 5.1 Kiểm thử sản phẩm Chức Mô tả chi tiết Kiểm tra đơn hàng Click vào nút thông tin đơn hàng để kiểm tra đơn hàng Mua hàng Click vào mua sản OK phẩm sản phẩm hiển thị giỏ hàng Thêm sản phẩm Nhập tất thơng tin sản phẩm xác Xóa sản phẩm Click vào nút Delete Đặt hàng Nhập tất thông tin yêu cầu form đặt hàng, kiểm tra lại sản phẩm đặt trước Thêm sửa xóa trang Các sản phẩm, khách quản trị admin hàng, nhân viên, danh mục, nhà cung cấp phải thêm sửa xóa Kết Ngày thực test OK 15/06/2020 15/06/2020 Chú thích Kiểm tra xem có đơn hàng chưa xác nhận hay khơng Kiểm tra thơng tin sản phẩm có xác hay khơng chức tăng giảm số lượng sản phẩm hoạt động hay không Không OK 15/06/2020 OK OK 15/06/2020 15/06/2020 Không Cần phải làm thủ tục OK 15/06/2020 Khơng 106 an Tìm kiếm sản phẩm Nhập tên sản phẩm OK cần tìm kiếm trang admin client 15/06/2020 Không Hiển thị popup xem Nhấn nút xem nhanh OK nhanh thông tin sản hover sản phẩm phẩm 15/06/2020 Không Sau người dùng OK đăng nhập chuyển tới trang thơng tin chi tiết người dùng Người dùng cập nhật lại thơng tin Trang hiển thị Sau đăng nhập, OK đơn hàng người dùng có quyền người dùng xem thơng tin đơn hàng đặt trước Có thể xem chi tiết đơn hàng bình luận đơn hàng Chức lọc theo Tại trang hiển thị OK giá nhà cung sản phẩm theo nhà cấp cung cấp theo category(loại), người dùng lọc theo tiêu chí có sẵn 15/06/2020 Khơng 15/06/2020 Khơng 15/06/2020 Không Trang quản lý thông tin người dùng 107 an Chương 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết luận Qua đề tài, nhóm hồn thành mục tiêu đề từ đầu, nghiên cứu sâu công nghệ MERN, trau dồi thêm nhiều kinh nghiệm việc làm sản phẩm phần mềm, kết tạo trang web bán hàng với chức sau: mua hàng, giỏ hàng, mô tả sản phẩm, quản lý sản phẩm, quản lý đơn hàng, nhận xét đơn hàng mua, lọc sản phẩm theo nhà sản xuất, theo giá, thống kê doanh thu theo tháng, quý, năm Ưu điểm: Trang web bán hàng điện tử tạo nhằm mục đích đáp ứng nhu cầu mua sắm cho khách hàng theo hướng đại hóa Trang web có giao diện thân thiện, dễ thao tác sử dụng, tổ chức cách hợp lý, đồng thời viết NodeJs kết hợp với ReactJs nên có tốc độ xử lý cao Nhược điểm: Do hạn chế mặt thời gian nên chưa phát triển thêm tính Google map, gợi ý sản phẩm liên quan, sản phẩm bán chạy nhất, search engine, đếm số người truy cập website 6.2 Hướng phát triển Trong tương lai gần nhóm phát triển thêm số tính sau: Google map, gợi ý sản phẩm liên quan, sản phẩm bán chạy nhất, search engine, đếm số người truy cập website 108 an TÀI LIỆU THAM KHẢO Tiếng việt [1] Giới thiệu tổng quan NodeJS: https://techtalk.vn/mot-cai-nhin-tong-quan-nhat-venodejs.html [2] Giới thiệu tổng quan ReactJS: https://o7planning.org/vi/12115/gioi-thieu-ve-react [3] Giới thiệu tổng quan MongoDB: https://techblog.vn/gioi-thieu-ve-mongodb Tiếng anh [4] Ethan Brown, (2014), “Web Development with Node and Express”, Oreilly, pp 191-201 [5] David Geary , (2018), “Building React.js Applications with Redux”, David Geary, pp 140-159 [6] Evan Hahn, (2016), “Express In Action: Writing, Building, and Testing Node.js Applications”, Manning, pp 250-263 [7] https://nextjs.org/docs 109 an an ... Tìm hiểu ExpressJs, NextJs phát triển website bán đồ điện tử Nội dung thực đề tài: Tìm hiểu phát triển ứng dụng web bán đồ điện tử công nghệ ExpressJs NextJs Sản phẩm: Website bán đồ điện tử. .. THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP TÌM HIỂU EXPRESSJS, NEXTJS VÀ PHÁT TRIỂN WEBSITE BÁN ĐỒ ĐIỆN TỬ SVTH : NGUYỄN VĂN LÀNH MSSV : 15110069 SVTH : LÊ MẠNH... thành đồ án Nhóm em xin chân thành cảm ơn! Nhóm sinh viên thực Nguyễn Văn Lành Lê Mạnh Hùng i an TÓM TẮT Đồ án website giới thiệu bán sản phẩm điện tử Website vận hành website thương mại điện tử,
Ngày đăng: 02/02/2023, 09:32
Xem thêm:
