# Συλλογή εγγραφών (JavaScript)

Δημιουργία μιας μικρής εφαρμογής βάσης δεδομένων για παραγγελία της μουσικής σας συλλογής
Έργο τεκμηρίωσης GNOME
gnome-doc-list@gnome.org
Johannes Schmid
jhs@gnome.org
Marta Maria Casetti
mmcasettii@gmail.com 2013
Ελληνική μεταφραστική ομάδα GNOME
team@gnome.gr 2012-2015
Δημήτρης Σπίγγος
dmtrs32@gmail.com 2012, 2013
Μαρία Θουκιδίδου
marablack3@gmail.com 2014
Θάνος Τρυφωνίδης
tomtryf@gmail.com 2014, 2015

# Συλλογή εγγραφών

      Σε αυτό το μάθημα, θα μάθετε:

        Πώς να συνδεθείτε με μια βάση δεδομένων χρησιμοποιώντας libgda
        Πώς να εισάγετε και να περιηγηθείτε σε εγγραφές στον πίνακα βάσης δεδομένων

# Εισαγωγή

Αυτή η παρουσίαση χρησιμοποιεί τη γλώσσα Javascript. Πρόκειται να παρουσιάσουμε πώς να συνδεθείτε και να χρησιμοποιήσετε μια βάση δεδομένων από ένα πρόγραμμα GTK χρησιμοποιώντας τη βιβλιοθήκη GDA (πρόσβαση δεδομένων GNOME). Έτσι χρειαζόσαστε επίσης αυτή τη βιβλιοθήκη εγκατεστημένη.

Η πρόσβαση δεδομένων GNOME (GDA) είναι βιβλιοθήκη της οποίας ο σκοπός είναι να δώσει γενική πρόσβαση σε διαφορετικά είδη και τύπους πηγών δεδομένων. Αυτό οδηγεί από παραδοσιακά σχεσιακά συστήματα βάσης δεδομένων, σε οποιοδήποτε είδος πηγής δεδομένων, όπως εξυπηρετητή αλληλογραφίας, έναν κατάλογο LDAP, κλπ. Για περισσότερες πληροφορίες και για πλήρες API και τεκμηρίωση, επισκεφτείτε την ιστότοπο GDA.

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

# Δημιουργία έργου με το Anjuta

Πριν ξεκινήσετε να προγραμματίζετε, πρέπει να δημιουργήσετε ένα καινούργιο έργο στο Anjuta. Έτσι θα δημιουργηθούν όλα τα απαραίτητα αρχεία που χρειάζονται για την εκτέλεση του κώδικα αργότερα. Επίσης θα ήταν χρήσιμο να τα κρατάτε όλα μαζί.

Ξεκινήστε το Anjuta και πατήστε αρχείονέοέργο για να ανοίξετε τον οδηγό του έργου.

Επιλέξτε γενικό Javascript από την καρτέλα JS, πατήστε Μπροστά, και συμπληρώστε τις λεπτομέρειές σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε ως όνομα του έργου και του καταλόγου το record-collection.

Πατήστε τελειωμένο και το έργο θα δημιουργηθεί για εσάς. Ανοίξτε το src/main.js από τις καρτέλες έργο ή αρχείο. Περιλαμβάνει πολύ απλό παράδειγμα κώδικα.

# Δομή προγράμματος

Αυτή η παρουσίαση είναι μια απλή εφαρμογή GTK (με μοναδικό παράθυρο) ικανό να εισάγει εγγραφές στον πίνακα βάσης δεδομένων καθώς και περιήγηση όλων των εγγραφών του πίνακα. Ο πίνακας έχει δύο πεδία: `id`, ένας ακέραιος και `name`, έναν varchar. Η πρώτη ενότητα (στην κορυφή) της εφαρμογής επιτρέπει την εισαγωγή εγγραφής στον πίνακα. Η τελευταία ενότητα (πυθμένας) επιτρέπει να δείτε όλες τις εγγραφές αυτού του πίνακα. Το περιεχόμενο του ανανεώνεται κάθε φορά που μια νέα εγγραφή εισάγεται και στην εκκίνηση της εφαρμογής.

# Έναρξη της διασκέδασης

Ας αρχίσουμε εξετάζοντας τον σκελετό του προγράμματος:

const GLib = imports.gi.GLib; const Gtk = imports.gi.Gtk; const Gda = imports.gi.Gda; const Lang = imports.lang;

function Demo () { this._init (); }

Demo.prototype = {

_init: function () { this.setupWindow (); this.setupDatabase (); this.selectData (); } }

Gtk.init (null, null);

var demo = new Demo ();

Gtk.main ();

Γραμμές 1-4: Αρχικές εισαγωγές. Δώστε ιδιαίτερη προσοχή στη γραμμή 3, που λέει στη Javascript να εισάγει τη βιβλιοθήκη GDA, το επίκεντρο μας σε αυτό το μάθημα.

Γραμμές 6-17: Ορίστε την κλάση μας `Demo`. Δώστε ιδιαίτερη προσοχή στις γραμμές 13-15, όπου καλούμε 3 μεθόδους που θα κάνουν όλη τη δουλειά. Αναλυτικά παρακάτω.

Γραμμές 19-23: έναρξη της εφαρμογής.

# Σχεδιασμός της εφαρμογής

Ας ρίξουμε μια ματιά στη μέθοδο `setupWindow`. Είναι υπεύθυνη για τη δημιουργία της διεπαφής χρήστη (UI). Καθώς η UI δεν είναι το επίκεντρο μας, θα εξηγήσουμε μόνο τα σχετικά μέρη.

setupWindow: function () { this.window = new Gtk.Window ({title: "Data Access Demo", height_request: 350}); this.window.connect ("delete-event", function () { Gtk.main_quit(); return true; });

// Κύριο πλαίσιο var main_box = new Gtk.Box ({orientation: Gtk.Orientation.VERTICAL, spacing: 5}); this.window.add (main_box);

// Πρώτη ετικέτα var info1 = new Gtk.Label ({label: "<b>Insert a record</b>", xalign: 0, use_markup: true}); main_box.pack_start (info1, false, false, 5);

// Οριζόντιο πλαίσιο "insert a record" var insert_box = new Gtk.Box ({orientation: Gtk.Orientation.HORIZONTAL, spacing: 5}); main_box.pack_start (insert_box, false, false, 5);

// Πεδίο αναγνωριστικού insert_box.pack_start (new Gtk.Label ({label: "ID:"}), false, false, 5); this.id_entry = new Gtk.Entry (); insert_box.pack_start (this.id_entry, false, false, 5);

// Πεδίο ονόματος insert_box.pack_start (new Gtk.Label ({label: "Name:"}), false, false, 5); this.name_entry = new Gtk.Entry ({activates_default: true}); insert_box.pack_start (this.name_entry, true, true, 5);

// Πλήκτρο εισαγωγής var insert_button = new Gtk.Button ({label: "Insert", can_default: true}); insert_button.connect ("clicked", Lang.bind (this, this._insertClicked)); insert_box.pack_start (insert_button, false, false, 5); insert_button.grab_default ();

// Προβολή κειμένου περιήγησης var info2 = new Gtk.Label ({label: "<b>Browse the table</b>", xalign: 0, use_markup: true}); main_box.pack_start (info2, false, false, 5); this.text = new Gtk.TextView ({editable: false}); var sw = new Gtk.ScrolledWindow ({shadow_type:Gtk.ShadowType.IN}); sw.add (this.text); main_box.pack_start (sw, true, true, 5);

this.count_label = new Gtk.Label ({label: "", xalign: 0, use_markup: true}); main_box.pack_start (this.count_label, false, false, 0);

this.window.show_all (); },

Γραμμές 22 και 27: δημιουργία των 2 καταχωρίσεων (για τα δύο πεδία) στα οποία οι χρήστες θα πληκτρολογήσουν κάτι για να εισαχθεί στη βάση δεδομένων.

