Vui lòng liên hệ ZALO 0353764719 hoặc GMAIL 123docntcgmail.com để mua tài liệu trực tiếp với giá ưu đãi, GIẢM GIÁ 2050% giá tài liệu Vui lòng liên hệ ZALO 0353764719 hoặc GMAIL 123docntcgmail.com để mua tài liệu trực tiếp với giá ưu đãi, GIẢM GIÁ 2050% giá tài liệu
HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA CƠNG NGHỆ THÔNG TIN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC ĐỀ TÀI: “XÂY DỰNG WEBSITE MUA BÁN HÀNG ONLINE TSHOP” Giảng viên hướng dẫn: TS Nguyễn Tất Thắng Sinh viên: Vũ Văn Thiện Mã SV: B17DCCN576 Lớp: D17HTTT6 Niên khóa: 2017-2022 Hệ đào tạo: Đại học quy Hà Nội 2022 HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC ĐỀ TÀI: “XÂY DỰNG WEBSITE MUA BÁN HÀNG ONLINE TSHOP” Giảng viên hướng dẫn: TS Nguyễn Tất Thắng Sinh viên: Vũ Văn Thiện Mã SV: B17DCCN576 Lớp: D17HTTT6 Niên khóa: 2017-2022 Hệ đào tạo: Đại học quy Hà Nội 2022 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Điểm: (Bằng chữ: ) Hà Nội, ngày tháng năm 20… Giảng viên hướng dẫn NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Điểm: (Bằng chữ: ) Hà Nội, ngày tháng năm 20… Giảng viên phản biện Đồ án tốt nghiệp đại học LỜI CẢM ƠN Lời em xin gửi lời cảm ơn chân thành sâu sắc tới TS Nguyễn Tất Thắng mơn Khoa học máy tính, Khoa Cơng nghệ thơng tin 1, Học viện Cơng nghệ Bưu Viễn thơng Trong suốt q trình học tập làm đồ án, em nhận quan tâm giúp đỡ, hướng dẫn tận tình, tâm huyết thầy Mặc dù quỹ thời gian có hạn, thầy ln nhiệt tình tâm huyết với đồ án bạn từ việc lựa chọn đề tài, thực đề tài viết báo cáo Đối với thân em thầy không hướng dẫn giúp đỡ em để hồn thiện đồ án mà thầy cịn tạo tiền đề để giúp em tìm hiểu sâu lĩnh vực lập trình website Đồng thời, em xin gửi lời cảm ơn đến thầy cô giáo Học viện Công nghệ Bưu Viễn thơng nói chung, thầy khoa Cơng nghệ thơng tin nói riêng tận tình bảo v truyền đạt cho em kiến thức quý báu suốt trình học tập trường Các thầy cô trang bị cho em khơng kiến thức chun mơn mà cịn kỹ sống đê từ em vận dụng vào thực tiễn tự hoàn thiện thân Mặc dù em cố gắng sử dụng công nghệ vào đồ án mình, song thời gian kiến thức cịn hạn hẹp nên đồ án tránh thiếu sót Em mong nhận đóng góp ý kiến từ phía thầy tồn thể bạn đề đồ án em hoàn thiện Em xin chân thành cảm ơn! Hà Nội, 01/2021 Sinh viên thực VŨ VĂN THIỆN Vũ Văn Thiện – D17HTTT6 i Đồ án tốt nghiệp đại học LỜI CAM ĐOAN Tôi xin cam đoan đồ án “Website mua bán hàng online TSHOP” đề tài nghiên cứu tơi tìm hiểu thực hướng dẫn TS Nguyễn Tất Thắng Những phần có sử dụng tài liệu, báo, công cụ tác giả liệt kê nêu rõ phần danh sách tài liệu tham khảo Trang web đưa đồ án trung thực không chép hay sử dụng kết đề tài tương tự Nếu phát có chép kết nghiên cứu đề tài khác thân tơi xin chịu hồn tồn trách nhiệm Hà Nội, tháng 01 năm 2021 Sinh viên thực VŨ VĂN THIỆN Vũ Văn Thiện – D17HTTT6 ii Đồ án tốt nghiệp đại học MỤC LỤC LỜI CẢM ƠN i LỜI CAM ĐOAN ii DANH MỤC HÌNH vi DANH MỤC CÁC TỪ VÀ THUẬT NGỮ VIẾT TẮT ix MỞ ĐẦU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 NGƠN NGỮ LẬP TRÌNH JAVASCRIPT 1.2 REACTJS (FRONTEND) 1.3 NODEJS (BACKEND) 1.4 MONGODB 1.5 CƠ SỞ LÝ THUYẾT VỀ CƠ SỞ DỮ LIỆU MYSQL 1.6 KẾT LUẬN CHƯƠNG CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE 2.1 PHÁT BIỂU BÀI TOÁN 2.2 CÁC YÊU CẦU PHI CHỨC NĂNG 2.3 PHÂN TÍCH HỆ THỐNG 2.3.1 Mục đích + phạm vi: 2.3.2 Ai dùng hệ thống? Làm ? 2.3.3 Các đối tượng quản lý 2.3.4 Quan hệ đối tượng 10 2.4 BIỂU ĐỒ USECASE VÀ KỊCH BẢN CHUẨN 10 2.4.1 Biểu đồ Usecase tổng quan 10 2.4.2 Usecase kịch module dăng kí/đăng nhập 11 2.4.3 Usecase kịch module khách hàng quản lí thơng tin cá nhân 13 2.4.4 Usecase kịch module quản lí sản phẩm 15 2.4.5 Usecase kịch module khách hàng đặt hàng toán 17 2.4.6 Usecase kịch module xem thống kê đơn hàng đặt 19 2.5 BIỂU ĐỒ TRẠNG THÁI 20 2.5.1 Biểu đồ trạng thái module đăng nhập/đăng kí 20 2.5.2 Biểu đồ trạng thái module khách hàng quản lí thơng tin cá nhân 21 2.5.3 Biểu đồ trạng thái module quản lí sản phẩm 22 Vũ Văn Thiện – D17HTTT6 iii Đồ án tốt nghiệp đại học 2.5.4 Biểu đồ trạng thái module khách hàng đặt hàng toán 22 2.5.5 Biểu đồ trạng thái module xem thống kê đơn hàng đặt 22 2.6 BIỂU ĐỒ GIAO TIẾP 23 2.6.1 Biểu đồ giao tiếp module đăng nhập/ đăng kí 23 2.6.2 Biểu đồ giao tiếp module khách hàng quản lý thông tin cá nhân 26 2.6.3 Biểu đồ giao tiếp module quản lí sản phẩm 27 2.6.4 Biểu đồ giao tiếp module khách hàng đặt hàng toán 28 2.6.5 Biểu đồ giao tiếp module xem thống kê đơn hàng đặt 28 2.7 BIỂU ĐỒ TUẦN TỰ 29 2.7.1 Biểu đồ module xem đăng/đăng kí 29 2.7.2 Biểu đồ module khách hàng quản lý thông tin cá nhân 31 2.7.3 Biểu đồ module quản lí sản phẩm 33 2.7.4 Biểu đồ module khách hàng đặt hàng toán 34 2.7.5 Biểu đồ module xem thống kê đơn hàng đặt 35 2.8 BIỂU ĐỒ LỚP 35 2.8.1 Mô tả hệ thống đoạn văn 35 2.8.2 Trích danh từ xuất đoạn văn 35 2.8.3 Đánh giá lựa chọn danh từ làm lớp thực thể thuộc tính 35 2.8.4 Xác định quan hệ số lượng thực thể 36 2.8.5 Xác định quan hệ đối tượng thực thể 37 2.9 THIẾT KẾ LỚP THỰC THỂ LIÊN QUAN 37 2.10 THIẾT KẾ CƠ SỞ DỮ LIỆU 38 2.11 KẾT LUẬN CHƯƠNG 40 CHƯƠNG 3: CÀI ĐẶT VÀ KẾT QUẢ TRIỂN KHAI HỆ THỐNG 41 3.2 MỘT SỐ CÔNG CỤ, THƯ VIỆN HỖ TRỢ 41 3.3 CÀI ĐẶT 41 3.4 THIẾT KẾ GIAO DIỆN 44 3.4.1 Giao diện trang chủ website 44 3.4.2 Giao diện chi tiết sản phẩm 45 3.4.3 Giao diện giỏ hàng 45 3.4.4 Giao diện điền thông tin mua hàng 46 3.4.5 Giao diện toán 46 Vũ Văn Thiện – D17HTTT6 iv Đồ án tốt nghiệp đại học 3.4.6 Giao diện kết nối với Paypal 47 3.4.7 Giao diện admin quản lí user 47 3.4.8 Giao diện quản lí sản phẩm 48 3.4.9 Giao diện admin xem thống kê order 48 3.4.10 Giao diện profile 49 3.5 KẾT LUẬN CHƯƠNG 49 KẾT LUẬN 50 TÀI LIỆU THAM KHẢO 51 Vũ Văn Thiện – D17HTTT6 v Đồ án tốt nghiệp đại học Chương Phân tích thiết kế hệ thống Website • Một đơn hàng có nhiều phương thức toán→ DonHang ThanhToan 1n 2.8.5 Xác định quan hệ đối tượng thực thể • Khách hàng, nhân viên kết thừa lớp thành viên tương ứng • Khách hàng, nhân viên quản lí, đơn hàng thành phần hóa đơn • Khách hàng, nhân viên kế thừa từ thành viên tương ứng Từ bước phân tích ta thu biểu đồ lớp sau: Hình 2.25 Biểu đồ trích lớp thực thể 2.9 THIẾT KẾ LỚP THỰC THỂ LIÊN QUAN • Thêm id cho thực thể không kế thừa từ lớp khác gồm lớp: Account, ThanhVien, NhanVien, DichVu, DonHang, SanPham, Shipping, GioHang, ThanhToan • Gán kiểu liệu cho thuộc tính • Chuyển quan hệ Association sang Aggregation Composition Vũ Văn Thiện – D17HTTT6 37 Đồ án tốt nghiệp đại học Chương Phân tích thiết kế hệ thống Website Hình 2.26 Biểu đồ thiết kế lớp thực thể liên quan 2.10 THIẾT KẾ CƠ SỞ DỮ LIỆU Bước 1: CSDL gồm bảng: tblAccount, tblThanhVien, tblDichVu, tblDonHang, tblSanPham, tblGioHang, tblGioHang_SanPham, tblDonHang_SanPham, tblShipping, tblThanhToan Bước 2: Với lớp, thuộc tính khơng có kiểu liệu đối tượng thuộc tính bảng Bước 3: Chuyển quan hệ số lượng lớp thành quan hệ số lượng bảng: • NhanVien, KhachHang kế thừa ThanhVien → 1-1 • NVQuanli kế thừa NhanVien → 1-1 • KhacHang GioHang: 1-1 → giữ nguyên • DichVu SanPham: 1-n → giữ nguyên • KhachHang SanPham: n-n → tạo bảng KhachHang_SanPham tách thành quan hệ 1-n • GioHang SanPham: n-n → tạo bảng GioHang_SanPham tách thành quan hệ 1-n • Shipping DonHang: 1-1 → giữ nguyên • KhachHang DonHang: 1-n → giữ nguyên • DonHang ThanhToan: 1-n → giữ ngun Bước 4: Thêm khóa chính: bảng có id →id khóa Vũ Văn Thiện – D17HTTT6 38 Đồ án tốt nghiệp đại học Chương Phân tích thiết kế hệ thống Website Thêm khóa phụ: - tblNhanVien kế thừa từ tblThanhVien →tblNhanVien có khóa phụ tblThanhVienid tham chiếu đến khóa tblThanhVien, khóa đồng thời khóa tblNhanVien -tblKhachHang kế thừa từ tblThanhVien →tblKhachHang có khóa phụ tblThanhVienid tham chiếu đến khóa tblThanhVien, khóa đồng thời khóa tblKhachHang - tblDichVu tblSanPham 1-n → tblSanPham có khóa phụ tblDichVuid tham chiếu đến khóa tblDichVu -tblKhachHang tblDonHang 1-n → tblKhachHang có khóa phụ tblKhachHangid tham chiếu đến khóa tblKhachHang - tblDonHang tblThanhToan 1-n → tblThanhToan có khóa phụ tblDonHangid tham chiếu đến khóa tblDonHang - tblDOnHang tblSanPham 1-n với tblDonHang_SanPham → DonHang_SanPham có khóa phụ tblDOnHangid tblSanPhamid them chiếu khóa tblDOnHang tblSanPham - tblGioHang tblSanPham 1-n với tblGioHang_SanPham → GioHang_SanPham có khóa phụ tblGioHangid tblSanPhamid them chiếu khóa tblGioHang tblSanPham Ta có CSDL sau: tbl đến tbl đến Hình 2.27 Cơ sở liệu hệ thống Vũ Văn Thiện – D17HTTT6 39 Đồ án tốt nghiệp đại học Chương Phân tích thiết kế hệ thống Website 2.11 KẾT LUẬN CHƯƠNG Đồ án trình bày phân tích thiết kế hệ thống, nhờ chức sở liệu cho website làm rõ Trên sở phân tích, thiết kế đây, chương đồ án trình bày cài đặt kết triển khai hệ thống Vũ Văn Thiện – D17HTTT6 40 Đồ án tốt nghiệp đại học Chương Cài đặt kết triển khai hệ thống CHƯƠNG 3: CÀI ĐẶT VÀ KẾT QUẢ TRIỂN KHAI HỆ THỐNG 3.1 YÊU CẦU HỆ THỐNG - Hệ điều hành Window, Linux, macOS Node version 14 trở lên: môi trường để chạy ReactJS NodeJS NodeJS and NPM MySQL Git 3.2 MỘT SỐ CÔNG CỤ, THƯ VIỆN HỖ TRỢ - Visual Studio Code Visual Paradigm 16.3 Bootstrap ReactJS React router dom AJAX Axios Styled Component Heroku(deploy Backend) Netlify(deploy Frontend) 3.3 CÀI ĐẶT NodeJS B1: Download NodeJS Vũ Văn Thiện – D17HTTT6 41 Đồ án tốt nghiệp đại học Chương Cài đặt kết triển khai hệ thống B2: Cài đặt NodeJS Windows đơn giản, chấp nhận tùy chọn mặc định nhấn "Next Next" bước cuối Vũ Văn Thiện – D17HTTT6 42 Đồ án tốt nghiệp đại học Chương Cài đặt kết triển khai hệ thống Hình 3.1 Cài đặt NodeJS ReactJS B1: npm install -g create-react-app B2: create-react-app my-app B3: cd my-app B4: npm start Ta giao diện start project ReactJS Hình 3.2 Cài đặt ReactJS Vũ Văn Thiện – D17HTTT6 43 Đồ án tốt nghiệp đại học Chương Cài đặt kết triển khai hệ thống 3.4 THIẾT KẾ GIAO DIỆN 3.4.1 Giao diện trang chủ website Hình 3.3 Giao diện trang chủ website Vũ Văn Thiện – D17HTTT6 44 Đồ án tốt nghiệp đại học Chương Cài đặt kết triển khai hệ thống 3.4.2 Giao diện chi tiết sản phẩm Hình 3.4 Giao diện chi tiết sản phẩm 3.4.3 Giao diện giỏ hàng Hình 3.5 Giao diện giỏ hàng Vũ Văn Thiện – D17HTTT6 45 Đồ án tốt nghiệp đại học Chương Cài đặt kết triển khai hệ thống 3.4.4 Giao diện điền thơng tin mua hàng Hình 3.6 Giao diện điền thông tin mua hàng 3.4.5 Giao diện tốn Hình 3.7 Giao diện tốn Vũ Văn Thiện – D17HTTT6 46 Đồ án tốt nghiệp đại học Chương Cài đặt kết triển khai hệ thống 3.4.6 Giao diện kết nối với Paypal Hình 3.8 Giao diện kết nối với paypal 3.4.7 Giao diện admin quản lí user Hình 3.9 Giao diện admin quản lí user Vũ Văn Thiện – D17HTTT6 47 Đồ án tốt nghiệp đại học Chương Cài đặt kết triển khai hệ thống 3.4.8 Giao diện quản lí sản phẩm Hình 3.10 Giao diện admin quản lí sản phẩm 3.4.9 Giao diện admin xem thống kê order Hình 3.11 Giao diện admin xem thống kê đơn hàng Vũ Văn Thiện – D17HTTT6 48 Đồ án tốt nghiệp đại học Chương Cài đặt kết triển khai hệ thống 3.4.10 Giao diện profile Hình 3.12 Giao diện profile 3.5 KẾT LUẬN CHƯƠNG Đồ án trình bày yêu cầu cài đặt thiết kế giao diện cho website bán điện thoại online TSHOP Với kết trình bày trên, hệ thống website bán điện thoại online TSHOP hoàn thành yêu cầu đặt Vũ Văn Thiện – D17HTTT6 49 Đồ án tốt nghiệp đại học Kết luận KẾT LUẬN Đánh giá kết đồ án Kết đạt được: - Xây dựng hoàn chỉnh hệ thống website bán di động online TSHOP theo mục tiêu đề ban đầu với chức thực quy trình nghiệp vụ trả kết mong muốn với chức - Hiểu quy trình để xây dựng lên trang ecomerce - Giao diện chương trình thân thiện, dễ sử dụng - Website giúp người dùng tiết kiệm thời gian, cơng sức để có sản phẩm ưng ý Dễ dàng quản lý thông tin chi tiết người dùng, thông tin sản phẩm đơn hàng người mua sản phẩm từ thuận tiện cho việc tốn giao hàng - Tìm hiểu nắm rõ công cụ để xây dựng website như: NodeJS, Visual Studio Code - Thực kiểm thử phần mềm mức độ lập trình Những tồn tại, hạn chế cần khắc phục: - Website cịn chức - Chưa thể cập nhật hết tất sản phẩm có mặt thị trường Hướng phát triển đề tài Với nỗ lực thân, em cố gắng hoàn thành yêu cầu đề tài Do thời gian lực có hạn nên website em sâu vào chức bán sản phẩm Hướng phát triển em khiến website trở thành website bán hàng chuyên nghiệp Cung cấp đầy đủ mặt hàng có thị trường với giá hợp lý, phải Đi kèm với bán hàng dịch vụ uy tín chất lượng để phục vụ đến khách hàng Thêm chức khác vào trang web như: thêm filter, đăng nhập google, facebook, tư vấn khách hàng tự động, thêm phương thức toán khác Đề nghị ý kiến Trong thời gian thực đề tài nhóm đề tài khơng thể tránh khỏi thiếu sót, nhóm đề tài mong nhận ý kiến đóng góp từ phía q thầy bạn để nhóm hồn thiện website bán hàng trực tuyến TSHOP Vũ Văn Thiện – D17HTTT6 50 Đồ án tốt nghiệp đại học Tài liệu tham khảo TÀI LIỆU THAM KHẢO Tài liệu [1] Nguyễn Mạnh Hùng, Đỗ Thị Bích Ngọc, “Phân tích thiết kế đảm bảo chất lượng phần mềm”, Học Việc Công Nghệ Bưu Chính Viễn Thơng [2] Trần Đình Quế, Nguyễn Mạnh Sơn, Phân tích thiết kế Hệ Thống Thơng tin, Học Việc Cơng Nghệ Bưu Chính Viễn Thơng [3] Object-Oriented and Classical Software Engineering, Stephen R Schach, Eigtth Edition, Mc Graw Hill, 2010 Trang web [4] https://www.w3schools.com [5] https://reactjs.org [6] https://nodejs.org [7] https://vi.wikipedia.org/wiki [8] https://www.mongodb.com [9] https://www.youtube.com Vũ Văn Thiện – D17HTTT6 51