PHP Templates: Critical and Easy
Nothing here is rocket science (or even novel) but its a vital concept for web-designers, regardless of how you code a page: templates. Templating your website allows you to have a consistent look across all of your pages, allows for incredibly easy design updates and server migrations, and allows you to seamlessly integrate third party components (such as a WordPress blog) into your website design (for a good example, go to www.survivedgear.com - I was lazy with this site).
History
What's the big deal?
When I first started making websites it was almost entirely HTML, pure and simple. CSS, Javascript, and server-side languages like PHP were coming on the scene but hadn't passed my radar.
The beauty of combining HTML with CSS and Javascript is a topic all its own, so I'll try writing about that in a subsequent post. I mention them, though, because all of these technologies apply the same basic principal that fundamentally makes web design more scalable and manageable: it is best to separate the structure (HTML/PHP), design (CSS), and function (Javascript) of a website.
To illustrate what this means for a webmaster, let's take the following example:
Imagine you make a simple 'homepage' that contains 5 pages (index, about, hobbies, pictures, contact). You would start by creating your design for a single page (presumably the index).
When the index page is done and you like the way it looks, you simply copy that file four times and replace the appropriate content with information for "about me", "hobbies", and so on.
This works fine!
What if you want to change a certain structural element, though? What if you need to include a new div container, add a new link, or include a new image for the layout?
You need to make the same change to all 5 files!
Changing 5 files might not sound that bad, but imagine if your website contains 50 pages and they are in different directories? This is not a scalable method, to be sure.
Server Side Scripting Languages
I prefer PHP but the principles below apply to other languages (i.e. Ruby on Rails) too.
Enter PHP. Not only can PHP generate webpages on the fly by pulling from a database (topic for future discussion) but it can help solve the "50 file changes" problem. Here's the theory:
- I have a website with 50 pages but I don't want to change all 50 files every time I make a tweak to the design
- All of my pages contain both elements that are the same and elements that change. In this blog, for example, the basic look and feel stays the same but the text in the middle changes.
- With this in mind, I will separate the elements that remain the same and store them in one or more discrete files, which are then referenced by each page on my website.
Now that I have done this, I can change a single file and all of my pages are automatically updated when they load! Let's take a quick real-life example to see how it works.
Implementation
Most websites can be broken down into a header.php and a footer.php file that contain all of the non-changing structural elements of the site. All of the changeable content goes in the middle. Of course this won't apply to everything, but the concept remains the same. Here is an incredibly basic example of a 2 page website: index.php and about.php.
To template a page, you simply start with a full HTML page. Let's say that you have already coded your index.html page and now you want to template it.
Step 1
Write your index page as normal, including any styles and scripts you want to include. Save as index.html.
<html> <head> <title>Test page</title> <link href="styles/core.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="menu">Link 1 - Link 2</div> <div id="content"><!-- start of content div --> This is my index page! </div> <!-- end of content div --> <div id="footer">(c)2009 Gilman Callsen</div> </html>
Step 2
In this example, its clear that everything from "menu" up (the 'header') and everything from "footer" down (the 'footer') will remain the same on every page of the site. The only thing will change is the text inside "content".
To take care of this, we will put the 'header' and 'footer' information into their own separate files and simply call them from all of our pages.
Step 2a - header.php
Make a new file called "header.php" and place the following code into it:
<html> <head> <title>Test page</title> <link href="styles/core.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="menu">Link 1 - Link 2</div> <div id="content"><!-- start of content div -->
Step 2b - footer.php
Make a new file called "footer.php" and place the following code into it:
</div> <!-- end of content div --> <div id="footer">(c)2009 Gilman Callsen</div> </html>
Step 2c - index.php
Now, make a final file called "index.php", containing the following code:
<?php //Include the header file include ("path/header.php"); ?> <!-- ************************ --> <!-- BEGIN CHANGEABLE CONTENT --> <!-- ************************ --> This is my index file! <!-- ********************** --> <!-- END CHANGEABLE CONTENT --> <!-- ********************** --> <?php //Include the footer file include ("path/footer.php"); ?>
Step 3 - repeat the steps!
That's it! Now you are all set up to have a templated website. For every other page in your site, you simply create a new *.php page with the same code and change the content in the "CHANGEABLE CONTENT" region. Let's look at how our "about.php" page looks:
<?php //Include the header file include ("path/header.php"); ?> <!-- ************************ --> <!-- BEGIN CHANGEABLE CONTENT --> <!-- ************************ --> About me! Not much to say, I suppose... <!-- ********************** --> <!-- END CHANGEABLE CONTENT --> <!-- ********************** --> <?php //Include the footer file include ("path/footer.php"); ?>
Conclusion
That concludes this tutorial - a very simple overview of how you can use PHP to make a website more manageable and easy to update.
There are many other tricks you can use with PHP outside the scope of this entry, such as making dynamic page titles, defining the page path through the server root (to allow for ultra-easy server migration), automatically generating pages by pairing with a mySQL database (what all WordPress blogs do), etc.
January 7th, 2010 - 11:57
I want to quote your post in my blog. It can?
And you et an account on Twitter?
January 7th, 2010 - 12:58
You can! You can find me on Twitter @gilmancallsen .