Lekce 01 - Úkol 01 - Experimentování se statickým webem a Tomcatem

Cílem domácího úkolu je vytvořit jednoduché statické stránky a nasadit je na Tomcat.

Krátký popis

Váš osobní webík

Úkolem bude připravit si svůj osobní web (například na úrovni jednodenního workshopu Tvořím web HTML/CSS https://www.czechitas.cz/cs/co-delame/tvorim-web). Webové stránky (index.html, styly.css, …) nejprve zkuste napsat v nově založeném projektu v IntelliJ IDEA od začátku. Jako druhý krok bude použít existující webové stránky a převést je do javové webové aplikace. Tu pak můžete nasadit na Tomcat, který máte lokálně na počítači a nebo (nepovinně) na Tomcat v cloudu (stXX.czechitas.tkadlecek.net).

Cloudový Tomcat jsme na první lekci probrat nestihli, nicméně jeho koncept je velmi jednoduchý. Někde v internetu běží počítač, na kterém jsou spuštěné a do internetu vystavené dvě aplikace:

1. Webový správce souborů - http://files.czechitas.tkadlecek.net
2. Cloudový Tomcat - http://stXX.czechitas.tkadlecek.net (XX je třeba zaměnit, viz níže)

V tabulce Licence a účty.xlsx na Google Disku najdete své přihlašovací údaje do cloudového webového správce souborů (sloupec uživatel a heslo), který vám po přihlášení zobrazí obsah vám přiřazené vzdálené Tomcatové webapps složky (každá účastnice má vlastní). Pokud do této vzdálené složky nahrajete .war archiv nějaké webové aplikace (například VideoBoss.war z materiálů první lekce), Cloudový Tomcat si tohoto archivu všimne, rozbalí jej a po chvíli danou webovou aplikaci vystaví v internetu na adrese, která přísluší danému uživateli, který .war archiv přes webový správce souborů takto nahrál. Tuto adresu opět najdete u svého jména v tabulce Licence a účty.xlsx na Google Disku (sloupec Tomcat).

Pokud bych se tedy na stránce http://files.czechitas.tkadlecek.net přihlásíl pod uživatelem st20 a nahrál do sdílené složky tohoto uživatele archiv VideoBoss.war z materiálů první lekce, byla by tato webová aplikace po chvíli dostupná na adrese http://st20.czechitas.tkadlecek.net/VideoBoss. Všimněte si dodržování velkých a malých písmen v názvu aplikace VideoBoss na konci odkazu - je opravdu důležité, aby se název webové aplikace (VideoBoss) v adrese Tomcatu (včetně velkých a malých písmen) shodoval s názvem war archivu, který byl uploadovaný přes webového správce souborů.

Takto vystavenou aplikaci si pak může zobrazit kdokoliv s přístupem na internet. Více informací o Cloudovém Tomcatu si povíme na příští lekci.

Detailní popis

Část 1 - Váš osobní webík

Abyste měli s čím experimentovat, budete potřebovat nějaký svůj web. Může to klidně být i již existující web nebo statické webové stránky odkudkoliv. Pokud se necítíte na tvorbu vlastního webu, můžete si klidně půjčit nějaký existující web. Například http://krystufek.rolecek.cz/.

Pro psaní webu existuje na internetu spousta návodů. Můžete zkusit třeba online kurz od Luďka Rolečka https://www.czechitas.cz/cs/blog/zaciname-s-it/online-kurz-uvod-do-html-css-1-lekce.

Dále můžete zkusit kurz Codecademy o základech HTML+CSS “Make a Website” https://www.codecademy.com/learn/make-a-website. Je třeba vytvořit si na Codecademy účet (což doporučuju, mají spoustu bezva kurzů na úplné základy). Poslední ze čtyř lekcí - Bootstrap - můžete úplně s klidným svědomím vynechat.

Web můžete tvořit v libovolném textovém editoru. Za úkol je ale vyzkoušet IntelliJ IDEA. V IntelliJ IDEA založte nový projekt -> Static web -> Složka JAVA-TRAINING/Projects/Java2/Lekce01-Ukol/10-JednoduchyWeb. V projektu založte soubor index.html a další nutné soubory pro váš web.

Projekt může vypadat takto:

Stránky můžete během editování zobrazit přímo v prohlížeči zadáním adresy:

Na windows: file:///C:/Java-Training/Projects/Java2/Lekce01-Ukol/10-JednoduchyWeb/index.html

Na Macu: file:///Users/VASE_UZIVATELSKE_JMENO/Java-Training/Projects/Java2/Lekce01-Ukol/10-JednoduchyWeb/index.html

Soubor index.html je také možné do prohlížeče z editoru přetáhnout a on se tím zobrazí.

Smyslem této části je použít IntelliJ IDEA jako prostý textový editor, bez jakékoliv vazby na Javu. IntelliJ IDEA Ultimate Edition je výborný editor i jen na prosté HTML+CSS+JavaScript.

Můžete vyzkoušet i funkci Live Edit - propojení IntelliJ IDEA a Chrome s okamžitým zobrazováním změn ve webové stránce podle návodu https://www.youtube.com/watch?v=f__tQKkWodw nebo https://www.jetbrains.com/help/idea/live-editing.html

Část 2 - Osobní webík v javovém projektu v IntelliJ IDEA

Druhá část je převod osobního webíku do předpřipraveného javového projektu v IntelliJ IDEA. Javový projekt vytvoříte zkopírováním původního projektu z Lekce01 40-JavaSimpleWeb. Celou složku zkopírujte do JAVA-TRAINING/Projects/Java2/Lekce01-Ukol.

1. Složku přejmenujte na JednoduchyWebNadJavou
2. Otevřete projekt v IntelliJ IDEA a změňte následující údaje v projektových konfiguračních souborech:
3. PROJEKT/pom.xml -> <artifactId>ukol01</artifactId>
4. PROJEKT/pom.xml -> <name>ukol01</name>
5. PROJEKT/pom.xml -> <finalName>ukol01</finalName>
6. PROJEKT/src/main/resources/application.properties -> server.servlet.context-path=/ukol01
7. PROJEKT/src/main/resources/application.properties -> server.port=0
8. Schvalte bublinu Maven projects need to be imported volbou Import changes.

Web z minulé části překopírujte do tohoto projektu do složky PROJEKT/src/main/resources/static. Projekt by měl být spustitelný zelenou šipkou vpravo nahoře. Po spuštění se ve spodním rámu (v textové konzoli) IntelliJ IDEA vypíše mimo jiné adresa do prohlížeče. Něco jako http://localhost:51552/ukol01. Projekt ještě polaďte a vyzkoušejte, že všechno funguje jak má, odkazy směřují na platné stránky a obrázky a kaskádové styly jsou správně zobrazeny. Vyzkoušejte také, že se jakékoliv změny ve zdrojových souborech se po stisku Ctrl+F9 v IntelliJ IDEA (Build Project) projevují ve webovém prohlížeči po obnovení stránky stiskem F5 nebo Ctrl+F5.

Ukázka možného řešení webu (všimněte si souborů ve složce PROJEKT/src/main/resources/static)

Tento projekt budete odevzdávat do Odevzdávárny jako domácí úkol.

Část 3 - Nasazení na Tomcat na lokálním počítači

Po odladění svého webu v javové webové aplikaci (uvnitř IntelliJ IDEA) jej nasaďte do plnotučného webového serveru Tomcat (C:/Java-Training/Tomcat), stejně, jak jsme to dělali v hodině.

Postupujte tak, že nejprve zastavíte případný běžící projekt v IntelliJ IDEA (červený čtvereček vpravo nahoře v IntelliJ IDEA v oblasti, kde byl zelený trojúhelníček, kterým se aplikace spouštěla), vytvoříte distribuční archív v pravém menu Maven projects -> Lifecycle -> clean a potom Maven projects -> Lifecycle -> package. Vznikne tak soubor PROJEKT/target/ukol01.war. Ten překopírujte do složky TOMCAT/webapps. Tomcat nastartujete spuštěním TOMCAT/bin/startup.bat.

Část 4 (Nepovinná) - Nasazení na Tomcat v cloudu

Po odladění svého webu v plnotučném webovém serveru Tomcat na svém lokálním počítači nasaďte aplikaci i na veřejný Tomcat v cloudu (stXX.czechitas.tkadlecek.net).

Postupujte tak, že soubor PROJEKT/target/ukol01.war uploadujete na cloudový server pomocí administrační konzole na http://files.czechitas.tkadlecek.net/. Přihlaste se svým přiřazeným loginem a heslem. Pokud je váš login st20 a distribuční archív webové aplikace se jmenuje ukol01.war, pak se po uploadu přes administrační konzoli vaše webová aplikace zpřístupní na adrese http://st20.czechitas.tkadlecek.net/ukol01/.

Pár tipů:

• Pozor! Mezi zdrojovým projektem (složkou) a výsledným webovým archívem .war je velký rozdíl. Do Tomcatu se nasazuje výsledný archív .war, do odevzdávárny na Google Drivu se nahrává zazipovaná složka celého projektu.
• Do Tomcatu se NIKDY nekopíruje rozbalená složka webu, pouze archív .war. Tomcat si tento archív sám rozbalí.
• Pokud se chcete zbavit nasazené webové aplikace z Tomcatu, smažte pouze archív .war ve složce TOMCAT/webapps. Nemažte rozbalenou složku webu. Tomcat sám pozná, že jste odebrali zdrojový archív .war a rozbalenou složku smaže sám. To slouží zároveň jako potvrzení, že byla webová aplikace úspěšně sesazena.
• Pouze pokud by Tomcat zrovna neběžel, můžete smazat nejen archív .war, ale i rozbalenou složku z TOMCAT/webapps.
• Pro psaní doporučuji používat javový projekt se zabudovaným malým webovým serverem, který spustíte klasicky pomocí zelené šipky. Okno zabudovaného webového serveru vám vypíše adresu pro prohlížeč. V tomto případě stačí pouze editovat zdrojové soubory webu a obnovovat stránku v prohlížeči.

Odevzdání domácího úkolu

Nejprve appku/appky zbavte přeložených spustitelných souborů. Zařídíte to tak, že v IntelliJ IDEA vpravo zvolíte Maven Projects -> Lifecycle -> Clean. Úspěch se projeví tak, že v projektové složce zmizí podsložka target. Následně složku s projektem zabalte pomocí 7-Zipu pod jménem Ukol-CISLO-Vase_Jmeno.7z. (Případně lze použít prostý zip, například na Macu). Takto vytvořený archív nahrajte na Google Drive do Odevzdávárny.

Vytvořte snímek obrazovky spuštěného programu (webové stránky) a vložte jej do galerie Ukol CISLO ve skupině našeho kurzu na Facebooku.

Pokud byste chtěli odevzdat revizi úkolu (např. po opravě), zabalte ji a nahrajte ji na stejný Google Drive znovu, jen tentokrát se jménem Ukol-CISLO-Vase_Jmeno-verze2.7z.

Termín odevzdání je v neděli před další lekcí, nejpozději 23:59. Pokud úkol nebo revizi odevzdáte později, prosím pošlete svému opravujícímu kouči/lektorovi email nebo zprávu přes FB.