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

Planning the Web Application

You don't need to master the specifics of this figure right now. Over the course of the remaining lessons, you'll become intimately familiar with each of the pages and learn how to send data to all the places it needs to go. The important thing for now is that you understand that a Web application is usually made up of a number of pages, which interact with each other and with one or more databases and tables to create a single user experience. That experience is made possible by collecting data from diverse sourcesthe user (via a Web form), the database, and so onand using it to provide a meaningful experience.

With the big picture in place, take a few minutes to look at the final application in action.

For reasons that will be explained later, you can't open and try out the completed files in Lesson 13's Complete folder. A regular browser can't read ColdFusion pages, unless the pages have been processed by a server with ColdFusion installed. For now, go see the site on my server, where you only need a browser and the Flash player.

[View full size image]

This table displays all the students in the class, or'more preciselyall the students entered in the database. Although they were added in random order, notice that they're alphabetized by last name. SQL, the language used to issue commands to databases, has built-in sorting capabilities. Notice also that on this page the user can view data, but she or he can't change it; there's no mechanism (such as a Web form) that enables the user to insert new data, update existing data, or delete data. The data on this page is strictly read-only. SQL has different commands for each of these tasks (retrieving, inserting, updating, and deleting data), and this page merely retrieves data. You'll take a closer look at SQL in subsequent lessons.

[View full size image]

This step brings up the interactive map that you designed and published in previous lessons. You're just about finished with this page; you won't be adding any database or ColdFusion functionality to it.

[View full size image]

This step takes you to a log-in page. Because this log-in page is not secure, it doesn't require a password. A true log-in framework is beyond the scope of this book. Because the quiz is just for fun anyway (it isn't graded), secure log-in is not critical.

[View full size image]

The log-in mechanism is a Web form. Later in this lesson, when the user clicks Submit on the Web form, the data she or he entered is passed to a script written to handle the data. In this case, the script that handles this data can be found in dante_quiz_questions.cfm. If you refer back to the site diagram shown earlier in this lesson, you'll notice two linesone solid and one dashedlinking dante_quiz_login.cfm to dante_quiz_questions.cfm. The dashed line represents data; the data being passed in this case is the email address submitted with this form.

The Dante quiz appears. The quiz is embedded in a Flash movie. The radio buttons and Next Question buttons are Flash components, which are prebuilt interface elements that Macromedia provides for rapid development. You'll build this quiz in Lesson 15,

A Component-Based Flash Quiz .

Note

As an optional experiment, you can break this page. To do so, bookmark the page. Now close your browser. Reopen your browser and access the bookmark you just created. You will see an error message. Why did this error occur? Because the page depends on the data entered in the form on the preceding page (the email address). If you (or, more broadly, any users) bookmark a page in the middle of a Web application, and that page depends on certain data existing, you'll see an error because the data is not available. Good Web application design has built-in validation for all such pages: If the data is not available, the user is automatically redirected to a safe page (in this case, that would be dante_quiz_login.cfm). Again, this topic is beyond the scope of this book.

Any time you're collecting data from users, you need to ensure that they enter valid data. With a radio-button list, you only need to ensure that they make a selection. Here, the Flash quiz is programmed to display an error message when users fail to make a selection.

[View full size image]

Now that you've worked through the site, return to the site diagram shown earlier in this lesson. It probably makes more sense now.