TRƢỜNG ĐẠI HỌC HÙNG VƢƠNG
KHOA KỸ THUẬT – CÔNG NGHỆ

-----------------------

NGUYỄN BÁ NGỌC

HỆ THỐNG QUẢN LÝ THÔNG TIN VÀ
QUẢNG BÁ DU LỊCH THÀNH PHỐ VIỆT TRÌ
TRÊN NỀN TẢNG JAVA SPRING VÀ REACT JS

KHĨA LUẬN TỐT NGHIỆP ĐẠI HỌC
Ngành: Đại học Cơng nghệ thông tin

Phú Thọ, 2022


TRƢỜNG ĐẠI HỌC HÙNG VƢƠNG
KHOA KỸ THUẬT – CÔNG NGHỆ

-----------------------

NGUYỄN BÁ NGỌC

HỆ THỐNG QUẢN LÝ THÔNG TIN VÀ
QUẢNG BÁ DU LỊCH THÀNH PHỐ VIỆT TRÌ

TRÊN NỀN TẢNG JAVA SPRING VÀ REACT JS

KHĨA LUẬN TỐT NGHIỆP ĐẠI HỌC
Ngành: Đại học Cơng nghệ thông tin

NGƢỜI HƢỚNG DẪN: TS. NGUYỄN HÙNG CƢỜNG

Phú Thọ, 2022


i
LỜI CẢM ƠN
Sau khoảng thời gian nghiên cứu và học tập một cách nghiêm túc, em
đã hoàn thành xong đề tài của mình. Lời đầu tiên em xin gửi lời cảm ơn tới
các thầy cô trong khoa Kỹ thuật - Cơng nghệ Trƣờng Đại học Hùng Vƣơng đã
dìu dắt và truyền đạt kiến thức để em hoàn thành tốt đề tài này. Đặc biệt em
xin chân thành cảm ơn sự dìu dắt tận tình của thầy giáo Nguyễn Hùng Cƣờng,
thầy là giáo viên hƣớng dẫn, ngƣời giám sát tiến độ làm việc của em. Chính vì
vậy mà thầy ln đƣa ra những ý tƣởng, những góp ý giúp em nhận ra vấn đề
còn tồn tại và kịp thời sửa chữa.
Dù đã rất cố gắng, xong em cũng không thể tránh khỏi những sai sót do
vốn kiến thức cịn hạn hẹp. Em rất mong nhận đƣợc sự góp ý, giúp đỡ từ các
quý thầy cô và các bạn.
Em xin chân thành cảm ơn!


ii
MỤC LỤC
LỜI CẢM ƠN ....................................................................................................... i
MỤC LỤC ............................................................................................................ ii
DANH MỤC HÌNH VẼ ..................................................................................... iv
DANH MỤC BẢNG ......................................................................................... viii
PHẦN A. MỞ ĐẦU ............................................................................................. 1
1. Tính cấp thiết của đề tài ........................................................................... 1

2. Mục tiêu nghiên cứu ................................................................................. 1
3. Ý nghĩa khoa học và ý nghĩa thực tiễn của đề tài .................................. 2
PHẦN B. NỘI DUNG ......................................................................................... 3
Chương 1. Tổng quan tình hình nghiên cứu .............................................. 3
1.1. Tình hình du lịch tại Việt Nam .......................................................... 3
1.2. Tình hình du lịch tại Phú Thọ ............................................................ 4
Chương 2. Cơ sở lý luận ............................................................................... 7
2.1. React JS .............................................................................................. 7
2.1.1. Giới thiệu ................................................................................ 7
2.1.2. Ƣu điểm .................................................................................. 7
2.2. Spring Framework ............................................................................. 8
2.2.1. Giới thiệu ................................................................................ 8
2.2.2. Ƣu điểm .................................................................................. 9
Chương 3. Xây dựng hệ thống ................................................................... 11
3.1. Tổng quan hệ thống ......................................................................... 11
3.1.1. Chức năng ............................................................................. 11
3.1.2. Biểu đồ phân cấp chức năng ................................................. 12
3.1.3. Biểu đồ luồng dữ liệu ........................................................... 13
3.1.4. Cơ sở dữ liệu ......................................................................... 15
3.2. Backend ............................................................................................ 23
3.2.1. Cài đặt IntelliJ IDEA ............................................................ 23
3.2.2. Cài đặt JDK và biến môi trƣờng Java................................... 26
3.2.3. Khởi tạo dự án Spring bằng IntelliJ IDEA ........................... 32


iii
3.2.4. Thêm các thƣ viện cần dùng cho dự án Spring .................... 34
3.2.5. Cấu hình file config cho dự án ............................................. 37
3.2.6. Phân chia các package .......................................................... 39
3.2.7. Khởi tạo một API.................................................................. 43

3.3. Frontend ........................................................................................... 47
3.3.1. Cài đặt Visual Studio Code .................................................. 47
3.3.2. Cài đặt Node.js ..................................................................... 49
3.3.3. Tạo dự án React JS ............................................................... 53
3.4. Xây dựng chức năng kết hợp frontend và backend ......................... 62
3.4.1. Chức năng đăng nhập ........................................................... 62
3.4.2. Chức năng đăng ký tài khoản ............................................... 64
3.4.4. Chức năng tìm kiếm và phân trang ....................................... 67
3.4.5. Chức năng xem chi tiết bài viết ............................................ 68
3.4.6. Chức năng đặt lịch ................................................................ 70
3.4.7. Chức năng thêm mới, sửa, xóa ............................................. 71
3.5. Đánh giá chất lƣợng ......................................................................... 76
Chương 4. Kết luận ..................................................................................... 77
TÀI LIỆU THAM KHẢO ................................................................................ 78


iv
DANH MỤC HÌNH VẼ
Hình 1. Giới thiệu React JS............................................................................... 7
Hình 2. Giới thiệu Spring .................................................................................. 9
Hình 3. Sơ đồ hệ thống website ...................................................................... 12
Hình 4. Sơ đồ chức năng ................................................................................. 13
Hình 5. Biểu đồ luồng dữ liệu mức khung cảnh ............................................. 14
Hình 6. Biểu đồ luồng dữ liệu mức đỉnh......................................................... 14
Hình 7. Biểu đồ chức năng cập nhật ............................................................... 15
Hình 8. Biểu đồ chức năng tìm kiếm .............................................................. 15
Hình 9. Mơ hình thực thể liên kết 1 ................................................................ 22
Hình 10. Mơ hình thực thể liên kết 2 .............................................................. 23
Hình 11. Tải xuống IntelliJ IDEA ................................................................... 24
Hình 12. Cài đặt IntelliJ IDEA 1..................................................................... 24

Hình 13. Cài đặt IntelliJ IDEA 2..................................................................... 25
Hình 14. Thƣ mục IntelliJ IDEA..................................................................... 26
Hình 15. Tải xuống JDK 1 .............................................................................. 26
Hình 16. Tải xuống JDK 2 .............................................................................. 27
Hình 17. Cài đặt JDK 1 ................................................................................... 27
Hình 18. Cài đặt JDK 2 ................................................................................... 28
Hình 19. Cài đặt JDK 3 ................................................................................... 28
Hình 20. Cài đặt JDK 4 ................................................................................... 29
Hình 21. Cài đặt JRE 1 .................................................................................... 29
Hình 22. Cài đặt JRE 2 .................................................................................... 30
Hình 23. Cài đặt biến mơi trƣờng Java 1 ........................................................ 30
Hình 24. Cài đặt biến mơi trƣờng Java 2 ........................................................ 31
Hình 25. Cài đặt biến mơi trƣờng Java 3 ........................................................ 31
Hình 26. Cài đặt biến mơi trƣờng Java 4 ........................................................ 32
Hình 27. Kiểm tra biến mơi trƣờng Java......................................................... 32
Hình 28. Khởi tạo dự án Spring ...................................................................... 33
Hình 29. Giao diện dự án Spring .................................................................... 34


v
Hình 30. Thêm dependency ............................................................................ 34
Hình 31. Tìm kiếm dependency Lombok ....................................................... 35
Hình 32. Chi tiết dependency Lombok 1 ........................................................ 36
Hình 33. Chi tiết dependency Lombok 2 ........................................................ 36
Hình 34. Tải xuống dependency Lombok ....................................................... 37
Hình 35. Tạo file cấu hình dự án Spring ......................................................... 38
Hình 36. Cấu hình file application.yml ........................................................... 38
Hình 37. Cấu hình file application-local.yml .................................................. 39
Hình 38. Package config ................................................................................. 40
Hình 39. Package constant .............................................................................. 40

