From FMWebschool Reference

Contents 1 Chapter 5. From a Search Form to Search Results 2 See Also

Chapter 5. From a Search Form to Search Results

In this chapter we will be performing a very common pattern that is seen on many websites. That is a search form, which leads to a search results page that displays a table of records in a list view of all the found records. This is a great basic exercise to begin with, and will help you to begin using simple patterns that can later be expanded upon with FMStudio.

1. To begin this example, we will create a page named 'search.php' and save it to my site. Make sure this is a dynamic PHP page.
2. Next add a quick text heading to the page 'Search Photographs'.

The first step of a search process is to create the form itself. As you follow along creating the example pages, make sure that your cursor is in the design view and is blinking otherwise the form will not be added to the page.

1. To create the form, navigate to the Application Panel and select the 'Server Behaviors' tab. Click the plus sign and choose Wizards > Form Builder from the dropdown menu. The Form Builder dialog box will appear.

Image 5 – 1: Select Server Behaviors > Wizards > Form Builder to create a new form.

1. The next step is to enter the correct values into the fields in the Form Builder dialog box. Name the form 'photographs' and select the 'Generate Table' checkbox.

Image 5 – 2: Name the form ‘photographs’ and select ‘Generate Table’

1. Our Connection will be the 'Photos' database, and we will choose the 'photos' layout.
2. Next there is the choice for action. This has to be the file name of the search results page. This is where the request will be sent, and on the search results page, the actual recordset will be created, that will search, based on the form. A common pattern to follow that I will use throughout the book is to add an underscore 'results.php' to the name of the current page that you are on. So the Action would look like 'search_results.php'. So 'search.php' sends data to 'search_results.php'. Using the same naming conventions, an 'edit.php' page would send the results to a page named 'edit_results.php'.
3. Set the Method to GET since this is a search form. If you were doing an edit, a delete or a new form then it is advisable to set the method to POST.
4. Name the submit button 'Search'.
5. The next step is choosing the fields that our users will be able to search. In this example we will use the 'photoName', 'photoDescription', and the related categories "categoryName' field for the actual category name of the photo.

Image 5 – 3: The completed form builder should look like this screenshot.

1. Click 'OK' to close the Form Builder.
2. Now that the form is in place, take a few moments to change the Labels to make them more descriptive.

Image 5 – 4: Change the names of the labels to reflect the screenshot above.

These are only text fields, so you can make any changes to them that you like. For this example, use Name, Description and Category. The search page is now complete. Remember when you are finished working with a page, be sure to save your work.

Creating the ‘search_results.php’ page.

1. Next let’s create the 'search_results.php' page. Once again as you are following along in the book, please make sure that as you create this page it is a dynamic PHP page. Also, make sure you save the page to your local folder after you create it.

The first step of any search result page is to create the appropriate recordset. Unlike the first recordset that we created which was a 'findall' recordset, this recordset will use dynamic data supplied by the user within this search.

1. Create a new recordset by choosing Find (Recordset) under the Server Behaviors tab.
2. Name the recordset 'photographs'; the connection will use the 'Photos' database and the 'photos' layout.

The find criterion correlates to the fields inside the FileMaker database. This is just like being in find mode in FileMaker. Once in find mode, you begin searching by filling in the different fields with the values that you wanted to search on. If you recall in Chapter 4, we created a form, and each text input in that form had a name. This is where the data is coming from. In this find recordset I will be taking data from a form text field place it inside find mode into a specific FileMaker field and then search on it.

1. The first field that we will fill in is the 'photoName'. Select that field from the Add Criterion dropdown and click the 'Add' button. The Variable Selector dialog box will appear as shown below.

Image 5 – 5: From the Recordset, select the field that will be filled in, and then click ‘Add’ this will open the ‘Variable Selector’ dialogue window.

1. For the Type select 'Request' and for the name select 'photoName'. Once this is completed, click on the ‘Add’ button to return to the Recordset. In this dialog you are specifying what name the form object had that is sending this value. So if we had a different name, inside of our form, such as "lowercase name" then you would be placing it here. Since we used the form builder the names in most cases will correlate directly with the FileMaker field names.
2. Now that we are back at the Recordset, let’s choose two more fields under the Add Criterion. Choose ‘photoDescription’ field and click ‘Add’.
3. This will open the Variable Selector dialog window; select ‘Request’ and ‘photoDecription’. Once selected click the Add button to return to the Recordset.
4. Next, back once again at the Recordset, choose the related categories 'categoriesName' and choose Add and once again.
5. Once again, the Variable Selector dialog window will appear, select ‘Request’ and ‘categoriesName’. Once selected click the Add button to return to the Recordset,

Image 5 – 6: The completed recordset will have ‘photoName’, ‘photoDescription’, and ‘categoryName’ under the ‘Find Criterions’ section.

1. Click 'OK', and the recordset will be created. Since this time instead of a 'findall' we used specific form values, it will only bring back the records that match all of the criteria specified in that search.

The next step is displaying the found search results. Just like in Chapter 4, we will create a dynamic table. Remember, when adding a table or any other object to the Dreamweaver work area, to first click in the work area and make sure you have a blinking cursor.

1. To add the dynamic table, choose Server Behaviors > Wizards >Dynamic Tables. The Dynamic Table dialogue box will appear.

Image 5 – 7: Add a Dynamic Table to your page by selecting Server Behaviors > Wizards > Dynamic Table

Image 5 – 8: The Dynamic Table waiting to jump into action

1. Start by naming the table 'results'.
2. For the recordset we will use the 'photographs' recordset. Leave the other table customizations set to their default value.
3. Lastly we will need to choose the fields that we want to display in the table. Add 'photoName' and give it the column caption of 'Name', 'photoDescription' with the caption of Description, and the categories, ‘categoriesName’, as 'Category'. Once we are through adding the fields click 'OK' to see the Dynamic Table on the page.

Image 5 – 9. Dynamic table displaying ‘photoName’, ‘photoDescription’, and ‘categoryName’

1. Save this page. We are not going to view it in the browser yet. Yes, I know the excitement is palpable but read the special note below; it will help you understand why this page should not be viewed directly.

Note: Since this is the search results page it cannot be viewed directly in the browser if you do so, you will have a number of undefined index errors. Yuck! This is because this page is expecting a form to be submitted to it and when you preview it in the browser, there is no form submitted to it. Therefore it does not know what to search on.

To view this page properly, we need to open the 'search.php' page that we created earlier in our browser. Why do I have to open that page first? ‘Search.php’ contains a form and will enable me to perform a search and display the found results on the 'search_results.php' page.

Since you are following along and creating the sample pages, (you are following along and creating these pages aren’t you?) you can test the search form with the results page by simply searching on the word 'girl' in the description field.

In the screenshot below, you can see that a search on the word 'girl' returned several results.

Image 5 – 10 Searching on the word ‘girl’ returned numerous results.

See Also

• FMStudio Complete Guide Table of Contents