Creating the Database
Create database “login” and create table “members” :
CREATE TABLE `members` ( `id` int(4) NOT NULL auto_increment, `username` varchar(65) NOT NULL default '', `password` varchar(65) NOT NULL default '', PRIMARY KEY (`id`) ); INSERT INTO `members` VALUES (1, 'fethi', '1234');
Setup the config.php
file :
<?php $host="localhost"; // Host name $username="root"; // Mysql username $password="root"; // Mysql password $db_name="login"; // Database name $tbl_name="members"; // Table name ?>
Check the Username and the Password using jQuery (Ajax) :
If the user has the right username and password, then the checklogin.php
will send ‘true’ and register username and password in the session, and redirect to login_success.php
. If the username and/or the password are wrong the checklogin.php
will send “Wrong Username or Password”.
In the login.js
file :
$(document).ready(function(){ //When the user click on the login button $("#submit").click(function(){ //Get each input value in a veriable. var username = $("#myusername").val(); var password = $("#mypassword").val(); //Check if the username and/or the password input are empty. if((username == "") || (password == "")) { $("#message").html("<div class=\"alert alert-danger alert-dismissable\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">×</button>Please enter a username and a password</div>"); } else { $.ajax({ type: "POST", url: "checklogin.php", data: "myusername="+username+"&mypassword="+password, success: function(html){ if(html=='true') { //if the return value = 'true' then redirect to 'login_success.php window.location="login_success.php"; } else { //if the return value != 'true' then add the error message to the div.#message $("#message").html(html); } }, beforeSend:function() { //loading gif $("#message").html("<p class='text-center'><img src='images/ajax-loader.gif'></p>") } }); } return false; }); }); login_success.php
?php
session_start();
if(!session_is_registered(myusername)){
header(“location:main_login.php”);
}
?><!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Login</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– Bootstrap –>
<link href=”css/bootstrap.css” rel=”stylesheet” media=”screen”>
<link href=”css/main.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<div>
<div>
<div>You have been <strong>successfully logged in</strong>.</div>
<a href=”logout.php”>Logout</a>
</div>
</div> <!– /container –>
</body>
</html>
main_login.php
<?php
session_start();
if(session_is_registered(myusername)){
header(“location:login_success.php”);
}
?><!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Login</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– Bootstrap –>
<link href=”css/bootstrap.css” rel=”stylesheet” media=”screen”>
<link href=”css/main.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<div>
<form name=”form1″ method=”post” action=”checklogin.php”>
<h2>Please sign in</h2>
<input name=”myusername” id=”myusername” type=”text” placeholder=”Username” autofocus>
<input name=”mypassword” id=”mypassword” type=”password” placeholder=”Password”>
<!– The checkbox remember me is not implemented yet…
<label>
<input type=”checkbox” value=”remember-me”> Remember me
</label>
–>
<button name=”Submit” id=”submit” type=”submit”>Sign in</button>
<div id=”message”></div>
</form>
</div> <!– /container –>
<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”//code.jquery.com/jquery.js”></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script type=”text/javascript” src=”js/bootstrap.js”></script>
<!– The AJAX login script –>
<script src=”js/login.js”></script>
</body>
</html>
checklogin.php
<?php
ob_start();
include_once ‘config.php’;
// Connect to server and select databse.
mysql_connect(“$host”, “$username”, “$password”)or die(“cannot connect”);
mysql_select_db(“$db_name”)or die(“cannot select DB”);
// Define $myusername and $mypassword
$myusername = $_POST[‘myusername’];
$mypassword = $_POST[‘mypassword’];
// To protect MySQL injection
$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
$myusername = mysql_real_escape_string($myusername);
$mypassword = mysql_real_escape_string($mypassword);
$sql=”SELECT * FROM $tbl_name WHERE username=’$myusername’ and password=’$mypassword'”;
$result=mysql_query($sql);
// Mysql_num_row is counting table row
$count=mysql_num_rows($result);
// If result matched $myusername and $mypassword, table row must be 1 row
if($count==1){
// Register $myusername, $mypassword and print “true”
echo “true”;
session_register(“myusername”);
session_register(“mypassword”);
}
else {
//return the error message
echo “<div class=\”alert alert-danger alert-dismissable\”><button type=\”button\” class=\”close\” data-dismiss=\”alert\” aria-hidden=\”true\”>×</button>Wrong Username or Password</div>”;
}
ob_end_flush();
?>