Difference between revisions of "AIM Class8"

Latest revision as of 16:05, 5 August 2008

Class Goals

1. Review web forms from previous class
2. Have students create a couple of simple examples to reinforce their understanding of how forms work
3. Introduce alternative languages for forms (such as PHP)

Web Forms

HTML Form Example

HTML forms

http://www.w3.org/TR/html4/interact/forms.html#h-17.4

Input Types

Input type from w3c http://www.w3.org/TR/html4/interact/forms.html#h-17.4

Text

creates a text entry box

<input type="Text" id="txtText1" />

Password

same as text but hides characters 'note the password is not hashed or encrypted when is it is sent to the web server; it is only masked in the web browser'

<input type="Password" id="passwd1" />

CheckBox

creates checkboxes

chkbxTest1<input type="Checkbox" id ="chkbxTest1" name="chkbxTest1" />
chkbxTest1<input type="Checkbox" id ="chkbxTest2" name="chkbxTest2" />

chkbxTest1 chkbxTest2

Radio

creates radio button. Radio buttons are grouped by name

rbTest1<input type="radio" id="rbTest1" name="rbTest1" />
rbTest2<input type="radio" id="rbTest2" name="rbTest1" />
rbTest3<input type="radio" id="rbTest3" name="rbTest1" />

rbTest1 rbTest2 rbTest3

Image

submit button. Default value is Submit Query can be changes with Value attribute.

<input type="Submit" Name="Submit" id="Submit1" />
<input type="Submit" Name="Submit" id="Submit2" Value="My Submit" />

Reset

rest button. Default value is Submit Query can be changes with Value attribute.

<input type="Reset" Name="Reset" id="Reset1" />
<input type="Reset" Name="Reset" id="Reset2" Value="Reset All Values" />

Button

button.

<input type="Button" Name="Button" id="Button" />
<input type="Button" Name="Button" id="Button2" Value="Don't Panic" />

Image

Graphical submit button. Should provide alt tag

<input type="Image" src="" Name="ImageSubmit" id="ImageSubmit" />

Hidden

hah ha can't see this

<input type="Hidden"  Name="Hidden1" id="Hidden1" value="Hide me" />

File

file uses multi part header

<input type="File"  Name="File1" id="File1" />
<input type="File"  Name="File2" id="File2" value="InitalFile.txt" />

Select Type Select

makes a dropdown list.

<select name="selectTest">
     <option selected value="Component_1_a">Select1</option>
     <option value="Component_1_b">Select2</option>
     <option value="Component_1_c">Select3</option>
     <option value="Component_1_d">Select4</option>
</select>

<select multiple size="4" name="selectTest2">
     <option selected value="Component_1_a">Select1</option>
     <option value="Component_1_b">Select2</option>
     <option value="Component_1_c">Select3</option>
     <option selected value="Component_1_d">Select4</option>
     <option value="Component_1_e">Select5</option>
</select>

Select1 Select2 Select3 Select4

Select1 Select2 Select3 Select4 Select5

Text Area TextArea

multiple line of text

<textarea name="thetext" rows="20" cols="80">
  First line of initial text.
  Second line of initial text.
</texteara>

First line of initial text. Second line of initial text. Template:HtmlForms

Simple GET

This is a simple example of an html form that has two text fields. One called FirstName and one called LastName. The two fields are sent via a get request to an aspx apge that displays the results.

http://iam.colum.edu/AIM/class8/simpleGet.html

Here is the simpleGet.aspx source for those that are interested

Simple POST

Same a the simple GET page except the page uses a POST instead of a get. Notice that the variables do not show up in the querysting to the action page. The variables here are sent in the http header. You may also notice there is a subtle change in the way that aspx read these varibales.

http://iam.colum.edu/AIM/class8/simplePost.html

Here is the simplePost.aspx source for those that are interested

All HTML input types http://iam.colum.edu/AIM/class8/htmlFormExample.html

PHP

From Wikipedia:

"PHP was originally designed as a small set of Perl scripts, followed by a rewritten set of CGI binaries written in the C programming language by the Danish-Canadian programmer Rasmus Lerdorf in 1994 to display his résumé and to collect certain data, such as how much traffic his page was receiving. "Personal Home Page Tools" was publicly released on June 8, 1995 after Lerdorf combined it with his own Form Interpreter to create PHP/FI.[1]

Zeev Suraski and Andi Gutmans, two Israeli developers at the Technion - Israel Institute of Technology, rewrote the parser in 1997 and formed the base of PHP 3, changing the language's name to the recursive initialism "PHP: Hypertext Preprocessor". The development team officially released PHP/FI 2 in November 1997 after months of beta testing. Public testing of PHP 3 began immediately and the official launch came in June 1998. Suraski and Gutmans then started a new rewrite of PHP's core, producing the Zend engine in 1999.[2] They also founded Zend Technologies in Ramat Gan, Israel, which is actively involved with PHP development.

In May 2000, PHP 4, powered by the Zend Engine 1.0, was released.

On July 13, 2004, PHP 5 was released, powered by Zend Engine II. PHP 5 includes new features such as PHP Data Objects and more performance enhancements taking advantage of the new engine."

Optional: PHP Part I

1.Backstory

2.acronym

3.structure

4.open-source (and what that means)

5.timeline: 1994, 1998 (3.0), 2000 (4) and 5

6.server-side vs. client-side

7.server-side processing

8.delimiters

9.functions

10.parameters

