Modul IONIC Framework (Angular Version)

CRUD Operation Firestore

Mohammad Irham Akbar S.Kom.,M.Cs

1. Membuat Akun Firebase

a. Membuat Project Firebase

Buatlah akun firebase https://console.firebase.google.com dari gmail anda lalu

buat project di menu add project bernama crud-ionic.:

Klik continue lalu ikuti instruksi yang ada, setelah itu anda akan diarahkan di
halaman dashboard firebase.
 Simpan config di dalam catatan yang nantinya akan kita gunakan untuk
konfigurasi firestore didalam project ionic framework.

Pilih menu firestore database, lalu buat database firestore, pilih test mode, test
mode membaca file yang di create selama interval satu bulan.

2. Membangun Project IONIC Framework untuk operasi CRUD

a. Membuat Project IONIC Framework

• ionic start firecrud, lalu pilih framework angular, dan template blank
• cd firecrud
• ionic g service services/data
• npm i @angular/fire --legacy-peer-deps
 • npm install firebase
• ionic serve

b. Mulai Coding Aplikasi IONIC Framework

Pertama mulai coding di bagian file bernama environment.ts file ini

merupakan konfigurasi dari firestore yang tadi sudah kita buat, isi data sesuai config
yang ada di akun kita.

export const environment = {

production: false,
firebase: {
apiKey: "xxxxxxxxx",
authDomain: "xxxxxx",
projectId: "xxxxxx",
storageBucket: "xxxxxxx",
messagingSenderId: "xxxxx",
appId: "xxxxxxxx",
measurementId: "xxxxxxx"
}
};

Setelah itu kita coding di bagian app.module.ts, ini merupakan konfigurasi

global atau module inti dari ionic framework angular version, isi dari file tersebut
bisa di lihat pada code berikut ini :

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { environment } from '../environments/environment';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore())
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule { }
 Coding berikutnya adalah di file data.service.ts, file ini berfungsi sebagai
tempat untuk berkumpulnya fungsi-fungsi dari operasi crud ke endpoint API PHP yang
sudah kita buat di awal, isi coding dari file tersebut adalah sebagai berikut :

import { Injectable } from '@angular/core';

import { Firestore, collection, collectionData, doc, setDoc, deleteDoc, updateDoc }
from '@angular/fire/firestore';

@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private firestore: Firestore) { }

tambah(contact: any, nama_collation: string) {

const document = doc(collection(this.firestore, nama_collation));
return setDoc(document, contact);
}

tampil_by_id(table: string, primarykey: string) {

return collectionData(collection(this.firestore, table + '/' + primarykey), {
idField: 'id' });
}

tampil(table: string) {
return collectionData(collection(this.firestore, table), { idField: 'id' });
}

hapus(table: string, primarykey: string) {

return deleteDoc(doc(this.firestore, table, primarykey));
}

edit(table: string, primarykey: string, data: any) {

const docRef = doc(this.firestore, table, primarykey);
return updateDoc(docRef, data);
}

Setelah itu kita akan coding bagian home.page.ts, file ini memiliki fungsi
sebagai controller logic pada module home, file ini berisi fungsi-fungsi untuk
menampilkan data tabel, refresh data dan hapus data, coding dari file tersebut adalah
sebagai berikut :
import { Component } from '@angular/core';
import { DataService } from '../services/data.service';
import { ActionSheetController, ModalController } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})

