Hello friends, today we are implementing a login form with Codeigniter and database. Once a person has been identified through the user ID or a similar value, he must be authenticated, which means he must prove he is who she says he is. something a person knows is nothing but password These factors are also commonly called authentication by ownership and authentication by characteristic. user identification is the most fundamental think of security. here we got authentication from already store database record. we check user email id and password without a refreshing web page.
Create database tables:
CREATE TABLE `user_details_table` (
`id` int(11) NOT NULL,
`user_name` varchar(50) NOT NULL,
`user_password` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;Database Configuration (Application/config/database.php)
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$active_group = 'default';
$query_builder = TRUE;
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'user_detail',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
Controllers (Application/controllers/Login_control.php)
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login_control extends CI_Controller {
public function index()
{
$this->load->view('layout/login');
}
public function login_process()
{
# code...
$user_email =$this->input->post('user_email');
$user_password = $this->input->post('password');
$password = md5($user_password);
try
{
if ($this->Data_model->find_user($user_email,$password)) {
# code...
echo "ok";
}
else{
echo "Wrong username and passwords";
}
}
catch(PDOException $e){
echo $e->getMessage();
}
}
}
View (Application/views/layout/login.php)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login Form using jQuery Ajax and codeigniter</title>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="assets/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="assets/jquery-1.11.3-jquery.min.js"></script>
<script type="text/javascript" src="assets/validation.min.js"></script>
<link href="assets/style.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="assets/script.js"></script>
</head>
<body>
<div class="signin-form">
<div class="container">
<form class="form-signin" method="post" id="login-form">
<h2 class="form-signin-heading">Signin </h2><hr />
<div id="error">
<!-- error will be shown here ! -->
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" required />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" id="password" required />
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="btn-login" id="btn-login">
<span class="glyphicon glyphicon-log-in"></span> Sign In
</button>
</div>
</form>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>Javascript Code
<script type="text/javascript">
/*
Author: Pradeep Khodke
URL: http://www.codingcage.com/
*/
$('document').ready(function()
{
function submitForm()
{
var data = $("#login-form").serialize();
$.ajax({
type : 'POST',
url : "https://127.0.0.1/post_created/Login_control/login_process",
data : data,
beforeSend: function()
{
$("#error").fadeOut();
$("#btn-login").html('<span class="glyphicon glyphicon-transfer"></span> sending ...');
},
success : function(response)
{
if(response=="ok"){
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-success"> <span class="glyphicon glyphicon-info-sign"></span> successfully login !</div>');
$("#btn-login").html('<span class="glyphicon glyphicon-log-in"></span> Sign In');
});
}
else{
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> '+response+' !</div>');
$("#btn-login").html('<span class="glyphicon glyphicon-log-in"></span> Sign In');
});
}
}
});
return false;
}
/* login submit */
});
</script>