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\">&times;</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\”>&times;</button>Wrong Username or Password</div>”;
        }
        ob_end_flush();
?>