CHƯƠNG 4. XÂY DỰNG CHƯƠNG TRÌNH
4.1. Giao diện đối với khách hàng (User)
4.1.1. Giao diện Header - Footer Header khi người dùng chưa đăng nhập
Mô tả: Phần trên của màn hình hiển thị logo của trang web. Bên cạnh đó hiển thị các thông tin liên hệ của cửa hàng bao gồm các cơ sở, địa chỉ, số điện thoại. Các nút điều hướng bao gồm “Trang chủ”, “Giới thiệu”, “Sản phẩm”,
“Hướng dẫn mua hàng” và “Liên hệ”. Bên góc phải là thanh tìm kiếm dùng để tìm kiếm sản phẩm có trong trang web. Phía dưới có các nút đăng nhập, đăng ký dành cho người dùng. Ngoài ra màn hình còn hiển thị giỏ hàng của người dùng.
Hình 4-8: Header chưa đăng nhập
Header khi người dùng đã đăng nhập
Mô tả: Giống như header khi chưa đăng nhập, tuy nhiên ở phần đăng nhập / đăng ký được thay thế bằng thông tin đăng nhập của người dùng, xếp hạng, các đơn hàng đã mua, giỏ hàng, hồ sơ (thông tin cá nhân) và nút đăng xuất tài khoản.
Hình 4-9: Header đã đăng nhập 27
Footer
Mô tả: Hiển thị một số thông tin liên quan đến trang web của cửa hàng:
Thông tin của cửa hàng: giới thiệu, hệ thống cửa hàng, tuyển dụng, liên hệ.
Trợ giúp: Chính sách khách hàng, phương thức thanh toán, chính sách mua hàng, giao hàng, đổi trả, bảo hành…
Thanh toán: Các phương thức thanh toán (Visa, QR, …)
Kết nối với trang web: Các trang mạng xã hội (Facebook, Instragram, TikTok, Youtube)
Hình 4-10: Footer
4.1.2. Giao diện trang đăng nhập, đăng ký Trang đăng nhập
Mô tả: Bao gồm tên đăng nhập, mật khẩu và lựa chọn ghi nhớ mật khẩu.
Tên đăng nhập là duy nhất Mật khẩu người dùng nhập vào phải ít nhất 8 kí tự.
Hình 4-11: User – Đăng nhập
Trang đăng ký
Mô tả: bao gồm tên đăng nhập, mật khẩu, nhập lại mật khẩu, giới tính, email, số điện thoại, địa chỉ… Mật khẩu được quy định phải ít nhất 8 kí tự;
email, số điện thoại phải là duy nhất. Các trường không được phép để trống.
Hình 4-12: User – Đăng ký
4.1.3. Giao diện hồ sơ người dùng
Mô tả: Dùng để xem thông tin cá nhân của người dùng. Có các chức năng để cập nhật, chỉnh sửa hồ sơ thông tin cá nhân của người dùng. Có thể chỉnh sửa thông tin cá nhân tuy nhiên không thể chỉnh sửa ID tài khoản cũng như tên tài khoản. Khi thay đổi xong bên dưới sẽ có nút lưu thay đổi và đổi mật khẩu nếu cần thiết.
29
Hình 4-13: User – Hồ sơ
4.1.4. Giao diện trang đổi mật khẩu
Mô tả: Dùng để thay đổi mật khẩu trong trường hợp cần bảo mật tài khoản.
Gồm có các trường: Mật khẩu hiện tại (phải nhập vào đúng mật khẩu của hiện tại), mật khẩu mới, nhập lại mật khẩu mới là mật khẩu người dùng muốn đổi.
Bên dưới là nút đổi mật khẩu để hoàn tất quá trình thay đổi mật khẩu. Mật khẩu mới cũng cần phải có chiều dài ít nhất 8 kí tự.
Hình 4-14: User – Đổi mật khẩu 4.1.5. Hiển thị sản phẩm
Mô tả: Là nơi hiển thị các sản phẩm được trưng bày của trang web. Khách hàng từ trang này có thể thấy được các sản phẩm cùng với mức giá của nó. Tùy vào bộ lọc mà danh sách các sản phẩm người dùng nhìn thấy sẽ khác nhau.
Các sản phẩm mới nhất: Là các sản phẩm vừa được thêm vào cửa hàng trong thời gian gần đây.
Hình 4-15: User – Sản phẩm mới nhất 31
Các sản phẩm nhiều người mua nhất: Là các sản phẩm được mua với số lượng nhiều nhất trong cửa hàng.
Hình 4-16: User – Sản phẩm nhiều người mua nhất
Các sản phẩm được đánh giá cao: Là các sản phẩm nhận được các đánh giá tích cực về chất lượng cũng như giá cả.
Hình 4-17: User – Sản phẩm được đánh giá cao
Kết quả hiển thị tìm kiếm: Hiển thị các sản phẩm có tên sản phẩm giống một phần hoặc hoàn toàn với từ khóa mà người dùng nhập vào trên thanh tìm kiếm sản phẩm.
Hình 4-18: User – Sản phẩm theo tìm kiếm
4.1.6. Giao diện chi tiết sản phẩm
Mô tả: Hiển thị thông tin chi tiết của sản phẩm, mức giá của sản phẩm, tình trạng của sản phẩm (còn hàng hay hết hàng), hình ảnh đại diện và các hình ảnh khác của sản phẩm (nếu có) và chức năng thêm vào giỏ hàng nếu tình trạng là
“Còn hàng”. Bên dưới chi tiết sản phẩm sẽ hiển thị các sản phẩm gợi ý cùng loại với sản phẩm được hiển thị chi tiết. Ở phía bên dưới sẽ là phần bình luận về sản phẩm đó. Khách hàng có thể đưa ra bình luận của mình về sản phẩm (trải nghiệm người dùng, đánh giá…) cũng như thấy được các đánh giá về sản phẩm từ các người dùng khác.
33
Hình 4-19: User – Chi tiết sản phẩm
Hình 4-20: User – Bình luận, đánh giá sản phẩm
4.1.7. Giao diện giỏ hàng
Mô tả: Hiển thị danh sách các mặt hàng mà người dùng đã chọn thêm vào giỏ hàng. Thông tin danh sách bao gồm mã sản phẩm, tên sản phẩm, hình ảnh của sản phẩm, giá của sản phẩm, giảm giá sản phẩm, số lượng đặt mua và thành tiền của mỗi sản phẩm. Ở phía bên dưới là tổng kết về các sản phẩm trong giỏ hàng. Thông tin bao gồm tổng số lượng sản phẩm đã đặt mua, tổng thành tiền của các sản phẩm trong giỏ hàng. Giỏ hàng có các chức năng như thay đổi số lượng của từng sản phẩm, xóa một sản phẩm khỏi giỏ hàng, hủy giỏ hàng (xóa hết tất cả các sản phẩm có trong giỏ hàng), tiến hành đặt hàng (mua các mặt hàng có trong giỏ hàng)
Hình 4-21: User – Giỏ hàng (chưa có sản phẩm)
Hình 4-22: User – Giỏ hàng (có sản phẩm) 4.1.8. Giao diện xác nhận đơn hàng
Mô tả: Là bước cuối cùng trước khi tiến hành mua hàng. Trang xác nhận đơn hàng hiển thị các sản phẩm trong giỏ hàng, gồm mã sản phẩm, tên sản phẩm, hình ảnh, giá tiền, số lượng, tổng tiền của sản phẩm. Phía bên dưới hiển thị thông tin của người đặt, người dùng có thể chỉnh sửa thông tin đặt hàng cho phù hợp.
Cuối cùng là mục thanh toán cho phép người dùng có thể lựa chọn phương thức thanh toán (tiền mặt, PayPal) sau đó là tiến hành xác nhận đơn hàng hoặc là hủy xác nhận để trở về giỏ hàng.
35
Hình 4-23: User – Xác nhận đơn hàng
4.1.9. Giao diện danh sách đơn hàng đã đặt
Mô tả: Là nơi hiển thị các đơn hàng đã đặt cùng tình trạng của đơn hàng.
Trên mỗi đơn hàng hiển thị thông tin của người đặt hàng, Email, số điện thoại, địa chỉ đặt hàng, thời gian đặt hàng, tổng giá trị của đơn hàng, phương thức thanh toán cùng với trạng thái đơn hàng và tình trạng thanh toán. Nếu đơn hàng đã được quản lý của cửa hàng duyệt qua và xác nhận giao thì trạng thái đơn hàng sẽ chuyển thành “Đang giao hàng”. Nếu như đơn hàng đã được giao cùng với sự xác nhận của người dùng thì trạng thái sẽ được chuyển thành “Đã giao hàng”
cùng với tình trạng thanh toán là “Đã thanh toán”. Trên mỗi đơn hàng có chức năng xem sản phẩm cho phép người dùng xem các sản phẩm được đặt trong đơn hàng đó; chức năng “Xác nhận đơn hàng” cho phép người dùng xác nhận là đã nhận hàng khi đơn hàng tới địa chỉ được giao; chức năng “Hủy đơn hàng” cho phép người dùng hủy đơn khi có nhu cầu không mua các sản phẩm nữa.
Hình 4-24: User – Danh sách đơn hàng