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;

index.php içerisinde basit bir sayfa görünümü  ve veri tabanında bulunan örnek içerikleri çekiyoruz.

.htaccess ile seo linkini direk içerik.php sayfasına yönlendirdik ve sql yapısı,

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,

like.js ajax fonksiyonumuz ve like işlemi sonrasında duruma göre belirlediğimiz classları beğeni butonuna ekleyen ara fonksiyonlar.

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

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

Dosya Linki: İndir