I'm working on login system in codeigniter 3.0 and jquery ajax. I want to post data to controller using ajax and return a value if the data thrown by ajax is match from the mysql database. I also try those suggestion/s from this existing post but i think its not working. I don't want to rely the redirect from codeigniter.
MAIN PROBLEM: i want to check if the username and password data are incorrect, it prompts an error with no page refresh. But i did was throw an boolean value from controller to view for projecting an error-like html tag.
heres the code:
readyLogin.js
var ReadyLogin = function () {
return {
init: function () {
/*
* Jquery Validation, Check out more examples and documentation at https://github.com/jzaefferer/jquery-validation
*/
/* Login form - Initialize Validation */
$('#form-login').validate({
errorClass: 'help-block shake animated', // You can change the animation class for a different entrance animation - check animations page
errorElement: 'div',
errorPlacement: function (error, e) {
e.parents('.form-group > div').append(error);
},
highlight: function (e) {
$(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
$(e).closest('.help-block').remove();
},
success: function (e) {
e.closest('.form-group').removeClass('has-success has-error');
e.closest('.help-block').remove();
},
rules: {
'login-username': {
required: true
},
'login-password': {
required: true,
minlength: 5
}
},
messages: {
'login-username': {
required: "Please enter Administrator's username."
},
'login-password': {
required: "Please provide Administrator's password.",
minlength: 'Your password must be at least 5 characters long.'
}
}
});
$("#form-login").submit(function(){
$.ajax({
type: "POST",
url: $('#form-login').attr('action'),
data: {"login-username": $("#login-username").val(), "login-password": $("#login-password").val()},
dataType: "json",
success: function (returnData) {
alert(data); // to check if there's a thrown data from the view to controller
// below is a "trial" code that checks the status if the controller receives data from ajax
if (returnData.status == true) {
console.log(returnData.status);
} else {
console.log('empty');
}
}
});
});
}
};
}();
controller/Login.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('form');
$this->load->helper('url');
$this->load->helper('html');
}
public function index() {
$data['error'] = false;
$result = $data['error'];
if ($_POST) {
$this->load->model('Login_model');
$username = $this->input->post('login-username', true);
$password = $this->input->post('login-password', true);
$user = $this->Login_model->login($username, $password);
if (!$user && $user == null) {
$data['error'] = true; //throwing boolean value to make error html tag
$result = array('status' => true);
json_encode($result);
} else {
$data['error'] = false;
$this->session->set_userdata('username', $user['usename']);
$this->session->set_userdata('password', $user['password']);
redirect(base_url() . 'Maps');
}
}
$this->load->view('Backend/page_ready_login', $data);
}
function logout() {
$this->session->sess_destroy();
redirect(base_url(), 'refresh');
}
}
model/Login.php
<?php
class Login_model extends CI_Model {
function login($username,$password){
$where=array(
'username'=>$username,
'password'=>sha1($password)
);
$this->db->select()->from('admin')->where($where);
$query=$this->db->get();
return $query->first_row('array');
}
}
views/Backend/page_ready_login.php
<?php
include 'assets/Backend/inc/config.php';
$template['title'] = 'BCGIS | LOGIN';
$template['page_preloader'] = true;
?>
<?php include 'assets/Backend/inc/template_start.php'; ?>
<!-- Login Container -->
<div id="login-container">
<!-- Login Header -->
<h1 class="h3 text-light text-center push-top-bottom fadeIn animated">
<div class="row">
<div class="col-lg-3 fadeIn animated">
<img src="<?= base_url(); ? >assets/Backend/images/Ph_seal_davao_del_norte_panabo_city.png" style="width: 95px; height: 80px;"/>
</div>
<div class="col-lg-9 fadeIn animated">
<strong>Brgy. Cagangohan Geographical Information System</strong>
</div>
</div>
</h1>
<!-- END Login Header -->
<!-- Login Block -->
<div class="block fadeIn animated">
<!-- Login Title -->
<div class="block-title">
<h2>Administration Login</h2>
</div>
<!-- END Login Title -->
<!-- Login Form -->
<form id="form-login" action="<?= base_url(); ?>" method="post" class="form-horizontal">
<?php if ($error == true) { ?>
<h5 class="alert alert-danger shake animated" id="login-error">Your Username/Password is incorrect!</h5>
<?php } ?>
<div class="form-group">
<div class="col-xs-12">
<input type="text" id="login-username" name="login-username" class="form-control" placeholder="Username..">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input type="password" id="login-password" name="login-password" class="form-control" placeholder="Password..">
</div>
</div>
<div class="form-group form-actions">
<div class="col-sm-offset-2 col-sm-8 text-center">
<center>
<button type="submit" id="login-button" name="login-button" class="btn btn-effect-ripple btn-block btn-primary"><i class="fa fa-check"></i> Sign In</button>
</center>
</div>
</div>
</form>
<!-- END Login Form -->
</div>
<!-- END Login Block -->
<!-- Footer -->
<footer class="text-muted text-center fadeIn animated">
<small><span id="year-copy"></span> © <a href="#"><?php echo $template['name'] . ' ' . $template['version']; ?></a></small>
</footer>
<!-- END Footer -->
</div>
<!-- END Login Container -->
<?php include 'assets/Backend/inc/template_scripts.php'; ?>
<!-- Load and execute javascript code used only in this page -->
<script src="<?= base_url(); ?>assets/Backend/js/pages/readyLogin.js"> </script>
<script>
$(function () {
ReadyLogin.init();
});
</script>
<?php include 'assets/Backend/inc/template_end.php'; ?>
Any suggestion/s and help fixing this is much appreciated. Thanks.
