Prisijungimas sistema su jQuery AJAX ir PHP

Šiuo articollo matysime, kaip sukurti visą sistemą "Ajax pagrindu vartotojo autentifikavimą.

Norint pasiekti mūsų tikslą mes naudojame jQuery bibliotekos (kuri palengvina gyvenimą mums sukurti kliento pusėje), kokia kalba PHP server-side operacijas ir MySQL duomenų stirage vartotojo prieigą.

Duomenų bazės

Kaip minėta, mes naudosime MySQL saugoti vartotojų prisijungimo duomenų. Siekiant šio tikslo, todėl mes turime stalo "vartotojai" organizuotas taip:

• ID - int (20), pirminis raktas, auto prieaugio
• vartotojo vardą - varchar (100)
• Slaptažodis - varchar (100)

Atidaryti, todėl phpMyAdmin (arba kitų programinės įrangos, MySQL valdymas) ir sukurti lentelę su laukų nurodyta.

Lauko tikslas mano yra visiškai aišku: "id" yra unikalus identifikatorius, į "username" mes ketiname įrašyti vartotojo vardą ir, galiausiai, "slaptažodis" Mes ketiname išsaugoti slaptažodžius eiti per dopoaverle md5 () funkciją.

Už šiame straipsnyje nėra reikšmingas siekiant sukurti vartotojo registracijos puslapyje. Leiskite avoi bocmanas, todėl gyventojų duomenų bazę su šiek tiek bandymų duomenų.

HTML formą

Norėdami sukurti prisijungimo formą mums reikia, žinoma, HTML formą. Leiskite sekti mūsų formą kodas:

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



  



 <table border="0">



  



 <tr> <td> Nick: </ td> <įvesties <td> name = "username" type = "text" id = "username" Vendetta = "10" style = "width: 250px" /> </ td> </ tr>



  



 <tr> <td> Slaptažodis: </ td> <įvesties <td> pavadinimas = "slaptažodis" type = "slaptažodis" id = "slaptažodis" Vendetta = "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>

CSS žiupsnelis

Kad gražiai atrodo mūsų darbe mes turime keletą eilučių iš CSS.
Žinoma, visų stilių aspektai gali būti pritaikytos, kad atitiktų jūsų poreikius:

 div







 įvesties {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Teisinga,







 . Klaida {



  



 padding: 3PX;



  



 text-align: center;







 }







 . Teisinga,







 . Klaida {



  



 plotis: Auto;



  



 font-weight: bold;



  



 border: 1px solid # 349.534;



  



 background: # C9FFCA;



  



 spalva: # 008000;







 }







 . Klaida {



  



 border: 1px solid # CC0000;



  



 background: # F7CBCA;



  



 color: # CC0000;







 }

• <<
• 1
• 2
• >>