Akses Database SQLite Android menggunakan Delphi XE 8

Tutorial kali ini akan membahas tentang pembuatan aplkasi berbasis Android untuk mengakses data yang tersimpan database SQLite. Sebagaimana yang kita ketahui bahwa SQLite adalah database engine yang compact dan kecil ukurannya, sehingga cocok digunakan di perangkat yang kecil memorinya seperti smartphone Android.  Google sendiri merekomendasikan penggunaan database engine ini untuk diterapkan di OS Android besutannya.

Pada prinsipnya, akses database SQLite di Android relatif sama dengan akses database di PC/komputer. Komponen Delphi yang digunakan juga relatif sama. Setidaknya Anda akan membutuhkan tiga macam kelompok komponen untuk mengakses database, yakni : [AdSense-A]

– komponen ‘connector’ untuk menghubungkan aplikasi Delphi dengan database engine,

– komponen ‘table’ atau ‘query’ untuk mengeksekusi perintah (SQL query) ke tabel setelah database terhubung

– komponen ‘data access’/’data source’, sebagai penghubung/interface untuk komponen tampilan (dbGrid, dbNavigator, dll)

Hanya saja, khusus untuk aplikasi Android berbasis Delphi XE8 ini implementasi tiga kelompok komponen agak sedikit berbeda, walaupun pada intinya sama saja. Bagi Anda yng sudah terbiasa bekerja dengan Delphi untuk membuat aplikasi desktop yang berhubungan dengan database, maka seharusnya tidak akan terlalu susah untuk migrasi ke Android.

Baiklah, mari kita mulai tutorialnya. Pertama kali silahkan buat project Android baru di Delphi XE-8 melalui menu File – New – Multi Device Application Delphi. Kemudian pilih ‘Blank Application’ dan tekan tombol ‘OK’, sehingga akan tercipta project baru dan akan muncul tampilan form designer baru. Silahkan disimpan dulu nama projectnya (Save All) sesuai dengan keinginan (contoh : PSQLite untuk project dan USQLite untuk unitnya). Berikutnya, setting target kompilasi ke platform Android dan style form juga ke Android seperti tampak pada gambar di bawah:

Ambil komponen FDConnection (Tab ‘FireDAC’) dan letakkan di form designer. Komponen FDconnection ini nantinya kan berfungsi sebagai ‘connector’ atau penghubung aplikasi ke database engine melalui sebuah file driver. Sebagai referensi, mulai Delphi XE 7 ke atas, Embarcardero (Delphi principal) lebih merekomendasikan komponen FireDAC daripada komponen DbExpress untuk tiap aplikasi yang mengakses database.

Kemudian atur properti komponen FDConnection sebagai berikut :

Untuk menciptakan database sql ‘on the fly’ di dalam IDE Delphi, silahkan double click komponen FireDAC, hingga muncul jendela FireDAC Connection Editor sebagai berikut, kemudian isi parameter ‘Database’ dengan (misalnya) ‘latihan.s3db’. Sebaiknya Anda menulis lengkap absolute file path-nya, misalnya ‘C:\Xe8\contoh\latihan.s3db’. Nantinya Delphi akan menciptakan database ‘latihan.s3db’ ini secara otomatis.

Satu lagi settingan yang penting untuk diubah adalah parameter ‘LockingMode’. Ubah nilai parameter ini dari settingan default ‘Exclusive’ menjadi ‘Normal’. Jika settingan sudah dilakukan semua, klik tombol ‘Test’, abaikan jika muncul jendela login (klik OK saja) dan seharusnya akan muncul popup ‘Connection establish successfully’.

Kemudian tekan tombol ‘OK’ untuk kembali ke form designer. Berikutnya, ubah nilai properti ‘Connected’ menjadi ‘true’ di jendela Object Inspector. Dan terakhir, tambahkan event handler pada event ‘BeforeConnect’ (cari di jendela Object Inspector bagian tab ‘Event’, kemudian double click) dengan script di bawah.

procedure TForm1.FDConnection1BeforeConnect(Sender: TObject);
begin
 {$IF DEFINED(iOS) or DEFINED(ANDROID)}
  FDConnection1.Params.Values['Database'] :=
      TPath.Combine(TPath.GetDocumentsPath, 'latihan.s3db');
  {$ENDIF}
end;

Script di atas kurang lebih fungsinya adalah mendefinisikan file path database ketika compiler directive mendeteksi aplikasi berjalan di platform Android/iOS, sesaat sebelum melakukan koneksi ke database engine SQLite. Jangan lupa menambahkan unit System.IOUtils dibawah ‘implementation’, karena TPath berada di unit ini.

implementation

{$R *.fmx}

uses  System.IOUtils;

Langkah kedua, ambil komponen FDQuery dan letakkan di Form Designer. Komponen ini akan kita gunakan untuk menciptakan tabel dengan nama ‘tbcontoh’ di database latihan.s3db. Untukitu silahkan ubah properti komponen tersebut sebagai berikut :

Perintah query SQL di atas maksudnya kurang lebih adalah menciptakan tabel baru jika sebelumnya belum ada dengan nama ‘tbcontoh’ dengan sebuah field yang bernama ‘data’ yang bertipe ‘TEXT’. Untuk mengeksekusi perintah SQL di atas saat design time, dapat Anda lakukan dengan double click komponen FDQueryCreateTable tadi, dan setelah terbuka jendela FireDAC Query Editor, tekan tombol ‘Execute’.

Langkah ketiga, mari kita coba atur tampilan User Interface aplikasi terlebih dahulu. Ambil komponen TListView, TToolbar, TLabel dan TButton (2 buah) seperti tampak pada gambar di bawah.

Perhatikan bahwa komponen Label dan Button menjadi ‘child’ dari komponen ToolBar (dapat Anda lihat di jendela ‘Structure)

Atur properti komponen-komponen tersebut di Object Inspector sebagai berikut

Dari settingan di atas, maka tampilan form designer akan menjadi sebagai berikut :

Langkah keempat, kita akan melakukan ‘binding’ komponen UI (tampilan User Interface) dengan komponen database melalui ‘LiveBinding’ dengan komponen datasource sebagai penghubungnya. Caranya adalah sebagai berikut :

– Buka jendela LiveBinding melalui menu View-LiveBindings Designer

– Klik tombol wizard (lihat gambar di bawah, kemudian pilih ‘Create a data source’. Pertama kali kita harus menciptakan sebuah komponen ‘datasource’ sebagai penghubung komponen UI dengan database. Klik tombol Next, dan pilih ‘FireDAC’

Klik tombol ‘Next’ kembali, dan di jendela yang baru muncul, pilihan opsi ‘Query’ di parameter ‘Command Type’ kemudian isi kotak edit di bawah tulisan ‘Command Text’ dengan ‘select * from tbcontoh’ dan tekanlah tombol ‘Test Command’. Jika muncul popup window ‘Test command succeded’ berarti Anda sudah berhasil menciptakan tabel ‘tbcontoh’ di database ‘latihan.s3db’. Selamat, tapi Belanda masih jauh :). Berikutnya tekan tombol ‘Next’ dan kemudian tombol ‘Finish’. Perhatikan di Form Designer (dan di LiveBindings Designer) sekarang ada komponen baru ‘BindSourceDB1’ dan ‘FDQuery1’ yang diciptakan menggunakan proses LiveBinding wizard tadi.

Langkah berikutnya adalah menghubungkan komponen UI (dalam aplikasi ini adalah komponen ListView) dengan komponen BindSourceDB1 sebagai komponen datasource-nya. Caranya, klik kembali tombol ‘LiveBinding wizard’ dan pilih opsi ‘Link control with a field’, tekan tombol ‘Next’ dan pilih komponen ‘ListView1’ di tab ‘Existing Control’.

Tekan tombol ‘Next’ sekali lagi dan pilih ‘BindSourceDB1’

Tekan tombol ‘Next’ lagi dan pilih field ‘data’ (ini adalah field yang sebelumnya kita buat melalui komponen FDQueryCreateTable).

Berikutnya tekan tombol Next/Finish untuk mengakhiri livebinding wizard. Perhatikan di jendela LiveBindings Designer, ada sebuah garis anak panah yang menghubungkan antara ListView1 dan BindSourceDB1.

Langkah berikutnya adalah menghubungkan property Item.Text milik ListView agar menampilkan setiap data yang ada di tabel ‘tbcontoh’. Jika melalui LiveBindings Designer caranya cukup mudah, yakni dengan menarik anak panah (tekan mouse, tahan, arahkan) dari field ‘data’ di FDQuery di bawah BindSourceDB1 ke property Item.Text milik komponen ListView1. Hasilnya dapat Anda lihat pada gambar di bawah.

Sampai dengan empat langkah di atas, Anda sudah berhasil menciptakan database SQLite (latihan.s3db), menciptakan tabel (tbcontoh) dan satu field (data) di database tersebut, dan menampilkan datanya ke komponen listView. Langkah berikutnya (kelima) adalah mengisi event handler untuk tombol tambah data (tombol ‘+’) dan hapus data (tombol ‘-‘) yang ada di pojok kanan dan kiri aplikasi.

Langkah kelima, ambil komponen FDQuery dari Tab ‘FireDAC’ di Component Pallete dan letakkan di form designer. Ambil dua komponen FDQuery dan ubah nilai properti masing-masing komponen sebagai berikut :

Kemudian isikan event handler untuk Button2 (tombol + di pojok kanan aplikasi) dengan cara men-double click-nya. Isikan script di event onClick milik komponen Button2 sbb :

