Chapters

32 Chapters | 4:16:27 |

01

Hello LAST Stack!

4:01
02

Asset Mapper

5:18
03

JavaScript Modules

6:33
04

3rd Party JavaScript Packages

5:05
05

CSS

6:22
06

Tailwind CSS

9:24
07

Stimulus

6:45
08

Symfony UX Packages

6:47
09

Turbo Drive

5:42
10

Turbo Frames

8:43
11

Popover!

11:44
12

Auto-Submitting Forms

3:37
13

Pagination & Column Sorting

8:04
14

Data Tables with Turbo Frames

7:03
15

View Transitions

7:04
16

Toast Notifications

3:46
17

Fancier Toasts: Auto-close & Fading

7:34
18

Turbo Streams: Update any Element

5:23
19

HTML dialog for Modals

13:18
20

AJAX Modal!

8:29
21

Fantastic Modal UX with a Loading State

8:04
22

Fancy things on Modal Form Success

8:30
23

More with fun Modals! Editing & Deleting

10:05
24

Turbo Stream Responses

4:24
25

Twig Components

10:52
26

Modal Twig Component

11:54
27

Live Components

11:47
28

Real-Time Validation & Dependent Form Fields

11:37
29

Testing Part 1: Twig & Live Components

5:32
30

Testing Part 2: Functional Testing

12:36
31

Performance

9:16
32

Bonus: More on Flowbite

11:08

> Symfony > 30 Days with LAST Stack

Buy Access to Course

16.

Toast Notifications

|

|

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 Chapter

Next Chapter

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

10 Comments

Sort By

Login or Register to join the conversation

Fedale 2 years ago

The problem with "code blocks" (and with this comment I refer to Flowbite Toast component) is that it is difficult to find.
I expect to find separately, maybe in a comment (as done by ToG for first version of _flashes.html.twig ), but there is not.
So my second idea is to search in "Course code"... but where? There are 2 folders: "start" and "finish". I naturally go inside "start" because I think that "start" is the "actual-state-of-code-at-the-start-of-the-lesson".
Moreover I am not sure that in "finish" directory contains the current version of the script I need. I am not sure, for example, that content of _flashes.html.twig is the same as in the video.
Let's say the _flashes.htm.twig will be also modified in lesson 23, the question is: which version of that file will I find in "finish" directory? Version in lesson 16 or the modified one in lesson 23?

Cheers
Danilo

|

sadikoff Fedale 2 years ago edited

Hey @Fedale

So about "Course code" you see there 2 directories

start/ - the start point of selected course its like a PRE chapter 1 state
finish/ - the end point e.g. what you will get after passing all chapters

and the current version of any file you can get from latest added code block related to that file, so for _flashes.html.twig it will be that link https://symfonycasts.com/screencast/last-stack/toast#codeblock-035447cbfc and you can expand it to show all lines of code

Cheers!

|

Fedale Fedale 2 years ago

Just to add a tiny note: copying relevant code for _flashes.html.twig contained in "finish" directory, I've added also data-closeable-auto-close-value="5000" ... but this attirbute is exaplined in the next lesson!

|

julien_bonnier 2 years ago

Hello,

It's kind of a pain in the butt when huge blocks of code are pasted and the pasted code is not in the "script". :(

Would anyone be so nice to fix it?

Cheers,

Ju

|

Victor SFCASTS julien_bonnier 2 years ago edited

Hey Julien,

I'm sorry about that, my bad! It's still on my list, will add it till the end of the day I think.

Cheers!

|

julien_bonnier Victor 2 years ago edited

Lol thanks @Victor

|

Victor SFCASTS julien_bonnier 2 years ago

Hey Julien,

No problem! Code blocks may come out with some delays, but eventually all chapters will have code blocks :)

Cheers!

|

ToG 2 years ago

My flash messages are appearing off the bottom of the page, but then I can't see all the classes you're using in the exmaple. Please can someone share the actual content of _flashes.html.twig at this point, as the finihsed version is a lot more complex?

|

ToG ToG 2 years ago edited

Ignore me. Fixed it. Was because I'd forgotten to run ./bin/console tailwind:build -w since restaring my laptop.

The fill code flashes up very briefly and is…

{% for message in app.flashes('success') %}
<div class="fixed bottom-0 right-0 m-4 p-4 bg-green-500 text-white rounded shadow">
    {{ message }}
</div>
{% endfor %}

2 |

Victor SFCASTS ToG 2 years ago

Hey ToG,

Yeah, something to remember... and also a good idea to try to restart it first if you have any weird behavior :)

Thanks for sharing the solution with others!

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 Chapter

Next Chapter