Polishing the Visual Presentation of a Blogger with the Code Igniter PHP Framework

This series of articles is aimed at demonstrating how to build a blog application with the Code Igniter PHP framework, which relies on the functionality offered by the MVC approach to create full-featured PHP programs. Thus, if you’re interested in learning how to build a program like this, then start reading this tutorial now! It is the fifth part of the six-part series.

Introduction

Code Igniter is a robust PHP framework written in PHP 4 that permits you to build object-based web applications in a truly painless way with the Model-View-Controller pattern. By means of this approach, it’s possible to separate the application logic of a web-based program from its visual presentation, which contributes to developing applications that are much more maintainable and modular.

Of course, all of these benefits sound pretty good in theory, but undoubtedly the best way to take advantage of them is by developing a real-world web application that implements the MVC pattern in an approachable fashion.

You’ll certainly recall that in the previous tutorial, I finished creating the bare bones structure of this MySQL-driven blog application. In that article, I explained how to develop a simple front-end that allowed users to post their comments on different blog entries.

With this recent addition, the blogger is capable of displaying a bunch of blog entries previously stored on a MySQL table. Additionally, the application provides users with a basic web form in which to enter comments to each blog post. Users expect this behavior from any blog application.

Although in its current state, the blogger works well, its visual presentation looks pretty primitive. Therefore, in this fifth part of the series I’ll be adding some CSS styles to the view files that comprise this blog application to improve its look and feel.

Ready to learn how this will be done with Code Igniter? Then click on the link below and start reading!

{mospagebreak title=The blog application’s full source code so far}

Before I show you how to polish the visual presentation of this blog application, I first want to list all of its source files. This will reacquaint you with how it was built using Code Igniter, and give you some ideas as to how we can improve its look and feel.

Having said that, please take a look at the signature of the following files, which are the building blocks of the blogger. Here they are:


// definition for ‘blogger.php’ file (located at /system/application/controllers/ folder)


class Blogger extends Controller{

function Blogger(){

// load controller parent

parent::Controller();

// load database class and connect to MySQL

$this->load->database();

// load pagination library

$this->load->library(‘pagination’);

// load helper

$this->load->helper(‘url’);

}

// display all blog entries

function blogs(){

$data['title']=’Blog Entries Listing’;

$data['result']=$this->db->get(‘blogs’,3,$this->uri->segment(3));

// set pagination parameters

$config['base_url']=’http://127.0.0.1/codeigniter/index.php/blogger/blogs/’;

$config['total_rows']=$this->db->count_all(‘blogs’);

$config['per_page']=’3′;

$config['full_tag_open']=’<div id="paginglinks">’;

$config['full_tag_close']=’</div>’;

$this->pagination->initialize($config);

// create pagination links

$data['links']=$this->pagination->create_links();

// load ‘blogs_view’ view

$this->load->view(‘blogs_view’,$data);

}

// display all blog comments

function comments(){

$data['title']=’Blog Comments Listing’;

$this->db->where(‘blog_id’,$this->uri->segment(3));

$data['result']=$this->db->get(‘blogs_comments’);

// load ‘blogs_comment_view’ view

$this->load->view(‘blogs_comment_view’,$data);

}

// insert new blog comment

function insert_comment(){

$this->db->insert(‘blogs_comments’,$_POST);

redirect(‘blogger/comments/’.$_POST['blog_id']);

}

}



// definition for ‘blogs_view.php’ file (located at /system/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><?php echo $title;?></title>

</head>

<body>

<h1><?php echo $title;?></h1>

<?php foreach($result->result_array() as $blog):?>

<h2><?php echo $blog['title'];?></h2>

<p><?php echo $blog['text'];?></p>

<p><?php echo anchor(‘blogger/comments/’.$blog['id'],’View Blog Comments &gt;&gt;’);?></p>

<?php endforeach;?>

<?php echo $links;?>

</body>

</html>



// definition for ‘blogs_comment_view.php’ file (located at /system/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><?php echo $title;?></title>

</head>

<body>

<h1><?php echo $title;?></h1>

<?php if($result->num_rows()>0):?>

<?php foreach($result->result_array() as $comment):?>

<p><strong>Author: </strong><?php echo $comment['author'];?></p>

<p><strong>Comment:</strong></p>

<p><?php echo $comment['text'];?></p>

<p><?php echo anchor(‘blogger/blogs/’,'&lt;&lt; Back to blog’);?></p>

<?php endforeach;?>

<?php endif;?>

<?php echo form_open(‘blogger/insert_comment’);?>

<?php echo form_hidden(‘blog_id’,$this->uri->segment(3));?>

<p>Author:</p>

<p><input type="text" name="author" class="textbox" /></p>

<p>Enter your comments below:</p>

<p><textarea name="text" rows="10" cols="20"></textarea></p>

<p><input type="submit" value="Submit Comment" /></p>

</form>

</body>

</html>


Even at first sight, the three source files listed above seem to be pretty simplistic. They are all the source code required to get this MySQL-driven blog application working as expected. In this case, the first file, called “blogger.php,” is the program’s controller. It is responsible for fetching both blog and comment entries from the respective database tables, as well as for inserting new posts via the corresponding web form.

In addition, the view files are utilized by the controller class simply for embedding blog data into a couple of web pages. Now that the complete structure of the blogger has been put at your disposal, do you realize how easy it is to create database-driven applications with Code Igniter? I bet you do!

However, this educational journey isn’t over yet, since the blogger’s visual aspect looks primitive and unprofessional. Definitely, this issue needs to be fixed quickly.

Thus, in the following section, I’ll include a few basic CSS styles in the first view file, which will make it look much more appealing. Of course, to learn how this styling process will be performed, please click on the link shown below and keep reading.

{mospagebreak title=Improving the blogger’s visual presentation}

Improving the look of the blogger is only a matter of adding a few simple CSS styles to each of the view files coded in the earlier section, since they’re the elements that actually compose the visual presentation of the application.

Therefore, I’m going to style the first view — the one responsible for displaying all the blog entries stored on the “blogs” MySQL table. As you’ll see in a moment, this process requires only tying a few CSS styles to the headers and links of the web document, divs and paragraphs, and some additional web page elements as well.

So in short, here’s how this view file now looks, after including the aforementioned CSS styles:


<!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><?php echo $title;?></title>

<style type="text/css">

body{

margin: 0;

padding: 0;

background: #fff;

}

h1{

font: bold 16pt Arial, Helvetica, sans-serif;

color: #003399;

margin: 18px 0 18px 0;

text-align: center;

}

h2{

font: bold 12pt Arial, Helvetica, sans-serif;

color: #333;

margin: 0 0 18px 0;

}

p{

font: normal 11px Verdana, Arial, Helvetica, sans-serif;

color: #333;

margin: 0 0 18px 0;

}

#container{

width: 500px;

background: #ccf;

padding: 15px;

margin-left: auto;

margin-right: auto;

margin-bottom: 18px;

}

#paginglinks{

width: 500px;

background: #eee;

padding: 5px 15px 5px 15px;

margin-left: auto;

margin-right: auto;

}

a:link,a:visited{

font: normal 11px Verdana, Arial, Helvetica, sans-serif;

color: #00f;

text-decoration: none;

}

a:hover{

color: #f90;

}

</style>

</head>

<body>

<h1><?php echo $title;?></h1>

<?php foreach($result->result_array() as $blog):?>

<div id="container">

<h2><?php echo $blog['title'];?></h2>

<p><?php echo $blog['text'];?></p>

<p><?php echo anchor(‘blogger/comments/’.$blog['id'],’View Blog Comments &gt;&gt;’);?></p>

</div>

<?php endforeach;?>

<?php echo $links;?>

</body>

</html>


Now the “blogs_view.php” file includes a few typical CSS styles, which come in useful for polishing the look of the web document that displays the blog entries. In this case, I encapsulated these styles within a couple of <style> tags, but naturally it’s preferable to code them in a separate file.

Finally, to complement the previous explanation, below I included a screen capture that shows clearly the improved visual presentation of the blogger. Here it is:



That looks much better, definitely! Of course, I decided to style the web page that displays the blog entries according to my personal tastes, but you can easily change this to suit your own preferences.

So far, so good. At this stage, you hopefully learned how to polish the visual appearance of the blogger, at least partially. Therefore, the last thing that I’m going to show you in this tutorial will be a list of the complete source code of the blog application, this time including the CSS styles that you just learned.

So, jump forward and read the following section. We’re almost done!

{mospagebreak title=Listing the improved version of the blogger}


Having already styled the web page that shows all of the blog entries, it’s time to list the full source code that comprises the blog program, so you can test and eventually change any of its files. Here’s how the blogger looks after including the CSS styles shown in the previous section:


// definition for ‘blogger.php’ file (located at /system/application/controllers/ folder)


class Blogger extends Controller{

function Blogger(){

// load controller parent

parent::Controller();

// load database class and connect to MySQL

$this->load->database();

// load pagination library

$this->load->library(‘pagination’);

// load helper

$this->load->helper(‘url’);

}

// display all blog entries

function blogs(){

$data['title']=’Blog Entries Listing’;

$data['result']=$this->db->get(‘blogs’,3,$this->uri->segment(3));

// set pagination parameters

$config['base_url']=’http://127.0.0.1/codeigniter/index.php/blogger/blogs/’;

$config['total_rows']=$this->db->count_all(‘blogs’);

$config['per_page']=’3′;

$config['full_tag_open']=’<div id="paginglinks">’;

$config['full_tag_close']=’</div>’;

$this->pagination->initialize($config);

// create pagination links

$data['links']=$this->pagination->create_links();

// load ‘blogs_view’ view

$this->load->view(‘blogs_view’,$data);

}

// display all blog comments

function comments(){

$data['title']=’Blog Comments Listing’;

$this->db->where(‘blog_id’,$this->uri->segment(3));

$data['result']=$this->db->get(‘blogs_comments’);

// load ‘blogs_comment_view’ view

$this->load->view(‘blogs_comment_view’,$data);

}

// insert new blog comment

function insert_comment(){

$this->db->insert(‘blogs_comments’,$_POST);

redirect(‘blogger/comments/’.$_POST['blog_id']);

}

}



// definition for ‘blogs_view.php’ file (located at /system/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><?php echo $title;?></title>

<style type="text/css">

body{

margin: 0;

padding: 0;

background: #fff;

}

h1{

font: bold 16pt Arial, Helvetica, sans-serif;

color: #003399;

margin: 18px 0 18px 0;

text-align: center;

}

h2{

font: bold 12pt Arial, Helvetica, sans-serif;

color: #333;

margin: 0 0 18px 0;

}

p{

font: normal 11px Verdana, Arial, Helvetica, sans-serif;

color: #333;

margin: 0 0 18px 0;

}

#container{

width: 500px;

background: #ccf;

padding: 15px;

margin-left: auto;

margin-right: auto;

margin-bottom: 18px;

}

#paginglinks{

width: 500px;

background: #eee;

padding: 5px 15px 5px 15px;

margin-left: auto;

margin-right: auto;

}

a:link,a:visited{

font: normal 11px Verdana, Arial, Helvetica, sans-serif;

color: #00f;

text-decoration: none;

}

a:hover{

color: #f90;

}

</style>

</head>

<body>

<h1><?php echo $title;?></h1>

<?php foreach($result->result_array() as $blog):?>

<div id="container">

<h2><?php echo $blog['title'];?></h2>

<p><?php echo $blog['text'];?></p>

<p><?php echo anchor(‘blogger/comments/’.$blog['id'],’View Blog Comments &gt;&gt;’);?></p>

</div>

<?php endforeach;?>

<?php echo $links;?>

</body>

</html>



// definition for ‘blogs_comment_view.php’ file (located at /system/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><?php echo $title;?></title>

</head>

<body>

<h1><?php echo $title;?></h1>

<?php if($result->num_rows()>0):?>

<?php foreach($result->result_array() as $comment):?>

<p><strong>Author: </strong><?php echo $comment['author'];?></p>

<p><strong>Comment:</strong></p>

<p><?php echo $comment['text'];?></p>

<p><?php echo anchor(‘blogger/blogs/’,'&lt;&lt; Back to blog’);?></p>

<?php endforeach;?>

<?php endif;?>

<?php echo form_open(‘blogger/insert_comment’);?>

<?php echo form_hidden(‘blog_id’,$this->uri->segment(3));?>

<p>Author:</p>

<p><input type="text" name="author" class="textbox" /></p>

<p>Enter your comments below:</p>

<p><textarea name="text" rows="10" cols="20"></textarea></p>

<p><input type="submit" value="Submit Comment" /></p>

</form>

</body>

</html>


Now that you have the complete source code of this MySQL-driven blog application, don’t you feel satisfied? You should, because at this moment you have the chance to play around with the source files. Whatever you do, one thing is for sure: fun is already guaranteed!

Final thoughts

In this fifth chapter of the series, I demonstrated how to polish the visual presentation of the web blogger by styling the web document that displays blog entries. As you saw before, this process was extremely straightforward and didn’t require any special programming skills.

In the last article, I’ll be styling the web documents that shows user-submitted comments, in this manner completing the development of this blogger application.

Now that you’ve been warned, don’t miss the final part!

Google+ Comments

Google+ Comments