Two step view with CodeIgniter
Tuesday, August 5th, 2008All the web development frameworks I have worked with have a full fledged layout system out of the box except CodeIgniter. A good number of CI tutorials encourage including common header and footer files to build the final page but I don’t like this approach for the following reasons:
- It’s more difficult to swap layouts compared to using a single complete layout file.
- You need to have a knowledge (admittedly small) of the server-side language.
- A single complete layout file can be viewed in a WYSIWYG editor.
The layout system in the other frameworks I have worked with all use the two step view pattern and I have adapted CI to work the same way.
What is a two step view?
The idea behind using common header and footer files is to get a consistent look for your site or application and to make maintenance as painless as possible by providing a single place to make changes that affect the look and feel of the entire site or app.
Quoting Martin Fowler, the Two Step View pattern deals with this problem by splitting the transformation into two stages. The first transforms the model data into a logical presentation without any specific formatting; the second converts that logical presentation with the actual formatting needed. This way you can make a global change by altering the second stage, or you can support multiple output looks and feels with one second stage each.
How it works
Rather than extend the CodeIgniter controller class directly, the controller classes extend a custom base controller. This controller then extends the CI controller classes. The CI convention is to call this base controller class MY_Controller (default) and to place the class file in the libraries folder.
The base controller loads some default data and also has a render function which actually implements the two step view. I used the default Rails, Cake and Zend conventions of creating a folder named after the controller class and creating template files named after the actions. The render function does the first stage of the two step view pattern by checking if a file named after the action exists in folder named after a class. If it does, it loads it into a variable and then the second stage of the two step view pattern is implemented where this variable in addition to any other view data is injected into the layout file. So far, it’s worked great for me.
Some code, please
- The layout file (application/views/layouts/main.tpl.php)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?php echo $title; ?></title> <?php echo $css; ?> </head> <body> <div id="page"> <div id="header"> <h1><?php echo $title; ?></h1> <?php $this->load->view('partials/menu.tpl.php'); ?> </div> <div id="content"> <h2><?php echo $heading; ?></h2> <?php echo $content; ?> </div> <div id="footer"> <p>© 2008 AVNet Labs.</p> </div> </div> </body> </html>
- The Base Controller (application/libraries/MY_Controller.php)
<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); class MY_Controller extends Controller { protected $data = array(); protected $class_name; protected $action; protected $param; protected function __construct() { parent::__construct(); $this->load_defaults(); } protected function load_defaults() { $this->data['heading'] = 'Page Heading'; $this->data['content'] = ''; $this->data['css'] = ''; $this->data['title'] = 'Page Title'; $this->class_name = strtolower(get_class($this)); $this->action = $this->uri->segment(2, 'index'); } protected function render($template='main') { if (file_exists(APPPATH . 'views/' . $this->class_name . '/' . $this->action . '.tpl.php')) { $this->data['content'] .= $this->load->view($this->class_name . '/' . $this->action . '.tpl.php', $this->data, true); } $this->load->view("layouts/$template.tpl.php", $this->data); } protected function add_css($filename) { $this->data['css'] .= $this->load->view("partials/css.tpl.php", array('filename' => $filename), true); } } ?>
- The Welcome Controller (application/controllers/welcome.php)
<?php class Welcome extends MY_Controller { function __construct() { parent::__construct(); $this->add_css('main'); } function index() { $this->data['heading'] = 'Home Page'; $this->render(); } function edit() { $this->data['heading'] = 'Edit Page'; $this->render(); } }
- The Menu Partial Template (application/views/partials/menu.tpl.php)
<ul> <li><a href="<?php echo site_url(); ?>">Home</a></li> <li><a href="<?php echo site_url('welcome/edit'); ?>">Edit</a></li> </ul>
- The CSS Partial Template (application/views/partials/css.tpl.php)
<link href="<?php echo base_url() . 'css/' . $filename . '.css'; ?>" rel="stylesheet" type="text/css" />
- The Homepage Template (application/views/welcome/index.tpl.php)
<p>Home page stuff goes here</p>
- The Edit Page Template (application/views/welcome/edit.tpl.php)
<p>Edit page stuff goes here</p>
