Insert Register Form Data to MySQL Database using Drizzle ORM in Next.js | Job Portal App | Ep 14

Hello What's up guys welcome to the next JS full stack project present job portal application and today is our day number 14 and today we are going to see that this is our registration form, we had already checked it out in the previous video that how can we get its data. So today we have to insert that data in our database which is very awesome. And today we are going to use server action which is very important. This was revealed in RT version 19. So today you are going to know its use case. And by the way you came to know that the version of React, I mean 19.2, has also been officially released. So if you want to know about this video or want to watch it, let me know in the comment section. Ok? So now let us start the video without any delay. But before that guys please if you have not yet subscribed to my awesome channel Thapa Technical please do so. And now my health is better. But yes, it is still a little bit, so I will keep my face covered from tomorrow or day after tomorrow. Yes, but right now there is a little problem, that's why you are not able to see my face, but yes, you must check out the previous video, it is very important, so you can see it here, I am going to go to my VS Code editor, the source code is absolutely free, you will find the link below in the description and comment section, and look at our previous video, we used Server Action, where I told you that if you pass in the action attribute in this way, and with the help of this form data, whatever you say, you have got it here, there is an object which was being provided to you, next you have to Server Action, so by writing this much there very easily, I got what the user would have typed, which value he would have written, I showed it to you also, but today I will tell you another method, by which you will get what the user had typed, and with the help of Drizzle, how you can insert the values ​​you have got into your database, I am going to tell you that today. Ok? I don't know how many times I told him this but it's okay. So first of all, let me remove this action of ours right now. I just wanted to show you that you can do this, I told you that in our previous video. So again we have the simple thing that has been going on since ages and that's on submit right. So let's go with on submit. Now here you simply write one like handle registration or handle submit. You can write like anything is on you. Let's go with handle submit. Right? You copy this. Come up a little. Two, I had already written this before but I left it here. So what do we use? This time we are using type script which is very important, it tells you before you write any data, how much type you have to write and what should be its type. Right? So we have our event object here. And we are make sure that brother, we are like, I have to tell you that this is our E, this event object, its data type is form event. I have explained this to you clearly. Even if you look here, it was there at another place too, where did it go? We have to give one more thing also. Yes, in this C on Change, if we have an event object then our data type is a little different. It's Like Change event. Change event for It's On Change. We have a form event for the form. So you can keep this in mind. Now here first of all whenever there is any form then guys what we need to we need to like prevent default. It's like you can't say anything. This will have to be done. The second thing is that now whenever someone is filling the form, I get this registration action. Ok? Although we could have named it better. I'll see what happens in tomorrow's video. Now I have to call him here in this manner. And obviously he will give me some data. Right? So what do I do with it ? I will overdo it. Now the spelling of obvate is wrong. So let me fix that first. And already our function is asing. So there is nothing to worry about. Now here it is saying that this particular part here expected one argument but got zero. Because I have already written the form data here. But this time I am not going to use form data. I will use something else. So what will we do? Now here first of all what do I need here? I have to pass some data which contains the entire data filled by the user so that I can store it in the database later. And that is nothing but my form data. Right? So here I will directly copy and paste it for you guys. This one is simple where I'm coming up here and I've pasted it. So now you can see very clearly here that I have taken a constant variable. And that's your registration data and it's an object. You can see it very clearly. And here we have a name, we have a username, email, password and then role. And by the way, I remembered it from the role. In our schema, there is one thing that we forgot that day and that is this part the role and then I forgot to write dot not null for the username, so guys please write not null in front of this username so that it does not become by default. I mean he should not go into optional. And then secondly, write down this field of yours which is related to your role. And it's an enum, it means that role is the name of my field. Right? And then we have this comma. After that we have this square bracket. This means that this square bracket is basically an array. There are three elements inside it, any one of these three is a value which we can assign to the role. Apart from that, we cannot assign any other role. And for that we are also taking a default value for this so that if someone accidentally forgets to write the role. So this means that no doubt he will be an applicant. There will be a candidate who has to search for a vacant job. So that's why we kept it as an applicant by default. So this one line and then the username which was not null was missed by me. I am really sorry. I have added him. And yes, whenever you make any changes in the schema, you will know it very well. What we need to do is we need to first generate your NPM DB, you will have to write generate in this manner. And one is generated. Then you will have to migrate. Is this method okay? Please do this. Isn't it? We have already seen that. And by the way I have also updated the package file. So I'm just going to push this into the gib. So you also add these three lines. So that next time if I want diesel kit studio or migrate or generate then I will write this script npm run this part. npm run I will write it down. I will write this down. Ok? You should do this otherwise you will keep getting error warning. All right. Ok? So my work is done. So this is the registration data and we have written form data dot name because inside my form data all the data it is an state variable right so I am getting the data by the way whatever is my complete data here I am getting it so I wrote that here and in the last we just trimmed it, trimming means like initial and then at the end whatever white space there is, empty spaces, it removes it, so my work is done so I will copy this registration data of mine and then I will paste it here I mean I will paste it alright now you can see one thing here and that is again expected zero argument but got one. Now look, this is simple. Look here, this is the beauty of TypeScript and then your ES and all that, that here you have called a function, server action, in which you have passed an argument. But when you are defining this function, you have not passed any parameter there. So here we will have to pass that parameter. So it is not necessary that you give the same name as there. Write some data here and paste it. Who is losing what? Isn't it? So now, this particular part of your argument, I am denoting it here by this name. I am representing. And here I am telling you that it has implicitly has any type. That basically tells me these types in TypeScript. So what is the type of this data of mine ? This is not the only data inside it. This is a complete object which contains so much data. So now if you go here, you can see that the moment I do this, I am getting this much data. This thing that you are seeing, with a colon, whatever you are seeing, this is your type. Isn't it? This is the beauty. If you don't know what to do, then do this. This is now your type. Colon it's an object and every single object will have whatever value is inside it, it will be a string. Username also string Email Password also string. Ither epicent and employer in the role. This method requires you to define the data type. And this is the beauty. If you don't have any idea then just simply hover. You will get the data. Once this much happens. Then it is children's work. Now you don't need it anymore. Object dot entries and all those things. Simply write your data here. Isn't it? Now I don't need this confirmed password at the moment. Now I don't need this console here either. Now what are we using? We're using a drizzle. Isn't it? So you go drizzle over here. Write a simple insert query in Drizzle. Who is losing what ? If you write this, you will get Drizzle's insert query. And this is how we insert in the result. So away DB dot insert table name dot values ​​and then whatever your value is, then just copy and then paste that much you have done, right? If you do this much then by the way where is this DB coming from ? DB Obviously our DB.OB whatever was in the config. Hit control space and then. So have we done your DB ? Import. Right? And then this is the name of the table in your schema. And that's nothing but your users. Right? And by the way users are already written here but what do we have to do with that, we have also imported @rajal schema here, what import is there, okay so this is also imported, this is also imported, now we have these values, so now I have to pass the values ​​here, right, what will be my values, no doubt my value is this, copy this only, come inside it and then paste it like this, my work is done, this is it, this is all I had to do, there is no tension, you can do this much. Control S Save well. Ok? Come here. What is this running? If I walk here. Yes, the run is happening. Control S save it here. Now let's go here. Once I refresh it. Ok? And by the way, remove this part from here. Ok? Now let me quickly fill in the data that is available here. So guys, you can see that I have filled all my data here. Ok? If I go here and refresh it once. So right now you are not going to see any data here. So now if I click on create account here. Let's check it out what this is. Okay, I didn't find anything here but I would like to refresh here once. And boom guys see now you can see that I have my data here. So one thing here is that we can do a lot of things here. And that is the moment I clicked on this, I had no idea what might have happened here. Whether this happened or not. But if I go here then this is what has happened. Right? You can see it, right? Look, this is what I have written Vinod Bahadur Thapat, whatever it is, right, let me go again once again, I have clicked two-three times, I want to see what is happening here, even though I have clicked two-three times, but it has come only once, let's go here, which is a good thing, if I refresh here, see, one data has come to me here, now if I put another T in place of T here, now again I click on Create Account and then refresh, still it did not happen, ah let me add another S to the email address, right? Then if I click on this. Isn't it? I will go here. Let me refresh this one more time. Look, I got the data. So here if you look carefully, your email and then your username. Now you know if you go here. So we have our email should be unique. And then sorry username and email must be unique. Data will be inserted only if it is unique. Else won't. And this is how we insert data into the result. Ok? So ya guys this is it. That's all for this video today. I hope you liked the video. Where I mean you are thinking that first when we use React mind you know like no express Mys SQL or what is the data called in our [ __ ] DB, how much connect the front end to the back end and use node express to do this, use proxy to do this. Course, see all this and all that. But look here, next just one front end data has been inserted into the database. I am getting it in the database. I can even get in my sequel if I want. But yes, there are many other things like password which we should never insert in plain text. Even like confirm password and this password both are same or not, we have to check that also. And obviously when I click on this, a notification should appear. So we will see all those things in the next video. But that's all for this video today. I hope you liked the video very much. So guys, do tell us how you liked the video by commenting. If anyone has any doubt, please let us know by commenting. I am here to help you and from today onwards I am a regular. I am really sorry, some of the previous shots went a little up and down. That's why it could not become regular. But yes, that's all for this video today. Please like the video if you like it, the source code is absolutely free. You will find the link below in the description and comments section. And if anyone has any doubt, please let us know by commenting. But now our next target is 8 lakh crore. If you have n't subscribed yet, please do so. See you in the next video. Till then guys thank you so much. Take care. [music]