Simple ASP Calculator
by Sharon Huston

GOALS:

About Web Applications

Most web applications (shopping carts, online surveys, etc.) start with a simple HTML form. The form collects information from the user, and passes the information to a new page for processing and for displaying the results. In this exercise we will create a very simple web application -- a crude calculator which will add, subtract, multiply, or divide two numbers.

Names and capitalization are VERY important in this exercise. Do yourself a favor and name your files, form items, and variables EXACTLY as they are named below.

Creating the Form

  1. Place a form on a blank page.
  2. Select the form (either by clicking on the red outline or by using the tag selector) and change the following form properties:
    • Change form name to calc
    • Set the form's action to calc.asp.
    • Change form's method Get.
  3. Insert a table inside the form with seven rows and two columns. Set the table border to zero.
  4. Examine the following illustration:

  5. Inside the form, place the following form elements as shown in the illustration.
    • A text field named varA
    • A text field named varB
    • A radio button group with four buttons, all named operator. The buttons each need a different value:
      • Add
      • Subtract
      • Multiply
      • Divide
    • A Submit button. Change the button's label to Calculate.
  6. Save the page to your xhtml folder as calcForm.htm.
  7. After uploading the page, type the numbers 4 and 7 in the field boxes, choose "Add," and click the submit button. YOU WILL GET AN ERROR MESSAGE AFTER SUBMITTING THE FORM -- This is OK. We'll fix it later. First, though, we want to examine a few things on this page.
  8. Look at the Address bar, where you type URLs into the browser. Yours should look something like this:

    http://nlecommerce1.dcccd.edu/students/fall2002/DrewNancy/xhtml/calc.asp?varA=4&varB=7&operator=add&Submit=Calculate


We're interested in the last part of this -- calc.asp?varA=4&varB=7&operator=add&Submit=Calculate.

If you remember, our form's action is set to calc.asp. This is the page the form is trying to send the data to. We haven't created the page yet, which is why we're getting that awful 404 Not Found error.

After calc.asp you'll see a question mark. (?) This question mark separates the file name from some information that we're trying to send to calc.asp. Everything after the question mark is called the query string.

After the question mark you'll see several name-value pairs. The name in a name-value pair is the name of a form element, and the value is what the user typed into the form. A common example is FirstName=Lily. FirstName would be a text field on a web page. The user accessing the page typed in the name Lily. The form is trying to reach the page calc.asp, and passing along the name by placing it in a querystring.

If a form needs to pass more than one name-value pair it separated the pairs with an ampersand (&).

So -- our form is sending out the following information:

Now we're ready to create the page which will process the form.

Creating The Processing / Display Page

  1. Open a new, blank page in Dreamweaver.
  2. Switch to CODE VIEW.
  3. Place this line at the very top of the page, above the <html> tag:

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>

  4. Our first task is to retrieve data from the query string so we can use it in our program. We'll do this by placing the following lines between the </head> and <body> tags:

    <%
    theVarA = Request.Querystring("varA")
    theVarB = Request.Querystring("varB")
    theOperator = Request.Querystring("operator")
    %>

  5. In these lines we are requesting the value of the different form items (the value of varA, for example), and storing this information in different variables (like theVarA). Once we have the data stored in variables we can use it in different ways. We can, for instance, add theVarA + theVarB, as you will see shortly.
  6. For now, we're just going to add the numbers together without worrying about which radio button the user chose. To do this we'll make a new code block, right underneath the previous code block:

    <% theAnswer = theVarA + theVarB %>

  7. Now we need to display the answer on the page. As you know, any text which is to appear on a page must appear between the <body> tags. ASP pages are no different. Place the following line between the <body> and </body> tags.

    Your answer is <% Response.write(theAnswer) %>

  8. The first part is just plain text -- Your answer is
  9. The next part is an ASP command called Response.write. This command will display the value of theAnswer on the screen.
  10. Save the page in your xhtml folder as calc.asp.
  11. Upload the page. Open your web browser, and open the form -- calcForm.htm -- again. Enter two numbers and check the results.
  12. Umm. We have a problem, don't we? Our form isn't adding our numbers. Instead it's squashing them together. According to our calculator, 4 + 4 = 44. Also according to our calculator, work + bench = workbench. Uggg. Our program is treating our numbers as letters. It thinks they're words, not numbers.
  13. By default, any value retrieved from a query string is a string variable. (String variables are variables that contain words, as opposed to numeric variables which contain numbers.) We need to use a new command to change our string variables into numbers.
  14. Modify your first code block as follows, using the CInt command to convert the query string value to an integer. CInt stands for "Convert Integer."

    <%
    theVarA = CInt(Request.Querystring("varA"))
    theVarB = CInt(Request.Querystring("varB"))
    theOperator = Request.Querystring("operator")
    %>

    We don't need to convert theOperator as it's actually a word -- "add", "subtract", "multiply", or "divide."

  15. Save the file, upload it, and check it. Your form should now properly add together two numbers. NOTE: The Integer data type will only work with numbers between -32,768 and 32,767. If you try adding bigger numbers you'll get an error message. You'll also get an error message if you enter text instead of numbers.
  16. Our last step is to figure out if the user wants to add, subtract, multiply, or divide, and provide the correct answer. To do this, replace the line <% theAnswer = theVarA + theVarB %> with the following code block:

    <%
    if theOperator = "Add" then theAnswer = theVarA + theVarB
    if theOperator = "Subtract" then theAnswer = theVarA - theVarB
    if theOperator = "Multiply" then theAnswer = theVarA * theVarB
    if theOperator = "Divide" then theAnswer = theVarA / theVarB
    %>

  17. The block above uses four IF statements. If statements work by testing a condition -- in this case, if the value of operator is equal to a particular word. If the two are equal then the program will perform the math. If they are not equal the program will skip down to the next line.
  18. Remember our original form -- our radio buttons were all named operator, but they each had a different value. Names and values are very important in forms. We will work more with them in the next lesson.