As an example take a website that gets say 10 hit per second, withouit caching this represents 20 (10 hits on your database and 10 hits on your database to fecth the result set) hits per second to your database – on larger sites and larger result sets this effect is amplified. However, by simply caching the total number of rows returned you can cut the requests to your database in half.

Google uses a caching system on their results (albeit more more complicated) and they never retuirn the exact amount of results (the perforamnce hit on a site as big and busy as Google would be absolutely huge!). Instead they present results as: “results 20-40 of about 248,000″ – with figure of 248,000 coming from an estimated cache value.

To cache the number of results the script would simply store a count of the total number of records in a SESSION variable (assume the cached session value is called “totalResults”. You could also store the result as a COOKIE that expires in the future, to force an update the cached number of rows. Using sessions, the code is very simply:

if( !isset($_SESSION['totalResults']) ) {
  //Code to query your database for a row count
} else {
  //use the total record count directly from the session variable
  $myPagerObj->pageSomeData($_SESSION['total_records'], $perPage, $curPage);
}

It would also be wirth doing some validation on the cached page value, for security. However, the latter would usually be done directly in you’re paging class.

For example, the below code would display different code depending on if the request for the page was made via AJAX or directly via a browser.

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //This is an AJAX request, do AJAX specific stuff
}
else {
    //This is not an AJAX request E.g. display normal page content.
}

In some code I was working on today, I saw a neater way of achieving the above, this would be included in your common config file:

define('IS_AJAX_REQUEST', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

if(IS_AJAX_REQUEST) {
    //This is an AJAX request, do AJAX specific stuff
}
else {
    //This is not an AJAX request E.g. display normal page content.
}

There’s an HTTP variable set called HTTP_X_REQUESTED_WITH, which will is set to ‘XMLHttpRequest‘ if the request method is via AJAX. This is method is untested with JavaScript frameworks other than JQuery, so may not work (but I don’t see any reason at all why it wouldn’t!).

It’s also worth noting that not all web servers include this variable and sometimes omit this specific $_SERVER paramter. Use vardump($_SERVER) to check that the HTTP_X_REQUESTED_WITH is present.

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

For example, let’s say the user can enter a specific coupon code during checkout. You would want to make sure the Paypal transaction has been successful before making the voucher as used, to do this you would need to know what code was entered during checkout. In the following simple example we’ll use the ‘custom’ field variable  – this is an optional field, whereby the the data is never presented to the shopper and can be 256 character long. Whatever is placed in this field before clicking your checkout button will be invisibly sent ot Paypal and posted back to your IPN script (assuming you have youre ‘rm’ or return method set to 2, or ‘POST’). The HTML for the hidden field is very simple:

<input type="hidden" name="custom" value="YOUR CUSTOM INFORMATION HERE">

Now, let’s say when you’re recording all the order information you weant to record the exact coupon code, delivery method id, the method by which the customer found your site (E.g. another id) and referrer id number. For convenience and for the sake of the example, I’ll assume you’ve done all the necessary processing to get your four pieces of information. The code to create our hidden field data is as follows:

/* ...logic to get below variables here! */

$shipping_method_id = '33';
$coupon_code = '45895';
$found_out_method = '9';
$referrer_id = '200';

$custom_info =
                       array(
			'shipping_method_id' => 33,
			'coupon_code'=> 45895 ,
			'found_out_method' => 20 ,
			'referrer_id' => 9
			);

/* Initiase field data and looping variable */
$field_data = NULL;
$i = 0;

/* Loop through info array to build data string */
foreach ($custom_info as $key => $field) {

	$field_data .= $field;
	$i++;

	if ( $i !== count($custom_info)) {
	      $field_data .= '-';
	}

}

/* create the hidden field
generated HTML is <input type="hidden" name="custom" value="33-45895-20-9"> */
echo '<input type="hidden" name="custom" value="'.$field_data.'">' . "\n";

Printing the value of $field data will give you the string ’33-45895-20-9′. This translates to shipping method id 33, coupon code 45895, found out id 20 and referrer id 9. The dash symbol has been used to delimit values for convenience, as we need to split this string up later on.

To process these variables in your IPN script (see the Paypal PHP sample script) you simply use PHP’s explode method to split the data into an array:

/* $_POST['custom'] contains the custom information we initially sent to Paypal */
$data = explode('-',$_POST['custom']);

/* Convert $data array into variables for further processing */
$shipping_method_id = $data[0];
$coupon_code = $data[1];
$found_out_method = $data[2];
$referrer_id = $data[3];

So you’ve now posted a string of custom information to Paypal and got this custom data back via IPN during the transaction processing. Now you have assigned each piece iof the array to a variable, you can easily continue to create your order header and save it to a database.

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.

<script src="js/jquery.js" type="text/javascript"></script>
<h1>New User Signup</h1>
<form action="index.php" method="post">

  <label for="name">Username:</label>
  <input id="name" name="name" type="text" />
  <label for="name">Password:</label>
  <input id="password" name="password" type="text" />

   <div id="container">
      <a href="#"><span>» Add your favourite links.....</span></a>
   </div>

   <input id="go" class="btn" name="btnSubmit" type="submit" value="Signup" />
</form>

The only part that isn’t standard is highlighted above. This is simply the link users click to add additional form fields on the fly. To make that happen we’ll need some JQuery:

var count = 0;
$(function(){
	$('p#add_field').click(function(){
		count += 1;
		$('#container').append('<strong>Link #' + count + '</strong>'+ '<input id="field_' + count + '" name="fields[]' + '" type="text" />' );
	});
});

Jquery makes it very easy to add for elements using the append method. As we need to assign a unique name to each additional input (as we are allowing the user to add an indefinite amount of inputs) I’ll use a variable to keep track of the number of inputs added. Whenever an input is added, the counter variable increments by one. Another thing to notice is how the fields are named using ‘txt[]‘. This creates an array of field names. So now when we click the ‘add_field’ link, a new input field is appended to the contianer div – view example.

The only other order of business is to save this information to a database. This would be easy if we had static field names for the whole form, but we don’t. We have the following:

<input id="name" name="name" type="text" />
<input id="password" name="password" type="text" />
<input id="field_1" name="fields[]" type="text" />
<input id="field_2" name="fields[]" type="text" />
<input id="field_3" name="fields[]" type="text" />
.
.
.
etc.

To capture this dynamic fields we’ll need to use a bit of PHP to loop through our posted array and saving the data using a many-many relationships using the following database structure – allowing a user to be associated with an unlimited number of websites:

Many-Many Data Structure For Users And Sites

The following PHP code will grab our static and dynamic form values and insert into the above data structure. We’ll be using a class for the database to minimise the amount of code written. Firstly we’ll check if the forma has actually been submitted, grab the static values (username and password) and insert these into our users table:

//If form was submitted
if (isset($_POST['btnSubmit'])) {

	//create instance of database class
	$db = new mysqldb();
	$db->select_db();

	//Insert static values into users table
	$sql_user = sprintf("INSERT INTO users (Username, Password) VALUES ('%s','%s')",
						mysql_real_escape_string($_POST['name']),
						mysql_real_escape_string($_POST['password']) );
	$result_user = $db->query($sql_user);

PHP’s sprintf function was used to format the sql query. I also escape input to prevent nasty things from happening. Now we need to check if the user has actually added any favourite websites in order to prevent a php error if we try to find non-existant values, if they have added a field we’ll need the user id number previously inserted into the users table, as we’ll need to insert this elsewhere later on:

//Check if user has actually added additional fields to prevent a php error
	if ($_POST['fields']) {

		//get last inserted userid
		$inserted_user_id = $db->last_insert_id();

Next we loop through the added form field values. This is where naming the field as in our append function as ‘txt[]‘ comes in, as all fields we added are submiited as an array called txt. Using a for each loop we can assign values to all dynamically added fields and save them to database. The $key is simply the fields name (field_1) and the $key is our actual value entered for that field. Now we know this, we can easily generate the sql statements within the loop. Firstly we add the website into the websites table, get the id of the inserted website and insert this into the the link table, using the userid from before. To finish, we display a confirmation message and disconnect from the database:

//Loop through added fields
		foreach ( $_POST['fields'] as $key=>$value ) {

			//Insert into websites table
			$sql_website = sprintf("INSERT INTO websites (Website_URL) VALUES ('%s')",
						    	   mysql_real_escape_string($value) );
			$result_website = $db->query($sql_website);
			$inserted_website_id = $db->last_insert_id();

			//Insert into users_websites_link table
			$sql_users_website = sprintf("INSERT INTO users_websites_link (UserID, WebsiteID) VALUES ('%s','%s')",
						    	   mysql_real_escape_string($inserted_user_id),
								   mysql_real_escape_string($inserted_website_id) );
			$result_users_website = $db->query($sql_users_website);

		}

	} else {

		//No additional fields added by user

	}
	echo "
<h1>User Added, <strong>" . count($_POST['fields']) . "</strong> website(s) added for this user!</h1>
";

	//disconnect mysql connection
	$db-&gt;kill();

As a result, our database should be populated as follows (these are screenshots from phpmyadmin):

All our data tables are populated and the correct website and user id are inserted into the link table

You can view the source of php file here or download the original source files (you’ll need to open classes/db.class.php and populate the sql variables with your own database details). The MySQL source to create the tables is also included in the source files.

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!