3. diel - Prvé aplikácie v Laravel

Vitajte u ďalšej lekcie on-line kurzu o tvorbe webových aplikácií v PHP frameworku Laravel. V dnešnom tutoriále prakticky nadviažeme na predchádzajúce lekciu, Inštalácia Laravel a sprevádzkovanie projektu . Ukážeme si tvorbu prvý jednoduché aplikácie a vysvetlíme si jej základnú štruktúru. Pokračujeme teda v projekte z minula.

Voľba aplikácie

Jedna z aplikácií, na ktoré si môžeme demonštrovať úplné základy a je veľmi jednoduchá, je kalkulačka, ktorej screenshot vidíte nižšie. Zámerne som vybral na začiatok kalkulačku, pretože sa zatiaľ nebudeme musieť starať o databáze a konfigurácii. Namiesto toho si však krátko ukážeme tie najdôležitejšie komponenty pre vývoj v Laravel frameworku. Zaoberať sa nimi do hĺbky budeme až v nasledujúcich lekciách.

Tvorba kalkulačky

Ako sme si opisovali v prvej lekcii, Laravel je v základe postavený na MVC architektúre. Z tej teraz tiež musíme vychádzať. Tvorbu našej kalkulačky teda začneme od modelu, aby sme si najprv vytvorili dáta pre pohľad a metódy, ktoré môže kontrolér potom ihneď využiť.

Model

Model si môžeme jednoducho vygenerovať cez príkazový riadok / terminál v zložke s naším projektom. Do príkazového riadka otvorenom v priečinku s projektom vložíme nasledujúci príkaz:

php artisan make:model Calculator

Príkaz na vygenerovanie modeli, rovnako ako aj ďalšie príkazy, ktoré dnes použijeme, má veľa možností. Môžeme napríklad vygenerovať CRUD kontrolér k danému modelu. Keďže to ale nie je pre nás teraz podstatné, budeme sa tým zaoberať až ďalej v kurze.

Vygenerovaný model Calculator umiestnený v priečinku app/ vyzerá nasledovne:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Calculator extends Model
{
    //
}

Model v Laravel frameworku z väčšiny prípadov zastupuje databázovú tabuľku, preto modely už v základe dedí z triedy Model, ktorá obsahuje premenné pre definovanie rôznych atribútov a hodnôt a zároveň nám poskytuje objektovo relačné mapovanie pre prácu s databázou. Keďže ale naša kalkulačka nebude prepojená s databázou, môžeme toto dedenie odstrániť.

Teraz si definujeme metódy pre 4 základné operácie - sčítanie, odčítanie, násobenie a delenie. Náš model bude vyzerať nasledovne:

<?php

namespace App;

/**
 * Model operací kalkulačky.
 *
 * @package App
 */
class Calculator
{
    /**
     * Sečti daná čísla a vrať výsledek.
     *
     * @param  int $a
     * @param  int $b
     * @return int
     */
    public function add(int $a, int $b): int
    {
        return $a + $b;
    }

    /**
     * Odečti druhé číslo od prvního a vrať výsledek.
     *
     * @param  int $a
     * @param  int $b
     * @return int
     */
    public function subtract(int $a, int $b): int
    {
        return $a - $b;
    }

    /**
     * Vynásob daná čísla a vrať výsledek.
     *
     * @param  int $a
     * @param  int $b
     * @return int
     */
    public function multiply(int $a, int $b): int
    {
        return $a * $b;
    }

    /**
     * Vyděl bezezbytku první číslo druhým a vrať výsledek.
     *
     * @param  int $a
     * @param  int $b
     * @return int
     */
    public function divide(int $a, int $b): int
    {
        return floor($a / $b);
    }
}

Naša kalkulačka bude vedieť počítať iba v celých čísel. Túto vlastnosť zachováme aj u delenie, kedy vraciame výsledok delenie bezozbytku. A tiež ste si mohli všimnúť, že neošetrujeme delenie nulou. Správne by sme toto mali ošetriť v modeli, aby mohol byť znovu použiteľný aj na ďalších miestach aplikácie. Ku všetkému sa ale dostaneme neskôr.

Pre počítanie v celých číslach som sa rozhodol kvôli jednoduchosti (nemusíme napr. Následne zaokrúhľovať desatinné miesta čísel), ale aj kvôli tomu, že si v nasledujúcej lekcii ukážeme validačné pravidlá pre odoslané dáta (cez formulár). Jedno z nich je práve integer.

Ako ste si mohli všimnúť, použili sme tzv. TypeHinting, ktorý bol pridaný do PHP vo verzii 7. Budem ho používať iba v tejto lekcii a príležitostne aj v ďalších lekciách kvôli dependency injection. Tu ho používam kvôli úplnosti OOP v MVC a tiež kvôli tomu, že teraz chceme počítať iba v celých číslach.

Základné operácie by sme mali. Model by však mal byť rozšíriteľný a podľa MVC by sme pri zmene modelu najlepšie nemali meniť ostatné komponenty. Pridáme si teda do triedy ešte jednoduché rozhranie, ktoré nám tieto vlastnosti zaistí. To znamená, že ešte definujeme nasledujúce metódy a konštanty:

/**
 * Definice konstant pro operace.
 */
const
    ADD = 1,
    SUBTRACT = 2,
    MULTIPLY = 3,
    DIVIDE = 4;

/**
 * Vrať pole dostupných operací, kde klíč je konstanta operace
 * a hodnota název operace.
 *
 * @return array
 */
public function getOperations(): array
{
    return [
        self::ADD => 'Sčítání',
        self::SUBTRACT => 'Odčítání',
        self::MULTIPLY => 'Násobení',
        self::DIVIDE => 'Dělení',
    ];
}

/**
 * Zavolej předanou operaci definovanou konstantou a vrať její výsledek.
 * Pokud daná operace neexistuje, vrať null.
 *
 * @param  int $operation
 * @param  int $a
 * @param  int $b
 * @return int|null
 */
public function calculate(int $operation, int $a, int $b): ?int
{
    switch ($operation) {
        case self::ADD:
            return $this->add($a, $b);
        case self::SUBTRACT:
            return $this->subtract($a, $b);
        case self::MULTIPLY:
            return $this->multiply($a, $b);
        case self::DIVIDE:
            return $this->divide($a, $b);
        default:
            return null;
    }
}

Zaviedli sme konštanty pre jednotlivé operácie, metódu pre navrátenie všetkých podporovaných operácií kalkulačky spolu s ich menovkami a konečne aj spôsob výpočtu, ktorá podľa operácia spustí danú výpočtovej metódu. V praxi by boli jednotlivé výpočtové metódy samozrejme dlhší a počítali niečo zložitejšieho, ale nám to takto ako príklad bohato stačí.

Teraz sme schopní jednoducho pridať ďalšiu operáciu do modelu a nemusíme nijako upravovať ostatné komponenty. Ak by sme toto rozlíšenie podľa operácie vložili napr. Priamo do kontroleru, museli by sme pri pridanie novej operácie už vždy upraviť 2 súbory.

Aj keď sa môže zdať, že sa nejedná zrovna o najideálnejšie riešenie, v rámci nášho kurzu je toto veľmi dostačujúce a jednoduché. Zároveň vďaka tomu si môžeme neskôr ukázať vlastnosti ostatných komponentov ako je napríklad validácia formulárov.

Kontrolér

Teraz budeme potrebovať prostredníka, ktorý nám dáta zobrazí. Ako už vieme, kontrolér na základe požiadavky od užívateľa vytvorí model a vygeneruje pohľad s dátami z modelu. My budeme zatiaľ potrebovať model Calculator az neho vypísať možné operácie kalkulačky. Samotný výpočet a odovzdanie výsledku si necháme na nabudúce.

Necháme si opäť jednoducho vygenerovať kontrolér s názvom CalculatorController cez nasledujúci príkaz v termináli / príkazovom riadku z koreňovej zložky projektu:

php artisan make:controller CalculatorController

Vygenerovaný kontrolér nájdeme v zložke app/Http/Controllers/ a teraz nič neobsahuje okrem definovanie triedy s názvom CalculatorController, dedičov z Controller. Definujme si metódu pre zobrazenie formulára s kalkulačkou:

<?php

namespace App\Http\Controllers;

use App\Calculator;
use Illuminate\Http\Request;
use Illuminate\View\View;

class CalculatorController extends Controller
{
    /**
     * Zobraz formulář s kalkulačkou.
     *
     * @param  Calculator $calculator
     * @return View
     */
    public function index(Calculator $calculator): View
    {
        return view('calculator', [
            'operations' => $calculator->getOperations()
        ]);
    }
}

Ako si môžete všimnúť, naša metóda (akcie) index() pre zobrazenie formulára s kalkulačkou obsahuje parameter $calculator typu Calculator. Toto získanie inštancie modelu v parametri prebieha automaticky vďaka dependency injection, ktorá podľa uvedeného typu spozná inštanciu aké triedy chceme odovzdať. Jednoducho si tak vyžiadame, aký model potrebujeme.

Vnútri metódy voláme len helper funkciu view() s dvoma parametrami. Jeden je pre zobrazenie zatiaľ neexistujúceho pohľade s názvom calculator.blade.php. Ďalej tejto funkcii odovzdávame polia s premennými, ktoré sa odovzdajú pohľadu. Pre nás sú to zatiaľ dostupné operácie kalkulačky pre formulár v pohľade. Poďme si teraz tento pohľad vytvoriť.

Pohľad

Pohľad si už musíme vytvoriť ručne v priečinku resources/views/. Tam môžeme tiež nájsť už předvytvořený pohľad s názvom welcome.blade.php. Všimnite si, že okrem názvu pohľadu a prípony .php názov súboru tiež obsahuje .blade. Takto sa označujú pohľady používajúci Blade šablónovacích systém. Jeho základné fungovanie sme si už popísali v úvodnej lekcii.

My si vytvoríme vlastný pohľad s názvom calculator.blade.php s nasledujúcim obsahom:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Kalkulačka</title>
    </head>
    <body>
        <h1>Kalkulačka</h1>

        <form method="POST" action="/calculator">
            Operace:
            <select name="operation">
                @foreach ($operations as $operation => $text)
                    <option value="{{ $operation }}">{{ $text }}</option>
                @endforeach
            </select>
            <br />

            První číslo:
            <input type="number" name="a" value="{{ $a ?? 0 }}" />
            <br />

            Druhé číslo:
            <input type="number" name="b" value="{{ $b ?? 0 }}" />
            <br />

            <button type="submit">Spočítej výsledek</button>
        </form>

        @if (isset($result))
            <p>Výsledek je: {{ $result }}</p>
        @endif
    </body>
</html>

Vývojári Laravel frameworku sa rozhodli vo verzii 6.0.0 presunúť štýly a ďalšie záležitosti front-end časti projektu do špeciálneho balíčka. Kvôli zjednodušeniu prvých lekcií sa týmto budeme zaoberať až v dieli Jednoduchý redakčný systém v Laravel - Štruktúra projektu, kedy začneme pracovať na reálne webovej aplikácii.

Ak pôjdeme krok po kroku, vytvoríme si najskôr POST formulár odkazujúce na /calculator. Túto route si nabudúce ešte vytvoríme. Vo formulári máme následne <select> element s operáciami našou kalkulačky. Pre ich vypísanie použijeme Blade notáciu @foreach (), ktorá vo výsledku nie je nič iné ako skrátená verzia <?php foreach (): ?>. Pre vypísanie premenné používame výraz dvojitých zložených zátvoriek, teda {{ }}, ktorý zobrazí a zabezpečí premenné skrze PHP funkciu htmlspecialchars() proti XSS útoku.

Ďalej vytvárame dva <input> elementy pre čísla. Tieto input boxy zobrazí premennú s číslom iba v prípade, že daná premenná existuje. Premenné budeme odovzdávať neskôr cez kontrolér pri spracovávaní formulára, preto sa nám toto ošetrovanie hodí, pretože môžeme ten istý pohľad použiť pre viac akcií. Konkrétne tu aj pre výpis výsledku, až bude formulár odoslaný.

Následne sa výsledok ukáže na konci stránky iba v prípade, že existuje premenná $result. Na toto zistenie opäť použijeme jednoduchú Blade notáciu, tentoraz však @if ().

Dostali sme sa ku koncu tejto lekcie. V budúcej lekcii, Dokončenie kalkulačky v Laravel , dokončíme kalkulačku sprevádzkovaním odoslaní formulára a tiež si ukážeme, aké jednoduché je vytvoriť validáciu pre formulár. Budete si tiež môcť stiahnuť jej zdrojové kódy pre prípad, že ste mali s niečím problém.