De templating engines van Laravel ondersteunen React, Vue en andere bibliotheken. Toch houden developers van de robuuste mogelijkheid van de Laravel Blade engine om snel modulaire en herbruikbare views te maken. Met Blade kun je moeiteloos layouts uitbreiden, secties definiëren en controlestructuren gebruiken om datagestuurde inhoud te genereren.

Dit praktische artikel onderzoekt wat Blade is, hoe het werkt en hoe het je Laravel applicaties verbetert.

Alles wat je nodig hebt om Laravel Blade te gebruiken

Laravel Blade is de standaard templating engine voor het Laravel framework. Hiermee kun je variabelen, loops, voorwaardelijke verklaringen en andere PHP functies rechtstreeks in je HTML code gebruiken. Om Blade bestanden te maken, definieer je eenvoudigweg Blade views door bestanden aan te maken met de extensie .blade.php in de resources/views directory van je Laravel project en vervolgens structureer je je gewenste dynamische pagina’s in deze bestanden.

Waarom zou je Blade gebruiken?

Een belangrijk voordeel van Blade is zijn modulaire codeorganisatie. Blade helpt je om je code te organiseren in herbruikbare modules die je gemakkelijk kunt toevoegen, verwijderen of bijwerken zonder de rest van je applicatie te beïnvloeden.

Code encapsulation is een ander voordeel van Blade. Blade helpt functies in te kapselen, waardoor testen, debuggen en codeonderhoud beter beheersbaar worden. Deze aanpak komt grotere applicaties ten goede omdat ongeorganiseerde applicaties snel moeilijk te beheren kunnen worden.

Blade’s templating engine is high-performance en het snelste PHP framework dat we hebben getest. De engine compileert al je blade views in gewone PHP code en slaat ze op in de cache totdat je ze aanpast. Deze aanpak zorgt voor snellere rendering en betere prestaties.

 

Zo gebruik je Laravel Blade

In deze tutorial maken we een Laravel applicatie om Blade templates in actie te ervaren. Leer om blade layouts te definiëren en uit te breiden, gegevens door te geven tussen blade views, de verschillende beschikbare controlestructuren te gebruiken en je eigen blades te maken.

Vereisten

Om deze tutorial te kunnen volgen, moet je over het volgende beschikken:

  • Voorkennis van PHP
  • Composer geïnstalleerd. Controleer of Composer op je systeem staat door het volgende uit te voeren composer -V

Bekijk de volledige code van deze tutorial voor begeleiding tijdens het werken.

De Laravel applicatie maken

Om een voorbeeld Laravel applicatie te maken, voer je uit:

composer create-project laravel/laravel my-app

Volg de instructies op je terminal om het maken van de app af te ronden.

Ga vervolgens naar de app directory en serve deze met dit commando:

cd my-app
php artisan serve

Klik op de link in de terminal om de Laravel Welcome pagina in je browser te openen.

 

De layout definiëren

Met layouts kun je delen van je webapplicatie configureren zodat ze op meerdere pagina’s te zien zijn. Als je applicatie bijvoorbeeld een consistente navigatiebalk en footer heeft voor alle pagina’s, is het efficiënter om die één keer te maken dan ze voor elke pagina opnieuw te bouwen.

Voordat je stap voor stap de instructies doorloopt, kun je het volgende voorbeeld bekijken.

De code voor het maken van websites zonder layout staat hieronder. Het zorgt ervoor dat je de code van je navbar en footer voor elke pagina opnieuw moet schrijven.

<!-- Page 1 -->
<nav>. . . </nav>
  Content for page 1
<footer> . . . </footer>
<!-- Page 1 -->
<nav>. . . </nav>
  Content for page 2
<footer> . . . </footer>

In plaats daarvan kun je je applicatie eenvoudig opbouwen met layouts om dezelfde onderdelen in één codeblok te delen:

<!-- Main layout code -->
<nav>. . . </nav>
{slot}
<footer> . . . </footer>

Als je eenmaal je layout hebt gedefinieerd, kun je deze op elke pagina gebruiken die je maar wilt:

<!-- Page 1 or Page n -->
<main-layout>
  Content for page n
</main-layout>

