dan forys

blog

Learning PHP - Part 5: your first dynamic web page

Posted on 2009-11-03 - Comments

After the previous parts of this tutorial, you should be familiar with PHP variables and arrays.

Now we will use these concepts to actually make a working web page. This page will contain a form that you can submit, and we will write PHP code to handle the form contents.

Step 1: The basic HTML

This is going to be a real, albeit ugly, web page. So we need some boilerplate HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first dynamic web page!</title>
</head>
<body>

</body
</html>

Save the file as something like form.php and upload it to your web server. Hopefully if you load it, you’ll see a blank page with the title “My first dynamic web page!”

Step 2: The HTML Form

There are essentially two types of HTML forms:

  • POST – when submitted, the contents of the form are sent in the HTTP request body. Using this method will normally result in a prompt if the user presses their browser back button after submitting the form. POST requests cannot be bookmarked
  • GET – when submitted, the contents of the form will appear in the URL in the browser address bar. These addresses can be bookmarked by the user.

For our page, we’ll use a POST method form. This code should be inserted between the body tags at line 7:

<form action="" method="post">
<p><label for="user-name">Name: </label><input id="user-name" name="user-name" value="" type="text" /></p>
<p><label for="user-message">Message: </label><input id="user-message" name="user-message" value="" type="text" /></p>
<p><input type="submit" value="Submit" /></p>
</form>

Note the blank action property of the form tag – this means that when the user submits the form, the browser will POST the contents back to the same page. Alternatively, if we wanted to use a different page, its URL could have been entered here.

If you upload and view the page in your browser, you should be able to see the form. Feel free to enter some values and submit the form. As you’ll see, the form simply goes back to the same page.

Step 3: Enter the PHP

PHP has a magic array called $_POST that contains any values submitted using an HTTP POST. It’s very straightforward to use, simply being an associative array. Each key in the array is the form “name” attribute and each value is the corresponding data entered by the user.

For example, for our form above:

echo $_POST['user-name'];

will output whatever the user has entered in the name field on our form, when it is submitted.

There’s an important note about PHP’s error handling with arrays:

If you attempt to access an array key that doesn’t exist, PHP might show an error message (more specifically a notice). These notices will show if you have PHP configured to show its strictest errors. For this reason, it’s good practice to either pre-populate your array with empty values; or check if a key exists before you attempt to use it.

With this warning in mind, let’s add some code to the very start of the file, insert the following at line 1:

<?php
$name = '';
$message ='';
if (array_key_exists('user-name', $_POST)) $name = $_POST['user-name'];
if (array_key_exists('user-message', $_POST)) $message = $_POST['user-message'];
?>

Lines 2 and 3 simply prepare two variables for us to use later, this is called initialisation. It is good practice to get into the habit of doing this so that you know exactly what the starting values of the variables are going to be.

Lines 4 and 5 check to see if the keys ‘user-name’ and user-message’ exist in the $_POST array. If the user had submitted the form, the values $_POST['user-name'] and $_POST['user-message'] will contain the text the user entered.

Using the submitted data

Finally, lets embed some echo statements to show the user some feedback. The finished script will look like this:

<?php
$name = '';
$message ='';
if (array_key_exists('user-name', $_POST)) $name = $_POST['user-name'];
if (array_key_exists('user-message', $_POST)) $message = $_POST['user-message'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first dynamic web page!</title>
</head>
<body>
<form action="" method="post">
<p><label for="user-name">Name: </label><input id="user-name" name="user-name" value="" type="text" /></p>
<p><label for="user-message">Message: </label><input id="user-message" name="user-message" value="" type="text" /></p>
<p><input type="submit" value="Submit" /></p>
</form>

<p>User name is <?php echo $name; ?></p>
<p>Message is <?php echo $message; ?></p>

</body
</html>

Lines 19 and 20 echo out the user data. If you save and run the script, you should be able to put text into the form, submit it and have the results output on the page.

Persisting form values

Finally, we can modify lines 14 and 15 to echo out the user text as the input ‘values’. This has the effect of keeping the user input in the form fields when the form is submitted:

<p><label for="user-name">Name: </label><input id="user-name" name="user-name" value="<?php echo $name; ?>" type="text" /></p>
<p><label for="user-message">Message: </label><input id="user-message" name="user-message" value="<?php echo $message; ?>" type="text" /></p>

Final thoughts

You now have the basics to build simple dynamic web pages. In the next tutorials we’ll go on to more advanced PHP features.