Template Library for Ext.CodeIgniter

Written on August 19, 2009 by Zaki and 10 peoples have comment

logo

For someone who spent 3 years maintaining my own PHP Framework I find it hard to understand why CodeIgniter bundle in a Template Library. There are actually a few good 3rd party Template Engine which you can find for CodeIgniter but let me share with you a port over Template Library for my so call own PHP Framework.

Requirements and Basic Informations

  • is based and developed on CodeIgniter 1.7.1, it might work with previous version but please do test it out first.
  • the library is build on top of Loader and Output Library allowing you to fully utilize caching, profiler output etc.
  • support Parser Library.

Getting Started

To use the Template library, you have to checkout a copy of latest Ext.CodeIgniter or grab the following files:

Setup Template Folder

You will need to create a folder ./public/styles/default/ at the root folder of your CodeIgniter installation. A terminal command equivalent to this is:

> mkdir -p public/styles/default

Setup Template File

For this example let just make a simple template, by default the Template Class will look for “index.html”.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>{{PAGE-TITLE}}</title>
        <link href="{{STYLE-URI}}css/all.css" media="all" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="header">
            <h1>{{TITLE}}</h1>
            <div id="navigation">{{NAVIGATION}}</div>
        </div>
        <div id="content">
            {{CONTENT}}
        </div>
        <div id="footer">
            <p>{{FOOTER}}</p>
        </div>
    </body>
</html>

Possible Parse Keyword

Keyword Description
{{TITLE}} Application/Site Title.
{{PAGE-NAME}} Current Page Title
{{PAGE-TITLE}} Current Page Title and Application/Site Title.
{{URI}} Equivalent to current_url()
{{BASE-URI}} Equivalent to base_url()
{{INDEX-URI}} Equivalent to site_url()
{{STYLE-URI}} Generate full url path to current active template
{{SCRIPT-URI}} Generate full url path to script folder: ./public/scripts
{{NAVIGATION}} Navigation group
{{HEADER}} Header group
{{CONTENT}} Content group
{{SIDEBAR}} Sidebar group
{{FOOTER}} Footer group

Initializing the Template Class

he following code loads and initializes the template class based on your configuration settings

$this->load->library('Template');

Configuration

Open system/application/config/application.php and go to line 13 and 24.

/*
|--------------------------------------------------------------------------
| Base Site Name
|--------------------------------------------------------------------------
|
| Name of your site/application, e.g:
|
|    My First Website
|
*/
$config['site_name'] = 'AdsMalaya';

/*
|--------------------------------------------------------------------------
| Template Option
|--------------------------------------------------------------------------
|
| Enable you to configure template option
| Default template: <your-site>/public/styles/<theme>/<filename>.html
*/
$config['template']['theme'] = 'default';
$config['template']['filename'] = 'index.html';

Here you can modify the title of your application or site and the folder and filename of the default template.

$this->ui->set_output()

There are 3 possible output type: html (default), text or json (require json_encode to be enabled)

$this->ui->set_output('json');

Only html output will load the template file.

$this->ui->set_title()

$this->ui->set_title('Example Page');

The function will only set page title, while application/site title is only editable through the configuration file.

$this->ui->set_template()

$this->ui->set_template('feedmalaya');

The template engine will use folder ./public/styles/feedmalaya/ instead of the one specified in the configuration file.

$this->ui->set_file()

$this->ui->set_file('site.html');

There are time when you need to have different set of layout but using the in the same theme.

$this->ui->data()

Set output for text or json. Here an example how to use it.

$data = array (
    'success' => TRUE,
    'text' => 'Some text'
);
$this->ui->set_output('json');
$this->ui->data($data);
$this->ui->render();

$this->ui->view(‘filename’, $data, $group)

The method is almost identical to $this->load->view with the exception of the third parameter.

$data = array (
'success' => TRUE,
'text' => 'Some text'
);
$this->ui->view('myfile', $data, 'sidebar');
// will render to sidebar
$this->ui->render();

You can embed the view to any of the following group:

  • header
  • navigation
  • content (default)
  • sidebar
  • footer

$this->ui->append(’some text’, $group);

Append existing template group with some text.

$heading = heading('Hello world', 2);
$this->ui->append($heading);

$this->ui->prepend(’some text’, $group);

Prepend existing template group with some text.

$heading = heading('&copy; CodeIgniter', 2);
$this->ui->prepend($heading, 'footer');

Conclusion

How you can make use of it as I made in my project. If you manage to fine any bug please report it to us, Thank you.

Filed under: CodeIgniter, Ext.CodeIgniter, Tutorial

Tags:

10 Responses

  1. 40+ CodeIgniter Framework Tutorials for Kick-Ass PHP Application | PHP Frameworks on 16 Oct 2009

    [...] 24. Template Library for Ext.CodeIgniter [...]


  2. CRUD Library for Ext.CodeIgniter: An Example « Mior Muhammad Zaki on 20 Oct 2009

    [...] callback can be optimized with Template Library for Ext.CodeIgniter. [...]


  3. 40+ CodeIgniter Framework Tutorials for Kick-Ass PHP Application | Programming Blog on 23 Oct 2009

    [...] 24. Template Library for Ext.CodeIgniter [...]


  4. 40+ CodeIgniter Framework Tutorials for Kick-Ass PHP Application | Son Of Byte on 03 Nov 2009

    [...] 24. Template Library for Ext.CodeIgniter [...]


  5. shin on 10 Nov 2009

    It will be great if you can put together some sample codes for MVC. I want to see a simple example so that I can see how it works.


  6. 43 примера использования PHP фреймворка CodeIgniter | Vizor-IT blog on 28 Dec 2009

    [...] Template Library for Ext.CodeIgniter [...]


  7. Dre on 13 Jan 2010

    How to load View in view like.

    CONTENT -> folder/content.php

    so you can have theme like:

    index.html,
    css/
    js/
    page/
    page/content.php
    forum/threads.php


    • Zaki on 13 Jan 2010

      Based on the Template Class, all template/theme file including HTML, CSS and Images will be stored under ./public/styles/{theme_folder}/ while view should be under ./system/application/views/ just like you load a view in default CodeIgniter


  8. Dre on 13 Jan 2010

    I made some modifications.
    The idea is to have theme outside apps, like

    Application
    System
    Themes

    $path = dirname(BASEPATH).'/themes/'.$this->theme.'/'.$folder.'/'.$file.EXT;

    $this->fragment[$part] .= $this->ci->load->part_view($path,$vars,$return);

    I made part_view() func. so I can load view from /theme/default/$folder/$file or /default/file

    This gives me to be able to make view outside app folder, so I can overwrite views/file.

    My next step is to make Options from Options lib, so to load from DB.

    I can send you my file if you want to take a look, Its a bit hard coded, but I can explain or you can read it.


    • Zaki on 13 Jan 2010

      That is one way of doing it, would really love it if you release your modification to be use for public, well that what the focus on open-source development right.


Leave your comment