Location: PHPKode > scripts > wwdgallery > wwdgallery/docs/admin.html
<!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>
  &quot;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.&quot; 
  (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 &quot;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>&nbsp;</p></td>
    <td><p>No</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
  </tr>
  <tr> 
    <td><p>2</p></td>
    <td><p>name</p></td>
    <td><p>text</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>Yes</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
  </tr>
  <tr> 
    <td><p>3</p></td>
    <td><p>description</p></td>
    <td><p>text</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>Yes</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
  </tr>
  <tr> 
    <td><p>4</p></td>
    <td><p>artist</p></td>
    <td><p>text</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>Yes</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
  </tr>
  <tr> 
    <td><p>5</p></td>
    <td><p>category</p></td>
    <td><p>text</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>Yes</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</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>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
  </tr>
  <tr> 
    <td><p>7</p></td>
    <td><p>file_name</p></td>
    <td><p>varchar(10)</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>Yes</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
  </tr>
  <tr> 
    <td><p>8</p></td>
    <td><p>file_size</p></td>
    <td><p>int(11)</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>Yes</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
  </tr>
  <tr> 
    <td><p>9</p></td>
    <td><p>file_type</p></td>
    <td><p>varchar(10)</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>Yes</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
  </tr>
  <tr> 
    <td><p>10</p></td>
    <td><p>date</p></td>
    <td><p>date</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>No</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</p></td>
    <td><p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&lt;div align=&quot;center&quot;&gt;&lt;?php echo &quot;&lt;a href=javascript:void(0); 
    onclick=window.open('images/{$row[&quot;id&quot;]}.jpg','','width=500,height=500,scrollbars=no,resizable=yes,top=0,left=0')&gt;&lt;img 
    src=\&quot;image.php?id={$row[&quot;id&quot;]}\&quot;&gt;&lt;/a&gt;&quot;;?&gt;</p>
</blockquote>
<p>3.Change line to the following:</p>
<blockquote> 
  <p>&lt;div align=&quot;center&quot;&gt;&lt;?php echo &quot;&lt;a href=javascript:void(0); 
    onclick=window.open('displaypages/{$row[&quot;id&quot;]}.html','','width=500,height=500,scrollbars=no,resizable=yes,top=0,left=0')&gt;&lt;img 
    src=\&quot;image.php?id={$row[&quot;id&quot;]}\&quot;&gt;&lt;/a&gt;&quot;;?&gt;</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>&nbsp;</p>
</body>
</html>
Return current item: wwdgallery