Iniciando com Symfony 2 – Parte 06

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

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!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *