PHP Templates Full Tutorial
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:
- a site logo
- a main navigation menu
- an area for the main content of the page
- a footer at the bottom
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:
- the title ( <title> )
- the main heading ( <h1> )
- the content
- whether to include a sidebar or not
... 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.
PHP Variables
Those of you who have never done any programming may find variables a bit difficult to understand at first. I'll try to explain them at a basic level. Let me first make a comparison. When speaking in English, we often use non-specific pronouns like "he," "she," "it," and "they" in the place of the real objects they represent. It would be cumbersome to always use all of the proper names of everything. In one instance, the pronoun "he" might mean "Steve," and in another instance, it might mean "Gary." The pronoun "he" is a variable that takes on a specific meaning depending on the context
Variables in PHP are kind of like these non-specific pronouns. They represent real objects, but they themselves are just generic placeholders, rather than the objects themselves.
As a programmer, you get to make up the names of your own variables. If you want to create a variable that keeps track of colors, you can call the variable "color" if you want to. That would make sense. In PHP, you designate a variable by putting a dollar sign in front of it: $color. There are a few things to consider when making up variable names:
- spaces are not allowed
- no puncutation is allowed: use only letters, numeral, dashes, and underscores
- variable names are case-sensitive
- variable names can't start with a numeral
Once you decide on a name, you get to assign an initial value to the variable. For example:
$color = 'red';
Notice that there is a semi-colon at the end of the line. This is required. You must end each programming statement with a semi-colon so the software knows where one statement ends and the next begins.
By themselves, variables are rather useless, but as soon as we apply them to contexts, their usefulness increases. To show the value of a variable, we have to "echo" the value. I don't know why they chose the word "echo," but that's the word they chose, so that's what we have to use. Here is an XHTML paragraph that makes use of our $color variable:
<p>Today, I'm going to wear a <?php echo $color; ?> tie.</p>
The above construction allows us to substitute any color we want in that sentence. If we set $color = 'blue'; the sentence will say "Today I'm going to wear a blue tie." The sentence never has to change. Only the color changes.
The web server processes the PHP code and puts in the variable value in its place, so the end result in the code looks as if no PHP was used at all. Using our color example, the end result, from the perspective of the browser looks like this:
<p>Today, I'm going to wear a blue tie.</p>
All traces of the PHP code are gone.
When we apply this idea to templates, it allows us to use variables for things like the <title> of the page and the main heading:
<title><?php echo $title; ?></title>
and:
<h1><?php echo $h1; ?></h1>
Of course, we have to set the value of the variables previously, or else there won't be anything to put there.
Quotation Marks and "Escape" Characters
You have to be careful when using things like quotation marks or apostrophes when working with PHP, because quotation marks (either single or double quotation marks) mark the beginning and ending of values. If you have an apostrophe or quotation mark in the middle of a value, PHP will think it has reached the end of the value. For example, if you write:
<?php $lastname = 'O'Niel'; ?>
That won't work because the apostrophe after the "O" will be interpreted as the end of the value. There are a couple of ways to get around this:
1. Use the opposite kind of quotation mark (double vs. single):
<?php $lastname = "O'Niel"; ?>
OR
Type a backslash before the apostrophe, like this:
<?php $lastname = 'O\'Niel'; ?>
The first method is usually easier to read, but either method will work. It's still best to use single quotation marks whenever possible for variable values, because of the way PHP processes text. Text in single quotes is interpreted as plain text and is processed very quickly. Text in double quotes may be plain text or it may be PHP code, so the server processes this text more carefully and slowly, which has a slight negative effect on the speed of the page. For simple pages the difference won't be noticeable at all. It only makes a noticeable difference with very large scripts.
PHP Functions
Whereas variables are simple statments of equivalence (A=B), functions allow for complex logic and other features that you can't get with simple variables. We won't get into any complex logic in this class, but we will use functions to display long passages of XHTML markup. To create a function, you have to designate it as such, then put parentheses at the end of the function name. In more complex functions, the parentheses are used to pass variables to the functions. We won't do that in our example here though. We're going to keep it simple. The actual content of the function starts with an opening brace ( { ) and closes with a closing brace ( } ). Here is an example of an empty function called "content," before putting the actual content into it:
<?php function content(); { } ?>
In our case, we're going to insert some XHTML content in the middle of the function, which means that we have to end the PHP code, start XHTML markup, then start PHP back up again, like this:
<?php function content(); { ?> <p>XHTML markup goes here.</p> <?php } ?>
Using functions like this allows us to have regular XHTML markup in the middle without having to worry about which quotation marks to use, or whether to use backslashes all over the place to "escape" quotation marks or apostrophes.
All we've done so far is declare the value of the function, but we haven't yet done anything to actually use that value, so here's an example of how to use a function in the middle of a web document:
<p>Here is a paragraph before the function.</p> <?php content(); ?> <p>Here is a paragraph after the function.</p>
If the value of the function is the one in our example, the end product would look like this after the server is done processing the PHP code:
<p>Here is a paragraph before the function.</p> <p>XHTML markup goes here.</p> <p>Here is a paragraph after the function.</p>
A PHP Template System
Now that you know the basics of how PHP works, let's look at a real world application. We'll use PHP to create a template system. You already got a sneek peek at what the template would look like in the introduction to this section. Here is the code again for the template:
<!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>
You would save this code in a file called template.php.
How do We Use the Template?
We still have to create separate files with the text content that goes in the web pages. In our system, we create some variables for the title and heading, and a function for the main content. Then, at the bottom of the document, we have to include our template so that the content has a place to go. A simple home page could look like this:
<?php
$title = 'Home';
$h1 = 'Home';
function content() { ?>
<p>Here is the content of my home page.</p>
<?php }
include 'template.php';
?>
It Won't Look Right Until You Upload it to the Web Server
When you open this file in Dreamweaver's design view, all you will see is the text from the content() function. Everything else is kept hidden, but you can see it all in the code view. Also, you won't be able to see what the page really looks like until the web server puts it all together on the server itself. This takes some getting used to. You won't be able to see the styles or the template at all. It will all look very bland. But once you upload it, the server finds all the component parts and reassembles them into a single web page, as if it was all one unit, even though it's actually broken up into several pieces.
PHP Conditional Statements
We're only going to scratch the surface of the conditional logic available in PHP, but it will still give us a powerful tool to work with. Let's say that you have a design in mind for your web site that has a sidebar on some pages but not others.
Example 1: Including or Not Including a Sidebar
An efficient way to handle this would be to create a variable that designates a page as either having or not having a sidebar. We could call the variable $includeSidebar (remember that spaces are not allowed in variable names, so I chose to run the words together; I could have used a dash or an underscore instead). On each page, we would have a line of code that could look like this:
$includeSidebar = 'yes';
or like this:
$includeSidebar = 'no';
Then, in the template, we could have a line of code that interprets this value:
<?php if ($includeSidebar == 'yes') include 'sidebar.php'; ?>
This code will either include or not include the contents of a file called "sidebar.php." Notice that there is a double equals sign. The single equals sign is used to set a value. The double equals sign is used when interpreting a value. Also notice that there are parentheses around the condition. The parentheses are required.
Example 2: Controlling Styles in a Navigation Menu
Another useful application for PHP conditional statements is in assigning classes to elements for styling purposes. If you have a style called "selected" that makes a navigation menu item look selected, you would want to apply that style only to the menu item that was truly selected. You wouldn't want to apply it to all of the menu items at the same time. One way to do this is to create a variable called $selected and then create some PHP code to either assign or not assign the "selected" style to a given menu item. The web page would have this in the code:
$selected = 'home';
or like this:
$selected = 'resume';
or like this:
$selected = 'coursework';
and so on for each menu item.
In the template, you could have a section of code for each menu item that looks something like this:
<?php if ($selected == 'home') echo ' class="selected"'; ?>
This will put the word "selected" in the XHTML code for that menu item if the variable is set to "home." In the context of the list item of a navigation menu, the above code could look something like this:
<li<?php if ($selected == 'home') echo ' class="selected"'; ?>"><a href="index.php">Home</a></li>
The final code after the PHP is processed would look like this:
<li class="selected"><a href="index.php">Home</a></li>
You can make things a bit more complex than this, for example by assigning more than one class to a list item, as is the case in the Abigail sample web site. In that navigation menu, the link to the home page in the template looks more like this:
<li class="<?php if ($selected == 'home') echo ' selected'; ?>"><a href="/sample_website/abigail/">Home</a></li>
The end result looks like this:
<li class="selected"><a href="index.php">Home</a></li>
The "first" class can be used to style the first list item in the navigation menu differently than the other list items. You wouldn't have to do that, but you could. So in this case the styles for both "first" and "selected" are being applied.
And Plenty More
PHP conditional statements can be used to do all kinds of things. For further reading, refer to the "if" entry in the PHP documentation (read also the documentation for "else" and "elseif").
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.