Il framework XAJAX

Vincenzo Della Mea

(PWLS 6.11, 6.12, 6.13)

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 1 Sommario • XAJAX – Principi e API • Un esempio semplice: – rivisitazione del cambio di colori dello sfondo della pagina corrente. • Un esempio complesso: – generazione “interattiva” del codice fiscale

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 2 XAJAX

• http://xajaxproject.org/ • Framework in PHP per lo sviluppo di applicazioni : – generazione automatica delle funzioni Javascript che ruotano attorno a XmlHttpRequest; – codice PHP per l’accesso al DOM della pagina (tradotto ovviamente in Javascript); – non è richiesta nessuna conoscenza di Javascript.

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 3 XAJAX: Oggetti principali

• xajax_core: – xajax – xajaxRequest – xajaxResponse – xajaxControl – xajaxPlugin • xajax_js: – DOM, events, CSS, … • xajax_controls: validatori (X)HTML, … • xajax_plugins: GoogleMaps, HTML table

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 4 Tipico pattern di utilizzo

• Solitamente si creano tre file PHP: – un file di configurazione, – un file per la componente lato server, – un file per la componente lato client. • Il file di configurazione viene incluso ed utilizzato dagli altri due.

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 5 XAJAX: cosa fare • Configurazione: – si include la libreria di classi xajax per mezzo del file xajax.inc.; – si dichiara ed istanzia un oggetto xajax; – si registrano i nomi delle funzioni fornite dal server e chiamate asincronamente dal client. • Server: – si include la configurazione; – si definiscono le funzioni registrate in modo che ritornino valori o modifichino il DOM; – si elaborano le richieste con apposito metodo processRequest. • Client: – si include la configurazione; – si genera il codice Javascript ($xajax->printJavascript();); – si mettono le chiamate alle funzioni registrate (prefisse da xajax_) nei soliti attributi (corrispondenti agli eventi del DOM).

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 6 Un esercizio semplice

• Rifacciamo l’esercizio dei colori visto introducendo la tecnologia AJAX: – svilupperemo una pagina web con tre campi di input in cui inseriremo tre numeri per i valori di R,G,B con cui impostare il colore di sfondo della pagina, – Il tutto “asincronamente” (senza ricaricare)

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 7 Preparazione • Dentro public_html creare una cartella ajax, e dentro di essa xajax • Scaricare xajax (standard) dentro xajax e decomprimerla: – wget http://xajaxproject.org/media/xajax/ 0.5_final/xajax_0.5_standard.zip • Voilà! • Metteremo i nostri due esercizi dentro la cartella ajax, includendo il necessario dalla cartella xajax Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 8 Configurazione: colori_config.php

configure(' URI','xajax/'); // registro l’unica funzione che servirò $xajax->register(XAJAX_FUNCTION,"ImpostaSfondo"); ?>

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 9 Server: coloriserver2.php assign("descrizione", "innerHTML", "Esadecimale: " . dechex($r). dechex($g).dechex($b)); $risposta->assign("corpo","style.background","rgb($r,$g, $b)"); return $risposta; } require("colori_config.php"); $xajax->processRequest(); ?>

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 10 Server: commenti

• Nella funzione servita creo una risposta, i cui metodi vanno a modificare il DOM: – metodo assign(dove, cosa, valore) • Le funzioni registrate sono quelle che intendo chiamare da Javascript, negli attributi! • Includo la configurazione. • Servo le richieste con ProcessRequest

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 11 Client: colori2.php Colori RGB printJavascript(); ?> R: G: B:

-

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 12 Client: commenti

• Deve essere un file PHP perché devo includere del codice Javascript generato automaticamente: – printJavascript(); ?> • Le funzioni registrate possono essere chiamate ove usuale, con il nome xajax_nomedefinitoinphp

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 13 Nota

