Supporto volontario e collaborativo per Joomla!® in italiano

Segretariato sociale-info

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Prima parte.
Introduzione
.
La Legge 328/2000 prevede il Segretariato sociale come Servizio rivolto a tutti i cittadini per dare loro informazioni su servizi riguardo a prestazioni pubbliche e private. Queste informazioni appartengono a diverse aree: servizi sociali, servizi sanitari, ecc.
La tipologia degli utenti cui possono essere utili le informazioni è varia, ad esempio diversamente abili, anziani, famiglie con minori a rischio di devianza, immigrati, e così via.
Segretariato sociale-info è uno strumento per dare queste informazioni sul web, ed è complementare a un vero e proprio sportello fisico di Segretariato sociale.


Per realizzare l'applicazione che propongo in questo articolo è sufficiente conoscere le basi di Joomla! e delle due estensioni ChronoForms e ChronoConnectivity versione 5 della www.chronoengine.com
Da qualche mese di CF e CC sono state rilasciate le versioni 6, ma non esiste una vera e propria guida all'uso. Come non esiste una guida della versione 5.
Si possono trovare in rete vari articoli, post sui forum, tutorials e video tutorials.
Cito molti post del forum di Joomla! Gestione Form, sopratutto gli interventi di Vales programmatore ChronoForms di eccellente livello e autore delle due web application Albo pretorio on-line e Moduli scuola on-line. Con queste due applicazioni Vales ha realizzato un ottimo connubio tra ChronoForms e ChronoConnectivity, PHP , MySql, Javascript e MVC di Joomla!
Consiglio, inoltre, di consultare i tutorial sul sito www.icagenda.it ne troverete tanti e sono molto utili per capire come funziona ChronoForms e ChronoConnectivity.

Per motivi di spazio divido l'articolo in tre parti. Gli argomenti della prima e della seconda parte sono riferiti ai form per gli operatori di sportello (Registred). La terza parte fa riferimento alle informazioni in merito a ogni singola scheda informativa rivolta agli utenti. (Public)

Prima parte. Realizzazione del form per inserire le schede informative; Prima parte del menù di Joomla!
Seconda parte. Realizzazione del form per fare le modifiche alle singole schede ed eliminarle; Seconda parte del menù di Joomla!
Terza parte. Visualizzazione e Stampa delle schede per l'utente finale; Terza parte del menù di Joomla!

Come funziona l'applicazione.
L'amministratore di Joomla! (lato back end) dovrà realizzare i form con ChronoForms e le connessioni con ChronoConnectivity e i relativi menù.

L'applicazione sarà divisa in:
Parte riservata (modalità Registered), per la gestione dell'applicazione da parte degli operatori di sportello. L'amministratore creerà gli utenti che potranno accedere all'applicazione e inserire, modificare ed eliminare le schede informative.
Parte pubblica (modalità Public), destinata agli utenti finali che avranno la possibilità di vedere i contenuti delle schede informative.

L'applicazione è composta da:
1. Form per inserire le schede informative nel Database
2. Menù Joomla! Per creare i link ai form e alle connessioni
3. Form e connessione per effettuare le modifiche alle singole schede
4. Form e connessione per eliminare le singole schede
5. Form e connessione per visualizzare la lista delle schede ed ogni singola scheda da parte degli utenti, dandogli anche la possibilità di stampa.

1. FORM PER INSERIRE LE SCHEDE INFORMATIVE
Prima di iniziare la parte un po' più tecnica preferisco farvi vedere il form per l'inserimento dei dati nel Database.
Aprendolo si presenta con le Text Area in modalità chiuse. Ogni singola Text Area può essere aperta e chiusa con Apri e Chiudi da Radio Box.

Figura 1


Si intuisce subito che cliccando su Apri si apre la Text Area relativa all'argomento da popolare.

Figura 2


