Đối tượng của website
Website được xây dựng phục vụ hai đối tượng chính là Admin( nhà quản trị) và Khách hàng với các chức năng sau:
• Quản lý danh mục các món ăn.
• Thống kê doanh thu theo ngày, tháng, năm.
• Thay đổi, cập nhật thông tin tài khoản.
• Xem thông tin sản phẩm.
• Có quyền đăng ký, đăng nhập, đăng xuất, đổi mật khẩu.
• Chỉnh sửa, thay đổi, cập nhật thông tin người dùng.
• Xem và tìm kiếm món ăn theo từ khoá, danh mục, giá.
• Đặt mua sản phẩm(Thêm món vào giỏ hàng, tuỳ chỉnh số sản phẩm của giỏ hàng, thanh toán).
• Xem lịch sử đặt món.
Đặc điểm website
Website quản lý khu ẩm thực mang đến trải nghiệm đơn giản, thân thiện và dễ sử dụng Nó không chỉ cho phép khách hàng thao tác và sử dụng các chức năng một cách thuận tiện, mà còn hỗ trợ hiệu quả trong việc quản lý hoạt động của khu ẩm thực.
Website được thiết kế theo kiểu SPA(single-page application) giúp mang lại trải nghiệm tốt nhất cho người dùng:
• Giao diện hài hoà, thân thiện, giúp người dùng dễ dàng sử dụng.
• Tốc độ xử lý tính toán, tìm kiếm nhanh.
• Tốc độ load trang nhanh.
Các tính năng của dự án
➢ Đăng kí, đăng nhập, đăng xuất
• Cho phép khách hàng đăng kí và đăng nhập vào hệ thống.
➢ Xem cập nhật thông tin người dùng
• Cho phép chỉnh sửa, cập nhật thông tin tin tài khoản.
➢ Xem, tìm kiếm món ăn, lọc theo giá, từ khoá
• Khách hàng tìm kiếm món ăn họ mong muốn.
• Cho phép khách hàng đặt món ăn.
• Khách hàng thanh toán hoá đơn để hoàn tất đặt món.
• Khách hàng chỉnh sửa số lượng món ở giỏ hàng và thực hiện thanh toán với nhiều hình thức khác nhau.
➢ Quản trị website dành cho admin
• Quản lý tài khoản: quản trị viên có thể tạo tài khoản mới cho nhân viên, hay cho admin khác của hệ thống.
• Quản lý danh mục: quản trị viên thêm mới, xoá, sửa danh mục sản phẩm
• Quản lí món ăn: quản trị viên thêm mới, xoá sửa món ăn vào danh sách món ăn.
• Thống kê doanh thu:quản trị viên thống kê doanh thu theo tháng/năm.
• Xem danh sách hoá đơn trong ngày, xem và tìm kiếm hoá đơn theo ngày.
• Cài đặt, chỉnh sửa mật khẩu, thông tin tài khoản.
Phân công công việc
Feature List Thành viên Đăng kí, đăng nhập, cập nhật thông tin người dùng, lịch sử thanh toán
Nguyễn Văn Minh Hải Đặt món, chỉnh sửa số lượng món của giỏ hàng, tạo database, phân quyền admin
Xem, tìm kiếm món ăn, xem chi tiết món ăn Nguyễn Văn Quốc
Thanh toán, header,footer Trần Quốc Việt
Các chức năng quản trị dành cho admin Nguyễn Văn Thương
➢ Thiết kế giao diện(Front-end)
ReactJS là thư viện JavaScript hàng đầu để phát triển giao diện người dùng (UI), nổi bật với tốc độ phản hồi nhanh chóng khi người dùng tương tác Được phát triển bởi Facebook, React sử dụng phương pháp render trang web mới mẻ và đã được ra mắt dưới dạng mã nguồn mở vào năm 2013.
• Mô tả chi tiết các ưu điểm của reactjs, độ trending.
∗ Rất dễ dàng để tiếp cận: Nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.
Chia nhỏ UI phức tạp thành các component nhỏ và đơn giản giúp tách biệt rõ ràng từng nhiệm vụ của component, từ đó dễ dàng hơn trong việc debug và phát hiện sự thay đổi Cách tổ chức ứng dụng trở nên rõ ràng và dễ hiểu hơn, nâng cao hiệu quả phát triển.
ReactJS giúp đơn giản hóa việc viết mã JavaScript nhờ vào cú pháp JSX (JavaScript mở rộng), cho phép kết hợp mã HTML và JavaScript một cách dễ dàng Người dùng có thể chèn các đoạn HTML trực tiếp vào hàm render mà không cần phải sử dụng phép nối chuỗi.
React sở hữu một thư viện hỗ trợ phong phú, giúp lập trình viên viết mã logic một cách nhanh chóng và hiệu quả Với React, việc tạo kiểu cho các component và áp dụng hiệu ứng CSS trở nên đơn giản chỉ với vài dòng mã.
Reactjs cho phép render ở phía server trước, giúp tối ưu hóa thời gian tải trang Khi nhận được dữ liệu từ server, các component chứa dữ liệu sẽ tự động cập nhật mà không cần phải reload lại trang.
Redux giúp tăng cường sự liên kết giữa các component, cho phép chia sẻ và cập nhật dữ liệu một cách đồng bộ, từ đó cải thiện tính hiệu quả trong việc quản lý trạng thái ứng dụng.
SQL Server is a relational database management system (RDBMS) that utilizes Transact-SQL for data exchange between client machines and the SQL Server installation An RDBMS comprises databases, a database engine, and various applications designed to manage data and its components within the system.
• Mô tả ưu điểm của Sql server.
∗ Có thể cài nhiều phiên bản MS SQL khác nhau trên cùng một máy tính.
∗ Có cloud free Azure có thể dùng chung với lượng data không quá lớn.
∗ Giảm thiểu các vấn đề tạm thời trên cơ sở dữ liệu.
∗ Tách biệt các đặc quyền bảo mật.
Node.js, được xây dựng trên nền tảng V8 JavaScript Engine, là một nền tảng mạnh mẽ giúp phát triển ứng dụng web một cách đơn giản và hiệu quả Với kiến trúc hướng sự kiện và mô hình I/O không chặn, Node.js mang lại hiệu suất cao và khả năng xử lý đồng thời tốt hơn Hệ thống quản lý gói npm của Node.js là một trong những kho thư viện mã nguồn mở lớn nhất thế giới, hỗ trợ lập trình viên trong việc phát triển ứng dụng.
• Mô tả ưu điểm của lập trình Nodejs, Viết AP bằng ExpressJS + Sequelize
NodeJs nổi bật với tốc độ xử lý nhanh chóng nhờ vào cơ chế xử lý bất đồng bộ (non-blocking), cho phép dễ dàng quản lý hàng ngàn kết nối trong thời gian ngắn nhất thông qua async và await.
∗ NodeJs+ Express giúp ta dễ dàng mở rộng khi có nhu cầu phát triển website.
Node.js nổi bật so với các ngôn ngữ lập trình back-end khác nhờ khả năng xử lý nhiều kết nối đồng thời chỉ với một thread duy nhất Điều này giúp hệ thống tiết kiệm RAM và tăng tốc độ xử lý, đồng thời loại bỏ nhu cầu cài đặt hàng đợi cho các yêu cầu gửi đến.
∗ Có khả năng xử lý nhiều Requests cùng một lúc trong thời gian ngắn nhất.
∗ Sequelize là một ORM, giúp chúng ta chuyển dữ liệu từ dạng bảng sang dạng object Từ đó câu lệnh truy vấn sẽ dễ dàng hơn theo dạng OOP.
Sequelize hỗ trợ tạo cơ sở dữ liệu và các bảng thông qua lệnh cmd, cùng với việc cấu hình và tự động truyền tải đến cơ sở dữ liệu Nó phát triển ba môi trường: dev, test và production, tự động điều chỉnh liên kết SQL tương ứng với trạng thái của dự án Ngoài ra, dữ liệu có thể được kiểm tra dưới dạng seeder trước khi đưa vào sử dụng thực tế.
The team utilizes PayPal Developer to test payment features in a developer environment A PayPal Developer account is created to facilitate payments after placing an order, with amounts converted from VND to USD After setting up the account, the PayPal SDK is imported into the index.html file located in the public directory of the React app, enabling the use of PayPal throughout the entire React application.
Theo phân loại đối tượng sử dụng website, giao diện được chia thành hai loại chính: giao diện quản trị dành cho admin và giao diện người dùng phục vụ cho khách hàng.
Giao diện quản trị website
Trang đăng nhập cho admin
➢ Giao diện trang đăng nhập.
Hình 1: Giao diện trang đăng nhập
➢ Mô tả chi tiết chức năng Đăng nhập:
Admin của website sẽ nhận được một đường dẫn riêng tư để truy cập trang quản lý admin (/admin/) Khi truy cập vào đường dẫn này, hệ thống sẽ tiến hành kiểm tra thông tin đăng nhập của admin.
Để đăng nhập, bạn cần nhập email và mật khẩu, sau đó nhấn "Đăng nhập" Hệ thống sẽ tiến hành xác thực; nếu thông tin đúng, bạn sẽ được chuyển đến trang quản lý doanh thu, ngược lại, một thông báo lỗi sẽ hiển thị.
Trang quản lý, thống kê doanh thu
➢ Giao diện trang quản lý, thống kê doanh thu.
Hình 2: Giao diện trang quản lý, thống kê doanh thu.
Hình 3: Giao diện trang quản lý, thống kê doanh thu.
Hình 4: Giao diện trang quản lý, thống kê doanh thu.
➢ Mô tả chi tiết chức năng quản lý, thống kê doanh thu:
Trang quản lý doanh thu cung cấp thống kê doanh thu bán hàng theo ngày, tháng và năm hiện tại Dữ liệu được hiển thị rõ ràng trong ba ô tương ứng trên giao diện Doanh thu theo từng tháng trong năm được thể hiện trên lược đồ, với trục ngang là tháng và trục đứng là số liệu doanh thu tính bằng VND.
Danh sách hóa đơn trong ngày cung cấp thống kê chi tiết về các hóa đơn bán hàng được thực hiện trong ngày hôm nay Người quản trị có thể xem thông tin chi tiết của từng đơn hàng bằng cách nhấp vào biểu tượng ba chấm trên giao diện.
Danh sách hóa đơn hàng tháng cho phép thống kê toàn bộ hóa đơn bán ra trong tháng hiện tại Người quản trị có thể dễ dàng tìm kiếm hóa đơn theo ngày bằng cách nhập thông tin vào ô tìm kiếm và nhấn nút tìm kiếm.
• Dữ liệu trả về từ hệ thống sẽ được phân thành các trang Admin có thể chọn xem trang nào mong muốn.
Trang quản lý món
➢ Giao diện trang quản lý món.
Hình 5: Giao diện trang quản lý món
Hình 6: Giao diện trang quản lý món
➢ Mô tả chi tiết chức năng Quản lý món:
Trang quản lý món cho phép quản trị viên dễ dàng thêm món mới vào menu bằng cách nhập các thông tin cần thiết và nhấn nút Thêm Hệ thống sẽ tự động cập nhật thông tin vào cơ sở dữ liệu.
Trang quản lý món cung cấp thống kê danh sách các món ăn hiện có trong khu ẩm thực Tại đây, quản trị viên có thể dễ dàng xóa món bằng cách nhấn vào biểu tượng Xoá hoặc cập nhật thông tin món ăn qua biểu tượng Chỉnh sửa.
Khi nhấp vào biểu tượng chỉnh sửa, giao diện cập nhật món ăn sẽ hiển thị Admin có thể thay đổi trạng thái món ăn thành "Ngưng sử dụng" nếu món đã hết, hoặc cập nhật hình ảnh của món ăn.
Trang quản lý danh mục
➢ Giao diện trang quản lý danh mục.
Hình 7: Giao diện trang quản lý danh mục
Hình 8: Giao diện trang quản lý danh mục
➢ Mô tả chi tiết chức năng Quản lý danh mục:
Trang quản lý danh mục cho phép admin dễ dàng thêm danh mục mới vào hệ thống bằng cách nhập các thông tin cần thiết và chọn nút Thêm Hệ thống sẽ tự động cập nhật dữ liệu vào cơ sở dữ liệu.
Trang quản lý danh mục cho phép thống kê các danh mục hiện có trong khu ẩm thực Tại đây, admin có thể dễ dàng xóa danh mục bằng cách chọn icon Xoá hoặc cập nhật thông tin danh mục món ăn bằng icon Chỉnh sửa.
Trang quản lý tài khoản
➢ Giao diện trang quản lý tài khoản.
Hình 9: Giao diện trang quản lý tài khoản
Hình 10: Giao diện trang quản lý tài khoản
➢ Mô tả chi tiết chức năng Quản lý tài khoản:
Trang quản lý tài khoản cho phép admin dễ dàng thêm mới tài khoản cho nhân viên hoặc admin vào danh sách tài khoản Chỉ cần nhập các thông tin cần thiết và chọn "Thêm", hệ thống sẽ tự động cập nhật thông tin vào cơ sở dữ liệu.
Trang quản lý tài khoản cho phép thống kê danh sách các tài khoản hiện có trong khu ẩm thực Tại đây, admin có thể dễ dàng xóa tài khoản bằng cách nhấn vào biểu tượng Xoá để loại bỏ tài khoản khỏi danh sách.
Trang cài đặt, thay đổi, cập nhật thông tin tài khoản
➢ Giao diện trang cài đặt, thay đổi, cập nhật thông tin tài khoản.
Hình 11: Giao diện trang cài đặt, thay đổi, cập nhật thông tin tài khoản
Hình 12: Giao diện trang cài đặt, thay đổi, cập nhật thông tin tài khoản
➢ Mô tả chi tiết chức năng Cài đặt, thay đổi, cập nhật thông tin tài khoản:
Trang quản lý tài khoản cho phép quản trị viên dễ dàng thay đổi mật khẩu và thông tin tài khoản bằng cách điền vào các trường thông tin cần thiết và nhấn vào nút tương ứng.
• Trên topbar, chọn vào icon "user", rồi chọn vào Hồ sơ để thực hiện cập nhật thông tin tài khoản.
Trang giới thiệu trang web
➢ Giao diện trang giới thiệu trang web.
Hình 13: Giao diện trang giới thiệu website.
➢ Mô tả trang giới thiệu website.
• Trang giới thiệu website, giúp nhân viên làm việc cho khu ẩm thực, có thể biết thêm thông tin về các chức năng của trang web
ScreenFlow các trang/giao diện quản trị
• Screen flow cho tất cả các trang quản trị.
• Link vẽ screenflow:https://drive.google.com/file/d/1AbqNb3XP9OZ2RC-QujJ_0oECwpd0-7cC/view?usp=sharing
Giao diện người dùng
Trang chủ
Hình 15: Giao diện trang chủ khi chưa đăng nhập
Hình 16: Giao diện trang chủ khi đã đăng nhập
Khi chưa đăng nhập, phần Header hiển thị tùy chọn như Đăng nhập và Giỏ hàng Khi khách hàng nhấn vào Đăng nhập, họ sẽ được chuyển đến trang đăng nhập, tương tự như khi chọn Giỏ hàng sẽ dẫn đến trang giỏ hàng Sau khi đăng nhập thành công, phần Đăng nhập sẽ hiển thị tên của khách hàng, và khi nhấn vào đó, họ sẽ được chuyển đến trang thông tin tài khoản.
• Phần nội dung chứa thông tin về hệ thông như là tên hệ thống, một số hình ảnh, một số banner và danh sách các món ăn
• Cuối cùng là một sô thông tin giới thiệu và thông tin liên hệ của cửa hàng
Phần xem danh sách món ăn
➢ Giao diện xem món ăn
Hình 17: Giao diện xem món ăn
➢ Mô tả giao diện xem món ăn
Nhà hàng cung cấp một danh sách đa dạng các món ăn, bao gồm thông tin chi tiết như tên món, giá cả, đánh giá và chất lượng, kèm theo hình ảnh minh họa hấp dẫn Đặc biệt, khách hàng có thể dễ dàng thêm món ăn vào giỏ hàng thông qua nút "Thêm sản phẩm".
• Khi ấn thêm sản phẩm, các món ăn sẽ được thêm vào giỏ hàng và sẽ được hiển thị khi khách hàng chuyển qua trang giỏ hàng
• Danh sách các món ăn sẽ được phân trang và khách hàng có thể chuyển qua các khác để xem thêm món ăn
Chức năng tìm kiếm sản phẩm cho phép khách hàng nhanh chóng tìm thấy món ăn bằng cách nhập tên sản phẩm Khi khách hàng gõ tên cần tìm, danh sách các món ăn liên quan sẽ được hiển thị ngay bên dưới, giúp tiết kiệm thời gian và nâng cao trải nghiệm mua sắm.
• Phần sắp xếp giúp khách hàng sắp xếp món ăn theo thứ tự giá tăng dần hoặc giá giảm dần.
• Ở mỗi món ăn, khi khách hàng ấn vào tên món ăn sẽ được chuyển qua trang chi tiết của món ăn đó.
Trang chi tiết sản phẩm
➢ Giao diện trang chi tiết sản phẩm
Hình 18: Giao diện trang chi tiết sản phẩmn
➢ Mô tả giao diện trang chi tiết sản phẩm
Khi khách hàng nhấn vào tên sản phẩm trên trang chủ, họ sẽ được chuyển đến trang chi tiết sản phẩm, nơi cung cấp đầy đủ thông tin cần thiết về sản phẩm.
Bài viết này cung cấp thông tin chi tiết về sản phẩm, bao gồm tên, mô tả, giá cả và điểm đánh giá Ngoài ra, khách hàng có thể dễ dàng thêm sản phẩm vào giỏ hàng và để lại đánh giá của mình.
• Khi khách hàng ấn vào "Add to cart" món ắn sẽ được thêm vào giỏ hàng như là khi khách hàng ấn "Thêm sản phẩm" ở bên ngoài trang chủ.
Phần thêm đánh giá cho phép khách hàng gửi nhận xét về món ăn đến nhà hàng, tuy nhiên, nhóm chúng tôi vẫn chưa hoàn thiện tính năng này.
• Phía trên phần Header là nơi để khách hàng ấn vào giỏ hàng, đăng nhập,xem thông tin tài khoản hoặc là chuyển về lại trang chủ.
Trang giỏ hàng
➢ Giao diện trang giỏ hàng
Hình 19: Giao diện trang giỏ hàng
➢ Mô tả giao diện trang giỏ hàng
Khi khách hàng chọn thêm sản phẩm từ trang chủ hoặc nhấn "Thêm vào giỏ hàng" trong phần chi tiết sản phẩm, sản phẩm sẽ được tự động thêm vào giỏ hàng Tại đây, khách hàng có thể điều chỉnh số lượng sản phẩm và tiến hành thanh toán một cách dễ dàng.
• Ở đây, danh sách các món ăn đã chọn sẽ đươc hiển thị ra bao gồm các thông tin như là tên, giá, số lượng và tổng tiền.
Khách hàng có thể dễ dàng tùy chỉnh số lượng món ăn trong giỏ hàng bằng cách nhấn vào nút "+" để tăng hoặc "-" để giảm Khi số lượng món ăn giảm xuống 0, món sẽ tự động bị xóa khỏi giỏ hàng Ngoài ra, để xóa món ăn, khách hàng chỉ cần nhấn vào biểu tượng "x" ở phía bên trái.
• Phần dưới sẽ hiển thị tổng tiền của giỏ hàng và nút Thanh toán Khi nhấn vào Thanh toán sẽ được chuyển sang trang thanh toán.
• Tương tự mấy trang khác thì trên phần Header sẽ giúp khách hàng chuyển về lại trang chủ và các chức năng khác.
Trang thanh toán
➢ Giao diện trang thanh toán
Hình 20: Giao diện trang thanh toán
➢ Mô tả giao diện trang thanh toán
• Giao diện trang thanh toán được chia làm 2 phần:
∗ Hóa đơn của giỏ hàng
• Phương thức thanh toán có 4 lựa chọn cho khách hàng (Momo, ZaloPay, ShopeePay, Paypal):
∗ Ở các phương thức thanh toán bằng Momo, ZaloPay, ShopeePay: khi khách hàng nhấn đặt hàng ở phần hóa đơn thì sẽ hoàn tất việc đặt hàng của mình.
Khi khách hàng chọn phương thức thanh toán bằng Paypal, sau khi nhấn đặt hàng ở phần hóa đơn, trang web sẽ hiển thị tùy chọn thanh toán qua Paypal Sau khi hoàn tất thanh toán bằng Paypal, quá trình đặt hàng sẽ được hoàn thành.
Hình 21: Thanh toán bằng paypal
Trên hóa đơn giỏ hàng, khách hàng có thể dễ dàng kiểm tra danh sách sản phẩm và số lượng đã chọn, đồng thời xem tổng giá tiền của đơn hàng cùng với các thao tác khác.
Nếu khách hàng muốn bổ sung thêm món ăn vào giỏ hàng, họ chỉ cần nhấn vào nút "Thêm món" để trở về trang chủ và thực hiện các thao tác cần thiết.
∗ Xóa một món ăn: khách hàng có thể xóa bất kì một món ăn nào đó ra khỏi giỏ hàng của mình.
Khách hàng có thể dễ dàng xóa đơn hàng của mình bằng cách nhấn vào nút "Xóa đơn hàng" Ngay lập tức, trang web sẽ xóa dữ liệu đơn hàng hiện tại và tự động đưa khách hàng trở về trang chủ.
Trang đăng ký và đăng nhập
➢ Giao diện trang đăng ký
Hình 22: Giao diện trang đăng ký
➢ Mô tả giao diện trang đăng ký
• Giao diện trang thanh toán được chia làm 2 phần:
∗ Phần poster chứa button đăng nhập để chuyển sang trang đăng nhập.
∗ Phần chứa form đăng ký.
• Form đăng ký có 4 trường và 1 button:
∗ Trường email, để nhập email người dùng.
∗ Trường username của người dùng.
∗ Trường password của người dùng.
∗ Trường confirm password dùng để kiểm tra lại password trước khi đăng ký, nếu mật khẩu khớp thì mới đăng ký được.
∗ Button đăng ký, thực hiện phương thức đăng ký tài khoản mới.
Khi bạn hoàn tất việc đăng ký, hệ thống sẽ hiển thị thông báo thành công; nếu không, sẽ có thông báo thất bại Sau khi đăng ký, hãy nhấn nút đăng nhập để chuyển sang trang đăng nhập.
➢ Giao diện trang đăng nhập
Hình 23: Giao diện trang đăng nhập
➢ Mô tả giao diện trang đăng nhập
• Giao diện trang thanh toán được chia làm 2 phần: ã Phần poster chứa button đăng ký để chuyển sang trang đăng ký. ã Phần chứa form đăng nhập.
Form đăng nhập bao gồm hai trường và một nút bấm: Trường email dùng để nhập địa chỉ email của người dùng và trường mật khẩu để nhập mật khẩu của tài khoản Nút bấm đăng nhập sẽ thực hiện chức năng đăng nhập vào tài khoản.
Khi bạn đăng nhập thành công, hệ thống sẽ hiển thị thông báo thành công; ngược lại, nếu không thành công, bạn sẽ nhận được thông báo thất bại Sau khi hoàn tất quá trình đăng ký, hãy nhấn nút đăng nhập để chuyển đến trang đăng nhập.
Trang người dùng (user)
➢ Giao diện trang người dùng
Hình 24: Giao diện trang người dùng
• Giao diện trang thanh toán được chia làm 2 phần:
∗ Phần chính là phần hiển thị các modal của từng tab liên quan bao gồm
3 modal là: thông tin tài khoản, đổi mật khẩu, lịch sử mua hàng.
∗ Phần thứ 2 là nơi chứa các button để chuyển sang các modal khác nhau trong trang người dùng.
➢ Mô tả giao diện phần thông tin tài khoản
• Modal thông tin tài khoản gồm 4 trường chứa thông tin của tài khoản và một button cập nhật thông tin tài khoản:
∗ Trường tên đăng nhập của người dùng.
∗ Trường họ và tên của người dùng.
∗ Trường số điện thoại người dùng.
∗ Button cập nhật, thực hiện phương thức cập nhật thông tin tài khoản.
Khi người dùng nhập dữ liệu và thực hiện cập nhật tại trường, thông tin của họ sẽ được thay đổi theo giá trị mới Hệ thống sẽ hiển thị thông báo để xác nhận việc cập nhật, cho biết liệu quá trình này thành công hay không.
➢ Giao diện phần đổi mật khẩu
Hình 25: Giao diện trang đổi mật khẩu
➢ Mô tả giao diện phần đổi mật khẩu
• Modal đổi mật khẩu bao gồm 2 trường là mật khẩu mới, nhập lại mật khẩu và một button cập nhật.
• Modal này giúp người dùng có thể đổi mật khẩu mới Hoàn thành thao tác thì thông báo sẻ được hiển thị ra màn hình.
➢ Giao diện phần lịch sử mua hàng
Hình 26: Giao diện trang lịch sử mua hàng
➢ Mô tả giao diện phần đổi mật khẩu
• Giao diện bao gồm dang sách các đơn hàng đã mua có thông tin bao gồm ID, ngày thanh toán, tổng tiền thanh toán, phương thức thanh toán.
• Mỗi đơn hàng có một button xem chi tiết đơn hàng Click vào button này thì modal chi tiết đơn hàng được bật lên Như hình dưới:
Hình 27: Giao diện trang modal đơn hàng
• Trong modal này chứ danh sách các món ăn đã được đặt bao gồm ID, số lượng ,tên và giá của từng món ăn.
ScreenFlow các trang/giao diện người dùng
• Screen flow cho tất cả các trang quản trị.
• Link vẽ screenflow: https://drive.google.com/file/d/1chhV1r5vy0wRi7a6a3K7DDq0lkqr-LW2/ view?usp=sharing
4 Detail for class diagram description:
Class diagram
Class diagram for Admin
➢ Ảnh class diagram cho trang admin.
Link draw.io: https://drive.google.com/file/d/1Adi9KBGmt6MwUd8t8YQo23TOq7egR6Fk/ view?usp=sharing
Hình 29: Class diagram for Admin page
Mô tả chức năng các method trong Component Table render dữ liệu dưới dạng bảng
Sidebar tạo thanh điều hướng bên
Topnav chứa các biểu tượng tìm kiếm, icon admin
Layout sử dụng lại sidebar và topbar để tạo giao diện điều hướng chung giữa các trangRoutes để định tuyến giữa các trang quản trị
Mô tả chức năng các method trong các Page
The routing between admin pages utilizes various functions to manage data effectively The `fetchListAccount()` function retrieves a comprehensive list of all employee accounts associated with the food court Similarly, `fetchListCategory()` gathers all existing categories from the database, while `fetchListFood()` compiles a list of all available food items The function `fetchListBillOfDate()` is designed to extract today's invoice records To calculate daily revenue, the `getTotalOfDate(date)` function is employed Additionally, records can be deleted using specific functions: `deleteRecord(AccId)` for removing accounts, `deleteRecord(FoodcId)` for deleting food items, and `deleteRecord(CategoryId)` for eliminating categories.
UpdateRecord(FoodId,) Sửa đổi thông tin món ăn handleAdd(object) Xử lí sự kiện khi nhấn vào button
To enhance functionality, the system allows users to create new accounts, food items, and categories Depending on the object passed to the handleEdit(object) function, users can edit entries by clicking the "Edit" button For deletion, the handleDelete(object) function processes the event triggered by the "Delete" button Additionally, users can search for records by name using the searchRecords(name) function.
Mô tả chức năng các method trong các Controller
Tên method Chức năng send(obj) Hàm import từ thư viên, có chức năng gửi reponse lại cho người dùng addAdmiAccount(name, email, user- name, password, type )
Để quản lý tài khoản và danh mục trong hệ thống, bạn có thể thực hiện các thao tác như thêm mới tài khoản với hàm `addCate(name,imgurl)` để thêm danh mục, sửa đổi thông tin danh mục bằng `updateCate(id,name,imgurl)`, và xóa danh mục với `removeCate(id)` Để quản lý món ăn, sử dụng `addFood(name,type,description,price)` để thêm món mới và `getDetailFood(id)` để xem chi tiết món ăn Ngoài ra, bạn có thể xóa tài khoản qua hàm `removeAdmin(id)` và lấy danh sách tất cả nhân viên bằng `getallEmployee()`.
The Controller includes several key methods: `getListFoodByName(name)` filters the food list based on the specified name, while `getListFoodByType(type)` filters the food items according to their category Additionally, the `updateFood(id, name, type, description, price)` method allows for updating the details of a food item using its unique identifier.
The article provides essential functions for managing food items in a database The `removeFood(id)` function allows users to delete a food item by its unique identifier To retrieve all available food items, the `getallfoodAsync()` function is utilized, while `getallCategoryAsync()` fetches all existing categories within the database Additionally, the `ordering(customerid, items, totalamount)` function facilitates the ordering process for customers.
Lưu thông tin đặt hàng vào DB. viewListOrder() Xem danh sách hoá đơn. viewOrderByCustomer( customerid) Xem lịch sử thanh toán.
Mô tả chức năng các method trong các Entity
Admin Có các thuộc tính id(khoá), và các thông tin use- name,password,name, email, type.
Catefory Có các thuộc tính id(khoá) và các thông tin name,imgur.
Customer Có các thuộc tính id(khoá),name, username, email, pass- word,phone.
Food Có các thuộc tính id(khoá), name, descripttion, price, foodimage, quantityorder.
Order Có các thuộc tính id(khoá), orderdate,totalamount.
OrderItem Có các thuộc tính id(khoá),quantity,totalamount.
Payment Có các thuộc tính id(khoá),totalamount,paidby,paydate.
Classdiagram for Client
➢ Ảnh class diagram cho trang khách hàng.
Link draw.io: https://drive.google.com/file/d/1Adi9KBGmt6MwUd8t8YQo23TOq7egR6Fk/ view?usp=sharing
Hình 30: Class diagram for Client page
➢ Mô tả chức năng các method trong ClassDiagram cho Client
The UserInterface method init() initializes the main screen of the application The displayOrderFoodView() function showcases the food ordering feature, while displayPaymentOrderView() presents the payment functionality Additionally, displayCartView() displays the shopping cart feature The CartView interface includes the displayCartUI() method, which renders the cart interface, and the modifyOrderItemBtnOnclick function allows for modifications to order items.
Hàm để thay đổi số lượng các món ăn trong giỏ hàng displayProceedPaymentButton(): void
The interface method `OrderFoodView displaySearchUI()` is designed to show the search interface for food items Meanwhile, the method `displayOrderUI()` is utilized to present the order interface Additionally, the `PaymentOrderView` interface includes the method `displayPaymentUI()`, which is responsible for displaying the payment interface Lastly, the class `Search` plays a crucial role in facilitating these functions.
The Search class includes a method called getFoodData(string) that retrieves food information based on a search query The Payment class features a constructor and a method named getOrder(int OrderID) for obtaining order details using the provided order ID Additionally, it has a method called getListPaymentMethod() that returns a list of available payment methods.
The function choosePaymentMethod() allows users to select their preferred payment method, while the paytheBill(data) function is responsible for processing the bill payment Additionally, the class Item is utilized to manage the relevant items associated with the transaction.
Phương thức Item() được sử dụng để khởi tạo đối tượng Item Hàm getQuantity() trả về thông tin về số lượng của item, trong khi hàm setQuantity(int quantity) cho phép người dùng đặt số lượng cho item.
Tên method Chức năng ôclassằOrderManager OrderManager() Phương thức khởi tạo đối tượng OrderMan- ager. createOrder(string customerID): bool
The method for creating an order includes the following functionalities: the `addItemToCart(Food data): bool` method is used to add an item to the shopping cart, while the `calculateBill(): float` method calculates the total bill amount.
Phương thức khởi tạo đối tượng Order được định nghĩa bởi hàm Order() Để lấy thông tin của đơn đặt hàng, sử dụng hàm getData() với kiểu trả về là Order Để đặt thông tin cho đơn hàng, hàm setData(Order data) với kiểu trả về là void sẽ được sử dụng.
Đối tượng Food được khởi tạo thông qua phương thức khởi tạo, trong đó hàm getFood(int foodID) được sử dụng để lấy thông tin món ăn dựa trên ID, trả về danh sách dữ liệu Đồng thời, hàm setFood(int foodID, list data) cho phép cập nhật thông tin món ăn tương ứng với ID đã chỉ định.
Hàm để đặt thông tin món ăn. ôinterfaceằUserUI displayLoginView() Hiển thị trang đăng nhập. displayRegisterView() Hiển thị trang đăng ký.
Logout() Đăng xuất ôinterfaceằLoginView renderSignUpPage() Chuyển sang trang đăng ký. handleChangeSignIn() Cập nhật thay đổi dữ liệu trong form đăng nhập
Login() Đăng nhập ôinterfaceằRegisterView renderSignInPage() Chuyển sáng trang đăng nhập handleChangeSignUp() Cập nhật thay đổi dữ liệu trong form đăng ký
Để quản lý tài khoản người dùng, lớp AccountController cung cấp các phương thức như requestLogin để gửi yêu cầu đăng nhập, requestRegister để đăng ký tài khoản mới, requestGetCustomerInfo để lấy thông tin người dùng, requestUpdateCustomerInfo để cập nhật dữ liệu cá nhân, và requestChangePassword để thay đổi mật khẩu.
The AccountDB() function initializes a database object, while findAccount() searches for an account using email and password The createAccount() function is responsible for creating a new user account, and updateAccountInfo() updates account information The changePassword() function allows users to change their password The customerInfoView interface includes displayCPView(), which shows the password change modal, and handleChangeInfo() to update customer information in the form The updateCustomerInfo() function updates the customer's information, while the ChangePasswordView interface features displayCIView() for displaying user information modals and handleChangePassword() for updating password change data Lastly, the changePassword() function is reiterated for its role in password modification.
Database
Database host
➢ Tạo database online sử dụng chung
Hình 31: Host database trên somee.com
Database connecction
➢ Mô tả cách kết nối cơ sở dữ liệu
The config.json file is essential for retrieving information about the connected database, including the username, password, database name, host, and dialect Currently, the configuration is set only for the development phase.
Nhóm sử dụng ORM Sequelize để chuyển đổi cơ sở dữ liệu dạng bảng thành các đối tượng (Object) nhằm tạo sự thuận tiện trong việc sử dụng Các đối tượng này sẽ được tự động lưu trữ trong thư mục models sau khi bảng được tạo, trong khi các bảng sẽ được lưu trong thư mục migrations, và hai thư mục này có mối liên hệ chặt chẽ với nhau.
Khi thao tác chỉ cần thao tác trên đối tượng object ở trong folder Models là được
Database Diagram
Git log commit
Các commit chính vào main
Chúng em chọn Spash and merge để merge vào nhánh main, nên log commit trông gọn hơn nhiều.
Chi tiết commit
Chi tiết 2 commit khi chúng em squash and merge(appha version và Beta version)
Tổng kết
Do ảnh hưởng của đại dịch COVID-19, hình thức học đã chuyển sang trực tuyến Mặc dù ban đầu gặp khó khăn do các thành viên trong nhóm chưa quen thuộc với nhau và cảm thấy ngượng ngùng, sau một tuần làm việc, nhóm đã thích nghi và làm việc hiệu quả hơn.
Để cải thiện hiệu quả làm việc nhóm, việc tổ chức các cuộc họp định kỳ, phân chia công việc cụ thể và đưa ra định hướng rõ ràng là rất quan trọng Điều này giúp tăng cường sự giao tiếp và sự hiểu biết giữa các thành viên, từ đó mang lại kết quả tốt hơn trong quá trình teamwork.
ReactJS là một ngôn ngữ lập trình đang rất thịnh hành, được nhóm chúng em lựa chọn cùng với Node.js cho đồ án ban đầu nhờ vào độ phổ biến của nó Trong quá trình làm việc, chúng em nhận thấy ReactJS rất phù hợp cho làm việc nhóm, cho phép chia nhỏ các component, đơn giản hóa giao diện phức tạp, đồng thời hỗ trợ việc lập trình API để xử lý backend song song với frontend.
Sau gần 3 tháng làm việc cùng nhau, nhóm chúng em đã hoàn thành một thành tựu đáng kể: lần đầu tiên thực hành lập trình một website và hiểu cách triển khai website lên môi trường internet Đây là sản phẩm của nhóm chúng em: https://font-end-project.herokuapp.com.
Để sử dụng chức năng người dùng, bạn chỉ cần truy cập vào trang web và thực hiện việc đăng ký, đăng nhập Đối với chức năng Admin, hãy thêm đuôi (/admin) vào đường dẫn của website Thông tin tài khoản admin là email: admin123@gmail.com và mật khẩu: 1234.
