Chapters

20 Chapters | 1:53:05 |

01

Configurando nuestra App Symfony

4:34
02

Conociendo nuestro pequeño proyecto

4:14
03

Rutas, controladores y respuestas

6:17
04

Recetas Flex Mágicas

5:40
05

Twig y plantillas

8:12
06

Herencia de plantillas Twig

3:50
07

Depurando con el Asombroso Perfilador

4:28
08

Creación de rutas API JSON

7:17
09

Los Servicios: La columna vertebral de todo

7:47
10

Crear tu propio Servicio

7:04
11

Rutas más sofisticadas: Requisitos, comodines y más

6:56
12

Generar URLs

5:31
13

CSS y JavaScript con Asset Mapper

6:17
14

Tailwind CSS

6:15
15

Twig Parciales y para bucles

2:44
16

Enums PHP

3:30
17

Métodos del modelo inteligente y dinamización del diseño

4:44
18

Stimulus: Escribir JavaScript profesional

8:00
19

Turbo: Tu aplicación de una sola página

4:32
20

Maker Bundle: ¡Generemos algo de código!

5:13

> Symfony 7 > Codificación cósmica con Symfony 7

15.

Twig Parciales y para bucles

Autoplay

Acabamos de renovar el diseño de nuestro sitio... lo que significa que hemos actualizado nuestras plantillas para incluir elementos HTML con un montón de clases de Tailwind. ¿El resultado? Un sitio agradable a la vista.

En algunas partes de las plantillas, las cosas siguen siendo dinámicas: tenemos código Twig para imprimir el capitán y la clase. Pero en otras partes, todo está codificado. Y... esto es bastante típico: un desarrollador frontend puede codificar el sitio en HTML y Tailwind... pero dejarte a ti que lo hagas dinámico y le des vida.

Organizar en una Plantilla Parcial

En la parte superior de homepage.html.twig, este largo elemento <aside> es la barra lateral. Está bien que este código viva en homepage.html.twig... ¡pero ocupa mucho espacio! ¿Y si queremos reutilizar esta barra lateral en otra página?

Una gran característica de Twig es la posibilidad de tomar "trozos" de HTML y aislarlos en sus propias plantillas para que puedas reutilizarlos. Se llaman parciales de plantilla... ya que contienen el código de sólo una parte de la página.

Copia este código, y en el directorio main/ -aunque esto puede ir en cualquier sitio- añade un nuevo archivo llamado _shipStatusAside.html.twig. Pega dentro.

            Copy Code

                        36 lines
            |
            templates/main/_shipStatusAside.html.twig
        
            <aside
        
                class="pb-8 lg:pb-0 lg:w-[411px] shrink-0 lg:block lg:min-h-screen text-white transition-all overflow-hidden px-8 border-b lg:border-b-0 lg:border-r border-white/20"
        
            >
        
                <div class="flex justify-between mt-11 mb-7">
        
                    <h2 class="text-[32px] font-semibold">My Ship Status</h2>
        
                    <button>
        
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 448 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path fill="#fff" d="M384 96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V96zM9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L109.3 224 288 224c17.7 0 32 14.3 32 32s-14.3 32-32 32l-178.7 0 73.4 73.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-128-128z"/></svg>
        
                    </button>
        
                </div>
        
                <div>
        
                    <div class="flex flex-col space-y-1.5">
        
                        <div class="rounded-2xl py-1 px-3 flex justify-center w-32 items-center" style="background: rgba(255, 184, 0, .1);">
        
                            <div class="rounded-full h-2 w-2 bg-amber-400 blur-[1px] mr-2"></div>
        
                            <p class="uppercase text-xs">in progress</p>
        
                        </div>
        
                        <h3 class="tracking-tight text-[22px] font-semibold">
        
                            <a class="hover:underline" href="{{ path('app_starship_show', {
        
                                id: myShip.id
        
                            }) }}">{{ myShip.name }}</a>
        
                        </h3>
        
                    </div>
        
                    <div class="flex mt-4">
        
                        <div class="border-r border-white/20 pr-8">
        
                            <p class="text-slate-400 text-xs">Captain</p>
        
                            <p class="text-xl">{{ myShip.captain }}</p>
        
                        </div>
        
                        <div class="pl-8">
        
                            <p class="text-slate-400 text-xs">Class</p>
        
                            <p class="text-xl">{{ myShip.class }}</p>
        
                        </div>
        
                    </div>
        
                </div>
        
            </aside>

De vuelta en homepage.html.twig, borra eso, y luego inclúyelo con {{ - para que diga algo de sintaxis - include() y el nombre de la plantilla:main/_shipStatusAside.html.twig.

            Copy Code

                            Show All Lines

                        54 lines
            |
            templates/main/homepage.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
                <main class="flex flex-col lg:flex-row">
        
                    {{ include('main/_shipStatusAside.html.twig') }}
        
                Show Lines

                                                    // ... lines 8 - 51
                            
                </main>
        
            {% endblock %}

¡Pruébalo! Y... ¡no hay cambios! La declaración include() es sencilla:

Renderiza esta plantilla y dale las mismas variables que yo tengo

Si te preguntas por qué he antepuesto un guión bajo a la plantilla... ¡no hay motivo! Es sólo una convención que me ayuda a saber que esta plantilla contiene sólo una parte de la página.

Haciendo un bucle sobre las naves en Twig

En la plantilla de la página de inicio, podemos centrarnos en la lista de naves de abajo, que es esta zona. Ahora mismo, sólo hay una nave... y está codificada. Nuestra intención es listar todas las naves que estamos reparando actualmente. Y ya tenemos una variable ships que estamos utilizando en la parte inferior: es una matriz de objetos Starship.

Así que, por primera vez en Twig, ¡tenemos que hacer un bucle sobre una matriz! Para ello, eliminaré este comentario, y diré {% -así que la etiqueta hacer algo- y luegofor ship in ships. ships es la variable de matriz que ya tenemos y ship es el nuevo nombre de la variable en el bucle que representa un único objetoStarship. En la parte inferior, añade {% endfor %}.

            Copy Code

                            Show All Lines

                        54 lines
            |
            templates/main/homepage.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
                <main class="flex flex-col lg:flex-row">
        
                Show Lines

                                                    // ... lines 7 - 8
                            
                    <div class="px-12 pt-10 w-full">
        
                Show Lines

                                                    // ... lines 10 - 13
                            
                        <div class="space-y-5">
        
                            {% for ship in ships %}
        
                Show Lines

                                                    // ... lines 16 - 43
                            
                            {% endfor %}
        
                        </div>
        
                Show Lines

                                                    // ... lines 46 - 50
                            
                    </div>
        
                </main>
        
            {% endblock %}

Y ya... cuando lo probamos, ¡obtenemos tres naves codificadas! ¡Eso es una mejora!

A continuación: es hora de un giro argumental que nos llevará a crear un enum PHP.

Symfony 7

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "php-cs-fixer/shim": "^3.46", // v3.46.0
        "phpdocumentor/reflection-docblock": "^5.3", // 5.3.0
        "phpstan/phpdoc-parser": "^1.25", // 1.25.0
        "symfony/asset": "7.0.*", // v7.0.3
        "symfony/asset-mapper": "7.0.*", // v7.0.2
        "symfony/console": "7.0.*", // v7.0.2
        "symfony/dotenv": "7.0.*", // v7.0.2
        "symfony/flex": "^2", // v2.4.3
        "symfony/framework-bundle": "7.0.*", // v7.0.2
        "symfony/monolog-bundle": "^3.0", // v3.10.0
        "symfony/property-access": "7.0.*", // v7.0.0
        "symfony/property-info": "7.0.*", // v7.0.0
        "symfony/runtime": "7.0.*", // v7.0.0
        "symfony/serializer": "7.0.*", // v7.0.2
        "symfony/stimulus-bundle": "^2.13", // v2.13.3
        "symfony/twig-bundle": "7.0.*", // v7.0.0
        "symfony/ux-turbo": "^2.13", // v2.13.2
        "symfony/yaml": "7.0.*", // v7.0.0
        "symfonycasts/tailwind-bundle": "^0.5.0", // v0.5.0
        "twig/extra-bundle": "^2.12|^3.0", // v3.8.0
        "twig/twig": "^2.12|^3.0" // v3.8.0
    },
    "require-dev": {
        "symfony/debug-bundle": "7.0.*", // v7.0.0
        "symfony/maker-bundle": "^1.52", // v1.53.0
        "symfony/stopwatch": "7.0.*", // v7.0.0
        "symfony/web-profiler-bundle": "7.0.*" // v7.0.2
    }
}

Previous Challenge

Next Challenge

Twig Parciales y para bucles

Share this awesome video!

Organizar en una Plantilla Parcial

Haciendo un bucle sobre las naves en Twig

Comments

Delete comment?

What PHP libraries does this tutorial use?

	<aside
	class="pb-8 lg:pb-0 lg:w-[411px] shrink-0 lg:block lg:min-h-screen text-white transition-all overflow-hidden px-8 border-b lg:border-b-0 lg:border-r border-white/20"
	>
	<div class="flex justify-between mt-11 mb-7">
	<h2 class="text-[32px] font-semibold">My Ship Status</h2>
	<button>
	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 448 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path fill="#fff" d="M384 96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V96zM9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L109.3 224 288 224c17.7 0 32 14.3 32 32s-14.3 32-32 32l-178.7 0 73.4 73.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-128-128z"/></svg>
	</button>
	</div>

	<div>
	<div class="flex flex-col space-y-1.5">
	<div class="rounded-2xl py-1 px-3 flex justify-center w-32 items-center" style="background: rgba(255, 184, 0, .1);">
	<div class="rounded-full h-2 w-2 bg-amber-400 blur-[1px] mr-2"></div>
	<p class="uppercase text-xs">in progress</p>
	</div>
	<h3 class="tracking-tight text-[22px] font-semibold">
	<a class="hover:underline" href="{{ path('app_starship_show', {
	id: myShip.id
	}) }}">{{ myShip.name }}</a>
	</h3>
	</div>
	<div class="flex mt-4">
	<div class="border-r border-white/20 pr-8">
	<p class="text-slate-400 text-xs">Captain</p>
	<p class="text-xl">{{ myShip.captain }}</p>
	</div>

	<div class="pl-8">
	<p class="text-slate-400 text-xs">Class</p>
	<p class="text-xl">{{ myShip.class }}</p>
	</div>
	</div>
	</div>
	</aside>

Show Lines	// ... lines 1 - 4
	{% block body %}
	<main class="flex flex-col lg:flex-row">
	{{ include('main/_shipStatusAside.html.twig') }}
Show Lines	// ... lines 8 - 51
	</main>
	{% endblock %}