Templates de vistas con Twig

Clase 49 de 65 • Introducción a PHP-2017

Clase anteriorSiguiente clase

Resumen

Templates de Vistas con Twig

Ya que tenemos configurado nuestro entorno, ahora vamos a configurar las vistas usando twit.

Lo primero que vamos a ver es cómo configurar nuestra vista principal o índex.

Con el uso de Twit nuestro código se va a ver mucho mejor porque nos permite mostrarlo más como un documento de HTML.

Enrique López

student•

Creo necesitan mejorar en la edición de las clases… ya van varias veces que repite lo mismo por que le indican que debe explicarlo nuevamente

José Alberto Ortiz Vargas

student•

addFilter() nos permite agregar filtros que nos permiten ayudar a formatear algo dentro de nuestros tempaltes.

Eduardo Rasgado Ruiz

student•

La sintaxis de twig está basada en la de Jinja (django).

Ivan Cardozo

student•

Hola¡¡ Tuve el siguiente error:

Uncaught Error: Call to a member function render() on null in C:\xampp\htdocs\CursoPHP\blog\app\controllers\BaseController.php:21 Stack trace: #0 C:\xampp\htdocs\CursoPHP\blog\app\controllers\indexController.php(13): App\Controllers\BaseController->render('index.twig', Array) #1 [internal function]: App\Controllers\IndexController->getIndex() #2 C:\xampp\htdocs\CursoPHP\blog\vendor\phroute\phroute\src\Phroute\Dispatcher.php(58): call_user_func_array(Array, Array) #3 C:\xampp\htdocs\CursoPHP\blog\public\index.php(34): Phroute\Phroute\Dispatcher->dispatch('GET', '/') #4 {main} thrown in C:\xampp\htdocs\CursoPHP\blog\app\controllers\BaseController.php on line 21

Que provenia del codigo:

<?php

namespace App\Controllers;

use Twig_Loader_Filesystem;

class BaseController {

  protected $templateEngine;

    public function __contruct()
        {
            $loader = new Twig_Loader_Filesystem('../views');
            $this->templateEngine = new \Twig_Environment($loader, [
              'debug'=> true,
              'cache'=> false
            ]);
        }

    public function render($fileName , $data=[]) {
      return $this->templateEngine->render($fileName, $data);
    }



}

Lo que pasaba era que escribi mal la palabra __construct faltaba la “s” ,dejo el comentario por si a alguien le salta el mismo error , me di cuenta porque en clases pasadas estaba el codigo y lo copie y pegue y con DiffNow lo comparé y vi el error. Espero sirva de algo mi aporte.

ALEXANDRO YEDRA

student•

también me paso estuve tres dias
releyendo el código y documentación, malditos typos.

lautaro insaurralde

student•

Podes creer que tuve el mismo pero mismo error!!
Muchas gracias! Me salvaste!

William Arevalo

student•

Tenia un typo muy tonto, casi muero dure buscandolo durante media hora por que era un error silencioso. 😕

Marcos Brandon Ortega Arenas

student•

jeje ntp, a mi me pasó algo similar.

Mauricio Hernan Cabrera

student•

Cual era? yo no lo encuentro :u

Alexander Peña Benitez

student•

Código importante en Twig:

{% for blogPosts in blogPosts %}
          <div class="blog-post">
            <h2>{{ blogPosts.title }}</h2>
            <p>Jan 1, 2020 by <a href="">Alex</a></p>
              <div class="blog-post-image">
                <img src="images/BLOGS.jpg" alt="">
              </div>
              <div class="blog-post-content">
                {{ blogPosts.content }}
              </div>
          </div>
          {% endfor %}```

José Tuzinkievicz

student•

Es for blogPost in blogPosts, sin la S al final

Walter Jesus Santiago Gonzalez

student•

Buen día,

{% for blogPost in blogPosts %}
					<div class="blog-post">
						<h2>{{ blogPost.title }}</h2>
						<p>Jan 1, 2020 by <a href="">Walter</a></p>
						<div class="blog-post-image">
							<img src="images/paisaje.jpg" alt="">
						</div>
						<div class="blog-post-content">
							{{ blogPost.content }}
						</div>
					</div>
					<br>
				{% endfor %}

Walter Jesus Santiago Gonzalez

student•

Buen día,

Con Twig se elimina el error de seguridad, para los ataques XSS, no se ejecuta el script que creamos y en el contenido del post muestra:

Noe Mikhael Huaccharaque Ruiz

student•

Definitivamente o agregas snippets para php y twig o te descargas phpstorm… los errores de sintaxis son recurrentes

Walter Jesus Santiago Gonzalez

student•

Buen día,

Buena clase.

Gastón Berruet

student•

¿Esto no se puede usar?

<a href="{{BASE_URL}}admin">Admin</a>```

