Università di Bergamo Dip. di Ingegneria gestionale, dell'informazione e della produzione INGEGNERIA DEL SOFTWARE Paolo Salvaneschi S1_1 V1.2 Architetture e tecnologie Web Il contenuto del documento è liberamente utilizzabile dagli studenti, per studio personale e per supporto a lezioni universitarie. Ogni altro uso è riservato, e deve essere preventivamente autorizzato dall autore. Sono graditi commenti o suggerimenti per il miglioramento del materiale S1TecnSoft Internet Paolo Salvaneschi 1
INDICE Tecnologie Pagine Web statiche (HTML,CSS) Scripting lato client, JavaScript (DHTML) Java Applet CGI Java Servlet Java Server Pages Connessione con i Data Base Ajax S1TecnSoft Internet Paolo Salvaneschi 2
Tecnologie Tecnologie Nomenclatura: Linguaggio Tecnologia Esempio di Strumento es. JSP es. Java es. Tomcat S1TecnSoft Internet Paolo Salvaneschi 3
Tecnologie Pagine Web statiche (HTML,CSS) Pagine Web dinamiche lato Client Scripting lato client, JavaScript (DHTML) Java Applet Pagine Web dinamiche lato Server CGI Servlet, JSP Connessione con i Data Base S1TecnSoft Internet Paolo Salvaneschi 4
Pagine Web statiche (HTML,CSS) Server Server Client Data base Sistema Informativo H T T P D HTTP Browser HTML CSS Apache Microsoft Internet Explorer Mozilla Firefox S1TecnSoft Internet Paolo Salvaneschi 5
Pagine Web statiche (HTML,CSS) File Paginaxx.htm H T T P D Server Richiesta HTTP GET /paginaxx.htm HTTP/1.1 <html> <body> <a href= http://www.pippo.it/paginaxx.htm > chiedi pagina xx</a> </body></html> Risposta HTTP HTTP/1.1 200 <html> <head> <title>paginaxx</title>... </body> </html> http://www.pippo.it:80/. Browser HTML CSS Client S1TecnSoft Internet Paolo Salvaneschi 6
Pagine Web statiche (HTML,CSS) http://httpd.apache.org S1TecnSoft Internet Paolo Salvaneschi 7
Pagine Web statiche (HTML,CSS) Pagine Web statiche Server di documenti ipermediali Distribuzione di documenti codificati in HTML Separazione della struttura dalla presentazione (CSS) S1TecnSoft Internet Paolo Salvaneschi 8
Pagine Web statiche (HTML,CSS) <html> <head> <title>la prima pagina Web di Mario Rossi</title> <link type="text/css" rel="stylesheet" href="es2_css_esterno.css"> </head> h1{font-family: Arial; font-size: 20pt; color: blue; font-weight: bold;} CSS <body> <h1>home page di Mario Rossi</h1> <p>questa è la mia prima pagina in HTML.</p> <h1>intestazione di primo livello</h1> <h2>intestazione di secondo livello</h2> <h3>intestazione di terzo livello</h3> S1TecnSoft Internet Paolo Salvaneschi 9
Scripting lato client, JavaScript (DHTML) Server Server Client Data base Sistema Informativo H T T P D HTTP Browser HTML CSS JavaScript Apache Microsoft Internet Explorer Mozilla Firefox S1TecnSoft Internet Paolo Salvaneschi 10
Scripting lato client, JavaScript (DHTML) Pagine Web dinamiche (DHTML) Insieme di tecnologie che permettono di modificare le pagine HTML caricate nel browser senza interagire con il server Es. modifica della formattazione a seguito di interazione con l utente Es. controllo dell input S1TecnSoft Internet Paolo Salvaneschi 11
Scripting lato client, JavaScript (DHTML) HTML+CSS+Java Script Integrazione di procedure interpretate nella pagina HTML ; Esecuzione lato client Gestione eventi ed interazione locale con l utente Definizione oggetti e attributi (DOM Document Object Model) componenti la pagina e modificabilità da programma S1TecnSoft Internet Paolo Salvaneschi 12
Scripting lato client, JavaScript (DHTML) Scripting <HTML> <HEAD> <TITLE>javascript</TITLE> <SCRIPT language="javascript"> function presenta() {alert("sei mai stato in cima all'adamello?")} </SCRIPT> </HEAD> <BODY bgcolor="#ffff00"> <BR><BR><BR><BR> <IMG src="..\immagini\ada_sal.jpeg" onmouseover="presenta()"> </BODY> </HTML> Gestore degli eventi S1TecnSoft Internet Paolo Salvaneschi 13
Scripting lato client, JavaScript (DHTML) <HEAD> <SCRIPT language="javascript"> function uno() {document.all.container1.style.visibility="visible"; document.all.container2.style.visibility="hidden";} function due() {document.all.container1.style.visibility="hidden"; document.all.container2.style.visibility="visible";} </SCRIPT> Scripting DOM S1TecnSoft Internet Paolo Salvaneschi 14
<STYLE type="text/css"> #container1 { position:absolute; top: 2in; left: 2in; width: 2in; visibility: visible; } #container2 { position:absolute; top: 2in; left: 2in; width: 2in; visibility: hidden; } </STYLE> </HEAD> Scripting lato client, JavaScript (DHTML) S1TecnSoft Internet Paolo Salvaneschi 15 Eventi <BODY> <DIV id="container1"> <IMG src="..\immagini\ada_sal.jpeg" width="300" height="300" onmouseover="due()"> <P><b>l'Adamello da sud</b></p> </DIV> <DIV id="container2"> <IMG src="..\immagini\ada_lobbie.jpeg" width="300" height="300" onmouseout="uno()"> <P><b>Le Lobbie da Nord</b></P> </DIV> </BODY> </HTML> CSS
Java Applet Server Server Client Data base Sistema Informativo H T T P D HTTP Browser HTML CSS Applet Java Apache Microsoft Internet Explorer Mozilla Firefox (Java Virtual Machine) S1TecnSoft Internet Paolo Salvaneschi 16
Inserimento oggetto <HTML> <HEAD> <TITLE>A Clock (1.6)</TITLE> </HEAD> <BODY> <h1>a Clock (1.6)</h1> <applet code="clock.class" width="170" height="150"> <param name="bgcolor" value="000000"> <param name="fgcolor1" value="ff0000"> <param name="fgcolor2" value="ff00ff"> </applet> </BODY> </HTML> S1TecnSoft Internet Paolo Salvaneschi 17
CGI Server Server Client Data base Sistema Informativo Linguaggio di Programmaz. C, Java, Perl CGI H T T P D HTTP Browser Apache Microsoft Internet Explorer Mozilla Firefox S1TecnSoft Internet Paolo Salvaneschi 18
CGI http://www.pippo.it Setup del Web server: c:\ilmioserver è la directory radice Quando il server riceve una richiesta corrispondente all URL http://www.pippo.it cerca un file di default nella directory radice (index.html, index.htm, default.html, default.htm). Ad ogni richiesta di pagina (http://www.pippo.it/paginax.htm) Il server trasmette la pagina. S1TecnSoft Internet Paolo Salvaneschi 19
CGI Nella directory radice è creata una directory cgi-bin. Quando il server riceve una richiesta di un file in cgi-bin non serve il file ma lo manda in esecuzione e serve l output dell esecuzione. S1TecnSoft Internet Paolo Salvaneschi 20
CGI <html> <body> <a href= http://www.pippo.it/ilmioserver/cgi-bin/esempio.cgi > attiva cgi</a> </body></html> HTTP/1.1 200 Content-type: text/html... <html> <body> <h1>hello there!</h1> </body> </html> #include <stdio.h> int main(){ printf("content-type: text/html\n\n"); printf("<html>\n"); printf("<body>\n"); printf("<h1>hello there!</h1>\n"); printf("</body>\n"); printf("</html>\n"); return 0; } S1TecnSoft Internet Paolo Salvaneschi 21
CGI <html> <body> <a href= http://www.pippo.it/ilmioserver/cgi-bin/esempio.cgi > attiva cgi</a> </body></html> #include <stdio.h> int main(){ Il programma può includere qualsiasi procedura che accede a banche dati o interagisce con il sistema informativo esistente return 0; } S1TecnSoft Internet Paolo Salvaneschi 22
CGI Invio di dati Metodo GET Nomi e valori sono appesi alla URL http://nome.server/cgi.bin/programma?nome=valore&nome=valore Metodo POST Nomi e valori sono nel corpo del messaggio nome=valore&nome=valore S1TecnSoft Internet Paolo Salvaneschi 23
CGI Raccolta dati da client via form Method (POST GET) (case insensitive): identifica il metodo HTTP utilizzato per trasmettere i dati della form Action: indirizza l applicazione che elabora i dati <body> <form method="post" action="http://nome.server/cgi.bin/programma">. </form> </body> S1TecnSoft Internet Paolo Salvaneschi 24
CGI CONTENT_LENGTH CONTENT_TYPE GATEWAY_INTERFACE HTTP_ACCEPT HTTP_USER_AGENT PATH_INFO PATH_TRANSLATED QUERY_STRING REMOTE_ADDR REMOTE_HOST REMOTE_IDENT REMOTE_USER REQUEST_METHOD SCRIPT_NAME SERVER_NAME SERVER_PORT Variabili di ambiente Il programma attivato può accedere ad un insieme di varabili di ambiente Contiene i dati passati dal client con il metodo GET Contiene il metodo usato: GET o POST S1TecnSoft Internet Paolo Salvaneschi 25
CGI Limiti Ogni richiesta al server via CGI genera un processo che termina a fine elaborazione Se il programma attivato via CGI contiene un accesso a DataBase, ogni volta sarà aperta e chiusa una connessione al DBMS Utilizzo di risorse elevato problemi di scalabilità S1TecnSoft Internet Paolo Salvaneschi 26
Tecnologie Server Server Integrazione delle tecnologie Client Data base Sistema Informativo Linguaggio di Programmaz. C, Java, Perl CGI H T T P D HTTP Browser HTML CSS JavaScript Java Applet Apache Microsoft Internet Explorer Mozilla Firefox S1TecnSoft Internet Paolo Salvaneschi 27
Java Servlet Server Server Application Server Client Data base Sistema Informativo Java Servlet H T T P D HTTP Browser Tomcat Websphere Apache Microsoft Internet Explorer Mozilla Firefox S1TecnSoft Internet Paolo Salvaneschi 28
Java Servlet Tomcat http://jakarta.apache.org S1TecnSoft Internet Paolo Salvaneschi 29
Java Servlet Servlet Oggetti Java particolari che sono caricati ed eseguiti dal web server che li utilizza come proprie estensioni. Il web server mette a disposizione delle Servlet un container che si occupa della gestione dell ambiente all interno delle quali le servlet girano. Il container passa i dati dal client verso le servlet e viceversa. S1TecnSoft Internet Paolo Salvaneschi 30
Java Servlet Package javax.servlet Package di base delle Servlet API Contiene le classi per definire Servlet standard indipendenti dal protocollo. Una Servlet generica è una classe definita a partire dall interfaccia Servlet contenuta all interno del package javax.servlet. S1TecnSoft Internet Paolo Salvaneschi 31
Java Servlet Package javax.servlet.http Le classi del package estendono le funzionalità di base di una servlet supportando tutte le caratteristiche della trasmissione di dati con protocollo http compresi cookies S1TecnSoft Internet Paolo Salvaneschi 32
Java Servlet Ciclo di vita di una Servlet Una servlet è caricata e inizializzata dal web server al momento della prima richiesta http da parte di un client o al momento dell avvio del servizio. All inizializzazione la servlet può, se il caso, aprire una connessione con un DataBase (connessione che resta aperta per servire più richieste del client). S1TecnSoft Internet Paolo Salvaneschi 33
Java Servlet Ciclo di vita di una Servlet La servlet esegue le richieste del client. Per ogni richiesta è creato un thread. La servlet rilascia le risorse ed è distrutta S1TecnSoft Internet Paolo Salvaneschi 34
HelloWorldServlet.java. import javax.servlet.* ; import javax.servlet.http.* ; public class HelloWorldServlet extends HttpServlet{ } Java Servlet Metodo invocato al momento dell arrivo di una richiesta da parte di un client public void service (HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException{ res.setcontenttype( text/html ); } ServletOutputStream out = res.getoutputstream(); out.println( <html> ); out.println( <head><title>hello World</title></head> ); out.println( <body> ); out.println( <h1>hello World</h1> ); out.println( </body></html> ); S1TecnSoft Internet Paolo Salvaneschi 35
Java Server Pages Server Server Application Server Client Data base Sistema Informativo Java JSP H T T P D HTTP Browser Tomcat Websphere Apache Microsoft Internet Explorer Mozilla Firefox S1TecnSoft Internet Paolo Salvaneschi 36
Java Server Pages Java Server Pages (JSP) Pagina di testo HTML che include codice java Pagina dinamica che è eseguita lato server e restituisce HTML al client S1TecnSoft Internet Paolo Salvaneschi 37
Java Server Pages Scripting lato client Scopo: rendere dinamica l interfaccia utente Cambiare a seguito di eventi la presentazione Gestire l input dell utente Scripting lato server Scopo: connettersi a programmi e basi dati e modificare di conseguenza la pagina inviata S1TecnSoft Internet Paolo Salvaneschi 38
Java Server Pages Java Server Pages (JSP) Il server utilizza la pagina JSP come una servlet Al momento del primo accesso la pagina JSP è trasformata in un file Java e compilata ottenendo una classe Java che rappresenta una servlet di tipo HttpServlet che crea una pagina html e la invia al client. S1TecnSoft Internet Paolo Salvaneschi 39
Java Server Pages Java Server Pages (JSP) Possibile integrazione tra servlet e JSP: il client invia una richiesta ad una servlet che invia gli oggetti prodotti ad una JSP la quale genera l HTML e lo invia JSP: View Servlet: Controller Componenti Java: Model S1TecnSoft Internet Paolo Salvaneschi 40
Java Server Pages esempio1.jsp Espressioni :iniziano con la sequenza di caratteri <%= e terminano con la sequenza %> Utilizzate per aggiungere alla risposta http il risultato dell esecuzione di un espressione di scripting <html> <body> <h1> Informazioni sulla richiesta http </h1> <br> Metodo richiesto : <%= request.getmethod() %> <br> URI : <%= request.getrequesturi() %> <br> Protocollo : <%= request.getprotocol() %> <br> <body> </html> S1TecnSoft Internet Paolo Salvaneschi 41
Java Server Pages Esempio2.jsp <html> <body> <% for(int i=0; i<10; i++) { if(i%2==0) { %> %> <body> </html> <h1>pari</h1> <% } else { %> <h2>dispari</h2> <% } } Scriptlet: iniziano con la sequenza <%, terminano con la sequenza %> Possibilità si spezzare il codice Java contenuto all interno delle scriptlet per dar modo al programmatore di non dover fondere tag html all interno del sorgente Java. S1TecnSoft Internet Paolo Salvaneschi 42
Java Server Pages Applicazioni Web servite da Tomcat Container Metodo standard di installazione e packaging delle risorse che compongono un applicazione (pagine JSP, pagine statiche, classi java, ). Files disposti in una gerarchia definita all interno di un archivio WAR (Web archive) Archivio.jar (.zip) Cartella di file system S1TecnSoft Internet Paolo Salvaneschi 43
Java Server Pages Descrittore dell installazione (file XML) Contesto servlet associato ad un context path utilizzato per raggiungere l applicazione a cui inviare le richieste S1TecnSoft Internet Paolo Salvaneschi 44
Java Server Pages Applicazione servita da Tomcat S1TecnSoft Internet Paolo Salvaneschi 45
Java Server Pages Applicazione servita da Tomcat S1TecnSoft Internet Paolo Salvaneschi 46
Installazione di Tomcat S1TecnSoft Internet Paolo Salvaneschi 47
Lettura da DataBase <html><head><title>search in Employee Database</title></head> <body bgcolor="white"> Inserire il valore di uno o più campi. <form action="find.jsp" method="get"> <table> <tr><td>nome:</td> <td><input type="text" name="firstname"></td></tr> <tr> <td>cognome:</td> <td><input type="text" name="lastname"></td></tr> <tr><td>divisione:</td> <td><input type="text" name="dept"></td></tr> <tr><td><input type="submit" value="cerca"></td></tr> </table> </form> </body></html> Applicazione S1TecnSoft Internet Paolo Salvaneschi 48
Lettura da DataBase <%@ taglib prefix="sql" uri="http://java.sun.com/jstl/sql" %> Vedi NOTA <%-- Execute query, with wildcard characters added to the parameter values used in the search criteria--%> <sql:query var="emplist" scope="request"> SELECT * FROM Employee WHERE FirstName LIKE? AND LastName LIKE? AND Dept LIKE? %carl% giancarlo, carletto, ORDER BY LastName <sql:param value="%${param.firstname}%" /> <sql:param value="%${param.lastname}%" /> <sql:param value="%${param.dept}%" /> </sql:query> <jsp:forward page="list.jsp" />? Segnaposto Le istruzioni <sql:param sostituiscono nell ordine i segnaposto Nota: se il campo firstname della form è vuoto, la query diventa WHERE FirstName LIKE %null% (LIKE qualsiasi stringa) (LIKE ab%ba_ : qualunque stringa che inizia con ab e ha ba prima dell ultima posizione) S1TecnSoft Internet Paolo Salvaneschi 49
Lettura da DataBase <%@ page contenttype="text/html" %> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %> <%@ taglib prefix="sql" uri="http://java.sun.com/jstl/sql" %> <html> <head> <title>ricerca da DataBase</title> </head> <body bgcolor="white"> <c:choose> <c:when test="${emplist.rowcount == 0}"> Nessun impiegato è stato trovato </c:when>. Nota: emplist è disponibile poiché è nello scope request La pagina è stata attivata con forward (stessa request) S1TecnSoft Internet Paolo Salvaneschi 50
Lettura da DataBase <c:otherwise> <p>sono stati trovati i seguenti impiegati:</p> <table border="1"> <th>nome</th><th>cognome</th> <th>divisione</th><th>data di assunzione</th> <th>email</th> <c:foreach items="${emplist.rows}" var="row"> <tr> <td><c:out value="${row.firstname}" /></td> <td><c:out value="${row.lastname}" /></td> <td><c:out value="${row.dept}" /></td> <td><c:out value="${row.empdate}" /></td> <td><c:out value="${row.emailaddr}" /></td> </tr> </c:foreach> </table> </c:otherwise> </c:choose> </body></html> Nomi dei campi nel DB S1TecnSoft Internet Paolo Salvaneschi 51
NOTA Lettura da DataBase Elementi di azione personalizzata Specifica e ambiente di sviluppo per realizzare nuove azioni personalizzate (nuove tag library) JSTL (Java Standard Tag Library) <c: <x: Librerie predefinite di azioni <fmt: <sql: Core Elaborazione XML Formattazione e internazionalizzazione Accesso a database S1TecnSoft Internet Paolo Salvaneschi 52
Connessione con i Data Base Server Server Client Data base S Q L JDBC (ODBC) H T T P D S1TecnSoft Internet Paolo Salvaneschi 53
Connessione con i Data Base ODBC (Open DataBase Connectivity) Standard internazionale di accesso a Database Relazionali JDBC Interfaccia ad oggetti java di accesso a sorgenti di dati Connessa ai singoli driver di DataBase attraverso una interfaccia nativa o attraverso un ponte verso ODBC S1TecnSoft Internet Paolo Salvaneschi 54
Ajax L aggiornamento di dati su una pagina web richiede di ricaricare la pagina AJAX (Asynchronous JavaScript and XML ) Lato client Utilizza XMLHttpRequest, CSS, DOM, e JavaScript Il componente Ajax (JavaScript) è incorporato nella pagina web e, invocato da eventi, esegue richieste http ad un server. La risposta, scritta in XML, è utilizzata per modificare in modo asincrono parte della pagina senza ricaricarla completamente. S1TecnSoft Internet Paolo Salvaneschi 55
J2EE S1TecnSoft Internet Paolo Salvaneschi 56