Použitie smerovača na strane klienta a získanie údajov zo servera pomocou AJAX XMLHttpRequest (Úloha 5).

Ciele

• Naučiť sa tvoriť jednostránkové aplikácie (single page applications) použitím smerovača na strane klienta (client side router)
• Naučiť sa získavať údaje zo servera pomocou AJAX XMLHttpRequest

Úvod

Na tomto a ďalších cvičeniach budete pracovať na druhom zadaní - webovej aplikácii dynamického blogu. Váš blog bude jednostránkovou aplikáciou (single page application, SPA) s jediným HTML súborom (index.html). Navigáciu bude zabezpečovať smerovač na strane klienta (client side router), ktorý bude využívať časť url nazývanú fragment alebo hash (za znakom #).

Všetko si najprv vyskúšate formou tutoriálu na aplikácii, ktorá je podobná výsledku kroku 2 z cvičenia 7. Tutoriál je obsiahnutý v krokoch 1 až 3 posupu. Vznikne webová aplikácia, ktorú potom prerobíte do podoby podobnej vášmu prvému zadaniu - statickému blogu. Z prvého zadania prevezmete tému, vzhľad a názory návštevníkov. Výslednú aplikáciu rozšírite o získavanie ďalších údajov zo servera a ďalej ju budete rozširovať v nasledujúcich týždňoch.

Poznámka:
Technológie použite pri vypracovani dnešného zadania sú vysvetlene v prednaškach: číslo 8.

Poznámka:
Toto cvičenie sa od predchádzajúcich aj nasledujúcich lýši v jednej podstatnej veci. Kým v ostatných sú "tutoriálové" úlohy doplňujúce a môžete ich preskočiť, tu sú dôležitou súčasťou tvorby vášho zadania. To, čo v nich vytvoríte bude tvoriť základ finálnej podoby vášho zadania.

Postup

Stiahnuteľná verzia router-a je dostupná v archíve 06hashRouterModularPaged.zip. Všimnite si, že router je načítavaný ako modul a jednotlivé trasy (v routes.js) majú v položke getTemplate funkciu. Funkciu preto, aby sme mohli HTML tvoriť na základe parametrov. Funkcia sa navyše stará aj o vloženie HTML do cieľového elementu (položka target). To je preto, aby sme zvládli aj spracovanie údajov získaných pomocou asynchrónnych požiadaviek zo servera.

Poznámka:
Dôsledkom načítania router-a ako modulu je, že príklad bude funkčný iba pri spustení na serveri. Preto na experimentovanie použite vhodné IDE, napríklad WebStorm alebo VS Code s LiveServer. To platí aj pre aplikáciu, ktorú budete vytvárať v ďalších krokoch. Ďalšou možnosťou je vypnúť kontrolu na medzidoménove načítanie (Cross-Origin restrictions) - v prehliadači Safari na Mac OS: Develop -> Disable Cross-Origin Restrictions, prípadne môžete vyskúšať postup zo stránky stackoverflow pre OS Windows a prehliadač Google Chrome

Úlohu môžete riešiť samostatne alebo môžete postupovať podľa nasledujúceho kompletného postupu riešenia. Prvý krok postupu však musíte vykonať, keďže v ňom vytvoríte základ druhého projektu:

1. Pre ďalšie fungovanie je potrebné pracovať vo vývojovom prostredí WebStorm, ktoré bolo popísané v cvičení 1.(prípadne ine riešenie Cross-Origin Restrictions popísane v poznámke vyžšie). V prostredí WebStorm vytvorte nový projekt podľa tejto šablóny. Vytvorili ste základ druhého projektu, ktorý už obsahuje js súbory s routerom (paramHashRouter.js), trasami (routes.js), kódom pre hlavné menu (mainMenu.js) a spracovanie údajov z formulára (addOpinion.js). Skript routerInit.js inicializuje router. Funkčná je len prvá položka v menu (Welcome!).

2. Do index.html za element pridajte element so šablónou pre články.
   To, čo sme pridali síce nazývame šablóna, ale v tomto prípade je to len HTML kód, ktorý sa pri kliknutí na odkaz Articles vloží do príslušného HTML elementu.
3. Do poľa v routes.js pridajte objekt Obsah routes.js teraz bude Teraz je funkčná aj druhá položka v menu (Articles). Funkcia, ktorá je v položke getTemplate nového objektu iba načíta html obsah script elementu s id=template-welcome do cieľového elementu. Cieľový element je ten s id daným argumentom targetElm, tu je to router-view. Ak chcete vedieť ako sa router-view dostane do targetElm, preštudujte si kód router-a, konkrétne paramHashRouter.js
4. Do index.html za element pridajte element s Mustache šablónou pre názory návštevníkov.
5. Do poľa v routes.js pridajte objekt Na spracovanie názorov návštevníkov do HTML potrebujeme viac ako jeden riadok kódu. Aby to bolo prehľadné, dáme tento kód do samostatnej funkcie createHtml4opinions. Túto funkciu pridáme v ďalšom kroku. Teraz sme len v položke getTemplate objektu s príslušnou trasou (opinions) uviedli jej názov.
6. Na koniec routes.js pridajte funkciu Funkčná je už aj tretia položka v menu (Visitor opinions).
7. Do index.html za element pridajte element čo je HTML kód pre formulár pre nový názor.
   Podobne, ako v prípade template-articles to ani nie je skutočná šablóna, keďže neobsahuje žiadne značky, ktoré by sa nahrádzali údajmi z JavaScript objektov.
8. Do poľa v routes.js pridajte objekt Tým ste ukončili sfunkčnenie poslednej položky v menu. Kód na spracovanie údajov z formulára už totiž je v súbore addOpinion.js.

Postup riešenia je nasledovný:

1. V index.html vymažte element: a namiesto neho pridajte elementy Nová šablóna template-articles slúži na zobrazenie zoznamu článkov, získaných zo servera. Šablóna template-articles-error sa použije keď sa články získať nepodarí a to na výpis chybového hlásenia.
2. V poli v routes.js zmeňte riadky na Podobne ako pri trase opinions, aj tu spracovanie dáme do samostatnej funkcie, konkrétne fetchAndDisplayArticles. Túto funkciu pridáme v ďalšom kroku.
3. Na koniec routes.js pridajte funkciu Funkcia fetchAndDisplayArticles získa údaje o článkoch zo servera pomocou XMLHttpRequest API, vygeneruje z nich HTML kód použitím Mustache šablóny a vloží ho do elementu s id vo vstupnej premennej targetElm.

V tejto úlohe máte s použitím toho, čo ste vytvorili v cvičeniach 1 až 7 urobiť s aplikáciou z predchádzajúceho kroku nasledujúce:

• Názov stránky a uvítaciu časť (obsah šablóny s id=template-welcome) zmeňte tak, aby zodpovedali vašej téme.
• Formulár v trase addOpinion vymeňte za váš z úlohy 3 (cvičenie 6). Z vášho riešenia úloh 3 a 4 tiež prevezmite spracovanie obsahu formulára do localStorage.
• Zobrazenie názorov v trase opinions zmeňte na to vaše, z úlohy 4 (cvičenie 7).
• HTML kód však definujte pomocou Mustache šablóny a to aj v prípade ak ste v úlohe 4 použili šablónové literály. Použite šablónu s id=template-opinions.
• Na celú stránku (aplikáciu) aplikujte vaše vlastné CSS štýly. Môžu ale nemusia to byť tie, čo ste vytvorili pre váš prvý projekt (cvičenia 2 až 6).

Poznámka: Stránkovanie s router-om vidíte v príklade 06hashRouterModularPaged ( 06hashRouterModularPaged.zip) v trase main (odkaz Main Content). Ako získať požadovaný počet článkov od požadovaného indexu (offset) zistíte z dokumentácie servera WTserverAPI (časť Parametre pre rozsah článkov).

Zdroje

1. Prednáška č. 8.