In oudere Laravel versies moest je layouts maken met behulp van template inheritance. Maar toen het bedrijf de component functie toevoegde, werd het veel gemakkelijker om robuuste layouts te maken.

Om een nieuwe layout te maken met Laravel Blade, voer je eerst dit commando uit om het component van de layout te maken:

php artisan make:component Layout

Dit commando genereert een nieuw layout.blade.php bestand in een nieuwe map genaamd components in de resources/views/ directory. Open dat bestand en plak deze code:

<html>
  <head>
    <title>{{ $title ?? 'Example Website' }}</title>
    <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
  </head>
  <body>
    <nav>
      <h3>Welcome to my website</h3>
      <hr>
    </nav>
    {{ $slot }}
    <footer>
      <hr />
      © 2023 example.com
    </footer>
  </body>
</html>

Deze code maakt een layoutcomponent met een eenvoudige navbar en footer. De slot functie definieert waar de hoofdinhoud moet worden doorgegeven wanneer je je layoutcomponent uitbreidt.

De layout uitbreiden

Je kunt eenvoudig een component importeren in een blade view met de tag <x-component-name>. Deze methode is ook van toepassing op de layoutcomponent die je eerder hebt gemaakt.

Om te zien hoe het uitbreiden van de layout eruit ziet, open je het standaard bestand resources/views/welcome.blade.php en vervang je de inhoud van het bestand door deze code:

<x-layout>
  <div>
	<h1>Hello World!</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

Met deze aanpak wordt de welkomstpagina bijgewerkt om de layoutcomponent te gebruiken, terwijl een heading-element en een paragraaf met wat voorbeeldtekst als inhoud worden doorgegeven. Herlaad de link die je eerder hebt geopend om de wijzigingen te bekijken.

In je layoutdefinitie zie je dat de code titeldata rendert die standaard “Example Website” is als de code de titeldata niet doorgeeft. Je kunt deze gegevens doorgeven als named slots in je views via de code <x-slot name="slotName" /> – in dit geval <x-slot name="title" />. Werk het bestand welcome.blade.php bij met de onderstaande code en laad de pagina opnieuw:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <div>
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

Voeg vervolgens wat styling toe om het uiterlijk van je app te verbeteren. Maak een nieuw app.css bestand in de map /public/css en plak de code uit dit bestand.

Met al deze updates zou je de volgende output moeten zien als je een voorbeeld van je applicatie bekijkt op http://127.0.0.1:8000/.

Hallo wereld
Hallo wereld

Backend data opnemen

In het vorige voorbeeld heb je eenvoudig gegevens gedeeld tussen componenten en views via slots. Er zijn echter betere benaderingen voor het laden van gegevens vanuit een database of andere externe source.

Hierbij kun je de gegevens rechtstreeks vanuit je routerdefinitie laden en doorgeven en ze openen zoals je in het vorige voorbeeld een named slot hebt geopend. Open daarvoor het bestand routes/web.php en vervang de inhoud door deze code:

<?php
use IlluminateSupportFacadesRoute;

Route::get('/', function () {
  $name = "John Doe";
  return view('welcome', ['name' => $name]);
});

In de bovenstaande code heb je je webroute bijgewerkt om de naam "John Doe" door te geven aan de welcome view. Open deze waarde nu op deze manier in je blade view:

<div>
  Hello, {{ $name }}
   <!-- Outputs: Hello, John Doe -->
</div>

Je kunt deze methode gebruiken om gegevens uit een database te laden. Stel bijvoorbeeld dat je een to-dos tabel hebt die een to-do lijst bevat. Gebruik de DB facade om deze to-dos te laden en door te geven aan je view:

<?php
use IlluminateSupportFacadesDB; // Import DB Facade
use IlluminateSupportFacadesRoute;

Route::get('/', function () {
  $todos = DB::table('todos')->get();
  return view('welcome', ['todos' => $todos]);
});

Als je echter geen database hebt, werk dan de web entry route bij om een array van statische to-dos door te geven. Open het bestand routes/web.php en werk de standaardroute (/) bij met de onderstaande code:

Route::get('/', function () {
  $todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
  return view('welcome', ['todos' => $todos]);
});

Vervang de inhoud van het bestand welcome.blade.php door de onderstaande code om toegang te krijgen tot de to-dos als een gecodeerde JSON array.

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <p>{{ json_encode($todos) }}</p>
    <!-- Output:  ["Learn Laravel","Learn Blade","Build Cool Stuff"] -->
</x-layout>

Control shortcuts gebruiken

De Templating engine van Blade ondersteunt ook meerdere directives om verschillende gegevenstypes voorwaardelijk weer te geven. Om bijvoorbeeld door de geretourneerde to-dos array te gaan die je hebt doorgegeven aan je welcome view, pas je een foreach loop toe door de volgende code in het bestand welcome.blade.php te plakken:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <ul>
    @foreach ($todos as $todo)
      <li>{{ $todo }}</li>
    @endforeach
  </ul>     
</x-layout>

Deze wijziging zou je to-dos in een ongeordende lijst moeten weergeven, zoals in de schermafbeelding hieronder.

To-dos in een ongeordende lijst
To-dos in een ongeordende lijst

Gebruik de directives @if, @elseif, @else en @endif om een blok voorwaardelijke commando’s te maken. Bijvoorbeeld:

@if (count($todos) === 1)
  <p>I have one task!</p>
@elseif (count($todos) > 1)
  <p>I have multiple tasks!</p>
@else
  <p>I don't have any tasks!</p>
@endif

Vervang de inhoud van het bestand welcome.blade.php door bovenstaande code. De verschillende directives if–else tellen de taken en geven een custom bericht weer voor verschillende scenario’s. Als je meer dan één taak in je to-dos array hebt, zou je de uitvoer “I have multiple tasks!” in de browser moeten zien.

Je kunt meer ondersteunde directives vinden in de documentatie van Laravel.

Een custom extensie maken

Je kunt ook een custom directive schrijven, vergelijkbaar met het vorige voorbeeld. Om deze techniek te verkennen, maak je een custom text-truncating directive.

Maak eerst een nieuwe serviceprovider door uit te voeren:

php artisan make:provider TruncateTextServiceProvider

Dit commando genereert een nieuw serviceprovider bestand op app/Providers/TruncateTextServiceProvider.php. Open dit bestand en vervang de inhoud door:

<?php
namespace AppProviders;

use IlluminateSupportFacadesBlade;
use IlluminateSupportServiceProvider;

class TruncateTextServiceProvider extends ServiceProvider
{
  public function register()
  {
    //
  }
  public function boot()
  {
    Blade::directive('truncate', function ($expression) {
      list($text, $length) = explode(',', $expression);
      return "<?php echo Str::limit($text, $length); ?>";
    });
  }
}

De code importeert de Blade facade en definieert een nieuwe custom directive met de naam @truncate. De directive accepteert twee argumenten: $text en $length. Het gebruikt de methode Str::limit() om de tekst af te korten tot de opgegeven lengte.

Tenslotte registreer je de serviceprovider door hem toe te voegen aan de providers array in het configuratiebestand config/app.php:

'providers' => [
  // Other service providers
  AppProvidersTruncateTextServiceProvider::class,
],

Gebruik de custom directive in je Blade templates (welcome.blade.php) door deze te callen via de @truncate syntaxis.

<div>
  @truncate('Lorem ipsum dolor sit amet', 10)
    <!-- Outputs: Lorem ipsu... -->
</div>

 

Samenvatting

Dit artikel onderzocht hoe Laravel Blade je in staat stelt om je ontwikkelproces te stroomlijnen terwijl je modulaire en herbruikbare views voor webapplicaties maakt. Maar je Laravel ontwikkelingsreis zou daar niet moeten eindigen.

De infrastructuur die je applicatie host is net zo belangrijk voor je succes als je lokale ontwikkelproces. Om je Laravel applicatie naar het volgende niveau te tillen, heb je een betrouwbaar hostingplatform nodig dat de eisen aankan.

Kinsta optimaliseert hostingoplossingen voor prestaties, beveiliging en schaalbaarheid, zodat je je applicatie kunt laten groeien in de best mogelijke omgeving. Deploy je Laravel app op Kinsta om het zelf te ervaren.

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.