C a C++ týden ITnetwork Flashka zdarma
Akce! Pouze tento týden sleva až 80 % na kurzy C++. Lze kombinovat s akcí 50 % bodů navíc na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!

Lekce 7 - Jednoduchý redakční systém v Laravel - Výpis článku

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Jednoduchý redakční systém v Laravel - Migrace, jsme se věnovali migracím a vytvořili jsme si modelovou vrstvu pro články. Jak jsem slíbil, dnes budeme v PHP Laravel tutoriálu pokračovat v tvorbě kontroleru a zprovozníme si zobrazení článku.

Routování

Začneme nejdříve tím, že si definujeme routy pro články. Otevřeme si soubor routes/web.php a odstraníme výchozí routu pro hlavní stránku, jelikož ji zatím v našem projektu nebudeme potřebovat. Místo ní si definujeme, že námi vytvořený CRUD kontroler má zpracovávat požadavky na články:

use Illuminate\Support\Facades\Route;

Route::resource('article', 'ArticleController');

Metodou resource() jsme definovali routy pro všechny CRUD akce kontroleru. Již víme, že to jsou akce pro přidání, zobrazení, editaci a odstraněnín článku. O výsledku se můžeme přesvědčit příkazem php artisan route:list:

+--------+-----------+------------------------+-----------------+------------------------------------------------+--------------+
| Domain | Method    | URI                    | Name            | Action                                         | Middleware   |
+--------+-----------+------------------------+-----------------+------------------------------------------------+--------------+
|        | GET|HEAD  | api/user               |                 | Closure                                        | api,auth:api |
|        | GET|HEAD  | article                | article.index   | App\Http\Controllers\[email protected]   | web          |
|        | POST      | article                | article.store   | App\Http\Controllers\[email protected]   | web          |
|        | GET|HEAD  | article/create         | article.create  | App\Http\Controllers\[email protected]  | web          |
|        | GET|HEAD  | article/{article}      | article.show    | App\Http\Controllers\[email protected]    | web          |
|        | PUT|PATCH | article/{article}      | article.update  | App\Http\Controllers\[email protected]  | web          |
|        | DELETE    | article/{article}      | article.destroy | App\Http\Controllers\[email protected] | web          |
|        | GET|HEAD  | article/{article}/edit | article.edit    | App\Http\Controllers\[email protected]    | web          |
+--------+-----------+------------------------+-----------------+------------------------------------------------+--------------+

Tabulka výše obsahuje kromě akcí s články i API akci, která je definovaná v souboru routes/api.php. Pro nás se momentálně jedná o nepodstatnou routu, proto ji budeme ignorovat.

Tabulka rout nám popisuje tyto vlastnosti:

  • Domain - Pro kterou doménu je daná routa určená. Pokud je hodnota prázdná, platí výchozí doména.
  • Method - HTTP metoda akce. Jelikož HTML formuláře nepodporují metody PUT, PATCH ani DELETE, budeme je muset trochu modifikovat. To si ale ukážeme v další lekci.
  • URI - URI akce (v našem případě část v URL adrese za doménou).
  • Name - Název akce, který se používá v kódu pro vytvoření odkazu přes helper funkci route() (například route('article.index') vygeneruje http://localhost:8000/article).
  • Action - Metoda kontroleru zpracovávající danou akci.
  • Middleware - Výpis middlewarů, přes které požadavek projde.

Také si všimněte, že v akcích, jako je například zobrazení, je v URI definovaný parametr {article}. Pokud používáme stejný název parametru jako proměnné v metodě kontroleru, můžeme následně získat instanci článku pouze díky dependency injection, viz dále.

Předpřipravený článek

Do naší tabulky článků si ještě doplníme úvodní článek, abychom měli s čím pracovat, než cokoliv vytvoříme.

Podle oficiálního postupu bychom si měli připravit tzv. seedery. Toho vás chci ale prozatím ušetřit. Místo toho si ukážeme nový Artisan příkaz - tinker. Jedná se o PHP konzoli, přes kterou můžeme provést jakoukoliv operaci a to i s třídami frameworku. Do konzole poté vložíme následující kód, skrz který vytvoříme nový článek:

$article = new Article();
$article->title = 'Úvod';
$article->url = 'uvod';
$article->description = 'Úvodní článek na webu v Laravel frameworku.';
$article->content = '<p>Vítejte na našem webu!</p><p>Tento web je postaven na <strong>jednoduchém redakčním systému v Laravel frameworku</strong>. Toto je úvodní článek, načtený z databáze.</p>';
$article->save();

Nakonec nám metoda save() vrátí boolean hodnotu úspěchu:

Použití PHP konzole v Laravel frameworku pro vytvoření článku

Kontroler

Nyní se přesuneme ke kontroleru. Tam pouze upravíme akci show(), aby nám vracela pohled spolu s daty článku:

/**
 * Načti článek a předej jeho data do šablony.
 *
 * @param  Article $article
 * @return Response
 */
public function show(Article $article)
{
    return view('article.show', ['article' => $article]);
}

Pohledy

Abychom si článek mohli zobrazit, budeme k tomu potřebovat pohled. Předtím, než však začneme nějaký vytvářet, si prosím odstraňte vygenerovaný pohled resources/views/welcome.blade.php, my ho totiž potřebovat nebudeme :)

Šablona webu

Začneme úpravou celkového vzhledu naší aplikace. Ten bude zajišťovat hlavní pohled base.blade.php:

<!DOCTYPE html>
<html lang="cs-CZ">
    <head>
        <meta charset="utf-8" />
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <meta name="description" content="@yield('description')" />
        <title>@yield('title', env('APP_NAME'))</title>

        <link href="{{ asset('css/app.css') }}" rel="stylesheet" />

        <script src="{{ asset('js/app.js') }}"></script>
    </head>
    <body>
        <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
            <h5 class="my-0 mr-md-auto font-weight-normal">{{ env('APP_NAME') }}</h5>
            <nav class="my-2 my-md-0 mr-md-3">
                <a class="p-2 text-dark" href="#">Hlavní stránka</a>
                <a class="p-2 text-dark" href="#">Seznam článků</a>
                <a class="p-2 text-dark" href="#">Kontakt</a>
            </nav>
        </div>

        <div class="container">
            @if ($errors->any())
                <div class="alert alert-danger mb-4">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @yield('content')

            <footer class="pt-4 my-md-5 border-top">
                <p>
                    Ukázkový tutoriál pro jednoduchý redakční systém v Laravel frameworku z programátorské sociální sítě
                    <a href="http://www.itnetwork.cz" target="_blank">itnetwork.cz</a>
                </p>
            </footer>
        </div>

        @stack('scripts')
    </body>
</html>

Jak již víme, Laravel automaticky importuje CSS framework Bootstrap. Toho jsem využil při tvorbě této šablony, kdy jsem si stáhl jeden z příkladů a trochu ho upravil, aby naše stránka alespoň trochu vypadala k světu :)

Na pohledu výše si také všimněte těchto Blade direktiv:

  • @yield('hodnota') - Očekává se předání jedné hodnoty z pohledu, který dědí tento pohled. Do hlavní šablony se nám tak např. předá titulek z šablony aktuální podstránky. Můžeme definovat i výchozí hodnotu, toho využíváme zrovna u titulku stránky. Hodnota bloku se přiřazuje Blade direktivami @section (popř. @endsection).
  • @stack - Jedná se o kolekci zásobník na rozdíl od @yield. To se nám hodí pro přidávání skriptů, jelikož je můžeme předávat ve více pohledech pro jednu stránku. Do zásobníku se přidávají hodnoty pomocí Blade direktiv @push (popř. @endpush)

Zobrazení článku

V pohledu pro zobrazení článku, který si vytvoříme ve složce resources/views/article s názvem show.blade.php, budeme dědit naší hlavní šablonu a následně využijeme bloků, které jsme si definovali:

@extends('base')

@section('title', $article->title)
@section('description', $article->description)

@section('content')
    <h1>{{ $article->title }}</h1>
    {!! $article->content !!}
@endsection

Jelikož framework nás chrání před XSS útokem pomocí escapování vypsaného textu, musíme pro výpis obsahu článku použít {!! !!} namísto {{ }}, protože obsahuje i HTML kód.

Pokud si však nyní zkusíme zobrazit náš úvodní článek přes stránku webu /article/uvod, dostaneme chybu 404 i přes to, že vše vypadá funkčně. Kde je tedy chyba?

