Xây dựng website bán sách điện tử (báo cáo cuối kì đồ án 1)

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN -ef&ef - BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE BÁN SÁCH ĐIỆN TỬ Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Trần Lương Nguyên 19521922 Nguyễn Quốc Dũng 19521396 Thành phố Hồ Chí Minh, 10 tháng 06 năm 2022 LỜI CẢM ƠN Chúng em xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người trực tiếp tận tình hướng dẫn nhóm em suốt trình thực đồ án Chúng em vơ biết ơn tận tình dẫn q trình nhóm thực đề tài Bước đầu tiếp cận cơng nghệ mới, nhóm cịn nhiều thiếu sót mặt kiến thức kinh nghiệm thực tiễn nên khơng tránh khỏi nhiều sai sót Những nhận xét, góp ý chân tình sở để nhóm cải tiến hoàn thiện đề tài cách tốt Nếu khơng có lời bảo tận tình đồ án nhóm khó để thực Một lần nữa, chúng em chân thành cảm ơn Đề tài nhóm thực khoảng thời gian tháng, thành viên nhóm lần đầu tiếp cận công nghệ mới, bước đầu vào thực tế nên nhiều hạn chế kiến thức kinh nghiệm thực tiễn Do vậy, chắn tránh khỏi sai sót, nhóm mong nhận bảo, ý kiến đóng góp quý báu cô bạn học lớp để chúng em bổ sung, cải tiến sản phẩm nâng cao kiến thức, hoàn thiện thân tích lũy thêm cho thân nhiều kinh nghiệm, phục vụ tốt cho công việc thực tế sau Chúng em xin chân thành cảm ơn! NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… …………………………………………………………………… Giảng viên hướng dẫn Ths Trần Thị Hồng Yến ĐỀ CƯƠNG CHI TIẾT Tên dề tài: Xây dựng website bán sách điện tử Cán hướng dẫn: Ths Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 21/2/2022 đến ngày 10/6/2022 Sinh viên thực hiện: Trần Lương Nguyên - 19521922 Nguyễn Quốc Dũng - 19521396 Nội dung đề tài: Giới thiệu toán Hiện với phát triển vượt bâc internet hệ thống vận tải logictics ngành nghề kinh doanh, thương mại điện tử ngày phát triển Các cơng ti, tập đồn sẵn sàng chi lượng lớn tiền vào ngành Hệ thống thương mại điện tử có nhiều vượt trội so với ngành nghề thương mại truyền thống Chỉ với vài thao tác đơn giản thiết bị thông minh người dùng dễ dàng lựa chọn sản phẩm mong muốn chúng vận chuyển đến tận nhà họ Khi xã hội ngày phát triển, nhu cầu học tập, tra cứu người ngày trọng Nhu cầu tra cứu, tìm kiếm tài liệu vơ lớn Với tình hình dịch bệnh Covid-19 diễn phức tạp,người dân buộc phải lựa chọn hình thức học tập làm việc trực tuyến Nhu cầu tìm kiếm tài liệu lại lớn Hiểu nhu cầu nhóm chúng em định lựa chọn đề tài “Xây dựng website bán sách điện tử” để phục vụ nhu cầu tìm kiếm mua tài liệu, sách, truyện người dung Mục tiêu Xây dựng website bán sách điện tử với nội dung phong phú, giao diện thân thiện, bố cục xếp hợp lí thân thiện với người dung Xây dựng website quản trị cho nhân viên với chức quản lý thông tin đa dạng tiện dụng Phạm vi Phạm vi môi trường: Triển khai sản phẩm môi trường web Phạm vi chức năng: - Đăng nhập, đăng kí tài khoản - Quản lí danh mục, thể loại sách - Quản lí sách - Thống kê - Tìm kiếm, tra cứu sách - Thêm đánh giá, nhận xét - Thêm vào giỏ hang, tốn - Quản lí tài khoản Đối tượng: Website dành cho người dung có nhu cầu tìm kiếm, mua sách, tài liệu có quyền hỗ trợ nhà sách tiếp cạnh đên đối tượng người dùng trức tiếp Phương pháp thực hiện: - Tìm hiểu Nodejs, expressJs, ReactJs, MongoDB, TaiwindCss - Khảo sát thực trạng website bán sách có thị trường, từ phân tích, xác định u cầu cụ thể đề tài - Phân tích thiết kế hệ thống xây dựng website - Tìm hiểu thiết kế UX/UI tiến hành thiết kế giao diện cho website - Xây dựng website cho người dung nhân viên - Tiến hành triển khai kiểm thử Công nghệ dự kiến sử dụng: - Back-end: NodeJs, ExpressJs - DataBase: MongoDB, Cloudinary - Front-end: ReactJs, Redux, TaiwindCss Kết mong đợi - Nắm bắt ứng dụng cơng nghệ mà nhóm tìm hiểu để xây dựng hoàn thiện sản phẩm đề tài - Hiểu rõ nghiệp vụ, chức website bán sách trức tuyến - Ứng dụng kiến thức học phân tích thiết kế hệ thống phần mềm vào việc xây dựng triển khai website sản phẩm đề tài - Có thể mở rộng thêm chức cho website sản phẩm đề tài để đáp ứng nhu cầu tương lai Các tiêu chí khác: - Tính thẩm mỹ: Website có giao diện đẹp, dễ sử dụng, bố cục hợp lý hút người dùng sử dụng - Tính logic bảo mật: + Đảm bảo tính hoạt động ổn định, mượt mà không bị lỗi + Đảm bảo tính bảo mật thơng tin nhạy cảm, tạo cảm giác an toàn cho người dùng Kế hoạch thực hiện: Thời gian 21/2/2022 – 28/2/2022 28/2/2022 – 7/3/2022 7/3/2022 – 14/3/2022 14/3/2022 – 21/3/2022 Nội dung Trần Lương Nguyên Nguyễn Quốc Dũng Tìm hiểu đề tài, xác định Tìm hiểu đề tài, xác định chức hệ thống chức hệ thống Tìm hiểu, nghiên cứu cơng Tìm hiểu, nghiên cứu cơng nghệ áp dụng sản nghệ áp dụng sản phẩm phẩm đồ án đồ án Phân tích hệ thống, thiết kế Phân tích hệ thống, thiết kế cơ sở liệu sở liệu Chỉnh sửa thiết kế sở Chỉnh sửa thiết kế sở liệu, phác thảo layout giao liệu, phác thảo layout giao diện diện 21/3/2022 – 28/3/2022 28/3/2022 – 4/4/2022 4/3/2022 – 11/4/2022 11/4/2022 – 18/4/2022 18/4/2022 – 25/4/2022 25/4/2022 – 2/5/2022 2/5/2022 – 9/5/2022 9/5/2022 – 16/5/2022 16/5/2022 – 23/5/2022 25/5/2022 – 2/6/2022 Xây dựng chức đăng Xây dựng chức đăng kí, kí, đăng nhập chỉnh sửa đăng nhập chỉnh sửa tài tài khoản phía back-end khoản phía front-end Xây dựng chức thêm Xây dựng chức thêm sách phía back-end sách phía front-end Xây dựng chức tìm Xây dựng chức tìm kiếm kiếm sách phía back-end sách phía front-end Xây dựng chức giỏ Xây dựng chức giỏ hàng hàng phía back-end phía front-end Xây dựng chức mua Xây dựng chức mua hàng phía back-end hàng phía front-end Xây dựng chức đánh Xây dựng chức đánh giá, nhận xét sách phía back- giá,nhận xét sách phía front- end end Xây dựng chức quản lí Xây dựng chức quản lí thể loại phía back-end thể loại phía front-end Xây dựng chức quản lí Xây dựng chức quản lí tác giả phía back-end tác giả phía front-end Xây dựng chức Xây dựng chức dashboard phía back-end dashboard phía front-end Kiểm thử hồn thiện báo Kiểm thử hoàn thiện báo cáo cáo Xác nhận CBHD TP HCM, ngày 21 tháng năm 2022 (Ký tên ghi rõ họ tên) Sinh viên Trần Thị Hồng Yến (Ký tên ghi rõ họ tên) Trần Lương Nguyễn Quốc Nguyên Dũng MỤC LỤC LỜI CẢM ƠN NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ĐỀ CƯƠNG CHI TIẾT MỤC LỤC DANH MỤC BẢNG 12 DANH MỤC HÌNH ẢNH 13 Chương - TỔNG QUAN VỀ ĐỀ TÀI 1.1 Giới thiệu đề tài 1.1.1 Tầm quan trọng sách 1.1.2 Lý chọn đề tài 1.2 Khảo sát trạng 1.3 Đối tượng nghiên cứu 1.4 Phạm vi nghiên cứu 1.5 Phương pháp nghiên cứu 1.6 Nhiệm vụ đề tài 1.7 Mục tiêu đề tài Chương - CƠ SỞ LÝ THUYẾT 2.1 Tổng quan ReactJs 2.1.1 Giới thiệu 2.1.2 Cách hoạt động 2.1.3 Ưu nhược điểm 2.2 2.2.1 Giới thiệu 2.2.2 Cách sử dụng 2.2.3 Ưu điểm 2.3 Tổng quan Ant design 2.3.1 Giới thiệu 2.3.2 Cách hoạt động 2.3.3 Ưu nhược điểm 2.4 Tổng quan NodeJs 2.4.1 Giới thiệu 2.4.2 Khả sử dụng 2.4.3 Thành phần 2.4.4 Lợi ích 10 2.4.5 Trường hợp sử dụng 10 2.5 Tổng quan ExpressJs 11 2.5.1 Giới thiệu 11 2.5.2 Cấu trúc ExpressJs 11 2.5.3 Ưu nhược điểm ExpressJs 12 2.6 Tổng quan JSON Web Token 13 2.6.1 Giới thiệu 13 2.6.2 Cấu trúc JWT 13 2.6.3 Trường hợp sử dụng 14 2.7 Tổng quan Redux Toolkit Tổng quan MongoDB 14 2.7.1 Giới thiệu 14 2.7.2 Một vài khái niệm MongoDB 15 2.7.3 Ưu nhược điểm 16 Chương - PHÂN TÍCH THIẾT KẾ HỆ THỐNG 17 3.1 Mô tả yêu cầu 17 3.1.1 Yêu cầu chức 17 3.1.2 Yêu cầu phi chức 19 3.2 Kiến trúc hệ thống 20 3.2.1 Mô tả kiến trúc Front-End 20 3.2.2 Mô tả kiến trúc Back-End 23 Chương - HIỆN THỰC HỆ THỐNG 25 4.1 Sơ đồ Use case 25 4.1.1 Đăng kí 26 4.1.2 Xác thực tài khoản 26 4.1.3 Đăng nhập 27 4.1.4 Quên mật 28 4.1.5 Cập nhật mật 29 4.1.6 Chỉnh sửa thông tin cá nhân 29 4.1.7 Tìm kiếm sách 30 4.1.8 Thêm sách vào giỏ hàng 30 4.1.9 Mua hàng 31 4.1.10 Xác thực đơn hàng 31 4.1.11 Nhận xét đánh giá 32 4.1.12 Quản lí đơn hàng 32 4.1.13 Thêm sách 33 4.1.14 Nhập sách 34 4.1.15 Chỉnh sửa thông tin sách 34 4.1.16 Nhập sách 35 4.1.17 Thêm thể loại 36 4.1.18 Chỉnh sửa thông tin thể loại 37 4.1.19 Xóa thể loại 37 4.1.20 Thêm tác giả 39 4.1.21 Chỉnh sửa thông tin tác giả 40 4.1.22 Xóa tác giả 41 4.1.23 Thêm mã giảm giá 43 4.1.24 Chỉnh sửa thông tin mã giảm giá 43 Hình 4-20 Trang admin Trang dashboard dùng để thống kê số lượng người dùng có hệ thống, số lượng đầu sách, số lượng đơn đặt hàng người dùng, số lượng sách bán thành cơng, cịn có biểu đồ thống kê sách bán chạy sách yêu thích (được đánh giá khách hàng mua sách) 67 4.3.2.2 Trang thêm sách Hình 4-21 Trang thêm sách Trang thêm sách dùng để thêm đầu sách vào kho sách Các chức năng: + Thêm sách vào kho sách 4.3.2.3 Trang xem sách Hình 4-22 Trang xem sách 68 Hình 4-23 Giao diện chỉnh sửa sách Trang xem sách hiển thị tất sách theo dạng bảng, admin xem thông tin sách chỉnh sửa sách Các chức năng: + Chỉnh sửa sách 4.3.2.4 Trang nhập sách Hình 4-24 Trang nhập hàng 69 Hình 4-25 Giao diện form nhập sách Trang xem sách hiển thị tất phiếu nhập sách theo dạng bảng, admin thêm phiếu nhập sách cách nhấn vào nut “Nhập sách” Các chức năng: + Tra cứu phiếu nhập sách + Tạo phiếu nhập sách 4.3.2.5 Trang quản lý thể loại Hình 4-26 Trang quản lí thể loại 70 Mỗi đầu sách thuộc thể loại trang quản lý thể loại thực thao tác quản lý thể loại bao gồm thêm, xóa, sửa thể loại Các chức năng: + Thêm, xóa, sửa thể loại sách 4.3.2.6 Trang quản lý tác giả Hình 4-27 Trang quản lí tác giả Mỗi đầu sách thuộc tác giả trang quản lý tác giả thực thao tác quản lý tác giả bao gồm thêm, xóa, sửa tác giả Các chức năng: +Thêm, sửa, xóa tác giả 71 4.3.2.7 Trang phê duyệt đơn hàng dành cho người dùng có đăng nhập đặt sách Hình 4-28 Trang quản lí đơn hàng Hình 4-29 Giao diện xem chi tiết đơn hàng 72 Hình 4-30 Giao diện xác nhận từ chối đơn hàng Đây trang phê duyệt đơn hàng dành cho đơn hàng người dùng có đăng nhập đặt hàng, admin tìm kiếm đơn hàng cách nhanh chóng nhờ vào tính lọc tìm kiếm đa dạng (có thể lọc đơn hàng tên đơn hàng, tên người dùng, ngày đặt hàng, tình trạng đơn hàng, phương thức toán đơn hàng), kiểm soát đơn hàng Các chức năng: - Phê duyệt đơn hàng hủy đơn - Tìm kiếm đơn hàng 73 4.3.2.8 Trang phê duyệt đơn hàng dành cho người dùng khơng đăng nhập đặt sách Hình 4-31 Trang xác thực đơn hàng khách chưa đăng kí tài khoản Hình 4-32 Giao diện chi tiết đơn hàng khách hàng chưa đăng kí tài khoản 74 Hình 4-33 Giao diện xác thực đơn hàng khách hàng chưa đăng kí tài khoản Đây trang phê duyệt đơn hàng dành cho đơn hàng người dùng không đăng nhập đặt hàng, admin tìm kiếm đơn hàng cách nhanh chóng nhờ vào tính lọc tìm kiếm đa dạng (có thể lọc đơn hàng tên đơn hàng, tên người dùng, ngày đặt hàng, tình trạng đơn hàng, phương thức toán đơn hàng), kiểm soát đơn hàng Các chức năng: - Phê duyệt đơn hàng hủy đơn - Tìm kiếm đơn hàng 75 4.3.2.9 Trang quản lý mã khuyến Hình 4-34 Trang quản lí mã khuyến Hình 4-35 Giao diện thêm mã khuyến 76 Hình 4-36 Giao diện chỉnh sửa thơng tin mã khuyến Hình 4-37 Giao diện xóa mã giảm giá Đây trang phục vụ tạo mã khuyến mãi, khách hàng sử dụng mã khuyến để giảm tiền mua sách Các chức năng: - Thêm, xóa, sửa mã khuyến 77 CHƯƠNG - KẾT LUẬN 5.1 Đánh giá 5.1.1 Thuận lợi - Giảng viên hướng dẫn tận tình, hỗ trợ định hướng nhóm nghiên cứu thực đề tài - Các tài liệu ngôn ngữ, công nghệ thực chia sẻ rộng rãi Internet Cộng đồng lớn giúp giải vấn đề thường gặp phải sử dụng cơng nghệ cách nhanh chóng - Vận dụng kiến thức, quy trình phát triển học - Dữ liệu API hỗ trợ đa dạng phong phú 5.1.2 Khó khăn - Bước đầu tiếp cận cơng nghệ ReactJs, NodeJs, nên q trình tìm hiểu, nghiên cứu thực nhiều thời gian - Vấn đề liệu không đáp ứng đầy đủ xác từ API, bị hạn chế quyền thao tác, liệu chưa hỗ trợ tốt vấn đề ứng dụng 5.2 Kết đạt 5.2.1 Ưu điểm - Hoàn thành yêu cầu đặt ban đầu, đáp ứng đầy đủ tính cần thiết ứng dụng website bán sách - Tốc độ phản hồi thao tác nhanh, tối ưu hóa trải nghiệm người dùng - Sinh viên thực nắm cách tổ chức, xây dựng hệ thống hoàn thiện tạo ứng dụng web để phục vụ cho nhu cầu người - Sinh viên nắm công nghệ phổ biến ReactJs, NodeJs, MongoDB số kỹ thuật xác thực người dùng 5.2.2 Nhược điểm - Dữ liệu cịn chưa đầy đủ để đáp ứng nhu cầu người dùng - Dữ liệu tổ chức chưa tối ưu nên việc truy vấn cịn chậm - Chưa có phần hướng dẫn cho người sử dụng 78 5.3 Hướng phát triển - Xây dựng mở rộng thêm chức hỗ trợ gợi ý sản phẩm cho khách hàng, theo dõi vị trí đơn hàng, đăng nhập tài khoản google, facebook, …, sưu tập sách yêu thích, … - Hồn thiện chức có - Tối ưu hóa code để dễ cập nhật mở rộng tính - Tổ chức liệu hợp lý để tăng tốc độ truy xuất TÀI LIỆU THAM KHẢO ❖ Tài liệu tiếng Việt [1] Tìm hiểu Node.js – Viblo.asia: https://viblo.asia/p/tim-hieu-co-ban-ve-nodejs-E375zeQ1lGW [2] Tổng quan NodeJS - Một số điểm khác biệt với PHP – Viblo.asia: https://viblo.asia/p/tong-quan-ve-nodejs-mot-so-diem-khac-biet-voi-php1Je5E9945nL [3] Tìm hiểu json web token (JWT) – Viblo.asia: https://viblo.asia/p/tim-hieu-ve-json-web-token-jwt-7rVRqp73v4bP [4] Nodejs best practice - Cấu trúc tốt components - Phần – anonystick.com: 79 https://anonystick.com/blog-developer/nodejs-best-practice-cau-truc-tot-lacomponents-phan-1-2021060299169462 [5] Express Node.Js xây dựng cấu trúc dự án chuẩn? – anonystick.com: https://anonystick.com/blog-developer/project-express-va-nodejs-co-kien-truc-totla-nhu-the-nao-2021040967257708 [6] JWT gì? Tồn tập JWT từ đến chi tiết – tino.org: https://wiki.tino.org/jwt-la-gi/ [7] Tổng quan MongoDB - MongoDB gì? - freetuts.net: https://freetuts.net/tong-quan-ve-mongodb-203.html [8] Expressjs gì? Tại nên sử dụng Expressjs lập trình? - itnavi.com.vn: https:///blog/expressjs-la-gi/?amp [9] NodeJs & ExpressJs: https://www.youtube.com/watch?v=z2f7RHgvddc&list=PL_VfJajZj0VatBpaXkEHK_UPHL7dW6I3 ❖ Tài liệu tiếng Anh [9] Mongoose v6.3.5 - mongoosejs.com: https://mongoosejs.com/ [10] Documentation – Nodejs.org: https://nodejs.org/en/docs/ [11] Node.js SDK – Node.js Upload + Image, Video Transformations cloudinary.com: https://cloudinary.com/documentation/node_integration [11] React – A JavaScript library for building user interfaces – reactjs.org: https://reactjs.org/ [12] Node.js SDK – Node.js Upload + Image, Video Transformations cloudinary.com: https://cloudinary.com/documentation/node_integration [13] Ant Design - The world's second most popular React UI framework – ant.design: https://ant.design/ 80 [14] Tailwind CSS - Rapidly build modern websites without ever leaving your HTML - tailwindcss.com https://tailwindcss.com/ 81 ... em định lựa chọn đề tài ? ?Xây dựng website bán sách điện tử? ?? để phục vụ nhu cầu tìm kiếm mua tài liệu, sách, truyện người dung Mục tiêu Xây dựng website bán sách điện tử với nội dung phong phú,... mua Xây dựng chức mua hàng phía back-end hàng phía front-end Xây dựng chức đánh Xây dựng chức đánh giá, nhận xét sách phía back- giá,nhận xét sách phía front- end end Xây dựng chức quản lí Xây dựng. .. back-end sách phía front-end Xây dựng chức tìm Xây dựng chức tìm kiếm kiếm sách phía back-end sách phía front-end Xây dựng chức giỏ Xây dựng chức giỏ hàng hàng phía back-end phía front-end Xây dựng