5.

Komponen Representasi Data

Pada contoh sebelumnya, kita menggunakan DBGrid untuk merepresentasikan/
menampilkan data. Selain DBGrid, kita masih dapat pula menggunakan komponen yang lain.
Berikut ini adalah beberapa jenis komponen yang dapat digunakan untuk hal tersebut.

5.1 DBEdit
DBEdit hanya bisa menampilkan data satu per satu. Berikut ini adalah contoh penggunaan-
nya dan cara membuatnya. Lihat tampilan desain aplikasi pada Gambar 5.1.

Gambar 5.1. Tampilan Form Aplikasi Penggunaan DBEdit

Berikut ini adalah cara membuatnya.

Sisipkan komponen-komponen berikut dan ubah properties nya.

LABEL

Properties Value
NAME LABEL1
CAPTION KODE MATAKULIAH

Properties Value
NAME LABEL2
CAPTION NAMA MATAKULIAH

Properties Value
NAME LABEL3
CAPTION SKS

Properties Value
NAME LABEL4
CAPTION SEMESTER

ADOCONNECTION

Properties Value
CONNECTIONSTRING Provider=MSDASQL.1;Persist
Security Info=False;Data
Source=DATAKULIAH
LOGINPROMPT False
CONNECTED True
 NAME ADOCONNECTION1

ADOTABLE

Properties Value
CONNECTION ADOCONNECTION1
TABLENAME MK
ACTIVE True
NAME ADOTABLE1

DATASOURCE

Properties Value
NAME DATASOURCE1
DATASET ADOTABLE1

DBNAVIGATOR

Properties Value
NAME DBNAVIGATOR1
DATASOURCE DATASOURCE1

DBEDIT

Properties Value
NAME DBEDIT1
DATASOURCE DATASOURCE1
DATAFIELD KODEMK

Properties Value
NAME DBEDIT2
DATASOURCE DATASOURCE1
DATAFIELD NAMAMK

Properties Value
NAME DBEDIT3
DATASOURCE DATASOURCE1
DATAFIELD SKS

Properties Value
NAME DBEDIT4
DATASOURCE DATASOURCE1
DATAFIELD SMT

5.2 DBComboBox
Seperti halnya komponen ComboBox, penggunaan DBComboBox juga dimanfaatkan untuk
memilih suatu item dan selanjutnya item yang terpilih tersebut akan disimpan dalam
database. Berikut ini adalah contoh penggunaan dan cara membuatnya.
 Gambar 5.2. Penggunaan DBComboBox pada Data SKS

Contoh yang akan dibahas di sini adalah sedikit memodifikasi contoh sebelumnya (data
matakuliah) yang menggunakan DBEdit semuanya. Pada contoh ini, tampilan data pada field
SKS akan diubah menggunakan DBComboBox. Diasumsikan bahwa pilihan SKS yang ada
adalah 1, 2, 3, 4, 5, dan 6.

Berikut ini adalah cara membuatnya.

Sisipkan komponen dan ubah propertiesnya persis sama dengan contoh sebelumnya, kecuali
DBEDIT3. Komponen tersebut diganti dengan DBComboBox dengan properties sebagai
berikut

Properties Value
NAME DBCOMBOBOX1
DATASOURCE DATASOURCE1
DATAFIELD SKS
ITEMS 1
2
3
4
5
6
STYLE csDropDownList

5.3 DBMemo
Komponen ini cara penggunaan dan manfaatnya sama dengan DBEdit yaitu untuk
menampilkan data dari suatu field. Perbedaannya adalah, tampilan teks data dalam DBEdit
disajikan dalam satu baris, sedangkan DBMemo dapat disajikan menjadi beberapa baris.
Biasanya komponen ini digunakan untuk menampilkan data dari field yang bertipe TEXT
dengan lebar yang besar.

Untuk mengarahkan DBMemo ke salah satu field yang diinginkan, caranya dengan
mengubah properti DATAFIELD dengan memilih field yang diinginkan. Sebelumnya jangan
lupa pula untuk menentukan DATASOURCE.

5.4 DBImage
DBImage digunakan untuk menampilkan data yang berupa picture/image. Format image yang
bisa disimpan di database adalah Bitmap (BMP), Windows Meta File (WMF), dan Icon (ICO).
Untuk format yang lain, seperti JPEG dan GIF membutuhkan penanganan khusus yang
cukup rumit.

Kita akan membuat contoh aplikasi yang menggunakan komponen DBImage. Aplikasi ini
terkait dengan data pada tabel MHS. Lihat desain aplikasi pada Gambar 5.3.
 Gambar 5.3. Tampilan Form Data Mahasiswa dengan Image

Untuk memilih image/foto mahasiswa pada tampilan tersebut, caranya dengan mengklik
tombol edit pada navigator, selanjutnya klik kanan mouse pada komponen DBImage. Setelah
itu akan muncul kotak dialog untuk memilih file image. Pilih image yang diinginkan, kemudian
klik tombol post pada navigator.

Berikut ini adalah cara membuat aplikasi tersebut.

1. Terlebih dahulu buka kembali file SAMPEL.mdb dengan MS. Access

2. Tambahkan field baru bernama FOTO pada tabel MHS, dengan cara klik kanan pada
tabel MHS > Design View > Tambahkan field FOTO dengan tipe data OLE OBJECT.
3. Simpan kembali tabel MHS
4. Selanjutnya tambahkan beberapa komponen dan properti pada form sebagai berikut

LABEL

Properties Value
NAME LABEL1
CAPTION NIM

Properties Value
NAME LABEL2
CAPTION NAMA MAHASISWA

Properties Value
NAME LABEL3
CAPTION TGL LAHIR

Properties Value
NAME LABEL4
CAPTION ALAMAT

Properties Value
NAME LABEL5
CAPTION ANGKATAN

ADOCONNECTION

Properties Value
CONNECTIONSTRING Provider=MSDASQL.1;Persist
Security Info=False;Data
Source=DATAKULIAH
LOGINPROMPT False
CONNECTED True
NAME ADOCONNECTION1
ADOTABLE

Properties Value
NAME ADOTABLE1
CONNECTION ADOCONNECTION1
TABLENAME MHS
ACTIVE True

DATASOURCE

Properties Value
NAME DATASOURCE1
DATASET ADOTABLE1

DBEDIT

Properties Value
NAME DBEDIT1
DATASOURCE DATASOURCE1
DATAFIELD NIM

Properties Value
NAME DBEDIT2
DATASOURCE DATASOURCE1
DATAFIELD NAMAMHS

Properties Value
NAME DBEDIT3
DATASOURCE DATASOURCE1
DATAFIELD TGLLAHIR

Properties Value
NAME DBEDIT4
DATASOURCE DATASOURCE1
DATAFIELD ALAMAT

Properties Value
NAME DBEDIT5
DATASOURCE DATASOURCE1
DATAFIELD ANGKATAN

DBNAVIGATOR

Properties Value
NAME DBNAVIGATOR1
DATASOURCE DATASOURCE1

DBIMAGE

Properties Value
NAME DBIMAGE1
DATASOURCE DATASOURCE1
DATAFIELD FOTO
 POPUPMENU

Properties Value
NAME POPMENU1
ITEMS MENU ITEM

Properties Value
NAME PILIHFOTO1
CAPTION PILIH FOTO

OPENPICTUREDIALOG

Properties Value
NAME OPENPICTUREDIALOG1

5. Tambahkan code berikut ini pada event ONCLICK dalam komponen PILIHFOTO1

If OpenPictureDialog1.Execute Then
DBImage1.Picture.LoadFromFile(OpenPictureDialog1.FileName);

6. Pada event POPUPMENU dalam komponen DBIMAGE1, isilah dengan POPUPMENU1.

5.5 DBLookupComboBox
Komponen tersebut pada prinsipnya sama dengan DBComboBox. Item pilihan pada
DBComboBox kita tentukan sendiri, sedangkan item pada DBLookupComboBox mengambil
dari suatu datasource tertentu.

Berikut ini adalah contoh aplikasi yang menggunakan komponen ini. Perhatikan Gambar 5.4

Gambar 5.4. Tampilan Desain Aplikasi dengan DBLookupComboBox

Pada aplikasi tersebut digunakan untuk menyimpan data nilai matakuliah yang diambil
mahasiswa. DBLookupCombobox pada aplikasi tersebut digunakan untuk memilih NIM
mahasiswa yang telah tersimpan dalam tabel MHS. Demikian pula untuk kode matakuliah.
Kode Matakuliah tersebut dipilih dari data yang telah tersimpan dalam tabel MK.

Berikut ini adalah cara membuat aplikasinya:

LABEL

Properties Value
NAME LABEL1
CAPTION NIM
Properties Value
NAME LABEL2
CAPTION KODE MATAKULIAH

Properties Value
NAME LABEL3
CAPTION NILAI

ADOCONNECTION

Properties Value
CONNECTIONSTRING Provider=MSDASQL.1;Persist
Security Info=False;Data
Source=DATAKULIAH
LOGINPROMPT False
CONNECTED True
NAME ADOCONNECTION1

ADOTABLE

Properties Value
NAME ADOTABLE1
CONNECTION ADOCONNECTION1
TABLENAME NILAI
ACTIVE True

Properties Value
NAME ADOTABLE2
CONNECTION ADOCONNECTION1
TABLENAME MHS
ACTIVE True

Properties Value
NAME ADOTABLE3
CONNECTION ADOCONNECTION1
TABLENAME MK
ACTIVE True

DATASOURCE

Properties Value
NAME DATASOURCE1
DATASET ADOTABLE1

Properties Value
NAME DATASOURCE2
DATASET ADOTABLE2

Properties Value
NAME DATASOURCE3
DATASET ADOTABLE3
DBLOOKUPCOMBOBOX

Properties Value
NAME DBLOOKUPCOMBOBOX1
DATASOURCE DATASOURCE1
DATAFIELD NIM
LISTSOURCE DATASOURCE2
LISTFIELD NIM; NAMAMHS
KEYFIELD NIM

Properties Value
NAME DBLOOKUPCOMBOBOX2
DATASOURCE DATASOURCE1
DATAFIELD KODEMK
LISTSOURCE DATASOURCE3
LISTFIELD KODEMK; NAMAMK
KEYFIELD KODEMK

Keterangan:

Properti LISTSOURCE digunakan untuk menentukan datasource mana yang dijadikan

sumber data untuk item pilihannya. LISTSOURCE pada DBLOOKUPCOMBOBOX1 diisi
dengan DATASOURCE2, karena item pilihan pada komponen tersebut diambil dari data pada
DATASOURCE2 yang terkait dengan TABEL2 (tabel MHS). Demikian pula pada
DBLOOKUPCOMBOBOX2 yang item pilihannya diambil dari DATASOURCE3 (tabel MK).
LISTFIELD merupakan field yang datanya ditampilkan sebagai item pilihan (bisa lebih dari
satu field) dan KEYFIELD merupakan field kunci dari sumber data.

DBEDIT

Properties Value
NAME DBEDIT1
DATASOURCE DATASOURCE1
DATAFIELD NILAI

DBNAVIGATOR

Properties Value
NAME DBNAVIGATOR1
DATASOURCE DATASOURCE1

DBGRID

Properties Value
NAME DBGRID1
DATASOURCE DATASOURCE1

5.6 DBChart
DBChart digunakan untuk menampilkan grafik/chart terkait dengan data dalam database.
Contoh aplikasi berikut memanfaatkan DBChart untuk merepresentasikan data. Perhatikan
Gambar 5.5.
 Gambar 5.5. Tampilan Aplikasi dengan DBChart

Aplikasi pada Gambar 5.5, DBChart digunakan untuk menampilkan grafik diagram batang
yang menunjukkan jumlah mahasiswa per angkatan. Grafik tersebut akan berubah secara
otomatis apabila dilakukan perubahan data pada tabel MHS. Berikut ini adalah cara
membuatnya.

1. Sisipkan komponen berikut ini dan ubah propertiesnya

ADOCONNECTION

Properties Value
CONNECTIONSTRING Provider=MSDASQL.1;Persist Security
Info=False;Data Source=DATAKULIAH
LOGINPROMPT False
CONNECTED True
NAME ADOCONNECTION1

ADOTABLE

Properties Value
NAME ADOTABLE1
CONNECTION ADOCONNECTION1
TABLENAME MHS
ACTIVE True

DATASOURCE

Properties Value
NAME DATASOURCE1
DATASET ADOTABLE1
 ADOQUERY

Properties Value
NAME ADOQUERY1
CONNECTION ADOCONNECTION1
SQL SELECT COUNT(*) AS JUM, ANGKATAN
FROM MHS GROUP BY ANGKATAN
ACTIVE True

DBGRID

Properties Value
NAME DBGRID1
DATASOURCE DATASOURCE1

DBNAVIGATOR

Properties Value
NAME DBNAVIGATOR1
DATASOURCE DATASOURCE1

DBCHART

Properties Value
NAME DBCHART1

Catatan:

• Tambahkan SERIES pada DBCHART1 dengan bentuk Bar

• Ubah titlenya menjadi ‘GRAFIK JUMLAH MAHASISWA PER ANGKATAN’
• Hapuslah legend (legend tidak ditampilkan)
• Tambahkan title pada Left Axis dengan ‘JUMLAH’ dan Bottom Axis dengan
‘ANGKATAN’. Dua option ini akan ditampilkan sebagai nama sumbu grafik

2. Tambahkan code berikut ini pada event ONACTIVATE dalam komponen FORM

procedure TForm1.FormActivate(Sender: TObject);

begin
Series1.DataSource := AdoQuery1;
Series1.XLabelsSource := 'ANGKATAN';
Series1.YValues.ValueSource := 'JUM';
end;

Keterangan:

Perintah Series1.XLabelsSource digunakan untuk menampilkan label sumbu X pada

grafik. Pada code di atas, label sumbu x diambil dari field ANGKATAN pada query SQL.
Sedangkan Series1.YValues.ValueSource digunakan untuk menentukan field
terkait dengan nilai data, dalam hal ini nilai data adalah ‘JUM’

3. Tambahkan code berikut ini pada event AFTERDELETE dalam komponen TABLE1

procedure TForm1.Table1AfterDelete(DataSet: TDataSet);

begin
AdoQuery1.Active := false;
AdoQuery1.Active := true;
Series1.DataSource := AdoQuery1;
Series1.XLabelsSource := 'ANGKATAN';
Series1.YValues.ValueSource := 'JUM';
 end;

4. dan tambahkan pula code pada event AFTERPOST dalam komponen TABLE1

procedure TForm1.Table1AfterPost(DataSet: TDataSet);

begin
AdoQuery1.Active := false;
AdoQuery1.Active := true;
Series1.DataSource := AdoQuery1;
Series1.XLabelsSource := 'ANGKATAN';
Series1.YValues.ValueSource := 'JUM';
end;