Per chi non avesse già installato sul proprio Joomla! CF e CC può farlo scaricando le versioni 5 da qui.
Fate il download di ChronoConnectivity 5 e ChronoForms 5. Installate per prima ChronoConnectivity con la solita procedura di installazione di un componente di Joomla! e poi installate ChronoFormS.

Iniziamo a realizzare il Form delle figura 1 e 2 con ChronoForms.

GENERAL DI CHRONOFORMS
Da ComponentiChronoForms5 → in Froms Manager clicchiamo sull'icona New

Figura 3



In General compiliamo il form nel seguente modo:
Form name: segr_soc_modulo_servizi_inserisci è il nome che daremo al form
Form description: FORM INSERISCI SCHEDE SERVIZIO
Published: Yes
Setup Mode: Advanced
Form App: facoltativo, scegliete voi cosa scrivere

Figura 4



DESIGNER DI CHRONOFORMS
Clicchiamo su DesignerBasic.
Qui iniziamo a trascinare tutti gli elementi che comporranno il form segr_soc_modulo_servizi_inserisci
Premetto che il nome del form può essere personalizzato, così come possono essere personalizzati i nomi di ogni singolo campo, nel senso che ognuno può chiamare il/i campo/i a suo piacimento.
Ma per i passaggi futuri che occorrerà fare con la configurazione dei form consiglio di mantenere il nome che gli abbiamo appena assegnato.
Il form sarà composto da un Container. Nel Container trascineremo tutti gli elementi che comporranno il form.
Inseriamo un Container da Advanced → trasciniamo il Contanier nell'area Designer di Chronoform. Nel Container non occorre fare altro.
Iniziamo a trascinare nel Container i seguenti elementi.
Da AdvancedCustom.
Adesso facciamo un clic su Edit del Custom
Label: svuotiamolo
Pure code: No
Code: scriviamo <B>SEGRETARIATO SOCIALE. INSERISCI NUOVA SCHEDA SERVIZIO.</B>
Un clic sul tasto verde Save and Close per chiudere e salvare ciò che abbiamo appena scritto nel Custom.
(L'elemento Custom è molto interessante perchè accetta codice puro in html, php, javascript)

Il testo appena scritto non è altro che l'intestazione del form.

Figura 5



AREA E ARGOMENTO.
Continuiamo ad inserire gli elementi.
Da AdvancedMulti Field → selezioniamo due Text Box

Figura 6



Clicchiamo su Edit del multi field → nel primo Text BoxGeneral:
Field name: area è il nome del campo
Field id: area
Label: AREA:
Label position: Top
Sub label: lasciamolo vuoto
Placeholder: scriviamo Max 50 caratteri
Max length: scriviamo 50
Size: scriviamo 33
Class: lasciamolo vuoto
Title: lasciamolo vuoto
Mask: lasciamolo vuoto
Extra params: lasciamolo vuoto

Figura 7



Nel successivo Tex Box seguiamo gli identici parametri del primo ma con una sola differenza, scriviamo in:
Field Name: argomento
Field Id: argomento
Label: ARGOMENTO:

Figura 8



Salviamo l'elemento cliccando sul pulsante verde Save and Close
A questo punto consiglio di salvare il lavoro appena fatto cliccando sull'icona Save (posta in alto a destra del Pannello del form di ChronoForms) e a continuare a salvare di tanto in tanto.

INFORMAZIONI
Continuiamo nella realizzazione del form inserendo da Basic → un Radio Box
Un clic su Edit del Radio Box per aprirlo.
General:
Field Name: informazioni_base
Field Id: informazioni_base
Options: 1=Apri 0=Chiudi
Checked Value: lasciamolo vuoto
Label: INFORMAZIONI:
Layout: selezionate Horizontal
Class: lasciamolo vuoto
Title: vuoto
Style: vuoto
Extra params: vuoto
Load state: Visible Enabled
Tooltip: vuoto
Enable ghost: No
Ghost value: vuoto

Figure 9 e 10.

Figura 9



Figura 10



In Events del Radio Box occorre configurare l'apertura e la chiusura di una Text Area che inseriremo successivamente.

Clic su Events → un clic su Add New Event in modo da ottenere un secondo evento.
Target fiel Id or Function name: scriviamo informazioni (informazioni sarà il nome che assegneremo anche alla Text Area).
On del PRIMO evento selezioniamo il segno =
Value selected: 1
Action: selezioniamo show parent
On del SECONDO evento selezioniamo !=
Value selected: 1
Action: selezioniamo selezioniamo hide parent
Target fiel Id or Function name: scriviamo informazioni

Dobbiamo ottenere la configurazione della figura 11

Figura 11



(In riferimento al Php, in On, abbiamo appena usato due operatori di confronto == !=)

Trasciniamo il nuovo elemento. Da BasicTextarea Box.
Field Name: informazioni
Field Id: informazioni
Field Value: vuoto
Label: vuoto
Label position: Top
Sub Label: vuoto
Placeholder: Informazioni. Max 2000 caratteri.
Rows: (altezza) 7
Columns: (larghezza) 70
Class: vuoto
Title: vuoto
Style: vuoto
WYSIWYG editor: No
Extra params: vuoto
Load state: Visible & Enabled
Tooltip: vuoto

Figura 12 e 13

Figura 12



Figura 13



In realtà il form viene sviluppato con la configurazione appena vista negli ultimi due elementi, tranne che per gli elementi che permetteranno di fare l'upload dei file che vedremo successivamente.

ULTERIORI INFORMAZIONI
General:
BasicRadio Box configuriamolo nel seguente modo:
Field Name: ulteriori_informazioni
Field Id: ulteriori_informazioni
Options: 1=Apri 0=Chiudi
Checked Value: lasciamolo vuoto
Label: ULTERIORI INFORMAZIONI:
Layout: selezionate Horizontal
Class: lasciamolo vuoto
Title: vuoto
Style: vuoto
Extra params: vuoto
Load state: Visible Enabled
Tooltip: vuoto
Enable ghost: No
Ghost value: vuoto

Clic su Events → un clic su Add New Event in modo da ottenere un secondo evento.
Target fiel Id or Function name: approfondimenti
On del PRIMO evento selezioniamo il segno =
Value selected: 1
Action: selezioniamo show parent
On del SECONDO evento selezioniamo !=
Value selected: 1
Action: selezioniamo hide parent
Target fiel Id or Function name: approfondimenti
Vedi l'esempio della figura 11.

Trasciniamo il nuovo elemento da BasicTextarea Box.
Field Name: approfondimenti
Field Id: approfondimenti
Field Value: vuoto
Label: vuoto
Label position: Top
Sub Label: vuoto
Placeholder: Informazioni. Max 2000 caratteri.
Rows: (altezza) 7
Columns: (larghezza) 70
Class: vuoto
Title: vuoto
Style: vuoto
WYSIWYG editor: No
Extra params: vuoto
Load state: Visible & Enabled
Tooltip: vuoto

AVVERTENZE
General:
BasicRadio Box configuriamolo nel seguente modo:
Field Name: avvertenze
Field Id: avvertenze
Options: 1=Apri 0=Chiudi
Checked Value: lasciamolo vuoto
Label: AVVERTENZE:
Layout: selezionate Horizontal
Class: lasciamolo vuoto
Title: vuoto
Style: vuoto
Extra params: vuoto
Load state: Visible Enabled
Tooltip: vuoto
Enable ghost: No
Ghost value: vuoto

Clic su Events → un clic su Add New Event in modo da ottenere un secondo evento.
Target fiel Id or Function name: avvertenze_2
On del PRIMO evento selezioniamo il segno =
Value selected: 1
Action: selezioniamo show parent
On del SECONDO evento selezioniamo !=
Value selected: 1
Action: selezioniamo hide parent
Target fiel Id or Function name: avvertenze_2
Vedi l'esempio della figura 11.

Trasciniamo un nuovo elemento da BasicTextarea Box.
Field Name: avvertenze_2
Field Id: avvertenze_2
Field Value: vuoto
Label: vuoto
Label position: Top
Sub Label: vuoto
Placeholder: Informazioni. Max 2000 caratteri.
Rows: (altezza) 7
Columns: (larghezza) 70
Class: vuoto
Title: vuoto
Style: vuoto
WYSIWYG editor: No
Extra params: vuoto
Load state: Visible & Enabled
Tooltip: vuoto
Vedi esempio figura 12 e 13.

MODULO PER LA DOMANDA
Adesso inseriamo un File Field che permette di fare l'upload del file principale della specifica domanda abbinata alla scheda dell'argomento trattato. Il file modulo cartaceo in formato .pdf-zip o rar è quello che l'utente finale potrà scaricare, compilare, eventualmente firmare ed inviare all'ente preposto ad accogliere la sua domanda.

Da Basic trasciniamo un File Field.
Field Name: doc_allegato
Field Id: doc_allegato
In Label: MODULO PER LA DOMANDA:
Label position: Top
Sub Label: scriviamo Accetta i formati: pdf-zip-rar max 2 MB
Class: vuoto
Title: vuoto
Style: vuoto
Multiple: No
Extra params: vuoto
Load state: Visible & Enabled
Tooltip: vuoto
Enable ghost: No
Ghost value: vuoto

Figura 14



DOVE INVIARE LA RICHIESTA.
General:
BasicRadio Box configuriamolo nel seguente modo:
Field Name: dove_inviare_richiesta_base
Field Id: dove_inviare_richiesta_base
Options: 1=Apri 0=Chiudi
Checked Value: lasciamolo vuoto
Label: DOVE INVIARE LA RICHIESTA:
Layout: selezionate Horizontal
Class: lasciamolo vuoto
Title: vuoto
Style: vuoto
Extra params: vuoto
Load state: Visible Enabled
Tooltip: vuoto
Enable ghost: No
Ghost value: vuoto

Clic su Events → un clic su Add New Event in modo da ottenere un secondo evento.
Target fiel Id or Function name: dove_inviare_richiesta
On del PRIMO evento selezioniamo il segno =
Value selected: 1
Action: selezioniamo show parent
On del SECONDO evento selezioniamo !=
Value selected: 1
Action: selezioniamo hide parent
Target fiel Id or Function name: dove_inviare_richiesta
Vedi l'esempio della figura 11.

Trasciniamo il nuovo elemento da BasicTextarea Box.
Field Name: dove_inviare_richiesta
Field Id: dove_inviare_richiesta
Field Value: vuoto
Label: vuoto
Label position: Top
Sub Label: vuoto
In Placeholder: Dove inviare la richiesta. Max 2000 caratteri.
Rows: (altezza) 7
Columns: (larghezza) 70
Class: vuoto
Title: vuoto
Style: vuoto
WYSIWYG editor: No
Extra params: vuoto
Load state: Visible & Enabled
Tooltip: vuoto
Vedi esempio figure 12 e 13

ULTERIORI DOCUMENTI DA ALLEGARE ALLA DOMANDA
Continuiamo e da Advanced trasciniamo un Custom e lo useremo come intestazione per i successivi elementi che inseriremo.
In Code: scriviamo <B>ULTERIORI DOCUMENTI DA ALLEGARE ALLA DOMANDA</B>:
In Label cancelliamo la scritta presente di default
Pure code:No

Figura 15



In un servizio di segretariato sociale può essere necessario allegare alla domanda principale (MODULO PER LA DOMANDA) ulteriori documenti e, a volte, il numero di documenti posso essere tanti. Pertanto ho ritenuto opportuno dare la possibilità di allegare fino a 6 diversi documenti con 6 File Field separati l'uno dall'altro.  E' importante che ogni file da allegare abbia una sua descrizione separata dagli altri file affinchè, l'utente finale, veda chiaramente quali moduli deve scaricare.

A questo punto dobbiamo inserire 6 Multi Field e ognuno di questi dovrà contenere un Text Box ed un File Field.
Pertanto, in questo articolo, per non perdere il percorso di configurazione li numeriamo.

Da Advanced trasciniamo un Multi Field e in questo selezioniamo un Text Box ed un File Field.

1. Da Edit apriamo il Multi Field appena inserito.
Per il Text Box.
Field Name: allegato1
Field Id: allegato1
Field Value: vuoto
Label: vuoto
Label position: Top
Sub Label: Allegato 1. Formati: pdf-zip-rar max 2 MB
In Placeholder: Descrizione max 50 caratteri.
Max Lenght: 50 (il numero massimo di caratteri che possiamo inserire)
Size : 50 (la larghezza del Text Box)
Class: vuoto
Title: vuoto
Style: vuoto
Mask: -
Extra params: vuoto
Load state: Visible & Enabled
Tooltip: vuoto

Scorrendo la barra verso il basso, troviamo l'elemento File Field.
Configuriamolo come segue:
Field Name: allegato_1
Field Id: allegato_1
Label: vuoto
Label position: Left
Sub Label: vuoto
Class: vuoto
Title: vuoto
Style: vuoto
Multiple: No
Extra params: vuoto
Load state: Visible & Enabled
Tooltip: vuoto
Enable ghost: No
Ghost value: vuoto

Da notare la differenza tra i due File Name e File Id. Il campo allegato1 è diverso dal campo allegato_1. L'underscore (trattino basso _ ) fa la differenza dei due campi. Questo servirà successivamente per le impostazioni del Setup e del file da allegare. Il Setup di Chronoform lo vedremo successivamente.

Abbiamo creato il primo file da allegare e la sua descrizione.

Ora occorre crearne altri 5 ed ognuno di loro deve dare la possibilità di allegare un file diverso e, come ho anticipato sopra, con una descrizione abbinata ad ogni singolo file allegato, l'ulteriore file del file principale della domanda.

2. Da Edit apriamo il Multi Field appena inserito.
Per il Text Box.
Field Name: allegato2
Field Id: allegato2
Field Value: vuoto
Label: vuoto
Label position: Top
Sub Label: Allegato 1. Formati: pdf-zip-rar max 2 MB
In Placeholder: Descrizione max 50 caratteri.
Max Lenght: 50 (il numero massimo di caratteri che possiamo inserire)
Size : 50 (la larghezza del Text Box)
Class: vuoto
Title: vuoto
Style: vuoto
Mask: -
Extra params: vuoto
Load state: Visible & Enabled
Tooltip: vuoto

Scorrendo la barra verso il basso, troviamo l'elemento File Field.
Configuriamolo come segue:
Field Name: allegato_2
Field Id: allegato_2
Label: vuoto
Label position: Top
Sub Label: vuoto
Class: vuoto
Title: vuoto
Style: vuoto
Multiple: No
Extra params: vuoto
Load state: Visible & Enabled
Tooltip: vuoto
Enable ghost: No
Ghost value: vuoto

3.Seguite la stessa procedura per gli altri 4 Multi Field apportando le modifiche solo in Field Name e Field Id allegato3, allegato_3, allegato4, allegato_4, allegato5, allegato_5, allegato6, allegato_6

TERRITORIO E STRUTTURE
Continuiamo con la solita procedura utilizzata con i precedenti elementi.
General:
BasicRadio Box configuriamolo nel seguente modo:
Field Name: territorio_base
Field Id: territorio_base
Options: 1=Apri 0=Chiudi
Checked Value: lasciamolo vuoto
Label: TERRITORIO E STRUTTURE:
Layout: Horizontal
Class: vuoto
Title: vuoto
Style: vuoto
Extra params: vuoto
Load state: Visible Enabled
Tooltip: vuoto
Enable ghost: No
Ghost value: vuoto

Clic su Events → un clic su Add New Event in modo da ottenere un secondo evento.
Target fiel Id or Function name: territorio
On del PRIMO evento selezioniamo il segno =
Value selected: 1
Action: selezioniamo show parent
On del SECONDO evento selezioniamo !=
Value selected: 1
Action: selezioniamo hide parent
Target fiel Id or Function name: territorio
Vedi esempio figura 11

Trasciniamo il nuovo elemento da BasicTextarea Box.
Field Name: territorio
Field Id: territorio
Field Value: vuoto
Label: vuoto
Label position: Top
Sub Label: vuoto
In Placeholder: Territorio e strutture. Max 2000 caratteri.
Rows: (altezza) 7
Columns: (larghezza) 70
Class: vuoto
Title: vuoto
Style: vuoto
WYSIWYG editor: No
Extra params: vuoto
Load state: Visible & Enabled
Tooltip: vuoto
Vedi esempio figura 12 e 13

FONTE INFORMATIVA
General:
BasicRadio Box configuriamolo nel seguente modo:
Field Name: fonte_base
Field Id: fonte_base
Options: 1=Apri 0=Chiudi
Checked Value: lasciamolo vuoto
Label: FONTE INFORMATIVA:
Layout: Horizontal
Class: vuoto
Title: vuoto
Style: vuoto
Extra params: vuoto
Load state: Visible Enabled
Tooltip: vuoto
Enable ghost: No
Ghost value: vuoto

Clic su Events → un clic su Add New Event in modo da ottenere un secondo evento.
Target fiel Id or Function name: fonte
On del PRIMO evento selezioniamo il segno =
Value selected: 1
Action: selezioniamo show parent
On del SECONDO evento selezioniamo !=
Value selected: 1
Action: selezioniamo hide parent
Target fiel Id or Function name: fonte
Vedi esempio figura 11

Trasciniamo un nuovo elemento da Basic Textarea Box.
Field Name: fonte
Field Id: fonte
Field Value: vuoto
Label: vuoto
Label position: Top
Sub Label: vuoto
Placeholder: Max 50 caratteri.
Rows: (altezza) 5
Columns: (larghezza) 50
Class: vuoto
Title: vuoto
Style: vuoto
WYSIWYG editor: No
Extra params: vuoto
Load state: Visible & Enabled
Tooltip: vuoto
Vedi esempio figura 12 e 13

In fine inseriamo il pulsante Submit che servirà a salvare le informazioni nel Database.
Da Basic trasciniamo un Submit Button
Il pulsante non ha bisogno di nessuna configurazione. Scriviamo solo SALVA in Value/Label

Figura 16



A questo punto abbiamo terminato il lavoro di inserimento degli elementi nell'area Designer di ChronoForms.
Prima di procedere nella lavorazione del Setup creiamo la tabella del form che salverà le informazioni delle scheda in MySql.
Salviamo e usciamo dal form cliccando su Save and Close.
Flagghiamo il form cliccando dentro il quadratino alla sua sinistra.

Figura 17



Adesso clicchiamo sull'icona in alto Create table

Figura 18



Si apre la pagina che permette di salvare e ottimizzare la tabella.
Per motivi di spazio ho inserito solo una parte della tabella.

Una delle caratteristiche che determina la potenza e la facilità d'uso (almeno a livello base) di ChronoForms è quella di creare e ottimizzare la tabella senza avere nessuna conoscenze di MySql o comunque dell'interfaccia grafica Phpmyadmin.

Continuiamo il lavoro ottimizzando a nostro piacimento la tabella.
In Table Name ChronoForms assegna il nome di default, modifichiamolo e diamogli questo nome: segr_soc_servizi
La colonna Lenght (ChronoForms di default assegna 255 caratteri al tipo varchar) contiene il numero di caratteri che saranno registrati in ogni singolo campo della tabella.
(A titolo informativo, dalla versione 5.0.3 MySQL supporta il tipo varchar con una lunghezza di caratteri che vanno da 0 a 65535, questo valore è riferito a stringhe di dati di tipo generico)

Figura 19



A questo punto occorre modificare solo il numero di caratteri che dovranno corrispondere ai campi che abbiamo realizzato nel Design.
Assegnare al tipo varchar il numero di caratteri da noi voluto significa anche ottimizzare la tabella ed evitare che in quello specifico campo MySql registri un numero eccessivo di caratteri. Quindi, noi limiteremo il numero di caratteri che pensiamo siano sufficienti a soddisfare le informazioni che dovrà contenere quel campo specifico.
area e argomento 50 caratteri. informazioni e approfondimenti 2000 caratteri, e così via. Ovviamente, ognuno può assegnare a piacere il numero di caratteri.
Dopo avere ottimizzato la tabella possiamo salvarla cliccando sull'icona Save

Figura 20



2. SETUP DI CHRONOFORMS
Fino adesso abbiamo inserito gli elementi che regolano il form.
Ma per vedere tutto ciò che abbiamo fatto, per inserire le informazioni nel data base e affinchè il form funzioni a dovere, occorre dare le giuste impostazioni nel Setup.
Dobbiamo ottenere la configurazione come nella figura 21

Figura 21



On Load.
Dopo aver cliccato su SetupBasic → trasciniamo l'azione → in On LoadHTML (Render form). In HTML (Render form) lasciamo la configurazione di default. Nel senso che non dobbiamo fare niente.
Se tutto funziona a dovere possiamo vedere l'anteprima del form cliccando sull'icona in alto a destra Test Form

Da Data Management → trasciniamo in On Load un DB Read e lo posizioniamo subito sotto HTML (Render form). Clicchiamo su Edit dell'azione DB Read.
Configuriamolo nel seguente modo:
Action label: Modulo servizi invia (serve a ricordarci che è il modulo che invia le informazioni al DB)
Enabled: Yes
Table Name: Selezioniamo il nome della tabella che abbiamo precedentemente creato, cioè: segr_soc_servizi
Multi read: No
Enable Model ID : Yes
Model ID: Data2 (lasciamolo come di default)
Lasciamo vuoti e di default i campi sottostanti a Model ID. Figura 22 e 23

Figura 22



Figura 23



On submit.
In On submit → da Basic → trasciniamo un → Files Upload.
Facciamo clic su Edit del File Upload.
Configuriamolo nel seguente modo:
Enabled: Yes
File config: scriviamo i nomi dei campi di ogni singolo elemento che abbiamo inserito in General:
doc_allegato:pdf-zip-rar (pdf-zip-rar sono le stensioni dei file che il form riconosce e che permetterà di fare l'upload)
allegato_1:pdf-zip-rar
allegato_2:pdf-zip-rar
allegato_3:pdf-zip-rar
allegato_4:pdf-zip-rar
allegato_5:pdf-zip-rar
allegato_6:pdf-zip-rar
Upload path: scriviamo il percoso assoluto dove ChronoForms salverà i file.
Io ho scritto:
components/com_chronoforms5/chronoforms/uploads/segr_soc_modulo_servizi_operatore
Ovviamente il percorso possiamo anche personalizzarlo, possiamo creare una cartella a piacere in Joomla! (entrando nella root di joomla! con una connessione ftp)
Max file size: 2048 è la dimensione massima espressa in Mb (in questo caso 2 Mb) del file che potrà essere caricato tramite l'upload
Min file size: 1 è la dimensione minima espressa in Kb (in questo caso 1 Kb) del file che potrà essere caricato tramite l'upload
Max size error: è l'avviso nel caso il file supera i 2 MB
Min size error: è l'avviso nel caso il file fosse inferiore a 1 Kb
File type error: è l'avviso nel caso il file caricato abbia un estensione diversa da quella nominata in File config, cioè pdf, zip e rar
In Array fields, File name code e Extension separator non occorre fare nulla, lasciamole come di default.
Facciamo clic su Save and Close
Figure 24 e 25

Figura 24



Figura 25



Da Basic → trascinamo in On Submit → in On fail → l'azione Event Loop.
Clicchiamo su Edit di Event Loop per aprirlo.
Lasciamo Event name in Load come di default → clic su Save and Close.

Figura 26



Da Data Management trasciniamo un DB Save in On submit.
Apriamolo da Edit
Action Label: scriviamo Modulo servizi salva
Enabled : Yes
Table name: selezioniamo la tabella segr_soc_servizi
Save Under model ID: No
Multi save: No
Model ID: Data
Force save: No
Update condition: lasciamolo vuoto
Clicchiamo su Save and Close per chiudere.
Figura 27 e 28

Figura 27



Figura 28



Da Basic e sotto DB Save trasciniamo un Display Message
Apriamolo cliccando su Edit
Action label: lasciamolo vuoto
Message content: scriviamo MODULO<B> {area} {argomento}</B> &Egrave; STATO INVIATO CON SUCCESSO!<BR>
Ovviamente potete personalizzare il messaggio
Un clic su Save and Close

Figura 29



3. ARTICOLO E MENU' IN JOOMLA!
A questo punto occorre realizzare un Menù e iniziare a fare i link all'applicazione.
Realizzeremo due articoli e due menù separati.
Uno per gli operatori di sportello in modalità Registered. Servirà a presentare il testo dell'applicazione. Il nome di questo articolo sarà Segretariato.

L'articolo e il menù per gli utenti lo realizzeremo per ultimo e lo chiameremo Segretariato sociale.

Articolo e menù per gli operatori di sportello.
ARTICOLO
Iniziamo con il creare l'articolo.
Dal pannello di Amministrazione di Joomla! clicchiamo su:
ContenutiArticoliNuovo articolo
Titolo: scriviamo Segretariato
Nell'editor: scriviamo Segretariato sociale-info. Schede informative su servizi.
Ovviamente questo è solo un esempio. Potete personalizzare il testo.
Stato: Pubblicato
Categoria: non categorizzato (facoltativo)
In evidenza: Si (facoltativo)
Accesso: Registered

MENÚ
Dal pannello di Amministrazione di Joomla! Clicchiamo su:
MenùMenù principaleNuovo
Nome e voce di menù: scriviamo Segretariato
Tipo voce di menù→ Seleziona → Articoli → Singolo articolo→
Seleziona articolo → Seleziona → Segretariato

Adesso dobbiamo creare una sotto voce di menù al menù Segretariato e linkare il form per l'inserimento delle schede informative
Clicchiamo su:
MenùMenù principaleNuovo
Nome e voce di menù: Inserisci
Tipo voce di menùSeleziona → clicchiamo su la voce ChronForms5 → ChronoForm5 form Display formChiudi
Spostiamoci nel Form Manager di Chronoforms e selezioniamo per fare il copia/incolla il nome del form per l'inserimento delle schede: segr_soc_modulo_servizi_inserisci
Ritorniamo nel Menù di Joomla!
In OpzioniForm Name → incolliamo segr_soc_modulo_servizi_inserisci. Facendo attenzione che non rimangono spazi vuoti, altrimenti il link non funziona.
Voce principale: selezioniamo Segretariato
Stato: Pubblicato
Accesso: Registered

A questo punto, se abbiamo fatto tutto bene, possiamo cliccare sul link appena realizzato e si aprirà il form uguale a quello della figura 1. Il form può essere già utilizzato per inserire le informazioni nel Database.

Nel prossimo articolo ci occuperemo della realizzazione del form per fare le modifiche alle singole schede, come eliminare le schede e la seconda parte del menù di Joomla!

CommentaCommenta questo articolo sul forum
Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Giuseppe Zito
Nome: Giuseppe ZitoSito: https://www.cybercoords.it
Alcune informazioni su di me:


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.8.0 Stabile Italiana
Data di rilascio: 19 Settembre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

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.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: