Elenco articoli inviati dagli utenti della community

In questo articolo mostreremo varie funzionalità di Chronoforms che consentono di realizzare, non un semplice form, ma una vera e propria parte di una possibile applicazione gestionale che potrà essere sviluppata ed implementata con le risorse disponibili nell'estensione della Chronoengine.

Per chiarezza dichiariamo subito l'obiettivo del nostro lavoro, che è la realizzazione una specie di ordine virtuale per l'acquisto di un articolo. La realizzazione di questo obiettivo sarà raggiunta con l'utilizzo dei seguenti strumenti e tecniche essenziali e fondamentali:

1. Plugin Multi Page incorporato nell'ultima versione di Chronoforms. Questo plugin consente di realizzare un sistema di form in serie, collegati l'uno all'altro che si passano dati e consentono l'elaborazione di essi;
2. Il riempimento di una casella Dropdown del form che preleva i dati direttamente da una tabella di database;
3. Un semplice uso di Javascript per realizzare dei calcoli direttamente sul form in funzione dei campi precedentemente inseriti.

Per questa dimostrazione ci occorrono due tabelle di database, una che contiene la descrizione degli articoli con i dati essenziali, l'altra che raccoglierà gli ordini effettuati.

La prima tabella avrà per semplicità questi campi essenziali: art_nome, art_descrizione, art_prezzo ed i normali campi creati automaticamente da Chronoform fra i quali cf_id che sarà il codice numerico che identifica articolo.

Per creare la tabella necessaria useremo il wizard di chronoform, con la normale procedura. Realizziamo pertanto il form con i campi necessari e lo chiameremo form_articoli. Con lo strumento Create Table, dopo aver selezionato il form creiamo la tabella che chiameremo jos_chronoforms_form_articoli. L'associamo al form e pubblichiamo il form. A questo punto abbiamo a disposizione un form che potremo utilizzare per il riempimento della tabella con alcuni dati descriventi le caratteristiche degli articoli. Usiamo per questo la normale procedura colleghiamo il form ad una voce di menu. Da frontend chiamiamo la voce di menu associata al form ed iniziamo il caricamento di 5-6 articoli di prova che serviranno successivamente.

La seconda tabella per essere funzionale all'obiettivo avrà i seguenti campi: cod_articolo, articolo, prezzo, quantità, totale ed i normali campi creati automaticamente da Chronoform fra i quali cf_id che qui sarà il codice ordine (segnalo che questi campi sono sovrabbondanti rispetto allle necessità, infatti il campo articolo ed il campo totale in realtà potrebbero essere ricavati tramite il codice articolo dalla tabella jos_chronoforms_form_articoli il primo e dal prodotto di quantità e prezzo per il secondo, ma questo richiederebbe di complicare un po' il codice della dimostrazione ed in questo momento non è essenziale).

Anche in questo caso useremo il wizard di chronoform con la consueta procedura. Creiamo un form con i campi della seconda tabella e lo chiameremo form_temporaneo. Con lo strumento Create Table creiamo la tabella che chiameremo jos_chronoforms_form_madre, in seguito vedremo il perchè di questo nome, ed in questo caso non associamo al form e non pubblichiamo.

Ora è il momento di preparare i form che useremo realmente nell'applicazione. Si tratta di quattro form, il primo lo chiameremo madre e tre form che saranno i figli: figlio1, figlio2 e figlio3. I form figli corrispodono alle pagine di form a noi necessarie, che sono 3.

L'applicazione ha questo schema di funzionamento. Nel primo figlio1 apparirà solo un campo costituito da una casella Dropdown a tendina che mostrerà gli articoli presi direttamente dalla tabella jos_chronoforms_form_articoli. Selezionato l'articolo si conferma la scelta e si passa al secondo figlio2, dove questa volta appariranno, prelevati dalla tabella jos_chronoforms_form_articoli, l'articolo scelto ed il suo prezzo. A questo punto si inserisce la quantità degli articoli da ordinare e il form darà automaticamente il prezzo totale dell'ordine (questo sarà realizzato dal Javascript). Confermando si invieranno i dati al terzo form figlio3 dove si visualizzeranno i dati inseriti per un ultimo controllo. Se confermiamo i dati saranno salvatii nella tabella jos_chronoforms_form_madre del database. Se non confermiamo clicchiamo su indietro e torneremo alla pagina precedente.

Iniziamo dal primo form figlio. Con il wizard si crea il form nel quale inseriamo solo due campi la casella DropDown, che nomineremo articolo, ed il bottone di Conferma con il Reset. Chiamiamo il form figlio1. Non associamo ad esso nessun database e lo pubblichiamo.

Ritorniamo ora nel figlio1 in Form Code sezione Html code, ed inseriamo alcune modifiche al codice presente. Prima di ogni altra riga inseriamo le seguenti righe di PHP.

<?php
 
$nome_selected = JRequest::getInt('art_nome', '', 'post');
$db =& JFactory::getDBO();
 
$query = "
 
SELECT `cf_id`,`art_nome`, `art_prezzo`
 FROM `#__chronoforms_form_articoli`
 ORDER BY `art_nome`
";
$db->setQuery($query);
$nomes = $db->loadAssocList();
$nome_options = "";
foreach ( $nomes as $v ) {
 if ( $nome_selected == $v['art_nome'] ) {
 $selected = "selected='selected'";
 } else {
 $selected = '';
 }
 
 $nome_options .= "<option value='".$v['cf_id']."' $selected >".$v['art_nome']."</option>";
 
}
?>

Questo codice leggerà la tabella jos_chronoforms_form_articoli ed costruisce variabile $nome_options, che alla fine del ciclo conterrà tanti tag option quanti sono gli articoli della tabella.

Ora modifichiamo il codice del campo DropDown nel seguente modo affinchè le precedenti option statiche siano sostituire dalle option dinamiche che abbiamo appena creato.

<div>
 <div>
 <label style="width: 150px;">Articolo</label>
 <select id="select_1" size="1" title=""  name="cod_articolo">
 <!--<option value="">Choose Option</option>
 <option value="option 1">option 1</option>
 <option value="option 2">option 2</option>
 <option value="option 3">option 3</option> -->
 
 <?php echo $nome_options; ?>
 
 </select>
 
 </div>
 <div> </div>
</div>

Con questo codice passeremo il campo del form name="cod_articolo" al secondo form, cod_articolo conterrà il valore cd_id (codice articolo) del record scelto nella casella DropDown.

Creiamo ora il secondo form figlio. Questa volta non usiamo il wizard, ma usiamo la procedura nuovo form creiamo il form e lo nominiamo figlio2. Salviamo il form e lo pubblichiamo senza associarlo a nessuna tabella del database.

Ora riapriamo il form_temporaneo che avevamo creato in precedenza, andiamo in nella tab Form Code apriamo la sezione HTML code e selezionamo tutto il codice presente e lo copiamo. Chiudiamo il form ed apriamo ora il figlio2 andiamo nella tab Form Code apriamo la sezione HTML code e incolliamo tutto il codice precedentemente copiato. Ora faremo delle modifiche al codice ed inseriamo prima di ogni altra riga il seguente codice.

 
<p><?php
$db =& JFactory::getDBO();
$query = "
 SELECT art_nome, art_prezzo
 FROM `#__chronoforms_form_articoli` WHERE `cf_id` =".$posted['cod_articolo'];
 
$db->setQuery($query);
$nomes = $db->loadAssocList();
 
foreach ( $nomes as $v ) {
 $articolo1 = $v['art_nome'];
 $prezzo1 =  $v['art_prezzo'];
 
}
?></p>
 

Questo codice con la variabile $posted['cod_articolo'], legge il valore del cf_id selezionato nel precedente form e lo inserisce nella query alla tabella che restituirà i valori corrispondenti all'articolo selezionato e li collocherà della variabile $articolo1, che sarà la descrizione dell'articolo, e in $prezzo1 che rappresenta appunto il prezzo dell'articolo.

Questo ci insegna anche una regola generale dei form Multi Page. I campi di un form precedente vengono recuperati nel form successivo con l'array $posted['nome-campo_form_precedente']. Questo è un aspetto importantissimo ed è il motore che consente il dialogo fra i form e da potenza all'applicazione.

Dobbiamo ora modificare i campi articolo e prezzo statici per sostituirli con quelli dinamici appena creati con questo codice.

 
<p><div>
 <div>
 <label style="width: 150px;">Articolo</label>
 <input maxlength="150" size="30" title="" id="text_4" name="articolo" 
type="text" value="<?php echo $articolo1;?> "/>
 
 </div>
 <div> </div>
</div>
 
<div>
 <div>
 <label style="width: 150px;">Prezzo</label>
 <input maxlength="150" size="30" title="" id="text_5" name="prezzo" 
type="text" value="<?php echo $prezzo1;?> " />
 
 </div>
 <div> </div></p>
 

Ora faremo le modifiche per il calcolo dei campi con Javascript. Inseriremo questo codice, onChange="updatethis(this.form); nella definizione del campo quantita, che richiamerà la funzione Javascript ad ogni cambiamento di questo campo e consentirà il calcolo del totale.

<div>
 <div>
 <label style="width: 150px;">Quantità</label>
 <input maxlength="150" size="30" title="" id="text_6" name="quantita"
 type="text" onChange="updatethis(this.form);"/>
 
 </div>
 <div> </div>
</div>

Ultimo passo con il figlio2 è l'inserimento del codice Javascript nella sezione Javascript code dove inseriremo questo

function updatethis(form) {
 form.elements['totale'].value = form.elements['quantita'].value * form.elements['prezzo'].value;
 }

Questa semplicissima e intuitiva funzione in Javascript calcolerà il totale come prodotto di quantita e prezzo ed aggiornerà i campi del form.

Dobbiamo ora preparare il terzo form figlio3, che ha la funzione di mostrare i dati inseriti nel secondo form per un ultimo controllo. Anche in questo caso il form non è associato a nessuna tabella. Da Form Manager scegliamo Nuovo. Si apre il form ed lo nominiamo figlio3. Questo non è un form operativo serve solo a contollare i dati e per questo motivo inseriremo in Form HTML del codice particolare che mostriamo si seguito.

<!--<input type="hidden" name="cf_id_art" value=""/>-->
<input type="hidden" name="articolo" value="<?php echo $posted['articolo']; ?>"/>
<input type="hidden" name="prezzo" value="<?php echo $posted['prezzo']; ?>"/>
<input type="hidden" name="quantita" value="<?php echo $posted['quantita']; ?>"/>
<input type="hidden" name="totale" value="<?php echo $posted['totale']; ?>"/>
<input type="hidden" name="cod_articolo" value="<?php echo $posted['cod_articolo']; ?>" />
 
 
<div>
 <div>
 <h1>Hai ordinato questo articolo. Confermi ?</h1>
 </div>
 <div> </div>
</div>
 
 
<div>
 <div>
 <label style="width: 150px;">Articolo</label>
 <label style="width: 150px;"><?php echo $posted['articolo']; ?></label>
 </div>
 <div> </div>
</div>
 
<div>
<div>
Prezzo : <?php echo $posted['prezzo']; ?><br/><br/>
Quantità : <?php echo $posted['quantita']; ?><br/><br/>
Totale : <?php echo $posted['totale']; ?><br/><br/>
</div>
 <div> </div>
</div>
 
<div>
 <div>
 <input value="Invia" name="button_6" type="submit" />
<a href="/component/chronocontact/?chronoformname=madre&cfformstep=2"
 style="text-decoration: none;"><input value="Indietro" type="button"></a>
 </div>
 <div> </div>
</div>
<br/><br/>
 

Il codice prevede dei campi di form nascosti che hanno unicamente il compito di ricevere i dati dal form precedente per passarli al database dopo la conferma. Prevede inoltre i tag HTML intregrati da PHP per mostrare il valori dei dati inviati dal precedente form. Sono poi presenti i bottoni per l'invio del form ed il ritorno al form precedente nel caso in cui non confermiamo i dati. Inseriamo il codice e salviamo il form.

Rimane ora da creare il form madre, non lo creeremo con il wizard ma con il tasto Nuovo. Gli assegnamo il nome madre e lo associamo alla tabella del datadase già creata all'inizio di nome jos_chronoforms_form_madre . L'ultimo passaggio è quello di andare nella Tab Plugins dove

selezioneremo la voce Multi Page che diventerà colorata di verde. Salviamo il lavoro.

E' giunto il momento di usare il plugin Multi Page che garantirà tutto il funzionamento del sistema dei form.

Da Form Manager spuntiamo la casella di selezione accanto al nome del madre e subito dopo clicchiamo sul nome Multi Page che è nell'elenco all'estrema sinistra dei form. Si apre la finestra del plugin. In essa troveremo pochi ed intuitivi campi. In Number of Steps inseriremo il numero dei form figli che abbiamo creato, nel nostro caso 3. In Step form names inseriremo i nomi dei form separati da virgola, senza spazi fra essi. In Finalize button name inseriremo il nome del bottone che invierà il form alla registrazione finale ed il nome lo ricaviamo dal seguente codice che descrive il bottone di invio del figlio3. In questo caso button_6. Le successive scelte consentiranno di abilitare la navigazione fra i form ed il debug dopo l'invio finale. In questa dimostrazione il debug non è abilitato.

<div>
 <input value="Invia" name="button_6" type="submit" /><input type="reset" name="reset" value="Reset"/>
<a href="/component/chronocontact/?chronoformname=madre&cfformstep=2" style="text-decoration: none;">
<input value="Indietro" type="button"></a>
</div>
 

In questo codice è da segnalre il tag a, nel bottone indietro, che contiene il link per tornareal form precedente. L'URL del link è quello del form madre a cui abbiamo aggiunto come da istruzioni &cfformstep=2 che è l'informazione che rinvia al form figli2. Quindi il numero finale da la destinazione del link 1 form figlio1, 2 form figlio 2.

Con questo è completata la configurazione del sistema, e se tutto è stato fatto nel modo giusto avremo il risultato voluto. In questa pagina ho inserito una demo del Multi form. Schematicamente il form madre è un contenitore dei form figli. E' possibile il movimento fra il figli per correggere gli inserimenti e con l'ultimo form dopo la conferma si salva il lavoro e si ritorna all'inizio. Gli elementi importanti da sottolinere sono la possibilità di prendere dati da altre tabelle per riempire caselle Dropdown e gli stessi campi dei form. La possibilità di svolgere dei calcoli con l'uso di Javascrip, ma nel passaggio da un form all'altro sarebbe stato possibile anche con PHP. E' questione di scelte e di circostanze. Non dobbiamo infatti dimenticarci che PHP lavora sul server e Javascript nel browser. Un'ultima considerazione, questa applicazione per quanto può sembrare complessa rimane però ancora a livello divulgativo. Sono ancora da verificare vari problemi quali le transazioni con il database e lo sviluppo di una logica che consenta di effettuare ordini multipli di più articoli con lo stesso codice ordine. Per quest'ultimo la strada, in corso di sviluppo, è quella dell'inserimento di ulteriori due form, uno all'inizio ed uno alla fine che consentano il dialogo con un'ulteriore tabella ordini e la visualizzazione finale di più articoli di un unico ordine. Ma questa è un'altra storia e forse prenderà il numero 2. Intanto sono gradite osservazioni e contributi per spingere ancora avanti il lavoro.

Vales

http://valesweb.altervista.org

I codici completi del form sono nella pagina seguente.