meandeviation.com > learn php > add it up

add it up - managing variables in php

This example and exercise is to help you understand the idea of 'variables' in PHP ... and incidentally in programming in general.

You have already seen variables - the way you can use $name in a PHP 'action' script to refer to fields in the form (or more precisely the "&name=..." part of the URL). However, this is a very special kind of variable which has been pre-defined by PHP. You can in fact create your own variables. The 'add it up' scroipt is an example.

As with the 'try it yourself' example there are two files, a web form and a PHP script:

add-it-up.html - the form
do-add-it-up.php - the php script that is the form's 'action'

As with the previous example DO NOT click the second link but instead download the file to your own machine to examine

Try going to the form and entering two numbers and then pressing the "add it up!" button.

do it on your site

Download both files to your disk (use "download link to disk" in IE or similar save option in other browser).

As with the 'try it yourself' script, the PHP file will come down under the name "do-add-it-up.phps" with ".phps" at the end instead of ".php". You will need to change this to ".php".

Now try uploading them both to your own site and test them there.

If you have problems see the corresponding section of the try-it-yourself documentation.

looking at the add it upform

Look at the <form> part of the HTML source of add-it-up.html

<form method="GET" action="do-add-it-up.php">
  <p>First number:
    <input type="text" name="first">
  </p>
  <p>Second number:
    <input type="text" name="second">
  </p>
  <p>
    <input type="submit" name="Submit" value="add it up!">
  </p>
</form>

Again it is using a relative URL for the 'action' attribute so that when you copy it to your site you do not need to change the URL.

The two fields to enter the numbers are familiar. they are in fact just 'text' fields, so the user could enter anything, not just a number. There are ways to validate fields like this either in javascript within the user's browser or using PHP when the form is processed using the "do-add-it-up" script.

The only new thing in this form is that the 'submit' buttin has a 'value' attribute so that the label on the button says "add it up!" rather than simply "Submit". Note the difference between this and the 'name' attribute. When you press the button look at the URL at the top of the browser. It will end:

do-add-it-up.php?first=34&second=23&Submit=add+it+up%21

Notice the last part of this "&Submit=add+it+up%21". The "Submit" part is the 'name' of the <input> tag, the "add+it+up%21" is the 'value'. You could give a 'submit' button a 'name' attribute other than "Submit" which would change the "Submit=" part of the URL and hence the name of the variable in PHP containing it (which you haven't needed to use yet).

Try editing one of your "try it yourself" forms to give the submit button different naems and values to see the effect on the page and the URL.

Finally looking at the generated URL notice the way "add it up!" was converted to "add+it+up%21" with the spaces becoming "+"s and the "!" becoming "%21". This 'URL encoding' will be reversed by PHP when it puts the value into a variable.

Apart from these things the form is very simple, so let's look at the script that runs.

looking at the php

Look at the PHP source of do-add-it-up.php

As in try-it-yourself.php, the file largely contains ordinary HTML, but this time before the HTML starts there is some PHP code:

<?php
   $first = $_GET['first'];
   $second = $_GET['second'];
   $answer = $first + $second;
?>
<html>
<head>
<title>I can add up!</title>
....

The two 'variables' $first and $second are obtained from $_GET, which in turn was extracted from the form fields. These variables are used lower down the page:

<table>
<tr><td></td><td align=right><?php echo $first; ?></td></tr>
<tr><td>+</td><td align=right><?php echo $second; ?></td></tr>
<tr><td></td><td align=right>------</td></tr>
<tr><td></td><td align=right><?php echo $answer; ?></td></tr>
</table>

However, note that this table that creates the 'sum' also includes the additional variable $answer that does not come from the form fields.

The bit of PHP at the top of the page in the <?php ... ?> tags creates this variable and gives it a value "$first + $second".

This does exactly what it looks like and adds up the numbers in $first and $second and puts the result in the new variable $answer.

As we noted above, the fields could contain anything the user has entered, not just numbers and PHP 'trys' its best to do something with non-numnbers (try using the form and putting in values that are not numbers to see). However, a robust web interface should do something more. After experimenting your self below, look at 'robust add it up' which shows you how to check this sort of thing in PHP and also introduces new PHP features.

try something yourself

OK, now it's your turn. Try the following:

add three: a version that adds up three numbers

temperature converter: a form with a single field "centigrade" and then shows the corresponding temperature in fahrenheit.
You will need a formula such as:
$fahrenheit = (9 * $centigrade ) / 5 + 32
Note the use of '*' as multiplication and '/' as divide. If you haven't used a programming language before then you may have seen this in a spreadsheet.

http://www.meandeviation.com/tutorials/learnphp/about-add-it-up.html