Building a small gallery with Zend Framework and MySQL

| No Comments

Well now as we have stored our images within the filesystem of the web server and the information in the MySQL database (see part 1 of this series), it is about accessing the files and the information.

Basically the needed steps are quite easy:

  1. Prepare SQL statements in your model for data
  2. Create Controller and View Template
  3. Create a View Helper Plugin to grab the image.

I will not explain in detail how to build the SQL statements respectively the functions in the model and how to set up the Controller and View Template. You will find other posts on this blog about this topic and with links to good tutorials


So let us start:
I assume you have already set up your Controller and View Template by now and you have also a query function in your model which fits your architecture. I have used a select combined with a fetchAll() to return my data.

Now in the View Template we have the usual loop, like the one shown below:

<?php if(count($this->images) > 0) : ?>
<?php foreach($this->images as $image) : ?>
// code here left out
<?php endforeach; ?>
<?php endif; ?>

I did not use an else clause here, but for sure you can use this as well.

Now how to load the image within a HTML img-Tag?

According to the first post we have used the id value as file name (maybe you have renamed your id, then please use appropriate identifier for the scripts to follow). So we can access the id with:

$image->id

We have 2 challenges here:

  1. We need to have a path to the image
  2. We need to know the file-extension of the image (in case we allow different filetypes).

Well one solution could be to store the path and the extension also in the database and return it as a property of the object $image (in my case). But this would need at least 2 queries for the saving of the information, because image is transferred after SQL query in my case (see previous post).

This is why I have chosen another method, which gives me nearly the same flexibility: I use a View Helper. So then go on an create a View Helper. I called mine findImageById and it takes the id as argument.

<?php

class Zend_View_Helper_FindImageById
{
	function FindImageById($id)
	{
		$dir = '<path to public folder>/public/uploads';

		$images = scandir($dir);

		foreach($images as $image)
		{
			$path_parts = pathinfo($dir.'/'.$image);
			if( $path_parts['filename'] == $id )
			{
				$found = $image;
			}
		}
		return $found;
	}
}

?>

Quite a handy function, isn't it? The only thing this helper does is to scan the directory provided under $dir and compare the filenames (without extension) with the provided argument, e.g. the id of our query.
As soon as one has been found the filename will be returned.

Extending the View Template

Now the only thing is to extend the View Template accordingly, as shown below:

<ul style="list-style-type: none;">
<?php if(count($this->images) > 0) : ?>
<?php foreach($this->images as $image) : ?>
<li>
	<img src="<?php echo $this->findImageById($image->id); ?>" alt="<?php echo $image->title ?>" 
	width="200"/>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>

Of course can you use any other format. I have just used an unordered list here for this simple demo case. But tables or floating divs would be possible too.

In the next tutorial I will show how to extend this tiny gallery with a voting function.

Leave a comment