Sezioni HTML dinamiche in PHP

La creazione di blocchi di HTML dinamici è forse l'applicazione più semplice e popolare di una pagina web dinamica. Moltissimi tutorial PHP, JSP o ASP iniziano con la creazione di una tabella o una serie di blocchi HTML. Dati i numerosi vantaggi pratici, è bene utilizzare la tecnica anche per siti prevalentemente statici, ovvero pagine che si presentano uguali a tutti gli utenti. In altre parole: non serve aver bisogno di gestire degli account utenti, tramite registrazione e login, per beneficiare dei vantaggi di un linguaggio web dinamico. Una pagina realizzata dinamicamente è più facile da mantenere, più snella e si presenta in maniera più pulita rispetto ad una pagina creata usando solamente dell'HTML statico.

Per fissare le idee, vedremo un caso pratico di applicazione della tecnica in PHP: i concetti esposti varranno per qualsiasi altro linguaggio di programmazione, salvo ovviamente le opportune modifiche sintattiche. Iniziamo con il parametrizzare tutti i dati che ci interessano

// Definizione di autori e libri
 $books = array(
 0 => array("book_1.php", "Titolo 1" , "Mario Rossi", "2010" ) ,
 1 => array("book_2.php", "Titolo 2" , "Bruno Verdi", "2012" ) ,
 ecc.
 ) ;

nell'esempio qui sopra abbiamo definito i dati di alcuni libri, specificando rispettivamente: la landing page del libro, il titolo dell'opera, il nome dell'autore e l'anno di pubblicazione. Per farlo abbiamo usato un array bidimensionale (array 2D), che in pratica può essere visualizzato come una tabella, dove ogni riga contiene i dati di un'opera letterale, e ogni colonna contiene una serie di dati omogenei. Chi è pratico con i database può pensare ad un array 2D come una specie di tabella o vista di un database. L'elemento generico $books[i][j] rappresenterà il dato j-esimo della riga i-esima, ad esempio

$books[1][2] = “Titolo 2”

Ovviamente, a seconda del contesto e degli argomenti trattati, il nostro array sarà diverso. A volte è comodo definire più di un array, per evitare di ritrovarsi un unico array composto da troppe colonne. Continuando l'esempio qui sopra, un secondo array potrebbe essere:

// Definizione di risorse
 $resources = array(
 0 => array("/img/copertina_1.jpg", "libri/titolo_1.pdf" ) ,
 1 => array("/img/copertina_2.jpg", "libri/titolo_2.pdf" ) ,
 ecc.
 ) ;

La scelta di quali e quanti array usare dipende dal contesto, ed è forse la scelta più importante. Se definiamo troppi array dobbiamo ricordarci, quando aggiorniamo o aggiungiamo qualcosa, di modificare tutti gli array coinvolti. Di contro, se usiamo un unico grande array con tutti i dati che ci servono, dobbiamo essere lungimiranti ed ordinati nel gestire le colonne, onde evitare di perdere troppo tempo ogni volta che vogliamo modificare qualcosa. La scelta dipende anche dagli strumenti di lavoro: se usiamo un editor in colonna probabilmente terremo tutte le colonne ben formattate. Se invece diamo molto peso alla performances, e gestiamo gli array tramite un framework o tool apposito, forse sceglieremo di compattare gli array sacrificandone la formattazione.

Rendering

Dopo aver deciso come organizzare i contenuti all'interno di uno o più array, possiamo occuparci di renderizzare i dati, ovvero produrre l'HTML finale. Ciò si realizza scrivendo una sorta di blocco template, ovvero una sezione di codice HTML e PHP, ad esempio

<?php
for ($n = 0 ; $n < count($books) ; $n++) {
?>
<div class="my_div">
  <a class="link_1" href="<?php echo $books[$n][0] ?>" title="<?php echo $books[$n][1] ?>">
  <img class="my_image" src="<?php echo $resources[$n][0] ?>"/>
  </a>
  <a class="link_2" href="<?php echo $books[$n][0] ?>" title="<?php echo $books[$n][1] ?>">
  <span class="title"><?php echo $books[$n][1] ?></span>
  </a>
  <br/><br/>
  <span class="subtitle">di <?php echo $books[$n][2] ?> - <?php echo $books[$n][3] ?></span>
  <p class="description"><?php echo $abstracts[$n] ?>
  <br/><br/>
  <a class="link_3" href="<?php echo $resources[$n][1] ?>" title="<?php echo $books[$n][1] ?>">Scarica</a>
  </p>
</div>
<?php } ?>

Il codice qui sopra produrrà tutti i blocchi HTML del caso (in questo caso dei div con classe my_div).

Il vantaggio è evidente: se dobbiamo cambiare layout, grafica o aspetto ci basterà mettere le mani nel codice qui sopra, anche se la pagina contenesse decine di libri.

Prima di concludere osserviamo che

• Nell'esempio qui sopra abbiamo usato un terzo array, avente nome abstract, che potrebbe contenere una breve descrizione dei libri. Come detto sopra questa è solo una delle scelte possibili: volendo avremmo potuto inserire i dati degli array resources e abstract all'interno dell'array books
• Abbiamo evitato la sintassi abbreviata <?= $books[i][j] ?>, perché potrebbe dare problemi a seconda della configurazione di PHP (per dettagli vedi in questo articolo)
• Usiamo echo al posto di print perché è leggermente più veloce. Si potrebbe guadagnare ancora qualcosa sulle performances evitando la concatenazione di stringhe tramite l'operatore dot (il punto), ma la questione non è banale  e merita di essere trattata a parte