3C - Objetos y controles en el Servidor para generar el aspecto visual del cliente

Para ilustrar cómo usar objetos y controles en el servidor para generar el aspecto visual de una aplicación web en el cliente, aquí tienes algunos ejemplos de cómo puedes hacerlo en PHP.

Tenemos varias opciones:

• Lista de opciones Dropdown
• Tabla de objetos
• Formularios dinámicos

Ejemplo 1: Generar un Formulario Dinámico con Objetos en PHP

En este ejemplo, vamos a crear una clase Formulario en PHP que genera un formulario HTML con campos de entrada y un botón de envío. La lógica del servidor se encarga de definir la estructura del formulario y luego renderizarlo en el cliente.

<?php
class Formulario {
    private $campos = [];

    // Método para agregar campos al formulario
    public function agregarCampo($nombre, $tipo = "text", $label = "") {
        $this->campos[] = [
            'nombre' => $nombre,
            'tipo' => $tipo,
            'label' => $label
        ];
    }

    // Método para renderizar el formulario como HTML
    public function renderizar() {
        echo "<form method='post'>";

        foreach ($this->campos as $campo) {
            echo "<label>{$campo['label']}</label>";
            echo "<input type='{$campo['tipo']}' name='{$campo['nombre']}'><br><br>";
        }

        echo "<button type='submit'>Enviar</button>";
        echo "</form>";
    }
}

// Crear una instancia de la clase Formulario
$formulario = new Formulario();
$formulario->agregarCampo("nombre", "text", "Nombre:");
$formulario->agregarCampo("email", "email", "Email:");
$formulario->agregarCampo("edad", "number", "Edad:");

// Renderizar el formulario en el cliente
$formulario->renderizar();
?>

Código:

1. Clase Formulario: Define una estructura básica de un formulario y tiene un método agregarCampo para agregar campos al formulario.
2. Renderización: El método renderizar genera el HTML del formulario, que luego se muestra en el navegador del cliente.
3. Salida en el cliente: Al ejecutar este código, se muestra un formulario HTML en el navegador con campos de entrada y un botón de envío.

Ejemplo 2: Generación de una Tabla Dinámica con Objetos

Este ejemplo crea una clase Tabla que toma datos en un array y genera una tabla HTML. Esto es útil cuando se quiere mostrar datos en formato tabular en el cliente.

<?php
class Tabla {
    private $datos;

    // Constructor para inicializar los datos de la tabla
    public function __construct($datos) {
        $this->datos = $datos;
    }

    // Método para renderizar la tabla
    public function renderizar() {
        echo "<table border='1'>";

        // Encabezado de la tabla
        echo "<tr>";
        foreach (array_keys($this->datos[0]) as $header) {
            echo "<th>$header</th>";
        }
        echo "</tr>";

        // Filas de datos
        foreach ($this->datos as $fila) {
            echo "<tr>";
            foreach ($fila as $dato) {
                echo "<td>$dato</td>";
            }
            echo "</tr>";
        }

        echo "</table>";
    }
}

// Datos para la tabla
$datos = [
    ['Nombre' => 'Juan', 'Edad' => 25, 'Ciudad' => 'Madrid'],
    ['Nombre' => 'María', 'Edad' => 30, 'Ciudad' => 'Barcelona'],
    ['Nombre' => 'Pedro', 'Edad' => 22, 'Ciudad' => 'Valencia']
];

// Crear una instancia de la clase Tabla y renderizarla
$tabla = new Tabla($datos);
$tabla->renderizar();
?>

Código:

1. Clase Tabla: Tiene un constructor que recibe los datos de la tabla y los almacena en la propiedad $datos.
2. Renderización: El método renderizar genera el HTML para crear la tabla y mostrarla en el cliente.
3. Salida en el cliente: Se muestra una tabla HTML con los datos proporcionados.

Ejemplo 3: Generar una Lista de Opciones (Dropdown) Dinámicamente

En este ejemplo, vamos a crear una clase Select que genera una lista desplegable (dropdown) en HTML.

<?php
class Select {
    private $opciones;

    // Constructor para inicializar las opciones
    public function __construct($opciones) {
        $this->opciones = $opciones;
    }

    // Método para renderizar el select
    public function renderizar($nombre) {
        echo "<label for='$nombre'>Seleccione una opción:</label>";
        echo "<select name='$nombre' id='$nombre'>";

        foreach ($this->opciones as $valor => $etiqueta) {
            echo "<option value='$valor'>$etiqueta</option>";
        }

        echo "</select>";
    }
}

// Opciones para el select
$opciones = [
    'es' => 'Español',
    'en' => 'Inglés',
    'fr' => 'Francés'
];

// Crear una instancia de la clase Select y renderizarla
$select = new Select($opciones);
$select->renderizar("idioma");
?>

Código

1. Clase Select: Recibe un array de opciones y tiene un método renderizar para crear la lista desplegable en HTML.
2. Renderización: Se genera el código HTML del select, que se muestra en el cliente como una lista desplegable.
3. Salida en el cliente: Un select HTML que permite al usuario elegir un idioma.

Ventajas de Usar Objetos en el Servidor para el Aspecto Visual en el Cliente

• Modularidad: Cada clase representa un componente (formulario, tabla, lista desplegable) que se puede reutilizar y mantener por separado.
• Reutilización: Es posible reutilizar estas clases para generar elementos visuales en diferentes partes de la aplicación.
• Escalabilidad: Los componentes se pueden extender o modificar sin afectar el resto de la aplicación.
• Organización del Código: La estructura del código es más organizada, permitiendo manejar la generación de elementos visuales de manera clara y centralizada.

Estos ejemplos ilustran cómo PHP permite generar elementos de la interfaz de usuario de manera dinámica utilizando clases y objetos en el servidor, generando el HTML necesario para que el cliente lo visualice. Esto es muy útil para aplicaciones web que requieren interfaces flexibles y personalizables.

Actividad

Actividad

Modifica los archivos anteriores para que tenga relación con tu proyecto de la UD2, añade más campos