Chrono Forms
(3 - voti utente)
Lunedì 30 Marzo 2009 20:16

ChronoEngine_logoIn questo articolo prenderemo in esame un componente per la creazione di Forms. Il componente si chiama Chronoform e lo possiamo trovare nella JED di joomla.org o sul sito del produttore.

 

Cosa è un form? è un termine usato, in informatica ed in particolare in ambiente web, per indicare l'interfaccia di un'applicazione che consente all'utente di inviare uno o più dati liberamente inseriti dallo stesso. Nella maggior parte dei casi il termine è riferito a form contenute in una pagina web: ad esempio le caselle di testo contenute in una pagina di registrazione costituiscono un form. Di solito i form vengono utilizzati per inviare dati ad un database oppure per inviare e-mail.

Normalmente per costruire un form si utilizzano i tag html ma nel caso di Joomla possiamo avvalerci di una vasta gamma di estensioni costruite appositamente per rendere più semplice la sua realizzazione. Quello che ho scelto è ChronoFrom.

La caratteristica principale di questa estensione, che la rende semplice e intuitiva, è l'uso di un wizard per la composizione del form. Questo wizard ha la grande prerogativa di utilizzare il drag&drop per creare i singoli elementi del form prendendoli da un pannello nel quale sono tutti elencati.


ChronoForm_elementi

Come si vede dall'immagine questi sono gli elementi inseribili in un form:
- heading                 è il titolo del form
- text                         testo libero
- textbox                 casella per l'inserimento del testo completa di etichetta
- passwordbox     come il TextBox ma maschera i caratteri inseriti
- textarea               area di testo
- dropdown           casella a discesa
- CheckBox            casella di selezione
- RadioButton       caselle di opzione
- DataTimePicker    campo data/ora con calendario
- FileUpload           invio file in upload
- HiddenField        elemento nascosto
- Captcha                 codice di sicurezza
- Button                    pulsante di invio dati

Creare un form.

Dopo aver installato il componente (si installa come tutti i componenti di Joomla) lo troverete elencato nel menù componenti. Selezionate dal menù Componenti -> Chrono forms -> Form Wizard e vi comparirà la seguente immagine:


ChronoForm_nuovo

