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

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:

• SELECT: interrogare MySQL - HTML.it

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