A Web-based project

on

“Hotel Trip Hub”

Submitted By:
Dharmendra Kumar Sah
Reg. No.: B. Tech-CSE-190050/2019
Roll No.: - 1923355050

Session: 2019-2023

Submitted to:

Dr. Sanjay Kumar

Assistant
professor
H.O.D (Computer Science and
Technology)
The Department of Computer Science and Information Technology in partial
fulfillment of the requirements for the award of the Degree
B.Tech. Computer Science
2023
Radha Govind University Lalki Ghati Ramgarh, Jharkhand- 819122
i
 RADHA GOVIND UNIVERSITY
Established by the Jharkhand Legislative Act No.14 of 2018 and approved under section 2(f) of
UGC Act 1956
DEPARTMENT OF COMPUTER SCIENCE AND TECHNOLOGY
(Managed by Radha Govind Shiksha Swasthaya Trust, Ramgarh)
Radha Govind Nagar, Lalki Ghati, Ramgarh, Jharkhand, Pin-829122

Ref.No.RGU/……………………. Date:………..………….

CERTIFICATE

This is to certify that Mr. Dharmendra Kumar Sah, Reg No. B.Tech-CSE-
190050/2019, University No.- 1923355050 has successfully completed the
requirements for the dissertation/research work titled “A web-based on
“Hotel Trip Hub” under the supervision of Dr. Sanjay Kumar, Head &
Assistant Professor, Department of Computer Science and Technology, in partial
fulfillment of the requirements for the Bachelor’s Degree at Radha Govind
University, Ramgarh.

The dissertation/research work was completed to the satisfaction of the

examining committee and meets the academic standards required by the
university.

…………………………… ..…….………………………..

Signature of Students Signature of Guide

Dr. Sanjay Kumar,
Assistant Professor,
Department of Computer Science and Technology,
Radha Govind University,
Ramgarh, Jharkhand
Pin No.- 829122

…………………………… ..…….………………………..

Signature of HOD Signature of External Examiner

iii
 ACKNOWLEDGEMENT

I would like to acknowledge all those whose guidance and encouragement has helped
me to complete our project. I avail this opportunity to express my deep sincere
gratitude and thanks to department of Computer Science & Technology, Radha
Govind University, Ramgarh that has always been a tremendous source of
inspiration.

I would also like to thank my project head Dr. SANJAY KUMAR, Assistant
Professor, Department of Computer Science & Technology, Radha Govind University
for his valuable suggestion.

I would also like to thank all Faculty, non-teaching staff and my colleague of
Department of Computer Science & Technology, Radha Govind University who
contribute directly or indirectly for the successful completion of this project

Finally due thanks also go to all those who despite their heavy schedules gave me
time to provide extreme detailed information without this project would not have been
possible.

Finally, I wish to express my sincere thanks to my beloved family for their

unconditional love, continuous encouragement, and multifaceted support throughout
the years.

Place: Ramgarh Student Name

Dharmendra Kumar Sah
Date: …………………

iv
 INDEX

CHAPTER 1: INTRODUCTION ......................................................................................................1

Introduction ..................................................................................................................2
Purpose ....................................................................................................................... 2
Scope .......................................................................................................................... 3
Limitation ..................................................................................................................... 3
Technology used. ......................................................................................................... 4
CHAPTER 2: SURVEY OF TECHNOLOGIES................................................................................ 5
HTML........................................................................................................................ 6
CSS ............................................................................................................................ 7
JAVA SCRIPT. .......................................................................................................... 7
My SQL ..................................................................................................................... 8
BOOTSTRAP............................................................................................................. 9
AJAX ........................................................................................................................9
2.7 PHP… ...................................................................................................................... 10
CHAPTER 3: REQUIREMENTS AND ANALYSIS ...................................................................... 11
Hardware and Software Requirements .................................................................12
Hardware Requirements............................................................................. 12
Software Requirements ............................................................................ 12
Functional and Non-functional requirements ...................................................... 12
Modules ................................................................................................... 12
Use case model ....................................................................................... 13 a.
Admin......................................................................................13 b.
User .......................................................................................... 13
Functional Requirements .......................................................................... 14 a.
Admin of the Hotel...................................................................15 b.
User details ...............................................................................15
Non- functional Requirements ............................................................................ 15
Characteristics. ....................................................................................... 15
Constraints. ........................................................................................................ 15

CHAPTER 4: DESIGN METHODOLOGY / SYSTEM DESIGN ................................................. 16

Objectives. .............................................................................................................. 17
System architecture ................................................................................................. 17
v
 Functional design .................................................................................................... 17
Data Flow Diagram ................................................................................... 17 a.
0- Level DFD............................................................................. 18 b. 1-
Level DFD............................................................................. 19 c. 2-
Level DFD. ............................................................................ 20
ER Diagram ............................................................................................. 21

CHAPTER 5: IMPLEMENTATION AND TESTING ................................................................. 23

Coding. ............................................................................................................................. 24
Index page ..........................................................................................................24
Admin Login page.............................................................................................. 36
5.1.3 Admin Dashboard .............................................................................................. 37
Admin Site Settings. ............................................................................................ 42
User Registration & Login Page .......................................................................... 48
User Profile ........................................................................................................ 51
Testing ............................................................................................................................... 52

CHAPTER 6: RESULTS AND DISCUSSIONS ............................................................................... 62

Screenshots ....................................................................................................................... 62 a.
Index ........................................................................................................................62 b.
Admin Login Page.................................................................................................... 64 c.
Admin Dashboard..................................................................................................... 64 d.
Admin Site Settings .................................................................................................. 65 e.
User Registration & Login Page................................................................................ 66 f.
User Profile ............................................................................................................... 67
Discussions. .......................................................................................................................67
CHAPTER 7: CONCLUSION AND FUTURE SCOPE.................................................................. 68
Conclusion. ............................................................................................................. 69
Future scope ............................................................................................................. 69
Bibliography.............................................................................................................................. 70

vi
 CHAPTER – 1
INTRODUCTION

1
 1. INTRODUCTION

Introduction

The project titled as “Hotel Trip Hub “is a web-based project which is an imaginary hotel. It
provides people all Over the world with an easy and fast way to book hotel rooms online. This project
provides a user-friendly and simple interface to let users easily book hotel rooms and perform
booking activities via Internet. The records are shared with not only Web users but also with
administrators to the site.
The project uses a regular Web browser with HTML (Hyper Text Markup Language) as the
basic interface language. Users can perform booking activities via the Internet browser. The
administrations also can view all users' files and maintain the Web site on it. The Web pages
are written in PHP (Hypertext Preprocessor) and stored in Apache server. All the data is stored in a My
SQL database and accessed by PHP.

The application is reduced as much as possible to avoid errors while entering the data. It also provides
error message while entering invalid data. No formal knowledge is needed for the user to use
this system. Thus, by this all it proves it is user-friendly. Hotel Trip Hub, as described above, can lead
to error free, secure, reliable and fast management system. It can assist the user to concentrate on their
other activities rather to concentrate on the record keeping. Thus, it will help organization in
better utilization of resources.

Everyone who knows how to use a Web browser can book rooms on specific date and finish the basic
payment process online. Users will receive a confirmed email included basic booking details after
finishing all steps in reservation.

Purpose:

The purpose of Hotel Trip Hub is to automate the existing manual system by the help of
computerized equipment and full-fledged computer software, fulfilling their requirements.
The Internet technology has been reached a significant achievement and we almost could get
any information we need via surfing on the Web browser at any time or anywhere where computer and
Internet are available. The Hotel Trip Hub offers a simulated environment to let users perform what
they could do in the real world via its simple and user-friendly interface. This system meets most

2
functions and efficiency of a real Web-based application of the real-life case and offers the extension
of future development for more completed capabilities.

Scope:

This project offers the following functionality:

1. Users can register at HotelTripHub hotel and then they can view or modify the personal profile.

2. Users can book a room on any specific date.

3. Users can view all their booking history at HotelTripHub Hotel.

4. Users can change and cancel the bookings.

5. Users can check the room availability at HotelTripHub Hotel before they book a room.

6. Administrators can change the quantity and price on all four types of rooms.

8. Administrators can change any specific booking details.

9. Administrators can cancel any specific booking.

10. Administrators can modify the details of static pages including room information, about
us information, contact us information, customer service Q&A details and privacy policy after
logon.

Limitations:
The HotelTripHub has the following limitations:
1. The HotelTripHub only offers users to book rooms within one year from current date and the
interval of every booking cannot be over certain number of days which the number is modified by the
administrators.
2. Users can book up to four rooms per purchase. If they need more than four, they need to re-book
again. It has the corresponding limit for the number of occupants (adults or children), which. depends on
the room quantity you choose.
3. Users only can change a specific booking details or cancel specific booking whose arrival days’
is
less than certain number of days (the number is modified by administrators) before today (system
time).
3
Technology used:

