Kako napraviti svoju prvu web stranicu sa PHP frameworkom Laravel – Part 3 (Controllers)

U prošlom blog postu smo napokon dobili naše prve 2 stranice i naučili smo kako kreirati linkove koji pozivaju određen izgled stranice naše prve web stranice.

Sada ćemo vam pokušati što kraće i jednostavnije pokazati kako koristit controllers i zašto su nam oni bitni u Laravelu i pravljenju web stranica.

Prilikom izrade najjednostavnijih web stranica koje će imati par linkova na sebi bilo bi vam dovoljno kreirati te linkove u routes -> web.php

No, ako radite web stranicu koja je malo kompliciranija i sadržava više linkova dogodit će se da ćete zatrpati web.php i postati će vam nepregledan i prevelik, a to nam nije cilj.

Zato ćemo koristit kontrolere da rasteretimo kodove i da bolje kreiramo funkcionalnost i organiziramo našu web stranicu

 

Kreiranje našeg prvog controllera

Za kreiranje novih controllersa, modula, migracija, …. koristit ćemo konzolu fokusiranu na glavi folder naše web stranice albumos.

Kreirati ćemo trenutno 2 controllera – 1 za Albume a drugi za Autore albuma.

  • U konzoli kucajte:

php artisan make:controllers AlbumContoller --resource

  • Navedena komanda će kreirati novi fajl naziva AlbumController.php u app – > http – > controllers folderu.
  • U tom fajlu biti će vam sve već podešeno za rad sa tim controllerom. Vidit ćete da je kreirana i klasa “Class AlbumController” koja se extenda na glavni Controller.
  • Isto tako kreirane su javne funkcije njih 7: index(), create(), store(), show(), edit(), update(), delete() tako zvane CURD funkcije (Create, Update, Read, i Delete) koje ćemo mi koristit za dodavanje, updejtanje, pregled i brisanje Albuma.
  • Laravel nam je već olakšao posao i napravio je za nas prazne funkcije za albume. Sve što trebamo napraviti je povezati ih sa rutama.
  • Navedene funkcije smo dobili tako što smo na komandu u konzoli kucali –resource.

 

Da nismo kucali dodatnu riječ –resource dobili bi praznu klasu bez funkcija i mogli bi ih kreirati sami po želji.

  • index() –  tu uglavnom ide kod koji će pozvati iz baze sve “Albume”  te će poslije toga vratit prikaz koji je namijenjen listi albuma. (Malo zvuči teško ali objasnimo uskoro)
  • show() – Unutar ove funkcije ide kod koji poziva točno određeni “Album” i pozvat će izgled za prikaz samo odabranog albuma. (nismo ga kreirali još)
  • edit() – unutar te funkcije ćemo stavljati kod koji će pozivati izgled u kojem se nalazi forma za editiranje albuma
  • update() unutar ove funkcije ići će kod koji će updejtati bazu podataka sa novim unesenim podacima iz forme za editiranje albuma.
  • create() – unutar ove funkcije će ići kod koji će pozivati izgled u kojoj se nalazi forma za kreiranje albuma
  • store() – unutar ove funkcije će ići kod koji će spremati podatke koje smo unijeli iz forme za kreiranje albuma
  • delete() – ovdje ide kod za brisanje pojedinog albuma.

To sve su default funkcije koje će nam olakšati snalaženje po controlleru a i našoj web stranici.

 

Kreiranje prvog linka koji je povezan s controllerom

Znamo puno informacija a ništa se ne događa, ajmo zato na posao. Idemo povezati naš AlbumController sa rutama.

– Pošto još nismo krenuli koristit bazu podataka koristit ćemo samo index funkciju. Otvorite web.php i nađite rutu koju ste kreirali za /albumi. Kada ste ju našli označite ju i obrišite cijelu kreirati ćemo novu koja ide ovako

Route::get('/albumi', 'AlbumController@index');

 

  • Kao što vidite malo smo drugačije napisali rutu. Zapravo, naziv je ostao isti “/albumi” ali umjesto funkcije smo dodali pod navodnike ‘AlbumContoller@index’, što to znači?
  • Prvi dio prije “mankija” označava naziv kontrolora kojeg pozivamo, a drugi naziv funkcije unutar navedenog kontrolora. U našem slučaju pozivamo AlbumController i index funkciju.
  • To znači da će sada Laravel pozvati kod koji se nalazi unutar viličaste zagrade u index funkciji.
  • Idemo dodati sada kod u AlbumController.php nađite index funkciju i dodajte kod za pozivanje izgleda kao što smo imali u staroj ruti.
public function index(){
    return view('albumi');
}

 

I to je to, uspješno smo kreirali i postavili naš prvi kontrolor i povezali zasad jednu funkciju s rutama.

Znamo, zvuči dosta komplicirano, ali jednom kada se naviknete shvatit ćete koliko će vam ova stvar olakšati posao.

 

Dodavanje novog linka u routes i povezivanje sa kontrolorom i izgledom

idemo dodati još jedan link koji će nam služiti za prikaz samo jednog određenog albuma koji će izgledati ovako:

Route::get('/albumi/{id}', 'AlbumController@show');

 

  • Ova ruta poziva AlbumController i unutar njega traži i poziva funkciju show($id). Kao što smo gore napisali ova funkcija će nam prikazivat samo jedan album kojeg odaberemo
  • ID označava primary key albuma i pomoću njega tražimo točno taj album
  • Tako da kada budete kucali localhost/albumos/albumi/1 naša stranica će probati u bazi podataka pronaći album kojem je PK broj 1.
  • Unutar te funkcije će ići kod za traženje određenog albuma kojem je ID = 1 te će nakon toga vratit izgled sa podacima od tog albuma.
  • Pošto se još nismo dotakli baza podataka i migracija, napravit ćemo prikaz albuma sa lažnim informacijama za testni primjer.
public function show($id){
    $naziv = "Album broj 1";
    $autor = "Pero Perić";
    
    // nova helper funkcija compact
    return view('album.blade.php', compact('naziv', 'autor') );
}

 

  • U ovom gore kodu smo definirali ručno naziv albuma i autora. I pozvali smo izgled “album” kojeg ćemo kreirati uskoro.
  • Compact? da, nova funkcija koja će vam pomoći “poslati” podatke u vaš izgled koje ćete kasnije prikazati gdje god želite unutar HTML-a
  • Duplicirajte izgled albumi.blade.php i duplikat nazovite album.blade.php.
  • Tamo stavite ovaj kod:
<h1>Pregled albuma</h1>

<div>Naziv albuma: {{ $naziv }} </div>
<div>Autor albuma: {{ $autor}} </div>
  • Ovdje smo kreirali jednostavan html kod sa dodatkom duple vitičaste zagrade, a unutar nje se nalazi varijabla $naziv i $autor koju smo poslali preko compacta u taj naš izgled a definirali smo je u kontroloru.
  • Ako ste sve dobro napisali trebali bi dobiti ovakav izgled:

Nadam se da ste skontali sada vezu između routes, controllers i views-a. Zapravo je vrlo lagano kada skontate kako to sve radi i kako povezati.

  • Sada nam se javlja problem jer ćemo imati previše fajlova od izgleda. Zamislite sada, samo za Albume moramo imati minimum 4 komada i to za: prikaz svih albuma, prikaz određenog albuma, prikaz forme za kreiranje albuma, prikaz forme za updejtanje albuma.
  • No, pošto ćemo mi imati na web stranici i autore, i listu pjesama, potrebno je za svaki od njih kreirati izgled za sve te funkcije i eto ti već 12 fajlova.
  • Da bi izbjegli gomilanje fajlova u jednom folderu malo ćemo ih bolje preraspodijeliti.

 

Izmjene u folderu gdje držimo naše “izglede”

Pošto ćemo imati linkove za Albume, pa linkove za Autore pa kasnije još neke dodatne linkove, svi oni će imati svoj poseban dizajn koji će se pozivati kada se klikne određeni link pa nam je bitno dobro organizirati foldere  gdje će nam se nalaziti naši izgledi.

  • Unutar resource – > views foldera trenutno imamo 4 fajla: welcome.blade.php koji prikazuje početnu stranicu, albumi.blade.php koji će prikazivati sve albume, album.blade.php koji prikazuje odabrani album i  autori.blade.php koji će prikazivati sve autore.
  • Najbolje stvar kod Laravela je blade engine koji nam omogućuje imati “glavnu temu” i posebno fajlove za “sadržaj” tako da ne moramo svaki put u svakom filu pisati jedan te isti html kod za dizajn.
  • Idemo prvo kreirati naš glavni “master layout” koji će biti isti za sve stranice, a unutar njega će se mijenjati sadržaj kojeg želimo prikazati.
  • Kreirajte novi folder “layouts” unutar views foldera, ako ne postoji i unutar njega novu datoteku naziva master.blade.php i otvorite ju. (U layouts folderu će se nalaziti  za potrebe tutorijala samo taj naš fajl master.blade.php)
  • Unutar te datoteke ići će html vaše teme kojeg već imate pripremljen, ali ćemo mi za ovaj tutorijal kreirati mini temu:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Albumos</title>
</head>

<body>

<a href="{{ URL('/') }}">Početna</a> |
<a href="{{ URL('albumi') }}">Albumi</a> |
<a href="{{ URL('autori') }}">Autori</a>
<hr>

@yield('content')

</body>

</html>

 

  • {{ URL(‘/’) }} ova helper funkcija će umjesto vas kreirati link po nazivu kojem ste kreirali u rutama. Trenutno mi imamo: ‘/’, ‘albumi’ i ‘autori’. Svaki od njih će vam kreirati link http://localhost/albumos/ a nastavak ovisi kako ste dalje definirali link.
  • Ono bitno za vas je ovaj @yield(‘content’) na tom djelu će se prikazivati sadržaj kojeg budemo definirali kasnije u svakom fajlu posebno.

Idemo kreirati sada druge foldere

  • Unutar foldera view kreirajte novi folder “sites” (folder zaslužan za sve “podizglede”)
  • Opet unutar sites foldera kreirajte 3 nova foldera: albumi, autori, pocetna
  • Kopirajte sada albumi.blade.php i album.blade.php u gore folder što ste kreirali pod nazivom album
  • Isto tako kopirajte autori.blade.php u autori folder
  • Kontate lagano kako smo organizirali sada foldere da nam se negomila hrpa fajlova u jednom folderu. Sad će svaki od tih foldera sadržavati samo fajlove za izgled koji se tiče samo njih.
  • Prije nego završimo sa folderima ostaje nam preimenovanje fajlova. Znamo, stalno nešto, nikako da završimo, ali tako mora ići 😛
  • albumi.blade.php u index.blade.php, album.blade.php u show.blade.php, autori.blade.php u index.blade.php.
  • Primijetili ste da se sada fajlovi zovu kao i funkcije pa će se tako index.blade.php vezati na funkciju index() u kontroloru.
  • show.blade.php će se vezati na funkciju show() u kontroleru.

 

Ostaje nam kreiranje izgleda za početnu stranicu

  • U folderu pocetna što ste kreirali napravite novi fajl index.blade.php (Opet index :D). Svaki put kada u određenom folderu želite da se poziva “prvi” izgled on će zvati index.blade.php)

Sada unutar njega zalijepite ovaj kod:

@extends('layouts.master')

@section('content')
  Dobrodošli na našu prvu web stranicu Albumos
@endsection

 

  • @extends poziva naš glavni izgled kojeg smo nazvali master.
  • @section kod unutar njega zamjenjuje onaj dio što smo pričali gore @yield(‘content’) u našoj temi.

Ovako izgleda naša struktura foldera i fajlova (zanemarite app.blade.php – o tome ćemo u drugim blog postovima)

  • Idemo sada popraviti naše child izgleda da se prikazuju kako spada
  • Otvorite  /albumi/index.blade.php i stavite
@extends('layouts.master')

@section('content')
  <h1>Svi novi Albumi</h1>
@endsection

Isto napravite i za druge view fajlove /albumi/show.blade.php i /autori/index.blade.php i samo unutar sectiona stavite onaj prijašnji tekst kojeg smo imali.

 

Popravak pozivanja izgleda nakon reorganizacije foldera

  • Pošto smo napravili reorganizaciju foldera i fajlova za izgled morat ćemo malo popraviti view() helpere da pozivaju sada izglede
  • Idemo u AlbumController.php i sada nađite index funkciju gdje imamo return view(‘albumi’);
  • Sada ćemo malo urediti view helper da nađe naš izgled
return view('sites.albumi.index');

 

  • Sada zapravo vidite zašto smo preuredili foldere za izgled. U ovom kontroloru imamo više funkcija tipa index() ta funkcija će pozivati izgled koji se nalazi u albumi folderu a zove se isto index
  • Isto tako u show() funkciji ćemo pozivati show izgled i to ovako. Samo smo zamijenili index sa show.
return view('sites.albumi.show',compact('naziv', 'autor') );
  • Tako ćemo u daljnjim tutorijalima za svaku ovu funkciju u kontroloru pozivati izgled istog naziva kao što je i funkcija, bilo to index, show, edit, create ili nešto treće
  • Probajte sada pokrenuti u browseru vašu stranicu i pogledajte rade li linkovi i pojavljuje li vam se na svakom linku određen tekst što smo definirali u child izgledima

 

Ono što ste mogli naučiti iz ova 3 tutorijala je da:

  1. Laravel provjerava jesu li definirani linkovi u rutama web.php
  2. Kada nađe definirani link poziva controller i određenu funkciju unutar njega.
  3. U svakoj funkciji definiramo koji izgled ćemo vratit korisniku.
  4. Svaki taj izgled je vezan za našu cool master temu.

U sljedećem blog postu dotaknuti ćemo se baze podataka i tablica, kako ih kreirati pomoću migracija i kako pomoću modula povezati tablicu i controllerse.

Povezani Članci

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *