Laboratorio di Informatica 3 Anno Accademico 2019-2020

(1)

Laboratorio di Informatica 3

Anno Accademico 2019-2020

Luigi Catuogno

[lcatuogno@unisa.it]

Il World Wide Web

Introduzione

1

(2)

L’architettura del World Wide Web

Parte 3

Il World Wide Web

Libri di testo consigliati:

Donatella Sciuto, Giacomo Buonanno, Luca Mari

Introduzione ai sistemi informatici

McGraw-Hill Italia. (2016)

ISBN 978-88-386-9216-1

Capitoli consigliati:

Cap. 9: «Le applicazioni»

Cap. 9.5 «Le tecnologie per il World Wide Web»

(3)

Il web server

Web server

• Immagazzina le pagine e le altre risorse costituenti i siti web che ospita;

• Resta indefinitamente in ascolto sulla rete in attesa di ricevere query

(richieste) HTTP dai browser e risponde:

• inviando copia dei file richiesti, così come immagazzinati sul file system;

• inviando una pagina dinamica (generata al momento) con i risultati dell’elaborazione

di dati, in base all’input inviato dal browser;

• inviando informazioni di stato (errori, etc.)

• Permette di effettuare il controllo di accesso (in tutto o in parte) ai siti che

ospita;

• Log e informazioni statistiche;

(4)

Ma anche…

• Supporto allo sviluppo di applicazioni;

• Interfaccia a dispositivi di rete;

• …

Web server

www.nasa.gov

Immagazzina, sui suoi dischi, le pagine e le altre risorse

costituenti i siti web che ospita

gallery nasaTV mission

mission

gallery

nasaTV

7

(5)

Un server web è un software, in esecuzione

su un computer connesso sulla rete

Internet, che esegue indefinitamente un’

attività ciclica:

Ascolto Accetta Query Esegue richiesta Invia Response Pagine e dati

Un sito web è un insieme di documenti, file

e risorse: immagazzinato su un server web,

riconducibile a un unico soggetto (un tema,

un proprietario…) e associato a un «nome»

Web server

vs.

Web site

www.nasa.gov

Web server

Un server web è un software, in esecuzione

su un computer connesso sulla rete

Internet, che esegue indefinitamente un’

attività ciclica:

Un sito web è un insieme di documenti, file

e risorse: immagazzinato su un server web,

riconducibile a un unico soggetto (un tema,

un proprietario…) e associato a un «nome»

Web server

vs.

Web site

www.nasa.gov

Risponde alle chiamate a:

www.nasa.gov

Per comporre le risposte, attinge alle risorse

appartenenti al sito www.nasa.gov

9

(6)

Un server web è un software, in esecuzione

su un computer connesso sulla rete

Internet, che esegue indefinitamente un’

attività ciclica:

Un sito web è un insieme di documenti, file

e risorse: immagazzinato su un server web,

riconducibile a un unico soggetto (un tema,

un proprietario…) e associato a un «nome»

Web server

vs.

Web site

www.nasa.gov

Risponde alle chiamate a:

www.nasa.gov

www.noaa.gov

Per comporre le risposte,

attinge alle risorse

appartenenti al sito per il quale ha ricevuto la richiesta.

www.noaa.gov

Web server

Un server web è un software, in esecuzione

su un computer connesso sulla rete

Internet, che esegue indefinitamente un’

attività ciclica:

Un sito web è un insieme di documenti, file

e risorse: immagazzinato su un server web,

riconducibile a un unico soggetto (un tema,

un proprietario…) e associato a un «nome»

Web server

vs.

Web site

www.nasa.gov

Risponde alle chiamate a:

www.nasa.gov

www.noaa.gov

Per comporre le risposte,

attinge alle risorse

appartenenti al sito per il quale ha ricevuto la richiesta.

www.noaa.gov

Il servizio offerto da un

provider che ospita più siti

web sui suoi server è detto

«hosting»

I siti ospitati sono detti «virtual host»

(7)

Resta in ascolto sulla rete in attesa di query HTTP dai browser e risponde inviando

una copia dei file richiesti, così come immagazzinati sul file system

Connessione a una rete TCP/IP

Implementazione del protocollo HTTP

• Le pagine che vengono inviate senza essere modificate in base all’identità del richiedente, al

contenuto della sua query, alle query inviate in precedenza dallo stesso browser, sono dette

statiche.

• Se la pagina contiene riferimenti a componenti non testuali (e.g. immagini), il browser,

interpretando il suo codice HTML, effettua una query HTTP per ottenere ciascuno di essi;

Web server

Browser

Server: www.rossi.it

Server: www.nasa.gov

Server: www.royal.uk

Server: www.acme.com

Server: www.imdb.com

Server: www.nationalgeographic.com Server: www.mit.edu Server: www.noaa.gov Server: www.treccani.it

http://www.rossi.it/contatti/serv_clienti.html

13

(8)

Browser

GET /contatti/serv_clienti.html

File system

home risorse eventi contatti index.html serv_clienti.html logo.jpg

Server: www.rossi.it

1Il browser: interpreta l’URL ricevuto;

ne estrae il nome del web server; vi si collega tramite una connessione TCP/IP

e inizia una comunicazione HTTP

inoltrando la richiesta (GET) di una pagina html.

Web server

Browser

File system

home risorse eventi contatti logo.jpg index.html serv_clienti.html

Server: www.rossi.it

2a Il server: interpreta la query

ricevuta; ne estrae il pathname della risorsa richiesta e la localizza nel suo file system;

(9)

Browser

File system

home risorse eventi contatti 200 OK Content-type: text/html Content-length: 3410 … logo.jpg index.html serv_clienti.html <html> <img a src=``logo.jpg’’> … <a href=``http://www.acme.com’’>Acme</a> </html>

Server: www.rossi.it

2bIl server: compone la response HTTP

con: le informazioni di stato (esito della richiesta); i metadati del file (e.g., tipo, dimensioni…); i meta-dati associati al file e infine il contenuto del file stesso.

Web server

Browser

File system

home risorse eventi contatti 200 OK Content-type: text/html Content-length: 3410 … <html> <img a src=``logo.jpg’’> … <a href=``http://www.acme.com’’>Acme</a> </html> logo.jpg index.html serv_clienti.html Servizio clienti

Resp. Franco Rossi Via M. Bianchi, 99 frossi@rossi.it

Acme

Server: www.rossi.it

3a Il browser: interpreta la response

HTTP; ne estrae i metadati e il contenuto; in base al Content-type procede a interpretare il contenuto ricevuto e lo visualizza;

(10)

Browser

File system

Acme

Server: www.rossi.it

3bIl browser: trattandosi di un file

HTML, il browser ne interpreta le istruzioni di visualizzazione; estrae i riferimenti alle sue componenti non testuali e…

Web server

Browser

File system

Acme

Server: www.rossi.it

3bIl browser: trattandosi di un file

HTML, il browser ne interpreta le istruzioni di visualizzazione; estrae i riferimenti alle sue componenti non testuali e…

<img a src=``logo.jpg’’>

Questo è un URL relativo. Tutte le componenti che non sono indicate, si assumono uguali a quelle utilizzate in precedenza:

http://www.rossi.it/contatti/logo.jpg

19

(11)

Browser

GET /contatti/logo.jpg

File system

home risorse eventi contatti index.html serv_clienti.html logo.jpg Servizio clienti

Acme

Server: www.rossi.it

3cIl browser: compone le query HTTP

necessarie a reperire ciascuna

componente ed effettua una nuova connessione del tutto analoga alla precedente.

Web server

Browser

File system

home risorse eventi contatti index.html serv_clienti.html logo.jpg Servizio clienti

Acme

Server: www.rossi.it

ricevuta; ne estrae il pathname della risorsa richiesta e la localizza nel suo file system;

(12)

Browser

File system

home risorse eventi contatti index.html serv_clienti.html logo.jpg 0A05F36267AC00D0AB080285C0B821 8027BB0223276B04F029025619B8A0 00A0D750649… 200 OK Content-type: image/jpeg Content-length: 25470 … Servizio clienti

Acme

Server: www.rossi.it

4bIl server: compone la response HTTP

con: le informazioni di stato (esito della richiesta); i metadati del file (e.g., tipo, dimensioni…); i meta-dati associati al file e infine il contenuto del file stesso.

Web server

Browser

Server: www.rossi.it

File system

home risorse eventi contatti index.html serv_clienti.html logo.jpg 0A05F36267AC00D0AB080285C0B821 8027BB0223276B04F029025619B8A0 00A0D750649… 200 OK Content-type: image/jpeg Content-length: 25470 … Servizio clienti

Acme

5Il browser: trattandosi di un file JPG,

ne dispone la visualizzazione nello

spazio e nei modi indicati dalle

istruzioni HTML della pagina di cui fa parte.

(13)

Browser

Servizio clienti

Resp. Franco Rossi Via M. Bianchi, 99 frossi@rossi.it Acme

Server: www.rossi.it

<html> <img a src=``logo.jpg’’> … <a href=``http://www.acme.com’’>Acme</a> </html>

6 L’attivazione di un link da parte

dell’utente, chiede al browser di

effettuare una nuova connessione HTTP all’URL indicata. Il ciclo ricomincia…

Server: www.acme.com

Server: www.nationalgeographic.com Server: www.mit.edu

Web server

Resta in ascolto sulla rete in attesa di query HTTP dai browser e risponde inviando

una pagina dinamica;

Connessione a una rete TCP/IP

Implementazione del protocollo HTTP

Accesso ed elaborazione di dati «terzi»

• Una pagina dinamica non è immagazzinata sul file system del server, essa è generata

automaticamente dal server e riempita con i contenuti prodotti dall’elaborazione di dati:

• forniti dal browser stessa, via HTTP;

• resi disponibili al server da una fonte di dati terza, non «consultabile» via WEB;

• Nell’elaborazione, Il server è coadiuvato da software esterni o da procedure sviluppate per

mezzo di sue estensioni «programmabili»;

(14)

Alcune

pagine

web

forniscono l’interfaccia a

«basi di dati» (data base)

nelle quali possono essere

effettuate

operazioni

di

ricerca,

aggregazione

ordinamento, etc.

Tali

operazioni

possono

essere effettuate secondo

criteri arbitrari che l’utente

deve fornire di volta in

volta.

Web server

Alcune

pagine

web

forniscono l’interfaccia a

«basi di dati» (data base)

nelle quali possono essere

effettuate

operazioni

di

ricerca,

aggregazione

ordinamento, etc.

Tali

operazioni

possono

essere effettuate secondo

criteri arbitrari che l’utente

deve fornire di volta in

volta.

Solitamente tale input

è

inserito con le «form».

27

(15)

Il browser può chiedere all’utente l’immissione dei dati in input

mediante un elemento delle pagine HTML detto form (prospetto).

Questo è generalmente contenuto in una pagina statica.

Una form ha associati:

• un nome

• un metodo

GET o POST

• un’azione

l’URL del software che riceverà l’input

• una serie di campi di input

• Degli input speciali tra cui i bottoni di invio

Web server

Ciascun campo di input ha associati:

• un nome

• un tipo (il modo di inserimento)

testo, lista, bottone, selettore

• un contenuto o valore

dati inseriti dall’utente

Il browser può chiedere all’utente l’immissione dei dati in input

mediante un elemento delle pagine HTML detto form (prospetto).

Questo è generalmente contenuto in una pagina statica.

Una form ha associati:

• un nome

• un metodo

GET o POST

• un’azione

l’URL del software che riceverà l’input

• una serie di campi di input

• Degli input speciali tra cui i bottoni di invio

L’utente, inserisce i dati nella form riempiendo i suoi campi

di input.

Al termine l’utente preme il bottone di invio e ordina al

browser di inviare i dati al server

(16)

Browser

Server

GET /search/search_form.html

File system

home risorse search 200 OK Content-type: text/html Content-length: 7140 <html> <form name=“ricerca” method=“GET” action=“searcher.php”> <input name=“nome” type=“text”>

<input name=“Vai” type=“submit”> </form> </html> search_form.html searcher.php Ricerca Nome: Rubrica Telefonica Vai

1La form è generalmente contenuta in

una pagina HTML statica che il browser ottiene e visualizza come al solito.

Il web server

Browser

Server

File system

home risorse search Form «ricerca»,

method GET, action searcher.php Input «Nome»: type text; value=«Mario Rossi» search_form.html searcher.php Ricerca Nome: Rubrica Telefonica Vai

2L’utente compila la form

(17)

Browser

Server

File system

3Il browser: compone la query HTTP

indicando l’applicazione (action) e la sequenza delle coppie nome-valore dei campi di input della form.

GET /search/searcher.php?nome=``Mario Rossi’’

Il web server

Browser

Server

File system

ricevuta; ne estrae il pathname della procedura richiesta e la localizza nel suo file system;

(18)

Browser

Server

File system

4b Il server: esegue l’applicazione,

fornendole i dati inviati dall’utente

come input; nome=``Mario Rossi’’

Il web server

Browser

File system

4c l’applicazione: interagisce con eventuali sorgenti esterne di dati, e.g. un Data Base Management System

(DBMS);

nome=``Mario Rossi’’

DBMS

Cerca record con nome=“Mario rossi”

Trovati 2 record:

Mario Rossi 555-993299 Mario Rossi Jr. 399-000111

Server

(19)

Browser

File system

4dl’applicazione: crea dinamicamente

una pagina HTML in cui è contenuto

l’output dell’elaborazione. nome=``Mario Rossi’’

DBMS

Server

Cerca record con nome=“Mario rossi” Trovati 2 record: Mario Rossi 555-993299 Mario Rossi Jr. 399-000111 <html> … Mario Rossi: 555-993299 <br> Mario Rossi Jr.: 399-000111<br> … </html> pagina dinamica

Il web server

Browser

File system

home risorse search search_form.html searcher.php

4e l’applicazione: invia la pagina dinamica direttamente al browser come qualsiasi altra pagina HTML.

Le pagine dinamiche non sono salvate sul file system, e vengono generate ogni volta ex-novo anche a parità di query.

nome=``Mario Rossi’’

DBMS

Server

Cerca record con nome=“Mario rossi” Trovati 2 record: Mario Rossi 555-993299 Mario Rossi Jr. 399-000111 200 OK Content-type: text/html Content-length: 49706 <html> … Mario Rossi: 555-993299 <br> Mario Rossi Jr.: 399-000111 <br> … </html> Mario Rossi: 555-993299 Mario Rossi Jr.: 399-000111 pagina dinamica

37

(20)

Questa form contiene due campi:

Il campo per il quale si effettuerà la ricerca: «Filming Location» (selezionabile da una lista) Il valore di «Filming Location» per il quale effettuiamo la ricerca (tipo testo): «Salerno»

Cerchiamo tutti i film del database che sono

stati girati a Salerno.

Il sito produce una pagina in cui sono elencate tutte le schede (record) dei film che soddisfano il criterio di ricerca.

Web server

Invia informazioni di stato e messaggi d’errore

Il soddisfacimento di una query HTTP può produrre diversi eventi:

• Una condizione d’errore: ad esempio, l’URL richiesto non è presente sul server;

• L’infrazione di una regola di accesso. Ciò si verifica quando la query è stata inviata da un browser/utente

che non ha le necessarie autorizzazioni;

• Il verificarsi di errori durante l’esecuzione di una applicazione o del server stesso;

• L’invio di notifiche: quando il gestore del server desidera inviare un messaggio «amministrativo» al browser

che ha effettuato la richiesta (e.g. quando si informa che la pagina richiesta sta per essere spostata)

39

(21)

Browser

Server

GET /search/contatti.html

File system

home risorse search search_form.html searcher.php Ricerca Nome: Rubrica Telefonica Vai

1Il browser: compone una query per

una risorsa che non è presente sul server

Il web server

Browser

Server

File system

2 Il server: produce una «pagina di

cortesia» in cui è descritto l’errore che si è verificato: «Page not found»

Not Found The requested URL …was not found on this server.

(22)

Browser

Server

File system

3Il server: compone la response HTTP

contenente il codice d’errore, i metadati e il contenuto della pagina di «cortesia» e la invia al browser

Not Found The requested URL …was not found on this server. 404 NOT FOUND Content-type: text/html Content-length: 49706 <html> <h1>Not found</h1>

The requested URL …was not found on this server. </html>

Il web server

Browser

Server

File system

home risorse search search_form.html searcher.php

4Il browser: visualizza la pagina…

Not Found

The requested URL …was not found on this server. 404 NOT FOUND Content-type: text/html Content-length: 49706 <html> <h1>Not found</h1>

The requested URL …was not found on this server.

</html>

Not Found

The requested URL …was not found on this server.

(23)

Invia informazioni di stato e messaggi d’errore

1xx – informazioni (sullo stato di esecuzione della richiesta del browser)

2xx – codici di successo

3xx – richiesta ricevuta ma è necessaria una ulteriore azione affinchè questa venga soddisfatta

ad esempio, nel caso in cui il gestore del sito intenda spostare una risorsa cambiandone l’URL. Il server può soddisfare la

richiesta corrente e notificare al browser l’URL a cui rivolgere le prossime richieste (307 – temporary redirect)

4xx – errore, la richiesta non può essere soddisfatta

5xx – errori interni del server – e.g., errori nelle applicazioni, configurazione errata…

Web server

Alcuni dei più diffusi Web Server:

Nome

Produttore e anno

URL

note

Apache HTTP Server Apache Software Foundation – 1995 https://httpd.apache.org

Apache Tomcat Apache Software Foundation – 1999 https://tomcat.apache.org Orientato allo sviluppo di

web applications.

Internet Information Services (IIS) Microsoft Corp. – 1995 https://www.iis.net