Xây dựng website bán tour du lịch có hỗ trợ thanh toán trực tuyến

ĐẠ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 NGUYỄN TRUNG HIẾU - 19521508 NGUYỄN TIẾN DŨNG - 19521398 BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE BÁN TOUR DU LỊCH CĨ HỖ TRỢ THANH TỐN TRỰC TUYẾN Building a website to sell tours with online payment support GIẢNG VIÊN HƯỚNG DẪN THS THÁI THỤY HÀN UYỂN TP HỒ CHÍ MINH, 2022 ĐẠI HỌC QUỐC GIA TP.HCM TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN TRUNG HIẾU – 19521508 NGUYỄN TIẾN DŨNG – 19521398 BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE BÁN TOUR DU LỊCH CĨ HỖ TRỢ THANH TỐN TRỰC TUYẾN Building a website to sell tours with online payment support GIẢNG VIÊN HƯỚNG DẪN TH.S THÁI THỤY HÀN UYỂN TP HỒ CHÍ MINH, 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập – Tự Do – Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày 15 tháng năm 2022 ĐỀ CƯƠNG CHI TIẾT Tên đề tài: Xây dựng website bán tour du lịch có hỗ trợ thay toán Tên đề tài (tiếng Anh): Building a website to sell tours with online payment support Cán hướng dẫn: Th.s Thái Thụy Hàn Uyển Sinh viên thực hiện: Nguyễn Tiến Dũng – 19521398 Nguyễn Trung Hiếu - 19521508 Nội dung đề tài: Mục tiêu Xây dựng website bán tour du lịch với chức năng: • Phía bên client o Xem thơng tin tour du lịch o Tìm kiếm tour o Đặt tour, tốn • Phía bên admin: o Quản lý tour du lịch o Quản lý điểm đến o Quản lý đơn đặt tour Phạm vi • Phạm vi mơi trường: Xây dựng hệ thống mơi trường website • Phạm vi chức năng: o Đặt Tour o Quản lý tour o Quản lý điểm đến o Quản lý đơn hàng Đối tượng: Người có nhu cầu du lịch Cơng nghệ • Front-end: ReactJs • Back-end: NodeJs, ExpressJs • Database: MySQL Phương pháp thực • Tìm hiểu cơng nghệ • Phân tích thiết kế hệ thống • Xây dựng CSDL • Xây dựng backend • Xây dựng frontend • Tiến hành kiểm thử bảo trì Kết mong đợi • Xây dựng ứng dụng với tất yêu cầu đặt • Giao diện ứng dụng thân thiện, dễ sử dụng • Ứng dụng dễ dàng phát triển mở rộng tương lai Kế hoạch thực Thời gian Nội dung Phân cơng 21/03/2022 - 11/03/2022 Tìm hiểu đề tài, đánh Nguyễn Tiến Dũng giá thị trường, xác định Nguyễn Trung Hiếu chức hệ thống 12/03/2022 - 26/03/2022 Tìm hiểu cơng nghệ Nguyễn Tiến Dũng Nguyễn Trung Hiếu 27/03/2022 – 16/04/2022 Phân tích thiết kế hệ thống Nguyễn Tiến Dũng Nguyễn Trung Hiếu 17/04/2022 – 29/05/2022 Xây dựng website Nguyễn Tiến Dũng: Xây dựng frontend bên phía client Nguyễn Trung Hiếu: Xây dựng frontend bên phía admin, xây dựng backend 30/05/2022 – 08/06/2022 Kiểm thử sửa lỗi Nguyễn Tiến Dũng Nguyễn Trung Hiếu 09/06/2022 – 15/06/2022 Hoàn thành báo cáo Xác nhận CBHD (Ký tên ghi rõ họ tên) ThS Thái Thụy Hàn Uyển Nguyễn Tiến Dũng TP HCM ngày 15 tháng năm 2022 Sinh viên (Ký tên ghi rõ họ tên) Nguyễn Tiến Nguyễn Trung Dũng Hiếu LỜI CẢM ƠN Để hoàn thành dự án cho môn đồ án này, chúng em xin gửi lời cảm ơn chân thành đến Ths Thái Thụy Hàn Uyển tận tình hướng dẫn, giúp đỡ định hướng xun suốt q trình hồn thành đồ án Những lời góp ý, nhắc nhở cô hành trang tiền đề cho chúng em trình học tập phát triển thân sau này.Chúng em xin gửi lời càm ơn đến Khoa Công Nghệ Phần Mềm tạo điều kiện cho chúng em học tập môi trường tốt Trong trình làm đồ án chúng em cịn thiết sót, mong nhận góp ý dẫn cùa để đồ án chúng em hồn thiện TP HCM, ngày 12 tháng 06 năm 2022 Sinh viên thực Sinh viên thực NGUYỄN TIẾN DŨNG NGUYỄN TRUNG HIẾU MỤC LỤC Chương MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Pham vi nghiên cứu .1 1.3 Đối tượng nghiên cứu Chương CƠ SỞ LÝ THUYẾT 2.1 React .2 2.1.1 React 2.1.2 Tại sử dụng React 2.1.3 Một số khái niệm 2.1.4 Một số React Hook phổ biến 2.1.5 React Router Dom 2.2 NodeJs 2.2.1 NodeJs gì? 2.2.2 Tính vượt trội NodeJs 2.2.3 Khi nên sử dụng NodeJs .6 2.3 ExpressJs 2.3.1 ExpressJs .6 2.3.2 ExpressJs sử dụng làm gì? 2.4 MySQL 2.4.1 MySQL gì? 2.4.2 Ưu điểm MySQL 2.5 Các phần mềm công nghệ khác .8 2.5.1 Visual Studio Code 2.5.2 GitHub 2.5.3 VietQR Chương PHÂN TÍCH THIẾT KẾ HỆ THỐNG .10 3.1 Kiến trúc hệ thống .10 3.2 Sơ đồ Use case 10 3.2.1 Sơ đồ Usecase 10 3.2.2 Danh sách Actor 12 3.2.3 Danh sách Use case .12 3.2.4 Đặc tả use case .13 3.3 Sơ đồ Sequence 25 3.4 Cơ sở liệu .40 3.4.1 Lược đồ sở liệu 40 3.4.2 Chi tiết bảng liệu .41 3.5 Thiết kế giao diện .46 3.5.1 Danh sách trang hệ thống 46 3.5.2 Giao diện khách hàng 48 3.5.3 Giao diện quản lý 53 Chương KẾT LUẬN 57 4.1 Kết đạt .57 4.1.1 Về mặt nghiên cứu 57 4.1.2 Về mặt sản phẩm .57 4.2 Ưu điểm 57 4.3 Nhược điểm 57 4.4 Hướng phát triển .57 DANH MỤC HÌNH Hình 2.1: Logo React Hình 2.2 React component lifecycle Hình 2.3: Logo NodeJs Hình 2.4: ExpressJs Hình 2.5: MySQL .8 Hình 3.1: Sơ đồ kiến trúc hệ thống 10 Hình 3.2: Sơ đồ use case tổng quát 10 Hình 3.3: Sơ đồ use case quản lý tour 11 Hình 3.4: Sơ đồ use case quản lý điểm đến .11 Hình 3.5: Sơ đồ use case quản lý đơn hàng .12 Hình 3.6: Sequence Diagram use case “tìm kiếm tour” 26 Hình 3.7: Sequence Diagram use case “xem tour” 27 Hình 3.8: Sequence diagram use case “nhập thơng tin liên hệ” 28 Hình 3.9: Sequence Diagram use case "Thanh toán" .29 Hình 3.10: Sequence diagram use case "Đặt tour" 30 Hình 3.11: Sequence Diagram use case "Đăng nhập" .30 Hình 3.12: Sequence diagram use case "Thêm điểm đến” 31 Hình 3.13: Sequence diagram use case "Cập nhật điểm đến" 32 Hình 3.14: Sequence diagram use case “Xóa điểm đến" 33 Hình 3.15: Sequence diagram use case “Thêm tour" .34 Hình 3.16: Sequence diagram use case “Cập nhật tour" 35 Hình 3.17: Sequence diagram use case “Xóa tour" 36 Hình 3.18: Sequence diagram use case “Thêm ngày khởi hành" 37 Hình 3.19: Sequence diagram use case “Cập nhật ngày khởi hành" .38 Hình 3.20: Sequence diagram use case “xóa ngày khởi hành" 39 Hình 3.21: Sequence diagram use case “cập nhật đơn hàng” 40 Hình 3.22: Cơ sở liệu 41 Hình 3.23: Giao diện hình trang chủ 48 Hình 3.24: Giao diện hình danh sách tour 49 Hình 3.25: Giao diện hình chi tiết tour 50 Hình 3.26: Giao diện hình nhập thơng tin liên hệ 51 Hình 3.27: Giao diện hình tốn 52 Hình 3.28: Giao diện trang không tồn .53 Hình 3.29: Giao diện hình đăng nhập 53 Hình 3.30: Giao diện hình dashboard 54 Hình 3.31: Giao diện hình quản lý tour 55 Hình 3.32: Giao diện hình quản lý điểm đến 55 Hình 3.33: Giao diện hình quản lý tốn 56 Hình 3.34: Giao diện hình phân tích 56 child int not null Phí tham gia trẻ em small_child int not null Phí tham gia trẻ nhỏ new_born int not null Phí tham gia trẻ sinh 10 hotel int not null Phí khách sạn 11 hotel_feature text not null Mơ tả khách sạn Bảng 3.24: Bảng Lịch trình (Schedule) STT Thuộc tính Kiểu Ràng buộc Mơ tả not null Định danh bảng liệu id int user_id int Khóa ngoại đến bảng user id_schedule int not null Khóa ngoại đến bảng schedule encodeId text check_payment boolean not null Mã đơn hàng not null Kiểm tra đơn hàng toán chưa full_name text not null Tên người đặt tour email text not null Email người đặt phone text not null Số điện thoại người đặt address text not null Địa người đặt 10 note Ghi người text đặt Trang 44 11 adult Số lượng vé người int lớn 12 child int Số lượng vé trẻ em 13 small_child int Số lượng vé trẻ nhỏ 14 new_born int Số lượng vé sơ sinh 15 room int Số lượng phòng khách sạn 16 total_price int Tổng giá tiền 17 created_at timestamp Default Thời gian đơn hàng current tạo timestamp Bảng 3.25: Bảng payment STT Thuộc tính Kiểu Ràng buộc Mơ tả liệu id int not null Định danh bảng first_name int not null Tên người dùng last_name int not null Họ người dùng email text not null Email người dùng avatar_url Ảnh đại diện text người dùng is_admin boolean default false Kiểm tra admin created_at timestamp default Thời gian người dùng current tạo timstamp Trang 45 updated_at timestamp default Thời gian mà thông current tin người dùng timstamp cập nhật Bảng 3.26: Bảng user 3.5 Thiết kế giao diện 3.5.1 Danh sách trang hệ thống STT Tên trang (màn hình) Mơ tả Giới thiệu tour, gợi ý tour Trang chủ Hiển thị thông tin chi tiết tour bao gồm giá Chi tiết tour tiền, ngày khởi hành, lịch trình di chuyển số ngày khởi hành khác Thông tin liên hệ Thanh toán Danh sách tour Trang không tồn Đăng nhập Dashboard Quản lý tour Hiển thị thông tin tour muốn đặt form thông tin đặt hàng Hiển thị mã tốn, thơng tin đơn hàng mà người dùng đặt Hiển thị danh sách tour dựa thơng tin tìm kiếm người dùng Hiển thị cảnh báo trang không tồn url không hợp lệ Hiển thị form đăng nhập cho admin Hiển thị liên kết nhanh đến hình quản lý khác Hiển thị danh sách tour, danh sách ngày khởi hành tour Trang 46 10 Quản lý điểm đến Hiển thị danh sách điểm đến 11 Quản lý đơn hàng Hiển thị danh sách đơn đặt tour 12 Phân tích Thơng kê lại tour dạng sơ đồ biểu đồ Bảng 3.27: Bảng danh sách hình Trang 47 3.5.2 Giao diện khách hàng Hình 3.23: Giao diện hình trang chủ Trang 48 Hình 3.24: Giao diện hình danh sách tour Trang 49 Hình 3.25: Giao diện hình chi tiết tour Trang 50 Hình 3.26: Giao diện hình nhập thơng tin liên hệ Trang 51 Hình 3.27: Giao diện hình tốn Trang 52 Hình 3.28: Giao diện trang khơng tồn 3.5.3 Giao diện quản lý Hình 3.29: Giao diện hình đăng nhập Trang 53 Hình 3.30: Giao diện hình dashboard Trang 54 Hình 3.31: Giao diện hình quản lý tour Hình 3.32: Giao diện hình quản lý điểm đến Trang 55 Hình 3.33: Giao diện hình quản lý tốn Hình 3.34: Giao diện hình phân tích Trang 56 Chương KẾT LUẬN 4.1 Kết đạt 4.1.1 Về mặt nghiên cứu • Nhóm cơ hội nghiên cứu tìm hiểu cơng nghệ phổ biến ReactJs, NodeJs, ExpressJs, JWT cloudinary trình thực phát triển đồ án • Tìm hiểu mơ hình cách tổ chức, xây dựng dự án hiệu 4.1.2 Về mặt sản phẩm • Xây dựng trang web với chức đặt • Giao diện dễ sử dụng 4.2 Ưu điểm • Giao diện trực quan dễ sử dụng • Áp dụng cơng nghệ vào sản phẩm • Có hỗ trợ tốn trực tuyến 4.3 Nhược điểm • Tuy giao diện dễ sử dụng chưa thật tối ưu • Q trình kiểm tra tốn cịn nhiều thời gian • Phần quản lý cịn nhiều thiếu sót 4.4 Hướng phát triển • Tích hợp chatbot phản hồi khách hàng • Tích hợp tốn momo • Xây dựng thêm module tặng quà cho khách hàng tiềm • Phát triển tảng di động Trang 57 TÀI LIỆU THAM KHẢO [1] Đỗ Khánh Toàn, Giới thiệu ReactJs – Phần I, https://viblo.asia/p/gioi-thieu-vereactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7 [2] Từ Quốc Hưng, ReactJS gì? Những điều bạn chưa biết ReactJS, https://200lab.io/blog/reactjs-la-gi/ [3] lienhoang, Sử dụng React Router cho Single Page Application, https://viblo.asia/p/su-dung-react-router-cho-mot-single-page-applicationaWj53LMpK6m [4] Phạm Xuân Nam, ReactJs component lifecycle methods, https://viblo.asia/p/reactjs-component-lifecycle-methods-3Q75wdQ2KWb [5] Nguyen Minh Dinh, Node.js Tutorial: Phần 1, https://viblo.asia/p/nodejstutorial-phan-1-gioi-thieu-va-cai-dat-ung-dung-dau-tien-gVQvlwdykZJ [6] Đông Tùng, ExpressJS gì? Tại nên sử dụng ExpressJS?, https://wiki.tino.org/expressjs-la-gi/ [7] Mona Media, MySQL gì? Tìm hiểu thơng tin cần biết MySQL, https://mona.media/mysql-la-gi/ [8] TinoHost, Visual Studio Code gì? Tìm hiểu chi tiết Visual Studio Code, https://wiki.tino.org/visual-studio-code-la-gi/ [9] TopDev, GitHub gì? Những lợi ích GitHub mang lại cho lập trình viên, https://topdev.vn/blog/github-la-gi/ [10] Ngân Hàng Online, VietQR gì? Hướng dẫn chuyển tiền, nhận tiền siêu nhanh với VietQR, https://nganhangonline.net/huong-dan/vietqr-la-gi-huongdan-chuyen-tien-nhan-tien-sieu-nhanh-voi-vietqr.html Trang 58 ... 19521508 NGUYỄN TIẾN DŨNG – 19521398 BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE BÁN TOUR DU LỊCH CÓ HỖ TRỢ THANH TOÁN TRỰC TUYẾN Building a website to sell tours with online payment support GIẢNG VIÊN HƯỚNG... Nội dung đề tài: Mục tiêu Xây dựng website bán tour du lịch với chức năng: • Phía bên client o Xem thơng tin tour du lịch o Tìm kiếm tour o Đặt tour, tốn • Phía bên admin: o Quản lý tour du lịch. .. hàng trực tuyến cịn đó, chúng em định cho đời website cung cấp tour du lịch với hình thức tốn trực tuyến 1.2 Pham vi nghiên cứu o Tìm hiểu toán cung cấp tour du lịch đến khách hàng o Xây dựng website