Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Refactoring and DRY with templates and blade
-
0:00
The first thing we're gonna need to do
-
0:01
is actually create a new application level JavaScript file.
-
0:05
So we'll go back over to our editor.
-
0:07
Go to our public directory, which is where our JavaScripts live.
-
0:11
And in here we'll have a foundation min.
-
0:13
We'll go ahead and add a new file.
-
0:16
We'll just call this app.js.
-
0:20
And so look in here we see we'll have
-
0:21
app.js, this is where we're going to put our code.
-
0:24
We're gonna also need to go into our layout and add that to the layout.
-
0:29
So, into our views, into our layouts, our main
-
0:33
layout, go to the very bottom, and you'll see here
-
0:36
we have our jQuery, our foundation, and so underneath that
-
0:39
we're going to do the same thing we've done before.
-
0:42
Which is HTML, script,
-
0:47
right, and then inside of our script we're gonna add our string.
-
0:50
So it's in the JavaScript folder and it's just called app.js.
-
0:57
So now that we've added it to our layout, we refresh our page,
-
1:03
and inspect the page.
-
1:09
Scroll down, we can see that we're looking for add app.js.
-
1:13
In our network, let's make sure it's loading the file.
-
1:17
Yep, there it is.
-
1:18
So, now we can add.
-
1:20
Close this and add our actual JavaScript.
-
1:23
So I'm going to paste in a bit of jQuery.
-
1:25
All right.
-
1:25
Now if you don't understand jQuery in full you can go take our jQuery
-
1:29
basics course which will be a great
-
1:32
introduction for all that you can see here.
-
1:35
So, basic overview, we're waiting until the document is
-
1:39
fully loaded, and we're gonna confirm every single destroy.
-
1:42
So we're looking for any form items, and will on the submit, we're gonna grab
-
1:47
the event and we're gonna interrupt it,
-
1:48
so we're gonna prevent the default from happening.
-
1:51
We're going to pull out the method which we
-
1:53
have a hidden field that has method in it.
-
1:56
And we're gonna get that value.
-
1:57
We're gonna store it to a method variable.
-
2:01
Inside we're gonna check that that method variable is defined,
-
2:04
so if it's not defined we don't wanna do anything.
-
2:07
And then if that method is set to delete.
-
2:09
So that says it's our delete method.
-
2:11
If we see a delete method come through in any form,
-
2:14
no matter what the case, we're going to say are you sure?
-
2:18
And if you're not sure, if you say no, then it's gonna prevent the default.
-
2:22
If you say, yes, it's going to continue and actually delete the record.
-
2:26
Let's make sure this is working for us now.
-
2:31
Refresh our page.
-
2:34
And let's try to delete our final list down here which says BOBO.
-
2:40
Destroy.
-
2:41
Now it pops up an alert that says, are you sure?
-
2:44
If we say, yes we are sure, it's gonna delete it.
-
2:47
If we do it again and say, destroy, and say
-
2:49
we're not sure or Cancel, it's not going to delete it.
-
2:53
Which is exactly what we want it to do.
-
2:54
All right.
-
2:55
So now we're going to move forward to finish up our
-
2:58
CRUD or create, read, update, and delete/destroy and refactor this a bit.
-
3:04
Because if you hit the create a new list you'll see we've got a form here.
-
3:08
List title, submit.
-
3:10
We go back and we hit the edit button.
-
3:13
You'll see we have a form that looks exactly the
-
3:15
same minus the text here saying update and this being populated.
-
3:19
So if you look at our code you'll actually see, we go to our forms.
-
3:24
We're gonna see that we have a create form and we have our edit form.
-
3:29
Now if we look at the two side by side they're very, very similar.
-
3:33
We don't really need all of this to be in two completely separate files.
-
3:37
So how can we find a way to combine this, to clean it up a little bit?
-
3:41
We're gonna do that by using blade and laravel
-
3:44
together to create form partials in our views folder.
-
3:49
So lets go ahead and do that now to try to tidy this up a little bit.
-
3:52
Let's start with editing our edit page.
-
3:56
So to get started using a partial to change our edit page, our edit form,
-
4:01
we're gonna create a file inside our to dos folder and we'll call it partials.
-
4:06
These are going to be all the partials related
-
4:09
to the to dos model, or to do lists model.
-
4:12
So in here we're going to make a new file and
-
4:17
we're going to call it _form.blade.php.
-
4:22
Now, you don't have to use underscore, that's just a construct that I like to
-
4:26
use that several other languages use for
-
4:28
partials or for showing that it's a partial.
-
4:31
So, now let's take and look at the comparison between these two forms.
-
4:36
So, we've got a little of change of here.
-
4:38
Not a lot.
-
4:39
Mostly in the form model or form open.
-
4:42
The name or the title item here in the label
-
4:44
and the text we're going to change to match the edit.
-
4:48
We're gonna make it all name throughout the entire project.
-
4:51
But for now, we're not gonna edit create, we're
-
4:53
gonna edit the edit page, so let's close create.
-
4:56
We're gonna grab out all the information here that is similar between
-
5:00
the two and we're gonna place that into our actual form partial.
-
5:04
Let's clean this up a little bit.
-
5:07
And then save it.
-
5:09
Now in here, we need a way to include our _form.blade.php into our model.
-
5:16
We're going to do that by using the blade command @include.
-
5:21
And then what we're going to include is our
-
5:24
partial, which is in the todos folder .partials folder.
-
5:31
And then the name of the file which is _form.
-
5:35
So, close this out.
-
5:37
And let's see if we can still get to our edit form.
-
5:42
Still looks the same.
-
5:43
Everything still works the same.
-
5:45
Let's see, just double check.
-
5:48
Okay, now it says My Listings.
-
5:50
Go back to edit.
-
5:51
Perfect.
-
5:51
That still looks good.
-
5:53
Now the next step for us is to change our create page.
-
5:56
This is gonna take a little bit more work, but to start with
-
6:00
we're only gonna need to include the exact same thing we had before.
-
6:03
So we'll go into our show, or excuse me, our create page.
-
6:08
We're gonna remove all of this out and
-
6:11
we're gonna paste it in includes partial form.
-
6:13
So if we're to do this we go back over and go back to our main page.
-
6:17
And then we're going to create a new list.
-
6:22
Everything here looks the same, but if we inspect the
-
6:25
element, you'll now notice that it's name instead of title.
-
6:29
So when we go back to our controller,
-
6:34
which is in our controllers folder.
-
6:37
To do list controller.
-
6:38
Now you're gonna see that when we go to
-
6:40
the store it's gonna be looking for title not name.
-
6:44
So let's let's update this so instead of title it says name.
-
6:47
So name.
-
6:48
We won't need to identify a column anymore.
-
6:51
We're also going to double check that our validators are okay.
-
6:55
This all looks good.
-
6:57
We don't use name title anymore.
-
6:59
We'll use name.
-
7:00
Save that with our index.
-
7:02
So that should all be good.
-
7:03
So, with those couple of changes, we should be
-
7:06
able to refresh the page and create a new list.
-
7:13
Okay.
-
7:14
So now we have created a new list.
-
7:16
This is great.
-
7:16
So, now we're able to go back and say, all right, now we have a simple create.
-
7:23
We have a simple edit, which is in our views.
-
7:26
All right.
-
7:27
And then @include todos.partials._form.
-
7:31
If we look in here, partials_form, any updates we
-
7:34
were to make here will actually show up in
-
7:37
both of our forms, which helps us take away
-
7:40
a repetition of four lines of code, which is great.
-
7:43
And in larger scale forms it's a huge, huge help.
You need to sign up for Treehouse in order to download course files.
Sign up