Question;This lab supports TCO 6: Given a project, develop an online form that uses client-side form validation.;You have been asked to design and implement a checkout form. Imagine;that a user has been navigating an online store that sells a variety of;sports equipment. The user has added a number of items to his or;her shopping cart and is going through the checkout process to order;the items online. The checkout page shows what the user bought and;allows him or her to enter his or her information (name, address;credit card number, etc.) to complete the order. You are going to;design this checkout form.;Deliverables;Step;Deliverable/Components;Points;Step 1;- Includes all of the required elements: title, subtitle, table of items (5 points);- Design, layout, CSS (5 points);10;Step 2;Includes all of the required form elements: name, address, e-mail;address, ship or pick-up, credit card type and number (10 points);- Choose appropriate controls for the input (5 points);- Set form tag correctly (5 points);20;Step 3;Validation of the required elements (5 points);- Unobtrusive validation used (3 points);- Prevent from submission on invalid data (2 points) Transfers to thanks.html on valid submission;10;Total;40;Required Software;Dreamweaver;Access the software at https://devrydesktop.rkon.com.;Steps: All;iLAB STEPS;Step 1: Create Web Page in Dreamweaver;Back to Top;Using what you learned in Weeks 1 to 4, create a web page that includes the following.;A title for the online store?you make one up!A subtitle that says ?Complete Your Order?The items that the user orderedOne kayak with rudder for $775.00One 10 L dry bag for $15.00Two helmets for $50.00 eachThe total cost for the order;Feel free to add a layout, style, color, and graphics to the page as you see fit.;Step 2: Add an HTML Form to the Page;Back to Top;The page must include a way for the user to enter his or hername,address (street, city, state/province, country),phone number,e-mail address,preference for shipping or picking up the order,credit card type (one of Visa, MasterCard, or American Express), andcredit card number.There must also be a button to complete the order.;You should choose the appropriate form element for each input. For example, a textbox should be used for "name.;Create a simple HTML page with a heading level 1 that says ?Thank You!? Save this as thanks.html.;Note: If this page was part of a real store, we would set the form;action to a server script to handle the order. However, for the purpose;of this lab, please set the form action to thanks.html. When a valid;form is completed, the form will redirect to this page.;Step 3: Add Unobtrusive Validation to the HTML Form;Back to Top;Include unobtrusive validation to the form. You must ensure that;name and address are not blank,one of the ship or pick-up options is selected,a credit card type is selected, anda credit card number is not blank.;If the form does not validate, notify the user and do not allow the form to submit.;Step 4: iLab Submission;Back to Top;Create a folder called CIS363A_YourLastName_W5_Lab.Put copies of each required deliverable into the new folder.Right-click on the folder and select Send To ->;Compressed (zipped) Folder. You can also use other tools to;compress the files into a single zip folder (e.g., 7-zip).Upload the zip file to the Week 5 iLab DropBox located on the silver tab at the top of this page.;Submit your lab to the Dropbox located on the silver tab at the top of;this page. For instructions on how to use the Dropbox, read these step-by-step instructions or watch this Tutorial Dropbox Tutorial.
Paper#36478 | Written in 18-Jul-2015Price : $32