I am trying to implement a simple login system with php/mysql/jquery. I want it to be a single page app, so I have this for my "index.php":
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>it IT</title>
<script src="reqscripts/jquery.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
I have this for my jquery:
js/application.js
$(document).ready(function() {
$("#main").load("templates/indexforms.php");
$("#login").submit(function(e) {
e.preventDefault();
$.post("checklogin.php", $(this).serialize(), function(){
$("#main").load("templates/login_success.php");
$("#login").remove();
$("#register").remove();
});
});
});
This form gets loaded (templates/indexforms.php):
<?php session_start(); ?>
<form id="login" method="post" action="checklogin.php">
<h1>Member Login</h1>
<p>Username:<input name="myusername" type="text" id="myusername"></p>
<p>Password:<input name="mypassword" type="password" id="mypassword"></p>
<input type="submit" name="Submit" value="Login">
</form>
Right now, when I try to login - it gets stuck on localhost/~Eamon/checklogin.php (which doesn't have any html in it) and a completely blank page is rendered (no source code at all). Do I need to include application .js in my indexforms.php template? Where would I do this? Also, if you look at my jquery, I am loading the forms right after the DOM is ready - but on form submission...the forms are supposed to be removed - and the login_success.php should be loaded.
UPDATE
checklogin.php
<?php
session_start();
$host="localhost"; // Host name
$username="xxx"; // Mysql username
$password="xxx"; // Mysql password
$db_name="itit"; // Database name
$tbl_name="members"; // Table name
// Connect to server and select databse.
$mysqli = new mysqli("$host", "$username", "$password", "$db_name")or die("cannot connect");
// Define $myusername and $mypassword
$myusername=$_POST['myusername'];
$mypassword=$_POST['mypassword'];
$sql = $mysqli->prepare("SELECT * FROM $tbl_name WHERE username=? and password=?");
$sql->bind_param('ss',$myusername,$mypassword);
$sql->execute();
$sql->store_result();//apply to prepare statement
$numRows = $sql->num_rows;
if($numRows === 1){
$_SESSION['username'] = $myusername;
}
else {
echo "Wrong Username or Password";
session_destroy();
}
?>
UPDATE
I don't think my javascript file is being loaded. I put alert("here") before e.preventDefault and nothing happens...is the second line of my application.js file messing things up? Why is it not getting loaded?
I found this here - does this help anyone?
JavaScript files loaded using the script tag are blocking by nature. Everything that’s happening or loading on the page is halted while the script is downloaded and executed. And remember that this applies to each script tag. Some modern browsers may let you download these in parallel, but the rest of the page is still blocked from doing anything meaningful
UPDATE
I put echo "success" inside the if block of checklogin.php...like this (at the bottom):
...
if($numRows === 1){
$_SESSION['username'] = $myusername;
echo "success";
}
else {
echo "Wrong Username or Password";
session_destroy();
}
?>
and it never gets there. If I put it just before the if statement it displays the echo message...which means that the user isnt being found in my database...or something like that?
UPDATE
Put var_dump($numRows) after $numRows = $sql->num_rows; like this:
...
$numRows = $sql->num_rows;
var_dump($numRows);
if($numRows === 1){
$_SESSION['username'] = $myusername;
}
...
I get int(1) as response...
UPDATE
Change the if condition in checklogin.php:
if($numRows === "int(1)"){
$_SESSION['username'] = $myusername;
}
else {
echo "Wrong Username or Password";
session_destroy();
}
The else block gets executed and I see "Wrong Username or Password" - as I should.
UPDATE
Changed jquery code to this...still no luck:
$(document).ready(function() {
$("#main").load("templates/indexforms.php", function () {
$("#login").submit(function(e) {
e.preventDefault();
$.post("checklogin.php", $(this).serialize(), function() {
$("#main").load("templates/login_success.php");
$("#login").remove();
$("#register").remove();
});
});
});
});
CORRECTION
The above code is correct! I just needed to restart the server! Thanks!
UPDATE
Found a new problem, here you go: simple login system spa/php/mysql/jquery
