vuoi
o PayPal
tutte le volte che vuoi
Gli attributi che si possono usare sono:
- ALIGN=”LEFT”|”CENTER”|”RIGHT”, che serve per allineare il contenuto.
<DIV> è un grande blocco che contiene le istruzioni che vanno applicate a ciò che c’è all’interno. In
questo caso c’è ALIGN=”JUSTIFY”, quindi i paragrafi all’interno saranno allineati al bordo di destra.
<BR/> permette di andare a capo.
<OL>… </OL> permette di creare una lista. Dentro OL ci vuole:
- <LI>…</LI> sono gli elementi di testo che compongono la lista. A sua volta ci può essere
all’interno <UL>…</UL> che permette di avere un’altra lista all’interno della lista.
<A HREF>. “A” sta per anchor, serve per introdurre i link grazie ad <HREF>…</HREF>.
<HREF>…</HREF> permette di inserire un URL (link) cliccabile.
<IMG>…</IMG> permette di inserire delle immagini. Come attributi possiamo trovare:
- WIDTH=”width”: indica lo spessore dell’immagine.
- HEIGHT=”height”: indica l’altezza dell’immagine.
- SRC=”location”: indica il link dell’immagine.
- BORDER=”borderwidth”
- TITLE=”text”: presenta un testo quando passiamo il mouse sull’immagine.
Esempio (pagina con tabelle):
L’elemento <TABLE>…</TABLE> permette di creare una tabella.
<TR> sta per “table row” e permette di inserire le righe in una tabella. La tabella va scandita riga
per riga, quindi con <TH> (heading) e <TD> (data) vado ad aggiungere gli altri elementi.
I due attributi che possiamo avere sono:
- <COLSPAN>=”number”: permette di espandersi su più colonne.
- <ROWSPAN>=”number”: permette di espandersi su più righe.
Altri attributi di <TABLE> che possiamo trovare sono:
- <CELLPADDING>=”value”
- <CELLSPACING>=”value”
CONSIGLIO: Mettere sempre il valore a 0. Sono i margini di garanzia della cella rispetto al testo.
Esercizio:
Esempio (pagina con forms):
<FORM>…</FORM> permette di inserire all’interno della pagina dei comandi di input, checkbox,
caselle, menù a tendina, ecc.
Gli attributi di <FORM> sono:
- METHOD=”POST”
! Se uso “GET” i parametri che inserisco compaiono anche nella URL.
- ACTION=”link”: indirizzo della pagina a cui viene trasmessa l’informazione.
<INPUT> permette di inserire caselle di input, checkbox, radio, bottoni e presenta diversi attributi:
| ∗
| ∗
- TYPE={ | ∗
- NAME: nome del parametro che formano. * *
- SIZE: dimensione del controllo di input. *
- MAXLENGTH: massimo numero di caratteri utilizzabili. *
- VALUE: attributo che preistanza il form. Ciò che appare prima di inserire i propri valori. * * *
- CHECKED=”CHECKED” preistanza i checkbox e radio. *
- <SELECT>: utile per i menù a tendina. Gli attributi sono:
- NAME
- <OPTION>Stringa</OPTION> permette di inserire delle opzioni.
- VALUE
- SELECTED=”SELECTED” per preistanziare.
- MULTIPLE=”MULTIPLE” fa si che si possa fare più di una scelta
- SIZE=”value” di solito è 1 (in questo caso si comporta come menu a tendina). Se > 1, viene
esposto il numero di scelte pari a quello indicato in quel numero.
- <TEXTAREA> permette di inserire un’area di testo. Attributi:
- NAME
- ROWS=”value” e COLS=”value” permette di definire le dimensioni dell’area.
- Per preistanziare bisogna: <TEXTAREA> preistanza </TEXTAREA>
Web Server/Application Server (pagine statiche e pagine dinamiche)
Le pagine statiche
Le pagine statiche presentano le seguenti caratteristiche:
- Il loro contenuto è fisso.
- Sono costituite da file memorizzati su un server.
- Ciascuna pagina può includere dei link allo scopo di richiamare altre pagine.
WebServer
È sostanzialmente una applicazione in esecuzione su un server che risponde alle richieste di un
browser fornendo in risposta delle pagine web.
Il contenuto dele pagine è immutabile ed essere verosimilmente sono rappresentate da file
memorizzati su un file system.
Application server
Un application server estende il concetto di WebServer, aggiungendo capacità di elaborazione
all’interno di un determinato ambiente.
Le pagine dinamiche
Le pagine dinamiche, una volta che siano state generate e trasmesse al browser, risultano del tutto
identiche a quelle statiche (linguaggio HTML).
Esse ovviamente non sono memorizzate nella forma in cui vengono trasmesse al browser, ma
vengono rigenerate ogni volta (con contenuti differenti) da appositi moduli di codice.
La forma sorgente con cui vengono salvate le pagine dinamiche dipende dalla tecnologia utilizzata.
Il programma può differenziare le pagine che genera in base alle seguenti informazioni:
- Valore dei parametri che vengono trasmessi dal browser insieme alla richiesta della pagina.
- Informazioni di stato accessibili all’interno del programma stesso.
Diagramma di navigazione
Il diagramma di navigazione rappresenta lo strumento per modellizzare il comportamento di una
applicazione web, e consente di progettare il modo in cui si possano concatenare correttamente i
contributi delle varie risorse.
Ogni quadrato (box) rappresenta una risorse disponibile sul server ed invocabile separatamente dal
browser.
Una risorsa è costituita da un modulo di codice in grado di generare l’output testuale (HTML) e/o di
eseguire azioni che modificano lo stato interno dell’applicazione
Ciascuna risorsa possiede uno o più link entranti che corrispondono ai suoi percorsi di attivazione.
Un link che collega due risorse rappresenta un possibile percorso di attivazione di una risorsa
target a partire da una risorsa caller. Tale link sottintende i parametri che devono essere passati dal
caller al target durante la richiesta.
A partire da ogni risorsa che abbia generato output HTML si dipartono tanti link quante sono le
possibili invocazioni di altre risorse a cui l’utente può arbitrariamente decidere di accedere.
A seguito della propria invocazione (richiesta) una risorsa potrà decidere di generare dell’output
(HTML), effettuare delle operazioni , oppure entrambe le cose.
L’output generato, le azioni intraprese e la stessa decisione di optare per uno dei due
comportamenti possono essere condizionate dinamicamente dai parametri passati e dai loro valori
oltre che dallo stato del sistema.
Se una risorsa non prevede di generare output dovrà delegare il proseguimento dell’elaborazione
della richiesta ad un’altra risorsa, e così via fino a che non venga effettivamente prodotto output.
La delega nell’elaborazione di una risorsa viene indicata sul diagramma tramite link tratteggiati.
Durante un’operazione di delega, alla risorsa target vengono passati sempre tutti i parametri
inizialmente trasmessi a seguito della richiesta iniziata dall’utente.
Sempre durante l’operazione di delega, alla risorsa target possono essere passati anche ulteriori
parametri che le varie risorse caller abbiano eventualmente aggiunto.
La necessità di separazione fra risorse che producono solo output (presentazione) e risorse che
eseguono solo azioni è dettata dall’obiettivo di massimizzare la loro modularità e riusabilità.
L’interazione con il server inizia sempre percorrendo un link che simboleggia l’invio di una richiesta
causata da una esplicita azione dell’utente.
L’interazione prosegue automaticamente attraverso una successione di risorse che si delegano
l’una con l’altra il compito di elaborare la richiesta iniziale e termina quanto nella successione di
risorse coinvolte se ne incontra nuovamente una di presentazione.
Se tra due pagine di presentazione che demarcano l’inizio e la fine dell’elaborazione di una
richiesta esiste più di un percorso, la scelta di quale intraprendere avviene su basi dinamiche.
Java Server Pages (JSP)
Come realizzare una pagina dinamica?
L’obiettivo è quello di generare una pagina in funzione di una richiesta, secondo il paradigma
request/reply.
Le JSP incapsulano il codice Java all’interno di HTML anziché fare il viceversa.
Una JSP è una normale pagina WEB che include dei costrutti (Elements) identificati da speciali
marcatori. Tali costrutti vengono interpretati dall’Application Server ogni volta che viene servita la
pagina e controllano la generazione delle parti di pagina che saranno distinte per ogni richiesta.
L’integrazione fra aspetti grafici e di presentazione elementi procedurali è molto semplificata.
Elementi sintattici:
• Template Data
Tutto ciò che non è un elemento sintattico JSP (non rientra nelle categorie successive) viene
trasmesso nella risposta senza nessuna elaborazione da parte del server.
• Directive Elements: <%@directive ...%>
Controllano il processo di traduzione della JSP, non generano direttamente alcun output.
Tipicamente vengono messe all’inizio della pagina.
Direttiva “page”: <%@ page page_directive_attr_list%>
La direttiva page fornisce informazioni utili per la compilazione della JSP ed influenza il contesto in
cui essa dovrà essere eseguita. Non interviene direttamente nella generazione di alcuni output.
Direttiva “taglib”: <%@ taglib uri=”taglibURI” prefix=”tagPrefix” %>
La direttiva taglib dichiara che la JSP fa uso al proprio interno di una Tag Library ed assegna un tag
prefix con cui verranno identificate le Custom Actions relative a tale libreria. Non interviene nella
generazione di nessun output.
Direttiva “include”: <%@ include file=”relativeFileSpec” %>
La direttiva include viene utilizzata al momento della traduzione per inserire, nel punto della pagina
in cui è situata, il contenuto presente in un altro file. Non interviene direttamente nella
generazione di alcun output.
Il contenuto del file incluso diventa parte integrante della JSP e può produrre output con le
medesime regole che si applicano ad essa.
L’estensione .jspf permette di frammentare le varie parti e riutilizzarle grazie alla direttiva include.
Esempio di utilizzo:
Guardare la lezione del 26/10/2020, 01:00:00
Passaggio di parametri
Expression Language: ${…}
Espressioni utilizzabili per definire i valori degli attributi (actions) e nel testo (template data). Si
usa in alternativa alla