Membuat Aplikasi CRUD Ionic 3 dengan SQLite Part 2 - Mari Belajar Coding

Kamis, 16 Mei 2019

Membuat Aplikasi CRUD Ionic 3 dengan SQLite Part 2


Membuat Aplikasi CRUD Ionic 3 dengan SQLite

Selamat datang kembali di blog Mari belajar coding. Artikel kali ini merupakan kelanjutan dari artikel sebelumnya tentang Membuat Aplikasi CRUD Ionic 3 dengan SQLite Part 1. Pada tutorial kali ini kita akan membuat sebuah form input data dan form edit data pada halaman form-input dan form-edit yang kemarin sudah kita buat. 


Membuat Aplikasi CRUD Ionic 3 dengan SQLite 
1. Edit file form-input.html yang berada di src/page/form-input, kita akan membuat sebuah form inputan data.
<ion-header>
  <ion-navbar>
    <ion-title>Input Data</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <form [formGroup]="FormInput" (ngSubmit)="Simpan()" novalidate>
      <ion-item>
        <ion-label color="primary" stacked>Nama Mahasiswa</ion-label>
        <ion-input type="text" formControlName="NamaMahasiswa"></ion-input>
      </ion-item>  
      <ion-item>
        <ion-label color="primary" stacked>Jurusan</ion-label>
        <ion-input type="text" formControlName="Jurusan"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label color="primary" stacked>Alamat</ion-label>
        <ion-input type="text" formControlName="Alamat"></ion-input>
      </ion-item>
      <ion-item>
        <button ion-button full type="submit" color="secondary" [disabled]="!FormInput.valid" >Simpan</button>
      </ion-item>
    </form>
</ion-content>

2. Edit juga form-input.ts untuk menangani proses input data dan validasi form.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';

import { Validators,FormBuilder, FormGroup } from '@angular/forms';
import { DatabaseProvider } from '../../providers/database/database';

/**
 * Generated class for the FormInputPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-form-input',
  templateUrl: 'form-input.html',
})
export class FormInputPage {

  private FormInput:FormGroup;

  constructor(public navCtrl: NavController, public navParams: NavParams,private formBuilder:FormBuilder, 
    private database: DatabaseProvider, private toastCtrl: ToastController) {
      this.FormInput=this.formBuilder.group({
        NamaMahasiswa:['',Validators.required],
        Jurusan:['',Validators.required],
        Alamat:['',Validators.required]
      });
  }

  Simpan(){
    this.database.InsertDataMahasiswa(this.FormInput.value.NamaMahasiswa, 
      this.FormInput.value.Jurusan, this.FormInput.value.Alamat).then( (data) => {
      let toast = this.toastCtrl.create({
        message: 'Data berhasil disimpan.',
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
        this.navCtrl.pop();
    }, (error) => {
      let toast = this.toastCtrl.create({
        message: error,
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
   });
  }

}

3. Selanjutnya kita akan membuat sebuah form edit data pada halaman form-edit. Buka file form-edit.html yang berada di src/pages/form-edit kemudian ubah seperti di bawah ini.
<ion-header>
  <ion-navbar>
    <ion-title>Edit Data</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="FormEdit" (ngSubmit)="Simpan()" novalidate>
    <ion-item>
      <ion-label color="primary" stacked>Nama Mahasiswa</ion-label>
      <ion-input type="hidden" formControlName="IdMahasiswa" *ngFor="let data of ListDataMahasiswa" [value]="data.IdMahasiswa"></ion-input>
      <ion-input type="text" formControlName="NamaMahasiswa" *ngFor="let data of ListDataMahasiswa" [value]="data.NamaMahasiswa"></ion-input>
    </ion-item>  
    <ion-item>
      <ion-label color="primary" stacked>Jurusan</ion-label>
      <ion-input type="text" formControlName="Jurusan" *ngFor="let data of ListDataMahasiswa" [value]="data.Jurusan"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label color="primary" stacked>Alamat</ion-label>
      <ion-input type="text" formControlName="Alamat" *ngFor="let data of ListDataMahasiswa" [value]="data.Alamat"></ion-input>
    </ion-item>
    <ion-item>
      <button ion-button full type="submit" color="secondary" [disabled]="!FormEdit.valid" >Simpan</button>
    </ion-item>
  </form>
</ion-content>

4. Terakhir untuk menangani proses ubah data di database dan validasi form, kita akan merubah file form-edit.ts.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';

import { Validators,FormBuilder, FormGroup } from '@angular/forms';
import { DatabaseProvider } from '../../providers/database/database';
/**
 * Generated class for the FormEditPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-form-edit',
  templateUrl: 'form-edit.html',
})
export class FormEditPage {

  private FormEdit:FormGroup;
  public ListDataMahasiswa : any;
  constructor(public navCtrl: NavController, public navParams: NavParams,private formBuilder:FormBuilder, 
    private database: DatabaseProvider, private toastCtrl: ToastController) {
    this.FormEdit=this.formBuilder.group({
      IdMahasiswa:['',Validators.required],
      NamaMahasiswa:['',Validators.required],
      Jurusan:['',Validators.required],
      Alamat:['',Validators.required]
    });
  }

  ionViewDidEnter() {   
    this.getdatamahasiswa(); 
  }

  getdatamahasiswa(){
    this.database.GetDataMahasiswa(this.navParams.get('IdMahasiswa')).then((data: any) => {
      this.ListDataMahasiswa = data;    
    }, (error) => {
      console.log(error);
    });
  }

  Simpan(){
    this.database.UpdateDataMahasiswa(this.FormEdit.value.NamaMahasiswa, 
      this.FormEdit.value.Jurusan, this.FormEdit.value.Alamat, this.FormEdit.value.IdMahasiswa).then( (data) => {
      let toast = this.toastCtrl.create({
        message: 'Data berhasil diubah.',
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
        this.navCtrl.pop();
    }, (error) => {
      let toast = this.toastCtrl.create({
        message: error,
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
   });
  }

}

Jalankan aplikasi dengan emulator untuk mencoba input data, ubah data dan menghapus data, Jika teman-teman menjalankan program melalui browser dengan mengetikkan ionic serve, aplikasi tidak akan bekerja karena sqlite berjalan di emulator atau real device. Sekian tutorial tentang membuat aplikasi crud Ionic 3 dengan SQLite, semoga bermanfaat.

Baca juga :
Debugging Sqlite Melalui Command Line 



Related search:
Membuat aplikasi CRUD Ionic 3 dengan SQLite 

Related Posts

Load comments