One of the challenges that needs to be dealt with is the use of Pages. A “Page,” in Wordpress parlance, is a document which sits outside the blog chronology. For the purpose of a CMS, you don’t really want all of your posts to be chronologically organized. You could rewrite the Post templates and the permalink format to eliminate all date information, which would provide you with a nice CMS-like organization – but would also eliminate the blog function. Realistically, you probably want both.

It’s very easy to create a large number of WordPress pages and sort them into a hierarchy. For presentation, the default WordPress function wp_list_pages creates a very nice nested group of unordered lists. This can be styled using CSS to create either a long list of pages with inset sub pages, or a fancy CSS-driven set of drop down or flyout menus.

So far, so good. If you’ve got 10 pages, a single list is fine. But for larger sites, you’re running into other challenges. A straight list of your 150 pages is ugly, difficult to use, and difficult to navigate.

But the classic drop down or flyout menu has some usability issues. For people with mobility impairments, for example, the ability to use a mouse may be limited – and it takes a fair amount of core source hacking in order to attach the javascript needed to make these menus completely keyboard navigable. It’s easy to make certain that the top level link in each category is usable from the keyboard – so your responsibility is to make certain that the top level category link will provide access to all sub pages.

Again, there’s an easy solution: write links to all your further pages into your document content.

Ick. This solution sucks. First of all, if you’re creating this site for a client, you can’t necessarily rely on them to retain the content you’ve carefully created. Second, it’s very awkward to have to hand-maintain links to every page on the site. Why are you using a CMS if you’re going to have to do this anyhow?

Thankfully, although it’s not immediately obvious, Wordpress does provide a way to access the children of pages programmatically. Using this code, you can simply create a secondary navigation section which provides easily keyboard-navigable links to all pages below those top level documents.

The Code

<h3>
<?php echo get_post_meta($wp_query->post->ID, 'category', true); ?>
</h3>
<?php 
if(get_the_title($post->post_parent) != the_title('' ,'',false)) {
echo "<ul>";
wp_list_pages("child_of=".$post->post_parent."&title_li=");
echo "</ul>";
}  
if(wp_list_pages("child_of=".$post->ID."&echo=0")) {
echo "<ul>";
wp_list_pages("title_li=&child_of=".$post->ID."&sort_column=menu_order"); 
echo "</ul>;";
} ?>

What’s going on here?

First up has really nothing to do with the navigation menu itself. This is a header for the category navigation menu, arbitrarily placed in a level 3 heading element. It’s a little oddly phrased – this is because WordPress doesn’t provide access to Category labels for Pages the same way they do for Posts. Therefore, this is actually sourcing a Custom Field – a feature available in WordPress which gives you the ability to attahc any custom information to a document. In this case, I’ve created a custom field named “category” which contains the phrase I wish to be considered the category for this item. Generally, it’s the link text of the top level link, although you could set it to be anything you wish.

We’re trying to talk about usability, however, so I’m inclined to suggest sticking to something appropriate.

