This is part 4 of How to create a Booking Calendar Php Mysql. In this tutorial we're going to save bookings with timeslots on to mysql database.
First we will add a column in our existing bookings table in mysql.
ALTER TABLE `bookings` ADD `timeslot` VARCHAR(255) NOT NULL AFTER `timeslot`;
Then we remove the functionality of showing Already booked from our main calendar because when we are using timeslots we dont need that feature.
elseif(in_array($date, $bookings)){
$calendar.="<td><h4>$currentDay</h4> <button class='btn btn-danger btn-xs'>Already Booked</button>";
}
So finally the book buttons code will end up like this
if($date<date('Y-m-d')){
$calendar.="<td><h4>$currentDay</h4> <button class='btn btn-danger btn-xs'>N/A</button>";
}else{
$calendar.="<td class='$today'><h4>$currentDay</h4> <a href='book.php?date=".$date."' class='btn btn-success btn-xs'>Book</a>";
}
Then we will make changes in our mysql insert query which inserts bookings into the bookings table.
if(isset($_POST['submit'])){
$name = $_POST['name'];
$email = $_POST['email'];
$timeslot = $_POST['timeslot'];
$stmt = $mysqli->prepare("select * from bookings where date = ?");
$stmt->bind_param('s', $date);
if($stmt->execute()){
$result = $stmt->get_result();
if($result->num_rows>0){
$msg = "<div class='alert alert-danger'>Already Booked</div>";
}else{
$stmt = $mysqli->prepare("INSERT INTO bookings (name, timeslot, email, date) VALUES (?,?,?,?)");
$stmt->bind_param('ssss', $name, $timeslot, $email, $date);
$stmt->execute();
$msg = "<div class='alert alert-success'>Booking Successfull</div>";
$stmt->close();
$mysqli->close();
}
}
}
Then we'll add Bootstrap modal add bind a click event on our timeslots buttons. First we will add data-timeslot attribute on timeslot button. And give it a class, book.
<button class="btn btn-success book" data-timeslot="<?php echo $ts; ?>"><?php echo $ts; ?></button>
Then we add a bootstrap modal.
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Booking for: <span id="slot"></span></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form action="" method="post">
<div class="form-group">
<label for="">Time Slot</label>
<input readonly type="text" class="form-control" id="timeslot" name="timeslot">
</div>
<div class="form-group">
<label for="">Name</label>
<input required type="text" class="form-control" name="name">
</div>
<div class="form-group">
<label for="">Email</label>
<input required type="email" class="form-control" name="email">
</div>
<div class="form-group pull-right">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Then finally we will add jquery code and bind click handler on our green timeslot buttons.
<script>
$(".book").click(function(){
var timeslot = $(this).attr('data-timeslot');
$("#slot").html(timeslot);
$("#timeslot").val(timeslot);
$("#myModal").modal("show");
});
</script>
Related Videos
How to create a Booking Calendar Php Mysql - 1
How to create a Booking Calendar Php Mysql - 2
How to create a Booking Calendar with Timeslots Php Mysql - 3
How to create a Booking Calendar with Timeslots Php Mysql - 5