Adobe Dreamweaver

Learn how to create a search for your site.

In this tutorial, I will teach you how to use Dreamweaver 8 and its ASP.NET to create a site search function. If you are having problems feel free to e-mail us.

In this tutorial, I will teach you how to create a search form.

Step1: Setting up work space.

For this to work you will need to have the software below installed.

  1. Dreamweaver 8, this is what I used in the tutorial. I am not sure if you can do this on the previous versions.
  2. Windows XP Professional
  3. (IIS) Internet Information Services has to be installed.
  4. Follow this tutorial to install IIS ( Click Here )

 At this point I will take it that you have IIS setup and you are able to access a database from Dreamweaver. If you can not follow the tutorial link above.

Step2: Create the search form.

Ok, let us get started. Download this database tutdb and place it into your database folder. Open Dreamweaver click File> New… and click on Dynamic Page> ASP.NET VB and click Create. Hit Ctrl+S and save your site as search.aspx. We will need to create the search form. Click on Forms as shown below.

Click on the Form button to insert a form field.

Change the form field properties according to the image below.

Inside the form field create the table shown below.

With the table created, In column one type the word Search, in column two insert a textbox with the text field as title, this is important.

In column three insert a button, and change the fields according to the image below.

At this point you should have the form shown below.

Step3: Create the Search Result page.

Click File> New… and click on Dynamic Page> ASP.NET VB and click Create. Hit Ctrl+Sand save your site as search_result.aspx.

At this point you will organize how you want to search result to be displayed.

Click on Bindings and create a new DataSet(Query)

Fill in the information according to the image below.

Hold Ctrl, click and select, ID, tutAuthor, tutCategory, tutDescription, tutProgramused, tutThumbnail, tutTutorialTitle with that click ok, and show the tables in the dataset as show below.

Next create the tables shown below.

If you are having a hard time creating the table, copy the code and paste it into Dreamweaver

<table width=”393″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”44″ rowspan=”3″ align=”center” valign=”top”>&nbsp;</td>
<td width=”349″ colspan=”3″>&nbsp;</td>
</tr>
<tr>
<td colspan=”3″><table width=”323″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”323″>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td>Software:</td>
<td>Category:</td>
<td>Author:</td>
</tr>
</table>

From the Dataset

drag the name into the table as shown below.

To add an image click on  image icon and click on Data Source

Now select the “tutThumbnail” and click ok twice. At this point you table should look like the image below.

Step4: Setting the search criteria.

Double click on the Dataset name to go back into the dataset, make sure you are in the Advanced window. You should be looking at the window shown below.

Remove the WHERE ID = ? and replace it with WHERE tutAuthor LIKE ? or tbltutdatabase.tutCategory LIKE @tutCategory

In the code above you will be searching based on the Author name and the Category. In the Parameters window Highlight @ID and click on the minus sign.

Click on the + and enter the information shown below.

If you want to search in more than one category, Click on the + button in the parameters window and repeat the step above.

When you are finished click ok twice. Go back to the Search page that you created before and hit F+12 to preview it. Do a Search for Pixel Digest and it should work. Only one record will show up to display more records.

Click on the table and select the table code shown below.

When you click on the table tag it will select your table. With the table selected click on Server behavior located in the Application window. From there click on the and selectRepeat Region

When the window above comes up click on All Records and press ok. With that your table should change a little, the Item Template should come around it.

Hit F+12 on the Search page and do a search for Pixel Digest, Alex, Max, or Raul with that you should see the different results.

Finished:
Well that is it, hope it came out to what you expected.

Related Articles

Back to top button
Share via
Copy link
Powered by Social Snap