maidireJoomla.it

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

{magictabs width="90%"}

Il componente::

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.

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

||||

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:

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

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.

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.



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.


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.



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.



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::

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

{/magictabs}

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