Dreamweaver tutorials

• Link Exchange System with Dreamweaver CS3
• Display Search Result

This chapter will explain how to create a page which will display our search result.

Open links_search_result.php located inside of the resources folder in the root of your site. Identify the line which reads:

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

Open Application panel and in the Server Behaviors section click + sign. From the list of options choose Recordset (Fig. 200).

In the Recordset window type the following:

Name: rsLinks
Connection: conndb
Table: tbl_links
Columns: Selected ­ now select: linktitle, linkurl and linkdescr
Filter: linkapproved | = | Entered Value | y
Sort: linkdate | Ascending
(Fig. 201)

Now click Advanced button.
In the new window we are going to slightly modify the sql statement using Dreamweaver built in features.
In Database items section expand tbl_categories table, select catname and press Select button on the right hand side (Fig. 202).
This will add catname to the sql statement.

Now select linkcat in the tbl_links of the Database items section and press Where button on the right hand side (Fig. 203). This will add AND tbl_links.linkcat to the WHERE section of our SQL statement.

Now place your cursor after AND tbl_links.linkcat in the SQL section and type = sign.

Lastly select catid in the tbl_categories of the Database items section and click Where button again (Fig. 204). This will add tbl_categories.catid to the SQL statement.

Click OK and Save the file.

Go to the Code view and in the Application panel choose Bindings tab. In the code of the page identify the line which reads:

Place your cursor in between the quotes of the href and from the rsLinks recordset select linkurl. Now press the Bind button underneath (Fig. 205).

Your href should now look like this:

Now drag and drop linktitle from Bindings panel in between title′s quotation marks so it looks like this:

Drag and drop linktitle again before the closing </a> tag so the whole link looks as follow:

Now place your cursor after the closing </a> tag and press Shift+Enter on your keyboard. This will create a <br /> tag, after which drag and drop linkdescr from the Bindings section of the Application panel (Fig. 206).

Place your cursor right after the new, dynamic field and before the closing </li> tag and press Shift+Enter on your keyboard again to create another <br /> tag. After this type:

Now, before we move on, I would like to explain you what exactly is happening here. We are applying a css class around the dynamic field to format its content (url). Dynamic field will display the linkurl field of the relevant record from the database. The basename function uses two parameters: first ­ the source, second ­ the element which needs to be removed from source. This means that we will remove http:// from our linkurl field so it displays url starting from www. If source will not have http:// then the function will simply ignore it and display whatever there is in this field.

Place your cursor after closing </span> tag and press Shift+Enter on your keyboard again to create another <br /> tag. Now type:

Place your cursor after the word Category: and before the closing </span> tag. Now press spacebar on your keyboard and right after this drag and drop catname from the Bindings section of the Application panel. Select the newly added dynamic field:

and on your keyboard press Ctrl+B to wrap it with <strong></strong> tags.

Go to Design view and place your cursor anywhere within the section surrounded with <li></li> tags. Now press <li> tag on the status bar to select the entire section
(Fig. 207).

Now from the Server Behaviors tab of the Application panel press + sign and from the list of options choose Repeat Region.

In the Repeat Region window choose our recordset rsLinks and type 20 in the Show section to indicate that we only want 20 records to be displayed on each page (Fig. 208). Click OK and Save the file.

It there will be more than 20 records, users need to have an option to navigate through the pages. To allow this, we will create a recordset navigation bar. Dreamweaver has a build in tool to create recorset navigation bar which is located in the Data section of the Insert panel, however I will show you an easy way of creating the recordset navigation bar using just a few options from the Server Behaviors section of the Application panel.

Place your cursor after the closing </ol> tag and hit Enter on your keyboard twice to create two, new lines. Now copy and paste to following:

Change view to Design and select the first First word. In the Server Behaviors section of the Application panel click + sign. Now choose Recordset Paging > Move to First Page (Fig. 209).

In the Move To First Page window choose our selection - First and recordset ­ rsLinks. Click OK to create link (Fig. 210).

Now select the first Previous word and do the same, only this time choose Move To Previous Page (Fig. 211).

In the Move To Previous Page choose Previous selection and rsLinks recordset.

Select first Next word and do the same, this time choosing Move To Next Page. In the Move To Next Page window choose Next and rsLinks.

Finally select first Last word and for this one choose Move To Last Page. In the Move To Last Page window choose Last and rsLinks.

In Design view you should have now something what looks like in Fig. 212.

Now select First link and in the Server Behaviors section of the Application panel click + sign. Choose Show Region > Show If Not First Page (Fig. 213).

In the Show If Not First Page window select rsLinks recordset and click OK (Fig. 214).

Now select span with the second First word and this time choose Show If First Record. Select rsLinks and click OK.

Do the same with the remaining links and spans within our recordset navigation bar by assigning the following server behaviors every time choosing rsLinks as recordset:

Link Previous ­ Show If Not First Page
Span Previous ­ Show If First Page
Link Next ­ Show If Not Last Page
Span Next ­ Show If Last Page
Link Last ­ Show If Not Last Page
Span Last ­ Show If Last Page

Now go to Code view and identify the line which reads:

Place your cursor before this line and type the following:

Now find the closing </p> and type:

What this will do is it will make sure that the recordset navigation bar is only visible if the total number of records displayed on page will exceed the maximum which we have defined as 20.

Now select the content of the page from the line which reads:

down to (including) the line which reads:

With all this selected, go to the Server Behavior section of the Application panel, click + sign and from the list of options choose Show Region > Show If Recordset Is Not Empty (Fig. 215).

In the Show If Recordset Is Not Empty window choose our rsLinks recordset and click OK (Fig. 216).

This server behaviour will hide the content if there aren′t any records available. To display message instead of empty space in case where there aren′t any records available, 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:

Select the entire paragraph and from the Server Behavior of the Application panel choose Show Region > Show If Recordset Is Empty (Fig. 217).

Again choose our rsLinks recordset, click OK and Save the file (Fig. 218).

Our page is now well formatted to display links, the only last thing we must do is to filter our result. To do this identify the line which reads:

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

Now identify the line which reads:

and before this line place the closing curly bracket like this:

That′s it there is to it ­ our page is finished.

In the next section I will explain how to create Lastes Links page.

<<Search Engine | Latest Links Page>>