Conoscere varie tecniche per elaborare pagine HTML con PHP è fondamentale per creare siti interattivi e con un’elevata User Experience (UX).
A monte è lo User Experience Designer, ma anche il Web Designer (più genericamente), a creare un workflow di animazioni per un ipotetico prototipo di sito web (con strumenti come Figma).
Dopodiché sarà il programmatore, o i programmatori ripartiti in lavori back-end e front-end, a realizzare il sito web effettivo.
PHP è molto utilizzato per creare pagine web dinamiche. Quando ti sarà presentato un prototipo di sito web tu dovrai essere in grado di eseguire quanto viene richiesto.
Le basi partono proprio da qui: conoscere come elaborare una pagina HTML nel migliore dei modi.
In un’articolo futuro vedremo come interfacciare AJAX (Asyncronous Javascript and XML) con file PHP che rispondono a determinate richieste HTTP dell’utente (nel caso di web app o siti con un elevato grado di interattività).
Oggi vedremo alcune tecniche veramente basilari che ogni programmatore junior alle prime armi deve conoscere.
Affronteremo l’elaborazione dell’HTML a partire dalle stringhe, dagli array, da strutture di controllo, da funzioni con parametri e altro.
L’elaborazione dell’HTML tramite PHP può diventare, in determinati casi, un lavoro molto specifico e talvolta complesso. Ad esempio, quando un determinato template deve essere elaborato a partire da decine di variabili.
Il lavoro che toccherà fare a te in autonomia dopo questa guida sarà sperimentare: cercare di arrivare a nuove tecniche di elaborazione dell’HTML sporcandoti le mani.
Indice riassuntivo
Elaborare codice HTML a partire da una stringa
singola variabile, generare testo da variabile, heredoc, nowdoc (questi ultimi due come accenno)
Generare HTML a partire da una variabile è la via più semplice.
Ipotizziamo che dobbiamo generare una stringa di testo, esempio un messaggio di errore, a partire da alcune variabili.
<?php
// Prepariamo alcune variabili per costruire la stringa
$codice_errore = '404';
$tipologia_errore = 'pagina non trovata';
$url_corrente = 'https://michelemincone/programmare-senza-php';
// Questa è la stringa da costruire (il messaggio)
$messaggio = '<p>Si è verificato un errore <b class="red">' . $codice_errore . '</b> per <b class="black">' . $tipologia_errore . '</b> sulla pagina: <b class="italic">' . $url_corrente . '</b></p>';
// Stampo su schermo la stringa;
echo $messaggio;Come vedi ho messo i tag <p></p> in modo tale che contengano la stringa per creare un testo in HTML e i tag <b></b> per mettere in grassetto i testi dati in output dalle variabili.
In più ho incluso l’attributo HTML class per i tag <b>. In modo tale possono modificare il CSS di quel preciso elemento.
Output del codice:
Si è verificato un errore 404 per pagina non trovata sulla pagina: https://michelemincone.com/programmare-senza-phpCambiando il contenuto delle variabili all’inizio del codice puoi cambiare dinamicamente il contenuto della stringa.
Come vedi per la variabile $messaggio ho utilizzato il classico modo per concatenare i dati delle variabili. Ma avremmo potuto usare tranquillamente i doppi apici evitando il punto per concatenare:
... codice precedente
// Questa è la stringa da costruire (il messaggio)
$messaggio = "<p>Si è verificato un errore <b class="red">{$codice_errore}</b> per <b class="black">{$tipologia_errore}</b> sulla pagina: <b class="italic">{$url_corrente}</b></p>';
... codice successivoAlternativamente andava bene anche l’heredoc.
Elaborare HTML da un array in PHP con loop foreach
Capita spesso di dover eseguire un loop su un array per generare dell’HTML.
Prendiamo come esempio questo array:
<?php
// Prepariamo l'array
$nomi = ["Michele", "Giovanni", "Marco", "Antonio"];
// Prepariamo una variabile per il template HTML
$html = '';
// Inseriamo nel template un testo introduttivo e prepariamo i tag HTML
$html .= "<p>";
$html .= "Nella nostra classe ci sono: <ul>";
// Eseguiamo un foreach loop dell'array e costruiamo il template
foreach ($nomi as $nome) {
$html .= "<li>{$nome}</li>";
}
// Chiudiamo gli elementi HTML paragrafo e lista non ordinata
$html .= "</ul>";
$html .= "</p>";
// Stampiamo su schermo la stringa
echo $html;Creare una struttura HTML da una funzione PHP
Per elaborare una struttura HTML tramite una funzione in PHP possiamo seguire due strade.
Possiamo usare funzioni che mostrano nella pagina web la struttura HTML utilizzando il costrutto echo o funzioni di ritorno che ci permetteranno poi di manipolare la struttura.
In entrambi i casi possiamo utilizzare o no i parametri.
HTML da funzioni PHP
Realizziamo una funzione che stampa su schermo una struttura HTML. Subito dopo il costrutto echo realizziamo una semplice struttura di una sezione header tra doppi apici:
<?php
// Definiamo una funzione che contenga una struttura HTML
function website_header() {
echo "<header id='header'>
<div class='logo'><img src='.../logosrc'></div>
<div class='menu'>
<nav>
<ul>
<li>Blog</li>
<li>Chi siamo</li>
<li>Contatti</li>
<li>Barra di ricerca</li>
</ul>
</nav>
</div>
</header>";
}
?>Subito dopo chiamiamo la funzione per ottenere la struttura HTML desiderata, ad esempio in un documento HTML di riferimento:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php website_header(); ?>
</body>
</html>Visitando la pagina vedrete la struttura HTML contenuta nella funzione che abbiamo appena chiamato.
Possiamo rendere queste funzioni ancor più flessibili aggiungendo dei parametri. Ad esempio, possiamo dinamizzare l’URL del logo e le singole voci del menù.
Dato che per le voci del menu (parametro $menu_items) avremo un array, useremo un foreach loop per costruire i singoli elementi della lista.
In questa funzione, come avrai notato, concateneremo tutto nella variabile $html che inizializziamo all’inizio della funzione:
<?php
function website_header($logo_url, $menu_items) {
$html = ''; // Inizializza
$html = "<header id='header'>
<div class='logo'><img src='{$logo_url}'></div>
<div class='menu'>
<nav>
<ul>";
foreach ($menu_items as $item) {
$html .= "<li>{$item}</li>";
}
$html .= "</ul>
</nav>
</div>
</header>";
echo $html;
}
?>Allo stesso modo, chiamiamo la funzione nel punto del documento HTML in cui vogliamo mostrare l’header inserendo come parametri l’URL per l’immagine del logo e le singole voci del menù in un array:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php website_header('https://sitoesempio.com/asset/img/img1.png', array('Blog', 'Chi siamo', 'Contatti', 'Ricerca')); ?>
</body>
</html>Come risultato avremo sempre l’header di prima ma questa volta possiamo manipolare i dati in modo dinamico.
HTML da funzioni PHP di ritorno
Vediamo come mostrare la stessa struttura HTML con una funzione di ritorno.
<?php
function website_header($logo_url, $menu_items) {
$html = ''; // Inizializza
$html = "<header id='header'>
<div class='logo'><img src='{$logo_url}'></div>
<div class='menu'>
<nav>
<ul>";
foreach ($menu_items as $item) {
$html .= "<li>{$item}</li>";
}
$html .= "</ul>
</nav>
</div>
</header>";
return $html; // Al posto di echo usiamo RETURN
}
?>In questo esempio dobbiamo sostituire il costrutto echo con il costrutto return.
Ora proviamo a chiamare la funzione nello stesso modo di prima:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php website_header('https://sitoesempio.com/asset/img/img1.png', array('Blog', 'Chi siamo', 'Contatti', 'Ricerca')); ?>
</body>
</html>Visualizzando la pagina non vedremo nulla. Questo perché le funzioni di ritorno servono a passare dei dati senza però essere mostrati direttamente su una pagina web.
Quindi abbiamo due scelte:
- o affianco alla funzione utilizziamo echo
- oppure utilizziamo delle funzioni per manipolare l’output della funzione (la struttura HTML) e poi utilizziamo echo.
Quindi la potenza delle funzioni di ritorno sta proprio nella possibilità di manipolare i dati in output e mostrarli soltanto dopo questa operazione.
Ad esempio, posso contenere tutta la struttura HTML in ritorno dalla funzione website_header() in una variabile che possiamo chiamare, ad esempio, $header:
<?php
$header = website_header('https://sitoesempio.com/asset/img/img1.png', array('Blog', 'Chi siamo', 'Contatti', 'Ricerca'));
// Pagina HTML...In seguito, ad esempio, posso utilizzare un’espressione REGEX per eliminare il menù e rimpiazzarlo con qualsiasi altro contenuto:
<?php
// Codice di prima
$header = website_header('https://sitoesempio.com/asset/img/img1.png', array('Blog', 'Chi siamo', 'Contatti', 'Ricerca'));
// Utilizziamo un'espressione REGEX per togliere il menù cercando i tag <nav></nav>
$$header = preg_replace('/<nav>\s*(.*?)\s*<\/nav>/', 'Menù rimosso', $header);
// Pagina HTML...L’espressione regex “/<nav>\s*(.*?)\s*<\/nav>/” nella funzione preg_replace andrà a identificare i tag del menù di navigazione e poi andiamo a rimpiazzare tale struttura con una stringa “Menù rimosso“.
Ora vediamo il risultato di questa operazione trasformando i tag HTML in entità leggibili come normali stringhe in modo da apprezzarne la struttura:
//... Codice di prima
echo "<pre>";
var_dump(htmlentities($header));
echo "</pre>";
// Pagina HTML...Ed ecco il risultato vedendo la pagina:
string(282) "<header id='header'>
<div class='logo'><img src='https://sitoesempio.com/asset/img/img1.png'></div>
<div class='menu'>
Menù rimosso
</div>
</header>"Abbiamo rimosso con successo il menù di navigazione. Adesso proviamo a mostrare il contenuto manipolato, contenuto nella variabile $header, con il costrutto echo:
<?php
function website_header($logo_url, $menu_items) {
$html = ''; // Inizializza
$html = "<header id='header'>
<div class='logo'><img src='{$logo_url}'></div>
<div class='menu'>
<nav>
<ul>";
foreach ($menu_items as $item) {
$html .= "<li>{$item}</li>";
}
$html .= "</ul>
</nav>
</div>
</header>";
return $html;
}
$header = website_header('https://sitoesempio.com/asset/img/img1.png', array('Blog', 'Chi siamo', 'Contatti', 'Ricerca'));
$header = preg_replace('/<nav>\s*(.*?)\s*<\/nav>/', 'Menù rimosso', $header);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php echo $header; // Mostriamo l'header manipolato ?>
</body>
</html>Un altro esempio di manipolazione di una struttura HTML con una funzione di ritorno potrebbe essere quello con la concatenazione.
<?php
// Definiamo la nostra funzione di ritorno
function website_header($logo_url, $menu_items) {
$html = ''; // Inizializza
$html = "<header id='header'>
<div class='logo'><img src='{$logo_url}'></div>
<div class='menu'>
<nav>
<ul>";
foreach ($menu_items as $item) {
$html .= "<li>{$item}</li>";
}
$html .= "</ul>
</nav>
</div>
</header>";
return $html;
}
// Salviamo l'HTML di ritorno dalla funzione in una variabile $header
$header = website_header('https://sitoesempio.com/asset/img/img1.png', array('Blog', 'Chi siamo', 'Contatti', 'Ricerca'));
// Contenuto da concatenare in una nuova variabile
$bottom_header = "<div>Spedizione gratuita sopra i 50€ di spesa</div>";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
// Utilizziamo echo e poi concateniamo $header e $bottom_header
echo $header . $bottom_header;
?>
</body>
</html>Quindi una volta definita la funzione di ritorno salviamo il contenuto in una variabile $header inserendo tutti i parametri del caso.
Poi in una variabile $bottom_header inseriamo altro HTML che vogliamo aggiungere al nostro header.
Dopo, nel documento HTML tra tag <body></body>, andiamo a eseguire una concatenazione tra le due variabili.
Se concatenavo prima di $header, ad esempio, una variabile $top_header potevo aggiungere una struttura HTML prima dell’header:
<?php
// CODICE DI PRIMA...
// Aggiungiamo un top_header
$top_header = "<div id='top-header'>
<ul>
<li>Accedi</li>
<li>Registrati</li>
<li>Accedi</li>
</ul>
</div>";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
// Utilizziamo echo e poi concateniamo $header e $bottom_header
echo $top_header . $header . $bottom_header;
?>
</body>
</html>Ciò che rimane da fare è abbellire la struttura HTML con un po’ di CSS.
Blocchi condizionali PHP e generazione di contenuti HTML
Possiamo realizzare, attraverso una funzione o tramite del codice direttamente su una pagina web, una struttura che si adatta in base a determinate condizioni, ad esempio:
- mostra un paragrafo o altro contenuto se l’utente ha effettuato l’accesso o meno
- mostra un prodotto specifico in base agli acquisti effettuati da un utente
- reindirizza l’utente alla thank you page dopo aver effettuato un ordine sul tuo eCommerce
- e molto molto altro.
Quindi i blocchi condizionali if, if else, if else if ci permettono distribuire i contenuti HTML in modo specifico e sotto determinate condizioni.
Ecco un esempio molto semplificato:
<?php
$html = ""; // Inizializziamo una variabile $html
$eta_utente = 27; // Variabile "età" per mostrare contenuti HTML in modo condizionale
// La nostra struttura HTML
$html .= "<div id='primary'>";
// Defianiamo una condizione in base all'età dell'utente
if ($eta_utente >= 18) {
$html .= "<div id='prodotto-numero-1' class='content card'>";
$html .= "<div class='card-image'>";
$html .= "<img src='' alt=''>";
$html .= "</div>";
$html .= "<div class='card-title'>";
$html .= "<h4>Prodotto numero 1</h4>";
$html .= "</div>";
$html .= "<div class='card-desc'>";
$html .= "<p>Descrizione prodotto</p>";
$html .= "</div>";
$html .= "<div class='card-add-to-cart'>";
$html .= "<button>Aggiungi al carrello</button>";
$html .= "</div>";
$html .= "</div>";
} else {
$html .= "<h1>Non hai il permesso di accedere a questo sito web</h1>";
$html .= "<p>Solo chi ha 18 anni o più può visualizzare i contenuti di questo sito web</p>";
}
$html .= "</div>";
// Mostriamo l'intera struttura HTML
echo $html;
?>Inizializziamo una variabile $html e poi definiamo un’età di esempio in un’altra variabile $eta_utente.
In seguito costruiamo una struttura HTML con un blocco if-else con una condizione in base all’età dell’utente.
Infine mostriamo il contenuto con echo.
Naturalmente si tratta di un esempio molto semplificato. Potremmo estendere questo codice con l’utilizzo delle variabili globali $_SESSION, $_POST e $_GET per avere un codice che si avvicini di più ad un esempio reale e utente-centrico.
Contenere template HTML nelle variabili e manipolare il contenuto
nowdoc, heredoc, variabile semplice, concatenazione e manipolazione del contenuto (esempio rimuovi parole offensive)
In PHP possiamo contenere qualsiasi struttura HTML all’interno di semplici variabili:
<?php
// Definiamo dei markup HTML nelle variabili
$apertura_div = "<div class='container main-section'>";
$chiusura_div = "</div>";
$titolo = "<h1>Ciao, benvenuto sul nostro sito web</h1>";
$sottotitolo = "<p>Esplora tutti i nostri servizi e contattaci per ottenere maggiori informazioni</p>";
$listaservizi = "<ul>
<li>Realizzazione siti web</li>
<li>Realizzazione siti eCommerce</li>
<li>Realizzazione Applicazioni Mobile</li>
<li>Realizzazione Web Applications</li>
<li>Realizzazione Siti Web Aziendali</li>
<li>Realizzazione Portali</li>
</ul>";In seguito posso concatenare queste variabili per comporre una struttura HTML:
// Variabili di prima...
// Concateniamo le variabili
echo $apertura_div .
$titolo .
$sottotitolo .
$listaservizi .
$chiusura_div;
?>Visualizzando la pagina otterrai questo risultato:
Rimuovere parole offensive da una variabile che contiene codice HTML
Nel caso dei forum e dei commenti è fondamentale avere un sistema per rimuovere determinate parole che possono risultare offensive.
Qui sotto ho definito in una variabile array di $parole_proibite la lista di parole che voglio eliminare dal contenuto in $post per poterle rimpiazzare con un’altra stringa tramite la funzione str_ireplace():
<?php
$parole_proibite = ['Lorem', 'dolor', 'enim', 'anim', 'laborum'];
$post = "<div id='post-1' class='card post'>
<h2>Nuovo post da user #8495</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>";
$post = str_ireplace($parole_proibite, '<b>#/****</b>', $post);
echo $post;
?>Risultato:
Nota bene: utilizziamo la funzione str_ireplace e non str_replace perché vogliamo che tutte le parole indicate nell’array vengano rimosse a prescindere dal tipo di carattere maiuscolo o minuscolo.
Heredoc e Nowdoc
Posso contenere delle strutture HTML anche con la sintassi heredoc e nowdoc.
Partiamo con la sintassi heredoc che equivale alla sintassi a doppi apici dove possiamo inserire direttamente delle variabili, ma in questo caso non abbiamo bisogno di effettuare l’escape di singoli o doppi apici:
<?php
$titolo = "Il mio titolo";
$paragrafo = "Paragrafo";
$heredoc = <<<HTML
<div>
<h1>{$titolo}</h1>
<p>{$paragrafo}</p>
</div>
HTML;
echo $heredoc;
?>In questo esempio ho definito due variabili, $titolo e $paragrafo, che poi vado a inserire nella stringa heredoc. Infine mostro il risultato con echo.
Con il nowdoc invece non posso inserire delle variabili nel contenuto, quindi va usata con delle strutture HTML predefinite:
<?php
$titolo = "Il mio titolo";
$paragrafo = "Paragrafo";
$heredoc = <<<'HTML'
<div>
<h1>{$titolo}</h1>
<p>{$paragrafo}</p>
</div>
HTML;
echo $heredoc;
?>Se volessi modificare il contenuto HTML dovrei utilizzare uno str_replace() per inserire il contenuto desiderato.
Nota bene: l’heredoc inizia con <<<TEXT e finisce con TEXT;, il nowdoc ha i singoli apici all’inizio <<<'TEXT' e finisce semplicemente con TEXT;
Conclusioni non conclusive
In realtà i modi per generare codice HTML o intere pagine tramite PHP possono essere molteplici, con gradi di difficoltà diversi e comprendere numerose variabili.
Io vi ho mostrato le vie più semplici e alcuni esempi avevano qualche grado di difficoltà in più degli altri.
Nella mia esperienza e su alcuni progetti che ho sviluppato in locale, i modi con cui ho affrontato la generazione dell’HTML con PHP erano veramente molti.
Ogni modo era diverso in base al progetto in casi specifici, perché cambiava la complessità e la natura del progetto web.
In ogni caso, PHP serve proprio a questo!
Quindi sbizzarrisciti anche tu a scoprire ulteriori modi oltre a quelli che ti ho mostrato.
Questo esercizio ti sarà utile per uscire dalla tua zona di comfort, sviluppare il tuo modo di scrivere il codice in determinati modi e imparare a sperimentare piuttosto che copiare e vedere video su YouTube continuamente.
A presto, da qui è tutto.
Michele.