25 marzo 2016

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

Nell'articolo precedente abbiamo visto come visualizzare i dati inseriti in un database con l'Oggetto Modulo Invio E-mail di WebSite X5, creando un semplice esempio per visualizzare delle news. Oggi vedremo come aggiungere, a questo esempio, una paginazione in PHP, utile per organizzare in modo più funzionale un numero corposo di news. Esistono diversi script in rete per ottenere questo: noi abbiamo provato ad affrontare il problema a modo nostro, è possibile che ci siano modi più semplici e funzionali.

Qui la demo:

demo paginazione website x5
DEMO


Prima di procedere vi consigliamo di leggere attentamente (e provare) quanto scritto nel precedente articolo: le modifiche descritte di seguito riguardano solo il punto 4 Oggetto Codice HTML
Assicuriamoci anche di aver inserito nel database un campo con funzione di chiave primaria (campo di tipo INT con AUTO_INCREMENT), necessario per ordinare le news, come descritto nella sezione "Gestione dei dati".

Questo è il codice utilizzato per la nostra demo da inserire nell'Oggetto Codice HTML:

<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';

//VARIABILI PAGINAZIONE
  //Nome del campo del database con autoincremento
  $qid         = 'id'; 
  //Numero dei record da visualizzare in ogni pagina
  $qrecordpage = 1;
  //Numero massimo dei numeri di pagina da visualizzare in ogni pagina
  $qnpageshow = 4; 

//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
  $qitemtot = $qdb->query("SELECT * FROM $qtable");
  if ($qitemtot) {
 
    //Conto i record totali
    $qrecordtot = count($qitemtot);
    //Calcolo il numero delle pagine totali
    $qnpage = ceil($qrecordtot / $qrecordpage);
    
    //Validazione del parametro passato in GET
    if (isset($_GET['pag'])) {
        $qpage = intval($_GET['pag']);
        if ($qpage < 1 || $qpage > $qnpage)
            $qpage = 1;
    } else
        $qpage = 1;
    
    //Record iniziale 
    $qrecordstart = $qrecordpage * $qpage - $qrecordpage;
    
    //Estrae il numero di record definiti dopo averli ordinati in senso decrescente in base al valore del campo chiave primaria autoincrementale (l'ultimo record inserito si visualizza per primo)
    $qitem = $qdb->query("SELECT * FROM $qtable ORDER BY $qid DESC LIMIT " . $qrecordstart . "," . $qrecordpage);
    
//OUTPUT 

    //Iterazione dell'array e creazione della struttura HTML
    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";
    }
 //OUTPUT PAGINAZIONE
    echo '<ul class="pagination">';
    //Stampa dei pulsanti indietro in tutte le pagine tranne la prima
    echo ($qpage != 1 ? '<li><a href="' . $_SERVER['PHP_SELF'] . '?pag=1" title="Vai a pagina 1">&#10094;&#10094;</a></li><li><a href="' . $_SERVER['PHP_SELF'] . '?pag=' . ($qpage - 1) . '">&#10094;</a></li>' : '');
    //Controllo se il numero di pagine da visualizzare supera il numero di pagine totali
    if ($qnpageshow > $qnpage) {
        $qpageStart = 1;
        $qpageStop  = $qnpage + 1;
    } else {
        //Primo numero di pagina della paginazione
        $qpageStart = $qpage; 
        //Ultimo numero di pagina della paginazione
        $qpageStop = $qpageStart + $qnpageshow > $qnpage ? $qnpage + 1 : $qpageStart + $qnpageshow; 
        //Controllo se vengono visualizzate un numero di pagine inferiori a quelle previste
        if ($qpageStop - $qpageStart < $qnpageshow) {
            //Ridefinisco il numero di pagina di partenza
            $qpageStart = $qnpage - $qnpageshow + 1;
        }
      }   
    //Stampa dei numeri di pagina
    for ($i = $qpageStart; $i < $qpageStop; $i++) {
        if ($qpage == $i) {
            echo '<li class="currentpage">' . $qpage . '</li>';
        } else {
            echo '<li><a href="' . $_SERVER['PHP_SELF'] . '?pag=' . $i . '">' . $i . '</a></li>';
        }
    }
    //Stampa dei pulsanti avanti in tutte le pagine tranne l'ultima
    echo ($qpage != $qnpage ? '<li><a href="' . $_SERVER['PHP_SELF'] . '?pag=' . ($qpage + 1) . '">&#10095;</a></li><li><a href="' . $_SERVER['PHP_SELF'] . '?pag=' . $qnpage . '" title="Vai all\'ultima pagina">&#10095;&#10095;</a></li>' : '');
    echo "</ul>";
  } else
    echo 'Nessuna news presente';

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

Potete facilmente personalizzare i valori delle variabili che contengono il nome del campo con autoincremento ($qid), il numero delle news da visualizzare in ogni pagina ($qrecordpage) ed i numeri di pagina da visualizzare in ogni pagina ($qnpageshow).

