In this post is all about creating simple online voting system using PHP, jQuery Ajax.
Displays the number of votes per article, This is not IP Address based
voting but restricts user to vote only once. Let’s start building it.
S/W Needed: PHP, Mysql, HTML Editor
Get the initial value of the rating from the Database for the particular article using the supplied “id” value
We are updating the new voting value into the Database.
Simple voting system allows user to rate the article once without ip tracking. And excellent UI design for rating an Article. Ajax makes sure that page is not refreshed on voting.
Any doubts in implementing this, please comment here.
Requirements for Voting System:
Dificulty: IntermediateS/W Needed: PHP, Mysql, HTML Editor
Create Article Table:
As a first step in the process of creating this voting system add the Table to the Database.CREATE TABLE Article ( id INT PRIMARY KEY AUTO_INCREMENT , heading TEXT , content TEXT , rating INT NOT NULL DEFAULT '0' );
Voting.php
This file contains the UI and retrives the existing vote from DB.<?php
require 'config.php';
require 'opendb.php';
//Pass the ID of the Article here
$id = 1;
$sql = "SELECT * FROM Article WHERE id=$id";
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_assoc($result);
$ratings = $row["rating"];
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
background-color:#111;
color:#FFF;
}
#voteBox{
text-align:center;
background-color:#232323;
width:50px;
height:50px;
padding:8px 3px 0px 2px;
}
.submitVote{
float:right;
padding-top:20px;
padding-right:180px;
font-size:16px;
color:#fae240;
}
div a
{
text-decoration:none;
color:#30c5f0;
border-bottom:thin dotted;
}
div a:hover
{
text-decoration:none;
color:#30c5f0;
border-bottom:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".submitVote a").click(function()
{
var ID = <?php echo $id;?>//$("#vote").text();
var rating = <?php echo $ratings;?>
var queryString = 'id='+ ID +'&vote='+rating;
$("#vote").text(rating+1);
$.ajax({
type: "POST",
url: "submitVote.php",
data: queryString,
cache: false,
success: function(html)
{
$(".submitVote").html('<p style="margin:1px;padding:0px;">Submit your vote</p>');
$("#greet").html("Thanks for voting!");
$("#greet").delay(500).fadeOut(2000);
}
});
});
});
</script>
</head>
<body>
<div style="width:350px;">
<span class="submitVote" >
<p style="margin:1px;padding:0px;">
Submit your <a href="#">vote</a>
</p>
</span>
<div id="voteBox">
<div id="vote"> <?php echo $ratings;?> </div>
<span style="color:#fae240;">votes</span>
</div>
<div id="greet" style="padding-left:65px;"></div>
</div>
</body>
</html>
Code Explanation:Get the initial value of the rating from the Database for the particular article using the supplied “id” value
$sql = "SELECT * FROM Article WHERE id=$id"; $result = mysql_query($sql) or die(mysql_error()); $row = mysql_fetch_assoc($result); $ratings = $row["rating"];On Submit of the vote pass the existing rating value to the “submitvote.php” as queryString
var queryString = 'id='+ ID +'&vote='+rating;
$("#vote").text(rating+1);
$.ajax({
type: "POST",
url: "submitVote.php",
data: queryString,
cache: false,
success: function(html)
{}
});
Hide the href using jquery and greet for submiting the vote.$(".submitVote").html('<p style="margin:1px;padding:0px;">Submit your vote</p>');
$("#greet").html("Thanks for voting!");
$("#greet").delay(500).fadeOut(2000);
submitVote.php
Updates the new rating value in the DB for particular Article.<?php
require 'config.php';
require 'opendb.php';
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$rating=mysql_escape_String($_POST['vote']);
$rating= $rating+1;
$sql = "update Article set rating='$rating' where id='$id'";
mysql_query($sql);
}
?>
Code Explanation:We are updating the new voting value into the Database.
$sql = "update Article set rating='$rating' where id='$id'"; mysql_query($sql);Conclusion:
Simple voting system allows user to rate the article once without ip tracking. And excellent UI design for rating an Article. Ajax makes sure that page is not refreshed on voting.
Any doubts in implementing this, please comment here.
0 comments:
Post a Comment