<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Matthew Byrne: the blog &#187; Regex</title>
	<atom:link href="http://www.matthewbyrne.co.uk/tag/regex/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.matthewbyrne.co.uk</link>
	<description>copywriter / producer / blogger</description>
	<lastBuildDate>Sun, 03 May 2009 20:06:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Postcode Widget &#8211; Part 3</title>
		<link>http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/</link>
		<comments>http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/#comments</comments>
		<pubDate>Mon, 25 Aug 2008 10:59:38 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[projects]]></category>
		<category><![CDATA[Google map]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[Postcode]]></category>
		<category><![CDATA[Regex]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://www.matthewbyrne.co.uk/?p=77</guid>
		<description><![CDATA[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&#8217;Reilly book. This allowed me to separate the logic from [...]]]></description>
			<content:encoded><![CDATA[<p>You can see a prototype version of the widget by <a title="a working prototype of the widget" href="http://www.matthewbyrne.co.uk/postCodeWidget.php">clicking here</a>.</p>
<h3>Template engine</h3>
<p>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 <a href="http://oreilly.com/catalog/9781565926103/">O&#8217;Reilly book</a>. This allowed me to separate the logic from the markup</p>
<pre>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;
}</pre>
<h3>Map Logic</h3>
<p>Here&#8217;s the source for the Map Logic. As an attempt to make the script secure you can see I&#8217;ve used a <a title="Postcode Regex author" href="http://regexlib.com/UserPatterns.aspx?authorId=97d6e0fb-0c53-4cfd-94f8-bf3afd2407e5">UK Postcode Regex from Stuart Wade</a> to validate the form input. And also <strong>mysql_real_escape_string()</strong> on any database calls.</p>
<p>Any security tips would be greatly appreciated</p>
<p>The Map Logic uses four separate templates to handle the interaction, and the error state.</p>
<pre>&lt;?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']) &amp; $_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);
?&gt;</pre>
<h3>Integrating script with WordPress</h3>
<p>After developing this script I discovered that WordPress can&#8217;t run PHP in the body of a post without a plugin. Strange. So I had to put the prototype on a loose page.</p>
<p>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.</p>
<pre>&lt;?php
require('./wp-blog-header.php');
ob_start();
get_footer();
$footer = ob_get_contents();
ob_end_clean();
$bindings['FOOTER'] = $footer;
?&gt;</pre>
<!-- Social Bookmarking Reloaded BEGIN --><div class="social_bookmark"><em> </em><br /><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://del.icio.us/post?url=http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/&amp;title=Postcode+Widget+%26%238211%3B+Part+3" title="Add 'Postcode Widget &#8211; Part 3' to Del.icio.us"><img src="http://www.matthewbyrne.co.uk/wp-content/plugins/social-bookmarking-reloaded/delicious.png" title="Add 'Postcode Widget &#8211; Part 3' to Del.icio.us" alt="Add 'Postcode Widget &#8211; Part 3' to Del.icio.us" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://digg.com/submit?phase=2&amp;url=http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/&amp;title=Postcode+Widget+%26%238211%3B+Part+3" title="Add 'Postcode Widget &#8211; Part 3' to digg"><img src="http://www.matthewbyrne.co.uk/wp-content/plugins/social-bookmarking-reloaded/digg.png" title="Add 'Postcode Widget &#8211; Part 3' to digg" alt="Add 'Postcode Widget &#8211; Part 3' to digg" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://furl.net/storeIt.jsp?t=Postcode+Widget+%26%238211%3B+Part+3&amp;u=http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/" title="Add 'Postcode Widget &#8211; Part 3' to FURL"><img src="http://www.matthewbyrne.co.uk/wp-content/plugins/social-bookmarking-reloaded/furl.png" title="Add 'Postcode Widget &#8211; Part 3' to FURL" alt="Add 'Postcode Widget &#8211; Part 3' to FURL" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://reddit.com/submit?url=http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/&amp;title=Postcode+Widget+%26%238211%3B+Part+3" title="Add 'Postcode Widget &#8211; Part 3' to reddit"><img src="http://www.matthewbyrne.co.uk/wp-content/plugins/social-bookmarking-reloaded/reddit.png" title="Add 'Postcode Widget &#8211; Part 3' to reddit" alt="Add 'Postcode Widget &#8211; Part 3' to reddit" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.technorati.com/faves?add=http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/" title="Add 'Postcode Widget &#8211; Part 3' to Technorati"><img src="http://www.matthewbyrne.co.uk/wp-content/plugins/social-bookmarking-reloaded/technorati.png" title="Add 'Postcode Widget &#8211; Part 3' to Technorati" alt="Add 'Postcode Widget &#8211; Part 3' to Technorati" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.newsvine.com/_wine/save?u=http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/&amp;h=Postcode+Widget+%26%238211%3B+Part+3" title="Add 'Postcode Widget &#8211; Part 3' to Newsvine"><img src="http://www.matthewbyrne.co.uk/wp-content/plugins/social-bookmarking-reloaded/newsvine.png" title="Add 'Postcode Widget &#8211; Part 3' to Newsvine" alt="Add 'Postcode Widget &#8211; Part 3' to Newsvine" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://ma.gnolia.com/bookmarklet/add?url=http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/&amp;title=Postcode+Widget+%26%238211%3B+Part+3&amp;description=Postcode+Widget+%26%238211%3B+Part+3" title="Add 'Postcode Widget &#8211; Part 3' to Ma.gnolia"><img src="http://www.matthewbyrne.co.uk/wp-content/plugins/social-bookmarking-reloaded/magnolia.png" title="Add 'Postcode Widget &#8211; Part 3' to Ma.gnolia" alt="Add 'Postcode Widget &#8211; Part 3' to Ma.gnolia" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.stumbleupon.com/submit?url=http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/&amp;title=Postcode+Widget+%26%238211%3B+Part+3" title="Add 'Postcode Widget &#8211; Part 3' to Stumble Upon"><img src="http://www.matthewbyrne.co.uk/wp-content/plugins/social-bookmarking-reloaded/stumbleupon.png" title="Add 'Postcode Widget &#8211; Part 3' to Stumble Upon" alt="Add 'Postcode Widget &#8211; Part 3' to Stumble Upon" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.facebook.com/share.php?u=http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/&amp;t=Postcode+Widget+%26%238211%3B+Part+3" title="Add 'Postcode Widget &#8211; Part 3' to FaceBook"><img src="http://www.matthewbyrne.co.uk/wp-content/plugins/social-bookmarking-reloaded/facebook.png" title="Add 'Postcode Widget &#8211; Part 3' to FaceBook" alt="Add 'Postcode Widget &#8211; Part 3' to FaceBook" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://twitter.com/home?status=http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/" title="Add 'Postcode Widget &#8211; Part 3' to Twitter"><img src="http://www.matthewbyrne.co.uk/wp-content/plugins/social-bookmarking-reloaded/twitter.png" title="Add 'Postcode Widget &#8211; Part 3' to Twitter" alt="Add 'Postcode Widget &#8211; Part 3' to Twitter" /></a></div>
<!-- Social Bookmarking Reloaded END -->]]></content:encoded>
			<wfw:commentRss>http://www.matthewbyrne.co.uk/projects/postcode-widget-part-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
