ICT Project Report (Individual)

HNDIT1052 – INDIVIDUAL PROJECT HNDIT 1st Year 2021/2022 (Full Time)

A Project Report for HIGHER NATIONAL DIPLOMA IN INFORMATION
TECHNOLOGY
Advanced Technological Institute
Gampaha

Title of the project - Creating Web Site “E-Traveling Sri lanka”

Student -: K.Naveen Dulanjana Perera

Registration No -:GAM/IT/2021/F/0084

Supervisor -: Ms.A.V.L.Chandima

1
 Table of Content

Introduction Chapter:

1. Introduction & Motivation………………………………………………….

2. Aims of the project……………………………………………………………….

3. Objectives of the project……………………………………………………..

4. Scope of the project……………………………………………………………..

Analysis Chapter:

1. Study of similar systems……………………………………………………….

2. Requirements gathering techniques…………………………………….

3. Functionalities of the system……………...……………………………....

Design Chapter:

1. Wire diagrams and site map for web sites……………………………

Implementation Chapter:

1. Software technologies used…………………………………………………

2. Hardware environment……………………………………………….........

3. Description of important code snippets……………………………….

Testing Chapter:

1. Questionnaire to check customer satisfaction……………………..

2. Checklist to check the quality of the product………………………..

Discussion Chapter:

1. Summary of work done………………………………………………………….

2. Lessons learn………………………………………………………………………….

3. Future improvement………………………………………………………………

2
Introduction Chapter –

Introduction and motivation of the Project

In today’s world, having a website is one of the best ways to interact with the customers.
Specially for small businesses and startups, a website will give the advantage of reaching more
customers and get their feedback for a lower cost than the other marketing platforms.

If the product or the service is unique or special, a website gives another special advantage to
introduce the product into the market. From the point of view of the owner, this is a huge save
and more manageable and affordable than introducing the product using the other marketing
strategies. Also, having a unique website will improve the image of the business among the
other competitors.

My Project is Make a Web Site for Give Some Important Information Of Best And Beautiful
Places of Sri lanka to Who Like to get traveling experience in Sri lanka . They can have many
information of that place they decide to travel before start their journey.

Sri Lanka is one of the most sorts for tourist destinations in the world. It is advantageously
situated between West Asia and South East Asia has been a significant stop on the silk route.Sri
Lanka has a large number of tourist attractions for different types of visitors. Bentota,
Beruwala, Hikkaduwa, Galle, Negombo and Trincomalee are the dominant beaches in Sri Lanka
and they are famous for relaxing, sun bathing and surfing. The living heritage of Sri Lanka of
2500 years was discovered by the culture & heritage. It was founded in the 5th century BC,
when the Buddhism was first introduced to the island. Anuradhapura can be recognized as the
capital city of Buddhism.

What is the most exciting thing when it comes to travel? Of course, the
lovely and wonderful destinations across the globe. The beauty of these amazing destinations
and their presentation inappropriate way is something that attracts customers. If you have a
travel business but everything is being done by word of mouth, then it will not work for long.
Customers are interested in exploring every location on their own without any intervention of
travel operators. They want to have entire control in their hand.

3
Aim of the Project

Main aim of this project is developing a website like minihandbook to gather wide information
about traveling places around beach sides of Sri Lanka.

OBJECTIVES of the Project

 Promotion Sri Lanka’s tourism and economy.

 All of which will help people travel and hopefully provide them the answers they want
when they search on Google.

 When producing content I try and write detailed posts, use nice pictures, suggest great
destinations and experiences, and try and make the posts easy and enjoyable to read.

 Web site will be costless and friendly to customers.

4
Scope of the Project

To create web site for Provide the tourist market with the quality personal required by the

tourism industry ,Promotion Sri Lanka’s tourism and economy and give information about

traveling places around beach sides of Sri Lanka.

Analysis Chapter-

Study of similar systems

The following is a list of websites that are similar to my web sites,

 https://www.roughguides.com/sri-lanka
 https://www.srilanka.travel
 https://www.lonelyplanet.com/sri-lanka
 http://www.srilankatravelguide.com
 https://www.yathratours.com
 https://www.booking.com

Essential features for travel websites identified from similar web sites and I added
below features for my web site,

Google map integration

It’s helpful to see available holidays laid out on a map, especially one that’s fully interactive and
lets you see the details of the destination selected with an arresting image.

5
Huge beautiful images
Airbnb showcases its users locations incredibly well with screen-filling glory. You’re also not
bombarded by rows upon rows of thumbnails, just a handful of well-chosen pictures, which you
can cycle through at your own pace.

Clear pricing without hidden fees

Nothing makes a visitor bounce quicker than unexpected charges and taxes. Despite its
insistent, upselling tactics, EasyJet is clear about its pricing throughout the customer journey.

Clear and Structured Website Navigation

You should always be careful about your website’s navigation structure as it has a huge impact
on conversions, sales, and bounce rates. If your users find it difficult to navigate through your
travel website, they will leave. That’s the last thing you want as you are looking to boost your
travel business. That’s why it is necessary to create clear, hierarchical website navigation that
allows your visitors to find what they want instantly.

For instance, you can create a proper section for different travel packages available in your
travel agency. You can organize those packages based on destinations, activities, types, and
make them easily navigable through your website’s homepage.

Booking Details & Email Notification

It is always essential to keep track of information when you own a particular business. As a
travel agency, it becomes important for you to save all the booking information that you land
on each day. With the right use of WordPress themes and plugins, you can easily store
information related to booking along with the details of your customers on your website.

Similarly, you should be able to provide email notifications to your customers whenever they
book a trip from your website. Also, this feature makes sure that you too receive an email alert
with all the booking details each time your customer books a travel package.

Informative Destination and Activities Pages

Your travel website should feature a number of informative and interactive pages to keep your
visitors engaged. For instance, you should create destination pages with the name of countries
and cities.You can create a destination page named Bali. Now, whenever a traveler visits the
particular destination page (i.e., Bali), they can see all the trips that belong to that particular
destination.

6
Similarly, you should create different activities pages like hiking, skiing, sightseeing tours, and
mountain biking to engage your visitors. After that, you can connect different trips to these fun
activities. Now, whenever clients visit your website, they can catch various activities and all the
trips in one place.

Social Media Integration

With the current digital marketing evolution, social media has become one of the principal
marketing channels. Whether you own a travel website or any website of any other niches, you
need social media to promote your respective business.

As per the study carried by Statista, about 43% of internet users use social networks to research
products and services online. Subsequently, social media is an effective way to stay connected
with your potential customers and make them consistent contributors to your business.

Travelers often prefer to share their adventure experiences on social platforms. Besides, they
love to make recommendations and even interact with each other via social platforms. Having a
website integrated into social media platforms helps you to keep your visitors engaged with
your business.

Whenever you design a website for your travel agency, you need to make sure that the theme
you use includes social media integration. You should be able to place links to your social media
accounts like Facebook, Instagram, and Twitter on noticeable areas of your website. The social
media integration feature is the crucial driver for customer engagement and online reputation
management strategy.

Requirement gathering
 Analyzing Existing Documents

Reviewing the documentation of an existing system can help when creating AS–
IS process document, as well as driving gap analysis for scoping of migration
projects. In an ideal world, we would even be reviewing the requirements that
drove creation of the existing system – a starting point for documenting current
requirements. Nuggets of information are often buried in existing documents that
help us ask questions as part of validating requirement completeness.

 Interface analysis

Interfaces for a software product can be human or machine. Integration with external
systems and devices is just another interface. User centric design approaches are very
effective at making sure that we create usable software. Interface analysis – reviewing

7
 the touch points with other external systems is important to make sure we don’t
overlook requirements that aren’t immediately visible to users.

 Research similar websites

 Mind Maps
 Questionnaires/Surveys
 Joint Application Design/JAD

