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

Review: loading view files sequentially with CodeIgniter - 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 don’t have the time to take a look at the example developed in the preceding article, where I explained how to build a basic web document by loading sequentially three different views, here’s the full source code from that example, so you can rapidly grasp how it works.


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

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


These are all the files required for building a basic web page whose main section has been populated with contents fetched from a “users” MySQL table. In this specific situation, the views corresponding to the header, content section and footer were loaded sequentially by the “WebPage” controller listed above.

Now that you hopefully recalled how to load views in a sequential way with CI, it’s time to improve the visual presentation of the web page generated previously. To do so, I’m simply going to incorporate into this page a few CSS styles, but the details of this process will be discussed in the section to come.

Therefore, click on the link below and read the following segment, please.



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