Osnove Laravel-aRad sa view-ovima, route-ma i layout-ima

Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž.

Školska 2017/18. Danijela Nikitin, spec .stuk.inž

Visoka škola strukovnih studija za informacione i komunikacione tehnologije

Kreiranje projekta

Kreiranje projekta je objašnjeno u prethodnoj prezentaciji primenom composer-a

Nakon te akcije u htdosc folderu se kreira folder po imenu definisanog projekta, npr. projekat-1

Šta želim pa postignem? Da učitam kreirani projekat u NetBeans

Otvaranje projekta u NetBeans-u

Nakon pokretanja NetBeans-a, izabrati File/ Open ProjectZatim pronaći folder projekta unutar htdocs npr. projekat-1NetBeans će prepoznati da je projekat u Laravelu, i

prikazati, sa leve strane, spisak svih foldera i fajlova

Folder views

View predstavlja jedan od tri elementa MVC arhitekture i namenjen je prikazu tj. ima ulogu prezentacionog sloja

View je primarno skup front-end tehnologija proširen specifičnom sintaksom Laravel-a da bi se obezbedio dinamički prikaz promenljivih

Iz tog razloga, Laravel koristi ekstenziju view-a .php Druga specifičnost je ime view-a koje se završava sa .bladeBlade je engine, koga Laravel podrazumevano koristi za rad sa

view-imaTako će ime viev-a welcome biti welcome.blade.php

Blade je jednostavan i vrlo moćan Laravel alat namenjen za kreiranje, korišćenje i upravljanje sadržajem kroz upotrebu template-a.

Folderi views i routes

Folder views se nalazi u folderu resourcesU folderu views se snimaju svi view-i unutar aplikacije

Koji će se inicilano view prikazati korisniku definiše se fajlom web.php koji se nalazi u folderu routes

Inicijalni sadržaj jeRoute::get('/', function () { return view('welcome');

});

Definisanjem rute kao u primeru, definisano je pravilo šta aplikacija treba da vrati (view('welcome’)) kada se u browser-u dođe u root sajta ('/’)

Primetiti da se ime view-a prilikom pozivanja definiše samo imenom

Fajl web.php

Ukoliko bi se ruta promenila, na način da se definiše da se dolaskom korinika u root sajta vrati string „Dobar dan!“ to bi se pisalo

Prilikom inicijalnog učitavanja dobilo bi se

Logika se nikada neće smeštati u view i ovo se nikada neće raditi na ovaj način, nego će kontroler odlučivati kada treba šta prikazati

Šta želim pa postignem? Da kreiram novi view

Kreiranje view-a

Kreiranje novog view-a se svodi na kreiranje novoh php fajla u folderu views

Kreirati fajl po imenu home.blade.php

Na isti način napraviti i drugi view contact.blade.php

Kreiranje view-a

Editovati sadržaje kreiranih view-a kao:

home.blade.php

contact.blade.php

Šta želim pa postignem? Da učitam povežem rutu sa view-om

Kreiranje route-aDa bi se kreirani view-ovi prikazali korisniku, potrebno je to set-ovati u route-

amaDa bi se po učtavanju inicijalne URL adrese prikazao novi view home, pišemo

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

});

Ukoliko se želi učitavanje view-a contact, potrebno je definisati šta treba da se nađe u URL adresi da bi se ovaj view prikazao. Definisanje proširenja URL adrese ne mora biti kao i ime view-a. Tako ukucavanjem /kontakt se učitava view contact. Naravno ovo je moguće ali nije uobičajeno jer se teže prati kod.

Route::get('/kontakt', function () {

return view('contact');

});

Primetiti da se definisano ime view-a ne vidi već samo URL adresa definisana u route-i

Učitavanje view-a home prilikom dolaska u root sajta

Učitavanje view-a home prilikom dolaska u root sajta

Učitavanje view-a contact prilikom definisanja putanje

projekat-1.com/kontakt

Učitavanje view-a contact prilikom definisanja putanje

projekat-1.com/kontakt

Kreiranje route-aSva dosadašnja obraćanja serveru su bila u formi GET

metodaU slučaju da se obraćanje vrši POST metodom, npr. kod

rada sa formama, tada i sintaksa bila

Route::post(’/login', function () {

return view(’login');

});

Kreiranje layout-a

Obzirom da svaka strana ima svoj kod, a da će neki deo kod biti zajednički, potrebno je izdvojiti taj zajednički deo koda u neki poseban fajl, pa njega na svakoj stranici naslediti i modifikovati po potrebi

Takav koncept se definiše primenom layouts.Layouts je kao template tj. kod koji se koristi na većem

broju stranaDa bi se koristio, a obzirom da pripada front-u, smestiće se

u folder views.Kreirajmo prvo poseban folder layouts, u folderu views, pa

zatim php fajl u njemu pod nazivom mojTemplate.blade.phpU njega upisati klasično HTML zaglavlje web strane

Šta želim pa postignem? Da napravim layout

Integracija layout-a

Da bi se definisani kod pojavio na drugim stranama kao njihov sastavni deo, na tim stranama treba da se implementira

To se realizuje pomoću

@extends(‘layouts/mojTemplate’)Ovako se pristupa folderu layouts, u folderu views, i fajlu

mojTemplate

Jednostruki apostrof!Jednostruki apostrof!

Kreiranje layout-aAko se pogleda source kod za http://projekat-1.com/kontakt

Videće se da je u kodu definisan samo h1 i h2 tag

Ako se sada kod @extends(‘layouts/mojTemplate’)

doda u npr. view contact,

Kako se sada vidi source kod za http://projekat-1.com/kontakt

Kreiranje layout-a

Inicijalni sadržaj view-aInicijalni sadržaj view-a

Problem: Nisu integrisani na pravo mesto!Problem: Nisu integrisani na pravo mesto!Sadržaj layout-aSadržaj layout-a

Šta želim pa postignem? Da sadržaj view-a učitam u layout

Rešenje problemaPrvo se modifikuje layout na način da dobije dinamičke

delove koje će popuniti neko drugiOvo se relizuje pomoću @yield(‘ ’)U ovom slučaju, recimo da definišemo ceo sadržaj body

elementa kao promenljivu sredinaPisali bi

@yield(‘ sredina’)

Rešenje problemaZatim u konkretnom view-u stranice unutar

@section(‘sredina’)

@endsectionDefinišemo koji je to sadržaj koji će se u toj stranici koristiti

na mestu @yield(‘ sredina’)U našem slučaju su to dva H taga

Kako se sada vidi source kod za http://projekat-1.com/kontakt

Kreiranje layout-a

Inicijalni sadržaj view-aInicijalni sadržaj view-a

Sadržaj layout-aSadržaj layout-a

Sada je sve na svom mestu!Sada je sve na svom mestu!

Šta želim pa postignem? Da dodam novi sadržaj u layout

Definisanje sadržaja u layout-uPomoću @section(‘ ’) se može definisati i označiti neki

sadržaj u layoutu

Na primer, ako u layout-u definešemo @section(‘meni’) na svakoj strani će se prikazati i sadržaj ove sekcije

Manipulacije sa @section

Sada se na svakoj strani prikazuje i definisani meni

Ako se na pojedinim stranicama želi delimična modifikacija sekcije iz layout-a, koristi se @show i @parent

@parent nasledi sve iz sekcije layout-a a ostatak je unikatan

Šta želim pa postignem? Da custom-izujem sadržaj layout-a na različitim stranama

Manipulacije sa @section

Prvo treba definisati u layout-u mesto gde se očekuje promenaOvo se radi pomoću @showZatim u view-u staviti @section i @parent

Rezultat

Upotreba sa @include

Ukoliko se pođe od toga da se dodavanjem novih sekcija, obim fajla koji se koristi kao layout, mnogo povećava, a da sadržaji pojednih sekcija možda neće biti statički sadržaj, često se koristi @include, kojim se delovi layout-a mogu izmestiti u posebne fajlove

Ako se posmatra poslednji deo koda tj. sekcij meni, ona se kompletno može izmestiti u poseban fajl

Šta želim pa postignem? Da „pocepam“ layout na manje delove

Upotreba sa @include

Kreirajmo novi folder npr. inc unutar foldera viewsKreirajmo u njemu fajla meni.blade.phpAko u njega iskopiramo celu sekciju iz layout-a imamo

Upotreba sa @include

Obzirom da je sada deo koda iz layout-a premešten u poseban fajl inc.meni potrebno ga je učitati na mesto gde je bio

Ovo se realizuje pomoću @includeTako se postiže isti efekat kao i kada je sekcija bila ovde

Osnove Laravel-aRad sa view-ovima, route-ma i layout-ima

Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž.

Školska 2017/18. Danijela Nikitin, spec .stuk.inž

Visoka škola strukovnih studija za informacione i komunikacione tehnologije