A login system with jQuery Ajax and PHP

In this articollo we will see how to create a complete system of Ajax-based user authentication.

To achieve our aim we use the jQuery library (which makes life easier for us to develop client-side), what language PHP for server-side operations and MySQL for the data stirage user access.

The database

As mentioned we will use MySQL to store users' login credentials. To this end, therefore, we need a table "users" organized as follows:

• id - int (20), primary key, auto increment
• username - varchar (100)
• password - varchar (100)

Open, therefore, phpMyAdmin (or any other software for the management of MySQL) and create the table with the fields specified.

The purpose of the field believe it is absolutely clear: "id" is the unique identifier, in the "username" we're going to record the user's name and, finally, in the "password" we're going to save passwords go through the dopoaverle md5 () function.

For the purposes of this article is not material to create the user registration page. Let avoi the boatswain, therefore, to populate the database with some test data.

The HTML form

To create a login form we need, of course, an HTML form. Let's follow the code of our form:

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



  



 <table border="0">



  



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



  



 <tr> <td> Password: </ td> <input <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>

A pinch of CSS

In order to look nice in our work we need a few lines of CSS.
Of course, all aspects of the style sheet can be tailored to fit your needs:

 div







 input {



  



 font-family: arial, verdana;



  



 font-size: 12px;

  





 }







 . Correct,







 . Error {



  



 padding: 3px;



  



 text-align: center;







 }







 . Correct,







 . Error {



  



 width: auto;



  



 font-weight: bold;



  



 border: 1px solid # 349534;



  



 background: # C9FFCA;



  



 color: # 008000;







 }







 . Error {



  



 border: 1px solid # CC0000;



  



 background: # F7CBCA;



  



 color: # CC0000;







 }

• <<
• 1
• 2
• >>