How To Make A Login Form With Html Php

Welcome to Webune Forums. At Webune we value our customers. Many of our customer have live websites using PHP. We get asked frequenly from customer who are staring their data-driven websites how they can make secure login forms in their websites. They want to be able to have a login form and then check the user's information submitted on a HTML form. if the username and password match, they want their users to be able to access their member's only section.

Well, today is your lucky day. Here at Webune we are going to make that happen to you and show you how its done using a simple PHP script that verifies the user's username and password against our configuration.

there are many ways to authenticate users, one of the most basics way is to authenticate users through sessions or cookies. so we are going to start with that. but as you get more advanced, you will start to learn that you can make your login authentications by using database driven authentication. its more secured and reliable but it uses more resources from your server. with that said, lets start.

fist we need to create the html to create a simple login form..

something that looks like this for example:

Username:


Password:

ok, the best way to learn is to see it in action. I am using a Windows XP computer to write this tutorial, so i will be using notepad as my text editor. so open a blank notepad.

on the blank notepad, copy and paste this PHP code:

<?php
session_start();
# DISABLE REGISTER GLOBALS IF CONFIGURED IN PHP.INI
ini_set('register_globals', false);
############################# COPYRIGHT ###################
######### This script is release under GPL/UGN Copyright Rules
######### Script by www.webune.com
######### Please do not remove this message. Thanks.
echo'
<div style="float:left;padding-left:10px;">
	<a href="http://www.webune.com">
		<img src="http://www.webune.com/images/headers/default_logo.jpg" border="0" align="Webune Logo">
	</a>
</div>
<h1 style="float:left">Login Form Example</h1>
<div style="clear:left;"></div>
<hr />';
$Warning = '<hr>
<div style="font-weight:bold; color:#FFF; font-size:18px; background-color:#F00">
	IMPORTANT: Please use this script only for learning purposes. 
	Under no circumstances use this exact code to implement on a production website. 
	This script is NOT SECURED!!! This script lacks many security rules and guidelines to implement on a live website. 
	Again, Use this script for learning purposes. 
	If you need to learn more about login and password security, visit us at www.webune.com. 
	Thank You for trying our script.
</div>';
if($_GET['logout'] == 'yes'){
	$_SESSION['ConfigUserSess'] = '';
	$_SESSION['ConfigPasswdSess'] = '';
	echo '<div style="font-weight:bold; color:#060; font-size:18px; text-align: center;" >Congratulations!!!<br><br>
	**** You Are Now Logged Out ****</div><br><br>
	Visit <a href="http://www.webune.com">Webune.com</a> For more Tutorials Like This<br><br>
	<a href="'.$_SERVER['PHP_SELF'].'">Click Here To Login Again</a>'.$Warning;
	exit;
}
#### CONFIGURE ####
# WHEN THE USER SUBMITS THE FORM. THESE VALUES MUST MATCH
$ConfigUser = 'foo';
$ConfigPasswd = 'secret';
#### STOP CONFIGURE ####
if($_SESSION['ConfigUserSess'] == $ConfigUser && $_SESSION['ConfigPasswdSess'] == $ConfigPasswd){
	# THE USER IS ALREADY LOGGED IN
	echo '<div style="font-weight:bold; color:#060; font-size:18px; text-align: center;">
		Congratulations !!! - You are already logged in. </div><br>
		<a href="'.$_SERVER['PHP_SELF'].'">Click Here To Continue</a><br><br>
		<a href="'.$_SERVER['PHP_SELF'].'?logout=yes">Click Her To Logout</a>'.$Warning;
}else{
	# FUNCTION TO DISPLAY LOGIN FORM AND ERROR MESSAGES
	function LoginForm($Errors){
		# DISPLAY ANY ERRORS IN RED COLORS
		echo '<div style="color:red;">'.$Errors.'</div>';
		?>
		<form name="form1" method="post" action="">
		<p>Username:
		<input type="text" name="LoginName"> 
		[ Enter: foo ]
		</p>
		<p>Password:
		<input type="password" name="UserPassword"> 
		[ Enter: secret ]
		</p>
		<p>
		<input type="submit" name="Login" value="Login">
		</p>
	</form>
	<?php
	}
	# CHECKS IF LOGIN FORM HAS BEEN SUBMITTED
	if(isset($_POST['Login'])){
		# CHECK IF USERNAME AND PASSWORD MATCH WITH CONFIGURATION
		if(!$_POST['LoginName'] || !$_POST['UserPassword']){
			LoginForm('ERROR: All Fields Are Required.');
		}else{
			if($_POST['LoginName'] == $ConfigUser && $_POST['UserPassword'] == $ConfigPasswd){
				# USERNAME AND PASSWORD MATCH. GIVE USER COOKIE TO LOG USERNAME AND PASSWORD
				$_SESSION['ConfigUserSess'] = $ConfigUser;
				$_SESSION['ConfigPasswdSess'] = $ConfigPasswd;
				echo $_POST['user'].'<div style="font-weight:bold; color:#060; font-size:18px; text-align: center;" >
					Congratulations !!! - IT WORKS !!! You are already logged in.</div><br>
					<a href="'.$_SERVER['PHP_SELF'].'">Click Here To Continue</a><br><br>'.$Warning;;
			}else{
				# USERNAME AND PASSWORD DO NOT MATCH. - SHOW FORM
				LoginForm('ERROR: Your Username and Password Do Not Match.<br>Try Again.<br>
						  Username: foo<br>Password: secret<br>');
			}
		}
	}else{
		# FORM HAS NOT BEEN SUBMITTED. SHOW LOGIN FORM
		LoginForm('All Fields Are Required - You are Not Logged In.');
	}
}
?>

now save the file as "login-form.php"
[NOTE: if you are also using notepad, be sure to put the quotes also when you are saving the file as.. - otherwise, notepad will save the file as login-form.php.txt and we dont want the .txt file extension]

ok, now upload login-form.php to your PHP website
[NOTE: YOU WILL NEED TO HAVE PHP ON YOUR WEBSITE FOR THIS TO WORK]

now open login-form.php with your browser on your website and see it in action. as you can see, making a login form to authenticate users can be easy. and creating this form was easy and simple for authentication.

please give us your feedback.. if you have any question or comments