6. Điểm: (Bằng chữ: )
4.5.2. Đặc tả chi tiết giao diện từng màn hình
4.5.2.1. Màn hình trang chủ
Chương 4: Kiến trúc hệ thống 50
Hình 4. 26: Giao diện màn hình trang chủ_2
Chương 4: Kiến trúc hệ thống 51
Bảng 4. 4: Đặc tả chi tiết giao diện màn hình trang chủ
STT Tên Bắt buộc Định dạng Chú thích
1 Banner Có Hình ảnh Hiển thị banner quảng cáo, các slide có nội dung khuyến mãi, ..
2 Service Có Văn bản Các dịch vụ hỗ trợ khách hàng.
3 Latest
product Có Văn bản Hiển thị các sản phẩm mới nhất từ cửa hàng.
4 Thanh di
chuyển Có Thanh cuộn
Khi nhấp icon qua lại, hiển thị qua lại các sản phẩm đang ẩn trong danh sách.
5 Icon wishlist Có Nút
Khi nhấp, sản phẩm được thêm vào danh sách sản phẩm yêu thích (đăng nhập để thêm được). Sản phẩm đã thêm vào danh sách sản phẩm yêu thích thì icon sẽ có màu đỏ. Ngược lại nếu nhấp màu đỏ sang màu mặc định thì là xóa sản phẩm đó trong danh sách sản phẩm yêu thích (tương đương sản phẩm đó chưa có trong danh sách sản phẩm yêu thích).
6 Ảnh sản
phẩm Có Hình ảnh
Khi nhấp, chuyển sang màn hình Chi tiết sản phẩm (SCC04) của sản phẩm.
7 Tên sản phẩm Có Văn bản
Khi nhấp, chuyển sang màn hình Chi tiết sản phẩm (SCC04) của sản phẩm.
8 Sao đánh giá Có Icon Hiển thị số sao đánh giá trung bình từ người dùng.
9 Giá sản phẩm Có Văn bản Hiển thị giá của sản phẩm.
10 Add to cart Có Nút
Khi nhấp, thêm sản phẩm vào giỏ hàng, sản phẩm hiển thị trên phần Giỏ hàng trên Header và màn hình Giỏ hàng (SCC05).
11 Best Selling Có Văn bản Hiển thị các sản phẩm bán chạy nhất của cửa hàng.
12 Recommend
Chương 4: Kiến trúc hệ thống 52
4.5.2.2. Màn hình đặt lại mật khẩu
Hình 4. 28: Giao diện màn hình đặt lại mật khẩu
Bảng 4. 5: Đặc tả chi tiết giao diện màn hình đặt lại mật khẩu
STT Tên Bắt buộc Định dạng Chú thích
1 Breadcumb Có Văn bản Xác định vị trí hiện tại của người dùng trong cấu trúc site.
2 Email Có Văn bản
đầu vào
Khi nhấp, nhập email đã đăng ký tài khoản trước đó để hệ thống gửi mail về địa chỉ xác nhận reset mật khẩu.
3 Reset Có Nút
Khi nhấp, chuyển sang màn hình Xác nhận đặt lại mật khẩu (SCG06). Màn hình này yêu cầu kiểm tra mail xác nhận của hệ thống được gửi đến.
Chương 4: Kiến trúc hệ thống 53
4.5.2.3. Màn hình cập nhật mật khẩu mới
Hình 4. 29: Giao diện màn hình cập nhật mật khẩu mới
Bảng 4. 6: Đặc tả chi tiết giao diện màn hình cập nhật khẩu mới
STT Tên Bắt buộc Định dạng Chú thích
1 Breadcumb Có Văn bản Xác định vị trí hiện tại của người dùng trong cấu trúc site.
2 Email Có Văn bản
Không cho phép nhấp để chỉnh sửa email đang được đặt lại mật khẩu. Email tài khoản sẽ tự động được tải lên.
3 Password Có Văn bản
đầu vào
Khi nhấp, nhập mật khẩu mới cho tài khoản.
4 Confirm
password Có
Văn bản đầu vào
Khi nhấp, yêu cầu nhập đúng như mật khẩu ở trên. Nhập sai sẽ báo lỗi.
5 Reset Có Nút
Khi nhấp, nếu thành công sẽ chuyển sang màn hình Cập nhật mật khẩu thành công (SCG07) tức là đã cập nhật mật khẩu thành công. Nếu không thành công sẽ báo lỗi.
Chương 4: Kiến trúc hệ thống 54
4.5.2.4. Màn hình chi tiết sản phẩm
Hình 4. 30: Giao diện màn hình chi tiết sản phẩm_1
Chương 4: Kiến trúc hệ thống 55
Hình 4. 32: Giao diện màn hình chi tiết sản phẩm_3
Bảng 4. 7: Đặc tả chi tiết giao diện màn hình chi tiết sản phẩm
STT Tên Bắt buộc Định dạng Chú thích
1 Breadcumb Có Văn bản Xác định vị trí hiện tại của người dùng trong cấu trúc site.
2 Tên sản phẩm Có Văn bản Tên của sản phẩm.
3 Giá sản phẩm Có Văn bản Giá của sản phẩm.
4 Availability Có Văn bản Trạng thái của sản phẩm (còn hay đã hết).
5 Sao đánh giá Có Icon Hiển thị số sao đánh giá trung bình từ người dùng.
6 Quick
Chương 4: Kiến trúc hệ thống 56
7 Color Có Checkbox Khi nhấp vào icon sổ xuống, các màu sắc mà sản phẩm có sẽ hiện ra.
8 Size Có Checkbox Khi nhấp vào icon sổ xuống, các size mà sản phẩm có sẽ hiện ra.
9 Giảm số
lượng Có Nút
Khi nhấp, số lượng sản phẩm sẽ giảm xuống, tối thiểu là số lượng là 1 sản phẩm.
10 Nhập số lượng Có Văn bản đầu vào
Khi nhấp, nhập số lượng phẩm tùy ý.
11 Tăng số lượng Có Nút Khi nhấp, số lượng sản phẩm sẽ tăng lên.
12 Add to cart Có Nút
Khi nhấp, thêm sản phẩm vào giỏ hàng, sản phẩm hiển thị trên phần Giỏ hàng trên Header và màn hình Giỏ hàng (SCC05) .
13 Add to
wishlist Có Văn bản
Khi nhấp, sản phẩm được thêm vào danh sách yêu thích (đăng nhập để thêm được). Sản phẩm đã thêm vào danh sách yêu thích thì icon sẽ có màu đỏ. Ngược lại nếu nhấp màu đỏ sang màu mặc định thì là xóa sản phẩm đó trong danh sách yêu thích (tương đương sản phẩm đó chưa có trong danh sách yêu thích).
14 Tags Có Văn bản Tag của sản phẩm.
15 Ảnh sản phẩm Có Image
Ảnh chính của sản phẩm. Khi rê chuột vào hình, hình sẽ phóng to để nhìn rõ hơn.
16 Qua trái Có Icon Di chuyển sang trái để xem các hình bên trái.
17 Ảnh chi tiết Có Hình ảnh Ảnh chi tiết của sản phẩm.
18 Qua phải Có Icon Di chuyển sang phải để xem các hình bên phải.
19 Tab mô tả Có Văn bản Khi nhấp, mô tả chi tiết về sản phẩm sẽ hiển thị.
20 Tên sản phẩm Có Văn bản Tên của sản phẩm.
21 Quick
overview Văn bản Mô tả nhanh về sản phẩm.
Chương 4: Kiến trúc hệ thống 57
23 Tab đánh giá Có Văn bản Khi nhấp, các đánh giả về sản phẩm của người dùng sẽ hiển thị.
24 Tên tài khoản Có Văn bản Hiển thị tên tài khoản.
25 Tiêu đề đánh
giá Có Văn bả Tiêu đề ngắn gọn của bài đánh giá.
26 Đánh giá sao Có Icon Số sao đánh giá sản phẩm.
27 Nội dung đánh
giá Có Văn bản Đánh giá chi tiết về sản phẩm.
28 Ảnh thực tế Có Hình ảnh Ảnh thực tế của sản phẩm được người dùng chụp và tải lên.
29
Thời gian đăng bài đánh giá
Có Ngày giờ Chi tiết về thời gian đăng bài đánh giá.
30 Tên sản phẩm Có Văn bản Tên của sản phẩm.
31 Đánh giá sao Có Icon Nhấp vào số sao để rating sản phẩm.
32 Tiêu đề Có Văn bản đầu vào
Khi nhấp, nhập tiêu đề ngắn gọn khái quát chung về sản phẩm.
33 Nội dung Có Văn bản đầu vào
Khi nhấp, nhập đánh giá chi tiết về sản phẩm.
34 Chọn ảnh Có Nút Khi nhấp, browser hiển thị lên để người dùng chọn hình ảnh.
35 Review Có Nút
Khi nhấp, nếu thành công sẽ có alert thông báo đánh giá thành công. Nếu không thành công sẽ báo lỗi.
36 Related
product Có Văn bản Hiển thị các sản phẩm liên quan (theo loại sản phẩm)
37 Ảnh sản phẩm Có Hình ảnh
Khi nhấp, chuyển sang màn hình Chi tiết sản phẩm (SCC05) của sản phẩm.
38 Tên sản phẩm Có Văn bản
Khi nhấp, chuyển sang màn hình Chi tiết sản phẩm (SCC05) của sản phẩm.
39 Đánh giá sao Có Icon Hiển thị số sao đánh giá trung bình từ người dùng.
40 Giá Có Văn bản Hiển thị giá của sản phẩm.
41 Recommend
Products Có Văn bản Hệ thống gợi ý sản phẩm cho người dùng
Chương 4: Kiến trúc hệ thống 58
42 Viewed
products Có Văn bản Hiển thị các sản phẩm đã xem.
4.5.2.5. Màn hình thanh toán
Hình 4. 33: Giao diện màn hình thanh toán_1
Hình 4. 34: Đặc tả chi tiết giao diện màn hình thanh toán_2
Chương 4: Kiến trúc hệ thống 59
STT Tên Bắt buộc Định dạng
Chú thích
1 Breadcumb Có Văn bản Xác định vị trí hiện tại của người dùng trong cấu trúc site.
2 Login Có Nút Khi nhấp, chuyển sang màn hình Đăng nhập (SCG01).
3 Continue Có Nút Chuyển tiếp đến mục số 2 của site.
4 Full Name Có Văn bản
đầu vào Khi nhấp, nhập họ và tên cá nhân.
5 Phone Có Văn bản
đầu vào Khi nhấp, nhập số điện thoại cá nhân.
6 Email Có Văn bản
đầu vào Khi nhấp, nhập địa chỉ email cá nhân.
7 Address Có Văn bản
đầu vào Khi nhấp, nhập địa chỉ cá nhân.
8 Message Có Văn bản
đầu vào
Khi nhấp, nhập các yêu cầu nếu có của cá nhân khi tiến hành đặt hàng.
9 Payments
method Có Văn bản Danh sách các phương thức thanh toán.
10 Method Có Checkbox Chọn phương thức thanh toán.
11 Danh sách sản
phẩm Có Bảng Bảng danh sách các sản phẩm.
12 Product Có Hình ảnh Khi nhấp, chuyển sang màn hình Chi tiết sản phẩm (SCC05) của sản phẩm.
13 Description Có Văn bản Khi nhấp, chuyển sang màn hình Chi tiết sản phẩm (SCC05) của sản phẩm.
14 Color Có Văn bản Màu của sản phẩm đã chọn.
15 Size Có Văn bản Kích thước của sản phẩm đã chọn.
16 Unit price Có Văn bản Hiển thị giá của sản phẩm.
17 Quantity Có Văn bản
đầu vào
Khi nhấp, nhập số lượng sản phẩm tùy ý.
18 Amount Có Văn bản Tổng tiền của chính sản phẩm đó.
19 Total Có Văn bản Tổng tiền tất cả sản phẩm.
20 Place order Có Nút
Khi nhấp, nếu chọn thanh toán bằng COD thì chuyển sang màn hình Thanh toán thành công (SCC07). Nếu thanh toán bằng PayPal sẽ chuyển sang màn hình thanh toán của PayPal, thực hiện các bước sẽ chuyển
Chương 4: Kiến trúc hệ thống 60 sang màn hình Thanh toán thành công (SCC07).
Nếu lỗi sẽ có thông báo.
4.5.2.6. Màn hình liên hệ
Hình 4. 35: Giao diện màn hình liên hệ
Bảng 4. 9: Đặc tả chi tiết giao diện màn hình liên hệ
STT Tên Bắt buộc Định dạng Chú thích
1 Breadcumb Có Văn bản Xác định vị trí hiện tại của người dùng trong cấu trúc site.
2 Let’s get in
tounch Có Văn bản Giới thiệu cho người dùng về chức năng feedback về website.
3 Address Có Văn bản Dữ liệu tĩnh.
4 Phone Có Văn bản Dữ liệu tĩnh.
Chương 4: Kiến trúc hệ thống 61
6 Google map Có Maps Địa chỉ của cửa hàng trên Google Maps.
7 Name Có Văn bản
đầu vào Khi nhấp, nhập tên cá nhân.
8 Email Có Văn bản
đầu vào Khi nhấp, nhập địa chỉ email.
9 Message Có Văn bản
đầu vào
Khi nhấp, nhập ý kiến của cá nhân để giúp website cải thiện tốt hơn.
10 Send message Có Nút
Khi nhấp, nếu thành công sẽ hiện alert thông báo thành công kèm theo đó hệ thống website sẽ nhận được email có nội dung phản hồi từ địa chỉ email người gửi.
Nếu không thành công sẽ báo lỗi.
4.5.2.7. Màn hình giới thiệu
Chương 4: Kiến trúc hệ thống 62
Bảng 4. 10: Đặc tả chi tiết giao diện màn hình liên hệ
STT Tên Bắt buộc Định dạng Chú thích
1 Breadcumb Có Văn bản Xác định vị trí hiện tại của người dùng trong cấu trúc site.
2 Nội dung giới
thiệu Có Văn bản Giới thiệu và các chính sách về cửa hàng
3 Hình ảnh Có Hình ảnh Hình ảnh về các hoạt động của cửa hàng
4 Ảnh đại diện Có Hình ảnh Ảnh đại diện của các thành viên
5 Tên thành
viên Có Văn bản Tên của các thành viên
6 Chức vụ Có Văn bản Chức vụ tại cửa hàng
4.5.2.8. Màn hình thông tin tài khoản
Hình 4. 37: Giao diện màn hình thông tin tài khoản
Bảng 4. 11: Đặc tả chi tiết giao diện màn hình thông tin tài khoản
STT Tên Bắt buộc Định dạng Chú thích
1 Breadcumb Có Văn bản Xác định vị trí hiện tại của người dùng trong cấu trúc site.
2 Full Name Có Văn bản
Chương 4: Kiến trúc hệ thống 63 Khi nhấp, chỉnh sửa họ tên khi cần thiết.
3 Email Có Văn bản
Dữ liệu được tải lên tự động.
Không thể thay đổi email đã đăng ký tài khoản vì đây là tên đăng nhập.
4 Phone Có Văn bản
đầu vào
Dữ liệu được tải lên tự động.
Khi nhấp, chỉnh sửa số điện thoại khi cần thiết.
5 Day of birth Có Ngày
Dữ liệu được tải lên tự động.
Khi nhấp, chỉnh sửa lại ngày sinh khi cần thiết.
6 Address Có Văn bản
đầu vào
Dữ liệu được tải lên tự động.
Khi nhấp, chỉnh sửa lại địa chỉ khi cần thiết.
7 Change
password Có Văn bản Khi nhấp, chuyển sang màn hình Đổi mật khẩu (SCU02).
8 CANCEL Có Nút Khi nhấp, quay trở lại màn hình trang chủ (SCC01).
9 SAVE Có Nút
Khi nhấp, nếu thành công sẽ hiển thị alert thành công.
Nếu không thành công sẽ báo lỗi ở các Văn bản fields.
Chương 4: Kiến trúc hệ thống 64
4.5.2.9. Màn hình đổi mật khẩu
Hình 4. 38: Giao diện màn hình đổi mật khẩu
Bảng 4. 12: Đặc tả chi tiết giao diện màn hình đổi mật khẩu
STT Tên Bắt buộc Định dạng Chú thích
1 Breadcumb Có Văn bản Xác định vị trí hiện tại của người dùng trong cấu trúc site.
2 Old password Có Văn bản đầu vào
Khi nhấp, nhập mật khẩu cũ của tài khoản. Mật khẩu được ẩn dưới dạng *.
3 New
password Có
Văn bản đầu vào
Khi nhấp, nhập mật khẩu mới của tài khoản. Mật khẩu được ẩn dưới dạng *.
4 Confirm
password Có
Văn bản đầu vào
Khi nhấp, yêu cầu nhập lại đúng như mật khẩu đã nhập ở trên.
5 CANCEL Có Nút Khi nhấp, quay trở lại màn hình Thông tin tài khoản (SCU01).
6 SAVE Có Nút
Khi nhấp, nếu thành công sẽ có alert hiển thị thành công.
Chương 4: Kiến trúc hệ thống 65
4.5.2.10. Màn hình lịch sử đơn hàng
Hình 4. 39: Giao diện màn hình lịch sử đơn hàng
Bảng 4. 13: Đặc tả chi tiết giao diện màn hình lịch sử đơn hàng
STT Tên Bắt buộc Định dạng Chú thích
1 Breadcumb Có Văn bản Xác định vị trí hiện tại của người dùng trong cấu trúc site.
2 Danh sách
đơn hàng Có Bảng
Bảng danh sách các đơn hàng của khách hàng
3 Order ID Có Văn bản
Mã đơn hàng của người dùng. Khi nhấp, chuyển sang màn hình Chi tiết đơn hàng (SCG04) của đơn hàng đó.
4 Order Date Có Văn bản Ngày lập đơn hàng.
5 Product Có Văn bản Danh sách các sản phẩm của đơn hàng.
6 Total Có Văn bản Tổng số tiền của đơn hàng.
7 Status Có Văn bản Trạng thái của đơn hàng.
Chương 4: Kiến trúc hệ thống 66
4.5.2.11. Màn hình chi tiết đơn hàng
Hình 4. 40: Giao diện màn hình chi tiết đơn hàng
Bảng 4. 14: Đặc tả chi tiết giao diện màn hình chi tiết đơn hàng
STT Tên Bắt buộc
Định dạng Chú thích
1 Breadcumb Có Văn bản Xác định vị trí hiện tại của người dùng trong cấu trúc site.
2 Order ID Có Văn bản Mã đơn hàng.
3 Order date Có Văn bản Ngày lập đơn hàng.
4 Receiver’s
address Có Văn bản Thông tin địa chỉ người nhận.
5 Name Có Văn bản Tên khách hàng đã nhập ở màn hình Thanh toán (SCC06).
6 Address Có Văn bản Địa chỉ khách hàng đã nhập ở màn hình Thanh toán (SCC06).
7 Phone Có Văn bản Số điện thoại khách hàng đã nhập ở màn hình Thanh toán (SCC06).
8 Message Có Văn bản
Những yêu cầu khác, ghi chú khác của khách hàng đã nhập ở màn hình Thanh toán (SCC06).
Chương 4: Kiến trúc hệ thống 67
9 Payment
method Có Văn bản
Phương thức thanh toán mà khách hàng đã nhập ở màn hình Thanh toán (SCC06). 10 Danh sách sản phẩm Có Bảng Bàng danh sách các sản phẩm có