Obviously, using relative URLs will work, but I’m generally reluctant to use them in any CMS (Content Management System), knowing that I may later want to provide access to that content elsewhere on the site. One of the luxuries of a CMS is the ability to use a single source for content which is used in multiple locations, after all — but I don’t much like paying for that with broken links.

However, and especially with a larger web site, it’s not exactly a lot of fun to have to either do a big search and replace or manually run through and replace URLs at the time of launch.

Fortunately, WordPress’ shortcodes API provides an insanely easy way to get around this.

Add this to your theme’s functions.php file:

add_shortcode('url','home_url');

If you’re not comfortable editing your functions.php file, you can also download it as a plug-in.

This very, very short line of code will provide you with the simple inline shortcode [url], which will provide (obviously) the home URL for your WordPress web site.

You can use this in any page or post when you know the URL will be changing like this: <a href="[url]/pretend-page/">.

Even if you’re not planning on moving your web site, it’s clear that typing those five characters is probably a much faster way of getting your home URL than typing it out!

Quick Tips: URLs in WordPress development sites
Copyright 2004 – 2011 Joseph C Dolson, Accessible Web Design

In fact, browser’s allow you a great deal more control than simply size. Modern browsers can give you extensive control over website text, including dictating background colors, text color, base text size, minimum text size, and link attributes. This post is intended to provide a quick overview of the specific controls for most modern browsers.

Most browsers have fundamentally the same options, although the interface and location in menus is quite variable. Some are more intuitive than others, and some interfaces simply don’t quite work right…

• Firefox, versions 2 and 3, Netscape 9
• Opera 9
• Safari 3
• Internet Explorer 6/7/8
• Internet Explorer, features specific to versions 7/8
• Internet Explorer, features specific to version 6
• Custom Stylesheets

Firefox, versions 2 and 3

Main Options: Tools » Options » Content

Options for text configuration in Firefox are split between three menus, as is the case in most browsers. In addition to the basic options (setting your default font and font size), you can open up menus to configure preferred browser colors, link behavior options, etc.

Advanced Options: Tools » Options » Content » Advanced

In the advanced menu, Firefox gives you the options to set preferred fonts for Proportional, Serif, Sans-serif, and Monospace fonts — this can be useful, if you know what they mean, but is primarily a decorative decision. However, they also give you the ability to set your minimum font-size AND to dictate whether or not web pages will be allowed to over-ride your own browser settings for font face. The minimum font-size can be a very powerful tool for accessibility — it allows you to easily prevent any website from ever producing text at a size you are unable to read.

Color Options: Tools » Options » Content » Colors