• XAJAX 0.5 non è PHP 5 strict! • Nel caso in cui compaiano i seguenti messaggi: – Deprecated: Assigning the return value of new by reference is deprecated in … on line 360 – Deprecated: Assigning the return value of new by reference is deprecated in … on line 1305 • occorre editare il file xajax_core/xajax.inc.php nelle linee indicate (360 e 1305), eliminando il carattere ’&’.

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 14 Esercizio complesso: codice fiscale • Faremo una pagina web che calcola il codice fiscale man mano che inseriamo i dati anagrafici (nome, cognome, ecc.).

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 15 Codice fiscale

• Cognome: 3 caratteri: prime tre consonanti, se non ce ne sono a sufficienza anche le vocali, se non ce ne sono a sufficienza X. • Nome: 3 caratteri: prima terza e quarta consonante se ci sono, se no prime tre, se no come sopra. • Sesso e data di nascita: 2 cifre anno, una lettera per il mese (secondo una tabella apposita), 2 cifre per il giorno (+40 per le donne). • Comune: 4 caratteri presi da un apposito elenco; la provincia serve per discriminare tra comuni con lo stesso nome. • Infine, codice di controllo tipo digest, calcolato su caratteri pari e dispari del codice secondo due diverse tabelle di corrispondenza, diviso 26 -> il resto della divisione è un carattere dell’alfabeto.

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 16 Schema dell’applicazione

• Il server fornirà funzioni separate per ogni parte indipendente del codice fiscale. • Il client chiamerà le funzioni in uscita o modifica del contenuto del controllo in cui stiamo scrivendo. • I dati specifici per il calcolo del codice fiscale sono ospitati in vettori per comodità.

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 17 vettori_codice_fiscale.php (da /home/vdm/public_html/codicefiscale/…)

//codici mesi $mese= array( "1" => "A”, "2" => "B”, "3" => "C”, "4" => "D”, "5" => "E”, "6" => "H”, "7" => "L", "8" => "M”, "9" => "P”, "10" => "R”, "11" => "S”, "12" => "T”);

//codifica dei caratteri per il calcolo del carattere di controllo $codicedispari=array("0" =>1, "1" =>0,"2" =>5,"3" =>7,…,"Y" =>24,"Z" =>23); $codicepari=array("0" =>0, "1" =>1,"2" =>2,"3" =>3,…"Y" =>24,"Z" =>25);

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 18 codici_comuni.php

'A001', 'PD:ABANO TERME'=>'A001', 'CO:ABBADIA'=>'A002', 'TO:ABBADIA'=>'A003', 'TO:ABBADIA ALPINA'=>'A003', 'MI:ABBADIA CERRETO'=>'A004', … 'TN:LEDRO'=>'M313’, ); ?>

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 19 funzioni_codice_fiscale.php/1 2) return substr($code,0,3); foreach($vettore as $l) if(!in_array($l,$consonanti) AND !in_array($l, $altricaratteri)) $code .= $l; if(strlen($code)>2) return substr($code,0,3); else $code .= "XXX"; return substr($code,0,3); }

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 20 funzioni_codice_fiscale.php/2 function nome($c) { global $consonanti; global $altricaratteri; $c=strtoupper($c); $vettore= str_split($c); $code=""; foreach($vettore as $l) if(in_array($l,$consonanti)) $code .= $l; if(strlen($code)>3) return substr($code,0,1) . substr ($code,2,2); if(strlen($code)>2) return substr($code,0,3); foreach($vettore as $l) if(!in_array($l,$consonanti) AND !in_array($l, $altricaratteri)) $code .= $l; if(strlen($code)>2) return substr($code,0,3); else $code .= "XXX"; return substr($code,0,3); } Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 21

funzioni_codice_fiscale.php/3

//data di nascita: 01-12-2010, sesso: M o F function datanascita($d, $s) { global $mese; $code=substr($d, 8,2) . $mese[(integer) substr($d,3,2)]; $giorno = substr($d,0,2); if($s=="F") $giorno=$giorno + 40; $code.=$giorno; return $code; }

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 22 funzioni_codice_fiscale.php/4 function comune($c, $p) { global $codicecomune; $c=strtoupper($c); $p=strtoupper($p); $code=@$codicecomune[$p.":".$c]; if($code) return $code; else return "XXXX"; }

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 23 funzioni_codice_fiscale.php/5 function dispari($n) { return ($n % 2) == 1; } function controllo ($cf) { global $codicepari, $codicedispari; $cf=strtoupper($cf); $controllo=0; for($i=0;$i

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 25 Funzioni: commenti

• Implementazione non efficientissima, ma compatta. • str_split: trasforma una stringa in un vettore (di caratteri). • (integer)$VAL : casting del tipo (stringa-> intero). • strtoupper($s) : tutto in maiuscolo (per i confronti).

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 26 cf_config.php configure('javascript URI','xajax/'); //$xajax->configure('debug', true); $xajax->register(XAJAX_FUNCTION,"CalcolaCognome"); $xajax->register(XAJAX_FUNCTION,"CalcolaNome"); $xajax->register(XAJAX_FUNCTION,"CalcolaData"); $xajax->register(XAJAX_FUNCTION,"CalcolaComune"); $xajax->register(XAJAX_FUNCTION,"CalcolaControllo"); ?>

Utile per il debug durante lo sviluppo

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 27 Client: codicefiscale.php/1

Calcolo codice fiscale con AJAX printJavascript(); ?>

Calcolo codice fiscale con AJAX

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 28 Client: codicefiscale.php/2 Cognome: Nome:
Data di nascita (GG-MM-AAAA): Sesso:

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 29 Client: codicefiscale.php/3 Comune: Provincia: --- --- ----- ---- -

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 30 Commenti

• Il carattere di controllo viene calcolato ogni volta che nel form c’è una modifica: – anche se di fatto lo è solo se tutti i valori sono non nulli. • I singoli spezzoni di codice sono invece legati ai tag con onblur o onchange. • È possibile verificare il funzionamento già fin dall’inserimento della prima funzione nel server, passo passo.

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 31 cf_ajax_server.php/1 assign("cf1", "innerHTML", cognome($c)); else $risposta->assign("cf1", "innerHTML", "---"); return $risposta; } function CalcolaNome($c) { $risposta = new xajaxResponse(); if($c!="") $risposta->assign("cf2", "innerHTML", nome($c)); else $risposta->assign("cf2", "innerHTML", "---"); return $risposta; } Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 32 cf_ajax_server.php/2 function CalcolaData($d,$s) { $risposta = new xajaxResponse(); if (($d!="") AND ($s!="")) $risposta->assign("cf3", "innerHTML", datanascita ($d,$s)); else $risposta->assign("cf3", "innerHTML", "-----"); return $risposta; } function CalcolaComune($c,$p) { $risposta = new xajaxResponse(); if(($c!="") AND ($p!="")) $risposta->assign("cf4", "innerHTML", comune($c,$p)); else $risposta->assign("cf4", "innerHTML", "----"); return $risposta; } Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 33 cf_ajax_server.php/3 function CalcolaControllo($form) { $risposta = new xajaxResponse(); extract($form); if(($cognome!="") && ($nome!="") &&($data!="") && ($sesso!="") && ($comune!="") && ($provincia!="")) $risposta->assign("cf5", "innerHTML", controllo(cognome($cognome). nome($nome). datanascita($data,$sesso). comune($comune,$provincia))); else $risposta->assign("cf5", "innerHTML", "-"); return $risposta; }

$xajax->processRequest(); ?>

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 34 Server: commenti

• Tutte le funzioni verificano che gli argomenti siano non nulli prima di calcolare lo spezzone di codice: – se gli argomenti sono nulli il codice viene impostato a ‘----’ – e anche se il comune/provincia non esiste. • Tutte le funzioni impostano con il metodo assign la porzione di HTML che le riguarda. Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 35 Cosa ci abbiamo guadagnato? • Non abbiamo scritto codice Javascript. • Non ci siamo dovuti inventare un protocollo per chiamare le diverse funzioni – avremmo dovuto chiamare url diversi, oppure passare un parametro GET con il nome della funzione + altri per i parametri, da verificare poi nel numero e contenuto in modo diverso per ogni funzione. • Abbiamo incorporato nel server delle funzioni che sono usabili anche al di fuori.

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 36