On Dutchie I had a practical need for a short link service. Obviously this will not be the first short URL service and most definitely not the last one either but it’s a short URL service with a bit of a twist to it. First I will explain some more about what a short URL service is for those people that have never heard of it, even though that sounds a bit strange in the Twitter era.
Twitter, like some others is what is called a micro blog. It’s called a micro blog because you can write entries only a 140 characters large. With only 140 characters, every character counts, so instead of putting a link like http://dutchie.org/videoalbums/toon_diverse-tests10.html we would prefer writing http://dutchie.org/iw
HTTP Redirects
HTTP is the protocol used to retrieve webpages in the internet. Most people don’t see what’s going on on the HTTP level, they only see the HTML, pictures etc. that make up the page in their browser. Before a page gets into your browser, potentially a LOT of HTTP requests will be made to the webserver serving the page you want to see (or to any other webserver mentioned in the page).
When a HTTP request is made to a webserver, the webserver can either comply with the request and serve a page or any other object. However, the webserver can also send an HTTP error message like the 401 error message you may have seen before (a 401 tells the browser that an object that it requested was not found on the webserver). In a similar way the webserver can also return redirect message if it doesn’t have the object you asked for but it knows where to find it (most often this is a 301 message).
For Dutchie’s short link service we will be using the HTTP 301 message everytime a request comes in that looks like:
http://dutchie.org/^[0-9a-z]+$
The latter is a regular expression which means ‘http://dutchie.org/’ followed by a sequence of one or more characters between 0 and 9 or a and z. The $ at the end means that there MAY be no other characters behind the URL. So there’s 36 possible characters and there may be any number of them. Therefore these will be Dutchie shortlinks:
http://dutchie.org/iw
http://dutchie.org/iwl9
But these are not correct:
http://dutchie.org/iw/ (trailing ‘/’)
http://dutchie.org/iW (because of the ‘W’)
The programmers may recognize [0-9a-z]+ as a ‘base 36′ number.
Weblinks
Before we go deeper into the technical aspects, first a word on Dutchie’s ‘weblinks’. Pretty much like any other social network, Dutchie can store a collection of categorized and tagged weblinks for every user in the database. Eventually this concept will result in a bookmarking service. The point here is that when people want to make a short link to a long web URL, they probably find the page they want to send to their friends is most likely interesting to them. So why not add the URL (plus the calculated short link) to their weblinks collection right away?
Ofcourse for people that don’t have a Dutchie account, the above is not so interesting as they don’t have access to a Dutchie weblink collection. That’s why, for anonymous or ‘guest’ users, Dutchie does provide the short link service but won’t add the link to their link collection. Dutchie will however create a weblink object even when an anonymous user tries to make a short link; after all there needs to be a way to look up, for example, the /iw mentioned in the example above, to calculate the URL to redirect the browser to.
So since we have a weblink object now anyway, why not do all sorts of things on this link that we also do to regular weblinks, like link checking, finding the titles, counting the number of hits etc.?
That’s one of the main goals of Dutchie’s short link service; anonymous users will simply get ‘yet another’ short link service among thousands of others, while regular users will get an added value out of the Dutchie short link service!
jQuery
So how do we handle the short link service from the browser point of view? Well there’s actually quite a bit of trickery involved here. At the time of writing this article it doesn’t look so pretty yet but in the top navigation bar of Dutchie we see the short link input window as well as a button. The button has been modified using a jQuery script that will make it:
- Get the value out of the URL input
- POST the value to http://dutchie.org/shortlink.php, which is an Ajax script that will check if the URL already existed in Dutchie’s database. If the link already exists, shortlink.php will return a JSON structure containing the short link. If the link doesn’t exist yet, the link will be added to the Weblink category ‘Generic Shortlinks’. the link will be owned by either the logged in user or by the guest user (who can’t do anything with it afterwards). After a link is created, the same JSON structure will be returned.
- The jQuery click() handler for the button will read the JSON structure containing the short link, append() it to a previously hidden <div> and then toggle the visibility of the hidden div so that people can cut and paste the short URL from it.
Obviously these parts will need some styling still at the point of writing this, and there should also be some URL syntax checking with proper error handling but the mechanism works and demonstrated the incredible power of jQuery as the actual code to do this is simply:
$(document).ready(function() {
$("#slbut").click(function(e) {
e.preventDefault();
$.post("/shortlink.php", {url: $("input#slinp").val() },
function(data) {
$("#slout").html(data.shortlink);
$("#slout").toggle();
}, "json");
});
});
That’s right, that’s all there is to it!! The short link button has an ID of ‘slbut’ and in the second line with the ‘$(#slbut).click(…. we see a click handler being added to it. The grabbing of the URL from the div with ID #slinp is done with the $(“input#slinp).val() inside the $.post function and the appending of the short link to the #slout div is done with the $(“#slout”).html() function just before the $(“#slout”).toggle() makes the #slout div visible! So much complex power into just a few lines of code should almost be made illegal, and in fact it took me the longest time to figure out what’s going on with jQuery because of this.
From this short snippet of code you will also understand that restyling everything to make it look much prettier is really trivial, all I have to do is tweak the CSS id’s a little bit.
