Combining HTML and PHP Code on a Single Page

In some circumstances, you might want to include form-parsing code on the same page as a hard-coded HTML form. Such a combination can be useful if you need to present the same form to the user more than once. You would have more flexibility if you were to write the entire page dynamically, of course, but you would miss out on one of the great strengths of PHP. The more standard HTML you can leave in your pages, the easier they are for designers and page builders to amend without reference to you. You should avoid scattering substantial chunks of PHP code throughout your documents, however. Doing so makes them hard to read and maintain. Where possible, you should create functions that can be called from within your HTML code and can be reused in other projects.

For the following examples, imagine that we're creating a site that teaches basic math to preschool children, and have been asked to create a script that takes a number from form input and tells the user whether it's larger or smaller than a predefined integer.

Listing 9.6 creates the HTML. For this example, we need only a single text field, but even so, we'll include a little PHP.

Listing 9.6 An HTML Form That Calls Itself
  1: <html>
  2: <head>
  3: <title>Listing 9.6 An HTML form that calls itself</title>
  4: </head>
  5: <body>
  6: <form action="<?php print $_SERVER[PHP_SELF] ?>" method="POST">
  7: Type your guess here: <input type="text" name="guess">
  8: </form>
  9: </body>
 10: </html>

The action of this script is $_SERVER[PHP_SELF]. This variable is the equivalent of the name of the current script. In other words, the action tells the script to reload itself.

The script in Listing 9.6 doesn't produce any output. In Listing 9.7, we begin to build up the PHP element of the page. First, we must define the number that the user guesses. In a fully working version, we'd probably randomly generate this number, but for now, we keep it simple. We assign 42 to the $num_to_guess variable on line 2. Next, we must determine whether the form has been submitted; otherwise, we'd attempt to assess variables that aren't yet made available. We can test for submission by testing for the existence of the variable $_POST[guess], which is made available if your script has been sent a "guess" parameter. If $_POST[guess] isn't present, we can safely assume that the user arrived at the page without submitting a form. If the value is present, we can test the value it contains. The test for the presence of the $_POST[guess] variable takes place on line 4.

Listing 9.7 A PHP Number-Guessing Script
  1: <?php
  2: $num_to_guess = 42;
  3: $message = "";
  4: if (!isset($_POST[guess])) {
  5:    $message = "Welcome to the guessing machine!";
  6: } elseif ($_POST[guess] > $num_to_guess) {
  7:    $message = "$_POST[guess] is too big! Try a smaller number";
  8: } elseif ($_POST[guess] < $num_to_guess) {
  9:    $message = "$_POST[guess] is too small! Try a larger number";
 10: } else { // must be equivalent
 11:    $message = "Well done!";
 12: `}
 13: ?>
 14: <html>
 15: <head>
 16: <title>Listing 9.7 A PHP number guessing script</title>
 17: </head>
 18: <body>
 19: <h1>
 20: <?php print $message ?>
 21: </h1>
 22: <form action="<?php print $_SERVER[PHP_SELF] ?>" method="POST">
 23: Type your guess here: <input type="text" name="guess">
 24: </form>
 25: </body>
 26: </html>

Put these lines into a text file called listing9.7.php, and place this file in your Web server document root. Now access the script with your Web browser, and you should see something like Figure 9.5.

Figure 9.5. Form created in Listing 9.7.


The bulk of this script consists of an if statement that determines which string to assign to the variable $message. If the $_POST[guess] variable hasn't been set, we assume that the user has arrived for the first time and assign a welcome string to the $message variable on line 5.

Otherwise, we test the $_POST[guess] variable against the number we stored in $num_to_guess, and assign advice to $message accordingly. We test whether $_POST[guess] is larger than $num_to_guess on line 6, and whether it's smaller than $num_to_guess on line 8. If $_POST[guess] is neither larger nor smaller than $num_to_guess, we can assume that it's equivalent and assign a congratulations message to the variable (line 11). Now all we must do is print the $message variable within the body of the HTML.

There are still a few more additions, but you can probably see how easy it would be to hand this page over to a designer. He can make it beautiful without having to disturb the programming in any way.

    Part III: Getting Involved with the Code