Alla base del web: il protocollo HTTP
Programmazione lato server Serie di tecniche che consentono di creare dinamicamente risorse da distribuire tramite un server Web Questo può essere ottenuto tramite programmi in grado di generare. su richiesta. flussi di dati che vanno a costituire formati tipici del Web. come HTML. CSS. JPEG. GIF (ma in linea di principio qualsiasi tipo di file gestibile dal browser) i programmi sono attivati dal server Web
Il server Web Il server Web. di base. è il solo programma server che gestisce il protocollo http. L attività principale del server è distribuire risorse. secondo le richieste dei client. Le risorse distribuite sono normalmente pronte ed ospitate in un sottoalbero specifico del file system (pagine statiche) ma possono anche essere generate all atto della richiesta (pagine dinamiche). di solito sulla base di parametri specificati dall utente all interno di un modulo HTML.
GET /b/f/file.html 200 OK (file.html) CLIENT SERVER risorse varie HTML. immagini, CGI. a è la radice del sottoalbero del web server. definita nella configurazione. a b c d e f g file.html
Le attività del server il server non si limita a distribuire risorse parte delle risorse possono essere ad accesso protetto in base all'utente. o alla sua provenienza (indirizzo IP). etc log degli eventi
Specifica delle interazioni Il protocollo HTTP è di tipo request/response: flusso di informazioni server client Browser web My Home Page Welcome to my home page <html> <head> GET index.html <title>my Home Page</title> </head> Server http 80 <body>welcome to my <b>home page</b></body> </html>
Specifica delle interazioni 32 Attraverso tecnologie di elaborazione lato server è possibile creare pagine web dinamiche Browser web My Home Page Today is Tuesday 21-03-2003 GET index.php <html> <head> <title>my Home Page</title> </head> <body>today is <b>tuesday 21-01-2003</b></body> </html> 80 Server http Server-side processing
Specifica delle interazioni 33 Inoltre. dalla versione HTTP 1.1 è possibile inviare informazioni e file al server attraverso i metodi POST e GET Browser web POST name=myname Name: myname Submit <html> <head> <title>data received</title> </head> 80 Server http Server-side processing <body>data successfully received</body> </html>
Specifica delle interazioni 33 Inoltre. dalla versione HTTP 1.1 è possibile inviare informazioni e file al server attraverso i metodi POST e GET Browser web POST name=myname Data received Data successfully Name: myname received Submit <html> <head> <title>data received</title> </head> 80 Server http Server-side processing <body>data successfully received</body> </html>
Programmazione lato server Programmazione lato server: serie di tecniche che consentono di creare dinamicamente risorse da distribuire tramite un server Web. Questo può essere ottenuto tramite programmi in grado di generare. su richiesta. flussi di dati che vanno a costituire formati tipici del Web. come HTML. CSS. JPEG. GIF (ma in linea di principio qualsiasi tipo di file gestibile dal browser) i programmi sono attivati dal server Web
Utilità accesso a basi di dati tramite un interfaccia Web archivi. autenticazione utenti. etc. pagine Web con componenti che dipendono dal contesto utente. data. tipo di browser. parametri passati dal client. etc applicazioni interattive simili a quelle usuali. per quanto con qualche limitazione sempre più spesso i dati che costituiscono le pagine Web provengono da archivi che li conservano in forma strutturata.
Limiti? (non utilizzando anche programmazione lato client) Interattività: a seguito di ogni input dell'utente. i dati vengono inviati al server, vengono elaborati dal programma lato server. che costruisce una risposta la quale. spedita al client. va a sostituire l'interfaccia precedentemente utilizzata dall'utente Mancanza di sessioni: ogni pagina visitata dall'utente è una cosa diversa. senza memoria
Input dell'utente Poichè l utente può fornire dei dati al server tramite i form HTML. la risorsa creata dal programma sul server spesso dipende proprio da tali dati. Quindi deve esserci un interfaccia ben definita tra server http e programmi fisicamente residenti sulla macchina server. per lo scambio di dati nell una e nell altra direzione: il programma dovrà ricevere i vari dati relativi alla specifica transazione. inclusi gli eventuali parametri forniti dall utente. mentre il server dovrà ricevere la risorsa generata dal
Input dell'utente essenzialmente ciò che l'utente inserisce nei form HTML l'attributo name dei controlli diventa il nome del parametro passato trasferito al server Web tramite: metodo GET: i parametri vengono codificati nell'uri. come coppie parametro=valore. separate da un & es.: http://www.google.it/?query=cerco+cose&lang=it metodo POST: i parametri vengono passati nel corpo della richiesta HTTP (dopo l'intestazione) NB: GET non dovrebbe essere usato per produrre effetti
GET e POST: quale dei due? I parametri passati con GET sono leggibili sull'uri Non va bene quando vogliamo nasconderli (es. password) Va bene quando vogliamo che si vedano (es. per facilitare il bookmark di una pagina) La lunghezza dell'uri è limitata GET non va bene per passare dati "lunghi" (es. upload di file)
Tecniche di Progr. Lato Server Le varie tecniche utilizzabili per la programmazione server-side differiscono per la modalità di interazione tra server e programma, per il luogo ove il codice è situato, per come viene mandato in esecuzione descriveremo quattro modalità principali di programmazione lato server
PHP: PHP Hypertext Processor E un linguaggio di programmazione integrato all interno di pagine HTML Viene eseguito dal server a seguito della richiesta di una pagina L output di PHP è. comunemente. codice HTML per il browser più precisamente l output di uno script PHP è un flusso di dati che può essere interpretato dal browser ciò include anche immagini o file binari
PHP: documentazione Sito ufficiale: http://www.php.net Altri siti utili: http://www.phpbuilder.com (community con articoli specifici e forum) http://www.hotscripts.com (scripting in generale. esempi e programmi PHP già pronti)
Ciao Mondo in PHP <html><head></head> <body> index.php <?php echo Ciao Mondo! ;?> </body></html> Browser web Ciao Mondo! GET index.php <html><head></head> <body> Ciao Mondo! 80 Server http PHP interpreter </body></html>
Ciao Mondo in JavaScript <html><head></head> <body> <script>document.write( Ciao Mondo!") </script> </body></html> 48 Browser web Ciao Mondo! Javascript engine GET index.html <html><head></head> <body> <script>document.write( Ciao Mondo! )</script> </body></html> 80 Server http
Ciao Mondo in PHP + JS <html><head></head> <body> index.php 49 <?php echo <script>document.write(\ Ciao Mondo!\")</script> ;?> </body></html> Browser web GET index.php Ciao Mondo! <html><head></head> <body> <script>document.write( Ciao Mondo! )</script> 80 Server http PHP interpreter Javascript engine </body></html>
Sintassi Il codice PHP dev essere racchiuso in tag speciali: <?php?> (universale) <% %> oppure <??> (vanno abilitati esplicitamente) <SCRIPT LANGUAGE= PHP > </SCRIPT> (può creare confusione con JavaScript) L interprete PHP analizza il file. esegue il codice nei tag e lascia invariate le altre parti trasmettendo il risultato al browser per questo può essere incluso in pagine HTML
Sintassi (cont.) La sintassi di PHP è simile a quella del C indifferente agli spazi case-sensitive (funzioni e nomi delle variabili) comandi terminati da punto e virgola commenti stile C /* commento */ stile Java(Script) // commento Stile Perl # commento espressioni standard (+. -. *. /. &&.. +=. ++....)
Variabili Le variabili sono identificate dal carattere dollaro ($) non è necessario dichiararle e possono essere utilizzate in qualunque punto del programma <?php $a = 3;?> a differenza di altri linguaggi. non hanno un tipo esplicito (es. int. float. string. ) il tipo di una variabile è legato al suo valore corrente <?php $a = 3; $a = Ciao ;?>
Variabili (cont.) Le variabili PHP non ancora assegnate se utilizzate in espressioni numeriche (es. $a + 3) assumono valore 0 se utilizzate come stringhe (es. echo $a) assumono valore stringa vuota se utilizzate come valore booleano (es. $a && $b) assumono valore FALSE La funzione isset() permette di verificare se una variabile ha un valore oppure non è stata ancora assegnata
Variabili (cont.) L ambito (o scope) delle variabili PHP è. generalmente. l intera pagina web <html><head></head> <body> <?php $nome = Mario Rossi ;?> <h1>questa è l home page di <?php echo $nome;?> </h1> </body> </html>
Tipi di dato Numeri interi: <?php $a = -43;?> is_integer($a) verifica se la variabile $a contiene un dato di tipo intero Numeri reali: <?php $a = -1.3; $b =.54E23;?> is_float($a) verifica se la variabile $a contiene un dato di tipo intero is_numeric() verifica se la variabile è di tipo numerico
Tipi di dato (cont.) Valori di verità (booleani): <?php $a = TRUE; $b = FALSE;?> is_bool($a) verifica se la variabile $a contiene un valore booleano Stringhe: <?php $a = Ciao ;?> is_string($a) verifica se la variabile $a contiene un valore di tipo stringa l operatore. (punto) concatena due stringhe (ad es. $a = Ciao. Mondo ;)
Inclusione di file esterni E possibile definire le funzioni utilizzate più comunemente in file esterni e poi includerle nel nostro programma. Le istruzioni per l inclusione di file esterni sono include. e include_once <?php include_once( mie_funzioni.php );?>
Inclusione di file esterni: file HTML La funzione può essere utilizzata anche per creare delle intestazioni/piè di pagina HTML <?php?> include( intestazione.html ); intestazione.html <h1>home site di </h1>
Passaggio di dati via URL In PHP è possibile passare dei dati al programma attraverso gli URL La sintassi per il passaggio di dati è la seguente: http://sito.dominio/script.php? variabile1=valore1&variabile2=valore2& All interno del programma PHP. questi dati sono disponibili nell array associativo $_GET
Passaggio di dati via URL (cont.) Si consideri questo programma di esempio: prova_get.php <?php if (isset($_get[ nome ])) echo Benvenuto. $_GET[ nome ]. <br>\n ; else echo Devi specificare un nome<br>\n ;?> e lo si esegua come http://sito/prova_get.php e come http://sito/prova_get.php?nome=<vostronome>
Passaggio di dati via FORM Anche attraverso i form HTML è possibile specificare dei dati che possono essere trasmessi ad uno script <FORM action= prova_get.php method= GET > <INPUT type= text name= nome > <INPUT type= submit name= invia value= Invia i dati > </FORM> Crea un form con un campo di testo ed un pulsante
Passaggio di dati via FORM (cont.) La pressione sul pulsante Invia i dati ha come effetto quello di reindirizzare il browser all indirizzo http://sito/post_script.php?nome=<contenuto del campo nome> e quindi di mettere a disposizione del programma contenuto nel file post_script.php le variabili passate attraverso l array associativo $_GET;
FORM HTML: campi di input Text: campo di testo su linea singola Password: campo di testo il cui contenuto è mascherato da asterischi Checkbox: pulsante da spuntare. può essere attivo (checked) o inattivo Radio: pulsante di scelta alternativa. ci possono essere più pulsanti radio con lo stesso nome ma con valori diversi. Submit: pulsante per inviare i dati Reset: pulsante per cancellare i dati immessi File: pulsante per la spedizione di un file
FORM HTML: altri campi Altri tipi di controlli HTML con cui è possibile inviare dati sono i seguenti: Select: <SELECT multiple size="4 name="selezione"> <OPTION selected value="componente_1_a">componente 1</OPTION> <OPTION selected value="componente_1_b">componente 2</OPTION> <OPTION>Componente 3</OPTION> </SELECT>
FORM HTML: altri campi Textarea: <TEXTAREA name="thetext" rows="20" cols="80"> First line of initial text. Second line of initial text. </TEXTAREA>
Passaggio di dati via FORM e POST La soluzione per la trasmissione dati precedente non può essere usata con campi di input di tipo textarea oppure per trasmettere interi file Questo perché tutto il testo dovrebbe essere codificato in una URL. che hanno una lunghezza limitata
Passaggio di dati via FORM e POST Utilizzando il metodo di trasmissione POST di HTTP è possibile spedire questi dati senza utilizzare la URL <form action= post_script.php method= POST > </form> i dati in questo caso sono disponibili nell array associativo $_POST
Lettura di file di testo Il contenuto dei file di testo presenti nel sito può essere letto attraverso la funzione file( nome_file ) Il risultato è disponibile nel programma PHP sotto forma di un array di stringhe. Ad esempio. lo script: <?php?> $linee = file( file_da_leggere.html ); foreach ($linee as $linea) echo $linea;
Lettura di file di testo (cont.) Il contenuto della stringa può essere ulteriormente elaborato. Ad esempio. volendo modificare tutte le occorrenze di una parola per renderla in grassetto si può utilizzare la funzione ereg_replace nel modo seguente: <?php $linea = ereg_replace( grassetto. <b>grassetto</ b>. $linea);?>
Cosa fare per eseguire programmi lato server Ci sono sostanzialmente due modi: Affidarsi a un servizio di hosting, ovvero far ospitare il proprio sito presso il server di un'azienda. Ovviamente devono essere disponibili PHP, MySQL o altre tecnologie lato server. Usare un server locale, come XAMPP, ovvero un sw che installa sul nostro calcolatore un server (Apache) un database (MySQL) e degli interpreti di linguaggi di scripting lato server (PHP, Perl).
Pro e contro Bisogna ricorrere alla prima soluzione per pubblicare e rendere condivisibile alla comunità Internet il proprio sito (cfr. http://www.jockersoft.com/hosting_gratuito.php ) La seconda soluzione è utile per la messa a punto di un sito e dei relativi programmi lato server, ed è la soluzione che adotteremo, perché di facilissima intallazione e perché XAMPP è disponibile per le principali piattaforme (Windows, Mac, Linux).
XAMPP Vediamo come installare il pacchetto XAMPP e provare gli esempi di scripting PHP visti a lezione. XAMPP ( 30-100 MB) si ottiene da http://www.apachefriends.org/it/xampp.html scegliendo la versione del sistema operativo. L'installazione differisce solo per alcuni particolari. Per il caso di Windows, conviene scegliere la versione autoestraente (.exe).
XAMPP installazione e messa in opera Terminata l'installazione occorre avviare Apache, PHP, (MySQL se usate dei database) e anche il server FTP (Filezilla o ProFTPD secondo le versioni). Aprite il browser e digitate http://localhost oppure http://127.0.0.1. La comparsa della home page di default di XAMPP confermerà la riuscita dell'installazione. Ricordate che XAMPP si ferma ad ogni shutdown e per utilizzarlo va riavviato.
dove metto il mio sito web? (Windows) Il folder principale per tutti i documenti WWW si trova in \xampp\htdocs. Se vi poniamo un file test.html possiamo visualizzarlo digitando http://localhost/test.html nella barra degli indirizzi del browser. Conviene però creare delle sottocartelle. Se si crea il folder \xampp\htdocs\new e vi si copia il file test.html, questo avrà l'url http://localhost/new/test.html
Il protocollo FTP In genere, non è possibile porre i file direttamente nelle cartelle di XAMPP, bisogna almeno avere i diritti da amministratore. In caso contrario, occorre usare il protocollo FTP. FTP (File Transfer Protocol) è, come HTTP, un protocollo con modalità client-server del livello applicativo di TCP/IP ed è usato per il trasferimento di file e cartelle tra due calcolatori della rete Internet. Il client può inviare e prelevare file e cartelle dal server.
Uso di FTP L'uso di FTP è la modalità standard di upload di file verso un sito reale e tanto vale imparare ad usarlo anche con XAMPP. Occorre che l'utente abbia un sw detto FTP client (ad es. Filezilla) e che sul calcolatore destinatario sia in funzione un sw detto FTP server. Il client FTP necessita dell'url del server, e delle credenziali dell'utente (nome e password) per l'accesso al server. Compiuta l'autenticazione, il client mostra due finestre che mostrano una cartella del client e una del server. L'utente, spostando una cartella o un file da una finestra all'altra richiede un trasferimento dati.
PHP note integrative PHP è un linguaggio di scripting (come JavaScript) che viene prevalentemente usato per la programmazione di script lato server che producono codice HTML in modo dinamico, in base a dati forniti dall'utente o al contenuto di file residenti sul server. Ha una sintassi molto simile a quella di altri linguaggi comuni (C, Java, JavaScript) ed è orientato agli oggetti.
Il comando echo <html> <head> </head> <body> <?php echo "<p> Ciao a tutti! </p>" ;?> </body> </html> Prima dell'interpretazione PHP <html> <head> </head> <body> <p> Ciao a tutti! </p> </body> </html> Dopo l'interpretazione PHP Di fondamentale importanza è il comando echo che riceve come argomento una stringa e la inserisce nel file in cui è contenuto il codice PHP. A sin. appare una pagina con codice PHP, a destra lo stesso codice in cui il comando echo è stato eseguito, inserendo la stringa <p> Ciao a tutti!</p> entro il codice HTML.
Accesso ai file Un'altra caratteristica di PHP è la possibilità di accedere a file e anche a database (avendo i permessi di accesso), cosa non consentita a JavaScript. Una situazione comune è quella in cui uno script PHP accede a dei file presenti sullo stesso server. Il seguente esempio è semplicissimo: un contatore di accessi a una pagina web. Il numero di accessi è l'unica informazione contenuta nel file contatore.txt ed è incrementato ad ogni accesso.
contatore.php La funzione file() memorizza nell'array $contenuto le righe del file contenuto.txt Il numero nella prima riga del file è incrementato ed assegnato a $visite Se contatore.txt è accessibile in scrittura allora si scrive il valore di $visite nel file Si inserisce il valore di $visite nel codice HTML con il comando echo <html> <head> <title>contatore</title> </head> <body> <h1>pagina di prova contatore accessi</h1> <p>questa pagina mostra il numero aggiornato di accessi.</p> <p>pagina visitata n. <?php $nomefile="contatore.txt"; $contenuto=file($nomefile); $visite=trim($contenuto[0])+1; if ($fp=fopen($nomefile,"w")) { fwrite($fp,$visite); fclose($fp); }; echo $visite;?> volte</p> </body> </html>
Input di dati È possibile fornire dei dati in ingresso a uno script PHP secondo tre modalità: Scrivendoli nell'url della pagina che contiene lo script Fornendoli mediante form e il metodo Get Fornendoli mediante form e il metodo Post
Input con URL I dati di input a uno script PHP possono essere passati scrivendoli direttamente nell'url dello script, secondo il seguente formato: http://nomedns/pathscript?var1=v1&var2=v2& La sequenza di valori: v1, v2, è assegnata alle variabili var1, var2,. Lo script riceve nell'array associativo $_GET la sequenza dei valori; le variabili sono usate come indici dell'array.
input_get.php La funzione isset() verifica che alla variabile nome sia stato assegnato un valore In caso positivo, si stampa un msg personalizzato inserendo il valore della variabile nome nel codice HTML <html> <head> <title>prova GET</title> </head> <body> <h1>input con metodo GET</h1> <p> <?php if (isset($_get["nome"])) { echo "Benvenuto ". $_GET["nome"]. "<br>\n"; } else { echo "Devi specificare un nome<br>\n"; };?> </p> </body> </html> Altrimenti sulla pagina compare Devi specificare un nome Un possibile URL è http://localhost/mazzanti/prova_get/in put_get.php?nome=mario
Input con form e GET Il file input_get.php può ricevere il dato nome anche da un form all'interno di una pagina web come quella specificata dal codice accanto. Il valore viene inserito in una casella di testo denominata nome Si noti la specifica del metodo GET nel FORM L'attributo action del form contiene l'url dello script PHP Anche in questo caso i dati passati allo script PHP compaiono nella barra degli indirizzi del browser <html> <head> <title>get e FORM</title> </head> <body> <h1>input con metodo GET e FORM</h1> <form action="input_get.php" method="get"> <input type="text" name="nome"> <input type="submit" name="invia" value="invia i dati"> </form> </body> </html>
Input con form e POST La modalità è simile a quella precedente, si specifica il valore POST per l'attributo method del form, che in questo caso, è l'unico strumento per fornire dati. I dati non compaiono nella barra degli indirizzi Questa modalità è comoda quando molti dati devono essere passati a uno script PHP.
prova_post.html e input_post.php <html> <head> <title>prova POST</title> </head> <body> <h1>input con metodo POST</h1> <p> <?php if (isset($_post["nome"]) && isset($_post["cognome"]) ) { echo "Benvenuto <em>". $_POST["cognome"]. "<br>\n"; echo $_POST["nome"]. "</em><br>\n"; } else { echo "Devi specificare un nome e un cognome<br>\n"; };?> </p> </body> </html> <html> <head> <title>post e FORM</title> </head> <body> <h1>input con metodo POST (e FORM)</h1> <form action="input_post.php" method="post"> <input type="text" name="nome"><br> <input type="text" name="cognome"><br> <input type="submit" name="invia" value="invia i dati"> </form> </body> </html> Lo script PHP riceve nell'array associativo $_POST i valori assegnati alle caselle di testo nome e cognome. Le due stringhe sono usate per indicizzare l'array.