Codeigniter Login With AJAX

Joseph Thomas
May 01, 2018

54k
0
4
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Bookmark

In this blog I will show you how to create a login page in Codeigniter using AJAX.

First, we need to create a database for the project. I created a 'testdb' database and a table named 'tbluser' in it. SQL query for the table is as below:

CREATE TABLE `tbluser` (
`id` int(11) NOT NULL,
`uname` varchar(100) NOT NULL,
`upwd` varchar(100) NOT NULL,
`urole` varchar(100) NOT NULL,
`intusertype` int(11) NOT NULL,
`struseremail` varchar(50) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Now, we have to set up a few config files in codeigniter to get started.

Set the database connection settings in config> database.php file,

'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'testdb',

Add the default paths in config>config.php

$config['base_url'] = 'http://localhost/codeig/';
define ( "DIR_ROOT", $_SERVER ["DOCUMENT_ROOT"] . '/app/' );
define ( "URI_ROOT", $config ['base_url'] );
define ( "CSS_PATH", $config ['base_url'] . "css/" );
define ( "IMAGE_PATH", $config ['base_url'] . "img/" );
define ( "JS_PATH", $config ['base_url'] . "js/" );

Set the default route; i.e.; to which controller should the app point when the url is called. You can change this at config>routes.php

$route['default_controller'] = 'login';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

Controller

Inside controllers folder create a new controller named Login.php. The code for it is as below..

<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Login extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper('url');//you can autoload this functions by configuring autoload.php in config directory
$this->load->library ( 'session' );
$this->load->model('data_model');
}
public function index(){
$this->load->view('login');
}
public function check_login(){
$data['username']=htmlspecialchars($_POST['name']);
$data['password']=htmlspecialchars($_POST['pwd']);
$res=$this->data_model->islogin($data);
if($res){
$this->session->set_userdata('id',$data['username']);
echo base_url()."dashboard/";
}
else{
echo 0;
}
}
public function logout(){
$this->session->sess_destroy();
header('location:'.base_url()."login/".$this->index());
}
}

As you can see in its index method we are redirecting to our first view login.

View

Now, create a new file under view folder called login.php. I have used w3.css for the design part. The form contains two input boxes and a button for submit.

Also a div tag is used to show error messages.

<!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">
<title>Myapp</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="<?php echo CSS_PATH; ?>w3.css">
<link rel="stylesheet" href="<?php echo CSS_PATH; ?>bootstrap.min.css">
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: url('<?php echo IMAGE_PATH; ?>/1.jpg');
min-height: 100%;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-topleft w3-padding-large w3-xlarge">
</div>
<div class="container">
<div class="w3-display-middle w3-animate-opacity">
<h2 class="w3-jumbo ">Myapp Login</h2>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<br><br>
<form class="w3-container" method="post">
<label>User Name</label>
<input class="w3-input w3-border w3-light-grey" type="text" id="name" placeholder="Username">
<label>Password</label>
<input class="w3-input w3-border w3-light-grey" type="password" id="pwd" placeholder="Password">
<br>
<input class="w3-btn w3-white w3-border w3-round-large" type="submit" value="Login" id="submit" >
<div id='err_msg' style='display: none'>
<div id='content_result'>
<div id='err_show' class="w3-text-red">
<div id='msg'> </div></label>
</div></div></div>
</form>
</div>
<div class="w3-display-bottomleft w3-padding-large">
Powered by <a href="http://simelabs.com/" target="_blank">simelabs</a>
</div>
</div>
</div>

AJAX code posts the submitted value to the server..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// Ajax post
$(document).ready(function(){
$("#submit").click(function(){
var user_name = $("#name").val();
var password = $("#pwd").val();
// Returns error message when submitted without req fields.
if(user_name==''||password=='')
{
jQuery("div#err_msg").show();
jQuery("div#msg").html("All fields are required");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "login/check_login",
data: {name: user_name, pwd: password},
cache: false,
success: function(result){
if(result!=0){
// On success redirect.
window.location.replace(result);
}
else
jQuery("div#err_msg").show();
jQuery("div#msg").html("Login Failed");
}
});
}
return false;
});
});
</script>

Model

Create data_model.php under folder models.

<?php
class data_model extends CI_Model {
function __construct()
{
parent::__construct();
$this->load->database();
}
public function islogin($data){
$query=$this->db->get_where('tbluser',array('uname'=>$data['username'],'upwd'=>$data['password']));
return $query->num_rows();
}

That's it -- run the code in the browser. And you have created a new controller dashboard.php and views so as to redirect it on successful login.

Next Recommended Reading Use MailChimp API in PHP CodeIgniter Framework