Membuat Provider untuk Menangani Data

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 function ke dua adalah filterByKetegori(kategori) yang berfungsi untuk mengambil data berdasarkan kategori tertentu saja.


edit file src/pages/menu-detail/menu-detail.ts dan tambahkan import MenuProvider yang kita buat sebelumnya kemudian inject ke app dengan nama variabel menu: MenuProvider. Tambahkan kode pada constructor yang berfungsi untuk mengecek jika data array di tabel menu masih kosong maka panggil fungsi load untuk mengisi datanya



Setelah itu edit /src/pages/detail-menu/detail-menu.html untuk menampilkan data menu dari provider kita bisa menambahkan tab ion-list dan ion-item sebagai item menunya, kemudian iterasi data menu menggunakan *ngFor="let menu of  menu.data" untuk menampilkan semua data di provider sedangkan jika hanya ingin menampilkan berdasarkan kategori tertentu maka kita bisa memanggil fungsi filterByKetegori(menuKategori) sebagai pengganti menu.data


Sedangkan untuk menambahkan fungsi berapa jumlah item list yang ada di kategori seperti gambar berikut
caranya edit file /src/pages/menu-kategori/menu-kategori.ts dan tambahkan fungsi jmlMenu untuk menghitung jumlah menu berdasarkan kategori tertentu, jangan lupa inject MenuProvider ke class dan load menu jika menu masih kosong


berikutnya untuk memanggil fungsi jmlMenu tersebut edit /src/pages/menu-kategori/menu-kategori.html dan tambahkan beberapa kode berikut untuk memanggil perhitungan jumlah menu

Memanggil function jmlMenu di view ionic 3

Untuk Filter Data menggunan sarchbar sillahkan bacar : Memfilter data menggunakan Searchbar

Sekian untuk tutorial kali ini jika ada pertanyaan tinggalkan di comment, untuk berikutnya akan saya bahas cara mengambil data dari mysql menggunakan php di ionic 3 .

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