Skip to content

Yet Another Template System

World Wide Web Server edited this page Jul 4, 2012 · 45 revisions

Reading the forums we can see how everyone seeks for the perfect template solution and since many heads think better than one here’s my two cents.

Of course there’s room for improvement, yet this is running quite fast. Bellow you can see some of the features this library offers.

Features:

  • Multiple templates support
  • Configurable items
  • Modular structure
  • Build a page with just one line of code
  • Resources folder outside the MVC structure
  • Easy for designers

Layout Library

Here we'll find the class that is going to put all the stuff together and display or dump it. Note that all things here run pretty by itself. We have two functions, [b]buildPage[/b] which you can call to build and send a page to the user, and for dumping a view inside a variable use [b]dumpPage[/b].

[code] <?php if (!defined('BASEPATH')) exit('No direct script access allowed'); /**

  • Layout Class

  • @package Code Igniter

  • @subpackage Libraries

  • @category Template

  • @author Mario Mariani

  • @license http://www.gnu.org/licenses/lgpl.txt / class Layout { /*

    • Constructor
    • @access public */
      function Layout() { $this->layout =& get_instance(); $this->layout->load->model('layout_model','layoutmodel'); log_message('debug','Layout class initialized'); }

    // --------------------------------------------------------------------

    /**

    • Build the whole thing

    • @access public

    • @param string view file

    • @param mixed array with the output data

    • @return string /
      function buildPage($view, $data) { /
      Theme settings */ $data['settings'] = $this->layout->layoutmodel->settings();

      /* Layout commons */ // Is the user logged? (you can call your own user check routine here) if ($this->layout->authenticator->check()) { foreach ($this->layout->layoutmodel->commons($data['settings']['theme_name']) as $key => $function) { $data[$key] = $this->layout->layoutmodel->$key($function); } }

      /* Load the view file */ $this->layout->load->view('loader', array('view'=>$view, 'data'=>$data)); }

    // --------------------------------------------------------------------

    /**

    • Dump the whole thing

    • @access public

    • @param string view file

    • @param mixed array with the output data

    • @return string /
      function dumpPage($view, $data) { /
      Theme settings */ $data['settings'] = $this->layout->layoutmodel->settings();

      /* Return the view file */ return $this->layout->load->view($data['settings']['theme_name']."/content/$view", $data, true); } } // EOF ?> [/code]

[h3]Layout Model[/h3]

Here we'll set up all common elements on the template which I like to call layout regions. Some examples are the page title, the site menu or a statusbar for bread crumbs and copyright messages. Just remember, for each routine you create here is necessary to add it to the array in the function [b]commons()[/b].

[code] <?php if (!defined('BASEPATH')) exit('No direct script access allowed'); /**

  • Layout_model Class

  • @package Code Igniter

  • @subpackage Models

  • @category Template

  • @author Mario Mariani

  • @license http://www.gnu.org/licenses/lgpl.txt / class Layout_model extends Model { /*

    • Constructor
    • @access public */ function Layout_model() { parent::Model(); $this->layout =& get_instance(); $this->layout->config->load('your_config_file_goes_here'); }

    // --------------------------------------------------------------------

    /**

    • References all the functions in this model so the Library can
    • automatically call each one of them
    • @access public
    • @param string
    • @return string */
      function commons($theme) { return $retval = array( "menu" => "$theme", "hello" => "$theme", "status" => "$theme" ); }

    // --------------------------------------------------------------------

    /**

    • Return an array with all shared variables
    • @access public
    • @param null
    • @return string */
      function settings() { $settings = array(); $settings['theme_name'] = $this->layout->config->item('spm_default_theme'); $settings['theme_path'] = $this->layout->config->site_url()."/application/views/". $settings['theme_name'] ."/"; $settings['theme_styles_path'] = base_url()."layout/". $settings['theme_name'] ."/css/"; $settings['theme_images_path'] = base_url()."layout/". $settings['theme_name'] ."/images/"; $settings['theme_script_path'] = base_url()."layout/". $settings['theme_name'] ."/script/"; $settings['app_title'] = $this->layout->config->item('spm_app_title'); $settings['meta_keywords'] = $this->layout->config->item('spm_meta_keywords'); $settings['meta_description'] = $this->layout->config->item('spm_meta_description'); $settings['meta_copyright'] = $this->layout->config->item('spm_meta_copyright'); return $settings; }

    // --------------------------------------------------------------------

    /**

    • Build the site menu
    • @access public
    • @param null
    • @return string */
      function menu($theme) { $retval['menu'] = array( anchor('/', 'Home'), anchor('news/home', 'News') => array( anchor('news/latest', 'Latest'), anchor('news/feed', 'Newsfeed'), anchor('news/archive', 'Archive') ), anchor('articles/home', 'Articles') => array( anchor('articles/ci', 'Code Igniter'), anchor('articles/design', 'Graphic Design'), anchor('articles/whatever', 'Whatever') ), anchor('contact/form', 'Articles'), anchor('whatever/random', 'Whatever')
      ); return $this->layout->load->view("$theme/common/menu", $retval, true); }

    // --------------------------------------------------------------------

    /**

    • Build the 'Hello User! (Logout)' thing
    • @access public
    • @param null
    • @return string */
      function hello($theme) {
      // you can call your own get user name routine here $retval['hello'] = $this->layout->lang->item('hello_message').$this->layout->authenticator->getUser()."!"; $retval['logout'] = $this->layout->lang->fetch('logout_link'); return $this->layout->load->view("$theme/common/hello", $retval, true); }

    // --------------------------------------------------------------------

    /**

    • Build the site status bar
    • @access public
    • @param null
    • @return string */
      function status($theme) { $retval['status'] = $this->layout->config->item('meta_copyright'); return $retval['status']; } } // EOF ?> [/code]

[b]The Views[/b]

Here things must follow a folder structure, yet everything else is pretty standard. Bellow we can see the folder structure and following the code.

[b]inside the application folder[/b] [code] views L theme_name | L common | | L footer.php | | L header.php
| | L hello.php
| | L menu.php
| | L status.php
| L content | L module_name | L main.php | L form.php | L loader.php [/code]

[b]in the root folder[/b] [code] /layout L theme_name L css | L layout.css L images | L background.png | L header.png | L logo.png | L whatever.png L script L basic.js

[/code]

[b]loader.php[/b] [code] <?php /**

$this->load->view($data['settings']['theme_name']."/common/header", $data); $this->load->view($data['settings']['theme_name']."/content/$view", $data); $this->load->view($data['settings']['theme_name']."/common/footer", $data['settings']);

?> [/code]

[b]common/header.php[/b] [code]

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="ROBOTS" content="NONE" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="Keywords" content="<?=$meta_keywords?>" /> <meta name="Description" content="<?=$meta_description?>" /> <meta name="Copyright" content="<?=$meta_copyright?>" /> <title><?=$app_title?></title> <link href="<?=$theme_styles_path?>layout.css" rel="stylesheet" type="text/css" media="all" /> </script> </head> <body>

[/code]

[b]common/menu.php[/b] [code]

<!-- If you follow this example don't forget to load the HTML Helper ;-) --> <?=ul($menu);?>

[/code]

As you can see here the view files are modular. So you'll never get lost while developing a project which needs a great deal of custom views. That's because every file is in its place. In other words, following this path you can add as many view files as you want in your project and you'll never get lost.

[b]Controllers[/b] Now we go for the kill. Here we can see how simple is to send a page to the user from any given controller.

[b]controllers/home.php[/b] [code] <?php

class Home extends Controller { function Home() { parent::Controller(); $this->load->library('layout'); }

function index()
{
    /* 
     * Do whatever you want and then...
     */
    
    $data['whatever'] = "If you see me the Layout Library is working correctly. Good job!</strong></p>.";
    
    // Build the thing
    $this->layout->buildPage('start/welcome', $data);
}

}

?> [/code]

[h3]The config file[/h3] So far here things are very simple. We just have a few configurable options, but you can easily add more options if you need to.

[code] <?php

$config['default_theme'] = "default"; $config['app_title'] = "Application Title"; $config['meta_keywords'] = "some meta key words for the spiders"; $config['meta_description'] = "a nice description goes here"; $config['meta_copyright'] = "(c) 2006 Mario Mariani All Rights Reserved.";

?> [/code]

Here's all the code: File:yats.zip

I hope that's useful for you guys. Happy coding! :-)

Clone this wiki locally