Tecnologie server-side - I

(1)

Principali tecnologie per costruire applicazioni web:

Tecnologie server-side - I

Client-side

• Javascript

Server-side

• PHP

 rispetto alle distinzioni viste prima, queste soluzioni:

• Javascript (e jQuery)

PHP

• Java Servlet e JSP Inoltre:

 ASP.NET

 Ruby, Python e Perl

 (Javascript) Approcci ibridi

• AJAX (jQuery)

a.a. 2018/19 Tecnologie Web 1

p p , q

 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

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 i dati di registrazione 2. inserire dati in un database (per 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

(2)

Tecnologie server-side - III

HTTP request W b

nome = maria eta = 18-25 insert.php ...

Come ti chiami?

Quanti

anni hai? ^{da 18 a 25} maria

[1]

server-side

client-side

Web Server

"supporto"

(x es. interprete PHP)

HTTP response

Ciao Maria!

Ho inserito i tuoi dati...

...

… ^invia

INSERT INTO t ti

DBMS

(es: MySQL

Server) DB

<?php

$nome=$_POST["nome"];

$eta=$_POST["eta"];

...

//inserimento nel DB

?>

INSERT INTO utenti VALUES ($nome, $eta)

[2]

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'HTTP [1]

Inviare dati al Web Server - I

Il client invia i dati al Web Server inserendoli nell HTTP request

Esistono due modi per codificare i dati nell'HTTP request:

• metodo GET

• metodo POST

 vediamo:

La conoscenza di HTML (e quindi dei form) è un prerequisito; qui vediamo gli aspetti che legano i form alle 1. moduli online (form)

2. link con parametri

3. contenuto di HTTP request

4. differenza tra i metodi GET e POST

aspetti che legano i form alle tecnologie server-side...

(3)

Moduli online (form)

[www.html.it/guide/guida-html/, lez. 64-71]

In HTML

[1]

Inviare dati al Web Server - II

In HTML...

<FORM METHOD="POST"

ACTION="identif.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 METHODdel tag <FORM...>) c. azione (attributo ACTIONdel tag <FORM...>)

a. campi di input = elementi attraverso cui l'utente fornisce dei dati, per es:

[1]

Inviare dati al Web Server - III

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: POSTo GET)

c. azione = 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)

(4)

[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:

• l'indicazione della risorsa server-side (script ol indicazione della risorsa server side (script o programma) che "gestirà" i dati, ricavata dall'attributo

ACTION, per es: ACTION="identif.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

dati: <login, admin>

All'interno di HTTP request i dati (parametri) possono essere codificati in due modi, a seconda dell'indicazione contenuta nell'attributo METHODdel tag <FORM...>...

g

<pwd, pippo>

[1]

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

browser)  Per es:

• metodo POST (invio di dati al server + indicazione della risorsa che li deve elaborare): i dati (parametri), cioè le coppie <nome,

HTTP header

risorsa = identif.php?login=admin&pwd=pippo ...

HTTP body ...

) (p ) pp

valore>, sono scritti all'interno del corpo (body) di HTTP request

 non saranno quindi visibili nella barra degli indirizzi del browser  Per es:

HTTP header

risorsa = identif.php ...

HTTP body

dati: <login, admin>

<pwd, pippo>

...

(5)

[1]

Inviare dati al Web Server - VI

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:

NB l'indicazione della HTTP header

risorsa = param php?risposta=kit

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!

risorsa param.php ?risposta kit ...

HTTP body ...

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 [1]

Inviare dati al Web Server - VII

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">

(6)

[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 oggetti, ...gg ,

• 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

livello concettuale livello logico

livello fisico

Una conoscenza di base dei database e dei DBMS è un prerequisito; qui facciamo un rapidissimo e non esaustivo ripasso...

[2]

Salvare i dati in un database - II

Livello logico: rappresentazione tabellare dei dati Esempio:

Tabella:LIBRI

colonna/campo (rappresenta un attributo, x es. il titolo)

NumInv Autore Titolo Anno_ed Editore

riga/record (rappresenta un "oggetto", x es. un libro)

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

(7)

[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 tabelle, ecc.)

• modifiche dei permessi

User Interface

di accesso

database

<?

$c=mysql_connect("localhost“,"root","");

mysql_select_db("bacheca");

$sql="SELECT * FROM ut WHERE co='Rossi'";

$ris = mysql_query($sql) ...

?>

Script/programma (server-side)

[2]

Salvare 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 Querycostituisce 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'

(8)

[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 casa_ed 123 All d E L F lt i lli

• 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

123 456 789

Allende Benni Voltolini

Eva Luna Terra 10

Feltrinelli Feltrinelli Feltrinelli

di successo o errore (tipicamente rispettivamente true e false)

[2]

Salvare 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...

(9)

PHP - I

Client-side

• Javascript

Server-side

• PHP

PHP

 ASP.NET

• AJAX (jQuery)

p p , q

Es: http://www.di.unito.it/goy/dida.php PHP[php.net]è:

PHP - II

• 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[*]

(10)

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-side

PHP - III

Codice PHP programma (script) server side Esempio:

<H1> PHP: esempio </H1>

<?php

$id = $_POST["login"];

$pwd = $_POST["password"];

if ($id == "admin" && $pwd == "pippo") { echo "<P>Benvenuto amministratore!</P>";}

programmma (script) PHP:

interpretato d ll'i t t HTML: interpretato dal browser [h]

[p]

echo P Benvenuto amministratore! /P ;}

else {

echo "<P>Buongiorno ".$id."</P>";}

?>

<P>

Questa è una pagina web dinamica

</P>

dall'interprete PHP, sul server

HTML: interpretato dal browser

[h]

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 nell'URL, che la risorsa richiesta è una pagina PHP (dida.php)

PHP - IV

p g ( p p)

 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: dida.php?login=admin&pwd=pippo,

t ti l b d )

oppure contenuti nel body); 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'");

(11)

• L'esecuzione dello script PHP produce un risultato, tipicamente del testo o del codice HTML, che viene inserito nella pagina al posto dello script

• La pagina risultante, composta dall'HTML originario [h]+ il

PHP - V

p g p g

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 d <? $ ?> i <? 6*7 ?>

Universe and <?= $p ?> is <?= 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

shortcut per dire: scrivi il risultato di 6*7

PHP - VI

nome = maria eta = 18-25 dida.php ...

Come ti chiami?

Quanti

server-side

client-side

Web Server

interprete PHP

HTTP response

Ciao Maria!

...

… ^invia

DBMS

(es: MySQL

Server) DB

<?php

$nome=$_POST["nome"];

$eta=$_POST["eta"];

...

//inserimento nel DB

?>

(12)

Tipicamente:

PHP - VII

sistema operativo

web server DBMS interprete script server-side

Linux Apache MySQL/MariaDB PHP

L. A. M. P.

Linux (www.linuxfoundation.org) Apache (www.apache.org) MySQL (www.mysql.com)

opp Maria DB (mariadb.org) PHP (www.php.net)

p y Q

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.

XAMPP= pacchetto multi-piattaforma (X= qualunque S.O.) contenente Apache, MySQL/MariaDB, PHP e Perl

[www.apachefriends.org]

PHP - VIII

(13)

[2]

Salvare i dati in un database - VII

Esempio di interazione con un DB attraverso uno script PHP:

<ul>

<?php DBMS DB

host (su cui gira il DBMS, che è un... server!)

?p p

$db = new PDO("mysql:dbname=myMovies;host=localhost",

"anna", "annaPwd");

$rows = $db->query("SELECT * FROM movies WHERE year = 2015);

foreach ($rows as $row) 

?>

<li><?= $rows["name"] ?> stelle: <?= $rows["stars"] ?></li>

<?php

username password

<?php



?>

</ul>

Breve parentesi sull'open source

[www.opensource.org]

Open Source Initiative (OSI) = associazione no-profit che ha l'obiettivo di gestire e promuovere la produzione di

[*]

Digressione: Open Source - I

ha l obiettivo di gestire e promuovere la produzione di software open source

Il software open source (o software libero) deve rispettare una serie di criteri:

• 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)

(14)

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 La gente lo migliora

[*]

Digressione: Open Source - II

programma, quel software si evolve. La gente lo 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

hi i i i h l di

pochissimi programmatori hanno accesso al codice sorgente e tutti gli altri devono avere a che fare con un imperscrutabile e oscuro blocco di bit.

[da www.opensource.org]

Java Servlet e JSP

Client-side

• Javascript

Server-side

• PHP

PHP

 ASP.NET

• AJAX (jQuery)

p p , q

(15)

Java[www.java.com]è:

• un linguaggio di programmazione "ad alto livello" (orientato agli oggetti)

• per la traduzione dei sorgenti in linguaggio macchina utilizza un

Premessa su Java

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)

Java Servlet - I

Es: http://www.di.unito.it/goy/didaManager

Le Java Servlet (www.oracle.com/technetwork/java/index-jsp- 135475.html) sono dei programmi Java pensati per la programmazione web sever-side 

p g

• li si invoca tramite un URL (= "richiesta di esecuzione"), per es: http://www.di.unito.it/goy/didaManager

• sono in grado di manipolare HTTP request e HTTP response); in particolare:

 il Web Server passa alla Servlet la HTTP request proveniente dal client (browser) e contenente i dati

l S l l il

 la Servlet ne legge il contenuto

 quando la Servlet ha elaborato il risultato (per es. un frammento di codice HTML), lo inserisce nell'HTTP response che verrà inviata al client (browser) dal Web Server

(16)

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("par");

Java Servlet - II

String param = request.getParameter( 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);

} } }

Cosa succede quando il browser invia una HTTP request al server basata su un URL del tipo: http://www.di.unito.it/didaManager?

1) sul server devono essere installate due cose:

 un Servlet Container(o Web Container o Servlet Engine)che:

Java Servlet - III

 "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 (Servlet), 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 (didaManager.class)

(17)

• 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 programma (la Servlet) corrispondente (es: didaManager.class) e

Java Servlet - IV

p g ( ) p ( g )

chiede all'interprete Java (JVM/JRE) di interpretarlo (ed eseguirlo)

• come nel caso di PHP, tipicamente, alcune istruzioni gli diranno di:

– leggere i dati (parametri) contenuti nell'HTTP request (accodati all'URL: didaManager?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");

• l'esecuzione della Java Servlet produce un risultato, tipicamente del testo o del codice HTML, che viene inserito nel body

dell'HTTP response:

response.setContentType("text/html;charset=UTF-8");

try (PrintWriter resp = response getWriter()) {

Java Servlet - V

...

resp.print(geoMgrResponse);

• l'HTTP response viene passata dal Servlet Container al Web Server ed inviata al browser

(18)

Java Servlet - VI

nome = maria eta = 18-25 didaManager ...

Come ti chiami?

Quanti

server-side

client-side

Web Server

Servlet Container

HTTP response

Ciao Maria!

...

… ^invia

interprete bytecode Java

(JVM/JRE)

SERVLET didaManager (bytecode)

pa fqr

llc  ...

DBMS

(es: MySQL

Server) DB

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

Java Servlet - VII

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

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

(19)

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)

JSP - I

– Codice HTML (+ eventualmente Javascript client-side)

– Codice Java, oppure tag JSTL (JSP Standard Tag Library

= libreria di tag che corrispondono ad istruzioni Java) Esempio:

<H1> PHP: esempio </H1>

<%

connection = DriverManager.getConnection(cStr);

Statement stm = connection createStatement();

istruzioni Java:

compilate HTML (interpretato dal browser) [h]

[p]

ResultSet rs = stm.executeQuery("SELECT * FROM products WHERE price > 100");

%>

<P>

</P>

compilate, interpretate ed eseguite sul server HTML (interpretato

dal browser) [h]

Oppure...

<H1> JSP: esempio </H1>

<sql:setDataSource driver="com.mysql.jdbc.Driver"

url="jdbc:mysql://localhost/database_name"

var="localSource" user="database_user" ... />

l d t S "${l lS }"

JSP - II

JSTL tags:

tradotti (sul server) in HTML: interpretato dal browser [h]

[p]

<sql:query dataSource="${localSource}"

sql="SELECT * FROM products WHERE price > 100"

var="result" />

<P>

</P>

NB: i tag JSTL sembrano tag di un linguaggio di mark-up... ma lo sono solo in apparenza! Vengono infatti tradotti in

se ve ) istruzioni Java HTML: interpretato dal browser

[h]

lo sono solo in apparenza! Vengono infatti tradotti in istruzioni Java (quindi in istruzioni di un linguaggio di programmazione)

(20)

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 nell'URL, che la risorsa richiesta è una JSP (dida.jsp)

i l' l S C i !

JSP - III

 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")

– il JSP Engine trasforma la pagina (HTML + JSTL tags/

i i i J ) i J S l (NB i

istruzioni Java) in una Java Servlet (NB in un sorgente, scritto in Java! es: didaServlet.java); in particolare:

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>  PrintWriter pw;

pw = httpResponse.getWriter();

pw.print("<H1>JSP: esempio</H1>");

o se la JSP contiene direttamente codice Java, lo include nella

JSP - IV

Servlet

