Visualizzare alcuni commenti del guestbook di WebSite X5 in un'altra pagina

Ancora la stessa fonte di ispirazione dell'articolo precedente, ancora lo stesso oggetto ma con un'altra variante: questo per noi è il "periodo guestbook" :)
Un uso un po' particolare: i commenti più belli, scelti dal webmaster e visualizzati in un'altra pagina con un effetto carousel.
Per la nostra demo, abbiamo trasformato il cucuzzolo in un ipotetico B&B frequentato da improbabili ma super clienti :)

DEMO

Vediamo ora la procedura per riprodurre questa demo, la quale richiede necessariamente l'edizione Professional di WebSite X5.

Pagina guestbook

Per prima cosa inseriamo in una pagina del progetto un Oggetto Guestbook, scegliendo come metodo di salvataggio dei dati Invia i dati ad un Database, database precedentemente impostato in Gestione Dati (al Passo 1 nella versione 13, al Passo 4 nella versione 12) utilizzando i dati di accesso forniti dal nostro provider.

Pagina "Top comments"

Occupiamoci ora della pagina in cui visualizzeremo i commenti scelti da noi:

1. Oggetto Codice HTML
Inseriamo nella pagina un Oggetto Codice HTML ed incolliamo il seguente codice:

<div class="owl-carousel owl-theme">
<?php
/* ===============================================================
Database class: Copyright by Incomedia Srl http://incomedia.eu  
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit 
============================================================== */

//VARIABILI INIZIALI DA PERSONALIZZARE

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

//inserire l'id del guestbook
$qgb    = "x5gb45";

//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'];
$qdb       = new ImDb($qhost, $quser, $qpassword, $qdatabase);
if (!$qdb->testConnection())
    die("Connessione non riuscita");

//SELECT DA PERSONALIZZARE

//Selezione dei commenti scelti
$qcomments = $qdb->query("SELECT * FROM $qtable WHERE postid='$qgb' AND commentid in(0,2,4) ORDER BY FIELD(commentid,2,4,0)");

//Selezione random dei commenti con voto 5
//$qcomments = $qdb->query("SELECT * FROM $qtable WHERE postid='$qgb' AND rating=5 ORDER BY RAND() LIMIT 3");


//OUTPUT
//Iterazione dell'array e creazione della struttura HTML
if ($qcomments) {
    foreach ($qcomments as $val) {
        echo '<div>' . "\n";

        //OUTPUT data
        $qdate = date_create($val['timestamp']);
        echo '<div class="gb_timestamp">' . date_format($qdate, 'd-m-Y') . '</div>' . "\n";

        //OUTPUT commento
        echo '<div class="gb_body">' . $val['body'] . '</div>' . "\n";

        //OUTPUT avatar
        echo '<img class="gb_avatar" src="files/avatar.png" alt="avatar" />';

        //OUTPUT nome
        echo '<div  class="gb_name">' . $val['name'] . '</div>' . "\n";

        if ($val['url'] != '') {

            //OUTPUT campo sito internet 
            echo '<div class="gb_url"><a class="imCssLink" href="' . $val['url'] . '" target="_blank">sito web</a></div>' . "\n";

            //OUTPUT campo sito internet personalizzato
            // echo '<div class="gb_url">' . str_replace('http://', '', $val['url']) . '</div>' . "\n";
        }

        //OUTPUT voto
        if (isset($val['rating']) && $val['rating'] > 0) {
            echo '<img class="gb_rater" src="files/star' . $val['rating'] . '.png" alt="' . $val['rating'] . ' stelle" />';
        }

        echo '</div>' . "\n";
    }
}

//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 impostato nell'Oggetto Guestbook; la variabile $qgb deve contenere l'id del guestbook - nel nostro esempio x5gb45. La parte variabile (in rosso) è il suffisso numerico che si può ricavare dal sorgente della pagina (numero presente nell'id dell'oggetto guestbook) oppure visualizzando i dati contenuti nel database con, ad esempio, phpMyAdmin (campo postid):
  
  
  
  La presenza della variabile $qgb evita errori nel caso in cui la stessa tabella del database venga utilizzata per più guestbook.
• la SELECT
  Nel codice abbiamo inserito due query alternative: la prima query, che è attiva e visibile nell'esempio, estrapola dal database un numero di commenti definito commentid in(0,2,4) nell'ordine desiderato  ORDER BY FIELD (commentid,2,4,0)
  Ogni numero corrisponde ad un commento identificato con il corrispondente valore del campo commentid (vedi immagine precedente).
  
  L'altra query, commentata, richiama dal database tre commenti scelti a caso tra tutti i commenti con voto uguale a 5: in questo caso la personalizzazione può riguardare la condizione con cui si scelgono i commenti (rater=5) e il numero massimo di commenti da estrarre (LIMIT 3). Se volete rendere attiva questa query, dovete rimuovere la doppia barra (//) davanti alla variabile $qcomments e, ovviamente, commentare quella precedente con lo stesso nome.
  
• l' OUTPUT
  
  • avatar: potete personalizzare il valore dell'attributo src sostituendo il nome del file immagine con quello dell'immagine da voi preparata e allegata al progetto tramite l'Oggetto Codice HTML stesso, scheda Esperto, impostando come Percorso relativo sul server la cartella files. Nel nostro esempio abbiamo utilizzato questa immagine: avatar.png
  • sito internet: per questo campo abbiamo previsto una doppia alternativa: chi avesse personalizzato il campo come descritto in questo articolo, troverà nella riga commentata il codice da utilizzare.
  • voto: per visualizzare le stelline corrispondenti alla valutazione presente nel commento, dovete preparare cinque immagini che rappresentano i cinque possibili voti. Particolare attenzione va rivolta al nome da attribuire a queste cinque immagini: devono obbligatoriamente presentare nel nome un suffisso numerico che va da 1 a 5. Nel nostro esempio abbiamo utilizzato questi nomi: star1.png, star2.png, star3.png, ecc. Le immagini vanno allegate al progetto attraverso la scheda Esperto dell'Oggetto Codice HTML stesso, lasciando impostato come Percorso relativo sul server la cartella files.
  Ovviamente questa sezione può anche essere strutturata in modo completamente diverso in funzione del risultato che si vuole ottenere.

Non ci dobbiamo preoccupare di personalizzare i parametri per la connessione poiché il codice utilizza le funzioni già previste dal programma: l'unica accortezza consiste nel verificare che, nel caso in cui avessimo impostato i dati di più di un database, il database effettivamente utilizzato per memorizzare i commenti del guestbook sia il primo dell'elenco.

2. Oggetto Codice HTML Sezione Esperto
In questa sezione possiamo inserire il codice CSS che definisce lo stile dei commenti. Ovviamente è tutto completamente personalizzabile.

.gb_timestamp {
    text-align: right;
    color: gray;
    padding: 6px;
}
.gb_avatar, .gb_rater {
     width: auto !important;
}
.gb_body {
    font-style: italic;
    margin-bottom: 28px;
    border-bottom: 5px solid #eee;
}
.gb_body:after {
    border-bottom: 22px solid #fff;
    border-left: 16px solid #eee;
    content: "";
    display: block;
    height: 0;
    left: 34px;
    position: relative;
    top: 27px;
    width: 0;
}
.gb_avatar {
    float: left;
    margin-right: 12px;
}
.gb_name, .gb_url {
   color: #bc360a;
    margin-bottom: 4px;
}
.gb_name {
    font-weight: bold;
}

3. Proprietà della pagina
Visto che richiameremo i commenti dal database, la nostra pagina dovrà avere estensione .php e dovrà richiamare il file x5engine.php. Se la pagina contiene, ad esempio un Oggetto Contenuto Dinamico oppure un altro oggetto che determina l'impostazione automatica dell'estensione della pagina in .php, non avremo bisogno di fare nulla, altrimenti dobbiamo impostare manualmente la giusta estensione della pagina: nella Mappa apriamo la scheda Proprietà Pagina → Esperto e controlliamo che Estensione del file generato sia php e  in Codice personalizzato: Prima dell'apertura del tag HTML  inseriamo questa riga di codice per richiamare il necessario file x5engine.php

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

Il risultato finale, ovviamente, non è visualizzabile in anteprima. Per evitare che il codice PHP risulti visibile possiamo aggiungere questo script sempre nella sezione Esperto, Codice personalizzato: 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.','','');
          $('.owl-carousel').css('display', 'none');
      });
</script>

A questo punto il progetto è pronto per essere esportato sul server, dove potremo vedere il risultato ottenuto: i commenti scelti risulteranno visibili uno sotto l'altro. Nella nostra demo abbiamo aggiunto un effetto carousel che permette di visualizzare i commenti in uno slider.

Effetto carousel

L'effetto carousel è stato ottenuto utilizzando il plugin OwlCarousel: potete scaricare i file del plugin dal sito ufficiale oppure da QUI, zip in cui abbiamo inserito solo i file necessari alla nostra implementazione. Alleghiamo i file  owl.carousel.min.css, owl.theme.default.min.css e owl.carousel.js al nostro progetto sempre nella scheda Esperto dell'Oggetto Codice HTML flaggando l'opzione Collega il file.
In Proprietà Pagina → Esperto → Codice personalizzato: Prima della chiusura del tag HEAD incolliamo questo codice:

<script>
$(document).ready(function(){
// owl carousel
var owl = $('.owl-carousel');
owl.owlCarousel({
    items:1,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:8000,
    autoplayHoverPause:true
});
});
</script>

Il plugin prevede diverse opzioni personalizzabili: per esempio, noi abbiamo scelto di mostrare un solo commento alla volta (items:1), abbiamo impostato l'avvio automatico (autoplay:true) lo stop all'hover sul commento (autoplayHoverPause:true), il tempo di visualizzazione di ogni commento espresso in millisecondi (autoplayTimeout:8000).
In ogni caso sul sito dell'autore si possono trovare tutte le opzioni disponbili.

Forza, andate a commentare il guestbook! E, se volete essere inseriti nella top comments della nostra demo, siate super cool!