5

I'm looking for advice on the best practice for separating site content up into logical blocks. I want a header and footer that are constant throughout the site, so that if I have several pages of different content, they will all look as below — changes made to the header and footer then update automatically without me having to change each individual page.

<?php
include 'header.php';
?>
<body>
    <p>page content here</p>
</body>
<?
include 'footer.php';
?>

The header.php would contain the opening <html>, <head> and static content, and the footer.php would contain any extra static content and the closing </html> tag. So, my question is: Is this a good approach? I'm worried that spreading the <html> tags across multiple files is bad practice. If so, what is the right way to approach this kind of design?

1
  • 4
    How could it be bad practice? WordPress does it. </sarcasm> Mar 3, 2011 at 16:01

4 Answers 4

15

Nope, your approach is wrong.
Here are main faults in your design:

  1. You're assuming that header.php would be called on the every page call. That's wrong.
  2. You're assuming that header.php will always be static. That's wrong.
  3. You forgot to create a template for the page itself.

The main rule everyone have to learn by heart:

Not a single character has to be sent into browser, until all data gets ready.

Why?

  • it's 2011 today. AJAX era. What if your code will have to send JSONed data instead of whole HTML page?
  • there is a thing called HTTP header. Sometimes we have to send them. And it's gets impossible if you already have your ornate HTML header sent.
  • it's for just 4-page site. Okay. Imagine you've got lucky and got a request for another 4-page site. You will have to change only templates and don't touch engine files. That's really great benefit.
  • Imagine you're going to make a custom <title> tag for your pages, based on the page content. Isn't it extremely common thing? But you can't make it without using templates.

So, you have to have one common site template containing header and footer and also dedicated templates for the every php script.

An example layout is going to be like this:

.1. page itself.

it outputs nothing but only gather required data and calls a template:

<?php
//include our settings, connect to database etc.
include dirname($_SERVER['DOCUMENT_ROOT']).'/cfg/settings.php';
//getting required data
$DATA=dbgetarr("SELECT * FROM links");
$pagetitle = "Links to friend sites";
//etc
//and then call a template:
$tpl = "links.tpl.php";
include "template.php";
?>

.2. template.php which is your main site template,

consists of your header and footer:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My site. <?=$pagetitle?></title>
</head>
<body>
<div id="page">
<?php include $tpl ?>
</div>
</body>
</html>

.3. and finally links.tpl.php is the actual page template:

<h2><?=$pagetitle?></h2>
<ul>
<?php foreach($DATA as $row): ?>
<li><a href="<?=$row['link']?>" target="_blank"><?=$row['name']?></a></li>
<?php endforeach ?>
<ul>

easy, clean and maintainable.

3
  • 7
    @Shrap, sorry I disagree here. The example he provided is rather common for simple sites. You're taking it to a level that many developers just don't need. And, there are several creative ways around issues such as your title example...such as defining the title as a variable and setting it before you call the header. He didn't mention any of that. And to say flat out that it's wrong just isn't right! I say it depends on the situation. Mar 3, 2011 at 16:20
  • 1
    I must admit, it is only for a four page, simple site but thank you for the pointer in the right direction - the issues you raise are things to think about as I get into more complex site designs!
    – persepolis
    Mar 3, 2011 at 20:40
  • 3
    @persepolis such a layout is based on years of research and experience. You'll be able to create number of sites all with different designs, without touching core files. That's great advantage of using templates. Also there are many other improvements. For example, based on the database query result you'll have to send only HTTP header or JSON data to serve AJAX call. It wouuld be easy with my layout and impossible with your initial one. and so on. After all, it would be easier to build even 4-page site with it. Mar 3, 2011 at 20:50
10

In building off of Your Common Sense's answer, there's not a good reason to have 2 files for every page. You can easily combine your template (YCS called this .tpl.php) and your actual page into one file.

First, start off with a class that you can expand as your template needs expand:

