Comment system using Codeigniter and Ajax

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.

READ  Jquery popup in for loop using codeigniter

[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

19 Comments

  1. Denis Coughlan May 28, 2015
    • admin June 15, 2015
  2. santosh December 11, 2015
  3. Louvella January 5, 2016
  4. Cavus Foot January 27, 2016
  5. den March 19, 2016
  6. jakir March 20, 2016
  7. DwayneVPiner June 17, 2016
  8. RocioTNuncio July 13, 2016
  9. JavierQStemm July 23, 2016
  10. DevinTRepoff August 27, 2016
  11. BryanMGnau August 29, 2016
  12. DayleVOlmedo October 9, 2016
  13. Chrisjoe April 5, 2017
  14. Nydia May 25, 2017
  15. Joel June 13, 2017
  16. Rockstar March 15, 2018
  17. MUKESH JAKHAR March 27, 2018
  18. Skard Finance July 8, 2018

Leave a Reply