Posts etiquetados ‘desarrollo’

A continuación vamos a ver, mediante una sencilla aplicación, un buen ejemplo de las posibilidades que puede proporcionarnos esta magnífica funcionalidad que trae consigo el estándar HTML5. Dicha aplicación consistirá en la posibilidad de votar nuestras redes sociales favoritas, haciendo uso, claro está, de la operación arrastrar y soltar.
Empecemos con el código html:

<body>
	
	<div id="header">
		<img id="cabecera" src="img/cabecera.png" />
		<h2>Vota tus aplicaciones favoritas</h2>
	</div>
		
	<hr>
		
	<div id="containerVotacion">
			
		<div id="Muy_buena" class="destino verde" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
			<p>Muy buena</p>
		</div>
				
		<div id="Buena" class="destino amarillo" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
			<p>Buena</p>
		</div>
				
		<div id="Regular" class="destino rojo" ondrop="drop(event)" ondragover="allowDrop(event)"	ondragleave="dragLeave(event)">
			<p>Regular</p>
		</div>
			
	</div>
		
	<div id="containerElementos" ondrop="drop(event)" ondragover="allowDrop(event)"	ondragleave="dragLeave(event)">
			
		<img id="facebook" src="img/facebook.png" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)" width="64" height="64"/>
		
		<img id="twitter" src="img/twitter.png" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)" width="64" height="64"/>
				
		<img id="linkedin" src="img/linkedin.png" draggable="true"	ondragstart="drag(event)" ondragend="dragEnd(event)" width="64" height="64"/>
			
	</div>
		
	<footer id="pie">
		<button id="resultados" onclick="obtenerResultados();">Ver resultados</button>
	</footer>
		
</body>

 

Aquí podemos observar tan solo la parte del “body” del html, para no distraernos con otras líneas de código que ahora no importan.
La imagen dentro del primer div simplemente aparece a modo decorativo. Todos los recursos que se emplean aquí van a estar disponibles a través del enlace a mi repositorio Github que os dejaré al final del artículo.
Vamos a fijarnos en lo importante. Hay dos div contenedores que van a diferenciar la zona disponible para votar, de la que contendrá los iconos de las redes sociales más relevantes, y que estarán disponibles parar ser arrastrados y soltados en la zona de votación que deseemos.
Así pues queda claro que el div con id containerVotación integra a los tres div que equivalen a las votaciones “muy buena”, “buena” o “regular”. Podemos observar que todos estos div tienen tres eventos in line. Veamos qué hacen:

  • ondrop: Controla si en el div se han “soltado” elementos con la propiedad draggable (que pueden ser arrastrados) sobre él. Esto, evidentemente, determina que se trata de una zona drop válida que permite alojar esos elementos provenientes de un drag (“arrastre”). Al hacerlo llamará a la función drop, pasándole como argumento el propio evento.
  • ondragover: Controla que en el div se están arrastrando elementos con la propiedad draggable hacia una zona que permita “soltar” esos elementos. Al hacerlo llamará a la función allowDrop, pasándole como argumento el propio evento.
  • ondragleave: Controla el momento en que un elemento draggable abandona la zona drop donde se encuentra.

El div con id containerElementos dispone de los mismos eventos arriba mencionados. Esto permite que de él se puedan tanto arrastrar como soltar elementos, lo mismo que ocurre con los div contenidos en el div contenedor containerVotación de forma individual.

En su interior cuenta con tres imágenes que se encargan de mostrar los logos de las tres redes sociales más relevantes del momento, las cuales tienen un id correspondiente a la red social en cuestión, y cuyos eventos pasamos a comentar:

  • draggable: Permite que el elemento puede ser “arrastrado” hacia una zona drop válida. Como vemos, se trata de una propiedad que únicamente hay que igualar a true para que funcione sobre el elemento donde estemos declarándola.
  • ondragstart: Este evento se dispara cuando el elemento comienza a ser “arrastrado” desde una zona drop válida.
  • ondragend: El evento se dispara cuando el usuario finaliza el “arrastrado” del elemento sobre una zona drop válida.

Con todo esto, y resumiendo, lo que tenemos es una zona que contiene elementos “arrastrables” y que, a su vez, permite depositar elementos “arrastrados” a nivel general. Lógicamente se trata del div containerElementos y sus img correspondientes. Por otro lado tenemos la zona que contiene a su vez zonas individuales que permiten igualmente depositar elementos “arrastrados” o que se “arrastren” a partir de ellos. Se trara del div containerVotacion y sus correspondientes div con id igual al tipo de nota que queremos otorgar al elemento draggable en cuestión.

Para finalizar, tenemos en el pie de página un botón que será el encargado de obtener los resultados de la votación.

Veamos ahora el código javascript encargado de toda la funcionalidad:

var destino;
var arrastrando;
var ancho;
var alto;
var resultado=new Array();
var resultadoFinal=new Array();

