Giao diện website

Một phần của tài liệu Xây dựng website thương mại điện tử cho Công ty cổ phần thương mại G.b.s (Trang 64 - 73)

4.2.1 Phân hệ khách hàng Trang chủ

Trang mặc định ban đầu khi khách hàng truy cập vào Website giaquatot.com (Trang chủ) với chức năng hiển thị địa điểm nổi bật và địa điểm mới. Khi muốn xem thông một địa điểm nào đó, khách hàng có thể xem địa điểm trên Trang chủ, hoặc duyệt qua danh mục địa điểm ở góc trái của Website, hoặc có thể tìm kiếm theo tên địa điểm,Tỉnh/thànhphố, quận/huyện, danh mục của địa điểm.

Hình 4.6 Giao diện trang chủ website giaquatot.com

Giới thiệu về website giaquatot.com, thẻ GQTCard, điều khoản sử dụng, hợp tác kinh doanh, tầm nhìn, sứ mệnh… Giúp đối tác doanh nghiệp và khách hàng yên tâm về dịch của công ty.

Hình 4.7 Giao diện trang giới thiệu

Các trang về danh mục địa điểm:

Liệt kê các địa điểm chấp nhận thẻ theo danh mục phía bên trái website: Du lịch, mua sắm, giáo dục, giải trí…

Hình 4.8 Giao diện trang địa điểm giảm giá

Trang chi tiết sản phẩm: Mô tả thông tin chi tiết về địa điểm

Khi muốn xem thông tin chi tiết của sản phẩm, người tiêu dùng có thể click chuột vào ảnh của địa điểm hoặc tên của địa điểm đó. Trang này có chức năng mô tả Chi tiết về địa điểm được giảm giá khi sử dụng thẻ GQTCard gôm: Hình ảnh, % giảm giá, điều kiện sử dụng, thông tin liên hệ…

Hình 4.9 Giao diện trang chi tiết địa điểm giảm giá

Trang đăng ký:

Để đăng ký tài khoản, khách hàng phải điền đầy đủ các thông tin sau: Họ tên, địa chỉ, Tỉnh, Thành phố, mật khẩu, Email, điện thoại, Fax (không bắt buộc), đồng gửi thông báo (không bắt buộc).

Hình 4.10 Giao diện trang đăng ký

Trang đăng nhập: Khách hàng nhập (Email) và mật khẩu.

Hình 4.11 Giao diện trang đăng nhập

Nếu đăng nhập thành công website sẽ chuyển người dung đến trang quản lý thông tin cá nhân

Hình 4.12 Giao diện trang quản lý thông tin cá nhân

Trang mua thẻ: Kiểm tra người dùng qua session nếu đã đăng nhập thông tin cá nhân sẽ tự động load vào form người dùng sẽ cần nhập thêm loại thẻ muốn mua, hình thức thanh toán. Nếu dùng phương thức thanh toán qua ví điện tử bảo kim, nếu chưa biết cách thức thanh toán người dùng click vào hướng dẫn website sẽ chuyển hướng đến trang web của bảo kim hướng dẫn sử dụng phương thức thanh toán này: https://www.baokim.vn/payment_guide/giaquatotcom.html .

Sau khi bấm submit hệ thống kiểm tra thông tin người dùng nhập vào nếu hợp lệ thì sẽ lưu thông tin đơn hàng vào CSDL và gửi email thông báo cho người dùng và quản lý của giaquatot.com để tiếp tục công tác chyển thẻ và theo dõi đơn hàng.

Hình 4.13 Giao diện trang mua thẻ & thanh toán

Trang đăng nhập quản trị:

Tại trang này yêu cầu quản trị nhập tên đăng nhập và mật khẩu.

Hình 4.14 Giao diện trang đăng nhập quản trị

Quản lý địa điểm giảm giá

Chức năng:

Thêm mục cho danh mục “Địa điểm” kích chuột vào nút trong cột “Thêm”.

Sửa tên mục: kích chuột vào nút có tên “Sửa”  hiển thị trang sửa tên mục  Gõ tên mục cần sửa, thông tin “Nhóm”-“Hiển thị”-“Nổi bật” để nguyên theo mặc định  kích chuột vào nút .

Xóa tên mục: kích chuột vào nút có tên “Xóa”  hiện trang thông báo  chọn “OK” nếu đồng ý  chọn “Cancel” nếu không đồng ý.

Hình 4.15 Giao diện trang quản lý địa điểm giảm giá Xem, Sửa, Xóa, Đăng bài viết trong danh mục “Địa điểm”:

Hình 4.16 Danh sách các địa điểm đã đăng (adsbygoogle = window.adsbygoogle || []).push({});

Đăng bài viết: Sau khi kích chuột vào nút xem để hiển thị danh sách các bài viết đã đăng, kích chuột vào nút để đăng địa điểm mới.. Sau khi hoàn tất nội dung bài viết ta chọn vào nút để đăng tải bài viết cho website.

Quản lý loại tin thẻ

Mục đích: Cập nhập các loại thẻ mà G.B.S cung cấp ra thị trường. Chức năng:

Thêm, Xem, Xóa, Sửa loại thẻ.

Hình 4.18 Danh sách loại thẻ G.B.S cung cấp

Quản lý thông tin thẻ

Mục đích: Cập nhập thông tin khách hàng mua thẻ , cập nhật trạng thái của thẻ đang hoạt động hay chưa.

Chức năng:

Thêm, Xem, Xóa, Sửa xóa thông tin thẻ.

Hình 4.19 Cập nhật thông tin thẻ

Một phần của tài liệu Xây dựng website thương mại điện tử cho Công ty cổ phần thương mại G.b.s (Trang 64 - 73)