WEBVTT 00:00:01.146 --> 00:00:05.726 align:middle Hagamos que la acción show() del controlador renderé código HTML usando un template. 00:00:07.056 --> 00:00:09.176 align:middle Tan pronto como quieras representar un template, 00:00:09.426 --> 00:00:13.496 align:middle necesitarás que tu controlador herede del AbstractController. 00:00:14.306 --> 00:00:18.746 align:middle No olvides permitir que PhpStorm lo autocomplete para que pueda agregar el import necesario. 00:00:19.446 --> 00:00:24.526 align:middle Ahora, obviamente, un controlador no necesita heredar esta clase base - 00:00:24.806 --> 00:00:26.886 align:middle A Symfony no le interesa eso. 00:00:27.616 --> 00:00:31.486 align:middle Pero, es usual heredar del AbstractController 00:00:31.616 --> 00:00:36.606 align:middle por una simple razón: nos brinda métodos útiles! 00:00:37.046 --> 00:00:39.476 align:middle El primer método útil es render. 00:00:39.836 --> 00:00:44.806 align:middle Podemos decir: return this->render() y pasar dos argumentos. 00:00:45.426 --> 00:00:50.666 align:middle El primero es el nombre del archivo del template: podemos poner lo que sea aquí, pero usualmente - 00:00:51.016 --> 00:00:59.196 align:middle porque valoramos nuestra cordura - lo nombramos igual que el controlador: question/show.html.twig. 00:01:01.696 --> 00:01:07.906 align:middle El segundo argumento es un array de todas las variables que queremos pasar al template. 00:01:09.096 --> 00:01:13.336 align:middle Eventualmente, vamos a hacer una query específica a la base de datos y pasaremos los datos 00:01:13.336 --> 00:01:15.406 align:middle al template. 00:01:15.906 --> 00:01:17.386 align:middle Por el momento, hay que fingirlo. 00:01:18.246 --> 00:01:21.706 align:middle Voy a copiar la linea ucwords() y borrar el código viejo. 00:01:23.566 --> 00:01:28.766 align:middle Pasemos una variable al template llamada - que tal: question - asignada a este string. 00:01:30.016 --> 00:01:30.976 align:middle Es hora de una pregunta! 00:01:31.346 --> 00:01:34.816 align:middle Qué valor crees que regresa el método render()? 00:01:35.096 --> 00:01:37.176 align:middle Un string? alguna otra cosa? 00:01:37.806 --> 00:01:40.706 align:middle La respuesta es: un objeto Response... 00:01:41.236 --> 00:01:42.556 align:middle conteniendo HTML. 00:01:42.976 --> 00:01:49.446 align:middle Porque recuerda: la única regla de un controlador es que siempre debe de regresar un objeto tipo Response. 00:01:50.076 --> 00:01:52.726 align:middle Entonces, creemos ese template! 00:01:53.096 --> 00:01:56.086 align:middle Dentro de templates/, crea el subdirectorio question, 00:01:57.596 --> 00:02:00.616 align:middle luego un nuevo archivo llamado show.html.twig. 00:02:01.896 --> 00:02:11.276 align:middle Empecemos sencillo: un <h1> y luego {{ question }} para representar la variable question. 00:02:12.486 --> 00:02:15.306 align:middle Y... voy a poner un poco más de sintaxis. 00:02:16.496 --> 00:02:19.146 align:middle Acabamos de escribir nuestro primer código de Twig! 00:02:19.616 --> 00:02:28.606 align:middle Twig es muy amigable: es un simple archivo HTML hasta que escribes una de sus dos sintaxis. 00:02:28.606 --> 00:02:32.296 align:middle La primera es la sintaxis "imprime algo". 00:02:32.906 --> 00:02:38.596 align:middle Cuando necesites imprimir algo, usa {{, lo que quieres imprimir, luego }}. 00:02:38.746 --> 00:02:44.056 align:middle Dentro de las llaves, estás escribiendo código en Twig... 00:02:44.426 --> 00:02:46.856 align:middle el cual es muy similar a JavaScript. 00:02:47.466 --> 00:02:49.536 align:middle Esto imprime la variable question. 00:02:49.946 --> 00:02:53.836 align:middle Si pones comillas alrededor, imprimirá la palabra question. 00:02:54.456 --> 00:02:58.976 align:middle y claro, puedes hacer cosas más complejas - como el operador terneario. 00:02:59.386 --> 00:03:02.566 align:middle Es decir, es muy similar a JavaScript. 00:03:04.026 --> 00:03:07.936 align:middle La segunda sintaxis es la que yo llamo "haz algo" 00:03:08.296 --> 00:03:14.926 align:middle Va de esta forma {% seguido por lo que quieres hacer, por ejemplo un if o un for. 00:03:15.596 --> 00:03:17.456 align:middle Hablaremos más de esto en un momento. 00:03:18.006 --> 00:03:19.376 align:middle Y... eso es todo! 00:03:19.696 --> 00:03:27.156 align:middle O estás imprimiendo algo con {{ o haciendo algo, como un if, con {% 00:03:28.106 --> 00:03:32.216 align:middle Ok, una pequeña mentira, existe una tercera sintaxis... 00:03:32.216 --> 00:03:36.276 align:middle pero es solo para comentarios: {#, el comentario... 00:03:36.596 --> 00:03:40.326 align:middle luego #}. Veamos si funciona! 00:03:40.716 --> 00:03:42.836 align:middle Abre la página, refresca y... 00:03:43.946 --> 00:03:51.406 align:middle Lo tenemos! Si miras el código fuente, puedes notar que no hay una estructura HTML aun. 00:03:51.866 --> 00:03:56.056 align:middle Es literalmente la estructura de nuestro template y nada más. 00:03:56.646 --> 00:03:58.766 align:middle Le vamos a agregar una estructura base en algunos minutos. 00:03:59.916 --> 00:04:02.256 align:middle Ok: tenemos una pregunta falsa. 00:04:02.256 --> 00:04:05.126 align:middle Creo que se merece algunas respuestas falsas! 00:04:06.296 --> 00:04:11.726 align:middle De regreso al controlador, en la acción show(), voy a pegar 3 respuestas falsas. 00:04:12.606 --> 00:04:17.246 align:middle Como he dicho, una vez que hayamos hablado sobre base de datos, vamos a hacer un query en lugar de esto. 00:04:17.636 --> 00:04:20.106 align:middle Pero para comenzar, esto va a funcionar de maravilla. 00:04:20.776 --> 00:04:25.086 align:middle Pasalas al template como la segunda variable llamada answers. 00:04:27.756 --> 00:04:30.466 align:middle De regreso al template. Como las podríamos imprimir? 00:04:30.676 --> 00:04:35.226 align:middle No podemos solo decir {{ answers }}... 00:04:35.636 --> 00:04:37.326 align:middle porque es un array. 00:04:37.856 --> 00:04:44.186 align:middle Lo que realmente queremos hacer es recorrer el array e imprimir cada respuesta individual. 00:04:45.316 --> 00:04:48.956 align:middle Para poder hacer esto, tenemos que hacer uso de nuestra primer función "haz algo" 00:04:49.916 --> 00:04:54.616 align:middle Se vería algo así: {% for answer in answers %}. 00:04:54.616 --> 00:04:59.756 align:middle y la mayoría de las etiquetas "haz algo" también tienen una etiqueta de cierre: {% endfor %}. 00:04:59.756 --> 00:05:06.546 align:middle Ponle una etiqueta ul alrededor y, dentro del ciclo, di <li> y {{ answer }}. 00:05:06.596 --> 00:05:09.606 align:middle Me fascina! 00:05:10.676 --> 00:05:12.296 align:middle Ok navegador, refresca! 00:05:12.876 --> 00:05:17.426 align:middle Funciona! Digo, está muy, muy feo... 00:05:17.426 --> 00:05:18.806 align:middle pero lo vamos a arreglar pronto. 00:05:18.806 --> 00:05:21.916 align:middle Dirígete a https://twig.symfony.com. 00:05:22.296 --> 00:05:26.186 align:middle Twig es su propia librería con su propia documentación. 00:05:26.926 --> 00:05:28.306 align:middle Aquí hay un montón de cosas útiles... 00:05:28.426 --> 00:05:33.296 align:middle Pero lo que realmente me gusta está aquí abajo: la referencia de Twig. 00:05:34.226 --> 00:05:36.096 align:middle Ves esas "Etiquetas" a la izquierda? 00:05:36.516 --> 00:05:40.626 align:middle Esas son todas las etiquetas "Haz algo" que existen. 00:05:41.266 --> 00:05:49.976 align:middle Asi es, siempre será {% y luego una de estas palabras - por ejemplo, for, if o {% set. 00:05:50.666 --> 00:05:56.626 align:middle si intentas {% pizza, yo voy a pensar que es gracioso, pero Twig te va a gritar. 00:05:57.146 --> 00:05:58.756 align:middle Twig también tiene funciones- 00:05:58.846 --> 00:06:00.056 align:middle como cualquier lenguaje... 00:06:05.376 --> 00:06:09.736 align:middle y una agradable funcionalidad llamada "tests", la cual es algo única. 00:06:10.446 --> 00:06:18.556 align:middle Esto te permite decir cosas como: if foo is defined o if number is even. 00:06:19.596 --> 00:06:23.956 align:middle pero la mayor y mejor sección es la de los "filtros". 00:06:24.516 --> 00:06:26.936 align:middle Los filtros son básicamente funciones... 00:06:27.186 --> 00:06:28.376 align:middle pero más hipster. 00:06:28.786 --> 00:06:30.056 align:middle Mira el filtro length. 00:06:31.516 --> 00:06:37.116 align:middle Los filtros funcionan como las "cadenas" en la linea de comandos: solo que aquí unimos la variable users 00:06:37.256 --> 00:06:39.956 align:middle en el filtro length, el cual solo los cuenta. 00:06:40.526 --> 00:06:42.946 align:middle El valor va de izquierda a derecha. 00:06:43.056 --> 00:06:45.156 align:middle Los filtros son en realidad funciones... 00:06:45.156 --> 00:06:47.016 align:middle con una sintaxis más amigable. 00:06:47.966 --> 00:06:51.166 align:middle usemos este filtro para imprimir el número de respuestas. 00:06:51.766 --> 00:06:56.456 align:middle Voy a poner algunos paréntesis, luego {{ answer|length }} 00:06:58.726 --> 00:06:59.996 align:middle Cuando lo probamos... 00:07:01.086 --> 00:07:02.496 align:middle De lujo! 00:07:02.616 --> 00:07:07.436 align:middle En este punto, ya eres apto para convertirte en un profesional de Twig. 00:07:08.526 --> 00:07:11.956 align:middle Solo hay una funcionalidad importante más de la cual hablar. 00:07:11.956 --> 00:07:15.076 align:middle y es una buena: herencia de templates. 00:07:15.776 --> 00:07:18.436 align:middle La mayoría de nuestras páginas van a compartir una estructura HTML 00:07:18.876 --> 00:07:22.046 align:middle Actualmente, no contamos con ninguna estructura HTML. 00:07:22.706 --> 00:07:32.956 align:middle Para hacer una, arriba del template, escribe {% extends 'base.html.twig' %}. 00:07:32.956 --> 00:07:39.076 align:middle Esto le dice a Twig que queremos usar el template base.html.twig como la estructura base. 00:07:39.646 --> 00:07:44.756 align:middle En este momento, este archivo es muy básico, pero es nuestro para modificarlo - y lo haremos pronto. 00:07:45.856 --> 00:07:47.826 align:middle Pero si refrescas la página... 00:07:48.326 --> 00:07:50.296 align:middle Huye! Un gran error! 00:07:51.016 --> 00:07:56.006 align:middle Un template que hereda de otro no puede incluir contenido fuera de los bloques de Twig. 00:07:57.406 --> 00:08:01.856 align:middle Cuando heredas de un template, estás diciendo que quieres que el contenido 00:08:01.856 --> 00:08:06.706 align:middle de este template vaya dentro de base.html.twig. 00:08:07.356 --> 00:08:08.536 align:middle pero... donde? 00:08:09.056 --> 00:08:11.466 align:middle debería Twig ponerlo arriba? 00:08:11.646 --> 00:08:12.976 align:middle Abajo? 00:08:12.976 --> 00:08:14.186 align:middle En algún lugar del medio? 00:08:14.716 --> 00:08:15.626 align:middle Twig no lo sabe! 00:08:16.396 --> 00:08:21.996 align:middle Estoy seguro que ya habías notado estos bloques, como stylesheets, title y body. 00:08:22.766 --> 00:08:27.896 align:middle Los bloques son "hoyos" donde un template hijo puede agregar contenido. 00:08:28.766 --> 00:08:36.386 align:middle No podemos simplemente heredar de base.html.twig: necesitamos decirle en cuál bloque debe ir el contenido. 00:08:36.976 --> 00:08:39.316 align:middle El bloque body es el lugar perfecto. 00:08:40.036 --> 00:08:41.226 align:middle Como hacemos esto? 00:08:41.616 --> 00:08:43.566 align:middle Pues sobreescribiendo el bloque. 00:08:46.096 --> 00:08:52.056 align:middle Arriba del contenido agrega {% block body %}, y después, {% endblock %}. 00:08:54.196 --> 00:08:54.786 align:middle Ahora intentalo. 00:08:56.256 --> 00:08:59.806 align:middle Funciona! No pareciera que es mucho... 00:09:00.096 --> 00:09:04.296 align:middle porque la estructura base es tan simple, pero si revisas el código fuente de la página, 00:09:04.386 --> 00:09:07.546 align:middle tenemos la estructura HTML básica. 00:09:08.316 --> 00:09:14.266 align:middle Por cierto, estos bloques en base.html.twig no son especiales: los puedes renombrar, 00:09:14.396 --> 00:09:17.256 align:middle moverlos de lugar, agregar o remover. 00:09:17.796 --> 00:09:22.336 align:middle Entre más bloques agregues, más flexible es tu template "hijo" 00:09:22.536 --> 00:09:24.586 align:middle para agregar contenido en lugares diferentes. 00:09:25.406 --> 00:09:27.526 align:middle La mayoría de los bloques existentes están vacíos... 00:09:27.896 --> 00:09:31.226 align:middle pero el bloque puede definir contenido por defecto. 00:09:31.546 --> 00:09:33.036 align:middle como el bloque title. 00:09:33.856 --> 00:09:34.986 align:middle Ves ese Welcome? 00:09:35.546 --> 00:09:38.916 align:middle No es sorpresa, ese es el título actual de la página. 00:09:39.446 --> 00:09:44.476 align:middle Como se encuentra dentro de un bloque, podemos sobreescribirlo en cualquier template. 00:09:45.006 --> 00:09:53.226 align:middle Mira esto: en donde sea dentro de show.html.twig, escribe {% block title %}, Question, 00:09:53.536 --> 00:09:57.496 align:middle imprime la pregunta, luego {% endblock %}. 00:09:57.496 --> 00:09:59.126 align:middle Esta vez cuando recargamos... 00:09:59.516 --> 00:10:01.526 align:middle tenemos un nuevo título! 00:10:02.586 --> 00:10:07.496 align:middle Ok, con Twig en nuestras espaldas, vamos a ver una de las funcionalidades más útiles de Symfony... 00:10:07.846 --> 00:10:12.366 align:middle y tu nuevo mejor amigo para depurar: Symfony profiler.