Talk In Code

Multi pages forms are just as they sound, a single form spread across multiple pages. These are useful in terms of usability as it can break up an otherwise dauntingly big form into smaller chunks. It can also be useful if you want to process some of the results in order to determine what forms the user sees on later steps.

There are two ways in which it is possible to do this using PHP.

The first (and simplest) is just to cycle through the items submitted on a previous form and print them out as hidden fields. Our first page source code will look like this:

<form action="form2.php" method="get">
Name: <input type="text" name="name" />
<br />
<input type="submit" value="Proceed">
</form>

On submitting the form we are taken to form2.php, which asks the user a different question and prints out the hidden fields. Because we used a get request for our first form we need to use the $_GET array.

<form action="end.php" method="get">
Colour: <input type="text" name="colour" />
<br />
<?php
foreach ( $_GET as $key=>$value ) {
    if ( $key!="submit" ) {
        $value = htmlentities(stripslashes(strip_tags($value)));
        echo "t<input type="hidden" name="$key" value="$value">\n";
    }
}
?>
<input type="submit" value="Proceed">
</form>

This same code can be used on the different pages of the form. This method is fine, and works quite well, but it doesn’t account for users going back through the form and resubmitting a previous item. The $_GET array will only contain information about the previous forms.

To make this more user friendly, and robust, we need to employ a session to store our form values as the user goes through the form. Using sessions means that the user can cycle back and forward through the forms with no ill effect on the form data. The following code will take the input of the previous form and save it as a PHP session.

session_start();
foreach ( $_GET as $key=>$value ) {
    if ( $key!="submit" ) {
        $value = htmlentities(stripslashes(strip_tags($value)));
        $_SESSION[$key] = $value;
    }
}

This must be included on every page of our multi page form. If it is not then the data will simply not be saved for that step. Your users can now move back and forward through the forms, saving the information as they go. You need to supply a back button for this to work as using the browser back and forward buttons will also not save the data.

Finally, when testing this code I found that using GET rather than POST was beneficial in terms of usability. This is mainly because if you use POST requests and the user clicks the back on their browser they will be asked if they want to resubmit the information for that form.

Does anyone else have any ideas about how to do this? If so then post a comment and suggest it. You can even put a post in the forum!

A tag cloud is a name for a collection of keywords that are displayed as a big block of text. Usually the most commonly occurring keyword is the largest, and the least commonly occurring keyword is the smallest. Tag clouds are a neat way of allowing your users to navigate your content in a different way, simply be letting them look over the cloud and linking each keyword to sections of your site that contain that word.

Wordpress comes with this function built in and is already available as a widget. However, after adding a few hundred posts this tag cloud can get rather large and this widget can stretch your sidebar to stupid proportions. A way around this is to create a page that can be used to display this large tag cloud. The first step is to create a page template that will be used to run the correct Wordpress function to display the tags. This is done by making a copy of your normal page template (call it tagpage.php) and adding the following code at the top.

<?php
/*
Template Name: Tags
*/
?>

When you go to create a page you will see a list of available templates to select from, one of these will be called Tags. Add in your title and some descriptive text and select this template.

Next, we need to add a call to the wp_tag_cloud() function, this basically prints out a small tag cloud. Add the following code into your page template so that is fits in with the rest of your design.

<?php wp_tag_cloud(); ?>

As with most Wordpress functions, wp_tag_cloud() allows you to add lots of parameters to change the output of the function. There are lots of different options available, but the main ones that will be used are as follows:

• smallest - This designates the font size to be used for the least commonly occurring tag. The units are by default in 'pt' or points, but this can be changed via the unit parameter.
• largest - This designates the font size to be used for the most commonly occurring tag.
• unit - Unit of measure as pertains to the smallest and largest values. This can be any CSS length value, e.g. pt, px, em, %; default is pt (points).
• number - This tells the function how many tags to include in the tag cloud. The default is 45, but to print out all tags just use 0.

These parameters are given as an encoded string, for example, to change the number of tags printed from the default of 45 to 20 use the following code.

<?php wp_tag_cloud('number=20'); ?>

Multiple parameters are separated by the & character.

<?php wp_tag_cloud('number=20&largest=200'); ?>

Take a look at the Wordpress manual for more information about the wp_tag_cloud() function

To demonstrate I have created a tag cloud page on Talk In Code, using the following code to create the cloud.

<?php wp_tag_cloud('smallest=7&largest=50&number=500'); ?>

Finally, there is also a function called wp_generate_tag_cloud() that has the same functionality as wp_tag_cloud() but will always return the HTML string that makes the tag cloud.

There is an easy way to create a custom page for a particular page using Wordpress that doesn’t involve adding custom page ID checking code. This might be useful if you want to remove certain aspects of the theme (like a side menu) just for that page. The way this is done is by using the Template Name tag in the following manner.

<?php
/**
* Template Name: Page Template
*/
?>

Make a copy of your default page template in your theme directory and put this snippet of code at the top. You will now find that when you open the page to edit it there is a section called Page Template. This contains a drop down list of all of the templates available, including the default. You can create multiple page templates by just changing the value of the Template Name tag.

The $_SERVER superglobal array contains lots of information about the current page location. You can print this off in full using the following line of code.

echo '<pre>'.print_r($_SERVER,true).'</pre>';

Although this array doesn’t have the full URI we can piece together the current URI using bits of the $_SERVER array. The following function does this and returns a full URI.

function currentUri(){
 $uri = 'http';
 if(isset($_SERVER['HTTPS'])){
  if($_SERVER['HTTPS'] == 'on'){
   $uri .= 's';
  };
 };
 $uri .= '://';
 if($_SERVER['SERVER_PORT'] != '80'){
  $uri .= $_SERVER['SERVER_NAME'].':'.$_SERVER['SERVER_PORT'].$_SERVER['REQUEST_URI'];
 }else{
  $uri .= $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
 };
 return $uri;
}

You can use this function like this:

echo currentUri();

If you are looking for information about the MooTools JavaScript framework then your first stop should be the MooTools home page. The site not only allows you to download MooTools, but it is also a great resource for learning how to use MooTools.

There are examples of all the things you can do on the demo page, and information about all of the classes available in the framework on the documentation pages.

If you are wondering if MooTools is worth a look, and the examples haven’t convinced you yet, then take a look at this excelent selector speed comparison between Dojo, JQuery, MooTools and Prototype. MooTools isn’t faster than every framework for everything, but is always the fastest framework overall.