Chapter 25: Creating the Purchase Management Application | ColdFusion MX Professional Projects

The case study in Chapter 24, "Project Case Study—Creating the Purchase Management Application," discussed the need for an electronic data exchange between suppliers and the Purchasing departments at WeMakeCars, Inc. The proposed Purchase Management application is capable of reading XML-formatted invoices and writing purchase orders to an XML file. This chapter will introduce you to the <CFXML> tag and the XML document object available in ColdFusion MX. You'll design the static components of the Web pages and then learn about their code.

Designing Web Pages for the Purchase Management Application

To follow a structured methodology for project development, use Dreamweaver MX as the authoring tool. All the files with a .cfm extension are stored in the directory named ProjectSix. This directory should be created under the wwwroot directory on the Web server. You also need to create three more directories in the root directory on the Web server: PurchaseOrders, NewInvoices, and OldInvoices. These directories store purchase orders, new XML invoice files, and old XML invoice files. Once an invoice is stored in the database, its corresponding XML file moves from the NewInvoices directory to the OldInvoices directory.

To provide a consistent look and feel to all the Web pages, use a Cascading Style Sheet (CSS) called Project6.css. To apply the specific style to a page, use the class attribute of the various HTML tags.

Designing the Generate Purchase Order Page

Generate Purchase Order is the first page of the Purchase Management application. On this page, the end user selects a supplier from a list and enters the date on which the purchase order was created. This page provides a link called Working with Invoices, which helps the end user navigate to the View New Invoices page.

Create a basic HTML page and save it as WorkingWithPO.cfm in the ProjectSix directory. Next, create the controls on the Generate Purchase Order page, as shown in Figure 25.1.

click to expand
Figure 25.1: The design of the Generate Purchase Order page.

The Generate Purchase Order page contains the following controls:

A Form control to act as a container for the other controls on the page
An HTML Table control to store the List control
A Button control to generate the purchase order

The page also contains a hyperlink that works with invoices. The HTML Table control is placed within the Form control.

Set the properties of the Form control as listed the Table 25.1.

Table 25.1: Properties Assigned to the Form Control
Control	Property	Value
Form	Name	GenPurchase
Form	Action	GeneratePO.cfm
Form	Method	POST

The Text Field control accepts the purchase order date. Table 25.2 contains the property assigned to the Text Field control.

Table 25.2: Properties Assigned to the Text Field Control
Control	Property	Value
Text Field	Type	Text
Text Field	Name	PODate
Text Field	Size	15
Text Field	MaxLength	10
Text Field	Validate	date
Text Field	Message	Purchase order is required and should be in a proper format.

The <CFSELECT> tag creates the List control. It's used to select the name of the supplier. Table 25.3 lists the properties assigned to the List control in the Generate Purchase Order page.

Table 25.3: Properties Assigned to the List Control
Control	Property	Value
List	Name	Selected_Supplier
List	Size	7
List	Query	get_Supplier_Name
List	Value	SupCode
List	Display	SupName
List	Required	Yes
List	Message	Select a supplier name before proceeding for purchase order generation.

Table 25.4 lists the properties assigned to the Button control in the Generate Purchase Order page.

Table 25.4: Properties Assigned to the Button Control
Control	Property	Value
Button	Name	btnGenPurchaseOrder
Button	Type	Submit
Button	Value	Generate Purchase Order

Apart from these controls, the Generate Purchase Order page contains a link that helps the end user navigate to the View New Invoices page. Use the anchor tag to create the hyperlink, and set the href attribute to "ShowXMLInvoiceFiles.cfm".

Designing the Create XML File Page

The Create XML File page displays the purchase order generated in the Generate Purchase Order page. You can save the data pertaining to this purchase order as an XML file on this page. The details of the purchase order are displayed in a tabular form. Data is generated dynamically with the help of a query that will be explained in "The Workings of the Purchase Management Application," later in this chapter. To create the controls, first create a file and save it as ShowPO.cfm.

Figure 25.2 displays the design of the Create XML File page.

click to expand
Figure 25.2: The design of the Create XML File page.

The Create XML file page contains the following controls:

One Form control to act as a container for the other controls
One HTML Table control to display the details of the purchase order items, such as the item code, ordered quantity, and unit price
One Hidden control to store the purchase order number
One Button control to create the XML file

Set the properties of the Form control as listed Table 25.5.

Table 25.5: Properties Assigned to the Form Control
Control	Property	Value
Form	Name	GenPurchase
Form	Action	GeneratePO.cfm
Form	Method	POST

Table 25.6 contains the properties assigned to the Hidden control.

Table 25.6: Properties Assigned to the Hidden Field Control
Control	Property	Value
Hidden	Type	hidden
Hidden	Name	PONUM
Hidden	Value	#varPONum#

Table 25.7 lists the properties assigned to the Button control used in the Create XML File page.

Table 25.7: Properties Assigned to the Button Control
Control	Property	Value
Button	Name	btnConvertToXML
Button	Type	Submit
Button	Value	Create XML File

Designing the View New Invoices Page

You can use the View New Invoices page to view all the new XML invoice files. It displays the name, size, and last-modified date of the files, in a tabular format. The name of the file is displayed as a hyperlink.

Create a new basic HTML file and save it as ShowXMLInvoiceFiles.cfm. The content to be displayed in the table is generated dynamically when this page is loaded. The details of the query that generates this content are discussed in "The Workings of the Purchase Management Application," later in this chapter.

Figure 25.3 displays the design of the View New Invoices page.

click to expand
Figure 25.3: The design of the View New Invoices page.

The View New Invoices page contains a link to the Generate Purchase Order page. Use the anchor tag to create this hyperlink, and set the href attribute to "WorkingWithPO.cfm".

Designing the View Individual Invoice Page

The View Individual Invoice page displays the details of the invoice file selected in the View New Invoices page. It shows the header and item details—such as the invoice code, the date when the invoice was issued, the item code, the quantity supplied, and the unit price—in an HTML Table control. These details are fetched in a query and generated dynamically when this page is loaded. This page is named ShowInvoice.cfm.

Figure 25.4 shows the design of the View Individual Invoice page.

click to expand
Figure 25.4: The design of the View Individual Invoice page.

The View Individual Invoice page contains the following controls:

One Form control to act as a container for the other controls
One HTML Table control to display the invoice item details, such as the item code, the quantity supplied, and the unit price
One Hidden control to store the name of the XML file
One Button control to save the invoice

Set the properties of the Form control as listed the Table 25.8.

Table 25.8: Properties Assigned to the Form Control
Control	Property	Value
Form	Name	SaveInvoice
Form	Action	SaveInvoice.cfm
Form	Method	POST

Table 25.9 contains the property assigned to the hidden control.

Table 25.9: Properties Assigned to the Hidden Field Control
Control	Property	Value
hidden	Type	hidden
hidden	Name	XMLFILE
hidden	Value	#URL.FN#

Table 25.10 lists the properties assigned to the Button control.

Table 25.10: Properties Assigned to the Button Control
Control	Property	Value
Button	Name	btnSave
Button	Type	Submit
Button	Value	Save Invoice