Templates con Twig

Clase 40 de 53 • Curso de Introducción a PHP 2018

Contenido del curso

Introducción a PHP

Conceptos Básicos de PHP

Programación Orientada a Objetos

Herramientas para Proyectos PHP

Bases de Datos

Estructura/Arquitectura de una applicacion web

Template engines

Validaciones

42
Validaciones
15:42 min

Subida de archivos

Autenticación de usuarios y manejo de sesiones

Liberación de código/release

Tomar examen

Resumen

Ahora que ya instalamos Twig, preparemos nuestra aplicación para usarlo.

El primer cambio que notaremos es que ya no podremos utilizar PHP dentro de HTML. Ahora usaremos {{}} en lugar de <?php ?> y dentro colocaremos el código PHP.

Comentarios

Javier Leonardo Diaz Avila

student•

Para la version con Laminas/Diactoros que es la versión actualizada del Zend/Diactores el use se escribe así:

use Laminas\Diactoros\Response\HtmlResponse;

SEBASTIAN HERNANDEZ CARO

student•

Perfecto, muchas gracias

Jhonathan Alfonso

student•

Igualmente dejo el link de la página de la documentación por si más adelante cambia:

Sergio Toshio Minei

student•

Mostrar data dinámica

Twig no permite código PHP en sus plantillas. Para agregar data dinamica, se va a usar {{ }}.

<h1>{{ name }}</h1>

Luego, el valor de las variables se pasan desde el controlador:

class IndexController extends BaseController {
  public function indexAction() {
    $jobs = Job::all();
    return $this->renderHTML('index.twig', [
      'name' => 'Sergio'
    ]);
  }
}

Repetir código HTML (for)

Se va a usar {% for item in items %}{% endfor %} para declarar cuándp una parte del código HTML se va a reperir.

{% for job in jobs %}
  <h5>{{ job.title }}</h5>
{% endfor %}

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

Jonathan Aguasaco

student•

Su forma de respuesta de twing se ve similar al manejo de Vue.js ante la informacion. Tengo una cuestion y es.

<code>Job::all();</code>

Como se llama este evento o funcion para repasarla ::all, recuerdo que es para sacar todas las funciones del padre pero como se llama este metodo o funcion ::.
Agradezco sus Respuestas

Edú Junior Vera Alvarez

student•

He leído que muchos tienen inconvenientes con su estilo (.css) de su página web, la solución mas sencilla para este es colocar el archivo style.css en la carpeta public

José Alejandro Maya Montiel

student•

Gracias.

Mariana Valencia Gallego

student•

El for en Twig es un foreach en php, a mí eso me confundió un poco hasta que vi que era estructura para recorrer un arreglo.

Patricio Aliaga

student•

a mi igual.

Daniel Muñoz Martín

student•

Me gustaría dejarles un par de extensiones para VSCode para trabajar más cómodamente con Twig:

Twig (de whatwedo) Permite que VSCode reconozca la sintaxis de Twig Enlace Twig pack (de Bajdzis) Permite seguir utilizando Emmet como antes lo hacías en HTML pero con Twig. Enlace

Gran curso !

Germán QL

student•

Para agregar la duración utilicé lo siguiente en la función indexAction del archivo indexController.php

` public function indexAction(){ $jobs = Job::all();

    for($i=0;$i<count($jobs);$i++){
        $jobs[$i]->durationJob = $jobs[$i]->getDurationAsString();
    }

    $name = "Yerman QL";
    $limitMonths = 2000;

    //include "../views/index.php";
    return $this->renderHTML('index.twig',[
        'name' => $name,
        'jobs' => $jobs
    ]);
}`

Y en la vista index.twig

