React JS CRUD - How to insert data into database using api in react js api | Loader on form submit

hey guys welcome back so guys we are continuing our react.js crowd application using laravel API so now guys in this video we will be learning how to create the student record using the API okay so now guys let's get started so first let's move to this add student button and on that click we are going to create a route to the like student create okay so let's copy this and just move to this add button let's go back and here you see guys that we are on the student.js page and let's move below so here is my button let me show you this is my ADD button and if you click this what happens you need to redirect to create form so for that you just need to go to your routing so let's move to our router index.js which we have created so if you want to understand how this routing is working please watch out the first part of this tutorial that is view installation and setup so here let's create a route give the Path student slash create and move to the element so my element is about the student create okay let me create as a component open and close import student create from the pages so go to the pages slash student create.js file let's copy this and create a file inside your pages so just create one file student create.js and now let's create the function student create open and close curly brace and here I'm going to export default that is student create and give semicolon here your return and open close bracket open the div and close the div and here the form starts so let me just copy all the form design from the student page okay so let me minimize this table let's copy this Ctrl C and paste here and now let us close this divs let's get back to student.js and closing divs so here we copy get back and paste again so we have an extra div here let's remove it so now guys you can just change all the requirements so add student here and this is going to be a back button and you should go back to the students page okay and here make it to Danger and you need to import the link let's import that import link from react router Dom hit enter and then now your form starts here so before starting the form let's check the output once let's get back and just refresh once okay now let's click on ADD perfect so it redirected create student and here add student and now let's insert the four input Fields so that is name course email and phone let's get back so now guys let me just design and show you the four input fields so now guys I have just completed a simple form design here just started from the form tag and ended the form tag and in between uh all the input Fields okay so here you see name then email then phone and then course and a submit Button as sales student so now guys I have added the name attributes that is column name name email phone and course so done guys and here you see I have missed that class name let's paste as class name here let's save it and now guys let's check the output refresh once and see the output perfect so we get add student all the input field names code so now guys when we click to save it should save the record so let's write the code for that so first step we should get the input records like if we type the input we should get all the input data and store in one variable so for that you can just get started to your function on this function so now guys let's create a variable so we call that as use date so use state you stay snippet here and let's tell us a student and you can make this the capital okay so that's student capital and here get a record in a object just call all the column field names done so our four fields are defined here and now you need to get from the input so when we type anything in the input it's stored inside the variable so how we can handle that so we call that as a on change okay so you can use on change equal to open and close curly brace where we create a function like handle input copy this and create a function so just add here const the equal to open and close bracket and open and close calibrate and here you get the event and we need to purchase that e Dot persist function and then we get the data from this event dot Target dot value okay and we need to set in a variable so for that you can just use this set student function inside this we are going to set it so now you open and close curly brace and just push all the data inside your student variable the student variable okay so you are pushing here from what you are getting and then you are getting the value so event dot Target dot value okay so from the input value you are getting all the requests and the same from that input value what are you getting you're getting from that input name okay you will select that value from that name and you are storing it okay so this name is nothing but this name attribute and the value you what going to store whatever you type it automatically stores and if you want to see the value also you can just copy that and paste here value attribute open and close curly brace just get this variable student dot name okay you can paste that here to Dent dot name so whenever the input change it stores in a set student variable that is student variable okay and then guys you can check that let me just show you the output so before that you see that you state is not defined let's copy this and just Define that import react give comma open and close curly brace paste this use State and from react okay let's save it and now let's check the output so refresh once cool so there is no error guys and here I have installed one react extension so it shows whatever we does so right now we are on the student create here let's move on that student create let me just zoom it so it looks more clear here you see that guys whatever States we set it so here inside name I am going to type ASD and you see that name ASD has been shown okay so I'm going to enter that email with here you see it did not come why because we have not set that we have just done for one input okay let me show you so here you see we have only done for one input so what we need to do you need to copy this and put for all the input and keep on changing here email and this is going to be on change handle input the same and you paste again and this is going to be a phone and then one course guys let's paste here the course that's it now you can save it and now you get back refresh okay it's loaded and here you're on the student create so let me open it react hook so name is made with at gmail here all its types perfect so now guys on this click we are going to save the data now you can just get back and write the code so for that here on the save button I'm in submit button save student you have to call one function on the submit button what happens it goes to the form tag first so let's move on the form tag here we'll write the code AS on submit equals to inside curly brace you call the function name that is sales student you copy this and create a simple function on the top and create the function name so before this return I am going to create the function name here just add cons then student and open and close calibrates so yep here we have to give e equal to and then get the event and now guys when the form submits I want to prevent default so it doesn't load the page prevent default function when we save the student that time you need to get all the data so let's keep all the data in one variable called Data I missed the spelling const and the we are going to give the name here and here we are going to get from the student dot name so what is the student student is nothing but the variable we have using for inserting the input records okay so input data we have stored inside the student variable dot name okay so same way copy and paste for four records then email for last four course save it and now guys let's do the actions call so for Access call you need to use ax iOS axios and to save the data using post method and then and here if you are using access please import the axios let's go on the top and import actions from axios okay and now you can get back to your save student use a third symbol here and now let me just show you the API to save the data let's go on our laravel API let's move to the API dot PHP if you want to know how to create this API guys please watch out the video link given in the description so now to save the record here you see that on the store we are using as students okay so let's copy this and get back to our react here you need to copy the complete URL let's go on the URL here copy the complete URL and paste here and remove it so this is my complete URL to save that data and here what we have to do you just need to add comma inside the post method and send the variable data let's copy this Ctrl D and copy and paste it that's it so now guys here you get the response let me break this down let's use the alert response dot data Dot message from the backend side we get this message variable to get your data okay so if you don't understand what is this I'll show you from the laravel side so on my store function I have just created one here you see this is the message okay so this message I am using to display the message so now let's validate the input Fields like if you just click on this save student without inserting any records so at that time what happens we just need to show all the errors so for that you need to catch in your actions so just use a catch function open and close and then again open and close calibrates here and here you get all the error so now you can use a request error whatever request goes it sends a response right so error dot response and now inside this response we have to check the response status so let me copy and paste here and response Dot status is double equal to 4 22. all the input request it says you can store in one variable set input errors list function dot response dot data dot errors so what is this error these errors are nothing but the API validation what I have done so let me just show you here on the when the validation fails it goes inside this and here all the messages of validation I have put in one variable called errors so this response gives me over here okay so I'm setting that in a variable set input error list okay so let's create this use state at the stop and here let's paste it okay let me remove the unwanted set input error list and here I am going to put as in object that is curly brace and now you can copy this and just use below your input tags so let's get back on your input tag and open and close pan open and close curly brace error list dot name so you just need to display this that's it let me add the class name equals to text hyphen Danger let's copy and paste let me do copy and paste and again copy the complete span tag paste for your email I mean phone and then for the course now guys you can just through your axios I mean here and now if you see how many conditions are given here so there are only two things one is the 500 so this will not come it is very raised chance if you want to give that also you can just check the same condition and use the alert part okay so here use 500. that's it and just alert okay use it now alert that's it guys let's save it and now let's check the output so here you refresh go to your console log first okay so now if I click on Save student what happens you should see okay it took some time guys but it loaded that name field is required email field phone field course field is required okay so now guys to skip this what's happening you can just add a loader also so let me just add the loader part so where is my form X to your save students so this is my saved student so when I click the save that time only I should load so for that call the set loading let me copy and paste this here we tell the loading and again use this set loading and now you use this set loading copy it so when the save function calls I mean when the form is submitted set loading to true okay so once any form is submitted like form successfully stored please make it to false and if you get any error also at that time you can make it to false okay this add that false here and here also all set guys and now call the if else condition to show the loading okay so let's me copy from the student.js file the loading code so here is my condition for loading let's copy this and paste here so before my return I just paste here and this is a loading is a component guys which I am using so let me import loading from what is the path let me see that so I just need to go one step back and go inside the component and loading.js so just move one step back go to components slash loading dot JS okay so inside that loading.js I have a simple code okay this is a bootstraps code so now guys let's close this loading and get back to our student create let's save it and now if you get back refresh okay so now if I click on Save student it shows loading please wait so until we get the response okay perfect so once the data we have got here you see that name field is required and everything so now guys let's try to save the record home prakash here home at gmail.com the phone number it should be 10 digit because we have done the validation if I put nine digit only means it will tell minimum required okay so let me add the BCA and let's save student that phone must be 10 digit okay let me add phone 10 digit and now let's save the data and you get student created successfully let's say okay and all done so let me just get back and show you so here you see om prakash perfect so now guys I just wanted to once we create the data we should redirect back to students page so for that you can just get back and use unnavigate so inside your react router Dom use navigate okay navigate and now you can use this your const navigate equal to use navigate function and this navigate will help you to redirect back so now once the data is successfully saved and here you get the alert after this alert I just want to navigate back to my students page so that is nothing but the students so let's copy that route and paste here forward slash that's it so now guys let us save and refresh so let's enter the name Varun Varun at gmail.com here we enter the phone number and the BCA let's save student created successfully okay and it's gone back here on the students and it's loaded the data perfect so guys we have successfully learned how to insert the data in our database using laravel API and also we learned about how to navigate the pages how to set the loading and do the validations also so guys in this video that's it and let's continue next video about how to edit the data and update the data in react.js card so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 1,840

Keywords: fundaofwebit, How to insert data into database using api in react js api, insert data using laravel api in react js, laravel react crud, laravel react insert data, laravel react insert data into database using laravel api in react js, react insert data into database, insert records into database using api in react js, laravel api + react js crud, react crud application, react js crud using laravel api, how to insert data into database using api, react js tutorial

Id: q6hKrnQVBhs

Length: 22min 49sec (1369 seconds)

Published: Sun Mar 12 2023