Jquery Ajax & PHP ile Puanlama/Rating Sistemi Yapımı

Merhaba, web sitenize ekleyebileceğiniz bir eklentiden bahsedeceğim, bu eklenti (Rating) ile web sitenizin aramalarda bulunan sıralama durumunu etkileyebilir web sitenizi daha ünlü yapabilirisiniz. Bunu için Google Webmaster Tool’a baka birsiniz.

-Eklentinin temel işlevi sayfanıza gelen kullanıcıların makale ya da içerikleri oylama imkânı sağlamaktır. Bu eklenti Jquery, Php, Css ve Mysql etkileşimli olarak çalışmaktadır.

-Şimdi gelelim yapımına; öncelikle şu siteden edineceğimiz kütüphane ile Rating modülümüzü ekliyoruz. Burada dokümantasyon imkânı ile oylama sistemini geliştirme olanağını sağlıyor.

-Rating: Krajee

Dosya Linki: Link

-Buradan indireceğiniz dosyada hazır example imkânı ile özeliklerine bakabilirsiniz. Ayrıca size vereceğim dosya ile de eklentiyi edinebilirsiniz.

-Şimdi Başlayalım;

-Veritabanı tablomuz adı: oylama

-Tablo yapısında kullanıcının ip adresini alarak o posta biden fazla oylama sorununu ortadan kaldırıyoruz.

-rating_star sütunu kullanıcının verdiği 1 ile 5 arasında ki değeri saklar, rating_tur sütunu postlarınızın faklı alanlarda çakışmaması için kategori seçeneği veriyoruz.

-rating_seo ise postların ayrımı için oluşturdum dilerseniz rating_id yaparak postlarınızı id değeri ile tanımlarsınız.

-Veritabanı bağlantısı:

-Veritabanı bağlantısı yaptıktan sonra içeriklerimizi index sayfamıza çağırıyoruz.

-Index sayfamızda herhangi bir yazı tıklayınca detaylı görünüm sayfasına yönlendiriyoruz yani icerik.php.

-Burada .htaccess yardımı ile küçük bir işlem yapıyoruz, sadece link görünümünü basitleştirmek için. Dosya içinde bulunuyor.

-icerik.php sayfasını inceleyelim, burada sayfanın en başına head tagları arasına Rating sistemimizin düzenli bir şekilde çalışması için 2 adet Css stile dosyası iki adet js javascript dosyası çağırıyoruz isimlerinden anlaşılacağı gibi bir css ve js dosyası Rating dosyaları olacak.

-Diğer dosyalar ise hazır font-awesome ve jquery kütüphanesidir.

-Rating sistemi star adlı tek klasörde topladım kolay kullanım için.

icerik.php;

-Burada normal bir şekilde içeriğimizin ayrıntısını çekiyoruz harici olarak oylama adlı tabloda daha önce yapılan oylamaları Mysql sorgusu içinde ROUND(AVG(rating_star),1) ortalama değeri buldurup aşağıda bulunan input form elemanının value bölümüne yazdırıyoruz.

-Ek olarak da içerik bilgilerini daha sonra jquery ajax ile post edilecek sayfa için data attribute ile data-icerik ve data-tur alanlarını dolduruyoruz.

-Yine içerik.php içinde jquery fonksiyonlarını oluşturuyoruz.

-Burada iki farklı fonksiyon bulunuyor;

1. rating() ortamdaki belirtilen input elementini icona çeviren.

2. change fonksiyonu, rating() ile oluşturulmuş yıldızların değişmesi halinde çalışacak fonksiyonumuz yani ajax post.

-Rating ile gelen fonksiyon dokümantasyonda da bulunduğu gibi kendi Plugins Option imkânı sunuyor yani dilediğimiz özelliğini açıp değiştirmeyi sağlıyor. İstersek filledStar: emptyStar: kısmalarına istediğimiz icon ya da font ekleyebiliriz.

-likes.php sayfana bakalım, burada iki bölümü var. Birinci daha önce bu içeriğe ip kaydı var mı? İkincisi ip kaydı yoksa.

- Post edilen bilgiler ile öncelikle select işlemi yapıyoruz, eğer kullanıcının ip adresi aynı içeriğe oylama yaptıysa rowcount ile if sorgusu yapıyoruz. (Olumlu olması durumunda update işlemi başlatıyoruz referans olarak kullanıcının ip değerini alıp update yapıyoruz. Ve son olarak yeni ortalama değeri için tekrar select yaparak ortalama değerini yazdırıp ajaxtan yakaladığı sonuç ile span içerisine güncelliyoruz.)

- Olumsuz yani daha önce oy vermediyse insert ile ilgili postun seo değeri tur ve kullanıcı ip ile verdiği yıldız değerini kayıt ediyoruz. Ve son olarak tekrar ortalama değerini yazdırıp içerik sayfasında ki span tagına yazdırıyoruz.

Dosya Linki: Link

Yorum yaparak düşüncelerinizi paylaşabilir beğenerek etkileşim kurabilirsiniz. İyi günler…