AOT A O T Lab - unipr.it · 5 AOT LAB Ogni campo di input in un form ha: Un nome, definito...
Transcript of AOT A O T Lab - unipr.it · 5 AOT LAB Ogni campo di input in un form ha: Un nome, definito...
Agent and Object Technology LabDipartimento di Ingegneria dell’Informazione
Università degli Studi di Parma
AOTAOTLABLAB
Fondamenti di InformaticaFondamenti di InformaticaFondamenti di InformaticaFondamenti di Informatica
Applicazioni web
Michele Tomaiuolo
2
AOTAOTLABLAB
� Form e campi di input� Azione e metodo
� Coppie nome/valore
� Campi di input
� HTTP� Metodi, intestazioni e codici di stato
� Parametri e cookie
� Pagine web attive
Sommario
3
AOTAOTLABLAB
� Un form html è una sezione di documento checontiene� Testo normale e markup
� Elementi speciali chiamati controlli (checkbox, bottoniradio, menu ecc.)
� Etichette per questi controlli
� Gli utenti di solito “completano” questi controlli
� Inserimento testo, selezione voci di menu ecc.
� Poi il form viene sottomesso
� Eleborazione remota su web server
FormIntroduzione
4
AOTAOTLABLAB
� I form sono racchiusi dai tag <form> e </form>
� Il tag <form> ha
� Un attributo action – url a cui inviare i dati del form
� Un attributo method – metodo http da usare per sottomettere i dati del form (get o post in accordo alloscript sul server)
� <form action="http://www.myhost.com/myscript.cgi"
method="post">
FormAzione and metodo
5
AOTAOTLABLAB
� Ogni campo di input in un form ha:� Un nome, definito dall’attributo name del tag <input>, <select>, o <textarea>
� Un valore, che l’utente imposta immettendo testo o clickando col mouse
� I dati del form vengono sottomessi allo script sulserver come un insieme di coppie nome/valore
� Campi di testo vuoti sono inviati come una coppianome/valore, in cui il valore è una stringa vuota
� Checkbox e pulsanti radio non selezionati non vengonoproprio inviati
FormCoppie nome/valore
6
AOTAOTLABLAB
Form
Tag per i campi
� Ulteriori tag per definire campi di input
� Oltre a “normale” codice html
� <input> – Campi per l’immissione di testo,
checkbox, bottoni radio, o bottoni normali
� <select> – menu a discesa e box di selezione
� <textarea> – campi per limmissione di testo su
righe multiple
7
AOTAOTLABLAB
� Il tag input crea la maggior parte dei campi nei form
� Insieme di attributi variabile a seconda dell’attributo type
� Valori possibili per type
� text – campo normale per l’immissione di testo (default)
� password – identico a text, ma nasconde il testo inserito
� checkbox – checkbox, per semplici valori on/off
� radio – pulsante radio, per scegliere una di diverse opzioni
� submit – bottone per inviare i dati del form, quando inseriti tutti
� reset – buttone che riporta tutti i campi al valore iniziale
� image - come submit, ma mostra una immagine come bottone
� hidden – per ulteriori coppie nome/valore da inviare al server, ma non visualizzate
FormsIl tag input
8
AOTAOTLABLAB
� Attributi opzionali dei campi text e password� value – Valore di default per il campo� size – Dimensione visualizzata del campo� maxlength – Quantità di dati che si può inserire
� Attributi opzionali dei campi checkbox e radio� value – Valore che ha il campo quando è selezionato; default = "on"� checked – Se il campo per default è selezionato
� I campi submit e reset usano il valore (opz.) come etichetta
� Il campo image richiede un attributo src con la urldell’immagine da visualizzare� Supporta la maggior parte degli attributi del tag img
FormIl tag input
9
AOTAOTLABLAB
<form action="http://myhost.com/myscript.cgi" method="post">
<br />State: <input type="text" name="state" value="IT" size="2"
maxlength="2" />
<br />Password: <input type="password" name="password" />
<br /><input type="checkbox" name="moreinfo" value="yes"
checked="checked" />Send me more info.
<br />Select your gender below:
<br /><input type="radio" name="gender" value="F" />Female
<br /><input type="radio" name="gender" value="M" />Male
<br /><input type="submit" name="okbutton" value="OK, submit!"
/>
<br />
<input type="reset" value="Whoops - erase that" />
<input type="image" src="hand.gif" />
<input type="hidden" name="totalsofar" value="1290.65" />
</form>
FormEsempio con tag input
10
AOTAOTLABLAB
<form action="http://myhost.com/myscript.cgi" method="post"><br />State: <input type="text" name="state" value="IT" size="2"
maxlength="2" /><br />Password: <input type="password" name="password" /><br /><input type="checkbox" name="moreinfo" value="yes"
checked="checked" />Send me more info.<br />Select your gender below:<br /><input type="radio" name="gender" value="F" />Female<br /><input type="radio" name="gender" value="M" />Male<br /><input type="submit" name="okbutton" value="OK, submit!"
/><br /><input type="reset" value="Whoops - erase that" /><input type="image" src="hand.gif" /><input type="hidden" name="totalsofar" value="1290.65" /></form>
FormEsempio con tag input
11
AOTAOTLABLAB
Choose your favorite color:
<select name="favcolor">
<option>green</option>
<option>aquamarine</option>
<option selected="selected">emerald</option>
<option>turquoise</option>
<option>aqua</option>
<option value="green2">green</option>
<option value="green3">green</option>
</select>
FormIl tag select
12
AOTAOTLABLAB
� Il tag textarea crea aree per l’inserimento di testo su piùlinee, con barre di scorrimento
� Tutto ciò che si trova tra I tag di apertura e chiusuracostituisce il contenuto iniziale del campo
<textarea name="stuff" rows="5" cols="10">Enter stuff here</textarea>
FormIl tag textarea
13
AOTAOTLABLAB
� Protocollo di livello applicazione per sistemi informatividistribuiti, collaborativi e ipertestuali
� Usato nel World-Wide Web fin dal 1990� Semplice & efficiente
� Flessibile per i dati, supportandone molti tipi
� Senza connessione: una richiesta per ogni connessione
� Senza stato: lo stato non è conservato tra connessioni diverse
� Descritto in RFC 2616 (HTTP/1.1)� Tipi di richiesta che un browser web può inviare
� Tipi di risposta che un web server può fornire� Usa TCP/IP, ma si presume solo un livello di trasporto affidabile� Porta di default = 80
HttpHyper Text Transfer Protocol
14
AOTAOTLABLAB
� Http/0.9 – Prima versione del protocollo� Semplice protocollo per il trasferimento di dati grezzi su Internet
� Http/1.0 – Miglioramenti, definito in RFC 1945
� Messaggi in formato simile a quello Mime (e-mail)
� Meta-informazioni sui dati trasferiti
� Modificatori per il significato delle richeste/risposte
� Http/1.1 – Connessioni persistenti
� Una sola connessione per uno o più scambi richiesta/risposta
� Le connessioni possono essere chiuse per una serie di ragioni
HttpStoria
15
AOTAOTLABLAB
� Http è un protocollo di tipo richiesta/risposta
� Un client invia una richiesta al server, specificando:� Metodo, url, versione del protocollo
� Segue un messaggio di tipo mime contenente:� Modificatori di richiesta
� Informazioni sul client
� Possibile corpo della richiesta (es. dati form)
� Il server invia in risposta una riga di stato, con:� Versione del protocollo, codice di successo o errore
� Segue un messaggio di tipo mime contenente:� Informazioni sul server
� Meta-informazioni sulla entità (doc o altra risorsa richiesta)
� Possibile corpo per contenuto dell’entità
HttpClient e server
16
AOTAOTLABLAB
� Ogni messaggio http consiste di:� Una riga di apertura (start-line)
� Zero o più campi di intestazione (header)
� Una riga vuota che indica la fine dell’header
� Un possibile copro del messaggio (body)
� Campi header in formato generico RFC 822 (email)� general-, request-, response-, entity-header
� Corpo (se presente) per trasportare il contenuto dell’entità� Risorsa associata alla richiesta o risposta
generic-message: start-line
*(message-header CRLF)
CRLF
[message-body ]
start-line: Request-Line | Status-Line
HttpMessaggi
17
AOTAOTLABLAB
� Il metodo get significa:
Recupera qualsiasi informazione (in forma di entità) sia identificata dall’url della richiesta
� Se la url indica un processo di produzione dati, questi datisono restituiti come corpo della risposta
� Semantica modificata in get condizionale se tra gli header:
� If-Modified-Since, If-Unmodified-Since, ...
� Per evitare spreco di risorse di rete
HttpMetodo get
18
AOTAOTLABLAB
� Il metodo post copre diverse funzioni generali
� Annotazione di risorse esistenti
� Invio di messaggi a bulletin board, newsgroup, mailing list, o gruppidi articoli simili
� Aggiunta di dati ad un database
� Invio di un blocco di dati, come quelli presenti all’interno di un form, ad un processo che li gestisca
� La url di una richiesta post identifica la risorsa che gestiràl’entità acclusa� Processo che accetta dati
� Gateway per altri protocolli
� Entità separata che accetta annotazioni
HttpMetodo post
19
AOTAOTLABLAB
1. Il browser apre una connessione al computer e alla portaspecificati nella url desiderata
2. Il browser trasmette la parola “GET” seguita da unospazio, un percorso per la risorsa, un ritorno a capo
� Es. comando per chiedere la home page del server:
� GET /
3. Il server risponde con una riga di stato, intestazioni varie, una riga vuota e il contenuto del file richiesto
4. Il server poi chiude la connessione
Per ricevere immagini, video ecc.il client deve aprire altre connessioni:
una per ogni oggetto necessario
HttpConnessioni usa-e-getta
20
AOTAOTLABLAB
POST /beta.jsp HTTP/1.1
Referer: http://www.alpha.com/alpha.jsp (the address (URI) of
the resource from which the Request-URI was obtained)
Connection: Keep-Alive
User-Agent: Mozilla/4.61
Host: www.alpha.com:80
Cookie: name=value
Accept: image/gif, image/jpeg, */*
Accept-Language: en
If-modified-since: Mon, 10 Jul 2000 22:55:23 GMT
[blank line here]
selected-item=1234&action=show+details
GET /beta.jsp?selected-item=1234&action=show+details HTTP/1.1
Referer: http://www.alpha.com/alpha.jsp (the address (URI) of
the resource from which the Request-URI was obtained)
[...]
If-modified-since: Mon, 10 Jul 2000 22:55:23 GMT
[blank line here]
HttpEsempio di richiesta
21
AOTAOTLABLAB
HTTP/1.1 200 OK
Date: Fri, 12 Nov 2001 11:46:53 GMT
Server: Apache/1.3.3 (Unix)
Last-Modified: Mon, 12 Jul 2000 22:55:23 GMT
Accept-Ranges: bytes
Content-Length: 234
Content-Type: text/html
<html>
<head><title>Beta page</title></head>
<body>
<h1>Beta page</h1>...
HttpEsempio di risposta
22
AOTAOTLABLAB
� 1xx – Informational� Richiesta ricevuta, elaborazione in corso
� 2xx – Success
� Richiesta ricevuta, interpretata e accettata
� 3xx – Redirection
� Necessario intraprendere azioni ulteriori
� 4xx – Client Error
� Richiesta con sintassi scorretta o bloccata
� 400 – Richiesta scorretta; 401 – Non autorizzato; 402 – Richiestopagamento; 403 – Vietato; 404 – Non trovato
� 5xx - Server Error
� Il server non riesce a soddisfare una richiesta apparentemente valida
HttpCodici di stato
23
AOTAOTLABLAB
I cookie sono meccanismo generale
per memorizzare e recuperare informazioni
sul lato client di una connessione http
1. Quando un server invia una risposta, può inviare ancheinformazione di stato da memorizzare sul client
� Specificato del range di url per cui lo stato è valido
� Può essere specificata una scadenza
2. Per ogni futura richiesta fatta dal client in quel range, saràritrasmessa al server anche l’informazione di stato
HttpCookie
24
AOTAOTLABLAB
� Si può segnalare un cookie al client includendo un header Set-Cookie nella risposta http
� Set-Cookie: NAME=VALUE; expires=DATE;
path=PATH; domain=DOMAIN_NAME; secure
� Quando richiede una url, il browser la confrontacon tutti i cookie (con il rispettivo range di url)
� Per ciascun cookie che corrisponde, alla richiestahttp viene aggiunta una coppia chiave/valore
� Cookie: NAME1=VALUE1; NAME2=VALUE2 ...
HttpCookie
25
AOTAOTLABLAB
� L’aggiunta di informazione di stato, semplice e persistente, sul lato client estende in modosignificativo le capacità di applicazioni web
� Semplice carrello per commercio elettronico:elenco prodotti selezionati memorizzato in cookie
� Spesso al client è inviato solo un session-id
� Usato dal server come chiave per trovare, in un repository locale, l’informazione di stato per il client
HttpCookie
26
AOTAOTLABLAB
Php
Introduzione
� Php: Hypertext Preprocessor
� Linguaggio di scripting lato server, come asp e jsp
� I file php sono eseguiti sul server e poirestituiti al browser come semplice html
� Supporta molti database, spesso usato con Mysql
� Open source
http://php.net http://php.net/manual/it/
http://www.apachefriends.org/it/xampp.html
27
AOTAOTLABLAB
Php
Hello world
� File php: normali tag html + codice di script
� I blocchi di script cominciano con <?php
� … e finiscono con ?>
<html>
<body>
<?php
echo "Hello world";
?>
</body>
</html>
28
AOTAOTLABLAB
Php
Sintassi
� Php ha una sintassi assai simile al linguaggio C
� Operatori
� aritmetici, logici, di assegnamento, di confronto
� Istruzioni condizionali
� if… else, switch
� Istruzioni di ciclo
� while, do… while, for
29
AOTAOTLABLAB
Php
Variabili
� Le variabili cominciano col simbolo $
� Le variabili non sono tipate
� Le variabili non devono essere dichiarate
� Le stringhe si concatenano con l’operatore .
<?php
$txt1 = "Hello ";
$txt2 = "world!";
$var = $txt1 . $txt2;
$number = 16;
$var = $number;
?>
30
AOTAOTLABLAB
Php
Array
<?php
// array numerici
$names = array(“Pietro”,“Giovanni”,“Dario”);
$names[1] = “Gianni”;
$dario = $names[2];
// array associativi
$ages = array(“Zac”=>32,“Tom”=>28,“Rob”=>31);
$ages[“Gino”] = 24;
$eta_rob = $ages[“Rob”];
?>
31
AOTAOTLABLAB
Php
Parametri della richiesta
<html>
<body>
<form action="welcome.php" method="get">Name: <input type="text" name="name" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
</body>
</html>
<html>
<body>
Benvenuto <?php echo $_GET["name"]; ?>.<br />
Hai <?php echo $_GET["age"]; ?> anni.</body>
</html>
32
AOTAOTLABLAB
Php
Parametri della richiesta
� Si possono passare i parametri da url (metodo get)
� http://127.0.0.1/welcome.php?name=mic&age=33
� Se il metodo del form è post, allora si deve usare la varibile $_POST
� La variabile $_REQUEST include gli elementi di $_GET, $_POST, $_COOKIE
33
AOTAOTLABLAB
Php
Connessione a database
<?php
$con = mysql_connect("localhost","peter","abc123");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
// some code
mysql_close($con);
?>
34
AOTAOTLABLAB
Php
Inserimento dati in database
<?php
$con = mysql_connect("localhost","peter","abc123");
if (!$con) {
die('Could not connect: '.mysql_error());
}
mysql_select_db("my_db", $con);
mysql_query("INSERT INTO person (FirstName,
LastName, Age) VALUES ('Peter', 'Griffin', '35')");
mysql_query("INSERT INTO person (FirstName,
LastName, Age) VALUES ('Glenn', 'Quagmire', '33')");
mysql_close($con);
?>
35
AOTAOTLABLAB
Php
Lettura da database
<?php
$con = mysql_connect("localhost", "peter", "abc123");
mysql_select_db("my_db", $con);
$result = mysql_query("SELECT * FROM person");
$data = "";
while($row = mysql_fetch_array($result)) {$data .= "<tr><td>" . $row['FirstName'] . "</td> .
"<td>" . $row['LastName'] . "</td></tr>";
}
mysql_close($con);
?>
<table border="1">
<tr><th>Firstname</th><th>Lastname</th></tr>
<?php echo $data ?>
</table>