function allowDrop(ev)
{
ev.preventDefault();
destino = devuelveElemento(ev);
destino.style.opacity="0.4";
}

function drag(ev)
{
arrastrando = devuelveElemento(ev);
ancho = arrastrando.width;
alto = arrastrando.height;
arrastrando.style.width=ancho/2+"px";
arrastrando.style.height=alto/2+"px";
var dragIcon = document.createElement('img');
dragIcon.src = 'img/vote.png';
dragIcon.width = 100;
ev.dataTransfer.setDragImage(dragIcon, -10, -10);
ev.dataTransfer.setData("Text", ev.target.id);
}

function dragLeave(ev){
destino.style.opacity="1";
}

function dragEnd(ev){
arrastrando.style.width=ancho+"px";
arrastrando.style.height=alto+"px";
}

function drop(ev)
{
var contenedorUsado = destino.id;
var elementoVotado = arrastrando.id;
resultados(contenedorUsado,elementoVotado);
ev.preventDefault();
destino.style.opacity="1";
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

function devuelveElemento(ev){
var elemento = document.getElementById(ev.target.id);
return elemento;
}

function resultados(voto,votado){
resultado.push(voto+" "+votado);
}

function obtenerResultados(){

resultadoFinal = sanearResultados();

var ancho= 700;
var alto = 500;
var posicion_x;
var posicion_y;
posicion_x=(screen.width/2)-(ancho/2);
posicion_y=(screen.height/2)-(alto/2);
MiVentana = window.open("","Resultados Drag&Drop HTML5","toolbar=no, location=no, status=no, resizable=no, top="+ posicion_y +", left="+ posicion_x +", width=700, height=500");
MiVentana.document.write('<!DOCTYPE html>\n<head>\n<title>Resultados Drag&Drop HTML5</title>');
MiVentana.document.write('\n<meta charset="utf-8"/>');
MiVentana.document.write('\n<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700&subset=latin,latin-ext" rel="stylesheet" type="text/css">');
MiVentana.document.write('\n<link rel="stylesheet" type="text/css" href="css/estilo.css"/>');
MiVentana.document.write('\n</head>\n<body>\n<div id="header">');
MiVentana.document.write('\n<img id="cabecera" src="img/cabecera.png" />');
MiVentana.document.write('\n<h2>Resultados</h2>\n');
for (var z=0;z<resultadoFinal.length;z++){
MiVentana.document.write(resultadoFinal[z]+"<br>\n");
}
MiVentana.document.write('<br>');
MiVentana.document.write('\n<input type="button" value="Cerrar" onclick="window.close()">');
MiVentana.document.write('\n</div>\n</body>\n</html>');
MiVentana.document.close();
}

function sanearResultados(){

var social = [];
var controlFacebook=0;
var controlTwitter=0;
var controlLinkedin=0;

for (var j=1;j<=resultado.length;j++){

var elemento = resultado[resultado.length-j].toString();

if (elemento.indexOf("Elementos")>0){
continue;
}

if (elemento.indexOf("facebook")>0 && controlFacebook==0){
social.push(elemento);
controlFacebook = 1;
}
if (elemento.indexOf("twitter")>0 && controlTwitter==0){
social.push(elemento);
controlTwitter = 1;
}
if (elemento.indexOf("linkedin")>0 && controlLinkedin==0){
social.push(elemento);
controlLinkedin = 1;
}

}

return social;
}

 
Bien, vayamos por partes.
Al principio declaramos unas cuantas variables a nivel global. Dos de ellas arrays.
Todas las funciones que se llaman cuando se desencadena algún evento ya visto, tienen como parámetro ev, es decir, el propio origen del evento mismo.

La función allowDrop, que se dispara cuando un elemento draggable pasa por una zona drop válida, lo que hace es guardar en la variable destino cuál es el elemento (en nuestro caso un div) sobre el que se está arrastrando un elemento draggable (en nuestro caso los img). Para ello se llama a la función devuelveElemento pasándole a su vez el origen del evento recibido. También damos una opacidad para que el contenedor drop disponible sobre el que se pasa, nos informe de que está listo para recibir el elemento draggable.

La función drag se dispara cuando un elemento draggable comienza a ser “arrastrado”. Para conocer de cúal se trata aprovechamos de nuevo la función devuelveElemento y lo guardamos en la variable creada para ello. Seguidamente hayamos su alto y ancho para asignarle la mitad de ambos durante el efecto de “arrastrado”. Además, creamos dinámicamente un pequeño icono bajo el elemento “arrastrado” para indicar al usuario que se está llevando a cabo el proceso. Para añadirlo definitivamente a nuestro elemento en proceso de “arrastrado”, debemos llamar al método dataTransfer, primero seteando su posición respecto al elemento “arrastrado” y después haciendo lo propio con el tipo de dato.

La función dragLeave se ejecuta cuando un elemento draggable deja de estar sobre una zona drop válida. En ese caso lo único que hacemos es eliminar la opacidad que tenga el contenedor drop sobre el que se acaba de terminar de pasar.

La función dragEnd devuelve el tamaño completo al elemento “arrastrado” cuando éste termina de “aterrizar” sobre una zona drop válida.

La función drop es llamada cuando una zona drop válida termina de recibir un elemento draggable. En ese momento obtenemos qué zona drop de nuestra aplicación está recibiendo el elemento y cuál es ese elemento (en nuestro caso el img de alguna red social). Esto ya lo sabemos gracias a las variables globales destino y arrastrando, que ya han guardado anteriormente esa información durante los pasos previos. Una vez los conocemos, llamamos a la función resultados pasándole esos datos. Lo que hace es añadirlos a un array, tal y como podemos comprobar un poco más abajo. Además eliminamos la opacidad de la zona drop y quitamos el icono que habíamos añadido para indicar que el elemento draggable estaba siendo arrastrado.
Finalmente, las funciones que nos quedan se van a encargar de obtener los resultados finales de la votación cuando pulsemos sobre el botón correspondiente.

La funcion obtenerResultados, que es la que se ejecuta al pulsar dicho botón, lo primero que hace es llamar al método sanearResultados. Dado que el usuario puede variar las veces que desee el elemento a votar por diferentes opciones drop, debemos tener en cuenta que, cada vez que lo haga, se registrará la votación dentro del array resultado visto anteriormente. Por esa razón debemos obtener siempre la última votación que haya recibido cada red social, ya que, como sabemos, un array siempre va guardando la información al final del mismo, a menos que no se le indique lo contrario. Así pues podemos ver que el bucle for comienza a recorrer el array por el final y va extrayendo la primera coincidencia que encuentra según el nombre de la red social. Todo ello se guarda en un nuevo array limpio de polvo y paja, y se devuelve como resultado.
Cuando se ha recuperado ese resultado desde la función obtenerResultados donde nos encontrábamos, lo único que hacemos es presentar una ventana flotante que mostrará finalmente, ahora sí, el resultado final, recorriendo para ello el nuevo array saneado que acabamos de recuperar.

Y eso es todo.

Quiero disculparme si la explicación es algo confusa, pero la verdad es que es algo complicado intentar plasmar a fondo línea a línea, qué es lo que hace cada una, sin ser algo redundante.
Recomiendo encarecidamente descargar la aplicación, probarla y, a continuación, con el código delante, volver a leer el artículo.
La aplicación completa cuenta con todos los recursos, fuentes y estilos, que terminan por otorgarle un buen aspecto final.

Descarga desde Github

Espero que este articulo os sirva para comprender un poco mejor cómo funciona esta maravillosa utilidad de HTML5 y, sobre todo, vislumbrar las infinitas posibilidades que nos puede ofrecer.
Gracias y un saludo.-

Capturas:

 

Drag&Drop

 

Drag&Drop

 

Drag&Drop

Anuncios

Dada la gran cantidad de preguntas que he recibido acerca de cómo implementar un sistema basado en roles en CakePHP, he decidido hacer este post para aclarar todas esas cuestiones, ya que creo que con un ejemplo completo todo quedará más claro.
Dicho ejemplo contará tanto con un apartado de registro de nuevos usuarios, así como con el sistema de autenticación correspondiente y, evidentemente, con el meollo de la cuestión: un sistema de acceso a zonas de la aplicación basada en roles. Además todo ello funcionando bajo la versión 2.6 de CakePHP. ¿Qué más se puede pedir?
Debido a que poner todo el código completo en el post lo haría demasiado extenso e intimidatorio, voy a mostrar y explicar solo aquellas partes relevantes que componen esta aplicación. Doy por hecho que el lector ya tiene conocimientos sobre CakePHP, al menos los esenciales.
De todas formas, como no podía ser de otra manera, al final de todo, pondré un enlace a mi repositorio en Github para que podáis descargar y probar el proyecto.
Comenzemos pues.
Lo primero será crear nuestra base de datos:

 

CREATE TABLE users (
    `id` INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    `username` VARCHAR(128),
    `password` VARCHAR(128),
    `email` VARCHAR(128),
    `role` VARCHAR(64),
    `created` DATETIME DEFAULT NULL,
    `modified` DATETIME DEFAULT NULL,
    `status` tinyint(1) NOT NULL DEFAULT '1'
);

El campo ‘status’ lo usaremos para poder activar o desactivar usuarios sin necesidad de eliminarlos totalmente de nuestra BBDD. Lo veremos más adelante.

Importante: Antes de nada, accediendo a nuestra BBDD, deberemos poner el campo ‘role’ con un valor predeterminado personalizado: ‘usuario’ (sin las comillas, obviamente).

Deberemos tener en cuenta que hay que modificar los datos en el archivo app/Config/database.php.default para establecer los datos de conexión que hayamos elegido: nombre de la BBDD, usuario, contraseña, tipo de BBDD…, y guardar los cambios como database.php. De esta forma ya estaremos listos para conectar nuestra aplicación con la BBDD.
En el archivo routes.php de la misma carpeta tenemos las siguientes rutas definidas:

 

<?php
/**
 * Routes configuration
 *
 * In this file, you set up routes to your controllers and their actions.
 * Routes are very important mechanism that allows you to freely connect
 * different urls to chosen controllers and their actions (functions).
 *
 * PHP 5
 *
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @package       app.Config
 * @since         CakePHP(tm) v 0.2.9
 * @license       http://www.opensource.org/licenses/mit-license.php MIT License
 */
/**
 * Here, we are connecting '/' (base path) to controller called 'Pages',
 * its action called 'display', and we pass a param to select the view file
 * to use (in this case, /app/View/Pages/home.ctp)...
 */
//Router::connect('/', array('controller' => 'pages', 'action' => 'display', 'home'));
Router::connect('/', array('controller' => 'users', 'action' => 'login'));
/**
 * ...and connect the rest of 'Pages' controller's urls.
 */
//Router::connect('/pages/*', array('controller' => 'pages', 'action' => 'display'));
Router::connect('/gestion', array('controller' => 'users', 'action' => 'index'));
Router::connect('/login', array('controller' => 'users', 'action' => 'login'));
Router::connect('/logout', array('controller' => 'users', 'action' => 'logout'));

/**
 * Load all plugin routes. See the CakePlugin documentation on
 * how to customize the loading of plugin routes.
 */
	CakePlugin::routes();

/**
 * Load the CakePHP default routes. Only remove this if you do not want to use
 * the built-in default routes.
 */
	require CAKE . 'Config' . DS . 'routes.php';

Esto nos permitirá tener URL más limpias.
Para resumir, lo que vamos a realizar es un sistema de gestión de usuarios. Al ejecutar la aplicación nos va a redirigir automáticamente al login. Allí podremos loguearnos, si ya estamos registrados, o bien acceder a la vista de creación de nuevo usuario para registrarnos.
Por defecto, todo usuario nuevo tendrá un rol de ‘usuario’ y, por lo tanto, una vez rellene el formulario de login correctamente, será redirigido a una página donde solo podrá ver la lista de usuarios, pero no editarlos ni eliminarlos. A esto último solo tendrán acceso aquellos usuarios que tengan un rol de ‘admin’, los cuales serán redirigidos a una página especial que aparecerá en la URL como ‘gestion’.

Dado entonces que tan solo los administradores podrán crear, editar y eliminar usuarios, necesitamos antes de nada crear a mano nuestro super usuario en la base de datos.

Podemos hacerlo de dos formas:

La primera consistiría en ejecutar la aplicación y registrarnos. Esto nos proporciona un rol de ‘usuario’, pero no es lo que queremos. Así que no tendremos más remedio que entrar a nuestra BBDD y cambiar el rol a ‘admin’. De esta forma, ahora sí, ya somos los únicos que tendremos acceso a todo el sistema. Si nos fijamos observaremos que la contraseña está encriptada. Esto es así porque hemos usado las herramientas que nos ofrece CakePHP para hacerlo (lo veremos a continuación). Por defecto CakePHP usa SHA1, lo que nos lleva a la segunda forma de poder crear nuestro administrador que, aunque es más complicada, nos ayudará a comprender mejor cómo encripta CakePHP las contraseñas o cualquier otro campo que queramos así.

Dado que la aplicación trabaja con SHA1 para encriptar las contraseñas de todos los usuarios, administradores o no, deberemos introducir en el campo ‘password’ de la BBDD la contraseña de nuestro administrador encriptada también si lo vamos a hacer a mano.
Para ello lo primero que haremos será ir a nuestro archivo app/Config/core.php y consultar cuál es nuestro Security.salt. En el caso de este ejemplo se encuentra en la línea 197 y luce tal que así:

Configure::write(‘Security.salt’, ‘Orange6f7cead48bd13a0cBlack0d61eb8a3502c68cacec32caYellow’);

Como ya sabéis, cuando comenzamos con una instalación limpia de Cake, la primera vez que la ejecutamos nos recuerda que debemos cambiar por seguridad los strings tanto en el Security.salt como en el Security.cypher. Es decir, el Security.salt que os he mostrado es solo a modo de ejemplo, cada uno puede poner lo que desee tanto aquí como en el string del Security.cypher.

Una vez aclarado esto, seguimos. Copiamos el string que tengamos en el Security.salt (sin las comillas, claro está) y nos vamos a la siguiente página:

Sha1 online generator

Se trata de un generador de SHA1 online. Debajo de donde se indica “Text to convert” pegamos nuestro Security.salt. A continuación, sin espacios, escribimos la clave que deseamos para nuestro administrador. Por ejemplo algo así:

Orange6f7cead48bd13a0cBlack0d61eb8a3502c68cacec32caYellowmi_contraseña_admin

Presionamos en el botón “Generate SHA1” y entonces obtendremos un poco más abajo nuestro SHA1 completo. Ahora copiamos el resultado y lo introducimos en el campo password de nuestro usuario administrador (role ‘admin’) en la BBDD.

Ya está, ya lo tenemos. Solo tendremos que acordarnos, lógicamente, de la contraseña que pusimos anteriormente como mi_contraseña_admin antes de generar el SHA1. Con esto ya podremos acceder a nuestra aplicación sin restricciones.

Ahora, una vez terminados los preparativos, vamos con las partes esenciales de la aplicación para que todo funcione perfectamente.
En el archivo app/Controller/AppController nos encontramos con esto:

 

<?php
/**
 * Application level Controller
 *
 * This file is application-wide controller file. You can put all
 * application-wide controller-related methods here.
 *
 * PHP 5
 *
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @package       app.Controller
 * @since         CakePHP(tm) v 0.2.9
 * @license       http://www.opensource.org/licenses/mit-license.php MIT License
 */
App::uses('Controller', 'Controller');

/**
 * Application Controller
 *
 * Add your application-wide methods in the class below, your controllers
 * will inherit them.
 *
 * @package		app.Controller
 * @link		http://book.cakephp.org/2.0/en/controllers.html#the-app-controller
 */
class AppController extends Controller {

	// added the debug toolkit
	// sessions support
	// authorization for login and logut redirect
	public $components = array(
		'DebugKit.Toolbar',
		'Session',
        'Auth' => array(
            'loginRedirect' => array('controller' => 'users', 'action' => 'index'),
            'logoutRedirect' => array('controller' => 'users', 'action' => 'login'),
			'authError' => 'Debes estar logueado para continuar',
			'loginError' => 'Nombre de usuario o contraseña incorrectos',
			'authorize' => array('Controller') 
        ));
	
	// only allow the login controllers only
	public function beforeFilter() {
        $this->Auth->allow('login');
    }
	
	public function isAuthorized($user) {
		// Admin puede acceder a todo
		// Si no es así entonces se trata de un usuario común y lo redirigimos a otra página.
		// En este caso a la acción usuario del controller users
	    if (isset($user['role']) && $user['role'] === 'admin' && $this->action='index') {
	        return true;
	    }
		elseif ($user['status'] == 1){
            $this->Session->setFlash('Bienvenido, '. $this->Auth->user('username'));
            $this->redirect('usuario');
            return true;
        }
	 	//Por defecto se deniega el acceso
	    return false;
	}
	
}

Cargamos los componentes que vamos a necesitar: Debug (opcional), Session y Auth. En Auth indicamos las redirecciones de login y logout, así como los mensajes que aparecerán cuando se producen errores al autorizar o loguear a un usuario.

En la función beforeFilter, autorizamos solo el uso de la vista login a cualquiera que inicie la aplicación.

En la función isAuthorized vamos a cotrolar el acceso según el rol de usuario que, evidentemente, ya esté autorizado a visitar otras partes de nuestra aplicación además del login.

Primero comprobamos si el usuario tiene un rol asignado, si este rol es admin, y si a lo que intenta acceder es al index de nuestra aplicación, es decir, a la página de gestión solo para administradores. Si esto se cumple devolvemos cierto. Si no es así entonces sabemos que el usuario tiene un rol de ‘usuario’, valga la redundancia, y comprobamos si está activo, es decir, si no ha sido borrado temporalmente de la BBDD (esto lo veremos más adelante). Si es así, entonces, y solo entonces, le permitimos la acción ‘usuario’ de nuestro controlador que le redirigirá a la página para los no administradores y devolvemos cierto.

Si ninguna de las anteriores condiciones se cumple entonces devolvemos false.

Veamos nuestro controlador en app/Controller/UsersController. En él figuran los típicos métodos para añadir (add) y modificar (edit) en los que no entraré en detalles. Sobre la propiedad $paginate creo que tampoco hay nada que explicar. Detengámonos sin embargo en la función beforeFilter. Podemos observar que sobreescribe el método de AppController para dejar acceso a ‘add’, ya que sino no sería posible que alguien pudiera registrarse al iniciar la aplicación. Seguidamente hacemos uso de nuestro componente Auth y comprobamos si el usuario (supuestamente ya autorizado) tiene el rol de administrador. Si es así le autorizamos cualquier acción en nuestro Controller. Si, por el contrario, su rol es el de un usuario común, entonces le dejamos solo acceso a las acciones logout y usuario.

 

<?php

//...

public function beforeFilter() {
        parent::beforeFilter();
        $this->Auth->allow('login','add');

        //Si el usuario tiene un rol de admin entonces le dejamos paso a todo.
        //Si no es así se trata de un usuario común y le permitimos solo la acción
        //logout y la correspondiente a usuario (página solo para ellos)
	    if($this->Auth->user('role') === 'admin') {
	        $this->Auth->allow();
	    } elseif ($this->Auth->user('role') === 'usuario') { 
	        $this->Auth->allow('logout', 'usuario');
	    } 
    }
?>

//...

La función usuario, tal y como puede comprobarse, se limita a paginar y renderizar la vista usuario sin más.

 

<?php
//...    

    //Acción para redirigir a los usuarios con rol usuario común
    public function usuario() {
    	$this->paginate = array(
			'limit' => 10,
			'order' => array('User.username' => 'asc' )
		);
    	$users = $this->paginate('User');
		$this->set(compact('users'));
    	$this->render('/Users/usuario');
    }

//...
?>

La función login se encarga, como no podía ser de otra manera, de comprobar si el usuario está autenticado. Si lo está entonces lo redirige a donde le corresponda mediante la instrucción:

$this->redirect($this->Auth->redirectUrl());

El encargado de redirigir correctamente ya lo hemos visto. Se trata de nuestra función isAuthorized del AppController. Ella es realmente quien vigilará dónde y dónde no puede entrar según quién.
Si alguno de los datos del formulario no son correctos o, por alguna razón, alguien intenta acceder por la fuerza modificando la URL, será reconducido de nuevo al formulario de login con un mensaje de aviso.

 

<?php
//...
	public function login() {
		
		//if already logged-in, redirect
		if($this->Session->check('Auth.User')){
			$this->redirect(array('action' => 'index'));		
		}
		
		// if we get the post information, try to authenticate
		if ($this->request->is('post')) {
			if ($this->Auth->login()) {
				$this->Session->setFlash(__('Bienvenido, '. $this->Auth->user('username')));
				$this->redirect($this->Auth->redirectUrl());
			} else {
				$this->Session->setFlash(__('Nombre de usuario o contraseña incorrectos'));
			}
		} 
	}
//...
?>

La función logout no tiene más misterio que usar nuestro componente Auth para dicha operación.

La función index, a la cual, como ya sabemos, solo podrán acceder los administradores, se encarga simplemente de paginar los resultados en la vista correspondiente. Recordemos que en nuestra URL aparecerá ‘gestion’ ya que así lo indicamos en nuestro archivo routes.php

Las funciones delete y activate lo que hacen es cambiar el estado de ‘status’ del usuario en la BBDD en función de si ya estaba o no activado. Se ejecutará una u otra dependiendo del estado en que se encuentre el usuario previamente.
En la vista index.ctp tenemos este trozo de código para controlar esto:

Html->link(“Borrar”, array(‘action’=>’delete’, $user[‘User’][‘id’]));}else{
echo $this->Html->link(“Reactivar”, array(‘action’=>’activate’, $user[‘User’][‘id’]));
}
?>

Si el usuario tiene un estado distinto de 0 entonces es que está activo y mostramos el enlace para la acción delete. Si no es así es que el usuario no está activado y, por lo tanto, mostraremos entonces el enlace para reactivarlo. Simple pero efectivo, ¿no?

 

<?php
//...
    public function delete($id = null) {
		
		if (!$id) {
			$this->Session->setFlash('Es necesario proveer un ID de usuario!!!');
			$this->redirect(array('action'=>'index'));
		}
		
        $this->User->id = $id;
        if (!$this->User->exists()) {
            $this->Session->setFlash('ID inválido');
			$this->redirect(array('action'=>'index'));
        }
        if ($this->User->saveField('status', 0)) {
            $this->Session->setFlash(__('Usuario eliminado'));
            $this->redirect(array('action' => 'index'));
        }
        $this->Session->setFlash(__('Hubo un error y no se pudo eliminar al usuario'));
        $this->redirect(array('action' => 'index'));
    }
	
	public function activate($id = null) {
		
		if (!$id) {
			$this->Session->setFlash('Es necesario proveer un ID de usuario!!!');
			$this->redirect(array('action'=>'index'));
		}
		
        $this->User->id = $id;
        if (!$this->User->exists()) {
            $this->Session->setFlash('ID inválido');
			$this->redirect(array('action'=>'index'));
        }
        if ($this->User->saveField('status', 1)) {
            $this->Session->setFlash(__('Usuario reactivado'));
            $this->redirect(array('action' => 'index'));
        }
        $this->Session->setFlash(__('Hubo un error y no se pudo reactivar al usuario'));
        $this->redirect(array('action' => 'index'));
    }
