Creare una semplice web application con JAVA, Eclipse, Tomcat, Hibernate e PostgreSQL – Parte #2

[Questo è il secondo di una serie di articoli relativi allo sviluppo di una semplice web application. Qua la parte 1]

PROGETTARE LA PRIMA APPLICAZIONE
In questa sezione inizieremo ad espandere la nostra applicazione con diverse componenti, inserendo una nuova pagina contenente un form per l’inserimento di dati di input da parte dell’utente, realizzando la nostra prima servlet ed interfacciando un database per la memorizzazione dei dati. Nello specifico, la funzionalità che vogliamo aggiungere alla nostra applicazione è la possibilità di creare degli utenti e di memorizzare le relative informazioni in un database, in modo da averle sempre a disposizione e di potere accedere ad esse in qualsiasi momento.
La prima cosa da fare, quindi, è farci uno schema di questa nuova funzionalità che vogliamo inserire, degli oggetti che ci serviranno per implementarla e delle interazioni tra di essi.
La figura seguente mostra lo schema relativo alla funzionalità di creazione degli utenti della nostra applicazione:

Creare una semplice web application - part2

La creazione di un utente passerà quindi attraverso i seguenti steps:

  • L’utente arriva sulla homepage
  • Dalla homepage l’utente potrà cliccare sul link “Create New User”
  • Si aprirà una nuova pagina con un form per l’inserimento dei dati dell’utente
  • L’utente clicca il pulsante “create”
  • La richiesta http POST viene inviata alla Servlet chiamata AddUser
  • La Servlet inserisce i dati relativi all’utente creato nel database
  • La Servlet inoltra la richiesta ad una pagina JSP
  • La pagina JSP indica che l’utente è stato creato e mostra le sue relative informazioni

CREARE IL FORM DI INPUT
Iniziamo creando la nuova pagina che conterrà il form per l’inserimento dei dati.
Nel nostro progetto Eclipse clicchiamo con il tasto destro sulla cartella WebContent, selezioniamo la voce “New” del menù contestuale e poi scegliamo “HTML file”. Inseriamo nel wizard che ci viene mostrato il nome della nostra nuova pagina, “createuser.html” e poi clicchiamo “Finish” (Per il momento saltiamo la pagina relativa alla scelta della DTD – Document Type Definition da utilizzare).
Inseriamo nella pagina appena creata il codice per la realizzazione dei campi del form in cui l’utente dovrà introdurre i dati per la sua registrazione. Avendo definito l’oggetto UTENTE come composto da 3 valori di tipo stringa, andiamo ad inserire nella nostra pagina web le rispettive aree di testo ed il pulsante per l’invio alla nostra servlet delle informazioni contenute nel form.

<form method="POST" action="CreateUser.do">
First name: <input type="text" size="40" maxlength="40" name="firstname"/><br>
	Last name:  <input type="text" size="40" maxlength="40" name="lastname" /><br>
	Country:    <input type="text" size="40" maxlength="40" name="country"  /><br> 
	<input type="SUBMIT" value="create">
</form> 

La figura seguente mostra la nuova pagina create all’interno del progetto Eclipse ed il suo codice sorgente, contenente il form per l’inserimento dati.

Creare una semplice web application - input form

Ora che abbiamo creato la nuova pagina possiamo lanciare nuovamente l’applicazione e vedere se la pagina viene raggiunta dal link posizionato in homepage e visualizzata correttamente.
Se quanto abbiamo fatto è corretto, il risultato che otteniamo è quello rappresentato nella figura seguente:

Creare una semplice web application -  input form test

CREARE LA PRIMA SERVLET
Il prossimo passo consiste nel creare la servlet che si occuperà di processare la richiesta di creazione di un nuovo utente, che verrà mappata (approfondiremo questo concetto tra pochissimo) sull’indirizzo di destinazione precedentemente specificato nell’attributo “action” del tag “form” ed invocata una volta che l’utente preme il pulsante “create”.
Per fare questo clicchiamo con il tasto destro del mouse sul nostro progetto, selezioniamo “New” dal menù contestuale e poi selezioniamo ancora “Servlet”, come illustrato in figura:

