RemoteLogin intenta facilitar la programación de un Módulo de Login en Ajax, a través de una clase escrita en PHP. Se trata de un Login genérico, que además agrega una barra de progreso a modo decorativo.  

La idea principal de RemoteLogin, es que todo webmaster interesado pueda incluir en su sitio un módulo de login basado en AJAX.

Ejemplo de la aplicacion

De esta forma obtendrá no sólo un impacto visual, sino también un mayor performance en un módulo tan importante para un sistema Web.

Archivos del Paquete

(Descarga .zip 164kb)

  • RemoteLogin.class.php: Contiene los métodos necesarios para realizar el Login.
  • RemoteLogin.init.php: Parámetros de configuración del RemoteLogin class
  • demo.css: CSS Stylesheet de la demostración.
  • progress_div.css: CSS Stylesheet del layer de la barra de progreso.
  • progress_div: El layer de la barra de progreso.
  • XMLHttpRequest.js: Funciones javascript para utilización de Ajax.
  • demo.php: Eso mismo.
  • demo_validate_user.php: Toma los datos del usuario y realiza el Login.

Modo de Uso

Como dijimos anteriormente, en demo.php tenemos un claro ejemplo de su uso. Su puesta en marcha consiste de 5 pasos:

Configuración:

  • En RemoteLogin.init.sample setear los parámetros correspondientes.
  • Renombrar RemoteLogin.init.sample a RemoteLogin.init.php

Instanciación:

Debemos iniciar e instanciar el RemoteLogin haciendo el include correspondiente. Esto nos proporciona un objeto de tipo RemoteLogin, con el nombre $loginDriver.

	/*** Inicia el RemoteLogin, obtenemos $loginBuilder ***/
  include($_SERVER['DOCUMENT_ROOT'].'classes/RemoteLogin.init.php');

Creación del Formulario HTML con capacidades AJAX 

<form <?=$loginDriver->printFormAction();?>>
<table class="loginBox">
<tr>
<td class="header"><div align="center">Acceso al Sistema</div></td>
</tr>
<tr>
<td><?=$loginDriver->printMsgDiv();?></td>
</tr>
<tr>
<td><?=$loginDriver->printUsername("onMouseOver=\"document.getElementById('infoUsuario').style.visibility='visible'\"
onMouseOut=\"document.getElementById('infoUsuario').style.visibility='hidden';\"");?></td>
</tr>
<tr>
<td><?=$loginDriver->printPassword("onMouseOver=\"document.getElementById('infoPassword').style.visibility='visible'\"
onMouseOut=\"document.getElementById('infoPassword').style.visibility='hidden';\"");?></td>
</tr>
<tr>
<td><input type="submit" value="Enviar"></td>
</tr>
</table>
</form>

Utilizaremos eventos Javascript para disparar el RemoteLogin. Para ello, utilizando el $loginDriver, dotaremos al formulario html de la información necesaria. Creamos el formulario HTML donde lo necesitemos y le imprimimos su action:
 

<form <?=$loginDriver->printFormAction();?>>

Creamos el DIV HTML para los mensajes de error: 

<?=$loginDriver->printMsgDiv();?>

Creamos los INPUT HTML, para el username y el password. En caso de que necesitamos setearles otros atributos a dichos elementos, la función de impresión los acepta como Parámetros.

Inclusión de XMLHttpRequest.js y progress_div.html:

Necesitamos incluir el XMLHttpRequest.js dentro de las etiquetas <head></head>. Dicho archivo contiene la lógica para Ajax:

<head>
  <? $loginDriver->printHeader(); ?>
</head>

Además, debemos incluir progress_div.html, que nos proporciona del efecto de barra de progreso, dentro de los tags <body></body>: 

<body>
  <? include("html/progress_div.html") ?>
</body>

EJemplo de la aplicación

Adecuación del .css al estilo de tu sitio:

El progress_div.css contiene los estilos del progress_div.html. Es cuestión de adaptarlos para que el login de tu sitio luzca homogéneo.

Acondicionamientos para el Ajax Request:

En RemoteLogin.init.php tenemos la siguiente línea de configuración: 

// Quien procesa la petición Ajax
  define ("PATH_TO_RESPONSER", 'http://www.tusitio.com/responser.php');

El Responser es el script que toma el Ajax Request y devuelve los resultados, siendo resultados posibles: Login satisfactorio => "yes" Login incorrecto => "0,1,2,…", siendo este valor subíndice del array de errores, también presente en RemoteLogin.init.php.

El script demo_validate_user.php es un ejemplo de dicho responser, aunque solo chequeando que usuario y password sean "guest". Lo lógico y más frecuente es que con estos dos datos se interactúe con alguna base de datos, o con un archivo de usuarios.

Para que tengas una idea de cómo funciona mira la demo del RemoteLogin.