procedure TForm2.Button1Click(Sender: TObject);
var
  Values: array[0 .. 0] of String;
begin

       Values[0] := String.Empty;
       InputQuery('Masukkan data', ['data:'], Values, Self.OnInputQuery_Close)
end;

Function InputQuery adalah function di Android yang memanggil kotak dialog dimana user dapat mengisikan sebuah nilai di dalamnya. Perhatikan bahwa di function ‘InputQuery’, terdapat tambahan procedure ‘Self.OnInputQuery_Close’ (identifier ‘Self’ di sini adalahTForm1’). Oleh karena itu deklarasikan procedure baru tersebut di bawah statement ‘private’ sbb :

private

    { Private declarations }

    procedure OnInputQuery_Close(const AResult: TModalResult; const AValues: array of string);

Dan kemudian definisikan procedure tersebut, sbb :

procedure TForm1.OnInputQuery_Close(const AResult: TModalResult; const AValues: array of string);
var
  TaskName: String;
begin
 TaskName := string.Empty;
  if AResult <> mrOk then
    Exit;
  TaskName := AValues[0];
  try
    if (TaskName.Trim <> '')
    then
    begin
      FDQueryInsert.ParamByName('data').AsString := TaskName;
      FDQueryInsert.ExecSQL();
      FDQuery1.Close();
      FDQuery1.Open;
    end;
  except
    on e: Exception do
    begin
      ShowMessage(e.Message);
    end;
  end;
end;

Event handler untuk menambahkan data di database sudah selesai, sekarang gilirannya kita menambahkan event handler untuk menghapus data data di database.

Tambahkan event handler onClick di Button1 sebagai berikut:

procedure TForm1.Button1Click(Sender: TObject);
var
  TaskName: String;
begin
  TaskName := ListView1.Selected.Text;

  try
    FDQueryDelete.ParamByName('data').AsString := TaskName;
    FDQueryDelete.ExecSQL();
    FDQuery1.Close;
    FDQuery1.Open;
   except
    on e: Exception do
    begin
      ShowMessage(e.Message);
    end;
  end;
end;

Dan langkah terakhir (ke enam) adalah tahap finalisasi. Pada tahap ini setidaknya ada dua langkah yang harus dilakukan yakni, menambahkan komponen the TFDGUIxWaitCursor dan TFDPhysSQLiteDriverLink, dan menambahkan file database ke dalam file project agar ketika di-compile menjadi file APK, file database ini akan dimasukkan ke package APK dan ketika diinstal akan masuk ke dalam file system Android.

Komponen TFDGUIxWaitCursor terletak tab ‘FireDAC UI’ dan komponen TFDPhysSQLiteDriverLink terletak di tab ‘FireDAC Links’ di Component Pallete. Kedua komponen ini mutlak diperlukan saat kita menggunakan komponen FireDAC agar semua komponen yang menggunakan teknologi FireDAC dapat berjalan sebagaimana mestinya.

Sedangkan untuk menambahkan file database ke dalam file project caranya cukup mudah. Klik kanan nama project di jendela Project Manager (biasanya di sebelah kanan atas IDE Delphi) dan pilih opsi ‘Add’. Ketika muncul jendela browse file, segera pilih file database Anda tadi (latihan.s3db)

Seharusnya tampilan jendela Project Manager akan menjadi seperti gambar di bawah

Akhirnya selesai sudah tutorialnya :). Jangan lupa untuk save all semua konfigurasi yang telah Anda lakukan tadi. Jika sudah, running project Anda (F9) ke dalam emulator atau device Android langsung. Berikut ini adalah tampilan awal program setelah di-running di smartphone Android :

Jika sudah terinstal aplikasinya cobalah untuk menekan tombol + untuk menambahkan data dan tombol – untuk menghapus data. Baca kembali script-script yang telah Anda tulis tadi, dan saya yakin sekarang Anda akan semakin mengerti makna dari script yang Anda masukkan tadi :). Selamat bereksperimen 🙂

Tampilan saat entry data ke database :

Tutorial di atas memang panjang, tapi jika Anda sudah terbiasa saya yakin Anda akan dengan cepat membuat aplikasi database di Android. Ohya, dalam buku saya ‘Membangun Aplikasi Android dengan Delphi XE 8”, saya tulis contoh-contoh lain dalam mengakses database SQLite di Android. Dalam buku ini saya jelaskan pula cara cepat bikin aplikasi database di Android, bagaimana mengakses field di tabel dengan cara yang lebih efisien, bagaimana bekerja dengan dua field atau lebih dalam satu tabel, bagaimana menampilkan data dengan dbGrid dan dBNavigator, bagaimana me-manage database SQLite dengan tampilan visual (SQLite Manager), dll. Pokoknya banyak, dah :). Silahkan pesan sebelum kehabisan 🙂 [AdSense-A]

Saptaji, ST. M.Tr.T

a Technopreneur – writer – Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com