Un seminario che ho tenuto nel 2008

1. Progettazione e sviluppo di applicazioni
web 2.0 con PHP e Ajax

2. Sommario

Definizione del web 2.0

Caratteristiche dei siti web 2.0

Infrastrutture tecnologiche

La piramide del web 2.0

Esempi di siti web 2.0

3. Sommario

PHP - Storia

PHP – Significato dell'acronimo

PHP - Caratteristiche

PHP – Esempio

PHP – Stringhe

PHP – Array

PHP – Funzioni interne

4. Sommario

PHP – MySQL

PHP – MySQL - Connessione

PHP – MySQL – Query

PHP – MySQL – Risultato di query

PHP – MySQL – Altre funzioni

PHP – Framework

PHP – Sicurezza

5. Sommario

Ajax

Ajax – JSON

WebLogiX

STOOPHP

STOOPHP - Prospettive

6. Definizione del web 2.0

”Web 2.0” indica una nuova generazione di siti
web che cercando di coinvolgere
maggiormente l'utente

Non si tratta spesso di nuove tecnologie ma di
un modo diverso di utilizzare tecnologie già
esistenti

7. Caratteristiche dei siti web 2.0

Dinamicità dei contenuti aggiornabili senza la
necessità di dover conoscere HTML, FTP

Interfaccie ricche che cercano di portare
l'esperienza desktop sul web

Grafica accattivante: il web 2.0 significa
comunicazione e business

8. Caratteristiche dei siti web 2.0

Pubblicità inerenti al contesto (Adsense)

Organizzazione dei contenuti in base alla loro
popolarità anziché tassonomia

Syndication

Social bookmarking

Ottimizzazione per motori di ricerca

9. Infrastrutture tecnologiche

Linux

Apache (o Lighttpd)

Mysql

PHP (o Ruby, Python)

in una parola sola LAMP

10. Infrastrutture tecnologiche

XHTML

CSS

Javascript per comunicazioni asincrone (Ajax)

... a questo punto occorre solo convincere i
navigatori ad utilizzare un browser che rispetti
gli standard e aggiornato.

11. La piramide del web 2.0

12. Esempi di siti web 2.0

Youtube

Flickr

Digg

Wikipedia

... qualsiasi blog

13. Web 2.0

I siti web 2.0, compresi quelli citati, sono
dinamici sotto tutti i punti di vista, anche
laddove non dovrebbero esserlo, cioè nel
codice: sono siti che rimangono sempre in beta

14. Web 3.0

Il Web 2.0 è quindi un fenomeno di
comunicazione e marketing supportato dalla
programmazione web a cui molti non sono
ancora abituati, ma occorre farlo in fretta
perché le sfide del Web 3.0 incombono

15. Web 3.0

GGG Giant Global Graph – più interattività tra i
siti

Connettività a banda ”larghissima” da qualsiasi
apparecchio

Navigazione in 3 dimensioni stile ”Second Life”

16. PHP

17. PHP - Storia

Inizialmente sviluppato da Rasmus Lerdorf
come serie di script CGI

Al progetto si unirono Zeev Suraski e Andi
Gutmans che ne scrissero l'interprete Zend

Oggi è alla versione 5 e può essere usato
anche per shell script e applicazioni stand-
alone

18. PHP – Significato dell'acronimo

Si tratta di un acronimo ricorsivo e ”oggi” sta
per PHP: Hypertext Preprocessor

Lerdorf non ne ha comunicato il significato
originario, che secondo la tradizione sembra
essere Personal Home Page

19. PHP - Caratteristiche

Sintassi basata sul C

Tipizzazione debole

Orientato agli oggetti (in particolare dalla
versione 5)

Alto livello di astrazione

20. PHP – Caratteristiche

Le variabili hanno il prefisso $ e ciò le permette
di essere utilizzate all'interno di stringhe.
Alcune sono predefinite

$_GET: array che contiene le variabili passate
alla pagina

$_POST: array che contiene variabili
provenienti da from

21. PHP – Esempio
<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE) {
?>
<h3>strpos() must have returned non-false</h3>
<p>You are using Internet Explorer</p>
<?php
} else {
?>
<h3>strpos() must have returned false</h3>
<p>You are not using Internet Explorer</p>
<?php
}

