Cenadep.org

Setelah tulisan Creating Web-Based Application Using UniGUI, With Ajax Support yang membahas mulai perkenalan, instalasi sampai penggunaan uniGUI pada aplikasi berbasis web, saatnya kita lihat penggunaan database bersama uniGUI untuk membuat aplikasi web dinamis dengan dukungan Ajax.

Kita akan menggunakan uniGUI di Delphi 2009 bersama dengan database MySQL dan library Zeos DBO versi 7.0.0. Anda dapat mendownload Zeos DBO 7.0.0 dan silahkan ikuti tutorial instalasi Zeos di Delphi 2009.

Contoh aplikasi yang akan kita buat adalah buku tamu online. Kita tidak akan membuat aplikasi baru, tapi mengembangkan aplikasi Hello World. Silahkan download source code pada link di atas, ekstrak ke sebuah folder dan kita siap melanjutkan ke inti: database di uniGUI.

Persiapan Database

Membuat database dan tabel serta beberapa sampel data.

Pertama, pastikan Anda memiliki user dengan hak akses ke server MySQL. Kita akan membuat database baru dengan nama uniguiweb dan sebuah tabel bukutamu. Kita belum akan membahasa konsep master-detail dan segala macam tetek bengek terkait database. Simpel saja, yang penting tujuan utama yaitu penggunaan database (MySQL) dengan Zeos DBo di uniGUI dapat tercapai.

Untuk interface database MySQL – daripada menggunakan command line – saya sarankan HeidiSQL. Bila MySQL diinstall bersama paket XAMPP atai WAMPP atau AppServ, Anda dapat juga menggunakan PHPMyAdmin yang biasanya sudah ikut terinstall. Saya sendiri menggunakan HeidiSQL.

Untuk membuat database, Anda dapat mengcopy script berikut dan menjalankannya di window query:

DROP DATABASE IF EXISTS `uniguiweb`;
CREATE DATABASE IF NOT EXISTS `uniguiweb` /*!40100 DEFAULT CHARACTER SET latin1 */;
USE `uniguiweb`;

DROP TABLE IF EXISTS `bukutamu`;
CREATE TABLE IF NOT EXISTS `bukutamu` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) NOT NULL,
`alamat` text NOT NULL,
`telp` varchar(15) DEFAULT '-',
`hp` varchar(15) DEFAULT '-',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

INSERT INTO `bukutamu` (`id`, `nama`, `alamat`, `telp`, `hp`) VALUES
(1, 'Rivalina Primadani Ambarwati', 'Bumi Tamalanrea Permai Blok E/239 Makassar', '581203', '081287861213');

Hasilnya, sebuah database dan tabel baru akan dibuatkan untuk Anda:

Membuat Web Application

Membuat interface input data, grid, dan UI web.

Setelah database, kita lanjut dengan aplikasi. Jalankan Delphi 2009 dan buka projek Hello World hasil download di atas. Kita akan membuang toolbar dan item menu yang belum perlu dan kode-kode yang terkait dengannnya. Selanjutnya, tampilan form MainForm di aplikasi kita (design time) seperti berikut:

Selanjutnya, kita perlu membuat koneksi ke database MySQL. Tambahkan sebuah komponen TZConnection ke MainForm, sebagai interface koneksi ke database MySQL. Atur properti HostName, User, Password dan Database sesuai pengaturan di server MySQL. Set properti LoginPrompt ke False. Jangan lupa, properti Protocol diset ke mysql. Kemudian uji koneksi dengan mengeset properti Connected ke True. Semua oke? Bisa terkoneksi? Saya anggap ya. Lanjut.

Kini kita tambahkan sebuah form baru dari menu File>New>Other…, klik item uniGUI di treeview dan pilih Form dari daftar. Klik OK. Sebuah dialog Select Form Type akan tampil, pilih Application Form. Klik OK. Beri nama form baru ini FBukuTamu, dan save dengan nama uBukuTamu. Form ini akan menjadi interface data buku tamu kita.

Tambahkan sebuah TZQuery ke FBukuTamu. Ini akan memfasilitasi proses input dan penampilan data. Agar dapat terhubung dengan ZConnection1 di MainForm, kita perlu menambahkan unit Main.pas (MainForm) ke daftar uses milik unit uBukuTamu. Caranya – bila sudah lupa – klik menu File>Use Unit… dan pilih Main, klik OK. Hubungkan properti Connection pada TZQuery ke MainForm.ZConnection1.

Untuk meload data dari tabel, klik ZQuery1 dan isi properti SQL-nya dengan query:

select * from bukutamu order by id asc

Anda dapat menguji query ini dengan mengaktifkan ZQuery1 (set properti Active ke True). Kini tambahkan juga sebuah TDataSource ke FBukuTamu, set properti DataSet ke ZQuery1.

Untuk tampilan data, kita gunakan TUniDBGrid. Tambahkan sebuah TUniDBGrid ke FBukuTamu. Secara default, namanya adalah UniDBGrid1.

Atur properti DataSource UniDBGrid1 ke DataSource1. Coba aktifkan ZQuery dan lihat apakah data sudah tampil.

Kita akan lakukan kustomasi pada UniDBGrid1 agar judul kolom, lebar kolom dan alignment sesuai dengan yang kita inginkan. Klik UniDBGrid1. Klik properti Columns dan hapus semua kolom yang ada dari Column Editor. Kemudian klik kanan pada Column Editor dan klik Add All Fields. Hapus kolom id.

Untuk mengatur kolom secara individual, klik sebuah kolom, misalnya nama, dan atur properti Title.Aligment, Title.Caption dan Width. Lakukan juga pada kolom-kolom yang lain.

Bila sudah, klik lagi UniDBGrid1 set properti StripeRows ke True. Ini akan membuat baris ganjil dan genap berbeda warna, sehingga memudahkan seleksi dan terlihat lebih menarik. Kemudian pilih properti WebOptions. Atur properti WebOptions.Paged ke True dan WebOptions.PageSize ke 25. Maksudnya, data akan ditampilkan pe halaman, tiap halaman 25 baris data. Ini akan mempersingkat waktu loading data dari server.

Berikut hasil kustomasi saya:

Kembali ke form utama, MainForm, tambahkan unit uBukuTamu ke klausa uses lewat menu File>Use Unit…, pilih uBukuTamu dan klik OK. Di MainForm, klik item menu Data>Buku Tamu dan klik ganda event OnClick. Masukkan kode seperti berikut:

procedure TMainForm.BukuTamu1Click(Sender: TObject);
begin
FBukuTamu.Show;
end;

Kode di atas untuk menampilkan FBukuTamu saat menu Data>Buku Tamu di MainForm diklik.

Sekarang coba jalankan aplikasi (F9) dan buka browser, masukan URL http://localhost:8077/. Aplikasi seharusnya bisa tampil. Coba klik menu Data>Buku Tamu. Opppsss!

Muncul error warning. Artinya, ZQuery1 di FBukuTamu tidak mengenali ZConnection1 di MainForm. Meskipun sudah ditambahkan ke klausa uses, tampaknya untuk VCL (non uniGUI) tetap harus disetup saat runtime. Saat design time, ZQuery1 sudah kita aktifkan, sehingga saat runtime, uniGUI akan meminta data (dari UniDBGrid1 ke ZQuery1) sedangkan asignment Zquery1.Connection ke MainForm.ZConnection1 belum dilakukan. Untuk mengatasinya, kita mesti kembali ke form FBukuTamu dan mengeset properti Active pada ZQuery1 ke False. Kemudian baru akan diaktifkan (di-open) saat runtime lewat kode. Kita coba saja ya. Mari kita modifikasi kode di atas menjadi:

 procedure TMainForm.BukuTamu1Click(Sender: TObject);
