4 giugno 2013 / Posted in Joomla

Questo articolo nasce con lintento di mostrare come creare form personalizzati, e come implementarli
nel nostro CMS.
Il componente che utilizzo nella guida Seblod estensione per joomla, che consente di creare nuovi tipi
di contenuto o ampliare quelli esistenti con campi personalizzati, facilitando la creazione di siti web,
rendendoli pi professionali.
In questo articolo faccio riferimento alla nuova versione diSEBLOD 3.x che non solo un
aggiornamento, ma comprende anche nuove e interessanti funzionalit, ed pienamente compatibile sia
con lultima versione di Joomla 3.x che con la 2.5
Obiettivo della guida sviluppare un sito web per la gestione di annunci immobiliari, creando un
modulo per inserire nuovi immobili.
Curioso, vedi la demo del form personalizzato
Dopo questa premessa, iniziamo subito.
Creare un form personalizzato per annunci immobiliari
Accediamo al backend del nostro sito web, nel
men di joomla selezioniamo Componenti e clicchiamo su SEBLOD 3.x, si apre il pannello di controllo
per la gestione del componente, clicchiamo sul pulsante Form & Content Type Manager.

Si apre una pagina, contenente alcuni form gi
realizzati, che possiamo eventualmente personalizzare, o prendere in riferimento duplicandoli.
Per creare un form, selezioniamo nuovo dal top men di Seblod,

si apre la pagina con la struttura del nostro from,
suddivisa in tre blocchi, la prima quella superiore, utilizzata per linserimento di dati principali del form,
nellarea di sinistra, vengono disposti i campi, nellarea di destra, ci sono i campi da utilizzare.
Per il nostro form, abbiamo bisogno di creare due viste una per ladmin(back end) gestibile solo
dallamministratore del sito e unaltra per il site(Front End) utilizzabile sia per utenti registrati che ai non
registrati.

Creare il form lato back end
Andiamo adesso a sviluppare il modulo per il
backend.
Nella pagina Form & Content Type creata precedentemente, troviamo nella prima riga il campo title, e
scriviamo il nome del modulo Annuncio immobiliare, nel campo App Folder selezioniamo in quale
cartella di seblod memorizzare il tipo di contenuto (nel nostro caso article), nella seconda riga
selezioniamo il tab Admin Form (visto che stiamo creando il form lato backend), nella terza riga nel
campo Object selezioniamo loggetto di Joomla, che nel nostro caso article (il form che stiamo
sviluppando crea articoli),
nella quarta riga nel campo Quick
Menu associamo il nostro form ad un men, e selezioniamo "Aggiungi a questo menu" riferito al Men
principale.
A destra del modulo Admin, troviamo la colonna contenente i campi utilizzabili per il form, basta
trascinare gli elementi, per inserirli nelle posizioni appropriate
Ogni campo o gruppi di campi posizionato in una determinata sezione (# MAINBODY, # RIGHT-A, #
TOPBODY ecc), queste sezioni non sono altro, che aree del form.
Possiamo vedere una panoramica delle posizioni
disponibili per i form di seblod, cliccando nel pulsante posizions nel menu in alto a destra. E
interessante notare la quantit di posizioni che abbiamo a disposizione, possiamo posizionare i campi nel
form, a destra o a sinistra, in alto o in basso, nellheader o nel footer, e in modalit invisibile
nellaposizione hidden.
Ho dato una piccola panoramica dellambiente di lavoro, ora iniziamo a creare i campi personalizzati
per il form.

Come inserire nuovi campi personalizzati nel form
Prima di creare un campo, scegliamo la sezione
dove deve comparire il campo nel nostro form, per far ci,selezioniamo il pallino a destra della sezione,
successivamente selezioniamo licona con il simbolo del pi nella colonna di destra, per crearlo.

