How to make Login Form using PHP MySQL | Xampp

hey guys welcome to my channel so today I'm going to show you how to create a very simple login form using PHP and MySQL which will run on Sam's server so let's start at first go to C drive and then go inside Zam folder and they're inside hddocs folder and then create a folder let me keep the name as PHP login yeah that's it and now go inside this folder and this folder inside this folder we will store all our PHP file okay so this is our vs code so now first create a file name index.php so in this file index.php we will create the login form like we will create the front end using HTML so let's start creating the front end at first so this is the HTML code snippet and then let's create a form D let's give the div ID as form let's give a heading named login form and now let's start creating the form the form name will be form then uh action okay form name will be formed then method will be post and that's it close the form tag okay so now our user label username decide this label we will enter our username okay the input field for the username type will be text ID will be user name Will let me give the name also as user and then close this input tag we want the next uh okay next we want the password label let us keep the label password s then let us keep the input field for password I will copy from the user and then paste and in place of text type password and in place of ID let me give as pass the name will also be pass and that's it so go to Zam control panel and start Apache server and then start MySQL server go to the Chrome browser type localhost and remember the folder we have used let me check the folder once the folder name is PHP login and inside PHP login we have index.php so we have to give similar name PHP login and inside it index dot PHP enter and as you can see this is our login form but we don't want the username and password side by side we want the password field to be below the username so let us give a beer tag to foreign let me give two br AG save it and then refresh and yeah it is on the next line let me add the button also input type a submit button we want ID let me give it as BTN value will be login this value will be shown in the browser in inside the button okay that's why we are giving the value as login and L will be Capital it will look good and let the name be submit it's a submit button foreign let me check once and yeah this login button is appearing beside it again I have to give to be a tag to make it go to next line let me check it now yeah it is as far I wanted so let's now create a new CSS file Style dot CSS and let me include the CSS file in index.html below this title tag let me add link real equals to style sheet and type will be text CSS and href means the location will be style dot CSS because because style.css is the file where we will write our CSS okay it's all right let's run it once to make sure that there is no error yeah so now go to the style.css and let us give some styling to it at first I want to give a body background color so body background color and let me choose this blue violet and save let's see the output quickly and yeah next we want to edit the form so as if you remember I have given this ID form so I will use this ID to style the form #form then let me give a background color quickly background color I want white to be the background color of the form and then I want the weed of the form to be 25 percent and then I want uh a little bit of margin not a little bit I want margin to be from all the sides 120 pixel Auto so that it comes in the middle let me check once yeah it is in the middle now I want some padding padding uh let me give it 50 pixel and let me check it once yeah now it is looking good and then let me give some box shadow not sizing let me give some box shadow 10px 10 PX and then 5 pixel RGB 82 let me see how it's looking yeah it is looking good border radius will be 4 pixel so yeah now it is looking good let me make it five or let me make it six Excel it's looking good now now let's style the login button let me see what is the ID of the login button it's BTN so #btn let me give color the color of the text inside the button will be white okay and I want the background color of the button to be again blue violet no not blue violet yeah let me keep it blue violet and let's see how it's looking yeah it's looking nice I want it a bit darker than the background of this screen yeah now the color is all right I want some padding inside the button so padding will be 10 PX and then I want the font size to be large then I want the Border radius to be 10 pixel and yeah now let's see the output yeah the button is looking cool right now yeah the button is looking good now let's see whether it is responsive or not let's just check it once I know this is not the part of this video but why not make it responsive if we can okay so let me say it once okay so below with 900 it is not responsive so let me make it responsive a bit at media screen and Max with let me give it okay 700 pixel the max width will be 700 pixel and let me set the parameters for the form below 700 pixel with the width of the phone will be 65 percent let me give it 65 percent and the let me reduce the padding 40 pixel let's see how it is looking so yeah when it is of the full width it is like this and as I decrease it yeah now it is all right even below 700 pixel width it is also looking correct it is looking good up to this yes so now let's move on to the connection path now we will connect this PHP file with the xam server okay so for that first go to your Sam control panel and start the Apache server and MySQL server then go to your browser and type localhost phpmyadmin and as you can see this is our phpmyadmin dashboard so here we will create a database so I already have a database named database one so I am not creating any new database but I have to create a new table so let me name the table as login and let me keep the number of columns as 2 because we only need the username and password columns so the First Column will be username and the second column will be password and the type will be very care for username and password also and let me keep the length as 30 and 30. and yes so that's it now click on Save so this is my table login now insert some values for logging in so let me give my name as the username my name is registry and I am giving the name as username and let me give the password as admin admin then click on go and now we have inserted our username and password so at a time of logging in we will use this username and password to login now let me create a new file for creating the connection let me give the name as connection dot PHP server name is localhost and then username is root in my case I have given the username as root to my database username to my Zam server you should give the username which you have given for your xam server at the time of installation my password is also root and now I have to give the database name which I have created let me see what is my database name it is database one as you can see so I have to give it database one and yeah everything is all right dollar con equals to new MySQL I and inside it we will give at first the server name and then the username and then the password and at last the database name and I have to explicitly mention the port number because I have changed it from 3306 to 3307 if you have not changed you don't need to do it but in case you are facing an error please mention the port number like me as 3307 or if you have the port as 3306 by default then give that port number here foreign the connection is not correct like if we get a connect error then what we have to do we will give a message using the function die so this die function prints a message and exits the current script Okay so we will give the messages connection failed dot dollar con connect error else on we don't have to give else if there is no connection at all then it will automatically go outside if and it will Echo a message as connection successful okay let me check it once yes [Music] everything is right okay no we have okay so we have not given the dollar sign here let me give the dollar sign and Save now we have to include this connection file in the index.php file so what I have to do is in the index.php file before the HTML begins we have to add this PHP snippet okay inside this PHP snippet we have to include the connection file so include connection dot PHP okay so now let's check it once whether everything is right or not yeah as you can see connection successful is appearing here but we don't want this message to appear here so instead of connection successful we will just give empty codes okay just don't print anything in case the connection is successful so yeah nothing is shown here but the connection is successful as we have seen earlier now now it's the time to create the login form to create the login logic we have to create a separate file and I will give the name as login dot PHP inside this login.php I will give the logic to log in to this website okay so at first inside this login dot PHP I have to include the connection file because without connection nothing will happen in phpmysql so at first I have to create the connection so include connection dot PHP and it's all right now we have to extract the username and password values from the form and the form is present in index.php now I need to add the attribute action equals to login dot PHP so that when I will click on the submit button it will redirect us to this login.php page Okay so up to this everything is correct so now let's check it once in the browser whether there is any mistake or not yeah no error is showing so it's all right now straight up go to the login.php now let us extract the username username equals to dollar post because we are using the method post so we will be extracting the username through that and the name of this field username was given as users so I am giving user inside this single quotes and the next line password we will extract it similarly this was the name given to the password field and yes don't forget to enclose it within if is set function otherwise it will show some error is set donor post submit we are using this because only if we click on the submit button then only it will redirect us to this login logic so it is very essential to use this set function or else it will show an error in the output screen now let's just check once whether anything wrong okay so nothing wrong is there so now let me create the query so what is the logic behind the login so whatever username and password the user will enter we will check whether that username and password is present in the database table or not if at least one row is present in a database table you having that username and password then login should be successful so dollar rescue equals to select star from login because our table name is login where username will be dollar username as per entered by the user pass and password will be dollar password okay I think this should be correct dollar SQL is equal to select star from login where username equals to username and password equals to password let me check once yeah it's correct now we will store the result after fetching the rows and we will store it in this result variable foreign query my s q l i query and within that we will give the connection object and the SQL query now we need to store the result as an array so dollar row mysqli fetch array and give the parameter result where the result is stored my SQL lie asok and then we will see the count of the rows how many rows it has returned we will store it in the count again mysqli num rows dollar result okay so let me check once whether there is any error or not no error is there until now okay no error is there so now the main logic comes if count don't forget to give the dollar before count if count equal to 1 then what I have to do if count equal equal to 1 I will redirect it to my welcome page so location will be welcome dot PHP okay location will be welcome.php is what I will do is I will give an alert message for that I have to give eco and within that I have to write my script window Dot location Dot href oh no no not dot h riff equals to index dot PHP if the username and password is wrong then we will redirect it again to the index.php containing the login form so for that this script and also I will show a message in the alert I will show an alert message in the form of login failed invalid username or password bracket close and I have to end the script tag and then in the codes semicolon and that's it let me see whether there is any error or not let me give three exclamation marks in the alert message save so now let's create a new file as welcome.php and yeah this is the welcome.php and we will show a message within H1 tag as a log in login successful now check it once reflection refreshing the browser and then reduce three admin as the password login and yay login successful so our login is successful but what if I give a wrong username and password uh username I am giving registry and password I am giving one to three because this is the wrong password so what I am seeing I'm seeing nothing there is an error now so what is the error let's see let's I have given the wrong quotes instead of the single quotes I had given some other quote okay no problem I'm correcting it now let's check it once and I have not given any username and password clicking on login I am getting this message login failed invalid username or password on clicking on OK it is redirecting me again to the login page means the index.php page containing the login form so yeah this is how you create your login form using PHP and MySQL now in place of username and password I want it to show a alert message if I keep this empty if I give an empty username or empty password then I want it to show a message to me for doing that again go back to the index.php I want to validate this form so when I will click on this form a function will run so on submit I want to return this function is valid so it will check in the front end only whether I have kept the username or password field empty or not so if I give the username and password filled empty then it should be invalid right so we don't need uh to go to the login logic at all we can check it in the front end only so I have given this function is valid for that I have to write a script so go below this leaf and open the script tag close the script tag I have this habit of closing tags when I open it so now Define this function is valid where user user equals to document Dot form since the ID is form document.form name is for document.form dot user name given to this username input field is user so I am giving user dot value I'm extracting the value and similarly for password also I am copying and pasting this to save time pass document.form DOT pass DOT value and now I will check if user Dot length equal to equal to empty empty double quotes and pass DOT length double equal to empty codes then it will show an alert message username password field is empty and return false I will return false so the login logic will not get triggered that's it let me correct the indentation and all and then if else if let me copy this and paste here if user dot length is nothing then only username field is empty so username is empty and close the bracket right here again we will copy and paste this if pass DOT length is empty length of password is empty then password is empty and again we will return false so that the login logic does not get triggered so let's check it once is it working correctly or not so now as you can see I have not given any username or password I am clicking on login and alert message shows username and password field is empty now I am giving the username as registry and keeping the password empty login password field is empty and now I am keeping the username empty and I am giving something in the password field then click login okay username is empty so yeah as you can see our login form is ready we have validated and we have authenticated it as well so this is your login form using phpmysql and HTML CSS and JavaScript also so if you have liked this video subscribe to my channel and share it with your friends and family so that they can also get help from if if they want also comment down below if you have any doubts or not yeah that's it thanks for watching my video have a nice day

Channel: Tech Coffee Break

Views: 66,744

Keywords: login, form, php, mysql, xampp, localhost, server, login form, html, css, javascript, web development, backend, development

Id: hQPBeS4xlxg

Length: 36min 27sec (2187 seconds)

Published: Mon Sep 19 2022