PHP url rewrite ’lı bootstrap sayfalama (pagination) uygulaması

makale.baslik

PHP ile basit ve hızlı bir şekilde sayfalama yapmak için Onassar’a ait sayfalama sınıfını nasıl kullanılacağını anlatacağım. Sayfalama yapmak zahmetli bir iş bunu sağlayan internette çok fazla sayıda class mevcut. Sizlerde benim gösterdiğime benzer sınıfları gösterdiğim mantıkla kullanabilirsiniz.

Bunlardan onassar/PHP-Pagination sayfalamasını nasıl kullanacağımızı göstereceğim. Bu sınıfı SEO kurallarına uygun bir adresleme yapacak şekilde (url rewrite) kullanacağız. Bunun için veri tabanından veri çekmeyi bildiğinizi varsayıyorum. Bilmeyenler için PHP ile MySQL veri tabanına bağlanıp, mysqli ile veri ekleme, silme, düzenleme ve listeleme işlemleri yazımı okumanızı öneririm.

 

 

Uygulamayı anlatmadan önce kullanacağımız sınıfın özelliklerinden bahsedeyim. Kullanımı şu şekildedir:

 require_once 'Pagination.class.php'; // sayfamıza sınıfı dahil ediyoruz.

// sayfalama için gerekli değişkeni GET ile çekiyoruz, adını değiştirebilirsiniz 
$page = isset($_GET['page']) ? ((int)$_GET['page']) : 1; //varsayılan değer 1

//Gerekli tanımlamaları yapmak için pagination nesnemizi oluşturuyoruz.
$pagination = (new Pagination());
$pagination->setCurrent($page); //kaçıncı sayfa değeri
$pagination->setTotal(200); // toplam kayıt sayısı
$pagination->setRPP(3); // her sayfada gösterilecek kayıt sayısı
$pagination->setPrevious("Önceki"); //Önceki linki için metin değeri
$pagination->setPrevious("Sonraki"); //Sonraki linki için metin değeri
// $pagination->setClean(); //true sadece önceki ve sonraki linkleri gösterir (varsayılan değer false)
$pagination->setKey("sayfa"); //get ile alınacak değerin adını belirler
$pagination->setCrumbs("5"); //sayfalamada kaç aralık gösterileceği

// sayfalamayı yazdırmak için gerekli kod
$markup = $pagination->parse(); //


Bu değişiklikleri sınıfın (Pagination.class.php) kendi içinden de tek seferde yapabilirsiniz:
 

protected $_variables = array(
    'classes' => array('clearfix', 'pagination'),
    'crumbs' => 5,
    'rpp' => 10,
    'key' => 'sayfa',
    'target' => '',
    'next' => 'Sonraki »',
    'previous' => '« Önceki',
    'alwaysShowPagination' => false,
    'clean' => false
);

 

Şimdi veri tabanını oluşturalım. Veri tabanı için MySQL kullanacağız ve sayfalama veri tabanımızın panel tablosu şu şekilde olacak.

 

Sonrasında veri tabanımıza mysqli sınıfı ile bağlanıp verileri bu sınıfla çekeceğiz. Bunun için bir inc/fonk.php sayfası oluşturdum. Bu sayfada url rewrite yapmak için bir SEOLink fonksiyonunu kullanacağız. Bu sayede başlıkların içindeki Türkçe karakterleri, özel karakterleri ve boşlukları düzenlemiş olacağız.

<?php
@$baglanti = new mysqli("127.0.0.1", "root", "", "sayfalama");

if ($baglanti->connect_error) {
    echo $baglanti->connect_error . " hatası oluştu";
    exit;
}
$baglanti->set_charset("utf8");

function SEOLink($baslik)
{
    $metin_aranan = array("ş", "Ş", "ı", "ü", "Ü", "ö", "Ö", "ç", "Ç", "ş", "Ş", "ı", "ğ", "Ğ", "İ", "ö", "Ö", "Ç", "ç", "ü", "Ü");
    $metin_yerine_gelecek = array("s", "S", "i", "u", "U", "o", "O", "c", "C", "s", "S", "i", "g", "G", "I", "o", "O", "C", "c", "u", "U");
    $baslik = str_replace($metin_aranan, $metin_yerine_gelecek, $baslik);
    $baslik = preg_replace("@[^a-z0-9\-_şıüğçİŞĞÜÇ]+@i", "-", $baslik);
    $baslik = strtolower($baslik);
    $baslik = preg_replace('/&.+?;/', '', $baslik);
    $baslik = preg_replace('|-+|', '-', $baslik);
    $baslik = preg_replace('/#/', '', $baslik);
    $baslik = str_replace('.', '', $baslik);
    $baslik = trim($baslik, '-');
    return $baslik;
}

 

Url rewrite yapmak için .htaccess dosyasını oluşturalım. .htaccess bilginizin olduğunu varsayıyorum. Daha sonraki yazılarımdan biri de bu konu olacaktır.

RewriteEngine On
RewriteRule ^detay-(\d+)-\w+/? detay.php?id=$1 [NC,L]
RewriteRule ^anasayfa-(\d+)? index.php?sayfa=$1 [NC,L]
RewriteRule ^anasayfa/? index.php [NC,L]

 

 

Şimdi sayfalamayı yapacağımız index.php sayfasını oluşturalım.

Burada Bootstrap kullanarak sayfamızı tasarlıyoruz. Kullandığımız sayfalama sınıfı da sayfalama kodlarını Bootstrap sınıflarına uygun oluşturmaktadır. Açıklamaları kodların arasında bulabilirsiniz.

<?php
include("inc/fonk.php"); //veri tabanı bağlantısı ve gerekli fonksiyonu barındıran sayfamızı dahil ediyoruz.
include("inc/page/Pagination.class.php"); //sayfalama sınıfını dahil ediyoruz
?>
<!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>Bootstrap 101 Şablon ee</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>

<!--<h1>Merhaba, Dünya!</h1>-->
<div class="container-fluid">

    <!--nav bar başladı -->
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <!-- Daha iyi mobil görüntü için marka ve aç/kapa gruplanıyor -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#aa">
                    <span class="sr-only">Navigasyonu aç/kapa</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Bootstrap ile Tasarım</a>
            </div>
            <!-- Aç/kapa için nav kısayollarını, formu ve diğer içeriği bir araya topla -->
            <div class="collapse navbar-collapse" id="aa">


                <ul class="nav navbar-nav navbar-right">
                    <li><a href="anasayfa">Ana Sayfa</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                    <li><a href="#">Projeler2</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Projeler
                            <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Proje 1</a></li>
                            <li class="divider"></li>
                            <li class="disabled"><a href="#">Proje 2</a></li>
                            <li><a href="#">Proje 3</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Proje 4</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-aç/kapa -->
        </div><!-- /.container-fluid -->
    </nav>

    <!-- Grid Yapısı başladı-->


    <?php
    $page = isset($_GET['sayfa']) ? ((int)$_GET['sayfa']) : 1;
    $toplamSorgusu= $baglanti->query("select count(*) as toplam from panel where aktif=1");
    $toplamKayit = $toplamSorgusu->fetch_assoc();
    $toplam = $toplamKayit["toplam"];   //toplam kayıt değerini değişkenimize aktardık
    $sayfaBasinaKayitSayisi = 3; // her sayfada gösterilecek kayıt sayısını tutan değişken

    $pagination = (new Pagination());
    $pagination->setCurrent($page);
    $pagination->setTotal($toplam);
    $pagination->setRPP($sayfaBasinaKayitSayisi);


    $sayfalama = $pagination->parse();
    $sayfalama = str_replace("?sayfa=", "anasayfa-", $sayfalama);
    //sayfalamanın seo ya uygun olması için ?sayfa= değeri yerine anasayfa- değeri ile değiştiriyoruz
    //Bunu sınıf içinde kodlara müdahale etmemek için burada yaptım.
    //yapmasanızda sisteminiz çalışır.


    ?>
    <div class="text-center"><?php echo $sayfalama; ?></div>
    <!-- Sayfalamayı yazdırıyoruz -->
    <div class="row">


        <?php

        $sorgu = $baglanti->query("select ozet,baslik,id from panel where aktif=1 limit " . (($page - 1) * $sayfaBasinaKayitSayisi) . "," . $sayfaBasinaKayitSayisi);
        // veri tabanımızdan panel tablosundan verileri çekiyoruz ama burada limit anahtar kelimesi ile sayfalamayı gerçekleştiriyoruz.
        // bu sayede istenilen aralıktaki kayıtlar sayfada gösterilecek
        while ($sonuc = $sorgu->fetch_assoc()) { // verileri döngü ile sayfamıza yazıyoruz
            ?>

            <div class="col-lg-4 col-xs-12">
                <div class="panel panel-primary">
                    <!-- Varsayılan panel içeriği -->
                    <div class="panel-heading"><?php echo $sonuc['id'] ?><?php echo $sonuc["baslik"] ?></div>
                    <div class="panel-body">
                        <p><?php echo $sonuc["ozet"] ?></p>
                        <p><a class="btn btn-primary btn-sm"
                              href="detay-<?php echo $sonuc['id'] . "-" . SEOLink($sonuc["baslik"]) ?>"
                              role="button">Daha fazla öğrenin</a></p>
                        <!-- SEOLink fonksiyonu ile linklerimiz seoya uygun hale geliyor. -->
                    </div>

                </div>
            </div> <!-- 1. hücre sonu-->

            <?php
        }
        ?>

    </div><!-- 1. row sonu-->


</div>
<div class="text-center"><?php echo $sayfalama; ?></div>
<!-- sayfalamayı alt taraftada yeniledim. -->

</body>
</html>

 

Sırada sayfalama için kullandığımız yapıdaki içeriklerin detaylarını görmek için detay.php sayfasını oluşturalım.

 <?php
include("inc/fonk.php"); //veri tabanı bağlantısı ve gerekli fonksiyonu barındıran sayfamızı dahil ediyoruz.
$id = $_GET["id"]; //id değerimizi alıyoruz.
$sorgu = $baglanti->query("select baslik,icerik from panel where id=" . (int)$id); //sorgumuzu oluşturuyoruz

$sonuc = $sorgu->fetch_assoc(); //sonucları alıyoruz ve gerekl yerlerde yazdırıyoruz

?>
<!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>Bootstrap 101 Şablon ee</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>

<!--<h1>Merhaba, Dünya!</h1>-->
<div class="container-fluid">

    <!--nav bar başladı -->
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <!-- Daha iyi mobil görüntü için marka ve aç/kapa gruplanıyor -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#aa">
                    <span class="sr-only">Navigasyonu aç/kapa</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Bootstrap ile Tasarım</a>
            </div>
            <!-- Aç/kapa için nav kısayollarını, formu ve diğer içeriği bir araya topla -->
            <div class="collapse navbar-collapse" id="aa">


                <ul class="nav navbar-nav navbar-right">
                    <li><a href="anasayfa">Ana Sayfa</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                    <li><a href="#">Projeler2</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Projeler
                            <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Proje 1</a></li>
                            <li class="divider"></li>
                            <li class="disabled"><a href="#">Proje 2</a></li>
                            <li><a href="#">Proje 3</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Proje 4</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-aç/kapa -->
        </div><!-- /.container-fluid -->
    </nav>

    <!-- nav bar bitti -->
    <div class="jumbotron">
        <h1><?php echo $sonuc["baslik"] ?></h1>
        <p><?php echo $sonuc["icerik"] ?></p>

    </div>
    <!-- jumbotron bitti-->

    <!-- Grid Yapısı başladı-->


</div>


</body>
</html>

Umarım yararlı bir yazı olmuştur.

Dosyaları indirmek için: sayfalama.rar

onassar/PHP-Pagination dosyalarını indirmek için: Pagination_class.rar

Paylaş:

Yorumlar

    Bu yazı için hiç yorum yok. İlk yorumu yapmak ister misiniz?