Creación de Vistas y Plantillas con Bootstrap y PHP

Curso de Introducción a Frameworks de PHP

Contenido del curso

Entender un framework

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:23

Creación de Vistas y Plantillas con Bootstrap y PHP

Curso de Introducción a Frameworks de PHP

Clase 9 de 14

Clase 9 / 14

Recursos

¿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!

Maria Guadalupe Caraveo Mosqueda

Hace 5 años

Hola, alguien me puede ayudar por favor. No me esta tomando los estilos en la pagina y el nav no me lo muestra.

Ricardo Rito Anguiano

Hace 5 años

Te falta el script del js, pero independientemente de eso, deberia funcionar , revisa si en la consola te da algun tipo de error..

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

Maria Guadalupe Caraveo Mosqueda

Hace 5 años

Hola @RicardoRA20, gracias. Estaba utilizando XAMPP como servidor web y me mostraba solo lo que subí en el comentario anterior. Ahorita estoy utilizando Laragon y ya me sale el nav pero ahora me muestra lo siguiente:

layout.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <title>Mi sitio web</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
        <div class="container">
            <a href="/" class="navbar-brand h1">FW</a>

            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a href="/" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="service" class="nav-link">Service</a>
                </li>
                <li class="nav-item">
                    <a href="contact" class="nav-link">Contact</a>
                </li>
            </ul>

        </div>
    </nav>

    <div class="container">
        <div class="row">
            <?php echo $content; ?>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"crossorigin="anonymous"></script>
</html>

Response.php

<?php

namespace App\Http;

class Response {
    protected $view; //array, json, pdf...

    public function __construct($view) {
        $this->view = $view; //home, contact
    }

    public function getView() {
        return $this->view;
    }

    public function send() {
        $view = $this->getView();
        //home
        $content = file_get_contents(viewPath($view));

        require viewPath('layout');
    }
}

Request.php

<?php

namespace App\Http;

class Request {
    protected $segments = [];
    protected $controller;
    protected $method;

    public function __construct() {
        // platzi.test/servicios/index
        $this->segments = explode('/', $_SERVER['REQUEST_URI']);

        $this->setController();
        $this->setMethod();
    }

    public function setController() {
        $this->controller = empty($this->segments[1])
            ? 'home'
            : $this->segments[1];
    }

    public function setMethod() {
        $this->method = empty($this->segments[2])
            ? 'index'
            : $this->segments[2];
    }

    public function getController() {
        //home, Home
        $controller = ucfirst($this->controller);

        return "App\Http\Controllers\\{$controller}Controller";
    }

    public function getMethod() {
        return $this->method;
    }

    public function send() {
        $controller = $this->getController();
        $method = $this->getMethod();

        $response = call_user_func([
            new $controller,
            $method
        ]);

        try {
            if($response instanceof Response) {
                $response->send();
            } else {
                throw new \Exception("Error Processing Request", 1);
            }
        } catch (\Exception $e) {
            echo "Details {$e->getMessage()}";
        }

    }
}

En la consola no me marca ningún error, espero me puedan apoyar.

Comentarios (47)47 comentarios

Brian Sánchez Izquierdo

Hace 6 años

Increíble la capacidad pedagógica para explicar algo tan complejo como un framework web. Palmas para el profe.

Carlos Eduardo Gomez García

El sistema de plantillas es algo que me costó trabajo aceptar, pero la verdad es que si hace más fácil el maquetado, ya no se usa include "heder.php" o include "footer.php" etc. Ahora se suele centrar todo el contenido html de la web en una plantilla base con los elementos comunes, y cargar dinámicamente el contenido que queremos mostrar, y es justo eso lo que hace la variable $content, esa variable está guardando la vista que necesitamos y es mandada a llamar en la plantilla, es por eso que nos permite hacer la carga de una manera más dinámica

Eduer Pallares Jiménez

Crees que sea necesario hacer un curso para dominar el sistema de plantillas de Laravel o Symfony?

@eduerpj1 Podría ser, pero realmente un sistema de plantillas es algo muy fácil de aprender, no se si exista algún curso específico de Blade "El sistema de plantillas de Laravel" pero si no, seguramente lo explican en el curso de Laravel!

Eddy Herrera Vargas

Reto cumplido 1. Crear los archivos ContactController.php y ServiceController.php en la carpeta controllers. .

. 2. Crear vistas service.php y contact.php en la carpeta vistas. .

