Ionic MySQL

Penyusun fathurrahmani

Last edited: 26/4/2020

Part 2
Alat dan Bahan
1. Notebook/PC
2. Koneksi Internet
3. Kode Editor (Visual Studio Code)
4. Node JS v.13
5. NPM v.6
6. Ionic CLI v.5
7. XAMPP (Apache dan Mysql)
8. PHP v.5.4 atau lebih tinggi
9. Ionic Storage
10. Rxjs Compat

Membuat Halaman Home

1. Tampilan yang muncul setelah Anda berhasil login

2. Anda berhasil diarahkan ke halaman home.

3. Coba Anda akses url berikut, seharusnya Anda akan diarahkan ke halaman home kembali karena
Anda sudah login.

4. Sekarang kita akan melanjutkan membuat halaman home.

Proses Logout
1. Lakukan import terlebih dahulu pada file home.page.ts

import { Router, ActivatedRoute } from '@angular/router';

import { ToastController, AlertController, LoadingController, NavController }
from '@ionic/angular';
import { AccessProviders } from '../../providers/access-providers'
import { Storage } from '@ionic/storage'

2. Modifikasi constructor()

constructor(
private router: Router,
private toastctrl: ToastController,
private alertctrl: AlertController,
private loadingctrl: LoadingController,
private accessproviders: AccessProviders,
private navctrl: NavController,
private storage: Storage
) { }

3. Buat variabel

datastorage: any;
name: string;

4. Buat ionViewDidEnter

ionViewDidEnter() {
this.storage.get('storage_session').then((res) => {
console.log(res);
this.datastorage = res;
this.name = this.datastorage.fullname;
});
}

5. Cek data dari console.log apakah sudah mendapatkan data yang diinginkan. Pengecekan
dilakukan melalui console browser. Caranya tekan ctrl+shift+I kemudian pilih tab console,
hasilnya seperti gambar berikut:
 6. Sekarang kita tampilkan data yang sudah didapatkan di halaman home serta menambahkan
tombol logout, dengan cara mengubah file home.page.html

<ion-header>
<ion-toolbar>
<ion-title>Hi, {{name}}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="tryLogout()">
<ion-icon slot="icon-only" name="exit-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

7. Hasilnya

8. Tambahkan fungsi tryLogout() di home.page.ts

async tryLogout() {
this.storage.clear();
this.navctrl.navigateRoot('/login');
const toast = await this.toastctrl.create({
message: "Logout Berhasil",
duration: 1500
});
toast.present();
}

9. Jalankan aplikasi, klik tombol logout maka Anda akan diarahkan ke halaman login. Akses kembali
url http://localhost:8100/home maka Anda akan diarah ke halaman login.

CRUD
Read
Sumber : https://ionicframework.com/docs/api/fab

1. Buat halaman baru dengan nama “crud”

2. Buat tombol tambah melayang pada file home.page.html

<ion-content>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button size="small" (click)="openCRUD('0')">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>

3. Buat fungsi openCRUD() pada file home.page.ts

openCRUD(a) {
this.router.navigate(['/crud/' + a]);
}

4. Modifikasi file app-routing.module.ts

{
path: 'crud/:id',
loadChildren: () => import('./crud/crud.module').then(m => m.CrudPageModu
le)
},

5. Buat variabel

users: any = [];

limit: number = 13;
start: number = 0;

6. Inisialisasi variabel berikut didalam ionViewDidEnter

this.start = 0;
this.users = [];
this.loadUsers();

7. Buat fungsi loadUsers()

async loadUsers() {
return new Promise(resolve => {
let body = {
action: 'load_users',
start: this.start,
 limit: this.limit
}
this.accessproviders.postData(body, 'api.php').subscribe((res: any) =>
{
for (let data of res.result) {
this.users.push(data);
}
resolve(true);
});
});
}

8. Buat fungsi doRefresh()

async doRefresh(event) {
const loading = await this.loadingctrl.create({
message: 'Tunggu Sebentar...',
});
await loading.present();

this.ionViewDidEnter();
event.target.complete();

loading.dismiss();
}

9. Buat fungsi loadData()

loadData() {
this.start += this.limit;
setTimeout(() => {
this.loadUsers().then(() => {
event.target.complete();
});
}, 500);
}

10. Modifikasi file backend, api.php, dengan menambahkan action untuk load_users

elseif ($postJSON['action']=='load_users'){
$data = array();
$query = mysqli_query($mysqli,"SELECT * FROM users ORDER BY userid DE
SC LIMIT $postJSON[start], $postJSON[limit]");
while ($row = mysqli_fetch_array($query)) {
$data[] = array(
 'userid' => $row['userid'],
'fullname' => $row['fullname'],
'gender' => $row['gender'],
'datebirth' => $row['datebirth'],
'email' => $row['email']
);
}
if ($query) {
$result = json_encode(array('success' => true, 'result' => $data)
);
} else {
$result = json_encode(array('success' => false));
}
echo $result;
}

11. Modifikasi file home.page.html untuk menambahkan ion-item-sliding dan ion-refresher

Sumber : https://ionicframework.com/docs/api/item-sliding

<ion-list>
<ion-item-sliding *ngFor="let user of users">
<ion-item>
<ion-label>{{user.fullname}}</ion-label>
</ion-item>

<ion-item-options side="end">
<ion-item-option (click)="openCRUD(user.userid)">Ubah</ion-item-option>
<ion-item-
option (click)="delData(user.userid)" color="danger">Hapus</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>

Sumber : https://ionicframework.com/docs/api/refresher

<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">

<ion-refresher-content pullingIcon="arrow-dropdown"></ion-refresher-content>
</ion-refresher>
 12. Sekarang coba lihat hasilnya

13. Kemudian ubah salah satu data melalui database, kemudian refresh dengan cara menarik layer
dari atas kebawah, maka daftar akan terupdate.

Kesimpulan

1. Session diterapkan dengan menggunakan storage

2. List data ditampilkan menggunakan ion item sliding
3. Pembaruan data menggunakan ion refresher

Selamat mencoba.