How to login Using PHP mysql and Change Background Login Using JavaScript

How to login Using PHP mysql and Change Background Login Using JavaScript

Soeng Souy
How to login Using PHP MySQL and Change Background Login Using JavaScript 

 
Greate Database
CREATE TABLE `tbl_admin` (
`id` int(6) NOT NULL,
`admin_user_name` varchar(100) NOT NULL,
`admin_password` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

 Insert Database
NSERT INTO `tbl_admin` (`id`, `admin_user_name`, `admin_password`) VALUES
(1, 'admin', '$2y$10$D74Zy1qMkATvmGRoVeq7hed4ajWof2aqDGnEaD3yPHABA.p.e7f4u');

 check_admin_login.php
<?php
//check_admin_login.php
include('database_connection.php');
session_start();
sleep(1);
$admin_user_name = '';
$admin_password = '';
$error_admin_user_name = '';
$error_admin_password = '';
$error = 0;
if(empty($_POST["admin_user_name"]))
{
    $error_admin_user_name = 'Username is required';
    $error++;
}
else
{
    $admin_user_name = $_POST["admin_user_name"];
}
if(empty($_POST["admin_password"]))
{
    $error_admin_password = 'Password is required';
    $error++;
}
else
{
    $admin_password = $_POST["admin_password"];
}
if($error == 0)
{
    $query = "
    SELECT * FROM tbl_admin
    WHERE admin_user_name = '".$admin_user_name."'
    ";
    $statement = $connect->prepare($query);
    if($statement->execute())
    {
        $total_row = $statement->rowCount();
        if($total_row > 0)
        {
            $result = $statement->fetchAll();
            foreach($result as $row)
            {
                if(password_verify($admin_password, $row["admin_password"]))
                {
                    $_SESSION["id"] = $row["id"];
                }
                else
                {
                    $error_admin_password = "Wrong Password";
                    $error++;
                }
            }
        }
        else
        {
            $error_admin_user_name = 'Wrong Username';
            $error++;
        }
    }
}
if($error > 0)
{
    $output = array(
        'error'                 =>  true,
        'error_admin_user_name' =>  $error_admin_user_name,
        'error_admin_password'  =>  $error_admin_password
    );
}
else
{
    $output = array(
        'success'       =>  true
    );  
}
echo json_encode($output);
?>

 database_connection.php
<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost;dbname=login_database","root","");
$base_url = "http://localhost:/Login_Using_PHP/";
?>

 index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Main Dashbord</title>
<a href="logout.php" class="list-group-item active waves-effect">
<p style="text-align:center;">
<i class="fas fa-chart-pie mr-3"></i>Logout </a>
<h2 style="text-align:center;">WellCome To Cambodia</h2>
<script>
// Function to change webpage background color
function changeBodyBg(color){
document.body.style.background = color;
}
// Function to change heading background color
function changeHeadingBg(color){
document.getElementById("heading").style.background = color;
}
</script>
<div style="text-align: center;">
<h6>Change Color Background</h6>
<button type="button" onclick="changeBodyBg('yellow');"style="font-size:10px;">Yellow</button>
<button type="button" onclick="changeBodyBg('lime');" style="font-size:10px;">Lime</button>
<button type="button" onclick="changeBodyBg('orange');" style="font-size:10px;">Orange</button>
<button type="button" onclick="changeBodyBg('red');" style="font-size:10px;">Red</button>
<button type="button" onclick="changeBodyBg('black');" style="font-size:10px;">Black</button>
<button type="button" onclick="changeBodyBg('brown');" style="font-size:10px;">Brown</button>
<button type="button" onclick="changeBodyBg('gray');" style="font-size:10px;">Gray</button>
<button type="button" onclick="changeBodyBg('pink');" style="font-size:10px;">Pink</button>
<button type="button" onclick="changeBodyBg('purple');" style="font-size:10px;">Purple</button>
<button type="button" onclick="changeBodyBg('blue');" style="font-size:10px;">Blue</button>
<button type="button" onclick="changeBodyBg('green');" style="font-size:10px;">Green</button>
<button type="button" onclick="changeBodyBg('white');" style="font-size:10px;">White</button>
<button type="button" onclick="changeBodyBg('violet');" style="font-size:10px;">Violet</button>
</div>
</p>
</head>
<body>
</body>
</html>

 login.php
<?php
//login.php
include('database_connection.php');
session_start();
if(isset($_SESSION["id"]))
{
header('location:index.php');
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css'
integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<style>
body {
background-image: url("background.png");
background-repeat: no-repeat;
}
</style>
<div class="header pt-3" style="margin-top:5%;">
<div class="row d-flex justify-content-center">
<h2 class="white-text mb-3 pt-3 font-weight-bold">Log in</h2>
</div>
<div class="row mt-2 mb-3 d-flex justify-content-center">
<!--YouTobe -->
<a class="fa-lg p-2 m-2 gplus-ic"><i class="fab fa-youtube red-text fa-lg"> </i></a>
<!--Facebook-->
<a class="fa-lg p-2 m-2 fb-ic"><i class="fab fa-facebook-f blue-text fa-lg"> </i></a>
<!--Twitter-->
<a class="fa-lg p-2 m-2 tw-ic"><i class="fab fa-twitter blue-text fa-lg"> </i></a>
<!--Google +-->
<a class="fa-lg p-2 m-2 gplus-ic"><i class="fab fa-google-plus-g red-text fa-lg"> </i></a>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4" style="margin-top:20px;">
<div class="card">
<div class="card-header" style="text-align: center;" >Login</div>
<div class="card-body">
<form method="post" id="admin_login_form">
<div class="form-group">
<label>Enter Username</label>
<input type="text" name="admin_user_name" id="admin_user_name" class="form-control" />
<span id="error_admin_user_name" class="text-danger"></span>
</div>
<div class="form-group">
<label>Enter Password</label>
<input type="password" name="admin_password" id="admin_password" class="form-control" />
<span id="error_admin_password" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" name="admin_login" id="admin_login" class="btn btn-info" value="Login"/>
</div>
</form>
<script>
// Function to change webpage background color
function changeBodyBg(color){
document.body.style.background = color;
}
// Function to change heading background color
function changeHeadingBg(color){
document.getElementById("heading").style.background = color;
}
</script>
<div style="text-align: center;">
<h6>Change Color Background</h6>
<button type="button" onclick="changeBodyBg('yellow');"style="font-size:10px;">Yellow</button>
<button type="button" onclick="changeBodyBg('lime');" style="font-size:10px;">Lime</button>
<button type="button" onclick="changeBodyBg('orange');" style="font-size:10px;">Orange</button>
<button type="button" onclick="changeBodyBg('red');" style="font-size:10px;">Red</button>
<button type="button" onclick="changeBodyBg('black');" style="font-size:10px;">Black</button>
<button type="button" onclick="changeBodyBg('brown');" style="font-size:10px;">Brown</button>
<button type="button" onclick="changeBodyBg('gray');" style="font-size:10px;">Gray</button>
<button type="button" onclick="changeBodyBg('pink');" style="font-size:10px;">Pink</button>
<button type="button" onclick="changeBodyBg('purple');" style="font-size:10px;">Purple</button>
<button type="button" onclick="changeBodyBg('blue');" style="font-size:10px;">Blue</button>
<button type="button" onclick="changeBodyBg('green');" style="font-size:10px;">Green</button>
<button type="button" onclick="changeBodyBg('white');" style="font-size:10px;">White</button>
<button type="button" onclick="changeBodyBg('violet');" style="font-size:10px;">Violet</button>
</div>
<br>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#admin_login_form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"check_admin_login.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function(){
$('#admin_login').val('Validate...');
$('#admin_login').attr('disabled', 'disabled');
},
success:function(data)
{
if(data.success)
{
location.href = "<?php echo $base_url; ?>";
}
if(data.error)
{
$('#admin_login').val('Login');
$('#admin_login').attr('disabled', false);
if(data.error_admin_user_name != '')
{
$('#error_admin_user_name').text(data.error_admin_user_name);
}
else
{
$('#error_admin_user_name').text('');
}
if(data.error_admin_password != '')
{
$('#error_admin_password').text(data.error_admin_password);
}
else
{
$('#error_admin_password').text('');
}
}
}
});
});
});
</script>

 logout.php
<?php
//logout.php
session_start();
session_destroy();
header('location:login.php');
?>
Reactions
Soeng Souy

Posted by Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

0 Comments

CAN FEEDBACK

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)
close