Cấp bậc tác giả:

PHP

Hướng dẫn Tạo nút like giống Youtube bằng AJax và JQuery

Được viết bởi QuangIT ngày 27/04/2013 lúc 04:00 PM
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
  • 0
  • 10482

Hướng dẫn Tạo nút like giống Youtube bằng AJax và JQuery

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

Youtube_rating.png

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;
}

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML