İçerik paylaşımında ve kullanıcılar arası etkileşimi sağlayabilmek için yayınlanan içeriklerin beğeniye göre listelenmesi ve şekillendirilmesi çok önemlidir. Bu uygulamada Reddit tarzı içerik oylama servislerinin özellikle kullandığı 
Yukarı - 
Aşağı şeklinde puanlama olayını inceleyeceğiz.
Veritabanı için gereken tabloları aşağıdaki görselden inceleyebilirsiniz.
Uygulama için gereken veritabanı tabloları ve verileri aşağıdaki mysql satırlarını çalıştırarak elde edebilirsiniz.
CREATE TABLE IF NOT EXISTS `reddit_vote` ( `id` int(11) NOT NULL auto_increment, `title` varchar(255) character set latin5 NOT NULL, `link` varchar(255) NOT NULL, `votes_up` int(11) NOT NULL default '0', `votes_down` int(11) NOT NULL default '0', PRIMARY KEY (`id`) ) INSERT INTO `reddit_vote` (`id`, `title`, `link`, `votes_up`, `votes_down`) VALUES (1, 'Google', 'http://www.google.com.tr/', 6, 0), (2, 'Serpito', 'http://www.serpito.com/', 6, 1), (3, 'Facebook', 'http://www.facebook.com/', 1, 4), (5, 'Php:Excel Dosyası Oluşturma', 'http://www.serpito.com/phpde-excell-dosyasi-olusturma/', 9, 0), (6, 'PHP ile Masaüstü uygulaması geliştirmek (PHP-GTK)', 'http://www.serpito.com/php-ile-masaustu-uygulamasi-gelistirmek-php-gtk/', 8, 0), (7, 'PHP:Jquery: Scroll Down Auto Load Data (Sayfayı aşağı kaydırınca otomatik veri yükleme)', 'http://www.serpito.com/scroll-down-auto-load-data/', 8, 0), (8, 'PHP: Dinamik PDF dosyası oluşturma (FPDF class)', 'http://www.serpito.com/php-dinamik-pdf-olusturma/', 1, 5);
Sıra geldi index.php dosyasını kodlamaya;
index.php
<?php
include_once("mysql.php"); // herzamanki mysql dosyasi
?>
<html>
<head>
<title>Serpito.Com- Jquery Oylama Demo</title>
<style type='text/css'>
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");
}
#panel{
color:#900;
background-color:#C8E6E2;
width:100%;
margin-bottom:10px;
}
</style>
<script type='text/javascript' src='jquery.pack.js'></script>
<script type='text/javascript'>
$(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&amp;amp;amp;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&amp;amp;amp;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();
}
});
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div id="panel">
<center><h2>Serpito.com</h2>
Bu demo <a href="http://www.serpito.com/php-jquery-reddit-tarzi-puanlama/">PHP:Jquery: Reddit Tarzı puanlama uygulaması</a> icin hazirlanmistir.
</center>
</div>
<?php
/**
Display the results from the database
**/
$q = "SELECT * FROM reddit_vote ORDER BY id DESC";
$r = mysql_query($q);
if(mysql_num_rows($r)>0): //table is non-empty
while($row = mysql_fetch_assoc($r)):
$net_vote = $row['votes_up'] - $row['votes_down']; //this is the net 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 $net_vote." oy"; ?></span>
<span class='vote_buttons' id='vote_buttons<?php echo $row['id']; ?>'>
<a href='javascript:;' class='vote_up' id='<?php echo $row['id']; ?>'>Yukarı!</a>
<a href='javascript:;' class='vote_down' id='<?php echo $row['id']; ?>'>Aşağı!</a>
</span>
</div>
<?php
endwhile;
endif;
?>
</body>
</html>
&amp;nbsp;
index.php kodları Jquery yardımıyla votes.php ile etkileşim halinde olur. Sayfa yenilenmeden kullanıcının oyunu işleme alır ve değişikliği gösterir.
votes.php
<?php
include_once("mysql.php");
function getAllVotes($id)
{
/**
Returns an array whose first element is votes_up and the second one is votes_down
**/
$votes = array();
$q = "SELECT * FROM reddit_vote 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;
}
function getEffectiveVotes($id)
{
/**
Returns an integer
**/
$votes = getAllVotes($id);
$effectiveVote = $votes[0] - $votes[1];
return $effectiveVote;
}
$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 reddit_vote SET votes_up = $votes_up WHERE id = $id";
}
elseif($action=='vote_down') //voting down
{
$votes_down = $cur_votes[1]+1;
$q = "UPDATE reddit_vote SET votes_down = $votes_down WHERE id = $id";
}
$r = mysql_query($q);
if($r) //voting done
{
$effectiveVote = getEffectiveVotes($id);
echo $effectiveVote." oy";
}
elseif(!$r) //voting failed
{
echo "Hata!";
}
?>
Uygulamanın çalışır demosunu incelemek için tıklayınız.
Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.
One comment
gerçekten güzel bir uygulama olmuş. paylaştığınız için teşekkür ederim.