Un sistem de autentificare cu jQuery Ajax si PHP

În acest articollo vom vedea cum pentru a crea un sistem complet de autentificare a utilizatorilor pe bază de Ajax.

Pentru a atinge scopul nostru, vom utiliza biblioteca jQuery (care face viaţa mai uşoară pentru noi, pentru a dezvolta client-side), ceea ce limbaj PHP pentru server-side operaţiuni şi MySQL pentru acces stirage ghidul de date.

Baza de date

Aşa cum am menţionat, vom folosi MySQL pentru a stoca datele de utilizatori "autentificare. În acest scop, prin urmare, avem nevoie de un tabel de "utilizatori", organizat, după cum urmează:

• id - int (20), cheie primară, auto increment
• numele de utilizator - varchar (100)
• parola - varchar (100)

Deschis, prin urmare, phpMyAdmin (sau orice alt software pentru gestionarea de MySQL) şi de a crea tabel cu câmpurile specificate.

Scopul a câmpului cred ca este absolut clar: "id" este identificatorul unic, în "numele de utilizator" vom înregistra numele utilizatorului şi, în sfârşit, în "parola" vom salva parolele trece prin dopoaverle md5 () funcţie.

În sensul prezentului articol nu este semnificativă pentru a crea pagina de înregistrare de utilizator. Să avoi şef de echipaj, prin urmare, pentru a popula baza de date cu unele date de test.

HTML forma

Pentru a crea un formular de autentificare avem nevoie, desigur, un formular HTML. Să urmaţi codul de formularul nostru:

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



  



 <table border="0">



  



 <tr> <td> Nume de utilizator: </ td> <input name = <td> "username" type = "text" id = "username" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



 <tr> <td> Parola: </ td> <input name = <td> "parola" type = "parola" id = "parola" 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>

Un varf de cutit de CSS

În scopul de a arăta frumos în activitatea noastră avem nevoie de cateva linii de CSS.
Desigur, toate aspectele legate de foaia de stil pot fi adaptate pentru a se potrivi nevoilor dvs.:

 div







 de intrare {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Incorect,







 . Eroare {



  



 padding: 3px;



  



 text-align: center;







 }







 . Incorect,







 . Eroare {



  



 lăţime: auto;



  



 font-Greutate: bold;



  



 frontieră: 1px solid # 349534;



  



 background: # C9FFCA;



  



 color: # 008000;







 }







 . Eroare {



  



 frontieră: 1px solid # CC0000;



  



 background: # F7CBCA;



  



 color: # CC0000;







 }

• <<
• 1
• 2
• >>