Xây dựng WEBSITE thương mại điện tử với CHATBOT tư vấn (báo cáo cuối kì đồ án 1)

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI CHATBOT TƯ VẤN Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực : Trần Đoàn Phương - 19520230 Sinh viên thực : Đỗ Đức Tâm - 19520253 Lớp SE121.M21 : TP HCM, tháng 06 năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI CHATBOT TƯ VẤN Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực : Trần Đoàn Phương - 19520230 Sinh viên thực : Đỗ Đức Tâm - 19520253 Lớp SE121.M21 : TP HCM, tháng 06 năm 2022 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc   ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI CHATBOT TƯ VẤN Tên đề tài tiếng Anh: BUILDING AN E-COMMERCE WEBSITE WITH CONSULTING CHATBOT 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/02/2022 đến ngày 10/06/2022 Sinh viên thực hiện: Trần Đoàn Phương – 19520230 Đỗ Đức Tâm - 19520253 Nội dung đề tài: Giới thiệu: - Trong suốt lịch sử phát triển loài người, nhu cầu mua bán, trao đổi hàng hố ln nhu cầu thiết yếu Trước đây, người mua sắm thông qua buổi họp chợ, sau hệ thống siêu thị, cửa hàng tiện lợi đời, giúp dễ dàng việc mua bán Tuy nhiên, thời đại công nghệ phát triển nay, mua sắm online ngày phổ biến hơn, đặc biệt giới trẻ - Có thể thấy nhiều ưu điểm vượt trội mua sắm online so với mua trực tiếp truyền thống: o Nhanh chóng: vài thao tác để tìm mặt hàng cần o Tiện lợi: khơng cần trực tiếp cửa hàng, mua đâu vào thời gian o Đa dạng mặt hàng: gần tìm thấy tất mặt hàng trang thương mại điện tử o Dễ dàng lựa chọn: so sánh sản phẩm dựa vào lượt đánh giá người mua trước, dễ dàng cân nhắc mua sản phẩm o Giá tốt: cạnh tranh giá sàn thương mại điện tử cao nên sản phẩm thường có giá rẻ ngồi thị trường - Hiện có nhiều website thương mại điện tử phổ biến Việt Nam Shopee, Tiki, Sendo, Lazada, - Nhận thấy tiềm phát triển ngành thương mại điện tử, nhóm em mong muốn tự tạo nên website thương mại điện tử riêng mình, lí chúng em chọn đề tài Mục tiêu: - Xây dựng website thương mại điện tử đáp ứng tiêu chí: o Giao diện thân thiện, dễ sử dụng o Đáp ứng tính cần có website thương mại điện tử o Tích hợp chatbot tư vấn giúp dễ dàng việc tra cứu thông tin Phạm vi:  Phạm vi môi trường: o Triển khai sản phẩm đề tài môi trường web  Phạm vi chức năng: o Quản lý sản phẩm theo danh mục o Tìm kiếm sản phẩm o Quản lý tài khoản, thông tin khách hàng o Quản lý giỏ hàng, tốn o Quản lý, tra cứu thơng tin đơn hàng o Tích hợp chatbot tư vấn Đối tượng: - Người bán có nhu cầu bán sản phẩm - Khách hàng có nhu cầu mua sản phẩm Phương pháp thực hiện: - Trải nghiệm website thương mại điện tử có, từ phân tích, xác định tính cần triển khai - Lập kế hoạch, phân công công việc cho thành viên - Tìm hiểu cơng nghệ sử dụng - Triển khai xây dựng website theo kế hoạch đề - Kiểm thử, phát sửa lỗi (nếu có) - Báo cáo đồ án Cơng nghệ: - Front-end: HTML5, CSS3, JQuery - Back-end: PHP - Database: MySQL Kết mong đợi - Xây dựng website thương mại điện tử với đầy đủ chức - Giao diện thân thiện, đại, dễ sử dụng, có trải nghiệm người dùng tốt - Tích hợp chatbot tư vấn giúp hỗ trợ khách hàng tốt - Nắm bắt kiến thức cần có quy trình xây dựng website - Có tính tiến hố: phát triển, mở rộng thêm tính tương lai - Q trình thực đạt tiến độ môn học Kế hoạch thực hiện: Thời gian Công việc thực Từ 21/02/2022 đến Tìm hiểu đề tài, phân tích u cầu, xác định 13/03/2022 tính cần có sản phẩm Từ 14/03/2022 đến Tìm hiểu cơng nghệ sử dụng: HTML, 27/03/2022 CSS, JQUERY, PHP Từ 28/03/2022 đến 10/04/2022 Từ 11/04/2022 đến 02/05/2022 Từ 03/05/2022 đến 29/05/2022 Từ 30/05/2022 đến 05/06/2022 Thành viên thực Cả thành viên Cả thành viên Lên thiết kế chi tiết giao diện Figma Trần Đoàn Phương Cài đặt bên phía front-end Cả thành viên Cài đặt bên phía back-end Đỗ Đức Tâm Hồn thiện sản phẩm báo cáo Cả thành viên TP HCM, ngày 21 tháng 02 năm 2022 Xác nhận CBHD Sinh viên (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Trần Đoàn Phương Đỗ Đức Tâm MỤC LỤC Chương GIỚI THIỆU ĐỀ TÀI 12 1.1 Tên đề tài 12 1.2 Lí chọn đề tài 12 1.3 Mô tả sản phẩm 12 1.4 Chức 12 1.5 Công nghệ sử dụng 13 1.6 Thơng tin nhóm 13 Chương CƠ SỞ LÝ THUYẾT 14 2.1 HTML 14 2.2 CSS 15 2.3 JavaScript 15 2.4 PHP 17 2.5 MySQL 18 Chương PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 21 3.1 Mơ hình hệ thống 21 3.2 Sơ đồ Use-case 22 3.3 Danh sách use-case 23 3.4 Đặc tả use-case 23 3.4.1 Use-case “Đăng nhập” 23 3.4.2 Use-case “Đăng ký” 24 3.4.3 Use-case “Đăng xuất” 25 3.4.4 Use-case “Quản lý thông tin cá nhân” 26 3.4.5 Use-case “Chỉnh sửa thông tin cá nhân” 26 3.4.6 Use-case “Đổi mật khẩu” 27 3.4.7 Use-case “Tìm kiếm sản phẩm” 28 3.4.8 Use-case “Mua hàng” 28 3.4.9 Use-case “Tra cứu đơn hàng” 29 3.4.10 Use-case “Đánh giá sản phẩm” 30 3.4.11 Use-case “Bán hàng” 31 3.4.12 Use-case “Tra cứu đơn bán” 32 3.4.13 Use-case “Quản lý thông tin sản phẩm” 32 Chương THIẾT KẾ DỮ LIỆU 34 4.1 Sơ đồ logic 34 4.2 Mô tả chi tiết bảng liệu 35 4.2.1 Bảng “Account” 35 4.2.2 Bảng “Address” 35 4.2.3 Bảng “Product” 36 4.2.4 Bảng “ImageProduct” 37 4.2.5 Bảng “Color” 37 4.2.6 Bảng “ProductInCart” 37 4.2.7 Bảng “ProductInFavorite” 37 4.2.8 Bảng “ProductInBill” 38 4.2.9 Bảng “Bill” 38 4.2.10 Bảng “DetailBill” 38 4.2.11 Bảng “Evalute” 39 Chương THIẾT KẾ GIAO DIỆN 40 5.1 Danh sách hình 40 5.2 Chi tiết hình 41 5.2.1 Màn hình “Đăng nhập” 41 5.2.2 Màn hình “Đăng ký” 42 5.2.3 Màn hình “Trang chủ” 43 5.2.4 Màn hình “Danh sách sản phẩm” 46 5.2.5 Màn hình “Chi tiết sản phẩm” 47 5.2.6 Màn hình “Giỏ hàng” 49 5.2.7 Màn hình “Xác nhận đặt hàng” 50 5.2.8 Màn hình “u thích” 52 5.2.9 Màn hình “Danh sách đơn mua” 53 5.2.10 Màn hình “Chi tiết đơn mua” 54 5.2.11 Màn hình “Đánh giá sản phẩm” 55 5.2.12 Màn hình “Cửa hàng bạn” 56 5.2.13 Màn hình “Thêm sản phẩm” 57 5.2.14 Màn hình “Danh sách đơn bán” 58 5.2.15 Màn hình “Chi tiết đơn bán” 59 5.2.16 Màn hình “Quản lý tài khoản” 60 5.2.17 Màn hình “Đổi mật khẩu” 61 5.2.18 Màn hình “Chatbot tư vấn” 62 Chương KẾT LUẬN 63 6.1 Ưu điểm 63 6.2 Hạn chế 63 6.3 Hướng phát triển 63 DANH MỤC HÌNH ẢNH Hình 2.1:Cấu trúc file html 14 Hình 2.2: Đoạn mã CSS đơn giản 15 Hình 2.3: Phương thức hoạt động JavaScript 16 Hình 2.4: Ngơn ngữ PHP 17 Hình 2.5: Chương trình PHP 18 Hình 2.6: Mơ hình hoạt động MySQL 19 Hình 2.7: Một ví dụ sử dụng MySQL đồ án 19 Hình 3.1: Mơ hình hệ thống 21 Hình 3.2: Sơ đồ use-case tổng quát 22 Hình 4.1: Sơ đồ logic liệu 34 Hình 5.1: Màn hình Đăng nhập 41 Hình 5.2: Màn hình Đăng ký 42 Hình 5.3: Màn hình Trang chủ (phần trên) 43 Hình 5.4: Màn hình Trang chủ (phần dưới) 45 Hình 5.5: Màn hình Danh sách sản phẩm 46 Hình 5.6: Màn hình Chi tiết sản phẩm (phần trên) 47 Hình 5.7: Màn hình Chi tiết sản phẩm (phần dưới) 48 Hình 5.8: Màn hình Giỏ hàng 49 Hình 5.9: Màn hình Xác nhận đặt hàng (nửa trên) 50 Hình 5.10: Màn hình Xác nhận đặt hàng (nửa dưới) 51 Hình 5.11: Màn hình Yêu thích 52 Hình 5.12: Màn hình Danh sách đơn mua 53 Hình 5.13: Màn hình Chi tiết đơn mua 54 Hình 5.14: Màn hình Đánh giá sản phẩm 55 Hình 5.15: Màn hình Cửa hàng bạn 56 Hình 5.16: Màn hình Thêm sản phẩm 57 Hình 5.17: Màn hình Danh sách đơn bán 58 Hình 5.18: Màn hình Chi tiết đơn bán 59 Hình 5.19: Màn hình Quản lý tài khoản 60 Hình 5.20: Màn hình đổi mật 61 Hình 5.21: Màn hình Chatbot tư vấn 62 5.2.7 Màn hình “Xác nhận đặt hàng” Hình 5.9: Màn hình Xác nhận đặt hàng (nửa trên) 50 Hình 5.10: Màn hình Xác nhận đặt hàng (nửa dưới) Màn hình Xác nhận đặt hàng hiển thị người dùng nhấn vào Thanh tốn bên phía giỏ hàng Nửa hình hiển thị thơng tin sản phẩm mà người dùng đặt, bao gồm: hình ảnh, tên sản phẩm, đơn giá, số lượng, thành tiền, tổng giá trị đơn hàng giảm giá Hệ thống giảm giá website sử dụng đơn vị Xu Khi người dùng đánh giá sản phẩm, họ nhận số Xu để giảm giá cho đơn hàng sau Nửa hình bao gồm thông tin địa nhận hàng tên, số điện thoại, địa cụ thể Khi nhấn vào nút Xác nhận đặt hàng, đơn hàng chuyển đến cho người bán để xác nhận đơn hàng Nếu chọn Quay lại giỏ hàng, người dùng điều hướng trở lại trang Giỏ hàng 51 5.2.8 Màn hình “u thích” Hình 5.11: Màn hình u thích Về cấu trúc, hình giống với Giỏ hàng Với sản phẩm u thích, người dùng bấm vào “Thêm vào giỏ hàng” để thêm vào giỏ, bấm “Xố” để xố khỏi danh sách u thích Người dùng chọn nhiều sản phẩm thao tác thêm vào giỏ hàng xoá hàng loạt qua control bar phía 52 5.2.9 Màn hình “Danh sách đơn mua” Hình 5.12: Màn hình Danh sách đơn mua Màn hình “Danh sách đơn mua” hiển thị danh sách đơn hàng mà người dùng đặt Các thơng tin bao gồm: hình ảnh, tên sản phẩm, số lượng, ngày đặt hàng, tổng tốn tình trạng đơn hàng Trong tình trạng đơn hàng thể trạng thái đơn hàng, gồm có trạng thái:  Đang chờ xác nhận: sau người dùng đặt đơn hàng chờ chủ sản phẩm xác nhận đơn hàng  Đang giao hàng: sau người bán xác nhận đơn hàng chuyển qua trạng thái  Đã giao hàng: người mua xác nhận nhận hàng chuyển qua trạng thái Khi người mua đánh giá sản phẩm  Đã huỷ: người mua huỷ đơn hàng trước người bán xác nhận, trạng thái đơn hàng “Đã huỷ” 53 5.2.10 Màn hình “Chi tiết đơn mua” Hình 5.13: Màn hình Chi tiết đơn mua Màn hình “Chi tiết đơn mua” hiển thị thông tin chi tiết đơn hàng như: mã đơn hàng, ngày đặt hàng, danh sách sản phẩm, thơng tin tốn, tình trạng đơn hàng, địa giao hàng, nút đánh giá sản phẩm, 54 5.2.11 Màn hình “Đánh giá sản phẩm” Hình 5.14: Màn hình Đánh giá sản phẩm Màn hình “Đánh giá sản phẩm” xuất người dùng chọn vào nút “Đánh giá” Màn hình bao gồm biểu cảm thể cảm xúc với số tương ứng, kèm theo nội dung đánh giá người dùng Khi nhấn “Gửi”, đánh giá lưu lại Người dùng khác thấy truy cập sản phẩm 55 5.2.12 Màn hình “Cửa hàng bạn” Hình 5.15: Màn hình Cửa hàng bạn Màn hình bao gồm danh sách sản phẩm mà người dùng rao bán Các thành phần chính:  Danh sách sản phẩm  Bộ lọc tìm kiếm: lọc theo giá, số lượng bán đánh giá  Bộ xếp: xếp theo thứ tự nhất, bán chạy theo giá tăng/giảm dần  Nút “Thêm sản phẩm”: bấm vào điều hướng người dùng đến trang thêm sản phẩm 56 5.2.13 Màn hình “Thêm sản phẩm” Hình 5.16: Màn hình Thêm sản phẩm Màn hình “Thêm sản phẩm” hiển thị người dùng có nhu cầu rao bán sản phẩm Các thành phần bao gồm:  Các thông tin sản phẩm: tên, danh mục, giá, mơ tả,  Vùng thêm hình ảnh sản phẩm 57  Vùng thêm phân loại hàng: cần nhập tên phân loại hàng vào sau nhấn biểu tượng dấu cộng để thêm phân loại hàng  Nút “Hoàn tất” “Huỷ”: nhấn hoàn tất, sản phẩm thêm vào cửa hàng bạn 5.2.14 Màn hình “Danh sách đơn bán” Hình 5.17: Màn hình Danh sách đơn bán Màn hình “Danh sách đơn bán” hiển thị thông tin đơn hàng bán Về bản, hình giống với hình “Danh sách đơn mua” Khi nhấn vào đơn hàng lên chi tiết đơn hàng 58 5.2.15 Màn hình “Chi tiết đơn bán” Hình 5.18: Màn hình Chi tiết đơn bán Màn hình “Chi tiết đơn bán” mở người dùng nhấn vào sản phẩm cửa hàng họ Về thiết kế, hình giống với hình “Chi tiết sản phẩm” Tuy nhiên có số điểm khác:  Có nút “Sửa thông tin sản phẩm”: nhấn vào điều hướng người dùng đến trang sửa thông tin sản phẩm  Có nút “Xố sản phẩm” để người dùng xố sản phẩm Điều kiện để sửa thơng tin xố sản phẩm sản phẩm khơng đặt 59 5.2.16 Màn hình “Quản lý tài khoản” Hình 5.19: Màn hình Quản lý tài khoản Màn hình “Quản lý tài khoản” hiển thị người dùng nhấn vào nút “Tài khoản” Tại trang này, người dùng thay đổi thông tin cá nhân cách nhấn vào biểu tượng bút bên cạnh trường thơng tin Ngồi cịn có hai thao tác thực hiện: Đổi mật Đăng xuất Khi nhấn vào Đổi mật khẩu, giao diện đổi mật Khi nhấn vào Đăng xuất, người dùng điều hướng lại trang Đăng nhập 60 5.2.17 Màn hình “Đổi mật khẩu” Hình 5.20: Màn hình đổi mật Khi người dùng cần đổi mật khẩu, hộp thoại để người dùng nhập thông tin Để đổi mật thành công, thông tin nhập vào phải xác khơng để trống 61 5.2.18 Màn hình “Chatbot tư vấn” Hình 5.21: Màn hình Chatbot tư vấn Đây giao diện chatbot tư vấn tích hợp vào website Đây dịch vụ bên thứ ba giúp dễ dàng tích hợp sửa kịch cho phù hợp với doanh nghiệp 62 Chương KẾT LUẬN 6.1 Ưu điểm  Vì tồn đồ án sử dụng code HTML, CSS JavaScript thuần, hồn tồn khơng dùng thêm thư viện bên nên tốc độ tải trang nhanh  Giao diện tối giản dễ sử dụng Hầu cần nhìn vào biết cách sử dụng  Tông màu chủ đạo màu xanh, tạo cảm giác thoải mái cho người dùng sử dụng lâu dài  Có sử dụng thiết kế bo trịn kết hợp đổ bóng đại  Đáp ứng chức website thương mại điện tử đơn giản  Toàn hệ thống viết theo quy chuẩn ba lớp, dễ dàng bảo trì 6.2 Hạn chế  Vì hướng đến tối giản nên website chưa bắt mắt số trang thương mại điện tử khác  Bởi đồ án nhóm tảng web, thành viên phải học hỏi trình làm nên nhiều thời gian  Hiện website có trải nghiệm tốt thiết bị PC, chưa tương thích giao diện với hình nhỏ  Chưa hỗ trợ tốn online tích hợp tính phí vận chuyển 6.3 Hướng phát triển Trong tương lai, nhóm em mong muốn phát triển tiếp sản phẩm đồ án này:  Cải thiện UI/UX tổng thể  Thêm hệ thống phân chia tài khoản người mua, người bán người vận chuyển  Tích hợp kênh tốn online  Thêm tính như: mã giảm giá, chương trình sale-off, 63 TÀI LIỆU THAM KHẢO [1] HTML – Bách khoa https://vi.wikipedia.org/wiki/HTML toàn thư Wikipedia tiếng Việt - [2] CSS ? – TopDev - https://topdev.vn/blog/css-la-gi/ [3] CSS ? Lịch sử phát triển phiên CSS – Software4win https://software4win.com/css-la-gi/ [4] JavaScript gì? Kiến thức ngơn ngữ lập trình JS – Bizfly Cloud https://bizflycloud.vn/tin-tuc/javascript-la-gi-va-no-hoat-dong-nhu-the-nao20181123142006163.htm#:~:text=JavaScript%20%C4%91%C6%B0%E1%BB%A3c %20b%E1%BA%AFt%20%C4%91%E1%BA%A7u%20v%C3%A0o,nh%C3%BAng %20v%C3%A0o%20Scheme%20Programming%20language [5] PHP gì? Hướng dẫn chi tiết cho người bắt đầu – Arena FPT https://arena.fpt.edu.vn/php-lagi/#:~:text=PHP%20l%C3%A0%20vi%E1%BA%BFt%20t%E1%BA%AFt%20c%E1 %BB%A7a,th%E1%BA%ADp%20d%E1%BB%AF%20li%E1%BB%87u%20tr%C3 %AAn%20Server [6] MySQL gì: giải thích tường tận MySQL cho người bắt đầu – Hostinger https://www.hostinger.vn/huong-dan/mysql-la-gi/ 64 ... tài Mục tiêu: - Xây dựng website thương mại điện tử đáp ứng tiêu chí: o Giao diện thân thiện, dễ sử dụng o Đáp ứng tính cần có website thương mại điện tử o Tích hợp chatbot tư vấn giúp dễ dàng... 38 Bảng 4.12: Chi tiết bảng Evalute 39 LỜI CẢM ƠN Đồ án ? ?Xây dựng website thương mại điện tử với chatbot tư vấn? ?? đồ án nhóm em triển khai mơi trường web Chúng em cố gắng tìm tịi,... TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI CHATBOT TƯ VẤN Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực :