Notitie systeem in JSP
In deze how to tutorial gaan we een notitie systeem maken in JSP, waarbij we de notities van 1 persoon kunnen bekijken.
Daarbij hebben we
- 1 formulier om een notitie toe te voegen: addnotitie.jsp
- 1 JSP pagina om alle notities te laten zien (en een link naar de jsp-pagina met het formulier): bekijknotities.jsp
- 1 Bean om alle data te onthouden: NotitieBean
- 1 Servlet om het formulier te verwerken: AddNotitieServlet
- 1 Klasse die een notitie beschrijft: notitie
- 1 web.xml om de servlet te configureren: web.xml
We beginnen met het web.xml bestand voor onze servlet te configureren. De AddNotitieServlet gaat reageren op addnotitie.do:
<servlet-name>AddNotitieServlet</servlet-name>
<servlet-class>servlets.AddNotitieServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AddNotitieServlet</servlet-name>
<url-pattern>/addnotitie.do</url-pattern>
</servlet-mapping>
De klasse waar de notitie in wordt bewaard is ook niet zo ingewikkeld. Deze klasse heeft 1 property “tekst” van het type String met een getter en een setter. Zet deze klasse in /model/notitie.java:
public class Notitie {
private String tekst;
public String getTekst() {
return tekst;
}
public void setTekst(String tekst) {
this.tekst = tekst;
}
}
Om de notities op te slaan gaan we gebruik maken van de NotitieBean. Hierin zullen we alle toegevoegde notities bewaren. We gaan hiervoor gebruik maken van een arraylist die objecten van het type Notitie opslaat. We maken hiervoor een getter en een setter methode, en ook een addNotitie methode:
public class NotitieBean implements Serializable {
List<Notitie> notities = new ArrayList<Notitie>();
public void addNotitie(Notitie notitie) {
notities.add(notitie);
}
public List<Notitie> getNotities() {
return notities;
}
public void setNotities(List<Notitie> notities) {
this.notities = notities;
}
}
Het formulier is ook een standaard formulier, met 1 textbox en 1 knop om de data te verzenden. Die er als volgt uitziet:
De jsp-pagina voor dit formulier ziet er als volgt uit:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Simple jsp page</title></head>
<body>
<form action="addnotitie.do" method="POST">
<input type="text" name="tekst" />
<input type="submit" name="submit" value="VOEG TOE" />
</form>
</body>
</html>
Het verwerken van deze notitie gaan we in de servlet AddNotitieServlet doen. Net zoals bij het opslaan van de voornaam, achternaam en gebruikersnaam gaan we eerst de NotitieBean opzoeken in het session object en anders maken we de Bean aan. Vervolgens vullen we deze met een nieuwe notitie:
public class AddNotitieServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
HttpSession session = request.getSession();
NotitieBean notitieBean = ((NotitieBean)session.getAttribute("notitieBean"));
if(notitieBean == null)
notitieBean = new NotitieBean();
Notitie notitie = new Notitie();
notitie.setTekst(request.getParameter("tekst"));
notitieBean.addNotitie(notitie);
session.setAttribute("notitieBean", notitieBean);
response.sendRedirect("bekijknotities.jsp");
}
}
Tot hiertoe hadden we allemaal al gezien in de tutorials in de beginner-sectie. We willen nu de notities een voor een ophalen en weergeven op de bekijknotities.jsp pagina. Daarvoor gaan we gebruik maken van jstl. Dit is een tag-based taal voor het bewerken van data binnen een jsp-pagina. Hiermee kunnen we bijvoorbeeld if-constructies of for-constructies binnen jsp oproepen op een tag-based manier. Download jstl hier en voeg zowel de jstl.jar als de standard.jar libraries toe aan je library.
Om de notities te bekijken moeten we eerst jstl gaan oproepen binnen onze jsp-pagina. Dit gebeurd als volgt:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
Hiermee definiëren we een nieuwe prefix voor een taglibrary. Deze geven we de eenvoudige naam “c” (dit kan eender wat zijn). Als we gebruik willen maken van jstl-tags moeten we binnen onze jsp-pagina verwijzen naar deze prefix.
Een van deze tags binnen jstl is de forEach tag en werkt als volgt:
<c:forEach var="variabeleNaam" items="${lijstVanItems}">
doe iets met de variabele hier
</c:forEach>
Als we dit dan uitwerken met onze notitieBean ziet dit er zo uit:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="notitieBean" class="beans.NotitieBean" scope="session" />
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>Notities bekijken</title></head>
<body>
<h1>Notities</h1>
<a href="addnotitie.jsp">Voeg een notitie toe</a>
<br />
<c:forEach var="notitie" items="${notitieBean.notities}">
${notitie.tekst}<br />
</c:forEach>
</body>
</html>
