yellow folder icon Home » Beginners' Guide » CodeIgniter: Organizing views simply
« Google Chrome: One month later
Oracle 11g and PHP »

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: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
Other similar posts:


This entry was posted on Wednesday, October 22nd, 2008 at 4:20 pm

10 Responses to “CodeIgniter: Organizing views simply”

  1. AskAboutPHP.com: CodeIgniter: Organizing views simply : Dragonfly Networks (October 30th, 2008 at 6:21 pm ) Says:

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

  2. AskAboutPHP.com: CodeIgniter: Organizing views simply : WebNetiques (October 30th, 2008 at 7:52 pm ) Says:

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

  3. Pankaj (November 8th, 2008 at 6:07 pm ) Says:

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

  4. Enlaces rápidos (12-11-08) : Notitodo (November 12th, 2008 at 5:47 pm ) Says:

    […] CodeIgniter: Organizing views simply […]

  5. Enlaces rápidos (12-11-08) | Tecnolink Informática Castellón (November 20th, 2008 at 11:55 pm ) Says:

    […] CodeIgniter: Organizing views simply […]

  6. Code Igniter Layout Plugins « fwdir.com (January 6th, 2009 at 4:37 am ) Says:

    […] 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. mrhiggs (March 5th, 2009 at 7:38 am ) Says:

    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. webmaster (March 6th, 2009 at 11:33 am ) Says:

    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. Jared (April 4th, 2009 at 3:49 am ) Says:

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

  10. DCZ (June 2nd, 2009 at 10:29 pm ) Says:

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

Leave a Reply

Google