VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Jnana Sangama, BELGAUM

Internship Report on

“TEMPLATE FOR TRAVEL BLOG SITE”

In partial fulfillment of the requirements for the award of the Degree of

BACHELOR OF ENGINEERING
IN
COMPUTER SCIENCE AND ENGINEERING
By

SWATI PANDEY 1AH20CS109

Under the guidance of

MS. NAGAVENI G
Assistant Professor, Dept. of CSE
ACS COLLEGE OF ENGINEERING, Bangalore

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

ACS COLLEGE OF ENGINEERING

KAMBIPURA, MYSORE ROAD, BANGLORE-74

2023-2024
 CS COLLEGE OF ENGINEERING
KAMBIPURA, MYSORE ROAD, BANGLORE-74

Department of Computer Science and Engineering

Certificate
Certified that the Internship Work entitled “TEMPLATE FOR TRAVEL BLOG SITE” is a
bonafide work carried out by MS. SWATI PANDEY (1AH20CS109), in partial fulfilment for the
award of Bachelor of Engineering in Computer science & Engineering of the Visvesvaraya
Technological University, Belgaum during the year 2023-2024. It is certified that all the
corrections/suggestions indicated for internal assessment have been incorporated in the report
deposited in the departmental library. The Internship Report has been approved as it satisfies the
academic requirements in respect of internship work prescribed for the said degree.

Signature of Guide Signature of HOD Signature of Principal

[MS. Nagaveni G] [Dr. T Senthil Kumaran] [Dr. Anandthirtha B Gudi]

S.No Name of The Examiners Signature With Date

1.
2.
 DECLARATION

I, Ms. SWATI PANDEY (1AH20CS109), hereby declare that the internship work entitled
“TEMPLATE FOR TRAVEL BLOG SITE” has been independently carried out by us under the
guidance of Ms. NAGAVENI G, Assistant Professor, Department of Computer Science &
Engineering, ACS College of Engineering, Bangalore, in partial fulfilment of the requirements of
the degree of Bachelor of Engineering in Computer Science & Engineering of Visvesvaraya
Technological University, Belgaum.

I further declare that we have not submitted this report either in part of in full to any other
university for the reward of any degree.

SWATI PANDEY (1AH20CS109)

Place: Bangalore
Date:
 ABSTRACT

The Travel Blog Website Development Project aims to create a dynamic and engaging online
platform dedicated to sharing travel experiences, insights, and recommendations. This project report
provides a comprehensive overview of the design, analysis, and development processes involved in
crafting a functional and user-friendly travel blog website. The project begins by defining clear
objectives, audience demographics, and market research to align the website with user needs and
industry trends. A robust content strategy is outlined, focusing on diverse content types and a
structured editorial calendar to ensure a continuous stream of relevant material.

The report highlights the significance of web analytics, monitoring, and user engagement tracking
tools for data-driven decision-making. Launch and promotion strategies, including deployment and
marketing, are outlined to ensure the website reaches its target audience effectively. Finally, the
project emphasizes the importance of ongoing maintenance, updates, and feedback loops to sustain
website relevance and growth. This comprehensive approach to the Travel Blog Website
Development Project culminates in a platform that not only meets its objectives but also offers an
enriching experience to travellers and enthusiasts alike.
 ACKNOWLEDGEMENT

I take this opportunity to express my sincere gratitude and respect to the ACS College of Engineering,
Bengaluru for providing me with an opportunity to carry out my mini project report.

I express my deep regards to our honourable Chairman Dr. A C Shanmugam for providing me an
opportunity to fulfilment my ambition in this prestige institute.

I would like to express my immense gratitude to Dr. Anandthirtha B Gudi, Principal, ACS College of
Engineering, Bengaluru, for his timely help and inspiration during the tenure of the course.

I express my sincere regards and thanks to Dr. T Senthil Kumaran, Professor & Head, Department of
Computer Science and Engineering, ACSCE, Bengaluru for the encouragement and support throughout
encouragement the work.

I hereby like to thank our Internship Coordinator M Venkatesh Kumar, Assistant Professor Dept.
of Computer Science and Engineering, for the encouragement and support.

With profound sense of gratitude, I acknowledge the guidance, support and encouragement to my guide
MS. NAGAVENI G, Assistant Professor, Dept. of Computer Science and Engineering, ACSCE,
Bengaluru.

I also extend my cordial thanks to MS. Spoorthi C, Director, Varcons Technologies Pvt. Ltd,
Bengaluru, for providing me an opportunity to carry out the internship in their organization.

SWATI PANDEY
(1AH20CS109)
 TABLE OF CONTENT

1 COMPANY PROFILE ............................................................................................................................ 1

1.1 A BRIEF HISTORY OF VARCONS TECHNOLOGIES .................................................................. 1
1.2 PRODUCTS OF VARCONS TECHNOLOGIES............................................................................... 2
2 INTRODUCTION .................................................................................................................................... 5
2.1 HTML.................................................................................................................................................. 7
2.2 CSS ...................................................................................................................................................... 8
2.3 JAVASCRIPT ..................................................................................................................................... 9
3 SYSTEM SPECIFICATIONS............................................................................................................... 11
3.1 HADWARE DESCRIPTION............................................................................................................ 11
3.2 SOFTWARE DESCRIPTION .......................................................................................................... 11
4 SYSTEM ANALYSIS ............................................................................................................................ 12
4.1 DEFINATION ................................................................................................................................... 12
4.2 REQUIREMENTS GATHERING .................................................................................................... 12
4.3 FUNTIONAL ANALYSIS ............................................................................................................... 12
4.4 NON-FUNCTIONAL ANALYSIS ................................................................................................... 13
4.5 DATA ANALYSIS ........................................................................................................................... 13
4.6 SYSTEM ARCHITECTURE ............................................................................................................ 13
4.7 CHALLENGES AND CONSIDERATION ...................................................................................... 13
5 DESIGN AND ANALYSIS .................................................................................................................... 14
5.1 OUTPUT DESIGN ........................................................................................................................... 14
5.2 INPUT DESIGN ............................................................................................................................... 14
6 IMPLIMENTATION…………………………………………………………………………………..17
6.1 HTML CODE………………………………………………………………………………………18
6.2 CSS CODE…………………………………………………………………………………………19
6.2.1 ADMIN-LOGIN………………………….………………………………………………………19
6.2.2 ADMIN-USER……………………………………………………………………………………20
6.2.3 STYLES…..………………………………………………………………………………………21
6.3 LOGIN JS…………...………………………………………………………………………………24
6.4 USER JS…………….………………………………………………………………………………25
6.5 SCRIPT JS………….……………………………………………………………………………….25
6.6 PHP..……………………………………………………………………………………..…………28
7 RESULT………………………..………………………………………………………………………33
CONCLUSION…………………………………………………………………………………………36
REFERENCE…………………………………………………………………………………………..37
 LIST OF FIGURES

FIG NO FIGURE NAME PAGE NO

5.1 SPIRAL MODEL 16

7.1 LANDING PAGE 33

7.2 HOME PAGE 33

7.3 LOGIN PAGE 34

7.4 SIGN-UP PAGE 34

7.5 TRAVEL PACKAGE MENU 35

