Share
Welkom bij het vierde en laatste deel van onze serie waarin wordt gedemonstreerd hoe je een applicatie voor het bestellen van pizza's met Titanium Mobile maakt. In deze zelfstudie maken we de klantorders voor verwerking en e-mailen we de resultaten naar de pizzabakker!
Voordat we ons PHP-bestand bellen, willen we een kleine vormverificatie uitvoeren. We willen alleen controleren of de velden leeg zijn en, als ze dat zijn, de gebruiker waarschuwen om ze in te vullen.
Open je details.js bestand en voeg dit fragment toe onder onze annuleerknop click-event:
Accentsconagua
//-- Bevestig bestelling. Controleer of de tekstvelden leeg zijn order.addEventListener ('klik', functie () if (names.value == "|| address1.value ==" || address2.value == ") alert ('Alle velden zijn verplicht '); else // - Schakel velden en knoppen uit voordat u onze HTTP-aanvraag maakt names.enabled = false; address1.enabled = false; address2.enabled = false; order.enabled = false; cancel.enabled = false ; // - Verander deze URL naar waar je ook bent orderReq.open ('POST', 'http: //yourserver.com/submit_order.php'); var params = names: names.value, address1: address1. waarde, adres2: adres2.waarde, korst: win.crust, toppings: win.toppings; orderReq.send (params);); In de vorige tutorial hebben we de details.js bestand waarin de bovenstaande code moet worden geplaatst. We hebben de openReq variabele boven in het script in de laatste zelfstudie, en deze variabele wordt gebruikt om te communiceren tussen de code aan de clientzijde en het PHP-bestand aan de server..
Als alle velden zijn ingevuld, schakelen we alle tekstvelden uit, zodat de gebruiker ze niet kan wijzigen nadat ze zijn verzonden. We noemen dan de Open() methode op onze orderReq variabel. Hiermee wordt het bestand ingesteld dat we gaan openen. We maken ook een nieuw object genaamd params. We geven het een aantal sleutels en waarden die we zullen gebruiken in het PHP-script. Ten slotte noemen we het sturen() methode.
Het is belangrijk om op te merken dat als dit script was bestemd voor een live applicatie, we naast de bovenstaande validatie aan de clientzijde ook aanzienlijke server-side validatie zouden moeten uitvoeren. We zullen deze stap overslaan in deze tutorial en in plaats daarvan alleen focussen op het bouwen van de mobiele code.
Maak een nieuw bestand met de naam submit_order.php en voeg het volgende in:
"; $ bericht. = $ namen
"; $ message. = $ address1."
"; $ message. = $ address2."
"; $ bericht. = $ korst." pizza met:
"; $ message. ="
Vanaf de top POSTEREN we onze variabelen van de param object waar we in gemaakt hebben detais.js. Vervolgens moeten we de Javascript-array naar een PHP-array converteren. De Javascript-array was een beetje lastig vanwege de regelafbrekingen die we in de code zetten (als jullie een betere methode kennen, post het dan in de comments!). De methode die ik bedacht was enigszins schoon en eenvoudig.
Het volgende deel zullen we uitvoeren hoe het bericht eruit ziet. De $ om variabele is waar u het e-mailadres moet invoegen waar u de bestelling wilt verzenden. Vervolgens controleren we de lengte van de toppings om te bepalen of dit gewoon een kaaspizza was of of de besteller aangepaste toppings had gespecificeerd. Als er toppings zijn, maken we een HTML-lijst om de toppings weer te geven.
Vervolgens stellen we de headers in. Hierdoor kan de e-mail in HTML worden opgemaakt wanneer u deze ontvangt. Dan bellen we de PHP mail() methode. Het is op deze manier opgemaakt: mail ($ to, $ subject, $ message, $ headers). In de code testen we of de e-mail wordt verzonden, stel de $ response naar waar als het wel of niet waar is als dat niet het geval is. eindelijk, de json_encode ($ response) zal het toestaan details.js bestand om het object terug te lezen. Vergeet niet om dit bestand naar uw server te uploaden!
onload evenement Laten we teruggaan naar details.js. Onder onze klikgebeurtenis voor de bestelknop, moeten we een nieuw maken onload evenement en terwijl we hier zijn, laten we er onze toevoegen onerror evenement.
// - onLoad-methode voor onze http-aanvraag orderReq.onload = function () var json = this.responseText; var response = JSON.parse (json); // - E-mail is verzonden als (response.mail == true) var alertDialog = Titanium.UI.createAlertDialog (title: 'Success', bericht: 'Uw bestelling is verzonden (controleer de e-mail die u in uw submit_order hebt gebruikt) .php bestand) ', buttonNames: [' OK ']); alertDialog.show (); alertDialog.addEventListener ('klik', functie (e) Ti.App.fireEvent ('resetApp');); else // - E-mail mislukt alert ("PHP kan de bestelling niet verzenden naar de e-mail die is opgegeven in submit_order.php. Weet u zeker dat u een e-mailclient op uw server hebt?"); names.enabled = true; address1.enabled = true; address2.enabled = true; order.enabled = true; cancel.enabled = true; ; // - Netwerkfout orderReq.onerror = function (event) alert ('Netwerkfout:' + JSON.stringify (event)); names.enabled = true; address1.enabled = true; address2.enabled = true; order.enabled = true; cancel.enabled = true; ; We gaan terug naar onze orderReq var en voeg een toe onload en onerror evenement. We maken een nieuwe var genaamd json en stel het gelijk aan this.responseText. Dat bevat de gegevens die zijn teruggestuurd vanuit ons PHP-bestand. Vervolgens moeten we de json-reeks ontleden door te callen JSON.parse (json). We kunnen nu sms'en response.mail is waar, wat betekent dat de mail met succes is verzonden. Als dit lukt, waarschuwt u de gebruiker dat de bestelling is verzonden. We willen deze keer luisteren naar de klikgebeurtenis op de OK-knop zodat we een melding een beetje anders maken dan we deze hebben gebruikt. We luisteren naar de klikgebeurtenis en op klik vuren we een nieuw aangepast evenement genaamd resetApp. We zullen dat in de volgende stap behandelen.
Onze onerror evenement zal je hopelijk vertellen als er iets mis gaat. Als onload return false, de kans bestaat dat uw server dit niet ondersteunt mail(). Een andere goede mogelijkheid is dat je een verkeerde naam hebt. Probeer het script rechtstreeks in uw webbrowser te openen en kijk of het eventuele syntaxisfouten bevat.
Ga je gang en probeer het nu eens. Dien uw bestelling in Hopelijk ziet u iets vergelijkbaars als het onderstaande scherm:
Als je een bericht hebt ontvangen, ga je naar de e-mail die je hebt opgegeven in het PHP-script. Zo zag mijn eruit via Gmail:
resetApp Evenement Laten we het openen main.js bestand opnieuw. We gaan ons laatste aangepaste evenement toevoegen:
// - Laat onze app luisteren naar onze aangepaste evenementen Ti.App.addEventListener ('toppings', openThing); Ti.App.addEventListener ( 'cancelToppings', openCrust); Ti.App.addEventListener ( 'details', openDetails); Ti.App.addEventListener ( 'cancelDetails', openToppings); Ti.App.addEventListener ( 'resetApp', resetApp); Om de aangepaste gebeurtenis af te handelen, moeten we een nieuwe methode maken genaamd resetApp ().
// - Dit wordt opgeroepen nadat een bestelling is verzonden. Het begint eigenlijk de app voorbij. function resetApp () details.close (); openCrust ();
Nadat de bestelling is verzonden, wordt de app gereset en wordt u teruggeleid naar het korstenscherm.
We gebruikten onze orderReq var om het PHP-script af te handelen. We stuurden een aantal variabelen naar PHP en parseerden deze, probeerden een e-mail te verzenden en behandelden het antwoord uit het script. Hopelijk hebben jullie het allemaal zover gehaald zonder problemen! Ik hoop dat jullie net zoveel van deze serie hebben genoten als ik ervan vond om het te schrijven. Het was een leuke app om te maken en hopelijk kun je het geleerde gebruiken en de principes toepassen op je eigen apps!
