WEBVTT

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

00:00:01.086 --> 00:00:03.426 align:middle
Let's create our first page!

00:00:04.176 --> 00:00:10.526 align:middle
Actually, this is the main job of a framework:
to give you a route and controller system.

00:00:11.846 --> 00:00:17.866 align:middle
A route is configuration that defines the
URL for a page and a controller is a function

00:00:17.866 --> 00:00:22.186 align:middle
that we write that actually
builds the content for that page.

00:00:22.936 --> 00:00:24.096 align:middle
And right now...

00:00:24.416 --> 00:00:26.956 align:middle
our app is really small!

00:00:27.846 --> 00:00:33.086 align:middle
Instead of weighing down your project with
every possible feature you could ever need -

00:00:33.086 --> 00:00:35.616 align:middle
after all, we're not in zero-gravity yet -

00:00:36.316 --> 00:00:40.776 align:middle
a Symfony app is basically just
a small route-controller system.

00:00:41.516 --> 00:00:45.986 align:middle
Later, we'll install more features
when we need them, like a warp drive!

00:00:46.676 --> 00:00:48.426 align:middle
Those always come in handy.

00:00:49.256 --> 00:00:52.616 align:middle
Adding more features is actually
going to be pretty awesome.

00:00:53.346 --> 00:00:54.256 align:middle
More on that later.

00:00:55.246 --> 00:00:59.626 align:middle
Open your app's main routing
file: config/routes.yaml.

00:01:00.526 --> 00:01:02.976 align:middle
Hey! We already have an example!

00:01:03.606 --> 00:01:04.446 align:middle
Uncomment that.

00:01:05.796 --> 00:01:09.566 align:middle
Ignore the index key for
now: that's the internal name

00:01:09.566 --> 00:01:11.626 align:middle
of the route, but it's not important yet.

00:01:12.406 --> 00:01:15.026 align:middle
This says that when someone
goes to the homepage - / -

00:01:15.246 --> 00:01:20.856 align:middle
Symfony should execute an index()
method in a DefaultController class.

00:01:22.576 --> 00:01:26.436 align:middle
Change this to ArticleController
and the method to homepage.

00:01:26.526 --> 00:01:27.976 align:middle
And... yea!

00:01:27.976 --> 00:01:29.816 align:middle
That's a route!

00:01:30.446 --> 00:01:36.136 align:middle
Hi route! It defines the URL and tells
Symfony what controller function to execute.

00:01:37.376 --> 00:01:40.976 align:middle
The controller class doesn't
exist yet, so let's create it!

00:01:41.616 --> 00:01:47.306 align:middle
Right-click on the Controller directory
and go to "New" or press Cmd+N on a Mac.

00:01:47.886 --> 00:01:49.036 align:middle
Choose "PHP Class".

00:01:50.176 --> 00:01:54.456 align:middle
And, yes! Remember that Composer
setup we did in Preferences?

00:01:54.896 --> 00:01:59.296 align:middle
Thanks to that, PhpStorm
correctly guesses the namespace!

00:01:59.886 --> 00:02:01.756 align:middle
The force is strong with this one...

00:02:02.816 --> 00:02:08.666 align:middle
The namespace for every class in src/ should
be App plus whatever sub-directory it's in.

00:02:09.546 --> 00:02:11.206 align:middle
Name this ArticleController.

00:02:15.056 --> 00:02:17.736 align:middle
And inside, add public function homepage().

00:02:19.206 --> 00:02:21.666 align:middle
This function is the controller...

00:02:21.666 --> 00:02:24.376 align:middle
and it's our place to build the page.

00:02:25.186 --> 00:02:32.046 align:middle
To be more confusing, it's also called an
"action", or "ghob" to its Klingon friends.

00:02:32.836 --> 00:02:38.286 align:middle
Anyways, we can do whatever we want
here: make database queries, API calls,

00:02:38.436 --> 00:02:43.246 align:middle
take soil samples looking for organic
materials or render a template.

00:02:44.116 --> 00:02:50.576 align:middle
There's just one rule: a controller
must return a Symfony Response object.

00:02:51.436 --> 00:02:58.016 align:middle
So let's say: return new Response():
we want the one from HttpFoundation.

00:02:59.216 --> 00:03:02.206 align:middle
Give it a calm message: OMG!

00:03:02.206 --> 00:03:03.996 align:middle
My first page already!

00:03:04.676 --> 00:03:06.516 align:middle
Wooo!! Ahem.

00:03:06.516 --> 00:03:12.466 align:middle
Oh, and check this out: when I let PhpStorm
auto-complete the Response class it added this

00:03:12.466 --> 00:03:15.206 align:middle
use statement to the top
of the file automatically.

00:03:15.756 --> 00:03:17.206 align:middle
You'll see me do that a lot.

00:03:17.886 --> 00:03:18.636 align:middle
Good job Storm!

00:03:19.636 --> 00:03:20.636 align:middle
Let's try the page!

00:03:21.046 --> 00:03:21.766 align:middle
Find your browser.

00:03:22.656 --> 00:03:27.206 align:middle
Oh, this "Welcome" page only shows if
you don't have any routes configured.

00:03:27.916 --> 00:03:29.646 align:middle
Refresh! Yes!

00:03:30.016 --> 00:03:31.906 align:middle
This is our page.

