Create Tiny URLs with TinyURL, MooTools, and PHP
Written by David Walsh on Wednesday, December 24, 2008
Click here to learn what has changed to make your code framework-compatible.
Since we’ve already figured out how to create TinyURL URLs remotely using PHP, we may as well create a small Ajax-enabled tiny URL creator. Using MooTools to do so is almost too easy.
The XHTML (Form)
<p><strong>URL:</strong> <input type="text" id="url" size="40" /> <input type="button" id="geturl" value="Get URL" /></p> <p id="newurl"></p>
We need an input box where the user will enter their a URL, a button to trigger the process, and a placeholder to put the new, tiny URL.
The PHP
if(isset($_GET['url']))
{
die(get_tiny_url(urldecode($_GET['url'])));
}
//gets the data from a URL
function get_tiny_url($url)
{
$ch = curl_init();
$timeout = 5;
curl_setopt($ch,CURLOPT_URL,'http://tinyurl.com/api-create.php?url='.$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
This PHP snippet grabs and returns the tiny URL from TinyURL.
The MooTools Javascript
window.addEvent('domready',function() {
var TinyURL = new Class({
//implements
Implements: [Options],
//options
options: {
checkURL: ''
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
},
//a method that does whatever you want
createURL: function(url,complete) {
var req = new Request({
url: this.options.checkURL + '?url=' + url,
method: 'get',
async: false,
onComplete: function(response) { complete(response); }
}).send();
}
});
// usage //
var new_tiny_url = new TinyURL({
checkURL: 'grab-tiny-url.php'
});
$('geturl').addEvent('click',function() {
if($('url').value) {
var newu = new_tiny_url.createURL($('url').value,function(resp) {
$('newurl').set('html','The TinyURL is ' + resp + '. Go ahead, try it!').setStyle('color','green');
});
}
});
});
Just a tiny MooTools class and basic usage. The only parameter, “checkURL,” is the URL to the PHP snippet above — NOT the long URL we want to shrink. The real action happens when the createURL() method is invoked. You pass the method a URL to shorten and an “onComplete” function that takes action when the URL has been received.
TinyURL is a great service!
Epic Discussion
Be Heard!
I want to hear what you have to say! Share your comments and questions below.
Very cool tip. I am having fun learning all the things I can do with jQuery, and MooTools.
JS is simply fascinating… to think where the web has come in just a few years.
This doesn’t work. I tried everything and always get “undefined” has de url… :(