Laravel Ajax CRUD 1: Insert data without page reload using Ajax in Laravel 8 with Form Validation

hey guys welcome back so guys in this video we are going to learn about how to make a laravel crud application using jquery ajax okay so guys we will be doing all the crud applications with ajax without the page reload okay so let's let's get started so i have installed fresh application of laravel over here and now guys we are going to work with the student cloud application so we are taking a example of student so let's first let's get started with creating migration model under controller so open your terminal and give a command so php artisan make colon model where my model name is student hyphen migration and the controller c that is okay hyphen mc hit enter so model created migration created and controller also will be created so let's wait for that our controller also is created perfect so now let's close and yep guys so first let's go to our model so app model our student.php model is here set and now guys we have to assign the table over here so what table you have created so for that let's go to database migration and you can find that student table so this is the table guys so let's copy this table and call it inside your model so use protected dollar table is equal to inside single quotes you are going to paste that students done and what are the fillables protected dollar fillable is equal to and what are the fields you are going to create that is name then we are taking that email phone and a simple course okay save guys and these four fields you are to create over here so i'm going to create that dollar table of where i'm taking the string value so which is where care and where name so email phone and the course okay course done and now guys let's migrate this table into our database which is i have already created a database over here and i have and let's go to env file so over here we have connected it okay done so let's close and now guys let's migrate this table into our database let's open a terminal give a command to migrate so php artisan migrate hit enter so migration created let's see that refresh you can find the students table guys so over here our student table is available done so now let's get started with it so let's kill all this terminal we don't require now let's close this database and model now guys let's move to our app slash students i want the url so let's copy this and create a page for it so first you have to go to routes web.php and create a simple route so let me remove all this route colon coolant get method where students come on and call your controller so my controller is nothing but student controller we have created student controller colon colon class where i want to create a index function so this student controller you have to import the class of this so import class you can see the class okay so let's go app http controller student controller we have created done guys so let's copy this index function and create one function inside this controller so public function where function name index where we are going to return and view the page student folder dot index blade file so let's create one student folder first go to resource views and inside views i want one folder named student copy this index and create a index file inside your student folder index.blade.php file and now guys let's extend this so at extend function where you are going to tell layouts dot app so which is inside layouts you have a done so over here i don't require anything so let me just remove all the things all set guys i want to use bootstrap let's get back to our bootstrap.com click on docs and we are using bootstrap 5 version guys so let's copy this css and paste that cdn link all set and copy this bundle file copy and paste so before this you need a jquery cdn link so let's go to jquery cdn link okay so let's move with this over here code.jquery.com now guys we have to copy the copy this minified copy paste over here so all above the top you have to paste this okay so without this jquery you cannot do your card application of ajax card let's close and now guys let's extend that i mean extend the sections so use section which is content so this content is coming from your app file so this copy and paste over here all set and the section guys and section over here you need to start with the design container row column md12 and inside this container i want py of five a simple a card card header where h4 tag with students data one simple a tag with a simple button design button button primary where add student you will give and float and button small where you are going to give this as a model pop up when you click this a pop-up model should come so before that let me just give card body and yup guys so let's get back first let's check the output refresh cool so you are getting that student data and a button so as when i click this button a model should come so for that let's go to getbootstrap.com and search for model click on it so let's move below and you can see a demo model so let's copy this code from here ctrl c copy and paste inside your a tag and just give hash over here and this model name will be add student model all set let's copy the model guys so this is the model copy and paste back done so let's change the title first student add student this will be a save button where you'll name this button as add underscore student okay and the form design you have to design over here so let's use form group margin bottom three label which will be student name input dot form control where this form name will be will given a class only okay so name so same we are going to copy this and create four times three four okay so this will be your email let's change this email and this will be the phone the class name we are going to keep phone and one this will be the course guys so let's take this course and name this input as course done and let me just remove this student name okay done so it's now main thing we have given this model ms add student model copy that and call that at student model okay so let's give as add student add end of add student done save and now let's check the output refresh okay so let's click on add student perfect so we are getting the input guys and now let's start working with the storing of data using jquery ajax let's get back so let's move below so let's add one section called section where i want to create a scripts and end the section and section the scripts you have to create in your app blade.php file whichever you have included so it should be below this whatever your jquery and your bootstrap cdn link so below that you have to paste that okay so yield of scripts script okay copy this and let's get back again you can paste over here to confirm so now guys let's start with the script tag where jq doc and we are going to check with the on event click so jq on event so this when the website loads it call this as document where the event we are going to take is click event so when we click on that that time it should perform so on what click you are going to take with the class that is dot add hyphen student i mean underscore student so this you're taking from your ad student save button let's copy that and paste over here and now guys once this loads let's prevent default so event when it doesn't make the page load so even prevent default function all set and yep guys so let's test over here so first let's alert and see that not alert let's learn with consoling okay console.log function where you can tell hello save let's inspect guys move to your console click on add student and click on this save button so you can see okay we didn't refresh so refresh refresh guys and inspect it move to console and click on add student let's click on the save button so you can find that hello perfect so when we click we are getting the response so guys now let's take all the input fields in one variable so we will create one variable called where data is equal to so let's let's create a fields name so name colon where i am going to get that what data it is so dot name so dot means class and this name you are taking from your input value where val function if you give it will take the input files so this name is coming from your input field so name so same way you are going to take with email phone and course okay so let's copy that and paste over here four times this will be your email so the input field name also was email and the input field name was phone and over here course okay so same way you are going to give this also so name email phone and course so now let's console log and check this data are coming inside this or not so let's take this data and check save refresh add student now let's insert data over here is dsd let's save okay we are getting error y oops we should give comma save refresh add student save guys you can see that values are coming name is asd email phone and course perfect so let's save this guy status so let me just comment and call the ajax crud so at jax jq ajax we are going to use the type method which is post method and url we will create one students let's give students and the data you are going to send what data you are going to send these data whatever you have inserted so let's copy this data and send inside this data and what are the data type we are sending in jsn format okay and after the success we want to check the output so for that let's give console dot log function where you can check the response whatever you're getting so now guys uh data is sent so for this ajax we need to give header things so let's go to our laravel dock documentation search for ajax that is xcsrf token so let's copy this before before this you have to check it's available or not this one and go to your app so inside your extended app make sure you are having this so it's present over here if it's not there you have to include that let's close and get back to your jax and then guys you have to copy this and paste above this request set and now um yes guys so copy this go to your web so route of post method where students comma and your controller so let me copy the same controller we are going to use that is student controller at store function copy and go to your student controller guys and over here as simple let's create a public function with the function name store and we are accepting all the requests so you have to call the request where dollar request okay so now guys we have to call our variable called student is equal to new your model name student done you have to import the class so let's import the class guys class is imported and now give a command to store the data so before storing the data we have to validate all the input fields so for that let me just comment this and start with the validation so give a validator validator is equal to valley day to r where make function in the array where before this you have to give dollar request so dollar request of all the input fields give comma and call your input fields name so my input field name is name which is sent from this ajax okay so where is that this input fields names you have to just call that single quote where you have to make sure it is required and maximum number 191 i want to give so same with all the fields which is email and for email validation just add this email and then guys this will be your phone and course set now you can check this variable if this validator fails function then you have to return response function with the json format where you are going to tell the status so the status is like status of 400 which is bad request and same way you're going to show the messages or you can tell errors okay e-r-r-o-r-s errors where you will copy this validator variable dollar validator of m-e-s-s-a-g-e-s okay make sure you are adding at the last messages so save whatever we get in this errors we will get else this else condition you are coming with your storing of data all set so we are back to our model to save the data and let's call our input field names so name dollar request of input field so the input field is this ajax request so name same way you have to call your email phone and course okay phone course and this place are nothing but your database column names okay name email phone course name email phone course okay so after this we have to save save function and same way we are going to show the message return and response which is 200 means successful and we will show the message message as added successfully you can show as student added successfully save and now let's test it so yep let's get back to our index over here whatever response we are getting we are getting this response let's move refresh click on add student and let's click on save directly now on save you can see internal server let's see what's that internal server error okay class validator is not found so let me just input the class of this validator let's import illuminate support packets validator okay so this is the class save refresh and now guys let's try once again let's add and save data you can see that status 400 and the error message we are getting all the input fields so the course field this field this name and phone required so let's display that errors guys first over here so for that um we have to get back let's comment this and use the if condition if where this response response door status is double equal to what status was 400 okay so bad request 400 if it is there means you have to show the errors so let's loop that because we have multiple data inside this we have multiple right so for that we are going to use jquery for each loop so jq each if you type where you will get the response of your errors so e-r-r-o-r-s so which errors you are sending over here okay copy this errors and paste and now this is your key values and over here you are getting error values right so now let's loop this let me just put this in a will tag where you can mention as id as save error list okay i mean this is which is save form save form error list where you are going to append function in set single quotes adder li start and li end where single quotes give plus plus and take this error values and paste over here error values done and copy this id and go back to your model so this is our add student model and inside this model only we'll start with ul where id is equal to insert double quotes paste this all set and kept guys i just want to design over here also so for that let me just add one simple thing let's dollar open and close html whenever it loads first make it empty so what you are going to make empty is this save error from list and after this add class so that class will be alert alert danger save now guys let us test it refresh okay add student let's click on save you can see that all the input field name is telling over here input field email this this test okay now if you want to display on each line you can just add the same code and make sure that you are adding this as over here response dot errors dot name okay so if you print with this then you will get the exact field name so under that you can append in this format so let's ignore that and now this we have done with the validation and once validation is done you are going to show the success message which you are getting the status 200 which is this okay so let's take this message to show over here please to show the message so that will show in a text format where response dot message which you are getting okay where i want to show in a hash success message so let's copy this and create over here above your card okay open div and close div where id is equal to success message and just add a simple class for this let's give the same class and tell this alert alert success and after whatever the error comes we have to make that error list empty and yep guys and then let's see over here once the form saves i want to close this form and empty these fields so for that also you can just add the simple so first let's close the form guys so dollar open and model function where you can tell this model as hash the model name so let's get back to the top and copy the model id so copy this model id and tell over here so model will be hide copy and paste and this model whatever the model is we have to find the input fields and make that value empty all set save and yup guys let's see and now let us test it so refresh and there is no data into our database guys so now let's insert the data let's add with prakash with gmail.com so random digit phone number bca let's save perfect so student added successfully we have got the message and let's see over here cool so we are getting the data guys perfect so let me just add with one more detail so let's inspect and see if you find if you keep this console open if you find any error it will show over here so for that sake i'm opening and showing over here this console log open gmail.com where bca a section save co student added successfully let's see over here refresh perfect guys so guys we have successfully done with how to insert the data without the page reload in ajax with the validation guys so we have successfully completed this insertion of data okay so let's see next video about how to fetch the data without page reload and while inserting that the data should load without the page refreshing or reload so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 6,282

Keywords: fundaofwebit, insert data using ajax in laravel 8, insert data into database using jquery ajax in laravel, laravel ajax crud, laravel 8 ajax crud, insert data using jquery ajax in laravel, laravel 8 insert data using ajax, ajax in laravel 8, save data in laravel 8 using ajax, insert data using ajax in laravel, laravel 8 tutorial insert record using ajax, save data into database using ajax in laravel 8, how to insert data using ajax laravel

Id: oo7Kr8MBzH4

Length: 27min 17sec (1637 seconds)

Published: Sun Jun 13 2021