WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.246 --> 00:00:03.576 align:middle I gotta say, I miss the 90's. 00:00:04.076 --> 00:00:06.556 align:middle Well, not the beanie babies and... 00:00:06.556 --> 00:00:09.286 align:middle definitely not the way I dressed back then, but... 00:00:09.566 --> 00:00:10.876 align:middle the mix tapes. 00:00:11.536 --> 00:00:15.746 align:middle If you weren't a kid in the 80's or 90's, you may not know how hard it was 00:00:15.746 --> 00:00:18.786 align:middle to share your favorite tunes with your friends. 00:00:19.386 --> 00:00:24.846 align:middle Oh yea, I'm talking about a Michael Jackson, Phil Collins, Paula Abdul mashup. 00:00:25.056 --> 00:00:25.886 align:middle Perfection. 00:00:26.816 --> 00:00:31.406 align:middle To capitalize off of that nostalgia, but with a hipster twist, 00:00:31.976 --> 00:00:35.306 align:middle we're going to create a brand new app called Mixed Vinyl: 00:00:35.726 --> 00:00:40.416 align:middle a store where users can create mix tapes - complete with Boyz || Men, 00:00:40.556 --> 00:00:42.856 align:middle Mariah Carey and Smashing Pumpkins... 00:00:43.136 --> 00:00:45.846 align:middle except pressed onto a vinyl record. 00:00:46.496 --> 00:00:49.646 align:middle Hmm, I might need to put a record player in my car. 00:00:50.666 --> 00:00:55.756 align:middle The page we're looking at, which is super cute and changes colors when we refresh... 00:00:56.156 --> 00:00:57.946 align:middle is not a real page. 00:00:58.186 --> 00:01:02.916 align:middle It's just a way for Symfony to say "hi" and link us to the documentation. 00:01:03.406 --> 00:01:06.986 align:middle And by the way, Symfony's documentation is great, 00:01:07.096 --> 00:01:09.666 align:middle so definitely check it out as you're learning. 00:01:10.996 --> 00:01:17.996 align:middle Ok: every web framework in any language has the same job: to help us create pages, 00:01:18.356 --> 00:01:24.076 align:middle whether those are HTML pages, JSON API responses or ASCII art. 00:01:24.596 --> 00:01:30.936 align:middle And pretty much every framework does this in the same way: via a route & controller system. 00:01:31.666 --> 00:01:35.586 align:middle The route defines the URL for the page and points to a controller. 00:01:36.236 --> 00:01:40.216 align:middle The controller is a PHP function that builds that page. 00:01:40.766 --> 00:01:43.736 align:middle So route + controller = page. 00:01:44.106 --> 00:01:45.206 align:middle It's math people. 00:01:46.146 --> 00:01:48.016 align:middle We're going to build these two things... 00:01:48.186 --> 00:01:50.036 align:middle kind of in reverse. 00:01:50.396 --> 00:01:53.336 align:middle So first, let's create the controller function. 00:01:54.156 --> 00:01:59.986 align:middle In Symfony, the controller function is always a method inside of a PHP class. 00:02:00.736 --> 00:02:07.266 align:middle I'll show you: in the src/Controller/ directory, create a new PHP class. 00:02:07.326 --> 00:02:11.206 align:middle Let's call it VinylController, but the name could be anything. 00:02:12.256 --> 00:02:13.956 align:middle And, congrats! 00:02:14.126 --> 00:02:16.066 align:middle It's our first PHP class! 00:02:16.476 --> 00:02:18.276 align:middle And guess where it lives? 00:02:18.616 --> 00:02:23.686 align:middle In the src/ directory, where all PHP classes will live. 00:02:23.686 --> 00:02:28.876 align:middle And for the most part, it doesn't matter how you organize things inside src/: 00:02:29.266 --> 00:02:32.796 align:middle you can usually put things into whatever directory you want 00:02:32.796 --> 00:02:34.896 align:middle and name the classes whatever you want. 00:02:35.106 --> 00:02:37.056 align:middle So flex your creativity. 00:02:37.566 --> 00:02:39.766 align:middle But there are two important rules. 00:02:39.766 --> 00:02:46.716 align:middle First, notice the namespace that PhpStorm added on top of the class: App\Controller. 00:02:47.326 --> 00:02:50.786 align:middle However you decide to organize your src/ directory, 00:02:51.036 --> 00:02:55.346 align:middle the namespace of a class must match the directory structure... 00:02:55.536 --> 00:02:56.776 align:middle starting with App. 00:02:57.556 --> 00:03:01.316 align:middle You can imagine that the App\ namespace points to the src/ directory. 00:03:02.376 --> 00:03:06.046 align:middle Then, if you put a file in a Controller/ sub-directory, 00:03:06.266 --> 00:03:09.326 align:middle it needs a Controller part in its namespace. 00:03:09.966 --> 00:03:13.386 align:middle If you ever mess this up, like you typo something 00:03:13.416 --> 00:03:16.156 align:middle or forget this, you're gonna have a bad time. 00:03:16.296 --> 00:03:22.286 align:middle PHP will not be able to find the class: you'll get a "class not found" error. 00:03:23.156 --> 00:03:26.016 align:middle Oh, and the other rule is that the name 00:03:26.016 --> 00:03:31.516 align:middle of a file must match the class name inside of it, plus .php. 00:03:31.516 --> 00:03:34.886 align:middle Hence, VinylController.php. 00:03:34.886 --> 00:03:39.016 align:middle We'll follow those two rules for all files we create in src/. 00:03:39.706 --> 00:03:42.296 align:middle Back to our job of creating a controller function. 00:03:43.356 --> 00:03:46.596 align:middle Inside, add a new public method called homepage(). 00:03:47.316 --> 00:03:50.676 align:middle And no, the name of this method doesn't matter either: 00:03:51.256 --> 00:03:54.026 align:middle try naming it after your cat: it'll work! 00:03:54.106 --> 00:03:57.936 align:middle For now, I'm just going to put a die() statement with a message. 00:04:01.006 --> 00:04:01.876 align:middle Good start! 00:04:02.646 --> 00:04:08.146 align:middle Now that we have a controller function, let's create a route, which defines the URL 00:04:08.146 --> 00:04:11.306 align:middle to our new page and points to this controller. 00:04:12.146 --> 00:04:18.836 align:middle There are a few ways to create routes in Symfony, but almost everyone uses attributes. 00:04:18.906 --> 00:04:19.956 align:middle Here's how it works. 00:04:20.556 --> 00:04:22.126 align:middle Right above this method, say #[]. 00:04:22.126 --> 00:04:32.386 align:middle This is the PHP 8 attribute syntax, which is a way to add configuration to your code. 00:04:32.386 --> 00:04:34.976 align:middle Start typing Route. 00:04:35.286 --> 00:04:40.006 align:middle But before you finish that, notice that PhpStorm is auto-completing it. 00:04:40.756 --> 00:04:42.886 align:middle Hit tab to let it finish. 00:04:43.636 --> 00:04:46.766 align:middle That, nicely, completed the word Route for me. 00:04:47.246 --> 00:04:52.066 align:middle But more importantly, it added a use statement up on top. 00:04:52.846 --> 00:04:57.386 align:middle Whenever you use an attribute, you must have a corresponding use statement 00:04:57.426 --> 00:04:58.916 align:middle for it at the top of the file. 00:04:59.756 --> 00:05:04.496 align:middle Inside Route, pass /, which will be the URL to our page. 00:05:05.076 --> 00:05:06.396 align:middle And... done! 00:05:06.896 --> 00:05:10.716 align:middle This route defines the URL and points to this controller... 00:05:11.086 --> 00:05:13.936 align:middle simply because it's right above this controller. 00:05:15.096 --> 00:05:16.156 align:middle Let's try it! 00:05:17.036 --> 00:05:18.086 align:middle Refresh and... 00:05:18.816 --> 00:05:20.346 align:middle congratulations! 00:05:20.586 --> 00:05:26.726 align:middle Symfony looked at the URL, saw that it matched the route - / or no slash is the same 00:05:26.726 --> 00:05:31.176 align:middle for the homepage - executed our controller and hit the die statement! 00:05:31.776 --> 00:05:35.206 align:middle Oh, and by the way, I keep saying controller function. 00:05:35.556 --> 00:05:39.136 align:middle That's commonly just called the "controller" or the "action"... 00:05:39.366 --> 00:05:40.656 align:middle just to confuse things. 00:05:41.536 --> 00:05:47.706 align:middle Ok, so inside of the controller - or action - we can write whatever code we want 00:05:47.806 --> 00:05:54.396 align:middle to build the page, like make database queries, API calls, render a template, whatever. 00:05:54.836 --> 00:05:57.386 align:middle We are going to do all of that eventually. 00:05:58.076 --> 00:06:03.876 align:middle The only thing that Symfony cares about is that your controller returns a Response object. 00:06:04.776 --> 00:06:10.376 align:middle Check it out: type return and then start typing Response. 00:06:10.406 --> 00:06:15.616 align:middle Woh: there are quite a few Response classes already in our code... 00:06:15.866 --> 00:06:17.546 align:middle and two are from Symfony! 00:06:18.296 --> 00:06:20.886 align:middle We want the one from HTTP foundation. 00:06:21.566 --> 00:06:25.616 align:middle HTTP foundation is one of those Symfony libraries... 00:06:25.696 --> 00:06:30.376 align:middle and it gives us nice classes for things like the Request, Response and Session. 00:06:31.206 --> 00:06:35.056 align:middle Hit tab to auto-complete and finish that. 00:06:35.056 --> 00:06:37.246 align:middle Oh, I should have said return new response. 00:06:38.676 --> 00:06:39.406 align:middle That's better. 00:06:40.186 --> 00:06:41.246 align:middle Now hit tab. 00:06:42.326 --> 00:06:47.026 align:middle When I let Response auto-complete the first time, very importantly, 00:06:47.086 --> 00:06:50.366 align:middle PhpStorm added this use statement on top. 00:06:51.236 --> 00:06:56.596 align:middle Every time we reference a class or interface, we will need to add a use statement 00:06:56.596 --> 00:06:58.676 align:middle to the top of the file we're working in. 00:06:59.496 --> 00:07:04.626 align:middle By letting PhpStorm auto-complete that for me, it added the use statement automatically. 00:07:05.196 --> 00:07:08.456 align:middle I'll do that every time I reference a class. 00:07:09.156 --> 00:07:13.626 align:middle Oh, and if you're still a bit new to PHP namespaces and use statements, 00:07:13.886 --> 00:07:18.146 align:middle check out our short and free PHP namespaces tutorial. 00:07:19.396 --> 00:07:27.436 align:middle Anyways, inside of Response, we can put whatever we want to return to the user: HTML, JSON or, 00:07:27.646 --> 00:07:35.466 align:middle for now, a simple message, like the title of the Mixed vinyl we're working on: PB and jams. 00:07:37.576 --> 00:07:39.806 align:middle Ok team, let's see what happens! 00:07:39.806 --> 00:07:42.056 align:middle Refresh and... 00:07:42.446 --> 00:07:43.836 align:middle PB and Jams! 00:07:44.446 --> 00:07:50.636 align:middle It may not like much, but we just built our first fully-functional Symfony page! 00:07:51.006 --> 00:07:53.456 align:middle Route + controller = profit! 00:07:53.806 --> 00:07:57.836 align:middle And you've just learned the most foundational part of Symfony... 00:07:58.176 --> 00:07:59.716 align:middle and we're just getting started. 00:08:00.226 --> 00:08:04.926 align:middle Oh, and because our controllers always return a Response object, it's optional, 00:08:05.236 --> 00:08:08.996 align:middle but you can add a return type to this function if you want to. 00:08:09.446 --> 00:08:13.096 align:middle But that doesn't change anything: it's just a nice way to code. 00:08:14.266 --> 00:08:16.426 align:middle Next I'm feeling pretty confident. 00:08:16.496 --> 00:08:23.126 align:middle So let's create another page, but with a much fancier route that matches a wildcard pattern.