Система за гласуване като на Vbox7

Автор: HunteR

Здравейте,
почти съм 100% сигурен, че сте виждали системата за гласуване с ръчичките като във Vbox7.

Точно такава система съм решил да ви покажа как се прави в днешния урок.
Ще видите сами, че изобщо не е сложно 🙂

Първото нещо, което трябва да направите е разбира се базата данни.
След, което ще трябва да създадем и таблиците.

Ето ги и тях:

CREATE TABLE `votes` (
`id` int(12) NOT NULL,
`yes` int(10) NOT NULL default '0',
`no` int(10) NOT NULL default '0',
UNIQUE KEY(`id`)
);

CREATE TABLE `ips` (
`id` int(12) NOT NULL,
`ip` varchar(25) NOT NULL,
`vote` enum('-1','1') NOT NULL,
`timestamp` int(15) NOT NULL
);

Така готови сме с базата данни и таблиците в нея.

Сега следва да създадем файла, който ще се свързва с тази база данни.
Нека го кръстим connect.php. В него сложете:

<?php
define("HOST", "localhost"); // хост на MySQL - default: localhost
define("USER", "root"); // усер за MySQL - default: root
define("PASS", ""); // парола за MySQL - default: празна
define("BD", "votes"); // име на база данни - default: votes

$db_conn = @mysql_connect(HOST, USER, PASS) or die(mysql_error());
@mysql_select_db(BD, $db_conn) or die(mysql_error());

define("TIMESTAMP_VOTE", 24); // през колко време да може да гласува дадено IP в часова. 0 - само по 1 път.
?>

Както сами виждате, имаме възможност да нагласим през колко време да може да гласува даден потребител. Като разбира се може да направите само веднъж за ID.

Сега нека преминем към AJAX файла.
Създайте си файл vote.js и в него поставете следния код:

var xmlHttp

function showHint(str, id)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="vote.php"
url=url+"?q="+str
url=url+"&id="+id+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

Така. Готови сме и с AJAX файла. Останаха ни два файла. index.php и vote.php.

Добре сега създайте файл с име vote.php и в него поставете:

<?php
require "connect.php";

$id = $_GET['id'];
$q = $_GET['q'];
$ip = $_SERVER['REMOTE_ADDR'];

if (($q == -1 || $q == 1) && is_numeric($id) && $id > 0)
{
$glasove = mysql_fetch_object(mysql_query("SELECT `yes`,`no` FROM `votes` WHERE `id` = '$id' LIMIT 1"));
$timestamp_vote = (is_numeric(TIMESTAMP_VOTE) && TIMESTAMP_VOTE > 0) ? time() - (TIMESTAMP_VOTE * 3600) : 0;
$ip_count = @mysql_result(mysql_query("SELECT COUNT(*) FROM `ips` WHERE `id` = '$id' AND `ip` = '$ip' AND `timestamp` > '$timestamp_vote' LIMIT 1"), 0);
if (!$ip_count)
{
$yes = ($q == 1) ? 1 : 0;
$no = ($q == -1) ? 1 : 0;
$procent_yes = @round((($glasove -> yes + $yes) / (($glasove -> yes + $yes) + $glasove -> no)) * 100);
$procent_no = @round((($glasove -> no + $no) / ($glasove -> yes + ($glasove -> no + $no))) * 100);
$vote_yes = ($q == 1) ? "vote_up" : "vote_up2";
$vote_no = ($q == -1) ? "vote_down" : "vote_down2";
$sql = "INSERT INTO `votes` (`id`,`yes`,`no`) VALUES ('$id','$yes','$no')";
if (!mysql_query($sql))
{
mysql_query("UPDATE `votes` SET `yes` = yes + $yes,`no` = no + $no WHERE `id` = '$id'");
}

$count_ip = mysql_fetch_object(mysql_query("SELECT COUNT(*) as 'kolko' FROM `ips` WHERE `id` = '$id' AND `ip` = '$ip' LIMIT 1"));
if (!$count_ip -> kolko)
{
mysql_query("INSERT INTO `ips` (`id`,`ip`,`vote`,`timestamp`) VALUES ('$id','$ip','$q','".time()."')");
}
else
{
mysql_query("UPDATE `ips` SET `vote` = '$q',`timestamp` = '".time()."' WHERE `id` = '$id' AND `ip` = '$ip' LIMIT 1");
}

echo "<img src=\"".$vote_yes.".gif\" border=\"0\"> <b>".(($glasove -> yes) + $yes)." ($procent_yes%)</b> <img src=\"".$vote_no.".gif\" border=\"0\"> <b>".(($glasove -> no) + $no)." ($procent_no%)</b><br />Гласували: <b>".(($glasove -> yes + $yes) + ($glasove -> no + $no))."</b>";
}
else
{
echo "<img src=\"".$vote_yes.".gif\" border=\"0\"> <b>".(($glasove -> yes) + $yes)." ($procent_yes%)</b> <img src=\"".$vote_no.".gif\" border=\"0\"> <b>".(($glasove -> no) + $no)." ($procent_no%)</b><br />Гласували: <b>".(($glasove -> yes + $yes) + ($glasove -> no + $no))."</b>";
}
}
?>

Така, след като сме създали и този файл ни остана последният файл, а той е index.php

Създайте го и сложете в него:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Система за гласуване</title>
<?php $id = (is_numeric($_GET['id']) && $_GET['id'] > 0) ? $_GET['id'] : 0; ?>
<script type="text/javascript" src="vote.js"></script>
<script language="JavaScript">
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
</script>
</head>
<?php
require "connect.php";
$row = mysql_fetch_array(mysql_query("SELECT `yes`,`no` FROM `votes` WHERE `id` = '$id'"));
$yess = (empty($row['yes'])) ? 0 : $row['yes'];
$noo = (empty($row['no'])) ? 0 : $row['no'];

$timestamp_vote = (is_numeric(TIMESTAMP_VOTE) && TIMESTAMP_VOTE > 0) ? time() - (TIMESTAMP_VOTE * 3600) : 0;

$query = mysql_query("SELECT `vote` FROM `ips` WHERE `id` = '$id' AND `ip` = '".$_SERVER['REMOTE_ADDR']."' AND `timestamp` > '$timestamp_vote' LIMIT 1");
$vote_ip = mysql_fetch_object($query);
$vote_yes = (($vote_ip -> vote) == 1) ? "vote_up" : "vote_up2";
$vote_no = (($vote_ip -> vote) == -1) ? "vote_down" : "vote_down2";

$procent_yes = @round(($yess / ($yess + $noo)) * 100);
$procent_no = @round(($noo / ($yess + $noo)) * 100);
?>
<body>

<div id="txtHint"><?php if (!mysql_num_rows($query)) { ?><a href="javascript:void(null)" onclick="showHint('1','<?=$id?>')" onmouseover="movepic('pic1','vote_up.gif');"
onmouseout="movepic('pic1','vote_up2.gif');"><? } ?><img name="pic1" src="<?=$vote_yes?>.gif" border="0"><?php if (!mysql_num_rows($query)) { ?></a><? } ?> <b><?=$yess?> (<?=$procent_yes?>%)</b>
<?php if (!mysql_num_rows($query)) { ?><a href="javascript:void(null)" onclick="showHint('-1','<?=$id?>')" onmouseover="movepic('pic2','vote_down.gif');"
onmouseout="movepic('pic2','vote_down2.gif');"><? } ?><img name="pic2" src="<?=$vote_no?>.gif" border="0"><?php if (!mysql_num_rows($query)) { ?></a><? } ?> <b><?=$noo?> (<?=$procent_no?>%)</b><br />
Гласували: <b><?=($yess+$noo)?></b></div>

</body>
</html>

Готови сме с файловете 🙂

Остава ви да свалите четирите картинки и да ги поставите в директорията с файловете.

Сега да ви обясня как се използва системата.

Влизате във index.php, който създадохме по-горе като трябва да зададете кое ID да отоври.

Това става по следния начин:
yoursite.com/index.php?id=1
В примера зареждаме ID с номер 1.

Резултатите за всяко ID са индивидуални!
Това е системата. Надявам се да ви е полезна 🙂