Akcie so stránkou – presmerovanie
Na poslednej prednáške sme si pomocou jazyka JavaScript ovplyvnili správanie prvku na stránke – tag <a> jazyka HTML (odkaz). Ako sme si skorej povedali, pomocou tohto jazyka vieme ovplyvňovať správanie a meniť obsah nielen prvkov na stránke, ale aj správanie sa celej stránky ako celku alebo aj prehliadača. Slúžia na to špeciálne - ako keby premenné (sú to v podstate objekty, ale to, čo to znamená, sa budeme učiť v ďalšom semestri), pomocou ktorých vieme pristupovať k jednotlivým prvkom (prehliadaču, stránke, prvkom na stránke).
Jedným z takýchto špeciálnych premenných (objektov) je objekt window (okno), ktoré ako je jasné z názvu, reprezentuje samotné okno prehliadača. Pomocou tejto premennej vieme nastaviť kódom jazyka JavaScript napríklad rozmery okna, vyvolať jeho zavretie a podobne. Všetky ostatné špeciálne premenné (objekty) patria v podstate v hierarchii pod tento objekt, nachádzajú sa pod ním. Niečo podobné ako v html, kde html má head a body, body má napríklad div, ten div má iný div, ten div má table, tá má tr a tak ďalej.
Jedným z takýchto objektov, ktorý patrí pod objekt window, je objekt location (umiestnenie/pozícia). V hierarchii týchto objektov sa pohybujeme podobne ako v CSS, len tam namiesto medzery (html body div{...) zadávame bodku (windows.location = …). Tento objekt reprezentuje aktuálnu URL adresu okna prehliadača, čiže to, čo máme zadané v adresovom riadku. Pomocou ďalích podobjektov tohto objektu vieme napríklad získať priamo v kóde JS obsah URL adresy, názov domény, protokol a podobne. Načo si to vravíme? Pretože okrem načítania akejkoľvek informácie o URL adrese vieme samozrejme aj jej obsah meniť.
Na čo nám to je ale dobré? Veď meniť URL adresu vieme v podstate pomocou odkazu a parametrov. Ak chceme ísť na nejakú stránku, tak sa tam vieme dostať odkazom. Lenže ako vieme, dostať sa niekam odkazom znamená kliknutie na naň a následne poslanie požiadavky na server, od ktorého dostaneme odpoveď – požadovanú stránku (cieľovú URL adresu). Niekedy sa však v systémoch potrebujeme dostať na nejakú stránku (presmerovať sa) priamo v kóde na zákalde vykonania nejakej akcie automaticky, nie len, keď klikne používateľ na príslušný odkaz.
A práve slovo automaticky je kľúčové, pretože pomocou tohto objektu vieme v kóde zadať, aby sa v nejakom momente stránka presmerovala na inú a rovno si to ukážeme na praktickej ukážke, kde sa nám to hodí. Spomeňte si na časť nášho systému upravenie záznamu, v ktorom meníme dáta o používateľoch v databáze. Po zmene hodnôt vo formulári klikneme na tlačítko odoslať (dáta sa uložia). Keďže je to submit button formulára, presmeruje nás na tú istú stránku s tým, že sa dáta odošlú. Aby sme sa naspäť dostali na zoznam všetkých používateľov a videli už naše zmenené dáta, musíme znova kliknúť na položku domov z menu.
Toto nie je veľmi praktické, pretože vo väčšine, ak niečo meníme, nechceme byť znova na tej istej stránke na menenie tohto obsahu, ale chceme sa vrátiť tam, odkiaľ sme sa tam dostali. Poznáte to zo surfovania na stránke, ak niečo takto meníte (profil, komentár, článok...), tak po zmene sa dostanete naspäť na stránku, odkiaľ ste sa tam dostali. Pomocou kódu HTML alebo PHP to nevieme, ale práve pomocou objektu location jazyka JS to vieme v danom momente stránke/prehliadaču prikázať.
Čo teda musíme spraviť? Je to jednoduché, v momente (na konkrétnom mieste v kóde), kedy sa nám formulár úspešne odošle a dáta sa uložia do databázy, nastavíme presmerovanie naspäť na domovskú stránku (index.php), odkiaľ sme sa do editácie dostali. Spravíme to pomocou podobjektu href (cieľ ako pri odkaze) objektu location, ktorý reprezentuje aktuálne navštívenú stránku (URL adresu). V prípade úspešného odoslania v kóde iba pridáme tag pre kód v jazyku JavaScript a priamo iba zadáme vykonanie priradenia, čo zapríčiní presmerovanie stránky. Kód by mohol vyzerať takto:
uprava-zaznamu.php:
…
if($result){
echo '<p class="success">Položka bola úspešne uložená.</p>';
?>
<script>
window.location.href = "/MyProject Coding/5-Projekt2/index.php";
</script>
<?php
}else{
echo '<p class="error">Pri ukladaní dát do databázy sa vyskytla chyba.</p>';
}
...
Ako vidíte, vo vetve správneho vykonania query do databázy sme ukončili kód jazyka PHP (?>) a vložili do tohto miesta kód v jazyku JavaScript (<script>...</script>). Ak si teraz zmeníte nejaké položku, tak uvidíte, ako sa po odoslaní dát na malý okamih zobrazí znova stránka pre editáciu, ale následne sa presmeruje stránka na našu domovskú stránku – na nami zadanú URL adresu, ktorú sme priradili do objektu window.location.href. Práve toto priradenie v danom momente vyvolali presmerovanie stránky.
Skúste si zmeniť dáta nekorektne, napríklad nezadajte priezvisko (vymažte) a skúste uložiť. V tomto prípade ostaneme stále na stránke pre upravenie záznamu, pretože k tomuto miesto v kóde sme sa ani nedostali. Už skorej, kde validujeme dáta, či sú korektné, nás podmenka if hodila do vetvy else pre vypísanie hlášky o nesprávne zadaných dátach. Tým pádom nenastane ani presmerovanie, pretože v hierarchii kódu od hora dole sa k tomuto miesto v kóde prehliadač nedostal. Je tam síce napísaný, ale podmienkami sme ho obišli.
V tomto prípade je to druhý spôsob, ako vyvolať kód jazyka JavaScript. Podobne ako pri kóde HTML, či už samotnom alebo ako súčasť PHP kódu, kód sa na stránke prejaví, ak sa k nemu prehliadač dostane (ak ho vďaka podmienkam neobídeme). Priradenie nebolo v žiadnej funkcii, ktorú bolo nutné vyvolať, jednoducho sa tam nachádzalo a hneď sa aj vykonalo. To by nám nateraz stačilo, spravovanie dát v databáze vyzerá na našej stránku už tak, ako by malo vyzerať. V ďalšom semestri sa pustíme do objektovo-orientovaného programovania, ktoré sa prakticky využíva momentálne úplne všade.