Vamos a crear un formulario css válido, con validación en el lado de cliente mediante jquery, y enviando los datos al servidor con ajax. Para el ejemplo, vamos a validar un usuario y contraseña, para la lógica en el lado del servidor usaremos php. Para que toda la programación php sea más fácil y no tengamos que escribir ni una sóla linea de sql usaremos objetos generados con pog (php object generator). Todo esto, con tan sólo unas pocas lineas de código…. ¿Qué más puedes pedir?

El objetivo de este pequeño tutorial es demostrar como crear un formulario css válido de forma simple, poder validar el logeo de un usuario. Usaremos jquery para validar el formulario en el lado del cliente, php ayudado de pog (para los que no conozcan pog les puede servir también de introducción). Puedes ver el ejemplo funcionando aquí. Bueno, empecemos.

El formulario, CSS y XHTML

  1. <div id="bloqueLogin">
  2. <form id="formulario" action="ajax.php" method="post">
  3. <h1>Login de usuario</h1>
  4. Formulario basico, validación de usuarios con php y Jquery
  5.  
  6.     <label for="usuario">Login
  7.             <span class="small">Introduce tu login</span>
  8.     </label>
  9. <input id="usuario" name="usuario" type="text" />
  10.  
  11.         <label for="password">Password
  12.         <span class="small">Introduce tu password</span>
  13.         </label>
  14. <input id="password" name="password" type="password" />
  15.     <button>Entrar!</button>
  16. <input id="accion" name="accion" type="hidden" value="login" /></form></div>

Lo primero en lo que tenemos que fijarnos, es que el destino del formulario es una página llamada ajax.php. En realidad, y para este ejemplo, el formulario podría llamarse a sí mismo, pero prefiero tener todo el código en un fichero (o varios) separado para tenerlo todo más claro y que todo sea después más facil de mantener. El formulario tiene un campo oculto, llamado accion. Contiene la acción que se va a ejecutar en el fichero ajax.php, en este caso, login. Explicaré todo eso más adelante.

El div con id mensaje es el que mostrará los errores de forma dinámica gracias a jquery.

Por lo demás, el código del formulario no tiene ningún misterio, he agregado span en los label para poder poner darle al visitante información sobre qué es cada campo.

Pasamos al código CSS:

body{
  1. font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
  2. font-size:12px;
  3. }
  4. p, h1, form, button{border:0; margin:0; padding:0;}
  5.  
  6. #bloqueLogin{
  7. border:solid 2px #b7ddf2;
  8. background:#ebf4fb;
  9. margin:0 auto;
  10. width:400px;
  11. padding:14px;
  12. }
  13. #bloqueLogin h1 {
  14. font-size:14px;
  15. font-weight:bold;
  16. margin-bottom:8px;
  17. }
  18. #bloqueLogin p{
  19. font-size:11px;
  20. color:#666666;
  21. margin-bottom:20px;
  22. border-bottom:solid 1px #b7ddf2;
  23. padding-bottom:10px;
  24. }
  25. #bloqueLogin label{
  26. display:block;
  27. font-weight:bold;
  28. text-align:right;
  29. width:140px;
  30. float:left;
  31. }
  32. #bloqueLogin .small{
  33. color:#666666;
  34. display:block;
  35. font-size:11px;
  36. font-weight:normal;
  37. text-align:right;
  38. width:140px;
  39. }
  40. #bloqueLogin input{
  41. float:left;
  42. font-size:12px;
  43. padding:4px 2px;
  44. border:solid 1px #aacfe4;
  45. width:200px;
  46. margin:2px 0 20px 10px;
  47. }
  48. #bloqueLogin button{
  49. clear:both;
  50. margin-left:150px;
  51. width:125px;
  52. height:31px;
  53. background:#666666 url(../imagenes/button.png) no-repeat;
  54. text-align:center;
  55. line-height:31px;
  56. color:#FFFFFF;
  57. font-size:11px;
  58. font-weight:bold;
  59. letter-spacing:1px;
  60. }
  61. #mensaje{
  62. display:none;
  63. }

Poco que comentar, simplemente destacar el display:none de #mensaje. Queremos que esa capa esté oculta cuando el formulario se muestre por primera vez.

La validación con JQuery

Pasamos al código jquery. Obviamente, tendrás que descargarlo desde su página oficial e importarlo en tu documento xhtml, en mi caso ha sido así:

  1. <script src=includes/js/jquery-1.2.6.js type=text/javascript></script>

Para los ejemplos siempre uso las versiones sin comprimir ni reducir de jquery, ya que si necesito debugear o mirar algo puedo hacerlo. Si esto fuera para una página en producción, seria recomendable usar una versión mas ligera de jquery para que la página cargara más rápido. En este ejemplo, también necesitaremos un plugin para que el trabajo con formularios desde jquery sea más facil. En mi caso he usado este, su funcionamiento, como casi todo en jquery, es bastante fácil. Si quereis más información sobre el plugin, pasaros por su página oficial, está repleta de ejemplos y documentación abundante.

Pasamos al código jquery:

  1. Si eres nuevo en <strong>jquery </strong>y nunca has usado otra libreria similar, quizá todo te suene un poco raro. Pásate por su página oficial y mirate la <a href="http://docs.jquery.com/Main_Page" target="_blank">documentación</a>, pronto te harás a su funcionamiento. Anteriormente también postee una recopilación de tutoriales de jquery que quizá te puedan ayudar.
  2.  
  3. Vayamos por partes:
  4. <pre lang="javascript">$(document).ready(function(){
  5. $('#formulario').ajaxForm({
  6. beforeSubmit: validate,
  7. success: hecho
  8. });
  9. });

Estamos diciendo que el formulario se enviará usando ajax (es decir, no se va a recargar la página). Antes de enviar el formulario llamaremos a la función validate, cuando se complete el envio de todos los datos llamaremos a la función hecho.

Pasamos a la función validate:

function validate(formData, jqForm, options) {
  1. var error = "";
  2. var form = jqForm[0];
  3. if (!form.usuario.value){
  4. error += "&lt;li&gt;Introduce el usuario&lt;/li&gt;";
  5. form.usuario.focus();
  6. }
  7. if (!form.password.value){
  8. error += "&lt;li&gt;Introduce la contraseña&lt;/li&gt;";
  9. if (form.usuario.value)
  10. form.password.focus();
  11. }
  12.  
  13. if(error.length &gt; 0){
  14. $("#mensaje").html('');
  15. $("#mensaje").append("&lt;ul&gt;" + error + "&lt;/ul&gt;");
  16. $("#mensaje").slideDown();
  17. return false;
  18. }
  19. }

Bien veamos, declaro una variable para almaenar los posibles errores que ocurran, y me declaro una variable que contendrá todo el formulario. Tenemos dos if, que comprueban que los campos tengan valores (en este caso, los dos campos son obligatorios). En el caso de que no tengan valor, agregamos un la descripción dentro de un <li> para después poder mostrarla. Si hay fallo, le damos el foco al control para que el usuario lo pueda corregir.

Finalmente, si la variable error tiene longitud mayor a cero (es decir, ha habido algún error), lo que hacemos es vaciar la capa mensaje, genero la lista con los errores y se la asigno a la capa mensaje con el metodo append, y mostramos la capa con un efectillo, en este caso, slideDown. Devolvemos false para que el formulario no se procese.

Pasamos a la función hecho.

function hecho(responseText, statusText){
  1. $("#mensaje").html("");
  2. $("#mensaje").append(responseText);
  3. $("#mensaje").slideDown();
  4. }

Recibe dos parámetros, responseText y statusText. Para más información, al igual que antes, visita su página oficial. A nosotros, en este caso nos interesa la variable responseText, que con el metodo append lo pondremos en la capa mensaje que mostraremos, al igual que antes, con slideDown

Si ya tenias algo de experiencia con jquery o similar, este código seguro que es fácil y rápido de escribir. Si no es tu caso, como ya he comentado antes, con unos ejemplos y un poco de practica lo dominarás sin mucho esfuerzo. Si hasta yo he aprendido a usarlo!

El código PHP

El código php yo lo pongo en un archivo aparte, ajax.php. Pasamos al código de dicho fichero:

include 'includes/configuration.php';
  1. if (isset($_POST['accion'])){
  2. switch ($_POST['accion']){
  3. case 'login':
  4. login();
  5. break;
  6. }
  7. }
  8.  
  9. function login(){
  10. require_once 'includes/objects/class.database.php';
  11. require_once 'includes/objects/class.usuario.php';
  12. global $configuration;
  13.  
  14. $usuario = new usuario();
  15. $lista = $usuario-&gt;GetList(array(array('login','=',$_POST['usuario']), array('password','=',$_POST['password'])));
  16. if (count($lista)){
  17. $_SESSION['logeado'] = $usuario-&gt;usuarioId;
  18. echo '&lt;p&gt;El usuario se ha logeado correctamente.&lt;/p&gt;';
  19. }
  20. else
  21. echo '&lt;p&gt;Los datos introducidos son incorrectos.&lt;/p&gt;';
  22. }

Bueno, veamos, si no conoces pog, pásate por su página a ver la documentación y los ejemplos, también es bastante fácil y rápido de aprender siempre y cuando manejes php y sepas algo de programación orientada a objetos.

En la primera línea incluyo el fichero configuration. Lo genera pog, y es el que tendrás que editar para poner los datos para la conexión con tu base de datos. Las siguientes líneas son para comprobar que acción tenemos que realizar. Para este ejemplo, podríamos haber realizado directamente la accioón de logeo, pero como pienso ir ampliandolo poco a poco, esa estructurá me servirá dentro de poco.

La función login es la que realiza todo el trabajo. Primero, instancio al objeto usuario (generado con pog, más adelante te explico cómo). Busco todos los usuarios que tengan el mismo login y password en mi base de datos. Si hay alguno, guardo en una variable de sesión su id, si no lo hay, muestro que los datos introducidos no son correctos. Obviamente, si los datos fueran correctos habría que redirigirlos a otra página, pero para el ejemplo nos sirve tal y como está.

Comentar que todo lo que muestre desde este fichero será lo que tome después la variable responseText que usamos anteriormente con jquery en la función hecho

Generando el objeto con POG

Es bastante fácil, simplemente dirígete a su página, ves poniendo los campos que vas a usar en la tabla (en el caso de este ejemplo simplemente login y password). De todo lo que nos genera, sólo nos interesa el fichero configuration.php y la carpeta objects.

Conclusión

Supongo que lo más complicado (raro más bien) de el tutorial puede ser la parte del pog. Cualquiera es libre de modificar el archivo ajax.php para hacerlo todo “a mano”. Agradecería que me lo enviarais para colgarlo también en el tutorial y que cada uno escogiera la opción que prefiriese.

Obviamente, los mensajes de error/éxito habria que modificarlos algo con css, pero para no liar más el ejemplo se ha optado por dejar la lista y los avisos tal cual.

Por otro lado, todo esto se podría haber hecho en un mismo archivo, pero me gusta tenerlo todo separado y ordenado para que cuando tenga que modificar algo sea todo más fácil.

Nota: Si os bajáis los archivos para probarlos vosotros mismos, no olvideis editar el archivo configuration.php. Los objetos de pog están generados para php 4, si usáis php 5 simplemente copiad y pegad la url del objeto, elegis php5, o sobrescribes los archivos.

Decarga todo el código fuente usado en el tutorial aquí.