In questo articolo cercherò di illustrare il più semplicemente possibile, come realizzare un esempio di form realizzato tramite il componente Chronoforms della Chronoengine , contenente tre select (Regione, Provincia e Comune) che si popolano automaticamente e vicendevolmente , con i rispettivi valori di Regione Provincia e Comune Italiani, dati che saranno a loro volta presenti ogniuno in tre tabelle mysql , che verranno interrogate in modo asincrono tramite tecnologia Ajax (java sulla pagina html).

{linkr:related;keywords:joomla;limit:5;title:Articoli Correlati}

In questo articolo troverete tutto il codice necessario per realizzare quanto ci siamo prefissati.

Che cos'è Chronoforms

Chronoforms della Chronoengine è sicuramente uno dei componenti più interessanti e potenti disponibili in Joomla. Brevemente diciamo che, questo componente, permette di realizzare dei form di inserimento dati nel vostro sito Joomla, form altamente personalizzabili e che interagiscono direttamente con le tabelle del database mysql del sito, sia tabelle già esistenti che tabelle da noi create. Oltre a Chronoforms, esiste anche un' altro componente, sempre della Chronoengine, che si chiama Chrono Connectivity che integra Chronoforms, permettendo di eseguire modifiche sui record delle tabelle. In joomla.it, potrete trovare questo articolo scritto da vales, fondamentale per capire bene il funzionamento e la filosofia di funzionamento di questo componente. Dopo aver ben compreso la filosofia di funzionamento di Chronoforms, passiamo quindi a relizzare il nostro form ajax.

Per meglio comprendere quanto appena esposto riporto il link all' esempio. In questo link o dalla sezione download del sito, potrete invece scaricare i tre form da importare in chronoforms. Come già accennato, la particolarità di ajax e che il database viene interrogato con metodo asincrono. Ciò significa che, la pagina web, il form , non verrà ogni volta ricaricato per via dell' aggiornamento delle select dalle rispettive tabelle presenti nel database. Il progetto sarà composto da:

• Un form chiamato "form_ajax_inizio" che conterrà codice HTML e JAVASCRIPT/AJAX. Questo sarà il form principale e sarà il form contenente le richieste ajax.
• Un secondo form chiamato "form_ajax". Questo non sarà un vero e proprio form ma conterrà codice php di interrogazione del database e risponderà alle richieste provenienti da "form_ajax_inizio".
• Tre tabelle "jos_regioni" , jos_province" e "jos_comuni", contenenti rispettivamente i dati delle Regioni, Province e Comuni Italiani.

Tutti questi componenti, i codici necessari per creare i form e le tabelle di cui sopra, li troverete nel proseguimento di questo articolo.

Creazione delle tre tabelle contenenti Regioni, Province e Comuni nel database di Joomla.

Prima di passare ad analizzare la prima parte di codice, occorrerà predisporre il nostro database con le tre tabelle contenenti i dati di Regioni province e Comuni d' Italia. Per fare ciò,  vi riporto di seguito 3 file testo sql_comuni , sql_province , sql_regioni (link) contenenti ogniuno le query necessarie per generare agevolmente le tre tabelle tramite phpmyadmin , utilizzando la funzione importa o sql , o tramite altro strumento di interfacciamento al vostro db mysql. Le tabelle generate, avranno la seguente struttura: da notare i campi "id_provincia" , "id_regione" ed "id" che sono la chiave di estrapolazione dei dati (Ancona e Ascoli Piceno avranno infatti il medesimo "id_regione" e così via).

tabella mysql "jos_comuni"

tabella mysql "jos_province"

tabella mysql "jos_regioni"

Dimenticavo, onde evitare spiacevoli sorprese, prima di provare questo codice e di intervenire sul vostro database, fatevi un bel backup oppure provatelo in locale. Non mi assumo responsabilità su evetuali "incidenti" o danni involontariamente causati da questi codici !

Inizio creazione del form principale "form_ajax_inizio".

Vediamo ora di creare il primo form e di aggiungere successivamente il codice necessario. Se volete , per far prima, potete passare direttamente al capitolo 'Codice completo del form principale "form_ajax_inizio" ' e copiarvi il codice presente. Entriamo dunque in Chronoforms, selezioniamo il menù "Form Wizard" per creare il nostro form. Tale form, conterrà tre select (DropDown) rispettivamente per Regione, Provincia e Comune da selezionare ed un campo text (TextArea) su cui inseriremo il testo da inserire e memorizzare nel database, alla pressione del bottone Invia messaggio. Salviamo il nostro form con il nome "form_ajax_inizio". Il codice generato da Chronoforms , con opportune modifiche effettuate manualmente, sarà il seguente (il codice completo è nella seconda videata quì di seguito e potete utilizzare quello per le vostre prove):

codice iniziale del form "form_ajax_inizio"

<p><div id="attesa"> </div></p>

 <div class="form_item">
 <div class="form_element cf_dropdown">
 <label class="cf_label" style="width: 150px;">Regione</label>
 <select onchange="PopolaProvince()" id="select_regioni" size="1" name="select_regioni">
 <option value="00">Seleziona una regione...</option>
 <?php
 $database = &JFactory::getDBO();
 $sql = "SELECT * FROM #__regioni";
 $database->setQuery($sql);
 $results = $database->loadAssocList();
 /*quì sotto, la variabile $regioni vierne popolata con il nome
 *delle regioni è il loro id, generando quindi un output sequenziale
 *del tipo "<option value=19>Piemonte</option> <br />........"
 */ 
 for($i=0, $ct=count($results); $i < $ct; $i++) {
 echo "<option value=".$results[$i]['id'].">".$results[$i]['name']."</option> <br />";
 }
 ?>          
 </select>

 </div>
 <div class="cfclear">&nbsp;</div>
 </div>

 <div class="form_item">
 <div class="form_element cf_dropdown">
 <label class="cf_label" style="width: 150px;">Provincia</label>
 <select class="cf_inputbox" id="select_province" size="1" title=""  name="select_province" onchange="PopolaComuni()">


 </select>

 </div>
 <div class="cfclear">&nbsp;</div>
 </div>

 <div class="form_item">
 <div class="form_element cf_dropdown">
 <label class="cf_label" style="width: 150px;">Comune</label>
 <select class="cf_inputbox" id="select_comuni" size="1" title=""  name="select_comuni">


 </select>

 </div>
 <div class="cfclear">&nbsp;</div>
 </div>

 <div class="form_item">
 <div class="form_element cf_textarea">
 <label class="cf_label" style="width: 150px;">Messaggio</label>
 <textarea class="cf_inputbox" rows="2" id="text_3" title="" cols="30" name="text_messaggio" ></textarea>

 </div>
 <div class="cfclear">&nbsp;</div>
 </div>

 <div class="form_item">
 <div class="form_element cf_button">
 <input value="Invia Messaggio" name="button_4" type="submit" />
 </div>
 <div class="cfclear">&nbsp;</div>
 </div>

Da notare che, nel codice sopra riportato, rispetto al codice originale generato dal wizard di creazione form, per il momento ho aggiunto gli attributi id delle tre select  e da notare l' aggiunta degli eventi onchange delle select Regioni e Province (queste aggiunte saranno necessarie per un corretto funzionamento con gli script java/ajax che vedremo fra poco). E stata aggiunta anche una riga di codice (la prima)  contenente un tag DIV che verrà popolato con un messaggio di attesa, durante il caricamento delle select dal database. Per ultimo (ma non per importanza) , come noterete, è stato aggiunto codice PHP per popolare la select delle Regioni al caricamento della pagina. Spero che i commenti inseriti siano già di per se esplicativi.

Codice completo del form principale "form_ajax_inizio"

Ora, al codice appena esposto sopra, è necessario aggiungere gli script java e ajax per permettere di popolare le due select con i rispettivi valori di Provincia e Comune , presenti nelle due tabelle del database di joomla viste precedentemente. Ricordo che la select delle Regioni, come appena detto, viene popolata al caricamento iniziale della pagina/form. Il codice definitivo sarà il seguente. Noterete che gli eventi inseriti nelle select Regione e Provincia richiameranno rispettivamente le funzioni PopolaProvince e PopolaComuni.

codice completo del form "form_ajax_inizio". Potete creare il vostro form "form_ajax_inizio" tramite chronoforms->forms management e incollarci questo codice.

<script type="text/javascript">
var id_select_to_write = "";//variabile globale della select html da scrivere

function PopolaProvince() {
 if (document.getElementById("select_regioni").value == "00"){
 alert ("Attenzione: Devi selezionare una regione.")
 SvuotaSelect('select_comuni');
 SvuotaSelect('select_province');
 return;
 }
 document.getElementById("attesa").innerHTML = ' Attendere....'; 
 CosaFare = "PopolaProvince";
 SvuotaSelect('select_comuni');
 SvuotaSelect('select_province');
 id_select_to_write = "select_province";
 var id = document.getElementById("select_regioni").value;
 var url = "index2.php?option=com_chronocontact&chronoformname=form_ajax&Funzione="+CosaFare+"&id="+id;
 new Ajax(url, {
 method: 'get',
 onComplete: parseResult
 }).request();

}

function PopolaComuni() {
 document.getElementById("attesa").innerHTML = ' Attendere....'; 
 CosaFare = "PopolaComuni";
 id_select_to_write = "select_comuni";
 var id = document.getElementById("select_province").value;
 var url = "index2.php?option=com_chronocontact&chronoformname=form_ajax&Funzione="+CosaFare+"&id="+id;
 new Ajax(url, {
 method: 'get',
 onComplete: parseResult
 }).request();
}


function parseResult(request)
{
var msg = request.split('##@##');
document.getElementById("attesa").innerHTML = "";
document.getElementById(id_select_to_write).innerHTML=msg[1];
if(document.all)
{
 ie = "<option>opzione</option>" + msg[1];
 document.getElementById(id_select_to_write).innerHTML=ie;
 document.getElementById(id_select_to_write).outerHTML = document.getElementById(id_select_to_write).outerHTML;
}else{
 document.getElementById(id_select_to_write).innerHTML=msg[1];
}
if (CosaFare == "PopolaProvince"){
 PopolaComuni();
}
}

//questa funzione svuota la select "id_select" nella pagina html
function SvuotaSelect(id_select){
 num_option=document.getElementById(id_select).options.length;
 for(a=num_option;a>=0;a--){
 document.getElementById(id_select).options[a]=null;
 }
}

</script>

<p><div id="attesa"> </div></p>

<div class="form_item">
 <div class="form_element cf_dropdown">
 <label class="cf_label" style="width: 150px;">Regione</label>
 <select onchange="PopolaProvince()" id="select_regioni" size="1" name="select_regioni">
 <option value="00">Seleziona una regione...</option>
<?php
$database = &JFactory::getDBO();
 $sql = "SELECT * FROM #__regioni";
 $database->setQuery($sql);
 $results = $database->loadAssocList();
 /*quì sotto, la variabile $regioni vierne popolata con il nome
 *delle regioni è il loro id, generando quindi un output sequenziale
 *del tipo "<option value=19>Piemonte</option> <br />........"
 */ 
 for($i=0, $ct=count($results); $i < $ct; $i++) {
 echo "<option value=".$results[$i]['id'].">".$results[$i]['name']."</option> <br />";
 }
?>          
 </select>

 </div>
 <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
 <div class="form_element cf_dropdown">
 <label class="cf_label" style="width: 150px;">Provincia</label>
 <select class="cf_inputbox" id="select_province" size="1" title=""  name="select_province" onchange="PopolaComuni()">


 </select>

 </div>
 <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
 <div class="form_element cf_dropdown">
 <label class="cf_label" style="width: 150px;">Comune</label>
 <select class="cf_inputbox" id="select_comuni" size="1" title=""  name="select_comuni">


 </select>

 </div>
 <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
 <div class="form_element cf_textarea">
 <label class="cf_label" style="width: 150px;">Messaggio</label>
 <textarea class="cf_inputbox" rows="2" id="text_3" title="" cols="30" name="text_messaggio" ></textarea>

 </div>
 <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
 <div class="form_element cf_button">
 <input value="Invia Messaggio" name="button_4" type="submit" />
 </div>
 <div class="cfclear">&nbsp;</div>
</div>

Soffermiamoci un pò su questo codice. Più in dettaglio. Le funzioni  PopolaProvince() e PopolaComuni() , vengono richiamate rispettivamente al verificarsi dell' evento "onchange" della select con id "select_regioni" e della select con id "select_province". In pratica, quando nella form cambia la regione viene attivata PopolaProvince() mentre quando cambia la provincia, viene richiamata PopolaComuni(). Ma cosa fa PopolaProvince() ? Analizziamo il codice punto per punto.

• verifica che sia stata selezionata una regione.

if (document.getElementById("select_regioni").value == "00"){
 alert ("Attenzione: Devi selezionare una regione.")
 SvuotaSelect('select_comuni');
 SvuotaSelect('select_province');
 return;
 }

• inserisce la scritta "Attendere..."  sull' elemento <div id="attesa"> della pagina html.

document.getElementById("attesa").innerHTML = ' Attendere....';

• Predispone il valore di alcune variabili, provvede a richiamare la funzione SvuotaSelect per azzerare le select Province e Comuni e ricava il valore (value) appena selezionato nella select Regioni , corrispondente alla Regione appunto appena selezionata.

CosaFare = "PopolaProvince";
 SvuotaSelect('select_comuni');
 SvuotaSelect('select_province');
 id_select_to_write = "select_province";
 var id = document.getElementById("select_regioni").value;

• Predispone l' url di interrogazione, richiamando il form "form_ajax" contenete il codice php di interrogazione del database e passando a quest' ultimo la richiesta specifica su cosa fare (p.e. Funzione=PopolaProvince&id=al val corrispondente alla regione appena selezionata) . Le righe seguenti, inviano la richiesta asincrona (ajax) al form "form_ajax" e attendono l' esito "onComplete" che richiamerà la funzione "parseResult". Questo costrutto è tipico di una chiamata ajax tramite libreria javascript "mootools", integrata in joomla (dalla versione 1.5 in poi di joomla). Nel mio caso, nei form creati con Chronoforms, non è stato necessario richiamare il caricamento di tale libreria altrimenti, potete provare utilizzando la seguente riga di codice: <script language="javascript" src="/mootools.js"></script>.In queste poche righe di codice e nella funzione "parserResult" , che vedremo fra poco, c'è il cuore della chiamata ajax asincrona. Si nota l' url, che sarebbe poi il file php contenente il codice di interrogazione del database, nel nostro caso il form "form_ajax" che vedremo fra pochissimo. Si nota anche onComplete, che è uno degli eventi che vengono gestiti in ajax, nelle fasi di interrogazione del database. Il risultato della chiamata , restituito da "form_ajax" tramite un semplice "echo", verrà gestito dalla funzione "parseResult".

url = "index2.php?option=com_chronocontact&chronoformname=form_ajax&Funzione="+CosaFare+"&id="+id;
new Ajax(url, {
method: 'get',
onComplete: parseResult
}).request();

Codice PHP completo del form di interrogazione database "form_ajax"

Quindi, prima di procedere con l' illustrazione di "parserResult" , creiamo un secondo form che chiameremo "form_ajax". "form_ajax", non è un vero e proprio form; infatti, il codice in esso contenuto è codice php che ha il compito esclusivo di restituire dati alla chiamata ajax presente su "form_ajax_inizio" , che sarà il risultato di query sql ritornato tramite la direttiva "echo".

Codice form "form_ajax". Potete creare il vostro form "form_ajax" tramite chronoforms->forms management e incollarci questo codice.

<?php
$database = &JFactory::getDBO();
$funzione = JRequest::getVar('Funzione', 0);
$id = JRequest::getVar('id', 0);


