LAB 07

Php

Basic Forms (submit data via GET)

1. Use the following code to build a simple form.

<p>Guessing game...</p>
<form>
<p><label for="guess">Input Guess</label>
<input type="text" name="guess" size="40" id="guess"/></p>
<input type="submit"/>
</form>

<pre>
$_GET:
<?php
print_r($_GET);
?>
</pre>

2. Since the input does not go through sanity check, you should be able to type your
name in the text area. Type in your name and screenshot the output.
Basic Forms (submit data via POST)

1. By using the php code given in the previous basic form, change the method to submit
data from GET to POST.

<p>Guessing game...</p>
<form method="post">
<p><label for="guess">Input Guess</label>
<input type="text" name="guess" size="40" id="guess"/></p>
<input type="submit"/>
</form>
<pre>
$_POST:
<?php
print_r($_POST);
?>
$_GET:
<?php
print_r($_GET);
?>
</pre>

2. Print out the super global variable $_POST. Insert your name into the text area, and
submit it. You should observe your name for the variable $_POST.
Exploring Various Form Input Types

1. The following code will introduce various kind of form input types. Go through the
following code.

<p>Many field types...</p>

<form method="post" action="more.php">
<p><label for="inp01">Account:</label>
<input type="text" name="account" id="inp01"
size="40" ></p>
<p><label for="inp02">Password:</label>
<input type="password" name="pw" id="inp02" size="40" ></p>
<p><label for="inp03">Nick Name:</label>
<input type="text" name="nick" id="inp03" size="40" ></p>
<p>Preferred Time:<br/>
<input type="radio" name="when" value="am">AM<br>
<input type="radio" name="when" value="pm" checked>PM</p>
<p>Classes taken:<br/>
<input type="checkbox" name="class1" value="si502"
checked>
SI502 - Networked Tech<br>
<input type="checkbox" name="class2" value="si539">
SI539 - App Engine<br>
<input type="checkbox" name="class3">
SI543 - Java<br>
</p>
<p><label for="inp06">Which soda:
<select name="soda" id="inp06">
<option value="0">-- Please Select --</option>
<option value="1">Coke</option>
<option value="2">Pepsi</option>
<option value="3">Mountain Dew</option>
<option value="4">Orange Juice</option>
<option value="5">Lemonade</option>
</select>
</p>
<p><label for="inp07">Which snack:
<select name="snack" id="inp07">
<option value="">-- Please Select --</option>
<option value="chips">Chips</option>
<option value="peanuts" selected>Peanuts</option>
<option value="cookie">Cookie</option>
</select>
</p>
<p><label for="inp08">Tell us about yourself:<br/>
<textarea rows="10" cols="40" id="inp08" name="about">
I love building web sites in PHP and MySQL.
</textarea></p>
<p><label for="inp09">Which are awesome?<br/>
<select multiple="multiple" name="code[]" id="inp09">
<option value="python">Python</option>
<option value="css">CSS</option>
<option value="html">HTML</option>
<option value="php">PHP</option>
</select>
<p>
<input type="submit" name="dopost" value="Submit"/>
<input type="button"
onclick="location.href='http://www.wa4e.com/'; return
false;"
value="Escape">
</p>
</form>
<pre>
$_POST:
<?php
print_r($_POST);
?>
</pre>

2. Task
- Add one new radio button – male/female
- Add one new input type for email
Exploring different HTML5 input types

1. The following code will introduce various input type. Go through the following code.

Select your favorite color:

<input type="color" name="favcolor" value="#0000ff"><br/>
Birthday:
<input type="date" name="bday" value="2013-09-02"><br/>
E-mail:
<input type="email" name="email"><br/>
Quantity (between 1 and 5):
<input type="number" name="quantity"
min="1" max="5"><br/>
Add your homepage:
<input type="url" name="homepage"><br>
Transportation:
<input type="flying" name="saucer"><br>

2. Apart from the input type above, try out at least 2 new input type.
- Reference: https://www.w3schools.com/html/html_form_input_types.asp
Persisting Form Data

1. After submitting a form (in the case whereby we would like to retain the previous
form data), we will use the following code to retrieve the previous form data.
- Note: Both of the code below have the same meaning.
- “<?= $oldguess ?>
- <?php echo($oldguess); ?>”

<?php
$oldguess = isset($_POST['guess']) ? $_POST['guess'] : '';
?>
<p>Guessing game...</p>
<form method="post">
<p><label for="guess">Input Guess</label>
<input type="text" name="guess" id="guess"
size="40" value="<?= $oldguess ?>" /></p>
<input type="submit"/>
</form>
<pre>
$_POST:
<?php
print_r($_POST);
?>
</pre>

2. As the code did not go through any sanity checking, we can perform html injection.
(This is very bad coding practice, and may lead to severe security
loopholes/vulnerability)

3. By inserting the following value into the text box "><b>DIE DIE</b> , observe
that the html code will be present, and the previous post value will not be available in
the textbox.

4. Patch the code by using htmlentities function. Remember to patch both

print_r($_POST) and $oldguess. Screenshot the output
<input type="text" name="guess" id="guess"
size="40" value="<?= htmlentities($oldguess) ?>"/></p>

echo htmlentities(print_r($_POST, true));

https://www.php.net/manual/en/function.print-r.php
return (true)
If you would like to capture the output of print_r(), use the return parameter. When this
parameter is set to TRUE, print_r() will return the information rather than print it.
Input Data Validation

1. The following code will check whether the parameters is empty, length of parameters,
before describing whether the value is too high or too low.
<?php
if ( ! isset($_POST['guess']) ) {
echo("Missing guess parameter");
} else if ( strlen($_POST['guess']) < 1 ) {
echo("Your guess is too short");
} else if ( ! is_numeric($_POST['guess']) ) {
echo("Your guess is not a number");
} else if ( $_POST['guess'] < 42 ) {
echo("Your guess is too low");
} else if ( $_POST['guess'] > 42 ) {
echo("Your guess is too high");
} else {
echo("Congratulations - You are right");
}
?>

2. Add an additional sanity check, to check whether the input is a number. Input “abc”
into the text box, and you should observe “your guess is not a number” on your
browser.

Note: In this exercise, we have received all the input via POST request. However, the entire
exercise should also work properly if you're using GET request. Just change all the $_POST
to $_GET.
Convention Model View Controller (MVC)

1. Modify the code that you have created in this lab to fulfil the convention model view
controller.

2. In MVC, the php code should be located abundantly at the top part, while the output
(html) is located at the bottom part of the code.
- This is just a suggestion, not a rule.

<?php
$oldguess = isset($_POST['guess']) ? $_POST['guess'] : '';

if ( ! isset($_POST['guess']) ) {
$message = ("Missing guess parameter");
} else if ( strlen($_POST['guess']) < 1 ) {
$message = ("Your guess is too short");
} else if ( ! is_numeric($_POST['guess']) ) {
$message =("Your guess is not a number");
} else if ( $_POST['guess'] < 42 ) {
$message =("Your guess is too low");
} else if ( $_POST['guess'] > 42 ) {
$message =("Your guess is too high");
} else {
$message =("Congratulations - You are right");
}
?>

<html>
<head>
<title>A Guessing game</title>
</head>
<body style="font-family: sans-serif;">

<p>Guessing game...</p>
<form method="post">
<p><label for="guess">Input Guess</label>
<input type="text" name="guess" size="40" id="guess"
value="<?= htmlentities($oldguess) ?>"></p>
<input type="submit"/>
</form>

<?php
if ( $message !== false ) {
echo("<p>$message</p>\n");
 }
?>

</body>
</html>