Chronoforms della Chronoengine è un'estensione che crea form conosciuta 
ed affermata fra gli utenti di Joomla. Le discussioni su questa estensione sono fra le più frequentate e dimostrano un grande interesse per il suo uso nel nostro CMS. In questo articolo voglio mostrare le possibilità di azione che offre l'integrazione di Chronoforms con l'altro componente sviluppato dalla Chronoengine, denominato ChronoConnectivity.
ChronoConnectivity, è un prodotto meno conosciuto, di cui non si sente parlare spesso, forse anche perchè la documentazione non è molta. Nel sito c'è un tutorial ma che si riferisce ad una versione precedente, molto divesa da quellla rilasciata il 12.08.2009. La descrizione testuale è più o meno questa:
"ChronoConnectivity è un componente nativo per Joomla 1.5 che consente all'utente di visualizzare, modificare, eliminare i records di tutte le tabelle del database, nella zona admin di Joomla, ma anche elencare, modificare e cancellare i records delle tabelle nel frontend del sito". La descrizione è sintetica ma non nasconde nessuna delle sue possibilità.
La procedura del lavoro è questa. Con Chronoforms si crea un form per inserire da frontend i records di una tabella di database, con ChronoConnectivity è possibile visualizzare i records nel frontend e nel backend del sito, modificarli, cancellarli e ovviamente crearne di nuovi. Nel processo sarà possibile riutilizzare i forms prodotti da Chronoforms, o crearne specificamente di nuovi con altre caratteristiche da utilizzare per visualizzare e modificare i dati inseriti, tutti o una loro parte.
A mio modo di vedere questo accoppiamento consente una maggiore padronanza dei contenuti del database di Joomla e prospettive di lavoro davvero nuove, il cui limite, come in altri casi, è dato solo dalla fantasia di chi utilizza questi strumenti. Questo è quello che spero di riuscire a mostrare a tutti gli interessati.
Cosa occorre per partire in questa esperienza. Innanzi tutto le estensioni della Chronoengine:
1) Chronoforms. La versione oggi disponibile è la ChronoForms V3.1 RC5.5
2) ChronoConnectivity. La versione oggi disponibile è la ChronoConnectivity_V2_RC3.zip
3) Chronoforms plugin. La versioni oggi disponibile è la ChronoForms_Plugin_V3.1_RC5.2.zip
Effettuato il download dei pacchetti si procede normalmente alla loro installazione in Joomla. Dopo aver fatto le installazioni prima di procedere con altre azioni va attivato nel pannello dei plugin quello denominato Chronocontact, così non ce lo dimentichiamo quando servirà.
A questo punto abbiamo tutto e non ci resta che partire creando un form di prova da usare nel nostro percorso. Il form lo creeremo ovviamente con Chronoforms. In questo articolo darò per scontato che sappiamo fare questa operazione. Per chi non ha la memoria fresca su questa procedura o proprio non la conosce, rimando all'ottima guida di Cosimo Baviera (Bigham) presente proprio nella raccolta degli articoli di Joomla a questo link. Anzi sarà opportuno avere questa guida disponibile stampata o visibile. Un'altra raccomandazione prima di iniziare è quella di realizzare un bel backup per mettersi al sicuro da brutte sorprese.
Nel modello di form di prova, che con un grande sforzo di fantasia, ho chiamato "prova_form", creeremo pochissimi campi ma significativi per poter affrontare da subito dei problemi all'apparenza complessi, per dimostrare proprio la potenza degli strumenti disponibili. L'esempio che realizzeremo potrebbe essere l'embrione di una procedura per l'invio di foto di un concorso fotografico, ma anche di altre utilità che la fantasia ci suggerirà.
I campi che ho scelto sono:
1) nome2) cognome
3) email
4) file (un file di immagine allegato).
Allora creiamo il form, utilizzando i nomi sopra elencanti, e lo nominiamo prova_form. Per i fini di questo articolo non è importante, ma possiamo assegnare a questi campi la caratteristica di richiesti, poi per i primi due la validazione di campi alpha e per il terzo di campo email. Così il form risponderà con segnalazioni in caso di inserimenti incoerenti. Ricordo qui di abilitare nei settaggi del campo file allegato le estensioni di immagini così: jpg|png|gif e le dimensioni massime e minime in Kb dell'allegato. Non ho assegnato al form la possibilità di inviare email di risposta, come è possibile, il problema è già stato affrontato nella guida di Bigham e nel forum. Ma anche perchè l'uso che qui si vedrà va un po' oltre il semblice rapporto fra sito ed utente, ma diventa una vera applicazione per mostrare e modificare contenuti.
Realizzato il form la prima cosa da fare è quella di associare il form ad una tabella di datase per poter memorizzare i dati dei nostri inserimenti. Poichè, rispetto alla guida, le ultime versioni Chronforms hanno introdotto delle novità in qualche schermata, mostrerò di seguito come operare.
Se usciti, si rientra in Chronoforms e la prima schermata mostra l'elenco dei form. Dovremmo vedere il nostro prova_form ed alla sua sinistra una casella di selezione come in figura 1, la spuntiamo. Poi in alto nella barra dei comandi di Chronoform troviamo l'icona Create Table, come in figura 2, ci clicchiamo e si aprirà una finestra con una 
tabella che elenca i campi che possiamo inserire nella tabella, figura 3. In alto vi sono, colorati di verde, i campi che sono creati automaticamente dall'applicazione, in basso colorati in rosso quelli che abbiamo creato noi. Premiamo sul pulsante con v bianca su fondo verde a destra dei campi che abbiamo creato e questi diventeranno verdi. Finita l'attivazione dei campi. Nella casella di testo in alto nella banda grigia inseriamo il nome della nostra tabella jos_chronoforms_form_prova. 
Ora possiamo salvare il lavoro cliccando a sinistra in alto della tabella sull'icona nel floppy (dischetto, chissa quanti si ricorderanno cosa è ?).
Dobbiamo ora associare la tabella al form, questa procedura è già spiegata nella guida di Bigham la riassumo solo nei passaggi. Cliccare sul nome del form prova_form, poi sull'etichetta DB Connection, alla voce Enable data storage selezioniamo Yes, alla voce successiva Table Name selezionamo la tabella di nome jos_chronoforms_form_prova. Fatto questo possiamo salvare tutto cliccando sul dischetto in alto a destra.
Ora vediamo che nella colonna Tables Connected della riga del nostro form è apparso il nome della tabella appena creata. Alla sua destra nella colonna Publish premiamo il bottone rosso con la x per pubblicare e il bottone diventa la v verde.
Possiamo a questo punto assegnare il nostro form ad una voce di menù, procedendo normalmente la nominiamo Inserisci records e l'associamo al componente Chronoforms ed al nostro form prova_form.
Prima di proseguire oltre dobbiamo fare un'altra operazione che ci sarà utile in seguito, la copia del form. Guardando in alto vediamo il tasto Copy Form ci clicchiamo ed otteniamo la copia esatta del form già realizzato. Clicchiamo subito sul nome prova_form che è apparso in una riga più in basso (quello con il numero a sinistra maggiore) entriamo nella gestione del form e gli cambiamo subito nome assegnando il nuovo nome prova_form_copia. In seguito spiegherò i motivi che richiedono due form uguali (per ora......).
Da ora darò per scontato che il form realizzato funzioni perfettamente, altrimenti non possiamo proseguire (per eventuali problemi consultare la guida ed il forum di joomla.it).
Dal front-end del sito, cliccando sulla voce appena creata accediamo al nostro form e possiamo inserire i nostri dati. Lo stesso risultato si ottiene dal lato admin cliccando sul link a destra del nome del form nel pannello di Chronoforms.
Conviene inserire almeno 3 records riempiendo i campi nome, cognome, email e caricando il file allegato come richiederà il form.
Abbiamo concluso la fase preliminare e preparatoria ed abbiamo i nostri dati archiviati nel database e i file allegati in una cartella, che ha il nome del form, in questa posizione components/com_chronocontact/uploads/form_prova. Possiamo vedere i dati memorizzati dal back-end se entriamo in Chronoforms e clicchiamo sul nome della tabella che abbiamo appena creato. Si apre una nuova vista che ci mostrerà lo schema della nostra tabella.
E' già un bel lavoro questo, i nostri dati sono memorizzati, e se avessimo attivato le funzioni delle email del form avremmo risposto con messaggi agli utenti che ce li avevano inviati. Però sarebbe bello poter, con pochi comandi, vedere, selezionare, i dati nel front-end del sito, modificarli ed utilizzarli come dei contenuti. Bene questo è quello che tenteremo di fare ora con l'aiuto del componente ChronoConnectivity.
Poichè è il momento di ChronoConnectivity, entriamo nel componente. La finestra che si apre è coerente con quella dell'altro componente. In testa ci sono alcune informazioni, il link al forum e la richesta della validazione, unita alla precisazione che anche senza questa il tutto funzionerà ugualmente. In basso invece ci sarà la riga di sei colonne, connection, casella di selezione, nome, link, data e publish. In alto a destra ci sono i soliti bottoni di avvio delle varie azioni. E siccome dobbiamo iniziare clicchiamo subito sul pulsante Nuovo.
Faccio qui subito una premessa. Non esiste un tutorial di questa versione del componente. Quello esistente in inglese si riferisce al una vecchia versione. Per cui le informazioni che illustrerò sono frutto di un adattamento intuitivo del tutorial, altre tratte da una visita sul forum nel sito del produttore e altre derivano da un po' di esperienza su Chronoforms. Di alcune voci delle finestre non ho ancora chiaro il significato. Tuttavia quello che sono riuscito a fare mi sembra già interessante. Spero che questa pubblicazione costituisca uno stimolo anche per altri per studiare questo componente e svelarne tutte le funzionalità.
Bene, mentre dicevo quanto sopra, siamo entrati e la finestra che si apre, figura 4, ci dice subito che il nostro lavoro si svolgerà su cinque finestre: General, Frontend setting, Admin setting, Legend e Auto generated. Le ultime due non le ho evidenziate perche non sono operative ma informative, specialmente Legend che illustra l'uso di alcuni comandi da inserire nei testi che elaborermo, come quando si creano template delle email di Chronoform, se vi ricordate.
Iniziamo da General, possiamo subito occuparci del riquadro General setting inserendo il nome della connessione prova_connectivity e subito sotto in Table Name selezionamo la tabella che abbiamo creato con Chronoforms jos_chronoforms_form_prova.
Lasciamo bianchi i campi riquadro Query related setting, i quali per ora non ci interessano, ma dovrebbero essere funzionali a filtrare i records delle tabelle. Vediamo invece il quadro Connection View Setting questi campi di testo servono per stabilire come visualizzare le informazioni nel Frontend, assemblando una specie di template (già vedo Tonicopi e Conti1 che sfornano codice e istruzioni per questa sezione).
Ora conviene dare un'occhiata alla finestra Legend, la figura 5 mostra il contenuto che è intuitivo e ci dice, in inglese, come potremo richiamare varie funzioni ed i campi del form nelle tre sezioni Header, Body e Footer (Testa, Corpo e Piede della finestra che visualizzerà le informazioni).
{new_record} mostrera il link per inserire nuovi dati e può essere utilizzato in tutte le sezioni.
Le seguenti funzioni possono essere richiamate solo nella sezione Body:
{delete_record} mostreà il link che attiva la cancellazione dei records;{edit_record} mostrerà il link che richiamerà la finestra per modficare i dati inseriti;
{field_name} inserendo fra le parentesi graffe il nome del campo, es. {email}, visualizzeremo il contenuto del campo email nel body.
In Header, la testata, della visualizzazione in Frontend, dopo aver cliccato su + per aprire il campo, inseriamo qualcosa di semplice come in figura 6 seguito da due tag di andata a capo per dare spazio agli oggetti successivi.
Facciamo ora clik sul + di Body e qui dobbiamo inserire vari elementi HTML e PHP come in figura 7. Qui la cosa sembra a prima vista un po' più complessa, ma in realtà compreso il meccanismo la cosa diventa semplice. Ho affrontato qui il problema un po' più complicato della visualizzazione dell'immagine caricatata con il form. Ma vediamo la spiegazione delle cose inserite.
Nella prima riga ho inserito le chiamate per visualizzare il contenuto dei campi nome, cognome, email e due comandi di andata a capo per fare spazio.
Nelle righe seguenti ho utilizzato del codice php per visualizzare l'immagine caricata precedentemente con il form e archiviata nella cartella components/com_chronocontact/uploads/form_prova.
<?php $alfa="{file}"; $beta='<img alt="file" src="'; $gamma = 'http://' . $_SERVER['HTTP_HOST'] . "/" . basename(dirname($_SERVER['PHP_SELF'])); $delta="/components/com_chronocontact/uploads/form_prova/"; $teta='" />'; echo $beta.$gamma.$delta.$alfa.$teta ; ?>
Alla variabile $alfa viene passato il nome del file.
Alla variabile $beta è assegnata la prima parte dell'istruzione HTLM per puntare al file
Alla variabile $gamma viene passata l'url del sito compresa la cartella di Joomla.
Alla variabile $delta viene assegnato il percorso relativo della cartella dei file caricati.
Alla variabile $teta ho assegnato l'ultima parte dell'istruzione HTML.
Il comando echo $beta.$gamma.$delta.$alfa.$teta unisce le tre variabili per completare il tag img e lo trasforma nella riga di codice HTML necessaria per visualizzare l'immagine.
(può darsi che si possa scrivere un codice diverso per ottenere il risultato, ma questo è l'unico che sono riuscito a far funzionare)
Seguono ancora due andate a capo per quadagnare spazio.
Infine troviamo le chiamate delle funzioni che visualizzeranno i link per la modifica (edit) e per la cancellazione del record (delete).
In Footer, il piede della vista, inseriamo il codice che consente di visualizzare gli strumenti di navigazione nelle pagine eventualmente necessarie per contenere tutti i records. figura 8.
Nei rimanenti campi ho inserito i dati visualizzati in figura 9 e mi sembrano abbastanza intuitivi. In Header/Title sono inseriti, tanto per vedere qualcosa i nomi dei due componenti. Enable Mambots rimane disabilitato, sarebbe servito nel caso in cui ci fosse stata la necessità di usare dei plugin nel body.
List Limit rappresenta il numero di records visualizzati in una pagina, ho inserito 2 per visualizzare in due pagine i 3 records inseriti.
I successivi tre campi, Delete Link Code, Edit Link Code, New Link Code, figura 8b, prevedono l'inserimento di descrizioni tipo Modifica, Cancella e Nuovo che 
sarebbero visualizzate come link per attivare le rispettive funzioni. Qui per i primi due ho operato una modifica che ha funzionato e consente di visualizzare le consuete icone della cartella images di Joomla che attivano tali comandi. Le modifiche sono le seguenti:
<img src="/prova/images/cancel_f2.png" border="0" alt="ELIMINA" title="ATTENZIONE!! CLICCANDO ELIMINI I DATI" style="width: 20px;" />
<img src="/prova/images/edit_f2.png" border="0" alt="MODIFICA" title="Clik per modificare" style="width: 20px;" />
Ora si passa alla seconda finestra Frontend setting, figure 10 e 11, dove si vedono i nuovi campi da usare. In Record Edit Form si seleziona il nome del form da usare per visualizzare i dati nel FrontEnd e si seleziona il form copia che avevamo predisposto all'inizio, chiamato appunto prova_form_copia. Ora posso spiegare il perchè di questa manovra. Il primo form prova_form serve per inserire i dati e non mostra le immagini, il secondo form prova_form_copia viene invece utilizzato per vedere e modificare da frontend i dati già inseriti, quindi ho la necessità di inserire del codice (lo stesso già usato nella sezione Body) per vedere le immagini od altre cose. Prima della fine dell'articolo faremo queste modifiche.
Qui, credo, già si manifestino le potenzialità di questa combinazione. Potremo creare tanti form e tante connessioni ad essi, per quante saranno le necessità di visualizzare i dati memorizzati in qualsiasi tabella, anche quelle create da altri componenti di Joomla e dallo stesso Joomla (con prudenza qui !!).
Continuiamo il percorso troviamo il campo Skipped fields. Credo serva a non memorizzare campi che eventualmente non servono, poichè a noi servono tutti lo lasciamo vuoto.
I campi successivi che si vedono servono per abilitare gruppi di utenti e singoli utenti a compiere le varie operazioni descritte: vedere, modificare, cancellare e inserire nuovi dati. Io in questa prova proprio per vedere subito le funzionalità, per evitare di entrare ogni volta loggato e risparmiare tempo, ho abilitato il primo campo Public Users - Guests, cioè tutti i visitatori del sito, cosa che nessuno farà mai. Vi assicuro però che anche le altre combinazioni possibili funzionano.
Passiamo ora alla terza finestra Admin setting, come vediamo dalla figura 12, in questa sezione inseriremo le informazioni che serviranno alla visualizzazione della connessione nel lato backend, quindi accessibili all'amministratore. Alla voce Data View Fields Names selezioneremo i campi della tabella (quella scelta nella prima finestra General, che vorremo visualizzare. Io ho scelto in campo Id e gli altri del form.
Alla voce Data View Columns titles ho inserito i nomi che appariranno in testa alle colonne della visualizzazione nel backend, seguendo l'ordine della precedente voce.
Ultimo campo che useremo è Record Edit Form ed anche qui selezioneremo prova_form_copia. Per l'uso degli altri tre campi lasciati in bianco, che non sono fondamentali (sono in corso approfondimenti e saranno benvenuti contributi di tutti).
Possiamo ora salvare definitivamente il nostro lavoro. Non dimentichiamoci di publicare la connessione andando nella colonna Publish a destra clicchiamo sull'icona che diventa verde.
Resta un'operazione da compiere la modifica del form prova_form_copia per adeguarlo alle nostre necessità. Per fare questo rientriamo in Chronoforms, rientriamo nel form prova_form_copia, apriamo la finestra Form Code, facciamo clik sul + di Form HTML e nella casella di testo che si apre, figura 13, andiamo ad inserire il seguente codice proprio fra le righe riferite alla email ed all'allegato. Questo servirà a visualizzare nel frontend l'immagine fra i campi email ed il campo allegato
<div class="form_item">
<?php $alfa="{file}"; $gamma = 'http://' . $_SERVER['HTTP_HOST'] . "/" . basename(dirname($_SERVER['PHP_SELF'])); $beta='<img alt="file" src="'; $delta="/components/com_chronocontact/uploads/form_prova/"; $teta='" />'; echo $beta.$gamma.$delta.$alfa.$teta ; ?>
<div class="cfclear"> </div> </div>
Fatto questo salviamo il form e se non fosse pubblicato lo pubblichiamo come l'altro.
L'ultimo atto è assegnare una voce di menù alla nostra connessione. Creiamo una nuova voce di menu la chiamiamo Modifica records e l'associamo al componente Crono Connectivity ed alla nostra connessione prova_connectivity.
Andiamo nel frontend del sito, e se tutto ha funzionato, cliccando sulla voce di menù Modifica records vedremo una finestra tipo questa che mostra in modo spartano: nome, cognome, email e l'immagine che abbiamo precedentemente inserito. In basso i comandi di navigazione da un pagina all'altra che consentono di navigare per tutti i dati caricati.
Se ora clicchiamo sull'icona con la x rossa sotto un'immagine cancelliamo i dati, ma sarebbe un peccato togliere l'immagine delle ferie. Se invece clicchiamo su l'icona che richiama l'azione dell'edit e della modifica chiamiamo in attività il form prova_form_copia, che avevamo modificato, e che ci mostra, come volevamo, la seguente immagine, figura 15
Qui si conclude il nostro viaggio fra Chronoforms e ChronoConnectivity, spero che, per chi ha avuto la pazienza di arrivare fino a qui, sia stato interessante e utile. Vi saluto ed eventualmente ci troviamo sul forum di joomla.it
Vales
Commenta questo articolo sul forum 