PHP:AJAX: Beğeni Oylama Uygulaması (Favourite – Love)

PHP:Ajax- favourite

Özellikle sosyal ağlarda ağımızdaki kişilerin paylaştığı içeriklere karşı etkileşim halinde olmanın en önemli yolu beğenini göstermektir.

Bu uygulamamızda yayınlanan resimleri favorilere ekleme veya beğenme olayını inceleyeceğiz.

Öncelikle aşağıdaki yazdığım MySQL satırları ile uygulama için gerekli veritabanı tablolarını açabilirsiniz.

CREATE TABLE IF NOT EXISTS `demo_images` (
`img_id` int(11) NOT NULL auto_increment,
`img_name` varchar(60) character set utf8 collate utf8_swedish_ci default NULL,
`img_url` varchar(200) NOT NULL,
`love` int(11) default NULL,
PRIMARY KEY (`img_id`)
)

INSERT INTO `demo_images` (`img_id`, `img_name`, `img_url`, `love`) VALUES
(1, 'Antalya', 'http://www.serpito.com/projects/favourite/antalya.jpg', 1),
(2, 'Düden Şelalesi', 'http://www.serpito.com/projects/favourite/duden.jpg', 1),
(3, 'Konyaaltı Plajı', 'http://www.serpito.com/projects/favourite/konyaalti.jpg', NULL);

CREATE TABLE IF NOT EXISTS `demo_image_IP` (
`ip_id` int(11) NOT NULL auto_increment,
`img_id_fk` int(11) default NULL,
`ip_add` varchar(40) default NULL,
PRIMARY KEY (`ip_id`),
KEY `img_id_fk` (`img_id_fk`)
)

Uygulamamızın index dosyasını yazalım.

index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Serpito.com - Ajax Favourite Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("span.on_img").mouseover(function ()
{
$(this).addClass("over_img");
});

$("span.on_img").mouseout(function ()
{
$(this).removeClass("over_img");
});
});

$(function() {
$(".love").click(function()
{
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this);

$(this).fadeOut(300);
$.ajax({
type: "POST",
url: "ajax_love.php",
data: dataString,
cache: false,

success: function(html)
{
parent.html(html);
parent.fadeIn(300);
}
});

return false;

});
});
</script>
<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#FFFFFF
}
a
{
color:#FFFFFF

}
a:hover
{
color:#FFFFFF

}
.on_img
{
background-image:url(on.gif);
background-repeat:no-repeat;

padding-left:35px;

cursor:pointer;
width:60px;

}

.over_img
{
background-image:url(over.gif);
background-repeat:no-repeat;

padding-left:35px;

cursor:pointer;
width:60px;
}
.box
{
background-color:#303030; padding:6px;
height:17px;
}
a
{
text-decoration:none;

}
a:hover
{
text-decoration:none;

}
</style>
</head>

<body>

<div align="center">

<div style="width:600px" >

<div style="color:#333333" align="left"><h3>Beğenini göster</h3></div>
<?php
include('mysql.php');
$sql=mysql_query("select * from demo_images");
while($row=mysql_fetch_array($sql))
{

$img_id=$row&#91;'img_id'&#93;;
$img_name=$row&#91;'img_name'&#93;;
$img_url=$row&#91;'img_url'&#93;;
$love=$row&#91;'love'&#93;;
?>

<div style="margin-bottom:30px">
<div align="left">
<a href="#" id="<?php echo $img_id; ?>">
<span align="left"> <?php echo $love; ?> </span>
</a>
</div>
<img src='<?php echo $img_url; ?>' />
</div>
<?php

}
?>

</div>
</div>

</div>
</body>
</html>

Ajax ile arkaplanda çalışacak olan ajax_love.php dosyamızı yazıyoruz.

ajax_love.php

<?php
include("mysql.php");
$ip=$_SERVER&#91;'REMOTE_ADDR'&#93;;

if($_POST&#91;'id'&#93;)
{
$id=$_POST&#91;'id'&#93;;

$ip_sql=mysql_query("select ip_add from demo_image_IP where img_id_fk='$id' and ip_add='$ip'");
$count=mysql_num_rows($ip_sql);

if($count==0)
{
$sql = "update demo_images set love=love+1 where img_id='$id'";
mysql_query( $sql);
$sql_in = "insert into demo_image_IP (ip_add,img_id_fk) values ('$ip','$id')";
mysql_query( $sql_in);

$result=mysql_query("select love from demo_images where img_id='$id'");
$row=mysql_fetch_array($result);
$love=$row&#91;'love'&#93;;
?>
<span align="left"><?php echo $love; ?></span>
<?
}
else
{
echo 'Hayır !';
}

}

?>

Uygulamanın çalışır demosunu incelemek için tıklayınız.   Demo

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

6 thoughts on “PHP:AJAX: Beğeni Oylama Uygulaması (Favourite – Love)

  • abi supersin varya, butun gun Zeeshan Rasool un sayfasindakini calisdirmaya cabiliyorum ama onunku bi turle calismiyor, database sorunu php de sorun var ama cozemedim. sagol! cok guzel anlatiyorsun 🙂

  • Ajax oylama sistemi olsa güzel olur aslında, şu wordpresteki eklenti şeklinde olanlardan, eline sağlık

  • internetimize kattığınız değerlerden ötürü teşekkür ederim. oldukça faydalı makalelerden..
    örneklerinizde yararlandık

  • Çok teşekkürler. Farklı bir şey ararken, başka sorunuma çözüm oldunuz. Ellerinize sağlık, iyi çalışmalar…

Bir Cevap Yazın

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