Combining HTML and PHP Code on a Single Page

For some smaller scripts, 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 will be for designers and page builders to amend without reference to you. You should avoid scattering substantial chunks of PHP code throughout your documents, however. This practice 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 are 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 is larger or smaller than a target integer.

Listing 10.6 creates the HTML. For this example, we need only a single text field and some PHP to display the user input.

Listing 10.6 An HTML Form That Calls Itself

 1: <!DOCTYPE html PUBLIC
 2:     "-//W3C//DTD XHTML 1.0 Strict//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 4: <html>
 5: <head>
 6: <title>Listing 10.6 An HTML Form that Calls Itself</title>
 7: </head>
 8: <body>
 9: <div>
10: <?php
11: if ( ! empty( $_POST['guess'] ) ) {
12:     print "last guess: ".$_POST['guess'];
13: }
14: ?>
15: <form method="post" action="<?php print $_SERVER['PHP_SELF']?>">
16: <p>
17: Type your guess here: <input type="text" name="guess" />
18: </p>
19: </form>
20: </div>
21: </body>
22: </html>

We open our form element on line 15. Notice that we use $_SERVER['PHP_SELF'] to point the form back at its enclosing script. We could leave the action element out altogether, and most browsers would resubmit the form by default. That would break our conformance to XHTML, however. On line 11, we test the $_POST array for the existence of a 'guess' element and print it to the browser if we find it.

In Listing 10.7, we begin to build up the PHP logic of the page. First, we need to define the number that the user will guess. In a fully working version, we would probably randomly generate it, but for now we keep it simple. We assign 42 to the $num_to_guess variable on line 2. Next, we need to decide whether the form has been submitted so that we do not attempt to assess arguments that have not yet been made available. We test that the 'guess' element has been set in the $_POST array on line 4. If a user has submitted the form, this element is set, even if he has submitted an empty string or 0. So if the 'guess' element is absent, we can safely assume that the user has arrived at the page without submitting a form. If the element is present, we can go ahead and test the value it contains.

Listing 10.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: } else if ( $_POST['guess'] > $num_to_guess ) {
 7:    $message = $_POST['guess']." is too big! Try a smaller number";
 8: } else if ( $_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: ?>
15: <!DOCTYPE html PUBLIC
16:     "-//W3C//DTD XHTML 1.0 Strict//EN"
17:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
18: <html>
19: <head>
20: <title>Listing 10.7 A PHP Number Guessing Script</title>
21: </head>
22: <body>
23: <h1>
24: <?php print $message ?>
25: </h1>
26: <form method="post" action="<?php print $_SERVER['PHP_SELF']?>">
27: <p>
28: Type your guess here: <input type="text" name="guess" />
29: <input type="submit" value="submit" />
30: </p>
31: </form>
32: </body>
33: </html>

The logic of this script consists of an if statement that determines which string to assign to the variable $message. If the $_POST['guess'] element has not 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 'guess' element against the number we have stored in $num_to_guess and assign advice to $message accordingly. We test whether 'guess' is larger than $num_to_guess on line 6 and whether it is smaller than $num_to_guess on line 8. If 'guess' is neither larger nor smaller than $num_to_guess, we can assume that it is equivalent and assign a congratulations message to the variable (line 11). Now all we need to do is print the $message variable within the body of the HTML.

There are a few more additions yet, 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.

[ Team LiB ]