Create layouts or templating in codeigniter

Rakesh Sharma      6 Comments  

How to Create layouts or templating in codeigniter :-

Default codeigniter doesn’t have any of templating features you have add or create layout manually for your codeigniter site. there is lot’s of way to do this but i am sharing some simple code to create layout in codeigniter. we can easily create layouts or templating in codeigniter and arrange layout for site. so we need to divide our pages in some parts and load them at once when page loading. it’s a better way to arrange your views as a template. so you only need a function call to do setup your middle part of pages.
Let’s see steps how we can create layouts or templating in codeigniter.

1. Create a “MY_Controller.php” under “application/core/” and add below code:-

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MY_Controller extends CI_Controller 
 { 
   //set the class variable.
   var $template  = array();
   var $data      = array();
   //Load layout	
   public function layout() {
     // making temlate and send data to view.
     $this->template['header']   = $this->load->view('layout/header', $this->data, true);
     $this->template['left']   = $this->load->view('layout/left', $this->data, true);
     $this->template['middle'] = $this->load->view($this->middle, $this->data, true);
     $this->template['footer'] = $this->load->view('layout/footer', $this->data, true);
     $this->load->view('layout/index', $this->template);
   }
}

2. Create a directory with named “layout” under “application/views/layout” and create below file under this

header.php :- create a file “header.php” under “application/views/layout/header.php” and add below code

<div style="height:200px; width:100%; border:2px solid #000;">  Header Area</div>

footer.php :- create a file “footer.php” under “application/views/layout/footer.php” and add below code

<div style="clear:both;"></div>
<div style="height:200px; width:100%; border:2px solid #000;">  Footer Area</div>

left.php :- create a file “left.php” under “application/views/layout/left.php” and add below code

<div style="height:500px; width:200px; border:2px solid #000; float:left;">  Left Area</div>

index.php :- create a file “index.php” under “application/views/layout/index.php” and add below code

<!DOCTYPE html>
<html class="no-js">
<head>
<!-- my script and syles goes here -->
</head>
<body>
 <?php if($header) echo $header ;?>
 <?php if($left) echo $left ;?>
 <?php if($middle) echo $middle ;?>
 <?php if($footer) echo $footer ;?>
</body>
</html>

home.php :- create a file “home.php” under “application/views/home.php” and add below code

<div style="height:500px; width:70%; border:2px solid #000; float:left;"> Middle Area</div>

3. Create a controller “welcome.php” under application/controllers/welcome.php and add below code :-

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends MY_Controller {
  public function index() {
    $this->middle = 'home'; // passing middle to function. change this for different views.
    $this->layout();
  }
}

Note :- controller extends to MY_Controller class to get layout call and you need to pass middle as per your need.

Now run url:- http://localhost/ci/index.php/welcome. and you will get your site with templating or layouts. now you are all set with create layouts or templating in codeigniter

Create layouts or templating in codeigniter

  • Elavarsan Ganesan

    nice tutorial. but i need to know how to pass the data’s to home ($this->middle) ?

    • rakesh sharma

      Just pass $this->data[] array, like $this->data[‘p1′] = ‘my'; then it will auto send to view you can get on view echo $p1; diectly no need to pass anywhere just set your data in $this->data array with keyname

      • Elavarsan Ganesan

        Thankz. Its working…

        • Sanpatest Accountt

          how do you pass data array in the layout $this->middle = ‘home'; $this->layout();??
          Thanks

  • This tut is very easy. But how to set custom title (to show on tag) for each “middle”? Thanks

  • Swarna Rahul

    the data array is not working, when I am trying to render a page and assigning data to $this->data. I am seeing the data failure message.