Simple creating CRUD with ionic 4

Hallo hybrid mania!! kali ini saya akan membuat sebuha tutorial dasar dengan ionic, yaitu membuat CRUD (Create,Read,Update,Delete) sederhana menggunakan ionic versi 4.

Pengenalan?

Sebelum memulai project kita, kita perlu mengenal apa itu hybrid mobile application?

Lalu, dalam tutorial ini akan membahas membuat To Do List Application dengan menggunakan ionic framework. Apa saja yang akan dibahas?

  • Membuat UI To Do List
  • Membuat Function Create and Read
  • Membuat Function Update and Delete
  • Membuat Function Alert

Sebelumnya, berikut versi ionic yang dipakai:

Ionic:

   Ionic CLI                     : 5.4.13 (C:\Users\brill\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.8
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.2

Utility:

   cordova-res                          : 0.8.1
   native-run (update available: 0.3.0) : 0.2.9

System:

   NodeJS : v12.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.12.0
   OS     : Windows 10

Apa itu Hybrid Mobile Application?

Sederhananya, mereka adalah aplikasi seluler yang dibuat oleh bahasa yang lebih mudah dipelajari; HTML, CSS, dan JavaScript. Keindahan mengembangkan aplikasi seluler hybrid adalah kenyataan bahwa mereka dapat dikompilasi untuk bekerja dengan platform apa pun. Jika Anda malas, benar-benar seperti milik Anda, Anda akan lebih mudah menggunakan satu kode untuk membangun banyak aplikasi, daripada mengembangkan aplikasi terpisah untuk setiap platform.

Ionic

Ionic adalah salah satu kerangka kerja populer untuk membuat aplikasi seluler hybrid Anda sendiri. Ini dapat dibangun menjadi aplikasi Android, iOS, Windows, Web Progresif atau Desktop. Dan menguji aplikasi ini jauh lebih mudah karena dapat langsung dimuat langsung ke browser Anda.

Langkah Awal

Install ionic Anda, tidak saya jelaskan disini karena nantinya artikel ini akan sangat panjang.

Buat project Ionic

Buka command promt Anda, ketikan ionic start. Di console akan menyuruh Anda untuk memasukan nama project Anda. Misalkan Anda masukkan project dengan nama todo-list

? Starter template: (Use arrow keys)
  tabs     | A starting project with a simple tabbed interface
> blank    | A blank starter project
  sidemenu | A starting project with a side menu with navigation in the content area
  super    | A starting project complete with pre-built pages, providers and best practices for Ionic development.
  tutorial | A tutorial based project that goes along with the Ionic documentation
  aws      | AWS Mobile Hub Starter

Sekarang, silahkan kita menggunakan blank project dari ionic.

Setelah project ionic sudah siap, kita coba running dulu untuk aplikasi starter ionic kita dengan mengetikan command:

ionic serve

Oke, berarti aplikasi kita sudah jalan yah. nanti kita akan membuat aplikasi Todo List CRUD sederhana, tampilannya seperti ini:

Wireframe todo list application

Oke, apa yang saya harapkan dari tutorial ini adalah Anda bisa membuat aplikasi seperti gambar diatas.

Membuat C (Create) dan R (Read)

Pertama-tama, mari kita buat UI dahulu untuk membuat tampilan aplikasi seperti gambar diatas.

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>
            To Do List
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content class="padding">
    <ion-item>
        <ion-input type="text" placeholder="Add to do here" [(ngModel)]="taskForm.taskName"></ion-input>
    </ion-item>
    <ion-button type="submit" expand="block" (click)="addTask()">Add task</ion-button>

    <ion-list>
        <ion-item *ngFor="let task of taskList; let i = index">
            <ion-label>{{task.taskName}}</ion-label>
            <ion-button icon-end color="secondary" (click)="updateTask(i)">
                <ion-icon name="create"></ion-icon>
            </ion-button>
            <ion-button icon-end color="danger" (click)="deleteTask(i)">
                <ion-icon name="trash"></ion-icon>
            </ion-button>
        </ion-item>
    </ion-list>
</ion-content>

Implementasi Create dan Read Function

export class HomePage {
  public taskList = [];
  public taskForm = {};
  
  constructor(public alert: AlertController) {
  }

  addTask() {
    if (this.taskForm['taskName'].length > 0) {
      let task = { 'taskName': this.taskForm['taskName'] };
      this.taskList.push(task)
      this.taskForm['taskName'] = '';
    }
    else {
      let msg = "Data tidak boleh kosong";
      this.showAlert(msg);
    }
  }

Implementasi Update dan Delete

updateTask(index) {
    let msg = "Edit Data";
    this.confirmAlert(msg, index);
  }

  deleteTask(index) {
    this.alertDelete(index);
  }

Tambahkan Alert untuk mempercantik aplikasi

async alertDelete(index) {
    const alertDel = await this.alert.create({
      header: "Alert",
      message: "Apakah Anda yakin akan menghpus ini?",
      buttons: [{ text: "Cancel", role: 'cancel' },
      {
        text: "Ok", handler: () => {
          this.taskList.splice(index, 1);
        }
      }]
    });

    await alertDel.present();
  }

  async showAlert(msg) {
    const alertTask = await this.alert.create({
      header: 'Warning',
      message: msg,
      buttons: ['OK']
    });

    await alertTask.present();
  }

  async confirmAlert(msg, index) {
    const confirm = await this.alert.create({
      header: "Alert",
      message: msg,
      inputs: [{ name: "taskName", placeholder: "task" }],
      buttons: [{ text: "Cancel", role: 'cancel' },
      {
        text: "Update", handler: data => {
          {
            this.taskList[index]['taskName'] = data.taskName;
          }
        }
      }]
    });

    await confirm.present();
  }

Bonus?!

Bonus, kita akan menambahkan auto focus pada aplikasi kita. Jadi, saat aplikasi kita terbuka, otomatis langsung fokus untuk memasukan task todo nya. Begini caranya:

import { Component, ViewChild } from '@angular/core';

Tambahkan ViewChild pada import from ‘@angular/core’

  public taskList = [];
  public taskForm = {};

  @ViewChild('taskName',{static:false}) inputElement: IonInput;

Tambahkan @ViewChild(‘taskName’,{static:false}) inputElement: IonInput;


  ngAfterViewInit(){
    setTimeout(()=>{
      this.inputElement.setFocus();
    },350);
  }

Tambahkan function ngAfterViewInit dengan setTimeout. Kemudian pada home.page.ts kita ubah pada baris berikut:

<ion-input type="text" placeholder="Add to do here" #taskName [(ngModel)]="taskForm.taskName"></ion-input>

Tambahkan #taskName untuk mendapatkan ID untuk ViewChildnya.

Bonus #2

Bonus Pretty Button Ionic 4
<ion-button fill="clear" icon-end color="secondary" (click)="updateTask(i)">
                <ion-icon name="create"></ion-icon>
            </ion-button>
            <ion-button fill="clear" icon-end color="danger" (click)="deleteTask(i)">
                <ion-icon name="trash"></ion-icon>
            </ion-button>

Yups, Tambahkan fill=”clear” pada <ion-button. Maka tampilan button yang tadinya kaku akan berubah menjadi icon saja, seperti gambar diatas.

Summary

Pada tutorial kali ini, apa fungsi apa saja yang dipakai adalah:

  • Membuat UI To Do List
  • Membuat Function Create and Read
  • Membuat Function Update and Delete
  • Membuat Function Alert

Jangan ketinggalan untuk update tutorial dan berita selanjutnya.

Jika kurang jelas bisa melihat video dibawah ini:


Leave a Reply