Ticker

6/recent/ticker-posts

CodeIgniter - Aplicación Web LOGIN

Hadson Paredes septiembre 04, 2022

En el siguiente tutorial práctico continuamos en relación al desarrollo de nuestra Aplicación Web para el control de autenticación y autorización de accesos, en esta segunda parte desarrollaremos el ya conocido LOGIN o inicio de sesión de nuestra aplicación web, las herramientas o tecnologías se mantienen en relación a la primera parte (CodeIgniter - Aplicación Web para el REGISTRO de USUARIOS), es decir, se sigue usando el Framework PHP como es CodeIgniter versión 3.1 y MySQL para la gestión de datos relacional.

Requisitos:

  1. XAMPP Control Panel.
  2. MySQL Workbench o phpMyAdmin.
  3. Visual Studio Code o Sublime Text 3
  4. CodeIgniter v3.1 (Framework PHP)
  5. Bootstrap (HTML5 y CSS3)

Lo que veremos en este tutorial:

  1. Estructura del proyecto.
  2. Configurar achivos de la aplicación
  3. Crear modelo de datos login.
  4. Crear controlador login.
  5. Crear la vista login.
  6. Crear logout (cerrar sesión).
  7. Conclusiones.


1. Estructura del proyecto.

La estructura del proyecto esta según el patrón de arquitectura MVC, es decir, se mantiene el principio fundamental que abarca la arquitectura de desarrollo MVC, la estricta separación entre el código y la presentación - estructura que nos ofrece el Framework CodeIgniter.

Nuestro proyecto cuenta con el modelo en relación al acceso a datos, seguidamente creamo el controlador en relación a la tabla user; finalmente, crearemos las vistas correspondiente para realizar el acceso a la aplicacion web teniendo en consideración las validaciones necesarias en base a la librería form_validation (validación desde el controlador).

2. Configurar archivos de la aplicación.

Después de crear la base de datos, seguidamente pasamos a configurar los archivos en relación al ecosistema del Framework CodeIgniter:

2.1. Se agregará la url base de nuestro proyecto en el parámetro $config['base_url']  del archivo config.php:

    RUTA DEL ARCHIVO: ..\login-app-web-with-codeigniter\application\config\config.php


    PARAMÉTRO: $config['base_url'] = 'http://localhost/login-app-web-with-codeigniter/';

Recordemos que puedes aplicar $_SERVER para controlar las rutas y ubicaciones de script en relación a PHP.

2.2. Asignar los valores de conexión a la base de datos en relación a los CONTROLADORES para la conexión a MySQL desde el archivo database.php:

    RUTA DEL ARCHIVO: ..\login-app-web-with-codeigniter\application\config\database.php

    PARAMÉTROS:
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'demo',
    'dbdriver' => 'mysqli',

2.3. Asignar el controlador inicial por defecto desde el archivo routes.php:

    ..\login-app-web-with-codeigniter\application\config\routes.php
    $route['default_controller'] = 'login/login';

3. Crear modelo de datos login.

Crear el modelo de nombre Login_model.php en el directorio models de nuestro proyecto login-app-web-with-codeigniter\application\models e implementar las funciones necesarias (las explicaciones están en la cabecera de cada función o acción que se realiza) para el acceso a datos y realizar la funcionalidad LOGIN:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?php
/**
 * @author Hadson Paredes
 * @email  info@hadsonpar.com
 */
defined('BASEPATH') or exit('No direct script access allowed');

class Login_model extends CI_Model
{
	// declare private variable
	private $_userID;
	private $_name;
	private $_userName;
	private $_email;
	private $_password;
	private $_status;

	public function setUserID($userID)
	{
		$this->_userID = $userID;
	}
	public function setName($name)
	{
		$this->_name = $name;
	}
	public function setUserName($userName)
	{
		$this->_userName = $userName;
	}
	public function setEmail($email)
	{
		$this->_email = $email;
	}
	public function setPassword($password)
	{
		$this->_password = $password;
	}
	public function setStatus($status)
	{
		$this->_status = $status;
	}

	public function getUserInfo()
	{
		$this->db->select(array('u.user_id', 'u.user_name', 'u.name', 'u.email'));
		$this->db->from('user as u');
		$this->db->where('u.user_id', $this->_userID);
		$query = $this->db->get();
		return $query->row_array();
	}
	function login()
	{
		$this->db->select('user_id, name, email');
		$this->db->from('user');
		$this->db->where('email', $this->_email);
		$this->db->where('password', $this->_password);
		$this->db->limit(1);
		$query = $this->db->get();
		if ($query->num_rows() == 1) {
			return $query->result();
		} else {
			return false;
		}
	}
}

4. Crear controlador login.

Crear el controlador de nombre Login.php en el directorio controllers de nuestro proyecto sign-up-app-web-with-codeigniter\application\controllers:

Implementar las funciones necesarias para cumplir con la lógica en nuestro controlado con la finalidad de logra nuestra funcionalidad LOGIN; recuerde, que las explicaciones están en la cabecera de cada función o acción que se realiza:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?php

/**
 * Description of Users Controller
 * @author Hadson Paredes
 * @email  info@hadsonpar.com
 */
defined('BASEPATH') or exit('No direct script access allowed');

class Login extends CI_Controller
{
	public function __construct()
	{
		parent::__construct();
		$this->load->model('Login_model', 'user');
	}

	// Dashboard method
	public function index()
	{
		if ($this->session->userdata('is_authenticated') == FALSE) {
			redirect('login/login'); // el usuario no ha iniciado sesión, redirigirlo!
		} else {
			$data['title'] = 'Welcome - Hadsonpar';
			$data['metaDescription'] = 'Dashboard';
			$data['metaKeywords'] = 'Dashboard';

			$this->user->setUserID($this->session->userdata('user_id'));
			$data['userInfo'] = $this->user->getUserInfo();
			$this->load->view('login/dashboard', $data);
		}
	}

	// Login method
	public function login()
	{
		if ($this->session->userdata('is_authenticated') == TRUE) {
			redirect('Login/index'); // el usuario no ha iniciado sesión, redirigirlo!
		} else {
			$data['title'] = 'Login - Hadsonpar';
			$data['metaDescription'] = 'Hadsonpar';
			$data['metaKeywords'] = 'Login';
			$this->load->view('login/index', $data);
		}
	}

	// Login Action 
	function doLogin()
	{
		// Validacion del formulario
		$this->load->library('form_validation');

		$this->form_validation->set_rules('email', 'Your Email', 'trim|required|valid_email');
		$this->form_validation->set_rules('password', 'Password', 'trim|required');

		if ($this->form_validation->run() == FALSE) {
			//Error en la validación de campos
			//Redirigir a la página de inicio de sesión
			$this->load->view('login/login');
		} else {

			$sessArray = array();
			//Validación de campo exitosa.  
			//Validar contra los datos de la base de datos

			$email = $this->input->post('email');
			$password = $this->input->post('password');

			$this->user->setEmail($email);
			$this->user->setPassword(MD5($password));

			//Consulta para la base de datos
			$result = $this->user->login();

			if ($result) {
				foreach ($result as $row) {
					$sessArray = array(
						'user_id' => $row->user_id,
						'name' => $row->name,
						'email' => $row->email,
						'is_authenticated' => TRUE,
					);
					$this->session->set_userdata($sessArray);
				}
				redirect('login');
			} else {
				redirect('login/login?msg=1');
			}
		}
	}	
}


5. Crear la vista login.

Crear las vistas en el directorio views de nuestro proyecto, en mi caso e creado el sub directorio llamado login - finalmente crearemos las siguientes vistas de index.php y dashboard.php:

sign-up-app-web-with-codeigniter\application\views\login\index.php



CODIGO DE NUESTRA VISTA: index.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?php $this->load->view('templates/header'); ?>

<main role="main">    
        <div class="container">        
            <div class="row" id="sign-up-form">                     

                <div class="col-6 text-center">            
                    <img src="<?php print HTTP_IMAGES_PATH; ?>user-check-icon.png" alt="Hadsonpar">
                </div>

                <div class="col-6 text-left">                   

                    <form action="<?php echo base_url(); ?>login/dologin" method="post" id="loginform" name="Login_Form" class="form-signin" method="POST">
                        <h3 class="form-signin-heading">Login form with CodeIgniter</h3>
                        <?php if (validation_errors()) { ?>
                            <div class="alert alert-danger">
                                <?php echo validation_errors(); ?>
                            </div>
                        <?php } ?>
                        <?php if (!empty($this->input->get('msg')) && $this->input->get('msg') == 1) { ?>
                            <div class="alert alert-danger">
                                Favor de ingresar datos válidos.
                            </div>
                        <?php } ?>
                        <?php if (validation_errors()) { ?>
                            <div class="alert alert-danger">
                                <?php echo validation_errors(); ?>
                            </div>
                        <?php } ?>
                        <div class="form-group">
                            <label for="name">Email</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email*" required />
                        </div>
                        <div class="form-group">
                            <label for="name">Password</label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="Password" required />
                        </div>
                        <button type="submit" class="btn btn-primary" style="float:right">LOGIN</button>
                    </form>
                </div>

                </div>
            </div>
        
    </div>
</main>

sign-up-app-web-with-codeigniter\application\views\users\dashboard.php



CODIGO DE NUESTRA VISTA: dashboard.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
$this->load->view('templates/header'); ?>
<br>
<main role="main" class="text-center">
    <div id="confirmation">
        <div>
            <img src="<?php echo HTTP_IMAGES_PATH; ?>user-check-icon.png" alt="">
            
            <h1>Dashboard...</h1>
            <h2>Acceso correctamente a la aplicación web</h2>

            <h3 class="cupon-pop">Bienvenido: <strong><?php if(!empty($userInfo)) { print $userInfo['name']; } else {print "User"; }?></strong></h3>        
            
        </div>
        <hr>
        <div>

            <div class="col-lg-12">                
                <a class="btn btn-danger btn-sm" href="http://blog.hadsonpar.com/search/label/CodeIgniter" target="_blank"><i class="fa fa-code"></i> Tutoriales en CodeIgniter</a>  

                <a class="btn btn-sm btn-primary" href="<?php echo base_url(); ?>login/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout <span class="sr-only">(current)</span></a>  

            </div>            
            
        </div>
    </div>
</main>
<br>
<?php
$this->load->view('templates/footer'); ?>


6. Crear logout (cerrar sesión).

En el controlador Login.php agregar la función logout y aplicamos el método de unset_userdata para eliminar las entradas de las sesiones y aplicamos sess_destroy para destruir todas las sesiones, asimismo, limpiamos la encabezados y finalmente rediccionamos a la raíz del proyecto.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php

/**
 * Description of Users Controller
 * @author Hadson Paredes
 * @email  info@hadsonpar.com
 */
defined('BASEPATH') or exit('No direct script access allowed');

class Login extends CI_Controller
{

	// Logout
	public function logout()
	{
		$this->session->unset_userdata('user_id');
		$this->session->unset_userdata('name');
		$this->session->unset_userdata('email');
		$this->session->unset_userdata('is_authenticated');
		$this->session->sess_destroy();

		$this->output->set_header("Cache-Control: no-store, no-cache, must-revalidate, no-transform, max-age=0, post-check=0, pre-check=0");
		$this->output->set_header("Pragma: no-cache");
		redirect('/');
	}		
}


7. Conclusiones

En esta segunda parte creamos todos los archivos en relacion al acceso a la aplicacion teniendo en consideracion a la tabla user en nuestra base datos demo, seguidamente creamos la funcionalidad de cerrar sesión, finalmente reusamos los recursos de tipo template como footer, header y menus en la vistas login y dashboard.

Referencia:

Gracias nuevamente 😊; comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!!
Hadson Paredes

Publicadas por Hadson Paredes

Apasionado por las nuevas tecnologías, la investigación, los patrones de diseño y las buenas prácticas; con experiencia y participación en diversos proyectos de banca y seguros desde la etapa de análisis, diseño, desarrollo, implementación, testing y certificación.

Publicar un comentario

0 Comentarios