begin
FBukuTamu.ZQuery1.Open;
FBukuTamu.Show;
end;
 

Kita coba jalankan lagi. Kini coba klik menu Data>Buku Tamu. Berikut yang tampil di browser saya:

Oke. Kita lanjut dengan penginputan data, dan sebuah trik untuk menampilkan isi field alamat yang tidak dapat ditampilkan oleh uniDBGrid1. Kita tambahkan sebuah TUniDBNavigator dan sebuah TUniButton ke FBukuTamu. Set properti DataSource dari UniDBNavigator1 ke DataSource1. Kemudian atur juga properti VisibleButtons-nya seperti gambar berikut:

Dengan demikian, desain form FBukuTamu menjadi:

Untuk menutup form, klik pada UniButton1, dan isi event OnClick:

procedure TFBukuTamu.UniButton1Click(Sender: TObject);
begin
Close;
end;

Selanjutnya untuk menampilkan field alamat yang bertipe TEXT (di MySQL, di Delphi menjadi bertipe ftMemo) di UniDBGrid1, kita perlua memodifikasi query di ZQuery1. Klik ZQuery1, klik properti SQL dan ubah menjadi:

select *, cast(alamat as char(1024)) as alamat2 from bukutamu order by id asc

Jadi ada tambahan satu field lagi, alamat2, yang merupakan casting (konversi tipe) dari TEXT ke string (char) dengan panjang maksimum 1024 karakter). Setelah memodifikasi SQL, kita klik OK. Kemudian klik kanan ZQuery1 dan klik Fields Editor… Klik kanan lagi di jendela Fields Editor dan klik Add All Fields. Anda akan melihat field alamat2 sudah muncul di situ.

Nah kini klik UniDBGrid1, klik properti Columns dan ganti field alamat menjadi alamat2:

Dengan demikian, data hasil konversilah yang akan ditampilkan di grid. Perlu diperhatikan, bahwa field alamat2 ini bukan field dalam tabel melainkan hasil konversi, sehingga bersifat read-only. Kita harus mengubahnya manual menjadi writable. Klik kanan Zquery1, klik Field Editors, pilih field alamat2 dan set properti  ReadOnly ke False.

Saat melakukan posting data, ZQuery akan menampilkan error bahwa field alamat kosong padahal sebenarnya harus diisi, sesuai definisi field saat membuat tabel – lihat SQL untuk membuat database dan tabel di atas. Meskipun kita tetap menginput data alamat ke UniDBGrid1, data akan masuk ke field alamat2 bukan ke field alamat sehingga ZQuery tetap menganggap kita tidak menginputnya. Ini akan kita akali dengan memanfaatkan event BeforePost pada ZQuery untuk menyalin isi field alamat2 ke field alamat. Dengan begini proses save ke database akan baik-baik saja.

Klik ZQuery1, klik ganda event OnBeforePost dan buat kode untuk menyalin isi field:

 procedure TFBukuTamu.ZQuery1BeforePost(DataSet: TDataSet);
begin
Dataset.FieldByName('alamat').AsString := Dataset.FieldByName('alamat2').AsString;
end;
 

Dan mari kita jalankan sekali lagi:

Sampai di sini, saya pikir konsep aplikasi web dengan uniGUI, Zeos DBO dan MySQL Database sudah jadi. Meskipun sangat sederhana. Kita belum membahas tentang user-management, input data di form terpisah, widget-widget dan blog saat ini. Dari sini Anda dapat mengembangkan lebih jauh aplikasi database yang lebih lengkap.

Download Source Code

Silahkan download source code untuk tulisan ini

WebApp Using UniGUI, Zeos DBO & MySQL (0.0 B)

Jangan lupa tinggalkan komentar jika Anda ada pertanyaan atau saran, atau sekedar “nyasar” ke sini