Share
Willkommen zum zweiten Teil unserer Serie zur datenbankgestützten Entwicklung von Titanium Mobile. In diesem Tutorial fügen wir Werte in eine lokale SQLite-Datenbank ein und lesen und schreiben Daten in eine entfernte MySQL-Datenbank. Dieses Tutorial wird eine Menge Code enthalten, aber ich habe versucht, so gründlich wie möglich zu sein, ohne jemanden zu langweilen. Bringen Sie Ihre Fragen zu den Kommentaren!
Im ersten Teil dieser Serie haben wir eine lokale SQLite-Datenbank erstellt und nur drei Dateien erstellt, die Seiten mit individuellen Spezifikationen für jeden Eintrag generierten. Mit dieser Methode wird unsere Anwendung einfacher zu verwalten und hat einen geringeren Platzbedarf. Wir werden den größten Teil des Codes vom ersten Tut an verwenden.
HINWEIS: Ich habe im Quellcode zwei Dinge in der Quelle geändert. Einer war ein falscher Datenbankname und der andere war ein Variablenname, der einige Verwirrung ausgelöst hatte. Bitte laden Sie die Quelle oben herunter, um einige Kopfschmerzen zu vermeiden.
Öffnen Sie Titanium Developer und erstellen Sie ein neues Projekt. Wählen Handy, Mobiltelefon und füllen Sie alle erforderlichen Informationen aus. Dann klick Projekt erstellen. Kopieren Sie den Ordner "products" und die Datenbank "products.sqlite" in das neue Ressourcenverzeichnis. Diese Dateien müssen nicht berührt werden. Jetzt können wir loslegen.
Wir benötigen vier Registerkarten für dieses Tut. Ich benutze die app.js-Datei gerne nur als Gateway zur Anwendung. Ich persönlich finde es einfacher, die Dinge auf diese Weise zu organisieren. Wir werden die Registerkarten erstellen und neue Dateien öffnen. Hier ist der endgültige Code für app.js. Es ist ziemlich einfach und linear.
var tabGroup = Ti.UI.createTabGroup (); var win1 = Ti.UI.createWindow (title: 'Local Read', URL: 'products / product_category.js'); var tab1 = Ti.UI.createTab (Symbol: 'images / tabs / KS_nav_ui.png', Titel: 'Local Read', Fenster: win1); var win2 = Ti.UI.createWindow (title: 'Local Insert', URL: 'products / products_write.js'); var tab2 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', Titel: 'Local Insert', Fenster: win2); var win3 = Ti.UI.createWindow (title: 'Remote Read', URL: 'remote_read.js'); var tab3 = Ti.UI.createTab (Symbol: 'images / tabs / KS_nav_ui.png', Titel: 'Remote Read', Fenster: win3); var win4 = Ti.UI.createWindow (title: 'Remote Insert', URL: 'remote_write.js'); var tab4 = Ti.UI.createTab (Symbol: 'images / tabs / KS_nav_ui.png', Titel: 'Remote Insert', Fenster: win4); tabGroup.addTab (tab1); tabGroup.addTab (tab2); tabGroup.addTab (tab3); tabGroup.addTab (tab4); tabGroup.open ();
Tab 1 ist das gesamte vorherige Tut. Wir werden diese Dateien nicht berühren, sondern die Platzhalterdateien für die anderen drei Registerkarten erstellen.
Öffnen Sie die Datei "products_write.js". In dieser Datei müssen wir für jedes Feld in unserer Datenbank ein Textfeld erstellen, eine Schaltfläche erstellen und einen eventListener anhängen, um sowohl einige Validierungen durchzuführen als auch eine Funktion auszuführen und eine Funktion zum Einfügen der Daten zu erstellen. Es ist viel wiederholter Code. Hier ist das Endprodukt:
Der abgespeckte Code sieht wie folgt aus. Alle Textfelder haben die gleichen Attribute mit Ausnahme der Variablen "top" und "hintText". Wir werden nur einen anschauen.
Accentsconagua
// var für das currentWindow erstellen var currentWin = Ti.UI.currentWindow; Funktion insertRows (dbData) ** FUNCTION HERE **; var category = Ti.UI.createTextField (Farbe: '# 336699', oben: 10, links: 10, Breite: 300, Höhe: 40, HintText: 'Kategorie', keyboardType: Ti.UI.KEYBOARD_DEFAULT, borderStyle: Ti.) .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (Kategorie); var name = Ti.UI.createTextField (…); currentWin.add (Name); var pwidth = Ti.UI.createTextField (…); currentWin.add (pwidth); var pheight = Ti.UI.createTextField (…); currentWin.add (Höhe); var pcolor = Ti.UI.createTextField (…); currentWin.add (pcolor); var qty = Ti.UI.createTextField (…); currentWin.add (Anzahl); var btn = Ti.UI.createButton (title: 'Insert Record', oben: 310, Breite: 130, Höhe: 35, borderRadius: 1, Schriftart: fontFamily: 'Arial', fontWeight: 'fett', fontSize: 14); currentWin.add (btn); btn.addEventListener ('click', Funktion (e) if (category.value! = "&& name.value! =" && pwidth.value! = "&& pheight.value! =" && pcolor.value! = "&& qty.value! = ") var dbData = category: category.value, name: name.value, pwidth: pwidth.value, pheight: pheight.value, pcolor: pcolor.value, qty.value; insertRows (dbData); else alert ("Bitte alle Felder ausfüllen");;); Die Textfelder werden erstellt und Attribute zugewiesen. Der Variablenname wird später verwendet. Die Schaltfläche wird erstellt und wir fügen einen eventListener hinzu. Hier überprüfen wir zuerst, ob die Textfelder nicht gleich (! =) "Leer" sind, und erstellen dann eine Var mit den Textfeldwerten. Diese Werte werden dann an die Funktion insertRows () übergeben. Wenn ein Feld leer bleibt, wird ein Alarm ausgelöst.
Die Funktion empfängt die Textfeldwerte von dbData. Wir erstellen dann unsere SQL-Anweisung, verwenden unsere DB-Var und "Ausführen", um eine weitere Var zu erstellen, diese Var aufzurufen und schließlich darauf hinzuweisen, dass die Zeilen eingefügt wurden. Wenn beim Einfügen ein Fehler auftritt, wird diese Warnung nicht ausgelöst. Was wahrscheinlich passieren wird, ist, dass die Anwendung abstürzt.
function insertRows (dbData) var db = Ti.Database.install ('… /products.sqlite','products '); var theData = db.execute ('INSERT INTO-Produkte (Kategorie, Name, Breite, Höhe, Breite, Menge)) VALUES ("' + category.value + '", "' + name.value + '", "' + pwidth.value + '","' + pheight.value + '","' + pcolor.value + '","' + qty.value + '")'); die Daten; alert ("Eingefügte Zeilen"); ; 
Hier ist unsere jetzt aktualisierte lokale Datenbank. Hinweis: Ich habe keine Erklärung dafür, aber der iOS-Simulator zeigt die Aktualisierungen für Ihre Datenbank nicht an, bis Sie ihn beenden und neu starten. Dies gilt für lokale und entfernte Datenbanken.
Remote-Datenbanken können nicht direkt von einer Anwendung aus aufgerufen werden. Wir müssen Ti.Network.createHTTPClient () verwenden. Um eine PHP-Datei zu öffnen, die eine Verbindung zu unserer Datenbank herstellt, fragen Sie sie ab und geben Sie die Werte an die Anwendung zurück. Wir werden dies mit JSON tun.
Zuerst müssen wir unsere entfernte Datenbank erstellen. Der Einfachheit halber habe ich meine Datenbank exportiert. Sie können phpMyAdmin verwenden, um es zu importieren. Wir werden vom Server bis zur Anwendung arbeiten.
Abfrage ("SET NAMES 'utf8'"); $ json = array (); if ($ result = $ mysqli-> query ("select * from colors")) while ($ row = $ result-> fetch_assoc ()) $ json [] = array ('shade' => $ row [' Schatten '],); $ result-> close (); Header ("Inhaltstyp: Text / Json"); echo json_encode (array ('colors' => $ json)); $ mysqli-> close (); ?> Wenn Sie viel mit PHP und MySQL arbeiten, sollte dies ziemlich vertraut sein. Wir verwenden mysqli (die verbesserte Version des MySQL-Treibers von PHP), um die Verbindung zu unserer Datenbank herzustellen, einen Fehler zurückzugeben, wenn keine Verbindung hergestellt wird, unser Array zu erstellen und an unsere Anwendung zurückzugeben. Das Einzige, was ich wirklich hervorheben möchte, ist die Belegung des Arrays. Ich habe dies aus Gründen der Zeit sehr einfach gehalten. Wenn Sie weitere Werte übergeben möchten, fügen Sie einfach die Abfrage hinzu und fügen Sie die Werte dem Array hinzu.
Die Anwendungsdatei ist auch unkompliziert. Wir erstellen unsere Var mit dem Ti.Network.createHTTPClient (), setzen die URL mit "open" auf die PHP-Datei, senden die Anfrage und empfangen sie und empfängt sie und parst die Antwort. Wir verwenden dieselbe Methode wie beim ersten Tut, um das Array hier zu generieren, verwenden jedoch .push.
var currentWin = Ti.UI.currentWindow; var sendit = Ti.Network.createHTTPClient (); sendit.open ('GET', 'http://www.danstever.com/sandbox/mobile_tuts/read.php'); sendit.send (); sendit.onload = function () var json = JSON.parse (this.responseText); var json = json.colors; var dataArray = []; var pos; für (pos = 0; pos < json.length; pos++) dataArray.push(title:"+ json[pos].shade +"); // set the array to the tableView tableview.setData(dataArray); ; ; var tableview = Ti.UI.createTableView( ); currentWin.add(tableview); Sie sollten jetzt die Online-Datenbank anzeigen können:
Die lokale Anwendungsdatei für die Remote-Einfügung ist fast genauso wie oben. Es gibt zwei Unterschiede: Wir verwenden eine PHP-Datei und Ti.Network und müssen Fehler oder Alarme aus der PHP-Datei abfangen. Hier ist die Insert-Registerkarte:
var currentWin = Ti.UI.currentWindow; var shade = Ti.UI.createTextField (color: '# 336699', Oberseite: 70, links: 10, Breite: 300, Höhe: 40, HintText: 'Color', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, borderStyle: Titanium .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (Schatten); var btn = Ti.UI.createButton (title: 'Insert Record', Oberseite: 130, Breite: 130, Höhe: 35, borderRadius: 1, Schriftart: fontFamily: 'Arial', fontWeight: 'fett', fontSize: 14); currentWin.add (btn); var request = Ti.Network.createHTTPClient (); request.onload = function () if (this.responseText == "Einfügen fehlgeschlagen") btn.enabled = true; btn.opacity = 1; alert (this.responseText); else var alertDialog = Ti.UI.createAlertDialog (title: 'Alert', Nachricht: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('click', Funktion (e) currentWin.tabGroup.setActiveTab (2);); ; btn.addEventListener ('click', Funktion (e) if (shade.value! = ") request.open (" POST "," http://danstever.com/sandbox/mobile_tuts/insert.php "); var params = shade: shade.value; request.send (params); else alert ("Bitte geben Sie eine Farbe ein.");;); Die Onload-Funktion wartet auf Antworten von der PHP-Seite. Wenn ein Fehler auftritt, wird von der Anwendung eine Warnung ausgegeben. Dies ist sehr hilfreich beim Debuggen. Im eventListener der Schaltfläche überprüfen wir erneut, ob der Wert nicht leer ist, und übergeben ihn an die PHP-Datei.
Abfrage ($ insert); printf ("Danke für die neue Farbe!"); $ mysqli-> close (); ?> Wir stellen die Verbindung her, deklarieren die Variable und ordnen sie dem Wert zu, der von unserer Anwendung mit gesendet wird $ _POST ['YourVarHere'];. Wir erstellen die Einfügeanweisung, geben eine Warnung aus, wenn sie erfolgreich war, und schließen die Datenbankverbindung.
Wir haben jetzt unseren glänzenden neuen Eintrag in unserer Datenbank. Denken Sie jedoch daran, dass Sie den Simulator möglicherweise neu starten müssen, damit er angezeigt wird!
Ich weiß, dass es eine Menge zu behandeln war und vielleicht nicht viele Erklärungen. Wenn Sie immer noch Schwierigkeiten haben, zu verstehen, was los ist, empfehle ich Ihnen, die Quelle herunterzuladen und in einer separaten Anwendung einzurichten und Ihre aktuelle App beiseite zu legen. Denken Sie daran, wir haben eine sehr starke und hilfreiche Community. Bitte kommentieren und stellen Sie Fragen.
