Đồ án xây dựng website hỗ trợ đặt tour du lịch

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN MÔN HỌC ĐỀ TÀI: XÂY DỰNG WEBSITE HỖ TRỢ ĐẶT TOUR DU LỊCH Giảng viên hướng dẫn: ThS Thái Thụy Hàn Uyển Sinh viên: Nguyễn Cơng Đồn - 20520447 Phan Nhật Lâm - 20520608 Tp.Hồ Chí Minh, tháng 06 năm 2023 Lời cảm ơn Lời đầu tiên, nhóm chúng em xin cảm ơn cô Thái Thụy Hàn Uyển tạo điều kiện cho nhóm thực đồ án, cung cấp kiến thức hữu ích, góp ý thực tế để từ nhóm phát triển thêm hiểu biết mảng lập trình web, dự án Dù có nhiều cố gắng thực hiện, song lượng kiến thức mảng thời gian để phát triển dự án có hạn, nên nhóm khơng thể tránh khỏi thiếu sót Nhóm mong nhận thơng cảm, góp ý hữu ích từ để từ nhóm hồn thiện sản phẩm Nhóm thực Trường Đại học Công nghệ Thông tin, tháng năm 2023 MỤC LỤC CHƯƠNG I GIỚI THIỆU ĐỀ TÀI .4 1.1 Giới thiệu chung 1.2 Mục tiêu đề tài 1.2.1 Lý thuyết 1.2.2 Mục tiêu 1.3 Quá trình thực 1.4 Tổng quan chức 1.4.1 Khách du lịch 1.4.2 Quản lý CHƯƠNG II CƠ SỞ LÝ THUYẾT 2.1 ReactJS 2.1.1 Tổng quan 2.1.2 Đặc trưng ReactJS 2.1.3 Ưu điểm nhược điểm 10 2.1.3.1 Ưu điểm 10 2.1.3.2 Nhược điểm 11 2.2 NodeJS 11 2.2.1 Tổng quan 11 2.2.2 Lý nên sử dụng NodeJS .12 2.2.3 Ưu nhược điểm .12 2.2.3.1 Ưu điểm 12 2.2.3.2 Nhược điểm 12 2.3 MongoDB 13 2.3.1 Tổng quan 13 2.3.2 Cách thức hoạt động 14 2.3.3 Ưu điểm nhược điểm 15 CHƯƠNG III XÂY DỰNG HỆ THỐNG 16 3.1 Xây dựng kiến trúc hệ thống 16 3.1.1 Công nghệ sử dụng 16 3.1.2 Kiến trúc hệ thống: Mơ hình MVC 16 3.1.3 Sơ đồ Use-case 17 3.1.4 Mô tả Use-case 18 3.1.5 Đặc tả Use-case 18 3.2 Mơ tả hình 30 3.2.1 Màn hình đăng nhập 30 3.2.2 Màn hình đăng ký 31 3.2.3 Màn hình trang chủ 32 3.2.4 Màn hình tour du lịch .33 3.2.5 Màn hình chi tiết tour du lịch 34 3.2.6 Màn hình tốn hóa đơn 35 3.2.7 Màn hình chọn hình chuyển khoản 36 3.2.8 Màn hình cập nhật tài khoản 37 3.2.9 Màn hình danh sách người dùng .38 3.2.10 Màn hình thêm người dùng 39 3.2.11 Màn hình chỉnh sửa thơng tin người dùng 39 3.2.12 Màn hình danh sách tour du lịch 40 3.2.13 Màn hình tour du lịch 41 3.2.14 Màn hình chỉnh sửa thơng tin tour du lịch 42 3.2.15 Màn hình danh sách đặt tour du lịch 43 3.2.16 Màn hình chi tiết đặt tour du lịch 44 3.3 Sơ đồ lớp .45 3.4 Sơ đồ hoạt động 45 3.4.1 Đăng nhập 45 3.4.2 Đăng ký 46 3.4.3 Đặt tour toán 47 3.4.4 Tìm kiếm tour 48 CHƯƠNG IV: KẾT LUẬN 50 4.1 Kết đạt 50 4.2 Ưu điểm 50 4.3 Nhược điểm giải pháp 50 CHƯƠNG I GIỚI THIỆU ĐỀ TÀI 1.1 - Giới thiệu chung Ngày nay, công nghệ thơng tin phát triển nhanh chóng, ngày nhiều lĩnh vực cần ứng dụng sản xuất, tài chính, y tế, Và việc ứng dụng công nghệ thông tin giúp cho thao tác lĩnh vực trở nên dễ dàng nhanh chóng - Nhất lĩnh vực du lịch, công nghệ thông tin giúp tiết kiệm thời gian tiền bạc người dân du lịch Việc đặt tour khơng cịn vấn đề lớn họ đặt tour trực tuyến, mà không cần phải đến trực tiếp trung tâm tư vấn tour - Tuy nhiên, nhu cầu ngày tăng cao, số lượng địa điểm du lịch tăng, người dân lại hoang mang, nên đặt tour du lịch Hơn nữa, họ phân vân, khơng biết lịch trình, hay chất lượng tour nào, dẫn đến việc hoàn thành đặt tour du lịch, chất lượng trải nghiệm thực tế họ không mong muốn Vì thế, việc xây dựng ứng dụng đặt tour giải vấn đề cần thiết - Bắt nguồn từ ý tưởng trên, nhóm xây dựng phát triển đồ án “XÂY DỰNG WEBSITE HỖ TRỢ ĐẶT TOUR DU LỊCH” để hỗ trợ cho người dân có gợi ý tour du lịch hay, nguồn thơng tin tham khảo hữu ích, trải nghiệm người dùng thuận lợi 1.2 Mục tiêu đề tài 1.2.1 Lý thuyết - Nghiên cứu ngơn ngữ lập trình Javascript framework ReactJS - Nghiên cứu thao tác làm việc phát triển ứng dụng web Visual Studio Code - Nghiên cứu sử dụng ứng dụng lưu trữ sở liệu đám mây - MongoDB - Nghiên cứu phát triển ứng dụng nhiều tảng 1.2.2 - Mục tiêu Người dùng đặt tour cách dễ dàng - Người dùng tìm kiếm, nhận gợi ý tour từ ứng dụng, tương tự website đặt tour điển hình 1.3 - Giao diện phái thân thiện với người dùng Quá trình thực Trải qua trình tìm hiểu thực đề tài, nhóm giải vấn đề đặt ban đầu, bước giải liên tục đặt vấn đề để ngày hoàn thiện sản phẩm Những bước thực hiện: - Phân tích u cầu tốn - Lựa chọn tảng công nghệ phù hợp với yêu cầu - Nghiên cứu sở lý thuyết công nghệ lựa chọn - Áp dụng lý thuyết vào xây dựng ứng dụng thực tiễn - Kiểm tra khám phá ứng dụng tương tự để tối ưu hóa trải nghiệm người dùng cải thiện tính cho ứng dụng 1.4 Tổng quan chức 1.4.1 - Khách du lịch Khách hàng đăng nhập thơng qua tài khoản đăng ký (bao gồm username, password) - Khách xem thông tin tour du lịch, tiện nghi có lên quan - Khách hàng xếp thời gian chuyến đi, đặt chỗ tour du lịch - Khách hàng xem review người dùng khác, để lại đánh giá - Khách hàng thêm địa điểm du lịch vào danh sách yêu thích - Khách hàng tìm kiếm thơng tin tour du lịch, thơng qua từ khóa mà họ nhập vào, thơng qua nhóm tour phân loại 1.4.2 Quản lý Quản lý có trách nhiệm thêm tour mới, xóa tour cũ, khơng phù hợp, cập nhật thông tin tour (VD: thời gian chuyến đi, địa điểm dừng chân, ) CHƯƠNG II CƠ SỞ LÝ THUYẾT 2.1 ReactJS 2.1.1 - Tổng quan ReactJS thư viện JavaScript mã nguồn mở thiết kế Facebook để tạo ứng dụng web hấp dẫn, nhanh hiệu với mã hóa tối thiểu Mục đích cốt lõi ReactJS không khiến cho trang web phải thật mượt mà phải nhanh, khả mở rộng cao đơn giản - Sức mạnh xuất phát từ việc tập trung vào thành phần riêng lẻ Chính vậy, thay làm việc tồn ứng dụng web, ReactJS cho phép developer phá vỡ giao diện người dùng phức tạp thành thành phần đơn giản 2.1.2 Đặc trưng ReactJS 2.1.2.1 JSX Hình 2.1 Đặc trưng - JSX - Trong React, thay thường xuyên sử dụng JavaScript để thiết kế bố cục trang web dùng JSX JSX đánh giá sử dụng đơn giản JavaScript cho phép trích dẫn HTML việc sử dụng cú pháp thẻ HTML để render subcomponent JSX tối ưu hóa code biên soạn, chạy nhanh so với code JavaScript tương đương 2.1.2.2 Redux Hình 2.2 Đặc trưng thứ hai - Redux - Redux predictable state management tool cho ứng dụng Javascript Nó giúp bạn viết ứng dụng hoạt động cách quán, chạy môi trường khác (client, server, and native) dễ dàng để test Redux đời lấy cảm hứng từ tư tưởng ngôn ngữ Elm kiến trúc Flux Facebook Do Redux thường dùng kết hợp với React 2.1.2.3 Single-way data flow (Luồng liệu chiều) Hình 2.3 Đặc trưng thứ ba - Single-way Data flow 3.2.8 Màn hình cập nhật tài khoản Hình 3.10 Màn hình cập nhật tài khoản STT Biến cố Xử lý Nhấn icon lịch Thực lựa chọn ngày sinh Nhấn nút “Update” Cập nhật thông tin chỉnh sửa người dùng Bảng 3.8 Mô tả hình cập nhật tài khoản 38 3.2.9 Màn hình danh sách người dùng Hình 3.11 Màn hình Danh sách người dùng STT Biến cố Xử lý Nhấn icon mắt Chuyển đến hình xem thơng tin người dùng Nhấn icon bút chì Chuyển đến hình cập nhật thông tin người dùng Nhấn icon thùng rác Thực xóa tài khoản người dùng Bảng 3.9 Mơ tả hình Danh sách người dùng 39 3.2.10 Màn hình thêm người dùng Hình 3.12 Màn hình thêm người dùng STT Biến cố Xử lý Nhấn icon lịch Thực lựa chọn ngày sinh Nhấn nút “Create” Thực thêm tài khoản người dùng Bảng 3.10 Mơ tả hình thêm người dùng 3.2.11 Màn hình chỉnh sửa thơng tin người dùng Hinh 3.13 Màn hình chỉnh sửa thơng tin người dùng 40 STT Biến cố Xử lý Nhấn icon lịch Thực thay đổi ngày sinh Nhấn nút “Update” Thực cập nhật tài khoản người dùng Bảng 3.11 Mô tả hình chỉnh sửa thơng tin người dùng 3.2.12 Màn hình danh sách tour du lịch Hình 3.14 Màn hình Danh sách tour du lịch STT Biến cố Xử lý Nhấn icon mắt Chuyển đến hình xem thơng tin tour du lịch Nhấn icon bút chì Chuyển đến hình cập nhật thơng tin tour du lịch Nhấn icon thùng rác Thực xóa tour du lịch Bảng 3.12 Mơ tả hình Danh sách người dùng 41 3.2.13 Màn hình tour du lịch Hình 3.15 Màn hình thêm tour du lịch STT Biến cố Xử lý Nhấn icon lịch Thực lựa chọn ngày sinh Nhấn nút “Choose File” Thực chọn hình ảnh có sẵn từ đường dẫn xác định Nhấn nút “Create” Thực thêm tour du lịch Bảng 3.13 Mơ tả hình thêm tour du lịch 42 3.2.14 Màn hình chỉnh sửa thơng tin tour du lịch Hình 3.16 Màn hình chỉnh sửa thơng tin tour du lịch STT Biến cố Xử lý Nhấn icon lịch Thực thay đổi ngày bắt đầu & ngày kết thúc tour 43 Nhấn nút “Choose File” Thực chọn hình ảnh có sẵn từ đường dẫn xác định Nhấn nút “Update” Thực cập nhật tài khoản người dùng Bảng 3.14 Mô tả hình chỉnh sửa thơng tin tour du lịch 3.2.15 Màn hình danh sách đặt tour du lịch Hình 3.17 Màn hình Danh sách đặt tour STT Biến cố Xử lý Nhấn icon mắt Chuyển đến hình xem thông tin đặt tour Nhấn icon thùng rác Thực xóa thơng tin đặt tour Bảng 3.15 Mơ tả hình Danh sách đặt tour 44 3.2.16 Màn hình chi tiết đặt tour du lịch Hình 3.18 Màn hình chi tiết đặt tour STT Biến cố Nhấn combobox Xử lý “Payment Thực thay đổi trạng thái đặt tour Status” Nhấn nút “Update Status” Thực cập nhật trạng thái đặt tour Nhấn nút icon hình ảnh Thực lựa chọn hình ảnh tốn đặt tour Bảng 3.16 Mơ tả hình chi tiết đặt tour 45 3.3 Sơ đồ lớp Hình 3.19 Sơ đồ lớp hệ thống 3.4 Sơ đồ hoạt động 3.4.1 Đăng nhập Hình 3.20 Sơ đồ hoạt động chức Đăng nhập 46 3.4.2 Đăng ký Hình 3.21 Sơ đồ hoạt động chức Đăng ký 47 3.4.3 Đặt tour tốn Hình 3.22 Sơ đồ hoạt động chức Đặt tour Thanh toán 48 3.4.4 Tìm kiếm tour Hình 3.23 Sơ đồ hoạt động chức Tìm kiếm tour 3.4.5 Quản lý tour Hình 3.24 Sơ đồ hoạt động chức Quản lý tour 49 3.4.6 Quản lý khách hàng Hình 3.25 Sơ đồ hoạt động chức Quản lý khách hàng 3.4.7 Quản lý danh sách đặt chỗ Hình 3.26 Sơ đồ hoạt động chức Quản lý danh sách đặt chỗ 50 CHƯƠNG IV: KẾT LUẬN 4.1 Kết đạt - Phát triển sản phẩm hoàn chỉnh - Áp dụng hiệu kiến thức học phát triển, bảo trì phần mềm - Tìm hiểu kiến trúc phần mềm - Học cách sử dụng công cụ Visual Studio Code để phát triển ứng dụng - Học cách thiết kế trang web với ReactJS, ngôn ngữ Javascript, quản lý sở liệu thông qua MongoDB 4.2 Phân công công việc hợp lý với chức xác định Ưu điểm - Ứng dụng dễ dàng sử dụng - Giao diện thân thiện với người dùng, trải nghiệm sử dụng tốt - Đáp ứng với nhu cầu tìm kiếm khách du lịch - Dễ dàng quản lý liệu sở liệu - Tính áp dụng cao 4.3 - Nhược điểm giải pháp Phương thức tốn cịn hạn chế - Giải pháp: Tìm hiểu bổ sung thêm phương thức tốn khác ví điện tử internet banking - Giao diện quản lý liệu tour du lịch, người dùng, đặt tour chưa bắt mắt - - Giải pháp: Cải thiện giao diện quản lý Thông tin hiển thị tour du lịch hạn chế - Giải pháp: Tìm hiểu bổ sung thơng tin (VD: lịch trình, địa điểm dừng chân, địa điểm tương tự…) - Xử lý biến cố thêm, xóa, sửa tour du lịch phần backend rườm rà, phức tạp - - Giải pháp: Tìm cách tối ưu thuật tốn xử lý luồng kiện Chưa mang lại trải nghiệm mượt mà - Giải pháp: Tìm cách tối ưu hệ thống 51 TÀI LIỆU THAM KHẢO Những điều cần biết React Js: https://topdev.vn/blog/reactjs-nhung-dieu-ban-can-phai-biet/ Ưu nhược điểm ReactJS: https://vietdev.com/community/articles/reactjs-co-uu-diem-va-nhuoc-diem-gi-eSp2kC/ Tổng quan NodeJS: https://vietnix.vn/nodejs-la-gi/ Tìm hiểu MongoDB: https://viblo.asia/p/tim-hieu-ve-mongodb-4P856ajGlY3 Tìm hiểu mơ hình MVC: https://viblo.asia/p/tim-hieu-mo-hinh-mvc-danh-cho-nguoi-moi-bat-dau-cau-truc-va-vi-d u-V3m5WLDyKO7 52