CS2413: Web Site Development
Weekly Materials - Week 11
Click Topic to Open | Open All | Close All
Objectives
Chapter 9: Forms
  • Describe common uses of forms on web pages
  • Create forms on web pages using the form, input, textarea, and select elements
  • Create forms that provide additional accessibility features using the accesskey and tabindex attributes
  • Associate form controls and groups using the label, fieldset, and legend elements
  • Create custom image buttons and use the button element
  • Use CSS to style a form
  • Configure the new HTML5 form controls, including the e-mail address, URL, datalist, range, spinner, calendar, and color controls
  • Describe the features and common uses of server-side processing
  • Invoke server-side processing to handle form data
  • Find free server-side processing services on the web
Chapter 12: E-Commerce
  • Define e-commerce
  • Identify the benefits and risks of e-commerce
  • Describe e-commerce business models
  • Describe e-commerce security and encryption
  • Define Electronic Data Interchange (EDI)
  • Identify trends and projections for e-commerce
  • Describe issues related to e-commerce
  • Describe options for order and payment processing
Assignments and Due Dates

Assignments and Due Dates: View

Required Readings

Web Development & Design Foundations with HTML5 - 7th Edition by Terry Felke-Morris
Chapter 9: Forms
Chapter 12: E-Commerce Overview

Required Tutorials
  1. Text's Companion Website - VideoNotes: http://wps.pearsoned.com/ecs_felke_webdevdesf_7/
    (Page number indicates related page in the textbook)
    • Chapter 9: Connect a Form to Server-Side Processing (Page 405)
    • Chapter 12: E-Commerce Benefits and Risks (Page 504)
  2. E-commerce Websites for Small Businesses (2:13 Min)
    http://www.youtube.com/watch?v=kIQ2eQun-Vo
  3. Symmetric Key and Public Key Encryption (6:44 Min)
    http://www.youtube.com/watch?v=ERp8420ucGs
  4. SSL Certificates: What they are and who needs them? (2:55 min)
    http://www.youtube.com/watch?v=SJJmoDZ3il8

Sample Code and/or Data Files
  • Textbook's Chapter and Web Site Case Study Data Files
    • http://wps.pearsoned.com/ecs_felke_webdevdesf_7/243/62410/15977113.cw/index.html
    • Click on Student Resources
      Click on Student Data Files in left margin
    • Download the Zip file for the current chapter
    • Extract/unzip the file
    • Chapter files will be visible or accessible by opening various folders
    • "If" needed for this chapter's Case Study Hands-On, the files for Pacific Trails are located in the casestudystarters/pacific folder.
Supplemental Materials
  1. PowerPoint from Text: Chapter 9- View (ppt) | Print (pdf)
  2. PowerPoint from Text: Chapter 12- View (ppt) | Print (pdf)

  3. Author's Web Site: http://www.webdevfoundations.net/7e /chapter9.html
    (Scroll to the bottom of each chapter's web page for the chapter updates AKA errata sheet )
  4. Author's Web Site: http://www.webdevfoundations.net/7e /chapter12.html
    (Scroll to the bottom of each chapter's web page for the chapter updates AKA errata sheet )

  5. Textbook's Website: http://wps.pearsoned.com/ecs_felke_webdevdesf_7/
    6. (The access code is located in the front of the text. For those with used text's the code is available online. Click on the link above.)
Software

No new software

Chapter Questions and Test Reviews

Chapters 9 and 12 Reviews:
Although no points are earned for the Quizlet tests, it is highly recommended that students know the answers. It is an excellent way to prepare for both the weekly quizzes and major tests.

Test 1 Review Sheet: Test 3 Review
It is highly recommended that students work through the test review sheets as each chapter is studied. It will help with learning the material and may reduce the amount of study time required for the major tests.

Required Assignments

WSD09: PacificTrails - Forms (Publish to Apollo, submit the URL in the LMS)
Two quizzes this week:
   QUIZ: Chapter 09 (LMS)
   QUIZ: Chapter 12 (LMS)

Professor's Class Notes and Comments

This week...

Many of you will find answers this week to questions regarding getting information from users and creating e-commerce sites. As exciting as this week will be, please keep in mind that this is an introduction. Topics such as client-side programming, server-side programming, cookies, shopping carts are just a few of the items covered in more advanced courses. Hopefully this will spark your interest to continue your studies in this area.

It is most important that all form elements have an name and id property. With that being said, the <form> element itself cannot have a name attribute. That has been deprecated and prevents web pages with forms from validating. For example, the name property is used by some server-side scripts for processing but the id can be used for CSS formatting. The text does not always follow this rule, but it will be a requirement for this class. Again, it is easier to learn the correct way now rather than try to change bad habits later.

When assigning values to the names and ID's make them meaningful. Color1, Color2, Color3 are not meaningful. colorRed, colorBlue, colorGreen will be more useful when writing code to process the form (not part of this course) and maintaining the website.

I am disappointed that the text does not provide more opportunities for you to use other form elements. These are very import concepts when working in the world of web development. As has been stated before, these items will be on the test even though they have not been included in a regular formal assignment.

Chapter 9:

p. 385 Form

The <form> MUST have a name and id just the same as all other form elements. Even if the text does not always include both of these attributes, they are part of best practices and are required for this class.

p. 387 Submit and Reset Buttons

The submit and reset buttons MUST have a name and id just the same as all other form elements. Even if the text does not always include both of these attributes, they are part of best practices and are required for this class.

p. 390 Radio Button

Just for emphasis! - On most form elements, the name and the id are the same. On Radio buttons, the name attribute groups the buttons. All of the related buttons must have the same name. This makes them mutually exclusive - only one can be selected at a time.  The id for each button is usually different. This provides an unique identifier which is often used when formatting radio buttons.

p. 397 Image Buttons and the Button Element

Adding images at times can enhance a website. BannerFans.com not allows for making of customized banner, customized buttons can also be made. Consider checking it out when you work on your final project.

p. 398 Label Element

It seems that better results are obtained using the second method. This is the one I would recommend.

<label for="email">Email: </label>
<input type="text" name="email" id="email" tabindex="2" accesskey="E">

p. 402 AccessKeys and TabIndex

All input elements MUST have a tabindex, accesskey, name, and id even if the book does not include it in its code examples and/or documentation. This includes the Submit and Reset buttons.

Chapter 12:

E-Commerce is a very important issue. I wish there was more time in the course so it could be covered in greater detail. Just be sure to watch this week's required video tutorials.

E-commerce Websites for Small Businesses (2:13 Min)
http://www.youtube.com/watch?v=kIQ2eQun-Vo

p. 507 E-Commerce Statistics

The text list the URL http://www.pewinternet.org/static-pages/trend-data-%28Adults%29/Whos-Online.aspx which redirects the user to http://www.pewinternet.org/three-technology-revolutions/. Click on the links at the right for some interesting statistical information.

p. 509 Encryption

If you need some assistance understanding Symmetric-Key and Asymmetric-Key encryption, this video may help clarify.
http://www.youtube.com/watch?v=ERp8420ucGs

p. 510 Secure Socket Layer SSL

http://www.youtube.com/watch?v=SJJmoDZ3il8