Simple signup and login system with PHP and Mysql database | Full Tutorial | How to & source code

hello and welcome to a tutorial where I show you how to use your PHP skills to create a login system for your users alright so without further ado let's dive right in so the first thing we need to do is make sure that you have zamp installed on your system okay so in stores amp and start apache and mysql if you're using one or mump that's ok as well as long as these two services are running ok so to begin let's go to our browser open your browser and go to PHP my admin so type localhost in your system in your address localhost / PHP myadmin ok it will open the database creator for you PHP myadmin so let's click on new here and create our database so we're going to call it log in sample DB that's the name right there okay let me hit create and just like that we have database and then we'll create a table in there called users create table let's make sure that we have five columns and heap okay alright there we go so here we can add a few columns over on so the first one will be ID the second one will be user underscore ID the third one will be username with an underscore user underscore name the last one is password and they actually that's not the last one the last one is date and we're done so with date on the type here go down here and keep timestamp make sure that it's a time stamp and then password we use variable character same with username this are the one we use big int for user ID and ID we used begins as well so now you might be wondering why we have an IP and the user ID well this IP will be controlled by the database itself and this user ID is what we will create specifically for each user okay so the important thing here is to go on the side here where it says index and type primary make sure it's a primary index and hit OK and then move over this is the ID column that I'm adding the primary index and then make sure that auto increment is axe ticked as well and then once we have that just go and hit the Save button please enter a valid length okay so this is because it's complaining because the variable characters we need to create a length here so just add 100 for the length on each of these and hit save all right and we are good to go now on the user ID since these columns user ID username and date we're going to be searching for them using the database we should add an index for each so go to a it says more add index for user ID and then also add an index for date and also for user name of course great so when we go to browse now we have an empty database with our tables all right so we are ready to begin coding so let's go to our text editor now text editor you can use any text editor of your choice including notepad so I'll be using sublime text you can download and use the free version alright so I'm going to create six files new new new just like that one two three four five six so each file has a very specific use case so let me save the first one now where we'll be saving these files is in Drive C zamp and then htdocs so your father might be different depending on the server you're using but that's the public HTML or www folder in there put log in as a folder create a folder called log in and then inside there let's save our first file as index dot PHP so this file will be the one that's acting as our website the second one will need sign up sign up dot PHP the third one will be login dot PHP and then we're going to need something to connect to the database with so say connection dot PHP and then this other one will be functions because we'll need somewhere to create our function so say functions dot PHP and then finally we'll need a wait for the user to log out so say logout dot PHP okay and just like that we are halfway there right so on the index page let's create some PHP tags here let me remove this slash here okay so it's PHP tags like that and then down here I'll create my HTML tags and then I'll say this is my website so I'll say my website something like this so I'll put some tags like h1 tag and say this is the index page just to show that this is the index page and we will need a way to log out from the index page so I'm going to add an a tag here and say logout do it PHP because that's way to be linking and here I'll say log out all right and then down here I'll add a break tag and then I'm going to say hello to the user that's coming up username okay we don't have that yet so let me go to my browser and load I'm going to type localhost / login which is the folder and slash index dot PHP which is the file if you can't find it just drag and drop the file into the browser and refresh there we go so logout this is the index page hello username okay so we are good to go now the first thing we need to do is create a connection to the database the first the important thing here is if someone just opens the login the index page sorry which is our website they should be redirected to the login page since they are not signed in yet now the way we are going to do that is to use a variable called session now session is a variable that's accept can be accessed by any page on your website so it is a global variable super global as it is code it's written like this session so now to access a session you need to first write session start like that so once you do that you can access session so you need to do this on every single page that you're using session so which means if session can be accessed on any page it means we can simply put a user ID in session and then simply check on every page to see if that user ID is actually legit then we know that you actually logged in okay so now since we are already on the index page we want to be able to refresh and then it should take us to the login page so let's design our login page just now so here what I would do is PHP tags of course and then close the tags and then do some HTML tags so this one will be login and then let me put some Styles here some CSS styles so I already created some Styles because this is not a styling tutorial so copy that paste so I want you to see these Styles they're quite simple so there's a text for the text boxes this is what you type there they hide the border the button and the box so you don't need to to actually use these styles these are just for appearances they are not required so you can copy them if you want to that's fine so down here we create a div I'm going to give this div an ID of box and then in here I'm going to create a form okay so the important thing is to make sure that the form has a method of post like that then in here I'm going to put an input of type text and the name will be username underscore duplicate that and then put the next one as password and then the type also will be s word then down here I will put another input of type submit' and then I'll change the name to value and put login and then down here I will need put an a tag here where somebody can go to the signup page instead if they want to sign up so quick sign up do it PHP and then in here outside sign up and then up the top here of the form let me add one more div and then here I will say login so that we know that we are on the login page you may add a few styles here I'm going to say font size 20 pixels margin 10 pixels and that's probably it now the only thing here is I need to put some break tags to separate these guys so puts two break tags here copy paste paste and paste so let me see how this looks like in order to see this I would actually need to go to the login page and there we go okay so I'm not looking great there what we can do to change things for example here I can put color white and then let me put an ID on these guys so that they can use the Styles above and then here I'll put an ID of button so now when i refresh this is a little bit better not the best but a little bit better what I could do is on the text boxes I could add a width of 100% that should be interesting okay there we go so now we have a login page okay so sign up down here instead of just putting sign up this is where the user I should click say click to sign up okay what's going on oh I've put touch in the wrong place so it's here click to sign up so let me copy all this and paste select everything go to the signup page and paste the only thing we need to change is the title so here at login I'll say sign up down here click to login and then here I'll say sign up as well and then here login dot PHP now what else do we change the title of course is sign up okey doke so if i refresh this click to sign up we on the signup page click to login we're on the login page so what I want though is to go to the login page and be redirected automatically to there go to the index page sorry and be redirected to the login page so here we are the index page we are being allowed to view this page which should not be happening so let's create some restriction so to do that now I'm going to quit session start at the beginning here so like I said on every page you have to put the session start where you want to use the session now what I want is first of all to include the files that are required I'm going to say include connection dot PHP duplicate this and then include functions dot PHP so both page pages I included and then I want to be able to collect my users data so I'll create a variable code user data and I'll say echo to check login now check login is a function we are going to create it doesn't exist so in here I'm going to put the connection to the database we are going to call our connection corn short for connection and that's all we need so on every page that you want the website to check if the user is logged in simply put all this including this line this is the line that you check and then if the user is not logged in it will redirect to the login page so now let's create this function and you guessed it we're going to go in the functions page so let me copy that go to the functions but first of all we have this corn here which we haven't created so let's go to connections and create that so let's add some PHP tags we don't need to close them since there's only PHP in here so what I will do is I'm going to say I'm going to need a few variables I'll say DB hosts the DB host is localhost so if you're using a web server you will need to check what the server is save a name so local hosts DB user and the password and then DB name so that's all we need it so the database name is the name that we created for our database which is login sample underscore DB so log in underscore son for in the school DB the password is empty since we're on our localhost there is no password the user the default user is root and that's it now to connect to a database we're going to create a variable called corn that's where we get it and then say my SQL I connect just like that and then we will use the host in this same order the user and the password and of course we want to tell it which database we want to access now this could present an error sometime so we'll put an if statement and put it an exclamation mark to say if not meaning if this doesn't work out let's remove that bracket so if this doesn't work out died with an error and say they just connect and that's it so if we don't see an error then everything has worked out so let me go back to our index page if we refresh and nothing happens then we are good to go so we've made our connection to the database as simple as that so we don't need the connection dot PHP anymore we can close it all right so let's go to functions now so that we can create this function where is that signup okay so I made a mistake here where we say it's signup dot PHP where we put this in here so we don't need this part in the signup to the PHP let me copy all this though because we don't need to check if the user is logged in on the signup page so everything else stays except that then let's go to the index page and paste this now on the index page we do need this because we need to know if the user is logged in but since we don't have this function yet let's create it in functions so here I'll put some PHP tags we don't need to close them since there is no HTML and here I'll simply say function and paste that remove the semi-colon so this is our function it's going to check if a user is logged in okay so how do we do that now the important thing is we're going to use session like I said so the first thing we do is to check if the session value is set so let's create what session value we'll be looking for and we're going to call it user underscore ID so we'll be checking F inside session there is a user ID okay so if that user ID exists so let me put this in brackets and then I'm going to say if is set like that so we are checking if this value is set if it is set let's check if it's actually legit if it's really in our database so let me set that to ID and say ID is equal to that okay and then let's check in the database now to do that let's create a query so we can ask the database and we're going to say select o from the table users where user ID is equal to this ID right here limit one so let's put some inverted commas here some single quotes right and then what we need to do now since we have our query is to read from the database so we will need the result so say result is equal to my sqli query and we will use the connection con which we've brought from the top there and then we will need the query so let's check if the result is positive so just do that by saying if result all right and then also we check and my sqli nam Rose results passing the result if the number of rows is greater than zero so if the result is positive and the number of rows is greater than zero then we are good to go so what we do now check login since as you noticed we are retaining the user's data using the same function so it means we have to collect this data that we got here if everything worked out so we will say user data is equal to MySQL I fetch a soap so a sock is short for associative array so we search will get the associative array from there and then we're going to tell it to return to whoops returned the users data once getting it returned the users data so if none of this works out what will happen is it means the code will reach down here so when that happens we are going to say redirect to login so it's a comment here to tell to remind us what this code is doing so to redirect what we do is we use header and say location login dot PHP and then let's put a die at the end there so that the code doesn't continue so it's simple what we are doing is reading checking if session value exists if not we redirect if it exists check if it's real if it is return the users data if not to come here and we will redirect so it's that simple so if we go back here now since that value we know is not set of course it's going to redirect us and there we go all right so now that we know we can't login until we sign up so let's go to the signup page ok so at the signup page here let's create what we need so I will be doing some similar things here so let me go to the signup page so at the top here on the signup page we want to check if the user has clicked on the post button so to do that is to say let's use a server as I check will say server request method underscore method if the request method is equal to post in capital letters like so it means someone something was posted so what we want to do is collect the data from the post variable which is like that that's where the data user data is going to be so since down here in the we named them username and password that's what we are going to use so user name duplicates and the other one will be password put semicolon semicolon but then we use variables use the variable here called username use eco two and here a variable called password here we got two okay so I need to check if both are not empty if not empty because we don't want to sign up a user without checking if they've written something okay username and not empty password if both are not empty continue now you can add some further checks here to make sure that username is not a number for example you can use that here you can add it here and say and not use numeric username because you don't want a number as a username so if all that is true you say else here and say echo please enter some valid information okay so they can know that they've entered some wrong information and then if none of that is correct save to database so to save we create a query and the query is very easy we say is echo true to say insert into users which is the table put open and closed brackets say values and then then enclose brackets semicolon so in here we're going to specify the columns we want to head in sit and their values here so the first column is user ID user underscore ID kkoma use a name comma password so these are the columns we created in our database so we don't mind date because the database will create data on its own ID will be created automatically so we're going to just add these three in the middle okay so I'm going to copy this and paste it there because the order matters this will go with that so here I'll make these variables by putting the dollar sign on them and password as well and then make sure you add inverted commas because this is some text like so great but if you notice we don't have user ID as a variable so let's create it so say user ID is equal to now the user ID like I said we're going to generate a random number so I'm going to create a function called random num and put 20 now 20 will be the maximum value the maximum length of this number so you can put any length there that's up to you so we can assume for now we will create this it doesn't exist yet but we can assume for now it's been created so we can continue coding here and then to save is simple we say MySQL I query and then we put the query it's that easy and then once we've done this let's redirect the user to the login page so they can now log in location click on login the PHP and then die so after they sign up they can go and login now now we have to create this one otherwise it defaults to zero so let's create this function and since all functions reside in the functions page that's where we would go so let me copy the name of the function so that I don't get it wrong and here we have one function in here so let's go down here and create another one and say function like that now instead of putting in a number to say length so this will determine how long the number is but not really it will be the maximum so I'm going to say text is equal to empty and then I'm going to check if if length just as a precaution if length is less than 5 then length is equal to 5 to make sure that it's never less than 5 and then after that we're going to say Len another variable is equal to R + 4 coma length so what I'm telling it is that assign a variable this is how you get a random number between 4 and whatever that number is which is maybe 20 in our case between 4 and 20 so that's why we make sure that it's not less than 5 because otherwise if I put 0 here to cause an error because this number should be smaller than that always so Len is the new actual length now okay so I'm going to say 4 so that's a for loop right there so the for loop will end with Len make so so in other words this will repeat the number of times that we've got in here this random number we've got in here I did I did this because I don't want or user IDs to be the same length so I want it to be a random length so each time this happens we add two texts same text dot because another random number that will be between zero and nine and then not to forget let's return this value which is text whatever we come up with at the end okay so that's the entire function there it's good to go alright so let's go back and create a user so I'm going to create a user with that name and then I'm going to put one two three four as the password and hit sign up and then I've been redirected to the login page which means it probably worked so let me go to the database to see if things have been saved and I see that nothing has been saved so let's go back to the signup and see what exactly is wrong with our signup page so what could be wrong not is numeric username so possibly here so what I will do is remove the header so that if there are any errors we will see them without being redirected so one two three four and there we go so query expects at least two parameters on line 21 so let me go back here so line 21 here so what I forgot is to give the connection so I need to give a connection so say corn like that and we are good to go so let me put back this because it's going to work this time so I put the name one two three four there we go so let's browse here and see and there we go so we have one record with a user ID name password and so on so this is good to go right so let's go back to sign up let me make two users the other one I'll make Mary and one two three four signup back to the login so if I browse again you see now that we have two users with two user IDs with different lengths this is awesome right so now let's try to log in and see what happens now since we don't have the code for logging in let's go to the sign up and copy everything in here because it it's pretty much the same so let me copy go to the login and inside the PHP tags paste okay so the only difference here is this is the same while getting the data from there and we have to check as well that it's not numeric so everything here remains only difference is here we're going to read from database read from the database and we don't need to create a user ID and then we need to change the query now to something else so the query will read as follows select Oh from users where username is equal to username so we are comparing if this username supplied by the user is the same as they has any username in the database then we'll continue with limits one so we get only one result and make sure you put your inverted commas on that one since its text and then we're going to read from the query now we need to get the result of this so I'm going to put result is equal to like that and then we will check if the result is good and then since we are logging in here if everything is good we're going to be sent to the index dot PHP page but first of all let's check if everything is fine so to check we're going to say if the password so here the only thing we've checked for is the username so if the username is correct good but now let's confirm the password so in order to do that I'm going to check if the result was successful first by just saying if result and then like I did in the functions here let me go up here I checked for this so I want to check this it's going to do the same let me go to the login and paste then let me move all this there so if R is out and the result is greater than 1 at least we have one result so what we will do if that's true we will get the user data here from there so now what we want to do instead of returning because this is not a function so we can't use the return we want to check if user data the user data is password is the same as our password that the user has supplied us so if this is true then we cut this and redirect to the to the index page now before we redirect now keep in mind that the check login will check for whether the session ID is set so let's copy that go to login and then assign it now that we are confirmed so the session ID will be equal to the user data remove the semicolon here user data's user ID and then redirect so just like that we have successfully done it so let me try and see if it actually work so I'm going to say one two three four first of all let me put something bogus and type in and let me come back here to the login page on to echo here please enter I will put it here as well and then let me try again with some wrong password and then I'll say please enter some valid the information now instead of that what we want to tell the user is wrong wrong user name or password like that so let me come back and try again refresh okay so room username and password but when we type in the correct thing voila when the login page now down here has to tell us who the user name is that is logged in so to do that we will go to the index page and right here we're saying hello user name remember that if the user is not logged in they will be redirected if they are logged in this user data will contain their information so we can simply come here and use PHP open PHP tags and then echo out their name user underscore name like that don't forget to close the tongues and if I go back here and refresh so you see the name there now we haven't created the logo yet so I want to be able to look out so that's where they log out comes in here now to log out as you remember in the functions when we are checking for the log in we're just checking to see if this value is set in the session so if we unset it then we've logged out so let me put some PHP tags in log out and I will need session start obviously and then I'm going to check if it's set because you don't want to unset a value that's not set so you check if it's set and then unset it just like that and then we redirect the user so we'll put it down here so that whatever happens here we still redirect location we are redirecting to the login dot PHP page we don't need to put died but it's a habit so everything is done now everything should work so let's give it a drive so let me refresh and look out and there we go so let me log in as meri now 23 for login there we go hello Mary logout let me go gun at somebody else 1 2 3 4 and there you have it okay so everything is working as required so I hope you've lent us something new in this tutorial and I hope you like it so give it a thumbs up thumbs up and subscribe for more videos and I will see you in another tutorial

Channel: Quick Programming

Views: 248,888

Rating: 4.9376717 out of 5

Keywords: Web Design Programming Tutorials, web development, quick programming, PHP, MYSQL, HTML, CSS, tutorials, Learn, web development tutorial, html, quickprogrammingtv1

Id: WYufSGgaCZ8

Length: 41min 17sec (2477 seconds)

Published: Mon May 25 2020