Creating an Air Ticket Reservation Form and Stylish Ticket | HTML, CSS, PHP Tutorial

CODING GEAR July 10, 2023

HTML CSS Turtorial

Creating an Air Ticket Reservation Form and Stylish Ticket | HTML, CSS, PHP Tutorial

Html


    
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="main-div">
      
<div align="center" class="div1">
  
    <h1 align="center">Ticket Reservation Form</h1>
  
<form method="post" action="">
  <label for="name"></label>
  <input class="inp" type="text" name="name" placeholder="Name">
  
  <label for="con"></label>
  <input class="inp" type="number" name="con" placeholder="Contact number"><br><br>
  
  <label for="nop"></label>
  <input align="center" class="inp" type="number" name="nop" placeholder="No. of Passengers">
  
  <label for="doj">Date of journey</label>
  <input class="inp" type="date" name="doj"><br><br>
  
  <label for="sou">Source</label>
  <select class="inp" name="sou">
    <option value="Delhi">Delhi</option>
    <option value="Mumbai">Mumbai</option>
    <option value="Banglore">Banglore</option>
  </select>
  
  <label for="dest">Destination</label>
  <select class="inp" name="dest">
    <option value="Delhi">Delhi</option>
    <option value="Mumbai">Mumbai</option>
    <option value="Banglore">Banglore</option>
  </select>
  <br><br>
  <input align="center" class="inp" type="submit">
</form>
</div>
    </div>
    
<div class="ticket-div">
  <div class="ticket-div1">
<h1 align="center">AIR TICKET RESERVATION</h1>
    <div class="childs">
    <p class="fs">  Name:
      <?php echo $name; ?></p> 
    <p class="ls">  Contact No:
      <?php echo $con; ?> </p>
      </div>
      
      <div class="childs">
    <p class="fs"> 
      Source station:
      <?php echo $sou; ?>
      </p> 
    <p class="ls"> 
      Destination station:
      <?php echo $dest; ?>
      
      </p>
      </div>
      
      <div class="childs">
    <p class="fs"> 
    No.Of Passengers:
      <?php echo $nop; ?>
      </p> 
    <p class="ls"> 
      Date of journey
      <?php echo $doj; ?>
      </p>
      </div>
      <div class="childs">
    <p class="fs"> 
      Price per ticket:
      <?php echo $tp; ?>
      </p> 
    <p class="ls"> 
      Total ticket price
      <?php echo $totalprice; ?>
</p>
      </div>
      
      <h2 align="center">Thankyou For Choosing our platform <br> And HAVE A HAPPY JOURNEY</h2>
</div>

</div>    
    
  </body>
</html>

Css


    .main-div{
  background-image: url('Background.jpg');
  background-size: cover;
  background-position: center;
  padding-top: 15px;
  padding-bottom: 15px;
}

.div1{
  background: rgba(0,0,0,0.5);
  margin-right:2rem;
  margin-left:2rem;
  border: solid ;
  border-radius: 5px;
    color: white;
}

.inp{
  border: solid ;
  font-size: 1em;
  border-radius: 10px;
  align-content: center;
}


.ticket-div{
  margin-top:2rem;
 background-image: url('Background.jpg');
  background-size: cover;
  background-position: center;
  padding-top: 15px;
  padding-bottom: 15px;
}

.ticket-div1{
  background: rgba(0,0,0,0.5);
  margin-right:2rem;
  margin-left:2rem;
  border: solid ;
  border-radius: 5px;
    color: white;
}

.childs{
  display: flex;
  justify-content: space-between;
}

.fs{
  text-align: left;
  margin-left: 2rem;
}

.ls{
  margin-right:2rem;
}

PHP


    
<?php 

//Defining ticket prices in an array

$ticketprices = [
 'Delhi' => [
   'Mumbai' => 6000,
   'Banglore' => 10000,
 ],
 
 'Mumbai' => [
   'Delhi' => 7000,
   'Banglore' => 5000,
 ],
 
 'Banglore' => [
   'Mumbai' => 6000,
   'Delhi' => 10000,
 ],
];

//Taking data from form
if ($_SERVER['REQUEST_METHOD'] === 'POST')
{
  $name = $_POST['name'];
  $con = $_POST['con'];
  $nop = $_POST['nop'];
  $doj = $_POST['doj'];
  $sou = $_POST['sou'];
  $dest = $_POST['dest'];
  
  //calculation ticket prices
  $tp = $ticketprices[$sou][$dest];
  
  $totalprice= $tp * $nop;
?>

Post a Comment

0 Comments