Dreamweaver tutorials

• Link Exchange System with Dreamweaver CS3
• Add Link Page

In this part of the tutorial I will be explaining you how to create Add link page.

Open links_add.php file located in the admin folder of your site's root.
Press Ctrl+A and hit Delete button to remove the entire content of the page.
Go to Modify > Templates > Apply Template to Page.
In the new window choose admin_temp and click Select to apply template to the page (Fig. 129).

Save file and in the Code view remove <p>Content Placeholder</p>.
Open Application panel and in the Server Behaviors tab press + button.
From the list of options choose Recordset (Fig. 130).

In the new window type the following:
Name rsCategories
Connection conndb
Table tbl_categories
Columns All
Filter None
Sort catname > Ascending
(Fig. 131)

Click OK and save the file.
Identify the line which says <p id="ptitle">Title Placeholder</p> and replace Title Placeholder with Add link.
Now place cursor at the end of this paragraph and press Enter to create a new line. Leave your cursor at the begining of the newly created line and change the view to Design.
Now from the Data tab of the Insert panel choose Record Insertion Form Wizard (Fig. 132).

In the Record Insertion Form window choose:
Connection conndb
Table tbl_links
After insertin, go to links_added.php

In Form fields section do the same as in previous section - remove linkid and linkdate by selecting them from the list and pressing - button at the top.
Rename and rearange the order of the remaining fields by changing their labels and order to be as follow:
linkemail Email:
linkcat Category:
linktitle Link title:
linkurl URL:
linkrecip Reciprocal:
linkdescr Description
linkapproved Approved?:

Now go back to linkcat and from the Display as choose Menu and click Menu Properties button.
In the Menu Properties window choose the following:
Populate menu items From database
Recordset rsCategories
Get labels from catname
Get values from catid

Click OK (Fig. 133).

Select linkdescr and from the Display as menu choose Text area.
Lastly select linkapproved and again, from the Display as menu choose Menu.
This time choose:
Populate menu items Manually
and in the Menu items create two options:
Label Yes
Value y
click + button and add another:
Label No
Value n
(Fig. 134)

Click OK and OK again (Fig. 135).

This will insert Insert Record form into our page (Fig. 136).

Place your cursor anywhere inside of the table and select <table> tag selector
(Fig. 137).

From the Properties panel choose:
Table Id tblinsert
CellPad 0
CellSpace 0
Border 0
Align Default
(Fig. 138)

Now select button and press Ctrl+T. At the end of the Edit tag type id="button" and press Enter (Fig. 139).

Place your cursor in the first cell of the first column (Email:) and press Ctrl+T on your keyboard twice. Replace td nowrap="nowrap" align="right" (Fig. 140) with th
(Fig. 141) and press Enter.

Do the same will the remaining cells in the first column.
Your page in Dreamweaver's Design view should now look like in Fig. 142.

Switch to the Code view. Identify the line which says:

After name="linkemail" type id="linkemail".
Go to <th>Email:</th> and place your cursor before the word Email:.
Type <label for="linkemail">.
Now move your cursor after the word Email: and type </label>.
All together should now look like this:

Do the same with all remaining <th> tags and their input, select and textarea form fields using their relative name's for id and for attributes.

Identify the line which says:

Place you cursor at the end of this line, press Enter to create a new line and type:

Also, before moving on, change the id="form1" in the <form> tag to id="forminsert"

Now, once all this is done, bofore we start adding modifications to the code we will add one of the Server Behaviors which checks if the record already exists in the database before adding it.
This behaviour has been created specifically for checking Username in the user registration forms but it will work very well for this purpose as well.

To apply this behaviour switch to Design view, go to the Server Behaviors tab of the Application panel and click + sign. From the list of options choose:
User Authentication > Check New Username (Fig. 143).

In the Check New Username window choose linkurl for Username field and links_already_exists.php for If already exists, go to (Fig. 144). Click OK and save the file.

Ok - now all we've got left is to apply sticky form fields and validation and our page is done.
First we are going to apply server side validation - same one as in the previous chapter.
Identify the line which reads:

Create a new line and copy and paste the following validation code:

Now identify the line which says:

and add an extra closing curly bracket } at the end so that it reads:

Now before we move on I would like to stop for a while and explain you what actually has happened here.

The line which reads:

checks if the field linkemail is not empty. Yes, we are NOT applying validation to this field if it's empty because sometimes may happen that you will not have an email address of the website which you are adding link to, therefore if we make email field mandatory you would always have to enter email address, otherwise you wouldn't be able to add new record. I hope that makes sense.
Email address is only validated if there is a data to validate. In fact we are only validating linkcat, linktitle, linkurl and linkdescr which are mandatory fields by checking if they are returning an empty string (""):

If any of them returns an empty string then the new variable is created called $mess.
This variable - if exists - will display a message, which tells us which fields need to be filled in before the form will be successfully submitted.

That's it - quite simple if conditional statement. If you want to learn more about different statements used in PHP try to google it - there's a lot of good resources available out there.

Anyway, let's move on. Identify line which says:

Create a new line after it and type the following:

Our validation is completed. You can test it now by pressing F12 on your keyboard.

The last step will be to apply sticky form fields to our form. Again, we will be using if statement to find out if there is a value assigned to the form field. If the answer is yes than we will display this value in its field, otherwise field will remain empty.

Identify the line which reads:

Inside of the value attribute type the following statement:

Now the whole input field should look like this:

Now identify the line which reads:

Place your cursor at the end of this line and create a new line by pressing Enter on your keyboard.
Now type:

Now, three lines down you should see the line which reads:

We need to slightly modify the <option> tag so it reads:

Identify the line which reads:

For the value of this input field type:

For the line which reads:

assign the value of:

For the line:

assign the value of:

For textarea field type which reads:

in between the <textarea></textarea> tags type:

Because textarea hasn't got a value attribute we need to provide a closing tag and place the value of it in between an opening and closing tag.

This line shoud now look like this:

Now identify the line which reads:

Replace an existing php statement which reads:

with the following one:

Do the same with the next line except this time replace the PHP content with the following:

We have just completed sticky form fields and we are actually finished with this page. The only last thing you may want do is to add * symbol to the mandatory fields so that administrator knows which fields are required (Fig. 145).

Open links_already_exists.php page, apply template to it, change the <p id="ptitle">Title Placeholder</p> to <p id="ptitle">Duplicate record</p> and create a new line after this.
On new line type:

Identify the line which says:

Create a new line after <!-- InstanceBeginEditable name="head" --> and type:

Now open links_added.php and apply template to it.
In Code view replace <p id="ptitle">Title Placeholder</p> with <p id="ptitle">Link added</p> and create a new line after this.
On new line type:

Again, create a new line after <!-- InstanceBeginEditable name="head" --> and type:

This way we have completed this section and can move to the next one in which I will be explaining how to create Add category page

<< Edit Link Page | Add Category Page >>