Tecnologie server-side

Tecnologie server-side - I
Principali tecnologie per costruire applicazioni web:
Client-side
• Javascript
(e jQuery)
Approcci ibridi
• AJAX (jQuery)
Server-side
• PHP
• JSP e Java Servlet
Inoltre:
 ASP.NET
 Ruby, Python e Perl
 (Javascript)
 rispetto
p
alle distinzioni viste pprima,, qqueste soluzioni:
 utilizzano linguaggi di programmazione
 alcune sono tecnologie client-side (il codice è elaborato sul
client, dal browser), altre sono server-side (il codice è
elaborato sul server), altre sono miste
a.a. 2016/17
Tecnologie Web
1
Tecnologie server-side - II
Le tecnologie server-side servono principalmente per:
1. acquisire informazioni dal client, per es: dati inseriti
dall'utente in un modulo online; dati contenuti in un link [1]
2 inserire dati in un database (per es.
2.
es i dati di registrazione
di un utente) o leggere dati da un database (per es. per
verificare username e password di un utente) [2]
Per far funzionare una tecnologia server-side è necessario che il
Web Server la "supporti"  cosa significa?!? Dipende dalla
specifica tecnologia...
Inoltre, siccome tipicamente le tecnologie server-side
interagiscono con un database  è necessario che sul "server"
ci sia un DBMS[2] che supporti l'interazione con il database
prescelto
a.a. 2016/17
Tecnologie Web
2
1
Tecnologie server-side - III
nome = maria
eta = 18-25
insert.php
...
[1]
HTTP
request
q
Web
Server
Come ti
chiami? maria
Quanti
da 18 a 25
annii hai?
h i?
invia
…
Ciao Maria!
Ho inserito i tuoi dati...
"supporto"
(x es. interprete PHP)
...
HTTP
response
[2]
<?php
$nome=$_POST["nome"];
$eta=$_POST["eta"];
...
//inserimento nel DB
?>
a.a. 2016/17
INSERT INTO utenti
VALUES ($nome, $eta)
DBMS
(es: MySQL
Server)
DB
Tecnologie Web
[1]
3
Inviare dati al Web Server - I
I dati da inviare al Web Server possono derivare da:
• moduli online (form)
• link con parametri
Il client invia i dati al Web Server inserendoli nell
nell'HTTP
HTTP
request
Esistono due modi per codificare i dati nell'HTTP request:
• metodo GET
La conoscenza di HTML
• metodo POST
(e quindi dei form) è un
prerequisito; qui vediamo gli
 vediamo:
aspetti che legano i form alle
1. moduli online (form)
tecnologie server-side...
2. link con parametri
3. contenuto di HTTP request
4. differenza tra i metodi GET e POST
a.a. 2016/17
Tecnologie Web
4
2
[1]
Inviare dati al Web Server - II
Moduli online (form)
[www.html.it/guide/guida-html/, lez. 44-50]
In HTML
HTML...
<FORM METHOD="POST"
ACTION="id.php" >
Login: <INPUT TYPE="text" NAME="login"/>
Password: <INPUT TYPE="password" NAME="pwd"/>
<INPUT TYPE="Submit" VALUE="OK"/>
</FORM>
... un modulo online (form) contiene:
a. campi di input (tag <INPUT...> e altri)
b. metodo (attributo METHOD del tag <FORM...>)
c. azione (attributo ACTION del tag <FORM...>)
a.a. 2016/17
[1]
a.
Tecnologie Web
5
Inviare dati al Web Server - III
campi di input = elementi attraverso cui l'utente fornisce dei
dati, per es:
tra i campi di input c'è anche il pulsante di invio!
b. metodo = modo in cui vengono codificati i dati da inviare al
server (HTTP: POST o GET)
c. azione = script programma server-side che "raccoglie" ed
"elabora" i dati contenuti nel form
NB i dati inseriti dall'utente dei vari campi assumono la forma di
coppie <nome, valore>, in cui:
nome = valore dell'attributo name nel tag HTML (NAME="login")
valore = ciò che l'utente ha scritto (o selezionato)
a.a. 2016/17
Tecnologie Web
6
3
[1]
Inviare dati al Web Server - IV
Contenuto di HTTP request
Cosa succede quando l'utente fa click sul pulsante di invio?
Viene costruita una HTTP request che contiene:
indicazione della risorsa server
server-side
side (script o
• ll'indicazione
programma) che "gestirà" i dati, ricavata dall'attributo
ACTION, per es: ACTION="id.php"
• i dati, nella forma di coppie <nome, valore>, ricavati
dai campi di input riempiti/selezionati dall'utente
Per es: HTTP request: risorsa = identif.php
g admin>
dati: <login,
<pwd, pippo>
All'interno di HTTP request i dati (parametri) possono
essere codificati in due modi, a seconda dell'indicazione
contenuta nell'attributo METHOD del tag <FORM...>...
a.a. 2016/17
Tecnologie Web
[1]
7
Inviare dati al Web Server - V
Differenza tra i metodi GET e POST (di HTTP)
• metodo GET (richiesta di una risorsa): eventuali dati, cioè le
coppie <nome, valore>, sono scritti in coda alla risorsa
richiesta  saranno quindi visibili nell'URL (nella barra degli
indirizzi del HTTP header
browser) 
risorsa = identif.php?login=admin&pwd=pippo
...
Per es:
HTTP body
...
• metodo POST (invio di dati al server + indicazione della risorsa
che li deve elaborare):
) i dati (p
(parametri),
) cioè le coppie
pp <nome,
valore>, sono scritti all'interno
HTTP header
del corpo (body) di HTTP request
risorsa = identif.php
...
 non saranno quindi
