NuxtJS CRUD 1: How to insert data into database in nuxt js using laravel api with axios | Nuxt 3

hey guys welcome back so guys we are continuing our next JS Card application so now guys in this video we are going to start with the crud operation so now guys let's get started so first let's move to our editor and get started with creating a create page and we'll be inserting the data into our database using the laravel API okay so now guys as simple so we have successfully created the next JS application in previous video and now we are getting started with storing the record so now guys let's begin so first step let's go to our pages and inside this pages I am going to create a folder name students and inside that students folder I'll create one file with the name create Dot View okay so here we are set up the view template so view colon okay all set and now guys let's begin with the form design so before that I just wanted to see the output once that is student create page okay and in this export just add a name student create okay student create now save it and now let's view this page on the browser Okay so what is the path it is students slash create hit enter okay so here we are facing that footer doesn't have any data so let me fill that also inside your component footer just add a template okay so here I just I am detail and I don't require this you can remove it let's remove this not required just save to close this yep okay so we are on the student slash create done so we do not need to worry about the routing it just calls automatically okay so you should be inside the pages and inside that whatever your folder and file will be created according to that the route will be automatically created in your next application so now guys let's get started with creating the form using bootstrap so let's get back let's begin with one card simple card body card header card body and here inside the card header add a H4 tag add student and we do not require this let's remove it and here inside this div so now here I want a tag or a link tag okay so that is next link and close the next link tag and give our name as back button here 2 equal to where you will redirect to home page for right now or else you can just create a student's right so we don't have right now let me redirect your home page and we will Design this button using the bootstrap class as button button Danger and let's float it to end let's save it and see the output for this first let's get back perfect so you have got the design but let's make this inside a container okay so you can add a container here save it all done guys and now let's begin with the form design yep are simple start with the form tag a simple div with the margin bottom three table name let's save now you can copy this and paste four times name course email and finally the phone done and now guys you need to add one simple submit button where b u t t o n button save and let's design this button as button button hyphen primary primary and this button type it's going to be submit done and now guys we need to link all the input Fields with the variable so for that you just need to get back to our script and here you start with the coding of a data function so first let us tell data function open and close calibrase and end with comma so now let's return open and close curly brace again and here you add a student variable colon open and close curly price inside this the name single quotes empty then course colon single codes empty and then email and finally the form done so we have four columns we are done here now you can get this copy this I mean yes copy the student variable now you can get back on your input field and use a v hyphen model equal to double quotes where student dot name okay so whatever you type inside this input field it will go and save inside that student dot name variable so same for all your other input Fields okay so here you type for the course then email and finally phone set guys so whatever you type it will store inside this variable once it's stored what we'll do we will click on submit button so once the submit button goes It goes to the form tag so on that form tag what we are going to do we will check for the submit action so submit and we will be preventing this like it should not load the page itself without loading or refreshing the page it should save the data so just use prevent equal to and call the function name so let me tell save student so now guys let's copy this and go below and inside the script tag we will add one more function that is methods where Creator save student function and here you can just console log DOT log or else you can also alert it so let me tell I am here okay so when you click on that let's alert it instead of console log alert save it and now you can get back on the front end let's refresh click on save button it should pop me I am here perfect so we have worked on it and now guys let's get back and now guys let us set the loading part like when you click on the submit button or save button it should tell that it is saving so and it should be also showing the loading part so for that we are going to implement it okay so let's get back here and First Step um let's tell this dot is loading okay equals to true and this variable you have to add it here by default it's going to be false and loading is loading text also I want to add so by default I will keep as loading only not text let's make it title title is loading title will keep so it is going to show loading and while saving when we click on the save button it should tell saving not loading right so you can just add this loading title equals to saving save it and now guys this option you have to go on top and when you click on that we need to show that loading part so here let me add a div open and close div and here V if is loading when it is true then you have to show the loading part okay so what is the loading code let me go to the getbootstrap.com and get the spinner that is loading so here you see so I'm going to copy this first spinner and paste here so guys instead of pasting it let me create this as a component so it will be useful in other card videos okay so I'm going to create one component named as loading Dot View view colon and add the name colon as loading and we are going to get a props props props colon open and close curly brace where we'll tell we are getting one title okay which will be always string so now open and close Del and get back to your create View let me minimize so this code I'm going to copy and paste inside the loading Dot View file all set so here you go and this title we will call it here paste it it's done guys and now you can just get back to your create View and call the loading component loading and and inside this we are going to pass the props so what we have created the props here so this is the props will be passing from here and checking in that component so here what is the data like you can give the if you want to give static data you can remove this directly and add a loading or saving anything if you want to give Dynamic then you have to add a colon over here and get that data so what is the data we are giving here is loading title okay so as simple let's add that that's it guys and you can just add one dot dot dot on this loading save it and now we can get back save and now guys let us see how it's working this loading part let's get back refresh now if you click on this save button it should show the loading cool so it's showing guys now you can get back to the create View so once this is loading it this component should be in the else part okay I mean this form should be in the L spot so what you can do you can just add a simple div open and close div so here you cut this and paste at the end of the form and just add a v hyphen else that's it all done so when this is loading it will not show the form as simple so now guys let us get the data and store into our database so for that let us start from here so we are going to use a axios okay that is your HTTP referral so there are many JavaScript HTTP calls to store the data or get the data but I am going to use a actions over here okay so guys for that let us just get started with installation part for the axios so you can go to your package.json and here you see there is no actually use let's open our new terminal and npm install axios let's begin with npm install axios and hit enter so guys our access is installed successfully so here you see that dependencies it has come over here and now let's close this package.json and let's move back to other serving terminal and now guys let's begin with insert data into our database using laravel API with the help of axios so guys now ax iOS dot post method open and close and use then function and here use the response of and open and close calibrase so now guys in this post method we will be using the API to push the datas so where is the API let me just show you the API over here so this is my laravel API guys which I have created and if you want to know how to create this link given in the description okay so now guys this is the post method to store the data right so let me copy this and the correct URL path you can find is localhost colon 8000 right now it is so you can just get here get back to the code and inside the Tilt symbol let's paste this student and the route it is going to be localhost colon 8000 let me copy it from here and paste it so it is 8 000 so which is I'm running my laravel application right now and then I'm going to push the data inside this so what are the datas whatever we type inside this form the input tags whatever you have typed it goes and store inside the student variable so let's copy the student variable from the data function and push inside this actual post request so once data is sent you will get some response so that response you are going to alert it here alert open and close so response dot data dot success so what is this success let me just show you the response from that API on this dwarf method let us go to the student controller where it is the store method foreign so here is my store method and now guys here once successfully save data it's going inside the message thing okay so let's copy this message and show that on the front and side so you can get back here and tell that response.data dot message and before that I just want to console log also that what are the datas you get on side this okay and here you add address all set and once the data is successfully done then we are going to copy this and paste here and make these two false so loading will be false and this will be back to null or make it a loading or any other data okay and then I just want to keep all these fields as empty copy the student dot name course everything you can make it to empty something like this student dot name equals to null so same way for the four fields that is course email and phone save it and now guys let us save the data into our database yep let's get back so here you see we have we don't have any record and now we are going to insert one record refresh and inspect the developer tool go to console log and let's begin with here with prakash so BCA read at gmail.com phone number random digit phone number and let's click on save so saving and you get access is not defined why it is not defined okay we have not imported the actions so you need to import the actions first import axios from axios okay all set let's save it and now let's try to save again okay so refresh once again to add the video Let's click on Save okay so we got this error I think yep I have missed the API so here you see guys that is this laravel API we have built this in a API dot PHP okay so for this you need to change this the route here you need to add a API slash okay so I have missed that so for that's it we got this error and now let's enter the correct details to save the record so hit with prakash here enter the BCA with at gmail.com and give the correct 10 digit phone number so it shouldn't accept let's click on Save so here you got the message called student created successfully let's tell okay and now let's get back on the table database let's refresh the student here you see awesome we have got the record guys but now guys what about the input field errors okay so if you give wrong field names what happens at that time so let me just show you over here with and then I'm going to give BCA with at gmail.com and I am going to give a wrong I mean only nine digit phone number let's click on Save and you will get a response like 422. so here you got the 422 that is unprocessable content that means input field error okay so what is that error let's go to network and if you see here on that request go on the preview you will find that the phone number is missing okay must be a 10 digit number so we have got that under error so what for this so let's fix this also inside the cache statement so guys let me add that catch c a t c h function and just type the function type error and open and close curly brace okay so now guys let us just check this is coming from the data from data it's going to errors so for that you can just get back just use the if condition and here you get the error response copy this again dot status this double equal to 422 and then you store in one data like my this Dot error list equals to you get all your error response dot data dot whatever you send the data from the API and where is this my this let me just create above the axios where my this equal to this and now guys you can just copy this error list and paste inside your data function so it stores all the error details okay let me keep it as object and now even the error comes at that time I'll make this loading as false how this error come so for that you just need to console log this error console.log so you get pivot and now you need to check from this data errors okay so let me refresh move to console so now with prakash course BCA email let me enter wrong email okay and enter only few wrong numbers let's click on save so you'll find that email and phone number is invalid so let me show you that it is on possible quantity and here you see that we have got the response and here you see that there is a response okay and inside this response you move go to response insert that response you move to the data function I mean data from that data you move to errors okay inside this errors you see that email and phone are the details so this errors only I am pasting here so you can find it here so it depends on the API to API how your how other apis are getting the error list okay so that's it guys and now you paste this I mean you push this inside the data function with the variable and now you can Loop this and show into your output or else you can get the data in different way also so for that let me just Echo and show you what happens here just use error list okay so this Dot error list save it and now you can get back refresh so here you see guys that is in our object email it is and it shows that one detail and then phone it checks for the second detail okay the same way you can just call that this dot error dot email of 0 you can call it directly so what we can do like this dot error list of email of 0. okay save it and here you see email must be a valid address so you can copy this same process and Ctrl X and paste below the each input field okay so user span tag dot text hyphen Danger and you paste so same way for the course also let's copy this course copy and paste and same it goes for the phone also copy and paste for so all done guys and now let me just show you here one more thing so what we have to do we just need to copy this and use a if condition like when there is no error at that time we do want to show this span tag okay so what you can do just copy this and paste for all other span tags so same you need to change the email then calls and then finally the name okay let's save it and now if you refresh here you will not be able to get any warring warnings or errors let's refresh perfect okay so now guys one more step what we have to do um you can get back okay so let's move Below on this catch function so let's make this outside because this is not supporting in the cache function so what we have done we have already stored this in a variable called my this and you can use that let's save it and now so refresh once and now try to save and you face that all the input field is required and here you are saving gone okay so guys we have successfully learned how to store the data into our database using laravel API in next JS application so guys in this video that's it thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 357

Keywords: fundaofwebit, How to set loader on form submit in nuxt js, submit data using axios in nuxt js, nuxt crud tutorial, nuxt 3 tutorial, how to insert data in nuxt 3, how to save data into database in nuxt using api, laravel api nuxt crud, nuxt js crud application, how to insert data using laravel api in nuxtjs, nuxtjs insert data, insert data into database using api in nuxt, nuxt js crud tutorial

Id: vVBkc_5_fu8

Length: 25min 47sec (1547 seconds)

Published: Wed May 17 2023