Een login systeem met jQuery Ajax en PHP

In deze articollo zullen we zien hoe u een compleet systeem van Ajax-gebaseerde authenticatie van gebruikers te creëren.

Om onze doelstelling maken we gebruik van de jQuery library (die maakt het leven makkelijker voor ons om client-side te ontwikkelen), welke taal PHP voor server-side operaties en MySQL voor de data stirage gebruiker toegang.

De database

Zoals gezegd zullen we gebruik maken van MySQL om gebruikers 'inloggegevens op te slaan. Te dien einde, daarom moeten we een tabel "gebruikers" als volgt georganiseerd:

• id - int (20), primaire sleutel, auto increment
• gebruikersnaam - varchar (100)
• wachtwoord - varchar (100)

Open, daarom phpMyAdmin (of een andere software voor het beheer van MySQL) en maak de tafel met de opgegeven velden.

Het doel van het veld van mening dat het volkomen duidelijk: "id" is de unieke identificatie, in de "gebruikersnaam" we gaan naar de naam van de gebruiker registreren en tenslotte, in het "password" we gaan te slaan wachtwoorden gaan door de dopoaverle md5 () functie.

Voor de toepassing van dit artikel is niet relevant voor de gebruiker registratie pagina aan te maken. Laat avoi de bootsman, dus, om de database te vullen met een aantal testgegevens.

De HTML-formulier

Om een ​​login vorm die we nodig hebben, natuurlijk, een HTML-formulier maken. Laten we de code van ons formulier te volgen:

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



  



 <table border="0">



  



 <td> Gebruikersnaam: </ td> <input <td> name = "gebruikersnaam" type = "text" id = "gebruikersnaam" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



 <td> Wachtwoord: </ td> <input <td> name = "wachtwoord" type = "wachtwoord" id = "wachtwoord" 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>

Een snuifje van CSS

Om de aardige blik in ons werk hebben we een paar regels CSS.
Natuurlijk kunnen alle aspecten van het style sheet worden aangepast aan uw behoeften:

 div







 input {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Correct,







 . Fout {



  



 padding: 3px;



  



 text-align: center;







 }







 . Correct,







 . Fout {



  



 width: auto;



  



 font-weight: bold;



  



 border: 1px solid # 349534;



  



 background: # C9FFCA;



  



 color: # 008000;







 }







 . Fout {



  



 border: 1px solid # CC0000;



  



 background: # F7CBCA;



  



 color: # CC0000;







 }

• <<
• 1
• 2
• >>