Voting system with jQuery, Ajax and PHP

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.

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

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?

Please follow and like us:

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch,I am available for freelance work.

Leave a Reply

Your email address will not be published. Required fields are marked *