. 3. Añadir los enlaces en el nav de layout.php que se encuentra en la carpeta views. .

. Listo .

Fabián Ovalle

Hace 4 años

muchas gracias

Eduardo Venegas Rivera

Reto cumplido:

Hirepan Chavez

Como le haces para subir las fotos? Cuando le pico a imagen me sale algo así como ![] (url) :(

Debes guardar las imágenes en algún sitio externo y hacer referencia a ellas mediante la url puedes subirlas gratis aquí

Carlos Giovanni Inga Sinche

Listo!!

Eduardo Lara Carretero

Buena explicación y resumen del **flujo **en los Frameworks. Es complicado de entender e incluso un poco lioso, pero lo vas explicando poco a poco.

Emerson David Cabrera Salas

Reto realizado, muy chévere aprender todo esto!!

Oscar Aguilar López

Complete los ejercicios :D

Contacto

Servicios

Edisson Fernando Palomares Cifuentes

Mi aporte cuando no existe el controlador o el método.

public function send()                                                                                                                                {                                                                                                                                                      
  $controller=$this->get_controller();                                                                                                               
  $method = $this->get_method();                                                                                                                     
         
                                                                                                                                                   			 
   if(class_exists($controller))                                                                                                                               
   {                                                                                                                                                  
      $object = new $controller;                                                                                                                                  
      if(method_exists($object,$method))                                                                                                             
      {                                                                                                                                              
         $response = call_user_func([                                                                                                                           
               $object,                                                                                                                               
               $method                                                                                                                                
              ]);                                                                                                                                        
      }else                                                                                                                                          
      {   
          // si no existe el metodo llamo al index del controlador                                                                                                                                           
          $response = call_user_func([$object,'index']);                                                                                             
      }                                                                                                                                              
      }else                                                                                                                                              
      {    
         // si no existe el controlador lo redirijo al home                                                                                                                                              
         $response = call_user_func([new Home,'index']);                                                                                                
      } 
}

Danny Pacheco

Muy buen aportes, en cambio yo lo maneje mediante excepciones y te mostrara la tipica de error 404.

try{
                $response = call_user_func([new $controller,$method]);
                //catch fatal errors
            }catch(Error $e){
                //if view doesnt exist, launch error 404 page not found
                $controller = "App\Http\Controllers\Error404Controller";

                $response = call_user_func([new $controller,'error']);
                
            }

En el controlador del error 404 tengo esto

<?php

    namespace App\Http\Controllers;
    use App\Http\Response; //We use Response from this route.

    class Error404Controller{
        
        public function error(){
            return new Response('error404');
        }
    }

Y finalmente crear una vista, simple o muy elaborada.

He notado que cuando usamos tecnologías como bootstrap no se respeta la semantica

Tanto Frameworks como librerías imponen sus convenciones y reglas, una que me llama la atención es el uso de la etiqueta div para maquetar todo. ¿Dónde queda la semántica a la hora de elegir estas herramientas? ¿Se ve afectada? ¿Cómo la implementan?

Roger Carlos Ariel Alba

Hola,

Supongo que más "ejemplo" de uso de las "views" que de semántica. Aunque tienes razón, el hecho de usar cualquier framework CSS no es sinónimo de no respetar la semántica.

Emerson Cedeño

la semántica la pone el implementador, los fw de CSS se encargan de los estilos no de la semántica, otra cosa es la claridad del código, para lograr un determinado efecto unos fw usarán 3 clases, mientras que otros usarán 5 clases (por ejemplo), unos serán más pesados que otros, yo por colaboración elijo Bootstrap ya que me parece es el más ampliamente usados de estos, pero he escuchado que Tailwind es mucho más ligero, tengo pendiente el estudiarlo.

Edgar Ramón González Contreras

Desde hace unas clases atras tengo un problema con las vistas y el método Request.

El error:


Fatal error: Uncaught Error: Class 'App\Http\Controllers\DataController' not found in C:\xampp\htdocs\Data\PHP\CursoPlatzi\IntroFrameworks\app\Http\Request.php:49 Stack trace: #0 C:\xampp\htdocs\Data\PHP\CursoPlatzi\IntroFrameworks\public\index.php(7): App\Http\Request->send() #1 {main} thrown in C:\xampp\htdocs\Data\PHP\CursoPlatzi\IntroFrameworks\app\Http\Request.php on line 49

Y el Request

namespace App\Http;

class Request {

  protected $segments = [];
  protected $controller;
  protected $method;
  

  public function __construct(){

    // platzi.test/servicios
    $this->segments = explode('/', $_SERVER['REQUEST_URI']);
    
    $this->setController();
    $this->setMethod();

  }

  //Setteando metodos 
  public function setController(){
    $this->controller = empty($this->segments[1]) ? 'home' : $this->segments[1];
  }
  
  public function setMethod(){
    $this->method = empty($this->segments[2]) ? 'index' : $this->segments[2];
  }

  //Obteniendo los datos
  public function getController(){
    //home, HomeController
    $controller = ucfirst($this->controller);

    return "App\Http\Controllers\\{$controller}Controller";
  }

  public function getMethod(){
    
    return $this->method;
  }

  public function send(){

    $controller = $this->getController();
    $method = $this->getMethod();

    $response = call_user_func([new $controller, $method]);

    $response->send();
  
  }
  
}

Y la linea que marca el error es esta:

 $response = call_user_func([new $controller, $method]);

help? :c

Lucas Saurin

Yo probaría dos cosas. Primero: fijate con var_dump($segments) si los indices 1 y 2 son realmentes los del controlador y método respectivamente. A mi me pasó (usando xampp) que los indices eran 3 y 4. Segundo: agrega el require DIR . '/../../vendor/autoload.php' aunque esto no debería afectarte en nada, yo no lo tengo y funciona bien.

En efecto, los problemas eran los indices del arreglo segmento.

Como el maestro, tiene una url corta,como localhost:platzi.test por ello usa 1 y 2

Yo al usar toda la ruta localhost/Data/PHP/CursoPlatzi/IntroFrameworks/public/ entonces debo usar los índices 6 y 7.

Gracias por la ayuda :)

Miguel Angel Vera Ramos

¿Cómo cargó un estilo .css de forma local o las imágenes?

Luciano Agustín Della Savia

Puedes usar la sintaxis para vistas propia de PHP ( <?=?> ).

Para el css puedes hacerlo dentro de la etiqueta <head> de tu layout.php. De esta forma:

<link rel="stylesheet" href="<?= __DIR__ ?>/../assets/css/index.css">

Y lo mismo para las imágenes:

<img src="<?= __DIR__  ?>/../assets/images/image.png" alt="Image">

Deibi Geovanny Arias Galindo

Me pueden ayudar con este error Fatal error: Uncaught Error: Class "App\Http\Controllers\LaravelController" not found in C:\xampp\htdocs\Laravel\app\Http\Request.php:54 Stack trace: #0 C:\xampp\htdocs\Laravel\public\index.php(6): App\Http\Request->send() #1 {main} thrown in C:\xampp\htdocs\Laravel\app\Http\Request.php on line 54

Jhonny Córdova

Hola. Tu controlador "LaravelController" realmente esta creado en App\Http\Controllers ?

Saludos

Kevin Henriquez

Como lo solucionaste?

Cristobal Nyram

con mucho esfuerzo llegue aquí

Luis Rodriguez

Excelente clase Italo...

Kenneth Angulo L

Quedo claro el concepto.

Natalia Gutierrez

Me gusta la pedagogia del profesor, explica cada componente en detalle.

Kenet Andrés Chungandro Montenegro

Pedro Roberto Capriles Morales

Aporte del reto

Jimmy Buriticá Londoño

Flujo de información del Framework

Entender un framework

Uso de Frameworks PHP para Proyectos Eficientes

Frameworks PHP: Laravel y Symphony para Programadores

Creación de Estructura de Carpetas en un Proyecto PHP con Composer

Patrón Front Controller en PHP: Centraliza Acceso Web

Configuración de Requests en PHP para Controladores y Métodos

Configuración del Método Send en Clases PHP para Peticiones

Implementación de Controladores y Respuestas en PHP Avanzado

Configuración de Controladores y Respuestas en PHP

Creación de Vistas y Plantillas con Bootstrap y PHP

Creación y Uso de Helpers en PHP para Frameworks Modernos

Configuración de Menú y Validaciones en Frameworks con Bootstrap

Frameworks Modernos: Aprende a Utilizar Laravel y Symphony

Estructura y Uso de Frameworks PHP: Laravel y Symfony

Uso de Frameworks Modernos en PHP: Laravel y Symphony

Creación de Vistas y Plantillas con Bootstrap y PHP

Progreso del curso

Entender un framework

Recursos

Recursos