creare una semplice web application - new servlet

A questo punto si apre il wizard di Eclipse illustrato nella figura seguente, nel quale:

  • Il campo “Source folder” è già pre-compilato con il percorso della nostra cartella dei file sorgenti, cioè “/WebTest/src” e manteniamo questo valore.
  • Inseriamo il nome del package che abbiamo appena creato, in cui vogliamo quindi inserire la classe della nostra servlet: com.dede.app1st.controller
  • Inseriamo il nome della classe della nostra Servlet, che chiameremo AddUser
  • Il campo “Superclass” è già pre-compilato con il nome della classe che deve essere estesa dalla nostra Servlet

creare una semplice web application - new servlet

Clicchiamo su “Next” e procediamo con la creazione della nostra Servlet: inseriamo una descrizione della nostra servlet nel campo denominato appunto “Description” ed inseriamo l’URL sul quale la nostra servlet verrà mappata. Quest’ultima operazione richiede un po’ di attenzione, in quanto l’URL inserito deve corrispondere a quello che abbiamo indicato nell’attributo “action” del tag “form” nella nostra pagina web createuser.html.

	<form method="POST" action="CreateUser.do">

Eclipse, di default, ci propone il mapping della servlet con l’URL contenente il nome stesso della servlet, in questo caso “/AddUser” per cui, avendo precedentemente indicato nel form il percorso “CreateUser.do” come destinazione, dobbiamo cliccare su “Edit” e modificare il pattern dell’URL da mappare da “/AddUser” ad, appunto, “/CreateUser.do”.
Tale operazione è illustrata nella figura seguente, in cui viene messa in evidenza la congruenza tra il pattern dell’URL definito in fase di creazione della servlet ed il campo “action” del form:

creare una semplice web application - create servlet

Clicchiamo su “Next >” e raggiungiamo l’ultimo step del wizard di creazione della nostra servlet, in cui scegliamo per quali metodi vogliamo che ci venga generato da Eclipse uno stub, ovvero il prototipo del metodo già pronto per andarci ad inserire la nostra implementazione. In questo caso, avendo specificato nel nostro form che la richiesta sarà di tipo “POST”, tramite la valorizzazione dell’attributo “method”

		<form method="POST" action="CreateUser.do">

dobbiamo implementare il relativo metodo della nostra servlet che si occuperà di gestire questo tipo di richieste, ovvero il metodo doPost.

creare una semplice web application - new servlet

La signature del metodo doPost, ereditato dalla superclasse HttpServlet, è la seguente:

protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException

ed Eclipse la inserisce già per conto nostro nella classe della nostra servlet, come illustrato qui:

image_013_DA_MOcreare una semplice web application - servlet classes missing

Un momento però, la classe AddUser rappresentante la nostra servlet, generata da Eclipse dopo la conclusione della procedura guidata che abbiamo seguito, presenta diversi errori di compilazione, dovuti alla non risoluzione di tutte le classi relative alle API delle Servlet e dei rispettivi import.

Se passiamo infatti con il mouse su una delle classi sottolineate in rosso, ci viene mostrato l’errore

HttpServletRequest cannot be resolved to a type

Questo è dovuto al fatto che abbiamo creato in Eclipse prima il nostro progetto web e solo dopo configurato il server Tomcat su cui farla girare. In questo modo abbiamo detto alla nostra applicazione quale istanza di Tomcat utilizzare quando messa in esecuzione (per visualizzare il Server impostato per l’esecuzione dell’applicazione dobbiamo andare sul set di properties chiamato appunto “Server”, come in figura), ma non abbiamo specificato di utilizzare il runtime environment di Tomcat.

creare una semplice web application - Tomcat server setting

IMPOSTARE IL RUNTIME ENVIRONMENT
Per impostare il runtime environment dobbiamo cliccare con il tasto destro del mouse sul nostro progetto, selezionare dal menù contestuale la voce “Build Path”, quindi selezionare ancora “Configure Build Path”:

creare una semplice web application -

