Class 5 Notes for Web Publishing II

Learning Objectives:

You will be able to create a form that connects to a shopping cart

You will be able to modify the form with JQuery

You will be able to identify new attributes and elements in HTML 5

Homework:

Post: A form that sends data to a shopping cart. The form must be linked to your homework page

Create: an account on Mal's E-commerce (Make sure you save the Userid, Password and Server)

Review: Mal's tutorial to set up your connection to his shopping cart!

Review: Jon's Bribe Site uses a form that connects to a database. (View Source to see the HTML I used to link to the shopping cart.)

Review: W3schools Tutorial on Forms, Input Type and Input Attributes

Review: JQuery UI and JQuery Mobile for tools to spice up your Form

Review: The video from note 7 on how to create a form.

Watch: Forms and Connecting to Mal's E-commerce

 

Topics Covered:

You will need to register at Mal's E-commerce

We will be interacting with a database at Mal's Website. Mal's database needs the following fields to be filled out for the shopping cart to work. Mal's website uses Cold Fusion to create the connection to his database

userid     User Id for your shopping cart setup

product    What is the product you are selling?

price    Price of the Product you are selling

qty    How many will the customer want to buy?

Form Action     You will need to provide an action for this form to work. Mal will send you this URL when you register!

Sample of the Code:

<form action="http://ww#.aitsafe.com/cf/add.cfm" method="post">
<input name="userid" type="hidden" value="12345678">
<input name="product" type="hidden" value="Oceanmaster jacket">
<input name="price" type="hidden" value="159">
<input name="return" type="hidden" value="www.mals-e.com/support.php">
<input type="submit" value="Buy Now!">
</form>

We will play with the following form objects: Sample Form

With Forms you can "Get" or "Post" information to your server. You have the option of adding several "objects" to your HTML with the forms tag. Text boxes, Text Areas, Check Boxes, Radio Buttons and Submit Buttons are the more popular objects you can add to your page.

CGI stands for Common Gateway Interface. CGI adds interactivity between HTML and the Web servers resources (data bases or ability to create new pages.) Several different languages can be used to create CGI scripts. Some of the more popular languages are Perl, VB Script, Java Script, C++ and Apple Script.

New and Popular HTML 5 Input Types

New attributes for <input>:

Terms:

Form, Action, Checkbox, drop down box, CGI, database, cfm, asp

Homework: