Introducing CakeBattles

CakeBattles is an online application that allows Contenders to be pitted against each and allows users to vote on who/what would win. Each Contender can be assigned to multiple Tags which are used to create battles with similar Contenders. Each Contender can also have multiple images and these are displayed at random to keep the battles fresh.

The application was written in CakePHP and was inspired from CommandShift3 which allows users to vote on website designs. I wanted to create something similar and have been developing it in my spare time between work and freelance projects with the intent to release it online.

An example of the application in action can be seen here. Whilst developing the application I wanted to look at something pretty so I've used a bunch of hot women but I've tried to make the system as generic as possible and anything could be used e.g. films, TV shows or music albums.

CakePHP

I've been using CakePHP for some time now and its a great framework, if you've been programming in PHP for a while and have yet to try a framework I would recommend this one. CakeBattles is a great application to get your head around and covers quite a few concepts that are key in any program that you'll write.

Admin Section

CakeBattles features a password protected control panel that enables you to login and administer the application online. Some custom routes are setup so that the login and logout pages are accessible outside the usual url structure.

The admin section is quite basic, when logging in the user's details are checked against a user in database, if one is found then the user's details are stored in the Session. Before any Controller action the application checks that the user's details are stored in the Session. Pretty basic but does the job perfectly.

Data Validation

CakePHP has a great way of dealing with data validation, all the rules are setup beforehand in the Model and these are then checked when the data is being saved. CakeBattles is a fairly simple application so there is no need for complex validation rules but it will still give you an idea of how to validate data.

Associations

CakeBattles has a number of Associations in place, each Contender hasMany Contender Items (or images) and hasAndBelongsToMany Tags. These associations can be used across many types of applications including Blogs and Forums.

Components

CakePHP components are re-usable classes that can be used across your applications, CakeBattlesuses an image upload class to test that uploaded files are indeed images and make it easy to upload a single or multiple images.

Reusable Elements

A great article on the bakery is the ability to create elements that request data from a Controller. This is ideal for views that are used throughout a website and you only want to code once. CakeBattlesmakes use of this in the footer section and grabs the top 5 Contenders as well as the most popular tags.

Dynamic Image Resizer

Working with images can be a bit of a pain so I've created an image Controller based on a few found on the Bakery that will take an image and resize it on the fly. This way you will only need to upload the image once and all the thumbnails etc will be made from that image. Caching is also done by the Controller so that the system is not resizing the image on every single request which will help with speed.

Commented Code

All the Controllers and Models are fully commented so you'll now exactly whats going on and the rationale behind my coding decisions. The View files dont contain much code and have therefore not been commented. If your a programmer and you've inherited another project you know how valuable comments can be so I've tried to be as thorough as possible.

Integrating jQuery

jQuery has been my Javascript library of choice for some time now and its fantastic. Sure there are other libraries out there that do similar jobs but I've found jQuery to be one of the best.

Ajax

Ajax is used in the system primarily on the front page and will allow users to vote on a Battle via Ajax and then will reload another without a page refresh. This is all done in under 20 lines of code and works like a charm. I've also used the library to fade in/out the Contender details saving space and creating a pretty slick user interaction.

Table Striping and Row Hovering

With jQuery its extremely easy to stripe tables and add a hover class to rows. This is in place throughout the admin section and will save you writing the same PHP code over and over and will also allow most browsers to highlight actual rows which is a (yet another) downfall of Internet Explorer.

Thickbox

For a lightbox I've used the fantastic Thickbox which will display the full image of any thumbnail. Integration is a breeze and will add a great effect to your images. This is used throughout the system to display larger images of thumbnails and works great with the Image Resizer class.

Tooltips

Tooltips are fairly common in online applications and will allow the user to see more information without taking up screen space. For these I've used the excellent Tooltip plugin to fade in/out tooltips and styled them with a simple black background with a slight transparency.

SWFUpload

SWFUpload is a flash file uploader that will display a progress bar on the upload which is great for user feedback especially for large files. This can be seen in action on the Submit a Contender pageand is extremely useful for websites, the integration is a little tricky at first but works rather well once its all setup.