Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

4. díl - Dokončení kalkulačky v Nette

PHP Nette Framework Základy Dokončení kalkulačky v Nette

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

Vítejte u čtvrtého dílu seriálu tutoriálů o tvorbě webových aplikací v PHP frameworku Nette. V tomto díle navážeme na tvorbu kalkulačky z minulého dílu a dokončíme ji. Minule jsme tedy dokončili model a řekli jsme si, že se můžeme přesunout na presenter, takže bez dalšího otálení jdeme na to! :)

Presenter

V šabloně Nette webového projektu máme v složce app/presenters/ již vytvořený souborHomepagePresener.php. My ho však smažeme nebo přejmenuje a vytvoříme si zde náš vlastní CalculatorPresenter.php a v něm třídu CalculatorPresenter, která rozšiřuje Nette\Application\UI\Presenter. Tím jsme si vytvořili základní kostru presenteru, do které ještě doplníme výchozí metodu pro vykreslování šablony a ve výsledku bude tedy vypadat takto:

<?php

namespace App\Presenters;

use Nette\Application\UI\Presenter;
use App\Model\CalculatorManager;
use Nette\Application\UI\Form;
use Nette\Utils\ArrayHash;

/**
 * Presenter kalkulačky.
 * @package App\Presenters
 */
class CalculatorPresenter extends Presenter
{
    /** @var int|null výsledek operace nebo null */
    private $result = null;

    /** Výchozí vykreslovací metoda tohoto presenteru. */
    public function renderDefault()
    {
        // Předání výsledku do šablony.
        $this->template->result = $this->result;
    }
}

Jak vidíte, předáváme zde výsledek do šablony, abychom ho mohli zobrazit, ale výsledek je zatím pouze null. To ale za chvíli napravíme. ;)

Získání modelu z presenteru

K tomu, abychom získali výsledek, budeme ale potřebovat přístup k modelu. Ten se v Nette standardně zajišťuje pomocí DI (Dependency Injection) a to tak, že v konfiguračním souboru config.neon zaregistrujeme náš model jako anonymní službu (service) a pak si ho necháme injektovat do našeho presenteru. Nejdříve tedy najdeme soubor app/config/congif.neon a upravíme:

…
services:
        - App\Model\CalculatorManager
        router: App\RouterFactory::createRouter

Nyní máme několik možností, jak a kde si nechat službu injektovat, já si zvolím standardní a asi nejpoužívanější postup a to přes konstruktor presenteru. Takže naší třídy CalculatorPresenter přidáme tento kód:

/** @var CalculatorManager Instance třídy modelu pro práci s operacemi kalkulačky. */
private $calculatorManager;

/**
 * Konstruktor s injektovaným modelem pro práci s operacemi kalkulačky.
 * @param CalculatorManager $calculatorManager automaticky injektovaná třída modelu pro práci s operacemi kalkulačky
 */
public function __construct(CalculatorManager $calculatorManager)
{
    parent::__construct();
    $this->calculatorManager = $calculatorManager;
}
…

Teď máme přístup k našemu modelu přes $this->calculatorManager.

Nette formuláře v Presenterech

Nyní máme už vše potřebné pro výpočet a předání výsledku do šablony a je potřeba se zamyslet nad tím, jak budeme získávat data pro výpočet od uživatele. Odpověď je jednoduchá, přes formulář. To znamená, že si potřebujeme v presenteru zadefinovat formulář, který pak předáme do šablony a ze kterého získáme data, která předáme modelu pro výpočet a výsledek uložíme do $this->result. Nette nám pro tento účel přináší systém komponent a speciálně pro formuláře v presenterech má již připravenou třídu Nette\Application\UI\Form. Nám už jen zbývá pomocí ní zadefinovat podobu formuláře a funkci pro jeho zpracování:

/** Definice konstant pro zprávy formuláře. */const
    FORM_MSG_REQUIRED = 'Tohle pole je povinné.',
    FORM_MSG_RULE = 'Tohle pole má neplatný formát.';
…
/**
 * Vrátí formulář kalkulačky.
 * @return Form formulář kalkulačky
 */
protected function createComponentCalculatorForm()
{
    $form = new Form;
    // Získáme existující operace kalkulačky a dáme je do výběru operací.
    $form->addRadioList('operation', 'Operace:', $this->calculatorManager->getOperations())
        ->setDefaultValue(CalculatorManager::ADD)
        ->setRequired(self::FORM_MSG_REQUIRED);
    $form->addText('x', 'První číslo:')
        ->setType('number')
        ->setDefaultValue(0)
        ->setRequired(self::FORM_MSG_REQUIRED)
        ->addRule(Form::INTEGER, self::FORM_MSG_RULE);
    $form->addText('y', 'Druhé číslo:')
        ->setType('number')
        ->setDefaultValue(0)
        ->setRequired(self::FORM_MSG_REQUIRED)
        ->addRule(Form::INTEGER, self::FORM_MSG_RULE)
        // Ošetříme dělení nulou.
        ->addConditionOn($form['operation'], Form::EQUAL, CalculatorManager::DIVIDE)
        ->addRule(Form::PATTERN, 'Nelze dělit nulou.', '^[^0].*');
    $form->addSubmit('calculate', 'Spočítej výsledek');
    $form->onSuccess[] = [$this, 'calculatorFormSucceeded'];
    return $form;
}

/**
 * Funkce se vykonaná při úspěšném odeslání formuláře kalkulačky a zpracuje odeslané hodnoty.
 * @param Form $form        formulář kalkulačky
 * @param ArrayHash $values odeslané hodnoty formuláře
 */
public function calculatorFormSucceeded($form, $values)
{
    // Necháme si vypočítat výsledek podle zvolené operace a zadaných hodnot.
    $this->result = $this->calculatorManager->calculate($values->operation, $values->x, $values->y);
}

Vezmeme to hezky popořadě. První funkce je speciální funkcí pro tvorbu komponent, která se definuje jako createComponent<název_komponenty> a vrací požadovanou komponentu. Jen upozorňuji, že u této metody stačí, aby byla protected. Pokud metoda splňuje tyto podmínky, můžeme jí poté zavolat přímo ze šablony a to pomocí speciálního Latte makra control, což si za chvíli ukážeme.

Dále pár slov k samotnému formuláři. Definujeme zde celkem 4 prvky:

  1. Pole radio inputů, které slouží pro výběr operace výpočtu. Zde si můžete všimnout volání metody z modelu, která nám vrátí univerzálně všechny dostupné operace. Dále nastavujeme výchozí hodnotu na sčítání a že je povinné toho pole vyplnit.
  2. Text input pro zadání prvního čísla, kde nastavíme, že se jedná o typ inputu number, což platí pro prohlížeče podporující HTML5, dále výchozí hodnotu 0 a validační pravidlo, že musí toto pole musí být vyplněno a to pouze hodnotou celého čísla.
  3. Text input pro zadání druhého čísla, který je identický s tím prvním, pouze obsahuje navíc pravidlo, kde ošetříme dělení nulou, jak jsem slíbil. Teď by asi byla na místě diskuse, proč jsem to ošetřil tady a ne již v modelu. Samozřejmě to lze udělat, já jsem se ale rozhodl demonstrovat to, že presenter by měl zpracovat všechna data z šablony a do modelu už by měla jít jen ta data, se kterými tento model umí pracovat. Navíc zde může dojít k validaci již na straně uživatele a celkově je tento způsob efektivnější, než například vyhazovat nějaké výjimky z modelu. :)
  4. Submit button jednoduché tlačítko pro odeslání formuláře.

Nakonec se formuláři ještě předá funkce, která se volá při jeho úspěšném odeslání a do parametru dostane uživatelem zadané hodnoty. Chtěl bych zde upozornit na to, že úspěšné odeslání formuláře znamená jeho kompletní validaci na straně klienta i serveru podle zadaných pravidel tzn. že do metody calculatorFormSucceeded se dostanou už jen hodnoty, se kterými umí náš model pracovat. V této metoda pak stačí jen zavolat univerzální výpočetní funkci z modelu, předat jít potřebné hodnoty od uživatele a výsledek uložit do $this->result. Nyní je náš presenter již kompletní, ovšem cesta k němu není úplně jasná. Pojďme to teď napravit.