Definování atributu pro parametr routy

Laravel ve výchozím nastavení získává data z databáze pomocí jejich ID. Pro zobrazení úvodního článku bychom museli použít adresu /article/1. Jedná se však o nechtěné chování aplikace, jelikož každý náš článek má svojí unikátní slovní URL a toho chceme využít.

Aby se aplikovala hodnota url článku v routách používající model Article (parametr {article}), budeme muset v našem modelu přepsat obsah metody getRouteKeyName(), která se dědí z třídy Model:

/**
 * Vrať název atributu, podle kterého se získává článek z parametru routy.
 *
 * @return string
 */
public function getRouteKeyName()
{
    return 'url';
}

Nyní při navštívení stránky /article/uvod uvidíme náš úvodní článek:

Zobrazení úvodního článku v PHP frameworku Laravel

Úplný základ článků máme zprovozněný. V příští lekci, Jednoduchý redakční systém v Laravel - Tvorba článků, půjdeme zase o něco hlouběji. Podíváme se totiž na vytváření článků a zobrazení jejich seznamu v administraci.


 

Stáhnout

Staženo 9x (39.26 MB)
Aplikace je včetně zdrojových kódů v jazyce php

 

 

Článek pro vás napsal Jan Lupčík
Avatar
Jak se ti líbí článek?
2 hlasů
Autor se primárně věnuje vývoji webových stránek a aplikacích v PHP (speciálně ve frameworku Laravel) a je jedním z vývojářů komunitního módu TruckersMP.
Předchozí článek
Jednoduchý redakční systém v Laravel - Migrace
Všechny články v sekci
Laravel framework pro PHP
Miniatura
Následující článek
Jednoduchý redakční systém v Laravel - Tvorba článků
Aktivity (4)

 

 

Komentáře

Avatar
Jiří Hruška:11. června 16:08

Ahoj, při vložení předpřipraveného článku do Psy Shell hlásí, že jsem vytvořil objekt s prázdnou hodnotou a k tomu nemůže najít klásu Article. Prosím o pomoc proč tak je a jak to opravit Děkuji.

 
Odpovědět 11. června 16:08
Avatar
Odpovídá na Jiří Hruška
Jiří Hruška:11. června 16:42

Ok, odpověděl jsem si sám 8-) , nejdříve se musím dostat do souboru Article.php

$article = new App\Article

=> App\Article {#2956}

Kdyby to někdo potřeboval

 
Odpovědět 11. června 16:42
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na Jiří Hruška
Jan Lupčík:11. června 19:52

Ahoj, co používáš za operační systém a jakou verzi Laravelu máš? Na zjištění verze můžeš použít následující příkaz:

php artisan --version

Pokud totiž já zkusím vytvořit u sebe nový článek, automaticky se mi vytvoří alias:

>>> $article = new Article()
[!] Aliasing 'Article' to 'App\Article' for this Tinker session.
=> App\Article {#2930}

Každopádně asi bude nejlepší, když to ve článku upravím, aby s tím nikdo neměl potíže. :)

Odpovědět 11. června 19:52
Cokoliv a kdokoliv může jednou uspět.
Avatar
Jiří Hruška:11. června 20:19

OS Win10, prosím ještě mám otázku, vůbec mi nejdou fetchnout data, když chci na public main page udělat výpis z databáze. Je to sice banální věc, MVC znám, ale do ArticleController by měl být view ve funkci Index?

Tady máš napsanou pěknou ukázku, ale co když bych chtěl ty články zobrazovat hned na main page, kupříkladu welcome.blade.php kdybych např. neměnil view v routers web.php bylo by to všechno podobné?

Děkuji

 
Odpovědět 11. června 20:19
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na Jiří Hruška
Jan Lupčík:11. června 20:28

Hlavní stránka se vytváří v druhé polovině 11. lekce :)

Odpovědět 11. června 20:28
Cokoliv a kdokoliv může jednou uspět.
Avatar
Odpovídá na Jan Lupčík
Jiří Hruška:13. června 16:41

Děkuji, konečně jsem pochopil, jak v laravelu do sebe zapadá celá MVC architektura. Skvělé články!

 
Odpovědět  +1 13. června 16:41
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.