Torna su

Supporto volontario e collaborativo per Joomla!® in italiano

Creare forms con ChronoForms

Valutazione attuale: 0 / 5

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
 

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 -> From 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.


Pubblicare il form

Nell'immagine precedente noterete un'icona rossa nella colonna Publish. Ormai dovreste riconoscerla perchè del tutto simile, nel disegno e nella funzionalità, a quella presente nella lista degli articoli o nella lista dei moduli. Cliccandoci sopra pubblichiamo (rendiamo attivo) il form.
Per visualizzare il form nell'area dei contenuti ci sono tre possibilità:
  1. creare una nuova voce di menù in uno dei menù di Joomla collegandola al componente Chronoform ed al form che abbiamo creato
  2. utilizzare il plugin rilasciato sul sito di Chronoengine per pubblicare il form all'interno di un articolo.
  3. utilizzare il modulo rilasciato sul sito di Chronoengine pubblicandolo in una posizione modulo non utilizzata nel template e successivamente inserendo il codice (dove nome_posizione è la posizione modulo in cui è stato pubblicato il modulo) in un articolo.

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.


In definitiva questo componente risulta abbastanza semplice (ad esclusione delle personalizzazioni che sfruttano i suoi plugin o l'aggiunta di codice php) e completo. Permette di inviare i dati inseriti nel form in una mail (ma questo lo fanno molti componenti) e soprattutto permette di memorizzare i dati in una tabella nel database.

N.B L'uso del componente è libero anche se il produttore invita ad effettuare una piccola donazione. Sul sito di Chronoengine però è esplicitamente spiegato che è illegale la rimozione del link "Joomla Professional Work" visualizzato in fondo ad ogni form a meno di non aver pagato per la sua rimozione e l'acquisto della licenza d'uso del componente. Per Chronoform il produttore consente di modificare l'aspetto del link attraverso il CSS ma non di nasconderlo.

CommentaCommenta questo articolo sul forum

 


Ultima versione di Joomla!®

downloadVer. 3.3.3 Stabile Italiana
Data di rilascio: 25 Luglio 2014
(leggi la notizia)

--> Demo online <--

Ver. 2.5.24 Stabile Italiana
Data di rilascio: 25 Luglio 2014
(leggi la notizia)

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Ultimi Download della community

Vuoi condividere anche tu dei file con la community? Puoi farlo liberamente, segui le indicazioni...

Joomla.it su Google Plus

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: