If you are visiting my channel for the first time then please subscribe
Go to my Youtube channel :
https://www.youtube.com




In PHP, you can create a login form using HTML, PHP, and MySQL to store user information. Here is an example of a login form using PHP:


1. Create a new PHP file called login.php with the following code:




<?php
function query_data($query, $key){
if (gettype($key) !== 'ray') {
if (isset($query[$key])) {
return $query[$key];
}
}
}

function html($query = ''){

$email_error_class = "";
$password_error_class = "";

if ($email_error = query_data($query, 'email')) {
$email_error = '<span class="error">' . $email_error . '</span>';
$email_error_class = ' f4NE';
}
if ($password_error = query_data($query, 'password')) {
$password_error = '<span class="error">' . $password_error . '</span>';
$password_error_class = ' f4NE';
}

return '
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta chset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
</head>

<body>
<div class="loginForm">
<div class="swith-button">
<a class="sineup">Login Form</a>
</div>
<div class="logo"><img src="https://www.abhyasedu.com/img/login.png" alt=""></div>
<div class="title">Your <span> Logo</span></div>
<form class="form" action="" method="post">
' . $email_error . '
<input name="email" type="email" class="email' . $email_error_class . '" placeholder="Email" value="' . query_data($_POST, 'email') . '" required />
' . $password_error . '
<input name="password" type="password" class="password' . $password_error_class . '" placeholder="Password" value="' . query_data($_POST, 'password') . '" required />
<div class="show-password"><span class="show"></span> Show Password</div>
<button class="submit">Login</button>
<div class="link"><a href="#">Forgot password?</a></div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>';
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
// email and password sent from form

//The name of the database for CodeWithAr
define('DB_NAME', 'test');

//MySQL database User Name
define('DB_USER', 'root');

//MySQL database password
define('DB_PASSWORD', '');

//MySQL hostname
define('DB_HOST', 'localhost');


// Create connection
$conn = new mysqli(
DB_HOST, // Databes Host
DB_USER, // Databes User Name
DB_PASSWORD, // Databes Password
DB_NAME // Databes Name
);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$email = mysqli_real_escape_string($conn, $_POST['email']);
$password = mysqli_real_escape_string($conn, $_POST['password']);

$sql = 'select * from users where email = "' . $email . '"';
$_email = $conn->query($sql);

if ($_email->num_rows > 0) {
$is_query = mysqli_fetch_assoc($_email);

$db_password = query_data($is_query, "password");
if ($db_password == $password) {
echo "Login successful";
} else {
$query['password'] = 'Rong Password';
echo html($query);
exit;
}
} else {
$query['email'] = 'Couldnt find your Account';
echo html($query);
exit;
}

$conn->close();
} else {
echo html();
}



2. Create a new css file called style.css with the following code:




* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #51b3e6;
font-family: roboto;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.loginForm {
background-color: #f7f7f7;
color: #202020;
padding: 20px 10px;
border-radius: 5px;
border: solid 2px #ffffff;
box-shadow: 2px 10px 10px 0 #0004;
}

.loginForm .swith-button {
display: block;
text-align: center;
margin-bottom: 10px;
}

.loginForm .swith-button a {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
padding: 4px;
margin-right: 5px;
font-weight: 600;
cursor: pointer;
}

.loginForm .swith-button a.active {
color: #0003ff;
border-bottom: solid 2px #0003ff;
}

.loginForm form {
width: 330px;
display: block;
overflow: hidden;
padding: 0 20px;
}

.loginForm .logo img {
width: 330px;
height: auto;
}

.loginForm .title {
display: block;
text-align: center;
font-weight: 600;
font-size: 24px;
color: #0003ff;
margin-bottom: 40px;
}

.loginForm .title span {
font-weight: 400;
color: #202020;
}


.loginForm input {
display: block;
width: 100%;
height: 40px;
padding: 0 12px;
background: #ebebeb;
outline-color: #005fa2;
border: none;
margin: 5px auto 20px;
transition: all 0.3s;
}

.loginForm input.ar {
height: 0;
margin: 0 !important;
}

.loginForm .show-password {
font-size: 13px;
display: flex;
align-items: center;
font-weight: 600;
margin-top: 30px;
}

.loginForm .show-password .show {
width: 18px;
height: 18px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: solid 2px #0003ff;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}

.loginForm .show-password .show[array="true"]::after {
content: "";
width: 10px;
height: 10px;
position: absolute;
background: #0003ff;
border-radius: 2px;
}

.loginForm .submit {
display: block;
padding: 8px 16px;
float: right;
width: auto;
border: none;
outline: none;
background: #005fa2;
color: #f7f7f7;
margin-top: 20px;
transition: all 0.3s;
}

.loginForm .submit:hover {
box-shadow: 0 4px 8px #0008;
background: #00406e;
cursor: pointer;
}

.loginForm .link {
display: block;
overflow: hidden;
width: 100%;
font-size: 12px;
margin-top: 20px;
}

.loginForm .error{
font-size: 12px;
color: #f00;
}
input.f4NE {
color: #f00;
background: #ff000026;
background: #ff000026;
outline-color: #f00;
}


3. Create a new Js file called script.js with the following code:




document.querySelector('.show').addEventListener('click', function () {
var password = document.querySelector('.password');
this.getAttribute('array') == 'true'
? (this.setAttribute('array', false), password.setAttribute('type', 'password'))
: (this.setAttribute('array', true), password.setAttribute('type', 'text'));

});



4. Create a MySQL database with a users table that stores the usernames and passwords of registered users.




5. Update the database credentials in the login.php file to connect to your database.



6. Finally, navigate to http://localhost/login.php to view the login form and test the functionapty.



This is a basic example that you can customize with your own vapdation logic and stypng. Remember to implement proper security measures to protect user data, such as hashing the passwords and vapdating user input.