Login sistēma ar jQuery Ajax un PHP

Šajā articollo mēs redzēsim, kā izveidot pilnīgu sistēmu Ajax balstīta lietotāja autentifikāciju.

Lai sasniegtu savu mērķi mēs izmantojam jQuery bibliotēku (kas padara dzīvi vieglāku mums izveidot klienta puses), kādā valodā servera puses darbībām, PHP un MySQL datu stirage lietotāju piekļuvi.

Datu bāze

Kā jau tika minēts, mēs izmantosim MySQL, lai saglabātu lietotāju pieteikšanās akreditācijas dati. Lai to panāktu, tāpēc mums ir nepieciešams galds "lietotāji" organizēta šādi:

• id - int (20), primārā atslēga, auto pieauguma
• username - varchar (100)
• parole - varchar (100)

Open, tāpēc, phpMyAdmin (vai jebkuru citu programmatūru, lai pārvaldītu MySQL) un izveidot tabulu ar norādītajiem laukiem.

No lauka mērķis uzskatu, ka ir pilnīgi skaidrs: "id" ir unikāls identifikators, kas "username" mēs esam gatavojas ierakstīt lietotāja vārdu un, visbeidzot, "parole", mēs spēsim saglabāt paroles iet cauri dopoaverle MD5 () funkciju.

Šā panta izpratnē nav būtiski, lai radītu lietotājam reģistrācijas lapā. Ļaujiet avoi bocmanis, tāpēc, lai aizpildītu datu bāzi ar dažiem testu dati.

HTML forma

Lai izveidotu login formu, mums ir nepieciešams, protams, HTML formu. Pieņemsim sekot kodu mūsu formu:

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



  



 <table border="0">



  



 <tr> <td> Lietotājs: </ td> <input <td> name = "username" type = "text" id = "username" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



 <tr> <td> Parole: </ td> <input <td> name = "parole" type = "parole" id = "parole" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



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



  



 </ Table>







 </ Form>

Šķipsnu no CSS

Lai izskatītos labi ar savu darbu mums ir dažas rindiņas CSS.
Protams, visu stilu lapu aspekti var tikt pielāgoti, lai atbilstu jūsu vajadzībām:

 div







 input {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Pareizi,







 . Kļūda {



  



 padding: 3px;



  



 text-align: center;







 }







 . Pareizi,







 . Kļūda {



  



 platums: auto;



  



 font-svars: bold;



  



 border: 1px solid # 349.534;



  



 background: # C9FFCA;



  



 color: # 008,000;







 }







 . Kļūda {



  



 border: 1px solid # CC0000;



  



 background: # F7CBCA;



  



 color: # CC0000;







 }

• <<
• 1
• 2
• >>