WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.116 --> 00:00:06.316 align:middle Even astronauts - who generally spend their time staring into the black absyss - 00:00:06.606 --> 00:00:10.596 align:middle demand a site that is less ugly than this! 00:00:11.316 --> 00:00:12.066 align:middle Let's fix that! 00:00:12.066 --> 00:00:17.696 align:middle If you download the course code from the page that you're watching this video on right now, 00:00:18.226 --> 00:00:21.586 align:middle inside the zip file, you'll find a start/ directory. 00:00:21.856 --> 00:00:26.906 align:middle And inside that, you'll see the same tutorial/ directory that I have here. 00:00:27.336 --> 00:00:28.956 align:middle And inside that... 00:00:29.316 --> 00:00:32.456 align:middle I've created a new base.html.twig. 00:00:33.416 --> 00:00:36.496 align:middle Copy that and overwrite our version in templates/. 00:00:37.846 --> 00:00:43.306 align:middle On a technical level, this is basically the same as before: it has the same blocks: 00:00:43.556 --> 00:00:47.626 align:middle title stylesheets, body and javascripts at the bottom. 00:00:48.316 --> 00:00:52.286 align:middle But now, we have a nice HTML layout that's styled with Bootstrap. 00:00:52.286 --> 00:00:55.486 align:middle If you refresh, it should look better. 00:00:56.046 --> 00:00:58.236 align:middle Woh! No change! 00:00:58.776 --> 00:01:00.976 align:middle Weird! Actually... 00:01:01.176 --> 00:01:04.436 align:middle this is more weird than you might think. 00:01:04.436 --> 00:01:12.876 align:middle Find your terminal and remove the var/cache/dev directory: What the heck is this? 00:01:13.566 --> 00:01:16.946 align:middle Internally, Symfony caches things in this directory. 00:01:17.346 --> 00:01:22.116 align:middle And... you normally don't need to think about this at all: 00:01:22.116 --> 00:01:25.276 align:middle Symfony is smart enough during development 00:01:25.536 --> 00:01:29.176 align:middle to automatically rebuild this cache whenever necessary. 00:01:29.856 --> 00:01:33.286 align:middle So... why am I manually clearing it? 00:01:34.006 --> 00:01:37.586 align:middle Well... because we copied my file... 00:01:37.926 --> 00:01:45.116 align:middle and because its "last modified" date is older than our original base.html.twig, 00:01:45.666 --> 00:01:50.636 align:middle Twig gets confused and thinks that the template was not updated. 00:01:50.636 --> 00:01:55.936 align:middle Seriously, this is not something to worry about in any other situation. 00:01:56.516 --> 00:01:57.826 align:middle And when we refresh... 00:01:59.336 --> 00:02:00.076 align:middle there it is! 00:02:00.586 --> 00:02:03.126 align:middle Ok, it's still pretty ugly. 00:02:03.646 --> 00:02:05.876 align:middle That's because we're missing some CSS files! 00:02:06.806 --> 00:02:11.976 align:middle In the tutorial/ directory, I've also prepped some css/, fonts/ and images/. 00:02:13.216 --> 00:02:17.096 align:middle All of these files need to be accessed by the user's browser, 00:02:17.386 --> 00:02:21.266 align:middle and that means they must live inside public/. 00:02:23.006 --> 00:02:25.086 align:middle Open that directory and paste them there. 00:02:25.916 --> 00:02:32.896 align:middle By the way, Symfony has an awesome tool called Webpack Encore that helps process, combine, 00:02:33.126 --> 00:02:38.326 align:middle minify and generally do amazing things with your CSS and JS files. 00:02:39.516 --> 00:02:42.556 align:middle We are going to talk about Webpack Encore... 00:02:42.806 --> 00:02:44.946 align:middle but in a different tutorial. 00:02:44.946 --> 00:02:49.226 align:middle For now, let's get things setup with normal, static files. 00:02:50.286 --> 00:02:55.616 align:middle The two CSS files we want to include are font-awesome.css and styles.css. 00:02:56.466 --> 00:02:59.956 align:middle And we don't need to do anything complex or special! 00:03:00.476 --> 00:03:05.776 align:middle In base.html.twig, find the stylesheets block and add a link tag. 00:03:05.776 --> 00:03:12.896 align:middle But wait, why exactly are we adding the link tag inside the stylesheets block? 00:03:13.346 --> 00:03:15.026 align:middle Is that important? 00:03:15.586 --> 00:03:17.076 align:middle Well, technically... 00:03:17.236 --> 00:03:21.806 align:middle it doesn't matter: a link tag can live anywhere in head. 00:03:22.456 --> 00:03:29.126 align:middle But later, we might want to add additional CSS files on specific pages. 00:03:29.936 --> 00:03:35.846 align:middle By putting the link tags inside this block, we'll have more flexibility to do that. 00:03:36.596 --> 00:03:41.176 align:middle Don't worry: we're going to see an example of this with a JavaScript file soon. 00:03:41.176 --> 00:03:44.296 align:middle So... what path should we use? 00:03:44.426 --> 00:03:51.716 align:middle Since public/ is the document root, it should just be /css/font-awesome.css. 00:03:52.786 --> 00:03:57.266 align:middle Do the same thing for the other file: /css/styles.css. 00:03:57.266 --> 00:03:59.286 align:middle It's that simple! 00:03:59.286 --> 00:04:05.516 align:middle Refresh! Still not perfect, but much better! 00:04:05.946 --> 00:04:10.156 align:middle And now I'm going to slightly complicate things. 00:04:11.776 --> 00:04:20.216 align:middle Go back into PhpStorm's Preferences, search for "Symfony" and find the "Symfony" plugin. 00:04:21.456 --> 00:04:27.056 align:middle Change the "web" directory to public - it was called "web" in Symfony 3. 00:04:27.786 --> 00:04:34.786 align:middle This is not required, but it will give us more auto-completion when working with assets. 00:04:34.786 --> 00:04:40.536 align:middle Delete the "font-awesome" path, re-type it, and hit tab to auto-complete. 00:04:40.536 --> 00:04:44.966 align:middle Woh! It wrapped the path in a Twig asset() function! 00:04:46.286 --> 00:04:48.926 align:middle Do the same thing below for styles.css. 00:04:49.716 --> 00:04:56.806 align:middle Here's the deal: whenever you link to a static asset - CSS, JS or images - 00:04:57.276 --> 00:05:00.746 align:middle you should wrap the path in this asset() function. 00:05:01.416 --> 00:05:05.036 align:middle But... it's not really that important. 00:05:05.696 --> 00:05:12.546 align:middle In fact, right now, it doesn't do anything: it will print the same path as before. 00:05:13.276 --> 00:05:18.646 align:middle But! In the future, the asset() function will give us more flexibility 00:05:18.886 --> 00:05:23.286 align:middle to version our assets or store them on a CDN. 00:05:23.286 --> 00:05:29.066 align:middle In other words: don't worry about it too much, but do remember to use it! 00:05:30.176 --> 00:05:35.976 align:middle Actually, the asset() function does do something immediately - it breaks our site! 00:05:36.636 --> 00:05:37.456 align:middle Refresh! Ah! 00:05:38.076 --> 00:05:43.526 align:middle The asset function comes from a part of Symfony that we don't have installed yet. 00:05:43.526 --> 00:05:51.676 align:middle Fix that by running: composer require asset This installs the symfony/asset component. 00:05:53.176 --> 00:05:55.346 align:middle And as soon as Composer is done... 00:05:55.996 --> 00:05:58.776 align:middle we can refresh, and it works! 00:06:00.226 --> 00:06:06.006 align:middle To prove that the asset() function isn't doing anything magic, you can look at the link tag 00:06:06.006 --> 00:06:12.766 align:middle in the HTML source: it's the same boring /css/styles.css. 00:06:12.766 --> 00:06:16.986 align:middle There is one other spot where we need to use asset(). 00:06:17.876 --> 00:06:19.916 align:middle In the layout, search for img. 00:06:20.846 --> 00:06:22.456 align:middle Ah, an img tag! 00:06:23.286 --> 00:06:26.986 align:middle Remove the src and re-type astronaut-profile. 00:06:27.936 --> 00:06:33.066 align:middle Perfect! Refresh and enjoy our new avatar on the user menu. 00:06:34.246 --> 00:06:38.716 align:middle There's a lot of hardcoded data, but we'll make this dynamic over time. 00:06:39.976 --> 00:06:42.176 align:middle The layout is looking great! 00:06:42.686 --> 00:06:44.716 align:middle But the inside of the page... 00:06:45.026 --> 00:06:48.066 align:middle yea... that's still pretty terrible. 00:06:48.896 --> 00:06:54.026 align:middle Back in the tutorial/ directory, there is also an article.html.twig file. 00:06:54.816 --> 00:06:59.056 align:middle Don't copy this entire file - just copy its contents. 00:07:00.486 --> 00:07:03.426 align:middle Close it and open show.html.twig. 00:07:04.576 --> 00:07:07.676 align:middle Paste the new code at the top of the body block. 00:07:12.806 --> 00:07:13.996 align:middle Check it out in your browser. 00:07:15.206 --> 00:07:16.546 align:middle Yep! It looks cool... 00:07:16.846 --> 00:07:20.026 align:middle but all of this info is hardcoded. 00:07:20.836 --> 00:07:24.506 align:middle I mean, that article name is just static text. 00:07:25.736 --> 00:07:30.946 align:middle Let's take the dynamic code that we have at the bottom and work it into the new HTML. 00:07:36.256 --> 00:07:38.816 align:middle For the title, use {{ title }}. 00:07:41.476 --> 00:07:44.106 align:middle Below, it prints the number of comments. 00:07:44.526 --> 00:07:48.406 align:middle Replace that with {{ comments|length }}. 00:07:51.676 --> 00:07:56.736 align:middle Oh, and at the bottom, there is a comment box and one actual comment. 00:08:00.076 --> 00:08:01.536 align:middle Let's find this and... 00:08:01.856 --> 00:08:02.656 align:middle add a loop! 00:08:02.836 --> 00:08:08.036 align:middle For comment in comments on top, and endfor at the bottom. 00:08:12.756 --> 00:08:15.446 align:middle For the actual comment, use {{ comment }}. 00:08:18.946 --> 00:08:20.966 align:middle Delete the old code from the bottom... 00:08:25.106 --> 00:08:27.686 align:middle oh, but don't delete the endblock. 00:08:29.236 --> 00:08:31.136 align:middle Let's try it - refresh! 00:08:32.216 --> 00:08:34.296 align:middle It looks awesome! 00:08:35.036 --> 00:08:39.396 align:middle A bunch of things are still hardcoded, but this is much better. 00:08:40.176 --> 00:08:45.266 align:middle It's time to make our homepage less ugly and learn about the second job 00:08:45.436 --> 00:08:49.156 align:middle of routing: route generation for linking.