Come potrete vedere vi viene presentata un'area in cui potrete inserire, uno sotto l'altro, gli elementi del forum semplicemente trascinandoli. Evidenziando ogni singolo elemento inserito potrete modificarne le proprietà (che variano a seconda dell'elemento selezionato). Potrete inserire il testo dell'etichetta, stabilire se il contenuto dell'elemento è obbligatorio (required) ecc.

Dopo aver modificato le proprietà di un elemento del form ricordatevi di cliccare sul pulsante Apply (Applica) in fondo al box delle proprietà.

Sono anche presenti tre pulsanti di comando: uno per visualizzare l'anteprima del form, uno per visualizzarne il codice html (nel caso si voglia modificarlo manualmente) e uno per salvare il form.

Nel salvare il form vi verrà chiesto di assegnargli un nome. Anche se non vi verrà richiesto espressamente NON usate spazi all'interno del nome. Se lo volete chiamare "Il mio primo form" scrivete "Il_mio_primo_form".

Vediamo una breve panoramica delle proprietà di un elemento TextBox.

In questa immagine potete vedere le proprietà che compaiono inserendo e selezionando un elemento TextBox


ChronoForm_proprieta

Il testo che scriverete nella Label (Etichetta) comparirà alla sinistra della casella di testo, il valore inserito nella casella Size (Dimensione) determinerà la lunghezza della casella di testo mentre MaxSize stabilirà il numero massimo di caratteri inseribili.
Le opzioni Valdidation (Validazione) consentiranno di stabilire il tipo di contenuto inseribile nella casella di testo. Se non viene selezionata alcuna opzione nella casella di testo potrà essere inserito qualsiasi tipo di carattere.
Nella casella tooltip è possibile inserire un testo che descriva il contenuto del textbox; in questo caso comparirà, accanto al textbox, una icona blu che, se indicata con il mouse, farà comparire il testo di descrizione.

Un'ultima ma importante proprietà è il Field Name (nome campo). Questo valore rappresenta il nome di riconoscimento che viene assegnato all'elemento del form. Dovrà essere diverso per ogni elemento (non usate lo stesso nome per due elementi del form).
Nel campo Field Name inserite una parola che corrisponda a ciò che conterrà l'elemento del form. Ad esempio se l'elemento del form conterrà un cognome inserite il termine cognome nel Feld Name. Questo vi aiuterà in seguito durante la composizione delle email o della tabella del database che conterrà i dati provenienti dal form.

Nel denominare un elemento del form usando la proprietà Field Name non utilizzate spazi o vocali accentate. Potrebbero darvi problemi soprattutto nella creazione della tabella del database. Al posto dello spazio usate il carattere underscore ( _ ).

Per modificare un form già creato sarà sufficiente selezionare dal menù Chrono forms la voce Froms Management, selezionare il form da modificare e cliccare sul pusalnte Wizard edit. Ci verrà riproposto l'ambiente del wizard per i form. Il wizard di Chronoform prosegue con altri tre passaggi per la definiziona di una mail di invio dei dati che non tratteremo in questo articolo.

Database Storage

Un'altra caratteristica interessante di questa estensione è la possibilità di memorizzare i dati provenienti da un form all'interno di una tabella appositamente creata nel database.
La procedura è molto semplice e ben descritta nelle guide scaricabili dal sito che distribuisce l'estensione. Una volta creato un form è sufficiente selezionarlo dall'elenco dei form e cliccare sul pulsante Create Table.
Verrà generata automaticamente una tabella contenente sia dei campi predefiniti sia i campi destinati ad accogliere i dati inseriti nei singoli elementi del form.

ChronoForm_CreateTable

I campi predefiniti si identificano facilmente: sono quelli che riportano il commento "Non modificare se non sai cosa stai facendo". Tra di essi notiamo il campo cf_user_id che è destinato a contenere l'identificativo dell'utente che inserisce i dati nel form (questo campo viene valorizzato solo se il form viene compilato da un utente registrato).

Come noterete dall'immagine di esempio i nomi assegnati agli altri campi (quelli che vengono ricavati dal form) ne individuano facilmente il dato contenuto. Se avessimo visto una lista di campi denominata text_1, text_2, text_3 non avremmo potuto distinguere un dato dall'altro.

Nella colonna Column Type possiamo stabilire il tipo di dato che verrà inserito nel campo. All'inizio tutti i campi della tabella sono definiti di tipo VARCHAR(255) ossia campi di testo con una capienza massima di 255 caratteri.
Nella scelta del tipo teniamo presente due cose: il numero massimo di caratteri che abbiamo assegnato ad ogni elemento del form e la tipologia del dato che abbiamo impostato nelle proprietà dell'elemento (soprattutto degli elementi TextBox).

Se nel form abbiamo definito un elemento destinato a contenere una data (e solo quella) nel database potremmo definire il suo corrispondente campo della tabella con il tipo DATETIME. Così se abbiamo definito un elemento del form destinato a contenere numeri possiamo scegliere il tipo TINYINT, SMALLINT o MEDIUMINT per i numeri interi o FLOAT, DOUBLE o DECIMAL per i numeri con decimali.

La scelta di una tipologia di dato da memorizzare in un campo della tabella presuppone una discreta conoscenza dei database MySQL. Quindi per un approfondimento in merito vi consiglio questa guida di html.it

Alla tabella verrà infine assegnato un nome. Viene proposto il nome della tabella del componente a cui aggiungere il nome del form o comunque un nome che ci ricordi cosa contiene quella tabella.

A questo punto non resta altro che collegare la tabella al form. Per fare questo selezioniamo Management Forms dal menù Chrono Forms e clicchiamo sul nome del form. Selezioniamo quindi la scheda DB connection.

ChronoForm_DBconnection

Impostiamo su Yes il valore del paramentro Enable Data storage (abilita memorizzazione nel database) e selezioniamo il nome della tabella dalla lista in Table Names (nomi tabelle). Salviamo le impostazioni e proviamo il form.

ChronoForm_AfterDBconnection
Per la prova del form basta cliccare sul link presente nell'elenco dei form in Management Forms e il form verrà aperto in un'altra tabella. Dopo aver effettuato una prova di inserimento e inviato il form torniamo alla lista dei form in Management Forms e clicciamo sul link nella colonna Tables Connected. Vedremo comparire i dati inseriti nel form letti dalla tabella, uno per ogni record inserito.

Redirect URL

Se volgiamo inserire una pagina di ringraziamento a cui reindirizzare l'utente dopo l'invio dei dati del form possiamo farlo utilizzando la proprietà Redirect URL contenuta nella scheda From Urls del form che abbiamo creato.

ChronoForm_AfterFormRedirectPage

Nella casella Redirect URL inseriamo l'url di un articolo che abbiamo preventivamente creato allo scopo.

AntiSpam

Se invece nel form abbiamo inserito l'elemento Captcha (Codice di sicurezza) per evitare gli spammer dobbiamo ricordarci di attivarlo dalla scheda Antispam del form.

ChronoForm_Antispam

In questa scheda impostiamo a Yes la proprietà Use image verification r impostare gli altri paramentri come nella figura precedente.

Menù Creator

Un'ultima interessante funzionalità, utile ma non indispensabile, è il Menù Creator. Con questa funzionalità è possibile creare, nel backend, dei menù di accesso ai dati inseriti in una tabella di database direttamente all'interno del menù Chrono Forms.


I Plugin

Per gli utenti più esperti sono disponibili alcuni plugin utilizzabili su specifici form. Ad esempio se creiamo un form di registrazione utente possiamo utilizzare i plugin CB Registration (bisogna avere CB installato) o Joomla Registration per far funzionare il nostro form come form di registrazione ed aggiungere delle personalizzazioni.
Oppure, con il plugin Watchman, creare un form utilizzabile sono da una classe di utenti (registered, author, editor, ecc.) ed attivare la visualizzazione del form per un determinato periodo di tempo.
Tutti questi plugin e gli altri che scoprirete nel componente permettono una maggiore integrazione con Joomla e una migliore personalizzazione dei form. Richiedono però delle conoscenze un pò più avanzate.



Per concludere, sul sito del creatore del componente sono presenti anche un modulo e un plugin. Queste due estensioni consentono di visualizzare un form all'interno di un contenuto (il plugin) o all'interno di una zona modulo (il modulo). Ciò non toglie che si possa usare il modulo per visualizzare un form all'interno di un articolo utilizzando e pubblicando il modulo in una posizione moduli non utilizzata nel template

Ecco un esempio di form. I dati inseriti in questo form vengono memorizzati in una tabella nel database.

Questo articolo è stato pubblicato si Joomla.it

 

Commenti

avatar Stefano
+1
 
 
Ottima guida!
volevo chiedervi una cosa come faccio a tradurre in italiano i termini nel front tipo:
- Choose option
- This field is required
- Please make a selection
Grazie!
un saluto
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar BigHam
+1
 
 
Direi che devi solo copiare il file di traduzione del componente /languages/en_GB/en-GB.com_chronocomments.ini nella cartella /languages/it_IT e rinominarlo in it-IT.com_chronocomments.ini. Poi ti armi di santa pazienza e traduci tutte le voci in italiano.
Sul forum di joomla.it c'è una discussione sul componente: http://forum.joomla.it/index.php/topic,63266.0.html
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar Francesco
0
 
 
Ciao BigHam,
perchè sia sulla JED di Joomla.org che sul sito del produttore è impossibile scaricare questa estensione?
Tra l'altro la JED fa il redirect sul sito del produttore, ma da li non se ne esce....

Mi puoi aiutare in qualche modo?

Francesco.
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar Francesco
0
 
 
Ciao BigHam,
non riesco a trovare il modo di scaricare questa estensione per i form, sia dalla JED di Joomla.org che dal sito del produttore.

Puoi aiutarmi?

Ciao e grazie.....
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar Matteo
+1
 
 
@ Francesco:
Ciao io ho appena scaricato questo componente dal sito del produttore e per farlo vai qui:
http://www.chronoengine.com/downloads/chronoforms/chronoforms-j1/85-component.html
e clicca su Download... Una volta scaricato installalo in Joomla e avrai il componente installato! Ciao
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar Kim
0
 
 
Ciao, trovo tutto molto interessante e da qualche giorno sto utilizzando questo strumento veramente forte.
Ho una domanda: come posso fare a vedere il contenuto della tabella creata dal form in una pagina in frontend e magari modificare o cancellare una riga?
Magari con i classici pulsanti modifica o elimina.
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar BigHam
0
 
 
Ciao Kim.
Purtroppo quello che vuoi fare non è previsto dal componente. L'unica soluzione è scrivere un componente apposito o modificare Chronoform (cosa che ti sconsiglio).
I dati memorizzati nella tabella collegata al form puoi vederli solo dal backend.
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar danilo
0
 
 
ciao. sto utilizzando da un po di tempo questo fantastico componente. Per i form, l'invio e-mail, il salvataggio nel database non c'è nessun problema e quindi non ho mai chiesto aiuto.
Ora però sto cercando di testare il plugin Joomla Registration: il problema è che non capisco come si faccia ad integrare con joomla.
Se conosci come si fa mi potresti dare delle delucidazioni in merito?
Grazie mille
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar Antonio
0
 
 
Ciao, ho appena configurato ChronoForms ma non mi arrivano le email....

Ho letto di inserire il captcha altrimenti la mia email inserita la vede come spam, ma non fà visualizzare l'immagine e l'email non la invia!

Come posso fare?
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar BigHam
0
 
 
Ciao Antonio.
Il captch serve solo per evitare che qualcuno che non ha niente di meglio da fare nella vita ti riempia il sito di commenti non graditi usando sistemi automatici di inserimento.
In questo modo è costretto a farlo manualmente e più di un paio di commenti ogni tanto non ti ritrovi.
Inoltre è un ulteriore sistema per evitare i tentativi di attacco con il metodo sql injection.

Per quanto riguarda l'invio delle email i motivi possono essere due:
a) errata configurazione del componente CF
b) errata configurazione dei parametri di posta nella configurazione del sito.

Ti invito a leggere questo post sul forum di Joomla:
http://forum.joomla.it/index.php/topic,58498.0.html

o eventualmente ad aprirne uno tuo.
Ciao
Cosimo
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar MultiMediaVda
0
 
 
Ottimissima guida!
Grazie
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
domandina: come si possono tradurre anche i mesi ed i giorni della settimana quando si attiva la visualizzazione del calendario per scegliere delle date?
grazie in anticipo!
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar BigHam
+1
 
 
Acc. Questa è davvero difficile.... :-D
Credo, ma è da provare, che si debbano modificare i due file: calendar.js e calendar2.js che si trovano nella cartella /components/com_chronocontacts/js.
Sono due script in javascript ma, vista la tua esigenza, non è difficile individuare le stringhe di caratteri da modificare.

Ciao
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar MultiMediaVda
0
 
 
Gradissimo! Funziona alla grande! Ti devo una birra!
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar BigHam
0
 
 
Due pinte di Guinnes!!! :-D
Grazie ma visto che abitiamo ai capi estremi dello stivale.... come se l'avessi già bevuta!! :-D
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar sonofabio
0
 
 
Ciao BigHam, grazie per la guida veramente utile.
Ho un piccolo problema da proporti.
Esiste un campo testo che mi faccia visualizzare solo 4 righe di testo alla volta (mi serve per la normativa sulla privacy) e che abbia uno scroller? Se uso il campo "Text" mi mette tutto il testo a vista, se uso il campo "text area", logicamente mi dà un campo dove inserire il testo (in frontend). Se puoi darmi una mano ti sarei veramente grato ( e debitore di due pinte di "Guinnes" logicamente). Ti saluto
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
avatar BigHam
0
 
 
Ciao.
A froza di pinete di Guinness mi sà che finisco 'mbriaco! :-D

La soluzione l'avevi quasi trovata: usare un campo textarea opportunamente dimensionato. Quello che ti manca è inserire il testo dell'informativ a in modo che compaia nell'area di testo.

Dal backend di Joomla accedi al Form Management di Chronoform e clicca sul nome del forum in modo da visualizzarne le proprietà. Clicca sulla scheda Form Code e poi sul simbolo [+/-] in corrispondenza di Form HTML. In questo modo visualizzerai il codice html che origina il form.

Individua il codice che da origine alla text area. Dovrebbe essere qualcosa del genere:

*textarea class="cf_inputbox" rows="5" id="text_3" cols="40" name="t_messaggio">
*/textarea>

(Attenzione al codice html! ho sostituito il carattere < con un *)

a questo punto non devi fare altro che inserire il testo, come in questo esempio:

*textarea class="cf_inputbox" rows="5" id="text_3" cols="40" name="t_messaggio">
Lorem ipsum ne mei ipsum urbanitas delicatissimi, fabulas saperet fierent nam ne. Cibo antiopam accusamus ut sed, cu cum eros definiebas. Nec te ullum choro aliquam. Ad altera putent abhorreant usu, cu ferri iriure democritum mel, at eum vide prompta luptatum. Eam no amet omnis aperiam.
*/textarea>


Le barre di scorrimento compariranno automaticamente se il testo supera le dimensioni della casella di testo.

Sul forum di Joomla ormai il componente Chronoform spopola. Tra discussioni ed articoli ci sono parecchie informazioni interessanti. Dagli un'occhiata.

Ciao
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento
Annulla
B
i
u
Quote
Code
List
List item
URL
Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions
Invia Commento