WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.076 --> 00:00:03.336 align:middle We just gave our site a design makeover... 00:00:03.406 --> 00:00:08.786 align:middle which means we updated our templates to include HTML elements with a bunch of Tailwind classes. 00:00:09.246 --> 00:00:09.736 align:middle The result? 00:00:10.026 --> 00:00:12.206 align:middle A site that's easy on the eyes. 00:00:12.636 --> 00:00:15.406 align:middle For some parts of the templates, things are still dynamic: 00:00:15.626 --> 00:00:18.256 align:middle we have Twig code to print out the captain and class. 00:00:18.666 --> 00:00:21.276 align:middle But in other parts, everything is hard-coded. 00:00:21.656 --> 00:00:24.996 align:middle And... this is pretty typical: a frontend developer might code 00:00:24.996 --> 00:00:27.146 align:middle up the site in HTML & Tailwind... 00:00:27.386 --> 00:00:31.066 align:middle but leave it for you to make it dynamic and bring it to life. 00:00:31.646 --> 00:00:36.656 align:middle At the top of homepage.html.twig, this long <aside> element is the sidebar. 00:00:36.986 --> 00:00:40.226 align:middle It's fine that this code lives in homepage.html.twig... 00:00:40.526 --> 00:00:42.736 align:middle but it does take up a lot of space! 00:00:43.006 --> 00:00:46.386 align:middle And what if we want to reuse this sidebar on another page? 00:00:47.046 --> 00:00:51.876 align:middle One great feature of Twig is the ability to take "chunks" of HTML and isolate them 00:00:51.876 --> 00:00:54.326 align:middle into their own templates so you can reuse them. 00:00:54.786 --> 00:00:56.886 align:middle These are called template partials... 00:00:57.116 --> 00:00:59.446 align:middle since they hold code for just part of the page. 00:01:00.026 --> 00:01:04.036 align:middle Copy this code, and in the main/ directory - though this could go anywhere - 00:01:04.296 --> 00:01:08.796 align:middle add a new file called _shipStatusAside.html.twig. 00:01:09.496 --> 00:01:10.366 align:middle Paste inside. 00:01:11.266 --> 00:01:16.586 align:middle Back in homepage.html.twig, delete that, then include it with {{ - 00:01:16.866 --> 00:01:20.386 align:middle so the say something syntax - include() and the name 00:01:20.386 --> 00:01:25.006 align:middle of the template: main/_shipStatusAside.html.twig. 00:01:25.626 --> 00:01:26.956 align:middle Try it out! 00:01:27.396 --> 00:01:28.976 align:middle And... no change! 00:01:29.446 --> 00:01:33.656 align:middle The include() statement is simple: Render this template and give it the same variables 00:01:33.656 --> 00:01:38.326 align:middle that I have If you're wondering why I prefixed the template with an underscore... 00:01:38.636 --> 00:01:39.386 align:middle no reason! 00:01:39.716 --> 00:01:44.476 align:middle It's just a convention that helps me know that this template holds only a part of the page. 00:01:45.146 --> 00:01:49.356 align:middle In the homepage template, we can focus on the ship list below, which is this area. 00:01:50.066 --> 00:01:51.876 align:middle Right now, there's just one ship... 00:01:52.126 --> 00:01:53.356 align:middle and it's hard-coded. 00:01:53.986 --> 00:01:58.026 align:middle Our intention is to list every ship that we're currently repairing. 00:01:58.486 --> 00:02:02.026 align:middle And we do already have a ships variable that we're using at the bottom: 00:02:02.596 --> 00:02:04.946 align:middle it's an array of Starship objects. 00:02:06.046 --> 00:02:09.796 align:middle So for the first time in Twig, we need to loop over an array! 00:02:10.276 --> 00:02:14.256 align:middle To do that, I'll remove this comment, and say {% - 00:02:14.526 --> 00:02:19.236 align:middle so the do something tag - then for ship in ships. 00:02:19.696 --> 00:02:24.906 align:middle ships is the array variable we already have and ship is the new variable name in the loop 00:02:25.056 --> 00:02:27.516 align:middle that represents a single Starship object. 00:02:28.276 --> 00:02:31.836 align:middle At the bottom, add {% endfor %}. 00:02:31.836 --> 00:02:32.726 align:middle And already... 00:02:32.856 --> 00:02:36.426 align:middle when we try it, we get three hard-coded ships! 00:02:36.776 --> 00:02:37.756 align:middle That's an improvement! 00:02:38.506 --> 00:02:43.326 align:middle Next: it's time for a plot twist that'll lead us to creating a PHP enum.