4.4.1. Sơ đồ logic
Hình 4.29 Sơ đồ dữ liệu
4.4.2. Danh sách các bảng dữ liệu trong sơ đồ
STT TÊN BẢNG DỮ LIỆU Ý NGHĨA GHI CHÚ
1 product Dữ liệu về sản phẩm 2 menu Dữ liệu về danh mục
70
3 customer Dữ liệu khách hàng 4 order Dữ liệu đơn đặt hàng
5 order_detail Dữ liệu chi tiết đơn đặt hàng 6 shipping Dữ liệu giao hàng
7 payment Dữ liệu thanh toán
8 comment Dữ liệu bình luận sản phẩm 9 voucher Dữ liệu mã khuyến mãi
10 use_voucer Dữ liệu sử dụng mã khuyến mãi 11 rotate Dữ liệu vòng quay may mắn 12 staff Dữ liệu nhân viên
13 warehouse_goods Dữ liệu kho hàng 14 suplier Dữ liệu nhà cung cấp 15 staff_log Dữ liệu nhật kí nhân viên
Bảng 4.18 Danh sách các bảng dữ liệu
4.4.3. Mô tả từng bảng dữ liệu 4.4.3.1. Product 4.4.3.1. Product
STT TÊN
THUỘC TÍNH
KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
1 ID int 20 ký tự Mã sản phẩn 2 name string 255 ký tự Tên sản phẩm 3 description string 255 ký tự Mô tả sản phẩm 4 price int 11 ký tự Giá sản phẩm 5 menu_id int 20 ký tự Mã danh mục
71
6 thumb string 255 ký tự Ảnh 7 active string 255 ký tự Trạng thái
Bảng 4.19 Table “product”
4.4.3.2. Menu
STT TÊN
THUỘC TÍNH
KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
1 ID int 20 ký tự Mã danh mục 2 name string 255 ký tự Tên
3 description string 255 ký tự Mô tả 4 active string 255 ký tự Trạng thái
Bảng 4.20 Table “menu”
4.4.3.3. Customer STT TÊN THUỘC
TÍNH
KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
1 ID int 20 ký tự Mã khách hàng 2 name string 255 ký tự Họ tên
3 username string 100 ký tự Tài khoản 4 passsword string 100 ký tự Mật khẩu 5 address string 255 ký tự Địa chỉ 6 phone string 100 ký tự Điện thoại 7 email string 255 ký tự Email
8 avatar string 255 ký tự Ảnh đại diện
72
4.4.3.4. Order
STT TÊN
THUỘC TÍNH
KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
1 ID int 20 ký tự Mã đơn đặt hàng 2 status string 255 ký tự Trạng thái
3 total int 11 ký tự Tổng tiền 4 created_at datetime Ngày đặt
Bảng 4.22 Table “order”
4.4.3.5. Order Detail
STT TÊN
THUỘC TÍNH
KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
1 ID int 20 ký tự Mã chi tiết đơn hàng 2 name string 255 ký tự Tên sản phẩm
3 quantity int 11 ký tự Số lượng sản phẩm 4 price int 11 ký tự Giá sản phẩm
Bảng 4.23 Table “order detail”
4.4.3.6. Shipping
STT TÊN
THUỘC TÍNH
KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
1 ID int 20 ký tự Mã đơn đặt hàng 2 name string 255 ký tự Họ tên người nhận 3 address string 255 ký tự Địa chỉ người nhận 4 phone string 100 ký tự Số điện thoại
73
5 email string 100 ký tự Email người nhận 6 note string 255 ký tự Ghi Chú
7 status string 255 ký tự Trạng thái đơn hàng
Bảng 4.24 Table “shipping”
4.4.3.7. Payment
STT TÊN
THUỘC TÍNH
KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
1 ID int 20 ký tự Mã thanh toán 2 method string 255 ký tự Phương thức
thanh toán
3 status string 255 ký tự Trạng thái thanh toán
Bảng 4.25 Table "payment"
4.4.3.8. Comment
STT TÊN
THUỘC TÍNH
KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
1 ID int 20 ký tự Mã bình luận 2 content string 255 ký tự Nội dung bình luận 3 created_at datetime 255 ký tự Thời gian bình luận
Bảng 4.26 Table "comment" 4.4.3.9. Voucher STT TÊN THUỘC TÍNH KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
74
2 code string 255 ký tự Mã voucher 3 value int 11 ký tự Giá trị giảm giá 4 order_min string 255 ký tự Giá trị nhỏ nhất đơn
hàng
5 order_max int 11 ký tự Giá trị lớn nhất đơn hàng
6 quantity int 11 ký tự Số lượng mã giảm giá
7 quantity_per_account string 255 ký tự Số lượng mỗi tài khoản
8 date_start string 255 ký tự Ngày bắt đầu 9 date_end string 255 ký tự Ngày kết thúc 10 describe int 11 ký tự Mô tả
11 customer_type int 11 ký tự Loại khách hàng
Bảng 4.27 Table "voucher" 4.4.3.10. Use_voucher STT TÊN THUỘC TÍNH KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ 1 ID int 20 ký tự Mã sử dụng 2 customer_id int 20 ký tự Mã khách hàng 3 order_id int 20 ký tự Mã đơn đặt hàng 4 voucher_id int 20 ký tự Mã voucher 5 use_at datetime Thời gian sử dụng
75 4.4.3.11. Rotate STT TÊN THUỘC TÍNH KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ 1 ID int 20 ký tự Mã quay vòng 2 customer_id int 20 ký tự Mã khách hàng 3 voucher_id int 20 ký tự Mã voucher
4 route_at date_time Thời gian quay vòng
Bảng 4.29 Table "rotate"
4.4.3.12. Staff
STT TÊN
THUỘC TÍNH
KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
1 ID int 20 ký tự Mã nhân viên 2 name string 255 ký tự Họ tên
3 username string 100 ký tự Tài khoản 4 passsword string 100 ký tự Mật khẩu 5 address string 255 ký tự Địa chỉ 6 phone string 100 ký tự Điện thoại 7 email string 255 ký tự Email
Bảng 4.30 Table staff 4.4.3.13. Warehouse_goods STT TÊN THUỘC TÍNH KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
1 ID int 20 ký tự Mã hàng trong kho 2 inventory_quantity int 11 ký tự Số lượng tồn kho
76
3 delivery_quantity int 11 ký tự Số lượng đang giao 4 wait_delivery_quantity int 11 ký tự Số lượng đợi giao
Bảng 4.31 Table "Warehouse_goods"
4.4.3.14. Suppiler
STT TÊN
THUỘC TÍNH
KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ
1 ID int 20 ký tự Mã nhà cung cấp 2 name string 255 ký tự Họ tên
3 address string 255 ký tự Địa chỉ 4 phone string 100 ký tự Điện thoại 5 email string 255 ký tự Email
Bảng 4.32 Table "supplier" 4.4.3.15. Staff_log STT TÊN THUỘC TÍNH KIỂU RÀNG BUỘC Ý NGHĨA GHI CHÚ 1 ID int 20 ký tự Mã nhật ký nhân viên
2 action int 11 ký tự Hoạt động
3 created_at datetime Thời gian hoạt động
77 Chương 5. XÂY DỰNG ỨNG DỤNG 5.1. Website người dùng 5.1.1. Màn hình trang chủ 5.1.1.1. Giao diện Hình 5.1 Màn hình trang chủ
78
5.1.1.2. Mô tả
• Đây là giao diện mặc định khi truy cập trang web của người dùng. Giao diện hiển thị thông tin, banner của cửa hàng, thông tin các sản phẩm mới và các sản phẩm bán chạy.
• Thanh điều hướng (top navigation) đặt ở đầu giao diện trang chủ nói chung và toàn bộ website người dùng nói riêng, giúp điều hướng tới những thành phần chính của website người dùng.
- Link “Đăng nhập/Đăng ký”: Điều hướng tới trang Đăng nhập, đăng ký. - Link “Đăng xuất”: Đăng xuất tài khoản.
- Link “Trang Chủ”: Điều hướng tới Trang chủ.
- Link “Mua Hàng”: Điều hướng tới trang Danh sách sản phẩm.
- Link “Vòng quay may mắn”: Điều hướng tới trang Vòng quay may mắn. - Link “Tài khoản”: Điều hướng tới trang Thông tin tài khoản.
79
5.1.2. Màn hình đăng nhập, đăng ký 5.1.2.1. Giao diện
Hình 5.2 Màn hình đăng nhập, đăng ký
5.1.2.2. Mô tả
• Đây là giao diện giúp người dùng đăng nhập hoặc đăng ký (nếu chưa có tài khoản).
• Sau khi nhập thông tin đăng nhập hoặc đăng ký thành công, hệ thống sẽ thông báo thành công và chuyền hướng sang trang chủ.
• Nếu đăng nhập hoặc đăng ký thất bại, hệ thống sẽ thông báo lỗi, nguyên nhân thất bại và người dùng sẽ thao tác lại.
80
5.1.3. Màn hình xem danh sách sản phẩm 5.1.3.1. Giao diện
Hình 5.3 Màn hình xem danh sách sản phẩm
5.1.3.2. Mô tả
• Đây là giao diện giúp người dùng xem danh sách sản phẩm. • Các thao tác người dùng có thể trải nghiệm trên giao diện:
- Link “Danh mục”: Người dùng chọn các sản phẩm theo danh mục. - Thanh “Tìm kiếm”: Người dùng tìm sản phẩm bằng nhiều cụm từ. - Button “Yêu thích”: Thêm sản phẩm vào danh sách yêu thích.
81
- Button “Thêm giỏ hàng”: Thêm sản phẩm vào giỏ hàng.
• Giao diện này được xử lý bằng Ajax và API, không load lại trang khi tìm sản phẩm giúp tăng trải nghiệm cho người dùng.
5.1.4. Màn hình xem chi tiết sản phẩm 5.1.4.1. Giao diện 5.1.4.1. Giao diện
Hình 5.4 Màn hình xem chi tiết sản phẩm
5.1.4.2. Mô tả
• Đây là giao diện giúp người dùng xem chi tiết thông tin sản phẩm. • Các thao tác người dùng có thể trải nghiệm trên giao diện:
- Button “Thêm giỏ hàng”: Người dùng thêm sản phẩm vào giỏ hàng. - Button “Yêu thích”: Người dùng thêm sản phẩm vào yêu thích.
- Tab “Thông tin thực phẩm”: Người dùng xem thông tin về thành phần, mùa vụ, đóng gói, hạn sử dụng, xuất sứ của sản phẩm.
82
• Nếu người dùng thêm giỏ hàng thành công, hệ thống sẽ thông báo thành công. Ngược lại, khi người dùng không nhập số lượng sản phẩm, hệ thống sẽ thông báo thất bại.
5.1.5. Màn hình giỏ hàng 5.1.5.1. Giao diện 5.1.5.1. Giao diện
Hình 5.5 Màn hình giỏ hàng
5.1.5.2. Mô tả
• Đây là giao diện giúp người dùng quản lý giỏ hàng.
• Các thao tác người dùng có thể trải nghiệm trên giao diện: - Button “Cập nhật”: Người dùng cập nhật số lượng sản phẩm. - Button “Xóa”: Người dùng xóa sản phẩm trong giỏ hàng. - Form text “Mã giảm giá”: Người dùng nhập mã giảm giá.
- Button “Thanh toán”: Hệ thống chuyển hướng sang trang Thanh toán giỏ hàng
83
• Nếu người dùng nhập thông tin chính xác và chọn Thanh toán, hệ thống sẽ thông báo thành công. Và ngược lại, khi người dùng không nhập số lượng sản phẩm hoặc mã giảm giá sai, hệ thống sẽ thông báo thất bại.
5.1.6. Màn hình nhập thông tin thanh toán 5.1.6.1. Giao diện 5.1.6.1. Giao diện
Hình 5.6 Màn hình nhập thông tin thanh toán
5.1.6.2. Mô tả
• Đây là giao diện giúp người dùng nhập thông tin thanh toán và đặt hàng. • Các thao tác người dùng có thể trải nghiệm trên giao diện:
- Form “Thông tin giao hàng”: Người dùng nhập thông tin giao hàng. - Input radio “Phương thức thanh toán”: Người dùng chọn phương thức
thanh toán.
- Button “Đặt hàng”: Người dùng đặt hàng.
• Người dùng kiểm tra kĩ giỏ hàng, nhập thông tin và chọn Thanh toán, hệ thống sẽ thông báo thành công và lưu lại thông tin. Ngoài ra, hệ thống sẽ gửi mail cho người dùng.
84
• Nếu người dùng nhập không đầy đủ thông tin hoặc thông tin không chính xác, hệ thống sẽ thông báo thất bại và lỗi cho người dùng.
5.1.7. Màn hình vòng quay may mắn 5.1.7.1. Giao diện 5.1.7.1. Giao diện
Hình 5.7 Màn hình vòng quay may mắn
5.1.7.2. Mô tả
• Đây là giao diện giúp người dùng quay vòng quay may mắn. • Các thao tác người dùng có thể trải nghiệm trên giao diện:
- Button “Quay ngay”: Người dùng quay vòng quay.
- Button “Tiếp tục quay”: Người dùng tiếp tục quay và vòng quay sẽ được tạo lại.
85
• Người dùng quay thành công thì sẽ được nhận một mã khuyến mãi ứng với số tiền quay được. Mã khuyến mãi này sẽ được hiển thị trong danh sách mã khuyến mãi của tài khoản.
• Giao diện này sử dụng công nghệ jQuery, Ajax và tham khảo qua website:
https://www.w3schools.com/jquery/jquery_animate.asp
5.1.8. Màn hình xem thông tin tài khoản 5.1.8.1. Giao diện 5.1.8.1. Giao diện
Hình 5.8 Màn hình xem thông tin tài khoản
5.1.8.2. Mô tả
86
• Các thao tác người dùng có thể trải nghiệm trên giao diện:
- Form “Thông tin tài khoản”: Người dùng nhập thông tin tài khoản. - Button “Cập nhật”: Thông tin tài khoản được cập nhật.
• Nếu người dùng nhập không đầy đủ thông tin hoặc thông tin không chính xác, hệ thống sẽ thông báo thất bại và lỗi cho người dùng.
5.1.9. Màn hình danh sách đặt hàng 5.1.9.1. Giao diện 5.1.9.1. Giao diện
Hình 5.9 Màn hình danh sách đặt hàng
5.1.9.2. Mô tả
• Đây là giao diện giúp người dùng xem và quản lý lí lịch sử đặt hàng. • Các thao tác người dùng có thể trải nghiệm trên giao diện:
- Button “Xem đơn hàng”: Người dùng xem chi tiết đơn hàng. - Button “Hủy đơn hàng”: Người dùng hủy đơn hàng.
- Button “In đơn hàng”: Người dùng in đơn hàng.
• Người dùng chỉ Hủy đơn khi đơn hàng đang ở tình trạng “Đang xử lý”. • Người dùng chỉ In đơn hàng khi đơn hàng đang ở tình trạng “Đã nhận
87
5.1.10. Màn hình danh sách mã khuyến mãi 5.1.10.1. Giao diện 5.1.10.1. Giao diện
Hình 5.10 Màn hình danh sách mã khuyến mãi
5.1.10.2. Mô tả
• Đây là giao diện giúp người dùng xem danh sách và copy mã khuyến mãi mà tài khoản có thể sử dụng.
5.1.11. Màn hình danh sách sản phẩm yêu thích 5.1.11.1. Giao diện 5.1.11.1. Giao diện
88
5.1.11.1. Mô tả
• Đây là giao diện giúp người dùng xem sản phẩm yêu thích đến người dùng nhanh chóng mua sắm.
• Các thao tác người dùng có thể trải nghiệm trên giao diện: - Button “Yêu thích”: Người dùng thêm sản phẩm yêu thích. - Button “Bỏ yêu thích”: Người dùng bỏ sản phẩm yêu thích.
5.2. Website nhân viên
5.2.1. Màn hình đăng nhập 5.2.1.1. Giao diện 5.2.1.1. Giao diện
Hình 5.12 Màn hình đăng nhập (nhân viên)
5.2.1.2. Mô tả
• Đây là giao diện cho người quản trị, nhân viên đăng nhập vào hệ thống website nhân viên.
• Nhân viên nhập email và mật khẩu, chọn button “Đăng nhập”.
• Nếu thông tin đăng nhập chính xác, nhân viên sẽ được chuyển hướng vào trang chủ hệ thống website nhân viên. Ngược lại, nhân viên phải đăng nhập lại.
89
5.2.2. Màn hình trang chủ 5.2.2.1. Giao diện 5.2.2.1. Giao diện
Hình 5.13 Màn hình trang chủ (nhân viên)
5.2.2.2. Mô tả
• Đây là giao diện mặc định khi truy cập trang web của nhân viên. Giao diện hiển thị thống kê cho các thông tin quan trọng của cửa hàng, số lượng các dữ liệu cần thiết.
• Thanh điều hướng (side navigation) đặt ở thanh bên trái trang chủ nói chung và toàn bộ website nhân viên nói riêng, giúp điều hướng tới những thành phần chính của website nhân viên.
- Link “Danh mục”: Điều hướng tới trang Quản lý danh mục. - Link “Sản phẩm”: Điều hướng tới trang Quản lý sản phẩm. - Link “Mã khuyến mãi”: Điều hướng tới trang Mã khuyến mãi. - Link “Khách hàng”: Điều hướng tới trang Quản lý khách hàng.
90
- Link “Đơn đặt hàng”: Điều hướng tới trang Quản lý đơn đặt hàng. - Link “Kho hàng”: Điều hướng tới trang Quản lý kho hàng.
- Link “Thống kê doanh thu”: Điều hướng tới trang Thống kê doanh thu. - Link “Nhà cung cấp”: Điều hướng tới trang Quản lý nhà cung cấp. - Link “Nhân viên”: Điều hướng tới trang Quản lý nhân viên.
• Danh sách thả xuống khi rê chuột vào avatar ở phía bên phải màn hình hiển thị các thông tin để nhân viên quản lý tài khoản của mình.
- Link “Tài khoản”: Điều hướng tới trang Quản lý tài khoản. - Link “Đổi mật khẩu”: Điều hướng tới trang Đổi mật khẩu.
91
5.2.3. Màn hình danh sách danh mục 5.2.3.1. Giao diện 5.2.3.1. Giao diện
Hình 5.15 Màn hình danh sách danh mục
5.2.3.2. Mô tả
• Đây là giao diện giúp nhân viên xem danh sách danh mục và thực hiện các thao tác quản lý danh mục.
• Các thao tác nhân viên có thể trải nghiệm trên giao diện: - Button “Bộ lọc”: Hiển thị bộ lọc danh mục.
- Button “Tạo mới”: Chuyển hướng đến trang tạo mới danh mục. - Thanh “Tìm kiếm”: Tìm kiếm danh mục.
- Button “Cập nhật”: Chuyển hướng đến trang cập nhật danh mục. - Button “Delete”: Xóa danh mục.
• Khi xóa danh mục, hệ thống sẽ xác nhận lại nhân viên có chắc chắn xóa hay không.
• Giao diện sử dụng công nghệ DataTables giúp cho việc truy cập dữ liệu trong các bảng HTML.
92
5.2.4. Màn hình tạo mới danh mục 5.2.4.1. Giao diện