<ul>
                        {% for job in jobs %}
                        <li class="work-position">
                            <h5>{{ job.title }}</h5>
                            <p>{{ job.description }}</p>
                            <p>{{ job.durationJob }}</p>
                            <strong>Achievements:</strong>
                            <ul>
                                <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                                <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                                <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                            </ul>
                        </li>
                        {% endfor %}
                    </ul>```

Juan Felipe Zuluaga Gómez

student•

Cuando mi página es cambiante, podría utilizar ajax, y jquery para cambiar la estructura de mi HTML. En ese tipo de casos, como sería mejor manejar las peticiones y respuestas? es decir:

Se carga mi vista HTML
El usuario da click en listar mis Jobs
Lo que hace mi aplicativo, es tomar esa orden, ir a algún endpoint, consultar la info solicitada y enviarla en un json (por lo general)
Con JS podr{ia coger ese json, y empezar a mapearlo en el HTML sin tener que recargar.

Este proceso como podría llevarlo a cabo con esa implementación MVC con vistas Twig.

Kenet Andrés Chungandro Montenegro

student•

Hola amigo, bueno yo tuve el mismo problema hace un tiempo usando symfony que hace uso de este concepto MVC, el problema estaba en cómo llamar al json, donde poner el archivo que hacía la consulta y demás pero bueno, la solución es, crear un controlador donde pongas la lógica php y te retorne un json, para el controlador igual deberás crearle la ruta, y posterior haces la llamada con ajax a la ruta que le diste al controlador, entonces ahí puedes mapear tranquilamente los datos devueltos

Kenet Andrés Chungandro Montenegro

student•

Excelente clase!, cada vez toma más forma el proyecto y la manera de organizarlo es genial :)

Isaac Miranda Madrigal

student•

Esto me funcionó mejor, ya que yo preferí hacer el print de cada proyecto y trabajo parte de la clase, como los toString() en java, sin cambiar mi lógica, me quedó así:

{% for job in jobs %}
    {{ job.printHTML() }}
{% endfor %}

El printHTML en la clase padre de Job y Project:

abstract function printHTML();

El printHTML implementado en la clase Job utilizando HEREDOC:

function printHTML()
    {
        $duration = $this->getDuration();
        echo <<<HDOC
            <li class="work-position">
                <h5>{$this->title}</h5>
                <p>{$this->description}</p>
                <p>Duration: {$duration}</p>
                <strong>Achievements:</strong>
                <ul>
                    <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                    <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                    <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                </ul>
            </li>
        HDOC;
    }

Carlos Felipe Castro Peñuela

student•

Porque no me cargan los archivos js del template si tengo la ruta bien colocada, alguien de casualidad sabe porque no funcionan?

Luis Rojas

student•

Si escribiste todo bien prueba con Ctrl + shift + R en el navegador

Michael Coronel

student•

El código corre perfectamente pero vi que la pagina se cargaba sin estilos de css y se veía todo feo, revise la consola y me indica que style.css es un "No route". Por favor ayúdenme...como puedo lograr que me reconozca la hoja de estilos..

este es mi código donde declaro si es no un "No route":

`<?php

ini_set('diplay_errors',1);
ini_set('display_starup_error',1);
error_reporting(E_ALL);

require_once '../vendor/autoload.php';

use Illuminate\Database\Capsule\Manager as Capsule;
use Aura\Router\RouterContainer;

$capsule = new Capsule;
$capsule->addConnection([
    'driver'    => 'mysql',
    'host'      => 'localhost',
    'database'  => 'cursophp',
    'username'  => 'root',
    'password'  => '',
    'charset'   => 'utf8',
    'collation' => 'utf8_unicode_ci',
    'prefix'    => '',
]);
$capsule->setAsGlobal();
$capsule->bootEloquent();

$request = Zend\Diactoros\ServerRequestFactory::fromGlobals(
    $_SERVER,
    $_GET,
    $_POST,
    $_COOKIE,   
    $_FILES
);

$routerContainer = new RouterContainer();
$map = $routerContainer->getMap();
$map->get('index', '/', [
    'controller'=> 'App\Controllers\IndexController',
    'action' => 'indexAction'
    ]);
    
$map->get('addJobs', '/jobs/add', [
    'controller'=> 'App\Controllers\JobsController',
    'action' => 'getAddJobAction'           
]);

$map->post('saveJobs', 'jobs/add', [
    'controller'=> 'App\Controllers\JobsController',
    'action' => 'getAddJobAction'       
]);

$matcher = $routerContainer->getMatcher();
$route = $matcher->match($request);

function printElement($job) {
    echo '<li class="work-position">';
    echo '<h5>' . $job->title . '</h5>';
    echo '<p>' . $job->description . '</p>';
    echo '<p>' . $job->getDurationAsString() . '</p>';
    echo '<strong>Achievements:</strong>';
    echo '<ul>';
    echo '<li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>';
    echo '<li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>';
    echo '<li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>';
    echo '</ul>';
    echo '</li>';
}

