This article describes how to create a search application using Dreamweaver. This application makes use the Access database to store information and Active Server Pages to retrieve the data in it. This article is oriented to the intermediate Dreamweaver users. You need to have no ASP programming skills to build this application. All you want to possess is a simple programming logic.This tutorial has Only 2 pages.
The first page is a search form and the second one is a page which displays the search results.
Step1.
Create a new HTML page and create a form in it. The form should contain one text input field and a submit button. Basic knowledge on HTML is needed here.
Name the text input as “searchInput”. Set the action attribute of the form element into “answer.asp” and method attribute into “post”.
Now the search page is ready.
Step2.
Now, create a new ASP page and name it as “answer.asp”. Create two div tags in the page and name the first one as “datafound” and the second one as “datanotfound”.
In the second div [datanotfound], type the content,”Sorry Your search returned no results! ”
Step3.
Create a DSN-less database connection and test the connectivity. If you do not know how to create a DSN-less database connection you can click here to learn it. Or else, you can make use of DSN to connect to database.
Step4.
Go to Bindings panel and create a Recordset. See the picture below:
Now, you can see the “Recordset” wizard popping up. Enter the following information into the fileds.
- Name: give a name to the recordset.
- Connection: choose the connection which we created in Step3.
- Table: Choose the database table name in which the search contents are available.
Important: You will not be able to see the database tables, if you have not already created a database connection successfully. Go back to step3 to correct it. - Columns: It displays the list of columns inside the specified database table.
- Filter: Now choose the column. [Here, keywords]:
Important: the searched text from the search form will be looked up in this column. If the searched text and the entries inside this column match the entry will be displayed as the result.
Next, choose how, you need to match your searched text and the selected column data. [Here, “contains”].
Next, Select “Form Variable” option.
important: “Form variable” is used when the search form method attribute is “POST”. If “GET” is used, select the option “URL Parameter”
Next, insert the text “searchInput”. This is the name of the search input text filed. Remember what we did in step1.
Next, Press “test” button to check if these settings work or not. [Enter some text and see the result]
Step5.
Go to the Bindings panel and click on the + symbol left to the recordset. You can see the following:
NOTE: this items listed here are database table’s columns and three additional variables which holds the “record indexs” and the “total number of records” in the result.
Step6.
Click inside the “datafound” div and go to the menu: Insert >> Application Objects >> Dynamic Data >> dynamic Table
The following wizard pops up:
Choose the Recordset we have just created and set the parameters as required.
Important: the term “record” means the result item.
Press OK.
You can see a table based grid is inserted and now. Our result page is ready.
Step7.
Now, we need to make our results to display only when we have some results. If no results we need to show the error message that which we created in the step2. Remember “datanotfound” div in step2.
Select the “datafound “ div and go to server behaviors panel click on the + symbol and go to “Show Region” and then click on the “Show Region If Recordset Is Not Empty”. Choose the recordset and press OK.
Select the “datanotfound” div and go the server behaviors panel click on the + symbol and go to “Show Region” and then click on the “Show Region If Recordset Is Empty”. Choose the recordset and press OK.
Now our result page is ready. You can also stylize the display of the result page using CSS. Click here for more info on CSS.
Now try entering any search parameters in the search form and test to see the results.
Click here to download sample files