Un système de connexion avec jQuery Ajax et PHP

Dans ce articollo nous allons voir comment créer un système complet d'authentification des utilisateurs basées sur Ajax.

Pour atteindre notre objectif, nous utilisons la bibliothèque jQuery (ce qui rend la vie plus facile pour nous de développer côté client), ce langage PHP côté serveur et MySQL pour les opérations de l'accès aux données utilisateur stirage.

La base de données

Comme mentionné, nous allons utiliser MySQL pour stocker les identifiants de connexion des utilisateurs. À cette fin, par conséquent, nous avons besoin d'une table "users" organisé comme suit:

• id - int (20), la clé primaire d'incrémentation automatique,
• username - varchar (100)
• mot de passe - varchar (100)

Ouvrez donc, phpMyAdmin (ou tout autre logiciel pour la gestion de MySQL) et de créer la table avec les champs indiqués.

Le but du champ crois qu'il est absolument clair: "id" est l'identifiant unique, dans le "username" nous allons enregistrer le nom de l'utilisateur et, enfin, dans le «mot de passe", nous allons sauver des mots de passe passer par le dopoaverle md5 () fonction.

Aux fins de cet article n'est pas la matière pour créer la page d'inscription de l'utilisateur. Laissez Avoi le maître d'équipage, par conséquent, pour peupler la base de données avec des données de test.

Le formulaire HTML

Pour créer un formulaire de login nous devons, bien sûr, un formulaire HTML. Suivons le code de notre formulaire:

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



  



 <table border="0">



  



 <td> Nom d'utilisateur: </ td> <saisie du nom <td> = "username" type = "text" id = "username" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



 <td> Mot de passe: </ td> <saisie du nom <td> = "password" type = "password" id = "password" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



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



  



 </ Table>







 </ Form>

Une pincée de CSS

Afin de belle apparence dans notre travail nous avons besoin de quelques lignes de CSS.
Bien sûr, tous les aspects de la feuille de style peut être adapté à vos besoins:

 div







 entrée {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Corriger,







 . Erreur {



  



 padding: 3px;



  



 text-align: center;







 }







 . Corriger,







 . Erreur {



  



 width: auto;



  



 font-weight: bold;



  



 border: 1px solid # 349534;



  



 background: # C9FFCA;



  



 color: # 008000;







 }







 . Erreur {



  



 border: 1px solid # CC0000;



  



 background: # F7CBCA;



  



 color: # CC0000;







 }

• <<
• 1
• 2
• >>