Some of the benefits of JAD include:

 Consolidation of months of work into a structured workshop

 Clarifies specification requirements in an environment of consensus
 Identifies open issues and parties responsible for their resolution
 Ties together the steps of the design process in a concise document
 Increases user satisfaction by directly involving users in the design
process
 Builds commitment through the use of the executive sponsor
 Builds a sense of belonging and helps create a cohesive team through
the physical and social setting

Functionalities of the system

 Responsive Design

In today’s digital world, creating and maintaining an attractive website is not a

difficult proposition - it’s a relatively low-overhead investment travel companies
can ill afford not to make. Responsive design capabilities, which allow for more
dynamic aesthetics and integration with mobile devices like smartphones, tablets,
and laptops are a core driver in providing customers with an engaging, easy to
navigate web experience that puts the emphasis on the products and services
offered rather than the website itself. Simply put, a customer should not have to
struggle with your website in order to research and book their trip - the
experience should be seamless and convenient so the traveler doesn’t think
twice about visiting your website in the future. 

8
 Effective Payment Integration

Offering customers the maximum available options for payment should be a core
principle in any travel website’s functionality. Because a majority of today’s
travelers possess multiple credit, debt, bank, or prepaid cards, providing
customers with well-integrated, user-friendly payment methods can go a long
way to cementing long-term B2C relationships. In addition, employing the
necessary software to store a customer’s preferred payment method creates the
same level of convenience and service as predictive search software, and can be
a deciding factor in whether a traveler returns to your website in the future.

 Google Map Integration

As the de facto online mapping service, incorporating Google Maps into your
travel website makes it easy for travelers to research the areas and interests
surrounding their destination, which has the potential to result in additional
bookings. For example, say a customer is searching for a hotel option and using
Google Maps discovers a cultural excursion only a few blocks from a certain
hotel. This could very well be a driving factor in which hotel the customer selects,
which can be a value proposition for travel companies in regards to packaging
products and services.

 Social Media

Travelers like to tell stories of their travels - they like to interact with other
travelers, share experiences, make recommendations, and so on. Today, much
of these conversations happen in the social media realm on sites like Facebook,
Twitter, and Instagram, and travel companies with user-friendly social
integrations on their website better position themselves to take part in these
conversations and use them as a key driver for customer engagement and online
reputation management strategies.

9
  Compelling Photos and Images

In the restaurant industry, it’s said people go to restaurants for the food, but
return for the service. In the travel industry, customers will engage with a travel
website for the content and products (the food), but will return for the service (the
extras). In this case, incorporating compelling images, photos, graphics, and
other visual elements can go a long way in enticing a customer and engendering
a certain level of brand loyalty, particularly if the website is branded toward a
specific segment of the market.

As you can see, travel websites today go beyond a basic HTML home page with
static images, simplistic payment options, and little to transparency of
information. Instead, a travel website must function as a robust arm of a travel
company’s business model. But travel companies also need to leverage their
websites as more than just a tool for e-commerce - rather than a platform for
selling products and services, a travel website should be utilized as a method to
increase customer engagement and create lasting relationships with travelers on
a global level.

Design Chapter-

Wire diagrams and site map for web sites

A good design is not only about aesthetics, but it’s also about user interaction. The design of
your website is more critical for conversions than you think.

Once the wireframing and site architecture is in place, the designers start working towards
visual elements.

In this step, designers start working on the visual brand. You can actually visualize how
your website will look. The layout, the screens, buttons, headers and footers, navigation,
photos, videos, and other visual elements are all added in this step of the website
development process.

As discussed earlier, the designers need to keep the application’s target audience in mind
and design websites according to the taste and preference of the target audience.The
website layout (including color, logos images etc) needs to be discussed with the client and
tailor-made according to his preferences and target audience’s taste.

10
Wire diagrams

Home Page

Map

11
Activities Selection

Food & Drink Selection

12
Contact Us

Activity

13
Hotels

Site Map

14
Implementation Chapter-

Software technologies used

 HTML
 CSS
 Visual Studio Code

Hardware requirements

Hardware Minimum requirements

Computer 2 GHz minimum, multi-core processor

Memory At least 4Gb, preferably higher.

(RAM)
Expect the desktop edition to consume an average
of 350mb memory

Hard disk 500 MB

space

Monitor Screen resolution of at least 1280x800

Key Board, Mouse

Software requirements
15
Software Minimum requirements

Operating Windows 10, Windows Server 2012 or later

system
Mac, Linux or other non-Windows operating
systems are not supported.

Microsoft .NET v4.6.1 or higher required.

framework

Recommended Software

Supported Browsers
People often ask what browser they should use. There is no single answer for this.
Use whichever browser works best on your computer. However, we recommend
downloading Firefox and/or Chrome in addition to having Internet Explorer or
Safari.

 Mozilla Firefox
 Google Chrome
 Firefox
 Chrome

Other important software:

 Java
 Adobe Flash Player
 Adobe Reader
 Microsoft Edge

Description of important code snippets

16
CSS code
Make animation Text on Image when mouse pointer come on image the text will appear and
we can read it.

.dots span
{
    width: 5px;
    height:5px;
    background-color: currentColor;
    border-radius: 50%;
    display:block;
  opacity:0;
  transition: transform 0.4s ease-out, opacity 0.5s ease;
  transform: translateY(30px);
 
}

.tile:hover span
{
  opacity:1;
  transform:translateY(0px);
}

.dots span:nth-child(1)
{
   transition-delay: 0.05s;
}
.dots span:nth-child(2)
{
   transition-delay: 0.1s;
}
.dots span:nth-child(3)
{
   transition-delay: 0.15s;
}

Java Code

This code moving images horizontal automatically wen page open

17
     <script type="text/javascript">
     
     var index = 0;
var slides = document.querySelectorAll(".slides");
var dot = document.querySelectorAll(".dot");

function changeSlide(){

  if(index<0){
    index = slides.length-1;
  }
 
  if(index>slides.length-1){
    index = 0;
  }
 
  for(let i=0;i<slides.length;i++){
    slides[i].style.display = "none";
    dot[i].classList.remove("active");
  }
 
  slides[index].style.display= "block";
  dot[index].classList.add("active");
 
  index++;
 
  setTimeout(changeSlide,2000);
 
}

changeSlide();
     
     </script>

This is html code for adding embedded map for web page

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3968.3595627321274!2d80.45628474985027!3d5.94508679567235!2m3!1f0!2f0!3f0!3m2!

18
1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae13fd4994e1e13%3A0xabfec3e163349acd!2sSalt
%20Mirissa%20Hotel%20And%20Reasturant!5e0!3m2!1sen!2slk!4v1667049800085!5m2!1sen!
2slk" width="600" height="450" style="border:0;" allowfullscreen=""
loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Make a navigation button when web page view with small screens
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

Make a form and submit button on a web page

<form action="/action_page.php">
                           <div class="form-group">
                              <input type="text" class="email-bt"
placeholder="Name" name="Name">
                           </div>
                           <div class="form-group">
                              <input type="email"  id="email" class="email-bt"
placeholder="Email" name="email">
                           </div>
                           <div class="form-group">
                              <input type="number" class="email-bt"
placeholder="Phone Numbar" name="Email">
                           </div>
                           <div class="form-group">
                              <textarea class="massage-bt" placeholder="Massage"
rows="5" id="comment" name="Massage"></textarea>
                           </div>
                        </form>
                        <div class="send_btn"><a href="">Submit</a></div>

Make selection options with image frames

<div class="gallery">
        <a href="Negombo.html">
         <img src="images/09.jpg" alt="Cinque Terre" width="800" height="400">
      </a>

