WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.176 --> 00:00:04.196 align:middle We're doing really well, but yikes! 00:00:04.376 --> 00:00:06.656 align:middle Our site is ugly. 00:00:06.996 --> 00:00:08.086 align:middle Time to fix that. 00:00:08.086 --> 00:00:14.006 align:middle If you download the course code from this page, after you unzip it, 00:00:14.116 --> 00:00:18.466 align:middle you'll find a start/ directory with a tutorial/ directory inside: 00:00:18.616 --> 00:00:20.826 align:middle the same tutorial/ directory you see here. 00:00:21.386 --> 00:00:25.116 align:middle We're going to copy a few files from it over the next few minutes. 00:00:25.116 --> 00:00:28.696 align:middle The first is base.html.twig. 00:00:29.486 --> 00:00:38.596 align:middle I'll open it up, copy its contents, close it, and then open our templates/base.html.twig. 00:00:39.176 --> 00:00:40.596 align:middle Paste the new stuff here. 00:00:41.426 --> 00:00:45.566 align:middle This was not a huge change: this added some CSS files - 00:00:45.716 --> 00:00:49.266 align:middle including Bootstrap - and some basic HTML markup. 00:00:49.976 --> 00:00:55.356 align:middle But we have the same blocks as before: {% block body %} in the middle, {% block javascripts %}, 00:00:55.356 --> 00:01:03.286 align:middle {% block title %}, etc. Notice that the link tags are inside a block called stylesheets. 00:01:03.936 --> 00:01:06.126 align:middle But that's not important yet. 00:01:06.696 --> 00:01:09.526 align:middle I'll explain why it's done that way a bit later. 00:01:10.176 --> 00:01:14.686 align:middle One of the link tags is pointing to /css/app.css. 00:01:15.536 --> 00:01:18.976 align:middle That's another file that lives in this tutorial/ directory. 00:01:19.316 --> 00:01:25.336 align:middle In fact, select the images/ directory and app.css and copy both. 00:01:25.336 --> 00:01:29.676 align:middle Now, select the public/ folder and paste. 00:01:31.546 --> 00:01:36.906 align:middle Add another css/ directory and move app.css inside. 00:01:40.006 --> 00:01:43.436 align:middle Remember: the public/ directory is our document root. 00:01:43.436 --> 00:01:49.726 align:middle So if you need a file to be accessible by a user's browser, it needs to live here. 00:01:50.506 --> 00:01:58.196 align:middle The path /css/app.css will load this public/css/app.css file. 00:01:59.056 --> 00:02:00.336 align:middle Let's see what this looks like! 00:02:00.996 --> 00:02:03.266 align:middle Spin over to your browser and refresh. 00:02:03.946 --> 00:02:05.096 align:middle Much better. 00:02:05.546 --> 00:02:07.776 align:middle The middle still looks terrible... 00:02:07.986 --> 00:02:12.636 align:middle but that's because we haven't added any markup to the template for this page. 00:02:12.636 --> 00:02:15.226 align:middle So let me ask a question... 00:02:15.406 --> 00:02:22.186 align:middle and answer it: what features does Symfony offer when it comes to CSS and JavaScript? 00:02:22.976 --> 00:02:23.836 align:middle The answer is... 00:02:24.146 --> 00:02:26.446 align:middle none... or a lot! 00:02:26.446 --> 00:02:31.996 align:middle Symfony has two different levels of integration with CSS and JavaScript. 00:02:32.516 --> 00:02:35.256 align:middle Right now, we're using the basic level. 00:02:35.706 --> 00:02:42.026 align:middle Really, right now, Symfony isn't doing anything for us: we created a CSS file, 00:02:42.306 --> 00:02:46.276 align:middle then added a very traditional link tag to it in HTML. 00:02:46.916 --> 00:02:50.356 align:middle Symfony is doing nothing: it's all up to you. 00:02:51.146 --> 00:02:57.156 align:middle The other, bigger level of integration is to use something called Webpack Encore: 00:02:57.156 --> 00:03:01.926 align:middle a fantastic library that handles minification, Sass support, 00:03:02.216 --> 00:03:05.526 align:middle React or Vue.js support and many other things. 00:03:05.966 --> 00:03:10.226 align:middle I'll give you a crash course into Webpack Encore at the end of this tutorial. 00:03:10.626 --> 00:03:15.346 align:middle But right now, we're going to keep it simple: you create CSS or JavaScript files, 00:03:15.716 --> 00:03:20.656 align:middle put them in the public/ directory, and then create link or script tags that point to them. 00:03:21.346 --> 00:03:25.006 align:middle Well, actually, even with this, "basic" integration, 00:03:25.096 --> 00:03:28.656 align:middle there is one small Symfony feature you should use. 00:03:29.146 --> 00:03:32.366 align:middle Before I show you, go into your PhpStorm preference... 00:03:32.886 --> 00:03:36.826 align:middle and search again for "Symfony" to find the Symfony plugin. 00:03:36.826 --> 00:03:39.446 align:middle See this web directory option? 00:03:39.926 --> 00:03:45.086 align:middle Change that to public/ - this was called web/ in older versions of Symfony. 00:03:45.746 --> 00:03:47.946 align:middle This will give us better auto-completion soon. 00:03:48.546 --> 00:03:54.306 align:middle Hit "Ok". Here's the deal: whenever you reference a static file on your site - 00:03:54.426 --> 00:04:02.086 align:middle like a CSS file, JavaScript file or image, instead of just putting /css/app.css, 00:04:02.536 --> 00:04:06.076 align:middle you should use a Twig function called asset(). 00:04:06.076 --> 00:04:16.426 align:middle So, {{ asset() }} and then the same path as before, but without the opening /: css/app.css. 00:04:17.416 --> 00:04:20.696 align:middle What does this super-cool-looking asset() function do? 00:04:21.316 --> 00:04:22.626 align:middle Almost... nothing. 00:04:23.216 --> 00:04:30.306 align:middle In fact, this will output the exact same path as before: /css/app.css. 00:04:31.356 --> 00:04:35.316 align:middle So why are we bothering to use a function that does nothing? 00:04:35.916 --> 00:04:38.436 align:middle Well, it does do two things... 00:04:38.516 --> 00:04:40.806 align:middle which you may or may not care about. 00:04:40.806 --> 00:04:46.656 align:middle First, if you decide to deploy your app to a subdirectory of a domain - 00:04:46.996 --> 00:04:51.376 align:middle like ILikeMagic.com/cauldron_overflow, 00:04:51.806 --> 00:04:58.256 align:middle the asset() function will automatically prefix all the paths with /cauldron_overflow. 00:04:58.866 --> 00:04:59.806 align:middle Super great... 00:04:59.976 --> 00:05:00.656 align:middle if you care. 00:05:01.386 --> 00:05:08.346 align:middle The second thing it does is more useful: if you decide to deploy your assets to a CDN, 00:05:08.946 --> 00:05:12.956 align:middle by adding one line to one config file, suddenly, 00:05:13.116 --> 00:05:17.506 align:middle Symfony will prefix every path with the URL to your CDN. 00:05:17.506 --> 00:05:23.626 align:middle So... it's really not that important, but if you use asset() everywhere, 00:05:24.016 --> 00:05:25.936 align:middle you'll be happy later when you need it. 00:05:26.546 --> 00:05:29.226 align:middle But... if we move over and refresh... 00:05:29.226 --> 00:05:32.146 align:middle surprise! It explodes! 00:05:32.816 --> 00:05:36.546 align:middle Did you forget to run composer require symfony/asset? 00:05:36.956 --> 00:05:38.406 align:middle Unknown function asset. 00:05:38.946 --> 00:05:40.036 align:middle How cool is that? 00:05:40.576 --> 00:05:45.976 align:middle Remember, Symfony starts small: you install things when you need them. 00:05:45.976 --> 00:05:50.066 align:middle In this case, we're trying to use a feature that's not installed... 00:05:50.126 --> 00:05:54.646 align:middle so Symfony gives us the exact command we need to run. 00:05:55.206 --> 00:06:05.256 align:middle Copy it, move over and go: composer require symfony/asset When this finishes... 00:06:06.076 --> 00:06:07.606 align:middle move back over and... 00:06:07.846 --> 00:06:14.066 align:middle it works. If you look at the HTML source and search for app.css... 00:06:14.066 --> 00:06:18.546 align:middle yep! It's printing the same path as before. 00:06:19.916 --> 00:06:22.196 align:middle Let's make the middle of our page look a bit nicer. 00:06:22.846 --> 00:06:29.106 align:middle Back in the tutorial/ directory, open show.html.twig, copy its contents, close it, 00:06:29.546 --> 00:06:34.876 align:middle then open up our version: templates/question/show.html.twig. 00:06:35.496 --> 00:06:36.486 align:middle Paste the new code. 00:06:37.346 --> 00:06:40.586 align:middle Once again, there's nothing important happening here: 00:06:41.046 --> 00:06:44.046 align:middle we're still overriding the same title and body blocks. 00:06:44.416 --> 00:06:50.246 align:middle We're still using the same question variable and we're still looping over the answers down here. 00:06:50.646 --> 00:06:53.166 align:middle There's just a lot of extra markup... 00:06:53.406 --> 00:06:54.496 align:middle which... ya know... 00:06:54.696 --> 00:06:55.756 align:middle makes things pretty. 00:06:56.946 --> 00:06:58.046 align:middle When we refresh... 00:06:58.416 --> 00:06:59.766 align:middle see! Pretty! 00:07:01.506 --> 00:07:05.656 align:middle Back in the template, notice that this page has a few img tags... 00:07:06.046 --> 00:07:08.796 align:middle but these are not using the asset() function. 00:07:09.186 --> 00:07:09.876 align:middle Let's fix that. 00:07:10.396 --> 00:07:11.966 align:middle I'll use a shortcut! 00:07:12.406 --> 00:07:15.766 align:middle I can just type "tisha", hit tab and... 00:07:16.016 --> 00:07:18.336 align:middle boom! It takes care of the rest. 00:07:18.336 --> 00:07:19.936 align:middle Search for img... 00:07:21.686 --> 00:07:24.516 align:middle and replace this one too with "tisha". 00:07:25.246 --> 00:07:26.746 align:middle Wondering who tisha is? 00:07:27.406 --> 00:07:32.676 align:middle Oh, just one of the several cats we keep on staff here at SymfonyCasts. 00:07:32.676 --> 00:07:34.426 align:middle This one manages Vladimir. 00:07:35.076 --> 00:07:40.236 align:middle By the way, in a real app, instead of these images being static files in our project, 00:07:40.276 --> 00:07:42.636 align:middle that might be files that users upload. 00:07:43.276 --> 00:07:47.826 align:middle Don't worry: we have an entire tutorial on handling file uploads. 00:07:48.546 --> 00:07:50.246 align:middle Make sure this works and... 00:07:50.636 --> 00:07:55.306 align:middle it does. The last page that we haven't styled is the homepage... 00:07:55.386 --> 00:07:56.486 align:middle which right now... 00:07:56.486 --> 00:07:58.966 align:middle prints some text. 00:07:58.966 --> 00:08:03.606 align:middle Open its controller: src/Controller/QuestionController.php. 00:08:03.606 --> 00:08:07.656 align:middle Yep! It's just return new Response() and text. 00:08:07.656 --> 00:08:08.346 align:middle We can do better. 00:08:08.816 --> 00:08:11.916 align:middle Replace this with return $this->render(). 00:08:12.576 --> 00:08:15.886 align:middle Let's call the template question/homepage.html.twig. 00:08:16.796 --> 00:08:18.316 align:middle And... right now... 00:08:18.416 --> 00:08:21.766 align:middle I don't think we need to pass any variables into the template... 00:08:22.046 --> 00:08:25.716 align:middle so I'll leave the second argument off. 00:08:25.716 --> 00:08:31.246 align:middle Inside templates/question/, create the new file: homepage.html.twig. 00:08:32.476 --> 00:08:35.456 align:middle Most templates start the exact same way. 00:08:35.956 --> 00:08:37.276 align:middle Yay consistency! 00:08:38.046 --> 00:08:47.926 align:middle On top, {% extends 'base.html.twig' %}, {% block body %} and {% endblock %}. 00:08:47.926 --> 00:08:51.326 align:middle In between, add some markup so we can see if this is working. 00:08:53.136 --> 00:08:55.776 align:middle Ok... refresh the page and... 00:08:55.776 --> 00:08:56.326 align:middle excellent! 00:08:56.906 --> 00:08:59.946 align:middle Except for the "this looks totally awful" part. 00:09:00.956 --> 00:09:04.486 align:middle Let's steal some code from the tutorial/ directory one last time. 00:09:05.136 --> 00:09:07.276 align:middle Open homepage.html.twig. 00:09:07.806 --> 00:09:12.146 align:middle This is just a bunch of hardcoded markup to make things look nicer. 00:09:12.706 --> 00:09:15.886 align:middle Copy it, close that file... 00:09:16.376 --> 00:09:20.786 align:middle and then paste it over our homepage.html.twig code. 00:09:21.236 --> 00:09:22.106 align:middle And now... 00:09:22.516 --> 00:09:24.326 align:middle it looks much better. 00:09:24.326 --> 00:09:29.686 align:middle So that's the basic CSS and JavaScript integration inside 00:09:29.686 --> 00:09:32.876 align:middle of Symfony: you manage it yourself. 00:09:32.876 --> 00:09:38.156 align:middle Sure, you should use this asset() function, but it's not doing anything too impressive. 00:09:38.156 --> 00:09:41.006 align:middle If you want more, you're in luck! 00:09:41.396 --> 00:09:45.056 align:middle In the last chapter, we'll take our assets up to the next level. 00:09:45.376 --> 00:09:46.876 align:middle You're going to love it. 00:09:46.876 --> 00:09:50.976 align:middle Next: our site now has some links on it! 00:09:50.976 --> 00:09:53.476 align:middle And they all go nowhere! 00:09:53.986 --> 00:09:57.066 align:middle Let's learn how to generate URLs to routes.