7.6 HOTELS INFORMATION 35

 CERTIFICATE

Certificate of Internship
This is to certify that SWATI PANDEY whose USN is 1AH20CS109, has completed their Full Stack
Web Development Internship organized and handled by Varcons Technologies Pvt. Ltd from 13th
August 2023 to 22nd September 2023.

The person to whom this certificate is addressed to has worked on a project titled Template for a Travel
Blog Site. This project was aimed at creating fully-fledged functional web template(s) for a client of ours.
As part of the project, they designed functional web pages, used databases to collect, store, and sort data, by
understanding the design briefs and client specifications that were provided in the project proposal.

During the course of the internship, they demonstrated good design skills with a self-motivated attitude to
learning new things. Their performance exceeded expectations and was able to complete the project
successfully on time.

SpoorthiC

www.varconstech.com
[email protected]
213,2 st Floor,

18 M G Road, Ulsoor, Bangalore -560001

 Travel Blog

CHAPTER 1
COMPANY PROFILE

1.1 A Brief History of VARCONS TECHNOLOGIES

Varcons Technologies, was incorporated with a goal” To provide high quality and optimal

Technological Solutions to business requirements of our clients”. Every business is different and has a
unique business model and so are the technological requirements. They understand this and hence the
solutions provided to these requirements are different as well. They focus on client’s requirements and
provide them with tailor made technological solutions. They also understand that Reach of their Product
to its targeted market or the automation of the existing process into e-client and simple process are the key
features that our clients desire from Technological Solution they are looking for and these are the features
that we focus on while designing the solutions for their clients.

Varcons Technologies is a Technology Organization providing solutions for all web design and
development, MYSQL, PYTHON Programming, HTML, CSS, ASP.NET and LINQ. Meeting the ever-
increasing automation requirements, Sarvamoola Software Services. specialize in ERP, Connectivity,
SEO Services, Conference Management, effective web promotion and tailor-made software products,
designing solutions best suiting client’s requirements.

Varcons Technologies, strive to be the front runner in creativity and innovation in software development
through their well-researched expertise and establish it as an out of the box software development
company in Bangalore, India. As a software development company, they translate this software
development expertise into value for their customers through their professional solutions.

They understand that the best desired output can be achieved only by understanding the clients’ demand
better. Varcons Technologies work with their clients and help them to define their exact solution
requirement. Sometimes even they wonder that they have completely redefined their solution or new
application requirement during the brainstorming session, and here they position themselves as an IT
solutions consulting group comprising of high Caliber consultants.

They believe that Technology when used properly can help any business to scale and achieve new
heights of success. It helps Improve its efficiency, profitability, reliability; to put it in one sentence”
Technology helps you to Delight your customers” and that is what we want to achieve.

Varcons Technologies is a Technology Organization providing solutions for all web design and
development, MYSQL, PYTHON Programming, HTML, CSS, ASP.NET and LINQ. Meeting the ever-

Dept. of CSE, ACSCE 2023-2024 Page | 1

 Travel Blog
increasing automation requirements, Varcons Technologies specialize in ERP, Connectivity, SEO Services,
Conference Management, effective web promotion and tailormade software products, designing solutions best
suiting clients’ requirements. The organization where they have the right mix of professionals as a stakeholder
to help us serve our clients with the best of our capability and with at par industry standards. They have
young, enthusiastic, passionate and creative Professionals to develop technological innovations in the field of
Mobile technologies, Web applications as well as Business and Enterprise solution. The motto of our
organization is to “Collaborate with our clients to provide them with the best Technological solution hence
creating Good Present and Better Future for our client which will bring a cascading a positive effect in their
business shape as well”. Providing a Complete suite of technical solutions is not just our tag line, it is Our
Vision for Our Clients and for Us, we strive hard to achieve it.

1.2 Products of Varcons Technologies

Android Apps

It is the process by which new applications are created for devices running the Android operating system.
Applications are usually developed in Java (and/or Kotlin; or other such option) programming language
using the Android software development kit (SDK), but other development environments are also
available, some such as Kotlin support the exact same Android APIs (and bytecode), while others such as
Go have restricted API access.

The Android software development kit includes a comprehensive set of development tools. These include a
debugger, libraries, a handset emulator based on QEMU, documentation, sample code, and tutorials. Currently
supported development platforms include computers running Linux (any modern desktop Linux distribution),
Mac OS X 10.5.8 or later, and Windows 7 or later. As of March 2015, the SDK is not available on Android
itself, but software development is possible by using specialized Android applications.

Web Application

It is a client–server computer program in which the client (including the user interface and client- side logic)
runs in a web browser. Common web applications include web mail, online retail sales, online auctions, wikis,
instant messaging services and many other functions. web applications use web documents written in a standard
format such as HTML and JavaScript, which are supported by a variety of web browsers. Web applications can
be considered as a specific variant of client–server software where the client software is downloaded to the
client machine when visiting the relevant web page, using standard procedures such as HTTP. The Client web
software updates may happen each time the web page is visited. During the session, the web browser interprets
and displays the pages, and acts as the universal client for any web application. The use of web application
frameworks can often reduce the number of errors in a program, both by making the code simpler, and by
allowing one team to concentrate on the framework while another focuses on a

Dept. of CSE, ACSCE 2023-2024 Page | 2

 Travel Blog

\specified use case. In applications which are exposed to constant hacking attempts on the Internet, security-
related problems can be caused by errors in the program.

Frameworks can also promote the use of best practices such as GET after POST. There are some who view
web applications as a two-tier architecture. This can be a “smart” client that performs all the work and queries
a “dumb” server, or a “dumb” client that relies on a “smart” server. The client would handle the presentation
tier, the server would have the database (storage tier), and the business logic (application tier) would be on one
of them or on both. While this increases the scalability of the applications and separates the display and the
database, it still doesn’t allow for true specialization of layers, so most applications will outgrow this model.
An emerging strategy for application software companies is to provide web access to software previously
distributed as local applications. Depending on the type of application, it may require the development of an
entirely different browser-based interface, or merely adapting an existing

application to use different presentation technology. These programs allow the user to pay a monthly or
yearly fee for use of a software application without having to install it on a local hard drive. A company
which follows this strategy is known as an application service provider (ASP), and ASPs are currently
receiving much attention in the software industry.

Security breaches on these kinds of applications are a major concern because it can involve both enterprise
information and private customer data. Protecting these assets is an important part of any web application and
there are some key operational areas that must be included in the development process. This includes
processes for authentication, authorization, asset handling, input, and logging and auditing. Building security
into the applications from the beginning can be more effective and less disruptive in the long run.

Web design

It is encompassing many different skills and disciplines in the production and maintenance of websites.
The different areas of web design include web graphic design; interface design; authoring, including
standardized code and proprietary software; user experience design; and search engine optimization. The
term web design is normally used to describe the design process relating to the front-end (client side)
design of a website including writing mark up. Web design partially overlaps web engineering in the
broader scope of web development. Web designers are expected to have an awareness of usability and if
their role involves creating markup then they are also expected to be up to date with web accessibility
guidelines. Web design partially overlaps web engineering in the broader scope of web development.

Dept. of CSE, ACSCE 2023-2024 Page | 3

 Travel Blog
Departments and services offered
Varcons Technologies plays an essential role as an institute, the level of education, development of
student’s skills are based on their trainers. If you do not have a good mentor, then you may lag in many
things from others and that is why we at Varcons Technologies give you the facility of skilled employees
so that you do not feel unsecured about the academics. Personality development and academic status are
some of those things which lie in a mentor’s hands. If you are trained well then you can do well in your
future and knowing its importance of Varcons Technologies always tries to give you the best.

They have a great team of skilled mentors who are always ready to direct their trainees in the best
possible way they can and to ensure the skills of mentors we held many skill development programs as
well so that each and every mentor can develop their own skills with the demands of the companies so
that they can prepare a complete packaged trainee.

Services provided by the Varcons Technologies

• Core Java and Advanced Java

• Web services and development

• Dot Net Framework

• Python

• Selenium Testing

• Conference / Event Management Service

• Academic Project Guidance

• On The Job Training

• Software Training

Dept. of CSE, ACSCE 2023-2024 Page | 4

 Travel Blog

CHAPTER 2
INTRODUCTION
Introduction to Web Development

Web development is the process of creating websites or web applications that are accessible via the World Wide
Web or private networks. It involves a combination of technical skills, creativity, and problem-solving abilities
to design and build websites that meet specific requirements and objectives.
At its core, web development encompasses various disciplines, including:

Web Design: This involves designing the visual layout and user interface of a website, focusing on factors such
as aesthetics, usability, and user experience. Designers use tools like Adobe Photoshop, Sketch, or Figma to
create mock-ups and wireframes before translating them into actual web pages using HTML, CSS, and
JavaScript.

Frontend Development: Frontend developers are responsible for implementing the design of a website and
creating interactive user interfaces. They use HTML for structuring content, CSS for styling, and JavaScript
for adding dynamic behaviour to web pages. Popular frontend frameworks like React.js, Angular, and Vue.js
help streamline development and enhance productivity.

Backend Development: Backend developers build the server-side logic and database functionality that powers
web applications. They work with programming languages like Python, Ruby, PHP, or Node.js to handle tasks
such as processing user input, managing data, and communicating with external services. Frameworks like
Django, Ruby on Rails, Laravel, and Express.js provide tools and libraries to expedite backend development.

Full-Stack Development: Full stack web development refers to the practice of building both the front-end and
back-end parts of a web application. In essence, a full stack developer is proficient in handling both the client-
side (front-end) and server side (back-end) aspects of web development.

Here's a breakdown of the components involved in full stack web development:

Front-end Development: This involves everything the user interacts with directly in a web browser. Front-end
development typically includes:
HTML (Hypertext Markup Language): The backbone of web pages, defining the structure and content.
CSS (Cascading Style Sheets): Used to style the HTML elements, defining layout, colors, fonts. JavaScript: A
programming language that enables dynamic content, interactivity, and manipulation of the HTML and CSS.
Popular JavaScript libraries and frameworks include React, Angular, and Vue.js.

Dept. of CSE, ACSCE 2023-2024 Page | 5

 Travel Blog
Back-end Development: This involves the server-side logic and operations that power the web application and
manage data. Back-end development typically includes:

Server: Software responsible for handling incoming requests from clients, processing them, and sending back
appropriate responses. Common server-side technologies include Node.js (with frameworks like Express.js),
Python (with frameworks like Django or Flask), Ruby on Rails, PHP, and Java.
Database: Storage for the application's data. Common types of databases include relational databases like
MySQL, PostgreSQL, and SQLite, as well as NoSQL databases like MongoDB, CouchDB, and Redis.
Application Logic: Business logic and algorithms that govern how the application functions, including user
authentication, data validation, and processing.
Middleware: Middleware is software that acts as a bridge between the front-end and back-end components,
facilitating communication and data exchange. It can include frameworks, libraries, and services used to handle
tasks like routing, authentication, and API integration.

Version Control Systems: Full stack developers often use version control systems like Git to manage code
changes, collaborate with team members, and track project history.

Deployment and Hosting: Once the application is built, it needs to be deployed to a server so that it can be
accessed by users over the internet. This involves tasks like configuring servers, managing domain names, and
ensuring the application's security and performance.

Web Security: Ensuring the security of web applications is paramount to protect sensitive data and prevent
unauthorized access. Web developers implement security measures such as encryption, authentication, and
authorization to safeguard against common threats like cross-site scripting (XSS), SQL injection, and CSRF
attacks. Responsive Design: With the proliferation of mobile devices, responsive web design has become
essential to ensure optimal user experience across various screen sizes and devices. Web developers use
techniques like fluid grids, flexible images, and media queries to create websites that adapt seamlessly to
different viewport sizes.

Dept. of CSE, ACSCE 2023-2024 Page | 6

 Travel Blog

2.1 HTML
HTML (Hypertext Markup Language) serves as the backbone of virtually every webpage across the internet. It
plays a pivotal role in providing structure and semantic meaning to content, enabling browsers to render text,
images, videos, and various multimedia elements in a coherent and organized manner. For frontend developers,
a thorough understanding of HTML is paramount as it lays the groundwork for creating compelling and
accessible web experiences.

At its core, HTML is a markup language comprised of tags that define the structure of a webpage. These tags
encapsulate content elements and furnish instructions to the browser on how to display them. For instance, the
<h1> tag denotes a top-level heading, <p> signifies paragraphs, <img> denotes images, and <a> specifies
hyperlinks.

Central to HTML is the principle of semantic markup, which entails utilizing tags that convey the meaning and
intent of the content they encapsulate. This practice not only aids search engines in comprehending the context
of the page but also enhances accessibility for users with disabilities who rely on screen readers for navigation.

HTML5, the latest iteration of HTML, introduced an array of new semantic tags such as <header>, <nav>,
<main>, <section>, <article>, and <footer>. These tags furnish clearer structure and organization to webpages,
thereby promoting improved Search Engine Optimization (SEO) and enabling developers to craft more
responsive and accessible layouts.

In tandem with CSS (Cascading Style Sheets) and JavaScript, HTML forms the foundation of frontend web
development. CSS is utilized to style and layout HTML elements, whereas JavaScript augments interactivity
and dynamic behaviour to webpages.
Frontend developers must exhibit proficiency in HTML to forge well-structured, semantically significant
webpages optimized for performance, accessibility, and user experience. By mastering HTML, developers can
erect websites and web applications that effectively disseminate information, engage users, and furnish
seamless browsing experiences across diverse devices and platforms.

Dept. of CSE, ACSCE 2023-2024 Page | 7

 Travel Blog

2.2 CSS
Cascading Style Sheets (CSS) are fundamental to frontend web development, serving as the cornerstone for
styling and visually enhancing web pages. CSS empowers developers to control the layout, design, and
presentation of HTML content, enabling them to create engaging, responsive, and aesthetically pleasing user
interfaces.

CSS operates by defining rules that dictate how HTML elements should be displayed in a browser. These rules
encompass a wide range of properties, such as color, typography, spacing, positioning, and animation, allowing
developers to customize the appearance of web content to suit specific design requirements and user
preferences.

