osnove laravel-a - webdizajn.ict.edu.rs · osnove laravel-a rad sa view-ovima, route-ma i...
TRANSCRIPT
![Page 1: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/1.jpg)
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
![Page 2: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/2.jpg)
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
![Page 3: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/3.jpg)
Šta želim pa postignem? Da učitam kreirani projekat u NetBeans
![Page 4: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/4.jpg)
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
![Page 5: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/5.jpg)
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.
![Page 6: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/6.jpg)
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
![Page 7: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/7.jpg)
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
![Page 8: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/8.jpg)
Šta želim pa postignem? Da kreiram novi view
![Page 9: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/9.jpg)
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
![Page 10: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/10.jpg)
Kreiranje view-a
Editovati sadržaje kreiranih view-a kao:
home.blade.php
contact.blade.php
![Page 11: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/11.jpg)
Šta želim pa postignem? Da učitam povežem rutu sa view-om
![Page 12: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/12.jpg)
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');
});
![Page 13: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/13.jpg)
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
![Page 14: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/14.jpg)
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');
});
![Page 15: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/15.jpg)
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
![Page 16: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/16.jpg)
Šta želim pa postignem? Da napravim layout
![Page 17: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/17.jpg)
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!
![Page 18: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/18.jpg)
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,
![Page 19: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/19.jpg)
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
![Page 20: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/20.jpg)
Šta želim pa postignem? Da sadržaj view-a učitam u layout
![Page 21: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/21.jpg)
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’)
![Page 22: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/22.jpg)
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
![Page 23: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/23.jpg)
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!
![Page 24: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/24.jpg)
Šta želim pa postignem? Da dodam novi sadržaj u layout
![Page 25: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/25.jpg)
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
![Page 26: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/26.jpg)
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
![Page 27: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/27.jpg)
Šta želim pa postignem? Da custom-izujem sadržaj layout-a na različitim stranama
![Page 28: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/28.jpg)
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
![Page 29: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/29.jpg)
Rezultat
![Page 30: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/30.jpg)
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
![Page 31: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/31.jpg)
Šta želim pa postignem? Da „pocepam“ layout na manje delove
![Page 32: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/32.jpg)
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
![Page 33: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/33.jpg)
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
![Page 34: Osnove Laravel-a - webdizajn.ict.edu.rs · Osnove Laravel-a Rad sa view-ovima, route-ma i layout-ima Dr Nenad Kojić, dipl. inž. Luka Lukić, struk. inž. Školska 2017/18. Danijela](https://reader030.vdocuments.pub/reader030/viewer/2022041302/5e11f9a9613d7a28cf2d03bc/html5/thumbnails/34.jpg)
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