Introduction To CodeIgniter Template System

CodeIgniter LogoTemplating system is one feature or library that must be thought in CodeIgniter, because CodeIgniter has a very simple method. Do not have the system layouts, widgets and more. Templating system to create in CodeIgniter we can make your own by using the functions provided by CodeIgniter or we can also use a templating system that already exists and is popular. The usefulness of the templating system is:

1. Teamwork Is Better-

With Separation using these templating, then associate the workmanship design no longer bothered by the program code that you create. Likewise, do not worry any more script/program code that has been created will be uninterrupted.

2. Scripts/code Clean-

Sites with complex applications, such as a portal, it would require a complex script that spend up to thousands of lines. Of course it would be very burdensome if the script already dizzying it coupled with tag-an HTML tag in it.

3. The Display Changes Faster And Easier:

With the separation through a template, it can be done easily, even without having to remodel any PHP scripts.

Native CodeIgniter Templating

By compiling the views that exist, we can actually make a pretty powerful template library. The idea is simple; simply divide a page into several areas. As an example we will use a template from opendesign.org from design can be divided into the header area, top menu, right menu and content. Each area will be incorporated into sata whole page called templates.

Each area will be handled by a view to avoid duplication and will facilitate the reuse area. As for proficiency level in these areas can be seen in the following figure.

An OverView of CodeIgniter Template System

Template to be made is divided into four sections, namely Header (serves as a logo and slogan applications), Top menu (the main menu next above), Right Menu (additional navigation menu on the right) and the Content. This content area is often turned on each page.

To implement such a templating system we should make a template library. The steps that must be taken:

1. Configuring CodeIgniter

Before you start coding, we need to configure the tools to be used. There are three configurations to be adjusted, such as: config.php, database.php and router.php. As for who should do is:

config.php:

in configuration file that needs to be changed is the base_url. configuration serves to determine the base path of the application. This configuration will used by the form and the url helper. Examples of changes made:

$config['base_url']= 'http://localhost/ci2_template'; / / replace as your path in server

router.php:

contains the default configuration and routing controller rule. In this configuration the default controller changed only

 $route['default_controller'] = "welcome";
 

1. Create a Template Library

The library function just set view which will be called and put it in the template. why make it in a library? Due to the This method provides flexibility to the system template. Ways of making this library begins by creating a file called template.php on folder application / libraries. The template.php file contents are:

 <?php

class Template{

protected $_ci;

function __construct(){

$this->_ci=&get_instance();

}

function display($data=null){

$data['_content']=$this->_ci->load->view('template/content',$data,true);

$data['_header']=$this->_ci->load->view('template/header',$data,true);

$data['_top_menu']=$this->_ci->load->view('template/menu',$data,true);

$data['_sidebar']=$this->_ci->load->view('template/sidebar',$data,true);

$data['_footer']=$this->_ci->load->view('template/footer',$data,true);

$this->_ci->load->view('template.php',$data);

}

}

?>

Note the display function; there are two parameters of the template and the data. Serves as data parameter data to be transmitted to the controller, While the template is the view that will be called to appear as the main content. This template will be divided into four areas: content, header, top menu, and the right menu. Each area is filled by a view (note the line-15, 17,19,21,23). Each view was loaded and stored in the memory, Then combined into a template (line 25).

Functions that exist in this library we can actually add more, such as for seo, we want to manipulate the title and meta tags etc.. Library above is the simplest example when we want to create a template system itself.

2. Creating Template Layout View

A template layout view is a view that will combine each view becomes a form of unity. The content of the template layout is:

Application/view/template.php

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CodeIgniter Templating System</title>

<link rel="stylesheet" href="<?php echo base_url(); ?>/css/styles.css" type="text/css" />

</head>

<body>

<div id="container">

<div id="header">

<!--header start here -->

<?php echo $_header; ?>

<!-- header end-->

<div></div>

</div>

<div id="nav">

<!-- Top Menu Start Here -->

<?php echo $_top_menu; ?>

<!-- Top Menu End Here -->

</div>

<div id="body">

<div id="content">

<!-- Content Start Here -->

<?php echo $_content; ?>

<!-- Content End Here -->

</div>

<div class="sidebar">

<!-- sidebar star here -->

<?php echo $_sidebar; ?>

<!-- sidebar end here -->

</div>

<div></div>

</div>

<div id="footer">

<div class="footer-bottom">

<!-- Footer Start Here -->

<?php echo $_footer; ?>

<!-- Footer End Here -->

</div>

</div>

</div>

</body>

</html>
 

File above is the merge of all the parts that have been discussed. Note the lines 23,35,47,57, and 73. These four variables will be filled view of each piece. The following are the views that became part / area of the template

a. View header

Application/view/template/header.php

 <h1><a href="/">w3programmers</a></h1>

<h2>your website slogan here</h2>

b. View Top menu

Application/view/template/menu.php


<ul>

<li class="start"><a href="#">Home</a></li>

<li><a href="#">Examples</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">Solutions</a></li>

<li><a href="#">Contact</a></li>

</ul>

C. View sidebar

Application/view/template/sidebar.php


<ul>

<li>

<h3>Navigate</h3>

<ul>

<li><a href="#l">Home</a></li>

<li><a href="#">Examples</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">Solutions</a></li>

<li><a href="#">Contact</a></li>

</ul>

</li>

</ul>

d. View content with sample data

Application/view/template/content.php


<h1>Welcome to CodeIgniter!</h1>

<p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

<p>If you would like to edit this page you'll find it located at:</p>

<code>application/views/welcome_message.php</code>

<p>The corresponding controller for this page is found at:</p>

<code>application/controllers/welcome.php</code>

<p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>

<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>

e. View footer with sample data

Application/view/template/footer.php


<p>&copy; YourSite 2010. Design by <a href="http://www.w3programmers.com">w3programmers</a> | <a href="http://www.w3programmers.com">Free Web Templates</a></p>

Once you have a view three areas (header, top menu, sidebar, content and footer) then we are ready to use template system. Next is to make a controller. In order to more easily manufacture the controller then just use the default controller of CodeIgniter, ie with minimal code changes to its controller.


<?php

if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {

function __construct()

{

parent::__construct();

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

$this->load->helper('url');

}

function index()

{

$data=$this->template->display();

}

}

/* End of file welcome.php */

/* Location: ./application/controllers/welcome.php */

?>

Note on line 13, where we load the libraries that have been made earlier. At line 15 and 23 we use the display to show the template.
We should set up a view called WELCOME_MESSAGE. View will be placed on the content area. The content is the same view with the view in general.

Stylesheet

finally add your css in your Project Base Directory called css/style.css

ci2_template/css/style.css

</pre>
body {
 background: #333;
 margin:0;
 padding:0;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 13px;
 color: #666;
 }

* {
 margin:0;
 padding:0;
 }

/** element defaults **/
 table {
 width: 100%;
 text-align: left;
 }

th, td {
 padding: 10px 10px;
 }

th {
 color: #fff;
 background: #3B7932 none repeat-x scroll left top;
 }

td {
 border-bottom: 1px solid #ccc;
 }

code, blockquote {
 display: block;
 border-left: 5px solid #222;
 padding: 10px;
 margin-bottom: 20px;
 }
 code {
 background-color: #222;
 color:#ccc;
 border: none;
 }
 blockquote {
 border-left: 5px solid #222;
 }

blockquote p {
 font-style: italic;
 font-family: Georgia, "Times New Roman", Times, serif;
 margin: 0;
 color: #333;
 height: 1%;
 }

p {
 line-height: 1.9em;
 margin-bottom: 20px;
 font-size: 12px;
 }

a {
 color: #000;
 }

a:hover {
 color: #458D3A;
 }

a:focus {
 outline: none;
 }

fieldset {
 display: block;
 border: none;
 border-top: 1px solid #ccc;
 }

fieldset legend {
 font-weight: bold;
 font-size: 13px;
 padding-right: 10px;
 color: #333;
 }

fieldset form {
 padding-top: 15px;
 }

fieldset p label {
 float: left;
 width: 150px;
 }

form input, form select, form textarea {
 padding: 5px;
 color: #333333;
 border: 1px solid #ddd;
 border-right:1px solid #ccc;
 border-bottom:1px solid #ccc;
 background-color:#fff;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 }

form input.formbutton {
 border: none;
 background: #3B7932;
 color: #ffffff;
 font-weight: bold;
 padding: 6px 10px;
 font-size: 12px;
 font-family: Tahoma, Geneva, sans-serif;
 letter-spacing: 1px;
 width: auto;
 overflow: visible;
 }

form.searchform p {
 margin: 5px 0;
 }

span.required {
 color: #ff0000;
 }

h1 {
 color: #000;
 font-size: 35px;
 font-family: Arial, Helvetica, sans-serif;
 }

h2 {
 color: #000;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 27px;
 letter-spacing: 0px;
 font-weight: normal;
 padding: 0 0 5px;
 margin: 0;
 }

h3 {
 color: #888;
 font-size: 24px;
 font-weight: normal;
 margin-bottom: 10px;
 letter-spacing: -1px;
 font-family: Arial, Helvetica, sans-serif;
 }

h4 {
 padding-bottom: 10px;
 font-size: 15px;
 color: #458D3A;
 }

h5 {
 padding-bottom: 10px;
 font-size: 13px;
 color: #3B7932;
 }

ul, ol {
 margin: 0 0 35px 35px;
 }

li {
 padding-bottom: 5px;
 }

li ol, li ul {
 font-size: 1.0em;
 margin-bottom: 0;
 padding-top: 5px;
 }

#container {
 width: 960px;
 margin: 50px auto;
 padding: 10px;
 background-color: #fff;
 }

#header {
 padding: 30px 15px;
 background-color: #458D3A;
 margin: 0 auto;
 border-bottom: 10px solid #3B7932;
 }

#header h1 a {
 color: #fff;
 font-size: 50px;
 font-weight: normal;
 text-decoration: none;
 letter-spacing: -3px;
 float: left;
 }

#header h2 {
 color: #C9E7C5;
 float: left;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 13px;
 margin-left: 12px;
 margin-top: 24px;
 padding-left: 4px;
 letter-spacing: 0;
 }

#nav {
 height: 45px;
 width: 960px;
 background-color: #222;
 }

#nav ul {
 list-style: none;
 padding: 0;
 margin: 0;
 height: 45px;
 }

#nav ul li {
 float: left;
 display: block;
 padding: 0;
 }

#nav ul li a {
 color: #ddd;
 display: block;
 border-right: 1px solid #000;
 border-left: 1px solid #444;
 font-size: 11px;
 font-weight: bold;
 text-transform: uppercase;
 font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
 padding: 15px 20px;
 text-decoration: none;
 }

#nav ul li.start a {
 border-left: none;
 }

#nav ul li.end a {
 border-right: none;
 }

#nav ul li a:hover {
 color: #fff;
 text-decoration: underline;
 }

#body {
 background: none;
 margin:0 auto;
 padding: 30px 12px 0;
 width: 936px;
 }

#content {
 float: left;
 width: 635px;
 }

.sidebar {
 width: 250px;
 padding: 10px 0 0;
 float: right;
 }

.sidebar ul {
 margin: 0;
 padding: 0;
 list-style: none;
 }

.sidebar ul li {
 margin-bottom: 20px;
 line-height: 1.9em;
 }

.sidebar li ul {
 }

.sidebar li ul li {
 display: block;
 font-family: Arial, Helvetica, sans-serif;
 border-top: none;
 padding: 6px 2px;
 margin: 0;
 line-height: 1.5em;
 font-size: 13px;
 border: none;
 }

