Adobe Dreamweaver

Create a simple image gallery using Dreamweaver and PHP.

This tutorial 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.

Introduction:

First, we need to download a couple of software to get this working. We will be testing it locally on the computer first, and then once it is working, we will upload it to the webserver. It’s straightforward, and I will walk you guys through each step. So let us get started.

  1. 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. 
  2. 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.

Unique id 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. It should be similar to what I have below. Your image location will be different. I added 6 images to the database for testing purposes. Also, this is important to 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.

C:\wamp\www\localroot\galleryTest\images\gallimages

Your image path in EMS should be

images/gallimages/image_name.jpg

Step2: Creating a 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.

Local Info
Remote Info
Testing Server

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

Click on select 

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  and select Recordset. Create the recordset below.

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″>
<tr>
<td width=”150″ align=”center” valign=”top”><table width=”153″ border=”0″ cellspacing=”2″ cellpadding=”2″>
<tr>
<td height=”224″ align=”center” valign=”top”>&nbsp;</td>
</tr>
<tr>
<td align=”center” valign=”top”>&nbsp;</td>
</tr>
</table></td>
</tr>
</table>

Doing that will give you the table below

Click inside the large table and click insert thumbnail 

Click ok.

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

With the extension you download and install earlier. Click Server Behaviors, 

Tom-Muck and select Horizontal Vertical Looper

Fill in the information shown below

Click ok, and preview the page.

Finish:

Finished, Need help or have questions feel free to contact us.

Related Articles

Back to top button
Share via
Copy link
Powered by Social Snap