WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.056 --> 00:00:02.876 align:middle The page we're looking at right now... 00:00:03.106 --> 00:00:04.736 align:middle which is super fun... 00:00:04.766 --> 00:00:06.506 align:middle and even changes colors... 00:00:06.996 --> 00:00:09.026 align:middle is just here to say "Hello!". 00:00:09.716 --> 00:00:16.416 align:middle Symfony is rendering this because, in reality, our app doesn't have any real pages yet. 00:00:16.866 --> 00:00:17.616 align:middle Let's change that. 00:00:18.296 --> 00:00:19.656 align:middle Every web framework... 00:00:20.106 --> 00:00:21.296 align:middle in any language... 00:00:21.476 --> 00:00:26.526 align:middle has the same main job: to give you a route & controller system: 00:00:26.906 --> 00:00:29.776 align:middle a 2-step system to build pages. 00:00:30.576 --> 00:00:38.356 align:middle A route defines the URL of the page and the controller is where we write PHP code to build 00:00:38.356 --> 00:00:41.496 align:middle that page, like the HTML or JSON. 00:00:42.226 --> 00:00:44.526 align:middle Open up config/routes.yaml. 00:00:45.666 --> 00:00:48.156 align:middle Hey! We already have an example! 00:00:49.016 --> 00:00:50.146 align:middle Uncomment that. 00:00:51.016 --> 00:00:54.136 align:middle If you're not familiar with YAML, it's super friendly: 00:00:54.506 --> 00:00:59.356 align:middle it's a key-value config format that's separated by colons. 00:01:00.066 --> 00:01:01.816 align:middle Indentation is also important. 00:01:02.826 --> 00:01:08.656 align:middle This creates a single route whose URL is /. The controller points 00:01:08.656 --> 00:01:12.076 align:middle to a function that will build this page... 00:01:12.596 --> 00:01:15.436 align:middle really, it points to a method on a class. 00:01:16.236 --> 00:01:20.526 align:middle Overall, this route says: when the user goes to the homepage, 00:01:20.786 --> 00:01:25.416 align:middle please execute the index method on the DefaultController class. 00:01:26.066 --> 00:01:29.816 align:middle Oh, and you can ignore that index key at the top of the YAML: 00:01:30.106 --> 00:01:32.186 align:middle that's an internal name for the route... 00:01:32.186 --> 00:01:34.216 align:middle and it's not important yet. 00:01:34.966 --> 00:01:38.746 align:middle The project we're building is called "Cauldron Overflow". 00:01:39.306 --> 00:01:44.166 align:middle We originally wanted to create a site where developers could ask questions 00:01:44.416 --> 00:01:47.106 align:middle and other developers answered them but... 00:01:47.336 --> 00:01:49.006 align:middle someone beat us to it... 00:01:49.326 --> 00:01:51.046 align:middle by... like 10 years. 00:01:51.466 --> 00:01:55.646 align:middle So like all impressive startups, we're pivoting! 00:01:56.386 --> 00:02:00.516 align:middle We've noticed a lot of wizards accidentally blowing themselves up... 00:02:01.166 --> 00:02:05.376 align:middle or conjuring fire-breathing dragons when they meant 00:02:05.406 --> 00:02:08.766 align:middle to create a small fire for roasting marshmallows. 00:02:09.496 --> 00:02:15.996 align:middle And so... Cauldron Overflow is here to become the place for witches and wizards to ask 00:02:15.996 --> 00:02:19.686 align:middle and answer questions about magical misadventures. 00:02:20.456 --> 00:02:25.126 align:middle On the homepage, we will eventually list some of the most recent questions. 00:02:25.476 --> 00:02:30.866 align:middle So let's change the controller class to QuestionController and the method to homepage. 00:02:31.846 --> 00:02:38.436 align:middle Ok, route done: it defines the URL and points to the controller that will build the page. 00:02:39.306 --> 00:02:42.236 align:middle Now... we need to create that controller! 00:02:42.996 --> 00:02:46.666 align:middle Inside the src/ directory, there's already a Controller/ directory... 00:02:46.896 --> 00:02:47.946 align:middle but it's empty. 00:02:48.696 --> 00:02:52.096 align:middle I'll right click on this and select "New PHP class". 00:02:52.536 --> 00:02:54.196 align:middle Call it QuestionController. 00:02:55.006 --> 00:02:56.146 align:middle Ooh, check this out. 00:02:56.576 --> 00:02:58.816 align:middle It pre-filled the namespace! 00:02:59.096 --> 00:03:00.656 align:middle That's awesome! 00:03:01.086 --> 00:03:06.296 align:middle This is thanks to the Composer PhpStorm configuration we did in the last chapter. 00:03:07.206 --> 00:03:13.316 align:middle Here's the deal: every class we create in the src/ directory will need a namespace. 00:03:13.706 --> 00:03:16.766 align:middle And... for reasons that aren't super important, 00:03:17.036 --> 00:03:22.636 align:middle the namespace must be App\ followed whatever directory the file lives in. 00:03:23.446 --> 00:03:26.546 align:middle Because we're creating this file in the Controller/ directory, 00:03:26.976 --> 00:03:30.346 align:middle its namespace must be App\Controller. 00:03:30.986 --> 00:03:33.766 align:middle PhpStorm will pre-fill this every time. 00:03:34.426 --> 00:03:40.836 align:middle Perfect! Now, because in routes.yaml we decided to call the method homepage, 00:03:41.076 --> 00:03:44.166 align:middle create that here: public function homepage(). 00:03:44.886 --> 00:03:46.986 align:middle And.. congratulations! 00:03:47.176 --> 00:03:53.146 align:middle You are inside of a controller function, which is also sometimes called an "action"... 00:03:53.286 --> 00:03:54.496 align:middle to confuse things. 00:03:55.376 --> 00:03:59.056 align:middle Our job here is simple: to build the page. 00:03:59.806 --> 00:04:05.456 align:middle We can write any code we need to do that - like to make database queries, cache things, 00:04:05.696 --> 00:04:08.926 align:middle perform API calls, mine cryptocurrencies... 00:04:09.096 --> 00:04:15.676 align:middle whatever. The only rule is that a controller function must return a Symfony Response object. 00:04:16.126 --> 00:04:18.546 align:middle Say return new Response(). 00:04:19.246 --> 00:04:21.756 align:middle PhpStorm tries to auto-complete this... 00:04:21.896 --> 00:04:25.106 align:middle but there are multiple Response classes in our app. 00:04:25.686 --> 00:04:30.206 align:middle The one we want is from Symfony\Component\HttpFoundation. 00:04:30.966 --> 00:04:36.946 align:middle HttpFoundation is one of the most important parts - or "components" - in Symfony. 00:04:37.456 --> 00:04:39.096 align:middle Hit tab to auto-complete it. 00:04:39.636 --> 00:04:41.556 align:middle But stop! Did you see that? 00:04:42.166 --> 00:04:47.406 align:middle Because we let PhpStorm auto-complete that class for us, it wrote Response, 00:04:47.576 --> 00:04:52.436 align:middle but it also added the use statement for this class at the top of the file! 00:04:52.756 --> 00:04:58.486 align:middle That is one of the best features of PhpStorm and I'm going to use it a lot. 00:04:58.896 --> 00:05:04.056 align:middle You will constantly see me type a class and allow PhpStorm to auto-complete it 00:05:04.346 --> 00:05:08.016 align:middle so that it adds the use statement to the top of the file for me. 00:05:08.666 --> 00:05:14.396 align:middle Inside new Response(), add some text: What a bewitching controller we have conjured! 00:05:15.206 --> 00:05:16.266 align:middle And... done! 00:05:16.676 --> 00:05:18.836 align:middle We just created our first page! 00:05:19.506 --> 00:05:20.116 align:middle Let's try it! 00:05:20.866 --> 00:05:24.606 align:middle When we go to the homepage, it should execute our controller function... 00:05:24.966 --> 00:05:26.226 align:middle which returns the message. 00:05:26.876 --> 00:05:27.606 align:middle Find your browser. 00:05:28.006 --> 00:05:29.446 align:middle We're already on the homepage... 00:05:29.576 --> 00:05:30.936 align:middle so just refresh. 00:05:32.196 --> 00:05:34.776 align:middle Say hello to our very first page. 00:05:35.246 --> 00:05:41.786 align:middle I know, it's not much to look at yet, but we've already covered the most foundational part 00:05:41.786 --> 00:05:44.496 align:middle of Symfony: the route and controller system. 00:05:45.316 --> 00:05:50.216 align:middle Next, let's make our route fancier by using something called annotations. 00:05:50.886 --> 00:05:55.396 align:middle We'll also create a second page with a route that matches a wildcard path.