Features

CakeBattles is a full web application developed using CakePHP and jQuery that allows battles to take place between contenders with users being able to vote on who/what would win.

CakeBattles has been developed to be as generic as possible so that the system can be used for comparing pretty much anything. Each Contender can have multiple images associated with it which are displayed at random to keeps things fresh and new.

Each Contender also has multiple Tags which are used to categorise them and allow similar Contenders to be pitted against each other more often. The system uses an algorithm to allow new Contenders to be chosen more frequently to combat any skew in the number of Battles.

CakePHP

This application has been developed using the wonderful CakePHP framework which is an MVC rapid development framework and its something I've been using for quite some time and my personal website has quite a few technical articles on how to use it.

There are many advantages of using CakePHP and these include:

  • Rapid development framework
  • Code creation via the Bake command line script
  • Great coding standards and conventions
  • Lots of useful and built in classes to aid development

Although the learning curve is quite steep for a complete beginner it is definately useful to have framework knowledge in your arsenal. It will help you learn and grow as a developer and will help you get projects done quickly in the future.

CakeBattles serves as a strong example of a CakePHP project and can help you as a developer learn how to create an application using the framework and can act as a base to launch your very own online application.

Admin Section

CakeBattles features a password protected control panel that an administrator can use to add/edit/delete Contenders, Contender Items and Tags. The control panel is the central access point to administer the application and from here you are able to enable/disable user submitted Contenders.

CakeBattles Admin CakeBattles Admin CakeBattles Admin CakeBattles Admin

Data Validation

CakePHP has some great data validation features and CakeBattles uses these to validate data from within the same Model and also validate data from another Model e.g. validate Contender Tags from the "add Contender" page.

Validation is tightly integrated into the Model file of each item and the Controller will automatically validate when the data is being saved. Although on some occasions more complex validation is required and this is displayed in the application and is fully commented in the code.

Associations

At the heart of any online application is a database that will lots of associations between the different types of tables. CakePHP handles these associations very easily and CakeBattles utilises a number of these for instance the hasMany and hasAndBelongsToMany associations.

CakeBattles will provide a useful and detailed example of how to work with these associations which you can then use and translate to other projects that your developing.

Components

CakePHP Components are reusable chunks of code that you use for multiple projects. CakeBattles uses an upload component that you can use to upload files in your CakePHP applications.

Reusable Elements

A great feature of CakePHP are Reusable Elements which allow you to request controller data straight from your views and comes in extremely handy. For example the "Top 5" Contenders and "Top Tags" at the bottom of the page are using this functionality.

Fully Commented Code

All the Controller and Model files have been fully commented to allow you to learn and understand whats going on. Being a developer there's nothing worse then seeing code and try to untangle whats going on, so I've tried to fully explain my code.

jQuery

jQuery has been my framework of choice for some time now and I've used it in this project to accomplish a number of tasks. Probably one of the best and most used features is the ability to select dom elements using standard CSS selectors so if your not already using a framework be sure to check it out.

Ajax

One of the first requirements I had for CakeBattles is to be able to vote without refreshing the page, I know that CakePHP has a lot of built in ajax functionality with the Prototype & Script.aculo.us libraries but I wanted to stick with jQuery and it really straight forward to implement.

Once a vote has been placed the link is intercepted and an ajax call it sent to the main Contenders Conroller to record the vote and to request another battle. On the Javascript side of things this is done in under 20 lines of code. Pretty impressive.

Table Striping & Row Hover

Using jQuery its pretty easy to add 'even'/'odd' class names to your tables to save you the hassle of writing that in PHP. Added a 'hover' class is just as easy and adds a little user interaction to your tables.

Thickbox

Thickbox is a lightbox written in jQuery that is used to expand thumbnails to view full size images. It looks great and its extremely easy to implement so I've used it in CakeBattles.

Tooltips

When building online applications I like to give feedback & information to the user as often as possible and Tooltips are an excellent way of achieving this on forms. Using the excellent Tooltip Plugin they were up and running in just a few minutes.

SWF Upload

SWFUpload is a flash file uploader that allows a user to upload large files and get some feedback on the progress of the upload. This can be seen in action on the Add Contender page. The logic behind SWFUpload is a little tricky at first but soon fits into place after a while.