The HTML Code:
<title>Login Page in PHP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col">
</div>
<div class="col-lg-5">
<form action="" method="post">
<div class="bg-primary p-5 rounded-lg mb-3 mt-3">
<h1 class="text-light">Login Form</h1>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" name="user" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" name="pass" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-check d-md-flex justify-content-md-end mb-3">
<input class="form-check-input" onclick="showPass()" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label px-2" for="flexCheckDefault">
Show Password
</label>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="submit" name="login">Login</button>
<button class="btn btn-primary" type="submit" name="register">Register</button>
</div>
</div>
</form>
<div class="col">
</div>
</div>
</div>
The PHP Code:
<?php
$conntmysql=mysqli_connect('localhost','root','admin','phplogin');
if($conntmysql){
echo('connection');
}else{
echo('error');
}
if(isset($_POST['login'])){
$user=$_POST['user'];
$pass=$_POST['pass'];
$query="SELECT * FROM phplogin where username=? AND password=?";
$stmt=mysqli_prepare($conntmysql, $query);
mysqli_stmt_bind_param($stmt, 'ss', $user, $pass);
mysqli_stmt_execute(($stmt));
$result=mysqli_stmt_get_result($stmt);
if(mysqli_fetch_assoc($result)>0){
echo"<script type='text/javascript'>alert('Login Success')</script>";
}else{
echo"<script type='text/javascript'>alert('Login error')</script>";
}
}
if(isset($_POST['register'])){
header("location: https://www.runcodes.tech");
}
?>
The Javascript Code:
<script>
function showPass(){
const showpass=document.getElementById('floatingPassword')
if(showpass.type==='password'){
showpass.type='text'
}else{
showpass.type='password'
}
}
</script>
More: