Ö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['img_id'];
$img_name=$row['img_name'];
$img_url=$row['img_url'];
$love=$row['love'];
?>
<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['REMOTE_ADDR'];
if($_POST['id'])
{
$id=$_POST['id'];
$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['love'];
?>
<span align="left"><?php echo $love; ?></span>
<?
}
else
{
echo 'Hayır !';
}
}
?>
Uygulamanın çalışır demosunu incelemek için tıklayınız.
Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.
2 Comments
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
bunun beğenmeme butonuda olsa fena olmazdı.