Alma Mater Studiorum Università di Bologna Scuola di Ingegneria e Architettura Tecnologie Web T Esercitazione 09 Riepilogo Home Page del corso: http://www-db.disi.unibo.it/courses/tw/ Versione elettronica: L.09.Riepilogo.pdf Versione elettronica: L.09.Riepilogo-2p.pdf Esercitazione 07 1 «Liberamente» tratto da Esame del 19 Gennaio 2012 Realizzare un applicazione Web per ricerca di macchine in vendita in una concessionaria tramite l inserimento di targhe, basandosi principalmente su tecnologia Javascript A tal fine si realizzi una pagina HTML che mostri un campo di testo in cui inserire un numero di targa. Dato che la targa è composta unicamente da caratteri alfanumerici, l applicazione deve cancellare automaticamente qualunque carattere inserito che NON sia cifra o carattere alfabetico 2 1
Tratto da Esame del 19 Gennaio 2012 Inoltre, per velocizzare la fase di inserimento dati, non appena sono stati inseriti 7 caratteri (per ipotesi dimensione fissa di una targa) l applicazione invia la targa a una Servlet CercaMacchine tramite AJAX e azzera il campo di testo Servlet CercaMacchine risponde con info relative alla targa inserita restituendo un oggetto DescrizioneMacchina (serializzato tramite JSON) che specifica modello e colore della macchina In particolare, l oggetto DescrizioneMacchina deve essere ricostruito mediante una operazione CRUD di tipo Retrieve (con metodologia a scelta) su tabella DB2 MACCHINA in cui sono mantenuti persistentemente i dati delle automobili 3 Tratto da Esame del 19 Gennaio 2012 Una volta ricevuto l oggetto DescrizioneMacchina serializzato tramite JSON, si modifichi pagina HTML al fine di mostrare le informazioni relative alla macchina appena cercata, avendo cura di mostrare sempre le informazioni relative alle ultime 3 macchine trovate 4 2
Possibile Pagina Web Vedi possibilità di utilizzare <html> funzionalità di base definite in utils.js <head> <script type="text/javascript" src="scripts/utils.js"></script> <script type="text/javascript" src="scripts/concessionaria.js"> </script> </head> <body> <form> targa: <input type="text" id="targa" value="" onkeyup= "checktarga( mygetelementbyid('targa'), mygetelementbyid('results') ) /><br /> </form> <ol id="results"></ol> 5 Alcuni Punti Cruciali Codice concessionaria.js function parsificajson( jsontext ) { var macchina = JSON.parse(jsonText); var risultato = 'macchina.modello = ' + macchina.modello + ', macchina.colore = ' + macchina.colore; return risultato; // parsificajson() 6 3
Alcuni Punti Cruciali Codice concessionaria.js function concessionariacallback( thexhr, targa, resdiv ) { // verifica dello stato if ( thexhr.readystate === 2 ) { // theelement.innerhtml = "Richiesta inviata..."; else if ( thexhr.readystate === 3 ) { // theelement.innerhtml = "Ricezione della risposta..."; else if ( thexhr.readystate === 4 ) { // verifica della risposta da parte del server if ( thexhr.status === 200 ) { if ( thexhr.responsetext ) { var li = resdiv.childnodes; if( li.length == 3 ){ resdiv.removechild(li[2]); resdiv.innerhtml = '<li>'+ 'targa = '+targa+', '+parsificajson(thexhr.responsetext) + '</li>'+ resdiv.innerhtml; else { // non faccio niente 7 Alcuni Punti Cruciali Codice servlet import it.unibo.tw.es2.beans.descrizionemacchina; import org.jabsorb.jsonserializer; import org.jabsorb.serializer.marshallexception; public class CercaMacchine extends HttpServlet { private static final long serialversionuid = 1L; Nel caso di uso di mem persistente, sostituire @Override questo codice con vero public void init() throws ServletException { accesso CRUD Hashtable<String,DescrizioneMacchina> db = new Hashtable<String,DescrizioneMacchina>(); db.put("aa111aa",new DescrizioneMacchina("m1","c1")); db.put("bb222bb",new DescrizioneMacchina("m2","c2")); db.put("cc333bb",new DescrizioneMacchina("m3","c3")); this.getservletcontext().setattribute("db", db); JSONSerializer serializer = new JSONSerializer(); try { // inizializza i tipi serializzatori forniti di default serializer.registerdefaultserializers(); catch this.getservletcontext().setattribute("serializer", serializer); 8 4
Alcuni Punti Cruciali Codice servlet @Override protected void doget(httpservletrequest req, HttpServletResponse resp) throws ServletException, IOException { String targa = req.getparameter("targa"); if( targa!= null ){ Hashtable<String,DescrizioneMacchina> db = (Hashtable<String,DescrizioneMacchina>)this. getservletcontext().getattribute("db"); DescrizioneMacchina macchina = db.get(targa); if( macchina == null ){ macchina = new DescrizioneMacchina("errore","errore"); JSONSerializer serializer = (JSONSerializer)this. getservletcontext().getattribute("serializer"); try { String output = serializer.tojson(macchina); resp.getoutputstream().print(output); catch Come sopra 9 5