The Code

Let's say we have the following form fields:

<div>Name: <input type="text" name="name"></div>
...
<div><input type="radio" name="subscribe"> Yes &nbsp;
<input type="radio" name="subscribe"> No</div>

In order to add the <label> tags, we'll need to add ID attributes to the <input> tags. The attributes can be set to whatever we want, as long as every input tag has a different ID value.

<div>Name: <input type="text" name="name" id="name"></div>
...
<div><input type="radio" name="subscribe" id="subscribe_yes"> Yes &nbsp;
<input type="radio" name="subscribe" id="subscribe_no"> No</div>

The <label> tags then get added around the text label with the for attribute set to the corresponding <input> tag's ID attribute.

<div><label for="name">Name:</label> <input type="text" name="name" id="name"></div>
...
<div><input type="radio" name="subscribe" id="subscribe_yes"> <label for="subscribe_yes">Yes</label> &nbsp;
<input type="radio" name="subscribe" id="subscribe_no"> <label for="subscribe_no">No</label></div>

Making Sure the Label Works

When posting code to a website, its good practice to make sure everything works as expected. It's very easy to mistype the attribute values so they don't match or to forget some part of the code. Another common issue that may come up is when multiple form fields are given the same ID attribute.

An easy way to verify the <label> tags are functioning properly is to click the corresponding text labels. If the flashing text bar is placed in the corresponding form field, as shown in Figure 1, we're good. Likewise, radio buttons will be selected as we click their labels.

Figure 1. Clicking the Text Labels

Conclusion

With the <label> tags in place, visitors can now click the corresponding field labels to place focus on the field of interest. Plus, the form will be more accessible to those using assistive technologies such as screen readers since the label will be read aloud when focus is placed on the fields.

Base Code

Last week (Using JavaScript to Dynamically Generate the Username within an HTML Form) we utilized the first and last name fields of an HTML form to generate a username with JavaScript.

<form method="post" name="form" action="">
<div><label for="fname">First Name: </label><input type="text" name="fname" id="fname" /></div>
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" onblur="
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
     var username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
     username = username.replace(/\s+/g, '');
     username = username.replace(/\'+/g, '');
     username = username.replace(/-+/g, '');
     username = username.toLowerCase();
     document.form.username.value = username;
}" /></div>
<div><label for="username">Username: </label><input type="text" name="username" id="username" /></div>
</form>

Updated Code

The code works for the most part. However, there may be issues with users with short last names. If we're looking for a username that's at least five characters and a login is being created for Lama Su, we'll need to perform an extra test to see if the last name is at least four characters long. If it is, the username would be created as normal.

...
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
     var username = '';
     if(document.form.lname.value.length >= 4) {
          username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
     }
     username = username.replace(/\s+/g, '');
...

For those with shorter last names, we use the entire last name, plus up to three letters of the first name.

...
     if(document.form.lname.value.length >= 4) {
          username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
     } else {
          username = document.form.fname.value.substr(0,4) + document.form.lname.value.substr(0,49);
     }
     username = username.replace(/\s+/g, '');
...

Final Code

Adding the following code to an HTML file should provide a working example of the JavaScript solution.

<form method="post" name="form" action="">
<div><label for="fname">First Name: </label><input type="text" name="fname" id="fname" /></div>
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" onblur="
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
     var username = '';
     if(document.form.lname.value.length >= 4) {
          username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
     } else {
          username = document.form.fname.value.substr(0,4) + document.form.lname.value.substr(0,49);
     }
     username = username.replace(/\s+/g, '');
     username = username.replace(/\'+/g, '');
     username = username.replace(/-+/g, '');
     username = username.toLowerCase();
     document.form.username.value = username;
}" /></div>
<div><label for="username">Username: </label><input type="text" name="username" id="username" /></div>
</form>

Conclusion

The updated code may be crude, but it gets the job done. When creating a login for someone with a short last name, the username will include more of the first name. There are more improvements that could be made. We could, for example, dynamically include letters from the first name based on how many characters are needed to fulfill the five character minimum. Who knows, maybe that will be a topic for a future post.

Base Code

When creating login accounts for a website's members only section, a common format for the username is to use the person's first initial and last name. So, let's say our form contains fields for the first name, last name, and username. Of course, the form would need more fields, a password field for example, but we'll keep things simple.

<form method="post" name="form" action="">
<div><label for="fname">First Name: </label><input type="text" name="fname" id="fname" /></div>
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" /></div>
<div><label for="username">Username: </label><input type="text" name="username" id="username" /></div>
</form>

Adding JavaScript

As it stands, those filling out the form will need to manually complete all three fields. But, with a little JavaScript magic, we could dynamically create a username once the first and last name is known. Since forms are typically filled out from top to bottom, it's a safe bet that we'll have what's needed once the last name is filled out. So let's add an onblur event to the last name field.

...
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" onblur="" /></div>
...

Before doing anything, we need to check that the first and last name was entered. We should also make sure the username hasn't already been entered.

...
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" onblur="
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
}" /></div>
...

Now we'll grab the user's first initial and last name and merge them for the username.

...
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
     var username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
}" /></div>
...

The code so far will work with most names. However, there may be issues with names containing apostrophes, hyphens, or spaces. So let's add some code to remove unwanted characters.

...
     var username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
     username = username.replace(/\s+/g, '');
     username = username.replace(/\'+/g, '');
     username = username.replace(/-+/g, '');
}" /></div>
...

Before inserting the username into the form, let's also make everything lower case.

...
     username = username.replace(/\s+/g, '');
     username = username.replace(/\'+/g, '');
     username = username.replace(/-+/g, '');
     username = username.toLowerCase();
}"/></div>
...

Once the username is formatted as needed, we just need to store the results into the username field.

...
     username = username.toLowerCase();
     document.form.username.value = username;
}"/></div>
...

Final Code

Adding the following code to an HTML file should provide a working example of the JavaScript solution.

<form method="post" name="form" action="">
<div><label for="fname">First Name: </label><input type="text" name="fname" id="fname" /></div>
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" onblur="
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
     var username = document.form.fname.value.substr(0,1) +      document.form.lname.value.substr(0,49);
     username = username.replace(/\s+/g, '');
     username = username.replace(/\'+/g, '');
     username = username.replace(/-+/g, '');
     username = username.toLowerCase();
     document.form.username.value = username;
}" /></div>
<div><label for="username">Username: </label><input type="text" name="username" id="username" /></div>
</form>

Conclusion

With the JavaScript code in place, those filling out the form will have an easier time. Plus the username entered is more likely to match the formatting guidelines you have in place. Of course, it's still necessary to double check the username with a server-side language such as PHP. You'll also need to make sure the username doesn't already exist.

Background

Back when IE8 was released, Microsoft added the Compatibility View which emulates IE7. The option was introduced to help display websites which would normally break in the new version of the browser. This special view was enabled by clicking the Compatibility View button near the address field (see Figure 1).

Figure 1. Compatibility View Button

Now, with IE9, the question is what happens when Compatibility View activated? Does it still show IE7 or IE8? While digging for the answer, something better popped up—the Developer Tools panel.

Switching Browser Versions

The Developer Tools panel is what gives us the option for switching between the different versions of the browser. To access the panel,

1. Click the Tools button (see Figure 2)
2. Click F12 developers tools
   • As the option's name suggests, the F12 key also opens the Developer Tools panel

Figure 2. Tools Button

With the panel open, we can switch browser versions by changing the Browser Mode (see Figure 3).

Figure 3. Browser Mode Option

Conclusion

Using a single browser, we can now see how our website(s) function in Internet Explorer 7, 8, and 9 and adjust our CSS and HTML code accordingly. If only Microsoft would have included IE6 into the mix. But then again, it might be better to forget that version ever existed.

Hard-coded Date Format

WordPress theme developers seem to utilize code like the following when displaying content that has dates, such as posts and comments:

<?php the_time("M d, Y"); ?>

