Nghiên cứu xây dựng website giới thiệu tour du lịch việt nam

TRƯỜNG ĐẠI HỌC SƯ PHẠM – ĐẠI HỌC ĐÀ NẴNG KHOA TIN HỌC BÁO CÁO KHÓA LUẬN TỐT NGHIỆP TÊN ĐỀ TÀI “NGHIÊN CỨU XÂY DỰNG WEBSITE GIỚI THIỆU TOUR DU LỊCH VIỆT NAM” SVTH : Trần Dức Huy Lớp : 15CNTT1 MSSV : 312022151121 GVHD : TS Nguyễn Đình Lầu ĐÀ NẴNG, 04/2019 LỜI CẢM ƠN Trong đợt thực tập vừa qua, em nhận giúp đỡ tận tình động viên từ nhiều phía Tất điều giúp em có động lực cố gắng hoàn thành tập tốt nghiệp Em xin gửi lời cảm ơn chân thành đến tất thầy cô giảng dạy em suốt thời gian qua Cảm ơn thầy Nguyễn Đình Lầu – người hướng dẫn em thực đồ án Vì thời gian thực tập có hạn, kiến thức thân cịn nhiều hạn chế nên khơng tránh khỏi thiếu sót, kính mong nhận xét, phê bình, góp ý thầy Trường Đại học Sư phạm Đà Nẵng, để em có điều kiện học hỏi phấn đấu Cuối cùng, em xin chúc Ban giám hiệu quý thầy cô Trường Đại học Sư phạm Đà Nẵng lời chúc sức khỏe, thành đạt công việc vui vẻ sống Em xin chân thành cảm ơn ! i NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ………………………… Đà Nẵng, ngày … tháng … năm 2019 Giảng viên hướng dẫn Nguyễn Đình Lầu ii LỜI CAM ĐOAN Tơi xin cam đoạn: Những nội dung báo cáo tốt nghiệp thực hướng dẫn trực tiếp thầy Nguyễn Đình Lầu Mọi tham khảo dùng đồ án thực tập trích dẫn rõ ràng trung thực tên tác giả, tên cơng trình, thời gian, địa điểm cơng bố Mọi chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, tơi xin chịu hồn tồn trách nhiệm Đà Nẵng, ngày … tháng … năm 2019 Sinh viên thực Trần Đức Huy iii MỤC LỤC LỜI CẢM ƠN i NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ii LỜI CAM ĐOAN iii DANH MỤC CÁC HÌNH vii DANH MỤC CÁC BẢNG ix MỞ ĐẦU 1 Lý chọn đề tài Mục tiêu đề tài Phạm vi Mục đích đề tài Phương pháp nghiên cứu, giải pháp công nghệ Nội dung nghiên cứu Tiêu chí chức đề tài Bố cục đề tài CHƯƠNG I : CƠ SỞ LÝ THUYẾT 1.1 Tổng quan HTML/CSS 1.1.1 Sơ lược HTML 1.1.2 Sơ lược CSS 1.2 Javascript 1.3 Bootstrap 1.4 SQL server 1.5 Framework ReactJS 10 1.5.1 Virtual DOM 11 iv 1.5.2 Giới thiệu JSX 11 1.5.3 Giới thiệu Components 12 1.5.4 Props and State 12 1.6 Redux 12 CHƯƠNG II: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 14 2.1 Tìm hiểu thực tế 14 2.1.1 Khảo sát mức 14 2.1.2 Khảo sát mức 14 2.1.3 Khảo sát mức 14 2.2 Mục tiêu đề tài 14 2.3 Thiết kế hệ thống 15 2.3.1 Sơ đồ Use-case 15 2.3.2 Đặc tả Use-case 18 2.3.3 Sơ đồ ER 26 2.4 Thiết kế sở liệu 26 2.4.1 Sơ đồ thực thể quan hệ 26 2.4.2 Cấu trúc bảng ràng buộc 27 2.4.3 Sơ đồ hoạt động 30 CHƯƠNG III: KẾT QUẢ ĐẠT ĐƯỢC 33 3.1 Trang chủ 33 3.2 Trang cá nhân 34 3.3 Trang điểm đến 35 3.4 Trang quản lý 36 3.4.1 Quản lý tour 36 v 3.4.2 Quản lý users 38 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 39 TÀI LIỆU THAM KHẢO 40 vi DANH MỤC CÁC HÌNH Hình 1.1: Cấu trúc CSS Hình 1.2: Sự thay đổi Virtual DOM Real DOM 11 Hình 1.3: Cơ chế one-way data binding 11 Hình 1.4: Sơ đồ hoạt động Redux 13 Hình 2.1: Sơ đồ use case mơ tả chức tổng thể 15 Hình 2.2: Sơ đồ use case mơ tả chức quản lý quản trị viên 16 Hình 2.3: Sơ đồ use case mô tả chức khách hàng 16 Hình 2.4: Sơ đồ use case mô tả chức khách hàng tiềm 17 Hình 2.5: Sơ đồ thực thể liên kết 26 Hình 2.6: Sơ đồ thực thể quan hệ 26 Hình 2.7: Sơ đồ hoạt động tổng quát 30 Hình 2.8: Sơ đồ hoạt động thêm 30 Hình 2.9: Sơ đồ hoạt động chỉnh sửa 31 Hình 2.10: Sơ đồ hoạt động xóa 31 Hình 2.11: Sơ đồ hoạt động đặt tour 31 Hình 2.12: Sơ đồ hoạt động đăng ký tài khoản 32 Hình 3.1: Giao diện trang chủ 33 Hình 3.2: Giao diện form đăng nhập 33 Hình 3.3: Giao diện form đăng ký 34 Hình 3.4: Giao diện trang cá nhân 34 Hình 3.5: Giao diện trang điểm đến 35 Hình 3.6: Giao diện trang chi tiết điểm đến 35 Hình 3.7: Giao diện trang quản lý tour 36 Hình 3.8: Giao diện trang thêm tour 36 Hình 3.9: Giao diện trang cập nhật tour 37 Hình 3.10: Giao diện xóa tour 37 Hình 3.11: Giao diện trang quản lý users 38 vii Hình 3.12: Giao diện xóa user 38 viii DANH MỤC CÁC BẢNG Bảng 2.1: Bảng đặc tả Use case đăng nhập 18 Bảng 2.2: Bảng đặc tả Use case đăng xuất 18 Bảng 2.3: Bảng đặc tả Use case xem thông tin tour 19 Bảng 2.4: Bảng đặc tả Use case thêm tour 19 Bảng 2.5: Bảng đặc tả Use case xóa tour 20 Bảng 2.6: Bảng đặc tả Use case cập nhật tour 20 Bảng 2.7: Bảng đặc tả Use case xem thông tin khách hàng 21 Bảng 2.8: Bảng đặc tả Use case tạo tài khoản 21 Bảng 2.9: Bảng đặc tả Use case cập nhật thông tin cá nhân 22 Bảng 2.10: Bảng đặc tả Use case xóa tài khoản 22 Bảng 2.11: Bảng đặc tả Use case xem thông tin đặt tour 23 Bảng 2.12: Bảng đặc tả Use case thêm giỏ hàng 23 Bảng 2.13: Bảng đặc tả Use case xóa đặt tour 24 Bảng 2.14: Bảng đặc tả Use case xem đánh giá 24 Bảng 2.15: Bảng đặc tả Use case xóa đánh giá 25 Bảng 2.16: Bảng LOGIN 27 Bảng 2.17: Bảng CUSTOMER 27 Bảng 2.18: Bảng PROVINCE_CITY 28 Bảng 2.19: Bảng TOUR 28 Bảng 2.20: Bảng TOUR_DETAILS 29 Bảng 2.21: Bảng BOOKING_TOUR 29 Bảng 2.22: Bảng BOOKING_DETAILS 29 ix GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp 2.3.3 Sơ đồ ER Hình 2.5: Sơ đồ thực thể liên kết 2.4 Thiết kế sở liệu 2.4.1 Sơ đồ thực thể quan hệ Hình 2.6: Sơ đồ thực thể quan hệ Website tour du lịch Việt Nam 26 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp 2.4.2 Cấu trúc bảng ràng ḅc • Bảng LOGIN Bảng 2.16: Bảng LOGIN Tên trường STT Kiểu liệu Ràng buộc liệu Mô tả ID int Số thứ tự CUSTOMER_ID Nvarchar (50) USERNAME Nvarchar (50) Tên đăng nhập PASSWORD Nvarchar (50) Mật ROLE Nvarchar (50) Vị trí FOREIGN KEY Mã khách hàng • Bảng CUSTOMER Bảng 2.17: Bảng CUSTOMER Tên trường STT Kiểu liệu Ràng buộc Mô tả liệu ID int CUSTOMER_ID Nvarchar (50) NAME Nvarchar (50) Tên khách hàng AGE int Tuổi GENDER bit Giới tính ADDRESS Nvarchar (50) Địa EMAIL Nvarchar (50) Email PHONE_NUMBER Nvarchar (50) Số điện thoại ACCOUNT_ID int Số tài khoản 10 BANK Nvarchar (50) Ngân hàng 11 NOTE Nvarchar (200) Ghi Website tour du lịch Việt Nam Số thứ tự 27 PRIMARY KEY Mã khách hàng Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp • Bảng PROVINCE_CITY Bảng 2.18: Bảng PROVINCE_CITY Tên trường STT Kiểu liệu Ràng buộc liệu Mô tả ID int Số thứ tự PROVINCE_ID Nvarchar (50) NAME Nvarchar (50) Tên tỉnh thành REGION Nvarchar (50) Khu vực NOTE Nvarchar (200) Ghi PRIMARY KEY Mã tỉnh thành • Bảng TOUR Bảng 2.19: Bảng TOUR Tên trường STT Kiểu liệu Ràng buộc Mô tả liệu ID int Số thứ tự TOUR_ID Nvarchar (50) PRIMARY KEY Mã tour NAME Nvarchar (50) Tên tour PRICE Nvarchar (50) Giá tour TRANSPORT Nvarchar (50) Phương tiện INFO Nvarchar (500) Thông tin DEPARTUTE Nvarchar (50) Nơi xuất phát DESTINATION Nvarchar (50) Nơi đến TIME Date Thời gian 10 NUMBER_SEATS int Số chỗ tour 11 NUMBER_BOOKED int Số chỗ đặt 12 NOTE Ghi Nvarchar (200) Website tour du lịch Việt Nam 28 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp • Bảng TOUR_DETAILS Bảng 2.20: Bảng TOUR_DETAILS Tên trường STT Kiểu liệu Ràng buộc liệu Mô tả ID int Số thứ tự PROVINCE_ID Nvarchar (50) FOREIGN KEY Mã tỉnh thành TOUR_ID Nvarchar (50) FOREIGN KEY Tên tour • Bảng BOOKING_TOUR Bảng 2.21: Bảng BOOKING_TOUR Tên trường STT Kiểu liệu Ràng buộc Mô tả liệu ID int Số thứ tự BOOKING_ID Nvarchar (50) TOUR_ID Nvarchar (50) BOOKING_DATE Date Ngày đặt NUMBER_SEATS int Số chỗ đặt TOTAL money Tổng cộng STATUS Nvarchar (50) Trạng thái PRIMARY KEY Mã tỉnh thành Mã tour • Bảng BOOKING_DETAILS Bảng 2.22: Bảng BOOKING_DETAILS Tên trường STT Kiểu liệu Ràng buộc Mô tả liệu ID int Số thứ tự BOOKING_ID Nvarchar (50) FOREIGN KEY Mã tỉnh thành CUSTOMER_ID Nvarchar (50) FOREIGN KEY Mã khách hàng DEPARTURE_DATE Date Ngày RETURN_DATE Ngày Date Website tour du lịch Việt Nam 29 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp NOTE Nvarchar (200) Ghi 2.4.3 Sơ đồ hoạt động Hình 2.7: Sơ đồ hoạt động tổng quát Hình 2.8: Sơ đồ hoạt động thêm Website tour du lịch Việt Nam 30 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp Hình 2.9: Sơ đồ hoạt động chỉnh sửa Hình 2.10: Sơ đồ hoạt động xóa Hình 2.11: Sơ đồ hoạt động đặt tour Website tour du lịch Việt Nam 31 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp Hình 2.12: Sơ đồ hoạt động đăng ký tài khoản Website tour du lịch Việt Nam 32 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp CHƯƠNG III: KẾT QUẢ ĐẠT ĐƯỢC 3.1 Trang chủ Hình 3.1: Giao diện trang chủ • Form đăng nhập Hình 3.2: Giao diện form đăng nhập Website tour du lịch Việt Nam 33 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp • Form đăng ký Hình 3.3: Giao diện form đăng ký 3.2 Trang cá nhân Hình 3.4: Giao diện trang cá nhân Website tour du lịch Việt Nam 34 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp 3.3 Trang điểm đến Hình 3.5: Giao diện trang điểm đến • Trang chi tiết tour Hình 3.6: Giao diện trang chi tiết điểm đến Website tour du lịch Việt Nam 35 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp 3.4 Trang quản lý 3.4.1 Quản lý tour Hình 3.7: Giao diện trang quản lý tour • Thêm tour Hình 3.8: Giao diện trang thêm tour Website tour du lịch Việt Nam 36 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp • Cập nhật tour Hình 3.9: Giao diện trang cập nhật tour • Xóa tour tùy chọn Hình 3.10: Giao diện xóa tour Website tour du lịch Việt Nam 37 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp 3.4.2 Quản lý users Hình 3.11: Giao diện trang quản lý users • Xóa user Hình 3.12: Giao diện xóa user Website tour du lịch Việt Nam 38 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Các kết đạt - Được học hỏi thêm nhiều kiến thức củng cố lại kiến thức học - Rèn luyện kỹ làm việc độc lập Hướng phát triển - Xây dựng Website giới thiệu tour du lịch Việt Nam - Tiếp tục phát triển thêm nhiều chức chạy tảng ứng dụng mobile - Áp dụng vào công ty du lịch Việt Nam Kiến thức rút từ trình nghiên cứu - Hiểu rõ thư viện ReactJS, Redux, phân tích thiết kế hệ thống - Nâng cao kỹ lập trình, hiểu cách hoạt động website tour du lịch Website tour du lịch Việt Nam 39 Trần Đức Huy - 15CNTT1 GVHD: TS Nguyễn Đình Lầu Báo cáo khóa luận tốt nghiệp TÀI LIỆU THAM KHẢO https://reactjs.org/ https://redux.js.org/ https://reacttraining.com/react-router/web/guides/quick-start https://github.com/typicode/json-server https://o7planning.org/vi/10299/huong-dan-cai-dat-va-cau-hinh-sqlserver-express-2014 https://getbootstrap.com/ https://mdbootstrap.com/docs/react/ https://www.youtube.com/watch?v=s6WS8gLaqc&index=4&list=PLJ5qtRQovuEOoKffoCBzTfvzMTTORnoy p https://quoctuan.info/bai-01-huong-dan-cai-dat-reactjs.1.1.html 10 https://www.vietnamtourbooking.com/ 11 http://dulichvietnamtour.com/home 12 https://travel.com.vn/ Website tour du lịch Việt Nam 40 Trần Đức Huy - 15CNTT1 ... triển - Xây dựng Website giới thiệu tour du lịch Việt Nam - Tiếp tục phát triển thêm nhiều chức chạy tảng ứng dụng mobile - Áp dụng vào công ty du lịch Việt Nam Kiến thức rút từ trình nghiên cứu. .. 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, em thực đồ án “XÂY DỰNG WEBSITE GIỚI THIỆU TOUR DU LỊCH VIỆT NAM? ?? Mục tiêu đề tài... tour du lịch hình thức trực tuyến nhằm tiết kiệm chi phí mặt bằng, nguồn nhân lực, thời gian quản lý Mục đích đề tài Mục đích đề tài nghiên cứu xây dựng website giới thiệu tour du lịch Việt Nam