Tutorial: HTML5 Hotel Room Booking (JavaScript/PHP)

Tutorial:

• HTML5 Hotel Room Booking (JavaScript, PHP)

Features:

• Drag and drop reservation creating, moving and resizing
• Reservation deleting
• Reservation editing using a modal dialog
• Preventing reservations overlaps
• Room status (Ready, Cleanup, Dirty) 
• Room filtering by capacity
• Reservation status (New, Confirmed, Arrived, CheckedOut, Expired), highlighted using duration bar color
• MySQL and SQLite databases supported
• Uses HTML5 scheduler UI control
• PHP source code

Source code of the tutorial is available for download.

Example - Loading Reservations from Database

JavaScript

function loadEvents() {
  var start = dp.startDate;
  var end = dp.startDate.addDays(dp.days);

  $.post("backend_events.php", 
      {
          start: start.toString(),
          end: end.toString()
      },
      function(data) {
          dp.events.list = data;
          dp.update();
      }
  );
}

The server-side backend_event.php script returns reservations in  a JSON array: Example output:

[
  {"id":"2","text":"Mr. Gray","start":"2014-09-29 00:00:00","end":"2014-10-05 00:00:00","resource":"3","bubbleHtml":"Reservation details: <br\/>Mr. Gray","status":"New","paid":"0"},
  {"id":"4","text":"Mrs. Garc\u00eda","start":"2014-09-29 00:00:00","end":"2014-10-05 00:00:00","resource":"1","bubbleHtml":"Reservation details: <br\/>Mrs. Garc\u00eda","status":"Arrived","paid":"0"},
  {"id":"7","text":"Mr. Jones","start":"2014-09-29 00:00:00","end":"2014-10-03 00:00:00","resource":"2","bubbleHtml":"Reservation details: <br\/>Mr. Jones","status":"CheckedOut","paid":"100"}
]

The PHP endpoint loads reservations from the database.

backend_events.php

<?php
require_once '_db.php';

$stmt = $db->prepare("SELECT * FROM reservations WHERE NOT ((end <= :start) OR (start >= :end))");
$stmt->bindParam(':start', $_POST['start']);
$stmt->bindParam(':end', $_POST['end']);
$stmt->execute();
$result = $stmt->fetchAll();

class Event {}
$events = array();

date_default_timezone_set("UTC");
$now = new DateTime("now");
$today = $now->setTime(0, 0, 0);

foreach($result as $row) {
    $e = new Event();
    $e->id = $row['id'];
    $e->text = $row['name'];
    $e->start = $row['start'];
    $e->end = $row['end'];
    $e->resource = $row['room_id'];
    $e->bubbleHtml = "Reservation details: <br/>".$e->text;
    
    // additional properties
    $e->status = $row['status'];
    $e->paid = $row['paid'];
    $events[] = $e;
}

header('Content-Type: application/json');
echo json_encode($events);

?>