Mivel frissítettünk az előző bejegyzésben a Laravel keretrendszer 9-es verziójára, így használjuk a továbbiakban az ott létrehozott laravel-v9 projektet és mappáját a VSCode-ban. Github projekt link a bejegyzés végén található.

Ha áttekintjük a "welcome" nézetet (resources/views mappában), amit a Laravel alapértelmezetten tartalmaz, akkor láthatjuk, hogy az egy teljes HTML dokumentum struktúráját tartalmazza, kiegészítve CSS stílusformázásokkal. Ez elég egy demó alkalmazáshoz, de a való életben ez kevés, és emiatt szükségünk van layout, vagyis keretes szerkezetű fájlra.

Ha több nézetünk van, akkor például a CSS/JS importálások redundanciája (ismételt használata) nem túl hatékony, hiszen akkor minden egyes fájlban el kellene végezni ugyanazokat az importokat, vagy például ugyanazt a menüsort minden nézetbe be kellene emelni… rettentően megnövelné ez a hiba előfordulásának lehetőségét.

Hozzunk létre a views mappában egy layout.blade.php nevű fájlt és mindent, ami a welcome nézetben volt, másoljunk át ebbe az új fájlba. A welcome és a később létrehozandó többi nézetbe pedig csak azokat fogjuk majd beleírni, ami azokat egyedivé teszi. Végignézve az új layout fájl struktúráját, a DOCTYPE, a html, a head részek nem egyediek, így azok jól használhatók egy közös sablonként. A body-ban lévő div (39. sorban, aminek a class attribútuma "max-w-6xl mx-auto sm:px-6 lg:px-8"), szóval ennek a magját (belsejét) viszont egy az egyben visszamásolhatjuk a welcome nézetbe. Így a layout fájl fogja tartalmazni a weboldalunk általános struktúráját, a welcome nézet pedig az egyedi köszöntő oldal tartalmát.

Megnézhetjük a főoldalunkat a böngészőben és egyből láthatjuk is, hogy még nem vagyunk készen, mert a welcome nézet látszódik, ugyanakkor a stílusformázások, amik a layout fájlban vannak, azok nem. Úgyhogy kikövetkeztethetjük, hogy valószínűleg a két fájl összekapcsolása még nem valósult meg, emiatt van a hiba. Oldjuk meg az összekapcsolást. A layout.blade.php releváns része így néz ki:

A @yield('content') Blade-specifikus utasítás, amit tekinthetünk egy úgynevezett "helyőrzőnek", azt jelezzük ezzel, hogy ide kerül majd be a másik nézet fájl "content" nevű "section"-je, ami ezt a layout (keretes) fájlt terjeszti ki. Ennélfogva tehát a welcome.blade.php releváns része itt van:

Az @extends('layout') Blade-specifikus utasítással indul a fájl, ez mutatja azt, hogy melyik másik nézet fájlt terjeszti ki. Fontos a névkonvenció: itt ez a "layout" arra utal, hogy a views mappában van egy "layout.blade.php", amit a welcome.blade.php ki fog terjeszteni. Itt tehát a views mappán belül egy abszolút hivatkozási útvonallal utalok a layout.blade.php fájlra, de ha tegyük fel ez a layout.blade.php fájl egy "layouts" nevű mappában lenne, akkor itt az @extends utasításon belüli paraméter így változna meg: 'layouts.layout', tehát a mappa neve kerül előre, majd pont (.) és a fájl neve (leszámítva ugye a .blade.php részt).

A @section('content') Blade-specifikus utasítás fogja közre azt a tartalmat, amit majd a kiterjesztett layout fájl @yield('content') helyőrző helyére szeretnénk beilleszteni. A 'content' paraméter gondoskodik a tartalmak összerendeléséről.

Megjegyzés: a VSCode-ban lehetőség van arra, hogy a div-eket becsukjam, így a három div-en kívül a welcome.blade.php fájl lényegi része látszódik.

Ha pedig most frissítjük a weboldalunkat a böngészőben, akkor már a várt, helyes eredményt kapjuk vissza.

Mit nyerünk például ezzel? Ha ezekután például egy új script-et akarunk hozzáadni a weboldalunkhoz, akkor elég egyetlen egy helyen megadni ennek a beemelését, méghozzá a layout fájl megfelelő helyén, mondjuk a head-ben vagy a body végén.

Továbbá, ha lenne egy másik nézetünk, ami szintén a layout fájlt terjeszti ki, és a content section-be töltene más tartalmat, akkor a layout biztosította keret megmaradhat és csak a tartalmi részek változnának. Próbáljuk is ezt ki: hozzunk létre egy új útvonal végpontot, aminek a neve (elérési útja), valamint azon belül a nézet neve is legyen contact. A web.php-ba szúrjuk be ezt:

Route::get('/contact', function () {
  return view('contact');
});

Majd hozzuk létre a views mappában a contact.blade.php fájlt és adjuk meg a tartalmát:

@extends('layout')
@section('content')
  <h1>Hello World</h1>
@endsection

Hozzuk be az oldalt és nézzük meg az eredményt: http://127.0.0.1:8000/contact

Ez működik, kiírja nekünk, hogy Hello World.

Egy egyszerűsítést próbáljunk még ki a web.php fájlban: az imént létrehozott útvonalat egyszerűbben is meg tudjuk adni:

Route::view('/contact', 'contact');

Az első paraméter ugyanúgy az útvonal URI-ja, a második pedig a nézet neve.

Az új projekt Github elérhetősége itt van: https://github.com/gludovatza/laravel-v9

A blogbejegyzéshez tartozó commit linkje pedig itt.