Hệ thống này cho phép người dùng tìm kiếm sản phẩm một cách dễ dàng, cập nhật những thông tin, ưu đãi mớicủa cửa hàng, đồng thời giúp các nhà quản lý theo dõi và xử lý đơn hàng hiệu quả.
ĐỀ TÀ
Nghiệp vụ hệ thống
- Quản lý sản phẩm: cung cấp giao diện để thêm, sửa, xóa thông tin sản phẩm Điều này bao gồm việc quản lý các danh mục sản phẩm, hình ảnh, giá cả và thông tin mô tả.
- Quản lý ưu đãi: Hệ thống hỗ trợ tạo và quản lý các chương trình ưu đãi, bao gồm giảm giá, khuyến mãi và mã giảm giá Điều này giúp kích thích nhu cầu mua sắm và tăng doanh số
Mục đích yêu cầu
- Tăng cường trải nghiệm người dùng khi tìm kiếm sản phẩm, dịch vụ và các ưu đãi trên trang web.
- Đáp ứng nhu cầu tìm kiếm địa điểm và các chương trình khuyến mãi.
- Cung cấp hệ thống trực tuyến quản lý sản phẩm và chương trình khuyến mãi để dễ dàng, tạo sự tiện lợi tối đa cho khách hàng.
- Hệ thống quản lý siêu thị nhỏ cần thỏa mãn được những tiêu chí sau đây:
+ Logo: Dễ hiểu, dễ nhớ.
+ Nội dung website: Nội dung chi tiết, đầy đủ ý nghĩa.
+ Đồ họa: Đẹp mắt, gọn nhẹ, mang đính đồng bộ.
+ Chức năng: Đơn giản, dễ thực hiện cho người dùng, chính xác.
+ Linh động: Sử dụng được trên nhiều thiết bị (điện thoại, laptop, máy tính bảng, ).
KHẢO SÁT VÀ PHÂN TÍCH
1.Các trang web cùng chủ đề:
- Các trang web khác như “Circle K”, “FamilyMart”, “Ministop”, có chủ đề tương tự Các trang web này thường cung cấp thông tin về sản phẩm, chương trình khuyến mãi và địa điểm cửa hàng.
2.Các đối tượng sử dụng :
- Khách hàng cá nhân: Tìm kiếm sản phẩm, địa điểm cửa hàng và khuyến mãi.
- Nhân viên nội bộ: Quản lý hệ thống sản phẩm, đơn hàng, ưu đãi, tuyển nhân sự cho cửa hàng.
- Đối tác/nhà cung cấp: Trao đổi về sản phẩm và các chương trình.
3.Trình bày chức năng cơ bản cho từng đối tượng :
- Khách hàng cá nhân: Tìm kiếm đại chỉ cửa hàng, xem sản phẩm và các chương trình khuyến mãi.
- Nhân viên nội bộ: Quản lý hệ thống sản phẩm, đơn hàng, ưu đãi, tuyển nhân sự cho cửa
- Đối tác, nhà cung cấp: Cập nhật thông tin sản phẩm và xem các chương trình liên kết.
THIẾT KẾ
Vẽ wireframe
Do kích thước của tờ giấy A4 bị giới hạn nên các trang web sẽ chia thành nhiều phần nhỏ.
1 Cấu trúc thư mục dự án:
- Trong dự án có 4 thư mục lớn:
+ HTML: Chứa các tập tin có đuôi html để tạo và cấu trúc các thành phần trong trang web, ngoài ra còn chia theo từng trang web nhỏ lẻ để hợp thành trang web tổng (trang chủ) như: sản phảm dịch vụ, đồ ăn, thức uống, ưu đãi, liên hệ,
+ CSS: Bao gồm các tập tin có đuôi css để làm trang web đẹp hơn và có độ linh hoạt cho các dòng máy khác nhau.
+ IMG: Nơi lưu trữ các dữ liệu hình ảnh cho trang web.
+ JS: Chứa các tập tin có đuôi js để xử lý các sự kiện, các hoạt ảnh, các xác nhận và tăng trải nghiệm cho người dùng.
2 Giải thích về giao diện thu được của mỗi một trang trong website và cách xây
2.1 Trong giao diện trang chủ, trang web được chia làm 4 phần:
+ Phần 1: Giới thiệu sơ lược về cửa hàng hoặc cung cấp trải nghiệm thương hiệu
+ Phần 2: Thanh menu ngang Sử dụng bootstrap phân chia thành các mục: logo, tìm kiếm, hệ thống, ưu đãi, thức ăn đồ uống, sản phẩm & dịch vụ Mỗi danh mục liên kết đến một trang với nội dung khác nhau.
+ Phần 3 - Nội dung chính: Bao gồm các phần quà, khuyễn mãi, các sản phẩm mới/hot, thức ăn, đồ uống và các dịch vụ tiện ích Được thiết kế dạng băng trượt với nhiều hình ảnh khác nhau đối với mỗi mục và đều được liên kết với một trang khác.
+ Phần 4 - Footer: Bao gồm thông tin liên hệ, hỗ trợ khách hàng, và mạng xã hội.
2.2 Trang Hệ thống của S.Mart ngoài thanh menu và footer thì còn cung cấp thông tin về các địa điểm cửa hàng trên toàn quốc Người dùng có thể tìm thấy vị trí các cửa hàng gần nhất, xem giờ mở cửa và các dịch vụ đi kèm Trang này hỗ trợ khách hàng nhanh chóng xác định cửa hàng
2.3 Trang ưu đãi: Người dùng có thể xem tất cả các khuyến mãi của cửa hàng ở mục xem tất cả.
2.4 Trang thức ăn & thức uống: tại đây người dùng có thể xem thông tin đồ ăn hoặc đồ uống trong cửa hàng
Người dùng có thể truy cập vào mục xem tất cả để xem tất cả các sản phẩm và chi tiết sản phẩm
Muốn xem chi tiết sản phẩm chỉ cần click vào ảnh của sản phẩm đó sẽ hiện ra các thông tin chi tiết cho từng món.
Ngoài ra người dùng còn có thể khám phá thêm các ưu đãi hoặc các dịch vụ, sản phẩm khác từ trang này
2.5 Trang sản phẩm và dịch vụ: chứa các thông tin chi tiết về các sản phẩm tổng hợp và các dịch vụ như thanh toán,
Trang sản phẩm chứa toàn bộ các sản phẩm khác như thực phẩm khô, nước giải khát, thực phẩm đông lạnh, bia, rượu, được phân chia thành từng mục.
Trang dịch vụ chứa các dịch vụ thanh toán, thẻ điện thoại, thẻ game,
- Một số thẻ và thuộc tính đặc biệt được sử dụng trong website
, , ,
- ,
- , , ,
+CSS: color, margin, width, height, padding, border, font-size,
+JS: scroll event, carousel, category filtering, Document Object Model, if/else để điều chỉnh lại hiển thị,
- Với một trang web có nhiều chức năng như SMart, mỗi thành viên trong nhóm đều được phân chia chức năng, quản lý, xây dựng từng trang web riêng và kết nối với những thành viên khác để tạo thành một trang web hoàn chỉnh:
+ Đỗ Ngọc Trường Sơn: Thức ăn & Đồ uống, Tin tức & Sự kiện, Hóa đơn đỏ,
+ Nguyễn Văn Trưởng: Trang chủ, Giới thiệu, Chính sách & Bảo Mật,
+ Nguyễn Sĩ Phúc: Hệ thống, Ưu đãi, Cơ hội nghề nghiệp,
+ Chu Nguyễn Khánh Thiện: Sản phẩm & Dịch vụ, Liên hệ,
Items Sub-items Steps to Excute Expected ouput Androi Ios
1 Kiểm tra màu chữ, font chữ, font size của các button.
2 Kiểm tra màu nền của các
3 Kiểm tra khoảng cách các control.
Hiển thị theo thiết kế sẵn có. Đã responsive
Xem thông tin hệ thống
Nhấp chọn button: xem thông tin hệ thống
Màn hình hiện thông tin hệ thống
Xem thông tin ưu đãi Nhấp chọn button: xem thông tin ưu đãi
Màn hình hiện thông tin ưu đãi
Xem thông tin thức ăn, thức uống
Nhấp chọn button: xem thông tin thức ăn, thức uống
Màn hình hiện thông tin thức ăn, thức uống
Xem thông tin sản phẩm, dịch vụ
Nhấp chọn button: xem thông tin sản phẩm, dịch vụ
Màn hình hiện thông tin sản phẩm, dịch vụ
Bảng điểm tự đánh giá:
Họ và tên D1 Thành thạo công nghệ
D2 Báo cáo D3 Kỹ năng TB
Bảng điểm nhóm đánh giá cho từng cá nhân:
Họ và tên D1 Thành thạo công nghệ
D2 Báo cáo D3 Kỹ năng TB
Chú thích các tiêu chí đánh giá:
- Sử dụng HTML để hoàn thành trang web.
- Vận dụng CSS để định kiểu, thiết kế cho trang web: layout, responsive,
- Sử dụng JS để tăng cường tính tương tác cho website: validation, DOM, storage,
- Trung bình cộng điểm thành thạo công nghệ.
- Định dạng: định dạng đẹp mắt, có thể sử dụng các template, mục lục tự động, danh mục hình ảnh tự động, tài liệu tham khảo, trích dẫn, heading, style,
- Nội dung báo cáo: đầy đủ các nội dung của bài tập lớn.