Thông tin tài liệu
Figure 5-5 The SELECT element (also known as list) allows you to display a fixed list of choices from which the user has to choose an element. The item selected won’t be sent as displayed but will be sent as its value. In this example, the value and its display are identical, but in a database-driven system you would proba- bly see record IDs as the values and their text label as list choices. A good example is a product number and its name. When using lists, be sure to set the value part of the OPTION items. If these are not set, the list looks the same but is totally useless because all choices will send the same null value. One Form, Multiple Processing Forms always react in a predefined way based on how you code your processing script to handle the data that the user sends to the system. A single form can have more than one defined action by using dif- ferent submit buttons. 144 Chapter 5 09_579665 ch05.qxd 12/30/04 8:06 PM Page 144 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Try It Out Radio Button, Multiline List Boxes In the following example, you create a form that prepares a search and creates a movie/actor/director interface. 1. Create a text file named form3.php and open it in your text editor. Then type the following code: <html> <head> <title>Add/Search Entry</title> <style type=”text/css”> TD{color:#353535;font-family:verdana} TH{color:#FFFFFF;font-family:verdana;background-color:#336699} </style> </head> <body> <form action=”formprocess3.php” method=”post”> <table border=”0” cellspacing=”1” cellpadding=”3” bgcolor=”#353535” align=”center”> <tr> <td bgcolor=”#FFFFFF” width=”50%”>Name</td> <td bgcolor=”#FFFFFF” width=”50%”> <input type=”text” name=”Name”> </td> </tr> <tr> <td bgcolor=”#FFFFFF”>What you are looking for</td> <td bgcolor=”#FFFFFF”> <select name=”MovieType”> <option value=”” selected>Select a movie type </option> <option value=”Action”>Action</option> <option value=”Drama”>Drama</option> <option value=”Comedy”>Comedy</option> <option value=”Sci-Fi”>Sci-Fi</option> <option value=”War”>War</option> <option value=”Other”>Other </option> </select> </td> </tr> <tr> <td bgcolor=”#FFFFFF”>Add what?</td> <td bgcolor=”#FFFFFF”> <input type=”radio” name=”type” value=”Movie” checked> Movie<br> <input type=”radio” name=”type” value=”Actor”> Actor<br> <input type=”radio” name=”type” value=”Director”> Director<br> </td> </tr> <tr> <td bgcolor=”#FFFFFF” width=”50%”>Display Debug info</td> <td bgcolor=”#FFFFFF” width=”50%”> 145 Form Elements: Letting the User Work with Data 09_579665 ch05.qxd 12/30/04 8:06 PM Page 145 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com <input type=”checkbox” name=”Debug” checked> </td> </tr> <tr> <td bgcolor=”#FFFFFF” colspan=2 align=”center”> <input type=”submit” name=”Submit” value=”Search”> <input type=”submit” name=”Submit” value=”Add”> </td> </tr> </table> </form> </body> </html> 2. Create another file named formprocess3.php and edit it to add the following code: <?php if ($_POST[‘type’] == “Movie” && $_POST[‘MovieType’] == “”) { header(“Location:form3.php”); } $title = $_POST[‘Submit’] . “ “ . $_POST[‘type’] . “ : “ . $_POST[‘Name’]; ?> <html> <head> <title><?php echo $title; ?></title> </head> <body> <?php if ($_POST[‘Debug’] == “on”) { ?> <pre> <?php print_r($_POST); ?> </pre> <?php } $name = $_POST[‘Name’]; $name[0] = strtoupper($name[0]); if ($_POST[‘type’] == “Movie”) { $foo = $_POST[‘MovieType’] . “ “ . $_POST[‘type’]; } else { $foo = $_POST[‘type’]; } ?> <p align=”center”> You are <?php echo $_POST[‘Submit’]; ?>ing <?php echo $_POST[‘Submit’] == “Search” ? “for “ : “”; ?> a <?php echo $foo ?> named “<?php echo $name; ?>” </p> </body> </html> 146 Chapter 5 09_579665 ch05.qxd 12/30/04 8:06 PM Page 146 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 3. Start your browser and open http://localhost/form3.php. The form shown in Figure 5-6 appears. Notice that the form has two submit buttons. One is labeled Search, the other Add. 4. Type Kevin Kline in the Name field. 5. Leave Movie Type as is; then move on to the Item Type field, in which you’ll select Actor. 6. Clear the Display Debug Dump checkbox if you like; then click the Search button. The results appear, as shown in Figure 5-7. 7. Now play around a bit with the form. Look at the output and how it changes when you modify the data. How It Works You just coded a simple form with two possible actions. Depending on the button you click and the data you choose to enter, this code outputs different information. What’s new in the form page itself? A group of radio buttons and a new submit button have been added. Let’s have a closer look at these. Figure 5-6 147 Form Elements: Letting the User Work with Data 09_579665 ch05.qxd 12/30/04 8:06 PM Page 147 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Figure 5-7 Radio INPUT Element The radio button is a very simple element. By default, if no radio button is specified as CHECKED, no default choice is made. Always remember that choosing the default value is a very important part of building a form. Users often leave defaults in forms. (It is a form of laziness, so to speak.) <input type=”radio” name=”type” value=”Movie” checked> Movie<br> <input type=”radio” name=”type” value=”Actor”> Actor<br> <input type=”radio” name=”type” value=”Director”> Director<br> For multiple radio buttons to be linked together to form a group and be processed as a single form element, they need to share the same name and different values (quite obviously). In the preceding code, the name is always type. This tells the browser that selecting one of the radio buttons clears the others. 148 Chapter 5 09_579665 ch05.qxd 12/30/04 8:06 PM Page 148 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Multiple Submit Buttons As with radio buttons, submit buttons share the same name with a different value. Clicking one of these buttons simply submits the form. <input type=”submit” name=”Submit” value=”Search”> <input type=”submit” name=”Submit” value=”Add”> As you can see in the DEBUG block, the submit button sends its own information to the script. You can access the submit button value through the $_POST[‘Submit’] array. Basic Input Testing What about the processing script? What’s new in there? The following code checks that the item type is Movie, and, if it is, it checks that the user has selected a valid movie type from the list. If he or she has not, he or she is redirected to the form page. The test is a simple if with an and operator. (In simple Monopoly parlance, if the item type is movie and the movie type is not specified, you go back to square one and you do not collect $200.) if ($_POST[‘type’] == “Movie” && $_POST[‘MovieType’] == “”) { header(“Location:form3.php”); } The header function allows you to send a raw HTTP header. It is useful for handling security problems and access restrictions. In this instance it redirects the user to the specified page. A very common error with beginning PHP users is that they fail to understand a very simple fact: Once sent, the headers cannot be sent again. This means that any echo, any space, any tabulation left before the call to the header function will trigger a warning in the script execution. Here are a few typical errors: <?php header(“Location:form3.php”); ?> This code will fail. The empty line starting the script will send the headers with a carriage return and a line feed (depending on the operating system). <?php echo “foobar”; header(“Location:form3.php”); ?> This code will fail. The echo function will send the headers with the text “foobar”. Dynamic Page Title This code is rather simple to understand: You don’t start outputting as soon as you start executing the PHP script. What often happens is that at the start of the scripts there will be a check for intrusion and context verification. In this instance, you don’t have that sort of complex verification code, but you do dynamically set the page title using the action type and item type you will use to handle the page. 149 Form Elements: Letting the User Work with Data 09_579665 ch05.qxd 12/30/04 8:06 PM Page 149 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com $title = $_POST[‘Submit’] . “ “ . $_POST[‘type’] . “ : “ . $_POST[‘Name’]; ?> <html> <head> <title><?php echo $title; ?></title> Manipulating a String as an Array to Change the Case of the First Character Single string characters can be accessed through a very simple syntax that is similar to array index access. Specify the index of the character you want to access and voilà! To change the case of a character or an entire string, use the strtoupper() function: $name = $_POST[‘Name’]; $name[0] = strtoupper( $name[0]); You could have used the ucfirst() function (which essentially does what this code did), but a bit of creativity can’t hurt. Ternary Operator This line holds a ternary comparison operation. Ternary operators are not PHP-specific; many other lan- guages, such as C, use them. <?php echo $_POST[‘Submit’] == “Search” ? “for “ : “”; ?> These work in a very simple way and can be compared to an if-else structure: [expression]?[execute if TRUE]: [execute if FALSE]; The ternary operator is a known maintainability hazard. Using this operator will make your code less readable and will probably cause errors during maintenance stages. Using Form Elements Together Now that you know most of the form elements, let’s create a skeleton for the movie application. The sys- tem will add new items or search for existing ones. Database interaction is covered in Chapter 6, how- ever, so for now you’ll just build the forms and echo the results to the screen. Try It Out Bonding It All Together In this exercise, you’ll create several new scripts that work together to simulate allowing the user to add information to the database. 1. Create a file named form4.php and open it in your text editor. 2. Enter the following code: 150 Chapter 5 09_579665 ch05.qxd 12/30/04 8:06 PM Page 150 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com <?php // Debug info Display function debugDisplay() { ?> <pre> $_POST <?php print_r($_POST); ?> $_GET <?php print_r($_GET); ?> </pre> <?php } if (!isset($_GET[‘step’])) { require(‘startform.php’); } else { // Switch on search/add wizard step switch ($_GET[‘step’]) { // ################# // Search/Add form // ################# case “1”: $type = explode(“:”, $_POST[‘type’]); if ($_POST[‘Submit’] == “Add”) { require($_POST[‘Submit’] . $type[0] . ‘.php’); } else { if ($_POST[‘type’] == “Movie:Movie” && $_POST[‘MovieType’] == “”){ header(“Location:form4.php”); } ?> <h1>Search Results</h1> <p>You are looking for a “<?php echo $type[1]; ?>” named “<?php echo $_POST[‘Name’]; ?>”</p> <?php } if ($_POST[‘Debug’] == “on”) { debugDisplay(); } break; // ################# // Add Summary // ################# case “2”: $type = explode(“:”, $_POST[‘type’]); ?> <h1>New <?php echo $type[1]; ?> : <?php echo $_POST[‘Name’]; ?></h1> <?php switch ($type[0]) { case “Movie”: 151 Form Elements: Letting the User Work with Data 09_579665 ch05.qxd 12/30/04 8:06 PM Page 151 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com ?> <p>Released in <?php echo $_POST[‘MovieYear’]; ?></p> <p><?php echo nl2br(stripslashes($_POST[‘Desc’])); ?></p> <?php break; default: ?> <h2>Quick Bio</h2> <p><?php echo nl2br(stripslashes($_POST[‘Bio’])); ?></p> <?php break; } break; // ############### // Starting form // ############### default: require(‘startform.php’); break; } } ?> 3. Create a new file called startform.php and enter the following code: <html> <head> <title>Multipurpose Form</title> <style type=”text/css”> TD{color:#353535;font-family:verdana} TH{color:#FFFFFF;font-family:verdana;background-color:#336699} </style> </head> <body> <form action=”form4.php?step=1” method=”post”> <table border=”0” width=”750” cellspacing=”1” cellpadding=”3” bgcolor=”#353535” align=”center”> <tr> <td bgcolor=”#FFFFFF” width=”30%”>Name</td> <td bgcolor=”#FFFFFF” width=”70%”> <input type=”TEXT” name=”Name”> </td> </tr> <tr> <td bgcolor=”#FFFFFF”>Item Type</td> <td bgcolor=”#FFFFFF”> <input type=”radio” name=”type” value=”Movie:Movie” checked> Movie<br> <input type=”radio” name=”type” value=”Person:Actor”> Actor<br> <input type=”radio” name=”type” value=”Person:Director”> Director<br> </td> 152 Chapter 5 09_579665 ch05.qxd 12/30/04 8:06 PM Page 152 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com </tr> <tr> <td bgcolor=”#FFFFFF”>Movie type (if applicable)</td> <td bgcolor=”#FFFFFF”> <select name=”MovieType”> <option value=”” selected>Movie type </option> <option value=”Action”>Action</option> <option value=”Drama”>Drama</option> <option value=”Comedy”>Comedy</option> <option value=”Sci-Fi”>Sci-Fi</option> <option value=”War”>War</option> <option value=”Other”>Other </option> </select> </td> </tr> <tr> <td bgcolor=”#FFFFFF” width=”50%”>Display Debug Dump</td> <td bgcolor=”#FFFFFF” width=”50%”> <input type=”checkbox” name=”Debug” checked> </td> </tr> <tr> <td bgcolor=”#FFFFFF” colspan=2 align=”center”> <input type=”submit” name=”Submit” value=”Search”> <input type=”submit” name=”Submit” value=”Add”> </td> </tr> </table> </form> </body> </html> 4. Create another new, empty file named AddMovie.php, in which you will add this code: <?php if ($_POST[‘type’] == “Movie:Movie” && $_POST[‘MovieType’] == “”) { header(“Location:form4.php”); } $title = $_POST[‘Submit’] . “ “ . $_POST[‘type’] . “ : “ . $_POST[‘Name’]; $name = $_POST[‘Name’]; $name[0] = strtoupper($name[0]); ?> <html> <head> <title><?php echo $title; ?></title> <style type=”text/css”> TD{color:#353535;font-family:verdana} TH{color:#FFFFFF;font-family:verdana;background-color:#336699} </style> </head> <body> 153 Form Elements: Letting the User Work with Data 09_579665 ch05.qxd 12/30/04 8:06 PM Page 153 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com [...]... an index.php script and enter the following code: Movie database TD{color: #35 3 535 ;font-family:verdana} TH{color:#FFFFFF;font-family:verdana;background-color: #33 6699} ... movie TD{color: #35 3 535 ;font-family:verdana} TH{color:#FFFFFF;font-family:verdana;background-color: #33 6699} Movie Name ... Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 2 3 Save your file and upload it to the chapter6 directory on your server Create a new empty file named commit.php and enter the following code: ”> . type=”text/css”> TD{color: #35 3 535 ;font-family:verdana} TH{color:#FFFFFF;font-family:verdana;background-color: #33 6699} </style> </head> <body> <form action=”formprocess3.php” method=”post”> <table border=”0” cellspacing=”1” cellpadding= 3 bgcolor=” #35 3 535 ” align=”center”> <tr> <td. 5 09_579665 ch05.qxd 12 /30 /04 8:06 PM Page 146 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 3. Start your browser and open http://localhost/form3.php. The form shown. type=”text/css”> TD{color: #35 3 535 ;font-family:verdana} TH{color:#FFFFFF;font-family:verdana;background-color: #33 6699} </style> </head> <body> <form action=”form4.php?step=1” method=”post”> <table border=”0” width=”750” cellspacing=”1” cellpadding= 3 bgcolor=” #35 3 535 ”
Ngày đăng: 13/08/2014, 12:21
Xem thêm: Beginning PHP5, Apache, and MySQL Web Development split phần 3 pps, Beginning PHP5, Apache, and MySQL Web Development split phần 3 pps
