PHP Templates - Introduction

When you create a web page—one web page—the techniques that we have been learning in class are pretty much all that you need to know. You simply start a new file in Dreamweaver, type your content, add your styles, and save the file with a .html or .htm extension at the end. That's easy enough.

However, most web sites consist of more than one web page. The site might have three pages, or 10,000 pages. Most of the time these pages have certain things in common. Most pages on the site probably have things like:

They might also have things like a sidebar, an area for users to write comments, a link to log in, and so on.

It would be a waste of time and effort to type or copy and paste those things on every page. The worst part would be when you have to update the entire site. It means going through every page individually and changing each one of them. Yuck.

That's why professional web developers don't do this. Thy use templates instead. With a template, you can create a design, then designate certain parts of that design as variables that depend on the purpose of the page. You can set variables for things like:

... and all kinds of other things.

Component Parts

To use a template system effectively, you have to stop thinking of web pages on a page-by-page basis, and start to think of them in terms of their component parts. At the most basic level, think of the pages as the content and the template as the design. Let's look at a very basic example. Here is a web page with nothing more than a title, a heading, and a sentence of content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Here is the title</title>
   </head>
   <body>
     <h1>Here is the heading</h1>
     <div id="content">
       Here is the content
     </div>
   </body>
 </html>

This same structure, or template, could be used to create a different web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Here is another title</title>
   </head>
   <body>
     <h1>Here is another heading</h1>
     <div id="content">
       Here is more content
     </div>
   </body>
 </html>

Only the text has changed. What we really ought to do is save the structure around the text as a template. One way to do this is to use the programming language called PHP.

Introduction to PHP

Oh no! Not another technology that you have to learn! Yes, it's true, PHP is another technology, above and beyond basic XHTML. It's one of the most useful ones out there, though, for web programming, so it's good to know at least a few basic things about it. All of the concepts are applicable to other programming languages too, even if the syntax looks a little different.

There are many, many ways to use PHP to create a template. In this class, we're going to use a system that ends up creating a file that looks like this (in it's simplest form):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title><?php echo $title; ?></title>
   </head>
   <body>
     <h1><?php echo $h1; ?></h1>
     <div id="content">
        <?php content(); ?>
     </div>
   </body>
 </html>

It may look a little strange, but it's not very complicated in concept. The PHP code above designates certain areas of the page as changeable. Those areas are just like empty boxes, waiting for some content to fill them up. If you look closely at the code above, you'll notice that there are two ways in which PHP is used. Two of them have the word "echo" in there, and one does not. I'll explain that in a moment, but first I'll explain a few things about PHP in general.

Opening and Closing Tags

Much like XHTML, PHP has starting and ending tags, even though they look a bit different. PHP code starts with <?php and ends with ?>. Some web servers allow to start PHP with just <?, but it's usually a better practice to include the full <?php, in case you ever port the code to a different server tha doesn't support the short tags. Everything in between the start and tag is PHP code, not XHTML. You can insert PHP code in any location within an XHTML document.

Save Files with .php at the End

PHP won't work at all unless you save the file with .php at the end. You learned previously that you need to use .htm or .html at the end of files for XHTML documents. That's still true. But since we want the web server to interpret our PHP code, we have to save our PHP pages with .php at the end. Otherwise the web server will treat the documents as plain XHTML pages, and it won't process the PHP code at all. So instead of having index.html as your home page, you would have index.php as your home page. All pages that use PHP must have this extension at the end: about.php, resume.php, contact.php, etc.

Why Use PHP and not Just XHTML?

Plain old XHTML can't do anything except just sit there. It has structure, but no logic. It can't evaluate conditions and react to them. XHTML alone can't create a dynamic template system. You need some sort of programming language to do that. PHP is just one of many such languages. Others include Java Server Pages (JSP), Active Server Pages (ASP), Cold Fusion, Python, Perl, and more. We're using PHP in this class because PHP is one of the most popular web scripting languages in the world, and it's free. The official web site for PHP is php.net.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.