RemoteLogin Class V0.999 casi V1.0

Another Ajax Login Implementation, by Pichongol


Introducción

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

Archivos del Paquete

classes/RemoteLogin.class.php: Contiene los métodos necesarios para realizar el Login.

classes/RemoteLogin.init.php: Parámetros de configuración del RemoteLogin class

css/demo.css: CSS Stylesheet de la demostración.

css/progress_div.css: CSS Stylesheet del layer de la barra de progreso.

html/progress_div: El layer de la barra de progreso.

js/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:

1) Configuración:

  • En RemoteLogin.init.sample setear los parámetros correspondientes.
  • Renombrar RemoteLogin.init.sample a RemoteLogin.init.php
  • 2) 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');

    3) Creación del Formlario HTML con capacidades AJAX

    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. Ver demo.php, o la imágen superior.
  • 4) 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>

    5) 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.


    Daniel "Pichongol" Lopez <pichongol@yahoo.com>
    http://pichongol.blogspot.com