Dreamweaver tutorials

• Link Exchange System with Dreamweaver CS3
• Submit link page

This, last chapter of the entire tutorial will explain how to create a page where visitors can submit their link for approval.

Open links_submit.php and in Code view identify the line which reads:

Place your cursor at the end of this line and hit Enter on your keyboard to create a new line. On new line type:

Hit Enter again to create another new line.
Change view to Design, go to the Bindings section of the Application panel, click + sign and choose Recordset (Query) (Fig. 219).

In the Recordset window press Simple button ­ this is if you are in the Advanced view (Fig. 220).

In the simple view choose the following:

Name: rsCategories
Connection: conndb
Table: tbl_categories
Columns: All
Filter: None
Sort: catname > Ascending
(Fig. 221)

Click OK and Save the file.

Go to the Code view and make sure your cursor is placed on the new line after the line which reads:

Change view back to Design and from the Data tab of the Insert panel choose Record Insertion Form Wizard (Fig. 222).

In the Record Insertion Form window choose the following:

Connection: conndb
Table: tbl_links
After inserting, go to: links_submitted.php

In the Form fields section remove linkid, linkdate and linkapproved by selecting each one and clicking ­ sign.

Now specify the order in which fields will be displayed by selecting each one and rearranging using the arrows in the right-top corner so that they are as follow:

linkemail
linkcat
linktitle
linkurl
linkrecip
linkdescr

Once they are in order, we can now rename the labels for them and selecting the relevant form field type by selecting each element and changing its Label and Display as values.
Each one should have the following values:

linkemail - *Email: > Text field
linkcat - *Category: > from the Display as choose Menu and click Menu Properties button (Fig. 223).

In the Menu Properties window select From database radio button and choose the following:

Recordset: rsCategories
Get labels from: catname
Get values from: catid

Click OK and continue with the remaining fields(Fig. 224).

linktitle ­ *Link title: > Text field
linkurl - *URL: > Text field
linkrecip - *Reciprocal link: > Text field
linkdescr - *Description: > Text area

The Record Insertion Form window should now look like in Fig. 225.

Click OK to add the form to our page and Save the file.

Place your cursor anywhere within the table and press <table> tag on the status bar to select the entire table (Fig. 226).

In the Properties panel from the Table Id dropdown menu choose tblsubmit, from the Align dropdown menu choose Default and for the CellPad, CellSpace and Border type 0 (Fig. 227).

Select the Insert Record button and in the Properties panel change the Value to Suggest link exchange (Fig. 228).

With the button still selected hit Ctrl+T on your keyboard once. Move your cursor to the end of input tag and type id="button". Now hit Enter on your keyboard to confirm changes and Save the file (Fig. 229).

Now place your cursor anywhere within the table and click <form#form1> tag on the status bar to select the entire form (Fig. 230).

Press Ctrl+T on your keyboard once to open Edit tag option. Now change id="form1" to id="formsubmit" and hit Enter on your keyboard to confirm changes (Fig. 231). Save the file.

Change the view to Code and identify the line which reads:

and add label to it, so it reads:

On the next line place your cursor after name="linkemail" and type:

Now the entire two lines should read:

Do the same operation with all remaining fields (except the submit button) by adding label with the for attribute which should have the same value as name attribute of the field it is referring to and id attribute to its field with the same value.

Once you have done all this, change the view to Design and place your cursor within the first cell of the first raw of the table ­ the one with the *Email in it. Now click the <td> tag on the status bar to select this table cell (Fig. 232).

On your keyboard hit Ctrl+T once and change <td> tag with all its attributes (Fig. 233) to a simple <th> tag (Fig. 234).

Perform the same operation with all of the cells in the left column.

Once you′ve done all of them, change the view to Design and identify the line which reads:

Place your cursor at the end of this line and hit Enter on your keyboard to create a new line. On new line type the following:

Now identify the line which reads:

Place your cursor after the closing </tr> tag and hit Enter to create a new line. On new line copy and paste the following:

Place your cursor after the closing </form> tag and hit Enter to create a new line.
On new line copy and paste the following javascript:

Now we will apply sticky form fields functionality to our form.

To start with identify the following input field:

and change its value from an empty string to:

The entire input should now look like this:

Do the same with all remaining input fields (except the submit button) replacing the $_POST[‘linkemail’] with the relevant field′s name.

Now select the entire <select> section which reads:

and replace it with the following:

What it basically does is it adds an extra <option> to be displayed as first one with the value="" and it also adds sticky form filed functionality to each, displayed <option> by adding selected="selected" if this specific category is selected while form is submitted.

For <textarea> place your cursor before the closing </textarea> tag and copy and paste the following:

Our sticky form fields functionality is now applied to our form.

Now we are going to add one of the Server Behaviors which checks if the entered url is already listed in our database. If it is then it will redirect visitor to links_already_exists.php page, where visitor is informed that this url has already been added to our system.

To do this change your view to Design and in the Server Behaviors section of the Application panel click + sign. From the list of options choose User Authentication > Check New Username (Fig. 235)

In the Check New Username window choose:

Username field: linkurl
If already exists, go to: links_already_exists.php
(Fig. 236).

Click OK and Save the file.

Now we are going to add server side validation to our form.
Change view to Code and identify the line which reads:

Place your cursor at the end of this line and hit Enter on your keyboard to create a new line. Now copy and paste the following:

Identify the line which reads:

Place your cursor after this line and hit Enter on your keyboard to create a new line.

On the new line we are going to copy the following code which will send us an email every time someone submits the link:

Now identify the line which reads:

and after the curly brace place another one so it looks like this:

Wow! We have just finished our validation.

Now it is a good idea to provide some information to the visitor at the top of the submission form. Identify the line which reads:

Place the cursor at the end of this line and hit Enter on your keyboard.
On new line type something like this (or whatever you really feel like) replacing link details with your own ones:

Once you′ve done this, Save the file and this page is officially completed.
The only last thing we need to do to finish this tutorial is to provide some information on two other pages: links_submitted.php and links_already_exists.php.

Open links_submitted.php, go to Code view and identify the line which reads:

Place your cursor at the end of this line and hit Enter on your keyboard to create a new line. On new line type:

Save and close this file.

Now open links_already_exists.php, identify the line which reads:

Place your cursor at the end of this line and hit Enter to create a new line.
On new line type:

Now identify the line which reads:

Create new line and copy and paste the following:

Save and close the file.

And here it is ­ THE END of this, rather long tutorial.

I hope you enjoyed this tutorial ­ feel free to post any comments or thoughts.
In the meantime take care and keep checking this site for new, oncoming tutorials.

Sebastian Sulinski

<<Latest Links Page