javascript - how to make a star rating system in codeigniter?,

I'm very new to web technologies and this is basically for a term project that my team is working on. We are working on a food review site.

As of now, I'm not quite sure how to implement a simple 5-star rating system. Am I supposed to use a server-side language like PHP or a client-side one like Javascript (w/ JQuery). Looking around it seems that JQuery is more suitable for this? Or would it be a bination of both?

What I'm looking for as far as functionality goes is:

Stars light up when mouse hovers Page doesn't have to be reloaded when a star is clicked (not really needed) Some sort of average shown beside the stars Rating has to be stored somewhere in a MySQL database (Is this a good idea?) I really apologize if the question sounds vague and stupid, I don't have much of a clue on how to implement this and I've tried googling around. If you have any questions about it please let me know.

Thank you very much.

I'm very new to web technologies and this is basically for a term project that my team is working on. We are working on a food review site.

What I'm looking for as far as functionality goes is:

Thank you very much.

Share Improve this question asked Mar 27, 2017 at 3:46 Farkhan Imfrozin 231 silver badge3 bronze badges

1 you can have a look at this [ jqueryrain./demo/jquery-rating-plugin ] – Nishant Nair Commented Mar 27, 2017 at 3:57
1 There is no need to use an additional plug-in for start rating functionality – Mayank Pandeyz Commented Mar 27, 2017 at 3:57

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

Complete 5 star rating code with Codeigniter and ajax and javascript

First of all you create a database for inserting rating data

 CREATE TABLE IF NOT EXISTS `employees` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) NOT NULL,
`blog_id` int(11) NOT NULL,
`rating` float NOT NULL,
`ment_rating` varchar(255) NOT NULL,
`created_at` timestamp NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1703 ;

controller

 public function user()
{
    $blogid = 1; //this is static id of blog but you are not enter static id you enter your dynami c id of blog or post
    $data['get_avg_rating'] = $this->users->count_total_rating($blogid);
    $data['rating_data'] = $this->users->get_rating_data($blogid);
    $this->load->view('user', $data);
}

Model

<?php
public function count_total_rating($where) 
{
    $this->db->select('AVG(rating) as average');
    $this->db->where('blog_id', $where);
    $this->db->from('rating');
    return $query = $this->db->get()->result_array();
}
public function get_rating_data($blogid)
{
    $this->db->select('*');
    $this->db->from('users u');
    $this->db->join('rating r', 'r.user_id = u.user_id');
    $this->db->where('blog_id', $blogid);
    return $query = $this->db->get()->result();
}

View

 <?php
 $this->load->view('header'); ?>

<div class="col-sm-12 profile_follow_editor">
    <div class="container p0">
        <div class="col-sm-12 profile_follow">
            <div class="col-sm-8 profile_padd">
                <div class="col-sm-9 p0">
                    <span class="pull-left pro-image-pull-left">
                        <img src="<?php echo $this->config->base_url();?>assets/frontend/images/profile_pic.png">
                    </span>
                    <span class="pull-left profile-pull-left">
                        <h2>STEVE GIULIANO</h2>
                        <p><span class="profile_padd_1">Locations:</span>Chicago, IL </p>
                        <p><span class="profile_padd_2">Website:</span><a class="" href="#">www.yourwebsite.</a></p>
                        <p><span class="profile_padd_3">Twitter:</span><a class="" href="#">www.yourwebsite./tinurl</a></p>
                        <h3>BLOG</h3>
                    </span>
                    <div class="clear10"></div>
                    <div class="clear5"></div>
                    <a class="follow_btn" href="#">FOLLOW</a>
                    <div class="clearfix"></div>
                </div>
                <div class="col-sm-3 p0" id="following-data">
                    <ul class="follow_ul">
                        <li><a href="#" onclick="follower()"><h3>FOLLOWERS</h3> <span><?= $followers_count ?></span></li>
                        <li style="margin:0px;"><a href="#" onclick="following()"><h3>FOLLOWING</h3> <span><?= $follwing_count ?></span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="clear40"></div>
 <div class="container p0"> 
    <div class="col-sm-9 ment_main_padd">
          <div class="col-sm-12 p0">
            <div class="dropdown pull-right">
                <button style="text-align: left;" class="btn btn-primary dropdown-toggle picks_dropdown type="button" data-toggle="dropdown">Filter <span class="pull-right"><i class="fa fa-caret-down" aria-hidden="true"></i></span></button>
                <ul class="dropdown-menu">
                    <li>Picks Only</a></li>
                </ul>
            </div>
        </div>
        <div class="clear10"></div>
        <div class="clear5"></div>
        <div class="col-sm-12 profile_feedback">

            <span class="pull-right">
                <div class="star pointer" onclick="rating()" >
                <?php $rating_value = ceil($get_avg_rating[0]['average']); ?>
                    <span class="<?php if ($rating_value >= 1) {
                        echo 'fa fa-star';
                    }else{ echo 'fa fa-star-o';} ?>"></span>
                    <span class="<?php if ($rating_value >=2) {
                        echo 'fa fa-star';
                    }else{ echo 'fa fa-star-o'; } ?>" ></span>
                    <span class="<?php if ($rating_value >=3) {
                        echo 'fa fa-star';
                    }else{ echo 'fa fa-star-o';} ?>"></span>
                    <span class="<?php if ($rating_value >=4) {
                        echo 'fa fa-star';
                    }else{ echo 'fa fa-star-o'; } ?>" ></span>
                    <span class="<?php if ($rating_value >=5) {
                        echo 'fa fa-star';
                    }else{ echo 'fa fa-star-o'; } ?>"></span>
                    <input type="hidden" name="whatever1" class="rating-value" value="0">
                </div>
                <!-- End Rating Picks -->
            </span>
            <span class="pull-left feedback-img-pull-left"><img src="<?php echo $this->config->base_url();?>assets/frontend/images/ment_img.png"></span>
            <span class="pull-left user-pull-left">
                <h3>JOHN DOE &nbsp;<span>ADDED PICK:</span></h3>
                <h4>TCU-6 @ TEXAS TECH</h4>
                <h5>11/18/2017 3:10PM</h5>
            </span>
            <div class="clearfix"></div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

              <p class="collapse" id="block-id">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

  <!-- aria-expanded attribute is mandatory -->
  <!-- bootstrap changes it to true/false on toggle -->
  <a href="#block-id"
     class=""
     data-toggle="collapse"
     aria-expanded="false"
     aria-controls="block-id">

    <span class="collapsed">
      Read more
    </span>
    <span class="expanded">
      Read Less
    </span>

  </a>
  <input type="hidden" name="blog_id" id="blog_id" value="1">

        </div>
    </div>
