• home
  • forum
  • my
  • kt
  • download
  • Link Exchange System with Dreamweaver CS3, PHP, MySQL and CSS Part 3

    Author: 2008-08-11 08:04:36 From:

    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).

    Bindings section of the Application panel image
    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)

    Create recordset with Dreamweaver CS3 image
    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).

    Insert recordset entity image
    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).

    Select the code image
    Fig. 192

    Repeat region in Dreamweaver CS3 image
    Fig. 193

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

    Repeat region displaying all records in Dreamweaver CS3 image
    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.

    Preview project by pressing F12 image
    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).

    Repeat Region - Show Record If Recordset Is Not Empty image
    Fig. 196

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

    Show Record If Recordset Is Not Empty image
    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).

    Show Record If Recordset Is Empty image
    Fig. 198

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

    Show Record If Recordset Is Empty window image
    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.

    discuss this topic to forum

    relation tutorial

    No relevant information

    New

    Hot