Chapter 10: Upgrading the ColdFusion 5.0 Application to a ColdFusion MX Application

The preceding chapter introduced you to the design of the Steffilina Bulletin Board application. In this chapter, you'll design the Web pages and write the associated programming logic for each of them. First, you'll use ColdFusion Server 5.0 to develop the application. Next, to make the application compatible with ColdFusion MX, you'll run the Code Compatibility Analyzer.

Designing Web Pages for the Bulletin Board Application

Before designing the Web pages in HTML and CFML, create a directory named Sforum on the Web server. This directory will store all the project files.

Designing the Login Page

Create a basic HTML page and then save it as login.htm in the Sforum directory. Next, create controls on the Login page, as shown in Figure 10.1. This page prompts for the username and password. It contains two buttons, Sign In and Reset. Clicking the Sign In button submits the username and password to the server for authorization. After the user is authorized, he's directed to the User Main page.

click to expand
Figure 10.1: The design of the Login page.

The Login page contains the following controls:

A Form control that acts as a container for other controls of the login form.
An HTML Table control to hold the controls in the form.
Two Text Field controls to accept the username and password.
Two Button controls to validate the login and exit from the page.

Next, set the properties of the Form control, as listed in Table 10.1.

Table 10.1: Properties Assigned to the Form Control
Property	Value
Name	Login
Action	Check.cfm
Method	POST

Table 10.2 lists the properties assigned to the Text Field controls that are used in the Login page.

Table 10.2: Properties Assigned to the Text Field Controls
Control	Property	Value
TextField1	Name	user
TextField1	Type	Single Line
TextField2	Name	pass
TextField2	Type	Password

Table 10.3 lists the properties assigned to the Button controls used in Login page.

Table 10.3: Properties Assigned to the Button Control
Control	Property	Value
Button1	Name	submit
Button1	Type	submit
Button1	Value	Sign In
Button2	Name	Reset
Button2	Type	Reset

Designing the User Main Page

The User Main page allows the user to navigate to three pages: Post Message, View Message, and Delete Message. Create the Web page named postview.htm. Figure 10.2 shows the design of the User Main page.

click to expand
Figure 10.2: The design of the User Main page.

As you can see, the User Main page contains three links that allow the user to navigate to the other pages.

Designing the Post Message Page

The Post Message page is loaded when the user clicks the Post Your Message link on the User Main page. This page enables you to post queries in the Bulletin-Board database, which is the SQL Server 2000 database in the back end.

Create a simple HTML page named PostMessage.htm in the Sforum directory. Figure 10.3 shows the design of the Post Message page.

click to expand
Figure 10.3: The design of the Post Message page.

The Post Message page contains the following controls:

A Form control that acts as a container for all the controls.
Text Field and TextArea controls that allow users to enter the message details.
Button controls that allow users to post messages.

Set the properties of the Text Field and TextArea control, as listed in Table 10.4.

Table 10.4: Properties Assigned to the Text Field and TextArea Controls
Control	Property	Value
TextField1	Type	Text
TextField1	Name	user
TextField2	Type	Text
TextField2	Name	Email
TextField3	Type	Text
TextField3	Name	Subject
TextArea	Rows	5
TextArea	Cols	20
TextArea	Name	query

Next, set the properties for the Button control of the form, as listed in Table 10.5.

Table 10.5: Properties Assigned to the Button Control
Control	Property	Value
Button1	Type	Submit
Button1	Value	Send
Button2	Type	Reset

The dynamic functionality of the Post Message page is implemented through the PostMessage.cfm file. The code for this file will be discussed in "The Workings of the Bulletin Board Application" later in this chapter.

Designing the View Page

The View page is loaded when the user clicks the View Your Message link in the User Main page. This page allows the user to view the messages posted to the BulletinBoard database in the browser window. This page is created using CFML, and the messages are generated dynamically from the database. The code for this page will be explained in "The Workings of the Bulletin Board Application."

Designing the Delete Message Page

The Delete Message page is loaded when the user clicks the Delete Your Message link in the User Main page. This page allows the user to delete the messages posted in the BulletinBoard database. This page, like the View Message page, is also generated dynamically using CFML. The CFML code for this page will be discussed in "The Workings of the Bulletin Board Application."