Xây dựng website sàn thương mại điện tử

ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU TẠI KON TUM TRỊNH HỒNG THỨC ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE SÀN THƯƠNG MẠI ĐIỆN TỬ Kon Tum, tháng năm 2022 ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU TẠI KON TUM ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE SÀN THƯƠNG MẠI ĐIỆN TỬ GIẢNG VIÊN HƯỚNG DẪN : THS LÊ THỊ BẢO YẾN SINH VIÊN THỰC HIỆN : TRỊNH HỒNG THỨC LỚP : K11TT MSSV : 17152480201002 Kon Tum, tháng năm 2022 LỜI CẢM ƠN Trước hết em xin bày tỏ lịng biết ơn sâu sắc tới giáo hướng dẫn Thạc sĩ Lê Thị Bảo Yến tận tình giúp đỡ, hướng dẫn em suốt trình tìm hiểu nghiên cứu hoàn thành Báo cáo đồ án tốt nghiệp Em xin chân thành cảm ơn thầy cô Khoa Công Nghệ - Trường Đại học Đà Nẵng Phân hiệu Kon Tum thầy cô trường trang bị cho em kiến thức bản, cần thiết để em hồn thành Báo cáo đồ án tốt nghiệp Xin gửi lời cảm ơn đến bạn bè người bên em động viên tạo điều kiện thuận lợi cho em, tận tình giúp đỡ, bảo em thiếu sót trình làm Báo cáo đồ án tốt nghiệp Vì thời gian có hạn, trình độ hiểu biết thân nhiều hạn chế Cho nên đồ án khơng tránh khỏi thiếu sót, em mong nhận đóng góp ý kiến tất thầy cô giáo bạn bè để đồ án em hoàn thiện Em xin chân thành cảm ơn! Sinh viên Trịnh Hồng Thức MỤC LỤC CHƯƠNG TỔNG QUAN ĐỀ TÀI 1.1 TỔNG QUAN VẤN ĐỀ NGHIÊN CỨU 1.2 LÝ DO CHỌN ĐỀ TÀI 1.3 MỤC TIÊU NGHIÊN CỨU 1.4 PHƯƠNG PHÁP NGHIÊN CỨU 1.4.1 Khảo sát 1.4.2 Nghiên cứu lý thuyết 1.4.3 Nghiên cứu công nghệ 1.5 PHẠM VI ĐỀ TÀI CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 MƠ HÌNH MVC 2.1.1 Khái niệm 2.1.2 Luồng tương tác thành phần MVC 2.1.3 Ưu - nhược điểm mô hình MVC 2.2 MƠ HÌNH THƯƠNG MẠI ĐIỆN TỬ B2C, C2C 2.2.1 Mơ hình B2C 2.2.2 Mơ hình C2C 2.3 NGƠN NGỮ LẬP TRÌNH 2.3.1 ReactJs 2.3.2 HTML 2.3.3 CSS 2.3.4 JavaScript 2.4 CÔNG CỤ SỬ DỤNG 2.4.1 Visual studio code 2.4.2 Postman 2.5 THƯ VIỆN HỖ TRỢ 2.5.1 Bootstrap 2.5.2 Google Font 2.5.3 Font awesome 2.5.4 Material UI 10 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ 11 3.1 PHÂN TÍCH CHỨC NĂNG CỦA WEBSITE 11 3.1.1 Chức Khách hàng 11 3.1.2 Chức User bán hàng 13 3.1.3 Chức Admin 15 3.2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 17 3.2.1 Sơ đồ Use case 17 3.2.2 Sơ đồ 28 3.2.3 Sơ đồ lớp 48 i 3.2.4 Lược đồ quan hệ sở liệu 51 CHƯƠNG KẾT QUẢ 56 4.1 GIAO DIỆN USER 56 4.1.1 Trang Chủ 56 4.1.2 Trang đăng nhập 59 4.1.3 Trang đăng ký 59 4.1.4 Trang sản phẩm 60 4.1.5 Trang giỏ hàng 61 4.1.6 Trang đặt hàng 61 4.1.7 Trang chi tiết sản phẩm 62 4.1.8 Trang quản lý đơn hàng 63 4.1.9 Trang thông tin chi tiết Khách hàng 63 4.1.10 Trang quản lý thông báo 64 4.1.11 Trang tìm kiếm sản phẩm 64 4.2 GIAO DIỆN USER BÁN HÀNG 65 4.2.1 Trang chủ 65 4.2.2 Trang quản lý sản phẩm 66 4.2.3 Trang thêm sản phẩm 67 4.2.4 Trang sửa sản phẩm 68 4.2.5 Trang quản lý đơn hàng 69 4.2.6 Trang quản lý gửi mail Marketing 70 4.2.7 Trang quản lý mã giảm giá 70 4.2.8 Trang tạo mã giảm giá 71 4.2.9 Trang quản lý shop 71 4.3 GIAO DIỆN ADMIN 72 4.3.1 Trang đăng nhập 72 4.3.2 Trang chủ 72 4.3.3 Trang thông tin Admin 73 4.3.4 Trang mã giảm giá 73 4.3.5 Trang tạo Mã giảm giá 74 4.3.6 Trang gửi Mã giảm giá 74 4.3.7 Trang quản lý Banner 75 4.3.8 Trang quản lý Slide 75 4.3.9 Trang thêm Slide 76 4.3.10 Trang quản lý Menu 76 4.3.11 Trang thêm Menu 77 4.3.12 Trang quản lý Sản phẩm 77 4.3.13 Trang xem chi tiết Sản phẩm 78 4.3.14 Trang quản lý tài khoản 78 4.3.15 Trang xem chi tiết Tài khoản 79 ii 4.3.16 Trang quản lý Đơn hàng 79 4.3.17 Trang xem chi tiết Đơn hàng 80 4.3.18 Trang quản lý Thông báo 80 4.3.19 Trang quản lý Đơn vị vận chuyển 81 4.3.20 Trang thêm Đơn vị vận chuyển 81 4.3.21 Trang quản lý giao diện Flash Sale 82 4.3.22 Trang quản lý Shop Mall 82 4.3.23 Trang quản lý Email nhận thông báo 83 CHƯƠNG KẾT LUẬN 84 5.1 TỔNG KẾT 84 5.2 KẾT QUẢ ĐẠT ĐƯỢC 84 5.2.1 Đối với người sử dụng 84 5.2.2 Đối với người quản trị 84 5.3 HẠN CHẾ CỦA ĐỀ TÀI 84 5.4 HƯỚNG PHÁT TRIỂN ĐỀ TÀI 84 DANH MỤC TÀI LIỆU THAM KHẢO 86 iii DANH MỤC TỪ VIẾT TẮT B2C C2C CSDL HT MGG MVC NQL QT : Business To Consumer : Consumer To Consumer : Cơ sở liệu : Hệ thống : Mã giảm giá : Model View Controller : Nhà quản lý : Quản trị iv DANH MỤC BẢNG Số hiệu bảng 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 Tên bảng Bảng mô tả sơ đồ use case Bảng đặc tả sơ đồ use case đăng ký tài khoản Bảng đặc tả sơ đồ use case đăng nhập Bảng đặc tả sơ đồ use case quản lý đơn hàng Bảng đặc tả sơ đồ use case quản lý sản phẩm Bảng đặc tả sơ đồ use case quản lý mã giảm giá Bảng đặc tả sơ đồ use case quản lý đơn vị vận chuyển Bảng đặc tả sơ đồ use case quản lý danh mục Bảng đặc tả sơ đồ use case quản lý banner Bảng đặc tả sơ đồ use case quản lý slide Bảng mô tả sơ đồ lớp Bảng mô tả lược đồ CSDL v Trang 17 21 21 22 23 23 24 25 26 26 48 51 DANH MỤC HÌNH Số hiệu hình vẽ 2.1 2.2 2.3 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14 3.15 3.16 3.17 3.18 3.19 3.20 3.21 3.22 3.23 3.24 3.25 3.26 3.27 3.28 3.29 3.30 3.31 3.32 Tên hình vẽ Mơ hình MVC Mơ hình B2C Mơ hình C2C Sơ đồ Use case tổng quát Sơ đồ Use case đăng ký tài khoản Sơ đồ Use case đăng nhập Sơ đồ Use case quản lý đơn hàng Sơ đồ Use case quản lý sản phẩm Sơ đồ Use case quản lý mã giảm giá Sơ đồ Use case quản lý đơn vị vận chuyển Sơ đồ Use case quản lý danh mục Sơ đồ Use case quản lý banner Sơ đồ Use case quản lý slide Sơ đồ đăng ký khách hàng Sơ đồ đăng nhập khách hàng Sơ đồ thêm sản phẩm vào giỏ hàng khách hàng Sơ đồ xóa sản phẩm khỏi giỏ hàng khách hàng Sơ đồ tìm kiếm sản phẩm khách hàng Sơ đồ chỉnh sửa thông tin cá nhân khách hàng Sơ đồ đăng nhập user bán hàng Sơ đồ đăng ký user bán hàng Sơ đồ thêm sản phẩm user bán hàng Sơ đồ cập nhật sản phẩm user bán hàng Sơ đồ thêm mã giảm giá user bán hàng Sơ đồ xóa mã giảm giá user bán hàng Sơ đồ đăng nhập quản trị hệ thống Sơ đồ sửa sản phẩm quản trị hệ thống Sơ đồ thêm danh mục quản trị hệ thống Sơ đồ xóa danh mục quản trị hệ thống Sơ đồ thêm banner quản trị hệ thống Sơ đồ xóa banner quản trị hệ thống Sơ đồ thêm slide quản trị hệ thống Sơ đồ xóa slide quản trị hệ thống Sơ đồ lớp Lược đồ quan hệ sở liệu vi Trang 20 21 22 23 23 24 25 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 50 55 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 4.10 4.11 4.12 4.13 4.14 4.15 4.16 4.17 4.18 4.19 4.20 4.21 4.22 4.23 4.24 4.25 4.26 4.27 4.28 4.29 4.30 4.31 4.32 4.33 4.34 4.35 4.36 4.37 4.38 Giao diện trang chủ máy tính Giao diện trang chủ điện thoại Trang đăng nhập khách hàng Trang đăng ký khách hàng Trang nhập mã xác nhận khách hàng Trang sản phẩm Trang giỏ hàng Trang đặt hàng Trang chi tiết sản phẩm Trang quản lý đơn hàng Trang thông tin chi tiết khách hàng Trang quản lý thơng báo Trang tìm kiếm sản phẩm Trang chủ User bán hàng Trang quản lý sản phẩm User bán hàng Trang thêm sản phẩm User bán hàng Trang sửa sản phẩm User bán hàng Trang quản lý đơn hàng Trang quản lý gửi mail Marketing Trang quản lý mã giảm giá Trang tạo mã giảm giá Trang quản lý shop Trang đăng nhập Admin Trang chủ Admin Trang thông tin Admin Trang mã giảm giá Admin Trang tạo mã giảm giá Trang gửi mã giảm giá Trang quản lý Banner Trang quản lý Slide Trang thêm Slide Trang quản lý Menu Trang thêm Menu Trang quản lý sản phẩm Trang quản lý chi tiết sản phẩm Trang quản lý tài khoản Trang quản lý chi tiết tài khoản Trang quản lý đơn hàng vii 57 58 59 59 60 60 61 61 62 63 63 64 64 65 66 67 68 69 70 70 71 71 72 72 73 73 74 74 75 75 76 76 77 77 78 78 79 79 4.3.3 Trang thông tin Admin Tại hiển thị tồn thơng tin chi tiết Admin bao gồm: số điện thoại, username, Email, địa Hình 4.25: Trang thơng tin Admin 4.3.4 Trang mã giảm giá Tại Admin xem thơng tin mã giảm giá thêm xóa mã giảm giá Hình 4.26: Trang mã giảm giá Admin 73 4.3.5 Trang tạo Mã giảm giá Tại Admin bắt buộc phải điền đầy đủ thông tin để tạo mã giảm giá Hình 4.27: Trang tạo mã giảm giá 4.3.6 Trang gửi Mã giảm giá Admin nhập thông tin email lựa Email cần gửi mã giảm giá Hình 4.28: Trang gửi mã giảm giá 74 4.3.7 Trang quản lý Banner Tại quản lý tất Banner website, Admin thêm, xóa, sửa Banner website Hình 4.29: Trang quản lý Banner 4.3.8 Trang quản lý Slide Tại quản lý tất hình ảnh Slide website Admin xem thơng tin chi tiết Slide bao gồm: tên, trạng thái hình ảnh slide Hình 4.30: Trang quản lý Slide 75 4.3.9 Trang thêm Slide Tại yêu cầu Admin phải nhập đầy đủ tồn thơng tin để tạo Slide Hình 4.31: Trang thêm Slide 4.3.10 Trang quản lý Menu – Tại quản lý tồn thơng tin menu Admin có xem chi tiết Menu bao gồm tên menu, hình ảnh, danh mục cha, trạng thái menu – Admin xóa menu khỏi Website Hình 4.32: Trang quản lý Menu 76 4.3.11 Trang thêm Menu Tại yêu cầu Admin phải nhập đầy đủ thơng tin menu tạo menu Hình 4.33: Trang thêm Menu 4.3.12 Trang quản lý Sản phẩm Tại Admin thấy tất sản phẩm User bán hàng Admin xem thơng tin sản phẩm bao gồm: hình ảnh sản phẩm, danh mục, tên sản phẩm, trạng thái Hình 4.34: Trang quản lý sản phẩm 77 4.3.13 Trang xem chi tiết Sản phẩm Tại Admin xem tất thông tin chi tiết sản phẩm Hình 4.35: Trang quản lý chi tiết sản phẩm 4.3.14 Trang quản lý tài khoản Tại Admin quản lý tất thơng tin tài khoản Website Admin xem thông tin bao gồm: tên tài khoản, email, phone, trạng thái Hình 4.36: Trang quản lý tài khoản 78 4.3.15 Trang xem chi tiết Tài khoản Tại trang chi tiết tài khoản Admin xem thông tin chi tiết tài khoản, bao gồm tất thơng tin tài khoản Hình 4.37: Trang quản lý chi tiết tài khoản 4.3.16 Trang quản lý Đơn hàng Tại trang quản lý đơn hàng, Admin xem tất đơn hàng thực Website Hình 4.38: Trang quản lý đơn hàng 79 4.3.17 Trang xem chi tiết Đơn hàng Tại trang chi tiết đơn hàng Admin xem tồn thơng tin đơn hàng, bao gồm người mua hàng, địa chỉ, tổng số tiền tốn,… Hình 4.39: Trang xem chi tiết đơn hàng 4.3.18 Trang quản lý Thông báo Tại trang quản lý thơng báo Admin xem thơng tin đơn hàng, sản phẩm thêm shop User bán hàng mua sản phẩm Hình 4.40: Trang quản lý thông báo 80 4.3.19 Trang quản lý Đơn vị vận chuyển Tại trang quản lý đơn vị vận chuyển Admin quản lý đc thơng tin mã đơn vị vận chuyển trạng thái đơn vị vận chuyển Hình 4.41: Trang quản lý đơn vị vận chuyển 4.3.20 Trang thêm Đơn vị vận chuyển Tại trang thêm đơn vị vận chuyển, Admin cần nhập đầy đủ thơng tin để thêm đơn vị vận chuyển vào Website Hình 4.42: Trang thêm đơn vị vận chuyển 81 4.3.21 Trang quản lý giao diện Flash Sale Tại Admin quản lý hiển thị sản phẩm danh mục hiển thị Flash Sale Website Hình 4.43: Trang quản lý Flash sale 4.3.22 Trang quản lý Shop Mall Tại trang quản lý Shop Mall Admin thêm thơng tin hiển thị cho Shop Mall bao gồm hình ảnh, sản phẩm hiển thị kèm theo shop mall,… Hình 4.44: Trang quản lý Shop mall 82 4.3.23 Trang quản lý Email nhận thông báo Tại Admin thấy danh sách Email đăng ký nhận thông tin khuyến từ shop Hình 4.45: Trang quản lý Email nhận Thơng báo 83 CHƯƠNG KẾT LUẬN 5.1 TỔNG KẾT Đề tài “Xây dựng website sàn thương mại điện tử” xuất phát từ thực tế ngày nhằm tạo tảng để cá nhân, doanh nghiệp hay cửa hàng bày bán sản phẩm trực tuyến Mặc dù có nhiều cố gắng, tìm hiểu kiến thức học, kết hợp tra cứu tài liệu ngơn ngữ lập trình Website, tài liệu liên quan sàn thương mại điện tử nước nước hạn chế thời gian, khả kinh nghiệm nên em chọn đề tài “Xây dựng sàn website thương mại điện tử” Website không tránh khỏi thiếu sót định, nên website hồn thành mức độ sau: – Tìm hiểu ngơn ngữ lập Javascript, Framework React, NodeJs,… – Áp dụng xây dựng thực nghiệm trang “Website sàn thương mại điện tử” 5.2 KẾT QUẢ ĐẠT ĐƯỢC 5.2.1 Đối với người sử dụng – Website sàn thương mại điện tử hoàn thiện hầu hết chức cho người sử dụng bao gồm: tìm kiếm sản phẩm, tốn, thêm sản phẩm vào giỏ hàng, xem chi tiết thông tin sản phẩm, gửi tin nhắn, bính luận, đánh giá, ; – Người sử dụng đăng ký trở thành thành viên để mua hàng đăng ký để trở thành người bán hàng Website; – Giao diện chương trình thiết kế cân đối, thân thiện dễ sử dụng; – Chương trình giúp khách hàng tìm kiếm đặt mua sản phẩm Website thông qua Internet 5.2.2 Đối với người quản trị – Website hoàn thiện hầu hết chức cần có cho quản trị viên bao gồm: xem thông tin đề mục cần quản lý (khách hàng, sản phẩm, đơn hàng, danh mục sản phẩm, tin tức, nhà cung cấp, mã giảm giá,…), đưa form để nhập liệu thông tin cần thiết cho loại liệu; – Các chức thực thông qua giao diện quản trị website sàn thương mại điện tử 5.3 HẠN CHẾ CỦA ĐỀ TÀI – Website chưa kết hợp việc toán online (momo, paypal,…); – Chưa tối ưu việc tải liệu Website 5.4 HƯỚNG PHÁT TRIỂN ĐỀ TÀI – Hồn thiện chức cịn lại chưa làm như: toán online,…; – Tối ưu hóa CSDL; – Tối ưu hóa chức hệ thống để đáp ứng nhu cầu người sử dụng; – Xây dựng trang Web quy mô lớn với nhiều ứng dụng, chức ; 84 – Tìm hiểu sâu ngơn ngữ Frameword React để đáp ứng nhiều nhu cầu người sử dụng, phát triển tối ưu hóa hệ thống; – Kết hợp ngôn ngữ React với hệ quản trị sở liệu lớn hơn: SQL Server, Oracle… 85 DANH MỤC TÀI LIỆU THAM KHẢO [1] [2] [3] [4] TS Ao Thu Hoài – PGS TS Nguyễn Viết Khôi (2015), Thương mại điện tử, Nhà xuất thông tin truyền thông Sueghring (2016), JavaScript: hướng dẫn học qua ví dụ, Bách khoa Hà Nội Jeremy (2016), Nhóm AGL creative, HTML5 CSS3: Thiết kế trang web thích ứng giàu tính năng, Bách khoa Hà Nội Joel Murach, Ray Harris (2016), Lập trình PHP MySQL, Bách khoa Hà Nội 86 GIẤY XÁC NHẬN HOÀN THÀNH ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên: Trịnh Hồng Thức Lớp: K11TT Mã số sinh viên: 17152480201002 Xác nhận sinh viên: Trịnh Hồng Thức chỉnh sửa báo cáo thực tập tốt nghiệp theo ý kiến Giảng viên hướng dẫn Hội đồng đánh giá Tên báo cáo thực tập tốt nghiệp: Xây dựng website sàn thương mại điện tử Trưởng khoa Kon tum, ngày tháng năm 2022 Người hướng dẫn ... cơng ty đến với tất người Do vậy, em định chọn đề tài ? ?Xây dựng website sàn thương mại điện tử? ?? làm đồ án tốt nghiệp với mong muốn tạo Website bán hàng để quảng bá sản phẩm, tạo ta nơi mua bán...ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU TẠI KON TUM ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE SÀN THƯƠNG MẠI ĐIỆN TỬ GIẢNG VIÊN HƯỚNG DẪN : THS LÊ THỊ BẢO YẾN SINH VIÊN THỰC HIỆN : TRỊNH HỒNG... doanh phổ biến B2C, C2C; – Áp dụng cơng cụ, ngơn ngữ lập trình để xây dựng website; – Áp dụng kiến thức Thương mại điện tử vào website 1.4 PHƯƠNG PHÁP NGHIÊN CỨU 1.4.1 Khảo sát – Khảo sát yêu