My current project involves creating a mobile app with user login capabilities using PhoneGap, jQuery Mobile, AJAX, and PHP. I am starting with a basic HTML and PHP structure as I am not an experienced programmer, but even my simple user login form is not functioning correctly.
Below is the HTML code for the user login page (sampleindex.html):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="/themes/P32-Manager.css">
<link rel="stylesheet" type="text/css" href="/themes/jquery.mobile.icons.min.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="/themes/jQuery-Overrides.css">
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
function userLogin(email) {
if (email == "") {
document.getElementById("logincontainer").innerHTML = "";
return;
}
else {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("logincontainer").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","samplehome.php?UserName="+email,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<div data-role="page" id="logincontainer">
<form action="sampleindex.html" method="get">
<div style="text-align:center; display:inline-block;">
<div data-role="fieldcontain" style="text-align:center; position:relative; top:0em; left:0.5em; width:100%; margin:auto; border:0;">
<label for="username" style="display:block; width:350px; text-align:left;">Username (Email)
<input data-clear-btn="false" name="UserName" type="text" value="" class="ui-input-text" style="height:40px; font-size:18px;">
</label>
</div>
<div data-role="fieldcontain" style="text-align:center; position:relative; top:-1.25em; left:0.5em; width:100%; margin:auto; border:0;">
<label for="password" style="display:block; width:350px; text-align:left;">Password
<input data-clear-btn="false" name="Password" type="password" value="" class="ui-input-text" autocomplete="off" style="height:40px; font-size:18px;">
</label>
</div>
</div>
<div data-role="fieldcontain" style="text-align:center; position:relative; top:-0.5em; left:-1em; width:100%; margin:auto; border:0;">
<div id="login-button" style="position:relative; left:0em; width:300px; height:62px; margin:auto; border:0; background-color:#ffffff;" data-inline="true">
<input data-role="button" name="loginbutton" type="submit" value="Login" style="position:absolute; left:0em;" onClick="userLogin(UserName);">
</div>
</div>
</form>
</div>
</body>
</html>
We are utilizing FileMaker for our database (similar to MySQL) connected through the FileMaker PHP API. The database layout used is "Demo php," and we want to retrieve values such as "UserName" and corresponding "FirstName" from the database via URL parameters. Additionally, we aim to obtain the RecordID for each logged-in user to provide specific information. Despite focusing on proof of concept rather than security, when clicking "Login," the page remains blank, indicating potential issues with jQuery and AJAX implementation. Any insights on troubleshooting and passing ID values using jQuery without page refresh are greatly appreciated.
This is the PHP file (samplehome.php):
<?php
session_start();
$_SESSION['logged-in']=0;
?>
<?php
include ("../../dbaccess.php");
$username = urldecode($_GET['UserName']);
if(isset($_GET['loginbutton']) and (!empty($_GET['UserName']) and !empty($_GET['Password'])) )
{
$username = '==' . urldecode($_GET['UserName']);
$password = md5($_GET['Password']);
$request = $fm->newFindCommand('Demo php');
$request->addFindCriterion('UserName', $username);
$request->addFindCriterion('Password', $password);
$result = $request->execute();
if (FileMaker::isError($result))
{
$request = $fm->newFindAllCommand('Demo php');
$result = $request->execute();
}
$found = $result->getFoundSetCount();
$records = $result->getRecords();
if($found == 1)
{
$_SESSION['logged-in']=1;
echo '<table border="1">
<tr>
<th>First Name</th>
</tr>';
foreach ($records as $record)
{
echo '<tr>';
echo '<td>' . $record->getField('FirstName') . '</td>';
echo '</tr>';
}
echo '</table>';
}
else
{
$_SESSION['logged-in']=0;
echo 'nope';
}
}
?>
Currently, upon clicking "Login," the page remains blank without any data displayed, suggesting a malfunction in the authentication process. Assistance in resolving this issue and handling passed ID values efficiently using jQuery and AJAX would be greatly helpful.
Your help is much appreciated!