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

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

ONEbit hosting 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, První aplikace v Nette, jsme 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 dnešní lekci opravdu vše, ale nebojte. V příští lekci, Jednoduchý redakční systém v Nette - Struktura projektu, začneme úplně novou pořádnou aplikaci v Nette ;)


 

Stáhnout

Staženo 674x (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?
16 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 (4)

 

 

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

Avatar
Renko Frick
Člen
Avatar
Renko Frick:2.10.2017 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.10.2017 12:46
 
Odpovědět  +1 2.10.2017 12:45
Avatar
Jiří Šír
Člen
Avatar
Jiří Šír:31. ledna 10:57

Zdravím, rád bych se v PHP trochu pohnul směrem kupředu, proto jsem se začal zabývat Nette.

Jedu pěkně postupně, ale při stažení této kalkulačky ovšem dostávám chybové hlášení:

Fatal error: Cannot use 'Object' as class name as it is reserved in C:\xampp\htdoc­s\calculator-nette\vendor\net­te\utils\src\U­tils\Object.php on line 54

Poradí, prosím, někdo.
Předem díky ;-)

Editováno 31. ledna 10:58
 
Odpovědět 31. ledna 10:57
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Jiří Šír
Jindřich Máca:31. ledna 11:52

Ahoj a jakou používáš verzi PHP? Tento projekt je psaný ještě ve starší verzi Nette 2.3, která není kompatibilní s PHP verzí 7 a vyšší.

Pokud je toto Tvůj problém, řešením je např. aktualizovat verzi Nette v projektu na 2.4, což lze poměrně snadno provést pomocí nástroje Composer.

 
Odpovědět 31. ledna 11:52
Avatar
Jiří Šír
Člen
Avatar
Jiří Šír:31. ledna 15:16

Díky za rychlou reakci.
Mám právě PHP ve verzi 7.2.0. Provedl jsem tedy update v Composeru, ale bohužel se shodným výsledkem.
Obsah composer.json přikládám v printscreenu.
Díky za prověření...

 
Odpovědět 31. ledna 15:16
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Jiří Šír
Jindřich Máca:31. ledna 21:59

Ta chyba se obecně vztahuje na celé Nette, všechny projekty i všechna rozšíření a spočívá v tom, že od verze PHP 7.2 se nemůže třída jmenovat Object, přičemž Nette tuto třídu do verze 2.3 mělo a docela hojně používalo. Je také použita i v tomto projektu a tudíž je nutné její použití všude předělat a to na trait SmartObject. Je to i oficiálně reportované viz. https://github.com/…s/issues/146

Takže buď tedy všude v projektu předěláš použití třídy Object na použití trait SmartObject nebo zkrátka musíš downgradovat verzi PHP. :-`

 
Odpovědět 31. ledna 21:59
Avatar
Jiří Šír
Člen
Avatar
Odpovídá na Jindřich Máca
Jiří Šír:1. února 11:41

Díky moc za odkaz.
Po použití SmartObject je projekt funkční.
Ještě jednou díky za rady a ať se daří ;-)

 
Odpovědět  +2 1. února 11:41
Avatar
Libor
Člen
Avatar
Libor:19. února 12:15

Ahoj
Potýkám se s podobným problémem kolem SmartObject.
Mám PHP 7.2.1. Přejmenoval jsem tedy v souboru CalculatorMana­ger.php "Object" na "SmartObject". Předpokládám že v tomto souboru by to mělo stačit. Nette mám nejnovější verzi 2.4.
Bohužel mi to stále hlásí chybu "Class App\Model\Cal­culatorManager cannot extend from trait Nette\SmartObject" na posledním řádku, u koncové závorky třídy }.
Už jsem zkoušel vše. poradíte co dělám špatně?
Díky Libor

 
Odpovědět 19. února 12:15
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Libor
Jindřich Máca:19. února 12:27

Ahoj, vždyť jsem to psal, SmartObject není na rozdíl od Object třída, nýbrž PHP trait, takže se k tomu nemůžeš chovat stejně! Např. z trait nelze vůbec dědit, což Ti přesně píše ta chyba. :D

Takže doporučuji nejdříve dostudovat samotný jazyk PHP než jen tak náhodně experimentovat. Viz. http://php.net/…5.traits.php

 
Odpovědět 19. února 12:27
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Libor
Jindřich Máca:19. února 12:29

Jo a použití SmartObject je poměrně detailně popsané i v oficiální dokumentaci Nette - https://doc.nette.org/…/smartobject

 
Odpovědět 19. února 12:29
Avatar
Libor
Člen
Avatar
Odpovídá na Jindřich Máca
Libor:19. února 17:23

Ahoj, omlouvám se, nepochopil jsem to hned napoprvé.
Díky za upřesnění. Teď už vše funguje :-)

 
Odpovědět 19. února 17:23
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 42. Zobrazit vše