In this tutorial, you are going to learn how to make a website using HTML & CSS and add some functionality to a saved user input into our local server, so be sure to watch the complete series of videos and start building your awesome website today.
Download the Complete file here: #Mirror1,#Mirror2
Hey guys welcome back to this tutorial uh with programming in the previous video we saw how we can write a code in a PHP file and use it to check to validate the user's input and forward it to our database table so so if you watch my previous video you will finally, know you will know how to put input field so we can use it to validate user's input and forward the data into our database table so it teaches us uh let me just show you uh what we have done in the previous tutorial so if you are just new uh be sure to subscribe be sure to watch the previous video so okay so as you can see here in my user's table so we successfully inserted the data into our database table so within this uh tutorial we will learn how we can create a locking form and validate and check whether the username exists into our table
then if we can find the user's data in the table then we will get them, okay so so this is what we have done in the previous video now we need to go to our file explorer and we need to go to our it htdocs so we need to go to our file then we need to copy or okay so we need to go to our hip master light, sorry so we need to go to our laser light and uh we need to go to the htdocs it's and we need to find demo we need to open and click save as we rename it to login that page speech then we need to do the registered user we need to save us to log in user so login user CSS we need to open again the save that PHP and save it plus select and save and name it plugin save so that okay now in the login PHP we need to edit so in the login we only need username and password so we need to delete or to modify some elements or attributes in the page or in the documents so we need to remove the confirm password
we don't need this one so we need to remove then we need to remove this email so we don't need this aiming for lagging form now we need to remove this space set we don't need this speed set uh we can only we can use the phone so we can only use the form and we need to transfer this one this form tag
we need to transfer it so because the form is the root element table maybe if you have watched the previous video so I made a mistake putting this form inside of a table this should have come first because this is the road element we also need to go to our registered pit speed and we will uh move this form tag above the table so we need to put right here paste we also need to move this one the closing tag the form cut and put it here so we need to paste it here so now let's go back to our lightning PHP now remove some space then what we need to do will be this one instead of creating the value should be login then so everybody should be logged in then this one will be registered as that of the file so this one so whenever the users click this anchor tags it will go to the register PHP this one will be so now what we need to do you just click save and if we try to look at the like in PHP so okay so we need to
modify we need to repair it to the login user.css so the stylesheet so we need to change this password to like here plug in user that sees this if we try to open it back again so here in this one, we will then build so okay really splits it because we will not use the build set
okay so you have the lucky news and the table will be so the pawn we need to change the form change this to one and that if one so if we go to the log in PHP speed so we need to go to login.php plus one action will be log in save again save that PHP let's put it up our plug-in segment like in cut and we need to post okay so it was making sure that you have done it right so okay click save if one username is for username and password so submit and pull click save and let's try to view so we have now the username and password so what we need to do will be to change this so whenever we click we go to create so try to change pin your login and PHP I will say create
okay great so now so what do we need to save try to view it in our browser so just go to my browser
and I need to go to our web demo project so this one will be computed login.php and it is not being simpler so it is not being centered so we need to move the form so let me just go to this CSS so login user CSS need to go to the form but first let us just debug you can debug the form so outline solid green 2px for the form so now refresh so you can see that this is the phone and so we need to resize the form
okay so let me just remove the dimension of the form so let me just remove so I just remove I mentioned perform I need to replace so you can see that we can see that the bomb is covering the whole bit of the screen so we need to put value I need to undo so but we need to put margin so okay let me just remove the background so we can see the table and we can see the form okay so that builds it remove the build set already so let's click save and replace the browser so you can see that our table is not centered or the form so what we need to do we need to first put a margin to our to move the form so we need to put margin and I say auto so let's try if we can put it to the center so we need to repress so you can see that our form was at the center but we need to move down the form so we need to put margin in the top so we need to put margin top so margin tab so margin top will be equal to five percent need to click save
we need to repress okay so the form is not moving so later we need to remove this one instead of the photo so we need to manually put a margin so we see that move a little bit down so let's add another one let's make it thin now we need to refresh so we see it's moving it make it 50 so you can see that it's really going down so this one's really good down so now we need to mark it to put a margin
margin-left equal to 45 percent let's try 45 so boom it's really good to be the right so you need to decrease the margin, uh let's see the property and save so we can see okay let's make it up just decrease the margin so 36 I guess so now I need to refresh the browser or we need to uh 35 35 34 so 1934 refs I think that looks like in the center so we need to 33 something like that so we need to change okay so now what we need to do so we need to move the table a little bit down so we need to put margin-top
maybe equal to 65 percent semicolon so we need to repress the page okay let's add a little uh additional value so let's make it 10 percent yeah let's make it to 30 let's make let's repress the page so let's make it 25 25 and refresh the page so it seems like it's good so all right just copy this one copy and put it on the form then I need to change the name of the image and release this image
just this image copy the whole name copy it back and we need to remove this one and we need to face
okay save now for the table we'll remove the comment click save so we can see how our table will look like so we need to refresh boom so we have a nice login form or we can just remove the form or we can just remove the background of the table or we can resize the so let me just assign this size the form the same, okay so we just put so the size of the form is okay so if we will okay so it's either we will uh decrease the column so let's make it 150 and 150 so we can see that the form will be decreasing
okay make it 250 instead now we need to depress I think what we need to do is we can move the margin so I think we can move the margin of the table so it's a reporting margin just for two more into five percent let's try refresh so we can move the okay just change this one to 50 so you can see okay so let me put 200 instead of 250 form so okay like that then the margin let's decrease the margin of the table you see two percent okay so that's it so we have now the login um now if we click create so it will go to the create page now we quickly create if we click login so we should go to the login page so we are heading to the login but the login need margin to the left so 35
so now I press so let me put 37 so okay so I got an upgrade login so the plugin is pay at the center so right now we cannot plug in because we did not put the PHP yet so in the next tutorial uh we will learn how we can uh code the PHP that will check whether the username already exists into our database table password so thanks for watching guys I hope you enjoyed this video and if you like this video please hit the like button subscribe to my channel and if you have some question write in the below so see you in my next tutorial bye for now.
#Home Screen Page HTML Code:
#HomeScreen Page CSS Code:
0 Comments