Theatre Booking System

This was an interesting little exercise that cropped up on the Apex forum:

Forum Post

The challenge was to create a theatre seat booking report that showed the booked and available seating. The report was to lay the seats out in the same configuration as in the theatre with the twist that the seats were staggered. A solution using a conventional HTML table layout would not work to well. Instead my solution used a background image as a container and then relative position for the seats. Rather than a report, my suggestion was to place a checkbox in each seat position so the user could easily select an available seat as part of a booking wizard. This solution could also be used for a restaurant, hotel, hospital etc booking system.

Lessons learnt:

  1. You can format checkboxes with CSS but Safari and Firefox ignore most of the settings.
  2. The X Y positions for the checkboxes would be better stored in the database. this would give you much more flexibility for complex layouts.
  3. The background image should contain most of the details the user would need for orientation such as the Stage, Isles, stalls, balcony and exits.
  4. The function could be adapted to use images or checkboxes depending on what it was being used for.
  5. It would be clearer for booked seats to be replaced by an image rather than a checked, disabled checkbox.

Example and Code