The Backpacker website in PHP | Web Development Project |
Madhuban Khatri
Posted on March 5, 2023
Welcome back my friends, I was working on my another project which is THE BACKPACKER. The Backpacker is a some kind of hostel where travellers can stay for short time sharing rooms with others.
Here I have created a website where user can search the hostels and check their price and book them also.
I am using XAMPP server for Database and run my project on localhost. So if you want to use the project then download XAMPP or WAMPP.
SOURCE CODE-
1.) dbconnect.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "the_backpacker";
$conn = mysqli_connect($servername,$username,$password,$database);
if(!$conn)
{
die("connection is not established");
}
?>
2.) header.php
<?php
require("dbconnect.php");
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
html
{
scroll-behavior: smooth;
}
.centered
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/the_backpacker/welcome.php">The BackPacker</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/the_backpacker/welcome.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#top_destinations">Destinations</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
3.) footer.php
<div class="container">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<h5>Accomodations</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Destination</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Hostels</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Workstations</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Group Bookings</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Sitemap</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Policies</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Guest Policy</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Privacy Policy</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Refund Policy</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Terms & Conditions</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Contact us</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Important Links</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Career</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Volunteer</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Invest & Partener</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Press Mentions</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About us</a></li>
</ul>
</div>
<div class="col-md-5 offset-md-1 mb-3">
<form>
<h5>Subscribe to our newsletter</h5>
<p>Monthly digest of what's new and exciting from us.</p>
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Email address</label>
<input id="newsletter1" type="text" class="form-control" placeholder="Email address">
<button class="btn btn-primary" type="button">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between my-4 border-top">
<p>© <?php echo date("Y")?> The BackPacker, Inc. All rights reserved.</p>
</div>
</footer>
</div>
4.) welcome.php
<?php
include "header.php";
if(isset($_GET['success']))
{
echo '<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Success !</strong> Your booking is successfully!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>';
}
?>
<div id="carouselExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="stock-images/img1.jpg" class="d-block w-100" alt="img1">
</div>
<?php
$img_array = ["img2.jpg","img3.jpg","img4.jpg","img5.jpg","img6.jpg","img7.jpg"];
for ($i=0; $i < count($img_array); $i++) {
echo '<div class="carousel-item">
<img src="stock-images/'.$img_array[$i].'" class="d-block w-100" alt="img1">
</div>';
}
?>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container my-4 bg-dark py-3">
<table class="table text-light">
<tr>
<form action="/the_backpacker/destination.php" method="get">
<td>
<label class="form-label">Select your Destination</label>
<select class="form-control" name="dest">
<option>Jodhpur</option>
<option>Jaisalmer</option>
<option>Coorg</option>
<option>Bir</option>
<option>Jaipur</option>
<option>Agra</option>
<option>Delhi</option>
<option>Kasol</option>
<option>Goa</option>
</select>
</td>
<td>
<label class="form-label">Check In</label>
<input type="date" name="check_in" id="date1" value="<?php echo date("Y-m-d")?>" min="<?php echo date("Y-m-d")?>" class="form-control" oninput="my_fun()" required/>
</td>
<td>
<label class="form-label">Check Out</label>
<input type="date" name="check_out" id="date2" value="<?php echo date("Y-m-d",strtotime(' +1 day'))?>" min="<?php echo date("Y-m-d")?>" class="form-control" required/>
</td>
<td>
<label class="form-label"></label>
<input type="submit" class="form-control btn btn-outline-primary my-2" value="CHECK NOW"/>
</td>
</form>
</tr>
</table>
</div>
<div class="container row mx-5" id="top_destinations">
<h2>Top Destination</h2>
<hr>
<?php
$card_details = [
'jaisalmer'=>'jaisalmer.jpg', 'jaipur'=>'jaipur.jpg','bir'=>'bir.jpg','jodhpur'=>'jodhpur.jpg','agra'=>'agra.jpg','coorg'=>'coorg.jpg','delhi'=>'delhi.jpg', 'goa'=>'goa.jpg', 'kasol'=>'kasol.jpg'
];
foreach ($card_details as $key => $value) {
echo '<div class="container-flex col-md-4 my-3">
<div class="card" style="width: 25rem;">
<img src="stock-images/'.$value.'" class="card-img-top" height="300px" alt="...">
<div class="card-body">
<a href="/the_backpacker/destination.php?dest='.$key.'&check_in='.date("Y-m-d").'&check_out='.date("Y-m-d",strtotime(' +1 day')).'" style="text-decoration: none;"><h5 class="card-title">'.strtoupper($key).'</h5></a>
</div>
</div>
</div>';
}
?>
<hr>
</div>
<script>
<?php
echo 'var d1 = document.getElementById("date1");
var d2 = document.getElementById("date2");
console.log(d1.min);
function my_fun()
{
d2.value = d1.value;
d2.min = d1.value;
}';
?>
</script>
<?php
include "footer.php";
?>
5.) destinatioin.php
<?php
include("header.php");
if(!isset($_GET['dest']) and !isset($_GET['check_in']) and !isset($_GET['check_out']))
{
header("location:welcome.php");
}
?>
<?php
$dest = $_GET['dest'];
$sql_query = "SELECT * FROM `hostels` WHERE `hostel_destination`='$dest'";
$result = mysqli_query($conn,$sql_query);
$row = mysqli_fetch_assoc($result);
echo '<div class="container-flex text-center text-capitalize" >
<img src="stock-images/'.strtolower($dest).'.jpg" class="img-fluid w-100 opacity-75" alt="'.$dest.'">
<h1 class="centered" style="text-shadow: 2px 2px 2px black;">'.$dest.'</h1>
</div>';
?>
<div class="container-fluid my-5">
<h2>Hostel in <?php echo strtoupper($dest);?></h2>
<div class="card mb-3 w-100">
<div class="row g-0">
<div class="col-md-4">
<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="stock-images/room1.jpg" class="img-fluid rounded-start">
<!-- <img src="..." class="d-block w-100" alt="..."> -->
</div>
<div class="carousel-item">
<img src="stock-images/room2.jpg" class="img-fluid rounded-start">
<!-- <img src="..." class="d-block w-100" alt="..."> -->
</div>
<div class="carousel-item">
<img src="stock-images/room3.jpg" class="img-fluid rounded-start">
<!-- <img src="..." class="d-block w-100" alt="..."> -->
</div>
</div>
</div>
</div>
<div class="col-md-8 my-3">
<div class="card-body">
<div class="row">
<div class="col-md-7">
<h5 class="card-title text-decoration-underline">Mixed Bed Dormitory</h5>
</div>
<div class="col-md-5">
<h1 class="card-title text-end"><?php echo $row['price'];?>Rs.</h1>
</div>
</div>
<div class="row">
<b>Address</b>
<p class="card-text"><?php echo $row['address'];?></p>
</div>
<div class="row my-3">
<div class="col-md-8">
<b>Amenties</b>
<p class="card-text"><i>Wi-Fi | Cafe | CCTV Camera | Common Area | Indoor games | Parking | Pet friendly |</i></p>
</div>
<div class="col-md-4">
<p class="card-text text-end text-success"><b><?php echo $row['num_rooms']?> beds available</b></p>
</div>
</div>
<div class="row my-3">
<div class="col-md-8">
<b>Important Timings</b><br>
<span class="card-text"> Cafe - <b>9AM to 11PM</b> | Reception - <b>24 Hours</b> | Guest Visit - <b>10AM to 8PM</b> | Common Area - <b>24 Hours</b></span>
</div>
<div class="col-md-4 text-end">
<?php
if($row['num_rooms']==0)
{
echo '<button class="btn btn-primary text-end" data-bs-toggle="modal" data-bs-target="#exampleModal" disabled>Sold Out</button>';
}
else
{
echo '<button class="btn btn-primary text-end" data-bs-toggle="modal" data-bs-target="#exampleModal">Add Bed</button>';
}
?>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Booking</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="/the_backpacker/add_customer.php?dest=<?php echo $dest?>&check_in=<?php echo $_GET['check_in']?>&check_out=<?php echo $_GET['check_out']?>" method="post">
<div class="modal-body">
<div class="mb-3">
<label for="fname" class="form-label">Full Name</label>
<input type="text" name="customer_name" class="form-control" id="fname" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" name="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="contact" class="form-label">Contact Number</label>
<input type="number" name="contact_num" class="form-control" id="contact" required>
</div>
<div class="mb-3">
<div class="row my-1">
<div class="col-md-8 py-3 border border-primary">
Check In
</div>
<div class="col-md-4 py-3 border border-primary">
<input type="date" name="check_in" value="<?php echo $_GET["check_in"]?>" class="form-control"/>
</div>
</div>
<div class="row my-1">
<div class="col-md-8 py-3 border border-primary">
Check Out
</div>
<div class="col-md-4 py-3 border border-primary">
<input type="date" name="check_out" value="<?php echo $_GET["check_out"]?>" class="form-control"/>
</div>
</div>
</div>
<div class="mb-3">
<h5>Add Beds</h5>
<div class="row">
<div class="col-md-9 py-3 border border-primary">
<span onclick="remove_bed()" class="btn btn-primary btn-sm">-</span>
<input type="text" class="text-center" name="bed_count" id="bed_count" value="1" size="1" style="border: none; outline: none" readonly/>
<span onclick="add_bed()" class="btn btn-primary btn-sm">+</span>
</div>
<div class="col-md-3 py-3 text-end border border-primary">
<input type="text" id="amnt_text" class="form-control text-center" name="total_pay" value="<?php echo $row['price']?>Rs." size="1" style="border: none; outline: none" readonly/>
</div>
</div>
<div class="row my-1">
<button type="submit" class="btn btn-outline-primary">Confirm Booking</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
<?php
echo '
var a = document.getElementById("bed_count");
var total_beds = '.$row["num_rooms"].'
var amntText = document.getElementById("amnt_text");
function add_bed(){
if(a.value<total_beds)
{
a.value++;
var total_amount = a.value*'.$row["price"].'
amntText.value = total_amount+" Rs.";
}
a.value = a.value;
}
function remove_bed(){
if(a.value>1)
{
a.value--;
var total_amount = a.value*'.$row["price"].'
amntText.value = total_amount+" Rs.";
}
a.value = a.value;
}
';
?>
</script>
<?php
include("footer.php");
?>
6.) add_customer.php
<?php
require("dbconnect.php");
if($_SERVER['REQUEST_METHOD']=='POST')
{
$customer_name = $_POST['customer_name'];
$email = $_POST['email'];
$contact_num = $_POST['contact_num'];
$checkIn = $_POST['check_in'];
$checkOut = $_POST['check_out'];
$dest = $_GET['dest'];
$bedCount = $_POST['bed_count'];
$totalPay = $_POST['total_pay'];
if(!empty($customer_name) and !empty($email) and !empty($contact_num) and !empty($checkIn) and !empty($checkOut) and !empty($dest))
{
$sql_query = "INSERT INTO `customers` (`customer_name`, `email`, `destination`, `check_in`, `check_out`, `contact_num`, `rooms_book`, `total_pay`) VALUES ('$customer_name', '$email', '$dest', '$checkIn', '$checkOut', '$contact_num', '$bedCount', '$totalPay')";
$result = mysqli_query($conn,$sql_query);
$select_query = "SELECT * FROM `hostels` WHERE `hostel_destination`='$dest'";
$select_query_result = mysqli_query($conn, $select_query);
$select_row = mysqli_fetch_assoc($select_query_result);
if($result)
{
$update_room = $select_row['num_rooms'] - $bedCount;
$update_query = "UPDATE `hostels` SET `num_rooms` = '$update_room' WHERE `hostel_id` = '$select_row[hostel_id]'";
$update_result = mysqli_query($conn,$update_query);
header("location:welcome.php?success=true");
}
}
}
?>
That's my project. If you want to share your ideas then you can.
Comment below...
💖 💪 🙅 🚩
Madhuban Khatri
Posted on March 5, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related