Formulario de login con Ajax en CodeIgniter

Este es el tema 6 de la creación de un carrito de compras con CodeIgniter, y hoy vamos a crear el formulario de login para que los usuarios(administradores) del sistema puedan acceder a la parte administrativa; aquí vamos a ver cómo como crear un formulario de login con Ajax en CodeIgniter; en el momento que el usuario escriba el nombre de usuario y salga de este campo a través de Ajax se hará la validación y le indicará si el usuario es correcto o no, como también se valida que los campos no estén vacíos, pero de todos modos se harán todas la validaciones del lado del servidor por seguridad. Empecemos.

Paso 1

vamos a la base de datos cart y pegamos en la pestaña SQL el siguiente código y lo ejecutamos:

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) CHARACTER SET utf8 COLLATE utf8_spanish_ci NOT NULL,
  `password` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=12 ;


INSERT INTO `users` (`id`, `username`, `password`) VALUES
(11, 'admin', '21232f297a57a5a743894a0e4a801fc3');

Paso 2

Vamos a cart/application/models/ y creamos un modelo llamado login_model.php

Código de login_model.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Login_Model extends CI_Model{
  
function valid_user($username, $password)
{
  $this->db->where('username', $username);
  $this->db->where('password', $password);
 
  $query = $this->db->get('users');
 
   if($query->num_rows() >0){

     return TRUE;
  
    }else{
      
        return FALSE;
    }
}

function valid_user_ajax($username){
          
    $this->db->where('username', $username);
    $query = $this->db->get('users');
        
         if($query->num_rows() >0){
              
             echo $query->num_rows();
            
             }
  }

}

Paso 3

En cart/application/controllers/ creamos un controlador llamado login.php

Código del controlador login.php

<?php

class Login extends CI_Controller{
  
   function __construct()
   {
        parent::__construct();
        $this ->load->model('Login_Model');
        $this->load->library(array('session','form_validation'));  
          
   }
 
function index()
    {  // reglas de validación
       $this->form_validation->set_rules('username', 'Usuario', 'callback__valid_login');
       $this->form_validation->set_rules('password', 'Contraseña','|md5|required');
     
        $this->form_validation->set_message('required', 'el campo %s es requerido');
        $this->form_validation->set_message('_valid_login', 'El usuario o contraseña son incorrectos');
     
        $this -> form_validation -> set_error_delimiters('<ul><li>', '</li></ul>');
   
        if ($this->form_validation->run() == FALSE)
        {
            $data['title'] = 'Tienda Virtual - Sistema de Login CI';

            $this->load->view('admin/login',$data);
        }
        else{
                        
             $username = $this->input->post('username');
             $data_user = $array = array('user'=> $username, 'logued_in' => TRUE);
            
        // asignamos dos datos a la sesión --> (username y logued_in)                                    
             $this->session->set_userdata($data_user);
               
            $data['title'] = 'Administrador';
            $data['user'] = $username;  // = $this->session->userdata('user');
          
            $this->load->view('admin/header_admin',$data);
            $this->load->view('admin/admin');
            $this->load->view('front/footer');
                
              
        }
  }
  
function _valid_login($username,$password)
    {
        $username = $this->input->post('username');
        $password = md5($this->input->post('password'));
        return $this->Login_Model->valid_user($username,$password);
    }

function valid_login_ajax(){
    //verificamos si la petición es via ajax
if($this->input->is_ajax_request()){

         if($this->input->post('username')!==''){
            $username = $this->input->post('username');
            
        $this->Login_Model->valid_user_ajax($username);  

        }
}else{
        redirect('login');
}

} // fin del método valid_login_ajax
  
function logout(){
            
         $this->session->sess_destroy();
         redirect('login');      
}
 
}

Paso 4

Creación de la vistas.

Vamos a cart/application/views/ y creamos un directorio llamado admin, dentro de este directorio creamos 3 vistas una será el login: login.php, la otra será el header: header_admin.php para la parte administrativa en el cual validamos si existe la sesión del usuario y así permitirle acceder, de esta manera siempre que necesitemos crear funciones para el administrador vamos a cargar en el controlador el header de la administración, para no tener que hacer más de una validación, y la tercera vista es donde se la da la bienvenida al administrador, esta vista la llamamos admin.php. En login.php vamos a incluir las validaciones con Jquery y Ajax.