Hình 40. Package util ...................................................................................... 40
Hình 41. Package controller ............................................................................ 41
Hình 42. Package service ................................................................................ 42
Hình 43. Package model ................................................................................. 42
Hình 44.Package repository ............................................................................ 43
Hình 45. Khởi tạo BlogController .................................................................. 44
Hình 46. Phƣơng thức GET tại BlogController .............................................. 45
Hình 47. Hàm findAll() tầng service của blog ................................................ 45
Hình 48. Hàm findAll() tầng repository của blog ........................................... 46
Hình 49. Chạy dự án Spring ............................................................................ 46
Hình 50. Kiểm tra API GET blog ................................................................... 47
Hình 51. Tải xuống Visual Studio Code ......................................................... 48
Hình 52. Cài đặt Visual Studio Code .............................................................. 48
Hình 53. Tải xuống Node.js ............................................................................ 49
Hình 54. Cài đặt Node.js 1 .............................................................................. 50
Hình 55. Cài đặt Node.js 2 .............................................................................. 50
Hình 56. Cài đặt Node.js 3 .............................................................................. 51
Hình 57. Cài đặt Node.js 4 .............................................................................. 51
Hình 58. Cài đặt Node.js 5 .............................................................................. 52
Hình 59. Cài đặt Node.js 6 .............................................................................. 52


vi
Hình 60. Cài đặt Node.js 7 .............................................................................. 53
Hình 61. Kiểm tra phiên bản Node.js.............................................................. 53
Hình 62. Tạo dự án React JS ........................................................................... 54
Hình 63. Chạy server React JS........................................................................ 54
Hình 64. Giao diện mặc định React JS khởi tạo ............................................. 55
Hình 65. Code router user ............................................................................... 56
Hình 66. Code router admin ............................................................................ 56

Hình 67.Code component Navbar.js ............................................................... 57
Hình 68. Giao diện menu trên máy tính .......................................................... 57
Hình 69. Giao diện menu trên điện thoại ........................................................ 58
Hình 70. Component tạo page......................................................................... 59
Hình 71. Folder components ........................................................................... 60
Hình 72. Giao diện ngƣời dùng mặc định ....................................................... 60
Hình 73. Folder services ................................................................................. 61
Hình 74. Kết nối API bài viết.......................................................................... 61
Hình 75. File http_common.js ......................................................................... 62
Hình 76. Xử lý đăng nhập phía React JS ........................................................ 63
Hình 77. API xử lý đăng nhập ........................................................................ 63
Hình 78. Giao diện đăng nhập......................................................................... 64
Hình 79. Xử lý đăng ký phía React JS ............................................................ 65
Hình 80. API xử lý email đã sử dụng.............................................................. 65
Hình 81. API xử lý chức năng đăng ký ........................................................... 66
Hình 82. Giao diện đăng ký ............................................................................ 66
Hình 83. Xử lý tìm kiếm và phân trang nhà hàng phía React JS .................... 67
Hình 84. API xử lý tìm kiếm và phân trang nhà hàng .................................... 68
Hình 85. Giao diện tìm kiếm phân trang nhà hàng ......................................... 68
Hình 86. Xử lý chi tiết nhà hàng phía React JS .............................................. 69
Hình 87. API xử lý chi tiết nhà hàng .............................................................. 69
Hình 88. Giao diện chi tiết nhà hàng .............................................................. 70
Hình 89. Xử lý đặt nhà hàng phía React JS .................................................... 71


vii
Hình 90. API xử lý đặt lịch nhà hàng ............................................................. 71
Hình 91. Xử lý kiểm tra token phía React JS.................................................. 72
Hình 92. API xử lý kiểm tra token .................................................................. 73
Hình 93. Xử lý thêm mới nhà hàng phía React JS .......................................... 73

Hình 94. API thêm mới nhà hàng ................................................................... 74
Hình 95. Giao diện thêm mới nhà hàng .......................................................... 74
Hình 96. Xử lý cập nhật nhà hàng phía React JS............................................ 75
Hình 97. API cập nhật nhà hàng ..................................................................... 75
Hình 98. Giao diện cập nhật nhà hàng ............................................................ 76


viii
DANH MỤC BẢNG

Bảng 1.Bảng Members .................................................................................... 16
Bảng 2. Bảng Roles ......................................................................................... 16
Bảng 3. Bảng RoleMember ............................................................................. 16
Bảng 4. Bảng Blog .......................................................................................... 17
Bảng 5. Bảng Places ........................................................................................ 17
Bảng 6. ImagePlaces ....................................................................................... 18
Bảng 7. Bảng Tours......................................................................................... 18
Bảng 8. Bảng ImageTours............................................................................... 18
Bảng 9. Bảng Hotels ....................................................................................... 19
Bảng 10. Bảng Posts ....................................................................................... 19
Bảng 11. Bảng Restaurants ............................................................................. 20
Bảng 12. Bảng ImageRestaurants ................................................................... 20
Bảng 13. Bảng OrderRestaurants .................................................................... 21
Bảng 14. Bảng OrderTours ............................................................................. 21
Bảng 15. Bảng OrderHotels ............................................................................ 22


1
PHẦN A. MỞ ĐẦU
1. Tính cấp thiết của đề tài

Thành phố Việt Trì là thành phố có rất nhiều danh lam thắng cảnh, di
tích lịch sử, từ đó ta thấy du lịch là một ngành rất tiềm năng của tỉnh Phú
Thọ.Ngành du lịch của thành phố Việt Trì trong thời đại 4.0 rất cần một hệ
thống xây dựng để giám sát, quản lý thơng tin, quảng bá hình ảnh du lịch địa
phƣơng. Khách du lịch ở bất cứ đâu cũng có thể theo dõi, tìm hiểu thơng tin
liên quan về địa điểm du lịch của thành phố, còn địa phƣơng thì cũng có thể
dễ dàng quảng bá hình ảnh của mình đến với khách du lịch. Áp dụng cơng
nghệ vào ngành du lịch rất hiệu quả so với phƣơng pháp thơng thƣờng và tiết
kiệm chi phí.Các ứng dụng của cơng nghệ vào du lịch không chỉ nhắm mục
tiêu đến các hoạt động về du lịch mà còn là những đòn bẩy mới để nâng cao
các xu hƣớng phát triển áp dụng công nghệ để đạt hiệu quả trong thời đại 4.0.
Từ các vấn đề đã nêu trên, em đã chọn đề tài: “Xây dựng hệ thống quản
lý thông tin và quảng bá du lịch thành phố việt trì trên nền tảng Java Spring
và React JS”
2. Mục tiêu nghiên cứu
Mục tiêu nghiên cứu dự án đặt ra trƣớc khi phát triển là:
- Tìm hiểu về hệ thống, cách thức hoạt động của hệ thống quản lý du lịch,
thông tin.
- Cách thức xây dựng, hoạt động của hệ thống quản lý.
- Tìm hiểu về Spring framework.
- Tìm hiểu về thƣ viện React JS.
- Tìm hiểu về cơng cụ quản lý mã nguồn Git.
- Tìm hiểu về đƣa 1 website lên server.


2
3. Ý nghĩa khoa học và ý nghĩa thực tiễn của đề tài
Đề tài khóa luận sau khi hồn thành sẽ đạt đƣợc hai ý nghĩa là khoa học
và thực tiễn.
- Ý nghĩa khoa học của đề tài gồm:

 Sử dụng nền tảng web app và API vào xây dựng hệ thống quản lý.
 Đây là nguồn tƣ liệu nghiên cứu, phục vụ cho quá trình học tập và nghiên
cứu khoa học của sinh viên ngành Công nghệ thông tin.
- Ý nghĩa thực tiễn của đề tài gồm:
 Hệ thống quản lý đƣợc ứng dụng vào thực tế sẽ đem lại hiệu quả cao về
quảng bá hình ảnh du lịch Việt Trì nói riêng, và du lịch Việt Nam nói
chung.
 Vận dụng các kiến thức vào xây dựng dự án thực tế.
 Tài liệu cho sinh viên muốn nghiên cứu về nền tảng web app, API, các
framework nhƣ React JS, Spring MVC, Spring Boot…


3
PHẦN B. NỘI DUNG
Chương 1. Tổng quan tình hình nghiên cứu
1.1. Tình hình du lịch tại Việt Nam
Du lịch là một trong những trụ cột chính của thƣơng mại quốc tế, đóng
vai trị quan trọng trong nền kinh tế của nhiều quốc gia trên thế giới và là
động lực tăng nguồn thu nhập quan trọng đối với nhiều nƣớc đang phát triển,
trong đó có Việt Nam. Tuy nhiên, phát triển du lịch trong bối cảnh hiện nay bị
tác động rất lớn bởi q trình hội nhập hóa, tồn cầu hóa, cùng với sự phát
triển không ngừng của khoa học, công nghệ. Bên cạnh đó, sự biến đổi khí
hậu, ơ nhiễm mơi trƣờng, dịch bệnh, mà điển hình gần đây nhất là đại dịch
Covid-19 đã ảnh hƣởng sâu sắc đến sự phát triển du lịch toàn cầu và du lịch
Việt Nam, đặc biệt là tác động trực tiếp đến hành vi, quyết định đi du lịch của
du khách, đƣa toàn ngành du lịch vào thế phải không ngừng thay đổi để thích
nghi và đáp ứng đƣợc các nhu cầu về du lịch trong tình hình mới. Các nhận
định xuất phát từ thực tiễn nhu cầu của khách du lịch, hoạt động cung cấp các
sản phẩm, dịch vụ du lịch của các cơng ty, đơn vị làm du lịch, cùng với đó là
các chính sách ƣu tiên trƣớc mắt của nhà nƣớc nhằm phát triển du lịch ở Việt

Nam phù hợp xu hƣớng chung của du lịch trên thế giới.
Ở Việt Nam và thế giới có rất nhiều khu vực phát triển du lịch thông
minh nhờ ứng dụng công nghệ nhƣ [2]:
 Hà Nội lắp đặt điểm quét mã QR cung cấp thông tin điểm du lịch.
 Bảo tàng Điêu khắc Chăm thành phố Đà Nẵng bằng công nghệ Scan 3D.
 Ứng dụng thông minh trên điện thoại di động của ngành du lịch Bình
Định.
 Ứng dụng Chatbot giúp du khách trong nƣớc và quốc tế có đƣợc những
trải nghiệm và tra cứu mọi thơng tin tiện ích khi đến Đà Nẵng.
 TripAdvisor giống nhƣ một diễn đàn - nơi mọi ngƣời có thể tìm thấy rất
nhiều lời khun cũng nhƣ "feedback" về thông tin khách sạn, điểm tham
quan, địa điểm ăn uống.


4
 Traveloka - ứng dụng đặt phòng khách sạn và vé máy bay.
Ngành Du lịch Việt Nam đang từng bƣớc tiếp cận và ứng dụng rộng
rãi công nghệ thông tin trong phát triển du lịch, tuy nhiên vẫn còn tồn tại một
số hạn chế nhƣ:
 Mức độ sẵn sàng cho ứng dụng và phát triển công nghệ thông tin chƣa cao:
Điều này thể hiện thông qua chỉ số xếp hạng về mức độ sẵn sàng cho ứng
dụng và phát triển công nghệ thông tin - truyền thông của Bộ Văn hóa Thể thao và Du lịch, trong giai đoạn từ năm 2015 - 2021 chỉ xếp ở vị trí
trung bình khá trong tổng số 19 bộ, ngành. Đặc biệt, các chỉ số về hạ tầng
kỹ thuật và chỉ số ứng dụng công nghệ thông tin nhiều năm xếp ở vị trí
trung bình yếu.
 Trình độ khoa học cơng nghệ cịn hạn chế: So với các quốc gia trên thế
giới, trình độ khoa học cơng nghệ của Việt Nam cịn thấp. Do đó, việc
nghiên cứu, sản xuất các sản phẩm cơng nghệ ứng dụng cho du lịch còn
nhiều hạn chế.
 Tỷ lệ ứng dụng cơng nghệ thơng tin du lịch cịn thấp: Theo khảo sát của

Hiệp hội Du lịch Việt Nam, hiện nay, các hệ thống khách sạn cao cấp,
thƣơng hiệu quốc tế và các hãng hàng không, doanh nghiệp lữ hành lớn
nhƣ Saigontourist, Vietravel, Vietnamtourism… đều tích cực ứng dụng
cơng nghệ thông tin trong hoạt động kinh doanh du lịch với khối lƣợng sản
phẩm phong phú, có thơng tin cụ thể về thời điểm, giá cả, các dịch vụ.
1.2. Tình hình du lịch tại Phú Thọ
Phú Thọ là tỉnh nằm ở vị trí trung tâm, vùng chuyển tiếp giữa miền núi
phía Bắc và đồng bằng, đỉnh của tam giác châu thổ đồng bằng Bắc Bộ, nơi
hợp lƣu của ba con sông: Sông Thao, sông Lô, sông Đà, bao bọc giữa hai dãy
núi Tam Đảo và Ba Vì, tựa lƣng vào vùng đồi núi san sát nhƣ bát úp phần
cuối của dãy Hoàng Liên Sơn, mặt hƣớng ra vùng đồng bằng Bắc Bộ phì
nhiêu rộng mênh mơng. Phú Thọ có nhiều cảnh quan đang dạng đƣợc thiên
nhiên ban tặng làm nên một vị trí đắc địa: sơn chầu, thuỷ tụ. Phú Thọ có


5
nhiều danh lam thắng cảnh nhƣ: Ngã ba Bạch Hạc, Ao Giời Suối Tiên, Đầm
Ao Châu, Đầm Vân Hội, mỏ nƣớc khống nóng Thanh Thủy, Vƣờn Quốc gia
Xn Sơn… là tài nguyên du lịch tự nhiên vô cùng quý báu để phát triển các
loại hình du lịch sinh thái, nghỉ dƣỡng và khám phá.
Đền Hùng - nơi thờ tự các Vua Hùng trở thành nơi thờ cúng Tổ tiên,
nơi tụ hội và thể hiện sức mạnh, ý chí đại đồn kết của dân tộc Việt Nam ngày
nay. Trên mảnh đất này cịn lƣu giữ 1.372 di tích lịch sử văn hóa, trong đó có
01 di tích quốc gia đặc biệt, 73 di tích quốc gia, 219 di tích cấp tỉnh và hàng
trăm lễ hội dân gian đặc sắc nhƣ lễ hội đền Hùng, lễ hội đền Mẫu Âu Cơ, lễ
hội Trò Trám, lễ hội rƣớc Chúa Gái, lễ rƣớc kiệu Hùng Lô, hội Phết Hiền
Quan... cùng các làn điệu dân ca Xoan, Ghẹo. Trong đó, Hát Xoan đã đƣợc
UNESCO cơng nhận là di sản văn hóa phi vật thể cần bảo vệ khẩn cấp; Tín
ngƣỡng thờ cúng Hùng Vƣơng ở Phú Thọ là văn hoá phi vật thể đại diện của
nhân loại là nguồn di sản văn hóa vơ giá mang đậm bản sắc văn hóa nguồn

