En logg inn system med jQuery Ajax og PHP

I denne articollo vil vi se hvordan å lage et komplett system av Ajax-basert brukerautentisering.

For å oppnå vårt mål vi bruker jQuery biblioteket (som gjør livet lettere for oss å utvikle klientsiden), hvilket språk PHP for server-side operasjoner og MySQL for dataene stirage brukeren tilgang.

Databasen

Som nevnt vil vi bruke MySQL til å lagre brukernes påloggingsinformasjon. For å oppnå dette, derfor trenger vi en tabell "brukere" organisert som følger:

• id - int (20), primærnøkkel, auto økning
• Brukernavn - VARCHAR (100)
• passord - VARCHAR (100)

Åpne, derfor phpMyAdmin (eller noen annen programvare for styring av MySQL) og opprette tabellen med feltene spesifisert.

Formålet med feltet mener det er helt klart: "id" er unik identifikator, i "brukernavn" vi skal registrere brukerens navn og til slutt, i "passord" vi skal lagre passord gå gjennom dopoaverle md5 ()-funksjonen.

Ved anvendelsen av denne artikkelen ikke er vesentlig å skape brukeren registreringssiden. La avoi båtsmann derfor å fylle databasen med noen testdata.

HTML-skjema

For å opprette en logg inn skjema trenger vi selvsagt en HTML form. La oss følge de etiske formen vår:

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



  



 <table border="0">



  



 <tr> <td> Brukernavn: </ td> <innspill <td> name = "brukernavn" type = "tekst" id = "brukernavn" MaxLength = "10" style = "width: 250px" /> </ td> </ tr>



  



 <tr> <td> Passord: </ td> <innspill <td> name = "password" type = "password" id = "password" 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>

En klype CSS

For å se fint i vårt arbeid trenger vi et par linjer med CSS.
Selvfølgelig kan alle aspekter av stilarket være skreddersydd for å passe dine behov:

 div







 inngang {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Riktig,







 . Feil {



  



 padding: 3px;



  



 text-align: center;







 }







 . Riktig,







 . Feil {



  



 bredde: auto;



  



 font-weight: bold;



  



 border: 1px solid # 349534;



  



 bakgrunn: # C9FFCA;



  



 color: # 008000;







 }







 . Feil {



  



 border: 1px solid # CC0000;



  



 bakgrunn: # F7CBCA;



  



 color: # CC0000;







 }

• <<
• 1
• 2
• >>