Creación de un desplegable dinámico con datos de una tabla de base de datos usando PHP y HTML

En el desarrollo web, la creación de desplegables (selects) es una tarea común. Sin embargo, a menudo queremos poblar estos desplegables con datos dinámicos provenientes de una base de datos. En este tutorial, exploraremos cómo crear un desplegable de colores utilizando PHP y HTML, extrayendo los datos directamente de una tabla en la base de datos.

Para realizar esta prueba, asegúrate de tener una tabla en tu base de datos que contenga los datos que deseas mostrar en el desplegable. Por ejemplo, podríamos tener una tabla llamada colores con una columna nombre_color. Busca una en tu BBDD para que puedas adaptar las select.

Como en todo ejercicios donde vamos a conectar con PHP, necesitas crear la conexión a la base de datos, nos saltamos esta aparte del código.

Una vez que estés conectado a la base de datos, puedes ejecutar una consulta SQL para seleccionar los datos que deseas mostrar en el desplegable. Por ejemplo:

$query = "SELECT id_color, nombre_color FROM colores";
$result = mysqli_query($conexion, $query);

Ahora, vamos a utilizar los datos obtenidos de la tabla para construir el desplegable en HTML. Usaremos un bucle while para recorrer los resultados de la consulta y generar las opciones del desplegable.

<select name="color">
    <?php
    while($row = mysqli_fetch_assoc($result)) {
        echo "<option value='" . $row['id_color'] . "'>" . $row['nombre_color'] . "</option>";
    }
    ?>
</select>

Una vez que hayas terminado de utilizar la conexión a la base de datos, asegúrate de cerrarla adecuadamente para liberar recursos.

Crear desplegables dinámicos en HTML utilizando datos de una base de datos es una habilidad útil en el desarrollo web. Con PHP, podemos extraer datos de la base de datos y utilizarlos para poblar nuestros elementos HTML, como en el caso de nuestro desplegable de colores. Espero que este tutorial te haya proporcionado una comprensión básica de cómo lograr esto en tu propio proyecto.

Ampliación: seleccionar un color del desplegable

Imagina que estamos modificando la información personal sobre un usuario, y uno de los campos que tenemos en nuestra base de datos es su color favorito. Cuando entramos a modificar el usuario en cuestión, lo ideal es que en el desplegable de «color favorito» salga seleccionado el color que actualmente es su color favorito, el cual, está almacenado en nuestra base de datos.

Los pasos que tendríamos que hacer en nuestro código serían los siguientes:

Vamos a suponer que el id de usuario es el 1, lógicamente la select debes adaptarla a tu base de datos:

$usuario_id = 1;
$query_color_favorito = "SELECT * FROM usuarios WHERE id = $usuario_id";
$resultado_color_favorito = mysqli_query($conexion, $query_color_favorito);
$fila_color_favorito = mysqli_fetch_assoc($resultado_color_favorito);
$color_favorito = $fila_color_favorito['color_favorito'];

Ahora que hemos obtenido el color favorito ACTUAL del usuario, necesitamos modificar nuestro código HTML para que seleccione automáticamente esta opción. Para lograr esto, simplemente agregamos el atributo selected a la opción que coincida con el color favorito del usuario.

<?php
$query = "SELECT id_color, nombre_color FROM colores";
$result = mysqli_query($conexion, $query);
?>
<select name="color">
    <?php
    while($row = mysqli_fetch_assoc($result)) {
        $selected = ($row['id_color'] == $color_favorito) ? 'selected' : '';
        echo "<option value='" . $row['id_color'] . "' $selected>" . $row['nombre_color'] . "</option>";
    }
    ?>
</select>

El código anterior se puede realizar también con un if-else:

<select name="color">
    <?php
    while($row = mysqli_fetch_assoc($result)) {
        if ($row['id_color'] == $color_favorito) {
            $selected = 'selected';
        } else {
            $selected = '';
        }
        echo "<option value='" . $row['id_color'] . "' $selected>" . $row['nombre_color'] . "</option>";
    }
    ?>
</select>

Al implementar estos pasos adicionales, ahora hemos mejorado la experiencia del usuario al seleccionar automáticamente su color favorito cuando modifica sus preferencias. Esto muestra cómo podemos personalizar dinámicamente los elementos de nuestra página web utilizando datos almacenados en una base de datos.