0

I am working on HTML5 App using Phonegap,

The database resides at my server. Registration and login is done by ajax post and I have a three different level of access for each user

Application Flow: Take the input from user and validate this at server end “database” and then display Result, it could be success or fail or type of the user.

The problem: Once I get the respond then how to redirect to another page and save the user name on the page and How to Log Out the user.

this is my code

index.html 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login/register</title>
<script language="JavaScript" type="text/javascript"> 
   function ajax_post(){
  var databox =document.getElementById("status");
      var hr = new XMLHttpRequest();
      var url = "login.php";
      var u = document.getElementById("username").value;
      var p = document.getElementById("password").value;
  var f = document.getElementById("format").value;
      var vars = "username="+u+"&password="+p+"&format="+f;
      hr.open("POST", url, true);
      hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      hr.onreadystatechange = function() {
          if(hr.readyState == 4 && hr.status == 200) {
          var return_data = JSON.parse(hr.responseText);
              if(return_data.Status == "success"){
                 if(return_data.type == "Collecting Data"){
                   //first type of user
                   window.location.href = "a.html";
                 }
                 else{
                    if(return_data.type == "Supervisor"){
                      //second type of user
                    }
                    else{
                    //third type of user
                    }
                 }
            }
            else{
            if(return_data.Status == "fail"){
                databox.innerHTML=" please try again  ";
            }
        }
   }//end if
}//end fuction
hr.send(vars); // Actually execute the request
}//end ajax_post function
</script>
</head>
<body>
<table width="400px">
<tr>
<td colspan="2" style="text-align:center">
<h3>Log in/Register</h3> 
</td>
 </tr>
 <tr>
 <td valign="top">
  <label for="username">Username *</label>
 </td>
 <td valign="top">
 <input id="username" name="username" type="text" maxlength="50" size="25"/>
 </td>
 </tr>
 <tr>
 <td valign="top">
 <label for="password">Password *</label>
 </td>
 <td valign="top">
 <input id="password" name="password" type="password" maxlength="50" size="25"/>
 </td>
 </tr>
 <tr>
 <td colspan="2" style="text-align:center">
 <input id="format" name="format" type="hidden" value="json"/>
 <input name="myBtn" type="submit" value="Login" onClick="javascript:ajax_post();">
 </td> 
 </tr>
 </table>
 <br /><br />
 <div id="status"></div>         
 </body>
  </html>

and this is login.php

<?php
 session_start();
 $username = $_POST['username'];
 $password = $_POST['password'];    
 $password = md5($password);
 $format= $_POST['format'];
 mysql_connect("localhost","user","pass") or die (mysql_error());
 mysql_select_db("database name") or die ("no database");  
 $sqlString = mysql_query("SELECT * FROM staff WHERE username = '$username' AND password = '$password'");
 $row = mysql_fetch_array($sqlString); 
 $num_results = mysql_num_rows($sqlString);
 if($num_results ==1){
    $Status='success';
    $type=$row["type"]; 
    $_SESSION['username'] = $username;
    deliver_response($username,$password,$Status,$type,$format);
 }
 else{
    $Status='fail';
    $type="empty";
    deliver_response($username,$password,$Status,$type,$format);
 }

function deliver_response($u,$p,$s,$t,$f){
if($f == 'json') {
     $response['username']=$u;
     $response['password']=$p;
     $response['type']=$t;
     $response['Status']=$s;
 header('Content-type: application/json');
 $json_response=json_encode($response);
     echo $json_response;
}//end if
    else{
     echo 'format not valid';
    }//end else  
}//end function
?>

when i back with response and redirect to another html page and go to php file throw ajax and use this statement in php

echo $_SESSION['username'];

it will print null.

Mesho
  • 53
  • 1
  • 8

2 Answers2

1

Use this for getting the respond: How do I return the response from an asynchronous call?

And for getting the name, simply save it as a $_SESSION variable, or as a cookie. Then just get it on the page by doing something like this (printing it in the title).

<!DOCTYPE html>
<html>
<head>
<?php
$name = $_SESSION['name'];
echo "<title>".$name."</title>";
?>
</head>

Also, post some code to show us what you have tried already.

Community
  • 1
  • 1
Max Langerak
  • 1,187
  • 8
  • 17
0

Basically you need to hold a session on the back-end system, Ajax request for login will check for success authentication by back-end system. Im suggesting you implement the following sequence for Ajax based login.

Login Procedure

  1. Send authentication request to back-end using Ajax (see example);
  2. Back-end system will authenticate the user from Ajax request.
  3. If success, system will established session with period of access.
  4. System will return a JSON response to client with a positive result value such as true.
  5. Once client-side received a response will check for positive value, if ok then redirect to home or any page.
  6. Server can supplied optionally a session id to store as cookie for session verification on client side.

Logout Procedure

  1. Send logout request to back-end using Ajax.
  2. Back-end system will delete current session and response to client for positive value.
  3. Once client side receive response will check for value, if ok then redirect to login page.
  4. If cookie is set then client side can delete the cookie with session value.
$.getJSON('user/login',{user:'user',password:'password'},function(response){
   if(response.result){
      location.href = '/home';
   }
});

Please be note that the flow proposed is very basic, more improvement can be made for better control.

Azri Jamil
  • 2,394
  • 2
  • 29
  • 37