19
        <div class="desc">
          <h1><center><font color="blue">Negombo</font></center></h1>
          <p class="desc"></p>
        </div>
        </div>
      <div class="gallery">
        <a href="Mirissa.html">
         <img src="images/08.jpg" alt="Cinque Terre" width="800" height="400">
      </a>
        <div class="desc">
          <h1><center><font color="blue">MIRISSA</font></center></h1>
          <p class="desc"></p>
        </div>
        </div>
      <div class="gallery">
        <a href="Trincomalee.html">
         <img src="images/14.jpg" alt="Cinque Terre" width="800" height="400">
      </a>
        <div class="desc">
          <h1><center><font color="blue">Trincomalee</font></center></h1>
          <p class="desc"></p>
        </div>
        </div>
      <div class="gallery">
        <a href="Gall.html">
         <img src="images/02.jpg" alt="Cinque Terre" width="800" height="400">
      </a>
        <div class="desc">
          <h1><center><font color="blue">Galle</font></center></h1>
          <p class="desc"></p>
        </div>
        </div>
      <div class="gallery">
        <a href="Benthota.html">
         <img src="images/04.jpg" alt="Cinque Terre" width="800" height="400">
      </a><div class="desc"><h1><center><font
color="blue">Benthota</font></center></h1> <p class="desc"></p>
        </div>
        </div>
Testing Chapter-

Questionnaire to check customer satisfaction

1. Was the website visually pleasing to you?

20
 2. Was the website quick to load?

3. Was our website easy to navigate?

4. To what extent are you satisfied with the content of the website?

5. What more can we do to improve our website?

6. Is there anything you would like to see on the website?

7. How easy was it to find the information you needed on our website?

8. Which mode of travel did you choose?

9. What type of hotel / resort do you prefer?

10. What is your favorite feature of the product or service?

11. What are the important features that we are missing?

12. Does the product help you achieve your goals?

13. Do you have any suggestions for improvements?

14. How would you rate the quality of service?

15. How satisfied were you with the amount of time it took to resolve your

issue?
16. Do you feel like customer support representatives acted in your best

interest?
17. How does our product/service make you feel?

18. Did the description of our product on the website match what you

received?
19. What would you say to someone who asked about us?

Checklist to check the quality of the product

1. Create a Proper Website Structure

21
 2. Make Sure Website is Responsive & Mobile-Friendly

3. Focus on Website’s Speed and Performance

4. Make a Proper Keyword Strategy

5. Write Descriptive and Structured Content

• Create a Focus on Keyword Placement

• Proper Blog Post Title

• Use Subheadings Properly

• Write a Proper Meta Description

• Use Images & Videos on post and optimize them

• Focus on Internal Links

6. Use Short and Descriptive URL

7. Use Tantalizing and Expressive Images

8. Use Social Media Channels

9. Analyze Your Competitors

10.Create Destination Landing Pages

Discussion Chapter –

Summary of work done

22
Working on any project alone does have a lot of external pressure and internal
emotions to do justice to the work. I tried my best not to corrupt the project with
my personal opinion, not to reinvent the wheel and focus more on data rather
than emotion.

I can’t deny the fact that there are hundreds of competitors out there who are
also actively working on improving their product.

The main pressure that I felt was the implementation, choosing the stack, dividing
the design into components, Code Structure, Data Modelling, jwtToken, Stripe,
and email setup besides planning out the API in the middle of the development
stage. I found a free design for the front-end which I curated to my requirements
and build the rest on top of it and learn about solutions for the problems that I
faced through youtube tutorials, stack overflow, and Udemy course especially
Jonas’s Node.js course. I will happily admit that there were moments that this
weight got the best of me and at times I did feel like going through imposter
syndrome.

This project has allowed challenging my mental strength allowing me to create a

fine balance between resolve when a complex problem occurs, not panicking in
failure, and be content with the output when complies with input (when going
through iterations).

Finally, I would like to that I have really enjoyed the project. While I feel that
there is still room for improvement, I am happy with the result. I will take all the
lessons learned in this project to the next one.

Lessons learn
As the Internet has moved from a channel of technology to a channel of sales and
customer relationship, the tourism industry has to revolutionize its website

