[ Experts-Zone ]

Σε αυτό τον οδηγό θα βασιστούμε στην φόρμα εγγραφής που δημιουργήσαμε στο προηγούμενο άρθρο μας: Φορμα εγγραφής με Ajax και θα την τροποποιήσουμε, ώστε να την ενώσουμε με μια βάση δεδομένων, όπως είναι η MySQL. Ο κύριος στόχος είναι να δείξουμε μια λογική που μπορεί να χρησιμοποιήσει ο εκάστοτε προγραμματιστής και αλλάζοντας μόνο τον κώδικα, να την φέρει στα μέτρα του. Ολόκληρο τον κώδικα μπορείτε να τον δείτε εδώ, ενώ ένα ενδεικτικό demo να το δείτε εδώ.

Ο κώδικας μας παραμένει ο ίδιος, εκτός από δύο σημεία. Το πρώτο είναι να διαγραφεί η συνάρτηση submitform(), και στο κουμπί submit, να προσθέσουμε την διαδικασία που θα αναλάβει την επεξεργασία των μηνυμάτων του αρχείου, που θα επιστρέφει ο MySQL Server. Πιο συγκεκριμένα γράφουμε:

• handler: η συνάρτηση που καλείται μόλις πατηθεί το κουμπί.
• success: τι θα συμβεί, εάν ο κώδικάς μας εκτελεστεί επιτυχώς.
• failure: Αντίστοιχα εάν ο κωδικάς μας γυρίσει σφάλμα αποτυχίας.
• Ext.util.JSON.decode: κωδικοποιεί ένα JSON string σ'ένα αντικείμενο(object).

Και το δεύτερο σημείο, είναι στην δημιουργία της φόρμας μας. Εκεί προσθέτουμε:

• method: η HTTP μέθοδος που θα χρησιμοποιήσετε για να στείλετε τα δεδομένα. Ανάλογα την μέθοδο, θα χρησιμοποιήσετε και αντίστοιχη μέθοδο για να τα διαβάσετε.
• url: το αρχείο στο οποίο θα στείλετε τα δεδομένα για να τα επεξεργαστείτε.

Οπότε με την προσθήκη, ο νέος κώδικας δημιουργίας της φόρμας προσαρμόζεται ως εξής:

Πάμε τώρα να δημιουργήσουμε μια ενδεικτική βάση και έπειτα το αρχείο form.php, στο οποίο θα εισάγουμε ένα νέο χρήστη και σε περίπτωση που δεν τηρούνται όλες οι προϋποθέσεις θα μας εμφανίζει αντίστοιχο σφάλμα.

Η βάση, όπως είπαμε είναι σε MySQL και χρησιμοποιήσαμε τον ακόλουθο κώδικα:

Με το παραπάνω query δημιουργήσαμε μια βάση με το όνομα extjs, και έναν πίνακα της βάσης με το όνομα users. Ο πίνακας έχει όσα πεδία έχει και η φόρμα εγγραφής μας, συν ακόμα ένα που δείχνει το τρέχον ID του χρήστη. Προσέξαμε να ορίσουμε το μήκος των πεδίων του πίνακα να είναι ίσο με το μήκος των αντίστοιχων πεδίων της φόρμας, (δηλαδή εάν έχουμε 20 χαρακτήρες μέγιστο στο username, να έχουμε και 20 μέγιστο στην αντίστοιχη στήλη του πίνακά μας). Τέλος δηλώσαμε ότι το email και το username θα είναι μοναδικά (unique) κλειδιά του πίνακά μας, ώστε να μην έχουμε διπλοεγγραφές. Άρα εάν κάποιος πάει να βάλει ίδιο username ή email με κάποιο που υπάρχει ήδη στην βάση, η εισαγωγή δεν γίνεται και εμφανίζεται αντίστοιχο μήνυμα.

Πάμε τώρα να φτιάξουμε το αρχείο που θα διαβάζει τα στοιχεία που συμπλήρωσε ο χρήστης στην φόρμα και θα τα εισάγει στην βάση.Ξεκινάμε με την δήλωση των στοιχείων σύνδεσης της βάσης μας:

• servername: Το όνομα του υπολογιστή που είναι εγκατεστημένη η βάση μας. (Συνήθως είναι localhost).
• user: Το όνομα του χρήστη που έχει δικαιώματα στην συγκεκριμένη βάση.
• pass: Ο αντίστοιχος κωδικός πρόσβασης για τον χρήστη που ορίσαμε παραπάνω.
• db: Το όνομα της βάσης μας. (στο συγκεκριμένο παράδειγμα extjs).

Στην συνέχεια θα ανοίξουμε την σύνδεση με την βάση μας χρησιμοποιώντας την mysql_connect(), και σε περίπτωση αποτυχίας θα εμφανίσουμε ανάλογο μήνυμα:

• mysql_connect(): Ανοίγει μια σύνδεση με τον MySQL Server (σε περίπτωση που υπάρχει κάποια ήδη ανοιχτή σύνδεση, την χρησιμοποιεί).
• mysql_errno: Εμφανίζει τον αριθμό του λάθους που επέστρεψε ο MySQL Server.
• mysql_error: Εμφάνιζει το μήνυμα λάθους που επέστρεψε ο MySQL Server.

Εδώ να σημειώσουμε ότι, για να διαβαστεί κάποιο response από το ΕxtJS Framework, θα πρέπει να είναι σε συγκεκριμένη μορφή. Να είναι κάτι της μορφής:

Οπότε ανάλογα την boolean τιμή του success, θα τρέξει είτε το success είτε το failure στον κώδικα που δημιουργήσαμε παραπάνω. Εμείς όμως επειδή θέλουμε να μας εμφανιστεί και το αντίστοιχο μήνυμα που συνοδεύει την εκάστοτε ενέργεια, συμπληρώνουμε:

Υποθέτουμε ότι η σύνδεση έγινε επιτυχώς, περνάμε στο να επιλέξουμε την βάση που δημιουργήσαμε παραπάνω (πάλι σε περίπτωση αποτυχίας, εμφανίζουμε ανάλογο μήνυμα):

• mysql_select_db():Επιλέγει από την βάση μας, την βάση δεδομένων που θα χρειαστούμε.

Υποθέτουμε ότι μέχρι εδώ, έχουμε συνδεθεί με τον MySQL Server και με την βάση μας, οπότε συνεχίζουμε εισάγοντας τα στοιχεία που συμπλήρωσε ο χρήστης στην φόρμα μας. Έχουμε λοιπόν:

• mysql_query(): Στέλνει ένα mysql query στην βάση μας.
• mysql_close(): κλείνει την σύνδεση με τον MySQL Server μας.

Ολοκληρώνοντας, καταφέραμε να φτιάξουμε μια φόρμα η οποία ελέγχει τα στοιχεία που εισάγει ο χρήστης. Σε περίπτωση που τα στοιχεία είναι σωστά, στέλνεται ένα αίτημα στον MySQL Server με τα στοιχεία αυτά και εισάγονται στην βάση. Με το τέλος της εισαγωγής, επιστρέφουμε κατάλληλο μήνυμα.

Ο κώδικας εννοείται πώς μπορεί να βελτιωθεί, για παράδειγμα να γραφτεί σε OOP (αντικειμενοστραφή προγραμματισμό), να ελεγχθεί για SQL injections, να κρυπτογραφηθεί το password ή ακόμα και ναι ορίσει ο χρήστης δικά του μηνύματα διαφορετικά από αυτά που επιστρέφει ο MySQL Server. Αυτές όλες, όμως, οι τεχνικές ξεφεύγουν από τα πλαίσια αυτού του οδηγού και σύντομα θα δούμε κάποιες σε επόμενα άρθρα μας.