Creación de Vistas y Plantillas con Bootstrap y PHP

Clase 9 de 14 • Curso de Introducción a Frameworks de PHP

Clase anteriorSiguiente clase

Resumen

¿Cómo se estructura el ciclo de respuesta en un framework?

Cuando trabajamos con frameworks en el desarrollo web, la estructura y el ciclo de respuesta son aspectos clave que facilitan el flujo de información desde el momento en que una solicitud llega al sistema hasta que se envía una respuesta. En este caso, comenzamos creando la estructura básica donde todo inicia en el archivo index, desde donde se procesa la solicitud, se llama al controlador correspondiente y se retorna una respuesta, en este caso, una vista.

¿Cómo se configuran las vistas y plantillas en este contexto?

Inicialmente, dentro de la carpeta de vistas, es fundamental crear un archivo que manejará la vista inicial, en este caso, home.php. Aquí encontrarás contenido básico que simplemente represente la sección "home" de tu sitio. A continuación, configuramos un archivo de plantilla, que aquí se llama layout. Esta plantilla tiene la misión de contener el diseño general en HTML de nuestro sitio web.

Integración de Bootstrap

Para enriquecer el diseño visual del sitio, se integra Bootstrap, un conocido framework CSS que facilita el establecimiento de una apariencia consistente, adaptable y de calidad. Se incorpora un enlace directo hacia Bootstrap para incluir sus estilos y funcionalidades. Esto permite utilizar componentes como contenedores (container), filas y columnas con sus respectivas clases propias del framework.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi sitio web</title>
    <!-- Enlace a Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- Aquí se imprimirá el contenido de la a variable -->
            <?= $contenido; ?>
        </div>
    </div>
</body>
</html>

¿Cómo se optimiza el código utilizando plantillas?

Utilizar plantillas en el diseño de un sitio web ofrece múltiples beneficios, como la creación de un diseño uniforme que afectará a todas las páginas. Por ejemplo, se puede implementar un navegador utilizando las clases de Bootstrap para crear un navbar con propiedades específicas de diseño y funcionalidad adaptativas.

El contenedor principal se ajusta a 12 columnas que ofrece Bootstrap, y aquí solo utilizamos ocho para la página de inicio. Se puede incluir contenido en HTML puro, como párrafos con texto de ejemplo (Lorem Ipsum), proporcionando un diseño más realista para cada vista.

¿Cómo se desarrolla el ciclo de solicitud-respuesta en el sistema?

El ciclo comienza en index, donde se carga el sistema de autoload de Composer para gestionar las dependencias, se interpreta la solicitud y se llama al método send. Este método es crucial para ejecutar la configuración y luego identificar el controlador y método correctos que ejecutarán la respuesta.

// Ejemplo del archivo index
require 'vendor/autoload.php';

$app = new App();
$app->send();

Este proceso implica:

  • Cargar el sistema de autoload de Composer para manejar las dependencias.
  • Interpretar la solicitud entrante y delegarla al controlador adecuado mediante el método send.
  • Retornar una instancia de response que contiene el método send que imprimirá los datos.

¿Qué ventajas ofrecen los frameworks en el desarrollo web?

Los frameworks simplifican el desarrollo web al reducir el tiempo y esfuerzo necesario para configurar aspectos técnicos como vistas, plantillas, controladores, espacios de nombres, sistemas de autenticación, conexiones a bases de datos e inclusive almacenamiento en caché. Además, ofrecen protección de seguridad integrada, asegurando que el código esté alineado con las mejores prácticas actualizadas.

Ejercicio práctico

Para poner en práctica lo aprendido, crea una página de "contactos" y una página de "servicios". Esto no solo reforzará tus habilidades, sino que también te dará la oportunidad de experimentar y verificar cómo se maneja el contenido en el marco de las plantillas y la estructura del ciclo de respuesta.

Explorar y practicar con el uso de frameworks te permitirá aprovechar su poder y flexibilidad, facilitando la creación de aplicaciones web robustas y eficientes. ¡Adelante, pon manos a la obra y sigue ampliando tu conocimiento!