Et login system med jQuery Ajax og PHP

I denne articollo vil vi se, hvordan du opretter et komplet system af Ajax-baseret brugergodkendelse.

For at nå vores mål vi bruger jQuery biblioteket (som gør livet lettere for os at udvikle klient-side), hvilket sprog PHP for server-side operationer og MySQL for de data stirage brugeren adgang.

Databasen

Som nævnt vil vi bruge MySQL til at gemme brugernes login-legitimationsoplysninger. Til dette formål, derfor har vi brug for en tabel "brugere" organiseret som følger:

• id - int (20), den primære nøgle, auto tilvækst
• brugernavn - varchar (100)
• adgangskode - varchar (100)

Åbn derfor phpMyAdmin (eller enhver anden software til håndtering af MySQL) og oprette tabellen med de angivne felter.

Formålet med feltet mener, det er helt klart: "id" er den unikke identifikator, i "brugernavn" vi kommer til at registrere brugerens navn, og endelig i "password" vi kommer til at spare adgangskoder gå gennem dopoaverle md5 () funktionen.

I forbindelse med denne artikel er ikke materiale til at skabe den brugerregistrering siden. Lad avoi bådsmanden derfor, at befolke databasen med nogle testdata.

Den HTML-formular

Hvis du vil oprette en login-form, vi har brug for, naturligvis, en HTML-formular. Lad os følge den kodeks for vores formular:

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



  



 <table border="0">



  



 <tr> <td> Brugernavn: </ td> <input <td> name = "brugernavn" type = "text" id = "brugernavn" MaxLaengde = "10" style = "width: 250px" /> </ td> </ tr>



  



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

En knivspids CSS

For at se godt ud i vores arbejde har vi brug for et par linjer af CSS.
Selvfølgelig kan alle aspekter af typografiark være skræddersyet til at passe til dine behov:

 div







 input {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Korrekt,







 . Fejl {



  



 padding: 3px;



  



 text-align: center;







 }







 . Korrekt,







 . Fejl {



  



 bredde: auto;



  



 font-weight: fed;



  



 kant: 1px solid # 349534;



  



 Baggrunden: # C9FFCA;



  



 color: # 008000;







 }







 . Fejl {



  



 kant: 1px solid # CC0000;



  



 Baggrunden: # F7CBCA;



  



 color: # CC0000;







 }

• <<
• 1
• 2
• >>