PHP template engine
Lección 24 / 24
Php Curso php Desarrollador php
Si has llegado hasta aquí, habrás aprendido los conceptos básicos del lenguaje de programación php, ¡pero ahora nos estamos poniendo serios! ¡Veamos una primera aplicación concreta!
Pequeña premisa: debes saber que, originalmente, el nombre PHP era el acrónimo de “Personal Home Page” y nació como un lenguaje de desarrollo específico para la web; de hecho, podemos escribir código HTML directamente dentro de un archivo PHP y verlo con el navegador.
¡Veamos cómo!
Primero, creamos una carpeta para nuestro proyecto con un archivo index.php dentro; dentro del archivo insertamos la plantilla html básica e insertamos un título de nuestra elección: el resultado final debería ser más o menos esto.
<!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>
Ahora solo tenemos que iniciar un servidor php en la carpeta del proyecto con este comando:
php -S localhost:8000
Abrimos entonces nuestro navegador favorito y seguimos con localhost:8000
¡Y aquí está el resultado final! Nuestra página HTML estará online.
Sin embargo, habrás notado que, a partir de ahora, no hay nada nuevo en comparación con la simple página html. Entonces, ¿qué ha cambiado? ¡Fácil!
Ahora podemos comenzar a insertar variables creadas con php en el html y compilar el archivo final de esta manera. No está mal, ¿verdad?
Intentemos dar un pequeño paso adelante y combinar lo que hemos aprendido sobre php con el lenguaje 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>
¡Muy bien! Si has leído las guías anteriores, seguramente recordarás que el código php está delimitado (como un elemento html) por una etiqueta de apertura (<?php) y una etiqueta de cierre (?>). Con el método php echo podemos imprimir el valor de la variable "título" dentro de nuestra página y obtener este resultado.
¡Perfecto! Ahora que hemos logrado imprimir una variable en nuestra hoja html con php echo vamos a introducir una pequeña abreviatura que te ahorrará mucho tiempo: de hecho, podemos reemplazar:
<?php echo $title; ?>
con
<?=$title?>
¡Un pequeño cambio que acelerará significativamente nuestro flujo de trabajo!
Ahora intentemos hacer algo un poco más difícil y creemos una serie de información de 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>
Hemos creado el array users y través del php foreach lo ciclamos e imprimimos los elementos de array users.
Aquí está el resultado que podemos ver en el navegador. Pero, ¿y si nuestro array está vacío? Obviamente, no se imprimirían nombres y nuestra página quedaría en blanco. Es bueno, en estos casos, dejar siempre un mensaje al usuario que le aclare que todavía no hay usuarios y, por tanto, no dejarle delante de una página vacía.
Para hacer esto, usaremos un if statement que mostrará un mensaje si la lista está vacía.
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>No hay usuarios</p>
<?php endif; ?>
</body>
</html>
Así es como se verá nuestra página si no hay usuarios (non ci sono utenti):
Ahora intentemos hacer un ejemplo más complejo mostrando una lista de productos con tarjetas y un estilo:
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;
}
Creamos una página más compleja con un archivo css para modificar el estilo básico de las tarjetas y con un foreach ciclamos el array de productos.
Para cada producto, luego creamos una clase específica que se refería a la identificación del producto y aplicamos un color de fondo diferente.
Finalmente, en la sección de precios, hemos insertado la función number_format que permite elegir el formato para mostrar los números. En este caso, hemos optado por que siempre haya dos números después de la coma, para separar los miles con punto y los decimales con coma.
Como podemos ver, nuestro archivo de índice se está volviendo más grande y más complejo, por lo que ahora necesitamos una forma de ordenar nuestro código.
Php Include
Con el método php include podemos incluir un archivo dentro de otro y así separar los distintos componentes.
Hagamos una prueba con nuestro archivo index y separemos la card del producto del resto.
Por lo tanto, creamos una carpeta de components en la que podemos insertar nuestros archivos específicos para cada 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>
De esta forma cada componente que vamos a crear puede ser reutilizado en otras páginas php, un ejemplo podría ser la cabecera de nuestra hoja html.
Hasta la fecha, todo el proceso que acabamos de describir se ve facilitado en gran medida por los automatismos de algunos frameworks del lenguaje php: un ejemplo es el motor de plantillas php "Blade" para el framework Laravel y "Twig" para el framework Symfony.
¡Nuestro recorrido por el laberinto del lenguaje de programación PHP termina aquí! Llegados a este punto, conocerás ya los conceptos básicos, incluso en detalle, de este lenguaje. Si realmente quieres tomarte en serio estos frameworks modernos, ¡inscríbete en nuestro curso Hackademy! ¿Qué dices, te sientes listo para convertirte en desarrollador web?
Anterior
23 Rasgos en PHPSiguiente
25