Bước 1: Tạo CSDL “dbtest” và bảng “rating”
CREATE TABLE IF NOT EXISTS `rating` (
`rating_id` int(11) NOT NULL,
`post_id` int(11) NOT NULL,
`rating_number` int(11) NOT NULL,
`total_points` int(11) NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1 = Block, 0 = Unblock'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Bài 2: Tạo file “config.php“
<?php
//cấu hình CSDL
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'dbtest';
//kết nối CSDL
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if($db->connect_errno):
die('Kết nối thất bại:'.$db->connect_error);
endif;
?>
Bước 3: Tạo file “index.php” với nội dung sau
javascript
j12
HTML
<h1>Xếp hạng sao với jQuery, Ajax và PHP</h1>
<input name="rating" value="0" id="rating_star" type="hidden" postID="1" />
<div class="overall-rating">(Đánh giá trung bình <span id="avgrat"><?php echo $ratingRow['average_rating']; ?></span>
Dựa trên <span id="totalrat"><?php echo $ratingRow['rating_number']; ?></span> Lượt)</span></div>
CSS
.vnfit_rating_widget{
padding: 0px;
margin: 0px;
float: left;
}
.vnfit_rating_widget li{
line-height: 0px;
width: 28px;
height: 28px;
padding: 0px;
margin: 0px;
margin-left: 2px;
list-style: none;
float: left;
cursor: pointer;
}
.vnfit_rating_widget li span{
display: none;
}
.overall-rating{font-size: 14px;margin-top: 5px;color: #8e8d8d;}
Bước 4: Tạo file “rating.php” để lấy dữ liệu CSDL
<?php
include_once 'config.php';
if(!empty($_POST['ratingPoints'])){
$postID = $_POST['postID'];
$ratingNum = 1;
$ratingPoints = $_POST['ratingPoints'];
//Kiểm tra hàng đánh giá với cùng một ID bài
$prevRatingQuery = "SELECT * FROM post_rating WHERE post_id = ".$postID;
$prevRatingResult = $db->query($prevRatingQuery);
if($prevRatingResult->num_rows > 0):
$prevRatingRow = $prevRatingResult->fetch_assoc();
$ratingNum = $prevRatingRow['rating_number'] + $ratingNum;
$ratingPoints = $prevRatingRow['total_points'] + $ratingPoints;
//Cập nhật đánh giá dữ liệu vào cơ sở dữ
$query = "UPDATE post_rating SET rating_number = '".$ratingNum."', total_points = '".$ratingPoints."', modified = '".date("Y-m-d H:i:s")."' WHERE post_id = ".$postID;
$update = $db->query($query);
else:
//insert đánh giá dữ liệu vào cơ sở dữ
$query = "INSERT INTO post_rating (post_id,rating_number,total_points,created,modified) VALUES(".$postID.",'".$ratingNum."','".$ratingPoints."','".date("Y-m-d H:i:s")."','".date("Y-m-d H:i:s")."')";
$insert = $db->query($query);
endif;
//Lấy chi tiết từ cơ sở dữ liệu đánh giá
$query2 = "SELECT rating_number, FORMAT((total_points / rating_number),1) as average_rating FROM post_rating WHERE post_id = ".$postID." AND status = 1";
$result = $db->query($query2);
$ratingRow = $result->fetch_assoc();
if($ratingRow){
$ratingRow['status'] = 'ok';
}else{
$ratingRow['status'] = 'err';
}
//Trả dữ liệu đánh giá vào Json
echo json_encode($ratingRow);
}
?>
Bước 5: Tạo file “rating.js”
(function(a){
a.fn.vnfit_rating_widget = function(p){
var p = p||{};
var b = p&&p.starLength?p.starLength:"5";
var c = p&&p.callbackFunctionName?p.callbackFunctionName:"";
var e = p&&p.initialValue?p.initialValue:"0";
var d = p&&p.imageDirectory?p.imageDirectory:"images";
var r = p&&p.inputAttr?p.inputAttr:"";
var f = e;
var g = a(this);
b = parseInt(b);
init();
g.next("ul").children("li").hover(function(){
$(this).parent().children("li").css('background-position','0px 0px');
var a = $(this).parent().children("li").index($(this));
$(this).parent().children("li").slice(0,a+1).css('background-position','0px -28px')
},function(){});
g.next("ul").children("li").click(function(){
var a = $(this).parent().children("li").index($(this));
var attrVal = (r != '')?g.attr(r):'';
f = a+1;
g.val(f);
if(c != ""){
eval(c+"("+g.val()+", "+attrVal+")")
}
});
g.next("ul").hover(function(){},function(){
if(f == ""){
$(this).children("li").slice(0,f).css('background-position','0px 0px')
}else{
$(this).children("li").css('background-position','0px 0px');
$(this).children("li").slice(0,f).css('background-position','0px -28px')
}
});
function init(){
$('<div style="clear:both;"></div>').insertAfter(g);
g.css("float","left");
var a = $("<ul>");
a.addClass("vnfit_rating_widget");
for(var i=1;i<=b;i++){
a.append('<li style="background-image:url('+d+'/widget_star.gif)"><span>'+i+'</span></li>')
}
a.insertAfter(g);
if(e != ""){
f = e;
g.val(e);
g.next("ul").children("li").slice(0,f).css('background-position','0px -28px')
}
}
}
})(jQuery);
Kết quả thu được là:
k123
Trên đây là hướng dẫn tạo xếp hạng với Jquery, Ajax và PHP cho các bạn.
0 nhận xét: