Gallery Site Example

Take a look at the gallery example

You can grab the code from here.

Below I provide a diagramming solution for our discussion purposes in class. All the PHP code has been diagrammed although you could continue to diagram the JavaScript code as well (that is not our focus here).

To run the example, copy the remaining text in this document after this paragraph and paste it into a text editor (or Dreamweaver) as a PHP document (save the document as index.php in the htdocs directory of your MAMP server - you'll need to name it index.php since the form's action attribute value points to that filename - you can optionally change the name of the form action attribute value to a different filename of your choosing):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Gallery</title>

</head>

<body>

<?php include("header.php") ?>

<!--

function MM_preloadImages() { //v3.0

var d=document; if(d.images) { if( !d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments;

for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0) {

d.MM_p[j]=new Image(); d.MM_p[j++].src=a[i];

}

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr;

for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) {

x.src=x.oSrc;

}

function MM_findObj(n, d) { //v4.01

var p,i,x;

if(!d) {

d=document;

}

if((p=n.indexOf("?"))>0 && parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);

}

if(!(x=d[n]) && d.all) {

x=d.all[n]; for (i=0; !x && i<d.forms.length; i++) x=d.forms[i][n];

}

for(i=0; !x && d.layers && i<d.layers.length; i++) {

x=MM_findObj(n,d.layers[i].document);

}

if(!x && d.getElementById) {

x=d.getElementById(n);

}

return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments;

document.MM_sr=new Array;

for(i=0;i<(a.length-2);i+=3) {

if ((x=MM_findObj(a[i]))!=null) {

document.MM_sr[j++]=x;

if(!x.oSrc) {

x.oSrc=x.src;

}

x.src=a[i+2];

}

//-->

</script>

</head>

<body onLoad="MM_preloadImages('full/full2.png','full/full3.png','full/full6.png',

'full/full7.png','full/full8.png','full/full9.png','full/full10.png','full/full12.png',

'full/full13.png','full/full14.png','full/full5.png')">

<tr>

<td>

<tr>

<?php

//check for form submission:

if (isset($_POST['submitted'])) {

// minimal form validation

if(!empty($_POST['name']) && !empty($_POST['email']) && !empty($_POST['comments']) ) {

//create the body:

$body="email: {$_POST['email']}\n\nComments: {$_POST['comments']}";

//70 char max

$body=wordwrap($body, 70);

//send the email.

mail('mary.ellis@gmail.com', 'Contact Form Submission', $body, "From: {$_POST['email']}");

//print a message:

echo '<p><em>Thank you for contacting me at '. date('g:i a (T)').' on '. date('l F j, Y') .'.</em></p>';

//time it took to submit form

echo '<p><strong> It took ' . (time() - $_POST[‘start’]) . ' seconds for you to complete and submit the form. </strong></p>';

$_POST=array();

} else {

echo 'Please fill out the form completely.</p>';

}

} //end of main isset() IF.

else { //create the HTML form:

</p>

<h1 style="font-family: Arial, Helvetica, sans-serif; font-size: large">Contact the Artist</h1>

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px">Please fill out this form to contact the artist.</p>

</p>

<p style="font-size: 12px">Email Address:

<br />

</p>

<p style="font-size: 12px">Comments:

<br />

</textarea>

</p>

<p>

</p>

<?php

} //end of create HTML form.

</td>

</tr>

<tr>

<?php

$i=1;

$base_url = "http://bdcampbell.net/dynphp/gallery/";

for ($j=0; $j<3; $j++) {

echo '<tr>';

echo '<td width=100% valign=top align=center><a href="'.$base_url.'full/full'.$i.'.png" target="_blank"><img src="'.$base_url.'full/full'.$i.'.png" border=0 width=70 height=70 id="t'.$i.'" onMouseOver="MM_swapImage(\'full1\',\'\',\''.$base_url.'full/full'.$i++.'.png\',1)" onMouseOut="MM_swapImgRestore()" /></a></td>';

echo "\n";

echo '</tr>';

}

//echo iterations= # of columns and $j <# = # of rows

</table>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</form></td>

</tr>

</table>

<?php include("footer.php") ?>

</body>

</html>