.sidebar li ul li a {
 font-weight: normal;
 color: #222;
 }

.sidebar li ul li a:hover {
 color: #3B7932;
 }

.sidebar li ul.blocklist li {
 padding: 0;
 display: inline;
 }

.sidebar li ul.blocklist li a {
 background-color: #EAEAEA;
 display: block;
 font-family: Arial,Helvetica,sans-serif;
 font-size: 11px;
 font-weight: bold;
 margin-bottom: 1px;
 padding: 7px 10px;
 text-decoration: none;
 text-transform: uppercase;
 }

.sidebar li ul.blocklist li a:hover {
 background-color: #3B7932;
 color: #fff;
 }

.clear {
 clear: both;
 }

#footer {
 margin:0 auto 0;
 border-top: 10px solid #458D3A;
 width: 960px;
 }

#footer p {
 text-align: left;
 color: #ccc;
 font-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
 margin: 0;
 padding: 0;
 }

#footer p a {
 color: #ccc;
 font-weight: bold;
 }

.footer-content {
 padding: 20px 25px 30px;
 background: #ddd;
 border-top: 10px solid #3B7932;
 }

#footer .footer-content ul {
 width: 260px;
 list-style: none;
 margin: 0 65px 0 0;
 padding: 0;
 float: left;

 }

#footer .footer-content li {
 border-bottom: 1px dashed #666;
 padding: 7px 5px;
 }

#footer .footer-content li a, #footer .footer-content h4 {
 font-family: Arial, Helvetica, sans-serif;
 }

#footer .footer-content li a {
 color: #333;
 text-decoration: none;
 }

#footer .footer-content h4 {
 font-weight: normal;
 font-size: 25px;
 color: #333;
 }

#footer .footer-content ul.endfooter {
 margin-right: 0;
 }

#footer .footer-content span.sitename {
 font-family: Arial,Helvetica,sans-serif;
 font-size: 40px;
 font-weight: normal;
 letter-spacing: -2px;
 color: #aaa;
 float: left;
 }

#footer .footer-bottom {
 padding: 10px;
 text-align: center;
 background-color: #222;
 }

#footer .footer-bottom p {
 text-align: center;
 }

#footer .footer-bottom p, #footer .footer-bottom p a {
 color: #666;
 }

As for how it looks is as follows:

CodeIgniter Template

Hi, My name is Masud Alam, love to work with Open Source Technologies, living in Dhaka, Bangladesh. I graduated in 2009 with a bachelor’s degree in Engineering from State University Of Bangladesh, I’m also a Certified Engineer on ZEND PHP 5.3, I served my first five years a number of leadership positions at Winux Soft Ltd, SSL Wireless Ltd, CIDA and MAX Group where I worked on ERP software and web development., but now i’m a co-founder and Chief Executive Officer and Managing Director of TechBeeo Software Consultancy Services Ltd. I’m also a Course Instructor of ZCE PHP 5.3 Certification and professional web development course at IBCS-PRIMAX Software (Bangladesh) Limited – a leading Training Institute in the country.
Print Friendly
9 comments on “Introduction To CodeIgniter Template System
  1. Hello, Your tutorial is very good. Do you tell me how to use that on my local server? when i run my local server I get the following error message “Fatal error: Cannot redeclare class Welcome in C:\wamp\www\ci2_template\application\views\welcome_message.php on line 27” As soon as please reply me.

    • First of all crates ur project folder name at ur local server like xampp, wamp, Lamp or any server as u like.

      Checks these in ur project folder u created

      application > config > config. at line 17: setup this $config[‘base_url’] = ‘http://localhost/ur project folder name/’;

      application > config > routes > . at line 41: leave default this, $route[‘default_controller’] = “welcome”

      am not good in English, sorry for my English

  2. I was successfully apply your code igniter template and it was awesome. The next stuff is to add a page to display in the content portion in response what was click in the menu.

    Please give me sample implementation. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

*