Creating Search Engine and Display Categories Page with Dreamweaver CS3, PHP 5 and MySQL 5

• Web Designer
• Skills
• Portfolio
• Tutorials
• Contact

Link Exchange System with Dreamweaver CS3, PHP, MySQL and CSS Part 3

Display Search Result >>

Search Engine and Display Categories Page
This part of the tutorial will explain how to create a search engine which will be included in all of the pages on the front end of our Link Exchange System. If you have some PHP knowledge, you are certainly familiar with the term include or require. These functions allow us to add the content of the external files to our pages by simply providing their location.

Create new folder and name it includes. Inside of that folder create a file and give it a name of search_engine.php. Open this file, remove the entire content and copy and paste the following content into it:

<?php
$curPage = basename($_SERVER['SCRIPT_NAME']);
?>
<!-- search form -->
<form id="searchform" name="searchform" method="get" <?php if($curPage == "index.php") { ?>action="resources/links_search_result.php"<?php } else { ?>action="links_search_result.php"<?php } ?>>
<table cellpadding="0" cellspacing="0" border="0" id="searchwrapper">
<tr>
<th><label for="keyword">Search for link: </label></th>
<td><input name="keyword" type="text" id="keyword" /></td>
<td><input type="submit" class="searchbutton" value="search" /></td>
</tr>
<tr>
<td colspan="3"><a href="/index.php">List of categories</a><a href="/resources/links_latest.php">Latest links</a><a href="/resources/links_submit.php">Suggest site</a></td>
</tr>
</table>
</form>
<!-- /search form -->

Now Save and close the file.

Open index.php which you′ll find in your site′s root folder. As you may remember from the first part of this tutorial, we have already applied the template to all our pages. Now we are going to insert link to our search engine from all of the pages. To do this, in Code view identify the line which reads:

<p>content placeholder</p>

and replace it with the following:

<?php include ('includes/search_engine.php'); ?>

The include() function places the content of the file which is defined within the prentices inside the file from which this function is called. In our case it will include the content of search_engine.php in the currently edited page ­ index.php.

Do the same will all other files within resources folder and preview them in the browser to check if they are displaying the search engine. Remember to change the path to the search_engine.php by placing ../ at the beginning when you′re linking from within the resources folder - so it reads:

<?php include ('../includes/search_engine.php'); ?>

Open index.php and in Code view, after the <?php include ('includes/search_engine.php'); ?> create a new line and type the following:

<p id="title">Categories</p>

<ul id="categories">
<li><a href=""" title="""></a></li>
</ul>

Now open Application panel and in the Bindings tab press + sign and select Recordset (Query) (Fig. 189).

Fig. 189

In the Recordset window type the following:

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

Fig. 190

Click OK to create a recordset and Save the file.

Now identify the line which reads:

<li><a href="" title=""></a></li>

Open Application panel and in the Bindings section expand Recordset (rsCategories) by clicking the small + sign (Fig. 191).

Fig. 191

In our link replace href="" with href="resources/links_search_result.php?catid= and drag and drop catid from the Bindings panel at the end of this so it reads:

href="resources/links_search_result.php?catid=<?php echo $row_rsCategories['catid']; ?>"

For title drag and drop catname from the Bindings panel so it reads:

title="<?php echo $row_rsCategories['catname']; ?>"

Drag and drop catname between the <a></a> tags as well.
Now the whole link should look like this:

<a href="resources/links_search_result.php?catid=<?php echo $row_rsCategories['catid']; ?>" title="<?php echo $row_rsCategories['catname']; ?>"><?php echo $row_rsCategories['catname']; ?></a>

Select the entire link together with <li></li> tags (Fig. 192) and in the Application panel change the tab to Server Behaviors, press the + sign and choose Repeat Region (Fig. 193).

Fig. 192


Fig. 193

In the Repeat Region window choose our recordset rsCategories and select All records radio button to simply display all records (Fig. 194).

Fig. 194

Click OK and Save the file to apply changes.
You can now test your page by hitting F12 on your keyboard. You should be able to see two of our categories as in Fig. 195.

Fig. 195

The one, last thing we need to do is to create a message which will replace the list of categories in the situation when there won′t be any to display.

To do this, select the entire unordered list starting with <ul> and ending with </ul> and in the Server Behaviors section of the Application panel press + sign. Now choose Show Region > Show If Recordset Is Not Empty (Fig. 196).

Fig. 196

In the Show If Recordset Is Not Empty window choose rsCategories recordset and click OK (Fig. 197).

Fig. 197

Now place your cursor after the line which reads:

<?php } // Show if recordset not empty ?>

make sure that the above line is placed after the ending </ul> tag (sometimes Dreamweaver puts code in the wrong place) and create a new line.
On new line type:

<p>Sorry, there are currently no categories available.</p>

Select the entire paragraph and in the Server Behaviors of the Application panel click + sign again. This time choose Show Region > Show If Recordset Is Empty (Fig. 198).

Fig. 198

In the Show If Recordset Is Empty window choose rsCategories recordset and click OK (Fig. 199).

Fig. 199

Save the file and test it in your browser by hitting F12 on your keyboard.

This way we have finished our categories page.
Next chapter will explain how to display a search result.

Display Search Result >>