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.
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.
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 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.
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.
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
- main
- 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.
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.
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.
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.
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.
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.