reddit style voting in php mysql jquery

By -
This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.

I created a table called entries where there are 5 columns:
  • id — The unique id associated with each entry
  • title — The title of the entry to be shown as a 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.
<?
$hostname = "localhost";
$db_username = "your_username";
$db_password = "your_password";
$db_password = "your_database";

$link = mysql_connect($hostname, $db_username, $db_password) or die("Cannot connect to the database");
mysql_select_db($db_password) 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'>
<?php echo $row['title']; ?>
</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>


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

Make Ajax Calls
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.

Jquery Script
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.
$(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();
}
});
});

$("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();
}
});
});
});
Similarly for vote down link.


voting-reddit-php-jquery


You can download the script here Click for download

Comments

Post a Comment

Popular posts from this blog

ubuntu package installation

By -
Ubuntu is an ancient African word meaning 'humanity to others'. It also means 'I am what I am because of who we all are'. The Ubuntu operating system brings the spirit of Ubuntu to the world of computers. Package Installation and Updates Apt and Package Basics Most new users will use the Synaptic Package Manager to install packages. These instructions are for installing packages from the command-line Terminal. Terminal can be started: Menu -> Applications -> Accessories -> Terminal Install packages: sudo apt-get install packagename Example: sudo apt-get install mpd sbackup Remove packages: sudo apt-get remove packagename To remove all dependencies: sudo apt-get autoremove Example: sudo apt-get remove mpd sbackup Search for packages: apt-cache search <keywords> Examples: apt-cache search Music MP3 apt-cache search "Text Editor" Update the apt package database after adding/removing repositories: sudo apt-get upd...
Read more

Drupal Bootstrap Database

By -
This is the 3rd article in the series covering DRUPAL v6 bootstrap process. As the bootstrap name implies, this phase covers initializing a connection to a database. The phase begins by including 'database.inc' , which is a database abstraction layer allowing developers to use different database servers with the same code base. One of the functions defined by this library is the db_set_active() function, which is invoked by the bootstrap database phase. This function is used to activate a database used by queries in later phases or during page building and rendering. The function begins by checking if the global variable $db_url is empty. Recall that in the phase #1 - DRUPAL_BOOTSTRAP_CONFIGURATION, this variable is set to the value specified in settings.php unless it is still set to the default string of ' mysql://username:password@localhost/databasename' . In that case, $db_url is simply set to empty string ''. This would indicate a first time insta...
Read more

How to fix 500 internal privoxy error

By -
I keep getting a 500 Internal Privoxy Error when I open a particular URL. I t ried several websites that promise a fix but only want to sell me some bullshit software for $29.95 that doesn't do anything.   The actual message is as follows 500 Internal Privoxy Error Privoxy encountered an error while processing your request: Could not load template file connect-failed or one of its included components. Please contact your proxy administrator. If you are the proxy administrator, please put the required file(s)in the (confdir)/templates directory. The location of the (confdir) directory is specified in the main Privoxy config file. (It's typically the Privoxy install directory). After spending so much of time and putting lots of effort at internet, finally I fixed it. The solutions is -- Disable proxy settings and check. Press “Windows Logo” + “R” keys on the keyboard, type “inetcpl.cpl” and press “Enter”. Click the “Connections” tab, and then click “LAN settings...
Read more