TÌM HIỂU REACTJS và xây DỰNG WEB QUẢN lý RESORT

ĐẠ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Ý RESORT Giảng viên hướng dẫn: ThS Huỳnh Tuấn Anh Nhóm thực hiện: 19522167 – Trương Xuân Tâm 19521931 – Lê Anh Nhân MỤC LỤC MỤC LỤC LỜI CẢM ƠN Chương - TỔNG QUAN ĐỀ TÀI 1.1 Mơ tả tố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 Usecase khách hàng đặt phòng 2.1.2 Use Case khách vãng lai 2.2 Sequence Diagram 2.3 Danh sách Use case 2.4 Đặc tả Usecase 2.4.1 Đăng ký 2.4.2 Đăng nhập 2.4.3 Thay đổi mật 2.4.4 Đăng xuất 2.4.5 Trang chủ 2.4.6 Xem thông tin nhà hàng 2.4.7 Xem thông tin phòng 2.4.8 Đặt phòng 7 8 10 10 11 11 12 13 14 14 15 16 17 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 17 17 18 18 19 21 23 29 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 4.2.3 Bảng Favorite Restaurant 4.2.4 Bảng Type of Room 4.2.5 Bảng Booking 4.2.6 Bảng Image Gallery 30 30 31 31 31 32 33 33 34 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 Home 5.2.4 Màn hình List Rooms 5.2.6 Màn hình Contact Us 35 35 35 35 38 41 46 49 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: 52 52 52 53 53 CHƯƠNG 7: BẢNG PHÂN CÔNG CÔNG VIỆC 54 CHƯƠNG 8: TÀI LIỆU THAM KHẢO 55 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 thầy Huỳnh Tuấn Anh – 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 1, tận tình hướng dẫn giúp đỡ kiến thức, phương pháp cho chúng em suốt q trình thực hồn thành đồ án Hi vọng với bảo góp ý từ thầy, 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ừ thầy, bạn sinh viên người dùng trình sử dụng phần mềm để phần mềm ngày hồn thiện Mọi đóng góp xin vui lòng gửi email: 19522167@gm.uit.edu.vn 19521931@gm.uit.edu.vn Mỗi ý kiến đóng góp thầy 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 14 tháng 06 năm 2022 Chương - TỔNG QUAN ĐỀ TÀI 1.1 Mơ tả tốn - Hiện nay, sau Covid-19 qua, sống người dân dần vào ổn định bình thường Với đa số người, mà phải trải qua thời kì giãn cách xã hội lâu, du lịch lựa chọn hàng đầu Nhu cầu du lịch người Việt Nam năm 2022 lớn, đặc biệt du lịch nước Theo đó, có tới 76% du khách Việt Nam tham gia khảo sát lên kế hoạch du lịch giải trí nước vào năm 2022, cao nhiều so với tỷ lệ 38% số người lập kế hoạch du lịch nước - Thực tế, thấy rõ rằng, đời sống người dân ngày nâng cao, sở hạ tầng giao thông lại cải thiện đại hơn, kéo theo ô nhiễm môi trường ngày nặng nề, thế, người thường có xu hướng muốn tìm đến nơi gần gũi với thiên nhiên để nghỉ dưỡng thư giãn thoải mái hơn, bỏ lại tất khói bụi, ồn nơi thành phố - Bên cạnh đó, nhiều du khách có nhu cầu chuyển đổi điểm đến khác tour du lịch Chính thế, hãng du lịch cần chuẩn bị đầy đủ để phục vụ đáp ứng kịp thời cho khách du lịch - Nhận thấy vấn đề đó, ứng dụng quản lý Resort đời nhằm đáp ứng nhu cầu đặt phòng cách tiện lợi, minh bạch hơn, giải tốn thơng tin địa điểm, chất lượng nơi mà du khách đặt chân đến 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Ả YÊU CẦU 2.1 Sơ đồ usecase Hình 2.1 Sơ đồ usecase 2.1.1 Usecase khách hàng đặt phịng Hình 2.1.1 Usecase khách hàng 2.1.2 Use Case khách vãng lai Hình 2.1.2 Usecase khách vãng lai 2.2 Sequence Diagram Hình 2.2 Sequence diagram 2.3 Danh sách Use case STT Tên Use case Mô tả chung Đăng nhập Dùng tài khoản đăng ký đăng nhập vào hệ thống Đăng ký Đăng xuất Thay đổi mật Tạo tài khoản Thoát tài khoản khỏi hệ thống Cho phép người dùng thay đổi mật 5.2.3 Màn hình Home 5.2.3.1 Giao diện Hình 5.2.3.1 a Hình 5.2.3.1 b Hình 5.2.3.1 c Hình 5.2.3.1 d 1-2 Hình 5.2.3.1 e Hình 5.2.3.1 f Hình 5.2.3.1 g 5.2.3.2 Xử lý hình STT Biến cố Xử lý Chọn Home Reload lại trang home Chọn logo Zent Reload lại trang home Chọn Room Chuyển đến trang List Room Chọn Restaurant Chuyển đến trang List Restaurant Chọn Contact Us Chuyển đến trang Contact Us Chọn Book Online Chuyển đến trang Book Online Chọn icon user Lựa chọn Login Register để chuyển đến Login Register Chọn button Book A Room Now Chuyển đến trang Book Online Chọn giỏ hàng góc trái Chuyển đến trang Book Online 10 Button mũi tên góc phải (khi cuộn hình xuống đoạn xuất hiện) Để scroll đầu trang 11 View Details Chuyển đến trang List Room 12 View Room List Chuyển đến trang List Room 5.2.4 Màn hình List Rooms 5.2.4.1 Giao diện Hình 5.2.4.1 a Hình 5.2.4.1 b 5.2.4.2 Xử lý hình STT Biến cố Xử lý Chọn button Book Now Chuyển đến trang Book Online 5.2.5 Màn hình List Restaurant 5.2.5.1 Giao diện Hình 5.2.5.1 a Hình 5.2.5.1 b 5.2.5.2 Xử lý hình STT Biến cố Xử lý Chọn button Book Now Chuyển đến trang Book Online 5.2.6 Màn hình Contact Us 5.2.6.1 Giao diện Hình 5.2.6.1 5.2.6 Màn hình Book Online 5.2.6.1 Giao diện Hình 5.2.7.1 a Hình 5.2.7.1 b 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 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: STT Tên Use case Độ hoàn thiện Đăng nhập 80% Đăng ký 100% Đăng xuất 100% Thay đổi mật 70% Xem thơng tin nhà hàng 100% Xem thơng tin phịng 100% Các dịch vụ 80% Trang chủ 100% Đặt Phịng 100% 10 Nhập thơng tin đặt phịng 100% 11 FlashSale 70% 12 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 đặt phòng dịch vụ trực tuyến, đặc biệt liên quan trình quản lý trình đặt 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: - Ứng dụng đơ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: - Tiếp tục phát triển ứng dụng theo hướng thương mại hóa - Khảo sát người dùng để hồn thiện chức có phát triển thêm chức - Phát triển công cụ hỗ trợ người quản trị sở liệu - Phát triển giao diện nâng cao trải nghiệm người dùng - Tối ưu hóa code - Hồn thiện chức phát triển ứng dụng thành tour du lịch 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 Xuân Tâm - Anh Nhân Hoàn thành Phân tích u cầu Xn Tâm Hồn thành Xn Tâm - Anh Nhân Hoà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 Xuân Tâm Hoàn thành Viết đặc tả Use case Xuân Tâm Hoàn thành Quản lý git ,phân chia cơng việc Anh Nhân Hồn thành Thiết kế giao diện Anh nhân Hoàn thành Cài đặt mơi trường Xn Tâm - Anh Nhân Hồn thành 10 Thiết kế CSDL Anh Nhân Hoàn thành 11 Xây dựng backend Anh Nhân Hoàn thành Xuân Tâm - Anh Nhân Hoà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 Anh Nhân Hoàn thành 15 Kiểm thử ứng dụng Xuân Tâm - Anh Nhân Hoàn thành 16 Viết báo cáo Xuân Tâm - Anh Nhân Hoà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 NodeJS & ExpressJS framework https://fullstack.edu.vn/courses/nodejs [4] Học cách sử dụng Nodejs MongoDB: 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 ... dụng Web Với phát triển công nghệ xây dựng web Frontend Backend, nhà phát triển xây dựng phát triển ứng dụng web cách độc lập đảm bảo tính kiến trúc ứng dụng Hình 3.2.2 Mơ Hình MVC ứng dụng Web. .. 3.2.4 ReactJS Hình 3.2.4 Reactjs ReactJS gì? ReactJS thư viện JavaScript tạo để xây dựng giao diện người dùng có khả tương tác tốt nhanh chóng cho ứng dụng web di động Nó thư viện mã nguồn mở, xây. .. Chrome) NodeJS giúp nhà phát triển xây dựng ứng dụng web cách đơn giản dễ dàng mở rộng NodeJS dùng để xây dựng loại ứng dụng khác ứng dụng dòng lệnh, ứng dụng web, ứng dụng trò chuyện theo thời