• HTML (Hyper Text Markup Language)

• CSS (Cascading Style Sheet)

• PHP (Hypertext Preprocessor)

• BOOTSTRAP

• JAVASCRIPT

• MySQL

• AJAX

4
 CHAPTER – 2

SURVEY OF TECHNOLOGIES

5
 2. SURVEY OF TECHNOLOGIES:

The technology selected for implementing “HotelTripHub”system is PHP/MySQL.

HTML
HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of HTML. Our HTML
tutorial is developed for beginners and professionals. In our tutorial, every topic is given step-by-step
so that you can learn it in a very easy way. If you are new in learning HTML, then you can learn
HTML from basic to a professional level and after learning HTML with CSS and JavaScript you will
be able to create your own interactive and dynamic website. But Now We will focus on HTML only in
this tutorial.

The major points of HTML are given below:

HTML stands for Hyper Text Markup Language.

HTML is used to create web pages and web applications.

HTML is widely used language on the web.

We can create a static website by HTML only.

Technically, HTML is a Markup language rather than a programming language.

HTML Example with HTML Editor

In this tutorial, you will get a lot of HTML examples, at least one example for each topic
with explanation. You can also edit and run these examples, with our online HTML editor.
Learning HTML is fun, and it is very easy to learn.

<!DOCTYPE>

<html>

<head>

<title>Web page title</title>

</head>

<body>

6
 </body>

</html>

CSS
CSS tutorial or CSS 3 tutorial provides basic and advanced concepts of CSS technology. Our CSS
tutorial is developed for beginners and professionals.

The major points of CSS are given below:

CSS stands for Cascading Style Sheet.

CSS is used to design HTML tags.

CSS is a widely used language on the web.

HTML, CSS, and JavaScript are used for web designing. It helps the web designers to apply
style on HTML tags.

CSS Example with CSS Editor

In this tutorial, you will get a lot of CSS examples, you can edit and run these examples with
our online CSS editor tool.

<!DOCTYPE>
<html>
<head>
<style>
h1{color: white; background-color: red; padding:5px;}
p{color:blue;}
</style>
</head>
<body>
<h1>Write Your First CSS Example</h1>
<p>This is Paragraph. </p>
</body>
</html>

JAVASCRIPT
JavaScript (js) is a light-weight object-oriented programming language which is used by
several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that
enables dynamic interactivity on websites when applied to an HTML document. It was introduced in
7
the year 1995 for adding programs to the webpages in the Netscape Navigator browser. Since then, it
has been adopted by all other graphical web browsers. With JavaScript, users can build modern web
applications to interact directly without reloading the page every time. The traditional website uses js
to provide several forms of interactivity and simplicity.

Although, JavaScript has no connectivity with Java programming language. The name was suggested
and provided in the times when Java was gaining popularity in the market. In addition to web
browsers, databases such as CouchDB and MongoDB uses JavaScript as their scripting and
query language.

Features of JavaScript:
There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution environments.

2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured
programming language.

3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the
operation). 4. JavaScript is an object-oriented programming language that uses prototypes rather
than using classes for inheritance.

5. It is a light-weighted and interpreted language.

MySQL
MySQL tutorial provides basic and advanced concepts of MySQL. Our MySQL tutorial is designed for
beginners and professionals.

MySQL is a relational database management system based on the Structured Query Language, which
is the popular language for accessing and managing the records in the database. MySQL is
open- source and free software under the GNU license. It is supported by Oracle Company.

Our MySQL tutorial includes all topics of MySQL database that provides for how to manage
database and to manipulate data with the help of various SQL queries. These queries are: insert
records, update records, delete records, select records, create tables, drop tables, etc. There are also
given MySQL interview questions to help you better understand the MySQL database.

MySQL is currently the most popular database management system software used for managing the
relational database. It is open-source database software, which is supported by Oracle Company. It is

8
fast, scalable, and easy to use database management system in comparison with Microsoft SQL
Server and Oracle Database. It is commonly used in conjunction with PHP scripts for creating
powerful and dynamic server-side or web-based enterprise applications.

It is developed, marketed, and supported by My SQL AB, a Swedish company, and written in
C programming language and C++ programming language. The official pronunciation of MySQL is not
the My Sequel; it is My Ess Que Ell. However, you can pronounce it in your way. Many small and big
companies use My SQL. My SQL supports many Operating Systems like Windows, Linux, Mac OS,
etc. with C, C++, and Java languages.

My SQL is a Relational Database Management System (RDBMS) software that provides many
things,which are as follows:

It allows us to implement database operations on tables, rows, columns, and indexes.

It defines the database relationship in the form of tables (collection of rows and columns),
also known as relations.

It provides the Referential Integrity between rows or columns of various tables.

It allows us to updates the table indexes automatically.

BOOTSTRAP
Bootstrap tutorial provides basic and advanced concepts of Bootstrap. Our Bootstrap tutorial is
designed for beginners and professionals.

Bootstrap is the popular HTML, CSS and JavaScript framework for developing a responsive
and mobile friendly website.

Our Bootstrap tutorial includes all topics of Bootstrap such as jumbotron, table, button, grid, form,
image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination,
pager, list group, dropdown, collapse, tabs, pills, navbar, inputs, modals, tooltip, popover and scroll
spy.

Ajax
AJAX tutorial covers concepts and examples of AJAX technology for beginners and professionals.

9
AJAX is an acronym for Asynchronous JavaScript and XML. It is a group of inter-related
technologies like JavaScript, DOM, XML, HTML/XHTML, CSS, XMLHttpRequest etc.

AJAX allows you to send and receive data asynchronously without reloading the web page. So it is fast.

AJAX allows you to send only important information to the server not the entire page. So only
valuable data from the client side is routed to the server side. It makes your application interactive and
faster.

Where is it used?

There are too many web applications running on the web that are using ajax technology like Gmail,
Facebook, twitter, google map, YouTube etc.

PHP
PHP is an open-source, interpreted, and object-oriented scripting language that can be executed at the
server-side. PHP is well suited for web development. Therefore, it is used to develop web applications
(an application that executes on the server and generates the dynamic page.).

PHP was created by Rasmus Lerdorf in 1994 but appeared in the market in 1995. PHP 7.4.0 is the
latest version of PHP, which was released on 28 November. Some important points need to be noticed
about PHP are as followed:

PHP stands for Hypertext Preprocessor.

PHP is an interpreted language, i.e., there is no need for compilation.
PHP is faster than other scripting languages, for example, ASP and JSP.
PHP is a server-side scripting language, which is used to manage the dynamic content of the
website.
PHP can be embedded into HTML.
PHP is an object-oriented language.
PHP is an open-source scripting language.
PHP is simple and easy to learn language.

10
 CHAPTER – 3
REQUIREMENTS AND ANALYSIS

11
3. REQUIREMENTS AND ANALYSIS:

Hardware and Software Requirements:

Hardware Requirements:

The minimum hardware requirement specifications for developing this project are as follows:

Processor : Standard processor with a speed of 1.6 GHz

RAM : 256 MB RAM or more
Hard Disk : 20 GB or more
Monitor : Standard colour monitor

Software Requirements:

The minimum software requirement specifications for developing this project are as follows:

Operating System : Windows(All versions)

Presentation layer : PHP, CSS, HTML, JS, BOOTSTRAP, AJAX
Database : My SQL
Presentation : Power Point 2003
Documentation Tools : Ms Office
Server : XAMPP Web Server
Browser : Internet Explorer 8 / Firefox / Chrome / Edge

Functional and Non-functional Requirements:

Modules

a. Admin of Hotel
b. User details

USE CASE MODEL:

a. Admin

Responsible for managing user records

12
 Login into the websites
Update the information
View/delete user details
Update and delete hotel lists
Update and delete features & facilities.

For Admin Login:

Fig: HotelTripHub Use case diagram (Admin)

b. Users

Rights to view and their personal details

Register into the website

Login into the website
View hotels rooms
Book or cancel hotels online.
View their payments details.

13
 Able to put reviews and ratings after staying.

For User Login:

Fig: HotelTripHub Use case diagram (Users)

Functional Requirements:

a. Admin of the hotel:

• The administrator should login into the system with unique his/her password and username.

• Administrator can manage hotels that will appear on the site with the hotel name, description,
facilities, phone, and fax.

• View the hotels can update and delete the hotels.

• Administrator can define the type of rooms in the hotels, rooms prices and upload an image
for each room

14
 • Admin can shut down booking option, this means bookings will be closed after activation of
this option.

• Admin able to edit customers booking information (updating check in, check out, room
preferences, bed preferences and cancelling booking).

b. User details:
• Customers can search hotels using check-in and check-out option as per their requirements.

• Customers able to cancel their booking from their account.

• Customers can book online and pay with credit or debit card.

• Customers can write reviews about hotels and apartment and also rate them.

• Customers able to check their booking status from their individual account.

Non –Functional Requirements:

The system must ensure that all the transferable data as for examples customers credit or debit
card number, CVV Code, e-payment should be done in secured connection.

The system must provide customers 24*7 hours online booking service.

The system must be able to handle multiple transactions a time.

The system should support almost all the browsers (Internet Explorer, Safari, Chrome, and
Firefox).

Customers need to cancel the booking before 24 hrs. otherwise their credit card will
be charged for one day.

Characteristics

User Should be aware of Internet.

User should have a valid login ID and password.

Admin and customers can access.

Constraints

Every user must be comfortable using computer

All operations are in English so user must have basic knowledge of English.

15
 CHAPTER – 4
DESIGN METHODOLOGY/SYSTEM DESIGN

16
4. DESIGN METHODOLOGY/SYSTEM DESIGN:
Objectives:

The main objective of the Project on “HotelTripHub” is to manage the details of Hotel, Booking,
Room Type. It manages all the information about Hotel, Facility. The project is totally built at
administrative end and thus only the administrator is guaranteed the access. The overall design
objective is to provide an efficient, modular design that will reduce the system’s complexity,
facilitate change and result in an easy implementation. This will be accomplished by designing
strongly cohesion system with minimal coupling. In addition, this document will provide interface
design modals that ate consistent user friendly and will provide straight forward transition through
the various system functions.

The purpose of the design phase is to develop a clear understanding of what the developer
wants people to gain from this project. As you the developer work on the project, the test for every
design decision should be “Does this feature fulfil the ultimate purpose of the project?”
The design Document will verify that the current design meets all the explicit requirements contained
in the system modal as well as the implicit requirements desired.

System Architecture:

The Software Requirements specification is produced at the culmination of the analysis task. The
function and performance allocated to software as part of system engineering are refined by
establishing a complete information description, a detailed functional and behavioural description, an
indication of performance requirements and design constraints, appropriate validation criteria, and
other data pertinent to requirements.

Functional Design

Data Flow Diagram:

A data flow diagram (DFD) is a graphical representation of the "flow" of data through an
information system, modelling its process aspects. Often, they are a preliminary step used to create an
overview of the system which can later be elaborated. DFDs can also be used for the visualization of
data processing (structured design).

17
A DFD shows what kinds of information will be input to and output from the system, where the data
will come from and go to, and where the data will be stored. It does not show information about the
timing of processes, or information about whether processes will operate in sequence or in parallel
(which is shown on a flowchart) the basic notation used to create a DFD’sare as follows:

a. Dataflow: Data moves in a specific from an origin to a destination.

b. Process: People, procedures, or device that use or produce data. The physical components not
identified.

c. Source: External source or destination of data, which may be people programs, organizations, or
other entities.

4. Data source: here data are store and referenced by a process in the system.

a. 0-LEVEL DFD

High Level Entities and processes flow of HotelTripHub:

Managing all the Hotel

Managing all the Room Facilities
Managing all the Room Categories

18
 Managing all the Booking
Managing all the Payment
Managing all the Customer

Customer Management

Hotel Booking Management

Management

HotelTripHub

Room Category System User

Management Management

Login Management

Zero Level DFD- HotelTripHub

b. 1-LEVEL DFD

Main entities and output of First level DFD:

Processing Hotel records and generate report of all Hotel.

Processing Room facilities records and generate report of all hotel facilities.
Processing Room category records and generate report of all Room categories.
Processing Booking records and generate report of all Booking.
Processing Payment records and generate report of all Payment.

19
 Processing Customer records and generate report of all Customers.

Hotel Generate
Management Hotel Report

Room Generate
Management Room Report

Booking Generate
Management Booking Report

HotelTripHub
Customer Generate
Management Customer Report

Login Check
Management User Login Details

System User Generate

Management System User Report

First Level DFD- HotelTripHub

c. 2-LEVEL DFD

Low level functionalities of HotelTripHub:

Admin logins to the system and manage all the functionalities of HotelTripHub.
Admin can add, edit, delete, and view the records of Hotel Room Category, Payment.
Admin can manage all the details of Room Facility, Booking Customer.
Admin can also generate reports of Hotel, Room facility, Room category, Booking, Payment,
Customer.
Admin can search the details of Room facilities, payment, customer.
Admin can apply different level of filters on report of Hotel, Booking, Payment.
Admin can track the detailed information of Room facility, Room category, Booking, Payment.

20
 Login Check
Admin To Roles of
System Access Manage Hotel Details

Manage Booking
Details
Forgot
Password Manage Customer
Check Manage Details
Credentials Modules
Manage Payment
Details
Send mail
Manage Report
To
User
Manage Room
Facility Details

Manage System Manage Roles of Manage User Manage Room

Admins User Permissions Category Details

Second Level DFD- HotelTripHub

ER-Diagram:

An Entity-Relationship (ER) diagram is a graphical representation of the entities (objects, concepts, or

things) within a system or domain and the relationships between them. It is commonly used in database
design to illustrate the structure of a database and the logical relationships between different entities.
ER diagrams help in visualizing and understanding the structure of a database, providing a blueprint for
the database design process.

Key components of an ER diagram include:

a. Entities
b. Attributes
c. Relationships6
d. Cardinality
e. Primary Key

21
22
 CHAPTER – 5
IMPLEMENTATION AND TESTNG

23
5. IMPLEMENTATION AND TESTNG:
Coding:

Index:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
<?php require('inc/links.php'); ?>
<title><?php echo $settings_r['site_title'] ?> - HOME</title>
<style>
.availability-form{
margin-top: -50px;
z-index: 2;
position: relative;
}

