Collecting, Processing, and Displaying the Data

The stage is set, and now it is time to capture the data entered on the form and perform the price calculation based on the data the user entered. You are already familiar with collecting form data and displaying it on the page, so in this task you should focus on the calculation itself.

  1. Open tourprice_processor.asp. If necessary, switch to split view or code view.

    To perform the calculations, you need the data, which is available on the page specified in the form's action attribute.

    The switch to code view is necessary for now, because you are about to do some hand-coding, and there is no way to handle this in design view.

  2. ASP only: Position the insertion point at the top of the document, before the opening <?xml> tag, press Enter/Return twice, return to line 1, and type <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>.

    This line is necessary for two reasons. First, it tells the server that the scripting language used is VBScript. Remember, ASP can be coded using more than one language. The most common languages for ASP are VBScript and JScript, and with ASP.NET, you have even more options. ColdFusion users don't have to worry about this setting, because ColdFusion supports only ColdFusion Markup Language (CFML), so there is no possibility for confusion.

    The second attribute, CODEPAGE, specifies the page's language. 1252 refers to English.

  3. ASP only: Position the insertion point in line 2 and press Enter/Return twice to add some more space. Beginning in line 3, type the following code:

    <%
    Dim numAdult, numChild, basePrice, tourPrice
    
    %>
    

    As you know from before, <% is used to mark up ASP code that the server needs to process. The extra space just above the closing %> is to leave room for additional script, which you'll add in a moment.

    The second line may look a bit odd. In ASP, whenever you want to create a new variable, you must declare it. You declare new variables using Dim. Thus, the second line announces to the server that you are creating three new variables. These variables have not yet been assigned any valuesyou'll give them values momentarily.

    NOTE

    Some languages do not require you to declare variables before you set their values. ColdFusion is one of them, which is why ColdFusion has no equivalent to the Dim line.

    By the end of this step, ASP users' code window should appear as in the following screenshot. ColdFusion users, just to reiterate, haven't done anything in this task yet, but that's about to change.

    graphics/07inf01.gif

  4. Set three variables, numAdult, numChild, and basePrice, to the values entered in the numAdults, numChildren, and tourName form fields.

    In ASP, insert the following code beginning in the empty line after the Dim line:

    numAdult = Request.Form("numAdults")
    numChild = Request.Form("numChildren")
    basePrice = Request.Form("tourName")
    

    In ColdFusion, enter the following code at the top of the document, before the opening <?xml> tag:

    <cfset numAdult = form.numAdults>
    <cfset numChild = form.numChildren>
    <cfset basePrice = form.tourName>
    

    You've seen Request.Form("fieldname") and form.fieldname in earlier lessons. This time, rather than simply printing them on the page, as you did before, you are storing those values inside new variables. The reason for this is that what needs to be printed on the page is the output of the calculation. By storing these values in descriptively named variables, the calculation is easier to code (and read).

    ColdFusion users might wonder why the form variables aren't surrounded by pound signs (##) as they were in previous lessons. Pound signs are used only when ColdFusion is outputting a dynamic value to an external source, such as HTML. Without them, ColdFusion would print the variable name, rather than its value. But the pound signs are unnecessary here, because the action here is internal to ColdFusionit is not outputting values anywhere.

  5. Set a fourth variable, tourPrice, to equal the output of the calculation itself.

    In ASP, insert the following code in the line below the basePrice line:

    tourPrice = (numAdult * basePrice) + (numChild * basePrice)
    

    In ColdFusion, insert the following code in the line below the basePrice line:

    <cfset tourPrice = (numAdult * basePrice) + (numChild * basePrice)>
    

    Assuming you survived seventh-grade math, you probably know what this line is doing. It is setting the value of tourPrice to equal the output of a simple calculation. The parentheses are used, as in arithmetic, to ensure that the calculations take place in the proper order.

    When this line of code is resolved on the server, tourPrice has the final calculated dollar amount as its value. With that in place, all we need to do is output it into the HTML code where the XXX placeholder is, and the user will see the information that they need.

    graphics/07inf02.gif

  6. Still in code view, scroll down to the XXX placeholder (around line 46 in ASP, and around line 41 in ColdFusion). Delete XXX and in its place enter the following code to output the value of the tourPrice variable.

    In ASP:

    <% Response.Write(tourPrice) %>
    

    In ColdFusion:

    <cfoutput>#tourPrice#</cfoutput>
    

    Outputting a variable value is familiar to you by now. The main difference between this instance of outputting a variable and what you did in Lesson 5 is that you don't need to specify an HTTP-compatible scopeURL/querystring, form, cookie, etc. The scope of this variable is the page itself as it is processed in ASP or ColdFusion, and the variable will be resolved and removed before the code is ever sent over HTTP to the browser.

    graphics/07inf03.gif

  7. Save and upload both tourprice.asp and tourprice_processor.asp. Select tourprice.asp in the Site panel, and press F12 to test it.

    You should always test a page's functionality as soon as you can. These two pages are ready for testing. You'll add quite a few enhancements to this application, but its core functionality worksor should.

    Try several different variations. Enter numeric values in each field, choose a tour, and press Submit. You should see the output page with the calculated amount in bold. Notice that the dollar amount appears, but nothing indicates that it's a dollar amount. Both ASP and ColdFusion have built-in functions that enable you to output numbers in proper currency format, as you'll see in a moment.

    graphics/07fig10.gif

    Once you have verified that it works in the best-case scenario, when you've properly entered numbers, try to break the application by entering bad data in the form. Leave one or both fields blank, or enter a letter, such as D.

    graphics/07fig11.gif

    The page blows up. The reason is that your script multiplies and adds the contents of the form fields. If these fields have no content or contain non-numeric characters, it can't perform calculations. This application would benefit from a form validation enhancement that would ensure that users actually entered numbers in both fields, before it attempts to calculate a price.

  8. Return to tourprice_processor.asp in Dreamweaver, and insert the function that converts the output number to the U.S. dollar currency format.

    In ASP:

    <% Response.Write(FormatCurrency(tourPrice)) %>
    

    In ColdFusion:

    <cfoutput>#DollarFormat(tourPrice)#</cfoutput>
    

    Functions are predefined actions that tell the interpreter how to do something. Computer languages generally have dozens of functions, if not more, built in for common tasks. Converting numeric figures to currency format is a common task, and so many languages have a function that performs this task.

    Functions take the following format: FunctionName(Parameter). In some cases, there is no parameter, but the parentheses remain, as in the case of ColdFusion's Now() function, which returns the current time on the server. In the case of ASP's FormatCurrency() and ColdFusion's DollarFormat(), the lone parameter is the number that you want to format. Because the number is held in the tourPrice variable, you place that variable in the parameter.

    If you test the page now, the results are more satisfying.

    graphics/07fig12.gif