//...
?>

Nota: Debemos tener en cuenta que un usuario administrador no puede desactivar a otro usuario administrador. Aunque en la base de datos aparezca como status = 0 seguirá pudiendo acceder a cualquier parte de la aplicación. Es lógico. Le hemos dicho a nuestra aplicación que un administrador siempre tiene acceso a todo precisamente por tener esa característica. Claro está que un administrador puede cambiar el rol de otro administrador a ‘usuario’. Entonces sí podrá desactivarlo de la aplicación realmente.

Las vistas index.ctp y usuario.ctp solamente difieren en la parte de contenido que se quiere mostrar según sea el usuario administrador o no.

Vista Index.ctp:

 

<!-- app/View/Users/index.ctp -->
<div class="users form">
<h1 style="font-weight: bold; color: red; text-decoration: underline;"> Página solo para administradores</h1>
<h1>Usuarios:</h1>
<table>
    <thead>
		<tr>
			<th><?php echo $this->Form->checkbox('all', array('name' => 'CheckAll',  'id' => 'CheckAll')); ?></th>
			<th><?php echo $this->Paginator->sort('username', 'Usuario');?>  </th>
			<th><?php echo $this->Paginator->sort('email', 'E-Mail');?></th>
			<th><?php echo $this->Paginator->sort('created', 'Creado');?></th>
			<th><?php echo $this->Paginator->sort('modified','Modificado');?></th>
			<th><?php echo $this->Paginator->sort('role','Rol');?></th>
			<th><?php echo $this->Paginator->sort('status','Estado');?></th>
			<th>Acciones</th>
		</tr>
	</thead>
	<tbody>						
		<?php $count=0; ?>
		<?php foreach($users as $user): ?>				
		<?php $count ++;?>
		<?php if($count % 2): echo '<tr>'; else: echo '<tr class="zebra">' ?>
		<?php endif; ?>
			<td><?php echo $this->Form->checkbox('User.id.'.$user['User']['id']); ?></td>
			<td><?php echo $this->Html->link( $user['User']['username']  ,   array('action'=>'edit', $user['User']['id']),array('escape' => false) );?></td>
			<td style="text-align: center;"><?php echo $user['User']['email']; ?></td>
			<td style="text-align: center;"><?php echo $this->Time->niceShort($user['User']['created']); ?></td>
			<td style="text-align: center;"><?php echo $this->Time->niceShort($user['User']['modified']); ?></td>
			<td style="text-align: center;"><?php echo $user['User']['role']; ?></td>
			<td style="text-align: center;"><?php echo $user['User']['status']; ?></td>
			<td >
			<?php echo $this->Html->link("Editar", array('action'=>'edit', $user['User']['id']) ); ?> | 
			<?php
				if( $user['User']['status'] != 0){ 
					echo $this->Html->link("Borrar", array('action'=>'delete', $user['User']['id']));}else{
					echo $this->Html->link("Reactivar", array('action'=>'activate', $user['User']['id']));
					}
			?>
			</td>
		</tr>
		<?php endforeach; ?>
		<?php unset($user); ?>
	</tbody>