11.echo shortcut (<?=”output”;?>

12.variables (& datatypes – strings, numeric, and boolean) ex: $variableName

13.variable naming conventions (don'ts: starting with _ or numbers)

14.line termination (just like actionscript & javascript)

15.quotes – double and single(#4)

16.escape characters

     \n linefeed and \r carriage return

     \t horizontal tab

     \\ backslash

     \$ dollar sign

     \” double quote and \' single quote

17.numeric values (example)

18.concatenating multiple lines using .=

19.conditional statements

20.more functions(ucwords, strtoupper)

21.custom functions

Misc notes: editors to use, resources to explore, etc.

Code examples: one.php <php> <?php phpinfo(); ?> </php>

two.php <php> <?php $variable1 = "value of variable 1"; $variable2 = "value of variable 2 with $variable1 embedded"; echo $variable2; ?> </php>

three.php <php> <?php $variable1 = "value of variable 1"; $variable2 = "Value of variable 2 with $variable1 embedded"; echo $variable2; echo "
Double quotes are strange because you can express the value of a variable by just referencing the variable name in a string, "; echo "
and single quotes can be confusing when concatenating variable values."; $variable3 = 'single quote variable 3'; $variable4 = '
variable 4 with $variable3 referenced (but not displayed unless you concatenate it like so: '.$variable3.')'; echo $variable4; ?> </php>

four.php <php> <?php echo "To use a single quote in a double-quoted string is no problem, but it is in a single-quoted string."; echo "If you are using single quotes, you will need to escape the apostrophe 's otherwise you will get an error (try it)"; $characterName = 'Casper'; $ownedObject = "cat"; echo "

Where is $characterName's $ownedObject?"; echo '

Where is '.$characterName.'\'s '.$ownedObject.'?'; ?> </php>

five.php <php> <?php echo "Adding numeric values
"; $a = 2; $b = 3; $c = $a + $b; echo "

$a plus $b equals $c"; ?> </php>

six.php <php> <?php echo "Adding numeric values
"; $a = “2”; $b = “3”; $c = $a + $b; echo "

$a plus $b equals $c"; ?> </php>

seven.php <php> <?php $output = "There once was "; $output .= "a blue frog who "; $output .= "was very serious about"; $output .= "playing guitar. "; $output .= "He lived happily ever after. "; $output .= "The end. "; echo "

$output"; ?> </php>

eight.php <php> <?php $output = "There once was "; $output .= "a blue frog who "; $output .= "was very serious about"; $output .= "playing guitar. "; $output .= "He lived happily ever after. "; $output .= "The end. ";

//comments are just like in ActionScript & JavaScript $password = "hello"; //$password = "bye"; if ($password == "hello") { echo "

$output"; } elseif($password == "bye") { echo "Goodbye!"; }else { echo "yipes! there is no valid password!"; } ?> </php>

nine.php <php> <?php //character names $frogName = "Henry J. Frog"; $fishName = "sarina k. littlefish";

//printing out names as-is echo "
$frogName"; echo "
$fishName";

//using ucwords() $fishName = ucwords($fishName); echo "
Now using ucwords function:"; echo "
$fishName";

//using strtoupper() $fishName = strtoupper($fishName); echo "
Now using strtoupper function:"; echo "
$fishName"; ?> </php>

ten.php <php> <?php //custom function function sayHello($saying, $day) { $greeting = "On a day like today, $day, I always like to think $saying - don't you?"; return $greeting; } echo "Hello. ".sayHello("yipes!", "Thursday"); ?> </php>

Optional: PHP Part II

1.Looping

2.Conditionals expanded: switch

3.File include functions

Assignment: build a php site that uses custom functions to display header (standard XHTML code, meta tags, etc.,), navigation, and footer information. Pass a title to the function (see example).

Link to a stylesheet

Create four PHP pages, and one CSS file.

Code examples:

apples.php <php> <?php include 'library.php'; beginDocument(“Howdy”); ?>

library.php function beginDocument($title) { //abbreviated example... yours should have better markup! $output .= "<html><head><title>PHP page: $title</title>"; $output .= "</head><body bgcolor=\"#ffffff\">"; echo $output; }

looping.php <?php repeatAfterMe("hi", 3); //custom function function repeatAfterMe($saying, $amount) {

for($i=0; $i < $amount; $i++){ echo $saying; }

//Breakdown of the code: //$i = 0 for tracking number of iterations (start i at 0) //$i < $amount - condition to check for at each iteration //$i++ - i is incremented at each iteration }

?> </php>

switch.php <php> <?php

repeatAfterMe("cat"); //custom function function repeatAfterMe($animal) {

switch($animal){ case "monkey": echo "Yeah! A monkey!!"; break; case "parrot": echo "A parrot? A parrot?"; break; case "cat": echo "Woohoo! A cat! Yippee!"; break; case "none": echo "Awww...."; break; } }

?> </php>

Homework

AIM Assignment 6 Web Forms

Reading

ZEN: Chapter 4 (pages 130-147), Chapter 5 (pages 161-197)

Links

php

http://php.net
http://www.w3schools.com/php/default.asp
http://www.w3schools.com/html/html_forms.asp

C#

NOTE: Choose C# in the upper right hand corner dropdown for the following links

http://www.dotnetjunkies.com/quickstart/aspplus/doc/webformsintro.aspx Introducing Web Forms

http://www.dotnetjunkies.com/quickstart/aspplus/doc/webserverctrls.aspx Working with Server Controls

http://www.dotnetjunkies.com/quickstart/aspplus/doc/webvalidation.aspx Server Control Form Validation

http://www.dotnetjunkies.com/quickstart/aspplus/doc/webpagelets.aspx Web Forms User Controls

http://www.dotnetjunkies.com/quickstart/howto/doc/Languages.aspx C# Language Support