Diego Forero

Team Platzi•

No twig previene el uso de este tipo de expresiones, como lo explica el profesor en esta parte https://platzi.com/clases/php-2017/concepto/mvc-y-templates-en-nuestro-blog/templates-de-vistas-con-twig/material/?time=410 y crea un filtro para que sea usando en el template.

Diego Armando Bribiesca

student•

cuando vuelvo a recargar
localhost:8080/Curso-PHP-2017/Blog/public/

me aparece el siguiente error:
Notice: Undefined variable: templateEngine in C:\xampp\htdocs\Curso-PHP-2017\Blog\app\controllers\BaseController.php on line 13

Fatal error: Uncaught Error: Call to a member function render() on null in C:\xampp\htdocs\Curso-PHP-2017\Blog\app\controllers\BaseController.php:20 Stack trace: #0 C:\xampp\htdocs\Curso-PHP-2017\Blog\app\controllers\indexController.php(11): app\controllers\BaseController->render(‘index.twig’, Array) #1 [internal function]: app\controllers\IndexController->getIndex() #2 C:\xampp\htdocs\Curso-PHP-2017\Blog\vendor\phroute\phroute\src\Phroute\Dispatcher.php(58): call_user_func_array(Array, Array) #3 C:\xampp\htdocs\Curso-PHP-2017\Blog\public\index.php(48): Phroute\Phroute\Dispatcher->dispatch(‘GET’, ‘/’) #4 {main} thrown in C:\xampp\htdocs\Curso-PHP-2017\Blog\app\controllers\BaseController.php on line 20

Mi BaseController es el siguiente:

<?php

namespace app\controllers;

use Twig_Loader_Filesystem;

class BaseController{

	protected $templateEngine;

	public function __construct(){
		$loader = new Twig_Loader_Filesystem('../views');
		$this->$templateEngine = new \Twig_Environment($loader, [
			'debug' => true,
			'cache' => false
		]);
	}

	public function render($fileName, $data = ['']){
		return $this->templateEngine->render($fileName, $data);
	}
}

alguien podría detectar mi error, he estado siguiendo paso por pasó cada video del curso, pero en este me quede estancado

Daniel Julian Ortiz Alarcon

student•

El problema es

$this->$templateEngine

Cambialo a

$this->templateEngine

Jaime Diaz

student•

Hay que tener en cuenta este tipo de errores como menciona el compañero @JulianOrtz, sobre todo cuando se desarrolla usando el paradigma orientado a objetos P.O.O.. En dicho contexto, $this representa el spoce general de una clase propia dada, es decir, si tengo en mi clase atributos como:

class ClaseDeEjemplo {
	private $variableDeInstancia1 = 2;
	private $variableDeInstancia2 = "Dos";

	function __construct($numeroIn, $textoIn) {
		// Tener muy en cuenta las referencias locales:
		$this->variableDeInstancia = $numeroIn;
		$this->variableDeInstancia2.= ' ' . $textoIn
	}
}

Un poco salido de contexto el ejemplo pero es para quienes se inician con PHP en el paradigma de programación orientado a objetos, una característica que me fascina de PHP.
Saludos.

Jesús Enrique Prieto Treviño

student•

ponganle el slash invertido a la clase Twig_SimpleFilter

$this->templateEngine->addFilter(new \Twig_SimpleFilter(‘url’, function ($path) {
return BASE_URL . $path;
}));
}

Elio Alejandro Marcano Brito

student•

No trae los títulos y contenido de la base de datos… Alguien tiene una solución?

Diego Forero

Team Platzi•

Comparte tu código, así es imposible decir cual es el problema y solucionarlo.

Elio Alejandro Marcano Brito

student•

