Laravel 8 Blog - 23: How to confirm and delete data in Laravel 8 using POP UP Box Modal Bootstrap 5

hey guys welcome back so guys we are continuing our level 8 blog series so now guys in this video we are going to learn about how to make a confirm delete option okay so when you click on this delete it a pop-up model should come and it should ask for are you sure you want to delete then if we click yes then it should delete the data so guys now let's get started to build that so now guys let's go to this page at category view at this delete button okay so let's move to our web route and here is our category for admin okay so let's go on the index function and at this index function we have use the delete button all set so guys uh for a reference purpose you can just keep comment and keep it and here let's click create a button with the name delete okay so let me just copy all the same classes copy and paste and the value here you are going to keep the id that is your category id let's copy and paste it all done and one the type is going to be button inside this one class you will be adding called delete category button okay so this is the class and now let's use some jquery to delete this record okay so guys now let me just extend this so let's go to the master extension and at the below let's add a script tag so at yield add a script script okay scripts let's make it scripts so you need to copy this get back to your blade and add the section so add section that is scripts and end the section all set and now here you can write your script code guys so let's set up with the script and let's tell jq doc so you can tell jq click here and at the selector you are going to tell dot delete category button okay so on that button click you are going to take so dollar this dot val function okay oops here it comes and this gives you the value where that is your what id it is okay category right so category underscore id is equal to so whatever the value it gets from here and it will store in this category id so now guys on this setup i want to column model dot show model show so on what model you are going to call on id we call delete model okay so where is your model first of all so for that guys let's go to the getbootstrap.com okay so let's move on docs and search for model here we go to the model and here is one simple demo let's click here it comes so for that let me just copy this model code okay copy this and get back to the top of your page okay after the content let's paste here and the name which we have created over here is delete model so here we have a spelling mistake it's model d a l okay now you can get back to the top and instead of example model let's paste that delete model okay and here you can chill category like delete category with its post and here you can mention in a h5 tag that are you sure you want to delete this category with all its post okay question mark and before this we need an input field so here let me just keep in text itself let's see the output first so let's give a name here we'll tell category underscore delete underscore id so this is our category delete id and you can give an id over here and tell the same class name let's paste here so category id let's keep it as category id let's copy this and go below here just assign that in id hash id okay and dot val function if you use let's send this category id inside that that's simple so now let's let's see the output for this what happens so yep okay let's refresh once so i'm going to click on this id number six it should throw on id six on that model let's click here you see id number six close let's click on two here i mean three it gets on three so whatever ad you click it gets the data and now when we yes delete if we click that it should submit it so yes let's get back and let's go to the model part here now let's hide the id we don't need to show the id and here we tell yes delete we don't require this and instead of primary make it to danger submit and let's add the form tag form ctrl x here you post the form and now let's use the method with the post and the url you're going to create is the same url what we have created below on the delete button so you can just take this yep let's get back and paste here all set so i've just aligned this form guys so now uh on this route you are going to send admin delete category and let's remove this id because this id we are getting over in the input field right over here so this now let's send this route using post method at csrf field yep and now let's copy this route and create a route let's get back to our web.php so here is our category delete category part so let's comment this and copy and paste and create with the post method okay why because we are sending the input right so we have to just send that at the same desktop function you are going to send it so using this let's get back to our controller and at this place you can just call the request dollar request okay and with this request you are going to so let's copy this request of what id category delete id let me just copy that input field name so here what you are creating category delete id so that's it guys and now this will search for its id and then it does its process so there is no changes more in here now so yes guys let's get back so now guys let's test this deleting part so refresh and let me just add one dummy category do you mmy dummy so let's paste i'm adding a dummy category okay so let me just validate this image has been not inserted so guys to not face that error just let's add a request required field on this image okay so let me get back to my controller at the create function this is my image field let's add required so whatever it's required you can just add that yep and now you can select with the image so when you click that it will ask its mandatory field now let's save it category added successfully and it's here so now guys let's uh try to delete this dummy data click delete yes delete and it should delete this dummy 11 number id yes delete and here you see perfect category deleted with it both successfully and you see that there is no dummy data of category okay so guys i have just added few categories of our blog and now so as we have seen like if you delete the data it deletes right so what in case of next tab so let me just go over here at the next and if you click on delete here it doesn't works right so for that case guys let us just change a one line of code over here let's get back to our category and go to the script view at this place you are going to use the document part okay on event function so jquery on so that is jq on okay let me comment this and let's comment the above all set so here you are going to use the document and here is your going to be an event so that is my event and then your selector so selector is nothing but our delete button okay let me copy and paste here all set you can just remove that if you required you can keep it or else let's remove that and here is the event let's send that e so it doesn't throw an error for this okay let's save this and now guys let's see let's refresh so now let's go to the second pagination and now you can click here you see the output done guys so guys uh let me just delete and show you this yes delete and it deletes your data perfect so let me just see in the next tab here it goes so dummy two data has been deleted and dummy one is left out now let's click on this delete button here it's work fine okay so guys we have successfully completed with how to confirm and delete the data in level eight so thank you for watching this video guys please subscribe like and share

Channel: Funda Of Web IT

Views: 16,905

Keywords: fundaofwebit, how to confirm delete data in laravel 8, confirm delete in laravel 8, confirm and delete data in laravel, confirm delete in php, confirm delete in laravel, confirm and delete data using popup in laravel, delete data by confirm option in laravel 8, delete data by confirming using bootstrap in laravel 8, laravel 8 blog project, laravel blogging website, laravel 8 blog crash course, delete data in laravel 8, delete data with model in laravel 8

Id: upn5ieyL48k

Length: 11min 45sec (705 seconds)

Published: Sun Feb 27 2022