ionic | Menampilkan Data Dari Database Dengan event Onclik

Assalamualaikum Wr. Wb.


       Pada kesempatan kali ini saya akan membagikan materi tentang Ionic, yaitu menampilkan data yang berasal dari database dengan menggunakan event Onclik atau jika tombol di klik maka akan tampil beberapa data yang berasal dari database.


Langkah - langkah :

1. Import Class HttpClientModule, dan masukkan atau importkan pada NgModule pada app.module.ts

~ ImportClientModule adalah untuk berkomunikasi dengan layanan Backend melalui protokol HTTP. Browser modern menfukung dua API berbeda untuk membuat permintaan HTTP: XMLHttpRequest antar muka dan fetch() API

~ ImportClientModule pada NgModule

2. Buat Event OnClick untuk menampilkan data, masuk pada tab1.page.ts

~ Import HttpClient

~ Buat ExportClass, ExportClass adalah digunakan untuk meng-ekspor fungsi, object atau primitive dari file yang di berikan ( atau module ).

~ Buatlah Event OnClick, OnClick adalah fungsi yang mempunyai kegunaan jika tombol di klik akan muncul data yang berasal dari database.

~ Panggil atau Link kan dengan Database (JsonPlaceholder.typicode.com)

3.  Buat tampilan pada Tab1.page.html 

~ Buat Button untuk even yang sebelumnya kita buat yang mempunyai fungsi jika tombol di klik akan menampilkan data

~ Buat Ion-card untuk tempat tampilnya data pada kali ini saya hanya membuat item Ion-header

~ Buat Tabel untuk menampilkan ID dan Title yang berasal dari Database

4. Jika Script anda benar akan muncul tampilan seperti di bawah ini :

~ Jika kita menekan tombol TAMPIL DATA  akan keluar semua data yang ada pada database

Demikian postingan kali ini yang bisa saya share. Saya pribadi meminta maaf apabila ada salah kata atau penjelasan yang kurang jelas atau berbelit-belit. Terima kasih atas perhatian anda semua.

Assalamualaikum Wr. Wb