Complete Login and Registration / SignUp Form using PHP MySQL | Xampp

hey guys welcome back to my channel so today I'm going to show you how to make a very simple sign up and login form using PHP MySQL which will run on Zam server so let's start at first you have to go to the C drive inside the zamp folder if you have not installed zamp then first install Zam server then this folder will appear inside the C drive and then inside the zamp folder go inside HD docs folder folder and then create a new folder I am right clicking and click on new then click on folder and give the name I am giving the name login sign up and enter then right click on this folder and open it with vs code as you can see the vs code has opened so at first I will create an index.php file so index.php index.php file has been created now it's time to use bootstrap to create the basic structure of our website so I will go to the bootstrap official website and I will copy this uh template which includes both CSS and JS so I am copying this template and I'm pasting it here save then to see the output on the Brower browser I have to open the Zam server so click on this start button beside Apache module and the start button beside the MySQL module start this two modules inside the Zam control panel and then go to the browser then the name of the folder inside which the project is created in my case it is login sign up and then inside the index PHP file we have the code so I'm clicking enter as you can see hello world is printed now I want a nav bar on top for that I will go to the bootstrap official website and I will search Navar and then I will copy the code template and I will paste it above hello world save it refresh the output screen as you can see the nap bar is visible on top I don't want this extra link drop down disabled all these things written on the top so I will delete it so delete the dropd down and then I will also delete the Ali nav item disabled I will only keep this home and then I will also delete the link so this much I will keep let's save it as you can see only Navar and home is visible so in place of this Navar I will name the brand Let It Be take coffee break I'm keeping it short in your case can uh write any kind of name you want then in place of home I will keep home and inside I will delete this Ro search because I don't want a search bar here I want the login sign up and log out buttons to be here so I will delete this input tag in place of search I will type sign up then I will copy this two times and then I will type login and then log out in place of sign up I want the color to be green so for green I have to type success and it is as it is then for login I will change it to primary if you don't know what are this then you have to study a bit uh in bootstrap that what are this success refers to green color primary refers to blue color and then for log out I will give red color so for that it will be Danger let's save it and see the output as you can see the color has changed as I want now I want some margin on both sides for that I will give MX to M for margin and X for on the x axis that is from right and left I will give margin to let's see uh yeah some space has been added now it's time to create the login and sign up forms so I will create two more files one is login.php and then another one is signup.php but before anything I have to connect to the MySQL server right for that I will have to have a connection.php file so connection.php to create a connection to the database we have to create a database first for that I will go to the Zam control panel and then I will click on this admin button so you have to click on this admin button beside the MySQL module to open the PHP my admin this PHP my admin will appear as you click on that admin button now click on this new button to create a new database you have to give the database name here and click on create I already had a database DB so I will not create a new database so I will just click on my old database then I will click on new below the DB database and I will give the table name so the table name in my case I want users and I want to add four columns the name of my first column will be ID the name of my second column will be username then email then password so this table I will use use while signing up and then logging in but let's not go deep into this table now because I already created a database and now I have to connect to this database for that I will go to my connection.php file then I will type PHP and inside that I will take a variable server name and inside that I will Store The Local Host which is the server name in my case and in your case also so then uh store the username which is root and then store the password which is nothing in my case just empty codes in your case if you have given some other password while installing Zam give that password if you remember then the database name which will be DB then the connection I will create inside the connection variable using the new mysqli object and inside that I will give the server name as parameter then the username then the password and then the database name and in my case I have changed the uh Port from 3306 to 3307 for mysqli that's why I have to give this 3307 here but in your case you if you have not changed it explicitly then give just nothing okay just delete this in your case delete this portion comma 3307 in your case then I will check if the connection has any error or not if the connection has failed then I have to give a message so die connection failed and then I will print the error message using con connect error and if successful I will Eco it that is I will print it successful on the output screen now let's save it and just go to the site here I have the index.php file but in place of index I will just type connection.php and as you can see successful is written here so the connection is successful now let's complete the table which we had left halfway so I started creating a table inside the DB database whose name is users and I have four columns so the type of ID will be int username will be of type Vare email will be of type Vare password will be of type Vare now the password size will be maximum so I will give 255 then the email size I will give the username size I will give 150 and the ID I will give 10 okay now the ID I want the ID to increment automatically so I I will click on this box Auto increment and by default it will be set as the primary index of the MySQL uh database table and then everything is okay I will click on save button to save this table as you can see users table is created inside the DB database as you can see the table is created now let's create the sign up form for that go to the signup.php file and copy the default bootstrap code copy the default template from here bootstrap.css for that at first I will have a div whose ID will be form inside this div I will have a heading sign up form after that our main form will start the name of the form will be form and action will be sign up dot PHP because in this file only the PHP code will exist method will be post because we will be posting the values of name password and email to the server inside the form tag we will have labels for username email password so label I will copy this level three times more one is for username then the next is for email then the next is for password it is for enter password and then last is for retype password all the levels are done then we have to give the input Fields so input type of input for username will be text ID I will give user name also I will give user this name and ID will be used to F the values and then I will give the attribute required because this field is required to be filled if someone doesn't fill it and clicks on the sign up button then he will not be able to process it process it further okay and then I will give two line breaks BR TX I will copy this input field and I will paste it after email then after enter password and after retype password for password the type will be password then again for the create password the type will be password for email the type will be email and the ID for email will be email name Will will also be email then name for password will be pass and ID will be pass and ID for retip password will be C pass name for retip password will be C pass okay let's save it and see the output for that you have to type on the URL Local Host then the name of the folder that is login sign up and inside that we are now working with signup.php so signup.php as you can see the heading sign up form and then the four fills four input fills are visible now let's do the structure for the login form also it will be similar to sign up form let's copy the sign of form hole and let's paste it on the login form now the user can enter either the username or the email so if he forgets the username he can enter the email and login and if he forgets the email he can enter the username and password and can login so I will give enter username SL email and I will delete the field that is the separate field for email and I will delete this rype password field because for login we only need to enter password once okay let's save it see the output in place of sign up form it is the login.php the login.php is also looking fine now I want the nav bar to be present above all the pages across the signup login or whatever the page is the nav bar should be present on top for that I will have a separate file whose name will be navbar PHP and I will go to the index.php file I will just copy the navbar hole and I will paste it in nav bar. PHP and I will save it now I will delete the nav bar from index.php file and in place of this SF Bar I will include the PHP file so dollar PHP open tag then under that I will include nav bar. PHP similarly I will include this PHP code which includes the Navar file I will paste this inside the login.php file also above the form so inside the body the first tag will be under PHP which will show the Navar I will save it and similarly in the sign up form also below the body I will paste this PHP code which includes the Navar code as you can see above the sign up form the nav bar is visible and if I uh go on the URL and type sign up. PHP uh this also shows the nav bar and if I go to the index.php file then also it shows the Nav Now I want to navigate to all the pages through these buttons sign up login and log out for that go to the navb bar. PHP file in place of buttons type A A for anchor tag because these are links which will redirect us to some pages and inside this add attributes H R equals to the sign up will redirect to signup.php so signup.php then login will redirect to login.php and then log out will redirect to log out. PHP fine so if now I save it and go to the output then if I click on sign up it will show me the sign up form if I click on login it will show me the login form and for now log out is nothing so log out is empty one thing if you notice that if I click on this login form the login form appears but the heading is still sign up form so that I have to change so I will go to the login form and then I will change it to login form so login form and now if I go to the output it shows me the login [Music] form now let's do the PHP code for the sign up form so that this form actually works and submits the data to the database for that we have to go to the signup.php file now we will start our PHP code from the top of this HTML file inside the signup.php file if you can remember the form has action signup.php so whatever action will take place after we click the submit button on this form the PHP code will code will stay here only so at the top we will start our PHP tags opening and closing tags and inside it we will check if the submit button is clicked or not if you can remember that uh the method is post for this form so using the post method we will submit the details to the database so if is set dollar post submit if submit button is clicked then we will include the connection file that is connection.php to connect to the database now we will take a variable dollar username and we will store the value of the username which is submitted using the post method so dollar post user then similarly we will copy this three times more and then we will change it to email we will store the email value we will store the password value we will store the pass uh repeat password value also so the repeat password will be stored in the variable C password and the name of the repeat password if you can remember it is C pass so remember to give this name correctly because this names are the only uh attributes which will be able to identify this uh input fields and it will submit the value to the database so the user email pass Cass should be same as the names here in the HTML code after that we will take a variable dollar SQL and we will write the query to get the number of rows which have the username similar to this user okay so we will just check that the user who wants to sign into this uh website uh is this user already exist in the database or not for that at first we will give the query select star from users because users is the table in the database if you can remember uh this was our database DB this and inside that we have we have the users database and this is the structure of the users table okay this is the structure it has four columns ID username email password ID is auto increment it is set to Auto increment so we don't have to worry about the ID we will only submit the values of username email and password for now let's uh store this query that is Select start from users where username is equal to username dollar username contains the value and username is the column name of the table okay and then we will store the result in the result variable mysqli query is the function which is used to fet the rows in the form of array okay so this will submit the query and it will also fet the rows and store in the result variable in the form of an array then we will count the number of rows returned okay the number of rows with this username which is present in the table it will be returned then similarly we will also check if the email is present or not if this email is present previously then this user cannot sign up to this website with the existing email right for that we will just copy this three lines again and we will change the username to email so select start from users where email is equ Al to email then count email will be the variable which contains the number of rows which contains the same email then we will check if count user or count rows equal equal to zero that is if this email and username does not exist previously then we will do the further code for signing up into the website but if not so else we will alert a message to the user that is user already exists right and we will navigate to the index.php page so if user already exists we will just redirect the user to the index.php page again which is the normal default page okay so window.location of a. hre is the attribute which will redirect us that is it will change the location of the window to the index.php after that that if the passwords match that is the password and the retyped passwords match which are stored in dollar password and dollar C password then we will do the further processing for sign up but if they don't match then else we will alert a message to the user that the passwords do not match and we will redirect the user to the index.php page okay or we can redirect it to the signup.php page itself that is we will tell the user to sign up again because passwords do not match then if nothing happens like this that is uh no user already exist or the passwords match if everything is all right that is uh no user exists previously and passwords match then we will do the further code for signing up then we will create a hash value of the password now what is Hash so if you can see this diagram so this is the normal password which is in plain text and this hash function converts into something like this okay so basically hashing is the process of transforming any given key or string of characters into another value which is fixed in size so why to convert into this hash password because this hashed password is difficult to decrypt so hackers will not be able to decrypt this password easily but they will be decrypt this password very easily for that we will use a hash function so dollar hash is the variable which will store the uh value of the hashed password and we will use the uh function password hash this password hash is a PHP function which will convert the normal PL text into a hashed password so it will contain the parameters dollar password and then we have to give the algorithm so there are two types of algorithm password default or password B gript you can use any of the algorithm both are almost same they have a slight difference you can read about it later then we will take this variable dollar SQL and we will store the query to insert the values of the username password and email to the table in the database the table name if you remember it is users table and the database is DB so insert into users into the columns which are username email and password and then the values will be dollar username dollar email and dollar hash then we will take the result that is we will submit this SQL query and we will Fitch the number of rows that is the rows in the form of arrays and we will store it into this result so this result variable will contain the array which will contain the number of rows returned after submitting this query so mysqli query is the function which sends a query to the currently active database on the server that's associated with the specified link identifier so it will contain two parameters dollar con that is the connection parameter and the SQL query dollar SQL now one thing uh if you have noticed that in the else part I have given this alert password do not match so this is a JavaScript code and we cannot type it directly inside a PHP file for that we have to enclose it within a script tag and we have to display it using Eco function of the PHP for that I will type Eco and enclose this JavaScript into inside the script tags because this is a JavaScript code similarly uh in the next Els part also we will enclose it within the script code and print it using the Eco function of PHP okay so if you can see that I have no button so submit button is missing let's give the submit button first now for the sign up button we have to go to the HTML part of this PHP file below the repeat password filled and then we have to give this input tag input type will be submit and then the ID I want it to be BTN and value uh will be sign up then the name will be submit because this name you have to write very carefully because this is the same name which will be uh written here also if is set dollar post submit so this submit button if it's clicked then only this PHP code will run so this submit you have to give it carefully and then close this input tag now let's see the output refresh it and yeah you can see that the sign up button is uh visible now so let's give some input D so I am giving it D and then d@ gmail.com and the password and repeat password both I'm giving it D after that I click on sign up and now let's see the database table so let's browse to this table and as you can see the username D the email d@ gmail.com and the password in the form of hash is present in the database table so our sign up form is successfully done now if I enter some special characters in this place and then I give an email ID uh suppose this and then I give some password and I click on sign up then it shows me this error that uncut mysqli exception you have an error in your SQL syntax now this error appears because I entered some special characters in the username because my SQL or any kind of relational database does not accept special characters and this is the way through which SQL injection happens in SQL injection a malicious code get access to our database and destroy it or steal data by exploiting the PHP application through a combination of characters as you can see the hacker can use a combination of character and special characters to enter into the database and exploit it so for that just because MySQL does not support any kind of special characters I have to make it supportable like I have to use a function mysqli real Escape string so this is a PHP function which is used to escape the speciaal characters and this special character combinations will be submitted to the database table so I am using this function MySQL I real Escape string as you can see I have added this MySQL real Escape string function to every input now let's see the output suppose I am again giving some special characters and then I am giving a random email and then I'm clicking on sign up so the error shows that there should be two arguments and one is given now okay so I also have to give the connection uh variable dollar con because it needs two arguments one is the correct connection to the database and another is the value of the string so dollar con and then I am saving it I'm refreshing it and now I am giving some special characters in the field then I'm giving a random email and then I'm clicking on sign up as you can see sign up is successful successful is written on the top and let's see the database table whether it's submitted or not as you can see this special character combination is submitted now as you can see the successful is appearing but I don't want to see the successful thing appearing here so I will just go to my connection uh file and I will just delete this successful string and I will replace it with empty codes now there is a mistake as you can see I I have given the condition if the number of user returned and the number of rows this will not be rows this will be email okay if there is any row which contains this email or which contains this user then it will go to the else part else it will just check whether the two passwords are same or not and if the two passwords are not same then it will go to the else part else it will just sign up the user okay let's save it now let's let's refresh it and I'm going to the sign up form and I am giving the same D username which I had given previously to just check whether I can enter duplicate values or not uh while signing up so I am just giving some duplicate username and email and I am signing up as you can see it shows the alert user already exists so a person cannot sign up twice now let's code the logic for the login form I'm in the login form right now at first I will start the PHP code from the top of this file so open PHP tax and close PHP tax and inside that I will check if is set dollar post submit or not that is if the user has clicked on the submit button in the login form or not if the user has clicked on the submit button then only further process will take place and if you remember this is the form and the method is post here so we have used dollar post and now I will extract the username using dollar post user because user is the attribute name of this input field okay if you see this input field it has the name attribute value user so this value only you have to use to extract the value similarly okay at first we will uh use the function MySQL real Escape string why because as you know from the signup form you have seen that MySQL uh does not support special characters so for that to escape the special characters we have to use this function mysqli real Escape stream similarly we will also extract the password and the password filled has this name pass so we will use pass value of this name attribute to extract the password value then we will write our query to check that if the user with this username or email exist or not and if you have noticed that we have written enter username SL email so in this field that is the login uh in the login form enter username or email in this field the user can enter either the username or the email okay for that we have to write the query like this select star from users where username equals to username that is this username value is matches with the username column in the table or email column of the table so either username equals to username or email equals to username just rewatch this part to understand it better then we have to change the action from sign up to login okay if you had seen previously the action was signup.php but this is the login form so whenever I click on the submit button in the form it should redirect me to login.php the PHP code lies in this file only whose name is login.php you can create a separate PHP file also in that case you have to include the file name here at the top of this file but let's not go to to that for now after that we will take a variable result which will store the value of this query so mysqli query is the function which will query the database with this select star statement and the result it will store in the result variable now we will fetch the rows using the function mysqli fetch array so the number of rows which matches this username as username or email will be returned and stored in this row variable now we will check if row exist that is if any row with this username or email exists then we will check if password matches with that password or not okay the row which is returned by this result that has a column password right so this row dollar row I am just increasing the size a bit so this dollar row has a filed password okay so it contains a hashed password and if this password matches with this password we will do further processing so this password verify function converts this password into hash and then Compares this to Hash functions okay two hash passwords after that if the two password matches then it will navigate to welcome PHP so this is a separate file which will be the dashboard you can say or uh the landing page after uh logging in into the website so we have not uh made this welcome.php for now we will make it later now if no row is returned that is no row has this username or email then what we will do is we will write a JavaScript code inside which we will alert login filed or we can type invalid username or password and then we will navigate to login.php page again let's save it and see the output as you can see there is no login button so I will just paste the submit button to this login form and I will change the value to login and then let's save it refresh it and I am entering the value d and d and I'm clicking on login and as you can see the error shows that okay again I have made the same mistake mysqli real Escape string needs two arguments but I think I have given one argument so in inside it we have to give the connection variable and I also have to include the connection.php file now refresh it okay so I am again giving D and D let's click on the login file and as you can see no not found because welcome.php we have not created let me create the welcome.php welcome. PHP and inside it I will just paste the bootstrap code inside welcome.php I will paste the bootstrap code that is the default template I will just copy and paste it from the bootstrap website and I will type welcome let's save it and see the output so D and D I have given as inputs and then I am logging in as as you can see the welcome is visible so our login is successful now what if I give some special character here then in in invalid username or password so the username or password doesn't exist or you can say the username or email doesn't exist so you can also give this message that invalid username email or password username email or password okay fine yeah since this video is only focused on the logic of sign up and login form so I will not waste time on explaining the style. CSS file if you want the explanation then comment down below I will create a separate video but for now I will just paste the code for styling here then I have to add this style. CSS file to every file okay to every PHP file for that I have come to the login.php file and below the title I will add link ra stylesheet href style.css style.css is the file which contains the CSS code save it then I will go to welcome and I will paste it below the title save it I will go to the signup.php paste it below the title and save it go to the okay go to the index.php paste it below. title title and save it go to connection no no need to go to connection log out for now log out is empty let's just add a simple code um if not the actual logic but just add a single uh navigation code PHP tags within the tags I will just navigate to the index.php so if someone clicks on the log out button that person will go to the index PHP page so this is not the actual code for log out I will show it later but for now this will work and as you can see I have already added a new folder images and inside that I have added a image for the background okay so this background image I have used in the CSS file if you go to the CSS file uh the background has URL images background jpg so under images folder we have background jpg image which will be the background of this body and then the whole CSS code will be there now let's see the output as you can see after adding the CSS file this is the uh look which we got the form is aligned on the center and the background has changed to this so if I click on the sign up button it shows me the sign up form if I click on the login button it shows me the login form now I want to click on the home button to go to the welcome.php page and this branding to go to the index.php page for that I have to edit the nap bar so in place of h r beside the home I will add welcome.php and for the HF of this branding I will add index.php now refresh it if I click on home I go to the welcome.php and this welcome.php does not have the nav bar let's add it in the index.php file I will add uh code snippet which contains the picture Okay so there is a div tag and uh inside that there is an image whose SRC is this so I have just copied the image address from the browser and pasted it here so IMG SRC within codes the image address and it is enclosed within div tag and I have given a style inline style inline CSS uh to justify to the center so display Flex justify content Center as you can see let's save it and see the output as you can see the cat image is shown here so this will be the default landing page and if I sign up then it will redirect us to login and if I login it will redirect us to this welcome.php page now I want to change the look of this welcome a little bit similar to the login or sign up form which are aligned to the center and middle for that in the welcome.php file I will add this H1 tags within H1 tags we have welcome and this is enclosed within diff tags whose ID is form remember this form has style which was used to style the login and sign up form also so this ID form is also used in the login form to enclose this whole form within the ID form and also in the sign up form to align it in the center and middle so the same thing we have used in welcome.php let's save it and see it appears like this so yeah guys that's it for today I have created the sign up logic the login logic you can navigate through the nav bar through different pages the only thing which is left is the log out logic it involves session I will explain it in the next video in part two wait for the part two guys it will be uploaded the next day and I will paste the link in the description so don't forget to see the part two of this video for now if you like this video please like And subscribe to my channel and please share it with your friends who need it thanks for watching my video have a nice day

Channel: Tech Coffee Break

Views: 13,248

Keywords: registration and login form in php and mysql, login, form, login form, html, web development, login page, login and signup form, php, mysql, xampp, localhost, login and registration form in php and mysql, login register php mysql, php mysql login and registration, php mysql login and registration system, registration form in php and mysql, register login and logout user php mysql, php and mysql login and registration form, user registration system using php and mysql database

Id: 33stYi03hAs

Length: 48min 41sec (2921 seconds)

Published: Sun Nov 19 2023