It’s an engaging concept, now live on the web. To see more, go to www.theartofservice.co.uk.

In order for the website owner to manage his own content, WordPress was used as a CMS (content management system). Each page is editable, while images can be uploaded to a specific category, which will then appear on the website automatically re-sized. The quotations and contact pages feature forms that check for incorrect email addresses and make sure compulsory fields are satified. Here’s a screenshot of the site:

To see it in action, go to here.

To see it in action, visit: www.montrose-partnership.com

Carried out for a West London based design agency, this job entailed taking a psd design and bringing it to life via XHTML/CSS and the wonderful jQuery JavaScript library. The vertical menu is set to stay in place while the content area to the right changes to reflect whatever the user chooses to click on.

jQuery’s chaining ability is put to thorough use as each menu link sets off a series of events; the menu itself – inc. child elements – expands and contracts, and the content area is repopulated. The following picture illustrates what happens when a specific wedding ring is clicked. The content area changes to a large ring with a column of thumbnail rings situated to the side. The thumbs can be navigated with arrows and clicked to expand and fill up the content area. Again, this is all performed using jQuery.

CSS sprites were implemented for the menu’s hover states, however, the selected ‘active’ state is actioned using jQuery. Here’s one of the sprites:

All in all, an interesting exercise in the uses of CSS and jQuery, which indeed makes for clean uncomplicated code.

With the Photoshop designs in hand, I set about cutting and marking them up with XHTML and CSS. With the basic interface complete, work was started on the server side. This involved coding a number of scripts in PHP to search for and display properties, all accessed through a MySQL database.

Once a property’s selected from the results list, the user’s taken to an individual proprty page, as above. In order to upload properties to the website, an admin section was built behind a password protected log in.

The code and database design for this project are bespoke, as a content management system for the entire site wasn’t needed. Had it been, and had a property blog been stressed, the project would have been WordPress based. To sum up, I coded the entire site, but did not carry out the design work.

extract( $_POST );

This creates a value pair corresponding to each key/value pair in the $_POST array (the elements in the contact form). So, the names in the posted form fields become the variable names, whose values are automatically assigned to their respective form values.

Take the following basic form:

<form action="emailSent.php" method="post">
<fieldset>
<legend>Personal information</legend>
<label>Name</label><input type="text" name="name" />
<label>Email address</label><input type="text" name="email" />
<label>Telephone</label><input type="text" name="phone" />
</fieldset>
<strong><label>Message</label>
<textarea name="message" ></textarea>
<input type="submit" name="SUBMIT" value="SUBMIT" />
</form>

Upon clicking ‘submit’, the form’s sent to the processing script, ‘emailSent.php’. There, the extract() function would appear:

extract( $_POST );

Which would immediately capture the $_POST array elements as:

$name=name;
$email=email;
$phone=phone;