Share
Velkommen til fjerde og siste avdrag i serien vår som demonstrerer hvordan du kan bygge en pizza bestillingsprogram med Titanium Mobile. I denne opplæringen skal vi opprette behandlingskundeordrer og sende resultatene til pizzekokken!
Før vi ringer til vår PHP-fil, vil vi gjøre litt form validering. Vi vil bare sjekke om feltene er tomme, og hvis de er, varsle brukeren om å fylle dem inn.
Åpne din details.js fil og legg til denne koden under klikk-hendelsen for avbryt-knappen:
Accentsconagua
//-- Sende inn ordre. Sjekk om tekstfeltene er tomme ordre.addEventListener ('klikk', funksjon () hvis (names.value == "|| address1.value ==" || address2.value == ") alert ('Alle felt er nødvendig "); else // - Deaktiver felt og knapper før du gjør vår HTTP-forespørsel names.enabled = false; address1.enabled = false; address2.enabled = false; order.enabled = false; cancel.enabled = false ; // - Endre denne nettadressen til hvor du har eksistert orderReq.open ('POST', 'http: //yourserver.com/submit_order.php'); var params = navn: names.value, address1: address1. verdi, adresse2: address2.value, crust: win.crust, toppings: win.toppings; orderReq.send (params);); I den forrige opplæringen laget vi details.js fil der ovennevnte kode skal plasseres. Vi definerte openReq variabel øverst i skriptet i den siste opplæringen, og denne variabelen vil bli brukt til å kommunisere mellom klientsidenskoden og server-side PHP-filen.
Hvis alle feltene er fylt ut, deaktiverer vi alle tekstfeltene, slik at brukeren ikke kan endre dem når de har blitt sendt ut. Vi kaller da åpen() metode på vår orderReq variabel. Dette vil sette opp filen vi skal åpne. Vi lager også et nytt objekt params. Vi gir det noen nøkler og verdier som vi får tilgang til i PHP-skriptet. Til slutt kaller vi sende() metode.
Det er viktig å merke seg at hvis dette skriptet var bestemt for et live-program, ville vi måtte utføre betydelig server-side validering i tillegg til validering av klientsiden som angitt ovenfor. Vi vil hoppe over dette trinnet i denne opplæringen og i stedet bare fokusere på å bygge mobilkoden.
Lag en ny fil som heter submit_order.php og sett inn følgende:
"; $ melding. = $ navn
"; $ message. = $ address1."
"; $ message. = $ address2."
"; $ message. = $ crust." pizza med:
"; $ message. ="
Fra toppen starter vi våre variabler fra param objekt vi laget i detais.js. Deretter må vi konvertere Javascript-arrayet til et PHP-array. Javascript-arrayet var litt vanskelig på grunn av linjeskiftene vi legger inn i koden (hvis dere vet om en bedre metode, legg det inn i kommentarene!). Metoden jeg kom opp med var noe ren og enkel.
Neste del vil vi sende ut hvordan meldingen ser ut. De $ til variabel er hvor du skal sette inn e-postadressen der du vil at bestillingen skal sendes. Deretter sjekker vi lengden på påleggene for å finne ut om det bare var en ostepizza, eller om bestilleren angav tilpassede påfyll. Hvis det hadde pålegg, vil vi lage en HTML-liste for å vise toppings.
Deretter setter vi toppene. Dette vil tillate at e-posten er HTML-formatert når du mottar den. Da kaller vi PHP post() metode. Den er formatert slik: post ($ til, $ emne, $ melding, $ overskrifter). I koden tester vi om posten blir sendt, sett inn $ svar til sant hvis det gjør eller er falskt hvis det ikke gjør det. Endelig, den json_encode ($ respons) vil tillate details.js fil for å lese objektet tilbake. Ikke glem å laste opp denne filen til serveren din!
på Last begivenhet La oss gå tilbake til details.js. Under vårt klikkhendelse for ordreknappen må vi lage en ny på Last hendelse og mens vi er her, la oss legge til onerror begivenhet.
// - onLoad-metoden for vår http-forespørsel orderReq.onload = function () var json = this.responseText; var respons = JSON.parse (json); // - Mail ble sendt hvis (response.mail == true) var alertDialog = Titanium.UI.createAlertDialog (tittel: 'Suksess', melding: 'Din bestilling er sendt inn (se e-posten du brukte i din innlevering .php-fil) ', knappnavn: [' OK ']); alertDialog.show (); alertDialog.addEventListener ('klikk', funksjon (e) Ti.App.fireEvent ('resetApp');); ellers // - E-post mislyktes ("PHP mislyktes i å sende bestillingen til e-posten som ble oppgitt i submit_order.php. Er du sikker på at du har en e-postklient på serveren din?"); names.enabled = true; address1.enabled = true; address2.enabled = true; order.enabled = true; cancel.enabled = true; ; // - Nettverksfeil rekkefølgeReq.onerror = funksjon (hendelse) alert ('Nettverksfeil:' + JSON.stringify (event)); names.enabled = true; address1.enabled = true; address2.enabled = true; order.enabled = true; cancel.enabled = true; ; Vi går tilbake til vår orderReq var og legg til en på Last og onerror begivenhet. Vi lager en ny var kalt json og sett det lik this.responseText. Det inneholder dataene som sendes tilbake fra vår PHP-fil. Deretter må vi analysere json-strengen ved å ringe JSON.parse (json). Vi kan nå tekst hvis response.mail er sant som betyr at e-posten ble sendt med hell. Hvis det var vellykket, varsler brukeren om at bestillingen er sendt. Vi vil lytte etter klikkhendelsen på OK-knappen denne gangen, slik at vi gjør et varsel litt annerledes enn vi har brukt det. Vi lytter etter klikkhendelse og på klikk vi brenner en ny tilpasset hendelse som heter resetApp. Vi vil dekke det i neste trinn.
Våre onerror Hendelsen vil forhåpentligvis fortelle deg om noe går galt. Hvis på Last returnert falsk, sjansen er at serveren din ikke støtter post(). En annen god mulighet er at du har feilfunksjon. Prøv å få tilgang til skriptet direkte i nettleseren din og se om det inneholder noen syntaksfeil.
Gå videre og prøv det nå. Send inn bestillingen din. Forhåpentligvis ser du noe som ligner på skjermen nedenfor:
Hvis du fikk en suksessmelding, gå og sjekk e-posten du oppgav i PHP-skriptet. Dette er hva min så ut som å komme gjennom Gmail:
resetApp Begivenhet La oss åpne opp main.js filen igjen. Vi skal legge til vår endelige egendefinerte begivenhet:
// - Få appen vår å lytte etter våre tilpassede arrangementer Ti.App.addEventListener ('toppings', openToppings); Ti.App.addEventListener ( 'cancelToppings', openCrust); Ti.App.addEventListener ( 'detaljer', openDetails); Ti.App.addEventListener ( 'cancelDetails', openToppings); Ti.App.addEventListener ( 'resetApp', resetApp); Nå, for å håndtere den tilpassede hendelsen må vi ringe en ny metode resetApp ().
// - Dette kalles etter at en bestilling er sendt. Det starter i utgangspunktet appen over. funksjon resetApp () details.close (); openCrust ();
Etter en vellykket ordreinnlevering, blir appen tilbakestilt, og du vil bli tatt tilbake til skorpenes skorpe.
Vi brukte vårt orderReq var å håndtere PHP-skriptet. Vi sendte noen variabler til PHP og analyserte dem, forsøkte å sende en e-post og håndteres svaret fra skriptet. Forhåpentligvis har dere alle gjort det så langt uten problemer! Jeg håper dere alle likte denne serien så mye som jeg likte å skrive den. Det var en morsom app å lage, og forhåpentligvis kan du bruke det du lærte og bruke prinsippene til dine egne apper!