Γραμμές 31-34: δημιουργία του κουμπιού εισαγωγής. Συνδέουμε το σήμα του `clicked` στην ιδιωτική μέθοδο `_insertClicked` της κλάσης. Αυτή η μέθοδος αναλύεται παρακάτω.

Γραμμή 39: δημιουργία του γραφικού στοιχείου (`TextView`) όπου θα εμφανίσουμε τα περιεχόμενα του πίνακα.

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

# Σύνδεση και αρχικοποίηση με τη βάση δεδομένων

Ο κώδικας που κάνει τη σύνδεση στη βάση δεδομένων είναι στην παρακάτω μέθοδο `setupDatabase`:

setupDatabase: function () { this.connection = new Gda.Connection ({provider: Gda.Config.get_provider("SQLite"), cnc_string:"DB_DIR=" + GLib.get_home_dir () + ";DB_NAME=gnome_demo"}); this.connection.open ();

try { var dm = this.connection.execute_select_command ("select * from demo"); } catch (e) { this.connection.execute_non_select_command ("create table demo (id integer, name varchar(100))"); } },

Γραμμές 2-3: δημιουργία του αντικειμένου της GDA `Connection`. Πρέπει να δώσουμε στον κατασκευαστή μερικές ιδιότητες:

`provider`: Ένας από τους υποστηριζόμενους παρόχους. Το GDA υποστηρίζει SQLite, MySQL, PostgreSQL, Oracle και πολλούς άλλους. Για τους σκοπούς της παρουσίασης θα χρησιμοποιήσουμε τη βάση δεδομένων SQLite, επειδή εγκαθίσταται από προεπιλογή στις περισσότερες διανομές και είναι απλή στη χρήση (χρησιμοποιεί απλά ένα αρχείο ως βάση δεδομένων).

