Share
Bienvenue dans la deuxième partie de notre série sur le développement Titanium Mobile basé sur les bases de données. Dans ce tutoriel, nous allons insérer des valeurs dans une base de données SQLite locale et lire et écrire des données dans une base de données MySQL distante. Ce tutoriel aura beaucoup de code, mais j'ai essayé d'être le plus complet possible sans ennuyer personne. Apportez vos questions dans les sections de commentaires!
Dans la première partie de cette série, nous avons créé une base de données SQLite locale et construit seulement trois fichiers générant des pages avec des spécifications individuelles pour chaque entrée. En utilisant cette méthode, notre application devient plus facile à gérer et son encombrement est réduit. Nous allons utiliser la plupart du code du premier tut.
NOTE: J'ai changé deux choses dans la source de la précédente tut. L'un était un nom de base de données incorrect et l'autre, un nom de variable qui avait causé une certaine confusion. S'il vous plaît télécharger la source ci-dessus pour économiser des maux de tête.
Ouvrez Titanium Developer et créez un nouveau projet. Choisir Mobile et remplissez toutes les informations requises. Puis clique Créer un projet. Copiez le dossier "products" et la base de données "products.sqlite" dans le nouveau répertoire de ressources. Ces fichiers ne devront pas être touchés. Nous sommes maintenant prêts à rouler.
Nous allons avoir besoin de quatre onglets pour cette tut. J'aime utiliser le fichier app.js uniquement comme passerelle vers l'application. Personnellement, j'estime qu'il est plus facile de garder les choses organisées de cette façon. Nous allons créer les onglets et leur faire ouvrir de nouveaux fichiers. Voici le code final pour app.js. C'est assez simple et linéaire.
var tabGroup = Ti.UI.createTabGroup (); var win1 = Ti.UI.createWindow (titre: 'Lecture locale', url: 'produits / product_category.js'); var tab1 = Ti.UI.createTab (icône: 'images / tabs / KS_nav_ui.png', titre: 'Lecture locale', fenêtre: win1); var win2 = Ti.UI.createWindow (titre: 'Insertion locale', url: 'produits / produits_write.js'); var tab2 = Ti.UI.createTab (icône: 'images / tabs / KS_nav_ui.png', titre: 'Insertion locale', fenêtre: win2); var win3 = Ti.UI.createWindow (titre: 'Lecture à distance', url: 'remote_read.js'); var tab3 = Ti.UI.createTab (icône: 'images / tabs / KS_nav_ui.png', titre: 'Lecture à distance', fenêtre: win3); var win4 = Ti.UI.createWindow (titre: 'Insertion distante', url: 'remote_write.js'); var tab4 = Ti.UI.createTab (icône: 'images / tabs / KS_nav_ui.png', titre: 'Insertion distante', fenêtre: win4); tabGroup.addTab (tab1); tabGroup.addTab (tab2); tabGroup.addTab (tab3); tabGroup.addTab (tab4); tabGroup.open ();
L'onglet 1 est l'intégralité du tut précédent. Nous ne toucherons pas ces fichiers, mais allons de l'avant et créons les fichiers d'espaces réservés pour les trois autres onglets..
Ouvrez le fichier "products_write.js". Dans ce fichier, nous devrons créer un champ de texte pour chaque champ de notre base de données, créer un bouton et y attacher un eventListener afin de valider et d'exécuter une fonction, et créer une fonction pour insérer les données. C'est beaucoup de code répété. Voici le produit final:
Le code simplifié ressemblera à ce qui suit. Tous les champs de texte ont les mêmes attributs à l'exception des variables "top" et "hintText". Nous ne regarderons qu'un.
Accentsconagua
// crée une variable pour la variable currentWindow var currentWin = Ti.UI.currentWindow; fonction insertRows (dbData) ** FUNCTION HERE **; var category = Ti.UI.createTextField (color: '# 336699', haut: 10, left: 10, width: 300, height: 40, hintText: 'Category', keyboardType: Ti.UI.KEYBOARD_DEFAULT, borderStyle: Ti .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (catégorie); var name = Ti.UI.createTextField (…); currentWin.add (nom); 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 (qté); var btn = Ti.UI.createButton (titre: 'Insérer un enregistrement', en haut: 310, largeur: 130, hauteur: 35, borderRadius: 1, police: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14); currentWin.add (btn); btn.addEventListener ('click', fonction (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, quantité (dbData); else alert ("Veuillez renseigner tous les champs");;); Les champs de texte sont créés et les attributs attribués. Le nom de la variable est ce que nous utiliserons plus tard. Le bouton est créé, puis nous ajoutons un eventListener. Ici, nous vérifions d’abord pour nous assurer que les champs de texte ne sont pas égaux à (! =) "Blanc", puis nous créons un var avec les valeurs des champs de texte. Ces valeurs sont ensuite transmises à la fonction insertRows (). Si un champ est laissé vide, une alerte sera déclenchée.
La fonction reçoit les valeurs de champ de texte de dbData. Nous créons ensuite notre instruction SQL, utilisons notre base de données var et "execute" pour créer une autre variable, appelons cette variable et, enfin, signalons que les lignes ont été insérées. S'il y a une erreur lors de l'insertion, cette alerte ne sera pas déclenchée. Ce qui va probablement arriver, c'est que l'application va planter.
fonction insertRows (dbData) var db = Ti.Database.install ('… /products.sqlite','products '); var theData = db.execute ('INSERT INTO produits (catégorie, nom, largeur, hauteur, couleur, quantité)) VALUES ("' + category.value +", "'+ name.value +" ","' + pwidth.value + '","' + pheight.value + "", "" + pcolor.value + "", "" + qty.value + "") "; les données; alert ("Lignes insérées"); ; 
Voici notre base de données locale maintenant mise à jour. Remarque: je n'ai pas d'explication à cela, mais le simulateur iOS n'affichera pas les mises à jour de votre base de données jusqu'à ce que vous quittiez et relançiez. Ceci s'applique aux bases de données locales et distantes.
Les bases de données distantes ne peuvent pas être appelées directement à partir d'une application. Nous devons utiliser Ti.Network.createHTTPClient (); pour ouvrir un fichier PHP qui se connectera à notre base de données, interrogez-le et renvoyez les valeurs à l'application. Nous ferons cela en utilisant JSON.
Nous devons d’abord créer notre base de données distante. Pour plus de commodité, j'ai exporté ma base de données. Vous pouvez utiliser phpMyAdmin pour l'importer. Nous allons travailler du serveur à l'application.
query ("SET NAMES 'utf8'"); $ json = array (); if ($ result = $ mysqli-> query ("select * parmi les couleurs")) while ($ row = $ result-> fetch_assoc ()) $ json [] = array ('shade' => $ row [' ombre '],); $ result-> close (); en-tête ("Content-Type: text / json"); echo json_encode (array ('colors' => $ json)); $ mysqli-> close (); ?> Si vous travaillez beaucoup avec PHP et MySQL, cela devrait vous paraître familier. Nous utilisons mysqli (qui est la version améliorée du pilote MySQL de PHP) pour créer la connexion à notre base de données, renvoyer une erreur si elle ne se connecte pas, créer notre tableau et le renvoyer à notre application. La seule chose que je veux vraiment souligner concerne le remplissage du tableau. J'ai gardé cela très simple pour le temps. Si vous souhaitez transmettre davantage de valeurs, ajoutez simplement à la requête, puis ajoutez les valeurs au tableau..
Le dossier de candidature est également simple. Nous créons notre var avec Ti.Network.createHTTPClient (), définissons l'URL avec "open" sur le fichier PHP, envoyons la demande, puis recevons-la et analysons la réponse. Nous utilisons la même méthode que depuis le premier logiciel pour générer le tableau ici, mais en utilisant .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; pour (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); Vous devriez maintenant pouvoir voir la base de données en ligne:
Le fichier d'application local pour l'insertion à distance est presque exactement le même que ci-dessus. Il existe deux différences: nous utilisons un fichier PHP et Ti.Network et devons détecter les erreurs ou les alertes provenant du fichier PHP. Voici l'onglet Insérer:
var currentWin = Ti.UI.currentWindow; var shade = Ti.UI.createTextField (color: '# 336699', haut: 70, left: 10, width: 300, height: 40, hintText: 'Color', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, borderStyle: Titanium .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (nuance); var btn = Ti.UI.createButton (titre: 'Insérer un enregistrement', en haut: 130, largeur: 130, hauteur: 35, borderRadius: 1, fonte: fontFamily: 'Arial', fontWeight: 'gras', fontSize: 14); currentWin.add (btn); var request = Ti.Network.createHTTPClient (); request.onload = function () if (this.responseText == "L'insertion a échoué") btn.enabled = true; btn.opacity = 1; alerte (this.responseText); else var alertDialog = Ti.UI.createAlertDialog (title: 'Alert', message: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('click', fonction (e) currentWin.tabGroup.setActiveTab (2);); ; btn.addEventListener ('click', fonction (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 ("Entrez une couleur.");;); La fonction onload écoute les réponses de la page PHP. S'il y a une erreur, l'application envoie une alerte. Ceci est très utile pour le débogage. Dans eventListener du bouton, nous vérifions à nouveau que la valeur n'est pas vide, puis transmettons-la au fichier PHP..
query ($ insert); printf ("Merci pour la nouvelle couleur!"); $ mysqli-> close (); ?> Nous établissons la connexion, déclarons la variable et l’attribuons à la valeur envoyée depuis notre application avec $ _POST ['YourVarHere'];. Nous créons l'instruction insert, alertons en cas de succès et fermons la connexion à la base de données..
Nous avons maintenant notre nouvelle entrée brillante dans notre base de données, mais, rappelez-vous, vous devrez peut-être redémarrer le simulateur pour qu'il puisse l'afficher.!
Je sais que c'était beaucoup à couvrir et peut-être pas une tonne d'explications. Si vous avez encore du mal à comprendre ce qui se passe, je vous encourage à télécharger le code source, à l'installer dans une application distincte et à travailler séparément de votre application actuelle. Rappelez-vous, nous avons une communauté très forte et utile. S'il vous plaît commenter et poser des questions.
