Building Edit/Update Form0:00
Let's do another one. I've added two new routes here for managing a Comment. The first one listens for a GET request to EDIT the Comment, and then when you submit the form on that page, it'll make a PATCH request to UPDATE the Comment. And then finally, it redirects back. OK, let's get to work. We'll go to our comments EDIT page, and all I have is a layout right now. So of course, you would set up a form. In this case, we want a PATCH request, but as you know, we can't do this because the browsers won't recognize it.
In this case, we want a PATCH request, but as you know, we can't do this because the browsers won't recognize it. So we get around that by signaling to Laravel that what we really intend is a PATCH request. Alright, next, the action will be comments/, and then the identifier of the comment. Alright, next up, all I have for this example is a body for the comment. So I have a form textarea snippet for the body. And again, very simple. A label, a textarea for that attribute, and within here, we will spit out whatever is in the database for the body, and then finally, an error message. So the only remaining step is a SUBMIT button, and we're all set to go.
Wrapping in Section Component1:03
in the database for the body, and then finally, an error message. So the only remaining step is a SUBMIT button, and we're all set to go. So if I open the browser and give this a refresh, here's what we get. But notice how it's right up against the edges? Why don't we fix that? And if you remember, in the prerequisite episode, we created a Section component. So what if I select all of this and I wrap it within our Section component? Yeah, like so. So now if we give this another run, we have a bit more padding. Yeah.
Introducing XForm Component1:59
give it a refresh, and it remembers. Okay, so now let's see if we can clean this up. Whenever dealing with forms, we always have this awkward thing here, where if it's not a POST or a GET request, well, we call it a POST, but then we secretly tell Laravel, this is what we actually meant. And this is how I intend for you to respond to it. Next, we always want to protect against cross-site request forgery. So we end up adding these things for almost every single form. Now maybe we can clean it up by making our own XForm component. So of course, if I run it right now, it's going to fail because that component doesn't
Now maybe we can clean it up by making our own XForm component. So of course, if I run it right now, it's going to fail because that component doesn't exist. Let's get started. We'll add it right here, form.blade.php. And what I can do, I'll open up a split pane. Here's our edit page, here's our component, and I'm just going to take these lines here and move them over. Now when I render this component, we'll have a form where the method, well, we can't hardcode any of this, right?
Handling Method and Action2:56
Now when I render this component, we'll have a form where the method, well, we can't hardcode any of this, right? So we're going to get rid of that, and the same thing here. Now why don't we do this? Let's declare our props where the method will default to post. That's pretty common. And then the action is a prop, but I'm not going to set any defaults there. Okay, so now, yeah, we might start with this like so, but we know that's not quite right. Because if I set a method to patch, well, now we're going to end up in that situation again where we're telling the browser we want a patch request and it doesn't understand.
Because if I set a method to patch, well, now we're going to end up in that situation again where we're telling the browser we want a patch request and it doesn't understand. So it sounds like we want to check, is the method you provided something other than get? And if it is, let's always set the method to post. So I could say if the method is get, then you want a get request. But otherwise, we're going to set it to post and then provide what you really intended to the method directive here. Next, for the action, I can just spit that out for you. Okay, so now I can get rid of these two lines. And yeah, we're about ready to check this out in Firefox.
Okay, so now I can get rid of these two lines. And yeah, we're about ready to check this out in Firefox. But real quick, let's spit out the default content there. All right, let's have a look. So we load it in Firefox this time. And if I inspect it, sure enough, our method is set to post. But we are signaling to Laravel through that method directive that what we really want is a patch. And then of course, above that, we have our CSRF input. So now, if we want to toy around with this, it should work in just about all cases.
Conditionally Adding Method Spoofing4:56
Because if it is get or post, then it's superfluous. You don't need to add it. So let's say, right here, so if not an array, we'll provide the method and look for get or post. Yeah, if it's something like put or patch or delete, then we do need to signal to Laravel what the actual request type should be. OK, so now have a look. We're setting a get request, which means the form method is set correctly, and we never include that method directive. But if we update it, and we do something like delete and give it a refresh, the method is
include that method directive. But if we update it, and we do something like delete and give it a refresh, the method is set to post, correct, and the method directive is set to delete, which is also correct. Finally, if we don't include a method at all, then we are signaling that we want to default to post. Give it a refresh, and that works as well. OK, so again, these are basic components, but they can be really useful. We'll bring that back to patch. So finally, let's clean this up. The last step, sometimes you want to include specific styling for the form, maybe background
