--
-- Table structure for table `admin_login`
--
CREATE TABLE `admin_login` (
`admin_id` int(11) NOT NULL,
`admin_name` varchar(250) NOT NULL,
`admin_password` varchar(250) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `admin_login`
--
INSERT INTO `admin_login` (`admin_id`, `admin_name`, `admin_password`) VALUES
(1, 'admin', 'admin');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `admin_login`
--
ALTER TABLE `admin_login`
ADD PRIMARY KEY (`admin_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `admin_login`
--
ALTER TABLE `admin_login`
MODIFY `admin_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
//index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP Mysqli Login Form Using Bootstrap Modal with Ajax Jquery</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 align="center">PHP Mysqli Login Form Using Bootstrap Modal with Ajax Jquery</h3><br />
<br />
<br />
<br />
<br />
<br />
<?php
session_start();
if(isset($_SESSION['username']))
{
?>
<div align="center">
<h1>Welcome - <?php echo $_SESSION['username']; ?></h1><br />
<a href="#" id="logout">Logout</a>
</div>
<?php
}
else
{
?>
<div align="center">
<a data-target="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Login</a>
</div>
<?php
}
?>
</div>
<br />
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">PHP Mysqli Login Form Using Bootstrap Modal with Ajax Jquery</h4>
</div>
<div class="modal-body">
<label>Username</label>
<input type="text" name="username" id="username" class="form-control" />
<br />
<label>Password</label>
<input type="password" name="password" id="password" class="form-control" />
<br />
<button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#login_button').click(function(){
var username = $('#username').val();
var password = $('#password').val();
if(username != '' && password != '')
{
$.ajax({
url:"action.php",
method:"POST",
data: {username:username, password:password},
success:function(data)
{
//alert(data);
if(data == 'No')
{
alert("Wrong Data");
}
else
{
$('#loginModal').hide();
location.reload();
}
}
});
}
else
{
alert("Both Fields are required");
}
});
$('#logout').click(function(){
var action = "logout";
$.ajax({
url:"action.php",
method:"POST",
data:{action:action},
success:function()
{
location.reload();
}
});
});
});
</script>
</body>
</html>
action.php
//action.php
<?php
session_start();
$connect = mysqli_connect("localhost", "root", "", "testingdb");
if(isset($_POST["username"]))
{
$query = "
SELECT * FROM admin_login
WHERE admin_name = '".$_POST["username"]."'
AND admin_password = '".$_POST["password"]."'
";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
$_SESSION['username'] = $_POST['username'];
echo 'Success';
}
else
{
echo 'No';
}
}
if(isset($_POST["action"]))
{
unset($_SESSION["username"]);
}
?>
