Chapters

32 Chapters | 4:16:27 |

01

¡Hola ÚLTIMA PILA!

4:01
02

Mapeador de activos

5:18
03

Módulos JavaScript

6:33
04

paquetes JavaScript de terceros

5:05
05

CSS

6:22
06

Tailwind CSS

9:24
07

Stimulus (estímulo)

6:45
08

Paquetes Symfony UX

6:47
09

Turbo Drive

5:42
10

Marcos Turbo

8:43
11

¡Popover!

11:44
12

Formularios de envío automático

3:37
13

Paginación y ordenación por columnas

8:04
14

Tablas de datos con Turbo Frames

7:03
15

Ver Transiciones

7:04
16

Notificaciones Toast

3:46
17

Tostadas más elegantes: Auto-cierre y Desvanecimiento

7:34
18

Turbo Streams: Actualiza cualquier elemento

5:23
19

Diálogo HTML para Módulos

13:18
20

¡Modal AJAX!

8:29
21

Fantástica UX modal con un estado de carga

8:04
22

Cosas extravagantes en el Éxito del Formulario Modal

8:30
23

¡Más con Modales divertidos! Editar y borrar

10:05
24

Respuestas Turbo Streams

4:24
25

Componentes Twig

10:52
26

Componente Twig modal

11:54
27

Componentes en vivo

11:47
28

Validación en tiempo real y campos de formulario dependientes

11:37
29

Pruebas, Parte 1: Twig y Componentes Vivos

5:32
30

Pruebas Parte 2: Pruebas funcionales

12:36
31

Rendimiento

9:16
32

Bonus: Más sobre Flowbite

11:08

> Symfony > 30 días con LAST Stack

Buy Access to Course

10.

Marcos Turbo

|

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Challenge

Next Challenge

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

13 Comments

Sort By

Login or Register to join the conversation

Joris-Mak 2 years ago

Copy this <turbo-frame id="planet-info> and then open planet/show.html.twig.

Little typo, id="planet-info">

1 |

weaverryan SFCASTS Joris-Mak 2 years ago

Got it! thanks! https://github.com/SymfonyCasts/30-days-last/commit/1d963c2a8dc16ea7aaa25da063724c680e07a1b1

|

Filip 2 years ago

How do I share the state of the page where clicked planet links gets planet content into left div? I don't see that url has been changed.

|

weaverryan SFCASTS Filip 2 years ago

Hey @Filip!

If you need this, then you need the URL to change. We show how to do that here - https://symfonycasts.com/screencast/last-stack/data-tables#advancing-the-frame

In this case, the only weird thing would be that the URL would change to something like /planets/5... and when you refresh, instead of seeing the homepage with a planet sidebar, you'd see the planet show page. So, if I had this requirement in this situation, I'd probably make my homepage able to have a planet id in it - e.g. /?planet=5 or /{planet} if you want. Then, I'd make my links on the sidebar go to this URL. And in the homepage template, I'd render a specific planet if the planet is in the URL. Then allowing the URL to change to /?planet=5 would work perfectly when you refresh.

Cheers!

|

apphancer 2 years ago

The links remain hidden for me when the content is loaded in the turbo frame using src despite using turbo-frame:block in the class for the div.
I've added the plugin in the tailwind.config.js as directed.

|

apphancer apphancer 2 years ago

I've managed to get it working now. I must admit that I took a break from this incredibly fantastic course during the holidays, and only today have I resumed it so it might have been something that stopped working due to that. I've tried asset-map:compile + tailwind:build -w and a good refresh of the page and it did the trick.

2 |

Ruslan apphancer 1 year ago

Thank you, I met the same issue too.

|

weaverryan SFCASTS apphancer 2 years ago

Hey @apphancer!

Ah, happy it's working now! The ol' "unplug it and plug it back in" fix 😆. And really happy you're enjoying the tutorial - I had a blast making it.

Cheers!

|

Brandon 2 years ago

I'm using Turbo frames, and I get weird behavior with the back button on the browser. I use turbo-advance to change the URL, and that works well enough, but when I go back, the navbar that isn't in the main frame stops working. Side note, I'm using Tailwind Nav drop down, and I was struggling to get it to close on a turbo visit, so I wrote a controller to simulate a 'click outside event', which works,well, but even if I don't use that controller, Turbo doesn't behave right with my navbar. I'd really like the back and forward buttons on the browser to work, but I also really like Turbo Frames, can I have both?

|

weaverryan SFCASTS Brandon 2 years ago

Hey @Brandon!

Hmm. Short answer: you can disable the turbo page cache. It's not a super important part of Turbo and it tends to be the toughest part to get right.

Long answer: you said you're using Tailwind Nav drop? What is that exactly - is it from Flowbite? What is the JavaScript that powers it? Basically, my guess is that the JavaScript isn't written in a way where it doesn't like being removed from the page then re-added (this is what happens when you hit Back: Turbo originally took a snapshot of the previous page when you first navigated off of it, then when you hit Back, it put that snapshotted HTML back). This is why having the JS in Stimulus is important. But, it is super frustrating that libraries (e.g. Bootstrap's js or Flowbite) are written in a way where they don't work without full page reloads (though Flowbite DOES have a Turbo-specific file... which I haven't tried, but should work - https://cdn.jsdelivr.net/npm/flowbite@2.2.1/dist/flowbite.turbo.js/ esm

Oh, and btw - this isn't an issue of Turbo frames, but of what happens when Turbo navigates in general - either via a Turbo frame with action="advance" or with a normal Turbo Drive navigation.

Let me know if this helps!

Cheers!

|

julien_bonnier 2 years ago

I must be very super old because I remember the frames (framesets) that came before iframes. Dang!

|

weaverryan SFCASTS julien_bonnier 2 years ago

Oh yea, framesets! I remember those too. But I don't remember (at least not anymore) frames before iframes. So iframes were the "new fancy thing at some point?). Lol

1 |

Victor SFCASTS julien_bonnier 2 years ago edited

Hey Julien,

Dang! 😅 Well, you know the whole history from the very beginning then I suppose, good enough to see the evolution of it 🙃

Cheers!

1 |

Symfony 6.4 Tailwind CSS 3 Flowbite 2 Stimulus 3 Turbo 7

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "4.x-dev", // 4.x-dev
        "doctrine/doctrine-bundle": "^2.10", // 2.12.x-dev
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.4.x-dev
        "doctrine/orm": "^2.16", // 2.18.x-dev
        "knplabs/knp-time-bundle": "dev-main", // dev-main
        "pagerfanta/doctrine-orm-adapter": "4.x-dev", // 4.x-dev
        "pagerfanta/twig": "4.x-dev", // 4.x-dev
        "symfony/asset": "6.4.*", // 6.4.x-dev
        "symfony/asset-mapper": "6.4.*", // 6.4.x-dev
        "symfony/console": "6.4.x-dev", // 6.4.x-dev
        "symfony/dotenv": "6.4.x-dev", // 6.4.x-dev
        "symfony/flex": "^2", // 2.x-dev
        "symfony/form": "6.4.x-dev", // 6.4.x-dev
        "symfony/framework-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/monolog-bundle": "^3.0", // dev-master
        "symfony/runtime": "6.4.x-dev", // 6.4.x-dev
        "symfony/security-csrf": "6.4.x-dev", // 6.4.x-dev
        "symfony/stimulus-bundle": "2.x-dev", // 2.x-dev
        "symfony/twig-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/ux-autocomplete": "2.x-dev", // 2.x-dev
        "symfony/ux-live-component": "2.x-dev", // 2.x-dev
        "symfony/ux-turbo": "2.x-dev", // 2.x-dev
        "symfony/ux-twig-component": "2.x-dev", // 2.x-dev
        "symfony/validator": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-link": "6.4.*", // 6.4.x-dev
        "symfony/yaml": "6.4.x-dev", // 6.4.x-dev
        "symfonycasts/dynamic-forms": "dev-main", // dev-main
        "symfonycasts/tailwind-bundle": "dev-main", // dev-main
        "tales-from-a-dev/flowbite-bundle": "dev-main", // dev-main
        "twig/extra-bundle": "^2.12|^3.0", // 3.x-dev
        "twig/twig": "^2.12|^3.0" // 3.x-dev
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.6.x-dev
        "phpunit/phpunit": "^9.5", // 9.6.x-dev
        "symfony/browser-kit": "6.4.*", // 6.4.x-dev
        "symfony/css-selector": "6.4.*", // 6.4.x-dev
        "symfony/debug-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/maker-bundle": "^1.51", // dev-main
        "symfony/panther": "^2.1", // v2.1.1
        "symfony/phpunit-bridge": "7.1.x-dev", // 7.1.x-dev
        "symfony/stopwatch": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-profiler-bundle": "6.4.x-dev", // 6.4.x-dev
        "zenstruck/browser": "1.x-dev", // 1.x-dev
        "zenstruck/foundry": "^1.36" // 1.x-dev
    }
}

What JavaScript libraries does this tutorial use?

// importmap.php

return [
  'app' => [
    'path' => './assets/app.js',
    'entrypoint' => true,
  ],
  'js-confetti' => [
    'version' => '0.11.0',
  ],
  '@hotwired/stimulus' => [
    'version' => '3.2.2',
  ],
  '@symfony/stimulus-bundle' => [
    'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
  ],
  'tom-select' => [
    'version' => '2.3.1',
  ],
  'tom-select/dist/css/tom-select.default.css' => [
    'version' => '2.3.1',
    'type' => 'css',
  ],
  '@hotwired/turbo' => [
    'version' => '7.3.0',
  ],
  'stimulus-popover' => [
    'version' => '6.2.0',
  ],
  'debounce' => [
    'version' => '1.2.1',
  ],
  'turbo-view-transitions' => [
    'version' => '0.3.0',
  ],
  'stimulus-use' => [
    'version' => '0.52.1',
  ],
  'flowbite' => [
    'version' => '2.2.1',
  ],
  '@popperjs/core' => [
    'version' => '2.11.8',
  ],
  'flowbite-datepicker' => [
    'version' => '1.2.6',
  ],
];

Previous Challenge

Next Challenge