ToDoVel [Parte 03]: Hello World – Views

Observação: Este tutorial refere-se ao Laravel-4-BETA, estando totalmente DESATUALIZADO para a versão atual. Muita coisa mudou no framework…

Ao acessar o seu ambiente de desenvolvimento pelo navegador (http://localhost, no caso eu estou usando http://todovel – fica a gosto do fregues), um grande Hello World! aparecerá.
O que vamos fazer, para conhecer um pouco de como o Laravel 4 funciona, é dar uma melhorada nesse exemplo, aprendendo um pouco sobre routes, controllers e views.
Nesta primeira etapa, vamos brincar com as views.

Adicionando o Twitter Bootstrap

O Hello World padrão do Laravel é muito sem graça, vamos dar um tapa na pantera e dar uma melhorada nesse visual.
Para isso vamos fazer uso do Twitter Bootstrap.
Como estamos em um ambiente de desenvolvimento, recomendo baixar a versão Boostrap Source.
Se você baixar a versão source, pegue a pasta assets, que encontra-se na pasta docs do arquivo que você baixou, e coloque-a dentro da pasta public do seu projeto Laravel.

Identificando a View

Agora precisamos descobrir qual o arquivo que queremos alterar para dar um tapa no layout.
Para isso, vou até o arquivo routes.php que está na pasta /app para ver todas as urls que meu projeto está configurado a aceitar.
No caso, só temos uma url, que é a raiz:

Mais para frente vamos aprender a brincar com as “rotas”, por hora só desejamos saber qual o arquivo que está sendo chamado para exibir “Hello World”.
Note:

As rotas devem retornar um conteúdo HTML.
No caso, esse conteúdo é uma view, que está sendo executada pela chamada View::make.
Logo, o arquivo que desejamos chama-se hello.
Mas, onde está esse arquivo?
Lembra quando configuramos o Laravel 4?
O arquivo de configurações views.php descreve as pastas onde as views estarão.
Se você não alterou esse arquivo, suas views estão em app/views.
Lá encontraremos o arquivo hello.php.
YAAAAAAAYYYYY!!!!
Já podemos nos chamar Sherlock Holmes 😛

Blade Template System

Laravel possui um sistema de templates muito bacanudo chamado Blade.
Você não é obrigado a utilizá-lo, podendo optar por outras ferramentas – ou por nenhuma.
Mas como ele já está lá, e é uma engine bem legal, faremos uso dele.

A primeira coisa que devemos fazer é renomear a view de hello.php para hello.blade.php.
Isso é o suficiente para informar ao Laravel que a view é um arquivo do tipo Blade…

Agora, vamos adicionar todas as facilidades fornecidas pelo Twitter Bootstrap a esta página.
Para não ter trabalho, vamos copiar o código html de um exemplo pronto do Twitter Bootstrap: http://twitter.github.io/bootstrap/examples/marketing-narrow.html.

Templates

Pronto, agora temos um layout bem legal, e este será o layout oficial da nossa aplicação!
Porém, o nosso hello world sumiu.
E agora?

Em primeiro lugar, queremos que isso que criamos seja o nosso template.
Para isso, vamos mudar o nome do arquivo de hello.blade.php para template.blade.php.
Vale salientar que o nome não importa.
EU gosto de chamar os meus templates de template, pois sou um homem simples.
Algumas pessoas tem o tesão de chamar de layout, chamar de estilo, chamar de minha linda…
Cada um com seu gosto.

Um template é um layout fixo que será utilizado em várias páginas alterando apenas a área dedicada ao conteúdo, que cada página terá o seu.
O que precisamos fazer aqui é criar essa área de conteúdo que será diferente para cada página produzida nesse projeto.

Para isso, vamos no arquivo template.blade.php, e vamos “marcar” a área dedicada ao conteúdo.

Na linha 78 vou colocar o começo da marcação, com o código @section(‘conteudo’):

Note que o nome ‘conteúdo’ é tesão meu, cada um chama como quer.

Agora preciso fechar essa área demarcada.
Para isso, lá na linha 111, onde termina toda a área dedicada ao conteúdo, que foi criado pelo exemplo do twitter bootstrap, vou colocar a marcação @show.

Basta acessar o projeto pelo navegador.
Deu erro 😀
Que tela de erro linda!!!

Utilizando o template

O que está acontecendo é que criamos o template, mas lá no arquivo routes.php a chamada para a visão é para o hello.
Mas calma, vamos ser felizes!
Lá na pasta /views crie um arquivo hello.blade.php e teste no navegador.
Não apareceu nada por que o arquivo está vazio 🙁

Vamos fazer uma mágica: coloque o seguinte no arquivo hello.blade.php

Dá aquela testada porreta no navegador.
Sorria 😀

Por fim, vamos dar uma melhorada, vamos imprimir o nosso Hello World!

Depois de abrir no navegador e ficar feliz vamos entender o que aconteceu?

Partindo da idéia da orientação a objetos, criamos um template e nele marcamos áreas que podem ser extendidas, através do @section(‘nome_da_seção’)…@show.
Em um outro arquivo, dizemos que ele é filho do template, herdando suas propriedades através do @extends(‘template’).
Como na orientação a objetos, se não extendermos os métodos das classes da qual herdamos, teremos o método original, que no caso foi todo o html original.
Se extentermos os métodos, que foi o que fizemos através do @section(‘nome_da_seção’)…@stop, utilizaremos os novos métodos, e não os herdados.

Assim sendo, se no template original tivessemos outras áreas, não somente a área do conteúdo, e na visão que criassemos apenas modificassemos a área do conteúdo, todo o resto seria mostrado como o original.
Isso é legal para áreas onde a barra superior pode mudar de acordo com o status do usuário, se ele está logado ou não…

Quem quiser ver o código atual do projeto, ele encontra-se no GitHub:
https://github.com/frenetic/todovel

25 thoughts on “ToDoVel [Parte 03]: Hello World – Views

  1. Oi
    Isto estava tudo a corer bem, mas quando coloco @extends(‘template’)
    aparece na página @extends(‘template’)
    e não o template.
    Será que esqueci algo?

    1. Paulo,
      é sempre bom dar uma olhada no código pronto para ver o que fizemos diferente.
      O meu projeto encontra-se aqui: https://github.com/frenetic/todovel

      Dá uma olhada lá para ver se está tudo igual ou onde está a diferença.
      Pode ser que você tenha nomeado o seu arquivo de visão como “arquivo.php” ao invés de “arquivo.blade.php”.

      Também, como o Laravel 4 está em beta, com lançamento marcado para 28 de Maio de 2013, pode ser que algo tenha mudado nesse quesito.
      Dei uma procurada e aparentemente nada foi alterado.

      Qualquer coisa, só perguntar.
      Estou a disposição para sanar as suas dúvidas e formar mais um bom programador Laravel 4 🙂

      1. Obrigado pela sua resposta rápida. Ainda não consegui resolver o problema. Acontece que estou a usar o IIS no windows 7 pt-pt. Estou a apontar o meu site para a pasta public. Vou continuar a ver até descobrir depois digo se conseguir encontrar o galho.

        1. Paulo,
          o Windows e/ou o IIS não interferem nisso.
          Durante o tutorial, algumas vezes desenvolvi no windows server 2012 com IIS 7.5, no ambiente lá do trabalho.
          Vou te mandar um email, vamos investigar isso ai!

      2. Ola Frenetic,

        baixei o seu pacote, porém estou tendo alguns problemas. Ele foi feito no Laravel 4 mesmo ? O primeiro erro que estou recebendo é

        “syntax error, unexpected ‘[‘” na linha “Route::get(‘login’, [‘as’=>’login’, function() {”

        Saberia me ajudar ? Muito obrigado, até mais.

        1. Tiago, bom dia!
          O seu problema está na versão do PHP.
          A partir do PHP 5.4 arrays podem ser descritas assim: $exemplo = [‘1’, ‘2’, ‘3’];
          Aparentemente você está usando uma versão anterior a 5.4, onde esta sintaxe ainda não foi implementada.

          Basta alterar de []; para array();
          Ou migrar seu ambiente para o PHP 5.4 (prefiro essa opção :D)

    2. Ele provavelmente está usando o Dreamweaver. Ele cria um arquivo php meio “strangers ins the night.php”.

      A melhor coisa é copiar o arquivo template.blade.php, renomear pra hello.blade.php

      Depois disso limpar td o que tem dentro e colocar o código. Vai ser mel na chupeta.

      1. Eu uso o PHPStorm (em casa) e o KomodoEdit (no trabalho).
        Mas as vezes me dá uma preguiça de criar um arquivo em branco, através da IDE, copiar o conteúdo de outro arquivo, excluir o que eu não quero, e deixar o resto.
        Acho mais fácil copiar outro arquivo, renomear e alterar o necessário.

        No fim das contas, a ordem dos fatores não altera o produto.

        1. Pior que na merda do Dreamweaver, dependendo das configs dá pau.
          Por isso eu sou linux mint com sublime text na veia.

          abracos

  2. UHAHUUHAUHA, ri uns bocados com a forma como você escreveu o tutorial, bem bacana mesmo! Vou continuar acompanhando e aprendendo mais sobre o Laravel que por sinal parece ser bem foda!
    Parabéns pelo trabalho. Grande Abraço!

    1. Valeu 😀
      Espero que você consiga entender tudo sem problemas e passe a usar o Laravel.
      Ele é uma mão na roda, um grande ganho na sua produtividade e legibilidade de código.

  3. Grande e poderoso guru FReNeTiC (abaixe a cabeça até tocar a testa no chão, na direção de FReNeTiC):

    Tenho várias aplicações em PHP + HTML.
    Para usar Laravel 4 será melhor re-escrever tudo???
    Ou tem como fazer uma “adaptation-migration-jeitetion)?

    1. Fala Nogueira,
      bom dia!

      Cara, depende do tamanho das tuas aplicações, a frequência da manutenção delas e o teu tempo.
      Se você possui aplicações pequenas e tempo livre, recomendo que você as escreva em Laravel 4.
      Uma a uma, com calma.
      Vai ser uma experiência bem legal de aprendizado da ferramenta.

      Por outro lado, se teus sistemas são médios ou grandes e/ou você está com pouco tempo livre, recomendo ir com mais calma nisso.
      Recentemente li o livro chamado “Deal With It” – https://leanpub.com/dealwithit
      Este livro apresenta dicas legais de um programador experiente para programadores.
      Nele, há a seguinte dica:

      It’s usually a mistake to totally rewrite a working system – it will take far longer than you think. Use refactoring to gradually improve the design.

      É a dica que estou seguindo.
      Onde trabalho possuo um sistema que tem mais de 6 anos de desenvolvimento no ar, puro PHP + HTML.
      Um inferno.
      Aqui, a sexta-feira virou o dia de “laravelar” o sistema.
      Tenho um ambiente de testes onde, com calma, vou criando nele as funcionalidades existentes no sistema legado, enquanto o resto da semana o sistema legado vai sendo incrementado com as customizações e atualizações.
      Desse jeito vai levar um pouco de tempo, mas assim asseguro que o sistema nunca sairá do ar, e que o novo sistema com Laravel irá surgir.

      Então, se você tem outros membros na sua equipe (no meu caso, uma EUquipe), se você tem tempo, se seus sistemas não são muito grandes, vai fundo!
      Deixa o que está no ar lá, parado, só recebendo correções e refaça tudo em Laravel.
      Se o seu caso é como o meu, se teu sistema não pode parar, deve estar sempre recebendo customizações e correções, faz o trabalho em paralelo, com calma.

      Boa sorte!

      PS: se precisar de livros, links, ajuda e talz, tem esse site aqui: http://www.refactoring.com

  4. Muito bom o tutorial, mas fiquei perdido na hora de incluir o Twitter Bootstrap.

    Para os que estão se debatendo com isso, lembre-se de alterar o caminho para o Twitter Bootstrap no arquivo de template!

    E lembre-se que o caminho é relativo à pasta public/.

    Então se as pastas CSS, JS e IMG estão na pasta public/assets/, você só coloca assets/ no caminho para o Bootstrap (que vem como ../ se você copia o código do exemplo do Bootstrap).

    Continuo acompanhando! 😀
    Valeu mesmo!

  5. Boa noite, estou neste capitulo e após ter criado o arquivo template.blade.php estou com o seguinte problema ocorrendo:
    Symfony \ Component \ Debug \ Exception \ FatalErrorException
    Class ‘Html’ not found. Poderia me ajudar? O que pode ser?

    1. No template, dá uma olhada onde está sendo executado Html::
      Se não me engano, na versão mais atual do Laravel, parece que agora é HTML ou html.
      Mudou para tudo maiusculo ou tudo minusculo.
      Alterar, resolve.

  6. Boa tarde, estou em dúvida na parte em que você diz assim:

    “Agora, vamos adicionar todas as facilidades fornecidas pelo Twitter Bootstrap a esta página.
    Para não ter trabalho, vamos copiar o código html de um exemplo pronto do Twitter Bootstrap: http://twitter.github.io/bootstrap/examples/marketing-narrow.html.”

    Se possível explique melhor essa parte pois estou começando agora com o framework e não tenho a quem recorrer.

    Desde já agradeço.

Deixe uma resposta

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