</table>
<?php echo $this->Paginator->prev('<< ' . __('previous', true), array(), null, array('class'=>'disabled'));?>
<?php echo $this->Paginator->numbers(array(   'class' => 'numbers'     ));?>
<?php echo $this->Paginator->next(__('next', true) . ' >>', array(), null, array('class' => 'disabled'));?>
</div>				
<?php echo $this->Html->link( "Crear usuario",   array('action'=>'add'),array('escape' => false) ); ?>
<br/>
<?php 
echo $this->Html->link( "Logout",   array('action'=>'logout') ); 
?>

Vista usuario.ctp

 

<!-- app/View/Users/usuario.ctp -->
<div class="users form">
	<h1 style="font-weight: bold; color: red; text-decoration: underline;"> Página de usuario común</h1>
	<h1>Usuarios:</h1>
	<table>
	    <thead>
			<tr>
				<th><?php echo $this->Form->checkbox('all', array('name' => 'CheckAll',  'id' => 'CheckAll')); ?></th>
				<th><?php echo $this->Paginator->sort('username', 'Usuario');?>  </th>
				<th><?php echo $this->Paginator->sort('email', 'E-Mail');?></th>
				<th><?php echo $this->Paginator->sort('created', 'Creado');?></th>
				<th><?php echo $this->Paginator->sort('modified','Modificado');?></th>
				<th><?php echo $this->Paginator->sort('role','Rol');?></th>
				<th><?php echo $this->Paginator->sort('status','Estado');?></th>
				<th>Actions</th>
			</tr>
		</thead>
		<tbody>						
			<?php $count=0; ?>
			<?php foreach($users as $user): ?>				
			<?php $count ++;?>
			<?php if($count % 2): echo '<tr>'; else: echo '<tr class="zebra">' ?>
			<?php endif; ?>
				<td><?php echo $this->Form->checkbox('User.id.'.$user['User']['id']); ?></td>
				<td><?php echo $this->Html->link( $user['User']['username']  ,   array('action'=>'edit', $user['User']['id']),array('escape' => false) );?></td>
				<td style="text-align: center;"><?php echo $user['User']['email']; ?></td>
				<td style="text-align: center;"><?php echo $this->Time->niceShort($user['User']['created']); ?></td>
				<td style="text-align: center;"><?php echo $this->Time->niceShort($user['User']['modified']); ?></td>
				<td style="text-align: center;"><?php echo $user['User']['role']; ?></td>
				<td style="text-align: center;"><?php echo $user['User']['status']; ?></td>
			</tr>
			<?php endforeach; ?>
			<?php unset($user); ?>
		</tbody>
	</table>
	<?php echo $this->Paginator->prev('<< ' . __('previous', true), array(), null, array('class'=>'disabled'));?>
	<?php echo $this->Paginator->numbers(array(   'class' => 'numbers'     ));?>
	<?php echo $this->Paginator->next(__('next', true) . ' >>', array(), null, array('class' => 'disabled'));?>