switch ($funzione){
 case "PopolaProvince" :
 $id_regione = $id;
 if ($id_regione) {
 $sql="SELECT * FROM #__province WHERE id_regione = '{$id_regione}'" ;
 $database->setQuery($sql);
 $results = $database->loadAssocList();
 for($i=0, $ct=count($results); $i < $ct; $i++) {
 $province .= "<option value=" . $results[$i]['id'] . ">" . $results[$i]['name'] . "</option> <br />";
 }
 }
 echo "##@##";
 echo $province;
 echo "##@##";
 break;

 case "PopolaComuni":
 $id_provincia = $id;
 if ($id_provincia) {
 $sql="SELECT * FROM #__comuni WHERE id_provincia = '{$id_provincia}'" ;
 $database->setQuery($sql);
 $results = $database->loadAssocList();
 for($i=0, $ct=count($results); $i < $ct; $i++) {
 $comuni .= "<option value=" . $results[$i]['id'] . ">" . $results[$i]['name'] . "</option> <br />";
 }
 }
 echo "##@##";
 echo $comuni;
 echo "##@##";
 break;

}
?>

Non mi sofferno più di tanto su questo codice. Si tratta di due query sql per estrapolare i dati di Province e Comuni in base all' id fornito. Il risultato delle query verrà ritornato tramite direttiva echo contenente una stringa html di costruzione delle option della select.

Torniamo al codice completo del form principale "form_ajax_inizio"

• Analizziamo la funzione parseResult, che ha il compito di elaborare ciò che viene ritornato dal codice php del form "form_ajax" ( che, come si diceva precedentemente, non è un vero e prorio form ma ha solo il compito di interrogare il database e fornire una risposta). Notare la riga di codice var msg = request.split('##@##');. Il form "form_aiax" , infatti, con la echo , dovrebbe restituire solo il risultato dell' interrogazione al database ma, in realtà, ciò non avviene in quanto vengono restituiti anche una serie di tag HTML insiti alla creazione del form medesimo tramite chronoforms. Nel nostro caso , però, tali tag restituiti assieme all' esitto dell' interrogazione del database e alla costruzione delle rispettive option, creerebbero problemi per cui, sul form "form_ajax", prima e dopo la echo di restituzione dati, vengono inserite due echo con stringa "##@##".Tale stringa, servirà dunque a delimitare la parte che interessa a noi estrapolare  , estrapolazione che verrà eseguita con la request.split('##@##');. Le righe di codice racchiuse tra le parentesi graffe, dopo la if(document.all) , servono ad individuare se il nostro browser è internet explorer. Infatti, senza queste righe di codice e con internet explorer, le select non si popolerebbero. Come al solito, internet explorer ha bisogno sempre di pezze (chiedo scusa a chi l' ho utilizza ma ,  mai pensato per esempio a Firefox ?). document.getElementById(id_select_to_write).innerHTML=msg[1]; , questa è la riga di codice che provvederà all' inserimento delle option della select. Da notare anche che, se CosaFare = "PopolaProvince" , verrà richiamata anche la funzione PopolaComuni , necessaria a ricavare le option dei comuni da inserire poi nella select dei comuni.

function parseResult(request)
{
var msg = request.split('##@##');
document.getElementById("attesa").innerHTML = "";
document.getElementById(id_select_to_write).innerHTML=msg[1];
if(document.all)
{
 ie = "<option>opzione</option>" + msg[1];
 document.getElementById(id_select_to_write).innerHTML=ie;
 document.getElementById(id_select_to_write).outerHTML = document.getElementById(id_select_to_write).outerHTML;
}else{
 document.getElementById(id_select_to_write).innerHTML=msg[1];
}
if (CosaFare == "PopolaProvince"){
 PopolaComuni();
}
}

Bene, direi che siamo a buon punto. Se siete riusciti a creare le tre tabelle, se siete riusciti a creare i 2 form ed incollarci i codici quì proposti tutto dovrebbe funzionare. Per provare , andate su chronoforms->forms management e cliccate sulla colonna link corrispondente al form "form_ajax_inizio" .

Inserimento dei dati in una tabella del database joomla

A questo punto adremo a realizzare l' inserimento del "messaggio" nel database. Per far ciò, utilizzeremo le funzionalità messe a disposizione da Chronoforms, creeremo quindi una tabella che conterrà i dati immessi dopo aver premuto il bottone "Invia Messaggio".

Andiamo quindi su chronoforms->forms management, selezioniamo con lo spunta "form_ajax_inizio" e clicchiamo sul bottone di menu "Create table".

Abilitiamo i 4 campi evidenziati in rosso (che , come vedete, hanno i nomi coincidenti con le tre select e la textarea del form "form_ajax_inizio")  cliccando sul segno di spunta verde (i

e quindi i 4 campi diventeranno verdi) e lasciamo il nome della tabella "jos_chronoforms_form_ajax_inizio". Salviamo con il bottone a simbolo di dischetto. Così facendo, abbiamo creato la tabella che conterrà i dati che verranno immessi dal form "form_ajax_inizio". Ora, entriamo nella configurazione del form "form_ajax_inizio", spostiamoci nel tab "DB Connection", impostiamo Enable Data Storage = yes e selezioniamo la tabella "jos_chronoforms_form_ajax_inizio" appena creata . Abbiamo quindi associato la tabella al form  "form_ajax_inizio".

Visualizzazione del risultato dell' inserimento del record.

A questo punto, tutte le volte che viene premuto il bottone "Invia Messaggio" nel form, nella tabella appena creata verrà aggiunto un record con i dati presenti sul form. Vogliamo che, appena inserito un record, ci venga mostrata una conferma dell' inserimento avvenuto. Per fare ciò, andiamo su chronoforms->forms management e creiamo un nuovo form che chiameremo "form_ajax_result". Spostiamoci sul tab "Form Code" e nel campo "Form HTML" inseriamo il seguente codice PHP:

<a href="http://www.dillofacile.netsons.org/index.php?option=com_chronocontact&chronoformname=form_ajax_inizio"> Inserisci Ancora </a><br/><br/>
<?php
$database = &JFactory::getDBO();//mi connetto al db joomla

 //quì sotto estraggo gli id e il messaggio dell' ultimo record inserito
 $sql="SELECT * FROM #__chronoforms_form_ajax_inizio ORDER BY cf_id DESC LIMIT 1";
 $database->setQuery($sql);
 $results = $database->loadAssocList();
 $idregione = $results[0][select_regioni];
 $idprovincia = $results[0][select_province];
 $idcomune = $results[0][select_comuni];
 $messaggio = $results[0][text_messaggio];

 //quì sotto estraggo il nome del comune
 $sql="SELECT name FROM #__comuni WHERE id = '{$idcomune}'";
 $database->setQuery($sql);
 $comune = $database->loadResult();

 //quì sotto estraggo il nome della provincia
 $sql="SELECT name FROM #__province WHERE id = '{$idprovincia}'";
 $database->setQuery($sql);
 $provincia = $database->loadResult();

 //quì sotto estraggo il nome della regione
 $sql="SELECT name FROM #__regioni WHERE id = '{$idregione}'";
 $database->setQuery($sql);
 $regione = $database->loadResult();

 //quì sotto stampo il risultato
 echo "***Nuovo Record Inserito*** <br/>";
 echo "Regione = ". $regione . "<br/>";
 echo "Provincia = ". $provincia . "<br/>";
 echo "Comune = ". $comune . "<br/>";
 echo "Messaggio = ". $messaggio . "<br/>";

?>

Ora, torniamo su chronoforms->forms management , cliccare su form "form_ajax_inizio" e sul tab "general" inserire sul campo "redirect url" la stringa "index.php?option=com_chronocontact&chronoformname=form_ajax_inizio" , corrispondente al form che deve mostrare i risultati e che abbiamo appena creato.

Finalmente ci siamo. Abbiamo creato il nostro form, con tre select che prelevano i dati automaticamente da tabelle nel database , tramite ajax, il nostro form è in grado anche di memorizzare i dati in una tabella e mostrare il risultato dell' inserimento. Da quasto punto di partenza, possiamo costruire ed ampliare la nostra applicazione come più ci piace.

Grazie per la pazienza nella lettura di questo articolo. Spero vi possa essere utile e di stimolo. Lasciate i vostri commenti ed inserite le vostre esperienze. {jcomments on}

Pensi che questo articolo possa essere d' aiuto anche ad altri? Allora condividilo subito nel tuo social preferito.