The second block of code is a tricky bit. This if query is checking to see whether the current page is a subpage of any other page. In general, Wordpress has great built-in conditional functions – you can very easily check whether something is a page (is_page() or whether it’s a category page (is_category(). There isn’t, however, an is_subpage() condition. So, this is the workaround – checking whether the current page is not it’s own parent. In Wordpress, pages at the top level of the hierarchy are their own parents. (Let’s not get into genetics, here…I’m concerned.)

Next we’ll use the normal wp_list_pages() function. Again, we’re using the information about the post’s parent in order to determine what pages to list, using the child_of argument to retrieve only the Pages which are children of the current page.

Whoa, there! I see a problem!

Yep, you sure do. At this point, we’re only retrieving child navigation if we’re not on the top level page itself. Well, that’s great. You can get between child pages if you can find your way there!

So that second block of code comes into play. Same idea, except this time we’re fetching children of the current page, without checking whether the page is top level. If it’s got children, great – we’ll display ‘em. If it doesn’t – also great – we won’t.

This sytem does also work for multiple hierarchy levels, although it’s a bit awkward. Here’s what you’ll get with three levels in the hierarchy:

• Top level page, no children: displays category heading, no children. (The category heading could be removed using another conditional statement; I just haven’t done it.)
• Top level page, with children: displays all descendants (children and grandchildren.) Grandchildren will be in a nested unordered list inside the list item for their parent.
• Second level page, no children: displays all sibling pages (pages with the same parent).
• Second level page, with children: displays all sibling pages AND displays the children of the current page, in a nested unordered list inside the list item for that page.
• Third level page, no children: display all sibling pages at the grandchild level.

And so on. This code functions in Wordpress versions 2.01 and above.

Usable Category Navigation in Wordpress Pages
Copyright 2004 – 2010 Joseph C Dolson, Accessible Web Design

Download PHP Script

The script includes a single file with the functioning script and form, a sample blank comma separated values file you can upload to your server, and the SQL statement to create the table for this script. Otherwise, you’re on your own.

The beginning stages of a web-based form are very simple: you read the HTML guide, learn about select menus, options, form labels, radio inputs and all the myriad ways you can inveigle information from your visitors. You also learn about the action and method attributes. Great. So all of this HTML you’ve learned is wonderful – but won’t actually do anything. You need to provide some kind of back-end rules to actually make any use of this information.

Deciding how to use the Data

First things first, you have to decide what you want to do with the data. I’m only going to deal with the most common probable tasks, here – no image editing or complex database updates, just simple data management. Are you going to write your data to a database? Do you want to use it to create a file which will hold a record of the transaction? Do you want it to send an email?

For the sake of each example, I’m going to imagine we’re creating a survey. The form needs to submit information which will be inserted into a MySQL database which, if you choose, can be analyzed in various ways using other scripts later. This is just about getting the data into the database. We’ll start, therefore, by describing the form you’ll be using to collect information.

Let’s imagine a survey collecting four pieces of information:

1. A reason for contacting you

   The reason for contact will have four options, but only one will be allowable as a choice. This will use radio button inputs.

2. A list of services the contacting person might be interested in.

   In this case, the person will be able to select several options, so we’ll be using checkboxes.

3. Survey taker’s state of residence.

   This will be a drop down. Only one can be chosen, but there are far too many choices for a radio input to make any sense.

4. Comments from the survey taker.

   Could be anything – so this will have to be a text field.

The code for your form will look something like this:

<form method="post" action="">
<p>
<fieldset>
<legend>Why are you contacting us?</legend>
<div>
<input type="radio" name="q1_why" id="q1a">
<label for="q1a">Technical Support</label><br />
<input type="radio" name="q1_why" id="q1b">
<label for="q1b">Applying for Work</label><br />
<input type="radio" name="q1_why" id="q1c">
<label for="q1c">Wanted to Hire You</label><br />
<input type="radio" name="q1_why" id="q1d">
<label for="q1d">Other</label><br />
</div>
</fieldset>
<fieldset>
<legend>What service are you interested in? (Check all that apply.)</legend>
<div>
<input type="checkbox" name="q2_service[]" id="q2a" value="Heating" />
<label for="q2a">Heating</label><br />
<input type="checkbox" name="q2_service[]" id="q2b" value="Cooling" />
<label for="q2b">Cooling</label><br />
<input type="checkbox" name="q2_service[]" id="q2c" value="Plumbing" />
<label for="q2c">Plumbing</label><br />
<input type="checkbox" name="q2_service[]" id="q2d" value="Wiring" />
<label for="q2d">Wiring</label><br />
<input type="checkbox" name="q2_service[]" id="q2e" value="Carpentry" />
<label for="q2e">Carpentry</label>
</div>
</fieldset>
<fieldset>
<legend>Where are you from?</legend>
<div>
<label for="q3">Pick your state:</label>
<select id="q3" name="q3_state">
<option value="none">Choose One</option>
 
<option value="MN">Minnesota</option>
<option value="MT">Montana</option>
<option value="NY">New York</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Comments</legend>
<div>
<label for="q4">Please provide additional comments about our services.</label><br />
<textarea id="q4" name="q4_comments" rows="4" cols="40"></textarea>
</div>
</fieldset>
<fieldset>
<div>
<label for="submit">Submit the form</label>
<input type="submit" id="submit" name="submit" value="Send your Input" />
</div>
</fieldset>
</form>

This form will be the centerpiece of our example form processing script.

Creating your Form and your Script

Regardless of your chosen method of using data, you’ll need to have a script which collects the information from the form. This can be the same for each processing choice — first gather all data, then build the final element which either sends your email, inputs data to your database, or adds information to your data file.

There are two general types of form submission methods – POST and GET. Both are useful, but in this case I’ll only be dealing with POST data. If you want to learn more about the differences between the GET and POST methods, you might want to read an article describing the difference at length. You’ll notice that the code above has had the method attribute set to POST. The other important attribute for forms, action has been left blank for now.

In the course of this article, we’re going to build a script to process this example form – our script will be called process.php. For simplicity, we’ll contain the entire script in a single page. The form itself and all the processing commands will be contained in one page.

The First Pass: Retrieving the Variables

Opening the script:

<?php
if (isset($_POST['submit'])) {
// HANDLE THE INPUT
}
?>

We’ve established the outermost boundaries of our data processing. This snippet initiates PHP, establishes a simple if logical query which checks whether the form has been submitted. The data following the double forward slash? Just a comment. Anything on the same line as a double slash is a comment – PHP ignores it.

One of the most important things to consider when retrieving data from a publicly available web form is whether you can trust the data. And the most important thing to realize when you’re considering this is that you can never trust public input. Never. Part of having a form online is the acknowledgement that whether through malice, incompetence, or accident, there will always be the possibility that your form will be used to send data other than what you intended. You should take precautions, therefore, to check every piece of information that comes your way.

Text fields are the easiest fields to retrieve, but can be tricky to examine. For more information on PHP security, I highly recommend reading Dave Child’s “Writing Secure PHP” or ordering a book specifically on the subject, such as Pro PHP Security by Chris Snyder and Michael Southwell. I’ll touch lightly on the subject; but don’t count on this script for any serious security.

So what needs to go inside that commented space? We’ll need to collect the information which was placed in the form, check and make sure it’s the type of information we were looking for, and then we’ll assign each piece of data to a variable which we can use to format our final result.

$q1_why = $_POST['q1_why'];
$q2_service = $_POST['q2_service'];
$q3_state = $_POST['q3_state'];
$q4_comments = $_POST['q4_comments'];

Pretty straightforward – we’re taking the raw information from the form submission and assigning them to variables. Every piece of data sent from a form using the POST method will be stuck into PHP’s $_POST array variable, retrievable using the name attribute of the form input. You’ll notice one thing here which doesn’t seem to quite match – the name attribute for question 2 was actually “q2_service[].” What do the square brackets mean? They mean that this input, when submitted, will be placed in a variable of type array as well. This is what allows you to retrieve multiple answers from this question – everything checked off is now associated with the $q3_service array variable.

$error = FALSE;
if ($q3_state == "none") {
$error = TRUE;
}
if (isset($q4_comments)) {
$q4_comments = trim($q4_comments);
$q4_comments = strip_tags($q4_comments);
}
if (isset($q1_why) && 
isset($q2_service) && 
isset($q3_state) && 
isset($q4_comments) && 
$error == FALSE) {
$process = TRUE;
} else {
$process = FALSE;
}

Slightly more complicated. I’ve elected to skip examining the data for questions 1 and 2, because they are defined within the form. There’s relatively little chance that they’re being faked. Nonetheless, in a production script you may well want to inspect them. I am going to check questions 3 and 4, however. Question 3 could be a problem because the default option is “None.” In this script, we’re going to insist that our visitors be from one of these three states. In a real situation, you may want to allow for some other possibility – but not today. We’re checking to see whether our visitor has failed to pick their state. If so, we’ll set the variable $error equal to the boolean value “TRUE,” which we’ll use later to trigger an error condition.

With question 4, we don’t really care what the content is – but we don’t want any extra spaces and we REALLY don’t want anybody submitting HTML formatted text. So we’re using the trim() function to strip white space and the strip_tags() function to remove HTML code.

Question 2 may have multiple parts. If the user can submit multiple choices, there’s always a possibility that these multiple parts will need to be dealt with – we can’t just send the array around directly. We’ll need to turn this array of answers into specific parts.

while ((list($key,$val) = each($q2_service))) {
$q2_services .= "[" . $val . "]";
}

This code loops through the array of services selected and creates a string variable with each element contained in square brackets. This doesn’t serve any programmatic purpose except to make it easy to distinguish one element from another when viewing your final results.

Finally, we string everything together – make sure every variable has been set and that $error is FALSE, indicating that no error has occurred. If everything’s OK, we’ll set the value of $process to TRUE and we’ll move on to actually do something with this information.

Writing Form Data to a MySQL Database

The first task you’ll need to accomplish is to create your database. This won’t necessarily be available on every hosting solution. If you’re using one of the major hosting services, such as GoDaddy, you can always refer to their extensive documentation on databases. One of your first steps should always be going to your host’s help pages – any luck, and they’ll provide documentation like this which may answer a number of your questions on setting up a database. Regardless of your hosting service, however, if you use MySQL you will have to deal with the language which defines and interacts with the database – SQL, or Structured Query Language.

It’s well beyond the scope of this article to try and articulate the complete nature of MySQL or Structured Query Language. To get started learning SQL, you may want to give a look to the articles available from the W3Schools’ SQL Tutorial.

However, the minimum you’ll need will be a single database table with five fields. I’m actually going to go to six, because I like to attach a timestamp to every form submission – this information can really make your data a lot more useful.

CREATE TABLE survey (
sid INT NOT NULL AUTO_INCREMENT PRIMARY KEY, 
q1_why VARCHAR(127) NOT NULL, 
q2_service TEXT NOT NULL, 
q3_state VARCHAR(2) NOT NULL, 
q4_comments TEXT NOT NULL, 
time_stamp TIMESTAMP NOT NULL) 
TYPE = MYISAM;

This SQL code will create your basic MySQL table with six fields. It’ll contain an automatically incremented unique ID, create space for your fields, and keep track of when the submission occurred. For more explanations of databases, try the MySQL home page or consider reading a complete guide to MySQL such as MySQL™: The Complete Reference, by Vikram Vaswani.

Creating the database is somewhat outside the range of what I’m trying to cover, however. Hopefully the references provided will help you out – but for now, we’re going to have to deal with getting information into the database. This, of course, will require a completely different, though related, SQL query.

define ('DB_USER', 'yourusername');
define ('DB_PASSWORD', 'yourpassword');
define ('DB_HOST', 'localhost');
define ('DB_NAME', 'your_database');
$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) or die('Failure: ' . mysql_error() );
mysql_select_db(DB_NAME) or die ('Could not select database: ' . mysql_error() );

Before you can start adding information to a database, you need to attach your script to the database. In order for it to do that, you need to supply that script with your username, your password, and the name of your database. Now, obviously, this is a security issue. You should never make this information easily accessible – if possible, place this information in a separate file with a difficult to guess filename, somewhere below your website’s root directory. You can then include your database connection:

include ("../mydb_connect1597.php");

In this case, the connection file has been included one directory below the active script. Having connected to your database, you can move on and insert your data.

$query = "INSERT INTO survey VALUES ('','$q1_why','$q2_services','$q3_state','$q4_comments','now()')";
$q = mysql_query($query);

That’s all the PHP code required to insert the information from your form into a database. Now, you probably want to check that the data was correctly inserted, as well.

if (!$q) {
exit("<p>MySQL Insertion failure.</p>");
} else {
mysql_close();
//for testing only
//echo "<p>MySQL Insertion Successful</p>";
}

This code will simply check whether the mysql_query was performed successfully, and notify you of the results. It also closes the database connection, since you no longer need it in this instance of the script.

That’s something like the bare minimum needed to process a form and insert the data into a MySQL database – there are scads of issues not dealt with, including many database security issues and error handling. But that’s a question for a later article.

Placing your data in a file

As long as you know the correct data format, you can create just about any type of file using PHP. The easiest, of course, are .txt and .csv files. Comma separated values files tend to be a bit more useful for this kind of thing, since you can then open the file in a program such as Microsoft Excel and be able to sort the information. Although it’s possible to create the file from the beginning with PHP, it’s much easier to simply create the file in advance. You can create a .csv format file in any text editor – simply open a blank document and save it as “survey.csv” – the quotes will be required if you’re using Microsoft’s Notepad.

Servers are protective of files. Naturally, they don’t want to leave every file just sitting there waiting for anybody to edit it. In order to prevent this, files have permissions settings. Each file has permissions set for three users: the owner, the group, and the WORLD – which is to say, everybody. Each user is granted specific permissions for three actions: read, write, and execute. Most of the time, you want everybody to be able to read your documents, but only want yourself to be able to write them. For scripts and files which will be recording data, however, you need to be a little more trusting. For more on file permissions, read “ Understanding file permissions on Unix: a brief tutorial.”

Permissions are represented most commonly in 9 character strings. Each set of three characters represents one user, and each character within that user represents one behavior. For example, the permissions set rwxrw-r-x gives the owner of the file permission to read it, write it, and execute it. The group can read and write, and the world can read and execute the file.

You need to make certain that your .csv file has permissions set which will allow your script to read it and write it. The script probably runs with group permissions, but in some servers it may require world-wide permissions – if PHP is running under a different group than the owner of the file.

The code:

$csv_file = 'survey.csv';
if (is_writable($csv_file)) {
if (!$csv_handle = fopen($csv_file,'a')) {
// this line is for troubleshooting
// echo "<p>Cannot open file $csv_file</p>";
exit;
}
}

You’ve defined a file pointer which can find the comma separated values file you created. You’re checking it to see whether it’s readable and, while you’re testing, you’re providing an error message to tell you what’s going wrong.

At this point, you’ve also opened the file for editing using the function fopen. This function accepts two arguments: the first has to be a file pointer. The second is a code which represents the manner in which you’re opening the file – you need to tell the script whether you want to overwrite the existing content of the file, whether you want to add information at the beginning of the file or the end, or whether you don’t intend to write to the file at all.

The PHP online manual has a complete list of this codes at the fopen function page. For now, however, just know that a means “Open for writing only; place the file pointer at the end of the file. If the file does not exist, attempt to create it.” We’re not interested in reading the information and we don’t want to overwrite anything that’s already there, so it’s to the end of the file we go.

$csv_item = "\"$q1_why\",\"$q2_services\",\"$q3_state\",\"$q4_comments\"\n";
if (is_writable($csv_file)) {
if (fwrite($csv_handle, $csv_item) === FALSE) {
//for testing
//echo "Cannot write to file";
exit; } 
}
fclose($csv_handle);

This script creates a text string containing the four variables, checks to see whether the file is writable, and writes the string into the file. It then closes the file by releasing the file handler you’ve created and exits the script. The information has been saved to your file for later reading.

Sending your Information by Email

In some ways, this is the easiest method. It will simply stick the information into an email message and send it to you. What it doesn’t do is keep a running list of the uses of the form – if you wanted to use this for a survey, for example, you’d be manually entering the information from each survey submission into your chosen method of data tracking.

There are four basic elements required to send mail with PHP. The entire process is handled by a function called, predictably enough, mail(). This function needs four arguments:

1. The destination address, or recipient.
2. The message subject.
3. The message content, or body.
4. Mail header information.

Technically speaking, the mail headers are optional information. However, I think they’re important and valuable so we’re going to go ahead and pretend that they’re required.

//first, define your four mail function fields
$recipient = "you@yourdomain.com";
$subject = "Online Survey from Your Domain";
$content = "Online Survey:\n
Why are you contacting us? $q1_why\n
What services are you interested in? $q2_services\n
Where are you from? $q3_state\n
Your Comments:\n
$q4_comments\n";
$header = "From: YourSurvey <survey@domain.com>\n"."Reply-To: survey@domain.com\n";

This is pretty straightforward – each field is a basic text string. To make it easier to read and understand, I’m writing the questions asked into the message before the variable with the answers. I’m also making use of \n – this code creates a new line in the message, and will make the results much easier to process. (It has the same effect above in the CSV files section.)

You can name the sending address whatever you’d like, but I’d recommend using a name which will make it easy to associate the messages sent with this particular script.

Having assigned these variables, all that’s left is to send the message:

mail($recipient, $subject, $content, $header);
exit;

And you’re done. You’ve processed your data.

Conclusion

In conclusion, this is a very sparse way of addressing the complicated issue of letting people use your site interactively. It hardly touches on any of the major issues of usability or security, such as protecting your scripts from use by spammers; preventing hackers from accessing your databases; returning user-friendly error messages; or any higher level data processing. But it’s intended to be basic – this is just an introduction. Once you’ve gotten your feet wet, you should really look into a solid textbook which will cover some of the more difficult issues.

Recommended Reading

• Learning PHP and MySQL, by Michele E. Davis and Jon A. Phillips
• PHP and MySQL Web Development, by Luke Welling and Laura Thomson
• Beginning PHP and MySQL 5: From Novice to Professional, by W. Jason Gilmore
• Pro PHP Security, by Chris Snyder and Michael Southwell

I know that I’ve mentioned that Pro PHP Security book already — but I can’t emphasize the importance of security enough. By putting a form on your site and inviting any kind of input from your visitors, you’re creating a doorway into your website. Most of the time you’ll be fine, even if you haven’t taken the precautions you should — but it’s not worth the risk if you have the opportunity to protect yourself.

Processing Forms with PHP, a Beginner’s Guide
Copyright 2004 – 2010 Joseph C Dolson, Accessible Web Design

I mean, as a marketing metaphor, it’s great. Everybody wants their product to “click”. However, in this case I think they’ve taken it a bit too literally.

The Problem

On installation, IE7 automatically turns on the Windows Explorer click sound – this effect a wide variety of actions, particularly including opening folders and clicking on links. Believe it or not, these are activities I do a lot – but I like them silent.

One of the first things I always do with a new computer is turn off all of the default sounds. So why does IE7 think that upgrading Internet Explorer also means I’ve changed my normal preferences about sounds?

I have trouble thinking of many reasons this would be done which make any serious sense:

1. It’s a bug. Somehow, all the bug testers have their sounds turned on and nobody ever noticed this. Alternately, it actually occurs very rarely – but somehow has occurred to me on all three of my computers every single time I’ve installed it, with every beta version or release candidate I’ve looked at.
2. It’s a feature. IE7 comes with a BRAND NEW Windows Explorer click sounds, and they want to make sure everybody gets to hear it.
3. It’s a feature. They’re concerned that some users may not notice that they’ve clicked on links in web pages unless they receive an aural notification. (This is, of course, true – however, those users undoubtedly are using screen readers anyhow.)
4. It’s not really happening. It’s entirely in my imagination, since I’m obviously searching for excuses to be upset with Microsoft.

The most probable of these is that it’s actually a rare bug – but given the number of times it’s happened to me, I’m personally disinclined to consider that. The idea that the development would intentionally program some “feature” in IE7 which actively alters a user’s settings, however, is sounding quite likely. But why?

The Solution

Assuming that you haven’t been won over by IE7’s fabulous clicking sound, you may want to turn it off. Well, actually this is exceptionally simple – it’s just silly that you have to do it at all.

On Windows XP SP2:

1. Control Panel →
2. Sounds and Audio Devices →
3. Sounds →
4. Select “Start Navigation” in the Program Events selection area →
5. Select your sound of choice (“None”, for example) from the drop down menu below. →
6. Click “OK”

If you like the “No Sounds” option, like me, you can do this more quickly. You’ll just want to switch your Sound scheme to the default setting briefly, then switch it back to “No Sounds”. That’ll turn everything on and off – kind of like a cold reboot for your sound scheme.

Internet Explorer 7: Irritation of the Day
Copyright 2004 – 2010 Joseph C Dolson, Accessible Web Design