PHP
Trend

Sayfanıza Beğeni Butonu Ekleyin (Js ve Php)

Sayfanıza Beğeni Butonu Ekleyin (Js ve Php)

Sayfanıza Beğeni Butonu Ekleyin

İlgili Makaleler

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>
view raw index.php hosted with ❤ by GitHub

.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);
}
}
});
}
view raw like.js hosted with ❤ by GitHub

Like fonksiyonu buton tarafından tetiklenir ve buton üzerinde seo değeri post olarak likes.php sayfasına gönderir.

var url = jQuery(“#like”).attr(“url”);
data:’seo=’+url,

like-count değeri veritabında kayıtlı değeri arka planda yazar beğeni yapılması durumuda +1 yaparak ekrana yazar,

var arti = parseInt(like)+1;

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.

var eksi = jQuery(“#like”).attr(“user-like”);
var arti = parseInt(like)+1;

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"]);
}
}
}
}
?>
view raw likes.php hosted with ❤ by GitHub

Soru veya görüşlerinizi yorum yaparak iletebilirisiniz. Teşekkür ederim.

Dosya Linki: İndir

130cookie-checkSayfanıza Beğeni Butonu Ekleyin (Js ve Php)

Oy ver

İlgili Makaleler

Bir Yorum

  1. 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

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu