When the login button is pressed the form data is posted to the slim route url using ajax post method which is supposed to pass the data so that it can be retrieved by the framework,the data is passes to the check login function which checks that credentials entered and if it matches whats stored in the db returns true, and this response redirects to the homepage (projects.php). When i click the button nothing happens, the web application responds to debug output right up to the ajax post statement but from then on all other test output doesnt show up.
Slim index.php
<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;
require 'vendor/autoload.php';
include 'lib.php';
$config = [
'settings' => [
'displayErrorDetails' => true,
]
];
// Create app
$app = new \Slim\App($config);
// Get container
$container = $app->getContainer();
// Register component on container
$container['view'] = function ($container) {
return new \Slim\Views\PhpRenderer('templates/');
};
$app->get('/', function (Request $request, Response $response) {
return $this->view->render($response, "/login.php");
});
$app->get('/guest', function (Request $request, Response $response) {
return $this->view->render($response, "/projects.php");
});
$app->get('/projects', function (Request $request, Response $response) {
return $this->view->render($response, "/projects.php");
});
$app->post("/login", function(Request $request, Response $response)use($app){
$post = $request->getParsedBody();
$email = $post['email'];
$password = $post['password'];
$res = checkLogin($email, $password);
if ($res===true){
$response = $response->withStatus(201);
$response = $response->withJson(array("status"=> true));
} else{
$response = $response->withJson(400);
}
return $response;
});
// Run app
$app->run();
lib.php :
<?php
if(!session_id()) session_start();//If session is not started start session
function getDBConnection(){
try{
$db = new mysqli("localhost","web_project","admin","web_project");
if ($db == null && $db->connect_errno > 0)return null;
return $db;
}catch(Exception $e){ }
return null;
}
function checkLogin($email, $password){
$password = sha1($password);
$sql = "SELECT * FROM `user` where `email`='$email'";
echo($email);
$db = getDBConnection();
print_r($db);
if($db != NULL){
$res = $db->query($sql);
if ($res && $row = $res->fetch_assoc()){
if($row['password'] == $password){
$_SESSION["user"] = $row['fname'];
$_SESSION["id"] = $row['uid'];
return true;
}
}
$db->close();
}
return false;
}
main.js:
"use strict";
$(document).ready(function() {
$('#loginform').bootstrapValidator({
container: '#messages',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok has-success',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: 'Email is required and cannot be empty'
},
emailAddress: {
message: 'The email address is not valid'
}
}
},
password: {
validators: {
notEmpty: {
message: 'Password is required and cannot be empty'
}
}
}
}
});
$( "#btn-guest" ).click(function() {
window.location.href = 'index.php/guest';
});
$( "#btn-login" ).click(function() {
login();
});
});
function login(){
//var email = document.forms["logForm"]["email"].value;
// var password = document.forms["logForm"]["password"].value;
var email = $("#email").val();
var password = $("#password").val();
var data= {
"email" : email,
"password": password
};
console.log(data);
$.post("index.php/login", data, function(response){
console.log("Response: "+response);
var obj = JSON.parse(response);
console.log(obj.status);
if(obj.status == true){
window.location.href = "index.php/projects";
}else{
window.location.href = "/";
}
return false;
});
}
html page with form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Login</title>
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="bower_components/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/sweetalert/dist/sweetalert.css">
</head>
<body id="login_page">
<div id="header">
</div>
<?php if(isset($_SESSION["user"])){unset($_SESSION['user']);} ?>
<div class="container">
<div id="loginbox" style="margin-top:100px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-default" id="panel-default">
<div class="panel-heading" id="panel-heading">
<div class="panel-title">Sign In</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" enctype="multipart/form-data" name="logForm" class="form-horizontal" role="form" method="POST">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" value="" placeholder="Email" >
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password">
</div>
<!-- #messages is where the messages are placed inside -->
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div id="messages"></div>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button type="button" id="btn-login" class="btn btn-info" value="Login">Login</button>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button type="button" id="btn-guest" class="btn btn-info" value="SignUp">Sign in as Guest</button>
</div>
</div>
<footer class="navbar navbar-fixed-bottom" id="footer">
</footer>
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<script src="js/main.js"></script>
</body>
</html>
