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])
			}
		);
	}
});

Dropbox

Initially I used dropbox, as an alternative to email, to share music tracks and ideas with band mates. So simple even our singer could work it out! It has quickly become my main tool for syncing all sorts of other data.

So I decided to see if it could be used to sync multiple MAMP web development environments. Site files and MySQL databases.

Ok, skip the blah, show me the method!

Syncing Applications with Dropbox

When you work on multiple computers it can be a pain to keep things in sync. But, where there’s data there’s a way to sync it with dropbox. One of the first dropbox solutions I came across was for 1Password, my password manager of choice. 1Password holds all its data in a keychain so you can simply move the 1Password.agilekeychain file to your dropbox and edit preferences in 1password to point to the new location. A more detailed tutorial can be found over at WebWorkerDaily. As of version 3, this keychain file can also be opened as an HTML webpage so you can access your passwords on computers without 1password installed.

Things requires a different approach. There is no preference option to chose the location of you data file. Instead you can move the Things data folder into your dropbox and create a symbolic link in its place. Detailed instructions can be found at this hocuspokus.net. Symbolic links are basically low level Aliases. I also use a similar method to keep the address book app in sync.

After using dropbox to sync these apps between 3 computers I was in need of a better way to sync my web development projects. I was already using dropbox to share zipped versions of site files and mysql dumps but this process was a bit tedious. Every morning I have to unarchive the files into my sites folder and re-import databases and remember to export them before I left. One solution would be to create a couple of scripts to import and export this data… but after seeing how well dropbox had worked so far, I decided to test its limits and sync a whole web development sever.

Syncing MAMP with Dropbox

I use MAMP to run my local webserver with php and mySQL. The first step is to sync Apache’s webroot. By default it’s located in the /Applications/MAMP/htdocs folder.

Click Preferences > Select the Apache tab and change the location to a folder in your dropbox, I use /Dropbox/Sites.

Now all your development site files will be kept in sync through your dropbox.

The second step is to sync MAMPs MySQL server. Unfortunately MAMP does not provide the option to define the location the database files are kept. So I followed the symbolic link method used to sync Things.

MAMPs database files are stored in /Applications/MAMP/db. Make sure you quit MAMP first, then move the db folder to your dropbox.

Create a symbolic link back to its original location. You can use terminal for this but I prefer to use SymbolicLinker a contextual symlink plugin. It gives you a “Make Symbolic Link” option in any file or folders right click menu.

Thats it, you’re done. Start up MAMP and you’re up in the cloud.

Steady Eddy

I haven’t tested this process fully yet and may update this post if I see any trouble brewing. A few points to note though.

• Developing large sites with large databases is gonna fill up your dropbox pretty quickly.
• I wouldn’t recommend developing on different computers simultaneously, dropbox is quick but not that quick. I can imagine your database could get messed up if your jumping between computers updating and deleting records. But by all means give it a go and let me know how dropbox copes!
• For theses reasons do not totally rely on dropbox. It’s always good practive to have a local backup of your dev files as well, just incase.

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

Here’s a quick HTML template to organise your CSS typography.

Nothing fancy, just an HTML file containing the most common elements to start your CSS, and a basic typography stylesheet. I used the 960 grid system to reset browser CSS and control the template layout.

I find this helpful as a starting point for any site. Before I start knocking a CSS class together to style an element up for a specific page, I refer to the sites CSS template to see if  a similar base element already defined.

I would encourage keeping this typography stylesheet as basic as possible. Then use general css classes to add extra style later on.

Both the HTML and CSS files are included in the zip after the jump.

Download CSS Typography Template

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…