</div>				
<br/>
<?php 
echo $this->Html->link( "Logout",   array('action'=>'logout') ); ?>

Por otro lado, para terminar, tenemos el archivo del modelo User.php
En él se declara toda la lógica de validación de los campos de formulario que tenemos en todas nuestras vistas. Por supuesto podemos modificar cualquier criterio de validación para adaptarlo a nuestras necesidades.
Podemos observar que a continuación de estas reglas de validación figuran varias funciones personalizadas que se encargan de comparar la coincidencia de los campos para las contraseñas, de si un usuario o un email ya existen en nuestra BBDD, y de, mediante el método beforeSave(), encriptar a SHA1 nuestras contraseñas antes de guardarlas. Dicho método está en estrecha consonancia con lo que hemos hecho al principio de este tutorial cuando creábamos nuestro usuario administrador en la BBDD.

 

<?php
//...
	/**
	 * Before Save
	 * @param array $options
	 * @return boolean
	 */
	 public function beforeSave($options = array()) {
		// hash our password
		if (isset($this->data[$this->alias]['password'])) {
			$this->data[$this->alias]['password'] = AuthComponent::password($this->data[$this->alias]['password']);
		}
		
		// if we get a new password, hash it
		if (isset($this->data[$this->alias]['password_update'])) {
			$this->data[$this->alias]['password'] = AuthComponent::password($this->data[$this->alias]['password_update']);
		}
	
		// fallback to our parent
		return parent::beforeSave($options);
	}