22. PHP - Esempio

strpos è una funzione una stringa in un'altra

In questo caso è stata cercata la stringa MSIE
all'interno di una variabile predefinita, cioé
$_SERVER['HTTP_USER_AGENT'],che
identifica il browser dell'utente

A seconda del risultato, vengono mostrate due
porzioni di HTML differenti

23. PHP – Stringhe

Anche se permane la libertà di trattare le
stringhe a basso livello come in C, possiamo
avvalerci di numerose funzioni per la ricerca, la
sostituzione, il padding, la formattazione,
l'hashing, la trattazione di HTML...

24. PHP – Array

La libertà sugli array è totale: possiamo usare
qualsiasi tipo di variabile per gli indici, qualsiasi
tipo di variabile per i valori, e mescolare i tipi

25. PHP – Array
<?php
$arr = array("foo" => "bar", 12 => true);
echo $arr["foo"]; // bar
echo $arr[12]; // true
?>

26. PHP - Array

Per eseguire dei cicli sugli elementi di un array,
non dobbiamo preoccuparci delle dimensioni,
grazie al costrutto foreach, che per ogni
elemento dell'array permette di eseguire degli
statement

Ad ogni ciclo abbiamo a disposizione l'indice e
il valore, in variabili con scope limitato

27. PHP – Array
foreach (array_expression as $value)
statement
foreach (array_expression as $key => $value)
statement

28. PHP – Array

Anche per gli array sono presenti numerose
funzioni per eseguire ricerche, sostituzioni,
operazioni di tipo insiemistico, e per trattare gli
stack

29. PHP – Funzioni interne

In PHP sono già presenti diverse funzioni per
accedere a decine di database, collegarsi a
server FTP, elaborare immagini

Il primo livello di espansione del linguaggio è
dato da PECL, insieme di librerie scritte in C
che spesso vengono incorporate nelle
successive release di PHP

30. PHP - MySQL

In PHP 4 le funzioni per accedere al database
MySQL erano incorporate al linguaggio: era
ovvio che le persone interessate a PHP erano
interessate anche a questa caratteristica

In PHP 5 occorre abilitare il supporto in fase di
compilazione o caricare il relativo modulo a
runtime, per incompatibilità di licenze

31. PHP – MySQL

In PHP è stato scritto un ottimo client per
MySQL, PHPMyAdmin, che fornisce
un'interfaccia grafica per la gestione completa
del database

Ovviamente occorre avere un webserver sulla
stessa macchina in cui è in esecuzione il
servere MySQL

