Laravel Blade: gestione dei layout, includes, components

Inauguriamo quest’oggi le super guide Laravel che vanno a formare quel materiale gratuito che noi di LaraMind ci siamo imposti di dare con grande solennità alla community di Laravel in Italia. Iniziamo con Blade, capiamo tutto ma proprio tutto, “tuttissimo” su Blade.

Indice

Cos’è Blade?

Il modo migliore per imparare una funzione è descriverla in maniera didascalica, abbiamo provato a fare così, speriamo vi possa piacere:

Blade è il templating engine di Laravel
Permette di scrivere PHP nel template se necessario
Blade viene compilato solo se modificato
Il file compilato viene messo in cache
Ha strutture di controllo di flusso (if, for …)
I file Blade hanno l’estensione .blade.php e generalmente risiedono in resources/views

Blade è il templating engine di Laravel

<?php
namespace App\Http\Controllers;

use App\Post;

class PostsController extends Controller
{
    public function index()
    {
        $posts = Post::latest()->get();
        // Laravel si aspetta che il nostro file
        // abbia di default l'estensione .blade.php
        // il path: resources/views/posts/index.blade.php
        return view('posts.index', compact('posts'));
    }
}

<?php

namespace App\Http\Controllers;

use App\Post;

class PostsController extends Controller

{

public function index()

{

$posts = Post::latest()->get();

// Laravel si aspetta che il nostro file

// abbia di default l'estensione .blade.php

// il path: resources/views/posts/index.blade.php

return view('posts.index', compact('posts'));

}

Permette di scrivere php nel template

// file resources/views/posts/show.blade.php
<div>
    <h1><?php echo "Titolo del post!"; ?></h1>
    
    <h3>
         <?php echo $post->sottotitolo; ?>
    </h3>
</div>

// file resources/views/posts/show.blade.php

<div>

<h3>

<?php echo $post->sottotitolo; ?>

</h3>

</div>

Ha strutture di controllo (if, for, while, switch …)

// in php semplice scriviamo
<ul>
    <?php foreach($tasks as $task) : ?>
        <li><?= $task; ?></li> 
    <?php endforeach; ?>
</ul>

// in blade semplice scriviamo 
<ul> 
    @foreach($tasks as $task) 
      <li>{{ $task }}</li> 
    @endforeach 
</ul>

// in php semplice scriviamo

<ul>

<?php foreach($tasks as $task) : ?>

<?php endforeach; ?>

</ul>

// in blade semplice scriviamo

<ul>

@foreach($tasks as $task)

@endforeach

</ul>

// in php semplice scriviamo
<ul>
    <?php if($utente == 'sid') : ?>
        <li><?= 'Ciao, sono sid'; ?></li> 
    <?php endif; ?>
</ul>

// in php semplice scriviamo

<ul>

<?php if($utente == 'sid') : ?>

<?php endif; ?>

</ul>

// in blade semplice scriviamo
<h3>
   @if($utente == 'sid')
     Ciao sono sid 
   @endif
</h3>

// in blade semplice scriviamo

<h3>

@if($utente == 'sid')

Ciao sono sid

@endif

</h3>

Blade permette la composizione

<!-- resources/views/layouts/app.blade.php -->
<html> 
     <head>
         <title>Il mio blog</title> 
     </head>
     <body>
         <div class="container">
              @yield('content')
         </div>

         @section('footer')
              Tutti i diritti riservati.
         @show
     </body> 
</html>

<html>

<head>

</head>

<body>

@yield('content')

</div>

@section('footer')

@show

</body>

</html>

Il beneficio di usare una tecnologia come un templating engine, e Blade in particolare, è che queste permettono la composizione e l’ereditarietà.

definiamo un master layout

<html>
   <head>
      <title>Il mio blog</title>
   </head>
   <body>
      <div class="container">
         @yield('content')
      </div>
      @section('footer')
      Tutti i diritti riservati.
      @show
   </body>
</html>

<html>

<head>

</head>

<body>

@yield('content')

</div>

@section('footer')

@show

</body>

</html>

Facciamo attenzione alle direttive @yield e @content:

@content è la sezione dove verrà visualizzato un certo contenuto,
@yield definisce una sezione dove visualizzare un certo contenuto, in questo caso ‘content’

definiamo un post layout

<!-- resources/views/layouts/posts/index.blade.php -->
@extends('layouts.app')
@section('content')
<div>
   <h1>Il mio post</h1>
   <article>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
   </article>
</div>
@endsection
@section('footer') 
    @parent
    <a href="/post-simili">Post simili</a> 
@endsection

@extends('layouts.app')

@section('content')

<div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

</article>

</div>

@endsection

@section('footer')

@parent

<a href="/post-simili">Post simili</a>

@endsection

Facciamo attenzione alle direttive @extends @section @parent:

@extends definisce il file da estendere, il file dal quale ereditare e prendere un solo argomento
@section prende come argomento il nome della sezione dove inserire il contenuto definito
@parent prende il contenuto del master layout

includiamo altre view, parte 1°

<!-- resources/views/layouts/app.blade.php -->
<html>
   <head>
      <title>Il mio blog</title>
   </head>
   <body>
      @include('layouts.sidebar')
      <div class="container"> @yield('content')</div>
      @section('footer')
      Tutti i diritti riservati.
      @show
   </body>
</html>

<html>

<head>

</head>

<body>

@include('layouts.sidebar')

<div class="container"> @yield('content')</div>

@section('footer')

@show

</body>

</html>

<!-- [..]layouts/sidebar.blade.php -->
<div>
   <h3>Prossime lezioni</h3>
   <ul>
      <li>Lezione 1</li>
      <li>Lezione 2</li>
   </ul>
</div>

<div>

<h3>Prossime lezioni</h3>

<ul>

<li>Lezione 1</li>

<li>Lezione 2</li>

</ul>

</div>

Facciamo attenzione alla direttiva @include:
@include definisce un file da includere in quel punto

includiamo altre view, parte 2°

!-- resources/views/layouts/app.blade.php -->
.......
<body>
   @include('layouts.sidebar', ['lezioni' => $lezioni])
   <div class="container"> @yield('content')</div>
   ...

!-- resources/views/layouts/app.blade.php -->

.......

<body>

@include('layouts.sidebar', ['lezioni' => $lezioni])

<div class="container"> @yield('content')</div>

...

<!-- [..]layouts/sidebar.blade.php -->
<div>
   <h3>Prossime lezioni</h3>
   <ul>
      @foreach($lezioni as $lezione)
      <li>{{ $lezione->titolo }}</li>
      @endforeach
   </ul>
</div>

<div>

<h3>Prossime lezioni</h3>

<ul>

@foreach($lezioni as $lezione)

<li>{{ $lezione->titolo }}</li>

@endforeach

</ul>

</div>

Passando un array come secondo parametro [‘chiave’ => $variabile] possiamo passare dati alla view inclusa

include condizionato

<!-- resources/views/layouts/app.blade.php -->
.......
<body>
   @includeWhen($lezioni->count(), 'layouts.sidebar', ['lezioni' => $lezioni])
   <div class="container"> @yield('content')</div>
   ...

.......

<body>

@includeWhen($lezioni->count(), 'layouts.sidebar', ['lezioni' => $lezioni])

<div class="container"> @yield('content')</div>

...

<!-- [..]layouts/sidebar.blade.php -->
<div>
   <h3>Prossime lezioni</h3>
   <ul>
      @foreach($lezioni as $lezione)
      <li>{{ $lezione->titolo }}</li>
      @endforeach
   </ul>
</div>

<div>

<h3>Prossime lezioni</h3>

<ul>

@foreach($lezioni as $lezione)

<li>{{ $lezione->titolo }}</li>

@endforeach

</ul>

</div>

Facciamo attenzione alla direttiva @includeWhen:
usando @includeWhen possiamo condizionare se includere la view o meno

include compatto

<!-- [..]layouts/sidebar.blade.php -->
<div>
   <h3>Prossime lezioni</h3>
   <ul>
      @each('layouts.sidebar-lezione', $lezioni, 'lezione')
   </ul>
</div>

<div>

<h3>Prossime lezioni</h3>

<ul>

@each('layouts.sidebar-lezione', $lezioni, 'lezione')

</ul>

</div>

<!--[..]layouts/sidebar-lezione.blade.php -->
<div>
   <h4>{{ $lezione->titolo }}</h4>
   <p>
      {{ $lezione->descrizione }}
   </p>
</div>

<div>

<h4>{{ $lezione->titolo }}</h4>

<p>

</p>

</div>

Facciamo attenzione alla direttiva @each:
usando @each possiamo passare la view, la variabile e come deve essere identificata

Recap modello inclusione blade

blade laravel

Components: sono una funzionalità ispirata da Vue.js in L5.4+

// layouts/app.blade.php
<html>
   <head>
      ...
   </head>
   <body>
      @yield('content')
      ---
      // home.blade.php @extends('layouts.app') 
      @section('content')
           <h1>Pagina Iniziale</h1>
      @endsection

// layouts/app.blade.php

<html>

<head>

...

</head>

<body>

@yield('content')

---

// home.blade.php @extends('layouts.app')

@section('content')

<h1>Pagina Iniziale</h1>

@endsection

Immaginiamo il tipico layout come discusso precedentemente

// layouts/alert.blade.php
<div class="alert"> {{ $slot }}</div>

1 2	// layouts/alert.blade.php <div class="alert"> {{ $slot }}</div>

Immaginiamo del semplice markup in un file separato, un alert che vogliamo riutilizzare.

Blade Components

Come usare i components

// layouts/app.blade.php
<html>
    <head>
    ...
    </head>
    <body>
    @yield('content')
---
@extends('layouts.app')
@section('content')
<div>
    <h1>Pagina iniziale</h1>
    @component('layouts.alert')
        Benvenuto al sito.
    @endcomponent
</div>
@endsection

// layouts/app.blade.php

<html>

<head>

...

</head>

<body>

@yield('content')

---

@extends('layouts.app')

@section('content')

<div>

<h1>Pagina iniziale</h1>

@component('layouts.alert')

Benvenuto al sito.

@endcomponent

</div>

@endsection

Nuova struttura layout sito

Possiamo usare il componente ‘layouts.alert’ nel seguente modo

// layouts/app.blade.php
<html>
   <head>
      ...
   </head>
   <body>
      @yield('content')
      ---
      @extends('layouts.app')
      @section('content')
      <div>
         <h1>Pagina iniziale</h1>
         @component('layouts.alert')
         Benvenuto al sito.
         @endcomponent
      </div>
      @endsection

// layouts/app.blade.php

<html>

<head>

...

</head>

<body>

@yield('content')

---

@extends('layouts.app')

@section('content')

<div>

<h1>Pagina iniziale</h1>

@component('layouts.alert')

Benvenuto al sito.

@endcomponent

</div>

@endsection

Cambia il modo di pensare al layout e ci permette di “re-immaginare” il template sito

html>
   // layouts/app.blade.php 
   <head>
      <title>{{ $title or 'Il mio blog }}</title>
   </head>
   <body>
      <div class="container">
         {{ $slot }}
      </div>
   </body>
</html>
---
@component('layouts.app') // home.blade.php
@slot('title')
Pagina iniziale
@endslot
<div class="col-6">
   @component('inc.alert')
   Sei stato loggato.
   @endcomponent
   <h1>Benvenuto</h1>
</div>
<div class="col-6">
   @component('layouts.sidebar')
   Un messaggio nella sidebar.
   @endcomponent
</div>
@endcomponent

html>

// layouts/app.blade.php

<head>

<title>{{ $title or 'Il mio blog }}</title>

</head>

<body>

</div>

</body>

</html>

---

@component('layouts.app') // home.blade.php

@slot('title')

Pagina iniziale

@endslot

@component('inc.alert')

Sei stato loggato.

@endcomponent

<h1>Benvenuto</h1>

</div>

@component('layouts.sidebar')

Un messaggio nella sidebar.

@endcomponent

</div>

@endcomponent

Blade Components : Differenze

<html>
   // layouts/app.blade.php 
   <head>
      <title>{{ $title or 'Il mio blog }}</title>
   </head>
   <body>
      <div class="container">
         {{ $slot }}
      </div>
   </body>
</html>
---
@component('layouts.app') // home.blade.php
@slot('title')
Pagina iniziale
@endslot
<div class="col-6">
   @component('inc.alert')
   Sei stato loggato.
   @endcomponent
   <h1>Benvenuto</h1>
</div>
<div class="col-6">
   @component('layouts.sidebar')
   Un messaggio nella sidebar.
   @endcomponent
</div>
@endcomponent

<html>

// layouts/app.blade.php

<head>

<title>{{ $title or 'Il mio blog }}</title>

</head>

<body>

</div>

</body>

</html>

---

@component('layouts.app') // home.blade.php

@slot('title')

Pagina iniziale

@endslot

@component('inc.alert')

Sei stato loggato.

@endcomponent

<h1>Benvenuto</h1>

</div>

@component('layouts.sidebar')

Un messaggio nella sidebar.

@endcomponent

</div>

@endcomponent

A questo punto, se la guida ti è piaciuta e se pensi che possa essere opportuno per te procedere nello studio approfondito di Laravel scrivici a amministrazione@laramind.com e richiedi un percorso di formazione personalizzato oppure dai un’occhiata ai nostri corsi a catalogo.

Dai un’occhiata ai Corsi LaraMind e diventa uno sviluppatore di livello avanzato

Top Menu

Main Menu

Super Guida Laravel: tutto ma proprio tutto su Blade

Cos’è Blade?

Blade è il templating engine di Laravel

Permette di scrivere php nel template

Ha strutture di controllo (if, for, while, switch …)

Blade permette la composizione

definiamo un master layout

definiamo un post layout

includiamo altre view, parte 1°

includiamo altre view, parte 2°

include condizionato

include compatto

Recap modello inclusione blade

Components: sono una funzionalità ispirata da Vue.js in L5.4+

Blade Components

Come usare i components

Nuova struttura layout sito

Blade Components : Differenze

Redazione

Leave a reply Annulla risposta

Top Menu

Main Menu

Super Guida Laravel: tutto ma proprio tutto su Blade

Cos’è Blade?

Blade è il templating engine di Laravel

Permette di scrivere php nel template

Ha strutture di controllo (if, for, while, switch …)

Blade permette la composizione

definiamo un master layout

definiamo un post layout

includiamo altre view, parte 1°

includiamo altre view, parte 2°

include condizionato

include compatto

Recap modello inclusione blade

Components: sono una funzionalità ispirata da Vue.js in L5.4+

Blade Components

Come usare i components

Nuova struttura layout sito

Blade Components : Differenze

Developer Consultant – Reply

Proposte Ufficiali Laravel Day 2018 targate LaraMind

Related articles

Leave a reply Annulla risposta