Share
Bienvenue au quatrième et dernier volet de notre série, qui explique comment créer une application de commande de pizza avec Titanium Mobile. Dans ce tutoriel, nous allons créer le traitement des commandes des clients et envoyer les résultats par courrier électronique au chef de pizza.!
Avant d'appeler notre fichier PHP, nous souhaitons effectuer un peu de validation du formulaire. Nous voulons simplement vérifier si les champs sont vides et, s’ils le sont, avertir l’utilisateur de les renseigner..
Ouvrez votre details.js fichier et ajouter cet extrait sous notre bouton Annuler bouton-événement:
Accentsconagua
//-- Soumettre la commande. Order.addEventListener ('click', function () if (names.value == "|| address1.value ==" || address2.value == ") alert ('Tous les champs are required '); else // - Désactivez les champs et les boutons avant de soumettre notre requête HTTP à l'adresse names.enabled = false; address1.enabled = false; address2.enabled = false; order.enabled = false; cancel.enabled = false ; // - Remplacez cette URL par votre adresse virtuelle, où qu'elle existe, orderReq.open ('POST', 'http: //votreserveur.com/submit_order.php'); var params = noms: noms.nom, valeur1, adresse1: value, address2: address2.value, crust: win.crust, garnitures: win.toppings; orderReq.send (params);); Dans le tutoriel précédent, nous avons fait la details.js fichier dans lequel le code ci-dessus doit être placé. Nous avons défini le openReq variable en haut du script dans le dernier tutoriel, et cette variable sera utilisée pour communiquer entre le code côté client et le fichier PHP côté serveur.
Si tous les champs sont remplis, nous désactiverons tous les champs de texte afin que l'utilisateur ne puisse pas les modifier une fois qu'ils ont été envoyés. Nous appelons ensuite le ouvrir() méthode sur notre orderReq variable. Cela va configurer le fichier que nous allons ouvrir. Nous faisons aussi un nouvel objet appelé params. Nous lui donnons des clés et des valeurs auxquelles nous accéderons dans le script PHP. Enfin, nous appelons le envoyer() méthode.
Il est important de noter que si ce script était destiné à une application en direct, nous devions effectuer une validation importante côté serveur, en plus de la validation côté client fournie ci-dessus. Nous allons sauter cette étape dans ce tutoriel et nous concentrer sur la construction du code mobile..
Faire un nouveau fichier appelé submit_order.php et insérez le texte suivant:
"; $ message. = $ noms
"; $ message. = $ address1."
"; $ message. = $ address2."
"; $ message. = $ crust." pizza avec:
"; $ message. ="
En partant du haut, nous postons nos variables à partir du param objet que nous avons fabriqué detais.js. Ensuite, nous devons convertir le tableau Javascript en un tableau PHP. Le tableau Javascript était un peu délicat à cause des sauts de ligne que nous avons insérés dans le code (si vous connaissez une meilleure méthode, postez-la dans les commentaires!). La méthode que j'ai proposée était assez simple et propre.
La prochaine partie, nous allons afficher à quoi ressemble le message. le $ à variable est l'endroit où vous devez insérer l'adresse e-mail à l'endroit où vous souhaitez que la commande soit envoyée. Ensuite, nous vérifions la longueur des garnitures pour déterminer s’il s’agissait uniquement d’une pizza au fromage ou si l’acheteur a spécifié des garnitures personnalisées. S'il y avait des garnitures, nous allons créer une liste HTML pour afficher les garnitures..
Ensuite, nous définissons les en-têtes. Cela permettra au courrier électronique d'être au format HTML lorsque vous le recevrez. Ensuite, nous appelons le PHP courrier() méthode. Il est formaté comme ceci: mail ($ à, $ sujet, $ message, $ en-têtes). Dans le code, nous testons si le courrier est envoyé, définissons le $ réponse Vrai si c'est le cas ou faux si ce n'est pas le cas. Finalement, le json_encode ($ response) permettra à la details.js fichier pour relire l'objet. N'oubliez pas de télécharger ce fichier sur votre serveur!
en charge un événement Revenons à details.js. Sous notre événement click pour le bouton de commande, nous devons créer un nouveau en charge événement et pendant que nous sommes ici, ajoutons notre une erreur un événement.
// - Méthode onLoad pour notre requête http orderReq.onload = function () var json = this.responseText; var réponse = JSON.parse (json); // - Un courrier a été envoyé si (response.mail == true) var alertDialog = Titanium.UI.createAlertDialog (title: 'Success', message: 'Votre commande a été soumise (vérifiez le courrier électronique que vous avez utilisé dans votre submit_order fichier .php) ', buttonNames: [' OK ']); alertDialog.show (); alertDialog.addEventListener ('click', fonction (e) Ti.App.fireEvent ('resetApp');); else // - Alerte d'échec du courrier ("PHP n'a pas pu envoyer la commande au courrier électronique fourni dans submit_order.php. Êtes-vous sûr de disposer d'un client de messagerie sur votre serveur?"); names.enabled = true; address1.enabled = true; address2.enabled = true; order.enabled = true; cancel.enabled = true; ; // - Erreur réseau orderReq.onerror = function (event) alert ('Erreur réseau:' + JSON.stringify (event)); names.enabled = true; address1.enabled = true; address2.enabled = true; order.enabled = true; cancel.enabled = true; ; Nous revenons à notre orderReq var et ajouter un en charge et une erreur un événement. Nous faisons une nouvelle var appelée JSON et le mettre égal à this.responseText. Cela contient les données renvoyées par notre fichier PHP. Ensuite, nous devons analyser la chaîne json en appelant JSON.parse (json). Nous pouvons maintenant envoyer un SMS si response.mail est vrai, le message a été envoyé avec succès. En cas de succès, avertissez l'utilisateur que la commande a été soumise. Nous voulons écouter l'événement de clic sur le bouton OK cette fois-ci afin de créer une alerte un peu différente de celle utilisée. Nous écoutons l’événement click et nous déclenchons un nouvel événement personnalisé appelé resetApp. Nous allons couvrir cela dans la prochaine étape.
Notre une erreur J'espère que l'événement vous dira si quelque chose ne va pas. Si en charge renvoyé false, les chances sont que votre serveur ne supporte pas courrier(). Une autre bonne possibilité est que vous avez une mauvaise prononciation. Essayez d’accéder au script directement dans votre navigateur Web et de vérifier s’il contient des erreurs de syntaxe..
Allez-y et essayez maintenant. Soumettez votre commande. J'espère que vous verrez quelque chose de similaire à l'écran ci-dessous:
Si vous avez un message de réussite, vérifiez le courrier électronique fourni dans le script PHP. Voici à quoi ressemblait le mien via Gmail:
resetApp un événement Ouvrons le main.js déposer à nouveau. Nous allons ajouter notre dernier événement personnalisé:
// - Demandez à notre application d'écouter nos événements personnalisés Ti.App.addEventListener ('toppings', openToppings); Ti.App.addEventListener ('cancelToppings', openCrust); Ti.App.addEventListener ('details', openDetails); Ti.App.addEventListener ('cancelDetails', openToppings); Ti.App.addEventListener ('resetApp', resetApp); Maintenant, pour gérer l'événement personnalisé, nous devons créer une nouvelle méthode appelée resetApp ().
// - Ceci est appelé après qu'une commande est soumise. Fondamentalement, l'application recommence. function resetApp () details.close (); openCrust ();
Une fois la commande validée, l'application est réinitialisée et vous revenez à l'écran des croûtes..
Nous avons utilisé notre orderReq var pour gérer le script PHP. Nous avons envoyé des variables à PHP et les avons analysées, avons tenté d'envoyer un courrier électronique et avons géré la réponse du script. J'espère que vous avez tous réussi jusqu'ici sans problème! J'espère que vous avez tous apprécié cette série autant que j'ai aimé l'écrire. C'était une application amusante à créer et j'espère que vous pourrez utiliser ce que vous avez appris et appliquer les principes à vos propres applications.!
