The Backpacker website in PHP | Web Development Project |
Tags: php, html, javascript, css
Published: 2023-03-05 08:26:41

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.

{% embed https://youtu.be/69vhqR_0gBU %}

SOURCE CODE-
1.) dbconnect.php
```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
<?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
```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>&copy; <?php echo date("Y")?> The BackPacker, Inc. All rights reserved.</p>
    </div>
  </footer>
</div>
```

4.) welcome.php
```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
<?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
<?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...