//...
?>

Pues ya está, hemos terminado. Ahora, basándonos en lo que hemos visto, podríamos añadir todas las acciones y vistas que deseemos y ajustar la autorización según roles en los apartados relevantes para ello. De esta forma, cualquier aplicación que desarrollemos estará protegida ante cualquier intento de acceso inesperado o no autorizado.

El código completo de la aplicación lo podéis descargar de mi repositorio en Github:

Descargar proyecto completo

Espero que os haya gustado y os sea útil en todos vuestros proyectos realizados con este maravilloso framework CakePHP.

Para cualquier duda poneos en contacto conmigo escribiendo a través del blog o enviándome un email por privado a hardwebnet@hardwebnet.es

Un saludo.-

Hacer software no es una tarea sencilla. Si añadimos la necesidad de ser productivos en dicho proceso, además de escribir código reutilizable y robusto, la dificultad aumenta considerablemente.
Para enfrentarnos al problema contamos con muchas y variadas herramientas y técnicas al margen, claro está, del lenguaje de programación que vayamos a utilizar que, por supuesto, deberemos dominar sin lugar a dudas.
Una de esas técnicas de desarrollo, que ya lleva en funcionamiento muchos años con éxito, es el TDD o Test-Driven development.
Consiste en realizar los test de pruebas antes de implementar el código. Habitualmente dichas pruebas suelen realizarse después de la codificación, pero TDD nos ofrece una alternativa. Esto que puede parecer una pérdida de tiempo para muchos, no lo es si tenemos en cuenta el ahorro que nos supondrá tener un código fiable desde el principio. Esto nos evitará tener que volver a revisarlo posteriormente una y otra vez en busca de errores, bugs y demás.
Esta técnica, que ha sido aceptada en países como Estados Unidos, es casi una herejía para muchas empresas o jefes de proyecto que ven en ello un retraso en el desarrollo inmediato del software que ha solicitado el cliente. Es cierto que se requiere de una buena inversión de tiempo y recursos a corto plazo, pero nos reportará una garantía que será válida a largo plazo. Es decir, lo que hoy parece retrasarnos mañana será un avance en tiempo y costos.
Para introducirnos en este interesante tema os dejo el enlace a un libro gratuito escrito por Carlos Blé Jurado, titulado Diseño ágil con TDD.
Os aseguro que se trata de un libro fascinante que se lee apasionadamente. La explicación es llana y sencilla, acompañada a partir de la mitad del libro de un proyecto desde cero, donde se pueden ir siguiendo los pasos poco a poco para ir comprendiendo a fondo cómo debemos aplicar esta técnica, porque no se trata de hacerlo maquinalmente sino de aprehenderlo y hacerlo parte de nuestro trabajo, como una filosofía propia a la hora de desarrollar.
En definitiva un libro necesario e imprescindible.
Descargar PDF “Diseño ágil con TDD”
Descargar PDF (versión para lectores electrónicos) “Diseño ágil con TDD”