Project: http://www.shareandresolve.co.uk

Working for WebServ UK I developed an informative and simple website for this small company. The site allows potential customers to find information regarding the company and the services that they provide. I worked with graphic designers within WebServ UK to produce a website and brand for Share and Resolve that matched perfectly.

The site is powered by PHP 5 and MySQL and runs on a bespoke content management system to allow the company employees to maintain the site in an easy to use environment. It was great fun working with Share and Resolve and it’s always a pleasure to be involved in a website that exists for a fantastic purpose and to help others.

Project: http://www.independentfinancialadvicebureau.co.uk

Working for Staffordshire University I developed an informative and simple website for this small company. The site allows potential customers to find information regarding the company and the services that they provide. I also worked with the company to improve their logo and establish a professional and informative brand.

The site is powered by PHP 5 and MySQL and runs on a bespoke content management system to allow the company employees to maintain the site in an easy to use environment.

Project: https://www.amberpublications.org.uk/manager/

Working for Staffordshire University I developed a child behaviour tracking and analysis system for CREC. The site is a unique web application that allows child behaviours to be tracked and improved throughout their time in nurseries, and is now used by any teachers who are involved in the CREC scheme. I worked with the client to tailor their specification and to thoroughly understand what they were trying to achieve, and then set about developing this complex and vast application.

The site is powered by PHP 5 and MySQL, and also features import and export functionality so data can be integrated with other systems. I enjoyed this project because it was so unique and also gave me the opportunity to build a system that could benefit thousands of young people in the future.

<?php
function simpleEncode($valueArray,$maxValue) {
	$simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	$str = 's:';
	$t = count($valueArray);
	for ($i=0;$i<$t;$i++) {
		$currentValue = $valueArray[$i];
		if ((strlen($currentValue)!=0) && ($currentValue>=0)) {
    		$str .= substr($simpleEncoding,round((strlen($simpleEncoding)-1) * $currentValue / $maxValue),1);
    	}
      	else {
      		$str .= '_';
      	}
  	}
	return $str;
}
?>

You can then create the graph in a similar fashion to this:

<?php
$data = array(1,3,5,3,2,9,1,10,4);
?>
<img alt="sparkline" src="http://chart.apis.google.com/chart?cht=lc&chs=100x30&chls=1,1,0&chxt=r,x,y
&chxs=0,990000,11,0,_|1,990000,1,0,_|2,990000,1,0,_&chxl=0:||1:||2:||&chd=<?php echo simpleEncode($data,max($data)); ?>"/>

Which would output something similar to this:

The last few months has seen some additional functionality added, as well as fixing a few bugs here and there. Version 2 of the processor is fully backwards compatible with version 1, so don’t panic!

Here’s a brief summary of the changes:

• Callbacks added to radio buttons
• All functions now declared as public or private respectively
• A configuration system, which lets you change the behaviour of the form processor
• The ability to echo the form output or save it to a variable (useful for templating systems)
• A text transform rule has been added, which allows you to set text to be lowercase, uppercase or uppercase the first letter of each word
• A minimum length rule has been added, which allows you to set the minimum number of characters a user must enter
• A maximum length rule has been added, which allows you to set the maximum number of characters a user must enter
• Cleaned up the code
• Swapped exit() statements with exceptions, so these can be caught and handled if necessary

I’ve also created a few example forms to show the functionality of the form processor. Please take a look at the PHP Form Processor article for full details.

Gavin Holt is also doing a series of articles demonstrating practical usage of the form processor. Check it out for some excellent ideas and usage examples.

DOWNLOAD THE PHP FORM PROCESSOR

First of all you have your HTML form, which then submits all the data to PHP to be validated etc. You have to write the validation rules for each form field in PHP, and then come up with a system of reporting errors back to the user. With large forms this can get extremely complicated!

Around two years ago I came across a form validator by Simon Willison. This basically let you write the entire form and it’s validation rules in the html. These rules are then read by PHP, applied to the relevant form fields and so on. It’s a very elegant solution that makes building forms much easier and faster, as well as easier to debug and maintain. I’ve been using this script for the last 2 years and have made various changes to the script along the way to suit my purposes.

However, the script does have it’s down-points. It uses the PHP 4 XML library which to be honest is rubbish! It causes the code to become extremely bloated and unable to handle certain characters such as ampersands (&). This means that as soon as a user enters an ampersand or a character like a dollar, the script would crash!

The script also only supported textfields, and didn’t provide support for radio buttons, checkboxes and select drop-down lists.

With all these positives and negatives in mind I’ve built my own PHP Form Processor from scratch, which I think does the job quite nicely. The script is open source and I’ve provided a tutorial and several example forms on how to use it.

The script also protects your forms against CSRF (Cross-site request forgery) and form manipulation. Anyway, without futher ado, here is the tutorial..

Requirements

• PHP 5 with SimpleXML support
• Session support
• Cheese on toast

Demonstration

Traditionally an XHTML form input box would look like this:

<input type="text" id="myBox" name="myBox" />

Using the PHP form processor this would be written as:

<element id="myBox">
 <input type="text" />
 <error> <strong class="error">!</strong></error>
 <compulsory message="myBox must be filled in" />
 <validate test="alpha" message="myBox must only be letters" />
</element>

At first glance it looks a lot more bloated than the traditional method, so lets take a look at what it’s doing and why it’s better.

When using the form processor all the form items are wrapped in element tags. The element tag tells the form processor that it’s a form field, and also specifies the ID. Within the element tag we define the properties and rules of the form field. In the above example we’re telling the form processor that the form field we want is a text field (<input type=”text” />), as well as defining various rules to apply to the user’s input.

The line  ’<error> <strong class=”error”>!</strong></error>’ defines what is displayed when a validation rule fails. In this case a bold exclamation mark would be displayed just after the text field.

The next few lines are the rules which we want to apply to the text field. The compulsory line states that the field must be filled in, and if it’s not present the message ‘myBox must be filled in’ to the user. The validate line states that the user input must only be letters, and if it’s not present the message ‘myBox must only be letters’ to the user.

Many rules can be applied to the form fields. They will be applied to the form field in the order that you define them (top to bottom). For example, if there are 3 rules defined for a form field and the first rule fails then the next 2 rules won’t be applied. Instead the error message for rule 1 will be shown to the user. If the 1st rule runs fine it’ll move onto the 2nd rule etc.

Here is a description of each of the rules available:

Compulsory

Checks whether the user has entered any input or not.

<compulsory message="This field is compulsory" />

Validate

Checks whether the user input matches the format specified. The format can be alpha, alphanumeric or numeric.

<validate test="alpha" message="email must be alpha" />

Regular Expression

Checks whether the user input matches the regular expression specified.

<regexp test="|^[a-zA-Z]*$|" message="email doesn't match the regexp" />

Text transform

Alters how the user input is outputted.

<text transform="upper" /> UPPERCASES THE ENTIRE INPUT
<text transform="lower" /> lowercases the entire input
<text transform="ucwords" /> Uppercases The First Letter Of Each Word

Minimum length

Checks whether the user input is of a required length.

<minLength length="4" message="This field must contain more than 3 characters" />

Maximum length

Checks whether the user input is greater than a required length.

<maxLength length="10" message="This field must contain less than 10 characters" />

Match

Checks whether the user input matches the user input in another field. Most common usage is for confirming passwords.

<match element="anotherFieldID" message="this field must match another field" />

Callback

Takes the user input and passes it to a PHP function of your choice. The function should take one parameter as a string (the user input), and return Boolean true or false. If the function returns false the error message will be presented to the user.

An unlimited number of callbacks can be defined for each form field – just place them one after another. Each callback will be run in order.. if the first one is ok then it moves onto the next one. However, if the first one fails it won’t run the other callbacks or rules.

<callback function="functionname" message="callback 1 failed" />

Summary & goodies!

The entire form and it’s rules are read in by PHP, which then goes through the form and extracts the rules. It then cleans up the form and produces strict XHTML which it outputs to the user. This means they never see the rules and just see standard XHTML markup.

It’s a difficult concept and you might be a bit confused at this point, so it’s probably best just to give you a working example. Here is a simple form which tests some of the functionality available (complete with source-code).

View example forms
Download the form processor (with examples) (version 2.01 – 24/01/2009)

As always I’d love to hear from you, so any thoughts, comments, bugs etc, please post! I’d also like to see examples of where people have used it, so feel free to drop me links!

Two hours later my Woopra account was activated, and I’ve now got rid of Google Analytics and replaced it with Woopra. I can honestly say that after 5 minutes of using it it beats Google Analytics hands down in almost every aspect. The fact that I can see visitors as they appear on my site in real time, and then talk to them and watch the route they take through my site is frankly phenomenal. Google Analytics took 24 hours to update.. long after my visitors had been and gone.

My only concern is that people might get a bit privacy conscious if I suddenly start talking to them, and asking them if they’re liking the current the page they’re on! Do you see this in a different light? Would you be shocked if this happened to you?

The only flaw i’ve spotted so far is the pop-up chat is a bit unfriendly to initiate, but that would be an easy enough problem to rectify.

I’d recommend that anyone who has a website gives Woopra ago, just to experience the power! If you’re reading this post on my site watch out, I might just demo the power of Woopra to you

Let me know how you get on, and what you think it!

If anyone can recommend any popular and respected website showcase sites, I’d love to hear from you. Or if you’re feeling in a really good mood and want to submit my website yourself, please feel free to!

Project: http://www.willesley.org

I’ve been the Web Developer for Ashby & Coalville District Scouts for a few years now, and the website was due for a revamp, as well requiring a sophisticated backend to handle the administration of Willesley Campsite. The site features information on the district, the campsite, hosts mini websites for each group/unit in the district, as well as an entire booking system for the campsite.

This project took several months to complete, mainly due to the vastness and requirements of the campsite administration system. I did this project for free as a way of saying thank you for my years in Scouting and how it has improved my life.

Project: http://www.southeastscotlandscouts.org.uk

When The Scout Association reorganised their structure a few weeks ago, new websites were required for each of the regions. WebServ UK were called in to finish a half built design and convert it into a functioning Joomla template. Utilising XHTML, CSS and JavaScript technologies, the project was completed within a matter of hours.