`cnc_string`: Η συμβολοσειρά σύνδεσης. Μπορεί να αλλάζει από πάροχο σε πάροχο. Η σύνταξη για το SQLite είναι: `DB_DIR=PATH;DB_NAME=FILENAME`. Σε αυτή την παρουσίαση προσπελάζουμε μια βάση δεδομένων που λέγεται gnome_demo στον προσωπικό κατάλογο χρήστη (σημειώστε την κλήση στη συνάρτηση .GLib's `get_home_dir`).

Εάν ο πάροχος δεν υποστηρίζεται από GDA, ή εάν λείπει στη συμβολοσειρά σύνδεσης κάποιο στοιχείο, η γραμμή 2 θα εγείρει μια εξαίρεση. Έτσι, στην πραγματική ζωή θα το χειριστούμε με μια πρόταση της JavaScript `try`...`catch`.

Γραμμή 4: άνοιγμα της σύνδεσης. Στον πάροχο SQLite, εάν η βάση δεδομένων δεν υπάρχει, θα δημιουργηθεί σε αυτό το βήμα.

Γραμμές 6-10: Προσπαθήστε να κάνετε μια απλή επιλογή για έλεγχο ύπαρξης του πίνακα (γραμμή 7). Εάν δεν υπάρχει (επειδή η βάση δεδομένων μόλις δημιουργήθηκε), αυτή η εντολή θα εγείρει μια εξαίρεση, που επεξεργάζεται από την ομάδα `try`...`catch`. Εάν συμβαίνει αυτό, τρέχουμε τη δημιουργία πρότασης πίνακα (γραμμή 9).

Για να εκτελέσουμε εντολές SQL στο παραπάνω παράδειγμα χρησιμοποιούμε τις μεθόδους σύνδεσης GDA `execute_select_command` και `execute_non_select_command`. Είναι εύκολες στη χρήση, και απαιτούν μόνο δύο ορίσματα: Το αντικείμενο `Connection` και την εντολή SQL.

Σε αυτό το σημείο έχουμε ρυθμίσει τη βάση δεδομένων και είμαστε έτοιμοι να τη χρησιμοποιήσουμε.

# Επιλογή

Μετά την σύνδεση με τη βάση δεδομένων, ο κατασκευαστής της παρουσίασής μας καλεί τη μέθοδο`selectData`. Είναι υπεύθυνη για τη λήψη όλων των εγγραφών στον πίνακα και την εμφάνισή τους στο γραφικό στοιχείο `TextView`. Ας ρίξουμε μια ματιά σε αυτό:

selectData: function () { var dm = this.connection.execute_select_command ("select * from demo order by 1, 2"); var iter = dm.create_iter ();

var text = "";

while (iter.move_next ()) { var id_field = Gda.value_stringify (iter.get_value_at (0)); var name_field = Gda.value_stringify (iter.get_value_at (1));

text += id_field + "\t=>\t" + name_field + '\n'; }

this.text.buffer.text = text; this.count_label.label = "<i>" + dm.get_n_rows () + " record(s)</i>"; },

Γραμμή 2: Η εντολή `SELECT`. Χρησιμοποιούμε την μέθοδο σύνδεσης του GDA `execute_select_command`. Επιστρέφει ένα αντικείμενο `DataModel`, το οποίο χρησιμοποιείτε για να ανακτηθούν οι σειρές.

Γραμμή 3: Δημιουργία αντικειμένου `Iter`, που χρησιμοποιείται για επανάληψη στις εγγραφές του `DataModel`.

Γραμμή 7: Βρόχος μέσα από όλες τις εγγραφές, φέρνοντας τες με τη βοήθεια του αντικειμένου `Iter`. Σε αυτό το σημείο, η μεταβλητή `iter` περιέχει τα ενεργά ανακτημένα δεδομένα. Η μέθοδος του `move_next` επιστρέφει `false` όταν φτάνει την τελευταία εγγραφή.

Γραμμές 8-9: Κάνουμε δυο πράγματα σε κάθε γραμμή:

Χρήση της μεθόδου του `Iter` `get_value_at`, που απαιτεί μόνο ένα όρισμα: ο αριθμός της στήλης για ανάκτηση, που ξεκινά από 0. Καθώς η εντολή μας `SELECT` επιστρέφει μόνο δύο στήλες, ανακτούμε τις στήλες 0 και 1.

Η μέθοδος `get_value_at` επιστρέφει το πεδίο σε μορφή `GValue` του GLib. Ένας απλός τρόπος μετατροπής αυτής της μορφής σε συμβολοσειρά είναι χρησιμοποιώντας τη γενική συνάρτηση του GDA `value_stringify`. Αυτό κάνουμε εδώ και αποθηκεύουμε τα αποτελέσματα στις μεταβλητές `id_field` και `name_field`.

Γραμμή 11: Συνένωση των δύο πεδίων για τη δημιουργία μιας γραμμής κειμένου, διαχωριζόμενης με `"=>"` και αποθήκευση της στη μεταβλητή `text`.

Γραμμή 14: Μετά το τέλος του βρόχου, έχουμε όλες τις μορφοποιημένες εγγραφές στη μεταβλητή `text`. Σε αυτή τη γραμμή ορίζουμε μόνο τα περιεχόμενα του `TextView` με αυτή τη μεταβλητή.

Γραμμή 15: Εμφάνιση του αριθμού των εγγραφών στον πίνακα, χρησιμοποιώντας τη μέθοδο `get_n_rows` του `DataModel`.

# Εισαγωγή

Εντάξει, ξέρουμε πώς να συνδεθούμε με μια βάση δεδομένων και πώς να διαλέξουμε γραμμές από έναν πίνακα. Τώρα είναι ώρα να κάνουμε έναν `INSERT` στον πίνακα. Θυμόσαστε παραπάνω, στη μέθοδο `setupWindow` συνδέσαμε το Insert του κουμπιού με το σήμα `clicked` στη μέθοδο `_insertClicked`; Ας δούμε την υλοποίηση αυτής της μεθόδου.

_insertClicked: function () { if (!this._validateFields ()) return;

// Gda.execute_non_select_command (this.connection, // "insert into demo values ('" + this.id_entry.text + "', '" + this.name_entry.text + "')");

var b = new Gda.SqlBuilder ({stmt_type:Gda.SqlStatementType.INSERT}); b.set_table ("demo"); b.add_field_value_as_gvalue ("id", this.id_entry.text); b.add_field_value_as_gvalue ("name", this.name_entry.text); var stmt = b.get_statement (); this.connection.statement_execute_non_select (stmt, null);

this._clearFields (); this.selectData (); },

Μάθαμε πως να χρησιμοποιούμε τις μεθόδους σύνδεσης GDA `execute_select_command` και `execute_non_select_command` για την εκτέλεση εντολών SQL σε μια βάση δεδομένων. Το GDA σας επιτρέπει να δημιουργήσετε μια εντολή SQL έμμεσα, χρησιμοποιώντας το αντικείμενο `SqlBuilder`. Ποια είναι τα πλεονεκτήματα; Το GDA θα δημιουργήσει δυναμικά μια εντολή SQL, και θα είναι έγκυρη για τον πάροχο σύνδεσης που θα χρησιμοποιηθεί (θα χρησιμοποιήσει την ίδια σύνταξη SQL που θα ορίσει ο πάροχος). Ας μελετήσουμε τον κώδικα:

Γραμμές 2-3: Ελέγξτε εάν ο χρήστης συμπλήρωσε όλα τα πεδία. Ο κώδικας για την ιδιωτική μέθοδο `_validateFields` είναι πραγματικά απλός και μπορείτε να τον διαβάσετε στην πλήρη παρουσίαση πηγαίου κώδικα.

Γραμμή 5: Ο γρηγορότερος τρόπος για εκτέλεση του `INSERT`. Σχολιάζεται, καθώς θέλουμε να εμφανίσουμε τη χρήση του αντικειμένου `SqlBuilder` για κατασκευή μιας πρότασης SQL φορητής μέσα από τις βάσεις δεδομένων.

Γραμμή 7: Δημιουργία του αντικειμένου `SqlBuilder`. Πρέπει να περάσουμε τον τύπο της πρότασης που πρόκειται να κατασκευάσουμε. Μπορεί να είναι `SELECT`, `UPDATE`, `INSERT` ή `DELETE`.

Γραμμή 8: Ορισμός του ονόματος του πίνακα στον οποίο η κατασκευασμένη πρόταση θα λειτουργήσει (θα παράξει `INSERT INTO demo`)

Γραμμές 9-10: Ορισμός των πεδίων και των τιμών τους που θα είναι τμήμα της πρότασης. Το πρώτο όρισμα είναι το όνομα πεδίου (όπως στον πίνακα). Το δεύτερο όρισμα είναι η τιμή για αυτό το πεδίο.

Γραμμή 11: Λήψη του δυναμικά δημιουργημένου αντικειμένου `Statement`, που αντιπροσωπεύει μια πρόταση SQL.

Γραμμή 12: Τελικά, εκτέλεση της πρότασης SQL (`INSERT`).

Γραμμή 14: Ελέγξτε την ταυτότητα και πεδία ονομάτων στην οθόνη. Ο κώδικας για την ιδιωτική μέθοδο `_validateFields` είναι πραγματικά απλός και μπορείτε να τον διαβάσετε στην πλήρη παρουσίαση πηγαίου κώδικα.

Γραμμή 15: Ανανέωση της προβολής στην οθόνη κάνοντας ένα άλλο `SELECT`.

Μπορείτε επίσης να χρησιμοποιήσετε παραμέτρους ενώ κατασκευάζετε την πρόταση. Χρησιμοποιώντας τα αντικείμενα `SqlBuilder` και παραμέτρους υφίστασθε λιγότερες επιθέσεις όπως ενέσεις SQL. Σημειώστε το τεκμηρίωση GDA για περισσότερες πληροφορίες σχετικά με τις παραμέτρους.

# Τρέξτε την εφαρμογή

Όλος ο απαιτούμενος κώδικας πρέπει να είναι τώρα στη θέση, έτσι προσπαθήστε να τρέξετε τον κώδικα. Έχετε τώρα μια βάση δεδομένων για τη συλλογής σας των εγγραφών!

# Υλοποίηση αναφοράς

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