Sustav za prijavu u jQuery Ajax i PHP

U ovom articollo ćemo vidjeti kako to stvoriti kompletan sustav Ajax-based provjeru autentičnosti korisnika.

Da bi se postigla naš cilj ćemo koristiti jQuery biblioteke (što čini život lakšim za nas da se razvije na strani klijenta), kojim se jezikom PHP za server-side operacija i MySQL za korisničke podatke stirage pristup.

Baze podataka

Kao što je spomenuto ćemo koristiti MySQL za pohranu korisnika vjerodajnice za prijavu. U tu svrhu, dakle, trebamo stol "korisnici" organiziran na sljedeći način:

• id - int (20), primarni ključ, auto prirast
• Korisničko ime - varchar (100)
• lozinka - varchar (100)

Otvori, dakle, phpMyAdmin (ili bilo koji drugi softver za upravljanje MySQL) i stvoriti tablicu sa poljima naveden.

Svrha polja vjeruju da je apsolutno jasno: "id" je jedinstveni identifikator, u "korisničko ime" ćemo snimiti korisničko ime i, konačno, u "lozinka" ćemo za spremanje lozinki proći kroz dopoaverle MD5 () funkciju.

Za potrebe ovog članka nije materijal za stvaranje stranice registracije korisnika. Neka avoi narednik, dakle, naseliti bazu podataka s nekim test podataka.

HTML obrazac

Da biste stvorili obrazac za prijavu trebamo, naravno, HTML obrazac. Neka je slijediti kod našeg obrasca:

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



  



 <table border="0">



  



 <tr> <td> Korisničko ime: </ td> <input name = <td> "korisničko ime" type = "text" id = "korisničko ime" maxlength = "10" style = "width: 250px" /> </ td> </ TR>



  



 <tr> <td> Lozinka: </ td> <input name = <td> "lozinka" type = "password" id = "lozinka" 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>

Prstohvat kaskadno

Kako izgledati lijepo u našem radu trebamo nekoliko redaka CSS.
Naravno, sve aspekte stila list može se prilagoditi kako bi odgovarao Vašim potrebama:

 div







 ulaz {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Točno,







 . Pogreška {



  



 padding: 3px;



  



 text-align: center;







 }







 . Točno,







 . Pogreška {



  



 širina: auto;



  



 font-weight: bold;



  



 granice: 1px solid # 349534;



  



 background: # C9FFCA;



  



 Boja: # 008000;







 }







 . Pogreška {



  



 granice: 1px solid # CC0000;



  



 background: # F7CBCA;



  



 Boja: # CC0000;







 }

• <<
• 1
• 2
• >>