cội và đó chính là nguồn tài nguyên du lịch nhân văn độc đáo tạo nên sức hấp
dẫn lớn đối với du khách thập phƣơng.
Với các điểm đến tâm linh hấp dẫn: Khu Di tích lịch sử Đền Hùng, đền
Mẫu Âu Cơ, đình Hùng Lơ, đình Lâu Thƣợng, đền Lăng Sƣơng, thành phố lễ
hội Việt Trì..., các điểm đến danh lam thắng cảnh đƣợc thiên nhiên ƣu đãi ban
tặng: Vƣờn Quốc gia Xuân Sơn với hệ thống rừng nguyên sinh, hang động kỳ
thú và thác nƣớc; khu nƣớc khống nóng có lợi cho sức khỏe Thanh Thủy,
đầm Ao Châu, Ao Giời - suối Tiên... Phú Thọ có điều kiện phát triển nhiều
loại hình du lịch: du lịch tâm linh hƣớng về cội nguồn, du lịch di tích lịch sử
văn hóa, du lịch sinh thái nghỉ dƣỡng, tham quan danh lam thắng cảnh….
Ngành du lịch Việt Trì nói riêng và du lịch Phú Thọ nói chung vốn đƣợc
biết đến với việc phụ thuộc nhiều vào việc quảng bá hình ảnh, thách thức lớn
trong việc tìm kiếm những phƣơng thức tốt hơn để gia tăng hiệu quả, tiết
kiệm chi phí trong việc mang hình ảnh đẹp, gây ấn tƣợng tốt với khách du
lịch. Trong thời đại công nghệ 4.0, cách đƣợc coi là tối ƣu và cũng là xu


6
hƣớng khơng thể thay thế nhất chính là áp dụng cơng nghệ mới vào hoạt động
du lịch.
Những lợi ích của ngành du lịch áp dụng cơng nghệ:
 Chi phí phân phối thấp, chi phí truyền thơng thấp, chi phí lao động thấp;
giảm thiểu chất thải, ngƣời hỗ trợ tính giá linh hoạt.
 Tăng chất lƣợng dịch vụ, tiết kiệm nguồn lực, giảm chi phí.
 Những tiện ích cho du khách nhƣ: đáp ứng nhu cầu rất tốt, linh hoạt
trong thời gian hoạt động, cung cấp các giao dịch phút chót, thơng tin
chính xác, phản ứng nhanh với nhu cầu dao động.


7

Chương 2. Cơ sở lý luận
2.1. React JS
2.1.1. Giới thiệu
React JS là một opensource đƣợc phát triển bởi Facebook, ra mắt vào
năm 2013, bản thân nó là một thƣ viện Javascript đƣợc dùng để để xây dựng
các tƣơng tác với các thành phần trên website. Một trong những điểm nổi bật
nhất của React JS đó là việc render dữ liệu khơng chỉ thực hiện đƣợc trên tầng
Server mà cịn ở dƣới Client nữa. Ngoài ra, nếu nhƣ bạn kết hợp với các kỹ
thuật thiên hƣớng hiện đại thì React JS cũng có thể đáp ứng đƣợc dễ dàng mọi
nhu cầu xây dựng ứng dụng của một trang với độ phức tạp cao hơn [3].

Hình 1. Giới thiệu React JS
2.1.2. Ưu điểm
Hiện nay, React JS đang là framework frontend đang đƣợc tuyển dụng
công việc, và sử dụng nhiều nhất trong lập trình phát triển phần mềm. Dƣới
đây là một số lý do nên sử dụng React JS:
 React JS giúp cho việc viết các đoạn code Javascript sẽ trở nên dễ dàng
hơn vì nó sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX. Thơng
qua JSX cho phép nhúng code HTML và Javascript.


8
 React JS cho phép Developer phá vỡ những cấu tạo UI phức tạp thành
những component độc lập.
 Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đây Developer
dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từng component đơn
giản hơn.
 Đi kèm với React JS là rất nhiều các công cụ phát triển giúp cho
việc debug code một cách dễ dàng hơn.
 Một trong những ƣu điểm nữa của React JS đó là sự thân thiện với SEO.

Hầu nhƣ các JS Frameworks không thân thiện với các tìm kiếm mặc dù đã
đƣợc cải thiện nhiều nhƣng dƣới sự hỗ trợ của các render dữ liệu trả về
dƣới dạng web page giúp cho SEO chuẩn hơn
 React JS có thể tạo cấu trúc dự án nhanh chóng hơn nhờ vào command
line interface.
 Hiện nay, tài liệu về React JS ngày càng đa dạng, rõ ràng về ngơn ngữ nên
bạn có thể dễ dàng trở thành chuyên gia về nó.
 React JS sở hữu một hệ sinh thái vững rất hữu ích cho việc xây dựng một
ứng dụng frontend điển hình nhất. Nó có thể bao gồm: routing,
Flux/Redux…
2.2. Spring Framework
2.2.1. Giới thiệu
Spring là framework phát triển ứng dụng phổ biến nhất dành cho Java
Enterprise. Ban đầu nó đƣợc viết bởi Rod Johnson và lần đầu tiên đƣợc phát
hành theo giấy phép Apache 2.0 vào tháng 6 năm 2003. Spring có kích
thƣớng nhẹ, phiên bản cơ bản của Spring framework có kích thƣớc khoảng
2MB [4].
Spring framework là một Java Platform mã nguồn mở, một giải pháp
gọn nhẹ dành cho Java Enterprise. Với Spring Framework các nhà phát triển
có thể tạo ra các mã có hiệu suất cao, dễ kiểm thử và có thể sử dụng lại đƣợc.


9
Các tính năng core của Spring Framework có thể đƣợc sử dụng trong
việc phát triển bất kỳ ứng dụng Java nào. Bên cạnh đó, phần mở rộng đƣợc sử
dụng để xây dựng các ứng dụng web trên nền tảng Java EE. Mục tiêu của
Spring Framework là làm cho việc phát triển ứng dụng J2EE dễ dàng hơn và
thúc đẩy việc lập trình tốt hơn bằng mơ hình POJO-based.

Hình 2. Giới thiệu Spring

2.2.2. Ưu điểm
Spring có rất nhiều ƣu điểm có thể kể đến nhƣ sau:
 Spring cho phép các nhà phát triển tạo các ứng dụng cấp Enterprise sử
dụng các POJO. Lợi ích của việc sử dụng các POJO là bạn không cần một
sản phẩm chứa EJB nhƣ một máy chủ ứng dụng, mà bạn chỉ có thể sử
dụng một bộ chứa servlet mạnh mẽ nhƣ Tomcat hoặc một số sản phẩm
thƣơng mại khác.
 Spring đƣợc tổ chức theo kiểu mơ đun. Mặc dù số lƣợng các gói và các lớp
là khá nhiều, nhƣng bạn chỉ cần quan tâm đến những gì bạn cần và khơng
cần quan tâm đến phần còn lại.


10
 Spring sử dụng một số cơng nghệ hiện có nhƣ một số ORM Framework,
logging frameworks, JEE, Quartz, JDK timers và các công nghệ View
khác.
 Dễ dàng để kiểm thử một chƣơng trình đƣợc viết bằng Spring.
 Web framework của Spring là một Web MVC framework có thiết kế tốt,
nó là một thay thế tuyệt vời cho Struts và các công nghệ kém phổ biến
khác.
 Spring cung cấp một API thuận tiện để dịch các ngoại lệ công nghệ cụ thể
(ném bởi JDBC, Hibernate, hoặc JDO chẳng hạn) vào các trƣờng hợp
ngoại lệ nhất qn, khơng đƣợc kiểm sốt.
 IoC Container có trọng lƣợng nhẹ. Điều này có lợi cho việc phát triển và
triển khai các ứng dụng trên các máy tính có bộ nhớ và tài ngun CPU
hạn chế.
 Spring cung cấp một giao diện quản lý transaction nhất qn có thể mở
rộng đến một local transaction (ví dụ nhƣ sử dụng một cơ sở dữ liệu) và
mở rộng lên các global transaction (sử dụng JTA).
 Các ứng dụng đƣợc xây dựng dựa trên nền tảng Spring framework này

đƣợc cộng đồng ngƣời lập trình khen thƣởng rất mạnh mẽ và đƣợc sử
dụng rất rộng rãi.


11
Chương 3. Xây dựng hệ thống
3.1. Tổng quan hệ thống
3.1.1. Chức năng
Hệ thống quản lý thông tin, quảng bá du lịch đƣợc xây dựng trên nền
tảng web app. Các chức năng gửi và nhận dữ liệu từ server đảm bảo hoạt
động chính xác.
Hệ thống kết nối với server qua API gồm các phƣơng thức:
- GET(SELECT): Trả về một Resource hoặc một danh sách Resource.
- POST(CREATE): Tạo mới một Resource.
- PUT(UPDATE): Cập nhật thơng tin cho Resource.
- DELETE(DELETE): Xố một Resource.
Mơ tả các chức năng: Các chức năng có trong dự án đáp ứng đầy đủ
yêu cầu về 1 website du lịch.
 Đối với ngƣời dùng:
- Đăng nhập tài khoản
- Đăng xuất tài khoản
- Đăng ký tài khoản
- Xem danh sách và chi tiết tất cả bài viết
- Xem danh sách và chi tiết tất cả các điểm du lịch
- Xem danh sách và chi tiết tất cả các tour du lịch
- Xem danh sách và chi tiết tất cả các nhà nghỉ, khách sạn
- Xem danh sách và chi tiết các công ty du lịch lữ hành
- Đặt khách sạn, nhà nghỉ
- Đặt tour du lịch
 Đối với quản trị viên

- Có tất cả chức năng của ngƣời dùng
- Truy cập đƣợc trang admin
- Thêm mới, sửa, xóa các bài viết


12
- Thêm mới, sửa, xóa các điểm du lịch
- Thêm mới, sửa xóa các cơng ty lữ hành, du lịch
- Thêm mới, sửa xóa thơng tin khách sạn, nhà nghỉ
- Thêm mới, sửa xóa thơng tin tour du lịch
- Thêm mới sửa xóa thơng tin ngƣời dùng
- Thêm mới sửa xóa thơng tin quản trị viên
3.1.2. Biểu đồ phân cấp chức năng
Hệ thống website:

Hình 3. Sơ đồ hệ thống website


13
Sơ đồ chức năng:

Hình 4. Sơ đồ chức năng
Dựa vào các chức năng thì phần mềm sẽ bao gồm các trang nhƣ sau:
-

Đăng nhập, đăng xuất.

- Trang chủ: Hiển thị tổng quát thông tin của hệ thống.
- Giới thiệu: Hiển thị thông tin giới thiệu về tỉnh Phú thọ.
- Bài viết: Hiển thị thông tin, cuộc sống, xã hội ở tỉnh Phú Thọ.

-

Tour du lịch: Hiển thị thông tin các tour du lịch, cho phép tìm kiếm, đặt
tour du lịch.

−

Lƣu trú: Hiển thị thông tin khách sạn, nhà nghỉ cho phép đặt khách sạn,
nhà nghỉ.

−

Điểm du lịch: Hiển thị thông tin các điểm du lịch.

−

Lữ hành: Hiển các thông tin công ty du lịch, lữ hành.

−

Admin: cho phép thêm, sửa, xóa thơng tin bài viết của hệ thống, phân
quyền ngƣời dùng, xem tất cả cả đơn đặt hàng, duyệt hoặc xóa đơn đặt
hàng.
3.1.3. Biểu đồ luồng dữ liệu
* Biểu đồ luồng dữ liệu mức khung cảnh


14
Ngƣời dùng đƣa ra yêu cầu tới hệ thống, hệ thống sẽ đƣa ra kết quả
theo yêu cầu của ngƣời dùng. Mặt khác hệ thống sẽ yêu cầu tới quản trị viên,

quản trị viên sẽ thực hiện quản lý hệ thống.

Hình 5. Biểu đồ luồng dữ liệu mức khung cảnh
* Biểu đồ luồng dữ liệu mức đỉnh.

Hình 6. Biểu đồ luồng dữ liệu mức đỉnh
* Biểu đồ luồng dữ liệu mức dƣới đỉnh
Chức năng cập nhật: Chức năng này dành cho ngƣời quản trị viên hệ
thống, thêm, sửa, xóa thơng tin trong cơ sở dữ liệu.


15

Hình 7. Biểu đồ chức năng cập nhật
Chức năng tìm kiếm: Khi ngƣời dùng có u cầu tìm kiếm thơng tin
bằng cách nhập từ khóa, hệ thống sẽ gửi lại các bài đăng, thơng tin có từ
khóa.

Hình 8. Biểu đồ chức năng tìm kiếm
3.1.4. Cơ sở dữ liệu
Quá trình phân tích thiết kế hệ thống thơng tin đã rút ra đƣợc khi xây
dựng hệ thống quản lý thông tin và quảng bá du lịch thành phố Việt Trì trên
nền tảng Java Spring và React JS cần tổng cộng 15 thực thể.