Tableless

Busca Menu

Iniciando com Symfony 2 – Parte 08

Seja o primeiro a comentar por

No tutorial anterior, criamos um upload de imagens para servirem de capa para nossos posts, agora vamos instalar e configurar um Bundle, disponibilizado pela comunidade, para fazer a paginação de nossa página index. Para isso temos que instalar o Knp Paginator em nossa aplicação.

Instalação do Knp Paginator

Para instalar o Knp Paginator, temos que adicioná-lo em nosso composer.json. Abra o arquivo composer.json e adicione a linha abaixo:

    "knplabs/knp-paginator-bundle": "2.4.*@dev"

Caso não o conheça, ou tenha dúvidas, leia este post (Composer para iniciantes).
Depois de adicionado o Knp Paginator no composer, vamos instalá- lo. Entre no terminal e digite:

$ composer update

Após o Download, o Knp Paginator está instalado em nossa aplicação.

Configurando o Knp Paginator

A primeira configuração que devemos fazer, é registrar o novo bundle instalado, para isso entre no AppKernel, caminho: app/AppKernel.php

Adicione a linha abaixo no registro de bundles:

new Knp\Bundle\PaginatorBundle\KnpPaginatorBundle(),

Veja na linha 16:

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            new Symfony\Bundle\FrameworkBundle\FrameworkBundle(),
            new Symfony\Bundle\SecurityBundle\SecurityBundle(),
            new Symfony\Bundle\TwigBundle\TwigBundle(),
            new Symfony\Bundle\MonologBundle\MonologBundle(),
            new Symfony\Bundle\SwiftmailerBundle\SwiftmailerBundle(),
            new Symfony\Bundle\AsseticBundle\AsseticBundle(),
            new Doctrine\Bundle\DoctrineBundle\DoctrineBundle(),
            new Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle(),
            new Tableless\CoreBundle\TablelessCoreBundle(),
            new Tableless\ModelBundle\TablelessModelBundle(),
	    new Knp\Bundle\PaginatorBundle\KnpPaginatorBundle(),
        );
...

Pronto o Knp Paginator está registrado.
Agora vamos fazer as configurações padrões no Knp, para isso entre no arquivo config.yml, caminho: app/config/config.yml

No final do arquivo adicione as configurações abaixo:

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:sliding.html.twig     # sliding pagination controls template
        sortable: KnpPaginatorBundle:Pagination:sortable_link.html.twig # sort link template

Essas configurações foram tiradas da documentação do Knp Paginator

Configurando o Controller

Depois de termos feito as configurações de instalação do Knp Paginator, vamos configurar nosso controller, para isso entre no IndexControlerController, caminho: src/Tableless/CoreBundle/Controller/IndexControlerController.php

Primeiramente para pegar o número de páginas, de acordo com a quantidade de posts temos que usar o request do symfony, então vamos dar um use em Request, veja na linha 8:

<?php

namespace Tableless\CoreBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\HttpFoundation\Request;

...

Em nossa indexAction temos que pegar a biblioteca do paginador, passar nosso posts, pegar as páginas via request, e quantidade de posts que queremos por páginas, e retorná- los em forma de array para que nossa view possa apresentar. Em meu caso vou usar apenas três posts por página.

Veja:

    /**
     * @Route("/", name="index")
     * @Template()
     */
    public function indexAction(Request $request)
    {
        $em = $this->getDoctrine()->getManager();

        $posts = $em->getRepository('TablelessModelBundle:Post')->findAllInOrder();

        /** @var  $paginator */
        $paginator  = $this->get('knp_paginator');
        $pagination = $paginator->paginate($posts, $request->query->get('page', 1), 3);

        return [
            'pagination' => $pagination,
        ];
    }

…

Configurando a View

Nosso controller está configurado, agora temos que configurar nossa view, para que a mesma apresente os posts, com a paginação.
Entre na view index.html.twig, caminho: src/Tableless/CoreBundle/Resources/views/IndexController/index.html.twig

Em nossa index, temos um for, que está recebendo a variável posts, vamos trocar a variável posts por pagination, que foi a variável que passamos em nosso controller, veja:

de:

{% for post in posts %}

troque por:

{% for post in pagination %}

E onde queremos que nossa paginação fique, vamos colocar o código abaixo:

{{ knp_pagination_render(pagination) }}

Veja nossa index.html.twig pronta

{% extends "::base.html.twig" %}

{% block title %}Simples Blog{% endblock %}

{% block content %}

    <div class="container">

        <div class="row">

            {{ knp_pagination_render(pagination) }}

            <div class="col-lg-12">


            {% for post in pagination %}

                <article class="col-lg-4">

                    <div class="thumbnail">

                        <a href="{{ path('show', { 'id': post.id }) }}">

                            <img class="img-responsive" src="{{ asset(post.getCoverWeb) }}" alt="{{ post.cover }}" title="{{ post.cover }}"/>

                        </a>

                        <div class="caption">

                            <h3><a href="{{ path('show', { 'id': post.id }) }}">{{ post.title }}</a></h3>

                            <p>Escrito por: {{ post.author.name }}</p>

                            <p>{{ post.content|slice(0, 45) }} ...</p>

                            <p><a href="{{ path('show', { 'id': post.id }) }}">Leia mais...</a></p>

                        </div>

                    </div>

                </article>

            {% endfor %}

        </div>
    </div>
        {{ knp_pagination_render(pagination) }}

    </div>

{% endblock %}

Rode o servidor:

$ php app/console server:run

Entre na url:
http://127.0.0.1:8000

Veja a imagem:

Paginação

Estilizando a paginação

Podemos perceber, que a paginação está sem estilização, porém como estamos utilizando o bootstrap, vamos entrar no arquivo config.yml, caminho: app/config/config.yml

E vamos alterar o pagination da tamplete do knp_paginator

de:

pagination: KnpPaginatorBundle:Pagination:sliding.html.twig

para:

pagination: KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig

Atualize a página, e pronto, veja:

Paginação estilizada

Conclusão

Pronto, nosso simples projeto está fazendo a paginação de posts, no próximo tutorial vamos configurar outro Bundle, onde faremos o slug para nossos posts, para que nossas urls, fiquem um pouco mais amigáveis.

Links dos tutoriais anteriores:
Iniciando com Symfony 2 – Instalação
Iniciando com Symfony 2 – parte 02
Iniciando com Symfony 2 – parte 03
Iniciando com Symfony 2 – parte 04
Iniciando com Symfony 2 – parte 05
Iniciando com Symfony 2 – parte 06
Iniciando com Symfony 2 – parte 07

O projeto encontra-se no GitHub!

Publicado no dia