In this tutorial i will teach you how to create a simple image gallery using Dreamweaver and PHP. The images will be stored in a database and displayed on the page.
First we need to download couple software to get this working. We will be testing it locally on the computer first, then once its working we will upload it to the web server. Its very simple, i will walk you guys through each step. So lets get started.
- WAMP5 : http://www.wampserver.com/en/index.php
- Installing WAMP will automatically create a www folder located in C:\wamp\www
- Create two folder in the www folder called, localroot and webroot
- In the localroot and webroot folder create a folder that will correspond to your site example: trickdigest
- In the site name folder located in local and web root folders create a image folder. Your folder tree should look like C:\wamp\www\webroot\trickdigest\images
EMS SQL Manager for MySQL (WAMP5 comes with a sql manager, you can use it, or which ever one you are familiar with.
- Go to http://www.tom-muck.com/extensions/help/HorizontalLooper/
- download and install the extension.
Step1: Create and Setup database
Open EMS and Create a database called gal12_db,
Click next, and you will see the window below.
Click next and Finish. When you do that you should see the Registration database window. Just click ok. Next click on the User Manager Icon.
Change the Servers to Localhost and click ok. At this point click on the Add User Icon.
your username and password will be different. Make sure to select All Privileges and With Grant option. With that click ok to apply the settings. Double click on the database you just created.
When you do that you will connect to the database, Click on Tools > SQL Scripts
Copy and paste the script below and click on this will create the table and fields.
CREATE TABLE `main_tb` (
`id` int(11) NOT NULL auto_increment,
`title` varchar(100) default NULL,
`image` varchar(200) default NULL,
`thumbnail` varchar(200) default NULL,
`description` varchar(999) default NULL,
`imageURL` varchar(300) default NULL,
UNIQUE KEY `id` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;
In doing that you will create the table below.
What i did above is create a database with the name gal12_db, table named main_tb and the fields.
id which is unique and auto increment, title, image, thumbnail, and description. After creating the database and fields you need to add the url, name and description to the gallery images you will be displaying. Should be similar to what i have below. Your image location will be different. I added 6 images to the database for testing proposes. Also this is important create a username and password we will need this to connect the database with
Below is the 6 data that i entered. This will be the 6 images in my gallery. You will have to download the images and place it in a folder located in your site folder.
Your image path in EMS should be
Step2: Creating site in Dreamweaver
Ok, at this point we have the database created and download the files. Open Dreamweaver, click New Site
In doing that you will see the window below. Fill in the information.
At this point you should have the database created with the tables and the Dreamweaver site created. Now we need to connect to the database and display the content of it. Click on Databases
This will bring up the window below. Fill in the information, use the username and password you created earlier using EMS.
Step3: Displaying the Data.
Click ok, and click Bindings
Click on the (+) next Recordset, you will see the fields shown above.
Table Code, copy and paste it into dreamweaver.
<table width=”158″ border=”0″ cellspacing=”2″ cellpadding=”2″>
<td width=”150″ align=”center” valign=”top”><table width=”153″ border=”0″ cellspacing=”2″ cellpadding=”2″>
<td height=”224″ align=”center” valign=”top”> </td>
<td align=”center” valign=”top”> </td>
Doing that will give you the table below
If you want all your images to be consistent size change the Width and Height setting.
The main page will show the thumbnail image which is the smaller .jpg image. When visitors click on the image they will be directed to the larger .png image.
Now click the record set to expand it
Click and Drag the title field over to the table as shown below.
Press F12 to preview the page and if anything was down correctly you should get the image with the name below it as shown below.
If you just get the name double check the database, the image path maybe incorrect.
If you get errors, make you after you create the page you click on the Put Files
To upload the files.
To link the thumbnail to the main image, click on the folder next to the link bar.
Select the option below and click ok.
Now press F12 to preview.
Now we need to display multiple images. Click on the table
Tom-Muck and select Horizontal Vertical Looper
Fill in the information shown below
Click ok, and preview the page.
Finished, Need help or have questions feel free to contact us.