WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:00.036 --> 00:00:03.976 align:middle Since this page just loaded without an error, 00:00:04.396 --> 00:00:09.416 align:middle we think that we just successfully logged a message via the logger service. 00:00:09.606 --> 00:00:12.366 align:middle But... where do log messages go? 00:00:12.796 --> 00:00:13.676 align:middle How can we check? 00:00:14.486 --> 00:00:20.016 align:middle The logger service is provided by a library that we installed earlier called monolog. 00:00:20.586 --> 00:00:22.366 align:middle It was part of the debug-pack. 00:00:22.896 --> 00:00:29.176 align:middle And you can control its configuration inside the config/packages/monolog.yaml file, 00:00:29.516 --> 00:00:33.666 align:middle including where log messages are logged to, like which file. 00:00:34.076 --> 00:00:36.646 align:middle We'll focus more on config in the next tutorial. 00:00:37.186 --> 00:00:43.396 align:middle But one way that you can always see the log messages for a request is via the profiler! 00:00:44.106 --> 00:00:45.606 align:middle This is super handy. 00:00:46.856 --> 00:00:52.646 align:middle Go to the homepage, click any link on the web debug toolbar... 00:00:52.646 --> 00:00:54.896 align:middle and then go to the Logs section. 00:00:55.886 --> 00:01:00.266 align:middle We're now seeing all the log messages that were made only during 00:01:00.266 --> 00:01:02.756 align:middle that last request to the homepage. 00:01:03.186 --> 00:01:05.226 align:middle Great! Except that... 00:01:05.306 --> 00:01:08.646 align:middle our log message is made on an API endpoint... 00:01:09.186 --> 00:01:14.516 align:middle and API endpoints don't have a web debug toolbar we can click! 00:01:15.216 --> 00:01:16.486 align:middle Are we stuck? 00:01:17.096 --> 00:01:20.306 align:middle Nope! Refresh this page one more time... 00:01:20.746 --> 00:01:24.466 align:middle then manually go to /_profiler. 00:01:27.246 --> 00:01:28.026 align:middle This is... 00:01:28.166 --> 00:01:31.386 align:middle kind of a secret door into the profiler system... 00:01:31.816 --> 00:01:36.126 align:middle and this page shows the last ten requests made into our system. 00:01:36.966 --> 00:01:41.146 align:middle The second to the top is the API request we just made. 00:01:41.146 --> 00:01:44.736 align:middle Click the little token link to see... 00:01:45.286 --> 00:01:49.226 align:middle yea! We're looking at the profiler for that API request! 00:01:50.056 --> 00:01:51.466 align:middle Over in the Logs section... 00:01:51.766 --> 00:01:52.996 align:middle there it is! 00:01:53.236 --> 00:01:55.976 align:middle Returning API response for song 5 ... 00:01:56.606 --> 00:01:59.516 align:middle and you can even see the extra info we passed. 00:02:00.636 --> 00:02:03.976 align:middle Ok, services are so important that... 00:02:03.976 --> 00:02:05.836 align:middle I want to do one more quick example. 00:02:06.256 --> 00:02:07.806 align:middle Go back to VinylController. 00:02:08.856 --> 00:02:14.026 align:middle The render() method is really just a shortcut to fetch the "twig" service, 00:02:14.296 --> 00:02:17.616 align:middle call some method on that object to render the template... 00:02:17.786 --> 00:02:22.896 align:middle and then put the final HTML string into a Response object. 00:02:23.736 --> 00:02:26.936 align:middle It's a great shortcut and you should use it. 00:02:27.396 --> 00:02:33.636 align:middle But! As a challenge, could we render a template without using that method? 00:02:34.236 --> 00:02:34.916 align:middle Of course! 00:02:35.256 --> 00:02:36.306 align:middle Let's do it. 00:02:37.056 --> 00:02:41.316 align:middle Step one: find the service that does the work you need to do. 00:02:41.856 --> 00:02:44.816 align:middle So, we need to find the Twig service. 00:02:44.816 --> 00:02:51.896 align:middle Let's do our trick again: php bin/console debug:autowiring twig And... 00:02:52.146 --> 00:02:58.186 align:middle yes! Apparently the type-hint we need to use is Twig\Environment. 00:02:59.206 --> 00:03:06.346 align:middle Ok! Go back to our method, add an argument, type Environment, and hit tab to auto-complete 00:03:06.346 --> 00:03:09.436 align:middle that so PhpStorm adds the use statement. 00:03:10.206 --> 00:03:11.376 align:middle Let's call it $twig. 00:03:12.736 --> 00:03:20.256 align:middle Below, instead of using render, let's say $html = and then $twig->. 00:03:21.266 --> 00:03:27.146 align:middle Like with the logger, we don't need to know what methods this class has, because, 00:03:27.276 --> 00:03:31.906 align:middle thanks to the type-hint, PhpStorm can tell us all the methods. 00:03:32.576 --> 00:03:36.076 align:middle That render() method looks like it's probably what we want. 00:03:36.816 --> 00:03:40.176 align:middle The first argument is the string name of the template to render 00:03:40.326 --> 00:03:43.486 align:middle and the $context argument holds the variables. 00:03:43.706 --> 00:03:48.296 align:middle So... it has the same arguments that we were already passing. 00:03:48.296 --> 00:03:52.366 align:middle To see if this is working, dd($html). 00:03:53.736 --> 00:03:54.726 align:middle Testing time! 00:03:55.516 --> 00:03:56.586 align:middle Head to the homepage... 00:03:57.536 --> 00:04:02.046 align:middle and yes! We just rendered a template manually! 00:04:02.256 --> 00:04:03.896 align:middle Seriously awesome! 00:04:04.576 --> 00:04:13.926 align:middle And we can finish this page by wrapping that in a response: return new Response($html). 00:04:13.926 --> 00:04:14.606 align:middle And now... 00:04:14.966 --> 00:04:16.916 align:middle the page works! 00:04:17.306 --> 00:04:22.766 align:middle And we understand that the true way to render a template is via the Twig service. 00:04:22.766 --> 00:04:28.786 align:middle Someday, you'll find yourself in a situation where you need to render a template 00:04:28.976 --> 00:04:31.446 align:middle but you are not in a controller... 00:04:31.806 --> 00:04:36.486 align:middle and so you do not have the $this->render() shortcut method. 00:04:37.486 --> 00:04:42.856 align:middle Knowing that there's a Twig service you can fetch will be the key to solving that problem. 00:04:43.316 --> 00:04:45.506 align:middle More on that in the next tutorial. 00:04:45.986 --> 00:04:51.506 align:middle But in a real app, in a controller, there's no reason to do all this extra work. 00:04:51.686 --> 00:04:53.846 align:middle So I'm going to revert this... 00:04:54.206 --> 00:04:56.086 align:middle and go back to using render(). 00:04:56.516 --> 00:05:00.106 align:middle And... then we don't need to autowire that argument anymore... 00:05:00.486 --> 00:05:03.006 align:middle and we can even clean up the use statement. 00:05:04.326 --> 00:05:08.216 align:middle Here are the three big, gigantic, important takeaways. 00:05:08.296 --> 00:05:13.126 align:middle First, Symfony is packed full of objects that do work... 00:05:13.506 --> 00:05:15.536 align:middle which we call services. 00:05:15.536 --> 00:05:17.716 align:middle Services are tools. 00:05:17.776 --> 00:05:22.166 align:middle Second, all work in Symfony is done by a service... 00:05:22.516 --> 00:05:24.106 align:middle even things like routing. 00:05:25.026 --> 00:05:32.056 align:middle And third, we can use services to help us get our work done by autowiring them. 00:05:32.746 --> 00:05:38.066 align:middle In the next tutorial in this series, we'll dive deeper into this very important concept. 00:05:38.946 --> 00:05:45.756 align:middle But before we finish this tutorial, I really really want to talk about one more big awesome, 00:05:45.756 --> 00:05:52.876 align:middle amazing thing: Webpack Encore, the key to writing professional CSS and JavaScript. 00:05:53.576 --> 00:05:59.286 align:middle Over these last few chapters, we're going to bring our site to life and even make it 00:05:59.286 --> 00:06:02.456 align:middle as responsive as a single page application.