Nghiệp vụ View place visited
3.1.8.1 Sơ đồ luồng dữ liệu
Hình 3 24: Sơ đồ luồng dữ liệu view place visited
D1: Nhận thông tin view từ User.
D3: Danh sách thông tin từ tbl_places gồm id, svgPath, name, title, latitude, longtitude, placeStatus và thông tin từ tbl_regions gồm id, name, title
D6: Thông tin về số nơi mà đã đi từ tbl_places gồm svgPath, name, title, latitude, longtitude, placeStatus và thông tin từ tbl_regions gồm name, title
B1: Mở kết nối cơ sở dữ liệu.
Để bắt đầu, bạn hãy truy cập trang chủ và chọn khu vực trên bản đồ Tại đây, thông tin về tên các địa danh sẽ được hiển thị, và những địa danh mà bạn đã từng ghé thăm sẽ được đánh dấu trên màn hình.
Hình 3 25: View place visited – Lược đồ tuần tự 3.1.8.5 Thiết kế cơ sở dữ liệu
Không có thuộc tính mới.
Nghiệp vụ Share Map
3.1.9.1 Sơ đồ luồng dữ liệu
Hình 3 26: Sơ đồ luồng dữ liệu Share Map
D1: Tín hiệu share map từ User.
D3: Thông tin về map và về user gồm: placeVisited, regionvisited, roleId, name(tên tỉnh), title, name(tên địa danh), latitude, longtitude
D6: Xuất hiện giao diện chia sẻ của Facebook về map.
B1: Chọn vào icon share map.
B2: Tiến hành ghi nội dung vào form đăng bài của Facebook.
• Trả về giao diện trang chủ sau khi đăng bài thành công.
• Trường hợp thất bại sẽ thông báo lỗi.
Thiết kế cơ sở dữ liệu
Không có thuộc tính mới
Nghiệp vụ Save Feeling
3.1.10.1 Sơ đồ luồng dữ liệu
Hình 3 27: Sơ đồ luồng dữ liệu Save Feelings
D1: Tín hiệu save Feeling từ User.
D3: Thông tin về tbl_fee;ings gồm topic,content.
D4: topic, content, id, userId, regionId, placeId
• Thông báo thêm thành công ➔
Dữ liệu được lưu trong cơ sở dữ liệu và trả về trang chủ.
• Thông báo thêm không thành công ➔
Vẫn ở lại trang đăng bài post.
B1: User nhập thông tin của địa post(topic, content) thông qua form.
B2: Thực hiện validate các field trong form gồm kiểm tra các trường bắt buộc phải nhập và kiểm tra tên địa danh đã tồn tại hay chưa.
- Trường hợp mà validate thành công ➔ chuyển đến B3
- Trường hợp mà validate không thành công ➔ quay lại B1
B3: Sau khi nhấn button “Submit”
- Lưu thành công và show thông báo ➔ chuyển đến B4
- Lưu thất bại thì sẽ show thông báo ➔ chuyển đến B1
B4: Trả trang về trang chủ.
Hình 3 28: Save post – lược đồ tuần tự 3.1.10.5 Thiết kế cơ sở dữ liệu
• Danh sách các thuộc tính mới: userRegionId, placeUserId
• Thiết kế cơ sở dữ liệu với tính đúng đắn:
Hình 3 29: Bản thông tin UserRegion và PlaceUser với tính đúng đắn
• Thuộc tính trừu tượng: userId, regionId, placeId
• Thiết kế dữ liệu với tính tiến hóa:
Hình 3 30: Bảng thông tin UserRegion và PlaceUser với tính tiến hóa
Hình 3 31: Sơ đồ logic UserRegion và PlaceUser
Nghiệp vụ Logout
3.1.11.1 Sơ đồ luồng dữ liệu
Hình 3 32: Sơ đồ luồng dữ liệu Logout 3.1.11.2 Mô tả dữ liệu
D1: Tín hiệu đăng xuất từ User of Admin
D6: Trả về giao diện trang Guest
B2: Trả về giao diện trang Guest.
3.1.11.5 Thiết kế cơ sở dữ liệu
Không có thuộc tính mới
Nghiệp vụ Save album
3.1.12.1 Sơ đồ luồng dữ liệu
Hình 3 33: Sơ đồ luồng dữ liệu save albums
D1: Thông tin thêm albums gồm: name(tên album), image
D2: Chọn hình ảnh từ thiết bị.
D3: Danh sách thông tin từ tbl_Album(name, image, albumStatus) D4: name, image, albumStatus, userRegionId, placeUserId
Thông báo ➔ dữ liệu được cập nhật trong tbl_albums của cơ sở dữ liệu.
Thông báo ➔ vẫn ở lại trang ➔ cơ sở dữ liệu không thay đổi.
B1: Nhập nội dung chọn hình ảnh từ thiết bị
B2: Thực hiện validate các field trong form gồm kiểm tra các trường bắt buộc phải nhập và kiểm tra tên địa danh đã tồn tại hay chưa.
- Trường hợp mà validate thành công ➔ chuyển đến B3
- Trường hợp mà validate không thành công ➔ quay lại B1
B3: Sau khi nhấn button “Save”
- Lưu thành công và show thông báo ➔ chuyển đến B5
- Lưu thất bại thì sẽ show thông báo ➔ chuyển đến B1
B4: Trả trang về danh sách các place.
Hình 3 34: Save albums – Lược đồ tuần tự 3.1.12.5 Thiết kế cơ sở dữ liệu
• Danh sách các thuộc tính mới: userRegionId, placeUserId
• Thiết kế cơ sở dữ liệu với tính đúng đắn:
Hình 3 35: Bản thông tin UserRegion và PlaceUser với tính đúng đắn
• Thuộc tính trừu tượng: userId, regionId, placeId
• Thiết kế dữ liệu với tính tiến hóa:
Hình 3 36: Bảng thông tin UserRegion và PlaceUser với tính tiến hóa
Hình 3 37: Sơ đồ logic UserRegion và PlaceUser
Nghiệp vụ Search tourist destination
3.1.13.1 Sơ đồ luồng dữ liệu
Hình 3 38: Sơ đồ luồng dữ liệu Search tourist destination
D1: Thông tin tìm kiếm là namePlace.
D3: Danh sách name từ tbl_Place.
D4: Thông tin tìm kiếm gồm name(tên của địa danh).
D6: Trả về địa danh theo thông tin mà Guest muốn tìm kiếm.
B1: Nhập name(tên của địa danh ).
B2: Lấy danh sách name của tbl_places
• Nếu name cần tìm phù hợp với danh sách name trong tbl_places
➔ hiển thị kết quả cho Guest.
• Nếu name cần tìm không có trong danh sách name trong tbl_places
➔ hiển thị kết quả “no result”.
Hình 3 39: Search – Lược đồ tuần tự
Thiết kế cơ sở dữ liệu
Không có thuộc tính mới.
Mô tả cơ sở dữ liệu
Lược đồ ERD
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
CÀI ĐẶT
5.2 Hệ quản trị cơ sở dữ liệu
Nguyễn Quang Huy Mai Tuấn Khôi
Chúng em xin chân thành cảm ơn những người đã hỗ trợ và đồng hành cùng nhóm trong quá trình hoàn thành khóa luận tốt nghiệp kỹ sư CNTT và xây dựng website du lịch Sự giúp đỡ và động viên của mọi người là nguồn động lực lớn lao giúp chúng em vượt qua những khó khăn.
Ban giám hiệu trường Đại Học Sư Phạm Kỹ Thuật TP.HCM đã đầu tư cơ sở vật chất hiện đại, bao gồm phòng học sạch đẹp, máy chiếu và wifi, nhằm đáp ứng nhu cầu học tập và giảng dạy của sinh viên và giảng viên.
Chúng em xin gửi lời cảm ơn chân thành đến Quý Thầy Cô Khoa Công Nghệ Thông Tin Trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM đã hỗ trợ và tạo điều kiện thuận lợi cho chúng em trong quá trình thực hiện đề tài khóa luận tốt nghiệp.
Giảng viên Mai Tuấn Khôi đã tận tâm hướng dẫn và chỉ bảo chúng em trong suốt quá trình thực hiện khóa luận tốt nghiệp, giúp chúng em giải đáp thắc mắc một cách kịp thời để hoàn thành bài luận một cách xuất sắc.
Xin chân thành cảm ơn các anh, chị khóa trên và bạn bè đã hỗ trợ và giúp đỡ tôi rất nhiều trong quá trình học tập và nghiên cứu khóa luận tốt nghiệp Sự ủng hộ của mọi người là nguồn động lực lớn giúp tôi hoàn thành nhiệm vụ này.
Do còn thiếu kinh nghiệm, tôi không thể tránh khỏi một số thiếu sót và hạn chế trong đề tài này Rất mong nhận được ý kiến đóng góp từ thầy cô để giúp tôi hoàn thiện hơn nữa.
Tp Hồ Chí Minh, ngày 02 tháng 01 năm 2019
Nhóm sinh viên thực hiện
Lê Tấn KhangNguyễn Quang Huy
MỤC LỤC DANH MỤC CÁC HÌNH ẢNH
1.Tính cấp thiết của đề tài
CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG
1.2 Khảo sát những website khác
1.2.1Gody 1.2.2Mytour 1.2.3 Dulichviet 1.2.4Datviettour 1.2.5Fiditour 1.2.6Travel CHƯƠNG 2: LẬP DANH SÁCH YÊU CẦU
2.2 Danh sách yêu cầu chức năng của phần mềm
Chương 2.2.1 trình bày các yêu cầu chức năng của Admin, bao gồm quyền quản lý và giám sát hệ thống Tiếp theo, Chương 2.2.2 mô tả các chức năng nghiệp vụ của Guest, nhấn mạnh vào khả năng truy cập thông tin cơ bản và tham gia vào các hoạt động của nền tảng Cuối cùng, Chương 2.2.3 đề cập đến chức năng nghiệp vụ của User, cho phép người dùng tương tác và sử dụng các dịch vụ một cách hiệu quả Chương 3 sẽ tiến hành phân tích yêu cầu và thiết kế cơ sở dữ liệu nhằm đáp ứng các chức năng đã nêu.
3.1 Mô hình hóa yêu cầu
This article covers essential operations related to managing places, including adding, editing, and deleting places It also discusses the process of deleting feelings and accounts, as well as viewing information such as images and videos related to a place Additionally, it outlines the procedure for logging in using Facebook, ensuring seamless access to these functionalities.
3.1.8 Nghiệp vụ View place visited 56
3.1.13 Nghiệp vụ Search tourist destination 69
3.1.14 Nghiệp vụ Search regional tourist destination 71
3.2 Mô tả cơ sở dữ liệu 73
3.2.2 Chi tiết các bảng dữ liệu 74
CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 81
4.1 Màn hình giao diện và xử lý bên client 81
4.1.1 Giao diện trang chủ/ trang Intro (giới thiệu) 81
4.1.2 Giao diện trang Login with facebook 86
4.1.3 Giao diện trang danh mục album của một địa điểm 87
4.1.4 Giao diện trang danh mục album của một tỉnh 91
4.1.5 Giao diện trang map đánh dấu những nơi bạn đi 95
4.1.6 Giao diện trang tìm kiếm 98
4.1.7 Giao diện trang rating một địa danh 100
4.1.8 Giao diện map – view a region 103
4.1.9 Giao diện trang thêm một bài post 106
4.1.10 Giao diện trang thêm album 107
4.2 Màn hình giao diện và xử lý bên Admin 110
4.2.1 Giao diện trang danh sách User 110
4.2.2 Giao diện trang chi tiết về User 114
4.2.3 Giao diện trang danh sách bài post của User 116
4.2.4 Giao diện trang danh sách Region 119
4.2.5 Giao diện trang chi tiết Region 122
4.2.6 Giao diện trang danh sách Place của Region 124
4.2.7 Giao diện trang chi tiết Place 127
4.2.8 Giao diện trang cập nhật Place 129
4.2.9 Giao diện trang thêm Place 132
5.1.1 Các ngôn ngữ được sử dụng
5.1.2 Các công nghệ được sử dụng
5.2 Hệ quản trị cơ sở dữ liệu
1.3.2 Mô tả sơ đồ lớp
6.1.2 Màn hình danh sách Place
6.1.4 Màn hình danh sách bài Post
6.1.5 Màn hình danh sách User
KẾT LUẬN 1.Kết quả đạt được
DANH MỤC CÁC HÌNH ẢNH
Hình 1 1: Giao diện chức năng Travel Map của website gody.vn 13
Hình 1 2: Giao diện trang của của website gody.vn 14
Hình 1 3: Hình ảnh về Blog thành viên của website gody.vn 14
Hình 1 4: Website du lịch mytour.vn 15
Hình 1 5: Địa điểm phổ biến trong website du lịch mytour.vn 16
Hình 1 6: Trang chủ website du lịch dulichviet.com.vn 17
Hình 1 7: Danh sách các tour du lịch của website dulichviet.com.vn 17
Hình 1 8: Trang chủ của website datviettour.com.vn 18
Hình 1 9: Danh sách các tour du lịch trong website datviettour.com.vn 18
Hình 1 10: Trang chủ website fiditour.com 19
Hình 1 11: Danh sách các tour du lịch của website fiditour.com 19
Hình 1 12: Trang chủ website travel.com.vn 20
Hình 2 1: Sơ đồ Use case 21
Hình 2 2: Biểu mẫu thêm địa danh mới 26
Hình 2 3: Biểu mẫu chỉnh sửa thông tin địa danh 27
Hình 2 4: Biểu mẫu xóa user 27
Hình 2 5: Biểu mẫu xóa địa danh 28
Hình 2 6: Biểu mẫu xóa bài post 28
Hình 2 7: Biểu mẫu search và xem thông tin 30
Hình 2 8: Biểu mẫu xem thông tin 32
Hình 2 9: Biểu mẫu search và xem thông tin 35
Hình 2 10: Hình biểu mẫu đánh dấu nơi đã đi 36
Hình 2 11: Biểu mẫu thêm bài post 37
Hình 2 12: Biểu mẩu view info 37
Hình 2 13: Biểu mẫu thêm album 38
Hình 2 14: Biểu mẫu đăng xuất 38
Hình 3 1: Sơ đồ luồng dữ liệu Add Place 39
Hình 3 2: Add Place – Lược đồ tuần tự 41
Hình 3 3: Bản thông tin Place với tính đúng đắn 42
Hình 3 4: Bảng thông tin Place với tính tiến hóa 42
Hình 3 5: Sơ đồ logic với bảng Place 42
Hình 3 6: Sơ đồ luồng dữ liệu 43
Hình 3 7: Update Place – Lược đồ tuần tự 44
Hình 3 8: Sơ đồ luồng dữ liệu Delete Place 45
Hình 3 9: Delete Place – Lược đồ tuần tự 46
Hình 3 10: Sơ đồ luồng dữ liệu Delete Feeling 47
Hình 3 11: Delete Feeling – Lược đồ tuần tự 48
Hình 3 12: Bảng thông tin Feeling với tính đúng đắn 49
Hình 3 13: Bảng thông tin Feeling với tính tiến hóa 49
Hình 3 14: Sơ đồ logic với bảng Feeling 50
Hình 3 15: Sơ đồ luồng dữ liệu Delete Account 50
Hình 3 16: Delete Account – Lược đồ tuần tự 51
Hình 3 17: Bảng thông tin Role với tính đúng đắn 52
Hình 3 18: Bảng thông tin Role với tính tiến hóa 52
Hình 3 19: Sơ đồ logic với bảng Role 53
Hình 3 20: Sơ đồ luồng dữ liệu View Info 53
Hình 3 21: View Info – Lược đồ tuần tự 54
Hình 3 22: Sơ đồ luồng dữ liệu Login with Facebook 55
Hình 3 23: Login – Lược đồ tuần tự 56
Hình 3 24: Sơ đồ luồng dữ liệu view place visited 57
Hình 3 25: View place visited – Lược đồ tuần tự 58
Hình 3 26: Sơ đồ luồng dữ liệu Share Map 58
Hình 3 27: Sơ đồ luồng dữ liệu Save Feelings 60
Hình 3 28: Save post – lược đồ tuần tự 61
Hình 3 29: Bản thông tin UserRegion và PlaceUser với tính đúng đắn 62
Hình 3 30: Bảng thông tin UserRegion và PlaceUser với tính tiến hóa 63
Hình 3 31: Sơ đồ logic UserRegion và PlaceUser 64
Hình 3 32: Sơ đồ luồng dữ liệu Logout 64
Hình 3 33: Sơ đồ luồng dữ liệu save albums 65
Hình 3 34: Save albums – Lược đồ tuần tự 67
Hình 3 35: Bản thông tin UserRegion và PlaceUser với tính đúng đắn 68
Hình 3 36: Bảng thông tin UserRegion và PlaceUser với tính tiến hóa 69
Hình 3 37: Sơ đồ logic UserRegion và PlaceUser 69
Hình 3 38: Sơ đồ luồng dữ liệu Search tourist destination 70
Hình 3 39: Search – Lược đồ tuần tự 71
Hình 3 40: Sơ đồ luồng dữ liệu Search region tourist destination 72
Hình 3 41: Search – Lược đồ tuần tự 73
Hình 4 1: Màn hình đối tượng trang chủ/ trang Intro 82
Hình 4 2: Màn hình xử lý trang chủ/ trang Intro 85
Hình 4 3: Màn hình đối tượng trang Login with facebook 86
Hình 4 4: Màn hình xử lý trang Login with facebook 87
Hình 4 5: Màn hình đối tượng trang danh mục album của một địa điểm 89
Hình 4 6: Màn hình xử lý trang danh mục album của một địa điểm 91
Hình 4 7: Màn hình đối tượng trang danh mục album của một tỉnh 92
Hình 4 8: Màn hình xử lý trang danh mục album của một tỉnh 94
Hình 4 9: Màn hình đối tượng trang map đánh dấu những nơi bạn đi 96
Hình 4 10: Màn hình xử lý trang đánh dấu những nơi bạn đi 97
Hình 4 11: Màn hình đối tượng trang khám phá 99
Hình 4 12: Màn hình xử lý trang khám phá 100
Hình 4 13: Màn hình đối tượng trang rating một địa danh 101
Hình 4 14: Màn hình xử lý trang rating một địa danh 102
Hình 4 15: Màn hình đối tượng trang map – view a region 103
Hình 4 16: Màn hình xử lý trang map – view a region 104
Hình 4 17: Màn hình đối tượng trang thêm một bài post 106
Hình 4 18: Màn hình xử lý trang thêm một bài post 107
Hình 4 19: Màn hình đối tượng trang thêm album 108
Hình 4 20: Màn hình xử lý trang thêm album 109
Hình 5 1: Bảy modules của Spring 137
Hình 5 3: Hình mô tả Hibernate Framework 139
Hình 5 4: Hình về Virtual DOM 141
Hình 5 5: Hình biểu đồ sử dụng thư viện amcharts
Hình 5 6: Sơ đồ RESTful API Hình 5 7: Sơ đồ lớp tầng Model Hình 5 8: Sơ đồ lớp tầng Repository Hình 5 9: Sơ đồ lớp tầng Controller
Bảng 2 1: Bảng về chức năng nghiệp vụ của Admin 22
Bảng 2 2: Bảng Chi tiết quy định/ công thức liên quan của Admin 26
Bảng 2 3: Bảng về chức năng nghiệp vụ của Guest 29
Bảng 2 4: Bảng Chi tiết quy định/ công thức liên quan của Guest 30
Bảng 2 5: Bảng về chức năng nghiệp vụ của User 32
Bảng 2 6: Bảng Chi tiết quy định/ công thức liên quan của User 35
Bảng 4 1: Bảng chi tiết đối tượng trang chủ/ trang Intro 83
Bảng 4 2: Bảng chi tiết xử lý trang chủ/ trang Intro 86
Bảng 4 3: Bảng chi tiết đối tượng trang Login with facebook 86
Bảng 4 4: Bảng chi tiết xử lý trang Login with facebook 87
Bảng 4 5: Bảng chi tiết đối tượng trang danh mục album của một địa điểm 89
Bảng 4 6: Bảng chi tiết xử lý trang danh mục album của một địa điểm 91
Bảng 4 7: Bảng chi tiết đối tượng trang danh mục album của một tỉnh 93
Bảng 4 8: Bảng chi tiết xử lý trang danh mục album của một tỉnh 95
Bảng 4 9: Bảng chi tiết đối tượng trang Your Adventure (chưa login) 97
Bảng 4 10: Bảng chi tiết xử lý trang đánh dấu những nơi bạn đi 98
Bảng 4 11: Bảng chi tiết đối tượng trang khám phá 99
Bảng 4 12: Bảng chi tiết xử lý trang khám phá 100
Bảng 4 13: Bảng chi tiết đối tượng trang rating một địa danh 101
Bảng 4 14: Bảng chi tiết xử lý trang rating một địa danh 102
Bảng 4 15: Bảng chi tiết đối tượng trang map – view a region 104
Bảng 4 16: Bảng chi tiết xử lý trang map – view a region 105
Bảng 4 17: Bảng chi tiết đối tượng trang thêm một bài post 106
Bảng 4 18: Bảng chi tiết xử lý trang thêm một bài post 107
Bảng 4 19: Bảng chi tiết đối tượng trang thêm album 108
Bảng 4 20: Bảng chi tiết xử lý trang thêm album 109
Bảng 4 21: Bảng chi tiết đối tượng trang danh sách User 111
Bảng 4 22: Bảng chi tiết xử lý trang danh sách User 114
Bảng 4 23: Bảng chi tiết đối tượng trang chi tiết User 115
Bảng 4 24: Bảng chi tiết xử lý trang chi tiết User 116
Bảng 4 25: Bảng chi tiết đối tượng trang danh sách bài Post của User 117
Bảng 4 26: Bảng chi tiết xử lý trang danh sách bài Post của User 119
Bảng 4 27: Bảng chi tiết đối tượng trang danh sách Region 121
Bảng 4 28: Bảng chi tiết xử lý trang danh sách Region 122
Bảng 4 29: Bảng chi tiết đối tượng trang chi tiết Region 123
Bảng 4 30: Bảng chi tiết xử lý trang chi tiết Region 124
Bảng 4 31: Bảng chi tiết đối tượng trang danh sách Place của Region 126
Bảng 4 32: Bảng chi tiết xử lý trang danh sách Place của Region 127
Bảng 4 33: Bảng chi tiết đối tượng trang chi tiết Place 128
Bảng 4 34: Bảng chi tiết xử lý trang chi tiết Place 129
Bảng 4 35: Bảng chi tiết đối tượng trang cập nhật Place 131
Bảng 4 36: Bảng chi tiết xử lý trang cập nhật Place 132
Bảng 4 37: Bảng chi tiết đối tượng trang thêm Place 134
Bảng 4 38: Bảng chi tiết xử lý trang thêm Place 136
Bảng 5 1: Bảng mô tả sơ đồ lớp Place 148
Bảng 5 2: Bảng mô tả sơ đồ lớp Region 149
Bảng 5 3: Bảng mô tả sơ đồ lớp User 151
Bảng 5 4: Bảng mô tả sơ đồ lớp Role 151
Bảng 5 5: Bảng mô tả sơ đồ lớp Feeling 152
Bảng 5 6: Bảng mô tả sơ đồ lớp UerRegion 153
Bảng 5 7: Bảng mô tả sơ đồ lớp PlaceUser 154
Bảng 6 1: Test màn hình add place 155
9Bảng 6 2: Test màn hình danh sách Place
Table 6.3 presents the test results for the update place screen, while Table 6.4 details the testing of the post list screen Table 6.5 outlines the user list screen tests, and Table 6.6 focuses on the homepage testing Additionally, Table 6.7 covers the exploration screen tests, Table 6.8 highlights the place information screen tests, and finally, Table 6.9 reviews the map screen testing results.
1 Tính cấp thiết của đề tài
Nhu cầu du lịch ngày càng tăng cao, đặc biệt là trong giới trẻ, những người thích khám phá và chia sẻ trải nghiệm của mình Ứng dụng này giúp người dùng tìm hiểu thông tin về địa điểm du lịch sắp tới, đánh giá mức độ thú vị của nó Bên cạnh đó, người dùng có thể lưu giữ những khoảnh khắc đẹp và chia sẻ trên mạng xã hội Không chỉ phục vụ nhu cầu cá nhân, ứng dụng còn góp phần quảng bá các địa danh nổi tiếng, thu hút khách du lịch và hỗ trợ phát triển ngành du lịch của đất nước.
• Tìm hiểu về các công nghệ sử dụng: Spring MVC, Spring Security, Hibernate, ReactJs.
• Sử dụng các công nghệ trên để xây dựng website.
• Website du lịch có các tính năng như sau:
- Đánh dấu lại những nơi mà mình đã đi du lịch.
- Đánh giá được du khách đi bao nhiêu phần trăm của đất nước Việt Nam.
- Lưu lại cảm xúc, hình ảnh về nơi mà mình đi du lịch.
- Lưu album hình ảnh về những chuyến đi theo địa danh và theo tỉnh.
- Cho phép người dùng rating qua những nơi mà họ đã đi du lịch.
- Người dùng có thể xem các bài chia sẻ cảm nghĩ về những người đã đi du lịch nơi đó rồi post lên.
- Khách đi du lịch có thể xem thông tin về địa danh mà mình chuẩn bị đi.
- Tìm kiếm địa danh hay tìm kiếm lại bài viết album thông qua mục khám phá.
- Chia sẻ bản đồ thu nhỏ về các nơi mà bạn đã đi du lịch lên mạng xã hội (Facebook).
Kết cấu đề tài gồm các chương sau:
Danh mục các hình ảnh
Chương 1: Khảo sát hiện trạng
Chương 2: Lập danh sách yêu cầu
Chương 3: Phân tích yêu cầu và thiết kế cơ sở dữ liệu
Chương 4: Thiết kế giao diện và xử lý
CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG
Trong những năm gần đây, đời sống con người tại Việt Nam đã được cải thiện đáng kể, dẫn đến sự gia tăng nhu cầu du lịch, cả từ người dân trong nước lẫn du khách quốc tế Chúng tôi đã tạo ra một website du lịch nhằm giúp người dùng lưu giữ những kỷ niệm đẹp, hình ảnh và cảm xúc tuyệt vời trong mỗi chuyến đi Bên cạnh đó, website còn hỗ trợ người dùng theo dõi tỷ lệ phần trăm các địa điểm đã khám phá và cung cấp những kinh nghiệm quý báu từ những du khách đi trước về các điểm đến.
1.2 Khảo sát những website khác
Gody gody.vn là một trang web du lịch nổi bật, cung cấp dịch vụ cho thuê Homestay và chia sẻ blog kinh nghiệm về các điểm đến trong nước và quốc tế Trang web còn có tính năng TravelMap, cho phép người dùng đánh dấu những địa điểm đã thăm và lưu giữ hình ảnh, đồng thời chia sẻ lên Facebook.
Hình 1 1: Giao diện chức năng Travel Map của website gody.vn
Hình 1 2: Giao diện trang của của website gody.vn
Hình 1 3: Hình ảnh về Blog thành viên của website gody.vn
- Website cho phép người dùng biết được các kinh nghiệm khi đi du lịch thông qua các blog.
- Giao diện đẹp, responsive tốt.
- Website hỗ trợ người dùng đặt homestay.
- Chức năng Travel Map chỉ đánh dấu được tỉnh chưa đánh dấu trực tiếp tại địa danh mà chúng ta đi.
- Chức năng Travel Map chưa cho lưu video về địa danh.
Mytour.vn là một trang web hướng dẫn du lịch, cung cấp dịch vụ đặt phòng và tìm kiếm khách sạn cho người dùng Trang web này cũng cho phép người dùng xem các bài đánh giá về những địa điểm du lịch nổi tiếng, tham gia tour và tìm hiểu cẩm nang du lịch về các địa điểm hấp dẫn trong và ngoài nước.
Hình 1 4: Website du lịch mytour.vn
Hình 1 5: Địa điểm phổ biến trong website du lịch mytour.vn
- Giao diện trực quan sinh động, người dùng dễ thao tác.
- Có hình ảnh minh họa cho khách sạn và thông tin chi tiết về giá vé cũng như các dịch vụ ở khách sạn.
- Có hỗ trợ người dùng đặt tour du lịch trong nước lẫn ngoài nước.
- Có sự liên kết đến các trang khác để cung cấp thông tin cho khách hàng.
- Có cẩm nang du lịch giúp cho người dùng biết được các kinh nghiệm khi đi du lịch.
- Không có chức năng đánh dấu lại nơi mà đã đi du lịch rồi.
Dulichviet (dulichviet.com.vn) là website chuyên cung cấp dịch vụ tour du lịch, giúp người dùng dễ dàng tìm kiếm và đặt các tour du lịch ưa thích Ngoài ra, trang web còn hỗ trợ người dùng trong việc tìm kiếm khách sạn, làm visa và đặt vé máy bay, mang đến trải nghiệm du lịch trọn vẹn và thuận tiện.
Hình 1 6: Trang chủ website du lịch dulichviet.com.vn
Hình 1 7: Danh sách các tour du lịch của website dulichviet.com.vn
- Cung cấp khá nhiều chức năng cho người dùng thích đi tour.
- Hỗ trợ cho người dùng đặt vé xe, vé máy bay, tìm khách sạn.
- Hỗ trợ làm visa cho khách đi du lịch.
- Chưa đánh dấu được những nơi mà chúng ta đã đi du lịch rồi.
1.2.4 Datviettour datviettour.com.vn [4]: Website đặt tour du lịch
Hình 1 8: Trang chủ của website datviettour.com.vn
Hình 1 9: Danh sách các tour du lịch trong website datviettour.com.vn
- Cung cấp các tour đi du lịch trong nước lần ngoài nước.
- Hỗ trợ làm visa cho khách đi du lịch nước ngoài.
- Giao diện nhìn bắt mắt.
- Hỗ trợ cho thuê xe và chơi team building.
- Chưa đánh dấu được những nơi mà chúng ta đã đi du lịch rồi.
1.2.5 Fiditour fiditour.com [5]: Website đặt tour đi du lịch chất lượng cao.
Hình 1 10: Trang chủ website fiditour.com
Hình 1 11: Danh sách các tour du lịch của website fiditour.com
- Cung cấp đầy đủ các tour đi du lịch trong nước lần ngoài nước.
- Giao diện được responsive đẹp.
- Có chat bot hỗ trợ người dùng.
- Có những chỗ nhìn khá là nhiều chữ và rối mắt.
- Chưa có tính năng đánh dấu những nơi đã đi.
1.2.6 Travel travel.com.vn [6] : Website đặt tour đi du lịch
Hình 1 12: Trang chủ website travel.com.vn
- Hỗ trợ người dùng tìm các tour trong nước và ngoài nước.
- Bố cục trang web đơn giản, gọn gàng và đầy đủ.
- Có hỗ trợ người dùng đặt phòng.
- Chưa có tính năng đánh dấu những nơi đã đi.
CHƯƠNG 2: LẬP DANH SÁCH YÊU CẦU
Hình 2 1: Sơ đồ Use case
2.2 Danh sách yêu cầu chức năng của phần mềm
2.2.1 Yêu cầu chức năng của Admin
2.2.1.1 Chức năng nghiệp vụ của Admin
Bảng 2 1: Bảng về chức năng nghiệp vụ của Admin 2.2.1.2 Chi tiết quy định/ công thức liên quan
Bảng 2 2: Bảng Chi tiết quy định/ công thức liên quan của Admin 2.2.1.3 Biểu mẫu liên quan
Hình 2 2: Biểu mẫu thêm địa danh mới
Hình 2 3: Biểu mẫu chỉnh sửa thông tin địa danh
Hình 2 4: Biểu mẫu xóa user
Hình 2 5: Biểu mẫu xóa địa danh
Hình 2 6: Biểu mẫu xóa bài post
2.2.2 Chức năng nghiệp vụ của Guest
2.2.2.1 Chức năng nghiệp vụ của Guest
(Image, Video, Info about Place)
Bảng 2 3: Bảng về chức năng nghiệp vụ của Guest 2.2.2.2 Chi tiết quy định/ công thức liên quan
Bảng 2 4: Bảng Chi tiết quy định/ công thức liên quan của Guest
Hình 2 7: Biểu mẫu search và xem thông tin
Hình 2 8: Biểu mẫu xem thông tin
2.2.3 Chức năng nghiệp vụ của User
2.2.3.1 Chức năng nghiệp vụ của User
(Image, Video, Info about Place)
Bảng 2 5: Bảng về chức năng nghiệp vụ của User
2.2.3.2 Chi tiết quy định/ công thức liên quan
6 QD_Save_alb um hình ảnh ở menu bên trái map rồi tiến hành select image from device.
- Sau khi select image xong thì nhấn vào button “Đăng”
Bảng 2 6: Bảng Chi tiết quy định/ công thức liên quan của
User 2.2.3.3 Biểu mẫu liên quan
Hình 2 9: Biểu mẫu search và xem thông tin
Hình 2 10: Hình biểu mẫu đánh dấu nơi đã đi
Hình 2 11: Biểu mẫu thêm bài post
Hình 2 12: Biểu mẩu view info
Hình 2 13: Biểu mẫu thêm album
Hình 2 14: Biểu mẫu đăng xuất
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 yêu cầu
3.1.1.1 Sơ đồ luồng dữ liệu
Hình 3 1: Sơ đồ luồng dữ liệu Add Place 3.1.1.2 Mô tả dữ liệu
D1: Thông tin địa danh gồm (name, title, svgPath, regionId, latitude, longitude).
D3: Danh sách place từ lbl_Place (name, title, svgPath, regionId, latitude, longitude)
D4: name, title, svgPath, regionUid, latitude, longitude D5: Không có
• Thông báo thêm thành công ➔
Dữ liệu được lưu trong cơ sở dữ liệu và trả về danh sách Place của Region.
• Thông báo thêm không thành công ➔
Dữ liệu không bị thay đổi và trả về trang add Place.
B1: Admin nhập thông tin của địa danh(name, title, svgPath, latitude, longitude) thông qua form.
B2: Thực hiện validate các field trong form gồm kiểm tra các trường bắt buộc phải nhập và kiểm tra tên địa danh đã tồn tại hay chưa.
- Trường hợp mà validate thành công ➔ chuyển đến B3
- Trường hợp mà validate không thành công ➔ quay lại B1
B3: Sau khi nhấn button “Submit”
- Lưu thành công và show thông báo ➔ chuyển đến B4
- Lưu thất bại thì sẽ show thông báo ➔ chuyển đến B1
B4: Trả trang về danh sách các place.
Hình 3 2: Add Place – Lược đồ tuần tự
3.1.1.5 Thiết kế cơ sở dữ liệu
• Danh sách các thuộc tính mới: name, title, svgPath, latitude, longitude
• Thiết kế cơ sở dữ liệu với tính đúng đắn:
Hình 3 3: Bản thông tin Place với tính đúng đắn
• Thuộc tính trừu tượng: id, placeStatus,regionId
• Thiết kế dữ liệu với tính tiến hóa:
Hình 3 4: Bảng thông tin Place với tính tiến hóa
Hình 3 5: Sơ đồ logic với bảng Place
3.1.2.1 Sơ đồ luồng dữ liệu
Hình 3 6: Sơ đồ luồng dữ liệu
D1: Thông tin về place(name, title, svgPath, regionId, latitude, longitude, placeStatus)
D3: Danh sách place từ lbl_Place (name, title, svgPath, regionId, latitude, longitude, placeStatus)
D4: name, title, svgPath, regionId, latitude, longitude, placeStatus
• Thông báo cập nhật thành công ➔
Dữ liệu được lưu trong cơ sở dữ liệu và trả về danh sách Place của Region.
• Thông báo thêm không thành công ➔
Dữ liệu không bị thay đổi và trả về trang danh sách Place của Region.
B1: Admin cập nhập thông tin của địa danh( name, title, svgPath, latitude, longitude, placeStatus) thông qua form.
B2: Thực hiện validate các field trong form gồm kiểm tra các trường bắt buộc phải nhập và kiểm tra tên địa danh đã tồn tại hay chưa.
- Trường hợp mà validate thành công ➔ chuyển đến B3
- Trường hợp mà validate không thành công ➔ quay lại B1
B3: Sau khi nhấn button “Submit”
- Lưu thành công và show thông báo ➔ chuyển đến B4
- Lưu thất bại thì sẽ show thông báo ➔ chuyển đến B1
B4: Trả trang về danh sách các place.
Hình 3 7: Update Place – Lược đồ tuần tự
3.1.2.5 Thiết kế cơ sở dữ liệu
Không có thuộc tính phát sinh
3.1.3.1 Sơ đồ luồng dữ liệu
Hình 3 8: Sơ đồ luồng dữ liệu Delete Place 3.1.3.2 Mô tả dữ liệu
D1: Thông tin xóa place gồm placeId
• Xóa thành công ➔ show thông báo ➔ dữ liệu được cập nhật trong bảng tbl_places.
• Không xóa trực tiếp trong database mà chỉ thay đổi trạng thái của User từ “AVAILABLE” sang “UNAVAILABLE”.
• Xóa thất bại ➔ show thông báo ➔ cơ sở dữ liệu không thay đổi.
B1: Admin chọn mã place cần xóa.
• Nếu xóa thất bại thì thông báo ➔ quay lại B1.
• Nếu xóa thành công ➔ chuyển đến B3
B3: Thông báo xóa thành công
B4: Lưu thay đổi vào bảng tbl_places trong cơ sở dữ liệu.
B5: Cập nhật lại danh sách place.
Hình 3 9: Delete Place – Lược đồ tuần tự 3.1.3.5 Thiết kế cơ sở dữ liệu
Không có thuộc tính mới.
3.1.4.1 Sơ đồ luồng dữ liệu
Hình 3 10: Sơ đồ luồng dữ liệu Delete Feeling
D1: Thông tin xóa Feeling gồm postId
• Xóa thành công ➔ show thông báo ➔ dữ liệu được cập nhật trong bảng tbl_feelings.
• Không xóa trực tiếp trong database mà chỉ thay đổi trạng thái của User từ “ACCEPTED” sang “UNACCEPTED”.
• Xóa thất bại ➔ show thông báo ➔ cơ sở dữ liệu không thay đổi.
B1: Admin chọn mã feeling cần xóa.
B2: Thực hiện xóa bài feelling
• Nếu xóa thất bại thì thông báo ➔ quay lại B1.
• Nếu xóa thành công ➔ chuyển đến B3
B3: Thông báo xóa thành công
B4: Lưu thay đổi vào bảng tbl_feelings trong cơ sở dữ liệu.
B5: Cập nhật lại danh sách feeling.
Hình 3 11: Delete Feeling – Lược đồ tuần tự 3.1.4.5 Thiết kế cơ sở dữ liệu
• Danh sách các thuộc tính mới: feelingId
• Thiết kế cơ sở dữ liệu đúng đắn
Hình 3 12: Bảng thông tin Feeling với tính đúng đắn
• Thuộc tính trừu tượng: id, topic, content, feelingStatus
• Thiết kế cơ sở dữ liệu tiến hóa
Hình 3 13: Bảng thông tin Feeling với tính tiến hóa
Hình 3 14: Sơ đồ logic với bảng Feeling 3.1.5 Nghiệp vụ Delete Acount
3.1.5.1 Sơ đồ luồng dữ liệu
Hình 3 15: Sơ đồ luồng dữ liệu Delete Account 3.1.5.2 Mô tả dữ liệu
D1: Thông tin xóa User gồm userId
• Xóa thành công ➔ show thông báo ➔ dữ liệu được cập nhật trong bảng tbl_users.
• Không xóa trực tiếp trong database mà chỉ thay đổi trạng thái của User từ “ACTIVE” sang “LOCKED”.
• Xóa thất bại ➔ show thông báo ➔ cơ sở dữ liệu không thay đổi.
B1: Admin chọn mã User cần xóa.
• Nếu xóa thất bại thì thông báo ➔ quay lại B1.
• Nếu xóa thành công ➔ chuyển đến B3
B3: Thông báo xóa thành công
B4: Lưu thay đổi vào bảng tbl_users trong cơ sở dữ liệu.
B5: Cập nhật lại danh sách user.
Hình 3 16: Delete Account – Lược đồ tuần tự
3.1.5.5 Thiết kế cơ sở dữ liệu
• Danh sách các thuộc tính mới:userId, roleId
• Thiết kế cơ sở dữ liệu đúng đắn
Hình 3 17: Bảng thông tin Role với tính đúng đắn
• Thuộc tính trừu tượng: id, roleName, roleStatus
• Thiết kế cơ sở dữ liệu tiến hóa
Hình 3 18: Bảng thông tin Role với tính tiến hóa
Hình 3 19: Sơ đồ logic với bảng Role 3.1.6 Nghiệp vụ View Info (Image, Video, Info about Place)
3.1.6.1 Sơ đồ luồng dữ liệu
Hình 3 20: Sơ đồ luồng dữ liệu View Info 3.1.6.2 Mô tả dữ liệu
D1: Thông tin bài post, video image
D3: Danh sách post từ tbl_feelings, video từ tbl_videos, image từ tbl_albums, name từ tbl_places, name_tbl_regions.
D4: topic, content, video, image, name(tên của place), name(tên của region)
• Không hiển thị thông tin
B1: Chọn vào region hoặc chọn vào place bên trong region của map: hiển thị các thông tin tên địa danh, tên tỉnh, video, image, post
B2: Hiển thị kết thông tin trên màn hình.
Hình 3 21: View Info – Lược đồ tuần tự 3.1.6.5 Thiết kế cơ sở dữ liệu
Không có thuộc tính mới.
3.1.7 Nghiệp vụ Login with Facebook
3.1.7.1 Sơ đồ luồng dữ liệu
Hình 3 22: Sơ đồ luồng dữ liệu Login with
Facebook 3.1.7.2 Mô tả dữ liệu
D1: email, password(email và password của Facebook)
D3: Danh sách name từ tbl_users.
D4: Thông tin id, email, password, userID, avatar, userName, roleId D5: Không có
• Đăng nhập thành công ➔ vào được trang chủ của User.
• Đăng nhập thất bạ ➔ vẫn ở lại trang đăng nhập.
B1: Nhập tài khoản email và password
B2: Lấy danh sách user từ tbl_users và so sánh với tài khoản nhập. B3:
• Nếu tài khoản không tồn tại thì hệ thống sẽ tự động tạo tài khoản
➔ lưu user mới trong cơ sở dữ liệu.
• Nếu tài khoản đó tồn tại ➔ trả về trang chủ User.
Hình 3 23: Login – Lược đồ tuần tự 3.1.7.5 Thiết kế cơ sở dữ liệu
Không có thuộc tính mới
3.1.8 Nghiệp vụ View place visited
3.1.8.1 Sơ đồ luồng dữ liệu
Hình 3 24: Sơ đồ luồng dữ liệu view place visited
D1: Nhận thông tin view từ User.
D3: Danh sách thông tin từ tbl_places gồm id, svgPath, name, title, latitude, longtitude, placeStatus và thông tin từ tbl_regions gồm id, name, title
D6: Thông tin về số nơi mà đã đi từ tbl_places gồm svgPath, name, title, latitude, longtitude, placeStatus và thông tin từ tbl_regions gồm name, title
B1: Mở kết nối cơ sở dữ liệu.
Truy cập trang chủ và chọn khu vực trên bản đồ để hiển thị thông tin về tên địa danh Những địa danh mà bạn đã từng ghé thăm sẽ được đánh dấu rõ ràng trên màn hình.
Hình 3 25: View place visited – Lược đồ tuần tự 3.1.8.5 Thiết kế cơ sở dữ liệu
Không có thuộc tính mới.
3.1.9.1 Sơ đồ luồng dữ liệu
Hình 3 26: Sơ đồ luồng dữ liệu Share Map
D1: Tín hiệu share map từ User.
D3: Thông tin về map và về user gồm: placeVisited, regionvisited, roleId, name(tên tỉnh), title, name(tên địa danh), latitude, longtitude
D6: Xuất hiện giao diện chia sẻ của Facebook về map.
B1: Chọn vào icon share map.
B2: Tiến hành ghi nội dung vào form đăng bài của Facebook.
• Trả về giao diện trang chủ sau khi đăng bài thành công.
• Trường hợp thất bại sẽ thông báo lỗi.
Thiết kế cơ sở dữ liệu
Không có thuộc tính mới
3.1.10.1 Sơ đồ luồng dữ liệu
Hình 3 27: Sơ đồ luồng dữ liệu Save Feelings
D1: Tín hiệu save Feeling từ User.
D3: Thông tin về tbl_fee;ings gồm topic,content.
D4: topic, content, id, userId, regionId, placeId
• Thông báo thêm thành công ➔
Dữ liệu được lưu trong cơ sở dữ liệu và trả về trang chủ.
• Thông báo thêm không thành công ➔
Vẫn ở lại trang đăng bài post.
B1: User nhập thông tin của địa post(topic, content) thông qua form.
B2: Thực hiện validate các field trong form gồm kiểm tra các trường bắt buộc phải nhập và kiểm tra tên địa danh đã tồn tại hay chưa.
- Trường hợp mà validate thành công ➔ chuyển đến B3
- Trường hợp mà validate không thành công ➔ quay lại B1
B3: Sau khi nhấn button “Submit”
- Lưu thành công và show thông báo ➔ chuyển đến B4
- Lưu thất bại thì sẽ show thông báo ➔ chuyển đến B1
B4: Trả trang về trang chủ.
Hình 3 28: Save post – lược đồ tuần tự 3.1.10.5 Thiết kế cơ sở dữ liệu
• Danh sách các thuộc tính mới: userRegionId, placeUserId
• Thiết kế cơ sở dữ liệu với tính đúng đắn:
Hình 3 29: Bản thông tin UserRegion và PlaceUser với tính đúng đắn
• Thuộc tính trừu tượng: userId, regionId, placeId
• Thiết kế dữ liệu với tính tiến hóa:
Hình 3 30: Bảng thông tin UserRegion và PlaceUser với tính tiến hóa
Hình 3 31: Sơ đồ logic UserRegion và PlaceUser
3.1.11.1 Sơ đồ luồng dữ liệu
Hình 3 32: Sơ đồ luồng dữ liệu Logout 3.1.11.2 Mô tả dữ liệu
D1: Tín hiệu đăng xuất từ User of Admin
D6: Trả về giao diện trang Guest
B2: Trả về giao diện trang Guest.
3.1.11.5 Thiết kế cơ sở dữ liệu
Không có thuộc tính mới
3.1.12.1 Sơ đồ luồng dữ liệu
Hình 3 33: Sơ đồ luồng dữ liệu save albums
D1: Thông tin thêm albums gồm: name(tên album), image
D2: Chọn hình ảnh từ thiết bị.
D3: Danh sách thông tin từ tbl_Album(name, image, albumStatus) D4: name, image, albumStatus, userRegionId, placeUserId
Thông báo ➔ dữ liệu được cập nhật trong tbl_albums của cơ sở dữ liệu.
Thông báo ➔ vẫn ở lại trang ➔ cơ sở dữ liệu không thay đổi.
B1: Nhập nội dung chọn hình ảnh từ thiết bị
B2: Thực hiện validate các field trong form gồm kiểm tra các trường bắt buộc phải nhập và kiểm tra tên địa danh đã tồn tại hay chưa.
- Trường hợp mà validate thành công ➔ chuyển đến B3
- Trường hợp mà validate không thành công ➔ quay lại B1
B3: Sau khi nhấn button “Save”
- Lưu thành công và show thông báo ➔ chuyển đến B5
- Lưu thất bại thì sẽ show thông báo ➔ chuyển đến B1
B4: Trả trang về danh sách các place.
Hình 3 34: Save albums – Lược đồ tuần tự 3.1.12.5 Thiết kế cơ sở dữ liệu
• Danh sách các thuộc tính mới: userRegionId, placeUserId
• Thiết kế cơ sở dữ liệu với tính đúng đắn:
Hình 3 35: Bản thông tin UserRegion và PlaceUser với tính đúng đắn
• Thuộc tính trừu tượng: userId, regionId, placeId
• Thiết kế dữ liệu với tính tiến hóa:
Hình 3 36: Bảng thông tin UserRegion và PlaceUser với tính tiến hóa
Hình 3 37: Sơ đồ logic UserRegion và PlaceUser
3.1.13 Nghiệp vụ Search tourist destination
3.1.13.1 Sơ đồ luồng dữ liệu
Hình 3 38: Sơ đồ luồng dữ liệu Search tourist destination
D1: Thông tin tìm kiếm là namePlace.
D3: Danh sách name từ tbl_Place.
D4: Thông tin tìm kiếm gồm name(tên của địa danh).
D6: Trả về địa danh theo thông tin mà Guest muốn tìm kiếm.
B1: Nhập name(tên của địa danh ).
B2: Lấy danh sách name của tbl_places
• Nếu name cần tìm phù hợp với danh sách name trong tbl_places
➔ hiển thị kết quả cho Guest.
• Nếu name cần tìm không có trong danh sách name trong tbl_places
➔ hiển thị kết quả “no result”.
Hình 3 39: Search – Lược đồ tuần tự
Thiết kế cơ sở dữ liệu
Không có thuộc tính mới.
3.1.14 Nghiệp vụ Search regional tourist destination
3.1.14.1 Sơ đồ luồng dữ liệu
Hình 3 40: Sơ đồ luồng dữ liệu Search region tourist destination
D1: Thông tin tìm kiếm là name(tên của region)
D3: Danh sách name từ tbl_regions.
D4: Thông tin tìm kiếm gồm name(tên của region).
D6: Trả về region theo thông tin mà Guest muốn tìm kiếm.
B1: Nhập name(tên của region).
B2: Lấy danh sách name của tbl_regions
• Nếu name cần tìm phù hợp với danh sách name trong tbl_regions
➔ hiển thị kết quả cho Guest.
• Nếu name cần tìm không có trong danh sách name trong tbl_regions ➔ hiển thị kết quả “no result”.
Hình 3 41: Search – Lược đồ tuần tự
Thiết kế cơ sở dữ liệu
Không có thuộc tính mới.
3.2 Mô tả cơ sở dữ liệu
3.2.2 Chi tiết các bảng dữ liệu
CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
4.1 Màn hình giao diện và xử lý bên client
4.1.1 Giao diện trang chủ/ trang Intro (giới thiệu)
Hình 4 1: Màn hình đối tượng trang chủ/ trang Intro
STT Tên đối tượng Kiểu đối tượng Mô tả Ghi chú
Bảng 4 1: Bảng chi tiết đối tượng trang chủ/ trang Intro
Hình 4 2: Màn hình xử lý trang chủ/ trang Intro 4.1.1.3 Danh sách xử lý
1 Chuyển đến trang chủ (Intro page)
6 Menu icon mạng xã họi tương ứng
Bảng 4 2: Bảng chi tiết xử lý trang chủ/ trang Intro
4.1.2 Giao diện trang Login with facebook
Hình 4 3: Màn hình đối tượng trang Login with facebook
2 Button Google hành đăng nhập với Google
Bảng 4 3: Bảng chi tiết đối tượng trang Login with facebook
Hình 4 4: Màn hình xử lý trang Login with facebook
Bảng 4 4: Bảng chi tiết xử lý trang Login with facebook
4.1.3 Giao diện trang danh mục album của một địa điểm
Hình 4 5: Màn hình đối tượng trang danh mục album của một địa điểm
Bảng 4 5: Bảng chi tiết đối tượng trang danh mục album của một địa điểm
Hình 4 6: Màn hình xử lý trang danh mục album của một địa điểm
Bảng 4 6: Bảng chi tiết xử lý trang danh mục album của một địa điểm
4.1.4 Giao diện trang danh mục album của một tỉnh
Hình 4 7: Màn hình đối tượng trang danh mục album của một tỉnh
Bảng 4 7: Bảng chi tiết đối tượng trang danh mục album của một tỉnh
Hình 4 8: Màn hình xử lý trang danh mục album của một tỉnh
Bảng 4 8: Bảng chi tiết xử lý trang danh mục album của một tỉnh
4.1.5 Giao diện trang map đánh dấu những nơi bạn đi
Hình 4 9: Màn hình đối tượng trang map đánh dấu những nơi bạn đi
Bảng 4 9: Bảng chi tiết đối tượng trang Your Adventure (chưa login)
Hình 4 10: Màn hình xử lý trang đánh dấu những nơi bạn đi
STT Tên xử lý Điều kiện gọi thực hiện
Bảng 4 10: Bảng chi tiết xử lý trang đánh dấu những nơi bạn đi
4.1.6 Giao diện trang tìm kiếm
Hình 4 11: Màn hình đối tượng trang khám phá
Bảng 4 11: Bảng chi tiết đối tượng trang khám phá
Hình 4 12: Màn hình xử lý trang khám phá
4.1.7 Giao diện trang rating một địa danh
Hình 4 13: Màn hình đối tượng trang rating một địa danh
Bảng 4 13: Bảng chi tiết đối tượng trang rating một địa danh
Hình 4 14: Màn hình xử lý trang rating một địa danh
Bảng 4 14: Bảng chi tiết xử lý trang rating một địa danh
4.1.8 Giao diện map – view a region
Hình 4 15: Màn hình đối tượng trang map – view a region
Bảng 4 15: Bảng chi tiết đối tượng trang map – view a region
Hình 4 16: Màn hình xử lý trang map – view a region
Bảng 4 16: Bảng chi tiết xử lý trang map – view a region
4.1.9 Giao diện trang thêm một bài post
Hình 4 17: Màn hình đối tượng trang thêm một bài post
Bảng 4 17: Bảng chi tiết đối tượng trang thêm một bài post
Hình 4 18: Màn hình xử lý trang thêm một bài post
Bảng 4 18: Bảng chi tiết xử lý trang thêm một bài post
4.1.10 Giao diện trang thêm album
Hình 4 19: Màn hình đối tượng trang thêm album
2 Button “Chọn ảnh từ thiết bị”
Bảng 4 19: Bảng chi tiết đối tượng trang thêm album
“Chọn ảnh từ thiết bị”
Bảng 4 20: Bảng chi tiết xử lý trang thêm album
4.2 Màn hình giao diện và xử lý bên Admin
4.2.1 Giao diện trang danh sách User
Hình 0.1: Màn hình đối tượng trang danh sách User
Bảng 4 21: Bảng chi tiết đối tượng trang danh sách User
Hình 0.2: Màn hình xử lý trang danh sách User
1 Chuyển đến trang chủ Admin (Dashboard page)
3 Chuyển đến trang quản lý Users
4 Chuyển đến trang quản lý Regions
5 Chuyển đến trang thêm Place
6 Tìm kiếm dữ liệu trong bảng
8 Chuyển đến trang thông tin người dùng
10 Chọn kích thước mỗi trang
Bảng 4 22: Bảng chi tiết xử lý trang danh sách User
4.2.2 Giao diện trang chi tiết về User
Hình 0.3: Màn hình đối tượng trang chi tiết User
Bảng 4 23: Bảng chi tiết đối tượng trang chi tiết User
Hình 0.4: Màn hình xử lý trang chi tiết User
STT Tên xử lý Điều kiện gọi thực hiện
Bảng 4 24: Bảng chi tiết xử lý trang chi tiết User
4.2.3 Giao diện trang danh sách bài post của User
Hình 0.5: Màn hình đối tượng trang danh sách bài Post của User
STT Tên đối tượng Kiểu đối tượng Mô tả Ghi chú
Bảng 4 25: Bảng chi tiết đối tượng trang danh sách bài Post của User
Hình 0.6: Màn hình xử lý trang danh sách bài Post của User
1 Tìm kiếm dữ liệu trong bảng
3 Xóa bài post của user
4 Chọn kích thước mỗi trang
Bảng 4 26: Bảng chi tiết xử lý trang danh sách bài Post của User
4.2.4 Giao diện trang danh sách Region
Hình 0.7: Màn hình đối tượng trang danh sách Region
STT Tên đối tượng Kiểu đối tượng Mô tả Ghi chú
13 Intro text Text Text hiển thị tác giả
Bảng 4 27: Bảng chi tiết đối tượng trang danh sách Region
Hình 0.8: Màn hình xử lý trang danh sách
1 Tìm kiếm dữ liệu trong bảng
G ia o di ện tr a n g ch i ti ết
Hình 0.9: Màn hình đối tượng trang chi tiết Region
Bảng 4 29: Bảng chi tiết đối tượng trang chi tiết Region
Hình 0.10: Màn hình xử lý trang chi tiết Region
1 Điều hướng đến Place list page
Bảng 4 30: Bảng chi tiết xử lý trang chi tiết Region
4.2.6 Giao diện trang danh sách Place của Region
Hình 0.11: Màn hình đối tượng trang danh sách Place của Region
Bảng 4 31: Bảng chi tiết đối tượng trang danh sách Place của Region
Hình 0.12: Màn hình xử lý trang danh sách Place của Region
STT Tên xử lý Điều kiện gọi thực hiện
1 Tìm kiếm dữ liệu trong bảng
2 Sắp xếp theo Place name
3 Chuyển đến trang thông tin place
5 Chọn kích thước mỗi trang
Bảng 4 32: Bảng chi tiết xử lý trang danh sách Place của Region
4.2.7 Giao diện trang chi tiết Place
Hình 0.13: Màn hình đối tượng trang chi tiết Place
Bảng 4 33: Bảng chi tiết đối tượng trang chi tiết Place
Hình 0.14: Màn hình xử lý trang chi tiết Place
1 Quay lại trang Place list page
Bảng 4 34: Bảng chi tiết xử lý trang chi tiết Place
4.2.8 Giao diện trang cập nhật Place
Hình 0.15: Màn hình đối tượng trang cập nhật Place
Bảng 4 35: Bảng chi tiết đối tượng trang cập nhật Place
Hình 0.16: Màn hình xử lý trang cập nhật Place
Bảng 4 36: Bảng chi tiết xử lý trang cập nhật Place
4.2.9 Giao diện trang thêm Place
Hình 0.17: Màn hình đối tượng trang thêm Place
Bảng 4 37: Bảng chi tiết đối tượng trang thêm Place
Hình 0.18: Màn hình xử lý trang thêm Place
2 Quay về map ban đầu
Bảng 4 38: Bảng chi tiết xử lý trang thêm Place
5.1.1 Các ngôn ngữ được sử dụng
- Website được viết sử dụng các ngôn ngữ là: Java, Javascript, CSS
5.1.2 Các công nghệ được sử dụng
5.1.2.1 Giới thiệu về Spring MVC