Chad McComas

Dreamweaver CS5.5 has added improvements to make it more compatible with PHP and MySql. This tutorial will show you how to use DW and create a multi-page form that you can then insert into a database. If you are intending to email this form instead, you should still find this tutorial useful.  This tutorial will not show you how to make a dynamic site in DW.  I might cover that later in another tutorial.  To do this tutorial, it is assumed you already know how to create a dynamic site in DW, and also that you have a testing server installed on your computer (or a database system you can use online).

Getting Started

1. Create a new page in Dreamweaver and save it as myform1.php.

2. In the Insert Panel, make sure you have Forms selected and click on Form.

Note: If you don’t see the Insert Panel, you can show it by clicking on Window>Insert.

3. This will put a form box on your page. Click inside the form box and click enter a couple times to give yourself some room.

Our Database

Now that we have a page. We need to make sure our database is setup and ready to be used. We are going to accomplish this now and then we’ll start adding form elements to our page. I’m using PhpMyAdmin. Regardless of what you are using to manage your database, the instructions will be similar enough that it shouldn’t pose any problems.

1. In PhpMyAdmin, create a new database and call it myform.

2. Create a new table and call it users. It needs to have 6 columns for this tutorial.

3. Our first column is going to be our primary key. We are going to name this user_id.

• Set its type to INT
• Set its length/values to 11
• Set its attributes to unsigned
• Set its index to PRIMARY
• Make sure Auto-Increment (AI) is checked or selected.

4. The remaining columns won’t need as many options. Set them as this:

• firstname varchar 20
• lastname varchar 20
• email varchar 30
• username varchar 15
• password varchar 15

5. Click Save.

Creating Form Elements

Now that we have our database setup, we’re going to setup our multi-page form. Back in Dreamweaver:

1. In the Insert Panel, click on Text Field.

2. This brings up the Input Tag Accessibility Attributes box. Fill it out as show in in the graphic. Also make sure you put each form element on a new line.

3. Create two more text fields and set their settings like this:

Text Field

• ID: lastname
• Label: Last Name:

Text Field

• ID: email
• Label: E-Mail:

4. Now add a button from the Insert Panel. It’s ID should be submit. Leave the label blank.

5. Now our form should look something like this:

Making Minor Changes in Code View

Now that we have our first page form created, we still need to make a slight change to the code. We’re going to do this here.

1. First, create a new page and save it. Let’s call it myform2.php

2. In DreamWeaver, back on our myform1.php file, click on Split view so we can see the code.

3. The Form Action is blank right now. Change it so that it says myform2.php. It will look like the code below when you are done:

4. Save the page myform1.php

Creating the 2nd Form Page

Our first page is complete now. If you test it in Live view, you’ll see that when you click submit – it goes to myform2.php but nothing happens. What we are going to do now is capture that information and store it.

1. Open myform2.php.

2. Create a new form as before.

3. Create 3 hidden fields in the form using the Insert Panel.

4. Click on one of the hidden fields and you’ll notice down in the Properties box that it is named hiddenField. The other two are named hiddenField2 and hiddenField3. Change each hidden field so they are named the following:

• firstname
• lastname
• email

5. Click on Split View so we can see our code.

6. At the very top of our file, put this:

<?php
$firstName=$_POST['firstname'];
$lastName=$_POST['lastname'];
$eMail=$_POST['email'];
?>

What we are doing here is setting 3 variables.  It is taking the firstname field from our form on the previous page and assigning to it  a variable called $firstName.  Whenever we call this variable, it will actually be calling whatever was put into that field earlier.

7. Back in Design view.  Click on the first hidden field.  In the properties box, you’ll notice the value is empty.  Past this into it:

<?php echo $firstName;?>

This is storing our variable for firstname on this hidden field.

8. Go ahead and make the values for the next two hidden fields the following:

<?php echo $lastName;?>

<?php echo $eMail;?>

Creating the Remaining Form Elements

Now we have created our form on the first page, we’ve given the form a place to store it on the second page and now we are going to create the last two fields for our form and then we’ll make it so it inserts into a database.

1. In myform2.php, create two more Text Fields from the Insert Menu.  Their settings will need to be set to the following:

Text Field

ID: username

Label: Username:

Text Field

ID: password

Label: Password

2. Create a button and its ID should be submit.

Our form should look like this now:

3. Click on the password field so it is selected.  In the properties box, change its type to password.  This will prevent the field from showing the password to people when they type it in.  Like most password boxes.

That’s it!  Now we’ve created both of our forms and up to this point, they do exactly what they need to do.  Next, we are going to add the database to DreamWeaver so we can interact with it.

Finishing Touches

1. In DW, in the databases panel.  (IF it isn’t showing then use the horizontal menu to reveal it: Window>Databases)

2. Click the Plus sign and choose MySql Connection.

This brings up the MySql Connections box.

3. Fill out the box with the appropriate settings.

For Connection Name, localhost will work fine.

MySql Server: localhost.  Even if you are using an online server, localhost very well might work.

Fill in your username and password for the database and then put in your database name.  Then click Test.

4. In the Server Behaviors panel (Window>Server Behaviors) click the Plus sign and choose Insert Record.

Make sure the Insert Table is set to Users.  If you’ve done this tutorial word for word – then DW should automatically detect what it needs to do.   Make sure each column is set to do the following:

user_id is not getting any information as we set it to automatically increment.

If something isn’t being detected correctly, you can use the value dropbox and the Submit as: areas to correct them.

5. When you are done, Click Ok.

6. Save all your files.

7. Now go back to myform1.php and choose Live Mode.

8. Fill out the form, fill out the form when you get to myform2.php and click submit.

9. Look in your database and all the information you filled out should be stored!

That completes this tutorial.  If you have any questions, ask in comments or feel free to email me.  Thanks!