Home arrow MySQL arrow Creating An Online Photo Album with PHP and GD: Part 4
MYSQL

Creating An Online Photo Album with PHP and GD: Part 4


It's time to wrap things up. At the end of this part you would be quite ready to build your own photo album to show all of your friends and family. Attached at the end of this article is the support file.

Author Info:
By: Frank Manno
Rating: 4 stars4 stars4 stars4 stars4 stars / 58
September 04, 2003
TABLE OF CONTENTS:
  1. · Creating An Online Photo Album with PHP and GD: Part 4
  2. · Conclusion

print this article
SEARCH DEVARTICLES

Creating An Online Photo Album with PHP and GD: Part 4
(Page 1 of 2 )

The last part of our back-end interface, is our main menu page. This is a simple HTML file that gives us hyperlinks to the various image-manipulating pages we’ve just built:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Image Gallery - Main Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="60%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><h1>Album Administration - Main Menu</h1></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>Album Functions</strong></td>
<td><strong>Image Functions</strong></td>
</tr>
<tr>
<td><a href="new_album.php">Add Album(s)</a></td>
<td><a href="upload_images.php">Add image(s)</a></td>
</tr>
<tr>
<td><a href="edit_albums.php">Edit Album(s)</a></td>
<td><a href="edit_photos.php">Edit Photo(s)</a></td> 
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<table width="60%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><a href="index.php">Main Menu</a> | <a href="new_album.php">Create
New Album</a> | <a href="../gallery.php">View Gallery</a></td>
</tr>
</table>
</body>
</html>

Our menu looks like this:

Well, our image gallery back-end interface is complete! It’s now time to dig into the fun stuff! ;) We’ll now build the front-end interface, which will allow us to select an individual album, view a list of images in that album, and select a photo for viewing!

Smile!

Our front-end interface will display our album covers in a tabular format. Each album will have a hyperlink that will allow us to view the images within that album. We’ll call this page gallery.php:

<?php
include("include/config.php");
db_connect();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="include/functions.js" type="text/javascript"></script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><form action="add_album.php" method="post" name="">
<p> </p>
<table width="60%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><h1>My Gallery</h1></td>
</tr>
</table>
<table width="60%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<?php
// Retrieve album information (photo count, description, etc.) from database
$sql = "SELECT albums.album_id, albums.album_name, albums.album_desc, albums.album_cover, COUNT(photos.photo_id) as images
FROM albums LEFT JOIN photos ON albums.album_id =
photos.album_id
GROUP BY albums.album_name, albums.album_desc
ORDER BY albums.album_id ASC";
$result = @mysql_query($sql) or die("Error retrieving records from the database: " . mysql_error());
$i = 0; // Row counter
while( $row = mysql_fetch_assoc($result))
{
$data[] = $row;
}
$count = ( ceil( count( $data ) / IMAGE_DISPLAY ));
for( $i = ( int )0; $i < $count * IMAGE_DISPLAY; $i++ )
{
if ( ( $i % IMAGE_DISPLAY ) == 0 && ($i != 0))
{
echo("</tr>\n<tr>");

if ( $data[$i]['album_cover'] )
{
echo("<td valign=\"top\" width=\"" . floor(100 / IMAGE_DISPLAY) . "%\">\n");
echo("<p><a href=\"view_album.php?album_id=" . $data[$i]['album_id'] . "\">" . $data[$i]['album_name'] . " (" . $data[$i]['images'] . ")</a></p><a href=\"view_album.php?album_id=" . $data[$i]['album_id'] . "\"><img src=\"" . $data[$i]['album_cover'] . "\" title=\"" . $data[$i]['album_desc'] . "\" align=\"middle\"></a>");
echo("<br /><p>" . $data[$i]['album_desc'] . "</p>\n</td>\n");
}
else
{
echo("<td valign=\"top\" width=\"" . floor(100 / IMAGE_DISPLAY) . "%\"> ");
echo("</td>\n");
}
}
?>
</tr>
</table>
<table width="60%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><a href="index.php">Main Menu</a> | <a href="new_album.php">Create
New Album</a> | <a href="../gallery.php">View Gallery</a></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>


Here is our code breakdown:

// Retrieve album information (photo count, description, etc.) from database
$sql = "SELECT albums.album_id, albums.album_name, albums.album_desc, albums.album_cover, COUNT(photos.photo_id) as images
FROM albums LEFT JOIN photos ON albums.album_id = photos.album_id
GROUP BY albums.album_name, albums.album_desc
ORDER BY albums.album_id ASC";
$result = @mysql_query($sql) or die("Error retrieving records from the database: " . mysql_error());


We first create an SQL SELECT statement, which will retrieve the album information, including album id, name, description, and cover image. Also, for this SQL statement, we use a LEFT JOIN, which will retrieve the number of images in each album. A LEFT JOIN simply returns ALL the records on the left side of the join – in this case the records in the album table – regardless of whether or not they contain records from the right side of the join – in this case the records in the photos table. This allows us to display a zero-value for albums that do not contain photos. Had we not used a JOIN, albums that contain no photos, would not be included in our SQL SELECT statement.

$i = 0; // Row counter
while( $row = mysql_fetch_assoc($result))
{
$data[] = $row;
}
$count = ( ceil( count( $data ) / IMAGE_DISPLAY ));
for( $i = 0; $i < $count * IMAGE_DISPLAY; $i++ )
{
if ( ( $i % IMAGE_DISPLAY ) == 0 && ($i != 0))
{
echo("</tr>\n<tr>");

if ( $data[$i]['album_cover'] )
{
echo("<td valign=\"top\" width=\"" . floor(100 / IMAGE_DISPLAY) .
       "%\">\n");
echo("<p><a href=\"view_album.php?album_id=" . $data[$i]['album_id'] . "\">" . $data[$i]['album_name'] . " (" . $data[$i]['images'] . ")</a></p><a href=\"view_album.php?album_id=" . $data[$i]['album_id'] . "\"><img src=\"" . $data[$i]['album_cover'] . "\" title=\"" . $data[$i]['album_desc'] . "\" align=\"middle\"></a>");
echo("<br /><p>" . $data[$i]['album_desc'] . "</p>\n</td>\n");
}
else
{
echo("<td valign=\"top\" width=\"" . floor(100 / IMAGE_DISPLAY) .
                 "%\"> ");
echo("</td>\n");
}
}


Next, we display the album information. Here, we loop through our resultset, and store the row information into a temporary array, $data[]. We’re storing the resultset in an array in order to properly display the album information in our table. 

Next, we calculate the number of rows that will be required when creating our HTML table. We need to ensure that we have filler cells in order to properly display the table. If we decide to display 3 images per row, and there are only 5 album covers, we need to create 1 filler cell to properly complete the row. We use PHP’s count() function to count the number of records in our table, and then divide that figure by the value set in our IMAGE_DISPLAY constant. We then use the ceil() function to round our calculation up to the next highest integer value – ie: 5.4 becomes 6.

Once we’ve figured out the count value for our table rows, it’s time to loop through our resultset (contained in our temporary $data[] array). The condition in our FOR loop is simple: loop until the value of $i remains less than our row count multiplied by our IMAGE_DISPLAY constant. $count * IMAGE_DISPLAY will gives us the actual number of rows to display our albums in.

if ( ( $i % IMAGE_DISPLAY ) == 0 && ($i != 0))
{
echo("</tr>\n<tr>");
}
 

Again, this code simply uses the modulus (%) operator, to figure out when to start a new row. Until our condition results in a true value, we simply output a new cell in the current row we are on.

if ( $data[$i]['album_id'] )
{
echo("<td valign=\"top\" width=\"" . floor(100 / IMAGE_DISPLAY) . "%\">\n");
echo("<p><a href=\"display_album.php?album_id=" . $data[$i]['album_id'] . "\">" . $data[$i]['album_name'] . " (" . $data[$i]['images'] . ")</a></p><a href=\"display_album.php?album_id="
. $data[$i]['album_id'] . "\"><img src=\"" . $data[$i]['album_cover'] .
"\" title=\"" . $data[$i]['album_desc'] . "\" align=\"middle\"></a>");
echo("<br /><p>" . $data[$i]['album_desc'] . "</p>\n</td>\n");
}
else
{
echo("<td valign=\"top\" width=\"" . floor(100 / IMAGE_DISPLAY) . "%\"> ");
echo("</td>\n");
}


The code above checks to see whether or not our $data array (which is multi-dimensional since we are storing our original resultset array into it) contains an album cover. If the current element in the array contains an album ID, we output the album’s information (album name, cover image, and description. The album name and image both contain links to the display_album.php script, which will display the thumbnail images of the photos within the album.

echo("<td valign=\"top\" width=\"" . floor(100 / IMAGE_DISPLAY) . "%\">\n");

The code above determines the width of each cell. In order to create cells that are equal in width, we divide 100 by the IMAGE_DISPLAY constant, which gives us the percentage value of each cell – ie: 100/3 = 33%.
If the original condition -- if ( $data[$i]['album_id'] ) – evaluates to false, it is assumed that there is no album record, and therefore, we create a filler cell to complete the current row:

else
{
echo("<td valign=\"top\" width=\"" . floor(100 / IMAGE_DISPLAY) . "%\"> ");
echo("</td>\n");
}


Our page would look something like this:

When we click on an album link, we call the display_album.php script, and pass to it the album ID pertaining to the album we would like to view:

<?php
include("include/config.php");
if( !$_GET['album_id'] ){
$msg .= "No album selected! Please <a href=\"gallery.php\">choose an album</a> you would like to view.";
// Display error message
displayPage($msg);
die();
}
db_connect();
$sql = "SELECT album_name FROM albums WHERE album_id = " . $_GET['album_id'];
$result = @mysql_query($sql) or die("Error retrieving record: " . mysql_error()); 
while($row = @mysql_fetch_array($result)){
$album_name = $row['album_name'];
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Gallery - <?php echo($album_name); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="60%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>Gallery - <?php echo($album_name); ?></td>
</tr>
</table>
<table width="60%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<?php
// Retrieve albums from database
$sql = "SELECT photos.photo_id, photos.photo_title, photos.photo_desc, photos.photo_date, photos.photo_location, photos.thumbnail_location FROM photos WHERE photos.album_id = " . addslashes($_GET['album_id']);
$result = @mysql_query($sql) or die("Error retrieving records from the database: " . mysql_error());
$i = 0; // Row counter
while( $row = mysql_fetch_assoc($result))
{
$data[] = $row;
}
$count = ( ceil( count( $data ) / IMAGE_DISPLAY )); 
for( $i = ( int )0; $i < $count * IMAGE_DISPLAY; $i++ )
{
if ( ( $i % IMAGE_DISPLAY ) == 0 && ($i != 0))
{
echo("</tr>\n<tr>");

$photo_date = format_date($data[$i]['photo_date']); 
if ( $data[$i]['photo_location'] )
{
echo("<td valign=\"top\" width=\"" . floor(100 / IMAGE_DISPLAY) . "%\"><p><a href=\"view_photo.php?photo_id=" . $data[$i]['photo_id'] . "\">" . $data[$i]['photo_title'] . "</p><a href=\"view_photo.php?photo_id=" . $data[$i]['photo_id'] . "\" onClick=\"displayPhoto('" .
$data[$i]['photo_location'] . "','" . $data[$i]['photo_title'] . "'); return false;\"><img src=\"" . $data[$i]['thumbnail_location'] . "\"
title=\"Photo Date: " . $photo_date . "\" align=\"center\"></a>");
echo("<br /><p>Photo Details: " . $data[$i]['photo_desc'] . "<br />Date: " . $photo_date . "</p></td>\n");
}
else
{
echo("<td valign=\"top\" width=\"" . floor(100 / IMAGE_DISPLAY) . "%\"> ");
echo("</td>\n");

}
?>
</td>
</tr>
</table>
<table width="60%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><a href="gallery.php">View Gallery</a></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>


Here’s the code breakdown:

if( !$_GET['album_id'] ){
$msg .= "No album selected! Please <a href=\"gallery.php\">choose an album</a> you would like to view.";
// Display error message
displayPage($msg);
die();
}


Here, we simply check to see if an album ID has been passed. If not, we display an error message to the user, and halt execution of the script.

db_connect();
$sql = "SELECT album_name FROM albums WHERE album_id = " . addslashes($_GET['album_id']);
$result = @mysql_query($sql) or die("Error retrieving record: " . mysql_error()); 
while($row = @mysql_fetch_array($result)){
$album_name = $row['album_name'];
}


If an album ID is passed to the script, we connect to our database, and create a simple SQL SELECT statement, which retrieves the name of the album. This is only used for the page title and heading. This isn’t really a necessary part; it’s used mainly for aesthetic reasons.

We now display the album’s photos, similar to the way we did for our individual albums.

$sql = "SELECT photos.photo_id, photos.photo_title, photos.photo_desc, photos.photo_date, photos.photo_location, photos.thumbnail_location FROM photos WHERE photos.album_id = " . $_GET['album_id'];
$result = @mysql_query($sql) or die("Error retrieving records from the database: " . mysql_error());


We create an SQL SELECT statement that retrieves all of the photo information (title, description, date, and the thumbnail and full-sized image locations).

Next, we store the resultset array into another temporary $data[] array. We then count the number of rows we will require for our table, and display the photo thumbnails. We are still taking into account the need for extra filler cells, just like we did on the previous albums page.

$photo_date = format_date($data[$i]['photo_date']);

Our photo album page looks like this:

You may have noticed the code above. This is a simple function I found in the PHP manual that accepts a DATETIME argument, and converts it into a displayable date format (ie: August 03, 2003). The function is as follows:

function format_date($date){
list($yyyy, $mm, $dd) = explode("-", $date);
$day[] = split(' ', $dd);
$date = date('F jS, Y', mktime(0,0,0,$mm,$day[0],$yyyy));
return $date; 
}


We accept a date argument, and create 3 variables -- $yyyy, $mm, $dd. The variables are created by using PHP’s explode() function to split the date argument into separate elements using the “-“ as the delimiter, and then by using PHP’s list() function. Next, we create a $day[] array, in which we split the $dd variable up by using a space as the delimiter. Since our $dd variables holds the month and time, we need to drop the time, and keep only the day. Once we’ve split our $dd variable up, we make use of PHP’s date() function to create a displayable date format; in this case: August 3rd, 2003. The date is then returned back to the script that called it.

The format_date() function is located in our config.php, where it is easily accessible from any script that includes the config.php file.

Since the purpose of our photo gallery is to be able to view the full-sized image, we need to create our last script, view_photo.php:

<?php
include("include/config.php");
if( !$_GET['photo_id'] ){
$msg .= "No photo selected! Please <a href=\"gallery.php\">choose an album</a> you would like to view.";
// Display error message
displayPage($msg);
die();
}
db_connect();
$sql = "SELECT photo_title, photo_location FROM photos WHERE photo_id = " . addslashes($_GET['photo_id']);
$result = @mysql_query($sql) or die("Error retrieving record: " . mysql_error()); 
while($row = @mysql_fetch_array($result)){
$photo_title = $row['photo_title'];
$photo_loc = $row['photo_location'];
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Gallery - <?php echo($photo_title); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="60%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>Gallery - <?php echo($photo_title); ?></td>
</tr>
</table>
<table width="60%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td>
<img src="<?php echo($photo_loc); ?>" />
</td>
</tr>
</table>
<table width="60%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><a href="gallery.php">View Gallery</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>


The code very similar to our display_album.php script, except we deal with the user-specified photo rather than the album.

Our first check is to make sure that a photo ID is specified. If not, we display an error message to the user, and direct them back to the gallery page. If the photo ID is specified, we create an SQL SELECT query, and retrieve the photo location (path in the file system), and the photo title, which are then displayed on the page.

We use a simple HTML image tag to display the photo. Very simple, isn’t it?


blog comments powered by Disqus
MYSQL ARTICLES

- MySQL and BLOBs
- Two Lessons in ASP and MySQL
- Lord Of The Strings Part 2
- Lord Of The Strings Part 1
- Importing Data into MySQL with Navicat
- Building a Sustainable Web Site
- Creating An Online Photo Album with PHP and ...
- Creating An Online Photo Album with PHP and ...
- PhpED 3.2 – More Features Than You Can Poke ...
- Creating An Online Photo Album with PHP and ...
- Creating An Online Photo Album with PHP and ...
- Security and Sessions in PHP
- Setup Your Personal Reminder System Using PHP
- Create a IP-Country Database Using PERL and ...
- Developing a Dynamic Document Search in PHP ...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials