(Đồ án hcmute) xây dựng website du lịch

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE DU LỊCH GVHD: MAI TUẤN KHÔI SVTT1: NGUYỄN QUANG HUY MSSV:15110215 SVTT2: LÊ TẤN KHANG MSSV: 15110229 SKL 0 7 Tp Hồ Chí Minh, tháng 07/2019 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN - - NGUYỄN QUANG HUY -15110215 LÊ TẤN KHANG - 15110229 Đề Tài: XÂY DỰNG WEBSITE DU LỊCH KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS MAI TUẤN KHƠI KHĨA 2015 – 2019 an ĐH SƯ PHẠM KỸ THUẬT TP HCM KHOA CNTT ******* CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Nguyễn Quang Huy MSSV 1: 15110215 Họ tên Sinh viên 2: Lê Tấn Khang MSSV 2: 15110229 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng Website du lịch Họ tên Giáo viên hướng dẫn: ThS Mai Tuấn Khôi NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng năm 2019 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an ĐH SƯ PHẠM KỸ THUẬT TP HCM KHOA CNTT ******* CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Nguyễn Quang Huy MSSV 1: 15110215 Họ tên Sinh viên 2: Lê Tấn Khang MSSV 2: 15110229 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng Website du lịch Họ tên Giáo viên phản biện: ThS Nguyễn Trần Thi Văn NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng năm 2019 Giáo viên phản biện (Ký & ghi rõ họ tên) an Trường ĐH Sư Phạm Kỹ Thuật Tp.HCM Cộng Hòa Xã Hội Chủ Nghĩa Việt Nam Khoa Công Nghê ̣Thông Tin Độc Lập – Tự Do – Hạnh Phúc -*** -*** -Tp Hồ Chí Minh, ngày 14 tháng 07 năm 2019 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ tên sinh viên thực 1: NGUYỄN QUANG HUY MSSV: 15110215 Họ tên sinh viên thực 2: LÊ TẤN KHANG MSSV: 15110229 Chuyên ngành: Công nghệ phần mềm Giáo viên hướng dẫn: ThS MAI TUẤN KHÔI Ngày giao đề tài: 05/03/2019 Ngày nộp đề tài: 14/07/2019 Tên đề tài: Các số liệu, tài liệu ban đầu: - Spring MVC - Spring Security - ReactJs - Hibernate XÂY DỰNG WEBSITE DU LỊCH Nội dung thuyết minh tính tốn: - Tìm hiểu cơng nghệ Spring MVC, Spring Security, ReactJs, Hibernate - Thiết kế website hướng dẫn du lịch với tính năng: • • • • • Đánh dấu lại nơi du lịch Lưu cảm xúc, hình ảnh nơi mà du lịch Khách du lịch xem thơng tin địa danh mà muốn Người dùng chia sẻ cảm nghĩ hình ảnh nơi du lịch Đánh giá du khách phần trăm đồ đất nước Việt Nam Sản phẩm: Website du lịch Giáo viên hướng dẫn ThS Mai Tuấn Khôi an MỤC LỤC DANH MỤC CÁC HÌNH ẢNH DANH MỤC BẢNG BIỂU GIỚI THIỆU Tính cấp thiết đề tài Mục tiêu Kết cấu CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG 1.1 Khảo sát trạng 1.2 Khảo sát website khác CHƯƠNG 2: LẬP DANH SÁCH YÊU CẦU 2.1 Sơ đồ Use case 2.2 Danh sách yêu cầu chức phần mềm CHƯƠNG 3: PHÂN TÍCH YÊU CẦU VÀ THIẾT KẾ CƠ CỞ DỮ LIỆU 3.1 Mơ hình hóa u cầu 3.2 Mô tả sở liệu CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 4.1 Màn hình giao diện xử lý bên client 4.2 Màn hình giao diện xử lý bên Admin CHƯƠNG 5: CÀI ĐẶT 5.1 Ngơn ngữ lập trình 5.2 Hệ quản trị sở liệu 5.3 Sơ đồ lớp CHƯƠNG 6: KIỂM THỬ 6.1 Test phần Admin 6.2 Test phần Client KẾT LUẬN an Kết đạt Ưu điểm Nhược điểm Hướng phát triển TÀI LIỆU THAM KHẢO KẾ HOẠCH THỰC HIỆN STT Thời gian Công việc (Năm 2019) 5/3 – 10/3 - Gặp giảng viên hướng dẫn nhận yêu cầu - Lập danh sách nhiệm vụ theo tuần thời gian thực 11/3 – 17/3 - Xác định yêu cầu, mô tả công việc - Xác định tính cấp thiết, mục tiêu kết cấu - Khảo sát phân tích trạng - Cài đặt công cụ cần thiết, thiết lập môi trường 18/3 – 24/3 - Xác định yêu cầu, mô tả công việc - Thiết kế lược đồ ERD - Tìm hiểu lập trình ReactJs Spring MVC 25/3 – 31/3 - Thiết kế giao diện UI cho user - Tìm hiểu Spring Security - Tìm hiểu Hibernate - Thiết kế sở liệu 1/4 -7/4 - Thiết kế giao diện UI cho user - Viết API cho User 8/4 – 14/4 - Thiết kế giao diện UI cho user - Viết API cho Place - Viết API cho Region an Ghi 15/4 – 21/4 - Thiết kế giao diện UI cho user - Viết API cho Place User 22/4 – 28/4 - Thiết kế giao diện UI cho user - Viết API cho Album - Viết API cho Feeling 29/4 – 5/5 - Thiết kế giao diện UI cho admin - Test API post man bổ sung API thiếu 10 6/5 – 12/5 - Thiết kế giao diện UI cho admin - Test API post man bổ sung API thiếu - Migrate database với UI user 11 13/5 – 19/5 - Thiết kế giao diện UI cho admin - Migrate database với UI user 12 20/5 – 26/5 - Migrate database với UI admin - Testing UI user migrate - Fix bug UI user migrate 13 17/5 – 2/6 - Testing UI admin migrate - Fix bug UI admin migrate - Fix bug UI user migrate 14 3/6 – 9/6 - Kiểm thử website - Sửa lỗi ứng dụng website 15 10/6 – 16/6 - Kiểm thử website - Sửa lỗi ứng dụng website 16 17/6 – 23/6 - Chuẩn bị thuyết trình 17 24/6 – 20/6 - Hồn thiện báo cáo - Hồn thiện thút trình 18 1/7 – 7/7 - Chuẩn bị yêu cầu từ Khoa, chỉnh sửa báo cáo an - Quay video demo 19 8/7 – 14/7 - Chỉnh sửa báo cáo - Kiểm thử ứng dụng, chỉnh sửa lỗi website - Chỉnh sửa theo yêu cầu Ngày … tháng … năm 2019 Ngày … tháng … năm 2019 Người viết đề cương Giáo viên hướng dẫn Nguyễn Quang Huy Mai Tuấn Khôi an LỜI CẢM ƠN Để hồn thành khóa luận tốt nghiệp kỹ sư CNTT xây dựng website du lịch nhóm chúng em xin gửi lời cảm ơn chân thành đến: Ban giám hiệu trường Đại Học Sư Phạm Kỹ Thuật TP.HCM tạo điều kiện sở vật chất tốt, đáp ứng nhu cầu sinh viên, giảng viên với phòng học đẹp, máy chiếu, wifi để phục vụ cho việc học tập tìm kiếm thơng tin sinh viên, giảng dạy giảng viên Quý Thầy Cô Khoa Công Nghệ Thông Tin Trường Đại Hoc Sư Phạm Kỹ Thuật Tp.HCM tạo điều kiện thuận lợi cho nhóm chúng em thực đề tài khóa luận tốt nghiệp Giảng viên hướng dẫn Mai Tuấn Khôi, người giảng dạy hướng dẫn bảo tận tình, chi tiết giải đáp thắc mắc kịp thời để chúng em hồn thành khóa luận tốt nghiệp cách tốt Xin chân thành cảm ơn anh, chị khóa bạn bè ủng hộ giúp đỡ nhiều thời gian học tập nghiên cứu khóa luận tốt nghiệp Do chưa có nhiều kinh nghiệm nên khơng thể tránh khỏi thiếu sót hạn chế, mong nhận ý kiến đóng góp từ phía thầy, để đề tài hoàn thiện Tp Hồ Chí Minh, ngày 02 tháng 01 năm 2019 Nhóm sinh viên thực Lê Tấn Khang Nguyễn Quang Huy an Feeling id Id getId() đăng Trả thuộc tính đối tượng setId(Long) Gán giá trị cho thuộc tính đối tượng topic Tên chủ đề getTopic() Trả thuộc tính đối tượng đăng setTopic(String) Gán giá trị cho thuộc tính đối tượng content Nội dung getContent() Trả thuộc tính đối tượng đăng setContent(String) Gán giá trị cho thuộc tính đối tượng feelingStatus Trạng thái getFeelingStatus() Trả thuộc tính đối tượng đăng userRegion Danh sách setFeelingStatus Gán giá trị cho thuộc tính (FeelingStatus) đối tượng getUserRegion() Trả thuộc tính đối tượng userRegion placeUser Danh sách setUserRegion Gán giá trị cho thuộc tính (UserRegion) đối tượng getPlaceUser() Trả thuộc tính đối tượng placeUser setPlaceUser Gán giá trị cho thuộc tính (PlaceUser) đối tượng Bảng 5: Bảng mô tả sơ đồ lớp Feeling 152 an Tên Class Tên Mô tả Tên Operation Mô tả Operation getId() Trả thuộc tính Attribute Attribute UserRegion id Id đối tượng UserRegion setId(Long) Gán giá trị cho thuộc tính đối tượng user Mã user getUser() Trả thuộc tính đối tượng setUser(User) Gán giá trị cho thuộc tính đối tượng region Mã region getRegion() Trả thuộc tính đối tượng setRegion(Region) Gán giá trị cho thuộc tính đối tượng feelings Danh sách getFeelings() Trả thuộc tính đăng đối tượng setFeelings Gán giá trị cho thuộc (List) tính đối tượng Bảng 6: Bảng mô tả sơ đồ lớp UerRegion Tên Class Tên Mơ tả Attribute Attribute Trả thuộcPlaceUser tính đốiid tượng Id Tên Operation Mô tả Operation getId() PlaceUse r setId(Long) Gán giá trị cho thuộc tính đối tượng user Mã user getUser() Trả thuộc tính đối tượng setUser(User) Gán giá trị cho thuộc tính đối tượng 153 an place Mã place getPlace() Trả thuộc tính đối tượng setPlace(Place) Gán giá trị cho thuộc tính đối tượng feelings Danh getFeelings() Trả thuộc tính đối tượng setFeelings Gán giá trị cho thuộc tính đối sách đăng (List) tượng Bảng 7: Bảng mô tả sơ đồ lớp PlaceUser 154 an CHƯƠNG 6: KIỂM THỬ 6.1 Test phần Admin 6.1.1 Màn hình Add Place Inter-test Test ID case Test case procedure description Test chức case output depende Result nce Thêm địa danh Thực Shift + thêm click vào map Expected Pass thành cơng địa danh lấy tọa độ vĩ cho region độ địa danh cần Trả danh thêm nhập đầy đủ sách địa danh thông tin cho địa region danh vừa thêm Button Khi nhấn nút Tất “Cancel” “Cancel” không trường Text muốn thêm địa danh Field xóa Pass Bảng 1: Test hình add place 6.1.2 Màn hình danh sách Place Test ID case description Test case Expected procedure output Test xóa Chọn vào button Status địa địa danh “Delete” vào địa danh bị thay đổi danh mà thành muốn xóa “Unavailable” Inter-test case Result dependence Pass 155 an Test chức Nhập tên địa danh Trà tên địa search mà Pass danh table muốn search Load danh Sau chọn vào Màn hình sách địa List Place list danh Pass sách địa danh danh Bảng 2: Test hình danh sách Place 6.1.3 Màn hình Update Place Test Test case Expected procedure output Test chức Chỉnh sửa Cập nhật lại chỉnh sửa địa thông tin mà thông tin danh bạn cần cập nhật địa danh mà ID case description sau nhấn nút cần “Submit” chỉnh sửa trả Inter-test case Result dependence Pass danh sách địa danh Test button Chọn vào button Reset lại text “Cancel” “Cancel” Pass field trạng thái ban đầu Bảng 3: Test hình update place 6.1.4 Màn hình danh sách Post 156 an Test ID case description Test case Expected procedure output Inter-test case dependence Test chức Chọn vào button Status địa xóa post “Delete” vào danh bị thay đổi post mà thành muốn xóa “unapproved” Test chức Nhập tên post mà Trà tên search muốn Result Fail Pass post table search Load danh sách Sau chọn vào Màn hình post post Pass danh sách post Bảng 4: Test hình danh sách post 6.1.5 Màn hình danh sách User Test ID case description Test case Expected Inter-test case procedure output dependence Test chức Chọn vào button Status xóa user “Delete” vào user địa danh bị mà muốn thay đổi xóa thành Result Fail Pass “Locked” Test chức Nhập tên user mà Trà tên search muốn user search table Load danh Sau chọn vào Màn hình sách user user Pass 157 an danh sách user Bảng 5: Test hình danh sách User 6.2 Test phần Client 6.2.1 Màn hình Trang chủ Test ID case Expected Test case procedure output description Đăng nhập 1.Chọn vào button Đăng nhập vào hệ thống login with Facebook thành công 2.Nhập vào tài vào trang chủ khoản Facebook của user Inter-test case Result dependence Pass bạn( trình duyệt login vào Facebook bạn khơng cần login lại) Hiển thị Click vào image địa Link tới page địa danh danh chi tiết địa danh Hiển thị Click vào viết Link tới page danh sách chi tiết cảm nghĩ viết Hiển thị tên 1.Chọn vào button Hiện tên user user đăng login with Facebook đăng nhập nhập 2.Nhập vào tài Pass Pass Pass khoản Facebook bạn( trình duyệt login vào 158 an Facebook bạn khơng cần login lại) Hiển thị ảnh 1.Chọn vào button Hiện ảnh đại đại diện login with Facebook diện facebook facebook 2.Nhập vào tài Pass user user đăng khoản Facebook nhập bạn( trình duyệt login vào Facebook bạn khơng cần login lại) Đăng xuất Click vào icon Trả trang avatar chọn chủ “Đăng xuất” Bảng 6: Test hình Trang chủ 6.2.2 Màn hình Khám phá Test ID case Expected Test case procedure output description Đăng nhập 1.Chọn vào button Đăng nhập vào hệ thống có icon Facebook thành công giao diện trang Your vào giao diện Adventure chưa trang Your login Adventure 2.Nhập vào tài user Inter-test case Result dependence Pass khoản Facebook bạn( trình duyệt login vào 159 an Facebook bạn khơng cần login lại) Search tỉnh Chọn vào lọc Trả list tỉnh thành/ địa chọn “Tỉnh thành/ thành tên danh địa danh” địa danh Search tên Chọn vào lọc Trả list album “Album” album Pass Pass tên viết Bảng 7: Test hình Khám phá 6.2.3 Màn hình Place Info Test ID case Expected output procedure description Inter-test Test case case Result dependence Đăng nhập 1.Chọn vào Đăng nhập thành vào hệ thống button login with công vào trang Facebook Explore user Pass 2.Nhập vào tài khoản Facebook bạn( trình duyệt login vào Facebook bạn khơng cần login lại) Load danh Test server Danh sách sách địa địa đanh dược điểm check check-in nhiều in nhiều nhất Pass 160 an Load danh Test server Danh sách sách Pass viết bật viết bật Bảng 8: Test hình Place info 6.2.4 Màn hình Map Test ID case Expected output procedure description Inter-test Test case case Result dependence Đăng nhập 1.Chọn vào Đăng nhập thành vào hệ thống button login with công vào trang Facebook Explore user Pass 2.Nhập vào tài khoản Facebook bạn( trình duyệt login vào Facebook bạn không cần login lại) Đăng 1.Click vào Bài post đăng post tỉnh map thành công user địa xem lại danh vào chi tiết Click vào icon địa danh hay tỉnh but chì đăng Pass manu bar để thực đăng post 161 an Đăng album 1.Click vào Album đăng tỉnh map thành công user địa xem lại danh vào chi tiết Click vào icon địa danh hay tỉnh máy ảnh tiến đăng Pass hành đăng album Bảng 9: Test hình Map 162 an KẾT LUẬN Kết đạt Sau thời gian tìm hiểu nghiên cứu đề tài “Xây dựng website du lịch” hoàn thành Về nhóm em đạt kết sau: • Tìm hiểu cấu trúc làm việc mơ hình Spring MVC • Tìm hiểu công nghệ: Spring MVC, Spring Security, Hibernate, ReactJs, thư viện amcharts, Redux • Xây dựng website du lịch với chức sau: - Đánh dấu lại nơi mà du lịch - Đánh giá du khách phần trăm đất nước Việt Nam thông qua đồ - Lưu lại cảm xúc nơi mà du lịch - Lưu album hình ảnh chuyến du lịch - Đánh giá nơi qua thơng qua việc rating - Xem thơng tin nơi trước định chọn nơi du lịch - Tìm kiếm địa danh hay tìm kiếm lại viết album thơng qua mục khám phá • Biết cách làm việc nhóm hiệu hơn, học cách quản lý dự án tốt Ưu điểm • Giao diện đẹp thân thiện • Website đơn giản dễ sử dụng • Thao tác thuận tiện dễ dàng thao tác thêm địa danh hay đăng post • Hiệu suất nhanh • Áp dụng cơng nghệ dùng phổ biến Nhược điểm • Chưa test thử với số lượng người dùng lớn • Map giới hạn đất nước Việt Nam Hướng phát triển Hiện website hỗ trợ việc đánh dấu nơi bạn du lịch đăng cảm xúc nơi mà bạn Phần Admin quản lý tương đối tốt cho User 163 an thêm địa danh cập nhật địa danh ổn, tương lai phát triển số tính như: • Cập nhật tính đa ngôn ngữ hỗ trợ cho khách du lịch nước ngồi • Bổ sung thêm Map giới • Phát triển ứng dụng mobile • Thêm tính lấy vị trí đưa địa điểm du lịch gần bạn • Làm bảng xếp hạng rank cho user 164 an TÀI LIỆU THAM KHẢO [1] : https://gody.vn/ [2] : https://mytour.vn/ [3] : https://dulichviet.com.vn/ [4] : https://dulichviet.com.vn [5] : https://fiditour.com [6] : https://travel.com.vn/ [7] : https://www.javatpoint.com/spring-tutorial [8] : https://www.baeldung.com/spring-mvc-tutorial [9] : https://www.tutorialspoint.com/hibernate/ [10] : https://reactjs.org/tutorial/tutorial.html [11] : https://www.amcharts.com/kbase/?s=&kbc=javascript-maps [12] : https://www.tutorialspoint.com/restful/ [13] : https://www.tutorialspoint.com/postgresql/ 165 an S an K L 0 ... công nghệ để xây dựng website • Website du lịch có tính sau: - Đánh dấu lại nơi mà du lịch - Đánh giá du khách phần trăm đất nước Việt Nam - Lưu lại cảm xúc, hình ảnh nơi mà du lịch - Lưu album... phổ biến website du lịch mytour.vn 16 Hình 6: Trang chủ website du lịch dulichviet.com.vn 17 Hình 7: Danh sách tour du lịch website dulichviet.com.vn 17 Hình 8: Trang chủ website. .. XÂY DỰNG WEBSITE DU LỊCH Nội dung thút minh tính tốn: - Tìm hiểu cơng nghệ Spring MVC, Spring Security, ReactJs, Hibernate - Thiết kế website hướng dẫn du lịch với tính năng: • • • • • Đánh