Simple Login from with php ajax jquery
 |
| Simple Login from with php ajax jquery |
In this lesson we are going to learn how to create simple login form with php ajax and jquery..
follow the below examples:
=>Database name: test
=>Table name: members
SQL for Table members
CREATE TABLE IF NOT EXISTS `members` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(60) NOT NULL, `password` varchar(60) NOT NULL PRIMARY KEY(id) ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
SQL To insert Rows
INSERT INTO `members` (`id`, `username`, `password`) VALUES (1, 'ABC', '123'), (1, 'ANJAN', '112233'), (1, 'AAA', '111'), (2, 'XYZ', '1234');
FILES:
1. index.html
<html>
<head>
<title>AJAX PHP MySQL Login</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<div id="content">
<h2>PHP Ajax Login System for Beginners</h2>
<form method="POST" action="">
<table>
<tr>
<td><span>UserName:</span></td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td><span>PassWord:</span></td>
<td><input type="text" name="password" id="password"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="submit" value="LogIn Now"/></td>
</tr>
</table>
</form>
<div id="success"></div>
</div>
</html>
2. script.js
$(document).ready(function(){
$("#submit").click(function(){
var username=$("#username").val();
var password=$("#password").val();
if(username==""||password==""){
alert("Please Fill Up Both Fields");
}else{
$.ajax({
url:"login.php",
type:"POST",
data:{username:username,password:password},
success: function(data){
if(data=="success"){
alert("Login Success..Redirect to CodeNair");
window.location.href="https://codenair.com";
}
}
});
return false;
}
});
});
3. login.php
<?php
//Creating MySQL Connection
$conn=new mysqli('localhost','root','','test');
$username=mysqli_real_escape_string($conn,$_POST['username']);
$password=mysqli_real_escape_string($conn,$_POST['password']);
$result=mysqli_query($conn,"SELECT*FROM members WHERE username='$username' AND password='$password'");
$count=$result->num_rows;
if($count==1){
echo "success";
}
?>
4. style.css
#content{
width:500px;
background:#f0f0f5;
margin:auto;
height:230px;
}
span{
font-size:20px;
color:green;
font-weight:bold;
}
input[type=text]{
padding:8px;
width:250px;
border-radius:4px;
}
input[type=button]{
padding:5px 6px;
border-radius:4px;
background:black;
color:white;
border:none;
cursor:pointer;
}
That's it How to create Simple Login from with php ajax jquery.Keep visiting for more codes and please leave your comment.
Thank You..
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.