Torna alla pagina di Tecnologie Web
:: Laboratorio 6 ::
NOTA:
In questi esercizi viene utilizzata la libreria di tag standard JSTL che non è installata nel container e quindi va installata manualmente.
Tutti i file necessari si trovano in questo ZIP: Attach:librerie.zip
- jstl.jar (installato in: <inizialeCognome>\WEB-INF\lib)
- standard.jar (installato in: <inizialeCognome>\WEB-INF\lib)
- commons-lang-2.0.jar (installato in: <inizialeCognome>\WEB-INF\lib)
- taglibs-string.jar (installato in: <inizialeCognome>\WEB-INF\lib)
- taglibs-string.tld (installato in: <inizialeCognome>\WEB-INF)
Esercizio 1
Seguite le note indicate sopra ed installate la JSTL e la string tag library. Quindi copiate i due file dateForm.jsp e dateHandler.jsp nella vostra web application e verificate che funzionino correttamente.
SOLUZIONE
dateForm.jsp
<%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<form method="post" action="dateHandler.jsp">
Please enter your birthday:
<select name="month">
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
<option value="Jun">June</option>
<option value="Jul">July</option>
<option value="Aug">August</option>
<option value="Sep">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select>
<select name="day">
<c:forEach begin="1" end="31" var="day">
<option><c:out value="${day}"/></option>
</c:forEach>
</select>
<select name="year">
<c:forEach begin="1930" end="2003" var="year">
<option><c:out value="${year}"/></option>
</c:forEach>
</select>
<input type="submit" value="Submit" />
</form>
dateHandler.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<fmt:parseDate
var="date"
parseLocale="en_US"
value="${param.month} ${param.day}, ${param.year}"/>
You were born
<fmt:formatDate
value="${date}"
dateStyle="full"/>
Esercizio 2
Scrivete il codice HTML per una semplice form di inserimento dati. La form dovrà contenere una lista di aggettivi che descrivono il carattere di una persona (sotto forma di check box). In base agli aggettivi selezionati, dovrà comparire una seconda form con la lista degli aggettivi. Nel caso si facesse il submit selezionando un particolare aggettivo (a vostra scelta) presente nell’elenco, nella seconda form, oltre a visualizzare gli aggettivi selezionati, visualizzate anche un messaggio di commento relativo all’aggettivo scelto.
SOLUZIONE
carattere.html
<html>
<head><title> Che carattere hai?</title></head>
<body>
<form action="carattere.jsp" method="post">
Seleziona i lati del tuo carattere</br>
<input type="checkbox" name="lato" value="solare">solare<br />
<input type="checkbox" name="lato" value="simpatico">simpatico<br />
<input type="checkbox" name="lato" value="rompiscatole">rompiscatole<br />
<input type="checkbox" name="lato" value="scontroso">scontroso<br />
<input type="checkbox" name="lato" value="misterioso">misterioso<br />
<input type="checkbox" name="lato" value="permaloso">permaloso<br />
<input type="submit" value="Invia">
</form>
</body>
</html>
carattere.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Checkbox multipli</title>
</head>
<body>
<h3>tu sei un tipo</h3>
<c:forEach items="${paramValues.lato}" var="lato">
<c:choose>
<c:when test="${lato=='permaloso'}">
${lato}
permaloso? meno male che lo ammetti
</c:when>
<c:otherwise>
${lato}
</c:otherwise>
</c:choose>
<br />
</c:forEach>
</body>
</html>
Esercizio 3
Scrivete il codice HTML per una semplice form di inserimento dati relativo alla scelta di generi di libri (sotto forma di check box). In base ai generi selezionati, dovrà comparire una seconda form in cui sono riportati i generi scelti e per ogni genere selezionato sia presente una lista di libri di quel genere. Cliccando sul nome del libro l’utente viene indirizzato verso una URL di presentazione del libro.
SOLUZIONE
libro.html
<html>
<head><title> Che libri ti piacciono?</title></head>
<body>
<form action="libro.jsp" method="post">
Seleziona il genere che preferisci</br>
<input type="checkbox" name="genere" value="romantico">romantico<br />
<input type="checkbox" name="genere" value="drammatico">drammatico<br />
<input type="checkbox" name="genere" value="giallo">giallo<br />
<input type="checkbox" name="genere" value="horror">horror<br />
<input type="checkbox" name="genere" value="fantascienza">fantascienza<br />
<input type="checkbox" name="genere" value="erotico">erotico<br />
<input type="submit" value="Invia">
</form>
</body>
</html>
libro.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>genere di libro</title>
</head>
<body>
<h3>l'elenco dei libri</h3>
<c:forEach items="${paramValues.genere}" var="gen">
<c:if test="${gen=='romantico'}" >
</br>Lista dei libri di genere ${gen} </br>
<a href="<c:url value="http://www.ibs.it/code/9788846208439/ahern-cecelia/
p-s-i-love-you.html"/>"/>PS I LOVE YOU </a></br>
<a href="<c:url value="http://www.ibs.it/code/9788882744137/steel-danielle
/incontri.html"/>"/>Incontri </a>
</c:if>
<c:if test="${gen=='drammatico'}" >
</br>Lista dei libri di genere ${gen} </br>
<a href="<c:url value="http://www.ibs.it/code/9788860612854/bradford-barbara-
taylor/segreto-egrave-per-sempre.html"/>"/>Un segreto è per sempre </a></br>
</c:if>
<c:if test="${gen=='giallo'}" >
</br>Lista dei libri di genere ${gen} </br>
<a href="<c:url value="http://www.ibs.it/code/9788878992535/doyle-arthur-
conan/segno-dei-quattro.html"/>"/>il segno dei quattro </a></br>
<a href="<c:url value="http://www.ibs.it/code/9788878992559/doyle-arthur-
conan/mastino-dei-baskerville.html"/>"/>il mastino dei baskerville</a>
</c:if>
</c:forEach>
</body>
</html>
Esercizio 4
Inventate una sorta di “test psicologico/attitudinale” (stile Facebook), costituito da 5 domande a risposta multipla. In base alle risposte date, dovrà comparire il profilo della persona che ha compilato il test.
SOLUZIONE
File HTML test.html che mostra la form col test. Il codice è indentato male per motivi di impaginazione di Swappa, se non si va a capo sbarella tutto.
<html>
<head><title> Che carattere hai?</title></head>
<body>
<form action="test.jsp" method="post">
<h3>che animale sei?</h3>
<ol>
<li> vedi un anziano per strada che è caduto. casa fai?<br />
<input type="radio" name="domanda1" value="schivo">gli rubi
il portafoglio e scappi<br />
<input type="radio" name="domanda1" value="aggressivo">lo
investi ripetutamente<br />
<input type="radio" name="domanda1" value="amorevole">lo aiuti
ad alzarsi e ti assicuri che non si sia fatto nulla<br />
</li>
<li>Sei sull'autobus ed il tipo davanti a te puzza di sudore<br />
<input type="radio" name="domanda2" value="schivo">te ne vai
seccato<br />
<input type="radio" name="domanda2" value="aggressivo">glielo
dici e lo mandi via \<br />
<input type="radio" name="domanda2" value="amorevole">lo inviti
a casa tua e con una scusa lo inzuppi con la canna dell'acqua<br />
</li>
<li>un professore ti mette un brutto voto. cosa fai?<br />
<input type="radio" name="domanda3" value="schivo">gli fai una
riga sulla macchina col favore delle tenebre<br />
<input type="radio" name="domanda3" value="aggressivo">lo aspetti
fuori dall'uni per vedere che faccia fa quando al posto della sua auto
troverà solo cenere \<br />
<input type="radio" name="domanda3" value="amorevole">accetti il
voto ma nella tua mente lo stramaledici<br />
</li>
<li>quando senti la parola tè..<br />
<input type="radio" name="domanda4" value="schivo">inorridisci
perchè l'accento è chiuso come dovrebbe esserlo anche in questa frase<br />
<input type="radio" name="domanda4" value="aggressivo">cominci
a sbarellare e prendi a calci la macchinetta per avere una latina <br />
<input type="radio" name="domanda4" value="amorevole">acquisti
regolarmente una lattina e la gusti mentre ti fai una doccia col tipo
di prima dell'autobus<br />
</li>
<li>quando mauro si gigiola tu...<br />
<input type="radio" name="domanda5" value="schivo">inorridisci
perché l'accento delle parole che sussurra mentre si abbraccia
è sbagliato<br />
<input type="radio" name="domanda5" value="aggressivo">cominci
a picchiarlo finchè non sbaglia un accento (e ce ne vuole) <br />
<input type="radio" name="domanda5" value="amorevole">ti
unisci a lui al gigiolamento metre gianini arriva geloso del fatto
che non l'abbiamo invitato<br />
</li>
</ol>
<input type="submit" value="Invia">
</form>
</body>
</html>
File test.jsp che valuta le scelte effettuate nella form HTML. Non è una bellezza di codice, sicuramente ci sono altri mille modi migliori per farlo, però funziona.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>PROFILO</title>
</head>
<body>
<h3>Ecco il tuo profilo</h3>
<%
int schivo=0;
int amorevole=0;
int aggressivo=0;
%>
<c:forEach items="${paramValues.domanda1}" var="d1">
<c:if test="${d1=='schivo'}" >
<%
schivo = schivo+1;
%>
</c:if>
<c:if test="${d1=='aggressivo'}" >
<%
aggressivo = aggressivo+1;
%>
</c:if>
<c:if test="${d1=='amorevole'}" >
<%
amorevole = amorevole+1;
%>
</c:if>
</c:forEach>
<c:forEach items="${paramValues.domanda2}" var="d2">
<c:if test="${d2=='schivo'}" >
<%
schivo = schivo+1;
%>
</c:if>
<c:if test="${d2=='aggressivo'}" >
<%
aggressivo = aggressivo+1;
%>
</c:if>
<c:if test="${d2=='amorevole'}" >
<%
amorevole = amorevole+1;
%>
</c:if>
</c:forEach>
<c:forEach items="${paramValues.domanda3}" var="d3">
<c:if test="${d3=='schivo'}" >
<%
schivo = schivo+1;
%>
</c:if>
<c:if test="${d3=='aggressivo'}" >
<%
aggressivo = aggressivo+1;
%>
</c:if>
<c:if test="${d3=='amorevole'}" >
<%
amorevole = amorevole+1;
%>
</c:if>
</c:forEach>
<c:forEach items="${paramValues.domanda4}" var="d4">
<c:if test="${d4=='schivo'}" >
<%
schivo = schivo+1;
%>
</c:if>
<c:if test="${d4=='aggressivo'}" >
<%
aggressivo = aggressivo+1;
%>
</c:if>
<c:if test="${d4=='amorevole'}" >
<%
amorevole = amorevole+1;
%>
</c:if>
</c:forEach>
<c:forEach items="${paramValues.domanda5}" var="d5">
<c:if test="${d5=='schivo'}" >
<%
schivo = schivo+1;
%>
</c:if>
<c:if test="${d5=='aggressivo'}" >
<%
aggressivo = aggressivo+1;
%>
</c:if>
<c:if test="${d5=='amorevole'}" >
<%
amorevole = amorevole+1;
%>
</c:if>
</c:forEach>
<% if( (schivo >= amorevole) && (schivo >= aggressivo) ) {%>
sei: <b>SCHIVO</b>
<%}%>
<% if( (amorevole >= schivo) && (amorevole >= aggressivo) ) {%>
sei: <b>AMOREVOLE</b>
<%}%>
<% if( (aggressivo >= amorevole) && (aggressivo >= schivo) ) {%>
sei: <b>AGGRESSIVO</b>
<%}%>
</br></br></br>
I valori che hai inserito sono: </br>
schivo: <%= schivo%>
amorevole: <%= amorevole%>
aggressivo: <%= aggressivo%>
</body>
</html>
Torna alla pagina di Tecnologie Web
