Dalam pembuatan sebuah aplikasi, untuk mengolah sebuah data di database tak pernah luput yang dengan namanaya CRUD.
CRUD sendiri merupakan singkatan dari Create, Read, Update dan Delete.
Untuk lebih memahami penggunaan CRUD pada Ionic 6, kita akan mencoba membuat aplikasi note sederhana.
1. Membuat Database & Restful API
Sebelum membuat aplikasinya, pertama kita siapkan terlebih dahulu database dan API nya.
Buat database simple_note, kemudian buat tabel note dengan struktur seperti gambar di bawah
Setelah database berhasil dibuat, sekarang kita buat Restful API-nya.
Disini saya akan membuatnya dengan PHP Native, kalian bebas membuat API dengan tools apapun atau dengan framework PHP jika tidak ingin menggunakan PHP Native. Disesuaikan saja kodingannya dengan ketentuan tools atau frameworknya yaa.
Jika kalian tidak menggunakan PHP Native untuk membuat Restful API. Kalian boleh langsung ke bagian 2 pada halaman ini. klik disini
Bagi yang ingin tetap mencoba menggunakan PHP Native siapkan direktori project kalian yang akan digunakan untuk menyimpan file Restful API nya.
Berikutnya kita buat file config.php yang digunakan untuk mengkonfigurasi koneksi ke database, lalu masukkan kodingan berikut dan simpan di direktori project API kalian
<?php
$server="localhost";
$user="root";
$pass="";
$db="simple_note";
$mysqli=mysqli_connect($server,$user,$pass,$db);
?>
Sekarang buat file index.php dengan kodingan berikut dan simpan ke direktori project.
<?php
//SET HEADER
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, Content-Type, Authorization, Accept, X-Requested-with, x-xsrf-token");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");
header("Content-Type: application/json; charset=utf-8");
//Config Database
include('config.php');
$postjson = json_decode(file_get_contents('php://input'), true);
$METHOD = $_SERVER['REQUEST_METHOD'];
if($METHOD==='GET'){
if($_GET["id"]===''){ // JIKA ID KOSONG
// EKSEKUSI QUERY
$query = mysqli_query($mysqli,"SELECT * FROM note ORDER BY note_id DESC");
if($query){ // JIKA QUERY BERHASIL DIEKSEKUSI
$data = [];
while($row = mysqli_fetch_assoc($query)){
$data[] = $row;
}
echo json_encode(array(
"result" => "success",
"data" => $data
));
}else{ // JIKA QUERY GAGAL DIEKSEKUSI
echo json_encode(array(
"result" => "error",
"message" => "Gagal mengambil data"
));
}
}else{ // JIKA ID TIDAK KOSONG
$id = $_GET["id"];
$query = mysqli_query($mysqli,"SELECT * FROM note where note_id='{$id}'");
if(mysqli_num_rows($query) > 0){
$row = mysqli_fetch_assoc($query);
echo json_encode(array(
"result" => "success",
"data" => $row
));
}else{
echo json_encode(array(
"result" => "error",
"message" => "Tidak ada data ditemukan"
));
}
}
}
if($METHOD==='POST'){
$note_title = mysqli_real_escape_string($mysqli,$postjson["note_title"]);
$note_content = mysqli_real_escape_string($mysqli,$postjson["note_content"]);
// EKSEKUSI QUERY
$query = mysqli_query($mysqli,"INSERT INTO note(note_title,note_content) VALUES('{$note_title}','{$note_content}')");
if($query){ // JIKA QUERY BERHASIL DIEKSEKUSI
$query_note_id = mysqli_query($mysqli,"SELECT LAST_INSERT_ID() as note_id");
$note_id = mysqli_fetch_assoc($query_note_id)["note_id"];
echo json_encode(array(
"result" => "success",
"message" => "Data berhasil disimpan",
"data" => [
"note_id" => $note_id,
"note_title" => $note_title,
"note_content" => $note_content
]
));
}else{ // JIKA QUERY GAGAL DIEKSEKUSI
echo json_encode(array(
"result" => "error",
"message" => "Gagal menyimpan data"
));
}
}
if($METHOD==='PUT'){
$note_id = $_GET["id"];
$note_title = mysqli_real_escape_string($mysqli,$postjson["note_title"]);
$note_content = mysqli_real_escape_string($mysqli,$postjson["note_content"]);
// EKSEKUSI QUERY
$query = mysqli_query($mysqli,"UPDATE note SET note_title='{$note_title}', note_content='{$note_content}' WHERE note_id='{ $note_id}'");
if($query){ // JIKA QUERY BERHASIL DIEKSEKUSI
if(mysqli_affected_rows($mysqli)>0){ // JUMLAH ROW YANG TERUPDATE > 0
echo json_encode(array(
"result" => "success",
"message" => "Data berhasil diubah"
));
}else{
echo json_encode(array(
"result" => "error",
"message" => "note id tidak terdaftar"
));
}
}else{ // JIKA QUERY GAGAL DIEKSEKUSI
echo json_encode(array(
"result" => "error",
"message" => "Gagal merubah data"
));
}
}
if($METHOD==='DELETE'){
$note_id = $_GET["id"];
// EKSEKUSI QUERY
$query = mysqli_query($mysqli,"DELETE FROM note WHERE note_id='{$note_id}'");
if($query){ // JIKA QUERY BERHASIL DIEKSEKUSI
echo json_encode(array(
"result" => "success",
"message" => "Data berhasil dihapus"
));
}else{ // JIKA QUERY GAGAL DIEKSEKUSI
echo json_encode(array(
"result" => "error",
"message" => "Gagal merubah data"
));
}
}
?>
Sekarang kita buat file .htaccess dan simpan di direktori.
RewriteEngine On
RewriteRule ^([0-9]+)?$ index.php?id=$1
2. Project Ionic
Setelah API telah disiapkan, sekarang waktunya kita membuat aplikasinya
2.1 Membuat Project
Pertama-tama jalankan perintah untuk membuat project ionic dan tunggu sampai prosesnya selesai.
ionic start simpleNote –-type=angular –-capacitor
Jika sudah selesai, masuk ke folder project nya
cd simpleNote
Berikutnya kita akan membuat 3 pages dan 1 service
- Page home : sebagai halaman utama untuk menampilkan list note
- Page detail : untuk menampilkan detail note, untuk metodenya menampilkan kita akan jadikan sebagai modal.
- Page form-note : untuk create dan edit note, page ini nanti kita tampilkan dengan modal.
- Service note : untuk mengakses Restful API
Mari jalankan perintah untuk membuat pages dan service nya
ionic g page modals/detail
ionic g page pages/home
ionic g page modals/form-note
ionic g service services/note
Lalu buka file app-routing.module.ts, ubah kodingannya sebagai berikut
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'detail',
loadChildren: () => import('./modals/detail/detail.module').then( m => m.DetailPageModule)
},
{
path: 'home',
loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule)
},
{
path: 'form-note',
loadChildren: () => import('./modals/form-note/form-note.module').then( m => m.FormNotePageModule)
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Untuk struktur folder dan file nya akan menjadi seperti berikut
- app
-
modals
-
detail
- detail.module.ts
- detail.page.html
- detail.page.scss
- detail.page.spec.ts
- detail.page.ts
- detail-routing.module.ts
-
form-note
- form-note.module.ts
- form-note.page.html
- form-note.page.scss
- form-note.page.spec.ts
- form-note.page.ts
- form-note-routing.module.ts
-
detail
-
pages
-
home
- home.module.ts
- home.page.html
- home.page.scss
- home.page.spec.ts
- home.page.ts
- home-routing.module.ts
-
home
-
services
- note.service.spec.ts
- note.service.ts
- app.component.html
- app.component.scss
- app.component.spec.ts
- app.component.ts
- app.module.ts
- app-routing.module.ts
-
modals
2.2 Memasang HTTP Request
Berikutnya kita pasang plugin HTTP Request ke project kita. Sekarang buka file “app.module.ts” dan import plugin-nya sehingga kodingannya menjadi seperti berikut
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 { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}
2.3 Membuat Service
Sekarang kita mulai merubah kodingan untuk service pada project yang nanti akan berfungsi untuk melakukan pemanggilan ke API
Buka file “note.service.ts” di folder services, lalu ubah kodingannya menjadi seperti berikut
import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class NoteService {
server:string = "http://localhost/api/";
constructor(
public http: HttpClient
) { }
getListNote(){
return this.http.get(this.server+'note/');
}
getDetailNote(noteId){
return this.http.get(this.server+'note/'+noteId);
}
addNote(noteTitle,noteContent){
return this.http.post(this.server+'note/',{
note_title:noteTitle,
note_content:noteContent
});
}
editNote(noteId,noteTitle,noteContent){
return this.http.put(this.server+'note/'+noteId,{
note_title:noteTitle,
note_content:noteContent
});
}
deleteNote(noteId){
return this.http.delete(this.server+'note/'+noteId);
}
}
Sedikit penjelasan dari kodingan di atas
Pada line 2 : berfungsi untuk memanggil atau mengimport plugin Http Request ke services kita.
Pada line 9 : merupakan variabel yang digunakan untuk menyimpan data URL API.
Pada kodingan service terdapat beberapa fungsi :
– getListNote() : untuk menampilkan list dari note
– getDetailNote(noteId) : untuk menampilkan detail dari note dengan argumen pertama id note-nya
– addNote(noteTitle,noteContent) : untuk menambah note dengan argumen pertama judul dan kedua isi dari note.
– editNote(noteId,noteTitle,noteContent) : untuk merubah data note dengan tiga argumen yaitu id note, judul dan isi note.
– deleteNote(noteId) : untuk menghapus sebuah note dengan argumen id note
2.4 Menampilkan List Note
Setelah service berhasil kita buat, berikutnya kita akan mencoba membuat koding untuk menampilkan list dari note.
Sekarang buka file “home.page.ts” di folder pages/home.
Import plugin dan note service yang telah kita buat
import { NoteService } from '../../services/note.service';
import { ToastController} from '@ionic/angular';
Kita juga akan membuat variabel listsNote yang nantinya akan digunakan untuk menyimpan data list dari catatan
listsNote:any;
Pada constructor() kita definisikan seperti berikut
constructor(
private noteService:NoteService,
public toastCtrl:ToastController,
) { }
Lalu tambahkan kodingan untuk memanggil list note di function ionViewWillEnter() dan function presentToast() yang akan digunakan untuk menampilkan pesan error
ionViewWillEnter(){
// MEMANGGIL API LIST NOTE
this.noteService.getListNote().subscribe(
res => {
if(res["result"]=="success"){ // JIKA HASIL SUCCESS
this.listsNote = res["data"];
}else{ // JIKA HASIL ERROR
this.presentToast(res["message"]);
}
},
err => {
console.log(err.error)
}
)
}
//FUNCTION PRESENT TOAST
async presentToast(a){
const toast = await this.toastCtrl.create({
message: a,
duration: 1500
});
toast.present();
}
Dan untuk hasil kodingan home.page.ts akan menjadi seperti ini
import { Component, OnInit } from '@angular/core';
import { NoteService } from '../../services/note.service';
import { ToastController} from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
listsNote:any;
constructor(
private noteService:NoteService,
public toastCtrl:ToastController
) { }
ngOnInit() {
}
ionViewWillEnter(){
// MEMANGGIL API LIST NOTE
this.noteService.getListNote().subscribe(
res => {
if(res["result"]=="success"){ // JIKA HASIL SUCCESS
this.listsNote = res["data"];
}else{ // JIKA HASIL ERROR
this.presentToast(res["message"]);
}
},
err => {
console.log(err.error)
}
)
}
//FUNCTION PRESENT TOAST
async presentToast(a){
const toast = await this.toastCtrl.create({
message: a,
duration: 1500
});
toast.present();
}
}
Sekarang kita buat bagian tampilan untuk menampilkan list dari note, buka file home.page.html dan ubah kodenya menjadi seperti di bawah
<ion-header>
<ion-toolbar color="primary">
<ion-title>Catatan</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button (click)="modalFormNote()">
<ion-icon name="add-outline"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-list>
<ion-item-sliding *ngFor="let item of listsNote;let i = index">
<ion-item lines="full" (click)="modalDetail(i)">
<ion-label>{{item.note_title}}</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="primary" (click)="modalFormNote(i)">Edit</ion-item-option>
<ion-item-option color="danger" (click)="deleteNote(i)">Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
Pada kodingan home.page.html terdapat function modalDetail() untuk melihat detail, modalFormNote() untuk menambah atau merubah note dan deleteNote() untuk menghapus note. Untuk sampai bagian ini, ketiga function tersebut belum menghasilkan efek apapun karena kita belum mendefinisikan functionya
2.5 Menampilkan Detail Note
Jika sudah berhasil menampilkan list note, sekarang mari kita buat fungsi untuk menampilkan detail dari note.
Konsepnya saat kita tekan salah satu note maka akan menampilkan detailnya.
Mari kita buka kembali file home.page.ts.
Import plugin Input untuk menerima inputan dari page induk dan modal untuk menampilkan detail sebagai modal.
Dan karena detail dipanggil sebagai modal dari page home, maka kita perlu mengimport page detail ke home
import { Component, OnInit, Input } from '@angular/core';
import { ToastController, ModalController } from '@ionic/angular';
import { DetailPage } from '../../modals/detail/detail.page';
Sekarang kita ubah bagian constructor()
constructor(
private noteService:NoteService,
public toastCtrl:ToastController,
public modalCtrl:ModalController
) { }
Lalu tambahkan function modalDetail() untuk menampilkan detail note
// FUNCTION MODAL DETAIL
async modalDetail(i){
const modal = await this.modalCtrl.create({
component:DetailPage,
componentProps:{
dataNote:this.listsNote[i]
}
});
return await modal.present();
}
parameter dataNote berisi value detail data note yang akan kita kirim ke page modal
Selanjutnya buka file detail.page.ts, lalu ubah kodingannya menjadi seperti berikut
import { Component, OnInit, Input } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-detail',
templateUrl: './detail.page.html',
styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {
@Input() public dataNote:any;
constructor(
public modalCtrl:ModalController
) { }
ngOnInit() {
}
//Tutup Modal
async closeModal(data){
await this.modalCtrl.dismiss(data);
}
}
pada line 11 untuk mengambil data yang dikirimkan dari page home melalui modal
function closeModal() digunakan untuk menutup modal detail
berikutnya kita buka file detail.page.html dan ubah kodingannya
<ion-header>
<ion-toolbar color="primary">
<ion-title>{{dataNote.note_title}}</ion-title>
<ion-buttons slot="end" (click)="closeModal()">
<ion-button>
<ion-icon name="close-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-content>
<div [innerHTML]="dataNote.note_content"></div>
</ion-card-content>
</ion-card>
</ion-content>
2.6 Tambah Data Note
Pada bagian ini kita akan membuat form untuk menambahkan note.
Untuk tampilannya kita akan buat seperti ini
Dari gambar di atas pada bagian form content kita akan buat dengan CKEditor.
Pertama kita install terlebih dahulu plugin CKEditor.
npm install –save @ckeditor/ckeditor5-angular
Berikutnya kita install editor build nya CKEditor yang classic
npm install –save @ckeditor/ckeditor5-build-classic
*Documentation CKEditor kalian dapat mengakses disini https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html
Sebelum mulai membuat tampilan form, kita kembali dulu ke file home.page.ts import form-note dan tambahkan function modalFormNote() untuk menampilkan detail note lalu simpan.
import { FormNotePage } from '../../modals/form-note/form-note.page';
// FUNCTION MODAL TAMBAH NOTE
async modalFormNote(){
const modal = await this.modalCtrl.create({
component:FormNotePage
});
// KETIKA MODAL DI TUTUP
modal.onWillDismiss().then(dataReturned => {
if(dataReturned.data){
// TAMBAHKAN NOTE KE ARRAY PALING DEPAN
this.listsNote.unshift(dataReturned.data);
}
});
return await modal.present();
}
Setelah menambahkan function modalFormNote() dan telah menginstall plugin CKEditor, berikutnya buka file form-note.module.ts lalu kita import plugin CKEditor
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { FormNotePageRoutingModule } from './form-note-routing.module';
import { FormNotePage } from './form-note.page';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
FormNotePageRoutingModule,
CKEditorModule
],
declarations: [FormNotePage]
})
export class FormNotePageModule {}
Jika sudah diimport, buka file form-note.page.ts, lalu ubah kodingannya menjadi seperti berikut
import { Component, OnInit } from '@angular/core';
import { ModalController, ToastController, LoadingController } from '@ionic/angular';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { NoteService } from '../../services/note.service';
@Component({
selector: 'app-form-note',
templateUrl: './form-note.page.html',
styleUrls: ['./form-note.page.scss'],
})
export class FormNotePage implements OnInit {
noteId:any;
noteTitle:string = "";
noteContent:any;
public Editor = ClassicEditor;
constructor(
public modalCtrl:ModalController,
private noteService:NoteService,
public toastCtrl:ToastController,
public loadCtrl:LoadingController
) { }
ngOnInit() {
}
// MENYIMPNAN FORM NOTE
async saveNote(){
const loading = await this.loadCtrl.create({
message: 'Please wait'
});
await loading.present();
await this.noteService.addNote(this.noteTitle,this.noteContent
).subscribe(
res => {
console.log(res);
if(res["result"]=="success"){
this.closeModal({
note_id:res["data"]["note_id"],
note_title:this.noteTitle,
note_content:this.noteContent
},"add")
}
this.presentToast(res["message"]);
loading.dismiss();
},
err => {
console.log(err);
loading.dismiss();
}
);
}
async presentToast(a){
const toast = await this.toastCtrl.create({
message: a,
duration: 1500
});
toast.present();
}
//Tutup Modal
async closeModal(data=null,role=null){
await this.modalCtrl.dismiss(data,role);
}
}
Berikutnya mari kita buat untuk kodingan tampilannya, buka file form-note.page.html lalu ubah kodingannya seperti berikut
<ion-header>
<ion-toolbar color="primary">
<ion-title>Catatan</ion-title>
<ion-buttons slot="end" (click)="closeModal(null)">
<ion-button>
<ion-icon name="close-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-input type="text" [(ngModel)]="noteId" style="display: none;"></ion-input>
<ion-card>
<ion-card-content>
<ion-item-group>
<ion-label>Title</ion-label>
<ion-input type='text' [(ngModel)]="noteTitle"></ion-input>
</ion-item-group>
<ion-item-group>
<ion-label>Content</ion-label>
<ckeditor [editor]="Editor" [(ngModel)]="noteContent" style="height: 500px;" [config]="{toolbar : ['heading','|','bold', 'italic','underline','|','NumberedList','BulletedList','Blockquote']}"></ckeditor>
</ion-item-group>
<ion-button expand="block" color="primary" (click)="saveNote()">
Save
</ion-button>
</ion-card-content>
</ion-card>
</ion-content>
2.7 Ubah Data Note
Setelah berhasil menambah data, pada bagian ini kita akan mencoba merubah data dari note.
Untuk merubah data kita akan menggunakan function modalFromNote() dan page form-note yang sama digunakan untuk menambah data
kita akan edit beberapa kodingannya. Silahkan buka kembali file home.page.ts, lalu ubah bagian function modalFormNote() menjadi seperti di bawah ini
// FUNCTION MODAL TAMBAH DAN UBAH NOTE
async modalFormNote(i=null){
let data = i==null ? null : this.listsNote[i];
const modal = await this.modalCtrl.create({
component:FormNotePage,
componentProps:{
dataNote:data
}
});
// KETIKA MODAL DI TUTUP
modal.onWillDismiss().then(dataReturned => {
if(dataReturned.role=="add"){ // JIKA DIDAPAT DARI ADD DATA
this.listsNote.unshift(dataReturned.data);
}else if(dataReturned.role=="edit"){ // JIKA DIDAPAT DARI EDIT DATA
this.listsNote[i] = dataReturned.data
}
});
return await modal.present();
}
Berikutnya buka file form-note.page.ts, lalu ubah kodingannya menjadi seperti berikut
import { Component, OnInit, Input } from '@angular/core';
import { ModalController, ToastController, LoadingController } from '@ionic/angular';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { NoteService } from '../../services/note.service';
@Component({
selector: 'app-form-note',
templateUrl: './form-note.page.html',
styleUrls: ['./form-note.page.scss'],
})
export class FormNotePage implements OnInit {
@Input() public dataNote:any;
noteId:any;
noteTitle:string = "";
noteContent:any;
public Editor = ClassicEditor;
constructor(
public modalCtrl:ModalController,
private noteService:NoteService,
public toastCtrl:ToastController,
public loadCtrl:LoadingController
) { }
ngOnInit() {
}
ionViewWillEnter(){
if(this.dataNote===null){
this.noteId = "";
}else{
this.noteId = this.dataNote.note_id;
this.noteTitle = this.dataNote.note_title;
this.noteContent = this.dataNote.note_content;
}
}
// MENYIMPNAN FORM NOTE
async saveNote(){
const loading = await this.loadCtrl.create({
message: 'Please wait'
});
await loading.present();
await this.noteService.addNote(this.noteTitle,this.noteContent
).subscribe(
res => {
console.log(res);
if(res["result"]=="success"){
this.closeModal({
note_id:res["data"]["note_id"],
note_title:this.noteTitle,
note_content:this.noteContent
},"add")
}
this.presentToast(res["message"]);
loading.dismiss();
},
err => {
console.log(err);
loading.dismiss();
}
);
}
// MERUBAH FORM NOTE
async updateNote(noteId){
const loading = await this.loadCtrl.create({
message: 'Please wait'
});
await loading.present();
await this.noteService.editNote(noteId,this.noteTitle,this.noteContent
).subscribe(
res => {
console.log(res);
if(res["result"]=="success"){
this.closeModal({
note_id:this.noteId,
note_title:this.noteTitle,
note_content:this.noteContent
},"edit")
}
this.presentToast(res["message"]);
loading.dismiss();
},
err => {
console.log(err);
loading.dismiss();
}
);
}
async presentToast(a){
const toast = await this.toastCtrl.create({
message: a,
duration: 1500
});
toast.present();
}
//Tutup Modal
async closeModal(data=null,role=null){
await this.modalCtrl.dismiss(data,role);
}
}
Sekarang kita ubah juga bagian tampilan formnya, buka file form-note.page.html. ubah kodingannya menjadi seperti berikut
<ion-header>
<ion-toolbar color="primary">
<ion-title>Catatan</ion-title>
<ion-buttons slot="end" (click)="closeModal(null)">
<ion-button>
<ion-icon name="close-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-input type="text" [(ngModel)]="noteId" style="display: none;"></ion-input>
<ion-card>
<ion-card-content>
<ion-item-group>
<ion-label>Title</ion-label>
<ion-input type='text' [(ngModel)]="noteTitle"></ion-input>
</ion-item-group>
<ion-item-group>
<ion-label>Content</ion-label>
<ckeditor [editor]="Editor" [(ngModel)]="noteContent" style="height: 500px;" [config]="{toolbar : ['heading','|','bold', 'italic','underline','|','NumberedList','BulletedList','Blockquote']}"></ckeditor>
</ion-item-group>
<ion-button expand="block" color="primary" (click)="saveNote()" *ngIf="noteId==''">
Save
</ion-button>
<ion-button expand="block" color="primary" (click)="updateNote(noteId)" *ngIf="noteId!=''">
Update
</ion-button>
</ion-card-content>
</ion-card>
</ion-content>
2.8 Hapus Data Note
Pada bagian terakhir ini kita akan membuat kodingan untuk menghapus note.
sekarang buka file home.page.ts, lalu import plugin AlertController dan LoadingController
import { AlertController, LoadingController } from '@ionic/angular';
Pada bagian constructor() ubah menjadi seperti ini
constructor(
private noteService:NoteService,
public toastCtrl:ToastController,
public modalCtrl:ModalController,
public alertCtrl:AlertController,
public loadCtrl:LoadingController
) { }
Tambahkan function deleteNote() dan prosesDelete() seperti di bawah
// FUNCTION CONFIRM DELETE NOTE
async deleteNote(i){
// MEMBUAT ALERT PROMPT
const alert = await this.alertCtrl.create({
header: 'Delete',
message: 'Hapus Catatan ?',
buttons: [
{
text:"Tidak"
},
{
text:"Iya",
role:"iya"
}
]
});
// RUNNING ALERT
await alert.present();
// SETELAH ALERT DITUTUP
await alert.onDidDismiss().then(res => {
if(res.role=="iya"){ // JIKA BUTTON YANG DITEKAN = "IYA"
this.prosesDelete(i);
}
});
}
// FUNCTION ACTION DELETE NOTE
async prosesDelete(i){
// MEMBUAT LOADING
const loading = await this.loadCtrl.create({
message: 'Please wait'
});
// TAMPILKAN LOADING
await loading.present();
// MENGIRIM ID NOTE YANG INGIN DIHAPUS KE API
await this.noteService.deleteNote(this.listsNote[i]["note_id"]).subscribe(
res => {
if(res["result"]=="success"){ // JIKA HASIL KE API SUCCESS
this.listsNote.splice(i,1); // HAPUS DATA NOTE DARI ARRAY
}
// TAMPILKAN PESAN
this.presentToast(res["message"]);
// SEMBUNYIKAN LOADING
loading.dismiss();
},
err => {
console.log(err.error)
// SEMBUNYIKAN LOADING
loading.dismiss();
}
);
}
Kodingan di atas, function deleteNote() digunakan untuk menampilkan verifikasi apakah note benar-benar ingin dihapus.
Jika Ya, maka akan dijalankan function prosesDelete() yang berfungsi untuk menghapus note
Akhirnya pembuat CRUD Aplikasi note telah selesai kita buat. Untuk kodingan lengkapnya kalian bisa cek disini yaa
