WEBVTT

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

00:00:01.056 --> 00:00:03.696 align:middle
Now that we've got our entity
let's create a form!

00:00:06.266 --> 00:00:09.716 align:middle
Click on AppBundle, press
our handy shortcut command+n,

00:00:09.826 --> 00:00:12.686 align:middle
and if you search form you'll
find that option in the menu!

00:00:13.036 --> 00:00:14.456 align:middle
It's all coming together!

00:00:15.036 --> 00:00:20.816 align:middle
We'll call this MovieType: Notice it was
actually smart enough to put that inside

00:00:20.816 --> 00:00:24.316 align:middle
of a Form directory and build out
the whole structure that we'll need.

00:00:25.346 --> 00:00:27.276 align:middle
All I need next is for it
to pour me a cup of coffee.

00:00:28.676 --> 00:00:33.926 align:middle
The first thing we always do inside of here
is call $resolver->setDefaults(array())

00:00:33.926 --> 00:00:41.186 align:middle
and pass the data_class option so
that it binds it to our Movie entity.

00:00:41.876 --> 00:00:46.646 align:middle
Conveniently, this gives us more autocomplete:
we can just type Movie and it adds the rest:

00:00:49.136 --> 00:00:50.926 align:middle
This will even help us build our fields.

00:00:51.616 --> 00:00:55.656 align:middle
If we type $builder->add('') here,
because this is bound to our Movie entity,

00:00:55.956 --> 00:00:57.856 align:middle
it knows all the properties we have there.

00:00:58.846 --> 00:01:02.436 align:middle
So let's plug in our property of
title which should be a text field,

00:01:05.456 --> 00:01:08.306 align:middle
samsCharacterName which is
probably a text field as well

00:01:11.036 --> 00:01:14.026 align:middle
and isMainCharacter which will be a checkbox.

00:01:15.876 --> 00:01:19.976 align:middle
We'll want to make sure that we
prevent html5 validation on that.

00:01:19.976 --> 00:01:23.806 align:middle
A third argument of 'required'
=> false will take care of that

00:01:23.806 --> 00:01:26.606 align:middle
for us and even that has autocomplete.

00:01:27.466 --> 00:01:28.796 align:middle
It's madness!

00:01:29.986 --> 00:01:39.476 align:middle
Let's also include rating as an integer field
and lastly, releasedAt which is a date field:

00:01:40.876 --> 00:01:46.446 align:middle
We can control how this date field renders: by
default with Symfony it would be 3 select boxes.

00:01:47.976 --> 00:01:52.296 align:middle
I'll set a widget option, except I don't
remember what value to set that to.

00:01:53.976 --> 00:01:59.416 align:middle
No worries, I'll just hold the command key over
the widget option and it will take me straight

00:01:59.416 --> 00:02:03.746 align:middle
to where that is setup inside of the
core code: Why is that awesome you ask?

00:02:03.966 --> 00:02:06.066 align:middle
Because I can search for
what I need inside of here

00:02:06.066 --> 00:02:11.206 align:middle
and boom setAllowedValues
single_text, text and choice.

00:02:11.876 --> 00:02:15.096 align:middle
So let's paste single_text back into our file.

00:02:15.876 --> 00:02:20.696 align:middle
That trick of holding command and clicking works
for the field types too: command+click integer

00:02:20.696 --> 00:02:23.216 align:middle
and suddenly you're inside
the class that provides this!

00:02:23.966 --> 00:02:26.836 align:middle
It's like being teleported but, you
know, without any risk to your atoms.

00:02:28.006 --> 00:02:30.436 align:middle
You can even use this to take
you to the property inside

00:02:30.436 --> 00:02:32.126 align:middle
of Movie for that specific field.

00:02:32.126 --> 00:02:37.386 align:middle
Our form is setup so let's go ahead and
create this inside of our controller,

00:02:37.386 --> 00:02:47.406 align:middle
$form = $this->createForm(new
MovieType(), $movie);.

00:02:48.906 --> 00:02:51.746 align:middle
Like always, we need to pass
our form back into our template

00:02:51.926 --> 00:02:56.266 align:middle
with $form->createView(): Time to render this!

00:02:56.736 --> 00:03:01.266 align:middle
Click into the new.html.twig template,
ah that's right my form is actually going

00:03:01.266 --> 00:03:04.356 align:middle
to be over here in _form.html.twig.

00:03:05.046 --> 00:03:10.256 align:middle
It shouldn't surprise you that you'll get
autocomplete here on things like form_start

00:03:10.256 --> 00:03:14.466 align:middle
and form_end: Want more autocomplete
awesomeness you say?

00:03:14.656 --> 00:03:15.416 align:middle
You're mad!

00:03:15.856 --> 00:03:23.226 align:middle
But ok: type {{ form_row(form) }} and it'll
auto-complete the title field for you.

00:03:23.956 --> 00:03:32.806 align:middle
So we'll plug in all of our fields
here: And if I forget one of them,

00:03:32.806 --> 00:03:36.016 align:middle
I can hit control+space to
bring up all of my options.

00:03:36.976 --> 00:03:40.406 align:middle
This will also show you some other methods
that exist on that FormView object.

00:03:41.016 --> 00:03:44.266 align:middle
Ah ok so we still have rating
and releasedAt to add here.

00:03:52.836 --> 00:03:55.266 align:middle
Clean up a bit of indentation here and perfect!

00:03:55.266 --> 00:04:01.536 align:middle
Time to try this out: back to our new
movies page, refresh and there we go!

00:04:02.106 --> 00:04:04.316 align:middle
It renders with no problems other than the fact

00:04:04.316 --> 00:04:06.926 align:middle
that this is a form only
it's developer could love.

00:04:07.466 --> 00:04:12.286 align:middle
And well, maybe not even that:
I'm going to make it prettier.

00:04:13.006 --> 00:04:20.816 align:middle
In config.yml, down in the twig key add
form_themes: Now this should autocomplete,

00:04:20.816 --> 00:04:23.516 align:middle
but for whatever reason this
one key is not doing that.

00:04:23.516 --> 00:04:27.026 align:middle
But for the most part, you
will see autocompletion inside

00:04:27.026 --> 00:04:28.336 align:middle
of your configuration files.

00:04:30.176 --> 00:04:34.836 align:middle
Right here let's plug in the bootstrap
form theme: and the plugin isn't perfect

00:04:34.836 --> 00:04:36.706 align:middle
because we don't get autocomplete
on this either.

00:04:37.156 --> 00:04:43.126 align:middle
But I do know that there is a file inside the
project for bootstrap, so I'll go to find,

00:04:43.126 --> 00:04:45.006 align:middle
file and start typing in bootstrap.

00:04:45.006 --> 00:04:50.786 align:middle
We want the one called
bootstrap_3_layout.html.twig.

00:04:51.716 --> 00:04:54.356 align:middle
To cheat, I'll just copy that
file name and paste that in here:

00:05:00.506 --> 00:05:03.196 align:middle
Refresh with our new form theme and ....

00:05:03.386 --> 00:05:03.896 align:middle
Awesome!