Voting system with jQuery, Ajax and PHP

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…