Kirjaudu järjestelmä jQuery Ajax ja PHP

Tässä articollo näemme miten luoda täydellinen järjestelmä Ajax-pohjainen käyttäjätunnistus.

Saavuttaa tavoitteemme käytämme jQuery kirjastoa (joka tekee elämästä helpompaa meille kehittää client-side), mitä kieltä PHP palvelinpuolen toimintojen ja MySQL tiedot stirage käyttöoikeuksia.

Tietokanta

Kuten edellä käytämme MySQL tallentaa käyttäjien kirjautumistiedot. Tämän vuoksi siis meidän pöytä "käyttäjät" järjestetty seuraavasti:

• id - int (20), perusavain, automaattinen lisäys
• Käyttäjätunnus - varchar (100)
• Salasana - varchar (100)

Avaa siis phpMyAdmin (tai jokin muu ohjelmisto hallintaan MySQL) ja luoda taulukon kentät määritelty.

Kentän tarkoituksena mielestäni on täysin selvää: "id" on yksilöllinen tunniste, että "username" Aiomme tallentaa käyttäjän nimen ja lopulta vuonna "salasana" Aiomme salasanojen tallentamista läpi dopoaverle md5 ()-funktiota.

Tarkoitetaan tässä artiklassa ei ole merkitystä luoda käyttäjän rekisteröintiä sivu. Anna avoi pursimies siksi kansoittavat tietokantaan joitakin testituloksia.

HTML-muodossa

Voit luoda Kirjautuminen tarvitsemme tietenkin HTML-muodossa. Katsotaanpa noudattaa käytännesääntöjä meidän muodossa:

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



  



 <table border="0">



  



 <tr> <td> Käyttäjätunnus: </ td> <input <td> name = "username" type = "text" id = "username" maxlength = "10" style = "width: 250px" /> </ td> </ p>



  



 <tr> <td> Salasana: </ td> <input <td> name = "salasana" type = "salasana" id = "salasana" maxlength = "10" style = "width: 250px" /> </ td> </ p>



  



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



  



 </ Table>







 </ Form>

Ripaus CSS

Jotta hyvältä työssämme tarvitsemme muutaman rivin CSS.
Tietenkin kaikilla tyylisivu voidaan räätälöidä tarpeidesi:

 div







 input {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Oikea,







 . Virhe {



  



 padding: 3px;



  



 text-align: center;







 }







 . Oikea,







 . Virhe {



  



 leveys: auto;



  



 font-weight: bold;



  



 border: 1px solid # 349534;



  



 background: # C9FFCA;



  



 color: # 008000;







 }







 . Virhe {



  



 border: 1px solid # CC0000;



  



 background: # F7CBCA;



  



 color: # CC0000;







 }

• <<
• 1
• 2
• >>