Lamp Ld2008

LAMP con PHP di Michele “O-Zone” Pinassi

Roadmap Alla fine del talk avremo capito come interagiscono il server Web, l'interprete PHP ed il DBMS MySQL per offrire all'utente servizi interattivi attraverso le pagine web. 1) Introduzione 2) Un passo indietro... (veloce storia del web) 3) HTML e PHP 4) CSS – Cascading Style Sheet 5) Interazione 6) Riepilogo 7) Introduzione a MySQL 8) PHP e MySQL 9) Il Javascript 10) AJAX

Introduzione ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Un passo indietro... Agli albori del World Wide Web (Anni '90) l'HTML era un mezzo per visualizzare testo e semplice grafica sui primi browser web, con i primi collegamenti ipertestuali che permettevano la navigazione all'interno dei siti web. La necessità di maggior flessibilità ed interattività fece “nascere” il meccanismo dei CGI-BIN, semplici programmi (in C, Perl...) che venivano interrogati attraverso il passaggio di variabili GET e POST e restituivano pagine in html generate dal server web ( server-side ). Poi, praticamente insieme al Java della Sun -che permetteva l'esecuzione di Applet Java nelle pagine web-, nacquero i linguaggi client-side interpretati ed eseguiti dal browser (Javascript, VBS) e nuovi sistemi server-side per una migliore interazione dell'utente: PHP, ASP,JSP... La differenza sostanziale tra linguaggi client-side e server-side è che i primi vengono eseguiti sulla macchina dell'utente mentre i secondi all'interno del server web.

HTML e PHP Presupponendo che tutti noi conosciamo, almeno in minima parte, l'HTML, iniziamo a discutere su come integrare codice PHP nelle nostre pagine web. Ovviamente è prima necessario configurare Apache HTTPD per il modulo PHP (in genere, nelle distro moderne, è già tutto apposto). Partiamo con il più classico “Hello World”: <html> <head> <title>Hello World</title> </head> <body> <?php echo “Hello World !”; ?> </body> </html> I tag <?php e ?> indicano ad Apache che il contenuto (in verde ) deve essere interpretato dal modulo PHP. E che il risultato deve essere incorporato nella pagina web. La cosa veramente interessante è che l'utente non ha modo di distinguere, dal browser, la differenza tra la pagina in HTML statico ed l'HTML generato dal PHP: per lui -il browser- è solamente HTML da renderizzare e visualizzare !

helloworld.php <html> <head> <title>1 - Hello World</title> </head> <body> Hello world ! </body> </html>

Data ed Ora <html> <head> <title>2 - Time and Date</title> </head> <body> <?php echo date(“r”); ?> </body> </html> La sintassi della funzione date() è su http://it.php.net/manual/it/function.date.php

Cascading Style Sheet Come probabilmente saprete, nella definizione di XHTML -l'ultima evoluzione dell'HTML definita dal consorzio W3C- è necessario separare le proprietà grafiche dal contenuto stesso della pagina. I CSS sono il sistema per definire come deve essere visualizzato un elemento (testo, div, frame, pulsante, immagine...) ed il browser (attenzione: i css sono client-side !), interpretanto le definizioni di stile, renderizza la pagina. Gli stili si possono definire per Id oppure per ogni elemento, a livello globale o per classe. A livello globale a { color: #000; } Per classe a:collegamento { color: #000; } Per Id #collegamentoA { color: #000; } Attenzione: in una pagina web ogni ID deve essere univoco !

Data ed Ora con CSS <html> <head> <link type='text/css' rel=stylesheet href='mycss.css'></link> </head> ... mycss.css: body { background: #CCC; margin: 10px; padding: 5px; } #copyright { color: #FC0; } a.link { color: #C0C; }

Il problema dei CSS I CSS hanno un grosso problema: non sono standardizzati ! O, meglio, esistono le linee guida del W3C ( http://www.w3.org/Style/CSS/ ) ma i produttori di browser -per motivi anche commerciali- hanno introdotto delle loro estenzioni o particolarità che rendono alcuni CSS dipendenti dal browser. In particolare si trovano pesanti differenze tra i browser Mozilla-like e Microsoft IE. Addirittura tra diverse versioni di IE ci possono essere grosse differenze ! Devo però ammettere che IE7 colma alcune pesanti lacune presenti nelle precedenti versioni. Rimane comunque universalmente accettato che i Mozilla-like sono i più attenti alle raccomandazioni W3C. Questo problema è importante perchè dobbiamo cercare di rendere il nostro sito Web il più possibile compatibile con i browser degli utenti. Una delle tecniche più diffuse è creare due fogli di stile: uno per IE ed uno per Mozilla e gli altri, e far interpretate al browser (con diversi sistemi, tra cui l'uso del PHP) il CSS corretto. Questo ci introduce al prossimo argomento, ovvero come facciamo a far interagire PHP con l'utente del nostro sito web.

Interazione Prima di iniziare a costruire il Nostro sito web interattivo, è importante avere ben chiara la natura client-server delle transazioni tra il server web e l'utente. L'utente richiede una pagina web, il server elabora e risponde: non c'è modo, per il server, di inviare dati all'utente di sua iniziativa. Questo ci deve portare a ragionare in termini di CAUSA ed EFFETTO. Ad esempio: CAUSA L'utente richiede una pagina con un form di registrazione. EFFETTO Il server invia al browser la pagina con il form. CAUSA L'utente compila i campi e preme il pulsante “Registrami” del form. EFFETTO Il server riceve i dati immessi dall'utente, elabora e poi risponde.

POST e GET Lo scambio di dati tra utente e server web avviene attraverso le variabili POST e GET. Queste variabili vengono inviate negli Header delle transazioni HTTP (HyperText Transfer Protocol) e sono accessibili, in PHP, tramite due array superglobali : $_POST e $_GET. Ok, non spaventatevi: è semplice ! Senza addentrarci nei meandri dell'HTTP (che però vi suggerisco di fare in un secondo momento) pensate a come è fatto un form: <form action='postform.php' method='post'> Variabile A: <input type='text' name='variabileA' /> Variabile B: <input type='text' name='variabileB' /> <input type='submit' /> </form> L'utente scrive dei valori nei campi (imposta il valore delle variabili) e successivamente, premendo il pulsante “Submit”, invia questi valori, incapsulati in una richiesta di tipo POST, al nostro server Web e precisamente a postform.php che si occuperà di elaborarli.

postform.php La matrice (Array) $_POST contiene due elementi: $_POST[“ variabileA ”] = “ uno ” $_POST[“ variabileB ”] = “ due ” N.B. Per la stampa dell'array ho usato la funzione print_r Notare l'URL !

getform.php Come prima la matrice (Array) $_GET contiene due elementi: $_GET[“ variabileA ”] = “ uno ” $_GET[“ variabileB ”] = “ due ” La differenza è il modo in cui vengono inviate le variabili. Notando l'URL si vede subito che nella richiesta di tipo GET le variabili vengono accodate. Notare l'URL !

...e allora ? La differenza importante tra POST e GET è che una richiesta di tipo GET può essere generata anche attraverso un hyperlink, mentre un POST solamente attraverso un form. Ad esempio, con AJAX si utilizzano le richieste di tipo GET per interrogare il server. Oltretutto nelle richieste di tipo GET tutte le variabili passate al server sono visualizzate nell'URL e questo può non essere desiderabile in certi casi. Per controllare e diagnosticare gli header, comprese le richieste POST e GET, si può usare una comoda estenzione di Firefox: LiveHTTPHeaders (http://livehttpheaders.mozdev.org/)

Riepiloghiamo In queste veloci slide abbiamo scoperto tantissime cose interessanti. Molte di queste non saranno chiare: è normale, in quanto la miglior scuola -in questi casi- è la pratica. L'importante è che siano chiari alcuni concetti fondamentali prima di continuare: - Le richieste sono sempre inviate dall'utente ed il server risponde ad esse - L'unica interazione con l'utente sono le Sue richieste (compresi i form) Adesso abbandoniamo per qualche minuto il web e l'html per introdurre MySQL, il nostro DBMS !

MySQL MySQL è un D ata B ase M anagement S ystem. La sua funzione, in termini pratici (mi perdoneranno i più esperti !) è ordinare, gestire, trovare e controllare i dati. Quali sono questi dati e come sono strutturati lo decidiamo noi. MySQL utilizza le tabelle, contenute in un database. In un DBMS ci possono essere -ed in genere è così- molti databases. Qualcosa tipo: MIOSITO Utenti Libri Dove MIOSITO è il nome del database ed Utenti e Libri sono due tabelle all'interno del DB MIOSITO .

DB e Tables La parte più difficile è costruire le tabelle ( Tables ). Dobbiamo pensare a tutti gli elementi (“tipi di dati”) che desideriamo avere. Un esempio classico è quello dell'anagrafica utenti di un sito web: gli utenti si registrano (con Username e Password ) ed inseriscono la loro e-mail per poter essere contattati. Ovviamente ciascun utente dovrà avere un username univoco (“chiave”) e voglio tenere traccia dell' IP da cui si collega ed a che ora ha effettuato l' ultimo accesso . La nostra tabella “Utenti” potrebbe essere composta da queste colonne : username VARCHAR(20) PRIMARY KEY password VARCHAR(20) e-mail VARCHAR(50) ip VARCHAR(13) ora_ultimo_accesso DATETIME Ovviamente devo dire al mio DBMS sia il nome che il tipo dell'elemento (ad es. VARCHAR) ed eventuali sue caratteristiche (ad es. PRIMARY KEY). N.B. Consultare http://www.mysql.com per ulteriori informazioni in merito alla sintassi.

Tables Ovviamente vorremmo far fare qualcosa ai nostri utenti ! Ipotizziamo di voler offrire un servizio in cui l'utente consulta ed inserisce recensioni sui libri che ha letto. Necessitiamo percui di una ulteriore tabella, Libri . Un libro è composto da un Titolo , un eventuale Sottotitolo , un Autore ed un Editore . Pertanto la nostra tabella “Libri” potrebbe essere: titolo VARCHAR(255) PRIMARY KEY sottotitolo TEXT autore TEXT editore TEXT N.B.: L'attributo PRIMARY KEY su titolo indica che non possiamo avere due libri con lo stesso titolo. Per il momento dirrei che è sufficente per iniziare a lavorare, mettendo insieme tutto quello che abbiamo imparato fino ad ora. Iniziamo pertanto a creare il database MIOSITO e le due tabelle Utenti e Libri. N.B. Utilizzate delle comode interfacce grafiche, ad es. MySQL Query Browser: eviterete di impazzire dietro ai comandi SQL !

PHP e MySQL Da PHP è facile accedere ed utilizzare MySQL grazie a tante funzioni che ci semplificano molto la vita ( http://it.php.net/manual/it/book.mysql.php ). La prima cosa che dobbiamo fare, all'interno della nostra pagina web in php, è aprire la connessione al DB. Creiamo una comoda funzione OpenDB(): function OpenDB() { $db = mysql_connect(' localhost ',' UsernameDB ',' PasswordDB '); if($db == false) { echo "Errore di connessione al DB"; exit(); } mysql_select_db('MIOSITO',$db); return $db; } e poi, alla fine della pagina, chiudiamo la connessione: function CloseDB($db) { mysql_close($db); } N.B. Ricordatevi di modificare i parametri in verde per il vostro sistema.

Query SQL Il prossimo passo è imparare ad interrogare il nostro DBMS. Le operazioni fondamentali sono: SELECT [cosa] FROM [dove] WHERE [condizioni] [altro] INSERT INTO [dove] [cosa] UPDATE [dove] SET [cosa] WHERE [condizioni] DELETE [cosa] FROM [dove] WHERE [condizioni] N.B. La sintassi è molto complessa ed articolata: fate riferimento al manuale MySQL. Per eseguire le query sul ns server usiamo la funzione PHP mysql_query(). Ad esempio una SELECT: $result = mysql_query(“SELECT * FROM Utenti;”); if($result === false) { echo “Errore: “.mysql_error($db); exit(); } In caso di errore (ad. es. di sintassi o di connessione) la funziona ritorna false, altrimenti i risultati (anche 0) saranno disponibili tramite l'handle $result.

Popolare il DB Il nostro DB MIOSITO è ancora vuoto (una operazione di SELECT restituirà sempre un insieme vuoto) e per popolarlo dobbiamo inserire I dati attraverso l'operazione INSERT. Creiamo, con l'HTML ed il PHP, un sistema per la registrazione degli utenti: L'inserimento del nuovo utente avviene attraverso INSERT: INSERT INTO Utenti (username, password,email...) VALUES ('$username'...);

Autenticazione Autenticare un utente su un sito web vuol dire, in parole povere, controllare se esiste una riga nella tabella Utenti con username e password corrispondenti a quelle inserite dall'utente. Un operazione di SELECT è quello che ci serve: SELECT * FROM Utenti WHERE username='$username' AND password='$password'; Poi controlliamo se il numero delle righe restituite è > 0 oppure no: if(mysql_num_rows($result) > 0) { echo “Utente autenticato”; } else { echo “Oops: credenziali non valide !”; } Dopo che abbiamo verificato l'esistenza dell'utente dobbiamo prevedere un sistema per far ricordare al PHP che il nostro utente è valido. A questo scopo possiamo usare le sessioni ( http://it.php.net/manual/it/ref.session.php ), un sistema basato su cookies che permette di dichiarare variabili valide per l'intera sessione dell'utente sul nostro sito web.

Sessioni PHP Premetto dicendo che il discorso sulle sessioni PHP è estremamente controverso e ci sono state dispute in passato sul tema della sicurezza che vi spiegherò brevemente dopo. Le “sessioni” altro non sono che variabili valide -appunto- per tutta una sessione. Per usare questo meccanismo dobbiamo inserire la funzione <?php session_start(); ... ?> all'inizio di ogni nostra pagina web. Dopodichè useremo l'array $_SESSION[] per le nostre variabili “di sessione”. Ad esempio, per sapere se un utente è autenticato oppure no, possiamo controllare se esiste l'elemento $_SESSION[“AUTH”]: <?php if(isset($_SESSION[“AUTH”])) { echo “L'utente “.$_SESSION[“AUTH”].”è autenticato”; } else { echo “Utente anonimo.”; } ... ?>

Voglio una sessione ! La mia autenticazione rimane valida finchè non chiudo il browser oppure elimino volontariamente la sessione con la funzione session_destroy(); N.B. Questo meccanismo funziona solo se il browser accetta i cookies. Attenzione: non memorizzate MAI all'interno di una variabile di sessione la password (o altri dati sensibili) !

...e i libri ? Adesso che la nostra infrastruttura base è pronta e funzionante, possiamo passare a lavorare allo scopo finale del nostro sito: i libri. Utilizzando un sistema analogo a quello degli utenti, mettiamo a disposizione degli utenti registrati la possibilità di aggiungere un libro (inteso come scheda bibliografica) con INSERT oppure cercare all'interno del catalogo con SELECT. Ovviamente dovremmo predisporre una serie di form per semplificare il lavoro dell'utente:

Consultare il DB Ormai siamo quasi alla fine del nostro sito: l'utente può registrarsi, autenticarsi ed inserire le schede bibliografiche dei suoi libri preferiti. Ma mancano ancora le funzioni fondamentali per ogni database: la ricerca e lo scorrimento (“browse”). Affrontiamo per primi il browsing (”scorrimento”) perchè per la ricerca voglio introdurvi l'ultimo argomento del talk: Ajax. In questo caso lo scorrimento sarà una semplice SELECT * FROM Libri ORDER BY titolo DESC; :

Ricerca Affrontiamo adesso uno degli argomenti più di discussi -talvolta a spoposito- del momento: Ajax ( A synchronous J avascript A nd X ML). Si tratta di una tecnica per inviare richieste dal browser al server web remoto senza la necessità di dover ricaricare la pagina web e visualizzando i risultati in un elemento della pagina stessa. Per farlo ci avvaliamo del Javascript (un linguaggio di scripting client-side ) e di un interessante oggetto XMLHttpRequest dei browser più diffusi e completi (Ajax non funziona, ad esempio, sui browser dei palmari o dei cellulari). Come sapete, possiamo “attaccare” event-handler agli elementi (“ widgets ”) di una pagina web, ad esempio l'<input> di un form: <input type=”text” name=”testo” onchange=”ajaxDoSearch(this.value,' resultDiv ');”> In questo caso, ogni volta che l'utente cambia il contenuto del widget il browser esegue la funzione ajaxDoSearch(this.value,'resultDiv'); N.B. this.value contiene il valore del widget in quel momento mentre resultDiv è l'ID del widget di destinazione che visualizerà il risultato del comando

AJAX e $_GET La funzione ajaxDoSearch(); invia una richiesta al server web e gli chiede -ad esempio- di visualizzare tutti i libri con titolo somigliante a quanto appena scritto dall'utente. Come ? Ma richiedendo una semplice pagina web, passando i parametri necessari attraverso $_GET ! function ajaxSendQuery(query,container) { ajaxpage('ajax_cb.php?ACTION=QUERY&VALUE='+query,container); } Immaginiamo che l'utente abbia scritto ' prom ' nel widget. Verrà inviata una richiesta al server web per ajax_cb.php?ACTION=QUERY&VALUE= prom ed ecco che il file ajax_cb.php saprà interpretare la richiesta e restituire I risultati, visualizzati nel browser dell'utente all'interno del widget con ID 'resultDiv':

The End Con l'implementazione della ricerca abbiamo terminato il nostro lavoro: Adesso abbiamo tutte le basi per creare un sito web funzionale, bello e divertente. E tutto con software OpenSource (ad eccezione di MySQL) !

Grafica con i CSS Sicuramente avete notato che, graficamente, non è fantastico. Ecco che entrano in scena in CS S, con cui possiamo cambiare l'impostazione della pagina come più ci aggrada. Come abbiamo visto, i CSS ci permettono di personalizzare l'aspetto grafico e la posizione degli elementi. Ad esempio: I CSS, insieme al Javascript, sono fondamentali per qualsiasi sito web della nuova generazione.

Riferimenti http://www.w3.org World Wide Web Consortium http://www.constile.org/ Come creare siti web con i fogli di stile e vivere felici http://www.php.net PHP Hypertext Processor http://wwwmysql.com MySQL http://developer.mozilla.org/En/AJAX Tutorial e riferimenti su AJAX http://validator.w3.org/ Validatore delle pagine web ...e tenete sempre http://www.google.com a portata di mano ! I sorgenti degli esempi di questo talk sono liberamente disponibili su http://www.zerozone.it/Documenti/Presentazioni/PHPLAMP/ ed io rimango a Vs disposione, per quanto possibile, all'indirizzo e-mail [email_address]

Domande ? Non siate timidi !!!

Lamp Ld2008

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (11)

Semelhante a Lamp Ld2008

Semelhante a Lamp Ld2008 (20)

Mais de Università di Siena

Mais de Università di Siena (13)

Lamp Ld2008