Khi muốn xem chi tiết sản phẩm, ta sẽ rê chuột vào sản phẩm mà ta muốn xem chi tiết, khi đó sẽ hiển thị nút xem chi tiết cũng như thêm sản phẩm vào giỏ hàng như hình:
Hình 5.7: hình 1 sản phẩm cụ thể hiển thị trong danh sách sản phẩm
Trên hình 5.7, có 2 nút: nút bên trái là nút xem chi tiết sản phẩm, nút bên phải là thêm sản phẩm vào giỏ hàng, ta sẽ nhấp vào nút xem chi tiết sản phẩm, khi đó sẽ hiển thị chi tiết sản phẩm như hình 5.8.
Nội dung trang chi tiết sản phẩm bao gồm:
¥! Hình sản phẩm.
¥! Tên, giá, mã, hãng sản phẩm.
¥! Hình slider chi tiết sản phẩm.
¥! Popup cấu hình sản phẩm bằng cách click vào nút CẤU HÌNH SẢN PHẨM CHI TIẾT để xem.
¥! Popup mô tả sản phẩm nếu nội dung popup nhiều hơn 3 đoạn văn.
¥! Nút ĐẶT MUA SẢN PHẨM.
¥! Danh sách hình sản phẩm liên quan dưới cùng. Danh sách này là do hệ thống gợi ý dựa trên sản phẩm mà người dùng đang xem. Tức là hệ thống sẽ dựa trên thông tin chi tiết của sản phẩm mà ta đang xem hiện tại(Apple MacBook Pro M1 2020 8GB/256GB (MYD82SA/A)) và so sánh sự tương quan với các sản phẩm trên hệ thống và chọn ra top 4 sản phẩm tương tự nhất với sản phẩm này và gợi ý ra cho người dùng.
Hình 5.8: chi tiết sản phẩm 5.2.5.!Đặt hàng trên hệ thống, thanh toán tiền mặt, paypal
¥! Cách 1: rê chuột vào mỗi sản phẩm như ta đã trình bày ở trên. Khi đó sẽ hiển thị ra 2 nút: xem chi tiết sản phẩm(bên trái) và thêm vào giỏ hàng(bên phải), ta sẽ click vào nút thêm vào giỏ hàng.
¥! Cách 2: ta đi vào trang chi tiết sản phẩm giống như hình 5.8, click vào nút ĐẶT MUA SẢN PHẨM.
Ta có thể thêm số lượng sản phẩm bằng cách nhấp vào nút đặt mua nhiều lần. Sau khi đặt mua sản phẩm, ta sẽ tiến hành thanh toán bằng cách nhấp vào nút giỏ hàng ở thanh tiêu đề. Khi đó sẽ hiển thị popup như hình 5.9:
Hình 5.9: popup hiển thị danh sách sản phẩm đã đặt mua trong giỏ hàng
Khi tiến hành đặt hàng, nếu người dùng chưa đăng nhập thì sẽ hiển thị form cho người dùng đặt mua sản phẩm, phần hiện thực form sẽ được nêu ở phần phụ lục.
Khi người dùng đã đăng nhập thì sẽ hiển thị trang cho người dùng xác nhận đặt hàng như hình 5.10 như sau:
Hình 5.10: form đặt hàng hệ thống
Trong form đặt hàng trên hệ thống này, ta có thể thay đổi phương thức thanh toán bằng tiền mặt hoặc bằng paypal.
Sau đó ta nhấn vào nút tiến hành đặt hàng để đặt hàng.
Nếu người dùng chọn phương thức thanh toán bằng tiền mặt thì sẽ hiển thị trang thông báo đặt hàng thành công như hình 5.11 sau đây:
Hình 5.11: thông báo đặt hàng thành công khi thanh toán tiền mặt
Nếu người dùng thanh toán bằng paypal thì hệ thống sẽ chuyển đến trang yêu cầu đăng nhập vào paypal để thanh toán như hình 5.12:
Hình 5.12: trang để thanh toán paypal
Click vào nút Continue để tiến hành thanh toán, khi thanh toán thành công sẽ chuyển về trang thông báo đặt hàng thành công như hình 5.13:
Hình 5.13: thông báo đặt hàng trên hệ thống và thanh toán paypal thành công 5.2.6.!Một số phần chính của trang quản trị viên
Trang quản trị viên gồm có các chức năng:
¥! Xem thống kê thông tin tổng quát. ¥! Thêm sản phẩm.
¥! Xem danh sách sản phẩm, chi tiết sản phẩm. ¥! Xem danh sách đơn hàng, chi tiết đơn hàng. ¥! Danh sách người dùng.
¥! Danh sách nhân viên. ¥! Tạo tài khoản nhân viên.
Trong phần này ta cũng sẽ hiện thực một số phần chính của trang quản trị viên, phần còn lại xem thêm ở phụ lục.
Trang chủ quản trị viên gồm nhiều phần, bao gồm:
¥! Thông tin số lượng người dùng, số lượng đơn hàng, số lượng sản phẩm. ¥! Hiển thị top 5 sản phẩm được xem nhiều nhất.
¥! Đánh giá hiệu quả của mô hình recommendation system, thông tin website. ¥! Thống kê top lịch sử tương tác với các sản phẩm giới thiệu cho người dùng thông
Ta sẽ hiện thực từng phần như sau:
Hình 5.14: thống kê thông tin số lượng người dùng, số đơn hàng, số sản phẩm
Hình 5.15: top 5 sản phẩm được xem nhiều nhất
Hệ thống sẽ chọn ra 5 sản phẩm có số lượt xem nhiều nhất để hiển thị lên hệ thống.
Hình 5.16: thông tin đánh giá mô hình phân hệ gợi ý và thông tin website
Hệ thống sẽ dựa vào nhật ký tương tác của người dùng với các sản phẩm gợi ý và trung bình cộng điểm tương tác.
Hình 5.18: top sản phẩm gợi ý theo sản phẩm được tương tác nhiều nhất
Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm gợi ý theo sản phẩm mà được tương tác nhiều nhất.
Hình 5.19: top sản phẩm gợi ý theo sản phẩm được tương tác nhiều nhất
Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm được riêng gợi ý cho từng người dùng được tương tác nhiều nhất.
Hình 5.20: top sản phẩm gợi ý theo sản phẩm được xem nhiều nhất
Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm được hệ thống gợi ý theo sản phẩm mà người dùng tương tác nhiều nhất.
Hình 5.21: top gợi ý theo sản phẩm được thêm vào giỏ hàng nhiều nhất
Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm gợi ý theo sản phẩm mà được người dùng quan tâm và thêm vào giỏ hàng.
Hình 5.22: top gợi ý theo sản phẩm được người dùng đặt mua nhiều nhất
Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm được gợi ý theo sản phẩm mà được người dùng đặt mua nhiều nhất.
Hình 5.23: top gợi ý cho từng người dùng được người dùng xem nhiều nhất
Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm mà hệ thống gợi ý cho người dùng và được người dùng xem nhiều nhất.
Hình 5.24: top gợi ý cho từng người dùng được thêm vào giỏ hàng nhiều nhất
Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm gợi ý cho từng người dùng và được người dùng thêm vào giỏ hàng nhiều nhất.
Hình 5.25: top gợi ý cho từng người dùng được đặt mua nhiều nhất
Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm gợi ý cho từng người dùng được người dùng đặt mua nhiều nhất.
5.2.7.!Quản trị viên xem danh sách đơn hàng
Hình 5.26: xem danh sách đơn hàng ở trang quản trị viên
Trang quản trị viên cho phép quản trị viên tra cứu thông tin đơn hàng theo mã đơn hàng hoặc số điện thoại. Đồng thời cho phép lọc đơn hàng theo các tình trạng: đơn hàng đã duỷ, đơn hàng chưa thanh toán, đơn hàng đã thanh toán, đơn hàng đã giao.
Quản trị viên có quyền xem chi tiết đơn hàng bằng cách nhấp vào icon chữ i ở cột chi tiết của sản phẩm mà quản trị viên muốn xem.
Hình 5.27: quản trị viên xem chi tiết đơn hàng 5.2.8.!Nhân viên xác nhận đơn hàng
Khi nhân viên đăng nhập vào trang dành cho nhân viên, hệ thống sẽ hiển thị trang danh sách đơn hàng mà khách hàng đã đặt mua. Giao diện như sau:
Hình 5.28: xem danh sách đơn hàng ở trang nhân viên
Trang này cho phép nhân viên tra cứu thông tin đơn hàng theo mã đơn hàng hoặc số điện thoại. Đồng thời cho phép lọc đơn hàng theo các tình trạng: đơn hàng đã duỷ, đơn hàng chưa thanh toán, đơn hàng đã thanh toán, đơn hàng đã giao.
Nhân viễn cũng có quyền xem chi tiết đơn hàng bằng cách nhấp vào icon chữ i ở cột chi tiết của sản phẩm mà nhân viên muốn xem.
Hình 5.29: nhân viên xem chi tiết đơn hàng
Nhân viên cũng có quyền thao tác huỷ hơn hàng, xác nhận mua hàng, xác nhận đã giao hàng.
5.2.9.!Hiển thị danh sách các sản phẩm gợi ý được người dùng xem, thêm vào giỏ hàng, mua nhiều nhất hàng, mua nhiều nhất
Ta sẽ thiết kế một trang danh sách top các sản phẩm mà hệ thống gợi ý cho người dùng hoặc gợi ý kèm theo sản phẩm cụ thể nào đó mà được người dùng quan tâm nhiều nhất.
Mục tiêu của danh sách này là để gợi ý cho người dùng những sản phẩm mà hệ thống đã gợi ý ra được người dùng ưa chuộng nhất.
Danh sách các sản phẩm gợi ý này được chia ra làm 8 phần:
Hình 5.30: danh sách gợi ý theo các sản phẩm được tương tác nhiều nhất
Phần này sẽ hiển thị thông tin top 10 sản phẩm gợi ý theo sản phẩm(sản phẩm liên quan) được người dùng tương tác(xem, thêm vào giỏ hàng, mua) nhiều nhất.
Để có thể xem thêm sản phẩm, ta sẽ nhấn vào link Xem thêm sản phẩm bên dưới.
Phần này sẽ hiển thị thông tin top 10 sản phẩm gợi ý riêng cho mỗi người dùng được người dùng tương tác(xem, thêm vào giỏ hàng, mua) nhiều nhất.
Để có thể xem thêm sản phẩm, ta sẽ nhấn vào link Xem thêm sản phẩm bên dưới.
Hình 5.32: danh sách gợi ý theo sản phẩm được người dùng xem nhiều nhất
Phần này sẽ hiển thị thông tin top 10 sản phẩm theo sản phẩm được người dùng xem nhiều nhất.
Để có thể xem thêm sản phẩm, ta sẽ nhấn vào link Xem thêm sản phẩm bên dưới.
Hình 5.33: danh sách gợi ý theo sản phẩm được thêm vào giỏ hàng
Phần này sẽ hiển thị thông tin top 10 sản phẩm theo sản phẩm được người dùng thêm vào giỏ hàng nhiều nhất.
Hình 5.34: danh sách gợi ý theo sản phẩm được người dùng mua nhiều nhất
Phần này sẽ hiển thị thông tin top 10 sản phẩm theo sản phẩm được người dùng đặt mua nhiều nhất.
Để có thể xem thêm sản phẩm, ta sẽ nhấn vào link Xem thêm sản phẩm bên dưới.
Hình 5.35: danh sách gợi ý cho người dùng được xem nhiều nhất
Phần này sẽ hiển thị thông tin top 10 sản phẩm gợi ý riêng cho mỗi người dùng được người dùng xem nhiều nhất.
Hình 5.36: danh sách gợi ý cho người dùng được thêm vào giỏ hàng
Phần này sẽ hiển thị thông tin top 10 sản phẩm gợi ý riêng cho mỗi người dùng được người dùng thêm vào giỏ hàng nhiều nhất.
Để có thể xem thêm sản phẩm, ta sẽ nhấn vào link Xem thêm sản phẩm bên dưới.
Hình 5.37: danh sách gợi ý cho người dùng được mua nhiều nhất
Phần này sẽ hiển thị thông tin top 10 sản phẩm gợi ý riêng cho mỗi người dùng được người dùng đặt mua nhiều nhất.
CHƯƠNG 6: KIỂM THỬ PHẦN MỀM
Trong chương này ta sẽ thực hiện kiểm thử phần mềm, kiểm tra các chức năng chính mà ta đã thiết kế trong website để kiểm thử các chức năng có hoạt động phù hợp hay không. Các chức năng còn lại xem ở phần phụ lục.
6.1.! Chức năng gợi ý sản phẩm của phân hệ gợi ý hoặc sản phẩm phổ biến
Trong website này, ta có ứng dụng phân hệ gợi ý để thực hiện gợi ý sản phẩm cho người dùng. Có 2 loại gợi ý được tích hợp trong website này là gợi ý dựa trên tương tác của người dùng và gợi ý dựa trên sản phẩm tương tự với sản phẩm mà người dùng đang xem xét. Ta sẽ tiến hành kiểm thử 2 tính năng gợi ý này:
STT Mô tả Kết quả Kết luận
1 Kiểm thử tính năng gợi ý sản phẩm khi người dùng mở trang web trong trạng thái chưa đăng nhập.
Hệ thống sẽ gợi ý ra những sản phẩm phổ biến, được người dùng tương tác nhiều trong phần sản phẩm phổ biến như hình 6.1.
Pass
2 Khi người dùng mới tạo tài khoản và đăng nhập vào.
Hệ thống chưa có thông tin về lịch sử tương tác của người dùng nên chỉ gợi ý những sản phẩm dựa trên mức độ phổ biến của sản phẩm như hình 6.2 ở phần sản phẩm phổ biến.
Pass
3 Gợi ý sản phẩm với những người dùng đã tương tác nhiều với sản phẩm.
Hệ thống sẽ gợi ý sản phẩm cho người dùng theo 2 phần như hình 6.3. Bao gồm: gợi ý cho bạn do hệ thống gợi ý gợi ý riêng cho từng người dùng, sản phẩm phổ biến vẫn sẽ dựa trên mức độ phổ biến sản phẩm
Pass
4 Gợi ý sản phẩm tương tự với sản phẩm mà người dùng đang xem chi tiết. Ta sẽ thực hiện kiểm tra với sản phẩm Máy tính bảng iPad gen 8 2020 WiFi 32GB rồi từ đó gợi ý các sản phẩm liên quan cho người dùng.
Hệ thống sẽ dựa trên mức độ tương tự giữa các sản phẩm với nhau và chọn ra 4 sản phẩm tương tự nhất với sản phẩm mà người dùng đang xem xét rồi từ đó gợi ý cho người dùng như hình 6.4.
Pass
tên sản phẩm mà người dùng muốn tìm kiếm.
Trong trường hợp này, mình sẽ tra cứu sản phẩm Macbook Pro M1. Ta sẽ gõ từ khoá trong trường tìm kiếm sản phẩm như hình 6.5.
mà ta vừa nhập vào rồi từ đó gợi ý ra những sản phẩm mà người dùng đang tìm kiếm như hình 6.6.
Bảng 6.1: kiểm thử chức năng gợi ý và hiển thị sản phẩm phổ biến
Hình 6.4: danh sách sản phẩm liên quan, gần gũi với sản phẩm cụ thể
Hình 6.5: trường tìm kiếm sản phẩm, gõ tên sản phẩm đang cần tìm
6.2.! Chức năng thêm sản phẩm vào giỏ hàng, đặt hàng và thanh toán trên website
STT Mô tả Kết quả Kết luận
1 Thêm sản phẩm vào giỏ hàng trên các trang hiển thị danh sách nhiều sản phẩm.
Ta sẽ thực hiện rê chuột vào sản phẩm ta muốn thêm, khi đó sẽ hiển thị 2 nút, 1 nút để xem chi tiết sản phẩm, 1 nút để thêm sản phẩm vào giỏ hàng như hình 6.7.
Ta sẽ click vào nút có icon giỏ hàng để thêm sản phẩm vào giỏ hàng. Ta có thể chọn mua nhiều sản phẩm.
Sản phẩm được thêm vào giỏ hàng, đồng thời hiển thị thông báo ở góc phải trên màn hình để thông báo sản phẩm đã được thêm vào giỏ hàng, đồng thời số lượng sản phẩm trên nút giỏ hàng cũng được tăng lên(Hình 6.8) và khi click vào nút này sẽ hiển thị popup danh sách sản phẩm như hình 6.9.
Pass
2 Tăng số lượng sản phẩm trong popup giỏ hàng. Ta sẽ nhấn vào nút có dấu +(Hình 6.9) của sản phẩm mà ta muốn tăng số lượng trong popup giỏ hàng.
Số lượng sản phẩm mà ta vừa bấm vào nút + tăng lên 1. Chi phí tổng cộng cho từng sản phẩm cũng được tính lại tuỳ theo số lượng. Thông tin thanh toán ở cuối popup hình 6.9 (Tổng tiền, Phí ship, Tiền phải trả) cũng được tính lại.
Pass
3 Giảm số lượng sản phẩm trong popup giỏ hàng khi số sản phẩm của một món hàng cụ thể bằng 1. Ta sẽ thực hiện bằng cách nhấn vào nút có dấu –(Hình 6.9) của sản phẩm mà ta muốn giảm số lượng.
Sản phẩm được xoá hẳn ra khỏi popup giỏ hàng. Trong popup không còn hiển thị thông tin của sản phẩm mà ta vừa bấm vào nút giảm số lượng đó nữa. Thông tin thanh toán ở phần dưới cùng của popup cũng được tính toán lại.
Pass
4 Giảm số lượng sản phẩm trong popup giỏ hàng khi số sản phẩm của một món hàng cụ thể lớn hơn 1.