<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Admin Instructions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE>
BODY {background: #FFFFFF}
a{
text-decoration:none;
}
A:link {color: #6633FF}
A:visited {color: #0000FF}
A:hover { color: #6666FF; background-color: FFFFFF; }
H1, H2, H3, BODY, P {color: #000066}
H1 {font-size: 20pt; font-style: bold; font-family: verdana}
H2 {font-size: 16pt; font-style: bold; font-family: verdana}
H3 {font-size: 14pt; font-style: light; font-family: verdana}
BODY {font-size:10pt; font-style: normal; font-family: verdana}
P {font-size:10pt; font-style: normal; font-family: verdana}
-->
</STYLE>
</head>
<body>
<h1><a name="top"></a><img src="../extras/logo.jpg" width="500" height="130"></h1>
<h1>SETUP</h1>
<p><a href="#intro">Introduction</a></p>
<p><a href="#dirconfig">Directory and File Configuration</a></p>
<ul>
<li>
<p><a href="#gallconfig">The Gallery</a></p>
</li>
<li>
<p><a href="#imageconfig">Images and Thumbnails</a></p>
</li>
</ul>
<p><a href="#dbsetup">Database Setup</a></p>
<ul>
<li>
<p><a href="#dbadmin">Database Administration</a></p>
</li>
<li>
<p><a href="#uploadimage">Uploading Images</a></p>
</li>
</ul>
<p><a href="#configphp">Configure PHP pages</a></p>
<ul>
<li>
<p><a href="#indexphp">index.php</a></p>
</li>
<li>
<p><a href="#enginephp">engine.php</a></p>
</li>
<li>
<p><a href="#imagephp">image.php</a></p>
</li>
<li>
<p><a href="#formphp">form.php</a></p>
</li>
<li>
<p><a href="#countphp">count.php</a></p>
</li>
</ul>
<p><a href="#configstylesheet">Configure Stylesheet</a></p>
<hr>
<h1><a name="intro"></a>Introduction</h1>
<hr>
<p>I was going to include this in a README, but no-one ever does, so its here
instead!</p>
<p><strong>Credits</strong></p>
<p>Please note I did not write most of the code for this gallery. I spent a fortnight
trawling the internet, copying and pasting bits and bobs from various forums,
php.net etc. Therefore the credit for this gallery is shared amongst all those
people who helped others with code snippets and advice. It is truly fantastic
that someone is prepared to go away and work on another person's problem for
no other reason than to share knowledge, and perhaps for the sense of accomplishment
too.</p>
<p>If you have problems with wwdgallery, you are free to contact me (<a href="mailto:hide@address.com?subject=wwdgallery">hide@address.com</a>),
but I may not be much help! I will of course, in the tradition of my forebears,
attempt to be useful.</p>
<p><strong>Info</strong></p>
<p>This set up is written in a very simple way for two reasons:</p>
<ol>
<li>
<p>I have only been using php for two weeks so only just comprehend it myself.</p>
</li>
<li>
<p>I assume others will be having similar experiences to mine.</p>
</li>
</ol>
<p>Thusly, if you feel like you are being treated like an idiot, tough! If you
know how to do this already then go compile your own gallery!</p>
<p>I don't wish to be rude, but I have struggled to set up a virtual server and
galleries for three months, whilst well-meaning geeks tut and nod knowingly,
or ask me questions which I can't even decipher, let alone answer! As noted
previously, the various forum-ers are exempt from this insult!</p>
<hr>
<h1><a name="dirconfig"></a>Directory and File Configuration</h1>
<hr>
<h2><a name="gallconfig"></a>The Gallery</h2>
<p>Your gallery is self-contained in one directory (call it what you like - your_gallery)
with the following subdirectories and files:</p>
<p>/admin</p>
<ul>
<li>
<p>If you want to build your own forms for managing the database etc., then
they would go in here. See below for reasons why this is empty!</p>
</li>
</ul>
<p>engine.php</p>
<p>image.php</p>
<p>/images</p>
<ul>
<li>
<p>rid.php</p>
</li>
<li>
<p>your_image001.jpg</p>
</li>
<li>
<p>your_image002.jpg</p>
</li>
<li>
<p>etc.</p>
</li>
</ul>
<p>/includes</p>
<ul>
<li>
<p>count.php</p>
</li>
<li>
<p>form.php</p>
</li>
<li>
<p>stylesheet.css</p>
</li>
</ul>
<p>index.php</p>
<p>/thumbnails</p>
<ul>
<li>
<p>your_image001_thumb.jpg</p>
</li>
<li>
<p>your_image002_thumb.jpg</p>
</li>
<li>
<p>etc.</p>
</li>
</ul>
<p>It is recommended that you copy the original files into /your_gallery just
in case configuring them goes horribly wrong, and you have to download the zip
/ tar again (a mistake I make all the time...).</p>
<hr>
<h2><a name="imageconfig"></a>Images and Thumbnails</h2>
<ol>
<li>
<p>Create two directories: /images and /thumbnails.</p>
</li>
<li>
<p>Copy the images you want to display in the gallery to /images.</p>
</li>
<li>
<p>If you do not already have one, download a piece of software that will
batch scale your images (eg. Thumbsup for Mac OSX).</p>
</li>
<li>
<p>Put the thumbnails of your full-sized images in /thumbnails</p>
</li>
</ol>
<p align="right"><em><a href="#top">back to top</a></em></p>
<hr>
<h1><a name="dbsetup"></a>Database Setup</h1>
<hr>
<h2><a name="dbadmin"></a>Database administration</h2>
<p>I could fill the admin directory with second rate forms that I have cobbled
together, but in all honesty it would be pointless when phpMyAdmin is out there.</p>
<h3><br>
Go here:</h3>
<p><a href="http://www.phpmyadmin.net/home_page/">http://www.phpmyadmin.net/home_page/</a><br>
"phpMyAdmin is a tool written in PHP intended to handle the administration
of MySQL over the Web. Currently it can create and drop databases, create/drop/alter
tables, delete/edit/add fields, execute any SQL statement, manage keys on fields,
manage privileges,export data into various formats and is available in 47 languages."
(GPL Licence).</p>
<p><strong>Create a database for your gallery (If you have not done so already
you will need to set up a mysql privileges table in mysql before setting up
your gallery database and table).</strong></p>
<p><strong>Set up your table:</strong></p>
<ol>
<li>
<p>In your database(we'll call it your_db but you can call it whatever suits
your purpose), create one table(your_table) with 10 fields.</p>
</li>
<li>
<p> Set up your fields (see table below)</p>
</li>
<li>
<p>Set the id field to PRIMARY, INDEX, UNIQUE.</p>
</li>
<li>Set the fields of type 'text' to FULLTEXT (this makes their content searchable)
-there is a "T' icon next to the table fields table for doing this.</li>
</ol>
<table width="100%" border="1" cellpadding="1" cellspacing="0" bordercolor="#000033">
<tr>
<td><p>Headings</p></td>
<td><p>Field</p></td>
<td><p>Type</p></td>
<td><p>Attributes</p></td>
<td><p>Null</p></td>
<td><p>Default</p></td>
<td><p>Extra</p></td>
<td><p>Action</p></td>
</tr>
<tr>
<td><p>1</p></td>
<td><p>id (or something unique to your images)</p></td>
<td><p>varchar(15)</p></td>
<td><p> </p></td>
<td><p>No</p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
<tr>
<td><p>2</p></td>
<td><p>name</p></td>
<td><p>text</p></td>
<td><p> </p></td>
<td><p>Yes</p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
<tr>
<td><p>3</p></td>
<td><p>description</p></td>
<td><p>text</p></td>
<td><p> </p></td>
<td><p>Yes</p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
<tr>
<td><p>4</p></td>
<td><p>artist</p></td>
<td><p>text</p></td>
<td><p> </p></td>
<td><p>Yes</p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
<tr>
<td><p>5</p></td>
<td><p>category</p></td>
<td><p>text</p></td>
<td><p> </p></td>
<td><p>Yes</p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
<tr>
<td><p>6</p></td>
<td><p>file</p></td>
<td><p>longblob</p></td>
<td><p>BINARY</p></td>
<td><p>Yes</p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
<tr>
<td><p>7</p></td>
<td><p>file_name</p></td>
<td><p>varchar(10)</p></td>
<td><p> </p></td>
<td><p>Yes</p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
<tr>
<td><p>8</p></td>
<td><p>file_size</p></td>
<td><p>int(11)</p></td>
<td><p> </p></td>
<td><p>Yes</p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
<tr>
<td><p>9</p></td>
<td><p>file_type</p></td>
<td><p>varchar(10)</p></td>
<td><p> </p></td>
<td><p>Yes</p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
<tr>
<td><p>10</p></td>
<td><p>date</p></td>
<td><p>date</p></td>
<td><p> </p></td>
<td><p>No</p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
</table>
<hr>
<h2><a name="uploadimage"></a>Uploading Images</h2>
<p>From the phpMyAdmin tabs choose 'insert'.</p>
<p>Fill in the information as required:</p>
<ul>
<li>
<p>your id field must match the image name without the extension (eg. your_image001
for your_image.jpg).</p>
</li>
<li>
<p>do not fill in the file_name, file_size, file_type and date fields, as
these will automatically be filled in.</p>
</li>
<li>
<p>The file field will give you a 'browse' option. Use this to select the
thumbnail (NOT the original) of the image from your harddrive.</p>
</li>
<li>
<p>set the date field to 'NOW'.</p>
</li>
</ul>
<p>Choose whether you want to insert another row, then click 'go'.</p>
<p>Your image details and your thumbnails should now be stored in the database
table ready for your gallery.</p>
<p align="right"><em><a href="#top">back to top</a></em></p>
<hr>
<h1><a name="configphp"></a>Configure PHP pages</h1>
<hr>
<p>You can edit these pages in a text editor, but a WYSIWYG editor such as Dreamweaver
might be better, particularly as index.php and engine.php contain html elements
and the layout can also be configured. As I use a Mac, all Microsoft products
capable of such things have been avoided, so I can not tell of the effectiveness
of these programmes in configuring your gallery.</p>
<hr>
<h2><a name="indexphp"></a>index.php</h2>
<p>Open index.php!</p>
<p>The design looks something like this:<br>
</p>
<table width="100%" height="414" border="1" cellpadding="0" cellspacing="0" bordercolor="#000033">
<tr>
<td width="602"><img src="../extras/screenshot01.jpg" width="600" height="409"></td>
<td width="313" align="left" valign="top"><p>The logo should be changed to
your logo.</p>
<p>The php under 'recent additions' calls a recently added image, displaying
the image and the title.</p>
<p>The date displays the last time the page was updated manually, not dynamically
through php.</p>
<p>The php under 'your gallery' is the inclusion of 'engine.php'.</p>
<p>The php at the bottom of the page displays the number of records currently
held in the database.</p>
<p>The copyright link should be changed to a link to your site or email
address.</p>
<p> </p>
<p>The rest of the html can be edited in the usual way.</p>
<p>php is commented in the code - change your settings as necessary for
your mysql server, database and table.</p></td>
</tr>
</table>
<p align="right"><em><a href="#top">back to top</a></em></p>
<hr>
<h2><a name="enginephp"></a>engine.php</h2>
<p>Open engine.php!</p>
<p>The design looks something like this:</p>
<div align="right"></div>
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000033">
<tr>
<td width="602"><img src="../extras/screenshot02.jpg" width="599" height="403"></td>
<td valign="top"><p>The javascript is a popup script which selects a main
image from the thumbnail displayed when a query produces a successful
result.</p>
<p>The php at the top of the page displays a search form and is activated
by the 'if no action' statement.</p>
<p>The broken image is a random image displayed by rid.php, which is a GPL
licensed random image script.</p>
<p>The php under the welcome message displays the search form.</p>
<p>The php below the image re-presents the form if the search was unsuccessful.</p>
<p>The php in the bottom table displays the search query itself and then
the results.</p>
<p>The php at the bottom of the page displays the form with a 'search again?'
message once results have successfully been returned from the database.</p>
<p> </p>
<p>Be careful editing the html layout of this page, as it will involve moving
the php of the query - the rows of the query results in the bottom table
must not be moved above the search query (ie the 'SELECT from...' line
of the code).</p>
<p>Amend database connections as necessary.</p>
<p><a href="#nonjpg">Click here if using non-jpegs.</a></p>
</td>
</tr>
</table>
<p align="right"><em><a href="#top">back to top</a></em></p>
<hr>
<h2><a name="imagephp"></a>image.php</h2>
<p>This script displays an image from the database, based on the guest's query
in the engine.php form. The only things you should need to edit are your database
and table details.</p>
<p>Note: Internet Explorer for Mac (at least IE 5 on OSX) does not pick up the
content-type properly. Therefore the .jpg provides the extension that is needed
rather than the image itself. This appears to work on Windows as well.</p>
<p>If you wish to include non-jpeg file types, a workaround is to create a directory
for display pages, and embed movies, images etc. into individual pages. Change
the link in engine.php to reflect this.</p>
<hr>
<h2><a name="formphp"></a>form.php</h2>
<p>This script is a search form that has three variables - default is category,
artist and description. The search terms are picked up by mysql's fulltext function.</p>
<p>If you edit this form you will also need to edit the queries in engine.php
to match.</p>
<hr>
<h2><a name="countphp"></a>count.php</h2>
<p>This script counts the number of records in the database table and returns
the result as a number. It is called in index.php. The only things you need
to edit are your database and table details.<br>
</p>
<p align="right"><em><a href="#top">back to top</a></em> </p>
<hr>
<h1><a name="configstylesheet"></a>Configure stylesheet</h1>
<hr>
<p>Change the style sheet settings to your own design. This is just a basic text
and form stylesheet.</p>
<hr>
<h2><a name="nonjpg"></a>What to do for non-jpegs</h2>
<p>1. Open engine.php</p>
<p>2. Find this line:</p>
<blockquote>
<p><div align="center"><?php echo "<a href=javascript:void(0);
onclick=window.open('images/{$row["id"]}.jpg','','width=500,height=500,scrollbars=no,resizable=yes,top=0,left=0')><img
src=\"image.php?id={$row["id"]}\"></a>";?></p>
</blockquote>
<p>3.Change line to the following:</p>
<blockquote>
<p><div align="center"><?php echo "<a href=javascript:void(0);
onclick=window.open('displaypages/{$row["id"]}.html','','width=500,height=500,scrollbars=no,resizable=yes,top=0,left=0')><img
src=\"image.php?id={$row["id"]}\"></a>";?></p>
</blockquote>
<p>4. Create a directory called 'displaypages'</p>
<p>5. Create a new page for each image. Make sure that the page name is the same
as the id of the image, movie etc. as stored in your database. For example if
your image id is 123, then the image name will be 123.jpg, and the html page
will be 123.html.</p>
<p>6. Save the image display pages to the 'display pages' directory.</p>
<p> </p>
</body>
</html>