Adding Create Form Route 0:00Let's talk about form handling. So we can currently review all of these articles, but there isn't yet a way to create a new one. Alright, let's apply some of what we learned in the previous episode. So a couple things. First we could say, following that convention, if the user visits slash articles slash create, we will reference an articles controller and an action called create. Okay, but a quick little note here. If I come back and we visit articles slash create, we're going to get an error, but not the kind we expected. Fixing Route Order 0:26If I come back and we visit articles slash create, we're going to get an error, but not the kind we expected. Notice that it's actually trying to load the show method of articles controller. Here I'll show you. If we go to articles controller, and we say die hello, refresh, and sure enough we get hello. So what's going on here? Why is it calling the show method? If I switch back to the routes file, that's because order matters. So in this case, articles slash a wildcard, anything, is actually taking precedence overIf I switch back to the routes file, that's because order matters. So in this case, articles slash a wildcard, anything, is actually taking precedence over this one below it. So let's make sure we put this above it. Now if I come back, we'll get a different error, and this is what we expect. It's letting you know, hey, there is no create method on the articles controller. Alright, let's go to that, add a new one here, and again, if we're following conventions, we'll return a view called articles dot create. Alright, that's our next step. So let's go into the resources, views directory, and I'll add a new one here. Building the Create View 1:20Alright, that's our next step. So let's go into the resources, views directory, and I'll add a new one here. Create dot blade dot php, and I'll use a little snippet here for our blade section. And then we'll create our wrapper here, we'll give this a class of container, and then new article. Alright, so if we review this in the browser, here's what we get. Okay, so let's construct our form. Now writing the HTML for a form is actually a bit of a pain, especially for screencasts, so I'm going to use some snippets here to speed us up. If we're creating a new article, I need a title, I also need a excerpt, so that'll beso I'm going to use some snippets here to speed us up. If we're creating a new article, I need a title, I also need a excerpt, so that'll be a text area. What else? Let's go back to TablePlus. The title, the excerpt, and then of course the full body. Like so. Alright, so I'll let you take a look at that. Pretty standard fare. Finally, I just need a submit button.Pretty standard fare. Finally, I just need a submit button. So we'll add that now, and let's get rid of cancel, and we get something like that. Okay, so if I view this in the browser, we get this ugly looking form here. However, you'll see my snippets include classes for the Bulma CSS framework. Don't worry, you don't need to know anything about it. It just makes it a little bit prettier when I show you these examples. So I will pull that in here, and now if I come back and refresh, it'll probably change a little bit. Yeah, and that's okay.a little bit. Yeah, and that's okay. It still looks good. A bit easier on the eyes. Finally, we just need to patch up that heading there. Alright, let's go back. With Bulma, I believe it's has, it's been a while since I've used this, has, has text weight bold. Is that right? Yep. Wiring Form to Store 2:55Is that right? Yep. And then is size four. Alright, good enough. So now think about it. If we fill out this form and we submit it, where should it go? Well, think about the previous episode. If we're following a RESTful convention, we are creating a new resource, right? And we would use a POST request for that. So listen for a POST request to slash articles, and that would hit an articles controllerAnd we would use a POST request for that. So listen for a POST request to slash articles, and that would hit an articles controller and a store method. Again, we're following basic conventions here. So let's create that, add a new store method, and all I'm going to do here is die and say hello. Again, just to make sure we're hitting that method. So if we switch back to our create view, we now know that the method is POST and the action is slash articles. Okay, let's give it a shot. Adding CSRF Protection 3:43is slash articles. Okay, let's give it a shot. So we'll fill out a bunch of gibberish here, submit, but we get a 419. And especially when you're first learning the framework, I think we could do a better job of explaining why you're seeing this here. As it turns out, the issue is related to cross-site request forgery. So just come along for the ride for a minute. I'm going to add this new directive here, CSRF. That stands again for cross-site request forgery. So if we come back and we give this another try, there we go.That stands again for cross-site request forgery. So if we come back and we give this another try, there we go. Now we've made a POST request to that endpoint. Now I'm going to dedicate a whole lesson to cross-site request forgery, but until then, do note that when you add that CSRF directive, it's expanding essentially to this. A hidden input with a name of token and a value of a unique string that will then be verified on your server. And this effectively protects you from malicious users on other servers faking form requests on your server. And again, we'll talk about that quite a bit more in a future episode. Saving Article and Redirect 4:43on your server. And again, we'll talk about that quite a bit more in a future episode. So now to finish up this lesson, what should we do here? Well, if I go back to ArticlesController, the store method is responsible for persisting the new resource or article. But how do we fetch that request data? Well, we've already learned it's in the request helper. So let's just dub request and give me everything in the request. Okay. If we submit it again, here's what we get.Okay. If we submit it again, here's what we get. All right. Well, we have everything we need, so let's throw it into the database. Now we're going to do this the long way one more time, and then I'll show you some more simple approaches. So I will instantiate a new article. We'll set the title. And now we can access any of these values by, again, using the request helper and then the name of the key.And now we can access any of these values by, again, using the request helper and then the name of the key. So in this case, title. Let's do it two more times. So we need the excerpt. And again, this is kind of the long form way. There is a cleaner way to go about it, and I'll show you that soon. All right. So we've created a new article. We filled it with the data you provided in the form.So we've created a new article. We filled it with the data you provided in the form. The only remaining step is to persist it. So we'll say article, save. And then finally, where do we redirect? Well, let's return a redirect anywhere we want. We could go back to the home page, or how about the articles overview page? Let's give it a shot. So we'll come back, refresh, and we'll say my new article, and I'll paste in some gibberish here.So we'll come back, refresh, and we'll say my new article, and I'll paste in some gibberish here. Submit. All right. And there it is. Now, if you take a look, it does look like when I pulled in that Bulma CDN, it interfered a bit too much for my liking. So let's do this real quick. In fact, this is a good learning experience. Sometimes you want to pull in a script or a style sheet only for one view, not for everything. Loading CSS Per View 6:24In fact, this is a good learning experience. Sometimes you want to pull in a script or a style sheet only for one view, not for everything. Here's how you could do that. What if in my head section, I simply yield head? Now any view that wants to hook in to where we render this head section can do so. So take a look. If we go to articles slash create, I'm now going to add a new section for the head, and I'll paste in that import there. Okay, so now we're pulling in Bulma only for that create view. And again, this is only for the example to make our forms look a bit more attractive.Okay, so now we're pulling in Bulma only for that create view. And again, this is only for the example to make our forms look a bit more attractive. So if I switch back, this has now returned to how it was before. But again, if I visit that create view, we are pulling in Bulma through that CDN, and we insert it there. Okay, so we're starting to get a bit more comfortable, but there's countless things I want to go over with you. First, what about validation? Shouldn't we have some level of protection there to ensure that you're not sending through gibberish in the request? Next Steps Preview 7:21Shouldn't we have some level of protection there to ensure that you're not sending through gibberish in the request? Absolutely. Second, is there a way to clean this up? Right now, we have to create, what, five lines just to add a new article? Is there a more succinct way? And the answer is yes, so we need to clean that up. Lastly, what about situations where you're not submitting a simple post request? For example, what if I am updating an existing article? Well, there's some issues associated with that as well.For example, what if I am updating an existing article? Well, there's some issues associated with that as well. So we have a lot on our plate. We'll keep moving forward in the next episode.
