ĐỀ TÀI XÂY DỰNG WEBSITE đặt TOUR DU LỊCH DTRAVEL

lOMoARcPSD|9242611 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THƠNG VIỆT HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG WEBSITE ĐẶT TOUR DU LỊCH DTRAVEL Sinh viên: Nguyễn Mạnh Trường Đạt Mã:21IT010 Giảng viên hướng dẫn: TS Huỳnh Ngọc Thọ Đà Nẵng, tháng 05 năm 2022 lOMoARcPSD|9242611 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN lOMoARcPSD|9242611 LỜI CẢM ƠN Để hoàn thành báo cáo đồ trước hết em xin gửi đến quý thầy cơ, giáo khoa Khoa Học Máy Tính, trường Đại học Công nghệ thông tin Truyền thông Việt Hàn Đặc biệt, em xin trân trọng gửi đến TS Huỳnh Ngọc Thọ, trưởng Phòng Đào tạo, Trường Đại học Công nghệ thông tin Truyền thông Việt - Hàn tận tình hướng dẫn, giúp đỡ em hồn thành chuyên đề báo cáo lời cảm ơn sâu sắc Em xin chân thành cảm ơn thầy cô khoa Khoa Học Máy Tính nhiệt tình dạy bảo tạo điều kiện thuận lợi cho em suốt trình thực đồ án Em xin cảm ơn bạn sinh viên, anh chị sinh viên khóa trước nhiệt tình giúp đỡ em q trình thực Vì kiến thức thân cịn nhiều hạn chế, suốt trình thực đồ án này, em khơng tránh khỏi sai sót, kính mong nhận bảo thầy cô Cuối em xin gửi đến thầy cô, người giúp đỡ em lời cảm ơn trân trọng nhất, chúc người sức khoẻ thành công ! Sinh viên, Nguyễn Mạnh Trường Đạt lOMoARcPSD|9242611 MỤC LỤC MỞ ĐẦU Giới thiệu 1 Mục tiêu đề tài Nội dung kế hoạch thực 3.1 Nội dung 3.2 Kế hoạch thực Phương pháp phạm vi nghiên cứu 4.1 Phương pháp nghiên cứu 4.2 Phạm vi nghiên cứu 4.3 Phương tiện nghiên cứu Kết đề tài Bố cục báo cáo Chương TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE NHỮNG HIỂU BIẾT CƠ BẢN VỀ WEB 4 1.1 Các khái niệm web 1.1.1 Web, trang web gì? 1.1.2 World Wide Web(WWW) gì? 1.2 Trang web 4 1.2.1 Web tĩnh gì? 1.2.2 Web động gì? TÌM HIỂU VỀ CÁC NGƠN NGỮ LẬP TRÌNH 4 2.1 Ngôn ngữ HTML 2.2 Ngôn ngữ CSS 2.3 Ngơn ngữ lập trình JavaScript CÁC FRAMEWORK VÀ LIBRARY HỖ TRỢ 3.1 Framework 3.1.1 Framework gì? 3.1.2 Tìm hiểu Bootstrap 3.2 Library 7 7 lOMoARcPSD|9242611 3.2.1 Library gì? 3.2.2 Tìm hiểu jQuery CÔNG CỤ SỬ DỤNG 7 4.1 Visual Studio Code 4.2 Adobe Photoshop CC 2019 Kết chương Chương PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG Yêu cầu 1.1 Yêu cầu chức 1.1.1 Đối với người dùng 1.1.2 Đối với người quản trị hệ thống 1.1.3 Yêu cầu hệ thống 1.2 Yêu cầu phi chức Các tác nhân 9 9 9 9 Thiết kế hệ thống 10 Kết chương 10 Chương XÂY DỰNG WEBSITE Giao diện website 11 11 1.1 Giao diện trang chủ 11 1.2 Giao diện dịch vụ tour du lịch 12 1.3 Giao diện trang dịch vụ vé máy bay 14 1.4 Giao diện trang dịch vụ khách sạn resort 16 1.5 Trang liên hệ 18 1.6 Trang đăng nhập 19 1.7 Trang đăng ký 20 1.8 Trang quản lý 20 1.9 Kết 21 1.10 Công cụ thiết kế 22 Chức website 22 Kết chương 22 KẾT LUẬN Kết đạt 1.1.Về kiến thức học tập 23 23 23 lOMoARcPSD|9242611 1.2 Về sản phẩm 23 Hạn chế 23 Hướng nghiên cứu 23 TÀI LIỆU THAM KHẢO 24 lOMoARcPSD|9242611 DANH MỤC CÁC TỪ VIẾT TẮT VIẾT TẮT NỘI DUNG SEO Search Engine Optimization CDN Content Delivery Network URL Uniform Resources Locator lOMoARcPSD|9242611 DANH MỤC CÁC BẢNG Bảng 1.1 - Bảng yêu cầu phi chức lOMoARcPSD|9242611 DANH MỤC HÌNH VẼ Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình 2.1 - Sơ đồ đặc tả chức 3.1 - Giao diện trang chủ 3.2 - Giao diện trang chủ 3.3 - Giao diện trang chủ 3.4 - Giao diện dịch vụ tour du lịch 3.5 - Giao diện đặt tour chi tiết 3.6 - Trang dịch vụ vé máy bay 3.7 - Trang đặt vé máy bay chi tiết 3.8 - Giao diện trang đặt phòng khách sạn 3.9 - Trang đặt phòng khách sạn chi tiết 3.10 - Trang liên hệ 3.11 - Trang đăng nhập 3.12 - Trang đăng ký 3.13 - Trang quản lý tài khoản 3.14 - Trang quản lý tour 3.15 - Trang quản lý doanh thu hệ thống 10 11 11 12 13 14 14 15 16 17 18 19 20 20 21 21 lOMoARcPSD|9242611 MỞ ĐẦU Giới thiệu Ngày nay, khoa học công nghệ có bước phát triển mạnh mẽ chiều rộng lẫn chiều sâu Máy tính trở thành cơng cụ làm việc, giải trí thơng dụng người khơng cơng sở mà chí cịn gia đình Việc áp dụng công nghệ, khoa học kỹ thuật vào lĩnh vực đời sống ngày điều thiếu, tảng cho trao đổi thơng tin toàn giới Điều chứng tỏ cần thiết khơng thể thiếu Internet Vì tạo điều kiện thuận lợi cho việc chia sẻ quảng bá dịch vụ thương mại, du lịch Trong năm trở lại đây, du lịch Việt Nam đà phát triển vượt bậc, lượng khách quốc tế đến khách nội địa ngày tăng Du lịch Việt Nam ngày biết đến nhiều tồn giới, nhiều điểm đến nước bình chọn địa yêu thích du khách quốc tế Đà Nẵng mảnh đất mẹ thiên nhiên ưu ban phát cho nhiều danh lam thắng cảnh, cảnh đẹp mỹ miều Trong mười năm trở lại đây, ngành du lịch Đà Nẵng có bước nhảy vọt ngoạn mục, trở thành điểm du lịch đông khách nước UBND thành phố vừa ban hành Quyết định số 4324/QĐ-UBND ngày 30-12-2021 phê duyệt Đề án Phát triển du lịch Vùng kinh tế trọng điểm miền Trung trở thành ngành kinh tế mũi nhọn, với quan điểm chuyển từ “điểm du lịch” sang “vùng du lịch”… Nắm bắt thời ngàn vàng ấy, sở muốn tìm hiểu Thiết Kế Web ứng dụng Web góp phần vào du lịch thành phố, em chọn đề tài “Xây dựng Website đặt tour du lịch DTRAVEL” làm đề tài đồ án Mục tiêu đề tài Mục tiêu đề tài nhằm tuyên truyền, quảng bá, giúp người hiểu thêm Đà Nẵng đặt tour du lịch cách dễ dàng, đặc biệt khách du lịch nước với giao diện đơn giản, thân thiện dễ dàng truy cập Nội dung kế hoạch thực 3.1 Nội dung ● Chức người dùng: - Xem, tìm kiếm tour du lịch có sẵn - Đặt tour du lịch theo nhu cầu: địa điểm, giá, số người, ngày - Xem, tìm kiếm vé máy bay - Đặt vé máy bay theo nhu cầu: hãng, giá, số người, ngày bay, xuất phát… - Xem, tìm kiếm khách sạn resort nghĩ dưỡng - Đặt khách sạn, resort theo nhu cầu: loại phòng, số người, giá… lOMoARcPSD|9242611 - Tác nhân quản trị: người thực chức quản trị hệ thống, tài khoản, khách hàng, quản lý giao diện Để thực chức quản trị hệ thống tác nhân bắt buộc phải thực đăng nhập Tác nhân khách hàng: thực chức đăng ký tài khoản, đăng nhập Tìm kiếm dịch vụ, xem tin tức, đặt dịch vụ, đánh giá… Thiết kế hệ thống Hình 2.1 - Sơ đồ đặc tả chức Kết chương Sau phân tích hệ thống, em lên kế hoạch thực thiết kế trang web dựa tiêu chuẩn thân thiện người sử dụng Dựa sơ đồ em thực xây dựng trang web trình bày trang Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Chương XÂY DỰNG WEBSITE Giao diện website 1.1 Giao diện trang chủ Hình 3.1 - Giao diện trang chủ Hình 3.2 - Giao diện trang chủ Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Hình 3.3 - Giao diện trang chủ ● Trang chủ gồm: ✔ Banner phần home ✔ Phần viết giới thiệu ✔ Phần slide show tour hot nhất: hiển thị tour mới, hot nhiều người đặt ✔ Phần khoảnh khắc bật: hiển thị ảnh, kỉ niệm bật du khách tour ✔ Phần đánh giá bật khách hàng thân thiết 1.2 Giao diện dịch vụ tour du lịch Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Hình 3.4 - Giao diện dịch vụ tour du lịch ● Trang dịch vụ tour: hiển thị tour du lịch có sẵn, khách hàng tìm kiếm tour Sau lựa chọn tour thích hợp, khách hàng bấm nút chọn để đặt tour Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Hình 3.5 - Giao diện đặt tour chi tiết ● Trang đặt tour chi tiết: hiển thị ô nhập thông tin từ người dùng, kiểm tra người dùng có nhập đầy đủ, định dạng email số điện thoại có hay khơng sau người dùng bấm nút đặt tour yêu cầu gửi đến người quản trị 1.3 Giao diện trang dịch vụ vé máy bay Hình 3.6 - Trang dịch vụ vé máy bay ● Trang cho phép người dùng xem, tìm kiếm vé máy bay theo tiêu chí hãng hàng khơng, ngày đi, khoảng giá… Sau người dùng ấn nút chọn, hệ thống chuyển hướng sang trang đặt vé máy bay chi tiết Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Hình 3.7 - Trang đặt vé máy bay chi tiết ● Trang cho phép người dùng nhập thông tin cá nhân thông tin chuyến bay, người dùng bỏ trống nhập sai định dạng, hệ thống hiển thị báo lỗi Sau người dùng nhập đúng, ấn nút đặt yêu cầu gửi Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 1.4 Giao diện trang dịch vụ khách sạn resort Hình 3.8 - Giao diện trang đặt phịng khách sạn ● Trang dịch vụ khách sạn, resort hiển thị danh sách khách sạn resort cho khách hàng lựa chọn, khách hàng tìm kiếm khách sạn, sau lựa chọn dược, khách hàng ấn nút chọn website chuyển qua trang đặt chỗ chi tiết Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Hình 3.9 - Trang đặt phòng khách sạn chi tiết ● Trang đặt khách sạn, resort chi tiết: hiển thị ô nhập thông tin từ người dùng, kiểm tra người dùng có nhập đầy đủ, định dạng email số điện thoại có hay không sau người dùng bấm nút đặt phịng u cầu gửi đến người quản trị người quản trị phản hồi Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 1.5 Trang liên hệ Hình 3.10 - Trang liên hệ ● Trang liên hệ: Cho phép người dùng gửi góp ý đến người quản trị, có thơng tin địa chỉ, số điện thoại, email Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 1.6 Trang đăng nhập Hình 3.11 - Trang đăng nhập ● Trang đăng nhập cho phép người dùng đăng nhập vào tài khoản Hệ thống yêu cầu nhập email mật Nếu nhập khơng định dạng có dòng lưu ý Sau ấn nút đăng nhập người dùng nhập sai hệ thống bắt nhập lại, cịn vào Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 1.7 Trang đăng ký Hình 3.12 - Trang đăng ký ● Trang đăng ký cho phép người dùng đăng ký tài khoản Hệ thống yêu cầu nhập tên đăng nhập, email mật Nếu nhập khơng định dạng có dịng lưu ý Sau đăng ký, người dùng có tài khoản hệ thống 1.8 Trang quản lý Hình 3.13 - Trang quản lý tài khoản Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 ● Trang quản lý cho phép người quản trị hệ thống quản lý tài khoản người dùng, sửa, xóa tài khoản cấm hệ thống Hình 3.14 - Trang quản lý tour ● Trang cho phép người quản lý xem danh sách tour đăng lên hệ thống từ cho phép hiển thị lên hệ thống xóa Hình 3.15 - Trang quản lý doanh thu hệ thống ● Trang cho phép người quản lý xem, so sánh doanh thu theo tháng hệ thống 1.9 Kết Hoàn thành trang web gồm: ✔ Trang chủ ✔ Trang đặt tour du lịch ✔ Trang đặt vé máy bay ✔ Trang đặt phòng khách sạn, resort ✔ Trang liên hệ Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 ✔ Trang giới thiệu ✔ Trang đăng nhập, đăng kí 1.10 Cơng cụ thiết kế ✔ Sử dụng ngôn ngữ HTML, CSS, JavaScript ✔ Sử dụng thư viện jQuery ✔ Sử dụng framework Bootstrap ✔ Sử dụng thư viện AOS để tạo hiệu ứng lăn chuột Chức website Các trang chứa liên kết trang lại ✔ Trang chủ: ✔ Trang đặt tour ✔ Trang đặt vé máy bay ✔ Trang đặt phòng khách sạn resort ✔ Trang liên hệ ✔ Trang đăng nhập/đăng ký Kết chương Quy trình thực thiết kế web đến gần hoàn thiện trang web với chức nêu Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 KẾT LUẬN Kết đạt 1.1.Về kiến thức học tập Để thiết kế trang web chuẩn việc không đơn giản, địi hỏi phải xây dựng theo giai đoạn: khảo sát, nghiên cứu, phân tích thiết kế hệ thống, nghiên cứu tổng quan cơng cụ lập trình, thiết kế Ngày du lịch Việt Nam phát triển mạnh nên việc xây dựng trang web hợp lý Thông qua nghiên cứu xây dựng đề tài này, em củng cố, học hỏi thêm nhiều thứ như: - Củng cố kiến thức thiết kế web HTML, CSS, JavaScript Biết thêm nhiều kiến thức xây dựng hệ thống web thời gian thực phân tích hệ thống trang web - Biết thêm nhiều kiến thức Bootstrap, JQuery, sử dụng thư viện JavaScript, CSS để làm cho trang web thêm linh hoạt bắt mắt 1.2 Về sản phẩm Qua dự án trên, em đạt số kết sau: - Xây dựng trang web với giao diện phù hợp, chưa tối ưu hoàn toàn đủ bắt mắt cho người dùng - Mọi người dễ dàng sử dụng trang web Hạn chế Bên cạnh kết đạt được, cịn nhiều hạn chế Do thời gian hồn thiện dự án hạn chế nên số chức khác em chưa kịp hoàn thiện thời gian trước bảo vệ, mong thầy cô châm chước nhiều Sau song có thời gian, em cố gắng hồn thiện phát triển hệ thống tốt từ đưa vào thực tiễn Hướng nghiên cứu Với hạn chế tồn nêu trên, hướng nghiên cứu em dự kiến sau: - Tìm hiểu thêm nhiều công nghệ hỗ trợ thiết kế web React, Angular, … để từ làm tăng tính thẩm mĩ hiệu trang web - Khai thác thêm nhiều chức kết nối với server để lưu liệu máy chủ, làm tăng độ linh hoạt cho trang web Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 TÀI LIỆU THAM KHẢO [1 ] [2 ] [3 ] "https://daotao.vku.udn.vn/" "https://danang.gov.vn/" Phương pháp phân tích thiết kế hệ thống("quanlydoanhnghiep.edu.vn/phuong-phap-phan-tich-va-thiet-ke-hethong-thong-tin/") [4 Tìm hiểu Bootstrap ("https://getbootstrap.com") ] [5 Tìm hiểu jQuery("https://viblo.asia/p/tim-hieu-ve-jquery- l5XRBJdVRqPe") ] 24 Downloaded by tran quang (quangsuphamhoak35@gmail.com) ... dựng website đặt tour du lịch online với hệ thống xử lý trình đặt tour khách hàng chủ công ty, đối tác với công ty 1.1.1 Đối với người dùng - Xem, tìm kiếm tour du lịch có sẵn - Đặt tour du lịch... - Giao diện dịch vụ tour du lịch ● Trang dịch vụ tour: hiển thị tour du lịch có sẵn, khách hàng tìm kiếm tour Sau lựa chọn tour thích hợp, khách hàng bấm nút chọn để đặt tour Downloaded by tran... “điểm du lịch” sang “vùng du lịch”… Nắm bắt thời ngàn vàng ấy, sở muốn tìm hiểu Thiết Kế Web ứng dụng Web góp phần vào du lịch thành phố, em chọn đề tài “Xây dựng Website đặt tour du lịch DTRAVEL? ??