Blok 1 · rozdział 3

Routing i widoki Blade

Adres w przeglądarce nie jest nazwą pliku. Wpisujesz go w routes/web.php, a HTML składasz w widoku Blade. W tym rozdziale lista czterech szczytów jest tablicą PHP. W bloku 3 zastąpisz ją bazą. Serwer z rozdziału 2 (php artisan serve) ma być włączony, a w edytorze otwarty folder korona.

Po tym rozdziale powinieneś umieć

dodać trasę GET i oddać widok;
wypisać zmienną przez {{ }} i pętlę @forelse;
odróżnić {{ }} od {!! !!};
nadać trasie nazwę i wstawić link route().

1. Pierwsza trasa

Otwórz routes/web.php. Zostaw linię <?php i use na górze pliku. Domyślną trasę / (zamknięcie w funkcji, które oddaje widok powitalny) podmień na:

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('start');
})->name('start');

Zapisz plik (Ctrl+S). Utwórz resources/views/start.blade.php — katalog views już jest:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <title>Korona Gór Polski</title>
</head>
<body>
    <h1>Korona Gór Polski</h1>
    <p>Tu zapiszesz zdobyte szczyty.</p>
    <a href="{{ route('szczyty.index') }}">Lista szczytów</a>
</body>
</html>

Nazwa widoku to ścieżka względem resources/views, z kropką zamiast katalogu i bez końcówki .blade.php. Plik szczyty/karta.blade.php wołasz jako szczyty.karta.

Link do listy zadziała za chwilę Trasę szczyty.index dodasz w podrozdziale 4. Do tego czasu strona główna może zgłosić brak trasy. Dokończ rozdział, a błąd zniknie.

2. Składnia Blade

Blade to nakładka na PHP. Przed wysłaniem do przeglądarki Laravel zamienia znaczniki na zwykły PHP.

Zapis	Znaczenie
`{{ $nazwa }}`	Wypisz wartość i zamień znaki HTML na bezpieczny tekst.
`{!! $html !!}`	Wypisz surowy HTML. Na tym kursie nie używasz tego do danych użytkownika.
`@if` / `@endif`	Warunek.
`@forelse` / `@empty` / `@endforelse`	Pętla, która ma osobną gałąź dla pustej listy.
`{{-- komentarz --}}`	Komentarz Blade. Nie trafia do HTML.
`@foreach`, `@for`, `@while`, `@switch`	Reszta pętli i wyboru. Składasz je w rozdziale 5, na stronie `/skladnia`.

Po co podwójne nawiasy Gdyby ktoś wpisał w notatce <script>, {{ }} pokaże to jako tekst. Surowy {!! !!} wykonałby taki fragment w przeglądarce. To ten sam problem co XSS z PAI.

3. Lista z tablicy

W routes/web.php dopisz drugą trasę pod trasą strony głównej. Cztery szczyty wystarczą w tym rozdziale; reszta przyjdzie z seedera. Potem utwórz katalog resources/views/szczyty i w nim plik index.blade.php.

Route::get('/szczyty', function () {
    $szczyty = [
        ['nazwa' => 'Rysy', 'pasmo' => 'Tatry', 'wysokosc' => 2499],
        ['nazwa' => 'Babia Góra', 'pasmo' => 'Beskid Żywiecki', 'wysokosc' => 1725],
        ['nazwa' => 'Śnieżka', 'pasmo' => 'Karkonosze', 'wysokosc' => 1603],
        ['nazwa' => 'Łysica', 'pasmo' => 'Góry Świętokrzyskie', 'wysokosc' => 614],
    ];

    return view('szczyty.index', [
        'szczyty' => $szczyty,
    ]);
})->name('szczyty.index');

Plik resources/views/szczyty/index.blade.php:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <title>Szczyty</title>
</head>
<body>
    <h1>Szczyty Korony</h1>
    @forelse ($szczyty as $szczyt)
        <article>
            <h2>{{ $szczyt['nazwa'] }}</h2>
            <p>{{ $szczyt['pasmo'] }} · {{ $szczyt['wysokosc'] }} m n.p.m.</p>
        </article>
    @empty
        <p>Brak szczytów na liście.</p>
    @endforelse
</body>
</html>

Odśwież http://127.0.0.1:8000/szczyty. W narzędziach przeglądarki (źródło strony) mają być nagłówki i akapity, bez @forelse.

Tablica, nie obiekt W tym rozdziale piszesz $szczyt['nazwa']. Od rozdziału 9 szczyt będzie modelem i zapis zmieni się na $szczyt->nazwa.

4. Trasa nazwana

Metoda name('szczyty.index') daje trasie stałą nazwę. W widoku link budujesz funkcją route(), nie wklejonym adresem. Gdy kiedyś zmienisz /szczyty na /korona/szczyty, linki z route() podążą za zmianą.

<a href="{{ route('start') }}">Strona główna</a>
<a href="{{ route('szczyty.index') }}">Szczyty</a>

Na liście szczytów dopisz nad nagłówkiem link route('start'). Po każdym zapisie odśwież przeglądarkę. Okno z php artisan serve zostaw włączone.

Listę tras projektu wypisuje (w drugim terminalu, w katalogu korona, bo pierwsze okno trzyma serwer):

php artisan route:list

5. Pliki na koniec rozdziału

Jeśli po drodze coś przestało działać, porównaj swoje pliki z poniższymi. Mają zostać dokładnie te adresy: http://127.0.0.1:8000 i http://127.0.0.1:8000/szczyty.

routes/web.php:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('start');
})->name('start');

Route::get('/szczyty', function () {
    $szczyty = [
        ['nazwa' => 'Rysy', 'pasmo' => 'Tatry', 'wysokosc' => 2499],
        ['nazwa' => 'Babia Góra', 'pasmo' => 'Beskid Żywiecki', 'wysokosc' => 1725],
        ['nazwa' => 'Śnieżka', 'pasmo' => 'Karkonosze', 'wysokosc' => 1603],
        ['nazwa' => 'Łysica', 'pasmo' => 'Góry Świętokrzyskie', 'wysokosc' => 614],
    ];

    return view('szczyty.index', [
        'szczyty' => $szczyty,
    ]);
})->name('szczyty.index');

W resources/views/szczyty/index.blade.php na górze treści, przed <h1>, dodaj:

<p><a href="{{ route('start') }}">Strona główna</a></p>

/ pokazuje „Korona Gór Polski” i link do listy. /szczyty pokazuje Rysy, Babią Górę, Śnieżkę i Łysicę. W źródle strony nie ma @forelse ani <?php. php artisan route:list pokazuje nazwy start i szczyty.index.

Commit

Gdy oba adresy działają, w drugim terminalu, w katalogu korona:

git add .
git status
git commit -m "Trasy i lista czterech szczytów"

W git status przed commitem nie powinno być pliku .env. Po commicie to samo polecenie pisze, że nie ma zmian do zapisania.