WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.086 --> 00:00:04.926 align:middle
Adding the .value to the end of the
enum to print it works like a charm.

00:00:05.216 --> 00:00:07.796 align:middle
But I want to show another,
more elegant, solution.

00:00:08.506 --> 00:00:13.526 align:middle
In Starship, it'll probably be common for us
to want to get the string status of a Starship.

00:00:13.926 --> 00:00:18.986 align:middle
To make that easier, why not add a shortcut
method here called getStatusString()?

00:00:19.556 --> 00:00:24.616 align:middle
This will return a string, and
inside, return $this->status->value.

00:00:25.556 --> 00:00:30.526 align:middle
Thanks to this, over in the template,
we can shorten to ship.statusString.

00:00:31.376 --> 00:00:33.826 align:middle
Oh, and this is more Twig smartness!

00:00:34.126 --> 00:00:37.946 align:middle
There is no property called
statusString on Starship!

00:00:38.356 --> 00:00:39.366 align:middle
But Twig doesn't care.

00:00:39.676 --> 00:00:43.516 align:middle
It sees that there is a getStatusString()
method and calls that.

00:00:44.356 --> 00:00:47.986 align:middle
Watch: when we refresh, the page still works.

00:00:48.446 --> 00:00:51.476 align:middle
I really like this solution,
so I'll copy that...

00:00:51.886 --> 00:00:54.276 align:middle
and repeat it up here for the alt attribute.

00:00:54.916 --> 00:00:59.816 align:middle
And while we're fixing this, in
show.html.twig, we print the status there too.

00:01:00.456 --> 00:01:02.216 align:middle
So I'll make that same change...

00:01:02.586 --> 00:01:03.806 align:middle
then close this.

00:01:04.386 --> 00:01:09.696 align:middle
Ok: let's finish making our homepage template
dynamic: it's smooth space sailing from here.

00:01:10.206 --> 00:01:16.846 align:middle
For the ship name, {{ ship.name }},
for the captain, {{ ship.captain }}.

00:01:17.476 --> 00:01:20.696 align:middle
And down here for the class, {{ ship.class }}.

00:01:21.506 --> 00:01:25.956 align:middle
Oh, and let's fill in the link: {{
path() }} then the name of the route.

00:01:26.336 --> 00:01:30.996 align:middle
We're linking to the show page for the
ship, so the route is app_starship_show.

00:01:31.836 --> 00:01:36.216 align:middle
And because this has an id
wildcard, pass id set to ship.id.

00:01:36.996 --> 00:01:40.016 align:middle
And now, so much better!

00:01:40.486 --> 00:01:43.046 align:middle
It looks nice and we can click these links.

00:01:43.916 --> 00:01:45.956 align:middle
But... the image is still broken.

00:01:46.716 --> 00:01:49.856 align:middle
Earlier, when we copied the
images into our assets/ directory,

00:01:50.016 --> 00:01:52.916 align:middle
I included three files for the three statuses.

00:01:53.806 --> 00:01:57.726 align:middle
Up here, we are "kind of" pointing
to the in progress status...

00:01:58.056 --> 00:02:01.626 align:middle
but this isn't the right way to
reference images in the assets/ directory.

00:02:02.076 --> 00:02:06.196 align:middle
Instead, say {{ asset() }}
and pass the path relative

00:02:06.196 --> 00:02:09.046 align:middle
to the assets/ directory,
called the "logical" path.

00:02:10.326 --> 00:02:11.536 align:middle
If we try that now...

00:02:11.856 --> 00:02:13.126 align:middle
we're closer.

00:02:13.506 --> 00:02:17.066 align:middle
But the "in progress" part needs
to be dynamic based on the status.

00:02:17.656 --> 00:02:23.396 align:middle
One thing we could try is Twig concatenation:
to add ship.status to the string.

00:02:23.956 --> 00:02:26.716 align:middle
That is possible, though it's a bit ugly.

00:02:27.226 --> 00:02:31.586 align:middle
Instead, let's revisit the solution we
used a minute ago: making all the data

00:02:31.586 --> 00:02:33.896 align:middle
about our Starship easily accessible...

00:02:33.986 --> 00:02:35.666 align:middle
from the Starship class.

00:02:36.296 --> 00:02:41.356 align:middle
Here's what I mean: add a public function
getStatusImageFilename() that returns a string.

00:02:42.356 --> 00:02:45.166 align:middle
Let's do all the logic for
creating the filename right here.

00:02:45.746 --> 00:02:47.586 align:middle
I'll paste in a match function.

00:02:48.486 --> 00:02:53.726 align:middle
This says: check $this->status and if
it's equal to WAITING, return this string.

00:02:54.226 --> 00:02:57.556 align:middle
If it's equal to IN_PROGRESS
return this string and so on.

00:02:58.376 --> 00:03:04.006 align:middle
And exactly like before, because we have a
getStatusImageFilename() method, we get to,

00:03:04.166 --> 00:03:08.796 align:middle
in Twig, pretend like we have
a statusImageFilename property.

00:03:09.736 --> 00:03:12.236 align:middle
And now, we got it!

00:03:12.876 --> 00:03:14.056 align:middle
Final things!

00:03:14.316 --> 00:03:18.216 align:middle
Let's fill in some missing links, like
this logo should go to the homepage.

00:03:18.626 --> 00:03:19.156 align:middle
Right now...

00:03:19.516 --> 00:03:20.916 align:middle
it goes nowhere.

00:03:21.466 --> 00:03:25.756 align:middle
Remember, when we want to link to a page,
we need to make sure that route has a name.

00:03:26.176 --> 00:03:28.866 align:middle
In src/Controller/MainController.php...

00:03:28.866 --> 00:03:30.796 align:middle
our homepage does not have a name.

00:03:31.496 --> 00:03:35.426 align:middle
Ok, it has an auto-generated name,
but we don't want to rely on that.

00:03:35.876 --> 00:03:38.636 align:middle
Add name: set to app_homepage.

00:03:39.356 --> 00:03:42.266 align:middle
Or you could use app_main_homepage.

00:03:42.896 --> 00:03:45.696 align:middle
To link the logo, in base.html.twig...

00:03:46.086 --> 00:03:46.796 align:middle
here it is...

00:03:47.186 --> 00:03:50.446 align:middle
Use {{ path('app_homepage') }}.

00:03:51.736 --> 00:03:55.166 align:middle
Copy that and repeat it below
for another home link.

00:03:55.986 --> 00:03:58.056 align:middle
We'll leave these other links
for a future tutorial.

00:03:58.756 --> 00:04:01.196 align:middle
Back at the browser, click that logo!

00:04:01.786 --> 00:04:05.656 align:middle
All good. The final missing
link is over on the show page.

00:04:05.986 --> 00:04:08.296 align:middle
This "back" link should also go to the homepage.

00:04:08.726 --> 00:04:10.466 align:middle
Open up show.html.twig.

00:04:10.816 --> 00:04:14.816 align:middle
And up on top - there it is
- I'll paste that same link.

00:04:15.716 --> 00:04:18.136 align:middle
Ok team, the design is done!

00:04:18.286 --> 00:04:20.816 align:middle
Congrats! Treat yourself to a tea...

00:04:20.816 --> 00:04:21.886 align:middle
or latte...

00:04:21.886 --> 00:04:25.376 align:middle
or donut or a walk amongst nature to celebrate.

00:04:25.676 --> 00:04:26.766 align:middle
Because this is huge!

00:04:27.026 --> 00:04:29.296 align:middle
Our site looks and feels real.

00:04:29.576 --> 00:04:30.716 align:middle
I'm thrilled.

00:04:31.326 --> 00:04:33.266 align:middle
Now we can focus on the finer details.

00:04:33.496 --> 00:04:37.056 align:middle
Like, when we click this link, the
sidebar is supposed to collapse.

00:04:37.646 --> 00:04:42.966 align:middle
To handle that, I want to introduce you to my
favorite tool for writing JavaScript: Stimulus.