12. diel - Formulárový framework v PHP - InputBox

V minulej lekcii, Dokončenie triedy FormControl v PHP , sme dokončili predka pre formulárové kontrolky. Nič nám teda nebráni tomu, aby sme si vytvorili prvú kontrolku.

InputBox

InputBox je kontrolka založená na HTML elementu input. Budeme pomocou nej zadať text, emaily, URL adresy, čísla a hesla. Kontrolku ďalej použijeme aj pre skrytá pole a tlačidlá.

Trieda bude naozaj minimalistická a preto si uvedieme rovno jej kompletné kód:

class InputBox extends FormControl
{
    private $text;
    public $type;

    public function __construct($name, $type, $label = '', $htmlParams = array())
    {
        $this->type = $type;
        parent::__construct($name, $label, $htmlParams);
    }

    public function setText($text)
    {
        $this->text = $text;
        return $this;
    }

    public function setData($key, $text)
    {
        $this->text = $text;
    }

    public function renderControl($isPostBack)
    {
        $value = ($isPostBack && isset($_POST[$this->name]) && $this->type != 'password') ? $_POST[$this->name] : $this->text;
        $this->htmlParams['value'] = $value;
        $this->htmlParams['type'] = $this->type;
        $builder = new HtmlBuilder();
        $builder->addElement('input', $this->htmlParams);
        return $builder->render();
    }

}

Triedu sme zdedili z FormControl, čo pre nás znamená hlavne že obsahuje validačné mechanizmy a musí implementovať metódu renderControl ().

Atribúty tu máme len dva, jedná sa o názov a typ inputu, ako je to v HTML.

Konštruktor by mal byť jasný, uložíme si typ a zvyšok necháme na konstruktoru predka. Na Setter tiež nie je nič prevratné.

Jediná zaujímavá metóda je renderComponent (). Jej parameter $ IsPostBack označuje, či bol formulár už odoslaný (teda či sú v POSTe nejaké dáta).

Do premennej $ value si uložíme hodnotu, ktorá má byť v inputu zobrazená. Bude to buď hodnota, ktorú užívateľ odoslal alebo predvolená hodnota v poli. Odoslanú hodnotu zobrazíme v prípade, že bol formulár už odoslaný a my ho zobrazujeme, to môže mať totiž jediný dôvod - užívateľ niečo vyplnil zle a my sme mu formulár vrátili. Preto input budeme chcieť vyplniť znova hodnotou z POSTe. V prípade, že je input typu password nič vyplňovať nebudeme, heslo by mal z bezpečnostných dôvodov zadať vždy znova. Ak používateľ formulár vyplnil správne, tak po dokončení požiadavke presmerujeme, čím sa stratí dáta z POSTe a prvé situácia nenastane. To si ukážeme až ďalej v seriáli. V ostatnch prípadoch do inputu vypíšeme predvolený text. Ten je v predvolenom stave prázdny, ale môžeme tu uviesť aj nejakú predvolenú hodnotu. Ďalej už len vyrenderuje input pomocou HtmlBuilderu a výsledné HTML vrátime.

Testovanie

Už niekoľko dielov sme programovali a nemáme ešte žiadny merateľný výstup. Vytvorenie triedy formulára zaberie ešte niekoľko dielov a programovať takú dobu bez výsledku je trochu demotivujúci. Preto si urobme malú pauzu a otestujte náš InputBox, zatiaľ bez formulára.

Vytvorme si niekoľko formulárových polí. Ich zápis bude o niečo zložitejšie ako s formulárové triedou, ale s tým teraz nič neurobíme.

$jmenoBox = new InputBox('jmeno', 'text');
$jmenoBox->addRequiredRule()
    ->addMinLengthRule(3);
$emailBox = new InputBox('email', 'email');
$emailBox->addRequiredRule()
    ->addPatternRule(FormControl::PATTERN_EMAIL)
    ->setText('@');
$hesloBox = new InputBox('heslo', 'password');
$hesloBox->addPasswordRule();
$rodneCisloBox = new InputBox('rodne_cislo', 'text');
$rodneCisloBox->addPatternRule('[0-9]{6}\/[0-9]{4}');
$tlacitko = new InputBox('odeslat', 'submit');
$tlacitko->setText('Odeslat');

$validateClient = true;
$postBack = false;

Kód si vložte napríklad do nejakého kontroleru alebo pokojne len do PHP súboru úplne bez architektúry. Formulár obsahuje 4 polia a odosielacie tlačidlo.

Meno je input typu text, je povinné a musí mať najmenej 3 znaky.

Email je input typu email, ako predvolený obsahuje text "@". Ďalej sa na neho aplikuje pravidlo pre validáciu emailu regulárnym výrazom, na klientovi nie je potrebné, keďže email prehliadač validuje sám, v tomto prípade ho tam však už necháme.

Heslo je input typu password a obsahuje pravidlo pre validáciu hesla (dĺžka väčšia ako 5 znakov).

Rodné číslo je input typu text s regulárnym výrazom na formát XXXXXX / XXXX.

Premenná $ validateClient určuje, že sa majú generovať klientskej validácie. $ PostBack obsahuje informáciu o tom, či bol formulár už odoslaný. Premenné sú samozrejme vlastností formuláre, ale pretože ten ešte nemáme, musíme si ich vytvoriť takto bokom.

Teraz kontrolky vyrenderuje, zatiaľ ručne:

<form method="POST">
    Jméno
    <br />
    <?= $jmenoBox->render($validateClient, $postBack) ?>
    <br />
    Email
    <br />
    <?= $emailBox->render($validateClient, $postBack) ?>
    <br />
    Heslo
    <br />
    <?= $hesloBox->render($validateClient, $postBack) ?>
    <br />
    Rodné číslo
    <br />
    <?= $rodneCisloBox->render($validateClient, $postBack) ?>
    <br />
    <?= $tlacitko->render($validateClient, $postBack) ?>
</form>

Prvý parameter metódy render určuje či chceme generovať klientske validácie, druhé je či bol odoslaný formulár (situácia PostBack).

Výsledok vyzerá takto:

A jeho HTML kód:

<form method="POST">
    Jméno
    <br />
    <input name="jmeno" id="jmeno" required="required" pattern=".{3,}" value="" type="text" />
    <br />
    Email
    <br />
    <input name="email" id="email" required="required" pattern="[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4}$" value="@" type="email" />
    <br />
    Heslo
    <br />
    <input name="heslo" id="heslo" pattern=".{6,}" value="" type="password" />
    <br />
    Rodné číslo
    <br />
    <input name="rodne_cislo" id="rodne_cislo" pattern="[0-9]{6}\/[0-9]{4}" value="" type="text" />
    <br />
    <input name="odeslat" id="odeslat" value="Odeslat" type="submit" />
</form>

Môžete si skúsiť, že klientske validácia naozaj fungujú. Zadajte si kratšie meno, nevalidný email alebo krátke heslo. Naopak nevyplnené heslo je v poriadku, pretože pole nie je povinné. Rodné číslo musí byť tiež v správnom tvare a nie je povinné.

Nakoniec otestujeme aj validácia serverové strany. Premennú $ validateClient nastavte na false. Ďalšou možnosťou by bolo pomocou vývojárskej konzoly priamo v prehliadači z HTML kódu jednoducho odmazať atribúty vzor a required.

Do PHP doplníme zavolanie validáciou po odoslaní formulára, zatiaľ to musíme urobiť napoly ručne:

if ($_POST)
{
    $postBack = true;
    try
    {
        $jmenoBox->checkValidity();
        $emailBox->checkValidity();
        $hesloBox->checkValidity();
        $rodneCisloBox->checkValidity();
    }
    catch (UserException $e)
    {
        echo($e->getMessage());
    }
}

Môžete si opäť skúsiť urobiť rôzne chyby, všetky budú na serveri zachytené a vyvolajú UserException. Uvidíte tiež, že hodnoty zostávajú vyplnené aj po odoslaní formulára. Zafarbenie políčka červeno bude mať na svedomí až formulár.

Vidíme, že sme na správnej ceste. Funkčná projekt je nižšie k stiahnutiu. Nabudúce, v lekcii Formulárový framework v PHP - Formulár , budeme programovať triedu formulára.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.