The building blocks of a registration page

I’ve built out and pretty much completed the registration workflow at this point. It’s nothing fancy, you fill out a bunch of forms and upon successful completion it drops a row into the database, but it works. There were quite a few individual components that contributed to my success.

First off, I used a HTML + CSS form template that I found over at woork. I wanted to avoid tables and this helped me to do it. Ultimately I’m not quite sure if its the final model I’ll follow for building out forms, but it’s working for now, so I’ll quit messing with it.

Next I used jQuery + jQuery UI to style my buttons and error notifications. Google is hosting these libraries thanks to their AJAX Libraries API. Oh, and did you know that Google also hosts the CSS for jQuery UI as of jQuery UI 1.7.0? They don’t mention it on their API page anywhere, but they do. Here’s how to load up the CSS for the jQuery UI Redmond theme via Google:

<link rel="stylesheet" type="text/css" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css" />

Also ridiculously helpful is a page over at the filament group that explains how to style buttons for jQuery UI, as well as how to do things like getting a hand icon to show up when you hover over a button. (Why doesn’t jQuery UI have a page like this?!)

As for the actual logic behind the form, most of that is handled by the awesomeness that is CodeIgniter. They have a fantastic form validation class that handles almost everything for you. Not only can you validate data, but in the same stroke you can clean data too (e.g. trim, convert to a md5 hash, etc.), like this:
$this->form_validation->set_rules('username', 'Username', 'trim|required|min_length[5]|max_length[12]|xss_clean');
$this->form_validation->set_rules('password', 'Password', 'trim|required|matches[passconf]|md5');
Thanks to their ability to chain all of the rules together, you can literally validate and prep a field in one line. Done. Finito!