3.3 Writing the Create and Edit Views
In this lesson, we'll focus on coding the create and edit views. There are many similarities between creating and editing, so we'll be able to create two forms with the same set of form fields.
1.Introduction1 lesson, 01:23
2.Getting Started4 lessons, 46:41
3.Managing Pages6 lessons, 1:12:31
4.User Management2 lessons, 27:37
5.Managing the Blog4 lessons, 41:51
6.Adding Extras2 lessons, 26:07
7.Implementing the Front-End3 lessons, 30:24
8.Homework Review1 lesson, 07:11
9.Conclusion1 lesson, 01:24
3.3 Writing the Create and Edit Views
At the end of the previous lesson we had implemented the index method on our pages controller. That was retrieving all of our pages from the database and then sending them to the index view. So that we could see them in the browser. So now we want to be able to create and edit these pages. And thankfully, there's a lot of similarities between creating and editing something. So we are going to be able to reuse some of the same code between creating and editing. And that's going to be nice. It's going to save some time. But before we get into that, let's add a couple of things to this view. Because we want to be able to easily navigate between our list page here or our index, I should say, and then the Edit forums for our pages. So we're going to add some links here. So let's open up our index.blade.php. Let's add a class to this Create New. I want this to look like a button. So we will say button and then button default that'll be fine there. And then we need to decide where we're going to put this link. Now, we could add another column that would have the Edit Link there and that would be fine in this case. However ,eventually we might want to include other pieces of information, like the timestamps, the date that the page was created and last modified. And the more columns you have in a table, the more squished the data is. So, let's say some space and let's make the links for the title here. And then we will click on that and that will take us to the Edit page for that respective page. So we are going to do essentially what we did up here with our Create New link. We're going to use the route helper to generate the URL. There's going to be a slight little difference here because we need to tell it what page that we want to edit. So let's add our anchor elements. Let's just add the href attribute and we'll come back and actually fill that in. And then let's finish the a elements so that we have that done. So now we want to call route. And the route that we are going to use is called pages.edit. So the edit route is going to take us to the edit form for that particular resource. But then we need to specify what the resource is. So we need to pass an array. The key for this value is going to be page. And then the value is going to be the id of our page here. So we're going to say page id, and there we go. So if we look at this in the browser, let's refresh the page. We now have our links. And if we look at the URL at the bottom, we have admin pages, ID and then edit. That is the correct URL. So if we click on either of these links, of course, we're not going to see anything because these methods aren't returning anything. So let's open up pages controller. And let's implement those methods. So we'll start with the create method, that is handling the gets request for the Create form. So we're going to return a view, the view is going to be called admin.pages.create. And that's going to be fine for now. Let's go ahead and start implementing the Edit form as well. The method is edit. This will handle the Get Request for the Edit form. So our View is going to be admin.pages.edit. So let's create these, let's go down to resources views admin pages, and we will add a new file. This is going to be called admin.pages.create.blade.php. That's a mouthful, although no, it's not. We don't have to use the admin pages, no. Okay, so let's get rid of that. I apologize there. Now let's create another file. And we will call this edit.blade.php. And let's just take what we have for index and use that as a basis for create. And we will get rid of everything except the div with a container. And let's do this we'll have an h1, that is going to say that this is the Create New. And then in the edit view, we're going to have Edit page here. But then we want to display, not display we want our form. Now, we could use a package that used to be part of Laravel but it was broken out into its own separate project. And it has some HTML builders that we could use that would make some of this a little simpler. It does use vastly different syntax, but I want to keep this as vanilla as possible. So we're just going to use plain ordinary HTML. It's going to be a few extra keystrokes, but that's okay. So we're going to create our form. We'll come back to the action. But let's do specify the method because we have to have the methodist post. We cannot submit anything but get or post from HTML forms. And this is going to be a problem when it comes to editing our form. But for now, we'll just worry about that in a second. But let's talk about the action, we need to specify the URL for creating a page in this case. So once again, we're going to use our trusty route. And the route name in this case is going to be pages.store. It's not create, create as for this view that we are creating now. The pages.store is going to handle the post request. And the URL is going to be admin/pages. So you can think of it as the root of pages. But that's going to be it, as far as the URL is concerned. And there's really nothing else that we need to add here. Of course we need our form controls and we will do that, but we're going to use what's called a partial view. A partial view is, well, it's part of a view. We're going to put all of our controls Inside of this partial view so that we only have to do that once. And it sounds kind of trivial, but this is what we do. So let's just copy this. We'll go to the edit view, let's paste it in. Let's change the h1 to Edit page. And the URL for our action is going to be a little bit different. Instead of store it's not edit, because once again, that is for the view that we were working with here. Instead we're going to say, update but we also need to specify what we want to update. So we're going to pass in that array where the key Is going to be page. And then we specify the ID. Now, we could just say page, but I'm going to use the term model. And that's really what we should have used inside of the index view and we might go back and change that. Because when it comes to the view itself, what we traditionally do is pass the model from the controller to the view. So it makes sense to call it model instead of the view that way, there's really no confusion there. We might change that in the index view. We might not, it just depends on what I feel like. So this should generate the URL, that is going to update our given page. But we need to do this as well, because Laravel is going to be looking for a put request. Because not only is our pages controller useful for HTML purposes, it's also useful for a web API. So when it comes to a fully restful API, a put request is used for updating a resource. Well, we can't submit a put request with an HTML form. So what we need to do is kind of spoof a put request. Laravel is going to catch this and it's going to just make everything work. So here what we're going to say is method field and we're going to say put. And even though it is a post request, this is going to be an extra field that's going to be sent with the form. Laravel is then going to do everything that it needs to do and everything's just going to work. So there we go. That's it. So now we need to talk about this partial view because we have everything else set up. We just need the actual form fields. So we are going to create a new folder inside of pages called partials. And we're not going to have really any other partial views for our pages, but this is the convention. We create a folder called partials wherever we need to put this sub-folder. And then we put our partial views there. So this partial is only for the views inside of our pages. So partials is going inside of pages. So we'll create a new file. Let's just call this fields.blade.php. And I'm going to paste in the fields, because we don't want to type all of this HTML. So the very first thing is the csrf field. It doesn't matter what form it is. If it has a POST request, you want the csrf field. In fact, Laravel is going to be expecting it. So just get in the habit of including it, even if you don't think you need it, you need it. It's just good practice, so include it. And that's what I've done there. And then we have our form fields. Now there's nothing out of the ordinary, we have form groups, we have the label in the input. But look at what I've done here for the values, model title, model URL, model content. Now from the Edits form, that sounds logical. But what about the Create Form? Well, we're already creating something we won't have a model at that point in time. So we're going to have to get around this but it's not that big of a deal. There's many ways that we can get around it and how we're going to do it is very easy. So we have our partial view, we just want to include that Inside of our create an edit views. So we say add include. And then we have admin.pages.partials.fields. It's a mouthful, but there we go. So we have that we'll add it to our Edits form. And we're done as far as those views are concerned. So now we can turn our attention to the controllers, but let's first of all, go to the browser. Let's refresh, what do we get? Undefined variable model. Well, that makes sense because we aren't retrieving anything. Or at least we're not passing that to the view. That's going to be easy enough to fix. And let's go ahead and do that. So we're going to the edit view. Now, notice here we have our page, we have the actual page object that we want to work with. If it doesn't exist, then we're gonna get a 404. In fact, let's test that out. If we go to pages, and then 500, which we definitely don't have, sorry, the page you're looking for, could not be found. So we could, I mean, if we really, really, really wanted to, we could say model and then page and then find or fail, and then page id. But why we already have that data. So what we're going to do is simply this, we're going to pass the model and we're going to call it to model to our view. And we have it right there. So boom, we're done. If we go back, let's refresh and wallah. Although the text here is a little bit off, that's because that is a text area. And it takes all the whitespace into account. So we need to fix that and I didn't fix the label there. So let's go to our fields.blade.php. And this is why it's nice that we are using the same partial view for a form fields for the Create an Edit. Because we only have to edit this in one place. So the label for our content should be content. And then let's just put our text area all on one line. I hate that we have to do that. But that's just how it is. So let's refresh. Boom, we're done. So let's go to Create, and we get the error model, once again is undefined. So as I mentioned, this is easy to get around. We're gonna do is actually pass a model there. We could come in here and we could say here's our model, and wallah. But let's do it this way, we're going to use a method called with. And the idea is that we are returning a view with this data here. Now we could do this with our real models. Like down here in the Edit, but we're doing this for the sake of showing different ways of doing this. And here we're going to call this model. The value is going to be a new page. Now technically it doesn't need to be a page object, as long as it has a title, a URL, and the content property we should be okay. But makes no sense to do that because we have a class there with everything available. So we are passing in our Create View with a model. That's going to be a new page. So if we go back to this and we refresh, we're done. Well, I say we're done but really, we're not. We still need to do the actual work we need to actually create the page or edit the page. And we will do that in the next lesson.