WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:03.026 --> 00:00:03.536 align:middle Hey friends! 00:00:03.826 --> 00:00:07.216 align:middle I'm so glad you're here with me, because this tutorial is 00:00:07.216 --> 00:00:10.586 align:middle about something fun, cool, and quite powerful. 00:00:11.176 --> 00:00:15.416 align:middle No, it's not about a masked, crime-fighting feline with superpowers, 00:00:15.606 --> 00:00:17.456 align:middle though that would be pretty cool. 00:00:18.006 --> 00:00:21.826 align:middle This tutorial is all about the Netgen Layouts package. 00:00:22.476 --> 00:00:27.766 align:middle This library has existed for years, but I've only recently checked it out. 00:00:28.516 --> 00:00:35.166 align:middle Layouts is, very simply, a way to take any existing Symfony app and add the ability 00:00:35.166 --> 00:00:42.416 align:middle to dynamically rearrange how your pages are organized on the fly via an admin section... 00:00:42.796 --> 00:00:45.396 align:middle including adding new dynamic content. 00:00:46.086 --> 00:00:51.016 align:middle It's a really cool mixture of a normal Symfony app with controllers and Twig templates... 00:00:51.296 --> 00:00:56.556 align:middle plus content management features that you can opt into on a page-by-page basis. 00:00:57.126 --> 00:01:03.206 align:middle I particularly love the opt-in approach Why would you go to the trouble 00:01:03.206 --> 00:01:05.506 align:middle of using Layouts in your Symfony app? 00:01:06.186 --> 00:01:08.686 align:middle Well, not all projects need this. 00:01:09.016 --> 00:01:14.076 align:middle But if an admin user needs to be able to make changes to how your site 00:01:14.076 --> 00:01:17.586 align:middle and its content are organized, then this is for you. 00:01:18.236 --> 00:01:24.016 align:middle This includes being able to add and change collections of items - like featured products - 00:01:24.456 --> 00:01:29.926 align:middle right to the middle of an existing page, rearranging content from a Twig template higher 00:01:29.926 --> 00:01:35.306 align:middle or lower on the page, adding some completely new customizable content to a page 00:01:35.656 --> 00:01:43.166 align:middle or creating temporary landing pages and allowing all of this to be done by regular ol' users. 00:01:43.876 --> 00:01:48.416 align:middle You can leverage Layouts for a single page on your site, leaving everything else 00:01:48.416 --> 00:01:52.256 align:middle to be a normal Symfony app, or every page on your site can use it. 00:01:52.956 --> 00:01:56.826 align:middle Like I said, you opt into Layouts as you see fit. 00:01:57.596 --> 00:02:02.916 align:middle I could go on and on, but it's probably best to see the Layouts magic in action. 00:02:03.546 --> 00:02:07.706 align:middle It's super fun to play with, so you should definitely download the course code 00:02:07.746 --> 00:02:10.116 align:middle from this page and code along with me. 00:02:10.836 --> 00:02:16.116 align:middle When you unzip the file, you'll find a start/ directory with the same code that you see here. 00:02:16.846 --> 00:02:22.186 align:middle Pop open this README.md file for all those sweet setup details. 00:02:23.006 --> 00:02:27.756 align:middle I've already gone over to my terminal, installed my node assets via yarn install 00:02:28.136 --> 00:02:32.376 align:middle and ran yarn watch to build my CSS and JS files. 00:02:32.856 --> 00:02:37.296 align:middle But that's all just to make our app and this tutorial more realistic. 00:02:37.646 --> 00:02:44.246 align:middle Layouts doesn't require us to use Encore and it doesn't mess with our CSS and JS at all. 00:02:45.006 --> 00:02:51.016 align:middle Anyway, the last step in the README is to open another terminal tab and run symfony serve -d 00:02:51.506 --> 00:02:56.686 align:middle to start a web server at 127.0.0.1:8000. 00:02:57.566 --> 00:02:59.486 align:middle I'll cheat and click that. 00:03:00.086 --> 00:03:05.286 align:middle And... hello new side project: it's Bark & Bake! 00:03:05.896 --> 00:03:11.446 align:middle Listen, dogs are pretty tired of our lazy attempts at canine cuisine. 00:03:12.006 --> 00:03:12.816 align:middle Crunchy kibble? 00:03:13.046 --> 00:03:14.176 align:middle No thanks. 00:03:14.766 --> 00:03:20.086 align:middle So we've built this site to inspire people to be the best chefs they can be... 00:03:20.406 --> 00:03:21.316 align:middle for their dogs. 00:03:22.116 --> 00:03:26.986 align:middle This is a pretty traditional Symfony app with a few controllers and some Twig templates. 00:03:27.366 --> 00:03:33.246 align:middle It also has two entities: A User entity for security, and a Recipe entity. 00:03:34.016 --> 00:03:39.956 align:middle On the site, we have a homepage that shows the latest and greatest recipes, a recipe section, 00:03:40.386 --> 00:03:45.296 align:middle and the ability to open a specific recipe so we can follow along in the kitchen. 00:03:45.816 --> 00:03:46.846 align:middle That's it. 00:03:47.546 --> 00:03:51.136 align:middle This skills stuff isn't implemented at all yet. 00:03:51.706 --> 00:03:54.616 align:middle So, other than being able to edit the details 00:03:54.616 --> 00:03:59.556 align:middle of each recipe via an admin area, this is a static site! 00:04:00.106 --> 00:04:01.516 align:middle Time to change that! 00:04:02.086 --> 00:04:04.036 align:middle Soon, we'll be able to take this homepage - 00:04:04.186 --> 00:04:07.236 align:middle which is written via a normal Symfony controller and template... 00:04:07.606 --> 00:04:13.686 align:middle as you can see here - and use layouts to dynamically insert content and rearrange things! 00:04:14.466 --> 00:04:16.156 align:middle So let's get Layouts installed. 00:04:16.676 --> 00:04:22.816 align:middle Find your terminal and run: composer require netgen/layouts-standard This will download 00:04:22.816 --> 00:04:26.276 align:middle several packages, including a couple of new bundles. 00:04:26.816 --> 00:04:33.646 align:middle When it finishes, run git status to see that it also gave us two new route files, 00:04:33.986 --> 00:04:37.526 align:middle which add some admin routes that we're going to see in a few minutes. 00:04:38.336 --> 00:04:42.466 align:middle Layouts also requires some extra database tables where it stores info 00:04:42.466 --> 00:04:47.526 align:middle about the layout's we'll create as well as any custom content we're putting into them. 00:04:48.276 --> 00:04:51.636 align:middle We'll see all of that in the Layouts admin section in a minute. 00:04:52.326 --> 00:04:58.386 align:middle To add the needed tables, scroll up and copy this nifty doctrine:migrations:migrate line. 00:04:59.186 --> 00:05:00.056 align:middle This is kind of cool. 00:05:00.616 --> 00:05:03.686 align:middle The layouts packages comes with migrations... 00:05:03.986 --> 00:05:05.806 align:middle and this executes those. 00:05:06.476 --> 00:05:11.396 align:middle Paste this command, but if you're using the Docker database setup that we described 00:05:11.396 --> 00:05:17.086 align:middle in the README - I am - then modify this to start with symfony console 00:05:17.476 --> 00:05:23.866 align:middle so that it can inject the Docker environment variables that point to our database: And... 00:05:24.346 --> 00:05:31.056 align:middle perfect! One caveat is that these migrations are written for MySQL specifically. 00:05:31.646 --> 00:05:34.116 align:middle Layouts only supports MySQL right now. 00:05:34.116 --> 00:05:40.156 align:middle For the most part, Layouts is going to entirely manage all of the tables that we just added: 00:05:40.546 --> 00:05:42.846 align:middle we don't need to do anything with them. 00:05:43.476 --> 00:05:48.566 align:middle But now that those exist in our database, if we were to add a new entity 00:05:48.746 --> 00:05:50.996 align:middle and then generate a migration for that... 00:05:51.446 --> 00:05:55.816 align:middle the migration would try to drop all of the Netgen Layouts tables. 00:05:56.546 --> 00:06:01.526 align:middle Watch! Run: symfony console doctrine:schema:update -- dump-sql -- 00:06:01.646 --> 00:06:07.516 align:middle complete This mimics generating a migration, and... 00:06:07.706 --> 00:06:11.546 align:middle yup! It wants to drops all of the Layouts tables. 00:06:12.446 --> 00:06:18.556 align:middle To fix this, head into config/packages/doctrine.yaml and, under dbal, 00:06:18.806 --> 00:06:23.006 align:middle add schema_filter, and pass a regular expression... 00:06:23.586 --> 00:06:26.346 align:middle which you can copy from the Layouts documentation. 00:06:26.946 --> 00:06:33.206 align:middle Perfect! With that, if we go back and run the doctrine:schema:update command again... 00:06:33.846 --> 00:06:37.896 align:middle It's clean, except for doctrine_migration_versions. 00:06:38.216 --> 00:06:44.406 align:middle But, no worries: the make:migration command is smart enough not to drop its own table. 00:06:45.286 --> 00:06:50.496 align:middle Ok, Netgen Layouts is installed and it has the database tables it needs. 00:06:51.346 --> 00:06:53.536 align:middle If we go back and refresh our site now... 00:06:54.096 --> 00:06:55.386 align:middle congratulations! 00:06:55.726 --> 00:06:58.106 align:middle Absolutely nothing is different. 00:06:58.676 --> 00:07:02.766 align:middle Though, we do have a cute little web debug toolbar icon 00:07:02.766 --> 00:07:04.486 align:middle down here that we'll talk about later. 00:07:05.246 --> 00:07:09.486 align:middle This, again, is one of the great things about Layouts. 00:07:09.946 --> 00:07:13.676 align:middle Just installing it does not take over your app. 00:07:14.366 --> 00:07:17.986 align:middle Layouts is not being used at all to render this page. 00:07:18.966 --> 00:07:24.096 align:middle Next, let's dive into the Layouts admin area to create our first layout. 00:07:24.716 --> 00:07:29.026 align:middle Then, we'll see how that interacts with the real pages on our site.