Skip to main content

De kunst van blade files


Nu je een prachtige navigatiebar hebt gemaakt, zou je het dus ook op alle andere pagina's de code van de hele navigatie moeten plaatsen toch? Nou nee... Daarvoor hebben we Blades!

Wat is een Blade?

Blade is een template engine dat standaard is toegevoegd in Laravel. Je kan gemakkelijk php code in jouw .blade.php file stoppen. Ook kan je bladefiles hergebruiken in andere bladefiles. Dat betekent dus ook dat je makkelijk jouw navigatiebar kan hergebruiken!

Hoe hergebruik je jouw navigatie met Blade?

Voordat we beginnen met coderen, moet je eerst begrijpen welke syntax er is in Blade.
Zie hier: Blade Templates - Laravel - The PHP Framework For Web Artisans

Om jouw navigatie makkelijk opnieuw te laten gebruiken, gaan we drie blade variabeles gebruiken:
@section - door deze variabele om een stukje code te plaatsen, geef je dat gedeelte een sectienaam
@yield - plaatst de @section op de plek waar @yield staat. Dat kan je doen door de sectionnaam in @yield te stoppen
@include - voegt een andere .blade.php file toe in de huidige .blade.php file.
@extends - breidt de .blade.php uit met een andere .blade.php file

Hoe gaat dit visueel te werk?

Omdat dit een beetje ingewikkeld is om in tekst uit te leggen, is hieronder een visuele overzicht hoe een herbruikbare navigatie eruit moet zien:

image-1663542895344.jpg

Wat doet elke file?

iets.blade.php

Daar plaats je gewoon jouw content neer die je op de pagina wil tonen. Daar verwijs je ook met je routes en controller naartoe!
Deze content zit om een @section. De reden hiervoor is zodat je in een andere file deze sectie erin kan stoppen. Zoals je ziet ga je in de reusable file (reusable.blade.php) dezelfde sectie @yield 'en. 

Maar om dat te kunnen doen, moet iets.blade.php file eerst aan de reusable.blade.php file worden verlengd. Dat doe je dus met @extends('naam van de file'). In dit geval moet er dus 'reuse' staan.

reuse.blade.php

De reuse file wordt de pagina loader. Iedere keer als een wordt ingeladen, is het de bedoeling dat deze file geladen wordt door de geëxtende file (iets.blade.php in dit geval);. Zoals je daar ziet zet je daar jouw standaard HTML structuur in.

  • Je ziet @yield('content'). Dat is dus de section die hij pakt van de iets.blade.php.
  • Je ziet @include('navigation'). Hij zoekt naar een file die navigation.blade.php heet, en voegt de code toe in reuse.blade.php file.
navigation.blade.php

Het spreekt voor zich. Jouw gemaakte navigatie moet je dus hierin zetten! Je kan ook jouw navigatie in de reuse.blade.php stoppen, maar om alles overzichtelijk te maken kan je het beste in een losse file doen.

Opdracht: maak jouw navigatie herbruikbaar!

Stappenplan:
  • Open de views folder en maak een file die reuse.blade.php (officieel moet het app.blade.php heten).
    • Voeg jouw standaard HTML structuur toe.
    • Voeg @include('navigation') en @yield('content') toe in jouw <body>
  • Maak de navigatiefile en noem het naar navigation.blade.php
    • Plaats jouw naviagtiebar in de file
  • Ga naar jouw file waar jouw content geplaatst wordt (kies bijvoorbeeld de file waar je de navigatie van de vorige opdracht hebt gemaakt).
    • Maak de file leeg en voeg @extends('reuse') (of officieel @extends('app')) toe.
    • Voeg eronder @section en @endsection. En schrijf wat content tussenin.
Wat lever je in?
  1. Jouw .blade.php file met content erin
  2. Jouw reuse.blade.php of app.blade.php file
  3. Jouw navigation.blade.php file

Gefeliciteerd! Je hebt jouw content en navigatiebar dynamisch gemaakt met Blade!

Back to top