Příprava pro vývoj

Vítejte v tutoriálu o tvorbě webových aplikací pomocí servletů a JSP. Jedná se o technologie z Java Enterprise Edition. Tato první část se věnuje instalaci věcí, které pro to budeme potřebovat. Instalace je ukázána pouze pro operační systém Windows, takže pokud máte jiný operační systém, budete si pro instalaci jednotlivých věcí muset najít jiný návod.

Co pro vývoj potřebujeme

Abychom mohli začít s vývojem, potřebujeme si nainstalovat následující věci:

  • JDK - budeme programovat v Javě, takže potřebujeme Java Development Kit
  • Webový server - budou na něm běžet naše servlety
  • IDE - aplikace, ve které budeme programovat
  • Databáze - pokud budeme chtít v naší aplikaci pracovat s databází

Instalace JDK

Začneme s instalací JDK. Pokud programujete v Javě, tak jej již určitě máte nainstalovaný a můžete tuto část přeskočit. Já jsem se instalaci JDK do tohoto tutoriálu rozhodl přidat jen pro úplnost.

Jak JDK nainstalovat ukazuje následující slider s popsanými obrázky, který si můžete projít.

  • JDK instalace - část 1

    Jako první napíšeme do googlu, že chceme stáhnout JDK ("download JDK") a klikneme na první výsledek. Nebo můžete použít následující odkaz: https://www.oracle.com/java/technologies/downloads/. Otevře se vám webová stránka, kterou ukazuje obrázek.

  • JDK instalace - část 2

    Na stránce zascrollujeme trochu dolů a klikneme na "JDK 17" jak ukazuje obrázek. Můžete klidně použít i novější verzi Javy pokud chcete. Firmy většinou používají LTS (long time support) verze, protože mají dlouhodobou podporu. Asi bych doporučoval používat LTS verzi Javy i pro své osobní projekty. Poslední LTS verze je v době psaní tohoto tutoriálu JDK 21, ale je poměrně nová, proto jsem se v tutoriálu rozhodl použít JDK 17. Pokud si namísto toho chcete stáhnout JDK 21, tak klidně můžete.

  • JDK instalace - část 3

    Na stránce, která se nám otevřela, vybereme že chceme verzi pro Windows a stáhneme si instalační balíček (msi).

  • JDK instalace - část 4

    Stažený instalační balíček spustíme. Na první stránce klikneme na tlačítko "Next".

  • JDK instalace - část 5

    Na další stránce se nám ukáže, kam se JDK nainstaluje. Můžeme to změnit nebo nechat defaultní cestu a kliknout na "Next".

  • JDK instalace - část 6

    Poté na nás vyskočí okno, kde kliknutím na "Ano" instalačnímu programu povolíme, aby mohl provádět změny na našem zařízení.

  • JDK instalace - část 7

    Chvíli počkáme, než se JDK nainstaluje.

  • JDK instalace - část 8

    Po nainstalování můžeme kliknout na "Close".

  • JDK instalace - část 9

    Pokud si chceme ověřit, že se JDK skutečně nainstalovalo, tak můžeme v příkazovém řádku napsat příkaz "java -version".

Po instalaci JDK bychom také měli nastavit systémovou proměnnou JAVA_HOME, protože některé programy by bez ní neběželi správně. Eclipse IDE to třeba nepotřebuje, ale například Tomcat (webový server, který budeme používat) ano. Následující slider ukazuje, jak systémovou proměnnou JAVA_HOME nastavit.

  • Nastavení systémové proměnné JAVA_HOME - část 1

    V průzkumníku souborů si otevřeme složku, kam se nám JDK nainstalovalo a zkopírujeme si cestu ke složce bin, která se tam nachází.

  • Nastavení systémové proměnné JAVA_HOME - část 2

    Do vyhledávače u Start tlačítka můžeme napsat třeba "proměnné prostředí" a vybrat možnost "Upravit proměnné prostředí systému", jak ukazuje obrázek.

  • Nastavení systémové proměnné JAVA_HOME - část 3

    V okně které se nám otevře klikneme na tlačítko "Proměnné prostředí...".

  • Nastavení systémové proměnné JAVA_HOME - část 4

    V části Systémové proměnné vybereme "Path" a klikneme na "Upravit...".

  • Nastavení systémové proměnné JAVA_HOME - část 5

    Přidáme novou hodnotu a vložíme tam zkopírovanou cestu k JDK bin složce.

  • Nastavení systémové proměnné JAVA_HOME - část 6

    Klikneme na tlačítko "OK".

  • Nastavení systémové proměnné JAVA_HOME - část 7

    Teď přidáme novou systémovou proměnnou kliknutím na tlačítko "Nová...".

  • Nastavení systémové proměnné JAVA_HOME - část 8

    Systémovou proměnnou pojmenujeme jako JAVA_HOME a jako hodnotu jí nastavíme cestu ke složce s JDK (ne k bin složce). Poté klikneme na "OK".

  • Nastavení systémové proměnné JAVA_HOME - část 9

    Systémovou proměnnou máme nastavenou. Okno můžeme zavřít kliknutím na "OK".

  • Nastavení systémové proměnné JAVA_HOME - část 10

    Jestli máme systémovou proměnnou JAVA_HOME správně nastavenou můžeme ověřit tak, že si otevřeme příkazový řádek a napíšeme "echo %JAVA_HOME%". Měla by se nám vypsat její hodnota.

Instalace Tomcatu

Jako webový server budeme používat Tomcat. Jak jsem již psal na začátku, tak servlety a JSP jsou součástí Java Enterprise Edition (Java EE). Co za technologie do Javy EE patří, si můžete prohlédnout v tomto listu. Java EE je ale v podstatě jen taková abstraktní kolekce specifikací. Potřebujeme její implementaci - to znamená nějaký aplikační server. Na tomto serveru budeme své aplikace spouštět.

Tomcat se liší od jiných aplikačních serverů jako je třeba GlassFish nebo WildFly tím, že podporuje jen malé množství technologií, které Java EE nabízí. Co podporuje za technologie si můžete přečíst třeba v této StackOverflow otázce, která obsahuje velmi dobrou odpověď. Pokud bychom ale chtěli, tak jak se můžete v odpovědi této otázky dočíst, můžeme si nějaké technologie z Javy EE přidat sami poskytnutím JAR souborů.

V následujícím slideru se dozvíte, jak Tomcat nainstalovat.

  • Instalace Tomcatu - část 1

    Otevřeme si oficiální webové stránky Tomcatu: https://tomcat.apache.org/.

  • Instalace Tomcatu - část 2

    V části download vybereme Tomcat 9. Pokud chcete, tak si můžete stáhnout třeba i novější Tomcat 10 ale ten narozdíl od Java EE implementuje již Jakarta EE. Balíčky jsou tedy přejmenované z javax.* na jakarta.*. Je to proto, že Java EE se od Oracle přesunula pod Eclipse Foundation a časem také došlo k jejímu přejmenování na Jakarta EE. Více si o historii Javy EE můžete přečíst třeba zde.

  • Instalace Tomcatu - část 3

    Otevře se nám stránka, kde můžeme Tomcat 9 stáhnout.

  • Instalace Tomcatu - část 4

    Zascrollujeme na stránce trochu dolů a stáhneme si instalační balíček, jak ukazuje obrázek.

  • Instalace Tomcatu - část 5

    Instalační balíček si spustíme. Vyskočí na nás okno, které se zeptá, jestli aplikaci povolíme aby na našem zařízení mohla provádět změny. Vybereme "Ano".

  • Instalace Tomcatu - část 6

    Poté se nám zobrazí uvítací stránka instalační aplikace. Můžeme kliknout na tlačítko "Next".

  • Instalace Tomcatu - část 7

    Souhlasíme s licenčními podmínkami kliknutím na tlačítko "I Agree".

  • Instalace Tomcatu - část 8

    V následující části si můžeme zvolit co všechno chceme nainstalovat. Můžeme vybrat že chceme všechno.

  • Instalace Tomcatu - část 9

    Na této stránce můžeme zvolit port, na kterém bude Tomcat běžet a také nastavit uživatelské jméno a heslo. Port můžete nechat 8080 a uživatelské jméno a heslo můžete nastavit obě třeba na "admin".

  • Instalace Tomcatu - část 10

    Teď musíme nastavit cestu k JRE. To se nám nainstalovalo společně s JDK. Takže k němu zadejte cestu a klikněte na "Next".

  • Instalace Tomcatu - část 11

    V této části můžeme nastavit, kam se má Tomcat nainstalovat. Můžete to změnit nebo nechat defaultní cestu a kliknout na "Install".

  • Instalace Tomcatu - část 12

    Chvíli počkáme, než se nám Tomcat nainstaluje.

  • Instalace Tomcatu - část 13

    Po instalaci můžeme odškrtnout, že nechceme zobrazit Readme a kliknout na "Finish".

  • Instalace Tomcatu - část 14

    Tomcat se nám hned spustí.

  • Instalace Tomcatu - část 15

    Když v pravé části hlavního panelu klikneme na rozbalovací šipku, tak uvidíme, že nám pro Tomcat přibyla nová ikona.

  • Instalace Tomcatu - část 16

    Pokud v prohlížeči navštívíme URL http://localhost:8080/, tak by se nám měla zobrazit stránka, kterou ukazuje obrázek. Tomcat se nám úspěšně nainstaloval a spustil.

  • Instalace Tomcatu - část 17

    Pokud na Tomcat ikonu klikneme a vybereme "Configure...", tak se nám zobrazí okno, kde můžeme Tomcat konfigurovat.

  • Instalace Tomcatu - část 18

    Jelikož budeme Tomcat spouštět přímo v IDE, tak jej můžeme prozatím vypnout kliknutím na tlačítko "Stop", jak ukazuje obrázek.

Instalace Eclipse IDE

K programování potřebujeme nějaké vývojové prostředí (IDE), abychom mohli komfortně psát kód a snadněji se nám vyvíjeli aplikace. Pokud programujete v Javě, tak již pravděpodobně nějaké nainstalované máte. Můžete jej tedy klidně použít, akorát budete muset přijít na to, jak jej nakonfigurovat pro použití s Tomcatem. V tomto tutoriálu si ale ukážeme, jak nainstalovat a nakonfigurovat IDE jménem Eclipse. Instalaci ukazuje následující slider.

  • Instalace Eclipse IDE - část 1

    Otevřeme si oficiální webové stránky Eclipsu: https://www.eclipse.org/. V horním menu stránky klikneme vpravo na tlačítko "Download".

  • Instalace Eclipse IDE - část 2

    Otevřela se nám stránka s možnostmi pro stažení.

  • Instalace Eclipse IDE - část 3

    Zascrollujeme na stránce trochu dolů a klikneme na možnost "Download Packages", jak ukazuje obrázek.

  • Instalace Eclipse IDE - část 4

    Otevřela se nám stránka, která obsahuje odkazy ke stažení Eclipse IDE předkonfigurované pro různé typy developerů.

  • Instalace Eclipse IDE - část 5

    Zascrollujeme na stránce trochu dolů a stáhneme si "Eclipse IDE for Enterprise Java and Web Developers".

  • Instalace Eclipse IDE - část 6

    Klikneme na tlačítko "Download".

  • Instalace Eclipse IDE - část 7

    Stáhnul se nám zazipovaný soubor. Eclipse nemá instalační balíček. Můžeme na něj kliknout pravým tlačítkem a vybrat "Extrahovat vše...".

  • Instalace Eclipse IDE - část 8

    Můžeme vybrat složku kam se má Eclipse extrahovat a kliknout na "Extrahovat".

  • Instalace Eclipse IDE - část 9

    Otevřeme si složku, kde jsme si Eclipse rozbalili.

  • Instalace Eclipse IDE - část 10

    Ve složce eclipse se nachází soubor "eclipse.exe". Tím můžeme Eclipse IDE spustit.

  • Instalace Eclipse IDE - část 11

    Před spuštěním se nás to zeptá, jakou složku chceme použít jako workspace. Jedná se jednoduše o složku, která bude pro Eclipse sloužit jako pracovní prostředí a ve které budeme ukládat zdrojové kódy našich projektů. Můžeme vybrat jakoukoliv složku chceme a kliknout na "Launch".

  • Instalace Eclipse IDE - část 12

    Počkáme než se Eclipse spustí.

  • Instalace Eclipse IDE - část 13

    Po spuštění uvidíme něco podobného, co ukazuje obrázek.

Jak Eclipse používat tu popisovat nebudu. Jen jsem vám ukázal jak jej stáhnout a na to jak jej používat si můžete najít nějaký jiný tutoriál.

Vytvoření projektu

Teď již máme nainstalováno vše, co je potřebné pro vytvoření jednoduchého projektu. Pustíme se tedy do toho a vytvoříme si jednoduchou "Hello World" aplikaci. Až ji budeme mít hotovou, tak si ukážeme, jak do Eclipse přidat Tomcat server a aplikaci si spustíme.

Budeme vytvářet Maven projekt. Pokud nevíte co to Maven je nebo s ním nemáte žádné zkušenosti, tak nevadí. Já na něj v době psaní tohoto tutoriálu také nejsem žádný expert. Nebudeme jej nijak složitě konfigurovat. Jen si ukážeme jak si vytvořit projekt a dozvíte se co to je. Jak Maven projekt vytvořit v Eclipse ukazuje následující slider.

  • Vytvoření Maven projektu v Eclipse IDE - část 1

    V horním menu klikneme na "File" a vybereme "New" > "Maven Project".

  • Vytvoření Maven projektu v Eclipse IDE - část 2

    Zaškrtneme že chceme vytvořit jednoduchý projekt (přeskočíme výběr archetypu), jak ukazuje obrázek a klikneme na tlačítko "Next".

  • Vytvoření Maven projektu v Eclipse IDE - část 3

    Nastavíme Group Id, Artifact Id, packaging a název. Poté můžeme kliknout na "Finish".

  • Vytvoření Maven projektu v Eclipse IDE - část 4

    Projekt se nám vytvořil.

V následující ukázce si můžete po otevření levého panelu prohlédnout adresářovou strukturu našeho vytvořeného projektu.

  • src
    • main
      • java
      • resources
      • webapp
    • test
      • java
      • resources
  • target
  • src/main
  • src/test
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>io.github.jirkasa</groupId>
    <artifactId>hello-world</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>hello-world</name>
</project>

Projekt vlastně obsahuje standardní Maven adresářovou strukturu. V kořenové složce projektu máme složku src, target a soubor pom.xml. Složka src slouží pro ukládání souborů naší aplikace. Do složky target nám Maven naši aplikaci sestavuje, nic do ní tedy neukládáme. Tady na webu v ukázkách bude tato složka vždy prázdná, ale pokud si ji otevřete u sebe, tak tam uvidíte vaši sestavenou aplikaci. Soubor pom.xml slouží ke konfiguraci Maven projektu. Můžeme si do něj třeba napsat, že chceme používat nějakou Java knihovnu. Maven si obsah souboru pom.xml přečte a automaticky nám knihovnu stáhne abychom ji mohli používat. Nemusíme si ji tedy stahovat ručně. A to je jen jedna z věcí, se kterými nám Maven pomáhá. Tento kurz ale není o Mavenu, takže nebudu zabíhat do detailů. Také ani nemůžu, protože v době psaní tohoto tutoriálu toho o něm ještě moc nevím.

Složka src dále obsahuje složky main a test. Složka main slouží pro zdrojové soubory naší aplikace a složka test pro její testy. Pokud bychom tedy chtěli pro naši aplikaci napsat testy, tak je umístíme do složky test. Ve složce main najdete zatím prázdné složky jménem java, resources a webapp. Zde je popsáno k čemu slouží:

  • src/main/java - obsahuje Java soubory (obsahuje vlastně klasickou hierarchii pro java balíčky)
  • src/main/resources - může obsahovat třeba různé XML soubory, .properties soubory, atd. (prostě věci, které nejsou Java soubory)
  • src/main/webapp - obsahuje soubory pro webovou aplikaci (třeba různé javascript soubory, CSS styly, atd.)

Pokud jste ještě nikdy v Eclipse nevytvářeli žádný projekt pomocí Mavenu nebo jej máte nově naintalovaný, tak po otevření souboru pom.xml uvidíte, že vám Eclipse hlásí chybu. Jak tuto chybu vyřešit ukazuje následující slider.

  • Vyřešení Javadoc chyby v Eclipse IDE - část 1

    Po otevření pom.xml vidíme, že nám Eclipse hlásí chybu.

  • Vyřešení Javadoc chyby v Eclipse IDE - část 2

    V horním menu klikneme na "Window" a vybereme "Preferences".

  • Vyřešení Javadoc chyby v Eclipse IDE - část 3

    Otevřelo se nám okno, ve kterém vybereme "Maven" a zaškrtneme "Download Artifact Javadoc". Poté klikneme na tlačítko "Apply and Close".

Chybu v pom.xml jsme opravili a můžeme tedy začít s tím, že si náš Maven projekt nakonfigurujeme. Jak jsem již psal, používá se k tomu soubor pom.xml. První věc, kterou uděláme, je přidání elementu properties, kde nastavíme pár vlastností, jak ukazuje následující ukázka.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>io.github.jirkasa</groupId>
    <artifactId>hello-world</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>hello-world</name>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>17</java.version>
        <maven.compiler.source>${java.version}</maven.compiler.source>
        <maven.compiler.target>${java.version}</maven.compiler.target>
    </properties>
</project>

Vlastnost project.build.sourceEncoding a project.reporting.outputEncoding nastavuje kódování. K čemu přesně to slouží nevím, jen přidávám tyto řádky kódu do každého Maven projektu, který vytvářím. Jak jsem již psal, tak Mavenu v době psaní tohoto tutoriálu zatím moc nerozumím. Na dalším řádku nastavujeme vlastnost java.version, kterou používáme na posledních dvou řádcích, pomocí kterých nastavujeme verzi Javy, která se má použít.

Nyní si nadefinujeme, co za knihovny chceme v našem projektu použít. Budeme potřebovat servlety, takže si je v pom.xml připíšeme do části dependencies, jak ukazuje následující ukázka.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>io.github.jirkasa</groupId>
    <artifactId>hello-world</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>hello-world</name>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>17</java.version>
        <maven.compiler.source>${java.version}</maven.compiler.source>
        <maven.compiler.target>${java.version}</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
</project>

Kód, který ukázka ukazuje, jsem zkopíroval z www.mvnrepository.com. Tento web můžete použít k vyhledávání Maven repozitářů a kopírovat si odtamtud kód, který si můžete přidávat do části dependencies pro jejich použití. Slovo dependencies vlastně česky znamená závislosti. Definujeme tam tedy věci, na kterých je náš projekt závislý. Můžeme mít libovolný počet závislostí (dependency elementů). Každý dependency element se skládá z vlastností groupId, artifactId, version a scope. Co tyto jednotlivé vlastnosti znamenají popisuje následující seznam:

  • groupId - jedinečný název společnosti nebo skupiny, která projekt vytvořila
  • artifactId - unikátní název projektu
  • version - verze projektu
  • scope - může být typu "compile", "provided", "runtime", "test", "system" nebo "import" (v našem případě používáme provided - to znamená, že implementaci pro servlety nám poskytne Tomcat)

Teď již máme nastaveno vše pro to, abychom mohli začít se samotným programováním servletů. Vytvoříme tedy třídu, kterou pojmenujeme třeba jako HelloWorldServlet a nastavíme jí, že dědí od třídy HttpServlet z balíčku javax.servlet.http.

import javax.servlet.http.HttpServlet;

public class HelloWorldServlet extends HttpServlet {

}

Jelikož jde v této části jen o to, abychom si vůbec zkusili spustit alespoň úplně jednoduchý projekt, tak tu nebudu zatím nic podrobně vysvětlovat. Náš první servlet jen vyrenderuje stránku s nápisem "Hello World". Můžete si tedy jen zkopírovat kód z následující ukázky.

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HelloWorldServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        try (PrintWriter out = res.getWriter()) {
            out.println("<!DOCTYPE html>");
            out.println("<html>");
            out.println("<head>");
            out.println("<meta charset=\"UTF-8\">");
            out.println("<title>Hello World</title>");
            out.println("</head>");
            out.println("<body>");
            out.println("<h1>Hello World</h1>");
            out.println("</body>");
            out.println("</html>");
        }
    }
}

