01 Intro

Sistemi informativi su Web
Anatomia di un sistema
informativo sul Web
Giovanni Grasso
This work is licensed under a Crea2ve Commons A6ribu2on-‐Noncommercial-‐Share Alike 3.0 United States
See h6p://crea2vecommons.org/licenses/by-‐nc-‐sa/3.0/us/ for details
Anatomia
di un sistema informa2vo su Web
Archite6ura client server Browser
(Firefox, internet Site
Chrome,…)
HTTP+URI+Cookie
HTML+CSS Web Server AppServer DBMS

(JBoss, (Postgres,
(Apache,MSIIS, …)
GlassFish, …) MySQL, …)
HTML
Archite6ura 3-‐2er CSS Presenta2on Tier Logic Tier Persistence Tier
Model-‐View-‐Controller Controller
REST
CRUD Model View
ORM
Tra6o da: David Pa6erson, Armando Fox CRUD ORM
Engineering Long-‐Las-ng So/ware: An Agile Approach Using SaaS and Cloud Compu-ng

Internet = Web?
La risposta e’ no
Il World-‐Wide Web (WWW o semplicemente il Web) e’ certamente

quello a cui la maggior parte delle persone pensano quando vedono la
parola “internet”. Ma WWW e’ solo una parte di Internet.

“The Internet is the global system of interconnected
mainframe, personal, and wireless computer networks
Internet
that use the Internet protocol suite (TCP/IP) to link
billions of devices worldwide.

Email
The Internet carries an extensive range of informa-on
Web resources and services, such as the World Wide Web
(WWW), electronic mail, Usenet newsgroups,
telephony, and peer-‐to-‐peer networks for file sharing.”
Online
gaming
FTP
Tim Berners-‐Lee
L’invenzione del WWW e’ solitamente a6ribuita al britannico Tim
Barners-‐Lee, che nel 1990, quando lavorava al CERN, propose un
sistema ipertestuale distribuito
•  Ipertesto = testo a sviluppo non lineare
•  Distribuito = dislocato sui nodi di una rese

La crescita del web fu agevolata dalla decisione del CERN di non
breve6are il lavoro e le idee dei propri dipenden2, rendendo
pubblci sia il codice sia i protocolli senza vincoli

Cara6eris2che del Web
Subito dopo la sua proposta iniziale, Berners-‐Lee sviluppo’ quali
dovevano essere le principali cara6eris2che del Web:
1.  Una URL per iden2ficare univocamente una risorsa sul Web.
2.  Il protocollo HTTP per descrivere come operano richiesta e risposta.
3.  Una programma sogware (successivamente chiamato web server)
che risponde a richieste HTTP.
4.  Un linguaggio per la pubblicazione di documen2: HTML.
5.  Un programma (successivamente chiamato browser) per effe6uare
richieste HTTP da URLs e visualizzare il codice HTML ricevuto come
risposta.
Anatomia
Chrome,…)
HTTP+URI+Cookie

(JBoss, (Postgres,
(Apache,MSIIS, …)
HTML
REST
CRUD Model View
ORM

Archite6ura Client-‐Server
•  World Wide Web
–  servizio applica2vo di Internet basato su
un’archite6ura client/server
–  ma non è l’unico servizio client/server
•  Nel caso del Web
–  risorse: documen2, immagini ed altri media,
servizi interalvi
–  client: 2picamente il browser o una app
–  server: server per l’accesso a risorse Web
Archite6ura Client-‐Server
•  Consideriamo il sito del corso di laurea
–  È un esempio di sistema su archite6ura Client-‐Server
•  Il browser è un esempio di un client
–  un programma specializzato a chiedere ad un server
informazioni e a perme6ere all'utente di interagire
con tali informazioni
•  Il programma che risponde sul sito del corso è un
esempio di server
–  un applica2vo specializzato nell’ a6endere richieste
dai client e a fornire una risposta
Client-‐Server
•  Il client fa un richiesta
•  Il server invoca una applicazione per
soddisfare la richiesta e manda in risposta al
client l'output della applicazione
•  Il client visualizza la risposta
Anatomia
Chrome,…)
HTTP+URI+Cookie

(JBoss, (Postgres,
(Apache,MSIIS, …)
HTML
REST
CRUD Model View
ORM

Il Protocollo HTTP
•  Client e server comunicano a6raverso un
protocollo di rete
–  insieme di regole condivise tra gli agen2 coivol2
•  Browser e server Web comunicano con il
protocollo HTTP (HyperText Transfer Protocol)
–  HTTP si basa su TCP/IP (Transmission Control
Protocol/Internet Protocol)
–  4 comandi principali: GET,POST,PUT,DELETE
HTTP
•  In una rete TCP/IP, ogni computer (host) ha un
indirizzo IP e rimane in ascolto su una porta
–  Es. 193.205.219.57:8080
–  Il numero IP iden2fica un computer sulla rete
•  Di solito non usiamo l'indirizzo IP, ma un nome: un server
specializzato (Domain Name Server, DNS) man2ene una
mappa nomeànumero IP. Quando il browser conta6a un
server per nome (es. www.unical.it), automa2camente
chiede ad un DNS il numero IP ad esso associato
–  La porta iden2fica uno specifico programma server
•  Tipicamente un server web è impostato sulla porta :80
Uniform Resource Iden2fier
•  La stringa
h6p://www.people.it:80/search.php?name=pinco&surname=pallino
è un Uniform Resource Iden2fier (URI)
–  Nome del protocollo (h6p://)
–  Hostname (www.people.it)
–  Port number, opzionale: se non specificata si usa il
default associato al protocollo (:80)
–  Risorsa richiesta all'host (/search.php)
•  Immagine, pagina HTML, etc.
•  Ogni applicazione ha le sue regole per interpretare il nome
della risorsa. REST rappresenta una proposta affermata e
diffusa (perchè semplice e consistente)
Uniform Resource Iden2fier
•  Si puo’ specificare anche una query string:
coppie nome=valore separate da &
•  Serve a trasme6ere parametri al server
•  Sintassi query string:
?<nome-‐parametro>=<valore>(&<nome-‐parametro>=<valore>)*
Es. h6p://www.people.it/search.php?name=pinco&surname=pallino

Nome Valore Nome Valore
parametro (pinco) parametro (pallino)
(name) (surname)
Cookie
•  Il protocollo HTTP è privo di stato
–  Ogni richiesta non ha memoria delle preceden2
–  Serve un meccanismo per mantenere traccia dello
stato della "sessione" tra una richiesta e l’altra
•  Session Cookies
•  Persistent Cookies
–  tracciamento delle abitudini
–  personalizzazione dei contenu2
–  mantenere l’utente loggato
Anatomia
Chrome,…)
HTTP+URI+Cookie

(JBoss, (Postgres,
(Apache,MSIIS, …)
HTML
REST
CRUD Model View
ORM

HTML+CSS
•  L'interazione con l'utente avviene a6raverso
pagine Web
•  Le tecnologie base per la codifica di pagine
Web sono: HTML + CSS (e JavaScript)
–  HTML: definisce il contenuto della pagina
–  CSS: definisce la presentazione del contenuto
della pagina
–  Javascript: definisce il comportamento
HTML+CSS
•  HTML: linguaggio di markup per la definizione
di pagine ipertestuali
–  stru6ura gerarchica, rappresentata come nodi di
un albero
•  CSS: linguaggio per associare direlve di
presentazione agli elemen2 della stru6ura
gerarchica di un documento HTML
•  Javascript: semplicemente il linguaggio di
programmazione del Web.
HTML+CSS
•  Una stru6ura gerarchica ha diverse forme di
rappresentazione equivalente:
–  nidificazione di nodi in un albero
–  nidificazione di elemen2 in un documento
–  nidificazione di riquadri
HTML+CSS
<!DOCTYPE HTML>
html <html>
<body>
<h1>Linguaggi di programmazione:</h1>
<ul>
body
<li>Java</li>
<li>Ruby</li>
<li>Phyton</li>
<li>C language</li>
</ul>
h1 ul </body>
</html>
Linguaggi:
li li li li
Java Ruby Phyton C language

HTML+CSS
html
Linguaggi:
body
Java
Ruby
h1 ul
Phyton
Linguaggi:
C Language
li li li li
Java Ruby Phyton C language

HTML+CSS
•  La formattazione del documento corrisponde a
definire regole di formattazione per ogni suo riquadro
•  Per specificare come formattare ogni riquadro
abbiamo bisogno di:
–  un meccanismo che permetta di selezionare i vari riquadri
–  un insieme di dichiarazioni di formattazione da associare
ad ogni riquadro
•  Per rendere efficace il meccanismo
–  Alcune proprietà (ad esempio il font) devono poter essere
ereditate dal riquadro esterno (padre)
–  Alcune proprietà possono essere raffinate con regole
applicate in cascata
HTML+CSS
•  La formattazione del documento corrisponde a
definire regole di formattazione per ogni suo riquadro
•  Per specificare come formattare ogni riquadro
abbiamo bisogno di:
–  un meccanismo che permetta di selezionare i vari riquadri
–  un insieme di dichiarazioni di formattazione da associare
ad ogni riquadro
•  Per rendere efficace il meccanismo
–  Alcune proprietà (ad esempio il font) devono poter essere
ereditate dal riquadro esterno (padre)
–  Alcune proprietà possono essere raffinate con regole
applicate in cascata
HTML+CSS
•  Foglio di stile CSS: lista di regole
•  Regola
selettore
{ lista_di_dichiarazioni }
•  Dichiarazione
proprietà: valore;
HTML+CSS
Sele<ore
Regola
h1 {
color: red;
font-size: 14pt;
} Dichiarazione
ul {
border: solid; Valore
}
Proprietà
Anatomia
Chrome,…)
HTTP+URI+Cookie

(JBoss, (Postgres,
(Apache,MSIIS, …)
HTML
REST
CRUD Model View
ORM

Archite6ura 3-‐Tier
•  I SIW sono stru6ura2 in una archite6ura
3-‐-er
•  Tre 2er logici
–  Presenta2on Tier
–  Logic Tier
–  Persistence Tier
•  Alla distribuzione logica può corrispondere
anche una distribuzione fisica
Architettura >> Architettura
Server DBMS
Applicativo
HTTP
browser
Internet
DB
Pagine
centrata sui servizi

browser architettura applicativa
completa
•  Presenta2on Tier
–  server HTTP (Web server) che acce6a le richieste
e serve dire6amente i contenu2 sta2ci (css,
immagini, etc.)
–  inoltra richieste per contenu2 dinamici al Logic
Tier
•  Logic Tier
–  qui gira la applicazione che genera i contenu2
dinamici
–  di solito l'applicazione è supportata da un
Applica-on Server
Applica2on Server
•  Infrastruttura architetturale: sistema che
offre servizi per la gestione e l'esecuzione
di applicazioni Web complesse
–  Obiettivo: efficienza (nell'esecuzione delle
applicazioni)
•  Infrastruttura per la programmazione:
librerie, paradigmi di programmazione
–  Obiettivo: efficacia (nello sviluppo del sw)
Applica2on Server
•  Infrastru6ura archite6urale
–  caching, clustering
–  ges2one risorse sul filesystem
–  ges2one transazioni (anche distribuite)
–  load balancing
–  sicurezza
Applica2on Server
•  Infrastruttura di programmazione (minima):
–  decodifica delle richieste del client
(es: decodifica dei parametri e delle
intestazioni HTTP)
–  gestione del ciclo di vita delle applicazioni
(es: più richieste con una attivazione)
–  gestione delle sessioni
(es: utilizzo trasparente dei cookie)
–  gestione di informazioni condivise
–  supporto alla produzione della risposta HTTP
Applica2on Server
•  Esempi
–  Java JEE (Tomcat, Jboss, Glassfish, …)
–  Ruby on Rails
–  LAMP (Linux Apache MySQL PHP)
–  Microsoft Internet Information Services
–  molti altri
•  Persistence Tier
–  ha la responsabilità di ges2re la persistenza dei da2, di
solito è un DBMS relazionale
–  è l'unico Tier in cui non si può applicare una soluzione
ridondante shared-‐nothing
–  per ovviare, considerando che nei SIW le operazioni di
le6ura sono molto più numerose e frequen2 di quelle
di scri6ura, si applicano archiete6ure master-‐slave
•  qualunque slave può soddisfare richieste di le6ura
•  solo il master può soddificare richieste di scri6ura (e si
preoccupa di propagare gli aggiornamen2 agli slave)
h6p requests
Load Balancer
Web Server Web Server … Web Server
Load Balancer
App Server App Server … App Server
Load Balancer
DB Master DB Slave … DB Slave

Anatomia
Chrome,…)

HTTP+URI+Cookie
Web Server AppServer DBMS
HTML+CSS (JBoss, (Postgres,
(Apache,MSIIS, …)
HTML
CSS Presenta2on Tier Logic Tier Persistence Tier
Archite6ura 3-‐2er
Controller
Model-‐View-‐Controller
REST Model View
CRUD
ORM

•  Controller
–  ha la responsabilità di ges2re la richiesta:
•  sulla base delle richieste dell'utente invoca un metodo del modello
•  sulla base del risultato ritornato decide a quale componente affidare la
ges2one (creazione) della risposta
•  Model
–  ha la responsabilità di implementare la logica applica2va
•  View
–  ha la responsabilità di ges2re l'interazione con l'utente
•  mostrare i da2 del modello (prepara2 dal controller)
•  raccoglie da2 dall'utente
•  In Java :
–  Controller
•  classe Java specializzata a ges2re la richiesta. Ogni
metodo corrisponde ad una azione
–  Model
•  classi che rappresentano il dominio e le rela2ve
operazioni di manipolazione. Solitamente si appoggia
ad un DB per la persistenza.
–  View
•  Dinamiche basate su tecnologie di templa2ng per
HTML, XML, JSON
Anatomia
Chrome,…)

HTTP+URI+Cookie
Web Server AppServer DBMS
HTML+CSS (JBoss, (Postgres,
(Apache,MSIIS, …)
HTML
CSS Presenta2on Tier Logic Tier Persistence Tier
Archite6ura 3-‐2er
Controller
REST Model View
CRUD
ORM

Mapping Risorse
•  Come passiamo da una richiesta HTTP ad una
azione sul modello (a6raverso l'invocazione di
un metodo del controller)?
•  Sistema di mapping (o rou2ng)
–  richiesta HTTP -‐> metodo del controller
•  Route: richiesta HTTP à azione
–  Richiesta HTTP: URI + metodo HTTP
–  Azione: controller (classe) + metodo (della classe)
REST
•  Representa2on State Transfer (REST)
•  S2le archite6urale
–  API stateless su HTTP
•  Ado6a un sistema di convenzioni per definire
come u2lizzare e indirizzare risorse di rete con
il protocollo HTTP
–  in pra2ca perme6e di definire semplici API
–  convenzione su route (URI +metodo HTTP)
REST
Metodo HTTP Operazione CRUD
GET Retrieve
POST Create
PUT Update
DELETE Delete
•  L'operazione è quindi specificata per mezzo del

metodo HTTP
•  Convenzioni sugli URI
–  si fa riferimento alla risorsa (al plurale) sulla quale si
invoca l'operazione
–  schema gerarchico con parametri ed eventuali altre
risorse collegate a quella principale
Esempio di API RESTful

GET h6p://www.example.com/products
ritorna tul i prodol
GET|PUT|DELETE h6p://www.example.com/products/66432
read, update, delete il prodo6o con id = 66432

POST h6p://www.example.com/products
crea un nuovo prodo6o (con parametri passa2 nel metodo POST)
GET h6p://www.example.com/customers/33245/orders
ritorna gli ordini per il cliente 33245

GET h6p://www.example.com/customers/33245/orders/8769
res2tuisce l'ordine 8769 del cliente 33245
Anatomia
Chrome,…)
HTTP+URI+Cookie

(JBoss, (Postgres,
(Apache,MSIIS, …)
HTML
REST
CRUD Model View
ORM

CRUD
•  I da2 devono essere resi persisten2, cioè
salva2 in un database
•  Le principali operazioni della persistenza sono:
–  Create: crea una nuova tupla nel database
–  Retrieve: recupera una (o più) tuple dal database
–  Update: aggiorna una (o più) tuple del database
–  Delete: cancella una (o più) tuple dal database
CRUD
•  Problema principale: conciliare in maniera
efficace ed efficiente il mondo OO con il
mondo relazionale
–  classi – tabelle
–  oggel – tuple
–  riferimen2 – foreign key
–  navigazione – join
•  Altri problemi: consistenza e concorrenza
–  ges2one delle transazioni
CRUD
•  Diverse soluzioni:
–  Ac2ve Record
•  le classi del modello sono "estese" con metodi che
implementano le operazioni CRUD
–  save(), list()
–  Data Access Object
•  la responsabilità di ges2re le operazioni CRUD viene
delegata ad opportuni oggel (Data Access Objects)
CRUD
•  Problemi:
–  quando recupero un ogge6o, inseguo (e recupero)
tul i suoi riferimen2?
Prodo6o
1 RigaOrdine Ordine
nome * * 1
prezzoUnitario id
descrizione
quantità data
prezzo
*
1
•  Soluzione: Lazy-‐Load Cliente
–  classe proxy: estensione con metodi id
riscril il cui codice con2ene le istruzioni nome

cognome
per recuperare i da2 dal db email
CRUD
public class Cliente {
private Long id;
private List<Ordine> ordini;
…
public List<Ordine> getOrdini {
return this.ordini;
}
...
}
public class ClienteProxy extends Cliente {
public List<Ordine> getOrdini {

List<Ordine> ordini = new ArrayList<Ordine>();
OrdineDAO dao = new OrdineDAO();
ordini = dao.findByCliente(this);
this.setOrdini(ordini);
return ordini;
}
}
ORM
•  Scrivere i DAO (o i metodi Ac2ve Record) è
estremamente noisoso, ripe22vo, e fonte di
errori
•  Gli ORM (Object Rela2onal Mapping) sono
librerie che facilitano questa operazione
–  modello complesso: la semplicità del codice si
paga con una maggiore complessità conce6uale
–  Esempi: JPA, Hibernate, EBean
Anatomia
Chrome,…)
HTTP+URI+Cookie

(JBoss, (Postgres,
(Apache,MSIIS, …)
HTML
REST
CRUD Model View
ORM

Termini della licenza
•  Questo lavoro si basa su:

–  materiale del W3C
–  materiale del prof. G. Mecca dell’Università degli Studi della Basilicata
–  materiale del prof. P. Merialdo dell’Università degli Studi Roma Tre
–  materiale del prof. G. Grasso dell’Università della Calabria
e viene concesso in uso secondo i termini della licenza “Attribution-
ShareAlike” di Creative Commons.

01 Intro

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

01 Intro

Caricato da

Copyright:

Formati disponibili

Sistemi informativi su Web

HTML+CSS Web Server AppServer DBMS

Il World-‐Wide Web (WWW o semplicemente il Web) e’ certamente

HTML+CSS Web Server AppServer DBMS

HTML+CSS Web Server AppServer DBMS

HTML+CSS Web Server AppServer DBMS

Java Ruby Phyton C language

Java Ruby Phyton C language

HTML+CSS Web Server AppServer DBMS

centrata sui servizi

Web Server Web Server … Web Server

App Server App Server … App Server

DB Master DB Slave … DB Slave

•  L'operazione è quindi speciﬁcata per mezzo del

HTML+CSS Web Server AppServer DBMS

riscril il cui codice con2ene le istruzioni nome

public class ClienteProxy extends Cliente {

public List<Ordine> getOrdini {

HTML+CSS Web Server AppServer DBMS

•  Questo lavoro si basa su:

Potrebbero piacerti anche

01 Intro

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

01 Intro

Caricato da

Copyright:

Formati disponibili

Sistemi informativi su Web

HTML+CSS Web Server AppServer DBMS

Il World-­‐Wide Web (WWW o semplicemente il Web) e’ certamente

HTML+CSS Web Server AppServer DBMS

HTML+CSS Web Server AppServer DBMS

HTML+CSS Web Server AppServer DBMS

Java Ruby Phyton C language

Java Ruby Phyton C language

HTML+CSS Web Server AppServer DBMS

centrata sui servizi

Web Server Web Server … Web Server

App Server App Server … App Server

DB Master DB Slave … DB Slave

• L'operazione è quindi speciﬁcata per mezzo del

HTML+CSS Web Server AppServer DBMS

riscril il cui codice con2ene le istruzioni nome

public class ClienteProxy extends Cliente {

public List<Ordine> getOrdini {

HTML+CSS Web Server AppServer DBMS

• Questo lavoro si basa su:

Potrebbero piacerti anche

Il World-‐Wide Web (WWW o semplicemente il Web) e’ certamente

•  L'operazione è quindi speciﬁcata per mezzo del

•  Questo lavoro si basa su: