Setting Up a Template and Assets in CodeIgniter

Glenn Stovall -

In this article, I’d like to walk you through my first few steps when setting up a new CodeIgniter Project: – Setting up a way to render pages in a layout – Setting up a way to easily handle assets (CSS & JavaScript files).

Step 1: Creating A Template

To start, we are going to make two new files, a layout view, and a localized controller. Let’s start by creating a layout.php file in,views and add the following:


<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
  <meta name="viewport" content="width=device-width" />
  <title>Title Goes Here</title>
  <!--[if IE 9]>
    <style type="text/css"> .gradient { filter: none;} </style>
  <![endif]-->
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
</body>
</html>

I based this code on the HTML5 set up from Paul Irish. We’ll use this as the basis for all of our pages. Now, to use this, we are going to create a MY_Controller inside of appliction/core/MY_Controller.php, and create a new function that we’ll call render

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class MY_Controller extends CI_Controller { protected $layout = 'layout'; protected function render($content) { $view_data = array( 'content' => $content
    );
    $this->load->view($this->layout,$view_data);
  }
}

This code will allow us to use the layout file to wrap all of our content. We’ve also stored the layout file as a protected variable of the MY_Controller so that we can use different layouts for different controllers if we so choose. Now, let’s modify the template file to be able to render the content. Change the body tag so that it looks like this:

<body>
  <?= $content; ?>
</body>

Now, let’s set up an example view and an example controller to see how it works.

<h1>Hello, World!</h1>
<p> Example page using layouts </p>

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Example extends MY_Controller { public function index() { $content = $this->load->view('example/index',null,true);
    $this->render($content);
  }
}

Step 2: Adding the Asset Helper

To help us manage our CSS, JavaScript, and image files, we are going to add some tools for asset manage. First, let’s include this Asset Helper In our project, and update our autoload.php file, so that we include it automatically. Now we are going to set up the directory structure for this. Here is how to do it from the base of your CodeIgniter project (assuming you are using the standard naming conventions):

mkdir assets
mkdir assets/css
touch assets/css/app.css
mkdir assets/js
touch assets/js/app.js
mkdir assets/images

Now, we are going to keep a list of all the CSS and JavaScript files inside of our MY_Controller, and pass them along to the layout:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class MY_Controller extends CI_Controller { protected $layout = 'layout'; protected $stylesheets = array( 'app.css' ); protected $javascripts = array( 'app.js' ); protected function render($content) { $view_data = array( 'content' => $content,
      'stylesheets' => $this->get_stylesheets(),
      'javascripts' => $this->get_javascripts()
    );
    $this->load->view($this->layout,$view_data);
  }

  protected function get_stylesheets() {
    return $this->stylesheets;
  }

  protected function get_javascripts() {
    return $this->javascripts;
  }
}

And now we’ll update our template using the css_asset() and js_asset() functions from the helper we included earlier:

<!-- in the <head> .. -->
<? foreach($stylesheets as $stylesheet): ?>
  <?= css_asset($stylesheet); ?>
<? endforeach; ?>

<!-- right before <body> -->
<? foreach($javascripts as $javascript): ?>
  <?= js_asset($javascript); ?>
<? endforeach; ?>

If you view the source, you should see that your app.css and app.js files are included.

Step 3: Adding Local Assets

One of the better ideas Rails 3.0 brought to the table was the idea of the ‘asset pipeline’, which includes being able to define JavaScript and CSS files that are specific to a particular controller. Now let’s set up our CodeIgniter project to be able to behave in a similar manner.

That was my motivation for writing the get_stylesheets() and get_javascripts() functions in the MY_Controller class earlier. Since we are going to be changing how we get the arrays, we can now do so without touching the render() function since we have abstracted out the interface in which we get our files.

So let’s update those two functions, and add two more protected variables to our MY_Controller file:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MY_Controller extends CI_Controller {
  protected $layout = 'layout';
  protected $stylesheets = array(
    'app.css'
  );
  protected $javascripts = array(
  'app.js'
  );
  protected $local_stylesheets = array();
  protected $local_javascripts = array();

  //other parts of the class..

  protected function get_stylesheets() {
    return array_merge($this->stylesheets,$this->local_stylesheets);
  }

  protected function get_javascripts() {
    return array_merge($this->javascripts,$this->local_javascripts);
  }

}

Now we can add additional asset files to the local_stylesheets and local_javascripts variables in classes that extend MY_Controller, allowing us to keep our code separate and more organized. With this and templates, we now have a system in place to manage the visual aspects of our web application.