Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
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>