Spracovanie formulára 2

Verím, že ste prvú metódu poslania formulára (poslania dát z formulára) pochopili. Jej kľúčovou vlastnosťou je, že sa jednotlivé parametre posielajú viditeľne cez URL. Aké to má výhody sme si už spomenuli predtým, skúste sa ale zamyslieť, akú to má nevýhodu...

Cez formulár posielame/zadávame často citlivé (dôležité, tajné, súkromné, intímne...) informácie, ktoré by sme neradili len tak zverejňovali alebo nejako inak zobrazovali už len na samotnom monitore. Predstavte si, že by ste vypĺňali formulár s osobnými údajmi a následne by ste formulár odoslali. Vaše údaje by sa v tom momente zobrazili v URL adrese pri jednotlivých parametroch. Tým, že daná stránka – URL adresa aj s hodnotami parametrov bola navštívená, je automaticky uložená napríklad do histórie prehliadania webu. Ak by po vás niekto navštívil počítač, mohol by si pomocou histórie kľudne popozerať, čo ste vypĺňali. Toto je veľmi dôležitá vec a preto v prípade posielanie dôležitých údajov nepoužívame nikdy túto metódu! Práve preto existuje druhý typ poslania formulára, ktorý je v podstate takmer rovnaký ako get, ale s výnimkou toho, že dané parametre sa nezobrazujú v URL. Názov tohto typu je post (odoslať) a pre nás bude jeho použitie v kóde takmer rovnaké ako get s tým rozdielom, že k poslaným dátam nebudeme pristupovať cez premennú get ale cez premennú s názvom post. Aplikujme tento typ poslania na kód z poslednej ukážky a vložme ho do súboru page2.php s tým, že ho budeme aj volať v atribúte action a zo súboru pre menu odstránime parametre, ktoré sme mali nastavené pri stránke page2.php, aby sme mali v súbore index.php metódu get a v súbore page2.php metódu post:

menu.html:

<a href="index.php" class="pretty">Domov</a>
<a href="page2.php" class="pretty">Stranka 2</a>

page2.php:

<h2>Formular</h2>
<form action="page2.php" method="post">
    <label for="user_name">Meno</label>
    <input type="text" name="user_name" id="user_name" value="<?php echo $_POST['user_name'];?>"><br><br>

    <label for="user_surname">Priezvisko</label>
    <input type="text" name="user_surname" id="user_surname" value="<?php echo $_POST['user_surname'];?>"><br><br>
    <input type="submit" value="Odoslat">
</form>

<?php

if($_POST['user_name'] || $_POST['user_surname']){
    echo 'Meno pouzivatela je : <b>'.$_POST['user_name']. '</b> a priezvisko : <b>'.$_POST['user_surname'].'</b>.';
}
?>

Spustite si stránku page2.php. Všimnite si, že navonok vyzerá všetko rovnako. Rozdiel nastáva po odoslaní formulára, kde URL ostane nezmenená, žiadne parametre v nej nevidno. Keď vyplníte dáta a odošlete formulár, príkaz v podmienke sa spustí, dáta sa skutočne poslali, ale v URL ich nie je vidno. To je presne cieľ tohto typu posielania formulára, žiadym spôsobom zobraziť poslané dáta. Pri porovnávaní typov odoslania formulára je nutné upozorniť ešte na jednu dôležitú vec. Vráťte sa na stránku index.php pomocou menu našej stránky. Odošlite formulár s dátami a následne skúste dať refresh stránky. Prehliadač nevyhodí žiadne okno, stránka sa reloadne a parametre v URL ostanú. Používateľ vidí, že v URL sa nachádzajú nejaké parametre, takže si je vedomí, že pri refreshi sa tieto dáta prepošlú na server, resp. parametre nachádzajúce sa v URL indikujú, že sa budú nejaké dáta na server odosielať.