00:03:32.176 --> 00:03:33.826 align:middle
Our first of many.

00:03:34.616 --> 00:03:38.466 align:middle
That was pretty easy, but it can be easier!

00:03:39.016 --> 00:03:43.916 align:middle
Instead of creating our routes in YAML,
let's use a cool feature called annotations.

00:03:44.776 --> 00:03:47.636 align:middle
This is an extra feature,
so we need to install it.

00:03:47.636 --> 00:03:55.856 align:middle
Find your open terminal and run: composer
require annotations Interesting...

00:03:56.316 --> 00:04:02.326 align:middle
this annotations package actually
installed sensio/framework-extra-bundle.

00:04:03.286 --> 00:04:06.276 align:middle
We're going to talk about
how that works very soon.

00:04:07.246 --> 00:04:09.386 align:middle
Now, about these annotation routes.

00:04:10.286 --> 00:04:11.806 align:middle
Comment-out the YAML route.

00:04:12.576 --> 00:04:19.356 align:middle
Then, in ArticleController, above the
controller method, add /**, hit enter,

00:04:19.756 --> 00:04:22.616 align:middle
clear this out, and say @Route().

00:04:23.476 --> 00:04:28.206 align:middle
You can use either class - but make sure
PhpStorm adds the use statement on top.

00:04:28.626 --> 00:04:29.096 align:middle
Then add "/".

00:04:29.516 --> 00:04:30.506 align:middle
That's it!

00:04:31.126 --> 00:04:37.766 align:middle
The route is defined right above the controller,

00:04:38.636 --> 00:04:43.246 align:middle
which is why I love annotation
routes: everything is in one place.

00:04:44.026 --> 00:04:46.816 align:middle
But don't trust me, find
your browser and refresh.

00:04:47.856 --> 00:04:49.086 align:middle
It's a traaaap!

00:04:49.086 --> 00:04:50.506 align:middle
I mean, it works!

00:04:51.006 --> 00:04:53.006 align:middle
So what else can we do with routes?

00:04:53.906 --> 00:04:56.396 align:middle
Create another public function called show().

00:04:57.076 --> 00:05:00.766 align:middle
I want this page to eventually
display a full article.

00:05:02.406 --> 00:05:08.496 align:middle
Give it a route:
@Route("/news/why-asteroids-taste-like-bacon").

00:05:10.006 --> 00:05:12.976 align:middle
Eventually, this is how we
want our URLs to look.

00:05:13.576 --> 00:05:17.926 align:middle
This is called a "slug", it's
a URL version of the title.

00:05:19.306 --> 00:05:24.836 align:middle
As usual, return a new Response('Future
page to show one space article!').

00:05:26.576 --> 00:05:29.926 align:middle
Perfect! Copy that URL and
try it in your browser.

00:05:33.176 --> 00:05:34.356 align:middle
It works...

00:05:34.486 --> 00:05:35.996 align:middle
but this sucks!

00:05:36.526 --> 00:05:42.226 align:middle
I don't want to build a route and controller for
every single article that lives in the database.

00:05:42.886 --> 00:05:47.346 align:middle
Nope, we need a route that
can match /news/ anything.

00:05:48.196 --> 00:05:51.246 align:middle
How? Use {slug}.

00:05:51.246 --> 00:06:00.626 align:middle
This route now matches /news/
anything: that {slug} is a wildcard.

00:06:01.496 --> 00:06:04.256 align:middle
Oh, and the name slug could be anything.

00:06:04.656 --> 00:06:12.216 align:middle
But whatever you choose now becomes available as
an argument to your "ghob", I mean your action.

00:06:12.656 --> 00:06:15.076 align:middle
So let's refactor our success message to say:

00:06:15.436 --> 00:06:19.276 align:middle
Future page to show the article
and then that slug.

00:06:23.106 --> 00:06:25.776 align:middle
Try it! Refresh the same URL.

00:06:26.806 --> 00:06:30.936 align:middle
Yes! It matches the route and the slug prints!

00:06:31.676 --> 00:06:35.516 align:middle
Change it to something else:
why-asteroids-taste-like-tacos.

00:06:35.736 --> 00:06:38.256 align:middle
So delicious!

00:06:38.876 --> 00:06:39.836 align:middle
Go back to bacon...

00:06:40.146 --> 00:06:40.676 align:middle
because...

00:06:40.676 --> 00:06:41.126 align:middle
ya know...

00:06:41.606 --> 00:06:44.876 align:middle
everyone knows that's what
asteroids really taste like.

00:06:45.696 --> 00:06:46.266 align:middle
And... yes!

00:06:46.596 --> 00:06:54.136 align:middle
We're 3 chapters in and you now know the first
half of Symfony: the route & controller system.

00:06:54.786 --> 00:07:01.296 align:middle
Sure, you can do fancier things with routes,
like match regular expressions, HTTP methods

00:07:01.456 --> 00:07:05.456 align:middle
or host names - but that will
all be pretty easy for you now.

00:07:06.316 --> 00:07:10.866 align:middle
It's time to move on to something
really important: it's time to learn

00:07:10.866 --> 00:07:14.046 align:middle
about Symfony Flex and the recipe system.

00:07:14.526 --> 00:07:15.116 align:middle
Yum!