Share
Bine ați venit la cea de-a patra și ultima tranșă din seria noastră care demonstrează cum să construiți o aplicație de comandă a pizza cu Titanium Mobile. În acest tutorial, vom crea comenzile de procesare a clienților și vom trimite rezultatele prin e-mail către bucătarul de pizza!
Înainte de a ne apela la fișierul nostru PHP, vrem să facem o mică validare a formularului. Vrem doar să verificăm dacă câmpurile sunt goale și, dacă sunt, alertați utilizatorul să le completeze.
Deschide-ți details.js fișier și adăugați acest fragment în cadrul evenimentului de click pe butonul de anulare:
Accentsconagua
//-- Depune comanda. Verificați dacă câmpurile de text sunt goale order.addEventListener ("clic", funcția () if (names.value == "|| address1.value ==" || address2.value == ") alert (' sunt necesare '); altceva // - Dezactivați câmpurile și butoanele înainte de a face cererea noastră HTTP names.enabled = false; address1.enabled = false; address2.enabled = false; order.enabled = false; cancel.enabled = false ; // - Schimbați această adresă URL acolo unde există vreodată comandaReq.open ('POST', 'http: //yourserver.com/submit_order.php'); var params = names: names.value, address1: address1. valoare, adresa2: adresa2.value, crustă: win.crust, toppings: win.toppings; orderReq.send (params);); În tutorialul anterior am făcut details.js fișier în care trebuie plasat codul de mai sus. Am definit openReq variabilă în partea superioară a scriptului din ultimul tutorial, iar această variabilă va fi utilizată pentru a comunica între codul de pe partea clientului și fișierul PHP de la server.
Dacă toate câmpurile sunt completate, vom dezactiva toate câmpurile de text, astfel încât utilizatorul nu le poate modifica odată ce au fost trimise. Apoi chemăm deschis() metoda de pe noi orderReq variabil. Aceasta va configura fișierul pe care îl vom deschide. De asemenea, facem un nou obiect numit params. Îi oferim câteva chei și valori pe care le vom accesa în scriptul PHP. În cele din urmă, numim trimite() metodă.
Este important să rețineți că, dacă acest script ar fi fost destinat unei aplicații vii, ar fi trebuit să efectuăm o validare semnificativă a serverului, în plus față de validarea de pe partea clientului furnizată mai sus. Vom trece peste acest pas în acest tutorial și vom concentra doar asupra construirii codului mobil.
Faceți un nou fișier numit submit_order.php și introduceți următoarele:
"$ message = $ nume
"$ message = $ address1".
"$ message = $ address2".
"; $ message. = $ crust"; pizza cu:
"$ message. ="
Pornind de sus, ne punem variabilele de la PARAM obiect pe care l-am făcut detais.js. Apoi, trebuie să convertim matricea Javascript într-o matrice PHP. Matricea Javascript a fost puțin complicată din cauza rupturilor de linie pe care le-am introdus în cod (dacă știți despre o metodă mai bună, postați-o în comentarii!). Metoda pe care am venit a fost oarecum curată și simplă.
Următoarea parte va scoate la iveală modul în care arată mesajul. $ la variabila este locul în care trebuie să introduceți adresa de e-mail în care doriți să fie trimisă comanda. Apoi, verificăm lungimea toppingurilor pentru a determina dacă era doar o pizza de brânză sau dacă ordonatorul a specificat toppingurile personalizate. Dacă ar fi avut topping-uri, vom face o listă HTML pentru a afișa topping-urile.
Apoi am setat anteturile. Acest lucru va permite ca e-mailul să fie formatat în format HTML când îl primiți. Apoi numim PHP Poștă() metodă. Este formatat astfel: mail ($ la, $ subiect, $ mesaj, $ anteturi). În cod, testăm dacă e-mailul este trimis, setați răspuns $ la adevărat, dacă nu, sau fals dacă nu. În cele din urmă, json_encode (răspuns $) va permite details.js fișier pentru a citi obiectul înapoi. Nu uitați să încărcați acest fișier pe serverul dvs.!
onload eveniment Să ne întoarcem details.js. În cadrul evenimentului nostru de clic pentru butonul de comandă, trebuie să facem un nou onload eveniment și în timp ce suntem aici, să adăugăm noi onerror eveniment.
// - metoda onLoad pentru comanda noastră de solicitare httpReq.onload = function () var json = this.responseText; var răspuns = JSON.parse (json); // - Mail a fost trimis dacă (answer.mail == true) var alertDialog = Titanium.UI.createAlertDialog (title: 'Success', message: 'Comanda dvs. a fost trimisă (verificați e-mailul utilizat de dvs. .php) ', butoaneleNume: [' OK ']); alertDialog.show (); alertDialog.addEventListener ("clic", funcția (e) Ti.App.fireEvent ('resetApp');); altfel // - Alertă e-mail eșuată ("PHP nu a reușit să trimită comanda la e-mailul furnizat în submit_order.php. Sunteți sigur că aveți un client de poștă electronică pe serverul dvs.?"); names.enabled = true; address1.enabled = true; address2.enabled = true; order.enabled = true; cancel.enabled = true; ; // - Ordine de eroare de rețeaReq.onerror = function (event) alert ('Eroare de rețea:' + JSON.stringify (event)); names.enabled = true; address1.enabled = true; address2.enabled = true; order.enabled = true; cancel.enabled = true; ; Ne întoarcem la noi orderReq var și adăugați un onload și onerror eveniment. Facem un nou telefon numit JSON și setați-l la egal cu this.responseText. Aceasta conține datele trimise înapoi din fișierul nostru PHP. Apoi, trebuie să analizăm șirul Jones apelând JSON.parse (json). Putem scrie acum dacă response.mail este adevărat deoarece mesajul a fost trimis cu succes. Dacă a reușit, avertizați utilizatorul că ordinul a fost trimis. Vrem să ascultăm de data asta evenimentul clic pe butonul OK, pentru a face o alertă puțin diferită de cea pe care am folosit-o. Ascultați pentru evenimentul de clic și faceți clic pe un nou eveniment personalizat numit resetApp. Vom acoperi acest lucru în pasul următor.
Al nostru onerror evenimentul vă va spune dacă ceva nu merge bine. Dacă onload returnat false, șansele serverului dvs. nu sunt acceptate Poștă(). O altă posibilitate bună este că ai o greșeală. Încercați să accesați scriptul direct în browserul dvs. web și să vedeți dacă acesta conține erori de sintaxă.
Continuați și încercați acum. Trimiteți comanda dvs. Sperăm că veți vedea ceva similar cu ecranul de mai jos:
Dacă aveți un mesaj de succes, mergeți și verificați e-mailul pe care l-ați furnizat în scriptul PHP. Așa arăta a mea ca să vină prin Gmail:
resetApp Eveniment Să deschidem main.js fișier din nou. Vom adăuga evenimentul nostru final personalizat:
// - Aplicația noastră să asculte evenimentele personalizate Ti.App.addEventListener ('toppings', openToppings); Ti.App.addEventListener ( 'cancelToppings', openCrust); Ti.App.addEventListener ( 'detalii', openDetails); Ti.App.addEventListener ( 'cancelDetails', openToppings); Ti.App.addEventListener ( 'resetApp', resetApp); Acum, pentru a face față evenimentului personalizat, trebuie să facem o nouă metodă numită resetApp ().
// - Aceasta se numește după trimiterea unei comenzi. În principiu, pornește aplicația. funcția resetApp () details.close (); openCrust ();
După o trimitere reușită a comenzii, aplicația va fi resetată și veți fi readus înapoi la ecranul de cruste.
Ne-am folosit orderReq var să se ocupe de scriptul PHP. Am trimis câteva variabile în PHP și le-am analizat, am încercat să trimit un e-mail și să rezolvăm răspunsul din scenariu. Sperăm că ați reușit cu toții să faceți acest lucru fără probleme! Sper că v-ați bucurat de această serie cât de mult mi-a plăcut scrisul. A fost o aplicație distractivă de creat și, sperăm, puteți folosi ceea ce ați învățat și puteți aplica principiile în propriile aplicații!
