You can see a prototype version of the widget by clicking here.

Template engine

I attempted this built as single piece of php but it quickly became obvious that this was not the right approach. Instead I adapted a simple template engine from my faithful O’Reilly book. This allowed me to separate the logic from the markup

function FillTemplate($inName, $inValues = array()){

	$theTemplateFile = $_SERVER['DOCUMENT_ROOT'].'/templates/'.$inName;
	if($theFile = fopen($theTemplateFile, 'r')){
		$theTemplate = fread($theFile, filesize($theTemplateFile));
		fclose($theFile);
	}
	$theKeys = array_keys($inValues);
	foreach($theKeys as $theKey){
		$theTemplate = str_replace("\{$theKey}",$inValues[$theKey],$theTemplate);
	}

	return $theTemplate;
}

Map Logic

Here’s the source for the Map Logic. As an attempt to make the script secure you can see I’ve used a UK Postcode Regex from Stuart Wade to validate the form input. And also mysql_real_escape_string() on any database calls.

Any security tips would be greatly appreciated

The Map Logic uses four separate templates to handle the interaction, and the error state.

<?php
//Pin counter
connectDB();
$result = mysql_query("SELECT * FROM mapPins");
$num_rows = mysql_num_rows($result);
$bindings['PINCOUNT'] = $num_rows;

//Place Pins
$pinQuery = "SELECT Latitude,Longitude FROM mapPins";
$pinArray = mysql_query($pinQuery)or die('Query failed: '.mysql_error());
$pinCode="";
while ($row = mysql_fetch_array($pinArray, MYSQL_NUM)) {;
	$i++;
	$pinCode .="var latlng$i = new GLatLng($row[0] ,$row[1] );";
	$pinCode .="map.addOverlay(new GMarker(latlng$i));";
}
$bindings['MAPPINS'] = $pinCode;

$bindings['DESTINATION'] = $PHP_SELF;

function centerFromDB($postcode){
	//Connect to the database
	connectDB();
	//Convert the Postcode to all uppercase
	$postcode = strtoupper($postcode);

	//Break the Postcode into array
	$postcode = explode(' ', $postcode);

	//Pull out the relevant fields from our database
	$query = "SELECT Latitude,Longitude FROM postcodes WHERE Pcode= '$postcode[0]'";
	$result = mysql_query($query) or die('Query failed: '.mysql_error());
	return mysql_fetch_array($result, MYSQL_ASSOC);

}

if (isset($_POST['submitPostCode']) & $_POST['code']!="") {
	if(eregi("^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$",mysql_real_escape_string($_POST['code']))){
		$line = centerFromDB(mysql_real_escape_string($_POST['code']));

		//Grab the Postcode from the form
		$postcode = mysql_real_escape_string($_POST['code']);

		//Uppercase
		$postcode = strtoupper($postcode);

		//Break the Postcode into array
		$postcode = explode(' ', $postcode);

		//Output Results
		$bindings['INITIALCENTER'] = "var center = new GLatLng(".$line['Latitude'].", ".$line['Longitude'].");";
		$bindings['OUTCODE'] = $postcode[0];
		$bindings['SECONDHALF'] = $postcode[1];

		$template = "map02.template";
	}else{

		$template = "mapError.template";
	}
}elseif(isset($_POST['plotPoints'])){

	$outCode = mysql_real_escape_string($_GET['outCode']);
	$secondHalf = mysql_real_escape_string($_GET['secondHalf']);
	$mapLat = mysql_real_escape_string($_GET['mapLat']);
	$mapLng = mysql_real_escape_string($_GET['mapLng']);
	$today = date("Y-m-d");

	$line = centerFromDB($outCode.' '.$secondHalf);
	//connect to db
	connectDB();

	//add point to db
	mysql_query("INSERT INTO mapPins (outCode, secondHalf, Latitude, Longitude, theDate) VALUES('$outCode', '$secondHalf', '$mapLat', '$mapLng', '$today') ") or die(mysql_error()); 

	$pinQuery = "SELECT Latitude,Longitude FROM mapPins WHERE outCode='$outCode' AND secondHalf='$secondHalf'";
	$pinArray = mysql_query($pinQuery)or die('Query failed: '.mysql_error());

	$pinCode="";
	while ($row = mysql_fetch_array($pinArray, MYSQL_NUM)) {;
		$i++;
		$pinCode .="var latlng$i = new GLatLng($row[0] ,$row[1] );";
		$pinCode .="map.addOverlay(new GMarker(latlng$i));";
	}
	//new
	$bindings['CURRENTPC'] = $outCode.' '.$secondHalf;
	$bindings['MAPPINS'] = $pinCode;
	$bindings['NEWCENTER'] = "var center = new GLatLng(".$line['Latitude'].", ".$line['Longitude'].");";

	$template = "map03.template";
}else{

	$template = "map01.template";

}

echo FillTemplate($template, $bindings);
?>

Integrating script with WordPress

After developing this script I discovered that WordPress can’t run PHP in the body of a post without a plugin. Strange. So I had to put the prototype on a loose page.

Take a look at the trick I used to capture the output of a WordPress tag so I could incorporate it into Map Logic, and then my templates. In this example I captured the footer code, then bound it to a template tag.

<?php
require('./wp-blog-header.php');
ob_start();
get_footer();
$footer = ob_get_contents();
ob_end_clean();
$bindings['FOOTER'] = $footer;
?>

A sites position on Google work like this:

Position = Relevance of content * Google Rank

So, knowing my current Google rank is going to be handy. There are a bunch of different ways to discover a sites rank from the Google Toolbar, to a million and one websites. As I want to chart the progress of this site I also need a way to periodically record my results.

I need the following components: a script to periodically measure Page Rank, a database to store the results, and a script to chart the results.

Page Rank Script

After a quick search I came across a great Open Source Google Rank script. This script returns code for a graphic so I rewrote the function pr_image($pagerank) to return a number instead.

The Cron job

I set up a Cron Job to periodically call the following script. (This script is placed outside the html directory for security).

<?php
//Connect to the database
include 'connect.php';

//Include the Page Rank script
include("pagerank.php");

$today = date("Y-m-d");

//Discover the current Page Rank
$gpr= new pageRank();
$gpr->printrank("http://www.matthewbyrne.co.uk");
$pageRank = $gpr->get_pr();

// Insert a row of information into the table
mysql_query("INSERT INTO googlePR (theDate, rank) VALUES('$today','$pageRank' ) ") or die(mysql_error()); 

//We've finished with the database, so close the connection
mysql_close($conn);

?>

Charting the results

The results are displayed live in chart (to the right). This script still needs a bit of work, as it will run off the edge of the graphic after a couple of months, but for now does the job just fine. Also, it looks a lot nicer when the bars are not all zero, so I’m keeping my finger crossed that Google moves me up a rank or too.

<?php
//Connect to the database
include 'connect.php';

//set up image
$height = 120;
$img = ImageCreate(230,$height);
$white = ImageColorAllocate($img,0xFF,0xFF,0xFF);
$black = ImageColorAllocate($img,0x00,0x00,0x00);
$blue = ImageColorAllocate($img,0x14,0x8A,0xD6);
$grey = ImageColorAllocate($img,0xCC,0xCC,0xCC);

//Query databasebase
$query= "SELECT * FROM googlePR_MB";
$data = mysql_query("SELECT * FROM googlePR_MB")
or die(mysql_error()); 

//Build array
$results = array();
while($info = mysql_fetch_array( $data )){
	$reformatDate=date('d M',strtotime($info['theDate']));
	array_push($results, array($reformatDate,$info['rank']));
}
//We've finished with the database, so close the connection
//mysql_close($conn);

$resultCount = count($results);

//Generate bars
for ($i=0;$i<=$resultCount;$i++){
	imageFilledRectangle($img,20+(5*$i),($height-1)-($results[$i][1]*10),20+(5*$i)+3,$height,$blue);
}

//Generate y-scale
for ($j=0;$j<10;$j++){
	ImageString($img,1,8,$height-(10*$j), $j,$grey);
}
//Add titles
ImageString($img,1,20,0,"Google Rank for www.matthewbyrne.co.uk", $black);
ImageString($img,1,20,10, $results[0][0]." - ".$results[$resultCount-1][0],$black);

//Output graphic
header('Content-Type: image/png');
ImagePNG($img);
?>

The Easypeasy Database

Today I’ve been testing the Easypeasy database for my widget project.

I began by installing the data to MySQL. Very easy to do as the downloadable zip comes with a file you can import directly into MyAdmin.

With the database installed I used two scripts to look at the data in more detail. Firstly, one to establish the initial database connecion – it’s an idea to keep this file separate so you only have to write it once. Then, a second script that builds a form and processes the results.

Once I started to plot my results it quickly became apparent that although Latitude and Longitude is returned for each entry, the numbers are all rounded up. This puts W10 and SE13 on the same spot, so there’s still a bit of work to do to figure out how to the x and y fields effect the results.

Here’s the code I wrote for the form:

<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
Input Post Code:</br>&ltinput type="text" name="code" size="30">
<input type="submit" name="submit" value="submit">
</form>

<?php

//Connect to the database
include 'connect.php';

//If the form has been submitted then process the form
if (isset($_POST['code'])) {

//Grab the Postcode from the form
$postcode = $_POST['code'];

//Convert the Postcode to all uppercase
$postcode = strtoupper($postcode);

//Break the Postcode into two
list($outcode, $partTwo) = split(' ', $postcode);

//Pull out the relevant fields from our database
$query = "SELECT latitude,longitude FROM hwz_postcodes WHERE
outcode = '$outcode'";
$result = mysql_query($query) or die('Query failed: '.mysql_error());
$line = mysql_fetch_array($result, MYSQL_ASSOC);

//Print Results
print $postcode.' : ';
print $line['latitude'].','.$line['longitude'];

//We've finished with the database, so close the connection
mysql_close($conn);
}

?>

I’ll admit it, I’m very drawn towards Search Engine Optimization (SEO). The idea that you can drastically improve the visibility of your site with a few code and content tweaks certainly does appeal to my lazy bone.

For my experiment this site is currently the perfect candidate; low traffic, and scoring exactly zero in Googles Page Ranking.

However, that’s all about to change.

There are a number of techniques involved in SEO which I’ll cover as I go along.

Okay, first things first; get a Google account. Done that already? Great!

Now what’s needed here is the Webmaster Tools and Analytics. These will show how Google sees this site, help uncover any errors, and measure progress.

Before going any further decide on the url, in my case either:
‘http://matthewbyrne.co.uk’
or
‘http://www.matthewbyrne.co.uk’ – my choice

Whatever you choose, stick with it.

Setting up Google Webmaster tools

1. Enter the URL of your site
2. Click ‘Verify your site’
3. Select a verification method – Here I always choose to upload an html file
4. Make a blank text file on your desktop, and rename it to your unique file name google5b27wb292f65b6.html
5. Upload this to your sites root directory using your favourite ftp program – I use FileZilla
6. Hit verify

Add a sitemap to Google Webmaster tools

If you’re site is built with WordPress, download and install the excellent ‘Google XML Sitemaps Generator for WordPress‘ plug-in. This automatically generates a fresh sitemap each time you add new content taking all the donkey work out of the job. Whilst you’re on their site why not donate a couple of dollars to encourage great software?

1. For everybody else visit XML-Sitemaps.com to build a sitemap.
2. Enter your URL
3. Hit ‘Generate’
4. Download the file to your desktop
5. Upload it to your site root with your ftp client
6. Back in the Webmaster tools hit Sitemap > ‘Add a sitemap’
7. Fill in the sitemap name ‘sitemap.xml’
8. Hit ‘Add general web sitemap’ and you’re done

Now I hop over to the Google account page and select Analytics.

Set up Google Analytics

1. Hit ‘Add new website profile’
2. Enter your URL
3. Hit ‘Finish’
4. Copy the chunk of code into all your pages before the closing body tag and you’re done

I’ll take a few hours/days for Google to process this information, and longer to give you anything meaningful, so don’t hold your breath. Next, determine the Google Page Rank.

Click here to see a working version

Here’s an experimental Google map made using some excellent software from UCL Centre for Advanced Spacial Analaysis (Casa). The application slices up a large digital image – the one used here is 8000 x 8000px 30mb into a 256 x 256 pixel tiles (you might have noticed the how the map image builds up from these unit blocks).

The tiles correspond to the magnification of the map. At the lowest level the entire image is contained within a single 256 pixel square repeated left and right – this is the maps initial state. As you zoom in the tile samples are closer to the original image resolution.

The plan for the map is to lay a data layer on top of the map corresponding to each individual badge. This will hook up to the eBay API so when it comes time to sell the badges we can see a live data feed.

References:

Casa
http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp