-
Notifications
You must be signed in to change notification settings - Fork 0
Phil Sturgeon's Template Library
[b]NOTICE:[/b] Most of the following code was grabbed from Phil's website, particularly this page: [url=http://philsturgeon.co.uk/code/codeigniter-template]http://philsturgeon.co.uk/code/codeigniter-template[/url].
[size=5]What is it?[/size]
CodeIgniter-Template is a Template library that helps your build complex views with CodeIgniter. It has logic to work with themes & modules and helps add your title, meta-data, breadcrumbs and partial views.
[size=5]What is required?[/size]
The latest version of CodeIgniter and PHP5. It's also assumed you have the [b]HTML helper[/b] and [b]User Agent class[/b] auto-loaded.
[size=5]Where do I begin?[/size]
[size=3]1. Create MY_Controller[/size] As referenced in Phil's [url=http://philsturgeon.co.uk/news/2010/02/CodeIgniter-Base-Classes-Keeping-it-DRY]Keep it DRY[/url] article, we will extend the Controller class to create custom base controllers. We do this so we can bring common functionality to the entire application. This would allow you to load different themes based on user_agent. For example, you could have a desktop layout and a mobile layout.
Create a file called [b]MY_Controller.php[/b] in [b]/application/libraries/[/b] with the following text:
[code] <?php
class MY_Controller extends Controller { function __construct() { parent::Controller(); } }
/* End of file MY_Controller.php / / Location: ./application/libraries/MY_Controller.php */ [/code]
[size=3]2. Edit your config.php file[/size]
As mentioned in Phil's [url=http://philsturgeon.co.uk/news/2010/02/CodeIgniter-Base-Classes-Keeping-it-DRY]Keeping it DRY[/url] article, we need to connect the base controllers to the controllers. The easiest way is using PHP 5's __autoload() function.
Open [b]/application/config.php[/b] and add the following to the end of the document:
[code]
| /* |
|---|
| Native Auto-load |
| ------------------------------------------------------------------- |
| | Nothing to do with cnfig/autoload.php, this allows PHP autoload to work | for base controllers and some third-party libraries. | */ function _autoload($class) { if(strpos($class, 'CI') !== 0) { @include_once( APPPATH . 'libraries/'. $class . EXT ); } }
/* End of file config.php / / Location: ./application/config/config.php */ [/code]
[size=3]3. Create a controller[/size]
Next we'll create a controller called [b]welcome.php[/b] in [b]/application/controllers[/b] that extends MY_Controller.
[code] <?php
class Welcome extends MY_Controller {
function __construct()
{
parent::__construct();
}
function index()
{
}
}
/* End of file welcome.php / / Location: ./application/controllers/welcome.php */ [/code]
[size=3]4. Create template folders and files[/size]
Now we need to create the folder structure for the template system.
- Create a folder called [b]themes[/b] in your [b]/application[/b] folder.
- Within the [b]themes[/b] folder, create a new folder based on a theme name you'd like. In this example, we'll use [b]desktop[/b].
- Within the [b]desktop[/b] folder, create a new folder called [b]views[/b]. Within the [b]views[/b] folder, create a new folder called [b]layouts[/b].
With the folder structure complete, let's make a view file within the [b]layouts[/b] folder called [b]main.php[/b]. This will basically be the structure of your layout. Insert the following into [b]main.php[/b]:
[code] <?php echo doctype(); ?> <html> <head> <title><?php echo $template['title']; ?></title> </head>
<body>
<?php echo $template['body']; ?>
</body>
</html> [/code]
Now, we need to create a view with the content we want to load in $template['body']. To do this, you will create a file called [b]main.php[/b] (or any name you'd like) in [b]/application/views[/b]. You can fill this file with anything you'd like.
[size=3]5. Building the template[/size]
We have all our folders and files in place. To enable/build your template, the most common way would be to open welcome.php (or any other controller) and alter it with the following code:
[code] <?php
class Welcome extends MY_Controller {
function __construct()
{
parent::__construct();
}
function index()
{
$this->template->set_theme('desktop');
$this->template->set_layout('main');
$this->template->title('Some title');
$this->template->build('main');
}
}
/* End of file welcome.php / / Location: ./application/controllers/welcome.php */ [/code]
Here we are setting the theme to [b]desktop[/b] (remember, we named our theme folder 'desktop'), we set the layout to [b]main[/b] (this is the file located in our 'layouts' folder), we set a title for the template, and we build it with content from [b]main.php[/b] in our [b]application/views[/b] folder.
Easy!
[size=3]6. Taking it a step further[/size]
Let's say you want to detect the user's user-agent and serve different templates based on what's returned. To do this, we need to do the following:
- Make sure we have a theme called [b]mobile[/b]. Follow the steps above we used to create [b]desktop[/b].
- We need to remove [b]$this->template->set_theme('desktop');[/b] and [b]$this->template->set_layout('main');[/b] from our controller.
- We need to alter our[b]MY_Controller.php[/b] file as follows:
[code] <?php
class MY_Controller extends Controller { function __construct() { parent::Controller();
if ($this->agent->is_mobile()):
$this->template->set_theme('mobile');
elseif ($this->agent->is_browser()):
$this->template->set_theme('desktop');
endif;
}
}
/* End of file MY_Controller.php / / Location: ./application/libraries/MY_Controller.php */ [/code]