Login Page using React + Node + MySQL | ReactJS, MySQL, NodeJS - Login Page Tutorial

hi everyone this video is about lighting system within reactors plus notice and MySQL okay our content will be in react is the power backend notice and the database we will store the data in mySQL database so I have already set up my environment okay if you didn't sit up so please set up your environment for that we have two folders front end and back in front it is our react app and the back end is our backend node.js app okay in note that yes we have a file server.js and in this why can we installed Express in MySQL Express is for using a framework for the node.js okay and also we have installed cars so now let's get start coding okay first we will create a login page our front end so for that I will come here and I will create a new file login.js I will start my front end coding here it is a forum so here create form inside Forum we will take a level or we will just use a div tag label or we can say email okay this is email same to this we will create for password yes so now let's create a button so I will design it with bootstrap I have already installed bootstrap and import it [Music] okay so we imported that so let's try it here so we have created that so now let's just add here a class name that would be margin button copy this just hit here and after that just assign a class name here form control copy this two and also let's design the button yes we have designed our login feed so let's run it now and let's move to the front end folder in here npm start we'll start I didn't print anything so let's import this file login in our up.js okay remove this code let's import the login page and we will use that here the app.js is imported in the index okay yes yeah that looks like this so let's make it yeah it is okay now so now whenever we enter the data so we should by pressing this login button we should check that with the um or my SQL database so first I will write code for to get the values of this okay I will create two State variables const email [Music] is equal to use State hook simple password and now I will whenever I am entering data in this email or password I should store that in this email and password variable State variable so let's come here and change you will call and change image and here we will write a row function that would be sit email sorry e dot Target dot value in the same I will write for password just I will change this method to password yes so it will store the values there so now whenever we press this button so we should call um another function and submit with unsubmit event handle submit so let's create that function now you will get an event here it will prevent default submission yeah after that we will pass our data to the power backend node.js so now we will pass our data to the back end so before passing data to the backend so first we will set up that we will write code for that let's come to the server.js will import the express equal to require Express and also the in MySQL and also the course I have installed these three okay express my SQL and core scores are used without cards our backend will not allow us to access the apis okay so courses for that to access that from Front End okay so now let's use 18 up is equal to and it's called Express Now by up I will use the course okay of course that is called chords and also I will just create um assign a port okay up Dot listen our server will listen in gun Port it is the port number and 8081 it will be the port and let's print a message here [Music] login let's and now our server is listening okay if we run the command so it will be printers listening so before that let's create our MySQL connection so for that let's say it comes DB is equal to my SQL dot create connection so for that let's press pause the property the first one is the host host is the local host for uh with us localhost and the user is root with us by default the password we didn't set the password and the database so let's create a database so for that I am using MySQL I will come to the page I'm using jump server okay welcome to the my PHP my admin yeah it's then my SQL so here I will come to let's come to the Crut and here we already have a login okay a login table you have created so in the login table let's check it yeah we have username and password but let's create one another one so let's insert a new data use a bill.com and the password to p12345 and every card has created in the login table okay so now let's come here to the server.js after the database name is card with us okay now let's create an API okay so whenever we pass the data that should come the data should come to this API so for that I will use up that post because we are posting the data and the URL would be log in and here we will get two properties two parameters the first one is the request and the second one is the response and here now we will write our query Commons SQL is equal to select static from the table name was logged in where the username is equal to question mark and password is equal to customer so for this question mark we will assign videos later for that I will write like this okay counts to values is equal to we will write the values like this for request dot body dot name email okay email we will attach these values in the front end request start party Dot [Music] after that we will learn our query DB dot query and we will pass sqvl first then the values and after that we will get error or data if there was an error so it will return result Dot Json again failed otherwise return result.json data so now let's pass the data from our front end so for that I will use axis library to post the data so let's import the axis axis.post our URL would be so let's so to create to however URL for that let's come to the server.js and here we will [Music] come to the bucket let's try to npm start one thing is that I have installed that is selects welcome to the backend folder to the package.json I have installed node man okay node man okay I have installed this one what I do after installing this you should write like this okay start after right in the script area right start node monster what that is our file name is server it will the job of this is that it will automatically refresh our server okay so let's see the command npm start so it will start our this file okay note.js back in see listening okay that the message that we have given here listening okay it is listening and port number 8080. so now let's come run a local host t81 yeah uh this is the port that we should access let's come to the login and here we will like this one and we would like to go to the route login and after that pass the data email and password then we will get a result but like to cancel that cage if there was any error print that for us so let's check it now we'll move to the console and because we will print the data the result on the console Press login button uh we got server side error what is the error so let's check it out to the server course the course is used yes okay so let's change our data to after to use Express .j simply format to the Json when we are passing that and okay right now let's again yeah login failed okay login failed and we have an error so let's change this we will write it directly here because we have two percent Mark and we will write the data separately to everyone yes let's remove this yeah and also if there was any error so it will print us the error error okay but if that return the data so now we will check our data if data dot length was greater than zero so then we will return result.json sex is fully else we will return no record okay let's come here let's replace our page so let's write something printers no record like him because we don't have this record see no record has printed for us but if we write to the correct email you will serve at gmail.com in the correct password one two three four five and Press login button see login successfully if we change the password again no regard if we make the password correct and change the name email again no record so again successfully so it was all about implementing the uh login page using a react with the node.js I hope this video was helpful for you if you like this video please subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 57,491

Keywords: react, react tutorial, login in react, how to make a login in react, react mysql, register and login in react, login system using nodejs, react js, react login, react js login, node js user login, login page authentication using reactjs, node js login, login using nodejs and mysql, login authentication using reactjs, login system using node & mysql, login authentication using nodejs, react user login, react js user login, registration in react, login react js, node js, nodejs

Id: jwEbw0zJqiY

Length: 19min 18sec (1158 seconds)

Published: Sun Mar 12 2023