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.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)

html5-machine-production-job-scheduling-php-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)

html5-tennis-court-reservation-javascript-php.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)

html5-timesheet-javascript-php.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 SQLite 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 4 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)

AngularJS Hotel Room Booking Tutorial

angularjs-hotel-room-booking-tutorial.png

  • Displaying one month
  • Switching the month using date navigator control
  • Support for check-in and check-out times (displays overnight hotel reservations)
  • Creating new reservations using drag and drop
  • Status of the reservation is marked using a custom color
  • Status of the room is marked using a custom color ("free", "cleanup", "dirty")
  • PHP backend (based on simple JSON endpoints)

AngularJS Doctor Appointment Scheduling Tutorial (PHP)

angularjs-doctor-appointment-scheduling.png

  • Appointment reservation for multiple doctors
  • Management overview of all doctors, shifts and appointment slots
  • Defining appointment slots using drag and drop
  • Public interface with an option to request an appointment in one of the available slots
  • Uses DayPilot AngularJS Scheduler and Event Calendar controls
  • Sample project with PHP backend, storing data in a SQLite database

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)

Basic Tutorials

JavaScript

Angular 2/4/5

Vue.js

AngularJS (1.x)

Server-Side Platforms and Languages

ASP.NET Core MVC

Spring Boot (Java)

PHP

Quick Start Projects

Minimum project setup that includes the required boilerplate code.

Angular 5

Angular 4

Feature Showcase

JavaScript

Angular 2/4/5