Completing a Blogging Application with the Code Igniter PHP Framework

Welcome to the conclusion of a six-part series on building a MySQL-driven blogging application with the Code Igniter PHP framework. By using the framework, you’ll be taking advantage of the MVC pattern to separate the application’s logic from its visual presentation. This article will focus on the improving the appearance of the application’s final details: the section concerned with receiving and displaying comments.

Introduction

As a PHP developer, you can build anything that you can think of, ranging from simple form validation programs and template processors to full-blown database-driven applications.  A blogger falls under the second category. Most of the time, developing a program like this will require that you set up a few MySQL tables, build a group of scripts that will handle blog entries, and finally create a set of templates that will render this data in the form of HTML pages.

Of course, when building such a program, you probably use your own set of classes and functions. However, you may want to save yourself some time and effort by using a framework, like Code Igniter, to develop a blog application like the one mentioned above.

If this is the case, then don’t waste more time; take a look at this group of articles. They’ll provide you with a comprehensive guide on building a MySQL-driven blogger with Code Igniter, which implements the MVC pattern for separating application logic from visual presentation.

And now that I mentioned the “visual presentation,” you’ll remember that I left off the last article discussing how to improve the appearance of the blogger that I developed in the previous tutorials. I added a few CSS styles to the view file that displayed a bunch of blog entries, in this way polishing considerably its look and feel.

However, the blogger includes yet another view file, which displays the comments that have been made on a particular entry and the web form that lets users post them appropriately. Therefore, in this final chapter of the series, I’m going to style this specific file, thus completing the construction of this blog application using Code Igniter.

It’s time to finish this educational journey. Let’s go!

{mospagebreak title=The full source code of the blogger in its previous state}

I know that you want to see how the finished blogger looks. First, however, I will list its source files; they were built in the preceding tutorial. Doing so will help you to recall more easily how these files were created by using the MVC approach.

That being clarified, here are the three files that comprise the blog application, in its current version:

// 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’ve taken a close look at the above source files, I should assume that you’re familiar with them. As you’ll surely recall, the first of these files is a controller class, which is really the workhorse of the blogger; it fetches blog data from the corresponding MySQL tables, and also inserts new comments into the corresponding database.

The other two files are simply templates used by the controller to display this blog data in the form of web pages. Now, does all this thing ring any bells for you? I bet it does!

Thus, if you understand how the previous files link with each other, it’s time to improve the visual appearance of the last view that comprises the blogger. This one displays comments submitted by users, along with the web form that permits them to post new entries.

This specific task will be discussed in depth in the following section, so to learn how it will be accomplished, please read the next few lines.

{mospagebreak title=Adding CSS styles to the blogs_comments_view.php file}

Improving the visual aspect of the view file that lets users to see the comments that have been made on a particular entry, as well as submitting new posts, is a matter of coding a few simple CSS styles. That’s all.

In this case, I’m going to utilize practically the same group of styles that I wrote for the other view, to give them a consistent look. But naturally, this process is completely customizable, so you’re free to provide the whole blog application with the appearance that best suits your needs.

Having clarified that point, here’s the signature of the view file in question, this time including the pertinent 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;

}

a:link,a:visited{

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

color: #00f;

text-decoration: none;

}

a:hover{

color: #f90;

}

textarea, input.textbox{

width: 300px;

padding: 3px;

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

color: #000;

}

</style>

</head>

<body>

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

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

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

<div id="container">

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

</div>

<?php endforeach;?>

<?php endif;?>

<div id="container">

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

</div>

</body>

</html>


Didn’t I tell you that polishing the visual presentation of the above view file was a straightforward process? As you can see, all I did before was style some of the elements included in the file in question to make it look a bit more professional.

You may get a clearer idea of the final result of this styling process if you look at the following complementary image:



At this point, not only does the blog application work correctly, but it looks pretty appealing, too. Logically, if you’re planning to introduce other modifications to any of the source files, don’t forget to save them to the corresponding folders, so they can be tested locally.

In the last section, I’ll be listing the complete source code of the blogger, including the changes that I made before. So please read the next few lines. We’re almost finished!

{mospagebreak title=Showing the blogging application’s full source code}

As I mentioned in the section that you just read, below I listed the complete source code of this blog application, so you can play around with it and introduce your own improvements. Here it is:


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

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

}

a:link,a:visited{

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

color: #00f;

text-decoration: none;

}

a:hover{

color: #f90;

}

textarea, input.textbox{

width: 300px;

padding: 3px;

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

color: #000;

}

</style>

</head>

<body>

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

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

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

<div id="container">

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

</div>

<?php endforeach;?>

<?php endif;?>

<div id="container">

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

</div>

</body>

</html>


Now that you have at your disposal the complete source code of this MySQL-driven blogger, feel free to make your own changes and improvements. This will give you a more solid background in working with Code Igniter. If you’re like me, then you have a lot of fun ahead!

Final thoughts

Sad but true, we’ve come to the end of this series. Hopefully, after reading its tutorials, you’ll have a clear idea of how simple it is to build a database-driven application with Code Igniter.

Of course, a framework like this may not fit all of your needs, particularly when it comes to developing large-scale web programs. If you create small and middle-sized web sites frequently, however, Code Igniter is, in my opinion, one of the best frameworks available today.

I’ll see you in the next PHP development tutorial!

Google+ Comments

Google+ Comments