Teď musíme Tomcatu dát vědět, kdy má náš servlet spustit. To můžeme nastavit pomocí souboru web.xml. Ten se umisťuje do složky WEB-INF, kterou můžeme vytvořit ve složce webapp. Z následující ukázky si můžete pro tento soubor zkopírovat základní kód. Nebo si jej můžete zkopírovat odsud.

  • src/main/webapp/WEB-INF
  • src/main/webapp/WEB-INF
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://Java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
id="WebApp_ID" version="3.0">
</web-app>

Pomocí elementu servlet, společně s jeho podelementy servlet-name a servlet-class můžeme ve web.xml náš vytvořený servlet nadefinovat. Jak to udělat ukazuje následující ukázka. Pomocí elementu servlet-name nastavujeme název servletu a pomocí elementu servlet-class pro něj specifikujeme třídu.

  • src/main/webapp/WEB-INF
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://Java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
id="WebApp_ID" version="3.0">
    <servlet>
        <servlet-name>HelloWorld</servlet-name>
        <servlet-class>HelloWorldServlet</servlet-class>
    </servlet>
</web-app>

Poté můžeme nastavit, kdy se má servlet použít. K tomu slouží element servlet-mapping, kde pomocí elementu servlet-name nastavíme servlet a pomocí elementu url-pattern URL, pro které se má servlet zavolat.

  • src/main/webapp/WEB-INF
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://Java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
id="WebApp_ID" version="3.0">
    <servlet>
        <servlet-name>HelloWorld</servlet-name>
        <servlet-class>HelloWorldServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>HelloWorld</servlet-name>
        <url-pattern>/hello-world</url-pattern>
    </servlet-mapping>
</web-app>

Naše první aplikace je hotová a připravena na spuštění v Tomcat serveru.

Přidání Tomcat serveru do Eclipse

Abychom si naši aplikaci mohli spustit, tak si musíme do Eclipse přidat Tomcat server a aplikaci na něj nasadit. Postup pro přidání Tomcat serveru do Eclipse ukazuje následující slider.

  • Přidání Tomcat serveru do Eclipse IDE - část 1

    V záložce "Servers" vybereme, že chceme vytvořit nový server, jak ukazuje obrázek.

  • Přidání Tomcat serveru do Eclipse IDE - část 2

    Otevřelo se nám okno, které slouží pro výběr typu serveru. Rozbalíme složku "Apache".

  • Přidání Tomcat serveru do Eclipse IDE - část 3

    Nainstalovali jsme si verzi Tomcatu 9, takže vybereme "Tomcat v9.0 Server". Poté klikneme na tlačítko "Next".

  • Přidání Tomcat serveru do Eclipse IDE - část 4

    V tomto okně zvolíme složku, do které se nám Tomcat nainstaloval a klikneme na "Finish".

  • Přidání Tomcat serveru do Eclipse IDE - část 5

    V záložce "Servers" můžeme vidět, že se nám Tomcat server vytvořil. Dvojklikem na něj klikneme.

  • Přidání Tomcat serveru do Eclipse IDE - část 6

    Otevřelo se nám okno, kde můžeme Tomcat různě nastavovat. Pokud není nastaven Tomcat admin port, tak jej můžete nastavit třeba na port 9000, jak ukazuje obrázek. Poté to uložíme pomocí ctrl + s.

Poté co jsme si do Eclipse Tomcat server přidali, tak si na něm můžeme naši aplikaci spustit. Následující slider ukazuje, jak to můžeme udělat.

  • Spuštění Tomcat serveru v Eclipse IDE - část 1

    V záložce "Servers" klikneme pravým tlačítkem na Tomcat server a vybereme možnost "Add and Remove...".

  • Spuštění Tomcat serveru v Eclipse IDE - část 2

    Otevřelo se nám okno, které slouží pro přidání projektů ke spuštění na serveru. Vybereme náš projekt a klikneme na tlačítko "Add".

  • Spuštění Tomcat serveru v Eclipse IDE - část 3

    Projekt se nám přesunul z části "Available" do části "Configured". Můžeme kliknout na tlačítko "Finish".

  • Spuštění Tomcat serveru v Eclipse IDE - část 4

    Projekty, které máme pro server nakonfigurované, můžeme vidět, pokud si kliknutím na šipku jak ukazuje obrázek, rozbalíme rozbalovací seznam.

  • Spuštění Tomcat serveru v Eclipse IDE - část 5

    Server můžeme spustit tak, že si na něj klikneme pravým tlačítkem a vybereme "Debug" nebo "Start". Pro vývoj je lepší vybrat "Debug", protože potom máme třeba možnost nastavovat breakpointy.

  • Spuštění Tomcat serveru v Eclipse IDE - část 6

    Pokud na nás vyskočí okno, že Firewall zablokoval některé funkce aplikace, tak vybereme "Povolit přístup".

  • Spuštění Tomcat serveru v Eclipse IDE - část 7

    Po spuštění u Tomcat serveru uvidíme text "[Debugging, Synchronized]".

  • Spuštění Tomcat serveru v Eclipse IDE - část 8

    Naši aplikaci můžeme navštívit na adrese http://localhost:8080/hello-world/hello-world.

Instalace MySQL

V části o práci s databází budeme pracovat s databází. Budeme si tedy muset nějakou nainstalovat. V tutoriálu použijeme MySQL, ale pokud chcete použít něco jiného (třeba PostgreSQL), tak samozřejmě můžete. Následující slider ukazuje, jak můžeme MySQL nainstalovat.

  • Instalace MySQL - část 2

    Vybereme, že chceme stáhnout jinou verzi než Innovation. Obrázek ukazuje verzi 8.0.35.

  • Instalace MySQL - část 3

    Zascrollujeme trochu dolů a vybereme, že chceme stáhnout instalační balíček (klikneme na "Go to Download Page", jak ukazuje obrázek).

  • Instalace MySQL - část 4

    Máme možnost vybrat ze dvou instalačních balíčků. První potřebuje přístup k internetu a je malý. Druhý nepotřebuje přístup k internetu ale je větší. Vybereme, že chceme stáhnout ten první.

  • Instalace MySQL - část 5

    Na stránce, která se nám zobrazila, klikneme dole na "No thanks, just start my download". Instalační balíček se nám stáhne.

  • Instalace MySQL - část 6

    Po spuštění instalačního balíčku na nás vyskočí okno, která se nás zeptá, zda chceme aplikaci povolit aby mohla na našem zařízení provádět změny. Vybereme "Ano".

  • Instalace MySQL - část 7

    Chvíli počkáme.

  • Instalace MySQL - část 8

    Znovu se nás to zeptá, jestli chceme povolit aby aplikace mohla na našem zařízení provádět změny. Vybereme "Ano".

  • Instalace MySQL - část 9

    Instalační program se nám spustil. Na úvodní obrazovce vybereme, že chceme provádět custom instalaci a klikneme na tlačítko "Next".

  • Instalace MySQL - část 10

    Na této obrazovce si můžeme vybrat produkty, které chceme nainstalovat. Vybereme MySQL server, jak ukazuje obrázek.

  • Instalace MySQL - část 11

    Také si nainstalujeme MySQL Workbench. Jedná se o aplikaci, která nám umožňuje s databází pracovat pomocí GUI.

  • Instalace MySQL - část 12

    Po výběru věcí, které chceme nainstalovat, klikneme na tlačítko "Next".

  • Instalace MySQL - část 13

    Na této obrazovce můžeme kliknutím na "Execute" stáhnout produkty, které jsme si na předchozí obrazovce vybrali.

  • Instalace MySQL - část 14

    Chvíli počkáme, než se nám produkty stáhnou.

  • Instalace MySQL - část 15

    Po stažení můžeme kliknout na tlačítko "Next". Pokud z nějakého důvodu stažení nějakého produktu selže, tak se pomocí tlačítka "Back" vraťte zpět a znovu to všechno stáhněte (nejen to co selhalo). Mě se to při instalaci stalo a vybral jsem ke stažení jen to co selhalo. To co se mi předtím úspěšně stáhlo se mi nenainstalovalo. Proto na obrázku vidíte jen stažený MySQL server. MySQL Workbench jsem potom instaloval samostatně.

  • Instalace MySQL - část 16

    Na této obrazovce můžeme kliknout na tlačítko "Next".

  • Instalace MySQL - část 17

    Na této obrazovce můžeme kliknutím na "Next" nakonfigurovat náš MySQL server.

  • Instalace MySQL - část 18

    Spustil se nám průvodce pro konfiguraci MySQL serveru. Ujistíme se, že "Config Type" je nastavený na "Development Computer". To znamená, že MySQL server na našem počítači zabere co nejméně operační paměti. U všech možností můžeme nechat defaultní hodnoty a kliknout na tlačítko "Next".

  • Instalace MySQL - část 19

    Na této obrazovce můžeme vybrat, jestli chceme používat silnější šifrování hesla, které je dostupné od verze 8. Pokud tedy nechceme podporovat starší verze MySQL, tak necháme vybranou doporučenou možnost a klikneme na "Next".

  • Instalace MySQL - část 20

    Na této obrazovce zvolíme heslo pro uživatele root, který bude mít přístup ke všemu na našem serveru. Klidně můžeme zvolit třeba heslo "admin", jelikož databázi máme jen pro vývoj. Poté klikneme na tlačítko "Next".

  • Instalace MySQL - část 21

    Na této obrazovce můžeme nechat defaultní nastavení a kliknout na "Next". Můžete si všimnout možnosti "Start the MySQL Server at System Startup". Tato možnost nastavuje, že se MySQL server automaticky spustí při zapnutí našeho počítače. Nemusíme jej tedy spouštět ručně. Určitě doporučuji tuto možnost nechat zapnutou, protože MySQL zabírá jen malou část paměti a rozhodně nezhorší výkon vašeho počítače.

  • Instalace MySQL - část 22

    Na této obrazovce necháme defaultní možnost a klikneme na "Next".

  • Instalace MySQL - část 23

    Na poslední obrazovce průvodce konfigurací MySQL serveru můžeme aplikovat změny, které jsme provedli, kliknutím na tlačítko "Execute".

  • Instalace MySQL - část 24

    Chvíli počkáme.

  • Instalace MySQL - část 25

    Po nakonfigurování můžeme kliknout na "Finish".

  • Instalace MySQL - část 26

    Vrátili jsme se na obrazovku, ze které se nám průvodce konfigurací MySQL serveru spustil. Můžeme kliknout na tlačítko "Next".

  • Instalace MySQL - část 27

    Instalace je hotová. Instalační program můžeme zavřít kliknutím na "Finish". Pokud v budoucnu budete chtít něco doinstalovat, tak můžete instalační program jednoduše spustit znovu.

Pokud si chceme ověřit, že se nám MySQL server nainstaloval, tak si můžeme třeba zkusit spustit klienta příkazového řádku MySQL. Jedná se o aplikaci, pomocí které můžeme s MySQL serverem komunikovat prostřednictvím příkazového řádku. Jiná možnost je použít nějakou GUI aplikaci, jako je třeba MySQL Workbench, kterou jsme si nainstalovali společně s MySQL serverem. Následující slider ukazuje, jak můžeme klienta příkazového řádku spustit.

  • Spuštění MySQL klienta příkazového řádku - část 1

    Do vyhledávače u Start tlačítka můžeme napsat "mysql" a vybrat command line client aplikaci, jak ukazuje obrázek.

  • Spuštění MySQL klienta příkazového řádku - část 2

    Po spuštění zadáme heslo, které jsme si při instalaci MySQL serveru nastavili a stiskneme Enter.

  • Spuštění MySQL klienta příkazového řádku - část 3

    Pokud bylo heslo správné, tak jsme se úspěšně přihlásili.

  • Spuštění MySQL klienta příkazového řádku - část 4

    Můžeme si třeba zkusit vypsat všechny databáze dotazem "SHOW DATABASES;".

Pro tuto první část je to vše. Instalaci máme za sebou a zkusili jsme si vytvořit první jednoduchý projekt. V dalších částech tutoriálu se tedy můžeme servlety a JSP začít učit více do hloubky.