11 marzo 2016

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 dati inviati al database con website x5
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 AvanzateGestione 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à PaginaEsperto 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à PaginaEsperto 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:

Nei prossimi articoli vedremo come:



39 commenti:

  1. Siete grandi! Funzionato alla prima botta seguendo esattamente le istruzioni.
    Metabolizzo l'idea e ne esploro le potenzialità! Tanto poi mi aiutate vero? ;-)

    Grazie
    Sandro

    RispondiElimina
    Risposte
    1. Ciao Sandro,
      grazie a te per il feedback! :)
      Sì, le possibilità sono infinite e quanto descritto in questo articolo è solo una base da cui partire. Per personalizzare e modificare l'output occorre conoscere le basi di HTML, CSS e PHP.
      Buon divertimento :)

      Elimina
  2. Premetto che non parlo PHP ma capisco HTML e CSS, come mai se uso il motore di ricerca non considera le news inserite in questo modo? Non cerca proprio nel contenuto tratto dal DB?

    Inoltre, ma questo esula credo da questo tutorial, ho inserito l'oggetto DB viewer per vedere il contenuto della tabella, ma non mi consente di modificare il contenuto. In realtà non mi permette nemmeno di modificare il record inserito con DB Viewer "Impossibile eseguire la query" dice...

    Qualche suggerimento?

    RispondiElimina
    Risposte
    1. probabilmente hai dimenticato di inserire il campo id auto_increment... per questo non ti fa modificare con dbviewwr..

      Elimina
    2. Antonio, grazie di aver richiamato la mia attenzione proprio sull'ultimo paragrafo del tutorial. Sono arrivato al punto di creare il nuovo campo ed ho trovato dove inserire INT e auto_increment. Però cosa devo mettere nelle altre colonne?

      Campo: ?
      Tipo: INT
      Lunghezza/set: ?
      Collation: ?
      Attributi: ?
      Null: not null
      Predefinito: ?
      Extra: auto_increment
      e poi ci sono 4 radio button dei quali e selezionato quello con i trattini
      "Primaria" "Indice" "Unica" "---".

      Infine cosa premo, SALVA o ESEGUI?

      Elimina
    3. mi auto rispondo!
      Campo: id
      Tipo: INT
      Attributi: UNSIGNED
      Null: not null
      Extra: auto_increment
      radio button :il primo "Primaria"

      e poi pulsante SALVA!

      Incredibile quello che riesco a fare senza sapere cosa sto facendo! ^_^

      Elimina
    4. Ciao Sandro,
      il motore di ricerca di website non prevede la ricerca dei contenuti caricati dinamicamente in un oggetto Codice HTML, cosa che avviene invece nell'Oggetto Contenuto Dinamico grazie ad una apposita funzione presente nel file x5engine.php.
      Per il resto hai - inconsapevolmente :) - risolto da solo.

      Elimina
  3. ciao
    funziona alla grande...
    una domanda...quando si parla dell'inserimento dell'x5engine.php, dite che va inserito in tab esperto, solo quando la pagina viene generata automaticamente in php... ma inserendo a mano nelle proprietà di pagina l'estensione php per funzionare lo script richiede "necessariamente" l'inserimento del richiamo del motore...quindi bisogna inserirlo "sempre" ...se ho capito bene... o forse non ho capito...

    RispondiElimina
    Risposte
    1. Ciao Antonio,
      grazie per il commento.

      "..quando si parla dell'inserimento dell'x5engine.php, dite che va inserito in tab esperto, solo quando la pagina viene generata automaticamente in php..."
      Veramente a noi sembra di aver scritto il contrario :)
      Il codice per l'inclusione del file x5engine.php non va inserito nelle pagine che WebSite imposta in automatico con estensione .php. In ogni caso, per qualsiasi dubbio, è possibile visualizzare il sorgente della pagina esportata per vedere se il richiamo al file è presente o no.

      Elimina
  4. Buongiorno...
    grazie per la precisazione...difatti il punto è "pagine generate automaticamente in php dal programma"...
    le pagine generate "automaticamente in php" sono il GuestBook, il Blog, quelle con il contenuto dinamico, le pagine protette... giusto? e in queste non c'è bisogno di inserire il richiamo...
    ricreando l'esempio in questione, e modificando manualmente l'estensione pagina in php, la pagina non è "generata automaticamente dal programma" e quindi il motore non viene inserito, e necessita del relativo richiamo...difatti alla prima esportazione non ha funzionato...inserendo poi il richiamo va tutto ok... scusate se sono un po' duro di comprendAntonio...

    RispondiElimina
  5. ho inserito un secondo campo di upload sullo stesso form e un secondo campo nella tabella...modificando lo script...funziona...
    grazie...erano decenni che cercavo di farlo...si è aperto un mondo...ora manca da mettere il link per aprirle in popup...
    http://www.skeggia12.it/test/MAeSI/pagina-1.php

    RispondiElimina
    Risposte
    1. Ciao Antonio, abbiamo capito solo adesso che sei skeggia :)

      Grazie per la prova/feedback e buon lavoro.

      Elimina
    2. hehehe...qui mi ha preso la registrazione con uno pseudonimo...sono in incognito...piuttosto grazie a voi...

      Elimina
  6. grande ragazzi provato funziona tutto al primo colpo. siete davvero forti sopratutto per chi come me non è esperto in php. grazie mille

    RispondiElimina
    Risposte
    1. Ciao Olindo,
      grazie a te per il feedback :)

      Elimina
  7. Carissimi siete dei grandi!
    Ho utilizzato i vostri template e sono bellissimi.
    Vi chiedo un consiglio: al momento io uso l'oggetto a pagamento database viewer che funziona decentemente. Tra i dati della form ci sono anche degli allegato (PDF, WORD) che una volta uploadati ed inviati vengono conservati in una cartella sul server. Nel database viewer il campo dell'allegato viene regolarmente visualizzato ma senza alcun link all'oggetto. Pensate che con il vostro script siam possibile attivare in automatico un link al file relativo?
    grazie davvero e complimenti
    Nik

    RispondiElimina
    Risposte
    1. Ciao Nicola,
      grazie per il commento.
      Il nostro script non ha alcuna relazione con l'oggetto Database Viewer e quindi non abbiamo capito se vuoi aggiungere il link al documento nell'oggetto Database Viewer o se vuoi modificare lo script presentato in questo articolo per ottenere il link al documento.
      Facci sapere.

      Elimina
  8. Grazie per la pronta risposta. Io vorrei poter modificare il vostro script. L'ideale sarebbe che, per un'assegnata colonna o campo della form, la creazione del link avvenisse in automatico. Credete sia possibile?
    grazie anticipatamente
    Nik

    RispondiElimina
    Risposte
    1. Certo. Prendendo come esempio il campo che contiene l'immagine, devi sostituire nell'output il tag "img" con il tag "a" e il relativo attributo "src" con "href", richiamando all'interno del tag "a" il contenuto del campo stesso. Dovrai anche rimuovere l'attributo alt che è valido solo per le immagini.

      Elimina
  9. Caro Maesi,
    Prima di tutto grazie per la bontà di condividere le tue conoscenze
    Sto avendo un problema con le immagini. Non apparire sulla pagina di dati.
    Potrebbe dirmi se la versione professionale 13, lo stesso codice è conservato.

    saluti

    RispondiElimina
    Risposte
    1. Ciao,
      grazie a te per il commento.
      Il codice funziona anche con la versione 13.
      Se vuoi prova a postare il link alla tua prova online.

      Elimina
  10. Ciao ragazzi,
    vorrei congratularmi con voi per gli ottimi consigli che date. Sono riuscito a realizzare tutto al primo colpo....tuttavia visto che sono nuovo e da poche settimane mi sto cimentando nella realizzazione di siti web con website x5 vorrei porvi qualche domanda (partendo che ho gia realizzato la struttura base del mio sito):
    - Ho realizzato con successo la pagina delle news come quella indicata nell'articolo tuttavia mi piacerebbe che la schermata di login sia nascosta ai normali utenti e quindi non visibile a tutti. E' possibile fare cio?
    - Esiste un modo (forse oggetto dinamico)per realizzare una cosa simile da poter editare il tutto dal pannello online e magari gestire anche la cancellazione delle news in backoffice senza passare ad esempio nel mio caso da altervista (il mio provider)?

    RispondiElimina
    Risposte
    1. Ciao Nunzio,
      grazie per il tuo commento.
      Riguardo alla tua prima domanda, se abbiamo capito bene, è sufficiente non rendere visibile sul menu la pagina inserimento dati (dove hai il form) e non inserirla nella SiteMap.
      Puoi fare tutte e due le operazioni da programma.

      Per l'altra domanda, come abbiamo scritto nell'articolo, puoi usare come alternativa l'Oggetto Contenuto Dinamico.
      Nell'articolo abbiamo anche parlato dell'Oggetto DataBase Viewer (a pagamento) che potrebbe essere utile nella gestione delle news, nel caso tu usassi il nostro script.

      Elimina
    2. Ciao
      Grazie per la tempestiva risposta....Ho eliminato la pagina "NewsDatabase"(nel mio caso) dalla site map tuttavia come faccio ad accedere all immissione delle credenziali se non è più visibile? Tengo a precisare che il collegamento e l inserimento delle News una volta loggiati nella pagina NewsDatabase funziona... Vorrei solo che questa pagina non sia visibile sempre 😣

      Elimina
    3. Ciao Nunzio,
      rileggi con attenzione quanto abbiamo già scritto oppure prova ad essere più chiaro su cosa vuoi fare.

      Elimina
  11. Complimenti per il tutorial, molto interessante!!!
    Una domanda, sarebbe possibile, con X5, usare anche un database di ms-access?

    RispondiElimina
    Risposte
    1. Ciao,
      grazie per il commento.
      No, il linguaggio lato server utilizzato dagli oggetti predefiniti del programma è PHP interfacciato con il database MySQL.
      Ovviamente con l'oggetto codice HTML superi questo limite, però devi scrivere tu tutti i codici a manina.

      Elimina
  12. Ciao,

    complimenti per la guida.
    Potresti aiutarmi a capire come mai non riesca a visualizzare le immagini? uso aruba, windows, mysql.
    tutto il resto funziona benissimo.

    grazie

    RispondiElimina
    Risposte
    1. Ciao e grazie per il tuo commento.
      Verifica che la cartella indicata in Gestione Dati su WebSite X5 abbia i permessi in scrittura.
      Su Aruba Windows lo puoi fare da File Manager (Pannello di Controllo).

      Elimina
  13. Ciao
    la cartella inserita è admin, ho settato su aruba la cartella come scrivibile.
    ho provato molte combinazioni ma il massimo che ho raggiunto è vedere la x invece dell'immagine.
    riesci a darmi un aiuto? sono quasi certo sia una banalità, ma a me inesperto oscura!!

    grazie

    RispondiElimina
    Risposte
    1. Ciao,
      dovremmo vedere la pagina online dove hai implementato il codice per provare a capire il problema.
      Puoi inviarci il link anche per mail: la trovi in alto a destra del blog.

      Elimina
  14. aggiungo che non riesco a visualizzare l'immagine neanche se registrata in una cartella del server.

    grazie ancora

    RispondiElimina
    Risposte
    1. ho mandato un'email (pardon! da un altro indirizzo...)
      tutti gli altri dati li gestisce correttamente, ho provato con chrome, explorer, firefox, edge e niente in nessuno!

      grazie in anticipo per l'aiuto

      Elimina
  15. Ciao ragazzi, grazie per tutto quello che fate per noi, volevo chiedervi cortesemente se era possibile mettere più di una foto e far scorrere le immagini con un semplici click.
    Grazie ancora!

    RispondiElimina
    Risposte
    1. Ciao,
      tutto è possibile.
      Se il tuo commento è una richiesta, al momento non abbiamo tempo e voglia di fare altre integrazioni.

      Elimina
  16. Buonasera ragazzi, io ho salvato le immagine in una cartella "fileform" all'interno della root: come si modifica il codice per farlo funzionare? grazie!

    RispondiElimina
    Risposte
    1. Ciao,
      in Impostazioni Avanzate → Gestione Dati devi inserire il nome della cartella con accesso in scrittura, come abbiamo scritto al punto 1 dell'articolo.

      Elimina
  17. ciao Maesi, il vostro codice non funziona se si carica il sito in una sottocartella di un dominio principale: grazie di tutto!

    RispondiElimina
    Risposte
    1. E' un po' da presuntuosi pensare che se qualcosa non funziona è colpa del codice e non colpa tua.

      La nostra demo è proprio in una sottocartella.

      Elimina