If you are looking for something new login form style so in this post we will discussing on how can we use Bootstrap Modal for making login page in php script with Ajax Jquery. We have already developed login script with simple php code on single page. But here we will use Bootstrap Modal for developing login form. Bootstrap Modal modal is a dialog box or popup window that will be displayed on top of the web page. In web development many web site use this type of login system for their web application access. When we have click on any link or button then after Modal window will be pop up on web page and under that dialog box we will put login page so we can enter their username and password and they can access web page. First we have create Bootstrap modal by using Bootstrap css and javascript and under this modal we have create login form, after this we have create one button when we have click on that button then modal has been popup on screen with login form and when we have fill login form and click on login button then it send request to jquery code and that jquery send request to php script via ajax request and in php script we have validate user data and send back request to ajax function. This way we can login into system and by using session variable we can display username on the page if user is logged into the system and for logout we have also use ajax jquery code.
Source Code
index.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Make Login Form by Using Bootstrap Modal with PHP Ajax Jquery</title>
<script src="jquery.js"></script>
<link rel="stylesheet" href="bootstrap.css" />
<script src="bootstrap.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 align="center">Make Login Form by Using Bootstrap Modal with PHP Ajax Jquery</h3><br />
<br />
<br />
<br />
<br />
<br />
<?php
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">
<button type="button" name="login" id="login" class="btn btn-success" data-toggle="modal" data-target="#loginModal">Login</button>
</div>
<?php
}
?>
</div>
<br />
</body>
</html>
<div id="loginModal" class="modal fade" role="dialog">
<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">Login</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>
action.php
<?php
session_start();
$connect = mysqli_connect("localhost", "root", "", "testing");
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 'Yes';
}
else
{
echo 'No';
}
}
if(isset($_POST["action"]))
{
unset($_SESSION["username"]);
}
?>
admin_login
--
-- Table structure for table `admin_login`
--
CREATE TABLE IF NOT EXISTS `admin_login` (
`admin_id` int(11) NOT NULL AUTO_INCREMENT,
`admin_name` varchar(250) NOT NULL,
`admin_password` varchar(250) NOT NULL,
PRIMARY KEY (`admin_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
--
-- Dumping data for table `admin_login`
--
INSERT INTO `admin_login` (`admin_id`, `admin_name`, `admin_password`) VALUES
(1, 'admin', 'admin');
Sir can you explain how to get from data api to insert in database in codegniter
ReplyDeletemuchas gracias me sirvio mucho Dios te bendiga
ReplyDeletegracias
ReplyDeleteSir
ReplyDeleteit will be my one of the best precious gift
if you help me to learn more.
sir, please don't feel disturb if i ask you any query for more clarification of mine.
thanks a lot , sir