Abstract
ii 摘要 iii Chapter 01 Introduction 6 1.1 Research Background and Significance 6 1.1.1 Research background 6 1.1.2 Research significance 6 1.2Research Status at Home and Abroad 7 1.2.1 Current status of foreign research 7 1.2.2Research state in China 7 1.3 Research content 8 1.4 Organizational structure of the paper 8 Chapter 2 Introduction to related technologies 10 2.1 Development Tools and Introduction 10 2.2 Java brief introduction 10 2.3 Spring Boot 11 2.4 LayUI 12 2.5 Spring Data JPA 12 2.6 Bootstrap 13 2.7 ECharts 13 Chapter 3 System Analysis 15 3.1 Feasibility analysis of the system 15 3.1.1 Economic feasibility 15 3.1.2 Technical feasibility 15 3.1.3 Availability of software 15 3.2 Requirements analysis 16 3.3 Demand Analysis 16 3.3.1 Functional requirements 16 3.3.2 Non-functional requirement 17 3.4 Object-Oriented Analysis 18 3.4.1 Use case analysis 18 3.4.2 Use case description 19 3.5 Main function analysis 22 3.5.1 User login module 22 3.5.2 Scenic Spot Query Module 23 3.5.3 Hotel booking module 23 Chapter 4 System Design 24 4.1 System design principle 24 4.2 Overall Design 24 4.3 Detailed design 25 4.3.1 System overall flow chart 25 4.3.2 User login process design 26 4.3.3 User Password Encryption Process Design 27 4.3.4 User view the process design of the attraction 28 4.3.5 Administrator Scenic Spot Management Process Design 29 4.4 Database Design 31 4.4.1 Database concept design 31 4.4.2 Database Logical Design 33 4.4.3 Database Table Design 33 Chapter 05 System Implementation 36 5.1 System login and registration 36 5.1.1 User login 36 5.2 System Front-end Function Preview 36 5.2.1 Home Implementation 36 5.2.2 Implementing Traveling Shadows 37 5.2.3 Travel Hotel Implementation 38 5.2.4 Implementation of the Ordering Page 38 5.3 System Backend Function Preview 39 5.3.1 Administrator Backend Homepage 39 5.3.2 Administrator User Management 40 5.3.3 Administrator weather query 40 Chapter 06 System Testing 42 6.1 Test purpose 42 6.2 Functional Testing 42 6.2.1 User Login Test Case 42 6.2.2 Administrator Hotel Management Test Case 43 6.2.3 Administrator Travel Album Test Case 43 6.3 Non-functional Testing 43 6.4 Test Results 43 6.5 Test summary 44 Conclusion 45 References 46 Acknowledgments 48
Research Background and Significance
Today, the information technology revolution is profoundly transforming traditional tourism. We now live in an environment saturated with data and information, and the development of the Internet has made the dissemination of data even more extensive. The growth of various industries must be based on the Internet. The call for ”Internet+” has become a trend of the times. With social progress, basic needs have been met, and the slogan of enriching one’s life has been put on the agenda. China’s tourism industry is developing rapidly, and it must seize the tide of the times, integrating tourism with the Internet to achieve a reformation in the industry. It is evident that the role of big data in tourism is becoming increasingly important. Big data can accurately and timely collect various tourism information, which helps leave a deeper impression on tourists and allows them to better experience local culture. It is no exaggeration to say that the tourism industry is increasingly showing a trend of ”traveling in the Internet world.”.
1.1.2 Research significance
The trend is for the tourism industry to establish its own e-commerce websites, which can address the needs of tourists that traditional tourism cannot meet. Additionally, as a comprehensive ecosystem, the tourism industry encompasses travel services, accommodation, and attractions. By leveraging the Internet, these elements can be integrated into a cohesive whole, significantly enhancing business growth and service quality. For most small and medium-sized tourism companies, this approach can quickly reduce costs, expand operations, and foster collaboration. Research indicates that the integration of tourism with the Internet has already led to a thriving landscape.
Research Status at Home and Abroad
Particularly with the rise of online technologies and the growing demand for digital solutions in the travel business, the creation of tourism websites has acquired great pace in foreign nations in recent years. Globally, there has been a lot of focus on using contemporary models including Spring Boot to create user-friendly, scalable, efficient travel systems. Spring Boot’s resilience, microservices compatibility, and seamless connection with other technologies like React and Angular for front-end development have led nations including the United States, the United Kingdom, and Germany front-edge adopters of the tool [1] . Modern tools include real-time booking systems, AI-driven personalized suggestions, and interactive maps driven by APIs like Google Maps are increasingly included into many foreign travel websites. Foreign research has also given great attention to improving security measures, guaranteeing data privacy compliance with laws like GDPR, and improving website performance by means of cloud-based installations on systems like AWS and Azure. Moreover, big data analytics and machine learning combined with tourism websites have been extensively investigated overseas to enhance consumer experience via predictive analysis and dynamic pricing models. Overall, overseas study shows a mature ecosystem where Spring Boot-based tourism websites are not only functional but also contain modern technologies to satisfy the changing needs of worldwide visitors.
Driven by the government’s push for digital transformation and the rapidly expanding domestic travel sector, research and development of tourism websites based on Spring Boot has seen explosive expansion in China. Because of its simplicity, quick development capabilities, and interoperability with other Java-based technologies, Chinese academics and developers have been progressively using Spring Boot. Given the large user population and prevalence of cellphones in the area, Chinese tourism websites may stress high concurrency handling and mobile-first design, compared to foreign competitors [2] . Many domestic sites, including Ctrip and Qunar, have set standards by including social media sharing, seamless payment channels (Alipay, WeChat Pay), and localized content to improve user involvement. Using tools like Dubbo and Spring Cloud to increase system dependability and scalability, academic research in China have also investigated the optimization of Spring Boot programs in distributed contexts. Notwithstanding these developments, numerous issues still exist, including the necessity of improved internationalization support, more adherence to global security standards, and more integration of AI-driven capabilities. Still, China’s research on Spring Boot-based tourism websites is developing quickly in response to strong market demand and ongoing technological innovation, trying to close the gap with international norms and meet local user preferences and business needs.
Research content
This project consists on an e-commerce travel website meant to help users check hotels and attractions. This trip website mostly consists in functional modules including travel photo album management, attraction management, weather control, etc. Dividing the functional parts will help the website to maximize its utilization and produce the greatest user experience for consumers [3] . The system employs MySQL for data storage and Intellij IDEA programming tools for code debugging and operation mostly. Based on present consumer behavior and the available development tools, this project concept aims primarily to combine the internet with travel.
1.4 Organizational structure of the paper
Six thorough chapters, each concentrating on a different facet of the research and development process, make up this work. The introduction to the subject is Chapter 1. It starts with a review of the background and the relevance of the selected study area, therefore stressing why the topic is relevant in the framework of present technological developments. It also examines current local and global development, pointing up areas of need and disparity. This chapter also shows the primary goals and extent of the research, therefore offering a clear road map of the work to be done. It ends by outlining the development tools, platforms, and programming environments used all through the project [4] . The technical underpinnings and system development technologies applied in the project’s implementation will be the main topics of Chapter 2. It addresses the fundamental technologies, systems development supporting tools, programming languages, and frameworks. This covers hardware as well as software components and clarifies their interaction to create a coherent system. Chapter 3 explores the project’s analytic stage. It starts with a thorough analysis of the functional needs of the system, therefore delineating what it is supposed to achieve. A feasibility analysis assessing the technical, financial, and operational viability of the proposal comes next. Additionally included in the chapter is the creation of system flow charts to graphically depict the logical framework and workflow of the system operations. System design’s guiding ideas are covered in Chapter 4. It covers the general architectural framework, the breakdown and design of functional modules, and the precise database construction. This chapter covers the interactions among several modules, their design justification, and system data storage, access, and management. A careful walkthrough of the user interfaces of the system is given in Chapter 5. It provides detailed directions on how to run every interface properly and clarifies their functioning and goal. This chapter seeks to guarantee that end users can effectively negotiate and use the system. System testing takes up Chapter 6. It covers the goals of the testing phase, together including the test strategy, approach, and surroundings. It lists the particular test cases employed, the techniques followed, and the findings gained. This guarantees that the system functions dependably under several conditions and satisfies the expected needs. At last, the report ends with a thorough overview of the research results, a commentary on the findings, and possible future activity.
2.1 Development Tools and Introduction
Table 2-1 Line Shadow network system development tools and environment
| Programming language | Java/Jsp/Html |
| Database System | MySQL |
| Develop software | IntelliJ IDEA/Tomcat |
| Front desk framework | LayUI/Bootstrap |
| Backend framework | Spring Boot |
2.2 Java brief introduction
Java is a new programming language developed by Sun Microsystem company. Its excellent features such as simplicity, object-oriented and platform-independent make it stand out in the context of already rich high-level languages and become the first programming language for computer and non-computer majors [5] . Java consists of four components: The Java programming language, the Java class file format, the Java virtual machine, and the Java application programming interface. Each Java program involves all four aspects during runtime, and an integrated development environment is typically used for this purpose. The characteristics of the Java language make it widely applicable across different platforms, while Java technology and the Java virtual machine ensure its cross-platform compatibility. The Java architecture is shown in Figure 2-1:
Figure 2-1 Java architecture diagram
2.3 Spring Boot
Spring Boot can be considered one of the more influential projects in Spring and even the entire Java community in recent years. Spring Boot is a framework management tool that is easy to create and based on enterprise-level development, with several excellent features: the created Spring applications are independent, internally embedded with Tomcat and Jetty, providing fixed launchers to simplify build configurations, automatically integrating Spring MVC and Spring, simplifying Maven configurations, offering external observation mechanisms and external mechanisms [6] . The biggest feature is that it simplifies the integration, configuration, and development of Spring applications. Spring Boot The overall system architecture is shown in Figure 2-2:
Figure 2-2 Spring Boot Overall system architecture
2.4 LayUI
LayUI is a front-end UI framework that closely mirrors the syntax of HTML, CSS, and JS. Front-end developers can easily understand and use this framework, making it very user-friendly. Despite its simplicity, LayUI is robust and feature-rich, with each component meticulously crafted to ensure high-quality development. The framework has been rigorously tested over time and through software development, proving its suitability for system front-end page development [7] . The custom template of LayUI basically makes a basic permission button after copying a page, and more than 70% of the code for adding, deleting, modifying and checking can be directly used. The reference of LayUI is very simple. When we use it, we can directly refer to the files downloaded from the page, and only need to refer to CSS and JS.
2.5 Spring Data JPA
Spring Data JPA is part of the larger Spring Data family, making it easier to implement JPA-based repositories. This module provides enhanced support for the JPA-based data access layer, which makes it easier to build applications using Spring’s data access technology stack [8] . Spring Data JPA is so powerful that it simplifies the development of data persistence layers, requiring only the declaration of an interface. For example, if a developer declares a findUserById0 method, Spring Data JPA can determine that this method queries for User objects based on a given ID condition, without the developer needing to worry about the implementation details; all of this is handled by Spring Data JPA in the [6]. Java Web API the association diagram is shown in Figure 2-3:
Figure 2-3 Java Web API correlation diagram
2.6 Bootstrap
Bootstrap is written by American software designers and serves as a front-end framework. It is a framework related to HTML, CSS, and other elements, characterized by its fast, simple, and intuitive language style, making it highly suitable for Web development. It includes many components for building responsive websites, such as the 12-grid system, basic layout components, and jQuery. Among the CSS components, there are numerous widgets like list groups, progress bars, and Icon, all of which can be used directly [9] . It has significant advantages in quickly creating aesthetically unique responsive websites and is compatible with most mainstream browsers’, including Google Chrome and Firefox. Bootstrap The overall architecture is shown in Figure 2-4:
Figure 2-4 Bootstrap Overall architecture
2.7 ECharts
ECharts are a JavaScript chart library. It fits most browsers and is easily available on both PCs and mobile devices. ECharts consist of a core library, components, and chart classes that let one directly utilize several data types without conversion. This collection features specialized charts for several disciplines in addition to standard charts such K-line charts and pie charts. An open-source, potent data visualization tool, e-charts fit the big data era. This incredibly flexible, high-performance JavaScript chart library makes data more vibrant, charts more brilliant, and interactions more user-friendly, therefore improving user experience and making usage more convenient. It practically beats all free chart tools. ECharts are driven by data; so, using dynamic data is also rather simple since changes in charts correspond with changes in data [10] . All we have to do is gather the data and enter it; ECharts will enable us to compare several sets of data and subsequently show the changes using suitable animations. Echarts the chart library is shown in Figure 2-5:
Figure 2-5Echarts Chart library
Chapter 3
3.1 Feasibility analysis of the system
In order to meet the needs of social development and economic benefits, the design and development of tourism websites should be based on this, find the common ground between the website and social development, and develop together [11] . In the Internet era, it can meet the needs and demands of different users. The project has a low budget, and tourism is now closely integrated into people’s daily lives. The popularization of tourism offers promising prospects for the development of tourism websites. Moreover, the success of Ctrip and Elong has paved the way for the practical implementation of such ideas, enabling significant profitability. This indicates that the website is viable and can be a profitable e-commerce project.
The system is developed using Java, a language known for its simplicity, ease of use, and user-friendliness. It utilizes an open-source framework, which requires only local installation and configuration to run the program, eliminating the need for complex software deployment [12] . The front-end of the system primarily uses Bootstrap, while the back-end is based on the Spring Boot framework. I have already mastered these technologies during my graduation project, which allows me to resolve any technical issues encountered in developing this website and to deepen my understanding of the back-end framework.
The availability of software refers to whether the software can provide certain help to users and whether users can achieve their expectations in the process of use. Predictive: Administrators can predict the trend of travel destinations in a short period of time by using historical browsing data of users and published data of the company, so as to help tourists make relatively accurate choices to get better enjoyment. Record: The order transaction information is recorded in the background of the website so that it can be extracted in time when needed [13] . Monitoring: real-time monitoring of useful information such as users’ travel intention and price intention, so as to make corresponding policies and policies. Convenience: By providing relevant information in a short time through several simple instructions from users, the convenience, effectiveness and accuracy brought by this software can be experienced more quickly.
3.2 Requirements analysis
The tourism system is a product of the increasing number of tourists. It is a set of network-based tourism systems put forward by people with improved modern material living standards and higher requirements for tourism and convenient and fast access to information. Since the development of the tourism industry, great changes have been made [14] . Although the tourism industry has shown a thriving scene, most people still have deeply ingrained mindsets that prevent them from fully keeping up with the current social development trends. Moreover, the atmosphere of nationwide tourism is not yet strong, and the development of the tourism industry faces many challenges. At the same time, due to the early stage of integrating tourism with the internet, various facilities are incomplete, planning is lax, and systems are underdeveloped, making it difficult to create a comprehensive and large-scale tourism website. Therefore, I designed a small and simple tourism website that will have basic functions of a typical tourism site. The entire system allows administrators, users, and visitors to operate easily, enhancing the appeal of actual attractions and making the browsing process standardized, quick, and accurate, thus demonstrating significant practical value. After the investigation of social people’s living habits and the mastery of my own technology, this system should have the following functions: (1) Background: The administrator enters the background to manage and maintain the whole system. Users cannot enter the background, and the administrator can add hotels, add scenic spots, view weather and other functions [9-11]. (2) Front desk: Users can register and log in by themselves; after registration, users can modify their basic information, change their passwords, etc.; they can browse the information of tourist attractions and hotels, and place orders according to their needs.
3.3 Demand Analysis
The purpose of this system is to meet the needs of tourism users and provide users with more convenient practical functions as far as possible. Its main functions are as follows: (1) Check hotel functions Before traveling, users log in to the website, click the hotel module, enter the scenic spots they want to go to, and search for the surrounding hotel conditions, including the location, price and layout of the hotel. (2) View the attraction function Before traveling, users can log in to the website, click on the scenic spot module, enter the place they want to go, and search for the surrounding scenic spots, the overview of the scenic spot, the evaluation of the scenic spot, and the recommendation index. (3) View travel photo album function Users can log in to the website and click on the travel album to view the beautiful scenery and famous tourist attractions of different travel destinations. (4) Order function After viewing the attractions and hotels, users can place an order if they feel satisfied. (5) Check the weather function After checking the weather, the administrator can use the carousel message to push some suitable travel attractions to users and tourists, and provide constructive suggestions to users and tourists. (6) Online evaluation function After the user consumes, they can evaluate the scenic spot online, so that the administrator can provide better scenic spot service. (7) Add a message function If users are not satisfied or have any unpleasant things happen during the process of consumption, they can enter the contact us page through this website and give constructive suggestions to the website.
For the design of travel website, Tomcat8.0 is used for the server, and the system adopts the Windows10 operating system. MySQL is used for database management to organize and optimize various data in detail. For the front-end web pages of tourism website, we primarily use Bootstrap, while also incorporating other relevant front-end technologies. The structure is simple, the logic clear, and it combines aesthetics with practicality, making it easy for users to operate and use. The back-end adopts a Spring Boot architecture, using SpringDataJpa to simplify the data access layer. The architectural pattern is MVC, and project management uses Maven, among others. This allows for timely updates to database-related technical code, minimizing click response times as much as possible, providing a good user experience for both administrators and users.
3.4 Object-Oriented Analysis
(1) Administrator use case analysis When the administrator of the website enters the account and password to log in to the system, he can operate the background of the website, such as the operation of the travel album module, so as to monitor the entire travel website and solve the problems encountered in the operation of the website. The administrator operating system use case analysis diagram is shown in Figure 3-1: Figure 3-1 Administrator Operating System Use Case Analysis (2) User case analysis Through this website, users can modify personal information, view hotels, view attractions, view travel albums, place orders, check the recent weather conditions and other operations. The user use case analysis diagram is shown in Figure 3-2: Figure 3-2 User use case analysis diagram (3) Tourist use case analysis When the unregistered visitors browse the tourism website, due to the permission restrictions, the visitors can only use some unrestricted functions. The user case analysis diagram is shown in Figure 3-3: Figure 3-3 Tourist use case analysis
(1) The administrator login example is described as shown in Table 3-1: Table 3-1 Administrator login example description table
| Participant | Administrator |
| Identifier | 001 |
| Use case description | The website administrator logged into the system backend. |
| Priority | 1 |
| Prerequisite | The backend of the Tourism website is running normally. |
| Postconditions | When the website administrator successfully logs into the system, they can perform operations on the entire system backend, such as viewing the weather, adding hotels, adding travel photo albums, and other functionalities. However, if the login is unsuccessful, they will not be able to perform the above operations and will need to log in again or cannot use this website. |
| Basic Operations | 1. The system administrator enters the system. 2. The administrator inputs the username and password. 3. Submits the user information. 4. The system information is verified. 5. The administrator performs operations on the system. |
| Optional operation process | 1. The administrator first registers, enters verification information to log in, and manages the system. 2. The verification information entered by the system administrator is incorrect; re-enter the correct information to log in smoothly and manage the system. 3. The system administrator forgets the password, verifies it through the phone, retrieves the password, and enters the correct verification information to log in and manage the system. |
(2) The administrator manages user information use case description is shown in Table 3-2:
Table 3-2 User Information Management Description Table
| Participant | Administrator |
| Identifier | 002 |
| Use case description | In the user management interface, find the user information that needs to be deleted and delete it. |
| Priority | 2 |
| Prerequisite | Website is operating normally. |
| Postconditions | If the administrator finds the corresponding user information, they can perform operations on that user information. However, if the user information cannot be found, an error message will be displayed, prompting to search again. |
| Basic operation flow | The administrator successfully logged into the system homepage. Click on the user management menu to delete a user. After confirming the user’s information, click the confirm button to display the operation’s success. Click return to go back to the homepage |
| Optional operation process | 1.User information can be modified 2.User information can be deleted |
(3) The use case description of users querying scenic spot information is shown in Table 3-3:
Table 3-3 User query scenic spot information description table
| Participant | User |
| Identifier | 003 |
| Use case description | On the attraction’s introduction page, search for the attractions that the user needs. |
| Priority | 3 |
| Prerequisite | website is operating normally. |
| Postconditions | If the keywords for the attraction entered by the user are correct, then retrieve all related information about the attraction, perform calculations and analysis, and present it to the user for review. |
| Basic operation flow | 1.The user enters the website 2Enter the scenic spot to inquire 3.Submit the input information 4.The system performs valid verification of the submitted information. 5.Display the information of the queried scenic spot. |
| Optional operation process | 1.Enter the name of the scenic spot. If the information you are looking for cannot be retrieved, please re-enter the correct scenic spot information. 2.Select the hotel information to inquire. |
(4) The use case description of user hotel information query is shown in Table 3-4:
Table 3-4 User query hotel information use case table
| Participant | User |
| Identifier | 004 |
| Use case description | Query hotel information through the known hotel name. |
| Priority | 4 |
| Prerequisite | Website is operating normally |
| Postconditions | If the hotel name entered by the user is correct, retrieve all related information, perform calculations and analysis, and then present it to the user for review. |
| Basic operation flow | 1. User enters the travel website 2. Inputs the hotel to be queried 3. Submits the input information 4. The system performs effective validation of the submitted information 5. Displays the information of the queried hotel |
| Optional operation process | 1. If the hotel name you entered cannot retrieve the required hotel information, please re-enter the correct hotel information. 2. Select the information of the hotel to query. |
3.5 Main function analysis
The user login module of this system is a prerequisite for placing orders on this website. Before logging in, users must register using their mobile phone number. By receiving the verification code sent by the website via their mobile phone, users can ensure the security of their personal information. After registering, users should enter their personal details, such as email, password, and age, to become a registered user and log in directly.
The scenic spot query module of this system is a vital tool for users to find information about scenic spots. When browsing the Xing Ying Travel website, users can browse through the recommended attractions, sort by ticket price (from highest to lowest or from lowest to highest), or by rating (from highest to lowest). If you find an attraction that catches your eye, you can quickly click the button next to it to access the detailed introduction page. On this page, you can find detailed information such as location, reviews, ticket prices, remaining tickets, ratings, and recommendation scores. Alternatively, you can perform a fuzzy search using keywords related to the attraction to find all relevant sites, or directly query the attraction to get detailed information, allowing you to learn more about it.
The hotel reservation module of this system is designed to help users avoid wasting time during their travel. There are two methods for booking a hotel: After users have reviewed the attractions on the website and placed an order, if there are recommendations for nearby hotels under the attraction, they can click on the hotel details to view information such as the hotel’s price, rating, reviews, layout, and address. Alternatively, users can choose another method by directly selecting a hotel based on their personal needs, visiting the hotel’s details page to check the relevant information, and deciding whether to proceed with the booking.
Chapter 4
4.1 System design principle
System design is the subsequent step after requirement analysis. It starts from the perspective of the functions to be implemented in the system, determining the design principles and methods. Consideration must be given to the design environment, the design operations, and human factors. From the beginning of the design to its completion, it should be divided into several stages or subsystems. After completing each stage, a summary should be made to identify any gaps and deficiencies, integrating each stage to achieve the optimal system, thus ensuring that the design and development of the system can be carried out effectively.
4.2 Overall Design
First, the banking and financial system can be designed into two major modules: the front-end design module and the back-end design module. Then, determine the design philosophy of these major modules, along with the frameworks, technologies, and languages to be used. Bootstrap technology should be utilized in the front-end pages to enhance user interaction. The back-end will use Spring Boot as the base framework to ensure the website’s operational speed and security. A MySQL database will be used to persist user data, ensuring data security. Additionally, Apache Tomcat 8 will serve as the application server to ensure a good user experience during peak traffic times. It is also determined that three roles will be included. First, users and visitors log into the website’s front-end interface. Users can perform various permissions, including viewing attractions and hotel functions, placing orders for attractions and hotels, and viewing photo albums. Visitors can only view attractions, hotels, and photo albums. To perform other operations, visitors must first register as a user and log in. The second is the operational platform for backend administrators, which manages and monitors the entire website’s operations through backend operations. Therefore, the backend is managed uniformly by administrators, which is essential for the website’s smooth operation. It allows for the management of all website functions, including operations related to attractions and hotels, ensuring the website operates smoothly and stably. The system function module is shown in Figure 4-1: Figure 4-1 System overall structure diagram
4.3 Detailed design
After entering the main interface of the system, there are five modules to choose from, which are scenic spot module, hotel module, album module, order module and contact us module. Users can select one of these modules and carry out different operations through the selection of this module. You need to select one of the modules. When you choose the ’Scenic Spots’ module, you can search for and view detailed information about the scenic spots you are interested in. In the hotel module, you can search for and view detailed information about the hotels you are looking for. In the travel photo album, you can browse through recommended scenic spot photos. If you find a scenic spot that suits your preferences, you can place an order directly if there are available tickets. Similarly, if you find a suitable hotel, you can also place an order directly. On the contact us page, you can leave messages for the website and view its introduction, providing feedback to help improve the website’s services. The overall flow chart is shown in Figure 4-2: Figure 4-2 Overall Flowchart
On the top right corner of the system’s homepage, you can see the user login and registration buttons. Click on user login to enter the user login interface. Enter the mobile phone number or username you registered with, along with the corresponding password, and input the correct verification code. If the username and password you entered are correct, you will be logged in successfully; otherwise, the login will fail. The login password uses the latest time encryption algorithm, and the plaintext is encrypted upon storage. Upon successful login, user information is automatically stored in the Redis cache. On the second login, the user can quickly access the front-end page. After logging in successfully, the user’s personal information and order status will be displayed in the upper right corner of the front-end. The user login process is shown in Figure 4-3: Figure 4-3 User login flow chart
The website uses the Bcrypt encryption algorithm from spring security3 for user password encryption. The salt in this algorithm is randomly generated based on time, making it more secure and superior to the md5 encryption algorithm. The process involves first obtaining the password entered by the front-end user, then initializing the encryption process with the obtained password. Next, the initialized password is encoded, and a security signature is generated. Finally, the password with the generated signature is checked to ensure successful encryption. If the encryption is successful, the password is stored in the database. At this point, the password in the database is the encrypted version. If the encryption fails, the process of initializing the encryption, encoding the password, and generating a security signature is repeated until the encryption is successful, at which point the password is stored in the database. The decryption process is the opposite of the encryption process. The encrypted password is obtained from the database, the security signature is verified, and then the reverse coding is performed to match the decompiled password with the user’s input password. If the input password is consistent, the user’s input password is successful; otherwise, the user’s input password is incorrect. The user password encryption process is shown in Figure 4-4: Figure 4-4 User password encryption flow chart
The user’s scenic spot query process: When users enter the USUF Travel page, they will see a search bar on the page. This search supports fuzzy queries, allowing users to find the corresponding scenic spot name by entering a fuzzy name of the scenic spot. If the entered scenic spot does not exist, the search returns an empty result; if it exists, it returns the results of the fuzzy query. When users click on the relevant scenic spot, they can view detailed information about the scenic spot. Detailed information about the attraction, including the price of the attraction, the name of the attraction, the ticket price of the attraction, the inventory of the attraction, and the introduction of the attraction. In the lower column of the attraction details, there will be recommendations for hotels related to the attraction. If you do not click to see details, you will stay on the page of the attraction after the query. The user viewing function of the scenic spot is one of the most important functions of this website, and also the original intention of developing this system. By setting this function, the purpose of making profits can be achieved, the operation cost of the website can be maintained, and the benefit can be brought to the society. The process of users viewing attractions is shown in Figure 4-5: Figure 4-5 User Viewing Scenic Spot Flowchart
The process for the administrator’s scenic spot management module is as follows: when the administrator logs into the system backend and clicks on the scenic spot settings in the scenic spot management module, a list of existing scenic spots and an option to add a new one will appear. Click the add scenic spot button to add a new scenic spot. This involves uploading relevant images, entering the name of the scenic spot, setting the ticket price, inventory quantity, usage time, and providing an overview and detailed description. Once all information is entered, the administrator can proceed with the addition. If the administrator chooses not to add the scenic spot, they can return to the main page. However, when uploading images, it is important to check the file size, as the code has specific requirements for image sizes. The images must meet these strict requirements; otherwise, the image upload will fail, and an error message will appear on the page. When you perform the operation to list attractions, the page will display detailed information about the attractions. You can search for attractions directly through the search bar. If you do not want to search, you can return to the main page. If you wish to modify an attraction, click on the corresponding edit button to update its content. If you do not wish to make changes, you can return to the main page. If you wish to delete an attraction, click on the corresponding delete button to execute the deletion. If you do not wish to make changes, you can return to the main page. By managing the scenic spot function modules on the backend website, administrators can monitor the trends in modern tourism in real time, quickly and sensitively understand public sentiment, and thus add or modify relevant content about scenic spots. This enhances services for users and tourists, improves all scenic spots on the website, makes the service more comprehensive and considerate, boosts the website’s competitiveness in the tourism industry, and ultimately creates the greatest economic value for the website. The administrator’s scenic spot management process is shown in Figure 4-6: Figure 4-6 Administrator scenic spot management flow chart
4.4 Database Design
In the database design of this system (1) User entities mainly include: number, name, password, gender, mobile phone number, email, age, salt. The attribute diagram of user entities is shown in Figure 4-7: Figure 4-7 User Entity Attribute Diagram (2) The attractions’ entities mainly include: attraction name, number, price, photo description, ticket price, city, recommendation index, reviews, playtime, number of days to visit. The physical property map of the attraction is shown in Figure 4-8. Figure 4-8: Entity Attribute Diagram of Scenic Spots (3) The hotel entity mainly includes: hotel name, number, price, description, room type, star rating, check-in time, address, and number of nights. The physical attribute diagram of the hotel is shown in Figure 4-9. Figure 4-9 Hotel Physical Attribute Diagram (4) The album entity mainly includes: album number, title, photos, comments, and city. The attribute diagram of the album entity is shown in Figure 4-10 Figure 4-10 Album Entity Attribute Diagram (5) The order entity mainly includes: order number, attraction number, user number, quantity, total price, status, payment time, phone number, name, attraction name. The entity attribute diagram of the order is shown in Figure 4-11: Figure 4-11 Order Entity Attribute Diagram
The entities of the travel website system include users, administrators, attractions, hotels, photo albums, and orders. After logging into the travel website, users can browse travel photo albums, view some famous scenic areas, search for attractions, find the places they want to visit, and place orders. At the same time, they can also find hotels around the attractions and make selections. E-R diagram is shown as 4-12: Figure 4-12 E-R Diagram
(1) User table, used to store personal information of users, the structure of this table is shown in Table 4-1: Table 4-1 User Related Information Table
| id | varchar | varchar | 0 | 1 |
| name | varchar | 120 | 0 | 0 |
| password | varchar | 64 | 0 | 0 |
| mobile | varchar | 120 | 0 | 0 |
| varchar | 32 | 0 | 0 | |
| sex | char | 32 | 0 | 0 |
| age | char | 16 | 0 | 0 |
| salt | varchar | 64 | 0 | 0 |
(2) Attraction table, used to store related information about attractions, the structure of the attraction table is shown in Table 4-2:
Table 4-2: Information Table Related to Scenic Spots
| id | varchar | 64 | 0 | 1 |
| name | varchar | 64 | 0 | 0 |
| Img | varchar | 120 | 0 | 0 |
| price | decimal | 10 | 0 | 0 |
| Description | varchar | 120 | 0 | 0 |
| comment | varchar | 200 | 0 | 0 |
| stock | int | 32 | 0 | 0 |
| start | int | 12 | 0 | 0 |
| country | varchar | 32 | 0 | 0 |
| startdate | datetime | 0 | 0 | 0 |
(3) Hotel table, used to store relevant information about hotels, the structure of the hotel table is shown in Table 4-3:
Table 4-3 Hotel Related Information
| id | varchar | 120 | 0 | 1 |
| img | varchar | 120 | 0 | 0 |
| name | varchar | 64 | 0 | 0 |
| price | decimal | 10 | 0 | 0 |
| Description | varchar | 255 | 0 | 0 |
| bed | int | 10 | 0 | 0 |
| day | int | 10 | 0 | 0 |
| star | int | 10 | 0 | 0 |
| startdate | datetime | 0 | 0 | 0 |
| addr | varchar | 120 | 0 | 0 |
(4) The order table is used to store relevant information about orders. The structure of the order table is shown in Table 4-4:
Table 4-4 Order Related Information Table
| id | varchar | 120 | 0 | 1 |
| scenicid | varchar | 120 | 0 | 0 |
| userid | varchar | 120 | 0 | 0 |
| quantity | int | 11 | 0 | 0 |
| payment | decimal | 10 | 0 | 0 |
| status | varchar | 32 | 0 | 0 |
| paytime | datetime | 0 | 0 | 0 |
| phone | varchar | 255 | 0 | 0 |
| username | varchar | 255 | 0 | 0 |
| scenicname | varchar | 255 | 0 | 0 |
(5) Album table, used to store information related to the album. The structure of the album table is shown in Table 4-5:
Table 4-5 Album Related Information Table
| id | varchar | 120 | 0 | 1 |
| img | varchar | 120 | 0 | 0 |
| title | varchar | 64 | 0 | 0 |
| comment | varchar | 120 | 0 | 0 |
| city | varchar | 64 | 0 | 0 |
5.1 System login and registration
The user login module uses a mobile phone number for registration, ensuring each user has a unique identifier. The website’s login page includes fields for entering the username or mobile phone number, a password, a graphic captcha, and options to forget the password. Since social accounts are only available to enterprise users, this page is used as an experimental project and does not have any practical functions. If a user forgets their password, they can verify their email using the email address they previously registered with, which can be set by the user in advance. The login interface is shown in Figure5-1:
Figure 5-1 User login interface
5.2 System Front-end Function Preview
The homepage of the Tourism Travel Network is the portal of the entire system. It features a news carousel, global search, attraction recommendations, and big data survey functions. The news carousel is managed by administrators, who can use it to publish special announcements and promotional travel activities. In the menu bar, there are different tabs, and users can select various pages according to their needs. The interface of the homepage is shown in Figure 5-2:
Figure 5-2: Interface Diagram of the Home Page
Travel Shadow is the core of the system, containing all the travel information of the website. Users can make corresponding travel purchases through the Travel Shadow operation page. This page features functions such as attraction search, attraction pagination, attraction price sorting, and rating sorting. Users browsing the Travel Shadow website can consult relevant information according to their actual needs and decide whether to make a purchase. The interface for introducing attractions is shown in Figure 5-3:
Figure 5-3 Scenic Spot Introduction Interface Diagram
The travel hotel provides the functionality for hotel booking, with features such as maps, search, and sorting available on this interface. Its specialty lies in the ability to match and recommend hotels based on the location of attractions. When a user selects an attraction, the system will recommend nearby hotels. After the user selects their desired attraction, the site will recommend several hotels suitable for that user to stay, allowing users to operate according to their needs. Users can also search for hotels themselves, providing a comprehensive service to meet customer needs. Users can view detailed information about the hotel, such as prices, ratings, stars, etc.
The traveling hotel page is shown in Figure 5-4:
Figure 5-4 Hotel Page Image
When users select a scenic spot during their travel with the app, they enter the order page. On the scenic spot order page, users can accurately see the images, prices, star ratings, remaining ticket quantities, and past user reviews for the spot. Users can only place an order immediately after logging in; tourists must register as website users in order to place an order. If the quantity of tickets selected exceeds the stock quantity, the system will notify that the stock is insufficient. Users can only successfully place an order once the order conditions are met.
The detailed order interface is shown in Figure 5-5:
Detailed Order Interface Figure 5-5
5.3 System Backend Function Preview
After the administrator enters the system through the admin portal, they can access the main page. On the left side of the backend main page of the tourism management system is a list of functions that the administrator can manage, including attraction management, album management, weather viewing, and other functions. On the right side of the page, there is a specific display image concerning these functions, detailing the specific applications within that functional module. Below is a statistical chart of order quantities, which is processed from the data in the backend database, returning the processed data to the frontend for the Echarts data flow. This is rendered into a chart to finally create an Echarts bar-line graph. This graph reflects the order quantity for the year and the ratio of male to female users making purchases, clearly showing the sales situation for each month, making it convenient for the administrator to make reasonable price adjustments. The chart clearly reflects the sales situation for each month, making it convenient for the administrator to make reasonable adjustments to the prices. The administrator homepage is shown in Figure 5-6:
Figure 5-6 Admin Homepage Image
In the implementation of the user list function, the right side displays the personal information of users who have registered on this website. Administrators can view user information, which facilitates related management and operations.
The administrator user management interface is shown in Figure 5-7.
Figure 5-7 Admin User Management Interface
6.1 Test purpose
Testing is a necessary step taken as the system nears completion, aimed at avoiding unnecessary operations and thus preventing users from suffering unnecessary losses. The goal of testing is to ensure the website operates smoothly. During the manual programming process, errors are inevitable, which underscores the importance of testing to identify and correct issues in the website, presenting the best version to users and visitors, thereby maximizing efficiency. Figure 6-1 Testing use-case
6.2 Functional Testing
The core of software testing is testing cases, and test cases remain the standard for measuring testing efficiency and software quality. A good test case can not only guide the behavior of testers but also help them correct mistakes made during the testing process. However, the design of test cases is often influenced by many additional factors, such as the technology used, the testing methods employed, and the quality of the testers themselves. Therefore, when creating test cases, one should carefully consider various factors.
Functional testing of user login can ensure that the user login feature works properly. The user login test case table is shown in Figure 6-1: Table 6-1 User Login Test Cases
| Correct username | Correct password | Can log in normally |
| Incorrect username | Incorrect password | Cannot log in properly |
| Correct username | Incorrect password | Cannot log in properly |
| Incorrect username | Correct password | Cannot log in properly |
Testing the hotel management functions for administrators can ensure that the hotel management functions are used properly. The test case table for administrator hotel management functions is shown in Figure 6-2:
Table 6-2 User Login Test Cases
| Add hotel feature | Add a hotel in the backend | The front desk shows the added hotels. |
| Modify hotel functions | Modify the added hotels in the background. | The front desk displays the modified results. |
| Delete hotel function | Delete the added hotel in the background | The hotel at the front desk has been deleted. |
For the administrator to conduct functionality testing of the travel album, it ensures that the travel album features are functioning properly. The test case table for the administrator’s travel album functionality is shown in Figure 6-3:
Table 6-3 Administrator Travel Album Test Case
| Add album feature | Add a picture in the background | The image added is displayed at the front desk. |
| Modify album function | Edit a picture in the background | The image modified by the front desk is displayed. |
| Delete album feature | Edit a picture in the background | The front desk displays the deleted image. |
6.3 Non-functional Testing
The speed and response time of each function processing in the Tourism network system meet the testing standards. The user interface testing is mainly conducted from two aspects: page properties and operability. Since the pages of this system are very simple, users can operate them easily and quickly become familiar with the system for smooth operation.
6.4 Test Results
After testing the above test cases, it was found that all functions can operate normally, allowing users to use them as intended. Corresponding test records will be documented, and the test record table is shown in Figure 6-4: Table 6-4 Test Record Form
| User login | Through | Mao Xiaomeng | 2019-04-28 |
| The administrator adds hotel info | Through | Peng Ruili | 2019-04-28 |
| The administrator deleted the hotel information | Through | Zhang Jing | 2019-04-28 |
| The administrator modified the hotel information. | Through | Zhang Peipei | 2019-04-28 |
| Admin adds travel album pictures | Through | Liu Lin | 2019-04-28 |
| The administrator deleted the travel album pictures. | Through | Mao Xiaomeng | 2019-04-28 |
| Administrator edits travel album pictures | Through | Peng Ruili | 2019-04-28 |
6.5 Test summary
After a complete test of the USUF travel website, it was found that the test results also reached the expected goal we wanted, which indicated that the USUF website could be put into use. Testing the system can avoid wasting time and money. At this point, the USUF website was developed.