Tutorials

Web Applications

HTML5 Hotel Room Booking (JavaScript/PHP/MySQL)

html5-hotel-room-booking-javascript-php.png

Hotel room booking web application that uses JavaScript Scheduler to implement the reservation user interface.

  • configurable view (month/week)
  • room status (ready/dirty/cleanup in progress)
  • room filtering (by size)
  • drag and drop reservation creating and moving
  • reservation status with color highlighting
  • reservation editing modal dialog (guest name, paid amount)
  • check-in/check-out time at noon
  • REST API implemented in PHP/MySQL
  • simple MySQL database schema

HTML5 Doctor Appointment Scheduling (JavaScript/PHP/MySQL)

html5-doctor-appointment-scheduling-javascript-php-mysql.png

Doctor appointment scheduling web application with public interface for patients, and private interface for doctors/managers.

  • create pre-defined availability time slots for each doctor (1 hour by default)
  • manage available slots (delete, add, create multiple slots at once using drag and drop)
  • doctors can confirm appointment requests created by patients
  • see slots of all doctors at once in a managers' view
  • uses a REST backend created in PHP/MySQL

HTML5 Machine/Production Job Scheduling Tutorial (PHP/MySQL)

php-machine-production-job-scheduling-mysql.png

Production job scheduling application with highlighting job dependencies:

  • Machines displayed on the Y axis, grouped by type
  • Jobs can be assigned to a machine at a specific time
  • Displays job dependencies using links
  • Lightweight PHP backend that exposes JSON API
  • MySQL database

HTML5 Tennis Court Reservation (PHP, JavaScript)

php-tennis-court-reservation-html5-javascript-mysql.png

Web application for managing tennis court reservations.

  • see available time slots
  • create a new reservation using drag and drop
  • different prices for different times of day
  • uses a REST backend implemented in PHP

HTML5 Timesheet (JavaScript, PHP)

javascript-html5-timesheet-php-mysql.png

  • HTML5 monthly timesheet, one day per row
  • Supports multiple users, switching using a <select> control
  • Displays day summary (total time) in day headers
  • Highlights business hours
  • Sample PHP backend with MySQL database
  • Drag and drop record creating, moving and resizing

Angular Hotel Room Booking (PHP/MySQL)

angular2-hotel-room-booking-php-mysql.png

  • Angular single page application for managing hotel reservations
  • Full-screen page layout to use all available space
  • Changing the visible month using date navigator
  • Custom check-in/check-out time (noon)
  • Basic room management (creating, updating, deleting)
  • Room status (ready, cleanup, dirty)
  • Reservation management (creating, moving, updating, deleting)
  • Reservation status (new, confirmed, arrived, checked-out)
  • Simple token-based authentication integrated
  • Includes a PHP/MySQL backend (with JSON-based endpoints)

Angular Restaurant Table Reservation (PHP/MySQL)

angular-restaurant-table-reservation-php-mysql.png

  • Angular frontend
  • Built using Angular Scheduler UI component from DayPilot Pro for JavaScipt
  • Restaurant tables displayed in a tree hierarchy (by location)
  • Table filtering by number of seats
  • Table filtering by availability at a specified time
  • Uses a REST API backend, implemented using PHP/MySQL

Angular Work Order Scheduling (PHP/MySQL)

angular-work-order-scheduling-php.png

  • Based on DayPilot Angular 5 Scheduler component
  • REST/JSON backend written in PHP
  • Queue of unscheduled tasks
  • Scheduling a task using drag and drop (assign a person and time)
  • Context menu for additional work order actions (edit, delete, unschedule)

Machine/Production Job Scheduling Web Application (Spring/Java)

machine-production-job-scheduling-spring.png

  • Timeline with business hours only (nights and weekends are hidden)
  • Subsequent job phases linked visually
  • Spring Boot web application (Java 8)

PHP Annual Leave Scheduling (JavaScript/HTML5 Frontend, MySQL Database)

php-annual-leave-scheduling-tutorial-html5-javascript-mysql.png

  • PHP annual leave scheduling and tracking system
  • Allows to schedule annual leave for each employee in half-day units
  • Displays total annual leave days for every person
  • Drag and drop support
  • MySQL database storage

PHP Shift Planning System (JavaScript/HTML5 Frontend, MySQL Database)

php-shift-planning-tutorial-javascript-html5-mysql.png

  • The application displays an interactive shift plan, implemented using JavaScript Scheduler component
  • You can plan shifts for multiple locations/positions
  • Each day is split into three 8-hour shifts
  • See all assignments for a selected location
  • Use drag and drop to move assignments between shifts and employees
  • PHP and MySQL used for the backend REST API

Other Application Tutorials

Basic Tutorials

JavaScript

Angular

React

Vue.js

AngularJS (1.x)

Server-Side Platforms and Languages

ASP.NET Core

Spring Boot (Java)

PHP

Feature Showcase

JavaScript

Angular