close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Create a search page that displays filtered results

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Dreamweaver, PHP

rating
2 ratings | Sign in to rate this tutorial | View comments

Give your website visitors a method to search and display results on your website. In this tutorial, I will demonstrate how to create a search page and a filtered results page.

next sectionarrow down
arrow downWhat will you need to start?

  1. Dreamweaver CS3 or newer
  2. Data Bridge (alternately, DataAssist 2.0 or higher) installed and activated in Dreamweaver
  3. PHP site defined in Dreamweaver
  4. SQL sample files to use with this tutorial: blue_sky_music.sql
  5. PHP sample files to use with this tutorial: Start.zip

Using the Data Bridge Search Wizard, you will learn how to create a search page and a results page using recordsets. In addition to creating your advanced search functionality, this tutorial begins by walking you through 4 preparatory steps.

  1. Create a new site in Dreamweaver
  2. Create a database using phpMyAdmin
  3. Add sample files
  4. Create a database connection

next sectionarrow down
arrow downCreate and define a dynamic site

Your first step is to create and define a dynamic site in Dreamweaver.


Detailed directions are found in these WebAssist tutorials:
Define a dynamic site in CS4
Define a dynamic site in CS5

next sectionarrow down
arrow downCreate a database

Now that your site has been created, your next step is to create a database. In this tutorial, we will use the phpMyAdmin tool. phpMyAdmin is commonly used for managing MySQL databases.

  1. Open blue_sky_music.sql in a text editor such as Notepad or TextEdit

  1. Select all of the content (Ctrl or Cmd + A)
  2. Copy the content (Ctrl or Cmd + C)
  3. Save the file to your desktop (Ctrl or Cmd + S)
  4. Close your text editor

  1. In phpMyAdmin, choose the database you intend to work with from the Database menu list
  2. Open the SQL tab
  3. Paste the copied SQL script into the text field (Ctrl or Cmd + P)

  1. Click Go
  2. Confirm that your new table has been imported by clicking the Structure tab


Please refer to the following WebAssist tutorial for more help:
Import a .sql file

next sectionarrow down
arrow downAdd sample files

Now that a database has been created, you will add sample files to your site.

  1. Open Start.zip using Windows Explorer (Windows) or Finder (Mac)

  1. Extract and save to your desktop (Ctrl or Cmd + S)
  2. Open the Start folder
  3. Select all of the files (Ctrl or Cmd + A)
  4. Copy the files (Ctrl or Cmd + C)
  5. Paste them into the folder (see below) where you store your site's files (Ctrl or Cmd + P)
  6. Save (Ctrl or Cmd + S)


Note: The folder where you store your site's files is usually found in C:\xampp\htdocs if you are using Windows. But this path will differ if you chose to install to a different directory when you set up your testing server. On a Mac, the default location to place your files is /Applications/MAMP/htdocs. But this path will also differ if you chose to install to a different directory when you set up your testing server.

Please refer to the following WebAssist tutorials for more help:
Set up a test server on Windows
Set up a test server on Mac OS

next sectionarrow down
arrow downCreate a database connection

Creating a database connection in Dreamweaver is your final preparatory step. A PHP database connection tells Dreamweaver that the current site is going to create PHP pages and refer to a specific database to store or display data.

  1. Go to the Databases panel in your Dreamweaver site
  2. Double-click on connBSM to open the MySQL Connection dialog box

Fill in the fields and perform the actions to complete the dialog box.

  1. Connection name: connBSM
  2. MySQL server: localhost
  3. Username: (fill in your username)
  4. Password: (fill in your password)
  5. Database: blue_sky_music (use Select to navigate to the file)
  6. Click Test to confirm a successful connection
  7. Click OK


Please refer to the following WebAssist tutorial for more help:
Create a PHP database connection

arrow downDataAssist Search Wizard

With the 4 preparatory steps finished, your next step is to create the advanced search functionality using the DataAssist Search Wizard. The DataAssist Search Wizard requires two pages to work, a search page and a results page.

Step 1: Create a recordset on the results page

DataAssist Search works by attaching itself to a recordset behavior that has already been applied to the page.

  1. In the Files panel, open Results.php
  2. In the Server Behaviors panel, select +
  3. Choose Recordset
  4. Enter rsItems in the recordset Name field
  5. Select your Connection
  6. Select items in the Table menu list
  7. Click OK
  8. Save the results page (Ctrl or Cmd + S)

Step 2: Create a recordset on the search page

This recordset is necessary since the category list references a different database table than the items table.

  1. In the Files panel, open Search.php
  2. In the Server Behaviors panel, click +
  3. Select Recordset
  4. Enter rsCat in the recordset Name field
  5. Select your Connection
  6. Select itemcategory in the Table menu list
  7. Click OK
  8. Save the search page (Ctrl or Cmd + S)

Step 3: Create the category search form

Now that both recordsets have been created, you can run the DataAssist Search Wizard. First, close Search.php and return to Results.php. Then go to the WebAssist category, select Database, and open the DataAssist Search Wizard.

  1. In Filter Data, select the rsItems Recordset
  2. In Search Page, select the Existing search page radio button
  3. Use the browse file icon to select Search.php
  4. In Search Form, select the New form radio button
  5. In the New form text field, enter SearchForm
  6. In the Editable region menu, select PageBody
  7. Click Next


The first search element to be added is a menu list that will provide category options.

  1. To add a new search element, click the + button

  1. In the search type list, select Exact Match
  2. Click Next

  1. In the Column menu, select ItemCatID
  2. In the Column type menu, select Number/Boolean
  3. Enter catSearch in the New form text field
  4. In the New form field menu list, choose Select
  5. Click Next

Step 4: Create the price range search fields

The next search element to be added is the price range search fields. The price range search inserts two form fields onto your page. The first is for specifying a minimum value and the second is to specify a maximum value. Keep in mind, when using a price range search, the contents of the database column being used must be numeric and should not contain any text or date information.

  1. Click the + button to create another search element

  1. In the Search type list, choose Price Range
  2. Click Next

  1. In the Column menu list, select ItemPrice
  2. Select the first New form field radio button
  3. Enter minPrice
  4. Select the second New form field radio button
  5. Enter maxPrice
  6. Make sure that Text is shown in both of the adjacent text fields
  7. Click Next

  1. Verify that two search elements have been added
  2. Click Next

  1. If you would like to modify the search, click Previous
  2. Or click Finish to close the DataAssist Search Wizard
  3. Save the page (Ctrl or Cmd + S)

Step 5: Customize the category menu list

Now that the DataAssist Search Wizard has finished, you should have three new form fields on your search page.


The next step is to customize the category menu list so that the appropriate categories are displayed.

  1. From the Files panel, open Search.php
  2. Select the category menu list
  3. From the Properties inspector, select the Dynamic button

  1. In the Options from recordset menu, select rsCat
  2. In the Values menu, select ItemCatID
  3. In the Labels menu, select ItemCatName
  4. To prevent a category being selected by default, click the + button in the Static options area
  5. Click once in the value area, and press Delete on your keyboard to remove the text
  6. In the Label field, enter Please choose a Category
  7. Click OK

Step 6: Define your search results

You will want to customize the results page to determine what results are displayed.

  1. From the Files panel, open Results.php


Notice that a simple table with four columns has already been created for this example.

  1. Place your cursor in the cell below the Product ID heading

  1. From the Bindings panel, expand Recordset (rsItems)
  2. Select ItemID
  3. Click Insert

  1. Repeat this step for the other 3 columns
  2. Place your cursor in the Name cell
  3. From the Bindings panel, select ItemName
  4. Click Insert
  5. Place your cursor in the Description cell
  6. From the Bindings panel, select ItemShortDesc
  7. Click Insert
  8. Place your cursor in the Price cell
  9. From the Bindings panel, select ItemPrice
  10. Click Insert

Note: If you wished to include additional results on your page, simply create additional columns in the table, and repeat these same steps.

Now you will create a repeat region to repeat the results so that more than the first search result is displayed.

  1. Place your cursor after the search table
  2. From the tag inspector, select the <tr> tag

  1. From the Server Behaviors panel, click +
  2. Select Repeat Region
  3. In the Repeat Region window, select the All records radio button
  4. Click OK

Step 7: Handle empty search results

Now that you have applied the search to your page, you will need to ensure that something friendly appears if no search results are found.

  1. Place your cursor after the results table
  2. Press Enter on your keyboard and type Sorry, no items matched your search criteria
  3. From the tag selector, select the <p> tag to highlight your newly entered text

  1. In the Server Behaviors panel, click +
  2. Select Show Region
  3. Choose Show Region if Recordset is Empty
  4. In Recordset, select rsItems
  5. Click OK

Next, to ensure that the results table will not display if there are no results, repeat this process.

  1. Place your cursor in the results table
  2. From the tag selector, select the <table> tag

  1. From the Server Behaviors panel, click +
  2. Select Show Region
  3. Select Show Region if Recordset is Not Empty
  4. In Recordset, select rsItems
  5. Click OK
  6. Save the page (Ctrl or Cmd + S)

Step 8: Conclusion

Your search page should now be properly configured.


Your results page should now be properly configured.


Press F12 to preview and test your advanced search functionality.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
2 ratings | Sign in to rate this tutorial

amr badawy: 10 Years, 3 Months, 2 Days, 10 Hours, 5 Minutes ago

When working on this performance, which shows the error
while executing onclick in WDAS_serverbehavior.htm a javascript error occurred
What is the solution
I hope to respond soon

rating

Team WebAssist: 10 Years, 3 Months, 1 Day, 17 Hours, 8 Minutes ago

amr, Usually errors like this are some sort of installation glitch. Try the Fixing Common Issues section of this tutorial: http://www.webassist.com/tutorials/Common-installation-issues

If that doesn't work, you can seek technical support by clicking on Help in our main menu.

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Everything else!

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

go to page top