jQuery Tutorial: Create Login Form With Ajax + PHP & MySQL

in this is a tutorial I will show you how to create a login form for your website by using jQuery, PHP and MySQL so stay with me hey what's up guys Senaid here from codingpassiveincome.com the place where I help others to become a web developer much easier and faster than they will do it on their own so if that is something that interests you consider subscribing so before even actually started in the code I want to explain on my white board the basics that you need to understand before you even learn how to create login form using jQuery so what you are going to create this we will have one HTML form so let's say he shall be email this will be password we will have one log in button and now once I visitor click on this button we will have a query that will detect that click and use the data from this two inputs email and password validate and if everything is OK we will send the data to the PHP let's say he will be our PHP code so jQuery and Ajax is basically the bridge between the client side and the server side so I will say here the query so if everything is ok we will send the data to the PHP in the PHP we will accept this information connect with PHP to MySQL database and if in the database we have the matching email and password they will create a new session and return to the server the information that everything is okay and also if we don't have matching email and password we will return the information that not everything is okay and then in jQuery so let's see here we are going to return so jQuery is sending to the PHP PHP is connecting to MySQL and from the server which is this we are returning data again to the jQuery to the client side and now if everything is ok here we are going by using jQuery redirect use it to our let's say named hidden PHP file so the goal is that this file is only accessible to the people who are logged in so as you can see the jQuery is basically only the bridge and it only helps us to not refresh the page and create the best user interface before we does you create and so form and this form we refuse to send data directly to the PHP do all validations and it is so capable directive I'd like to the PHP but now we use jQuery to validate those two inputs if data is okay we will send it to the server on the server we will check in the MySQL database and then if there is everything okay we will return message I will say if return return message to the jQuery to the client side and then jQuery will will redirect the person to the hidden.PHP so this is just for you to have a visual representation of what is happening and which part jQuery is playing in the normal login.php form so let's now dive into the actual code so now once you understand the basics and what you really need to understand for this tutorial I'll now go and write actually the code so I have just open my PHP storm create a new product and created one empty file loading dot PHP and also I have started my exampp server and if you using something else for your localhost just use it so first thing that I'm going to do is I will just go to my PHP my admin' and create a new database so go to the new database is name let's say login tutorial I will use utf-8 okay I will create and let's see the name of my table will be users like almost always and I will just have per se 4 columns and I will have ID type integer Auto increment let's say I will have first name to be varchar let's say 50 lets out have email for email varchar let's say 50 again and let's say we will have password okay and we can use as varchar to so pretty much that's it nothing special and I will click on the save so now we have database login tutorial and we have be able to users so now first thing that we are going to do is to create a basic HTML form that will be our later login form so how does the HTML I'll make head and in the head I will have title and let's say in the body I will have form method will be post actions will be this login.php file and we are going to have two inputs first will be type text' ID will be email and placeholder will be email another one will be our just duplicate type will be password ID will be password and placeholder will be password and you are going to help one submit button submit let's say value is log in and ID will be login so now we need to include the jQuery library so I'm going to code.jQuery.com and here we have an options to choose the version of the jQuery that you are going to use and those things our CDN links which is very important for the speed of your website so just use the latest minified because i'm not going to check any code so does click on our minified and as you can see here they have prepared for us actually the script that we just need to copy and paste into out HTML document so you can select and copy or just click this button here whatever you like after that we will just before the closing body tag past this code here we go I will just do this so now we have included the jQuery library and now let's write the code that will actually get the values from those inputs so first we are going to define the part with text JavaScript code and between those tags I will say document.ready function and here I'm going to write a code so what this actually means is that we are waiting for the document to completely load and once it loads we will execute this code here it is good so while the document is not loaded nothing will happen because we always want to be sure that all of our elements on this page are ready to be used and manipulated by jQuery so let's see how does say console.log page ready okay so what this function is doing is actually printing the message in the console and now we can go and test this so for a login.php and here now if we go to the console let's have i will click console and now refresh page and as you can see now when the page is loaded we get the message page ready before that it's not and also here we can see that we have our form with email password and log in so now let's just write the code that will get the value from those inputs so first it will say when someone press this login button so we'll say log in.on click for we can see just quick but this is what I prefer and here we can say var which means we are going to declare new variable and I will say var email equal and now we will say email.val so this method is getting whatever is inside this input so let's now try to print is in the console to see is there active run with our code so refresh this and I will say something say login and as you can see we have a problem because this way of using the form is when we don't manipulate the data true the jQuery and here all we need to do is you just change the submit to the button so I just wanted to show the difference and now if we try so as you can see now an empty message and if you write something you will get that message and the page didn't refresh so always keep in mind now when you mercury the data to jQuery this button sub that is usually submit button shouldn't be anymore submit button and it should be the button or you can use as submit but here on submit you need to return false but it's easier for you to remember just use button so now we also need to get the user password so it does look like this password ok and now we can print this password to just make sure that everything's ok refresh and now as you can see you are getting the password so that is enough you know how to get the data from those input and also how to define when the page is ready and went some uh press this button so the next thing that we are going to do is actually now we need to create the bridge that I mentioned in the introduction and you need to send our data to the server but before that you are going to test if the data is absence If(email==empty || password==empty) Like this so now it test now I saw our press login in it will say please take your input if any of those two are empty okay and if we fill nothing will happened okay and now if everything is okay we will does not send all the details of our service so I will call Ajax and between those two we need to send a object so I will say like this and here we need to specify the URL where we will send our detail so it will be our file after that we need to send some data so again we need to create a object1 so I will say login one because this is the key that we are going to check in our PHP code and here we need to send an email and password okay so those are the keys that we are expecting in the PHP I can say like this does for you so that you know that those two things are different and this is the data that you're sending and since we stored in our variables the values of those inputs so I'm going just to use it here okay and now we need to define success function so this means that when this ajax query executes we are going to get the response from seven inside success function so i'll say he responds and here we will expect some code so let's say console.log response so you can see what server has been return and the last thing that we need to do is this data type and we can say just text and now if we tell this everything should be fine so let's test this I'll refresh log in please check your inputs okay and now I want to put some inputs here log in and as you can see here we have made more requested server and if you click on this server we can see that we have use with request method is get and here is the link where we made it you can see the response from the server and it is this page because we are doing at the moment nothing in our PHP code so now I will show how to change the get method so if we did not specify it will be get method and if we specify the method then it will be that our so it was the post and now if I test again so as you can see now in the head of the request method is post and we can scroll down and see the form data and as you can see what we are sending to the server so this is useful for debugging of your application so you can see here login1 emailPHP and passwordPHP so those are the things that we need to expect in our PHP code and the only one things that we forget is if someone didn't input any data that we don't need to make requests to the server so we can say else like this and now let's move the code here okay so now the requests won't happen if someone didn't put anything in here so please check your input and there isn't any requests okay and now let's just write the PHP code that will expect those three parameters okay so since you said it was the same page I'll go he had say PHP and he will say If(isset($_POST['Log in'])so if this key exists this part here will execute so now we need to make a connection to our database so we will say connection or let's first accept the data so say $email=$_POST['emailPHP']; key is email PHP so email 50 and the same thing we have for our password and now we can return this to the client side so does to make sure that everything is okay so let's say like this exit($email . " = " . $password); and we will print the return to our console.log so some email and this is passwordTempand click on the login and as you can see we have got some email passwordTemp and does ignore those few things this is from different parties that I have but it is important what they expect some email it will also attempt and if we go to the network we can see that we have made the login.php request and this is a response ok and in the headers once again request method post and form data is only one email PHP password page B so that's it and now the last thing that we need to do is with us need to connect to our database and protect those details inside the day so I will make a connection equal you might as Polly and here hast I will specify us localhost username I'll stands by us root that default on my exam several password is an empty and here I am going to specify the database name and if you remember all day business is logging tutorial so say he login tutorial ok and this we need to escape because we want to protect our form so does a connection real escape string and we will kill ok so does complicate this that's it and now let's see do we have this combination of email and password inside our table users so we will save they have equal connection query select let's say ID from users where email equal our email and password equal password and not if they some numerals bigger than 0 so that means if there is some data in the table with this email and password combination notice it does for this test success and his else exit failure so this is that for now but that is part so fresh and now some email and some password login not it took the responses failed and we can see that we sent those email and password and the reason why it failed is because our table uses is empty at the moment so we are going to reset on you let's say snail this will be my email and let's see the password at the moment it is not encrypted but let's go and for now let's see like this so now if you try this email test click on the logo and now if it takes here you can see we have response success and for the heaters we have email and you have password so now if you want we can just encrypt the password so let's say I will use that the basic md5 encryption so how does OMB file online because I don't have x-rays full salary set the data manually copy and now that says this save and now it will tell the same details flow in we can see that response is failed and the reason for that is because we are comparing the test with this so in the PHP we also need to anchor this code so I will go to the password and I will say the field md5 encryption of our password like this save and now let's test the same details logon and the responses success so now not only that we have created the log report but we also have encrypted our password and the last thing is now known as your visitor is not going to look through the network cons of etc and now I would also how to create nice feedback under this for you so I will tell define here we can use paragraph and for this paragraph I will specify the IP and let's say it will be response and inside this paragraph will does show the data that is returned by the server so now if it does this we need to refresh okay now I will specify let's say my password will be wrong login as you can see now we have debug failed and if we have correct password click on the login' it's a success and now I am going to here and I'll specify the much nicer logon success and you can say please check your inputs and we can also specify the color let us say font color equal green those font tags are depleted so you should use them but for the purpose of this tutorial it will be fine but you should always use and please the code of the text by using CSS so if you know first you can see we have nicer spoons and also the color and if it's wrong it's like this so that part is finished but now we need to create obsessions and rhetoric user to another page and show the data behind the log so first line of it needs to be to start a session so say session start here we need to check if our sessions already exist and if it does there is no reason for the person to log in again and reload us ready direct him to our hidden page so this is a set session and what they hear lock it in Yoda's read read person to the single location LLC he does PHP and now he really wants the person itself okay and hero does create this session login so safe session toggle in people let's say one and he will also in the session stored the user email so let's see equal email okay and let's see now what will happen so since you don't have he'll not be feel it just created quickly so quick little to the new PHP file Heelan hit okay and let's say for now it'll build us a this is he and five and now Estelle dysfunctionality so now if we will just refresh this page hit Logan say please take your inputs let's now try this Logan this Laurie success and now it should create already the session and now chiefly the direct as you can see it reject out to the out either file and now if we try to login again it will always reject back to this see the file so let me just now create the logout file log out just delete those sessions so I'll see here session start and I will unset session log it in who session destroy and redirect back to our full immunity okay so this means remove forged in key called the session destroy that of the little others sessions and also resurrect the person to the login page field so that that is basically what almost every without faith is doing so if we now cut call the log out as you can see resurrects back into the loading PHP and if i refresh it doesn't reject me anymore to the healer file because I hope I don't have logging sessions so here we can see that this functionality is working but it is not resurrected automatically the person to our heal file it does get a message log a success so here in the train we can do something right like this if response dot index off and let's say we are looking for the word success bigger for evil zero we will just say window dot location equal and already read to the scene dot PHP file so window dot location a function that will just regulate person and this is the function so this is the method on the object response that will track that we have this matching mode so if the voltage cells exist we already have person and let's try that so I will just refresh this and let's say this so now if I put R on the password to say please take your input and it's not going to resurrect and if I now put the correct password they login success and as you can see it resurrects me to the hidden PHP file and now if I try to go again to the logon PHP it doesn't let me so this is actually the functionality that we wanted to create at first so here on the hidden PHP we have just the basic text but let's say now we'll write the real PHP code so we need again to track do we have the correct is the person actual slaughtered in so say if is that session organic so if is that this causal altitude or let's say if not is that so if the person is not Mallya Dean will resurrect him back to the login page P and if he's the other part of this page of attitude and we can say here you are logged in and saved and now let's try to refresh this hidden PHP it says you are logging and now let's say Philco logout okay and now let's try to open hidden does be 8 feet as you can see it is always rejected back to our only page B so only the persons that are loaded in are able to see he's in PHP so you can hear testify 1 link let's say to me to the load-out look up so not in special on this page but the functionality support and let's try once again the complete functionality say slowly success and it ejects to the hidden PHP and now we have option to click on the logout and you are injected based to the load end so guys pretty much that bit this is us I believe once at Oriel but really in-depth and you are going to learn everything about how to create only for not only the difference between PHP and jQuery but everything completely tutorial I've also find it beautiful and if you do please like it and share to friends that'll be a huge support for me and also if you have any questions please comment the up below and I will be sure to answer those and trust me I read all of that so see you in the next video take it

Channel: Coding Passive Income

Views: 62,097

Keywords: login with ajax, ajax login form, jquery tutorial, jquery ajax, ajax login php, jquery login form, jquery ajax tutorial, jquery, jquery tutorial for beginners, tutorial, jquery tutorial beginners, mysql, tutorials, ajax, javascript, php, php tutorial, senaid bacinovic, database, beginners

Id: BmGMnDz9kOA

Length: 40min 35sec (2435 seconds)

Published: Wed Jun 07 2017