Routování v Nette

Jelikož jsem nahradili původní HomepagePresenter naším vlastním, musíme upravit i router, který k němu určoval cestu tj. pod jakou url ho najdeme. V Nette k tomu slouží tzv. RouterFactory a opět věřím, že ti bystřejší z vás si všimli její definice v config.neon při nastavování DI. Nyní jí potřebujeme upravit tak, aby pod výchozí url bych právě náš presenter, takže si otevřeme soubor app/router/RouterFactory.php a přepíšeme ho takto:

<?php

namespace App;

use Nette\Application\Routers\SimpleRouter;

/**
 * Router pro naší aplikaci kalkulačka.
 * @package App
 */
class RouterFactory
{
    /**
     * Vrací námi definovaný router.
     * @return SimpleRouter router
     */
    public static function createRouter()
    {
        // Nastavíme výchozí routování na náš presenter.
        return new SimpleRouter('Calculator:default');
    }
}

Nyní je tedy pod výchozí url adresou náš presenter a jeho akce default (renderDefault). Teď již zbývá poslední část skládačky a to je šablona.

Šablona (View)

Jak už bylo řešeno v první díle, Nette používá vlastní šablonovací systém - Latte. V něm si teď vytvoříme šablonu pro naši aplikaci. Jako vzor si necháme původní šablonu, jenom ji trochu upravíme. Nejdříve půjde do app/presenters/templates/ a přejmenujeme složku Homepage na Calculator. V ní se pak nachází soubor default.latte, který poslouží jako šablona pro naši akci default a my ho akorát upravíme:

{block content}
<div id="banner">
        <h1 n:block=title>Kalkulačka</h1>
</div>

<div id="content">
    <h3 n:ifset="$result">Výsledek je: {$result}</h3>
    {control calculatorForm}
</div>

<style>
...

Jak je vidět, <style> zachováme a upravíme pouze kód nad ním. Nejprve upravíme <h1>, který díky makru n:block=title slouží zároveň i jako html <title> pro celou stránku. Pak vymažeme obsah <div id="content"> a doplníme naše vypsání výsledku třeba do <h3>. Pomocí {$result} se zde zobrazí data předaná z presenteru a pomocí makra n:ifset se výsledek zobrazí pouze pokud není null. Celý definovaný formulář pak vykreslíme do šablony pomocí již zmiňovaného makra control a názvu našeho formuláře (metody createComponent*). A tím je naše práce na šabloně i na celém projektu hotová. Pokud se teď podíváte na url projektu, uvidíte zde plně funkční kalkulačku a můžete na ní vyzkoušet všechny chytáky, které vás napadnou. :)

Pokud vám není cokoli jasné, stáhněte si projekt z přílohy a projeďte si jak se data předávají z modelu do presenteru a odtud do šablony. Kódu v aplikaci tolik nemáme, po chvíli byste se v principu měli zorientovat. Pokud ani to nepomůže, určitě vám MVC/MVP objasní seriál Jednoduchý redakční systém v PHP objektově (MVC).

To je pro tento díl opravdu vše, ale nebojte, příště začneme úplně novou pořádnou aplikaci v Nette. A co to bude, to se nechte překvapit. ;)


 

Stáhnout

Staženo 546x (601.56 kB)
Aplikace je včetně zdrojových kódů v jazyce PHP

 

 

Článek pro vás napsal Jindřich Máca
Avatar
Jak se ti líbí článek?
14 hlasů
Autor se věnuje převážně webovým technologiím, ale má velkou zálibu ve všem vědeckém, nejen ze světa IT. :-)
Miniatura
Předchozí článek
První aplikace v Nette
Miniatura
Všechny články v sekci
Základy Nette frameworku
Aktivity (3)

 

 

Komentáře
Zobrazit starší komentáře (23)

Avatar
Martin Konečný (pavelco1998):9. července 23:34

Já osobně nevidím moc důvod, proč by se verifikace na straně klienta dělat neměla, pokud by nešlo o typ kontroly, že si z DB vytáhneš všechna hesla, uložíš je v JS do pole a pak zadané heslo ve formuláři kontroluješ u klienta :D

Pokud jde o drobnosti typu správná délka vstupu, správné znaky, zaškrtnutý checkbox atp., tak mě nenapadá, proč by se validace u klienta měla nevyplatit, nebo být dokonce špatná. V Nette je fajn, že to tu JS validaci generuje samo a dokonce dovoluje přidat vlastní validační pravidla.

Odpovědět  +1 9. července 23:34
Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ
Avatar
Bebbana
Člen
Avatar
Bebbana:14. září 10:32

Ahoj, vše udělané podle návodu, ale hlásí mi to tuto výjimku:

"Nette\Invalid­StateException

Found section 'router' in configuration, but corresponding extension is missing."

Prosím, poraďte. :-? ;-(

 
Odpovědět 14. září 10:32
Avatar
Bebbana
Člen
Avatar
Bebbana:14. září 10:34

Můj config.neon :

parameters:


application:
        errorPresenter: Error
        mapping:
                *: App\*Module\Presenters\*Presenter


session:
        expiration: 14 days


database:
        dsn: 'mysql:host=127.0.0.1;dbname=test'
        user:
        password:
        options:
                lazy: yes


services:
    - App\Model\UserManager
    - App\Forms\FormFactory
    - App\Forms\SignInFormFactory
    - App\Forms\SignUpFormFactory
    - App\Model\CalculatorManager
router: App\RouterFactory::createRouter
 
Odpovědět 14. září 10:34
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Bebbana
Jindřich Máca:14. září 18:31

Ahoj, jedná se s největší pravděpodobností pouze o hloupou chybu v odsazení. Před označením router:... musí totiž být stejné odsazení jako před ostatními uvedenými službami. Bohužel formát Neon je na chyby podobného druhu velmi náchylný. :-)

 
Odpovědět  +1 14. září 18:31
Avatar
Bebbana
Člen
Avatar
Odpovídá na Jindřich Máca
Bebbana:18. září 9:38

Děkuji, už mi to funguje :)

 
Odpovědět 18. září 9:38
Avatar
Tomáš Korduliak:22. září 21:31

Ahoj, po stažení a zadání číselných hodnot do kalkulačky hlásí laděnka chybu (A non well formed numeric value encountered).

Čím to může být? Děkuji moc za odpověď.

Odpovědět 22. září 21:31
Každý další den je výzvou poznávat nové věci
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Tomáš Korduliak
Jindřich Máca:23. září 23:37

Ahoj, chyba je nejspíše způsobena kompatibilitou starší verze Nette, ve které je psaný seriál, a nového PHP 7. Nette totiž PHP 7 podporuje, ale až od novější verze. :)

 
Odpovědět  +1 23. září 23:37
Avatar
Renko Frick
Člen
Avatar
Renko Frick:25. září 13:05

kua :-/ani mne to vobec nejde. skopiroval som si kalkulacku, spustil a:

Nette\DI\Servi­ceCreationExcep­tion

Method App\RouterFac­tory::createRou­ter() used in service 'routing.router' is not callable

 
Odpovědět 25. září 13:05
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Renko Frick
Jindřich Máca:25. září 20:33

Ahoj, tohle bývá dost často kvůli cache, zkoušel jsi ji celou smazat? :)

 
Odpovědět 25. září 20:33
Avatar
Renko Frick
Člen
Avatar
Odpovídá na Jindřich Máca
Renko Frick:2. října 12:45

prisiel som na to, com to bolo :-D
v tutorialy bolo spomenuty (alebo je pridany) presenter CalculatorPre­senter. ja som vyrobil novy a nechal som v adresary ten povodny - HomePresenter. ten to robil ;)
ked som ho vymazal, je to OK ;)
diky za ochotu

Editováno 2. října 12:46
 
Odpovědět  +1 2. října 12:45
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 10 zpráv z 33. Zobrazit vše