Si apre una nuova finestra di lavoro, andiamo a
creare il primo campo chiamato indirizzo, nel title, scriviamo il nome del campo, nel campo type,
selezioniamo text(stiamo creando un campo dove possibile inserire una sola linea di testo).
Fatto questo, possiamo cliccare sul tasto salva e chiudi, nella barra degli strumenti di seblod in alto a
destra, per inserirlo nel nostro form.
Tutti gli altri campi linseriamo con questo procedimento, cambia solamente il tipo di campo ed il nome.
Dal modulo Admin, abbiamo la possibilit con le icone delle quattro frecce direzionali, presente nella
colonna di destra, di spostare un campo in su o in gi, consentendo di disporre i campi in un ordine ben
preciso.
Creiamo un altro campo, a differenza del primo
di tipo image, utilizzato per caricare una immagine nel nostro form. Andiamo a settare i valori del
campo, nel title scriviamofoto prospetto principale, nella sezione Constructioninseriamo il nome della
cartella dove vanno salvate le immagini caricate nel campo folder, nella sezioneProcessing settiamo le
impostazioni della Thumb, in modo tale che quando carichiamo una foto, creer in automatico una
immagine con dimensioni ridotte.
Al solito salviamo.
Proseguiamo il nostro lavoro inserendo un altro campo, nel title scriviamo Regione, nel type settiamo il
valore di tipo text, poi click sullicona salva per inserirlo nel form.
Ripetiamo tutti i passaggi del precedente campo anche per la Provincia, Comune, Prezzo, Superficie,
Servizi, Balconi, Classe Energetica, Spese Condominiali, Piani stabile, Anno di costruzione, Tipo di
Costruzione.
Inseriamo un altro campo, nel title scriviamo Descrizione, nel type a differenza dei precedenti di tipo
area di testo (textarea), campo che consente di inserire una grande quantit di testo, salva per inserirlo.
Creiamo ora un men a tendina, nel title scriviamo Tipo Offerta, nel type settiamo il valore simple, in
Options, inseriamo le voci: vendita e affitto.
Ripetiamo tutti i passaggi del precedente anche
per il campoCondizioni Immobile, gli elementi che lo compongono sono: Ottime Condizioni, Buone
Condizioni, Ristrutturato, Nuova Costruzione, da Ristrutturare.

Continuiamo la costruzione del nostro form personalizzato, e inseriamo un altro campo, che a differenza
dei precedenti sar di tipo radio button, nel title scriviamo Veranda, nel type settiamo Radio, in
Options inseriamo gli elementi della lista, con i seguenti valori: si per il primo, no per il secondo.
Ripetiamo tutti i passaggi del precedente anche per i campi Tipo riscaldamento, Posto auto, in Options
inseriamo gli stessi valori.
Successivamente inseriamo il campo per
la Galleria fotografica, in modo tale da caricare tutte le foto dellimmobile, nel title scriviamo "Foto
dellimmobile", nel type selezioniamo field X, questo tipo di campo deve essere associato ad un campo
di tipo immagine, e lo colleghiamo nella sezione field al nostro campo foto prospetto principale creato
precedentemente, successivamente nella sezione Maximum, impostiamo il numero massimo di foto che
possiamo caricare nella galleria, nel nostro caso scriviamo il valore 5, passiamo ad impostare se far
apparire nel campo i pulsanti aggiungi(Add), elimina(Del) o sposta immagini caricate(Drag), in modo
tale, quando lutente crea la galleria fotografica ha il pieno controllo sulle immagini caricate.
Come al solito salva e chiudi.
Se vogliamo eliminare un campo dal form,
basta utilizzare il pulsantino freccia.
Per modificare un campo, basta cliccare sullicona della matitina.

Andiamo ad inserire gli ultimi tre campi, quelli
pi importanti.
Campo del titolo dellannuncio immobiliare, questo campo esiste gi e si chiama Article Title e fa parte
dei campi che seblod crea di default per joomla, nella colonna a destra del modulo Admin cerchiamo il
campo Article Title e lo trasciniamo nel form, successivamente rinominiamo letichetta del campo in
"Nome dellimmobile". La stessa cosa facciamo con il campo Article State e nelletichetta
scriviamo stato dellarticolo, questo campo importate, perch permette di pubblicare o non pubblicare
larticolo. Lultimo campo e Article Category Id e nelletichetta scriviamo "Tipologia immobile", il
campo permette di categorizzare larticolo generato dal nostro form.
Le categorie del nostro sito sono: Appartamento, Attico, Box, ufficio, negozio, magazzino.

Il nostro form personalizzato lato back-end
terminato, salviamo il form e torniamo nella pagina iniziale delcomponente seblod, clicchiamo sullicona
a forma di cavalletto per testare il modulo Admin

Creare il form lato Front End
Passiamo ora a realizzare il form per il front
end, nellarea amministrazione di Joomla, selezioniamo il componenteseblod, apriamo il nostro Form
"Annuncio Immobiliare", e selezioniamo la scheda Site Form.
Per aggiungere tutti i campi creati precedentemente nel modulo admin, ci sono due metodi:
Il primo consiste di trascinarli o selezionarli uno per uno, facendo clic sulla freccia del campo, nella
colonna a destra del modulo Site.

Il secondo metodo, quello pi veloce, consiste nel
cliccare sul pulsante a forma di freccia, posizionato nella parte inferiore della colonna dei pulsanti.

Ci manca un ultimo campo, il bottone invio del
form,clicchiamo sullicona con il simbolo del pi nella colonna dei pulsanti, e creiamo un nuovo campo,
nel title scriviamo "Invia", nel type selezioniamo submit, nelletichetta scriviamo "Crea Annuncio
Immobiliare", e come al solito Salva e chiudi.
In fine Salviamo il form.

Creazione del Content
Passiamo ora a realizzare il content, cio la disposizione e la visualizzazione dei campi personalizzati
allinterno dellarticolo nel nostro caso lannuncio immobiliare creato dal form.
Apriamo il nostro form , selezioniamo il tab Content,
Inseriamo i campi creati precedentemente nel
modulo admin, con lo stesso procedimento che abbiamo utilizzato per il modulo site.
In fine salva e chiudi.

Testiamo il form personalizzato in joomla
Adesso siamo pronti a testare e verificare il nostro form.
Clicchiamo sul men del nostro sito, dove
abbiamo inserito il link al form Annuncio Immobiliare
Ci appare una pagina di login con un bel messaggio di errore, abbiamo verificato che non funziona, non
allarmiamoci, dobbiamo solo impostare le autorizzazioni per creare un articolo, tranne se non si loggati
come Author.

Ritorniamo nel back end di Joomla,
selezioniamo il componente SEBLOD 3.x, apriamo il nostro Form, clicchiamo sul pulsante con il
simbolo della freccetta, compare un box e selezioniamo il campo Permissions,

Si apre una finestra di dialogo, nel gruppo
publicallautorizzazione di base Crea, selezioniamo consentita, salviamo per impostare le
autorizzazioni, ritorniamo nel Form e clicchiamo su salva e chiudi.
Vi unaltro metodo per impostare le autorizzazioni di base, dal men di joomla cliccare su sito,
selezionareConfigurazione Globale e clicchiamo nel tab Permessi.
Questi due metodi si differenziano dal fatto che il primo riguarda solo quel form, il secondo metodo si
riferisce globalmente su qualsiasi form di joomla.

Ritorniamo sul sito clicchiamo su Annuncio
Immobiliare, compiliamo il form e clicchiamo su crea, dopo qualche secondo ci appare un messaggio
della avvenuta creazione del nostro annuncio immobiliare.

Se vogliamo, che il form ci restituisca larticolo
dellannuncio immobiliare creato, dobbiamo configurare il form in questo modo.
Ritorniamo nellarea amministrazione di Joomla, apriamo il nostro form, selezioniamo Site
Form e Configuration, nel campo Redirection selezioniamo Content, nel campoMenu Item
(List) impostiamo su annuncio immobiliare.

Conclusione
Bene, in questa guida, ti ho fatto conoscere come si crea un form personalizzato, rendendo pi
professionale il tuo sito web, con il componente SEBLOD 3.x per Joomla.
Per qualsiasi informazione ci possiamo trovare nel box dei commenti!
Grazie per lattenzione e Buon Lavoro!