Lesson 5 - Associative arrays in PHP and submitting forms
In the previous exercise, Solved tasks for PHP lesson 1-4, we've practiced our knowledge from previous lessons.
In the previous lesson, Solved tasks for PHP lesson 1-4, you learned to use various string declarations and were introduced to arrays. In today's lesson, we're going to expand your knowledge of arrays and use it to create a web calculator. Yes, we're finally going to react to user input!
Associative arrays
The second type of arrays in PHP is called associative. An associative array works just like an indexed array. However, associative indexes are not only numeric, they're also strings. We refer to associative array indexes as keys.
We declare an associative array just like an indexed array, the main
difference being that we have to define their keys as well. We use a double
arrow (=>
) operator to do just that:
$favoriteThings = array( 'homer' => 'donut', 'marge' => 'oven', 'bart' => 'slingshot', 'lisa' => 'book', 'maggie' => 'doll', );
We formatted the array declaration in multiple lines to improve readability,
but we could write it on a single line as well. There are 5 values in the array:
'donut'
, 'oven'
,
'slingshot'
, 'book'
,
'doll'
. Each value belongs to a key ('homer'
,
'marge'
, 'bart'
, 'lisa'
,
'maggie'
). We use arrows to associate each value to its key and
separate them with commas. I left a comma after the last value as well so that I
wouldn't forget to add it later on (doing so is a good practice).
By the way, notice that when we create a variable whose name consists of two or more words, we use the camelCase notation. The first letter is lowercase and the first letter of each following word is uppercase. People use various notations to write PHP code but this one is, without a doubt, the best.
We can work with associative arrays in the same as we did previously with indexed arrays:
{PHP}
$favoriteThings = array(
'homer' => 'donut',
'marge' => 'oven',
'bart' => 'slingshot',
'lisa' => 'book',
'maggie' => 'doll',
);
echo('Homer likes: ' . $favoriteThings['homer']);
{/PHP}
Instead of writing $favoriteThings[0]
, we use the string key.
The main advantage to using associative arrays is better readability. We
actually see what we're getting off an array. Whereas with numeric indexes, we
may not even know what the value is.
Every indexed array can be declared as associative using the following format:
{PHP}
$backpack = array('rope', 'flashlight', 'wallet');
$backpack2 = array(
0 => 'rope',
1 => 'flashlight',
2 => 'wallet',
);
print_r($backpack);
print_r($backpack2);
{/PHP}
Based on the output, we can see that the $backpack
and
$backpack2
arrays are completely identical. Internally, PHP only
provides associative arrays. When we create an indexed array, what it does is
create an associative array and generate keys for its values based off of their
order.
*Note: In most programming languages, the array size is limited and once we create it, we're not able to add any more elements. However, PHP does not have limitations on what you can do with an array.
Processing forms in PHP
Now that that's all said and done, we can get to the good stuff! Applications that react to user input. We'll start out by programming a simple calculator.
Web applications can accept input through two methods - GET
and
POST
. Although the HTTP protocol supports other methods, REST, most
web browsers don't support them. The PHP script will always receive the data in
an associative array which is named in the same way as the method through which
the output has been derived.
Let's create a folder for our new application, I'll name mine
Calculator/
.
The GET
method
Create a calculator.php
file. To pass data to this script using
the GET
method, we'll add them to the URL using a query string. A
query string starts with a question-mark (?
) and the individual
parameters are separated with ampersands (&
). A
"="
character must also be included between each parameter name and
its value.
If we type this in the URL address:
localhost/calculator/calculator.php?number1=10&number2=20
It would be the equivalent of passing two variables to the script using the
GET
method. The first one is named number1
with a
value of 10
, and the second is number2
with a value of
20
.
The contents of the script could be set up as follows:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Calculator</title> </head> <body> <?php $sum = $_GET['number1'] + $_GET['number2']; echo("Sum: $sum"); ?> </body> </html>
The script works with the superglobal $_GET
array. It's superglobal because it's accessible from basically
everywhere. There, we would find all of the variables that were sent to the
script from the query string. The array is associative, we use the name of each
of the variables as the key and get its value the same way. Then, we simply
print the sum of the two values.
The result:
The GET
method is useful when setting up subpages, however, it
doesn't suit our needs at the moment.
The POST
method
The POST
method is used, in most cases, when submitting forms.
Our application will then consist of 2 files. The first file will contain a form
into which the user will enter 2 numbers and submit it through the "Compute"
button. It would then send the data to the second file which will contain a PHP
script that computes the result.
calculator.html
This file contains the form. We could give it the .php extension, but doing
so is not necessary since it doesn't contain PHP blocks. If you name this file
index.html, it would be displayed as the default page when you access the
calculator/
folder. The file contents will be as follows:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Calculator</title> </head> <body> <p>Welcome to the calculator, please enter 2 numbers and you will get their sum.</p> <form method="POST" action="sum.php"> <input name="number1" type="text" /><br /> <input name="number2" type="text" /><br /> <input type="submit" value="Compute" /> </form> </body> </html>
The result should look like this:
We now have a website containing a form with several input fields. If you
prefer HTML 5, you can use "number"
as the input type. The last
field is the submit button which will submit the form.
The form attributes are the interesting part here. Method="POST"
defines the method through which the form data will be submitted. Although
POST
is not the default value, it really doesn't make sense for us
to use any other one. If we don't provide the Method attribute, the method would
be implicitly set to GET
where the form data would be submitted as
a query string in the URL address. Anyone would be able to see the values and
their size would be limited. I highly suggest using the POST
method
in this case. The action
attribute sets the script (the file
containing the script) that will process the form. If we don't provide this
attribute, the form will be sent to the same file in which it is declared.
sum.php
This file is the script containing code that processes the data that is sent
to it by the form. As you may have guessed, the form data will be received in
the $_POST
superglobal array. It's an associative
array as well and its keys are the same as the form's input fields (the values
of their name
attribute).
The script will contain the following code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Calculator</title> </head> <body> <?php $sum = $_POST['number1'] + $_POST['number2']; echo("Sum: $sum"); ?> </body> </html>
Compared to the processing script using the GET
method, the
script content hasn't changed at all. Go ahead and test your calculator to make
sure that it actually works
I look forward to seeing you all in the next lesson, Solved tasks for PHP lesson 5, where we'll introduce you to conditions. The projects are available for download below.
In the following exercise, Solved tasks for PHP lesson 5, we're gonna practice our knowledge from previous lessons.
Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.
Download
By downloading the following file, you agree to the license terms
Downloaded 74x (2.17 kB)
Application includes source codes in language PHP