Commenting system with Ajax and Codeigniter

Question

I am implementing a commenting box with ajax and CodeIgniter.

I want a script where a signed in user comments, and Ajax sends the user_id and the post to the controller, the comment is added to the MySQL database and the comment list is then refreshed. this code below is doing the functionality only i want it done using ajax. Here is part of my view scenery.php

  <?php 
$scenery_id=$scenery1['scenery_id'];

 echo form_open(('display_scenery/add_comment/'.$scenery_id)); ?>

 <div class="input-group" ><!-- input group starts-->

  <input type="text" class="form-control" id ="Comment" name ="Comment"  placeholder="Comment on Scenery..." maxlength="300" size= "70" required> 
  <input type ="hidden" name= "Scenery_id" value= " <?php echo $scenery_id?>" />

   <button type="submit"  id = "submit"class="btn btn-info regibutton" >Post</button>


    </div>

 </form>
  <hr/>
   <div id = "comment-box">
 <?php
  if ($comment==NULL){
 //if no scenery comment echo disclaimer
         echo " <ul style = ' margin-left: 0px;padding-left: 0px;'> <li style = 'list-style: none; background-color: #fff; padding : 5px 5px 5px 10px; margin: 5px 5px 5px 5px'>";
      echo " No scenery Comments";  
       echo "</li>
 </ul>"; 
} else{

   foreach ($comment as $row){
 // if the  comments are availabe echo  them
    echo " <ul style = ' margin-left: 0px;padding-left: 0px;'> <li style = 'list-style: none; background-color: #fff; padding : 10px 5px 5px 10px; margin: 5px 5px 5px 5px'>";
  echo $row->Comment;
   echo "<br/>";
     echo "<p style='font-size: 11px; color:#333; padding-top: 5px;'>".date(" D d M Y - H:i:s ",strtotime($row->Date_posted))."By - ". $row->Username. " </p>";
     echo $row->Date_added;

     echo "</li>
 </ul>";
 }

 }
   }
  ?>
  </div>
   </div>
  <br>
 <br>

Here is my Controller display_scenery.php

    public function add_comment(){

$this->load->library('form_validation'); 
    $session_data = $this->session->userdata('logged_in');
        $User_id= $session_data['User_id'];
    $scenery_id = $_POST['Scenery_id'];
    $Comment=$_POST['Comment'];

 $this->form_validation->set_rules('Comment', 'Comment', 'trim|required');
  if($this->form_validation->run() == FALSE)
    {
        ///$error=   form_error('Comment');
        $this-> session->set_flashdata('error',  form_error('Comment'));    
        redirect ('scenery', 'refresh');
}
else {
    //loads the model image_display then redirects to scenery page
  $this-> image_display->add_comment( $scenery_id,     $Comment,$User);             
  redirect ('scenery', 'refresh');


}


   }

Answer 1

If a user is signed in, presumably you are storing the user's data in a session variable, so you can get the user's ID from their session data (in fact, you shouldn't accept this information from the frontend since the user could easily change the value of their UID to pretend to be somebody else using Chrome Developer Tools or Firebug). Once they're signed in, you can use jQuery's $.ajax method to submit the AJAX query:

$.ajax({
    // Submitting to Controller_name->submit_comment() on your site
    'url': 'https://www.example.com/controller_name/submit_comment',
    // Submit as a POST request
    'type': 'POST',
    // comment_text should be a variable containing
    // the text of the comment
    'data': 
    {
        'comment_text': comment_text
    },
    // Controller method will return a JSON object
    'dataType': 'json',
    // Success method for response
    'success': function (response)
    {
        // If success, display comment. This is all coming
        // from the PHP code below.
        if (response.status === true)
        {
            $('#comments').append('<div class="comment"><span class="user-id">' + response.comment.user_id + '</span> at <span class="timestamp">' + response.comment.timestamp + '</span></br />' + response.comment.text + '</div>');
        }
        // Else failure, display error
        else
        {
            $('#comments').append('<div class="comment-error">' + response.error + '</div>');
        }
    }
});

On the CodeIgniter backend, you would add a method to the Controller_name controller called submit_comment:

public function submit_comment()
{
    $response = array(
        'status' => FALSE,
    );

    // Get the various pieces of data that are needed
    // to store the comment - text, user ID, timestamp of comment.
    $comment = array(
        // Get user ID from session data
        'user_id' => $this->session->userdata('user_id'),
        // Get comment from POST data
        'text' => $this->input->post('comment'),
        // Set timestamp to current epoch time
        'timestamp' => time()
    );

    // Do your validation and database query to save the comment here.
    // Store the result in a variable called $comment_posted
    // (TRUE for success, FALSE for failure).

    // If data validation/database query succeed:
    if ($comment_posted)
    {
        // Set status to true to indicate success.
        $response['status'] = TRUE;
        // Rewrite timestamp to date/time string since humans don't speak epoch.
        $comment['timestamp'] = date('m/d/Y g:ia', $comment['timestamp']);
        // Include comment object in body of response.
        $response['comment'] = $comment;
    }
    // Else the validation/query failed, return an error message.
    else
    {
        // Return a useful error message.
        $response['error'] = 'Some useful error message here.';
    }

    // Print the response array as a JSON-encoded string,
    // which will be consumed by the success method in
    // the Javascript code above.
    die(json_encode($response));
}

Answer 2

You can first make it without AJAX just to get the functionality going. Also don't send the user id as you should already have that on the server side, just send the post id.