Here’s a tried and tested method i use to build this functionality. It will work with or without js. In this example we will order the traditional post records.

1. The Database

Create a table to hold your posts and include a column (int) called order.

2. Adding a new record

Each time a new post is saved, the order column is assigned the auto inc value of the rows id. This prevents records from ever having the same order value.

3. The order view (HTML)

To provide the user with a way to order posts records, i’ll start with the HTML. This process is designed to degrade gracefully when JS is disabled. Dont worry if this process seems a bit clunky to the user, chances are they’ll have js turned on. I have found by restricting yourself to develop for HTML first created better structured and semantic code. Quite often divining straight in there with the javascript will get the job done, but it’ll be a headache to maintain.

We’ll present the records in a ordered list, cause we roll semantically like that. Each li represents a post in the database They are ordered by their current order value.

form
	ol
		li
			select

Inside each li element is a select dropdown form input to hold each records order value. The possible options of the selectbox should be limited to the order values in the current record subset.

Again, this is prevents records having the same order value. Name the select box something like order[record->id]. So the post array will contain an array of record id => order value.

Stick a submit button at the bottom of that form and we’re all set…

4. The MySql/Post Process

A user changes some order values and then submits the form. First thing we need to do is check for duplicate order values. Some bright spark could have set all the select boxes to the same value! A quick way to do this is to use the php array_unique function.
This will return all unique values in the order array, so if all values in the array are unique, we’re golden.

$unique = array_unique($_POST['order']);
// if arrays are equal no dupicates posted
if($unique == $order_values)

If the user has posted duplicate order values you can provide feedback and get em to try again. After we have added a lick of jquery however, hopefully this will rarely happen!.

Once unique order values have been validated, its just a simple case of updating the order values of each post row by the post array key with the posted order value. Code will vary depending on what frameworks your using. Below is an example of what my Codeigniter Code would look like

foreach($this->input->post('order') as $id => $order)
{
	$post = new Post($id);
	$post->order = $order;
	$post->save();
}

Simples.

The Javascript

We have a basic, fugly but solid solution working. Now the fun part. With a few lines of jquery we can turn this into a fancy, elegant AND solid solution! We will use the jqueryui sortable plugin so the user can drag and re-order the list items. There is no need to show the selectboxes now because we have visual feedback on the current order. We’ll hide the selectboxes and then update their value whenever the list is reordered.

Here’s the code, the ol has an id of record-order.

// updates the order value of all items hidden
// selectbox to the current order after a drag has taken place
$("#record-order").sortable({
	update: function(event, ui){
		var options = new Array();

		// get an array of order option values
		$(this).find('li:first select option').each(
			function(i){
				options[i] = $(this).val();
			}
		);

		$(this).children('li').each(
			function(i){
				var v = $(this).find('select').val(options[i])
			}
		);
	}
});

Defining the doctype
Setting the page title
Adding meta data
Adding CSS
Addming Javascript files

This saves alot of time getting a site up and running. Its also extremly handy for large sites as you can define your default meta data, css & javascript in a __constructor so its is inhereted by all pages on the site.

A few examples of WrapUp can be found after the jump.

Load the library, you’ll probably want to autoload this if you are using it on the whole site.

$this−>load−>library('wrapup');

The WrapUp library enables you to quickly get an HTML page up and running.

$this->wrapup->head();

The head() function returns the basic html head structure as a string.

There’s not a lot to it but from here you can easily customise your head page, set up defaults and overide/add elements for specific pages.

I normally create a MY_Controller which all my classes inherit from. Then all my default head elements, css links, js files are added to the wrapup library in the MY_Controller constructor.

// set doctype to transistional
$this->wrapup->set_doctype('t');
// add charset meta tag
$meta = array(
'http-equiv' =>'Content-type',
'content' => 'text/html;charset=UTF-8'
);
$this->wrapup->add_meta(meta);
// add default css stylesheet
$this->wrapup->add_css('style.css');
// add google jquery script
$this->wrapup->add_js('jquery.min.js');
// add a default page titles
$this->wrapup->set_title('My Page Title');

This sets up our default page head element. I find it saves me a lot of time if I ever need to change the default style sheet for instance or the doctype. I only have to change it in one place!

Another feature of WrapUp is managing inline javascript and CSS. I try not to include any inline CSS due to the dreaded FOUC but its useful for debugging. Using WrapUp to manage you javascript enables you to generate javascript programatically (include server side variables) and group all off your javascript and send it to the browser at the bottom of the page right before closing your body tags.

You can add inline javascript by calling the add_js_inline() WrapUp method.

$js = 'function say_hello(){alert("hello");}';
$this->wrapup->add_js_inline($js);

Inline code can then be returned in your view by calling inline() method

$this->wrapup->inline();

So that’s about it for an introduction to WrapUp, no doubt i’ll add/tweak it as I discover news needs. Checkout the full documentation in the code vault to see other methods like add_rss()

• Stores new notifications added by the application
• Returns all unread notices added by the application

Pretty Simple. Added to that it will also remember notices between page redirects. So if you add a notice and then reach some code that triggers a redirect the notice will be displayed on the next page.

The library is now in its second incarnation. My original version supported three types of notices

1. Success (Well done, something that was meant to happen has happened)
2. Message (Nothings gone wrong, nothings gone right. Just wanted to say a little something)
3. Error (Oh shit, what did you do? Now i’m gonna have to tidy up after you again!)

Each message would be returned as separate elements with a relevant class representing the type. This was pretty sufficient for most applications but there were times when I wanted to add more attributes (classes, titles, ids) or just needed another ‘type’.

So the new version uses the magic php method __call to provide an unlimited number of ‘types’ via the method $oi->add_{type}($string);

e.g.
$this->oi->add_message('Well Done');

or

$this->oi->add_reallylongandimpressivesupertype('Hello');

More examples and documentation available in the code section

Turns out the twitter part was easy, thanks to simonmaddox’s nice twitter CI library. I got a few whiffs of a url shortening CI library around the web, but it looks like the code was no longer available. Oh well, a good excuse to knock up a new library!

Shortie is a simple library that uses curl to generate short urls using a number of different services. At the moment I have added support for four services:

• tr.im
• tinyurl
• is.gd
• u.nu

Check out the user guide, which was created using an app-in-progress Dokument, for examples.

More about Dokument later…