AIM Class8

esse quam videri
Jump to: navigation, search

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

Input Types

Input type from w3c


creates a text entry box
<input type="Text" id="txtText1" />


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" />


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

chkbxTest1 chkbxTest2


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


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" />


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" />


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


Graphical submit button. Should provide alt tag
<input type="Image" src="msdn.jpg" Name="ImageSubmit" id="ImageSubmit" />


hah ha can't see this
<input type="Hidden"  Name="Hidden1" id="Hidden1" value="Hide me" />


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 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>

Text Area TextArea

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


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.

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.

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

All HTML input types


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



3.structure (and what that means)

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

6.server-side vs. client-side

7.server-side processing




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 "

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

//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


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>


AIM Assignment 6 Web Forms


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




NOTE: Choose C# in the upper right hand corner dropdown for the following links Introducing Web Forms Working with Server Controls Server Control Form Validation Web Forms User Controls C# Language Support