Spravte teraz to isté na stránke page2.php – vyplňte formulár, odošlite ho, príkaz v podmienke by sa mal vypísať. Skúste refreshnúť stránku. V tomto prípade by vám mal prehliadač vyhodiť okno s hláškou v tom zmysle, že či chcete naozaj vykonať danú operáciu, pretože ak áno, tak prehliadač vykoná akciu, ktorá bola vykonaná predtým. Vykonaním akcie sa myslí odoslanie dát. Používateľ, ktorý si sadol za PC s touto stránkou, kde predtým bolo niečo niekým odoslané, pri pohľade na ňu nemôže vedieť, že sa pri danej akcii odosielajú nejaké dáta, pretože v URL to nie je vidieť. Prehliadač ho preto upozorní touto formou, že sa niečo bude odosielať, resp. že sa bude vykonávať nejaká akcia. Ak vo vyskakovacom okne používateľ zaznačí zrušiť (cancel), tak sa stránka nerefreshne a nič sa neodošle. Ak potvrdí okno, stránka sa refreshne a dáta sa odošlú. Toto upozornenie je veľmi dôležité, pretože vo väčšine web systémov sa pri odosielaní dát dané dáta niekam ukladajú. Pri refreshnutí stránky alebo pri vrátení sa na ňu (pomocou šípky späť v prehliadači) by sa mohlo stať, že po potvrdení by sa dáta znova odoslali a uložili by sa dvakrát. Predstavte si, že vypisujete nejaký komentár ku článku a vykonali by ste túto akciu, tak by sa váš komentár uložil dvakrát. Alebo určite ste zažili situáciu, že ste platili niečo cez internet a dostali ste sa na stránku, na ktorej vám bol indikovaný progres platby. Dostali ste informáciu, že vaša platba sa spracováva. Veľmi často na takejto stránke býva dôležité upozornenie, počkajte, kým sa platba zrealizuje, počas čakania nerefreshnite stránku a ani nekliknite na tlačítko späť. Teraz už rozumiete, prečo to tam píšu, vaše dáta by sa znova odoslali na server a spracovali by sa dvakrát, takže by ste zaplatil dva razy:)

Na záver tejto kapitoly si ešte ukážeme, aké hodnoty vracajú prvky select, checkbox a radio button a ako vieme po preposlaní formulára ich hodnoty nastaviť. V prípade selectovníka sme v predchádzajúcej sekcii iba zadávali text, ktorý sa zobrazuje v ponuke – obsah tagu option. Pri každej tejto ponuke je nutné zadať hodnotu atribútu value, ktorá bude indikovať hodnotu, ktorá sa vráti pri odoslaní. Čiže názov parametra pri odoslaní formulára bude hodnota atribútu name tagu select a hodnota, ktorá nám príde, bude obsah atribútu value danej možnosti, ktorý bola vybratá (option). Ak chceme nastaviť selectovník na konkrétnu hodnotu, napríklad po odoslaní, pri požadovanej option zadáme iba názov atribútu selected (vybratá) a daná možnosť bude pri načítaní označená – vybratá zo zoznamu.

Pri radio buttone zadávame podobne ako pri jednotlivých option v selectovníku hodnotu atribútu value pre každý input. Toto je hodnota, ktorá bude poslaná ako parameter pri odoslaní formulára. Meno hodnoty bude niesť skupinu inputov, ktoré patria pod jeden radio button – hodnota atribútu name. V ukážke si vyskúšame dva rôzne radio buttony, aby ste videli rozdiel a taktiež pri nich použijeme label, aby ste videli, aké má správanie s atribútom for pri tomto type inputu. Zadávanie označenej možnosti sa dáva podobne atribútom bez hodnoty, ako to bolo pri selectovníku (selected), ale v tomto prípade nesie meno checked (zaškrtnutý).

Ako posledný použijeme checkbox, ktorý má podobné správanie ako radio button, zaškrtnutie tiež určujeme atribútom checked, hodnota ktorá sa prepošla je hodnota atribútu value. Rozdiel je len v tom, že meno jednotlivých checkboxov musí byť rozdielne, nepatria do jednej skupiny ako v prípade radio buttonu, tam môže byť zaškrtnutá len jedna možnosť v danej skupine inputov, v tomto prípade je každý checkbox zodpovedný sám za seba:

index.php:

<form action="index.php" method="get">
    <label for="user_name">Meno:</label>
    <input type="text" name="user_name" id="user_name" value="<?php echo $_GET['user_name'];?>"><br><br>

    <label>Pohlavie:</label><br>
    <label for="user_gender_male">Muz</label>
    <input type="radio" name="gender" id="user_gender_male" value="male" 
        <?php if($_GET['gender'] == 'male'){ echo 'checked';} ?>
    ><br>

    <label for="user_gender_female">Zena</label>
    <input type="radio" name="gender" id="user_gender_female" value="female"
        <?php if($_GET['gender'] == 'female'){ echo 'checked';} ?>
    ><br><br>

    <label>Oblubeny jazyk:</label><br>
    <label for="fav_lang_php">PHP</label>
    <input type="radio" name="fav_lang" id="fav_lang_php" value="php" 
        <?php if($_GET['fav_lang'] == 'php'){ echo 'checked';} ?>
    ><br>

    <label for="fav_lang_css">CSS</label>
    <input type="radio" name="fav_lang" id="fav_lang_css" value="css"
        <?php if($_GET['fav_lang'] == 'css'){ echo 'checked';} ?>
    ><br><br>

    <label for="fav_browser">Pouzivany prehliadac</label>
    <select name="fav_browser" id="fav_browser">
        <option value="firefox"
            <?php if($_GET['fav_browser'] == 'firefox'){ echo 'selected';} ?>
        >Firefox</option>

        <option value="chrome"
            <?php if($_GET['fav_browser'] == 'chrome'){ echo 'selected';} ?>
        >Chrome</option>
        <option value="ie"
            <?php if($_GET['fav_browser'] == 'ie'){ echo 'selected';} ?>
        >IE</option>
    </select><br><br>

    <input type="checkbox" name="like" id="like" value="yes"
        <?php if($_GET['like'] == 'yes'){ echo 'checked';} ?>
    >
    <label for="like">Paci sa vam tento portal?</label><br><br>

    <input type="submit" value="Odoslat">
</form>

Poďme si rozobrať našu ukážku, ktorá sa vám možno zdá zložitá alebo neprehľadná, ale nebojte sa, je to jednoduché, iba to vyzerá hrozivo ;-) Ako druhý prvok (po mene) sme použili radio button, ktorý má dve možnosti (inputy) a nesie meno (name) gender. Všimnite si, že rovnaké meno je pri obidvoch inputoch – to značí, že sú spoločné, tvoria jeden radio button – z nich môže byť iba jeden zaškrtnutý. Pred obidvoma sme zadali label s atribútom for, jeho hodnota je zhodná s hodnotou atribútu id pri inputoch. Taktiež sme pri inputoch zadali atribút value, táto hodnota nám príde ako parameter po vybratí jednej z možností. Skúste teraz schválne nekliknúť priamo na prázdnu bodku radio buttona príslušnej možnosti, ale kliknite na menovku (label) vedľa. Ako vidíte, daná možnosť, ku ktorej je label priradený (pomocou atribútu for) sa označí. Presne na toto je toto prepojenie určené.

Za týmto prvkom nasleduje druhý radio button, ktorého inputy majú samozrejme inú hodnotu atribútu name, aby bolo jasné, že sa jedná o druhý prvok. Ďalej máme zadaný selectovník, ktorému sme nadefinovali tri možnosti (options). Všimnite si, že aj pre selectovník sme zadali label. V tomto prípade sa po kliknutí na label selectovník označí – sme na ňom nastavený a je ho možné napríklad ovládať – prepínať sa medzi možnosťami šípkami hore a dole.

Na záver sme použili checkbox, ku ktorému sme tiež priradili label. Všimnite si, že opäť nie je nutné presne zaškrtnúť checkbox, ale v tomto prípade stačí kliknúť na text pri ňom (priradený label) a input za zakšrtáva/odškrtáva. Ako ste si všimli, pri všetkých inputoch/options sme zadali ešte jeden riadok – podmienku v jazyku PHP. Táto podmienka v každom prípade slúži na to, aby sa po odoslaní formuláru nastavili zadané hodnoty. Pri každom prvku sa teda pýtame správnym spôsobom, či je tá daná možnosť zaškrtnutá, čiže či sa rovná jeho hodnota hodnote parametra s názvom prislúchajúcim prvku. Pre zopakovanie - pri radio buttone je názov parametra hodnota atribútu name a hodnota je obsah atribútu value, pri rovnosti označíme atribútom checked. Pri selectovníku je názov parametra hodntoa atribútu name pri tagu select a jeho hodnota je obsah atribútu value pri prislúchajúcej option, pri rovnosti sa označí možnosť atribútom selected.

Pri checkboxe je názov parametra hodnota atribútu name a hodnota je obsah atribútu value, pri rovnosti (kedy je zaškrtnutý) sa označí atribútom checked. Vyskúšajte sa s formulárom pohrať, zadávajte si hodnoty a všímajte si, čo sa zobrazí URL. Možno si všimnite ešte jednu zaujímavosť. Pri nezadaní/nezaškrtnutí radio buttona alebo checkboxu sa jeho meno neobjaví v URL – nezobrazí sa tam daný parameter prislúchajúci k prvku. V prípade textového inputu a selectovníka je tam parameter aj bez interakcie, ale v prípade radia a checkboxu sa zobrazí parameter len ak je niečo zaškrtnuté.