Laravel View Parte 2

Masternet Fabiano
3 min readJan 11, 2023

--

Nessa segunda parte sobre views iremos tratar como criar um template padrão para ser reutilizado nas suas aplicações de uma forma simples clara e direta observem o código abaixo de um templade blade, fiz uma breve introdução ( Clique Aqui )

Estrutra de um template blade

A estrutura de um template blade é bem básica primeiro você define as seções que quer que sejam alteradas com a função @yield(‘seção’) e nas paginas filho ( ou extendidas) você chama essa seção que foi definida no template pai @section(‘seção’) e para informar o blade o fim dela com @endsection, assim definido o template pai , os templates filhos (extendidas) seguirão esse modelo definido pelo pai, em alguma alteração futura basta alterar o template pai e alterará todos templates filhos(extendidas) baixo tem um exemplo de um template pai que irei chamar de layout.blade.php . é apartir dele que todas páginas (filhos) se parecerão.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title')</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
@yield('css')
</head>
<body>
@yield('content')
< script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
@yield('javascript')
</body>
</html>

Como podem ver se parece com um documento HTML , com alguns detalhes vamos descrever

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

Aqui o Blade gerencia a linguagem da sua aplicação de como você configurou ela em:

app/config/app.php

Fiz um artigo demonstrando como configurar o fuso horário e tradução para pt-BR ( clique aqui )

<meta name="csrf-token" content="{{ csrf_token() }}">

Em resumo csrf-token é uma segurança , pois para requisições onde há formulários e áreas sensiveis , ele é utilizado para verficar se o usuário que fez a requisição é o mesmo do aplicativo e fornece uma proteção contra Cross Site Ataque (XSS) para saber mais sobre @csrf ( clique aqui )

Logo abaixo defini o Titulo , pois cada pagina terá um titulo carregado de forma dinâmica

<title>@yield('title')</title>

A próxima seção do site é definir o CSS que cada página vai usar

@yield('css')

Diferente do template pai cada pagina filho do site pode haver um css diferente, talvez por algum recurso espefico necessite de um estilo diferente bastando assim na pagina filho onde for necessário setar o css correspondete

A próxima seção é o conteúdo

@yield('content')

É aqui onde o contreúdo do site será carregado

Agora iremos criar a seção para o javascript , pois cada pagian filho pode necessitar de algum javascript específico , bastando carregar o java script correspondente

@yield('javascript')

Pronto é só isso , já definimos a estrutura que nosso template terá , agora só temos que trabalhar nas páginas filho, viu como é simples definir um tempalte pai !!
E a seguir é só seguir todos os passos para criação de suas páginas usando o Blade sem probelma nenhum.
Eu gosto particularmente de usar várias seções para CSS e JS @yield (‘css’) ou @yield(‘jacascript’) , pois assim cada pagina fica independente com cada um com seu respectivo JavaScript e CSS.

--

--

Masternet Fabiano

Designing and Coding have been my passion since the days I started working with computers but I found myself into web design/development since 2001.