AOT AOT LAB LAB

(1)

Agent and Object Technology Lab

Dipartimento di Ingegneria dell’Informazione Università degli Studi di Parma

AOT AOT LAB LAB

Fondamenti di Informatica Fondamenti di Informatica Fondamenti di Informatica Fondamenti di Informatica

Applicazioni web

Michele Tomaiuolo

(2)

AOT AOT LAB LAB

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)

AOT AOT LAB LAB

Un form html è una sezione di documento che contiene

Testo normale e markup

Elementi speciali chiamati controlli (checkbox, bottoni radio, 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

Form

Introduzione

(4)

AOT AOT LAB LAB

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 allo script sul server)

<form action="http://www.myhost.com/myscript.cgi"

method="post">

Form

Azione and metodo

(5)

AOT AOT LAB LAB

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 sul server come un insieme di coppie nome/valore

Campi di testo vuoti sono inviati come una coppia nome/valore, in cui il valore è una stringa vuota

Checkbox e pulsanti radio non selezionati non vengono

Form

Coppie nome/valore

(6)

AOT AOT

LAB LAB ^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)

AOT AOT LAB LAB

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

Forms

Il tag input

(8)

AOT AOT LAB LAB

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 url dell’immagine da visualizzare

Supporta la maggior parte degli attributi del tag img

Form

Il tag input

(9)

AOT AOT LAB LAB

<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>

Form

Esempio con tag input

(10)

AOT AOT LAB LAB

<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>

Form

Esempio con tag input

(11)

AOT AOT LAB LAB

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>

Form

Il tag select

(12)

AOT AOT LAB LAB

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 chiusura costituisce il contenuto iniziale del campo

<textarea name="stuff" rows="5" cols="10">Enter stuff here</textarea>

Form

Il tag textarea

(13)

AOT AOT LAB LAB

Protocollo di livello applicazione per sistemi informativi distribuiti, 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

Http

Hyper Text Transfer Protocol

(14)

AOT AOT LAB LAB

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

Http

Storia

(15)

AOT AOT LAB LAB

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

Http

Client e server

(16)

AOT AOT LAB LAB

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

Http

Messaggi

(17)

AOT AOT LAB LAB

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 dati sono 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

Http

Metodo get

(18)

AOT AOT LAB LAB

Il metodo post copre diverse funzioni generali

Annotazione di risorse esistenti

Invio di messaggi a bulletin board, newsgroup, mailing list, o gruppi di 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

Http

Metodo post

(19)

AOT AOT LAB LAB

1. Il browser apre una connessione al computer e alla porta specificati nella url desiderata

2. Il browser trasmette la parola “GET” seguita da uno spazio, 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:

Http

Connessioni usa-e-getta

(20)

AOT AOT LAB LAB

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

Http

Esempio di richiesta

(21)

AOT AOT LAB LAB

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>...

Http

Esempio di risposta

(22)

AOT AOT LAB LAB

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 – Richiesto pagamento; 403 – Vietato; 404 – Non trovato

5xx - Server Error

Http

Codici di stato

(23)

AOT AOT LAB LAB

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 anche informazione 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

Http

Cookie

(24)

AOT AOT LAB LAB

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 confronta con tutti i cookie (con il rispettivo range di url)

Per ciascun cookie che corrisponde, alla richiesta http viene aggiunta una coppia chiave/valore

Http

Cookie

(25)

AOT AOT LAB LAB

L’aggiunta di informazione di stato, semplice e persistente, sul lato client estende in modo

significativo 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

Http

Cookie

(26)

AOT AOT

LAB LAB ^Php

Introduzione

Php: Hypertext Preprocessor

Linguaggio di scripting lato server, come asp e jsp

I file php sono eseguiti sul server e poi restituiti 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)

AOT AOT

LAB LAB ^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)

AOT AOT

LAB LAB ^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

(29)

AOT AOT

LAB LAB ^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)

AOT AOT

LAB LAB ^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)

AOT AOT

LAB LAB ^Php

Parametri della richiesta

<html>

<body>

Name: <input type="text" name="name" />

Age: <input type="text" name="age" />

</form>

</body>

</html>

<html>

<body>

Benvenuto <?php echo $_GET["name"]; ?>.<br />

Hai <?php echo $_GET["age"]; ?> anni.

</body>

(32)

AOT AOT

LAB LAB ^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)

AOT AOT

LAB LAB ^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)

AOT AOT

LAB LAB ^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)

AOT AOT

LAB LAB ^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);

?>

<tr><th>Firstname</th><th>Lastname</th></tr>