Membuat Page menggunakan Perintah Generate di Ionic


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 kita buat, caranya masuk ke src/pages/tabs/ dan edit tabs.html :
untuk daftar nama icon yang bisa dipakai bisa di lihat di : https://ionicframework.com/docs/ionicons/

edit juga file tabs.ts untuk menentukan tab1Root tersebut diisi dengan page apa
Perhatikan disana cara pemanggilan page adalah menambahkan kata "page" diakhir nama page, seperti ketika saya generate menggunakan perintah ionic g page "MenuKategori" maka untuk pemanggilanya menggunakan nama "MenuKategoriPage"

Sekarang kita edit page Menu Kategori untuk menampilkan 3 card untuk menampilkan kategori menu, saya sendiri mengcopy dari contoh template yang ada di docs ionic. untuk menu-kategori.html
tambahkan code berikut untuk stylenya di menu-kategori.scss

tambahkan foto food.jpg, drinks.jpg dan snacks.jpg di dalam folder /src/assets/images/
perhatikan pada code menu-kategori.html disana pada tag <ion-card> terdapat attribut (click)="openPageMenuDetail('kategori')" itu menambahkan event click pada tag tersebut sedangkan untuk membuat fungsi click tersebut silahkan edit menu-kategori.ts dan tambahkan fungsi seperti di bawah ini:
maksud dari kode di atas adalah memerintahkan untuk menampilkan page "MenuDetailPage" dengan membawa parameter dengan nama "kategori" yang nilainya tergantung card yang di klik (kat).

Sedangkan untuk menerima parameter (kategori) yang dikirim oleh page sebelumnya kita bisa menggunakan navParams seperti contoh berikut :

kode di atas maksudnya adalah kita membuat variabel baru dengan nama menuKategori dengan type any; kemudian ketika page jalan maka variabel menu kategori tersebut diisi dengan parameter dengan nama "kategori" sedangkan untuk menampilkan isi variabel menuKategori tersebut kita bisa menambahkan kode berikut pada dokumen page menu-detail.html
Sehingga tampilannya seperti berikut

Baca tutorial berikutnya : Menampilkan data menggunakan Provider

Semoga bermanfaat.

Komentar

Posting Komentar

Postingan populer dari blog ini

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