Ennui Design

Win a Copy of PHP for Absolute Beginners!

For anyone who might be interested in getting their hands on a copy of PHP for Absolute Beginners, there's a giveaway going on over at Brenelz Web Development.

Three copies are available, so head over to the site and get contest details.

And I know I've been neglecting my blog. However, I'm working on an eight-part series with Chris Coyier right now that should kick off very soon, which covers the development of a PHP/AJAX application from concept to completion. Sorry for the delay, but this series should make up for it.

A big thank you to anyone who has already purchased my book! If you've read it and have a minute, I (and my publishers) would really appreciate you taking a moment to review it on Amazon. Thank you again!

(To read and post comments for this entry, visit ennuidesign.com)

Natural Sorting in MySQL

Working Around MySQL's Lack of Built-In Support for Natural Sorting

Several times in the last few projects I've built, I've come across the need to sort alphanumeric rows in a database by number (i.e. entry1, entry2, entry3, etc.). If you've ever tried to do this, you know that sorting entries that are alphanumeric is a pain.

The Data

For our purposes, we'll be using the following table:

Table: sorting_test

+--------------------------+-------------+

| alphanumeric VARCHAR(75) | integer INT |

+--------------------------+-------------+

| test1                    | 1           |

| test2                    | 2           |

| test3                    | 3           |

| test4                    | 4           |

| test5                    | 5           |

| test6                    | 6           |

| test7                    | 7           |

| test8                    | 8           |

| test9                    | 9           |

| test10                   | 10          |

| test11                   | 11          |

| test12                   | 12          |

+--------------------------+-------------+

The Problem

Sorting by the column integer, of course, presents no problems.

Query: SELECT alphanumeric, integer

       FROM sorting_test

       ORDER BY integer

+--------------------------+-------------+

| alphanumeric VARCHAR(75) | integer INT |

+--------------------------+-------------+

| test1                    | 1           |

| test2                    | 2           |

| test3                    | 3           |

| test4                    | 4           |

| test5                    | 5           |

| test6                    | 6           |

| test7                    | 7           |

| test8                    | 8           |

| test9                    | 9           |

| test10                   | 10          |

| test11                   | 11          |

| test12                   | 12          |

+--------------------------+-------------+

However, when we try sorting by the alphanumeric column, we get unexpected results:

Query: SELECT alphanumeric, integer

       FROM sorting_test

       ORDER BY alphanumeric

+--------------------------+-------------+

| alphanumeric VARCHAR(75) | integer INT |

+--------------------------+-------------+

| test1                    | 1           |

| test10                   | 10          |

| test11                   | 11          |

| test12                   | 12          |

| test2                    | 2           |

| test3                    | 3           |

| test4                    | 4           |

| test5                    | 5           |

| test6                    | 6           |

| test7                    | 7           |

| test8                    | 8           |

| test9                    | 9           |

+--------------------------+-------------+

Obviously, this is not the desired outcome. Since we're sorting alphabetically, the entries are actually in the correct order, but we need to find a way to sort numerically.

The Solution

There are a whole lot of solutions out there if you hit up Google for "natural sorting in MySQL." The one I've found to be the most straightforward is to sort by length first, then the column value.

Query: SELECT alphanumeric, integer

       FROM sorting_test

       ORDER BY LENGTH(alphanumeric), alphanumeric

+--------------------------+-------------+

| alphanumeric VARCHAR(75) | integer INT |

+--------------------------+-------------+

| test1                    | 1           |

| test2                    | 2           |

| test3                    | 3           |

| test4                    | 4           |

| test5                    | 5           |

| test6                    | 6           |

| test7                    | 7           |

| test8                    | 8           |

| test9                    | 9           |

| test10                   | 10          |

| test11                   | 11          |

| test12                   | 12          |

+--------------------------+-------------+

This works because the first nine entries are 5 characters long, with the tenth, eleventh, and twelfth entries at 6 characters; this creates two groups of entries that are then sub-sorted, resulting in our desired order.

Summary

This is a quick tip, but a useful one. Do you have a better way of forcing natural sorting in MySQL? Let me know in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

SXSW 2010, PHP for Absolute Beginners, and an Apology

I know I've been silent on here for far too long, but I wouldn't have done it without good reason. Here's what I've been up to over the last two months!

PHP for Absolute Beginners

At long last, I've finally finished my first book! It's called PHP for Absolute Beginners, and it should be on shelves in major booksellers next month sometime. It's already available for preorder on Amazon (though you'll have to forgive the erroneous reference to PHP 6; I've been trying to get that removed for a couple months now), and I'd really appreciate presales.

Despite the title touting the book as written "for absolute beginners," this book should have something for everybody. It covers the construction of a blog from scratch, including using .htaccess to create friendly URLs, resizing and resampling images with PHP's GD library, storing user comments with spam prevention and email validation using regex, and other goodies including using the bit.ly API to generate short URLs for a "post to Twitter" link.

I'm really excited about this project, and I'm even more excited to hear your feedback!

SXSW 2010

I've also thrown my hat into the ring to do a presentation on AJAX at this year's SXSW Interactive Festival.

This presentation would be a joint effort between Robert Banh and myself, and will cover REST and its role in modern web applications. We'll also go over JSON, who's using REST, and the rest of the basics of the technology.

This stuff is already really important in modern web design, and it's only going to become more relevant in days to come.

In order to make this presentation a reality, I need your help! Please head over to the PanelPicker on the SXSW website and vote for my topic.

Finally, an Apology

I'm really sorry that I've been neglecting this blog, and it's a problem I intend to rectify starting next week.

I'll be back to posting articles on a semi-regular basis next week. In addition to posting on Ennui Design, I plan on submitting more articles to NETTUTS and a few other great online publications.

Thanks for sticking with me, and I'll see you real soon!

(To read and post comments for this entry, visit ennuidesign.com)

JSON: What It Is, How It Works, and How to Use It

My apologies for the lapse in posting; I'm in the midst of finishing my first book for Apress (it's called PHP for Absolute Beginners, and should be out later this year), and it's been consuming most of my attention.

This week, however, I want to cover a topic that I feel has become an important part of any developer's toolkit: the ability to load and manipulate JSON feeds from other sites via AJAX.

Many sites are sharing data using JSON in addition to RSS feeds nowadays, and with good reason: JSON feeds can be loaded asynchronously much more easily than XML/RSS.

This article will cover the following:

What is JSON?

Why does JSON matter?

How do we load JSON into a project?

We'll also use our newfound skills with JSON at the end of this project to build a quick app that loads photos from Flickr without requiring a page refresh.

See the Demo | Download the Source

What Is JSON?

JSON is short for JavaScript Object Notation, and is a way to store information in an organized, easy-to-access manner. In a nutshell, it gives us a human-readable collection of data that we can access in a really logical manner.

Storing JSON Data

As a simple example, information about me might be written in JSON as follows:

var jason = {

	"age" : "24",

	"hometown" : "Missoula, MT",

	"gender" : "male"

};

This creates an object that we access using the variable jason. By enclosing the variable's value in curly braces, we're indicating that the value is an object. Inside the object, we can declare any number of properties using a "property-name" : "property-value" pairing, separated by commas.

To access the information stored in jason, we can simply refer to the name of the property we need. For instance, to access information about me, we could use the following snippets:

document.write('Jason is '+jason.age); // Output: Jason is 24

document.write('Jason is a '+jason.gender); // Output: Jason is a male

Storing JSON Data in Arrays

A slightly more complicated example involves storing two people in one variable. To do this, we enclose multiple objects in square brackets, which signifies an array.

For instance, if I needed to include information about myself and my brother in one variable, I might use the following:

var family = [{

	"name" : "Jason",

	"age" : "24",

	"gender" : "male"

},

{

	"name" : "Kyle",

	"age" : "21",

	"gender" : "male"

}];

To access this information, we need to access the array index of the person we wish to access. For example, we would use the following snippet to access info stored in family:

document.write(family[1].name); // Output: Kyle

document.write(family[0].age); // Output: 24

NOTE: This is beneficial if it will be necessary to loop through stored information, as it lends itself to a for loop with an automatically incrementing value.

Nesting JSON Data

Another way to store multiple people in our variable would be to nest objects. To do this, we would create something similar to the following:

var family = {

	"jason" : {

		"name" : "Jason Lengstorf",

		"age" : "24",

		"gender" : "male"

	},

	"kyle" : {

		"name" : "Kyle Lengstorf",

		"age" : "21",

		"gender" : "male"

	}

}

Accessing information in nested objects is a little easier to understand; to access information in the object, we would use the following snippet:

document.write(family.jason.name); // Output: Jason Lengstorf

document.write(family.kyle.age); // Output: 21

document.write(family.jason.gender); // Output: male

Nested JSON and arrays can be combined as needed to store as much data as necessary.

Why Does JSON Matter?

With the rise of AJAX-powered sites, it's becoming more and more important for sites to be able to load data quickly and asynchronously, or in the background without delaying page rendering.

Switching up the contents of a certain element within our layouts without requiring a page refresh adds a "wow" factor to our applications, not to mention the added convenience for our users.

Because of the popularity and ease of social media, many sites rely on the content provided by sites such as Twitter, Flickr, and others. These sites provide RSS feeds, which are easy to import and use on the server-side, but if we try to load them with AJAX, we run into a wall: we can only load an RSS feed if we're requesting it from the same domain it's hosted on.

An attempt to load my Flickr account's RSS feed via jQuery's $.ajax() method results in the following JavaScript error:

[Exception... "Access to restricted URI denied" code: "1012" 

nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" 

location: "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js Line: 19"]

JSON allows us to overcome the cross-domain issue because we can use a method called JSONP that uses a callback function to send the JSON data back to our domain. It's this capability that makes JSON so incredibly useful, as it opens up a lot of doors that were previously difficult to work around.

How Do We Load JSON into a Project?

One of the easiest ways to load JSON data into our web applications is to use the $.ajax() method available in the jQuery library. The ease of retrieving data will vary based on the site providing the data, but a simple example might look like this:

$.ajax(

	type:'GET',

	url:"http://example.com/users/feeds/",

	data:"format=json&id=123",

	success:function(feed) {

		document.write(feed);

	},

	dataType:'jsonp'

);

This example would request the latest feed items in JSON format and output them to the browser. Obviously, we wouldn't want to output raw JSON data to the browser, but this example shows the basics of loading JSON from an external source.

A Practical Example: Loading Flickr Streams with JSON and jQuery

See the Demo | Download the Source

To show how JSON works in a real-world example, let's load photos from Flickr using jQuery and the JSON version of Flickr's "Latest" photo feed.

Step 1: Create the AJAX Request

Flickr's photostream feeds are relatively easy to access. All users have a unique ID number, which we will send as part of the request to this URL.

http://api.flickr.com/services/feeds/photos_public.gne

The request we need to send asks for the latest photos from the user in question, along with flags asking for a JSON-formatted response. The request we need to send will look like this:

id=XXXXXXXX@NXX&lang=en-us&format=json&jsoncallback=?

In the above example, XXXXXXXX@NXX needs to be replaced with the user's ID.

We'll be writing a function, so the user's ID will be passed as an argument called flickrID. Our function will be called loadFlickr(). Let's create the function that will load our JSON response:

function loadFlickr(flickrid)

{

	$('#feed').html('<span><img src="images/lightbox-ico-loading.gif" /></span>');

	$.ajax({

		type:'GET',

		url:"http://api.flickr.com/services/feeds/photos_public.gne",

		data:"id="+flickrid+"&lang=en-us&format=json&jsoncallback=?",

		success:function(feed) {

			// Do something with the response

		},

		dataType:'jsonp'

	});

}

The returned JSON data will look something like this (note that I've removed all but one of the returned photos for the sake of brevity):

({

	"title": "Uploads from ennuidesign",

	"link": "http://www.flickr.com/photos/ennuidesign/",

	"description": "",

	"modified": "2009-03-17T03:53:36Z",

	"generator": "http://www.flickr.com/",

	"items": [

	{

		"title": "This Is How You Get People to Talk About You",

		"link": "http://www.flickr.com/photos/ennuidesign/3361269251/",

		"media": {"m":"http://farm4.static.flickr.com/3470/3361269251_9c55e6dc24_m.jpg"},

		"date_taken": "2009-03-16T21:53:36-08:00",

		"description": "<p><a href="http://www.flickr.com/people/ennuidesign/">ennuidesign</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/ennuidesign/3361269251/" title="This Is How You Get People to Talk About You"><img src="http://farm4.static.flickr.com/3470/3361269251_9c55e6dc24_m.jpg" width="240" height="180" alt="This Is How You Get People to Talk About You" /></a></p> <p>A guy I know, Trevor Gnauck, made this custom pint glass for me. He runs a company called <a href="http://www.bluedragonllc.com/">Blue Dragon Custom Laser Engraving</a> with his family, and he had no reason whatsoever to do anything nice for me.<br /> <br /> He did, though, and look how cool that is! I can now drink a beer out of my own likeness.<br /> <br /> I know it wasn't his intention, but this is how you get people to talk about you. Unprovoked kindness will always inspire kindness in return, and the power of a kind gesture should never be overlooked.</p>",

		"published": "2009-03-17T03:53:36Z",

		"author": "nobody@flickr.com (ennuidesign)",

		"author_id": "29080075@N02",

		"tags": "gift ennuidesign trevorgnauck bluedragoncustomlaserengraving"

	}



	// The rest of the photo entries go here...



	]

})

Step 2: Process the JSON Data

What we're going to do is display the thumbnails of the latest 16 photos, which will link to the medium-sized display of the image.

The Flickr JSON is a little confusing, and it doesn't provide a direct link to the thumbnail version of our photos, so we'll have to use some trickery on our end to get to it, which we'll cover in just a moment.

Each photo entry is stored in an array called items, which we access in our AJAX call using feed.items. To get to the data about each entry, we'll loop through the items until we've either hit the last available photo or 16 total photos; whichever comes first.

Let's modify our function and set up the loop:

function loadFlickr(flickrid)

{

	// Display a loading icon in our display element

	$('#feed').html('<span><img src="images/lightbox-ico-loading.gif" /></span>');



	// Request the JSON and process it

	$.ajax({

		type:'GET',

		url:"http://api.flickr.com/services/feeds/photos_public.gne",

		data:"id="+flickrid+"&lang=en-us&format=json&jsoncallback=?",

		success:function(feed) {

			// Create an empty array to store images

			var thumbs = [];



			// Loop through the items

			for(var i=0, l=feed.items.length; i < l && i < 16; ++i) 

			{

				// Process each image

			}



			// Display the thumbnails on the page

		},

		dataType:'jsonp'

	});

}

The element we're interested in is the "m" element stored within the "media" element. This can be accessed within our loop using feed.items[i].media.m. We're going to run a regular expression on this value to get both the medium and thumbnail image paths, which we'll assemble into a linked thumbnail image.

Then, we'll push the newly assembled HTML into the array of thumbs we created. After we've finished the loop, we'll combine all the images into one string of HTML and replace the contents of our display element with the loaded thumbnails.

Let's add this functionality to our script:

function loadFlickr(flickrid)

{

	// Display a loading icon in our display element

	$('#feed').html('<span><img src="images/lightbox-ico-loading.gif" /></span>');



	// Request the JSON and process it

	$.ajax({

		type:'GET',

		url:"http://api.flickr.com/services/feeds/photos_public.gne",

		data:"id="+flickrid+"&lang=en-us&format=json&jsoncallback=?",

		success:function(feed) {

			// Create an empty array to store images

			var thumbs = [];



			// Loop through the items

			for(var i=0, l=feed.items.length; i < l && i < 16; ++i) 

			{

				// Manipulate the image to get thumb and medium sizes

				var img = feed.items[i].media.m.replace(

					/^(.*?)_m.jpg$/, 

					'<a href="$1.jpg"><img src="$1_s.jpg" alt="" /></a>'

				);



				// Add the new element to the array

				thumbs.push(img);

			}



			// Display the thumbnails on the page

			$('#feed').html(thumbs.join(''));



			// A function to add a lightbox effect

			addLB();

		},

		dataType:'jsonp'

	});

}

Note that I've also added a function called addLB() to the end of this function; this adds the lightbox effect to our thumbnails, which is purely for aesthetics.

Step 3: Call Our Function

At this point, we're ready to call our function. To load my Flickr stream, we would need to call our function as follows:

loadFlickr("29080075@N02");

The example posted will pull multiple users' photostreams into the containing box without causing a page refresh. Look at the source code on the demo to see how it was done.

NOTE: Keep in mind that this demo was to show how to load JSON data, and not on how to implement the code to call the function. The JavaScript calls are inline, which should NOT be used in a production script.

See the Demo | Download the Source

Summary

Have you used JSON before? Is there anything you'd like to clarify or see further clarified about JSON? Let me know in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

Easily Create External Links Without the Target Attribute

Today's tip is extremely short and simple, and to a lot of folks may be a "Duh!" sort of tip, but I felt it was worth sharing.

I'm a big fan of keeping sites valid in XHTML 1.0 Strict. When I first started paying attention to standards, one of the things that stumped me right off the bat was the use of external links.

The Problem with `target="_blank"`

As I'm sure most people know, the use of the target attribute isn't considered valid. However, in order to open links in a new page, the only tool provided by HTML is the target attribute!

I had been creating external links for as long as I could remember using the following format:



<a href="http://example.com" target="_blank">External link</a>

The Fix: `rel="external"`

The HTML

When I started using jQuery, I stumbled across this little gem that allowed me to have my valid code and external links with one simple line of code:



<a href="http://example.com" rel="external">External link</a>

The use of rel="external" is perfectly valid, and doesn't cause any problems at all. However, this attribute won't work by itself. In order to cause the links to open in a new page, we first need to employ a jQuery one-liner.

The JavaScript

At the bottom of any page that features external links, we need to include one line of jQuery code (and jQuery itself, of course):



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

	$('a[rel="external"]').attr('target', '_blank');

</script>

And that's it. Seriously.

This method degrades gracefully: if the user doesn't have JavaScript, the link will open in the same window. This method is easy, lightweight, and most importantly, valid XHTML 1.0 Strict.

Summary

Writing valid code should be high on any developer's to-do list, and using the rel="external" trick is an easy way to take yourself one step closer to completely valid sites.

Do you have any tricks to keep sites valid? How about a raw JavaScript, MooTools, or other library method of doing the rel="external" trick? Share it in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

Show the Most Popular Categories with PHP

This week, we'll be going over a quick way to determine what the most popular tags are in a series of tagged entries.

Files and Data Required for This Exercise

Files

popular_tags.php — This will contain the dummy code and the function to process it

Data

Tags — An array of comma-delimited strings containing tags

Parsing Function — Function to break apart the array and determine which tags are the most popular

The Tag Sets

For this exercise, we'll be using a comma-delimited string (i.e. "tag 1, tag 2, tag 3, etc.") as a set, and we'll assume that there are multiple entries, each with a set of tags generated by the user.

Pretty much every blog, bookmarking resource, and app these days features tagging in some capacity. Tags help users quickly identify what an entry is about, or what category an item belongs in.

Another benefit of using tags is that they allow us, as developers, to identify trends in entries. By determining what tags occur most frequently, we can let site visitors know what they're most likely to find within a blog or collection of entries.

The Dummy Tag Sets for This Exercise

Normally, the tags would be stored in a database. However, for the sake of an easy-to-understand exercise, we'll be using a plain array (the array will function just like the result set returned from a database query). In our new file for testing, called popular_tags.php, add our array, which should contain the following tag sets:



$tag_array = array(

	'php, regular expressions, search',

	'php, arrays, javascript',

	'php, search, javascript',

	'php, arrays',

	'arrays, mysql'

);

These are tag sets that might exist on this blog. In this case, they're separated by commas, but they could be separated by anything, really.

The Parsing Function

This function is simple, but it has to do a lot. Let's define the steps that need to be followed by this function, which we'll call popularTags():

Accept the array of tag sets as an argument

Create a new array that will contain the processed tag information

Loop through each set of tags

Break each tag set apart at the commas and remove extra whitespace before and after the tags

Loop through each separated tag individually

Check if the current tag is already in the final array, and if so, increment the value of that tag by one; if not, create the tag in the array with a value of one

Sort the array by occurrence, from highest to lowest, and return it

Step 1: Accept the Array of Tag Sets

To start, we need to declare our function and accept the array of tag sets as an argument. In popular_tags.php, let's add the following:



function popularTags($tag_array)

{

	// Process $tag_array

}

Step 2: Create a New Array to Store Processed Tag Information

To avoid a notice about undeclared variables, we need to instantiate the variable that will contain the new array of processed tags. We'll call this array $popular_tags, and it will be initialized as an empty array.

This is going to be our return value. When finished we want this array to hold each tag that occurred in the tag sets as an index, each containing a value that represents how many times that tag occurred in the supplied array. For example, if "tag1" occurs twice and "tag2" occurs once, $popular_tags would look like this:



Array

(

    [tag1] => 2

    [tag2] => 1

)

Update popularTags() to contain the following:





function popularTags($tag_array)

{

	// Instantiate the final tag array

	$popular_tags = array();



	// Process $tag_array



	return $popular_tags;

}

Steps 3 & 4: Loop Through Each Tag Set and Separate by Commas

With our function declared and accepting an array, and a new array instantiated to contain our processed tags, we need to start processing the tags themselves.

To start, we need to access each tag set individually. The easiest way to do this is to run a foreach loop, giving us each element of the array individually:



function popularTags($tag_array)

{

	// Instantiate the final tag array

	$popular_tags = array();



	// Loop through each set of tags

	foreach($tag_array as $tags)

	{

		// Process each tag set

	}



	// Return the array

	return $popular_tags;

}

Next, we need to separate each tag set into an array of the tags contained within it. Because we know the tag sets are comma delimited, we can use the handy explode() function to break the string into an array, using the comma as the breaking point. Then, to make sure all the extra leading and trailing whitespace is eliminated from each tag, we use array_map() to call the trim() function on each element we just created from the string.

We can do all of this in one line by inserting the following just inside our loop:



function popularTags($tag_array)

{

	// Instantiate the final tag array

	$popular_tags = array();



	// Loop through each set of tags

	foreach($tag_array as $tags)

	{

		/*

		 * Separate at the commas to get individual tags and

		 * trim the whitespace from each tag

		 */

		$tags_arr = array_map('trim', explode(',', $tags));



		// Process the tags in $tags_arr

	}



	// Return the array

	return $popular_tags;

}

Steps 5 & 6: Loop Through Each Tag and Check Against the Final Array

Now that we have each tag stored in an individual array element, we can start checking which tags are the most popular. To do this, we're going to loop through each tag in the $tags_arr array. If the tag we're currently dealing with has already been added to the $popular_tags array, we increment it's value by one (meaning the original occurrence of a tag sets the array element for that tag to one, and each subsequent occurrence increments that value, effectively giving us a tag count). Otherwise, we'll simply add a new array element to the $popular_tags array and set its value to 1.



function popularTags($tag_array)

{

	// Instantiate the final tag array

	$popular_tags = array();



	// Loop through each set of tags

	foreach($tag_array as $tags)

	{

		/*

		 * Separate at the commas to get individual tags and

		 * trim the whitespace from each tag

		 */

		$tags_arr = array_map('trim', explode(',', $tags));



		// Loop through each tag

		foreach($tags_arr as $tag)

		{

			/*

			 * If the tag has already been added to the

			 * $popular_tags array, increment its value by 1

			 */

			if(array_key_exists($tag, $popular_tags))

			{

				$popular_tags[$tag] += 1;

			}



			/*

			 * Otherwise, add the tag to the array and 

			 * set its value to 1

			 */

			else

			{

				$popular_tags[$tag] = 1;

			}

		}

	}



	// Return the array

	return $popular_tags;

}

Step 7: Sort the Array and Return It

Finally, we need to sort our array in descending order by occurrence, so that the tags that occur most often are at the top, while the less popular tags are at the bottom. There's a very handy array-handling function that does exactly what we need called arsort(), which means "array reverse sort".

It's worth noting that arsort() does not return the sorted array. Rather, it returns a boolean: TRUE on success and FALSE on failure. Because of this, we cannot directly call return arsort($popular_tags);, as this would be output as 1 instead of the expected array.

To sort our array, update popularTags() by adding the call to arsort() just above the return statement:



function popularTags($tag_array)

{

	// Instantiate the final tag array

	$popular_tags = array();



	// Loop through each set of tags

	foreach($tag_array as $tags)

	{

		/*

		 * Separate at the commas to get individual tags and

		 * trim the whitespace from each tag

		 */

		$tags_arr = array_map('trim', explode(',', $tags));



		// Loop through each tag

		foreach($tags_arr as $tag)

		{

			/*

			 * If the tag has already been added to the

			 * $popular_tags array, increment its value by 1

			 */

			if(array_key_exists($tag, $popular_tags))

			{

				$popular_tags[$tag] += 1;

			}



			/*

			 * Otherwise, add the tag to the array and 

			 * set its value to 1

			 */

			else

			{

				$popular_tags[$tag] = 1;

			}

		}

	}



	// Sort the tags in the array in descending order

	arsort($popular_tags);



	// Return the array

	return $popular_tags;

}

The Output

First and foremost, when we display the results of popularTags() when the dummy tag sets are passed using print_r(), we'll see the following:



Array

(

    [php] => 4

    [arrays] => 3

    [javascript] => 2

    [search] => 2

    [mysql] => 1

    [regular expressions] => 1

)

To use this information in a script, we might want to display each category with its popularity in parentheses to give our users some idea of what the entries on the site usually pertain to.

Add the following output script to popular_tags.php:



foreach(popularTagsC($tag_array) as $tag=>$num)

{

	echo $tag, " (", $num, ")<br />";

}

To see the result, open the file in a browser. We should see the following:



php (4)

arrays (3)

javascript (2)

search (2)

mysql (1)

regular expressions (1)

The Condensed Function

When the comments are removed and a couple of things are combined to save space, we can take popularTags() down to just 11 lines of code:



function popularTags($tag_array) {

	$p = array();

	foreach($tag_array as $tags) {

		$tags_arr = array_map('trim', explode(',', $tags));

		foreach($tags_arr as $tag) {

			$p[$tag] = array_key_exists($tag, $p) ? $p[$tag]+1 : 1;

		}

	}

	arsort($p);

	return $p;

}

Summary

In this exercise, we learned how to break strings apart into arrays in order to determine the frequency with which certain tags or words are used.

Do you have a way to further compress this function? Let me know in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

Improving the Simple Contact Form

A few weeks back, we learned how to build a simple contact form to allow our users to send us feedback directly from a site.

As noted in the comments, there were a few shortcomings with the contact form. Most notably, there was no spam protection whatsoever. Additionally, if the user made a mistake, their message would be lost, which is extremely inconvenient.

To make this contact form ready to use on a real website, we'll be adding both a basic spam protection system and the ability to store the message in a session in case the user makes a mistake.

NOTE: Like all projects built on this blog, this is being presented as a teaching exercise and a demonstration, so be sure to double-check it before using it in a project.

View the Demo | Download the Source

Understanding the Problem, Part 1: Better Error Handling

One of the most annoying things our web form could do is allow us to spend twenty minutes crafting a message, only to realize that we forgot to add the ".com" to our email address and therefore had our information rejected by the application and lost. (By the way, I know the comment form on this blog does that. It's on my to-do list, I swear!)

To save our users a lot of frustration, we'll need to update our contact form to save the information entered before checking for validity. This allows us to return an error message to the user telling them what went wrong, as well as keeping their original message intact.

Understanding the Problem, Part 2: Spam Protection

Because there's still that special kind of asshole that builds robots to find and spam any available web form, we need to guard our form against automated submissions.

The most popular method for deterring robots is to use CAPTCHA, or a type of challenge-response test that essentially proves that a user is human. This form of spam protection is really effective, but can also have the unwanted side-effect of protecting your form against people as well, since the warped letters can be hard to read.

All that a CAPTCHA does, though, is gives the user an instruction (such as, "Type the letters from the image below") and checks their response. Because our form is not granting access to sensitive data, we don't need to generate a bulletproof spam protection service. Therefore, we're going to use a much simpler approach: we're going to ask a basic arithmetic question and check the answer.

Because it takes a relatively smart spambot to interpret a question, we're going to trust that only a human will understand the question, "What is 4 + 5?" If the user gives us the answer, 9, then we know with relative certainty that the message is legitimate.

Solving the Problem

For this project, I'm going to assume that everyone's familiar with the original post. All code will be presented, but the explanation for how the code works will be omitted. Refer to the original post for explanations on the parts of the contact form not covered here.

This project consists of four files:

index.php — contains our form and error handling

contact.inc.php — processes submitted messages and returns a status message

default.css — CSS styles for the form

beautiful-forms.js — adds JavaScript form validation and cleans up forms (read about it here)

Step 1 — Adding Better Error Handling

Originally, our error handling only involved outputting a basic message and killing the execution of our script. Obviously, this isn't acceptable for a real site, so we're going to improve it.

Saving the Submitted Information in Case of Errors

First and foremost, we want to remove the annoyance of needing to re-enter information in the event of a mistake on the form. To do this, we're going to use session variables.

In order to use sessions, we need to have a session available to us, which we accomplish using session_start() at the very top of any file that will need access to the saved information. In this case, we'll need to add the call to both index.php and contact.inc.php for our script to work.



<?php



// Start the session

session_start();

After we open the session, we remove the whitespace from before and after the form's submitted values using a really handy function called array_map(), which allows us to call a function on each element of an array. We're using it here to call the trim() function on all submitted values in the $_POST superglobal. The return value of array_map() will then be stored in a variable, which we'll simply call $p.



<?php



// Start the session

session_start();



/*

 * If the form was submitted and the "Send" button pressed, 

 * continue processing the data

 */

if($_SERVER['REQUEST_METHOD']=='POST' && $_POST['submit']=='Send')

{

	// Trim all the values to remove unwanted whitespace

	$p = array_map('trim', $_POST);

With our values trimmed and stored, we're ready to save them in the session. To do this, we simply create an array element in the $_SESSION superglobal for each form field and set its value to the submitted information.



<?php



// Start the session

session_start();



/*

 * If the form was submitted and the "Send" button pressed, 

 * continue processing the data

 */

if($_SERVER['REQUEST_METHOD']=='POST' && $_POST['submit']=='Send')

{

	// Trim all the values to remove unwanted whitespace

	$p = array_map('trim', $_POST);



	// Store the posted information as session variables

	$_SESSION['cf_n'] = $p['cf_n'];

	$_SESSION['cf_e'] = $p['cf_e'];

	$_SESSION['cf_w'] = $p['cf_w'];

	$_SESSION['cf_h'] = $p['cf_h'];

	$_SESSION['cf_m'] = $p['cf_m'];

Now the submitted information is available to our script, even if the form submission fails, allowing us to grant our users another chance to get the form right without causing them much grief. We'll get to how this information is used in just a moment.

Using Status Codes to Identify Errors

Next we need to modify our error handling. In the original post, we simply saved an error message in a variable, which was output to the browser using echo() in the event of an error. Our new approach is to catch an error by sending the user back to the form with a status code that identifies it.

For simplicity's sake, we're going to use the following status codes:

0 — No error

1 — Anti-spam question incorrect or incomplete

2 — No name submitted

3 — Invalid email submitted

4 — No message submitted

5 — Sending of message failed

6 — Sending of confirmation message failed

Each step in the validation process checks for an individual field's validity. If the field does not meet our criteria for being considered "valid", we send our status code for the error as a URL query string and use header() to direct the user back to the form, where an error message will be displayed.

Modify contact.inc.php to contain the following code:



<?php



// Start the session

session_start();



/*

 * If the form was submitted and the "Send" button pressed, 

 * continue processing the data

 */

if($_SERVER['REQUEST_METHOD']=='POST' && $_POST['submit']=='Send')

{

	// Trim all the values to remove unwanted whitespace

	$p = array_map('trim', $_POST);



	// Store the posted information as session variables

	$_SESSION['cf_n'] = $p['cf_n'];

	$_SESSION['cf_e'] = $p['cf_e'];

	$_SESSION['cf_w'] = $p['cf_w'];

	$_SESSION['cf_h'] = $p['cf_h'];

	$_SESSION['cf_m'] = $p['cf_m'];



	// If the name field was filled out, sanitize the input and store it

	if(!empty($p['cf_n']) && $p['cf_n']!='Name (required)')

	{

		$name = htmlentities(stripslashes($p['cf_n']), ENT_QUOTES);

	}

	else

	{

		// If the name wasn't entered, create an error message

		header("Location: ../?status=2");

		exit;

	}



	// If the email is set, validate and store it

	if(!empty($p['cf_e']) && $p['cf_e']!='Email (required)')

	{

		// Define a regex pattern to validate the email address

		$pattern = "/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/i";

			if (preg_match($pattern, $p['cf_e']))

			{

				$email = $p['cf_e'];

			}



			else

			{

				// If the email doesn't match the pattern, error

				header("Location: ../?status=3");

				exit;

			}

	}



	// If no email was entered, generate an error message

	else

	{

		header("Location: ../?status=3");

		exit;

	}



	// Check the website field

	if(!empty($p['cf_w']) && $p['cf_w']!='Website (optional)')

	{

		$site = htmlentities(stripslashes($p['cf_w']), ENT_QUOTES);

	}

	else

	{

		// Because the website is optional, no error if empty

		$site = "none";

	}



	// Ensure a message was entered, then sanitize it

	if(!empty($p['cf_m']) && $p['cf_m']!='Enter Your Message Here')

	{

		$message = strip_tags(stripslashes($p['cf_m']));

	}



	// If no message was entered, adds an error message

	else

	{

		header("Location: ../?status=4");

		exit;

	}



	/*

	 * If no errors occurred, send the message

	 */

	$to = "Ennui Design <answers@ennuidesign.com>";

	$subject = "[Ennui Design] Message from the Ennui Design contact form";

	$headers = <<<MESSAGE_HEADER

From: $name <$email>

Content-Type: text/plain

MESSAGE_HEADER;

	$msg = <<<MESSAGE_BODY

Name:  $name

Email: $email

URL:   $site



Message:



$message



--

This message was sent via the contact form on EnnuiDesign.com

MESSAGE_BODY;

	if(!mail($to, $subject, $msg, $headers))

	{

		header("Location: ../?status=5");

		exit;

	}



	// Now send a confirmation email to the user.

	$conf_to  = "$name <$email>";

	$conf_sub = "Thank You for Contacting Us!";

	$conf_headers = <<<MESSAGE_HEADER

From: Ennui Design <donotreply@ennuidesign.com>

Content-Type: text/plain

MESSAGE_HEADER;

		$conf_message = <<<MESSAGE_BODY

Thank you for contacting us! Your message

was sent successfully, and we will get back

to you as quickly as possible.



All the Best,

Ennui Design



answers@ennuidesign.com

www.EnnuiDesign.com

MESSAGE_BODY;

	if(!mail($conf_to, $conf_sub, $conf_message, $conf_headers))

	{

		header("Location: ../?status=6");

		exit;

	}



	// Destroy the session variables

	unset($_SESSION['cf_n'], $_SESSION['cf_e'], $_SESSION['cf_w'], $_SESSION['cf_h'], $_SESSION['cf_m']);



	// Send the user back to the main page

	header('Location: ../?status=0');

	exit;

}



else

{

	/*

	 * If the wrong request method was used or the "Send" button

	 * wasn't pressed (i.e. "Cancel" was pressed), return the user

	 * to the contact form with no message.

	 */

	header("Location: ../");

	exit;

}



?>

Assigning Messages to Status Codes

In index.php, we're going to check if a status code was sent, then use a switch to assign a message to each status code we'll be creating.

Place the following code into index.php:



<?php



// If an error exists, generate a message to correspond

if(isset($_GET['status']))

{

	$class = NULL;

	switch($_GET['status'])

	{

		case 0:

			$class = ' class="success"';

			$error = "Your message was sent successfully!";

			break;

		case 1:

			$error = "Make sure you answer the anti-spam question before sending!";

			break;

		case 2:

			$error = "Please enter your name before sending!";

			break;

		case 3: 

			$error = "Please enter a valid email address!";

			break;

		case 4:

			$error = "Please enter a message before sending!";

			break;

		case 5:

			$error = "Something went wrong while sending your message. Please try again!";

			break;

		case 6:

			$error = "Your message was sent, but the confirmation message failed. Sorry about that!";

			break;

		default:

			$error = "Something unexpected happened. Please try again!";

			break;

	}

	$err_msg = "<h3$class>$error</h3>";

}

else

{

	$err_msg = NULL;

}



?>

Note that in the event of status code 0, we add a class named "success" to the <h3> tag. This is so that our success message doesn't get styled to look like an error.

Using Saved Data to Repopulate Form Fields

If our form encountered an error, we want to place the previously submitted information back into the appropriate fields, as well as display the error message we just stored in the variable $err_msg.

To accomplish this, we need to access the session variables we created in contact.inc.php. At the very top of index.php, before our status code check, we're going to access the session with session_start(), then check if our field variables are set. If so, we'll strip any slashes using stripslashes() and store the value as an easy-to-access variable (i.e. $name for the $_SESSION['cf_n'] variable, $email for the $_SESSION['cf_e'] variable, etc.) for later use.



<?php



session_start();



// Load the saved session info if it exists

$name = (isset($_SESSION['cf_n'])) ? stripslashes($_SESSION['cf_n']) : NULL;

$email = (isset($_SESSION['cf_e'])) ? stripslashes($_SESSION['cf_e']) : NULL;

$web = (isset($_SESSION['cf_w'])) ? stripslashes($_SESSION['cf_w']) : NULL;

$human = (isset($_SESSION['cf_h'])) ? stripslashes($_SESSION['cf_h']) : NULL;

$msg = (isset($_SESSION['cf_m'])) ? stripslashes($_SESSION['cf_m']) : NULL;



// If an error exists, generate a message to correspond

if(isset($_GET['status']))

{

To display the saved information if it exists, we need to add value attributes to our form fields. In the HTML form within index.php, modify the code to contain the following:



	<h1> Simple Contact Form </h1>

	<?php echo $err_msg ?>

	<form action="inc/contact.inc.php" method="post" id="cf">

		<fieldset>

			<legend>Send a Message</legend>

			<label for="cf_n">Name (required)</label>

			<input id="cf_n" name="cf_n" type="text" maxlength="75"

				value="<?php echo $name ?>" />

			<label for="cf_e">Email (required)</label>

			<input id="cf_e" name="cf_e" type="text" maxlength="150"

				value="<?php echo $email ?>" />

			<label for="cf_w">Website (optional)</label>

			<input id="cf_w" name="cf_w" type="text" maxlength="150"

				value="<?php echo $web ?>" />

			<label for="cf_m">Enter Your Message Here</label>

			<textarea id="cf_m" name="cf_m"

				rows="14" cols="45"><?php echo $msg ?></textarea>

			<input type="submit" name="submit" class="submit" value="Send" />

			<input type="submit" name="submit" class="submit" value="Cancel" />

		</fieldset>

	</form>

Now, if we load the form in a browser and enter an incorrect email address or omit a field, we should be given an error message, and the form should still contain the values we entered before submitting.

Step 2 — Adding Spam Protection

Our first step when adding spam protection is to create a field that will be used to determine if a user is human (you may have noticed the variables referring to $human or $_POST['cf_h'] above).

Add the anti-spam field to our form in index.php:



	<h1> Simple Contact Form </h1>

	<?php echo $err_msg ?>

	<form action="inc/contact.inc.php" method="post" id="cf">

		<fieldset>

			<legend>Send a Message</legend>

			<label for="cf_n">Name (required)</label>

			<input id="cf_n" name="cf_n" type="text" maxlength="75"

				value="<?php echo $name ?>" />

			<label for="cf_e">Email (required)</label>

			<input id="cf_e" name="cf_e" type="text" maxlength="150"

				value="<?php echo $email ?>" />

			<label for="cf_w">Website (optional)</label>

			<input id="cf_w" name="cf_w" type="text" maxlength="150"

				value="<?php echo $web ?>" />

			<label for="cf_h">Spam Check: What is 4 + 5?</label>

			<input id="cf_h" name="cf_h" type="text" maxlength="4"

				value="<?php echo $human ?>" />

			<p class="hint">HINT: The answer is 9</p>

			<label for="cf_m">Enter Your Message Here</label>

			<textarea id="cf_m" name="cf_m" rows="14" cols="45"><?php echo $msg ?></textarea>

			<input type="submit" name="submit" class="submit" value="Send" />

			<input type="submit" name="submit" class="submit" value="Cancel" />

		</fieldset>

	</form>

Next, in contact.inc.php, we need to verify that the user did, indeed, answer "9" to the challenge question. To do so, near the top of contact.inc.php just after we save the form information, we can simply add one more check:



	// Store the posted information as session variables

	$_SESSION['cf_n'] = $p['cf_n'];

	$_SESSION['cf_e'] = $p['cf_e'];

	$_SESSION['cf_w'] = $p['cf_w'];

	$_SESSION['cf_h'] = $p['cf_h'];

	$_SESSION['cf_m'] = $p['cf_m'];



	// Make sure the spam protection didn't fail

	if($p['cf_h'] != '9' && $p['cf_h'] != 'nine')

	{

		header("Location: ../?status=1");

		exit;

	}



	// If the name field was filled out, sanitize the input and store it

	if(!empty($p['cf_n']) && $p['cf_n']!='Name (required)')

	{

Our check will allow for both the answer "9" and the answer "nine", because we don't want to confuse anyone. If the form isn't filled out correctly, the user is redirected to the form with a status code. Otherwise, execution continues normally.

Some spam-bots don't acknowledge the header() command, so we use the exit; command just to be safe. In the event that a spam bot is using our contact form, it will either dead-end when the script exits, or it will end up back at the form with no idea that it failed.

This isn't bulletproof, but it works for a small site that just wants to avoid a ton of junk mail.

View the Demo | Download the Source

Summary

This form will allow a user to contact you directly through your site. It also provides usability enhancements to save the user time in the event they make a mistake while submitting the form. Our anti-spam measures are pretty low-impact, which makes it easy for a user to prove they are human, while keeping most of the bots out.

Do you have a better way to prevent spam? Any ideas on bulletproofing this script? Let me know in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

Send HTML and Plain Text Versions of Email

Recently, I've been dealing with sending email from applications an awful lot. At first glance, sending a basic message from PHP is easy:



<?php

	mail('test@example.com', 'Subject Line', 'A message!');

?>

Sending complex messages with HTML formatting and/or attachments, however, can be tricky. Today, we're going to cover sending HTML email to a user while still including a plain text version for email clients that don't support HTML.

See the Demo | Download the Source

Part One: Understanding Email Structure

Basic email structure is something like this:

To: someone@example.com

Subject: Test Email

From: Test <testing@example.com>

MIME-Version: 1.0

Content-Type: multipart/alternative;

 boundary="==PHP-alt_xd50dc5b6ee7a015fb67e36ba692a93ad961d5f7dx"

X-Nonspam: None





--==PHP-alt_xd50dc5b6ee7a015fb67e36ba692a93ad961d5f7dx

Content-Type: text/plain; charset="iso-8859-1"

Content-Transfer-Encoding: 7bit



This Is a Plain Text Email



This message has no HTML. http://w3schools.com



--==PHP-alt_xd50dc5b6ee7a015fb67e36ba692a93ad961d5f7dx

Content-Type: text/html; charset="iso-8859-1"

Content-Transfer-Encoding: 7bit 



<body>

<h1>This Is an HTML Email</h1>

<p>

This message is composed in <a href="http://w3schools.com">HTML</a>.

</p>

</body>

</html>

--==PHP-alt_xd50dc5b6ee7a015fb67e36ba692a93ad961d5f7dx--

This looks a little daunting at first, but if we take it in chunks, it's pretty easy to understand. An email with both a plain text and HTML version will have the following three parts:

Headers

Plain text version

HTML version

That's all there is to it! These three sections are separated by a boundary string, which is essentially a random string to identify each section of the message.

To further our understanding, let's take each section one-by-one.

Headers

Our first section in an email is the message headers.

To: someone@example.com

Subject: Test Email

From: Test <testing@example.com>

MIME-Version: 1.0

Content-Type: multipart/alternative;

 boundary="==PHP-alt_xd50dc5b6ee7a015fb67e36ba692a93ad961d5f7dx"

The "To", "Subject", and "From" headers, separated by a line break, are pretty straightforward: they determine who the message is to, what the subject is, and who the message is from.

Next, we pass a MIME-Type, which is an Internet standard that allows us to support several things in email, including multiple parts in message bodies, which is what we need for this exercise.

The "Content-Type" header is set to multipart/alternative, which tells the email client that the message is in multiple pieces: one for plain text, and one for HTML. The "alternative" means that the email client will choose one or the other based on user settings or the client's limitations.

Finally, on the next line, we add our boundary. This is a random string. The only real requirement is that it's something that wouldn't occur in the body of the message.

NOTE: Notice that the boundary string is preceded by a space. This is because it's tied to the Content-Type header.

The Plain Text Version

To note the start of the next section of the email, we add our boundary string, preceded by two hyphens. Then we tell the email client what type of content is being served, what character set to use, and how to encode it. After that, we can just add our message text.



--==PHP-alt_xd50dc5b6ee7a015fb67e36ba692a93ad961d5f7dx

Content-Type: text/plain; charset="iso-8859-1"

Content-Transfer-Encoding: 7bit



This Is a Plain Text Email



This message has no HTML. http://w3schools.com

The HTML Version

For the HTML version of the message, we again start by adding our boundary string to signify that the next section of the message is starting. Then we add the content type, character set, and encoding settings, followed by the HTML.

Finally, to end the message, we add the boundary string one more time.



--==PHP-alt_xd50dc5b6ee7a015fb67e36ba692a93ad961d5f7dx

Content-Type: text/html; charset="iso-8859-1"

Content-Transfer-Encoding: 7bit 



<body>

<h1>This Is an HTML Email</h1>

<p>

This message is composed in <a href="http://w3schools.com">HTML</a>.

</p>

</body>

</html>

--==PHP-alt_xd50dc5b6ee7a015fb67e36ba692a93ad961d5f7dx--

Sending Multipart Messages with PHP

Something that really tripped me up when I first started writing scripts to send emails was the way headers seemed to break depending on how line breaks were inserted. I spent a lot of time playing with rn and fuming over seemingly nonsensical glitches until I finally tried the heredoc syntax.

To demonstrate one method of sending multipart emails with PHP, let's write a function to accept an email address and send a message to it with multiple parts.

Step 1: Write the Function

First and foremost, we need to write our function. We're going to call it sendEmail(), and it will accept one argument, $to, that will contain the email address.

To start, let's build our subject, headers, and message, then send the message using mail() and check the success, then output a message to the user letting them know what happened.



function sendEmail($email)

{

	$to = trim($email);



	$subject = "Test Email";



	// Generate a random boundary string

	$mime_boundary = '_x'.sha1(time()).'x';



	// Using the heredoc syntax to declare the headers

	$headers = <<<HEADERS

From: Test <test@example.com>

MIME-Version: 1.0

Content-Type: multipart/alternative;

 boundary="==PHP-alt$mime_boundary"

HEADERS;



	// Use our boundary string to create plain text and HTML versions

	$message = <<<MESSAGE



--==PHP-alt$mime_boundary

Content-Type: text/plain; charset="iso-8859-1"

Content-Transfer-Encoding: 7bit



This Is a Plain Text Email



This message has no HTML. http://w3schools.com



--

This message was generated automatically as a demonstration on

www.EnnuiDesign.com



If you did not request this message, please notify answers@ennuidesign.com



--==PHP-alt$mime_boundary

Content-Type: text/html; charset="iso-8859-1"

Content-Transfer-Encoding: 7bit 

<html>

<body>

<h1>This Is an HTML Email</h1>

<p>

This message is composed in <a href="http://w3schools.com">HTML</a>.

</p>

<p>

--<br />

This message was generated automatically as a demonstration on

<a href="http://www.ennuidesign.com">www.EnnuiDesign.com</a>

</p>

<p>

If you did not request this message, please notify 

<a href="mailto:answers@ennuidesign.com">answers@ennuidesign.com</a>

</p>

</body>

</html>

--==PHP-alt$mime_boundary--

MESSAGE;



	// Send the message

	if(!mail($to, $subject, $message, $headers))

	{

		// If the mail function fails, return an error message

		return "Something went wrong!";

	}

	else

	{

		// Return a success message if nothing went wrong

		return "Message sent successfully. Check your email!";

	}

}

Step 2: Validate the Email Address

We need to verify that an email address submitted to our function is valid before trying to send an email to it. Otherwise, we could see an internal server error, which is never fun to see.

To validate our email address, we're going to use a regular expression on our input after trimming the extra whitespace using trim(). If the email is valid, we can safely pass it to the rest of the function.



function sendEmail($email)

{

	// This pattern will match email addresses

	$pattern = "/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/i";

	if (preg_match($pattern, trim($email)))

	{

		// Remove leading and trailing whitespace

		$to = trim($email);

	}

	else

	{

		// Return an error message so the user knows what went wrong

		return "The email address you entered was invalid. Please try again!";

	}



	$subject = "Test Email";



	// Generate a random boundary string

	$mime_boundary = '_x'.sha1(time()).'x';



	// Using the heredoc syntax to declare the headers

	$headers = <<<HEADERS

From: Test <test@example.com>

MIME-Version: 1.0

Content-Type: multipart/alternative;

 boundary="==PHP-alt$mime_boundary"

HEADERS;



	// Use our boundary string to create plain text and HTML versions

	$message = <<<MESSAGE



--==PHP-alt$mime_boundary

Content-Type: text/plain; charset="iso-8859-1"

Content-Transfer-Encoding: 7bit



This Is a Plain Text Email



This message has no HTML. http://w3schools.com



--

This message was generated automatically as a demonstration on

www.EnnuiDesign.com



If you did not request this message, please notify answers@ennuidesign.com



--==PHP-alt$mime_boundary

Content-Type: text/html; charset="iso-8859-1"

Content-Transfer-Encoding: 7bit 

<html>

<body>

<h1>This Is an HTML Email</h1>

<p>

This message is composed in <a href="http://w3schools.com">HTML</a>.

</p>

<p>

--<br />

This message was generated automatically as a demonstration on

<a href="http://www.ennuidesign.com">www.EnnuiDesign.com</a>

</p>

<p>

If you did not request this message, please notify 

<a href="mailto:answers@ennuidesign.com">answers@ennuidesign.com</a>

</p>

</body>

</html>

--==PHP-alt$mime_boundary--

MESSAGE;



	// Send the message

	if(!mail($to, $subject, $message, $headers))

	{

		// If the mail function fails, return an error message

		return "Something went wrong!";

	}

	else

	{

		// Return a success message if nothing went wrong

		return "Message sent successfully. Check your email!";

	}

}

See the Demo | Download the Source

Summary

This entry was aimed at showing the anatomy of a multipart email message, as well as demonstrating the use of the heredoc syntax to easily put headers in place. Additionally, we used a regular expression to match valid email patterns.

Do you have a better regex? How do you handle headers? Let me know in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

ITT #16: Create a Template Parsing System with PHP

One of my most recent obsessions has been with simplifying my custom CMS to allow me to generate full sites without changing anything but HTML template files and a basic configuration file. In this week's Instant Tip Tuesday, we'll explore one of the ways we can dynamically generate output and wrap it in a template file.

NOTE: This is a proof-of-concept type of thing, not a production-ready script. Be aware that I haven't used a script like this on a real site, and therefore have no idea if it's fast, effective, or even useful. For now, this is just a "hey, cool!" sort of thing; use with discretion.

Download the Files

So, What Are We Trying to Do?

To try and explain what our goal is, here, let's look at a couple examples. For our examples, we'll be using the following simple array:



$entries = array(

	array(

		'title' => 'Title One',

		'entry' => 'This is some text.'

	),

	array(

		'title' => 'Title Two',

		'entry' => 'This is some more text.'

	)

);

The Usual Method

In a traditional script, we would need to write something similar to the following in order to output both entries in clean HTML:



<?php

foreach($entries as $e) {

?>



	<h1> <?php echo $e['title'] ?> </h1>

	<p> <?php echo $e['entry'] ?> </p>



<?php

} // End foreach

?>

While this isn't bad, it can get confusing. It's especially tricky when we start dealing with entries that have more elements, such as the author, date posted, images, and so on.

The Template Method

What if we could put together some scripts that would allow us to simply edit an HTML file to lay out our pages:



<h1> {title} </h1>

<p> {entry} </p>

That's it. Seriously.

To use this in our scripts, we just call a quick function between the <body> tags of our public HTML file:



<html>



<head>

	<title> Template Testing </title>

</head>



<body>

	<?php displayEntries($entries, $template) ?>

</body>

</html>

Each entry would be processed and formatted according the template we specified in an external, easy to edit file.

How Do We Do That?

Planning Our Steps

In order to parse a template file, we're going to need to use several advanced programming techniques. The steps we'll be using are:

Build a public HTML page to act as a container

Build a template file

Load the contents of the template file into a variable

Run a regular expression to find all template tags

Use preg_replace_callback() with a currying function to send the matches to a replacement function

Match the template tag text with an array index and use the corresponding data from the array

Set up a loop that will use the template for each entry in the array

Setting Up Our Project

This project will consist of three files:

index.php — The public HTML file

template.html — The entry template

functions.php — Our parsing functions

Step 1 — Build a Public HTML Page

Because this is a very basic example, our container file (index.php) will be very basic. Create the file and insert the following code into it:



<html>



<head>

	<title> Template Testing </title>

</head>



<body>

	

</body>

</html>

This file will eventually call the function that displays our entries.

Step 2 — Build a Template File

Again, with this being an extremely simple example, our template.html file is only two lines:



<h1> {title} </h1>

<p> {entry} </p>

We're going to use curly braces to wrap our template tags. These tags need to correspond to a key in our array, so to access $entry['title'] we need to use {title}. This will work for any named array index, so if we want to manipulate data, we can just add a new named value to the array.

Step 3 — Loading the Template

This step is the easiest. Our template from above will be saved in an external HTML file called template.html. In order to perform our replacement functions on the contents of the file, we need to load the entire file as into a variable in index.php:



<?php



// Load the template into a variable

$template = file_get_contents('template.html');



?>

Now we have the contents of template.html available to run our regular expression with.

Step 4 — Parse the Template with a Regular Expression

At this point, we have a file to display our output, and a template to shape our output. All that's left to do is write the scripts that will fit our data into the template.

As we move into this code, it might look a little overwhelming at first. We'll step through everything by the end of the article, though.

The Regular Expression

In order to find our template tags, we need to locate any data enclosed within curly braces. The data needs to be a letter with no spaces or punctuation except underscores. To accomplish this, we use the following regular expression:



$pattern = "/{(w+?)}/"; // Matches any template tag

The basics of what we're doing here go something like this: we start and finish with a forward slash because these are delimiters for regular expressions; the curly braces need to be escaped because they are special characters, so we use a backslash to do so ({); to capture the tag name for later use, we need to enclose it in parentheses, which means we can access it as a match later; the w+ means, "match any word character (a-z and underscores) one or more times"; the question mark means the expression is lazy and will stop matching at the first closing curly brace it finds.

That's a lame crash course in regular expressions, but that's not our focus today. We can rest assured knowing that it works and move on.

Parsing the Template

Armed with our regular expression, we need to use preg_replace_callback() to parse our template. The way this works is that we supply a pattern, a function to be called on the matches, and the string on which we're running the regex.

We have to jump ahead a little bit here, so stay with me. The callback function we're passing to preg_replace_callback() is going to be a currying function. We'll get to what that is and how it works in just a minute.

The Parsing Function

With the regex ready and an idea of how we need to parse the template, we can write our function, called parseTemplate():



function parseTemplate($replacement_array, $template)

{

	$pattern = "/{(w+?)}/i"; // Matches any template tag



	/* 

	 * Call the currying function, tell it to accept two

	 * arguments, and only pass it one: the array containing

	 * values to replace the tags with.

	 */

	$callback = curry('replaceTags', 2);



	return preg_replace_callback($pattern, $callback($replacement_array), $template);

}

Step 5 — Currying

This is by far the most complicated part of this project. Currying is a concept by which we can call a function halfway. Essentially, we're able to call, for instance, a function that accepts two arguments, but only pass one of the arguments, storing a new function in a variable that will allow us to pass the other argument and complete the function later.

Because I don't know all of the theory behind currying, I'm not going to get into a whole lot of detail lest I put my foot in my mouth. All we need to know for this project is that using currying, we'll be able to pass a half-cocked replacement function with our entry array to preg_replace_callback(), then add the matches returned into the mix and come up with a properly parsed template.

The currying function looks like this:



function curry($func, $arity) {

	/* 

	 * Creates an anonymous function to accept incomplete

	 * argument lists and allow the rest of the arguments

	 * to be supplied later

	 */ 

	return create_function('', "

		// Get an array of the arguments passed to $func

		$args = func_get_args();



		/*

		 * If the number of arguments supplied to the passed

		 * function is greater than or equal to the number of 

		 * arguments defined in $arity, call the function and

		 * return its output

		 */

		if(count($args) >= $arity)

		{

			return call_user_func_array('$func', $args);

		}



		/*

		 * Otherwise, save the function paramters in a variable

		 * and return a function that will accept more parameters

		 * while preserving the original passed arguments

		 */

		$args = var_export($args, 1);

		return create_function('','

			$a = func_get_args();

			$z = ' . $args . ';

			$a = array_merge($z,$a);

			return call_user_func_array('$func', $a);

		');

	");

}

When we called our currying function, we pass replaceTags() as the first parameter, and 2 as the second parameter. This means that we are creating an anonymous function that will accept two parameters. We then pass the replacement array as the first parameter in preg_replace_callback(). The returned matches are passed as the second parameter when the callback fires, effectively completing replaceTags() and returning our parsed template.

Step 6 — Match the Template with Our Array

We're ready to write the function replaceTags() that is called by our currying function. This is a pretty straightforward function, in which we check that the template tag exists in the array as a key, then return the value. If the tag doesn't exist, the tag is returned as plain text.

When we write our funciton, it looks like this:



function replaceTags($transformations, $matches)

{

	// To avoid errors, make sure the array contains a key that matches

	if(array_key_exists($matches[1], $transformations))

	{

		// Return the array value whose key matches the template tag

		return $transformations[strtolower($matches[1])];

	}



	// If not, return the template tag as is

	else

	{

		return '{'.$matches[1].'}';

	}

}

Step 7 — Loop Through the Entries

We're pretty much done at this point. All we need is one more function to loop through our entry array and put each one into the template.

Our function, called displayEntries(), simply sets up a foreach loop and pushes each array item through the template parsing functions, echoing the output to the browser. We could just as easily store the output in a variable, but for this example it's not necessary.



function displayEntries($entries, $template)

{

	foreach($entries as $e)

	{

		echo parseTemplate($e, $template);

	}

}

Putting Everything Together

To implement our functions, simply add the following to the top of index.php:



<?php



// Include the parsing functions

include_once 'functions.php';



// Load the template into a variable

$template = file_get_contents('template.html');



// Grab the information we need to parse

$entries = loadEntries();



?>

Notice we're using a function called loadEntries(). On a live site, this would probably grab entries from a database. In this example, the function simply returns the array we declared above:



function loadEntries()

{

	return array(

		array(

			'title' => 'Title One',

			'entry' => 'This is some text.'

		),

		array(

			'title' => 'Title Two',

			'entry' => 'This is some more text.'

		)

	);

}

We'll place loadEntries() in functions.php for easy access.

The final step is to call displayEntries between the <body> tags to output our templated entries. The finished index.php looks like this:



<?php



// Include the parsing functions

include_once 'functions.php';



// Load the template into a variable

$template = file_get_contents('template.html');



// Grab the information we need to parse

$entries = loadEntries();



?>

<html>



<head>

	<title> Template Testing </title>

</head>



<body>

	<?php displayEntries($entries, $template) ?>

</body>

</html>

Download the Files

Summary

In this entry, we created a simple templating system as a proof of concept. We also explored currying functions and regular expressions on a basic level.

What do you think? Any ideas for improvements? Any constructive criticism? I'm all ears! Hit me in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

ITT #15: Create a Simple Contact Form

NOTE: This entry has been improved upon by adding spam protection and sessions. It's strongly recommended that you use the newer version of the simple contact form.

Making yourself accessible is one of the most important aspects of a site that aims to connect with its audience online, and nothing makes a person more accessible than an easy-to-use contact form.

In this week's Instant Tip Tuesday, we'll build a simple (less than 200 lines of code, including comments) contact form that will allow users to contact us without needing to open their mail client or copy and paste our email address into their web mail service. Our finished contact form will do the following:

Accept the user's name, email, URL, and a message

Verify that required fields were filled out

Validate the supplied email address

Send the user's message to an email address of our choice

Send the user a confirmation that their message was sent

View the Demo | Download the Files

Step 1 — The Message Form

Our first step is to generate the form so that our user can create their message. As we decided above, we want to accept the user's name, email address, website URL, and a message.

Because we're all savvy with HTML, we won't cover the "why" for the following code. The following is valid XHTML 1.0 Strict:



<h1> Simple Contact Form </h1>

<form action="inc/contact.inc.php" method="post" id="cf">

	<fieldset>

		<legend>Send a Message</legend>

		<label for="cf_n">Name (required)</label>

		<input id="cf_n" name="cf_n" type="text" maxlength="75" />

		<label for="cf_e">Email (required)</label>

		<input id="cf_e" name="cf_e" type="text" maxlength="150" />

		<label for="cf_w">Website (optional)</label>

		<input id="cf_w" name="cf_w" type="text" maxlength="150" />

		<label for="cf_m">Enter Your Message Here</label>

		<textarea id="cf_m" name="cf_m" rows="14" cols="45"></textarea>

		<input type="submit" name="submit" class="submit" value="Send" />

		<input type="submit" name="submit" class="submit" value="Cancel" />

	</fieldset>

</form>

We won't go into details on the styling of the form so that we can focus on the processing, but feel free to take a look at the CSS in the demo for a starting point.

Step 2 — Processing the Form

When the user submits the form, it sends the information via the POST method to the file inc/contact.inc.php. Our next step is to write the script that will process the input and send the message.

Validate the Data

Before sending any messages, we need to make sure that the user actually filled out the form and entered valid information. To do this, we first verify that the POST method was used to access the script and that the "Send" button was pressed to submit the form.

After that, we simply check that each form is not empty (and also not equal to the value of the field's label), then store the information in a variable. The email address is special, which we'll talk about in a minute.



<?php



/*

 * If the form was submitted and the "Send" button pressed, 

 * continue processing the data

 */

if($_SERVER['REQUEST_METHOD']=='POST' && $_POST['submit']=='Send')

{

	$err = NULL;



	// If the name field was filled out, sanitize the input and store it

	if(!empty($_POST['cf_n']) && $_POST['cf_n']!='Name (required)')

	{

		$name = htmlentities($_POST['cf_n'], ENT_QUOTES);

	}

	else

	{

		// If the name wasn't entered, create an error message

		$err .= "Please enter your name!<br />";

	}



	// If the email is set, validate and store it

	if(!empty($_POST['cf_e']) && $_POST['cf_e']!='Email (required)')

	{

		// Define a regex pattern to validate the email address

		$pattern = "/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/i";

			if (preg_match($pattern, $_POST['cf_e']))

			{

				$email = $_POST['cf_e'];

			}



			else

			{

				// If the email doesn't match the pattern, error

				$err .= "Please enter a valid email address!<br />";

			}

	}



	// If no email was entered, generate an error message

	else

	{

		$err .= "Please enter a valid email address!<br />";

	}



	// Check the website field

	if(!empty($_POST['cf_w']) && $_POST['cf_w']!='Website (optional)')

	{

		$site = htmlentities($_POST['cf_w'], ENT_QUOTES);

	}

	else

	{

		// Because the website is optional, no error if empty

		$site = "none";

	}



	// Ensure a message was entered, then sanitize it

	if(!empty($_POST['cf_m']) && $_POST['cf_m']!='Enter Your Message Here')

	{

		$message = strip_tags($_POST['cf_m']);

	}



	// If no message was entered, adds an error message

	else

	{

		$err .= "Please enter a message!<br />";

	}



	// Process the sanitized and validated data

}



else

{

	/*

	 * If the wrong request method was used or the "Send" button

	 * wasn't pressed (i.e. "Cancel" was pressed), return the user

	 * to the contact form with no message.

	 */

	header("Location: ../");

	exit;

}



?>

As noted in the comments above, each submitted field is checked, then sanitized and saved in a variable.

If any of our required fields aren't properly filled out, we store a message in the variable $err. Note that we are appending messages to the variable rather than overwriting the variable. This way, we're able to tell the user every error that occurred, rather than just the last one.

The email check is performed by using a regex pattern, then matching the user input against the pattern using preg_match(). If a match is found, this means the email is valid, so we save it in a variable.

Process the Data

Now that we have our data stored, we're ready to start sending messages. First, we need to ensure that no errors occurred. Since the $err variable is NULL by default, we can check if it's set to catch any errors.

If an error occurred, we simply display the stored error messages and provide a link to try again. (NOTE: In a production environment, it would probably be a good idea to store the input in a session to prevent the user from needing to re-enter their message. This was left out in the interest of keeping this tip short and to-the-point.)

If no errors occurred, we place the supplied information into an email message and fire it off to the designated email address. Then, if the first message sent successfully, we send the user a confirmation email.

All of that functionality is accomplished with this code:



<?php



	// Validate and sanitize the input (see above)



	/*

	 * With the data sanitized, we need to check for errors to ensure

	 * that the message is valid before sending it

	 */

	if(isset($err))

	{

		echo '<h1> Oops! </h1>', $err, '<br /><a href="../">Try again!</a>';

		exit;

	}



	/*

	 * If no errors occurred, send the message

	 */

	else

	{

		$to = "Ennui Design <answers@ennuidesign.com>";

		$subject = "[Ennui Design] Message from the Ennui Design contact form";

		$headers = <<<MESSAGE_HEADER

From: $name <$email>

Content-Type: text/plain

MESSAGE_HEADER;

		$msg = <<<MESSAGE_BODY

Name:  $name

Email: $email

URL:   $site



Message:



$message



--

This message was sent via the contact form on EnnuiDesign.com

MESSAGE_BODY;

		if(!mail($to, $subject, $msg, $headers))

		{

			header("Location: ../?send=error");

			exit;

		}



		// Now send a confirmation email to the user.

		$conf_to  = "$name <$email>";

		$conf_sub = "Thank You for Contacting Us!";

		$conf_headers = <<<MESSAGE_HEADER

From: Ennui Design <donotreply@ennuidesign.com>

Content-Type: text/plain

MESSAGE_HEADER;

		$conf_message = <<<MESSAGE_BODY

Thank you for contacting us! Your message

was sent successfully, and we will get back

to you as quickly as possible.



All the Best,

Ennui Design



answers@ennuidesign.com

www.EnnuiDesign.com

MESSAGE_BODY;

		if(!mail($conf_to, $conf_sub, $conf_message, $conf_headers))

		{

			header("Location: ../?send=error");

			exit;

		}



		// Send the user back to the main page

		header('Location: ../?send=successful');

		exit;

	}



	// Remainder of script (see above)



?>

To send an email with PHP in plain text, all we have to do is put together a "to" address, a subject, the message itself, and the message headers (such as the content type and "from" address). With the message assembled, we simply run the mail() function and check that it fired successfully. If either call fails, we send the user back to the contact form with an error code in the URL to allow for a message to be displayed.

Make It Pretty

To add some client-side form validation, we'll implement the beautiful-forms.js script featured on Ennui Design a few months back. This is done by adding the following to the form HTML:



<script type="text/javascript" src="js/beautiful-forms.js"></script>

<script type="text/javascript">

	var formId = "cf";

	var reqFields = new Array('cf_n','cf_e','cf_m');

	if ( document.getElementById(formId) ) {

		prettyForms("cf", reqFields);

	}

</script>

For an explanation of how and why this works, read about JavaScript form validation with beautiful-forms.js.

View the Demo | Download the Files

Summary

This contact form is quick and dirty, but it will easily get you up and running with a new point of contact for your users. What do you use to make yourself accessible to users? How would you improve the contact form above? Let me know in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

ITT #14: Optimizing MySQL Queries

DISCLAIMER: I am by no means a MySQL optimization expert, and I can't guarantee that the information provided in this blog entry will take a query from painfully slow to blazing fast. I can, however, guarantee that this entry was written with the best intentions and aims to explore some of the more advanced features of MySQL.

This week, I wanted to share some of my recent experiments with MySQL queries in regard to lowering the number of requests sent to the database server and, hopefully, avoiding the bottleneck that can form on sites that rely heavily on database interaction.

What Are MySQL Joins?

A JOIN in MySQL is a tool that allows developers to combine one or more tables in a query. There are a few flavors of JOIN, but we'll be focusing on LEFT JOIN today.

A LEFT JOIN in MySQL combines rows from two tables. We're able to narrow our searches as usual using a WHERE clause, and we can specify how the tables are joined with a USING clause.

A Simple Example

It's tough to explain JOIN in plain English without getting lost in a bunch of technical jargon (as I'm sure anyone who ventures into the MySQL manual is already aware). It's far easier to provide a concrete example to illustrate the way that LEFT JOIN works.

We'll be using three tables in this example: users, lists, and items. These three tables will be the basis of a theoretical wish list application, with a user's unique ID and name stored in the users table, unique list ID and user ID stored in lists, and individual item IDs, containing list ID, and item text in the items table.



Table: users

+---------+-----------------+

| user_id | user_name       |

+---------+-----------------+

| 1       | Jason Lengstorf |

+---------+-----------------+

| 2       | John Doe        |

+---------+-----------------+



Table: lists

+---------+---------+

| list_id | user_id |

+---------+---------+

| 1       | 2       |

+---------+---------+

| 2       | 1       |

+---------+---------+



Table: items

+---------+---------+----------------------+

| item_id | list_id | item_text            |

+---------+---------+----------------------+

| 1       | 1       | iPod Touch           |

+---------+---------+----------------------+

| 2       | 1       | Chuck Season 2       |

+---------+---------+----------------------+

| 3       | 1       | Nike Free Shoes      |

+---------+---------+----------------------+

| 4       | 2       | F-Stop Maverick Bag  |

+---------+---------+----------------------+

| 5       | 2       | Bon Iver Tickets     |

+---------+---------+----------------------+

| 6       | 2       | Rogue Mocha Porter   |

+---------+---------+----------------------+

Imagine we've been supplied with a user's ID and need to retrieve the items on his wish list. Without using JOIN, we would need two MySQL queries: one to retrieve the list ID associated with the user, and one to retrieve all the items associated with that list ID.

Example 1 (Not Using `JOIN`)



<?php

	// Establish a MySQL connection

	$link = new PDO(DBINFO, DBUSER, DBPASS);



	// Retrieve the list ID associated with the user ID

	$sql = "SELECT list_id

			FROM lists

			WHERE user_id = ?

			LIMIT 1";

	$stmt = $link->prepare($sql); // Prepare the statement

	if($stmt->execute(array($_POST['user_id'])))

	{

		$row = $stmt->fetch(); // Load the results in an array

		$list_id = $row['list_id'];

		$stmt->closeCursor(); // Free memory used in this query



		// Retrieve the items associated with the list ID

		$sql = "SELECT item_text

				FROM items

				WHERE list_id = $list_id";

		foreach($link->query($sql) as $row) {

			// Output the wish list items

			echo $row['item_text'], "<br />";

		}

	}

?>

Assuming the user has supplied the user id of 1, we would see the following output:



F-Stop Maverick Bag

Bon Iver Tickets

Rogue Mocha Porter

This returns the desired result, but sending two queries just feels inefficient. Fortunately, we can shorten this script to just one query using a JOIN.

Example 1 (Using `JOIN`)



<?php

	// Establish a MySQL connection

	$link = new PDO(DBINFO, DBUSER, DBPASS);



	// Retrieve the items associated with the user ID

	$sql = "SELECT item_text

			FROM lists

			LEFT JOIN items

			USING (list_id)

			WHERE user_id = ?";

	$stmt = $link->prepare($sql); // Prepare the statement

	if($stmt->execute(array($_POST['user_id'])))

	{



		// Loop through the returned results

		while($row = $stmt->fetch()) {

			// Output the wish list items

			echo $row['item_text'], "<br />";

		}



		$stmt->closeCursor(); // Free memory used in this query

	}

?>

Using a LEFT JOIN, we were able to combine the lists and items tables, grouping entries by their list IDs. Essentially, by using a JOIN, we're temporarily creating a new table that looks like this:



SELECT * FROM lists LEFT JOIN items USING (list_id)

+---------+---------+---------+---------------------+

| list_id | user_id | item_id | item_text           |

+---------+---------+---------+---------------------+

| 1       | 2       | 1       | iPod Touch          |

+---------+---------+---------+---------------------+

| 1       | 2       | 2       | Chuck Season 2      |

+---------+---------+---------+---------------------+

| 1       | 2       | 3       | Nike Free Shoes     |

+---------+---------+---------+---------------------+

| 2       | 1       | 4       | F-Stop Maverick Bag |

+---------+---------+---------+---------------------+

| 2       | 1       | 5       | Bon Iver Tickets    |

+---------+---------+---------+---------------------+

| 2       | 1       | 6       | Rogue Mocha Porter  |

+---------+---------+---------+---------------------+

With all the information available from both tables, we're able to use our user's ID to directly select wish list items.

Going a Step Further

Our wish list isn't very useful if it only shows a list of products. In order to make any sense, we should probably show the user's name to indicate who it is that wants the displayed items.

This presents a problem for us, however, because we now need to pull information from all three tables in order to gather all the necessary data.

Example 2 — Combining Three Tables Using `LEFT JOIN`



<?php

	// Establish a MySQL connection

	$link = new PDO(DBINFO, DBUSER, DBPASS);



	// Retrieve the user's name and associated list items

	$sql = "SELECT user_name, item_text

			FROM users

			LEFT JOIN lists

			USING (user_id)

			LEFT JOIN items

			USING (list_id)

			WHERE user_id = ?";

	$stmt = $link->prepare($sql); // Prepare the statement

	if($stmt->execute(array($_POST['user_id'])))

	{



		// Loop through the returned results

		while($row = $stmt->fetch()) {



			// Save the user name

			$user_name = $row['user_name'];



			// Create an array of items

			$items[] = $row['item_text'];

		}



		$stmt->closeCursor(); // Free memory used in this query



		// Output the user's name and identify what we're displaying

		echo "$user_name's Wish List<br /><br />n";



		// Loop through the items and output to the browser

		foreach($items as $item) {

			echo $item, "<br />";

		}

	}

?>

With the above query, we effectively retrieve the user's name from the users table, then pull the list ID that matches the user's ID, and finally retrieve all items that match the list ID.

The above script will output the following, assuming user ID 1 was passed:



Jason Lengstorf's Wish List



F-Stop Maverick Bag

Bon Iver Tickets

Rogue Mocha Porter

By combining the queries using LEFT JOIN, we create a much easier to read snippet of code. Also, by reducing the number of queries run, we can hope to see faster execution in our scripts.

Summary

Like I said, I'm not a MySQL optimization expert, but from what I've read and my limited testing, it seems pretty safe to say that using JOIN to reduce the number of queries in our scripts is a good way to not only enhance the readability of our scripts, but also to grease them up for faster execution.

Do you know any tricks for speeding up MySQL queries? How do you feel about using JOIN in queries? Let me know in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

ITT #13: Build a Menu with Recursive Functions

To continue my recent obsession with array handling, I want to spend this week talking about recursive functions and their application in dealing with arrays.

The goal of our exercise today is to build a menu, complete with sub-menu, all based off one function that runs recursively.

What Is Recursion?

In computer science, recursion is a concept in which a function can call itself. This is similar to the idea of looping in PHP, but it provides an opportunity, in the case of array handling, to add more fine-grain control into a program.

On a basic level, recursion can be illustrated with the following code:



function plusOne($x)

{

	if($x<10)

	{

		echo ++$x, "<br />";

		plusOne($x);

	}

	else

	{

		echo 'Finished! <br />';

	}

}

Calling this function will result in the following output:

1

2

3

4

5

6

7

8

9

10

Finished!

Obviously, the above could have been accomplished very simply with a loop, but it shows the basic idea behind recursion.

Constructing a Menu

In order to write our recursive array-handling function, let's first define the array we'll be using. To build a menu, we'll need an element for each menu item that contains information about each item.

NOTE: Bear in mind that this example is very bare-bones, but should extend easily to include further information about your menu, including classes, IDs, or any other attributes you would want to add.

The Basic Array Structure

To start, let's build a very basic menu. We'll pretend we have a site that needs About Us, Blog, Links, and Contact pages. To create this, our array might look like this:



$menu = array(

	'about' => array(

		'display' => 'About Us'

	),

	'blog' => array(

		'display' => 'Read Our Blog'

	),

	'links' => array(

		'display' => 'Recommended Links'

		)

	),

	'contact' => array(

		'display' => 'Contact Us'

	)

);

Above, we've given each menu item an array key that easily defines it, and in the case of this example, will serve as the item's URL unless it is otherwise defined.

Adding Sub-Menus

Let's say that under our Recommended Links item, we need to add a sub-menu that holds links for a Products and a Services page. Additionally, the Services page needs a sub-menu that leads the user to Local and Online services.

To accomplish this, we'll add another array element to our "links" element that contains an array holding information about our sub-menus:



	'links' => array(

		'display' => 'Recommended Links',

		'sub' => array(

			'products' => array(

				'display' => 'High-Quality Products',

				'url' => 'links/#products'

			),

			'services' => array(

				'display' => 'Helpful Services',

				'url' => 'links/#services',

				'sub' => array(

					'local' => array(

						'display' => 'Local Services',

						'url' => 'links/#services_local'

					),

					'online' => array(

						'display' => 'Online Services',

						'url' => 'links/#services_online'

					)

				)

			)

		)

	)

Notice that we included an element called "sub" that holds an array with two elements: "products" and "services". Also, note that the "services" element has a "sub" element as well, containing an array with two elements: "local" and "online".

We've also added a "url" element to our sub-menu items. This is so that we can have more control over where the menu is sending our users.

Turning the Array into a Usable Menu

With our array created, we need to write a function that will crawl through the array and build HTML markup based on the information supplied to it. To start, we need to define our function, which we'll call buildMenu().



function buildMenu($menu_array, $is_sub=FALSE)

{

	/*

	 * If the supplied array is part of a sub-menu, add the

	 * sub-menu class instead of the menu ID for CSS styling

	 */

	$attr = (!$is_sub) ? ' id="menu"' : ' class="submenu"';

	$menu = "<ul$attr>n"; // Open the menu container



	// Create menu HTML here...



	/*

	 * Close the menu container and return the markup for output

	 */

	return $menu . "</ul>n";

}

We'll be passing two parameters to the function, $menu_array and $is_sub. The first, obviously, is the array containing the array of menu items. The second is a flag that will let our function know if it is creating a sub-menu. This flag is to allow us to add an attribute to the menu HTML for easier CSS styling.

Our function will return a string, $menu, that will contain the HTML markup to display our menu. Since the standard convention for marking up menus is to use the <ul> tag, that's what we'll be doing here.

Step 1: Loop Through the Elements

After checking the $is_sub flag and determining whether or not we're dealing with a sub-menu, we can loop through our elements. Because we're dealing with multi-dimensional arrays, we'll have to nest loops, which sounds complex, but is actually pretty simple once you see it in action.

The way we'll be constructing our loops will follow a pattern like this: for each element in the array, run a loop to extract information out of the nested array.

In theory, the code will look like this:



function buildMenu($menu_array, $is_sub=FALSE)

{

	/*

	 * If the supplied array is part of a sub-menu, add the

	 * sub-menu class instead of the menu ID for CSS styling

	 */

	$attr = (!$is_sub) ? ' id="menu"' : ' class="submenu"';

	$menu = "<ul$attr>n"; // Open the menu container



	/*

	 * Loop through the array to extract element values

	 */

	foreach($menu_array as $id => $properties) {



		/*

		 * Because each page element is another array, we

		 * need to loop again. This time, we save individual

		 * array elements as variables, using the array key

		 * as the variable name.

		 */

		foreach($properties as $key => $val) {



			/*

			 * If the array element contains another array,

			 * call the buildMenu() function recursively to

			 * build the sub-menu and store it in $sub

			 */

			

			// Code here (see Step 2)...



			/*

			 * Otherwise, set $sub to NULL and store the 

			 * element's value in a variable

			 */

			

			// Code here (see Step 2)...

		}



		/*

		 * If no array element had the key 'url', set the 

		 * $url variable equal to the containing element's ID

		 */

		

		// Code here (see Step 3)...



		/*

		 * Use the created variables to output HTML

		 */

		

		// Code here (see Step 3)...



		/*

		 * Destroy the variables to ensure they're reset 

		 * on each iteration

		 */

		

		// Code here (see Step 3)...

		

	}



	/*

	 * Close the menu container and return the markup for output

	 */

	return $menu . "</ul>n";

}

The comments above frame out the steps we need to take in order to loop through the array and generate our markup.

Step 2: Extracting Array Data

Now that our loops are set up, we need to write the code that will process the array elements as they are looped.

Our first step is to determine whether or not the value of the current element is an array. If so, we want to call buildMenu() again. The reason for this is that by doing so, we create another unordered list within our menu that we can store in a variable ($sub) for output with the parent element's markup (thus generating valid XHTML markup).

If the current element is not an array, we use a programming trick called variable variables to dynamically name a variable with the element key (i.e. 'display' => 'About Us' is processed as $display = 'About Us';).



function buildMenu($menu_array, $is_sub=FALSE)

{

	/*

	 * If the supplied array is part of a sub-menu, add the

	 * sub-menu class instead of the menu ID for CSS styling

	 */

	$attr = (!$is_sub) ? ' id="menu"' : ' class="submenu"';

	$menu = "<ul$attr>n"; // Open the menu container



	/*

	 * Loop through the array to extract element values

	 */

	foreach($menu_array as $id => $properties) {



		/*

		 * Because each page element is another array, we

		 * need to loop again. This time, we save individual

		 * array elements as variables, using the array key

		 * as the variable name.

		 */

		foreach($properties as $key => $val) {



			/*

			 * If the array element contains another array,

			 * call the buildMenu() function recursively to

			 * build the sub-menu and store it in $sub

			 */

			if(is_array($val))

			{

				$sub = buildMenu($val, TRUE);

			}



			/*

			 * Otherwise, set $sub to NULL and store the 

			 * element's value in a variable

			 */

			else

			{

				$sub = NULL;

				$$key = $val;

			}

		}



		/*

		 * If no array element had the key 'url', set the 

		 * $url variable equal to the containing element's ID

		 */

		

		// Code here (see Step 3)...



		/*

		 * Use the created variables to output HTML

		 */

		

		// Code here (see Step 3)...



		/*

		 * Destroy the variables to ensure they're reset 

		 * on each iteration

		 */

		

		// Code here (see Step 3)...

		

	}



	/*

	 * Close the menu container and return the markup for output

	 */

	return $menu . "</ul>n";

}

Step 3: Generate HTML and Clean Up

Our final step is to use the information we've extracted to generate our markup.

To start, we need to verify that a URL was supplied, and if not, substitute the top-most element's key as the URL. This provides a shortcut for menu items that don't need fancy URLs (i.e. http://example.com/about/) by allowing us to omit redundant information.

To accomplish this, we simply check that a variable was created called $url, and if not, we create it and set it to the value of $id that was extracted in our outermost loop.

With our URL determined, we're ready to generate markup. This is a fairly straightforward step, as we're just using the URL and display name extracted from our array to create an <li> tag.

With our menu item generated and added to the $menu variable, we can safely unset the variables and start our next iteration of the outermost loop. Unsetting the variables prevents issues with the $url variable storing the original default URL and breaking our menu.

The final function looks like this:



	/*

	 * Loop through the array to extract element values

	 */

	foreach($menu_array as $id => $properties) {



		/*

		 * Because each page element is another array, we

		 * need to loop again. This time, we save individual

		 * array elements as variables, using the array key

		 * as the variable name.

		 */

		foreach($properties as $key => $val) {



			/*

			 * If the array element contains another array,

			 * call the buildMenu() function recursively to

			 * build the sub-menu and store it in $sub

			 */

			if(is_array($val))

			{

				$sub = buildMenu($val, TRUE);

			}



			/*

			 * Otherwise, set $sub to NULL and store the 

			 * element's value in a variable

			 */

			else

			{

				$sub = NULL;

				$$key = $val;

			}

		}



		/*

		 * If no array element had the key 'url', set the 

		 * $url variable equal to the containing element's ID

		 */

		if(!isset($url)) {

			$url = $id;

		}



		/*

		 * Use the created variables to output HTML

		 */

		$menu .= "<li><a href="$url">$display</a>$sub</li>n";



		/*

		 * Destroy the variables to ensure they're reset 

		 * on each iteration

		 */

		unset($url, $display, $sub);

		

	}

The Generated Menu

When we run our function with the array we created earlier, we'll see the following output:

About Us

Read Our Blog

Recommended Links

High-Quality Products

Helpful Services

Local Services

Online Services

Contact Us

Our function was able to create a menu with two sub-levels (and it will go even deeper than that if necessary). The benefit of a function like this is that it allows us to forego the annoying task of editing menu HTML for every new client that we sign up, rather enabling us to quickly define an array that will be parsed into HTML quickly and easily.

Summary

Recursive functions are a great way to overcome complex tasks, especially when handling complex arrays such as our menu above. Taking a little time to get the hang of them can go a long way toward eliminating long strings of spaghetti code that muddies up our scripts.

How do you build your client menus? Do you have any clever ways to use recursion? Let me know in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

ITT #12: Display Random Entries with PHP

I ran into an interesting problem while developing a new blogging system recently where I needed to generate a subset of array elements in random order.

A random subset of elements is useful for displaying a sampling of entries that changes with every page load, such as four random blog entries, a photo gallery that stays interesting even if new photos aren't uploaded, or, if you want to use a sweet content slider, you could show random portfolio or blog entry previews and keep your slider fresh.

Defining the Problem

The Array

First things first, we need to know what we're dealing with. For the purpose of this example, we'll be using a multi-dimensional array that looks something like this:



$entries = array(

	array(

		'title' => 'Entry One',

		'author' => 'Jason Lengstorf',

		'date' => 'April 8, 2009'

	),

	array(

		'title' => 'Entry Two',

		'author' => 'Jason Lengstorf',

		'date' => 'April 9, 2009'

	),

	array(

		'title' => 'Entry Three',

		'author' => 'Jason Lengstorf',

		'date' => 'April 10, 2009'

	),

	array(

		'title' => 'Entry Four',

		'author' => 'Jason Lengstorf',

		'date' => 'April 11, 2009'

	),

	array(

		'title' => 'Entry Five',

		'author' => 'Jason Lengstorf',

		'date' => 'April 12, 2009'

	),

	array(

		'title' => 'Entry Six',

		'author' => 'Jason Lengstorf',

		'date' => 'April 13, 2009'

	),

	array(

		'title' => 'Entry Seven',

		'author' => 'Jason Lengstorf',

		'date' => 'April 14, 2009'

	),

	array(

		'title' => 'Entry Eight',

		'author' => 'Jason Lengstorf',

		'date' => 'April 15, 2009'

	)

);

This is an array that's similar to the kind that would be returned from a database query. In it, we have eight entries, each of which contains another array that holds the title, author, and date of the entry (I omitted the entry itself in the interest of brevity).

The Goal

Our goal is to create a subset of four entries in random order, and to have the subset change every time the page is loaded (i.e. entries 4, 2, 8, and 7 are loaded the first time, then entries 3, 8, 1, and 6, and so on).

Writing the Code

Our array will be processed in a function called getRandomSubset(), which will accept two arguments: the array ($entries), and the number of entries to be returned in the subset ($number).



function getRandomSubset($entries, $number)

{

	// Process entries here...

}

PHP provides a ton of array handling functions that simplify the process of manipulating arrays. One of the available functions is called array_rand(), which returns a random assortment of array keys (as a variable if only one element is returned, or as an array if two or more are returned).

We're able to pass two arguments to array_rand(): the first is required and contains the array from which we need random elements, and the second is an optional specifier that allows us to decide how many elements need to be returned (if not set, this defaults to 1).

Because array_rand() only returns the array element keys, we'll need to do a little more coding to get the actual element values. To do this, we'll create an empty array called $randList that will store our random array elements, then run a loop with the random keys to add each element to the array using another array function called array_push(), which adds a value to the end of an array.



function getRandomSubset($entries, $n)

{

	// Initiate the variable

	$randList = array();



	// Pull the desired number of entry keys at random

	$keys = array_rand($entries, $n);



	// Loop through the keys

	foreach($keys as $key) {



		// Add the value to end of the return array

		array_push($randList, $entries[$key]);



	}



	return $randList;

}

To test this code, add the following snippet to a test page. NOTE: The <pre> tags are used to enhance the readability of output generated by print_r().



echo '<pre>';

print_r(getRandomSubset($entries, 2));

echo '</pre>';

Running the code will output something similar to the following:



Array

(

    [0] => Array

        (

            [title] => Entry Four

            [author] => Jason Lengstorf

            [date] => April 11, 2009

        )



    [1] => Array

        (

            [title] => Entry Six

            [author] => Jason Lengstorf

            [date] => April 13, 2009

        )



)

The Problem with Too Few Entries

One problem that exists in our code is that a warning will be issued and no values returned if more entries are requested than available in our entry array. If we call echo getRandomSubset($entries, 9);, an error similar to the following will be output:

Warning: array_rand() [function.array-rand]: Second argument has to be between 1 and the number of elements in the array in /Applications/xampp/xamppfiles/htdocs/test.php on line 75

Warning: Invalid argument supplied for foreach() in /Applications/xampp/xamppfiles/htdocs/test.php on line 78
Array ( )

Solving the Problem

To correct this issue, we need to add a check that ensures the number of entries requested does not exceed the number supplied. If too many entries are requested, we then change the number of requested entries to match the number of available entries, thus avoiding the error and outputting as many entries as possible.



function getRandomSubset($entries, $n)

{

	/*

	 * If $n isn't greater than the number of entries,

	 * reset it to be the number of entries available.

	 */

	$n = (count($entries)<$n) ? count($entries) : $n;



	// Initiate the variable

	$randList = array();



	// Pull the desired number of entry keys at random

	$keys = array_rand($entries, $n);



	// Loop through the keys

	foreach($keys as $key) {



		// Add the value to end of the return array

		array_push($randList, $entries[$key]);



	}



	return $randList;

}

Testing the function should now always result in a subset of the desired length with no duplicate entries. The subset can then be passed to the formatting function of your choice to handle formatting.

Summary

Getting comfortable with the intricacies of loops and arrays can have a huge impact on the cleanliness and readability of your code. What tricks do you have up your sleeve? Let me know in the comments!

Other Notes

For anyone who hasn't seen it yet, I've decided to try and monetize my blog with the help of BuySellAds.com. There are four banner ad spaces available, and they're cheap! Click on the "Advertise Here" boxes in the upper-left of this site to get your ad up today!

I had an article run on NETTUTS called Add Power to Your PHP With Multi-Tiered Applications. It covers what I consider to be best practices while writing code, so I'd love to hear your thoughts on it.

I'm still looking for guest bloggers on Ennui Design, so if you've got an idea, email me and we'll talk about it.

Also, just as a general note, thanks for reading! I really appreciate your comments and support, and I hope to keep supplying you with all the PHP geekery you can handle!

(To read and post comments for this entry, visit ennuidesign.com)

ITT #11: A Tip for Using Arrays

This week's Instant Tip Tuesday is a short one because I'm under some pretty tight deadlines. I'm still looking for developers to help out by guest blogging on Ennui Design, so contact me if you'd like to show your developing chops!

On a quick vanity note, Chad Engle did an interview with me over on the DCTH site, so head over there and check that out!

Manipulate Arrays to Handle the First Element Differently

Arrays, though they're incredibly useful, can also easily become confusing. This is especially true when dealing with multi-dimensional arrays, like a collection of entries from a database (a blog, for instance, would have at least two dimensions in an array of entries: each blog is an array of the different pieces of the blog, such as title, author, post date, and the entry itself; each entry array would then be stored in another array to keep the entries together).

Though confusing at first, getting comfortable with arrays can make a huge impact on your effectiveness as a programmer. Today, we're going to look at using array_shift() to simplify array-handling when displaying multiple entries from a database.

The Ugly Way to Access the First Element

Often times when I'm dealing with a result set on a page, I end up needing to perform a special function for the first result, then continue on with the rest of the data set. This led to some awkward code, looking something like this:



/*

 * Loads the last 5 entries from the DB in an array with keys:

 *		'title'

 *		'author'

 *		'date'

 *		'entry'

 */

$entries = getEntriesFromDB($sql, 10);



$html = "

	<h1> {$entries[0]['title']} </h1>

	<span>Posted by {$entries[0]['author']} on {$entries[0]['date']}</span>

	<p>{$entries[0]['entry']}</p>";



for($i=1, $n=count($entries); $i<$n; ++$i) {

	/*

	 * Creates a hyperlinked title

	 */

	$link = makeLinkedTitle($entries[$i]['title']);



	$html .= "<h2>{$entries[$i]['date']} - $link</h2>";

}



echo $html;

Note that I'm assuming the array returned from getEntriesFromDB() is numerically indexed, which, logically, is how the array would be created when the information is loaded from the database. This means the $entries array is indexed from $entries[0] (first entry array) to $entries[4] (the last of five loaded entries).

This code outputs one article, then four recent headlines preceded by their post dates. It looks something like this:

Sample Entry Title

Posted by Jason Lengstorf on April 14, 2009

This would be the actual entry, but for the sake of brevity, we'll pretend it was more of a Twitter post.

April 10 - Another Entry
April 02 - An Entry About Coffee
March 28 - This One's About Beer
March 26 - More of a Rant than an Entry

Optimizing the Code

By using array_shift(), we can clean up the syntax a little bit and create a snippet of code that is much easier to scan in the future.



/*

 * Loads the last 5 entries from the database

 */

$entries = getEntriesFromDB($sql);



/*

 * Removes the first array element and stores it in $first

 */

$first = array_shift($entries);



$html = "

	<h1> $first[title] </h1>

	<span> Posted by $first[author] on $first[date] </span>

	<p> $first[entry] </p>";



/*

 * Because the first element is no longer in the array, we can simplify

 * and use a foreach loop to move through the remaining entries

 */

foreach($entries as $e) {

	$link = makeLinkedTitle($e['title']);

	$html .= "

	<h2> $e[date] - $link </h2>";

}



echo $html;

The code above is much easier to read, which means future maintenance will be less painful.

Summary

Though it might not seem like much based on the example above, simplifying the handling of arrays can save hours of maintenance, especially when dealing with data sets that use arrays with ten, twenty, or even more elements per entry.

How do you handle multi-dimensional arrays? What do you wish you could do better with them? Let me know in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

ITT #10: Understanding OOP

NOTE: This comment by Cal Evans pointed out an oversight on my part regarding naming conventions for classes. To avoid conflicting with other classes, names should be distinctive, and as such, I changed the name of the example class from "date" to "Ennui_Date".

Recently, I've fielded a handful of questions concerning object-oriented PHP. What is it? How does it work? Why should we care?

I had similar questions when I first started looking at OOP. I mean, why the hell would I want to switch from the easy-to-understand procedural method?

Classes and objects might look confusing and difficult to manage at first, but they actually significantly improve the organization and readability of your code if used properly.

A Practical Example

Let's say, for instance, that we need to be able to get a formatted date string for various purposes throughout a site we're building. However, the format of the date may vary throughout the site, and we may need to create a formatted date from any given timestamp.

Additionally, we need to be able to add days to a date, in increments of one week. Let's look at the difference between implementing a solution in both the procedural and object-oriented approaches.

Do What We Know: The Procedural Approach

Our first step is to get a formatted date string. To do this, let's create a function that will accept a formatting string and a timestamp, both of which are optional. Then, inside that function, we check to see if a timestamp was supplied. If so, format for that date. Otherwise, return a formatted string for the current timestamp.

We'll also define the addOneWeek() function, but we'll get to how that works in a minute.

function formatDate($format="F j, Y", $timestamp=NULL)

{

	if(isset($timestamp)) {

		return date($format, $timestamp);

	} else {

		return date($format);

	}

}



function addOneWeek($timestamp=NULL)

{

	if(isset($timestamp)) {

		return $timestamp + 7*24*60*60;

	} else {

		return time() + 7*24*60*60;

	}

}

That's nice and easy. I know that when I call formatDate(), I'm going to get a formatted date string. Nothing fancy, nothing confusing, right?

To call this function, we simply do the following:

echo formatDate(); // Outputs today (e.g. 'April 7, 2009')



echo formatDate('m-d-y', '1211756595'); // Outputs '05-25-08'

Trying Out the Object-Oriented Approach

Now, just for fun, let's see how the exact same functionality is achieved with a class in PHP.

class Ennui_Date {

	private $format;

	private $date;



	function __construct($format=NULL, $date=NULL)

	{

		$this->format = (isset($format)) ? $format : "F j, Y";

		$this->date = (isset($date)) ? $date : time();

	}



	public function formatDate()

	{

		return date($this->format, $this->date);

	}



	public function setFormat($format)

	{

		if(isset($format)) {

			$this->format = $format;

		}

	}



	public function setDate($date)

	{

		if(isset($date)) {

			$this->date = $date;

		}

	}



	public function addOneWeek()

	{

		$this->date += 7*24*60*60;

	}



	public function __toString()

	{

		return $this->formatDate();

	}

}

But what does all of that mean?

Understanding Classes and Objects in PHP

First and foremost, it's important to note that objects and classes, while closely related, are not the same thing. An object is any collection of stored information. In web applications, this could be data related to entries on a page, users of the site, etc. By itself, this information isn't particularly useful, which is why we need a class.

A class acts a a blueprint for the object. It names the pieces of information and provides methods for interacting with it.

Re-Examining Our Date Handler

Let's look again at the class we've defined. We start by defining the class, instantiating its variables, and declaring our constructor method:

class Ennui_Date {

	private $format;

	private $date;



	function __construct($format=NULL, $date=NULL)

	{

		$this->format = (isset($format)) ? $format : "F j, Y";

		$this->date = (isset($date)) ? $date : time();

	}

}

In this snippet, we've essentially said, "Create a class called 'Ennui_Date' that holds two pieces of information, a formatting string and a date timestamp. When when the class gets defined, check if a formatting string was passed, and set it as the object's formatting string. Otherwise, use a default string. Then check if a date was passed, then store it as the object's date timestamp or use the current time."

The __construct() function is a special function that PHP runs whenever a new object is created. Well use it in this instance to allow us to pass our optional parameters to the object. The __construct() function isn't required; it's just convenient.

To format our date, we'll add a public method called formatDate():

	public function formatDate()

	{

		return date($this->format, $this->date);

	}

Because we already checked our values in the __construct() function, we can simply return a formatted string based on the values stored in the object.

In order to simplify the display of our formatted date, we'll use another special method, the __toString() method. This method determines what happens if the object is used as a string (using the echo construct, for instance). Because we already have a function to return the date, we simply need to reference it in the __toString() method, like so:

	public function __toString()

	{

		return $this->formatDate();

	}

Now, to instantiate the object and output a formatted date, we use the following code:

$date = new Ennui_Date();

echo $date; // Outputs today (e.g. 'April 7, 2009')

Not exactly simple to set up, but how easy is it to ouput the date? But that seems like an awful lot of foundation just to output a formatted string.

As we expand on our class, however, the convenience of OOP starts to become a little more obvious.

Adding More Functionality

Let's say, for instance, we need to be able to change the date somewhere on the page we're building, and we don't want to use the default formatting string.

Procedural Approach

If we're thinking procedurally, we'd do it something like this:

echo formatDate(); // Outputs today (e.g. 'April 7, 2009')



$format2 = "l, F jS at g:iA";

$date2 = 1224981409;

echo formatDate($format, $date2); // Outputs 'Saturday, October 25th at 6:36PM'

While there's nothing wrong with the approach above, it's feeling a little messy.

Object-Oriented Approach

By declaring two new methods in our Ennui_Date class, we can clean up the code a little bit.

	public function setFormat($format)

	{

		if(isset($format)) {

			$this->format = $format;

		}

	}



	public function setDate($date)

	{

		if(isset($date)) {

			$this->date = $date;

		}

	}

To implement the new methods, we simply use the following code:

$date = new Ennui_Date();

echo $date; // Outputs today (e.g. 'April 7, 2009')



$date->setFormat('l, F jS at g:iA');

$date->setDate(1224981409);

echo $date; // Outputs 'Saturday, October 25th at 6:36PM'

Because the variables are stored in the object, we don't have variables floating around our code, which keeps the code more legible and compartmentalized.

Add a Week to the Date

By now, the benefits of OOP are starting to show, but it's still not too painful to use the procedural style. When we get into preprocessing our data, however, it starts becoming very obvious that OOP adds convenience to our code.

addOneWeek(), Procedurally

Let's add a week to our procedural implementation's date. We'll start by defining our addOneWeek() function:

function addOneWeek($timestamp=NULL)

{

	if(isset($timestamp)) {

		return $timestamp + 7*24*60*60;

	} else {

		return time() + 7*24*60*60;

	}

}

The function accepts an optional paramter, a timestamp, and adds seven days' worth of time (7 days X 24 hours X 60 minutes X 60 seconds) and returns a new value: either seven days from the provided timestamp or seven days from now.

Running the function requires extra variables, like so:

$format = 'm-d-y';

$time = 1211756595;

echo formatDate($format, $time); // Outputs '05-25-08'



$newtime = addOneWeek($time);

echo formatDate($format, $newtime); // Outputs '06-01-08'

It's starting to get a little tough to read. We haven't tied ourselves in a knot by any means, but we now have two functions and three variables to keep organized in our minds.

Organizing with $this->addOneWeek()

To help us stay organized, let's try to add a week with our Ennui_Date class.

	public function addOneWeek()

	{

		$this->date += 7*24*60*60;

	}

Right off the bat, the method looks a little easier to swallow than its procedural counterpart. Its implementation is equally straightforward:

$date = new Ennui_Date();

echo $date; // Outputs today (e.g. 'April 7, 2009')



$date->addOneWeek();

echo $date; // Outputs a week from today (e.g. 'April 14, 2009')

Here, we can clearly see how much cleaner OOP can be than procedural code. If we start to imagine these implementations among other code that affects the web app, it's easy to see how much easier it would be to track our Ennui_Date object than our several variables and functions associated with our procedural attempt.

In Conclusion

OOP is an incredibly powerful tool to have in your skill set, and it shouldn't be overlooked as "too complicated" because, as we just discovered, classes and objects actually simplify programming after we take the time to get familiar with them.

It's also important to recognize that not everything needs to be object-oriented, and sometimes creating an object is overkill. However, if used tastefully, adding classes to your applications can greatly increase the simplicity and portability of your code.

Do you use classes and objects? How do you decide what should be a class and what should remain procedural? Let me know in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

Ennui Design

Win a Copy of PHP for Absolute Beginners!

Natural Sorting in MySQL

Working Around MySQL's Lack of Built-In Support for Natural Sorting

The Data

The Problem

The Solution

Summary

SXSW 2010, PHP for Absolute Beginners, and an Apology

PHP for Absolute Beginners

SXSW 2010

Finally, an Apology

JSON: What It Is, How It Works, and How to Use It

What Is JSON?

Storing JSON Data

Storing JSON Data in Arrays

Nesting JSON Data

Why Does JSON Matter?

How Do We Load JSON into a Project?

A Practical Example: Loading Flickr Streams with JSON and jQuery

Step 1: Create the AJAX Request

Step 2: Process the JSON Data

Step 3: Call Our Function

Summary

Easily Create External Links Without the Target Attribute

The Problem with target="_blank"

The Fix: rel="external"

The HTML

The JavaScript

Summary

Show the Most Popular Categories with PHP

Files and Data Required for This Exercise

Files

Data

The Tag Sets

The Dummy Tag Sets for This Exercise

The Parsing Function

Step 1: Accept the Array of Tag Sets

Step 2: Create a New Array to Store Processed Tag Information

Steps 3 & 4: Loop Through Each Tag Set and Separate by Commas

Steps 5 & 6: Loop Through Each Tag and Check Against the Final Array

Step 7: Sort the Array and Return It

The Output

The Condensed Function

Summary

Improving the Simple Contact Form

Understanding the Problem, Part 1: Better Error Handling

Understanding the Problem, Part 2: Spam Protection

Solving the Problem

Step 1 — Adding Better Error Handling

Saving the Submitted Information in Case of Errors

Using Status Codes to Identify Errors

Assigning Messages to Status Codes

Using Saved Data to Repopulate Form Fields

Step 2 — Adding Spam Protection

Summary

Send HTML and Plain Text Versions of Email

Part One: Understanding Email Structure

Headers

The Plain Text Version

The HTML Version

Sending Multipart Messages with PHP

Step 1: Write the Function

Step 2: Validate the Email Address

Summary

ITT #16: Create a Template Parsing System with PHP

So, What Are We Trying to Do?

The Usual Method

The Template Method

How Do We Do That?

Planning Our Steps

Setting Up Our Project

Step 1 — Build a Public HTML Page

Step 2 — Build a Template File

Step 3 — Loading the Template

Step 4 — Parse the Template with a Regular Expression

The Regular Expression

Parsing the Template

The Parsing Function

Step 5 — Currying

The Problem with `target="_blank"`

The Fix: `rel="external"`

Example 1 (Not Using `JOIN`)

Example 1 (Using `JOIN`)

Example 2 — Combining Three Tables Using `LEFT JOIN`