WEBVTT

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

00:00:01.076 --> 00:00:06.006 align:middle
Let's create a "show page" for ships: a page
that displays the details for just one ship.

00:00:06.586 --> 00:00:08.446 align:middle
The homepage lives in MainController.

00:00:08.686 --> 00:00:11.766 align:middle
And so we could add another
route and method here.

00:00:12.126 --> 00:00:16.186 align:middle
But as my site grows, I'm probably
going to have multiple pages related

00:00:16.186 --> 00:00:18.656 align:middle
to starships: maybe to edit and delete them.

00:00:18.656 --> 00:00:22.916 align:middle
So instead, in the Controller/
directory, create a new class.

00:00:23.256 --> 00:00:28.596 align:middle
Call it StarshipController, and, as
usual, extend AbstractController.

00:00:29.416 --> 00:00:31.136 align:middle
Inside, let's get to work!

00:00:31.486 --> 00:00:37.916 align:middle
Add a public function called show(), I'll
add the Response return type, then the route,

00:00:37.916 --> 00:00:42.566 align:middle
with /starships/ and a wildcard called {id}.

00:00:42.566 --> 00:00:47.136 align:middle
And again, it's optional, but
I'll be fancy and add the \d+

00:00:47.256 --> 00:00:49.266 align:middle
so the wildcard only matches a number.

00:00:50.196 --> 00:00:56.596 align:middle
Now, because we have an {id} wildcard, we are
allowed to have an $id argument down here.

00:00:57.626 --> 00:01:00.066 align:middle
dd($id) to see how we're doing so far.

00:01:00.696 --> 00:01:03.406 align:middle
Try it. Head to /starships/2.

00:01:04.086 --> 00:01:08.226 align:middle
Lovely! Now we're going to do
something familiar: take this $id

00:01:08.226 --> 00:01:11.546 align:middle
and query our imaginary database
for the matching Starship.

00:01:12.116 --> 00:01:17.576 align:middle
The key to doing this is our StarshipRepository
service and its helpful find() method.

00:01:18.626 --> 00:01:22.026 align:middle
In the controller, add a
StarshipRepository $repository argument...

00:01:22.446 --> 00:01:26.636 align:middle
then say $ship equals $repository->find($id).

00:01:26.636 --> 00:01:29.016 align:middle
And if not $ship, trigger a 404 page

00:01:29.016 --> 00:01:33.726 align:middle
with throw $this->createNotFoundException()
and starship not found.

00:01:34.526 --> 00:01:40.066 align:middle
Cool! At the bottom, instead of returning
JSON, render a template: return $this->render()

00:01:40.256 --> 00:01:45.756 align:middle
and follow the standard naming convention
for templates: starship/show.html.twig.

00:01:46.726 --> 00:01:49.156 align:middle
Pass this one variable: $ship.

00:01:52.516 --> 00:01:53.926 align:middle
Controller, check!

00:01:54.456 --> 00:01:56.136 align:middle
Next, in the templates/ directory,

00:01:56.256 --> 00:02:01.106 align:middle
we could create a starship/
directory and show.html.twig inside.

00:02:01.566 --> 00:02:05.896 align:middle
But I want to show you a shortcut
from the Symfony PhpStorm plugin.

00:02:06.526 --> 00:02:09.616 align:middle
Click on the template name,
press Alt+Enter and...

00:02:09.816 --> 00:02:10.626 align:middle
check it out!

00:02:11.026 --> 00:02:13.556 align:middle
On top it says "Twig: Create Template".

00:02:14.156 --> 00:02:16.246 align:middle
Confirm the path and boom!

00:02:16.586 --> 00:02:18.386 align:middle
We've got our new template!

00:02:18.696 --> 00:02:20.296 align:middle
It's... hiding over here.

00:02:20.816 --> 00:02:23.796 align:middle
There it is: starship/show.html.twig.

00:02:24.576 --> 00:02:30.516 align:middle
Pretty much every template starts the
same: {% extend 'base.html.twig' %}...

00:02:30.516 --> 00:02:32.696 align:middle
then override some blocks!

00:02:32.696 --> 00:02:33.426 align:middle
Override title...

00:02:33.736 --> 00:02:37.476 align:middle
and this time, let's use that
ship variable: ship.name.

00:02:37.476 --> 00:02:39.406 align:middle
Finish with endblock.

00:02:40.046 --> 00:02:42.596 align:middle
And for the main content, add the block body...

00:02:43.906 --> 00:02:46.516 align:middle
endblock and put an h1 inside.

00:02:47.356 --> 00:02:49.356 align:middle
Print ship.name again and...

00:02:49.356 --> 00:02:51.036 align:middle
I'll paste in a table with some info.

00:02:51.426 --> 00:02:54.406 align:middle
Nothing special here: we're
just printing basic ship data.

00:02:55.456 --> 00:02:56.776 align:middle
When we try the page...

00:02:57.486 --> 00:02:58.866 align:middle
it's alive!

00:02:59.466 --> 00:03:05.746 align:middle
Next question: from the homepage, how could
we add a link to the new ship show page?

00:03:06.356 --> 00:03:11.806 align:middle
The most obvious option is to hardcode
the URL, like /starships/ then the id.

00:03:12.316 --> 00:03:14.056 align:middle
But there's a better way.

00:03:14.536 --> 00:03:20.446 align:middle
Instead, we're going to tell Symfony: Hey,
I want to generate a URL to this route.

00:03:21.126 --> 00:03:25.446 align:middle
The advantage is that if we decide
later to change the URL of this route,

00:03:25.696 --> 00:03:28.096 align:middle
every link to this will update automatically.

00:03:28.586 --> 00:03:29.176 align:middle
Let me show you.

00:03:29.176 --> 00:03:34.106 align:middle
Find your terminal and run: php bin/console
debug:router I haven't mentioned it yet,

00:03:34.256 --> 00:03:36.586 align:middle
but every route has an internal name.

00:03:37.046 --> 00:03:40.866 align:middle
Right now, they're being
auto-generated by Symfony, which is fine.

00:03:41.356 --> 00:03:45.806 align:middle
But as soon as you want to generate a
URL to a route, we should take control

00:03:45.806 --> 00:03:48.136 align:middle
of that name to make sure it never changes.

00:03:48.136 --> 00:03:51.166 align:middle
Find the show page route and add a name key.

00:03:52.356 --> 00:03:55.066 align:middle
I'll use app_starship_show.

00:03:55.886 --> 00:04:00.466 align:middle
The name could be anything, but this is the
convention I follow: app because it's a route

00:04:00.466 --> 00:04:04.496 align:middle
that I'm making in my app, then the
controller class name and method name.

00:04:05.666 --> 00:04:07.796 align:middle
Naming a route doesn't change how it works.

00:04:08.056 --> 00:04:10.706 align:middle
But it does let us generate a URL to it.

00:04:11.206 --> 00:04:13.916 align:middle
Open up templates/main/homepage.html.twig.

00:04:14.856 --> 00:04:17.946 align:middle
Down here, turn the ship name into a link.

00:04:18.536 --> 00:04:22.916 align:middle
I'll put this onto multiple lines
and add an a tag with href="".

00:04:23.486 --> 00:04:28.806 align:middle
To generate the URL, say {{ path()
}} and pass it the name of the route.

00:04:29.456 --> 00:04:31.416 align:middle
I'll put the closing tag on the other side.

00:04:33.646 --> 00:04:36.116 align:middle
If we stop now, this won't quite work.

00:04:36.626 --> 00:04:40.596 align:middle
On the homepage: Some mandatory
parameters are missing - id -

00:04:40.766 --> 00:04:43.546 align:middle
to generate a URL for route app_starship_show.

00:04:44.156 --> 00:04:44.966 align:middle
That makes sense!

00:04:45.326 --> 00:04:47.136 align:middle
We're telling Symfony: Howdy!

00:04:47.366 --> 00:04:49.326 align:middle
I want to generate a URL to this route.

00:04:49.326 --> 00:04:51.746 align:middle
Symfony then responds: Cool...

00:04:51.746 --> 00:04:54.496 align:middle
except that this route has a wildcard in it.

00:04:54.496 --> 00:04:55.186 align:middle
So like...

00:04:55.316 --> 00:04:58.606 align:middle
what do you want me to put
in the URL for the id part?

00:04:59.266 --> 00:05:04.806 align:middle
When there's a wildcard in the route, we need
to add a second argument to path() with {}.

00:05:05.356 --> 00:05:08.216 align:middle
This is Twig's associative array syntax.

00:05:08.216 --> 00:05:12.566 align:middle
So it's exactly like JavaScript:
it's a key-value pair list.

00:05:13.206 --> 00:05:15.496 align:middle
Pass id set to myShip.id.

00:05:16.036 --> 00:05:17.026 align:middle
And now...

00:05:17.426 --> 00:05:21.296 align:middle
got it! Look at that URL: /starships/3.

00:05:22.316 --> 00:05:24.776 align:middle
Alrighty, our site is still ugly.

00:05:24.776 --> 00:05:28.776 align:middle
It's time to start fixing that by
bringing in Tailwind CSS and learning

00:05:28.776 --> 00:05:30.936 align:middle
about Symfony's AssetMapper component.