CONTATTACI

Guide per aspiranti programmatori

Lezione 26 / 26

PHP template engine

Se sei arrivato fin qui, avrai appreso le basi del linguaggio di programmazione php, ma adesso si fa sul serio! Vediamone una prima applicazione concreta! 
Piccola premessa: devi sapere che, in origine, il nome PHP era l’ acronimo di “Personal Home Page” ed è nato come linguaggio di sviluppo specifico per il web; infatti, possiamo scrivere del codice HTML direttamente all’interno di un file PHP e visualizzarlo con il browser!! 
Vediamo come! 

Come prima cosa creiamo una cartella per il nostro progetto con all’interno un file index.php; all’interno del file inseriamo il template base di html e inseriamo un titolo a piacere: il risultato finale dovrebbe essere più o meno questo.

 

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

 

Ora non ci resta che avviare un server php nella cartella del progetto con questo comando

php -S localhost:8000
apriamo, quindi, il nostro browser preferito e andiamo su localhost:8000

 

 

Ed ecco il risultato finale! La nostra pagina HTML sarà online.
Avrai notato, però, che non c’è, ad ora, nulla di nuovo rispetto alla semplice pagina html. Cosa è cambiato, dunque? Facile!

Adesso possiamo iniziare a inserire delle variabili create con php all’interno dell’html e compilare in questo modo il file finale. Niente male, vero?

Proviamo a fare un piccolo passo in avanti e unire quello che abbiamo imparato su php al linguaggio html.

 

<?php
$title = 'Hello World from PHP';
?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1><?php echo $title; ?></h1>
</body>
</html>

 

Benissimo! Se hai letto le precedenti guide ricorderai certamente che il codice php è delimitato (come un elemento html) da un tag di apertura (<?php) e un tag di chiusura (?>). Con il metodo php echo possiamo stampare il valore della variabile “title” all’interno della nostra pagina e ottenere questo risultato.

 


Benissimo! Adesso che siamo riusciti a stampare una variabile nel nostro foglio html con php echo introduciamo un piccola shorthand che ti farà risparmiare tantissimo tempo: infatti, possiamo sostituire 

 

<?php echo $title; ?>

con 

<?=$title?>

 

Un piccolo cambio che velocizzerà notevolmente il nostro flusso di lavoro!

Cerchiamo, adesso, di fare una cosa un po’ più difficile e creare una serie di informazioni da un php array.

 

<?php
$title = "Hello World from PHP";
$users = ['Mario Rossi', 'Luigi Bianchi', 'Giovanni Verdi'];
?>

<!DOCTYPE html>

<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1><?=$title?></h1>
<h2>Users :</h2>
<ul>
<?php foreach($users as $user) { ?>
<li><?=$user?></li>
<?php } ?>
</ul>
</body>
</html>

 

Abbiamo creato l’array users e tramite il foreach di php l’abbiamo ciclato e stampato gli elementi dell’array users.

Ecco il risultato che possiamo visualizzare sul browser. Ma che cosa succederebbe se il nostro array fosse vuoto? Ovviamente, non verrebbe stampato nessun nome e la nostra pagina resterebbe vuota. È bene, in questi casi, lasciare sempre un messaggio all’utente che faccia capire che non ci sono ancora utenti e, quindi, non lasciarlo di fronte ad una pagina vuota.

Per farlo, utilizzeremo un if statement che mostrerà un messaggio nel caso in cui la lista fosse vuota.

index.php

<?php
$title = "Hello World from PHP";
$users = [];
?>

<!DOCTYPE html>

<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1><?=$title?></h1>
<?php if (count($users) > 0) : ?>
<h2>Users :</h2>
<ul>
<?php foreach($users as $user) { ?>
<li><?=$user?></li>
<?php } ?>
</ul>
<?php else : ?>
<p>Non ci sono utenti</p>
<?php endif; ?>
</body>
</html>

Ecco come apparirà la nostra pagina nel caso non ci fossero utenti:

 

Proviamo, adesso, a fare un esempio più complesso andando a mostrare una lista di prodotti con delle card e uno stile

index.php

<?php
$title = "Hello World from PHP";
$products = [
[ "id" => 1, "name" => "Divano", "price" => 2500],
[ "id" => 2, "name" => "Frigorifero", "price" => 500],
[ "id" => 3, "name" => "Lampada", "price" => 95.99]
];
?>

<!DOCTYPE html>

<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>

<body>
<h1><?=$title?></h1>
<?php if (count($products) > 0) : ?>
<h2>Products :</h2>
<div class="products-container">
<?php foreach($products as $product) { ?>
<style>
.product-card-<?=$product["id"]?> {
background-color: hsl(<?=(10 * $product["id"])?> 80% 50%);
}
</style>
<div class="product-card product-card-<?=$product["id"]?>">
<h3><?=$product['name']?></h3>
<p><?=number_format($product['price'], 2 , ',', '.') ?> €</p>
</div>
<?php } ?>
</div>
<?php else : ?>
<p>Non ci sono prodotti</p>
<?php endif; ?>
</body>
</html>

style.css

.product-card 
  {
display: inline-block;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 1rem;
border: 1px solid #eaeaea;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
margin: 20px;
  }

.products-container 
  {
display: flex;
flex-wrap: wrap;
  }

 

Abbiamo creato una pagina più complessa con un file css per modificare lo stile di base delle card e con un foreach abbiamo ciclato l’array dei prodotti.

Per ogni prodotto, poi, abbiamo creato una classe specifica che facesse riferimento all’ID del prodotto e applicato un colore di background diverso.

Nella sezione del prezzo abbiamo, infine, inserito la funzione number_format che permette di scegliere il formato di visualizzazione dei numeri. In questo caso, abbiamo scelto che ci siano sempre due numeri dopo la virgola, di separare le migliaia con il punto e i decimali con la virgola.

Come possiamo notare, il nostro file index sta diventando sempre più grande e complesso e, quindi, adesso ci occorre un metodo per mettere in ordine il nostro codice.

 

Php Include

Con il metodo php include possiamo includere un file all’interno di un altro e separare in questo modo i vari componenti. 

Facciamo una prova con il nostro file index e separiamo la card del prodotto dal resto.

Creiamo, quindi, una cartella components all’interno della quale possiamo inserire i nostri file specifici per ogni componente.

 

 

product_card.php

<style>
.product-card-<?=$product["id"]?> {
background-color: hsl(<?=(10 * $product["id"])?> 80% 50%);
}
</style>

<div class="product-card product-card-<?=$product["id"]?>">
<h3><?=$product['name']?></h3>
<p><?=number_format($product['price'], 2 , ',', '.') ?> €</p>
</div>

 

index.php

 

<?php
$title = "Hello World from PHP";
$products = [
[ "id" => 1, "name" => "Divano", "price" => 2500],
[ "id" => 2, "name" => "Frigorifero", "price" => 500],
[ "id" => 3, "name" => "Lampada", "price" => 95.99]
];
?>

<!DOCTYPE html>

<html lang="en">
<head>
 <title>Document</title>
 <link rel="stylesheet" href="./style.css">
</head>

<body>
<h1><?=$title?></h1>
<?php if (count($products) > 0) : ?>
<h2>Products :</h2>
<div class="products-container">
<?php foreach($products as $product) { ?>
<?php include('./components/product_card.php') ?>
<?php } ?>
</div>

<?php else : ?>
<p>Non ci sono utenti</p>
<?php endif; ?>
</body>
</html>

in questo modo ogni componente che andremo a creare potrà essere riutilizzato in altre pagine php, un esempio potrebbe essere l’head del nostro foglio html.

Ad oggi, l’intero processo che abbiamo appena descritto viene assai facilitato dagli automatismi di alcuni frameworks del linguaggio php: ne sono un esempio il php template engine “Blade” per il framework Laravel e “Twig” per il framework Symfony.

Finisce qui il nostro excursus tra i meandri del linguaggio di programmazione PHP! A questo punto conosci le basi, anche in maniera dettagliata, di questo linguaggio. Puoi approfondire l’apprendimento allenandoti con i nostri esercizi PHP e,  se vuoi veramente fare sul serio con questi frameworks moderni, iscriviti al nostro corso Hackademy! Che ne dici, ti senti pronto a diventare web developer

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 187 €/mese.

Esempio di finanziamento  

Importo finanziato: € 3990 in 24 rate da € 187 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 4572.88.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.