Text color options are fairly straightforward. Firefox doesn’t provide an extensive list of choices: you have only four generic objects you can choose color for. Links, visited links, text, and overall background. Importantly, however, it gives you the power to enforce your choice of text and background colors, overriding any web site text or background colors. (For the record, it does also override background images, so no worry that you’ll be left with black-on-black purely because the site is using an image for the background text.

Netscape 9 uses the same options menu as Firefox, and this will not change, since Netscape was officially killed as of March 1st, 2008. RIP, Netscape.

Opera 9

Basic Options: Tools » Preferences » Web Pages

The options in Opera 9 are much the same as Firefox, with a significantly different organization — and a couple of glaring omissions. The first omission noted is that while Opera provides you with the option to change the default background color, it does not give the option to change the corresponding default text color. This could easily cause problems, and makes it much more difficult to choose as your preference a light-on-dark color scheme, for example. The second omission is the lack of an option to have Opera override the text colors set by the web site. The options provide are merely to configure pages without a specific style applied — leaving you with less than ideal options when it comes to preferences on a less than ideal site. In general, the basic options are extremely weak in Opera.

Advanced Options: Tools » Preferences » Advanced » Fonts

The advanced options in Opera, while providing extensive options for configuring font colors, sizes, and faces, are perhaps a bit confusing to operate. They may be a bit on the overwhelming side for some users. However, they do also give you a lot of choices. You’re presented with a list of 23 separate types of on-page text which you can modify. Rather than simply setting one base font size or face, you can individually configure settings for browser menus, toolbars, web page text, headings, and form input.

The one complication is that not all fields give you the same set of options. While at first glance, it’s very nice that they provide options to change browser menus, in fact they have not provide the option to change the text size for those elements. Ah, well. The menu to configure those text elements which are fully configurable is straight-forward and logical.

How these text presentation choices actually function, however, is perhaps a little bit mysterious. It’s not 100% accurate to say that these are choices specific to text elements. The organization doesn’t make this clear, and there’s no text to describe it, but if you change the option “Web page normal text,” this will effect all text on the page. This option appears to be inclusive of all the element-specific configurations expressed below. Changing this option will override whatever text-size choices the website has made. This is not apparently true of the other options: changing the specified size for h1 did NOT override the website specifications in my testing.

Safari 3.0 for Windows

Main Options: Edit » Preferences » Appearance

The basic options in version 3.0 of Safari are pretty simple, at first glance. You can pick the basic options (font face and font size) for standard and fixed-width fonts. If you want to change the default font size to one of the options provided (9-14, 16, 18, 24, 36, 48, 64, 72, 96, 144 or 288 pixels), you simply select that size and you’re set. If you want a size not in that list, however, you’re in for a surprise.

First, Safari 3 for Windows does not provide any kind of control to save or commit your changes. They are intended to be committed immediately, with no need to save. This is counter-intuitive in the Windows operating system paradigm, particularly when making a change which is not immediately visually apparent. In the case of font changes, fortunately, as long as you have a web page open behind the control panel, you will see the results immediately.

But…if you type in the size you would like to see (in the editable text field in the upper right corner), it does not immediately take effect. This is because the change is actually implemented as soon as you remove focus from the text box. So, if you edit the text box manually and then close, the change will not be saved. If, instead, you edit the text box and then move the focus to any other field, your edit will then be committed.

The other option for freely changing text size is a vertically oriented slide control. This would be reasonably logical if it weren’t for the list of font sizes right next to it — the select control is listed from smallest to largest, but the slide control moves the opposite direction: the largest sizes at the top. Still, once you get the hang of the controls, it’s not difficult — just not really intuitive.

Advanced Options: Edit » Preferences » Advanced

The Safari advanced options provide only one additional text refining feature: the ability to set the minimum font size rendered. This is also where you can attach a custom stylesheet; but this type of feature will be discussed later. You may also note at this point that Safari offers no options for altering text colors, background colors or link colors.

Internet Explorer 6/7/8

Main Options: Tools » Internet Options » General » Fonts

The general font options in all version of Internet Explorer are quite basic — the only option available is to choose the font faces which will be provided for web page or plain text fonts. Straight forward, simple — and doesn’t do very much. For the most part, this is not likely to provide any additional accessibility, unless you happen to spend a lot of time on the web sites which have not specified a font face and have difficulty reading Times New Roman.

“Accessibility” Options: Tools » Internet Options » General » Accessibility

I put this section into quotes because I find the categorization of these options as being specifically “accessibility” options is a bit specious. What is actually provided under the accessibility menu are the options for allowing Internet Explorer to use your color and font settings to override web site settings. It should be noted that Internet Explorer allows you to ignore the font sizes specified on a web page, but does NOT allow you to change your own base font setting. (You can change this setting in your Windows appearance options, and it will effect web pages if the “Ignore Font Sizes” setting is checked.)

One sadly missing feature in all versions of Internet Explorer is the ability to set a minimum font-size — a feature which, in my opinion, adds great value to other browsers.

Internet Explorer 7/8

Colors Options: Tools » Internet Options » General » Colors

With Internet Explorer 7 and, so far, version 8 as well, the color choice menu has been redesigned from version 6. It has not been designed for the better, mind you. The interface is, to say the least, confusing. There are two check boxes in the new interface: “Use Hover Color”, and “Use Windows Colors”. “Use Hover Color” is fairly straightforward, although the way the interface is designed makes it unclear what color will in fact be used.

“Use Windows Colors,” however, is quite confusing. Unfortunately, if you have the option checked, the color selections are grayed out: giving you, in effect, no idea what “Windows Colors” will actually be. This may not be a problem in a default set up; but if you have changed your Windows Color, you may have no idea what to expect. When you uncheck the option, the color fields once again light up and give you your options to change.

Internet Explorer 6

Colors Options: Tools » Internet Options » General » Colors

Although fundamentally a very similar interface to the later versions, the color selection tools in IE 6 are, to me, much clearer than the later events. The grouping of features makes more sense, as does the indication of current defaults — which are at least available for link colors, if not for text and background colors.

One of the biggest problems, in my opinion, with the design of the Internet Explorer interfaces (all of them) is that rather than giving you the option to override web page settings at the same time you establish your settings, you have to create the settings and set the override selection in separate menus. In IE 7 and 8, adding insult to injury, the interface takes up space to link to instructions on how to ignore presets — space which could just as easily have been occupied by a checkbox to perform that action.

Custom Stylesheets

Most browsers allow you to attach your own custom style sheet. These style sheets use the Cascading Style Sheets format to allow you very fine control over how web sites you visit will display. They are, however, somewhat beyond the skill level of the average web user. Nonetheless, it’s valuable to know that the feature is available — if you are unable to enable your browser to provide what you need, you may be able to accomplish it with custom styles.

Opera Custom CSS: Tools » Quick Preferences » Edit Site Preferences » Display

The richest options available at this time are for the Opera browser. Opera allows customization on a site-specific level, allowing you to specify detailed characteristics for each site you visit.

Firefox Custom CSS: Complicated by hand, easy with plugins…

In it’s default installation, Firefox simply doesn’t offer a practical way to install custom styles. However, the easy extensability of Firefox through browser add-ons solves this problem readily. The most popular and easiest to use option is the Stylish add-on, which provides functionality to add custom styles at the site level or the global level. Additionally, Stylish maintains an online repository of user-created styles.

Safari Custom CSS: Edit » Preferences » Advanced

You’ve already seen this menu above, and it seems fairly straightforward. I will say, however, that I had a great deal of difficulty managing style sheets. The behavior of the interface was quite buggy. It’s difficult to describe, except to say that the differentiation between selecting to choose a style sheet and loading a new style sheet was extremely weak. It was not uncommon for them to behave in a different manner from what I expected. Altogether, at this time I’d say that the functionality is present, but at least in my installation, nearly unusable.

IE 6/7/8 Custom CSS: Tools » Internet Options » General » Accessibility

Unlike Opera by default and Firefox with the Stylish plugin, Internet Explorer offers only a single global custom stylesheet to be added. Nonetheless, there’s a lot you can do with global styles: and at least the interface works.

Conclusion

Most modern browsers provide the user with the ability to set their preferred default font size, text and background colors, and link colors and decoration. Some browser provide much richer features than that, allowing site-specific options and setting a minimum base font size to prevent microscopic text. In general, browser options tend to be richer and more reliable than the same functionality provided by any web-site based text widget; but may be significantly less apparent to the user.

Refining Text Presentation with your Web Browser: Windows
Copyright 2004 – 2011 Joseph C Dolson, Accessible Web Design

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 – 2011 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 – 2011 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 – 2011 Joseph C Dolson, Accessible Web Design

Setting up a blog through Blogger is one of the cheapest services I provide – if you want nothing more than a basic template as provided by Blogger, I’ll do the set up for you for a very reasonable cost. For original designs and other more extensive needs, obviously, the price increases.

Tips on Blogging with Blogger
Copyright 2004 – 2011 Joseph C Dolson, Accessible Web Design