HTTP body
visibili nella barra degli
dati: <login, admin>
indirizzi del browser  Per es:
a.a. 2016/17
Tecnologie Web
...
<pwd, pippo>
8
4
Inviare dati al Web Server - VI
[1]
Link con parametri
In HTML...
<A HREF="param.php?risposta=alan">Alan</A> <BR>
<A HREF="param.php?risposta=kit">Kit</A> <BR>
<A HREF="param.php?risposta=john">John</A>
Cosa succede quando l'utente fa click sul un link?
Viene costruita una HTTP request che contiene:
HTTP header
risorsa = param.php
param php ?risposta
?risposta=kit
kit
...
HTTP body
...
NB l'indicazione della
risorsa server-side (script
o programma) è nel link
(attributo HREF), insieme
ai dati  il metodo usato nell'HTTP request per la codifica dei
dati è GET!
a.a. 2016/17
[1]
Tecnologie Web
9
Inviare dati al Web Server - VII
Vi ricordate l'URL rewriting, utilizzato per gestire la sessione
se i cookies sono stati disattivati?
Avevamo detto che il Web Server scrive il session-id come
parametro degli URL presenti nella pagina...
Ora siamo in grado di capire cosa vuol dire: quando il client
deve costruire un'HTTP request (per es. quando l'utente clicca
su un link), all'URL (risorsa) indicata nell'HTTP request viene
aggiuto il session-id; per es:
<A HREF="adduser.php">
diventa:
<A HREF="adduser.php?PHPSESSID=68cf093a2ec5aa4f6cb60">
a.a. 2016/17
Tecnologie Web
10
5
[2] Salvare
i dati in un database - I
• I database ci permettono di salvare dati in modo strutturato
• Esistono diverse tipologie di database, basate su principi di
strutturazione diversi: database relazionali, database ad
gg , ...
oggetti,
• I tipi di database più utilizzati sono i database relazionali
• La struttura di un database relazionale (quali tipi di
informazioni contiene, quali relazioni hanno le informazioni
tra loro, ...) può essere definita a vari livelli:
vista 1 vista 2
vista n
Una conoscenza di base
dei database e dei
DBMS è un prerequisito; qui
facciamo un rapidissimo e non
esaustivo ripasso...
livello concettuale
livello logico
livello fisico
a.a. 2016/17
Tecnologie Web
[2] Salvare
11
i dati in un database - II
Livello logico: rappresentazione tabellare dei dati
Esempio:
Tabella: LIBRI
NumInv
Autore
riga/record
(rappresenta
un "oggetto",
x es. un libro)
Titolo
colonna/campo
(rappresenta un
attributo, x es. il
titolo)
Anno_ed
Editore
cella
Quando vogliamo costruire una tabella, dobbiamo innanzitutto
definire la sua struttura: i nomi dei campi (colonne) e i tipi di
dati in essi contenuti
a.a. 2016/17
Tecnologie Web
12
6
[2] Salvare
i dati in un database - III
Interazione con un database (tramite una User Interface, o uno
script/programma server-side):
• interrogazione (leggo da DB)
• manipolazione di dati:
 inserimento di dati (scrivo nel DB)
 cancellazione di dati ("scrivo" nel DB)
 aggiornamento (scrivo nel DB)
• modifiche strutturali (creazione
User Interface
tabelle, ecc.)
• modifiche dei permessi
di accesso
database
a.a. 2016/17
[2] Salvare
Tecnologie Web
Script/programma (server-side)
<?
$c=mysql_connect("localhost“,"root","");
mysql_select_db("bacheca");
$sql="SELECT * FROM ut WHERE co='Rossi'";
$ris = mysql_query($sql)
...
?>
13
i dati in un database - IV
Ogni interazione con la base di dati:
• viene interpretata, analizzata ed eseguita dal DBMS
(DataBase Management System)
• costituisce una query, espressa in SQL (Structured Query
Language), per es:
interrogazione
SELECT * FROM libri WHERE Editore='Feltrinelli'
manipolazione
INSERT INTO utenti (nome,eta) VALUES ('lia',23)
DELETE FROM libri WHERE NumInv='123-ab'
modifiche strutturali
DROP TABLE utenti
modifiche dei permessi
GRANT ALL ON myDB.* TO 'anna'@'localhost'
a.a. 2016/17
Tecnologie Web
14
7
[2] Salvare
i dati in un database - V
• se è un'interrogazione (SQL SELECT), restituisce come
risultato un insieme di record (recordset), es:
n.inv autore titolo
123
456
789
casa_ed
Feltrinelli
lt i lli
All d E
Allende
Eva L
Luna F
Benni
Terra
Feltrinelli
Feltrinelli
Voltolini 10
• se è una manipolazione di dati (SQL INSERT, DELETE,
UPDATE) o di elementi strutturali del DB (SQL DROP TABLE
libri), o di permessi di accesso, restituisce un'indicazione
di successo o errore (tipicamente  rispettivamente  true e
false)
a.a. 2016/17
[2] Salvare
Tecnologie Web
15
i dati in un database - VI
Esempio di interazione con un DB attraverso una User Interface:
Un esempio di interazione con un DB attraverso uno script server-side la
vediamo tra breve...
a.a. 2016/17
Tecnologie Web
16
8
PHP - I
Principali tecnologie per costruire applicazioni web:
Client-side
• Javascript
(e jQuery)
Approcci ibridi
• AJAX (jQuery)
Server-side
• PHP
• JSP e Java Servlet
Inoltre:
 ASP.NET
 Ruby, Python e Perl
 (Javascript)
 rispetto
p
alle distinzioni viste pprima,, qqueste soluzioni:
 utilizzano linguaggi di programmazione
 alcune sono tecnologie client-side (il codice è elaborato sul
client, dal browser), altre sono server-side (il codice è
elaborato sul server), altre sono miste
a.a. 2016/17
Tecnologie Web
17
PHP - II
Es: http://www.di.unito.it/goy/dida.php
PHP [php.net] è:
• un linguaggio di programmazione "ad alto livello"
• pensato per il web, cioè in grado di
– leggere il contenuto della HTTP request proveniente dal
client (browser)
– scrivere all'interno della HTTP response che verrà inviata
al client (browser)
• interpretato (da un interprete PHP)
• server-side (cioè interpretato ed eseguito sul server)
• Open Source, cioè l'interprete PHP è distribuito secondo la
filosofia Open Source[*]
a.a. 2016/17
Tecnologie Web
18
9
PHP - III
Applicazione web scritta in PHP = insieme di "pagine web",
cioè file di testo, con estensione .php, che contengono:
– Codice HTML (+ eventualmente Javascript client-side)
– Codice PHP = programma (script) server
server-side
side
Esempio:
[h]
[p]
[h]
<H1> PHP: esempio </H1>
HTML: interpretato dal browser
<?php
programmma
$id = $_POST["login"];
$pwd = $_POST["password"];
(script) PHP:
if ($id == "admin" && $pwd == "pippo") {
interpretato
echo "<P>Benvenuto
P Benvenuto amministratore!
amministratore!</P>";}
/P ;}
d ll'i t
dall'interprete
t
else {
echo "<P>Buongiorno ".$id."</P>";}
PHP, sul server
?>
<P>
HTML: interpretato
Questa è una pagina web dinamica
dal browser
</P>
a.a. 2016/17
Tecnologie Web
19
PHP - IV
Cosa succede quando il browser invia una HTTP request al server
basata su un URL del tipo: http://www.di.unito.it/dida.php?
• Il Web Server si accorge, grazie all'estensione del file indicato
g PHP ((dida.php)
p p)
nell'URL, che la risorsa richiesta è una ppagina
 gira l'HTTP request all'interprete PHP
• l'interprete PHP interpreta (ed esegue) gli script [p] contenuti
nella pagina indicata nell'HTTP request; tipicamente, alcune
istruzioni PHP gli diranno di:
– leggere i dati (parametri) contenuti nell'HTTP request
(accodati all'URL: identif.php?login=admin&pwd=pippo,
oppure contenuti
t ti nell body);
b d ) per es:
$id = $_GET["username"]; opp $id = $_POST["username"];
– connettersi ad un database (per leggere o scrivere dati);
per es:
$r = $db->query("SELECT * from libri WHERE titolo = '$tit'");
a.a. 2016/17
Tecnologie Web
20
10
PHP - V
• L'esecuzione dello script PHP produce un risultato, tipicamente
del testo o del codice HTML, che viene inserito nella pagina al
posto dello script
pagina
g
risultante, composta
p
dall'HTML originario
g
[h] + il
• La p
risultato dell'esecuzione dello script, viene inviata al browser
Vediamo un altro esempio di HTML + PHP:
<?php
$p = "Everything";
?>
<p>
The answer to the ultimate question of Life, the
U i
Universe
and
d <?=
<? $
$p ?> is
i <?=
<? 6*7 ?>
</p>
 The answer to the ultimate question of Life, the Universe and Everything is 42
