Have head in each template or have reusable function?


I’ve starting playing with template engines as a way to separate my presentation from logic.

I’ve looked around some existing applications and many of them have their head code in every page template, which to me could be problematic if you need to change the head across the site. It makes more sense to me having a function run outside the page view script that applies the head code afterwards, but then again you’re assuming every page will be the same. Its the chicken and the egg!

With this in mind, what approaches do any of you go with - head in each template, reusable function or different method all together.

When I talk about head code, it also refers to things like site logos and menus not just the HTML head - in other words things that could be considered the header for a page. I may be looking at this differently as well, so please give me an insight into what you do in terms of breaking up reusable site-wide layouts when using template engines.

Thanks in advance.

Have layouts (overall templates into which other templates fit). The layouts contain the head portion, only the body gets replaced by the template of the individual action. Even then, the head can be partially dynamic. For example, you might put placeholders or function calls for the title, meta tags, scripts and stylesheets. These get replaced/filled with the values dependent upon the individual page being displayed.

I have taken to the idea of reusable modules that can be executed within any template or module at any time. So I would separate out the header and footer for a site into two separate modules then execute them within the master module.

<?php echo $this->_objApp->executeModule('Site.*.Module.Header'); ?>

<?php echo $this->_objApp->executeModule('Site.*.Module.Footer'); ?>

Those two lines within my master template would execute the footer and header independently and return the HTML contents. The advantages of such a system is that you can reuse the header and footer anywhere at any time without replicating code because I’m not a fan of replication and doing things more than once.

The header and footer are essentially completely decoupled from any other template or module meaning they can be requested on their own or within something else.

definitely put the header and footer into an include and call that from your controller.

As pointed out by Dan, you can customize aspects of the header on a page by page basis, but you can also display a completely different header or footer based on the requirements of the page.

Every page generation I put in a custom title, sometimes a custom meta description / keywords, and have placeholders for special case css and javascript. That way you only call the elements you need on any given page.

I have a master template in my system, which all other templates fit into. The master template includes the header, footer, and a marker to show where the body should be inserted, which is then handled with the other templates in the system. It also allows for included templates (like include files) if that route makes more sense.

That really looks no better than <? include ‘header.php’; ?> to me… what if the module does something different based on its output… e.g. for my admin login control I don’t want to expose admin related javascript unless you’re logged in.

It’s far better to use a “push” method than a “pull” method as it gives you total control.

My modules look like this:

class MyModule extends Module {
	public function main() {
		$this->title = 'module';
		$this->write('left block', 'left');
		$this->write('right block', 'right');

Which get written into a template which looks like this:

	{head} <!-- pull in js/css html from the module -->
<div class="left">{module output="left"}</div>
<div class="right">{module output="right"}</div>

By passing the module to the template, rather than calling the module from the template you get far higher flexibility. This also reduces the repetition because you dont need to call in the header for each specific module, the one you’re working with is passed to the general layout and it’s done.

By doing

<?php echo $this->_objApp->executeModule('Site.*.Module.Footer'); ?>

surely you need some logic in there to pull in the currently active modules header… which seems backwards to me.

All modules have access to the master program. Any module at any time can request that type of information from the master program and change its behavior accordingly.

That can also be done. Any module can be executed from within a template or within another module and embedded into the template.

That logic would reside inside the module, not the template. In your case it seems like the best solution would be to make the Admin and Front-End Headers separate modules as well which the Header module would delegate.

This is I would achieve that switch.


class Demo1_Header extends Module {

	public function execute($arrArgs) {
		if($this->_objMCP->getUsersId()) {
			$this->_arrTemplateData['HEADER_TPL'] = $this->_objMCP->executeModule('Site.*.Module.Header.AdminHeader');
		} else {
			$this->_arrTemplateData['HEADER_TPL'] = $this->_objMCP->executeModule('Site.*.Module.Header.FrontEndHeader');
		return 'Header/Header.php';



<div id="header">
<?php echo $HEADER_TPL; ?>

Thanks for the feedback so far, it has been extremely helpful.

I like the idea of working with a master template and I’m looking at something like that, with the possibility of loading one of a set of available templates based on parameter set in module (i.e. admin, front end, etc). I take it this master template would be loaded after the body has been built by the calling method?

I’ve read several times about the concepts of “pushing” or “pulling” actions between modules; wouldn’t mind understanding them a bit more. As far as I understand it, pulling actions are instances when you extract data from another location; pushing actions on the other hand pass on their responsibilities somewhere else (i.e. function ProcessForm($this) …).

Could someone explain this to me in layman’s terms, or point me in the right direction? I appreciate “push” is a more desirable method, but just can’t visualise how its done.

My master template works by basically swapping the template you are trying to use with the master one, then 'include’ing the intended template in the appropriate place. I have MasterView class which sorts out all the variables and templating in the master template, and all the other View helper classes extend the master view.

Your complicating your life… and making everything harder to maintain.


 <?php include('common_includes.php'); ?>
  <div id="outer_wrapper">
   <?php echo $content; ?>


 <?php include('common_includes.php'); ?>
  <div id="inner_wrapper">
   <?php echo $menu; ?>
   <?php echo $content; ?>


<?php echo $errorsOrMessages; ?>
<form action="" method="POST">
<label>Login: <input type="text" name="name" value="<?php echo $name; ?>" /></label>
<label>Pass: <input type="password" name="pass" value="" /></label>
<input type="submit" value="login" />

login page

$template = new Template('wrapper_01.tpl');
$template->content = new Template('login.tpl', $defaults);
echo $template;

edit profile page

$template = new Template('wrapper_02.tpl', $defaults);
$template->menu = new Template('profile_menu.tpl', $defaults);
$template->content = new Template('profile_edit.tpl', $defaults);
echo $template;

Note: $defaults is an array that gets extracted to the template, that is the way you pass variables to it.

If you do it like that, you can give the HTML to a designer, and they can work with it in dreamweaver/front page…/whatever they use without having to worry that they mess something up.

You haven’t seen the content of my templates, so how can you say I am making things hard for myself?

Basically, from both your posts. :slight_smile:

That tells me you will have problems with outside, inside, popup pages.
And that you have some logic in there, to see if the user is logged in or not, to be able to include the appropriate header/footer file.

It also says your header/footer is split in two pages (2 includes).
That works, I used to do it like that for the longest time, except that when you deal with integrators / designers, they won’t put the two files together easily (the work-flow gets complicated, especially with designers that don’t know **** about development but think they do).

That says that you have multiple classes to deal with your templates. Each class potentially containing business logic (or some kind of IFs).

That means, if you make a different site, that is not the same as your current one, you cannot just reuse the code. You will have to modify those classes / html templates.

[INDENT]Than again, even in my suggested solution you end up with IFs in the HTML. Ifs for the permissions / ACL…
Ex: show the EDIT link/button on a page only if the logged in user is an administrator or page owner.

<?php if(ACL::allow($user,'edit',$post)): ?>
  <a href="#edit">edit</a>
<?php endif; ?>

Suggestions on how to take this off are welcomed.[/INDENT]

In reality, you only need 1 template class (the one that has the template code in it), and possibly one or two helper classes that will set the defaults on those templates (basically some factory class for templates to save you typing / duplicate code).

Well firstly you are wrong about the header and footer being separate - that’s what the master template is for - and you are wrong about business logic being inside my view helpers. The job of the view helpers is to take the data from models and perhaps some other sources (xml files for example) and insert them into the template. There is no business logic there - I leave that for the models and controllers.

The MasterView and BaseView view helpers are perfectly reusable if needed - the BaseView class contains functions and methods to help escape output, perform common tasks, loading and dealing with templates etc, whereas the MasterView is changed to fit the site and contains things that appear in the master template (such as loading stylesheets, scripts etc), but not the individual pages, which are handled by their own view helper classes.

An example of a master template on one of my sites is below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <base href="{base_uri}">

    <title>Inter University Gliding Competition 2010</title>

    <link rel="stylesheet" type="text/css" href="styles/main.css" media="screen">
    <link rel="stylesheet" type="text/css" href="styles/main-print.css" media="print">
<!-- [stylesheet] -->
    <link rel="stylesheet" type="text/css" href="{stylesheet_href}" media="{stylesheet_media}">
<!-- [/stylesheet] -->
    <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="styles/ie6.css" media="screen"><![endif]-->

    <script type="text/javascript" src="scripts/jquery.js"></script>
<!-- [googlemapsapi] -->
    <script type="text/javascript" src="http://www.google.com/jsapi?key={google_maps_api_key}"></script>
<!-- [/googlemapsapi] -->
<!-- [script] -->
    <script type="text/javascript" src="{script_src}"></script>
<!-- [/script] -->

    <div id="container">
      <div id="header" class="{header_class}">
        <h1 id="main-title">Inter University Gliding Competition 2010</h1>

        <a href="{base_uri}"><img id="main-logo" src="images/logo-iu10.png" width="189" height="124" alt=""></a>

        <p id="sub-title"><strong>Bicester Airfield, 7th to 15th August 2010</strong></p>

      <div id="navigation">
        <ul class="nav">
          <li id="nav-about"{[about.active| class="curr"]}><a href="about/">About</a>
<!-- [removed-news-for-the-moment] -->
              <li{[about.news.active| class="curr"]}><a href="about/news/">News</a></li>
<!-- [/removed-news-for-the-moment] -->
              <li{[about.2010competition.active| class="curr"]}><a href="about/2010-competition/">2010 Competition</a></li>
              <li{[about.gliding.active| class="curr"]}><a href="about/gliding/">Gliding</a></li>
              <li{[about.interunis.active| class="curr"]}><a href="about/inter-unis/">Inter Unis</a></li>
              <li{[about.previouswinners.active| class="curr"]}><a href="about/previous-winners/">Previous Winners</a></li>

          <li id="nav-site"{[site.active| class="curr"]}><a href="site/">Site</a>
              <li{[site.bicester.active| class="curr"]}><a href="site/bicester/">Bicester</a></li>
              <li{[site.aroundthearea.active| class="curr"]}><a href="site/around-the-area/">Around The Area</a></li>
              <li{[site.howtofind.active| class="curr"]}><a href="site/how-to-find/">How To Find</a></li>
              <li{[site.prices.active| class="curr"]}><a href="site/prices/">Prices</a></li>

          <li id="nav-rules"{[rules.active| class="curr"]}><a href="rules/">Rules</a>
              <li{[rules.tasks.active| class="curr"]}><a href="rules/tasks/">Tasks</a></li>
              <li{[rules.progression.active| class="curr"]}><a href="rules/progression/">Progression</a></li>
              <li{[rules.soaringcompetition.active| class="curr"]}><a href="rules/soaring-competition/">Soaring Competition</a></li>

          <li id="nav-contact"{[contact.active| class="curr"]}><a href="contact/">Contact</a>
              <li{[contact.contactinformation.active| class="curr"]}><a href="contact/contact-information/">Contact Information</a></li>
              <li{[contact.emailus.active| class="curr"]}><a href="contact/email-us/">Email Us</a></li>

      <div id="breadcrumb">
        <p>Breadcrumb Trail:</p>

          <li><a href="{base_uri}">Home</a></li>
<!-- [breadcrumb] -->
          <li{[breadcrumb.active| class="curr"]}><a href="{breadcrumb_href}">{breadcrumb_name}</a></li>
<!-- [/breadcrumb] -->

      <div id="content">

      <div id="footer">
        <a href="http://www.windrushers.org.uk/"><img src="images/logo-windrushers.png" width="30" height="28" alt="Windrushers Gliding Club"></a>
        <a href="http://www.nugc.net/"><img src="images/logo-nugc.png" width="36" height="28" alt="Nottingham University Gliding Club"></a>

        <p>&copy; Nottingham University Gliding Club {copyright_year}</p>

        <ul class="nav">
          <li{[footer.sitemap.active| class="curr"]}><a href="sitemap/">Sitemap</a></li>
          <li{[footer.privacy.active| class="curr"]}><a href="privacy/">Privacy</a></li>
          <li{[footer.accessibility.active| class="curr"]}><a href="accessibility/">Accessibility</a></li>
<!--[if lt IE 7]>
    <div id="browser-upgrade">
      <h1>Inter University Gliding Competition 2010</h1>

      <p>Welcome to the website of the Inter University Gliding Competition 2010.</p>

      <div id="upgrade-message">
        <h2>Browser Upgrade Required</h2>

        <p>This website is not supported on Internet Explorer version 6 or below. It uses up to date web standards and
        features which are not available on any earlier version of Internet Explorer.</p>

      <p>While an up to date browser when it was launched, Internet Explorer 6 is now getting on for 9 years old, and is
      very outdated compared to modern standards. To support this browser would have required sacrificing a lot of the features
      on this website, which we weren't willing to do to cater for such an outdated browser.</p>

      <p>Please consider upgrading to one of the following browsers to view this website. Not only will you have a better
      browsing experience on modern websites, but you will benefit from greatly increased security and privacy, as well as being
      able to take advantage of the great features in modern browsers.</p>

        <li id="upgrade-ie"><a href="http://www.microsoft.com/windows/internet-explorer/worldwide-sites.aspx">Internet Explorer 8</a></li>
        <li id="upgrade-ff"><a href="http://www.mozilla.com/firefox/">Firefox 3.6</a></li>
        <li id="upgrade-c"><a href="http://www.google.co.uk/chrome/">Chrome 3</a></li>
        <li id="upgrade-s"><a href="http://www.apple.com/safari/download/">Safari 4</a></li>
        <li id="upgrade-o"><a href="http://www.opera.com/browser/">Opera 10</a></li>

The <!–<SLAVE>–> marker is where the individual page template goes.

I’m interested to see how the template for the logged in section of the site looks like, or the template for a popup box.

They aren’t yet part of that site, but they will just be different sections of the main template. Popup boxes can be created on the fly with JavaScript.

That’s when you will have the problems I described.

If the user is logged in, you will need a different HTML for that wrapper (most the time, you will want to keep the header only).

Since your always including that one template, you will need an IF somewhere to show inner or outer wrapper.

Same for the popup. You will need another wrapper for it, so you will either have your header includes duplicated, or end up with a bunch of IFs in your template (or not use a template for it…).

Yup, and there’s no other way around it. If you want to show different content for logged in users, you HAVE to either have 1 template with 2 separate sections, or 2 separate templates. Maintenance is no harder on one than the other, and neither is a real problem.

Look at my example again, since you don’t have that problem there.

Your business logic would be in the controller, instead of the view (template).

# This is in the parent controller, so you only have this once in your site
if (isPopup()) {
  $template = new Template('popup_wrapper.tpl');
} else if (isLoggedIn()) {
  $template = new Template('inside_wrapper.tpl');
  $template->menu = new Template('profile_menu.tpl', $defaults);
} else {
  $template = new Template('outside_wrapper.tpl');

# This is in your page controller, using the [I]$template[/I] from the parent controller.
$template->content = new Template('terms_of_service.tpl', $defaults);
echo $template; 

You can also just copy paste the HTML from the wrappers to your project, change the css for the new design, and your done.
If you want one wrapper changed, you just change that one, no need to know about the other 20 possibilities.

See the differences?

But if you update something common to them both, you have to make the same change twice - violating DRY. Also, I’d argue that isn’t business logic - it’s ‘view’ logic in a way. Deciding which section of a template to use based on some a flag belongs in the view, not the controller, I’d say.

Also, a nested if() statement is pretty bad - it’s basically saying your template has 3 ‘states’ - popup, logged in or other. What if they are logged in and you want a popup for example? Adding new possibilities is a lot harder too.

Sorry, but I still way prefer my system :smiley:

If you have something common in the two templates, you will have an include block in both of them.

If your logged in, and want a popup, well, that IF is first, so you get the popup template.
If the user HAS to be logged in to see the page, then the controller takes care of that.

How would you do this in your system?