[Laravel] Iniciantes – Tutorial: Criando um formulário de contato – Parte 07

Laravel para iniciantes

Esta é a sétima parte do tutorial “Criando um formulário de contato”. No post anterior, vimos como criar uma utilizar o Authentication disponível no Laravel 5.

Nesse post vamos refatorar um pouco a nossa camada de visualização utilizando algumas diretivas do Blade


Passo 01: Criar a view app.blade.php 

Essa view será responsável por manter os elementos HTML que são comuns em todas as páginas da aplicação, como por exemplo o cabeçalho e as mensagens de erro.

Crie o arquivo  resources/views/app.blade.php com o seguinte conteúdo:

Ao declarar o @yield na view app.blade.php reservamos aquele espaço para ser preenchido pela view que for estender.

 

Passo 02: Fazer com que a view do formulário de contato estenda a app.blade.php 

Primeiramente, renomeie a view resources/views/welcome.blade.php  para resources/views/contato.blade.php

Agora edite ela:

Ao adicionar a diretiva @extends('app')  na view contato.blade.php , estamos indicando o Laravel a renderizar a view app.

O código html escrito dentro da @section('conteudo') será aplicado dentro do @yield('conteudo')

Passo 03: Editar a view retornada no controller ContatoController@index 

 

Passo 04: Fazer com que a view de listagem estenda a app.blade.php 

Aqui basta fazer o mesmo que foi feito na view de contato:

Edite o arquivo resources/views/lista.blade.php

 

Passo 05: Fazer com que a view de login estenda a app.blade.php 

Aqui basta fazer o mesmo que foi feito na view de listagem:

Edite o arquivo resources/views/auth/login.blade.php

 

Passo 06: Adicionar o CSS do BootstrapMaterialDesign

Organizando as views dessa forma, removemos duplicação de código e ganhamos agilidade. Se, por exemplo, quisermos aplicar um estilo Material Design em nossa aplicação, bastaria adicionar na view app.blade.php  o CSS.

Adicione na tag <head> o link  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.min.css">

Veja o resultado no navegador:

Tela de login laravel com Material Design

Dúvidas? Fique a vontade nos comentários!

  • Fernando

    Muito bom, terá continuação?
    Fica como sugestão passar a inserção para o model. 😀

    • Olá Fernando!

      Terá sim! Boa sugestão! Pensei em mostrar como criar um “ContatoRepository”para fazer estas operações de banco de dados 😀

  • Michel Fonseca

    Excelente, excelente, excelente. Esse tutorial tá muito bom Jansen. Parabéns!

    Como faço para saber das novidades deste e de outros tutoriais?

  • Ismael de Freitas

    Cara, esse foi o tutorial mais limpo, objetivo, simples, porém muito enriquecedor, que encontrei sobre Laravel. Parabéns, mestre! Há algum curso seu completo e pago? Gostaria de aprender mais. Abraço.

  • Tablet Teste

    Uma dúvida boba, eu já tenho o banco criado e não quero criar pelo Laravel, como que faço isso? apenas aponto a conexão? E como ficaria as classes?