Returning to the Story Program

The story program introduced at the beginning of this chapter is an opportunity to bring together all the new elements you've learned. It doesn't introduce anything new, but it helps you see a larger context.

Designing the Story

Even though this is not an especially difficult program to write, you'll run into problems if you simply open up your text editor and start blasting away. It really pays to plan ahead. The most important thinking happens before you write a single line of code.

In this situation, start by thinking about your story. You can write your own story, or you can modify some existing text for humorous effect. I raided a nursery rhyme book for my story. Regardless of how you come up with a story, you need to have it in place before you start to write code. I wrote the original unmodified version of "Little Boy Blue" in my text editor first so I could admire its artistic genius—and then mangle it beyond recognition. As you look over the original prose, look for key words you can take out, and try to find a description that will hint at the original word without giving anything away. For example, I printed out my story, circled the word "blue" in the original poem, and wrote "color" on another piece of paper. Keep doing this until you've found several words you can take out of the original story. You should have a document with a bunch of holes in it, and a list of hints. Mine looked like Figure 2.15.

Figure 2.15: My plan for the story game. I thought through the story and the word list before writing any code.

IN THE REAL WORLD

Figure 2.15 shows the plan written as a MS Word document. Although things are sometimes done this way (especially in a professional programming environment) I really wrote the plan on paper. I reproduced it in a cleaner format because you don't deserve to be subjected to my handwriting. I usually plan my programs on paper, chalkboard, or dry erase board. I avoid planning programs on the computer, because it's too tempting to start programming immediately. It's really important to make your plan describe what you wish to do in English before you worry about how exactly you'll implement the plan. Most beginners (and a lot of pros) start programming way too early, and get stuck as a result. You'll see throughout the rest of this chapter how this plan evolves into a working program.

Building the HTML Page

With the basic outline from Figure 2.15, it becomes clear how the story program should be created. It should have two parts. The first is an HTML page that prompts the user for all the various words. Here's the code for my version:

<html>
<head>
<title>Story</title>
</head>
<body>
<h1>Story</h1>
<h3>Please fill in the blanks below, and I'll tell
    you a story</h3>
<form method = "post"
      action = "story.php">

<table border = 1>
<tr>
  <th>Color:</th>
  <th>
    <input type = "text"
           name = "color"
           value = "">
  </th>
</tr>

<tr>
  <th>Musical Instrument</th>
  <th>
    <input type = "text"
           name = "instrument"
           value = "">
  </th>
</tr>

<tr>
  <th>Animal</th>
  <th>
    <input type = "text"
           name = "anim1"
           value = "">
  </th>
</tr>

<tr>
  <th>Another animal</th>
  <th>
    <input type = "text"
           name = "anim2"
           value = "">
  </th>
</tr>

<tr>
  <th>Yet another animal!</th>
  <th>
    <input type = "text"
           name = "anim3"
           value = "">
  </th>
</tr>

<tr>
  <th>Place</th>
  <th>
    <input type = "text"
           name = "place"
           value = "">
  </th>
</tr>

<tr>
  <th>Vegetable</th>
  <th>
    <input type = "text"
           name = "vegetable"
           value = "">
  </th>
</tr>

<tr>
  <th>A structure</th>
  <th>
    <input type = "text"
           name = "structure"
           value = "">
  </th>
</tr>

<tr>
  <th>An action</th>
  <th>
    <select name = "action">
      <option value = "fast asleep">fast asleep</option>
      <option value = "drinking cappuccino">drinking cappuccino</option>
      <option value = "wandering around aimlessly">wandering around aimlessly</option>
      <option value = "doing nothing in particular">doing nothing in particular</option>
    </select>
  </th>
</tr>

<tr>
  <td colspan = 2>
    <center>
      <input type = "submit"
             value = "tell me the story">
    </center>
  </td>
</tr>
</table>

</form>
</body>
</html>

There's nothing terribly exciting about the HTML. In fact, since I had the plan, I knew exactly what kinds of things I was asking for and created form elements to ask each question. I used a list box for the last question so I could put in some interesting suggestions. Note that I changed the order a little bit just to throw the user off.

There are a few things to check when you're writing a page that will connect to a script. First, ensure you've got the correct action attribute in the form tag. (for that matter, make sure you've added an action attribute.) Make sure each form element has an appropriate name attribute. If you have radio or option objects, make sure each one has an appropriate value. Finally, be sure there is a Submit button somewhere in your form.

Checking the Form

I actually wrote two different scripts to read this form. The first one I wrote simply checked each element to make sure it received the value I expected. Here's the first program, called storySimple.php.

<html>
<head>
<title>Little Boy Who?</title>
</head>
<body>
<h1>Little Boy Who?</h1>

<h3>Values from the story page</h3>

<table border = 1>
<tr>
  <th>Variable</th>
  <th>Value</th>
</tr>

<tr>
  <th>color</th>
  <td><? print $color ?></td>
</tr>

<tr>
  <th>instrument</th>
  <td><? print $instrument ?></td>
</tr>

<tr>
  <th>anim1</th>
  <td><? print $anim1 ?></td>
</tr>

<tr>
  <th>anim2</th>
  <td><? print $anim2 ?></td>
</tr>

<tr>
  <th>anim3</th>
  <td><? print $anim3 ?></td>
</tr>

<tr>
  <th>place</th>
  <td><? print $place ?></td>
</tr>

<tr>
  <th>vegetable</th>
  <td><? print $vegetable ?></td>
</tr>

<tr>
  <th>structure</th>
  <td><? print $structure ?></td>
</tr>

<tr>
  <th>action</th>
  <td><? print $action ?></td>
</tr>

</table>
<form>
</html>

I made this program as simple as possible, because I didn't expect to need it for long. It's simply a table with the name of each variable and its associated value. I did it this way to ensure that I get all the variables exactly the way I want them. There's no point in building the story if you don't have the variables working.

Building the Final Story

The story itself is very simple to build if you've made a plan and ensured that the variables are working right. All I had to do was write out the story as it was written in the plan, with the variables incorporated in the appropriate places. Here's the code for the finished story.php page:

<html>
<head>
<title>Little Boy Who?</title>
</head>
<body>
<center>

<h1>Little Boy Who?</h1>

<?

print <<<HERE
<h3>
Little Boy $color, come blow your $instrument!<br>
The $anim1's in the $place, the $anim2's in the $vegetable.<br>
Where's the boy that looks after the $anim3?<br>
He's under the $structure, $action.
</h3>
HERE;
?>

</center>

</body>
</html>

It might astonish you that the final program is quite a bit simpler than the test program. Neither is very complicated, but once you have created the story, set up the variables, and tested that all the variables are being sent correctly, the story program itself turns out to be almost trivial. Most of the story.php code is plain HTML. The only part that's in PHP is one long print statement. This uses the print <<<HERE syntax to print out a long line of HTML text with PHP variables embedded inside. The story itself is this text.