Applicazioni Web Based - mat.uniroma3

UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
CorsodiLaureainMatematica
DipartimentodiMatematicaeFisica
Sistemiperl’elaborazionedelleinformazioni
7.Applicazioniwebbased
DispensedelcorsoIN530a.a.2016/2017
prof.MarcoLiverani
Applicazioni“webbased”
•
•
•
IlWorldWideWebèuninsiemeditecnologie(computerhardware,retidicomputerbasate
suprotocolloTCP/IP,sistemioperativicheoffronoserviziapplicativi)natoperpubblicare
informazionidistribuitesudiversinodidellareteInternet,prevalentementenell’ambito
dellacomunitàscientificainternazionale
Lestessetecnologiesonostatepoiadottatepercostruirel’architetturaapplicativacheoggiè
lapiùdiffusasulmercatodellatecnologiainformatica:l’architetturadelleapplicazioniweb
based
InquestoambitosisfruttailprotocolloapplicativoHTTP,illinguaggioHTML,l’interfaccia
CGI otecnologiepiùmoderneedingegnerizzate,comeJEE,Microsoft.net,Ajax,iWeb
ServicesSOAPeRestful,ecc.percostruireprogrammiingradodiinteragirecongliutenti
presentandosicomeun“sitoweb”compostodapagineipertestualicollegatefraloro
uest
eq
HTTP R
File
Database
sponse
HTTP Re
(HTML)
Web
Application
Web
browser
Web Client
Rete TCP/IP
HTTP Request
Web Server
HTTP Resp
onse
(HTML)
Web
browser
Web Client
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
1
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Applicazioni“webbased”
Contenuti“statici”:leinformazioni
pubblicatedalwebserversono
pre-confezionateesonocontenutesu
fileoaltridocumentidigitaliilcui
contenutoèdefinitoapriori
LA
TO
ciao.html
<html>
…
<p>Ciao</p>
…
</html>
Web Server
SE
RV
E
R
Codifica
compatibileconil
client(HTML,GIF,
...)
Firefox
LA
TO
URL http://gondrano/ciao.html
CL
IEN
T
Ciao!
Questoèiltesto...
Applicazioni“webbased”
Contenuti“dinamici”:leinformazioni
pubblicatedalwebserverottenutecome
outputdiunprogrammaeseguitodal
server;l’outputvienecostruitodal
programmasullabasediuncalcoloodi
un’interrogazionesuundatabase
LA
TO
DATA.CGI
/*Calcola la
data corrente
e visualizzala
in output*/
Web Server
SE
RV
E
R
Codifica
dell’output
compatibileconil
client(HTML,GIF,
...)
Firefox
URL http://gondrano/data.cgi
LA
TO
CL
IEN
T
Oggièil29/4/2015e
sonoleore9:30:25
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
2
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
BrevecronologiadelWWW
•
•
•
•
•
•
•
•
•
•
•
•
1980:TimBerners-Lee(CERN)sviluppailprogramma Enquire-Within-Upon-Everything”che
consentivadieffettuarelinktradiversinodi
1989:TimBerners-Leediffondeduedocumentiper accogliereopinionisulsuolavoropressoil
CERN
1990:IldocumentodiTBLvieneriformulatoconl’appoggio ufficialedelCERN;vieneconiatoil
nomeWorldWideWeb
1991:SviluppodeiprimiclientedaperturadelWWWserverdelCERN
1992:SviluppodelclientconinterfacciaX;vienerilasciatalalistadeiprimi26serverWWW
1993:VienerilasciatoilprimobrowserperMacintosh;vienerilasciatoX-Mosaic diMarc
Andreessen (NCSA);iserverHTTPsonocirca50
1993:Vieneimplementatal’architetturaCGI(formalizzatainRFC3875nel2004)
1994:VienefondatalaMosaic Corporation(poiNetscapeCorp.);isitiWWWsono1.500;a
dicembresitieneilprimomeetingdel“W3Consortium”pressoilMIT;ilCERN,acausadiproblemi
dibudget,decidedisospendereilsupportodelprogettoWWW
1995:Vienefondatala“WebSociety”aGraz(Austria):partecipanolaTechnicalUniversity diGraz,
ilCERN,l'UniversitàdelMinnesotael’INRIA(Francia)
1996:FormalizzazionediHTTP/1.0comeRFC1945delIETF
1997/1999:PresentazionediHTTP/1.1(RFC2616)
...lastoriacontinua(http://www.internetsociety.org/history)
Applicazioni“webbased”
•
•
•
Neltempoaquestetecnologiedibasesenesonoaggiuntedellealtre,peroffriresoluzioni
informatichesemprepiùingegnerizzate,robusteeflessibili:linguaggidiprogrammazione
ObjectOriented (Java,C#,...),interiframeworksoftwareingradodi“semplificare”lo
sviluppodiapplicazioniwebbased,ecc.
Perlanaturaapertaeintegratadelmodellopropostodalweb,letecnologiechehanno
avutosuccessosonoquellechehannosposatoglistandard ochesonostatecostruite
proponendodeglistandardaperti,fruibilianchedaaltri
WEB2.0:oggiperaumentarel’interazioneconl’utenteerealizzareapplicazionicompatibili
conglistandarddeidispositivimobili(smartphone,tablet,smartwatch,...)siaggiungeanche
un’importanteelaborazione“latoclient”:
– l’outputprodottodalprogrammalatoserveroilfileHTML“statico”contieneancheistruzionidi
programma inlinguaggioJavascript
– ilclientesegueleistruzioniJavascript presentinellapagina emodificadinamicamenteilcontenuto
dellapaginastessa,ancheinbasealleazionicompiutedall’utentesuglioggettipresentinellapagina
(bottoni,icone,campidiinput,ecc.)
– ilprogrammaJavascript contenutonellapaginainteragisceconilserveracquisendoedinviando
informazionisenzadoverricaricareunanuovaURLnelbrowserdell’utente(l’interazioneavviene
medianteWebServicesRESTeflussidiinformazioniJSON)
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
3
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
WebServices
•
Lastessatecnologiaimpiegataperleapplicazioniwebèstatausatapermetterein
comunicazionetradilorodeiprogrammi(enonutenti eprogrammi),sviluppandola
tecnologiadeiWebServices
UserClient
Personal
Computer
Front-end
WebApplica,on
Server
Back-end
WebApplica,on
Server
Datalayer
Database
Server
Sistemaopera,vo
Sistemaopera,vo
Sistemaopera,vo
Sistemaopera,vo
WebBrowser
HTTPServer
WebApplica,on
Server
Documento
HTML
HTTPrequest
HTTPresponse
DBMS
Database
SOAPrequest
Web
Applica,on
SOAPresponse
WebService
xDBC
(SQLquery)
Database
Programma
Javascript
File
File HTML
HTML
File
GIF
WebServices
•
•
Protocolli(sopraadHTTP):SOAP (SimpleObjectApplicationProtocol),REST
(REpresentational StateTransfer)
LeinformazioninonsonocodificateinHTML(nondevonoesserepresentateadunutente),
mainXML,cheoffreunacodificapiùflessibile
– XMLpermettedidefinire“tag”percodificareinmodoapertoleinformazioninecessarieinuno
specificocontestoapplicativo
– sialerichiestedelclientalserverchelerispostedelserveralclientsonocodificateinstruttureXML
denominateSOAPEnvelope (busteSOAP),costituitedaunheader edaunbody
<soap:Envelope
xmlns:soap="http://schemas.xmlsoap.org/
soap/envelope/">
<soap:Body>
<getProduct xmlns="http://acme.it/ws">
<productId>827635</productId>
</getProduct>
</soap:Body>
</soap:Envelope>
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
<soap:Envelope xmlns:soap="http://schemas.../soap/envelope/">
<soap:Body>
<getProductResponse xmlns="http://acme.it/ws">
<getProductResult>
<productName>BiscottiGentilini</productName>
<productId>827635</productId>
<description>Biscottisecchidacolazione</description>
<price>1,70</price>
<inStock>true</inStock>
</getProductResult>
</getProductResponse>
</soap:Body>
</soap:Envelope>
4
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Componentidell’architetturadelleapplicazioniwebbased
Percomprenderel’architetturaapplicativadiunprogrammawebbased,ènecessariostudiarne
lecomponenti:
•
linguaggioHTMLperlacodificadelleinformazionipresentatealclientelacostruzione
dell’interfacciautentedellawebapplication
•
protocolloHTTPecodificadelleURL perl’identificazionedellerisorsepresentisulweb;
•
meccanismodiscambiodeidatiininputeinoutputtrailwebclienteilwebserver
(vedremoilmeccanismonotocomeCGI,CommonGatewayInterface)
Elaborazioneautomaticaditesti
Elaborazionedidocumentimedianteilcomputer…Cosasignifica?Qualèloscopo?
• Comporre testiconl’ausiliodellamacchina(èpiùcomodo)
• Definirel’aspettodeltesto conqualitàtipografica
• Riprodurlo inpiùcopierapidamente
• Modificareiltestoointegrarlosuccessivamente
• Memorizzare,archiviare documenti
• Eseguiredellericerche suunarchiviodocumentale
• Trasmettere,condividere documenticonaltri
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
5
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Strumenti– Wordprocessor
•
•
•
•
Ilwordprocessor èunadelleapplicazionipiùdiffusesuipersonalcomputer.
Consentedicomporreemodificareundocumento,consentediarchiviarlo,stamparlo.
Ildocumentopuòesserecondivisoconchiutilizzalostessoprogramma(eforseanchela
stessamacchina,lostessosistemaoperativo,…).
Devoconoscereilformatodeidatiperpotercostruirestrumentidiricercadiinformazioni
sull’archiviodocumentale
Strumenti– Linguaggidimarcatura
•
•
•
IllinguaggioTEX(eLATEX)permettelacostruzionedidocumentisecondounformato aperto
(notoatutti),aumentandocosìlapossibilitàdicondivisioneescambio
Necessitadiun“motoredirendering”(unprogramma)perpoterprodurreunacopia
leggibiledeldocumento
Permettedilegaretraloroleinformazionisecondounastrutturagerarchicaesequenziale
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
6
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
HTML:HyperText MarkupLanguage
•
Èun“linguaggiodimarcatura”deltesto:
– Nonèunlinguaggiodiprogrammazione
– Ècostituitodauninsiemediparolechiave(tag omarcatori)concuiidentificaporzionidel
documento
– Ènatoconl’obiettivodiconsentireladefinizionedidocumentiipertestualidistribuitisuunaretedi
computer
•
HTMLvienedefinitocomeapplicazionediSGML (StandardGeneralized MarkupLanguage)
HTML:Tagperilmark-updeltesto
•
•
•
•
Itag consentonodicontrassegnare(marcare)unaporzionedeldocumentoperassociargli
unadeterminatacaratteristica(strutturale,tipografica,ecc.).
Itag sonocostituitidaunelementodiinizio-marcaturaedunelementodifine-marcatura;i
tag sonocaseinsensitive.
Glielementidiiniziomarcaturapossonoesserecaratterizzatidaattributi acuièassociatoun
particolarevalore:
<tag attributo1=“valore1” attributon=“valoren”> …</tag>
Esempio:
<p align=“center”>Paragrafo del documento</p>
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
7
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
HTML:Entità
•
•
•
Pergarantirelamassimacompatibilità etrasportabilità deldocumento,HTMLutilizzala
codificaASCIIstandarda7bit(caratterida1a127)
Perrappresentaresimbolispecialiocaratterinazionaliutilizzaalcuneentità
Esempi:
&agrave; =“à”,&egrave; =“è”,&eacute; =“é”,
&Egrave; =“È”,&uuml; =“ü”,ecc.
&amp; =“&”,&quot; =“” ”,&lt; =“<“,&gt; =“>”,ecc.
ScopodiHTML
•
ConHTMLèpossibile:
–
–
–
–
•
Definirelastrutturalogicadeldocumento
Definiredeicollegamentiipertestualifradocumenti(link)
Definirel’interfacciautente diunaapplicazioneweb
Definirelaformattazionetipograficadeltesto,fornendoindicazioni utiliperilrendering
L’erroredisintassi nonèprevistonell’ambitodell’elaborazionedidocumentoHTML:ciòche
nonèriconducibileaduntag dellinguaggiovieneignoratoevisualizzatoinquantotale.
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
8
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
StrutturadeldocumentoHTML:ilDocument ObjectModel
•
•
Definirelastrutturalogicadeldocumentosignificaidentificarnedellecomponenti
riconducibiliadelementidiunastrutturagerarchicanell’ambitodiunmodellodenominato
DOM:Document ObjectModel (specificatoconiltag “DOCTYPE”)
IlDOMdiHTMLprevedelaseguentestrutturagerarchica:
Documento
Intestazione
Titolo
Corpo
Capitolo
Sezione
Paragrafo
StrutturadeldocumentoHTML:ilDocument ObjectModel
•
Lostessomodellopuòessererappresentatoconunalbero:
Documento
Intestazione
Corpo
Titolo
Cap.1
Sez.1.1
Par.1 … Par.x
…
…
…
Cap.n
Sez.1.k
Sez.n.1
Par.1 … Par.y
Par.1 … Par.z
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
…
Sez.n.h
Par.1 … Par.w
9
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
HTML:tag perladefinizionedellastrutturadeldocumento
DOMdeldocumento
<!DOCTYPEHTML>
<html>
Intestazione
Titolo
<head>
<title>Titolodeldocumento</title>
</head>
<body>
<section>
<h1>Titolodelcapitolo</h1>
Doc.
Corpo
Capitolo Sezione
Paragrafi
<section>
<h2>Titolodellasezione</h2>
<p>Testodelparagrafo…</p>
<p>Testodelparagrafo…</p>
</section>
</section>
</body>
</html>
HTML:rendering deldocumento
<!DOCTYPEHTML>
<html>
<head>
<title>Primoesempio</title>
</head>
<body>
<article>
<h1>Titolodelcapitolo</h1>
<section>
<h2>Titolodellasezione</h2>
<p>Testodelparagrafo…</p>
</section>
</article>
</body>
</html>
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
10
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
HTML:ancorasullastruttura“logica”deltesto
•
•
•
Itag chedefinisconolastrutturadeldocumentoconsentonoalprogrammachelovisualizza
dievidenziaregraficamenteleporzioniditestocaratterizzatedaundeterminato“ruolo”
(titoli,sottotitoli,ecc.)
Oltreallagerarchiadellepartichecompongonoildocumento(article,section anche
nidificate)edeititoli(h1,h2,…,h6)esistonoaltritag percaratterizzareiltesto;es.:
<em>…</em>:enfatizza(inqualchemodo)unafraseimportante evidenziandoneicaratteri
Anchelaspaziaturatraiparagrafieiltipodicaratteredautilizzarevienestabilito
autonomamentedalprogrammachevisualizzaildocumento
HTML:listeedelenchi
•
Elenchipuntati:
<ul>
<li> Primoelemento</li>
<li> Secondoelemento</li>
</ul>
•
Listenumerate:
<ol>
<li> Primoelemento</li>
<li> Secondoelemento</li>
</ol>
•
Listecondescrizione:
<dl>
<dt> Primoelemento</dt>
<dd> Descrizioneprimoelemento</dd>
<dt> Secondoelemento</dt>
<dd> Descrizionesecondoelemento</dd>
</dl>
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
11
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
HTML:tabelle
•
Tabella:
<table border="1">
<tr>
<th>Autore</th>
<th>Titolo</th>
<th>Editore</th>
</tr>
<tr>
<td>Camilleri</td>
<td>Laconcessionedeltelefono</td>
<td>Sellerio</td>
</tr>
Spessoletabellesonoutilizzate(impropriamente)
<tr>
ancheperdisporreeallineareglielementisulla
<td>Sciascia</td>
pagina(es.:icampieleetichettediunaform)
<td>Unastoriasemplice</td>
<td>Adelphi</td>
</tr>
</table>
HTML:documentiipertestuali
•
•
•
•
IdocumentiHTMLpossonocontenereriferimenti(link ipertestuali)adaltridocumenti
Inquestomodolaletturadeltestopuònon essererigidamentesequenziale:invecediuna
sequenzadipagine(comeinunlibro)ottengounaretedipagine(unasortadigrafo con
paginefralorocorrelate)
Ilriferimentoadunarisorsa(documentooaltro)vieneespressomedianteunURL (Uniform
ResourceLocator)
ConunURLèpossibiledescriverelamodalità concuideveessereraggiuntoildocumento
correlatoelasuacollocazione:
http://www.mat.uniroma3.it/users/liverani/index.html
protocollo
hostname
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
path
filename
12
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
HTML:tag perlacreazionedilink
•
Iltag perladefinizionediriferimentiipertestuali(hypertextual reference)è
<ahref=“URL” target=“finestra”>testo…</a>
•
Ilriferimentoipertestualepuòspingersifinoadunpuntoparticolaredeldocumento
indirizzatodaunURL:possonoesseredefinitedelle“ancore”internealdocumentoper
indicarepuntidiagganciodiunlink:
<ahref=“URL#etichetta”>testo…</a>
e
<aname=“etichetta”>altrotesto…</a>
HTML:collegamentiipertestuali
rapporto.html
… Leggi <a href=“articolo.html”>l’articolo</a>
che parla di …
articolo.html
… Questo articolo parla di …
Leduepaginecollegatepossonoessere
suserverdifferenti:ildocumentopuò
esserefisicamentedistribuito (dislocato
inpiùpunti)
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
13
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
HTML:altritipidilink
•
•
•
•
Definendounlinkèpossibileindicareilprotocollo concuipotràessereraggiuntalarisorsa
collegata(documento,file,…).
SeilprotocolloèdifferentedaHTTP(es.:FTP,MAILTO,…)verràattivatounprogramma
adattoatrattarlo(avoltelostessobrowsergestiscepiùprotocolli).
Seiltipodidocumentorichiestononpuòesserevisualizzatodalbrowser(es.:documento
Word,PDF,Postscript,ecc.),tipicamentevieneattivatounprogrammaadeguato,ovveroil
filevienesalvatosulcomputer.
Esempi:
– <p>Scaricailfile<ahref=“ftp://nic.switch.ch/pub/file.zip”>file.zip</a>…</p>
– <p>Scrivialmio<ahref=“mailto:[email protected]”>indirizzo</a> diposta</p>
HTML:form diinserimentodati
•
•
•
Lepaginewebpossonoessereusateanchecome“interfaccia”versounprogramma
applicativowebbased (es.:programmiCGI)
IlprogrammaprodurràunoutputinformatoHTML perpoterlovisualizzarenelbrowsere
acquisiràl’inputdapartedell’utenteattraversodellemascherediinserimentodati
denominateform
Unaform ècompostada
– uninsiemedicampidiinputcaratterizzatidaunnome (univoconell’ambitodellaform)eduntipo,
chenedeterminailcomportamentofunzionale
– un’azione,ossialaURLdelprogrammachericeveràidatiinseritidall’utenteesioccuperàdellaloro
elaborazionerestituendoasuavoltaunoutput(adesempioinformatoHTML)
– l’indicazionedelmetodoHTTP(GEToPOST)concuiidatiinseritidall’utenteneicampidellaform
sarannoinviatialserverwebeall’applicazionecheimplemental’azione
•
Quandol’utentehaterminatolacompilazionedellaform vieneeseguitoilprogramma
specificatocome“azione”dellaform passandoglicomeinputidatiinseritidall’utentenei
campi
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
14
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Flussodiunprogrammawebbased
Client(browser)
ProtocolloHTTP
(sopraaTCP/IP)
Server(webserver)
form.html
search.cgi
input:Nome=Alan,
Cognome=Turing
HTML:form diinserimentodati
<html>
<head><title>Form di input</title></head>
<body>
<h1>Inserisci i dati:</h1>
<form action="search.cgi" method="GET">
<p>Nome: <input type="text" name="nome"></p>
<p>Dipartimento: <select name="dip">
<option value="mat">Matematica
<option value="fis">Fisica
</select></p>
<p>Qualifica: <input type="radio" name="qualifica“
value="prof“ checked>Docente <input type="radio“
name="qualifica“ value="stud">Studente </p>
<p>Esami: <input type="checkbox" name="esami“
value="in1">Informatica <input type="checkbox“
name="esami" value="al1">Algebra</p>
<p><input type="submit" value="Registra">
<input type="reset" value="Ripristina"></p>
</form>
</body>
</html>
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
15
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
HTML:formattazionetipografica
•
•
Èpossibileforniredelleindicazioni perilrendering deldocumentoHTML(perlasua
rappresentazionetipografica).
Taliindicazionipossonoesseretrascuratedalprogrammavisualizzatore,inmododa
adattarealmegliolavisualizzazionedellapaginaallostrumentofisicosucuivieneeseguitoil
rendering (browser).
<b>grassetto(bold)</b>
<u>sottolineato(underlined)</u>
<i>corsivo(italic)</i>
<tt>typewriter</tt>
<big>grande</big>
<small>piccolo</small>
x<sup>n</sup> (apice)
x<sub>k</sub> (pedice)
HTML:caratteri,font,colori
•
•
Èpossibiledefinireindettaglioiltipodicaratterechedeveessereutilizzato:
<fontface=“tipo”size=“dim.”color=“colore”>…</font>
Questorendepoco“trasportabile”ildocumento:èlegatoalladisponibilitàdicaratterie
colorisullamacchinadell’utente
•
IcolorivengonodefinitispecificandonelecomponentiRGB (red,green,blue)innotazione
esadecimale(valorida00aFF):
•
Esempio:#AB205B
#rrggbb
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
16
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
HTML:caratteri,font,colori
Conl’usodiquestitag ancheunapaginamolto
semplicediventacomplicataemenoleggibilee
manutenibile;diventadifficilegarantirela
coerenzagraficael’omogeneitàdellediverse
paginedelsito
<html>
<head>
<title>Fontecolori</title>
</head>
<bodybgcolor="#3090AA">
<h1>Paginacolorata</h1>
<p>
<fontcolor="#FFCC00"size="+1">Testogiallo</font>conilcarattere
<fontface="Arial"color="#FF0000"size="+2">Arial</font>...
</p>
</body>
</html>
HTML:immaginigrafiche
•
•
•
Èpossibileincludereimmagini inundocumentoHTML
L’immagineverràvisualizzatacompatibilmenteconlecapacitàdelbrowseredell’ambiente
ospite
<img src=“URL”align=“allineam.”alt=“testoalternativo”>
Esempio:
<img src=“snoopy.jpg” alt=“SnoopyeCharlieBrown”>
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
17
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Foglidistile:Cascading StyleSheet (CSS)
•
•
•
•
•
NeglianniHTMLsièarricchitodinumerositag dicaratterizzazionegraficadeglielementi
dellapaginafinoaperderelasuaoriginariaeleganzaeportabilità
PersemplificarelacostruzionedipagineHTMLconunaforteconnotazionetipograficae
cromatica,ritornandoall’obiettivooriginaledellinguaggio(definireunastrutturalogicadel
documento)sonostatiintrodottiifoglidistile(Cascading StyleSheet – CSS)
NelCSSvengonodefinitelecaratteristichetipografichedeitag presentinellapagina
Itag possonoessereraggruppatiininsiemiomogeneidefinendodelleclassi nelfogliodistile
CSS;lostessotag puòessereinseritoinpiùclassi,caratterizzandoloinmodidifferenti
Unostessofogliodistilepuòessereutilizzatosupiùdocumenti(osull’outputdiun
programma,codificatoinHTML)inmododagarantire
– omogeneità“tipografica”dipresentazionedituttelepaginedelsitoodell’applicazione
– facilitàdimodificadell’impaginazionedelsito/applicazione:bastamodificareun fogliodistileper
cambiarel’aspettodituttelepaginedelsito
HTML+CSS:fornireunostilealdocumento
<!DOCTYPEHTML>
<html>
<head>
<title>Primoesempio</title>
</head>
<body>
<h1>Titolodelcapitolo</h1>
<h2>Titolodellasezione</h2>
<p>Testodelparagrafo…</p>
</body>
</html>
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
18
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
HTML+CSS:fornireunostilealdocumento
H1 {
}
p{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-weight: normal;
border-color: #5588bb;
border-style: solid;
font-family: Times New Roman, serif;
text-align: justify;
color: #990000;
<!DOCTYPE HTML>
font-weight: bold;
<html>
}
body {
background: #FFCC66;
}
<head>
<title>Primo esempio</title>
<link rel=stylesheet type="text/css" href="style.css">
</head>
<body>
<h1>Titolo del capitolo</h1>
<h2>Titolo della sezione</h2>
<p>Testo del paragrafo…</p>
</body>
</html>
ServerWeb(serverHTTP)
•
UnserverWebèunprogrammacheimplementalacomponenteserverdelprotocolloHTTP
•
IlprotocolloHTTPèunprotocolloapplicativocheoperaallivello4dellostack TCP/IP(utilizza
tipicamentelaportaTCP80)
•
IlprotocolloHTTPS (portaTCP443)èilmedesimoprotocolloresosicuromediantela
cifraturadeidatitrasmessi,mediantel’usodiSSL (Secure Socket Layer);ilprotocolloHTTPS
garantisceanchel’identitàdelserver
•
IlprotocolloHTTP/1.1implementaiseguenticomandi:
– GET:ilclientrichiedeunaspecifica“risorsa”alserverindicandonelaURL
– HEAD:ilclientrichiedel’header dellarispostaHTTPperlarichiestadiunarisorsaindicataattraverso
unaURL,manonilcontenutodellarisorsastessa
– POST:ilclientrichiedeunaspecifica“risorsa”alserveredinviadelleinformazionialserver,che
seguonolarichiestaHTTP
– PUT:ilclientinviaalserverunarisorsachedeveesserememorizzatanellaURLspecificata
– DELETE:ilclientrichiedealserverlacancellazionedellarisorsaspecificataconunaURL
– TRACE,OPTIONS,CONNECT,PATCH:altricomandiperfunzionidiservizio,spessononimplementati
perragionidisicurezza
•
IcomandipiùutilizzatisonoGET ePOST
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
19
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
ServerWeb(serverHTTP)
•
IlprotocolloHTTPèunprotocollostateless:alterminedellarispostaadunarichiestadel
clientlaconnessionevieneterminatadalserver
•
IlserverHTTPnonconservamemoriadellostatodellasessioneutente;pergestire
informazionidisessionesiricorreall’usodicookies,piccolifiledidaticheèpossibile
memorizzaresulwebclient
•
IlserverWebeseguequestasequenzadioperazioni:
– AccettalaconnessionedapartediunclientmedianteilprotocolloHTTP
– Verificaseilclientol’utentehal’autorizzazione pereseguireilcollegamento
– AccettaunarichiestadalclientmedianteilprotocolloHTTP(GET,POST,...)
– Perrichiestedirisorsestatiche(fileHTML,immagineJPEG,ecc.):ilservercaricalarisorsaelainvia
alclient
– Perrichiestedirisorsedinamiche:ilserveresegueilprogrammapassandogliattraversolamodalità
CGIiparametriricevutidalclientedinviaalclientl’outputprodottodalprogramma
– Chiudelaconnessioneconilclient
ServerWeb(serverHTTP)
SessioneHTTPmedianteilprogrammaTelnet(connessionesullaportaTCP80)
HTTPrequest (GET)delclient
HTTPresponse delserver:header
marco@aquilante ~$ telnet gondrano 80
Trying 10.211.55.42...
Connected to freebsd.
Escape character is '^]'.
GET /~marco/index.html http/1.1
Host: gondrano
HTTP/1.1 200 OK
Date: Sun, 26 Apr 2015 13:57:05 GMT
Server: Apache/2.4.12 (FreeBSD)
Last-Modified: Sat, 25 Apr 2015 14:54:30 GMT
ETag: "9e-5148db0a37580"
Accept-Ranges: bytes
Content-Length: 158
Content-Type: text/html
<!DOCTYPE HTML>
HTTPresponse delserver:body
<html>
<head><title>Marco Home Page</title></head>
<body>
<h1>Benvenuti!</h1>
<p>Questa &egrave; la home page di Marco.</p>
</body>
</html>
Connection closed by foreign host.
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
20
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
ProgrammiCGI
•
•
•
•
•
CGI,CommonGatewayInterface,èunadellemodalità(laprima,inordineditempo,forse
tutt’oralapiùsemplice,maanchemenoefficiente)concuièpossibileeseguiredei
programmisuunserverWeb
L’interfacciaCGIdefinisceilmodoincuièpossibileinviaredelleinformazioni(parametri)da
unclientweb(unwebbrowser)all’applicazioneinvocatasulserverwebecomesiapossibile
restituirealclientl’outputprodottodalprogramma
IprogrammicheoperanosecondotalemodalitàvengonodefinitiprogrammiCGI
IprogrammiCGIvengonoeseguitisulserver,nonsulclient
NonesisteunlinguaggiodiprogrammazioneesclusivoperlacodificadiprogrammiCGI
– illinguaggioPerlèunodeiprincipalistrumentiperlosviluppodiapplicazioniCGI,manonl’unico
– illinguaggioPython èoggiunlinguaggiodiscripting moltodiffuso
– programmiCGIpossonoesserescritticomescriptdellashell delsistemaoperativo(Bash shell
script,adesempio)ocomeprogrammiinlinguaggioCcompilatiinlinguaggiomacchina
PassaggiodiparametridawebbrowseradapplicazioneCGI
•
Iparametrivengonoforniticonun’unicastringainformatoURLencoded:
•
Esempio:
nome1=valore1&nome2=valore2&…&nomen=valoren
nome=Silvia&cognome=Di+Stefano&eta=23
•
ÈilserverHTTPchesioccupadipassarlialprogrammaCGIsecondoduemodalità:
– POST:lastringavienefornitasulcanalestandardinput,ilprogrammaleggeràlastringadaSTDIN
(standardinput)
– GET:lastringavienememorizzatanellavariabilediambienteQUERY_STRING
•
Lamodalitàvienespecificatadalserver(sullabasedelleindicazionidelclient)mediantela
variabilediambienteREQUEST_METHOD
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
21
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
CompitidelprogrammaCGI
•
•
•
•
•
•
Acquisire lastringaconiparametri
Eseguireilparsing deiparametriricevutiininput,ossiaunasuddivisionedellastringaper
isolarelecoppie“nome=valore”esuccessivamenteperseparareilnomedelparametrodal
suovalore
Eseguirel’elaborazionerichiesta
Produrreunoutputcompatibileconlecapacitàdivisualizzazionedelbrowser(tipicamente
outputinformatoHTML)
L’outputdevecontenereunaintestazionecheneindichiilformatosecondolacodifica
MIME (Multipurpose InternetMailExtensions),seguitodaunarigavuota
Esempio:
Content-type: text/html
ProgrammiCGIinPerl
•
•
•
InPerlesisteunalibreriaperimplementareleprincipalifunzionidellaprogrammazioneCGI:
cgi-lib.pl
Conl’istruzionerequire èpossibilecaricareunalibrerianelprogrammaPerl
require “cgi-lib.pl”;
Tralesubroutinemesseadisposizionedallalibreriac’è“ReadParse”:
– Leggelastringadeiparametri(ricevutiindifferentementeconmetodoGEToPOST)
– Suddivideinomideiparametridaivalori
– Costruiscel’arrayassociativo%in:
$in{nome} = valore
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
22
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
CGIinPerl:unesempioelementare
<html>
<head><title>Input</title></head>
<body>
<form action=“ciao.cgi” method=“get”>
Come ti chiami? <input name=“nome”>
<input type=“submit”>
</form>
</body>
</html>
#!/usr/local/bin/perl
# Programma di esempio “ciao.cgi”
require “cgi-lib.pl”;
&ReadParse;
print “Content-type: text/html\n\n”;
print “<html><body>\n”;
print “<p>Ciao $in{nome}</p>”;
print “</body></html>\n”;
Esempio:indirizzarioon-line,schemadell’applicazione
•
•
•
ProgrammaWebperl’archiviazionediindirizzielaricercasulcatalogo
L’archivioèsuunDBMSrelazionale:database“marcodb”,tabella“rubrica”
Schemadell’applicazione:
select.html
select.cgi
insert.html
insert.cgi
delete.cgi
index.html
•
Sononecessariseifile:
–
–
–
–
–
–
index.html:menùprincipaledell’applicazione
select.html:form diinputdeicriteridiricercaperselezionareidatipresentisulDB
select.cgi:programmaCGIcheeseguelaselezionedeidatidalDBinbaseaiparametrispecificati
delete.cgi:programmaCGIcheeliminaunrecorddalDBinbasealsuo“id”
insert.html:form diinputdeidatidainserirecomenuovorecordnellatabella“rubrica”sulDB
insert.cgi:programmaCGIcheeseguel’inserimentodeidatiinunnuovorecordsulDB
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
23
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Indirizzarioon-line:menùprincipale(index.html)
<!DOCTYPE HTML>
<html>
<head>
<title>Rubrica degli indirizzi - Men&ugrave; principale</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Rubrica degli indirizzi</h1>
<h2>Men&ugrave; principale</h2>
<dl>
<dt><a href="select.html" title="Selezione dei dati presenti nella
rubrica">Selezione dati</a></dt>
<dd>Ricerca e visualizza i dati presenti nella rubrica degli indirizzi</dd>
<dt><a href="insert.html" title="Inserimento dati in rubrica">Inserimento
dati</a></dt>
<dd>Inserimento di un nuovo record nell'archivio degli indirizzi</dd>
</dl>
</body>
</html>
Indirizzarioon-line:inserimentocriteridiricerca(select.html)
<!DOCTYPE HTML>
<html>
<head>
<title>Rubrica degli indirizzi - Consultazione dati</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Rubrica degli indirizzi</h1>
<h2>Consultazione dati</h2>
<form action="select.cgi" method="GET">
<table>
<tr><th>Nome</th><td><input name="nome" type="text" size="20"></td></tr>
<tr><th>Cognome</th><td><input name="cognome" type="text" size="30"></td></tr>
<tr><th>E-mail</th><td><input name="mail" type="text" size="30"></td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="Cerca”>
<input type="reset" value="Ripristina"></td></tr>
</table>
</form>
</body>
</html>
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
24
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Indirizzarioon-line:scriptCGIdiselezionedeidati(select.cgi)
#!/usr/local/bin/perl
require "cgi-lib.pl";
&ReadParse;
print "Content-Type: text/html\n\n";
print "<!DOCTYPE HTML>\n";
print "<html>\n<head><title>Rubrica degli indirizzi - Consultazione dati</title>\n";
print "<link rel=stylesheet type=\"text/css\" href=\"style.css\">\n</head>\n";
print "<h1>Rubrica degli indirizzi</h1>\n";
print "<h2>Consultazione dati</h2>\n";
use DBI;
$db = DBI->connect("dbi:mysql:dbname=marcodb", "marco", "marco") or die DBI::errstr;
$query = $db->prepare("select id, nome, cognome, email, tel, data_nascita from rubrica
where nome like '%$in{nome}%' and cognome like '%$in{cognome}%' and email like '%$in{email}%’
order by cognome, nome");
$query->execute();
if ($query->rows() == 0) {
print "<p>Nessun record selezionato.</p>";
} else {
print "<table>\n<tr><th>Nome</th><th>Cognome</th><th>E-mail</th><th>Telefono</th><th>Data di
nascita</th><th>Canc.</th></tr>\n";
for ($i=1; $i <= $query->rows(); $i++) {
($id, $nome, $cognome, $email, $tel, $data) = $query->fetchrow();
print "<tr><td>$nome</td><td>$cognome</td><td><a
href=\"mailto:$email\">$email</a></td><td>$tel</td><td>$data</td><td><a href=\"delete.cgi?id=$id\"
title=\"Elimina n. $id\">X</a></td></tr>\n";
}
print "</table>\n";
}
$query->finish();
$db->disconnect();
print "<p>Torna <a href=\"index.html\" title=\"Men&ugrave; principale\">men&ugrave; principale</a></p>\n";
print "</body>\n</html>\n";
Indirizzarioon-line:scriptCGIdicancellazionedeidati(delete.cgi)
#!/usr/local/bin/perl
require "cgi-lib.pl";
&ReadParse;
print "Content-Type: text/html\n\n";
print "<!DOCTYPE HTML>\n";
print "<html>\n<head><title>Rubrica degli indirizzi-Cancellazione dati-OK</title>\n";
print "<link rel=stylesheet type=\"text/css\" href=\"style.css\">\n</head>\n";
print "<h1>Rubrica degli indirizzi</h1>\n";
print "<h2>Cancellazione di un contatto</h2>\n";
use DBI;
$db = DBI->connect("dbi:mysql:dbname=marcodb", "marco", "marco") or die DBI::errstr;
$query = $db->prepare("delete from rubrica where id='$in{id}'");
$query->execute();
$query->finish();
$db->disconnect();
print "<p>Cancellazione del record n. $in{id} eseguita correttamente.</p>\n";
print "<p>Torna al <a href=\"index.html\" title=\"Men&ugrave;
principale\">men&ugrave; principale</a>.</p>\n";
print "</body>\n</html>\n";
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
25
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Indirizzarioon-line:Forminserimentodati(insert.html)
<!DOCTYPE HTML>
<html>
<head>
<title>Rubrica degli indirizzi - Inserimento dati</title>
<link rel=stylesheet type="text/css" href="style.css">
</head>
<body>
<h1>Rubrica degli indirizzi</h1>
<h2>Inserimento di un nuovo contatto</h2>
<form action="insert.cgi" method="GET">
<table>
<tr><th>Nome</th><td><input name="nome" type="text" size="20"></td></tr>
<tr><th>Cognome</th><td><input name = "cognome" type="text" size="30"></td></tr>
<tr><th>E-mail</th><td><input name = "mail" type="text" size="30"></td></tr>
<tr><th>Telefono</th><td><input name = "telefono" type="text" size="15"></td></tr>
<tr><th>Data di nascita</th><td><input name = "giorno" type="text" size="2">/
<input name="mese" type="text" size="2">/<input name="anno" type="text"
size="4"></td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="Salva">
<input type="reset" value="Ripristina"></td></tr>
</table>
</form>
</body>
</html>
Indirizzarioon-line:scriptCGIdiinserimentodati
#!/usr/local/bin/perl
require "cgi-lib.pl";
&ReadParse;
print "Content-Type:text/html\n\n";
print "<!DOCTYPEHTML>\n";
print "<html>\n<head><title>Rubricadegliindirizzi- Inserimentodati- OK</title>\n";
print "<linkrel=stylesheet type=\"text/css\"href=\"style.css\">\n</head>\n";
print "<h1>Rubricadegliindirizzi</h1>\n";
print "<h2>Inserimentodiunnuovocontatto</h2>\n";
use DBI;
$db =DBI->connect("dbi:mysql:dbname=marcodb","marco","marco")ordieDBI::errstr;
$query=$db->prepare("insert into rubrica(nome,cognome,email,tel,data_nascita)
values ('$in{nome}','$in{cognome}','$in{mail}','$in{telefono}','$in{anno}-$in{mese}-$in{giorno}')");
$query->execute();
$query->finish();
$db->disconnect();
print "<p>L'inserimentodeidatidi$in{nome}$in{cognome}&egrave;statoeseguitocorrettamente.</p>\n";
print "<p>Tornaal<ahref=\"index.html\"title=\"Men&ugrave;principale\">men&ugrave;principale</a>.
</p>\n";
print "</body>\n</html>\n";
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
26
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Indirizzarioon-line:fogliodistyle(style.css)
body {
padding: 0pt;
margin: 0pt;
}
p {
margin-left: 8pt;
}
h1 {
font-family: sans-serif;
font-size: 20pt;
color: white;
background: #E0E0E0;
display: block;
padding: 8pt;
margin: 0pt;
box-shadow: 0px -5px 5px #B0B0B0
inset;
}
h2 {
font-family: sans-serif;
font-size: 18pt;
display: block;
padding: 8pt;
color: green;
}
a {
text-decoration: none;
}
table {
margin-left: 8pt;
}
a:hover {
color: red;
}
form th {
text-align: right;
background: white;
border-bottom: none;
}
dt a {
text-decoration: none;
padding: 3pt;
color: green;
border: solid 2pt white;
}
form td {
border-bottom: none;
}
dt a:hover {
background: #EEFFEE;
color: green;
border: solid 2pt green;
}
th {
background: #EEFFEE;
border-bottom: 3pt solid green;
padding: 3pt;
}
dt {
font-weight: bold;
font-family: sans-serif;
padding: 5pt;
}
td {
border-bottom: 1pt solid green;
padding: 3pt;
}
dd {
padding-bottom: 20pt;
}
IllinguaggioJava,l’ambientedisviluppoediesecuzione
•
•
•
•
Java èunlinguaggioObjectOriented moltodiffusoapartiredaglianni‘90
Èunodeilinguaggipiùdiffusiperlosviluppodiapplicazioniwebbased eperdispositivi
mobili
IllinguaggioJavaèindipendentedallapiattaformasucuivieneeseguito
L’indipendenzadallapiattaformavienerealizzatamediantelaJavaVirtualMachine,un
ambientediesecuzioneperiprogrammiJavachefornisceun’astrazionedelcomputeredi
alcunideiservizidelsistemaoperativo:inquestomodoilprogrammasfruttaleAPIdella
JVMenonquelledelsistemaoperativoospite
SistemaOperativo
JVM– JavaVirtualMachine
ProgrammaJava
•
•
JDK (JavaDevelopmentKit)èl’ambientedisviluppoperJava:ilcompilatorejavac traduceil
sorgenteJavainbytecode,unasortadilinguaggiomacchinaperlaJVM
JRE (JavaRuntimeEnvironment)èl’ambientediesecuzione(laJVM)periprogrammiJava
codificatiinbytecode
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
27
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
JavaApplicationeJavaApplet
•
UnprogrammainlinguaggioJavaèunaJavaApplication:èeseguitasuuncomputermedianteuna
JavaVirtualMachinecheoffrel’ambientediesecuzionedelbytecode
nome.java
javac
nome.class
java
0011010101
sorgentein
linguaggioJava
compilatore
Java(JDK)
programmain
bytecode
ambientediesecuzione
Java(JRE)
processoeseguito
dallaJVM
•
UnaJavaApplicationpuòimplementareun’interfacciagrafica(GUI)indipendente
dall’interfacciadelsistemaoperativoospite,medianteipackageSWINGeAWT(abstract
window toolkit)
•
UnApplet èunprogrammaJavaeseguitoall’internodelwebbrowsermedianteunplug-in
(componenteaggiuntivodelbrowser)cherealizzaunambientediesecuzioneeunaJVM
all’internodelbrowser
webbrowser
•
nome.java
javac
nome.class
sorgentein
linguaggioJava
compilatore
Java
programmain
bytecode
Java
plug-in
ambientediesecuzione
Java(interpretebytecode)
0011010101
processoeseguitodalla
JVMnelbrowser
ConunAppletvengonoimpegnatelerisorsedelclient;l’applethanumerosivincoliimpostidalle
politichedisicurezzadelbrowseredellaJVMrealizzatacomeplug-in
JEE:JavaEnterpriseEdition
•
•
•
JEE (JavaEnterpriseEdition)èunaspecificaapertaperlarealizzazionediun’architetturaper
applicazioniwebbasatesullinguaggioJavaesuunaseriedicomponentisoftwarerese
disponibiliallewebapplication resedisponibilinell’ambitodell’architettura
L’architetturaèbasatasuunApplicationServerJEEcherendedisponibililecomponentiJEE
efornisceunambientediesecuzioneperleapplicazioniJavasviluppatesecondolaspecifica
LecomponentiJEEsonoditretipi
1. Componentiweb:Servlet eJSP,MVC(ModelView Controller,unaspecificaperl’implementazione
dellapartedifront-end dell’applicazione),JSF(JavaServerFaces),ecc.
2. Componentienterprise:EJB(EnterpriseJavaBeans),JMS(JavaMessageService),JNDI(Java
Naming andDirectoryInterface),ecc.
3. Componentiperl’interazioneconildatabase:JDBC(JavaDatabaseConnectivity),JavaTransaction
API,JavaPersistence API,ecc.
•
•
•
EsistononumerosiprodottidimercatooopensourceditipoApplicationServerJEE(es.:
Glassfish,JBoss,IBMWebSphere,ecc.)
AdeccezionedellecomponentiEnterpriseunawebapplication Javapuòessereresa
disponibileanchetramiteunWebServerJavaEnabled (es.:ApacheTomcat)
GliApplicationServerJEEediWebServerJavaEnabled implementanoilprotocolloHTTP
offrendodelleclassidioggettialleapplicazioniJavaperricevereidatiininputerestituirein
outputunapaginacodificatainHTML(alparidiquantooffertodaCGI)
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
28
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
JEE:JavaEnterpriseEdition
•
•
IduetipidiprogrammaJavaperlarealizzazionediunawebapplication sullabasedella
specificaJEEsonoleServlet eleJSP
Servlet
– èunprogrammaJavachevienecompilatoinbytecode dall’ApplicationServerJEElaprimavoltache
vieneeseguito
– sfruttaappositioggettiemetodimessiadisposizionedall’ApplicationServerJEEperricevereidati
passatitramiteimetodiGEToPOSTdiHTTP
– difattoèl’equivalentediunprogrammaCGInelcontestoJEE
•
JSP(JavaServerPages)
– sipresentacomeunapaginaHTMLcontenentedeitag specialichedelimitanoistruzioniscrittein
linguaggioJava
– lapaginaJSPvienecompilataetrasformatanelbytecode diunservlet laprimavoltacheviene
richiamatadalbrowserdiunutente
– anchelapaginaJSPsfruttaappositioggettiemetodimessiadisposizionedall’ApplicationServerJEE
perricevereidatipassatitramiteimetodiGEToPOSTdiHTTP
•
RispettoadunascriptCGIunprogrammaJEE
– èmoltopiùefficienteperchécompilatoinbytecode
– èpiùefficienteemenoonerosointerminidirisorsedelsistemaoperativoperchénonvieneaperto
unprocessoperciascunachiamataalprogramma(comeavvieneperiCGI)
– èportabiledaunapiattaformaadun’altra(anchesusistemioperatividiversi)
•
Servlet eJSPnonusanoAWTeSWING,maHTMLperprodurrel’interfacciaconl’utente
JavaWebApplication
Sistemaoperativoserver
JavaApplicationServer/WebServerJavaEnabled
JavaVirtualMachine
JavaWebApplicationA
HTML
GIF/
JPEG
CSS
JSP
Java
Beans
JavaWebApplicationB
HTML
Servlet
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
GIF/
JPEG
CSS
JSP
Java
Beans
Servlet
29
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
JavaServlet
•
•
•
UnaservletèunaclasseJavaeseguibiledaunWebServerJavaEnabled,ossiadotatodiuna
componentedenominataservletcontainer
UnsservletèunprogrammapubblicatoinretedalWebServercomeunaqualsiasialtra
risorsaweb(unapaginaHTML,un’immagine,unoscriptCGI,ecc.):ancheunsservletè
identificatodaunaspecificaURL
LeservletoperanocomegliscriptCGIinunamodalitàrequest/response:
– ilclient(browser)dell’utentenefarichiestatramitelaURLassociata
– ilserverattivalaservletelaesegue
– ilservernerestituisceilrisultato,ciòcheilserverrestituiscecome“output”,comecontenutodella
risorsa(es.:formattatoinHTML)echiudelaconnessione
•
•
•
LeservletAPIdiJavapermettonodiprogrammareunaservletinmanieracompletamente
indipendentedallecaratteristichedelserver,delclientedelprotocolloditrasferimento
IlcodicedelprogrammaservletènormalecodiceJava:puòusaretuttelelibrerieeleutility
dellinguaggio,tracuilaconnessioneaDBMStramiteJDBC,l’usodiXMLtramiteJAXP,ecc.
LeservletsostituisconoiclassiciscriptCGIfornendoungradodisicurezzamaggiore,eun
livellodiastrazionesuperioreperilprogrammatore
LeslidesuJavaServletsonotratteinpartedalledispensedelprof.GiuseppeDellaPenna
delDipartimentodiInformaticadell’UniversitàdegliStudidell’Aquila(http://www.di.univaq.it/gdellape/)
JavaServlet eWebApplications
•
•
UnaJavaWebApplicationèuninsiemediservlet,JSP,pagineHTML,immagini,filedistile,
librerie(package)Javaraccoltiinunadirectorydelwebapplication server
IfilechecompongonolaJavaWebApplicationdevonoessereorganizzatiinsottodirectory
specifiche inmodotaledaconsentirealserverdiaccedereallerisorsepubblicate
nell’ambitodellawebapplication:
– LasottodirectoryWEB-INF,contienealcunifilediconfigurazione,tracuiilwebapplication
deployment descriptor (web.xml)
– LasottodirectoryWEB-INF/classes,contieneleclassiJavadell’applicazione,compreseleservlet;
secondoleconvenzioniJava,lesingoleclassiandrannoposteall’internodiunalberodidirectory
corrispondentealloropackage
– LasottodirectoryWEB-INF/lib,contienelelibrerieJARnecessarieall’applicazione,comprese
quellediterzeparti,comeidriverJDBC
– Tuttelealtresottodirectorydelcontesto,compresalastessaroot directory,conterrannonormali
filecomepagineHTML,foglidistile,immaginiopagineJSP
•
•
SpessoperlapubblicazionediunaJavaWebApplicationsiutilizzaraccoglieretuttiifileele
sottodirectorydell’applicazioneinunfileditipoWAR (WebArchive):vienepoieseguitoil
deploy delWARsull’ApplicationServercheeseguiràl’estrazionedeifiledalWARelaloro
collocazionenellasottodirectorycheidentificailcontesto
IlfileWARspessovieneprodottomedianteunambientedisviluppoIDE (Integrated
DevelopmentEnvironment)comeEclipse oNetBeans
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
30
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
JavaServlet eWebApplications
•
•
•
•
PerrendereunaclasseJavadisponibilecomerisorsaditiposervlet,ènecessario
configurarnelecaratteristichetramiteunfiledettowebapplicationdeploymentdescriptor
Questofile,denominatoweb.xmlecodificatoinXML,deveesserepostonelladirectory
WEB-INFdell’applicazione
<?xmlversion="1.0"encoding="ISO-8859-1"?>
Ciascunaservletèconfiguratainun
<!DOCTYPEweb-app PUBLIC"-//SunMicrosystems,
elemento<servlet> distinto;
l’elemento<servlet-class> deve Inc.//DTDWebApplication2.3//EN”
"http://java.sun.com/dtd/web-app_2_3.dtd”>
contenereilnomecompletodella
<web-app>
classecheimplementalaservlet
<display-name>ProgettoWeb</display-name>
Ènecessariomappareciascunaservlet <description>Blablabla...</description>
<servlet>
suunaURLtramitel’elemento
<servlet-name>Servlet1</servlet-name>
<servlet-mapping>
<description>ImplementalafunzioneY</description>
Lacomponente<url-pattern>
<servlet-class>org.iw.project.class1</servlet-class>
specificataandràacomporrelaURL
</servlet>
perlaservletnelseguentemodo:
<servlet-mapping>
http://indirizzo/contesto/urlpattern
<servlet-name>Servlet1</servlet-name>
<url-pattern>/funzione1</url-pattern>
</servlet-mapping>
</web-app>
JavaServlet
•
•
Allabasedell’implementazionediunaservletc’èl’interfacciaServlet,cheèimplementata
daunaseriediclassibasecomeHttpServlet;tutteleservletchevengonocreatesono
derivate(extends)daquest’ultima
LealtredueclassibaseperlacreazionediunaservletsonoServletRequeste
ServletResponse
– Un’istanzadiServletRequestvienepassatadalcontestoallaservletquandovieneinvocato,e
contienetutteleinformazioniinerentilarichiestaeffettuatadalclient:questecomprendono,ad
esempio,iparametriGETePOSTinviatidalclient,levariabilidiambientedelserver,gliheadereil
payloaddellarichiestaHTTP
– Un’istanzadiServletResponsevienepassataallaservletquandosirichiededirestituireun
contenutodainviarealclient;imetodidiquestaclassepermettonodiscriveresuunostreamche
verràpoiindirizzatoalclient,modificaregliheaderdellarispostaHTTP,ecc.
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
31
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
CiclodivitadiunaServlet Java
•
Ilciclodivitadiunaservletèscanditodaunaseriedichiamate,effettuatedalcontainer,a
particolarimetodidell’interfacciaServlet
1. Inizializzazione:quandoilcontainercaricalaservlet,chiamailsuometodoinit.Tipicamente
questometodovieneusatoperstabilireconnessioniadatabaseepreparareilcontestoperle
richiestesuccessive.Asecondadell’impostazionedelcontestoe/odelcontenitore,laservletpuò
esserecaricataimmediatamenteall’avviodelserver,adognirichiesta,ecc.
2. Servizio.Lerichiestedeiclientvengonogestitedalcontainertramitechiamatealmetodoservice.
Richiesteconcorrenticorrispondonoaesecuzionidiquestometodointhreaddistinti.Ilmetodo
servicericevelerichiestedell’utentesottoformadiunaServletRequesteinvialarisposta
tramiteunaServletResponse
3. Finalizzazione.Quandoilcontainerdecidedirimuoverelaservlet,chiamailsuometododestroy.
Quest’ultimovienesolitamenteutilizzatoperchiudereconnessioniadatabase,oscaricarealtre
risorsepersistentiattivatedalmetodoinit.
Ènecessariosovrascrivereilmetododestroysoloseesistonoeffettivamenteoperazionidafare
primadelladistruzionedellaservlet
•
LaclasseHttpServletspecializzaquestosistemaperlacomunicazioneHTTP,fornendoin
particolareduemetodi:doGetedoPost,corrispondentialleduerequestpiùcomuniin
HTTP.IlmetodoservicedelleclasseHTTPServletprovvedeautomaticamenteasmistare
lerichiestealmetodoopportuno
CiclodivitadiunServlet Java
•
IlJavaApplicationServerinvocaalcunimetodistandardimplementatidallaservlet inalcuni
momentispecificidelsuociclodivita:
– init(...):ilmetodovieneinvocatounasolavoltaquandol’applicazioneJavavieneavviataperla
primavolta(inizializzazione);
– service(...):ilmetodovieneinvocatoognivoltacheilJavaApplicationServerriceveuna
richiestadalclientperlaURLcorrispondenteallaservlet;
– doGet(...):èilmetodoutilizzatopergestirelarichiestaHTTPmedianteicomandiGETeHEAD;
– doPost(...):èilmetodoutilizzatopergestirelarichiesta
Java Application Server
HTTPmedianteilcomandoPOST;
(servlet container)
– destroy(...):èilmetodoinvocatounasolavoltadal
JavaApplicationServerquandovieneterminatalaweb
init(…)
service(…) destroy(…)
application;concludeilciclodivitadellaservlet
1
init
service
2
3
4
destroy
Web Server
inizializzazione
chiamata
dal client
interruzione
1
2
3
4
Web Browser
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
32
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
LaclasseHttpServlet
•
•
Unaservletestendelaclassejavax.servlet.http.HttpServlet
PergestirelerichiesteHTTP,sisovrascrivonoopportunamenteimetodicorrispondenti:in
questoesempio,ilmetododoGetverràchiamatopergestirelerichiesteHTTPGET.
package org.pippo.project;
import javax.servlet.*;
import javax.servlet.http.*;
publicclass pippo extends HttpServlet {
publicString getServletInfo(){
return “Servlet diesempio,versione1.0”;
}
publicvoid doGet(HttpServletRequest in,HttpServletResponse out){
//...
}
}
InizializzazionedelServlet
•
•
Ilmetodoinit,dopoaverchiamatolostessometododellaclassesuperiore,puòprocedere
conl’inizializzazionedellaservlet
Secisonoproblemidiinizializzazione,vienegenerataunaServletException
package org.pippo.project;
import javax.servlet.*;
import javax.servlet.http.*;
publicclass pippo extends HttpServlet {
privateint parameter1;
publicvoid init(ServletConfig c)throws ServletException {
super.init(c);
parameter1=1;
}
publicString getServletInfo(){
return “Servlet diesempio,versione1.0”;
}
}
publicvoid doGet(HttpServletRequest in,HttpServletResponse out){
//...
}
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
33
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Acquisirelarichiestadelclient
•
•
•
•
ImetodidoGetedoPostpossonoleggereiparametriinterpretatidellarichiestatramite
getParameter()egetParameterValues()
doGetpuòleggerelastringadiqueryinmanierarawchiamandogetQueryString()
doPostpuòleggereilpayloaddelmessaggioinmanierarawtramiteglistreamrestituitida
getReader()(testuale)e
package org.pippo.project;
getInputStream()(binario)
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
publicclass pippo extends HttpServlet {
...
publicvoid doGet(HttpServletRequest in,HttpServletResponse out){
String nome=in.getParameter(“nominativo”);
}
}
publicvoid doPost(HttpServletRequest in,HttpServletResponse out){
try {
Reader r =in.getReader();
}catch(Exception e){
e.printStackTrace();
}
}
...
Inviarelarispostaalclient
•
L’oggettoHttpServletResponse fornitoatuttiimetodidiserviziopermettedicostruirela
rispostadainviarealclient
– IlmetodosetContentType(String) permettedidichiarareiltipoMIMErestituitodallaservlet (ad
esempio“text/html”)
– IlmetodosetHeader(String,String) permettediaggiungereheaders allarisposta
– IlmetodosendRedirect(String) permettedireindirizzareilbrowserversounanuovaURL
– ImetodigetWriter() egetOutputStream() permettonodiaprireuncanale,testualeo
binario,sucuiscrivereilcontenutodellarisposta;vannochiamatidopoaver(eventualmente)
impostatoilcontent type eglialtriheader
– Altrimetodipermettonodigestire,adesempio,icookie
publicvoid doGet(HttpServletRequest in,HttpServletResponse out){
String nome=in.getParameter(“nominativo”);
out.setContentType(“text/html”);
try {
Writer w =out.getWriter();
w.write(”<html><body><p>Ciao”+nome+“</p></body></html>”);
}catch(Exception e){
e.printStackTrace();
}
}
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
34
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
JavaServerPages
•
•
LeJavaServerPages (JSP)semplificanoilprocessodicostruzionedisitiwebpermettendo
l’inclusionedicontenutidinamiciel’interazioneconleclassiJavacheincapsulanolalogicadi
businesschestaallabasediunawebapplication
LeJSPsonocostituitedaunacombinazioneditestoetag:
– iltesto (eitag HTML)rappresentailcontenutoinformativodiunapaginaweb
– itag JSPinvecepartecipanoallacostruzionedellepaginedinamicheproducendoicontenuti
medianteistruzionidiprogrammainlinguaggioJava
•
•
•
QuandounaJavaServerPagevienerichiesta,ilcontainerJSPprovvedeaconvertirlainuna
servlet,compilarlo equindieseguirelaservlet perelaborarelarichiestaHTTP
Laconversioneavvienesoltantoneicasiincuiilsorgentedellapaginahasubitomodifiche
rispettoall’ultimaconversioneeffettuatadalcontainer
Inquestomodosiriduconoitempidielaborazionedellerichiesteesiottieneunincremento
generaledelleprestazioni
JavaServerPages
Itag JSPsidividonoinquattrotipologie:
1. direttive:servonoacomunicarealcontainerJSPinformazionisullapaginautiliperilprocessodi
traduzioneinunservlet
<%@ tag attributo1=“valore1”attributo2=“valore2”...%>
es.: <%@ page language=“java” contentType=“text/html” %>
<%@ include file=“...” %>
<%@ taglib uri=“...” prefix=“...” %>
2. script:includonodelleistruzionenellinguaggiodiscripting associatoallapagina(Java);inquesto
tipoditag sonocontenuteleistruzionicheimplementanoletipichestrutturealgoritmichedi
sequenza,condizioneeiterazione,conl’usodivariabili,oggettiemetodi
dichiarazioni:<%! ...dichiarazionedivariabiliemetodipertutteleistanzedellapagina...%>
espressioni:<%= espressioneinoutput%>
scriptlet:<% ...istruzioniinlinguaggioJava...%>
3. commenti:sonousatiperdescriverelalogicaconcuièstataprogettatalaJSP
commenti:<%-- commentoalcodiceJSP--%>
4. action:supportanodiversicomportamentiepossonotrasferireilcontrolloaivaricomponentidella
webapplication,comeservlet,Javabeans oaltreJavaServerPages
<jsp:tag attributo=“valore”/>
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
35
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
JavaServerPages
•
IlmotoreJSPdell’ApplicationServermetteimplicitamenteadisposizionedelprogrammatore
deglioggettiJavachepossonoessereutilizzatinellepagineJSPsenzalanecessitàdi
dichiararli
•
request:èl’oggettochecontieneleintestazionidellarichiestaHTTPequindianchei
parametripassatiallapaginaJSPattraversoimetodiGEToPOST
– IlmetodogetParameter(“X”) dell’oggettorequest consentediacquisireilparametrofornitoalla
paginaJSPidentificatoconilnome“X”(adesempioilvalorediuncampodiunaform)
– Es.:<p>Ciao <%=request.getParameter(“nome”)%></p>
•
response:èl’oggettochericevel’outputprodottodallapaginaJSPelorestituisce
all’application serverperl’invioaclient
– L’oggettovieneutilizzatoimplicitamenteattraversol’oggettoout
– Es.:<% out.println(“Importo:” + valore); %>
– oppure:<%=valore%>
JavaServerPages:unesempioelementare
ApplicazionewebJSPperilcalcolodeiprimin multiplidik
<!DOCTYPE HTML>
<html>
<head>
<title>Calcolo dei multipli</title>
</head>
<body>
<h1>Calcolo dei multipli di un intero</h1>
<p>Inserisci l'intero k e il numero n di
multipli che desideri calcolare.</p>
<form action="multipli.jsp" method="GET">
<p>k: <input type="text" name="k" size="3">
n: <input type="text" name="n" size="3">
<input type="submit" value="Ok"></p>
</form>
</body>
</html>
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
36
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
JavaServerPages:unesempioelementare
ApplicazionewebJSPperilcalcolodeiprimin multiplidik
<!DOCTYPE HTML>
<%-- multipli.jsp:
calcola i primi n multipli di k --%>
<%
int n, k, m, i;
n = Integer.parseInt(request.getParameter("n"));
k = Integer.parseInt(request.getParameter("k"));
%>
<html>
<head>
<title>Multipli di un intero</title>
</head>
<body>
<h1>Primi <%=n%> multipli di <%=k%></h1>
<%
for (i=1; i<=n; i++) {
m = k*i;
out.println("<p>"+k+" &times; "+i+" = "+m+"</p>");
}
%>
</body>
</html>
Programmazione“latoclient”eWeb2.0
•
Ilmodelloarchitetturaleefunzionaledelleapplicazioniweb(JEE,CGIorealizzateconaltre
tecnologieeframework)èbasatosulparadigma“request/response”:
– ognirispostacostruitadinamicamentedalservermedianteunprogrammaCGIounprogramma
Javaafrontediunarichiestadelclientcostituisceunapaginadellawebapplication
– L’utentepuòselezionareunsemplicelinkocompilareunaform estremamentecomplessa,
costituitadadecineocentinaiadicampidiinput,inognicasoilserverraccoglietuttiidatidella
richiesta,elaboraunarispostaelainviaalclientchedeveeseguireilrendering diunapaginaweb
completamentenuovaedifferentedallapaginaprecedente
•
•
Perquantolepaginewebsianogradevoliebasatesuunarappresentazionegraficao
un’impaginazionetipograficacomplessadelleinformazioni,questomodellonondifferisce
moltodaquelloutilizzatonellemascherealfanumerichetipichedelleapplicazioni
centralizzatesuunhostosuunmainframe
Leapplicazionidotatediun’interfacciautentegrafica(leapplicazioniperMicrosoftWindows
operX11inambienteUNIX)cihannoinveceabituatoadunadiversaepiùcomplessa
interazionetral’utenteedilprogramma:adogniinterazionedell’utenteconl’interfaccia
corrispondeunareazionedapartedelprogrammachesimanifestaconunavariazionedi
alcunepartidelcontenutodellaschermatachestiamoutilizzando
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
37
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Programmazione“latoclient”eWeb2.0
•
•
•
Ilcosiddetto“Web2.0”introduceunlivellodicomplessitàsuperioresullewebapplication
perrealizzareun’interazioneconl’utenteparagonabileaquelladelleapplicazioniclient
ConletecnologieintrodotteconilWeb2.0sigettanolebasiancheperlarealizzazionedi
applicazioniperilmondo“mobile”:nonsempliciapplicazioniwebfruibilimedianteilweb
browserpresentesutablet esmartphone,mavereeproprieapplicazionicheoperanosul
sistemaoperativodeldevice mobile
Glielementichesonoallabasediquestosaltoinavantinellaprogettazionediapplicazioni
webbased sonosintetizzatineiseguentipunti:
– capacitàdelwebbrowserdieseguiredelcodicediunprogrammainlinguaggioJavascript
– possibilitàdioperaresuglielementidellapaginaHTMLdaprogrammaJavascript caricatonella
paginastessa,indirizzandoglielementipresentiall’internodelDOMdeldocumento,identificaticon
nomiunivoci(Dynamic HTML)
– possibilitàdistabilireundialogotrailclienteilservernell’ambitodellastessapaginaattraverso
procedureJavascript inseritenellapaginastessa(AJAX)
– mediantel’usodiCSScombinatoconJavascript sipuòottenerelacostruzionediinterfacceutente
responsive,ossiaingradodiadattarsialladimensioneeallecaratteristichedeldevice chelesta
visualizzandoall’utente
Javascript
•
•
•
ÈunlinguaggioObjectOriented lacuisintassiricordaquelladiJava
Èsupportatodauninterpreteedaunambientediesecuzionepresenteinquasituttiiweb
browser
IlcodicediunprogrammaJavascript puòessereinseritoinunapaginaHTML:
nell’intestazionedellapagina,inmodalità“inline”all’internodeitag dellapaginaoinunfile
separatorichiamatodauntag postonell’intestazionedellapagina
•
IlbrowsercreaunambientediesecuzionedelprogrammaJavascript conunnamespace
legatoalDOMdeldocumentoHTMLpercollegarel’esecuzionedellefunzioniJavascript agli
eventiacuisonosensibiliglioggetti(componentidelDOM)checompongonoildocumento
stesso
•
L’oneredieseguirelaproceduraJavascript ricadesulclient:èlaCPUdelclientcheè
impegnatanell’elaborazioneenelcalcolo,èlamemoriadelclientchevieneimpegnataper
gestirelevariabili,lestrutturedatieglioggettiutilizzatidalprogramma
•
L’ambientediesecuzioneJavascript internoalbrowserimponeuninsiemedivincoli
perragionidisicurezza:conilprogrammaJavascript nonèpossibileutilizzare
pienamentelerisorsedelclient(es.:nonèpossibilescrivereunfilesulcliento
accedereadunDBMSsulclient)
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
38
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
Javascript:unesempioelementare
ApplicazionewebJavascript perilcalcolodei
primin multiplidik
<!DOCTYPE HTML>
<html>
<head>
<title>Prova in Javascript</title>
<script language="Javascript" src="multipli.js">
</script>
</head>
<body>
<h1>Multipli</h1>
<fieldset>
<legend>Input</legend>
k: <input id="k"> n: <input id="n">
<input type="button" value="Calcola"
onClick="multipli();">
<input type="button" value="Reset" onClick="azzera();">
</fieldset>
<fieldset>
<legend>Output</legend>
<div id="output">Inserisci la base <var>k</var> e il
numero
di multipli <var>n</var></div>
</fieldset>
</body>
Javascript:unesempioelementare
ApplicazionewebJavascript perilcalcolodei
primin multiplidik
function multipli() {
var i, m, n, k, s;
n = document.getElementById("n").value;
k = document.getElementById("k").value;
if (!n) {
alert("ERRORE: inserire un valore per n!");
} else if (!k) {
alert("ERRORE: inserire un valore per k!");
} else {
s = "";
for (i=1; i<=n; i++) {
m = k*i;
s = s + "<p>" + k + " &times; " + i + " = " + m +
"</p>";
}
document.getElementById("output").innerHTML = s;
}
}
function azzera() {
document.getElementById("output").innerHTML = "Inserisci
la base <var>k</var> e il numero di multipli <var>n</var>";
}
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
39
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
AJAXeDynamic HTML
•
•
•
•
•
•
•
AJAX (Asynchronous JavaScriptandXML),èunatecnicadisvilupposoftwareperla
realizzazionediapplicazioniwebinterattive
LosviluppodiapplicazioniwebconAJAXsibasasuunoscambiodidatiinbackgroundfra
webbrowserewebserver,checonsentel'aggiornamentodinamicodiunapaginawebsenza
esplicitoricaricamentodellapaginastessadapartedell'utente
AJAXèasincrono:idatiextrasonorichiestialserverecaricatiinbackgroundsenza
interferireconilcomportamentodellapaginaesistente
IlformatoperloscambiodidatitrailclienteilserverèspessoJSON (JavaScriptObject
Notation),cheoffreunformatostandardmoltosempliceperrappresentaresequenzedi
coppieditipo“chiave:valore”,incuiil“valore”puòasuavoltaessereunacollezionedi
coppie“chiave:valore”
TipicamentelefunzionirichiamatesonoscritteconillinguaggioJavaScriptesonopresenti
nellapaginaHTML
JQuery èoggilapiùfamosalibreriaJavascript cheimplementaAJAX,maanchemoltialtri
aspettidelWeb2.0;èunalibreriadifunzioniprogettatepersemplificarelacostruzionedi
paginewebdinamiche,conunagestionedeglieventimoltoefficace
Èsupportatadanumerosissimiframeworkdisviluppo(Microsoft.net,JEE,ecc.)
Riferimenti
① W3Consortium:http://www.w3.org
② W3Schools,“HTML5Tutorial”:http://www.w3schools.com/html/default.asp
③ W3Schools,“CSSTutorial”:http://www.w3schools.com/css/default.asp
④ TimBerners-Lee“StyleGuideforonlinehypertext”:http://www.w3.org/Provider/Style/
⑤ KevinWerbach,“TheBareBones GuidetoHTML”:http://werbach.com/barebones/(initaliano:
http://werbach.com/barebones/it/it_barebone.html)
⑥ JudyBishop,“JavaGently – CorsoIntroduttivo”,SecondaEdizione,AddisonWesley
⑦ MarcoBertacca,AndreaGuidi,“IntroduzioneaJava”,SecondaEdizione,McGraw-Hill
⑧ LarryWall,“ProgrammingPerl”,O’Reilly
⑨ AltrerisorsedisponibilisuInternet:
–
–
–
–
http://www.perl.org
http://www.perl.com
http://cgi-lib.berkeley.edu/(CGI-lib homepage,pressoUniversity ofCaliforniaat Berkeley)
http://www.aquilante.net/perl/
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
40
UniversitàdegliStudiRomaTre- CorsodiLaureainMatematica
a.a.2016/2017
TimBerners-Lee
SirTimothyJohnBerners-LeeèunodegliinventoridelWorldWideWeb,autoredelprimoserverHTTPedelprimoclientperaccederearisorsedistribuite in
retemedianteilprotocolloHTTP;nellafotoèritrattoneglianni‘90accantoalmonitordellasuaworkstationNeXT alCERNdiGinevra,chesuccessivamenteha
abbandonatopertrasferirsialprestigiosoLaboratoriodiComputerSciencedelMITdiBoston
M.Liverani- DispensedelcorsoIN530- Sistemiperl'elaborazionedelleinformazioni
41