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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

8.1 Deleting Homework

In this lesson, we are going to go over one of our homework assignments. And that is the deletion of pages. And let me reiterate that my implementation is not correct. Your implementation is not correct or incorrect if it's different from mine. We are different people, we will approach the same problem differently because we think differently. So if you did implement this differently, hopefully, this will give you another perspective because the more ways that you can analyze a problem the better developer you become. So the hardest thing for my implementation was deciding where to put the delete button, because I could see putting it in the list would be a good thing. I could see where putting it in the edit page would be a good thing. If you put it in the edit page, then that forces the user to go into the edit page. And then hopefully they would either recognize that they want to delete this or no they clicked on the wrong thing, they want to delete another page. But then I also tried to think of what a user would want. And as a user, I would want the Delete here in the list, so that I could easily just delete something. So I opted for the list just because, as I user, I'm lazy, and I want easy access to something. That was why I chose to put it here in the list. Now, doing that forced me to add some CSS. And my addition to this CSS was very, very simple. All I did is add a style element to the app layout page and it's setting the vertical align of all td elements to middle. And it also uses important because the specificity of this ruled don't overwrite anything that was in Bootstrap. So the reason why I did this was once again laziness. Of course, in a real world application, I would want to put this inside of a style sheet and reference that with a link element. So there you go. So that is the only style change that I made. Everything else is primarily JavaScript, but let's look at the HTML. Because I went through several iterations of this. The first one was to simply have the form element here inside of the table cell. So I had form, of course, the action went to pages.destroy and the page was specified and that worked fine. I did have an on submit event handler. And it had a single line of JavaScript that returned the use of the confirmed function. Because I wanted the user to be able to say, yes, I want to delete this, no, I don't. So here we have Joe's page. If we click Delete, if we click on Cancel, then nothing happens. But if we do click on OK, then it's going to go ahead and delete. And if you are reviewing this lesson before the messages are implemented, don't worry, it's not going to throw anything off. My first iteration was using the form element in the cell itself. Using an on submit event listener, where I simply returned confirm in the on submit. But then I started thinking about, well, I want to be able to use this throughout the entire application. Or at least throughout the entire Admin portal, because deleting is a very common thing. Here we are deleting pages. But eventually we would want to delete users. And as we add more thinks to Manage in our Admin portal, we want to be able to delete other things like, for example, our roles. Right now we have just three roles. And eventually we would want to be able to manage those roles, add new ones, edit existing ones, and delete those roles. So there would be something else to delete. And so I started thinking about reusability, something that would be very easy to just add a few things to my view, and then everything would just work from there. So I opted to use just a normal link inside of the table cell. There's no form or anything. The href is pointing to destroy. Now this isn't going to work if the user just clicks on that link and you don't do anything, they're going to see that it doesn't work. Larivel will say [SOUND]. So there has to be some JavaScripts that's going to manipulate things here. So the only reason why the href is set here is so that whenever I do submit a form, I can know what it is that I need to submit. So I grab the href and I use that as the action for a form. And as far as the CSS is concerned, just button and button danger. But then I have this delete link. This is just for JavaScript purposes. So that for every link that has this class is going to be used to delete somethings. So the behavior is essentially tied to this class. And there are two pieces of information that need to be provided with this element. The first is the message to display. Are you sure you want to delete this page? So that whenever we would implement deletion in other parts of the application, all we would have to do is just change this message. If we are deleting a user, are you sure you want to delete this user? Or are you sure you want to delete this role? Things like that. And then the form that's going to actually perform the submission. And so the ID for that would be delete form. So that means that there has to be a form somewhere in the page that has that ID. And here it is. So the action is blank because the href is actually going to be set for the action, the method has to be post. But we also have to spoof the method field with delete and of course the csrf. But that's it as far as the HTML is concerned. Now when it comes to the JavaScript, there is nothing advanced here. There is a click event that is set document wide. If the user clicks on a element that has the delete link, then it's going to prevent the default action of that element. And then it's going to execute this confirmDelete function. And all it does is get the href of that link. It gets the message and the form. And then it prompts the user. Do you want to delete it? If yes, then it gets the form, sets the action, and then submits the form, and that's it. It's a little bit more complex than just putting a form in the table cell. But it is something that can be easily reused throughout the entire application. So that is how I implemented page deletion

Back to the top
View on GitHub