Đồ án xây dựng website quản lý tour du lịch

ĐẠ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 ĐỒ ÁN Đề Tài: XÂY DỰNG WEBSITE QUẢN LÝ TOUR DU LỊCH Giảng viên hướng dẫn: ThS Trần Thị Hống Yến Thành viên: Vũ Phạm Ngọc Tân - 19520930 Thành phố Hồ Chí Minh, năm 2023 i ĐẠ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 ĐỒ ÁN Đề Tài: XÂY DỰNG WEBSITE QUẢN LÝ TOUR DU LỊCH Giảng viên hướng dẫn: ThS Trần Thị Hống Yến Thành viên: Vũ Phạm Ngọc Tân - 19520930 Thành phố Hồ Chí Minh, năm 2023 ii LỜI CẢM ƠN Sau q trình học tập rèn luyện khoa Cơng nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM em trang bị kiến thức bản, kỹ thực tế để lần đầu thực Đồ án Để hoàn thành Đồ án này, em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Cơng nghệ Thơng tin – ĐHQG TP.HCM tạo điều kiện sở vật chất với hệ thống thư viện đại, đa dạng loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thông tin Em xin gửi lời cảm ơn chân thành đến Trần Thị Hồng Yến tận tình giúp đỡ, định hướng cách tư cách làm việc khoa học Đó góp ý quý báu khơng q trình thực luận văn mà hành trang tiếp bước cho chúng em trình học tập lập nghiệp sau Và cuối cùng, chúng em xin gửi lời cảm ơn đến gia đình, tất thầy khoa, bạn bè, tập thể lớp KTPM2019 người sẵn sàng sẻ chia giúp đỡ học tập sống Mong rằng, mãi gắn bó với Trong q trình làm Đồ án em khơng tránh khỏi sai sót, em kính mong nhận dẫn góp ý q thầy để hồn thiện phát triển đồ án tương lai Em xin chân thành cảm ơn Xin chúc điều tốt đẹp ln đồng hành người Thành phố Hồ Chí Minh, … tháng … năm 2023 Sinh viên Vũ Phạm Ngọc Tân iii NHẬN XÉT CỦA GIẢNG VIÊN iv MỤC LỤC LỜI CẢM ƠN iii NHẬN XÉT CỦA GIẢNG VIÊN iv MỤC LỤC v DANH MỤC HÌNH ẢNH vii NỘI DUNG Chương 1: Tóm tắt đề tài 1.1 Tổng quan đề tài .1 1.2 Lý chọn đề tài 1.3 Đối tượng sử dụng 1.4 Phạm vi nghiên cứu .2 Chương 2: Cơ sỏ lý thuyết 2.1 ReactJS 2.2 NextJs 2.3 JavaScript 2.4 Firebase .4 2.5 HTML 2.6 Tailwind 2.7 Github Chương 3: Hiện thực hệ thống 3.1 Đặc tả Use-case .7 3.1.1 Sơ đồ Use case 3.1.2 Danh sách tác nhân v 3.1.3 Danh sách Use case .8 3.1.4 Mô tả Use case 3.2 Thiết kế liệu .21 3.2.1 Sơ đồ hoàn chỉnh 21 3.2.2 Danh sách bảng liệu (table) sơ đồ: 22 3.2.3 Mô tả bảng liệu 23 3.3 Thiết kế hệ thống 27 3.3.1 Kiến trúc hệ thống: Mơ hình lớp 27 3.3.2 Chi tiết thành phần hệ thống 28 3.4 Thiết kế giao diện 29 3.4.1 Danh sách hình 29 3.4.2 Mô tả chi tiêt hình 30 Chương 4: Tổng kết 50 4.1 Cài đặt kiểm thử 50 4.2 Kết luận 51 4.2.1 Đánh giá 51 4.2.2 Hướng phát triển tương lai 52 4.3 Link Github 52 TÀI LIỆU THAM KHẢO 53 vi DANH MỤC HÌNH ẢNH HÌnh 2.1: React JS HÌnh 2.2 Next JS HÌnh 2.3 Javascript HÌnh 2.4 Firebase HÌnh 2.5 HTML HÌnh 2.6 Tailwind HÌnh 2.7 Github HÌnh 3.1 Sơ đồ Use case HÌnh 3.2 Sơ đồ liệu quan hệ 21 HÌnh 3.3 Sơ đồ mơ hình lớp 27 HÌnh 3.4 Màn hình đăng nhập 30 HÌnh 3.5 Màn hình đăng ký 31 HÌnh 3.6 Trang chủ 32 HÌnh 3.7 Màn hình tin tức 33 HÌnh 3.8 Màn hình Liên hệ 34 HÌnh 3.9 Màn hình chi tiết viết 35 HÌnh 3.10 Màn hình chi tiết tour 36 HÌnh 3.11 Màn hình đăng ký tour 37 HÌnh 3.12 Màn hình hồ sơ người dùng 38 HÌnh 3.13 Màn hình lịch sử tour 40 HÌnh 3.14 Màn hình trang chủ - Admin 41 HÌnh 3.15 Màn hình tour -Admin 42 vii HÌnh 3.16 Màn hình tạo tour 43 HÌnh 3.17 Màn hình tin tức – Admin 44 HÌnh 3.18 Màn hình tao viết 45 HÌnh 3.19 Màn hình lịch sử đặt tour – Admin 46 HÌnh 3.20 Màn hình sửa phiếu đặt tour 47 HÌnh 3.21 Màn hình hồ sơ cá nhân – Admin 49 viii NỘI DUNG Chương 1: Tóm tắt đề tài 1.1 Tổng quan đề tài • Tên ứng dụng: GoWorld • Chủ đề chính: Website Quản lý tour du lịch • Nền tảng phát triển: ReactJS, NextJS • Mơ hình phát triển: MVC 1.2 Lý chọn đề tài Du lịch Việt Nam Nhà nước Việt Nam xem ngành kinh tế mũi nhọn cho đất nước Việt Nam có tiềm du lịch đa dạng phong phú Đặc biệt, sau đợt đại dịch COVID khiến toàn xã hội phải tiến vào trạng thái cách ly, ngành du lịch ngày bùng nổ Với phát triển này, nhà kinh doanh lĩnh vực du lịch nhu cầu phát triển website hỗ trợ đặt tour du lịch trực tuyển vô cần thiết để tạo hội tiếp cận với khách hàng dễ dàng tối ưu hóa hoạt động họ thông qua công nghệ Một website hỗ trợ đặt tour du lịch góp phần lớn cho khách hàng truy cập doanh nghiệp kinh doanh: • Khách hàng: cung cấp tảng cho phép khách hàng tiếp cận với thông tin tour du lịch cách nhanh nhất, xác trực quan nhất, giảm thiểu thời gian đến trực tiếp đại lý trước • Doanh nghiệp: tổi ưu hóa q trình quản lý tour có, thu thập thơng tin sở thích, xu hướng khách hàng dễ dàng từ đưa chiến lược kinh doanh hợp lý 1.3 Đối tượng sử dụng Các doanh nghiệp, công ty hoạt động lĩnh vực du lịch Các khách hàng có nhu cầu đặt tour du lịch 1.4 Phạm vi nghiên cứu Nền tảng hỗ trợ: Triển khai website • Chức năng: • Hệ thống đặt tour khách hàng: khách hàng đặt tour trực tuyến xem thơng tin tour • Hệ thống đăng du lịch: cung cấp thông tin địa điểm du lịch xu hướng, điểm tham quan, trị chơi, ăn đến nơi du lịch dạng blog • Quản lý tour du lịch: quản lý thông tin tour, theo dõi liệu trạng thái tour • Quản lý liệu khách hàng: khách hàng tạo tài khoản để lưu thông tin cá nhân lịch sử đặt tour • Tích hợp hệ thống tốn: tích hợp với cổng toán phổ biến để thực giao dịch trực tuyến an tồn • Báo cáo phân tích: khả tạo báo cáo phân tích liệu để cung cấp thông tin cho định kinh doanh STT Tên đối tượng Loại Chức Tên Input Nhập tên người dùng Số điện thoại Input Nhập số điện thoại người dùng Email Input Nhập địa mail tài khoản Địa Input Nhập địa Cập nhật Button Mật Input Nhập mẫu Mật Input Nhập mật muốn đổi Nhập lại mật Input Xác nhận mật Thay đổi mật Button Thực đổi mật 39 Thực cập nhật thông tin tài khoản theo thông tin nhập 3.4.2.9 Lịch sử đặt tour – người dùng HÌnh 3.13 Màn hình lịch sử tour Chức cung cấp: Cho phép người dùng xem danh sách tour mà đặt trước Mơ tả hình: STT Tên đối tượng Loại List order List Order Item Item 40 Chức Danh sách phiếu đặt, bao gồm Order Item Mở cửa sổ xem thông tin chi tiết phiếu đặt 3.4.2.10 Trang chủ - Admin HÌnh 3.14 Màn hình trang chủ - Admin Chức cung cấp: Cho phép quản trị viên xem thông tin doanh thu, lượt khách tháng, biểu đồ phân tích Mơ tả hình: STT Tên đối tượng Loại Biểu đồ top 10 Chart Biểu đồ doanh thu Chart Thông tin tổng hợp tháng Chức Thể top 10 tour đặt nhiều tháng Thể doanh thu năm Hiển thị thông tin số đơn, Text đơn cần xác nhận tổng doanh thu tháng 41 3.4.2.11 Tour – Admin HÌnh 3.15 Màn hình tour -Admin Chức cung cấp: Cho phép quản trị viên xem quản lí (tạo mới, cập nhật, xóa) tour du lịch Mơ tả hình: STT Tên đối tượng Loại Danh sách tour List Tour Item Item Thêm Button 42 Chức Hiển thị danh sách tour du lịch, bao gồm Tour Item Mở cửa sổ chỉnh sửa/ xóa thơng tin tour Thêm tour du lịch HÌnh 3.16 Màn hình tạo tour Mơ tả hình: STT Tên đối tượng Loại Chức Hình ảnh Image Thay đổi hình ảnh đại diện tour Tên Input Nhập tên tour Checkin Input Nhập ngày bắt đầu Checkout Input Nhập ngày kết thúc Giá vé người lớn Input Nhập số tiền cho vé người lớn 43 Giá vé trẻ em Input Mô tả tour Input Mô tả dịch vụ Input Tạo Button Nhập số tiền cho giá vẻ trẻ em Thông tin chi tiết địa điểm du lịch Các dịch vụ tour, dịch vụ kèm Thêm/Sửa tour 3.4.2.12 Tin tức – Admin HÌnh 3.17 Màn hình tin tức - Admin Chức cung cấp: Cho phép quản trị viên xem quản lí (tạo mới, cập nhật, xóa) viết du lịch 44 Mơ tả hình: STT Tên đối tượng Loại Danh sách viết List Blog Item Item Thêm Button Chức Hiển thị danh sách viết du lịch, bao gồm Blog Item Mở cửa sổ chỉnh sửa/xóa thơng tin viết Thêm viết du lịch HÌnh 3.18 Màn hình tao viết Chức cung cấp: Cho phép người dùng xem danh sách tour du lịch tìm kiếm tour du lịch Mơ tả hình: 45 STT Tên đối tượng Loại Chức Hình ảnh Image Thay đổi hình ảnh đại diện viết Tên Input Nhập tên viết Tóm tắt Input Thơng tin tóm tắt viết Nội dung Input Nội dung viết Tạo Button Thêm/Sửa viết 3.4.2.13 Lịch sử đặt tour – Admin HÌnh 3.19 Màn hình lịch sử đặt tour - Admin 46 Chức cung cấp: Cho phép quản trị viên xem quản lí phiếu đặt Mơ tả hình: STT Tên đối tượng Loại Danh sách phiếu đặt List Order Item Item Tìm kiếm Input Chức Hiển thị danh sách phiếu đặt, bao gồm Order Item Mở cửa sổ chỉnh xem/sửa/ xóa thơng tin phiếu đặt Tìm kiếm phiếu đặt theo tên khách hàng, số điện thoại email HÌnh 3.20 Màn hình sửa phiếu đặt tour 47 Mơ tả hình: STT Tên đối tượng Loại Chức Tên khách hàng Input Nhập tên khách hàng Số điện thoại Input Nhập số điện thoại liên lạc Email Input Nhập địa mail đăng ký phiếu đặt Địa Input Nhập địa đón khách Số vé người lớn Input Nhập số vé người lớn Số vé trả em Input Nhập số vé trẻ em Ghi Input Nhập ghi khách hàng Trạng thái Input Trạng thái phiếu đặt Cập nhật Button Thay đổi thông tin phiếu đặt 10 Xóa Button Hủy phiếu đặt 48 3.4.2.14 Hồ sơ người dùng – Admin HÌnh 3.21 Màn hình hồ sơ cá nhân - Admin Chức cung cấp: Cho phép quản trị viên xem thay đổi thơng tin tài khoản Mơ tả hình: STT Tên đối tượng Loại Chức Tên Input Nhập tên người dùng Số điện thoại Input Nhập số điện thoại người dùng Email Input Nhập địa mail tài khoản Địa Input Nhập địa 49 Thực cập nhật thông tin tài Cập nhật Button Mật Input Nhập mẫu Mật Input Nhập mật muốn đổi Nhập lại mật Input Xác nhận mật Thay đổi mật Button Thực đổi mật 10 Đăng xuất Button Đăng xuất khỏi tài khoản khoản theo thông tin nhập Chương 4: Tổng kết 4.1 Cài đặt kiểm thử Mức độ hoàn STT Chức Đăng ký tài khoản 100 % Đổi mật 100 % Đăng nhập 100 % Xem thông tin tour 100 % 50 thành (%) Xem viết 100 % Đặt tour 100 % Cài đặt tài khoản 100 % Xem lịch sử tour 100 % Thêm/ sửa/ xóa tour danh sách 100 % 10 Thêm/ sửa/ xóa viết 100 % 11 Xem danh sách tour xác nhận tour đặt 100 % 12 Xem danh sách viết 100 % 13 Xem báo cáo 100% 4.2 Kết luận 4.2.1 Đánh giá Trong xã hội ngày phát triển nhu cầu du lịch ngày trở nên phổ biến Do đó, website hỗ trợ đặt tour du lịch đời phù hợp thông dụng Điều quan trọng làm website du lịch phải nắm thông tin chi tiết địa điểm du lịch để thơng tin cách minh bạch rõ ràng đến cho khách hàng Website quảng bá du lịch đặt tour trực tuyến tập trung cung cấp xoay quanh thông tin từ tổng quát đến chi tiết địa điểm, giá cả, chất lượng Cung cấp thông tin đến người dùng viết, thông tin giới thiệu 51 Với đề tài giúp cho chúng em củng cố thêm số kiến thức nhà trường bước đầu tạo cho chúng em niềm tin cho ngành mà chọn Tuy nhiên, website chúng em không tránh khỏi thiếu sót, chúng em mong nhận bảo tận tình q thầy đóng góp bạn bè để chương trình ngày hoàn thiện Cuối chúng em xin chân thành cảm ơn cô tạo điều kiện giúp đỡ chúng em hoàn thành đồ án cách thuận lợi 4.2.2 Hướng phát triển tương lai • Tổi ưu hóa code • Đầu tư, phát triển thêm giao diện • Nâng cấp thêm tính hỗ trợ người dùng 4.3 Link Github https://github.com/vuphamngoctan1612/GoWorld 52 TÀI LIỆU THAM KHẢO Ngoài tài liệu cung cấp suốt q trình học, nhóm cịn sử dụng tài liệu sau: [1] (n.d.) W3Schools Online Web Tutorials Retrieved July 17, 2023, from https://www.w3schools.com/ [2] Docs (n.d.) Next.js Retrieved July 17, 2023, from https://nextjs.org/docs [3] HTML CSS từ Zero đến Hero | by F8 (n.d.) F8 Retrieved July 17, 2023, from https://fullstack.edu.vn/courses/html-css [4] Installation (n.d.) Tailwind CSS Retrieved July 17, 2023, from https://tailwindcss.com/docs/ 53