WEBVTT

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

00:00:01.036 --> 00:00:05.266 align:middle
Creating a route in YAML that points to
a controller function is pretty simple.

00:00:05.596 --> 00:00:08.646 align:middle
But there's an even easier
way to create routes...

00:00:08.846 --> 00:00:10.666 align:middle
and I love it.

00:00:10.996 --> 00:00:12.666 align:middle
It's called: annotations.

00:00:12.666 --> 00:00:16.376 align:middle
First, comment-out the YAML route.

00:00:16.816 --> 00:00:18.736 align:middle
Basically, remove it entirely.

00:00:19.386 --> 00:00:21.686 align:middle
To prove it's not working, refresh the homepage.

00:00:22.126 --> 00:00:24.166 align:middle
Yep! It's back to the welcome page.

00:00:24.866 --> 00:00:27.476 align:middle
Annotations are a special config format...

00:00:27.976 --> 00:00:34.156 align:middle
and support for annotations is not something
that comes standard in our tiny Symfony app.

00:00:34.576 --> 00:00:36.276 align:middle
And... that's fine!

00:00:36.656 --> 00:00:43.486 align:middle
In fact, that's the whole philosophy of Symfony:
start small and add features when you need them.

00:00:43.556 --> 00:00:48.436 align:middle
To add annotations support, we'll use
Composer to require a new package.

00:00:48.806 --> 00:00:52.386 align:middle
If you don't have Composer installed
already, go to https://getcomposer.org.

00:00:52.856 --> 00:00:58.756 align:middle
Once you do, run: composer require
annotations If you're familiar with composer,

00:00:58.956 --> 00:01:02.136 align:middle
that package name might look strange.

00:01:02.696 --> 00:01:09.886 align:middle
And in reality, it installed a totally different
package: sensio/framework-extra-bundle.

00:01:10.766 --> 00:01:15.396 align:middle
Near the bottom of the command, it
mentions something about two recipes.

00:01:15.876 --> 00:01:21.186 align:middle
We'll talk about what's going on soon:
it's part of what makes Symfony special.

00:01:22.336 --> 00:01:25.776 align:middle
Anyways, now that annotations
support is installed,

00:01:25.966 --> 00:01:29.316 align:middle
we can re-add our route via annotations.

00:01:29.816 --> 00:01:31.096 align:middle
What does that mean?

00:01:31.706 --> 00:01:39.056 align:middle
Above your controller function, say /**
and hit enter to create a PHPDoc section.

00:01:39.566 --> 00:01:44.496 align:middle
Then say @Route and auto-complete
the one from the Routing component.

00:01:45.696 --> 00:01:51.076 align:middle
Just like before, PhpStorm added the use
statement at the top of the class automatically.

00:01:52.056 --> 00:01:53.676 align:middle
Inside the parentheses, say "/".

00:01:53.866 --> 00:01:54.506 align:middle
That's it!

00:01:54.506 --> 00:02:03.496 align:middle
When the user goes to the homepage, it
will execute the function right below this.

00:02:04.256 --> 00:02:08.866 align:middle
I love annotations because they're
simple to read and keep the route

00:02:08.866 --> 00:02:11.306 align:middle
and controller right next to each other.

00:02:12.276 --> 00:02:13.146 align:middle
And yes...

00:02:13.366 --> 00:02:18.476 align:middle
annotations are literally
configuration inside PHP comments.

00:02:18.666 --> 00:02:25.126 align:middle
If you don't like them, you can always use
YAML or XML instead: Symfony is super flexible.

00:02:25.676 --> 00:02:28.996 align:middle
From a performance standpoint,
all the formats are the same.

00:02:29.946 --> 00:02:31.556 align:middle
Now when we refresh the homepage...

00:02:31.806 --> 00:02:33.026 align:middle
we're back!

00:02:34.006 --> 00:02:38.006 align:middle
This page will eventually list
some recently-asked questions.

00:02:38.516 --> 00:02:42.806 align:middle
When you click on a specific
question, it will need its own page.

00:02:43.706 --> 00:02:45.686 align:middle
Let's create a second route
and controller for that.

00:02:46.066 --> 00:02:48.396 align:middle
How? By creating a second method.

00:02:48.926 --> 00:02:51.126 align:middle
How about: public function show().

00:02:53.816 --> 00:03:00.256 align:middle
Above this, add @Route() and
set the URL to, how about,

00:03:00.526 --> 00:03:04.796 align:middle
/questions/how-to-tie-my-shoes-with-magic.

00:03:05.246 --> 00:03:06.206 align:middle
That would be awesome!

00:03:07.256 --> 00:03:13.516 align:middle
Inside, just like last time, return a new
Response: the one from HttpFoundation.

00:03:14.936 --> 00:03:19.346 align:middle
Future page to show a question Let's try it!

00:03:19.696 --> 00:03:24.296 align:middle
Copy the URL, move over to
your browser, paste and...

00:03:24.716 --> 00:03:28.416 align:middle
it works! We just created a second page...

00:03:28.656 --> 00:03:29.656 align:middle
in less than a minute.

00:03:30.736 --> 00:03:35.686 align:middle
By the way, no matter what URL we go
to - like this one or the homepage -

00:03:35.966 --> 00:03:41.336 align:middle
the PHP file that our web server
is executing is index.php.

00:03:41.336 --> 00:03:48.736 align:middle
It's as if we are going to /index.php/questions
/how-to-tie-my-shoes-with-magic.

00:03:49.276 --> 00:03:54.646 align:middle
The only reason you don't need
to have index.php in the URL is

00:03:54.646 --> 00:04:00.546 align:middle
because our local web server is configured
to execute index.php automatically.

00:04:01.166 --> 00:04:04.946 align:middle
On production, your Nginx or
Apache config will do the same.

00:04:05.536 --> 00:04:07.376 align:middle
Check the Symfony docs to learn how.

00:04:08.316 --> 00:04:12.106 align:middle
Eventually, we're going to have
a database full of questions.

00:04:12.296 --> 00:04:18.426 align:middle
And so, no, we are not going to
manually create one route per question.

00:04:18.986 --> 00:04:21.786 align:middle
Instead, we can make this route smarter.

00:04:22.336 --> 00:04:27.136 align:middle
Replace the how-to-tie-my-shoes-with-magic
part with {slug}.

00:04:27.496 --> 00:04:35.666 align:middle
When you have something between curly
braces in a route, it becomes a wildcard.

00:04:36.446 --> 00:04:40.316 align:middle
This route now matches /questions/ANYTHING.

00:04:41.006 --> 00:04:44.936 align:middle
The name {slug} is not important:
we could have used anything...

00:04:45.236 --> 00:04:47.416 align:middle
like {slugulusErecto}!

00:04:48.326 --> 00:04:49.786 align:middle
That makes no difference.

00:04:50.326 --> 00:04:58.186 align:middle
But whatever we call this wildcard - like
{slug} - we are now allowed to have an argument

00:04:58.186 --> 00:05:02.076 align:middle
to our controller with the same name: $slug...

00:05:03.346 --> 00:05:06.866 align:middle
which will be set to whatever
that part of the URL is.

00:05:07.946 --> 00:05:09.986 align:middle
Let's use that to make our page fancier!

00:05:10.266 --> 00:05:18.986 align:middle
Let's use sprintf(), say "the"
question and add a %s placeholder.

00:05:21.076 --> 00:05:23.026 align:middle
Pass $slug for that placeholder.

00:05:23.926 --> 00:05:27.036 align:middle
Sweet! Move over, refresh and...

00:05:27.296 --> 00:05:37.956 align:middle
love it! Change the URL to /questions
/accidentally-turned-cat-into-furry-shoes and...

00:05:37.956 --> 00:05:38.706 align:middle
that works too.

00:05:38.706 --> 00:05:43.916 align:middle
In the future, we'll use the $slug to
query the database for the question.

00:05:44.276 --> 00:05:48.236 align:middle
But since we're not there yet,
I'll use str_replace() ...

00:05:51.226 --> 00:05:56.836 align:middle
and ucwords() to make this
just a little more elegant.

00:05:57.306 --> 00:06:00.386 align:middle
It's still early, but the
page is starting come alive!

00:06:01.376 --> 00:06:04.416 align:middle
Next, our new app is hiding a secret!

00:06:04.696 --> 00:06:08.786 align:middle
A little command-line executable
that's filled with goodies.