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>