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:
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:
Desse forma estamos criando um link simbólico do arquivo na pasta web, veja:
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.
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:
Fecha o bloco:
Ok! Vamos criar nosso bloco, que ficará dentro de outro bloco já existente no arquivo base.html.twig, veja abaixo na linha 15.
Agora para concluirmos esse arquivo, vamos estruturar o html, já incluindo as classes do bootstrap, veja abaixo o arquivo base.html.twig pronto:
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:
Vamos ter uma lista dos nomes de nossas rotas, a primeira que vamos usar é a rota da home “/” , veja a imagem:
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:
Agora nossas rotas estão com os nomes mais curtos.
Para vermos novamente entre no terminal e digite:
Veja:
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.
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:
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:
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.
Para recuperarmos esses dados no twig, vamos fazer:
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:
Veja o index.html.twig pronto:
Vamos entrar no terminal, e subir nosso servidor.
Entre na url: https://127.0.0.1:8000/
Nossa home está pronto, veja:
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
Veja o arquivo show.html.twig pronto:
Imagem da página pronta:
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!