Adding CSS to Handling Views with CodeIgniter

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.

Introduction

If you’ve had the chance to work with CodeIgniter, then you know that it is a  robust framework with many useful features that let PHP programmers build web applications very quickly and with minor efforts. Of course it has the ability to manipulate view files in different ways, which can be quite helpful when creating front-ends for a web application or for a web site.

So, if you’re interested in learning how to load views in all sorts of clever ways with this popular PHP framework, them start reading this series of articles right now!

Returning to the topic of sequential methods, you may recall that in the previous article of this series I demonstrated how to generate independently the header, main area and footer section of a basic web page by loading sequentially three different views. This task was performed by a controller class, which was called “WebPage.”

It’s worth mentioning that even though this controller populated the content area of this sample web page with some database records, it didn’t use any model to specifically handle this data. However, don’t worry about this for now, since this topic will be covered in upcoming articles of this series.

Now it’s time to continue exploring the capabilities given by CodeIgniter when it comes to handling views. Since the visual appearance of the web page mentioned above was pretty rudimentary, in this second article I’m going to improve it a bit to make it look more appealing and professional.

So, with the preliminaries out of our way, let’s see how to enhance the look and feel of this example web page. Let’s get started!

{mospagebreak title=Review: loading view files sequentially with CodeIgniter}

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.

{mospagebreak title=Enhancing the look and feel of view files with CSS styles}

In reality, enhancing the visual aspect of the web page created in the previous segment is only a matter of adding to the “header_view.php” file some basic CSS styles. It’s that simple, really. Nonetheless, it’s useful to keep these styles, along with images, JavaScript, Flash files, etc residing in a separate folder, as you usually do when building your own web applications, right?

To accomplish this in a simple manner, I’m going to create an “assets” folder under the “codeigniter” directory (assuming that this is the root directory in your CI installation) and add a new subfolder called “css.” Once there, I’m going to define a “default.css” CSS file that will be attached to the header view, which will look like this:


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;

}


That’s not rocket science, right? All that I did above was create a simple CSS file that hopefully will make the whole web page look a bit more appealing. Apart from building your skills in CSS, the educational aspect of creating this file is that it should give you a clear idea of how to define the structure of your web application when using CodeIgniter. In a case like this, the “assets” folder would include CSS, JavaScript and Flash files, along with images and so forth.

Well, now that I’ve defined the CSS file that will improve the visual presentation of the previous web page, it’s time to modify the “header_view.php” file that you learned before, so it can load the file.

This will be done in the next section. Thus, click on the link that appears below and keep reading. We’re almost finished!

{mospagebreak title=Rendering the improved version of a web page}

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!

[gp-comments width="770" linklove="off" ]

antalya escort bayan antalya escort bayan Antalya escort diyarbakir escort