PHP: creare dinamicamente un elenco ordinabile di file contenuti in una cartella

Nella creazione di un sito ci si può imbattere nella necessità di gestire un insieme di documenti liberamente scaricabili dagli utenti. Di per sé la realizzazione è semplice: una cartella sul server che contiene i file ed una pagina con tanti tag <a> quanti sono i documenti da scaricare. Ma, ad ogni nuovo inserimento o rimozione, saremmo costretti a mettere mano al codice HTML della pagina.
Per automatizzare il tutto ci sono varie soluzioni. Oggi vi mostreremo un metodo semplice, che non richiede l'uso del database, per visualizzare dinamicamente in una tabella un insieme di documenti scaricabili contenuti in un'unica cartella, con la possibilità di ordinare i documenti in base alla data, al nome o alle dimensioni dei file.

Per realizzare il nostro intento utilizzeremo, come abbiamo già visto in questo articolo, la funzione glob() di PHP grazie a cui è possibile memorizzare in un array i nomi dei file, con estensioni da noi specificate, contenuti in una cartella.

Qui la demo:

DEMO

Questo il codice HTML e PHP utilizzato per generare dinamicamente la tabella della nostra demo:

<table id="fileTable">
  <thead>
    <tr>
      <th>Data</th>
      <th>Nome</th>
      <th>Dim.</th>
      <th class="no-order">&darr;</th>
    </tr>
  </thead>
 <tbody>
 <?php
 /* ===============================================================
 Author's custom code: http://quellidelcucuzzolo.blogspot.it
 Please do not remove credit
 ============================================================== */
 foreach (glob("nomecartella/*.{doc,pdf,docx,xls}", GLOB_BRACE) as $filename) {
     $nomefile = pathinfo($filename); //array contenente nome, estensione e percorso del file
     $timefile = filemtime($filename); //data in timestamp
     $modifica = date("d/m/Y", $timefile); //data in formato dd/mm/yyyy
     $peso     = round(filesize($filename) / 1024); //dimensioni del file arrotondate ai KB
     echo "<tr>
           <td data-ordina='$timefile'>$modifica</td>
           <td class='nomefile' data-ordina='$nomefile[basename]'>$nomefile[basename]</td>
           <td class='size' data-ordina='$peso'>$peso KB</td>
           <td>
             <a href='$filename' title='Scarica il file' download><img src='img/d-icon.png' alt='icona download' /></a>
           </td>
         </tr>
         ";
 }
 ?>
 </tbody>
</table>

I parametri passati alla funzione glob()sono da personalizzare e si riferiscono al nome della cartella in cui sono inseriti i documenti (in rosso) e alle estensioni dei file scaricabili (in blu, separate da virgole):

glob("nomecartella/*.{doc,pdf,docx,xls}", GLOB_BRACE)

La forzatura del download dei file è stata affidata all'attributo HTML5 download (si fa presente che non è compatibile con tutti i browser).

Per rendere ordinabili i documenti visualizzati abbiamo utilizzato lo script TinySort, che nasce come plugin jQuery ma che è stato successivamente riscritto dall'autore in JavaScript per renderlo indipendente e più snello. Occorre quindi scaricare dal sito dell'autore (oppure dalla nostra demo) il file tinysort.min.js e richiamarlo nella pagina.
Per poter applicare lo script TinySort ad una tabella, nella documentazione dell'autore, viene proposto un codice JavaScript aggiuntivo, codice che, per semplicità nostra, non conoscendo a fondo JavaScript puro, abbiamo riconvertito in jQuery in modo da poterlo personalizzare più facilmente in base alle nostre necessità.
Si rende quindi necessario caricare preventivamente nella pagina anche la libreria jQuery.

Questo lo script da inserire in head:

<script>
$('document').ready(function() {
  var totale = $('#fileTable tbody tr').length;
  $('#totale').text(totale);
  $('#fileTable th:not(".no-order")').click(function() {
    var tableHeaderIndex = $(this).index();
    var order = $(this).attr('data-order') === 'asc' ? 'desc' : 'asc';
    $(this).attr('data-order', order);
    $(this).siblings().attr('data-order', '');
    tinysort(
      '#fileTable tbody tr', {
        selector: 'td:nth-child(' + (tableHeaderIndex + 1) + ')',
        data: 'ordina',
        order: order
      }
    );
  });
});
</script> 

Nello script originale, di default, i dati vengono ordinati in base al testo contenuto nei tag utilizzati come selettori. Nel nostro caso la data, visualizzata in formato umanamente leggibile, non è utilizzabile per l'ordinamento. Abbiamo allora scelto l'opzione di ordinamento per attributo, impostando, nel codice PHP (presentato sopra) che genera la tabella, un attributo data-ordina che contiene il valore che deve essere utilizzato per l'ordinamento.
Abbiamo aggiunto alle intestazioni di colonna delle icone di background indicanti il verso dell'ordinamento, icone che cambiano in funzione dello stato della colonna: colonna non ordinata, colonna ordinata in senso crescente, colonna ordinata in senso decrescente.
Nella variabile totale viene memorizzato il numero delle righe presenti nella tabella, quindi il numero dei documenti disponibili, che è visualizzato a inizio pagina.

Le regole CSS utilizzate per formattare la tabella sono ovviamente personalizzabili. In particolare sottolineamo che, a risoluzioni inferiori a 480px, la tabella si linearizza e le intestazioni di colonna hanno come unica funzione quella dell'ordinamento.

In rete potete trovare numerosi codici alternativi a quello da noi qui presentato per visualizzare i file contenuti in una cartella. Ne riportiamo alcuni da cui è possibile prendere ulteriori idee:

• Elenco di file e sottocartelle con link
• Encode Explorer
• dirLIST -  PHP Directory Lister