Un sistema de connexió Ajax amb jQuery i PHP

En aquest articollo veurem com crear un sistema complet per a l'autenticació d'usuaris basada en Ajax.

Per aconseguir el nostre propòsit fem servir la llibreria jQuery (que fa la vida més fàcil per a nosaltres per al desenvolupament del costat del client), PHP com a llenguatge per a les operacions del costat del servidor i les dades de MySQL stirage d'accés dels usuaris.

La base de dades

Com s'ha esmentat utilitzarem MySQL per emmagatzemar les credencials de l'usuari. Amb aquesta finalitat, per tant, necessitem una taula "usuaris" estructurats de la següent manera:

• id - int (20), clau principal d'increment automàtic
• nom d'usuari - VARCHAR (100)
• Contrasenya - VARCHAR (100)

Oberta, per tant, phpMyAdmin (o qualsevol altre programari per administrar MySQL) i crear la taula amb els rangs especificats.

El propòsit del camp crec que és absolutament clar: "id" és l'identificador únic, en el "username" anem a gravar el nom d'usuari i, finalment, en la "Contrasenya" que anem a guardar les contrasenyes dopoaverle passar pel md5 () funció.

Als efectes d'aquest article no és rellevant per a la pàgina de registre per crear els usuaris. Anem avoi el contramestre, per tant, per a poblar la base de dades amb algunes dades de prova.

El formulari HTML

Per crear un formulari d'accés que necessitem, per descomptat, un formulari HTML. Seguirem el codi del nostre formulari:

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



  



 <table border="0">



  



 <tr> <td> Nom d'usuari: </ td> <input nom <td> = "username" type = "text" id = "username" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



 <tr> <td> Contrasenya: </ td> <input nom <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 mica de CSS

Per tal de lluir bé en el nostre treball necessitem unes poques línies de CSS.
Per descomptat, tots els aspectes del full d'estil pot ser adaptat a les seves necessitats:

 p,







 input {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Corregiu







 . Error {



  



 padding: 3px;



  



 text-align: center;







 }







 . Corregiu







 . Error {



  



 width: auto;



  



 font-weight: bold;



  



 border: 1px solid # 349.534;



  



 fons: # C9FFCA;



  



 color: # 008.000;







 }







 . Error {



  



 border: 1px solid # CC0000;



  



 fons: # F7CBCA;



  



 color: # CC0000;







 }

• <<
• 1
• 2
• >>