Ένα σύστημα σύνδεσης με jQuery Ajax και PHP

Σε αυτό το articollo θα δούμε πώς μπορείτε να δημιουργήσετε ένα πλήρες σύστημα του Ajax που βασίζεται έλεγχο ταυτότητας χρήστη.

Για να επιτευχθεί ο στόχος μας, χρησιμοποιούμε το jQuery βιβλιοθήκη (η οποία καθιστά τη ζωή ευκολότερη για εμάς να αναπτύξουμε την πλευρά του πελάτη), σε ποια γλώσσα PHP για server-side επιχειρήσεων και MySQL για την πρόσβαση των χρηστών stirage δεδομένα.

Η βάση δεδομένων

Όπως αναφέρθηκε θα χρησιμοποιήσουμε MySQL για να αποθηκεύσετε τα στοιχεία σύνδεσης των χρηστών. Για το σκοπό αυτό, ως εκ τούτου, χρειαζόμαστε έναν πίνακα "χρήστες" οργανώνεται ως εξής:

• id - int (20), πρωτεύον κλειδί, αύξηση auto
• όνομα χρήστη - varchar (100)
• κωδικό πρόσβασης - varchar (100)

Ανοίξτε, ως εκ τούτου, το phpMyAdmin (ή οποιοδήποτε άλλο λογισμικό για τη διαχείριση της MySQL) και να δημιουργήσει το τραπέζι με τα καθορισμένα πεδία.

Ο σκοπός του τομέα πιστεύουμε ότι είναι απολύτως σαφές: "ID" είναι το μοναδικό αναγνωριστικό, το "όνομα χρήστη" θα πάμε να καταγράψει το όνομα του χρήστη και, τέλος, στο "password" θα πάμε να αποθηκεύσετε κωδικούς πρόσβασης περάσει από την dopoaverle md5 () συνάρτηση.

Για τους σκοπούς του παρόντος άρθρου δεν είναι υλικό για να δημιουργήσετε τη σελίδα εγγραφής χρήστη. Ας avoi το λοστρόμος, ως εκ τούτου, για να συμπληρώσετε τη βάση δεδομένων με κάποια δεδομένα δοκιμών.

Η HTML μορφή

Για να δημιουργήσετε μια σύνδεση μορφή που χρειαζόμαστε, φυσικά, μια φόρμα HTML. Ας ακολουθήσουμε τον κωδικό της φόρμας μας:

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



  



 <table border="0">



  



 <tr> <td> Όνομα χρήστη: </ td> <εισόδου <td> όνομα = "όνομα χρήστη" type = "text" id = "username" maxlength = "10" style = "width: 250px" /> </ td> </ tr>



  



 <tr> <td> Κωδικός πρόσβασης: </ td> <εισόδου <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"> </ p> </ td> </ tr>



  



 </ Table>







 </ Form>

Μια πρέζα CSS

Για να φανείτε συμπαθητικοί στο έργο μας, χρειαζόμαστε μερικές γραμμές CSS.
Φυσικά, όλες τις πτυχές της φύλλο στυλ μπορεί να προσαρμοστεί ώστε να ταιριάζει στις ανάγκες σας:

 div







 εισόδου {



  



 font-family: Arial, Verdana?



  



 font-size: 12px?

  





 }







 . Ακριβές,







 . Error {



  



 padding: 3px?



  



 text-align: center?







 }







 . Ακριβές,







 . Error {



  



 πλάτος: auto?



  



 font-weight: τολμηρό?



  



 σύνορα: 1px solid # 349534?



  



 υπόβαθρο: # C9FFCA?



  



 χρώμα: # 008000?







 }







 . Error {



  



 σύνορα: 1px solid # CC0000?



  



 υπόβαθρο: # F7CBCA?



  



 χρώμα: # CC0000?







 }

• <<
• 1
• 2
• >>