Macromedia Studio 8 [Electronic resources] : Training from the Source

Passing Data Between Pages

You've done a lot of reading and conceptualizing in this lesson, so now is a good time to roll up your sleeves and take a stab at a simple ColdFusion technique: passing data between pages. As discussed earlier, a key aspect of creating a meaningful user experience is customizing the experience by passing relevant data between pages and/or pages and the database.

In this task, you'll create a simple Web form on one page and send that data to a second page. The second page will display the data entered on the first page. This exercise will show you how ColdFusion templates become simpl218 pages, and prove that you've configured your site correctly.

In the newly defined Dreamweaver site, choose File > New to create a new page. In the General tab of the New Document dialog, under Category, choose Dynamic Page; under Dynamic Page select ColdFusion; and then click Create. When a new untitled document appears, call it

test_output.cfm and save it in your local dante folder. With the page still open, choose File > Save As to create a second page called

test_form.cfm .

These two pages are throwaways that are not part of the application you'll be building. We often create throwaway pages for testing and prototyping purposes. We typically prefix the name with test_, so the test pages are grouped together alphabetically and we remember to delete them when we're finished experimenting.

[View full size image]

One way to learn how to code in a language is to look at the code generated by programs as you work. Throughout these lessons, you should try to get a feel for ColdFusion. It's an easy markup language, and there's no substitute for having some ability with the code, even when you're working in visual environments like Dreamweaver.

In fact, when you work in Dreamweaver, it's a good idea to do so in split view, especially if your monitor resolution is 1024 by 768 pixels or higher (with lower resolutions, it might get a little too crowded). If you've made it this far in the book, you should be comfortable enough to deal with the code behind the curtain.

[View full size image]

[View full size image]

[View full size image]

Action and method control what happens with the form data. By specifying a URL for the action, you tell the browser to send both the form data and the user to the specified URL.

The method is a little more abstract. In addition to POST, the other option in the Method category is GET. These methods are both ways of sending information from the current page to the specified destination. The difference between them is how they send that information.

The GET method appends the data to the URL itself. You've seen URLs followed by long strings of nonsense. They use the GET method. As an example, imagine your user entered Harriet as her first name. If you were to specify GET in this step, the URL that would appear after she clicked the Submit button would be http://127.0.0.1:8500/dante/test_output.cfm?firstName=Harriet. Because GET passes the data in the URL, you can see the data that gets passed, which is convenient for bookmarking. Use GET when you're querying a search engine (that is, getting data).

The POST method sends the exact same data, but it's sent encoded in the request. This method is not only more secure than GET, because it's not visible to the user, but also allows you to send more information. POST is typically used when you're sending data somewhere, such as to a database. Because it's not immediately visible in the URL, the POST method is a little more secure than GET, although the information is still sent as clear, or unencrypted, text.

In the case of the widget you're building now, either method will work. You'll use POST, which is a good default choice. Now that you've made these changes, take a look in your code and see how and where they appear.

In ColdFusion you have the option of using standar217 forms or ColdFusion's cfforms. HTML forms are enclosed inside the <form> tags, and ColdFusion forms inside the <cfform> tags. We've chosen to use cfform to take advantage of the Flash format for a more attractive look to our form.

[View full size image]

Note

The Flash format of <cfform> requires ColdFusion MX version 7 or higher.

In this form, you ask the user for her or his first name, and then send the useras well as the data she or he enteredto the test_output.cfm page.

Each value the user enters in a form will be stored in a variable with the same name as the form element. For this reason, you should always give your form elements meaningful names. Obviously, you're not likely to get confused by a variable in a one-element form, but you should develop good habits in anticipation of working with longer forms.

[View full size image]

Functionally speaking, this step is completely unnecessary. None of these changes will affect what's sent in the POST. But the more minimalist you make your tests, the harder they'll be to understand later. It doesn't take much time to label text fields and make simple presentational changes, especially if they render the point of the page immediately obvious.

[View full size image]

You've completed the input page, and now it's time to build the output page, which will display the data that the input page just sent to it.

Note that while we used cfform to create our form, the same thing could have been done with straightforwar217 form tags. In addition to richer design options, cfform provides other benefits, such as form validationbut that's beyond the scope of this exercise.

The Bindings panel displays variables that you can use on the page. As you will learn, there are many kinds of sources for these variables, including URLs (thanks to GET), form variables sent via POST, and data brought in from a database via a query.

Initially, a checklist appears, indicating the steps you'll need to follow to use data bindings. At this point you should have at least three of the five steps checked, which is sufficient to make use of a form variable sent via POST.

This step tells the page that it can expect to receive a variable called firstName sent from a form. You know this variable will exist, because there's a text field in the form called firstName. But Dreamweaver doesn't know this data will be available. By creating a binding, you're notifying Dreamweaver that the data will be available when the page is executed.

Note

Dreamweaver has no way to verify that the data actually will be available. You could make up fake variables and Dreamweaver would happily add them to the Bindings panel. Also note that Dreamweaver doesn't change any code in the page when you create a binding. Rather, when you use a bindingwhich you will in a few momentsthe information you provide in the Bindings panel tells Dreamweaver how to write the code.

When you're finished with this step, the Bindings panel changes. The checklist disappears, and in its place is a Form category. If you expand the Form category, you'll see the variable firstName with a lightning-bolt icon next to it.

Again, this is stati216. ColdFusion templates are often a combination of regula231 and ColdFusion markup.

When you're finished, the string {Form.firstName} appears in the main window, colored blue. This string is how Dreamweaver indicates a placeholder for dynamic content. You can disregard the exact formatting, because Dreamweaver's design view signifies any dynamic content this way, whether it's ColdFusion, PHP, or ASP. To learn the proper syntax, take a look in the code itself in code view.

Between the two commas, you'll see your first bit of real ColdFusion: <cfoutput>#Form.firstName#</cfoutput>. The <cfoutput> tags tell ColdFusion to write something to the page. In this case, you're telling ColdFusion to write the firstName variable that came into the page as a form variable. The pound symbols (#) tell ColdFusion that the content between the # symbols is a variable, rather than a simple text string.

[View full size image]

Note

If the Include Dependent Files dialog appears, you can choose Yes or No, because there aren't any dependent files. Dreamweaver automatically displays this dialog so you can be sure to upload any images, Flash movies, and the like when you upload the page.

Remember, you can't test the files by just opening them in your browser. They have to be processed on the server and then sent to the browser. You accomplish that by uploading them. And now for the moment of truth!

Dreamweaver opens the file in your browser, using the URL prefix you specified earlier in this lesson. If you did it right, you should see the form.

[View full size image]

You should see the second page, with the name you entered between the commas. If you see the second page, you configured everything correctly.

[View full size image]

If you got an error message, then something went wrong. A number of things could have caused an error. Make sure that both the test_form.cfm and test_output.cfm files were, in fact, uploaded to the remote server. Make sure that the URL prefix is correct. Make sure that ColdFusion is actually running (Windows users running ColdFusion locally can test this by opening the ColdFusion Administrator page from the Start menu; if you can see the page, ColdFusion is running). Also, make sure that you didn't misspell test_output.cfm in the Action field of the form in test_form.cfm.