Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

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 forms for our pages. We're going to add some links here, so let's open up our index.blade.php. And 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 will 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 time stamps, 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 save 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're going to do a 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 attributes and we'll come back and actually fill that in. And then, let's finish the a element 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 URL at the bottom, we have admin, pages, ID, and then edit that is the correct URL. So if we click on either these things, of course, we're not going to see anything because these methods are 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 get request for the create form. So we're going to return to 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 dir. 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'll 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 or 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 it's 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. So it's gonna be a few extra key strokes, 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 method as post. We cannot submit anything, but get or post from HTML forms. And this is going to be a problem when it come 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 is for you know 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 route 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 I mean, sounds kind of trivial, but this is what we do. So let's just copy this or 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 are 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 inside 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 PagesController 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 the going to do everything that it needs to do, and everything is 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 out 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 subfolder, 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 fields. 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, and then 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 and 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 edit form and we're done as far as those views are concern. So now we can turn our attention to the controllers. But let's first of all, go to the browsers, 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 go 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 going to 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. If we really, really, really wanted to, we could say model And then p age, 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 model to our view, and we have it right there. Boom, we're done. If we go back, let's refresh. And voila, although the text here is a little bit off, that's because that is a text area. And it takes all of the white space into account so we need to fix that. And I didn't fix the label there, so let's go to our fields.play.php. And this is why it's nice we are using the same partial view for our form fields for the create and edit, because we only have to edit this 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. All we're gonna do is actually pass the model there. We could come in here and we could say, here's our model and voila, but let's do it this way, we are 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, 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 a content property, you should be okay. But they're makes no sense to do that, because we have a class there with everything available. So we're 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, voila, 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.

Back to the top