<?php
#lib/PageTemplate.php
class PageTemplate {
    public $PageTitle;
    public $ContentHead;
    public $ContentBody;
}

Then, make your layout:

<?php
# layout.php
require_once('lib/PageTemplate.php');
?>
<!DOCTYPE HTML>
<html>
<head>
    <title><?php if(isset($TPL->PageTitle)) { echo $TPL->PageTitle; } ?></title>
    <?php if(isset($TPL->ContentHead)) { include $TPL->ContentHead; } ?>
</head>
<body>
    <div id="content">
        <?php if(isset($TPL->ContentBody)) { include $TPL->ContentBody; } ?>
    </div>
</body>
</html>

And finally, add your page with the body content:

<?php
#Hello.php
require_once('lib/PageTemplate.php');
# trick to execute 1st time, but not 2nd so you don't have an inf loop
if (!isset($TPL)) {
    $TPL = new PageTemplate();
    $TPL->PageTitle = "My Title";
    $TPL->ContentBody = __FILE__;
    include "layout.php";
    exit;
}
?>
<p><?php echo "Hello!"; ?></p>
2
  • This also seems to have two files for every page? (hello.php and the contents of ContentBody)? Aug 13, 2017 at 15:39
  • ContentBody is the contents of hello.php (or whichever file you're on). The trick is __FILE__. So it's just one file per page, with a single template file and layout file.
    – mattmc3
    Dec 6, 2018 at 15:43
4

This is a basic approach but, yeah, it does work :) I sure would bother with a lot of templating and OOP but you are definitely on the right path

As i can't comment anymore, then i will answer here ;) If he need a custom title then he needs some more advanced functions. So, as i told, this is a basic approach. But in the end, if he really have a static header/footer, and really use them everywhere, well, yes, this is a good way to go.

So ofc you could bother with some advanced headers with parameters you could feed on each page. You could go on a whole MVC stuff. In the end just tell him to use a pre-made framework and stop bothering. How could he learn if you don't let him do some trial and error ?

4
  • what if he would need a custom title? Mar 3, 2011 at 16:15
  • 1
    Dude, drop the custom title thing. Many people just don't care! Mar 3, 2011 at 16:20
  • I understand that you want to provide him with better quality html. But then you need to offer him the possibility to add metz from an array. And custom css/js for each page. Maybe even concatenate them to have less http request. You could.
    – tsadiq
    Mar 3, 2011 at 16:28
  • why to list all these improvements one by one? it's all available by default with my design. No need to mention them all Mar 3, 2011 at 17:24
-6

index.php -- includes header, footer, and content based on REQUEST variable.
header.php -- header content
footer.php -- footer content

content1.php, content2.php, etc.


index.php:

<?php
include ('header.php');

// VERY IMPORTANT - do not use the GET variable directly like this
// make sure to filter it through a white-list
include(basename($_GET['page']).'.php');

include ('footer.php');
?>

if you want the URL to go www.domain.com/pagename where the page you're trying to load into index.php is "pagename", use HTACCESS and do some URL Rewriting: http://corz.org/serv/tricks/htaccess2.php

7
  • 1
    the risk here is that people may feed the $_GET['page'] with a full url and include a malicious script that'd be able to browse through your entire folder. You most likely don't want this, thin kabout checking the value of that var first of all :)
    – tsadiq
    Mar 3, 2011 at 16:15
  • 1
    that's file injection here, extremely dangerous vulnerability Mar 3, 2011 at 16:18
  • 2
    Yeah this is a big security no-no. Do not do it this way.
    – JonB
    Mar 3, 2011 at 16:19
  • 2
    i was assuming that $_REQUEST['page'] would be cleaned/checked before it was used. i was under the impression that bpeterson76 was just looking for the way to do it, not 100% of the code.
    – circusdei
    Mar 3, 2011 at 16:24
  • 2
    i have the impression he's just learning and you must not mislead someone in such trap ^^
    – tsadiq
    Mar 3, 2011 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.