I have a bit of an obsession with uploading photos to different services thanks to Instagram. Instagram’s iPhone app allows me to take photos and quickly filter them; once photo tinkering is complete, I can upload the photo to Instagram, Twitter, Facebook, and Flickr. This process made me wonder what it would take to upload photos to Flickr using PHP. This post details how you can authenticate and upload photos to Flickr using PHP with phpFlickr.

Step 1: Flickr Application Key Creation

Just as with every other API usage, you need to go to Flickr to sign up for an API key. Put together a good description and title, but one key is that you set the callback/redirect URL to the example page (or at least I did).

Step 2: Grab phpFlickr

phpFlickr is a suggested PHP library by Flickr. The library is not perfect (there seems to be a few long-standing redirect issues) but it does well as an all-purpose Flickr API interface.

Step 3: Configuring and Authentication

It’s easiest to understand the process by looking at the code:

// Start the session since phpFlickr uses it but does not start it itself
session_start();

// Require the phpFlickr API
require_once('phpFlickr-3.1/phpFlickr.php');

// Create new phpFlickr object: new phpFlickr('[API Key]','[API Secret]')
$flickr = new phpFlickr('[API KEY]','[API SECRET]', true);

// Authenticate;  need the "IF" statement or an infinite redirect will occur
if(empty($_GET['frob'])) {
	$flickr->auth('write'); // redirects if none; write access to upload a photo
}
else {
	// Get the FROB token, refresh the page;  without a refresh, there will be "Invalid FROB" error
	$flickr->auth_getToken($_GET['frob']);
	header('Location: flickr.php');
	exit();
}

After starting the session and requiring the phpFlickr API library, an instance of phpFlickr needs to be created, providing it the API key and API secret. With the instance created, an if statement will be employed to react to a frob parameter from Flickr. If no frob is provided, the auth method should be called, which either confirms authentication or redirects the user to the Flickr site for sign in. If a frob is provided, the authentication token is set and the page needs to be refreshed (I’m not sure why the redirect needs to take place, but it was the only way to ensure authentication worked gracefully).

Step 4: Uploading a File

Uploading an image to Flickr is actually much easier with phpFlickr than authenticating. Uploading a file is as easy as one function call:

// Send an image sync_upload(photo, title, desc, tags)
// The returned value is an ID which represents the photo
$result = $flickr->sync_upload('logo.png', $_POST['title'], $_POST['description'], 'david walsh, php, mootools, dojo, javascript, css');

The sync_upload method allows many parameters, but the image, title, description, and tags are the most prominent. There is also an async_upload with may also be used.

phpFlickr also allows simple read access so that you may create a slideshow of photos, tags, etc., so don’t think that phpFlickr is just for uploading!

My first attempt to create an independent PHP/Flickr script failed due to the need for OpenAuth. phpFlickr does a great job in managing the entire process, and the documentation is decent for getting started. I ran into a few problems with “too much redirection” (fixed by the “if” statement I added) and an “invalid frob” error (cured by the additional redirect) errors but beside those, phpFlickr is the right choice!

Upload Photos to Flickr with PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The PHP

Start by reading in the image using file_get_contents (or any other PHP method you’d like), then convert the image to base64 using base64_encode:

// A few settings
$image = 'cricci.jpg';

// Read image path, convert to base64 encoding
$imageData = base64_encode(file_get_contents($image));

// Format the image SRC:  data:{mime};base64,{data};
$src = 'data: '.mime_content_type($image).';base64,'.$imageData;

// Echo out a sample image
echo '';

With the image data in base64 format, the last step is placing that data within the data URI format, including the image’s MIME type. This would make for a good function:

function getDataURI($image, $mime = '') {
	return 'data: '.(function_exists('mime_content_type') ? mime_content_type($image) : $mime).';base64,'.base64_encode(file_get_contents($image));
}

The thing to remember is that IE7 and lower don’t support data URIs, so keep that in mind if you’re considering switching from image paths to data URIs!

Image Data URIs with PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The PHP

Once you have a TextMagic account and you’ve downloaded the API helper provided by TextMagic, all you need to do is create a bit of custom code to send your text message:

// Include the TextMagic PHP lib
require('textmagic-sms-api-php/TextMagicAPI.php');

// Set the username and password information
$username = 'myusername';
$password = 'mypassword';

// Create a new instance of TM
$router = new TextMagicAPI(array(
	'username' => $username,
	'password' => $password
));

// Send a text message to '999-123-4567'
$result = $router->send('Wake up!', array(9991234567), true);

// result:  Result is: Array ( [messages] => Array ( [19896128] => 9991234567 ) [sent_text] => Wake up! [parts_count] => 1 )

The result of the send call is an array of information about the sending of your message. To check the send status later on, you just need to call the messageStatus method:

// Get the message send status by received ID
$result = $router->messageStatus(array(19896128));

// result:  Array ( [19896128] => Array ( [text] => Wake up! [status] => d [created_time] => 1325261093 [reply_number] => 447624800500 [completed_time] => 1325261120 [credits_cost] => 1 ) )

If you want to check a phone number’s status and the credit cost of sending a text message to that number, you can make a call to checkNumber:

// Get the message number information
$result = $router->checkNumber(array(9991234567));

// result:  Array ( [16083359316] => Array ( [price] => 1 [country] => US ) )

TextMagic is a really awesome service. The account is easy to create, the API is simple, and best of all, no need to know the recipient’s carrier! The one downside I’ve found is that I cannot control the “From” name or phone number, so the the text comes from a static number. Beyond that, TextMagic is outstanding!

Update: you may change the “from” address within your TextMagic account. The feature does not work in the United States or Mexico, however.

PHP Text Messaging with TextMagic is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

I’ve thought long and hard about this, and I still can’t decide whether or not I should consider myself a “gamer.” During my lifetime, I’ve owned an original Nintendo, Sega Genesis, Nintendo64 (best controller of any console ever), wii, and XBox 360. I used to have a horrible habit of downloading pirating games, but that’s long and over with. Anyways, the only game I’ve played consistently over the past three years is Call of Duty. Which one? Whichever the latest Call of Duty has been most recently released. I don’t even care to attempt the story mode; I simply want to log on and shoot each and every one of you I encounter.

My sharpshooter status aside, I’ve always been surprised upset that Microsoft has never provided an API for the vast amount of information about users, the games they play, and statistics within the games. Namely, I’d like to publicly shame every n00b I’ve baptized with my sniper rifle. I recently found a great gamer API effort by XBoxLeaders.com. While their API can’t tell me the titles and emblems I’ve earned in Modern Warfare 3, I can get some relevant information about my user, my status, and the games I’ve recently dominated.

The PHP

The API is incredibly simple to use: simply send the the gamertag and response type you desire:

// Settings
$gamertag = 'dwalsh83';
$profileUrl = 'http://www.xboxleaders.com/api/profile/'.$gamertag.'.json';

// Get information about me
$info = file_get_contents($profileUrl);

// To JSON
$json = json_decode($info);
$user = $json->user;

The response will look like this:

{
  "status": {
    "is_valid": "yes",
    "is_cheater": "no",
    "tier": "gold"
  },
  "profile": {
    "gamertag": "dwalsh83",
    "gamerscore": 300,
    "reputation": 20,
    "gender": "male",
    "motto": "Watch your head.",
    "name": "David Walsh",
    "location": "Madison, WI, US",
    "bio": "There is, and only can be, Call of Duty.",
    "url": "http:\/\/live.xbox.com\/en-US\/Profile?gamertag=dwalsh83",
    "avatar_tile": "http:\/\/image.xboxlive.com\/global\/t.fffe07d1\/tile\/0\/2000b",
    "avatar_small": "http:\/\/avatar.xboxlive.com\/avatar\/dwalsh83\/avatarpic-s.png",
    "avatar_large": "http:\/\/avatar.xboxlive.com\/avatar\/dwalsh83\/avatarpic-l.png",
    "avatar_body": "http:\/\/avatar.xboxlive.com\/avatar\/dwalsh83\/avatar-body.png",
    "launch_team_xbl": "no",
    "launch_team_nxe": "no",
    "launch_team_kin": "no"
  }
}

As you can see, you get basic account information (name, bio, etc) but also a bit of information about the games the user has been playing recently. You also get links to images for the user and said games. What you choose to do with this information is up to you; you could put together a really basic gamercard:

<style>
	
	.gamercard {
		border: 1px solid #bdbec1;
		padding: 10px;
		width: 600px;
		font-family: arial, sans-serif;
		font-size: 12px;
		color: #bdbec1;
		
		background-image: -webkit-linear-gradient(#ddd, #fff, #e9fdce);
		background-image: -moz-linear-gradient(top, #ddd, #fff, #e9fdce);
		background-image: -ms-linear-gradient(#ddd, #fff, #e9fdce);
		background-image: -o-linear-gradient(#ddd, #fff, #e9fdce);
		background-image: linear-gradient(#ddd, #fff, #e9fdce);
	}
	
	.gamercard img {
		display: block;
	}
	
	.gamercard .avatar {
		float: right;
		width: 150px;
		height: 300px;
		margin: -60px 0 0 50px;
	}
	
	.gamercard h1 {
		font-weight: normal;
	}
		
		.gamercard h1 img {
			display: inline-block; 
			padding-right: 10px;
			width: 24px; 
			height: 24px;
		}
		
		.gamercard h1 a {
			text-decoration: none;
		}
		
			.gamercard h1 a:hover {
				background: #bbe6a6;
				color: #333;
			}
			
	.gamercard h2 {
		color: #111;
		font-size: 16px;
		font-weight: normal;
		margin-top: 15px;
	}
	
	.gamercard ul {
		list-style-type: none;
	}
		.gamercard ul li {
			padding-top: 8px;
		}
			
			.gamercard ul li strong {
				color: #666;
			}
			
	.gamercard ul.games li {
		display: inline-block; 
		margin-right: 20px;
		text-align: center;
		font-weight: bold;
		width: 85px;
		vertical-align: top;
	}
		.gamercard ul.games li img {
			margin: 0 auto;
			width: 85px;
		}
	
	.gamercard a {
		color: #78bb58;
	}
	
	.gamercard .clear {
		clear: both;
	}
	
</style>

<!-- gamercard -->
<div class="gamercard">
	
	<!-- profile image -->
	<img src="<?php echo $profile->avatar_body; ?>" alt="<?php echo $profile->gamertag; ?>" class="avatar" />

	<!-- gamer name -->
	<h1><img src="<?php echo $profile->avatar_tile; ?>" alt="<?php echo $profile->gamertag; ?>" /><a href="<?php echo $profile->profile_link; ?>"><?php echo $profile->gamertag; ?></a></h1>

	<!-- personal info -->
	<h2>The Legend</h2>
	<ul>
		<li><strong>Name:</strong> <?php echo $profile->name; ?></li>
		<li><strong>Bio:</strong> <?php echo $profile->bio; ?></li>
		<li><strong>Location:</strong> <?php echo $profile->location; ?></li>
		<li><strong>Gender:</strong> <?php echo $profile->gender; ?></li>
		<li><strong>Motto:</strong> <?php echo $profile->motto; ?></li>
		<li><strong>Online:</strong> <?php echo $profile->online ? "Online" : "Offline"; ?></li>
		<li><strong>Status:</strong> <?php echo $profile->online ? $profile->online_status : "(none)"; ?></li>
	</ul>

	<?php if($profile->recent_games): ?>
	<!-- recent games -->
	<h2>Recent Games</h2>
	<ul class="games">
		<?php foreach($profile->recent_games as $game): ?>
			 <li><a href="<?php echo $game->marketplace_url; ?>"><img src="<?php echo $game->small_boxart; ?>" alt="<?php echo $game->title; ?>" /></a><br /><?php echo $game->title; ?></li> 
		<?php endforeach; ?>
	</ul>
	<?php endif; ?>
	
	<div class="clear"></div>
</div>

Don’t forget to cache the responses you get back from the API for faster performance!

In the end, I’m not sure how feasible it would be to create a true API for XBox and its games. I assume each game and online service stores its information on the game creator’s own servers, so the information you could get would be minimal and fragmented at best. It would be nice if the creators of Call of Duty could put something out there for assassins like me, but they’re probably all trying to find a way to improve the horrible spawn positioning logic. Awesome work by XBoxLeaders.com in this effort though — it’s given me a great start at a fun project.

XBox Live Gamer API is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Adaptive images provides an outstanding set of instructions for customizing the images generated by PHP’s GD library, so you aren’t stuck with rubbish images. Do yourself a favor and check out Adaptive Images — it could be the perfect solution for your website imagery needs.

Adaptive Images is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was…OK, I had all of these things too.  But I still don’t get the volume of texts that I hear my younger female cousins send.  Thousands and thousands of them each month.  WTF are all of these texts for?  Here’s a thought:

omg did you hear?

no wut

omg i can’t believe you didn’t hear

lol tell me!

jenny and mark were holding hands

omfg does john no?

ok i made it up, ur so lame

Riveting.  Jokes aside, text messaging can be an extremely useful way to get out of calling that person you hate calling communicate quickly and efficiently.  Many websites are now offering text message notifications instead of email notifications, which can be nice in the case of time-sensitive information.  After a bit of research, I found out how easy it was so send text messages using PHP, so that I can integrate text messaging into my apps!  Let me show you how!

The Methodology

Unbeknownst to me, sending text messages can be as easy as sendmail, because you can send your text to an email address and it will be delivered.  There are two pieces of information you must know:  the phone number and the carrier’s text message email domain.  Needing to know the recipient’s carrier is not ideal, but necessary.  Luckily Kevin Jensen has compiled a list of carriers and domains:

Phone companies have internal lookups for phone carriers but developers like you and I don’t get access to them, so knowing the carrier is  a must.  To send a text message, you email {phoneNumber}@{carrierDomain}.

The PHP

PHP’s provided method for sending emails is the mail function.  Its usage is quite simple:

bool mail ( string $to , string $subject , string $message [, string $additional_headers [, string $additional_parameters ]] )

Using the mail function and the text message email format, sending a text message is as easy as:

// Call Jenny
mail("5558675309@txt.att.net", "", "Your packaged has arrived!", "From: David Walsh <david@davidwalsh.name>\r\n");

Note that no subject line is provided, and more importantly, a FROM header is within the last parameter so that the recipient knows where the text message has been sent from.

Who knew it was that easy?  I always assumed text messaging had its own protocol and all that magic.  Apparently not!  Spend a few minutes playing around with text messaging yourself;  it’s one of those things that’s both neat to do and useful!

Send Text Messages with PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

For those of you who have had the pleasure of following me on Twitter (…), you probably know that I’m a complete soccer (football) fanatic.  I even started a separate Twitter account to voice my footy musings.  If you follow football yourself, you’ll know that we’ve just started the international transfer window and there are a billion rumors about a billion players going to a billion clubs.  It’s enough to drive you mad but I simply HAVE TO KNOW who will be in the Arsenal and Liverpool first teams next season.

The problem I run into, besides all of the rubbish reports making waved, is that I don’t have time to check every website on the hour.  Twitter is a big help, but there’s nothing better during this time than an official report from each club’s website.  To keep an eye on those reports, I’m using the power of PHP Simple HTML DOM Parser to write a tiny PHP script that shoots me an email whenever a specific page is updated.

PHP Simple HTML DOM Parser

PHP Simple HTML DOM Parser is a dream utility for developers that work with both PHP and the DOM because developers can easily find DOM elements using PHP. Here are a few sample uses of PHP Simple HTML DOM Parser:

// Include the library
include('simple_html_dom.php');
 
// Retrieve the DOM from a given URL
$html = file_get_html('http://davidwalsh.name/');

// Find all "A" tags and print their HREFs
foreach($html->find('a') as $e) 
    echo $e->href . '<br>';

// Retrieve all images and print their SRCs
foreach($html->find('img') as $e)
    echo $e->src . '<br>';

// Find all images, print their text with the "<>" included
foreach($html->find('img') as $e)
    echo $e->outertext . '<br>';

// Find the DIV tag with an id of "myId"
foreach($html->find('div#myId') as $e)
    echo $e->innertext . '<br>';

// Find all SPAN tags that have a class of "myClass"
foreach($html->find('span.myClass') as $e)
    echo $e->outertext . '<br>';

// Find all TD tags with "align=center"
foreach($html->find('td[align=center]') as $e)
    echo $e->innertext . '<br>';
    
// Extract all text from a given cell
echo $html->find('td[align="center"]', 1)->plaintext.'<br><hr>';

Like I said earlier, this library is a dream for finding elements, just as the early JavaScript frameworks and selector engines have become. Armed with the ability to pick content from DOM nodes with PHP, it’s time to analyze websites for changes.

The Script

The following script checks two websites for changes:

// Pull in PHP Simple HTML DOM Parser
include("simplehtmldom/simple_html_dom.php");

// Settings on top
$sitesToCheck = array(
					// id is the page ID for selector
					array("url" => "http://www.arsenal.com/first-team/players", "selector" => "#squad"),
					array("url" => "http://www.liverpoolfc.tv/news", "selector" => "ul[style='height:400px;']")
				);
$savePath = "cachedPages/";
$emailContent = "";

// For every page to check...
foreach($sitesToCheck as $site) {
	$url = $site["url"];
	
	// Calculate the cachedPage name, set oldContent = "";
	$fileName = md5($url);
	$oldContent = "";
	
	// Get the URL's current page content
	$html = file_get_html($url);
	
	// Find content by querying with a selector, just like a selector engine!
	foreach($html->find($site["selector"]) as $element) {
		$currentContent = $element->plaintext;;
	}
	
	// If a cached file exists
	if(file_exists($savePath.$fileName)) {
		// Retrieve the old content
		$oldContent = file_get_contents($savePath.$fileName);
	}
	
	// If different, notify!
	if($oldContent && $currentContent != $oldContent) {
		// Here's where we can do a whoooooooooooooole lotta stuff
		// We could tweet to an address
		// We can send a simple email
		// We can text ourselves
		
		// Build simple email content
		$emailContent = "David, the following page has changed!\n\n".$url."\n\n";
	}
	
	// Save new content
	file_put_contents($savePath.$fileName,$currentContent);
}

// Send the email if there's content!
if($emailContent) {
	// Sendmail!
	mail("david@davidwalsh.name","Sites Have Changed!",$emailContent,"From: alerts@davidwalsh.name","\r\n");
	// Debug
	echo $emailContent;
}

The code and comments are self-explanatory.  I’ve set the script up such that I get one “digest” alert if many of the pages change.  The script is the hard part — to enact the script, I’ve set up a CRON job to run the script every 20 minutes.

This solution isn’t specific to just spying on footy — you could use this type of script on any number of sites.  This script, however, is a bit simplistic in all cases.  If you wanted to spy on a website that had extremely dynamic code (i.e. a timestamp was in the code), you would want to create a regular expressions that would isolate the content to just the block you’re looking for. Since each website is constructed differently, I’ll leave it up to you to create page-specific isolators. Have fun spying on websites though…and be sure to let me know if you hear a good, reliable footy rumor!

Parse Web Pages with PHP Simple HTML DOM Parser is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

It appears that Google has changed their Page Rank mechanism. I’m currently investigating ways to restore the functionality of this class.

While developers and designers can debate about the important of different search engine optimizations strategies, one metric that simply can’t be argued is a website’s Google PageRank, or its importance in driving traffic to the site.  Achieving a better PageRank was a consideration when redesigning this blog.  We can discuss how to achieve a better PageRank in another post — this post will focus on how you can retrieve a page’s Google PageRank using a small PHP class that I have created.

The PHP

The base functions within this class were created by Jamie Scott — all credit for the base functions go to him.  I’ve simply placed the functionality into PHP class format for easy use and updated the code to be a bit more transparent.  As far as PHP classes go, this one is quite small:

// Declare the class
class GooglePageRankChecker {
	
	// Track the instance
	private static $instance;
	
	// Constructor
	function getRank($page) {
		// Create the instance, if one isn't created yet
		if(!isset(self::$instance)) {
			self::$instance = new self();
		}
		// Return the result
		return self::$instance->check($page);
	}
	
	
	// Convert string to a number
	function stringToNumber($string,$check,$magic) {
		$int32 = 4294967296;  // 2^32
	    $length = strlen($string);
	    for ($i = 0; $i < $length; $i++) {
	        $check *= $magic; 	
	        //If the float is beyond the boundaries of integer (usually +/- 2.15e+9 = 2^31), 
	        //  the result of converting to integer is undefined
	        //  refer to http://www.php.net/manual/en/language.types.integer.php
	        if($check >= $int32) {
	            $check = ($check - $int32 * (int) ($check / $int32));
	            //if the check less than -2^31
	            $check = ($check < -($int32 / 2)) ? ($check + $int32) : $check;
	        }
	        $check += ord($string{$i}); 
	    }
	    return $check;
	}
	
	// Create a url hash
	function createHash($string) {
		$check1 = $this->stringToNumber($string, 0x1505, 0x21);
	    $check2 = $this->stringToNumber($string, 0, 0x1003F);
	
		$factor = 4;
		$halfFactor = $factor/2;

	    $check1 >>= $halfFactor;
	    $check1 = (($check1 >> $factor) & 0x3FFFFC0 ) | ($check1 & 0x3F);
	    $check1 = (($check1 >> $factor) & 0x3FFC00 ) | ($check1 & 0x3FF);
	    $check1 = (($check1 >> $factor) & 0x3C000 ) | ($check1 & 0x3FFF);	

	    $calc1 = (((($check1 & 0x3C0) << $factor) | ($check1 & 0x3C)) << $halfFactor ) | ($check2 & 0xF0F );
	    $calc2 = (((($check1 & 0xFFFFC000) << $factor) | ($check1 & 0x3C00)) << 0xA) | ($check2 & 0xF0F0000 );

	    return ($calc1 | $calc2);
	}
	
	// Create checksum for hash
	function checkHash($hashNumber)
	{
	    $check = 0;
		$flag = 0;

		$hashString = sprintf('%u', $hashNumber) ;
		$length = strlen($hashString);

		for ($i = $length - 1;  $i >= 0;  $i --) {
			$r = $hashString{$i};
			if(1 === ($flag % 2)) {			  
				$r += $r;	 
				$r = (int)($r / 10) + ($r % 10);
			}
			$check += $r;
			$flag ++;	
		}

		$check %= 10;
		if(0 !== $check) {
			$check = 10 - $check;
			if(1 === ($flag % 2) ) {
				if(1 === ($check % 2)) {
					$check += 9;
				}
				$check >>= 1;
			}
		}

		return '7'.$check.$hashString;
	}
	
	function check($page) {

		// Open a socket to the toolbarqueries address, used by Google Toolbar
		$socket = fsockopen("toolbarqueries.google.com", 80, $errno, $errstr, 30);

		// If a connection can be established
		if($socket) {
			// Prep socket headers
			$out = "GET /search?client=navclient-auto&ch=".$this->checkHash($this->createHash($page))."&features=Rank&q=info:".$page."&num=100&filter=0 HTTP/1.1\r\n";
			$out .= "Host: toolbarqueries.google.com\r\n";
			$out .= "User-Agent: Mozilla/4.0 (compatible; GoogleToolbar 2.0.114-big; Windows XP 5.1)\r\n";
			$out .= "Connection: Close\r\n\r\n";

			// Write settings to the socket
			fwrite($socket, $out);

			// When a response is received...
			$result = "";
			while(!feof($socket)) {
				$data = fgets($socket, 128);
				$pos = strpos($data, "Rank_");
				if($pos !== false){
					$pagerank = substr($data, $pos + 9);
					$result += $pagerank;
				}
			}
			// Close the connection
			fclose($socket);
			
			// Return the rank!
			return $result;
		}
	}
}

The createHash and checkHash methods perform the deep down mathematical operations.  Once those are out of the way, the check method connects to Google’s toolbar server, disguising itself as a toolbar via the User-Agent header, to get the page’s PageRank.  A singleton pattern is used since creating individual instances isn’t important:

$rank = GooglePageRankChecker::getRank("davidwalsh.name"); // returns "5"

The number provided back represents the PageRank for the URL provided!  This PHP class can be used on its own, but I’ve created a MooTools-powered script to retrieve an address’ PageRank via some simple AJAX.

The MooTools JavaScript

This MooTools quick inline MooTools script responds to a button click, making an AJAX call to a PHP script that runs the class provided above:

// When the DOM is ready
window.addEvent("domready",function() {
	
	// When the form is submitted...
	var form = document.id("rankForm"), request, display, domain;
	form.addEvent("submit",function(e) {
		// Stop the event
		if(e) e.stop();
		
		// Create request, if not already created
		if(!request) {
			domain = document.id("domain");
			display = document.id("rankerDisplay");
			request = new Request({
				url: "pagerank-checker.php", 
				method: "post",
				onComplete: function(response) {
					display.setStyle("display","block").set("text","Page rank for " + domainValue + " is: " + response);
				}
			});
		}
		
		// Get the value fo the URL
		domainValue = domain.get("value");
		
		// Send the request
		request.send({ data: { domain: domainValue } });
	});
	
});

Using a JavaScript snippet like this, you could easily add a JavaScript-fronted Google PageRank checker with the framework of your choosing.

Outstanding work by Jamie Scott in creating the base functions to retrieve a page’s Google PageRank with PHP.  Hopefully my class makes the PageRank code a bit more portable and recognizable.

Google PageRank PHP Class is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The JavaScript

Searching the user agent string for “Android” is the quickest method:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
	// Do something!
	// Redirect to Android-site?
	window.location = 'http://android.davidwalsh.name';
}

The PHP

Again, we’ll use PHP’s strstr function to search for Android in the user agent:

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(stripos($ua,'android') !== false) { // && stripos($ua,'mobile') !== false) {
	header('Location: http://android.davidwalsh.name');
	exit();
}

Bonus!  .htaccess Detection

We can even use .htaccess directives to detect and react to Android devices!

RewriteCond %{HTTP_USER_AGENT} ^.*Android.*$
RewriteRule ^(.*)$ http://android.davidwalsh.name [R=301]

And there you have it:  three different Android device detection!  Have fun with your mobile development!

Android Detection with JavaScript or PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

I’ve said it over and over but I’ll say it again:  JavaScript’s main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the past five years.  Star rating systems are attractive, allow us to avoid ugly forms, and prevent unnecessary page reloads.  A new plugin by Lorenzo Stanco called MooStarRating has hit the MooTools Forge and I wanted to share with you how to use it.

The HTML

The star rating system uses an HTML form with radio buttons as the base:

<form name="ratingsForm">
    <label>Do you like this post?</label>
    <input type="radio" name="rating" value="0.5">
    <input type="radio" name="rating" value="1.0">
    <input type="radio" name="rating" value="1.5">
    <input type="radio" name="rating" value="2.0">
    <input type="radio" name="rating" value="2.5">
    <input type="radio" name="rating" value="3.0">
    <input type="radio" name="rating" value="3.5">
    <input type="radio" name="rating" value="4.0">
    <input type="radio" name="rating" value="4.5">
    <input type="radio" name="rating" value="5.0">
    <input type="radio" name="rating" value="5.5">
    <input type="radio" name="rating" value="6.0">
    <input type="radio" name="rating" value="6.5">
    <input type="radio" name="rating" value="7.0" checked="checked">
    <input type="radio" name="rating" value="7.5">
    <input type="radio" name="rating" value="8.0">
    <input type="radio" name="rating" value="8.5">
    <input type="radio" name="rating" value="9.0">
    <input type="radio" name="rating" value="9.5">
    <input type="radio" name="rating" value="10.0">
	<span id="htmlTip"></span>
</form>

Note the ID of the form and the name of the radio buttons — we’ll use those when creating our MooStarRating instance.  Also note that I’m creating “half” rating options, as well as using checked to note what the current average rating is.

The CSS

This plugin requires no additional CSS.  That’s a bonus as it’s one less server request.

The MooTools JavaScript

The first step in using MooStarRating is defining the image paths for the stars:

// Configure the image paths
var MooStarRatingImages = {
	defaultImageFolder: "/js/mooStarRating/images",
	defaultImageEmpty:  "empty.png",
	defaultImageFull:   "full.png",
	defaultImageHover:  "hover.png"
};

Once the path and image names are defined, it’s time to create an instance of MooStarRating:

// A fake post ID for the sake of submission
var postId = 10;

// When the DOM is ready....
window.addEvent("domready",function() {	
	// Create our instance
	var starRater = new MooStarRating({
		form: "ratingsForm",
		radios: "rating",
		half: true,
		//imageEmpty: "star_boxed_empty.png", // For setting special images
		//imageFull:  "star_boxed_full.png",
		//imageHover: "star_boxed_hover.png", 
		width: 17, 
		tip: "Rate as <i>[VALUE] / 10.0</i>", 
		tipTarget: document.byId("htmlTip"),
		tipTargetType: "html"
	});
	
	// Listen for star clicks
	starRater.addEvent("click",function(value) {
		// Send ajax request to server
		new Request.send({
			url: "rating.php",
			data: { rating: value, postId: postId }
		});
	});
});

MooStarRating is loaded with options.  Here we pass the form ID and the name we provided to the radio buttons.  As I’m allowing half-stars, the half option is set to true.  MooStarRating also provides a “tip” functionality which allows a message to be displayed along side the star rating. Lastly, the click event provides the user’s rating for which you may send an AJAX request to the server to save the rating. Simple!

That’s it!  I love this plugin because it’s simple and effective.  Big props go to Lorenzo Stanco for his excellent piece of work.  If there’s enough interest, I’ll create a tutorial that includes enough PHP and MySQL to get this rating system working with real data.

MooTools Star Ratings with MooStarRating is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.