TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH

BASE PROJECT 1

TOPIC:
BUILDING TOURISM SERVICE WEBSITE

Student perform : TRẦN CÔNG BẢO – 21IT005

TRƯƠNG THẾ QUỐC DŨNG – 21IT014
Class : 21GIT
Lecture instructors : Ph.D. NGUYỄN SĨ THÌN

Da Nang, May 2022

 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ
TRUYỀN THÔNG VIỆT – HÀN
KHOA KHOA HỌC MÁY TÍNH

BASE PROJECT 1

TOPIC:
BUILDING TOURISM SERVICE WEBSITE

Da Nang, May 2022

 FOREWORD
Nowadays, the application of information technology and computerization is
considered as one of the decisive factors in the activities of governments,
organizations, as well as companies; it plays a very important role, can make strong
breakthroughs.
Building websites to cater to the unique needs of organizations, companies, and even
individuals, today, is nothing new. With a few simple steps, anyone can become the
owner of a website about anything.
It is becoming more and more urgent for governments and companies to build their
own websites. Through these websites, information about them as well as official
documents, announcements, government decisions or new products and services of the
company will reach interested people, reach their customers in a timely manner
quickly and in a timely manner, avoiding the troubles that traditional communication
methods often encounter.
Vietnam is a country endowed with many beautiful landscapes by nature. Those are
attractive tourist destinations for domestic tourists and especially foreign tourists.
However, with the characteristics of tourists who are visiting for the first time, they do
not have much experience or know much about tourist attractions such as location,
weather, accommodation and other food services. But instead, almost every guest uses
a network access device or smartphone devices.
Through that practical request, the group has researched and evaluated to come up
with a solution to build a tourism information support system and develop it on the
website "Traveled With You". The completed website will introduce visitors to the
selection of the most attractive tourist destinations or tourist destinations by province,
along with information about that place such as: famous dishes, festivals, most
featured image...;
The website also provides the function of sharing, commenting and recommending the
place as a reference for other visitors. In addition, many new types of tourism and
useful functions for users will be updated and added in the development process.
The content of the project includes:

The opening part: Briefly introduce the topic's objectives and research methods to
build the system.

Chapter 1: Theoretical basis: Introduction of relevant and applied theoretical bases to

building websites.
Chapter 2: Survey, analysis and system design: This chapter delves into the system
approach built in the topic from the steps of survey, system analysis, database design
and system interface. system in the subject.

Chapter 3: Building basic website interface:: System interface design in the topic.

Conclusion and development direction: Giving results and evaluating the system,
future development direction of the system.
 ACKNOWLEDGEMENT
After the process of studying and implementing the basic project project 1, our group
has completed our project. First of all, we would like to thank the teachers who
provided and taught the background knowledge, and especially Mr. Nguyen Si Thin,
the teacher who directly guided our project.He was the one who monitored the work
progress, gave suggestions and suggestions to help us complete our projects well,
reminded us to complete the project on time, ensuring the work schedule.
Although we try to work with great concentration, our team cannot avoid making
mistakes because our knowledge of technologies is still not much. We hope to receive
suggestions and comments from teachers so that we can do better for future projects.
We sincerely thank you!
 COMMENT
(Of the lecture instructors)

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

Lecture instructors,
 TABLE OF CONTENTS
TABLE OF CONTENTS..............................................................................................
LIST OF IMAGES........................................................................................................
INTRODUTION..........................................................................................................1
1. Topic overview..................................................................................................1
1.1. Topic name.............................................................................................1
1.2. Introduce.................................................................................................1
1.3. Project goal.............................................................................................1
2. Research method................................................................................................2
3. Layout Report....................................................................................................2
Chapter 1. THEORETICAL BASIS...........................................................................4
1.1. Website overview............................................................................................4
1.1.1. What is Website?.................................................................................4
1.1.2. What are the benefits of a website for businesses?...............................4
2.1.3. Purport of website................................................................................4
1.2. Languages and technologies used...................................................................5
1.2.1. HTML overview..................................................................................5
1.2.2. CSS overview.......................................................................................6
1.2.3. JavaScript overview.............................................................................7
1.2.4. Font Awesome image gallery...............................................................8
1.3. Source-code editors be used............................................................................9
1.3.1. Visual Studio Code..............................................................................9
1.3.2. PhpStorm - Jetbrains..........................................................................10
1.4 Overview of Vietnam's tourism industry........................................................11
1.5. Chapter result................................................................................................13
Chapter 2. SYSTEM SURVEY, ANALYSIS AND DESIGN..................................14
2.1. System survey...............................................................................................14
2.1.1. Purpose...............................................................................................14
2.1.2. System Description............................................................................14
2.1.3. Main functional..................................................................................15
 2.2 System analysis..............................................................................................16
2.2.1 System Functional Modeling...............................................................16
2.2.2. Activity chart......................................................................................18
2.3.2. List of tables in the relational model..................................................21
2.4. Chapter result........................................................................................25
Chapter 3. BUILDING WEBSITE INTERFACE...................................................26
3.1. About Header................................................................................................26
3.2. About Footer.................................................................................................26
3.3. Home Page....................................................................................................26
3.4. About us page...............................................................................................27
3.5. Destination Page...........................................................................................29
3.6. Blog Page......................................................................................................30
3.7. Single-Blog Page..........................................................................................31
3.8. Contact page.................................................................................................32
3.9. Login form....................................................................................................33
Chapter 4. CONCLUSION AND DEVELOPMENT..............................................34
4.1. Conclusion....................................................................................................34
4.2. Development.................................................................................................34
LIST OF REFERENCES..........................................................................................35
 LIST OF IMAGES
Image 1: Logo HTML....................................................................................................6
Image 2: Logo CSS........................................................................................................7
Image 3: Logo Javascript..............................................................................................8
Image 4: Logo Awesome................................................................................................8
Image 5: Logo Visual Studio Code................................................................................9
Image 6: Logo PHP Storm...........................................................................................11
Image 7: Functional decomposition diagram..............................................................17
Image 8: Entity – Relationship Model diagram...........................................................17
Image 9: Flowchart of user account registration process...........................................18
Image 10: Flowchart of the system login process........................................................18
Image 11: Flowchart of the process of searching for tourist places, travel blogs,
services........................................................................................................................ 19
Image 12: User interaction process activity chart.......................................................19
Image 13: Relational data model diagram..................................................................20
Image 14: Place table in database...............................................................................21
Image 15: User table in database................................................................................22
Image 16: Service table in database............................................................................22
Image 17: Tour table in database................................................................................23
Image 18: Service table in database............................................................................24
Image 19: Service table in database............................................................................24
Image 20: Header website...........................................................................................26
Image 21: Footer website............................................................................................26
Image 22: Banner of home page..................................................................................27
Image 23: Popular Destination....................................................................................27
Image 24: Intro video on home page...........................................................................27
Image 25: Story about us.............................................................................................28
Image 26: Mission we will do on about us page..........................................................28
Image 27: Achievementsin about us page....................................................................29
Image 28: Achievementsin on destinantion page.........................................................29
Image 29: A part of destination page...........................................................................29
Image 30: A part of blog page....................................................................................30
Image 31: A part of blog page....................................................................................30
Image 32: A part of blog page....................................................................................30
Image 33: A part of single-blog page.........................................................................31
Image 34: A part of single-blog page.........................................................................31
Image 35: A part of single-blog page.........................................................................31
Image 36: A part of single-blog page.........................................................................32
Image 37: A part of single-blog page.........................................................................32
Image 38: Login form.................................................................................................33
Image 39: A part of single-blog page.........................................................................33
 INTRODUTION

1. Topic overview
1.1. Topic name
“BUILDING WEBSITE TRAVEL WITH YOU”
1.2. Introduce
The context of the implementation of the topic: In recent years, due to the rapid
development of information technology, the application of information technology in
industries has become more and more interesting, and so is the tourism industry..
Tourism is gradually becoming a fiercely competitive environment for companies and
corporations doing business in this field. 
Especially after two years of the Covid-19 epidemic raging, tourism has
become almost paralyzed. According to the World Economic Forum (WEF), due to the
impact of the Covid-19 pandemic, global GDP is estimated to lose about 4.5 trillion
USD and lose more than 60 million jobs in 2020, in Tourism is one of the hardest hit
industries. Until now, 2022 when the pandemic has become limited and with solutions
to digitally transform the tourism industry to be able to develop this "smokeless
industry" again. Therefore, the application of information technology in the company
is an urgent requirement in order to improve the quality of management, contribute to
the promotion of the brand through the Internet to attract customers, and also to
promote the beauty spots of Vietnam's scene.
Problem solved: Website was created to meet the needs of fast, convenient,
easy to use, easy to find tourist attractions. Just visiting the website will allow you to
explore and choose the place you want.
1.3. Project goal.
- The pages in the website must be full of basic components; layout and colors must
be reasonable because it is a travel website, so the interface is very important;
Arrange the pages properly
- 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.

