Dreamweaver tutorials

• Link Exchange System with Dreamweaver CS3
• Add Category Page

In this section I will explain how to create Add Category page.

Open category_add.php file located in admin folder of your site and apply template to it (refer to the previous section for details).

Identify the line which says <p id="ptitle">Title Placeholder</p> and replace Title Placeholder with Add category.
Remove <p>Content Placeholder</p> paragraph leaving the flashing cursor in its place and change the view to Design.

In Insert panel choose Data tab and click Record Insertion Form Wizard (Fig. 146).

In the Record Insertion Form window choose the following:
Connection conndb
Table tbl_categories
After inserting, go to category_add.php

In Form fields section remove catid by selecting it and pressing - sign.
Rename catname by typing Category name: in the Label field and leave the rest as default (Fig. 147).

Click OK to add Record Insertion Form to our page (Fig. 148).

Select table by placing your cursor anywhere inside of the table and pressing <table> selector.
In the Properties panel choose:
Table Id tblinsert
CellPad 0
CellSpace 0
Border 0
Align Default
(Fig. 149)

Select the Insert record button press Ctrl+T on your keyboard.
Move your cursor to the end of the input tag and type id="button" (Fig. 150).
Press Enter to apply changes.

Select form by placing your cursor anywhere inside of the table and pressing <form> selector.
Press Ctrl+T on your keyboard and change id="form1" to id="forminsert"
(Fig. 151). Press Enter to apply changes.

Place your cursor in the first cell of the first column and press Ctrl+T on your keyboard twice.
Replace
td nowrap="nowrap" align="right"
with
th
and press Enter (Fig. 152).
This will convert table cell into a table header. Do the same with the cell underneath.

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

Place your cursor at the end of this line and hit Enter.
Now type:

Now identify the line which reads:

and add label to it by changing it to:

One line down you'll find the input tag for our catname:

Add id to it so it looks like the following:

Now let's leave our form for a while, we'll get back to it in just a minute.
At this stage our form is already adding new categories. All we need to do now is to apply validation to our Category name field and also display our categories so that we know that it has been actually added to the database.
We start with displaying all categories from the database.

Place your cursor after the line which reads:

You can also remove an empty paragraph (<p>&nbsp;</p>) which Dreamweaver inserts by default and press Enter to create a new line.

Open Application panel and from the Server Behaviors tab press + sign.
From the list of options choose Recordset (Fig. 153).

In the Recordset window choose the following:
Name rsCategory
Connection conndb
Table tbl_categories
Columns All
Filter None
Sort catname > Ascending
(Fig. 154)

Click OK to create a Recordset.

Go back to our </form> tag and place your cursor right under it, on the new line.
Change your view to Design and from the Data tab of the Insert panel choose Dynamic Table (Fig. 155).

In the Dynamic Table window choose the following:
Recordset rsCategory
Show All records
Border 0
Cell padding 0
Cell spacing 0
(Fig. 156)

Click OK to insert dynamic table.

Place your cursor in the first cell and click on the arrow above it.
From the menu choose Select Column (Fig. 157).
Hit Delete key on your keyboard to remove this column.

You should now be left with just one column as in Fig. 158.

Place your cursor in the first and only cell and click arrow again. This time choose Insert Column Right (Fig. 159).

This will insert a new column to the right of the existing one. Do the same again this time placing cursor in the newly created cell.
Once you have done this your table should have 3 columns (Fig. 160).

Save your file and place cursor in the first cell of the first row.
Press Ctrl+T on your keyboard twice and replace td with th. Press Enter to apply changes (Fig. 161).
Do the same with other two cells in the first row.

Now change your view to Code and identify the line which reads:

Replace catname with Category name:
Go one line down and replace &nbsp; in between the <th></th> tags with Remove.
Go another line down replace &nbsp; with Edit.
Save the file. After applying these changes you should get something line this:

Identify the line which reads:

and after cellspacing="0" hit the space bar add type id="tblrepeat".

Change your view to Design and place your cursor in the second cell of the second row of your table.
Type Remove and move to the next cell. In the third cell type Edit and save the file.
Go back to the second cell of the second row and select the word Remove.
In the Properties panel click the folder icon next to the Link drop down menu (Fig. 162).

In the Select File window navigate to your admin directory, select category_remove.php and click Parameters button (Fig. 163).

In the Parameters window, in the Name column type id and click the lightning icon in the Value column (Fig. 164).

In Dynamic Data window select catid and click OK (Fig. 165).

Click OK and OK again to add link to the selected text.

Now do the same with the Edit text in the third cell of the second row, this time select category_edit.php file and the same parameters as in Remove link.

If you go to Code view, the second row of your table should now look like this:

Open category_remove.php file located in your admin folder.
In the Server Behaviors tab of the Application panel click + sign and from the list of options choose Delete Record (Fig. 166).

In the Delete Record window choose the following:
First check if variable is defined Primary key value
Connection conndb
Table tbl_categories
Primary key column catid
Primary key value URL Parameter > id
After deleting, go to category_add.php
(Fig. 167)

Click OK to insert Delete Record server behavior. Save and close the file.

Go back to our category_edit.php file and in the Design view select Remove link in the second cell of the second row by placing your cursor anywhere inside of it and clicking the <a> selector (Fig. 168).

In the Behaviors tab of the Tag panel click + sign and from the list of options choose Massimocorner > Confirm Message (extension which we have installed in one of the previous chapters) (Fig. 169).

In the Confirm Message window overwrite an existing message with the following one:

and click OK to apply this behavior (Fig. 170). Save the file.

Select the entire table by placing your cursor anywhere inside of it and clicking <table#tablerepeat> selector.
Now in the Server Behaviors tab of the Application panel click + sign and from the list of options choose Show Region > Show If Recordset Is Not Empty (Fig. 171).

In Show If Recordset Is Not Empty window choose rsCategory and click OK to insert this server behavior (Fig. 172).

Go to the Code view and identify line which reads:

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

Select the entire paragraph, including <p></p> tags and from the Server Behaviors of the Application panel choose Show Region > Show If Recordset Is Empty
(Fig. 173).

Again, like in the previous example choose rsCategory and click OK.
Save the file.

Now we are going to apply validation to our form field.
Identify the line which reads:

Create a new line after this line of code and type the following:

Now identify the line which reads:

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

Now identify the line which reads:

and create a new line.
On new line type the following:

Our validation is done and the only last thing we will do is to force focus on the input field when the page first loads.
To do this identify the following block of code:

Place your cursor after } and type the following:

All together should now read:

You can now test your page by pressing F12 on your keyboard.
In the next chapter I will show you how to create an Edit Category page.

<< Add Link Page | Edit Category Page >>