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
Dòng sự kiện chính
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
31 Trạng thái hệ thống sau
khi thực hiện use-case
Đánh giá của người dùng được cập nhật tại thông tin của sản phẩm đó Điểm mở rộng Không có Bảng 3.11: Đặc tả use-case Đánh giá sản phẩm 3.4.11. Use-case “Bán hàng” Tên chức năng Bán hàng Tóm tắt Chức năng bán sản phẩm Dòng sự kiện chính
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ó
32
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
Dòng sự kiện chính
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
33 Dòng sự kiện chính
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ó
34
Chương 4. THIẾT KẾ DỮ LIỆU
4.1.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
35 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
4.2.Mô tả chi tiết bảng dữ liệu
4.2.1. Bảng “Account”
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
4.2.2. Bảng “Address”
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
36
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
4.2.3. 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ã 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
37
4.2.4. 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ã 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
4.2.5. Bảng “Color”
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
4.2.6. Bảng “ProductInCart”
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
4.2.7. 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 IdAccount int Không null Mã tài khoản
38
4.2.8. Bảng “ProductInBill”
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
4.2.9. 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ã đơ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
4.2.10. 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, 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
39
4.2.11. Bảng “Evalute”
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
40
Chương 5. THIẾT KẾ GIAO DIỆN
5.1.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
41 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
5.2.Chi tiết màn hình
5.2.1. Màn hình “Đăng nhập”
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.
42
Nút Đăng nhập. Khi bấm nút có hai trường hợp xảy ra:
o Nếu thông tin để trống hoặc không đúng, hệ thống sẽ báo lỗi đăng nhập không thành công.
o Nếu thông tin chính xác, hệ thống sẽ điều 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.
5.2.2. Màn hình “Đăng ký”
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.
Nút Đăng ký. Khi bấm nút có hai trường hợp xảy ra:
o Nếu thông tin để trống hoặc không đúng, hệ thống sẽ báo lỗi đăng ký 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.
5.2.3. Màn hình “Trang chủ”
Hình 5.3: Màn hình Trang chủ (phần trên)
Thiết kế của nhóm em hướng đến sự tối giản, hài hoà, không bị rối mắt. Với tông màu chủ đạo là màu xanh biển, giúp dịu mắt và tạo cảm giác có năng lượng tích cực.
44 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: đăng xuất khỏi hệ thống và quay về trang Đăng nhập. Tiếp theo là phần Danh mục sản phẩm. Vì website có quản lý sản phẩm theo danh mục nên mục này giúp người dùng dễ dàng tìm kiếm sản phẩm hơn.
45
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.
46
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.
47
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 bao gồm các thông tin cơ bản của sản phẩm như: hình ảnh, tên sản phẩm, lượt đánh giá trung bình, số lượt mua, giá, ...
Người dùng có thể chọn phân loại hàng, số lượng, sau đó bấm vào “Thêm vào giỏ hàng” để thêm vào giỏ. Nếu bấm vào nút “Yêu thích”, sản phẩm sẽ được lưu vào danh sách yêu thích để có thể mua sau. Phía dưới là mô tả chi tiết về sản phẩm.
48
Hình 5.7: Màn hình Chi tiết sản phẩm (phần dưới)
Phía dưới mỗi sản phẩm là những đánh giá về sản phẩm đó của các người dùng đã mua, giúp khách hàng có cái nhìn khách quan hơn về chất lượng sản phẩm.
49
5.2.6. Màn hình “Giỏ hàng”
Hình 5.8: Màn hình Giỏ hàng
Màn hình Giỏ hàng bao gồm danh sách các sản phẩm trong giỏ hàng, bao gồm thông tin chung của sản phẩm, và một checkbox bên cạnh mỗi sản phẩm, mang ý nghĩa chọn sản phẩm đó.
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.
50
5.2.7. Màn hình “Xác nhận đặt hàng”
51
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ị khi người dùng nhấn vào Thanh toán bên phía giỏ hàng. Nửa trên màn hình này sẽ hiển thị thông tin các 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 và giảm giá.
Hệ thống giảm giá trên website sử dụng một đơn vị là Xu. Khi người dùng đánh giá về một sản phẩm, họ sẽ nhận được một số Xu để giảm giá cho các đơn hàng sau.
Nửa dưới màn hình bao gồm các thông tin về địa chỉ nhận hàng như tên, số điện thoại, địa chỉ cụ thể. Khi nhấn vào nút Xác nhận đặt hàng, đơn hàng sẽ được 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 sẽ được điều hướng trở lại trang Giỏ hàng.
52
5.2.8. Màn hình “Yêu thích”
Hình 5.11: Màn hình Yêu thích
Về cấu trúc, màn hình này khá giống với Giỏ hàng. Với mỗi sản phẩm yêu thích, người dùng có thể bấm vào “Thêm vào giỏ hàng” để thêm vào giỏ, hoặc bấm “Xoá” để xoá khỏi danh sách yêu thích. Người dùng cũng có thể chọn nhiều sản phẩm và thao tác thêm vào giỏ hàng hoặc xoá hàng loạt qua thanh control bar phía dưới.
53
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 các đơn hàng mà người dùng đã