Today i will explain about blog comment system using codeigniter ,I had created a small demo using codeigniter and ajax.
Now i will create a Blog page with comment system,Create php view as below. If you are interested in creating your own blog eknowledgetree linked with dreamhost and providing promo code for $47 discount, to avail this offer click below link How to avail $47 discount dreamhost promo code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Eknowledgetree Comments Demo</title>

    <!-- Bootstrap -->
    <link href="<?php echo base_url();?>css/bootstrap.min.css" rel="stylesheet">

   
  </head>
 
  <?php
      foreach($query->result() as $row)
{
?>
      <div class="panel panel-default">
           <input type="hidden" id="article" value="<?php echo $row->aticle_id;?>">
        <div class="panel-heading"><?php echo $row->title;?></div>
        
    <div class="panel-body"><?php echo $row->article_body;?></div>   
          
          
      </div>     <?php
}
?>
  
  <div id="display_comment"></div>
 
  <div class="container-fluid" id="com"> 
      <h3>Leave a Comment</h3>
      <form class="form-horizontal" method="post" id="form">
       
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
           
            <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" value="">
        </div>
    </div>
    <div class="form-group">
        <label for="message" class="col-sm-2 control-label">Comment</label>
        <div class="col-sm-10">
            <textarea class="form-control" rows="4" id="comment" name="comment"> </textarea>
        </div>
    </div>
     <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <input id="submit" name="submit" type="submit" value="Submit Comment" class="btn btn-primary">
        </div>
    </div>
   
</form>  
  </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script type="text/javascript" src="<?php echo base_url();?>scripts/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="<?php echo base_url();?>scripts/bootstrap.min.js"></script>
  </body>
</html>

<script>
         
        $(document).ready(function () {
         var article_id = $("#article").val();
         $.post('<?php echo base_url();?>index.php/welcome/displaycomments/',
                                                  {
                                                   article_id:article_id
                                                  
                                                  },
                                                  function(data)
						  {
                                                     
						    $("#display_comment").html(data);
						  });
         }); 
         
     
      
 
    
$(function() {
$("#submit").click(function() 
{
var name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var article_id = $("#article").val(); 
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment+ '&article_id=' + article_id;
if(name=='' || email=='' || comment=='')
{
alert('Please Give Valid Details');
}
else
{
//$("#display_comment").show();
$("#display_comment").fadeIn(100).html('<img src="<?php echo base_url();?>uploads/ajax-loader.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "<?php echo base_url();?>index.php/welcome/insert_comments/",
data: dataString,
cache: false,
success: function(data){
    
$("#display_comment").html(data);
$("#display_comment").fadeIn(slow);
}
});
}return false;

}); });

</script>

Now we will create Comment view, which will be created as below

<style>
    .com_img
	{
	float: left; width: 80px; height: 80px; margin-right: 20px;
	}
	.com_name
	{
	font-size: 16px; color: rgb(102, 51, 153); font-weight: bold;
	}
        ol.timeline
	{list-style:none;font-size:1.2em;}
	ol.timeline li{ display:none;position:relative;padding:.7em 0 .6em 0;}ol.timeline li:first-child{}
        .box
	{
	height:85px;
	border-bottom:#dedede dashed 1px;
	margin-bottom:20px;
        margin-left: 175px;
	}
		
    
</style>

 <?php
foreach($comments->result() as $row)
{
?>


<li class="box">
<img src="<?php echo base_url();?>uploads/nopic_192.gif" class="com_img">
<span class="com_name"> <?php echo $row->name; ?></span> <br />
<span> <?php echo $row->comment; ?></span>
</li>
 
<?php
}
?>

Now we will move to Database design for this comment system we need to create two table as below.

[wp-like-lock]

CREATE TABLE IF NOT EXISTS `blog_comments` (
  `comment_id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `emailid` varchar(100) NOT NULL,
  `comment` text NOT NULL,
  `time` varchar(100) NOT NULL,
  `cmt_article_id` int(11) NOT NULL,
  PRIMARY KEY (`comment_id`),
  KEY `cmt_article_id` (`cmt_article_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

CREATE TABLE IF NOT EXISTS `blog_articles` (
  `aticle_id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `article_body` text NOT NULL,
  PRIMARY KEY (`aticle_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

Now Lets move to controller part ,here
[sociallocker]

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {

	
        public $data;
 	public function __construct()
	{//Core controller constructor
	    parent::__construct();
	    $this->load->model('ektreemodel');
               
				
	}
	
    public function display_comments()
    {
        
           $data['query']=$this->ektreemodel->get_article();
           $data['comments']=$this->ektreemodel->get_comments();
           $this->load->view('demos/comments', $data);
    }
    public function insert_comments()
    {
         $insertinfo=$this->ektreemodel->insertcomments_article();
         //$data['comments']=$this->ektreemodel->get_latestcomment();
          $data['comments']=$this->ektreemodel->get_comments();
         echo $this->load->view('demos/commentdisplay',$data);
    }
    public function displaycomments()
    {
         $data['comments']=$this->ektreemodel->get_comments();
         echo $this->load->view('demos/commentdisplay',$data);
    }
    
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */

Now let’s move to Model file below

<?php
class Ektreemodel extends CI_Model
{
  
    
 //insert comments
 public function insertcomments_article()
 {
     $this->load->helper('date');
     $name=$this->input->post('name');
     $email=$this->input->post('email');
     $article_id=$this->input->post('article_id');
     $comment=$this->input->post('comment');
     $datestring = "%Y-%m-%d - %h:%i %a";
     $time = time();
     $date= mdate($datestring, $time);
     $insertcomment=$this->db->insert('blog_comments',array('name'=>$name ,'emailid'=>$email,'comment'=>$comment,'time'=>$date,'cmt_article_id'=>$article_id));
     return $insertcomment;       
 }
 //retrive comments
 public function get_comments()
 {
       $article_id=$this->input->post('article_id');
       $this->db->select('*');
       $this->db->from('blog_comments');
       $this->db->where('cmt_article_id',$article_id);
       return $this->db->get();	
 }
 public function get_latestcomment()
 {
       $article_id=$this->input->post('article_id');
       $this->db->select('*');
       $this->db->from('blog_comments');
       $this->db->where('cmt_article_id',$article_id);
       $this->db->order_by('comment_id', 'DESC');
       $this->db->limit('1');
       return $this->db->get();	
 }
    
    
}
?>

[/sociallocker]

Thanks for reading this article