PHP Search Form Tutorial

Introduction

This tutorial will teach you how to create a site search using dreamweaver. We will look into creating a database (to store the search data) and a search form, then connecting them using dreamweaver and displaying the results.

Part OneWhat you'll need to get started

To be able to test the search form on an offline network, you will need the following software.

wamp Download EMS Download

If you are wanting to upload this to your live site, you will need to check that your web host supports MySQL and PHP. Install both applications, if you are using wamp5, it's default installation folder is located in C:\wamp\www\ navigate to this folder and create another two folders within it called: localroot and webroot.

Part TwoCreating 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. 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.

For this tutorial I have used the username: tutorial and the password: password your username and password will be different. Before clicking ok, tick the All Priviledges and With Grant Options with these selected you can now click ok. Double click the database you have just created:

This will connect you to the database, you will be able to see the tables within the database on the left.

Click the Create New Table Icon

With that it should send you into the Table Properties window. Click on the Fields tab.

Double click on column name, when the properties box appears, change the settings to the following:

If you've followed correctly, then your table fields should look like this:

When you get to this stage click the compile icon:

When EMS has finished compiling the table, click on the Data tag. Click on the Insert Record icon. Fill in the information as shown below. (The tb_id field is set to auto increment, so you don't have to enter any details here).

After each data entry make sure to click on Post Edit.

That's it for the database, next, setting up dreamweaver.

Part ThreeSetting up dreamweaver and the search form

Start up Dreamweaver and click New Site then Manage Sites. Click New Site. Select the Advanced Tab which will load the screen below. Select Local Info and enter the following details.

LOCAL INFO

REMOTE INFO

TESTING SERVER

When you have finished entering these details, click ok. Create a new php page and name it search.php Now to create the search form. Create a form by selecting it from the Insert menu: Insert > Form > Form, Then give the form these properties:

To make it easier to format the form, I recomend creating a table with 1 Row and 3 Columns. In the first column type Search in the second column insert a textbox, with the text field as title (this is important). And finally in column three, insert a button with the Value set as Search and the Button name set as Submit.

This is what your table should now look like.

Part FourCreate the search results page and connecting to the database

Open a new file and save the page as search-result.php, in the Application window in the control panel on the right side of the page, press the + icon, in the Databses tab and select 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 for the user, using EMS, The password I used is password. Next click on Select, select the search_db database and click ok twice. We will now create the format in which the results will be displayed. Click on Bindings and create a new Recordset by clicking on the + icon. Create the Recordset according to the image below.

Click the + next to the recordset you have just created, you will see the fields shown below.

Create a table that has been split, with one row on the left and two rows on the right. Click inside the rectangle to the left and we will add an image. To add an image, select image from the insert drop drop list at the top of the page, select Data Source, Click on tb_img, and click ok twice, then drag the names over to the table from the recordset. You should now have what I have below.

Click anywhere in the table, then select the table tab from the bottom of the screen, like this:

When you click on the table tab 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, select '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.

Part FiveSetting the search criteria

Still on the search-result page, double click on record set in the Bindings window. Click on advanced, in the SQL window add this text.

If you want to search another column, such as a keywords column, all you have to do is, type:

Then Click on the (+) and add the information shown below.

Finished

Thats the tutorial over, I hope it has helped you. If you have any questions or comments about the tutorial, please feel free to post your thoughts in a comment.