Laravel CMS | N-06 | Edit\Remove Categories using AJAX and Popups

Key Takeaways

hey what's going on guys all were doing welcome to the sixth story on the series of making a control management system in Louisville so if you haven't watched the fifth lie or the five last tutorials on the series please make sure to watch them before continuing the series because this is really a big deal to understand what we're going to do or what we are actually doing so this year on this particular episode we're gonna talk about the et Jack so in the last one we have created two buttons so as you can see we have the category 12 create the functionality of our in the category so for example just an example category a category so we get the success messages this is session messages and we have two buttons emitted and remove for now they do nothing but one what we actually want to do is when we click a little move we get a pop-up in here so the pop-up tell us like delete are you sure like warning before removing the category completely and when you click OK it's gonna delete the category from the database otherwise it just gonna cancel in you know keep doing what what do you wanna do and the inner toss well we get an input field we put the new name of the category and click OK and the category name I'm gonna be change this one who wants so it's kind of a very simple but we're gonna use Ajax so if you don't know what is ajax ajax is just for exchanging data without reloading the whole page so if you want to like go grab data from the database like fetch data from the database without reloading the whole page you can do that using ajax and Ajax actually stands for a so cleaners JavaScript and XML so you can send requests from JavaScript and handle it on the backend with your server-side language let's say for example PHP on our like what we argued actually use in here or you can use Python or any other language and you get a response from JavaScript and you can handle it like show it to the pH or show that yeah do whatever you want but this is what's actually it's a jack so we're gonna use it's gonna be very simple for us firstly first things first actually go to the code is to a museum now we have to create a JavaScript file we haven't named doc Jay has given to the resources assessed JavaScript and I have created a new folder called me and I've put it's a main dot JS file and make sure to go to the objects and require any file you aren't or you wanna get Adam into your application make sure to require and put your file name in here we use the require function because this is like making your file compiler than the runtime so we have already talked about how compile an set so you can run npm run watch to compile this because we really need to compile any changes we do it into the file I'm gonna wait for this to run until that we're gonna go to the category table dot PHP and under these buttons we can adjust change some things so we're gonna need to add an event or not review to know which button has been triggered or not so as you can see have already done this like the most of the code this Ajax they were already implemented just it out it's working but I'm gonna explain step by step what it's going to do because doing it's real time on the video gonna take a really long time so yeah just making it very simple even understands very easy so other attribute called data plus J s equals open edit and when we get or let me put some attribute equals like the end of this just open edit that's gonna open up a pop-up with within a that's like an edit feel that's tell us like we are going to editor a category on the other case we have the autos J s equals open to remove and this one gonna move just open up a pop-up and tell us like delete are you sure when we click OK you're gonna delete the category so this is gonna open up the pop off of the remove this one is for the editor pop-up and here we have inside this is fan and we give it this span an ID of the actual category so the span cannot render out the category ID so we can use that later on JavaScript code to get the idea of the category that send it on to our PHP so PHP can use the ID to find the category from the database then like remove the I worry or something or it is the name of the category so that's why we use this ID make sure to put it in there and this is all things the best I'm just using a class and just about a name simple things so for this handler we need to use a pop-up I've already done a pop-up or created the file called model blade PHP so we when you go to the end of the views include there is a model of plate or PHP make sure to put that in there you can create your own models because it is very simple creating a model for professional things you might need to create your own including objects like JavaScript objects like gonna pass all the data and make your like allow you to fully control this and other things remove things but for now we're using the bootstrap model you can find this I've grabbed this snippet from the official website bootstrap so you can go ahead and check out the websites you can find this on our recent tutorial on the main website I produced calm for sure or you can just get grab the source code for of this from the github so the postal model have their move model and we happen at model the move model just get delete are you sure and you have two buttons the first button is a button where the class primary and we hope they're not just as the side equals model - stop myth so I have out of this button to know like this is the submit button for the remove and the other case I'm not be using that because when you use to things like when you use this and use it in like into twice usually in the first model and the second pop up model we've got a trigger the events twice so when you click the button you're gonna open up the two pop-ups so you don't want this complexion what I'm doing is using another form like one this form telling when this form is submitted you're gonna run the Ajax code it's very very simple I'm not using that because of the miss complexion so this is the models feel free to use them now in don't mean the Jas file we are actually going to open up models so first things first we have a remove model up here and the remove model we're gonna we're gonna actually to trigger this like remove model so we have data danteís it move on click so we are listing the event so the on the click events happening on that and remember this is the button of our category toledo page as this one like this is the button i'm talking about so we are while listening the event so if you're not familiar with jQuery events bindings and listening so please make sure to learn that first because this is gonna be a basic thing for you two to meet Ajax and pop-ups and all of this kind of things things you aren't doing right now so therefore our binding a click events and just consoling long clicks just for testing purposes like you know like this is a button husband clicks for debugging and this one is especially for booster up so if you are using a model from bootstrap as in my case in here please make sure to call this but if you're using a custom thing you can just use the CSS show and hide method to show and hide the pop-up but this one is specially for bootstrap we put the remove model ID which is specifically for the remove model and it has an ID of remove model and we just call the function or the method model and just gonna open up the model for us and here we're gonna help all the Ajax so let me just give you this I've already comment this out and obviously I'm gonna explain every single code you hear it's gonna be very simple once you go on in Jack's it just it's very simple to use a minute place as well so let's refresh the page and as you can see we have the remove when we click on the remove we get a nice pop up animated thing and tricks looking really nice delete are you sure and what we want is we click this okay button now when we click get nothing like literally nothing or the category moved successfully believe problem here sorry guys yes remove successfully didn't disable the functionality as I told you I've already implemented that for testing purposes but doesn't matter matter let me just recreate that category touch me huh just really sorry this okay as I've said when I click the remove we get the pop-up and what we want we click on this okay button we won this category disappear and the page reload for like making changes and letting us know that the category has been successfully deleted with rendering this with a nice message like category name and category has been successfully removed not bad we are talking about the remove situation in here so to add that actually we're gonna need to the sunglass so let me just open up the dev tools so if you are making in JavaScript changes make sure to open up the dev tools to make these changes like sake effects because chrome uses a cache and you don't want to lose this just open up the dev tools for changes to take effect and here we are listening for the Ajax so this Garrett SJS does type equals model submits we have already mentioned that so if we go to the model and also all the way down until the bottom like the okay button in here so we click this button do to get the events so under this data just just just type on the JavaScript side on the JavaScript file while listening the click events so on the click we're just gonna run this Ajax called some let me in common this and in top of this out as well so for that we are using an agent and this is how we initiate an ajax using jquery another frameworks or another libraries my have their own initializing like template or initializing way but this is how jQuery way has been done so being done actually so we called Ajax when you give us like a couple of attributes we have the the URL and which you are not gonna be triggered on this Ajax like where to send requests and this do the URL and we use this real well you are sorry two routes then into our method on the controller then to handle it with the database so I'm gonna talk about this a bit in well in a moment actually you have a method in post you can use any HTTP method in here I'm using post because we are posting there are like we are sending data and we're getting a response you can get you can use to get just to get to response but I believe using yet you can still send data bus those is always preferable for the Ajax calls and we have data type using JSON so what's the other type or return type were expecting anyone expects you actually adjacent and we have the data to send so for the data to send we are sending the ID of the category so remember when I told you about the color go to Plato PHP we are sending the ID of this span an idea of this actual category so right on on this JavaScript we get the ID then we send it on to a PHP so we let's the PHP file to know which idea we're talking about which category ID we'll talk about actually then like search of the database for this specific ID and let us turn move or edits or manipulate this category or any other thing not just the categories is just a specific example in this case so the ID I'm using a jQuery selector then finding a span remember because while other that's like they'll just say s equals opening move we have added to endure the a elements then we find a child which is the span then the span has not reboots MIT so when we say that it's gonna return the ID this one so when when we return this one is gonna be replaced by the on ideally category and we're gonna get it on the runtime that's when we uses JavaScript that's why it's JavaScript very powerful this kind of things and that's why Ajax uses JavaScript anyway we have another thing here's success so I haven't mention this they are all use adjacent like a structured data so you structure your data as adjacent thing this is all of JavaScript sake you pass in an object and this is what you really want to do like in the most of the cases all in most cases actually so the success this success is gonna be triggered whenever like you get a success not an internal error like not a 404 like you are all this you're not not found or something out of 500 internal server error now we get a success we're gonna return this year on a mirror like a photo for its CPU a response you get this one we're just gonna cost of this log for debugging purposes and here we're just gonna some of the success but what we're actually doing is we're selling if the result of success like which means we have returned a success message then we got a document the location reload which means like unique on this out reload the page so that means we have successfully deleted the category from the database so we need to reload our page for like letting the user now that the category has gone and show a new table that has has no category exists anymore like the category that we have deleted is not existing anymore on that table you get the point so we have document dot location dot reload equals to just forcing really love and on else like we have another success you can sell here else F and result the error and this one actually we controlled by ourselves you can return it you know like blah blah or whatever it's just depending on you but error is like a need for a naming convention I'm just consoling the error that we have gods so here we are using the delete category so the you know we are pointing to is the league hardcore so for the viola we need to go and route this URL into our controller so it knows where to go into what specific function then it's gonna deal with it or handle the requests and return a response using or each other's jason response so for that we go all the way down and do so web dot PHP and as you'll see here we have remove category and everything going to talk about it in a bit so remove category we have a post like routes posts requests and is gonna be triggered on this URL like the least category then we've been appointed to or wrapped it to the category controller adds remove category function we give it a name like category to remove for referencing for the feature refreshing actually so the remove category is a function our controller so now if you go to the controller category controller scroll all the way down you can use any function in here but for like a naming convention alright just personal like doing a new functions for the Ajax calls so I create a new function called remove category and request and what I'm actually doing in here so um first of all I'm finding the category so remember we have passed in the ID of this category the specific category so if passing this ID now we're gonna go and until category find or fail and this is gonna find the category if it found greater success if there is no category presented under that ID we're gonna return an error or an exception per se and this is the request ID we're getting the ID of this particular category since we have to go to the mental chase with this which have just named this am ID if you name yourself like category ID please make sure to change this one because it's very sensitive and did the same name actually we'll say variable now we delete in the category I'm using a method under our model it's called category deletes and on the essence of the category since we have find the category ID it's very simple simple stats now this is just a messaging session the main session message for birthday and I've just done a session flash and this one just got a flash the session 1 so we have already talked about this in the last tutorial please make sure to watch this first and returning a success measure this is what I was talking about so not this one no this is one but we're returning success session message and we're just telling category names removed successfully now we're returning a success and we're sitting in category named named successfully so let's say we have another algorithm so when we trigger an arrow so gonna return an error and this one not gonna be evaluated so gonna have result dot error and it just gonna console.log the error that we have got so in this case we have the success since we have set at this success you can change this name also change this one because this is adjacent thing we have returned it Jason you can use this in an array like tail it to like success it's very simple and gonna work no problems but the preferable way to use it like a dots motif this one is called the dot multi then we are reloading the page a simple that's very easy very simple then we are removing the category we turn and I haven't talked about so we returning at Jason code and this function actually gonna encode an associative array a PHP associative array into adjacent objects and it's gonna return it so that's why you use JSON code you can remove this jason and you don't wanna use like JSON encoding you but using a JSON and Ajax is very very recommended and you do it like makes your life we much more easier than you can expect anyway now this one is working perfectly this is all about a jet it might seem like for the first block it seems a bit like frustrating very hard but so now it's very simple very very easy easy peasy now after saving that's make sure to save it we're logged in the page make sure your dev tools is open for making the changes take effect something on your browser specific especially for Chrome users now remove get the model click OK again aren't we load since we have to use it that reload method and it's gonna reload and gonna tell us that's the category has been successfully removed and we get no cardboard is on the table a simple that's easy-peasy as I've told you just as simple as that now moving on into the Edit category it's gonna be very very simple the same way well done the remove just changing the name in this particular case we're not removing we just changing the name of the category instance from the oldest name to a new name a simple stuff so we are just the category for testing purposes and now this is the like remove model trigger now down here I thought I've just copy it paste this one and paste it in here down in here for just not making it to takes a lot of time and this code is already been implemented I've done this so I would grab this on copy paste in a second but for now the first thing I'm using damages es equals open edits so we're triggering this button again so open edits so click or binding the click events then with costing a lot clicks then we are opening the model specifically at its model not remove model and the models that model is like all the way down it has an ID of an edits model as simple as that as we have done on the last job or in the last instruction as you can say an opening the model if you go in here click edits and the models being opened in this specific model or the Edit model has an input field and in the form fulfilling this point so for the model actually we have other to some attributes enter here the form on what are the input field I've added like the Delta J is - type and this is like specific or a custom attributes we have added edited text so we can refer this on on our Ajax call to get the actual text we have typed in here all the user types in here - passes through Ajax to your controller method or PHP to handle the requests or change the category name or the instance of the category name and here we have the in in the bottom of form just to check if the form has been submitted then we can run the ages call this is it simple as that so here down here well saying edit form doc submit not like this one this one returning the button but this one will trigger in a form just do it so far because gonna do finish things but for professionals gonna find another way for right for depreciating things from like a form like two different models pop-ups so here we need to run our Ajax call so we can say Ajax and I can say URL and this you are not gonna be like forward slash make sure to to use the form of slash which are us like we're in a home so it adds category and we are the data type I'm gonna use Jason and let me just sorry I'm just the method and the method of course gonna be a post as we have done with the last one and this is the Jason what you mean is I believe that yeah the actual tiara I'm gonna pass in an object and kinda has the ID the same as the above because we cannot look for a category so we need to find the category from the database using the ID then we're gonna edit the name of that particular category simple as this so we give the ID and here so go all the way down in turn here paste this one and we other another thing is just I don't really like this song so please but it's go to default other comma go the way down and other the name so this name our chicken is gonna represent the new name of the category time on the pop-up model so for that we're gonna go to the proper model we grab this data tortillas to type to know which field we are representing in here and using the power of jQuery we tell it just to find us this one so we just and easy make sure to know all to make sure you know how we use the jQuery lectures before you use it and because this is very very important thing then we're gonna say getting value of that and it's gonna get get us the ball view everything's gonna be set up now we have the success so a success gonna run a function with the results and as a result is gonna came from like the returning results by the PHP or the backhand script and we have an or of error we're gonna also return a function in this error I'm gonna be our error that's us being like throwing darts or rised error I'm just gonna consult the blog and Ajax I'm gonna say around here so that yeah we're gonna like do the same thing on the top here so let me just copy paste this as far as possible so copy paste and copy pasting copy paste so copy pasting can be very very dangerous please make sure to LIKE now what are you doing because this is gonna go down like kill your application and kill me was well for debugging purposes if you want to like make really scale big scale application and for that we have a success we have an error and this is all what we need to implement for the Ajax call and here for the prevents from the submitting this method actually what it does is prevent from reloading so we have an default form in here so this default form when you submit the form you're gonna automatically reload the page for you so you don't wanna that's because you're using Ajax so you like from the beginning don't want to reload the page are also use this method will prevent the page from reloading so use the e and this is like an events method like default event in method on in jQuery a callback function so you can find it there even before I'm gonna prevent that now go into the controller itself the category controller all the way down and I have already done this like it a category function it takes a request and we're gonna find the category as we have done here then find or fail and using the idea that we have passed in and changing out the name we are now changing the name of the category to the new name so we say nickname request name and this one we have sets in our jQuery not in here specifically so here we are changing the name then we are updating and this method gonna update you can use the save method like say but this is not recommended are all you like most of the time use the update because it's way much more recommended than this save method here we are updating the records embryos in a session to success category mean sex name to successfully change and change successfully where you were returning a success message in here as well for the session so symbols this is how we use it for further information you can check out a lot about the lyrical documentation for more information like how to change the how to deal with the level model and the collection and everything is that gotta find everything in there don't worry now I'm into the Jas we should handle like the success by reloading and the error now everything should looks fine going in had reload now let's see how it changes now let's try to edit the category itself for a second click on edit get this nice input field like new name and category press ok and it should run successfully now as you can see it has been reloaded but we still get a message in here so myth not allowed method not allowed I believe haven't prevented from sub main but I'm doing in this in here I don't know let me just copy paste my oldest code believe a venir in here so which arrow actually I don't know so I'm preventing the defaults what's going on no idea try this again should work well it's not working actually it's just giving us the no message error just put something okay again yeah we now we're getting because we are much refreshed correctly just make sure to everything is working fine now can't be named successfully change the www but this is just an arbitrary name don't take care of this but it's indeed it is working using Ajax and the successful messages and remove as well but okay I'm gonna remove the category so everything is set up and it's any remove we're gonna use this Ajax call as well for the post like on the dashboard to edit and remove the post gonna be real simple as I've said as you've seen here one thing I haven't mentioned in the tutorial is if the Ajax call won't work for you like it's gonna give you like a 409 response stateõs like an arrow for 409 HTTP oh please make sure to include this like go to the up playtop PHP or the main layout up and up there you need to use the token and like this ajax token put the meta name CSRF token count and CSRF token you can know more about this by doc or by searching for a lot of all CSRF protection it kinda tells you how to do that please make sure to include that in the header or in the head and down here we need to change the or setup the headers of the Ajax call from like jQuery user scripts Ajax setup headers and sets the X X the CSRF token and said the Murat name equals CSRF token and attribute councils Constitution so what is this actually doing is protecting us from the CSRF cross-site attacks so it's really big when learnability on your on the most of the PHP website up there but using a little ball gonna protects you from vulnerabilities and this one is like very very big variability that's most of the hackers targets nowadays but it's gonna protect you so if you have an errors please make sure to improve so the up dog blade or PHP and the main layout page the Meza and this lets up scripts Ajax set up headers so I guess this is pretty much it guys fingers watching I hope you will really enjoyed this one - make sure to subscribe push that like button for appreciating our work and why not becoming patreon that will help us and make how the world's for doing way much more tutorials a week I'm struggling to make the toilets recording them a couple of times and editing them and uploading them with the Nick on internet connection it just makes it a little bit more hard anybody think of watching a Korean joint see you in the next video tutorial stay tuned