One of the key principles of CSS is the concept of cascading, which refers to the process by which multiple
style rules are applied to an HTML element, with the most specific rule taking precedence. This hierarchical
nature of CSS enables developers to create modular and maintainable stylesheets by organizing rules into
reusable classes, IDs, and selectors.
Selectors are a crucial aspect of CSS, as they determine which HTML elements will be affected by a given style
rule. Selectors can target elements based on their tag name, class, ID, attributes, or hierarchical relationships
within the document structure. This flexibility allows developers to apply styles selectively to specific elements
or groups of elements, thereby achieving fine grained control over the presentation of content.

CSS3, the latest version of CSS, introduced a plethora of advanced features and capabilities that further enhance
the flexibility and expressiveness of stylesheets. These include support for gradients, shadows, transitions,
transforms, flexbox,
Grid layout, and responsive design techniques, enabling developers to create Sophisticated and visually
compelling user interfaces.

In addition to basic styling, CSS can also be used to implement interactive and dynamic behaviour in web pages
through the use of pseudo-classes and pseudo elements. Pseudo-classes allow developers to target elements
based on their state or position within the document, while pseudo elements enable the creation of virtual
elements that can be styled independently of the document structure.

CSS preprocessors like Sass and Less have gained popularity in recent years for their ability to extend the
functionality of CSS with features such as variables, mixing, nested rules, and inheritance. These preprocessors
streamline the process of writing and managing complex stylesheets, while also promoting code reusability and
maintainability.

Dept. of CSE, ACSCE 2023-2024 Page | 8

 Travel Blog

2.3 JavaScript
JavaScript, a versatile and ubiquitous programming language, serves as the cornerstone of modern web
development. Initially conceived as a tool for enhancing static web pages with dynamic behaviour, JavaScript
has evolved into a full-fledged language capable of powering complex web applications, server side systems,
and even mobile and desktop applications.

At its core, JavaScript enables developers to create interactive experiences within web browsers. With its syntax
resembling that of other programming languages like Java and C, JavaScript offers familiarity to developers
while providing unique features tailored for web development.

One of JavaScript's fundamental capabilities lies in its ability to manipulate the Document Object Model
(DOM). The DOM represents the structure of HTML documents as a tree of objects, and JavaScript allows
developers to dynamically alter this structure, update content, and respond to user interactions. By attaching
event listeners to HTML elements, developers can trigger JavaScript code in response to various user actions,
such as clicks, mouse movements, or keyboard inputs. This interactivity forms the foundation of modern web
applications, enabling fluid user experiences.

JavaScript also facilitates asynchronous programming, crucial for handling tasks such as fetching data from
servers without freezing the user interface. Through features like callbacks, promises, and async/await,
developers can execute non-blocking code, ensuring smooth performance and responsiveness.

Furthermore, JavaScript supports various data types, including numbers, strings, Booleans, arrays, and objects.
Variables, declared using keywords like var, let, or const, enable developers to store and manipulate data values
within their programs. Functions, another essential aspect of JavaScript, allow for the encapsulation and reuse
of code, promoting modularity and maintainability.

Beyond the browser, JavaScript has expanded its reach into server-side development with the advent of Node.js.
Node.js allows developers to use JavaScript to build scalable and high performance server applications. This
convergence of front-end and back-end development under a unified language fosters synergy and efficiency
within development teams.

Moreover, JavaScript has seen widespread adoption in the realm of mobile app development, particularly with
frameworks like React Native. By leveraging JavaScript's capabilities, developers can build cross-platform
mobile applications that run seamlessly on both iOS and Android devices, reducing development time and
effort.

Dept. of CSE, ACSCE 2023-2024 Page | 9

 Travel Blog

In addition to mobile apps, JavaScript powers desktop applications through frameworks such as Electron.
Electron enables developers to create desktop applications using web technologies, opening up new avenues
for building cross-platform desktop software with familiar web development tools and workflows.

JavaScript's ecosystem is enriched by a vast array of libraries and frameworks, each catering to specific needs
and preferences. From jQuery for simplifying DOM manipulation to React, Angular, and Vue.js for building
robust web applications, developers have a wealth of tools at their disposal to streamline development and
enhance productivity.

In conclusion, JavaScript stands as a foundational technology in the modern web development landscape. Its
versatility, ranging from interactive web experiences to server-side applications and cross-platform mobile and
desktop apps, underscores its importance in shaping the digital world. As the web continues to evolve,
JavaScript remains an essential skill for developers seeking to innovate and create compelling experiences
across diverse platforms and devices.

Dept. of CSE, ACSCE 2023-2024 Page | 10

 Travel Blog

CHAPTER 3
SYSTEM SPECIFICATIONS
System analysis is a crucial phase in the development of the Travel Blog Website. It involves a comprehensive
examination of the project's requirements, goals, and constraints to ensure the successful design and
implementation of the website. This note highlights the key aspects of system analysis for the travel blog
project.

3.1 HARDWARE DESCRIPTION

The selection of hardware is very important in the existence and proper working of any
software. When selecting hardware, the size and requirements are also important.

Minimum Requirements:
Processor : INTEL Core, 450MHz
RAM : 128MB
Hard Disk Drive : 3GB
Video : 800X600, 256 colors

The proposed System is developed on:

Processor : INTEL Core
RAM : 2GB
Hard Disk Drive : 40GB
Key Board : Standard 101/102 or Digi Sync Family
Monitor : LCD
Display Adapter : Trident Super VGA
Network Adapter : SMC Ethernet Card Elite 16 Ultra
Mouse : Logitech Serial Mouse

3.2 SOFTWARE DESCRIPTION

Operating System : Windows XP and higher
Front- End : HTML,CSS,JAVA SCRIPT Back- End
: Django, sqlite3.

Dept. of CSE, ACSCE 2023-2024 Page | 11

 Travel Blog

CHAPTER 4
SYSTEM ANALYSIS

4.1 Definition:
System analysis is a crucial phase in the development of the Travel Blog Website. It involves a comprehensive
examination of the project's requirements, goals, and constraints to ensure the successful design and
implementation of the website. This note highlights the key aspects of system analysis for the travel blog
project.

4.2 Requirements Gathering:

The primary objective of system analysis is to gather and document the project's requirements. This includes
understanding the needs and expectations of various stakeholders, such as the website owners, content creators,
and users. Key requirements to consider include:
• User Registration and Authentication: Determine the user registration process, login mechanisms, and user
profile management.
• Content Management: Analyse how blog posts and multimedia content will be created, edited, and organized
on the website.
• Interactivity: Define features that promote user engagement, such as commenting on blog posts, sharing
content on social media, and liking posts.
• Search Functionality: Explore search options to help users find specific destinations, blog posts, or travel tips
efficiently.
• Integration: Identify external services to integrate, such as maps for displaying travel destinations or third-
party booking services.

4.3 Functional Analysis:

In this phase, the functional requirements of the website are thoroughly examined. Key considerations include:
• User Roles: Define different user roles, such as visitors, registered users, and administrators, and specify
their respective privileges and responsibilities.
• User Experience (UX): Evaluate the user experience by defining intuitive navigation, responsive design, and
user-friendly interfaces.
• Database Requirements: Determine the types of data to be stored, relationships between data entities, and the
choice of a database system.

Dept. of CSE, ACSCE 2023-2024 Page | 12

 Travel Blog

4.4 Non-Functional Analysis:

Apart from functional requirements, non-functional aspects must be addressed, including:
• Security: Identify potential security threats and implement measures to protect user data and the website from
vulnerabilities.
• Performance: Ensure the website loads quickly and efficiently, even during peak traffic periods.
• Scalability: Plan for future growth and the ability to handle increased user traffic and content volume.
• Usability: Design the website to be user-friendly, accessible, and compliant with web accessibility standards
(e.g., WCAG).

4.5 Data Analysis:

Examine data requirements in detail:
• Data Models: Define data models for user profiles, blog posts, comments, and other relevant entities.
• Data Validation: Implement validation rules to ensure data integrity and accuracy.
• Data Storage: Decide on the storage architecture, whether it's a relational database or a NoSQL

4.6 System Architecture:

Determine the high-level architecture of the system:
• Technology Stack: Choose the appropriate technologies for front-end and back-end development, ensuring
they align with project goals and scalability requirements.
• Hosting: Select a hosting platform for deploying the website, considering factors such as cost, scalability,
and performance.

4.7 Challenges and Considerations:

• Content Management: Develop a robust content management system (CMS) to streamline content creation
and publication.
• Security: Prioritize security measures, including encryption, authentication, and authorization, to protect user
data and the website from cyber threats.
• Scalability: Prepare for scalability to accommodate an increasing user base and growing content library.
• Performance Optimization: Continuously optimize website performance to ensure a seamless user
experience.

Dept. of CSE, ACSCE 2023-2024 Page | 13

 Travel Blog

CHAPTER 5
DESIGN AND ANALYSIS
The most creative and challenging face of the system development is System Design. It provides the
understanding and procedural details necessary for implementing the system recommended in the feasibility
study. Design goes through the logical and physical stages of development. In designing a new system, the
system analyst must have a clear understanding of the objectives, which the design is aiming to fulfil. The first
step is to determine how the output is to be produced and in what format. Second, input data and master files
have to be designed to meet the requirements of the proposed output. The operational phases are handled
through program construction and testing.
Design of a system can be defined as a process of applying various techniques and principles for the purpose
of defining a device, a process or a system in sufficient detail to permit its physical realization. Thus system
design is a solution to “how to” approach to the creation of a new system. Thus important phase provides the
understanding and the procedural details necessary for implementing the system recommended in the feasibility
study. The design step provides a data design, architectural design, and a procedural design.

5.1 OUTPUT DESIGN

In the output design, the emphasis is on producing a hard copy of the information requested or displaying the
output on the CRT screen in a predetermined format. Two of the most output media today are printers and the
screen. Most users now access their reports from a hard copy or screen display. Computer’s output is the most
important and direct source of information to the user, efficient, logical, output design should improve the
systems relations with the user and help in decision-making.

As the outputs are the most important source of information to the user, better design should improve the
system’s relation and also should help in decision-making. The output device’s capability, print capability, print
capability, response time requirements etc should also be considered form design elaborates the way output is
presented and layout available for capturing information. It’s very helpful to produce the clear, accurate and
speedy information for end users.

5.2 INPUT DESIGN

In the input design, user-oriented inputs are converted into a computer based system format. It also includes
determining the record media, method of input, speed of capture and entry on to the screen. Online data entry
accepts commands and data through a keyboard. The major approach to input design is the menu and the prompt

Dept. of CSE, ACSCE 2023-2024 Page | 14

 Travel Blog
design. In each alternative, the user’s options are predefined. The data flow diagram indicates logical data flow,
data stores, source and destination. Input data are collected and organized into a group of similar data. Once
identified input media are selected for processing.

In this software, importance is given to develop Graphical User Interface (GUI), which is an important factor
in developing efficient and user-friendly software. For inputting user data, attractive forms are designed. User
can also select desired options from the menu, which provides all possible facilities.
Also the important input format is designed in such a way that accidental errors are avoided. The user has to
input only just the minimum data required, which also helps in avoiding the errors that the users may make.
Accurate designing of the input format is very important in developing efficient software. The goal or input
design is to make entry as easy, logical and free from errors.

5.3 LOGICAL DESIGN

Logical data design is about the logically implied data. Each and every data in the form can be designed in such
a manner to understand the meaning. Logical data designing should give a clear understanding and idea about
the related data used to construct a form.

5.4 User Experience (UX) Design

Information Architecture: Design the website's structure and navigation to make it easy for users to find
content.
Responsive Design: Ensure the website is responsive and functions well on various devices, including
desktops, tablets, and smartphones.
Accessibility: Follow web accessibility standards (e.g., WCAG) to make the website usable for people
with disabilities.
Wireframes and Prototypes: Create wireframes and prototypes to visualize the layout and functionality of the
website.

Dept. of CSE, ACSCE 2023-2024 Page | 15

 Travel Blog

5.5 Process Model

DEFINITION - The spiral model, also known as the spiral lifecycle model, is a systems development method
(SDM) used in information technology (IT). This model of development combines the features of the
prototyping model and the waterfall model. The spiral model is intended for large, expensive, and complicated
projects.

FIG 5.1: SPIRAL MODEL

Dept. of CSE, ACSCE 2023-2024 Page | 16

 Travel Blog

CHAPTER 6
IMPLEMENTATION
Implementation is the stage where the theoretical design is turned into a working system. The most crucial
stage in achieving a new successful system and in giving confidence in the new system for the users that
it will work efficiently and effectively.

The system can be implemented only after thorough testing is done and if it is found to work according to
the specification. It involves careful planning, investigation of the current system and it constraints on
implementation, design of methods to achieve the changeover and an evaluation of change over methods a
part from planning.

Two major tasks of preparing the implementation are education and training of the users and testing of the
system. The more complex the system being implemented, the more involved will be the system analysis and
design effort required just for implementation.

The implementation phase comprises of several activities. The required hardware and software acquisition
is carried out. The system may require some software to be developed. For this, programs are written and
tested. The user then changes over to his new fully tested system and the old system is discontinued.

TESTING

The testing phase is an important part of software development. It is the Information Zed system will help
in automate process of finding errors and missing operations and also a complete verification to determine
whether the objectives are met, and the user requirements are satisfied. Software testing is carried out in
three steps:

1. The first includes unit testing, where each module is tested to provide its correctness, validity and also
determine any missing operations and to verify whether the objectives have been met. Errors are noted
down and corrected immediately.

2. Unit testing is an important and major part of the project. So, errors are rectified easily in particular
modules and program clarity is increased. In this project the entire system is divided into several
modules and is developed individually. So, unit testing is conducted to individual modules.

3. The second step includes Integration testing. It need not be the case, the software whose modules when
run individually and showing perfect results, will also show perfect results when run as a whole.

Dept. of CSE, ACSCE 2023-2024 Page | 17

 Travel Blog

6.1 HTML CODE

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./css/addjourney.css">
<title>Admin - Add Journey</title>
<style> body {
background-image: url('./images/beach-sunset-bg.jpg'); background-size: cover;
background-repeat: no-repeat; background-attachment: fixed; /* Ensures the image doesn't scroll
with the content */ font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>TravelScapes</h1>
<form method="post" action="addjourney.php">
<h2>Add Journey </h2><hr weight="4px">
<label for="city">City:</label>
<input type="text" id="city" name="city" placeholder="City"><br><br>

<label for="region">Region:</label>
<input type="text" id="region" name="region" placeholder="Region"><br><br>

<label for="season">Season:</label>
<input type="text" id="season" name="season" placeholder="Season"><br><br>

<label for="days">Days:</label>
<input type="number" id="days" name="days" placeholder="Days"><br><br>

<label for="cost">Cost:</label>
<input type="number" id="cost" name="cost" placeholder="Cost"><br><br>
<input type="submit" value="Add Journey">
</form>
</body>
</html>

Dept. of CSE, ACSCE 2023-2024 Page | 18

 Travel Blog

6.2 CSS CODE

6.2.1 Admin-Login

* { padding: 0; margin: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-decoration: none;
}

body {
background-color: #f5f5f5;
display: flex; align-items: center;
justify-content: center; height:
100vh;
}

div.login-form {
width: 500px; /* Increase the width of the form */ background-color: white;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); border:
1px solid #ccc; border-radius: 5px;
}

div.login-form h2 {
text-align: center; background-color:
#e84393; padding: 12px 0px; color:
white; border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

div.login-form form { padding: 30px

60px;
}

div.login-form form div.input-field {

display: flex; flex-direction: row;
margin: 10px 0px;
}

div.login-form form div.input-field i { color:

#4a4a4a; padding: 10px 14px; background-
color: #f5f5f5; margin-right: 4px; border:
1px solid #ccc; border-radius: 5px;
}

div.login-form form div.input-field input {

background-color: #f5f5f5; padding: 10px;

Dept. of CSE, ACSCE 2023-2024 Page | 19

 Travel Blog
border: 1px solid #ccc; width: 100%; border-
radius: 5px;
}

div.login-form form button { width: 100%;

background-color: #e84393; padding: 8px;
border: none; font-size: 16px; font-weight:
500; color: white; margin: 15px 0;
transition: background-color 0.4s; border-
radius: 5px;
}

div.login-form form button:hover { background-color: #ff6384;

}

div.login-form form div.extra { font-size:

14px; display: flex; flex-direction: row;
justify-content: space-between;
}

div.login-form form div.extra a:first-child { color: #4a4a4a;

}

div.login-form form div.extra a:last-child {

color: grey;
}

.back-button { display: inline-block;

padding: 10px 20px; background-color:
#4a4a4a; color: white; text-decoration:
none; border-radius: 5px; margin: 20px;
font-weight: bold; transition: background-
color 0.3s;
}

.back-button:hover { background-color:
#e84393; color: white;
}

6.2.2 Admin-User
body { font-family: Arial, sans-serif;
background-color: #f7e5e6;
}

h2 { color: #4a4a4a;
margin: 10px 0; font-size:
24px; font-weight: bold;
}

Dept. of CSE, ACSCE 2023-2024 Page | 20

 Travel Blog

.table-container { margin: 50px auto; width:

80%; background-color: #ffffff; padding: 20px;
border-radius: 10px; box-shadow: 0 0 10px rgba(0,
0, 0, 0.1);
}

.data-table { width: 100%;

margin-top: 20px; border: 2px
solid black;
}

.data-table th, .data-table td { padding: 10px;

text-align: left; border-bottom: 1px solid
#ddd;
}

.data-table th { background-color: #ff8b94;

color: white;
}

.small-font { font-size: 14px;

color: #777; margin-top: 5px;
}

.back-button { display: inline-

block; padding: 10px 20px; background-
color: #4a4a4a; color: white; text-
decoration: none; border-radius: 5px;
margin: 20px; font-weight: bold;
transition: background-color 0.3s;
}

.back-button:hover { background-color:
#ff8b94; color: #4a4a4a;
}

6.2.3 Styles

/* Global Styles */ body {

background-color: #fff; /* White background */ color:
#e84393; /* Pink text color */ font-family: Arial, sans-serif;
margin: 0; padding: 0;
}

h1 {
color: #e84393; /* Pink color for headings */
text-align: center; margin-top: 20px;

Dept. of CSE, ACSCE 2023-2024 Page | 21

 Travel Blog
}

/* Filter Form Styles */ .filter-

container { display: flex; flex-
direction: row; align-items: center;
}

.filter-select { margin: 10px;

}

/* Hotel Table Styles */ table {

border-collapse: collapse; width: 100%;
}

th, td {
border: 1px solid #e84393; /* Pink border */

padding: 8px; text-align: left;

}

th {
background-color: #e84393; /* Pink background for table headers */ color: #fff; /*
White text color for table headers */
}

/* Amenities Column Styles */ .amenities-column { width: 30%; /*

Reduce the width of the amenities column */ transition: width 0.3s; /*
Add a smooth transition effect */
}

.amenities-column:hover {
width: 30%; /* Reduce width on hover */
}

.amenities-list { display: none;

position: absolute;
background-color: #f9f9f9; padding:
10px; border: 1px solid #ccc;
}

.amenities-column:hover .amenities-list {
display: block; width: min-
content;
}

.amenity-item { font-weight: bold;

}

Dept. of CSE, ACSCE 2023-2024 Page | 22

 Travel Blog
/* "Book Now" Button Styles */
.book-button {
background-color: #e84393; /* Pink background for the button */
color: #fff; /* White text color */ padding:
8px 16px; text-align: center; text-
decoration: none; display: inline-block;
border: none; cursor: pointer; border-
radius: 5px;
}

.book-button:hover {
background-color: #ff6384; /* Lighter pink on hover */
}
.filter-container { display: flex;
flex-direction: row; align-items:
center;
}

.filter-select { margin: 10px;

}

.amenities-column { width: 30%; /* Reduce the width of the amenities

column */ transition: width 0.3s; /* Add a smooth transition effect */
}

.amenities-column:hover {
width: 30%; /* Reduce width on hover */
}

.amenities-list { display: none;

position: absolute; background-color:
#f9f9f9; padding: 10px; border: 1px
solid #ccc;
}

.amenities-column:hover .amenities-list {
display: block; width: min-
content;
}

.amenity-item { font-weight: bold;

}

/* Style for the "Book now" button */

.book-button { background-color:
blue; color: white; padding: 8px
16px; text-align: center; text-
decoration: none; display: inline-

Dept. of CSE, ACSCE 2023-2024 Page | 23

 Travel Blog
block; border: none; cursor:
pointer; border-radius: 5px;
}

/* Navbar Styles */ .navbar {

background-color: white; overflow:
hidden;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
padding: 15px 0; /* Increase vertical padding to increase the height */
}

/* Logo Styles */ .logo {

float: left;
padding: 10px 20px;
font-size: 24px; color:
#e84393;
}

/* Footer Styles */ footer { position:

absolute; bottom: 0; background-
color: white; text-align: center;
padding: 15px 0; /* Increase footer height */ font-size: 16px;
width: 100%; /* Full-width footer */ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /*
Shadow at the top of the footer */ transition: background-color 0.3s, color 0.3s; /* Smooth
hover transition */ }

footer:hover {
color: #e84393; /* Pink text color on hover */
}

/* Content Container Styles */ .content-container {

background-color: #f2f2f2; border: 1px solid #e84393;
border-radius: 15px; box-shadow: 0px 4px 8px rgba(0,
0, 0, 0.2); margin: 20px auto; /* Center the container */
padding: 20px;
width: 60%; /* Adjust the width as needed */ }

6.3 LOGIN JS

document.addEventListener("DOMContentLoaded", function () {
// Function to show the login and signup container function
showLoginSignup() { const container =
document.getElementById("container"); container.style.display =
"block"; // Show the container
}

Dept. of CSE, ACSCE 2023-2024 Page | 24

 Travel Blog
setTimeout(showLoginSignup, 5000); // 5000 milliseconds = 5 seconds

// Rest of your JavaScript code for handling login/signup toggling const

signUpButton = document.getElementById('signUp'); const signInButton =
document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () =>
container.classList.add('right-panel-active'));

signInButton.addEventListener('click', () =>
container.classList.remove('right-panel-active'));
});

