WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.096 --> 00:00:05.326 align:middle You may have noticed that most of the committed files were in app/ and src/. 00:00:05.626 --> 00:00:09.816 align:middle That's on purpose: these are the only two directories you need to worry about. 00:00:10.036 --> 00:00:16.246 align:middle src/ will hold all the PHP classes you create and app/ will hold everything else: 00:00:16.596 --> 00:00:18.656 align:middle mostly configuration and template files. 00:00:19.526 --> 00:00:24.766 align:middle Ignore all the other directories for now and just focus on src/ and app/. 00:00:25.536 --> 00:00:26.856 align:middle Remember the functional homepage? 00:00:27.136 --> 00:00:30.476 align:middle It's coming from this DefaultController.php file. 00:00:30.476 --> 00:00:31.036 align:middle Delete that! 00:00:31.276 --> 00:00:35.856 align:middle Do it! Now we have an absolutely empty project. 00:00:36.266 --> 00:00:37.266 align:middle Refresh the homepage! 00:00:38.016 --> 00:00:40.706 align:middle No route found for "GET /" Perfect! 00:00:41.096 --> 00:00:42.846 align:middle That's Symfony's way of saying "Yo! 00:00:43.046 --> 00:00:43.866 align:middle There's no page here." 00:00:44.896 --> 00:00:48.016 align:middle Now back to the main event: building a real page. 00:00:48.826 --> 00:00:54.356 align:middle Our top secret project is called AquaNote: a research database for Aquanauts. 00:00:54.846 --> 00:00:58.116 align:middle These cool underwater explorers log their discoveries 00:00:58.116 --> 00:01:02.146 align:middle of different sea creatures to this nautical site. 00:01:03.036 --> 00:01:09.096 align:middle Our first page will show details about a specific genus, for example, the octopus genus. 00:01:09.096 --> 00:01:11.946 align:middle Creating a page in Symfony - or any modern framework - 00:01:11.946 --> 00:01:14.956 align:middle is two steps: a route and a controller. 00:01:15.546 --> 00:01:19.206 align:middle The route is a bit of configuration that says what the URL is. 00:01:19.696 --> 00:01:22.346 align:middle The controller is a function that builds that page. 00:01:22.466 --> 00:01:26.486 align:middle So, step 1: create a route! 00:01:26.786 --> 00:01:30.246 align:middle Actually, we're going to start with step 2: you'll see why. 00:01:31.376 --> 00:01:35.716 align:middle Create a new class in AppBundle/Controller called GenusController. 00:01:36.766 --> 00:01:39.236 align:middle But wait! The namespace box is empty. 00:01:39.646 --> 00:01:42.666 align:middle That's ok, but PhpStorm can help us out a bit more. 00:01:44.206 --> 00:01:49.936 align:middle Hit escape and then right-click on src and select "mark directory as sources root". 00:01:50.806 --> 00:01:52.606 align:middle Now re-create GenusController. 00:01:53.076 --> 00:01:54.956 align:middle This time it fills in the namespace for me: 00:02:02.936 --> 00:02:07.006 align:middle The most important thing is that the namespace must match the directory structure. 00:02:07.006 --> 00:02:11.036 align:middle If it doesn't, Symfony won't be able to find the class. 00:02:11.036 --> 00:02:14.796 align:middle By setting the sources root, PhpStorm is able to guess the namespace. 00:02:14.946 --> 00:02:17.296 align:middle And that saves us precious time. 00:02:17.296 --> 00:02:22.926 align:middle Inside, add a public function showAction(): Hey, this is the controller - 00:02:23.326 --> 00:02:27.856 align:middle the function that will (eventually) build the page - and its name isn't important. 00:02:28.946 --> 00:02:33.816 align:middle To create the route, we'll use annotations: a comment that is parsed as configuration. 00:02:33.816 --> 00:02:38.266 align:middle Start with /** and add @Route. 00:02:39.256 --> 00:02:43.406 align:middle Be sure to let PhpStorm autocomplete that from the FrameworkExtraBundle by hitting tab. 00:02:43.836 --> 00:02:48.406 align:middle This is important: it added a use statement at the top of the class that we need. 00:02:48.506 --> 00:02:55.626 align:middle Finish this by adding "/genus": Beautiful, that's the route 00:02:55.776 --> 00:02:59.166 align:middle and the URL for the page is /genus. 00:02:59.166 --> 00:03:02.806 align:middle As I already said: the controller is the function right below this, 00:03:02.996 --> 00:03:04.886 align:middle and its job is to build the page. 00:03:05.296 --> 00:03:10.326 align:middle The only rule for a controller is that it must return a Symfony Response object. 00:03:10.326 --> 00:03:12.246 align:middle But hold on. 00:03:12.246 --> 00:03:16.436 align:middle Let's just all remember what our only job is as web developers: 00:03:16.926 --> 00:03:21.226 align:middle to understand the incoming request and send back a response, 00:03:21.686 --> 00:03:25.706 align:middle whether that's an HTML response, a JSON response of a PDF file. 00:03:25.796 --> 00:03:28.636 align:middle Symfony is modeled around this idea. 00:03:29.576 --> 00:03:32.756 align:middle Keep things simple: return new Response. 00:03:32.876 --> 00:03:37.146 align:middle The Response class is the one from the HttpFoundation component. 00:03:37.376 --> 00:03:38.696 align:middle Hit tab to auto-complete it. 00:03:39.046 --> 00:03:41.196 align:middle This adds the use statement on top that we need. 00:03:41.306 --> 00:03:45.956 align:middle For the content, how about: 'Under the Sea!': That's it! 00:03:48.486 --> 00:03:53.286 align:middle We've only created one file with one function, but we already have a route, a controller 00:03:53.496 --> 00:03:55.496 align:middle and a lot of sea floor that needs discovering! 00:03:55.566 --> 00:03:57.856 align:middle If you refresh the homepage, well... 00:03:57.856 --> 00:03:59.676 align:middle that's not going to work. 00:04:00.046 --> 00:04:03.666 align:middle Navigate instead to the URL: /genus. 00:04:03.706 --> 00:04:09.046 align:middle Woh! There's your first page in Symfony, done in about 10 lines of code. 00:04:09.146 --> 00:04:10.576 align:middle Simple enough for you? 00:04:10.576 --> 00:04:14.106 align:middle Next, let's create a dynamic URL.