@media screen and (max-width: 575px) {

.availability-form{
margin-top: 25px;
padding: 0 35px;
}
}
</style>
</head>
<body style="background-color: #44b09e;
background-image: linear-gradient(315deg, #44b09e 0%, #e0d2c7 74%);">

<?php require('inc/header.php'); ?>

<!-- Carousel -->

<div class="container-fluid px-lg-2 mt-2">

<div class="swiper swiper-container">
<div class="swiper-wrapper">
<?php
$res = selectAll('carousel');
while($row = mysqli_fetch_assoc($res))
{

24
 $path = CAROUSEL_IMG_PATH;
echo <<<data
<div class="swiper-slide">
<img src="$path$row[image]" class="w-100 d-block">
</div>
data;
}
?>
</div>
</div>
</div>

<!-- check availability form -->

<div class="container availability-form">

<div class="row">
<div class="col-lg-12 bg-white shadow p-4 rounded">
<h5 class="mb-4">Check Booking Availability</h5>
<form action="rooms.php">
<div class="row align-items-end">
<div class="col-lg-3 mb-3">
<label class="form-label" style="font-weight: 500;">Check-in</label>
<input type="date" class="form-control shadow-none" name="checkin" required>
</div>
<div class="col-lg-3 mb-3">
<label class="form-label" style="font-weight: 500;">Check-out</label>
<input type="date" class="form-control shadow-none" name="checkout" required>
</div>
<div class="col-lg-3 mb-3">
<label class="form-label" style="font-weight: 500;">Adult</label>
<select class="form-select shadow-none" name="adult">
<?php
$guests_q = mysqli_query($con,"SELECT MAX(adult) AS `max_adult`,
MAX(children) AS `max_children`
FROM `rooms` WHERE `status`='1' AND `removed`='0'");
$guests_res = mysqli_fetch_assoc($guests_q);

for($i=1; $i<=$guests_res['max_adult']; $i++){

echo"<option value='$i'>$i</option>";
}
?>
</select>
</div>
<div class="col-lg-2 mb-3">

25
 <label class="form-label" style="font-weight: 500;">Children</label>
<select class="form-select shadow-none" name="children">
<?php
for($i=1; $i<=$guests_res['max_children']; $i++){
echo"<option value='$i'>$i</option>";
}
?>
</select>
</div>
<input type="hidden" name="check_availability">
<div class="col-lg-1 mb-lg-3 mt-2">
<button type="submit" class="btn text-white shadow-none custom-bg">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>

<!-- Our Rooms -->

<h2 class="mt-5 pt-4 mb-4 text-center fw-bold h-font">OUR ROOMS</h2>

<div class="container">
<div class="row">

<?php

$room_res = select("SELECT * FROM `rooms` WHERE `status`=? AND `removed`=? ORDER

BY `id` DESC LIMIT 3",[1,0],'ii');

while($room_data = mysqli_fetch_assoc($room_res))
{
// get features of room

$fea_q = mysqli_query($con,"SELECT f.name FROM `features` f

INNER JOIN `room_features` rfea ON f.id = rfea.features_id
WHERE rfea.room_id = '$room_data[id]'");

$features_data = "";
while($fea_row = mysqli_fetch_assoc($fea_q)){
$features_data .="<span class='badge rounded-pill bg-light text-dark text-wrap me-1 mb-1'>
$fea_row[name]
</span>";

26
 }

// get facilities of room

$fac_q = mysqli_query($con,"SELECT f.name FROM `facilities` f

INNER JOIN `room_facilities` rfac ON f.id = rfac.facilities_id
WHERE rfac.room_id = '$room_data[id]'");

$facilities_data = "";
while($fac_row = mysqli_fetch_assoc($fac_q)){
$facilities_data .="<span class='badge rounded-pill bg-light text-dark text-wrap me-1 mb-1'>
$fac_row[name]
</span>";
}

// get thumbnail of image

$room_thumb = ROOMS_IMG_PATH."thumbnail.jpg";
$thumb_q = mysqli_query($con,"SELECT * FROM `room_images`
WHERE `room_id`='$room_data[id]'
AND `thumb`='1'");

if(mysqli_num_rows($thumb_q)>0){
$thumb_res = mysqli_fetch_assoc($thumb_q);
$room_thumb = ROOMS_IMG_PATH.$thumb_res['image'];
}

$book_btn = "";

if(!$settings_r['shutdown']){
$login=0;
if(isset($_SESSION['login']) && $_SESSION['login']==true){
$login=1;
}

$book_btn = "<button onclick='checkLoginToBook($login,$room_data[id])' class='btn btn-sm

text-white custom-bg shadow-none'>Book Now</button>";
}

$rating_q = "SELECT AVG(rating) AS `avg_rating` FROM `rating_review`

WHERE `room_id`='$room_data[id]' ORDER BY `sr_no` DESC LIMIT 20";

$rating_res = mysqli_query($con,$rating_q);
$rating_fetch = mysqli_fetch_assoc($rating_res);

27
$rating_data = "";

if($rating_fetch['avg_rating']!=NULL)
{
$rating_data = "<div class='rating mb-4'>
<h6 class='mb-1'>Rating</h6>
<span class='badge rounded-pill bg-light'>
";

for($i=0; $i<$rating_fetch['avg_rating']; $i++){

$rating_data .="<i class='bi bi-star-fill text-warning'></i> ";
}

$rating_data .= "</span>
</div>
";
}

// print room card

echo <<<data
<div class="col-lg-4 col-md-6 my-3">
<div class="card border-0 shadow" style="max-width: 350px; margin: auto;">
<img src="$room_thumb" class="card-img-top">
<div class="card-body">
<h5>$room_data[name]</h5>
<h6 class="mb-4">₹$room_data[price] per night</h6>
<div class="features mb-4">
<h6 class="mb-1">Features</h6>
$features_data
</div>
<div class="facilities mb-4">
<h6 class="mb-1">Facilities</h6>
$facilities_data
</div>
<div class="guests mb-4">
<h6 class="mb-1">Guests</h6>
<span class="badge rounded-pill bg-light text-dark text-wrap">
$room_data[adult] Adults
</span>
<span class="badge rounded-pill bg-light text-dark text-wrap">
$room_data[children] Children
</span>

28
 </div>
$rating_data
<div class="d-flex justify-content-evenly mb-2">
$book_btn
<a href="room_details.php?id=$room_data[id]" class="btn btn-sm btn-outline-dark
shadow-none">More details</a>
</div>
</div>
</div>
</div>
data;

?>

<div class="col-lg-12 text-center mt-5">

<a href="rooms.php" class="btn btn-sm btn-outline-dark rounded-0 fw-bold shadow-none">More
Rooms >>></a>
</div>
</div>
</div>

<!-- Our Facilities -->

<h2 class="mt-5 pt-4 mb-4 text-center fw-bold h-font">OUR FACILITIES</h2>

<div class="container">
<div class="row justify-content-evenly px-lg-0 px-md-0 px-5">
<?php
$res = mysqli_query($con,"SELECT * FROM `facilities` ORDER BY `id` DESC LIMIT 5");
$path = FACILITIES_IMG_PATH;

while($row = mysqli_fetch_assoc($res)){
echo<<<data
<div class="col-lg-2 col-md-2 text-center bg-white rounded shadow py-4 my-3">
<img src="$path$row[icon]" width="60px">
<h5 class="mt-3">$row[name]</h5>
</div>
data;
}
?>

<div class="col-lg-12 text-center mt-5">

29
 <a href="facilities.php" class="btn btn-sm btn-outline-dark rounded-0 fw-bold
shadow- none">More Facilities >>></a>
</div>
</div>
</div>

<!-- Testimonials -->

<h2 class="mt-5 pt-4 mb-4 text-center fw-bold h-font">TESTIMONIALS</h2>

<div class="container mt-5">

<div class="swiper swiper-testimonials">
<div class="swiper-wrapper mb-5">
<?php

$review_q = "SELECT rr.*,uc.name AS uname, uc.profile, r.name AS rname FROM

`rating_review` rr
INNER JOIN `user_cred` uc ON rr.user_id = uc.id
INNER JOIN `rooms` r ON rr.room_id = r.id
ORDER BY `sr_no` DESC LIMIT 6";

$review_res = mysqli_query($con,$review_q);
$img_path = USERS_IMG_PATH;

if(mysqli_num_rows($review_res)==0){
echo 'No reviews yet!';
}
else
{
while($row = mysqli_fetch_assoc($review_res))
{
$stars = "<i class='bi bi-star-fill text-warning'></i> ";
for($i=1; $i<$row['rating']; $i++){
$stars .= " <i class='bi bi-star-fill text-warning'></i>";
}

echo<<<slides
<div class="swiper-slide bg-white p-4">
<div class="profile d-flex align-items-center mb-3">
<img src="$img_path$row[profile]" class="rounded-circle" loading="lazy"
width="30px">
<h6 class="m-0 ms-2">$row[uname]</h6>
</div>
<p>

30
 $row[review]
</p>
<div class="rating">
$stars
</div>
</div>
slides;
}
}

?>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="col-lg-12 text-center mt-5">
<a href="about.php" class="btn btn-sm btn-outline-dark rounded-0 fw-bold shadow-none">Know
More >>></a>
</div>
</div>

<!-- Reach us -->

<h2 class="mt-5 pt-4 mb-4 text-center fw-bold h-font">REACH US</h2>

<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 p-2 mb-lg-0 mb-3 bg-white rounded">
<iframe class="w-100 rounded" height="320px" src="<?php echo $contact_r['iframe']
?>" loading="lazy"></iframe>
</div>
<div class="col-lg-4 col-md-4">
<div class="bg-white p-4 rounded mb-4">
<h5>Call us</h5>
<a href="tel: +<?php echo $contact_r['pn1'] ?>" class="d-inline-block mb-2 text-
decoration- none text-dark">
<i class="bi bi-telephone-fill"></i> +<?php echo $contact_r['pn1'] ?>
</a>
<br>
<?php
if($contact_r['pn2']!=''){
echo<<<data
<a href="tel: +$contact_r[pn2]" class="d-inline-block text-decoration-none text-dark">
<i class="bi bi-telephone-fill"></i> +$contact_r[pn2]
</a>

31
 data;
}

?>
</div>
<div class="bg-white p-4 rounded mb-4">
<h5>Follow us</h5>
<?php
if($contact_r['tw']!=''){
echo<<<data
<a href="$contact_r[tw]" class="d-inline-block mb-3">
<span class="badge bg-light text-dark fs-6 p-2">
<i class="bi bi-twitter me-1"></i> Twitter
</span>
</a>
<br>
data;
}
?>

<a href="<?php echo $contact_r['fb'] ?>" class="d-inline-block mb-3">

<span class="badge bg-light text-dark fs-6 p-2">
<i class="bi bi-facebook me-1"></i> Facebook
</span>
</a>
<br>
<a href="<?php echo $contact_r['insta'] ?>" class="d-inline-block">
<span class="badge bg-light text-dark fs-6 p-2">
<i class="bi bi-instagram me-1"></i> Instagram
</span>
</a>
</div>
</div>
</div>
</div>

<!-- Password reset modal and code -->

<div class="modal fade" id="recoveryModal" data-bs-backdrop="static" data-bs-keyboard="false"

tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form id="recovery-form">
<div class="modal-header">

32
 <h5 class="modal-title d-flex align-items-center">
<i class="bi bi-shield-lock fs-3 me-2"></i> Set up New Password
</h5>
</div>
<div class="modal-body">
<div class="mb-4">
<label class="form-label">New Password</label>
<input type="password" name="pass" required class="form-control shadow-none">
<input type="hidden" name="email">
<input type="hidden" name="token">
</div>
<div class="mb-2 text-end">
<button type="button" class="btn shadow-none me-2" data-bs-
dismiss="modal">CANCEL</button>
<button type="submit" class="btn btn-dark shadow-none">SUBMIT</button>
</div>
</div>
</form>
</div>
</div>
</div>

<?php require('inc/footer.php'); ?>

<?php

if(isset($_GET['account_recovery']))
{
$data = filteration($_GET);

$t_date = date("Y-m-d");

$query = select("SELECT * FROM `user_cred` WHERE `email`=? AND `token`=? AND

`t_expire`=? LIMIT 1",
[$data['email'],$data['token'],$t_date],'sss');

if(mysqli_num_rows($query)==1)
{
echo<<<showModal
<script>
var myModal = document.getElementById('recoveryModal')
myModal.querySelector("input[name='email']").value = '$data[email]';
myModal.querySelector("input[name='token']").value = '$data[token]';

33
 var modal = bootstrap.Modal.getOrCreateInstance(myModal);
modal.show();
</script>
showModal;
}
else{
alert("error","Invalid or Expired Link !");
}

?>

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

<script>
var swiper = new Swiper(".swiper-testimonials", {
effect: "cube",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
slidesPerView: "3",
loop:"true",
coverflowEffect: {
rotate: 50,
stretch: 0, depth:
100, modifier: 1,
slideShadows: true
},
autoplay: { delay: 4000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
},
breakpoints:{
320:{
slidesPerView: 1,
},
640:{
slidesPerView: 1,
},

34
 728:{
slidesPerView: 1,
},
1024:{
slidesPerView: 1,
},
}
});

// recover account

let recovery_form = document.getElementById('recovery-form');

recovery_form.addEventListener('submit', (e)=>{
e.preventDefault();

let data = new FormData();

data.append('email',recovery_form.elements['email'].value)
;
data.append('token',recovery_form.elements['token'].value)
; data.append('pass',recovery_form.elements['pass'].value);
data.append('recover_user','');

var myModal = document.getElementById('recoveryModal');

var modal = bootstrap.Modal.getInstance(myModal);
modal.hide();

let xhr = new XMLHttpRequest();

xhr.open("POST","ajax/login_register.php",true);

xhr.onload = function(){
if(this.responseText == 'failed'){
alert('error',"Account reset failed!");
}
else{
alert('success',"Account Reset Successful !");
recovery_form.reset();
}
}
xhr.send(data);
});
</script>

</body>
</html>
35
 Admin Login Page:

<?php
require('inc/essentials.php');
require('inc/db_config.php');

session_start();
if((isset($_SESSION['adminLogin']) && $_SESSION['adminLogin']==true)){
redirect('dashboard.php');
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Login Panel</title>
<?php require('inc/links.php'); ?>
<style>
div.login-form{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
}
</style>
</head>
<body style="background-color:#2672de">

<div class="login-form text-center rounded bg-white shadow overflow-hidden">

<form method="POST">
<h4 class="bg-dark text-white py-3">ADMIN LOGIN PANEL</h4>
<div class="p-4">
<div class="mb-3">
<input name="admin_name" required type="text" class="form-control shadow-none text-center"
placeholder="Admin Name">
</div>
<div class="mb-4">
<input name="admin_pass" required type="password" class="form-control shadow-none text-
center" placeholder="Password">
</div>

36
 <button name="login" type="submit" class="btn text-white custom-bg shadow-
none">LOGIN</button>
</div>
</form>
</div>

<?php

if(isset($_POST['login']))
{
$frm_data = filteration($_POST);

$query = "SELECT * FROM `admin_cred` WHERE `admin_name`=? AND `admin_pass`=?";

$values = [$frm_data['admin_name'],$frm_data['admin_pass']];

$res = select($query,$values,"ss");
if($res->num_rows==1){
$row = mysqli_fetch_assoc($res);
$_SESSION['adminLogin'] = true;
$_SESSION['adminId'] = $row['sr_no'];
redirect('dashboard.php');
}
else{
alert('error','Login failed - Invalid Credentials!');
}
}

?>

<?php require('inc/scripts.php') ?>

</body>
</html>

Admin Dashboard:
<?php
require('inc/essentials.php');
require('inc/db_config.php');
adminLogin();
?>
<!DOCTYPE html>
<html lang="en">
<head>

37
 <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Panel - Dashboard</title>
<?php require('inc/links.php'); ?>
</head>
<body style="background-color: #663dff;background-image: linear-gradient(319deg, #663dff 0%,
#aa00ff 37%, #cc4499 100%);">

<?php

require('inc/header.php');

$is_shutdown = mysqli_fetch_assoc(mysqli_query($con,"SELECT `shutdown` FROM `settings`"));

$current_bookings = mysqli_fetch_assoc(mysqli_query($con,"SELECT
COUNT(CASE WHEN booking_status='booked' AND arrival=0 THEN 1 END) AS
`new_bookings`,
COUNT(CASE WHEN booking_status='cancelled' AND refund=0 THEN 1 END)
AS
`refund_bookings`
FROM `booking_order`"));

$unread_queries = mysqli_fetch_assoc(mysqli_query($con,"SELECT COUNT(sr_no) AS `count`

FROM `user_queries` WHERE `seen`=0"));

$unread_reviews = mysqli_fetch_assoc(mysqli_query($con,"SELECT COUNT(sr_no) AS `count`

FROM `rating_review` WHERE `seen`=0"));

$current_users = mysqli_fetch_assoc(mysqli_query($con,"SELECT
COUNT(id) AS `total`,
COUNT(CASE WHEN `status`=1 THEN 1 END) AS `active`,
COUNT(CASE WHEN `status`=0 THEN 1 END) AS `inactive`,
COUNT(CASE WHEN `is_verified`=0 THEN 1 END) AS `unverified`
FROM `user_cred`"));

?>

<div class="container-fluid" id="main-content">

<div class="row">
<div class="col-lg-10 ms-auto p-4 overflow-hidden">

<div class="d-flex align-items-center justify-content-between mb-4">

<h3>DASHBOARD</h3>
<?php
38
 if($is_shutdown['shutdown']){
echo<<<data
<h6 class="badge bg-danger py-2 px-3 rounded">Shutdown Mode is Active!</h6>
data;
}
?>
</div>

<div class="row mb-4">

<div class="col-md-3 mb-4">
<a href="new_bookings.php" class="text-decoration-none">
<div class="card text-center text-success p-3">
<h6>New Bookings</h6>
<h1 class="mt-2 mb-0"><?php echo $current_bookings['new_bookings'] ?></h1>
</div>
</a>
</div>
<div class="col-md-3 mb-4">
<a href="refund_bookings.php" class="text-decoration-none">
<div class="card text-center text-warning p-3">
<h6>Refund Bookings</h6>
<h1 class="mt-2 mb-0"><?php echo $current_bookings['refund_bookings'] ?></h1>
</div>
</a>
</div>
<div class="col-md-3 mb-4">
<a href="user_queries.php" class="text-decoration-none">
<div class="card text-center text-info p-3">
<h6>User Queries</h6>
<h1 class="mt-2 mb-0"><?php echo $unread_queries['count'] ?></h1>
</div>
</a>
</div>
<div class="col-md-3 mb-4">
<a href="rate_review.php" class="text-decoration-none">
<div class="card text-center text-info p-3">
<h6>Rating & Review</h6>
<h1 class="mt-2 mb-0"><?php echo $unread_reviews['count'] ?></h1>
</div>
</a>
</div>
</div>

<div class="d-flex align-items-center justify-content-between mb-3">

39
 <h5>Booking Analytics</h5>
<select class="form-select shadow-none bg-light w-auto"
onchange="booking_analytics(this.value)">
<option value="1">Past 30 Days</option>
<option value="2">Past 90 Days</option>
<option value="3">Past 1 Year</option>
<option value="4">All time</option>
</select>
</div>

<div class="row mb-3">

<div class="col-md-3 mb-4">
<div class="card text-center text-primary p-3">
<h6>Total Bookings</h6>
<h1 class="mt-2 mb-0" id="total_bookings">0</h1>
<h4 class="mt-2 mb-0" id="total_amt">₹0</h4>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card text-center text-success p-3">
<h6>Active Bookings</h6>
<h1 class="mt-2 mb-0" id="active_bookings">0</h1>
<h4 class="mt-2 mb-0" id="active_amt">₹0</h4>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card text-center text-danger p-3">
<h6>Cancelled Bookings</h6>
<h1 class="mt-2 mb-0" id="cancelled_bookings">0</h1>
<h4 class="mt-2 mb-0" id="cancelled_amt">₹0</h4>
</div>
</div>
</div>

<div class="d-flex align-items-center justify-content-between mb-3">

<h5>User, Queries, Reviews Analytics</h5>
<select class="form-select shadow-none bg-light w-auto"
onchange="user_analytics(this.value)">
<option value="1">Past 30 Days</option>
<option value="2">Past 90 Days</option>
<option value="3">Past 1 Year</option>
<option value="4">All time</option>
</select>

40
</div>

<div class="row mb-3">

<div class="col-md-3 mb-4">
<div class="card text-center text-success p-3">
<h6>New Registration</h6>
<h1 class="mt-2 mb-0" id="total_new_reg">0</h1>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card text-center text-primary p-3">
<h6>Queries</h6>
<h1 class="mt-2 mb-0" id="total_queries">0</h1>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card text-center text-primary p-3">
<h6>Reviews</h6>
<h1 class="mt-2 mb-0" id="total_reviews">0</h1>
</div>
</div>
</div>

<h5>Users</h5>
<div class="row mb-3">
<div class="col-md-3 mb-4">
<div class="card text-center text-info p-3">
<h6>Total</h6>
<h1 class="mt-2 mb-0"><?php echo $current_users['total'] ?></h1>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card text-center text-success p-3">
<h6>Active</h6>
<h1 class="mt-2 mb-0"><?php echo $current_users['active'] ?></h1>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card text-center text-warning p-3">
<h6>Inactive</h6>
<h1 class="mt-2 mb-0"><?php echo $current_users['inactive'] ?></h1>
</div>
</div>
<div class="col-md-3 mb-4">

41
 <div class="card text-center text-danger p-3">
<h6>Unverified</h6>
<h1 class="mt-2 mb-0"><?php echo $current_users['unverified'] ?></h1>
</div>
</div>
</div>
</div>
</div>
</div>
<?php require('inc/scripts.php'); ?>
<script src="scripts/dashboard.js"></script>
</body>
</html>

Admin Site Settings:

<?php
require('inc/essentials.php');
adminLogin();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Panel - Settings</title>
<?php require('inc/links.php'); ?>
</head>
<body style="background-color: #663dff;background-image: linear-gradient(319deg, #663dff 0%,
#aa00ff 37%, #cc4499 100%);">

<?php require('inc/header.php'); ?>

<div class="container-fluid" id="main-content">

<div class="row">
<div class="col-lg-10 ms-auto p-4 overflow-hidden">
<h3 class="mb-4">SETTINGS</h3>

<!-- General settings section -->

<div class="card border-0 shadow-sm mb-4">

<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h5 class="card-title m-0">General Settings</h5>

42
 <button type="button" class="btn btn-dark shadow-none btn-sm" data-bs-toggle="modal"
data-bs-target="#general-s">
<i class="bi bi-pencil-square"></i> Edit
</button>
</div>
<h6 class="card-subtitle mb-1 fw-bold">Site Title</h6>
<p class="card-text" id="site_title"></p>
<h6 class="card-subtitle mb-1 fw-bold">About us</h6>
<p class=" text-dark" id="site_about"></p>
</div>
</div>

<!-- General settings modal -->

<div class="modal fade" id="general-s" data-bs-backdrop="static" data-bs-keyboard="true"

tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<form id="general_s_form">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">General Settings</h5>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label fw-bold text-white">Site Title</label>
<input type="text" name="site_title" id="site_title_inp" class="form-control
shadow- none" required>
</div>
<div class="mb-3">
<label class="form-label fw-bold text-white">About us</label>
<textarea name="site_about" id="site_about_inp" class="form-control shadow-none"
rows="6" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" onclick="site_title.value = general_data.site_title, site_about.value =
general_data.site_about" class="btn text-secondary shadow-none" data-bs-
dismiss="modal">CANCEL</button>
<button type="submit" class="btn custom-bg text-white shadow-none">SUBMIT</button>
</div>
</div>
</form>
</div>
</div>

43
 <!-- Shutdown section -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h5 class="card-title m-0">Shutdown Website</h5>
<div class="form-check form-switch">
<form>
<input onchange="upd_shutdown(this.value)" class="form-check-input" type="checkbox"
id="shutdown-toggle">
</form>
</div>
</div>
<p class="card-text">
No customers will be allowed to book hotel room, when shutdown mode is turned on.
</p>
</div>
</div>

<!-- Contact details section -->

<div class="card border-0 shadow-sm mb-4">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h5 class="card-title m-0">Contacts Settings</h5>
<button type="button" class="btn btn-dark shadow-none btn-sm" data-bs-toggle="modal"
data-bs-target="#contacts-s">
<i class="bi bi-pencil-square"></i> Edit
</button>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-4">
<h6 class="card-subtitle mb-1 fw-bold">Address</h6>
<p class="card-text" id="address"></p>
</div>
<div class="mb-4">
<h6 class="card-subtitle mb-1 fw-bold">Google Map</h6>
<p class="card-text" id="gmap"></p>
</div>
<div class="mb-4">
<h6 class="card-subtitle mb-1 fw-bold">Phone Numbers</h6>
<p class="card-text mb-1">
<i class="bi bi-telephone-fill"></i>
<span id="pn1"></span>

44
 </p>
<p class="card-text">
<i class="bi bi-telephone-fill"></i>
<span id="pn2"></span>
</p>
</div>
<div class="mb-4">
<h6 class="card-subtitle mb-1 fw-bold">E-mail</h6>
<p class="card-text" id="email"></p>
</div>
</div>
<div class="col-lg-6">
<div class="mb-4">
<h6 class="card-subtitle mb-1 fw-bold">Social Links</h6>
<p class="card-text mb-1">
<i class="bi bi-facebook me-1"></i>
<span id="fb"></span>
</p>
<p class="card-text mb-1">
<i class="bi bi-instagram me-1"></i>
<span id="insta"></span>
</p>
<p class="card-text">
<i class="bi bi-twitter me-1"></i>
<span id="tw"></span>
</p>
</div>
<div class="mb-4">
<h6 class="card-subtitle mb-1 fw-bold">iFrame</h6>
<iframe id="iframe" class="border p-2 w-100" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
</div>

<!-- Contacts details modal -->

<div class="modal fade" id="contacts-s" data-bs-backdrop="static" data-bs-keyboard="true"

tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<form id="contacts_s_form">
<div class="modal-content">
<div class="modal-header">

45
 <h5 class="modal-title">Contacts Settings</h5>
</div>
<div class="modal-body">
<div class="container-fluid p-0">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label fw-bold">Address</label>
<input type="text" name="address" id="address_inp" class="form-control shadow-
none" required>
</div>
<div class="mb-3">
<label class="form-label fw-bold">Google Map Link</label>
<input type="text" name="gmap" id="gmap_inp" class="form-control shadow-none"
required>
</div>
<div class="mb-3">
<label class="form-label fw-bold">Phone Numbers (with country code)</label>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-telephone-fill"></i></span>
<input type="number" name="pn1" id="pn1_inp" class="form-control shadow-none"
required>
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-telephone-fill"></i></span>
<input type="number" name="pn2" id="pn2_inp" class="form-control shadow-
none">
</div>
</div>
<div class="mb-3">
<label class="form-label fw-bold">Email</label>
<input type="email" name="email" id="email_inp" class="form-control shadow-none"
required>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label fw-bold">Social Links</label>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-facebook"></i></span>
<input type="text" name="fb" id="fb_inp" class="form-control shadow-none"
required>
</div>
<div class="input-group mb-3">

46
 <span class="input-group-text"><i class="bi bi-instagram"></i></span>
<input type="text" name="insta" id="insta_inp" class="form-control shadow-none"
required>
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-twitter"></i></span>
<input type="text" name="tw" id="tw_inp" class="form-control shadow-none">
</div>
</div>
<div class="mb-3">
<label class="form-label fw-bold">iFrame Src</label>
<input type="text" name="iframe" id="iframe_inp" class="form-control shadow-none"
required>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" onclick="contacts_inp(contacts_data)" class="btn text-secondary
shadow-none" data-bs-dismiss="modal">CANCEL</button>
<button type="submit" class="btn custom-bg text-white shadow-none">SUBMIT</button>
</div>
</div>
</form>
</div>
</div>

<!-- Management Team section -->

<div class="card border-0 shadow-sm mb-4">

<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h5 class="card-title m-0">Management Team</h5>
<button type="button" class="btn btn-dark shadow-none btn-sm" data-bs-toggle="modal"
data-bs-target="#team-s">
<i class="bi bi-plus-square"></i> Add
</button>
</div>
<div class="row" id="team-data">
</div>
</div>
</div>
<!-- Management Team modal -->

47
 <div class="modal fade" id="team-s" data-bs-backdrop="static" data-bs-keyboard="true"
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<form id="team_s_form">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Team Member</h5>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label fw-bold">Name</label>
<input type="text" name="member_name" id="member_name_inp" class="form-control
shadow-none" required>
</div>
<div class="mb-3">
<label class="form-label fw-bold">Picture</label>
<input type="file" name="member_picture" id="member_picture_inp" accept=".jpg, .png,
.webp, .jpeg" class="form-control shadow-none" required>
</div>
</div>
<div class="modal-footer">
<button type="button" onclick="member_name.value='', member_picture.value=''"
class="btn text-secondary shadow-none" data-bs-dismiss="modal">CANCEL</button>
<button type="submit" class="btn custom-bg text-white shadow-none">SUBMIT</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<?php require('inc/scripts.php'); ?>
<script src="scripts/settings.js"></script>
</body>
</html>

User Registration and Login Page:

<div class="modal fade" id="loginModal" data-bs-backdrop="static" data-bs-

keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form id="login-form">

48
 <div class="modal-header">
<h5 class="modal-title d-flex align-items-center">
<i class="bi bi-person-circle fs-3 me-2"></i> User Login
</h5>
<button type="reset" class="btn-close shadow-none" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Email / Mobile</label>
<input type="text" name="email_mob" required class="form-control shadow-none">
</div>
<div class="mb-4">
<label class="form-label">Password</label>
<input type="password" name="pass" required class="form-control shadow-none">
</div>
<div class="d-flex align-items-center justify-content-between mb-2">
<button type="submit" class="btn btn-dark shadow-none">LOGIN</button>
<button type="button" class="btn text-secondary text-decoration-none shadow-none p-0" data-
bs-toggle="modal" data-bs-target="#forgotModal" data-bs-dismiss="modal">
Forgot Password?
</button>
</div>
</div>
</form>
</div>
</div>
</div>

<div class="modal fade" id="registerModal" data-bs-backdrop="static" data-bs-keyboard="false"

tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form id="register-form">
<div class="modal-header">
<h5 class="modal-title d-flex align-items-center">
<i class="bi bi-person-lines-fill fs-3 me-2"></i> User Registration
</h5>
<button type="reset" class="btn-close shadow-none" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">

49
 <div class="col-md-6 mb-3">
<label class="form-label">Name</label>
<input name="name" type="text" class="form-control shadow-none" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Email</label>
<input name="email" type="email" class="form-control shadow-none" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Phone Number</label>
<input name="phonenum" type="number" class="form-control shadow-none" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Picture</label>
<input name="profile" type="file" accept=".jpg, .jpeg, .png, .webp" class="form-control
shadow-none" required>
</div>
<div class="col-md-12 mb-3">
<label class="form-label">Address</label>
<textarea name="address" class="form-control shadow-none"
rows="1" required></textarea>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Pincode</label>
<input name="pincode" type="number" class="form-control shadow-none" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Date of birth</label>
<input name="dob" type="date" class="form-control shadow-none" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Password</label>
<input name="pass" type="password" class="form-control shadow-none" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Confirm Password</label>
<input name="cpass" type="password" class="form-control shadow-none" required>
</div>
</div>
</div>
<div class="text-center my-1">
<button type="submit" class="btn btn-dark shadow-none">REGISTER</button>
</div>
</div>

50
 </form>
</div>
</div>
</div>

<div class="modal fade" id="forgotModal" data-bs-backdrop="static" data-bs-keyboard="false"

tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form id="forgot-form">
<div class="modal-header">
<h5 class="modal-title d-flex align-items-center">
<i class="bi bi-person-circle fs-3 me-2"></i> Forgot Password
</h5>
</div>
<div class="modal-body">
<span class="badge rounded-pill bg-light text-dark mb-3 text-wrap lh-base">
Note: A link will be sent to your email to reset your password!
</span>
<div class="mb-4">
<label class="form-label">Email</label>
<input type="email" name="email" required class="form-control shadow-none">
</div>
<div class="mb-2 text-end">
<button type="button" class="btn shadow-none p-0 me-2" data-bs-toggle="modal" data-bs-
target="#loginModal" data-bs-dismiss="modal">
CANCEL
</button>
<button type="submit" class="btn btn-dark shadow-none">SEND LINK</button>
</div>
</div>
</form>
</div>
</div>
</div>

User Profile:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

51
 <?php require('inc/links.php'); ?>
<title><?php echo $settings_r['site_title'] ?> - PROFILE</title>
</head>
<body style="background-color: #44b09e;
background-image: linear-gradient(315deg, #44b09e 0%, #e0d2c7 74%);">

<?php
require('inc/header.php');

if(!(isset($_SESSION['login']) && $_SESSION['login']==true)){

redirect('index.php');
}

$u_exist = select("SELECT * FROM `user_cred` WHERE `id`=? LIMIT

1",[$_SESSION['uId']],'s');

if(mysqli_num_rows($u_exist)==0){
redirect('index.php');
}

$u_fetch = mysqli_fetch_assoc($u_exist);
?>

<div class="container">
<div class="row">

<div class="col-12 my-5 px-4">

<h2 class="fw-bold">PROFILE</h2>
<div style="font-size: 14px;">
<a href="index.php" class="text-secondary text-decoration-none">HOME</a>
<span class="text-secondary"> > </span>
<a href="#" class="text-secondary text-decoration-none">PROFILE</a>
</div>
</div>

<div class="col-12 mb-5 px-4">

<div class="bg-white p-3 p-md-4 rounded shadow-sm">
<form id="info-form">
<h5 class="mb-3 fw-bold">Basic Information</h5>
<div class="row">
<div class="col-md-4 mb-3">
<label class="form-label">Name</label>

52
 <input name="name" type="text" value="<?php echo $u_fetch['name'] ?>"
class="form- control shadow-none" required>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Phone Number</label>
<input name="phonenum" type="number" value="<?php echo $u_fetch['phonenum']
?>" class="form-control shadow-none" required>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Date of birth</label>
<input name="dob" type="date" value="<?php echo $u_fetch['dob'] ?>" class="form-
control shadow-none" required>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Pincode</label>
<input name="pincode" type="number" value="<?php echo $u_fetch['pincode'] ?>"
class="form-control shadow-none" required>
</div>
<div class="col-md-8 mb-4">
<label class="form-label">Address</label>
<textarea name="address" class="form-control shadow-none" rows="1" required><?php
echo $u_fetch['address'] ?></textarea>
</div>
</div>
<button type="submit" class="btn text-white custom-bg shadow-none">Save
Changes</button>
</form>
</div>
</div>

<div class="col-md-4 mb-5 px-4">

<div class="bg-white p-3 p-md-4 rounded shadow-sm">
<form id="profile-form">
<h5 class="mb-3 fw-bold">Picture</h5>
<img src="<?php echo USERS_IMG_PATH.$u_fetch['profile'] ?>" class="rounded-circle
img-fluid mb-3">

<label class="form-label">New Picture</label>

<input name="profile" type="file" accept=".jpg, .jpeg, .png, .webp" class="mb-4 form-control
shadow-none" required>

<button type="submit" class="btn text-white custom-bg shadow-none">Save

Changes</button>
</form>

53
 </div>
</div>

<div class="col-md-8 mb-5 px-4">

<div class="bg-white p-3 p-md-4 rounded shadow-sm">
<form id="pass-form">
<h5 class="mb-3 fw-bold">Change Password</h5>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">New Password</label>
<input name="new_pass" type="password" class="form-control shadow-none" required>
</div>
<div class="col-md-6 mb-4">
<label class="form-label">Confirm Password</label>
<input name="confirm_pass" type="password" class="form-control shadow-none"
required>
</div>
</div>
<button type="submit" class="btn text-white custom-bg shadow-none">Save
Changes</button>
</form>
</div>
</div>

</div>
</div>

<?php require('inc/footer.php'); ?>

<script>

let info_form = document.getElementById('info-form');

info_form.addEventListener('submit',function(e){
e.preventDefault();

let data = new FormData(); data.append('info_form','');

data.append('name',info_form.elements['name'].value);
data.append('phonenum',info_form.elements['phonenum'].value)
;
data.append('address',info_form.elements['address'].value);

54
 data.append('pincode',info_form.elements['pincode'].value);
data.append('dob',info_form.elements['dob'].value);

let xhr = new XMLHttpRequest();

xhr.open("POST","ajax/profile.php",true);

xhr.onload = function(){
if(this.responseText == 'phone_already'){
alert('error',"Phone number is already registered!");
}
else if(this.responseText == 0){
alert('error',"No Changes Made!");
}
else{
alert('success','Changes saved!');
}
}

xhr.send(data);

});
let profile_form = document.getElementById('profile-form');

profile_form.addEventListener('submit',function(e){
e.preventDefault();

let data = new FormData(); data.append('profile_form','');

data.append('profile',profile_form.elements['profile'].files[0]);

let xhr = new XMLHttpRequest();

xhr.open("POST","ajax/profile.php",true);

xhr.onload = function()
{
if(this.responseText == 'inv_img'){
alert('error',"Only JPG, WEBP & PNG images are allowed!");
}
else if(this.responseText == 'upd_failed'){
alert('error',"Image upload failed!");
}
else if(this.responseText == 0){
alert('error',"Updation failed!");
}

55
 else{
window.location.href=window.location.pathname;
}
}

xhr.send(data);
});
let pass_form = document.getElementById('pass-form');
pass_form.addEventListener('submit',function(e){
e.preventDefault()
let new_pass = pass_form.elements['new_pass'].value;
let confirm_pass = pass_form.elements['confirm_pass'].value;

if(new_pass!=confirm_pass){
alert('error','Password do not match!');
return false;
}
let data = new FormData();
data.append('pass_form','');
data.append('new_pass',new_pass);
data.append('confirm_pass',confirm_pass);

let xhr = new XMLHttpRequest();

xhr.open("POST","ajax/profile.php",true);

xhr.onload = function()
{
if(this.responseText == 'mismatch'){
alert('error',"Password do not match!");
}
else if(this.responseText == 0){
alert('error',"Updation failed!");
}
else{
alert('success','Changes saved!');
pass_form.reset();
}
}
xhr.send(data);
});
</script>

</body>
</html>

56
 Testing:

Software Testing is the process of executing software in a controlled manner, in order to answer the
question - Does the software behave as specified? Software testing is often used in association with the
terms verification and validation. Validation is the checking or testing of items, includes software, for
conformance and consistency with an associated specification. Software testing is just one kind of
verification, which also uses techniques such as reviews, analysis, inspections, and walkthroughs.
Validation is the process of checking that what has been specified is what the user wanted. A software
strategy for software testing integrates software test case design techniques into a well-planned series of
steps that result in successful construction of software.

a. White Box Testing

White box testing is a test case design method that uses the control structure of the procedural design to
derive test cases. Using white box testing method, the software engineer can derive test cases that
guarantee that all independent parts within a module have been exercised at least once, exercise
all logical decisions on their true and false sides, execute all loops at their boundaries and within
their operational bounds and exercise internal data structures to ensure their validity.

b. Black Box Testing

Black box testing method focus on functional requirements of the software. That is , black box testing
enables the software engineer to derive sets of input condition that will fully exercise all functional
requirements for a program.

Black Box Testing Attempts to Find Errors in The Following Category

Incorrect or missing functions

Interface erros and performance errors

Errors in data structures or external database access.

Performance errors

Initialization and termination errors.

57
 c. Unit Testing

Unit testing focuses verification effort on the smallest unit of software design – the software component
or module. Using the component level design description as a guide, important control paths are tested to
uncover errors within the boundary of the module. The relative complexity of tests and uncovered
scope established for unit testing. The unit testing is white-box oriented, and step can be conducted in
parallel for multiple components. The modular interface is tested to ensure that information properly
flows into and out of the program unit under test. The local data structure is examined to ensure that
data stored temporarily maintains its integrity during all steps in an algorithm’s execution.
Boundary
conditions are tested to ensure that all statements in a module have been executed at least once. Finally,
all error handling paths are tested.

d. Integration Testing

Integration testing is a systematic technique for construction of program structure while the time
of conducting tests to uncover errors associated with interfacing. The objective is to take unit-
tested modules and build a program structure that has been dictated by the design. The entire program is
tested as whole. Correction is difficult because isolation of causes is complicated by vast expanse
of entire program. Once these errors are corrected, new ones appear and the process continues in a
seemingly endless loop. After unit testing in Sell-Soft System all the modules were integrated to
test for any inconsistencies in the interfaces. Moreover, differences in program structures were
removed and a unique program structure was evolved.

e. Validation Testing

Validation testing is a final series of software testing. Validation testing succeeds when the software
function in a manner that can be reasonably expected by the customer. Software validation is achieved
through a series of black box tests that demonstrate conformity with requirements.

f. System Testing

System testing, also referred to as system-level testing or system integration testing, is the process in
which a quality assurance (QA) team evaluates how the various components of an application interact
together in the full, integrated system or application.
58
System testing verifies that an application performs tasks as designed. It's a type of black box testing that
focuses on the functionality of an application rather than the inner workings of a system, which white
box testing is concerned with.

Test case

Test Case 1

• Test Title: User & Admin Login.

• Test Procedures: Type username & password.
• Test Data: Username & password must be in alphanumeric. Otherwise, system will show error
(ex. Please enter valid alphanumeric data).
• Expected Result: It will redirect to login page.

Test Case 2

• Test Title: Registration

• Test Procedures: Click on register.
• Test Data: Input User's information and click on the button "Register”.
• Expected Result: It will register new user.

Test Case 3

• Test Title: Search.

• Test Procedures: Type destinations name with selecting check-in and check-out.
• Test Data: Valid destinations name with date.
• Expected Result: System will search according to user's choice.

Test Case 4

• Test Title: Manage Booking.

• Test Procedures: Click on the link "Manage Booking".
• Test Data: Add, Edit, Del & Save button.
• Expected Result: Staffs can edit, add and Del individual users booking records.

59
Test Case 5

• Test Title: Username & Password

• Test Procedures: Enter user or admin valid username (Upper Case and Lower Case) and
password (Alphanumeric).
• Test Data: Invalid password will show the warning message (Please Enter Valid Password).
• Expected Result: The system will follow the validation pattern.

Test Case 6

• Test Title: View Booking Cancel Button

• Test Procedures: User need to login and can cancel the booking when they press cancel button.
• Test Data: Cancel their booking record.
• Expected Result: Will cancel their booking records from database.

Test Case 7

• Test Title: Change Search

• Test Procedures: Users can change their search according to changing their check in, check out
and destinations.
• Test Data: Click on the button "Change Search" from hotels availability page.
• Expected Result: Users can select their new check in and check out date with destinations.

60
 CHAPTER-6

RESULTS AND DISCUSSIONS

61
6. RESULTS AND DISCUSSIONS
Screenshots:

a. Index Page:

62
63
b. Admin-Login Page:

c. Admin Dashboard:

64
d. Admin Site Settings:

65
e. User Registration & Login:

66
f. User Profile:

Discussions:

The main objectives of the research were achieved through the reservation system for HotelTripHub.
However, the system needed to be extended to cover all the departments of
HotelTripHub and its various branches country wide. HotelTripHub put in place a
local area network to cover all the departments of the hotel and a wide area network to cover all
the various branches of the hotel.

67
 CHAPTER -7
CONCLUSION
AND
FUTURE ENHANCEMENT

68
Conclusion:

The HotelTripHub provides an environment for users to book hotel rooms, perform booking
activities, and manage personal account at Hotel with a Web browser. The system uses Apache Web
Server running on Windows platform. The database server is MySQL. To implement the system, the
developer has used JavaScript, HTML, and PHP. All dynamic contents are handled by PHP
and AJAX. Persistent data are saved in the database. HotelTripHub is a user-friendly and easy-
to-use system of a Web-based project. Everyone who knows how to use a Web browser can register
and then "" login to book a room, change booking details, cancel booking, and view or modify personal
profile online. It is easy and fast to make a reservation. There can still be improvements for the online
bookings. First, users can only make a reservation that date is within one year from today. Second, if
the customer arrival date is less than specific days (this number is decided by administrator) from
today, they cannot change or cancel it.

Future Scope:

The possible improvements that can be made for the HotelTripHub include: We can make the
graphical user interface friendlier and more functional in the next development. The HotelTripHub
aims to provide a user-friendly interface and more functions for real world hotels. But there is still
some room for improvements. For example, we can change the settings and functions of some
options in the Web pages to make them more professional and artistic. We can also use more pop-up
windows so that users can choose the value from them directly. This applies to "arrival date" and
"departure date" options. In this way the users can avoid many possible mistakes caused by
inappropriate input. - This online system only allows users to make a reservation that date is within one
year and reserve up to four rooms per visit. These limitations can be removed in the future. In future
improvements, the HotelTripHub can offer more services such as car rental, flight ticket purchase,
and the vacation package advising. These services have been offered already on some real world online
booking systems. More hotels will add these services on their online systems. In this way, people
can make all their requests at once no matter they are business trip arrangement,
shopping, travel, or vacation.

69
BIBLIOGRAPHY:

1. www.geeksforgeeks.com
2. www.javatpoint.com
3. www.getbootstrap.com
4. www.Wikipedia.com
5. www.google.com
6. www.stackoverflow.com
7. www.tutorialpoint.com
8. www.w3school.com
9. www.youtube.com

70