Part1: What do I need to get started?
Since I am doing this locally on my machine For this to work you will need to have the software below installed. Also if you want to apply this to your live web site, your hosting company need to run PHP MYSQL
-
WAMP5 : http://www.wampserver.com/en/index.php
-
EMS SQL Manager for MySQL (WAMP5 comes with a sql manager, you can use it, or which ever one you are familiar with.
Download and install both software, if you installed wamp5, by default it would create a folder located in C:\wamp\www\, create two more folders inside the www\ directory called localroot and the other webroot.
Part2: Creating the database and tables.
Start up EMS and click on the create new database icon.
Create a new database with the name, search_db and click next, and you will see the window below.
Click next and Finish. When you do that you should see the Registration database window. Just click ok. We need to create the user to access the database click on the User Manager Icon  . Change the Servers to Localhost and click ok. At this point click on the Add User Icon  when you do that you will see the window below.
This is just a demonstration, so your username and password will be different. Make sure to select All Privileges and With Grant option. With that click ok to apply the settings.
Double click on the database you just created. 
When you do that you will connect to the database where you will be able to see the tables.
With that click on the Create new table icon shown below.
With that it should send you into the Table Properties window. Click on the Fields tab.
Double click on the Column Name and change the information according tot he image below. When you are finish click ok.
Table 1
We need to create 3 more fields, Double click on the Column Name and fill in the information below.
Table 2
Field Name: tb_desc
Type: VarChar
Size: 255
Table 3
Field Name: tb_Img
Type: VarChar
Size: 255
Table 4
At this point your Table Fields should look like the image below.
With that click on Compile  after your tables has finished compiling click on Data
Click on  to Insert Record. Fill in the information shown below. The tb_id is an auto increment so you don't need to do anything with that. Click on the NULL test and type in the information shown below. This is what we will search for. After each data entry make sure to click on Post Edit 
| tb_Name |
tb_desc |
tb_img |
| SAMSUNG |
Silver 21.6" 5ms DVI Widescreen LCD Monitor |
 |
| Acer |
Widescreen LCD Monitor with HDCP support |
 |
| Apple |
A Silver 30" 14ms Widescreen WUXGA Mac Display |
 |
| Canon |
Canon Rebel XTI Silver 10.1 MP Digital Camera |
 |
| Sharp Aquos |
The SHARP AQUOS LC-46D62U incorporates a host of remarkable features that make it one of the best large-screen flat-panel televisions. |
 |
This is how your table should look, with the data entered.
Well we are finished with the database part.
Part3: Setting up Dreamweaver and creating the form.
Start up Dreamweaver and click New Site Manage Sites..
and click New Site. Click on the Advanced Tab and you will see the window below. Click on Local Info and fill in the information shown.
Local Info
Remote Info
Testing Server
When you are finished click ok, Done
Create a new php page and name it search.php
We will need to create he 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.
You can insert a table 1 row 3 columns to organize the search form a little
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.
Part4: Creating the search result page, and connecting to the database.
Click File New... and click on Dynamic Page PHP and click Create. Hit Ctrl+S and save your site as search_result.php
Click on the  Shown in the databases tab and click on MySQL Connection.
With that the window below will come up. Fill in the information shown below.
This information has to match up with what you created using EMS, The password I used is pixeldigest.
Next click on Select, select the search_db database and click ok twice.
At this point you will organize how you want to search result to be displayed. Click on Bindings and create a new Recordset by clicking on the . Create the Recordset according to the image.
Click on the (+) next Recordset, you will see the fields shown above.
Create the table shown below.
Click inside the rectangle to the left and we will add an image. To add an image click on  image icon and click on Data Source
click on tb_img, and click ok twice. With that you should see what I have below.
Now just drag the names over to the table from the recordset.
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 select Repeat 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. If you have a large number of records you will need to set the number of record to display at a time.
Step5: Setting the search criteria.
Still on the Search_result page, double click on record set in the Bindings window. Click on advance, in the SQL window add this text
SELECT *
FROM table1
WHERE tb_name LIKE '%colname%' OR tb_desc LIKE '%colname%'
If you want to search another column all you have to do is, type
OR yourcolname LIKE %colname%
Then Click on the (+) and add the information shown below.
That is it, here is a video of the working search form. Click Here
Click here to learn how to upload your form to your webpage.
Finished:
Well that is it, hope it came out to what you expected. If you have any question or comment about this tutorial, feel free to post a message on the forum.
This Tutorial was Created By Mark
© 2007 pixeldigest.com. All Rights Reserved. |
