Chapter 2: Basic PHP Techniques | PHP Essentials, 2nd Edition

Before delving directly into PHP scripting, it's important to get a handle on basic HTML techniques. As PHP is embedded within HTML, or perhaps because the script itself generates marked-up text, knowing the fundamental structure of HTML will help you avoid potential problems with your script output. For example, if your PHP script is generating a table layout and that table does not render onscreen, don't jump to the assumption that there's a problem with your PHP code. Most likely, the problem is a missing table end tag!

An HTML Refresher

Hypertext Markup Language, or HTML, isn't a programming language in the same vein as C++ or Java. Instead, it is, as its name implies, a markup language. You take a simple ASCII text file and "mark up" that text by putting text in brackets around other text. Now put that page on a Web server and then request it in your Web browser by typing its URL, such as http://www.yourserver.com/yourpage.html. Your Web browser makes a request to the Web server, and the Web server responds with the file. This transaction essentially says, "Please take the file called yourpage.html that exists on this machine and send it to my Web browser."

Your Web browser then "renders" the document by taking the file, looking at the text in funny brackets, and following the directions they contain. These directions tell the Web browser how the information displayed on the page should appear: bold, italicized, blue, with line breaks, and so on.

This very brief HTML refresher lesson may be unnecessary for you, and if so, feel free to skip it. However, if you've only ever created Web pages with a WYSIWYG editor or some other tool that eliminates the need to know HTML, please glance at this information. In many Web applications, you will be coding PHP that will generate HTML, and you'll want to be sure that the HTML you're generating is correct!

HTML Tags

HTML tags define elements of the document: titles, headings, paragraphs, lists, and so on. Without tags, the Web browser has no way to determine how to display the elements.

Tags begin with a left-angle bracket (<) and end with a right-angle bracket (>). Tags, which are case insensitive, are usually in pairs: the opening tag and the closing tag. Here's an example:

<HTML>. The opening tag, which tells the browser that everything from that point forward is HTML.
</HTML>. The closing tag, which tells the browser that the HTML document should end at that point. Note the / before the tag name, defining it as a closing tag.

Certain HTML tags can contain attributes, or additional information included in the tag, such as alignment directives.

 <P align=center>This is a centered paragraph.</P>

The attribute align=center tells the browser to center the paragraph.

There are two main types of HTML tags: block-level and text-level. An HTML document contains one or more block-level elements, or text surrounded by block-level tags.

Block-Level Tags

Block-level tags, such as the logical division tag (<DIV></DIV>), contain block-level elements. Block-level elements can contain other block-level elements, as well as text-level elements. For example, a logical division can contain a paragraph, and the paragraph can contain emphasized text:

 <DIV>              <P>This paragraph introduces the next paragraph.</P>              <P>This paragraph contains <em>very</em> useful information.</P>              <P>Both paragraphs are within a logical division.</P> </DIV>

Following are some examples of block-level tags:

<H1></H1>, <H2></H2>, <H3></H3>, <H4></H4>, <H5></H5>, <H6></H6>. These are the level heading tags. The level 1 heading (<H1></H1>) appears more prominently than other level heading tags, followed by <H2></H2> and <H3></H3>, through <H6></H6>. Use level heading tags in a hierarchical order: level 2 after level 1, level 3 after level 2, and so on.
<BLOCKQUOTE></BLOCKQUOTE>. Used when quoting large blocks of text from another document.
<UL></UL>. The unordered list. Unordered list items, indicated with the <LI> tag, are preceded by a bullet symbol.
<OL></OL>. The ordered list. Ordered list items, indicated with the <LI> tag, are preceded by a number.
<TABLE></TABLE>. Create a table when surrounding the <TH></TH> and <TD></TD> text-level tags.
<TR></TR>. These tags insert a table row within a <TABLE> element. Table rows contain <TH></TH> and <TD></TD> elements.
<TH></TH>. These tags insert a table header cell within a <TR> element.
<TD></TD>. These tags insert a table data cell within a <TR> element.

Text-Level Tags

Text-level tags are applied to specific text within block-level elements. For example, a paragraph can contain emphasized text and a hypertext link, both of which are examples of text-level elements.

 <P>This paragraph contains a link to a <em>very</em> interesting <a href="http://www.yourserver.com/story.html">story</a>.</P>

Following are some examples of text-level tags:

<STRONG></STRONG>. Strongly emphasized text.
<IMG>. Displays an image. No closing tag is necessary.
<BR>. Inserts a line break. No closing tag is necessary.

Creating a Valid HTML Document

HTML documents have a specific structure that should be followed in order to avoid display problems. Understanding the structure of an HTML document is especially important when integrating it with PHP code, because in some instances PHP code must exist before certain HTML elements. For example, when starting a session or sending cookies, the PHP code used to create and send the cookie must exist before any text, line breaks, or other HTML is sent to the browser.

The following steps will create a structurally sound HTML document:

Using a document type declaration tag, define the document type according to the HTML standard it follows (3.0, 4.0, and so forth).
Open the <HTML> tag, stating that the information that follows is in HTML.
Open the <HEAD> tag. This area contains the title of your document, as well as other document information. With the exception of the document title, none of the information in the <HEAD> element is displayed by the browser.
Insert the title of the document within the <TITLE></TITLE> tag pair.
Insert any <META> information. Examples of <META> information include document descriptions and expiration dates.
Insert any <LINK> information. Examples of <LINK> information include the e-mail address of the document's author and the location of the associated style sheet.
Insert the closing <HEAD> tag: </HEAD>.
Open the <BODY> tag. This area contains all of the information displayed by the browser. Only one <BODY> element exists in each document.
Insert your content, in HTML format.
Insert the closing <BODY> tag: </BODY>.
Insert the closing <HTML> tag: </HTML>.

Following these steps produces a valid HTML document, something like this:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Your Title</TITLE> <META NAME="description" CONTENT="My first document"> <LINK REV="made" HREF="mailto:you@yourserver.com"> </HEAD> <BODY> <P>All of your content goes here!</P> </BODY> </HTML>

Understanding valid HTML document structure is the first step in creating error-free PHP scripts.

The next two sections provide a quick overview of HTML tables and forms.

Understanding HTML Tables

HTML tables follow a structure as strict as the overall HTML document structure. One miscue, such as a missing closing tag, can cause great debugging headaches. Many programmers have examined their code for hours, calling in reinforcements to help them debug the mystery of the non-displaying pages, only to discover that they simply failed to insert the </TABLE> tag to close the table. This is known as "Smack the Forehead" syndrome. Repeat the mantra "Close all table tags," and you probably won't suffer from "Smack the Forehead" syndrome.

A simple table contains one row and two columns. The row starts with a <TR> tag and ends with a </TR> closing tag. Within the <TR> tags are the <TD> opening tag, followed by the data for that cells and the </TD> closing tag. Each <TD></TD> tag pair represents a column, so if you have two columns, you'll need two tag pairs. For example:

 <TABLE> <TR>              <TD>Cell 1</TD>              <TD>Cell 2</TD> </TR> </TABLE>

The browser will display this code as follows:

 Cell 1        Cell 2

To place a column heading above each column, use the <TH></TH> tag pair. For example:

 <TABLE> <TR>              <TH>Heading 1</TH>              <TH>Heading 2</TH> </TR> <TR>              <TD>Cell 1</TD>              <TD>Cell 2</TD> </TR> </TABLE>

Table headings are usually displayed in bold text. The browser will display this code like this:

Heading 1	Heading 2
Cell 1	Cell 2

HTML tables can be as complex or as simple as you need them to be, and can even be nested within one another. The more complex the table code, the greater the chance for rendering errors. If you remember to close all open table tags, including row and data tags, the likelihood of errors will certainly decrease.

Understanding HTML Forms

This section explains the display and internal elements of an HTML form. Later in this chapter you'll learn how to make functional forms using PHP scripts; but first, the basics. Committing form basics to memory will alleviate script-debugging headaches, just like remembering to close all table tags!

Forms begin with an opening <FORM> tag and end with the closing </FORM> tag. The form's method and action are defined in the opening <FORM> tag, like this:

 <FORM METHOD="POST" ACTION="go.php">

Two methods exist for sending forms.

GET. The default method. Sends input to a script via a URL. The GET method has a limit to the amount of data that can be sent, so if you plan to send a large amount, use POST.
POST. Sends input in the body of the submission, allowing for larger form submissions.

The action is the name of the script receiving the input.

After defining the method and action, you need a way to get data to your script: input elements.

There are three input element tags-<INPUT>, <TEXTAREA>, and <SELECT>-and there are several types within those elements. Following are the common types:

Text fields. An input field with a size indicated in the SIZE attribute and a maximum length indicated in the MAXLENGTH attribute. Here's a 20-character text field named "Fieldl" with a character limit of 50 characters:
```
 <input type="text" name="Field1"  size-20 maxlength=50> 
```
Password fields. Similar to text fields, except each typed character is displayed as an asterisk (*). Here's an example of a 20-character password field named "Pass1" with a character limit of 50 characters:
```
 <input type="password" name="Pass1" size=20 maxlength=50> 
```
Radio buttons. A radio button exists in a group. Each member of the group has the same name but a different value. Only one member of the group can be checked-for example, a button with the value "yes" or a button with the value "no." Additionally, you can specify that one of the values be checked by default. Here's an example of a radio button group named "like_coffee", with "yes" and "no" as available answers:
```
 <input type="radio" name="like_coffee" value="yes" checked> yes <input type="radio" name="like_coffee" value="no"> no 
```
Checkboxes. Like radio buttons, checkboxes exist in a group. Each member of the group has the same name but a different value. However, multiple checkboxes in each group can be selected. Additionally, you can specify that one or more of the values be checked by default. Here's an example of a checkbox group named "drink", with "coffee", "tea", "water", and "soda" as available answers:
```
 <input type="checkbox" name="drink[]" value="coffee"> coffee <input type="checkbox" name="drink[]" value="tea"> tea <input type="checkbox" name="drink[]" value="water"> water <input type="checkbox" name="drink[]" value="soda"> soda 
```
The use of brackets ([]) after "drink" indicates that the responses are to be placed in an array. You'll learn more about retrieving information from forms later in this chapter.
Text areas. These are displayed as a box with a width indicated by the number of COLS and a height indicated by the number of ROWS. Text areas must have a closing </TEXTAREA> tag. Here's an example of a text area named "message" with a width of 20 characters and a height of five characters:
```
 <textarea name="message" cols=20 rows=5></textarea> 
```
List boxes/drop-down list boxes. These input types begin with the <SELECT> tag, contain one or more <OPTION> tags, and must end with the closing </SELECT> tag. The SIZE attribute indicates the number of <OPTION> elements displayed. If SIZE=1, a drop-down list will appear; otherwise, the user will see a scrollable list box. If the MULTIPLE attribute is present within a list box, then the user can select more than one <OPTION> from the list. <OPTION> tags have unique values. The default <OPTION> tag is set using the SELECTED attribute. Here's a drop-down list named "year", with "2003" as the default selection from the options 2003, 2004, and 2005:
```
 <select name='year" size="1"> <option value="2003" selected>2003</option> <option value="2004">2004</option> <option value="2005">2005</option> </select> 
```

When you create forms, the NAME attributes of your input elements must all be unique. These element names become the variables interpreted by your scripts, which you'll learn about later in this chapter. So, if you have a field called "my_name" with a value of "Joe", and you have another field called "my_name" with a value of "coffee", then the script will overwrite the former value with the latter. From that point forward, according to the script, your name would be "coffee" and not "Joe".

The final element of a form is crucial-it's the button that submits the form to the script! Submit buttons can be the default gray 3D form buttons with text, or you can use images.

For a gray 3D button that displays SUBMIT, use

 <INPUT TYPE="submit" NAME="submitme" VALUE="SUBMIT">

The VALUE attribute contains the text that appears on the face of the button. If you wanted this button to say "Send Form", the code would look like this:

 <INPUT TYPE="submit" NAME="submitme" VALUE="Send Form">

To use an image as a submission button, use

 <INPUT TYPE="image" NAME="submitme" src="/books/2/864/1/html/2/button_image.gif" alt="Submit Me" border=0>

When the user clicks the form submission button, the input field names and their associated values are sent to the script specified as the form's ACTION.