CHƯƠNG 5. THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
5.1. Giao diện phân hệ admin
Hình 5.1. Giao diện trang đăng nhập Admin Bảng 5.1. Mô tả giao diện trang đăng nhập Amin
STT Tên Loại Ghi chú
1 Username Input text Nhập username
2 Password Password Nhập mật khẩu
3 Login Button Button Nút đăng nhập
5.1.2. Giao diện trang chủ
Hình 5.2. Giao diện trang chủ Admin
131
Bảng 5.2. Mô tả giao diện trang chủ Admin
STT Tên Loại Ghi chú
1 Thanh điều hướng Navbar
2 Lợi nhuận trong hôm nay Widget Khi nhấn View detail sẽ chuyển sang System Report
3 Khách hàng mới trong hôm nay Widget Khi nhấn View detail sẽ chuyển sang Customer
4 Sản phẩm mới trong hôm nay Widget Khi nhấn View detail sẽ chuyển sang Product
5 Đơn hàng mới trong hôm nay Widget Khi nhấn View detail sẽ chuyển sang Order
6 Thống kê thu nhập hệ thống
trong tháng hiện tại Chart Khi chọn cột sẽ hiển thị chi tiết số liệu
Hình 5.3. Giao diện trang chủ Admin – Shipper
132
Hình 5.4. Giao diện trang chủ Admin – Shipper Bảng 5.3. Mô tả giao diện trang chủ Admin - Shipper
STT Tên Loại Ghi chú
1 Danh sách top sản phẩm được xem nhiều Datagrid 2 Danh sách top sản phẩm đang khuyến
mãi Datagrid
3 Danh sách top sản phẩm bán chạy Datagrid 4 Danh sách top sản phẩm được đánh giá
cao Datagrid
5.1.3. Giao diện trang Quản lý người dùng
Hình 5.5. Giao diện trang Quản lý người dùng
133
Bảng 5.4. Mô tả giao diện trang Quản lý người dùng
STT Tên Loại Ghi chú
1 Breadcrumb Breadcrumb
2 Xem chi tiết người dùng Button Khi nhấn vào sẽ hiển chi tiết thông tin 3 Cập nhật thông tin
người dùng Button Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin người dùng
4 Vô hiệu hóa/Mở vô hiệu
hóa người dùng Button Khi nhấn vào sẽ vô hiệu hóa/mở vô hiệu hóa người dùng
5 Tạo người dùng mới
Button Khi nhấn vào sẽ chuyển sang trang tạo mới người dùng
6 Back Button Khi nhấn vào sẽ trở về trang trước
Hình 5.6. Giao diện trang Thông tin chi tiết người dùng Bảng 5. 5. Mô tả giao diện trang Thông tin chi tiết người dùng
STT Tên Loại Ghi chú
1 Mã người dùng Input text Không được chỉnh sửa 2 Username Input text Không được chỉnh sửa 3 Tên người dùng Input text Không được chỉnh sửa
4 Role Input text Không được chỉnh sửa
5 Email Input text Không được chỉnh sửa
134
6 Phone Input text Không được chỉnh sửa
7 Status Input text Không được chỉnh sửa
8 Back Button Khi nhấn vào sẽ trở về trang trước
Hình 5.7. Giao diện trang Cập nhật thông tin chi tiết người dùng Bảng 5.6. Mô tả giao diện trang Cập nhật thông tin chi tiết người dùng
STT Tên Loại Ghi chú
1 Mã người dùng Input text Không được chỉnh sửa 2 Username Input text Không được chỉnh sửa 3 Tên người dùng Input text
4 Role Select Chọn phân quyền của người dùng
5 Email Input text
6 Phone Input text
7 Status Select Chọn trạng thái của người dùng
8 Save Button Lưu Thông tin chi tiết người dùng
9 Back Button Khi nhấn vào sẽ trở về trang trước
135 5.1.4. Giao diện trang Quản lý phân quyền
Hình 5.8. Giao diện trang Quản lý phân quyền Bảng 5.7. Mô tả giao diện trang Quản lý phân quyền
STT Tên Loại Ghi chú
1 Breadcrumb Breadcrumb
2 Xem chi tiết phân quyền
Button Khi nhấn vào sẽ hiện chi tiết thông tin phân quyền
3 Cập nhật thông tin phân
quyền Button Khi nhấn vào sẽ chuyển sang trang
cập nhật thông tin phân quyền 4 Tạo phân quyền mới
Button Khi nhấn vào sẽ chuyển sang trang tạo mới phân quyền
5 Back Button Khi nhấn vào sẽ trở về trang trước
136
Hình 5.9. Giao diện trang Tạo mới Phân quyền Bảng 5.8. Mô tả giao diện trang Tạo mới Phân quyền
STT Tên Loại Ghi chú
1 Tên phân quyền Input text 2 Mô tả phân quyền Input text
3 Quyền được cấp Select Chọn các quyền cấp cho phân quyền mới 4 Tạo mới Button Khi nhấn vào sẽ tạo mới phân quyền 5 Back Button Khi nhấn vào sẽ trở về trang trước
Hình 5.10. Giao diện trang Cập nhật Thông tin Phân quyền Bảng 5.9. Mô tả giao diện trang Cập nhật Thông tin Phân quyền
STT Tên Loại Ghi chú
137
1 Tên phân quyền Input text Không được chỉnh sửa 2 Mô tả phân quyền Input text
3 Quyền được cấp
Select Chọn các quyền được cấp cho phân quyền
4 Lưu lại
Button Khi nhấn vào sẽ lưu cập nhật thông tin phân quyền
5 Back Button Khi nhấn vào sẽ trở về trang trước
5.1.5. Giao diện trang Xem lịch sử hệ thống
Hình 5.11. Giao diện trang Xem lịch sử hệ thống Bảng 5.10. Mô tả giao diện trang Xem lịch sử hệ thống
STT Tên Loại Ghi chú
1 Breadcrumb Breadcrumb
2 Back Button Khi nhấn vào sẽ trở về trang trước
138 5.1.6. Giao diện trang Quản lý đơn hàng
Hình 5.12. Giao diện trang Quản lý đơn hàng Bảng 5.11. Mô tả giao diện trang Quản lý đơn hàng
STT Tên Loại Ghi chú
1 Breadcrumb Breadcrumb
2 Xem chi tiết đơn hàng
Button Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết đơn hàng
3 Phê duyệt đơn hàng
Button Khi nhấn vào sẽ chuyển tới trang cập nhật trạng thái đơn hàng
4 Back Button Khi nhấn vào sẽ trở về trang trước
139
Hình 5.13. Giao diện trang Chi tiết thông tin đơn hàng Bảng 5.12. Mô tả giao diện trang Chi tiết thông tin đơn hàng
STT Tên Loại Ghi chú
1 Mã đơn hàng Input text Không được chỉnh sửa 2 Mã khách hàng Input text Không được chỉnh sửa 3 Tên khách hàng Input text Không được chỉnh sửa 4 Số điện thoại khách hàng Input text Không được chỉnh sửa 5 Nhóm khách hàng Input text Không được chỉnh sửa 6 Email khách hàng Input text Không được chỉnh sửa 7 Tên người nhận Input text Không được chỉnh sửa 8 Số điện thoại người nhận Input text Không được chỉnh sửa 9 Địa chỉ cụ thể Input text Không được chỉnh sửa 10 Xã/phường giao hàng Input text Không được chỉnh sửa 11 Huyện/Quận giao hàng Input text Không được chỉnh sửa 12 Tỉnh/Thành phố giao hàng Input text Không được chỉnh sửa 13 Phương thức thanh toán Input text Không được chỉnh sửa 14 Trạng thái của đơn hàng Input text Không được chỉnh sửa 15 Danh sách chi tiết đơn hàng Datagrid
16 Chi tiết giá đơn hàng Label
140
17 Back Button Khi nhấn vào sẽ trở về trang
trước
Hình 5.14. Giao diện trang Cập nhật Chi tiết thông tin đơn hàng Bảng 5.13. Mô tả giao diện trang Cập nhật Chi tiết thông tin đơn hàng
STT Tên Loại Ghi chú
1 Mã đơn hàng Input text Không được chỉnh sửa 2 Mã khách hàng Input text Không được chỉnh sửa 3 Tên khách hàng Input text Không được chỉnh sửa 4 Số điện thoại khách hàng Input text Không được chỉnh sửa 5 Nhóm khách hàng Input text Không được chỉnh sửa 6 Email khách hàng Input text Không được chỉnh sửa 7 Tên người nhận Input text Không được chỉnh sửa 8 Số điện thoại người nhận Input text Không được chỉnh sửa 9 Địa chỉ cụ thể Input text Không được chỉnh sửa 10 Xã/phường giao hàng Input text Không được chỉnh sửa 11 Huyện/Quận giao hàng Input text Không được chỉnh sửa 12 Tỉnh/Thành phố giao hàng Input text Không được chỉnh sửa 13 Phương thức thanh toán Input text Không được chỉnh sửa
141 14 Trạng thái mới của đơn
hàng Select Chọn trạng thái mới cần cập nhật
5.1.7. Giao diện trang Quản lý vận chuyển – Shipper
Hình 5.15. Giao diện trang Quản lý vận chuyển - Shipper Bảng 5.14. Mô tả giao diện trang Quản lý vận chuyển - Shipper
ST T
Tên Loại Ghi chú
1 Breadcrumb Breadcrumb
2 Xem thông tin chi tiết vận
chuyển đơn hàng Button
Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết vận chuyển đơn hàng
3 Chuyển trạng thái vận
chuyển Button
Khi nhấn vào sẽ chuyển trạng thái vận chuyển sang trạng thái tiếp theo
4 Back Button Khi nhấn vào sẽ trở về trang trước
142 5.1.8. Giao diện trang Quản lý mã khuyến mãi
Hình 5.16. Giao diện trang Quản lý mã khuyến mãi Bảng 5.15. Mô tả giao diện trang Quản lý mã khuyến mãi
STT Tên Loại Ghi chú
1 Breadcrumb Breadcrumb
2 Xem thông tin chi tiết mã
khuyến mãi Button Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết mã khuyến mãi 3 Cập nhật thông tin chi
tiết mã khuyến mãi Button
Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin chi tiết mã khuyến mãi
4 Vô hiệu hoá/Bỏ vô hiệu hoá thông tin chi tiết mã khuyến mãi
Button
Khi nhấn vào sẽ vô hiệu hoá hoặc bỏ vô hiệu hoá thông tin chi tiết mã khuyến mãi
5 Xoá thông tin chi tiết mã
khuyến mãi Button Khi nhấn vào sẽ xoá thông tin chi tiết mã khuyến mãi
6 Thêm mã khuyến mãi
Button Khi nhấn vào sẽ chuyển sang trang thêm mã khuyến mãi
7 Back Button Khi nhấn vào sẽ trở về trang trước
143
Hình 5.17. Giao diện trang Thông tin chi tiết mã khuyến mãi Bảng 5.16. Mô tả giao diện trang Thông tin chi tiết mã khuyến mãi
STT Tên Loại Ghi chú
1 Mã chương trình khuyến mãi Input text Không được chỉnh sửa 2 Mã khuyến mãi Input text Không được chỉnh sửa 3 Loại khuyến mãi Input text Không được chỉnh sửa 4 Mô tả chương trình khuyến
mãi Input text Không được chỉnh sửa
5 Giá trị khuyến mãi Number Không được chỉnh sửa 6 Giá trị đơn hàng tối thiểu Number Không được chỉnh sửa 7 Giá trị giảm tối đa Number Không được chỉnh sửa
8 Ngày bắt đầu Date Không được chỉnh sửa
9 Ngày kết thúc Date Không được chỉnh sửa
10 Giới hạn sử dụng khuyến mãi
Number Không được chỉnh sửa 11 Số lượt đã sử dụng khuyến
mãi Number Không được chỉnh sửa
12 Trạng thái Input text Không được chỉnh sửa
13 Back Button Khi nhấn vào sẽ trở về trang trước
144
Hình 5.18. Giao diện trang Cập nhật thông tin chi tiết mã khuyến mãi Bảng 5.17. Mô tả giao diện trang Cập nhật thông tin chi tiết mã khuyến mãi
STT Tên Loại Ghi chú
1 Mã chương trình khuyến mãi Input text Không được chỉnh sửa
2 Mã khuyến mãi Input text
3 Loại khuyến mãi Input text Không được chỉnh sửa 4 Mô tả chương trình khuyến mãi Input text Không được chỉnh sửa 5 Giá trị khuyến mãi Number Không được chỉnh sửa 6 Giá trị đơn hàng tối thiểu Number Không được chỉnh sửa 7 Giá trị giảm tối đa Number Không được chỉnh sử
8 Ngày bắt đầu Date Không được chỉnh sửa
9 Ngày kết thúc Date Không được chỉnh sửa
10 Giới hạn sử dụng khuyến mãi Number
11 Số lượt đã sử dụng khuyến mãi Number Không được chỉnh sửa
12 Trạng thái Input text Không được chỉnh sửa
13 Lưu lại
Button Lưu Cập nhật thông tin chi tiết khuyến mãi
14 Back
Button Khi nhấn vào sẽ trở về trang trước
145 5.1.9. Giao diện trang Quản lý nhóm sản phẩm
Hình 5.19. Giao diện trang Quản lý nhóm sản phẩm Bảng 5.18. Mô tả giao diện trang Quản lý nhóm sản phẩm
STT Tên Loại Ghi chú
1 Breadcrumb Breadcrumb
2 Xem chi tiết nhóm sản
phẩm Button Khi nhấn vào sẽ chuyển sang trang
thông tin chi tiết nhóm sản phẩm 3 Cập nhật thông tin chi tiết
nhóm sản phẩm Button Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin nhóm sản phẩm
4 Back Button Khi nhấn vào sẽ trở về trang trước
146
Hình 5.20. Giao diện trang Thông tin chi tiết nhóm sản phẩm Bảng 5.19. Mô tả giao diện trang Thông tin chi tiết nhóm sản phẩm
ST
T Tên Loại Ghi chú
1 Tên nhóm sản phẩm Text Không được chỉnh sửa
2 Mã nhóm sản phẩm Input text Không được chỉnh sửa
3 Tên nhóm sản phẩm Input text Không được chỉnh sửa 4 Trạng thái nhóm sản phẩm Input text Không được chỉnh sửa 5 Thông tin nhóm sản phẩm Widget Không được chỉnh sửa
6 Back Button Khi nhấn vào sẽ trở về
trang trước
147
Hình 5.21. Giao diện trang Cập nhật Thông tin chi tiết nhóm sản phẩm Bảng 5.20. Mô tả giao diện trang Cập nhật Thông tin chi tiết nhóm sản phẩm
STT Tên Loại Ghi chú
1 Tên nhóm sản phẩm Text
2 Mã nhóm sản phẩm Input text Không được chỉnh sửa 3 Tên nhóm sản phẩm Input text
4 Trạng thái nhóm sản phẩm Select Chọn trạng thái của nhóm sản phẩm
5 Thông tin nhóm sản phẩm Widget Không được chỉnh sửa
6 Lưu lại Button Lưu lại Cập nhật thông tin chi
tiết nhóm sản phẩm
7 Back Button Khi nhấn vào sẽ trở về trang
trước
148 5.1.10. Giao diện trang Quản lý sản phẩm
Hình 5.22. Giao diện trang Quản lý sản phẩm Bảng 5.21. Mô tả giao diện trang Quản lý sản phẩm
STT Tên Loại Ghi chú
1 Breadcrumb Breadcrumb
2 Xem chi tiết đơn hàng
Button Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết sản phẩm
3 Cập nhật thông tin phân
quyền Button Khi nhấn vào sẽ chuyển sang trang
cập nhật thông tin sản phẩm 4 Vô hiệu hoá/Bỏ vô hiệu
hoá sản phẩm Button Khi nhấn vào sẽ vô hiệu hoá hoặc bỏ vô hiệu hoá sản phẩm
5 Xoá sản phẩm Button Khi nhấn vào sẽ xoá sản phẩm 6 Thêm sản phẩm
Button Khi nhấn vào sẽ chuyển sang trang tạo mới sản phẩm
7 Back Button Khi nhấn vào sẽ trở về trang trước
149
5.1.11. Giao diện trang Quản lý nhóm khách hàng
Hình 5.23. Giao diện trang Quản lý nhóm khách hàng Bảng 5.22. Mô tả giao diện trang Quản lý nhóm khách hàng
STT Tên Loại Ghi chú
1 Breadcrumb Breadcrumb
2 Xem chi tiết nhóm khách
hàng Button Khi nhấn vào sẽ chuyển sang trang
thông tin chi tiết nhóm khách hàng 3 Cập nhật thông tin chi tiết
nhóm khách hàng Button
Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin chi tiết nhóm khách hàng
4 Back Button Khi nhấn vào sẽ trở về trang trước
150
Hình 5.24. Giao diện trang Thông tin chi tiết nhóm khách hàng Bảng 5.23. Mô tả giao diện trang Thông tin chi tiết nhóm khách hàng
STT Tên Loại Ghi chú
1 Mã nhóm khách hàng Input text Không được chỉnh sửa 2 Tên nhóm khách hàng Input text Không được chỉnh sửa 3 Phần trăm giảm giá của
nhóm khách hàng Number Không được chỉnh sửa
4 Back Button Khi nhấn vào sẽ trở về trang trước
Hình 5.25. Giao diện trang Cập nhật Thông tin chi tiết nhóm khách hàng Bảng 5.24. Mô tả giao diện trang Cập nhật Thông tin chi tiết nhóm khách hàng
STT Tên Loại Ghi chú
1 Mã nhóm khách hàng Input text Không được chỉnh sửa
151
2 Tên nhóm khách hàng Input text Không được chỉnh sửa 3 Phần trăm giảm giá của
nhóm khách hàng Number
4 Lưu lại
Button Khi nhấn vào sẽ lưu lại cập nhật thông tin chi tiết nhóm khách hàng
5 Back Button Khi nhấn vào sẽ trở về trang trước
5.1.12. Giao diện trang Quản lý khách hàng
Hình 5.26. Giao diện trang Quản lý khách hàng Bảng 5.25. Mô tả giao diện trang Quản lý khách hàng
STT Tên Loại Ghi chú
1 Breadcrumb Breadcrumb
2 Xem chi tiết khách hàng
Button Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết nhóm khách hàng 3 Cập nhật thông tin chi tiết
khách hàng Button
Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin chi tiết nhóm khách hàng
4 Vô hiệu hoá/Bỏ vô hiệu
hoá khách hàng Button Khi nhấn vào sẽ vô hiệu hoá hoặc bỏ vô hiệu hoá khách hàng
5 Back Button Khi nhấn vào sẽ trở về trang trước
152
Hình 5.27. Giao diện trang Thông tin chi tiết Khách hàng Bảng 5.26. Mô tả giao diện trang Thông tin chi tiết Khách hàng
STT Tên Loại Ghi chú
1 Mã khách hàng Input text Không được chỉnh sửa 2 Tên khách hàng Input text Không được chỉnh sửa 3 Tên đăng nhập Input text Không được chỉnh sửa 4 Nhóm khách hàng Input text Không được chỉnh sửa 5 Email của khách hàng Input text Không được chỉnh sửa 6 Số điện thoại khách hàng Input text Không được chỉnh sửa
7 Giới tính Input text Không được chỉnh sử
8 Ngày sinh Date Không được chỉnh sửa
9 Địa chỉ cụ thể Input text Không được chỉnh sửa
10 Xã/phường Input text Không được chỉnh sửa
11 Huyện/Quận Input text Không được chỉnh sửa 12 Tỉnh/Thành phố Input text Không được chỉnh sửa 13 Trạng thái khách hàng Input text Không được chỉnh sửa
14 Back Button Khi nhấn vào sẽ trở về trang trước
153
Hình 5.28. Giao diện trang Cập nhật Thông tin chi tiết Khách hàng Bảng 5.27. Mô tả giao diện trang Cập nhật Thông tin chi tiết Khách hàng
STT Tên Loại Ghi chú
1 Mã khách hàng Input text Không được chỉnh sửa 2 Tên khách hàng Input text Không được chỉnh sửa 3 Tên đăng nhập Input text Không được chỉnh sửa 4 Nhóm khách hàng Input text Không được chỉnh sửa 5 Email của khách hàng Input text Không được chỉnh sửa 6 Số điện thoại khách hàng Input text Không được chỉnh sửa
7 Giới tính Input text Không được chỉnh sử
8 Ngày sinh Date Không được chỉnh sửa
9 Địa chỉ cụ thể Input text Không được chỉnh sửa
10 Xã/phường Input text Không được chỉnh sửa
11 Huyện/Quận Input text Không được chỉnh sửa 12 Tỉnh/Thành phố Input text Không được chỉnh sửa
13 Trạng thái khách hàng Select Chọn trạng thái của khách hàng 14 Lưu lại
Button Khi nhấn vào sẽ lưu lại cập nhật thông tin chi tiết khách hàng
15 Back Button Khi nhấn vào sẽ trở về trang trước
154 5.1.13. Giao diện trang Quản lý kho
Hình 5.29. Giao diện trang Quản lý kho Bảng 5.28. Mô tả giao diện trang Quản lý kho
STT Tên Loại Ghi chú
1 Breadcrumb Breadcrumb
2 Nhập sản phẩm
Button Khi nhấn vào sẽ chuyển sang trang nhập thông tin sản phẩm vào kho
3 Back Button Khi nhấn vào sẽ trở về trang trước
Hình 5.30. Giao diện trang Nhập Thông tin sản phẩm vào kho
155
Bảng 5.29. Mô tả giao diện trang Nhập Thông tin sản phẩm vào kho
STT Tên Loại Ghi chú
1 Mã sản phẩm Select
2 Tên sản phẩm Input text
3 Thuộc tính sản phẩm Input text
4 Số lượng Number
5 Thêm thông tin sản phẩm hiện
tại vào kho Button Khi nhấn vào sẽ thêm sản
phẩm vào kho 6 Thông tin chi tiết sản phẩm nhập
kho Datagrid Không được chỉnh sửa
7 Lưu lại
Button
Khi nhấn vào sẽ lưu lại các thông tin chi tiết sản phẩm nhập kho
8 Back
Button Khi nhấn vào sẽ trở về trang trước
5.1.14. Giao diện trang Báo cáo doanh thu
Hình 5.31. Giao diện trang Báo cáo doanh thu Bảng 5.30. Mô tả giao diện trang Báo cáo doanh thu
STT Tên Loại Ghi chú
1 Breadcrumb Breadcrumb