Autor Pichongol “Daniel López” http://pichongol.blogspot.com [email protected] RemoteLogin Class, Login genérico para AJAX 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. La idea que se persigue con RemoteLogin, es que todo webmaster interesado pueda incluir en su sitio un módulo de login basado en AJAX + Javascript + CSS, obteniendo no sólo un impacto visual, sino también una mayor performance en un módulo tan importante para un sistema Web. Para ver una demo, click aquí Archivos del Paquete 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: 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 Formulario 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 imagen 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. 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. Autor Daniel “Pichongol” López http://pichongol.blogspot.com [email protected]