Giao diện đặt hàng

Một phần của tài liệu Do-Khac-Huong-CT1701 (Trang 65 - 67)

CHƯƠNG 4 : CHƯƠNG TRÌNH THỬ NGHIỆM

4.1.1.Giao diện đặt hàng

4.1. Một số giao diện chương trình

4.1.1.Giao diện đặt hàng

Hình 4.1 Giao diện đặt hàng Giao diện đặt hàng gồm có:

- Panel chọn sản phẩm - Panel danh sách sản phẩm - Panel Thơng tin đặt hàng

Panel chọn sản phẩm gồm có:

- Selectbox Chọn sản phẩm: Cho phép chọn sản phẩm cần mua

- Input Số lượng: Cho phép nhập số lượng sản phẩm ứng với sản phẩm bên cạnh - Button Chọn ngay: Thực hiện thêm sản phẩm ứng với số lượng vào Danh sách

Panel sản phẩm gồm có:

- Button Xóa hết: Thực hiện xóa hết các sản phẩm trong danh sách sản phẩm - Selectbox Đơn vị tính: Cho phép chọn đơn vị tính của sản phẩm tương ứng - Input Số lượng: Cho phép nhập, sửa số lượng sản phẩm của sản phẩm cùng

dịng

- Button Xóa: Xóa sản phẩm cùng dịng ra khỏi danh sách sản phẩm

Panel thơng tin đặt hàng gồm có:

- Bản đồ google map: Cho phép chọn địa điểm mua hàng - Input Ngày xuất: Hiển thị ngày xuất đơn đặt hàng - Input Địa điểm mua: Hiển thị địa điểm mua

- Select box Tỉnh/Thành Phố: Cho phép chọn Tỉnh hoặc Thành Phố nơi nhận hàng

- Select box Quận/Huyện: Cho phép chọn Quận hoặc Huyện thuộc Tỉnh hoặc Thành Phố đã chọn ở select box Tỉnh/Thành Phố

- Select box Xã/Phường: Cho phép chọn Xã hoặc Phường thuộc Quận hoặc Huyện đã chọn ở select box Xã/Phường

- Input Đường phố/Số nhà: Cho phép nhập Tên đường phố và số nhà địa điểm nhận hàng hoặc khu vực địa điểm nhận hàng

- Input Số điện thoại: Cho phép nhập số điện thoại người nhận hàng - Textarea Ghi chú: Cho phép nhận ghi chú về đơn hàng

- Input Số tiền đặt cọc: Cho phép nhận số tiền đặt cọc

- Input Khoảng cách: Hiển hiện khoảng cách tính được từ địa điểm mua hàng đến địa điểm nhận hàng

- Button đặt hàng ngay: Thực hiện gửi đơn đặt hàng

Mô tả hoạt động:

- Bước 1: Chọn sản phẩm cần mua ở select box Panel Chọn sản phẩm. Nhập số lượng sản phẩm ở Input Số lượng Panel Chọn sản phẩm. Nhấn button Chọn ngay ở Panel Chọn sản phẩm. Sau khi Nhấn vào button Chọn ngay Sản phẩm sẽ được thêm vào danh sách sản phẩm ở Panel Danh sách sản phẩm. Kiểm tra, điều chỉnh số lượng sản phẩm hoặc xóa sản phẩm chọn nhầm bằng button Xóa tương ứng với sản phẩm trong Panel Danh sách sản phẩm

- Bước 2: Nhập địa điểm mua tại Input Nhập nơi mua hàng trên Google map chọn kết quả chính xác tại box kết quả ngay dưới input này. Sau khi chọn Input Địa điểm nhận sẽ được tự động điền với kết quả đã chọn

- Bước 3: Chọn Tỉnh hoặc Thành phố nơi nhận hàng ở select box Tỉnh/Thành phố. Sau khi chọn Tỉnh/Thành phố Select box Quận/Huyện sẽ hiện ra các quận huyện thuộc thành phố đó, chọn quận hoặc huyện nơi nhận hàng. Sau khi chọn

Quận/Huyện Select box Xã Phường sẽ hiện ra các xã phường thuộc quận huyện đó, chọn xã hoặc phường nơi nhận hàng. Sau đó nhập đầy đủ thơng tin vào các mục Đường/Số nhà, Số điện thoại, Ghi chú nếu có),Số tiền đặt cọc. Khoảng cách sẽ được tự động tính dự vào địa điểm mua và địa điểm nhận.

- Bước 4: Nhấn vào button Đặt hàng ngay. Nếu không xảy ra lỗi đơn hàng sẽ được gửi lên server và lưu vào database. Sau đó tự động chuyển hướng sang trang xem đơn hàng này.

Một phần của tài liệu Do-Khac-Huong-CT1701 (Trang 65 - 67)