Sayfanıza Beğeni Butonu Ekleyin (Js ve Php)
Sayfanıza Beğeni Butonu Ekleyin
Merhaba, bu yazıda çoğunuzun gördüğü ve kullandığı bir özelliği web sayfanıza nasıl ekleyeceğinizi anlatacağım.
Bu özellik ile sayfanızda bulunan bir içeriğe, yazıya ya da resimde bir beğeni butonu yapabileceksiniz. Bu sayede sitenizi ziyaret eden kullanıcıların, siteniz hakkında etkileşim bilgisini kolay yoldan elde edebilirsiniz.
Öncelikle bu konu hakkında oluşturduğum dosyaları buradan indirebilirsiniz.
Konu içerisinde bulunan dosyalar sırasıyla
1. Örnek Veri tabanı sql, 2 mıgır konu
2. Örnek görseller img/, 2 Adet
3. Site js kütüphanesi js/
4. Ajax like fonksiyonu js/
5. baglan.php
6. index.php
7. icerik.php
8. likes.php
9. htaccess dosyası
Gelelim yapımına;
Çalışma sistemi: yazımızın bulunduğu sayfa da veri tabanında bulunan veriler aktarılır ve beğen tuşunun içeriğine beğeni sayısı yazılır. Beğeni tuşuna tıklandığı anda likes js fonksiyonu devreye girer ve yazının ayırt edici seo linki ajax ile likes.php sayfasına post eder. Post edilen sayfada benzersiz seo linkiyle eşleşen varsa ve cookie yoksa işlem devreye girerek son likes değeri üzerine +1 ekleyerek update işlemi tamamlar. Daha sonra setcookie ile içeriğin seo benzersiz linkini tanımlayan bir cookie oluşturur.
Bu işlemin sonucunu bekleyen ajax sonuç olumlu(like) ise daha önceden belirlediğimiz style sınıfını beğen butonuna ekler ve like-count attr verisine +1 ekleyerek beğeni tuşundaki miktarı html ile değiştirir.
Beğenme işlemini geri alma: Hali hazırda beğendiğimiz beğeni durumunu geri almak için tekrar tıklama yapılması gerekir, likes js fonksiyonu devreye girer ve yazının ayırt edici seo linki ajax ile likes.php sayfasına post eder. Bu aşamada daha önce oluşturduğumuz cookie değeri var olduğu için ikinci aşama alan unlike görevi yapar bu işlemde var olan beğeni değerine – 1 ekleyerek update işlemini tamamlar like aşamasında var olan cookie değerini siler.
Bu işlem sonucunu bekleyen ajax sonuç olumlu(unlike) ise daha önceden belirlediğimiz style sınıfını beğen butonuna ekler ve like-count attr verisine -1 ekleyerek beğeni tuşundaki miktarı değiştirir.
baglan.php ile veritabanı bağlantısını yapıyoruz;
<?php | |
@ob_start(); | |
@session_start(); | |
date_default_timezone_set('Europe/Istanbul'); | |
if (basename($_SERVER['PHP_SELF'])==basename(__FILE__)) { | |
exit(' Erişim Engellendi.'); | |
}; | |
$db_user = "root"; | |
$db_pass = ""; | |
$db_name = "veritabani"; | |
$host_name = "localhost"; | |
try { | |
$db = new PDO("mysql:host=$host_name;dbname=$db_name", $db_user, $db_pass); | |
} catch (PDOException $e) { | |
echo 'Connection failed: '.$e->getMessage(); | |
} | |
$db->query("SET NAMES utf8"); | |
$db->query("SET CHARACTER SET utf8"); | |
$db->query("SET COLLATION_CONNECTION = 'utf8_general_ci'"); | |
?> |
index.php içerisinde basit bir sayfa görünümü ve veri tabanında bulunan örnek içerikleri çekiyoruz.
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Bulutasarim.com</title> | |
<style type="text/css"> | |
body{ | |
margin: 0 auto; | |
padding: 0; | |
} | |
nav{ | |
height: 50px; | |
background-color: red; | |
margin-bottom: 25px; | |
} | |
section{ | |
margin: 0 auto; | |
width: auto; | |
text-align: center; | |
} | |
.sub{ | |
background-color: burlywood; | |
width: 25%; | |
text-align: center; | |
margin: 0 auto; | |
margin-bottom: 15px; | |
position: relative; | |
top: -4px; | |
} | |
.sub a{ | |
text-decoration: none; | |
font-size: 15px; | |
font-weight: 600; | |
font-family:sans-serif; | |
color:#421916; | |
} | |
</style> | |
<link rel="icon" href="fav/favicon.ico" type="image/x-icon"> | |
</head> | |
<body> | |
<nav> | |
<div> | |
</div> | |
</nav> | |
<section> | |
<div> | |
<?php | |
include 'baglan.php'; | |
$icerik=$db->prepare("select * from icerikler order by id desc"); | |
$icerik->execute(); | |
$icerikgetir=$icerik->fetchAll(PDO::FETCH_ASSOC); | |
foreach ($icerikgetir as $key => $value) { | |
?> | |
<div> | |
<img src="<?php echo $value['img'];?>" width="25%"> | |
<div class="sub"> | |
<a href="<?php echo $value['seo'];?>"><?php echo $value['konu'];?></a> | |
</div> | |
</div> | |
<?php } ?> | |
</div> | |
</section> | |
</body> | |
</html> |
.htaccess ile seo linkini direk içerik.php sayfasına yönlendirdik ve sql yapısı,
RewriteEngine on | |
RewriteRule ^([0-9a-zA-Z-_]+)$ icerik.php?seo=$1 [L,QSA] | |
------ Veritabanı sql aşağıda | |
-- phpMyAdmin SQL Dump | |
-- version 4.6.5.2 | |
-- https://www.phpmyadmin.net/ | |
-- | |
-- Anamakine: 127.0.0.1 | |
-- Üretim Zamanı: 27 Ara 2018, 17:48:04 | |
-- Sunucu sürümü: 10.1.21-MariaDB | |
-- PHP Sürümü: 5.6.30 | |
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; | |
SET time_zone = "+00:00"; | |
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; | |
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; | |
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; | |
/*!40101 SET NAMES utf8mb4 */; | |
-- | |
-- Veritabanı: `veritabani` | |
-- | |
-- -------------------------------------------------------- | |
-- | |
-- Tablo için tablo yapısı `icerikler` | |
-- | |
CREATE TABLE `icerikler` ( | |
`id` int(11) NOT NULL, | |
`seo` varchar(100) COLLATE utf8_turkish_ci NOT NULL, | |
`img` varchar(100) COLLATE utf8_turkish_ci NOT NULL, | |
`konu` varchar(100) COLLATE utf8_turkish_ci NOT NULL, | |
`metin` varchar(5000) COLLATE utf8_turkish_ci NOT NULL, | |
`likes` int(10) NOT NULL | |
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_turkish_ci; | |
-- | |
-- Tablo döküm verisi `icerikler` | |
-- | |
INSERT INTO `icerikler` (`id`, `seo`, `img`, `konu`, `metin`, `likes`) VALUES | |
(1, 'ornek-icerik-buraya-tikla-yaziya-git', 'http://localhost/likes/img/likes.jpg', 'Örnek İçerik Buraya Tıkla Yazıya Git', 'ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\r\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\r\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 0), | |
(2, 'web-site-nasil-yapilir', 'http://localhost/likes/img/site.jpg', 'Web Site Nasıl Yapılır', 'ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\r\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\r\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 1); | |
-- | |
-- Dökümü yapılmış tablolar için indeksler | |
-- | |
-- | |
-- Tablo için indeksler `icerikler` | |
-- | |
ALTER TABLE `icerikler` | |
ADD PRIMARY KEY (`id`); | |
-- | |
-- Dökümü yapılmış tablolar için AUTO_INCREMENT değeri | |
-- | |
-- | |
-- Tablo için AUTO_INCREMENT değeri `icerikler` | |
-- | |
ALTER TABLE `icerikler` | |
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3; | |
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; | |
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; | |
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
icerik.php Beğeni tuşunun gelen yapısı;
Eğer cookie varsa beğeni tuşuna farklı bir class eklenir, böylelikle kullanıcı daha önce beğendiğini anlar,
<a href="javascript:like();" | |
class="likes <?php if(isset($_COOKIE['like_artirim'.$icerikgetir['seo']])){echo 'like';} ?>" | |
url="<?php echo $icerikgetir['seo']; ?>" | |
<?php if(isset($_COOKIE['like_artirim'.$icerikgetir['seo']])){ // Kullanıcı beğenmekten vazgeçerse -1 olarak bekletiyoruz. | |
$sayi = $icerikgetir['likes']-1; | |
echo 'user-like="'.$sayi.'"'; | |
}else{ // Kullanıcı beğeni yapmadıysa normal likes değeri veriyoruz. | |
$sayi = $icerikgetir['likes']; | |
echo 'user-like="'.$sayi.'"'; | |
} ?> | |
id="like" | |
like-count="<?php echo $icerikgetir["likes"]; ?>" > | |
<?php | |
if(isset($_COOKIE['like_artirim'.$icerikgetir['seo']])){ | |
echo ' Beğendin: '.$icerikgetir['likes']; | |
} | |
else{ | |
echo ' Beğen: '.$icerikgetir['likes']; | |
} ?></a> |
like.js ajax fonksiyonumuz ve like işlemi sonrasında duruma göre belirlediğimiz classları beğeni butonuna ekleyen ara fonksiyonlar.
function likes_p(argument) { | |
jQuery("#like").addClass("like"); | |
jQuery("#liketo").addClass("like"); | |
}function likes_np(argument) { | |
jQuery("#like").removeClass("like"); | |
jQuery("#liketo").removeClass("like"); | |
} | |
function like(argument) { | |
var like = jQuery("#like").attr("like-count"); | |
var url = jQuery("#like").attr("url"); | |
var arti = parseInt(like)+1; | |
var eksi = jQuery("#like").attr("user-like"); | |
jQuery.ajax({ | |
url:"likes.php", | |
type:"POST", | |
data:'seo='+url, | |
success:function (cevap) { | |
if (cevap == "like") { | |
likes_p(); | |
jQuery("#like").html('Beğendin: '+arti); | |
}else{ | |
likes_np(); | |
var like = jQuery("#like").attr("like-count",eksi); | |
jQuery("#like").html('Beğen: '+eksi); | |
} | |
} | |
}); | |
} |
Like fonksiyonu buton tarafından tetiklenir ve buton üzerinde seo değeri post olarak likes.php sayfasına gönderir.
like-count değeri veritabında kayıtlı değeri arka planda yazar beğeni yapılması durumuda +1 yaparak ekrana yazar,
user-like ise önceden beğeni olması durumunda veritabanında kayıtlı değere karşılık her zaman bir eksi değerini yazdırır. Böylelikle kullanıcı beğenmekten vazgeçerse arka plandaki hazır miktarı ekrana yazdıracaktır.
likes.php
<?php | |
include 'baglan.php'; | |
if (isset($_POST["seo"])) { | |
$ic=$db->prepare('SELECT * FROM icerikler WHERE seo=:seo'); | |
$ic->execute(array('seo' => $_POST["seo"])); | |
$var = $ic->rowCount(); | |
$getir=$ic->fetch(PDO::FETCH_ASSOC); | |
if($var>0){ | |
if(!isset($_COOKIE['like_artirim'.$_POST["seo"]])){ | |
$like=$db->prepare("UPDATE icerikler SET likes=likes+1 | |
where seo=:seo "); | |
$likes=$like->execute(array("seo"=>$getir['seo'])); | |
if ($likes) { | |
echo "like"; | |
setcookie('like_artirim'.$_POST["seo"], "begeni", time()+(60*60*24*30),$_POST["seo"]); | |
} | |
}else{ | |
$unlike=$db->prepare("UPDATE icerikler SET likes=likes-1 | |
where seo=:seo "); | |
$unlikes=$unlike->execute(array("seo"=>$getir['seo'])); | |
if($unlikes){ | |
echo "unlike"; | |
setcookie('like_artirim'.$_POST["seo"], "begeni", time()-(60*60*24*30*10),$_POST["seo"]); | |
} | |
} | |
} | |
} | |
?> |
Soru veya görüşlerinizi yorum yaparak iletebilirisiniz. Teşekkür ederim.
Dosya Linki: İndir
Connection failed: SQLSTATE[HY000] [1049] Unknown database ‘veritabani’
Warning: Undefined variable $db in C:\xampp\htdocs\baglan.php on line 21
Fatal error: Uncaught Error: Call to a member function query() on null in C:\xampp\htdocs\baglan.php:21 Stack trace: #0 C:\xampp\htdocs\index.php(54): include() #1 {main} thrown in C:\xampp\htdocs\baglan.php on line 21
hatası alıyorum