the science bit

Allowing users to ‘tag’ images they upload, then displaying all results that have a particular tag.

Tagging on social network sites is rife. From flickr to youtube, last.fm to del.icio.us, giving people the option to ‘tag’ things with various words and phrases is proving to be one of the defining features of the whole Web 2.0 ‘revolution’. So what better time to jump on the bandwagon(?) We’ll amend the gallery that we’ve created so it taps into the zeitgeist and rides the glorious wave of tagging.

So, to allow for tagging of images that are being uploaded, you’ll need to amend your images table so that it has an extra column called ‘tags’. Give this column the datatype of TEXT - this will mean that it could potentially hold an awful lot of tags which is good because we want to give people the chance to tag with whatever they want.

You can then open up the ‘uploader.php’ page from the earlier lessons, and add a new textfield to the form on this page. Give it an id of ‘tags’. Then locate the ‘insert record’ behavior (you will be able to see it listed in the Server Behaviors tab of the Application panel) and double click on it to edit it. Now use the interface to make sure that ‘tags’ gets a value from your FORM.tags field.

(Note: if you are using the upload code from the earlier tutorials, you will also need to reassign the ‘imgfile’ value in this insert record. Then you should amend the appropriate line in your code so that ‘imgfile’ actually gets a value from your $filePath variable. See this post for a reminder.)

Now when you use your uploader page (in a browser) you will see the field to add tags to the image you are uploading. In this case, when you write out tags, just use single words separated by spaces - you’ll see why shortly.

Now open your ‘display.php’ page in Dreamweaver and from the ‘displaypic’ recordset, drag the ‘tags’ information onto your page.

If you leave this as it is, when you browse to an image display page (via the gallery), you will see a simple list of the tags that you entered when uploading said image.

All very well, except that all these tags are is a series of words. Like any other series of words. In fact, technically, they’re no different to the ‘description’ that you can assign to your image - except they probably make a lot less sense when you try to read them as a sentence. SO, we need to do something about that.

Here’s the science bit. Concentrate.

In your code, find the bit that echoes your tags. Should be something like:

<p>Tagged with: <?php echo $row_displaypic['tags']; ?></p>

Then delete the content in between your php tags and replace it with:

$str = $row_displaypic['tags'];
$alltags = explode(" ", $str);

This takes the information from your ‘tags’ column and sets it as the value for a local variable called $str (which is short for string, in case you’re wondering). The next line is using the explode function to produce an array called $alltags. The contents of this array will be populated by our $str variable but each individual word will become a separate part of the array. This is because the first argument of our explode function is set to ” ” (note the space). This is the bit that determines the ‘gaps’ between your tags, so for instance if you wanted to specify that all tags should be entered a format like ‘tag1-tag2-tag3′, then your delimiter would be “-”. The second argument of the function is defining which string is to be exploded (in our case, it’s the string contained within $str).

Now, to display each tag on the page individually, with a unique link assigned to each tag, we can use a forloop which will echo the contents of our $alltags array. So, you can now add:

for($i = 0; $i < count($alltags); $i++){
echo "a href=\"tagshow.php?tag=$alltags[$i]\">$alltags[$i]</a";
}

(Make sure you add a ‘<' before the a tag and a closing '>‘ at the end of the a tag - see the image below)

This loop will run for as long as there are values in the array (it gets that figure from the count function). The echo line looks more complicated than it is, but that’s because we’re turning each tag into a link. Essentially, for every iteration of the loop, the variable $alltags[$i] will be different. $i will start off as ‘0′ and then increase by 1 as the loop continues; the $alltags variable is an array remember, so by calling it in the manner of $alltags[0] (for example) you are actually pulling the 1st value from the array and so on and so on..

So now, you page will have click-able links for each tag that’s been applied to the image you’re looking at!

Those links are pointing toward a page called ‘tagshow.php’, passing a URL parameter of ‘tag’. So all that remains is to create that page and configure it so that it only shows results that match the appropriate tag. Return to Dreamweaver and create that new page now.

Write something like ‘Showing results matching the tag of:’ and then in your code, after this line, add:

<? echo $_GET['tag']; ?>

to retrieve the parameter of ‘tag’ from the URL string.

Then create a new recordset (using the Application panel > Bindings tab) and set it up accordingly:

The crucial part here is the filter by section. We want to set it so that the records get filtered by their ‘tags’ column - wherever that column CONTAINS the ‘tag’ value coming from the URL. For instance, if the URL parameter is ‘tag=matt’ then a record in the table that has the tags of ‘blog great matt northam design’ will be found because it contains the word ‘matt’ in it.

You can then drag and drop the information from this recordset and format your page however you like (with a repeat region around the record information) so when you come to browse to the page in a browser (via the gallery, via the single image display page), it will display images that match your tags!