En esta sección, aprenderemos a crear la interfaz de usuario (UI) de nuestra aplicación web utilizando PHP. La UI es una parte crucial de cualquier aplicación, ya que es la forma en que los usuarios interactúan con el sistema. Nos enfocaremos en la creación de formularios, la presentación de datos y la integración de HTML y CSS con PHP.

Objetivos de Aprendizaje

  • Comprender cómo integrar HTML y CSS con PHP.
  • Crear formularios interactivos utilizando PHP.
  • Presentar datos dinámicamente en la interfaz de usuario.
  • Aplicar buenas prácticas en la creación de la UI.

  1. Integración de HTML y CSS con PHP

Conceptos Clave

  • HTML: Lenguaje de marcado utilizado para estructurar el contenido de la web.
  • CSS: Lenguaje de estilos utilizado para diseñar y dar formato a las páginas web.
  • PHP: Lenguaje de programación del lado del servidor que se puede incrustar en HTML para generar contenido dinámico.

Ejemplo Práctico

Vamos a crear una página básica que muestra un saludo personalizado utilizando PHP.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Saludo Personalizado</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            padding: 50px;
        }
        .greeting {
            color: #333;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <?php
        $nombre = "Estudiante";
        echo "<div class='greeting'>¡Hola, $nombre!</div>";
    ?>
</body>
</html>

Explicación del Código

  • HTML: Estructura básica de la página con una etiqueta <head> para los metadatos y <body> para el contenido.
  • CSS: Estilos básicos para el cuerpo de la página y la clase .greeting.
  • PHP: Código PHP incrustado en HTML para generar un saludo personalizado.

  1. Creación de Formularios Interactivos

Conceptos Clave

  • Formularios HTML: Utilizados para recopilar datos del usuario.
  • Métodos de Envío: GET y POST para enviar datos al servidor.
  • Validación de Formularios: Asegurar que los datos ingresados sean correctos y seguros.

Ejemplo Práctico

Vamos a crear un formulario que permita al usuario ingresar su nombre y mostrar un saludo personalizado.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Saludo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            padding: 50px;
        }
        .form-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .greeting {
            color: #333;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <form method="POST" action="">
            <label for="nombre">Ingresa tu nombre:</label>
            <input type="text" id="nombre" name="nombre" required>
            <button type="submit">Enviar</button>
        </form>
    </div>
    <?php
        if ($_SERVER["REQUEST_METHOD"] == "POST") {
            $nombre = htmlspecialchars($_POST["nombre"]);
            echo "<div class='greeting'>¡Hola, $nombre!</div>";
        }
    ?>
</body>
</html>

Explicación del Código

  • Formulario HTML: Utiliza el método POST para enviar datos al servidor.
  • PHP: Procesa el formulario y muestra un saludo personalizado. La función htmlspecialchars se utiliza para evitar ataques XSS.

  1. Presentación de Datos Dinámicos

Conceptos Clave

  • Datos Dinámicos: Información que cambia en función de la interacción del usuario o de la base de datos.
  • PHP y MySQL: Integración para recuperar y mostrar datos de una base de datos.

Ejemplo Práctico

Vamos a crear una página que muestra una lista de usuarios almacenados en una base de datos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Usuarios</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            padding: 50px;
        }
        table {
            width: 50%;
            margin: 0 auto;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h1>Lista de Usuarios</h1>
    <table>
        <tr>
            <th>ID</th>
            <th>Nombre</th>
        </tr>
        <?php
            $servername = "localhost";
            $username = "root";
            $password = "";
            $dbname = "mi_base_de_datos";

            // Crear conexión
            $conn = new mysqli($servername, $username, $password, $dbname);

            // Verificar conexión
            if ($conn->connect_error) {
                die("Conexión fallida: " . $conn->connect_error);
            }

            $sql = "SELECT id, nombre FROM usuarios";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                // Salida de datos de cada fila
                while($row = $result->fetch_assoc()) {
                    echo "<tr><td>" . $row["id"]. "</td><td>" . $row["nombre"]. "</td></tr>";
                }
            } else {
                echo "<tr><td colspan='2'>No hay usuarios</td></tr>";
            }
            $conn->close();
        ?>
    </table>
</body>
</html>

Explicación del Código

  • Conexión a la Base de Datos: Utiliza mysqli para conectarse a una base de datos MySQL.
  • Consulta SQL: Recupera los datos de la tabla usuarios.
  • Presentación de Datos: Muestra los datos en una tabla HTML.

Ejercicio Práctico

Ejercicio

Crea una página que permita a los usuarios ingresar su nombre y edad en un formulario. Luego, muestra una lista de todos los usuarios ingresados con su nombre y edad.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Usuarios</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            padding: 50px;
        }
        .form-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        table {
            width: 50%;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <form method="POST" action="">
            <label for="nombre">Nombre:</label>
            <input type="text" id="nombre" name="nombre" required>
            <br>
            <label for="edad">Edad:</label>
            <input type="number" id="edad" name="edad" required>
            <br>
            <button type="submit">Enviar</button>
        </form>
    </div>
    <?php
        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "mi_base_de_datos";

        // Crear conexión
        $conn = new mysqli($servername, $username, $password, $dbname);

        // Verificar conexión
        if ($conn->connect_error) {
            die("Conexión fallida: " . $conn->connect_error);
        }

        if ($_SERVER["REQUEST_METHOD"] == "POST") {
            $nombre = htmlspecialchars($_POST["nombre"]);
            $edad = htmlspecialchars($_POST["edad"]);

            $sql = "INSERT INTO usuarios (nombre, edad) VALUES ('$nombre', '$edad')";
            if ($conn->query($sql) === TRUE) {
                echo "<p>Nuevo usuario agregado exitosamente</p>";
            } else {
                echo "Error: " . $sql . "<br>" . $conn->error;
            }
        }

        $sql = "SELECT nombre, edad FROM usuarios";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            echo "<table><tr><th>Nombre</th><th>Edad</th></tr>";
            while($row = $result->fetch_assoc()) {
                echo "<tr><td>" . $row["nombre"]. "</td><td>" . $row["edad"]. "</td></tr>";
            }
            echo "</table>";
        } else {
            echo "<p>No hay usuarios</p>";
        }

        $conn->close();
    ?>
</body>
</html>

Explicación del Código

  • Formulario HTML: Permite a los usuarios ingresar su nombre y edad.
  • PHP: Procesa el formulario, inserta los datos en la base de datos y muestra la lista de usuarios.

Conclusión

En esta sección, hemos aprendido a crear la interfaz de usuario de una aplicación web utilizando PHP. Hemos cubierto la integración de HTML y CSS con PHP, la creación de formularios interactivos y la presentación de datos dinámicos. Estos conceptos son fundamentales para desarrollar aplicaciones web interactivas y atractivas.

En la siguiente sección, nos enfocaremos en la implementación de la lógica del backend, donde aprenderemos a manejar la lógica de negocio y la interacción con la base de datos de manera más detallada.

Curso de Programación en PHP

Módulo 1: Introducción a PHP

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Arrays

Módulo 5: Trabajando con Formularios

Módulo 6: Trabajando con Archivos

Módulo 7: Programación Orientada a Objetos (POO)

Módulo 8: Trabajando con Bases de Datos

Módulo 9: Técnicas Avanzadas de PHP

Módulo 10: Frameworks de PHP y Mejores Prácticas

Módulo 11: Proyecto: Construyendo una Aplicación Web

© Copyright 2024. Todos los derechos reservados