Đồ án môn học xây dựng website đặt 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 Phạm Phùng Gia Khiêm – 20521459 Cao Phạm Tiến Anh – 20520380 ĐỒ ÁN MÔN HỌC XÂY DỰNG WEBSITE ĐẶT TOUR DU LỊCH GIẢNG VIÊN GIẢNG DẠY THÁI THỤY HÀN UYỂN TP HỒ CHÍ MINH, 2022 LỜI CẢM ƠN Trước bước vào phần báo cáo đồ án, nhóm chúng em trân trọng gửi lời cảm ơn đến cô Thái Thụy Hàn Uyển tạo điều kiện cho chúng em có hội thực đồ án nhiệt tình góp ý, giúp đỡ chúng em lớp, cung cấp cho chúng em nhiều kiến thức và cả kinh nghiê ̣m hữu ích và ngoài mảng lâ ̣p triǹ h web Dù vậy, trình học tập, làm đồ án thời gian kiến thức có hạn nên nhóm em khơng thể tránh khỏi thiếu sót Nhóm em mong nhận thơng cảm, đóng góp xây dựng từ để nhóm em có thêm nhiều kiến thức có ích ngày hồn thiện Nhóm thực Trường Đại học Cơng nghệ Thông tin, tháng 12 năm 2022 MỤC LỤC Contents CHƯƠNG I GIỚI THIỆU ĐỀ TÀI Giới thiệu chung Mục tiêu đề tài 2.1 Lý thuyết 2.2 Mục tiêu Quá trình thực Tổng quan chức CHƯƠNG II CƠ SỞ LÝ THUYẾT 10 React JS 10 1.1 Tổng quan lịch sử 10 1.2 Thành phần React.JS 11 1.3 Một số đặc điểm bật 12 1.4 Ưu nhược điểm React JS: 13 Ngơn ngữ lập trình JavaScript 13 2.1 Tổng quan 13 2.2 Tại ReactJS? 14 Hệ quản trị sở liệu Firebase 14 3.1 Firebase gì? 14 3.2 Firebase Realtime database 14 3.3 Firebase Authentication 14 3.4 Firebase Hosting 15 3.5 Ưu điểm Firebase 15 3.6 Nhược điểm Firebase 16 CHƯƠNG III XÂY DỰNG HỆ THỐNG 17 Xây dựng kiến trúc hệ thống 17 1.1 Công nghệ sử dụng 17 1.2 Kiến trúc hệ thống: Mơ hình Client-Server 17 1.3 Mô tả thành phần hệ thống 18 1.4 Sơ đồ Use case 19 1.5 Mô tả Use case 20 Mô tả hình 21 2.1 Màn hình đăng nhập 21 2.2 Màn hình đăng ký 22 2.3 Màn hình 23 2.4 Màn hình danh sách Tour 24 2.5 Màn hình Detail_Tour 25 2.6 Màn hình đặt vé Tour 26 2.7 Màn hình toán Tour 27 2.8 Màn hình Confirm information Tour 28 2.9 Màn hình danh sách Hotel 29 2.10 Màn hình chi tiết Hotel 30 2.11 Màn hình đặt phịng Hotel 32 2.12 Màn hình Thanh tốn phịng Hotel 33 2.13 Màn hình Confirm phịng Hotel 34 2.14 Màn hình danh sách Flight-ticket: 35 2.15 Màn hình chi tiết Flight-ticket 35 2.16 Màn hình tốn Flight-ticket 36 2.17 Màn hình toán Flight-ticket 37 2.18 Màn hình Confirm Flight-ticket 38 Sơ đồ lớp 40 Sơ đồ hoạt động 41 2.1 Hoạt động đăng ký 41 2.2 Hoạt động đặt vé 42 CHƯƠNG II KẾT LUẬN 43 Kết đạt 43 Ưu điểm 43 Nhược điểm giải pháp 43 DANH MỤC HÌNH ẢNH Hình Tổng quan chức Hình Một số ứng dụng tiếng viết React JS 11 Hình Kiến trúc React JS 12 Hình Cấu trúc Firebase 15 Hình Kiến trúc hệ thống client server 17 Hình Sơ đồ use case 19 Hình Màn hình đăng nhập 21 Hình Màn hình đăng ký 22 Hình Màn hình trang chủ 23 Hình 10 Màn hình danh sách sản Tour 24 Hình 11 Màn hình Detail_Tour 25 Hình 12 Màn hình đặt vé Tour 26 Hình 13 Màn hình toán Tour 27 Hình 14 Màn hình Confirm information Tour 28 Hình 15 Màn hình danh sách Hotel 29 Hình 16 Màn hình chi tiết Hotel 31 Hình 17 Màn hình đặt phòng Hotel 32 Hình 18 Màn hình tốn phòng Hotel 33 Hình 19 Màn hình Confirm phịng Hotel 34 Hình 20 Màn hình danh sách Flight-ticket 35 Hình 21 Màn hình chi tiết vé Flight-ticket 36 Hình 22 Màn hình đặt vé Flight-ticket 37 Hình 23 Màn hình tốn Flight-ticket 38 Hình 24 Màn hình Confirm Flight-ticket 38 Hình 25 Sơ đồ lớp 40 Hình 26 Sơ đồ hoạt động đăng ký 41 Hình 27 Sơ đồ hoạt động đặt vé 42 DANH MỤC BẢNG Bảng Mô tả thành phần ứng dụng 18 Bảng Mô tả use case 20 Bảng Mơ tả hình đăng nhập 21 Bảng Mơ tả hình đăng ký 22 Bảng Mơ tả hình trang chủ 23 Bảng Mơ tả hình danh sách Tour 24 Bảng Mơ tả hình Detail_Tour 25 Bảng Mơ tả hình đặt vé Tour 26 Bảng Mơ tả hình tốn Tour 27 Bảng 10 Mơ tả hình Confirm information Tour 28 Bảng 11 Mô tả hình danh sách Hotel 29 Bảng 12 Mô tả hình chi tiết Hotel 31 Bảng 13 Mô tả hình đặt phịng Hotel 32 Bảng 14 Mơ tả hình tốn phịng Hotel 33 Bảng 15 Mơ tả hình Corfirm phịng Hotel 34 Bảng 16 Mơ tả hình danh sách Flight-ticket 35 Bảng 17 Mơ tả hình chi tiết vé Flight-ticket 36 Bảng 18 Mô tả hình đặt vé Flight-ticket 37 Bảng 19 Mô tả hình tốn Flight-ticket 38 Bảng 20 Mơ tả hình Confirm Flight-ticket 39 CHƯƠNG I GIỚI THIỆU ĐỀ TÀI Giới thiệu chung Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, cơng ty; đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Việc xây dựng trang web để phục vụ cho nhu cầu riêng tổ chức, cơng ty chí cá nhân, ngày nay, khơng lấy làm xa lạ Với vài thao tác đơn giản, người trở thành chủ website giới thiệu quan tâm: website giới thiệu thân gia đình anh ta, website trình bày sưu tập hình ảnh loại xe mà thích chẳng hạn Đối với phủ cơng ty việc xây dựng website riêng ngày trở nên cấp thiết Thông qua website này, thông tin họ công văn, thơng báo, định phủ hay sản phẩm, dịch vụ công ty đến với người quan tâm, đến với khách hàng họ cách nhanh chóng kịp thời, tránh phiền hà mà phương thức giao tiếp truyền thống thường gặp phải Hoạt động cơng ty du lịch có quy mô lớn tăng cường mở rộng xây dựng website tốt Bắt nguồn với ý tưởng này, với gợi ý cô Thái Thụy Hàn Uyển, chúng em thực đồ án “XÂY DỰNG WEBSITE ĐẶT TOUR DU LỊCH” nội dung trình bày sau Mục tiêu đề tài 2.1 Lý thuyết - Nghiên cứu React JS ngơn ngữ lập trình JavaScript - Nắm rõ thao tác môi trường phát triển Web công cụ lập trình Visual studio code - Nghiên cứu sử dụng dịch vụ sở liệu tảng đám mây – Firebase - Nghiên cứu cách thức phát triển ứng dụng đa tảng 2.2 Mục tiêu - Người dùng đặt, xem tour cách dễ dàng minh bạch - Ứng dụng hỗ trợ từ đến đầy đủ chức ứng dụng đặt tour điển hình - Ứng dụng có giao diện thân thiện, dễ sử 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 hoá trải nghiệm người dùng cải thiện tính cho ứng dụng Tổng quan chức Hình Tổng quan chức CHƯƠNG II CƠ SỞ LÝ THUYẾT React JS 1.1 Tổng quan lịch sử React thư viện JavaScript mã nguồn mở phổ biến thực việc xem liệu với trợ giúp HTML Nó cịn gọi ReactJS React.js, đừng nhầm lẫn bạn đọc ký hiệu khác nơi khác Vì phát triển Facebook, nên cịn gọi phổ biến “Facebook React.js.” Hiện tại, trì người Instagram, Facebook nhà phát triển cộng đồng quan tâm đến thư viện Vì vậy, làm hoạt động? ReactJS hoạt động dạng khung nhìn sử dụng hệ thống dựa thành phần Các thành phần định dạng thẻ HTML tùy chỉnh, mang lại khả sử dụng dễ dàng React hữu ích bảo vệ thành phần bên luồng liệu Các thành phần bị ảnh hưởng trực tiếp với truy vấn bên ngoài, tạo lựa chọn tốt cho việc phát triển chế độ xem giao diện người dùng Nó hiệu việc cập nhật tài liệu HTML với liệu mới, khiến trở thành lựa chọn hồn hảo cho ứng dụng web dựa liệu Facebook Instagram Thư viện đảm bảo tách biệt rõ ràng thực thành phần khác nhau, đảm bảo dễ dàng bảo trì nâng cấp tương lai React công nghệ so sánh với công nghệ khác thị trường Nó đời vào năm 2011, Jordan Walke, kỹ sư phần mềm Facebook tạo thư viện React bị ảnh hưởng thứ XHP, khung thành phần HTML đơn giản cho PHP Trường hợp sử dụng React newsfeed Facebook vào năm 2011 Sau đó, Instagram chọn để sử dụng hệ thống họ Theo thời gian, React phát triển Facebook định biến thành mã nguồn mở vào tháng năm 2013 JSConf US Vào năm 2015 JSConf, React Native công bố cho phép phát triển dễ dàng với Android iOS deveopment Trong năm đó, React Native mã nguồn mở để giúp phát triển.: Một số trang web tiêu biểu tạo nên React.JS: 2.10 Màn hình chi tiết Hotel Hình 16 Màn hình chi tiết Hotel STT Biến cố Xử lý Load Page Hiển thị thông tin chi tiết Hotel Click Select Room Chuyển đến hình đặt phịng Bảng 12 Mơ tả hình chi tiết Hotel 2.11 Màn hình đặt phịng Hotel Hình 17 Màn hình đặt phịng Hotel STT Biến cố Load Page Countine Xử lý Hiển thị thông tin cần điền để đặt phịng Lưu thơng tin nhập tiến hành tốn Bảng 13 Mơ tả hình đặt phịng Hotel 2.12 Màn hình Thanh tốn phịng Hotel Hình 18 Màn hình tốn phịng Hotel STT Biến cố Xử lý Load page Hiện thơng tin phịng đặt khách Click Pay now Tiến hành tốn tiền phịng Và chuyển sang hình Confirm Bảng 14 Mơ tả hình tốn phịng Hotel 2.13 Màn hình Confirm phịng Hotel Hình 19 Màn hình Confirm phịng Hotel STT Biến cố Load page Xử lý Hiện thông tin chi tiết vé đặt Bảng 15 Mơ tả hình Corfirm phịng Hotel 2.14 Màn hình danh sách Flight-ticket: Hình 20 Màn hình danh sách Flight-ticket STT Biến cố Xử lý Click Change Search Thay đổi tìm kiếm dựa nội dung Click Choose Chọn vé tiến hành vào đặt vé Bảng 16 Mơ tả hình danh sách Flight-ticket 2.15 Màn hình chi tiết Flight-ticket Hình 21 Màn hình chi tiết vé Flight-ticket STT Biến cố Xử lý Page load Hiển thị thông tin chi tiết vé Click Continue Lưu thông tin điền tiến hành toán vé Bảng 17 Mơ tả hình chi tiết vé Flight-ticket 2.16 Màn hình tốn Flight-ticket Hình 22 Màn hình đặt vé Flight-ticket STT Biến cố Click Countine Xử lý Lưu thông tin cá nhân khách hàng chuyển qua trang tốn vé Bảng 18 Mơ tả hình đặt vé Flight-ticket 2.17 Màn hình tốn Flight-ticket Hình 23 Màn hình tốn Flight-ticket STT Biến cố Click Pay now Xử lý Tiến hành toán vé dựa thông tin thẻ điền Bảng 19 Mơ tả hình tốn Flight-ticket 2.18 Màn hình Confirm Flight-ticket Hình 24 Màn hình Confirm Flight-ticket STT Biến cố Page load Xử lý Thể chi tiết vé vừa đặt Bảng 20 Mơ tả hình Confirm Flight-ticket Sơ đồ lớp Hình 25 Sơ đồ lớp Sơ đồ hoạt động 2.1 Hoạt động đăng ký Hình 26 Sơ đồ hoạt động đăng ký 2.2 Hoạt động đặt vé Hình 27 Sơ đồ hoạt động đặt vé CHƯƠNG II KẾT LUẬN Kết đạt ● Tạo sản phẩm hoàn chỉnh ● Áp dụng kiến thức quy trình phát triển phần mềm hướng đối tượng cách chuyên nghiệp ● Tìm hiểu thêm cơng nghệ kiến trúc kỹ thuật ● Hiể u và nắ m đươc̣ các kiế n thức về ứng du ̣ng Visual Studio Code ● Hiể u và nắ m đươc̣ cách xây dựng web với React JS ● Nắ m rõ về JavaScript, ReactJS, package, thiế t kế giao diê ̣n web ● Phân công công việc hợp lý Ưu điểm ● Dễ dàng sử dụng ● Giao diện đẹp mắt thân thiện ● Thích hợp với nhu cầu tiện ích ● Có nhiều chức khác phục vụ cho nhu cầu mục đích người dùng ● Hồn tồn miễn phí ● Có tính áp dụng thực tế cao Nhược điểm giải pháp - Báo cáo chưa chi tiết thực tế  Giải pháp: tìm hiểu kĩ nhu cầu xem báo cáo người dùng Tạo báo cáo đầy đủ thỏa mãn nhu cầu người dùng - Các phương thức tốn cịn hạn chế  Giải pháp: tìm hiểu nhiều ví điện tử internet banking - 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 - Cịn hạn chế phần hỗ trợ đa ngôn ngữ  Giải pháp: Tìm cách tối ưu, phát triển đa ngơn ngữ - Chưa có gợi ý người dùng  Giải pháp: Tìm hiểu, phát triển gợi ý người dùng theo sở thích - Hạn chế việc đặt chỗ ứng dụng  Giải pháp:Mở rộng ứng dụng lớn quy mô phạm vi TÀI LIỆU THAM KHẢO - https://educationecosystem.com/guides/programming/react-js/history https://bizflycloud.vn/tin-tuc/reactjs-la-gi-20220511171943895.htm https://viblo.asia/p/reactjs-uu-diem-va-nhuoc-diem-V3m5WzexlO7 https://fptcloud.com/javascript/ https://fptcloud.com/firebase-la-gi/ https://www.youtube.com/watch?v=Fd2Q5WYjnBQ ... cơng ty du lịch có quy mơ lớn tăng cường mở rộng xây dựng website tốt Bắt nguồn với ý tưởng này, với gợi ý cô Thái Thụy Hàn Uyển, chúng em thực đồ án “XÂY DỰNG WEBSITE ĐẶT TOUR DU LỊCH” nội dung... dùng tốn cho vé sau chọn đặt vé Đặt vé Tour Người dùng tiến hành đặt vé Tour du lịch Đặt vé Hotel Người dùng tiến hành đặt vé phịng Hotel Đặt vé máy bay Người dùng tiến hành đặt vé Máy bay Tìm kiếm... page Hiện thị nội dung chi tiết Tour Click Book Now Chuyển đến hình tiến hành đặt vé Tour Bảng Mơ tả hình Detail _Tour 2.6 Màn hình đặt vé Tour Hình 12 Màn hình đặt vé Tour STT Biến cố Load Page Click