PHP ve Bootstrap ile İçerikleri Sayfalama (Pagination)
Pagination, büyük miktarda veriyi sayfalara ayırıp gösterme işlemidir. Normalde büyük tabloları 10’arlı gruplara ayırıp ileri geri sarma butonları ile veriler arasında geçilir. Günümüzde de en çok haber sitelerinde gördüğümüz bir uygulamadır. İki üç satırlık dandik bir haberi, sırf sitenin tıklanma oranı artsın ve her sayfada reklamlar yenilensin diye 10 parçaya bölüp gösterirler. Pagination aslında SEO açısından çok riskli bir yaklaşımdır. Bir yandan ziyaretçilerinizin sitenizde aktif olup dolaşmasını sağlarsınız, bir yandan da aram motorları tarafından bot ile sayfada gezilerek rank artırılmaya çalışılıyor diye algılanırsınız. Bir içerik sayfalara bölündüğünde linkler şu şekilde olabilir. http://www.ugurgelisken.com/haber.php?id=web-tasarim&parca=1 http://www.ugurgelisken.com/haber.php?id=web-tasarim&parca=2 http://www.ugurgelisken.com/haber.php?id=web-tasarim&parca=3 Görüldüğü gibi bir haberi 3 parçada verebiliyorum. İşi abartıp 80–100 sayfa kadar parçaya bölenler de oluyor… Sayfalamada dikkat etmeniz gereken en hususlar; linklerin doğru olması ve parametreye göre gelen verilerin SEO açısından doyurucu olmasıdır. Sayfalama, bence en çok resim galerisi sistemlerinde işe yarıyor. Veya gruplandırılmış haberler olunca da güzel olabiliyor. Şimdi basit bir örnek ile pagination’u öğrenelim… Adobe DreamWeaver CC’de Bootstrap ile bir HTML5 projesi açalım. Aşağıdaki kodları girin ve pagination.php olarak kaydedin. PHP kaydediyoruz, çünkü sayfalamada içerik gösterme, menüyü oluşturmak ve URL satırından GET ile parametreleri çekmek için PHP kullanacağız. Uygulama örneğimizde <, 1, 2, 3, 4, 5, > şeklinde menü oluşturacağız. < butonuna tıklanınca galeri/1.jpg gösterilecek. > butonuna tıklanınca galeri/5.jpg gösterilecek. Ara butonlara basıldıkça da kendi numarasına göre URL parametresi gönderilecek ve resim yüklenecek. Aşağıdaki kodu hazırladıktan sonra, bir de galeri klasörü içinde 1’den 5’e kadar jpg resimleri hazırlamanız gerekmektedir. pagination.php
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Galeri</title><!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></head>
<body class="container-fluid">
<div align="center">
<div class="row">
<div class="span6" style="float: none; margin: 0 auto;">
<?php
echo "<h4>Resim " . $_GET["no"] . "</h4>";
echo "<img src='galeri/" . $_GET["no"] . ".jpg' />";
?>
</div>
<div class="row">
<ul class="pagination">
<?php
echo "<li><a href='?no=1'>«</a></li>";
for ( $resimsayisi=1 ; $resimsayisi <= 5 ; $resimsayisi++ )
{
echo "<li><a href='?no=" . $resimsayisi . "' />" . $resimsayisi . "</a></li>";
}
$resimsayisi--;
echo "<li><a href='?no=". $resimsayisi . "'.>»</a></li>";
?>
</ul>
</div>
</div>
</div>
</body><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</html>
Yazmış olduğumuz kodların PHP verileri ile birlikte HTML5 çıktısı şöyle olacaktır. Yukarıdaki ve aşağıdaki kodları karşılaştırarak inceleyin… 195.142.1.243/~ugurgelisken/pagination.php?no=3 adresine girildiğinde:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><ol></ol>
<title>Galeri</title><!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></head>
<body class="container-fluid">
<div align="center">
<div class="row">
<div class="span6" style="float: none; margin: 0 auto;">
<h4>Resim 3</h4><img src='galeri/3.jpg' /></div>
<div class="row">
<ul class="pagination">
<li><a href='?no=1'>«</a></li>
<li><a href='?no=1' />1</a></li>
<li><a href='?no=2' />2</a></li>
<li><a href='?no=3' />3</a></li>
<li><a href='?no=4' />4</a></li>
<li><a href='?no=5' />5</a></li>
<li><a href='?no=5'.>»</a></li>
</ul>
</div>
</div>
</div>
</body><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</html>
Bu sayfanın tarayıcıda derlenmiş görüntüsü de şöyledir:
