- pertama – tama, ketik pada cmd anda ionic start BookStoreApp blank
2. Input y
3. Input n
4. Apabila proses instalasi sudah selesai, masuk ke folder anda dengan mengetik cd BookStoreApp
5. Kemudian install plugin SQLite, ketik ionic cordova plugin add cordova-sqlite-storage
6. Apabila muncul error, kita perlu install cordova secara global seperti gambar di bawah
7. Ketik npm i -g cordova
8. Kemudian ketik npm install –save @ionic-native/sqlite@4
9. Kemudian buka folder project BookStoreApp menggunakan IDE anda, masuk ke dalam src/app/app.module.ts untuk import plugin SQLite. Tambahkan import { SQLite } from ‘@ionic-native/sqlite’; serta SQLite seperti gambar di bawah.
10. Lalu kita akan membuat provider untuk database, ketik ionic generate provider database
11. Ubah code yang ada dalam src/provider/database/database.ts. Masukkan code di bawah
import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
@Injectable()
export class DatabaseProvider {
db:SQLiteObject = null;
constructor(private sqlite: SQLite) { }
getOrGenerateDB() {
// Generate DB adalah proses asynchronus, jadi bagusnya kita pakai promise
// Walaupun prosesnya hanya sepersekian detik, tetap saja harus di tunggu.
return new Promise((resolve, reject) => {
if (this.db != null) {
resolve(this.db)
} else {
this.sqlite.create({
name : 'myDatabase.db',
location : 'default'
}).then((db: SQLiteObject) => {
this.db = db;
resolve(this.db)
}).catch((e) => {
console.log(e);
reject(e);
});
}
});
}
createTable() {
this.getOrGenerateDB().then((db: SQLiteObject) => {
var sql = 'create table IF NOT EXISTS buku (' +
'id INTEGER PRIMARY KEY AUTOINCREMENT, '+
'judul VARCHAR(255), '+
'penerbit VARCHAR(50), '+
'pengarang VARCHAR(50))';
db.executeSql(sql, {})
.then(() => console.log('tabel buku berhasil di create'))
.catch(e => console.log(e));
// db.executeSql('DELETE FROM buku', {})
// .then(() => console.log('tabel buku berhasil di delete'))
// .catch(e => console.log(e));
// db.executeSql('INSERT INTO buku values (?, ?,?,?)',
// [null, "judullll", "penerbittt", "ppengarang OKEOKE"])
// .then(() => console.log('tabel buku berhasil di tambah'))
// .catch(e => console.log(e));
// Untuk create table lainnya bisa ditambahkan di sini
// contoh
// var sql = 'create Tabel 2 IF NOT EXISTS delivery_form (' +
// 'number VARCHAR(255) PRIMARY KEY, '+
// 'round_id VARCHAR(255), '+
// 'state VARCHAR(50), '+
// 'has_returns INTEGER(2), '+
// 'has_annotations INTEGER(2))';
// db.executeSql(sql, {})
// .then(() => console.log('delivery_form table has created'))
// .catch(e => console.log(e));
})
}
}
12. Ubah code yang ada dalam src/app/pages/home/home.ts. Masukkan code di bawah . Disini kita akan membuat fungsi untuk menampilkan semua data pada database.
import { Component, NgZone } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SQLiteObject } from '@ionic-native/sqlite';
import { DatabaseProvider } from '../../providers/database/database';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
data:any=[];
constructor(public navCtrl: NavController, public zone: NgZone,
public db: DatabaseProvider) { }
ionViewDidEnter() {
this.db.getOrGenerateDB().then((db: SQLiteObject) => {
db.executeSql('SELECT * FROM buku', {}).then(res => {
this.data = [];
this.zone.run(() => {
for (var i = 0; i < res.rows.length; i++) {
this.data.push({
id: res.rows.item(i).id,
judul: res.rows.item(i).judul
})
}
})
}).catch(e => console.log(e));
});
}
edit(id) {
this.navCtrl.push("BookformPage", {bookID: id})
}
add() {
this.navCtrl.push("BookformPage")
}
}
13. Ubah code yang ada dalam src/app/pages/home/home.html. Masukkan code di bawah . Disini kita akan membuat halaman untuk menampilkan semua data pada database.
<ion-header>
<ion-navbar>
<ion-title>
Ionic CRUD SQLite
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-scroll scrollY="true" direction="xy" style="height: 100vh;">
<ion-list >
<ion-item tappable *ngFor="let a of data; let index = index" (click)="edit(a.id)" >
{{a.judul}}
</ion-item>
</ion-list>
</ion-scroll>
<ion-fab bottom right>
<button ion-fab (click) = "add()" >Add</button>
</ion-fab>
</ion-content>
14. Sekarang kita akan membuat sebuah halaman input data buku, ketik ionic generate page bookform
15. Ubah code yang ada dalam src/app/pages/bookform/bookform.ts. Masukkan code di bawah . Disini kita akan membuat fungsi untuk tambah data, ubah, serta hapus.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { SQLiteObject } from '@ionic-native/sqlite';
import { DatabaseProvider } from '../../providers/database/database';
@IonicPage()
@Component({
selector: 'page-bookform',
templateUrl: 'bookform.html',
})
export class BookformPage {
book: any = {
judul: '',
penerbit: '',
pengarang: ''
}
title = '';
bookID = '';
toaster: any;
constructor(public navCtrl: NavController, public navParams: NavParams,
public toastCtrl: ToastController, public db: DatabaseProvider) {
this.title = 'Tambah Buku';
this.bookID = navParams.get("bookID");
if (this.bookID != null || this.bookID != undefined) {
this.title = 'Edit Buku';
}
this.toaster = this.toastCtrl.create({
duration: 3000,
position: 'bottom'
});
}
ionViewDidLoad() {
if (this.bookID != '') {
this.db.getOrGenerateDB().then((db: SQLiteObject) => {
db.executeSql('SELECT * FROM buku where id = ?', [this.bookID]).then(res => {
this.book = {
id: res.rows.item(0).id,
judul: res.rows.item(0).judul,
penerbit: res.rows.item(0).penerbit,
pengarang: res.rows.item(0).pengarang
}
}).catch(e => console.log(e));
});
}
}
save() {
if (this.book.judul == '' || this.book.penerbit == '' || this.book.pengarang == '') {
this.toaster.setMessage('All fields are required');
this.toaster.present();
} else {
// Jika edit
if (this.bookID) {
var sql = 'UPDATE buku SET judul=?, penerbit=?, pengarang=? where id = ?';
var param = [this.book.judul, this.book.penerbit, this.book.pengarang, this.book.id];
} else {
console.log(this.book);
param = [null, this.book.judul, this.book.penerbit, this.book.pengarang]
sql = 'INSERT INTO buku values (?,?,?,?)';
}
this.db.getOrGenerateDB().then((db: SQLiteObject) => {
db.executeSql(sql, param).then(res => {
setTimeout(()=>{
this.navCtrl.pop();
}, 300)
}).catch(e => console.log(e));
});
}
}
deleteBook() {
this.db.getOrGenerateDB().then((db: SQLiteObject) => {
db.executeSql('DELETE FROM buku where id = ?', [this.bookID]).then(res => {
setTimeout(()=>{
this.navCtrl.pop();
}, 300)
}).catch(e => console.log(e));
});
}
}
16 . Ubah code yang ada dalam src/app/pages/bookform/bookform.html Masukkan code di bawah . Disini kita akan membuat tampilan input data buku.
<ion-header>
<ion-navbar>
<ion-title> {{ title }} </ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label floating>Judul</ion-label>
<ion-input type="judul" [(ngModel)] = "book.judul" ></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Penerbit</ion-label>
<ion-input type="penerbit" [(ngModel)] = "book.penerbit" ></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Pengarang</ion-label>
<ion-input type="pengarang" [(ngModel)] = "book.pengarang" ></ion-input>
</ion-item>
<ion-item text-center>
<button ion-button round style="min-width: 200px; padding: 10px 16px" (click) = "save()">Save</button>
<br/>
<button ion-button round style="min-width: 200px; padding: 10px 16px" (click) = "deleteBook()">Delete</button>
</ion-item>
</ion-list>
</ion-content>
17. Kemudian panggil fungsi createTable ( ) pada DatabaseProvider
18. Langkah terakhir dengan menambahkan satu parameter pada MyApp Constructor untuk mengaktifkan fungsi createTable ( ) pada DatabaseProvider
19. Sekarang bisa anda coba dengan emulator atau smartphone ,
