Skip to content

Unidad 2.2: Generación de HTML dinámico con PHP

1. Introducción: HTML generado desde el servidor

Generar HTML dinámicamente significa crear contenido web a través de código en PHP, lo que permite mostrar información que puede cambiar en cada solicitud de página, como la que proviene de una base de datos o de un formulario.

Para generar HTML con PHP, usamos las funciones echo o print para enviar código HTML al navegador. Esto nos permite separar la lógica de la presentación, manteniendo el código más organizado y flexible.

En PHP, tanto echo como print son constructores utilizados para mostrar datos en la salida. Al tratarse de construcciones del lenguaje no requiere el uso obligatorio de paréntesis como en el caso de las funciones y aunque son muy similares, existen algunas pequeñas diferencias entre ambos:

echo

Con echo podemos usar uno o varios argumentos, lo que nos permite trabajar con diferentes cadenas como si fueran parámetros separados. En este caso si se quiere pasar más de un parámetro, éstos no deben estar entre paréntesis.

1
2
3
4
5
$argumento1 = "Hola";
$argumento2 = "mundo";
echo $argumento1; // Un argumento
echo $argumento1, $argumento2; // Varios argumentos
echo "Puedo también {$argumento1}, {$argumento2} de esta manera."; // Uso de llaves

Además de no ser una función y a diferencia de otros constructores, tampoco se comporta como una, es decir no siempre se puede usar en el contexto de una función.

Es importante tener en cuenta que echo no devuelve ningún valor y por tanto no se puede asignar el resultado a una variable.

1
2
3
4
5
// Este es un ejemplo abreviado:
<?php
$nombre = "Ana";
?>
 <p>Nombre: <?= $nombre ?></p> // Esto es lo mismo que hacer <?php echo $nombre;

print

A diferencia de echo, al usar print solo podemos trabajar con un argumento y por tanto obtendremos un error si tratamos de añadir más.

1
2
$argumento1 = "Hola mundo";
print $argumento1;

Por otro lado print devuelve siempre el valor 1, lo que permite asignarlo a una variable si es necesario. No es habitual pero a veces puede interesar almacenarlo, por ejemplo si queremos verificar que se ha realizado el print correctamente o para llevar un conteo.

1
2
$contabilizar = print "Hola mundo!";
echo $contabilizar; // Mostrará el valor 1

Aclarada ya la diferencia entre echo y print en PHP, en términos prácticos, la elección entre uno y otro suele ser una cuestión de preferencia personal y estilo. Lo cierto es que echo se utiliza con mayor frecuencia en la mayoría de los casos, ya que es más común y más rápido. Sin embargo, print puede ser útil cuando se necesita capturar su valor de retorno o se desea utilizar una sintaxis más similar a las funciones tradicionales de otros lenguajes de programación.

1.1 ¿Por qué generar HTML dinámicamente?

  • Mostrar contenido personalizado (por ejemplo, el nombre de un usuario)
  • Generar tablas o listas con datos de una base de datos
  • Crear formularios pre-rellenos
  • Mostrar mensajes de error o éxito

Perfecto, vamos a desarrollar el siguiente punto "Elementos HTML básicos desde PHP". En este caso, explicaremos cómo generar otros elementos HTML básicos como listas, tablas y cómo trabajar con ellos dinámicamente utilizando PHP.

2.2 Elementos HTML básicos desde PHP

En PHP, podemos generar elementos HTML de manera dinámica utilizando las funciones echo o print. A continuación, se detallan algunos de los elementos HTML más básicos que se pueden generar con PHP.

Generación de Listas con PHP

Elementos HTML básicos desde PHP

Para generar elementos HTML básicos como listas, tablas o formularios, utilizamos las funciones echo o print para enviar código HTML al navegador. A continución, se muestran algunos ejemplos de cómo generar listas y tablas con PHP.

Generación de contenido HTML con PHP
1
2
3
4
5
6
7
8
9
<?php
echo "<h1>Lista de frutas</h1>";
echo "<p>Estas son algunas frutas:</p>";
echo "<div class='list'>";
echo "<p>Manzana</p>";
echo "<p>Plátano</p>";
echo "<p>Cereza</p>";
echo "</div>";
?>

Otra manera de generar el contenido es asginar el contenido a una variable y luego imprimirlo:

Generación de contenido HTML con PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?php
$contenido = "<h1>Lista de frutas</h1>";
$contenido .= "<p>Estas son algunas frutas:</p>";
$contenido .= "<div class='list'>";
$contenido .= "<p>Manzana</p>";
$contenido .= "<p>Plátano</p>";
$contenido .= "<p>Cereza</p>";
$contenido .= "</div>";
echo $contenido;
?>

Listas no ordenadas (<ul>)

Las listas no ordenadas se crean utilizando la etiqueta <ul> y los elementos de la lista con <li>. Podemos generar una lista de elementos desde un array utilizando un bucle foreach:

Generación de listas no ordenadas con PHP
1
2
3
4
5
6
7
8
<?php
$frutas = ["Manzana", "Plátano", "Cereza"];
echo "<ul>"; // Abrimos la lista
foreach ($frutas as $fruta) {
    echo "<li>" . $fruta . "</li>"; // Generamos cada elemento de la lista
}
echo "</ul>"; // Cerramos la lista
?>

Este código generará una lista con los elementos del array $frutas:

  • Manzana
  • Plátano
  • Cereza

Listas ordenadas (<ol>)

Una lista ordenada es similar a la no ordenada, pero en lugar de usar <ul>, usamos <ol> para crear una lista numerada:

Generación de listas ordenadas con PHP
1
2
3
4
5
6
7
8
<?php
$frutas = ["Manzana", "Plátano", "Cereza"];
echo "<ol>"; // Abrimos la lista ordenada
foreach ($frutas as $fruta) {
    echo "<li>" . $fruta . "</li>"; // Generamos cada elemento de la lista
}
echo "</ol>"; // Cerramos la lista
?>

Esto generará una lista numerada:

  1. Manzana
  2. Plátano
  3. Cereza

2. Generación de Tablas con PHP

Las tablas HTML se crean con la etiqueta <table>. Para crear una tabla dinámica en PHP, podemos utilizar un array bidimensional y recorrerlo con un bucle foreach. A continuación, un ejemplo de cómo generar una tabla básica:

Generación de tablas con PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
// Array de productos
$productos = [
    ["Producto 1", 15, "Disponible"],
    ["Producto 2", 10, "Agotado"],
    ["Producto 3", 7, "Disponible"]
];

// Iniciar tabla
echo "<table border='1'>";

// Cabecera de la tabla
echo "<tr><th>Nombre</th><th>Precio</th><th>Estado</th></tr>";

// Filas de la tabla
foreach ($productos as $producto) {
    echo "<tr>";
    foreach ($producto as $campo) {
        echo "<td>" . $campo . "</td>"; // Generamos cada celda
    }
    echo "</tr>"; // Cierra cada fila
}

echo "</table>"; // Cierra la tabla
?>

Este código generará una tabla con 3 productos:

Nombre Precio Estado
Producto 1 15 Disponible
Producto 2 10 Agotado
Producto 3 7 Disponible

3. Otra manera de generar HTML

¿Qué estructuras permiten usar : y palabras clave de cierre?

En PHP, podemos usar una sintaxis alternativa para las estructuras de control como if, while, for, foreach y switch. Esta sintaxis es especialmente útil cuando estamos mezclando PHP con HTML, ya que mejora la legibilidad del código.

La sintaxis alternativa para if es especialmente útil cuando se mezcla PHP con HTML, ya que mejora la legibilidad del código.

if / elseif / else

1
2
3
4
5
6
7
    <?php
    $edad = 20;
    if ($edad >= 18): ?>
        <p>Es mayor de edad</p>
    <?php else: ?>
        <p>Es menor de edad</p>
    <?php endif; ?>

La sintaxis alternativa para while es especialmente útil cuando se mezcla PHP con HTML, ya que mejora la legibilidad del código.

while / endwhile

1
2
3
4
5
6
<?php
$i = 0;
while ($i < 3): ?>
    <p>Iteración <?= $i ?></p>
    <?php $i++; ?>
<?php endwhile; ?>

La sintaxis alternativa para for es especialmente útil cuando se mezcla PHP con HTML, ya que mejora la legibilidad del código.

for / endfor

1
2
3
4
<?php
for ($i = 1; $i <= 3; $i++): ?>
    <p>Número: <?= $i ?></p>
<?php endfor; ?>

La sintaxis alternativa para foreach es especialmente útil cuando se mezcla PHP con HTML, ya que mejora la legibilidad del código.

foreach / endforeach

1
2
3
4
5
<?php
$colores = ['Rojo', 'Verde', 'Azul'];
foreach ($colores as $color): ?>
    <p>Color: <?= $color ?></p>
<?php endforeach; ?>

La sintaxis alternativa para switch es especialmente útil cuando se mezcla PHP con HTML, ya que mejora la legibilidad del código.

switch / endswitch

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<?php
$dia = 'lunes';
switch ($dia): 
    case 'lunes': ?>
        <p>Inicio de semana</p>
        <?php break;
    case 'viernes': ?>
        <p>¡Por fin viernes!</p>
        <?php break;
    default: ?>
        <p>Día común</p>
<?php endswitch; ?>

Notas adicionales:

  • Esta sintaxis se usa sobre todo cuando estás mezclando PHP con HTML, porque mejora la legibilidad.
  • No se recomienda usar en scripts PHP "puros" sin HTML, donde las llaves {} son más limpias.

4. Generación de Formularios con PHP

Los formularios HTML permiten que los usuarios ingresen datos que luego se envían al servidor para su procesamiento. Para generar un formulario dinámicamente con PHP, utilizamos las etiquetas <form>, <input>, y otros elementos.

Formulario básico con POST

Formulario básico con PHP
1
2
3
4
5
6
7
<?php
echo "<form action='procesar.php' method='POST'>";
echo "<label for='nombre'>Nombre:</label><input type='text' id='nombre' name='nombre'><br>";
echo "<label for='edad'>Edad:</label><input type='number' id='edad' name='edad'><br>";
echo "<input type='submit' value='Enviar'>";
echo "</form>";
?>

Este formulario tiene dos campos: nombre y edad, y se enviará a un archivo PHP llamado procesar.php usando el método POST.

Formulario con un select (menú desplegable)

Formulario con select en PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<?php 
$paises = ["España", "Francia", "Italia"];
echo "<form action='procesar.php' method='POST'>";
echo "<label for='pais'>País:</label><select name='pais'>";
foreach ($paises as $pais) {
    echo "<option value='$pais'>$pais</option>"; // Creamos las opciones del select
}
echo "</select><br>";
echo "<input type='submit' value='Enviar'>";
echo "</form>";
?>

Este código generará un selector de país con opciones dinámicas a partir del array $paises.

5. Ejercicios propuestos

Ejercicio 1: Lista desordenada de frutas

Crea un script PHP que genere una lista de frutas en HTML usando un array. Muestra la lista en un ul.

Solución
Generación de lista desordenada con PHP
1
2
3
4
5
6
7
8
<?php
$frutas = ["Manzana", "Plátano", "Cereza"];
echo "<ul>";
foreach ($frutas as $fruta) {
    echo "<li>" . $fruta . "</li>";
}
echo "</ul>";
?>

Ejercicio 2: Tabla de empleados

Crea una tabla HTML dinámica con PHP donde se muestren 3 productos, con nombre, precio y estado. Los datos pueden estar en un array.

Solución
Generación de tabla con PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$titulos = ["Nombre", "Apellido1", "Apellido2", "ID", "Departamento"];
$empleados = [
    ["Ana", "Martínez", "Martínez", "101", "Recursos Humanos"],
    ["Juan", "García", "García", "102", "Ventas"],
    ["María", "López", "López", "103", "Marketing"] 
];
echo "<table border='1'>";
echo "<tr>";
foreach ($titulos as $titulo) {
    echo "<th>" . $titulo . "</th>";
}
echo "</tr>";
foreach ($productos as $producto) {
    echo "<tr>";
    foreach ($producto as $campo) {
        echo "<td>" . $campo . "</td>";
    }
    echo "</tr>";
}
echo "</table>";
?>

Ejercicio 3: Generar una tabla de multiplicar a partir de un número

Enunciado: Crea un script PHP que genere la tabla de multiplicar de un número ingresado por el usuario. Usa un formulario HTML para que el usuario ingrese el número, y luego muestra la tabla de multiplicar de ese número en una tabla HTML.

Solución
Generación de tabla de multiplicar con PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<?php 
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $numero = $_POST['numero'];
    echo "<h2>Tabla de multiplicar de $numero</h2>";
    echo "<table border='1'>";
    for ($i = 1; $i <= 10; $i++) {
        echo "<tr><td>$numero x $i</td><td>" . ($numero * $i) . "</td></tr>";
    }
    echo "</table>";
} else {
    echo "<form method='POST'>";
    echo "<label for='numero'>Ingresa un número:</label><input type='number' id='numero' name='numero' required><br>";
    echo "<input type='submit' value='Generar tabla'>";
    echo "</form>";
}
?>

Ejercicio 4: Generar un array de números aleatorios

Enunciado: Crea una función en PHP que genere un array con x números aleatorios (donde x es el número de elementos que el usuario quiere generar). Luego, genera una lista HTML con esos números.

Solución
Generación de números aleatorios con PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
function generarAleatorios($cantidad) {
    $numeros = [];
    for ($i = 0; $i < $cantidad; $i++) {
        $numeros[] = rand(1, 100); // Números aleatorios entre 1 y 100
    }
    return $numeros;
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $cantidad = $_POST['cantidad'];
    $numeros = generarAleatorios($cantidad);
    echo "<ul>";
    foreach ($numeros as $numero) {
        echo "<li>$numero</li>";
    }
    echo "</ul>";
} else {
    echo "<form method='POST'>";
    echo "<label for='cantidad'>¿Cuántos números aleatorios generar?</label><input type='number' id='cantidad' name='cantidad' required><br>";
    echo "<input type='submit' value='Generar números'>";
    echo "</form>";
}
?>

Ejercicio 5: Generar un formulario de usuario y contraseña

Enunciado: Crea un formulario HTML para que el usuario ingrese su nombre de usuario y contraseña. No es necesario realizar validaciones adicionales a las de HTML5.

Solución
Formulario de usuario y contraseña con PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $usuario = $_POST['usuario'];
    $contrasena = $_POST['contrasena'];
    echo "<h2>Bienvenido, $usuario!</h2>";
} else {
    echo "<form method='POST'>";
    echo "<label for='usuario'>Usuario:</label><input type='text' id='usuario' name='usuario' required><br>";
    echo "<label for='contrasena'>Contraseña:</label><input type='password' id='contrasena' name='contrasena' required><br>";
    echo "<input type='submit' value='Ingresar'>";
    echo "</form>";
}
?>

Ejercicio 6: Generar un formulario para cambio de contraseña

Enunciado: Crea un formulario para que el usuario pueda cambiar su contraseña. El formulario debe pedir la contraseña actual y la nueva contraseña, pero sin validaciones adicionales que no sean las de HTML5 (como la longitud mínima de la contraseña).

Solución
Formulario de cambio de contraseña con PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $actual = $_POST['actual'];
    $nueva = $_POST['nueva'];
    echo "<h2>Contraseña cambiada con éxito</h2>";
} else {
    echo "<form method='POST'>";
    echo "<label for='actual'>Contraseña actual:</label><input type='password' id='actual' name='actual' required><br>";
    echo "<label for='nueva'>Nueva contraseña:</label><input type='password' id='nueva' name='nueva' required minlength='6'><br>";
    echo "<input type='submit' value='Cambiar contraseña'>";
    echo "</form>";
}
?>

Ejercicio 7: Crear una lista de productos con precio y descripción

Enunciado: Crea un array de productos donde cada producto tiene un nombre, un precio y una descripción. Luego, genera una lista HTML de los productos, mostrando su nombre, precio y una breve descripción.

Solución
Generación de lista de productos con PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?php 
$productos = [
    ["Producto 1", 15, "Este es el producto 1, muy popular."],
    ["Producto 2", 10, "Producto 2, ideal para uso diario."],
    ["Producto 3", 20, "Producto 3, calidad superior."]
];

echo "<ul>";
foreach ($productos as $producto) {
    echo "<li><strong>" . $producto[0] . "</strong> - $" . $producto[1] . "<br>" . $producto[2] . "</li>";
}
echo "</ul>";
?>

Ejercicio 8: Generar una lista de categorías con checkboxes

Enunciado: Crea un formulario en PHP que permita al usuario seleccionar varias categorías de un array de opciones. Cada categoría se generará con un checkbox.

Solución
Formulario de selección de categorías con PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<?php
$categorias = ["Tecnología", "Salud", "Deportes", "Cultura"];

echo "<form method='POST'>";
foreach ($categorias as $categoria) {
    echo "<input type='checkbox' name='categorias[]' value='$categoria'>$categoria<br>";
}
echo "<input type='submit' value='Seleccionar categorías'>";
echo "</form>";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $seleccionadas = $_POST['categorias'];
    echo "<h3>Categorías seleccionadas:</h3><ul>";
    foreach ($seleccionadas as $categoria) {
        echo "<li>$categoria</li>";
    }
    echo "</ul>";
}
?>

Ejercicio 9: Mostrar un calendario simple de un mes

Enunciado: Crea un calendario simple de un mes, donde se muestren los días de la semana y el número del día. Usa PHP para calcular qué día de la semana comienza el mes y muestra un calendario de ese mes.

Solución
Generación de calendario simple con PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
$mes = date('m'); // Mes actual
$año = date('Y'); // Año actual
$primer_dia = strtotime("$año-$mes-01"); // Primer día del mes
$ultimo_dia = strtotime("$año-$mes-" . date('t', $primer_dia)); // Último día del mes

echo "<table border='1'>";
echo "<tr><th>Lunes</th><th>Martes</th><th>Miércoles</th><th>Jueves</th><th>Viernes</th><th>Sábado</th><th>Domingo</th></tr>";

$dia = 1;
for ($i = 0; $i < 5; $i++) {
    echo "<tr>";
    for ($j = 0; $j < 7; $j++) {
        if ($i == 0 && $j < date('N', $primer_dia) - 1) {
            echo "<td></td>";
        } else if ($dia <= date('t', $primer_dia)) {
            echo "<td>$dia</td>";
            $dia++;
        }
    }
    echo "</tr>";
}

echo "</table>";
?>