Selamat datang di blog Mari belajar coding. Sudah lama saya tidak update artikel tentang framework Ionic, pada tutorial kali ini kita akan belajar membuat aplikasi CRUD (create, reate, update, delete) menggunakan framework Ionic dengan database SQLite. Dengan menggunakan SQLite kita bisa membuat sebuah aplikasi offline, karena data akan di simpan di perangkat mobile.
Versi ionic, cordova dan node js yang saya gunakan seperti dibawah ini. Buat teman-teman yang menggunakan versi Ionic 4 bisa menyesuaikan.
Membuat CRUD Ionic 3 dengan SQLite
1. Buat projek aplikasi bernama appSqlite menggunakan cmd atau terminal dengan mengetikkan kode seperti dibawah ini.
ionic start appSqlite blank
2. Install plugin sqlite menggunakan cmd atau terminal.
ionic cordova plugin add cordova-sqlite-storage --save
npm install @ionic-native/sqlite@4 --save
3. Buat provider bernama database menggunakan cmd atau terminal.
ionic generate provider database
4. Buat halaman untuk form-input data dan form-edit data.
ionic generate page form-input
ionic generate page form-edit
5. Tambahkan import sqlite, providers database, form-input dan form-edit di src/app/app.module.ts . Lihat baris yang diberi highlight.
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { FormInputPage } from '../pages/form-input/form-input';
import { FormEditPage } from '../pages/form-edit/form-edit';
import { HttpModule } from '@angular/http';
import { SQLite } from '@ionic-native/sqlite';
import { DatabaseProvider } from '../providers/database/database';
@NgModule({
declarations: [
MyApp,
FormInputPage,
FormEditPage,
HomePage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
FormInputPage,
FormEditPage,
HomePage
],
providers: [
StatusBar,
SplashScreen,
SQLite,
{provide: ErrorHandler, useClass: IonicErrorHandler},
DatabaseProvider
]
})
export class AppModule {}
6. Edit file providers database yang berada di src/providers/database/database.ts. Buat fungsi untuk create database, create table dan fungsi CRUD.
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
/*
Generated class for the DatabaseProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class DatabaseProvider {
private db:SQLiteObject;
private isOpen:boolean;
constructor(public http: Http, public storage: SQLite) {
if(!this.isOpen){
this.storage=new SQLite();
//buat database bernama akademik.db
this.storage.create({name:"akademik.db",location:"default"}).then((db:SQLiteObject) =>{
this.db=db;
//buat tabel bernama mahasiswa
db.executeSql("CREATE TABLE IF NOT EXISTS mahasiswa(IdMahasiswa INTEGER PRIMARY KEY AUTOINCREMENT, NamaMahasiswa TEXT, "+
"Jurusan TEXT, Alamat TEXT)",[]);
this.isOpen=true;
}).catch((error) => {
console.log(error);
})
}
}
//insert ke tabel mahasiswa
InsertDataMahasiswa(NamaMahasiswa: string, Jurusan:string, Alamat:string){
return new Promise ((resolve, reject) => {
let sql = "INSERT INTO mahasiswa (NamaMahasiswa, Jurusan, Alamat)"+
"VALUES (?, ?, ?)";
this.db.executeSql(sql, [NamaMahasiswa, Jurusan, Alamat]).then((data) =>{
resolve(data);
}, (error) => {
reject(error);
});
});
}
//ambil semua data di tabel mahasiswa
GetAllDataMahasiswa(){
return new Promise ((resolve, reject) => {
this.db.executeSql("SELECT * FROM mahasiswa ORDER BY IdMahasiswa DESC", []).then((data) => {
let arrayDataMahasiswa = [];
if (data.rows.length > 0) {
for (var i = 0; i < data.rows.length; i++) {
arrayDataMahasiswa.push({
IdMahasiswa: data.rows.item(i).IdMahasiswa,
NamaMahasiswa: data.rows.item(i).NamaMahasiswa,
Jurusan: data.rows.item(i).Jurusan,
Alamat: data.rows.item(i).Alamat
});
}
}
resolve(arrayDataMahasiswa);
}, (error) => {
reject(error);
})
})
}
//ambil data mahasiswa berdasarkan idmahasiswa
GetDataMahasiswa(id:string){
return new Promise ((resolve, reject) => {
this.db.executeSql("SELECT * FROM mahasiswa WHERE IdMahasiswa=?", [id]).then((data) => {
let arrayMahasiswa = [];
if (data.rows.length > 0) {
for (var i = 0; i < data.rows.length; i++) {
arrayMahasiswa.push({
IdMahasiswa: data.rows.item(i).IdMahasiswa,
NamaMahasiswa: data.rows.item(i).NamaMahasiswa,
Jurusan: data.rows.item(i).Jurusan,
Alamat: data.rows.item(i).Alamat
});
}
}
resolve(arrayMahasiswa);
}, (error) => {
reject(error);
})
})
}
//hapus data mahasiswa berdasarkan id mahasiswa
DeleteDataMahasiswa(id:string){
return new Promise ((resolve, reject) => {
let sql="DELETE FROM mahasiswa WHERE IdMahasiswa=?";
this.db.executeSql(sql, [id]).then((data) => {
resolve(data);
}, (error) => {
reject(error);
})
})
}
//Update data mahasiswa berdasarkan id mahasiswa
UpdateDataMahasiswa(NamaMahasiswa: string, Jurusan:string, Alamat:string, id:string){
return new Promise ((resolve, reject) => {
let sql="UPDATE mahasiswa SET NamaMahasiswa=?, Jurusan=?, Alamat=? WHERE IdMahasiswa=?";
this.db.executeSql(sql, [NamaMahasiswa,Jurusan,Alamat, id]).then((data) => {
resolve(data);
}, (error) => {
reject(error);
})
})
}
}
7. Selanjutnya edit home.html yang berada di src/pages/home untuk membuat button tambah data dan menampilkan data yang berhasil di simpan.
<ion-header>
<ion-navbar>
<ion-title>
Mari Belajar Coding
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h4 text-center>Membuat Aplikasi CRUD Ionic 3 dengan SQLite</h4>
<h5 text-center>maribelajarcoding.com</h5><br><br>
<button ion-button color="primary" block (click)="adddata()">Tambah Data</button>
<table *ngIf="ListDataMahasiswa" >
<thead>
<tr>
<th>Nama Mahasiswa</th>
<th>Jurusan</th>
<th>Alamat</th>
<th>Aksi</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let data of ListDataMahasiswa" >
<td valign="top">{{data.NamaMahasiswa}}</td>
<td valign="top">{{data.Jurusan}}</td>
<td valign="top">{{data.Alamat}}</td>
<td valign="top">
<a (click)="showConfirm(data.IdMahasiswa)"><ion-icon name="trash"></ion-icon></a>
<a (click)="editdata(data.IdMahasiswa)"><ion-icon name="create"></ion-icon></a>
</td>
</tr>
</tbody>
</table>
</ion-content>
8. Edit juga home.ts
import { Component } from '@angular/core';
import { NavController, AlertController, ToastController } from 'ionic-angular';
import { DatabaseProvider } from '../../providers/database/database';
import { FormInputPage } from '../../pages/form-input/form-input';
import { FormEditPage } from '../../pages/form-edit/form-edit';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public ListDataMahasiswa : any;
constructor(public navCtrl: NavController, private database: DatabaseProvider, public toastCtrl: ToastController,
public alertCtrl: AlertController) {
}
ionViewDidEnter() {
this.getalldatamahasiswa();
}
getalldatamahasiswa(){
this.database.GetAllDataMahasiswa().then((data: any) => {
this.ListDataMahasiswa = data;
}, (error) => {
console.log(error);
});
}
adddata(){
this.navCtrl.push(FormInputPage);
}
editdata(id){
this.navCtrl.push(FormEditPage,{
IdMahasiswa:id
});
}
showConfirm(id) {
const confirm = this.alertCtrl.create({
message: 'Apakah anda yakin akan menghapus data ini?',
buttons: [
{
text: 'Tidak',
handler: () => {
//console.log('Disagree clicked');
}
},
{
text: 'Ya',
handler: () => {
this.Hapus(id);
}
}
]
});
confirm.present();
}
Hapus(id){
this.database.DeleteDataMahasiswa(id).then(data => {
let toast = this.toastCtrl.create({
message: 'Data berhasil dihapus.',
duration: 3000,
position: 'bottom'
});
toast.present();
this.getalldatamahasiswa();
}, (error) => {
let toast = this.toastCtrl.create({
message: error,
duration: 3000,
position: 'bottom'
});
toast.present();
});
}
}
9. Terakhir edit file home.scss untuk memberikan style pada tabel.
page-home {
table {
width: 100%;
border-collapse: collapse;
font-size: 10pt;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
}
Tutorial membuat aplikasi crud Ionic 3 dengan SQLite Part 1 sampai disini. Untuk tutorial selanjutnya kita akan membuat form tambah data di page form-input.
Follow akun sosial media kami agar tidak ketinggalan update artikel terbaru.
Baca juga:
Membuat Aplikasi CRUD Ionic 3 dengan SQLite Part 2
Debugging Sqlite Melalui Command Line
Related search:
Membuat aplikasi CRUD Ionic 3 dengan SQLite