Using Nested Views with CodeIgniter - Preparing a nested view for displaying database contents (
Page 3 of 4 )
As I said in the introductory part of this series, another common approach that can be used for building different parts of a web page consists of using nested views. Sounds a bit complicated? It is not, trust me. Essentially, when using this method, there’s a main view that includes other views, which generate the distinct sections of a web document.
To clarify this concept a bit more, I’m going to code a new view file called “mainpage_view.php,” which will load three “partial views” sequentially. The file looks like this:
<?php
$this->load->view('header_view');
$this->load->view('content_view');
$this->load->view('footer_view');
?>
As you can see, this main view simply includes other views to build the header, main area and footer section of the web page. Not too difficult to grasp, right? Naturally, based on this schema, it’s not necessary to change the definition of the “partial views,” so they remain the same, as indicated below:
(definition of ‘header_view.php’ file - located at /application/views/ folder)
<!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=iso-8859-1" />
<title>Sample Web Page</title>
<link rel="stylesheet" type="text/css" href="../assets/css/default.css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo $header;?></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
(definition of ‘default.css’ file - located at /codeigniter/assets/css/ folder)
body{
padding: 0;
margin: 0;
background: #999;
}
#container{
width: 600px;
margin: 0 auto;
}
#header{
padding: 10px;
background: #eee;
}
#content{
padding: 10px;
background: #9cf;
}
#footer{
padding: 10px;
background: #eee;
}
h1{
font: bold 2em Arial, Helvetica, sans-serif;
margin: 0 0 18px 0;
color: #039;
}
h2{
font: bold 1.5em Arial, Helvetica, sans-serif;
margin: 0 0 18px 0;
}
p{
font: normal .8em Arial, Helvetica, sans-serif;
margin: 0 0 18px 0;
}
(definition of ‘content_view.php’ file - located at /application/views/ folder)
<div id="content">
<?php if($users->num_rows > 0):?>
<?php foreach($users->result() as $user):?>
<p><strong>First Name: </strong><?php echo $user->firstname;?></p>
<p><strong>Last Name: </strong><?php echo $user->lastname;?></p>
<p><strong>Email: </strong><?php echo $user->email;?></p>
<hr />
<?php endforeach;?>
<?php endif;?>
</div>
(definition of ‘footer_view.php’ file - located at /application/views/ folder)
<div id="footer">
<h2><?php echo $footer;?></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</body>
</html>
Actually, including views within other views is a powerful technique that permits you to generate dynamic and static content with extreme ease. However, you should be aware of always keeping view files like dumb structures that are only tasked with rendering data; no application logic should be delegated to them, since this is precisely the task of controllers.
Having now introduced the concept of nested views, the unique piece of this schema that still remains undefined is a controller that populates the variables included in the views with real data. Thus, in the following section I’m going to create this controller class, in this manner completing the development of this simple CI-based web application.
To see how the controller will be built, please follow the link and read the next few lines.
/ 6 
