Build a URL Shortener with jQuery, PHP and MySQL

Building a link-shortening service is a fun and educational way to get acquainted with the intricacies of creating a functional, Ajax-enhanced website.

URL shorteners such as TinyURL and bit.ly are all the rage these days, with their popularity having skyrocketed alongside Twitter and mobile device usage. The idea is a fairly simple one: accept as input an unacceptably long URL and provide in return one that fits into the tiny confines of a mobile device and Twitter's 140-character limit. Afterwards, anytime the abbreviated URL is clicked, the user is first sent to the shortening service, at which point the abbreviated URL is compared with a database, the original URL retrieved, and the user redirected to the desired location.

Beyond being able to provide the immediate utility of abbreviating a lengthy URL, URL shortening services are able to provide users with a number of other useful features, such as clickthrough statistics, referrer details, and even information about link diffusion such as who else has mentioned it on Twitter.

Because such a service encapsulates quite a few useful programming lessons, I thought it would be both fun and educational to create our own URL shortening solution. We'll use several popular tools to build the service, including jQuery, PHP and MySQL. You can also test out the service for yourself by navigating to u.wjgilmore.com.

Step 1. Create the MySQL Table

Let's begin by creating the MySQL table used to store the URLs. At a minimum, this table should include columns for storing the original URL and the abbreviated alias. However, it would also be useful to store the creation timestamp and clickthrough statistics, so we'll include those columns as well:

Because a URL-abbreviation service will naturally spend a lot of time scanning the table to determine whether a URL already exists, as well as attempting to look up a URL abbreviation, the associated columns should be indexed to boost performance:

Step 2. Create the HTML Form

Next we'll create a form that will accept the URL the user would like to abbreviate. As forms go, this is a pretty simple one, consisting of just a text field and a submit button. As you'll learn in the next step, jQuery's magical capabilities allow us to enhance the form with an Ajax-driven processor without actually having to complicate the form layout.

This snippet should be pretty straightforward, except for perhaps the DIV identified by response. We'll return to this later in the tutorial.

Step 3. Create the PHP Script

With the HTML form in place, let's next create the PHP script that will process the request. I prefer to create and test the PHP script before enhancing the site with Ajax, as this approach makes it easier to later isolate problems when debugging other aspects of the application.

The PHP script (shorten.php) is fairly straightforward, taking as input the provided URL and first consulting the MySQL database to determine whether the URL already exists in the urls table. If it does, the associated abbreviation is returned. Otherwise, a new abbreviation is generated and inserted into the database along with the new URL. Should any errors occur along the way, FALSE is returned. Otherwise, the abbreviated URL is returned. Here's the script:

At this point we have an operational URL shortener, minus the cool Ajax capabilities. Give it a try by adding a few URLs. In return, you should receive abbreviated versions that look similar to http://u.wjgilmore.com/NRTkK.

Beyond including the jQuery library, the following snippet will attach an event handler to the form's submission action. When the form is submitted, the value passed to the form's url form field is retrieved and passed to the shorten.php script using jQuery's $.POST function. Finally, the DIV identified by the response ID will be populated with either an error message or the abbreviated URL depending upon the outcome of the shorten.php script.

Step 5. Create the Redirection Script

The redirection script (redirect.php) is responsible for converting the abbreviated URL into its elongated counterpart, in addition to adjusting the row's clicked column upwards. Like the shortener script, this is pretty straightforward: it first verifies that the provided abbreviation exists and if so, it adjusts the click count before redirecting the user. Here's the script:

Because we want the URLs to be as compact as possible, it wouldn't do to include the redirection file name (redirect.php) in the abbreviated URL. To remove the filename, we can use a simple .htaccess file to redirect all strings that don't match a filename or directory found in the website's home directory to redirect.php:

Where to From Here?

The URL shortener service is operational! Of course, there's plenty of room for improvement, as I took a number of shortcuts in order to fit the code and discussion into a format suitable for publication here on Developer.com. Grouping configuration information into a single file would be an improvement, and it would certainly be beneficial to refactor much of the functionality into an object-oriented class. Additionally, some additional checks should be implemented to ensure that a duplicate random abbreviation isn't generated, which although highly unlikely is still possible.

Just for kicks I'll continue working on the code as time allows. You can monitor the project and download the code at github.com/wjgilmore/yoyo.

Conclusion

Building a link-shortening service is a fun and educational way to get acquainted with the intricacies of creating a functional, Ajax-enhanced website. Try experimenting with the code and adding your own features! And as always, if you do anything cool with it, let us know in the comments!

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.