Ya lo resolví… era algo simple jeje el problema era los nombres de las tablas en la base de datos… Me había perdido por un momento

Gianfranco Verrocchi

student•

Segui los pasos del tutorial y tengo el siguiente error:

Fatal error: Call to undefined function App\Controllers\Twig_Loader_Filesystem() in /opt/lampp/htdocs/cursoPhpPlatzi/ProyectoBlog/app/controllers/BaseController.php on line 23

Esta es la linea 23 de mi BaseController.php:

loader = Twig_Loader_Filesystem('../views');

Por cierto cada que instalo un paquete de composer tengo este error (lo dejo completo por si caso):

Fatal error: Uncaught exception ‘ReflectionException’ with message ‘Class App\Controllers\IndexController does not exist’ in /opt/lampp/htdocs/cursoPhpPlatzi/ProyectoBlog/vendor/phroute/phroute/src/Phroute/RouteCollector.php:315 Stack trace: #0 /opt/lampp/htdocs/cursoPhpPlatzi/ProyectoBlog/vendor/phroute/phroute/src/Phroute/RouteCollector.php(315): ReflectionClass->__construct(‘App\Controllers…’) #1 /opt/lampp/htdocs/cursoPhpPlatzi/ProyectoBlog/public/index.php(78): Phroute\Phroute\RouteCollector->controller(’/’, ‘App\Controllers…’) #2 {main} thrown in /opt/lampp/htdocs/cursoPhpPlatzi/ProyectoBlog/vendor/phroute/phroute/src/Phroute/RouteCollector.php on line 315

la unica manera de saltar este erro es corriendo este comando:
php composer.phar dump-autoload -o

Diego Forero

Team Platzi•

Si la linea la tienes tal cual la pusiste hay dos errores te dejo la linea como debe ir.

$loader = new Twig_Loader_Filesystem('../views')

En cuanto al segundo error revisa los llamados al archivo IndexController, parece que el problema es por ese lado.

Jose Antonio Rodriguez Morales

student•

Por que en este caso se le pone $this-> a render y antes no?

Un saludo

Diego Forero

Team Platzi•

Porque ya la visa hereda de BaseController que tiene el método render que recibe, el nombre del template y los blogPosts por esto se accede haciendo uso de $this->render(...)

Mariano Ostuni

student•

hola cuando ejecuto me sale un error que pondré a continuación, el código esta exactamente igual pero no funciona , ya no se que mas revisar , saludos.

El error es

Fatal error: Uncaught ReflectionException: Class app\controlador\admin\indexcontrolador does not exist in C:\xampp2\htdocs\cursophp\blog\vendor\phroute\phroute\src\Phroute\RouteCollector.php:315 Stack trace: #0 C:\xampp2\htdocs\cursophp\blog\vendor\phroute\phroute\src\Phroute\RouteCollector.php(315): ReflectionClass->__construct(‘app\controlador…’) #1 C:\xampp2\htdocs\cursophp\blog\public\index.php(27): Phroute\Phroute\RouteCollector->controller(’/admin’, ‘app\controlador…’) #2 {main} thrown in C:\xampp2\htdocs\cursophp\blog\vendor\phroute\phroute\src\Phroute\RouteCollector.php on line 315

Diego Forero

Team Platzi•

Revisa que los imports están bien, recuerda que es case sensitive, tienes que respetar las mayúsculas y minúsculas no es lo mismo IndexControlador que indexcontrolador o indexControlador.

Mariano Ostuni

student•

los nombres están bien , puede ser que twig no se instalo correctamete?

Kevin Lozoya Giner

student•

este era el curso de php que estaba buscando. Está siendo todo muy profesional, y para proyecto peques está muy bien.
Y un MVC manual, nada de framework.
Me encanta. Estoy aprendiendo un montón.

Kevin Lozoya Giner

student•

yo utilizaba como motor de templates Smarty? Pero este está muy bien, tengo curiosidad.

Ivan Cardozo

student•

Hola , he tenido el mismo problema todo el proyecto , siempre que intento utilizar BASE_URL me devuelve 2 veces la ruta , es decir me sale esto en la ruta del navegador http://localhost/CursoPHP/blog/public/http//localhost/CursoPHP/blog/public/admin

Por algun motivo hace eso 2 veces.

Ivan Cardozo

student•

