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

08.

Symfony UX Packages

|

|

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

10 Comments

Sort By

Login or Register to join the conversation

CandyVillage 2 years ago edited

Hello,

Thank you for the tutorial. I following it and encountered a problem when trying to make the autocomplete from the Type Form.
I've got the same configurations as the ones described in the video and the builder contains :

            ->add('planet', null, [
                'choice_label' => 'name',
                'placeholder' => 'Choose a planet',
                'autocomplete' => true,
            ])

But, when I refresh the page, nothing happens.
The files tom-select.default.css and tom-select.index.js are loaded (I can see then in the network tab).

Also, if I paste the following directly in the input field via the inspector, it's working perfectly :
data-controller="symfony--ux-autocomplete--autocomplete" data-symfony--ux-autocomplete--autocomplete-max-results-value="10" data-symfony--ux-autocomplete-no-results-found-text-value="No results found" data-symfony--ux-autocomplete--autocomplete-no-more-results-text-value="No more results" data-symfony--ux-autocomplete--autocomplete-preload-value="focus"

Do you know where the problem could come from ? Thank you for your help.

|

CandyVillage CandyVillage 2 years ago

In fact, there is no problem, I wasn't looking at the good page.
Sorry for the bothering.
If you want (and if it is possible), you can delete my messages.

|

Victor SFCASTS CandyVillage 2 years ago

Hey CandyVillage,

No problem, glad you found a good page for you! You can also share the link to it in the comments - I think it might be useful for others ;)

Cheers!

|

fbourigault 2 years ago

Great course! Thank you!

I have two questions about your PhpStorm setup :

How do you get the Stimulus controllers completion ?
How do you get the nice directories icons on public, config, etc...

|

hrprakash fbourigault 2 years ago

https://plugins.jetbrains.com/plugin/18940-stimulus/versions/stable

|

weaverryan SFCASTS hrprakash 2 years ago

Yup! And for the icons https://plugins.jetbrains.com/plugin/10044-atom-material-icons - I like having them :)

|

Adam-A weaverryan 2 years ago

Hi Ryan, is your HTML color scheme another PhpStorm plugin?? Looks nicer than my Darcula default.

|

Victor SFCASTS Adam-A 2 years ago

Hey Adam,

Ryan still uses the Darcula PhpStorm theme in the video, but probably some extra PhpStorm plugins make it look a bit different. For example, "Rainbow Brackets" and "Atom Material Icons" ones. Otherwise, it might be a PhpStorm different version that may have slightly different design changes too.

Cheers!

|

Adam-A Victor 2 years ago

Thanks Victor. Rainbow Brackets...thats what was missing :)

|

Victor SFCASTS Adam-A 2 years ago

Hey Adam,

Perfect, glad we found the missing piece :) Actually, that's my favorite plugin so far, after those that provide autocomplete of course :D

Cheers!

|

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