Combining HTML and PHP Code on a Single Page

Javascript source editor Web programming
↑

Combining HTML and PHP Code on a Single Page

In some circumstances, you might want to include the form-parsing PHP 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, which is that it mingles well with standard HTML. The more standard HTML you can include in your pages, the easier they are for designers and page builders to amend without asking you, the programmer, for help. 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 10.5 creates the HTML. For this example, we need only a single text field, but even so, we'll include a little PHP.

Listing 10.5. An HTML Form That Calls Itself

1: <html>
2: <head>
3: <title> An HTML form that calls itself</title>
4: </head>
5: <body>
6: <form action="<?php echo $_SERVER[PHP_SELF]; ?>" method="POST">
7: <p><strong>Type your guess here:</strong> <input type="text" name="guess"></p>
8: <p><input type="submit" value="submit your guess"></p>
9: </form>
10: </body>
11: </html>

The action of this script is $_SERVER[PHP_SELF], as seen in line 6. This global variable represents the name of the current script. In other words, the action tells the script to reload itself. The script in Listing 10.5 doesn't produce any output, but if you upload the script to your Web server, access the page, and view the source of the page, you will notice that the form action now contains the name of the script itself.

In Listing 10.6, we begin to build up the PHP element of the page.

Listing 10.6. A PHP Number-Guessing Script

1: <?php
2: $num_to_guess = 42;
3: if (!isset($_POST[guess])) {
4:    $message = "Welcome to the guessing machine!";
5: } else if ($_POST[guess] > $num_to_guess) {
6:    $message = "$_POST[guess] is too big! Try a smaller number.";
7: } else if ($_POST[guess] < $num_to_guess) {
8:    $message = "$_POST[guess] is too small! Try a larger number.";
9: } else { // must be equivalent
10:   $message = "Well done!";
11: }
12: ?>

First, we must define the number that the user guesses, and we do this in line 2, as we assign 42 to the $num_to_guess variable. Next, we must determine whether the form has been submitted; we can test for submission by looking for the existence of the variable $_POST[guess], which will only be available if your script has been submitted with a value in the guess field. If a value for $_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 3.

Lines 3 through 11 represent an if...else if...else control structure. Only one of these conditions will be true at any given time, depending on what (if anything) was submitted via the form. Depending on the condition, a different value will be assigned to the $message variable. That variable is then printed to the screen in line 18 of the script:

13: <html>
14: <head>
15: <title> A PHP number guessing script</title>
16: </head>
17: <body>
18: <h1><?php echo $message; ?></h1>
19: <form action="<?php echo $_SERVER[PHP_SELF]; ?>" method="POST">
20: <p><strong>Type your guess here:</strong> <input type="text" name="guess"></p>
21: <p><input type="submit" value="submit your guess"></p>
22: </form>
23: </body>
24: </html>

Put these lines into a text file called numguess.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 10.4.

Figure 10.4. Form created in Listing 10.6.

There are still a few more additions you could make, but you can probably see how simple it would be to hand the code to a designer, for aesthetic treatment. The designer can do their part without having to disturb the programming in any waythe PHP code is at the top, and the rest is 99% HTML.

Javascript source editor Web programming

→