Dreamweaver tutorials

• Link Exchange System with Dreamweaver CS3
• Search engine

To create a search engine open links_list.php and in Code view create a new line after <p id="ptitle">Links</p> (Fig. 87).

Now go to Design view and from the Insert panel choose Forms tab and click Form button to insert a form into our page (Fig. 88).

With form still selected double click Ctrl+T. This will bring up a form Edit tag option (Fig. 89). Change the id="form1" to id="forminsert" and press Enter on your keyboard. Save the file.

Go to Code view and place the cursor in between the <form></form> tags (Fig. 90).

From the Insert panel choose Layout tab and click Table to insert table (Fig. 91).

In the new window choose:
Rows: 1
Columns: 4
leave Table width: blank
Border thickness: 0
Cell padding: 0
Cell spacing: 0
Header None
Caption: Search for Link

Leave all remaining options as default (Fig. 92).

Add id="tblinsert" after cellpadding="0" of the <table> tag (Fig. 93).

Now go to the Design view and place your cursor in the second cell of the table
(Fig. 94).

Now from the Forms tab of the Insert panel choose Text Field (Fig. 95).

In the new window type the following:
ID: keyword
Label: Search for:
Style: choose Attach label using 'for' attribute
Position: choose Before form item
Click OK to insert Text Field (Fig. 96).

Now go to Code view and move <label for="keyword">Search for:</label> to the first table cell (in between the <td></td> tags) like in Fig. 97.

Now change the <td><label for="keyword">Search for:</label></td> tags of the first cell into <th><label for="keyword">Search for:</label></th>.

Go to Design view and now, before we move on to add a drop down menu item we will first create a recordset which will populate all categories currently available in the database.
In the Server Behaviors tab of the Application panel click + sign and choose Recordset (Fig. 98).

In the new window type the following:
Name: rsCategories
from Connection: choose conndb
from Table: choose tbl_categories
Columns: select All
and in the Sort: choose catname and Ascending
Click OK to close the window and save the file (Fig. 99).

Place your cursor in the third cell and click List/Menu from the Forms tab in the Insert panel.

In the new window type:
ID: categ
leave Label: blank
in Style: select No label tag and leave the remaining options as default (Fig. 101).

With the drop down menu (List/Menu) still selected click Dynamic button in the Properties panel (Fig. 102).

In the new window choose
Menu: "categ" in form "form1"
Options from recordset: rsCategories
Values: catid
Labels: catname
finally click OK to apply changes (Fig. 103).

Drop down menu displays now all of our categories from the database.
You can test this page in the browser and you will be able to see our categories in the newly created menu. We still need to do some tweaking with it but let's just finish our form and we will get back to this in just a minute.

Now place your cursor in the last - fourth cell and from the Forms tab of the Insert panel choose Button (Fig. 104).

In the Accessibility window leave all fields blank and for Style select No label tag. Click OK to insert the button (Fig. 105).

Ensure that our new button has id="button" assign to it by selecting it in the Design view and pressing Ctrl+T (Fig. 106). Dreamweaver should do it already for you. Press Enter on your keyboard and save the file.

Up to now we have been purely using Dreamweaver tools and extensions to create all functionality on our site.
Now we will get dirty and start doing some coding - but don't worry - it's nothing major.

First we will make some amendments to our drop down menu. We need to add one option which will give us the result for all categories not just one which is currently selected.
To do this go to Code view, identify the line which starts with
<td><select name="categ" id="categ"> and create a new line underneath
(Fig. 107).

In the new line type the following:

Now if you test it in your browser you should see an extra option in the drop down menu which says All Categories.

In the <form> tag change method="post" to method="get" and change action="" to action="<?php echo $_SERVER['PHP_SELF']; ?>" so it looks like in Fig. 108.

Also, just to make our URL more readable when filtering our searching let's remove name="button" from our button so it shows as in Fig. 109.

Sticky form fields
Sticky form fields are preserving user input after page reloads.

To create sticky form fields first identify the line which says:

After id="keyword" type the following:

Now the this form field should look as in Fig. 110.

Next step will be to apply sticky form fields to our drop down menu.
Identify the line which says:

and after value="" type the following:

Now apply the same to the other option in our drop down menu.
Find the line which reads:

After value="<?php echo $row_rsCategories['catid']?>" create a new line and type the following:

Now our entire search form should read as follow:

You can test it in the browser. Whatever you type in the first field should stay there when you press Submit button.
The same applies to the dropdown menu. Choose any of the categories and press the button. Drop down menu should preserve your chosen category.

Next we will need to modify our SQL statement to ensure that it takes our searching criteria into account when pulling out the records from the database and displays them on the page.

Scroll up to the top and find the line which says:

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

In the next line you should see the following statement:

Copy it and paste right under itself.
Now modify the first copy of the statement so it reads:

Lastly after the second copy of the statement type:

Now the modified code should read:

Try to test your page in the browser.

The only last thing we need to do is to create a recordset paging in case we have more than just 30 records which we have set up as a limit for our page.
Because we have modified our rsLinks recordset, Dreamweaver does not display it in its Server Behaviors window. On this occasion we will simply copy and paste the following content after the line which reads
<?php } // Show if recordset empty ?>:

This step completes this section where we have learned how to create a search engine for our page.
In next section I will explain how to create Edit Link page.

<< Manage Links Page | Edit Link Page >>