6.4 USER JS

const mongoose = require("mongoose");

const UserSchema = new mongoose.Schema(
{ username: { type:
String, required: true,
unique: true,
}, email: { type:
String, required: true,
unique: true,
},
password: { type: String,
required: true,
}, profilePic: {
type: String, default: "",
},
},
{ timestamps: true }
);
module.exports = mongoose.model("User", UserSchema);

6.5 SCRIPT JS

let navbar = document.querySelector('.navbar')

document.querySelector('#menu-bar').onclick = () =>{
navbar.classList.toggle('active');

}
document.querySelector('#close').onclick = () =>{ navbar.classList.remove('active');
}

window.onscroll = () =>{

Dept. of CSE, ACSCE 2023-2024 Page | 25

 Travel Blog
navbar.classList.remove('active');

if(window.scrollY > 100){

document.querySelector('header').classList.add('active');
}else{
document.querySelector('header').classList.remove('active');
}

let themeToggler = document.querySelector('#theme-toggler');

themeToggler.onclick = () =>{ themeToggler.classList.toggle('fa-sun');

if(themeToggler.classList.contains('fa-sun')){
document.querySelector('body').classList.add('active');
}else{
document.querySelector('body').classList.remove('active');
}
}

document.querySelectorAll('.small-image-1').forEach(images =>{ images.onclick = () =>{

document.querySelector('.big-image-1').src = images.getAttribute('src');
}
});

document.querySelectorAll('.small-image-2').forEach(images =>{ images.onclick = () =>{

document.querySelector('.big-image-2').src = images.getAttribute('src');
}
});

document.querySelectorAll('.small-image-3').forEach(images =>{ images.onclick = () =>{

document.querySelector('.big-image-3').src = images.getAttribute('src');
}
});

let countDate = new Date('aug 19, 2023 00:00:00').getTime();

function countDown(){
let now = new Date().getTime(); gap =
countDate - now;

let seconds = 1000;

let minutes = seconds * 60;
let hours = minutes * 60;
let days = hours * 24;

Dept. of CSE, ACSCE 2023-2024 Page | 26

 Travel Blog
let d = Math.floor(gap / (days)); let h = Math.floor((gap %
(days)) / (hours)); let m = Math.floor((gap % (hours)) /
(minutes));
let s = Math.floor((gap % (minutes)) / (seconds));

document.getElementById('days').innerText = d; document.getElementById('hours').innerText = h;
document.getElementById('minutes').innerText = m;
document.getElementById('seconds').innerText = s;

setInterval(function(){ countDown()
},1000);

var swiper = new Swiper(".product-slider", {

slidesPerView: 3,
loop:true, spaceBetween:
10, autoplay: { delay:
4000,
disableOnInteraction: false,
},
navigation: { nextEl: ".swiper-button-
next", prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
550: { slidesPerView: 2,
},
800: { slidesPerView: 3,
},
1000: {

slidesPerView: 3,
},
},
});

var swiper = new swiper(".review-slider", {

slidesPerView: 3, loop:true,
spaceBetween: 10, autoplay: {
delay: 4000,
disableOnInteraction: false,
},
breakpoints: {
0: {
slidesPerView: 1,

Dept. of CSE, ACSCE 2023-2024 Page | 27

 Travel Blog
},
550: {
slidesPerView: 2,
},
800: {
slidesPerView: 3,
},
1000: {
slidesPerView: 3,
},
},
});

6.6 PHP
-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Oct 19, 2023 at 10:13 PM
-- Server version: 10.4.28-MariaDB
-- PHP Version: 8.2.4

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

START TRANSACTION;
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS
*/;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `travelscapes`
--

--
-- Table structure for table `admin_login`
--
CREATE TABLE `admin_login` (
`srno` int(3) NOT NULL,
`Admin_Name` varchar(100) NOT NULL,
`Admin_Password` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

Dept. of CSE, ACSCE 2023-2024 Page | 28

 Travel Blog

--
-- Dumping data for table `admin_login`
--

INSERT INTO `admin_login` (`srno`, `Admin_Name`, `Admin_Password`) VALUES (1, 'Admin',

'Admin'),
(2, 'Tejas', 'Tejas'),
(3, 'atharva', 'atharva'),
(4, 'yash' , 'Yash');

--
-- Table structure for table `cities`
--
CREATE TABLE `cities` (
`cityid` int(4) NOT NULL,
`city` varchar(255) NOT NULL,
`region` varchar(255) NOT NULL,
`season` varchar(255) NOT NULL,
`days` int(2) NOT NULL,
`cost` int(9) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

--
-- Dumping data for table `cities`
--
INSERT INTO `cities` (`cityid`, `city`, `region`, `season`, `days`, `cost`) VALUES
(1, 'Chennai', 'South', 'Winter', 3, 30000),

(2, 'Ladakh', 'North', 'Summer', 7, 50000),

(3, 'Manali', 'North', 'Monsoon', 5, 35000),
(4, 'Mumbai', 'West', 'Winter', 3, 15000),
(5, 'Pune', 'West', 'Winter', 3, 15000),
(6, 'Rajasthan', 'North-West', 'Winter', 7, 40000),
(7, 'Goa', 'West', 'Summer', 3, 15000),
(8, 'Kerala', 'South', 'Monsoon', 5, 21000),
(9, 'Sikkim', 'North-East', 'Winter', 7, 55000);

--
-- Table structure for table `hotels`
--
CREATE TABLE `hotels` (
`hotelid` int(11) NOT NULL,
`hotel` varchar(255) NOT NULL,
`cityid` int(11) DEFAULT NULL,
`cost` decimal(10,2) DEFAULT NULL,

Dept. of CSE, ACSCE 2023-2024 Page | 29

 Travel Blog
`amenities` text DEFAULT NULL,
`ratings` int(1) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

--
-- Dumping data for table `hotels`
--

INSERT INTO `hotels` (`hotelid`, `hotel`, `cityid`, `cost`, `amenities`, `ratings`) VALUES
(1, 'Maple Hermitage', 1, 6000.00, '1. 24*7 Room Service\r\n2. Fine-Dining\r\n3. Free WiFi\r\n4.
CCTV Surveillance\r\n5. Swimming Pool', 3),
(2, 'Trident', 2, 7000.00, '1. 24*7 Room Service\r\n2. Fine-Dining\r\n3. Free WiFi\r\n4. CCTV
Surveillance\r\n5. Swimming Pool', 5),
(3, 'JW Marriott', 5, 7000.00, '1. 24*7 Room Service\r\n2. Fine-Dining\r\n3. Free WiFi\r\n4.
CCTV Surveillance\r\n5. Swimming Pool', 5),
(4, 'The Taj', 4, 9000.00, '1. 24*7 Room Service\r\n2. Fine-Dining\r\n3. Free WiFi\r\n4. CCTV
Surveillance\r\n5. Swimming Pool', NULL),
(5, 'The Leela Palace', 3, 8000.00, '1. 24*7 Room Service\r\n2. Fine-Dining\r\n3. Free WiFi\r\n4.
CCTV Surveillance\r\n5. Swimming Pool', 5),
(6, 'Ritz Carlton', 7, 8000.00, '1. 24*7 Room Service\r\n2. Fine-Dining\r\n3. Free WiFi\r\n4.
CCTV Surveillance\r\n5. Swimming Pool', 5),
(7, 'Kohinoor', 6, 5000.00, '1. 24*7 Water Supply\r\n2. Fine-Dining\r\n3. Free WiFi\r\n4. CCTV
Surveillance\r\n5. Swimming Pool', 3),
(8, 'Taj Exotica', 8, 7000.00, '1. 24*7 Room Service\r\n2. Fine-Dining\r\n3. Free WiFi\r\n4.
CCTV Surveillance\r\n5. Swimming Pool', 5),
(9, 'Tunga International', 9, 7000.00, '1. 24*7 Room Service\r\n2. Fine-Dining\r\n3. Free
WiFi\r\n4. CCTV Surveillance\r\n5. Great Views', 5);

--
-- Table structure for table `login`
--
CREATE TABLE `login` (
`usersid` int(4) NOT NULL,
`usersEmail` varchar(128) NOT NULL,
`usersuid` varchar(128) NOT NULL,
`userspwd` varchar(128) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

--
-- Dumping data for table `login`
--

INSERT INTO `login` (`usersid`, `usersEmail`, `usersuid`, `userspwd`) VALUES (1,

'[email protected]', 'test',
'$2y$10$flekLyq.6a/gn12Xsdm0v.SZZCrx3/.Pm3M3Ucvel8MwCzReorRsq'),
(2, '[email protected]', 'test2',

Dept. of CSE, ACSCE 2023-2024 Page | 30

 Travel Blog
'$2y$10$uqx8Jk9IDXZ8q1x4JFPR5OYiaCKYTquxsXH6A0OM7hTXkpEKXzjJG'),
(3, '[email protected]', 'test3',
'$2y$10$OGLEA.ETOj1DB0fRhjjuduKb4OJ75.WB5wgs5UVUBPjTMbcoUVVgy'),
(5, '[email protected]', 'test4',
'$2y$10$ikw.LpmUCDlMTuK2qdUyNuueZOn2Zrqkg4WLEuUaqDFLYh4YjrIlC');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `admin_login`
--
ALTER TABLE `admin_login`
ADD PRIMARY KEY (`srno`);

--
-- Indexes for table `cities`
--
ALTER TABLE `cities`
ADD PRIMARY KEY (`cityid`);

--
-- Indexes for table `hotels`
--
ALTER TABLE `hotels`
ADD PRIMARY KEY (`hotelid`),
ADD KEY `hotels_ibfk_1` (`cityid`);

--
-- Indexes for table `login`
--
ALTER TABLE `login`
ADD PRIMARY KEY (`usersid`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `admin_login`
--
ALTER TABLE `admin_login`
MODIFY `srno` int(3) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

--
-- AUTO_INCREMENT for table `cities`

Dept. of CSE, ACSCE 2023-2024 Page | 31

 Travel Blog
--
ALTER TABLE `cities`
MODIFY `cityid` int(4) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;

--
-- AUTO_INCREMENT for table `hotels`
--
ALTER TABLE `hotels`
MODIFY `hotelid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
--
-- AUTO_INCREMENT for table `login`
--
ALTER TABLE `login`
MODIFY `usersid` int(4) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

--
-- Constraints for dumped tables
--

--
-- Constraints for table `hotels`
--
ALTER TABLE `hotels`
ADD CONSTRAINT `hotels_ibfk_1` FOREIGN KEY (`cityid`) REFERENCES `cities` (`cityid`) ON
DELETE CASCADE;
COMMIT;

Dept. of CSE, ACSCE 2023-2024 Page | 32

 Travel Blog

CHAPTER 7
RESULT

FIG 7.1 : LANDING PAGE

FIG 7.2 : HOME PAGE

Dept. of CSE, ACSCE 2023-2024 Page | 33

 Travel Blog

FIG 7.3 : LOGIN PAGE

FIG 7.4 : SIGN-UP PAGE

Dept. of CSE, ACSCE 2023-2024 Page | 34

 Travel Blog

FIG 7.5 : TRAVEL PACKAGE MENU

FIG 7.6 : HOTELS INFORMATION

Dept. of CSE, ACSCE 2023-2024 Page | 35

 Travel Blog

CONCLUSION
The following conclusions can be deduced from the development of the project:

In conclusion, creating a travel blog website using HTML, CSS, and PHP has been a rewarding journey that
combines creativity with technical skill. HTML provided the structure for the website, enabling a clear and
organized presentation of content. CSS added style and visual appeal, making the blog aesthetically pleasing
and engaging for visitors. PHP offered the functionality needed to dynamically generate content and interact
with users, such as processing comments and submissions. By integrating these technologies, I was able to
create a cohesive and user-friendly platform that showcases my travel experiences effectively. This process
has deepened my understanding of web development and inspired me to continue refining my skills to
enhance the user experience even further.

Looking ahead, there is still room for growth and improvement on the travel blog website. I plan to continue
optimizing the site for performance and accessibility, ensuring it runs smoothly across various devices and
internet speeds. Additionally, I aim to enhance the user experience by incorporating more interactive features,
such as real-time maps and personalized travel recommendations. As technology evolves, I will stay up to
date with the latest web development trends and best practices to keep the website fresh and engaging.
Ultimately, my goal is to create a platform that not only showcases my travel adventures but also serves as a
valuable resource for fellow travellers and enthusiasts.

Dept. of CSE, ACSCE 2023-2024 Page | 36

 Travel Blog

REFERENCE

BOOKS
• The Full Stack Developer - Chris Northwood.
• Learning web design - Jennifer Niederst Robbins.

• C. Brown, et al., "Responsive Web Design: Principles and Best Practices," International Journal of
Human-Computer Interaction, vol. 34.

WEBSITES
• https://youtu.be/YXPyB4XeYLA
• http://www.getbootstrap.com
• https://www.youtube.com/watch?v=KWyOoYQHv3M
• JavaScript - https://www.w3schools.com/js/
• CSS - https://www.w3schools.com/css/

Dept. of CSE, ACSCE 2023-2024 Page | 37