Código de login.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title><?=$title?></title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" type="text/css" href="<?=base_url();?>assets/template/style.css"/>
<script type="text/javascript" src="<?=base_url();?>assets/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#username').focus();
$('#username').blur(function(){        
     var user = $(this).val();
      
      if(user==''){
           
        $('#msg_username').html('El Usuario es requerido').css('color','red');
           
        }else{
                       
        var info = { username: user };
       
            $.ajax({               
                url: '<?=base_url();?>login/valid_login_ajax', 
                type: 'POST',             
                data: info,
                success: function(msg){  // alert(msg);       
                          if(msg!=1){
                             
                              $('#msg_username').html('El Usuario es Incorrecto').css('color','red');
                          }else {                     
                          $('#msg_username').html('El Usuario es correcto').css('color','green');                             
                             
                          }                         
                }
                             
            });                  
        }

      });     
});   

$(document).ready(function(){
$('#password').blur(function(){       
     var user = $(this).val();
       
      if(user==''){
           
        $('#msg_password').html('La Contraseña es requerida').css('color','red');
           
        }else{
                       
           $('#msg_password').empty();
        }

    });     
});   
</script>
</head>
<body>
    <div id="container">
<div id="header">
    <h1><?=$title?></h1>
</div><!-- End Header -->
<div id="content">
   
<?php $attributes = array('id' => 'form_login');

    $username = array('name'=>'username', 'id'=>'username','class'=>'input','placeholder'=>'Usuario',
                      'value'=>set_value('username'), 'size'=> '35',);
    $password = array('name'=>'password', 'id'=>'password','class'=>'input','placeholder'=>'Contraseña',
                      'type'=>'password', 'size'=> '35',);

if(validation_errors()):      
 ?>
<div id="error"><?=validation_errors();?></div>
<?php endif ?>

<?=form_open('login', $attributes);?>   
<div class="padding"><?=form_label('Usuario');?></div>
<div id='msg_username' class="padding"></div>
<div class="padding"><?=form_input($username);?></div>
<div class="padding"><?=form_label('Contraseña')?></div>
<div id='msg_password' class="padding"></div>
<div class="padding"><?=form_input($password)?></div>

<?=form_submit(array('name' => 'submit','class'=>'submit',
                                               'value' => 'Acceder'))?>
<?=form_close();?>

</div><!-- End Content -->
<div id="footer">
    <p>Copyright &copy; 2013 Tienda virtual con CodeIgniter</p>
</div><!-- End Footer -->
</div><!-- End Container -->
</body>
</html>

Como dije antes en el header_admin.php es donde haremos la validación si el usuario está logueado, la cual es necesario hacer solo una vez.

Código de header_admin.php

<?php
     $logued = $this->session->userdata('logued_in');
     $session = $this->session->userdata('session_id');
  
if($logued === FALSE || $session === FALSE ){ /* por seguridad hacemos doble verificación; aunque estas
                                               * 2 variables siempre van a tener el mismo estado */
    redirect('login'); exit();
  
 }   
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title><?=$title?></title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" type="text/css" href="<?=base_url();?>assets/template/style.css"/>
<script type="text/javascript" src="<?=base_url();?>assets/js/jquery-1.9.1.js"></script>
</head>
<body>
    <div id="container">
<div id="header">
    <h1>Tienda Virtual con CodeIgniter</h1>
</div><!-- End Header -->
<div id="menu">
    <ul>
        <li><a href="#">Administrar Productos</a></li>  
        <li><a href="#">Administrar Usuarios</a></li>
        <li class="cart_menu"><?=anchor('login/logout', 'Cerrar Sesión');?></li>
    </ul>
</div><!-- End Menu -->
<div id="content">

Código de la vista admin.php

<?php echo heading('Bienvenido: '.$user, 4);

Último paso añadir los estilos para el formulario de login en cart/assets/template/style.css

  /* FORMULARIO DE LOGIN */
#form_login{
margin-left: auto; margin-right: auto; margin-top:60px; padding-top: 25px;
}
#form_login .padding{
    padding:0px 0px 4px 40px;
}
#form_login label{
    color: #484848; font-size:14px;
}
#form_login .input{      
    -moz-border-radius: 7px; -khtml-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;
    background-color: #f9f9f9;border: 1px solid #cacaca;
    font-size: 15px;padding: 8px 10px;width: 300px;
}  
#form_login .submit{
    -moz-border-radius: 15px;-khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;   
    -webkit-box-shadow: 2px 3px 4px 3px #ccc;box-shadow: 2px 3px 4px 3px #ccc;
    font-family: arial,verdana,sans-serif; background-color: #f9f9f9;border: 1px solid #cacaca; font-size:14px;
    font-weight: bold; padding: 8px 10px; cursor: pointer;
    margin-left:135px; width: 90px;
}

El usuario y la contraseña es admin
De esta forma ya podemos probar: http://localhost/cart/login

Descargar archivos