Tutorial Phonegap SQLite dengan – Apache Cordova

Pada tutorial ini kita akan melihat bagaimana menggunakan SQLite plugin dengan phonegap / apache cordova. Apache Cordova / Phonegap Sqlite Tutorial ini  menjelaskan bagaimana platform CRUD dengan operasi SQLite Database seperti Create Database, Table, Insert, Update, Delete and Read data.
Apa itu Sqlite ?
SQLite merupakan sebuah perpustakaan dalam proses yang mengimplementasikan, serverless, nol-konfigurasi, mesin database transaksi SQL sendiri. Kode untuk SQLite adalah dalam domain publik dan dengan demikian bebas digunakan untuk tujuan apapun, komersial atau pribadi

Platform yang didukung adalah: Android, iOS, Windows Universal(8.1), Amazon Fire-OS, WP(7/8)

Mari kita buat sebuah contoh berikut ini:

1. Membuat SQLite Database baru
2. Membuat tabel baru
3. Insert Data
4. Read Data
5. Update Data
6. Delete Data
7. Drop table
8. Drop Database

Tahap demi tahap untuk membuat tutorial phonegap SQLite

Tahap 1 : Membuat sebuah project baru dari Phonegap / Apache Cordova

cordova create SQLiteExample com.phonegappro.sqlite SQLiteExample

 Tahap 2 : Tambahkan platform yang dibutuhkan seperti android, ios

cordova platform add android

Tahap 3 : Tambahkan Plugin untuk SQLite

cordova plugin add cordova-sqlite-storage

Dependensi: Saya menggunakan Ionic CSS Komponen (ionic.css) & JQuery (jquery.js) pada contoh ini
Sekarang kira ke perform operasi CRUD dengan apache cordova / phonegap SQLite.
Nama database : mySQLite.db
Nama tabel : phonegap_pro
Tabel Fields : id, title, desc

Functions / Methods untuk operasi database
openDatabase – Untuk membuat koneksi ke database
transaction – Membuat transaksi
executeSql – eksekusi Query  dengan database

Sintaks:

myDB.transaction(function(transaction) {
 var executeQuery = "QUERY";
 transaction.executeSql(executeQuery, [ ],
 function(tx, result) {
//Success
},
function(error){
// Error
 });

Membuat database baru dengan menggunakan phonegap SQLite Plugin

Pertama, kita membuat/membuka database.

var myDB = window.sqlitePlugin.openDatabase({name: "mySQLite.db"});

Membuat tabel baru dengan menggunakan phonegap SQLite Plugin

Gunakan variabel myDB yang kita gunakan untuk mengeksekusi perintahnya.Gunakan query CREATE untuk membuat tabel.

myDB.transaction(function(transaction) {
transaction.executeSql('CREATE TABLE IF NOT EXISTS phonegap_pro (id integer primary key, title text, desc text)', [],
function(tx, result) {
alert("Table created successfully");
},
function(error) {
alert("Error occurred while creating the table.");
});
});

Insert data kedalam tabel `phonegap_pro

Memasukkan data ke tabel.Disini saya menggunakan static data, sehingga bisa melewati data yang dinamik. Gunakan query INSERT untuk memasukkan data ke database sqlite

var title="sundaravel";
var desc="phonegap freelancer";
myDB.transaction(function(transaction) {
var executeQuery = "INSERT INTO phonegap_pro (title, desc) VALUES (?,?)";
transaction.executeSql(executeQuery, [title,desc]
, function(tx, result) {
alert('Inserted');
},
function(error){
alert('Error occurred');
});
}) 

Menampilkan semua data

Untuk membaca semua data dari tabel menggunakan query SELECT

myDB.transaction(function(transaction) {
transaction.executeSql('SELECT * FROM phonegap_pro', [], function (tx, results) {
var len = results.rows.length, i;
$("#rowCount").append(len);
for (i = 0; i < len; i++){
$("#TableData").append("<tr><td>"+results.rows.item(i).id+"</td><td>"+results.rows.item(i).title+"</td><td>"+results.rows.item(i).desc+"</td></tr>");
}
}, null);
});

Update Data pada tabel SQLite Database :

Gunakan query UPDATE untuk meng-update database dengan id

$("#update").click(function(){
 var id=$("#id").text();
 var title=$("#title").val();
 var desc=$("#desc").val()
 myDB.transaction(function(transaction) {
 var executeQuery = "UPDATE phonegap_pro SET title=?, desc=? WHERE id=?";
 transaction.executeSql(executeQuery, [title,desc,id],
 //On Success
 function(tx, result) {alert('Updated successfully');},
 //On Error
 function(error){alert('Something went Wrong');});
 });
});

Delete Data dari tabel

Gunakan query DELETE untuk menghapus data dari database dengan id

myDB.transaction(function(transaction) {
 var executeQuery = "DELETE FROM phonegap_pro where id=?";
 transaction.executeSql(executeQuery, [id],
 //On Success
 function(tx, result) {alert('Delete successfully');},
 //On Error
 function(error){alert('Something went Wrong');});
 });

Hapus seluruh tabel

Gunakan query DROP untuk menghapus semua tabel pada database 

myDB.transaction(function(transaction) {
 var executeQuery = "DROP TABLE IF EXISTS phonegap_pro";
 transaction.executeSql(executeQuery, [],
 function(tx, result) {alert('Table deleted successfully.');},
 function(error){alert('Error occurred while droping the table.');}
 );
 });

Sekian Tutorialnya semoga bermanfaat...!!!