Ask Question

Menu

Login and Signup form using PHP and MySQL with validation


In this example we will discuss how to create a login and signup form using PHP and MySQL database.

For any kind of web application login, signup is the most important thing for security reason. If we not have a login features in our web application then any one can access our data and services.

Here in this login and signup form example we using 5 files these are:

database.php

<?php
$url='127.0.0.1:3306';
$username='root';
$password='';
$conn=mysqli_connect($url,$username,$password,"crud");
if(!$conn){
die('Could not Connect My Sql:' .mysql_error());
}
?>

signup.php

<!DOCTYPE HTML>
<html>
<head>
<title>New user signup </title>
<script language="javascript">
function check()
{
if(document.form1.lid.value=="")
{
alert("Plese Enter Login Id");
document.form1.lid.focus();
return false;
}
if(document.form1.pass.value=="")
{
alert("Plese Enter Your Password");
document.form1.pass.focus();
return false;
}
if(document.form1.cpass.value=="")
{
alert("Plese Enter Confirm Password");
document.form1.cpass.focus();
return false;
}
if(document.form1.pass.value!=document.form1.cpass.value)
{
alert("Confirm Password does not matched");
document.form1.cpass.focus();
return false;
}
if(document.form1.name.value=="")
{
alert("Plese Enter Your Name");
document.form1.name.focus();
return false;
}
if(document.form1.address.value=="")
{
alert("Plese Enter Address");
document.form1.address.focus();
return false;
}
if(document.form1.city.value=="")
{
alert("Plese Enter City Name");
document.form1.city.focus();
return false;
}
if(document.form1.phone.value=="")
{
alert("Plese Enter Contact No");
document.form1.phone.focus();
return false;
}
if(document.form1.email.value=="")
{
alert("Plese Enter your Email Address");
document.form1.email.focus();
return false;
}
e=document.form1.email.value;
f1=e.indexOf('@');
f2=e.indexOf('@',f1+1);
e1=e.indexOf('.');
e2=e.indexOf('.',e1+1);
n=e.length;
if(!(f1>0 && f2==-1 && e1>0 && e2==-1 && f1!=e1+1 && e1!=f1+1 && f1!=n-1 && e1!=n-1))
{
alert("Please Enter valid Email");
document.form1.email.focus();
return false;
}
return true;
}
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<div class="floating-box">
<form name="form1" method="post" action="signupuser.php" onSubmit="return check();" >
<label for=""pwd"> User Id</label>
<input type="text" id="name" name="user_id"><br><br>
<label for=""pwd">Password</label>
<input type="password" id="login" name="login"><br><br>
<label for=""pwd"> Confirm   </label>
<input type="password" id="pass" name="pass"><br><br>
<label for="uname">Name</label>
<input type="text" id="name" name="name"><br><br>
<label for="uname">Email id</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit" name="submit" value="Signup">
<p>Already Register <a href="index.php"Login here></a></p>
</form>
</div>
</center>
</body>
</html>

signupuser.php

<!DOCTYPE HTML>
<html>
<head>
<title>User Signup</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="quiz.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
extract($_POST);
include("database.php");
$rs=mysqli_query($conn,"select * from user where login='$user_id'");
if (mysqli_num_rows($rs)>0)
{
echo "<br><br><br><div class=head1>Login Id Already Exists</div>";
exit;
}
$query="insert into user(user_id,login,pass,name,email) values('$user_id','$login','$pass','$name','$email')";
$rs=mysqli_query($conn,$query)or die("Could Not Perform the Query");
echo "<br><br><br><div class=head1>Your Login ID $user_id Created Sucessfully</div>";
echo "<br><div class=head1>Please Login using your Login ID to take Quiz</div>";
echo "<br><div class=head1><a href=index.php>Login</a></div>";
?>
</body>
</html>

login.php

<?php
include("database.php");
extract($_POST);
if(isset($submit))
{
$rs=mysqli_query($conn,"select * from user where user_id='$user_id' and pass='$pass'");
if(mysqli_num_rows($rs)<1)
{
$found="N";
}
else
{
$_SESSION["login"]=$user_id;
}
}
if (isset($_SESSION["login"]))
{
echo "<h1 align=center>Hye you are sucessfully login!!!</h1>";
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<div class="floating-box">
<form name="form1" method="post">
<label for="uname">User Name</label>
<input type="text" id="loginid2" name="user_id"><br><br>
<label for="pwd">Password</label>
<input type="password" id="pass2" name="pass"><br><br>
<input name="submit" type="submit" id="submit" value="Login"><br>
<p>New User <a href="signup.php">Register Here</a></p>
<?php if(isset($found))
{
echo '<p class="w3-center w3-text-red">Invalid user id or password<br><a href="index.php">Please try again</p>';
}
?>
</center>
</form>
</div>
<center>
</body>
</html>

style.css

input[type=text],select {
     width: 40%;
     padding: 12px 20px;
     margin: 8px 0;
     display: inline-block;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
}
input[type=password], select {
     width: 40%;
     padding: 12px 20px;
     margin: 8px 0;
     display: inline-block;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
}

input[type=submit] {
     width: 40%;
     background-color: #4CAF50;
     color: white;
     padding: 14px 20px;
     margin: 8px 0;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     align:center;
}
div {
     border-radius: 5px;
     background-color: #f2f2f2;
     padding: 30px;
}

.floating-box {
     display: inline-block;
     width: 500px;
     height: 500px;
     margin: 2px;
}



Share with Friends





Subscribe