PHP:Jquery: Reddit Tarzı puanlama uygulaması

Jquery vote demo

İç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.

Demo Download

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&#91;'link'&#93;; ?>'> <?php echo $row&#91;'title'&#93;; ?> </a>
</span>

<span class='votes_count' id='votes_count<?php echo $row&#91;'id'&#93;; ?>'><?php echo $net_vote." oy"; ?></span>

<span class='vote_buttons' id='vote_buttons<?php echo $row&#91;'id'&#93;; ?>'>
<a href='javascript:;' class='vote_up' id='<?php echo $row&#91;'id'&#93;; ?>'>Yukarı!</a>
<a href='javascript:;' class='vote_down' id='<?php echo $row&#91;'id'&#93;; ?>'>Aşağı!</a>
</span>

</div>
<?php
endwhile;
endif;
?>

</body>
</html>

&amp;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&#91;0&#93; = $row&#91;'votes_up'&#93;;
$votes&#91;1&#93; = $row&#91;'votes_down'&#93;;
}
return $votes;
}

function getEffectiveVotes($id)
{
/**
Returns an integer
**/
$votes = getAllVotes($id);
$effectiveVote = $votes&#91;0&#93; - $votes&#91;1&#93;;
return $effectiveVote;
}

$id = $_POST&#91;'id'&#93;;
$action = $_POST&#91;'action'&#93;;

//get the current votes
$cur_votes = getAllVotes($id);

//ok, now update the votes

if($action=='vote_up') //voting up
{
$votes_up = $cur_votes&#91;0&#93;+1;
$q = "UPDATE reddit_vote SET votes_up = $votes_up WHERE id = $id";
}
elseif($action=='vote_down') //voting down
{
$votes_down = $cur_votes&#91;1&#93;+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!";
}
?>

Demo

Download

One thought on “PHP:Jquery: Reddit Tarzı puanlama uygulaması

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir