Đề tài xây dựng website du lịch

ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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: XÂY DỰNG WEBSITE DU LỊCH Lớp: SE121.N11 Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Dương Hoài Nam - 19521868 Võ Quốc Minh - 19521857 TP Hồ Chí Minh, tháng 12 năm 2022 ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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: XÂY DỰNG WEBSITE DU LỊCH Lớp: SE121.N11 Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Dương Hoài Nam - 19521868 Võ Quốc Minh - 19521857 TP Hồ Chí Minh, tháng 12 năm 2022 LỜI CẢM ƠN Nhóm xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người trực tiếp tận tình hướng dẫn nhóm suốt q trình thực đồ án Nhóm vơ biết ơn tận tình dẫn q trình nhóm thực đề tài Bước đầu tiếp cận cơng nghệ mới, nhóm cịn nhiều thiếu sót mặt kiến thức kinh nghiệm thực tiễn nên không tránh khỏi nhiều sai sót Những nhận xét, góp ý chân tình sở để nhóm cải tiến hồn thiện đề tài cách tốt Nếu khơng có lời bảo tận tình đồ án nhóm khó để thực Nhóm xin chân thành cảm ơn! TP Hồ Chí Minh, ngày 24 tháng 12 năm 2022 Nhóm sinh viên thực Dương Hồi Nam – Võ Quốc Minh NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………., ngày………tháng………năm……… Giảng viên hướng dẫn Trần Thị Hồng Yến ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE DU LỊCH (BUILD A TRAVEL WEBSITE) Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 05/09/2022 đến ngày 31/12/2022 Sinh viên thực hiện: Võ Quốc Minh - 19521857 Dương Hoài Nam - 19521868 Nội dung đề tài: Lí chọn đề tài: Du lịch dần trở thành môi trường cạnh tranh khốc liệt với cơng ty, tập đồn kinh doanh lĩnh vực Trong thời đại mà Internet trở nên phổ biến lĩnh vực kinh tế, trị, xã hội, phổ biến rộng rãi đến nhiều tầng lớp xã hội, việc thiết kế website du lịch trở nên đặc biệt quan trọng doanh nghiệp kinh doanh du lịch chưa có website Một cơng ty du lịch chất lượng phục vụ tốt chưa đủ, họ phải có website để quảng bá thương hiệu qua Internet nhằm thu hút khách hàng đến với Song song đó, thương mại điện tử ngày phát triển đem lại nhiều lợi ích cho doanh nghiệp: • Lợi ích lớn tăng doanh thu Với thương mại điện tử, đối tượng khách hàng bạn khơng cịn bị giới hạn mặt địa lý, hay thời gian làm việc • Thứ hai cắt giảm chi phí quảng cáo Với thương mại điện tử, bạn tốn nhiều cho việc thuê cửa hàng, mặt bằng, đông đảo nhân viên phục vụ, bạn không cần phải đầu tư nhiều cho kho chứa • Maketing tồn cầu với chi phí thấp lợi ích thứ ba Chỉ với chi phí nhỏ bạn đưa thơng tin quảng cáo bạn đến với hàng trăm triệu người xem từ khắp nơi giới • Lợi ích cuối lợi cạnh tranh Việc kinh doanh mạng “sân chơi” cho sáng tạo, nơi đây, bạn áp dụng ý tưởng hay nhất, dịch vụ hỗ trợ, chiến lược tiếp thị Ngành du lịch ngành ngày phát triển, chiếm tỉ trọng lớn cấu kinh tế nước ta Việc áp dụng thương mại điện tử, đặc biệt hoạt động marketing online điều vô quan trọng, cần thiết Để thực điều đó, họ cần có website, thơng qua website, cơng ty du lịch quảng bá sản phẩm cung cấp, cung cấp dịch vụ trực tuyến đặt vé tour, đặt phịng, nhằm đưa sản phẩm cơng ty đến gần người tiêu dùng Nhận thấy lợi ích nhu cầu thực tế ấy, nhóm định chọn đề tài “XÂY DỰNG WEBSITE DU LỊCH” Mục tiêu đề tài: Xây dựng website du lịch giúp quảng bá thương hiệu doanh nghiệp, cung cấp thông tin chi tiết sản phẩm dịch vụ, đặt mua vé trực tuyến cách nhanh chống, hiệu Phạm vi đề tài: • Phạm vi môi trường: Ứng dụng triển khai mơi trường web • Phạm vi chức năng: - Tìm kiếm tour du lịch - Đặt tour trực tuyến toán tiện lợi - Blog du lịch (kiến thức bổ ích, điểm đến đẹp…) Đối tượng sử dụng: • Các doanh nghiệp kinh doanh lĩnh vực du lịch • Khách hàng, người có nhu cầu du lịch Phương pháp thực hiện: • Khảo sát website khác thị trường • Lựa chọn tìm hiểu cơng nghệ • Phân tích thiết kế hệ thống • Xây dựng hệ thống • Kiểm thử triển khai sản phẩm Công nghệ sử dụng: • Font-end: ReactJS, NextJS, Redux-toolkit • Back-end: NodeJS, ExpressJS, Mongoose • Database: Mongodb • Source control: Git, Github Kết mong đợi: • Nắm bắt cơng nghệ sử dụng để hoàn thiện sản phẩm đề tài • Xây dựng website du lịch có đầy đủ chức cần thiết để sử dụng thực tế • Hệ thống hoạt động tốt, ổn định Kế hoạch thực Công việc Thời gian Tuần (5/9 –11/9) Tuần (12/9 –18/9) Tuần (19/9 –25/9) Tuần (26/9 –2/10) Thành viên Thành viên Võ Quốc Minh Dương Hoài Nam Xác định mục tiêu, phạm vi, đối tượng, phương pháp thực hiện, công nghệ sử dụng kết mong đợi Khảo sát website tương tự thị trường Xác định chức cần có Tìm hiểu cơng nghệ ReactJS, NodeJS thư viện hỗ trợ Thiết kế database Phát thảo giao diện Tuần (3/10 –9/10) Tìm hiểu công nghệ, thư Khởi tạo source back-end khởi tạo source front-end Tuần (10/10 –16/10) Tuần Xây dựng API xác thực người dùng (Authenication) (17/10 –23/10) Tuần (24/10 –30/10) Tuần viện phù hợp ứng dụng vào đồ án Xây dựng API tour du lịch (31/10 –6/11) Xây dựng giao diện khách hàng, kết nối API liên quan phản hồi để cập nhật với back-end Xây dựng giao diện admin, kết nối API liên quan phản hồi để cập nhật với back-end Tuần 10 (7/11 –13/11) Tuần 11 Xây dựng API blog du lịch Xây dựng giao diện blog (14/11 –20/11) Tuần 12 (21/11 –27/11) Tuần 13 Xây dựng API đặt hàng, toán (28/11 –4/12) Tuần 14 (5/12 –11/12) Tuần 15 (12/12 –18/12) Tuần 16 (19/12 –25/12) Kết nối API lại kiểm tra lại tính năng, sửa lỗi giao diện lỗi logic khác Xây dựng API thiếu, Hoàn thiện giao diện, animation kiểm thử chức năng, deloy tính thiếu sót backend lên Internet Deloy trang web lên Internet Xây dựng tính thiếu Kiểm thử tổng thể, sữa lỗi phát sinh Tuần 17 (26/12 –31/12) Hoàn thiện báo cáo Chuẩn bị slide, tiến hành báo cáo TP HCM, ngày 13 tháng 09 năm 2022 Xác nhận CBHD Sinh viên Sinh viên (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Võ Quốc Minh Dương Hoài Nam MỤC LỤC CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Thơng tin nhóm .1 1.2 Lý chọn đề tài 1.3 Mục tiêu 1.4 Phạm vi 1.5 Phương pháp thực 1.6 Công nghệ sử dụng CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Ngôn ngữ Javascript 2.2 Front-end .7 2.2.1 ReactJS 2.2.2 NextJS .9 2.2.3 Redux Toolkit .11 2.3 Back-end 12 2.3.1 NodeJS 12 2.3.2 ExpressJS 14 2.3.3 MongoDB .14 2.3.4 Mongoose 16 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 17 3.1 Phân tích yêu cầu 17 3.1.1 Yêu cầu chức 17 3.1.2 Yêu cầu phi chức 18 3.2 Sơ đồ use-case .19 3.2.1 Danh sách actor .20 3.2.2 Danh sách use-case .20 3.3 Đặc tả use-case 21 3.3.1 Tìm kiếm tour (Khách hàng) 21 3.3.2 Đặt tour 22 3.3.3 Gửi thông tin order .23 3.3.4 Xem blog du lịch 23 4.7 Blog detail page 4.7.1 Giao diện Hình 4.10 Giao diện Blog detail page (1) 49 Hình 4.11 Giao diện Blog detail page (2) 50 4.7.2 Mô tả - Khi người dung vào trang chi tiết blog thấy nội dung blog - Có hình ảnh video trực quan - Phí có blog gợi ý để người dùng đọc thêm Bảng 4.7 Mô tả gia diện Blog detail page STT Biến cố Xử lý Nhấn vào video Phát video Nhấn vào thẻ blog Hiển thị chi tiết blog Nhấn vào Contact with us Chuyển sang Contact page 51 4.8 Booking page 4.8.1 Giao diện Hình 4.12 Giao diện Booking page 52 4.8.2 Mơ tả - Khi vào trang booking, có form để người dùng điền thông tin đặt vé tên, email, số điện thoại… chọn số lượng vé cần đặt - Bên phải thị thông tin tour tổng tiền vé phải toán - Bên có thơng tin điều khoản sử dụng dịch vụ - Có nút tốn để người dùng tiến hành tốn Bảng 4.8 Mơ tả giao diện Booking page STT Biến cố Xử lý Nhấn vào nút + Thêm số lượng Nhấn vào nút - Giảm số lượng Nhấn vào nút paypal Mở cửa sổ toán paypal 4.9 Login page 4.9.1 Giao diện Hình 4.13 Giao diện login page 53 4.9.2 Mơ tả - Khi vào trang login, người dùng nhập email mật nhấn nút sign in để tiến hành đăng nhập - Nêu người dùng quên mật khẩu, nhấp vào nút Forgot Password để lấy lại mật Bảng 4.9 Mô tả giao diện Login page STT Biến cố Xử lý Nhấn vào Forgot Password Chuyển đến Forgot Password page Nhấn vào nút Sign in Đăng nhập 4.10 Forgot Password page 4.10.1 Giao diện Hình 4.14 Giao diện Forgot Password page 4.10.2 Mơ tả - Khi vào trang Forgot Password, người dùng điền thông tin để reset lại mật 54 Bảng 4.10 Mô tả giao diện Forgot Password page STT Biến cố Xử lý Nhấn vào Set New Password Tiến hành reset mật Nhấn vào Back to login Chuyển tới trang Login 4.11 Profile page 4.11.1 Giao diện Hình 4.15 Giao diện Profile page (1) 55 Hình 4.16 Giao diện Profile page (2) 4.11.2 Mô tả - Khi người dùng vào trang Profile thấy thông tin chi tiết tài khoản - Người dùng cập nhật thông tin cá nhân lưu lại Bảng 4.11 Mô tả giao diện Profile page STT Biến cố Xử lý Nhấn nút Upload Mở cửa sổ upload ảnh đại diện Nhấn nút Save changes Lưu thay đổi Nhấn vào icon mặt trời / mặt Chuyển đổi chế độ xem dark mode/ light trăng mode 56 4.12 User page 4.12.1 Giao diện Hình 4.17 Giao diện User page (1) Hình 4.18 Giao diện User page (2) 4.12.2 Mô tả - Khi vào trang User có bảng danh sách user - Có search để tìm kiếm user lọc 57 - Mỗi user hiển thị thông tin bàn tên, vai trị, email, số điện thoại - Có thao tác thêm user, xóa user, xuất file danh sách user Bảng 4.12 Mô tả giao diện User page STT Biến cố Xử lý Nhấn nút Add new user Mở modal thêm user Nhấn nút Delete Xóa user chọn Nhấn nút export Xuất file danh sách user 4.13 Blog Management page 4.13.1 Giao diện Hình 4.19 Giao diện Blog Management page (1) 58 Hình 4.20 Giao diện Blog Management page (2) 4.13.2 Mô tả - Khi vào trang Blog Management, thấy danh sách blog - Người dùng nhấn nút Add Record để mở cửa sổ thêm blog - Nhấn nút delete để xóa blog chọn Bảng 4.13 Mơ tả gia diện Blog Management page STT Biến cố Xử lý Nhấn nút Add Record Mở modal thêm blog Nhấn nút Delete Xóa blog chọn 59 CHƯƠNG 6: KẾT LUẬN 5.1 Đánh giá trình thực đồ án 5.1.1 Thuận lợi - Giảng viên hướng dẫn tận tình, hỗ trợ định hướng nhóm nghiên cứu thực đề tài - Các tài liệu ngơn ngữ lập trình, cơng nghệ thực chia sẻ rộng rãi Internet - Cộng đồng lớn giúp giải vấn đề thường gặp phải sử dụng cơng nghệ cách nhanh chóng - Vận dụng kiến thức, quy trình phát triển học 5.1.2 Khó khăn - Bước đầu tiếp cận số công nghệ nên cần nhiều thời gian tìm hiểu làm quen - Trong trình thực đồ án, thành viên nhóm không may gặp số vấn đề sức khỏe nhiều ảnh hưởng đến tiến độ công việc 5.2 Kết đạt 5.2.1 Sản phẩm - Source code Front-end: https://github.com/duonghoainam/travelwebsite-frontend - Source code Backend: https://github.com/voquocminh1209/travelwebsite-backend - Report documents: https://1drv.ms/w/s!AqQqIUhnSuRlz1oi7Frk_xWyWdRY?e=a4I0bc - Website: https://travel-website-frontend.vercel.app 5.2.2 Ưu điểm đồ án - Về giao diện: o Responsive tương thích với nhiều kích thước hình 60 o Nhờ sử dụng công nghệ NextJS nên giao diện trang web sinh động o Hỗ trợ SEO tốt o Nhóm tham khảo nghiêng cứu chọn màu phù hợp với du lịch góp phần tạo thiện cảm từ nhìn cho người dùng - Về chức năng: o Đáp ứng tín cần có website du lịch o Tính chat trực tuyến qua messeger đến Facebook page trang web o Thanh toán trực tuyến qua cổng toán paypal 5.2.3 Nhược điểm đồ án - Một số chức chưa hồn thiện - Code cịn cồng kềnh, chưa tối ưu code - Thanh toán paypal Việt Nam chưa phổ biến - Nhóm phân bố thời gian khơng tốt, tập trung nhiều vào phần UI nên phần logic chưa hoàn thiện 5.3 Hướng phát triển đề tài - Hồn thiện tính cốt lõi - Thêm phương thức toán phổ biến khác qua thẻ ngân hàng, ví điện tử momo… - Xây đựng tính tài khoản cho khách hàng để có ưu đãi thành viên, chương trình khuyến đặc biệt… - Xây dựng tính cho khách hàng đăng blog chia du lịch, like bình luận blog - Tích hợp chatbot tự động để trả lời câu hỏi nhanh thường gặp, giảm tải công việc cho nhân viên trực chat 61 5.4 Phân công công việc Bảng 5.1 Bảng phân công công việc STT Công việc Thành viên Thành viên Minh Nam Lên kế hoạch, tìm hiểu cơng nghệ x x Khảo sát, đặc tả yêu cầu x x Thiết kế liệu x Thiết kế giao diện x Xây dựng Front-end x Xây đựng API x Viết báo cáo x Deloy sản phẩm x Tỷ lệ công việc phân công 50% 50% Mức độ hồn thành cơng việc 100% 100% 62 TÀI LIỆU THAM KHẢO [1] FPT Cloud, “Javascript gì? Kiến thức tổng quan Javascript từ A – Z”, https://fptcloud.com/javascript/, truy cập ngày 24/12/2022 [2] TongThom (2021), “ReactJS gì? Các kiến thức tổng quan reactJS”, https://ruaxetudong.org/reactjs-la-gi/ , truy cập ngày 23/12/2022 [3] Văn Tuấn (2022), “NEXTJS gì? Ưu Nhược điểm NEXT JS?”, https://cfdcircle.vn/nextjs-la-gi-uu-va-nhuoc-diem-cua-nextjs-26/, truy cập ngày 24/12/2022 [4] Topdev, “Node.js thực gì?”, https://topdev.vn/blog/node-js-la-gi/, truy cập ngày 24/12/2022 [5] ITNavi, "Expressjs gì? Tại nên sử dụng Expressjs lập trình?”, https://itnavi.com.vn/blog/expressjs-la-gi, truy cập ngày 24/12/2022 [6] Nguyen Van Anh Duong (2020), “Giới thiệu Hệ quản trị sở liệu NoSQL MongoDB”, https://viblo.asia/p/gioi-thieu-he-quan-tri-co-so-du-lieu-nosql- mongodb-oOVlYMLzl8W, truy cập ngày 24/12/2022 [7] Hoang Hung (2018), “Mongoose cho MongoDB, Nodejs”, https://viblo.asia/p/mongoose-cho-mongodb-nodejs-Qbq5QWvJZD8, truy cập ngày 24/12/2022 63 ... tiêu dùng Nhận thấy lợi ích nhu cầu thực tế ấy, nhóm định chọn đề tài “XÂY DỰNG WEBSITE DU LỊCH” Mục tiêu đề tài: Xây dựng website du lịch giúp quảng bá thương hiệu doanh nghiệp, cung cấp thông... dùng Nhận thấy lợi ích nhu cầu thực tế ấy, nhóm tác giả định chọn đề tài “XÂY DỰNG WEBSITE DU LỊCH” 1.3 Mục tiêu Xây dựng website du lịch giúp quảng bá thương hiệu doanh nghiệp, cung cấp thông tin... ngày………tháng………năm……… Giảng viên hướng dẫn Trần Thị Hồng Yến ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE DU LỊCH (BUILD A TRAVEL WEBSITE) Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực