Nawigacja
Laravel, widoki
Witaj w kolejnej części kursu Laravel. W ostatnim wpisie pokazałem Ci podstawy routingu oraz starałem się wytłumaczyć co to w ogóle jest ten routing. W dzisiejszej części wytłumaczę czym są widoki, dlaczego powinieneś ich używać oraz jakie dają Ci korzyści. Pokaże to na przykładzie małej aplikacji, którą napiszę w trakcie przedstawiania kolejnych części frameworka Laravel. Jaką aplikację przedstawię? Niestety nie wprowadziłem jeszcze chociażby bazy danych więc pole do popisu jest zawężone. Pomyślałem, że napiszę aplikację pozwalającą na szybkie skrócenie adresu URL. Przy okazji pokażę też jak zainstalować dodatkowe pakiety przez composer. Zaczynajmy!
Czysty projekt
Na początek będziemy potrzebować utworzyć nowy projekt. Jeśli nie pamiętasz jak to zrobić, wróć po prostu do jednego z poprzednich plików. Ja już to zrobiłem i mój projekt leży w katalogu ~/Documents/secondProject. Na razie jest całkowicie defaultowy. Jeśli i Ty już masz czysty projekt: przejdźmy do zastanowienia się jak będzie wyglądał nasz skracacz linków.
Projektowanie aplikacji
Nazwa nagłówka jest trochę na wyrost, ale nieważne. Zacznijmy od zaprojektowania interfejsu naszej nowej aplikacji, potem będziemy się martwić implementacją. Podaję przykładowy projekt interfejsu. Widać, że jest tylko jedna funkcja, która ma działać. Będziemy używać widoków, a więc na początek pokrótce napiszę czym są widoki. Widoki to nic innego jak pliki .php, które składają się głównie z kodu html. Na szczęście do tych plików można dodawać zmienne, pętle itd. W Laravel istnieje silnik szablonów nazywający się Blade. Posiada on bardzo prostą składnie:
// Wyświetlenie zmiennej
{{ $zmienna }}
// Wyświetlenie zmiennej escape'ując (??;D) znaki specjalne
{{{ $zmienna }}}
// Wyświetlenie zmiennej jeśli jest ustawiona, jeśli nie, tekst alternatywny
@if (isset($zmienna))
{{$zmienna}}
@else
Zmienna nie jest ustawiona
@endif
// Pętla foreach, analogicznie while i for
@foreach ($zmienna as $i)
{{$i}}
@endforeach
// Wczytanie innego szablonu
@include('nazwaszablonu')
System szablonów Blade posiada jeszcze kilka bardzo fajnych opcji, o których powiem potem. Na początek warto wiedzieć, że pliki z szablonami zapisujemy w katalogu app/views/. Stwórzmy sobie przykładowy widok:
<meta charset="utf-8" />Nauka widoków</pre>
<h1>Mój pierwszy szablon</h1>
<pre>
Zapisz taki plik w katalogu app/views pod nazwą na przykład index.blade.php (to jest wymagane rozszerzenie, blade.php. Teraz przypomnij sobie lekcję o route’ach, zrobimy tak, aby dla strony głównej wyrenderował (wyświetlił) się nasz nowo utworzony widok. Do tego istnieje konstrukcja return View::make(‚nazwa_widoku’).
Route::get('/', function(){
return View::make('index'); // jeśli plik się nazywa index.blade.php
});
Nie podajemy rozszerzenia! Poza tym jeśli mielibyśmy w views podkatalog, to rozłączamy podkatalogi kropką. Na przykład jeśli ścieżka do pliku widoku byłaby: app/views/blog/index.blade.php – to podajemy w kodzie:
return View::make('blog.index');
To na prawdę proste i intuicyjne, szybko przywykniesz. Wyrenderuj więc nasz pierwszy widok. Powinieneś zobaczyć po prostu ten kod HTML (wyrenderowany przez przeglądarkę). Oczywiście zrobisz to poprzez wejście w przeglądarce na katalog główny projektu.
Kolejną ważną rzeczą jaką warto wiedzieć o widokach są parametry do nich przekazywane. Spójrz na poniższy kod:
// app/route.php
Route::get('/', function(){
$some_var = "blablabla";
return View::make('index', ['name' => $some_var ]);
});
// app/views/index.blade.php</pre>
<h1>{{ $name }}</h1>
<pre>
Nie jest zbyt trudno odgadnąć co robi dany kod. Po prostu przekazujemy do widoku zmienną (której to zmiennej możemy zmienić nazwę). Zasada jest taka, że w tablicy jako klucz występuje nazwa, pod jaką będzie widziana zmienna w widoku, a jako wartość -> ta właśnie zmienna. Możemy przekazywać więcej niż jedną zmienną po prostu dodając do tablicy kolejne pary klucz->wartość.
Masz teraz podstawowe pojęcie o widokach. Kończę teraz pierwszą część tego wpisu, zostawiając Cię z zadaniem zaprojektowania widoków dla aplikacji, której projekt podałem na screenshotach. W części drugiej dodamy do aplikacji silnik! Serdecznie zapraszam w sobotę!
Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...
Zwiń
Czytaj na blogu autora...