Adding CSS to Handling Views with CodeIgniter - Rendering the improved version of a web page (
Page 4 of 4 )
If you’re like me, then surely you’ll want to see how the CSS styles defined in the prior section can be tied to the “header_view.php” file created before. To demonstrate more clearly how this process functions, below I listed the improved version of this header file, along with the web page controller and the other views. Here they are:
(definition of ‘webpage.php’ file – located at /application/controllers/ folder)
<?php
class WebPage extends Controller{
function WebPage(){
// load controller parent
parent::Controller();
// load libraries here
$this->load->database();
// load helpers here
}
// load views sequentially
function index(){
// load 'header' view
$this->load->view('header_view',array('header'=>'Header Section'));
// load 'content' view and pass database content
$this->load->view('content_view',array('users'=>$this->db->get('users')));
// load 'footer' view
$this->load->view('footer_view',array('footer'=>'Footer Section'));
}
}
?>
(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 ‘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>
As shown above, not only has the “default.css” CSS file been attached to the header view, but now the whole web application's structure looks improved. In addition to examining the previous code samples, you may want to look at the following screen shot, which shows the polished appearance of this sample web page:
I can’t say that the web document is ready to be used in production environments, but it looks much more attractive now. Even so, this example shows in a nutshell how to add some CSS styles to views that have been loaded sequentially, which can be quite helpful if you want to get familiar with the core concepts that surround the usage of CodeIgniter.
Final thoughts
In this second chapter of the series, I demonstrated how to polish the visual appearance of the web page created in the previous tutorial. As you saw for yourself, this process is actually very straightforward, meaning that you shouldn’t have major problems replicating it with your own CI-based applications.
In the upcoming part, I’ll be exploring another method for loading views with CodeIgniter based on its “load->vars()” method. So, here’s a suggestion that you should take into account: don’t miss the next article!
