GIỚI THIỆU ĐỀ TÀI
Tên đề tài
- Xây dựng website thương mại điện tử với chatbot tư vấn
- Building an E-Commerce website with consulting chatbot.
Lí do chọn đề tài
Với sự bùng nổ của thương mại điện tử, mua sắm trực tuyến đã trở nên phổ biến đối với mọi lứa tuổi Các sàn thương mại điện tử lớn như Shopee, Lazada, Tiki đã phát triển ứng dụng di động để người dùng dễ dàng truy cập Tuy nhiên, website vẫn giữ vai trò quan trọng vì tính tiện lợi của nó, cho phép người dùng truy cập mọi lúc, mọi nơi chỉ cần có trình duyệt và kết nối internet mà không cần cài đặt.
Chúng em mong muốn xây dựng một website thương mại điện tử riêng, tích hợp chatbot tư vấn để người dùng dễ dàng tra cứu thông tin Đây là lý do nhóm em chọn đề tài này.
Mô tả sản phẩm
- Ứng dụng hỗ trợ người dùng mua hàng, bán hàng trực tuyến
- Triển khai trên môi trường web.
Chức năng chính
- Quản lý tài khoản: Đăng nhập, đăng ký, đổi mật khẩu
- Quản lý sản phẩm theo danh mục
- Quản lý thông tin sản phẩm
- Đánh dấu yêu thích để mua sau
- Quản lý đơn hàng đã mua, đã bán
- Hệ thống đánh giá sản phẩm
- Quản lý thông tin cá nhân
Công nghệ sử dụng
- Figma: lên bản thiết kế giao diện
- HTML, CSS, JavaScript: cài đặt front-end
- PHP: cài đặt back-end
- MySQL: cơ sở dữ liệu
- Github: quản lý mã nguồn.
Thông tin nhóm
STT Tên thành viên Mã sinh viên Email
1 Trần Đoàn Phương 19520230 19520230@gm.uit.edu.vn
2 Đỗ Đức Tâm 19520253 19520253@gm.uit.edu.vn
Bảng 1.1: Thông tin thành viên nhóm
CƠ SỞ LÝ THUYẾT
HTML
- HTML là viết tắt của cụm tử Hyper Text Markup Language 5 – ngôn ngữ đánh dấu siêu văn bản
HTML là bộ khung cơ bản của một trang web, được tạo thành từ các thẻ HTML, giúp hiển thị nội dung thô cho người dùng.
HTML công khai đầu tiên, mang tên "HTML Tags", được Tim Berners-Lee, một nhà vật lý, giới thiệu trên Internet vào cuối năm 1991 Tài liệu này mô tả 18 phần tử, phản ánh thiết kế ban đầu đơn giản của HTML Ngoại trừ thẻ siêu liên kết, các phần tử này chịu ảnh hưởng mạnh mẽ từ SGMLguid, một định dạng tài liệu dựa trên Ngôn ngữ Đánh dấu Tổng quát Chuẩn (SGML) tại CERN.
Các phiên bản HTML đã được phát hành lần lượt từ HTML2, HTML3, HTML4 cho đến HTML5 Mỗi phiên bản đều mang đến những cải tiến và tính năng mới, giúp hỗ trợ hiệu quả hơn trong việc xây dựng các trang web tĩnh.
Hình 2.1:Cấu trúc file html cơ bản
CSS
- CSS là viết tắt của cụm từ Cascading Style Sheets
CSS được sử dụng để định dạng phong cách cho các phần tử do HTML tạo ra Nói một cách đơn giản, HTML tạo nên cấu trúc cơ bản, trong khi CSS trang trí và làm cho trang web trở nên hấp dẫn hơn.
CSS được đề xuất lần đầu bởi Hồkon Wium Lie vào ngày 10 tháng 10 năm 1994, khi ông làm việc cùng Tim Berners-Lee tại CERN Trong bối cảnh đó, nhiều ngôn ngữ định kiểu khác cũng được thảo luận, dẫn đến sự ra đời của CSS W3C đầu tiên (CSS1) vào năm 1996 Bert Bos, với vai trò đồng tác giả của CSS1, đã có ảnh hưởng lớn và được công nhận là đồng sáng tạo của CSS.
Qua các năm, CSS đã trải qua nhiều phiên bản phát triển, từ CSS2, CSS2.1, đến CSS3 và hiện tại là CSS4 Mỗi phiên bản được xây dựng dựa trên các mô đun riêng biệt, kế thừa từ các mô đun của CSS3.
- Dưới đây là một đoạn mã CSS đơn giản để thiết lập màu chữ và kích thước chữ cho thẻ
Hình 2.2: Đoạn mã CSS đơn giản
JavaScript
JavaScript là ngôn ngữ lập trình thông dịch, được sử dụng cả ở phía máy khách và máy chủ, giúp tạo ra các trang web với hình động chuyên nghiệp Ngôn ngữ này được hầu hết các trình duyệt web như Chrome, Firefox, Safari, Internet Explorer, Edge, và Opera hỗ trợ, cùng với đa số trình duyệt di động trên smartphone.
JavaScript là ngôn ngữ lập trình chủ yếu được sử dụng trên các website để nâng cao trải nghiệm người dùng Nó cho phép tự động cập nhật trang, cải thiện giao diện người dùng với các tính năng như menu, hộp thoại, animations, đồ họa 2D và 3D, bản đồ tương tác và trình phát video Việc sử dụng JavaScript trong trình duyệt web được gọi là JavaScript phía máy khách.
- Phiên bản đầu tiên của ngôn ngữ này được đặt tên là Mocha vào tháng 5 năm
Vào tháng 9 năm 1995, ngôn ngữ lập trình được đổi tên thành LiveScript và sau đó là JavaScript vào tháng 12 cùng năm Năm 1996, JavaScript được gửi đến ECMA International để hoàn thiện thành một tiêu chuẩn kỹ thuật Đến tháng 6 năm 1997, phiên bản tiêu chuẩn đầu tiên của ngôn ngữ, ECMA-262, đã được phát hành Phiên bản mới nhất, ECMAScript 2017, được phát hành vào tháng 6 năm 2017.
- Cách hoạt động của JavaScript:
Hình 2.3: Phương thức hoạt động của JavaScript
When a web browser loads a web page, the HTML parser begins parsing the HTML code and constructing the Document Object Model (DOM) Whenever the parser encounters a CSS or JavaScript directive, whether inline or externally loaded, it delegates the processing to the CSS parser or JavaScript engine as needed.
JavaScript engine tải các tệp JavaScript bên ngoài và mã inline, nhưng không thực thi ngay lập tức mà chờ đến khi phân tích HTML và CSS hoàn tất Sau đó, JavaScript được thực hiện theo thứ tự xuất hiện trên trang, bao gồm việc xác định biến và hàm, thực thi các lời gọi hàm và kích hoạt trình xử lý sự kiện Những hoạt động này giúp cập nhật DOM bởi JavaScript, và kết quả sẽ được hiển thị ngay lập tức bởi trình duyệt.
- Trong đồ án, nhóm em đã sử dụng JavaScript để xử lý các sự kiện onclick cũng như ẩn/hiện các modal.
PHP
- PHP là viết tắt đệ quy của PHP: Hypertext Preprocessor, một loại ngôn ngữ đặc biệt dùng để phát triển website (bao gồm Static Website và Dynamic Website)
- PHP hỗ trợ rất nhiều trong việc thay đổi, quản lý, thu thập dữ liệu bên phía server
Hình 2.5: Chương trình PHP cơ bản
- Một số ưu điểm của PHP:
PHP có mã nguồn mở và hoàn toàn miễn phí cho mọi người dùng
PHP là một ngôn ngữ lập trình dễ học và không phức tạp như JSP hay ASP, vì vậy rất phù hợp cho cả người mới bắt đầu và những người không chuyên.
PHP hỗ trợ nhiều hệ thống cơ sở dữ liệu đa dạng như MySQL, PostgreSQL, Berkeley DB, Oracle, Microsoft SQL Server và SQLite, mang lại sự linh hoạt cho các nhà phát triển và quản trị viên hệ thống.
PHP là nền tảng chéo giúp bạn có thể triển khai ứng dụng của mình trên một số hệ điều hành khác nhau như Windows, Linux, Mac OS,…
PHP có hệ thống bảo mật an toàn nhờ trang bị lệnh thoát đặc biệt
PHP sở hữu một cộng đồng người dùng rộng lớn, điều này giúp người mới dễ dàng tiếp cận và học hỏi kinh nghiệm từ những người đi trước, từ đó áp dụng hiệu quả vào thực tiễn.
- Nhóm em sử dụng PHP là ngôn ngữ chính để cài đặt bên phía back-end cho website của mình.
MySQL
MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến, được sử dụng rộng rãi bởi nhiều ứng dụng web lớn như Facebook, Twitter, YouTube, Google và Yahoo.
- Phần mềm MySQL hoàn toàn miễn phí và được phát triển, phân phối và hỗ trợ bởi Oracle Corporation
MySQL Server là một hệ thống máy tính được cài đặt phần mềm MySQL, cho phép lưu trữ và quản lý dữ liệu Người dùng có thể truy cập dữ liệu thông qua các máy khách, với dữ liệu được tổ chức trong các bảng có mối quan hệ chặt chẽ với nhau.
Hình 2.6: Mô hình hoạt động của MySQL
- Cách thức hoạt động của MySQL:
MySQL tạo ra các bảng lưu trữ dữ liệu, cũng như định nghĩa quan hệ giữa các bảng
Client gửi yêu cầu SQL bằng câu lệnh
Server sẽ phản hồi thông tin và trả về kết quả cho Client
Hình 2.7: Một ví dụ sử dụng MySQL trong đồ án
Tính linh hoạt và dễ sử dụng
An toàn nhờ hệ thống phân quyền truy cập và quản lý tài khoản
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Mô hình hệ thống
Hình 3.1: Mô hình hệ thống
Trang web của nhóm em được xây dựng dựa trên mô hình ba lớp, gồm có ba thành phần chính:
Lớp Giao Diện Người Dùng (GUI) đóng vai trò quan trọng trong việc tương tác với người dùng, bao gồm các thành phần như win form và web form Lớp này thực hiện các chức năng như nhập liệu, hiển thị dữ liệu và kiểm tra tính chính xác của dữ liệu trước khi chuyển giao cho lớp Xử Lý Logic Kinh Doanh (BLL).
- Business Logic Layer (BLL): Lớp này có 2 nhiệm vụ chính:
Đây là nơi thực hiện các thao tác dữ liệu cho lớp giao diện người dùng (GUI), xử lý nguồn dữ liệu từ lớp trình bày (Presentation Layer) trước khi chuyển tiếp xuống lớp truy cập dữ liệu (Data Access Layer) và lưu trữ trong hệ quản trị cơ sở dữ liệu (CSDL).
Nơi đây thực hiện kiểm tra các ràng buộc, tính toàn vẹn và hợp lệ của dữ liệu, đồng thời thực hiện tính toán và xử lý các yêu cầu nghiệp vụ trước khi gửi kết quả về lớp trình bày.
- Data Access Layer (DAL): Lớp này có chức năng giao tiếp với hệ quản trị
CSDL như thực hiện các công việc liên quan đến lưu trữ và truy vấn dữ liệu
( tìm kiếm, thêm, xóa, sửa,…).
Sơ đồ Use-case
Hình 3.2: Sơ đồ use-case tổng quát
Danh sách các use-case
STT Tên use-case Ý nghĩa / Ghi chú
1 Đăng nhập Đăng nhập vào hệ thống
2 Đăng ký Đăng ký tài khoản mới
3 Đăng xuất Đăng xuất khỏi hệ thống
4 Quản lý thông tin cá nhân Xem / chỉnh sửa thông tin cá nhân
5 Chỉnh sửa thông tin cá nhân Sửa các thông tin như họ tên, email, số điện thoại, giới tính,
6 Đổi mật khẩu Đổi mật khẩu
7 Tìm kiếm sản phẩm Tìm sản phẩm theo tên
8 Mua hàng Mua sản phẩm
9 Tra cứu đơn hàng Tra cứu đơn hàng đã mua
10 Đánh giá sản phẩm Đánh giá sản phẩm đã mua
11 Bán hàng Đăng bán sản phẩm mới
12 Tra cứu đơn bán Tra cứu đơn hàng đã bán
13 Quản lý thông tin sản phẩm Sửa thông tin, xoá sản phẩm
Bảng 3.1: Danh sách các use-case chính
Đặc tả use-case
Tên chức năng Đăng nhập
Tóm tắt Chức năng đăng nhập vào hệ thống
Dòng sự kiện chính 1 Hệ thống hiển thị form đăng nhập
2 Người dùng nhập tài khoản và mật khẩu (cả 2 trường này đều bắt buộc nhập) và nhấn “Đăng nhập”
3 Hệ thống kiểm tra thông tin đăng nhập
Thông tin đăng nhập sai:
Hệ thống hiển thị thông báo tài khoản đăng nhập không hợp lệ
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: không có
Trạng thái hệ thống sau khi thực hiện use-case
Sau khi người dùng đăng nhập thành công vào hệ thống, họ sẽ được chuyển đến trang chủ, nơi có thể sử dụng các quyền mà hệ thống đã cấp.
Bảng 3.2: Đặc tả use-case Đăng nhập
Tên chức năng Đăng ký
Tóm tắt Chức năng đăng ký tài khoản
1 Hệ thống hiển thị form đăng ký
2 Người dùng nhập các thông tin tài khoản, mật khẩu, họ tên, email, số điện thoại, giới tính (các trường này đều bắt buộc nhập) và nhấn “Đăng ký”
3 Hệ thống thực hiện việc tạo tài khoản Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: không có
Trạng thái hệ thống sau khi thực hiện use-case
Người dùng sau khi đăng ký thành công sẽ được tự động đăng nhập vào hệ thống và được điều hướng đến trang chủ, nơi họ có thể sử dụng các quyền mà hệ thống cung cấp.
Bảng 3.3: Đặc tả use-case Đăng ký
Tên chức năng Đăng xuất
Tóm tắt Chức năng đăng xuất tài khoản
1 Người dùng bấm vào mục “Tài khoản” và chọn
“Đăng xuất”, hoặc chọn “Đăng xuất” khi trỏ chuột vào biểu tượng User bên góc phải màn hình
2 Hệ thống thực hiện việc đăng xuất tài khoản hiện tại
3 Điều hướng người dùng đến trang đăng nhập Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: đã đăng nhập tài khoản
Trạng thái hệ thống sau khi thực hiện use-case
Người dùng đăng xuất khỏi hệ thống và được điều hướng đến trang đăng nhập Điểm mở rộng Không có
Bảng 3.4: Đặc tả use-case Đăng xuất
3.4.4 Use-case “Quản lý thông tin cá nhân”
Tên chức năng Quản lý thông tin cá nhân
Tóm tắt Chức năng quản lý thông tin cá nhân
1 Người dùng bấm vào mục “Tài khoản” khi trỏ chuột vào biểu tượng User bên góc phải màn hình
2 Hệ thống điều hướng người dùng đến trang hồ sơ thông tin cá nhân
3 Tại đây có ba thao tác có thể thực hiện (tách thành ba use case): sửa thông tin cá nhân, đổi mật khẩu và đăng xuất
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: đã đăng nhập tài khoản
Trạng thái hệ thống sau khi thực hiện use-case
Người dùng có thể xem thông tin cá nhân của mình và thực hiện các thao tác chỉnh sửa Điểm mở rộng Không có
Bảng 3.5: Đặc tả use-case Quản lý thông tin cá nhân
3.4.5 Use-case “Chỉnh sửa thông tin cá nhân”
Tên chức năng Chỉnh sửa thông tin cá nhân
Tóm tắt Chức năng chỉnh sửa thông tin cá nhân
1 Tại trang hồ sơ thông tin cá nhân, người dùng bấm vào biểu tượng chỉnh sửa bên cạnh thông tin muốn chỉnh sửa
2 Hệ thống hiển thị form để nhập thông tin mới (không được để trống)
3 Người dùng nhập và bấm “Lưu lại” để cập nhật thông tin
4 Hệ thống cập nhật thông tin mới của người dùng Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: đã đăng nhập tài khoản
Trạng thái hệ thống sau khi thực hiện use-case Thông tin mới được cập nhật trong hồ sơ Điểm mở rộng Không có
Bảng 3.6: Đặc tả use-case Chỉnh sửa thông tin cá nhân
3.4.6 Use-case “Đổi mật khẩu”
Tên chức năng Đổi mật khẩu
Tóm tắt Chức năng đổi mật khẩu
1 Tại trang hồ sơ thông tin cá nhân, người dùng bấm vào “Đổi mật khẩu”
2 Hệ thống hiển thị form để nhập thông tin mật khẩu mới (không được để trống)
3 Người dùng nhập và bấm “Lưu lại” để cập nhật thông tin
4 Hệ thống kiểm tra và cập nhật mật khẩu mới của người dùng
Mật khẩu cũ không đúng, hoặc mật khẩu mới không khớp:
Hệ thống thông báo đổi mật khẩu không thành công
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: đã đăng nhập tài khoản
Trạng thái hệ thống sau khi thực hiện use-case Mật khẩu mới được cập nhật trên hệ thống Điểm mở rộng Không có
Bảng 3.7: Đặc tả use-case Đổi mật khẩu
3.4.7 Use-case “Tìm kiếm sản phẩm”
Tên chức năng Tìm kiếm sản phẩm
Tóm tắt Tìm kiếm sản phẩm theo tên
1 Người dùng nhập tên sản phẩm trên thanh tìm kiếm và nhấn vào biểu tượng tìm kiếm
2 Hệ thống tìm kiếm và hiển thị những sản phẩm có tên giống với từ khoá
3 Người dùng có thể lọc, sắp xếp sản phẩm
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: không có
Trạng thái hệ thống sau khi thực hiện use-case
Người dùng được điều hướng đến trang hiển thị danh sách sản phẩm phù hợp Điểm mở rộng Không có
Bảng 3.8: Đặc tả use-case Tìm kiếm sản phẩm
Tên chức năng Mua hàng
Tóm tắt Chức năng mua hàng
1 Người dùng bấm vào sản phẩm mình muốn mua
2 Người dùng chọn số lượng, phân loại hàng phù hợp
3 Người dùng bấm “Thêm vào giỏ hàng”
4 Sau khi chọn xong các sản phẩm, người dùng nhấn vào biểu tượng “Giỏ hàng” ở góc phải
5 Người dùng chọn các sản phẩm muốn mua và nhấn
6 Người dùng kiểm tra lại thông tin đơn hàng, nhập địa chỉ nhận hàng và nhấn “Đặt hàng”
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: không có
Sau khi thực hiện use-case "Đơn hàng được thêm vào hệ thống", người dùng sẽ được điều hướng trở về trang chủ Hệ thống không có điểm mở rộng nào.
Bảng 3.9: Đặc tả use-case Mua hàng
3.4.9 Use-case “Tra cứu đơn hàng”
Tên chức năng Tra cứu đơn hàng
Tóm tắt Chức năng tra cứu đơn hàng
1 Người dùng bấm vào “Đơn mua”
2 Hệ thống điều hướng đến trang danh sách đơn hàng
3 Người dùng chọn đơn hàng cần tra cứu
4 Hệ thống hiển thị thông tin đơn hàng: thời gian đặt hàng, danh sách sản phẩm, tổng tiền, giảm giá, tình trạng đơn hàng,
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: đã đặt đơn hàng
Trạng thái hệ thống sau khi thực hiện use-case
Người dùng được điều hướng đến trang thông tin đơn hàng để tra cứu Điểm mở rộng Không có
Bảng 3.10: Đặc tả use-case Tra cứu đơn hàng
3.4.10 Use-case “Đánh giá sản phẩm”
Tên chức năng Đánh giá sản phẩm
Tóm tắt Chức năng đánh giá sản phẩm
1 Người dùng chọn đơn hàng đã mua có sản phẩm cần đánh giá
2 Người dùng bấm vào “Đánh giá”
3 Hệ thống hiển thị form để người dùng đánh giá, bao gồm: thanh rating 1-5 sao thể hiện mức độ hài lòng, nội dung mô tả đánh giá
4 Người dùng nhập form và nhấn “Gửi” để hoàn thành
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: đã nhận được đơn hàng
Sau khi thực hiện use-case Đánh giá của người dùng, trạng thái hệ thống sẽ được cập nhật với thông tin liên quan đến sản phẩm Hiện tại, không có điểm mở rộng nào được ghi nhận.
Bảng 3.11: Đặc tả use-case Đánh giá sản phẩm
Tên chức năng Bán hàng
Tóm tắt Chức năng bán sản phẩm
1 Người dùng chọn “Cửa hàng của tôi”
2 Hệ thống điều hướng người dùng đến trang danh sách sản phẩm người dùng đã rao bán
3 Người dùng bấm vào “Thêm sản phẩm”
4 Hệ thống hiển thị form để người dùng nhập thông tin sản phẩm: tên sản phẩm, phân loại hàng, mô tả, hình ảnh,
5 Người dùng nhập thông tin và nhấn “Hoàn tất”
6 Sản phẩm được thêm vào hệ thống Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: đã đăng nhập tài khoản
Trạng thái hệ thống sau khi thực hiện use-case
Sản phẩm được thêm thành công vào hệ thống, người dùng được điều hướng trở về trang “Cửa hàng của bạn” Điểm mở rộng Không có
Bảng 3.12: Đặc tả use-case “Bán hàng”
3.4.12 Use-case “Tra cứu đơn bán”
Tên chức năng Tra cứu đơn bán
Tóm tắt Chức năng tra cứu đơn hàng đã bán
1 Người dùng bấm vào “Đơn bán”
2 Hệ thống điều hướng đến trang danh sách đơn hàng đã bán
3 Người dùng chọn đơn hàng cần tra cứu
4 Hệ thống hiển thị thông tin đơn hàng: thời gian đặt hàng, danh sách sản phẩm, tổng tiền, giảm giá, tình trạng đơn hàng,
5 Người dùng có thể xác nhận đơn hàng hoặc từ chối đơn hàng
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: đã có người dùng khác đặt sản phẩm của bạn
Trạng thái hệ thống sau khi thực hiện use-case
Người dùng được điều hướng đến trang thông tin đơn bán để tra cứu Điểm mở rộng Không có
Bảng 3.13: Đặc tả use-case Tra cứu đơn bán
3.4.13 Use-case “Quản lý thông tin sản phẩm”
Tên chức năng Quản lý thông tin sản phẩm
Tóm tắt Chức năng quản lý thông tin sản phẩm: sửa thông tin, xoá sản phẩm
1 Người dùng bấm “Cửa hàng của tôi” và chọn sản phẩm cần quản lý
2 Hệ thống điều hướng đến trang chi tiết sản phẩm
3 Người dùng có thể bấm vào “Sửa thông tin sản phẩm” để điều chỉnh thông tin
4 Người dùng có thể bấm vào “Xoá sản phẩm” để xoá sản phẩm khỏi cửa hàng
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện:
1 Người dùng đã rao bán sản phẩm
2 Để xoá sản phẩm, các đơn hàng chưa được xác nhận có bao gồm sản phẩm bị xoá sẽ bị từ chối hết
Trạng thái hệ thống sau khi thực hiện use-case
1 Nếu người dùng sửa thông tin sản phẩm, thông tin mới sẽ được cập nhật lên hệ thống
2 Nếu người dùng xoá sản phẩm, sản phẩm sẽ bị xoá khỏi hệ thống Điểm mở rộng Không có
Bảng 3.14: Đặc tả use-case “Quản lý thông tin sản phẩm”
THIẾT KẾ DỮ LIỆU
Sơ đồ logic
Hình 4.1: Sơ đồ logic dữ liệu
STT Tên bảng dữ liệu Diễn giải
1 Account Thông tin tài khoản người dùng
2 Address Lưu thông tin giao hàng
3 Product Thông tin chi tiết sản phẩm
4 ImageProduct Lưu hình ảnh sản phẩm
5 Color Lưu phân loại màu sản phẩm
6 ProductInCart Lưu thông tin sản phẩm trong giỏ hàng
7 ProductInFavorite Lưu thông tin sản phẩm trong mục yêu thích
8 ProductInBill Lưu thông tin sản phẩm trong đơn hàng
9 Bill Lưu thông tin cơ bản của đơn hàng
10 DetailBill Lưu thông tin chi tiết của đơn hàng
11 Evalute Lưu thông tin đánh giá của sản phẩm
Bảng 4.1: Mô tả các bảng dữ liệu
Mô tả chi tiết bảng dữ liệu
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 id int Khóa chính, Not null,
Tăng tự động Mã tài khoản
2 userName string Không null Tên đăng nhập
3 password string Không null Mật khẩu
4 fullName string Không null Họ và tên
5 email string Không null Email
6 phoneNumber int Không null Số điện thoại
7 imageURL string Không null Hình ảnh
8 sex string Không null Giới tính
Bảng 4.2: Chi tiết bảng Account
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 idAccount int Không null Mã tài khoản
2 fullName string Không null Họ và tên
3 phoneNumber int Không null Số điện thoại
4 Level1 string Không null Tỉnh/Thành phố
5 Level2 string Không null Quận/Huyện
6 Level3 String Không null Phường/Xã
7 Detail string Không null Thôn, đường, số nhà, …
Bảng 4.3: Chi tiết bảng Address
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 Id int Không null, mã chính, tăng tự động Mã sản phẩm
2 nameProduct string Không null Tên sản phẩm
3 idAccount int Không null Mã tài khoản
4 Price int Không null Giá
5 countSold Int Không null Số sản phẩm đã bán
6 countAvailabirity Int Không null Số sản phẩm khả dụng
7 countStar Double Không null Số sao
8 Decribe String Không null Chi tiết sản phẩm
9 type String Không null Loại sản phẩm
Bảng 4.4: Chi tiết bảng Product
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 Id int Không null, mã chính, tăng tự động Mã hình ảnh
2 idProduct int Không null Mã tài khoản
3 imageURL string Không null Đường dẫn
Bảng 4.5: Chi tiết bảng ImageProduct
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 Id int Không null, mã chính, tăng tự động
Mã phân loại sản phẩm
2 idProduct int Không null Mã tài khoản
3 nameColor string Không null Tên phân loại
Bảng 4.6: Chi tiết bảng Color
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 IdAccount int Không null Mã tài khoản
2 idProduct int Không null Mã tài khoản
3 count int Không null Số lượng
4 color String Không null Tên phân loại
Bảng 4.7: Chi tiết bảng ProductInCart
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 IdProduct int Không null Mã Sản phẩm
2 IdAccount int Không null Mã tài khoản
Bảng 4.8: Chi tiết bảng ProductInFavorite
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 IdProduct int Không null Mã sản phẩm
2 idBill int Không null Mã đơn hàng
3 count int Không null Số lượng
4 idEvalute int Không null Mã giá
Bảng 4.9: Chi tiết bảng ProductInBill
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 id int Không null, mã chính, tăng tự động Mã đơn hàng
2 IdAccount int Không null Mã tài khoản
3 time String Không null Thời gian
4 code String Không null Mã
5 idDetailBill int Không null Mã chi tiết đơn hàng
Bảng 4.10: Chi tiết bảng Bill
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 id int Không null, mã chính, tăng tự động
Mã chi tiết đơn hàng
2 TotalPrice int Không null Tổng tiền
3 state String Không null Trạng thái đơn hàng
4 discount int Không null Số tiền giảm giá
5 idBill int Không null Mã đơn hàng
Bảng 4.11: Chi tiết bảng DetailBill
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 Id int Không null, tăng tự động, mã chính Mã đánh giá
2 idAccount int Không null Mã tài khoản
3 star double Không null Số sao
4 idProduct int Không null Mã sản phẩm
Bảng 4.12: Chi tiết bảng Evalute
THIẾT KẾ GIAO DIỆN
Danh sách màn hình
STT Tên màn hình Ý nghĩa / Ghi chú
1 Đăng nhập Đăng nhập vào hệ thống
2 Đăng ký Đăng ký tài khoản mới
3 Trang chủ Trang chủ của hệ thống, chứa các danh mục sản phẩm, sản phẩm đang hot, gợi ý sản phẩm
4 Danh sách sản phẩm Hiển thị danh sách sản phẩm theo danh mục hoặc theo từ khoá tìm kiếm
5 Chi tiết sản phẩm Hiển thị thông tin chi tiết của sản phẩm
6 Giỏ hàng Hiển thị các sản phẩm đã thêm vào giỏ hàng
7 Xác nhận đặt hàng Xác nhận các thông tin để đặt hàng
8 Yêu thích Hiển thị các sản phẩm đã thêm vào danh sách yêu thích
9 Danh sách đơn mua Hiển thị danh sách các đơn hàng đã mua
10 Chi tiết đơn mua Hiển thị chi tiết đơn hàng đã mua
11 Đánh giá sản phẩm Màn hình dùng để đánh giá sản phẩm
12 Cửa hàng của bạn Hiển thị danh sách sản phẩm đã rao bán
13 Thêm sản phẩm Màn hình dùng để thêm sản phẩm
14 Danh sách đơn bán Hiển thị danh sách đơn hàng đã bán
15 Chi tiết đơn bán Hiển thị chi tiết thông tin đơn bán
16 Quản lý tài khoản Hiển thị thông tin cá nhân tài khoản
17 Đổi mật khẩu Màn hình dùng để đổi mật khẩu
18 Chatbot tư vấn Màn hình chatbot tư vấn
Chi tiết màn hình
Hình 5.1: Màn hình Đăng nhập
Màn hình dùng để đăng nhập vào hệ thống, với các thành phần cơ bản của một trang đăng nhập thường thấy:
Ô text để nhập Tên đăng nhập
Ô password để nhập Mật khẩu
Khi nhấn nút Đăng nhập, hệ thống sẽ xử lý theo hai trường hợp: nếu thông tin được nhập để trống hoặc không chính xác, người dùng sẽ nhận được thông báo lỗi đăng nhập không thành công Ngược lại, nếu thông tin đúng, hệ thống sẽ chuyển hướng đến Trang chủ.
Nút Đăng ký ngay: hệ thống sẽ điều hướng đến trang Đăng ký khi người dùng bấm vào nút này
Hình 5.2: Màn hình Đăng ký
Màn hình dùng để đăng ký tài khoản mới, với các thành phần cơ bản của một trang đăng ký thường thấy:
Các ô text để nhập thông tin: họ và tên, địa chỉ email, số điện thoại, tên đăng nhập
Radio button để chọn giới tính
Các ô password để nhập Mật khẩu và nhập lại để xác nhận
Checkbox yêu cầu người dùng cam kết đã đọc và đồng ý với điều khoản
Khi nhấn nút Đăng ký, có hai trường hợp có thể xảy ra: nếu thông tin được nhập không đầy đủ hoặc không chính xác, hệ thống sẽ thông báo lỗi và quá trình đăng ký sẽ không thành công.
43 o Nếu thông tin đầy đủ và mật khẩu khớp, hệ thống sẽ tự động đăng nhập và điều hướng đến Trang chủ
Nút Đăng nhập ngay: hệ thống sẽ điều hướng đến trang Đăng nhập khi người dùng bấm vào nút này
Hình 5.3: Màn hình Trang chủ (phần trên)
Nhóm em tập trung vào thiết kế tối giản và hài hòa, tránh gây rối mắt cho người nhìn Màu xanh biển là tông màu chủ đạo, mang lại sự dịu dàng và tạo cảm giác tích cực, tràn đầy năng lượng.
Ngoài ra nhóm em còn sử dụng một số icon có animation chuyển động để website sinh động hơn
Phía trên cùng là phần header của website, bao gồm các thành phần:
Logo của shop: khi nhấn vào sẽ điều hướng đến Trang chủ nếu đang ở trang khác
Thanh tìm kiếm: để người dùng nhập từ khoá tìm kiếm, và bấm vào biểu tượng kính lúp để tìm
Nút giỏ hàng: đi đến giỏ hàng
Nút yêu thích: đi đến danh sách sản phẩm yêu thích
Mục cá nhân bao gồm 5 phần nhỏ:
Tài khoản: đi đến trang quản lý thông tin cá nhân
Cửa hàng của bạn: đi đến danh sách sản phẩm bạn đã rao bán
Đơn mua: đi đến trang quản lý đơn hàng đã mua
Đơn bán: đi đến trang quản lý đơn hàng đã bán
Đăng xuất khỏi hệ thống sẽ đưa bạn trở về trang Đăng nhập Tiếp theo, phần Danh mục sản phẩm cho phép người dùng dễ dàng tìm kiếm các sản phẩm, nhờ vào việc quản lý sản phẩm theo danh mục trên website.
Sản phẩm đang hot là phần chứa những sản phẩm được mua nhiều nhất
Hình 5.4: Màn hình Trang chủ (phần dưới)
Phần dưới của Trang chủ chứa footer của website, bao gồm một số tiện ích và thông tin liên hệ, mạng xã hội
5.2.4 Màn hình “Danh sách sản phẩm”
Hình 5.5: Màn hình Danh sách sản phẩm
Màn hình Danh sách sản phẩm được mở khi người dùng tìm kiếm một từ khoá hoặc chọn một danh mục trong Danh mục sản phẩm
Màn hình này bao gồm 4 phần chính:
Danh sách các sản phẩm: nhấn vào một sản phẩm để xem chi tiết
Bộ lọc tìm kiếm theo giá, số lượng đã bán hoặc lượt đánh giá
Bộ sắp xếp theo thời gian đăng bán, bán chạy nhất hoặc giá tăng/giảm dần
Hệ thống phân trang giúp dễ dàng theo dõi
5.2.5 Màn hình “Chi tiết sản phẩm”
Hình 5.6: Màn hình Chi tiết sản phẩm (phần trên)
Phần trên của màn hình hiển thị các thông tin quan trọng về sản phẩm, bao gồm hình ảnh, tên sản phẩm, đánh giá trung bình, số lượt mua và giá cả.
Người dùng có thể phân loại hàng và chọn số lượng trước khi nhấn “Thêm vào giỏ hàng” để thêm sản phẩm Nếu nhấn nút “Yêu thích”, sản phẩm sẽ được lưu vào danh sách yêu thích để mua sau Dưới đây là mô tả chi tiết về sản phẩm.
Hình 5.7: Màn hình Chi tiết sản phẩm (phần dưới)
Dưới mỗi sản phẩm, người dùng có thể tìm thấy các đánh giá từ những khách hàng đã mua, giúp họ có cái nhìn khách quan hơn về chất lượng sản phẩm.
Hình 5.8: Màn hình Giỏ hàng
Màn hình Giỏ hàng hiển thị danh sách sản phẩm đã chọn, kèm theo thông tin chi tiết về từng sản phẩm Mỗi sản phẩm đều có một checkbox bên cạnh, cho phép người dùng dễ dàng lựa chọn sản phẩm mà họ muốn.
Dưới cùng của trang có một thanh control chứa các tuỳ chọn:
Nút tick để chọn tất cả sản phẩm
Tổng số tiền thanh toán của các sản phẩm đã chọn
Nút Thanh toán: nhấn vào sẽ đến trang Xác nhận đặt hàng
Nút Xoá: nhấn vào sẽ xoá toàn bộ sản phẩm đã chọn khỏi giỏ hàng
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)
Hình 5.10: Màn hình Xác nhận đặt hàng (nửa dưới)
Khi người dùng nhấn vào nút Thanh toán trong giỏ hàng, màn hình Xác nhận đặt hàng sẽ hiển thị Phần trên của màn hình này cung cấp thông tin chi tiết về các sản phẩm đã đặ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 và các chương trình giảm giá.
Website áp dụng hệ thống giảm giá thông qua đơn vị Xu Người dùng sẽ nhận được Xu khi đánh giá sản phẩm, giúp họ có cơ hội giảm giá cho các đơn hàng tiếp theo.
Nửa dưới màn hình hiển thị thông tin địa chỉ nhận hàng, bao gồm tên, số điện thoại và địa chỉ cụ thể Khi người dùng nhấn nút Xác nhận đặt hàng, đơn hàng sẽ được gửi đến người bán để xác nhận Nếu chọn Quay lại giỏ hàng, người dùng sẽ được chuyển hướng trở lại trang Giỏ hàng.
Hình 5.11: Màn hình Yêu thích
Màn hình yêu thích có cấu trúc tương tự như Giỏ hàng, cho phép người dùng dễ dàng quản lý sản phẩm Người dùng có thể nhấn “Thêm vào giỏ hàng” để thêm sản phẩm yêu thích hoặc chọn “Xoá” để loại bỏ chúng khỏi danh sách Ngoài ra, chức năng chọn nhiều sản phẩm và thao tác thêm hoặc xoá hàng loạt qua thanh control bar phía dưới cũng được hỗ trợ, giúp tiết kiệm thời gian cho người dùng.
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" cung cấp thông tin chi tiết về các đơn hàng đã đặt của người dùng, bao gồm hình ảnh sản phẩm, tên sản phẩm, số lượng, ngày đặt hàng, tổng thanh toán và tình trạng đơn hàng Tình trạng đơn hàng phản ánh trạng thái hiện tại của đơn hàng, với nhiều trạng thái khác nhau.
Đang chờ xác nhận: sau khi người dùng đã đặt đơn hàng và đang chờ chủ sản phẩm xác nhận đơn hàng
Đang giao hàng: sau khi người bán xác nhận đơn hàng sẽ chuyển qua trạng thái này
Đã giao hàng: khi người mua xác nhận đã nhận được hàng sẽ chuyển qua trạng thái này Khi này người mua có thể đánh giá sản phẩm
Đã huỷ: khi người mua huỷ đơn hàng trước khi người bán xác nhận, trạng thái đơn hàng sẽ là “Đã huỷ”
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" cung cấp thông tin quan trọng về đơn hàng, bao gồm mã đơn hàng, ngày đặt, danh sách sản phẩm, thông tin thanh toán, tình trạng đơn hàng và địa chỉ giao hàng, cùng với nút đánh giá sản phẩm.
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
Khi người dùng nhấn nút “Đánh giá”, màn hình “Đánh giá sản phẩm” sẽ hiển thị, bao gồm các biểu cảm thể hiện cảm xúc tương ứng với từng số sao và nội dung đánh giá của người dùng Sau khi nhấn “Gửi”, đánh giá sẽ được lưu lại và có thể được xem bởi những người dùng khác khi truy cập vào sản phẩm đó.
5.2.12 Màn hình “Cửa hàng của bạn”
Hình 5.15: Màn hình Cửa hàng của bạn
Màn hình này bao gồm danh sách các sản phẩm mà người dùng đã rao bán Các thành phần chính:
Danh sách các sản phẩm
Bộ lọc tìm kiếm: lọc theo giá, số lượng đã bán hoặc các đánh giá
Bộ sắp xếp: sắp xếp theo thứ tự mới nhất, bán chạy nhất hoặc theo giá tăng/giảm dần
Nút “Thêm sản phẩm”: khi bấm vào sẽ điều hướng người dùng đến trang thêm sản phẩm
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” được hiển thị khi người dùng có nhu cầu rao bán một sản phẩm mới Các thành phần bao gồm:
Các thông tin cơ bản của sản phẩm: tên, danh mục, giá, mô tả,
Vùng thêm hình ảnh sản phẩm
Vùng thêm phân loại hàng: chỉ 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” và “Huỷ”: khi nhấn hoàn tất, sản phẩm sẽ được thêm vào cửa hàng của 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
