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 can across a form validator by Simon Willison. This basically lets 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 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 my 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" />

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.

<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 form
Download the form processor (version 1.04 - 06/10/2008)

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.

Project: Escouts Route Hiker - A free to use website for planning and creating hikes for walkers in the UK.

Nearly five years ago I was doing the Duke of Edinburgh scheme through my school. When it came to creating the route cards for the hikes, our team got very frustrated and annoyed - if you make a mistake you have to go back and work out all the timings again. This sometimes resulted in spending hours on filling in the paperwork.

To solve this problem I created an Excel Spreadsheet. This basically worked out the timings automatically, and proved to be a huge success for our Duke of Edinburgh team. I had been part of the Escouts community for nearly a year at this point, and realised that others could benefit from using my spreadsheet. For this reason, I decided to make a small website with the same principle as the spreadsheet. With a huge amount of participation and ideas from the Escouts Community over the course of a year, the website went live, and has consistently grown in it’s usage over the last year. With 1039 users to date and no marketing done by myself, this project appears to have huge potential. For this reason I decided to turn the project into a company called ‘RouteHiker’, which will hopefully go live later this year.

Project: Posters suitable for exhibitions

In late 2007 I exhibited my company ‘RouteHiker’ at the Festival of Innovation, based at the NEC in Birmingham. To make my company stand out I enlisted the help of Liam Howley, a digital artist who I lived with in my first year at university. Liam is an extremely talented artist whose Photoshop skills never cease to amaze me.

Although the following isn’t my work, I thought it was so good I’d put it here for everyone to see. Liam produced 4 printable items - 1xA3 poster and 3xA4 posters, all of which work extremely well together and portray a powerful brand image.

Project: www.niran7.com

As a favour I turned my good friend Niran’s website design into a fully working site.

The site is powered by Wordpress, with the site design running on a custom made theme. Niran supplied the Photoshop design of the site, and I converted this into a fully functioning site. The website also features some custom PHP such as the ‘Latest Work’ image on the homepage, which automatically reflects the latest work Niran has submitted to the site.

As always, it was a  pleasure to work with Niran, and gave some pleasing results. A fantastic site to show off Niran’s skill-set, and is definetely worth taking a look at!

Please let me know your thoughts, criticisms etc - a site is never perfect and can always be improved!

For this reason, I would strongly suggest storing your sessions in a database. This tightens security considerably, and also allows for a wealth of new possibilities, such as running SQL queries on the database to see how many users are logged in. It is also the only logical solution if you are using multiple servers that need to access the same user sessions.

It’s quite simple to make the change to storing sessions in the database, and all you need for the following example is PHP 5 and MySQL.

First of all you will need to include the following PHP code in every page on your website that needs database or session access. It should be the very first thing included on every page.

sessions_database.inc.txt

Don’t forget to change your database details!

Secondly, you will need the following at the bottom of each page:

//You must call the following at the bottom of every page that uses sessions
session_write_close();

The last thing you need to do is to create the database table to store the sessions. Here is the SQL to do so for a MySQL database:

CREATE TABLE `sessions` (
  `id` char(32) NOT NULL,
  `data` longtext NOT NULL,
  `last_accessed` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;