Laravel Blade

Laravel-ovi templating engine-i podržavaju React, Vue i druge biblioteke. Ipak, veliki broj developera daje prednost Laravel Blade-u, pre svega zbog njegove sposobnosti da brzo kreira modularne i ponovno upotrebljive prikaze (views). Blade vam tako  omogućava da lako proširite layout, definišete sekcije i koristite kontrolne strukture kako biste generisali sadržaj.

U ovom tekstu ćemo objasniti šta je Blade, kako funkcioniše i na koji način doprinosi lakšem i bezbednijem razvoju vaših Laravel aplikacija.

Sve što vam je potrebno da koristite Laravel Blade

Laravel Blade je podrazumevani templating engine za Laravel framework. Omogućava vam da koristite promenljive, petlje, kondicionale i druge PHP funkcije direktno u vašem HTML kodu. Da biste kreirali Blade fajlove, jednostavno definišite blade prikaze tako što ćete kreirati fajlove sa ekstenzijom .blade.php u direktorijumu resources/views vašeg Laravel projekta. Nakon toga je potrebno da struktuirate željene dinamičke stranice u ovim fajlovima.

Zašto da koristite Blade?

Jedna od glavnih prednosti Blade-a je njegova sposobnost da vrši modularnu organizaciju koda. Blade pomaže organizovanje vašeg koda u ponovno upotrebljive module koje možete lako dodavati, uklanjati ili ažurirati bez uticaja na ostatak vaše aplikacije.

Još jedna prednost Blade-a je enkapsulacija koda. Blade pomaže enkapsulaciju funkcija, što olakšava testiranje, otklanjanje grešaka i održavanje koda. Od ovog pristupa najveće koristi imaju prvenstveno veće aplikacije, jer bez dobre organizacije koda one brzo mogu postati teške za održavanje.

Templating engine Blade-a je bez sumnje jedan od najbržih PHP framework-a. Engine kompajlira sve vaše blade prikaze u čisti PHP kod, a zatim ih kešira sve dok ih ne izmenite. To za rezultat ima brže renderovanje i bolje ukupne performanse aplikacije.

Kako da koristite Laravel Blade

U ovom tekstu ćemo kreirati Laravel aplikaciju da bismo testirali Blade šablone u akciji. Moći ćete da definišete i proširite blade layout-e, prosledite podatke između blade prikaza, koristite različite kontrolne strukture i kreirate svoje sopstvene blade-ove.

Kako da kreirate Laravel aplikaciju

Da biste kreirali primer Laravel aplikacije, pokrenite:

composer create-project laravel/laravel moja-aplikacija

Pratite set instrukcija na vašem terminalu da biste završili pravljenje aplikacije.

Sada idite u direktorijum aplikacije i pokrenite je ovom komandom:

cd moja-aplikacija
php artisan serve

Kliknite na link u terminalu da biste otvorili Laravel Welcome stranicu u vašem browseru.

Kako da definišete layout

Layout-i vam omogućavaju da konfigurišete sekcije vaše web aplikacije koje ćete deliti između više stranica. Na primer, ako vaša aplikacija koristi isti navigacioni meni i footer na svim stranicama, efikasnije je kreirati ih jednom i koristiti na svakoj potrebnoj stranici, nego kreirati ih odvojeno za svaku stranicu.

Pre nego što krenemo dalje, pogledajte sledeći prikaz strukture.

Ispod je prikazan kod za kreiranje web sajtova bez layout-a. U slučaju da koristite ovakav kod, moraćete ponovo da pišete kod za navigacioni meni i footer za svaku stranicu na kojoj želite da ih koristite.

<!-- Stranica 1 -->
<nav>. . . </nav>
Sadržaj za stranicu 1
<footer> . . . </footer>

<!-- Stranica 2 -->
<nav>. . . </nav>
Sadržaj za stranicu 2
<footer> . . . </footer>

Umesto toga, možete lako struktuirati vašu aplikaciju koristeći layout-e kako biste u jednom bloku koda mogli da delite iste komponente:

<!-- Glavni kod layout-a -->
<nav>. . . </nav>
{slot}
<footer> . . . </footer>

Kada ste definisali vaš layout, možete ga koristiti na bilo kojoj stranici koju želite:

<!-- Stranica 1 ili Stranica n -->
<main-layout>
Sadržaj za stranicu n
</main-layout>

U starijim verzijama Laravel-a, morali ste da kreirate postavke tako što biste koristili nasleđivanje template-a (template inheritance). Međutim, kada je dodata mogućnost kreiranja komponenti, postalo je mnogo lakše napraviti veće i složenije layout-e.

Da biste kreirali nov layout pomoću Laravel Blade-a, prvo treba da pokrenete sledeću komandu:

php artisan make:component Layout

Ova komanda generiše novi fajl layout.blade.php lociran u novom folderu nazvanom components u resources/views/ direktorijumu. Otvorite taj fajl i nalepite ovaj kod:

<html>
<head>
<title>{{ $title ?? 'Primer web sajta' }}</title>
<link rel="stylesheet" href="{{ asset('/css/app.css') }}">
</head>
<body>
<nav>
<h3>Dobrodošli na ovaj web sajt</h3>
<hr>
</nav>
{{ $slot }}
<footer>
<hr />
© 2024 nekisajt.rs
</footer>
</body>
</html>

Ovaj kod kreira komponentu layout-a koji ima jednostavan navigacioni meni i footer. Funkcija slot definiše gde prosleđujete glavni sadržaj kada proširite svoju layout komponentu.

Kako proširiti layout

Možete lako importovati komponentu u Blade prikaz koristeći tag <x-naziv-komponente>. Ovaj metod takođe možete da primenite i za layout komponentu koju ste kreirali ranije.

Da biste videli kako izgleda proširivanje layout-a, otvorite podrazumevani resources/views/welcome.blade.php fajl i zamenite sadržaj tog fajla sledećim kodom:

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

Ovaj pristup ažurira welcome stranicu da koristi layout komponentu dok prosleđuje heading element i paragraf sa lorem ipsum tekstom kao sadržajem. Da biste videli promene, otvorite ponovo link koji ste ranije otvorili.

Obratite pažnju da je kod renderovao podatke naslova (title) koji će podrazumevano biti „Primer web sajta“ ako kod ne prosledi podatke naslova. Ove podatke možete proslediti kao nazvane slotove u vašim prikazima putem koda <x-slot name=“ime_slota“ /> — u ovom slučaju, <x-slot name=“title“ />. Ažurirajte welcome.blade.php fajl sa kodom prikazanim ispod i osvežite stranicu:

<x-layout>
<x-slot name="title">
Početna | Primer Web Sajta
</x-slot>
<div>
<h1>Zdravo svete!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
<button class="btn">Počnite</button>
</div>
</x-layout>

Zatim, dodajte neki stil (pomoću CSS koda) da biste poboljšali izgled vaše aplikacije.

Sa svim ovim ažuriranjima, trebalo bi da vidite prozor kao na slici ispod (na localhost adresi http://127.0.0.1:8000/)

Kako uključiti i backend podatke

U prethodnom primeru, lako ste putem slotova delili podatke između komponenti i prikaza. Međutim, postoje i bolji pristupi za učitavanje podataka iz baze podataka ili drugog udaljenog izvora.

U tom slučaju, učitajte i prosledite podatke direktno iz definicije vašeg rutera i pristupite im kao što ste pristupali nazvanom slotu u prethodnom primeru. Da biste to uradili, otvorite routes/web.php fajl i zamenite njegov sadržaj kodom ispod:

<?php use Illuminate\Support\Facades\Route; 
Route::get('/', function () { 
$name = "Petar Petrovic"; return view('welcome', ['name' => $name]); 
});

U kodu iznad, ažurirali ste vaš web rutu da prosledi ime „Petar Petrović“ do welcome prikaza. Sada pristupite ovoj vrednosti u vašim Blade prikazima na sledeći način:

<div>
Zdravo, {{ $name }}
<!-- Ispis: Zdravo, Petar Petrović -->
</div>

Ovaj metod možete koristiti za učitavanje podataka iz baze podataka. Pretpostavimo da imate ‘’to-do’’ tabelu koja sadrži listu obaveza. Koristite DB fasadu da biste učitali ove to-dos i prosledite ih vašem prikazu:

<?php use Illuminate\Support\Facades\DB; // Uvezi DB fasadu 
use Illuminate\Support\Facades\Route; 
Route::get('/', function () { $todos = DB::table('todos')->get(); 
return view('welcome', ['todos' => $todos]); });

Ako nemate bazu podataka, ažurirajte web ulaznu rutu da prosledi niz statičkih to-dos. Otvorite routes/web.php fajl i ažurirajte podrazumevanu (/) rutu sa kodom ispod:

Route::get('/', function () {
$todos = ['Učiti Laravel', 'Učiti Blade', 'Napraviti Kul Stvari'];
return view('welcome', ['todos' => $todos]);
});

Zamenite sadržaj welcome.blade.php fajla sa kodom ispod da biste pristupili to-dos kao kodiranom JSON nizu.

<x-layout>
<x-slot name="title">
Početna | Primer Web Sajta
</x-slot>
<p>{{ json_encode($todos) }}</p>
<!-- Ispis: ["Učiti Laravel","Učiti Blade","Napraviti Kul Stvari"] -->
</x-layout>

Kako koristiti kontrolne prečice

Blade templating engine takođe podržava višestruke direktive za uslovno prikazivanje različitih tipova podataka. Na primer, da biste iterirali kroz niz vraćenih to-do-ova koje ste prosledili vašem welcome prikazu, primenite foreach petlju tako što ćete kod ispod zalepiti u welcome.blade.php fajl:

<x-layout>
<x-slot name="title">
Početna | Primer Web Sajta
</x-slot>
<ul>
@foreach ($todos as $todo)
<li>{{ $todo }}</li>
@endforeach
</ul>
</x-layout>

Ova promena treba da prikaže vaše to-do-ove u neuređenoj listi (unordered list).

Da biste konstruisali blok uslovnih izjava, koristite @if, @elseif, @else, i @endif direktive. Na primer:

@if (count($todos) === 1)
<p>Imam jedan zadatak!</p>
@elseif (count($todos) > 1)
<p>Imam više zadataka!</p>
@else
<p>Nemam nijedan zadatak!</p>
@endif

Zamenite sadržaj welcome.blade.php fajla sa kodom iznad. Različite if-else direktive broje to-do stavke i prikazuju prilagođenu poruku za različite scenarije. S obzirom da imate više od jednog zadatka u vašem nizu to-do-ova, trebalo bi da u browseru vidite izlaz „Imam više zadataka!“.

Možete pronaći više podržanih direktiva u Laravel dokumentaciji.

Kako da napravite prilagođenu ekstenziju

Možete napisati i prilagođenu direktivu, slično kao u prethodnom primeru. Da biste primenili ovu tehniku, kreirajte prilagođenu direktivu za skraćivanje teksta.

Prvo, napravite novog provajdera usluga pokretanjem:

php artisan make:provider TruncateTextServiceProvider

Ova komanda generiše novi fajl provajdera usluga na putanji app/Providers/TruncateTextServiceProvider.php. Otvorite ovaj fajl i zamenite njegov sadržaj sa:

<?php namespace App\Providers; 
use Illuminate\Support\Facades\Blade; 
use Illuminate\Support\ServiceProvider; 
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); ?>"; 
}); 
} 
}

Kod uvozi Blade fasadu i definiše novu prilagođenu direktivu nazvanu @truncate. Direktiva prihvata dva argumenta: $text i $length. Koristi metodu Str::limit() da skrati tekst na određenu dužinu.

Na kraju, registrujte provajder usluga dodavanjem u vaš niz provajdera u konfiguracionom fajlu config/app.php:

'providers' => [
// Drugi provajderi usluga
App\Providers\TruncateTextServiceProvider::class,
],

Koristite prilagođenu direktivu u vašim Blade šablonima (welcome.blade.php) pozivanjem putem sintakse @truncate.

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

Zaključak

U ovom tekstu smo objasnili kako Laravel Blade pomaže da optimizujete vaš proces razvoja dok kreirate modularne i ponovno upotrebljive prikaze za vaše web aplikacije.

Saznali ste na koje sve načine možete da optimizujete vaše aplikacije i web stranice i na taj način kreirate moderne i dobro organizovane layout-e.

Kakva su vaša iskustva sa Laravel Blade-om? Pišite nam u komentarima.