CodeIgniter: Organizing views simply

Having been brought up developing PHP using templating systems like Smarty, I’m very used to segmenting my page elements into reusable block, and swapping out blocks of HTML codes, nesting blocks of code within other blocks and so on.

Trying my hands at using CodeIgniter, one of the first obstacles I had was how to organize my ‘blocks’ on a page. Without knowing any better, I thought I had to reiterate the same view calls in every function within the controller, making the controller codes very messy.

It turns out that CodeIgniter allows us to nest views within views, and that has made things a lot simplier for me.


If you’re new to CI, and you just read the CI Docs as is, the way you would have called your views within the controller would have been like so:

1
2
3
4
5
6
7
8
9
10
11
12

<?php
class Page extends Controller {
	function index() 
	{
		$data['page_title'] = 'Your title';
		$this->load->view('header');
		$this->load->view('menu');
		$this->load->view('content', $data);
		$this->load->view('footer');
	}
}
?>

and if you wanted to create another page with a different layout for say the ‘content’ view, the most obvious way would have been

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php
class Page extends Controller {
	function index() 
	{
		$data['page_title'] = 'Your title';
		$this->load->view('header');
		$this->load->view('menu');
		$this->load->view('content', $data);
		$this->load->view('footer');
	}
 
	// the second 'page' using the content2 layout for the body.
	function page2() 
	{
		$data['page_title'] = 'Your title for content 2';
		$this->load->view('header');
		$this->load->view('menu');
		$this->load->view('content2', $data);
		$this->load->view('footer');
	}
}
?>

whilst reusing the ‘header’, ‘menu’ and ‘footer’ view. I’m sure you can imagine once this starts to scale, it would be quite messy and hard to maintain. At this point, I was thinking that there were probably better ways of doing this, and there are if you Google around a bit.

For me, I decided to try nesting the views. Instead of calling the ‘header’, ‘menu’, ‘footer’, ‘content’ views from the controller, what if I called these views from within another view, and the controller just needs to call this new view (which I named a ‘container’) and pass in the parameter of which ‘content’ view to use.

With that in mind, I created a ‘container.php‘ view, inside /system/application/view/ like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
<?php
$this->load->view('meta');
?>
</head>
<body>
<?php
$this->load->view('header');
$this->load->view('menu');
$this->load->view($page);
$this->load->view('footer');
?>
</body>
</html>

So now, within the controller, I just need to call the ‘container’ view and pass in the right parameters to use for $page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
class Pages extends Controller {
	function index() {
		$data['page_title'] = 'Your title';
		$data['page'] = 'content'; // pass the actual view to use as a parameter
		$this->load->view('container',$data);
	}
 
	function page2() {
		$data['page_title'] = 'Your title for content 2';
		$data['page'] = 'content2'; // pass the actual view to use as a parameter
		$this->load->view('container',$data);
	}
}
?>

As you can see, the controller now becomes less verbose. What I’ve also noticed is that $data['page_title'] will carry into the nested views, and the $title parameter will still get populated. Also, once you are able to nest views within views, the added benefit is your HTML code would be much neater. You can avoid cases where the open HTML tag is in one view and the closing tag is in another view.

Well, that’s it. At the most simplistic level, this is how I like to organize my views. Of course, as your site or application grows with more views, you should make use of folders and dynamic variables to further help in organizing the grow number of views you bound to have.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • DZone
  • Propeller
  • Reddit
  • StumbleUpon
  • Technorati
  • Yahoo! Buzz
Posted on October 22, 2008 at 4:20 pm by Eldee · Permalink
In: PHP Tutorials · Tagged with: , ,

22 Responses

Subscribe to comments via RSS

  1. [...] on the AskAboutPHP.com blog, this tutorial concerning CodeIgniter view organization has been [...]

  2. [...] on the AskAboutPHP.com blog, this tutorial concerning CodeIgniter view organization has been [...]

  3. Written by Pankaj on November 8, 2008 at 6:07 pm
    Permalink

    nice tutorial it will certainly beneficial for me thank you for this.

  4. Written by Enlaces rápidos (12-11-08) : Notitodo on November 12, 2008 at 5:47 pm
    Permalink

    [...] CodeIgniter: Organizing views simply [...]

  5. [...] CodeIgniter: Organizing views simply [...]

  6. Written by Code Igniter Layout Plugins « fwdir.com on January 6, 2009 at 4:37 am
    Permalink

    [...] http://www.askaboutphp.com/beginners/48/codeigniter-organizing-views-simply.html Code Igniter layout plugin that makes use of nested views. Gives ability to have different layouts for different pages. [...]

  7. Written by mrhiggs on March 5, 2009 at 7:38 am
    Permalink

    nice example: but does an alternative exists to keep methods nested in the same way.

    i’ve followed your example up, and now I’m asking myself how I might have dynamic object’s method behaviour inside content area.

    thanks a lot your your help so far, and i’d appreciate this following approach.

    nice work!

  8. Written by webmaster on March 6, 2009 at 11:33 am
    Permalink

    hi mrhiggs

    Thanks for your comment.

    Hope I’m on the right track here. You should be able to pass objects into the content area by assigning it to the $data variable in my example above.

    so something like

    $data['myobject'] = $myobject;

    all the methods will carry into the ‘views’ templates.

  9. Written by Jared on April 4, 2009 at 3:49 am
    Permalink

    Thanks for sharing. This works great. Man…it’s so easy!

  10. Written by DCZ on June 2, 2009 at 10:29 pm
    Permalink

    Nice post , I’m using the technique. Thx.

  11. Written by Cody on July 17, 2009 at 12:04 pm
    Permalink

    I’ve been using this method for awhile and I agree, it’s much easier to maintain. It gets a little messy when some of the snippets are pulling from the database as well, but you can get around that using something like Wick. http://codeigniter.com/wiki/Wick/

  12. Written by MEM on August 22, 2009 at 7:56 pm
    Permalink

    Very nice post. I’m not sure if the nested templates are the best method to use but, without any doubts, this is a very well explained post. Congrats!

    Márcio

  13. Written by watanuki on December 22, 2009 at 9:39 pm
    Permalink

    thanks for the tips… quite useful.. ^^

  14. Written by Aziz Light on January 6, 2010 at 12:12 am
    Permalink

    I’ve been doing this for a long long time, so it seem like common knowledge for me. Nice tut anyway.

    You could go one step furher though. What if you want to change the main view (the one you called ‘container’), you would have to change the name in every action of every controller where you loaded the view. Instead, what you should do is extend the Controller, and in its constructor, set the name of your main view (‘container’ in this case).

    Then instead of extending Controller, you would extend MY_Controller (or whatever you called it), and when you load the view you would have someting like this:

    $this->load->view($this->container, $data);

    This way you can change the main view easily, and you can even go further and create a small templating engine based on that principle.

  15. Written by Page template in CodeIgniter « CodeIgniter Lab on May 27, 2010 at 12:50 pm
    Permalink

    [...] Ask about PHP shared their method of how to have a template with just using normal view in CodeIgniter. Their explanation was here. [...]

  16. Written by Heath on June 20, 2010 at 9:29 am
    Permalink

    Thanks for the tut, i have only just found CI am very excited about it. I was concerned about the templating until I read your article, now I am stoked!

  17. Written by David on July 7, 2010 at 4:31 pm
    Permalink

    hello, think for this nice trick! :)

    I have add some little things :
    a global class for all page datas
    and automatic passing datas to page in container :

    // — library —

    class PageDatas {
    var $titlePage=”;
    var $viewPage=”;
    var $datas=array();
    }

    so in controller I just pass this object :

    // — controller —

    $pageDatas = new PageDatas();
    $pageDatas->titlePage = ‘Tribe’;

    // datas contents for page
    $datas['contents']=$this->ContentModel->fetchAllContents();
    $pageDatas->datas =$datas;

    // view page
    $pageDatas->viewPage = ‘content/index’;
    $this->load->view(‘layer/container’, array(‘pageDatas’=>$pageDatas));

    and in container I pass the pageDatas to header, footer…
    and direct datas to the page :

    // — container —

    load->view(‘layer/header’, array(‘pageDatas’=>$pageDatas)); ?>

    load->view($pageDatas->viewPage, $pageDatas->datas); ?>

    hope it can help ^^

  18. Written by syabac on July 10, 2010 at 12:41 pm
    Permalink

    thanks for sharing.
    nice tutorial, simple and clear..

  19. Written by SNG on August 8, 2010 at 9:42 pm
    Permalink

    In our office, we have a nickname for this. We call this idea tiling. Let the master view decide where it will put the sub views. The idea presented in CI doc is more like slicing. You have to call the slices in proper order and have to decide how much goes to header and how much in footer.

  20. Written by Gear Knobs on December 23, 2010 at 2:25 am
    Permalink

    i think that RSS FEEDS should also be included on the list of the best inventions because it makes life easier for bloggers like us -.,

  21. [...] Series andrewroland zend lucene librarycodeigniter 2.0 workshoplearncodeigniter basics Sponsors Top Rated TutorialsUsing Elliot Haughin's Twitter API with Codeigniter Part 2 (2 votes)CodeIgniter Active Record class and INSERT IGNORE (2 votes)Codeigniter Project Development from scratch to app Part 6 (2 votes)Tags2.0 active record ajax amplio.ch andrewroland.com api askaboutphp beginner class CMS codesamplez controller country db dragffy.com drop down egypt error flashdata form from scratch helper html index.php install jquery login lucene MVC net.tutsplus profiler reactor registration search session simplycodeigniter twitter upload URL validation variables view views workshop zend Sponsors LinksCodeIgniter: Organizing views simply [...]

  22. Written by Lenka on October 2, 2011 at 1:51 am
    Permalink

    I think a better approach would be to load the individual views in a superclass of a controller rather than creating a container view. Loading should be handled by a controller. This would allow e.g. loading different headers for different pages.

    So in CI_Controller there could be a function

    protected function loadView ($viewName, $data = NULL) {
    $this->load->helper(‘url’);
    $this->load->view(‘inc_head’);
    $this->load->view($viewName, $data);
    }

    and then in subclass you would use

    $this->loadView(‘home’, NULL);

Subscribe to comments via RSS

Leave a Reply