Postingan

Menambahkan Fungsi Add Menu menggunakan http.post

Gambar
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 = {}...
Posting Komentar
Baca selengkapnya

Menambahkan Loading pada Saat mengambil data dari Server menggunakan HTTP.get

Gambar
ionic 3 add loading while http.get Mengambil data dari server http bisa jadi lama bisa saja cepat tergantung jumlah data yang diambil dan kecepatan koneksi internet yang tersedia. Agar program lebih kelihatan responsive maka ketika kita mengambil data dari internet menggunakan http.get alangkah baiknya kita menambahkan loading agar user tau klo memang sedang ada proses disana. Edit file /src/providers/menu/menu.ts dan tambahkan beberapa code berikut : ionic 3 add loading while http.get Pertama import dulu LoadingController dari ionc-angular lalu inject ke class dengan nama loading. Berikutnya buat loading, beri nama loading dan munculkan menggunakan perintah .present() sebelum memanggil http.get. Tambahkan perintah .dismiss() untuk menyembunyikan loading manakala proses http.get selesai. Sekian, semoga bermanfaat
Posting Komentar
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 ...
4 komentar
Baca selengkapnya

Menambahkan Searchbar pada List Detail Menu

Gambar
Add Searchbard Ionic3 Pada tutorial kali ini kita akan melanjutkan dengan menambahkan searchbar pada list menu untuk memfilter data menu yang tampil. Baca Tutorial Sebelumnya : Menampilkan data dari provider Karena pada tutorial sebelumnya kita menampilkan data langsung dari provider sekarang kita copy datanya ke controller agar yang terfilter tidak sumber datanya secara langsung, caranya edit /src/pages/menu-detail/menu-detail.ts tambahkan variabel data dengan tipe any[] lalu pada constructor load data dari provider Ionic 3 Load data from provider kemudian tambahkan juga function untuk filter data berdasarkan nama menu seperti berikut: Ionic 3 Filter Data  Edit view di /src/pages/menu-detail.html dengan mengganti sumber data ngFor yang sebelumnya diambil langsung dari provider sekarang diambil dari controller biar bisa di filter nantinya, tambahkan pula ion-navbar untuk textbox pencariannya pada bagian atas list Ionic 3 Add ion-searchbar and filtering d...
Posting Komentar
Baca selengkapnya

Membuat Provider untuk Menangani Data

Gambar
Menampilkan data lewat provider Pada tutorial sebelumnya kita sudah belajar membuat page menggunakan perintah ionic g page [namapage] kali ini kita akan membuat sebuah provider yang berfungsi untuk menghandle data yang akan ditampilkan melalui control ion-list dan ion-item. baca tutorial sebelumnya : Membuat Page menggunakan Ionic Generate Page Pertama silahkan buka command line dan masuk ke direktori project anda lalu jalankan perintah berikut : ionic g provider Menu setelah itu akan tercipta sebuah file /src/providers/menu/menu.ts , Edit file tersebut dan tambahkan variabel global dengan nama data dengan tipe any[] dan pada waktu provider di initialize maka isi data tersebut dengan array kosong this.data = [] ;  buat 2 function yaitu load yang berfungsi untuk me load data dari server atau media penyimpanan lokal yang mana untuk sementara isi datanya secara manual dulu, untuk load data dari server seperti php mysql akan kita bahas di tutorial berikutnya. sedangkan func...
Posting Komentar
Baca selengkapnya

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 ...
Posting Komentar
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
Posting Komentar
Baca selengkapnya