Lab01 - Servlet, JSP, JDBC i serwer Tomcat [ ver. ZTI.2025.03.16.003 ]

Zawartość strony

Plan zajęć
Pierwszy servlet
Servlet, adnotacje
Servlet, http atrybuty
Servlet, formularz
Servlet, baza danych
JSP, JavaBean
JSP, JSTL
JSP, skryplet
Servlet, JSP, MVC
Zaliczenie laboratorium
Linki

Zadania realizowane w ramach laboratorium

Do realizacji zajęć ZTI zostaną wykorzystane następujące narzędzia i technologie.

Środowisko uruchomieniowe Jakarta EE
Zintegrowane środowisko do tworzenia aplikacji Jakarta EE - IDE IDEA JetBrains
Serwer aplikacyjny Jakarta EE - Tomcat 10
Baza danych PostgreSQL dostępna na serwerze pascal.fis.agh.edu.pl.

https://stackoverflow.com/questions/63854849/where-can-i-find-to-create-new-servlet-file-with-intellij

Przygotowanie szablonu projektu w ramach IDE IDEA JetBrains

Lokalny serwer aplikacyjny Apache Tomcat udostęniony w ramach IDE IDEA JetBrains
Wszystkie ćwiczenia w ramach laboratorium umieścimy w ramach projektu ZTI_Lab01 typu "Web application" (przykładowy ekran tworzenia projektu rys.1). W trakcie tworzenia projektu należy dołaczyć również połaczenie z serwerem Tomcat 10. Po akceptacji ustwień na pozostałych stronach kreatora zostanie utowrzony projekt. Przykładowa struktura utworzonego projektu została przedstawiony na rys 2. W ramach projektu został utworzony servlet oraz skrypt jsp. Na rys. 3 przedstawiono ustawienia serwera Tomcat z ustawieniem dostęu do tworzonego projektu ( URL ). Na rys.4 przedstawiono modyfikację parametrów w pliku "workspace.xml".

Rys.1 Przykładowy ekran tworzenia projektu Web application

Rys.2 Przykładowy ekran utworzonego projektu Web application

Rys.3 Konfiguracja parametrów serwera Tomcat

Rys.4 Modyfikacja parametrów pliku "workspace.xml" (pliki konfiguracyjne .idea).
Kolejne servlety ( skrypty JSP ) będą uruchamiane w ramach pakietu ZTI_Lab01

W ramach zajęć zostaną przedstawione poniższe przykłady.

Servlet z plikiem deskryptora wdrożenia web.xml
Servlet z adnotacją @WebServlet
Odczyt parameterów żądania http w servlecie
Obsługa metody post i get w servlecie
Odczyt danych z bazy danych w servlecie, interfejs JDBC
Skrypt JSP i obsługa JavaBean
Biblioteka JSTL i przetwarzanie pliku XML w skrypcie JSP
Polecenia języka Java w skrypcie JSP (skryplet)
Prosta implementacja wzorca MVC w JEE

