Bài viết hướng dẫn bạn làm một nút like và dislike giống với Youtube sử dụng Ajax
I. Datatable
Cái gì thì cái nhưng datatable là không thể thiếu
CREATE TABLE messages(
id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT,
up INT,
down INT);
II. Index.php
Tiếp theo là tạo ra một trang index để mọi người có thể thực hiện like hoặc dislike. Đầu tiên là dùng jquery để xử lý việc xem người dùng click nút nào, dislike hay là like. Sau đó gửi dữ liệu đến 1 file rating.php bằng ajax.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".like").click(function()
{
var id=$(this).attr("id");
var name=$(this).attr("name");
var dataString = 'id='+ id + '&name='+ name;
$("#votebox").slideDown("slow");
$("#flash").fadeIn("slow");
$.ajax
({
type: "POST",
url: "rating.php",
data: dataString,
cache: false,
success: function(html)
{
$("#flash").fadeOut("slow");
$("#content").html(html);
}
});
});
// Close button action
$(".close").click(function()
{
$("#votebox").slideUp("slow");
});
});
</script>
//HTML Code
<a href="#" class="like" id="1" name="up">Like</a>
--
<a href="#" class="like" id="1" name="down">Dislike</a>
<div id="votebox">
<span id='close'><a href="#" class="close">X</a></span>
<div id="flash">Loading........</div>
<div id="content">
</div>
</div>
III. Rating.php
Trong file này chúng ta sẽ bắt request của user, và kiểm tra xem đó là like hay dislike để thực hiện update vào csdl. Sau đó thực hiện tính tổng số like và dislike, thực hiện lấy % để hiển thị ra vạch màu tương ứng. Việc dùng % để đảm bảo khi dữ liệu ngày càng tăng thì 2 vạch màu sẽ không thể kéo dài mãi được.
<?php
include("db.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$name=mysql_escape_String($_POST['name']);
// Vote update
mysql_query("update messages set $name=$name+1 where id='$id'");
// Getting latest vote results
$result=mysql_query("select up,down from messages where id='$id'");
$row=mysql_fetch_array($result);
$up_value=$row['up'];
$down_value=$row['down'];
$total=$up_value+$down_value; // Total votes
$up_per=($up_value*100)/$total; // Up percentage
$down_per=($down_value*100)/$total; // Down percentage
//HTML output
echo '<b>Ratings for this blog</b> ( '.$total.' total)
Like :'.$up_value.'
<div id="greebar" style="width:'.$up_per.'%"></div>
Dislike:'.$down_value.'
<div id="redbar" style="width:'.$down_per.'%"></div>';
}
?>
Và cuối cùng là đoạn max CSS làm đẹp hơn
#votebox
{
border:solid 1px #dedede; padding:3px;
display:none;
padding:15px;
width:700px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#greebar
{
float:left;
background-color:#aada37;
border:solid 1px #698a14;
width:0px;
height:12px;
}
#redbar
{
float:left;
background-color:#cf362f;
border:solid 1px #881811;
width:0px;
height:12px;
}
#close
{
float:right; font-weight:bold;
padding:3px 5px 3px 5px;
border:solid 1px #333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}