1
2. Research method
- Research method 1: Real research
Doing: Based on the experience after travel trips of individual group members.
- Research method 2: Research over the Internet
Doing: 
 Read information on travel forums, pages, and other travel websites.
 Research existing web sites on pre-existing platforms.

Research method Advantages Disadvantages Conclusion

name

Research method 1 Objective, honest Expensive, and may have Ineffective

differed from experience

Research method 2 - Easy to do Not knowing the selection Effective

- Abundant will mess up the
information information
- Updated
information
regularly

Conclusion: Combining both methods but preferring to use method 3 to learn and
research.
3. 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.

2
- Chapter 4: conclusion and development: List the things that have been done and

the plans to do next with the project

3
 Chapter 1. THEORETICAL BASIS

1.1. Website overview

1.1.1. What is Website?

A website is a collection of web pages, usually within a domain or subdomain
on the Internet's World Wide Web. A web page is an HTML or XHTML file
accessible using the HTTP protocol. Websites can be built from HTML files (static
websites) or run using CMSs running on servers (dynamic web pages).
Websites can be built in many different programming languages (PHP, Java ...).
For a website to work, it needs 3 things:
- Need a domain name (domain)
- Website hosting (server)
- Website content or information database

1.1.2. What are the benefits of a website for businesses?

- Increase customer reach.
- Increase customer reach
- Increase interactivity
- Effective business promotion
- Efficient customer service
- Platform for product sales
- Branding
- Identify potential customers
- Easy recruitment.
- Increase competitiveness
- Update information quickly
- Easily get feedback from customers
- Product analysis

2.1.3. Purport of website

Website has not become very popular but is an indispensable tool for every
business and individual doing business today. This is a quick and effective way to
4
advertise information to Internet users. Website is considered as an easy tool to design
and expand the target management system for each business. On the other hand, the
website is an important and effective step in the implementation of the company's
marketing strategy. For individuals, using social networks, viewing information on the
website is the simplest and fastest way to contain all the necessary information of
products and services and is a simple way to find customers goods, decimal
information of important partners for the business.

1.2. Languages and technologies used

1.2.1. HTML overview

HTML (HyperText Markup Language) is the most basic building block of the
Web. It defines the meaning and structure of web content. Other technologies besides
HTML are generally used to describe a web page's appearance/presentation (CSS) or
functionality/behavior (JavaScript).
"Hypertext" refers to links that connect web pages to one another, either within
a single website or between websites. Links are a fundamental aspect of the Web. By
uploading content to the Internet and linking it to pages created by other people, you
become an active participant in the World Wide Web.
HTML uses "markup" to annotate text, images, and other content for display in
a Web browser. HTML markup includes special "elements" such as <head>, <title>,
<body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>,
<aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>,
<progress>, <video>, <ul>, <ol>, <li> and many others.
An HTML element is set off from other text in a document by "tags", which
consist of the element name surrounded by "<" and ">". The name of an element
inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a
mixture. For example, the <title> tag can be written as <Title>, <TITLE>, or in any
other way. However, the convention and recommended practice is to write tags in
lowercase.

5
 Image 1: Logo HTML

1.2.2. CSS overview

Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in HTML or XML (including XML dialects such
as SVG, MathML, or XHTML). CSS describes how elements will be displayed on
screen, on paper, in speech, or in other media.
It can be easily understood that, if HTML plays the role of formatting elements
on a web page such as creating paragraph text, headings, tables, etc., then CSS will
help us to add a little "style" way ” Enter the HTML of those elements such as
changing the page color, changing the text color, changing the structure, etc. a lot.
CSS is one of the core languages of the open web and is standardized on Web
browsers according to W3C specifications. Previously, development of different parts
of the CSS specification was done concurrently, allowing versioning of the latest
proposals. You may have heard of CSS1, CSS2.1, CSS3. However, CSS4 never
became an official version.
Since CSS3, the scope of the specification has increased dramatically, and
progress on different CSS modules has begun to vary greatly, so the development and
release of separate proposals for each- cooking becomes more efficient. Instead of
versioning the CSS specification, W3C now periodically takes a snapshot of the latest
stable state of the CSS specification.

6
 Image 2: Logo CSS

1.2.3. JavaScript overview

JavaScript (JS) is a lightweight, interpreted or compiled programming language
with first-class functions. JavaScript is a prototype-based, multi-paradigm, single-
threaded dynamic language that supports object-oriented, imperative, and declarative
types (e.g. functional programming). Read more about JavaScript.
This section is specific to the JavaScript language itself, not sections specific to
Web pages or other host environments. For information about Web-specific APIs,
please see Web API and DOM.
The standards for JavaScript are the ECMAScript Language Specification
(ECMA-262) and the ECMAScript Internationalization API specification (ECMA-
402). The JavaScript documentation throughout the MDN is based on the latest draft
versions of ECMA-262 and ECMA-402. And in the event that some of the proposals
for new ECMAScript features have been implemented in the browser, the
documentation and examples in the MDN articles could make use of some of those
new features.
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.

Famous Javascript library:

- Prototype framework combined with Scriptaculous library.
7
 - 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.

Image 3: Logo Javascript

1.2.4. Font Awesome image gallery

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. Font Awesome has a reported
38% market share among sites that use third-party font scripts on their platform,
placing it in second place behind Google Fonts.

Image 4: Logo Awesome

8
1.3. Source-code editors be used

1.3.1. Visual Studio Code

Visual Studio Code, also commonly referred to as VS Code, is a source-code
editor made by Microsoft for Windows, Linux and macOS. Features include support
for debugging, syntax highlighting, intelligent code completion, snippets, code
refactoring, and embedded Git. Users can change the theme, keyboard shortcuts,
preferences, and install extensions that add additional 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 is a source-code editor that can be used with a variety of
programming languages, including Java, JavaScript, Go, Node.js, Python, C++ and
Fortran. It is based on the Electron framework, which is used to develop Node.js Web
applications that run on the Blink layout engine. Visual Studio Code employs the same
editor component (codenamed "Monaco") used in Azure DevOps (formerly called
Visual Studio Online and Visual Studio Team Services).
Out of the box, Visual Studio Code includes basic support for most common
programming languages. This basic support includes syntax highlighting, bracket
matching, code folding, and configurable snippets. Visual Studio Code also ships with
IntelliSense for JavaScript, TypeScript, JSON, CSS, and HTML, as well as debugging
support for Node.js. Support for additional languages can be provided by freely
available extensions on the VS Code Marketplace.

Image 5: Logo Visual Studio Code

9
 Visual Studio Code Insiders logo
Instead of a project system, it allows users to open one or more directories,
which can then be saved in workspaces for future reuse. This allows it to operate as a
language-agnostic code editor for any language. It supports many programming
languages and a set of features that differs per language. Unwanted files and folders
can be excluded from the project tree via the settings. Many Visual Studio Code
features are not exposed through menus or the user interface but can be accessed via
the command palette.
Visual Studio Code can be extended via extensions, available through a central
repository. This includes additions to the editor and language support. A notable
feature is the ability to create extensions that add support for new languages, themes,
and debuggers, perform static code analysis, and add code linters using the Language
Server Protocol.
Source control is a built-in feature of Visual Studio Code. It has a dedicated tab
inside of the menu bar where you can access version control settings and view changes
made to the current project. To use the feature you must link Visual Studio Code to
any supported version control system (Git, Apache Subversion, Perforce, etc.). This
allows you to create repositories as well as to make push and pull requests directly
from the Visual Studio Code program.

1.3.2. PhpStorm - Jetbrains

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. PhpStorm's code completion supports PHP 5.3, 5.4, 5.5, 5.6, 7.0, 7.1, 7.2, 7.3,
7.4, 8.0 and 8.1 (modern and legacy projects), including generators, coroutines, the
finally keyword, list in foreach, namespaces, closures, traits and short array syntax. It
includes a full-fledged SQL editor with editable query results.
PhpStorm is written in Java. Users can extend the IDE by installing plugins
created for PhpStorm or write their own plugins. The software also communicates with
external sources like XDebug.

10
 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.
The editor actually 'gets' your code and deeply understands its structure,
supporting all the PHP language features for modern and legacy projects. It provides
the best code completion, refactorings, on-the-fly error prevention, and more.
Make the most of the cutting edge front-end technologies, such as HTML 5,
CSS, Sass, Less, Stylus, CoffeeScript, TypeScript, Emmet, and JavaScript, with
refactorings, debugging, and unit testing available. See the changes instantly in the
browser thanks to Live Edit.
Perform many routine tasks right from the IDE, thanks to the Version Control
Systems integration, support for remote deployment, databases/SQL, command-line
tools, Docker, Composer, REST Client, and many other tools.

Image 6: Logo PHP Storm

1.4 Overview of Vietnam's tourism industry

Vietnam's tourism is considered by the State of Vietnam as a spearhead
economic sector because it believes that Vietnam has diverse and rich tourism
potential. In 2019, Vietnam's tourism industry set a miracle to welcome 18 million
international visitors for the first time, an increase of 16.2% compared to 2018. In the
period from 2015-2019, the number of international visitors to Vietnam increased by
2, 3 times from 7.9 million to 18 million, the average growth rate is 22.7% per year.

11
 Vietnam is continuously in the group of countries with the fastest tourist growth
rate in the world. In 2019, Vietnam tourism received the World's Leading Heritage
Destination award by the World Travel Awards, the World's Best Golf Destination by
the World Golf Awards. Along with that, the World Travel Awards also honored
Vietnam as Asia's Leading Destination for 2 consecutive years 2018-2019, Asia's
Leading Cultural Destination 2019, Asia's Leading Culinary Destination 2019.
But due to the impact of the Covid-19 epidemic, Vietnam's tourism industry is
in a serious crisis. The Vietnam + page on April 15 reiterated that in 2020,
international visitors to Vietnam will only reach 3.7 million arrivals, a decrease of over
80% compared to 2019. Domestic tourists also decrease by 50%, making the tourism
industry Revenue loss is about $23 billion in 2020. As a result, about 95% of
international travel businesses stop operating, the occupancy rate of accommodation is
only 10-15% and many hotels have to close. …
After the pandemic, the competition in the green economy and especially with
tourism businesses is no longer only about price and service quality, but also about
technology utilities, online payment...
After COVID-19, digital transformation has become an effective "right hand"
of the tourism industry, not only helping to optimize the operation of the management
system but also helping businesses both reduce costs and increase efficiency and
quality client.
Therefore, in order to meet the needs of recovery and development in the new
period, the whole green economy is struggling to race in technology. Management
units in the industry as well as tourism businesses survived the pandemic and had the
potential to rush digital transformation to adapt faster and stronger.

1.5. Chapter result

By learning the theoretical foundations of website design, especially the
foundational knowledge such as being able to understand and apply the HTML
language fluently, learn how to design beautiful interfaces with CSS. and modern,
achieving high aesthetics are very basic and necessary requirements. In addition, fluent
use of the javascript language is an indispensable job when designing websites,

12
javascript creates special methods and actions, helps the website operate smoothly,
shoulder the task and HTML and CSS can't handle it.
At the same time, we see that Vietnam's need for digital transformation after
COVID is inevitable. Through that, we decided to start surveying and designing the
website system.

13
 Chapter 2. SYSTEM SURVEY, ANALYSIS AND
DESIGN

2.1. System survey

2.1.1. Purpose
- Currently, there are many websites about tourist information, but only advertising
for tourism services. It is difficult to find accurate information about places,
landscapes and objective reviews from users. The tourist information support
system is built on both web-based and mobile applications to overcome those
disadvantages, in addition to providing additional utilities that will be clearly stated
in the system description.
- Users can easily view the weather at the location, get directions, manipulate to add
new tourist destinations and upload photos of tourist destinations easily via mobile
phones, and at the same time warn of problems at the destination. a certain tourist
destination for other users in the system.
- Groups of service providers such as hotel and restaurant owners participate in the
system, introducing the type of service they provide to tourists, but here the system
users refer and choose.
2.1.2. System Description
- The system was built with the first task of providing information about tourist
attractions in Vietnam.
- Once logged into the system, users can access the system to view information
about the location, weather conditions at the location, comments and photos of the
user in the system posted to the location. introduce their travel experience to others,
are searching for tourist attractions available in the system. At the same time, users
are also allowed to comment and post photos of experiences about places, save
tourist destinations and service providers for later viewing, share locations on
social networking sites; Add new tourist attractions discovered and discovered
quickly by uploading a picture of the place, the location of this place can be
automatically located or written by the user.

14
- The group of hoteliers that provide travel services is allowed to access the system
as a tourist, and this group of people can add information such as prices, hotel and
restaurant services that they provide. known to tourists.
- The admin group will manage user accounts (granting permissions, editing,
disabling accounts), tourist destination information, City data, managing posts of
the remaining user groups, managing news ie tourism, service management.

2.1.3. Main functional

2.1.3.1. Functions for “Travelers”

- Sign in.
- Change personal information and personal password
- View tourist destination information, view travel news and services
- Turn on directions to tourist attractions
- Share tourist destination information
- Comment and post photos of tourist attractions
- Add a new tourist destination
- Searching for tourist attractions
- Write a personal travel blog and post it on the website's blog page

2.1.3.2. Functions for “Service Groups”

- 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

2.1.3.3 Functions for “Administrators”

- System login
- Change personal information and personal password
- Manage user lists (Service Groups, Travelers, Admin Members) including
activities:
 Grant system access rights to users

15
  Reassign the password to the user
 Disable user accounts
- Tourism destination management includes activities:
 Create a new location
 Edit location information
 Disable location
- 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:
 More service information
 Edit service information
 Delete service information
- 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:
 Post news
 Edit news
 Delete news

2.2 System analysis

2.2.1 System Functional Modeling

16
2.2.1.1. Functional decomposition diagram

Image 7: Functional decomposition diagram

2.2.1.2. Entity – Relationship Model

Image 8: Entity – Relationship Model diagram

17
2.2.2. Activity chart

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

18
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

19
2.3. System database design
2.3.1. Relational data model

Image 13: Relational data model diagram

20
2.3.2. List of tables in the relational model
- Table 1: Table Place
The Place table stores information about all tourist attractions.

Image 14: Place table in database

Describe:
 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

21
- Table 2: User Table
The User table stores information about all users.

Image 15: User table in database

Describe:
 ID: User ID. Table primary key, self-incrementing.
 Name: Username.
 Email: User's email account. Used as login and account registration fields.
 Password: Login password.
- Table 3: Service Table
The Service table stores information about all the services provided.

Image 16: Service table in database

Describe:
 ID: Service code. Table primary key, self-incrementing.
 Name: Service name.
 Type: Type of service provided.
 Cost: The cost to use the service.

22
- Table 4: Tour Table
The Tour table stores information about all booked tours.

Image 17: Tour table in database

Describe:
 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.
 Cost: Tour cost.

23
- Table 5: Image
The Image table stores information about all the images that appear on the web
page.

Image 18: Service table in database

Describe:
 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.

- Table 6: Blog
The Blogs table stores information about all the blogs on the site.

Image 19: Service table in database

Describe:
 ID: Blog code. The primary key of the table.
24
  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.

2.4. 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:
 Modeling business functions.
 Build Entity Relationship Diagram
In the next chapter 3, my group will continue to delve into the design of the
database and the interface for the system.

25
 CHAPTER 3. BUILDING WEBSITE INTERFACE
3.1. About Header
Header have  :
- Logo website: it help identify web the site
- Navigation: help access other main pages.
- Login: 
- enable users to log in.
- Search bar: help find places on the web.

Image 20: Header website

3.2. About Footer

Footer have 2 main part :
- 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.

Image 21: Footer website

3.3. Home Page

The homepage is designed with the main content: 
- The images are of famous tourist attractions.

26
 Image 22: Banner of home page

- The interface of popular locations and descriptions of locations.

Image 23: Popular Destination

- Introductory video about tourist attractions

Image 24: Intro video on home page

3.4. About us page

- Show more information about depth and history of the formation of website.
27
 Image 25: Story about us

- Set out the basic goal of the website is to innovate and develop tourism
products and services of good quality to meet the diverse and abundant needs of
domestic and international customers. Responsibility: Ensuring the values and
benefits of customers as well as satisfying the needs of safety in the tourism
service industry when customers use Wonder Place products.

Image 26: Mission we will do on about us page

- Some data collected since the website's inception.

28
 Image 27: Achievementsin about us page
Image 3.8: Achievementsin about us page

3.5. 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

Image 29: A part of destination page

29
3.6. 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

30
3.7. 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

Image 35: A part of single-blog page

31
 - Most recent and old posts.

Image 36: A part of single-blog page

3.8. 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

32
3.9. Login form

Image 38: Login form

3.10. Tour booking 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.

33
34
 CHAPTER 4. CONCLUSION AND
DEVELOPMENT

4.1. Conclusion.
The website have: 
- View information of pages (Home, About, ...).
- Can be viewed in many different browsers.
- Beautiful interface, easy to use

The website don’t have:  

- Connect database.
- 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
4.2. Development.
- Expand more resources for users
- Add features for Admin and separate pages for Admin.
- Improve website processing speed.
- Connect database
- Develop more functions suitable for the website such as booking tours, payment,
hotel search,...

35
 LIST OF REFERENCES

[1] https://developer.mozilla.org/
[2] https://www.w3schools.com/
[3] https://www.w3schools.com/html/default.asp
[4] https://www.w3.org/
[5] https://vietnam.travel/
[6] https://www.klook.com/vi/
[7] And many other sites.

36