I am creating an app that let's students login and show the module they have registered in styled tables. I have done the server side login and it does respond in JSON format but I have little knowledge in Ajax and jQuery so I am not sure how to use the JSON keys as values of the variables in jquery.
This is is what I have on the server side and currently responds in JSON upon a successful or failed login and does return student info + modules (to be added to the SQL Query) :
<?php
ob_flush();
ob_clean();
ob_end_flush();
ob_end_clean();
ob_start();
$server = "sqlserveraddress\SQLEXPRESS";
$connectionInfo = array( "Database"=>"dbname", "UID"=>"sa", "PWD"=>"sqlpassword" );
$conn = sqlsrv_connect( $server, $connectionInfo );
$username=$_POST["sid"];
$password1= sha1($_POST["password"]);
$sql = "SELECT name, sid, dob FROM STUDENTS where sid = '$username' and ` `password='$password1'";
$params = array();
$options = array( "Scrollable" => SQLSRV_CURSOR_KEYSET );
$stmt = sqlsrv_query( $conn, $sql , $params, $options);
$row_count = sqlsrv_num_rows($stmt);
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
$dob = $row['dob'];
$name = $row['name'];
if ($row_count == 1)
{
$return = array('name' => $name,'dob' => $dob, 'status' => 'success' );
header("Content-type: application/json");
echo json_encode($return);
}
else
{
$return = array('status' => 'fail');
echo "Student ID or password is wrong!!!";
}
}
?>
This is my login.js which at the moment posts the data to the php and I am presented with output of the json for example:
{ "name":"Jams Matts ","dob":"04-02-1991","status":"success" }
login.js:
$.post("",{ sid: sid, password:password});
$.ajax({
type : "POST",
url : "http://serverip/login.php",
crossDomain: true,
beforeSend : function() {$.mobile.loading('show')},
complete : function() {$.mobile.loading('hide')},
data : {sid : $("#sid").val(), password : $("#passord").val()},
dataType : 'json',
success : function(response) {
//console.error(JSON.stringify(response));
alert('Works!');
},
error : function() {
//console.error("error");
alert('Now working!');
}
});
so now I want to have the user redirected to the home page where he/she can see their modules (depending on how many they have) and for now, Welcome $name (that is returned by json I suppose)
and this is my index.html(using PhoneGap):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse /CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial- scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="https://ajax.googleapis.com /ajax/libs /jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div class="app">
<h1>MyGrade</h1>
<div id="deviceready" class="blink">
<p class="event listening"> </p>
<div class="loginform-in">
<h1>User Login</h1>
<div class="err" id="add_err"></div>
<fieldset>
<form action="http://serverIP/index.php" method="post">
<ul>
<li> <label for="name">SID </label>
<input type="text" size="30" name="sid" id="sid" /></li>
<li> <label for="name">Password</label>
<input type="password" size="30" name="password" id="password" /></li>
<li> <label></label>
<input type="submit" id="login" name="login" value="Login" class="loginbutton" ></li>
</ul>
</form>
</fieldset>
</div>
<p class="event received"> </p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
