Bu yazıda hem normal PHP sayfalama yapımı konusunu hem de sayfa yenilenmeden jquery ile sayfalama konusunu göreceğiz. İlk olarak GET yöntemiyle sayfa değerinin URL adresinden okunması ve verilerin sayfa sayfa bu değer üzerinden listelenmesinin nasıl yapılacağına bakalım.
Sayfalama menüsü aşağıdaki gibi görüntülenecek şekilde link olarak hazırlanacak ve bu linklere tıklanıldığında o sayfaya yönlenme işlemi gerçekleşecek.
« Önceki 1…4 5 [6] 7 8…11 Sonraki »
[1] 2 3 … 11 Sonraki »
« Önceki 1 … 9 10 [11]
Ardından bu uygulamanın sayfa yenilenmeden yapımını göreceğiz. Bu iki konudan sonra ise jquery ajax sayfalama ile daha fazla göster butonu oluşturmak ve bu butona tıklayarak sayfa yenilenmeden içerikleri listelemenin yapılacağını göreceksiniz.
Ayrıca infinite scroll sayfalama yani scroll aşağıya indikçe veri yükleme işlemini otomatik hale çevirme işleminin kolayca nasıl yapılabileceğini de bu yazıda göreceksiniz.
Bu 3 farklı PHP pagination yapımı ile amaçlanan aynıdır. Tek seferde bütün verileri çekmeden, sıra sıra, azar azar verileri sayfalara ayırarak sitenin performansı arttırmak ve sitede daha düzenli bir yapı oluşturmak.
Sayfanın en aşağısında verdiğim bağlantı üzerinden burada anlatılan örnekleri indirerek ulaşabilirsiniz. İlk olarak basit bir şekilde PHP sayfalama yapımı konusuna giriş yapalım.
PHP ile Sayfalama Yapımı
PHP ile sayfalama mantığı özetle URL’den gelen sayfa numarası parametresi ile sql’de limit komutu kullanarak verileri bölüm bölüm çekmek olacak. Ayrıca sayfa numarası ile toplam veri sayısı bilgileri kullanılarak dinamik olarak sayfalama menüsü hazırlanacak.
İlk olarak veritabanında ‘icerik_id’ ve ‘icerik_baslik’ sütunlarını barındıran “icerikler” isminde basit bir tablo oluşturuyoruz.
Ardından kod tarafına geçiş yapıyoruz ve aşağıdaki şekilde veritabanı bağlanma kodlarını yazıyoruz. Oluşturduğunuz veritabanına göre bilgileri değiştirebilirsiniz.
error_reporting(0);
$host = 'localhost'; //host bilgisi
$user = 'root'; //kullanıcı adı
$pass = ''; //sifre
$db = 'sayfalama'; //veritabanı ismi
$baglan = mysqli_connect($host, $user, $pass, $db) or die (mysqli_Error());
mysqli_query($baglan,"SET CHARACTER SET 'utf8'");
mysqli_query($baglan,"SET NAMES 'utf8'");Daha sonra sayfa sayısını URL bağlantısından okuma (PHP get ile sayfalama), sayfalama işleminde kaç verinin sıralanacağı, toplam veri sayısı, toplam sayfa sayısı ve kaçıncı veriden kaçıncı veriye kadar verileri getireceğimizi belirleyen başlangıç değerini bulma işlemlerini gerçekleştirdiğimiz aşağıdaki kodları ekliyoruz.
$sayfa = $_GET['sayfa'] ? $_GET['sayfa'] : 1; //urlden gelen sayfa değeri var ise o değeri, yok ise 1 değeri veriyoruz.
$toplam_icerik_sayisi = mysqli_num_rows(mysqli_query($baglan,'SELECT icerik_id FROM icerikler'));
$limit = 4; //sayfalamada her sayfada gösterilecek veri sayısı
$sonSayfa = ceil($toplam_icerik_sayisi/$limit);//içerik sayısı ile limit değeri bölünüyor ve çıkan değer yuvarlanıyor. böylece sayfa sayısı diğer bir ifadeyse sonm sayfa değeri bulunuyor
//mesela 22 veri var. biz 4 er 4er listeliyoruz. 22 veriyi 6 sayfada gösterebiliriz.
//22/4 = 5.5 sonucunu yukarı yuvarlayıp sayfa sayısını buluyoruz.
$baslangic = ($sayfa-1)*$limit;
/*
mesela ilk sayfa 1. sayfa gösterilecek ise 1-1 = 0 - 0*4=0, veritabanından 0.veriden itibaren veriler getirilmeye başlansın
2. sayfa gösterilecek ise 2-1 = 1 - 1*4=4, veritabanından 4. veriden itibaren veriler getirilmeye başlansın
*/Hazırlık aşamasını tamamladık. Asıl kısma geçiyoruz ve verileri sıra sıra çekme ve sayfalama butonlarını oluşturma işlemini gerçekleştiriyoruz.
Bütün kodlar aşağıdaki if bloğu içerisinde olacak. Veri var ise bu if blogları içerisindeki kodlar çalışacak.
if($sonSayfa >= $sayfa){Bu bloglar arasına başlangıç ve çekilecek veri sayısını belirterek verileri çektiğimiz ve yazdırdığımız aşağıdaki kod satırlarını ekliyoruz.
$icerik_sorgu = mysqli_query($baglan,'SELECT * FROM icerikler LIMIT '.$baslangic.','.$limit); //başlangıç değerinden itibaren kaç tane veri getirilecek ise veritabanından LIMIT komutu ile verileri çekiyoruz
echo 'Sayfalama İçerikler Örneği
';
while ($icerik = mysqli_fetch_assoc($icerik_sorgu)){ //çekilen veriler içerisinde dönüyoruz, teker teker veriyi $icerik değişkenine aktarıyoruz
echo '',$icerik['icerik_baslik'],$icerik['icerik_id'],'
'; //ve veri değerlerini yazdırıyoruz
}Verileri ekledik. Şimdi sayfalama butonlarını hazırlamalıyız. Aşağıdaki kod satırları ile PHP sayfalama önceki sonraki butonları oluşturma, her sayfa için buton oluşturmamak için sayfalama butonlarını kısaltma, aktif sayfayı gösterme, ilk sayfa ve son sayfa butonları oluşturma gibi sayfalama işleminde olması gereken butonlar hazırlanıyor.
/*sayfalama buton kodları*/
if($toplam_icerik_sayisi > $limit){ //içerik sayısı, her sayfada gösterilecek içerik sayısından büyük ise sayfalama butonları aktif edilsin
echo '
';
/*
$x = 2 olduğu durumda, aktif sayfanın önceki ve sonraki 2 sayfa gösterilir, sonrasına ... ifadesi konularak kısaltma yapılır.
böylelikle bütün sayfaları yazmamıza gerek kalmaz.
örnekler:
« Önceki 1...4 5 [6] 7 8...11 Sonraki » || [1] 2 3...11 Sonraki » || « Önceki 1...9 10 [11]
*/
$x = 2; //kısaltma limiti
if($sayfa > 1){ //sayfa 1 den küçük ise [Önceki] butonu oluşturulmaya uygundur
$onceki = $sayfa-1; //aktif sayfanın bir önceki sayfa bulunur
echo '« Önceki '; //link içerisine yazdırılıp [Önceki] butonu oluşturulur
}
if($sayfa==1){ //sayfalamada 1. sayfada bulunuyorsak
echo '[1]'; //1. sayfayı menüde aktif olarak gösteriyoruz
}
else{ // bulunmuyorsak
echo '1'; //normal olarak gözüksün, aktif olmasın
}
//menü kısaltma işlemi
//bulunduğumuz sayfa yani $sayfa = 6 olduğu durumda
if($sayfa-$x > 2){ //6-2 > 2 değeri true döndürecek
echo '...'; //kısaltma etiketi yazdırılacak
$i = $sayfa-$x; //$i değişkenine 4 değeri atanacak
}else {
$i = 2;
}
//$sayfa = 6 olduğu durumda = sonuc çıktısı -> 1 ...
for($i; $i<=$sayfa+$x; $i++) { //$i yani 4 değeri 8 değerine ulaşasıya kadar döngü çalışsın > 4 5 6 7 8
if($i==$sayfa){ //$i değeri bulunduğumuz sayfa ile eşitse
echo ' ['.$i.'] '; // aktif olarak işaretlensin ve yazdırılsın > 4 5 [6] 7 8
}
else{//değil ise
echo ''.$i.''; //normal olarak yazdırılsın
}
if($i==$sonSayfa) break;
}
//$sayfa = 6 olduğu durumda = sonuc çıktısı -> 1 ... 4 5 [6] 7 8
if($sayfa+$x < $sonSayfa-1) { //6+2<11-1 ise
echo '...'; //kısaltma etiketi yazdırılacak
echo ''.$sonSayfa.''; // son sayfa yazdırılacak
}elseif($sayfa+$x == $sonSayfa-1) {
echo ''.$sonSayfa.'';
}
//$sayfa = 6 olduğu durumda = sonuc çıktısı -> 1 ... 4 5 [6] 7 8 ... 11
//menü kısaltma işlemi
if($sayfa < $sonSayfa){ //bulunduğumuz sayfa hala son sayfa değil ise
$sonraki = $sayfa+1; //bulundğumuz sayfa değeri 1 arttırılıyor
echo ' Sonraki » '; //ve Sonraki butonu oluşturulup yazdırılıyor
}
}
/*sayfalama buton kodları*/PHP mysql sayfalama genel itibarıyla bu şekilde. Style kodlarıyla görüntü kalitesine önem vermedim. Görüntü teferruat, asıl olan işlevi diye düşünüyorum.
Şimdi kaydırma çubuğu aşağı indikçe veri ekleme, diğer adıyla jquery daha fazla göster uygulaması yapımına geçebiliriz.
Jquery Ajax Sayfalama Yapımı
Yukarıdaki PHP sayfalama örneğinin sayfa yenilenmeden nasıl yapılacağını görelim. İlk olarak “veriler.php” isminde bir dosya oluşturuyoruz ve yukarıdaki örnekteki kodların tamamını bu dosyaya aktarıyoruz.
Ardından “index.php” dosyasında
etiketleri arasına
elemanını ekliyoruz. Sayfa ilk açıldığında ve sayfalama butonlarına her tıklanıldığında jquery ile “veriler.php” dosyasına bağlantı kurulacak ve veriler “#veriler” div elemanının içerisine yazdırılacak.
“index.php” dosyasının içeriği aşağıdaki gibidir. Sayfalama butonlarına her tıklanıldığında sayfa yenilenmeden sayfalama yapılıyor ve URL adresi anlık olarak güncelleniyor.
Jquery Daha Fazla Göster Uygulaması
Jquery ile daha fazla göster butonuna her tıklandığında yeni verilerin eklenmesini sağlayacağız. Mantık özetle şu şekilde:
- Sayfa ilk yüklendiğinde ve daha fazla göster butonu tıklanıldığında çalışacak bir fonksiyon oluşturmak.
- Bu fonksiyon ile php uzantılı bir dosyaya post işlemiyle verileri sıralamak için kullanacağımız başlangıç değerini gönderiyoruz. Mesela sayfa ilk açıldığında fonksiyon ile ‘0’ başlangıç değerini gönderiyoruz. Verileri ‘0’ dan yani baştan itibaren çekmeye başla demiş oluyoruz.
- Jquery ile daha fazla göster butonu tetiklendikçe, tıklanıldıkça başlangıç değeri sürekli artacak ve sürekli bir sonraki veri kümeleri alt alta yüklenmiş olacak. Böylelikle sayfa yenilenmeden bütün verileri aşama aşama listeleme ve sayfalama sistemi oluşturmuş oluyoruz.
index.php Dosyası İçeriği
Bu sayfa içerisinde jquery ve javascript ile PHP ajax sayfalama işlemi ile “veriler.php” dosyasına post etme kodları bulunmakta. Jquery ajax kullanımı sonucunda geri dönen verileri
elemanının içerisine sürekli eklenecek. Böylelikle bütün veriler aşama aşama alt alta yazdırılacak. Ayrıntılar kod satırlarında mevcut.
veriler.php Dosyası İçeriği
Bu sayfa içerisinde ise php sayfalama yapımı için gerekli pagination kodları mevcut. “index.php” dosyasından jquery post işlemiyle gönderilen ‘baslangic’ değeri ile veriler veritabanından çekiliyor. Ayrıca daha fazla göster butonu oluşturuluyor ve verilerle birlikte yazdırılıyor. Yazdırılan bu veriler “index.php” dosyası içerisinden elde ediliyor. Ajax ile sayfalamanın mantığı genel itibarıyla bu şekilde. Kod satırlarında gerekli açıklamaları bulabilirsiniz.
',$icerik['icerik_baslik'],$icerik['icerik_id'],'
'; //ve veri değerlerini yazdırıyoruz
}
$loadCount=$baslangic+$limit; //bir dahaki sefer butona tıklanıldığında kaçıncı veriden itibaren verilerin listelenmesi gerektiği sayı
if($sayi-$baslangic-$limit > 0){ ?>
)>
[ / ]
Daha fazla göster
veri yok
Ayrıca butona tıklamadan kaydırma çubuğu aşağı indikçe verilerin otomatik olarak yüklenmesi isteniyorsa “index.php” dosyası içerisinde script etiketleri arasına aşağıdaki kod satırlarını ekleyebiliriz.
$(window).scroll(function() { //scroll hareket ettiğinde
if($(window).scrollTop() + window.innerHeight == $(window).height()) { //scroll en aşağıdaysa
if (!$(".dahafazla:last").attr("durum")){ //'dahafazla' sınıf ismine sahip en son elemanın 'durum' değeri yok ise
$(".dahafazla:last").trigger( "click" ); //bu eleman için otomatik click olayını tetikliyoruz
$(".dahafazla:last").attr('durum','1'); //ve elemana tıklanıp, gerekli işlemler gerçekleştirildiğini temsilen 'durum' özelliğine 1 değerini veriyoruz
}
}
});Kaydırma çubuğu aşağı yukarı hareket ettiğinde bu kodlar tetiklenecek. Eğer sayfanın en aşağısına gelindiyse ve class ismi ‘dahafazla’ olan en alttaki buton verileri getirmek için daha önceden tıklanmadıysa bu butonu tetikliyoruz ve verileri butona tıklamadan sayfayı aşağı kaydırınca otomatik veri yükleme işlemini gerçekleştiriyoruz. Buton çalıştıysa, butonun ‘durum’ özelliğine 1 değerini ekliyoruz. Böylece scroll yukarı aşağı yapıldığında aynı veriler çekilmemiş olacak.
scrollTop fonksiyonu : Yukarıdan aşağıya kaydırma miktarı. Scroll aşağı indikçe artacak, yukarı çıktıkça azalacak.
$(window).height : Yukarıdan aşağıya toplam uzunluk miktarı. Veriler eklendikçe sayfanın uzunluğu artacak. Dolayısıyla elde edilen uzunluk miktarı sürekli artacak.
windows.innerHeight : Sitenin tarayıcıda görüntülediği anlık çerçeve uzunluk miktarı.
Bu uzunluk değerleri tarayıcının siteyi görüntülediği çerçeve boyutuna göre değişkenlik gösterir.
PHP sayfalama yapımı ve ajax sayfalama konuları şimdilik bu kadar. Bu yazıda anlatılan sayfalama örneğine PaginationPHP&JS adlı dosyayı indirerek ulaşabilirsiniz.