La logica su cui si basa la paginazione è piuttosto semplice: dividendo il numero totale delle news memorizzate nel database con il numero delle news da visualizzare in ogni pagina si ottiene il numero totale di pagine.
Nell'output non visualizzeremo tutte le news, ma solo quelle che corrispondono alla pagina in cui ci troviamo, identificata attraverso un parametro passato in GET: supponendo di aver scelto di visualizzare tre news per pagina, dobbiamo fare in modo che, se ci troviamo a pagina 1, vengano visualizzate le prime tre news, a pagina 2 la quarta, la quinta e la sesta, e così via.
Inoltre, in ogni pagina, non verranno visualizzati i numeri di tutte le pagine presenti, ma solo un numero fisso deciso da noi nella variabile $qnpageshow
Abbiamo anche aggiunto due pulsanti per andare alla pagina precedente/successiva e due pulsanti per raggiungere la prima e l'ultima pagina.


Nella Scheda Esperto dell'Oggetto Codice HTML possiamo definire lo stile dei pulsanti della paginazione. Questo è il codice CSS da noi utilizzato, da aggiungere a quello presente nel precedente articolo al punto 5:

/* paginazione */
ul.pagination {
  padding: 10px;
}

ul.pagination li {
  display: inline-block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  margin-right: 4px;
}

ul.pagination a {
  background: #dddddd none repeat scroll 0 0;
  color: #333333;
  display: block;
  text-align: center;
  text-decoration: none;
}

/* effetto all'hover */
ul.pagination a:hover {
  background: #5cb48e none repeat scroll 0 0;
  color: #ffffff;
}

/* pagina corrente */
ul.pagination li.currentpage {
  background: #5cb48e none repeat scroll 0 0;
  color: #ffffff;
}

@media (max-width: 479px) {
  ul.pagination li {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 10px 10px 0;
  }
}


Per approfondire l'argomento:

Nel prossimo articolo vedremo come visualizzare l'immagine ingrandita in showbox.



7 commenti:

  1. Provato subito! Ho fatto copia e incolla e funziona alla perfezione.
    Ora, siccome l'appetito vien mangiando, come renderlo un sistema di news classico?
    Ad esempio, potrei inserire un campo "abstract" con una descrizione corta e renderla cliccabile per visualizzare la notizia estesa.

    Però come mostrarla? Una nuova pagina si può creare dinamicamente? Cioè, potremmo creare una pagina master in X5 senza valori ma con solo i campi presenti nel DB in modo che il resto del contenuto della notizia venga generato con la classica url parametrizzata dopo il "?"

    RispondiElimina
    Risposte
    1. Ciao astediarte,
      come avrai intuito si può fare tutto.
      Per questo abbiamo messo un link (tra i tanti) dove potrai documentarti.
      Buon lavoro :)

      Elimina
    2. Ho trovato su youtube un tutorial interessante che potrei anche implementare.
      https://www.youtube.com/watch?v=bmG2mop_QZw
      Ma quello che mi manca è come avere una pagina in X5 che faccia da master per ricevere i parametri dal db.
      Nel video viene mostrato che la pagina index.php?pagina=servizi (ad esempio) non esiste e viene creata prendendo proprio il nome dal link. Come faccio a generare una pagina index.php?pagina=titolo dove "titolo" è il titolo della news?

      Grazie
      Sandro

      Elimina
    3. Ciao Sandro,
      stiamo andando un po' oltre l'argomento di questo articolo, ma guarda che tutte le pagine della demo di questo post generate con la paginazione sono pagine dinamiche, inesistenti in WebSite! Devi usare lo stesso metodo: assegni al link un parametro passato in GET e, nella pagina che creerai in WS, quella che tu chiami "pagina master", scriverai il codice che, in base al parametro ricevuto, richiama dal database l'articolo corrispondente.
      Oltre al link che ti abbiamo segnalato, puoi anche guardare questo post su Answers per avere un'idea in più.

      Elimina
  2. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  3. Ciao Vi ringrazio per l'aiuto che mi avete dato in questi anni, volevo chiedervi, ho inserito nel form invio email un campo con scelta multipla che si chiama indirizzi, ho utilizzato questo script, ma mi visualizza gli indirizzi separati dalla virgola consecutivamente, vorrei andare acapo dopo ogni virgola, ho fatto vari tentativi utilizzando explode in questo modo:
    if (isset($val[$qindirizzo]) && $val[$qindirizzo] != '') {
    echo (explode(',',$val[$qindirizzo],-1)) . "\n";
    }
    cosa ottengo:
    diringente reparto1, dirigente reparto2, dirigente reparto3
    cosa vorrei:
    dirigente reparto1
    dirigente reparto2
    dirigente reparto3
    vi ringrazio per i vostri suggerimenti ed aiuti

    RispondiElimina
  4. Ciao a Tutti, volevo ringraziare "Quelli del cucuzzolo" per questo splendido e semplice script, ho risolto il mio problema così:

    if (isset($val[$qindirizzo]) && $val[$qindirizzo] != '') {
    $elenco=explode(',',$val[$qindirizzo]);
    echo join('
    ',$elenco);
    }

    questo nel caso in cui inserisci dal form email l'opzione "scelta multipla".
    Ciao e grazie, perchè non continuate a stuzzicarci con i vostri suggerimenti?

    RispondiElimina