TP Hồ Chí Minh, tháng 07 năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MÔN CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI XÂY DỰNG WEBSITE MUA[.]
BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MÔN CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE MUA BÁN SÁCH TRỰC TUYẾN Giảng viên hướng dẫn: ThS TRẦN THỊ DUNG Sinh viên thực hiện: LÊ THỊ NGỌC MAI Lớp: CÔNG NGHỆ THƠNG TIN Khố: 59 TP Hồ Chí Minh, tháng 07 năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MƠN CƠNG NGHỆ THƠNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE MUA BÁN SÁCH TRỰC TUYẾN Giảng viên hướng dẫn: ThS TRẦN THỊ DUNG Sinh viên thực hiện: LÊ THỊ NGỌC MAI Lớp: CƠNG NGHỆ THƠNG TIN Khố: 59 TP Hồ Chí Minh, tháng 07 năm 2022 TRƯỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢI CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM PHÂN HIỆU TẠI THÀNH PHỐ HỒ CHÍ MINH Độc lập – Tự – Hạnh phúc NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP BỘ MÔN: CÔNG NGHỆ THÔNG TIN -*** Mã sinh viên: 59511071056 Họ tên SV: Lê Thị Ngọc Mai………… Khóa: 59 Lớp: Công nghệ thông tin……………… Tên đề tài - Xây dựng Website mua bán sách trực tiếp Mục đích, yêu cầu a Mục đích - Xây dựng website cho phép người dùng tìm mua sách , tham khảo sách hay, - Hỗ trợ người dùng mua sách thời gian địa điểm - Hỗ trợ khách hàng theo dõi đơn hàng b Yêu cầu - Tìm hiểu ASP.NET Core Balzor, MudBlazor - Tìm hiểu HTML, CSS, JavaScript - Tìm hiểu áp dụng API, toán online chức khác cho website - Xây dựng, thiết kế Nội dung phạm vi đề tài a Nội dung đề tài - Xây dựng website gồm giao diện người dùng admin • Về giao diện người dùng cho phép người dùng xem, tìm kiếm, đăng kí tài khoản tiến hành tốn để sở hữu sách u thích Ngồi cịn có gợi ý sách tương tự cho người dung tham khảo • Về giao diện admin cho phép quản lý đơn đặt hàng, quẩn lý người dung, thêm sửa xóa mặt hàng sách xác nhận đơn hàng qua gmail b Phạm vi đề tài i - Xây dựng website cho phép người dung đăng ký tài khoản , mua sách toán trực tuyến Cơng nghệ, cơng cụ ngơn ngữ lập trình a Ngơn ngữ lập trình cơng nghệ - ASP.Net - Dot Net core Blazor - MudBalazor - Cổng tốn VNPay b Cơng cụ - Visual Studio Version 2019 - Microsoft SQL Server version 2018 Các kết dự kiến đạt ứng dụng - Hoàn chỉnh báo cáo đề tài - Xây dựng đầu đủ chức cần thiết cho web mua bán sách - Xây dựng giao diện thuận tiện cho người sử dụng - Nắm quy trình nghiệp vụ website - Xây dựng thành công Website Giáo viên cán hướng dẫn Họ tên: Trần Thị Dung Đơn vị công tác: Bộ môn Công nghệ thông tin – Trường đại học Giao Thông Vận tải phân hiệu TPHCM Điện thoại: 0388389579 Email: Ttdung@utc2.edu.vn ii Ngày 23 tháng 06 năm 2022 Đã giao nhiệm vụ TKTN Trưởng BM Công nghệ Thông tin Giáo viên hướng dẫn ThS Trần Phong Nhã Trần Thị Dung Đã nhận nhiệm vụ TKTN Sinh viên: Lê Thị Ngọc Mai Ký tên: Điện thoại: 0966383343 Email: 5951071056@st.utc2.edu.vn iii LỜI CẢM ƠN Lời nói đầu tiên, em xin gửi tới Q thầy Bộ môn Công Nghệ Thông Tin, Ban Giám Hiệu Trường Đại học Giao thông Vận tải phân hiệu Thành phố Hồ Chí Minh lời chúc sức khỏe lời cảm ơn sâu sắc Với quan tâm dạy dỗ, bảo tận tình chu đáo thầy cơ, em hồn thành đề tài tốt nghiệp “Xây dựng website MUA BÁN SÁCH TRỰC TUYẾN” Để hoàn thành nhiệm vụ giao này, nỗ lực học hỏi khơng ngừng thân cịn có hướng dẫn tận tình giảng viên năm vừa qua, đặc biệt hết nhờ có giảng viên Trần Thị Dung, người hướng dẫn cho hướng đi, truyền đạt cho em kiến thức, kỹ để tơi hồn thành đề tài tốt nghiệp Mặc dù cố gắng để hoàn thành đề tài, chắn khó tránh khỏi thiếu sót Em mong nhận đánh giá, góp ý Q thầy để t rút cho học, kinh nghiệm quý báu Sau cùng, em khơng biết nói ngồi kính chúc Quý thầy cô Bộ môn Công Nghệ Thông Tin đặc biệt cô Trần Thị Dung thật dồi sức khỏe ngày gặt hái nhiều thành công sống nghiệp giảng dạy Em xin chân thành cảm ơn! TP Hồ Chí Minh, ngày 03 tháng 07 năm 2022 Sinh viên thực Lê Thị Ngọc Mai iv NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Tp Hồ Chí Minh, ngày ….… tháng ….… năm ….… Giảng viên hướng dẫn Trần Thị Dung v MỤC LỤC NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP i LỜI CẢM ƠN iv NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN v MỤC LỤC vi DANH MỤC CHỮ VIẾT TẮT ix DANH MỤC HÌNH VẼ x MỞ ĐẦU 1.1 Tổng quan đề tài 1.1.1 Mục tiêu nghiên cứu 1.1.2 Phạm vi nghiên cứu 1.2 Cách tiếp cận, phương pháp nghiên cứu thực 1.3 Cấu trúc báo cáo đồ án tốt nghiệp CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 Tổng quan ngôn ngữ C# 1.1.1 Đặc trưng ngôn ngữ C# 1.2 Nền tảng NET Core 1.2.1 NET Core đời hoàn cảnh nào? 1.2.2 Thành phần Net Core 1.2.3 Đặc điểm Net Core 1.3 Tổng quan Blazor 10 1.3.1 Blazor Server 10 1.3.2 Blazor WebAssembly 11 1.4 Giới thiệu HTML 13 1.5 Giới thiệu CSS 13 1.5.1 CSS gì? 13 1.5.2 Vì nên dùng CSS? 14 1.6 Giới thiệu JavaScript 15 1.6.1 Javascript dùng làm 15 1.6.2 Ưu điểm nhược điểm JavaScript 16 1.7 Tổng quan Bootrap 17 1.8 Tổng quan mơ hình MVVM 18 1.9 Tổng quan SQL Server 19 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 23 2.1 Khảo sát đánh giá hệ thống 23 2.1.1 Quy trình thực mua hàng khách hàng 23 2.1.2 Quy trình thực quản trị hệ thống nhân viên quản trị 24 2.2 Yêu cầu hệ thống 25 vi 2.2.1 Yêu cầu chức 25 2.2.2 Yêu cầu phi chức 25 2.2.3 Yêu cầu người dùng 26 2.3 Sơ đồ phân rã chức luồng liệu 26 2.3.1 Sơ đồ phân rã chức 26 2.3.2 Sơ đồ luồng liệu 27 2.4 Sơ đồ Usecase 28 2.5 Sơ đồ hoạt động 30 2.5.1 Với User 30 2.5.2 Với Admin 39 2.6 Sơ đồ Database Diagram 54 CHƯƠNG TRIỂN KHAI CHƯƠNG TRÌNH 55 3.1 Vận hành hệ thống 55 3.2 Xây dựng giao diện 55 3.2.1 Giao diện trang chủ trước đăng nhập 55 3.2.2 Giao diện sản phẩm 57 3.2.3 Giao diện đăng nhập 58 3.2.4 Giao diện đăng ký tài khoản 58 3.2.5 Giao diện quản trị viên sau đăng nhập 60 3.2.6 Giao diện thống kê quản trị viên 61 3.2.7 Giao diện quản lý sản phẩm quản trị viên 61 3.2.8 Giao diện thêm sản phẩm 62 3.2.9 Giao diện sửa sản phẩm 62 3.2.10 Giao diện quản lý tài khoản 63 3.2.11 Giao diện thêm tài khoản 63 3.2.12 Giao diện sửa tài khoản 64 3.2.13 Giao diện quản lý đơn hàng 64 3.2.14 Giao diện cập nhật tiến độ đơn hàng 65 3.2.15 Giao diện quản lý tùy chỉnh tìm kiếm 65 3.2.16 Giao diện chi tiết sản phẩm 66 3.2.17 Giao diện đánh giá sản phẩm 67 3.2.18 Giao diện giỏ hàng 67 3.2.19 Giao diện toán 68 3.2.20 Giao diện xác nhận đơn 68 3.2.21 Giao diện xác trạng thái đơn hàng 69 3.2.22 Giao diện tin nhắn xác nhận đơn đặt hàng 69 3.2.23 Giao diện chọn phương thức toán online 70 3.2.23 Giao diện toán online 70 3.2.24 Giao diện xác thực toán 71 3.2.25 Giao diện tốn online thành cơng 71 KẾT LUẬN VÀ KIẾN NGHỊ 72 vii Kết đạt 72 1.1 Ưu điểm 72 Nhược điểm 72 Hướng phát triển 72 TÀI LIỆU THAM KHẢO 74 viii 3.2.5 Giao diện quản trị viên sau đăng nhập Quản trị viên sau đăng nhập thị phần quản lý ở: Admin Hình 3.6: Màn hình giao diện quản trị viên sau đăng nhập 60 3.2.6 Giao diện thống kê quản trị viên Trong quản lý thống kê, chọn thống kê theo khoảng, theo tháng, theo năm Thống kê doanh số bán sách theo phân loại, theo số lượng Hình 3.7: Màn hình giao diện thống kê 3.2.7 Giao diện quản lý sản phẩm quản trị viên Quản trị viên thêm, cập nhật , xóa tìm kiếm sản phẩm Hình 3.8: Màn hình giao diện quản lý sản phẩm 61 3.2.8 Giao diện thêm sản phẩm Quản trị viên có quyền thêm sản phẩm Hình 3.9: Màn hình giao diện thêm sản phẩm 3.2.9 Giao diện sửa sản phẩm Quản trị viên cập nhật sản phẩm Hình 3.10: Màn hình giao diện sửa sản phẩm 62 3.2.10 Giao diện quản lý tài khoản Quản trị viên thêm, cập nhật, xóa tìm kiếm tài khoản Hình 3.11: Màn hình giao diện quản lý tài khoản 3.2.11 Giao diện thêm tài khoản Quản trị viên thêm tài khoản người dùng Hình 3.12: Màn hình giao diện thêm tài khoản 63 3.2.12 Giao diện sửa tài khoản Quản trị viên chỉnh sửa tài khoản người dùng phân quyền cho người dùng Hình 3.13: Màn hình giao diện sửa tài khoản 3.2.13 Giao diện quản lý đơn hàng Trong quản lý đơn àn, xem tiến độ, cập nhật đơn hàng tình trạng đơn hang Hình 3.14: Màn hình giao diện quản lý đơn hàng 64 3.2.14 Giao diện cập nhật tiến độ đơn hàng Quản trị viên cập nhật đơn hàng theo tiến độ đơn hàng Hình 3.15: Màn hình giao diện cập nhật tiến độ đơn hàng 3.2.15 Giao diện quản lý tùy chỉnh tìm kiếm Trong tùy chỉnh, quản trị viên có thêm, xóa , cập nhật khoảng giá tìm kiếm thể loại sách Hình 3.16: Màn hình giao diện quản lý tùy chỉnh tìm kiếm 65 3.2.16 Giao diện chi tiết sản phẩm Người dùng xem chi tiết sản phẩm, đánh giá thêm số lượng để mua hàng Hình 3.17: Màn hình giao diện chi tiết sản phẩm Hình 3.18: Màn hình giao diện chi tiết sản phẩm 66 3.2.17 Giao diện đánh giá sản phẩm Người dùng đánh giá sản phẩm Hình 3.19: Màn hình giao diện đánh giá sản phẩm 3.2.18 Giao diện giỏ hàng Sau thêm sản phẩm, sản phẩm xuất giỏ hàng, Hình 3.20: Màn hình giao diện giỏ hàng 67 3.2.19 Giao diện toán Khi người dùng muốn mua sách, tới giao diện tốn CĨ phương thức tốn: Thanh tốn nhận hàng tốn online Hình 3.21: Màn hình giao diện toán 3.2.20 Giao diện xác nhận đơn Khi người dùng đặt hàng, sản phẩm đặt hiển thị Hình 3.22: Màn hình giao diện xác nhận đơn 68 3.2.21 Giao diện xác trạng thái đơn hàng Sau đơn xác nhận, hệ thống chuyển trạng thái đơn hàng Hình 3.23: Màn hình giao diện xác nhận trạng thái đơn hàng 3.2.22 Giao diện tin nhắn xác nhận đơn đặt hàng Sau đặt hàng, tin nhắn tự đồng gửi gmail người đùng Hình 3.24: Màn hình giao diện tin nhắn xác nhận đơn hàng 69 3.2.23 Giao diện chọn phương thức tốn online Người dùng chọn phương thức tốn online Hình 3.25: Màn hình giao diện chọn phương thức toán online 3.2.23 Giao diện toán online Sau chọn phương thức muốn toán, bắt đầu tiến hành tốn 70 Hình 3.26: Màn hình giao diện tốn online 3.2.24 Giao diện xác thực toán Khi toán online, giao dịch cần xác thực để tốn Hình 3.27: Màn hình giao diện xác thực toán 3.2.25 Giao diện tốn online thành cơng Sau tốn thành cơng thơng tin giao dịch Hình 3.28: Màn hình giao diện tốn online thành cơng 71 KẾT LUẬN VÀ KIẾN NGHỊ Kết đạt 1.1 Ưu điểm Sau q trình tìm hiểu, nghiên cứu, phân tích, thực thử nghiệm thực tế, đề tài đạt yêu cầu đặt mục tiêu đề ra: - Xây dựng website bán bánh có đầy đủ chức website bán hàng: + Cho phép khách hàng quản lý giỏ hàng, đặt hàng + Tích hợp thành cơng cổng tốn online VNPAY vào website + Cho phép quản trị viên thực chức thêm, sửa xóa sản phẩm, người dùng + Tích hợp thành công chức phụ gửi mail xác nhận đơn hàng cho khách hàng, gợi ý sản phẩm nhờ AI + Hệ thống chạy ổn định với giao diện thân thiện, dễ sử dụng tương thích với máy tính điện thoại di động, đồng thời website thực tốt hầu hết trình duyệt như: Chrome, Firefox, IE,… + Quản lý vận hành code server, có đường dẫn tên miền: http://bookshop.ddns.net:8000/ Nhược điểm - Tốc độ chạy website chưa nhanh - Vẫn thiếu sốt phần giao diện - Chưa tích hợp mã giảm giá, ví điện tử - Chức toán cổng online VNPAY sử dụng với thẻ ảo, chưa sử dụng chức ví điện tử khác - Tính xác thực liệu sản phẩm chưa xác - Sử dụng q nhiều thư viện có sẵn Hướng phát triển - Khắc phục nhược điểm - Phát triển thêm mã giảm giá, tích hợp ví điện tử quản lý giao hàng để hỗ trợ 72 người dùng thuận tiện việc đặt sách - Tạo thêm ứng dụng giúp quản trị viên giao đơn hàng tài xế cập nhật thông tin giao hàng phát triển thêm phần giao hàng 73 TÀI LIỆU THAM KHẢO [1] Rob Miles, “The C# Programming Yellow Book: Learn to Program in C# from First Principles”, 2018 [2] Dương Quang Thiện, “Lập trình Web dùng ASP.NET C#”, 2005 [3] Toi B.Wright, “Blazor WebAssembly by Example: A project-based guide to building web apps with NET, Blazor WebAssembly, and C#”, 2021 [4] W3School.com [5] Gary B.Shelly, “HTML: Complete Concepts and Techniques, Fourth Edition (Available Titles Skills Assessment Manager (SAM) - Office 2007)”, 2007 [6] Marijn Haverbeke, “Eloquent JavaScript”, 2018 [7] Jake Spurlock, “Bootstrap: Responsive Web Development”, 2018 [8] Tích hợp tốn online VNPAY vào website (2021) https://www.youtube.com/watch?v=trRLmbt_SMQ&t=239s [9] Gửi mail https://xuanthulab.net/asp-net-core-gui-mail-trong-ung-dung-web-asp-net.html [10] Mua tên miền deloy website https://www.digitalocean.com/ 74