Share
Bine ați venit în cea de-a doua parte a seriei noastre de dezvoltare bazată pe baze de date Titanium Mobile. În acest tutorial, vom introduce valori într-o bază de date locală SQLite și citim și scrie date într-o bază de date MySQL la distanță. Acest tutorial va avea o mulțime de cod, dar am încercat să fiu cât mai profund posibil, fără să plictisesc pe nimeni. Adu-ți întrebările la secțiunile de comentarii!
În prima parte a acestei serii, am creat o bază de date locală SQLite și am construit doar trei fișiere care au generat pagini cu specificații individuale pentru fiecare intrare. Folosind această metodă, aplicația noastră devine mai ușor de gestionat și are o amprentă mai mică. Vom folosi cea mai mare parte a codului din primul tut.
NOTĂ: Am schimbat două lucruri în sursă din Tutorialul precedent. Unul era un nume de bază de date rău, iar celălalt era un nume variabil care provocase o confuzie. Descărcați sursa de mai sus pentru a salva unele dureri de cap.
Deschideți Titanium Developer și creați un nou proiect. Alege Mobil și completați toate informațiile solicitate. Apoi apasa Creați un proiect. Copiați folderul "produse" și baza de date "products.sqlite" în noul director de resurse. Aceste fișiere nu trebuie să fie atinse. Acum suntem pregătiți să mergem.
Vom avea nevoie de patru file pentru acest tut. Îmi place să folosesc fișierul app.js numai ca o poartă de acces la aplicație. Personal, simt că este mai ușor să păstrați lucrurile organizate în acest fel. Vom crea filele și le vom deschide fișiere noi. Aici este codul final pentru app.js. Este destul de simplă și liniară.
var tabGroup = Ti.UI.createTabGrup (); var win1 = Ti.UI.createWindow (title: 'Citire locală', url: 'products / product_category.js'); var tab1 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titlu: 'Local Read', fereastră: win1); var win2 = Ti.UI.createWindow (title: 'Introducere locală', url: 'products / products_write.js'); var tab2 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titlu: 'Local Insert', fereastră: win2); var win3 = Ti.UI.createWindow (title: 'Citește la distanță', url: 'remote_read.js'); var tab3 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titlu: 'Citește la distanță', fereastră: win3); var win4 = Ti.UI.createWindow (title: 'Remote Inserare', url: 'remote_write.js'); var tab4 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titlu: 'Remote Insert', fereastra: win4); tabGroup.addTab (Fila1); tabGroup.addTab (tab2); tabGroup.addTab (tab3); tabGroup.addTab (tab4); tabGroup.open ();
Tab 1 este întregul tut. Nu vom atinge aceste fișiere, dar continuați și creați fișierele substituent pentru celelalte trei file.
Deschideți fișierul "products_write.js". În acest fișier vom avea nevoie să creați un câmp de text pentru fiecare câmp din baza noastră de date, să creați un buton și să atașați un eventListener la acesta, atât pentru a efectua o validare și a executa o funcție, cât și pentru a crea o funcție pentru a introduce datele. Este o mulțime de cod repetat. Aici este produsul final:
Codul dezbrăcat va arăta după cum urmează. Toate câmpurile de text au aceleași atribute, cu excepția variabilelor "top" și "hintText". Ne vom uita doar la unul.
Accentsconagua
// create var pentru curentWindow var currentWin = Ti.UI.currentWindow; funcția insertRows (dbData) ** FUNCȚIA AICI **; var categorie = Ti.UI.createTextField (culoare: '# 336699', top: 10, stânga: 10, lățimea: 300, înălțimea: 40, hintText: 'Category', keyboardType: Ti.UI.KEYBOARD_DEFAULT, borderStyle: Ti .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (categoria); var nume = Ti.UI.createTextField (...); currentWin.add (nume); var pwidth = Ti.UI.createTextField (...); currentWin.add (pwidth); var pheight = Ti.UI.createTextField (...); currentWin.add (pheight); var pcolor = Ti.UI.createTextField (...); currentWin.add (pcolor); var qty = Ti.UI.createTextField (...); currentWin.add (cantitate); var btn = Ti.UI.createButton (title: 'Inserare înregistrare', top: 310, lățime: 130, înălțime: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 14); currentWin.add (BTN); btn.addEventListener ("clic", funcția (e) if (category.value! = "&& name.value! =" && pwidth.value! = "&& pheight.value! =" && pcolor.value! = "&& var dbData = categorie: category.value, name: name.value, pwidth: pwidth.value, pheight: pheight.value, pcolor: pcolor.value, qty: qty.value; (dbData); altceva alert ("Completați toate câmpurile");;); Câmpurile de text sunt create și atribuite atributele. Numele variabilei este ceea ce vom folosi ulterior. Butonul este creat și apoi adăugăm un eventListener. Aici verificăm mai întâi să vă asigurați că câmpurile de text nu sunt egale cu (! =) "Blank", apoi creați un var cu valorile câmpului de text. Aceste valori sunt apoi transferate la funcția insertRows (). Dacă un câmp este lăsat necompletat, o alertă se va declanșa.
Funcția primește valorile din câmpurile text din dbData. Apoi vom crea instrucțiunea SQL, folosim db var și "execute" pentru a crea un alt var, apela ca var, și în final a alerta că rândurile au fost inserate. Dacă există o eroare la inserare, această alertă nu se va declanșa. Ce se va întâmpla probabil că aplicația se va prăbuși.
funcția insertRows (dbData) var db = Ti.Database.install ('... /products.sqlite'''products'); var dataData = db.execute ('INSERT INTO produse (categorie, nume, pwidth, pheight, pcolor, qty) VALUES ("+" '', '' + pheight.value + '"," + pcolor.value + "", "+ qty.value +" ")'); datele; alertă ("rânduri introduse"); ; 
Aici este baza noastră de date actualizată acum. Notă: nu am o explicație pentru acest lucru, dar simulatorul iOS nu va afișa actualizările în baza de date până când nu ieșiți din nou și nu vă relansați. Acest lucru se aplică la bazele de date locale și la distanță.
Bazele de date la distanță nu pot fi apelate direct dintr-o aplicație. Trebuie să folosim Ti.Network.createHTTPClient (); pentru a deschide un fișier PHP care se va conecta la baza noastră de date, să o interogheze și să returneze valorile aplicației. Vom face acest lucru folosind JSON.
Mai întâi trebuie să ne creăm baza de date la distanță. Pentru comoditate, mi-am exportat baza de date. Puteți folosi phpMyAdmin pentru a le importa. Vom lucra de la server la aplicație.
interogare ("SET NAMES 'utf8'"); $ json = array (); dacă $ result = $ mysqli-> interogare ("select * din culori")) în timp ce ($ row = $ result-> fetch_assoc ()) $ $ json [ umbra],); $ result-> close (); header ("Content-Type: text / json"); echo codul json_encode (array ('colors' => $ json)); $ Mysqli-> close (); ?> Dacă lucrați foarte bine cu PHP și MySQL, acest lucru ar trebui să pară destul de familiar. Folosim mysqli (care este versiunea îmbunătățită a driverului PHP MySQL) pentru a crea conexiunea la baza noastră de date, a returna o eroare dacă nu se conectează, ne creează matricea și o returnează aplicației noastre. Singurul lucru pe care chiar vreau să-l subliniez este în ceea ce privește popularea matricei. Am păstrat acest lucru foarte simplu pentru binele timpului. Dacă doriți să treceți mai multe valori, adăugați pur și simplu la interogare și apoi adăugați valorile la matrice.
Dosarul de cerere este de asemenea simplu. Noi creăm var-ul nostru cu Ti.Network.createHTTPClient (), setăm URL-ul cu "open" la fișierul PHP, trimitem cererea, apoi îl primim și analizăm răspunsul. Folosim aceeași metodă ca și cea de la primul tut pentru a genera matricea aici, dar folosind .push.
var currentWin = Ti.UI.currentWindow; var trimis = Ti.Network.createHTTPClient (); sendit.open ('GET', 'http://www.danstever.com/sandbox/mobile_tuts/read.php'); sendit.send (); sendit.onload = funcție () var json = JSON.parse (acest.responseText); var json = json.color; var dataArray = []; var pos; pentru (pos = 0; poz < 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); Acum ar trebui să puteți vizualiza baza de date online:
Fișierul aplicației locale pentru inserarea de la distanță este aproape exact același lucru ca mai sus. Există două diferențe: folosim un fișier PHP și o rețea Ti.Network și trebuie să detectăm erori sau alerte din fișierul PHP. Aici este fișa de inserare:
var currentWin = Ti.UI.currentWindow; var shade = Ti.UI.createTextField (color: '# 336699', top: 70, stânga: 10, lățimea: 300, înălțimea: 40, hintText: 'Color', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, borderStyle: Titanium .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (umbră); var btn = Ti.UI.createButton (title: 'Inserare înregistrare', top: 130, lățime: 130, înălțime: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 14); currentWin.add (BTN); var request = Ti.Network.createHTTPClient (); request.onload = function () if (this.responseText == "Introducere eșuată") btn.enabled = true; btn.opacity = 1; alert (this.responseText); altceva var alertDialog = Ti.UI.createAlertDialog (title: 'Alert', mesaj: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ("clic", funcția (e) currentWin.tabGroup.setActiveTab (2);); ; btn.addEventListener ("clic", funcția (e) if (shade.value! = ") request.open (" POST "," http://danstever.com/sandbox/mobile_tuts/insert.php "); var params = shade: shade.value; request.send (params); altceva alert ("Introduceți o culoare.");;); Funcția onload este ascultarea răspunsurilor din pagina PHP. Dacă există o eroare, aceasta va determina aplicația să emită o alertă. Acest lucru este foarte util pentru depanare. În eventListener la buton, verificăm din nou pentru a vă asigura că valoarea nu este goală, apoi trimiteți-o la fișierul PHP.
interogare (insert $); printf ("Vă mulțumim pentru noua culoare!"); $ Mysqli-> close (); ?> Facem conexiunea și declarăm variabila și îi atribuim valorii trimise din aplicația noastră cu $ _POST [ 'YourVarHere'];. Creăm instrucțiunea insert, alertă dacă sa reușit și închide conexiunea bazei de date.
Acum avem noua noastră intrare strălucitoare în baza noastră de date, dar, rețineți că va trebui să reporniți simulatorul pentru a afișa!
Știu că a fost o mulțime de acoperire și poate nu o tona de explicații. Dacă încă mai încercați să înțelegeți ce se întâmplă, vă încurajez să descărcați sursa și să o configurați într-o aplicație separată și să lucrați în afară de aplicația dvs. curentă. Amintiți-vă, avem o comunitate foarte puternică și de ajutor. Vă rugăm să comentați și să adresați întrebări.
