Báo Cáo Đồ Án 2: Tìm hiểu ReactJS và xây dựng web quản lý nhà hàng

Báo cáo đồ án xây dựng web quản lý nhà hàng bằng ReactJS. Tài liệu tham khảo chi tiết từ phân tích, thiết kế CSDL đến xây dựng giao diện và chức năng.

• Tác giả: Trương Xuân Tâm
• Người hướng dẫn: ThS. Huỳnh Hồ Thị Mộng Trinh
• Trường học: Đại học Quốc gia Thành phố Hồ Chí Minh - Trường Đại học Công Nghệ Thông Tin
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Tìm Hiểu ReactJS Và Xây Dựng Web Quản Lý Nhà Hàng
• Loại tài liệu: Đồ án
• Năm xuất bản: 2022
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Đồ Án Web Quản Lý Nhà Hàng Bằng ReactJS

Đồ án Web Quản Lý Nhà Hàng bằng ReactJS là một hệ thống thông tin toàn diện được phát triển nhằm tối ưu hóa quy trình quản lý nhà hàng hiện đại. Ứng dụng web này kết hợp công nghệ ReactJS tiên tiến với cơ sở dữ liệu MongoDB để cung cấp giải pháp quản lý toàn diện. Dự án này được xây dựng bởi sinh viên Khoa Công Nghệ Phần Mềm, Đại học Công Nghệ Thông Tin, với mục tiêu giảm nhân công, tối ưu hóa thời gian và nâng cao trải nghiệm khách hàng. Hệ thống được triển khai trên AWS (Amazon Web Services), cho phép truy cập từ bất kỳ đâu có kết nối internet. Web quản lý nhà hàng này hỗ trợ các chức năng thiết yếu từ đặt bàn online, đặt món ăn điện tử, đến quản lý tài khoản khách hàng, tất cả được tích hợp trong một nền tảng duy nhất.

1.1. Mục Đích Và Ý Nghĩa Của Đồ Án

Mục đích chính của đồ án web quản lý nhà hàng là hỗ trợ truyền thông, quảng bá thương hiệu nhà hàng thông qua nền tảng số. Ứng dụng ReactJS giúp nhà hàng thể hiện hình ảnh, video, tin tức sự kiện một cách liên tục. Điều này tạo kết nối gần gũi với khách hàng sử dụng công nghệ. Hệ thống cũng tăng số lượng thực khách, mở rộng mạng lưới khách hàng qua tương tác online. Các dịch vụ đặt bàn, thanh toán online tiết kiệm thời gian cho người dùng.

1.2. Lợi Ích Của Web Quản Lý Nhà Hàng Hiện Đại

Web quản lý nhà hàng mang lại nhiều lợi ích thiết thực. Giảm chi phí nhân lực thông qua tự động hóa các quy trình. Cải thiện hiệu quả quản lý với các công cụ đo lường, biểu đồ phát triển. Người quản lý có thể kiểm soát toàn bộ hoạt động nhà hàng từ một bảng điều khiển. Tăng tiềm lực cạnh tranh trong ngành qua sử dụng công nghệ. Khách hàng nhận được tư vấn nhanh chóng và chuyên nghiệp qua hệ thống.

II. Phân Tích Yêu Cầu Và Thiết Kế Hệ Thống

Phân tích đặc tả yêu cầu là bước quan trọng trong phát triển web quản lý nhà hàng. Hệ thống được thiết kế với hai nhóm người dùng chính: khách hàng và quản trị viên (Admin). Khách hàng có thể đăng ký tài khoản, đặt bàn online, lựa chọn và đặt món ăn thông qua giao diện thân thiện. Quản trị viên quản lý tài khoản khách hàng, quản lý danh sách món ăn, quản lý bàn ăn, và theo dõi các đơn đặt bàn. Kiến trúc hệ thống sử dụng mô hình MVC (Model-View-Controller) để tách biệt logic nghiệp vụ, giao diện người dùng và xử lý dữ liệu. Component Diagram và Deployment Diagram được sử dụng để mô tả cấu trúc và triển khai ứng dụng ReactJS trên AWS.

2.1. Use Case Khách Hàng Và Quản Trị Viên

Use case khách hàng bao gồm đăng ký tài khoản, đăng nhập, đổi mật khẩu, xem danh sách bàn ăn, đặt bàn, chọn món ăn, và liên hệ hỗ trợ. Use case quản trị viên bao gồm quản lý tài khoản khách hàng (thêm, cập nhật, xóa), quản lý menu (thêm, chỉnh sửa thông tin món ăn), quản lý bàn ăn, và xem chi tiết các đơn đặt bàn. Mỗi use case được mô tả chi tiết với các bước thực hiện, điều kiện tiên quyết và kết quả mong đợi.

2.2. Kiến Trúc Mô Hình MVC Trong Ứng Dụng Web

Mô hình MVC (Model-View-Controller) được áp dụng để tổ chức code ReactJS một cách logic. Model quản lý dữ liệu và logic nghiệp vụ từ MongoDB. View là giao diện người dùng ReactJS, hiển thị thông tin tới người dùng. Controller xử lý các request, tương tác giữa Model và View. Kiến trúc này giúp code dễ bảo trì, mở rộng, và tái sử dụng. MongoDB được chọn làm cơ sở dữ liệu NoSQL, lưu trữ dữ liệu linh hoạt.

III. Thiết Kế Dữ Liệu Và Giao Diện Người Dùng

Thiết kế dữ liệu là nền tảng quan trọng cho web quản lý nhà hàng. Hệ thống sử dụng MongoDB để lưu trữ các bộ sưu tập dữ liệu như tài khoản khách hàng, thông tin món ăn, danh sách bàn ăn, và đơn đặt bàn. Mỗi bộ sưu tập được thiết kế với các trường dữ liệu cụ thể, kiểu dữ liệu phù hợp, và mối quan hệ logic. Giao diện người dùng (UI) được thiết kế thân thiện, dễ sử dụng với các màn hình chính: Register, Login, Home, List Table, Contact Us, Book Online, Book Món Ăn, và các trang quản lý cho Admin. Mỗi màn hình được mô tả chi tiết với các thành phần, chức năng, và luồng tương tác của người dùng.

3.1. Cấu Trúc Bảng Dữ Liệu Trong MongoDB

Cơ sở dữ liệu MongoDB chứa các bộ sưu tập chính: Users (tài khoản khách hàng), Menu Items (thông tin món ăn), Tables (danh sách bàn ăn), Reservations (đơn đặt bàn), và Image Gallery (thư viện ảnh). Mỗi bộ sưu tập có các trường dữ liệu được định nghĩa rõ ràng. Ví dụ, bộ sưu tập Users chứa _id, email, password, fullName, phone, createdAt. Menu Items chứa _id, name, description, price, category, image. Cấu trúc này cho phép lưu trữ linh hoạt và truy vấn dữ liệu hiệu quả.

3.2. Danh Sách Các Màn Hình Chính

Giao diện web quản lý nhà hàng gồm 15+ màn hình chính. Phía khách hàng: Register, Login, Đổi mật khẩu, Home, List Table, Contact Us, Book Online, Book Món Ăn, Quản lý tài khoản. Phía Admin: Quản lý tài khoản khách hàng, Quản lý món ăn, Quản lý bàn ăn, Quản lý đặt bàn, Chi tiết thông tin đặt bàn. Mỗi màn hình được thiết kế với bố cục logic, công cụ tìm kiếm, lọc, sắp xếp, và các nút hành động.

IV. Công Nghệ Sử Dụng Và Hướng Phát Triển

Đồ án web quản lý nhà hàng bằng ReactJS được phát triển với stack công nghệ hiện đại. Frontend sử dụng ReactJS, thư viện JavaScript mạnh mẽ để xây dựng giao diện người dùng động. Backend được xây dựng với Node.js và Express.js, cung cấp API RESTful cho ứng dụng. Cơ sở dữ liệu MongoDB lưu trữ dữ liệu theo mô hình tài liệu linh hoạt. Ứng dụng được triển khai trên AWS (Amazon Web Services), đảm bảo tính khả dụng cao, bảo mật, và khả năng mở rộng. Các công nghệ khác bao gồm JWT cho xác thực, Axios cho gọi API, và CSS/Bootstrap cho styling. Mục tiêu trong tương lai là mở rộng tính năng, tích hợp thanh toán online, hệ thống đánh giá khách hàng, và tối ưu hóa hiệu suất ứng dụng ReactJS.

4.1. Stack Công Nghệ Sử Dụng

Frontend: ReactJS, HTML5, CSS3, Bootstrap, Axios. Backend: Node.js, Express.js, RESTful API. Database: MongoDB, Mongoose ODM. Authentication: JWT (JSON Web Token). Hosting: AWS (EC2, S3, CloudFront). Version Control: Git, GitHub. Web quản lý nhà hàng này kết hợp các công nghệ web hiện đại để tạo nên một hệ thống vững chắc, hiệu quả, và dễ bảo trì.

4.2. Hướng Phát Triển Và Cải Tiến Trong Tương Lai

Hướng phát triển web quản lý nhà hàng bao gồm tích hợp cổng thanh toán trực tuyến (VNPay, PayPal) để khách hàng thanh toán online an toàn. Phát triển hệ thống đánh giá và bình luận từ khách hàng. Thêm tính năng email/SMS notification để thông báo về đơn đặt bàn. Tối ưu hóa hiệu suất ứng dụng ReactJS bằng code splitting, lazy loading. Phát triển mobile app từ web. Nâng cao tính bảo mật, sẵn sàng cho GDPR compliance.

Trích đoạn nội dung tài liệu

Chương 1 - TỔNG QUAN ĐỀ TÀI 1. Mô tả bài toán Trong thời buổi công nghệ thông tin, và Internet bùng nổ như hiện nay, việc triển khai và sử dụng website trong lĩnh vực quản lý nhà hàng khách sạn đã giúp tối ưu hóa và giảm được nhân công cũng như các công việc phức tạp như tính toán, trích xuất và xử lý nhanh hơn giúp người dùng tiết kiệm thời gian và mang lại cho họ cảm giác trải nghiệm tuyệt vời hơn. Việc xây dựng website quản lý thông tin nhà hàng sẽ hỗ trợ truyền thông, quảng bá thương hiệu. Trang web là nơi thể hiện những điều tốt đẹp diễn ra trong nhà hàng, các hình ảnh video hay các tin tức sự kiện được cập nhật liên tục sẽ đem nhà hàng gần gũi hơn với những người đang sử dụng công nghệ.

Qua đó, nhà hàng sẽ tăng số lượng thực khách và tạo ra lợi nhuận lớn, tăng cường mạng lưới khách hàng qua tương tác online. Các dịch vụ đặt món ăn, đặt bàn, thanh toán online sẽ làm cho khách hàng cảm thấy hứng thú hơn cũng như tiết kiệm được rất nhiều thời gian. Qua website khách hàng sẽ được nhân viên hệ thống tư vấn tận tình và nhanh chóng. Thông qua website việc quản lý nhà hàng sẽ dễ dàng và đạt được hiệu quả cao.

Các công cụ đo lường, biểu đồ phát triển sẽ giúp người quản lý kiểm soát được tất cả mọi vấn đề trong nhà hàng. Ngoài ra xây dựng website quản lý thông 5 tin nhà hàng sẽ tiết kiệm được khoảng chi phí, nguồn nhân lực. Như vậy, sẽ tăng thêm tiềm lực cạnh tranh trong ngành. Chính vì vậy nhóm em tìm hiểu để triển khai ứng dụng website quản lý thông tin nhà hàng.

Để tạo kết nối với khách hàng và dễ dàng trong quản lý thu chi, quản lý nhân viên, quản lý các món ăn thức uống. Thúc đẩy sự phát triển của nhà hàng, hiện đại trong việc quản lý. Trong quá trình xây dựng ứng dụng website quản lý thông tin nhà hàng. Nhóm chúng em đã triển khai lên AWS (amazon web services).

Người dùng có thể truy cập vào hệ thống bất kỳ ở đâu có internet để sử dụng các chức năng của nhà hàng. Yêu cầu đặt ra - Một số yêu cầu nhóm đặt ra khi phát triển ứng dụng: + Tính tiện dụng: ứng dụng phải thân thiện với người dùng, dễ dàng tiếp cận với mọi lứa tuổi + Tính đúng đắn: thông tin đưa lên phải được xác thực kĩ về độ chính xác, ứng dụng chạy không lỗi + Tính thích nghi: ứng dụng chạy được trên nhiều nền tảng trình duyệt web khác nhau + Tính tiến hoá: ứng dụng phải dễ dàng phát triển thêm tính năng mà không ảnh hưởng đến các tính năng đã phát triển trước đó + Tính bảo trì: ứng dụng có thể thay đổi một số chức năng hoặc cập nhật thêm thông tin một cách tiện lợi nhất + Tính tương tác: tạo ra được một môi trường tương tác tốt giữa hệ thống và người dùng 6 7 Chương 2 - PHÂN TÍCH ĐẶC TẢ YÊU CẦU 2.1 Sơ đồ usecase hệ thống 8 2.1 Use Case khách hàng Hình 2.1 Usecase khách hàng 2.2 Use Case Admin 9 Hình 2.2 Use Case Admin 2.3 Danh sách các Actor Bảng 3. 1 Danh sách các Actor STT Tên Actor Ý nghĩa/Ghi chú 1 Customer (khách khách vãng lai, hoặc khách hàng có thế order hàng) món ăn ,đặt bàn, xem thông tin món ăn , danh sách món ăn,,, 2 Admin quản lý toàn bộ hệ thống 10 2.4 Danh sách các Use-case Bảng 3. 2 Danh Sách các Use-case ST Tên Use-case Ý nghĩa/Ghi chú T 1 Đăng nhập Đăng nhập vào hệ thống 2 Đăng xuất Thoát khỏi hệ thống 3 Đăng ký tài khoản Đăng ký tài khoản mới 4 Đổi mật khẩu Đổi mật khẩu 5 Xem thông tin của cửa hàng Xem thông tin món ăn thức uống, các chương trình khuyến mãi, thông tin, giới thiệu website… 6 Xem menu món ăn Xem menu các món ăn trong cửa hàng 7 Đặt bàn Khách hàng nhập thông tin để đặt bàn 8 Đặt món Khách hàng đặt món sau khi đặt bàn 9 Thêm tài khoản khách hàng Admin thêm tài khoản khách hàng vào hệ thống 10 Xóa tài khoản khách hàng Admin xóa tài khoản khách hàng khỏi hệ thống 11 Cập nhật tài khoản khách hàng Admin cập nhật tài khoản của khách hàng.

