Rendering the improved version of a web page - PHP

Welcome to the second installment of a series that shows you how to handle views with CodeIgniter. Made up of seven parts, this series explains different methods that you may use for loading view files within your CI-based web applications, ranging from working with a simple sequential approach, to including views within other views. This part will show you how to improve your web page's appearance with CSS.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 9

March 26, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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">

<head>

<title>Sample Web Page</title>

</head>

<body>

<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)

<?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>

</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!