Voting system with jQuery, Ajax and PHP ...

This post about Dzone like voting system with jQuery, Ajax and PHP. This script helps you to display user votes on blog post. Take a look at live demo and give your votes.

Download Script     Live Demo

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[ amsg];
$mes_id=$row[ ames_id];
$up=$row[up];
$down=$row[ wouldown];
?>
<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= wouldown>
<a href="" class="vote" id="<?php echo $mes_id; ?>;" name="down">
<?php echo $down; ?></a></div>
</div>

<div class=ox2 ><?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;
}

 Original Source:
http://www.9lessons.info/2009/08/vote-with-jquery-ajax-and-php.html