Главная->Уроки по php->Создание системы голосования с помощью PHP, AJAX и jQuery

Создание системы голосования с помощью PHP, AJAX и jQuery

12 Янв в 00:56

Начнем мы с создания базы данных. Это можно сделать через phpMyAdmin вручную или же использовать следующий текст:

CREATE TABLE messages( mes_id INT PRIMARY KEY AUTO_INCREMENT, msg TEXT, up INT, down INT);

База данных выше будет хранить все сообщения, а ниже - IP адреса, чтобы пользователи не могли голосовать более 1-го раза.

CREATE TABLE Voting_IP( ip_id INT PRIMARY KEY AUTO_INCREMENT, mes_id_fk INT, ip_add VARCHAR(40), FOREIGN KEY(mes_id_fk) REFERENCES messages(mes_id));

После этого нам необходимо создать файл Voting.php, и в него поместить следующий код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".vote").click(function() {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name=='up') {
$(this).fadeIn(200).html('<img src="dot.gif" />');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html) {
parent.html(html); }
});
} else {
$(this).fadeIn(200).html('<img src="dot.gif" />');
$.ajax({
type: "POST",
url: "down_vote.php",
data: dataString,
cache: false,
success: function(html) {
parent.html(html);
}
});
}
return false;
});
});

<script //HTML Code
<?php
include('config.php');
$sql=mysql_query("SELECT * FROM messages LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg=$row['msg'];
$mes_id=$row['mes_id'];
$up=$row['up'];
$down=$row['down'];
?>
<div class="main">
<div class="box1">
<div class='up'>
<a href="" class="vote" id="<?php echo $mes_id; ?>" name="up"><?php echo $up; ?></a></div>
<div class='down'>
<a href="" class="vote" id="<?php echo $mes_id; ?>;" name="down"><?php echo $down; ?></a></div></div> <div class='box2' ><?php echo $msg; ?></div> </div> <?php } ?>

Код выше выводит 9 сообщений на страницу с кнопками оценивания. Также код выше обращается к файлу настройки подключения к базе данных config.php. Выглядеть он должен так:

<?php
$mysql_hostname = "hostname";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>

Необходимо вставить свой логин, пароль, название базы в необходимые поля. Далее нам понадобятся два PHP файла для прибавления положительных и негативных голосов: up_vote.php и down_vote.php up_vote.php
<?php
include("config.php");
$ip=$_SERVER['REMOTE_ADDR'];
if($_POST['id']) {
$id=$_POST['id'];
$id = mysql_escape_String($id); //Verify IP address in Voting_IP table
$ip_sql=mysql_query("select ip_add from Voting_IP where mes_id_fk='$id' and ip_add='$ip'");
$count=mysql_num_rows($ip_sql);
if($count==0) { // Update Vote.
$sql = "update Messages set up=up+1 where mes_id='$id'";
mysql_query( $sql); // Insert IP address and Message Id in Voting_IP table.
$sql_in = "insert into Voting_IP (mes_id_fk,ip_add) values ('$id','$ip')";
mysql_query( $sql_in);
echo "<script>alert('Thanks for the vote');</script>";
} else {
echo "<script>alert('You have already voted');</script>";
}
$result=mysql_query("select up from Messages where mes_id='$id'");
$row=mysql_fetch_array($result);
$up_value=$row['up'];
echo $up_value;
}
?>

В down_vote.php все также, только необходимо заменить все up на down И в конце нам понадобится немного стилей для оформления:

#main {
height:80px;
border:1px dashed #29ABE2;
margin-bottom:7px;
width:500px;
}
.box1 {
float:left;
height:80px;
width:50px;
}
.box2 {
float:left;
width:440px;
text-align:left;
margin-left:10px;
height:60px;
margin-top:10px;
font-weight:bold;
font-size:18px;
}
.up {
height:40px;
font-size:24px;
text-align:center;
background-color:#009900;
margin-bottom:2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.down {
height:40px;
font-size:24px;
text-align:center;
background-color:#cc0000;
margin-top:2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}