For the breadcrumb naviagtion I needed a function to displaying the path to a given category ID, sometimes refered to as a single branch or node. I was using a simple parent child database table structure:

While the latter may seem fairly trival I really couldn’t get my head around the problem. After a bit of Googling, I found a function that was a good starting point so adapted it to fit my problem (the function is part of a categoru class):

function getCategoryTreeIDs($catID) {
		$row = DB::getInstance()->query("SELECT parent FROM categories WHERE ID = '$catID'")->fetch();
		$path = array();
		if (!$row['parent'] == '') {
			$path[] = $row['parent'];
			$path = array_merge($this->getCategoryTreeIDs($row['parent']), $path);
		}
		return $path;
	}

The function simply returns an array of category IDs. E.g 20, 28. So from the array I’d know that the tree would go as Home > Cat ID 20 > Cat ID 28.

Displaying the Breadcrumb Navigation

To display the actual breadcrumb I simply added the following method, that loops through the array of ID we just generated. The getNameLink method simply generates an SEO feindly website URL for the category, inside the <a> tag.

function showCatBreadCrumb($catID) {

		$array = $this->getCategoryTreeIDs($catID);

		$numItems = count($array);
		for ($i = 0; $i<=$numItems-1; $i++) {
			echo $this->getNameLink($array[$i]) . ' &raquo; ';
		}
	}

The result is a nicely formatted breadcrumb (to use our tshiorts example again):

Home &rquao; Clothes &rquao; tshirts &rquao; Mens &rquao; Red tshirts &rquao; Offensive &rquao;

A recursive function inside a loop, are you insane?

Some of you may have noticed that the function used to generate the category IDs is called recursively. This generally considered bad practice, for large data sets due to performance issues. However, for the current use this isn’t an issue. I know for a fact that client won’t be adding categories more than several levels deep, so performance really isn’t an issue in my eyes here. Maybe if we had hundreds of categories, but for several it’s really a non issue in my opinion.

getCategoryTreeIDs

PHP Arrays

Further to my article on using JQuery to dynamically append form elements, I have come across situations where multiple items should be appended to the form each time, as opposed to a single input in my article (I did this simplicity). For example, at work I’m currently working on an internal system whereby a user needs to add an unlimited amount of client contacts for a client. Pressing the ‘add contact’ link will append 3 fields – one for conatct name, contact telephone and contact email. Each of these fields are named exactly the same way as before (using square brackets at the end of the name E.g. ‘name[]‘) and appended the same way using JQuery.

There are lots of articles floating about explaing how to add fields, but I’ve not yet seen anything explaining how to retreive multiple elements like this.

The only differnce arises when retreiving these multiple values from the PHP’s POST array. In the example I have appended 3 inputs, named cname[], cemail[] and ctel[]. The values of each can be retreived using a slightly enchanced for loop:

if (isset($_POST['cname'])) {
for ( $i=0;$i<count($_POST['cname']);$i++) {
$contactname = $_POST['cname'][$i];
$conatctemail = $_POST['cemail'][$i];
$contacttel = $_POST['ctel'][$i];
}
}

That’s really all there is to it and I’m finding that the latter comes in useful quit regularly in every day projects.

JQuery - JavaScript Framework

Occasionally it is useful to silently load content into an area on a webpage. For example, you may have a list of recent comments that you want to refresh every minute. Using a meta refresh is one option, but this would cause the whole page to refresh, which could annoy the user. The solution is Ajax, where I’ll reload the content silently without a single page refresh. Even writing the simplist of Ajax functions is quite painful and requires a fair few lines of code to get things done. To make things simpler we’ll use my favourite JavaScript Framework,  JQuery.

The plan is to have dynamic content loaded via Ajax and refresh every x seconds. We’ll also have a loading image to show the user something is actually happening behind the scenes, as having nothing while the content is loading could make the user leave. The latter is especially important when querying large sets of data, where a delay is possible. You can get your own loading images from the ajax loading image site.Now we have a plan, we’ll get right into it.

First course of action is to setup our basic html page. It’s nothing amazing, simply a centered divider with a seperate divider for the loading graphic. Here’s the code we’ll be using (for simplicity I’ve used the style tag for the css, as opposed to having a seperate css file:

<!--
	body, h1 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.8em;
	}
	a {
		text-decoration: none;
		color: #333;
	}
	a:hover {
		color: #ff0000;
	}

	#ajax-content {
		height: auto;
		width: 400px;
		border: 5px solid #ccc;
		margin: 0 auto;
		padding: 10px;
	}
	#loading {
		width: 66px;
		margin: 0 auto;
	}
-->
<script src="jquery-1.2.3.min.js" type="text/javascript"></script>
<div id="loading">
   <img src="loader.gif" alt="content is loading" width="100" height="100" />
</div>

The JQuery library has also been included in the header – you can download JQuery from the official site. Our actual content will be loaded into the div called ‘ajax-content’. For the content I’ve simply used an external php file that echos an un-ordered list and the current server time (you can then see that the content has been refreshed as the time changes). This has been done for simplicity, but you could easily query a database for information. PHP’s sleep function was used to create a delay when loading the content, this way you can see something is actually happening. In reality you would never want to use sleep, as it simply delays loading times. The contents of the PHP file are as follows:

Last Updated: ".date('h:i:s A')."";
echo "
<h1>Big List of Software</h1>
";
echo "
<ul>
	<li><a href="http://link.com">RmBarCode 1.00a</a></li>
	<li><a href="http://link.com">ServerMask 3.0.4</a></li>
	<li><a href="http://link.com">LinkDeny 1.1.0</a></li>
	<li><a href="http://link.com">Drag Racer 1</a></li>
	<li><a href="http://link.com">Method123 Educational 3.6</a></li>
	<li><a href="http://link.com">Easy St. Tycoon 1.0</a></li>
	<li><a href="http://link.com">iColorPicker 6.18</a></li>
	<li><a href="http://link.com">USB Virus Scan 2.3</a></li>
	<li><a href="http://link.com">AWP Light FREE 2.0</a></li>
	<li><a href="http://link.com">ZipEnable 3.0.2</a></li>
	<li><a href="http://link.com">w3compiler 1.1.2</a></li>
	<li><a href="http://link.com">Remote Reboot 2.0</a></li>
	<li><a href="http://link.com">Pixeur 2.9.0.15</a></li>
	<li><a href="http://link.com">Mailing Master 2.0</a></li>
	<li><a href="http://link.com">Rewards Multiply 2.0</a></li>
</ul>
";
?&gt;

Now enters the magic, the JQuery. The following code is placed in script tags in the document head, I’ll explain line by line how this works.

function fetchAjaxContent() {
	var numRand = Math.floor(Math.random()*101);
	$('#ajax-content').load('ajax.php?UID=' + numRand);
}

For simplicity I’ll add a generic function that load’s the contents of our PHP file (ajax.php) via Ajax. This simply uses JQuery’s load function to load the contents of ajax.php. The random number is placed in the querystring to stop Internet Explorer caching the results. The latter could also be done server side via adding the below to ajax.php:

header("cache-control: no-cache");

The following code is placed inside JQuery’s document ready function. Firstly we hide the divider that will contain the ajax content. using more of JQuery’s built in ajax function, I use the ajaxStart function (that is executed whenever an AJAX request begins and there is none already active). In this instance the loading image is simply displayed. The opposite function used is ajaxStop (executed whenever all AJAX requests have ended) to hide the loading image and show the loaded content. Finally, we’ll call our function from previously, ‘fetchAjaxContent()’ from within the JavaScript setInterval function (calls a function at specified intervals in milliseconds, every 5 seconds is used in this example). The complete code for the document ready looks like this:

$(document).ready(function() {

        $('#ajax-content').hide();

	$("#loading").ajaxStart(function(){
		$('#ajax-content').slideUp();
                $(this).show();
	});

	$("#loading").ajaxStop(function(){
	         $(this).hide();
	         $("#ajax-content").slideDown();
	}); 

	setInterval("fetchAjaxContent()", 5000);

});

That’s it basically. You can now view a working example or download the source files. Notice how after each refresh, 5 seconds has elapsed in the printed output.

Thanks for reading!

301 Redirects Prevent 404 Errors

Google treats www.website.com and website.com as two totally different websites. This is very bad for your (or even a client’s) website as it may lead to duplicate content and different pageranks to those sites.  This is how Google “canonicalizes” the url and is very bad from an SEO standpoint.

In essence, a web server could return totally different results for each of those pages. I have also encountered the situation where clients have set their preferred domain in Google webmaster tools, have given out the opposite version for SEM and wonder why they don’t see results You can easily check the above by using the “site:” operator in Google search. E.g. site:www.website.com and site:website.com

You can use “mod rewrite” rules as a powerful method for redirecting many URLs from one location to another.  This is a simple server level technique for handling redirects. The way people handle this canonicalization issue is purely a personal choice, although the below method can be altered for directing to the none www version of the url.

The .htaccess file is simply an ASCII file created with any normal text editor. You need to save the file as ‘.htaccess’ (no filename, .htaccess is the extension!). Open you newly created .htaccess file in your favoured text editor and add the following lines of code, replacing domain.com with your domain:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain.com
RewriteRule (.*) http://www.domain.com/$1 [R=301,L]

Upload the .htaccess file to the root folder of your website and you’re done. All your traffic will be permanently redirected from a non-www version of your website to a www version of your website. To do the opposite (direct all traffic to the non www version use the below code in the .htaccess file):

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.domain.com
RewriteRule (.*) http://domain.com/$1 [R=301,L]

I am a full-time developer for an internet company located in Staffordshire (Midlands) of the United Kingdom. I have been designing and coding websites for over 2 years using PHP, ASP, JQuery, XHTML, CSS and JavaScript. I have been lucky to work on a wide variety of projects from small intranet sites, personal websites and full e-commerce storefronts. I am currently available on a limited basis for interesting freelance work. I also offer the following services (although you can contact me via email to discuss web services not mentioned here):

• SEO / Website Marketing / Offsite SEO
• Bespoke Website Design/Development
• Website Updates