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

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

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