the science bit

Adding an option whereby users can leave comments on specific images.

Currently, we have an image gallery which is populated by user content. Jolly good. But wouldn’t it be nice to allow users to comment on other peoples images too? I think so.

To begin, you’ll need a new table in your database which will hold all the user comments. Refer back to ‘adding tables to your database using MySQL Tools‘ if you’re unsure about how to do this. You’ll need columns for ‘id’, ‘username’, ‘comment’, ‘date’ and ‘ref’ as per below.

Now create a new page in Dreamweaver called ‘display.php’ and add a new Recordset from the Bindings tab on your Applications panel. Give it a name of ‘displaypic’, use your existing connection, select the images table and then add a filter of ‘id’ = URL parameter of ‘id’.

This set-up is almost the same as the recordset on the ‘gallery’ page, except it filters the results so that it will only retrieve information that matches a variable in the URL. In this case, it will only display information from a row that has the id which is present in the URL. This means that our ‘display’ page will only show one image.

On the page itself, add some text like ‘You are looking at image..’ and then drag and drop the ‘id’ data from your recordset. Do the same to display the description somewhere. Then insert a dynamic image which gets it’s source from the ‘imgfile’ data of the recordset. (Insert > Image > Select file name from.. Data Sources > imgfile > O.K.) This is all stuff that we’ve done before on the gallery page so it should be vaguely familiar.

Go back to the ‘gallery’ page and highlight the dynamic image placeholder on the page. From the properties panel, create a link by browsing to file and then point to your ‘display.php’ page. Before finalising that selection, add parameters in the form of ‘id’ with the dynamic value of ‘id’. This is the same process we took when setting up the delete function for our admin, but instead of specifying which image to delete, this selects an image to display.

When you now upload your ‘gallery’ and ‘display’ pages, you can browse to your gallery and each image will be a link that will take you to your display page with a single image on. For visual effect, you could set the size of the image on your gallery page to 10% (width and height) for example so that it gives the appearance of a thumbnail (but do be aware that this does NOT reduce the loading time of your resized image as it still loads the full file. This is not a replacement for proper thumbnails!).

Return to your ‘display’ page in Dreamweaver and beneath the image placeholder, insert a form called ‘commentform’ with a textfield called ‘username’ and a textarea called ‘comment’. Still within the same form, insert a hidden field, name it ‘date’ and give it a value of:

<? echo date("d-m-Y")?>

This uses the PHP date function to generate todays date in the form of 19-10-2007. You can change the d-m-Y bit to return the date in a different format if you prefer. The fact that it’s a hidden field means just what you think it means. It’s hidden. It can be picked up when the form is processed but it’s not actually visible on the page.

Add a second hidden field named ‘ref’ and for the value, use the ‘Bind to a Dynamic Source’ lightning icon to select the ‘id’ from your displaypic recordset. The ‘ref’ value will then be the same as the ‘id’ for the image you are looking at. This means that while every comment added will have it’s own unique id, it will also have a ‘ref’ number attached to it which can be used to link it with the appropriate image.

Finally, add a submit button.

Now create a new Insert Record server behavior and make sure it points to your comments table and that all the table values match up with the form values.

That should be it for setting up you comments form but before taking a look at it, we may as well finish the job and add an area where existing comments are displayed. Write something like ‘previous comments’ on your page and then go to create a new recordset. Call it ‘getcomments’ and point it toward your comments table. You can sort it by id descending which will place more recent comments at the top, but the important part here is to add a filter of ‘ref’ equals URL parameter of id. You should recall that the display page selects which image to show based on the URL string which passes a desired ‘id’. Similarly, remember that each comment receives a ‘ref’ number based on the displayed image; so if we tell this recordset to only show comments that have a ref which matches the id in the URL, we’ll be presented with image-specific comments.

Now drag onto your page from the getcomments recordset the data you want to display.

Highlight the comments area and set up a repeat region under Server Behaviors. Make sure you select the getcomments recordset for this region and show all records.

If you now save and upload the ‘display’ page, when you browse to it via the gallery you will be able to add comments about an image. And if you look at a different image, you’ll see that each image has it’s own specific comments.

If you’d like to elaborate on this slightly, you could add an if statement in your code just before the ‘do’ loop starts for your comments..

<? if ($totalRows_getcomments < 1) {
echo ("<p>No comments yet.</p>");
} else { ?>
<?php do { ?>

and somewhere after the ‘while’ line, add

<? } ?>

This checks to see if any results are being found from your getcomments query. If not (if the total is less than 1) it will echo ‘No comments yet’. Otherwise, it will continue and run any code that appears between the ‘else’ and final closing bracket. This makes pages which currently don’t have comments look much smarter.