12 Thêm món ăn Admin thêm món ăn vào hệ thống 13 Xóa món ăn Admin xóa món ăn ra khỏi hệ thống. 14 Cập nhật thông tin món ăn Admin cập nhật thông tin món ăn 15 Thêm bàn ăn Admin thêm bàn ăn vào hệ thống 16 Xóa bàn ăn Admin xóa bàn ăn ra khỏi hệ thống. 17 Cập nhật thông tin bàn ăn Admin cập nhật thông tin bàn ăn 11 18 Quản lý đặt bàn Xem thông tin chi tiết khách hàng đặt bàn 2.5 Đặc tả Use-case Use-Case “Đăng nhập” Bảng 3. 3 Use-case đăng nhập Tóm tắt - Use-case được sử dụng để đăng nhập vào hệ thống.

Chỉ khi đăng nhập được vào hệ thống thì người dùng mới được cấp quyền sử dụng các chức năng nghiệp vụ của hệ thống. - Use-case bắt đầu khi hệ thống được kích hoạt và chưa đăng nhập dưới quyền sử dụng của bất kỳ người dùng nào. Hoặc khi người dùng chọn đăng xuất ra khỏi hệ thống. Dòng sự kiện chính 1.

Người dùng nhập thông tin tài khoản đăng nhập, bao gồm tên đăng nhập và mật khẩu đăng nhập. Hệ thống kiểm tra thông tin đăng nhập chính xác. Hiển thị trang thông tin quản lý công việc, quản lý chi tiêu cá nhân. Dòng sự kiện phụ 1.

Hệ thống kiểm tra thông tin đăng nhập không chính xác. Hiển thị báo lỗi trên màn hình đăng nhập. Các yêu cầu đặc biệt - Có kết nối internet Tiền điều kiện - Trạng thái chưa đăng nhập. (pre-condition) - Hệ thống đã được kết nối thành công tới server.

Hậu điều kiện - Hệ thống rơi vào một trong hai trạng thái: (post-condition) 12 + Đã đăng nhập: sẵn sàng làm việc với người dùng đã đăng nhập. + Chưa đăng nhập: sẵn sàng cho người dùng đăng nhập lại. - Hệ thống sẵn sàng cho các thao tác từ người dùng. Use-Case “Đăng xuất” Bảng 3.

4 Use-case đăng xuất Tóm tắt - Use-case được sử dụng để đăng xuất ra khỏi hệ thống. Sau khi đăng xuất, hệ thống sẽ kết thúc phiên làm việc của người dùng, dữ liệu và phiên làm việc của người dùng sẽ được xóa bỏ tại local. - Use-case bắt đầu khi hệ thống đang ở trạng thái “Đã đăng nhập” và người dùng muốn kết thúc phiên làm việc và chọn đăng xuất ra khỏi hệ thống. Dòng sự kiện chính 1.

Hệ thống kết thúc phiên làm việc với người dùng, hệ thống chuyển sang trạng thái “Chưa đăng nhập”. Hệ thống xóa toàn bộ dữ liệu của người dùng trong local (thiết bị đang sử dụng). Hệ thống quay trờ về màn hình đăng nhập. Dòng sự kiện phụ - Hệ thống gặp lỗi trong quá trình xóa dữ liệu.

Hệ thống sẽ báo lỗi cho người dùng, tiếp tục đăng xuất ra khỏi hệ thống. Dữ liệu chưa được xóa hết sẽ được làm mới trong quá use-case đồng bộ dữ liệu. Các yêu cầu đặc biệt Không có Tiền điều kiện - Hệ thống đang ở trong trạng thái “Đã đăng nhập”. (pre-condition) Hậu điều kiện - Hệ thống sẽ rơi vào trạng thái “Chưa đăng nhập”.

13 (post-condition) - Dữ liệu người dùng trong hệ thống được làm mới. - Hệ thống sẵn sàng cho các thao tác từ người dùng. Use-Case “Đăng ký tài khoản” Bảng 3. 5 Use-case đăng ký tài khoản Tóm tắt - Use-case được sử dụng để tạo mới thông tin người dùng hệ thống, đăng ký tài khoản sử dụng hệ thống.

- Use-case bắt đầu khi hệ thống đang ở trạng thái “Chưa đăng nhập” và người dùng chọn khởi tạo tài khoản hệ thống. Dòng sự kiện chính 1. Người dùng nhập thông tin đăng ký: thông tin cá nhân được yêu cầu, thông tin tài khoản đăng nhập. Hệ thống kiểm tra tính hợp lệ thông tin đăng ký của người dùng.

Hệ thống xác định thông tin đăng ký hợp lệ. Hệ thống đăng ký thông tin người sử dụng, và cấp quyền cho người dùng vừa đăng ký. Hệ thống thông báo người dùng đã được đăng ký thành công cho người dùng. Hệ thống hiển thị trang chủ của cửa hàng Dòng sự kiện phụ 1.

Hệ thống xác định thông tin đăng ký không hợp lệ: trùng lắp, không chính xác, v. Hệ thống báo lỗi ra màn hình đăng ký. Các yêu cầu đặc biệt - Có kết nối internet. Tiền điều kiện - Hệ thống đang ở trong trạng thái “Chưa đăng nhập”.

(pre-condition) - Hệ thống đã được kết nối thành công tới server. Hậu điều kiện - Hệ thống sẽ rơi vào trạng thái “đã đăng nhập”. (post-condition) - Hệ thống sẵn sàng cho các thao tác từ người dùng. 14 Use-Case “Thêm account” Bảng 3.

8 Use-case thêm account Tóm tắt - Use-case được sử dụng để thêm thông tin một tài khoản vào hệ thống. Dòng sự kiện chính 1. Quản lý điền thông tin của nhân viên mới vào hệ thống 2. Hệ thống kiểm tra tính hợp lệ thông tin 3.

Xác nhận thông tin hợp lệ 4. Hệ thống thêm thông tin nhân viên vào cơ sở dữ liệu nếu hợp lệ. Dòng sự kiện phụ 1. Hệ thống xác định thông tin nhân viên không hợp lệ 2.

Thông báo ra màn hình thông tin không hợp lệ Các yêu cầu đặc biệt - Có kết nối internet. Tiền điều kiện - Hệ thống đang ở trong trạng thái “đăng nhập”. (pre-condition) - Hệ thống đã được kết nối thành công tới server. Hậu điều kiện - Hệ thống sẵn sàng cho các thao tác từ người dùng.

(post-condition) Use-Case “Thêm bàn” Bảng 3. 9 Use-case thêm bàn Tóm tắt - Use-case được sử dụng để thêm thông tin một bàn ăn vào hệ thống. - Use-case bắt đầu khi ở trạng tháí “đã đăng nhập” và nhân viên chọn chức năng thêm bàn ăn Dòng sự kiện chính 1. Quản lý điền thông tin của bàn ăn mới vào hệ thống 2.

Hệ thống kiểm tra tính hợp lệ thông tin 3. Xác nhận thông tin hợp lệ 15 4. Hệ thống thêm thông tin bàn ăn vào cơ sở dữ liệu nếu hợp lệ. Dòng sự kiện phụ 1.

Hệ thống xác định thông tin bàn ăn không hợp lệ 2. Thông báo ra màn hình thông tin không hợp lệ Các yêu cầu đặc biệt - Có kết nối internet. Tiền điều kiện - Hệ thống đang ở trong trạng thái “đăng nhập”. (pre-condition) - Hệ thống đã được kết nối thành công tới server.

Hậu điều kiện - Hệ thống sẵn sàng cho các thao tác từ người dùng. (post-condition) Use-Case “Xem món ăn” Bảng 3.