Servlet z plikiem deskryptora wdrożenia web.xml
1. Tworzymy servlet w ramach projektu o nazwie DemoServlet.java (pakiet ZTI_Lab01) z wykorzystaniem menu kontekstowego wybierając "servlet". Nazwa naszego servleu to "DemoServlet"
2. Uzupełniamy zawartość klasy dodatkową informacją w metodzie doGet() zgodnie z poniższym wzorcem.
  Servlet DemoServlet.java - ( [listing dokumentu] [link do dokumentu]
```
   response.getWriter().append("Served at: ").append(request.getContextPath());
response.setContentType("text/plain");
PrintWriter out = response.getWriter();
out.println ("\nWelcome, First Servlet");
out.println ("localhost:8080/zti_lab01/Servlet01");
```
3. Modyfikujemy plik deskryptora wdrożenia web.xml (katalog WEB-INF) wprowadzając dodatkowe linie:
```
    <servlet>
        <servlet-name>Ex01</servlet-name>
        <servlet-class>zti.zti_lab01a.DemoServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Ex01</servlet-name>
        <url-pattern>/Servlet01</url-pattern>
    </servlet-mapping>
```
4. Serwlet jest dostępny w przeglądarce pod adresem URL http://localhost:8080/zti_lab01/Servlet01.
Servlet z adnotacją @WebServlet
1. Tworzymy servlet w ramach projektu o nazwie LabIndex.java (pakiet ZTI_Lab01) z wykorzystaniem menu kontekstowego i wybierając "servlet". Nazwa naszego servleu to "LabIndex"
2. Uzupełniamy zawartość klasy dodatkową informacją w metodzie doGet() zgodnie z poniższym wzorcem.
  Servlet LabIndex.java - ( [listing dokumentu] [link do dokumentu]
```
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
        out.println ("<title>ZTI - Lab01</title>");

		out.println ("<h1>ZTI - Lab01 : Servlets and JSP scripts </h1>");
		out.println ("<ol>");
		out.println ("<li><a href='Servlet01'>[Servlet] First Servlet</a></li>");
		out.println ("</ol>");		
```
3. Modyfikujemy plik deskryptora wdrożenia web.xml dodając przedstawioną poniżej linię. Umożliwi to automatyczne startowanie servletu po podaniu URL'a do projektu: http://localhost:8080/zti_lab01/.
```
    <welcome-file-list>
      <welcome-file>LabIndex</welcome-file>
    </welcome-file-list>
```

Odczyt parameterów żądania http w servlecie

Tworzymy servlet w ramach projektu o nazwie ReadReqParam.java (pakiet ZTI_Lab01).

Uzupełniamy zawartość pliku zgodnie z poniższym wzorcem:

Servlet ReadReqParam.java - ( [listing dokumentu] [link do dokumentu]

	    PrintWriter out= response.getWriter();
	    out.println("Protocol: " + request.getProtocol());
	    out.println("Scheme: " + request.getScheme());
	    out.println("ServerName: " + request.getServerName());
	    out.println("ServerPort: " + request.getServerPort());
	    out.println("RemoteAddr: " + request.getRemoteAddr());
	    out.println("RemoteHost: " + request.getRemoteHost());
	    out.println("Method: " + request.getMethod());

Dodajemy do pliku LabIndex.java poniższą linię z wywołaniem utworzonego servletu.

out.println ("<li><a href='ReadReqParam'>[Servlet] Read Request Parameter</a></li>");

Obsługa metod http 'post' i 'get' w servlecie

Tworzymy nowy servlet w ramach projektu o nazwie ReadFormData.java (pakiet ZTI_Lab01).

Uzupełniamy zawartość pliku zgodnie z poniższym wzorcem:

Servlet ReadFormData.java - ( [listing dokumentu] [link do dokumentu]

	    PrintWriter out= response.getWriter();
	    String fname = request.getParameterValues("fname")[0] ;
	    String lname = request.getParameterValues("lname")[0] ;
	    String city = request.getParameterValues("city")[0] ;
	    out.println("<h1>Dane przesłane z formularza</h1>") ;
	    out.println("<table>") ;
		out.println("<tr><td>Imię: </td><td>" +  fname + "</td></tr>");
		out.println("<tr><td>Nazwisko: </td><td>" +  lname + "</td></tr>");
		out.println("<tr><td>Miasto: </td><td>" +  city + "</td></tr>");
		out.println("</body></html>");

Tworzymy plik FormData.html zawierający formularz dla opracowanego powyżej servletu.

Skrypt FormData.html - ( [listing dokumentu] [link do dokumentu]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formularz</title>
</head>
<body>
	<h1>Wprowadź dane do formularza</h1>
	<form name="form1" method="post" action="ReadFormData">
		<label>Imię: </label> <input type="text" name="fname"></input><br />
		<label>Nazwisko: </label> <input type="text" name="lname"></input><br />
		<label>Miasto: </label> <input type="text" name="city"></input><br /> <input
			type="submit"></input>
	</form>
</body>
</html>

Dodajemy do pliku LabIndex.java linię z wywołaniem utworzonego servletu.

out.println ("<li><a href='FormData.html'>[Servlet] Read the data from the html form</a></li>");

Odczyt danych z bazy danych w servlecie, interfejs JDBC

W ramach projektu wykorzystamy bazę danych utworzoną w ramach serwisu DBaaS ElephantSQL
- Link do DBaaS ElephantSQL - https://www.elephantsql.com/
- Tworzymy konto i bazę danych w planie "Tiny Turtle"
- Tworzymy tabelę person z danymi zgodnie z poniższym poleceniem SQL
```
CREATE TABLE person ( id serial primary key, fname varchar, lname varchar, city varchar );
INSERT INTO person (fname, lname, city) VALUES ('Adam', 'Abacki', 'Szczecin');                                                                   
```
- Wprowadzamy kilka rekordów danych
- Obsługa bazy danych PostgreSQL w ramach projektu wymaga dodania odpowiedniego sterownika JDBC w wersji 4. Aktualna informacja o sterownikaca znajduje się na stronie: https://jdbc.postgresql.org/.
- Dodajemy odpowiedni wpis w pliku zależności Maven - pom.xml, który umożliwi automatyczne dodanie sterownika do projektu.
```
<dependency>
  <groupId>org.postgresql</groupId>
  <artifactId>postgresql</artifactId>
  <version>42.5.4</version>
</dependency>
```
Tworzymy servlet w ramach projektu o nazwie ReadRecDB.java (pakiet ZTI_Lab01).

Modyfikuje zawartość servletu zgodnie z poniższym wzorcem.

Servlet ReadRecDB.java - ( [listing dokumentu] [link do dokumentu]

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    		throws ServletException, IOException {
	    PrintWriter out= response.getWriter();
	    out.println("<h1>Dane z bazy danych PostgreSQL - ElephantSQL</h1>") ;
	 
		try
		{
			 // Class.forName("org.apache.derby.jdbc.ClientDriver");
             // url = "jdbc:postgresql://host:port/database" 
             Class.forName("org.postgresql.Driver");
			 String url = "jdbc:postgresql://<<hostname>>:5432/<<dbname>>";
			 String username = "<<user>>" ;
			 String password = "<<password>>" ;
			 Connection conn = DriverManager.getConnection(url, username, password);
			 Statement stmt = conn.createStatement();
		     String sql = "SELECT * FROM public.person";
		     ResultSet rs = stmt.executeQuery( sql );
		     out.println("<table>") ;
		     out.println("<tr><th>Lp.</th><th>Imię</th><th>Nazwisko</th><th>Miasto</th></tr>") ;
     		 while(rs.next())  {
		        out.print("<tr><td>" + rs.getInt("ID") + "</td><td>" + rs.getString("FNAME") + "</td>" ) ;
		        out.println ( "<td>" + rs.getString("LNAME") + "</td><td>" + rs.getString("CITY") + "</td></tr>" ) ;
     		 }   
     		out.println("</table>") ;
     		rs.close();
     		stmt.close();
     		conn.close();
        }
		catch(Exception e)
		{  out.println (e) ; } 
		
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		// response.getWriter().append("Served at: ").append(request.getContextPath());
		processRequest(request, response);
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		processRequest(request, response);
	}

Dodajemy do pliku LabIndex.java linię z wywołaniem utworzonego servletu.

out.println ("<li><a href='ReadRecDB'>[Servlet (JDBC)] Read the records from the PostgreSQL database</a></li>");

Skrypt JSP i JavaBean
1. Tworzymy skrypt JSP w ramach projektu o nazwie HelloJSP.jsp. Skrypt zostanie umieszczony w katalogu WebContent.
2. Tworzymy plik DateBean.java w utworzonym pakiecie (katalog) zti.beans zawierający JavaBean wykorzystany w utworzonym skrypcie jsp.
  Klasa DateBean.java - ( [listing dokumentu] [link do dokumentu]
```
package zti.beans;

import java.util.Date;

public class DateBean {

	private Date currentDate = new Date();
	
	public Date getCurrentDate() {
		return currentDate;
		}
	
}
```
3. Uzupełniamy zawartość pliku zgodnie z poniższym wzorcem. Proponuję zmienić parameter scope. Możliwe wartości: Page, Request, Session i Application.
  Skrypt HelloJSP.jsp - ( [listing dokumentu] [link do dokumentu]
```
<html>
<head>
<title>JSP and JavaBean</title>
</head>
<body>

	<jsp:useBean id="dateBean" scope="application" class="zti.beans.DateBean" />
	<h1>Odczyt danych z JavaBean</h1>
	<br />
	<p>Dzisiaj jest: ${dateBean.currentDate} !</p>

</body>
</html>
```
4. Dodajemy do pliku LabIndex.java linię z wywołaniem utworzonego skryptu jsp.
```
out.println ("<li><a href='HelloJSP.jsp'>[JSP] Read the JavaBean in JSP script</a></li>");
```

Biblioteka JSTL i przetwarzanie pliku XML [ można uruchomić, uwagi poniżej ]

Uwagi: należy dodać pakiet w pliku Maven - ważna wersja, w pliku JSP poprawnie wskazać lokalizację po adresie http.

W ramach tego przykładu wykorzystamy bibliotekę JSTL. Dodajemy wpis w pliku pom.xml.

<dependency>
  <groupId>org.glassfish.web</groupId>
  <artifactId>jakarta.servlet.jsp.jstl</artifactId>
  <version>2.0.0</version>
</dependency>

Tworzymy skrypt JSP o nazwie ReadXmlJSTL.jsp.

Uzupełniamy zawartość pliku zgodnie z poniższym wzorcem.

Skrypt ReadXmlJSTL.jsp - ( [listing dokumentu] [link do dokumentu]

<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
<!DOCTYPE HTML >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP JSTL XML</title>
</head>
<body>
<h1>JSP - Read xml file with JSTL</h1>
<!-- Wpisać poprawny URL do pliku data.xml -->
<c:import var="file" url="http://localhost:8082/zti_lab01/Data/data.xml" charEncoding="UTF-8" />
<!--c:out value="${file}" /-->
<x:parse var="doc" doc="${file}"  />

<table >
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Grade</th>
        <th>Type</th>
    </tr>
    <x:forEach select="$doc/students/student">
        <tr>
            <td><x:out select="data/fname" /></td>
            <td><x:out select="data/lname" /></td>
            <td><x:out select="results/grade" /></td>
            <td><x:out select="results/type" /></td>
        </tr>
    </x:forEach>
</table>

</body>
</html>

Tworzymy katalog Data w katalogu WebContent w którym umieszczamy plik data.xml zawierający poniższy dokument XML.

Plik data.xml - ( [listing dokumentu] [link do dokumentu]

<?xml version="1.0"?>
<students>
	<student id="1">
		<data>
			<fname>Anna</fname>
			<lname>Kowalska</lname>
		</data>
		<results>
			<grade>5</grade>
			<type>test</type>
		</results>
	</student>
	<student id="2">
		<data>
			<fname>Jan</fname>
			<lname>Nowak</lname>
		</data>
		<results>
			<grade>3</grade>
			<type>test</type>
		</results>
	</student>
	<student id="3">
		<data>
			<fname>Wanda</fname>
			<lname>Grzelak</lname>
		</data>
		<results>
			<grade>4+</grade>
			<type>test</type>
		</results>
	</student>
</students>

Dodajemy do pliku LabIndex.java linię z wywołaniem utworzonego skryptu jsp.

out.println ("<li><a href='ReadXmlJSTL.jsp'>[JSP (JSTL)] Read the xml file in JSP script</a></li>");

Polecenia języka Java w skrypcie JSP (skryplet)

Tworzymy skrypt jsp w ramach projektu o nazwie ReadConfig.jsp.

Modyfikujemy zawartość skryptu zgodnie z poniższym wzorcem.

Skrypt ReadConfig.jsp - ( [listing dokumentu] [link do dokumentu]

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Read My Config File - scriplets</title>
</head>
<body>
	<%
	  // Tomcat 
	  java.io.InputStream is = this.getClass().getClassLoader().getResourceAsStream("../myConf.ini");
	  // WAS Liberty
	  // java.io.InputStream is = this.getClass().getClassLoader().getResourceAsStream("/WEB-INF/myConf.ini");  
		java.util.Properties p = new java.util.Properties();
		System.out.println("Test-B");
		try {
			p.load(is);
			out.println("<p>Test1 = " + p.getProperty("Test1") + "</p>");
			out.println("<p>Test2 = " + p.getProperty("Test2") + "</p>");
			out.println("<p>Test3 = " + p.getProperty("Test3") + "</p>");
		} catch (Exception e) {
			System.out.println(e);
		}
		System.out.println("Test-C");
	%>

</body>
</html>

Tworzymy plik myConf.ini w katalogu WEB-INF z poniższą zawartością.
```
Test1=testdata
Test2=user
Test3=password
```

Dodajemy do pliku LabIndex.java linię z wywołaniem utworzonego skryptu jsp.

out.println ("<li><a href='ReadConfig.jsp'>[JSP] Read the config file in WEB-INF directory</a></li>");

Prosta implementacja wzorca MVC w Jakarta EE

W ramach zadania przedstawiony zostanie prosty serwis działający zgodnie z wzorcem projektowym MVC. Kontrolerem serwisu bedzie servlet, natomiast treść będzie reprezentowana przez odpowiednio przygotowane skrypty jsp.

Tworzymy servlet kontrolera o nazwie SimpleMVC.java (pakiet ZTI_Lab01).

Modyfikujemy metodę doGet() utowrzonego servletu SimpleMVC.java - ( [listing dokumentu] [link do dokumentu]

		System.out.println("In the servlet. . .");
		// String site = request.getParameter("site");
		ServletContext sc = getServletConfig().getServletContext();
		RequestDispatcher rd = null;
		String site  = "";
        if (request.getParameterMap().containsKey("site")) {
            site = request.getParameter("site");
            System.out.println("Site parameter " + site );
        } else {        	
			rd = sc.getRequestDispatcher("/mvc/Home.jsp");
			rd.forward(request, response);
      return;	       	
        }
		if ( site.equals("Site1")) {
			System.out.println("In the servlet. . . Site1");
			rd = sc.getRequestDispatcher("/mvc/Site1.jsp");
			rd.forward(request, response);
      return;
		} else if ( site.equals("Site2")) {
			System.out.println("In the servlet. . . Site2");
			rd = sc.getRequestDispatcher("/mvc/Site2.jsp");
			rd.forward(request, response);
      return;
		} else if ( site.equals("Site3")) {
			System.out.println("In the servlet. . . Site3");
			rd = sc.getRequestDispatcher("/mvc/Site3.jsp");
			rd.forward(request, response);
      return;
		} else {
			System.out.println("In the servlet. . . Home");
			rd = sc.getRequestDispatcher("/mvc/Home.jsp");
			rd.forward(request, response);
      return;
		}

Tworzymy katalog mvc w katalogu WebContent w którym umieścimy wszystkie skrypty jsp zwracające informację do klienta serwisu.

Tworzymy skrypt o nazwie Home.jsp w katalogu mvc z poniższą zawartością.

Skrypt Home.jsp - ( [listing dokumentu] [link do dokumentu]

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple MVC</title>
</head>
<body>
	<%-- include menu.jsp in this JSP --%>
	<jsp:include page="Menu.jsp" flush="true" />
	<h1>Simple MVC project</h1>
</body>
</html>

Tworzymy trzy skrypty o nazwach Site1.jsp, Site2.jsp i Site3.jsp w katalogu mvc zgodnie z poniższym wzorcem.

Skrypt Site1.jsp - ( [listing dokumentu] [link do dokumentu]

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MVC Project - Site 1</title>
</head>
<body>
	<%-- include menu.jsp in this JSP --%>
	<jsp:include page="Menu.jsp" flush="true" />

	<h1>MVC Project - Site 1</h1>
</body>
</html>

Tworzymy skrypt o nazwie Menu.jsp w katalogu mvc z poniższą zawartością.

Skrypt Menu.jsp - ( [listing dokumentu] [link do dokumentu]

<table>
<tr>
<td><a href="SimpleMVC">Home</a></td>
<td><a href="SimpleMVC?site=Site1">Site 1</a></td>
<td><a href="SimpleMVC?site=Site2">Site 2</a></td>
<td><a href="SimpleMVC?site=Site3">Site 3</a></td>
</tr>
</table>

Poniżej alternatywna wersja skryptu Menu.jsp.

Skrypt Menu.jsp - ( [listing dokumentu] [link do dokumentu]

<script>
function myFunc(val) {
	    var form = document.createElement('form');
	    form.setAttribute('method', 'get');
	    form.setAttribute('action', 'SimpleMVC');
	    form.style.display = 'none';
	    var inp = document.createElement('input');
	    inp.setAttribute('type','text');
	    inp.setAttribute('value',val);
	    inp.setAttribute('name','site');
	    inp.style.display = 'none';
	    form.appendChild(inp);
	    document.body.appendChild(form)
	    form.submit();
}
</script>
<table>
	<tr>
		<td><input type="button" value="Home" onClick=myFunc('')></td>
		<td><input type="button" value="Site1" onClick=myFunc('Site1')></td>
		<td><input type="button" value="Site2" onClick=myFunc('Site2')></td>
		<td><input type="button" value="Site3" onClick=myFunc('Site3')></td>
	</tr>
</table>

Dodajemy do pliku LabIndex.java linię z wywołaniem utworzonego serwisu.

out.println ("<li><a href='SimpleMVC'>[Servlet & JSP] Simple MVC pattern - dispatch servlet</a></li>");

Zaliczenie laboratorium

Przesłanie zrealizowanych w trakcie zajęć przykładowych skryptów w pliku *.war (z kodem źródłowym skryptów, bez danych do baz danych)
Przesłanie zrealizowanego w trakcie zajęć ( lub po zajęciach ) poniższego zadania w pliku *.war (z kodem źródłowym skryptów, bez danych do baz danych)
Serwis JEE obsługujący bazę danych
Opracować prosty serwis WWW w technologii JEE zgodnie z przedstawionym powyżej wzorcem MVC:
- Aplikacja realizuje dostęp do bazy danych PostgreSQL - odczyt i zapis danych;
- Kontroler aplikacji opracowany z wykorzystaniem servletu Dispatch;
- Odczyt i zapis danych do bazy danych poprzez odpowiednie servlety;
- Wprowadzanie danych i prezentacja danych poprzez skrypty JSP;
Poprawnie zrealizowane przykłady na laboratorium umożliwią uzyskanie ekranu przedstawionego na rys.2 dla servletu LabIndex, na rys.3 przedstawiono strukturę katalogu WebContent.

Rys.5 Prentacja servletu LabIndex po zrealizowaniu przykładów

Rys.6 Zrealizowany projekt w ramach laboratorium - IDE IDEA