shortcut per dire: scrivi
il contenuto di $p
a.a. 2016/17
shortcut per dire: scrivi
il risultato di 6*7
Tecnologie Web
21
PHP - VI
nome = maria
eta = 18-25
insert.php
...
HTTP
request
q
Web
Server
Come ti
chiami? maria
Quanti
da 18 a 25
annii hai?
h i?
invia
…
Ciao Maria!
Ho inserito i tuoi dati...
interprete
PHP
...
HTTP
response
INSERT INTO utenti
VALUES ($nome, $eta)
<?php
$nome=$_POST["nome"];
$eta=$_POST["eta"];
//inserimento nel DB
echo "ho inserito i
tuoi dati";
?> a.a. 2016/17
DBMS
(es: MySQL
Server)
Tecnologie Web
DB
22
11
PHP - VII
Tipicamente:
sistema web server
DBMS
interprete script
operativo
server-side
Linux
Apache
p
MySQL/MariaDB
y Q
PHP
L.
A.
M.
Linux (www.linuxfoundation.org)
Apache (www.apache.org)
MySQL (www.mysql.com)
opp Maria DB (mariadb.org)
PHP (www.php.net)
P.
tutte tecnologie
Open Source[*]
NB: sono possibili combinazioni diverse... per es:
Windows + Apache + MySQL/MariaDB + PHP = W.A.M.P.
Mac OS + Apache + MySQL/MariaDB + PHP = M.A.M.P.
a.a. 2016/17
Tecnologie Web
23
PHP - VIII
XAMPP = pacchetto multi-piattaforma (X = qualunque S.O.)
contenente Apache, MySQL/MariaDB, PHP e Perl
[www.apachefriends.org]
a.a. 2016/17
Tecnologie Web
24
12
[2] Salvare
i dati in un database - VII
Esempio di interazione con un DB attraverso uno script PHP:
<h1>I miei film</h1>
host (su cui gira il DBMS,
<ul>
DBMS
DB
che è un... server!)
<?php
?p p
$db = new PDO("mysql:dbname=myMovies;host=localhost",
username "anna", "annaPwd"); password
$rows = $db->query("SELECT * FROM movies WHERE year = 2015);
foreach ($rows as $row) 
?>
<li><?= $rows["name"] ?> stelle: <?= $rows["stars"] ?></li>
<?php

?>
</ul>
a.a. 2016/17
Tecnologie Web
[*] Digressione:
25
Open Source - I
Breve parentesi sull'open source
[www.opensource.org]
Open Source Initiative (OSI) = associazione no-profit che
ha ll'obiettivo
obiettivo di gestire e promuovere la produzione di
software open source
Il software open source (o software libero) deve rispettare
una serie di criteri:
•
•
•
•
•
a.a. 2016/17
Il codice sorgente del programma deve essere disponibile
Il software può essere modificato e distribuito (con un
nome diverso) alle stesse condizioni
La licenza del software deve consentire a chiunque di
ridistribuire il software secondo le stesse modalità
Chiunque può partecipare allo sviluppo del software
Il software deve essere distribuito gratuitamente (senza
diritti d'autore o profitti)
Tecnologie Web
26
13
[*] Digressione:
Open Source - II
L'idea che sta alla base dell'Open Source Initiative è la
seguente: quando i programmatori hanno la possibilità di
leggere, modificare e ridistribuire il codice sorgente di un
programma quel software si evolve
programma,
evolve. La gente lo migliora,
migliora
lo adatta, lo corregge. E tutto questo può avvenire con una
rapidità che appare impressionante a chi è abituato ai
ritmi lenti dello sviluppo del software convenzionale.
La comunità dell'open source ha imparato che questo
rapido processo evolutivo produce software migliore
rispetto al tradizionale modello chiuso, nel quale solo
pochissimi
hi i i programmatorii hanno
h
accesso all codice
di
sorgente e tutti gli altri devono avere a che fare con un
imperscrutabile e oscuro blocco di bit.
[da www.opensource.org]
a.a. 2016/17
Tecnologie Web
27
JSP e Java Servlet
Principali tecnologie per costruire applicazioni web:
Client-side
• Javascript
(e jQuery)
Approcci ibridi
• AJAX (jQuery)
Server-side
• PHP
• JSP e Java Servlet
Inoltre:
 ASP.NET
 Ruby, Python e Perl
 (Javascript)
 rispetto
p
alle distinzioni viste pprima,, qqueste soluzioni:
 utilizzano linguaggi di programmazione
 alcune sono tecnologie client-side (il codice è elaborato sul
client, dal browser), altre sono server-side (il codice è
elaborato sul server), altre sono miste
a.a. 2016/17
Tecnologie Web
28
14
Java Servlet - I
Es: http://www.di.unito.it/goy/didaManager
Le Java Servlet (www.oracle.com/technetwork/java/index-jsp135475.html) sono dei programmi Java pensati per la
p g
programmazione
web sever-side 
• li si deve poter invocare tramite un URL (= "richiesta di
esecuzione"), per es: http://www.di.unito.it/goy/didaManager
• devono essere in grado di manipolare HTTP request e HTTP
response); in particolare:
 il Web Server deve poter passare al programma la HTTP
request proveniente dal client (browser) contenente i dati,
affinché
ffi hé la
l Servlet
S l t possa leggerne
l
il contenuto
t t
 quando la Servlet ha elaborato il risultato (per es. un
frammento di codice HTML), lo deve poter inserire
nell'HTTP response che verrà inviata al client (browser)
dal Web Server
a.a. 2016/17
Tecnologie Web
29
Java Servlet - II
Java [www.java.com] è:
• un linguaggio di programmazione "ad alto livello" (orientato
agli oggetti)
• per la traduzione dei sorgenti in linguaggio macchina utilizza un
approccio misto: il sorgente scritto in Java (myProgram.java)
viene compilato (dal un compilatore Java) che genera un file
scritto in bytecode (myProgram.class), il quale viene
interpretato (ed eseguito) da un interprete Java (generalmente
chiamato Java Virtual Machine: JVM o Java Runtime
Environment: JRE)
NB il compilatore e il bytecode sono indipendenti dalla macchina, la
JVM  dovendo tradurre in linguaggi macchina specifici  dipende
dalla macchina (S.O. + CPU)
• server-side, cioè il file contenente il programma tradotto in
bytecode dal compilatore (myProgram.class) viene interpretato
ed eseguito sul server (la JVM risiede sul server)
a.a. 2016/17
Tecnologie Web
30
15
Java Servlet - III
Esempio (semplificato) di Java Servlet (sorgente):
public class GeoMgr extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
String param = request.getParameter(
request getParameter("par");
par );
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter resp = response.getWriter()) {
resp.print("Parametro: "+param);
}
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
p
yp (
/
;
);
try (PrintWriter resp = response.getWriter()) {
String geoMgrResponse = "";
...
resp.print(geoMgrResponse);
}
}
}
a.a. 2016/17
Tecnologie Web
31
Java Servlet - IV
Cosa succede quando il browser invia una HTTP request al server
basata su un URL del tipo: http://www.di.unito.it/didaManager?
1) al posto dell'interprete PHP, sul server devono essere installate
due cose:
 un Servlet
