Building a Database-Driven Web Site Using PHP and MySQL

by Kevin Yank of SitePoint.com

User Interaction and Forms

For many of the interesting applications of PHP, the ability to interact with the user viewing the Web page is essential. Veterans of JavaScript will be used to thinking in terms of event handlers, which allow you to react directly to many user actions, such as moving the mouse over a link on the page. Server-side scripting languages such as PHP have a more limited scope when it comes to user interaction. Since the only time PHP code is actually run is when a page is requested from the server, user interaction can only occur in a back-and-forth fashion, with the user sending requests to the server and the server replying with dynamically generated pages.

The key to user interaction with PHP is to understand the techniques that exist for sending information along with a user’s request for a new Web page. PHP makes this fairly easy, as we’ll now see.

The simplest method for sending information along with a page request is using the "URL query string". If you’ve ever seen a URL with a question mark following the filename, you’ve seen this technique in use. Let’s look at an easy example. Create a regular HTML file (no .php file extension is required, since there will be no PHP code in this file) and insert the following link:

<A HREF="welcome.php?name=Kevin"> Hi, I'm Kevin! </A>

This is a link to a file called welcome.php, but in addition to linking to the file, we're also passing a variable along with the page request. The variable is passed as part of the "query string", which is the portion of the URL following the question mark. The variable is called name and its value is Kevin. To restate, we have created a link that loads welcome.php and informs the PHP code contained in that file that name equals Kevin.

To see what good this does us, we need to look at welcome.php. Create it as a new HTML file also, but this time note the .php extension, which tells the Web server to expect to interpret some PHP code in the file. If your Web server is not configured to accept .php as a file extension for PHP files, you may have to call it welcome.php3 instead (in which case you'll also want to adjust the link above accordingly). In the body of this new file, type the following:

<?php
  echo( "Welcome to our Web site, $name!" );
?>

Now, if you use the link in the first file to load this second file, you'll see that the page says "Welcome to our Web site, Kevin!" The value of the variable passed in the query string of the URL was automatically placed into a PHP variable called $name, which we used to display the value passed as part of a text string.

You can pass more than one value in the query string if you want to. Let's look at a slightly more complex version of the same example. Change the link in the HTML file to read as follows:

<A HREF="welcome.php?firstname=Kevin&lastname=Yank">
Hi, I'm Kevin Yank! </A>

This time, we are passing two variables: firstname and lastname. The variables are separated in the query string by an ampersand (&). You can pass even more variables if you want by separating each name=value pair from the next with an ampersand.

As before, we can use the two variable values in our welcome.php file:

<?php
  echo( "Welcome to our Web site,
$firstname $lastname!" );
?>

This is all well and good, but we still have yet to achieve our goal of true user interaction, where the user can actually enter arbitrary information and have it processed by PHP. Continuing with our example of a personalized welcome message, we'd like to allow the user to actually type his or her name and have it appear in the message. To allow the user to type in a value, we'll need to use an HTML form.
Here's the code:

<FORM ACTION="welcome.php" METHOD=GET>
First Name: <INPUT TYPE=TEXT NAME="firstname"><BR>
Last Name: <INPUT TYPE=TEXT NAME="lastname">
<INPUT TYPE=SUBMIT VALUE="GO">
</FORM>

This form has the exact same effect as the second link we looked at (with firstname=Kevin&lastname=Yank in the query string), except you can type whatever names you like. When you click the submit button (which has a label of "GO"), the browser will load welcome.php and automatically add the variables and their values to the query string for you. It gets the names of the variables from the NAME attributes of the INPUT TYPE=TEXT tags and it gets the values from whatever the user types into the text fields.

The METHOD attribute of the FORM tag is used to tell the browser how to send the variables and their values along with the request. A value of GET (as used above) causes them to be passed in the query string, but there is another alternative. It is not always desirable -- or even technically feasible -- to have the values appear in the query string. What if we included a TEXTAREA tag in your form to let the user enter a large amount of text? A URL containing several paragraphs of text in the query string would be ridiculously long, and would exceed by far the maximum length of the URL in today's browsers. The alternative is for the browser to pass the information invisibly, behind the scenes. The code for this looks exactly the same, but instead of setting the form method to GET, we set it to POST:

<FORM ACTION="welcome.php" METHOD=POST>
First Name: <INPUT TYPE=TEXT NAME="firstname"><BR>
Last Name: <INPUT TYPE=TEXT NAME="lastname">
<INPUT TYPE=SUBMIT VALUE="GO">
</FORM>

This form is functionally identical to the previous one. The only difference is that the URL of the page loaded when the user clicks the "GO" button will not have a query string. On the one hand, this lets you include large values, or sensitive values (like passwords) in the data submitted by the form without them appearing in the query string. On the other, if the user bookmarks the page resulting from the submission of the form, that bookmark will be useless, since it does not contain the submitted values. This, incidentally, is the main reason that search engines like AltaVista use the query string to submit search terms. If you bookmark a search results page on AltaVista, you can use that bookmark to perform the same search again later, since the search terms are contained in the URL.

That covers the basics of using forms to produce rudimentary user interaction with PHP. We'll cover more advanced issues and techniques in later examples.

Article Index Introduction and Contents Part 1: Installation Part 2: Getting Started with MySQL Part 3: Getting Started with PHP Part 4: Publishing MySQL Data on the Web   Challenge Solution Buy this book in print format now

Control Structures

SitePoint.com is a fast growing Web Developer Community. Kevin Yank is the Editor of the SitePoint TechTimes, a fresh, technically oriented newsletter for the serious Webmaster.