</div>

<div class="modal fade" id="rating_modal" role="dialog" tabindex="-1" aria-hidden="true" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" onclick="javascript:window.location.reload()" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title">Pick Rating</h3>
    </div>
    <div class="modal-body form">

    <div class="row">
        <div class="col-md-12">
            <h3 class="modal-title star-rating">
                Rating &nbsp; &nbsp; 
                <span class="fa fa-star-o" data-rating="1"></span>
                <span class="fa fa-star-o" data-rating="2"></span>
                <span class="fa fa-star-o" data-rating="3"></span>
                <span class="fa fa-star-o" data-rating="4"></span>
                <span class="fa fa-star-o" data-rating="5"></span>
                <input type="hidden" name="whatever1" class="rating-value" value="2.56">
           </h3>
           <p id="demo"></p>
            <!-- Rating Picks -->       
            <!-- <div class="star-rating">

            </div> -->
            <!-- End Rating Picks -->
        </div>
        <div class="clear10"></div>
        <div class="col-md-12">
            <textarea class="form-control" id="ment_rating" placeholder="Description"></textarea>
            <br>
            <button class="btn btn-danger pull-right" onclick="post_rating()"> Post Rating</button>
        </div>

    </div>

    <?php //echo "<pre>"; print_r($rating_data); ?>
    <?php foreach ($rating_data as $r_data) { ?>

    <div class="row">
        <div class="col-md-12">
            <h3 class="modal-title star"><?php echo $r_data->fname; ?>
                 &nbsp; &nbsp; 
                <span class="<?php if ($r_data->rating >= 1) {
                    echo 'fa fa-star';
                }else{ echo 'fa fa-star-o';} ?>"></span>
                <span class="<?php if ($r_data->rating >=2) {
                    echo 'fa fa-star';
                }else{ echo 'fa fa-star-o'; } ?>" ></span>
                <span class="<?php if ($r_data->rating >=3) {
                    echo 'fa fa-star';
                }else{ echo 'fa fa-star-o';} ?>"></span>
                <span class="<?php if ($r_data->rating >=4) {
                    echo 'fa fa-star';
                }else{ echo 'fa fa-star-o'; } ?>" ></span>
                <span class="<?php if ($r_data->rating >=5) {
                    echo 'fa fa-star';
                }else{ echo 'fa fa-star-o'; } ?>"></span>
                <input type="hidden" name="whatever1" class="rating-value" value="2.56">
            </h3>
            <!-- Rating Picks -->       
            <!-- <div class="star">

            </div> -->
            <!-- End Rating Picks -->
        </div>

        <div class="col-md-12">
            <?php //echo "<pre>"; print_r($all_rating);  ?>
            <span><?php echo $r_data->ment_rating; ?></span>
        </div>

         <div class="clear10"></div>

    </div>
    <?php }  ?>

    </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<style>
#rating_modal .close{
    font-size: 40px;
    color: #fff;
    opacity: 1;
}

#rating_modal .modal-header{
    background: #d9534f;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}   

.star-rating {
    line-height:32px;
    font-size:1.25em;       
}

.star {
    line-height:32px;
    font-size:1.25em;
    cursor: pointer;
}

.star-rating .fa-star{color: #c20001;}
.star .fa-star{color: #c20001;}</style>

  <?php
  $this->load->view('footer');  ?>

 <script type="text/javascript">
function rating() {
    $('#rating_modal').modal('show');
} </script>


<script>
function post_rating() {
    var blogid = $('#blog_id').val();
    var ment_rating = $('#ment_rating').val();
    var starcount = $star_rating.siblings('input.rating-value').val();
    if (starcount&&ment_rating) {
    $.ajax({
        url: "main/rating",
        data: {starcount: starcount, blogid: blogid, ment_rating: ment_rating},
        type: "POST",
        success: function (data) {

            location.reload();

        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert('error in insert rating data');
        }
    });
    }else{
        alert("Please rate and ment");
    }

}
var $star_rating = $('.star-rating .fa');
var SetRatingStar = function() {
    return $star_rating.each(function() {
    if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {

    return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
        return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
});

};
// alert($star_rating.siblings('input.rating-value').val());

$star_rating.on('click', function() {
    $star_rating.siblings('input.rating-value').val($(this).data('rating'));
    return SetRatingStar();
});

First of all you need a database table in which you can hold the rating given by user, that table contains all the required column in it to maintain the proper relationship.

To handle the rating on front-end you need Jquery and ajax() function to send the user request to the back-end and a controller function to set and get the user values into database.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to make a star rating system in codeigniter?, - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)