System logowania z jQuery Ajax i PHP

W tym articollo zobaczymy jak stworzyć kompletny system uwierzytelniania użytkowników w oparciu o Ajax.

Aby osiągnąć cel korzystamy z biblioteki jQuery (które ułatwia życie nam rozwijać po stronie klienta), PHP jako język po stronie serwera oraz danych MySQL stirage dostępu użytkownika.

Baza danych

Jak wspomniano będziemy używać MySQL do przechowywania danych uwierzytelniających użytkownika. W tym celu, dlatego musimy tabeli "users" następującą strukturę:

• id - int (20), klucz podstawowy, autoinkrementacja
• username - varchar (100)
• Hasło - varchar (100)

Otwórz więc, phpMyAdmin (lub innego oprogramowania do zarządzania MySQL) i utworzyć tabelę z podanych zakresów.

Celem dziedzinie Myślę, że to jest absolutnie jasne: "id" to unikalny identyfikator w "username" zamierzamy nagrać nazwę użytkownika i wreszcie w "Password" będziemy zapisywać hasła dopoaverle przejść przez md5 ().

Do celów niniejszego artykułu nie ma znaczenia do strony rejestracji, aby utworzyć użytkowników. Niech avoi bosmana, w związku z tym, aby wypełnić bazę danych z pewnych danych testowych.

Formularza HTML

Aby utworzyć formularza logowania musimy, oczywiście, formularza HTML. Weźmy pod uwagę kod formularza:

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



  



 <table border="0">



  



 <tr> <td> Nazwa użytkownika: </ td> <wprowadzania nazwy <td> = "username" type = "text" id = "nazwa użytkownika" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



 <tr> <td> Hasło: </ td> <wprowadzania nazwy <td> = "hasło" type = "password" id = "hasło" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



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



  



 </ Table>







 </ Form>

Szczypta CSS

Aby wyglądać dobrze w naszej pracy musimy kilka linijek CSS.
Oczywiście, wszystkie aspekty arkuszy stylów można dostosować do swoich potrzeb:

 p,







 wejście {



  



 font-family: Arial, Verdana;



  



 font-size: 12px;

  





 }







 . Poprawny







 . Błąd {



  



 padding: 3px;



  



 text-align: center;







 }







 . Poprawny







 . Błąd {



  



 width: auto;



  



 font-weight: bold;



  



 border: 1px solid # 349534;



  



 background: # C9FFCA;



  



 color: # 008000;







 }







 . Błąd {



  



 border: 1px solid # cc0000;



  



 background: # F7CBCA;



  



 color: # cc0000;







 }

• <<
• 1
• 2
• >>