Ya lo resolvi , era que cuando habia escrito en public/index.php

en la parte que ponia la ruta

$baseUrl = 'http//'. $_SERVER['HTTP_HOST'] . $baseDir;
enrealidad debia poner http: osea , olvidé los “:” . y por eso ponia la ruta 2 veces.

nahuel schimpf

student•

Alguno sabe o le pase este error luego de pasar a twig? rehíce el script varias veces pero no logre identificar el problema

error: Fatal error: Uncaught Error: Class ‘Twing_Environment’ not found in C:\xampp\htdocs\cursoPHP\blog\app\controllers\BaseController.php:13 Stack trace: #0 C:\xampp\htdocs\cursoPHP\blog\vendor\phroute\phroute\src\Phroute\HandlerResolver.php(16): App\Controllers\BaseController->__construct() #1 C:\xampp\htdocs\cursoPHP\blog\vendor\phroute\phroute\src\Phroute\Dispatcher.php(56): Phroute\Phroute\HandlerResolver->resolve(Array) #2 C:\xampp\htdocs\cursoPHP\blog\public\index.php(68): Phroute\Phroute\Dispatcher->dispatch(‘GET’, ‘/’) #3 {main} thrown in C:\xampp\htdocs\cursoPHP\blog\app\controllers\BaseController.php on line 13

<?php

namespace App\Controllers;

use Twig_Loader_Filesystem;

class BaseController {
    protected $templateEngine;

    public function __construct()
    {
        $loader = new Twig_Loader_Filesystem('../views');
        $this->templateEngine = new \Twing_Environment($loader, [
            'debug' => true,
            'cache' => false
        ]);
    }

    public function render($fileName, $data = []) {
      return $this->templateEngine->render($fileName, $data);
    }
}```

Diego Forero

Team Platzi•

Tienes un error de digitación tienes Twing_Environment y es Twig_Environment 😃

Templates de vistas con Twig

Estamos renovando el Curso de Introducción a PHP

¡Renovamos este curso!

Introducción

Presentación, contenidos y proyecto

Características de PHP

Antes de comenzar y Sintáxis

Introducción a PHP

Manejo de Variables y Tipos de Datos en PHP

Utilización de Cadenas de Caractéres en PHP

Arreglos

Operadores

Operadores - Aritméticos

Asignación

Comparación

Arrays

Incremento

Lógicos

Null

Funciones

Funciones en PHP

Estructuras Condicionales

Estructuras de Ciclos

Cargas de Archivos Externos

Manejo de Sesiones

Manejo de Cookies

Funciones Anónimas

Programación Orientada a Objetos

Introducción a Programación Orientada a Objetos

Constructor y Destructor

Herencia

Namespaces

Static

Abstract y Polimorfismo

Interface

Excepciones

Traits

PDO y SQL

Introducción a bases de datos SQL con PHP

Conexión desde PHP a una base de datos SQL

Insertar datos en nuestra de base de datos

Listar nuestros usuarios de la base de datos

Actualizar un Usuario en Nuestra Base de Datos

Borrar un usuario de nuestra base de datos

Cómo proteger nuestra base de datos ante ataques de SQL Injection

Construyento Nuestro Propio Blog

Creando la vista principal del Blog usando Bootstrap

Administrando los artículos del blog

Guardando los blogposts en la base de datos

Composer y carga automática de archivos

Creando la Organización de Nuestro Blog

Introducción a Front Controller

Introducción a Router

Renderizando las vistas desde un método

Agregando el resto de las rutas a nuestro Router

MVC y Templates en Nuestro Blog

El patrón de diseño Model-View-Controller en PHP

¿Por qué usar un motor de templates en PHP?

Instalación y configuración de Twig

Templates de vistas con Twig

Extendiendo layouts con Twig

Modelos con Eloquent

Configuración de variables de entorno

Validaciones de formularios en PHP

Usuarios

Agregando un modelo para los usuarios del blog

Crear usuarios para el blog

Autenticación de usuarios en PHP

Logout de usuarios

Detalles Finales

Protege ciertas rutas con middlewares y filtros

Subir archivos al servidor

Guardando un log de errores en el servidor

Página para el detalle del blogpost

Paginación

Editar y borrar blogposts

Agregar validación del lado del cliente

Cierre del Curso