FMStudio Complete Guide Chapter 4
From FMWebschool Reference
Contents |
Chapter 4. Core Concepts of FMStudio
The Recordset
In FMStudio, most pages will start with a query, quite often a recordset. The recordset is the first concept that I will cover.
A recordset is like an order at a restaurant. You give your order to the waiter, and they return with a large dish to the table. Think of the page that you are designing as your plate, which you can decorate and arrange as you wish with this order. A recordset is essentially a group of records returned from your database.
In Chapter 3, we created a recordset named 'photographers'. This recordset performed a 'findall' and then I displayed the results in a table. As we progress through this book, and cover more advanced topics, you will see that there are many things that can be done to a recordset.
Bindings
Bindings are located under the 'Application' panel under the tab 'Bindings'. Binding is a Dreamweaver term and essentially means 'a distinct piece of data'. In FileMaker terminology, a binding would simply be a field. It is similar to a small piece of food on your plate from your order. Each recordset contains 'bindings' within it representing each field in your database. When you select a binding and drag it onto the page, it will give you the contents of that database field.
Image 4 – 1: A list of all of the ‘bindings’ or ‘fields’ in the ‘photographs’ Recordset.
Adding a binding or a ‘field’ to your Dreamweaver work area is very simple. Simply click on the '+' sign beside the recordset, select a field – in this example we will select 'photoName' binding and drop it onto my page.
Image 4 – 2: photoName binding dropped onto the page.
We could also select a related field the same way. In our example database we have a relationship that is displayed as 'categories::categoryName' we can simply choose this related field and drag it onto our page.
Image 4 – 3: Related field (binding) ‘categoryName’.
Working with bindings is very easy. You simply drag and drop them from the bindings panel onto your design view.
Image 4 – 4: photoName binding and related field categoryName binding dragged and dropped into the Dreamweaver work area.
Once this is done, this page can be previewed in the browser, and you will see that the 2 pieces of data from the first record are shown.
Image 4 – 5: Children at beach is the name of the photograph, and Black and White is the category.
The photo name and the category are displayed. Once the bindings are on your page, you can use Dreamweaver to format them as needed. You can make them bold, change their font size, their color or apply a CSS style to the binding. Bindings are very flexible, and they are very easy to use.
Repeating Regions
One more concept that needs to be covered is the repeating region. In Chapter 3 we created a dynamic table with 2 rows. The first row contained the descriptive table headings, and the second row contained dynamic bindings.
When we displayed the table in the browser however, the second row is replicated with the same number of records that we have in the recordset. This happens because a 'repeating region' has been applied to the second row.
Image 4 – 6: Repeat Region applied to the bindings in the table
As you can see in the screenshot above, there is a small 'repeat region' tab on the second row. The repeating region instructs FMStudio to repeat this row in a table for each of the records in the recordset. This means that any bindings placed within this region will also be dynamically changing as it repeats for every record.
Once again this is very similar to a list view or table view in FileMaker. There is a found set, and FileMaker displays all of these records in the found set. The recordset is basically just a found group of records.
- To demonstrate this, let’s add the categories binding to this table. To do this, we will need to add another table column. This is very simple in Dreamweaver. Simply right click or command-click the table and select 'Insert Rows or Columns'. I generally like to use the ‘Insert Rows or Columns’ and not the generic Insert Row or Insert Column command, because it gives you the option to insert multiple rows and columns and to choose where you would like to insert the new rows or columns.
Image 4 – 7: to insert new rows or columns to your tables, choose Table > Insert Rows or Columns
- We will insert one column, after the current column.
Image 4 – 8: Select either Rows or Columns and whether they will go before or after the current column.
Image 4 – 9: 1 Column inserted at the end of the table.
- Once the Column is inserted, type 'Category' as the column header and drag and drop the 'categoryName' binding into the table. If you recall earlier in this chapter, we placed this binding above the table. We can simply grab that binding from the page and easily add it to the table.
Image 4 – 10: categoryName binding added to the table
- Since the second row is within the repeating row, the 'categoryName' binding will be repeated for the current record that is being displayed. Save this page and view it in the browser. (Image 4-11)
Note: Remember to always save your pages before you view them in the browser to see the new changes.
As you can see in the screenshot below, the table now displays three dynamic fields from your database.
Image 4 – 11: Three dynamic fields displaying from the database
Form
The last important concept that you need to know about FMStudio is the Form. Each page on the web is actually a distinct page with distinct code. They are not specifically connected in any way, and in order to transfer information between pages so they can share information – such as what data was entered in a search page, you will need to use forms. Forms allow data to be sent, just like little messages between different pages.
- To add a form to an FMStudio page, you will use Dreamweaver's main menu bar. Select Insert > Form > Form.
Image 4 – 12. Insert a form by selecting Insert > Form > Form
- Let’s add this form to the page that we have already created outside the dynamic table. When you add a 'form' to your page, in design view it will be displayed as a rectangle with a red dotted outline.
Image 4 – 13: A form will be displayed on your page as a red rectangle
To see form properties, click on the red rectangle. The properties panel should display at the bottom of your Dreamweaver work area as shown in the screenshot below.
Image 4 – 14: Form properties will display at the bottom of the Dreamweaver work area.
If you do not see the properties area, select Windows > Properties from the main menu.
The first property is the 'Action'. The action of the form specifies where to send the information. Think of this as if it were an email, this would be the 'to' field, where the variables in the form will be sent.
- In this example, this will be a page displaying the search results. Name the action 'search_results.php'.
- Next you will see a 'Method' category with a drop-down menu. There are two main options to choose from, POST or GET. The POST form method can send a lot of data in the background while the GET method sends the data in the URL. GET is also limited to the amount of data that can be sent and is visible to the user. However while you may want to use POST to hide some of the variables that are being submitted, GET is best used for search forms. Any form that is submitted as GET, the results page can be bookmarked for later access. So, search forms should be created as GET. I've now set up my form with the Action equal to 'search_results.php' and the Method as GET.
Image 4 – 15: Form properties set up with the Action as ‘search_results.php’ and the Method is set to ‘GET’.
Currently the form on my page does not have any data in it to send. In order to do this we will need to add form inputs into the form area. We can do this by creating a text field.
- The first form input we will add is a text field. To insert a text field into the form area simply choose Insert > Form >Text Field from the main menu.
Image 4 – 16: To insert a text field choose Insert > Form > Text Field
This will be the photo name that the users can search on.
Image 4 – 17: A text field added to the form
Once the text field is added to the table, a different set of properties is available.
Image 4 – 18: The properties available for a text field
The most important property in a text field or any other form variable is the name. It appears on the bottom left of the properties area.
Image 4 – 19: It is very important to name your text fields
This determines the variable value name that will be sent along with the form. The form can send many different variables to the action page, but the action page needs to know what variable names to expect in order to properly place them into the database query. In this example we will name this text field 'photoName'. It is also nice to add some type of caption to the text field to let you users know what the field is expecting. Since this is just text, you can apply whatever Dreamweaver styling’s you wish to apply.
- The last piece that is missing from this form is a submit button. To add a submit button, choose Insert > Form > Button from the main menu.
Image 4 – 20: To add a submit button to the form, select Insert > Form > Button
- The text on the button does not affect the buttons action. It is merely text. You can change the text on the button by clicking the button in the form. This will open the Properties panel. Type the name of the button in the text field beside the word 'Value'. Let’s name the button ‘Search’.
Image 4 – 21: Type the text to appear on the button in the ‘Value’ field
Now when this form is submitted, it will send a variable named 'photoName' with the value the user enters into the text field to its action page, which is 'search_results.php'.
This is the basics of FMStudio, using a recordset, dragging and dropping bindings, and creating forms that will allow you to create dynamic pages as you will see in Chapter 5.
