LOGO Home About Service Contact

Web Information System

Lecture 4: Web form

Chapter 7 and 8
Dr. Rasha Montaser
 LOGO Home About Service Contact

Week 4 Outcomes
• Create HTML forms
• Access form data from a script
• Construct algorithms using selection and
repetition structures.
 LOGO Home About Service Contact

Web Forms
• Basic HTML-based web-form elements
– Fieldsets
– Labels
– Text boxes
– Text areas
– Buttons
– Radio buttons
– Check boxes
– Combo boxes

3
 LOGO Home About Service Contact

Web Forms
• Basic HTML-based web-form elements
– Fieldsets
– Labels
– Text boxes
– Text areas
– Buttons
– Radio buttons
– Check boxes
– Combo boxes

4
 LOGO Home About Service Contact

Web Forms
<form action='formelements.php' method='post'>
<fieldset>
<legend>Personal information</legend>
<label for='firstName'>First Name</label>
<input type='text' id='firstName' name='firstName' />
<label for='lastName'>Last Name</label>
<input type='text' id='lastName' name='lastName' />
<label for='comments'>Comments</label>
<textarea id='comments' name='comments' rows='5'
cols='40'></textarea>

5
 LOGO Home About Service Contact

Web Forms
<form action='formelements.php' method='post'>
<fieldset>
<legend>Personal information</legend>
<label for='firstName'>First Name</label>
<input type='text' id='firstName' naAmney='fiinrsptu
Nta, m
teetextarea,
x' t/a
>rea, select, etc.,
Any
<label for='lastName'>Last Name</label> input, select,
<input type='text' id='lastName' naw miteh
etc., =i'ln ttN
haemfeo' the
within
as r/>m will
formbewill be
s<u/lbabmeli>tted • action: script to
<label for='comments'>Commentssubmitted
<textarea id='comments' name='c•oma mcetniotsn':ro
swcsr=ip'5•t' to receiveget
data
cols='40'></textarea>
receive data method: or
•post
method: get or post

6
 LOGO Home About Service Contact

Web Forms
<form action='formelements.php' method='post'>
<fieldset>
<legend>Personal information</legend>
<label for='firstName'>First Name</label>
<input type='text' id='firstName' name='firstName' />
<label for='lastName'>Last Name</label>
<input type='text' id='lastName' name='lastName' />
<label for='comments'>Comments</label>
<textarfefieldset
ald
ie ids=e'ctog
mrm
oe
unptss' nraemrelated
groups laet=e'cdomfimeld
nts'
s rows='5'
efields
cols='40'></textarea>
graphically
graphically (no
(no effect
effect on
onwhat
what
the
the server
server receives).
receives). legend
legend
describes
describes the
the fieldset.
fieldset.

7
 LOGO Home About Service Contact

Example
 LOGO Home About Service Contact

Web Forms
<form action='formelements.php' method='post'>
<fieldset>
<legend>Personal information</legend>
<label for='firstName'>First Name</label>
<input type='text' id='firstName' name='firstName' />
<label for='lastName'>Last Name</label>
<input type='text' id='lastName' name='lastName' />
<label for='comments'>Comments</label>
<textarea id='comments' name='comments' rows='5'
Labe co
Labels lsls=aare
'4re
0'>c<l/itcekxtatra
click erag
>ets. Clicking
targets. Clicking
aa label
label activates
activates the
the input
input control
(associated by for='someid'
control (associated by in the
label and id='someid'
for='someid' in theand
in the label input
control).
id='someid' in the input control).

9
 LOGO Home About Service Contact

Web Forms
<form action='formelements.php' method='post'>
<fieldset>
<legend>Personal information</legend>
<label for='firstName'>First Name</label>
<input type='text' id='firstName' name='firstName' />
<label for='lastName'>Last Name</label>
<input type='text' id='lastName' name='lastName' />
<label for='comments'>Comments</label>
<textarea id='comments' name='comments' rows='5'
cols='40'></textarea>
PHP receives these data
into the $_GET, $_POST,
or $_REQUEST
superglobals according
to the name attribute.
1
0
 LOGO Home About Service Contact

Web Forms
<form action='formelements.php' method='post'>
<fieldset>
<legend>Personal information</legend>
<label for='firstName'>First Name</label>
<input type='text' id='firstName' name='firstName' />
<label for='lastName'>Last Name</label>
<input type='text' id='lastName' name='lastName' />
<label for='comments'>Comments</label>
<textarea id='comments' name='comments' rows='5'
cols='40'></textarea>
type='text' produces
a single-line text box
for input.

1
1
 LOGO Home About Service Contact

Web Forms
For
For large,
large, multi-line
multi-line
<form action='formelements.php' method='pio nsp ut, use
t'>
input, use aa textarea.
textarea.
<fieldset> Any text between the
<legend>Personal information</legend> Any text between the
<label for='firstName'>First Name</label>begin/end
begin/end tags tags is
is put
put
<input type='text' id='firstName' name='firisinside
ntNsaidmee' t/the
h
> e text
text area.
area.
<label for='lastName'>Last Name</label>
<input type='text' id='lastName' name='lastName' />
<label for='comments'>Comments</label>
<textarea id='comments' name='comments' rows='5'
cols='40'></textarea>

1
2
 LOGO Home About Service Contact

Web Forms
<label for='inquiryType'>Inquiry Type</label>
<select id='inquiryType' name='inquiryType'>
<option value='error'>Choose an option</option>
<option value='prodInfo'>Product information</option>
<option value='custSvc'>Customer service</option>
<option value='returns'>Returns</option>
<option value='other'>Other</option>
</select>
</fieldset>
Each option appears on
its own line, value is what
is submitted to the server
for the name specified in
the select.

1
3
 LOGO Home About Service Contact

Web Forms
<fieldset>
<legend>Demographic information</legend>
<fieldset>
<legend>Gender</legend>
<input type='radio' name='gender' id='male' value='M' />
<label for='male'>Male</label>
<input type='radio' name='gender' id='female' value='F' />
<label for='female'>Female</label>
</fieldset>

For type=radio, you use

different ids, but the same
name. Only the selected one
within the name group will be
submitted.

1
4
 LOGO Home About Service Contact

Web Forms
<fieldset>
<legend>Interests</legend>
<input type='checkbox' name='interests[]' id='games' value='games' />
<label for='games'>Games</label>
<input type='checkbox' name='interests[]' id='reading' value='reading' />
<label for='reading'>Reading</label>
<input type='checkbox' name='interests[]' id='gardening' value='gardening' />
<label for='gardening'>Gardening</label>
<input type='checkbox' name='interests[]' id='sports' value='sports' />
</fieldset>
</fieldset>
<input type='submit' value='Submit' />
<input type='reset' value='Clear' />
</form>
1
5
 LOGO Home About Service Contact

Web Forms
<fieldset>
<legend>Interests</legend>
<input type='checkbox' name='interests[]' id='games' value='games' />
<label for='games'>Games</label>
<input type='checkbox' name='interests[]' id='reading' value='reading' />
<label for='reading'>Reading</label>
<input type='checkbox' name='interests[]' id='gardening' value='gardening' />
<label for='gardening'>Gardening</labFeol>r type=checkbox,
For
type=checkbox, you use
you use different
d i
<input type='checkbox' name='interestids,ffe
s[]' idren t
='sthe
but
ids ,
porsame b ut te='sspa
he
ts' valuname. mse' name
ort
The /n> ame.
</fieldset> The name
appears appears
as an as an[]).
array (using array
This
</fieldset> (using []).
creates This on
an array creates an array on
the server.
<input type='submit' value='Submit' /> the server.
<input type='reset' value='Clear' />
</form>

1
6
LOGO Home About Service Contact

Web Forms
<fieldset>
<legend>Interests</legend>
<input type='checkbox' name='interests[]' id='games' value='games' />
<label for='games'>Games</label>
<input type='checkbox' name='interests[]' id='reading' value='reading' />
<label for='reading'>Reading</labA
eln
> input with type=submit creates a
An input with type=submit creates a
<input type='checkbox' name='intebreustttobottom
s[n]', id
a=
s 'gda
ord
ee
sas
nrn
ieg
s'evtdoes
.alue='gardening'
resets />
<label for='gardening'>Gardening</label>
<input type='checkbox' name='interests[]' id='sports' value='sports' />
</fieldset>
</fieldset>
<input type='submit' value='Submit' />
<input type='reset' value='Clear' />
</form>

1
7
 LOGO Home About Service Contact

PHP Scripts for Form Data

• Can use $_GET, $_POST, or
$_REQUEST arrays to access form data.
– All are arrays with the key equal to the name
given to the form element.
– The values are strings from the data in the
form.
– Multiple-select form elements have array
values
• Multiple select combo-boxes
• Checkboxes

1
8
 LOGO Home About Service Contact

Textbox, password, hidden field

 LOGO Home About Service Contact

Cont.
 LOGO Home About Service Contact

Radio button
 LOGO Home About Service Contact

Cont.
 LOGO Home About Service Contact

Check box (by element)

Check for each name and returns true/false

 LOGO Home About Service Contact

Check box (by array)

 LOGO Home About Service Contact

Cont.
The loop returns only the
selected items

If no element will be
selected the array name
will not be sent in the
$GET or $POST array
 LOGO Home About Service Contact

Drop down list

 LOGO Home About Service Contact

List box
• Displays more than one item at a time and can scroll.
• User selection
– Only one item
– More than one item
 LOGO Home About Service Contact

List box (select only one item)

Displays 3 items at a time

 LOGO Home About Service Contact

List box selects multiple items

 LOGO Home About Service Contact

Text area
 LOGO Home About Service Contact

Cont.
 LOGO Home About Service Contact

Cont.
 LOGO Home About Service Contact

How to Display special characters on

web page
• Special characters function

• Line break function

 LOGO Home About Service Contact

Special characters function

 LOGO Home About Service Contact

Example
 LOGO Home About Service Contact

Line break function

 LOGO Home About Service Contact

Example
 LOGO Home About Service Contact

Display data
 LOGO Home About Service Contact

Control Statements
• Control statements alter the flow of a
program from straight line to conditional or
repeated
– If/else statements
– Switch statements
– For loops
– Foreach loops
– While loops
– Do/while loops

3
9
 LOGO Home About Service Contact

if/else Statements
• Keywords if and else implement
conditional execution
false true
<condition>

if (<condition>) {
<statements> <statements>

40
 LOGO Home About Service Contact

if/else Statements
• Keywords if and else implement
conditional execution
false true
<condition>

if (<condition>) {
<statements> <statements>

}
condition should be a
boolean expression
(after type juggling).

41
 LOGO Home About Service Contact

if/else Statements
• Keywords if and else implement
conditional execution

false true
if (<condition>) { <condition>

<statements>
} else { <statements> <statements>

<statements>
}

42
 LOGO Home About Service Contact

switch Statements
• Switch statements
– A shortcut to compare many values and
conditionally execute code based strictly on
equality.
• Good for a limited number of enumerable options.
• Bad for testing ranges of values, deciding between
two mutually exclusive options.

43
 LOGO Home About Service Contact

Exercise
• Switch statements – suitability
Example If/else or switch?
Determining point values of letter
grades.
Determining letter grades from a
percentage.
Determining insurance rates based on
age.
Determine the name of a month
based on a month number.
Determine form letter salutation
based on gender.

44
 LOGO Home About Service Contact

switch Statements
• Switch statements Evaluate
<expression>

Match Execute
Yes
<value1>? <statements1>

switch (<expression>) {
No
case <value1>:
<statements1>; Match
Yes
Execute
<value2>? <statements2>
break;
case <value2>:
<statements2>; No

break;
//...
What if “break”
Match Execute

case <valueN>: is missing? <valueN>?

Yes
<statementsN>

<statements2>; No

break;
default: Execute default
<statements>

<statements>;
break;
}

45
 LOGO Home About Service Contact

switch Statements
• Switch statements Evaluate
<expression>

Match Execute
Yes
<value1>? <statements1>

switch (<expression>) {
No
case <value1>:
<statements1>; Match
Yes
Execute
<value2>? <statements2>

case <value2>:
<statements2>; No

break;
//...
Execution “falls
through” to the
Match Execute
Yes
<valueN>? <statementsN>
case <valueN>:
<statements2>; next case! No

break;
default: Execute default
<statements>

<statements>;
break;
}

46
 LOGO Home About Service Contact

Repetition
• Four parts to every loop
– Initialization
– Continuation condition
– Body
– Update

35
 LOGO Home About Service Contact

Repetition
• Pre-test loops Initialization

– Condition is evaluated
before the body of the Condition
False

loop is executed. True

– Key idea: body may not Body

ever execute.
Update

48
 LOGO Home About Service Contact

Repetition
• Post-test loops Initialization

– Condition is evaluated
after the body of the Body

loop is executed.
– Key idea: body always Update

executes at least once

True
Condition

False

49
 LOGO Home About Service Contact

while loops
• While loops:
– Pre-test loop syntax

while (condition) {
body_statements;
} All that is really
required. But, which
of the four parts are
missing?

50
 LOGO Home About Service Contact

while loops
• While loops:
– Pre-test loop syntax

initialization;
while (condition) {
body_statements;
update_statement;
}

51
 LOGO Home About Service Contact

for loops
• For loops:
– Pre-test loop syntax

for (initialization; condition; update) {

body_statements;
}

52
 LOGO Home About Service Contact

for loops
• For loops:
– Pre-test loop syntax

for (initialization; condition; update) {

body_statements;
}
Equivalent to:
initialization;
while (condition) {
body_statements;
update;
}
53
 LOGO Home About Service Contact

for vs. while loops

• When to use for vs. while
– Equivalent at runtime
– while loops are a little more flexible (i.e. the
update step can be conditional or in the
middle of the body)
– for loops are generally used for counting (i.e.
the bounds are known)

54
 LOGO Home About Service Contact

do…while loops
• do…while loops:
– Post-test loop syntax

do { initialization;
body_statements; do {
} while (condition); body_statements;
update;
} while (condition);

55
 LOGO Home About Service Contact

do…while loops
• do…while loops:
– Post-test loop syntax

do { initialization;
body_statements; do {
} while (condition); body_statements;
update;
} while (condition);

Required elements. All 4 elements.

56
 LOGO Home About Service Contact

do…while loops
• Post-test loops
– Body always guaranteed to execute at least
once.
– But, we could still copy-and-paste the body
above a pre-test loop and achieve the same
results.

57
 LOGO Home About Service Contact

foreach/as loops
• Specifically designed to solve the problem
of iterating through every element of an
array.
foreach ($array_var as $value) {
do_something;
}

foreach ($array_var as $key => $value) {

do_something;
}

5
8
 LOGO Home About Service Contact

foreach/as loops
• Specifically designed to solve the problem
of iterating through every element of an
array.
foreach ($array_var as $value) {
do_something;
} Assigns values from the
array into $value each
trip through the loop.
foreach ($array_var as $key => $value) {
do_something;
}

5
9
 LOGO Home About Service Contact

foreach/as loops
• Specifically designed to solve the problem
of iterating through every element of an
array.
Assigns the index
Assigns the indexinto into$key$keyand
and floure$array_each
the vainto
the value ain
chto($$avraraluye
_vtrip
eaar cahs $value) {
trip through
through tdhoe_slooompe.thing;
the loop
}

foreach ($array_var as $key => $value) {

do_something;
}

6
0
 LOGO Home About Service Contact

foreach/as loops
• Example: Prints:
apple
$alphabet = array(
'a' => 'apple',
banana
'b' => 'banana', carrot
'c' => 'carrot'
);

foreach ($alphabet as $value) {

print "$value<br />";
}

foreach ($alphabet as $key => $value) {

print "$key is for $value<br />";
}

6
1
 LOGO Home About Service Contact

foreach/as loops
• Example:
$alphabet = array(
'a' => 'apple',
'b' => 'banana',
Prints:
'c' => 'carrot' a is for apple
); b is for banana
foreach ($alphabet as $value) {
c is for carrot
print "$value<br />";
}

foreach ($alphabet as $key => $value) {

print "$key is for $value<br />";
}

6
2
 LOGO Home About Service Contact

foreach/as loops
• Example:
$alphabet = array(
'a' => 'apple',
'b' => 'banana',
If $alphabet is not an associative
'c' => 'carrot'
);
array, the keys will be numeric,
numbered [0, n-1], where n is the
foreach ($alphabet as $value) { length of the array as determined
print "$value<br />"; by sizeof() or count().
}

foreach ($alphabet as $key => $value) {

print "$key is for $value<br />";
}

6
3
 LOGO Home About Service Contact

foreach/as loops
• Ex: roll 2 dice many times. Find probabilities.
function probability($count=10000) {
$rolls = array();
for ($i = 2; $i <= 12; ++$i) {
$rolls[$i] = 0;
}
for ($i = 0; $i < $count; ++$i) {
$die1 = mt_rand(1, 6);
$die2 = mt_rand(1, 6);
$rolls[$die1 + $die2]++;
}
foreach ($rolls as $die => $times) {
print "$die was rolled $times times, for a
probability of ". $times/$count * 100 . "%.";
}
}
6
4
 LOGO Home About Service Contact

foreach/as loops
• Ex: roll 2 dice many times. Find
probabilities.
function probability($coun t=10000) {
$rolls = array();
for ($i = 2; $i <= 12; ++$ i) {
$rolls[$i] = 0;
}
for ($i = 0; $i < $count; + +$i) {
$die1 = mt_rand(1, 6 );
Real
Realpr $o
dibe2ab = im
probability litty_raonof
fd(1, 6) ;
rolling$aaro7lls
rolling 7i[s$d
is6ie1
6inin+ 3$d
6ie, 2]+ +;
36,
}
or 16 .67%.($rolls as $die => $times) {
or 16.67$
foreach
print "$die was rolled $times times, for a
probability of ". $times/$count * 100 . "%.";
}
}
6
5
 LOGO Home About Service Contact

Upcoming Deadlines
• Readings for next week
– Chapters 11 and 12 in PHP and MySQL
• Assignments
– Questions in Lab4 from the manual.
• Next week:
– Cookies, sessions and arrays