Progettazione e sviluppo di applicazioni web 2.0 con PHP e Ajax

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 query echo "<table>\n"; while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { echo "\t<tr>\n"; foreach ($line as $col_value) { echo "\t\t<td>$col_value</td>\n"; } echo "\t</tr>\n"; } echo "</table>\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; return xmlhttp; }

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