Menambahkan Fungsi Add Menu menggunakan http.post

ionic 3 http.add
Pada tutorial kali ini akan kita lanjutkan dengan menambahkan fungsi Add Menu untuk menambahkan daftar menu menggunakan fungsi http.post
Pertama silahkan edit /src/pages/menu-detail.html dan tambahkan floating button menggunakan ion-fab seperti gambar berikut

ionic 3 ion-fab
source html :


berikutnya tambahkan function showAddMenu() untuk membuka page page Input Menu


kemudian generate page baru untuk input menu dengan membuka command line dan ketik perintah ionic g page MenuAdd lalu edit /src/pages/menu-add/menu-add.html :


edit juga file /src/menu-add/menu-add.ts untuk menambahkan logic nya


dari kode di atas kita mengimport provider menu terlebih dahulu lalu meng inject ke class dengan nama menu (lihat di constructor) setelah itu kita juga buat variabel data dengan tipe any yang berfungsi untuk menampung input data dari view, karena tipe yang kita pakai adalah object maka pada saat constructor kita initialize dengan perintah this.data = {}; setelah itu tambahkan fungsi save untuk menyimpan data menu dengan memanggil fungsi add dari provider menu.

tambahkan fungsi add pada provider menu yang berfungsi mengirim data ke server mnggunakan http.post


Sekian tutorial saya kali ini klo ada pertanyaan silahkan tinggalkan di kolom komentar

Semoga bermanfaat

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Page menggunakan Perintah Generate di Ionic

Gambar
Dalam tutorial kali ini kita akan belajar membuat page menggunakan perintah generate milik command line ionic. Untuk studi kasusnya kita akan buat 4 page yaitu page menu kategori, page order, page setting dan page list menu, yang mana pada 3 tab awal akan kita tampilkan menu, order dan setting sedangkan ketika item kategori di daftar menu di klik nanti akan menuju ke page berikutnya yaitu page list menu. Buka command line arahkan pada direktori kerja anda kemudian jalankan perintah berikut untuk membuat page baru ionic g page MenuKategori setelah itu akan tercipta folder dengan nama menu-kategori di dalam folder src/pages/, perintah diatas akan men generate page (g page) dengan nama "MenuKategoriPage" kata "Page secara otomatis ditambahkan sebagai nama class page tersebut". Berikutnya buat lagi page untuk order settings, dan menu detail ionic g page MenuDetails ionic g page Orders ionic g page Settings Edit page tab agar menampilkan page yang barusan ...
Baca selengkapnya

Menggunakan Visual Studio Code untuk develop Ionic

Gambar
Ada banyak sekali editor yang bisa digunakan untuk develop ionic, mulai dari notepad++, visual studio code, atom, visual studio, dreamweaver dll namun saya sendiri senang menggunakan visual studio code, selain free fitur auto completionnya dan pengenalan typescriptnya saya rasa cukup bagus dan kita bisa menambahkankan add-on/extension yang cukup bervariatif. Download langsung dari situs resminya : https://code.visualstudio.com/ Cara penggunaannya juga cukup mudah tinggal file -> open folder pilih folder project ionic kita sebelumnya lalu ok, code yang bisa kita edit bisa kita lihat di sebelah kiri terletak dalam folder src, sedang setting project ionic kita terletak di root folder dengan nama config.xml Berikutnya : Membuat Page dengan perintah Generate dan Cara Navigasinya
Baca selengkapnya

Mengambil Data dari Server Menggunakan HTTP

Gambar
Umumnya ketika membuat aplikasi mobile, datanya tersimpan di sisi server seperti database mysql, masalahnya ionic tidak memiliki kemampuan untuk mengakses database mysql secara langsung melainkan melalui http service seperti api, yang mana cara kerjanya adalah ionic memanggil sebuah alamat web http dan web tersebut mengambil data dari mysql menggunakan php. Sebagai contoh saya sudah memiliki api dengan alamat http://localhost:8000/api/menus yang mana alamat tersebut menghasilkan json array daftar menu (cara membuat api akan saya bahas di tutorial lain). Nah agar ionic bisa membaca hasil json array tersebut maka edit /src/providers/menu/menu.ts dan matikan fungsi mengisi data menu secara  manual lalu rubah kode load menjadi seperti berikut tambahkan async pada fungsi load menandakan kita mau menggunakan perintah await untuk menyelesaikan mengambil data dari alamat server http://localhost:8000/api/menu menggunakan perintah http.get setelah data didapat lalu dikonversi menjadi ...
Baca selengkapnya