S l Container
C
i
(o Web Container o Servlet Engine) che:
h
 "carica" le Servlet nel processo del Web Server (alla prima
invocazione della Servlet)
 supporta il protocollo HTTP (per gestire il flusso HTTP
request/HTTP response)
 gestisce al suo interno più applicazioni, ognuna identificata da
un servlet context (nome univoco, x es: didaManager)
 una Java Virtual Machine (o JRE: Java Runtime
Environment), cioè un interprete Java che interpreti ed
esegua la Servlet (bytecode)
2) il programmatore deve aver compilato il sorgente Java e caricato
sul server il file bytecode (myProgram.class)
a.a. 2016/17
Tecnologie Web
32
16
Java Servlet - V
• Il Web Server vede che la risorsa richiesta è una Java Servlet
(didaManager)  gira l'HTTP request al Servlet Container
• il Servlet Container cerca tra i suoi "contesti" (servlet context) il
pprogramma
g
corrispondente
p
(es:
( myProgram.class)
y
g
) e chiede
all'interprete Java (JVM/JRE) di interpretare (ed eseguire) il
programma
• come nel caso di PHP, tipicamente, alcune istruzioni gli diranno di:
– leggere i dati (parametri) contenuti nell'HTTP request
(accodati all'URL: identif.php?login=admin&pwd=pippo,
oppure contenuti nel body); per es:
request.getParameter("par");
– connettersi ad un database (per leggere o scrivere dati);
per es:
Statement stm = connection.createStatement();
ResultSet rs = stm.executeQuery("SELECT * from libri");
a.a. 2016/17
Tecnologie Web
33
Java Servlet - VI
• l'esecuzione della Java Servlet produce un risultato, tipicamente
del testo o del codice HTML, che viene generalmente inserito
nel body dell'HTTP response:
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter resp = response
response.getWriter())
getWriter()) {
String geoMgrResponse = "";
...
resp.print(geoMgrResponse);
• l'HTTP response viene passata dal Servlet Container al Web
Server ed inviata al browser
a.a. 2016/17
Tecnologie Web
34
17
Java Servlet - VII
nome = maria
eta = 18-25
inserisci
...
HTTP
request
Web
Server
Come ti
chiami? maria
Quanti
da 18 a 25
anni hai?
invia
…
Ciao Maria!
Ho inserito i tuoi dati...
interprete
bytecode Java
(JVM/JRE)
Servlet
Container
...
HTTP
response
INSERT INTO utenti
VALUES ($nome, $eta)
DBMS
SERVLET inserisci
print("Ciao,"+nome);
...
//inserimento nel DB
/*invia ris in
HTTPresponse*/
a.a. 2016/17
(es: Oracle
DB)
DB
Tecnologie Web
35
Java Servlet - VIII
Tipicamente si utilizzano dei Web Server che includono un
Servlet Container (e la JVM/JRE), per es:
Tomcat (tomcat.apache.org)
Tomcat è un Web server open source, sviluppato
dalla Apache Software Foundation, che include un
Servlet Container (e la JVM/JRE)
Glassfish (glassfish.java.net)
GlassFish è un Application Server[*] open source,
sviluppato inizialmente dalla Sun Microsystems e
attualmente gestito dalla Oracle; include un Web Server e
un Servlet Container (e la JVM/JRE)
[*] Application Server = software che comprende diverse funzionalità per
la gestione di applicazioni complesse; tipicamente, include un Web
Server
a.a. 2016/17
Tecnologie Web
36
18
JSP - I
Es: http://www.di.unito.it/goy/dida.jsp
Applicazione web basata sulle JSP (Java Server Pages) =
insieme di "pagine web", cioè file di testo, con estensione .jsp,
che contengono:
– Codice HTML (+ eventualmente Javascript client-side)
client side)
– Codice Java, oppure tag JSTL (JSP Standard Tag Library
= libreria di tag che corrispondono ad istruzioni Java)
Esempio:
[h] <H1> PHP: esempio </H1> HTML (interpretato dal browser)
istruzioni
[p] <%
connection = DriverManager.getConnection(cStr);
Java:
Statement stm = connection
connection.createStatement();
createStatement();
compilate
compilate,
ResultSet rs = stm.executeQuery("SELECT * FROM
interpretate
products WHERE price > 100"); ed eseguite
%>
sul server
[h] <P>
Questa è una pagina web dinamica HTML (interpretato
</P>
dal browser)
a.a. 2016/17
Tecnologie Web
37
JSP - II
Oppure...
[h]
[p]
[h]
<H1> JSP: esempio </H1> HTML: interpretato dal browser
<sql:setDataSource driver="com.mysql.jdbc.Driver" JSTL tags:
url="jdbc:mysql://localhost/database_name"
tradotti (sul
var="localSource" user="database_user" ... />
server)
se
ve ) in
<sql:query
l
d
dataSource="${localSource}"
t S
"${l
lS
}"
istruzioni
sql="SELECT * FROM products WHERE price > 100"
Java
var="result" />
<P>
Questa è una pagina web dinamica HTML: interpretato
dal browser
</P>
NB: i tag JSTL sembrano tag di un linguaggio di mark-up... ma
lo sono solo in apparenza! Vengono infatti tradotti in
istruzioni Java (quindi in istruzioni di un linguaggio di
programmazione)
a.a. 2016/17
Tecnologie Web
38
19
JSP - III
Cosa succede quando il browser invia una HTTP request al server
basata su un URL del tipo: http://www.di.unito.it/dida.jsp?
• Il Web Server si accorge, grazie all'estensione del file indicato
j p)
nell'URL, che la risorsa richiesta è una JSP ((dida.jsp)
 gira l'HTTP request al... Servlet Container!
• se è la prima volta che quella JSP viene richiesta (o se è stata
modificata)
– il Servlet Container invoca il JSP Engine (chiamato talvolta
"compilatore JSP", pur non essendo un vero compilatore :-( )
– il JSP Engine
g
trasforma la ppagina
g ((HTML + JSTL
tags/istruzioni Java) in una Java Servlet (NB in un sorgente,
scritto in Java!); in particolare:
a.a. 2016/17
Tecnologie Web
39
JSP - IV
o
trasforma i tag HTML (e le eventuali istruzioni Javascript)
in istruzioni Java che scrivono nel body della HTTP
response (quindi sulla pagina che sarà visualizzata dal
browser); per es:
<H1>JSP: esempio</H1>
<H1>JSP
i </H1> 
PrintWriter pw;
pw = httpResponse.getWriter();
pw.print("<H1>JSP: esempio</H1>");
o
o
o
o
se la JSP contiene direttamente codice Java, lo include nella
Servlet
se la JSP contiene tag JSTL, li traduce in istruzioni Java e
le include nella Servlet
compila la Servlet, invocando il compilatore Javae
producendo la versione in bytecode della Servlet
invoca l'interprete Java (JVM/JRE), che interpreta ed
esegue la Servlet
a.a. 2016/17
Tecnologie Web
40
20
JSP - V
• se invece la Servlet (compilata) è già disponibile (perché non è la
prima volta che quella JSP viene richiesta), il Servlet Container
invoca semplicemente l'interprete Java (JVM/JRE), che
interpreta ed esegue la Servlet
• tipicamente, alcune istruzioni nella Servlet (derivanti da
istruzioni incluse dal programmatore nella JSP) diranno di:
– leggere i dati (parametri) contenuti nell'HTTP request
(accodati all'URL: identif.php?login=admin&pwd=pippo,
oppure contenuti nel body); per es:
request.getParameter("par");
– connettersi ad un database (per leggere o scrivere dati);
per es:
Statement stm = connection.createStatement();
ResultSet rs = stm.executeQuery("SELECT * from libri");
a.a. 2016/17
Tecnologie Web
41
JSP - VI
A questo punto il caso è stato ricondotto a quello di una "normale"
Servlet...
• l'esecuzione della Java Servlet produce un risultato, tipicamente
del testo o del codice HTML, che viene ggeneralmente inserito
nel body dell'HTTP response:
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter resp = response.getWriter()) {
String geoMgrResponse = "";
...
resp.print(geoMgrResponse);
• l'HTTP response viene passata dal Servlet Container al Web
Server ed inviata al browser
a.a. 2016/17
Tecnologie Web
42
21
JSP - VII
nome = maria
eta = 18-25
inserisci
...
HTTP
request
Web
Server
Ciao Maria!
solo la prima volta
interprete
bytecode Java
(JVM/JRE)
Come ti
chiami? maria
Quanti
da 18 a 25
anni hai?
invia
…
JSP Engine
Engine
Servlet
HTTP
Container response
SERVLET generata
automaticamente a
partire dalla JSP
print("Ciao,"+nome);
...
//inserimento nel DB
a.a. 2016/17HTTPresp*/
/*invia
Ho inserito i tuoi dati...
...
INSERT INTO utenti
VALUES ($nome, $eta)
DBMS
(es: Oracle
DB)
Tecnologie Web
DB
43
JSP - VIII
 per far funzionare le JSP è necessaria, sul server, la stessa
tecnologia che si usa per le Java Servlet:
• un Servlet Container che contenga anche un JSP
Engine (che a sua volta contiene il compilatore Java)
• l'interprete Java (JVM/JRE)
 i già menzionati
Tomcat (tomcat.apache.org) e
Glassfish (glassfish.java.net)
a.a. 2016/17
Tecnologie Web
44
22
ASP.NET - I
Principali tecnologie per costruire applicazioni web:
Client-side
• Javascript
(e jQuery)
Approcci ibridi
• AJAX (jQuery)
Server-side
• PHP
• JSP e Java Servlet
Inoltre:
 ASP.NET
 Ruby, Python e Perl
 (Javascript)
 rispetto
p
alle distinzioni viste pprima,, qqueste soluzioni:
 utilizzano linguaggi di programmazione
 alcune sono tecnologie client-side (il codice è elaborato sul
client, dal browser), altre sono server-side (il codice è
elaborato sul server), altre sono miste
a.a. 2016/17
Tecnologie Web
45
ASP.NET - II
• ASP.NET = framework (gratuito) che supporta la costruzione
di applicazioni Web (pagine Web con estensione .aspx)
server-side
• nel framework .NET possono essere utilizzi diversi linguaggi
di programmazione:
i
il più
iù usato
t è Vi
Visuall C#
• Visual Studio = ambiente di sviluppo integrato (IDE) di
Microsoft per sviluppare applicazioni Web, mobile e
Windows in ambiente .NET  comprende:
– .NET Framework
– IIS (Web Server)
– SQL Server (DBMS)
• Visual Studio include anche delle librerie client-side (per
inserire script Javascript, AJAX, jQuery, ...)
• Visual Studio Express = versione gratuita per sviluppare
app. Web (scaricabile da www.asp.net, Get Started)
a.a. 2016/17
Tecnologie Web
46
23
Ruby, Python e Perl
Principali tecnologie per costruire applicazioni web:
Client-side
• Javascript
(e jQuery)
Approcci ibridi
• AJAX (jQuery)
Server-side
• PHP
• JSP e Java Servlet
Inoltre:
 ASP.NET
 Ruby, Python e Perl
 (Javascript)
 rispetto
p
alle distinzioni viste pprima,, qqueste soluzioni:
 utilizzano linguaggi di programmazione
 alcune sono tecnologie client-side (il codice è elaborato sul
client, dal browser), altre sono server-side (il codice è
elaborato sul server), altre sono miste
a.a. 2016/17
Tecnologie Web
47
Common Gateway Interface (CGI) - I
Per capire come funzionano Ruby, Python, Perl dobbiamo
introdurre un "vecchio" concetto: gli script CGI 
• CGI = Common Gateway Interface = standard che definisce
la comunicazione tra un Web Server e un programma,
programma che
risiede sul file system del server
• I linguaggi di programmazione più usati sono Perl, Python,
C e C++
• RISORSE:




www.tutorialspoint.com/perl/perl_cgi.htm
openskill.info/infobox.php?ID=538
p
p p
telemat.det.unifi.it/book/Unix/Unix/relaz/cgi.htm
it.wikipedia.org/wiki/Common_Gateway_Interface
a.a. 2016/17
Tecnologie Web
48
24
Common Gateway Interface (CGI) - II
Come funziona un programma (spesso chiamato "script") CGI?
Il Web Server...
1. riceve dal browser (Web Client), tramite URL (es:
p
y
g
yp g
) la richiesta di
http://myserver.it/cgi-bin/myprogram),
(esecuzione di) un programma (myprogram)
2. attraverso l'interfaccia CGI[*], passa al programma gli
eventuali dati (parametri) ricevuti nell'HTTP request
3. sempre attraverso l'interfaccia CGI[*], manda in
esecuzione il programma richiesto, tipicamente invocando
l'opportuno interprete (che interpreta ed esegue il
programma)
4. riceve dal programma dell'elaborazione (sempre tramite
l'interfaccia CGI) il risultato
5. invia al browser (Web Client) il risultato (nel body
dell'HTTP response)
a.a. 2016/17
Tecnologie Web
49
Common Gateway Interface (CGI) - III
nome = maria
eta = 18-25
inserisci
...
HTTP
request
Web
Server
config x CGI
script CGI
HTTP
response
Come ti
chiami? maria
Quanti
da 18 a 25
anni hai?
invia
…
Ciao Maria!
Ho inserito i tuoi dati...
...
CGI
INSERT INTO utenti
VALUES ($nome, $eta)
interprete
programma (es.
Python) inserisci
print("Ciao,"+nome);
...
#inserimento nel DB
#invia ris in
a.a.#HTTPresponse
2016/17
DBMS
(es: MySQL
Server)
Tecnologie Web
DB
50
25
Common Gateway Interface (CGI) - IV
[*] In cosa consiste un'interfaccia CGI?
(1) Configurazione del Web Server (a cui si dicono varie cose, di cui la
più importante è dove  percorso nel file system  si trovano gli
script CGI: generalmente cartella cgi-bin)
(2) Uno script (programma) CGI contiene, tipicamente, istruzioni che
corrispondono a comandi del sistema operativo (per es. l'indicazione
dell'interprete da usare!) e/o istruzioni in un linguaggio di
programmazione (es. Perl, Python, C e C++); per es (Perl):
 il Web Server, quando #!/usr/bin/perl –Tw
"Content-Type:text/html\n\n";
riceve una HTTP request, print
print "<html><head>...</head>";
riconosce che si tratta della ...
richiesta di esecuzione di
uno script CGI se è stato opportunamente configurato e se lo script
è presente nella cartella apposita (generalmente cgi-bin)
 lo script CGI viene eseguito (utilizzando l'interprete di solito
indicato nella prima riga dello script; per es: #!/usr/bin/perl –Tw
a.a. 2016/17
Tecnologie Web
51
Ruby - I
Ruby (www.ruby-lang.org) è linguaggio di
programmazione molto utilizzato sul web, creato in
Giappone all'inizio degli anni '90; Ruby è:
• server-side (cioè eseguito sul server)
• interpretato (da un interprete Ruby)
• Open Source, cioè l'interprete Ruby è distribuito secondo la
filosofia Open Source
• Sul web può essere usato
a) per scrivere programmi invocabili tramite CGI
(www.html.it/pag/17448/cgi
www html it/pag/17448/cgi),
) oppure
b) all'interno delle pagine HTML (con estensione .rhtml)
grazie a embedded Ruby (eRuby/ERb):
www.html.it/pag/17450/embedded-ruby
Una guida: www.techotopia.com/index.php/Ruby_Essentials
a.a. 2016/17
Tecnologie Web
52
26
Ruby - II
a) con CGI
nome = maria
eta = 18-25
inserisci
...
HTTP
request
Web
Server
config x CGI
script CGI
HTTP
response
Come ti
chiami? maria
Quanti
da 18 a 25
anni hai?
invia
…
Ciao Maria!
Ho inserito i tuoi dati...
...
CGI
INSERT INTO utenti
VALUES ($nome, $eta)
interprete Ruby
DBMS
programma Ruby
inserisci
(es: MySQL
Server)
puts "Ciao,"+nome
...
#inserimento nel DB
#invia ris in
a.a.#HTTPresponse
2016/17
DB
Tecnologie Web
53
Ruby – III
b) nelle pagine
HTML
nome = maria
eta = 18-25
ins.rhtml
...
HTTP
request
q
Web
Server
Come ti
chiami? maria
Quanti
da 18 a 25
annii hai?
h i?
invia
…
Ciao Maria!
Ho inserito i tuoi dati...
interprete
Ruby
...
HTTP
response
INSERT INTO utenti
VALUES ($nome, $eta)
<%
nome=params[:nome]
eta=params[:eta]
...
#inserimento nel DB
%>
a.a. 2016/17
DBMS
(es: MySQL
Server)
Tecnologie Web
DB
54
27
Python - I
Python (www.python.org) è linguaggio di programmazione
molto utilizzato sul web:
• è server-side (cioè eseguito sul server)
• utilizza un approccio "misto" (come Java): il codice sorgente
viene compilato in un linguaggio intermedio (bytecode),
specifico di Python, il quale viene poi interpretato ed
eseguito dall'interprete (Virtual Machine)
• la sua implementazione di base (CPython, reference
implementation) è open source ed è gestita dalla Python
Software Foundation (www.python.org/psf
www python org/psf)
• sul web può essere usato per scrivere programmi invocabili
tramite CGI (docs.python.org/2/library/cgi.html)
Una guida: www.erweb.it/pub/tecnologie_python.php
a.a. 2016/17
Tecnologie Web
55
Python - II
• E' uno dei 4 linguaggi utilizzati da Google (insieme a
Javascript, Java e C++), è il principale linguaggio con cui è
implementato YouTube, è usato al CERN e alla NASA, ...
• Nel download di Python (che comprende
nome = maria
compilatore
il
e
= 18-25
HTTP
interprete) è incluso eta
inserisci
request
...
anche un ambiente
Web
di sviluppo (un IDE:
Server
vedi prox slide)
config x CGI
chiamato
HTTP
script CGI
response
IDLE
Come ti
chiami? maria
Quanti
da 18 a 25
anni hai?
invia
…
CGI
Ciao
Maria!
Ciao
Maria!
Ho inserito i tuoi dati...
... …
interprete bytecode Python
programma Python
inserisci
a.a. 2016/17
print("Ciao,"+nome);
...
#inserimento nel DB
#invia ris in
#HTTPresponseTecnologie Web
DBMS
(es: MySQL
Server)
DB
INSERT INTO utenti
VALUES (nome, eta)
56
28
Perl - I
Perl (https://www.perl.org) è linguaggio di
programmazione utilizzato anche sul web (server-side),
creato nel 1987 da Larry Wall; Perl è:
• server-side (cioè eseguito sul server)
• interpretato (da un interprete Perl)
• Open Source, cioè l'interprete Perl è distribuito secondo la
filosofia Open Source
• Sul web può essere usato per scrivere programmi invocabili
tramite CGI (www.tutorialspoint.com/perl/perl_cgi.htm)
U guida:
Una
id www.erweb.it/pub/tecnologie_perl.php
b it/ b/t
l i
l h
a.a. 2016/17
Tecnologie Web
57
Perl - II
nome = maria
eta = 18-25
inserisci
...
HTTP
request
Web
Server
config x CGI
script CGI
HTTP
response
Come ti
chiami? maria
Quanti
da 18 a 25
anni hai?
invia
…
Ciao Maria!
Ho inserito i tuoi dati...
...
CGI
INSERT INTO utenti
VALUES ($nome, $eta)
interprete Perl
programma Perl
inserisci
print "Ciao,"+nome;
...
#inserimento nel DB
#invia ris in
a.a.#HTTPresponse
2016/17
DBMS
(es: MySQL
Server)
Tecnologie Web
DB
58
29
Applicazioni web: strumenti
Principali tipi di strumenti a supporto del lavoro del
programmatore di applicazioni web:
 IDE = Integrated Development Environment
 Framework e librerie
a.a. 2016/17
Tecnologie Web
59
Integrated Development Environments (IDE)
• IDE = Integrated Development Environment = strumento
software che offre diverse funzionalità integrate a supporto
della programmzione
[it.wikipedia.org/wiki/Integrated_development_environment
it.wikipedia.org/wiki/Integrated development environment]
• Tipicamente include:
– un editor per scrivere/modificare il codice sorgente
– compilatori/interpreti e strumenti per la corretta
creazione dell'applicazione finale (es. file di
configurazione, ecc.)
– strumenti per il "debugging"
debugging , cioè per la ricerca e la
correzione degli errori ("bug" = errore nel software)
• Alcuni IDE sono dedicati ad un singolo linguaggio di
programmazione, altri supportano più linguaggi
a.a. 2016/17
Tecnologie Web
60
30
IDE: NetBeans
• NetBeans (https://netbeans.org/) nasce alla Sun Microsystems
ed è ora della Oracle
• NetBeans nasce come IDE per Java, ma è stato poi esteso per
supportare vari altri linguaggi per sviluppare applicazioni
W b tra cuii Javascript,
Web,
J
i PHP
a.a. 2016/17
Tecnologie Web
61
IDE: Eclipse
• Eclipse (www.eclipse.org) è un IDE open source, multilinguaggio, molto utilizzato per sviluppare applicazioni (Web)
Java
• Può essere esteso per supportare diversi linguaggi (per es. PHP,
P ht Ruby,
Pyhton,
R b Javascript)
J
i t) e tipi
ti i di applicazioni
li i i (es.
( applicazioni
li i i
per smartphone) con l'aggiunta di opportuni plug-in
a.a. 2016/17
Tecnologie Web
62
31
Software frameworks - I
• Software framework (o semplicemente framework) =
o ambiente software, generalmente un insieme di
librerie[*]
o che offre dei template (("modelli")
modelli ) astratti di codice che
implementano funzionalità generiche e che possono
essere modificati dal programmatore aggiungendo codice
specifico, così da implementare funzionalità specifiche
o generalmente un framework comprende anche
compilatori/interpreti
• Web Application Framework (WAF) = software
framework per lo svuiluppo di applicazioni Web
Generalmente un WAF comprende librerie per l'accesso a
database, la gestione delle sessioni, ecc.
[it.wikipedia.org/wiki/Framework]
a.a. 2016/17
Tecnologie Web
63
Software frameworks - II
[*] libreria = insieme di funzioni (o strutture dati) predefinite,
utilizzabili all'interno di un programma; lo sviluppo di librerie ha
lo scopo di fornire al programmatore funzionalità "già pronte",
evitandogli
Es: in NetBeans...
di dover
riscrivere
ogni volta
le stesse
funzioni
(es. accesso
a database,
manipola
manipolaz.
di dati in
formati
particolari,
ecc.)
a.a. 2016/17
Tecnologie Web
64
32
Software frameworks - III
• Una delle principali caratteristiche dei framework è che
generalmente offrono la possibilità di sviluppare
applicazioni multi-piattaforma (o cross-platform): il
codice sorgente viene scritto una sola volta e poi distribuito
su più piattaforme  il framework si occuperà di
ricompilare il codice in modo che si adatti automaticamente
a sistemi operativi diversi
Questo aspetto è molto importante per lo sviluppo di
applicazioni per mobile (come vedremo...)
• Come scegliere un framework: iquii.com/2014/03/07/comescegliere-il-framework-giusto-per-sviluppare-le-applicazioni-webe-mobile/
a.a. 2016/17
Tecnologie Web
65
Software frameworks - IV
Frameworks (WAF) per PHP
• Esistono molti framework per PHP
• Uno dei più famosi è Zend Framework (framework.zend.com)
• Un articolo comparativo:
p
www.html.it/articoli/framework-php-una-comparazione-1/
• Vedi anche: www.phpframeworks.com
Frameworks (WAF) per Python
• Esistono diversi framework per Python
• Il più famoso è Django (www.djangoproject.com/)
• Un elenco: https://wiki.python.org/moin/WebFrameworks
p
py
g
Frameworks (WAF) per Ruby
• Esistono diversi framework per Ruby
• Il più famoso è sicuramete Ruby on Rails, o Rails
(rubyonrails.org)
a.a. 2016/17
Tecnologie Web
66
33
Tecnologie Web: come scegliere?
Ma come si fa a scegliere quale tecnologia usare?!?
Generalmente si tiene conto di diversi fattori... per es:
– tipo di applicazione da sviluppare (semplice/complessa, multimediale,
con molti dati, con molti utenti, molto interattiva, ...)
– competenze dei programmatori coinvolti (la tecnolgia è già
conosciuta? quanto è facile da apprendere? )
– Sistema Operativo e Web Server (quale S.O./Web Server ho ha
disposizione? quali tecnologie sono supportate?)
– documentazione disponibile
– supporto (comunità di sviluppatori o supporto del produttore)
– librerie, moduli e template (esistono librerie e moduli per realizzare
u o a tà particolari
pa t co a – es. archivi,
a c v , photogallery,
p otoga e y, ...?
funzionalità
– popolarità
– costo (è free o a pagamento? che tipo di licenze offre?)
Un articolo (www.redchar.net/?x=entry:entry120709-002739) e un esempio di
discussione sul tema (www2.mokabyte.it/cms/article.run?articleId=VHB-FQD2BD-2HH_7f000001_18359738_5ed22ebf)
a.a. 2016/17
Tecnologie Web
67
Suggerimenti bibliografici
• Innanzi tutto i link segnalati nelle slide !!!
•
V. Roberto, M. Frailis, A. Gugliotta, P. Omero, Introduzione
alle Tecnologie Web, McGraw-Hill, 2005 [NB: fate
"attenzione" perché è un po' vecchiotto...!]
Frammenti suggeriti:
– Cap. 5 (La programmazione nel web): sez. da 5.1 a 5.5 + da 5.8 a 5.10
•
V. Della Mea, L. Di Gaspero, I. Scagnetto, Programmazione
Web Lato Server (seconda edizione aggiornata), Apogeo, 2011
Disponibile e-book (PDF) nella collana Apogeo Spicchi: è
possibile acquistare singoli capitoli
[www.apogeonline.com/libri/9788850314799/scheda]
F
Frammenti
ti suggeriti:
iti
–
–
–
–
–
Cap. 2 (siti web dinamici): sez. 2.3 e 2.4
Cap. 3 (Il linguaggio di scripting PHP): sez. 3.1 e 3.2
Cap. 4 (JSP: Java Server Pages): sez. 4.1 e 4.2
Cap. 5 (Java Enterprise Edition): sez. 5.1 e 5.2 (solo intro + 5.2.1 e 5.2.2)
Appendice A (basi di dati): sez. A.1 e A.2
a.a. 2016/17
Tecnologie Web
68
34