Un sistema de acceso con jQuery Ajax y PHP

En este articollo veremos cómo crear un sistema completo de autenticación de usuario basada en Ajax.

Para lograr nuestro objetivo que el uso de la biblioteca jQuery (que hace la vida más fácil para nosotros para el desarrollo del lado del cliente), lo que el lenguaje PHP para las operaciones del lado del servidor y MySQL para el acceso de los usuarios de datos stirage.

La base de datos

Como se ha mencionado vamos a utilizar MySQL para almacenar las credenciales de los usuarios de inicio de sesión. Con este fin, por lo tanto, necesitamos una tabla "usuarios", organizado de la siguiente manera:

• id - int (20), clave principal de incremento automático
• nombre de usuario - varchar (100)
• contraseña - varchar (100)

Abierta, por lo tanto, phpMyAdmin (o cualquier otro software para la gestión de MySQL) y crear la tabla con los campos especificados.

El propósito del campo creo que es absolutamente claro: "id" es el identificador único, en el "usuario" que vamos a grabar el nombre del usuario y, por último, en el "password" que vamos a guardar las contraseñas pasar por el dopoaverle md5 () función.

A los efectos de este artículo no es material para crear la página de registro de usuario. Vamos avoi el contramaestre, por lo tanto, para poblar la base de datos con algunos datos de prueba.

El formulario HTML

Para crear un formulario de acceso que necesitamos, por supuesto, un formulario HTML. Vamos a seguir el código de nuestro formulario:

 <form method="post" id="modulo_login" />



  



 <table border="0">



  



 <tr> <td> Nombre de usuario: </ td> <input nombre <td> = "username" type = "text" id = "username" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



 <tr> <td> Contraseña: </ td> <input nombre <td> = "password" type = "password" id = "password" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



 <tr> <td> <input type="submit" id="submit" value="Entra" /> </ td> <div id = <td> "messaggio"> </ div> </ td> </ tr>



  



 </ Table>







 </ Form>

Una pizca de CSS

Con el fin de lucir bien en nuestro trabajo necesitamos unas pocas líneas de CSS.
Por supuesto, todos los aspectos de la hoja de estilo puede ser adaptado a sus necesidades:

 div







 input {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Correcta,







 . Error {



  



 padding: 3px;



  



 text-align: center;







 }







 . Correcta,







 . Error {



  



 width: auto;



  



 font-weight: bold;



  



 border: 1px solid # 349534;



  



 fondo: # C9FFCA;



  



 color: # 008000;







 }







 . Error {



  



 border: 1px solid # CC0000;



  



 fondo: # F7CBCA;



  



 color: # CC0000;







 }

• <<
• 1
• 2
• >>