WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:00.036 --> 00:00:04.486 align:middle If you download the course code from the page where you're watching this video, 00:00:04.796 --> 00:00:07.436 align:middle after unzipping, you'll find a start/ directory 00:00:07.546 --> 00:00:12.136 align:middle that contains the same brand new Symfony 6 app that we created earlier. 00:00:12.876 --> 00:00:19.446 align:middle You don't actually need that code, but it does contain one extra directory called tutorial/, 00:00:19.896 --> 00:00:20.936 align:middle like I have here. 00:00:21.866 --> 00:00:23.916 align:middle This holds some files that we're about to use. 00:00:24.746 --> 00:00:30.076 align:middle So let's talk about our next goal: to make this site look like a real site... 00:00:30.496 --> 00:00:33.446 align:middle instead of looking like something I designed myself. 00:00:33.816 --> 00:00:39.406 align:middle And that means we need a true HTML layout that brings in some CSS. 00:00:40.506 --> 00:00:43.956 align:middle We know that our layout file is base.html.twig... 00:00:44.446 --> 00:00:49.636 align:middle and there's also a base.html.twig file in the new tutorial/ directory. 00:00:50.516 --> 00:00:51.166 align:middle Copy that... 00:00:51.676 --> 00:00:54.746 align:middle paste it into templates, and override the original. 00:00:56.336 --> 00:01:00.746 align:middle Before we look at that, also copy the three .png files 00:01:01.026 --> 00:01:03.246 align:middle and put those into the public/ directory... 00:01:03.536 --> 00:01:06.236 align:middle so that our users can access them. 00:01:07.476 --> 00:01:08.866 align:middle Beautiful. 00:01:08.866 --> 00:01:12.076 align:middle Open up the new base.html.twig file. 00:01:12.806 --> 00:01:14.636 align:middle There's nothing special here. 00:01:15.226 --> 00:01:21.056 align:middle We bring in some external CSS files from some CDNs for Bootstrap and FontAwesome. 00:01:21.986 --> 00:01:27.866 align:middle By the end of this tutorial, we'll refactor this into a fancier way of handling CSS... 00:01:28.106 --> 00:01:31.226 align:middle but for right now, this will work great. 00:01:32.046 --> 00:01:34.876 align:middle But otherwise, everything is still hardcoded. 00:01:35.156 --> 00:01:39.206 align:middle We have some hardcoded navigation, the same block body... 00:01:39.646 --> 00:01:41.146 align:middle and a hardcoded footer. 00:01:41.146 --> 00:01:43.756 align:middle Let's go see what it looks like. 00:01:44.186 --> 00:01:45.326 align:middle Refresh and woo! 00:01:45.786 --> 00:01:49.096 align:middle Well, not perfect, but better! 00:01:50.146 --> 00:01:55.186 align:middle The tutorial/ directory also holds an app.css file with custom CSS. 00:01:56.466 --> 00:02:01.186 align:middle To make this publicly available so that our user's browser can download it, 00:02:01.456 --> 00:02:04.866 align:middle it needs to live somewhere in the public/ directory. 00:02:05.386 --> 00:02:09.116 align:middle But it doesn't matter where or how you organize things inside. 00:02:09.816 --> 00:02:11.676 align:middle Let's create a styles/ directory... 00:02:13.116 --> 00:02:15.306 align:middle and then copy app.css... 00:02:15.716 --> 00:02:16.756 align:middle and paste it there. 00:02:18.776 --> 00:02:22.406 align:middle Back in base.html.twig, head to the top. 00:02:24.876 --> 00:02:30.846 align:middle After all the external CSS files, let's add a link tag for our app.css. 00:02:31.406 --> 00:02:35.206 align:middle So <link rel="stylesheet" and href="". 00:02:36.226 --> 00:02:42.486 align:middle Because the public/ directory is our document root, to refer to a CSS or image file there, 00:02:42.486 --> 00:02:46.466 align:middle the path should be with respect to that directory. 00:02:47.126 --> 00:02:52.076 align:middle So this will be /styles/app.css. 00:02:52.116 --> 00:02:52.846 align:middle Let's check it. 00:02:53.206 --> 00:02:54.856 align:middle Refresh now and... 00:02:55.186 --> 00:02:56.336 align:middle even better! 00:02:57.206 --> 00:02:58.636 align:middle I want you to notice something. 00:02:59.116 --> 00:03:07.466 align:middle So far, Symfony is not involved at all in how we organize or use images or CSS files. 00:03:07.846 --> 00:03:13.046 align:middle Nope. Our setup is dead simple: we put things in the public/ directory... 00:03:13.446 --> 00:03:15.736 align:middle then refer to them with their paths. 00:03:16.236 --> 00:03:21.366 align:middle But does Symfony have any cool features to help work with CSS and JavaScript? 00:03:21.816 --> 00:03:22.706 align:middle Absolutely. 00:03:23.146 --> 00:03:26.246 align:middle It's called Webpack Encore and Stimulus. 00:03:26.526 --> 00:03:29.946 align:middle And we'll talk about both of those towards the end of the tutorial. 00:03:30.486 --> 00:03:35.516 align:middle But even in this simple setup - where we just put files in public/ and point to them - 00:03:36.036 --> 00:03:40.356 align:middle Symfony does have one minor feature: the asset() function. 00:03:41.206 --> 00:03:49.266 align:middle It works like this: instead of using /styles/app.css, say {{ asset() }} and then, 00:03:49.446 --> 00:03:52.726 align:middle inside quotes, move our path there... 00:03:53.246 --> 00:03:55.076 align:middle but without the opening "/". 00:03:55.076 --> 00:03:59.226 align:middle So the path is still relative to the public/ directory... 00:03:59.276 --> 00:04:02.006 align:middle you just don't need to include the first "/". 00:04:02.006 --> 00:04:05.276 align:middle Before we talk about what this does... 00:04:05.746 --> 00:04:07.196 align:middle let's go see if it works. 00:04:07.676 --> 00:04:08.936 align:middle Refresh and... 00:04:09.786 --> 00:04:10.886 align:middle it doesn't! 00:04:11.286 --> 00:04:17.606 align:middle Error: Unknown function: did you forget to run composer require symfony/asset. 00:04:18.406 --> 00:04:20.626 align:middle I keep saying that Symfony starts small... 00:04:21.066 --> 00:04:24.286 align:middle and then you install things as you need them. 00:04:24.746 --> 00:04:30.736 align:middle Apparently, this asset() function comes from a part of Symfony that we don't have yet! 00:04:31.336 --> 00:04:33.186 align:middle But getting it is easy. 00:04:33.646 --> 00:04:38.846 align:middle Copy this composer require command, spin over to your terminal and run it: 00:04:40.236 --> 00:04:44.966 align:middle This is a pretty simple install: it downloads just this one package... 00:04:45.476 --> 00:04:47.706 align:middle and there are no recipes. 00:04:49.106 --> 00:04:50.646 align:middle But when we try the page now... 00:04:51.776 --> 00:04:55.416 align:middle it works! Check out the HTML source. 00:04:57.166 --> 00:05:04.666 align:middle Interesting: the link tag's href is still, literally, /styles/app.css. 00:05:05.606 --> 00:05:07.996 align:middle That's exactly what we had before! 00:05:08.536 --> 00:05:12.296 align:middle So what the heck is this asset() function doing? 00:05:12.786 --> 00:05:14.026 align:middle The answer is... 00:05:14.266 --> 00:05:17.996 align:middle not much. But it's still a good idea to use. 00:05:18.576 --> 00:05:21.096 align:middle The asset() function gives you two features. 00:05:21.206 --> 00:05:26.346 align:middle First, imagine you deploy to a sub-directory of a domain. 00:05:26.826 --> 00:05:31.206 align:middle Like, the homepage lives at https://example.com/mixed-vinyl. 00:05:32.186 --> 00:05:37.296 align:middle If that were the case, then in order for our CSS to work, the href would need 00:05:37.296 --> 00:05:42.916 align:middle to be /mixed-vinyl/styles/app.css. 00:05:42.996 --> 00:05:48.696 align:middle In this situation, the asset() function would detect the sub-directory automatically 00:05:49.076 --> 00:05:50.926 align:middle and add that prefix for you. 00:05:52.066 --> 00:05:55.916 align:middle The second - and more important thing that the asset() function does - 00:05:56.246 --> 00:06:00.116 align:middle is allow you to easily switch to a CDN later. 00:06:00.786 --> 00:06:05.196 align:middle Because this path is now going through the asset() function, we could, 00:06:05.376 --> 00:06:08.326 align:middle via a configuration file, say: Hey Symfony! 00:06:08.586 --> 00:06:13.366 align:middle When you output this path, please prefix it with the URL to my CDN. 00:06:14.536 --> 00:06:21.336 align:middle This means that, when we load the the page, instead of href="/styles/app.css, 00:06:21.666 --> 00:06:28.976 align:middle it would be something like https://mycdn.com/styles/app.css. 00:06:30.016 --> 00:06:34.036 align:middle So the asset() function might not be doing anything you need today, 00:06:34.566 --> 00:06:39.776 align:middle but anytime you reference a static file - whether it's a CSS file, JavaScript file, 00:06:39.876 --> 00:06:42.646 align:middle image, whatever, use this function. 00:06:43.916 --> 00:06:47.836 align:middle In fact, up here, I'm referencing three images. 00:06:48.616 --> 00:06:51.436 align:middle Let's use asset: {{ asset()... 00:06:52.256 --> 00:06:54.916 align:middle and then it auto-completes the path! 00:06:55.316 --> 00:06:56.666 align:middle Thanks Symfony plugin! 00:06:57.446 --> 00:06:59.836 align:middle Repeat this for the second image... 00:07:00.576 --> 00:07:02.126 align:middle and the third. 00:07:03.876 --> 00:07:06.186 align:middle We know this won't make any difference today... 00:07:06.726 --> 00:07:10.596 align:middle we can refresh the HTML source to see the same paths... 00:07:10.986 --> 00:07:13.396 align:middle but we're ready for a CDN in the future. 00:07:14.296 --> 00:07:16.546 align:middle So the layout now looks great! 00:07:17.256 --> 00:07:19.556 align:middle But the content for our homepage is... 00:07:19.556 --> 00:07:21.346 align:middle just kind of hanging out... 00:07:21.346 --> 00:07:22.346 align:middle looking weird... 00:07:22.496 --> 00:07:23.846 align:middle like me in middle school. 00:07:24.686 --> 00:07:27.906 align:middle Back in the tutorial/ directory, copy the homepage template... 00:07:28.096 --> 00:07:30.096 align:middle and overwrite our original file. 00:07:34.456 --> 00:07:35.166 align:middle Open that up. 00:07:36.386 --> 00:07:39.166 align:middle This still extends base.html.twig... 00:07:39.576 --> 00:07:41.916 align:middle and it still overrides the body block. 00:07:42.736 --> 00:07:47.236 align:middle And then, it has a bunch of completely hard coded HTML. 00:07:47.276 --> 00:07:49.986 align:middle Let's go see what it looks like. 00:07:50.616 --> 00:07:51.706 align:middle Refresh and... 00:07:52.126 --> 00:07:54.016 align:middle it looks awesome! 00:07:54.406 --> 00:07:55.406 align:middle Except that... 00:07:55.406 --> 00:07:57.686 align:middle it's 100% hard coded. 00:07:58.546 --> 00:07:59.436 align:middle Let's fix that. 00:08:00.876 --> 00:08:05.826 align:middle All the way on top, here's the name of our record, print the title variable. 00:08:05.826 --> 00:08:09.036 align:middle And then, below for the songs.. 00:08:09.826 --> 00:08:12.126 align:middle we have a long list of hardcoded HTML. 00:08:12.826 --> 00:08:14.046 align:middle Let's turn this into a loop. 00:08:14.046 --> 00:08:18.906 align:middle Add {% for track in tracks %} like we had before. 00:08:19.576 --> 00:08:21.676 align:middle And... at the bottom, endfor. 00:08:24.886 --> 00:08:27.986 align:middle For the song details, use track.song... 00:08:29.336 --> 00:08:31.176 align:middle and track.artist. 00:08:32.676 --> 00:08:35.656 align:middle And now we can remove all the hardcoded songs. 00:08:40.976 --> 00:08:44.346 align:middle Sweet! Let's try that. 00:08:45.936 --> 00:08:48.356 align:middle Hey! It's coming to life people! 00:08:49.336 --> 00:08:50.446 align:middle One more page to go! 00:08:50.666 --> 00:08:52.256 align:middle The /browse page. 00:08:53.146 --> 00:08:59.236 align:middle You know the drill: copy browse.html.twig, and paste into our directory. 00:09:02.436 --> 00:09:08.966 align:middle This looks a lot like the homepage: it extends base.html.twig and overrides block body. 00:09:10.246 --> 00:09:14.446 align:middle Over in VinylController, we weren't rendering a template before... 00:09:14.676 --> 00:09:15.956 align:middle so let's do that now: 00:09:16.836 --> 00:09:24.866 align:middle return $this->render('vinyl/browse.html.twig') and let's pass in the genre. 00:09:25.646 --> 00:09:30.756 align:middle Add a variable for that: $genre = and if we have a slug... 00:09:31.046 --> 00:09:37.546 align:middle use our fancy title-case code, else set this to null. 00:09:38.206 --> 00:09:40.716 align:middle Then delete the $title stuff... 00:09:40.716 --> 00:09:42.826 align:middle and pass genre into Twig. 00:09:46.006 --> 00:09:49.036 align:middle Back in the template, use this in the h1. 00:09:50.056 --> 00:09:53.476 align:middle In Twig, we can also use fancy syntax. 00:09:54.136 --> 00:10:01.246 align:middle So if we have a genre, print genre, else print All Genres. 00:10:03.306 --> 00:10:04.376 align:middle Testing time. 00:10:04.756 --> 00:10:09.986 align:middle Head over to /browse: "Browse all genres"! 00:10:10.446 --> 00:10:15.216 align:middle And then /browse/death-metal: Browse Death Metal. 00:10:15.216 --> 00:10:19.316 align:middle Friends, this is starting to feel like a real site! 00:10:19.806 --> 00:10:22.686 align:middle Except that these links up in the nav... 00:10:22.866 --> 00:10:23.926 align:middle go nowhere! 00:10:24.486 --> 00:10:28.856 align:middle Let's fix that next by learning how to generate URLs. 00:10:29.646 --> 00:10:35.066 align:middle We're also going to meet the mega-powerful bin/console command line tool.