Share
Benvenuti alla quarta ed ultima puntata della nostra serie che mostra come costruire un'applicazione per l'ordinazione della pizza con Titanium Mobile. In questo tutorial, creeremo gli ordini dei clienti di elaborazione e invieremo i risultati via e-mail al pizzaiolo!
Prima di fare una chiamata al nostro file PHP, vogliamo fare un po 'di validazione del modulo. Vogliamo solo verificare se i campi sono vuoti e, se lo sono, avvisare l'utente per riempirli.
Apri i tuoi details.js file e aggiungi questo snippet sotto il nostro pulsante clic-evento di annullamento:
Accentsconagua
//-- Inviare ordine. Controlla se i campi di testo sono vuoti order.addEventListener ('click', function () if (names.value == "|| address1.value ==" || address2.value == ") alert ('Tutti i campi sono obbligatori '); else // - Disabilita campi e pulsanti prima di fare la nostra richiesta HTTP names.enabled = false; address1.enabled = false; address2.enabled = false; order.enabled = false; cancel.enabled = false ; // - Cambia questo URL dove mai esiste orderReq.open ('POST', 'http: //yourserver.com/submit_order.php'); var params = nomi: nomi.valore, indirizzo1: indirizzo1. valore, address2: address2.value, crust: win.crust, toppings: win.toppings; orderReq.send (params);); Nel precedente tutorial abbiamo realizzato il details.js file in cui deve essere inserito il codice sopra. Abbiamo definito il openReq variabile nella parte superiore dello script nell'ultimo tutorial e questa variabile verrà utilizzata per comunicare tra il codice lato client e il file PHP lato server.
Se tutti i campi sono compilati, disabiliteremo tutti i campi di testo in modo che l'utente non possa cambiarli una volta che sono stati inviati. Quindi chiamiamo il Aperto() metodo sul nostro orderReq variabile. Questo imposterà il file che stiamo per aprire. Facciamo anche un nuovo oggetto chiamato params. Diamo alcune chiavi e valori a cui accediamo nello script PHP. Infine, chiamiamo il inviare() metodo.
È importante notare che se questo script era destinato a un'applicazione live, avremmo bisogno di eseguire una validazione significativa lato server oltre alla convalida lato client fornita sopra. Salteremo questo passaggio in questo tutorial e concentreremo invece solo sulla creazione del codice mobile.
Crea un nuovo file chiamato submit_order.php e inserisci quanto segue:
"; $ message. = $ nomi
"; $ message. = $ address1."
"; $ message. = $ address2."
"; $ message. = $ crust." pizza con:
"; $ message. ="
Partendo dall'alto, POSTOSTiamo le nostre variabili dal param oggetto che abbiamo realizzato detais.js. Successivamente, dobbiamo convertire l'array Javascript in un array PHP. L'array Javascript è stato un po 'complicato a causa delle interruzioni di riga che abbiamo inserito nel codice (se siete a conoscenza di un metodo migliore, postatelo nei commenti!). Il metodo che ho trovato era un po 'pulito e semplice.
La prossima parte mostreremo come appare il messaggio. Il $ a variabile è dove devi inserire l'indirizzo e-mail dove vuoi che l'ordine sia spedito. Successivamente, controlliamo la lunghezza dei condimenti per determinare se si trattasse solo di una pizza al formaggio o se il committente ha specificato delle guarnizioni personalizzate. Se avesse dei condimenti, faremo una lista HTML per mostrare i condimenti.
Quindi impostiamo le intestazioni. Ciò consentirà l'e-mail di essere formattata in HTML quando lo si riceve. Quindi chiamiamo il PHP mail () metodo. È formattato in questo modo: posta ($ a, $ soggetto, $ messaggio, $ intestazioni). Nel codice, testiamo se la posta viene inviata, imposta il $ risposta a vero se lo fa o falso se non lo fa. Finalmente, il json_encode ($ response) permetterà il details.js file per leggere l'oggetto indietro. Non dimenticare di caricare questo file sul tuo server!
onload evento Torniamo a details.js. Sotto il nostro evento click per il pulsante ordine, dobbiamo creare un nuovo onload evento e mentre siamo qui, aggiungiamo il nostro onerror evento.
// - metodo onLoad per la nostra richiesta http orderReq.onload = function () var json = this.responseText; var response = JSON.parse (json); // - La posta è stata inviata se (response.mail == true) var alertDialog = Titanium.UI.createAlertDialog (title: 'Success', messaggio: 'Il tuo ordine è stato inviato (controlla l'email che hai usato nel tuo submit_order .php file) ', buttonNames: [' OK ']); alertDialog.show (); alertDialog.addEventListener ('click', function (e) Ti.App.fireEvent ('resetApp');); else // - Mail failed alert ("PHP non è riuscito a inviare l'ordine al messaggio di posta elettronica fornito in submit_order.php. Sei sicuro di avere un client di posta sul tuo server?"); names.enabled = true; address1.enabled = true; address2.enabled = true; order.enabled = true; cancel.enabled = true; ; // - Errore di rete orderReq.onerror = function (event) alert ('Network error:' + JSON.stringify (event)); names.enabled = true; address1.enabled = true; address2.enabled = true; order.enabled = true; cancel.enabled = true; ; Torniamo al nostro orderReq var e aggiungi un onload e onerror evento. Facciamo una nuova var chiamata jSON e impostalo uguale a this.responseText. Questo contiene i dati inviati dal nostro file PHP. Quindi, dobbiamo analizzare la stringa json chiamando JSON.parse (JSON). Ora possiamo scrivere se response.mail è vero intendendo che la mail è stata inviata con successo. Se ha avuto successo, avvisa l'utente che l'ordine è stato inoltrato. Vogliamo ascoltare l'evento click sul pulsante OK questa volta, quindi facciamo un avviso un po 'diverso da come lo stiamo usando. Ascoltiamo l'evento click e al clic attiviamo un nuovo evento personalizzato chiamato resetApp. Lo esamineremo nel prossimo passaggio.
Nostro onerror si spera che l'evento ti dica se qualcosa va storto. Se onload restituito falso, è probabile che il tuo server non supporti mail (). Un'altra buona possibilità è che tu abbia un mispelling. Prova ad accedere allo script direttamente nel tuo browser web e controlla se contiene errori di sintassi.
Vai avanti e provalo ora. Invia il tuo ordine. Spero che vedrai qualcosa di simile alla schermata qui sotto:
Se hai ricevuto un messaggio di successo, vai a controllare l'e-mail che hai fornito nello script PHP. Questo è quello che sembrava essere il mio passato attraverso Gmail:
resetApp Evento Apriamo il main.js file di nuovo. Stiamo per aggiungere il nostro evento personalizzato finale:
// - Fai in modo che la nostra app ascolti i nostri eventi personalizzati Ti.App.addEventListener ('toppings', openToppings); Ti.App.addEventListener ( 'cancelToppings', openCrust); Ti.App.addEventListener ( 'dettagli', openDetails); Ti.App.addEventListener ( 'cancelDetails', openToppings); Ti.App.addEventListener ( 'resetApp', resetApp); Ora, per gestire l'evento personalizzato abbiamo bisogno di creare un nuovo metodo chiamato resetApp ().
// - Questo viene chiamato dopo che un ordine è stato inviato. Fondamentalmente avvia l'app. function resetApp () details.close (); openCrust ();
Dopo aver inviato correttamente l'ordine, l'app verrà ripristinata e verrà ripristinata la schermata delle croste.
Abbiamo usato il nostro orderReq var per gestire lo script PHP. Abbiamo inviato alcune variabili a PHP e le abbiamo analizzate, abbiamo tentato di inviare un'e-mail e gestito la risposta dallo script. Spero che tutti voi abbiate fatto fino ad ora senza problemi! Spero che questa serie ti sia piaciuta tanto quanto mi è piaciuto scriverla. È stata un'app divertente da creare e spero che tu possa utilizzare ciò che hai imparato e applicare i principi alle tue app!
