Chapter 2: Survey, analysis and system design: This chapter delves into the systemapproach built in the topic from the steps of survey, system analysis, database designand system interfa
Topic overview
Topic name
“BUILDING WEBSITE TRAVEL WITH YOU”
Introduce
Recent rapid advances in information technology have driven digital transformation across industries, and the tourism sector is no exception As IT applications continue to expand, the tourism industry is increasingly competitive, with companies and corporations vying to attract travelers, innovate, and secure a larger share of the market.
After two years of the Covid-19 outbreak, tourism has been nearly paralyzed worldwide The World Economic Forum estimates that the pandemic caused about 4.5 trillion USD in global GDP loss and more than 60 million jobs to disappear in 2020, making tourism one of the hardest-hit sectors By 2022, as the pandemic subsided and digital transformation solutions advanced in the tourism industry, it began to revive as a 'smokeless industry.' Consequently, adopting information technology in businesses is an urgent priority to improve management quality, boost online brand promotion to attract customers, and showcase Vietnam’s scenic destinations to travelers around the world.
This website solves the problem of quickly finding tourist attractions by delivering fast, convenient, and easy-to-use navigation It makes discovering and exploring attractions simple, so you can easily find what you’re looking for A simple visit lets you browse a wide range of destinations, compare options, and effortlessly choose the exact place you want to visit.
Project goal
Every page of the travel website should be built with essential components and a clean, consistent layout The color scheme and typography must be carefully chosen to enhance readability and create an inviting, travel-focused interface, since the user experience is paramount Navigation should be intuitive, content well-organized with a clear hierarchy, and call-to-action elements strategically placed to help visitors discover destinations, itineraries, and bookings quickly Arranging the pages properly and following solid UI/UX and SEO best practices will improve accessibility, load times, and search engine visibility, ultimately boosting engagement and conversions.
- The images of the places must be selected to be able to provide the user with the most realistic and beautiful images.
- Fast and convenient are important elements of a website So it needs to be optimized as best as possible to increase the user experience.
Research method
Doing: Based on the experience after travel trips of individual group members.
- Research method 2: Research over the Internet
Read information on travel forums, pages, and other travel websites.
Research existing web sites on pre-existing platforms.
Research method 1 Objective, honest Expensive, and may have differed from experience
Research method 2 - Easy to do
Not knowing the selection will mess up the information
Conclusion: Combining both methods but preferring to use method 3 to learn and research.
Layout Report
Following the introduction will include the following chapters:
- Chapter 1: Background presentation: Introduction of relevant theories and applied to building websites.
- Chapter 2: Survey, system analysis and design: This program delves into the approach system built in the topic from survey steps, analysis system, database and interface system system in account.
- Chapter 3: Building the basic web interface: Designing the interface system in the account.Conclusion and development orientation: Giving results and evaluating the system, developing orientation in the future system.
- Chapter 4: conclusion and development: List the things that have been done and the plans to do next with the project
THEORETICAL BASIS
Website overview
A website is a collection of web pages hosted under a domain or subdomain on the World Wide Web, with each web page an HTML or XHTML file accessible via the HTTP protocol Websites can be static, built from HTML files, or dynamic, powered by content management systems (CMS) running on servers.
Websites can be built in many different programming languages (PHP, Java ).
For a website to work, it needs 3 things:
- Website content or information database
1.1.2 What are the benefits of a website for businesses?
- Easily get feedback from customers
Today, a website is an indispensable tool for every business and individual in the digital era, providing a quick and effective way to advertise to internet users It is an easy-to-use platform to design and expand the target management system for any business and a critical step in implementing a company’s marketing strategy and digital marketing efforts For individuals, leveraging social networks alongside the website offers the simplest and fastest way to present all essential information about products and services, attract customers, and share detailed information about important partners.
Languages and technologies used
HTML (HyperText Markup Language) is the fundamental building block of the Web, defining the meaning and structure of web content It lays out how pages are organized for browsers to render, while CSS handles presentation and layout and JavaScript adds functionality and interactivity Together, HTML, CSS, and JavaScript form the core trio of technologies underpinning modern web development.
Hypertext refers to clickable links that connect web pages within a site or across different sites, creating the interconnected structure of the Web These links are a fundamental building block of online navigation, enabling users to quickly move between pages and discover related information By uploading content to the Internet and linking it to other pages, you actively participate in the World Wide Web and contribute to its expansive, searchable ecosystem.
HTML uses "markup" to annotate text, images, and other content for display in a Web browser HTML markup includes special "elements" such as , ,
, , , , ,
, , , ,
, , , , , , , ,
, ,
- ,
- and many others.
An HTML element is set off from surrounding text by tags, which consist of the element name enclosed in angle brackets (< and >) The name of an element inside a tag is case-insensitive, meaning it can be written in uppercase, lowercase, or a mix For example, the tag can be written as , , or in any other way, but the convention and recommended practice is to write tags in lowercase.
Cascading Style Sheets (CSS) is a stylesheet language that describes how documents written in HTML or XML—including XML dialects such as SVG, MathML, and XHTML—are presented It governs how elements render across screens, print, speech, and other media, giving web designers precise control over layout, typography, color, and overall visual styling.
HTML defines the structure and formatting of a web page, including elements such as paragraphs, headings, and tables; CSS enhances HTML by applying style to those elements—controlling colors, typography, spacing, layout, and overall appearance—without altering the content In short, HTML tells what content is, while CSS tells how it looks.
CSS is a fundamental web styling language standardized by the W3C across modern browsers, forming a cornerstone of open web development In the past, CSS specifications were developed in parallel, enabling versioning of proposals as they evolved This led to well-known milestones such as CSS1, CSS2.1, and CSS3 Unlike some expectations, CSS4 never became an official version Understanding these standards helps developers leverage browser-compatible styling and stay current with the evolving CSS landscape.
Since CSS3, the CSS specification has expanded dramatically, with progress varying across CSS modules This has made the development and release of separate proposals for each module more efficient Rather than versioning the CSS specification as a whole, the W3C now periodically takes a snapshot of the latest stable state, providing an up-to-date reference for developers and a steady path for CSS evolution.
JavaScript (JS) is a lightweight, versatile programming language that can be interpreted or compiled and features first-class functions It is prototype-based, multi-paradigm, and single-threaded, a dynamic language that supports object-oriented, imperative, and declarative programming styles, including functional programming Read more about JavaScript.
This section focuses on the core JavaScript language itself, rather than on Web page-specific features or other host environments For information about Web-specific APIs, please consult the Web API and DOM documentation.
The standards for JavaScript are the ECMAScript Language Specification (ECMA-262) and the ECMAScript Internationalization API specification (ECMA-
MDN's JavaScript documentation is anchored to the latest draft editions of ECMA-262 and ECMA-402, and when browsers implement proposals for new ECMAScript features, MDN's articles and examples may incorporate these newly available features to illustrate how the language works in practice.
Don't confuse JavaScript with the Java programming language Both "Java" and
"JavaScript" are trademarks or registered trademarks of Oracle in the United States and other countries However, the two programming languages have very different syntax, semantics, and usage.
- JQuery library, save time coding as well as provide functionality to interact with the DOM on different browsers.
- Nodejs, system running Javascript help out browser.
Font Awesome is the Internet's icon library and toolkit used by millions of designers, developers, and content creators It was created by Dave Gandy for use with Bootstrap and later integrated into BootstrapCDN It accounts for about 38% of the market share among sites that use third-party font scripts, placing it second behind Google Fonts.
Source-code editors be used
Visual Studio Code (VS Code) is a cross-platform source-code editor from Microsoft for Windows, Linux, and macOS It offers powerful features such as debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and built-in Git integration Users can tailor their workflow by changing themes, keyboard shortcuts, and other preferences, and by installing extensions that add new functionality.
In the Stack Overflow 2021 Developer Survey, Visual Studio Code was ranked the most popular developer environment tool, with 70% of 82,000 respondents reporting that they use it.
Visual Studio Code (VS Code) is a versatile source-code editor that supports a wide range of programming languages, including Java, JavaScript, Go, Node.js, Python, C++, and Fortran Built on the Electron framework, it enables developers to build Node.js-based web applications that run on the Blink rendering engine, delivering a fast, cross-platform experience The editor uses the Monaco code editor component—the same backbone behind Azure DevOps (formerly Visual Studio Online and Visual Studio Team Services)—providing a consistent development environment across Microsoft's developer tools.
Visual Studio Code offers out-of-the-box support for the most common programming languages, including syntax highlighting, bracket matching, code folding, and configurable snippets It also provides IntelliSense for JavaScript, TypeScript, JSON, CSS, and HTML, as well as debugging support for Node.js When you need broader language coverage, you can add freely available extensions from the VS Code Marketplace.
Visual Studio Code Insiders logo
Unlike a traditional project system, this editor lets you open one or more directories and save them as workspaces for quick reuse, making it a language-agnostic code editor that supports many programming languages Features vary by language, providing a tailored set of capabilities for each language, while you can exclude unwanted files and folders from the project tree via Settings Additionally, many powerful features are not exposed through menus but are accessible through the command palette, enabling an efficient workflow without navigating the UI.
Visual Studio Code can be extended through extensions available in a central repository, enhancing both the editor and language support These extensions enable adding support for new languages, themes, and debuggers, and they can also provide static code analysis and code linting via the Language Server Protocol, delivering a more powerful and customizable development experience.
Visual Studio Code comes with a built-in source control feature accessible via a dedicated tab in the activity bar, allowing you to manage version control settings and monitor changes to your project By linking VS Code to supported version control systems like Git, Apache Subversion, or Perforce, you can create repositories and perform push and pull requests directly from the editor This integration helps you track code history, review diffs, and collaborate efficiently within a single development environment.
PhpStorm is a proprietary, cross-platform IDE (integrated development environment) for PHP, built by the Czech Republic-based company JetBrains.
PhpStorm provides an editor for PHP, HTML, and JavaScript with on-the-fly code analysis, error prevention, and automated refactorings for PHP and JavaScript code Its code completion supports PHP versions 5.3 through 8.1 for both modern and legacy projects, covering generators, coroutines, the finally keyword, list in foreach, namespaces, closures, traits, and short array syntax It also includes a full-featured SQL editor with editable query results.
PhpStorm is a Java-based IDE for PHP development that can be extended through a rich plugin ecosystem Users can install plugins created for PhpStorm or write their own plugins to tailor the IDE to their workflow The software also integrates with external tools like XDebug, enabling seamless debugging and interoperability with external sources.
All features available in WebStorm are included in PhpStorm, which adds support for PHP and databases WebStorm ships with pre-installed JavaScript plugins (such as for Node.js).
PhpStorm is perfect for working with Symfony, Laravel, Drupal, WordPress, Zend Framework, Magento, Joomla, CakePHP, Yii, and other frameworks.
This PHP editor truly understands your code, decoding its structure and semantics to support all PHP features across modern and legacy projects It delivers top-tier code completion, powerful refactoring, and real-time error prevention as you type, enabling faster development and fewer bugs for both new and existing PHP applications.
Leverage cutting-edge front-end technologies—HTML5, CSS, Sass, Less, Stylus, CoffeeScript, TypeScript, Emmet, and JavaScript—with built-in refactoring, debugging, and unit testing to streamline development See changes instantly in the browser with Live Edit, delivering rapid feedback and a more efficient workflow.
Perform many routine development tasks directly from the IDE, thanks to integrated Version Control System (VCS) support, remote deployment capabilities, and built-in access to databases/SQL, command-line tools, Docker, Composer, REST Client, and many other tools This unified development environment streamlines workflows, boosts productivity, and enhances collaboration by bringing essential tasks—version control, deployment, databases, testing, and containerization—into a single, easy-to-use interface.
Overview of Vietnam's tourism industry
Vietnam's tourism is regarded by the Vietnamese government as a spearhead economic sector, reflecting the country’s diverse and rich tourism potential In 2019, Vietnam welcomed 18 million international visitors for the first time, a 16.2% increase over 2018 Between 2015 and 2019, international arrivals to Vietnam grew significantly, highlighting tourism as a key driver of Vietnam's economic growth and a cornerstone of its national development strategy.
Vietnam remains one of the world’s fastest-growing tourist destinations, with its tourism sector earning top global recognition In 2019, Vietnam tourism was awarded World Travel Awards’ World’s Leading Heritage Destination and World Golf Awards’ World’s Best Golf Destination, signaling its diverse offerings The World Travel Awards also crowned Vietnam as Asia’s Leading Destination for 2018–2019, as well as Asia’s Leading Cultural Destination and Asia’s Leading Culinary Destination for 2019, highlighting Vietnam’s appeal for heritage, culture, and cuisine.
Due to the Covid-19 outbreak, Vietnam's tourism sector endured a severe crisis in 2020 International arrivals dropped to 3.7 million, a decline of over 80% compared to 2019 Domestic tourism also fell by about 50% The tourism revenue loss reached roughly $23 billion As a result, about 95% of international travel businesses ceased operations, hotel occupancy dropped to 10–15%, and many hotels were forced to close.
Post-pandemic competition in the green economy, especially among tourism businesses, now extends beyond price and service quality to include technology utilities and online payment capabilities To win over eco-conscious travelers, companies must pair sustainable practices with seamless digital experiences, leveraging digital tools, secure online payments, and other technology solutions that boost convenience, trust, and operational efficiency.
Since the COVID-19 pandemic, digital transformation has become the tourism industry's indispensable ally, optimizing the operation of management systems and helping businesses reduce costs It also boosts efficiency and delivers higher-quality customer experiences.
To meet the recovery and development needs of the new era, the green economy must accelerate technological advancement and embrace digital transformation Industry management bodies and the tourism sector, having weathered the pandemic, now possess resilience and the potential to fast-track digital adoption, enabling faster and stronger adaptation for sustainable growth.
Chapter result
Mastering the fundamentals of web design begins with fluent HTML skills, including semantic markup and accessibility, and is reinforced by crafting attractive, modern interfaces with CSS to achieve high aesthetics In addition, JavaScript is an indispensable tool in front-end development, providing dynamic methods and interactions that HTML and CSS alone cannot deliver, ensuring smooth website operation Together, HTML, CSS, and JavaScript form the core toolkit for creating effective, responsive, and engaging websites in today’s digital landscape.
At the same time, we see that Vietnam's need for digital transformation afterCOVID is inevitable Through that, we decided to start surveying and designing the website system.
SYSTEM SURVEY, ANALYSIS AND DESIGN
System survey
Today there are many websites offering tourist information, but most primarily advertise tourism services rather than delivering accurate, unbiased content Travelers struggle to find reliable details about places, landscapes, and objective reviews from users To solve these issues, the tourist information support system combines web-based and mobile applications, ensuring accessible, trustworthy information for planning trips The system also provides additional utilities, clearly described in the system documentation, to enhance the overall travel experience.
Users can quickly view the weather for any location, get turn-by-turn directions, and easily add new tourist destinations to the platform They can upload high-quality photos of attractions directly from their mobile phones, sharing visuals with the community At the same time, they can warn other users about problems at a destination, helping everyone stay informed and safe within the system.
Groups of service providers, including hotel owners, restaurant operators, and other tourism partners, participate in the platform to showcase the services they offer to tourists They present detailed descriptions of their offerings, amenities, and pricing to help travelers discover options, while system users browse, compare, review, and choose the most suitable services, guided by ratings, recommendations, and transparent information to support easy booking through the platform.
- The system was built with the first task of providing information about tourist attractions in Vietnam.
Upon logging in, users gain access to a travel platform where they can view location-specific information, current weather conditions, and user-generated comments and photos linked to each place, enabling them to share travel experiences with others They can search for tourist attractions within the system, add new discoveries by uploading photos, and either automatically detect a location or manually enter it Users can also leave reviews, post photos of their experiences, save favorite destinations and service providers for quick later viewing, and share locations on social networks, making it easy to build and curate a personal travel map.
Hoteliers who provide travel services are granted system access in the role of tourists, allowing them to add pricing and describe the hotel and restaurant services they offer This information becomes visible to travelers, helping them learn about and compare the services available.
The admin group is responsible for platform governance, including managing user accounts—granting permissions, editing profiles, and disabling accounts They also maintain the accuracy of tourist destination information and city data, oversee content from other user groups, manage tourism-related news, and coordinate service management to ensure secure, reliable, and efficient operations.
- Change personal information and personal password
- View tourist destination information, view travel news and services
- Turn on directions to tourist attractions
- Comment and post photos of tourist attractions
- Write a personal travel blog and post it on the website's blog page
- There are functions like the group “Tourists”
- Manage your service information, including:
Create new information about the service you provide
Edit the service information you provide
Disable the service information you provide
- Change personal information and personal password
- Manage user lists (Service Groups, Travelers, Admin Members) including activities:
Grant system access rights to users
Reassign the password to the user
- Tourism destination management includes activities:
- Manage comments, photos about tourist attractions/services/news
Add comments, photos about tourist attractions/services/news
Edit comments, photos about tourist attractions/services/news
Delete comments, photos about tourist attractions/services/news
- Service information management includes activities:
- Local directory management (commune-district-province), including activities:
Add locales to the category
Edit the locale in the directory
Remove local from the catalog
- Tourism news management includes activities:
System analysis
Image 8: Entity – Relationship Model diagram
2.2.2.1 Flowchart of user account registration process
Image 9: Flowchart of user account registration process
2.2.2.2 Flowchart of the system login process
Image 10: Flowchart of the system login process
2.2.2.3 Flowchart of the process of searching for tourist places, travel blogs, services
Image 11: Flowchart of the process of searching for tourist places, travel blogs, services
2.2.2.4 User interaction process activity chart
Image 12: User interaction process activity chart
Image 13: Relational data model diagram
2.3.2 List of tables in the relational model
The Place table stores information about all tourist attractions.
Image 14: Place table in database
ID: Location code Table primary key, self-incrementing.
Name: The name of the place.
Type: Specifies the location type.
Address: Shows the location of the tourist destination
Content: Some basic information about tourist attractions
Status: The status of the location, there are 2 states:
0: Location does not exist, disabled
1: Location exists and allows display
Max_cost: The highest cost for this tourist destination
Min_cost: The lowest cost for this tourist destination
The User table stores information about all users.
Image 15: User table in database
ID: User ID Table primary key, self-incrementing.
Email: User's email account Used as login and account registration fields.
The Service table stores information about all the services provided
Image 16: Service table in database
ID: Service code Table primary key, self-incrementing.
Type: Type of service provided.
Cost: The cost to use the service.
The Tour table stores information about all booked tours.
Image 17: Tour table in database
ID: Trip code The primary key of the table.
ID_User: User code to register for the tour Foreign key of the table.
ID_Place: Code of the tourist destination that the tour will go to Foreign key of the table.
ID_Service: The service code the user registers to use during the tour. Foreign key of the table.
Phone_number: Contact phone number of the user registering the tour.
Time_register: The time the user registered the tour.
Time_start_tour: The time the tour will start.
Time_start_tour: The time that the tour will end.
Amount: The number of people that the user registers for the tour.
The Image table stores information about all the images that appear on the web page.
Image 18: Service table in database
ID: Image code The primary key of the table.
ID_Blog: The blog code that uses this image Foreign key of the table.
ID_Place: The tourist destination code that uses this image Foreign key of the table.
Data: Contains the link to the image.
The Blogs table stores information about all the blogs on the site.
Image 19: Service table in database
ID: Blog code The primary key of the table.
ID_User: Poster ID Foreign key of the table.
ID_Place: The tourist destination code mentioned by the blog Table's foreign key
Header: The title of the blog.
Content: The content of the blog.
Time: Time of blog posting.
Amount_like: The number of likes of this blog.
Comment: Comment on this blog.
Chapter result
At the end of this chapter, we have basically surveyed and analyzed the complete system under construction for the topic, including:
- System survey, system description and main functional groups.
- System analysis includes the following tasks:
In the next chapter 3, my group will continue to delve into the design of the database and the interface for the system.
BUILDING WEBSITE INTERFACE
About Header
- Logo website: it help identify web the site
- Navigation: help access other main pages.
- enable users to log in.
- Search bar: help find places on the web.
About Footer
- On the left with 2 columns including the logo of the website and the address to be able to contact the manufacturer.
- On the right with 2 columns are famous places and experienced images at tourist sites.
Home Page
The homepage is designed with the main content:
- The images are of famous tourist attractions.
Image 22: Banner of home page
- The interface of popular locations and descriptions of locations.
- Introductory video about tourist attractions
Image 24: Intro video on home page
About us page
Wonder Place is committed to innovating and developing high-quality tourism products and services to meet the diverse and growing needs of both domestic and international customers Our core responsibility is to deliver true value and tangible benefits to customers while ensuring safety across all tourism service experiences when customers use Wonder Place products.
Image 26: Mission we will do on about us page
- Some data collected since the website's inception.
Image 27: Achievementsin about us pageImage 3.8: Achievementsin about us page
Destination Page
- This page will provide tourist attractions and information about the trip.
Image 28: Achievementsin on destinantion page
- And there are stories about the trip listed under Share Your Story
Blog Page
- Blogs are organized into categories for easy search and interest
Image 30: A part of blog page
Image 31: A part of blog page
- In addition, it also divides the blogs that are calculated and given by the system as the most popular today, videos, images, content, and so on.
Image 32: A part of blog page
Single-Blog Page
- We will have posts on Single-Blog.
Image 33: A part of single-blog page
- Places that have been visited.
Image 34: A part of single-blog page
- Featured articles of the site
- Most recent and old posts.
Image 36: A part of single-blog page
Contact page
- Respond to your comments or suggestions here, or you can contact us via email, phone number, facebook page and more.
Image 37: A part of single-blog page
Login form
Image 39: A part of single-blog page
- The interface is simple, easy to use and can book tours quickly when we click the Book Now buttons.
CONCLUSION AND DEVELOPMENT
Conclusion
- View information of pages (Home, About, ).
- Can be viewed in many different browsers.
- Beautiful interface, easy to use
- Feature for Admin and separate page for Admin.
- When put into actual operation on the host, the system cannot meet the demand for download speed
Development
- Expand more resources for users
- Add features for Admin and separate pages for Admin.
- Develop more functions suitable for the website such as booking tours, payment, hotel search,
- ,