Enable & Disable Status in Laravel using AJAX & jQuery

[Music] hey what's going on guys hope that one will be fine and welcome back to another great tutorial so in this video i'm gonna explain you how you can enable and disable using the switch right so here we have a switch here and with the listing and down we can also paginate the data so if you could see if i just try to slide my button and and there's a message appear in and three seconds they disappear so we have a notification down here and it will tell that it's the status is updated successfully without page refreshing right so if i just try to refresh my page and the status is holds me where which we have changed it and update the status so just after if i go to the page number two and if i try to uh also change its status so it it me the uh the to the updated status so that's what we are going to create and i hope you really like this video and let's jump in and start the code all right guys so i have installed my laravel project by you need to just simply type your composer and you can create the project by just running this command right so uh in my a lot of videos i already explained how to install the laravel fresh project so we have an open directory here and i have my git patch installed so i just simply need to open up on my vs code so i have my very fresh copy of my code already installed and now you need to move inside your dot env and just uh because we are working on the active deactive so just set that to be change the database name to be active underscore deactive all right okay so now we are inside our dot e and we just close that up and just open up the terminal by just you can uh open up with the view and the terminal to open up your terminal right so you can open up with the shortcut that it provide with the control and the and the tilt here which is left to the number one right so you can open up your terminal from that um so first thing i'm going to do here inside my resources view i have to create a new folder with the name of layout that's what actually i do that's my style of doing things in a very good way so let's create a file with the name of master.blade.php and i need to create a master file here first so uh i need to close that terminal for a while and set that to be active underscore active deactive using a toggle button so as i explained that in my previous two videos i have done the same thing i have a video on the unblock and the block and i have a video on the active directive with two different ways and if you can find interested they are one hour video or so so you can watch that video too in order to understand how to uh toggle using buttons so i have both two videos on my channel right so you can easily watch the next thing i need to do is to go up on my bootstrap so let's open up my bootstrap.com and i already have open up the bootstrap toggle button documentation so you need to go to the bootstrap toggle.com and i want to put this link in the description as well so let's go into your cat bootstrap which is a very famous and popular framework for css so let's copy that um the cdn for the bootstrap four i copy that and let's put up just after the title right okay now i need to do is to just uh need to do some little bit more stuff so just after the the bootstrap url let's give it the custom styling because i need some custom styling here so let's get with here the href and pass here the acid and let's inside ace it i have i want to give the folder css and let's give it the name of style dot css or even i i just bring up another folder with the name of asus so go inside your public and create a folder with the name of asus and inside that i'm going to create a file with the name of style.css all right and next after that i want to create some notification div so just like just after the body tag i'm gonna create an id with the name of notif and otif and give it div right so this is basically my id for the notification so just grab that and paste it here and let's drive some css so i'm going to grab from my css which i already write so you can put up here like that so let's give it the z index of 1000 i want that it should be display none by default and the color should be green the the by default the color should be green and the font weight 450 width of 350 it's just like a normal div so basically i'm creating this font notification while i change my status so this is going to show me the notification div right and the color of the text should be wide and the padding should be five pixel top right okay so so what i'm going to do here just after the notification div let's put up here the yield content so i'm gonna add my content here so let's grab that here and just after that you need to grab the jquery so let's go into your code.jquery.com and you can grab the jquery 3.x go to the uncompressed version and grab and just simply paste down after the yield content right okay so what actually copied oops actually right so just grab the script tag and paste it here and that's fine okay so now after the dev notification i need to do a little more stuff for the bootstrap toggle so for the bootstrap toggle you need to go visit this website and and grab the css for this so i'm going to grab the css and paste it just after the bootstrap cdn and just place it right up there okay and same for the javascript you need to grab this and paste it down after the jquery all right so we are good with that now um now next thing i'm going to do here is to just go to your welcome.blade.php and rename to rename that to users.blade.php all right and after that inside users.blade.php i'm going to remove everything from here because we need to extend from the master file which we have just created so let's extend that through so extends and give it the name of layouts dot master and inside there let's give it here the section of content and end the section and here right after here i'm going to create a container let's create a container and pass up here the message id basically um you can even pass up uh the id or okay we can do it later on we can pass the notification div so we don't need any message let's so let's create here a class for the table so table class equals a table and pass a table heading and inside table heads i'm going to create some table rows and table rows should be only some three ids email name and action so i'm going to grab it and paste it here right now after that we have our table body which i'm going to create here so just after the table head let's create here table body and inside table body you have to create a table rows and inside table rows i'm going to pass here a few things so first thing i'm going to do here is to pass your table heading row just to look appearance y is good so th and after that i'm going to create some table data let's give it the name of test for now and let's pass up here the email test address gmail.com and let's give it the action now the action i i need up here is a button uh which i want to get it from the documentation so let's visit the documentation here so there are a bunch of properties that you could apply and i believe that the button that i use here in my case is the let me find out what i have used in my case so there are a bunch of things you can apply any any button but i believe that um what i use here i have add some some slow property which can animate for a while so for now let's grab the basic one right don't get too much um don't take so much time for this uh so let's grab the uh simple like i just grabbed this one so i grab that and paste it inside this table id right and you need to grab the script tags as well so let's um grab this the in script for this function so i just put that inside your master file or you can do one more stuff here if you need to do things a lot uh a much better so let's here at the stack sorry so add here a stack and add here scripts make it the name of scripts and push up here inside the file which we have just extended so let's add here add and and pass here push let's pass your scripts and the push all right so let's bring up here the script tags and copy that code right okay so we are good to go let's remove these border scripts okay so copy that and now just saves everything and test this out so now i'm gonna run the server using php artisan serve and that's gonna run my server and let's have a look how it looks so it says that view welcome not found the reason why because we haven't created so what i'm going to do i have my vs code already uh sorry terminal open so let's create here our controller so php artisan make controller give it the name of user controller all right so this is going to open up inside your app http controllers go inside your user controller create a function so let's create a function with the name of public function index and because we need to populate the data from the user model so which is already defined so i'm going to bring up here use app slash user so basically this is coming from the user.php right so we need to uh we don't need to change any migrations because i'm happy what i needed so if i go to my database migrations and you can see we have our users table right already and with the defined fields name and email already what i needed but i need to do a one more stuff here right here so i need to do here is i need to create some migration so i have my um let's do here is is to create a seeder so just want to explain you if you haven't watched my previous video i have a i have a video on cders that how it works so just to make things a bit quicker so this is the factories where we have the data which has all which has a name which has a safe email unique email uh we can generate and define here from the faker and it consists of a password which i believe is is a password string which is converted and remember token which has a string random of 10 right so that's by default defined in the user's factory so i'm going to create here a cedar which should be inside seeds which has a function with the name of run so we have to create a cedar and then define here a loop right so go inside your so first define here a cedar and cedars are defined by php artisan make cedar and the name of the seeder in my case is users table seer right and just press enter and it's going to create this going to create the seeders with the name of users table seeder all right so just inside your database seeder we have to define here the we just created here so this call and the name of the seeder in my case it which is user i believe this should be users table seeder colon colon class which is defined in my database cedar now inside your users table seeder you need to define here the loop of data that you need to generate so here i'm gonna create a loop here let's define here a loop uh with the initialize the variable with the zero and bring that till to the um let's create a 30 data so i plus plus all right and inside here let's define here a factory so factory method and inside here i'm going to define here my user models app slash user and create that so let's create the data and my user is not defined let's define here use app slash user all right so close that up and let's create the database first i believe i haven't created yet so if i go up inside my routes web.php not inside my web.php it should be in my dot env let's copy that and create a database so let's open up and create here active underscore deactive i created that and now i need to do is to look for my web.php and i don't need that so remove that and let's define a route get and the cat request should be slash the main home page we already defined a controller with the name of user controller and the name of the method which should be indexed right so now i need to migrate the table so phpr is in my grade so migrated so migration is run successfully and now i need to run the seeder so in order to run the seeder you only need to do php rs and db column seed and let's see if it's one div no it doesn't show any error which is a good thing right so now i have to run a server with simply php rsn sir right so test this out so i go to my active directive inside my users and you can see now we have a 30 records of table right so we can have a data now now i need to show this data on my on my main home page and just refresh this and see so it's going to show up something but um see let's go to my user controller let's close everything from here which we don't need now so i don't need any user factory now no more and i don't need any style.css at least for now and let's go inside your master dot file and we have yield the content right and now inside my users.black.php we extend the master right which is fine we end the section we define everything absolutely perfect and yeah we haven't returned any views so let's return the view so return view and the name of the view in my case should be which i have changed i believe which is users yeah you can see right here user stop blade right just saves it and now if i just try to refresh this and it's going to show me a table like so we have a name we have an email we have an action but our button is still not really working that way we need it so let's open up the console and so it says style.css is not found why it's not found let's check this out so if i go here inside my public assets yeah this should have the folder so i'm going to cut everything from here so i have to create here another folder with the name of css so where i should go so where i should go here public where the hell goes it so public assets so i'm gonna create a folder with the name of css let's create a file with the name of style dot css and now bring this thing inside here right so now we have our correct path and now if i refresh this so our css is now enabled and we need to figure it out why this button is not showing a file yeah although it's uh yeah it's fine but that's what actually um check this out it should looks like this for no reason so let's move inside your master.blade.php so i defined here the bootstrap four right and after that i'm going to define here the bootstrap dash toggle and which is fine and i defined the jquery and i defined the javascript okay so let's do one more stuff just for the confirmation i need to copy this javascript for the bootstrap so let's put that after the toggle so let's give it here and now if i just refresh this it should be there okay so if i just take this to all right so let's check this later on and if i just grab something else let's let's grab this simple button and paste it inside my user stop blade and and check this out so it's fine right i believe that it might be um so i'm gonna put the same one right which i have already so scripts which are coming from the master which is fine now if i just refresh this and go to the control u and you can see now we have our scripts also included right so that's how we can work with that uh now i want to loop my data here inside the table so let's go here inside your home user controller and i'm going to define here the variable users equal to user and let's gonna use a paginated and i want to show five users at on in a single page on on single table and we have a buttons down so we can easily do it with the buttons we can navigate to the other record so let's define a compact and let's put this users and get this inside your users.blade.php so inside my table body i'm going to define here dollar users as dollar key so all right so let's define here the id so dollar key id let's pass up here the name which i should bring from the let's paste it here and let's define here id and let's define here the name and the email all right so let's refresh this and see okay so we have our five records but i need to display some uh some of the buttons to navigate it so right after your um where you have your table you need to define here the dollar users link so basically this is all the data which is coming from the loop and and just define a function with that with the name of links and now if i just try to refresh this and you could see now it's working fine right so that's all awesome you could see now we can navigate from one page to the another okay so um if i want to grab the links okay that's fine and now i need to go to my users.blade.php i need to do one more stuff here so i'm going to copy it from my previous code let's define here input type of check box we give i give it a class of toggle dash class so whenever you need to grab the id from the input field you need to define a data dash id so that's how we can we can individually get the id so i define here an attribute which is the database id so data dash toggle which is the cl which is basically the button where which it can change from enable to disable so if i define another property which is data slow and data on means that it's enabled and data dash off it means that is it disabled right so that's fine and i need to add a styling as well i did a very basic styling for that so just want to grab what i did here is inside my style.css i'm going to define here the class for the slow and the toggle dash group so it i gave it the transition and the webkit transition so it could show some uh better effect so if i just you can see once i just try to navigate from one page to the another so this is going to have have some some of the uh you could say that this could have some transition i'm taking some times or seconds to to move from one page from left to the right so there you see that it's 0.7 seconds okay so let's uh do here we have the data we have the we have our uh button um or button on switch for that and now we have to write here uh jquery so just down after the script i'm going to define another script here so let's define here toggle so toggle dash class which i have defined and on change i need so i i define here and on change so let's define a function here so as soon as i i i click on the uh button so so it will change it and i need to change the status so let's define a dollar this dot prop and the reason why i'm defined here prop so prop is actually uh is a selector which will uh select the attribute are the values right the most recent values from the uh of the tags so here i'm going to define a prop so we have a value which we need to get which is a checked so i'm going to define a che and this is coming from the if you see that i define here if the key of the status is true that means it's checked and on the other case it means that it's it should have no value right so i that's why i've defined if the if the variable of the it's checked and it's if it's equal to equal to true so it said that that it should have a value of one otherwise it should be zero right and i also need to grab the user id so user underscore id equal to dollar this dot data value so let's first test this out if it's working so i'm going to define here alert for my status and for the user id i'm going to define here alert all right so see let's see refresh this and if i just try to click on here it says one and it's an id for the one right and now if i just try to click on the second interval this is going to give it the state of zero that's working fine now it has the id of five just test this out now it should give me return me a status of 1 and the id of 5 right so we are working with that okay so next thing i'm going to do here after that we need to write here an ajax request so let's define your dollar dot ajax so inside all dot a6 we have a type request of get so we have a type of get and the data type which is json so data type is json what's wrong with that so data type of json i need to define the data and the data that we want to pass to the controller is the status and next we need to pass my the user id which needs to be active or deactive so if we pass the id which is coming from that variable and that's fine for the data and after that we need to write the success function so let's pass up here success function and define the data here and on base of that we can uh we can test that we can easily test if it's working if we have a response success successful right so now we need to also pass the url which i miss here so let's pass up here url so for the url we need to define here so i'm going to grab the url which which i need to make our name route so let's copy it and paste it inside my web.php code so i have a request of route of get request we have a change status and i give it the name route of change status right to define that inside here so let's copy it there the url and define here route so i give it i define my url with the data and now we need to go inside the controller which i just created so let's define here the method name inside the user controller so just after that let's define not here so public function change status so here i'm gonna write here a code so let's pass here the request so inside that i need a user and on base of the request of the user id so let's define a request of user id [Applause] i need to change the status so define here user status equal to request of the status and saves that status whatever we get the value so like it's toggle that save it and i need to return the response so in case if the successful response it said that to be status change successful right okay so we are good to go and now inside my users.blade.php i need to define here some notification div that we just created inside our style.css so i need to do a stuff for this right so let's do here is let's define a notification here so hash and grab this notification div id and i need to use here jquery method of fade in and now just after that i need to do the background so do the background once the status change just show the background of green color and define that selector all right so just same like i need to give the text define the text whenever we change the status so let's give it this status updated successfully and i need to set timeout function to so that it will vanish once we have our when after three seconds this function should should hide right so let's define here the dollar define the selector which is notification div and pass here fade right so i believe that's it right so let's remove these alerts we have already tested okay now i need to run and test so i refresh this and if i just try to define it enabled and refresh this so this is not going to work so it saves some error right after the user underscore id so go to your users.blade.php and see so status of status and the user id and this should be calling all right saves it and now run and test okay now if i just click enable but i i don't see any notification right so what should be why it should not show the response so [Music] so i give it the type of request get data type of json it passed the url let's define the data and after the data we we have our notification due so on successful response okay so first test this out if it's working so we have no error so far and if i refresh it again yeah now it's get i get some error um right it says column unknown column status in field list are so if i go up inside my structure and you see that we haven't defined any status here so let's go first inside your status so create users table and actually i did one thing i'm i missed something here so go to the create users table and right off the password define the status and now close that and roll back all the data so php r is in migrate roll back and now you can define you can migrate it or you you can simply run here phpr is in migrate and now php r is in db colon seed all right now check this out if we have a status yeah we have a status by default the status should be zero and now if i go back to my active deactive status and see yeah i need to run the server again so php rs rsn server and check this out okay so now if i just try to disable and if i refresh this and it's keep from keep me to the enable now if i just want to refresh and you see the status change and status updated successfully and we can also define here some because you see the message quickly disappeared you can also define inside timeout you can define the inside the fade out or yeah right after here you can define after three second it should disappear right so refresh that and now if i just try to disable enable and you could see after three seconds a message appears and if i go to the second one and it and refresh this so it's gonna remain the same right so refresh that and it's working right now if i want to check the database you see only the status which we have change it it's gonna show the status of one right so that's really much it guys i think so you really enjoy this and if you really love this video you can please leave a like and subscribe and i want to see you in the next part

Channel: AB Nation Programmers

Views: 6,949

Keywords: laravel, laravel tutorial, Enable & Disable Status using AJAX & jQuery with Switch Button, Enable & Disable Status in Laravel using AJAX & jQuery

Id: W8npNTy59oQ

Length: 36min 19sec (2179 seconds)

Published: Mon Dec 21 2020