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
Baca juga :
Debugging Sqlite Melalui Command Line
Related search:
Membuat aplikasi CRUD Ionic 3 dengan SQLite