Symfony KnpPaginatorBundle ile Pagination

By | 30 June 2017

Knp firmasının KnpPaginatorBundle isminde sunduğu bundle’ı kullanacağız. Bu bundle bize query string ile parametreleri alıp, ona göre işlemler yapmamızı sağlayan bir arayüz sunuyor. Öncelikle kurulumu için aşağıdaki komutu giriyoruz.

composer require knplabs/knp-paginator-bundle

Kurulum tamamlandıktan sonra AppKernel.php içinde ‘bundles’ array’i içine aşağıdaki satır ekleniyor.

new Knp\Bundle\PaginatorBundle\KnpPaginatorBundle(),

Bunu da yaptıktan sonra sıra geldi konfigürasyon işlemlerine. Ben örnek olması açısından aşağıda yapılabilecekleri örnek olarak buraya kordum

knp_paginator:
    page_range: 5 # default page range used in pagination control
    default_options:
        page_name: page # page query parameter name
        sort_field_name: sort # sort field query parameter name
        sort_direction_name: direction # sort direction query parameter name
        distinct: true # ensure distinct results, useful when ORM queries are using GROUP BY statements
    template:
        pagination: 'KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig'
        sortable: 'KnpPaginatorBundle:Pagination:sortable_link.html.twig' # sort link template

Bize aşağıdaki konfigürasyon yeterli;

# KNP Paginator
knp_paginator:
   default_options:
       page_name: p
   template:
       pagination: 'KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig'

Yukardaki konfigürasyon pagination arayüzüne tıklanınca yukardan gidecek query string parametresinin adını veriyor, ben kısa ‘page’ kısaltması olarak ‘p’ verdim. Template altındaki ise pagination arayüzünün hangi template’te gözükeceği seçiliyor. Örnek olması açısından aşağıdaki gibi gözükecek.

Konfigürasyondan sonra sıra geldi Controller tarafındaki kodlarımıza. Yorum satırları ile kodları açıkladım;

class DefaultController extends Controller
{
    /**
    * @Route("/", name="homepage")
    * @param Request $request
    * @return \Symfony\Component\HttpFoundation\Response
    *
    *  Request sınıfı ile query string olarak gelen parametreleri alıyoruz.
    */
    public function indexAction(Request $request)
    {
        //veritabanında image dosyalarının verisi çekiliyor.
        $em = $this->getDoctrine()->getManager();
        $images = $em->getRepository('AppBundle:Image')->findAll();

        //paginator servisi set ediliyor.
        $paginator = $this->get('knp_paginator');
        //her sayfada 4 tane image gözükecek ve default olarak 1.sayfadan başlamasını set ediyoruz.
        //images verilerini veriyoruz.
        $pagination = $paginator->paginate(
            $images,
            $request->query->getInt('p', 1) , //burada query string parametresi alıyor yoksa default 1
            4
        );

        //pagination objesini arayüze gönderiyoruz.
        return $this->render('default/index.html.twig', [
            'images' => $pagination,
        ]);
    }
}

Arayüz dosyası da aşağıdaki gibi;

{% extends 'base.html.twig' %}

{% block body %}
    <h2>Knp Paginator Bundle</h2>
    <h4>https://mertblog.net</h4>

    {% for image in images %}
        <div class="responsive">
            <div class="gallery">
                <a target="_blank" href="{{ asset('images/'~image.name) }}">
                    <img src="{{ asset('images/'~image.name) }}" alt="Trolltunga Norway" width="300" height="200">
                </a>
            </div>
        </div>
    {% endfor %}

    <div class="clearfix"></div>
    <div class="navigation text-center">
        {{ knp_pagination_render(images) }}
    </div>

{% endblock %}

Burada dikkat etmemiz gereken yer ‘navigation’ class’ı altındaki knp_pagination_render fonksyionu, burada gönderdiğimiz objelere göre pagination’ı ayarlıyor. Tıkladığımız her sayfada ona göre yukardan query string parametresi gönderiyor. Ayrıca base.html.twig dosyasında bootstrap css dosyası dahil ediliyor ki arayüz araçları düzgün gözükebilsin.

Aşağıdaki gibi ilk girişte bu sayfa karşılıyor ve istediğimiz gibi 4 tane resim yükleniyor.

Ardından ikinci sayfaya tıkladığımızda (url’e dikkat p=2 şeklinde query string ekleniyor) sonraki 4 resim yükleniyor.

Anlatacakları şimdilik bu kadar, bir dahaki yazımda görüşmek üzere… 🙂

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*