Visualizzare i dati inviati al database dal form mail di WebSite X5

L'Oggetto Modulo Invio E-mail di WebSite X5 12 prevede la possibilità di inviare i dati ad un database. Come può essere utilizzata questa opzione? E come si possono visualizzare in una pagina i dati inseriti nel database?

Gli scopi sono svariati; in questo articolo abbiamo provato ad ipotizzarne uno: vogliamo creare un semplice contenuto nel sito (ad esempio delle news con titolo, data, testo e immagine) che possa essere facilmente aggiornato online senza dover utilizzare il programma.
Qui potete vedere il risultato finale:

DEMO

Tutti sappiamo che nell'edizione Professional esiste già l'Oggetto Contenuto Dinamico che può svolgere questa funzione, anche in maniera più completa, e che con l'Oggetto opzionale DataBase Viewer (a pagamento) è possibile visualizzare i dati presenti nel database organizzati in tabella. Tuttavia, scrivendo un po' di codice, siamo liberi di creare anche output più complessi rispetto a quello della nostra demo, gli output che meglio rispondono alle nostre esigenze.

Ecco come procedere per riprodurre la nostra demo:

1. Impostazione dei metodi di gestione dati:
In Impostazioni Avanzate → Gestione Dati inseriamo i dati di accesso al database forniti dal nostro provider e il nome della cartella con accesso in scrittura. Questa cartella, nella nostra demo, è indispensabile poiché qui verranno salvati i file (nel nostro caso immagini) che verranno inviati al server con il modulo e-mail.
Rimandiamo al link della guida per ulteriori approfondimenti relativi a questa sezione: help.websitex5.com/it/v12/evo/gestione_dati.htm

Pagina inserimento dati

 

2. Oggetto Modulo Invio E-mail: scheda Invio
Inseriamo in una pagina protetta un Oggetto Modulo Invio E-mail. Nella scheda Invio, scegliamo come modalità di invio Invia i dati ad un Database ed impostiamo tutti i parametri richiesti: il database (nel menu a tendina compare il database precedentemente impostato in Gestione Dati), il nome della tabella in cui verranno memorizzati i dati e l'eventuale e-mail a cui notificare ogni nuovo inserimento di dati.

3. Oggetto Modulo Invio E-mail: scheda Elenco

La scelta del numero e del tipo di campi da creare in questa sezione dipende dai dati che vogliamo memorizzare nel database.
Nell'immagine sottostante potete vedere la struttura del form mail della nostra demo:

Ad ogni campo, nella scheda Opzioni, è preferibile assegnare un nome significativo per poterlo gestire con più facilità: se non si utilizza questa opzione, il programma darà al campo del database un nome generico (field_0, field_1, etc...).

Pagina visualizzazione dati

 

4. Oggetto Codice HTML
Nella pagina in cui vogliamo visualizzare i dati (ovviamente deve avere estensione .php) inseriamo un Oggetto Codice HTML che conterrà il codice PHP che si occupa di estrarre i dati dal database, utilizzando le classi definite dai programmatori di Incomedia nel file x5engine.php, e di visualizzarli in una struttura HTML (output). Questo è il codice che abbiamo utilizzato per la nostra demo:

 
<div class="outputdb">
 <?php

/* ===============================================================
   Database class: Copyright by Incomedia Srl http://incomedia.eu  
   Author's custom code: http://quellidelcucuzzolo.blogspot.it
   Please do not remove credit 
   ============================================================== */
   
 //DA PERSONALIZZARE

    //Inserire il nome della tabella del database
    $qtable    = "news";

    //Inserire i nomi dei campi del database
    $qdata     = 'data';
    $qtitolo   = 'titolo';
    $qtesto    = 'testo';
    $qimmagine = 'immagine';
    


//CONNESSIONE
    
    //Prelievo automatico dei dati inseriti nel programma
    $qchiave   = array_keys($imSettings['databases']);
    $qdati     = getDbData($qchiave[0]);
    $qhost     = $qdati['host'];
    $quser     = $qdati['user'];
    $qpassword = $qdati['password'];
    $qdatabase = $qdati['database'];
    $qfolder   = $imSettings['general']['public_folder'];
    $qdb       = new ImDb($qhost, $quser, $qpassword, $qdatabase);
    if (!$qdb->testConnection())
        die("Connessione non riuscita");
    
//SELECT

    //Selezione di tutti i record della tabella
    $qitem = $qdb->query("SELECT * FROM $qtable");
    
//OUTPUT

    //Iterazione dell'array e creazione della struttura HTML
    if ($qitem) {
        $qitem = array_reverse($qitem);
        foreach ($qitem as $val) {
            echo '<div class="itemdb">' . "\n";
            if (isset($val[$qtitolo]) && $val[$qtitolo] != '') {
                echo '<span class="outputitolo">' . $val[$qtitolo] . '</span>' . "\n";
            }
            if (isset($val[$qdata]) && $val[$qdata] != '') {
                echo '<span class="outputdata">' . $val[$qdata] . '</span>' . "\n";
            }
            echo '<p>';
            if (isset($val[$qimmagine]) && $val[$qimmagine] != '') {
                echo '<img alt="" src="' . $qfolder . '/' . $val[$qimmagine] . '" />';
            }
            if (isset($val[$qtesto]) && $val[$qtesto] != '') {
                echo $val[$qtesto];
            }
            echo "</p>\n</div>\n<div class='itemend'></div>\n";
        }
    } else
        echo 'Nessuna news presente';
    

//CHIUSURA DELLA CONNESSIONE

    $qdb->closeConnection();
    ?>
</div>

Le personalizzazioni nel codice riguardano i valori delle variabili iniziali: la variabile $qtable deve contenere il nome della tabella del database impostata nel modulo e-mail (scheda Invio); le variabili $qdata, $qtitolo, $qtesto e $qimmagine contengono i nomi dei campi del database che abbiamo definito sempre nel modulo e-mail (Inserimento Campo → Opzioni).

La parte restante del codice si occupa di effettuare la connessione al database, recuperando i dati inseriti nel programma, effettuare la query al database, organizzare l'output HTML e chiudere la connessione con il database.

Se in Gestione Dati abbiamo inserito più database, è importante sapere che lo script recupera i dati di connessione del primo della lista.
 

5. Oggetto Codice HTML: scheda Esperto 
Nella scheda Esperto inseriamo le regole di stile del nostro output. A titolo di esempio riportiamo il CSS della nostra demo:

/* record */
div.itemdb{
    padding: 5px;
    text-align:left;
}
/* data*/
div.itemdb span.outputdata{
    color:gray;
    float:right;
}
/* titolo */
div.itemdb span.outputitolo{
    font-weight:bold;
}
/* testo */
div.itemdb p{
    padding:10px 0;
}
/* immagine */
div.itemdb p img{
    width:200px;
    float:left;
    padding: 0 10px 20px 0;
}
@media  (max-width: 479px) {
    div.itemdb p img {
    float: none;
    padding: 0 0 10px;
    width: 100%;
    }
}
/* separatore */
div.itemend {
    clear:both;
    border-bottom:1px dashed gray;
    width:50%;
    margin:0 auto;
}

6. Proprietà della pagina
Il funzionamento del codice PHP è subordinato all'inclusione del file x5engine.php. In una pagina in cui è stato inserito un Oggetto Guestbook, in una pagina protetta e, in generale, in tutte le pagine per le quali il programma imposta in automatico l'estensione .php, questo file è già richiamato automaticamente. In qualsiasi altra pagina occorre quindi inserire manualmente il codice per l'inclusione in  Proprietà Pagina → Esperto → Prima dell'apertura del tag HTML:

<?php require_once("res/x5engine.php"); ?>

Sempre nella scheda Esperto controlliamo di avere impostato "php" come Estensione del file generato.

In anteprima, ovviamente, lo script non funzionerà e si visualizzeranno parti di codice poiché manca l'interprete PHP. Se vogliamo mantenere la visualizzazione della pagina più "pulita" possiamo aggiungere questo codice in Proprietà Pagina → Esperto → Prima della chiusura del tag HEAD

<script>
    //funzionalità offline
      x5engine.boot.push(function (){
          x5engine.utils.showOfflineMessage('Questa funzionalità è attiva solo dopo aver pubblicato il sito su Internet.','','');
          $('.outputdb').css('display', 'none');
      });
</script>

Gestione dei dati

Per modificare/cancellare i dati inseriti nel database potremmo utilizzare l'Oggetto DataBase Viewer oppure gli strumenti presenti nel pannello di controllo online, tipo PhpMyAdmin.
Purtroppo, attualmente (versione 12.0.5.22), l'invio dei dati al database con l'Oggetto Modulo E-mail di WebSite X5 non prevede l'inserimento automatico di un campo autoincrementale con funzione di chiave primaria, campo necessario per identificare in modo univoco ogni record: questo, di fatto, impedisce qualsiasi modifica ai dati inseriti.
Per ovviare a questo problema occorre inserire manualmente il campo mancante: dal menu Struttura di PhpMyAdmin aggiungere un campo di tipo INT e flaggare l'opzione A_I (AUTO_INCREMENT). Ovviamente questa operazione è da effettuare una volta sola. (Aggiornamento del 20/04/2016: con la versione 12.0.6.25 il problema è stato risolto)




Per approfondire l'argomento:

• Database Class - WebSite X5 Developer's Guide

Nei prossimi articoli vedremo come:

• aggiungere una paginazione
• visualizzare l'immagine ingrandita in showbox