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

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 học tập cách nghiêm túc, em hoàn thành xong đề tài Lời em xin gửi lời cảm ơn tới thầy cô khoa Kỹ thuật - Cơng nghệ Trƣờng Đại học Hùng Vƣơng dìu dắt truyền đạt kiến thức để em hoàn thành tốt đề tài Đặc biệt em xin chân thành cảm ơn dìu dắt tận tình thầy giáo Nguyễn Hùng Cƣờng, thầy giáo viên hƣớng dẫn, ngƣời giám sát tiến độ làm việc em Chính mà thầy đƣa ý tƣởng, góp ý giúp em nhận vấn đề cịn tồn kịp thời sửa chữa Dù cố gắng, xong em tránh khỏi sai sót vốn kiến thức cịn hạn hẹp Em mong nhận đƣợc góp ý, giúp đỡ từ quý thầy 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 Tính cấp thiết đề tài Mục tiêu nghiên cứu Ý nghĩa khoa học ý nghĩa thực tiễn đề tài PHẦN B NỘI DUNG Chương Tổng quan tình hình nghiên cứu 1.1 Tình hình du lịch Việt Nam 1.2 Tình hình du lịch Phú Thọ Chương Cơ sở lý luận 2.1 React JS 2.1.1 Giới thiệu 2.1.2 Ƣu điểm 2.2 Spring Framework 2.2.1 Giới thiệu 2.2.2 Ƣu điểm Chương Xây dựng hệ thống 11 3.1 Tổng quan hệ thống 11 3.1.1 Chức 11 3.1.2 Biểu đồ phân cấp chức 12 3.1.3 Biểu đồ luồng liệu 13 3.1.4 Cơ sở liệu 15 3.2 Backend 23 3.2.1 Cài đặt IntelliJ IDEA 23 3.2.2 Cài đặt JDK biến môi trƣờng Java 26 3.2.3 Khởi tạo dự án Spring IntelliJ IDEA 32 iii 3.2.4 Thêm 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 package 39 3.2.7 Khởi tạo 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 kết hợp frontend backend 62 3.4.1 Chức đăng nhập 62 3.4.2 Chức đăng ký tài khoản 64 3.4.4 Chức tìm kiếm phân trang 67 3.4.5 Chức xem chi tiết viết 68 3.4.6 Chức đặt lịch 70 3.4.7 Chức thêm mới, sửa, xóa 71 3.5 Đánh giá chất lƣợng 76 Chương Kết luận 77 TÀI LIỆU THAM KHẢO 78 iv DANH MỤC HÌNH VẼ Hình Giới thiệu React JS Hình Giới thiệu Spring Hình Sơ đồ hệ thống website 12 Hình Sơ đồ chức 13 Hình Biểu đồ luồng liệu mức khung cảnh 14 Hình Biểu đồ luồng liệu mức đỉnh 14 Hình Biểu đồ chức cập nhật 15 Hình Biểu đồ chức tìm kiếm 15 Hình Mơ hình thực thể liên kết 22 Hình 10 Mơ hình thực thể liên kết 23 Hình 11 Tải xuống IntelliJ IDEA 24 Hình 12 Cài đặt IntelliJ IDEA 24 Hình 13 Cài đặt IntelliJ IDEA 25 Hình 14 Thƣ mục IntelliJ IDEA 26 Hình 15 Tải xuống JDK 26 Hình 16 Tải xuống JDK 27 Hình 17 Cài đặt JDK 27 Hình 18 Cài đặt JDK 28 Hình 19 Cài đặt JDK 28 Hình 20 Cài đặt JDK 29 Hình 21 Cài đặt JRE 29 Hình 22 Cài đặt JRE 30 Hình 23 Cài đặt biến môi trƣờng Java 30 Hình 24 Cài đặt biến môi trƣờng Java 31 Hình 25 Cài đặt biến mơi trƣờng Java 31 Hình 26 Cài đặt biến môi trƣờng Java 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 36 Hình 33 Chi tiết dependency Lombok 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 BlogController 45 Hình 47 Hàm findAll() tầng service blog 45 Hình 48 Hàm findAll() tầng repository 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 50 Hình 55 Cài đặt Node.js 50 Hình 56 Cài đặt Node.js 51 Hình 57 Cài đặt Node.js 51 Hình 58 Cài đặt Node.js 52 Hình 59 Cài đặt Node.js 52 vi Hình 60 Cài đặt Node.js 53 Hình 61 Kiểm tra phiê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 máy tính 57 Hình 69 Giao diện menu đ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 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 đăng ký 66 Hình 82 Giao diện đăng ký 66 Hình 83 Xử lý tìm kiếm phân trang nhà hàng phía React JS 67 Hình 84 API xử lý tìm kiếm 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 nhà hàng phía React JS 73 Hình 94 API thêm nhà hàng 74 Hình 95 Giao diện thêm 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 Bảng Roles 16 Bảng Bảng RoleMember 16 Bảng Bảng Blog 17 Bảng Bảng Places 17 Bảng ImagePlaces 18 Bảng Bảng Tours 18 Bảng Bảng ImageTours 18 Bảng 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 65 Hình 79 Xử lý đăng ký phía React JS Hình 80 API xử lý email sử dụng 66 Hình 81 API xử lý chức đăng ký Hình 82 Giao diện đăng ký 67 3.4.4 Chức tìm kiếm phân trang Phạm vi sử dụng: ngƣời dùng Mục đích: Phân chia liệu tìm kiếm thành trang khơng hiển thị tất trang Dữ liệu đầu vào: vị trí trang muốn lấy liệu từ khóa tìm kiếm Mơ tả: ngƣời dùng nhập từ khóa muốn tìm kiếm sau thực tìm kiếm Sau hệ thống hệ thống sử dụng liệu đầu vào mà ngƣời dùng truyền lên xử lý trả liệu trang mà ngƣời dùng muốn lấy theo từ khóa tìm kiếm Giá trị mặc định số trang muốn lấy không truyền liệu đầu vào tìm kiếm hệ thống trả tất viết Code xử lý React JS Spring: Hình 83 Xử lý tìm kiếm phân trang nhà hàng phía React JS 68 Hình 84 API xử lý tìm kiếm phân trang nhà hàng Hình 85 Giao diện tìm kiếm phân trang nhà hàng 3.4.5 Chức xem chi tiết viết Phạm vi sử dụng: ngƣời dùng Mục đích: Hiển thị chi tiết viết Dữ liệu đầu vào: vị trí trang muốn lấy liệu từ khóa tìm kiếm Mơ tả: Phía ngƣời dùng nhấn vào viết gửi liệu Id viết Sau hệ thống hệ thống sử dụng liệu đầu vào mà 69 ngƣời dùng truyền lên xử lý trả liệu viết có Id giống với phía ngƣời dùng truyền lên Code xử lý React JS Spring: Hình 86 Xử lý chi tiết nhà hàng phía React JS Hình 87 API xử lý chi tiết nhà hàng 70 Hình 88 Giao diện chi tiết nhà hàng 3.4.6 Chức đặt lịch Phạm vi sử dụng: ngƣời dùng Mục đích: Cho ngƣời dùng đặt lịch trƣớc nhà hàng hay tour du lịch Dữ liệu đầu vào: Các thông tin ngƣời dùng nhƣ: họ tên, email, số điện thoại thông tin khác Mơ tả: Phía ngƣời dùng điền thơng tin cần thiết mà hệ thống yêu cầu Sau hệ thống hệ thống sử dụng liệu đầu vào mà ngƣời dùng nhập thêm với thời gian đặt, tên tour hay địa điểm đặt lịch lƣu vào hệ thống 71 Hình 89 Xử lý đặt nhà hàng phía React JS Hình 90 API xử lý đặt lịch nhà hàng 3.4.7 Chức thêm mới, sửa, xóa Phạm vi sử dụng: quản trị viên Mục đích: dành cho ngƣời quản trị viên thêm mới, sửa, xóa thơng tin viết có trang web Mơ tả: Phía ngƣời dùng cần đăng nhập nhƣ bình thƣờng Khi đăng nhập thành công trả chuỗi token lƣu vào LocalStorage Sau hệ thống hệ thống tiến hành kiểm tra chuỗi token có chứa quyền ngƣời quản trị viên hay khơng, có chứa quyền quản trị viên cho phép truy cập trang quản trị thực thao tác thêm, sửa, xóa thơng tin hệ thống 72 * Kiểm tra token Hình 91 Xử lý kiểm tra token phía React JS 73 Hình 92 API xử lý kiểm tra token * Thêm nhà hàng Hình 93 Xử lý thêm nhà hàng phía React JS 74 Hình 94 API thêm nhà hàng Hình 95 Giao diện thêm nhà hàng * Cập nhật quán ăn 75 Hình 96 Xử lý cập nhật nhà hàng phía React JS Hình 97 API cập nhật nhà hàng 76 Hình 98 Giao diện cập nhật nhà hàng 3.5 Đánh giá chất lượng Ứng dụng đƣợc xây dựng theo quy trình chƣơng trình phần mềm sử dụng frontend React JS backend sử dụng Spring: - Ở frontend React JS cấu trúc file chƣơng trình: file js, file.css đƣợc viết cách, đảm bảo nâng cấp bảo trì dễ dàng tƣơng lai - Phía backend Spring cấu trúc thƣ mục, package đƣợc phân chia rõ ràng, Controller gọi xuống Service, Service gọi xuống Repository để thao tác với Database - Ngồi ra, phía backend cịn sử dụng Spring Security để authentication authorization, giúp phân quyền ngƣời dùng, tăng tính bảo mật cho API quan trọng chế generate token - Website đƣợc xây dựng thành công, chạy ổn định đầy đủ chức nhƣ biểu đồ phân cấp chức đặt 77 Chương Kết luận Đề tài “Hệ thống quản lý thông tin quảng bá du lịch thành phố Việt Trì tảng Java Spring React JS” đƣợc thử nghiệm thu đƣợc kết sau: - Về kiến thức kỹ năng: Nắm đƣợc kiến thức Spring framework, API, React JS, kiến thức ứng dụng đa tảng, bên cạnh có thêm kiến thức HTML, CSS, JavaScript, kỹ phân tích phát triển hệ thống - Về sản phẩm: website hệ thống quản lý thông tin quảng bá du lịch thành phố việt trì tảng Java Spring React JS xây dựng thành cơng, website hoạt động bình thƣờng, khơng xảy lỗi Kết nối, gửi nhận thông tin từ u cầu từ phía ngƣời dùng Sản phẩm hồn thành đảm bảo giống với yêu cầu, chức đặt - Phạm vi: Hệ thống sử dụng mô hình thí nghiệm nâng cấp dự án thực tế áp dụng du lịch 78 Tồn tại: Hệ thống server chậm yếu sử dụng server miễn phí, phân tích thiết kế sở liệu chƣa đƣợc tối ƣu Hƣớng phát triển: Để hệ thống quản lý hoạt động tốt hiệu cần sử dụng server khác mạnh nâng cấp hệ thống để áp dụng thực tế TÀI LIỆU THAM KHẢO [1] No Starch Press (2018), Eloquent JavaScript, Nhà xuất bản: No Starch Press [2] THS Phạm Thị Thùy Linh, Thực trạng ứng dụng công nghệ phát triển du lịch Việt Nam, , xem 02/01/2022 [3] Từ Quốc Hƣng, React JS gì? Những điều bạn chưa biết React JS, , xem 14/01/2022 [4] ITNavi, Spring gì? Lợi ích mà Spring mang lại cho người dùng, , xem 20/12/2021 79