Weekend Links – MooTools Form Validation, mooPHP, jQuery Sliding Puzzle, MooTools Tab Accordion, TinyMCE 3 Alpha 1

By  on  

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.

Click here to check out an example. TinyURL is a great service!

Recent Features

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    Duplicate DeSandro&#8217;s CSS Effect

    I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate:  use some simple JavaScript goodness to inject unicorns into their page.

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Discussion

  1. Dean Jones

    Thanks for this code. Could I get this with Snipurl please? I really like like the features of Snipurl. They also have an API at http://snipurl.com/site/api and I am trying to follow your code sample to use their functions but my PHP is not returning any value. I can share my present code with you but not sure if your blog allows posting of code. Please write to me and I will share it via email. Thanks so much for this blog and I really hope you can help!!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!