export class HomePage {

nama: any;
alamat: any;
id: any;
catatan: any[] = [];
modal_edit = false;
modal_tambah = false;
constructor(private dataService: DataService, private sheet:
ActionSheetController, private modal: ModalController) {
this.getCatatan();
}

open_modal_edit(isOpen: boolean, idget: any) {

this.modal_edit = isOpen;
this.id = idget;
console.log(this.id);
this.ambilCatatan(this.id);
this.modal_tambah = false;
this.modal_edit = true;
}

cancel() {
this.modal.dismiss();
this.modal_edit = false;
this.modal_tambah = false;
this.reset_model();
}

muat_ulang(event: any) {
console.log('oke');
setTimeout(() => {
console.log('Done');
event.target.complete();
this.getCatatan();
}, 1000);
}

open_modal_tambah(isOpen: boolean) {
this.modal_tambah = isOpen;
this.reset_model();
this.modal_edit = false;
this.modal_tambah = true;
}

addCatatan() {
let data = {
nama: this.nama,
alamat: this.alamat
}
this.dataService.tambah(data, 'catatan');
this.getCatatan();
this.cancel();
}

editCatatan() {
let data = {
id: this.id,
nama: this.nama,
alamat: this.alamat,
}
this.dataService.edit('catatan', this.id, data);
this.getCatatan();
this.cancel();
}

getCatatan() {
this.dataService.tampil('catatan').subscribe({
next: (res: any) => {
console.log('sukses', res);
this.catatan = res;
},
error: (err: any) => {
console.log(err);
},
})
}

ambilCatatan(id: any) {
this.dataService.tampil('catatan').subscribe({
next: (res: any) => {
// console.log('sukses', res);
for (let val of res) {
console.log(val.id);
if (val.id === id) {
this.id = val.id;
this.nama = val.nama;
this.alamat = val.alamat;
break;
}
}
},
error: (err: any) => {
console.log(err);
 },
})
}

deleteCatatan(id: any) {
this.sheet.create({
header: 'perhatian',
subHeader: 'Yakin menghapus data ini?',
buttons: [
{
text: 'Batal',
},
{
text: 'Yakin',
handler: () => {
//jika tekan yakin
this.dataService.hapus('catatan', id);
this.getCatatan();
}
}
]
}).then(res => {
res.present();
})
}

reset_model() {
this.id = null;
this.nama = '';
this.alamat = '';
}

Berikutnya kita akan coding bagian home.page.html, file ini bertujuan sebagai
view dari module home yang terdiri dari component-component dari html ionic
framework, coding dari file ini adalah sebagai berikut :

<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Catatan
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
 <ion-title size="large">Catatan</ion-title>
</ion-toolbar>
</ion-header>
<ion-refresher slot="fixed" (ionRefresh)="muat_ulang($event)">
<ion-refresher-content pullingIcon="chevron-down-circle-outline"
pullingText="Tarik Untuk Memuat Data"
refreshingSpinner="circles" refreshingText="Memuat Ulang Data...">
</ion-refresher-content>
</ion-refresher>
<hr>
<ion-card>
<ion-button (click)="open_modal_tambah(true)" expand="block">Tambah
Catatan</ion-button>
</ion-card>
<!-- ini untuk modal tambah -->
<ion-modal [isOpen]="modal_tambah">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="cancel()">Batal</ion-button>
</ion-buttons>
<ion-title>Tambah Catatan</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">

<ion-item>
<ion-label position="floating">Nama</ion-label>
<ion-input required [(ngModel)]="nama" placeholder="Masukkan Nama
Matakuliah" type="text">
</ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">alamat</ion-label>
<ion-input required [(ngModel)]="alamat" placeholder="Masukkan
Keterangan" type="text">
</ion-input>
</ion-item>
<ion-row>
<ion-col>
<ion-button type="button" (click)="addCatatan()" color="primary"
shape="full" expand="block">Tambah
Matakuliah
</ion-button>
</ion-col>
</ion-row>
</ion-content>
</ng-template>
</ion-modal>
 <!-- ini untuk modal edit -->
<ion-modal [isOpen]="modal_edit">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="cancel()">Batal</ion-button>
</ion-buttons>
<ion-title>Edit Matakuliah</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">

<ion-item>
<ion-label position="floating">Nama</ion-label>
<ion-input required [(ngModel)]="nama" placeholder="Masukkan Nama
Matakuliah" type="text">
</ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">alamat</ion-label>
<ion-input required [(ngModel)]="alamat" placeholder="Masukkan
Keterangan" type="text">
</ion-input>
</ion-item>
<ion-input required [(ngModel)]="id" type="hidden">
</ion-input>
<ion-row>
<ion-col>
<ion-button type="button" (click)="editCatatan()" color="primary"
shape="full" expand="block">Edit
Matakuliah
</ion-button>
</ion-col>
</ion-row>
</ion-content>
</ng-template>
</ion-modal>
<ion-card *ngFor="let item of catatan">
<ion-item>
<ion-label>

<p>{{item.nama}}</p>
<p>{{item.alamat}}</p>
</ion-label>
<ion-button expand="block"
(click)="open_modal_edit(true,item.id)">Edit</ion-button>
<ion-button color="danger" slot="end"
(click)="deleteCatatan(item.id)">Hapus</ion-button>
</ion-item>
 </ion-card>
</ion-content>

c. Uji Coba Aplikasi CRUD

Sekarang kita uji coba aplikasinya, testing input data, tampil data, edit data dan
hapus data catatan, apakah sudah berjalan dengan semestinya, jika terdapat error fungsi
bisa di crosscek kembali pada halaman coding di atas.