o se la JSP contiene tag JSTL, li traduce in istruzioni Java e le include nella Servlet

o compila la Servlet, invocando il compilatore Javae producendo la versione in bytecode della Servlet

o invoca l'interprete Java (JVM/JRE), che interpreta ed esegue la Servlet

• se invece la Servlet (compilata: didaServlet.class) è 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

(21)

Così il caso è stato ricondotto a quello di una "normale" 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:

dida jsp?login=admin&pwd=pippo oppure contenuti nel body); per es:

JSP - V

dida.jsp?login admin&pwd pippo, oppure contenuti nel body); per es:

request.getParameter("par");

– connettersi ad un database (per leggere o scrivere dati); per es:

ResultSet rs = stm.executeQuery("SELECT * from libri");

• 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");

response.setContentType( text/html;charset=UTF 8 );

...

resp.print(geoMgrResponse);

• l'HTTP response viene passata dal Servlet Container al Web Server ed inviata al browser

JSP - VI

HTTP request Web

nome = maria eta = 18-25 dida.jsp

... Come ti

chiami?

Quanti

invia

server-side

client-side

Web Server

JSP Engine Servlet Container

HTTP response

Ciao Maria!

...

… ^invia

interprete bytecode Java

(JVM/JRE)

JSP Engine

solo la prima volta

INSERT INTO utenti VALUES ($ $ t )

SERVLET generata auto- maticamente

print(nome);

...

//inserimento nel DB

SERVLET compilata (bytecode)

pa fqr

llc  ...

DBMS

(es: MySQL

Server) DB

VALUES ($nome, $eta)

(22)

 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)

JSP - VII

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)

ASP.NET - I

Client-side

• Javascript

Server-side

• PHP

PHP

 ASP.NET

• AJAX (jQuery)

p p , q

(23)

• 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 i il iù t è Vi l C#

ASP.NET - II

di programmazione: il più usato è Visual 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)

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)

Ruby, Python e Perl

Client-side

• Javascript

Server-side

• PHP

PHP

 ASP.NET

• AJAX (jQuery)

p p , q

(24)

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 che la comunicazione tra un Web Server e un 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

 it.wikipedia.org/wiki/Common_Gateway_Interface

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:

http://myserver.it/cgi-bin/myprogram), la richiesta di p y g yp g ) (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 (sempre tramite l'interfaccia CGI) il risultato

5. invia al browser (Web Client) il risultato (nel body dell'HTTP response)

(25)

Common Gateway Interface (CGI) - III

HTTP request

nome = maria eta = 18-25 inserisci

... Come ti

chiami?

Quanti

server-side

client-side

Web Server

HTTP response

Ciao Maria!

...

anni hai?

… ^invia

CGI

interprete

config x CGI script CGI

server side

DBMS

(es: MySQL

Server) DB

programma (es.

Python) inserisci

print("Ciao,"+nome);

...

#inserimento nel DB

p

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 riceve una HTTP request, riconosce che si tratta della

#!/usr/bin/perl –Tw

print "Content-Type:text/html\n\n";

print "<html><head>...</head>";

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)

...

(26)

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 pp ( ) g (myProgram.py) viene compilato (myProgram.pyc) 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)

Software Foundation (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.html.it/guide/guida-python/?cref=development

Un riferimento: www.html.it/pag/15626/python-e-cgi/

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

P h ( h ⁱ ^{Come ti}

Python (che comprende compilatore e interprete) è incluso anche un

ambiente di sviluppo

HTTP request Web

Server

HTTP response

chiami?

Quanti

… ^invia

nome = maria eta = 18-25 inserisci ...

Ciao Maria!

… Ciao Maria!

CGI ...

il i

config x CGI

script CGI

(un IDE:

vedi prox slide) chiamato IDLE

DBMS

(es: MySQL

Server) DB

INSERT INTO utenti VALUES (nome, eta) programma Python

inserisci

print("Ciao,"+nome);

...

#invia ris in

compilatore + interprete Python

(27)

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 id ht l it/ id / id l/? f d l t

Una guida: www.html.it/guide/guida-perl/?cref=development

Perl - II

HTTP request

... Come ti

chiami?

Quanti

Web Server

HTTP response

Ciao Maria!

...

anni hai?

… ^invia

INSERT INTO utenti config x CGI

CGI

interprete Perl script CGI

DBMS

(es: MySQL

Server) DB

programma Perl inserisci

print "Ciao,"+nome;

...

#invia ris in

#HTTPresponse

interprete Perl

(28)

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) oppure

(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

Ruby - II

HTTP request

... Come ti

chiami?

Quanti

a) con CGI

Web Server

HTTP response

Ciao Maria!

...

anni hai?

… ^invia

INSERT INTO utenti

CGI

interprete Ruby

config x CGI script CGI

DBMS

(es: MySQL

Server) DB

programma Ruby inserisci

puts "Ciao,"+nome ...

#invia ris in

interprete Ruby

(29)

Ruby – III

HTTP request

nome = maria eta = 18-25 ins.rhtml

... Come ti

chiami?

Quanti

i h i? ^{da 18 a 25} maria

b) nelle pagine HTML

q Web

Server

interprete Ruby

HTTP response

Ciao Maria!

...

anni hai?

… ^invia

INSERT INTO utenti

DBMS

(es: MySQL

Server) DB

<%

nome=params[:nome]

eta=params[:eta]

...

#inserimento nel DB

%>

Ma tipicamente, per utilizzare questi linguaggi si usano degli strumenti che semplificano il lavoro del programmatore di applicazioni web  Principali tipi di strumenti (anche se non sempre le differenze sono nette...)

Applicazioni web: strumenti

sempre le differenze sono nette...)

 IDE = Integrated Development Environment

 Framework

 librerie

(30)

Integrated Development Environments (IDE)

• IDE = Integrated Development Environment = software che offre diverse funzionalità integrate

[it.wikipedia.org/wiki/Integrated_development_environment]

Ti i t i l d

• 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", cioè per la ricerca e la

correzione degli errori ("bug" = errore nel software) W b S

– un Web Server – un Servlet Container

• Alcuni IDE sono dedicati ad un singolo linguaggio di programmazione, altri supportano più linguaggi

IDE: esempi - I

• 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 i J i PHP

Web, tra cui Javascript, PHP

(31)

IDE: esempi - II

• Eclipse (www.eclipse.org) è un IDE open source, multi-

linguaggio, molto utilizzato per sviluppare applicazioni (Web) Java

• Può essere esteso per supportare diversi linguaggi (per es. PHP,

P ht R b J i t) ti i di li i i ( li i i

Pyhton, Ruby, Javascript) e tipi di applicazioni (es. applicazioni per smartphone) con l'aggiunta di opportuni plug-in

IDE: esempi - III

• IntelliJ IDEA (www.jetbrains.com/idea/) è un IDE per sviluppare applicazioni (Web) Java, disponibile sia con licenza open source sia commerciale

(32)

Framework - I

• Framework =

o ambiente software, generalmente un insieme di librerie[*]

o che offre dei template ("modelli") astratti di codice che

o che offre dei template ( 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 Server, ...

o tipicamente (a differenza degli IDE) i framework sono

language-specific

[it.wikipedia.org/wiki/Framework]

Librerie - I

[*] 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

di dover Es: in NetBeans...

di dover riscrivere ogni volta le stesse funzioni (es. accesso a database, manipola

manipolaz.

di dati in formati particolari, ecc.)

(33)

Framework - II

• 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 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/come-

scegliere-il-framework-giusto-per-sviluppare-le-applicazioni-web- e-mobile/

Framework: esempi

Qualche esempio di framework per...

PHP

• Uno dei più famosi è Zend Framework (framework.zend.com)

• Un articolo comparativo:

www.html.it/articoli/framework-php-una-comparazione-1/

• Vedi anche: www.phpframeworks.com

Java

• Uno dei più "di moda" è Spring (spring.io) Python

U d i iù f i è Dj ( dj j t /)

• Uno dei più famosi è Django (www.djangoproject.com/)

• Un elenco: https://wiki.python.org/moin/WebFrameworks

Ruby

• Il più famoso è Ruby on Rails, o Rails (rubyonrails.org)

(34)

Framework per Javascript: esempi

Qualche esempio di framework per Javascript/jQuery (+ HTML, CSS)

AngularJS (g (angularjs.orgg j g)  Angular2 () g (angular.iog ))

• framework open source sviluppato da Google e dalla comunità di sviluppatori

Bootstrap (getbootstrap.com)

• framework open sourc, "mobile-first"

React (reactjs.org)

• A JavaScript library for building user interfaces

65 bis

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à – 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

funzionalità particolari – es. archivi, photogallery, ...?

u o a tà pa t co a es. a c v , p otoga e y, ...?

– 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- FQD-2BD-2HH_7f000001_18359738_5ed22ebf)