1. Calculator.asp - This
calculator validates that the user has entered numeric values and
does not allow division by zero. You are welcome to use my
HTML or create your own.
-
The particular button clicked by the user
determines which mathematical operation to perform. Each
button has a specific value (see the HTML source code on the
sample). Use a case statement to determine which button was
clicked and then perform the appropriate calculation.
-
Check the inputs to make sure that they are
numeric and send the user an appropriate message if they aren't.
-
Positioning the error message. Sometimes we want
messages to appear in a different position on the page then where
our server side source code is located. For instance, we may want
all of our server-side code above the table that displays the
results and error messages to appear at the bottom of the page.
We can create a variable (I called mine strMessage) to hold the
contents of the message until we are ready to write it out. We
can then assign the message to the variable at the top of the
page and use <% =strMessage %> to write it out at the bottom of
the page.
-
Division by zero produces an ugly error message
that our clients should never see. Add an If then else statement
within your case statement (a particular case can have multiple
line of code) to check that the user is not attempting to divide
by zero, and if they do, give them an appropriate error message.
-
Maintain the values in the textboxes between page
reloads (or postback). Do this by adding the following value
attritube to the textbox:
value="<% =strInput1 %>"
The previous statement assumes that you have retrieved the value
entered into the textbox (using the request statement) and
assigned it to a local variable named strInput1.
2. Validate.asp - This
page validates that the user has entered values in both parts of the
form. The user is given a polite warning in red text if either
value is missing. Steps:
-
Create a form containing a textbox for the name
and three radio buttons for car models. When the submit button is
pressed the form will 'postback' to itself.
-
The first time the page is loaded it should not
display warnings about missing data. We will create a "flag" to
tell us if the page is posting back to itself and use this to
suppress the validation the first time the page is loaded.
Create a hidden field that contains a variable named "bolPostBack"
and assign it a value of "true" (you can see this field in the
source code of the example). The first time the user visits the
page this variable will not have a value. We can check its value
and display warning messages only if bolPostBack = "true".
-
The empty field warnings should appear
immediately below the appropriate empty field. Do this with a
script block containing an If then statement similar to:
If strName = "" and request.querystring("bolPostBack") then
...write warning...
end if
-
Give the user a message at the bottom of the page
when all of the data is valid. At the bottom of the page add a
message similar to:
If strName > "" and strModel > "" then
... write message...
end if
-
Maintain the data in the textboxes between page
postbacks as you did in the previous problem. Otherwise the user
has to complete all of the fields each time the page posts back
to itself. We won't worry about preserving the car selection,
that is a bit more complicated.
3. Order01.asp - Use
Validate.asp as a template for this page. Instead of giving the user
a message when their data is valid we are going to write their
information to a cookie and redirect them to the next stage of the
order process. Steps:
Modify the code block that currently writes the 'success' message
by:
-
writing the user's info to cookies:
response.cookies("CarOrder")("strName") = strName
-
Redirecting the user to the next stage of the
order process with a response.redirect statement:
response.redirect "Order02.asp"
The second page Order02.asp asks the user to
select a car color. It also validates that a value was entered
before redirecting to the final stage of the ordering process. This
page is very similar to Order01.asp.
The final page Order03.asp reads the
information from the cookie and puts it into a message to the user.
It also displays an image of the car they have selected.
There are nine car-color combinations (3 car models
x 3 colors). You should use the images located at:
http://yorktown.cbe.wwu.edu/sandvig/mis597/assignments/a06/images/accordGreen.jpg
.
The image names are:
| AccordGreen.jpg |
| AccordRed.jpg |
| AccordSilver.jpg |
| OutbackGreen.jpg |
| OutbackRed.jpg |
| OutbackSilver.jpg |
| s2000Green.jpg |
| s2000Red.jpg |
| s2000Silver.jpg |
Note that the image names are composed of the car
model and color. Concatenate the car model and color directly into
the image tag to specify the image, as shown here:
<img src="http://yorktown.cbe.wwu.edu/sandvig/mis314/assignments/a04/images/<%
= strModel & strColor %>.jpg" >
Finally, provide a link back to Order01.asp.
Option: If you don't like my boring middle-aged
college professor style cars you may use different car models. You
must have at least three car models in at least three colors each.