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?
