Ediciones ENI Editorial | líder en informática
El motor de plantillas Twig
La sintaxis
Todas las vistas de nuestra aplicación utilizarán el motor de plantillas Twig.
Twig es un lenguaje que se agrega al código HTML en las vistas (como se hacía con PHP).
Es posible instalar Twig en un proyecto PHP sin tener que instalar Symfony.
La documentación completa de Twig se encuentra en: https://twig.symfony.com/doc/3.x/
Consulte la documentación de Twig for template designers para obtener la sintaxis del lenguaje.
Examinemos la sintaxis de las instrucciones Twig. La sintaxis se divide en tres partes:
-
{{ ...}}: se utiliza para mostrar el contenido de una variable o el resultado de la evaluación de una expresión.
-
{% ... %}: se utiliza para ejecutar una estructura de control (if, foreach…).
-
{# ... #}: se utiliza para agregar comentarios (estos comentarios no serán visibles en la página HTML generada).
Tomemos un ejemplo. Vamos a crear la vista hello.html.twig en la carpeta templates/test.
Añadamos esta instrucción:
<h2>Bienvenido o bienvenida {{ nombre }} {{ apellido }}</h2> Los {{ }} interpretarán la expresión. Aquí, mostraremos el valor de los parámetros nombre y apellido. Estos parámetros se transmitirán a la vista en la acción hello() de TestController en el momento de la llamada:
#[Route('/hello/{edad}/{nombre}/{apellido}'...La herencia
A menudo, las páginas de un sitio o aplicación agrupan partes comunes.
Por ejemplo, el encabezado del sitio, la barra de navegación, el pie de página, los menús son comunes a todas las páginas. En lugar de copiar y pegar estos elementos, es más inteligente definir una vista esquema de la cual heredarán todas las demás vistas.
A menudo, esta vista se llama layout (diseño).
Anteriormente ya vimos un layout que existe por defecto en la raíz de la carpeta templates: templates/base.html.twig:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=
%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22>
<text y=%221.2em%22 font-size=%2296%22>●</text></svg>">
{# Run `composer require symfony/webpack-encore-bundle`
to start using Symfony UX #}
{% block stylesheets %}
{{...La inclusión de la vista
Hemos visto cómo una vista puede heredar de otra vista. La inclusión de vista es lo contrario. Es posible incluir una vista dentro de otra (como un include en PHP).
Sintaxis:
{% include 'nombreDeLaVista' %} Creamos, por ejemplo, dos vistas: una para el encabezado (header) y otra para el pie de página (footer).
Creamos header.html.twig en la raíz de la carpeta templates. Dentro escribimos:
<h1>{{ 'El mágico mundo de la informática moderna' }}</h1> Creamos footer.html.twig en la raíz de la carpeta templates. Dentro escribimos:
<p>Revolución informática del
<time datetime="2023-04-02">2 Abril 2033</time>
</p> Estas vistas las incluimos en la vista principal base.html.twig para que se muestren en todas las páginas:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=
%22http://www.w3.org/2000/svg%22...El uso de variables de entorno
En el capítulo anterior, creamos una variable de entorno:
APP_AUTHOR=MiNombre en el archivo .env.
Podemos mostrar esta variable en el controlador mediante una variable $_ENV. Veamos cómo hacerlo.
En la acción hello() del controlador TestController, pruebe este código:
public function hello(Request $request, int $edad, $nombre, $apellido='')
{
echo $_ENV['APP_AUTHOR'];
return $this->render('test/hello.html.twig', [
'nombre' => $nombre,
'apellido' => $apellido,
'edad' => $edad
]);
} Sería más interesante usar nuestra variable de entorno en la vista.
Es posible si la declaramos como una variable global para Twig.
Para definir variables globales de Twig, vaya al archivo config/packages/twig.yaml y defina la variable autor de la siguiente manera:
twig:
default_path: '%kernel.project_dir%/templates'
globals:...Las sesiones y las Flash Bags en Twig
Hemos visto en el capítulo La primera aplicación, sección Las variables de sesión, cómo crear y recuperar variables de sesión y Flash Bags.
Twig permite recuperar directamente estas variables y mostrarlas en la vista.
1. Las variables de sesión
Las variables de sesión se pueden llamar a través del servicio app (regresaremos a este servicio más adelante).
Sintaxis:
{{ app.session.get('nombre_de_la_variable_de_sesion') }} Si la variable no existe, la vista no mostrará nada, pero tampoco habrá un mensaje de error.
2. Las Flash Bags
Las Flash Bags son arrays y, para mostrarlas, se necesita iterar con un bucle for:
{% for message in app.session.flashbag.get('mi_variable_flashbag') %}
{{ message }}
{% endfor %} Tomemos un ejemplo.
Como dijimos, usaremos Flash Bags para los mensajes provenientes de los formularios (ver capítulo Los formularios).
Utilizaremos dos variables Flash Bags para la visualización de los mensajes:
-
- message: contiene el texto del mensaje.
-
statut: contiene el estado del mensaje. De hecho, crearemos un componente Bootstrap de tipo «alert».
Bootstrap es un marco de trabajo CSS y JavaScript que proporciona varios elementos utilizables en una página HTML. Ver el sitio...
Cómo incluir CSS y JavaScript en una vista
Como mencionamos anteriormente, los archivos CSS y JavaScript, así como las imágenes y los vídeos, deben ubicarse obligatoriamente en la carpeta public.
Creemos una subcarpeta public/css y una subcarpeta public/js. Dentro de ellas, creemos los archivos app.css y app.js, respectivamente.
Podemos agregar los estilos en app.css:
h1 {
color:blue;
}
h2 {
color:purple;
} Por supuesto, se debe tener una etiqueta <link> en la vista que utilice este estilo. Pero ¿cómo se accede desde la vista a un elemento de la carpeta public?
Para acceder a un elemento de la carpeta public, existe en Twig un ayudante: asset().
Sintaxis:
{{ asset('subCarpeta/miArchivo') }} En realidad, asset() es una función que genera la URL base. Permite tener aplicaciones portátiles de una URL a otra.
Enlacemos nuestro CSS y JavaScript en el diseño (layout) base.html.twig.
Usaremos los bloques stylesheets y javascripts respectivamente, previstos para este propósito:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{%...Uso de rutas en las vistas
Las rutas pueden utilizarse en las vistas especialmente para los enlaces de botones hacia otras páginas. Se puede usar la URL de la ruta, pero también su nombre.
Recuerde que, en el atributo de la acción, se le dio un nombre a la ruta con la opción name.
Por ejemplo, en el atributo de la acción hello en TestController:
#[Route('/hello/{edad}/{nombre}/{apellido}', name: 'hello',
requirements: ["nombre"=>"[a-z]{2,50}"])]
public function hello(Request $request, int $edad, $nombre, $apellido='')
{
...
}
name="hello" indica que el nombre de la ruta es «hello». Se puede usar este nombre para crear un enlace a esta ruta.
Sintaxis:
Veamos un ejemplo. Creemos un botón «link Test» en la ruta hello que lo lleve a la ruta test y viceversa.
Simplifiquemos nuestro TestController de la siguiente manera:
class TestController extends AbstractController
{
#[Route('/test', name: 'app_test',methods: ['GET', 'HEAD'] )]
public function index(Request $request): Response
{
return $this->render('test/index.html.twig'); ...Los filtros y las funciones
Los filtros y las funciones permiten transformar directamente el resultado de una expresión Twig.
1. Los filtros
Sintaxis:
{{ expression | filtro }} La barra vertical (|) o pipe ya la hemos utilizado anteriormente para mostrar la fecha actual con un formato estándar:
{{"now" | date('d-m-Y H:i:s')}} Se pueden asociar varios filtros a una misma expresión.
{{ expression | filtro | filtro … }} Aquí se puede encontrar la lista de filtros disponibles: https://twig.symfony.com/doc/3.x/filters/index.html
Tomemos un ejemplo.
En la vista hello.html.twig, queremos poner el nombre en mayúscula. Para ello usamos el filtro upper:
<h2>Bienvenido o bienvenida {{ nombre | upper }} {{ apellido }}</h2> No vamos a detallar todos los filtros. Solo veremos dos filtros importantes. El primero se aplica a las fechas.
No hemos hablado sobre las fechas en PHP.
Solo hay que tener en cuenta que una fecha en PHP es un entero que contiene la cantidad de segundos desde el 1 de enero de 1970, a la medianoche.
Llamamos a este valor el timestamp UNIX porque es la cantidad de segundos transcurridos desde el inicio del sistema Unix.
Este timestamp puede generarse mediante varias funciones en PHP, como time(), que devuelve el timestamp del momento actual.
También existe mktime(), que devuelve, para una fecha dada, el timestamp correspondiente.
La sintaxis es:
mktime ( int hora, int minuto, int segundo, int mes, int dia, int año ) Ejemplo:
echo mktime(11, 30, 0, 4, 2, 2023); mostrará: 1680435000
Cuando este timestamp se envía a una vista, queremos recuperar la fecha inicial con un formato específico.
Aquí es donde interviene el filtro date.
Reutilizando el timestamp anterior, podemos mostrar en la vista el formato dia-mes-añohora:minuto:segundo, por ejemplo.
Usaremos el formato:
d-m-Y H:i:s Probemos el filtro en la vista hello.html.twig :...