If you are a regular at Reddit, you must have noticed the way people vote there. You can either vote up or vote down. Pretty interesting, huh? This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.
You might also like these tutorials:
I created a table called entries where there are 5 columns:
We create a config.php file that holds all our database credentials.
We create an index.php file.
First, we include the config.php file to get access to database. Then we query the database to show all the entries found in the table. Next, we loop through the resultset and create a div for each entry.
Notice the id attribute of both votes_count and vote_buttons classes. Since they id attributes are suffixed with the <?php echo $row['id']; ?> , it would be different for different entries which would be helpful to identify each entry. Also the id of both vote_up and vote_down links are unique for each entry.
Now if you view the index.php in browser it would show you the entries and you should land with something like this:
But first we create votes.php file and in it, write two functions that would be useful.
Now, we add the following code to votes.php file:
Similarly for vote down link we would have:
That's all!
You might also like these tutorials:
- Build A Simple Online Feed-reader With SimplePie, jQuery and PHP
- Build An Animated Ajax Search With jQuery And PHP
- Create Your Own TinyURL With PHP And MySQL
- Multi Level Comments With PHP
- How to Build the Front-end of an AJAX Login Page with Progressbar
Let's Get Started
We need a table in the database to fetch the data from. Let's create the table.
- id — The unique id associated with each entry
- title — The title of the entry to be shown as a link to the site
- link — The link to the site
- votes_up — The total number of people who voted up.
- votes_down — The total number of people who voted down.
Fetch The Data
Now, we have the table and the data. Let's show the data.We create a config.php file that holds all our database credentials.
<?php
$hostname = "localhost";
$db_username = "your_username";
$db_password = "your_password";
$link = mysql_connect($hostname, $db_username, $db_password) or die("Cannot connect to the database");
mysql_select_db("your_database") or die("Cannot select the database");
?>
What we did is just connect to the database. Do replace your_username, your_password and your_database with your own values. We create an index.php file.
<?php
include("config.php");
?>
<html>
<head>
<title>Entries</title>
<script type='text/javascript' src='jquery1.3.pack.js'></script>
</head>
<body>
<?php
/**
Display the results from the database
**/
$q = "SELECT * FROM entries";
$r = mysql_query($q);
if(mysql_num_rows($r)>0): //table is non-empty
while($row = mysql_fetch_assoc($r)):
$effective_vote = $row['votes_up'] - $row['votes_down']; //this is the effective result of voting up and voting down
?>
<div class='entry'>
<span class='link'>
<a href='<?php echo $row['link']; ?>'> <?php echo $row['title']; ?> </a>
</span>
<span class='votes_count' id='votes_count<?php echo $row['id']; ?>'><?php echo $effective_vote." votes"; ?></span>
<span class='vote_buttons' id='vote_buttons<?php echo $row['id']; ?>'>
<a href='javascript:;' class='vote_up' id='<?php echo $row['id']; ?>'></a>
<a href='javascript:;' class='vote_down' id='<?php echo $row['id']; ?>'></a>
</span>
</div>
<?php
endwhile;
endif;
?>
</body>
</html>
First, we include the config.php file to get access to database. Then we query the database to show all the entries found in the table. Next, we loop through the resultset and create a div for each entry.
Notice the id attribute of both votes_count and vote_buttons classes. Since they id attributes are suffixed with the <?php echo $row['id']; ?> , it would be different for different entries which would be helpful to identify each entry. Also the id of both vote_up and vote_down links are unique for each entry.
A Little Bit Of CSS
Without proper styles our index.php is looking ugly.body {
background: #e8e6de;
}
a {
outline:none;
}
.entry {
width: 710px;
background: #ffffff;
padding:8px;
border:1px solid #bbbbbb;
margin:5px auto;
-moz-border-radius:8px;
}
span.link a {
font-size:150%;
color: #000000;
text-decoration:none;
}
a.vote_up, a.vote_down {
display:inline-block;
background-repeat:none;
background-position:center;
height:16px;
width:16px;
margin-left:4px;
text-indent:-900%;
}
a.vote_up {
background:url("images/thumb_up.png");
}
a.vote_down {
background:url("images/thumb_down.png");
}
Notice, we added text-indent:-900% to vote_up and vote_down classes. This is a nice trick to hide the text and coming clear to search engines.Now if you view the index.php in browser it would show you the entries and you should land with something like this:
Make Ajax Calls
Ok, now we are going to make it more interesting with Ajax. Our objective is when the user clicks on the vote-up or vote-down link, the request will be sent to the server through Ajax; a simple script then updates the vote-count and displays the effective votes. This effective vote-count will then be displayed to the user through a simple jQuery effect.But first we create votes.php file and in it, write two functions that would be useful.
include("config.php"); //config.php is added to get access to database connection
function getAllVotes($id)
{
/**
Returns an array whose first element is votes_up and the second one is votes_down
**/
$votes = array();
$q = "SELECT * FROM entries WHERE id = $id";
$r = mysql_query($q);
if(mysql_num_rows($r)==1)//id found in the table
{
$row = mysql_fetch_assoc($r);
$votes[0] = $row['votes_up'];
$votes[1] = $row['votes_down'];
}
return $votes;
}
This function is pretty simple. It expects an integer as its parameter and selects all the data from the table matching the id. Then it returns an array whose first element is votes_up and the second one is votes_down.function getEffectiveVotes($id)
{
/**
Returns an integer
**/
$votes = getAllVotes($id);
$effectiveVote = $votes[0] - $votes[1];
return $effectiveVote;
}
This function depends on the first one and calculates the difference between votes_up and votes_down.Now, we add the following code to votes.php file:
$id = $_POST['id'];
$action = $_POST['action'];
//get the current votes
$cur_votes = getAllVotes($id);
//ok, now update the votes
if($action=='vote_up') //voting up
{
$votes_up = $cur_votes[0]+1;
$q = "UPDATE entries SET votes_up = $votes_up WHERE id = $id";
}
elseif($action=='vote_down') //voting down
{
$votes_down = $cur_votes[1]+1;
$q = "UPDATE entries SET votes_down = $votes_down WHERE id = $id";
}
$r = mysql_query($q);
if($r) //voting done
{
$effectiveVote = getEffectiveVotes($id);
echo $effectiveVote." votes";
}
elseif(!$r) //voting failed
{
echo "Failed!";
}
First, we get the requested id and the action. Then the current votes of the id. Remember $cur_votes is an array whose first element is votes_up and the second one is votes_down. Next, then query is determined on the basis of the action requested. Then, we simply update the table and display the value.Mighty jQuery
Now, we are ready to make good use of jQuery.$(function(){
$("a.vote_up").click(function(){
//get the id
the_id = $(this).attr('id');
// show the spinner
$(this).parent().html("<img src='images/spinner.gif'/>");
//fadeout the vote-count
$("span#votes_count"+the_id).fadeOut("fast");
//the main ajax request
$.ajax({
type: "POST",
data: "action=vote_up&id="+$(this).attr("id"),
url: "votes.php",
success: function(msg)
{
$("span#votes_count"+the_id).html(msg);
//fadein the vote count
$("span#votes_count"+the_id).fadeIn();
//remove the spinner
$("span#vote_buttons"+the_id).remove();
}
});
});
});
When 'Vote up' link is clicked, first we get the unique id of the link. Then we show a cool ajax loader in place of the links. Also we fade out the vote count. Next, we make an ajax call and when the response from the script is received, we display the response with a fade-in effect and remove the spinner.Similarly for vote down link we would have:
$("a.vote_down").click(function(){
//get the id
the_id = $(this).attr('id');
// show the spinner
$(this).parent().html("<img src='images/spinner.gif'/>");
//the main ajax request
$.ajax({
type: "POST",
data: "action=vote_down&id="+$(this).attr("id"),
url: "votes.php",
success: function(msg)
{
$("span#votes_count"+the_id).fadeOut();
$("span#votes_count"+the_id).html(msg);
$("span#votes_count"+the_id).fadeIn();
$("span#vote_buttons"+the_id).remove();
}
});
});
All these javascript code goes inside a <script type='text/javascript'> </script> tags of course.That's all!
Conclusion
This is a very simple mock-up of how things work. Security has not been an issue here. More stress on security should be given in production level applications. Also, proper use of session handling would make it more secure.Update
MacSkolan has implemented this technique with his own modifications at Spotylist.com. He has also offered the source code here. Do check them! My best wishes for MacSkolan's new start-up!Labels: javascript, PHP, Tutorials
