How To Create Forgot Password System In PHP & MySQLi [2018]

In this video you will learn a step by step method to create forgot password system 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 then they'll do it on their own, so if that's something that interests you consider subscribing ->> so before we actually start writing any code I want to explain it the basics that you need to understand for this tutorial so what we are going to do we will actually create one input it will be an email and then we will create one button here so this email we will verify in the database if it exists so when someone press this button here we will make a request to the PHP okay AJAX request and then from PHP we will check in the MySQL date table do we already have this email in the database if we do have we will create a token which is just a random string because we want to make sure that this person requested password and then we will send an email to that person so let's say we are sending here an email and now when that person go to his email inbox and open it up he will have one a link so when he click on that link we will redirect him to another page so let's say this is some page and we are going to say reset password okay and now on this page all we need to do is to verify the token that is in the URL that is from this email and if the token is okey and email match that token too - we are just going to create a new password and then redirect back the person to the login page so pretty much that's very simple way to achieve this and let me now show you how to write the code so now I'm here at my PHPStorm I created a new project and also an empty forward password dot PHP file so first thing that I want that you do is to actually make sure that you have a table similar to this one so as you can see in this table I have name email password token and token expire so the important things here are email password token and token and expire and of course for those of you that want to download the source code we can check the description below so this is from my old login system and if you want to learn how to create login system I have quite a different tutorials on my youtube channel so make sure to watch some of them anyway so first thing I want to go is to include the bootstrap because I want to create nice looking forward password page so in this time I'm just going to use CDN link from here okay I'm not going to download everything so here I will just start a basic HTML document so let's say title forgot password system and then I will paste my link to the bootstrap okay now first thing that you need to do is to create a container and in this container we are going to create one row and this row are just going to justify content to the center of the screen and then I'm just going to create one column so let's say I will set to the six and then I will add offset to the three so that we have in the middle six columns and three from both sides okay and then of course I'll align everything the center here also and that's it so now at the top I will include mine log just make it a little bit nicer I'll make two new lines and then I'm just going to let's say have one input okay I'll say class form control this comes from the bootstrap let's say ID will be email so you can quickly access it from the jQuery and then placeholder will be your email address and then below that you're just going to have one button class I will set to the BTN and then we BTN primary and value will be reset password okay and that's it okay so let's now quickly upload this and see how does it look like so I will test everything from my live server okay and this is the basic design so maybe I can just leave everything down so I will set container maybe style margin top 200 pixels and that's it okey so this is very simple and nice looking for forgot password okay so the next thing that we need to do is to include the jQuery so I will go to the code dot jQuery dot com and then I will use minified version ok so just copy this part here okay and I will just paste it before closing body tag like this and then I'm just going to do this quickly okay so I pull this up a bit readable and then we are going to write JavaScript code here okay so first we we will wait for document dot ready okay and then when it's ready I'm just going to set an on click method for this email so I will say in $($email").on('click') function ok and then here first thing that we need to do is to verify that actually this email input is not empty so I'll see if or maybe we can see if email and even better for because of the cathching it will be that you create new variables so let's say like this email so set here like email but onclick and then he will see just if email dot val different than empty okay we will exit you something else let's maybe just set a red border around email so you can see email CSS and then you say border one pixel solid red okay and then here otherwise we will set just do maybe solid green like emails a key and you can make a test for this part quickly okay fresh and now if I press the reset password it's nothing happening so what is the problem we have smail mistake here, here here we should set and on click method for our BTN because it's if it's only button here on the page I will just use that so I could use BTN or BTN primary it will result the same and now it is red and ok it's green of course we can add some other validations like if it's really an email etc etc but that is not that much point of this tutorial I have other tutorials that focus just only on validation of the inputs so now the next thing once we have done this is to actually just make an AJAX call and send this email there so we can say Ajax and then here you will say that our URL will be this same page ok method will be post and then datatype that will be returned by the server will be let's say text ok and then data that we are sending to the server is let's say just email ok and email is email dot val enough on success will say function response from server and maybe at the moment let's just print it to the console log ok and that's it so now let's make a test for this part so I'll hit refresh some email set password so as you can see now in the console it should turn at the entire source code of the page because we are making the request and then because we do not expect any post method the server will just return the entire source code okay that's okay and now let's write the part in the PHP so I'll write it here at the top you could also write it in some other file but it's not that much important so here I will say if isset post email that means that someone is trying to reset so I will first asset that email and before that I'm going to make a connection to my database so I will seeing you my screen and then I'll say localhost then we need to specify the username ok the password and then the database name so I'm using forgot password if I am correct for this tutorial no it's actually forgot password system ok you need to make sure that those details are ok ok and now here I'm just going to escape to make sure we are protected this email and after that all we need to do is to make sure that actually there is an email in the users table so I'll say here connection query then I will say select let's say ID from users does the name for table where email equal this email and then we will say if SQL number of rows bigger than zero that means that user with this email exists and then we are going just to exit to this part here else we are just going to return the message I will say please check your inputs and that's okay maybe it will be better if we used the JSON so you can say here's something like JSON code and then array and we will have to like status okay yes zero which means it failed and then the message is let's say test or we can say like this please check your inputs and that's okay and then of course down here I will say two breaks and then say like me we can use a paragraph and give it some ID like response and here we can check if response dot success assent means it's zero hey what does say but our response dot HTML equal response that message and then CSS will be like color red okay so we can test that part and of course the this needs to be Jason so let's make a test for this part okay I'll hit fresh and maybe let's see if it fell so some email that does take this reset password and as you can see here now chose please check your inputs and if we check here what is returned by the server as you can see we have status zero and we have message please check your inputs and of course if we write some email you'll probably get back the source code okay yeah the responses an entire source code okay so this part is working good and then he will say else here color will be great if response is okay okay so here does of the case a success one and then here we will says please check your email inbox okay so now before this we need first to create a token and then send an email to that person okay so for us in order to create not token I'm just going to do something very simple so let me show you step by step okay so the idea to create as token is to first create a number of different or characters that you want to use numbers and other characters so let's say I'll see here string equal and then I will just put like randomly from my keyboard and then I'm also going to include some numbers you can also include small and big letters whatever so next thing is that I want to do is to just mix all of them so I will say string shuffle string okay and maybe let me just do like this so if we make a test of the code as you can see now it is looking different and if we test again every time it just mix the code not especially okay so next thing that I want to use is to just get the specific number of the characters so I will use the function substring so I'm going to code on the metals string outside from the position zero and I want ten characters okay so let's make a test and now that as you can see each time I'm getting ten different characters but I will use as small token okay and that's it very simple so I'll just copy this here we can close this tab and maybe stand off string let's say it will be token okay and that's it so now we need to set this token in to our table so we will say connection query and then we will say update users' set token equal this token and also I want to set an expiration time for this token so I will set token expire equil and then I will use the function from the MySQL so let me just maybe put it here so it can nicely see what am I doing so date add and then to them to now it means the current moment you are adding in INTERVAL of let's say five minutes okay and that's it and then only if some one in five in the next five minutes click on the link that we will send to them that means that he will be able to reset his password okay and then we will say where email equil email okay update users' set token equal token token expired equal interval in five minutes from now okay where email equal email and that's it okay so let's maybe make a test for this part so I will hit reset password please please check your email inbox but let's see what has happened here okay so as you can see now it's token is here and also the token expire is in five minutes from nine of course this is my server time and if we try again you can see that everything has been changed okay nice so now once we have this part done let's just send an email and usually in the previous tutorial I have been using the native mail function but this time we are going to use something much better so I'm going to Google and I'm going to download the PHP mailer okay so here I will go to the this button and then go to download and of course I will save to this folder okay I'll hit save and I've extract everything here a delete the archive and then inside here we have all different files but all we need are the files source folder so first I will delete everything except source ok and then move those files here and then of course I'm just going to rename it to something nice like PHP mailer ok and now while we code I will just put it for upload so that you don't let wait later ok so now first thing that we need to do is to include the name space from this PHP mailer so here at the top I will say use PHP mailer and then I'm just going to include the classes so I will say PHP mailer and then I will use PHP mailer file and the next one that you need to include is exceptions and we can maybe include those only when we need them so it's right here ok so first we need to create an instance new object so say new PHP mailer ok and then we need to set just the basic things for any email so we'll set from which means who is sending an email so let's say it's sending from this codingpassiveincome.com let's say the name is CPI and then we need to set where we are sending to which address so that's our email actually so I can switch those two in and then we need to set the subject ok so let's see subject will be password and then we need to set a body of our email okay so here I will just say hi in order to reset your email your password please click on the link below and here I'll set a link and then maybe let's see kind regards okay Senaid B. So we need to set two new lines I will set new line here and new line here and maybe two new lines here okay and now the crucial part is this link so now our link will be basically the link to the folder feel like this and then maybe let me just put this to new line but you have only link in the new line like this okay so the name of the file will be reset password dot PHP and then we need to pass an email okay which is which I will get from email variable and then we need to have a token which is again in the variable token and that's it okay and then I'm just going to use this same link and paste it here okay and that's it and now we need for this mail to set but it is an HTML email okay we are not going to send any attachment and then I'm just going to set to send an email so I'll set say here if mail send I will say this else I will maybe say something wrong just happened please try again okay and that's it okay and let's make a test so I will quickly refresh okay and then I'll write my email here that I have into database and I will hit reset password says please check your email inbox okay so now I will go to my email inbox and here is our new email from codingpassiveincome and it says reset password and here it says hi in order to reset the password please go to link below Kind regards so everything is looking good and now if we click here we will go to this file that at the moment of course doesn't exist but as you can see here we have passed an email and then we have passed a token and now this token needs to match the one in the table which is right here okay so now let's quickly create this reset password dot PHP file okay so I'll say new PHP file set password okay and now here first thing that we need to do is to just check if in our URL we have email if isset email and isset get token okay and if we do not we will just redirect the person to the login.php file or maybe forgot password' whatever you want I mean I will usually just read it to them and then here we need to get the email and the token and of course I will just copy this connection and maybe this one here so I don't try it again everything okay and I will just duplicate this and get token okay and now in our table we need to verify that you actually have matching input so I will see SQL equal connection query and then I will say select ID from users where and here I will say email equal email and token equal token and token different then empty and token expire bigger then now okay so let's see what I am doing here so first we want to make sure that email exists and it's equal this email they want to make sure that email and token are the same and of course that token is not empty because when you create a user probably this token will be empty so if someone tries to reset a password for this email and a empty token you'll be able to get inside so you want to make sure that that is not going to happen and then of course here we are tracking for the five minutes so if token expire is bigger now that means that the token is still not expired and we are able to log in to click to reset the password so because of that I will just see here if SQL number of rows bigger than zero which means everything is okay and now we are going to create just a new password and store to database else it means that someone is trying to cheat and I will again just redirect him into the same URL so maybe let's quickly create this function okay because we are going to used on multiple places like this and then here outer I will just say else redirect okay and here we need to create again a random string that we will use so maybe the better will be to have one file functions so I will just cut this say and create a new PHP file let's say functions okay so here in these functions I will say function generate new string okay and I will say like this and then I return token and maybe here we can say length like how many characters the person wants and by default it will be ten okay and then maybe let's call this function redirect to login page okay and I will just cut this and paste into our functions file okay that's it so here we will say that token equal generate new string okay and of course we need to include it at the top so I will say here requires ones functions PHP and the same thing we need to do here okay so here we can say that our new password is equal to generate new string and now we will need to encrypt this password and store the database so I'll see new password encrypted equal and then I will use function password hash and I will use bcrypt algorithm so if you never see this password hash function it's actually the latest version of the best way to protect your login system and I do have about a tutorial my youtube channel about password hashing so just go and watch it okay and now all we need to do is to actually update it in the database so I will say connection query of the users set password equal new password encrypted okay and then here I'll say where email equil email okay and maybe we can now set token equal empty so that the person is not able to use the same token again okay so with one token he can only reset password once okay and that's it and now of course we just need to display new password to our users so I'll say just echo your new password is new password and then maybe you can see click here to load in and of course you can create a link here so maybe I will just say like this login PHP and that's it so let's make a test for all the things that we have done at the moment okay so if I now try to refresh I have been redirected to the login.php because my token has been expired okay so I'm just going to try again so write my email here set password It says please check your email inbox and it's here okay so I will click and not say sure new password is this and click here to login and if we now check our users table you can see now that the password has been changed and the token is empty which means that we have did everything correctly so pretty much guys that's it I hope that you have enjoyed this video if you do please like it and share with your friends and of course if you have any questions or doubts or whatever it might be please ask in the comments below take care :)

Channel: Coding Passive Income

Views: 37,544

Keywords: how to create forgot password in php, how to create forgot password in php with mysql, senaid bacinovic, forgot, system, reset, tutorial, php, password, php tutorial, php lost password, php forgot password, php forgot password code, forgot password in php, reset password in php, mysql, tutorials, mysqli, mysqli php, mysqli php tutorial, how to, php tutorial for beginners, php mysql tutorial for beginners, bootstrap

Id: JQkhoBxyOjM

Length: 37min 33sec (2253 seconds)

Published: Fri Feb 23 2018