32. PHP – MySQL - Connessione
<?php
$link = mysql_connect('mysql_host',
'mysql_user', 'mysql_password')
or die('Could not connect: ' .
mysql_error());
echo 'Connected successfully';
mysql_select_db('my_database') or die('Could
not select database');
?>

33. PHP – MySQL – Query
<?php
$query = 'SELECT * FROM my_table';
$result = mysql_query($query) or die('Query
failed: ' . mysql_error());
?>

34. PHP – MySQL – Risultato di
echo "<table>n";
query
while ($line = mysql_fetch_array($result,
MYSQL_ASSOC)) {
echo "t<tr>n";
foreach ($line as $col_value) {
echo "tt<td>$col_value</td>n";
}
echo "t</tr>n";
}

35. PHP – MySQL – Altre funzioni

mysql_affected_rows: restituisce il numero di
righe che sono state prese in considerazione
nell'ultima query eseguita

mysql_insert_id: restituisce l'ultima chiave
generata se abbiamo eseguito una query di
inserimento su una tabella che ha l'opzione
auto_increment

36. PHP – Framework

Al giorno d'oggi negli ambienti di produzione è
prassi interporre un livello di astrazione tra PHP
e il programmatore, cioè un framework

Il framework ufficiale è PEAR. Uno dei più
utilizzati è Symphony

37. PHP – Sicurezza

Occore prestare attenzione agli attacchi di SQL
Injection, Form Injection, Variable Injection.

Fondamentale controllare le variabili che
arrivano dai form, esposti a tutti

38. Ajax

Ajax è il nome nuovo introdotto dal web 2.0, ma
non si tratta di un nuovo linguaggio di
programmazione, piuttosto di una tecnica:

Asynchronous

Javascript

and XML

39. Ajax

Il Javascript è una vecchia conoscenza del
web, introdotta da Netscape ed in seguito
adottata da tutti i browser

Spesso i webmaster del Web 1.0 ne abusavano
e molti utenti infastiditi da popup e alert lo
disattivavano

40. Ajax

Tuttavia se Javascript viene usato bene può
arricchire l'esperienza del navigatore e
alleggerire il carico di lavoro del server

Infatti mentre PHP viene interpretato dal server,
Javascript viene interpretato dal browser

41. Ajax

La rivoluzione iniziò quando i sviluppatori di
browser iniziarono a includere in Javascript un
oggetto capace di effettuare richieste in HTTP
al server, in maniera trasparente all'utente

Originariamente tale oggetto era stato pensato
per ottenere documenti XML

42. Ajax
function CreateXmlHttpReq(handler) {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange = handler;

43. Ajax

Una volta ottenuti dei dati XML tramite richiesta
PHP, è possibile cambiare certe parti della
pagina già caricata utilizzando le capacità di
Javascript di modificare gli elementi del DOM

Questo in sintesi è Ajax

44. Ajax
function myHandler() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
alert(myRequest.responseText);
}
}
function esempio3() {
myRequest = CreateXmlHttpReq(myHandler);
myRequest.open("GET","primo.php");
myRequest.send(null);
}

45. Ajax

Tuttavia non siamo obbligati a richiedere un
documento XML, possiamo richiedere
frammenti di HTML, testo semplice

Possiamo richiedere documenti statici ma
anche documenti generati da PHP in base a
nuove indicazioni fornite dall'utente

46. Ajax – JSON

JSON è un formato di codifica che permette in
un linguaggio di programmazione di
trasformare ad esempio un array in una stringa
da decodificare in un altro linguaggio

In questo modo possiamo richiedere con Ajax
una stringa JSON generata da PHP e
convertirla in un array in Javascript

47. Ajax

Questi esempi di Ajax provengono dal
documento ”Spaghetti Ajax” di Salvatore
Sanfilippo, uno dei primi italiani a trattare
questa tecnologia

48. Ajax

Ci sono diversi framework Javascript che
permettono di astrarre Ajax, come Prototype, e
altri che arricchiscono l'interfaccia, come
Scriptaculous

Vedere anche mootools e jquery

49. Problematiche

Latenza della comunicazione

Javascript è interpretato quindi non è veloce

Diversa mentalità di programmazione
(asincrona)

50. WebLogiX

La WebLogiX è una ditta individuale che si
occupa di sviluppo di applicazioni web

Tutte le applicazioni si basano su un framework
sviluppato in proprio, STOOPHP, che fa uso di
programmazione ad oggetti e di Ajax

51. STOOPHP

Con STOOPHP la progettazione
dell'applicazione è limitata alla progettazione
del database

In base alle relazioni tra le tabelle vengono
creati elenchi e form

Unica condizione: il database deve essere
progettato con DBDesigner

52. STOOPHP

In questo modo il cliente che ha commissionato
il sito può gestire le sue attività commerciali,
turistiche, divulgative e i contenuti del sito
stesso senza accedere in FTP o al database

53. STOOPHP

La pagina di gestione è unica e tramite Ajax
viene aggiornata in base alle richieste
dell'utente

I costi di sviluppo sono abbattuti e lo stesso
codice utilizzato da più clienti segnala al
programmatore i bug in maniera trasparente

54. STOOPHP - Prospettive

Scrivere documentazione per sviluppo e uso

Realizzare un sistema di update attraverso
SVN

Ottimizzare le prestazioni

55. STOOPHP - Prospettive

Studiare in maniera approfondita la sicurezza

Riorganizzare il codice in base all'evoluzione di
PHP

Migliorare la procedura di setup, creando uno
strumento di progettazione database che segua
lo standard creato