Tạo hệ thống vote giống youtube

Bạn từng xem youtube rồi đúng không? Well, bạn có thấy nút like and dislike dưới mỗi video không? Muốn làm hệ thống vote như vậy không? Bài viết này, Biên Thùy sẽ hướng dẫn bạn tạo một hệ thống vote giống thế nhé :)
Đầu tiên là phải tạo database để lưu trữ những vote của người xem chứ, nhỉ? Vào database của bạn, thêm một table gọi là bt_demvote đi :) với 4 bảng chính là id, content_id, voteup, votedown.
Đây là lệnh chạy SQL trong MySQL Database

CREATE TABLE IF NOT EXISTS `bt_demvote` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `content_id` VARCHAR(100) NOT NULL,
  `voteup` INT(11) NOT NULL,
  `votedown` INT(11) NOT NULL,
  PRIMARY KEY (`id`)
);

Tạo CSS để trang trí cho nút vote up and vote down: (cho vào trước của header nhé :D )

<style type="text/css">
/*voting style */
.bt_wrapper {display:inline-block;margin-left: 20px;}
.bt_wrapper .down_button {background: url(https://www.bienthuy.com/bienthuy-img/bienthuy-vote-thumbs.png) no-repeat;float: left;height: 14px;width: 16px;cursor:pointer;margin-top: 3px;}
.bt_wrapper .down_button:hover {background: url(https://www.bienthuy.com/bienthuy-img/bienthuy-vote-thumbs.png) no-repeat 0px -16px;}
.bt_wrapper .up_button {background: url(https://www.bienthuy.com/bienthuy-img/bienthuy-vote-thumbs.png) no-repeat -16px 0px;float: left;height: 14px;width: 16px;cursor:pointer;}
.btg_wrapper .up_button:hover{background: url(https://www.bienthuy.com/bienthuy-img/bienthuy-vote-thumbs.png) no-repeat -16px -16px;;}
.bt_btn{float:left;margin-right:5px;}
.bt_btn span{font-size: 11px;float: left;margin-left: 3px;}
</style>

HTML code:
Dán đoạn code vote này vào ngay sau chỗ bạn muốn đặt vote, thường là tiêu đề của bài viết chẳng hạn.

<!-- BIENTHUY.COM voting system -->
<div id="xxx" class="bt_wrapper">
<div class="bt_btn">
<div class="up_button"></div>
<span class="up_votes">0</span>
</div>
&nbsp;
<div class="bt_btn">
<div class="down_button"></div>
<span class="down_votes">0</span>
</div>
</div>
<!-- BIENTHUY.COM voting system end -->

Lưu ý đoạn id=”xxx” nhớ thay xxx bằng id của bài viết, bài hát hoặc id của bài muốn vote.

Bây giờ, ta tiếp tục xử lý vote để lưu vào database bằng jQuery và PHP:
Với phần javascript, ta xử lý để chuyển qua file php: (cái này cũng cho vào trước của header nhé :D )

<script type="text/javascript">
$(document).ready(function() {
	$.each( $('.bt_wrapper'), function(){
		var unique_id = $(this).attr("id");
		post_data = {'unique_id':unique_id, 'vote':'fetch'};
		$.post('/btvote.php', post_data,  function(response) {
				$('#'+unique_id+' .up_votes').text(response.vote_up); 
				$('#'+unique_id+' .down_votes').text(response.vote_down);
			},'json');
	});

	$(".bt_wrapper .bt_btn").click(function (e) {
		var clicked_button = $(this).children().attr('class');
		var unique_id 	= $(this).parent().attr("id"); 
		if(clicked_button==='down_button')
		{
			post_data = {'unique_id':unique_id, 'vote':'down'};
			$.post('/btvote.php', post_data, function(data) {
				$('#'+unique_id+' .down_votes').text(data);
				alert("Cam on ban, vote cua ban da duoc tinh!");
			}).fail(function(err) { 
			alert(err.statusText); 
			});
		}
		else if(clicked_button==='up_button') //user liked the content
		{
			post_data = {'unique_id':unique_id, 'vote':'up'};
			$.post('/btvote.php', post_data, function(data) {
				$('#'+unique_id+' .up_votes').text(data);
				alert("Cam on ban da thich bai viet nay.");
			}).fail(function(err) { 
			alert(err.statusText); 
			});
		}
	});
});
</script>

Tạo một file php với tên btvote.php cho nội dung sau vào và up lên thư mục gốc của host (nhớ thay thông tin database bằng database của bạn nhé.

<?php
/* Voting system
* Shared by BienThuy.Com
* www.BienThuy.Com
* Yahoo: huyhoa
* Skype: tinhcaviet
* Facebook: https://www.facebook.com/bienthuywebsite
* Twitter: https://www.twitter.com/bienthuywebsite
* @ 2015. All Rights Reserved.
*/
####### ket noi toi database ##########
$db_username = 'xxxxx';
$db_password = 'xxxxx';
$db_name = 'xxxxx';
$db_host = 'localhost';
####### ket noi toi database ##########
if($_POST)
{ 
    ### kiem tra va ket noi toi database
    $sql_con = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
    //xem khach vote up hay down
    $user_vote_type = trim($_POST["vote"]);
    //tao mot id moi cho bai viet duoc vote
    $bt_id = filter_var(trim($_POST["unique_id"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
    //chuyen cai id nay thanh md5 cho no unique :D
    $bt_id = hash('md5', $bt_id);   
    //kiem tra xem cai request nay co phai gui qua ajax khong, neu gui truc tiep thi tu choi xu ly
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
        die();
    }
    switch ($user_vote_type)
    {        
       ##### neu ma khach thich bai viet #########
        case 'up':           
            //dung cookie de kiem tra xem khach da vote cho bai viet nay chua
            if (isset($_COOKIE["voted_".$bt_id]))
            {
            //khach da vote bai nay roi
			header('HTTP/1.1 500 Already Voted');
            //thoat ra, khong xu ly nua
			exit();
            }           
            //lay du lieu trong database ra de hien thi xem co bao nhieu luot vote up roi
            $result = mysqli_query($sql_con,"SELECT vote_up FROM bt_demvote WHERE content_id='$bt_id' LIMIT 1");
            $get_total_rows = mysqli_fetch_assoc($result);           
            if($get_total_rows)
            {
                //neu tim thay du lieu, thi sẽ update cai vote up đó thêm 1 lần like
                mysqli_query($sql_con,"UPDATE bt_demvote SET vote_up=vote_up+1 WHERE content_id='$bt_id'");
            }else{
            // neu khong tim thay thi insert vao du lieu
                mysqli_query($sql_con,"INSERT INTO bt_demvote (content_id, vote_up) value('$bt_id',1)");
            }   
			// set cookie trong vong 2 gio moi duoc vote 1 lan :D
            setcookie("voted_".$bt_id, 1, time()+7200);
            //hien thi tong lan vote up
			echo ($get_total_rows["vote_up"]+1);
            break; 
        ##### Neu user vote down #########
        case 'down':           
            //dung cookie de kiem tra xem khach da vote cho bai viet nay chua
            if (isset($_COOKIE["voted_".$bt_id]))
            {
			//khach da vote bai nay roi
                header('HTTP/1.1 500 Already Voted this Content!');
            //thoat ra, khong xu ly nua
			 exit();
            }
            //lay du lieu trong database ra de hien thi xem co bao nhieu luot vote up roi
            $result = mysqli_query($sql_con,"SELECT vote_down FROM bt_demvote WHERE content_id='$bt_id' LIMIT 1");
            $get_total_rows = mysqli_fetch_assoc($result);           
            if($get_total_rows)
            {
            //neu tim thay du lieu, thi sẽ update cai vote up đó thêm 1 lần like
                mysqli_query($sql_con,"UPDATE bt_demvote SET vote_down=vote_down+1 WHERE content_id='$bt_id'");
            }else{
            // neu khong tim thay thi insert vao du lieu
                mysqli_query($sql_con,"INSERT INTO bt_demvote (content_id, vote_down) value('$bt_id',1)");
            }        
			// set cookie trong vong 2 gio moi duoc vote 1 lan :D
            setcookie("voted_".$bt_id, 1, time()+7200); 
			//hien thi tong lan vote down
            echo ($get_total_rows["vote_down"]+1);
            break;        
        ##### Hien thi ra ngoai #########     
        case 'fetch':
            //lay du lieu so lan vote up va so lan vote down
            $result = mysqli_query($sql_con,"SELECT vote_up,vote_down FROM bt_demvote WHERE content_id='$bt_id' LIMIT 1");
            $row = mysqli_fetch_assoc($result);           
            // Dam bao rang so lieu nay phai la so va khong duoc null
            $vote_up    = ($row["vote_up"])?$row["vote_up"]:0;
            $vote_down  = ($row["vote_down"])?$row["vote_down"]:0;           
            //tao json cho no trong mang array de hien thi ra ngoai sau nay
            $send_response = array('vote_up'=>$vote_up, 'vote_down'=>$vote_down);
            echo json_encode($send_response); //display json encoded values
            break;
    }
}
?>

Muốn xem và nghịch demo thì xem cái này:

Voting System Youtube Style With jQuery & PHP

4.8/5 - (4745 bình chọn)
Recommended Reads:
How to use WordPress tags as HTML keywords meta tags
PHP Images Hosting Script
PHP – Convert number to text
PHP Random Quotes – Random Text script

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *