2023 This iLab supports the following TCOs TCO 6 Given a project develop an | Assignment Collections
This iLab supports the following TCOs.
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.
Rubric
Deliverable
|
Points
|
Part A: Web page created with order summary information
|
4
|
Part A: Page layout and formatting using CSS
|
4
|
Part B: Form created with appropriate fields and buttons as specified
|
10
|
Part B: thanks.html page created and connected to the form action
|
4
|
Part C: Form validation completed as specified
|
6
|
Part C: thanks.html page loads when form is successfully submitted
|
3
|
Part C: User is notified and form is not submitted if validation fails
|
3
|
Lab Report – All sections complete
|
6
|
Total
|
40
|
Lab Steps
Part A: Create the Web Page
1. 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
2. Use CSS to create a layout and add styles, color, and graphics to the page as you see fit.
Part B: Add an HTML Form to the Page
1. Set up a form on the page below the order summary information.
2. Include fields for the following information:
- name;
- 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); and
- credit card number.
Be sure to choose the appropriate form element to each input field. For example, a textbox should be used for “name”. Also, use appropriate labels for each field so that the user knows what information is expected.
3. Include a Submit button to complete the order.
4. Create a simple HTML page with a Heading Level 1 that says “Thank You!” Save this as thanks.html.
5. For the purpose of this lab, set the form action to thanks.html. When a valid form is completed, the form will redirect to this page (Note: If this page was part of a real store, we would set the form action to a server script to handle the order.)
Part C: Add Validation to the HTML Form
1. Include validation to the form to 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.
2. If the form does not validate, notify the user and do not allow the form to submit.
Part D: Complete the Lab Report
1. Download the CIS363_Lab_Report.docx file from Doc Sharing.
2. The lab report must be completed for all labs. The key parts of the report include the following.
- Objectives: A one-paragraph explanation of the purpose of the lab.
- Results: Include a screenshot of the working website or page.
- Conclusions: A one-paragraph explanation of what you learned while completing the lab, any challenges you had to work through, and how you can use what you learned going forward.
Submit Deliverables
1. Copy files from the Citrix server (if necessary).
- Zip all of the files from Parts A–D into a single zip file.
3. Submit your zip file to the Dropbox.
Extend the Week 2 Project Proposal/Design and create a detailed page layout design in Visio that you will use as a template for all the web pages in your site. The template should include
1. a header area;
2. a link area;
3. a main content area; and
4. a footer area.
In the diagramming application, use the Save As option to create an image file (jpg, gif, or png) of your site. Copy this image file into your Project Proposal document.
Create blank content pages as per your site diagram. To do this, you must have the filenames of major site pages determined. You should have a home page (index.htm) and all of the subpages created, but content information is not required. Create the navigation links between the site pages. The pages do not need to have much content, but they must be created and contain the navigation elements and placeholder elements for your content. Begin to implement the box model with <div> tags and CSS.
Grading Rubric
Category
|
Points
|
%
|
Description
|
Page design template
|
15
|
34
|
Design template includes all the listed items (header, link, main content, and footer)
|
Website pages created
|
10
|
22
|
All pages created following the template and with navigation
|
All page links visible
|
10
|
22
|
Links are clear and obvious
|
All page links functional
|
10
|
22
|
Links allow full navigation
|
Total
|
45
|
100
|
A quality project will meet or exceed all of the above requirements
|
Site Layout and Content
Based on the site, page layout, and navigation developed in prior steps, begin to add content to your site. Include appropriate typography, colors, and imagery as per the lecture and iLab assignments. Begin to implement the box model through the use of <div> tags and absolute positioning. Use inline and embedded where appropriate.
Upon completion of this step, zip up all of the files for the site into one single file and submit the file to the Dropbox.
Grading Rubric
Category
|
Points
|
%
|
Description
|
Content visible on two web pages
|
8
|
17
|
Content on pages is visible
|
Appropriate use of colors
|
7
|
16
|
Colors match theme of site
|
Appropriate typography (font, size, and color)
|
7
|
16
|
Typography is appropriate for site
|
Images visible with alt tags
|
7
|
16
|
Images render and are appropriate
|
Box model using <div> tags and positioning
|
8
|
17
|
Payout layout is implemented per site spec
|
CSS used for layout and formatting
|
8
|
17
|
Multiple CSS style rules are implemented
|
Total
|
45
|
100
|
A quality project will meet or exceed all of the above requirements
|
Implement Site Content and Create a Form
Continue to develop the site content as directed in milestone 4. At this point, at least 3 of the pages for the site should be completed.
Use the knowledge gained in this week’s lecture and iLab to create a user feedback form. Include all necessary controls (text boxes, radio buttons, check boxes, text areas, dropdown lists, and buttons) to allow the user to effectively interact with the form. Use CSS to control the layout of the form. Include reset and submit buttons with the form. The reset button should clear the form and the submit button should load a “Your information has been received” page.
Move all site and page level styles to an external CSS file.
Upon completion of this step, zip up all of the files for the site into one single file and submit the file to the Dropbox.
Grading Rubric
Category
|
Points
|
%
|
Description
|
Content completed on at least three pages
|
9
|
20
|
Content on pages is visible
|
Form created and CSS used for the layout of the form
|
9
|
20
|
As per milestone spec
|
All necessary form controls used as appropriate
|
9
|
20
|
Required site evaluation options present
|
Buttons (submit/reset) included
|
9
|
20
|
Submit button linked to form action; reset clears form
|
External CSS file
|
9
|
20
|
Site managed by an external CSS file
|
Total
|
45
|
100
|
A quality project will meet or exceed all of the above requirements
|
Scenario
Upon completion of this step, upload your site to the web server and attach a copy of the zipped folder to the Dropbox.
Submit your lab to the Dropbox, located 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.
This lab supports the following TCOs.
TCO 5—Given a Web page that requires images and advanced styles, create and edit graphics and incorporate them into the page.
TCO 10—Given a project, create a website that contains text, links, images, and any other content necessary to complete the website using HTML and External CSS.
- Obtain 10 original photos.
- Research on the Internet and find some code that will allow you to create a slideshow.
- Create a page with your photos and the code that you find.
Create a Word document showing the source for your slideshow code. Be sure to document your HTML code as well.
Rubric
Deliverable
|
Points
|
Website – Includes slideshow code
|
10
|
Website – Text formatted using at least three different tags
|
6
|
Website – At least 10 images included and displaying correctly
|
10
|
Website – Document sources
|
8
|
Lab Report – All sections complete
|
6
|
Total
|
40
|
Lab Steps
Part A: Get Photos
- If you have personal images that you wish to use for the assignment, be sure that you cite them correctly according to APA guidelines.
- All of the images that you use should be cited in the Sources document that accompanies this assignment.
- IMPORTANT! Make sure that the version of each image that you use for the slideshow is less than 500K. Ten images at 500K is 5 MB, and adding the document should total no more than 7 MB.
Part B: Research Slideshow Code
Do some research on the Web to find code that will let you take your photos and build a slideshow on a page. Try to find code that is CSS based and doesn’t require a lot of JavaScript.
One example is http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/
Part C: Build Page and Document Sources
- Create the slideshow according to your selected research, using the images that you located in step 1.
- The slideshow should run automatically and should contain a text-based title for each slide.
- Write a description of the process that the slideshow uses to cycle through the slides and cite the source of your code.
Part D: Complete the Lab Report
1. Download the CIS363 Lab Report document from Doc Sharing.
2. The lab report must be completed for all labs. The key parts of the report include the following.
- Objectives: A one-paragraph explanation of the purpose of the lab.
- Results: Include a screenshot of the working website or page.
- Conclusions: A one-paragraph explanation of what you learned while completing the lab, any challenges you had to work through, and how you can use what you learned going forward.
Submit Deliverables
1. Copy files from the Citrix server (if necessary).
- Zip all of the files from Parts A, B, and C into a single zip file.
3. Submit your zip file to the Dropbox.