CIS 363 DeVry Week 5 iLab 5
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>CIS</strong> <strong>363</strong> <strong>DeVry</strong> <strong>Week</strong> 5 <strong>iLab</strong> 5<br />
Downloading is very simple, you can download this Course here:<br />
http://wiseamerican.us/product/cis-<strong>363</strong>-devry-week-5-ilab-5/<br />
Or<br />
Contact us at:<br />
SUPPORT@WISEAMERICAN.US<br />
<strong>CIS</strong> <strong>363</strong> <strong>DeVry</strong> <strong>Week</strong> 5 <strong>iLab</strong> 5<br />
<strong>CIS</strong><strong>363</strong><br />
<strong>CIS</strong> <strong>363</strong> <strong>DeVry</strong> <strong>Week</strong> 5 <strong>iLab</strong> 5<br />
Web Interface Design With Lab<br />
Lab 5: Forms<br />
Scenario<br />
This <strong>iLab</strong> supports the following TCOs.<br />
TCO 6: Given a project, develop an online form that uses client-side form validation.<br />
You have been asked to design and implement a checkout form. Imagine that a user has been navigating an online<br />
store that sells a variety of sports equipment. The user has added a number of items to his or her shopping cart and is<br />
going through the checkout process to order the items online. The checkout page shows what the user bought and<br />
allows him or her to enter his or her information (name, address, credit card number, etc.) to complete the order. You<br />
are going to design this checkout form.<br />
Rubric<br />
Deliverable<br />
Points<br />
Part A: Web page created with order summary information 4<br />
Part A: Page layout and formatting using CSS 4<br />
Part B: Form created with appropriate fields and buttons as specified 10<br />
Part B: thanks.html page created and connected to the form action 4<br />
Part C: Form validation completed as specified 6<br />
Part C: thanks.html page loads when form is successfully submitted 3<br />
Part C: User is notified and form is not submitted if validation fails 3<br />
Lab Report – All sections complete 6<br />
Total 40
Lab Steps<br />
Part A: Create the Web Page<br />
1. Using what you learned in <strong>Week</strong>s 1 to 4, create a web page that includes the following:<br />
<br />
<br />
<br />
<br />
A title for the online store—you make one up<br />
A subtitle that says “Complete Your Order”<br />
The items that the user ordered<br />
o One kayak with rudder for $775.00<br />
o One 10 L dry bag for $15.00<br />
o Two helmets for $50.00 each<br />
The total cost for the order<br />
1. Use CSS to create a layout and add styles, color, and graphics to the page as you see fit.<br />
Part B: Add an HTML Form to the Page<br />
1. Set up a form on the page below the order summary information.<br />
2. Include fields for the following information:<br />
o name;<br />
o address (street, city, state/province, country);<br />
o phone number;<br />
o e-mail address;<br />
o preference for shipping or picking up the order;<br />
o credit card type (one of Visa, MasterCard, or American Express); and<br />
o credit card number.<br />
Be sure to choose the appropriate form element to each input field. For example, a textbox should be used<br />
for “name”. Also, use appropriate labels for each field so that the user knows what information is expected.<br />
1. Include a Submit button to complete the order.<br />
2. Create a simple HTML page with a Heading Level 1 that says “Thank You!” Save this as thanks.html.<br />
3. For the purpose of this lab, set the form action to thanks.html. When a valid form is completed, the form will<br />
redirect to this page (Note: If this page was part of a real store, we would set the form action to a server script<br />
to handle the order.)<br />
Part C: Add Validation to the HTML Form<br />
1. Include validation to the form to ensure that<br />
<br />
<br />
<br />
<br />
name and address are not blank;<br />
one of the ship or pick-up options is selected;<br />
a credit card type is selected; and<br />
a credit card number is not blank.<br />
1. If the form does not validate, notify the user and do not allow the form to submit.<br />
Part D: Complete the Lab Report<br />
1. Download the <strong>CIS</strong><strong>363</strong>_Lab_Report.docx file from Doc Sharing.<br />
2. The lab report must be completed for all labs. The key parts of the report include the following.<br />
o Objectives: A one-paragraph explanation of the purpose of the lab.<br />
o Results: Include a screenshot of the working website or page.
o<br />
Conclusions: A one-paragraph explanation of what you learned while completing the lab, any<br />
challenges you had to work through, and how you can use what you learned going forward.<br />
Submit Deliverables<br />
1. Copy files from the Citrix server (if necessary).<br />
2. Zip all of the files from Parts A–D into a single zip file.<br />
3. Submit your zip file to the Dropbox.