Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Titanium Mobile

Membangun Aplikasi Mobile Pemesanan Pizza Titanium: Penyelesaian Pemesanan

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Build a Titanium Mobile Pizza Ordering App.
Build a Titanium Mobile Pizza Ordering App: Order Form Setup

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Selamat datang di bagian keempat dan terakhir dalam serial kami yang menunjukkan bagaimana membuat aplikasi pemesanan pizza dengan Titanium Mobile. Dalam tutorial ini, kita akan membuat pemrosesan pesanan pelanggan dan mengirim e-mail hasilnya ke koki pizza!

Langkah 1: Validasi Sisi Klien

Sebelum kita membuat panggilan ke file PHP kita, kita ingin melakukan sedikit validasi formulir. Kita hanya ingin memeriksa apakah isian kosong dan, jika ada, mengingatkan pengguna untuk mengisinya.

Buka file details.js Anda dan tambahkan cuplikan ini di bawah tombol batal event click kita:

Pada tutorial sebelumnya kita membuat file details.js dimana kode diatas harus ditempatkan. Kita mendefinisikan variabel openReq di bagian atas skrip dalam tutorial terakhir, dan variabel ini akan digunakan untuk berkomunikasi antara kode sisi klien dan file PHP sisi server.

Jika semua field terisi, kita akan menonaktifkan semua field teks sehingga pengguna tidak dapat mengubahnya begitu mereka dikirim. Kita kemudian memanggil metode open() pada variabel orderReq kita. Ini akan mengatur file yang akan kita buka. Kita juga membuat objek baru yang disebut params. Kita memberikan beberapa kunci dan nilai yang akan kita akses di skrip PHP. Akhirnya, kita memanggil metode send().

Penting untuk diingat bahwa jika skrip ini ditujukan untuk aplikasi nyata, kita perlu melakukan validasi sisi server yang signifikan selain validasi sisi klien yang diberikan di atas. Kita akan melewatkan langkah ini dalam tutorial ini dan hanya fokus pada pembuatan kode mobile.


Langkah 2: Pemrosesan Pesanan

Buat file baru yang disebut submit_order.php dan masukkan yang berikut ini:

Mulai dari atas, kita POST variabel kita dari objek param yang kita buat di detais.js. Selanjutnya, kita harus mengubah array Javascript menjadi array PHP. Array Javascript sedikit rumit karena jeda baris yang kita masukkan ke dalam kode (jika Anda tahu metode yang lebih baik, kirimkan ke komentarnya!). Metode yang saya dapatkan agak bersih dan sederhana.

Bagian selanjutnya kita akan menampilkan bagaimana pesan itu terlihat. Variabel $to adalah dimana Anda harus memasukkan alamat e-mail dimana Anda ingin agar pesanan dikirim. Selanjutnya, kita periksa panjang topping untuk menentukan apakah itu hanya pizza keju atau jika si pemesan menentukan topping kustom. Jika memang memiliki topping, kita akan membuat daftar HTML untuk menampilkan topping.

Selanjutnya kita tentukan header-nya. Ini akan memungkinkan e-mail diformat HTML saat Anda menerimanya. Kemudian kita memanggil metode mail() dari PHP. Ini diformat seperti ini: mail($to, $subject, $message, $headers). Dalam kodenya, kita menguji apakah surat dikirim, tetapkan $response ke true jika ya atau false jika tidak. Akhirnya, json_encode($response) akan memungkinkan file details.js untuk membaca objeknya kembali. Jangan lupa upload file ini ke server Anda!


Langkah 3: Menangani event onload

Mari kembali ke details.js. Di bawah event click kita untuk tombol pesanan, kita perlu membuat event onload baru dan sementara kita berada di sini, mari kita tambahkan event onerror kita.

Kita kembali ke var orderReq dan menambahkan event onload dan onerror. Kita membuat var baru yang disebut json dan menyetelnya sama dengan this.responseText. Itu berisi data yang dikirim kembali dari file PHP kita. Selanjutnya, kita harus mengurai string json dengan memanggil JSON.parse(json). Kita sekarang dapat mengirim teks jika response.mail true artinya surat berhasil dikirim. Jika berhasil, peringatkan pengguna bahwa pesanan telah diajukan. Kita ingin listen event click pada tombol OK kali ini jadi kita membuat peringatan sedikit berbeda dari yang telah kita gunakan. Kita listen event click dan on click kita menjalankan event kustom baru yang disebut resetApp. Kita akan membahasnya di langkah selanjutnya.

Event onerror kita diharapkan akan memberi tahu Anda jika ada yang tidak beres. Jika onload mengembalikan false, kemungkinan server Anda tidak mendukung mail(). Kemungkinan lain yang bagus adalah Anda salah pengejaan. Cobalah mengakses skrip secara langsung di browser web Anda dan lihat apakah berisi kesalahan sintaks.

Silakan coba sekarang juga. Kirimkan pesanan Anda. Mudah-mudahan Anda akan melihat sesuatu yang mirip dengan layar di bawah ini:

Jika Anda mendapat pesan sukses, pergi dan periksa e-mail yang Anda berikan di skrip PHP. Milik saya terlihat seperti ini melalui Gmail:


Langkah 4: Menangani event resetApp

Mari buka file main.js lagi. Kita akan menambahkan event kustom terakhir kita:

Nah, untuk menangani event kustom kita perlu membuat metode baru yang disebut resetApp().

Setelah pengiriman pesanan berhasil, aplikasi akan di-reset dan Anda akan dibawa kembali ke layar crust.


Kesimpulan

Kita menggunakan var orderReq kita untuk menangani skrip PHP. Kita mengirimkan beberapa variabel ke PHP dan mengurainya, mencoba mengirim email dan menangani tanggapan dari skrip. Mudah-mudahan Anda semua telah berhasil sejauh ini tanpa masalah! Saya harap Anda semua menikmati serial ini sama seperti saya senang menulisnya. Itu adalah aplikasi yang menyenangkan untuk dibuat dan semoga Anda dapat menggunakan apa yang Anda pelajari dan menerapkan prinsip-prinsip itu ke aplikasi Anda sendiri!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.