Đồ án tìm hiểu reactjs và xây dựng web quản lý nhà hàng

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ĐỀ TÀI: TÌM HIỂU REACTJS VÀ XÂY DỰNG WEB QUẢN LÝ NHÀ HÀNG Giảng viên hướng dẫn: ThS Huỳnh Hờ Thị Mợng Trinh Nhóm thực hiện: 19522167 – Trương Xuân Tâm 19522025 – Võ Đông Phú MỤC LỤC MỤC LỤC LỜI CẢM ƠN Chương - TỔNG QUAN ĐỀ TÀI 1.1 Mô tả toán 1.2 Yêu cầu đặt 5 Chương - PHÂN TÍCH ĐẶC TẢ YÊU CẦU 2.1 Sơ đồ usecase 2.1.1 Use Case khách hàng 2.1.2 Use Case Admin 2.1.3 Danh sách Actor 2.1.4 Danh sách Use-case 2.1.5 Đặc tả Use-case 2.1.6 COMPONENT DIAGRAM, DEPLOYMENT 2.1.6.1 Component diagram 2.1.6.2 Deployment diagram 8 9 10 11 12 18 18 19 Chương : THIẾT KẾ KIẾN TRÚC DỮ LIỆU 3.1 Kiến trúc tổng thể hệ thống 3.2 Kiến trúc mơ hình 3.2.1 Cấu trúc mơ hình MVC 3.2.2 Mơ hình MVC ứng dụng Web 3.2.3 NodeJS 3.2.4 ReactJS 3.2.5 MongoDB 20 20 20 21 22 23 24 30 Chương : THIẾT KẾ DỮ LIỆU 4.1 Sơ đồ logic 4.2 Mô tả chi tiết kiểu liệu 4.2.1 Bảng user 4.2.2 Bảng AwersomeService 32 32 32 33 33 4.2.3 Bảng Table Type 4.2.4 Bảng Food 4.2.5 Bảng Booking 4.2.6 Bảng Image Gallery 34 34 35 36 Chương - Thiết kế giao diện 5.1 Danh sách hình 5.2 Mơ tả hình 5.2.1 Màn hình Register 5.2.2 Màn hình Log in 5.2.3 Màn hình đổi mật 5.2.4 Màn hình Home 5.2.5 Màn hình List Table 5.2.6 Màn hình Contact Us 5.2.7 Màn hình Book Online 5.2.8 Màn hình Book ăn 5.2.9 Màn hình quản lí tài khoản khách hàng 5.2.10 Màn hình thêm tài khoản khách hàng 5.2.11 Màn hình cập nhật tài khoản khách hàng 5.2.12 Màn hình quản lý ăn 5.2.13 Màn hình thêm ăn 5.2.14 Màn hình cập nhật thơng tin ăn 5.2.15 Màn hình quản lý bàn ăn 5.2.16 Màn hình thêm bàn ăn 5.2.17 Màn hình cập nhật thơng tin bàn ăn 5.2.18 Màn hình quản lý đặt bàn 5.2.19 Màn hình chi tiết thơng tin đặt bàn 37 37 38 38 40 42 43 48 50 50 51 53 53 54 55 56 56 57 58 58 59 60 CHƯƠNG 6: TỔNG KẾT 6.1 Công nghệ sử dụng 6.2 Mức độ hoàn thiện: 6.3.1 Kết đạt được: 6.3.2 Hướng phát triển: 61 61 61 62 62 CHƯƠNG 7: BẢNG PHÂN CÔNG CÔNG VIỆC 63 CHƯƠNG 8: TÀI LIỆU THAM KHẢO 64 LỜI CẢM ƠN Trong trình học tập, nghiên cứu phát triển đề tài chúng em nhận giúp đỡ, bảo nhiệt tình thầy để hồn thành đồ án Nhóm em xin chân thành gửi lời cảm ơn đến cô Huỳnh Hồ Thị Mộng Trinh – Giảng viên Khoa Công Nghệ Phần Mềm, Trường Đại học Công Nghệ Thơng Tin, Đại học Quốc gia Thành phố Hồ Chí Minh – giảng viên dạy hướng dẫn môn Đồ án 2, tận tình hướng dẫn giúp đỡ kiến thức, phương pháp cho chúng em suốt trình thực hồn thành đồ án Hi vọng với bảo góp ý từ cơ, nhóm đề tài tiếp tục phát triển để ứng dụng ngày mở rộng phục vụ tốt cho người dùng Mặc dù có nhiều cố gắng suốt trình thực đề tài, song khơng thể tránh khỏi hạn chế, thiếu sót Chúng em mong nhận đóng góp nhận xét chân thành từ cô, bạn sinh viên người dùng trình sử dụng phần mềm để phần mềm ngày hoàn thiện Mọi đóng góp xin vui lịng gửi email: 19522167@gm.uit.edu.vn 19522025@gm.uit.edu.vn Mỗi ý kiến đóng góp bạn nguồn động lực to lớn chúng em để chúng em cải thiện phần mềm tốt xây dựng phần mềm hữu ích người dùng Chúng em xin trân trọng cảm ơn Thành phố Hồ Chí Minh, ngày 10 tháng 12 năm 2022 Chương - TỔNG QUAN ĐỀ TÀI 1.1 Mơ tả tốn Trong thời buổi công nghệ thông tin, Internet bùng nổ nay, việc triển khai sử dụng website lĩnh vực quản lý nhà hàng khách sạn giúp tối ưu hóa giảm nhân cơng cơng việc phức tạp tính tốn, trích xuất xử lý nhanh giúp người dùng tiết kiệm thời gian mang lại cho họ cảm giác trải nghiệm tuyệt vời Việc xây dựng website quản lý thông tin nhà hàng hỗ trợ truyền thông, quảng bá thương hiệu Trang web nơi thể điều tốt đẹp diễn nhà hàng, hình ảnh video hay tin tức kiện cập nhật liên tục đem nhà hàng gần gũi với người sử dụng công nghệ Qua đó, nhà hàng tăng số lượng thực khách tạo 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 ăn, đặt bàn, tốn online làm cho khách hàng cảm thấy hứng thú tiết kiệm nhiều thời gian Qua website khách hàng nhân viên hệ thống tư vấn tận tình nhanh chóng Thơng qua website việc quản lý nhà hàng dễ dàng đạt hiệu cao Các công cụ đo lường, biểu đồ phát triển giúp người quản lý kiểm soát tất vấn đề nhà hàng Ngoài xây dựng website quản lý thông tin nhà hàng tiết kiệm khoảng chi phí, nguồn nhân lực Như vậy, tăng thêm tiềm lực cạnh tranh ngành Chính 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 dễ dàng quản lý thu chi, quản lý nhân viên, quản lý ăn thức uống Thúc đẩy phát triển nhà hàng, đại việc quản lý Trong 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 truy cập vào hệ thống đâu có internet để sử dụng chức nhà hàng 1.2 Yêu cầu đặt - Một số yêu cầu nhóm đặt 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 lứa tuổi + Tính đắn: thơng tin đưa lên phải xác thực kĩ độ xác, ứng dụng chạy khơng lỗi + Tính thích nghi: ứng dụng chạy nhiều tảng trình duyệt web khác + Tính tiến hố: ứng dụng phải dễ dàng phát triển thêm tính mà khơng ảnh hưởng đến tính phát triển trước + Tính bảo trì: ứng dụng thay đổi số chức cập nhật thêm thông tin cách tiện lợi + Tính tương tác: tạo môi trường tương tác tốt hệ thống người dùng Chương - PHÂN TÍCH ĐẶC TẢ U CẦU 2.1 Sơ đồ usecase Hình 2.1 Sơ đồ usecase hệ thống 2.1.1 Use Case khách hàng Hình 2.1.1 Usecase khách hàng 2.1.2 Use Case Admin Hình 2.1.2 Use Case Admin 2.1.3 Danh sách Actor Bảng Danh sách Actor STT Tên Actor Customer hàng) Ý nghĩa/Ghi (khách khách vãng lai, khách hàng order ăn ,đặt bàn, xem thông tin món ăn , danh sách món ăn,,, Admin quản lý toàn hệ thống 10 5.2.7.2 Xử lý hình STT Biến cố Xử lý Chọn button Book Now Thông tin đơn hàng lưu xác nhận 5.2.8 Màn hình Book ăn 5.2.8.1 Giao diện 51 52 Hình 5.2.7.1 a 5.2.8.2 Xử lý hình STT Biến cố Xử lý Chọn button ORDER Món ăn đưa vào danh sách đặt nút chuyển sang đặt Chọn button BOOK Hiện thông báo đặt thành công chuyển sang hình tốn 5.2.9 Màn hình quản lí tài khoản khách hàng 5.2.9.1 Giao diện 5.2.9.2 Xử lí hình STT Biến cố Xử lý 53 Chọn button “Add new user” Chuyển sang hình thêm tài khoản khách hàng Chọn button icon “bút chì” Chuyển qua hình cập nhật tài khoản khách hàng Chọn button icon “thùng rác” Xóa tài khoản khách hàng 5.2.10 Màn hình thêm tài khoản khách hàng 5.2.10.1 Giao diện 5.2.10.2 Xử lí hình STT Biến cố Xử lý Nhập thông tin vào input Kiểm tra thơng tin nhập vào có định dạng Chọn button “Submit” Thông báo thêm tài khoản khách hàng thành công chuyển qua hình quản lý khách hàng 5.2.11 Màn hình cập nhật tài khoản khách hàng 5.2.11.1 Giao diện 54 5.2.11.2 Xử lí hình STT Biến cố Xử lý Nhập thông tin vào ô input Kiểm tra thông tin nhập vào có định dạng Chọn button “Update” Thông báo cập nhật tài khoản khách hàng thành cơng chuyển qua hình quản lý khách hàng 5.2.12 Màn hình quản lý ăn 5.2.12.1 Giao diện 5.2.11.2 Xử lí hình 55 STT Biến cố Xử lý Chọn button “Add new food” Chuyển sang hình thêm ăn Chọn button icon “bút chì” Chuyển sang hình cập nhật thơng tin ăn Chọn button icon “thùng rác” Xóa ăn 5.2.13 Màn hình thêm ăn 5.2.13.1 Giao diện 5.2.13.2 Xử lí hình STT Biến cố Xử lý Nhập thông tin vào ô input Kiểm tra thơng tin nhập vào có định dạng Chọn button “Chọn tệp” Chọn hình ảnh cần chèn vào Chọn button “Submit” Thơng báo thêm ăn thành cơng chuyển qua hình quản lý ăn 56 5.2.14 Màn hình cập nhật thơng tin ăn 5.2.14.1 Giao diện 5.2.14.2 Xử lí hình STT Biến cố Xử lý Nhập thông tin vào ô input Kiểm tra thơng tin nhập vào có định dạng Chọn button “Chọn tệp” Chọn hình ảnh cần chèn vào Chọn button “Update” Thông báo cập nhật thơng tin ăn thành cơng chuyển qua hình quản lý ăn 5.2.15 Màn hình quản lý bàn ăn 5.2.15.1 Giao diện 57 5.2.15.2 Xử lí hình STT Biến cố Xử lý Chọn button “Add new table” Chuyển sang hình thêm bàn ăn Chọn button icon “bút chì” Chuyển sang hình cập nhật thông tin bàn ăn Chọn button icon “thùng rác” Xóa bàn ăn 5.2.16 Màn hình thêm bàn ăn 5.2.16.1 Giao diện 58 5.2.16.2 Xử lí hình STT Biến cố Xử lý Nhập thơng tin vào ô input Kiểm tra thông tin nhập vào có định dạng Chọn button “Chọn tệp” Chọn hình ảnh cần chèn vào Chọn button “Submit” Thơng báo thêm bàn ăn thành công chuyển qua hình quản lý bàn ăn 5.2.17 Màn hình cập nhật thơng tin bàn ăn 5.2.17.1 Giao diện 5.2.17.2 Xử lí hình 59 STT Biến cố Xử lý Nhập thông tin vào ô input Kiểm tra thông tin nhập vào có định dạng Chọn button “Chọn tệp” Chọn hình ảnh cần chèn vào Chọn button “Update” Thông báo cập nhật thông tin bàn ăn thành cơng chuyển qua hình quản lý bàn ăn 5.2.18 Màn hình quản lý đặt bàn 5.2.8.1 Giao diện 5.2.18.2 Xử lí hình STT Biến cố Xử lý Chọn button “Detail” Chuyển sang hình chi tiết thơng tin đặt bàn 5.2.19 Màn hình chi tiết thông tin đặt bàn 5.2.19.1 Giao diện 60 CHƯƠNG 6: TỔNG KẾT 6.1 Công nghệ sử dụng - Frontend : ReactJS Backend : NodeJS, ExpressJS Database : MongoDB IDE: Visual Studio Code Test API: Postman 6.2 Mức độ hoàn thiện: 61 STT Tên Use case Độ hoàn thiện Đăng nhập 80% Đăng ký 100% Đăng xuất 80% Thay đổi mật 70% Xem thông tin Món ăn 100% Xem thơng tin bàn 100% Các dịch vụ 80% Trang chủ 100% Đặt Bàn 100% 10 Nhập thông tin đặt bàn 100% 11 FlashSale 70% 12 Admin 90% 13 Contact Us 70 % 6.3 Kết đạt hướng phát triển 6.3.1 Kết đạt được: Ưu điểm: - Đáp ứng chức ứng dụng quản lí nhà hàng - Xây dựng luồng chức dễ hiểu, dễ sử dụng - Giao diện sáng hấp dẫn người nhìn - Rất nhiều hướng để phát triển thành trang web thương mại tương lai Nhược điểm: 62 - Ứng dụng cịn đơn giản, chưa tích hợp chức phức tạp - Chưa có phiên dành cho hệ điều hành android 6.3.2 Hướng phát triển: ● Đề tài chúng em xây dựng tương đối hoàn chỉnh, song chúng em tự nhận thấy đề tài của cịn nhiều thiếu sót để đề tài thêm phần phong phú, mang tính áp dụng thực tế hơn, có khả làm việc cao đề tài của em cần phải có thêm tính sau: ● Xây dựng thêm cách toán : Quét mã QR ● Tìm kiếm chi nhánh cửa hàng xung quanh người sử dụng thông qua google maps ● Phát triển ứng dụng đặt ăn mobile CHƯƠNG 7: BẢNG PHÂN CÔNG CÔNG VIỆC STT Nội dung công việc Người đảm nhận Trạng thái Chọn đề tài Xn Tâm - Đơng Phú Hồn thành Phân tích u cầu Xn Tâm Hồn thành Xn Tâm - Đơng Phú Hồn thành Thiết lập actor, chức Vẽ sơ đồ Use case Xuân Tâm Hoàn thành Vẽ sơ đồ thiết kế liệu Đơng Phú Hồn thành Viết đặc tả Use case Xuân Tâm Hoàn thành Quản lý git ,phân chia Xn Tâm Hồn thành 63 cơng việc Thiết kế giao diện Xuân Tâm Hoàn thành Cài đặt mơi trường Đơng Phú Hồn thành 10 Thiết kế CSDL Đơng Phú Hồn thành 11 Xây dựng backend Đơng Phú Hồn thành Xn Tâm - Đơng Phú Hồn thành 12 Xây dựng Front End 13 Xử lý kiện UI Xuân Tâm Hoàn thành 14 Xử lý liệu Đơng Phú Hồn thành 15 Kiểm thử ứng dụng Đơng Phú Hồn thành 16 Viết báo cáo Xn Tâm - Đơng Phú Hồn thành CHƯƠNG 8: TÀI LIỆU THAM KHẢO [1] Lập trình Javascript : https://fullstack.edu.vn/courses/javascript-co-ban [2] Xây dựng web ReactJS : https://fullstack.edu.vn/courses/reactjs https://reactjs.org/ [3] Học Backend với Node JS & Express JS framework https://fullstack.edu.vn/courses/nodejs [4] Học cách sử dụng Nodejs MongoDB: 64 https://www.youtube.com/watch?v=KQOPq0oO_R8&list=PLv6GftO355Aug0rwK fb6v96mlYrwOw7XV&ab_channel=ZendVN-H%E1%BB%8DcL%E1%BA%AD pTr%C3%ACnhOnline [5] Hướng dẫn cách kết nối API : https://www.tma.vn/Hoi-dap/Cam-nang-nghe-nghiep/Cach-ket-hop-NodeJS-o-back -end-voi-ReactJS-tren-front-end/21694 [6]Link git : Frontend: https://github.com/VoDongPhu/Restaurant-Management-Reactjs Backend: https://github.com/VoDongPhu/Restaurant-Management-Nodejs 65 ... dụng website quản lý thông tin nhà hàng Để tạo kết nối với khách hàng dễ dàng quản lý thu chi, quản lý nhân viên, quản lý ăn thức uống Thúc đẩy phát triển nhà hàng, đại việc quản lý Trong trình xây. .. xây dựng website quản lý thông tin nhà hàng hỗ trợ truyền thông, quảng bá thương hiệu Trang web nơi thể điều tốt đẹp diễn nhà hàng, hình ảnh video hay tin tức kiện cập nhật liên tục đem nhà hàng. .. soát tất vấn đề nhà hàng Ngoài xây dựng website quản lý thông tin nhà hàng tiết kiệm khoảng chi phí, nguồn nhân lực Như vậy, tăng thêm tiềm lực cạnh tranh ngành Chính nhóm em tìm hiểu để triển