if(!$route){
    echo 'No route';
} else {
    $handlerData = $route->handler;
    $controllerName = $handlerData['controller'];
    $actionName = $handlerData ['action'];

    $controller = new $controllerName;
    $response = $controller->$actionName($request);

    echo $response->getBody();
}`

Michael Coronel

student•

Jorge Nova

student•

Tengo el mismo inconveniente y no he podido encontrar aún solución.

Alejandro González Reyes

student•

¿Existe alguna forma que dentro de twig se pueda declarar un acumulador?

{{ suma += objeto.edad }}

Hector Benitez

teacher•

El objetivo de usar twig es no tener lógica dentro de la vista, yo te recomiendo que envies al template el valor de la suma como una variable mas.

Alejandro González Reyes

student•

si la edad le corresponde a cada objeto, y la suma la obtengo por cada edad de objeto iterado. ¿Corrigeme, será necesario una propiedad estática para que no cambie su valor?

Cristian Yepes

student•

De acuerdo a la version 2.7 de Twig, las clases se invocan sin los guiones al piso:

<?php
namespace App\controllers;

class BaseController
{
    protected $templateEngine;
    public function __construct()
    {
        $loader = new \Twig\Loader\FilesystemLoader('../views');
        $this->templateEngine = new \Twig\Environment($loader, [
            'debug'=>true,
            'cache'=>false
        ]);
    }

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

Josué Merino

student•

No entendí, ¿Por qué mandamos ese HtmlResponse? ¿Alguien me lo puede explicar?

Wonder Jhonny Diaz Gonzalez

student•

Hola,

Zend\Diactoros\Response\HtmlResponse permite especificar HTML como carga útil, y establece el encabezado Content-Type en text/html de forma predeterminada.

Aquí te dejo la documentación que te puede ser de utilidad sobre los Custom Responses.Zend

Fabricio Galindo Copado

student•

Twig sí reconoció el código PHP 👀

Fabricio Galindo Copado

student•

mentira … 😁 … no lo pase el index.twig por el render, lo que si pasó es que con la extensiónn twig el navegadorseguíaa reconociendo el código php y lo renderizaba como tal.

Usuario anónimo

user•

Genial :)

Bryan Estiven Silva Mercado

student•

        <div>
            <h3 class="border-bottom-gray">Projects</h3>
              {% for datos in proyects %}
                <div class="project">
                 <h5>{{ datos.name}}</h5>
                  <div class="row">
                    <div class="col-3">
                        <img id="profile-picture" src="https://ui-avatars.com/api/?name=John+Doe&size=255" alt="">
                      </div>
                      <div class="col">
                        <p> {{datos.description}} </p>
                        <strong>Technologies used:</strong>
                          {% for dato in tecnologies %}
                            {% if dato.proyecto_id == datos.id %}
                            <span class="badge badge-secondary">PHP</span>    
                            {% endif %}
                          {% endfor %}
                          </div>
                </div>
            </div>

              {% endfor %}
          </div>

Bryan Estiven Silva Mercado

student•

les dejo un manual de twig en español.

Por si alguien lo necesita

Daniel Muñoz Martín

student•

Twig utiliza la misma sintaxis que Vue.js para mostrar las propiedades del Vue Model. cómo sería para poder integrar Vue a un proyecto que tengamos Twig ? Gran herramienta !

jonathan sanchez

student•

Twig tiene su propia sintaxis para no incluir codigo php como tal, ya que por medio de su sintaxis es capas de procesar la logica de programacion al momento de hacer el render de la vista en HTML. cada motor de plantillas posee su propia sintaxis para procesar la logica de programacion.

    for($i=0;$i<count($jobs);$i++){
        $jobs[$i]->durationJob = $jobs[$i]->getDurationAsString();
    }

    $name = "Yerman QL";
    $limitMonths = 2000;

    //include "../views/index.php";
    return $this->renderHTML('index.twig',[
        'name' => $name,
        'jobs' => $jobs
    ]);
}`

<ul>
                        {% for job in jobs %}
                        <li class="work-position">
                            <h5>{{ job.title }}</h5>
                            <p>{{ job.description }}</p>
                            <p>{{ job.durationJob }}</p>
                            <strong>Achievements:</strong>
                            <ul>
                                <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                                <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                                <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                            </ul>
                        </li>
                        {% endfor %}
                    </ul>```

function printHTML()
    {
        $duration = $this->getDuration();
        echo <<<HDOC
            <li class="work-position">
                <h5>{$this->title}</h5>
                <p>{$this->description}</p>
                <p>Duration: {$duration}</p>
                <strong>Achievements:</strong>
                <ul>
                    <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                    <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                    <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                </ul>
            </li>
        HDOC;
    }

ini_set('diplay_errors',1);
ini_set('display_starup_error',1);
error_reporting(E_ALL);

require_once '../vendor/autoload.php';

use Illuminate\Database\Capsule\Manager as Capsule;
use Aura\Router\RouterContainer;

$capsule = new Capsule;
$capsule->addConnection([
    'driver'    => 'mysql',
    'host'      => 'localhost',
    'database'  => 'cursophp',
    'username'  => 'root',
    'password'  => '',
    'charset'   => 'utf8',
    'collation' => 'utf8_unicode_ci',
    'prefix'    => '',
]);
$capsule->setAsGlobal();
$capsule->bootEloquent();

$request = Zend\Diactoros\ServerRequestFactory::fromGlobals(
    $_SERVER,
    $_GET,
    $_POST,
    $_COOKIE,   
    $_FILES
);

$routerContainer = new RouterContainer();
$map = $routerContainer->getMap();
$map->get('index', '/', [
    'controller'=> 'App\Controllers\IndexController',
    'action' => 'indexAction'
    ]);
    
$map->get('addJobs', '/jobs/add', [
    'controller'=> 'App\Controllers\JobsController',
    'action' => 'getAddJobAction'           
]);

$map->post('saveJobs', 'jobs/add', [
    'controller'=> 'App\Controllers\JobsController',
    'action' => 'getAddJobAction'       
]);

$matcher = $routerContainer->getMatcher();
$route = $matcher->match($request);

function printElement($job) {
    echo '<li class="work-position">';
    echo '<h5>' . $job->title . '</h5>';
    echo '<p>' . $job->description . '</p>';
    echo '<p>' . $job->getDurationAsString() . '</p>';
    echo '<strong>Achievements:</strong>';
    echo '<ul>';
    echo '<li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>';
    echo '<li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>';
    echo '<li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>';
    echo '</ul>';
    echo '</li>';
}

if(!$route){
    echo 'No route';
} else {
    $handlerData = $route->handler;
    $controllerName = $handlerData['controller'];
    $actionName = $handlerData ['action'];

    $controller = new $controllerName;
    $response = $controller->$actionName($request);

    echo $response->getBody();
}`

<?php
namespace App\controllers;

class BaseController
{
    protected $templateEngine;
    public function __construct()
    {
        $loader = new \Twig\Loader\FilesystemLoader('../views');
        $this->templateEngine = new \Twig\Environment($loader, [
            'debug'=>true,
            'cache'=>false
        ]);
    }

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

        <div>
            <h3 class="border-bottom-gray">Projects</h3>
              {% for datos in proyects %}
                <div class="project">
                 <h5>{{ datos.name}}</h5>
                  <div class="row">
                    <div class="col-3">
                        <img id="profile-picture" src="https://ui-avatars.com/api/?name=John+Doe&size=255" alt="">
                      </div>
                      <div class="col">
                        <p> {{datos.description}} </p>
                        <strong>Technologies used:</strong>
                          {% for dato in tecnologies %}
                            {% if dato.proyecto_id == datos.id %}
                            <span class="badge badge-secondary">PHP</span>    
                            {% endif %}
                          {% endfor %}
                          </div>
                </div>
            </div>

              {% endfor %}
          </div>

Templates con Twig

Introducción a PHP

¡Actualizamos este curso!

Lo que aprenderás sobre PHP

¿Qué es PHP?

Setup y Herramientas

Conceptos Básicos de PHP

Sintaxis de PHP

Revisando el template que usaremos

Variables tipos de datos y cadenas

Tipos de Datos en PHP

Arreglos

Condicionales y Ciclos

Ejercicios Arreglos

While vs. Do While

Operadores, Condicionales, Continue y Break

Operadores

Ejercicios Operadores

Funciones

Agregando archivos externos

Programación Orientada a Objetos

Programación Orientada a Objetos

Constructor y Métodos

Herencia

Herencia y polimorfismo

Interfaces

Namespaces

Herramientas para Proyectos PHP

PSR y PHPFIG

Composer

Bases de Datos

Introducción a las Bases de Datos

ORM

Formularios

Eloquent

Listar registros de la base de datos con Eloquent

Insertar datos en MySql con PHP

Estructura/Arquitectura de una applicacion web

Front Controller

PSR7

Router

MVC, Creando Controllers

MVC Reestructurando Vistas y Controladores

MVC Controller de la entidad Job

Template engines

Template engines

Twig