Voting system with jQuery, Ajax and PHP.

Voting system with jQuery, Ajax and PHP.



Database Design

Messages Table :

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

Voting_IP Table : Storing IP address

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

Foreign key tutorial

Voting.php
Contains javascript, PHP and HTML code. $(".vote").click(function(){}- vote is the class name of anchor tag. Using element.attr("id") calling vote button value(messsage Id). 

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

up_vote.php
Contains PHP code. 

<?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
You have to modify up_vote.php code just replace word up to down in SQL statements.

CSS Code:

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