CIS363A Lab 5 – HTML form with validation and proper designing – 3 screenshot attached – Instant Delivery

Problem Statement

iLab 5 of 6: Create Checkout Form
Note!
Submit your assignment to the Dropbox located on the silver tab at the top of this page.
(See the Syllabus section “Due Dates for Assignments & Exams” for due dates.)
iLAB OVERVIEW
Scenario and Summary
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 o Validation of the required elements (5 points)
– Unobtrusive validation used (3 points)
– Prevent from submission on invalid data (2 points)
o 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 ordered
o One kayak with rudder for $775.00
o One 10 L dry bag for $15.00
o Two helmets for $50.00 each
• The 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 her
o name;
o address (street, city, state/province, country);
o phone number;
o e-mail address;
o preference for shipping or picking up the order;
o credit card type (one of Visa, MasterCard, or American Express); and
o credit 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; and
• a 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.
See the Syllabus section “Due Dates for Assignments & Exams” for due date information.
Back to Top

Relevant Material

CIS363A Lab 1

CIS363A Lab 2

CIS363A Lab 3 – Updated

CIS363A All Labs (1 – 6)

CIS363A Group project-Milestone(1-7)

CIS363A Final Exam Study Guide 1

CIS363A ExamQues-AbsoluteRelative

CIS363A ExamQues-MaintainConsitency

CIS363A ExamQues-ImageSize

CIS363A ExamQues-ProsConsCSS

CIS363A ExamQues-SpryEffect

CIS363A ExamQues-CSSBoxModel

Screenshots

Instructions

* If you want to purchase multiple products then click on “Buy Now” button which will give you ADD TO CART option.Please note that the payment is done through PayPal.
* You can also use 2CO option if you want to purchase through Credit Cards/Paypal but make sure you put the correct billing information otherwise you wont be able to receive any download link.
* Your paypal has to be pre-loaded in order to complete the purchase or otherwise please discuss it with us at [email protected].
* As soon as the payment is received, download link of the solution will automatically be sent to the address used in selected payment method.
* Please check your junk mails as the download link email might go there and please be patient for the download link email. Sometimes, due to server congestion, you may receive download link with a delay.
* All the contents are compressed in one zip folder.
* In case if you get stuck at any point during the payment process, please immediately contact us at [email protected] and we will fix it with you.
* We try our best to reach back to you on immediate basis. However, please wait for atleast 8 hours for a response from our side. Afterall, we are humans.
* Comments/Feedbacks are truely welcomed and there might be some incentives for you for the next lab/quiz/assignment.
* In case of any query, please donot hesitate to contact us at [email protected].
* MOST IMPORTANT Please use the tutorials as a guide and they need NOT to be used for any submission. Just take help from the material.
******************************************** Good Luck ***************************************************

We take your privacy seriously and will take all measures to protect your personal information.
Any personal information received will only be used to fill your order. We will not sell or redistribute your information to anyone.

Refund Policy

Incase you face any issues with the tutorial, please free to contact us on [email protected]
We will try our best to resolve the issue and if still persists we can discuss for a refund in case its required.

Payment Details

Lab Price = $10

Please feel free to send us your queries at: [email protected]

Payment methods

IqraJavaid's Tutorial

CIS363A Lab 5 – HTML form with validation and proper designing – 3 screenshot attached – Instant Delivery – perfect solution

Leave a Reply Cancel reply