Hello World

This is something I've developed during this year, beginning from April I think. I developed it for The Group, which is a finnish event organizer, specialized in LAN parties and gaming events, such as the City-Strike Counter-Strike tournament held this year in Helsinki. I've been a part of this organization, doing programming work, since 2004 or so.


During these years, I have developed several different reservation systems, so you could say that I'm an expert on LAN party reservation systems. Sounds nice eh?

Reservinator is to be the reservation system to end all reservation systems, the one-size-fits-all solution that can be easily re-used in future events too. This shows in the features and layout which is highly customizable.

Overview

The system runs on PHP5 and MySQL, based on Zend Framework, ADOdb and Smarty. It also uses a lot of JavaScript to improve the features in the admin panel, powered by Prototype and Scriptaculous.

Main "normal user" features:

• Top-down map of the party area
  The user can view a map of the party area, which is customizable in the admin panel. The map displays all the places which are reservable and the places are clickable for reservation. The map can also display rooms with customizable on hover -messages and links to other floors or areas if the map is too big to be displayed on a single page.
  
• Easy place reservation
  The user can click any place on the top down map that isn't already reserved to place it in their "shopping cart". The cart can have as many places as the user wants to reserve.
  
• Easy place claiming
  The system will automatically send the user the payment information for their reservation. After the payment has been completed and an admin has confirmed it through the admin panel, the user will receive a claim code for each place he/she has reserved. This is to make it easy for "mass reservation": If you reserve many places, for example for your gaming team, only one person will need to perform the actual reservation. The reserver can just pass the claim codes to the others for the places they wanted.
  
• Competition sign up
  The users can sign up to competitions held at the event from the reservation system.
  

A screenshot of the top-down map of Solid Fireparty. The small boxes are places, red ones reserved, transparent ones free. The big box on top displays messages when the user hovers over places or rooms.

This may seem difficult to do with HTML, but the solution is actually very simple: Each room is just a div which is positioned absolutely. Each table is also an absolutely positioned div, with smaller floated divs inside them which make up the places the users can click. This view is fully customizable from the admin panel with an easy drag-based interface.






Main admin features:

• Map editing
  The admins can edit the top down map with a very easy to use but powerful drag and drop based interface. First, they can define the background image for the map, such as a real map of the building like used in Fireparty. Then, it's a matter of creating each room and table in the editor. This is done by simply representing each room and table as a draggable div. You can create either a room or a table by a click of a button and you can configure various properties on each, such as the cost of a place in a room, the description of the room which will be shown when the user hovers over it, a link which the user is sent to when they click the room and for tables the amount of places and the angle of the table. Each item can be positioned by simply dragging it and dropping it to somewhere on the map, after which the width and height can be changed for rooms by inputting the wanted width and height on the editor settings, while seeing the results live on the map. This is all done with JavaScript and serialized and sent to PHP when the user clicks save.
  
• Payment processing
  The administrators get a list of all payments the system has requested, including the reference numbers. When the payment has been received to the bank account, the admin can simply fill in the reference number on a form and click a button to mark the payment as paid. This will also trigger an automatic mail with claim codes to the user in question. All the payment settings can also be changed, such as how much time the user will be given to pay it. Admins can purge overdue payments with a click of a button, which also clears the unpaid places for new reservations.
  
• Email messages
  The system lets admins send email to the registered users and it also sends messages automatically on events such as new reservation and reservation marked paid. The automatic messages are fully customizable and they can include various details, such as the user's name or the payment's reference number, which are automatically inserted in the mail. The messages use simple Smarty syntax for these.
  
• Competitions
  Admins can easily create a list of competitions that will be held at the event, which the users can then sign up for. Each competition's description and sign up counts can be viewed from the admin panel.
  
• User management
  Admins can edit/remove registered users from the admin panel.
  
• List generation
  One of the new features I've added just yesterday is list generation. Powered by the DataTable component from Yahoo! UI Framework, it can be used to display different kinds of lists based on the user data in the system. This is useful, when the actual event begins, for all kinds of things. The organizers can just choose some of the details, such as user's names and their place and room and get a nice formatted and sortable list with the data.
  

Technical aspects

There are various things that are faced when developing something like this. First thing is obviously the size of the project; there is a lot of code involved. Others include things like how to structure the database and things like that. Another thing was the map editor, which is quite complex and was actually the original idea I started building the system around.

As mentioned earlier, I used the Zend Framework in this project. This means it uses the MVC pattern, so even though the project got pretty big, it's quite easy to manage as the parts are properly separated.


The database structure took a lot of thought, but now it seems quite simple. Basically, the system separates users, reserved places, invoices, places, rooms and tables in separate tables.
When an user reserves a place, the place is put to the reserved places table along with an ID to a newly generated invoice. The invoice is placed to the invoice table, and linked to the user with the user's ID. When the invoice is marked paid by an admin, the system generates a claim code for each place and they are put to a table as well, with references to the place they claim.
When the user claims a place, the place in reserved places table is marked as being claimed by the user.


The map editor required quite much work. Firstly, it uses the drag and drop feature provided by scriptaculous to move the rooms and tables. Each room and table is also selectable by a click, which loads their settings which can then be changed. The settings are stored in the elements themselves as attributes. One somewhat difficult feature was the table angle: You can define an angle in degrees you want to rotate a table. This required a lot of thinking on how to get it display correctly, because HTML does not support rotating elements. It does some calculations on the fly to figure out how much each place needs to be moved so that the table appears to be in the correct angle.

When the admin saves the layout, the JavaScript code collects all the data from each room and table and sends them to PHP for processing. There's a lot of things PHP has to do to the data before it can be submitted to the database.

Each table must be inside a room, therefore PHP must first create a list of rooms and their dimensions. Then it must calculate where each table is, and if a table's dimensions are inside a room's dimensions, it means the table must be placed under that room in the database. PHP also has to calculate how to place the places in tables which have an angle set, but this only applies when the places are rendered: it's not sent to the DB. Place numbering is also calculated on the fly.

Future developments

This is an ongoing project for me. There have already been several missing features and things that could be improved on when we used Reservinator as the place reservation system for Solid Fireparty. Most of the things were admin-related, so from a normal user's point of view, the system has worked very well.

We are also renting the system to other LAN party organizers. You can contact me for regarding the system and pricing at my nick at thegroup.fi. It's currently in finnish, but it can be easily translated to any other language.