Si apre la finestra con le proprietà del nostro progetto, in cui sono visualizzate di default le proprietà relative al set “Java Build Path” (elenco dei set di properties sul pannello sinistra della finestra). Osserviamo, nella figura seguente, il contenuto del tab “Libraries”.

creare una semplice web application - Build Path settings

Clicchiamo adesso sul set “Targeted Runtimes”, selezioniamo “Apache Tomcat v7.0” e premiamo il pulsante “Apply”:

creare una semplice web application - targeted runtimes

A questo punto, se torniamo nel set di proprietà “Java Build Path” al tab “Libraries”, vediamo che c’è una nuova voce in elenco, chiamata “Apache Tomcat v7.0”:
creare una semplice web application - tomcat libraries

Se esplodiamo questa voce vediamo l’elenco delle librerie di Tomcat che a questo punto sono incluse dal nostro progetto ed in elenco troviamo anche la libreria “servlet-api.jar” precedentemente mancante:
creare una semplice web application - tomcat libraries

Se torniamo ora alla classe della nostra Servlet, AddUser, vediamo che tutti gli errori di compilazione sono spariti, in quanto gli import sono ora risolti e le classi delle Servlet API vengono “riconosciute”.

creare una semplice web application - servlet imported

GESTIONE DELLA RICHIESTA
Ora che abbiamo definito e mappato la nostra servlet dobbiamo istruirla su come processare le richieste che le arriveranno, per il momento, nella forma di sottomissioni di form tramite il metodo post. Per farlo, come abbiamo visto, dobbiamo fornire l’implementazione del metodo doPost().
In precedenza, nel paragrafo “PROGETTARE LA PRIMA APPLICAZIONE”, abbiamo stabilito che il modo in cui vogliamo che la nostra semplice applicazione processi la richiesta è indicare che è stato creato un nuovo utente e mostrare quali sono i suoi relativi dati (quelli inviati tramite il form).
Questo risultato deve essere mostrato tramite una pagina JSP, alla quale la servlet inoltrerà la richiesta. In questo modo implementiamo il pattern MVC (Model-View-Controller) separando appunto il Controller (Servlet) dalla view (JSP).
Per demandare, all’interno della servlet, la gestione della richiesta ad una JSP dobbiamo utilizzare un RequestDispatcher, che si ottiene invocando il metodo getRequestDispatcher sull’oggetto HttpServletRequest di input, specificando come parametro a quale componente si vuole indirizzare la richiesta.
Ad esempio, per indicare come destinatario dell’inoltro richiesta la nostra pagina JSP dobbiamo fare:

RequestDispatcher view = req.getRequestDispatcher("useradd.jsp");

Per inoltrare effettivamente la richiesta, si invoca invece il metodo forward() sull’oggetto RequestDispatcher ottenuto precedentemente, passando come parametri la richiesta (HttpServletRequest) e la risposta (HttpServletResponse) originali:

view.forward(req, resp);

La figura seguente mostra l’implementazione del metodo doPost() della nostra servlet:

creare una semplice web application - servlet doPost method

CREARE LA PAGINA JSP
A questo punto dobbiamo creare la JSP (Java Server Page) che si occuperà di processare la richiesta che le verrà inoltrata dalla servlet. Per farlo andiamo nel pannello laterale “Project Explorer” di Eclipse, ci posizioniamo sulla cartella “WebContent” e clicchiamo con il tasto destro. Nel menù contestuale che si apre scegliamo “New” e poi “JSP”. (Se l’opzione “JSP” non è presente direttamente nel menù contestuale, selezionare “Other”, digitare come stringa di ricerca “JSP” e scegliere tra i risultati proposti la voce “JSP File”).

creare una semplice web application - create new JSP

Nel wizard di creazione che si apre indichiamo il nome della nostra pagina, che sarà “useradd.jsp”.

creare una semplice web application - create new JSP

Ci viene in questo modo creata, sotto alla cartella “WebContent” la nostra nuova pagina JSP vuota, che si presenta come segue:

creare una semplice web application - new JSP

A questo punto dobbiamo inserire nella nostra JSP il codice per processare la richiesta ricevuta dalla servlet. Dobbiamo quindi recuperare le informazioni dalla richiesta, cioè dall’oggetto HttpServletRequest ricevuto in ingresso dalla Servlet ed a sua volta inoltrato alla JSP tramite il metodo forward. Per fare questo dobbiamo utilizzare il metodo getParameter dell’oggetto HttpServletRequest, definito come segue:

String getParameter(String arg0)

Questo metodo prende come parametro una stringa che rappresenta il nome dell’attributo della richiesta di cui si vuole recuperare il valore e restituisce una stringa contenente tale valore.
Nel nostro esempio dobbiamo utilizzarlo per recuperare i valori dei campi inseriti dall’utente nel form che ha sottomesso.
Il nostro form conteneva 3 campi:

<form method="POST" action="CreateUser.do">
        First name: <input type="text" size="40" maxlength="40" name="firstname"/><br>
	Last name:  <input type="text" size="40" maxlength="40" name="lastname" /><br>
	Country:    <input type="text" size="40" maxlength="40" name="country"  /><br> 
	<input type="SUBMIT" value="create">
</form>

Per cui, dobbiamo invocare il metodo getParameter() sull’oggetto request una volta per ciascuno dei parametri di cui vogliamo recuperare il valore. Il valore che dobbiamo passare come parametro è quello del “name” che abbiamo assegnato ai componenti del form. Per recuperare, ad esempio, il valore che l’utente ha inserito nel campo “firstname” dobbiamo utilizzare il codice seguente:

First Name: <% String fName = request.getParameter("firstname"); out.print(fName); %>

La figura seguente mostra il codice della nostra JSP modificato per recuperare i dati presenti nella richiesta e mostrare una pagina di avvenuta creazione dell’utente con tali dati:
creare una semplice web application - jsp getParameter

A questo punto proviamo ad eseguire nuovamente la nostra applicazione. Quindi dalla toolbar di Eclipse o dal menu contestuale selezioniamo “Run as” e poi “Run on server”. Ci aspettiamo che appaia all’interno di Eclipse la homepage della nostra applicazione, come avevamo già visto nel paragrafo “LA PRIMA ESECUZIONE DEL PROGETTO” .
creare una semplice web application

Clicchiamo nuovamente sul link “Create new user”, inseriamo i dati per la creazione dell’utente e poi sottomettiamo il form.
creare una semplice web application  - input form

La richiesta viene indirizzata all’url su cui è mappata la nostra servlet e forwardata alla pagina JSP che la processa e, come previsto, ci mostra il messaggio di avvenuta creazione dell’utente ed i relativi valori degli attributi.

creare una semplice web application  - new record created

Bene, il risultato è quello che ci aspettavamo, quindi abbiamo la nostra prima servlet e la nostra JSP funzionanti ed in grado di processare le richieste.
Il prossimo step sarà quello di introdurre un ulteriore livello nella nostra architettura, rappresentato da un database relazionale che ci permetterà di salvare e rendere persistenti i dati della nostra applicazione, quindi nello specifico di salvare in tabella le informazioni relative ai nostri utenti. Raffineremo anche l’implementazione del paradigma MVC, introducendo di fatto il Model dei nostri oggetti “User”, sul quale finora abbiamo sorvolato, recuperando in modo diretto le informazioni dalla request e concentrandoci solo sul loro interscambio.

Vai alla terza parte: Creare una semplice web application con JAVA, Eclipse, Tomcat, Hibernate e PostgreSQL – Parte #3

This entry was posted in $1$s. Bookmark the permalink.

4 thoughts on “Creare una semplice web application con JAVA, Eclipse, Tomcat, Hibernate e PostgreSQL – Parte #2

  1. Pingback: Creare una Servlet: ANNOTATIONS (Servlet 3.0) VS. XML (fino a Servlet 2.5) | Dede Blog

  2. Pingback: Creare una semplice web application con JAVA, Eclipse, Tomcat, Hibernate e PostgreSQL – Parte #3 | Dede Blog

  3. Pingback: Creare una semplice web application con JAVA, Eclipse, Tomcat, Hibernate e PostgreSQL – Parte #1 | Dede Blog

Leave a Reply

Your email address will not be published. Required fields are marked *