webhost

Web hosting

Wednesday, February 15, 2012

How to Create Star Rating using CodeIgniter and jQuery Star Rating Plugin

$(function() {
       $('.star-radio').rating({
            required: true,
            callback: function(value, link) {
            $.ajax({
                type: "post",
                url: site_url + "user/rate",
                dataType: "json",
                data: "&post_url=" + $('#post_url').val() + "&rate_val=" + value,
                success: function(e) {
                    $.jGrowl(e.code + "<br>" + e.msg);
                }
         });
     }
});
On the code snippet above, we implement the rating plugin on the HTML element which has "star-radio" class attribute, which is your radio button as rating control. Every time user rate to a post, the script will send an Ajax request to User controller and send the rate data to the "rate" function.
<?php
    // .. some User controller code up here
    // Rate function on User Controller
    public function rate()
    {
        // Turn of layout for Ajax request
        unset($this->layout);
        // Gather ajax post data
        $rate = $this->input->post("rate_val", true);
        $post_url = $this->input->post("post_url", true);
        // Load model data
        $this->load->model('Post');
        $post_id = $this->Post->get_post_id($post_url);
        // Call function to check if user is login
        // return current login user id, null if not login yet
        // You need to define this helper function your self
        if (get_user_id()) {
            // Call the Post Model is_rated method to check whether the current login user has submit a rate to related post
            if (!$this->Post->is_rated(get_user_id(), $post_id))
            {
                $data = array("post_id" => $post_id,
                    "user_id" => get_user_id(),
                    "posts_rating_value" => $rate,
                    "posts_rating_date" => date("Y-m-d H:i:s")
                );
                // Call Post model method to insert rating data
                if ($this->Post->insert_rating($data, $post_id, $rate)) {
                    echo json_encode(array("code" => "Success", "msg" => "Thank you, rate has been submitted"));
                }
                else {
                    echo json_encode(array("code" => "Error", "msg" => "Sorry, something wrong. Please try again."));
                }
            }
            // If post has been rated by the current login user
            else {
                echo json_encode(array("code" => "Error", "msg" => "You have already rated this post"));
            }
        }
        // User is not login yet, ask them to login first
        else {
            echo json_encode(array("code" => "Error", "msg" => "Please login to submit this rate"));
        }
        // Do not proceed to view, just terminate to send Json response
        exit;
    }
    // .. any other User controller code goes here
?>
Following is the CodeIgniter View sample code for the rating control on your post view:
<?php
//Check if user logged in
if (!get_user_id()) {
    $radioIsActive = "disabled=disabled ";
}
else {
    $radioIsActive = " ";
}
?>
<?php
for ($i = 1; $i <= 5; $i++) :
    if ($i == round($row["average"])) :
?>
    <input class="star-radio" type="radio" name="rating" value="<?php echo $i; ?>" checked="checked" <?php echo "$radioIsActive"; ?>/>
    <?php else: ?>
    <input class="star-radio" type="radio" name="rating" value="<?php echo $i; ?>" <?php echo "$radioIsActive"; ?>/>
<?php
    endif;
endfor;
?>

1 comment: