我对网络技术非常陌生，这基本上是针对我的团队正在进行的一个学期项目。我们正在开发一个食品评论网站。
到目前为止，我还不太清楚如何实施简单的 5 星评级系统。我应该使用像 PHP 这样的服务器端语言还是像 Javascript（w/JQuery）这样的客户端语言。环顾四周似乎JQuery更适合这个？还是两者兼而有之？
就功能而言，我正在寻找的是：
鼠标悬停时星星会亮起 单击星标时不必重新加载页面（实际上不需要） 在星星旁边显示某种平均值 评级必须存储在 MySQL 数据库中的某个位置（这是个好主意吗？） 如果这个问题听起来含糊不清和愚蠢，我真的很抱歉，我对如何实现这一点没有太多线索，我已经尝试过谷歌搜索。如果您对此有任何疑问，请告诉我。
非常感谢。
【问题讨论】：
标签： javascript jquery html css codeigniter
使用 Codeigniter 和 ajax 和 javascript 完成 5 星评级代码
首先创建一个用于插入评分数据的数据库
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,
`comment_rating` varchar(255) NOT NULL,
`created_at` timestamp NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1703 ;
控制器
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);
}
型号
<?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();
}
查看
<?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.com</a></p>
<p><span class="profile_padd_3">Twitter:</span><a class="" href="#">www.yourwebsite.com/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 comment_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/comment_img.png"></span>
<span class="pull-left user-pull-left">
<h3>JOHN DOE <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 commodo 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 commodo 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">×</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
<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="comment_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; ?>
<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->comment_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 comment_rating = $('#comment_rating').val();
var starcount = $star_rating.siblings('input.rating-value').val();
if (starcount&&comment_rating) {
$.ajax({
url: "main/rating",
data: {starcount: starcount, blogid: blogid, comment_rating: comment_rating},
type: "POST",
success: function (data) {
location.reload();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('error in insert rating data');
}
});
}else{
alert("Please rate and comment");
}
}
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();
});
【讨论】：
首先，您需要一个数据库表，您可以在其中保存用户给出的评分，该表包含所有必需的列以保持正确的关系。
要处理前端的评分，您需要 Jquery 和 ajax() 函数将用户请求发送到后端，并将 controller 函数发送到 set 和 get 用户值到数据库.
【讨论】：