Ajax CRUD in Codeigniter 4 - Complete jQuery Ajax CRUD Crash Course in Codeigniter 4

hey guys welcome to my channel so with in this video we are going to learn about new topic that is jquery ajax crud application in codeigniter 4.x versions so guys now let's get started with that so as simple i have created a route with that ajax student where you can see this page okay so let's go to this page and start inserting the data using jquery ajax in crowd application so all the data will be stored without any reload of the page okay so let's get started guys as simple you can see a fresh application let's move to our app then views inside views i have created ajax folder and this is index.php file which is extended from the layout so in this frontend.php i have included the bootstrap okay let's move to layouts folder and front end dot p php over here you can see that bootstrap min dot css file is there and then bootstrap mn.js file is there and then jquery link about that so you can utilize in this format and use the code for it like pop-up models so if you don't have please include from here so let's click on docs and getting started you can copy this css links and this bundle link okay or else you can paste it separate separate as i have pasted for popper and bootstrap done so now let's get back once included your setup with this once then let's get back to our index page and start the code about it so first i will make one card and inside this card i am going to make card header and here h4 tag where i will tell jquery ajax crud okay where student data this will be the student data and card body where you are going to fetch all the data so before fetching uh we are going to insert the data so now over here you will be using let's create one a tag create a and close a href is equal to where i'm going to give hash symbol shift 3 and inside this we have to give add so before giving add i want to give a class and design this button so button button where i'll make this as primary and let's float it to end so i'm using bootstrap 5 so i'm using and if your bootstrap 4 please use write let's save this and check the output so you can view the output right so now when i click on this the data should get popped up like pop-up model so guys let's go to a bootstrap and search for the model m-o-d-a-l let's click on it and over here you can see the one demo so this is how the model looks and let us go mid little down live demo let's click on it you can see this so let's copy this only okay so this is the button so i don't need the button design i just need this this small code let's copy this and paste in into our a tag over here just paste that let me just minimize the sidebar and now you can see that example model so instead of example model i want to tell student model as simple let's save this and now over here above this only not here we'll make it above container we will paste the model so what model you are going to paste this pop-up model design so guys it's below only so it's given over here you can see that so let's copy copy and paste done as simple in a small design is done and now uh the id which you have made now student model let's copy this and replace over here done so if you want to change this label also example let's make that also simple let's save and change the title student data save changes to place just give save and let's refresh uncheck the output first get back reload the page and now let me click on add so we have clicked here the model so guys the requirement is about adding our data so for that let's create a table on it and then we will insert the data so guys i have already created the table where you can see that where i have created with the name called students and this has id name email phone course and created ad so this create ad is nothing but the time time stamp i have given over there so let me view the structure of it over here you can see all the types of it and the default where i have selected with the default called current timestamp that's it so let's go and start the coding about it so first what are the fields you want to insert name email phone and course okay so now let's get started with creating four input fields let's go over here and as simple let's remove this dot and tell form group and insert this one label where i'll remove this and let's add full name and now over here input type text give a class form control and the placeholder is equal to enter your full name that's it so let's copy and replace with everywhere and change this the type 2 email and then phone number and that one final which is about the course so let's copy and replace over here also okay as simple copy this email and paste done so let's refresh and check the output click on it where you can find all these details so guys now let's start to enter okay placeholder didn't come let's check okay spelling mistakes so let's control d and give the correct spelling and let's give a class for it inside this class you have to specify its details okay so what details you are going to specify this will be the name and email here will be phone with this only we are going to insert the data with this help of class and the course save that's it let's get back refresh you can see all the placeholder is also coming so guys now let's uh insert the data for this so let's get started with that here the name where you are going to tell ajax student hyphen save okay so this is your class name now so let's take this class name and code it below paste that below let's code over here okay so now guys we need to render the section so about what rendering the section is nothing but about the script tags so let me just copy this same section and call that over here okay let's copy this and paste it again where you will tell this as script scripts and let's copy this and over here in your front end dot php where you have extended all the layouts right so over here how you have extended render section let's extend one more render section for script tag so make sure whatever you render it should be below this jquery and bootstrap so let me just show you it's over here so i have rendered this so let's copy the same name and paste in your index page okay so same name so now you are ready to code over here so let's use the script tag to start the code and now let us call that class name so on this click we have to check that it's working or not so let's use jq dock shortcut to get started with that so let's use on click event so on click event on in this we need on the document and then on this click event thing you are going to use click ok so no spelling mistake and now over here on this class and your button ajax so let's see if we click on this button it's work it works or not let's type over here hello i'm here so let's save this and let's check that it's working fine or not so let's get back refresh the page and now let's click on this add click on this save button you can see hello i'm here perfectly working so guys now first let us validate this input field so if there is no empty it should show an error or else it should insert the record as simple so let's get started with that so let's remove this and start the code about it if inside this if and then else condition okay if it works means great like that so let's give that trim function to validate so i've just pasted now over here and inside these guys we have to fetch this okay so what is that you're fetching that is name okay and now this name will be called from your input tag so this input tag which we have used the class called name so this i'm copying and pasting here as simple now done and when you're validating this you have to set that so let's called e-r-r-o-r error underscore name is equal to where inside single quote we will tell please enter full name okay you have to paste it somewhere so this error should be pasted somewhere so how will you paste that so let's copy this and do it over here and now inside this you are going to say dollar error same name we will give let's copy this and the same name you are going to give and let's copy this once again and paste it below as simple and make this to null done so this is how you do validation so let's create a id within span tag so let's move over there input so this is our input right so over here only i'm going to create one span where i will give this id is equal to inside this error name and let's give one class for the designing purpose where text hyphen danger and margin s will be three so that sideways so let's copy this and create for every one same way you are going to create that let's paste and change this from error email error phone and then course done so it's now let's save this and now over here you have to repeat the same code for four of them also so let me just copy and paste and arrange according to it so let's just move with this so it's let's paste and just finish that okay so before pasting that let us just test once so let's go over here and let me just refresh okay now clicked let's click on it and now without any entering data so i'm going to click on save you can see that message has popped please enter full name so this is how we do validation so make sure you are completing with this all the four details so let me just paste with that okay guys i have already pasted now a simple this is for email and this is for phone and this is for the course okay so once your validation code is done then we will move on with this condition to check that so if the condition works then you are going to check and return false false if the condition executes then we have to save the code so how will you save that so we will be using ajax code so before that we have to give the conditions so what condition you are going to give this same error name so let's copy this error name and paste over in this if condition not equal to null or your email so let's copy this email which will be not equal to null or again the same condition for phone which will be not equal to null or then final which is error course error course which is not equal to null done so once it's done we are coming to this condition over here so let me just show a demo with that let's alert and let's give hello save this and let's check with that let's refresh add and let's click on everyone okay so you can see that everything is working fine let's click on this every data we are going to give save hello you have come over here cool so this is how we check with that so let's close this refresh and let's get back to code so guys now let's type with the ajax query over here jq ajax where all the details of that will come and we don't need this data type so we'll remove this and this method from type 2 method and over here you are going to tell posd post and let's create a url for that took over the data so let's create a jacks hyphen student student forward slash store and then create with that and then over here data so let's cut this and directly paste that and let's create this data over here so what data you are going to pass over here is nothing but all your input tags so let me just open with curly brace and give semicolon over here and now inside this you are going to pass all the details of your input values so let's create name let me just finish with that one step so let's give dollar open parenthesis and close and val value so now over here you need to pass the name whatever you are getting from the input so we are getting a name tag i mean name with the class so let me just show you so this name we are getting not this this name name okay from your input so that name we are calling over here so let's call over here and see where you have to call all your inputs so before giving this semicolon just give comma it's not that so guys let's change this names over here second was email and then third was phone and the fourth one was course okay so same way you are going to copy and paste with death also make it phone oops be honest email so this data will be sent over here and now once it is sent we have to show that message okay so i have used alertify thing into my application so you want to know about that how to show that message you have to watch the video which is link is given into the description so i'll paste that alertify thing so guys once i save that data is saved just imagine data is saved then it will show the success message so before showing the message we want to close the model so i mean to say like when we have clicking on the save data that time this field should get empty and then model should be closed automatically so for that there is a simple code for that type where you are going to tell modal model so the model is a bootstrap js thing where you are going to tell hide and what what model you are going to hide is nothing but your student model which you have created so let me just show you so this is the id which you created now so let's get back to our script and over here you are going to call that because it in the id so you have to paste that and now inside this only if there is any data so what data you are going to tell input tags so let's find in this model so in in the student model you are to find that what you are going to find all the input tags and if it is there you are going to set the value as null okay so which will remove all the values and make it to null simple so let's save and now guys you have to create a route for it so let's copy and create a route let's go over there routes routes dot php and over here let's create that route routes where you're going to use post method okay not poised post over here let's pass that route let me just remove this forward thing and now you have to call your controller so we have already created the controller so let's paste that and let's give a store function let's create a store function in your student ajax student controller so let me just move to it in my controller you can see ajax student controller so let's open that over here and now let's create a function public function where you are going to create one student function and now inside this you have to code the data so let's call our database table so which is nothing but your model so this this student table we have to create a model for it we have already created with that so i'll just show you inside my models where you can see ajax student i have created and added all the data into it okay and now let's call this model called ajax student so let's use at the top so we have already used and let's call this okay so let's create a variable called students is equal to new adjacent student and gives semi colon after this you are going to create one data variable in assign an array and inside this you are going to call your database name so this name will be your column name over here let's copy this name and paste and then call your input fields okay so dollar this which is request request request of which is coming by getting by post method okay and what is the force data you're getting how you're calling into your index function where it is okay so these are the fields so let's copy this name and call over here as simple so this is how we are going to call let's remove this semicolon and give comma because it's in array so let me just do for that three also okay paste and done guys so now let's give a save function to store this data so let's copy this let's copy this variable student and use the save function and over here you are going to pass this dollar data let's copy and paste so it will be getting saved inserted but i want to show the status also what is the status of that so let's create a variable called data and inside this you are going to store the value what value we are going to store status which will be called as student inserted successfully done and let's return this return dollar this which is we are going to return in gsm format so to written response in set json open and close parenthesis and inside this you are going to pass this data that's it saved so once it is sent that time what will happen we are taking the status so let's go to our index page over here and you can see that same status spelling we are getting so whatever the response is coming inside that i am continuing with the status so once the status is set it will show the message so it's now let's check and insert the data so there is no data into this table right now so let's insert that and check with that so before inserting make sure your developer tool is on and check with that so these are the basic things which is of the bootstrap just ignore this and whatever the error comes now that will we'll check with that so let's click on this wait wait at gmail dot com triple a triple eight save the course which is bca let's click on save okay so you can see that message has come student entered successfully and there was no error also so right now let me just click on this and you can see that all the fields are empty and model automatically closed now with let us see in this input i mean db with our data data is inserted okay cool so this is the data is inserted successfully so guys we have done completely about how to insert the data into database without reloading the page in jquery ajax and codeigniter 4. so guys now we are going to fetch the data using jquery ajax okay so let's now let's get started so before getting started i just want to tell that we are going to do about designing the table and fetching the data into that table so let's get okay so over here you can see the card body so this is our jquery ajax student data over here so this is a heading and now inside this card body only we will start the design okay let's create the table dot table dot table bordered hit enter now let's get table head table row table heading th where will be id so as per our db requirements we required that this table data okay where you can see name email phone course created at so we'll call this let's call that name email phone course and finally one create and then one more which will be action for the edit update and view let's create over here td table body and inside this you are going to give a class give a class called for example we are doing student data right so that student data will give here and let's start the code for it so before starting let me just refresh this page and check the output okay so you can see that table format now let's begin with that so over here you need to render your section of the script and start the code over here and let's create one function function named as load student okay and inside this we will write the ajax query which is jq ajax shortcut method and let's make this method over here and we want to get the data so let's use get method and i don't want this data and data type because not posting the data okay let's create a route for here that will be ajax student s u n d t s forward slash get data okay so we are going to create this url route after that we will fetch the data so how will you check that so we will use this for each key okay so each loop we have to check with that so first let us create and get the data first let's go to our routes and let's create here dollar routes where you are going to use get method paste and move to your controller so we have already created that controller name let me just paste that and we will tell this method as fetch so let's go to our student attack student controller and create a fetch function or a method so let's move to our jax controller and over here create a public function where fetch will be there okay so fetch method is created and inside this we have to write the code for it to fetch the data first let's create a variable called students is equal to where we are giving the key of our ajax student model okay and this a jack student should be imported at the top so you have to call this use this model so this model is already created over here as you can see that this model is connected with the name stable student and what are the fields to be added or fetched updated into that this requirement and move to our ajax controller down and let's write the code let's create a variable called data and inside that will create one hurry that is two dents s where you are going to pass this dollar students where i'm going to find all the data find all function values which is given by codeigniter and will be used and return this written dollar this response response where we are getting in json format so let us set that json set json and inside this you are going to pass this variable called data so let's pass that done as simple so guys after doing this you have to go back to your routes i mean your jquery code and over here after that success you are going to see the output over here so let's console and check the output dot log let's paste and now over here you have to call this students s t u d e n t s so this student is nothing but from here let me go over here let's copy this and fetch over here let's see the output now let's get back over here just refresh and let's inspect okay let's move to our console let's refresh okay how will you see the output we have to call this function outside so let's load this function outside check your dock where you are going to call this function as simple so when you load the page this function will be called automatically and it will fetch the data and show over here so we need to check that refresh now over here let us check with that so you can see that id number one data is coming so this is how we check that data is right over here you can see so let us just print that in table format so for that you need to check with the for each loop conditions okay so let us check with that how to make a for each loop in jquery so you can type jq each where you will get this format so over here we need this response dot student where inside this we have multiple array so this is your key value like index values we tell and over here the main value so let me just make it to value and from this we have to fetch the record so how will you fetch so let me just copy this once again and paste over here where we'll take this value and remove this and make into array of name so this is my database column name this name okay so this name i'm going to fetch let's get back and now let's save and see the output of it let's refresh over here you can see that with data has come cool so now let's print that into a html format so let's comment this and start the data dollar open parenthesis and close parenthesis where i'm going to append the values app and the append method and inside this we have to type the code of it okay so after typing that code where you want to load that data into a class of this student data so let's copy and paste over here that's it and over here whatever data you're going to append where i'm going to make this and inside this you are going to start table row okay and let's make it down from here let us give flash and now td open close concatenate the values to a single quotes where you are going to paste this value value dot name okay so first will be id so let's create one class let me just give forward slash let's create this value as one class we'll create called student underscore id done and now simple way we have to change that so let me just complete with this and show you the output of it okay so guys here is the changes which i have done and now you can see that email phone course and then simple three buttons i have made okay one is for view button so let us make it view underscore button and edit button and one delete button okay so i have assigned the class and simple for designing thing view edit and delete so let's save this and check the output of it let me just clear this space now let's test the let's refresh so this data has been loaded now but we missed something over here that is created at so let's call that also where you can tell created underscore at oops we missed the spelling save and refresh so data has come guys so guys finally we have fetched and now one more thing like in previous video when we add that this table should get automatically loaded right so let me just add one data and show you like home home gmail.com where i have saved over bca let's click on save you can see that student inserted successfully but didn't load why we did not call the function so let's call that function let me copy this load function and paste into that code wherever you are written that code to insert the data so at that time you have to load this so let's call this load student function to load the data so let us get back again just refresh the page and now you can insert the new data and check with that so let's insert over here you can tell vijay vijay at gmail.com and some phone number become let's save over here you can see that it's loaded but it didn't clear the old one it's concatenated that so for that one more thing is there you need to just empty that table okay so what table you're going to empty this student data let's get back give class and then over here dot html inside this you are going to empty that done so let's save this and let's test one more time refresh let's click on add anwar will give unwar gmail.com phone number bcab let's save this and you can see the output cool so this is how we insert and fetch the data without page load okay so as we have completed this how to retrieve the data from database without page load okay in jquery we are going to learn about how to view the data without page reload or refreshing in codeigniter 4 using jquery ajax so as you can see that table has been fetched over here and when we click on this view button that time the pop-up model should pop up and with this data okay so guys let's get started with it let me just refresh and now let's go back to our code so this is our table as you saw in previous video we have fetch the data using this function in ajax okay so this is the button now and the button which is over here view and the class name button we have given so this is our button which is you can see over here done and so let's copy this button name write the code up for it so let me just copy and over here we are going to start the code as you see in the jq dock okay so now first step we will get with let's type jq on event function okay so now over here you need to write the selector that will be we are going to check with the document when it's loaded and on this event what event we are going to use so we are going to use click event and on what click you are going to check with that so we are telling with the dot class the view button name okay which we just now copied this button so once it's done we have to check the first row id so i mean to tell this id i need okay so for this as you can see in this function we have already created one class called student id with the tr in the table row of a td or student id so let's create a variable inside this i am going to create one variable called student id is equal to where dollar open parenthesis and inside this you are going to tell this where i'm going to get the closest of your and what closest you are going to get this tr row so let's copy this table row which is and insert this table row i'm going to find so what you're going to find that student id the class which we have created so let's copy this it is a class so you need to give that dot let's give the dot and paste over here and then we want this value whatever the data is stored inside this so we can get that value from the text method okay save this and let's check this output first so let's use alert function and let's echo this save and let us test check out that let's refresh and now guys we are going to click on this first id okay so let me click on this view button you can see id number one cool so the output is coming and let's move to id number three and let me click on that view you can see that id is coming perfect so it's now let's write the code for to get the data in model so let me just comment with this and now over here we need to write the ajax query so let's type jq ajax to call the query over here we are going to use the post method so let me just change with this method and you are going to tell over here post where you are going to create one url called ajax hyphen student forward slash view student okay and now inside this data we have to send the details about that so we are going to send one student underscore id data where this student variable we will send it as simple save it once saved we don't require this data type so let's remove that and inside this success we have to get the output so let's go over here and create a route first and from there you are going to get the response okay so let's move to routes and create one route over here so let's type r-o-u-t-e-s routes with the post method inside this you're going to pass this and same controller we are going to use so let's copy this okay done and over here create a view function so let's copy this and go to adjust controller and create a view function go over here and create one public function with the name view and inside this you are going to type the code about it so let's create one variable called students is equal to new and your model so my model is adjacent student function as a student this is model okay so model means you have to use at your top so make sure you are using that model and the model is this okay with the name student as simple so let's get back to our controller and start the code let's create one variable called student underscore id is equal to which will we we are getting from the request okay so reqst request which is coming by post method so get by post method and what is that you are getting over here is nothing but your this data called student id so let's copy this and paste over here done once you get you have to find the object from that id so before that let me create one variable called data and inside this array we will create one variable called students let's give is equal to and call your object and from that object you are going to find the id so which ad you are going to pass is nothing but this student id you are going to get and pass inside this so once set you have to set the set json format to return the output so let's copy that same thing over here and this data is nothing but your this variable okay as simple so once it is set you will get the response in your adjacent over here so this response will be there and now let's view this let's give console.log where we'll paste this and now let's check the output of it so let's go over here let's refresh okay inspect move to your console on the console and now let's click on view so i have clicked you can see that student data has come right so you can see that to name ohm okay second row we clicked and let me click on this fourth one click on four you can see that the second value has come so this is how we are fetching all the data cool so now let's get this data into a pop-up model so i'm intel in this format so we are going to use the same model if you don't know how to use this please watch out the first video or else learn about bootstrap model okay so let's get continued with it so let's comment this and start the code so for this we have to take all the data about it let's use jqe which is forage loop in jquery okay let's set the response then let's make this as your key or index value and over here you can tell let's create a shortcut called student view data okay and this data will be let us this console log with this and check the output of it let me just paste over here and now over here student view where you are going to fetch from the array format that is your database column names so we have already this name over there so i mean to tell this name field so let's refresh and check the output let's inspect and we will check the output first whether the data is coming or not go to console and let's click on this wait you can see that data wave has come let's click on on over here cool so this is how we are getting now let's paste this into a div tag so for that let us create the model for it first so let me just move to top where we can see that add model for student we have done and now let us use the same model to view the data where you can just remove all this details from it and use h4 tag to view the data i have already done the design so let us paste with that let me just paste over here as simple guys there is nothing much i have used one h4 tag inside that span tags where where i have defined all these things so we will be showing the data with this help of class so let's get down to our script over here and from here you are going to view the output so i'll just show one demo with that text you are going to update over there so what text you are going to update is nothing but just now which you viewed for it so let's send this over there where you are going to send the id first and let's give dot which is your class name which you have created in your model as simple you can see that where is that model id view let's call this and paste over here and let me just complete with the fourth step also okay so let me paste done and these are the four all the fields which we are going to update over there so that is in the model so what you have to do just call the model name over there so model function where i am going to use show right and inside this you are going to call that model name so hash student uh view model built okay let's copy this and give the name same name to it model so let's go to a model so this is what's our view model view student model and this is the id let's paste over here and let me just change this title save this and now let's view the output let's get back refresh let me close this so i'm going to click on id number one where i'm going to click view you can see correct data with way that gmail.com and his phone and course detail is has come so let's now let's test with another thing which is id number four where you can see that fourth data has come cool so guys we have done how to fetch the data or display the data by using id using jquery ajax in codeigniter for so guys we are going to do about how to edit and update the data okay so guys now let's get started with this edit option so what we want to do is that we want to when we click on this edit button that time a model should come something like this and the same input tags will be there and then all the data should be fetched so these data should be fetched inside this form okay so let's get started with it let's go to a vs code editor and over here this is our table and the script for code so let's move on and let me just minimize for this view button so we coded in previous video about view button and now we are going to start with this edit button so same way you are going to get started with it as simple so let's check with jquery on event function and over here you are going to turn on document select so when the page loads i want to check on the click and then on what click event which we want that on a button so what button is nothing but your edit button so this edit button is nothing but your this edit button okay so this button is your edit button where you have assigned the edit button class name so let's call that so inside the dot you have to paste that okay done and now over here you have to select with that so what you are going to select when we click on this i need this first id so let's get that id number one so how will you get that for that you have one the class student id inside that from with that help of student id we are going to fetch a simple let's type that first i am going to create a variable called student id is equal to where you are going to tell this dollar this so when it's clicked i'm going to get the closest value of that so closest value is nothing but closest attribute is table row and i'm going to find inside that so what i'm going to find the student id is stud id which is the class so you need to assign with the dot and then get the whatever text inside that so text function and now you will get this student id so guys now let's write the ajax code to call that a simple jq ajax and make this type 2 method and method we are going to send is pusd post and let's remove this data type we don't require and over inside this data you need to send the student id so let me just create that input of your student id and this you are going to take and paste over here that's it done and the url will be your route so a jax edit okay not like this attacks student forward slash edit we will talk okay let's save and now let's create a route with this so first step so after creating all the code works then we are getting into response so let's create a route let me just copy go to routes.php and let's create one route simple dollar ro uts routes where i am going to use post method okay because we have passed the post method into that and let's move to our controller called ajax student controller which we have already created that so let's copy and paste the same controller name and over here we'll create one edit method done okay why is this error showing oops i have given a dot make sure you are giving comma so let's go to our ajax controller and create a edit function over there ajax controller let's create public function where i'm going to use this edit oops and inside this we have to type the code so as simple you are getting the data right so we have already used the same code to get that so let me just paste that same code so a simple created a variable and inside this we are calling our ajax model where you have to call this model so to call this model you have to call at the use with the use thing where you can call this a jack student so this ajax is already over here so this is my table so let's get back to our function called edit over there and getting your student id so this student id you are getting from your ajax code so over here you have pasted this so let's copy this and paste over here paste that and then you are storing into variable student id and then you are passing that id into your object called students so this student object where you're finding the data of your from your hijack student using find function and then storing into variable of array that is students done so after everything works then you are sending this data into a response of json format so let's pass this dollar data variable inside this and after the success of this you are going back to your index.php file over here so let's copy and console.log function and see the output of it so let's get back to our google chrome refresh the page you will be able to find the output so let me just open console so let's click on inspect and go to your console page over here so just ignore these three lines because this is a bootstrap thing so just ignore that and let's click on this edit button on id number one let's click edit you can see the data has come over here perfect so id all the data is coming let me click on four you can check with that id4 it's coming cool so guys now let's fetch this data into our model so which will be using the same model we will use it so let's close and let's move out and over here let me just comment and first let us fetch all the data so how will you fetch that using for each loop so in jquery you have to use jq each jq each over here and then let's take this and set the response over here and make this as key where your student value done and then you have to assign it into one value so let's give a text or value can give we need an input box so we just mentioned with the val where you are going to mention that in your name first we will take with that id and give this into hashtag where i'm going to tell student underscore id then same for this second one also so let me just complete with this four steps for input step done now guys let's call that model also so what model you are going to call oops let's give escape and now inside this you want to show the model so whenever you click that modal model which will be show and the model id which you are going to tell is hash student edit model okay so we are going to create with this id a model so let's get back to our top where you can check with that add student model right so let us copy this oops let me just copy and paste over here let's mention it as edit student model and now you have to copy your id so what id you have given that code okay so this is the id which we are going to assign with the model this is our edit student model over here let's paste that and now over here edit student data and the data you have to pass inside this so what will you pass over here need to pass that id id is equal to where you are going to tell that all your ids which we have given over here so student id so first you have to create one input for student id let's create that input which i am going to give as hidden we do not need to show that let's give id we are going to tell this student id so same way you have to assign this id for student underscore name with this okay student under name email also for the email so let's complete this for our inputs so guys now i have pasted for this each input tags email phone and error course okay so i just removed that the validation part from here to show that message and now let's continue guys to update the data let's go back to our model over here let's say everything is working fine and now let's check this so let's come over here refresh the page and then let's click on it let me click on edit you can see the model edit student data where you can see vader gmail.com phone number bca cool everything is working let's check with the id number four you can see onward data has come so guys now let us change this button name to update and when we click on this the data should get saved so let's begin with that so first step we will change the button name first so let's make it to update and over here let me change this button name to update okay student attack student which is update right so let's take this name and start the code about it so let's get back below in your script tag and let's comment i mean let's make it small and start the code as simple let's check with jq on event where you are going to select document and event will be click event on which which will be adjacent student update so on this click the function should work so now once it works everything is fine over here so let's call that var i mean create a variable called where data is equal to inside the curly braces i want to fetch all the input fields so how can you fetch that so first let us tell name not name we will give id and then name so first get that so what you are going to get the id over here so we are in the student edit model over here and this is the student id so let's copy this which is in the id copy and get back to your script over here let's paste that hashtag where i'm going to get that value from that okay done and now same way you're going to paste for everyone change this variable things so let me just change and add all things so over here we are sending this name and from here you are going to call that name attribute of your model so name id so this name will be copied and then student email so let's get back to code over here let's update that so let me just finish with it so i have added now once it's done guys now we have to create the ajax query to update the data so let's tell jq ajax and change this type to method where we are going to tell this as post method and from this we have to create a url but before creating url let's remove this some data as we don't need over here and this thing we are going to remove and call this variable called data over here and let's create a url ajax student where forward slash you are going to update done and then you are going to send it let's copy this name i mean url and create a route we are using post method so let's create route called post and inside this pass this and let's go to our same controller called ajax student controller paste and let's create a function called update into our student ajax controller let's move over there and create the function now type public function let's create a variable called student student is equal to where your key of your model that is adjacent student this is my model where you have assigned at top where you have called that over here inside my model and now first let's create the variable with the name student underscore id is equal to where you are getting that dollar this which will be a request by get the post method okay and that id will be from your adjacent over here as you can see that id you can mention this directly id or let's give a student underscore id okay so let's copy the student underscore id and call it over here as simple and then let's create a variable one more data and assign that array over there and inside this you have to call that so let's call the name where inside this you are going to call this same post method and let's remove the semicolon add comma because we are inside the array and let's call that input name so same way you have to call this for all this inputs so let me just finish with that so guys i have done this and now these fields are nothing but your database column fields so which means that this column names of your database so let's get back over here and now let's call this object student and send the update function into this and first will be pass the id so we are going to pass that student id student id give comma and space then pass your variable called data let's copy and paste over here so your data will get updated so after getting updated you need to send the response over here let's copy this and paste over here and what you are going to send in this so let me just send with that one message over here so let's tell dollar message okay is equal to where you're sending with the array and inside this you are going to tell that status and then give comma and again mention not comma this is equal to forward arrow where you're going to tell updated success fully okay done let's save this and pass this message called message over here inside this so let's get back to our index page and after that response you are getting so let's call that over here so how will you call that we are setting the message so we have already used one alertify to show the message so let me just paste that paste over here and once the response is come over here that status will be called okay so this make sure your spelling is correct over here which you are sending that status so this status should be sent correctly so after updating you need to close some models right so which i mean to say this model when you click on update let me just refresh once again okay something is missing i think so let me just inspect that what is that it's not showing console see on this something is missing which is let me just click on it so you can move to source okay so here is error let's get back and give comma over here okay save this and let's refresh let's go to console cool so data is working fine and now let's continue our code so you can see that right so when i click to update the data should get update and then this model should be closed automatically and input should get empty okay so let's get started with that so first we will move so now let's move over here and let me just paste that code so these three codes i have pasted over here and the first code is a simple you can see that what the models you are going to load that you have to change with that right so let's call that model id you can see that edit student which is student edit model let's take that and paste into your update success code okay and this model will be hide so automatically when it's successful it will hide and then your student table data this table data where your records is paged that time it will make it to empty and then again call this load function so this load function is nothing but your query of getting the data and looping that as simple so let's see and execute that let's refresh so i'm going to click on the second id where edit and now we will change this course to mca let's update and you can see that updated successfully message also came and your data also is loaded where you can see mca without the page refresh cool so now let's again update with this last id where i want to make this course as bcom and let me click so there is no page refresh or reload okay let's click on update you can see everything successfully updated so that this is how we do this jquery ajax card application in codeigniter 4 and let's continue how to confirm and delete the data using jquery ajax in codeigniter 4. so guys we will be using one pop-up model that is bootstrap model something like this okay so let's get started with it so let's move to our editor and over here you can see that our table structure which we have shown over there and let's move to our code place first so inside this you're going to view your table right so i mean to tell the button over here let me just show you this button this button delete button that delete button only we are accessing using jquery okay so over here let's give a class so we have already assigned this class and let's do the code for it so first let's copy this class name and write a simple code jq on event function okay as simple on this we need to select with the document so whenever the website loads automatically and your event will be click event on what click is nothing but your delete button so delete button is inside the class so you need to assign the dot as simple now when you click on this the action should be performed so what action you are going to perform nothing but getting this id okay so let's get this id when i click this the time this id should be called so let's get back and call that over here so first step inside this you can see inside this table whatever we have passed you can see the student id class over here so let's use this class and get the data now create a variable called student id is equal to where dollar this so whenever you click this button that time what whichever button you click on this that time it should get the closest value so closest value is nothing but the table row so let's go to the table row and what you're going to find that data okay so find what you're going to find is nothing but your student id so this is in a class so you need to assign that dot and then paste and what the data is directly pasted over here the id so it is in text format so let's give text function now let's alert and check this let's copy the student id and paste over here and test with it so let's get back refresh your page and now let's click on delete button id one you are getting perfect let's click on id three on this let's click on delete you can see that id three it's coming so guys on this basis only we are going to delete so let's get back and start the code about it so let's comment this and pass this in your model so what model you're going to create so let's create a model function where you're going to tell show and that model id we are going to assign that as student delete model okay let's copy this and create a model with this so we have already done some models right you can see for the adding one model we have done for viewing and editing so let's copy this view model only and here we will create one more model as simple let's change this name over here so this will be a delete student model and the id you have to assign over here so what i do you have given there so let's go back to our code over here script let's copy the script id and paste into your delete student model that's it so model is paste over here and let's change this title uh let's give it as student delete data so this will be the title and remove unwanted data from here are you sure want to delete this data give question mark and create one button okay a simple like yes delete and you are going to assign a class over here let me make it to danger adjacent student which will be delete button okay save this done and now we need to pass one input to check that id so let's pass that id over here and let's give the value not value we are going to tell id is equal to inside this student underscore delete underscore id so make unique name not any other id should not be repeated otherwise it will get clashed so make sure you are having a unique name for deleting the data let's get down to our script and paste that id into this input value let's get back script over here so before that let us give this where hash and your id so what data you are going to paste inside val so input is nothing but your value and the id which we have alerted so let's copy this and paste over here as simple now let's get back to our browser and check let's refresh okay and now let's click on delete id number one i'm going to click where you can find that id is coming one so on this basis only we are going to delete the data let's check with another last value which is four so perfectly coming let's make it to this input box as hidden and delete according to that first step let's make that hidden the input box this is the student delete input he idd and hidden that's it save and now let's code that so first you have to copy this ajax student delete button let's copy and go back to your script and type the code for it so let me just minimize with this and same way you can just copy and paste that so let's copy this and copy the last statement and then make sure you're copying this button and paste over here so whenever you click this that button will work so let me just alert that data first let's create one variable called student underscore id is equal to dollar you are going to get the value dot val so what value are going to get which value let's go to your model let me just minimize with this also table this is your model delete model inside this you have given that input where delete the id you are going to call this value inside this so you are using id give a hash and then your data will be over here and let's pass this into your uh jquery ajax so let's create the ajax over here to delete the data perfectly let's use jq ajax and make this method from type to method where you are going to use the post method only to delete data and you don't need this data type because we don't require and now we need to set the url so let's set the url called jax student with jax hyphen student forward slash where i'm going to tell delete and inside this data the data you're going to pass so let's pass that first so let's create an input which will be student id and inside the student id you are going to pass your this variable which you have created and give comma or else ignore with that save and now after the success whatever the response you are getting at that time you have to save so first let's create a route for it so let's go to ourroutes.php and create a route let's create a routes where i am going to use the post method because we have given post and inside this pass the route create a route and then call your controller so we are going to use the same controller as jack's student controller where we are going to delete function okay so let's go to our student controller and create a delete function let's move over there and now you need to create that function public function delete function and inside this you have to create a variable called student is equal to where key of your ajax student your model so on that student and inside this you have to input at the top so input your class that is your model okay so this is my model which we have created over here so let's get back to a controller called delete function and now let's copy this your object and call the delete function given by codeigniter and inside this you are going to call your id so what card you are going to call dollar this of which is a request of your by getting the data by post method okay so what you are going to get the code you have written at jax so let's copy the student id and paste over here as simple done so once the id gets over here it will automatically delete the data after deleting you need to send the message so let us just copy from top only and send that data over here done and now when you set this response over here you will tell deleted successfully so once you are this is setting right you are getting the return response so this response you are going to get in your ajax query i in your success function so let's give the message to show that i'm using alertify so if you don't know how to integrate that please watch out the video link given in the description let me paste it done so once it successes correctly if it is done that time it will call this data so let's copy this status and you need to paste over here as simple so let's get back over here when you click on delete okay so when you click on delete yes delete that time this model should automatically close and then this table also should refresh without page reload so let's paste that code also over here as simple you can see to load the data we have used the function called this load so first let us call that and to close your model to close your model that means let's call that model over here model function oops spelling mistake over here and let's give hide and what what model you are going to have is nothing but your student delete model so let me go to top and copy the student delete model id copy that and paste back over here so once deleted the time you are going to load the table so before loading that i want to empty and again load that so for that which you need to copy your table name let me just open so this is my to load the data so let me just copy that and load that over here it's in the class so give dot and then whatever the data is there first make it empty and then load the table data okay and set the message simple so let's save this and now let's get back refresh the page and test the output let's click i'm let me add one data called dummy dummy dummy where phone and let me just click on save you can see please enter course so let's enter course bca let's save you can see student inserted successfully and the data also has come without page reload okay and let's click on delete this data so let's click yes delete you can see data deleted successfully and that id number five is deleted so guys we have successfully completed our cloud application using jquery ajax in codeigniter4 and thank you for watching this video please subscribe like and share

Channel: Funda Coder

Views: 8,110

Keywords: fundaofwebit, funda coder, ajax crud in codeigniter 4, ajax crud in codeigniter, codeigniter 4 crud operation using jquery ajax, CRUD in ajax codeigniter, crud using ajax codeigniter 4, ajax crud tutorial in codeigniter 4, codeigniter crash course, ajax crud operation in codeigniter 4, how to insert data using jquery ajax in codeigniter 4, insert data without page reload in codeigniter 4, how to update data using ajax, CI4 crud application, codeigniter 4 for beginners, codeigniter

Id: KdEOVN7celI

Length: 81min 38sec (4898 seconds)

Published: Wed Feb 03 2021