Tableless

Busca Menu

Iniciando com Symfony 2 – Parte 06

Seja o primeiro a comentar por

Symfony e Twig

No tutorial anterior, configuramos nosso projeto e criamos nossas páginas, home e show, porém as mesmas se encontram sem estilização, neste tutorial, vamos apenas estruturar nossas páginas de um modo simples e básico, porém funcional. Não entrarei em detalhes sobre o Bootstrap, não é meu objetivo, porém para iniciantes, recomendo a documentação.
Sobre o Twig, falarei o básico do básico, somente o que vamos usar. Lembrando que ele já vem instalado e configurado no Symfony, porém podemos instalá-lo separadamente via Composer e configurá- lo em outros projetos, usando ou não outros frameworks.

Instalando e configurando o Twitter Bootstrap no Symfony

Vamos iniciar com a configuração do bootstrap.
Temos algumas formas de instalar e configurar o arquivo css no symfony, em nosso caso vamos fazer uma configuração simples apenas para a didática, caso queiram se aprofundar mais no assunto, aconselho a documentação.

Primeiramente vamos criar uma pasta dentro da pasta Resource do bundle CoreBundle, caminho: src/Tableless/CoreBundle/Resouces, com o nome public, e dentro dessa nova pasta, vamos criar outra pasta com o nome css.

Baixe o bootstrap, e copie o arquivo bootstrap.min.css para a pasta css/, veja a imagem abaixo para comparação:

Pasta para bootstrap

Caso queiram, podem usar o arquivo bootstrap.css, em nosso caso vamos usar o .min.css.

Para que o bootstrap seja carregado vamos entrar no terminal, e digitar:

$ php app/console assets:install --symlink

Desse forma estamos criando um link simbólico do arquivo na pasta web, veja:

Link simbólico

Agora devemos carregar o aquivo bootstrap em nossa aplicação. Vamos entrar no arquivo base.html.twig, caminho: app/Resources/views/base.html.twig, e carregar o bootstrap, no bloco stylesheets, veja na linha 7.

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %} 
                <link rel="stylesheet" type="text/css" href="{{ asset('bundles/tablelesscore/css/bootstrap.min.css') }}" />
        {% endblock %} 
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head> 
    <body> 
        {% block body %}{% endblock %} 
        {% block javascripts %}{% endblock %} 
   </body> 
</html>

Iniciando com Twig

Pronto, o bootstrap está instalado e configurado.
Neste momento vou criar quatro posts em off, apenas para visualização, recomendo que façam o mesmo, pois assim ficará fácil para estilizar.

Vamos iniciar nossos trabalhos com o Twig.
Ainda com o arquivo base.html.twig aberto, vamos fazer algumas configurações.

O twig trabalha com blocos, que podem ser herdados pelas templates filhas, em nosso caso vamos criar um bloco com o nome “content”, para que nossas templates possam herdar. Para criar um bloco é bem simples, veja abaixo:

Abre o bloco:

{% block nome-do-bloco %} 

Fecha o bloco:

{% endblock %}

Ok! Vamos criar nosso bloco, que ficará dentro de outro bloco já existente no arquivo base.html.twig, veja abaixo na linha 15.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
        <link rel="stylesheet" type="text/css" href="{{ asset('bundles/tablelesscore/css/bootstrap.min.css') }}" />
    {% endblock %}
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}

    {# Novo bloco criado #}
    {% block content %}{% endblock %}
    
{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>

Agora para concluirmos esse arquivo, vamos estruturar o html, já incluindo as classes do bootstrap, veja abaixo o arquivo base.html.twig pronto:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title> 
        {% block stylesheets %} 
                <link rel="stylesheet" type="text/css" href="{{ asset('bundles/tablelesscore/css/bootstrap.min.css') }}" />
        {% endblock %} 
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> 
    </head> 
    <body> 
        {% block body %} 
        <div class="container"> 
            <header class="row"> 
                <div class="col-lg-6"> 
                    <h1>Simples Blog</h1> 
                    <a href="#" title="">Home</a> | 
                    <a href="#" title="">administração</a>
                </div> 
            </header> 
        {% block content %} 
        {% endblock %} 
            <footer class="col-lg-12"> 
                <p>© 2015 Tableless - Todos os direitos reservados</p> 
            </footer>
        </div> 

        {% endblock %} 
        {% block javascripts %}{% endblock %} 
    <body> 
</html>

Podemos perceber que os links estão sem caminho, para passarmos um link no Symfony precisamos do nome de nossas rotas, e para pegar esses nomes, vamos entrar no terminal.

Abra o terminal e digite:

$ php app/console router:debug

Vamos ter uma lista dos nomes de nossas rotas, a primeira que vamos usar é a rota da home “/” , veja a imagem:

Rotas

Percebemos que o nome dessa rota, está muito extenso, vamos mudar isso, deixando o nome dessa rota e da rota de visualização do post, um pouco mais curto.

Para isso, devemos entrar no controller indexController, caminho: src/Tableless/CoreBunde/ IndexControlerController.php
Abra o arquivo, e nas annotations dos métodos indexAction e showAction, vamos colocar os nomes que queremos para nossas rotas. Exemplo: @Route(“/”, name=”index”)

Veja o exemplo na linha 2 e na linha 9 do código abaixo:

    /** 
     * @Route("/", name="index") 
     * @Template() 
     */ 
    public function indexAction() 
    .... 

    /** 
     * @Route("/show/{id}", name="show") 
     * @Template() 
     */ 
    public function showAction($id) 
    ...

Agora nossas rotas estão com os nomes mais curtos.
Para vermos novamente entre no terminal e digite:

$ php app/console router:debug

Veja:
Rotas

Pronto! Agora podemos inserir nossos links.

Para pegarmos o link da home, digitamos: {{ path(‘index’) }}, e para o link da administração vou pegar o link da lista de post.

Veja o arquivo base.html.twig pronto, os links estão na linha 17 e 18.

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title> 
        {% block stylesheets %} 
                <link rel="stylesheet" type="text/css" href="{{ asset('bundles/tablelesscore/css/bootstrap.min.css') }}" />
        {% endblock %} 
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> 
    </head> 
    <body> 
        {% block body %} 
        <div class="container"> 
            <header class="row"> 
                <div class="col-lg-6"> 
                    <h1>Simples Blog</h1> 
                    <a href="{{ path('index') }}" title="Home">Home</a> | 
                    <a href="{{ path('post') }}" title="Administração">administração</a>
                </div> 
            </header> 
        {% block content %} 
        {% endblock %} 
            <footer class="col-lg-12"> 
                <p>© 2015 Tableless - Todos os direitos reservados</p> 
            </footer>
        </div> 

        {% endblock %} 
        {% block javascripts %}{% endblock %} 
    <body> 
</html>

Estruturando e estilizando o index

Nossa base está pronta, vamos agora para o arquivo index.html.twig, que é o index de nosso blog.
Caminho: src/Tableless/CoreBundle/Resources/views/IndexController/index.html.twig

Abra o arquivo para que possamos estruturá- lo.

Podemos perceber que na primeira linha, nosso arquivo está estendendo o arquivo base.html.twig, que acabamos de estruturar.
Em primeiro lugar vamos criar um título para nossa página.
Para isso, digitamos o título que queremos dentro do bloco title.
Para que nosso conteúdo, posicione- se no lugar correto, vamos renomear o bloco body, para content, que criamos no arquivo base, o h1 e dump, vamos excluir, veja nosso arquivo:

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

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

{% block content %} 
    
{% endblock %}

Nosso Controller IndexController está retornando um array de posts, através do método indexAction, para recuperarmos esse array via Twig, devemos fazer um “for” para recuperar cada dado do post.

Obs: Se tivéssemos usando o php para recuperar esses dados, passaríamos um foreach, no caso do Twig para fazermos esse mesmo processo, usamos um for, veja abaixo o exemplo:

{% for valor in array %}

{% endfor %}

Para entender melhor o funcionamento do for, recomendo a documentação.

Vamos entender melhor

Nosso método indexAction, do controller indexController, está nos retornando um array, veja na linha 7.

public function indexAction() 
    { 
        $em = $this->getDoctrine()->getManager(); 

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

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

Para recuperarmos esses dados no twig, vamos fazer:

{% for post in posts %}

	{{ post.title }}
	{{ post.author.name }}
	{{ post.content | slice(0, 45) }}

{% endfor %}

Perceba que ao recuperarmos o post.content, que é o conteúdo do nosso post, vamos passar um “slice”, que serve para cortar o texto, começando do 0 até 45 caracteres. Caso queiram mais de 45 caracteres, é só aumentar esse valor.

Também, temos que estruturar nossa página com html, incluir as classes do bootstrap e criar os links. Em relação aos links, para acessarmos um post, temos que passar o “id” desse post no link.

Vamos colocar uma imagem, escolham uma imagem, e coloque na pasta web, caminho: web/

Para recuperarmos essa imagem, vamos usar o asset.
Veja abaixo o exemplo do asset para imagem:

<img src="{{ asset('imagem.png') }}" /> 

Veja o index.html.twig pronto:

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

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

{% block content %} 

    <div class="container"> 

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

                {% for post in posts %} 

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

                        <div class="thumbnail">

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

                                <img class="img-responsive" src="{{ asset('logo-tableless.png') }}" alt="img" title="img"/>

                            </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> 

    </div>

{% endblock %}

Vamos entrar no terminal, e subir nosso servidor.

$ php app/console server:run

Entre na url: http://127.0.0.1:8000/

Nossa home está pronto, veja:

blog

Estruturando e estilizando o show

Vamos estruturar o show.html.twig, que é responsável pela visualização de cada post.

Abra o arquivo, caminho: src/Tableless/CoreBundle/Resources/views/IndexController/ show.html.twig, e vamos estruturá lo.

Vamos colocar um título no bloco “title”, renomear o bloco body para content, fazer a estruturação com o html e passar as classes do bootstrap. Perceba que nesse caso não precisamos fazer um “for” com o twig, pois estamos recebendo somente um array, ou seja, um post.
Temos que dar uma atenção para a data de criação, e a data de atualização, não estamos recebendo essas datas no formato correto. Para que possamos apresentar as datas, temos que passar um date() no twig, veja o exemplo abaixo

{{ post.createdAt | date('d/m/Y - H:m:s') }}

Veja o arquivo show.html.twig pronto:

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

{% block title %}Blog - {{ post.title }}{% endblock %} 

{% block content %} 

<div class="container"> 

    <div class="row"> 

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

            <h1>{{ post.title }}</h1> 

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

            <p>Postado em: {{ post.createdAt | date('d/m/Y - H:m:s') }}</p>

            <p>{{ post.content }}</p> 

        </article> 

    </div> 
    
</div> 

{% endblock %}

Imagem da página pronta:

Show post

Conclusão

Nossa página de visualização de post, e nossa home, está estruturada e estilizada, temos que fazer a parte administrativa, tanto a administração de post, quanto de autores. Vou fazer essa parte em off. Os arquivos, encontram- se no github, os caminhos são:

src/Tableless/CoreBundle/Resources/views/Author/
src/Tableless/CoreBundle/Resources/views/Posts/

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

O projeto encontra-se no GitHub!

Publicado no dia