However, as discussed last week (Choosing the Date Format in WordPress Themes: Let's Give Control Back to the User), the format inside the_time() function prevents users from changing the date format, unless they modify the theme files. Well, we can't use the_time() function without some kind of format. Leaving it blank only gives the time a post was published. So what about the_date() function?

At first glance, the_date() seems to work fine. But, upon closer inspection the function has some "odd" behavior when a page has multiple posts from the same date—only the first post gets the date. The rest have a blank space where the date should be.

Alternate Solution

For the comments section of our blog, the comment_date() function works perfectly. The date is always displayed; even if there are multiple comments on the same day. To use the date format set under the WordPress admin panel, we just need to leave the parameters blank.

<?php comment_date(); ?>

Maintaining the user's format for posts is a little trickier. To avoid the issue with multiple posts on the same day, we'll use the_time() function. The get_options() function can then be used to get the date format from the admin panel.

<?php the_time(get_option('date_format')); ?>

Conclusion

Now, there may be areas where it makes sense to hard code the date format. When someone's viewing the blog archive by month for example, the page header text only needs to show the month and year. But the majority of the dates can utilize the_time() function in conjunction with get_option()…or the comment_date() function for comments posted to the blog.

Now, there may be reasons for theme developers to specify the date format, but they're probably not in the best interest of the user. Here are some reasons not to hard code the date:

• Give Users the Control — themes users have different wants and needs. The more control they have over the theme used on their website to meet those needs, the better. As mentioned previously (You Haven’t Even Started Blogging and You Already Have a Typo), there are quite a few themes that incorrectly list dates using the ordinal format (ex: January 16th, 2012). It would be nice if the user could modify the format without editing the theme files.
• Increase Ease of Maintenance — WordPress makes it relatively easy to edit theme files. However, it's much easier to change the date format under the admin panel versus replacing all the hard-coded references. Plus, if a user modifies the theme files, they may need to do it all over again whenever new versions of the theme are released.
• Prevent Inconsistencies — since a theme is made up of several PHP files, there's a greater chance for the date to be coded differently from page to page. One may list the month as three letters while another may spell out the month. Utilizing WordPress' built-in feature to maintain dates is an easy way to remain consistent.
• Match Their Brand — some organizations have spent a fair amount of time developing a style guide for their content. These guidelines may describe how to format things like dates so that there is consistency throughout the website, marketing materials, etc.

Conclusion

Hopefully this was enough to convince the theme developers out there that relinquishing the control over the date is in the best interest of the user. Let's utilize WordPress' built-in feature and stop making users edit theme files just to change the date format.

If you're not swayed, I would love to hear why hard-coding the date format into the theme is the preferred option. Or maybe there are some additional arguments for letting the user decide the format. Either way, please enter your comments below.

Note: for those wanting to utilize the date format set through the WordPress admin panel, you'll want to come back next week. We'll discuss some of the options available for getting the date and things to watch out for.

Before getting to the question at hand, let's look at the difference between single and double quotes.

Background

In PHP, quotes are used to indicate that something is a string. For example, the content between the double quotes below is considered a string.

print "PHP is very useful for displaying content to the screen. If you make websites, PHP may be a great solution for you.";

Well, you may have noticed that there were a few keywords throughout the string. Without the quotes, PHP would have a difficult time knowing what do with the "if" for example. Should it be a string of an if() construct? So we use quotes around the string to prevent PHP from throwing an error.

Also, the string could have been surrounded with single quotes and it works as expected. However, if we plan to add something to the string that needs to be interpreted by PHP, such as a variable, we need to use double quotes.

$customer_name = 'Sam';
print "Hello $customer_name";

Using single quotes in the above print statement would display "Hello $customer_name" instead of "Hello Sam".

Why Single Quotes Are More Efficient

If double quotes allow us to do more with strings, why would we ever using single quotes? Well, the thing about double quotes is that PHP needs to look at everything inside the string before displaying it; whether or not the string contains variables. Single quotes on the other hand, are displayed as is. PHP doesn't really look at what's inside requiring less processor time.

Of course, we most likely won't notice the difference between using single vs. double quotes since the effect is minimal, unless we were working with millions of strings.

Problem with Single Quotes

So with the differences between single and double quotes in mind, let's talk about the issue alluded to earlier with using single quotes. If our program has dozens or hundreds of lines which go back and forth between single- and double-quoted strings, what happens when someone adds a variable or some other character which doesn't work from within single quotes like the new line character ("\n")? Well naturally, that content won't display as expected.

The fix for the problem may not be apparent if they've been adding the content in question elsewhere and it works just fine. We've all probably had one of those days where things don't quite click. We may search hours because we're looking at the wrong thing. Maybe we're trying to figure why a variable doesn't contain data so we trace it throughout the program. But in the end, we discover that variable name was misspelled.

Conclusion

So is it better to avoid a potential pitfall…or do we opt for keeping the code streamlined? In the end, that's a question that needs to be answered by you and/or your team. For what it's worth, I typically prefer keeping code as clean as possible. So using single quotes when possible is my option of choice.

Let's say we have an array of our customer's favorite movies.

<?php
$movies_to_display = array('Star Wars', 'Book of Eli', 'Avatar', 'Star Trek', 'Matrix');
?>

To display the movies as a comma-separated list, we might utilize a foreach() loop.

<?php
print '<div>';
foreach($movies_to_display as $curr_movie) {
     print "$curr_movie, ";
}
print '</div>';
?>

But that displays an extra comma at the end of the list. One way to avoid the unwanted character is to use a for() loop instead.

<?php
print '<div>';
for($i=0; $i < count($movies_to_display); $i++) {
     print ($i==0) ? $movies_to_display[$i] : ", $movies_to_display[$i]";
}
print '</div>';
?>

The first time through the loop (when $i equals zero), only the current value is displayed. Otherwise it displays a comma, space, and then the value. Now the list is displayed without the extra comma.

Note that the above code uses the Ternary Operator (?:) instead of the standard if/else structure. For more information about how the operator works, check out my previous post titled "Utilizing the Short-hand if() within a PHP String."

Using implode() Instead

As with most things in PHP, there are many other solutions which involve looping constructs like foreach(), while(), etc. However, there is a more efficient way. Unless the loop is doing more than displaying the list, we could use implode() instead.

<?php
print '<div>' . implode(', ', $movies_to_display) . '</div>';
?>

The first argument of the implode() function determines what's added between each array value. So what if we need to display the values as an HTML list? Well that's pretty easy to do with a little extra code before and after the implode().

<?php
print '<ul><li>' . implode('</li><li>', $movies_to_display) . '</li></ul>';
?>

Conclusion

Although loops can be modified to display the data as we want, there are alternatives which may be better to suited for our needs. Displaying an array of items separated by some character(s) is one of those times. So save yourself a few lines of code and implode() the array instead.

Okay, there are places where it makes sense to post an employee's e-mail address, such as a biography page. However, when a customer isn't necessarily looking to contact a specific staff member, utilizing a generic e-mail address might be the answer. For example, organizations could create an e-mail address where customers can ask questions about the website. Another could be utilized for the Contact Us page mentioned earlier. Instead of listing Bob, Mary, and Scott's contact information separately, an address like ContactUs@mywebsite.com could be posted. Then if Bob leaves, it has no effect on the website.

Additional Benefits

In addition to limiting the amount of change, aliases can distribute incoming messages to the entire project team. So the ContactUs e-mail can still be sent to Bob, Mary, and Scott. There's no need for anyone to forward messages since that's done automatically.

Since the incoming messages are sent to one or more personal e-mail accounts, there is no need for the recipients to check a separate e-mail account. The messages appear with all his/her other messages.

Creating an Alias

Setting up an e-mail alias will depend on the service provider. Check with the host for the organization's website or where the organization's domain names are registered through. If they allow for the creation of e-mail aliases, the organization's website address can be used for the alias, helping to maintain the organization's brand.

For those service providers that allow aliases, they likely have a form asking what to use for the alias; ContactUs@mywebsite.com for example. Then there should be a field for entering who the incoming messages should be forwarded to.

Conclusion

Once the ContactUs@mywebsite.com address has been posted to the website, we shouldn't need to worry about staff members leaving the organization. Who the alias sends messages to will need to be updated, but the website doesn't need to be modified. And for those who saved the e-mail to their address book won't be emailing an address that may not exist anymore…or a potentially disgruntle employee.

For those of us who run a blog or manage a website, there's a good chance that we've seen form spam before…and probably boat loads of it. There are options for limiting the amount of spam, such as installing a CAPTCHA or some other user test. But nothing is 100% effective. In the end, if we can prevent our customers from seeing that spam, we're in good shape.

The benefit of blogging software, like WordPress, is we are given the capability to moderate comments sent through the website. If everything checks out, we just need to click a button to approve it. A problem with moderating comments, however, is the delay. Even if we're constantly monitoring the blog, there is still going to be some kind of delay before the comments go live for everyone to see.

To mitigate the delay, WordPress gives us an option to automatically go live with comments from anyone who has had comments approved in the past. For example, if Sally Somebody leaves a comment and it's approved, all future comments from Sally will be automatically posted to the website.

Having WordPress automatically approve comments is an excellent feature, especially when there is a lot of back and forth between visitors to the blog. The downside is that all a spammer needs to do is figure out the e-mail address and name of someone who posted comments. There is no IP address check or anything extra being done to make sure they are the same person.

There are probably other ways to deal with this issue, but if we're looking for quick solution, we can require that all comments be moderated by the following steps:

• Log into the admin area for the blog
• Click Settings
• Click Discussion (see Figure 1)
• Check the box which says "An administrator must always approve the comment" (see Figure 2)
• Click Save Changes

Figure 1. Discussion Menu Option

Figure 2. Checkbox Option to Prevent Auto-Approve

Conclusion

Disabling the auto-approve feature in WordPress may not beneficial for everyone. For example, if you receive hundreds or thousands of comments per day, manually approving those comments may be too much hassle. But if spammers are overwhelming the comments feed by pretending to be one of your regular visitors, you have another option for stopping them.

If you know of other ways to prevent this issue, I would love to hear your feedback in the comments section below. For example, maybe there's a plugin that forces WordPress to validate the visitor's IP address against their previous comments…

The Problem

Let's say we're tasked with getting the open anchor tag for the "About Us" link from the code below. Note that there is more code, but we'll keep things simple.

<?php
$code_from_website = '...ul id="Menu1"><li><a href="/about/" onmouseover="ShowMenu(\'Menu1\')" onfocus="ShowMenu(\'Menu1\')" onmouseout="HideMenu()" onblur="HideMenu()">About Us</a></li><li><a href="/about/history.php" onmouseover="ShowMenu(\'Menu1\')" onfocus="ShowMenu(\'Menu1\')" onmouseout="HideMenu()" onblur="HideMenu()">History</a></li><li><a href=...';
?>

To extract the anchor tag, we'll need to figure out where the link text (About Us) starts and where the corresponding open anchor tag is. The print statements are there for us to see that we're getting seemingly valid values.

<?php
$position_linkText = strpos($code_from_website, 'About Us');
$position_anchorStart = strrpos( substr($code_from_website, 0, $position_linkText), '<a');
 
print "<div>Link Text Position: $position_linkText</div>";
print "<div>Open Anchor Position: $position_anchorStart</div>";
?>

With the new variables, we know where the open anchor tag is in the overall string. So let's grab the code and display the result.

<?php
$length_openAnchor = $position_linkText-$position_anchorStart;
$openAnchorCode = substr($code_from_website, $position_anchorStart, $length_openAnchor);
 
print "<div>Open Anchor Tag Length: $length_openAnchor</div>";
print "<div>Anchor Code: $openAnchorCode</div>";
?>

The first print statement works as expected, but the second one doesn't seem to display anything. So what went wrong? Everything else displays fine…

Well, if we think about; the answer is obvious. The $openAnchorCode variable contains HTML code for to open an anchor tag. What happens if display an anchor tag without a text label? We get a hidden anchor which is only visible by looking at the source code. With that in mind, we just need to make one small change to our code.

<?php
print "<div>Anchor Code: " . htmlentities($openAnchorCode) . "</div>";
?>

Conclusion

The moral of the story is that we need to be mindful of what we're trying to display. If the output contains HTML tags, or anything that can be interpreted by the browser, mysterious things may happen. We'll end up wasting time trying to figure out where the program went wrong…and most likely looking in the wrong place for the fix.

Background

Let's say a client sent a few e-mails containing 20 or so files. The files need to be saved as PDFs in the stakeholder meetings page under the corresponding downloads folder (see Figure 1). For example, if the file is for the November 2011 meeting, the PDF should be saved to the "2011-11" folder.

Figure 1. Example Website Structure

With the destination folder being several directories deep, it takes quite a few clicks to save each of PDF where we want it…and Figure 1 doesn't even show the other folders that we may need to click through to get to the base website folder. To speed things up, let's create a shortcut which goes directly to the destination folder.

Utilizing a Shortcut

On a Windows computer, we just need to drag the "downloads" folder, while holding the Alt key, to a place that's easily accessible—such as the desktop. We should now have a folder shortcut like the one shown in Figure 2.

Figure 2. Shortcut to the Downloads Folder

Now, instead of clicking folder after folder, we can go to the desktop and click the shortcut which magically transports us to the destination folder.

Conclusion

There may be more efficient ways to get the PDFs where they need to be without a shortcut. We could, for example, move all the files to where they need to be on the website and convert them there. Some software defaults to the current folder when asking where to save the PDF. After the PDF is created, we could delete the originating file. We could also save the PDFs to an easily accessible folder (like the desktop). Then just drag the files over to the downloads folder when done.

In the end, we can use whatever method works best for the given scenario.

In case it isn't obvious, you'll need a Google Analytics account and the tracking code must be embedded within your website for the filter option to work. Also, the method for accessing the filters depends on which version of the analytics admin panel you're using. As far as I know, there are two versions of the panel which will be discussed in a moment. There may be other variations, but I can only talk about what available to me since I'm not on the Google payroll. Let's start with the new beta version.

Google Analytics Beta

To prevent our visits from being tracked, we need to:

1. Log into Google Analytics
2. Click the options icon near the top (see Figure 1)
3. Click the link for the analytics account the filter applies to
4. Click Filters (see Figure 2)
5. Click New Filter (see Figure 3)
6. Name the filter
7. Select traffic from the IP addresses (see Figure 4)
8. Enter the IP address to exclude
9. Choose the website profile(s) the filter applies to and click Add
10. Click Save

Figure 1. Options Icon

Figure 2. Filters Tab

Figure 3. New Filter Button

Figure 4. Traffic from the IP Addresses Option

Old Google Analytics

The steps for filtering by IP address are fairly similar in the old version:

1. Log into Google Analytics
2. Click Filter Manager (see Figure 5)
3. Click Add Filter (see Figure 6)
4. Follow steps 6 – 10 of the beta directions

Figure 5. Filter Manager Link

Figure 6. Add Filter Link

Keeping the Filter Updated

With the filter(s) in place, we can now visit our website(s) as much as we want without worrying about messing up the stats. Unfortunately, the unwanted stats may not be blocked forever. From time to time, IP addresses may change. So we should check that everything's up to date as needed.

It would be nice if the filter feature provided a quick way to get our IP address and plug it into the necessary form fields. Since that's not the case, we'll need another way to get the information. Luckily there are many different options that could be used. For example, typing "my ip address" into the Google search box provides your public IP address.

Related Links

• How do I create a filter? — provides a more in-depth description of the filter feature in Google Analytics

So let's take final code from last week:

<?php
//IF THE FLAG HASN'T BEEN SET YET, SET THE DEFAULT
if(!isset($_GET['orderBy'])) {
     $_GET['orderBy'] = 'date_desc';
}
 
//FIGURE OUT HOW TO SORT THE TABLE
switch($_GET['orderBy']) {
     case 'first_name':
     case 'last_name':
          $sql_orderBy = $_GET['orderBy'];
          break;
 
     default:
          $_GET['orderBy'] = 'date_desc';
          $sql_orderBy = 'date DESC';
}
 
//GET THE LIST OF REGISTRANTS
$registrantList = '';
$sql = "SELECT first_name, last_name, date FROM 2011_registrants ORDER BY $sql_orderBy";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
     $registrantList .= '<tr><td>' . htmlentities($row['first_name']) . '</td><td>' . htmlentities($row['last_name']) . '</td><td>' . $row['date'] . '</td></tr>';
}
 
//DISPLAY THE CONFERENCE REGISTRANTS
print '<table cellpadding="3" cellspacing="1" border="1">';
print '<tr>';
print '<th scope="col">';
if($_GET['orderBy'] == 'first_name') { print 'First Name'; }
else { print '<a href="/registrants.php?orderBy=first_name">First Name</a>'; }
print '</th>';
print '<th scope="col">';
if($_GET['orderBy'] == 'last_name') { print 'Last Name'; }
else { print '<a href="/registrants.php?orderBy=last_name">Last Name</a>'; }
print '</th>';
print '<th scope="col">';
if($_GET['orderBy'] == 'date_desc') { print 'Date Registered'; }
else { print '<a href="/registrants.php?orderBy=date_desc">Date Registered</a>'; }
print '</th>';
print '</tr>';
print $registrantList;
print '</table>';
?>

If you haven't done so already, you may want to review last week's post (Sorting HTML Data Tables Using the Header Row with PHP) which briefly describes what each part of the code does. If you're still unsure about something, feel free to mention it in the comments section below…since there doesn't seem to be any questions, let's get rolling.

Updating the Code

To sort the columns in both ascending and descending order, we'll need a few more values for the order by flag. Let's start by adding them to the first name heading.

<?php
print '<th scope="col">';
if($_GET['orderBy'] == 'first_name')          { print '<a href="/registrants.php?orderBy=first_name_desc">First Name<img src="arrowUp.gif" alt="Ascending Order (A to Z)" /></a>'; }
elseif($_GET['orderBy'] == 'first_name_desc') { print '<a href="/registrants.php?orderBy=first_name">First Name<img src="arrowDown.gif" alt="Descending Order (Z to A)" /></a>'; }
else                                          { print '<a href="/registrants.php?orderBy=first_name">First Name</a>'; }
print '</th>';
?>

The table heading will now take one of three states:

1. If sorting first name in ascending order, display a link to sort in descending order
2. Else…if sorting first name in descending order, display a link to sort in ascending order
3. Else…display a link to sort by whatever the default order is for that column which will be ascending order for the first name

Note that the first two states contain an image that indicates the direction the column is being sorted. The third doesn't have an image since the data table is sorted by another column. Next we'll modify the other columns so they have the same setup.

<?php
//DISPLAY THE CONFERENCE REGISTRANTS
print '<table cellpadding="3" cellspacing="1" border="1">';
print '<tr>';
print '<th scope="col">';
if($_GET['orderBy'] == 'first_name')          { print '<a href="/registrants.php?orderBy=first_name_desc">First Name<img src="arrowUp.gif" alt="Ascending Order (A to Z)" /></a>'; }
elseif($_GET['orderBy'] == 'first_name_desc') { print '<a href="/registrants.php?orderBy=first_name">First Name<img src="arrowDown.gif" alt="Descending Order (Z to A)" /></a>'; }
else                                          { print '<a href="/registrants.php?orderBy=first_name">First Name</a>'; }
print '</th>';
print '<th scope="col">';
if($_GET['orderBy'] == 'last_name')           { print '<a href="/registrants.php?orderBy=last_name_desc">Last Name<img src="arrowUp.gif" alt="Ascending Order (A to Z)" /></a>'; }
elseif($_GET['orderBy'] == 'last_name_desc')  { print '<a href="/registrants.php?orderBy=last_name">Last Name<img src="arrowDown.gif" alt="Descending Order (Z to A)" /></a>'; }
else                                          { print '<a href="/registrants.php?orderBy=last_name">Last Name</a>'; }
print '</th>';
print '<th scope="col">';
if($_GET['orderBy'] == 'date')                { print '<a href="/registrants.php?orderBy=date_desc">Date Registered<img src="arrowUp.gif" alt="Ascending Order (Oldest to Newest)" /></a>'; }
elseif($_GET['orderBy'] == 'date_desc')       { print '<a href="/registrants.php?orderBy=date">Date Registered<img src="arrowDown.gif" alt="Descending Order (Newest to Oldest)" /></a>'; }
else                                          { print '<a href="/registrants.php?orderBy=date_desc">Date Registered</a>'; }
print '</th>';
print '</tr>';
print $registrantList;
print '</table>';
?>

We'll also need to modify the code for processing the order by flag.

<?php
//FIGURE OUT HOW TO SORT THE TABLE
switch($_GET['orderBy']) {
     case 'date':
     case 'first_name':
     case 'last_name':
          $sql_orderBy = $_GET['orderBy'];
          break;
 
     case 'date_desc':
     case 'first_name_desc':
     case 'last_name_desc':
          $sql_orderBy = substr($_GET['orderBy'], 0, -5) . ' DESC';
          break;
 
     default:
          $_GET['orderBy'] = 'date_desc';
          $sql_orderBy     = 'date DESC';
}
?>

Now when the flag is set to "date", "first_name", or "last_name"; the SQL query sorts the data by the selected column. But if the flag is set to "date_desc", "first_name_desc", or "last_name_desc"; it sorts by the column in descending order. Note that the substr() function is there to get the column name by chopping off the last five characters ("_desc"). The rest of the code is the same as last week.

Final Code

In the end, here is what the completed code looks like all together:

<?php
//IF THE FLAG HASN'T BEEN SET YET, SET THE DEFAULT
if(!isset($_GET['orderBy'])) {
     $_GET['orderBy'] = 'date_desc';
}
 
//FIGURE OUT HOW TO SORT THE TABLE
switch($_GET['orderBy']) {
     case 'date':
     case 'first_name':
     case 'last_name':
          $sql_orderBy = $_GET['orderBy'];
          break;
 
     case 'date_desc':
     case 'first_name_desc':
     case 'last_name_desc':
          $sql_orderBy = substr($_GET['orderBy'], 0, -5) . ' DESC';
          break;
 
     default:
          $_GET['orderBy'] = 'date_desc';
          $sql_orderBy     = 'date DESC';
}
 
//GET THE LIST OF REGISTRANTS
$registrantList = '';
$sql = "SELECT first_name, last_name, date FROM 2011_registrants ORDER BY $sql_orderBy";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
     $registrantList .= '<tr><td>' . htmlentities($row['first_name']) . '</td><td>' . htmlentities($row['last_name']) . '</td><td>' . $row['date'] . '</td></tr>';
}
 
//DISPLAY THE CONFERENCE REGISTRANTS
print '<table cellpadding="3" cellspacing="1" border="1">';
print '<tr>';
print '<th scope="col">';
if($_GET['orderBy'] == 'first_name')          { print '<a href="/registrants.php?orderBy=first_name_desc">First Name<img src="arrowUp.gif" alt="Ascending Order (A to Z)" /></a>'; }
elseif($_GET['orderBy'] == 'first_name_desc') { print '<a href="/registrants.php?orderBy=first_name">First Name<img src="arrowDown.gif" alt="Descending Order (Z to A)" /></a>'; }
else                                          { print '<a href="/registrants.php?orderBy=first_name">First Name</a>'; }
print '</th>';
print '<th scope="col">';
if($_GET['orderBy'] == 'last_name')           { print '<a href="/registrants.php?orderBy=last_name_desc">Last Name<img src="arrowUp.gif" alt="Ascending Order (A to Z)" /></a>'; }
elseif($_GET['orderBy'] == 'last_name_desc')  { print '<a href="/registrants.php?orderBy=last_name">Last Name<img src="arrowDown.gif" alt="Descending Order (Z to A)" /></a>'; }
else                                          { print '<a href="/registrants.php?orderBy=last_name">Last Name</a>'; }
print '</th>';
print '<th scope="col">';
if($_GET['orderBy'] == 'date')                { print '<a href="/registrants.php?orderBy=date_desc">Date Registered<img src="arrowUp.gif" alt="Ascending Order (Oldest to Newest)" /></a>'; }
elseif($_GET['orderBy'] == 'date_desc')       { print '<a href="/registrants.php?orderBy=date">Date Registered<img src="arrowDown.gif" alt="Descending Order (Newest to Oldest)" /></a>'; }
else                                          { print '<a href="/registrants.php?orderBy=date_desc">Date Registered</a>'; }
print '</th>';
print '</tr>';
print $registrantList;
print '</table>';
?>

With a few style sheet (CSS) declarations and a couple images, here is what our table might look like:

Figure 1. First Name Sorted in Ascending Order

Figure 2. Last Name Sorted in Descending Order

The Example

Let's say we have a MySQL table containing the conference registrations received so far and a tool has been developed for conference organizers to access the information. To make it easier for processing the registrations, the entries are listed by date submitted in reverse-chronological order. That way the newest orders appear on top.

The problem is that the conference organizers receive requests asking if a specific customer has registered. Having the information sorted by date makes it more difficult to find the customer in question. That's where providing an option to temporarily change the sort order can help. First, we'll need to look at the existing code.

Note that this post won't be showing the entire script and assumes that you have some familiarity to working with HTML, PHP, and MySQL. If you have any question, feel free to post them in the comments section below.

The Existing Code

First the registration information is pulled from the database, processed, and stored in the $registrantList variable to be displayed later.

<?php
//GET THE LIST OF REGISTRANTS
$registrantList = '';
$sql = "SELECT first_name, last_name, date FROM conference_registrants ORDER BY date DESC";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
     $registrantList .= '<tr><td>' . htmlentities($row['first_name']) . '</td><td>' . htmlentities($row['last_name']) . '</td><td>' . $row['date'] . '</td></tr>';
}
?>

Note that the information is sorted by the "date" field in descending order. We'll need to figure out how to change this on the fly later. For now, the data is displayed by date.

<?php
//DISPLAY THE CONFERENCE REGISTRANTS
print '<table cellpadding="3" cellspacing="1" border="1">';
print '<tr>';
print '<th scope="col">First Name</th>';
print '<th scope="col">Last Name</th>';
print '<th scope="col">Date Registered</th>';
print '</tr>';
print $registrantList;
print '</table>';
?>

The existing code is fairly straight forward, so hopefully everything makes sense. Let's move ahead to dynamically changing the sort order.

Dynamically Changing the Sort Order

As mentioned earlier, we want conference organizers to be able to sort the registrants as needed. To do that, we'll pass a flag through the program that indicates the column to sort by. So, let's add some links to the HTML table that displays the registrants. The "First Name" heading will look like:

<?php
print '<th scope="col">';
print '<a href="/registrants.php?orderBy=first_name">First Name</a>';
print '</th>';
?>

The link points to the same page we're currently modifying and passes a GET variable called "orderBy" when clicked. Links are also needed for the other headings.

<?php
//DISPLAY THE CONFERENCE REGISTRANTS
print '<table cellpadding="3" cellspacing="1" border="1">';
print '<tr>';
print '<th scope="col">';
print '<a href="/registrants.php?orderBy=first_name">First Name</a>';
print '</th>';
print '<th scope="col">';
print '<a href="/registrants.php?orderBy=last_name">Last Name</a>';
print '</th>';
print '<th scope="col">';
print '<a href="/registrants.php?orderBy=date_desc">Date Registered</a>';
print '</th>';
print '</tr>';
print $registrantList;
print '</table>';
?>

With the flag being passed, the script needs to be modified to process it. But we should probably make sure the flag exists first. If it doesn't, the value would be defaulted to the date in descending order.

<?php
//IF THE FLAG HASN'T BEEN SET YET, SET THE DEFAULT
if(!isset($_GET['orderBy'])) {
     $_GET['orderBy'] = 'date_desc';
}
?>

Since the GET variable could have been tampered with, we need to make sure the value is valid. Otherwise, the program may not function as expected or worse—damage the database.

<?php
//FIGURE OUT HOW TO SORT THE TABLE
switch($_GET['orderBy']) {
     case 'first_name':
     case 'last_name':
          $sql_orderBy = $_GET['orderBy'];
          break;
 
     default:
          $_GET['orderBy'] = 'date_desc';
          $sql_orderBy     = 'date DESC';
}
?>

In addition to the GET variable being sanitized, we now have a variable ($sql_orderBy) which will be used for the order by clause in the following SQL query:

<?php
//GET THE LIST OF REGISTRANTS
$registrantList = '';
$sql = "SELECT first_name, last_name, date FROM 2011_registrants ORDER BY $sql_orderBy";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
     $registrantList .= '<tr><td>' . htmlentities($row['first_name']) . '</td><td>' . htmlentities($row['last_name']) . '</td><td>' . $row['date'] . '</td></tr>';
}
?>

With all the code in place, visitors can now sort the data by clicking the column headings. But there's still one more thing to do. When sorting by first name, for example, the "First Name" heading doesn't need to be clickable any more. That can be fixed by hiding the link if the orderBy flag is set to "first_name".

<?php
print '<th scope="col">';
if($_GET['orderBy'] == 'first_name') { print 'First Name'; }
else                                 { print '<a href="/registrants.php?orderBy=first_name">First Name</a>'; }
print '</th>';
?>

As an added bonus, hiding the links provides a hint to which column the data is sorted by. We just need to do the same with the other columns.

<?php
//DISPLAY THE CONFERENCE REGISTRANTS
print '<table cellpadding="3" cellspacing="1" border="1">';
print '<tr>';
print '<th scope="col">';
if($_GET['orderBy'] == 'first_name') { print 'First Name'; }
else                                 { print '<a href="/registrants.php?orderBy=first_name">First Name</a>'; }
print '</th>';
print '<th scope="col">';
if($_GET['orderBy'] == 'last_name')  { print 'Last Name'; }
else                                 { print '<a href="/registrants.php?orderBy=last_name">Last Name</a>'; }
print '</th>';
print '<th scope="col">';
if($_GET['orderBy'] == 'date_desc')  { print 'Date Registered'; }
else                                 { print '<a href="/registrants.php?orderBy=date_desc">Date Registered</a>'; }
print '</th>';
print '</tr>';
print $registrantList;
print '</table>';
?>

Final Code

In the end, here is what the completed code looks like all together:

<?php
//IF THE FLAG HASN'T BEEN SET YET, SET THE DEFAULT
if(!isset($_GET['orderBy'])) {
     $_GET['orderBy'] = 'date_desc';
}
 
//FIGURE OUT HOW TO SORT THE TABLE
switch($_GET['orderBy']) {
     case 'first_name':
     case 'last_name':
          $sql_orderBy = $_GET['orderBy'];
          break;
 
     default:
          $_GET['orderBy'] = 'date_desc';
          $sql_orderBy = 'date DESC';
}
 
//GET THE LIST OF REGISTRANTS
$registrantList = '';
$sql = "SELECT first_name, last_name, date FROM 2011_registrants ORDER BY $sql_orderBy";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
     $registrantList .= '<tr><td>' . htmlentities($row['first_name']) . '</td><td>' . htmlentities($row['last_name']) . '</td><td>' . $row['date'] . '</td></tr>';
}
 
//DISPLAY THE CONFERENCE REGISTRANTS
print '<table cellpadding="3" cellspacing="1" border="1">';
print '<tr>';
print '<th scope="col">';
if($_GET['orderBy'] == 'first_name') { print 'First Name'; }
else { print '<a href="/registrants.php?orderBy=first_name">First Name</a>'; }
print '</th>';
print '<th scope="col">';
if($_GET['orderBy'] == 'last_name') { print 'Last Name'; }
else { print '<a href="/registrants.php?orderBy=last_name">Last Name</a>'; }
print '</th>';
print '<th scope="col">';
if($_GET['orderBy'] == 'date_desc') { print 'Date Registered'; }
else { print '<a href="/registrants.php?orderBy=date_desc">Date Registered</a>'; }
print '</th>';
print '</tr>';
print $registrantList;
print '</table>';
?>

If we don't use a fancy CMS (Content Management Systems) that maintains a revision history, managing the archive is our responsibility. This may sound like a daunting task, but once a process is established, it's not so bad. Of course, the magnitude of the archive will depend on factors like the size of the website, the frequency of the updates, and what's considered "worthy" for the archive. For example, if we're archiving files every time a typo is corrected, things might get a little unwieldy. But if we only archive code when structural changes are made, such as using a database instead of hard-coding the information…that's more manageable.

Archive Structure

Now we could just throw files to be archive into a folder and be done with it. But as we add more files, it's going to be difficult figuring out what's what. Instead, if we edited the index.php file under the "about" folder, the file would be saved to the "about" folder in the archive. Utilizing the same structure for the archive as in the website will make locating files faster.

File Names

The other thing to consider is that we may edit the index.php file under the "about" folder again. So we'll end up with multiple index.php files in the archive. The additional files could be renamed to index2.php, index3.php, etc. But if we're ever looking for something specific in the archives, it's going to be difficult knowing what's inside the files without opening them. So why not give our self some hints.

When archiving files, we can make notes within the file name. For example, we could add the date the file was archived along with a quick description of what changed. So instead of "index.php", the file might be renamed to "index (2011-11-07 before using a database to display staff info).php". The date, formatted as YYYY-MM-DD, is mostly used so that the file name sorts chronologically. The description would be whatever's necessary to indicate which version the file is.

Who the Post Is For

Before getting too far, it worth saying that this post is geared towards those who manually manage their website files. If you use a Content Management System (CMS), there's probably a built-in feature for maintaining multiple copies of a page as changes are being made. Now on to the topic at hand.

The Example

Let's say we need to update the staff page for an organization. The employee information is currently hard-coded into the page and we want the content to be pulled from a database. Before performing the updates, we'll duplicate the staff page.

Duplicate File: Same Directory

As with most things involving computers, there are multiple ways to duplicate files. The original file could be opened in Adobe Dreamweaver for example. Then use the Save As feature to create a file with a different name. We could locate the file on the hard drive and duplicate it with copy/paste. Or maybe we're using a magic wand…in the end we just need a way to get two files (ex: "staff.php" and "staff2.php"). Then we can modify "staff2.php" to utilize the database.

To see the changes, we upload the new file and manually type the address (ex: http://www.example.com/about/staff2.php). But what if the page being updated needs to be connected to other pages to function properly? We could modify all the pages so they work together on a test server…or we could save the duplicate file with the same name as the original.

Duplicate File: Different Directories

For more integrated pages, it may be more efficient to work on a file that's named the same as the original. For example, if the page we're editing displays resources based on criteria sent via the POST method, there may be several links/forms connecting to that page. We could modify all those connections on the test server, but it might be quicker to use the same file name for the duplicate file.

Of course, two files with the same name can't be stored in the same directory. Instead we'll create a directory for the files being modified. We just need to remember to move the file back when we're done.

Note: we might want to archive the old page before moving the updated file into the "live" directory. But we can talk more about that next week (Archiving Old Code after Major Updates).

Lately, I've been replacing old hard-coded Google Analytics code used to track external links and downloadable files with a call to a user-defined function. The function reviews the link information and adds custom tracking code as necessitated by what's being linked to (see Future Proofing Your Google Analytics Code for Tracking PDFs). The problem is that there's no way to differentiate the hard-coded solution and the results of the user-defined function.

If the page being updated was on a development server, some text could be added and displayed to the page. But with a live website, it's best to avoid the visitors from seeing the test. This is where HTML comments are handy. We just need to add the following to the page:

<!-- here -->

Since we're using comments, the word "here" doesn't get displayed to the screen. Instead, it can be found in the page's source code. The code can be viewed by:

1. Right-click the page which contains the HTML comment
2. Click
   • View Page Source for Firefox
   • View source for Internet Explorer

With the code window open, we just need to look for the text manually or by using the find feature (Ctrl + F). The HTML comment can be removed once we know we're viewing the updated code.

The Example

Let's say our website has a section listing upcoming events which might interest visitors. A subset of those events is posted on an annual basis. Updating the section typically consists of removing old entries and adding new ones as they are discovered. So how do we add a content archive?

Maintaining a Content Archive

Instead of deleting entries, as we may do for one-time events, the content could be hidden within the page using PHP comments. To demonstrate, here is the code for the upcoming events section:

...
<h1>Upcoming Events</h1>
<ul>
      <li><a href="http://uxweek.com/">UX Week</a> (San Francisco, CA; Aug. 23-26, 2011)</li>
      <li><a href="http://www.zendcon.com/">Zend PHP Conference</a> (Santa Clara, CA; Oct. 17-20, 2011)</li>
      <li><a href="http://aneventapart.com/2011/dc/">An Event Apart</a> (Washington, DC; Oct. 24-26, 2011)</li>
      <li><a href="http://futureofwebdesign.com/new-york-2011/">Future of Web Design</a> (New York, NY; Nov. 7-9, 2011)</li>
</ul>
<?php
/* EVENT ARCHIVE GOES HERE
...
*/
?>
...

Note the event archive between the open and close PHP tags (<?php ?>). Looking through the events listed above, UX Week needs to be moved to the archives:

...
<h1>Upcoming Events</h1>
<ul>
      <li><a href="http://www.zendcon.com/">Zend PHP Conference</a> (Santa Clara, CA; Oct. 17-20, 2011)</li>
      <li><a href="http://aneventapart.com/2011/dc/">An Event Apart</a> (Washington, DC; Oct. 24-26, 2011)</li>
      <li><a href="http://futureofwebdesign.com/new-york-2011/">Future of Web Design</a> (New York, NY; Nov. 7-9, 2011)</li>
</ul>
<?php
/* EVENT ARCHIVE GOES HERE
      <li><a href="http://uxweek.com/">UX Week</a> (San Francisco, CA; Aug. 23-26, 2011)</li>
*/
?>
...

In case it wasn't obvious, the UX Week entry was moved between the PHP comments (/* */). Once the page is uploaded to the server, the event information will no longer be sent to the browser. As an added bonus, we still have access to the old event information which can assist in keeping the calendar up to date.

Leveraging the Archive

With the archive in place, the content can be useful when looking for events. The archive contains the:

• Title of the events we normally post
• Website address where we'll likely find future event information
• Date information for the previous event which provides a clue to when the next one will be held; annual events tend to be held around the same time frame every year

As upcoming event information is found, we just need to pull the corresponding entry out of the archive, customize as necessary, and post it back to the visible list.

Caveats

Although the above technique may sound simple, there are things to watch out for. First, the web page needing the PHP comment archive must be able to run PHP. For example, the code may not function in a .html file. PHP files typically have a .php extension. You'll also want to make sure that PHP is installed on your server.

When moving old event information to the archives, you'll also need to be careful of entries that contain PHP comments. For example, the following would give some unexpected results:

...
<h1>Upcoming Events</h1>
<ul>
      <li><a href="http://aneventapart.com/2011/dc/">An Event Apart</a> (Washington, DC; Oct. 24-26, 2011)</li>
      <li><a href="http://futureofwebdesign.com/new-york-2011/">Future of Web Design</a> (New York, NY; Nov. 7-9, 2011)</li>
</ul>
<?php
/* EVENT ARCHIVE GOES HERE
      <li><a href="http://uxweek.com/">UX Week</a> (San Francisco, CA; Aug. 23-26, 2011)</li> /* PHP comments that will break the archive */
      <li><a href="http://www.zendcon.com/">Zend PHP Conference</a> (Santa Clara, CA; Oct. 17-20, 2011)</li>
*/
?>
...

If PHP comments don't work for whatever reason, you could look into other commenting options such as HTML comments.

Storing Content in a Separate File

Although this may be the more cumbersome method, there are situations where it works best. If an organization has a staff page for example, entries will need to be removed as people retire, obtain employment elsewhere, etc. The information could deleted. But if someone returns, their bio information would need to be re-written and posted online again. Since it's unlikely that the people will return, it doesn't make sense to comment out the content. Instead the bios could be stored in an offline archive.

For more short-term removals, HTML comments could be used to hide the content until it's ready to be shown.

Using HTML Comments

Hiding content within the page where it will eventually be posted is beneficial since it's right where it's needed. There's no hunting down an external file for the information. With HTML comments, content is hidden by surrounding it with the comment open and close delimiters:

<!-- This text will not be displayed -->

Once ready, the comment delimiters can be removed to show the content.

The downside of using HTML comments, however, is that the content isn't technically hidden. Someone just needs to view the page's source code and locate the content of interest. If that's a concern, PHP comments might be a better fit.

Using PHP Comments

If we're announcing a highly-anticipated product, we wouldn't want those HTML comments to expose the information before the big reveal. PHP comments, on the other hand, don't get sent to the browser. Plus the hidden content is still stored in the same page where it's eventually displayed. To hide multiple lines of text, the following syntax could be used:

<?php
/*
This line of text will be hidden.
This line will also be hidden.
*/
?>

Note that there are other ways to format PHP comments. More information can be found in the PHP Manual.

With how often dates are displayed in this way, it should be said that the "rd" part of the date is grammatically incorrect. If you don't believe me since…well I'm a web developer—not a grammarian; check out Writing Dates by Grammar Girl. According to the article:

"There are two kinds of numbers you can use to talk about a specific day: an ordinal number and a cardinal number. Cardinal numbers represent amounts like one, two, and three. Ordinal numbers represent a place in a series like first, second, and third."

The "rd" part may seem necessary to include. After all, we read the date as "October third, two thousand eleven." But going back to the Grammar Girl article, she says:

"When you're writing out a date like January 1, 2008 (in the American style), the day is a cardinal number. So you should never write January 1st, 2008."

So now that you know the error of your ways, you're probably wondering how to fix that WordPress template.

Correcting a WordPress Template

For those using WordPress and are able to edit the template, you can

1. Log into the admin panel
2. Click Appearance
3. Click Editor
4. Locate the files which contain the incorrect code for formatting the date
5. Fix the code
6. Click Update File

For example, the template file for a "Single Post" will likely contain a date reference. We just need to open single.php and look for code like:

<?php the_time('F jS, Y') ?>

and remove the "S":

<?php the_time('F j, Y') ?>

Note: you may want to backup the template files editing any code. That way if something breaks, you can go back to the previous working version. Also, I'm still learning the ins and outs of WordPress, so there's probably a better way to make changes to templates. Feel free to leave your suggestions in the comments section below.

Related Links

• WordPress Codex: Formatting Date and Time – provides the list of character codes for formatting how a date is displayed in WordPress.

The first thing you might think for printing multiple pages per sheet is to utilize both side of the paper. Although that would reduce the amount of paper used, it may be more hassle than it's worth…unless you have a duplex-capable printer. Instead we can utilize the "Pages Per Sheet" feature in Microsoft Word.

Let's say we have a four-page document to print using Word 2010. To print the entire document on a single sheet of paper, we would

1. Open the document in Microsoft Word
2. Click File (see Figure 1)
3. Click Print (see Figure 2)
4. Change the "1 Page Per Sheet" option to "4 Pages Per Sheet" (see Figure 3)
5. Click the Print button (see Figure 4)

Figure 1. File Menu

Figure 2. Print Option

Figure 3. Pages Per Sheet Option

Figure 4. Print Button

What About Older Versions of Word?

The Pages Per Sheet option has been available in Microsoft Word for a while. But if you're like me, you probably didn't notice the feature since it isn't accessible through Print Preview. The option is under the Print dialog box (see Figure 5 and Figure 6).

Figure 5. Pages Per Sheet Option for Word 2003

Figure 6. Pages Per Sheet Option for Word 2007

What If It's Not a Word Document?

If you're printing something that isn't a Microsoft Word document, you could convert. Copying and pasting content into Word usually works. If formatting is an issue, you could take screenshots of the content and paste them into Word. Of course, you may want to check if the software where the content originates from doesn't already have a Pages Per Sheet option.

When a picture fits well with your page content, it's probably best to include it on the page. Facebook usually locates important graphics embedded within the code. However, Facebook isn't perfect. For example, for one website I work on, Facebook only pulls in the images used for the navigation—not very useful. If you have similar problems or maybe you just don't want the picture to be included with the page, you can add the following <link> tag within the <head> section for your document:

<link rel="image_src" href="/images/custom_thumb.jpg" />

Note that the href attribute should contain the path to your image. With the files uploaded to the server and the <link> tag in place, Facebook should now show a thumbnail for your picture.

Allowing for Multiple Thumbnails

One downside of this method is that once Facebook finds a <link> tag, it doesn't look for any other images. If other thumbnails were coming up in Facebook, such as your logo, and you want visitors to use those thumbnails instead, you might need to remove the <link> tag when you're done. You could also consider adding multiple <link> tags:

<link rel="image_src" href="/images/custom_thumb.jpg" />
<link rel="image_src" href="/images/company_logo.jpg" />

Problem with Facebook Caching

Keep in mind that Facebook seems to cache images once they're directed to your page. So the <link> technique may not work if Facebook already knows about the page. There doesn't seem to be a way around the caching issue. I've tried clearing my browser's cache, using a different browser, and using another computer with no luck. If you know of a solution, please post a comment below.

Last week's post "Getting Your Projects Done Faster by Writing Less Code with the Short-hand if()" describes how to assign the resulting value to a variable, for example:

<?php
$checkbox_value1 = ($_POST['checkbox_value1']) ? 1 : 0;
?>

To display the value to the screen, we just need to replace the assignment part with "echo":

<?php
echo ($_POST['checkbox_value1']) ? 1 : 0;
?>

What if we want to display the value in the middle of a sentence? For example, let's say we're looking to display the visitor's name (if known) within a set of instructions. We could write multiple echo statements:

<?php
echo 'Welcome ';
echo ($visitor_name != '') ? $visitor_name : 'Guest';
echo ', please use the options above to find what you are looking for.';
?>

However, it would be nice if we could avoid typing "echo" over and over again. Under normal circumstances, we would replace the extra echoes and semi-colons with the concatenation character, but that doesn't quite work in this case. We also need to surround the short-hand if() with parenthesis.

<?php
echo 'Welcome ' . (($visitor_name != '') ? $visitor_name : 'Guest') . ', please use the options above to find what you are looking for.';
?>

Let's say we're processing some data from an HTML form and come across a checkbox value. The value could be utilized as is, but maybe we don't want to insert the word "on" into our database when the field is checked. Beside, who knows what that checkbox value could contain; it might be something shady. Well the following code could be used to set the checkbox value to one (1 – true) or zero (0 – false):

<?php
if($_POST['checkbox_value1']) {
     $checkbox_value1 = 1;
} else {
     $checkbox_value1 = 0;
}
?>

However, the standard if() construct above can be a little difficult to manage, especially if there are a lot of checkboxes to validate. We could condense the code so that the entire if/else construct appears on the same line for each checkbox. But let's go even further with the Ternary Operator:
<?php
$checkbox_value1 = ($_POST['checkbox_value1']) ? 1 : 0;
?>

Now that's a very compact chunk of code which is easy to scan. Once you get used to the new format, that is.

Related Posts

• Utilizing the Short-hand if() within a PHP String
• Condensing if() Constructs to Improve the Scanability of Your Code
• Small Changes to Make If Statements Easier to Scan

As an in-house developer, I typically work on websites that are closely related. There is fairly little risk of needing to strip one website's account information from another. In fact, having a closer connection for these websites is more beneficial to visitors. So it makes sense that these websites be listed under the same account. However, some websites that I develop for have a greater chance of needing to be turned over to another developer. Luckily the website host we use makes it fairly simple to transfer aspects of our account. We just need to keep the websites that have a high risk of being transferred in their own sub-accounts.

Google Analytics, on the other hand, is not so forgiving. Once those reports are grouped together, there isn't any way to separate them. You can export specific reports, but there isn't an easy way to export all the data. You could give the new developer access to the existing analytics report. Just keep in mind that the free version of Google Analytics is limited to tracking 5 million pageviews per month and every website counts towards that total. Of course, you could signup for a Google AdWords account if you're near the limit. As long as you maintain an active AdWords account, you get unlimited pageview tracking.

Related Links

• How do I grant other users access to my Analytics reports? – instructions for sharing Google Analytics reports with other users.

When writing code, there's a good chance that you or another developer will need to modify that script down the road. Maybe you'll need to fix a bug, update outdated code, implement a new feature, etc. These types of things don't typically happen while the code is fresh in your mind, so you'll need to re-familiarize yourself with the inner workings of the program. In addition to the standard ways of making your code easy to follow along with such as using comments, it's helpful to write code that's easy to scan.

Let's say we have multiple if/elseif components in our script that are used to initialize a couple variables:

The above format works perfectly fine, but since the if() construct is relative short and each component essentially does the same thing, we could condense the code, making it easier to scan.

In addition to squishing the lines of code, you may notice that the variables have been lined up. This helps to visually indicate that they belong together.

Related Posts

• Getting Your Projects Done Faster by Writing Less Code with the Short-hand if()
• Small Changes to Make If Statements Easier to Scan

One goal behind setting up this auto-response was to give the impression that no one was monitoring the e-mail address, so we created a brand new address. We would have preferred to use an e-mail address that ended with the organization's domain name, but we weren't able to utilize the auto-reply feature due to technical limitations. Instead we chose to use Google's Gmail service.

Of course our first step is to create Gmail account. But keep in mind, if you already have a Google account for their other services (Google Docs, Google Calendar, etc.) and you don't use Gmail, you might want to create the e-mail address under a different account. Otherwise Google will force you to use the new Gmail address as the primary e-mail for your account.

Enabling Canned Responses

After creating a Gmail account, you need to enable Canned Responses in order to indicate what auto-responder should say:

1. Click the "Labs" link under the Options icon near the top-right side of the page (see Figure 1)
2. Under Labs, locate Canned Responses and select "Enable" (see Figure 2)
3. Click "Save Changes"

Figure 1. Labs link under the Options menu

Figure 2. Enable Canned Responses

Creating a Canned Response

With Canned Responses enabled, a new option should be available when composing messages. Unfortunately, the process for utilizing the feature isn't very intuitive. You'll need to

1. Click "Compose mail"
2. Type the text for your canned response in the message body
3. Click the "Canned responses" option (see Figure 3)
4. Under the Save section, click "New canned response…"
5. A script prompt should pop up asking you to name the canned response (see Figure 4)
6. Enter the name and click "OK"
7. Click the "Discard" button to cancel the message

Figure 3. Canned responses option

Figure 4. Script prompt asking you to name the canned response

Creating the Auto-Responder

Now we can create the part which automatically responds to incoming messages. It may be tempting to use Gmail's vacation responder since it essentially does what we're looking for, but according to the fine print "If a contact sends you several messages, this automated reply will be sent at most once every 4 days." Well we want the message to be sent every time, so let's create our own:

1. Click the "Mail settings" link under the Options icon
2. Click "Filters"
3. Click "Create a new filter"
4. Under the "Doesn't have:" field type in something that will never appear in a message; maybe something like "4oju!jkl@g43j"
5. Click "Next Step"
6. Check "Send canned response"
7. Using the drop-down menu, choose the canned response created earlier (see Figure 5)
8. Click "Create Filter"

With the auto-responder in place, you'll want to make sure everything works as expected. To do so, you just need to e-mail the Gmail account.

Figure 5. Choosing a canned response

Notifications Area

First, the previous post stated that you still need to click the "Use Facebook as …" link before you can see the new people who "like" your organization's page. The good news is that the new Notifications area now shows all visitor interactions (new comments, Wall posts, and "likes") without switching views.

Switching Views

The other correction involves a quicker way to switch how you view Facebook. You just need to:

• Log into Facebook
• Click the "Account" tab near the top right
• Click the "Use Facebook as Page" option (See Figure 1)
• Click the "Switch" button for the page you want use Facebook as

The nice thing about this method is that it brings you directly to the page you choose. No more hunting for links to your Facebook pages.

Figure 1. Use Facebook as Page Option

Well that's all for now and I'm sure the blog entries will be flawless from this point on. Oh wait, never mind, we agreed that it was Facebook that changed.

Let's say we have a page which displays an HTML form when the visitors first arrive. It then displays a thank you message once the form is submitted. We could write out the code as follows:

But is there anything we can do to improve the code? It's a little difficult to figure out where the "if" ends and the "else" begins. So how does it look if we indent the lines of code within the if/else.

Now that's much easier to scan. Of course, you may want to adjust the number of spaces to indent each line of code. Instead of five spaces, like above, maybe you prefer a bigger indent.

Related Posts

• Getting Your Projects Done Faster by Writing Less Code with the Short-hand if()
• Condensing if() Constructs to Improve the Scanability of Your Code

Now if you don't enclose the attribute values with quotes, there's a fairly good chance that the page will display properly. For example, the following code displays just fine:

But what if we want the form's submit button to say "Send Info":

Well the button only says "Send"…what happened to the "Info" part? Without the quotes, the browser considers everything up to the first space as the value. The space basically indicates the end of one attribute name/value combination and the potential beginning of another. So it processes "Info" as an attribute, which ends up being invalid and ignored. In order to specify that both words should be used as the label, we need quotes:

Note that I would also recommend using quotes for the other attributes, but I'm sure you can handle that part.

If we could utilize PHP variables, our database entry for the question mentioned earlier would be modified to something like this:

Of course if we displayed the question as is, PHP wouldn't know about the variable. Instead it displays the text exactly as it appears in the database. But with a little manual intervention, we can use the variable as a placeholder. We just need replace all occurrences of the $survey_year with the true value using the str_replace() function.

Note that the first argument of str_rplace() is enclosed in single quotes which prevents PHP from interpreting the variable before the string replacement happens.

Before we can modify anything, we need to start the process for posting a link:

1. Log into Facebook
2. Click the "Link" option where you normally enter status updates (see Figure 1)
3. Enter the link and click the "Attach" button

Figure 1. Facebook's Share Link Option

After clicking the "Attach" button, Facebook performs it's magic to retrieve the page title, description, and pictures associated with the link. Changing the image is fairly straightforward, but it isn't as obvious that the title and description can be modified.

Let's say you're sharing a link to…o' I don't know, www.cyberscorpion.com. But for some reason Facebook chooses a description from an older post. To update the text, we just click the description as shown in Figure 2.

Figure 2. Modify Link Example

Once the information has been customized to fit your needs, you can fill in the "Say something about this link…" box and click the "Share" button.

Missing Description

Occasionally Facebook can't find a description. Maybe it was inaccessible because the text was stored in an image or maybe the page just doesn't have a description. Whatever the reason, you can still edit the description. If you hover the mouse cursor over where the first couple of letters would be, the description area should turn colors (see Figure 3). Clicking the yellow box will allow you to add a description.

Figure 3. Facebook Description Field

Using a Database

Now the information could be stored in a database. For example, maybe you have a table containing all the staff information for your organization. With a quick query, you could pull Sally Joe's contact information for any pages that need it. Then if her e-mail address changes, you only need to update the database. But what happens if Sally leaves the organization? If you're pulling the information based on an ID number, you may still need to go through the website and replace each query with the new ID.

Also, a database may be overkill for importing something very specific like the organization's name or a common phrase to be used throughout the website. So let's take a look at some other options for importing content.

PHP's include() or require()

Common information could be stored in an external file and imported using an include() or require() statement. For example, let's create a file called "include_WebmasterContactInfo.html" which contains the following:

We could then grab the information with the following code:

As a result, the website will display "The registration form is temporarily unavailable. If you have any questions, please e-mail webmaster@yourwebsite.com."

The downside of including information this way is that it's imported as is. In the previous example, to display the information multiple times on the same page, we would need to execute the include statement every time. However, we could modify include_WebmasterContactInfo.html so that it doesn't echo directly to the screen. Instead the information could be assigned to a variable:

Now we can import the new variable and use it throughout our page. Note that the include() statement needs to be executed before the variable can be used.

PHP's file_get_contents()

Another option for importing information is the file_get_contents() function. So if our include_WebmasterContactInfo.html looks like the following:

We could display the content directly to the screen:

Or we could create a variable using the function:

The benefit of using file_get_contents() is that you can create the variable on the fly. You also don't need to remember what the variable was called in the file being included.

Related Posts

• Developing a Simple Website Template with PHP

Before getting into any code, it should be said that you'll need access to a web server that supports PHP for the following solution to work. It's also helpful if you have a basic knowledge of how PHP works. Of course, if you have any questions feel free to post them in the comments section. Now on to the code.

Since we'll be dealing with dates, it's a good idea to set the time zone. For this example, we'll use U.S. Central time:

We'll also need a couple variables to store the current and deadline timestamps:

Now let's say we have a registration form that needs to be disabled after the deadline which was set above to May 1, 2011. To do that, we need to see if the current timestamp is greater than the deadline. If it is, we'll let the user know that we're no longer accepting registrations. Otherwise the registration form is shown.

With the code in place, it's a good idea to make sure it works. Since we don't have a time machine, we'll need to find another way to change the current timestamp. Let's use the mktime() function again:

You can now test whatever date you want by changing the mktime() function arguments. When testing, make sure that at least one date before, during, and after the deadline date works.

Final Code

Related Resources

• PHP Manual: date_default_timezone_set() – describes the date_default_timezone_set() function
• PHP Manual: Time Zones – provides a list of supported time zones
• PHP Manual: time() – describes the time() function
• PHP Manual: mktime() – describes the mktime() function

Over the years, there have been multiple occasions where my projects have been assigned a Saturday deadline. No one meant to choose a date when everyone was out of the office, it just happened that way. Nobody really noticed the issue either until it was too late. Of course, the world isn't going to end just because a deadline was scheduled when no one's around to help with support. Depending on your website, things will likely work as expected. But there will be occasions where something goes wrong.

For example, I developed a submission program where visitors can create a login account, submit some overview information, and upload a document later in the year. Since there may be months between when the customer creates their login and when they upload the document, we tend to get a number of requests for their login credentials. So if you combine that with the likelihood of last-minute submissions, having a deadline when no one's in the office poses a slight problem.

What Do You Do?

How you handle deadlines, as with most things, depends on the possible outcomes. If there's a history of support requests surrounding a specific project, you'll want to be involved in the planning process or at least double check the chosen deadline. Maybe it can be changed. Whether or not the deadline works, it's a good idea to find someone else as a backup. That way it doesn't matter if you're on vacation or sick. At least someone will be around to assist. Or maybe it just comes down to sucking it up and working on your time off.

However, if you just need to remove something from your website after the deadline, you'll want to stay tuned. Next week's post (Using PHP to Dynamically Hide Content after an Expiration Date) will focus on some PHP code to close a registration form and/or disable aspects of the page.

To see the new notifications feature in action, log into your Facebook account and visit the various fan pages you manage. You should see the "Notifications" link in the right column under "Use Facebook as Your Organization's Name" as shown in Figure 1. If you have any messages, you can click the notifications link to view them. (See Figure 2)

Figure 1. New Notifications Option

Figure 2. Showing Notifications

Note that you'll still need to click the "Use Facebook as …" link to see the list of new people who "like" your page.

What Do You Mean Better?

As hinted at earlier, the recent update improved my work flow. It's a minor improvement, but it helped none the less. When managing multiple fan pages, here was the typical process:

1. Log into Facebook
2. Visit the first fan page
3. Click the "Use Facebook as …" link
4. Process any new notifications
5. Click the "Use Facebook as Patrick" link
6. Visit another fan page
7. Repeat steps 3-6 until all Facebook pages have been reviewed

Beyond the extra steps required to process notifications, there is a minor issue with switching between using Facebook as an organization and myself. Whenever I forget to click the "Use Facebook as Patrick" link before going to the next fan page, the right column that provides all the admin options goes blank.

Of course, there is an option to "Switch back to Patrick" under the Account tab at the top (See Figure 3), but this sends me back to the news feed for my personal Facebook page. So the best option appears to be going back to the organization's page that I'm still logged in as and clicking the link to use Facebook as myself.

Figure 3. Facebook Account Tab

Related Posts

• Facebook Pages for Organizations Now Easier to Manage Due to Recent Update – post about the notifications feature which was added to fan pages back in February 2011
• Quickly Switching Views for Facebook Fan Pages – an update to the above post which corrects a few inaccuracies

Over the past week, I was included in an interesting exchange through a mailing list created by a spammer. After sending out the spam message, several recipients asked to be removed from the list. But since they responded through a mailing list everyone got the message causing even more anger and confusion. They started e-mailing messages like "Why are you e-mailing me, this is my work place, I don't know you." and "A complaint will be lodged with the authorities if you do not cease your actions."

In the end nobody really wins except the spammer. Don't get me wrong, spam is annoying. Living in a world where we're not bombarded with get-rich-quick schemes, e-cigarette sales, etc. would be ideal. But I'm not holding my breath.

In the meantime, we need to live with whatever spam-prevention solutions are available to us. We also have the handy delete key for those pesky messages that make it through the filters. It takes less than a second. And you may even save yourself from more spam.

For those using Microsoft Windows, you may have a software application called WordPad. Mine was located in the Start menu under All Programs > Accessories. With this application, all you need to do is

1. Copy the code from PHPFreaks
2. Paste it into WordPad
3. Copy it from WordPad
4. Paste it into Dreamweaver

As far as I can tell there isn't anything special about WordPad other than it maintains the line breaks when copying code. Also, I'm sure that this particular issue isn't specific to PHPFreaks or Dreamweaver. I would imagine that other discussion forums where code is posted will have user's experiencing the same problem.

Related Resources

• PHPFreaks.com – a discussion forum for getting help with PHP, MySQL, and other Web-related topics. Note that I'm cyberRobot on the forum.

Background

In Dreamweaver my Files panel is collapsed down so that it only shows an icon. (See Figure 1)

Figure 1. Files Panel Collapsed to an Icon

To access my files, I just click the Files icon. But as mentioned earlier the panel wouldn't go away without clicking the Files icon again. (See Figure 2)

Figure 2. View After Clicking the Files Icon

Fixing the Auto-Close Feature

It turns out that there is a setting for the auto-close feature, but it's location isn't very obvious. If you right-click the Files panel, you should see an option for "Auto-Collapse Iconic Panels". You just need to make sure the option is checked. (See Figure 3)

Figure 3. Auto-Collapse Iconic Panels Option

Switching to Icon View

If you want to switch your Files panel so that it's collapsed down to an icon, you just need to click the double-arrow icon above the Files panel. (See Figure 4)

Figure 4. Expanded Files Panel and the Button to Collapse to Icons

At first, this seemed like something I needed to just live with. The files worked fine once the extra extension was removed, so maybe it's a weird quirk of WinSCP. But it turns out that the ".filepart" actually means the file download was interrupted. According to the WinSCP help docs

When transferring file with SFTP protocol, it is first transferred into a temporary file with .filepart extension. Only after the transfer is completed the extension is removed.

So instead of removing the extra extension manually, you just need to re-initiate the download. Note that it's doesn't need to download the entire file again, WinSCP seems to remember where it left off.

Related Resources

• WinSCP Help Docs: Transfer Resume – provides more information about the .filepart extension.

OK, it's not technically a bug, but its irritating none-the-less. If you haven't posted to WordPress before, it automatically changes all your single and double quotes to curly (or smart) quotes. (See Figure 1) The curly quotes may look nice in regular text posts, but they prevent PHP code from working properly.

Figure 1. Curly vs Straight Quotes

For some reason, WordPress doesn't providing any settings to turn off curly quotes like they do for the emoticons. However, there are ways around this.

Note to WordPress.com Users

The following options don't seem to be available for the FREE version of WordPress.com. I'm not sure about the paid version.

Option 1: Custom Function

If you're feeling bold, you could add a little code snippet (developed by Lonewolf Designs) to your functions.php page which replaces curly quotes with straight ones. First we need to define a function which does the replacement:

Then you just need to declare the function with WordPress using it's add_filter() function:

You can remove the curly quotes from other aspects of your blog by replacing the first argument of the add_filter() function with a different WordPress Template Tag. For example, to remove curly quotes from the comments section you would add the following code:

Once you're ready to add the code to your function.php page, the file can be found using FTP or by following these steps:

1. Log into your WordPress admin area
2. Click the Appearance option on the left
3. Click the Editor option under Appearance
4. Under the Templates section on the right, click the "Theme Functions" link
5. Add the code and click the "Update File" button

Note: the code needs to be added between the open and close tags for PHP (<?php ?>). Otherwise the code snippet will break the layout of your WordPress blog.

Option 2: Plugins

If you're looking for a more straightforward solution, there are several WordPress plugins available to turn off curly quotes. To install a plugin

1. Log into your WordPress admin area
2. Click the Plugins option on the left
3. Near the top of the page, click the Add New button
4. In the search field, type "Curly Quote"
5. Locate the plugin you want to use and click the Install Now link/button
6. Verify that it's ok to install the plugin and activate it

For more control over which parts of the post don't have curly quotes, you might want to check out the "No Curly Quotes" plugin. Once activated, you can click the "No Curly Quotes" option under Settings. Then indicate whether to show curly quotes in post titles, post content, excerpt, or comments. (See Figure 2)

Figure 2.Options for the No Curly Quotes Plugin

Related Resources

• WordPress Codex: add_filter()– describes the add_filter() function provided by WordPress.
• WordPress Codex: Template Tags – provides a list of tags that could potentially be used with add_filter() to turn off curly quotes.

For those hosting through Libsyn.com, you can find out some basic information about your podcast by logging into the Libsyn3 admin panel and clicking the Statistics option near the top. (See Figure 1)

Figure 1. Statistics Option

Scrolling past the graph, you'll see a breakdown of the podcast episodes and the number of times each was listened to in the most recent three months. So April, March, and February for example. If you need data from the earlier months, click the magnifying glass icon next to the episode title. (See Figure 2)

Figure 2. Magnifying Glass Icon

You should now see the statistics for the selected podcast episode. From this point, the data shown can be adjusted using the "Custom period" fields below the graph. (See Figure 3) So to get information for January, change the start date to "2011-01-01" and end date to "2011-01-31".

Note: you can't use dates where there is no data. For example, if the episode was released on Dec. 1, 2010; you won't be able to type "2010-11-01".

Figure 3. Custom Period Fields to Adjust the Stats Shown

When you have everything needed for the selected podcast episode, click the close button near the top of the page. (See Figure 4)

Note: if you need information for multiple time frames, you could download the entire dataset for the selected episode by clicking the "Export" button below the graph.

Figure 4. Close Button

As you would guess, getting stats this way could be very time consuming. Especially if you have a lot of episodes, but at least there is an option for retrieving older data.

For me the issue crops up when I don't have any documents open in Dreamweaver and I hit Ctrl + F (the keyboard shortcut for Find and Replace). Upon looking closer at the dialog box (See Figure 1), it turns out the Search field is being set to Text.

Figure 1. Search Set to Text

On the other hand, if a document is open in Dreamweaver and I hit Ctrl + F the Search field is set to Source Code as shown in Figure 2.

Figure 2. Search Set to Source Code

Source Code vs Text

So then, why didn't the search work? If the Search field is set to Text, it doesn't search everything; things like HTML tags, attributes, comments, etc. are ignored. As the name suggests, Text only searches the text that's displayed on the screen…for the most part. Even though PHP and JavaScript code can be used to display text on the screen, that content is ignored when searching with Text. So if you need to expand the search, switch to Source Code.

Related Resources

• Adobe Dreamweaver Bug Causes the Find in Folder Feature to Select the Wrong Folder

For the sake of the example, the folder structure for my imaginary website is as follows:

Figure 1. Example Folder Structure

Now to search for something in all the files under the "about" folder I would

• Open the Find and Replace dialog box
• Enter what I'm looking for in the Find field
• Under Find in, select the "Folder.." option
• Click the folder icon to the right of the Find in field
• In the Choose Search Folder window, locate and select the "about" folder (See Figure 2)
• Click Select

Normally I would click the "Find All" button but as shown in Figure 3, Dreamweaver didn't select the correct folder.

Figure 2. Selecting the About Folder

Figure 3. Incorrect Folder Selection

Well I could just type the proper folder name afterwards, but there's a quicker way which is less prone to errors. When selecting a folder, watch the "Select" reference in the Choose Search Folder window. (See Figure 4)

Figure 4. Select Indicator Showing Incorrect Folder

This shows the folder that Dreamweaver will select. So if the one needed isn't mentioned, just click one directory deeper into the folder structure if you can. Dreamweaver still selects the parent directory, but now I'm getting the "about" folder. (See Figure 5)

Figure 5. Select Indicator Showing Correct Folder

The weird thing about this bug is that it seems very inconsistent. Sometimes the parent directory is selected, other times Dreamweaver selects the folder I want.

Example Problem

I've developed several management tools where customers can submit information and make modifications to their submissions throughout the year. In some of the forms a reference ID is passed to indicate which database record they are trying to update. When the form is submitted, several checks are done on the back-end to make sure the request is valid. One of those checkpoints is to make sure the reference ID only contains numbers.

The code in place for validating the ID works fine, but I've been looking for a more efficient way. Well recently I heard about a PHP function called ctype_digit() which checks if a string only contains numbers. Although the function looks promising, I wanted to run some tests before making the switch. And due to the complicated nature of the forms, I started a new page before running the tests.

Testing the Code

There are multiple ways to set up your testing environment, but some are more efficient than others depending on how many scenerios you plan to run through. For example, you could create a variable which holds the test value, run the test, and display the results.

But this solution gets a little cumbersome with multiple values. Every test requires that you modify the $value_to_test variable and re-upload the script.

When there are many values to test, I prefer to pass the test value through the URL (http://www.MyWebsite.com/testcode.php?value=8000 for example). Then I just need to use $_GET to retrieve the value.

Now I can test until my heart is content without needing to re-upload the code.

Related Resources

• PHP Manual: ctype_digit() – describes the ctype_digit() function in more detail.

Here are few of my favorite April Fools jokes for 2011.

Diablo III – Horadric Cube

Blizzard Entertainment announced that they are releasing an app that allows you to combine your "existing apps into a new, potentially more powerful app." More information about the app can be found on Blizzard's website (http://us.blizzard.com/diablo3/media/horadrapp/). They even provided a quick sample showing the Transmute functionality. I love that they referenced the Secret Cow Level; check out the screenshot below.

Google – Gmail Motion

Google introduced the future of Gmail. Why use the outdated mouse and keyboard when a few simple gestures will do the trick. I can't wait to send messages in Gmail Motion; "lick a stamp and place it down." More information, including a handy motion guide can be found online (http://mail.google.com/mail/help/motion.html).

Tricky Website Prank

Earlier in the day, I was looking for some JavaScript information and came across a website playing a cruel prank. It took a little while to figure out that http://www.howtocreate.co.uk/ modified how the mouse works with their website. If you moved the mouse to the right, it would go left. And moving the mouse up would cause the cursor to move down. They even changed the mouse pointer so that it was upside down as shown in the screenshot below. At least they let you in on the prank after a few seconds by telling you to click the Esc key.

For example, I recently contacted a service provider about an issue with using their admin panel to print invoices. For some reason the white background wouldn't print with the invoice. Since the invoice was layered over top of some other text everything would mush together making it difficult to read. Their almost instant response was that the invoices print fine for them. Then they proceeded to ask for more information.

Well this caused a light bulb to go off in my head and what do you know; the invoices print fine in Firefox. But what about the average customer who may be less familiar with technology? It would have been nice if the service provider looked into the issue on the other common browsers, especially since the form where you submit a support ticket automatically collected my browser information.

If given a choice, I prefer to limit the amount of back and forth between the customer trying to solve an issue. They have better things to do than to help me troubleshoot. For more information about my internal thought process for helping customer, check out my previous post titled “Tips for Handling Website Support Requests.”

Ok, I know there are a lot of blogs out there and I'm sure there are people out there who sarcastically say "O' boy another blog!" But not you WordPress. Maybe the tagline should be "Another awesome WordPress site in the works!" They don't have to mean it.

Removing the "Just another WordPress site"

To change the tagline or remove it completely

1. Log into your WordPress admin panel
2. Click the Settings option in the left menu (See Figure 1)
3. Under General Setting, change or remove the text found in the Tagline field
4. Click the Save Changes button

Figure 1. WordPress Settings Option

Lets say that there's a major buzz going around the office about a Whoopie Pie article found on the USA Today website. After some intense conversations you decided to check out the full article. Once you're on the page, you can quickly find the article by hitting Ctrl + F and typing "Whoopie Pie" into the search field. As shown in Figure 1, the browser will highlight the specific text if it was found on the page.

Figure 1. USA Today Screenshot

In the previous example, there was only one match for "Whoopie Pie". So what happens when there are more? To see, let's visit the website for the PHP manual (www.php.net). If you hit Ctrl + F and type "PHP" into the search field, you'll see that the mentions of PHP will be highlighted as shown in Figure 2. Note that you can use the "Previous" and "Next" buttons near the search field to jump through the various references.

Figure 2. PHP Manual Screenshot

As you can see Ctrl + F is a very handy option for finding text quickly. Of course it requires that your search text to be exact. In other words if we typed "Whoopie pies are delicious" in the USA Today example, there wouldn't have been any matches. Also, note that Ctrl + F is available in other software applications such as Microsoft Word and Adobe Dreamweaver.