Home arrow PHP arrow Page 4 - Adding CSS to Handling Views with CodeIgniter

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:
  1. Adding CSS to Handling Views with CodeIgniter
  2. Review: loading view files sequentially with CodeIgniter
  3. Enhancing the look and feel of view files with CSS styles
  4. Rendering the improved version of a web page
By: Alejandro Gervasio
Rating: starstarstarstarstar / 9
March 26, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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!



 
 
>>> More PHP Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

PHP ARTICLES

- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: