(TIỂU LUẬN) BASE PROJECT 1 TOPIC BUILDING TOURISM SERVICE WEBSITE

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 TRƯƠNG THẾ QUỐC DŨNG – 21IT014 Lecture instruct

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

TRƯƠNG THẾ QUỐC DŨNG – 21IT014

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

Nowadays, the application of information technology and computerization isconsidered as one of the decisive factors in the activities of governments,organizations, as well as companies; it plays a very important role, can make strongbreakthroughs

Building websites to cater to the unique needs of organizations, companies, and evenindividuals, today, is nothing new With a few simple steps, anyone can become theowner of a website about anything

It is becoming more and more urgent for governments and companies to build theirown websites Through these websites, information about them as well as officialdocuments, announcements, government decisions or new products and services of thecompany will reach interested people, reach their customers in a timely mannerquickly and in a timely manner, avoiding the troubles that traditional communicationmethods often encounter

Vietnam is a country endowed with many beautiful landscapes by nature Those areattractive tourist destinations for domestic tourists and especially foreign tourists.However, with the characteristics of tourists who are visiting for the first time, they donot 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 upwith a solution to build a tourism information support system and develop it on thewebsite "Traveled With You" The completed website will introduce visitors to theselection of the most attractive tourist destinations or tourist destinations by province,along with information about that place such as: famous dishes, festivals, mostfeatured image ;

The website also provides the function of sharing, commenting and recommending theplace as a reference for other visitors In addition, many new types of tourism anduseful 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 designand 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

After the process of studying and implementing the basic project project 1, our grouphas completed our project First of all, we would like to thank the teachers whoprovided 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 workprogress, 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 makingmistakes because our knowledge of technologies is still not much We hope to receivesuggestions and comments from teachers so that we can do better for future projects

We sincerely thank you!

(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 overview6 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 - Jetbrains10 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

Especially after two years of the Covid-19 epidemic raging, tourism hasbecome almost paralyzed According to the World Economic Forum (WEF), due tothe impact of the Covid-19 pandemic, global GDP is estimated to lose about 4.5trillion USD and lose more than 60 million jobs in 2020, in Tourism is one of thehardest hit industries Until now, 2022 when the pandemic has become limited andwith solutions to digitally transform the tourism industry to be able to develop this

"smokeless industry" again Therefore, the application of information technology inthe 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, andalso 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 toexplore 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; Arrangethe 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

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

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

differed from experience

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

information information

- Updatedinformationregularly

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 theapproach system built in the topic from survey steps, analysis system, database andinterface system system in account

- Chapter 3: Building the basic web interface: Designing the interface system in theaccount.Conclusion and development orientation: Giving results and evaluating thesystem, 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

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 everybusiness 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 designand expand the target management system for each business On the other hand, thewebsite is an important and effective step in the implementation of the company'smarketing strategy For individuals, using social networks, viewing information on thewebsite is the simplest and fastest way to contain all the necessary information ofproducts and services and is a simple way to find customers goods, decimalinformation 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 theWeb It defines the meaning and structure of web content Other technologies besidesHTML are generally used to describe a web page's appearance/presentation (CSS) orfunctionality/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 Byuploading content to the Internet and linking it to pages created by other people, youbecome 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", whichconsist of the element name surrounded by "<" and ">" The name of an elementinside a tag is case insensitive That is, it can be written in uppercase, lowercase, or amixture For example, the <title> tag can be written as <Title>, <TITLE>, or in anyother way However, the convention and recommended practice is to write tags inlowercase

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 willhelp us to add a little "style" way ” Enter the HTML of those elements such aschanging 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 Webbrowsers according to W3C specifications Previously, development of different parts

of the CSS specification was done concurrently, allowing versioning of the latestproposals You may have heard of CSS1, CSS2.1, CSS3 However, CSS4 neverbecame an official version

Since CSS3, the scope of the specification has increased dramatically, andprogress on different CSS modules has begun to vary greatly, so the development andrelease of separate proposals for each- cooking becomes more efficient Instead ofversioning the CSS specification, W3C now periodically takes a snapshot of the lateststable state of the CSS specification

6

Image 2: Logo CSS

1.2.3 JavaScript overview

JavaScript (JS) is a lightweight, interpreted or compiled programming languagewith first-class functions JavaScript is a prototype-based, multi-paradigm, single-threaded dynamic language that supports object-oriented, imperative, and declarativetypes (e.g functional programming) Read more about JavaScript

This section is specific to the JavaScript language itself, not sections specific toWeb 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 draftversions of ECMA-262 and ECMA-402 And in the event that some of the proposalsfor new ECMAScript features have been implemented in the browser, thedocumentation and examples in the MDN articles could make use of some of thosenew 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 andother countries However, the two programming languages have very different syntax,semantics, and usage

Famous Javascript library:

- 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 ofdesigners, developers, and content creators It was created by Dave Gandy for usewith Bootstrap, and later integrated into BootstrapCDN Font Awesome has a reported38% 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-codeeditor made by Microsoft for Windows, Linux and macOS Features include supportfor debugging, syntax highlighting, intelligent code completion, snippets, coderefactoring, 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 rankedthe most popular developer environment tool, with 70% of 82,000 respondentsreporting that they use it

Visual Studio Code is a source-code editor that can be used with a variety ofprogramming languages, including Java, JavaScript, Go, Node.js, Python, C++ andFortran It is based on the Electron framework, which is used to develop Node.js Webapplications that run on the Blink layout engine Visual Studio Code employs the sameeditor component (codenamed "Monaco") used in Azure DevOps (formerly calledVisual Studio Online and Visual Studio Team Services)

Out of the box, Visual Studio Code includes basic support for most commonprogramming languages This basic support includes syntax highlighting, bracketmatching, code folding, and configurable snippets Visual Studio Code also ships withIntelliSense for JavaScript, TypeScript, JSON, CSS, and HTML, as well as debuggingsupport for Node.js Support for additional languages can be provided by freelyavailable extensions on the VS Code Marketplace

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 alanguage-agnostic code editor for any language It supports many programminglanguages and a set of features that differs per language Unwanted files and folderscan be excluded from the project tree via the settings Many Visual Studio Codefeatures are not exposed through menus or the user interface but can be accessed viathe command palette

Visual Studio Code can be extended via extensions, available through a centralrepository This includes additions to the editor and language support A notablefeature 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 LanguageServer Protocol

Source control is a built-in feature of Visual Studio Code It has a dedicated tabinside of the menu bar where you can access version control settings and view changesmade to the current project To use the feature you must link Visual Studio Code toany supported version control system (Git, Apache Subversion, Perforce, etc.) Thisallows you to create repositories as well as to make push and pull requests directlyfrom the Visual Studio Code program

PhpStorm is written in Java Users can extend the IDE by installing pluginscreated for PhpStorm or write their own plugins The software also communicates withexternal sources like XDebug

10

All features available in WebStorm are included in PhpStorm, which addssupport 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 providesthe 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, withrefactorings, debugging, and unit testing available See the changes instantly in thebrowser thanks to Live Edit

Perform many routine tasks right from the IDE, thanks to the Version ControlSystems integration, support for remote deployment, databases/SQL, command-linetools, 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 spearheadeconomic sector because it believes that Vietnam has diverse and rich tourismpotential In 2019, Vietnam's tourism industry set a miracle to welcome 18 millioninternational visitors for the first time, an increase of 16.2% compared to 2018 In theperiod from 2015-2019, the number of international visitors to Vietnam increased by

Vietnam is continuously in the group of countries with the fastest tourist growthrate in the world In 2019, Vietnam tourism received the World's Leading HeritageDestination award by the World Travel Awards, the World's Best Golf Destination bythe World Golf Awards Along with that, the World Travel Awards also honoredVietnam as Asia's Leading Destination for 2 consecutive years 2018-2019, Asia'sLeading 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 over80% compared to 2019 Domestic tourists also decrease by 50%, making the tourismindustry Revenue loss is about $23 billion in 2020 As a result, about 95% ofinternational travel businesses stop operating, the occupancy rate of accommodation isonly 10-15% and many hotels have to close …

After the pandemic, the competition in the green economy and especially withtourism businesses is no longer only about price and service quality, but also abouttechnology 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 managementsystem but also helping businesses both reduce costs and increase efficiency andquality client

Therefore, in order to meet the needs of recovery and development in the newperiod, the whole green economy is struggling to race in technology Managementunits in the industry as well as tourism businesses survived the pandemic and had thepotential to rush digital transformation to adapt faster and stronger

1.5 Chapter result

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

12