First, carefully read
http://www.w3.org/TR/html401/interact/forms.html and ask any questions you have. Here is a very simple form:
<html>
<head>
<title>A very simple form</title>
</head>
<body>
<form action="display.php" method="post">
<input name="string">
<input type="submit">
</form>
</body>
And here is a very simple php page to display the results:
<html>
<head>
<title>Display the result of a form submission</title>
</head>
<body>
The contents of the form submission are:
<?php
print_r ($_REQUEST);
?>
</form>
</body>
Save these two files and get them working on your machine. Given this, we can create a page for a simple calculator:
<html>
<head>
<title>A Simple Calculator</title>
</head>
<body>
<form action="calculator.php" method="post">
<input name="number1">
<select name="operator">
<option selected value="plus">+</OPTION>
<option value="minus">-</OPTION>
<option value="divided by">/</OPTION>
<option value="times">*</OPTION>
</select>
<input name="number2">
<input type="submit">
</form>
</body>
And the corresponding code to make it work:
<html>
<head>
<title>Calculator Results</title>
</head>
<body>
<?php
$number1 = (int) $_REQUEST["number1"];
$number2 = (int) $_REQUEST["number2"];
$operator = $_REQUEST["operator"];
echo $number1 . " " . $operator . " " . $number2 . " equals ";
if ($operator == "plus")
echo $number1 + $number2;
else if ($operator == "minus")
echo $number1 - $number2;
else if ($operator == "times")
echo $number1 * $number2;
else if ($operator == "divided by")
echo $number1 / $number2;
?>
</form>
</body>
Save these two files and get them working on your machine. As PHP is embedded in HTML we can have just one form to both create the form and evaluate it. This time, we'll submit the page to itself:
<html>
<head>
<title>A Simple Calculator</title>
</head>
<body>
<form action="calculator2.php" method="post">
<input name="number1">
<select name="operator">
<option selected value="plus">+</OPTION>
<option value="minus">-</OPTION>
<option value="divided by">/</OPTION>
<option value="times">*</OPTION>
</select>
<input name="number2">
<input type="submit">
</form>
<?php
$number1 = (int) $_REQUEST["number1"];
$number2 = (int) $_REQUEST["number2"];
$operator = $_REQUEST["operator"];
if ($operator == "")
$operator = "plus";
echo $number1 . " " . $operator . " " . $number2 . " equals ";
if ($operator == "plus")
echo $number1 + $number2;
else if ($operator == "minus")
echo $number1 - $number2;
else if ($operator == "times")
echo $number1 * $number2;
else if ($operator == "divided by")
echo $number1 / $number2;
?>
</body>
</html>
Save this file and get it working on your machine. Now, go back and redo the JavaScript coffee assignment first as two pages, then as one.
Things to consider when creating web applications.
- What data are needed?
- What operations are done on the data?
- What logic is needed to make sure the operations work on all possible data and create the correct results?