PHP/MySQL Images Database for DHTML Content Management

A simple demonstration of the combined use of DHTML Popups with PHP and MySQL is shown. We will see that by using simple functions available with Advanced DHTML Popup the content, size and position can all be dynamically updated. In the present case the content and position are generated on the server by means of an image id and size attribute.

A row of thumbnails is generated and by clicking on one of them a full size image is shown in a DHTML popup next to it. The position of the full image is adjusted according to that of the thumbnail and the size according to the full image size. The contents are called via the id number, so that the path of the images on the server is not accessible.

Since the images are all stored (by reference in this case) in a database then the page is easily changed to reflect new images (such as products for example) without editing the HTML at all.

See the demo

The code:

Apart from the linked JavaScript files for the DHTML Popup used with the full-sized images, the only relevant code in the demo page is a PHP include:

<?php
include("construct_imgs.php");
?>

This file constructs the set of thumbnails and the content strings for the full-sized image popup:

<?php echo "<table width='150' border='0' align='left' cellpadding='0' cellspacing='0'>\n"; for ($i=1;$i<7;$i++){ echo "<tr><td height='50'>"; echo "<a href='javascript:null(0)'" ." onclick='UpdatePosition(\"template01\",150,223+(57*".($i-1)."));UpdateContent(\"template01\",htmlstring".$i.");UpdateSize(\"template01\",595,234);show(\"template01\");return false;'><img src='getimage.php?id=00".$i."&t=t' border='0'></a><br><br>"; echo "</tr></td>"; echo "\n"; } echo "</table>"; echo "<script>"; for ($i=1;$i<7;$i++){ echo "htmlstring".$i."=\"" . "<img src='getimage.php?id=00".$i."&t=f'>\";"; echo "\n"; } echo "</script>"; ?>

When the page is served the resulting HTML is:

<table width='150' border='0' align='left' cellpadding='0' cellspacing='0'> <tr><td height='50'>   <a href='javascript:null(0)' onclick='UpdatePosition("template01",150,223+(57*0));UpdateContent("template01",htmlstring1);UpdateSize("template01",595,234);show("template01");if(typeof(t)!="undefined")clearTimeout(t);popdiv();return false;'><img src='getimage.php?id=001&t=t' border='0'></a><br><br></tr></td> <tr><td height='50'>   <a href='javascript:null(0)' onclick='UpdatePosition("template01",150,223+(57*1));UpdateContent("template01",htmlstring2);UpdateSize("template01",595,234);show("template01");if(typeof(t)!="undefined")clearTimeout(t);popdiv();return false;'><img src='getimage.php?id=002&t=t' border='0'></a><br><br></tr></td> <tr><td height='50'>   <a href='javascript:null(0)' onclick='UpdatePosition("template01",150,223+(57*2));UpdateContent("template01",htmlstring3);UpdateSize("template01",595,234);show("template01");if(typeof(t)!="undefined")clearTimeout(t);popdiv();return false;'><img src='getimage.php?id=003&t=t' border='0'></a><br><br></tr></td> <tr><td height='50'>   <a href='javascript:null(0)' onclick='UpdatePosition("template01",150,223+(57*3));UpdateContent("template01",htmlstring4);UpdateSize("template01",595,234);show("template01");if(typeof(t)!="undefined")clearTimeout(t);popdiv();return false;'><img src='getimage.php?id=004&t=t' border='0'></a><br><br></tr></td> <tr><td height='50'>   <a href='javascript:null(0)' onclick='UpdatePosition("template01",150,223+(57*4));UpdateContent("template01",htmlstring5);UpdateSize("template01",595,234);show("template01");if(typeof(t)!="undefined")clearTimeout(t);popdiv();return false;'><img src='getimage.php?id=005&t=t' border='0'></a><br><br></tr></td> <tr><td height='50'>   <a href='javascript:null(0)' onclick='UpdatePosition("template01",150,223+(57*5));UpdateContent("template01",htmlstring6);UpdateSize("template01",595,234);show("template01");if(typeof(t)!="undefined")clearTimeout(t);popdiv();return false;'><img src='getimage.php?id=006&t=t' border='0'></a><br><br></tr></td> </table> <script> htmlstring1="<div id='mydiv' style='font-size:15;font-weight:bold;color:000000;position: absolute;top:100;left:275'> </div><img style='position absolute;top:0;left0' onload='doit()'; src='getimage.php?id=001&t=f'>"; htmlstring2="<div id='mydiv' style='font-size:15;font-weight:bold;color:000000;position: absolute;top:100;left:275'> </div><img style='position absolute;top:0;left0' onload='doit()'; src='getimage.php?id=002&t=f'>"; htmlstring3="<div id='mydiv' style='font-size:15;font-weight:bold;color:000000;position: absolute;top:100;left:275'> </div><img style='position absolute;top:0;left0' onload='doit()'; src='getimage.php?id=003&t=f'>"; htmlstring4="<div id='mydiv' style='font-size:15;font-weight:bold;color:000000;position: absolute;top:100;left:275'> </div><img style='position absolute;top:0;left0' onload='doit()'; src='getimage.php?id=004&t=f'>"; htmlstring5="<div id='mydiv' style='font-size:15;font-weight:bold;color:000000;position: absolute;top:100;left:275'> </div><img style='position absolute;top:0;left0' onload='doit()'; src='getimage.php?id=005&t=f'>"; htmlstring6="<div id='mydiv' style='font-size:15;font-weight:bold;color:000000;position: absolute;top:100;left:275'> </div><img style='position absolute;top:0;left0' onload='doit()'; src='getimage.php?id=006&t=f'>"; </script>

Each table cell contains an image surrounded by an <a> tag containing an onclick handler. This calls the dynamic functions of Advanced DHTML Popup which control the appearance and content of the DHTML popup containing the full-sized image.

The <img src='getimage.php?id=001&t=t' calls another PHP function which retrieves the image from the MySQL database for the thumbnail.

Each content string for the larger images in the popup are written below this. These are just div's with an image, whose source is again called from the database with

src='getimage.php?id=001&t=f'

Now lets look at the essentials of the MySQL database function getimage.php:

if(isset($_GET['id']))$image_number = $_GET['id']; if(isset($_GET['t']))$t = $_GET['t']; $connection = mysql_connect(DB_SERVER, DB_USER, DB_PASS) or die(mysql_error()); mysql_select_db(DB_NAME, $connection) or die(mysql_error()); global $connection; if($t=='t'){ $q = "SELECT timage FROM ".TBL_IMAGES." WHERE id='" .$image_number."'"; }elseif($t=='f'){ $q = "SELECT fimage FROM ".TBL_IMAGES." WHERE id='" .$image_number."'"; }else{ exit("Incorrect args"); } $result = mysql_query($q, $connection); $row = mysql_fetch_array($result); mysql_close($connection); if($t=='t'){ $image=$row['timage']; } else{ $image=$row['fimage']; } $imagepath = "imagesdemopath/" . $image; readfile("$imagepath");

The database has only one table and three columns in this simple case, an id, a thumbnail name and a full-sized image name. These are selected according to the parameters passed and a path constructed. The image is then read from the path and returned.

Article Index