This post about voting system with jQuery, Ajax and PHP. This script helps you to display user votes on blog post. IP address based voting system I hope you like this thanks! Take a look at live demo and give your votes.

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));
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).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Voting with jQuery, Ajax and PHP</title>
<script type="text/javascript" src="jquery.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" align="absmiddle">');
$.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" align="absmiddle">');
$.ajax({
type: "POST",
url: "down_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
</script>
<style type="text/css">
body {
font-family:'Georgia', Times New Roman, Times, serif;
}
#main {
height:80px;
border:1px dashed #29ABE2;
margin-bottom:7px;
width:500px;
}
a {
color:#DF3D82;
text-decoration:none;
}
a:hover {
color:#DF3D82;
text-decoration:underline;
}
.up {
height:40px;
font-size:24px;
text-align:center;
background-color:#009900;
margin-bottom:2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.up a {
color:#FFFFFF;
text-decoration:none;
}
.up a:hover {
color:#FFFFFF;
text-decoration:none;
}
.down {
height:40px;
font-size:24px;
text-align:center;
background-color:#cc0000;
margin-top:2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.down a {
color:#FFFFFF;
text-decoration:none;
}
.down a:hover {
color:#FFFFFF;
text-decoration:none;
}
.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;
}
img {
border:none;
padding-top:7px;
}
</style>
</head>
<body>
<div align="center">
<h3>Voting with jQuery, Ajax and PHP</h3>
<?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 id="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
}
?>
</div>
</body>
</html>
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);
$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)
{
$sql = "update Messages set up=up+1 where mes_id='$id'";
mysql_query( $sql);
$sql_in = "insert into Messages (mes_id_fk,ip_add) values ('$id','$ip')";
mysql_query( $sql_in);
}
else
{
}
$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.
<?php
include("config.php");
$ip=$_SERVER['REMOTE_ADDR'];
if($_POST['id'])
{
$id=$_POST['id'];
$id = mysql_escape_String($id);
$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)
{
$sql = "update Messages set down=down+1 where mes_id='$id'";
mysql_query( $sql);
$sql_in = "insert into Voting_IP (mes_id_fk,ip_add) values ('$id','$ip')";
mysql_query( $sql_in);
}
else
{
}
$result=mysql_query("select down from Messages where mes_id='$id'");
$row=mysql_fetch_array($result);
$down_value=$row['down'];
echo $down_value;
}
?>
config.php
Database configuration file.
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'code_voting');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
In our previous tutorial you have learned Live Table Edit with Jquery and Ajax. In this tutorial you will learn Live HTML table edit or inline table edit is a very user friendly feature that enable users to edit HTML table value directly by clicking on table cells. In this tutorial you will learn how to implement live editable HTML table with jQuery and PHP. We will use jQuery plugin Tabledit that provides AJAX enabled in place editing for HTML table cells.
Good luck and I hope this article can be useful. See you in the next article…
Also Read :
PHP Database Backup Client for MySQL
How to Backup MySQL Database using PHP
Update/Delete Multiple Rows using PHP
Ajax Pagination with Tabular Records using PHP and jQuery
Sendmail in PHP using mail(), SMTP with Phpmailer
PHP session time set unset and check existence
Dynamically load content in Bootstrap Modal with AJAX
How Can I Generate a Random Alphanumeric String in PHP?