23
performance evaluation strategies with new approaches that can assist
practitioners to evaluate customer preferences, and thus to improve the
websites' business value. In other words, there is a pressing need for the tourism
industry to go beyond the traditional methods of analyzing website performance.
Although the preceding section provides adequate evidence for the interests and
efforts of tourism researchers, prior studies widely dispersed into different
regional or sector specific analyses instead of examining the issue for the tourism
industry at large. In addition, the fact that no single method outperformed others
in all aspects strongly indicates the need to develop more standardized
approaches and evaluation criteria to measure performance of tourism websites.
It further implies that both academic researchers and industry practitioners need
to apply more innovative approaches in developing and analyzing website
development for business purposes. The adoption of a set of standardized
approaches can assist practitioners to understand how appealing their websites
are to users and whether their websites offer the solutions that their customers
are looking for. This, in turn, would lead to an improved web experience
After doing this project I learn,
 How to engage in meaningful collaboration.
 To see nuance and multiple perspectives.
 To become divergent thinker.
 Project management.
 Develop a maker mindset.
 Become problem-solver and critical thinker.
 Communication Development
 Perseverance
 Launching a profitable business with actual documentation of real-world
business metrics: profit, loss, cost control, etc.
 Helping local businesses increase environmental sustainability
 Solving the problem of negative and/or ‘fake news.’

Future improvement

24
Add credibility triggers across the website
These triggers refer to things that make your tourism company appear more credible to
your customers. This can include certifications, memberships, recognition, local or
national press, reviews, and testimonials. Think of credibility triggers as items that
establish trust with your audiences.

Reviews and testimonials from places like Google and Facebook may already exist for
your tour business. If they do, pulling that content into your website is a great way to
leverage already existing feedback about your business and make it visible for new
users. You can add these testimonials to your site through plugins such as GatherUp or
TripAdvisor’s Widget.

Reach the right audiences with intelligent, targeted advertising

Targeting technology works just as many wonders for websites as it does for online
advertisers. Marketers who know their intended audience’s demographics can fine-tune
targeted ads to deliver highly relevant and specific messaging to website visitors.
Enabling retargeting pixels on website pages will enable DMOs to serve up relevant
content to visitors, either driving them to another section of the site or feeding
destination partner advertisements. The correct message that is properly targeted is
proven to increase viewer engagement and clickthrough rates, as well as ensuring
advertising budgets are being used efficiently.

Integrate robust trip planning capabilities

Visitors turn to a DMO’s website for an insider’s knowledge of the destination. Assist
them in planning their visit with an interactive map of attractions in the area. To
enhance the experience further, allow users to narrow down attractions included on the
map by specific verticals (can’t-miss craft breweries, LGBT hotspots, etc.)

In addition, integrating local hotels and lodging partners is a powerful tool for driving
bookings and supporting your website’s search and booking functionality.

Host a hub for video content

25
 Well-produced videos increase social engagement and motivate consumers. With this in
mind, it’s crucial for destinations to invest in producing robust, compelling video
content. Interactive virtual reality experiences, “highlight reels” and full web series
leverage the newest video capabilities to showcase the best your destination has to
offer.

Add Reviews and ratings page

Showing reviews and ratings on your website can be the cherry on top of the cake.
Adding them can significantly work towards improving the chances of more conversions
on site.

Add Feature USPs

If your company has unique benefits to offer to its visitors, then prominently display
them on your homepage. Doing so can not only convince your target audience to use
your services but turn into repeat customers.

Add Vacation planning online System

Add Advertising revenue management

Add Hotel shopping and dynamic ranking of pages

References

The future of online travel- https://link.springer.com/article

26
Get Information about select location of my web page

 https://www.roughguides.com/sri-lanka

 https://www.srilanka.travel

 https://www.lonelyplanet.com/sri-lanka

 http://www.srilankatravelguide.com

 https://www.yathratours.com

Hotel booking system information

 https://www.booking.com

Others

Wire frame design - https://www.figma.com

https://www.survio.com

https://survicate.com/customer-satisfaction

Html coding - https://www.youtube.com

https://www.srilanka.travel

To add maps - https://www.google.com/maps

27