Đang tải... (xem toàn văn)
Untitled 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 MSSV 15110058 Khoá 2015 Ngành CÔNG NGHỆ THÔNG TIN Tp Hồ Chí Minh, tháng 07 năm 2020 T[.]
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 Khố : 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 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 cô 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 hoà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 khơng thể tránh khỏi thiết sót, em mong nhận ý kiến đóng góp từ thầy, cô để 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 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 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 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 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 5.1 Cài đặt 104 5.2 Kiểm thử 106 Chương 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 108 6.1 Kết luận 108 6.2 Hướng phát triển 108 TÀI LIỆU THAM KHẢO 109 vi DANH MỤC CÁC TỪ VIẾT TẮT SPA: Single Page Application UI: User Interface MVC: Model View Controler JSX: Javascript XML HTML: Hyper Text Markup Language API: Application Programming Interface MEAN: Mongo Express Angular Node MERN: Mongo Express React Node RDBMS: Relational Database Management System vii DANH MỤC CÁC BẢNG BIỂU Bảng 3.1 Mô tả quản lý khách hàng Bảng 3.2 Mô tả quản lý nhân viên Bảng 3.3 Mô tả Quản lý sản phẩm Bảng 3.4 Mô tả Thêm khách hàng Bảng 3.5 Mô tả Thêm nhân viên Bảng 3.6 Mô tả thêm sản phẩm Bảng 3.7 Mô tả đăng kí thành viên Bảng 3.8 Mô tả Mua sản phẩm Bảng 3.9 Mô tả Đổi trả sản phẩm Bảng 3.10 Mô tả Cập nhật Khách hàng Bảng 3.11 Mô tả cập nhật thông tin nhân viên Bảng 3.12 Mô tả Cập nhật sản phẩm Bảng 3.13 Mô tả Chăm sóc khách hàng Bảng 3.14 Mơ tả Thanh tốn online Bảng 3.15 Mô tả Quản lý đơn hàng Bảng 3.16 Mô tả khách hàng cập nhật thông tin Bảng 4.1 Chức phía FrontEnd Bảng 4.2 Chức phía BackEnd Bảng 4.3 Bảng liệu Product Bảng 4.4 Bảng liệu User Bảng 4.5 Bảng liệu Order Bảng 4.6 Bảng liệu Order Detail Bảng 4.7 Bảng liệu Category Bảng 4.8 Bảng liệu Supplier Bảng 4.9 Bảng liệu Slide viii Bảng 4.10 Bảng liệu Info Bảng 4.11 Mô tả giao diện trang đăng nhập Bảng 4.12 Mô tả giao diện trang quản lý Bảng 4.13 Mô tả giao diện quản lý nhân viên Bảng 4.14 Mô tả giao diện thêm nhân viên Bảng 4.15 Mô tả giao diện sửa nhân viên Bảng 4.16 Mô tả giao diện quản lý khách hàng Bảng 4.17 Mô tả giao diện tạo tài khoản khách hàng Bảng 4.18 Mô tả giao diện quản lý danh mục Bảng 4.19 Mô tả giao diện thêm danh mục Bảng 4.20 Mô tả giao diện cập nhật danh mục Bảng 4.21 Mô tả giao diện quản lý nhà cung cấp Bảng 4.22 Mô tả giao diện tạo nhà cung cấp Bảng 4.23 Mô tả giao diện cập nhật nhà cung cấp Bảng 4.24 Mô tả giao diện quản lý sản phẩm Bảng 4.25 Mô tả giao cập nhật sản phẩm Bảng 4.26 Mô tả giao thêm thông tin sản phẩm Bảng 4.27 Mô tả giao diện quản lý thông tin website Bảng 4.28 Mô tả giao diện quản lý đơn đặt hàng Bảng 4.29 Mô tả giao diện chỉnh sửa slide Bảng 4.30 Mô tả giao diện trang chủ Bảng 4.31 Mô tả thêm giỏ hàng xem nhanh sản phẩm Bảng 4.32 Mô tả giao diện giỏ hàng Bảng 4.33 Mô tả giao diện xem nhanh sản phẩm Bảng 4.34 Mô tả trang chi tiết sản phẩm ix 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 Hình 4.52 Trang chi tiết sản phẩm 97 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 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 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 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 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 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 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 - 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 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 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 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 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