Hotel Online Customer Booking and Management System
Introduction:
Hotel Management System is a hotel booking website where site visitors may search for available rooms using an online booking system. Users may search for hotels, examine room inventory, check availability, and book in real-time.
Users enter the date of arrival, verify the date of departure, and search for availability and reviews. Following the selection of the appropriate hotel for the chosen hotel, the entire booking and booking procedure is completed on-site, and SMS confirmation of the booking is given.
Panel of administrators
Manager of Accounts
- Administrator – The administrator has the ability to manage administrator accounts and authorize rooms.
- Room Types – The guide may define hotel rooms, set room rates, and submit photos of each room.
- Bookings – All on-site bookings and bookings are presented, together with all booking details: arrival date, departure date, hotel name, room type, passenger number, and price.
Objective:
Hotel organizations’ core goals may be improved by merging service-focused offerings with project management concepts. Such integration will include new inventions, quicker mindsets, and a risk-taking approach to the need for ongoing development and rapid responsiveness to change. Hotels may extend their existence by constantly re-establishing themselves by approaching each change as a project rooted in seamless functioning. As a consequence, consumers may reserve hotel rooms with ease.
Requirements for a Hotel Management System
This tool will make it easier for you to handle the operation. Users, Rooms, Payments, and so on may be obtained as a result of its ease of use and low-time administration. During login, they do not need to look for a paper file. The system is simple to use for members.
Methodology Development Model
This tool will make it easier for you to handle the operation. Because of its ease of use and minimal time management, it may get user information, rooms, payments, and so on. They do not need to look for a paper file while logging in. The system is readily managed by members.
The Waterfall model’s following steps are collection and analysis.
Requirements – This part includes all potential system requirements to be produced and is described in the requirements document.
- System Design – In this stage, the specifications from the first phase are analysed, and the system design is prepared. This system design aids in the definition of hardware and system requirements, as well as the overall structure of the system.
- Implementation – The system is first built through sub-units called units, which are discussed in the next section, with input from the system design. Each unit is produced and evaluated for performance, which is referred to as a Unit Test. Integration and Evaluation – Following the testing of each unit, all units developed during the implementation phase are integrated into the system. The entire system is tested for faults and failures after integration.
- Distribution of the system – After performing active and inactive testing, the product is distributed in the customer’s territory or launched to the market.
- Maintenance – There are certain issues originating from the client area. Patches are published to address these vulnerabilities. In order to improve the product, newer versions are published. These changes in the consumer environment are implemented with caution.
Tools and Technique
a. Php
b. Xampp
c. Mysql
d. HTML
e. Bootstrap
f. Visual Studio
h. Java Script
i. Css
PHP
Hypertext Preprocessor (or just PHP) is a server-side programming language that was created for Web development but is now used as a standard programming language. The PHP reference, which was founded by Rasmus Lerdorf in 1994, is now provided by The PHP Group. PHP used to stand for Personal Home Page, but it now stands for the repeated explanation of PHP: Hypertext Preprocessor. PHP code can be inserted in HTML code or used in combination with a variety of web template tools, content management systems, and online frameworks. PHP code is often handled by a PHP translator, which is installed as a web server module or as an useable Common Gateway Interface (CGI). A web server contains the output of translated and utilised PHP code, which may be in the form of any sort of data, including graphics, as well as a created web page. PHP code may be used in conjunction with the command line interface (CLI) to launch standalone apps.
XAMPP
XAMPP is a stack package for a free and open online solution built by Apache friends that contains the Apache HTTP Server, the MariaDB website, and translators for text produced in the PHP and Perl programming languages. XAMPP is an acronym that stands for Cross-Platform (X), Apache (A), MariaDB (M), PHP (P), and Perl (P) (P). It is a small, lightweight Apache installation that allows developers to easily construct a local web server for testing and use. The removable file contains everything required to set up a web server, including the server programme (Apache), website (MariaDB), and writing language (PHP). XAMPP is also cross-platform, which means it works on Linux, Mac, and Windows. Because most real-world web server installations employ the same components as XAMPP, transitioning from a local test server to a live server is a breeze.
Mysql
MySQL Workbench is an integrated visual tool for web designers, developers, and database administrators. MySQL Workbench includes a data model, SQL programming tools, and comprehensive administration tools for server configuration, user management, cache copy, and other tasks. MySQL Workbench is available for Microsoft Windows, Linux, and Mac OS X.
HTML
Hypertext Markup Language (HTML) is a popular markup language used to create online pages and web applications. Create three World Wide Web-based technologies using Cascading Style Sheets (CSS) and JavaScript.
Online browsers get HTML documents from web servers or local archives and display them as text on multimedia web sites. HTML specifies the logical structure of a web page as well as the basic embedded symbols of a document. HTML components are the skeletons of HTML pages. Images and other objects, such as collaborative forms, can be embedded in a website using HTML standards. HTML allows you to build organised documents by specifying text structure semantics such as titles, paragraphs, lists, links, quotations, and more.
Bootstrap
Bootstrap is a free front-end framework that is open source and can be used to create websites and online apps. Design templates for typing, forms, buttons, navigation, and other interactive features are HTML and CSS-based, with optional JavaScript additions. Unlike many web frameworks, it focuses solely on front-end development.
JavaScript
JavaScript, sometimes known as JS, is a high-level computer language that may be translated. The language is also thought to be dynamic, weakly typed, prototype-based, and multi-paradigm. JavaScript, along with HTML and CSS, is one of the three core technologies on the World Wide Web. JavaScript allows interactive web pages and is thus an essential component of online applications. Most websites utilise it, and all popular web browsers have a JavaScript engine.
Microsoft Visual Studio
Microsoft Visual Studio is a Microsoft integrated development platform (IDE). It’s used to improve computer programmes, as well as websites, web apps, online services, and mobile apps. Microsoft software development platforms such as Windows API, Windows Forms, Windows Presentation Foundation, Windows Store, and Microsoft Silverlight are used by Visual Studio. It is capable of producing both native and managed code.
Css
CSS is a style sheet language used to specify the display of text in sign language such as HTML. CSS is the foundation of the World Wide Web, and it is compatible with HTML and JavaScript. CSS is intended to facilitate presentation and content presentation, including layout, colours, and fonts. These variants can increase content access, give greater flexibility and control over presentation elements, allow additional web pages to share formatting by providing relevant CSS in a separate css file, and minimise complexity and duplicate content structure.
Requirement of Specification
External Interface – This is the real interface through which the user will interact with the program and complete the necessary activities.
I.D. for Admin Login:
Role: The administrator desires to access the system.
Precondition: Password and Username
End-of-life Success Condition: The primary display choice on the screen
Failed end condition: The user-submitted an invalid Username and/or Password.
Conform
ID:
Prerequisite: The administrator has successfully gotten to the search result.
The end of success: The modifications have been successfully implemented by the administrator.
Product Specifications for Software
- Sequencing information in the Hotel Management System -Login information should be filled out before the user is permitted.
- Error Handling -If the user does not fill out the validated information, the system will display an error message and prompt the user to provide the validated information.
- Security is necessary for performance.
- The system should be safeguarded against illegal access. Where a legitimate Username and Password are necessary so that no one else may access.
Logical Database:
Level:
Data Flow
ER Diagram
Use Case Diagram
Database Design
Schema Design
Figure : Flow Chart
Database Model
A database model is a form of data model that establishes the logical structure of a database and, more importantly, how data may be stored, organised, and modified.
Advantages:
- The advantages of reserving an internet hotel begin to accrue well before your arrival. Our well-known customer assistance is now available on the internet.
- Another advantage of booking a hotel directly is the use of a complete hotel cancellation policy and, in most circumstances, no deposit obligation.
- Read hotel reviews and compare online hotel booking prices.
- The major advantage of booking hotels online is convenience; you can book your accommodation while remaining at home. The internet allows you to search for hotels all around the world and simply compare properties and pricing.
Project organisation:
After the administrator logs in
- The current situation
- View Reservation
- Rooms to View
- Check out the payments
- e-mail newsletter
- Log out
After a user logs in
- Examine the rooms
- View the Gallery
- View available facility
- Booking
Scope and Potential
This activity is sometimes referred to as a feasibility study. Create and assess feasibility studies, such as profit analysis, technical feasibility, timeliness, and project feasibility. Interviews should be used to plan work. Feasibility studies are carried out to establish whether or not the suggested strategy is viable in the firm. It all starts with a request from a user for a new system. It contains the following items:
- Determine who is in charge of the new system.
- Enter the user’s request here.
- Detecting flaws in the existing system
- Defining the new system’s aims and objectives
- Assessing the viability of a new system
- Create a project charter that will serve as a guide for the rest of the project.
System Analysis
It is a process of gathering and evaluating data, detecting faults, and disassembling the system into its constituent elements. System analysis is performed to investigate a programme or its components in order to determine its goals. It is a problem solver that enhances the system and guarantees that all components of the system are functioning properly in order to reach their purpose.
The system analysis function’s goal is to increase the proposed system’s systematic specificity. The detailed system specification should clarify what the proposed system will perform without mentioning the technology that will be employed to achieve these requirements. These criteria will be implemented using specified system specs. The crucial model itself may have numerous models, each representing a particular system aspect. Data flow diagrams can be analogous to data, with linkages and diagram changes reflecting system-time activity. As a result, the main model includes the following.
- Content illustration
- Typical data flow diagrams
- Clarification of the lower bubbles process
- Flow data dictionary and storage in DFDs
System Development
Converting a user interface into software development is part of system design. The following are included in the description of the proposed system design:
- Website strategy
- Diagram of Sequence
- Flow Diagram
Implementation
This activity entails module planning, review, and integration into a comprehensive continuous process. Implementation is the process of acquiring all of the required components and merging them to create a fantastic product.
Development of Tests
This method provides a collection of test data that may be used to validate a new system before it is accepted. During the manufacturing process, all components are tested to guarantee that the system does not cause errors. If there are any errors, we fix them, and it is becoming more acceptable.
Codes:
User Visit Home Page:
<?php
include(‘db.php’);
?>
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>YOUR HOTEL</title>
<!– for-mobile-apps –>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”keywords” content=”Resort Inn Responsive , Smartphone Compatible web template , Samsung, LG, Sony Ericsson, Motorola web design” />
<script type=”application/x-javascript”> addEventListener(“load”, function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!– //for-mobile-apps –>
<link href=”css/bootstrap.css” rel=”stylesheet” type=”text/css” media=”all” />
<link href=”css/font-awesome.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”css/chocolat.css” type=”text/css” media=”screen”>
<link href=”css/easy-responsive-tabs.css” rel=’stylesheet’ type=’text/css’/>
<link rel=”stylesheet” href=”css/flexslider.css” type=”text/css” media=”screen” property=”” />
<link rel=”stylesheet” href=”css/jquery-ui.css” />
<link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”all” />
<script type=”text/javascript” src=”js/modernizr-2.6.2.min.js”></script>
<!–fonts–>
<link href=”//fonts.googleapis.com/css?family=Oswald:300,400,700″ rel=”stylesheet”>
<link href=”//fonts.googleapis.com/css?family=Federo” rel=”stylesheet”>
<link href=”//fonts.googleapis.com/css?family=Lato:300,400,700,900″ rel=”stylesheet”>
<!–//fonts–>
</head>
<body>
<!– header –>
<div class=”banner-top”>
<div class=”clearfix”></div>
</div>
<div class=”w3_navigation”>
<div class=”container”>
<nav class=”navbar navbar-default”>
<div class=”navbar-header navbar-left”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<h1><a class=”navbar-brand” href=”index.php”>YOUR <span>HOTEL</span><p class=”logo_w3l_agile_caption”>Your Dreamy Resort</p></a></h1>
</div>
<!– Collect the nav links, forms, and other content for toggling –>
<div class=”collapse navbar-collapse navbar-right” id=”bs-example-navbar-collapse-1″>
<nav class=”menu menu–iris”>
<ul class=”nav navbar-nav menu__list”>
<li class=”menu__item menu__item–current”><a href=”” class=”menu__link”>Home</a></li>
<li class=”menu__item”><a href=”#about” class=”menu__link scroll”>About</a></li>
<li class=”menu__item”><a href=”#team” class=”menu__link scroll”>Team</a></li>
<li class=”menu__item”><a href=”#gallery” class=”menu__link scroll”>Gallery</a></li>
<li class=”menu__item”><a href=”#rooms” class=”menu__link scroll”>Rooms</a></li>
<li class=”menu__item”><a href=”#contact” class=”menu__link scroll”>Contact Us</a></li>
</ul>
</nav>
</div>
</nav>
</div>
</div>
<!– //header –>
<!– banner –>
<div id=”home” class=”w3ls-banner”>
<!– banner-text –>
<div class=”slider”>
<div class=”callbacks_container”>
<ul class=”rslides callbacks callbacks1″ id=”slider4″>
<li>
<div class=”w3layouts-banner-top”>
<div class=”container”>
<div class=”agileits-banner-info”>
<h4>YOUR HOTEL</h4>
<h3>We know what you love</h3>
<p>Welcome to our hotels</p>
<div class=”agileits_w3layouts_more menu__item”>
<a href=”#” class=”menu__link” data-toggle=”modal” data-target=”#myModal”>Learn More</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class=”w3layouts-banner-top w3layouts-banner-top1″>
<div class=”container”>
<div class=”agileits-banner-info”>
<h4>YOUR HOTEL</h4>
<h3>Stay with friends & families</h3>
<p>Come & enjoy precious moment with us</p>
<div class=”agileits_w3layouts_more menu__item”>
<a href=”#” class=”menu__link” data-toggle=”modal” data-target=”#myModal”>Learn More</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class=”w3layouts-banner-top w3layouts-banner-top2″>
<div class=”container”>
<div class=”agileits-banner-info”>
<h4>YOUR HOTEL</h4>
<h3>want luxurious vacation?</h3>
<p>Get accommodation today</p>
<div class=”agileits_w3layouts_more menu__item”>
<a href=”#” class=”menu__link” data-toggle=”modal” data-target=”#myModal”>Learn More</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class=”clearfix”> </div>
<!–banner Slider starts Here–>
</div>
<div class=”thim-click-to-bottom”>
<a href=”#about” class=”scroll”>
<i class=”fa fa-long-arrow-down” aria-hidden=”true”></i>
</a>
</div>
</div>
<!– //banner –>
<!–//Header–>
<!– //Modal1 –>
<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog”>
<!– Modal1 –>
<div class=”modal-dialog”>
<!– Modal content–>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal”>×</button>
<h4>YOUR <span>HOTEL</span></h4>
<img src=”images/1.jpg” alt=” ” class=”img-responsive”>
<h5>We know what you love</h5>
<p>Providing guests unique and enchanting views from their rooms with its exceptional amenities, makes Star Hotel one of bests in its kind.Try our food menu, awesome services and friendly staff while you are here.</p>
</div>
</div>
</div>
</div>
<!– //Modal1 –>
<div id=”availability-agileits”>
<div class=”col-md-12 book-form-left-w3layouts”>
<a href=”admin/reservation.php”><h2>ROOM RESERVATION</h2></a>
</div>
<div class=”clearfix”> </div>
</div>
<!– banner-bottom –>
<div class=”banner-bottom”>
<div class=”container”>
<div class=”agileits_banner_bottom”>
<h3><span>Experience a good stay, enjoy fantastic offers</span> Find our friendly welcoming reception</h3>
</div>
<div class=”w3ls_banner_bottom_grids”>
<ul class=”cbp-ig-grid”>
<li>
<div class=”w3_grid_effect”>
<span class=”cbp-ig-icon w3_road”></span>
<h4 class=”cbp-ig-title”>MASTER BEDROOMS</h4>
<span class=”cbp-ig-category”>YOUR HOTEL</span>
</div>
</li>
<li>
<div class=”w3_grid_effect”>
<span class=”cbp-ig-icon w3_cube”></span>
<h4 class=”cbp-ig-title”>SEA VIEW BALCONY</h4>
<span class=”cbp-ig-category”>YOUR HOTEL</span>
</div>
</li>
<li>
<div class=”w3_grid_effect”>
<span class=”cbp-ig-icon w3_users”></span>
<h4 class=”cbp-ig-title”>LARGE CAFE</h4>
<span class=”cbp-ig-category”>YOUR HOTEL</span>
</div>
</li>
<li>
<div class=”w3_grid_effect”>
<span class=”cbp-ig-icon w3_ticket”></span>
<h4 class=”cbp-ig-title”>WIFI COVERAGE</h4>
<span class=”cbp-ig-category”>YOUR HOTEL</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!– //banner-bottom –>
<!– /about –>
<div class=”about-wthree” id=”about”>
<div class=”container”>
<div class=”ab-w3l-spa”>
<h3 class=”title-w3-agileits title-black-wthree”>About Our YOUR HOTEL</h3>
<p class=”about-para-w3ls”>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Sed tempus vestibulum lacus blandit faucibus. Nunc imperdiet, diam nec rhoncus ullamcorper, nisl nulla suscipit ligula, at imperdiet urna</p>
<img src=”images/about.jpg” class=”img-responsive” alt=”Hair Salon”>
</div>
<div class=”clearfix”> </div>
</div>
</div>
<!– //about –>
<!–sevices–>
<div class=”advantages”>
<div class=”container”>
<div class=”advantages-main”>
<h3 class=”title-w3-agileits”>Our Services</h3>
<div class=”advantage-bottom”>
<div class=”col-md-6 advantage-grid left-w3ls wow bounceInLeft” data-wow-delay=”0.3s”>
<div class=”advantage-block “>
<i class=”fa fa-credit-card” aria-hidden=”true”></i>
<h4>Stay First, Pay After! </h4>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.</p>
<p><i class=”fa fa-check” aria-hidden=”true”></i>Decorated room, proper air conditioned</p>
<p><i class=”fa fa-check” aria-hidden=”true”></i>Private balcony</p>
</div>
</div>
<div class=”col-md-6 advantage-grid right-w3ls wow zoomIn” data-wow-delay=”0.3s”>
<div class=”advantage-block”>
<i class=”fa fa-clock-o” aria-hidden=”true”></i>
<h4>24 Hour Restaurant</h4>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.</p>
<p><i class=”fa fa-check” aria-hidden=”true”></i>24 hours room service</p>
<p><i class=”fa fa-check” aria-hidden=”true”></i>24-hour Concierge service</p>
</div>
</div>
<div class=”clearfix”> </div>
</div>
</div>
</div>
</div>
<!–//sevices–>
<!– team –>
<div class=”team” id=”team”>
<div class=”container”>
<h3 class=”title-w3-agileits title-black-wthree”>Meet Our Team</h3>
<div id=”horizontalTab”>
<ul class=”resp-tabs-list”>
<li>
<img src=”images/teams1.jpg” alt=” ” class=”img-responsive” />
</li>
<li>
<img src=”images/teams2.jpg” alt=” ” class=”img-responsive” />
</li>
<li>
<img src=”images/teams3.jpg” alt=” ” class=”img-responsive” />
</li>
<li>
<img src=”images/teams4.jpg” alt=” ” class=”img-responsive” />
</li>
</ul>
<div class=”resp-tabs-container”>
<div class=”tab1″>
<div class=”col-md-6 team-img-w3-agile”>
</div>
<div class=”col-md-6 team-Info-agileits”>
<h4>Lucas Jimenez</h4>
<span>Manager</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.Lorem ipsum dolor .</p>
<div class=”social-bnr-agileits footer-icons-agileinfo”>
<ul class=”social-icons3″>
<li><a href=”#” class=”fa fa-facebook icon-border facebook”> </a></li>
<li><a href=”#” class=”fa fa-twitter icon-border twitter”> </a></li>
<li><a href=”#” class=”fa fa-google-plus icon-border googleplus”> </a></li>
<li><a href=”#” class=”fa fa-rss icon-border rss”> </a></li>
</ul>
</div>
</div>
<div class=”clearfix”> </div>
</div>
<div class=”tab2″>
<div class=”col-md-6 team-img-w3-agile”>
</div>
<div class=”col-md-6 team-Info-agileits”>
<h4>Sarah Connor</h4>
<span>Receptionist</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.Lorem ipsum dolor .</p>
<div class=”social-bnr-agileits footer-icons-agileinfo”>
<ul class=”social-icons3″>
<li><a href=”#” class=”fa fa-facebook icon-border facebook”> </a></li>
<li><a href=”#” class=”fa fa-twitter icon-border twitter”> </a></li>
<li><a href=”#” class=”fa fa-google-plus icon-border googleplus”> </a></li>
<li><a href=”#” class=”fa fa-rss icon-border rss”> </a></li>
</ul>
</div>
</div>
<div class=”clearfix”> </div>
</div>
<div class=”tab3″>
<div class=”col-md-6 team-img-w3-agile”>
</div>
<div class=”col-md-6 team-Info-agileits”>
<h4>Ivan Simpson</h4>
<span>Manager</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.Lorem ipsum dolor .</p>
<div class=”social-bnr-agileits footer-icons-agileinfo”>
<ul class=”social-icons3″>
<li><a href=”#” class=”fa fa-facebook icon-border facebook”> </a></li>
<li><a href=”#” class=”fa fa-twitter icon-border twitter”> </a></li>
<li><a href=”#” class=”fa fa-google-plus icon-border googleplus”> </a></li>
<li><a href=”#” class=”fa fa-rss icon-border rss”> </a></li>
</ul>
</div>
</div>
<div class=”clearfix”> </div>
</div>
<div class=”tab4″>
<div class=”col-md-6 team-img-w3-agile”>
</div>
<div class=”col-md-6 team-Info-agileits”>
<h4>Marc Gutierrez</h4>
<span>Receptionist</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.Lorem ipsum dolor .</p>
<div class=”social-bnr-agileits footer-icons-agileinfo”>
<ul class=”social-icons3″>
<li><a href=”#” class=”fa fa-facebook icon-border facebook”> </a></li>
<li><a href=”#” class=”fa fa-twitter icon-border twitter”> </a></li>
<li><a href=”#” class=”fa fa-google-plus icon-border googleplus”> </a></li>
<li><a href=”#” class=”fa fa-rss icon-border rss”> </a></li>
</ul>
</div>
</div>
<div class=”clearfix”> </div>
</div>
</div>
</div>
</div>
</div>
<!– //team –>
<!– Gallery –>
<section class=”portfolio-w3ls” id=”gallery”>
<h3 class=”title-w3-agileits title-black-wthree”>Our Gallery</h3>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g1.jpg” class=”swipebox”><img src=”images/g1.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g2.jpg” class=”swipebox”><img src=”images/g2.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g3.jpg” class=”swipebox”><img src=”images/g3.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g4.jpg” class=”swipebox”><img src=”images/g4.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g5.jpg” class=”swipebox”><img src=”images/g5.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g6.jpg” class=”swipebox”><img src=”images/g6.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g6.jpg” class=”swipebox”><img src=”images/g7.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g6.jpg” class=”swipebox”><img src=”images/g8.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g9.jpg” class=”swipebox”><img src=”images/g9.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g10.jpg” class=”swipebox”><img src=”images/g10.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g4.jpg” class=”swipebox”><img src=”images/g4.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”col-md-3 gallery-grid gallery1″>
<a href=”images/g2.jpg” class=”swipebox”><img src=”images/g2.jpg” class=”img-responsive” alt=”/”>
<div class=”textbox”>
<h4>YOUR HOTEL</h4>
<p><i class=”fa fa-picture-o” aria-hidden=”true”></i></p>
</div>
</a>
</div>
<div class=”clearfix”> </div>
</section>
<!– //gallery –>
<!– rooms & rates –>
<div class=”plans-section” id=”rooms”>
<div class=”container”>
<h3 class=”title-w3-agileits title-black-wthree”>Rooms And Rates</h3>
<div class=”priceing-table-main”>
<div class=”col-md-3 price-grid”>
<div class=”price-block agile”>
<div class=”price-gd-top”>
<img src=”images/r1.jpg” alt=” ” class=”img-responsive” />
<h4>Deluxe Room</h4>
</div>
<div class=”price-gd-bottom”>
<div class=”price-list”>
<ul>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star-o” aria-hidden=”true”></i></li>
</ul>
</div>
<div class=”price-selet”>
<h3><span>$</span>320</h3>
<a href=”admin/reservation.php” >Book Now</a>
</div>
</div>
</div>
</div>
<div class=”col-md-3 price-grid “>
<div class=”price-block agile”>
<div class=”price-gd-top”>
<img src=”images/r2.jpg” alt=” ” class=”img-responsive” />
<h4>Luxury Room</h4>
</div>
<div class=”price-gd-bottom”>
<div class=”price-list”>
<ul>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star-o” aria-hidden=”true”></i></li>
</ul>
</div>
<div class=”price-selet”>
<h3><span>$</span>220</h3>
<a href=”admin/reservation.php” >Book Now</a>
</div>
</div>
</div>
</div>
<div class=”col-md-3 price-grid lost”>
<div class=”price-block agile”>
<div class=”price-gd-top”>
<img src=”images/r3.jpg” alt=” ” class=”img-responsive” />
<h4>Guest House</h4>
</div>
<div class=”price-gd-bottom”>
<div class=”price-list”>
<ul>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star-o” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star-o” aria-hidden=”true”></i></li>
</ul>
</div>
<div class=”price-selet”>
<h3><span>$</span>180</h3>
<a href=”admin/reservation.php” >Book Now</a>
</div>
</div>
</div>
</div>
<div class=”col-md-3 price-grid wthree lost”>
<div class=”price-block agile”>
<div class=”price-gd-top “>
<img src=”images/r4.jpg” alt=” ” class=”img-responsive” />
<h4>Single Room</h4>
</div>
<div class=”price-gd-bottom”>
<div class=”price-list”>
<ul>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star-o” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star-o” aria-hidden=”true”></i></li>
<li><i class=”fa fa-star-o” aria-hidden=”true”></i></li>
</ul>
</div>
<div class=”price-selet”>
<h3><span>$</span> 150</h3>
<a href=”admin/reservation.php” >Book Now</a>
</div>
</div>
</div>
</div>
<div class=”clearfix”> </div>
</div>
</div>
</div>
<!–// rooms & rates –>
<!– visitors –>
<div class=”w3l-visitors-agile” >
<div class=”container”>
<h3 class=”title-w3-agileits title-black-wthree”>What other visitors experienced</h3>
</div>
<div class=”w3layouts_work_grids”>
<section class=”slider”>
<div class=”flexslider”>
<ul class=”slides”>
<li>
<div class=”w3layouts_work_grid_left”>
<img src=”images/5.jpg” alt=” ” class=”img-responsive” />
<div class=”w3layouts_work_grid_left_pos”>
<img src=”images/c1.jpg” alt=” ” class=”img-responsive” />
</div>
</div>
<div class=”w3layouts_work_grid_right”>
<h4>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
Worth to come again
</h4>
<p>Sed tempus vestibulum lacus blandit faucibus.
Nunc imperdiet, diam nec rhoncus ullamcorper, nisl nulla suscipit ligula,
at imperdiet urna. </p>
<h5>Julia Rose</h5>
<p>Germany</p>
</div>
<div class=”clearfix”> </div>
</li>
<li>
<div class=”w3layouts_work_grid_left”>
<img src=”images/5.jpg” alt=” ” class=”img-responsive” />
<div class=”w3layouts_work_grid_left_pos”>
<img src=”images/c2.jpg” alt=” ” class=”img-responsive” />
</div>
</div>
<div class=”w3layouts_work_grid_right”>
<h4>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star-o” aria-hidden=”true”></i>
Worth to come again
</h4>
<p>Sed tempus vestibulum lacus blandit faucibus.
Nunc imperdiet, diam nec rhoncus ullamcorper, nisl nulla suscipit ligula,
at imperdiet urna. </p>
<h5>Jahnatan Smith</h5>
<p>United States</p>
</div>
<div class=”clearfix”> </div>
</li>
<li>
<div class=”w3layouts_work_grid_left”>
<img src=”images/5.jpg” alt=” ” class=”img-responsive” />
<div class=”w3layouts_work_grid_left_pos”>
<img src=”images/c3.jpg” alt=” ” class=”img-responsive” />
</div>
</div>
<div class=”w3layouts_work_grid_right”>
<h4>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star-o” aria-hidden=”true”></i>
Worth to come again
</h4>
<p>Sed tempus vestibulum lacus blandit faucibus.
Nunc imperdiet, diam nec rhoncus ullamcorper, nisl nulla suscipit ligula,
at imperdiet urna. </p>
<h5>Rosalind Cloer</h5>
<p>Italy</p>
</div>
<div class=”clearfix”> </div>
</li>
<li>
<div class=”w3layouts_work_grid_left”>
<img src=”images/5.jpg” alt=” ” class=”img-responsive” />
<div class=”w3layouts_work_grid_left_pos”>
<img src=”images/c4.jpg” alt=” ” class=”img-responsive” />
</div>
</div>
<div class=”w3layouts_work_grid_right”>
<h4>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star” aria-hidden=”true”></i>
<i class=”fa fa-star-o” aria-hidden=”true”></i>
<i class=”fa fa-star-o” aria-hidden=”true”></i>
Worth to come again
</h4>
<p>Sed tempus vestibulum lacus blandit faucibus.
Nunc imperdiet, diam nec rhoncus ullamcorper, nisl nulla suscipit ligula,
at imperdiet urna. </p>
<h5>Amie Bublitz</h5>
<p>Switzerland</p>
</div>
<div class=”clearfix”> </div>
</li>
</ul>
</div>
</section>
</div>
</div>
<!– visitors –>
<!– contact –>
<section class=”contact-w3ls” id=”contact”>
<div class=”container”>
<div class=”col-lg-6 col-md-6 col-sm-6 contact-w3-agile2″ data-aos=”flip-left”>
<div class=”contact-agileits”>
<h4>Contact Us</h4>
<p class=”contact-agile2″>Sign Up For Our News Letters</p>
<form method=”post” name=”sentMessage” id=”contactForm” >
<div class=”control-group form-group”>
<label class=”contact-p1″>Full Name:</label>
<input type=”text” class=”form-control” name=”name” id=”name” required >
<p class=”help-block”></p>
</div>
<div class=”control-group form-group”>
<label class=”contact-p1″>Phone Number:</label>
<input type=”tel” class=”form-control” name=”phone” id=”phone” required >
<p class=”help-block”></p>
</div>
<div class=”control-group form-group”>
<label class=”contact-p1″>Email Address:</label>
<input type=”email” class=”form-control” name=”email” id=”email” required >
<p class=”help-block”></p>
</div>
<input type=”submit” name=”sub” value=”Send Now” class=”btn btn-primary”>
</form>
<?php
if(isset($_POST[‘sub’]))
{
$name =$_POST[‘name’];
$phone = $_POST[‘phone’];
$email = $_POST[’email’];
$approval = “Not Allowed”;
$sql = “INSERT INTO `contact`(`fullname`, `phoneno`, `email`,`cdate`,`approval`) VALUES (‘$name’,’$phone’,’$email’,now(),’$approval’)” ;
if(mysqli_query($con,$sql))
echo”OK”;
}
?>
</div>
</div>
<div class=”col-lg-6 col-md-6 col-sm-6 contact-w3-agile1″ data-aos=”flip-right”>
<h4>Connect With Us</h4>
<p class=”contact-agile1″><strong>Phone :</strong>077 6807 3537</p>
<p class=”contact-agile1″><strong>Email :</strong> <a href=”mailto:name@example.com”>INFO@YOURHOEL.COM</a></p>
<p class=”contact-agile1″><strong>Address :</strong> 95 Wade Lane, Saltmarshe, United Kingdom</p>
</div>
<div class=”clearfix”></div>
</div>
</section>
<!– /contact –>
<div class=”copy”>
<p>© 2022 YOURHOTEL . All Rights Reserved | Design by <a href=”index.php”>YOUR HOTEL</a> </p>
</div>
<!–/footer –>
<!– js –>
<script type=”text/javascript” src=”js/jquery-2.1.4.min.js”></script>
<!– contact form –>
<script src=”js/jqBootstrapValidation.js”></script>
<!– /contact form –>
<!– Calendar –>
<script src=”js/jquery-ui.js”></script>
<script>
$(function() {
$( “#datepicker,#datepicker1,#datepicker2,#datepicker3” ).datepicker();
});
</script>
<!– //Calendar –>
<!– gallery popup –>
<link rel=”stylesheet” href=”css/swipebox.css”>
<script src=”js/jquery.swipebox.min.js”></script>
<script type=”text/javascript”>
jQuery(function($) {
$(“.swipebox”).swipebox();
});
</script>
<!– //gallery popup –>
<!– start-smoth-scrolling –>
<script type=”text/javascript” src=”js/move-top.js”></script>
<script type=”text/javascript” src=”js/easing.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(function($) {
$(“.scroll”).click(function(event){
event.preventDefault();
$(‘html,body’).animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!– start-smoth-scrolling –>
<!– flexSlider –>
<script defer src=”js/jquery.flexslider.js”></script>
<script type=”text/javascript”>
$(window).load(function(){
$(‘.flexslider’).flexslider({
animation: “slide”,
start: function(slider){
$(‘body’).removeClass(‘loading’);
}
});
});
</script>
<!– //flexSlider –>
<script src=”js/responsiveslides.min.js”></script>
<script>
// You can also use “$(window).load(function() {“
$(function () {
// Slideshow 4
$(“#slider4”).responsiveSlides({
auto: true,
pager:true,
nav:false,
speed: 500,
namespace: “callbacks”,
before: function () {
$(‘.events’).append(“<li>before event fired.</li>”);
},
after: function () {
$(‘.events’).append(“<li>after event fired.</li>”);
}
});
});
</script>
<!–search-bar–>
<script src=”js/main.js”></script>
<!–//search-bar–>
<!–tabs–>
<script src=”js/easy-responsive-tabs.js”></script>
<script>
$(document).ready(function () {
$(‘#horizontalTab’).easyResponsiveTabs({
type: ‘default’, //Types: default, vertical, accordion
width: ‘auto’, //auto or any width like 600px
fit: true, // 100% fit in a container
closed: ‘accordion’, // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $(‘#tabInfo’);
var $name = $(‘span’, $info);
$name.text($tab.text());
$info.show();
}
});
$(‘#verticalTab’).easyResponsiveTabs({
type: ‘vertical’,
width: ‘auto’,
fit: true
});
});
</script>
<!–//tabs–>
<!– smooth scrolling –>
<script type=”text/javascript”>
$(document).ready(function() {
/*
var defaults = {
containerID: ‘toTop’, // fading element id
containerHoverID: ‘toTopHover’, // fading element hover id
scrollSpeed: 1200,
easingType: ‘linear’
};
*/
$().UItoTop({ easingType: ‘easeOutQuart’ });
});
</script>
<div class=”arr-w3ls”>
<a href=”#home” id=”toTop” style=”display: block;”> <span id=”toTopHover” style=”opacity: 1;”> </span></a>
</div>
<!– //smooth scrolling –>
<script type=”text/javascript” src=”js/bootstrap-3.1.1.min.js”></script>
</body>
</html>
Admin Index Page:
<?php
session_start();
if(isset($_SESSION[“user”]))
{
header(“location:home.php”);
}
?>
<!DOCTYPE html>
<html >
<head>
<meta charset=”UTF-8″>
<title>ADMIN PAGE</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<div id=”clouds”>
<div class=”cloud x1″></div>
<!– Time for multiple clouds to dance around –>
<div class=”cloud x2″></div>
<div class=”cloud x3″></div>
<div class=”cloud x4″></div>
<div class=”cloud x5″></div>
</div>
<div class=”container”>
<div id=”login”>
<form method=”post”>
<fieldset class=”clearfix”>
<p><span class=”fontawesome-user”></span><input type=”text” name=”user” value=”Username” onBlur=”if(this.value == ”) this.value = ‘Username'” onFocus=”if(this.value == ‘Username’) this.value = ”” required></p> <!– JS because of IE support; better: placeholder=”Username” –>
<p><span class=”fontawesome-lock”></span><input type=”password” name=”pass” value=”Password” onBlur=”if(this.value == ”) this.value = ‘Password'” onFocus=”if(this.value == ‘Password’) this.value = ”” required></p> <!– JS because of IE support; better: placeholder=”Password” –>
<p><input type=”submit” name=”sub” value=”Login”></p>
</fieldset>
</form>
</div> <!– end login –>
</div>
<div class=”bottom”> <h3><a href=”../index.php”>HOMEPAGE</a></h3></div>
</body>
</html>
<?php
include(‘db.php’);
if($_SERVER[“REQUEST_METHOD”] == “POST”) {
// username and password sent from form
$myusername = mysqli_real_escape_string($con,$_POST[‘user’]);
$mypassword = mysqli_real_escape_string($con,$_POST[‘pass’]);
$sql = “SELECT id FROM login WHERE usname = ‘$myusername’ and pass = ‘$mypassword'”;
$result = mysqli_query($con,$sql);
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
$active = $row[‘active’];
$count = mysqli_num_rows($result);
// If result matched $myusername and $mypassword, table row must be 1 row
if($count == 1) {
$_SESSION[‘user’] = $myusername;
header(“location: home.php”);
}else {
echo ‘<script>alert(“Your Login Name or Password is invalid”) </script>’ ;
}
}
?>