Membangun sistem akuisisi data berbasis database dengan delphi

Spesifikasi:
Ukuran: 14x21 cm
Tebal: 358 hlm
Harga: Rp 53.800
Terbit pertama: November 2004
Sinopsis singkat:

Membangun suatu sistem akuisisi besaran analog mutlak memerlukan perangkat lunak (software) yang
khusus agar sesuai kebutuhan analisis. Saat ini sudah banyak perangkat lunak untuk menganalisis sinyal-sinyal
hasil pengukuran (software) yang dijual. Melalui buku ini, penulis mencoba membangun sebuah perangkat
lunak (software) yang dapat Anda gunakan untuk keperluan akuisisi data.
Sistem akuisisi data yang dibangun berbasis pada database dengan pernyataan Local SQL. Data masukan
dapat diatur agar berasal dari antarmuka ADC, ditampilkan secara online dalam bentuk grafik dengan
komponen TChart, dan juga dalam bentuk teks. Data tersebut dapat disimpan dalam suatu file database,
dicari nilai statistiknya, dan dicetak. Dengan mengganti sumber data, sistem akuisisi data ini juga dapat
diterapkan dalam bidang lain, misalnya ekonomi.
Buku ini juga menyertakan topik-topik tambahan yang berhubungan dengan akuisisi data secara grafis dengan
komponen TChart, TDBChart, atau Timage, dan membuat file setup suatu aplikasi.

BAB 3

BEBERAPA TOPIK TAMBAHAN
UNTUK SUATU APLIKASI

Topik-topik tambahan yang akan dipaparkan berikut ini adalah
untuk suatu aplikasi akuisisi data dengan komponen TChart.
Beberapa topik dapat ditambahkan dalam setting program aplikasi
Sistem Akuisisi Data pada Bab 2 dan sebagian yang lain
merupakan aplikasi tambahan yang dapat diterapkan pada
aplikasi yang lain. Manfaatkan form FOtherDemo (tersimpan
dalam unit UOtherDemo) yang telah dibuat pada Bab 1 untuk
menampung topik-topik tersebut. Untuk membuat suatu topik,
dibuat form baru.

3.1 Mendesain Form FOtherDemo
Pada form FOtherDemo, letakkan sebuah komponen TImage, 2
(dua) buah komponen TGroupBox, 2 (dua) buah komponen
TLabel, 4 (empat) buah komponen TSpeedButton, dan 10
(sepuluh) buah komponen TRadioButton. Kemudian, ubahlah
property komponen-komponen tersebut seperti tabel berikut ini
(untuk property yang mempunyai nilai lebih dari satu, masing-

169

masing dipisahkan oleh tanda titik koma Sesuaikan berdasarkan
urutan property Name):
Nama Object Nama Property Nilai
TForm AutoSize True
BorderStyle bsNone
Name FOtherDemo
Position poScreenCenter
Timage (tab AutoSize True
Additional)
Name IOtherDemo
Picture Klik ganda sel disebelah
kanan property ini, load
gambar IOtherDemo.jpg
TgroupBox Caption Expand; Features
(tab Standard)
Color clWhite
sebanyak 2
buah Font.Color clRed

Font.Name Arial
Font.Size 9
Font.Style.fsBold True
Height 91; 154
Name GBExpand; GBFeatures
Visible False
Width 190
Tlabel (tab AutoSize True; False
Standard)
Caption Read this : ; (bebas)
sebanyak 2
buah. Pasang Font.Color clRed; clBlack
pada form
Font.Name Arial

170

Font.Size 8

Font.Style.fsBold True; False
Height 14; 103
Left 138; 146
Name Label1; LNotes
Top 215; 233
Transparent True
Width 57; 201

WordWrap False; True
TSpeedButton Caption (kosongkan); Expand...
(tab Form; Features...; Show me
Additional) The Demo !
sebanyak 4
Cursor crHandPoint
buah. Pasang
dalam form Flat True
Font.Color (bebas); clYellow; clYellow;
clBlue
Font.Name Arial
Font.Size 9
Font.Style.fsBold True
Glyph Klik ganda sel disebelah
kanan property ini, load
gambar BExit.bmp;
(kosongkan untuk selain
BClose)
Height 12; 18; 18; 18
Left 346; 10; 10; 216
Margin -1; 5; 5; 5

171

Name BClose; BExpand;
BFeatures; Bshow
Top 1; 27; 47; (bebas)
Width 12; 127; 127; 129
TradioButton Caption Cross Hair; Keyboard
(tab Standard) Scrolling; Property
sebanyak 3 BackImage
buah. Pasang
Checked True; False; False
pada
GBExpand Color clWhite
Left 18
Name RCrossHair; RKeyboard;
RBackImage
Top 24
TradioButton Caption Digital Chart; Fast Line
(tab Standard) Series; Linked Tables; Mini
sebanyak 7 Small Charts; Property
buah. Paging; Statistical Bar
Series; Osiloscope with
Pasang pada
TImage
GBFeatures
Checked False untuk selain RDigital
Color clWhite
Left 18
Name RDigital; RFastLine;
RLinked; RMini; RPaging;
RStatistic; ROsciloscope
Top 24; 41; 58; 75; 92; 110; 128

Biarkan nilai-nilai property yang lain sesuai nilai default-nya.

172

Prosedur Event OnMouseDown pada TImage (IOtherDemo)
Form FOtherDemo tidak dapat digeser karena property
BorderStyle bernilai bsNone. Untuk mengatasinya, buat event
OnMouseDown pada komponen TImage. Klik ganda sel di sebelah
kanan event OnMouseDown komponen tersebut dan ketikkan
kode programnya.
procedure TFOtherDemo.IOtherDemoMouseDown(Sender: TObject;
Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
ReleaseCapture;
TWinControl(FOtherDemo).Perform(WM_SysCommand, $F012, 0);
end;

Prosedur Event OnClose pada TForm (FOtherDemo)
Prosedur event OnClose berguna untuk menangani kejadian pada
saat form ditutup, yaitu menampilkan kembali form FMainDemo
yang telah disembunyikan saat form ini dibangkitkan. Pada tab
event TForm, klik ganda sel di sebelah kanan OnClose dan ketik
kode programnya.
procedure TFOtherDemo.FormClose (Sender: TObject; var Action:
TCloseAction);
begin
FMainDemo.Show;
end;

Prosedur Event OnClick pada Komponen TSpeedButton (BClose)
Komponen TSpeedButton BClose berfungsi untuk menutup form
FOtherDemo kemudian menampilkan kembali form FMainDemo
(yaitu memanggil prosedur event OnClose yang telah dibuat). Klik
ganda sel di sebelah kanan event OnClick komponen tersebut
kemudian ketikkan prosedur Close pada prosedur BCloseClick.
procedure TFOtherDemo.BCloseClick (Sender: TObject);
begin
Close;
end;

Prosedur Event OnCreate pada TForm (FOtherDemo)
Posisi beberapa komponen yang terpasang dalam form
FOtherDemo dapat ditentukan dalam prosedur event OnCreate.

173

Pada tab event TForm, klik ganda sel di sebelah kanan OnCreate
dan ketikkan kode program berikut ini.
procedure TFOtherDemo.FormCreate(Sender: TObject);

procedure Position(AOwner: TControl; ax,ay : integer);
begin
AOwner.Left:= ax;
AOwner.Top:= ay;
end;
begin
Position(GBExpand, 157, 22);
Position(GBFeatures, 157, 22);
ButtonClick(BExpand);
end;

Prosedur lokal Position digunakan untuk meringkas penulisan
posisi kiri dan atas beberapa komponen dan prosedur ButtonClick
dengan sender BExpand menyebabkan komponen TGroupBox
GBExpand beserta komponen yang terpasang di dalamnya
ditampilkan ketika form pertama kali dibangkitkan. Jika
menginginkan keadaan tersebut terjadi setiap kali form dipanggil,
deklarasikan dalam event OnShow form.

Prosedur Event OnClick pada Komponen TSpeedButton (BExpand
dan BFeatures)
Menu-menu yang ada dalam form FOtherDemo terbagi dalam
kelompok Expand dan Features. Kelompok pertama berisi menu
yang dapat ditambahkan dalam setting program aplikasi Sistem
Akuisisi Data yang telah dibuat dan menu yang kedua berisi topik
untuk membuat aplikasi lain. Manfaatkan komponen
TSpeedButton BExpand dan BFeatures untuk menampilkan menu-
menu dalam komponen TGroupBox. Blok kedua komponen
TSpeedButton tersebut, isi sel di sebelah kanan event OnClick
dengan nama prosedur ButtonClick kemudian tekan tombol Enter.
procedure TFOtherDemo.ButtonClick(Sender: TObject);
begin
GBExpand.Visible:= False;
GBFeatures.Visible:= False;
if Sender = BExpand then begin
GBExpand.Visible:= True;
BShow.Top:= 124;
end else begin
GBFeatures.Visible:= True;
BShow.Top:= 184;
end;

174

end;
Kelompok menu dalam komponen TGroupBox akan ditampilkan
berdasarkan sender prosedur ButtonClick, termasuk posisi atas
komponen TSpeedButton BShow.

Prosedur Event OnMouseMove pada Semua Komponen
Komponen TLabel LNotes berfungsi untuk menginformasikan
keterangan suatu komponen ketika mouse bergerak di atas
komponen tersebut melalui event OnMouseMove. Blok semua
komponen yang tertampung dalam form FOtherDemo, isi pada sel
sebelah kanan tab event OnMouseMove dengan nama prosedur
Notes, lalu tekan tombol Enter.
procedure TFOtherDemo.Notes(Sender: TObject; Shift: TShiftState;
X,
Y: Integer);
begin
LNotes.Caption:= '';
if Sender = BExpand then
LNotes.Caption := 'Merupakan ekspansi setting program, '+
'seperti Cross Hair, kontrol scrolling grafik dengan '+
'tombol Keyboard, dan mengubah property BackImage '+
'komponen TChart.';
if Sender = BFeatures then
LNotes.Caption := 'Feature yang dapat diterapkan dalam '+
'suatu aplikasi, terdiri atas : Digital Chart, Ploting '+
'data Series bertipe Fast Line, Akses database dengan '+
'komponen TTable, Mini Chart yang Resizeable, ‘+
‘Property Paging, Nilai Statistik dalam TChartSeries, '+
'dan membuat Osciloscope dengan komponen TImage.';
if Sender = RCrossHair then
LNotes.Caption := 'Membuat garis Cross-Hair pada grafik.';
if Sender = RKeyboard then
LNotes.Caption := 'Mengontrol proses zoom dan scrolling '+
'grafik dengan menggunakan tombol-tombol Keyboard.';
if Sender = RBackImage then
LNotes.Caption := 'Mengeset gambar background grafik '+
'(property BackImage).';
if Sender = RDigital then
LNotes.Caption := 'Simulasi plot data digital pada grafik.';
if Sender = RFastLine then
LNotes.Caption := 'Mengukur kecepatan plot data pada
TChartSeries bertipe Fast Line.';
if Sender = RLinked then
LNotes.Caption := 'Menghubungkan TChartSeries komponen '+
'TDBChart dengan dataset komponen TTable.';
if Sender = RMini then
LNotes.Caption := 'Membuat grafik mini yang dapat diubah '+
'ukurannya mengikuti perubahan ukuran form dan membuat '+
'garis divider vertikal pada suatu TChartSeries.';
if Sender = RPaging then
LNotes.Caption := 'Membagi grafik dalam halaman tertentu '+

175

'dan scrolling grafik per halaman.';
if Sender = RStatisticBar then
LNotes.Caption := 'Membuat nilai statistik pada '+
'TChartSeries dan membuat TChartSeries '+
'bertipe Bar secara run-time.';
if Sender = ROsciloscope then
LNotes.Caption := 'Membuat sistem pengukuran data dengan'+
'menggunakan komponen TImage.';
end;

Jika mouse berada di atas komponen yang menjadi sender
prosedur Notes, property Caption komponen LNotes akan
menampilkan keterangan untuk setiap komponen tersebut. Jika
berada di luar komponen-komponen tersebut, tidak ada teks yang
ditampilkan.

3.2 Membuat Garis Cross-Hair
Garis Cross-Hair merupakan garis silang pada „kotak‰ grafik
ketika mouse berada di atas grafik tersebut dan posisinya akan
berubah mengikuti perubahan posisi mouse. Garis Cross-Hair
dapat dipakai untuk mengetahui nilai suatu titik dalam grafik.
Buatlah sebuah form baru dengan nama FCrossHair dan simpan
nama unit dalam UCrossHair. Pada form tersebut, pasang sebuah
komponen TChart, komponen TLabel, komponen TPanel,
komponen TCheckBox, dan sebuah komponen TspeedButton,
kemudian ubah property-nya seperti tabel berikut ini.
TForm AutoSize True
BorderStyle bsToolWindow
Name FCrossHair
TLabel (tab Left 205
Standard).
Name LValues
Pasang pada
komponen Top 36

176

TChart Transparent True

TPanel (tab BevelOuter bvNone
Standard)
Color clWhite
Height 40
Left 0
Name Panel1
Top 407
Width 540
TCheckBox Caption &Cross Cursor
(tab Standard).
Checked True
Pasang dalam
Left 15
Panel1
Name CCross
Top 15
TSpeedButton Caption Cross-Hair Color
(tab
Cursor crHandPoint
Additional).
Flat True
Pasang dalam
Panel1 Height 22

Left 200
Name BColor
Top 10

Width 135

Biarkan property yang lain sesuai nilai default-nya. Untuk
mengedit property komponen TChart, klik ganda komponen
tersebut sehingga muncul kotak dialog seperti Gambar 1.1. Buat

177

sebuah TChartSeries bertipe Line dua dimensi (tanda centang
pada parameter 3D dihilangkan) dengan nama Series1 dan ubah
nilai beberapa property lain sesuai kebutuhan.
Deklarasikan beberapa variabel pada bagian public unit dengan
tipe data seperti berikut ini:
public
{ Public declarations }
OldX, OldY: Longint;
CrossHairColor: TColor;
CrossHairStyle: TPenStyle;
end;

Variabel OldX digunakan untuk menyimpan posisi horisontal (x)
mouse sebelum digeser, sedangkan posisi vertikalnya (y)
disimpan dalam variabel OldY. Nilai variabel CrossHairColor
bertipe TColor digunakan untuk mengisi warna pena (property
Color) yang akan dipakai saat melukis garis Cross-Hair pada
komponen TChart. Property Style pena tersebut berasal dari nilai
variabel CrossHairStyle.

Prosedur Event OnCreate pada TForm (FCrossHair)
Kode program yang dideklarasikan dalam prosedur event
OnCreate hanya dijalankan sekali, yaitu saat form dibangun. Klik
ganda sel di sebelah kanan event OnCreate form sehingga muncul
sebuah prosedur pada jendela Code Editor.
procedure TFCrossHair.FormCreate(Sender: TObject);
begin
Series1.FillSampleValues(30);
OldX:= -1;
CrossHairColor:= clAqua;
CrossHairStyle:= psSolid;
CCrossClick(Sender);
end;

Metode FillSampleValues akan memplot nilai acak pada
TChartSeries dengan rentang data sebanyak angka dalam tanda
kurung. Posisi horisontal mouse yang lama di-reset dengan
memberi nilai -1 pada variabel OldX. Warna pertemuan kedua
garis Cross-Hair ketika form FCrossHair pertama kali ditampilkan
bernilai clAqua dan disimpan dalam variabel CrossHairColor. Garis
Cross-Hair ditampilkan solid (tidak terputus-putus) dengan
memberi nilai psSolid pada property Style pena (menjadi nilai

178

variabel CrossHairStyle). Prosedur CCrossClick untuk menjalankan
perintah event OnClick komponen TCheckBox CCross.

Prosedur Event OnClick pada Komponen TCheckBox (CCross)
Komponen TCheckBox CCross berfungsi untuk mengubah kursor
ketika mouse berada di daerah komponen TChart. Kursor
ditampilkan Cross (crCross) jika property Checked komponen
TCheckBox CCross bernilai True (dicentang) dan jika sebaliknya
kursor berbentuk Default (crDefault). Klik ganda sel di sebelah
kanan event OnClick komponen TCheckBox tersebut, kemudian
deklarasikan perintahnya.
procedure TFCrossHair.CCrossClick(Sender: TObject);
begin
if CCross.Checked then
Chart1.Cursor:= crCross
else Chart1.Cursor:= crDefault;
Chart1.OriginalCursor:= Chart1.Cursor;
end;

Property OriginalCursor me-reset kursor komponen TChart ketika
mouse bergerak melewati TChartSeries yang terdapat di
dalamnya.

Prosedur Event OnMouseMove pada Komponen TChart (Chart1)
Prosedur event OnMouseMove berguna untuk menangani kejadian
ketika mouse digerakan di atas komponen TChart Chart1. Buatlah
prosedur lokal DrawCross pada prosedur event OnMouseMove
yang berisi perintah-perintah untuk melukis garis Cross-Hair
dengan property Canvas komponen TChart.
procedure TFCrossHair.Chart1MouseMove(Sender: TObject; Shift:
TShiftState; X, Y: Integer);
procedure DrawCross(ax,ay: Integer);
begin
with Chart1, Canvas do begin
Pen.Color:= CrossHairColor;
Pen.Style:= CrossHairStyle;
Pen.Width:=1;
Pen.Mode:= pmXor;
MoveTo(ax, ChartRect.Top-Height3D);
LineTo(ax, ChartRect.Bottom-Height3D);
MoveTo(ChartRect.Left+Width3D, ay);
LineTo(ChartRect.Right+Width3D, ay);

179

end;
end;

var
ValueX, ValueY: Double;
begin
if (OldX <> -1) then
begin
DrawCross(OldX, OldY);
OldX:= -1;
end;

if PtInRect(Chart1.ChartRect, Point(X-Chart1.Width3D,
Y+Chart1.Height3D)) then begin
DrawCross(x, y);
OldX:= x;
OldY:= y;
with Series1 do begin
GetCursorValues(ValueX, ValueY);
LValue.Caption:= 'Nilai X/Y :
'+GetHorizAxis.LabelValue(ValueX)+
'/'+GetVertAxis.LabelValue(ValueY);
end;
end else
LValue.Caption:= '';
end;

Property Color TPen menentukan warna yang digunakan untuk
menggambar garis dalam kanvas (komponen TChart Chart1).
Property Style TPen menentukan style pena, property Width
menentukan ketebalan garis tersebut, dan property Mode TPen
menentukan bagaimana warna pena tersebut berinteraksi dengan
warna kanvas. Tabel berikut ini menjelaskan arti nilai property
Style dan Mode.
Property Nilai Arti
Style psSolid Garis solid (tidak terputus-putus)
psDash Garis disusun dari tanda minus (-)
psDot Garis disusun dari tanda titik (.)
psDashDot Garis disusun dari selang-seling tanda
minus dan titik
psDashDotDot Garis disusun dari kombinasi tanda
minus-tanda titik-tanda titik
psClear Tidak ada garis yang digambar
psInsideFrame Garis solid, tetapi menggunakan
banyak warna dan property Width lebih

180

dari 1
Mode pmBlack Selalu berwarna hitam
pmWhite Selalu berwarna putih
pmNop Tidak dapat diubah
pmNot Kebalikan dari warna background
kanvas
pmCopy Warna pena ditentukan berdasarkan
property Color-nya
pmNotCopy Kebalikan dari property Color TPen
pmMergePenNot Kombinasi dari nilai property Color dan
kebalikan warna background kanvas
pmMaskPenNot Kombinasi warna dominan di antara
nilai property Color dan kebalikan
warna background kanvas
pmMergeNotPen Kombinasi warna background kanvas
dan kebalikan nilai property Color TPen
pmMaskNotPen Kombinasi warna dominan di antara
warna background kanvas dan
kebalikan nilai property Color TPen
pmMerge Kombinasi warna nilai property Color
dan warna background kanvas
pmNotMerge Kebalikan dari pmMerge
pmMask Kombinasi warna dominan di antara
nilai property Color dan warna
background kanvas
pmNotMask Kebalikan dari pmMask
pmXor Kombinasi warna nilai property Color
atau warna background kanvas, tetapi
bukan keduanya.
pmNotXor Kebalikan dari pmXor

Kembali ke prosedur lokal DrawCross, metode Move To akan
mengubah posisi mouse ke suatu koordinat. Pemanggilan metode

181

Move To sama dengan menentukan property PenPos TPen, serta
dilakukan sebelum memanggil metode Line To. Metode Line To
menggambar garis pada kanvas dari koordinat yang ditentukan
dalam metode Move To sampai koordinat baru (x, y) yang
ditentukan oleh mouse dan menetapkan posisi pena pada
koordinat baru tersebut.
Pada prosedur lokal DrawCross, kombinasi metode MoveTo dan
LineTo yang pertama untuk menggambar garis Cross-Hair vertikal
dimulai dari koordinat (nilai variabel ax (posisi x Mouse), posisi
atas kotak grafik (property ChartRect), tinggi dinding grafik akibat
efek 3D (property Heigh3D)), sampai koordinat (nilai variabel ax,
posisi bawah kotak grafik-tinggi dinding 3D). Pengurangan
koordinat y dengan nilai property Height3D berguna untuk
mengantisifasi tampilan grafik 3D (tiga dimensi), yaitu jika
parameter CheckBox 3D pada subtab 3D (Gambar 1.10) diberi
tanda centang. Property Height3D bernilai 0 jika grafik ditampilkan
2 dimensi sehingga garis Cross-Hair vertikal menempel pada
dinding grafik.
Kombinasi yang kedua berguna untuk menggambar garis Cross-
Hair horisontal dengan batas kiri garis pada koordinat (posisi kiri
kotak grafik (property ChartRect) ditambah lebar dinding grafik
akibat efek 3D (property Width3D), nilai variabel ay (posisi y
Mouse)) dan batas kanan grafik pada koordinat (posisi kanan
kotak grafik+lebar dinding 3D), nilai variabel ay). Property
Width3D bernilai 0 jika grafik ditampilkan 2 dimensi. Nilai property
Height3D dan Width3D berdasarkan nilai SpinEdit 3D% pada
subtab 3D.
Pada prosedur event OnMouseMove di atas, jika posisi mouse
tidak sedang di-reset (tidak sama dengan -1) maka prosedur lokal
DrawCross dipanggil untuk membuat garis Cross-Hair. Nilai
variabel ax dan ay berasal dari posisi (x, y) mouse sebelum posisi
tersebut berubah menjadi yang tersimpan sementara dalam
variabel OldX dan OldY. Posisi (x, y) mouse tersebut kemudian di-
reset dengan memberi nilai -1 pada variabel OldX sehingga garis
Cross-Hair yang telah terbentuk akan dihapus sebelum membuat
garis Cross-Hair baru.

182

Fungsi PtInRect mengecek posisi (x, y) mouse ketika berada di
dalam kotak grafik Chart1 dengan syntax sebagai berikut:
function PtInRect(const Rect: TRect; const P: TPoint): Boolean;

Fungsi PtInRect akan bernilai True jika koordinat titik P berada di
dalam kotak Rect. Jika posisi x mouse (dikurangi nilai property
Height3D komponen TChart) dan posisi y mouse (ditambah nilai
property Width3D komponen TChart) berada dalam kotak grafik
(property ChartRect komponen TChart) maka garis Cross-Hair
baru akan digambar berdasarkan posisi (x, y) mouse tersebut.
Garis Cross-Hair lama telah terhapus dengan perintah sebelumnya.
Selanjutnya, nilai posisi (x, y) mouse tersebut disimpan dalam
variabel OldX (posisi x) dan OldY (posisi y).
Metode GetCursorValues berguna untuk mendapatkan nilai posisi
(x, y) mouse pada TChartSeries yang ditentukan. Nilai-nilai
tersebut disimpan sementara dalam variabel ValueX dan ValueY,
kemudian ditampilkan dalam property Caption komponen TLabel
LValue menggunakan metode LabelValue pada masing-masing
sumbu grafik. Metode GetHorizAxis menghubungkan TChartSeries
Series1 dengan sumbu horisontal grafik. Untuk
menghubungkannya dengan sumbu vertikal grafik, gunakan
metode GetVertAxis.
Jika mouse tidak berada dalam kotak grafik (fungsi PtInRect
bernilai False) maka garis Cross-Hair tidak digambar dan tidak
ada teks yang ditampilkan dalam property Caption komponen
TLabel LValue.

Prosedur Event OnAfterDrawValue pada TChartSeries (Series1)
Event OnAfterDrawValue terjadi setelah data diplot dalam
TChartSeries, yaitu me-reset posisi (x, y) mouse. Perintah ini
berguna ketika plot data dilakukan secara on-line. Cara
membuatnya, aktifkan jendela Object TreeView, cari object
bernama Series1 (terletak pada komponen TChart), kemudian
aktifkan jendela Object Inspector dan klik ganda sel di sebelah
kanan event OnAfterDrawValue object tersebut.
procedure TFCrossHair.Series1AfterDrawValues(Sender: TObject);
begin

183

OldX:= -1;
end;

Prosedur Event OnClick pada Komponen TSpeedButton (BColor)
Warna kursor Cross dapat diubah dengan mengubah nilai variabel
CrossHairColor. Perubahan warna dapat dilakukan dengan
memanggil kotak dialog Color dan dieksekusi dengan tombol OK.
Oleh karena komponen TColorDialog tidak dipasang dalam form,
deklarasikan function bernama EditColor pada bagian private unit
dan ketikkan kode program untuk function tersebut untuk
memanggil kotak dialog Color.
private
{ Private declarations }
function EditColor(AOwner:TComponent; AColor:TColor):TColor;

function TFCrossHair.EditColor(AOwner: TComponent;
AColor: TColor): TColor;
begin
with TColorDialog.Create(AOwner) do
try
Color:= AColor;
if Execute then
AColor:= Color;
finally
Free;
end;
result:= AColor;
end;

Konstruktor Create pada komponen TColorDialog berguna untuk
membangkitkan kotak dialog Color dan menginisialisasi warna
yang terpilih berdasarkan nilai variabel AColor. Metode Execute
digunakan untuk menampilkan kotak dialog Color. Jika kotak
dialog Color tersebut dieksekusi, nilai variabel AColor akan sama
dengan warna yang dipilih dari daftar warna pada kotak dialog
Color. Hasil dari function EditColor adalah variabel AColor.
Komponen TSpeedButton BColor dipakai untuk menampilkan
kotak dialog Color kemudian mengeksekusinya. Klik ganda sel di
sebelah kanan event OnClick komponen tersebut.
procedure TFCrossHair.BColorClick(Sender: TObject);
begin
CrossHairColor:= EditColor(Self, CrossHairColor);
end;

184

Warna yang terpilih ketika kotak dialog Color ditampilkan sama
dengan nilai variabel CrossHairColor saat itu dan pada saat kotak
dialog Color dieksekusi, hasilnya (nilai variabel AColor) menjadi
nilai variabel CrossHairColor yang baru. Perubahan nilai variabel
tersebut akan mengubah warna kursor Cross, sedangkan warna
garis Cross-Hair merupakan kombinasi warna (dua warna yang
sama) yang pertemuannya menghasilkan warna kursor Cross.
Untuk menampilkan form FcrossHair, buat sebuah prosedur event
OnClick pada komponen TSpeedButton BShow yang terpasang
dalam form FOtherDemo. Klik ganda komponen TSpeedButton
tersebut kemudian ketik kode program berikut.
procedure TFOtherDemo.BShowClick(Sender: TObject);
begin
if GBExpand.Visible then begin
if RCrossHair.Checked then
FCrossHair.ShowModal;
end;
end;

Form FCrossHair hanya akan ditampilkan jika komponen
TGroupBox GBExpand telah ditampilkan dan komponen
TRadioButton RCrossHair dipilih, kemudian pengguna menekan
komponen TSpeedButton BShow.

3.3 Zoom dan Scrolling Grafik dengan Tombol
Keyboard
Pada aplikasi Sistem Akuisi Data, proses zoom grafik
menggunakan komponen TSpeedButton dan scrolling grafik
dengan komponen TScrollBar. Kedua proses tersebut dapat
dilakukan dengan keyboard, untuk itu buat sebuah form baru, beri
nama Fkeyboard, dan simpan unit dalam UKeyboard. Letakkan
sebuah komponen TChart, sebuah komponen TPanel, 2 (dua)
buah komponen TCheckBox, dan 2 (dua) buah komponen TLabel
pada form FKeyboard. Ubah property komponen-komponen
tersebut seperti tabel berikut ini. Untuk property yang mempunyai
nilai lebih dari satu, nilai masing-masing dipisahkan oleh tanda
titik koma. Sesuaikan berdasarkan urutan property Name.

185

Nama
Nama Object Nilai
Property
TForm AutoSize True

Caption Zoom-Scrolling with Keyboard
Topic
KeyPreview True
Name FKeyboard
TPanel BevelOuter bvNone
(tab Standard) Color clWhite
Height 62
Left 0
Name Panel1
Top 384
Width 540
TCheckBox Caption &Inverted Scrolling; Scrolling
(tab Standard) &Limited
sebanyak 2
Left 15
buah. Pasang
dalam Panel1 Name CInverted; CLimit
Top 15; 40
Tlabel AutoSize True; False

186

(tab Standard) Caption Read This :; Gunakan tombol
panah dan Page Up/Page
sebanyak 2
Bottom untuk scrolling grafik.
buah pasang
Tekan SPACE untuk me-reset
dalam Panel1
zoom dan kombinasi tombol
SHIFT + tombol panah untuk
zoom grafik
Height 13; 40
Left 241; 247
Name Label1; Label2
Top 1; 18
Transparent True

Property yang lain biarkan sesuai dengan nilai default-nya. Pada
komponen TChart, buat sebuah TChartSeries bertipe Line dua
dimensi dengan nama Series1 dan ubah nilai beberapa property
lain sesuai kebutuhan.
Untuk menampilkan form FKeyboard, buka kembali prosedur
event OnClick BShowClick pada unit UOtherDemo (form
FOtherDemo), kemudian tambahkan kode programnya sehingga
prosedur tersebut menjadi seperti berikut ini.
begin
FCrossHair.ShowModal else
if RKeyboard.Checked then
FKeyboard.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FKeyboard)
Prosedur event OnCreate hanya berguna untuk menginisialisasi
TChartSeries, yaitu nilai acak dengan rentang sebanyak 500 data
yang diplot dalam TChartSeries melalui metode FillSampleValues.
Klik ganda sel di sebelah kanan event OnCreate form, kemudian
ketikkan kode programnya.

187

procedure TFKeyboard.FormCreate(Sender: TObject);
begin
end;

Prosedur Event OnShow pada TForm (FKeyboard)
Proses zoom dan scrolling grafik dengan keyboard hanya dapat
dilakukan jika komponen TChart yang dimaksud menjadi focus
form sehingga setiap kali form ditampilkan, komponen TChart
Chart1 harus diset menjadi focus form seperti pada prosedur event
OnShow berikut ini.
procedure TFKeyboard.FormShow(Sender: TObject);
begin
Chart1.SetFocus;
end;

Prosedur event OnShow tersebut dapat diganti (dihapus) dengan
memberi nilai Chart1 pada property ActiveControl form
FKeyboard. Akan tetapi jika aplikasi mempunyai komponen
TChart yang dapat di-zoom dan scrolling lebih dari satu,
pemberian nilai property ActiveControl tersebut tidak dapat
dilakukan.

Prosedur Event OnKeyDown pada TForm (FKeyboard)
Event OnKeyDown akan terjadi jika property KeyPreview form
bernilai True. Ketika pengguna menekan suatu atau kombinasi
tombol keyboard dan form tersebut diaktifkan, perintah-perintah
dalam event ini akan dijalankan. Klik ganda sel di sebelah kanan
event OnKeyDown form Fkeyboard, kemudian ketikkan kode
program berikut ini.
procedure TFKeyboard.FormKeyDown(Sender: TObject;
var Key: Word; Shift: TShiftState);
var
aX, aY,
XRange,YRange:Double;
begin
aX:= 0;
aY:= 0;
with Series1.GetHorizAxis do XRange:= Maximum - Minimum;
with Series1.GetVertAxis do YRange:= Maximum - Minimum;

if ssShift in Shift then begin
Case key of
VK_LEFT, VK_UP : Chart1.ZoomPercent(110);

188

VK_RIGHT, VK_DOWN : Chart1.ZoomPercent(90);
end;
exit;
end else
Case key of
VK_LEFT : aX:= XRange/100;
VK_RIGHT : aX:= -XRange/100;
VK_UP : aY:= -YRange/100;
VK_DOWN : aY:= YRange/100;
VK_NEXT : aY:= YRange/10;
VK_PRIOR : aY:= -YRange/10;
VK_SPACE : begin Chart1.UndoZoom; Exit; end;
end;

if CInverted.Checked then begin
aX:= -aX;
aY:= -aY;
end;

with Chart1 do begin
LeftAxis.Scroll(aY, CLimits.Checked);
RightAxis.Scroll(aY, CLimits.Checked);
BottomAxis.Scroll(aX, CLimits.Checked);
TopAxis.Scroll(aX, CLimits.Checked);
SetFocus;
end;
end;

Proses scrolling komponen TChart sebenarnya hanya menggeser
range skala sumbu horisontal atau skala sumbu vertikal (nilai
property Maximum dikurangi dengan property Minimum). Nilai
skala maksimum dan minimum sumbu horisontal grafik diperoleh
setelah dihubungkan dengan metode GetHorizAxis dan dengan
metode GetVertAxis untuk sumbu vertikal. Range skala sumbu
horisontal grafik disimpan dalam variabel XRange, sedangkan
variabel YRange untuk menyimpan range skala sumbu vertikal
grafik.
Flag ssShift merupakan salah satu nilai kelas bertipe TShiftState
yang digunakan untuk menentukan keadaan tombol Alt, Ctrl, Shift,
dan tombol mouse. Tabel berikut ini menjelaskan masing-masing
arti nilai flag:
Nilai Arti
ssShift Tombol Shift ditekan
ssAlt Tombol Alt ditekan
ssCtrl Tombol Ctrl ditekan

189

ssLeft Tombol kiri mouse ditekan
ssRight Tombol kanan mouse ditekan
ssMiddle Tombol tengah mouse
ditekan
ssDouble Mouse diklik ganda

Pada prosedur event KeyDown di atas, jika tombol Shift ditekan
bersama dengan tombol panah kiri atau atas (VK_LEFT, VK_UP)
maka grafik diperbesar 1,1 kalinya (110 %). Grafik diperkecil 90%
jika kombinasi tombol Shift dan tombol panah kanan atau bawah
(VK_RIGHT, VK_DOWN) ditekan pengguna. Penggunaan prosedur
Exit adalah untuk mengeluarkannya dari prosedur yang sekarang
sedang dijalankan.
Jika tombol Shift tidak ditekan, kemudian pengguna menekan
salah satu tombol panah atau Page Up atau Page Down maka
proses scrolling grafik akan dilakukan dengan metode Scroll pada
masing-masing sumbu grafik. Metode Scroll mempunyai syntax:
procedure Scroll(Const Offset: Double; InsideLimits: Boolean);

Metode ini akan mengeser nilai skala maksimum dan minimum
suatu sumbu grafik berdasarkan konstanta Offset. Jika ingin
menggeser grafik secara tidak terbatas maka variabel InsideLimits
harus bernilai False. Nilai variabel InsideLimits tergantung pada
nilai property Checked komponen TCheckBox CLimits.
Nilai variabel aX menentukan scrolling sumbu horisontal grafik,
sedangkan variabel aY untuk scrolling sumbu vertikal grafik.
Kedua variabel tersebut pertama kali diinisialisasi dengan nilai 0
untuk menghapus nilai sebelumnya. Jika penguna menekan salah
satu tombol panah maka grafik akan digeser searah tanda panah
tersebut sebesar nilai range sumbu grafik dibagi dengan 100. Pada
sumbu horisontal, nilai range sumbu horisontal (variabel XRange)
adalah 500 data (angka dalam tanda kurung metode
FillSampleValues) sehingga jika pengguna menekan tombol panah
kiri maka grafik akan digeser ke kiri sebesar 5 titik. Jika pengguna
menekan tombol Page Up (VK_PRIOR) atau Page Down
(VK_NEXT), grafik akan digeser secara vertikal sebesar nilai range

190

sumbu vertikal (variabel YRange) dibagi 10. Nilai range sumbu
vertikal tergantung pada data random yang di-plot dalam
TChartSeries.
Untuk me-reset zoom grafik, digunakan tombol SPACE
(VK_SPACE) dengan memanggil metode UndoZoom. Arah proses
scrolling akan terbalik dengan arah tombol panah jika komponen
TCheckBox CInverted dicentang, yaitu hanya dengan memberi
nilai minus pada variabel aX dan aY.

Prosedur Event OnClick pada TCheckBox (CInverted dan CLimits)
Pemberian/penghilangan tanda centang pada komponen
TCheckBox akan membangkitkan event OnClick dan fokus form
berada pada komponen tersebut. Proses scrolling dan zoom grafik
dengan tombol keyboard hanya akan terjadi jika komponen
TChart yang dimaksud menjadi focus form sehingga prosedur
event OnClick pada kedua komponen tersebut hanya berguna
untuk mengembalikan focus form pada komponen TChart dengan
memanggil metode SetFocus. Klik ganda masing-masing
komponen TCheckBox sehingga pada jendela Code Editor akan
muncul dua buah prosedur bernama CInvertedClick dan
ClimitsClick. Ketikkan kode program berikut untuk masing-masing
prosedur.
procedure TFKeyboard.CInvertedClick(Sender: TObject);
begin
Chart1.SetFocus;
end;

procedure TFKeyboard.CLimitsClick(Sender: TObject);
begin
if CLimits.Checked then begin
ShowMessage('Scrolling grafik terbatas hanya pada data '+
'yang telah diplot.'+#13+
'Lakukan zoom terlebih dahulu '+
'sebelum scrolling grafik.');
Chart1.SetFocus;
end else
Chart1.SetFocus;
end;

Tambahan kode program pada prosedur ClimitsClick digunakan
untuk menampilkan sebuah pesan ketika komponen TCheckBox
Climits diberi tanda centang (property Checked bernilai True).

191

Pesan tersebut tidak akan muncul ketika pengguna
menghilangkan tanda centang pada komponen TCheckBox
Climits.

3.4 Mengubah Property BackImage
Komponen TChart Secara Run-time
Property BackImage komponen TChart berguna untuk memberi
latar belakang grafik dengan gambar. Saat desain form, gambar
tersebut dicari dengan tombol Browse pada GroupBox BackImage
subtab Panel (lihat kembali Gambar 1.7). Buat sebuah form
dengan nama FBackImage dan simpan unit dalam UBackImage.
Kemudian tambahkan sebuah komponen TOpenDialog, sebuah
komponen TChart, sebuah komponen TPanel, sebuah komponen
TGroupBox, 3 (tiga) buah komponen TRadioButton, dan 2 (dua)
buah komponen TSpeedButton. Ubah property komponen-
komponen tersebut seperti tabel berikut ini. Untuk property yang
mempunyai nilai lebih dari satu, nilai masing-masing dipisahkan
oleh tanda titik koma. Sesuaikan berdasarkan urutan property
Name.
Nama
Nama Object Nilai
Property
TForm AutoSize True
Caption Property BackImage Topic
Name FBackImage
Standard)
Color clWhite
Height 54
Left 0
Name Panel1

192

Top 407
Width 540
TGroupBox Caption Style
(tab Standard).
Color clWhite
Pasang pada
Panel1 Height 43
Left 8
Name GBStyle
Top 7
Width 212
TRadioButton Caption Stretch; Tile; Center
(tab Standard)
Checked True; False; False
sebanyak 3
buah. Pasang Left 17; 81; 137
dalam GBStyle
Name RStretch; RTile; RCenter
Top 20
TSpeedButton Caption Browse...; Clear Bitmap
(tab Additional)
Cursor crHandPoint
sebanyak 2
buah. Pasang Flat True
dalam Panel1
Height 22
Left 349; 447
Name BBrowse; BClear
Top 20
Width 80

Biarkan Property yang lain sesuai nilai default-nya. Komponen
TOpenDialog berfungsi untuk membuka folder tempat file gambar.
Jika ingin menyaring file gambar dengan eketensi tertentu ketika
kotak dialog Open ditampilkan, misalnya hanya file gambar

193

bertipe Bitmap (bmp), ubah property Filter-nya. Caranya, aktifkan
jendela Object Inspector dan klik ganda sel di sebelah kanan
property Filter sehingga muncul kotak dialog Filter Editor. Isikan
sel pertama sebelah kiri dengan File Bitmap dan sel di sebelah
kanannya dengan *.bmp, kemudian tekan tombol OK.
Untuk mengedit komponen TChart, klik ganda komponen tersebut
sehingga muncul Gambar 1.1. Buat sebuah TChartSeries bertipe
Line dua dimensi dengan nama Series1. Klik subtab Panel dan
berikan gambar background Chart1 dengan menekan tombol
Browse.... Pilih RadioButton Stretch pada GroupBox Style dan
tandai CheckBox Inside. Ubah nilai beberapa property lain sesuai
kebutuhan.
Buka kembali prosedur BShowClick pada unit UotherDemo,
kemudian tambahkan kode program untuk menampilkan form
FBackImage melalui tombol BShow pada form FOtherDemo.
begin
FKeyboard.ShowModal else
FBackImage.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FBackImage)
Kode program pada event OnCreate form FBackImage hanya
digunakan untuk menambahkan data pada TChartSeries Series1
sebanyak 100 data dengan memanggil metode FillSampleValues.
Klik ganda sel di sebelah kanan event OnCreate, kemudian
ketikkan perintahnya.
procedure TFBackImage.FormCreate(Sender: TObject);
begin
end;

194

Prosedur Event OnClick pada Komponen TSpeedButton (BBrowse
dan BClear)
Komponen TSpeedButton BBrowse berfungsi untuk mencari
gambar yang akan mengisi background komponen TChart Chart1,
sedangkan komponen BClear berfungsi untuk menghapus gambar
background tersebut. Klik ganda pada masing-masing komponen
TSpeedButton tersebut sehingga pada jendela Code Editor muncul
dua buah prosedur, kemudian ketikkan kode program berikut ini.
procedure TFBackImage.BClearClick(Sender: TObject);
begin
Chart1.BackImage:= nil;
GBStyle.Enabled:= False;
CInside.Enabled:= False;
end;

procedure TFBackImage.BBrowseClick(Sender: TObject);
begin
if OpenDialog1.Execute then begin
Chart1.BackImage.LoadFromFile(OpenDialog1.FileName);
GBStyle.Enabled:= True;
CInside.Enabled:= True;
end;
end;

Pada prosedur BClearClick, gambar background grafik dihapus
dengan memberi nilai nil pada property BackImage komponen
TChart Chart1.
Sebuah kotak dialog Open akan muncul ketika pengguna
menekan komponen BBrowse, kemudian jika kotak dialog tersebut
dieksekusi (tombol Open ditekan) maka dengan metode
LoadFromFile, background grafik akan diisi dengan file gambar
yang telah dipilih. Property Enabled komponen TGroupBox
GBStyle dan komponen TCheckBox CInside diberi nilai True
sehingga dapat diakses kembali setelah pada prosedur
BClearClick dinonaktifkan.

Prosedur Event OnClick pada Komponen TRadioButton (RStretch,
RTile, dan RCenter)
Style gambar dapat diset dalam mode Stretch, Tile, dan Center.
Mode Stretch menyebabkan gambar mengambil ukuran dan
bentuk komponen TChart, artinya jika ukuran dan bentuk
komponen TChart diubah maka gambar akan ikut berubah.

195

Seluruh gambar background akan ditampilkan seukuran
komponen TChart meskipun ukuran gambar tersebut terlalu besar.
Dalam mode Tile, jika gambar background terlalu besar maka
gambar tersebut tidak seluruhnya mengisi komponen TChart,
tetapi ditampilkan apa adanya dimulai dari posisi kiri atas gambar
kemudian terpotong sampai pada batas bawah dan kanan grafik.
Pada mode Center, hanya posisi tengah gambar yang akan
memenuhi background grafik jika ukuran gambar tersebut terlalu
besar. Blok ketiga komponen tersebut, isi sel di sebelah kanan
event OnClick dengan nama prosedur RadioButtonClick, kemudian
tekan tombol Enter.
procedure TFBackImage.RadioButtonClick(Sender: TObject);
begin
if RStretch.Checked then
Chart1.BackImageMode := pbmStretch
else if RTile.Checked then
Chart1.BackImageMode := pbmTile
else Chart1.BackImageMode := pbmCenter;
end;

Jika pengguna memilih komponen TRadioButton RStretch maka
gambar background grafik ada dalam mode Stretch, demikian
seterusnya untuk komponen TRadioButton yang lain.

Prosedur Event OnClick pada Komponen TCheckBox (CInside)
Gambar background grafik dapat dibuat memenuhi seluruh
dinding komponen TChart atau hanya dalam kotak grafiknya saja,
bergantung pada nilai property BackImageInside-nya. Untuk
mengendalikan nilai property tersebut, gunakan nilai property
Checked komponen TCheckBox CInside. Klik ganda komponen
TCheckBox tersebut kemudian ketik kode programnya.
procedure TFBackImage.CInsideClick(Sender: TObject);
begin
Chart1.BackImageInside:= CInside.Checked;
end;

Property BackImageInside komponen TChart akan bernilai True
jika komponen TCheckBox CInside diberi tanda centang.

196

3.5 Digital Series
Seluruh sistem operasi dalam komputer sebenarnya menggunakan
kombinasi bilangan biner, yaitu 0 (nol) dan 1 (satu). Proses
tersebut kemudian dinamakan proses digital. Buat sebuah form
baru bernama FDigital dan simpan unitnya dengan nama UDigital.
Pada form tersebut, letakkan sebuah komponen TChart, sebuah
komponen TPanel, sebuah komponen TTimer, sebuah komponen
TspeedButton, dan 3 (tiga) buah komponen TCheckBox. Ubah
property komponen-komponen tersebut seperti tabel berikut ini.
TForm AutoSize True
Caption Digital Series Topic
Name FDigital
Standard)
Color clWhite
Height 72
Left 0

Name Panel1
Top 407
Width 540
TTimer (tab Enabled False
System)
Interval 1
Name Timer1
TSpeedButton Caption &Run

197

(tab Cursor crHandPoint
Additional).
Flat True
Pasang dalam
Panel1 Height 54
Left 424
Name BRun
Top 10
Width 102
TCheckBox Caption Last Values in Legend; View
(tab Standard) 3D; Z Order
sebanyak 3
Cheked True
buah. Pasang
dalam Panel Left 15
Name CLastValues; CView; COrder
Top 10; 30; 50

Biarkan nilai property yang lain sesuai default-nya. Pada
komponen Tchart, buat empat buah TChartSeries bertipe line tiga
dimensi, kemudian beri judul yang berbeda sebagai nama masing-
masing TChartSeries, dengan menekan tombol Title... pada subtab
Series (Gambar 1.1). Klik tab Series, kemudian pilih subtab
Format seperti Gambar 2.3. Pada GroupBox Line Mode, beri tanda
centang pada CheckBox Stairs untuk mengubah TChartSeries
dalam bentuk seperti „tangga‰ (umumnya grafik digital). Ubah
property komponen TChart yang lain sesuai kebutuhan.
Untuk memanggil form FDigital, tambahkan beberapa kode pada
prosedur event OnClick komponen TSpeedButton BShow
(BShowClick). Prosedur tersebut sekarang menjadi seperti berikut:
begin
FBackImage.ShowModal
end else begin

198

if RDigital.Checked then
FDigital.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FDigital)
Prosedur event OnCreate form hanya berisi inisialisasi beberapa
property. Klik ganda sel di sebelah kanan event OnCreate form,
kemudian ketikkan kode program berikut pada prosedur yang
muncul.
procedure TFDigital.FormCreate(Sender: TObject);
begin
Chart1.ApplyZOrder:= COrder.Checked;
Chart1.Legend.Inverted:= True;
end;

Property ApplyZOrder digunakan untuk mengontrol ketika
beberapa TChartSeries pada komponen TChart yang sama harus
ditampilkan independen dalam ruang Z yang berbeda. Property
tersebut valid jika grafik ditampilkan 3D dan mempunyai lebih dari
satu TChartSeries. Pemberian nilai True pada property Inverted
subtab Legend untuk membalikkan urutan legend grafik dari
TChartSeries berindeks terbesar.

Prosedur Event OnTimer pada Komponen TTimer (Timer1)
Untuk simulasi operasi, data sinyal digital berupa data acak
dengan range 2 data (0 dan 1) diplot pada keempat TChartSeries
dengan menggunakan komponen TTimer Timer1. Klik ganda
komponen tersebut sehingga pada jendela Code Editor muncul
sebuah prosedur.
procedure TFDigital.Timer1Timer(Sender: TObject);
var
GainData: Longint;
begin
for GainData:= 0 to Chart1.SeriesCount-1 do
with Chart1.Series[GainData] do
Add(2*GainData+Random(2), '', clTeeColor);

with Chart1.BottomAxis do begin
Automatic := False;
Maximum := Series1.XValues.Last;
Minimum := Maximum - 100;
end;
end;

199

Variabel GainData berguna untuk menaikkan TChartSeries pada
suatu posisi sehingga keempat TChartSeries tersebut tidak saling
tumpang tindih. Plot data pada masing-masing TChartSeries
menggunakan metode Add dengan syntax:
function Add(Const AValue:Double; Const ALabel:String;
AColor:TColor):Longint; virtual;

Metode Add digunakan untuk menambahkan data pada
TChartSeries jika nilai sumbu horisontal grafik (x) secara otomatis
ditentukan ketika nilai sumbu vertikal (y) akan diplot. Varibel
ALabel dan AColor merupakan parameter pilihan seperti pada
metode AddXY. Nilai Y grafik untuk TChartSeries kedua bergeser
secara vertikal sebanyak 2 (dua) kalinya, sedangkan yang ketiga
bergeser 4 (empat) kalinya dan yang keempat bergeser sebanyak
6 (enam) kalinya.
Kode program selanjutnya adalah untuk menggeser grafik ke kiri
setiap kali ada data yang diplot dalam TChartSeries. Nilai skala
maksimum sumbu bawah grafik mengambil nilai terakhir yang
telah diplot dalam TChartSeries. Range sumbu horisontal grafik
yang ingin ditampilkan setiap kali ada plot data adalah 100 data.
Kode program ini dapat ditulis dalam event OnAfterAdd pada
keempat TChartSeries seperti pada pembuatan aplikasi Sistem
Akuisisi Data.

Prosedur Event OnClick pada Komponen TSpeedButton (BRun)
Pada saat desain form, property Enabled komponen TTimer
Timer1 bernilai False sehingga untuk mengendalikannya
dimanfaatkanlah komponen TSpeedButton BRun. Klik ganda sel di
sebelah kanan event OnClick komponen tersebut, kemudian ketik
kode programnya.
procedure TFDigital.BRunClick(Sender: TObject);
begin
if BRun.Caption = '&Run' then begin
BRun.Caption:= 'Stop';
Timer1.Enabled:= True;
end else begin
BRun.Caption:= '&Run';
Timer1.Enabled:= False;
end
end;

200

Selain untuk mengaktifkan komponen TTimer Timer1, komponen
TSpeedButton BRun juga digunakan untuk menonaktifkann
berdasarkan nilai property Caption komponen TSpeedButton
tersebut.

Prosedur Event OnClick pada Komponen TCheckBox
(CLastValues, CView, dan COrder)
Ketiga komponen TCheckBox tersebut berfungsi untuk mengubah
beberapa property komponen TChart, yaitu property LegendStyle
pada subtab Legend, property 3D pada subtab 3D, dan property
ApplyZOrder. Klik ganda masing-masing komponen TCheckBox,
sehingga muncul tiga buah prosedur. Lengkapi ketiga prosedur
tersebut sehingga menjadi seperti berikut ini
procedure TFDigital.CLastValuesClick(Sender: TObject);
begin
if CLastValues.Checked then
Chart1.Legend.LegendStyle:= lsLastValues
else Chart1.Legend.LegendStyle:= lsAuto;
end;

procedure TFDigital.CViewClick(Sender: TObject);
begin
Chart1.View3D:= CView.Checked;
end;

procedure TFDigital.COrderClick(Sender: TObject);
begin
Chart1.ApplyZOrder:= COrder.Checked;
Chart1.Repaint;
end;

Property LegendStyle berguna untuk menentukan materi mana
yang akan ditampilkan dalam legend grafik. Jika diberi nilai Last
Values maka akan ditampilkan nilai terakhir dari semua
TChartSeries yang aktif. Jika diberi nilai Automatic maka secara
otomatis nilai property Title TChartSeries akan ditampilkan dalam
legend grafik. Metode Repaint menyebabkan Chart induk di-repaint
(digambar ulang).

201

Prosedur Event OnGetLegendTex pada Komponen TChart
(Chart1)
Event OnGetLegendText digunakan untuk mengganti penulisan
teks pada legend grafik. Klik ganda sel di sebelah kanan event
OnGetLegendText komponen TChart Chart1, kemudian ketikkan
kodenya.
procedure TFDigital.Chart1GetLegendText(Sender:
TCustomAxisPanel; LegendStyle: TLegendStyle; Index:
Integer; var LegendText: String);
begin
if LegendStyle = lsLastValues then
LegendText:= LegendText+' --> '+Chart1.Series[Index].Title;
end;

Teks legend akan diganti jika komponen TCheckBox CLastValues
diberi tanda centang (atau property LegendStyle komponen
TChart bernilai lsLastValues).

3.6 Mengukur Kecepatan Plot Data pada
TChartSeries Bertipe Fast Line
Plot data pada TChartSeries bertipe Fast Line lebih cepat
dibandingkan dengan tipe Line. Untuk mnegukur kecepatannya,
buat sebuah form baru dan simpan dalam unit UFastLine.
Selanjutnya, pasang sebuah komponen TChart, sebuah komponen
TPanel, sebuah komponen TSpeedButton, dan 3 (tiga) buah
komponen TCheckBox. Ubah property komponen-komponen
tersebut seperti tabel berikut ini.
Nama
Nama Object Nilai
Property
TForm AutoSize True
Caption Fast Line Series Topic
Name FFastLine


202

Standard)
Color clWhite
Height 40
Left 0
Name Panel1
Top 407
Width 540
TSpeedButton Caption Speed Test
(tab
Additional). Cursor crHandPoint
Pasang dalam Flat True
Panel1
Height 22
Left 392
Name BSpeed
Top 10
Width 134
TCheckBox Caption &Buffered Display; Draw
(tab Standard) &Axis; &Clip Points
sebanyak 3
Left 15; 150; 250
buah. Pasang
dalam Panel Name CBuffered; CDraw; CClip
Top 15

Biarkan nilai property yang lain sesuai default-nya. Klik ganda
komponen TChart untuk mengedit property-nya. Klik tab Chart
dan pilih subtab Series, lalu buat dua buah TChartSeries bertipe
Fast Line dua dimensi dengan menekan tombol Add....
Selanjutnya, pilih subtab General, hilangkan tanda centang pada
CheckBox Clip Points. Pada subtab Axis, hilangkan tanda centang
pada CheckBox Show Axis sehingga sumbu grafik tidak

203

ditampilkan. Property yang lain dapat diubah sesuai kebutuhan
Anda.
Form FFastLine ditampilkan melalui form FOtherDemo dengan
menekan komponen TSpeedButton BShow di mana komponen
TGroupBox GBFeatures telah ditampilkan dan komponen
TRadioButton RFastLine dipilih. Buka kembali prosedur
BShowClick pada unit UOtherDemo untuk menambahkan
beberapa kode seperti berikut ini.
begin
end else begin
FDigital.ShowModal;
if RFastLine.Checked then
FFastLine.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FFastLine)
Inisialiasasibeberapa variabel, plot data random dalam
TChartSeries dilakukan ketika form dibangun melalui prosedur
event OnCreate. Klik ganda sel di sebelah event tersebut,
kemudian ketik perintah-perintahnya.
procedure TFFastLine.FormCreate(Sender: TObject);
var
DataX, DataRandom: Longint;
begin
TeeEraseBack:= False;
Chart1.BufferedDisplay:= False;
TeeDefaultCapacity:= 2000;

for DataX:= 1 to 1000 do
begin
DataRandom:= Random(Abs(500-DataX))-(Abs(500-DataX) div 2);
Series1.Add(DataX+DataRandom, '', clTeeColor);
Series2.Add(1000-DataX+DataRandom, '', clTeeColor);
end;
end;

Variabel global TeeEraseBack berfungsi untuk menangani pesan
(message) WM_ERASEBACK. Jika bernilai False, akan mencegah

204

TeeChart menghapus latar belakang panel ketika ada perubahan
ukuran grafik. Property BufferedDisplay secara default bernilai
True untuk mencegah kelap-kelip ketika grafik yang mempunyai
banyak titik diplot kembali sehingga kedipan tersebut hanya terjadi
pada daerah kotak grafik. Variabel global TeeDefaultCapacity
merupakan kapasitas default untuk object Tlist. Komponen TChart
selalu menggunakan variabel ini untuk menginisialisasi kapasitas
TList. Secara default, ia bernilai 0 dan jika diset lebih besar lagi
dapat meningkatkan kecepatan ketika memplot data pada
TChartSeries.
Data yang akan diplot pada masing-masing TChartSeries adalah
sebanyak 1000 data. Agar data random yang diplot tersebut
terlihat menyempit ke tengah dan melebar ke kedua sisinya, buat
suatu fungsi pada variabel DataRandom. Penambahan variabel
DataRandom dengan nilai DataX dalam fungsi Add pada
TChartSeries Series1 menyebabkan TChartSeries tersebut diplot
diagonal dalam kotak grafik. TChartSeries Series2 diplot terbalik
dari Series2 sehingga pada posisi tengah (titik 500) keduanya
saling berpotongan.

Prosedur Event OnClick pada Komponen TSpeedButton (BSpeed)
Untuk mengukur kecepatan plot data pada TChartSeries,
dilakukan proses pembesaran dan pengecilan grafik. Klik ganda
sel di sebelah kanan event OnClick komponen TSpeedButton
BSpeed sehingga muncul suatu prosedur pada jendela Code
Editor.
procedure TFFastLine.BSpeedClick(Sender: TObject);
var
Time1, Time2, Zoom: Longint;
begin
Screen.Cursor:= crHourGlass;
try
Chart1.AnimatedZoom:= False;
Time1:= GetTickCount;
for Zoom:= 1 to 30 do Chart1.ZoomPercent(105);
for Zoom:= 1 to 30 do Chart1.ZoomPercent(95);
Time2:= GetTickCount;
Chart1.AnimatedZoom:= True;
Chart1.UndoZoom;
finally
Screen.Cursor:= crDefault;
end;

205

Showmessage('Waktu untuk mem-plot 2000 data'+#13+
'Sebanyak 61 kali : '+#13+
IntToStr(Time2-Time1)+' milidetik.');
end;

Waktu pertama kalinya plot data disimpan dalam variabel Time1
dengan memanggil metode GetTickCount, kemudian proses
pembesaran grafik dilakukan sebanyak 30 kali yang disusul
dengan proses pengecilan grafik sebanyak 30 kali. Waktu setelah
proses zoom tersebut disimpan dalam variabel Time2. Selanjutnya
grafik dikembalikan pada keadaan awal dengan memanggil
UndoZoom. Jadi, proses plot ulang data dilakukan sebanyak 61
kali, yaitu 60 kali untuk proses zoom dan sekali proses UndoZoom.
Oleh karena masing-masing TChartSeries mempunyai 1.000 data
maka data yang diplot pada keduanya adalah 2.000 data. Waktu
seluruh proses (dalam milidetik) kemudian ditampilkan pada suatu
pesan yang segera muncul ketika proses tersebut berakhir. Selama
proses plot data berlangsung, kursor berbentuk Hour-Glass dan
jika telah selesai bentuknya kembali pada Default.

Prosedur Event OnClick pada Komponen TCheckBox (CBuffered,
CDraw, dan CClip)
Kecepatan plot data dalam TChartSeries juga bergantung pada
nilai property BufferedDisplay, ada/tidaknya skala sumbu grafik
(property AxisVisible), dan nilai property ClipPoints komponen
TChart. Gunakan ketiga komponen TCheckBox yang terpasang
dalam form untuk mengendalikan nilai property komponen TChart
tersebut. Klik ganda masing-masing komponen TCheckBox
sehingga pada jendela Code Editor muncul tiga buah prosedur.
procedure TFFastLine.CBufferedClick(Sender: TObject);
begin
Chart1.BufferedDisplay:= CBuffered.Checked;
end;

procedure TFFastLine.CDrawClick(Sender: TObject);
begin
Chart1.AxisVisible:= CDraw.Checked;
end;

procedure TFFastLine.CClipClick(Sender: TObject);
begin
Chart1.ClipPoints:= CClip.Checked;
end;

206

Kecepatan plot data semakin lambat jika komponen-komponen
TCheckBox tersebut dicentang.

3.7 Menghubungkan Komponen TDBChart
dengan Komponen TTable
Suatu aplikasi grafik berbasis database sebenarnya lebih mudah
dibuat dengan komponen TDBChart. Data yang diplot pada
TChartSeries dapat diset melalui property DataSource-nya.
Dataset dapat berupa komponen TQuery maupun komponen
TTable. Pada bagian ini TChartSeries komponen TDBChart akan
dihubungkan dengan komponen TTable. Buat sebuah form dengan
nama FLingked dan simpan unit-nya dengan nama ULingked.
Pada form tersebut, letakkan sebuah komponen TDBChart, sebuah
komponen TPanel, sebuah komponen TDBNavigator, 2 (dua) buah
komponen TTable, 2 (dua) buah komponen TDataSource, dan 2
(dua) buah komponen TDBGrid. Ubah property komponen-
komponen tersebut seperti tabel berikut ini. Untuk property yang
mempunyai nilai lebih dari satu, masing-masing nilainya
dipisahkan oleh tanda titik koma. Sesuaikan berdasarkan urutan
property Name.
TForm AutoSize True

Caption Linked Table Topic
Name FLinked
TPanel BevelOuter bvNone
(tab Standard) Color clWhite
Height 305
Left 0
Name Panel1

207

Top 0
Width 540
Ttable (tab BDE) Active True
sebanyak 2 buah
DatabaseName D:ProgramDatabase

IndexName (dikosongkan); CusNo
MasterFields (dikosongkan); CusNo
MasterSource (dikosongkan);
DataSource1
Name Table1; Table2
TableName customer.db; orders.db

TdataSource (tab DataSet Table1; Table2
Data Access)
Name DataSource1;
sebanyak 2 buah
DataSource2
TDBNavigator (tab DataSource DataSource1
Data Controls).
Flat True
Pasang dalam
Panel1 Height 25

Left 8

Top 8

VisibleButton hanya nbFirst; nbPrior;
nbNext; nbLast yang
bernilai True

TDBGrid Ctl3D False;
(tab Data Controls) DataSource DataSource1;
sebanyak 2 buah DataSource2

pasang dalam Height 120
Panel1 Left 8
Name DBGrid1; DBGrid2
Options.dgEditing False; True

208

Options.dgIndicator False

Options.dgRowLine False

Options.dgRowSelect True; False

Top 41; 172

Width 521

Biarkan property yang lain sesuai dengan nilai default-nya. Pada
komponen TDBChart, buat sebuah TChartSeries bertipe Bar tiga
dimensi. Klik tab Series, kemudian pilih subtab Format seperti
terlihat pada Gambar 3.1.

Gambar 3.1 Kotak dialog Editing Chart untuk subtab Format bertipe Bar

Parameter-parameter yang terdapat dalam subtab Format adalah:
1. ComboBox Style: menentukan bentuk bar yang digunakan
untuk menggambar TChartSeries.

209

2. CheckBox Color Each: mengendalikan warna yang akan
digambar pada titik TChartSeries. Jika ditandai maka setiap
titik TChartSeries akan diberi warna berbeda, jika sebaliknya
maka warna setiap titik TChartSeries sesuai dengan warna
yang dipilih dengan menekan tombol Color.
3. Tombol Color: untuk mencari warna yang akan diberikan pada
setiap titik TChartSeries jika CheckBox Color Each tidak
ditandai.
4. GroupBox Multi Bar: akan memberikan efek jika dalam
TDBChart yang sama mempunyai lebih dari satu TChartSeries.
5. CheckBox Use Origin: jika bernilai False maka nilai minimum
dari daftar nilai akan digunakan sebagai nilai awal sumbu
vertikal. Jika sebaliknya maka property YOrigin akan dipakai
sebagai titik awal sumbu vertikal.
6. Isian di sebelah Use Origin (property YOrigin): nilai yang
digunakan sebagai nilai awal sumbu vertikal grafik. Berlaku
jika CheckBox Use Origin dicentang.
7. SpinEdit % Bar Width: menentukan persentase lebar total bar
yang digunakan.
8. SpinEdit % Bar Offset: mengindikasikan penempatan bar
dalam persen dari ukuran bar.
9. CheckBox Dark Bar 3D Sides: mengontrol apakah sisi bar
akan diisi dengan warna bayangan atau tidak. Akan
memberikan efek jika grafik dalam bentuk 3D.
10. CheckBox Bar Side Margins: mengontrol apakah bar yang
ditampilkan pertama dan terakhir akan dipisahkan dari kotak
grafik.
11. CheckBox Auto Mark Position: mengontrol apakah Mark
TChartSeries akan direposisi jika terdapat mark yang saling
tumpang tindih.
Selanjutnya, klik subtab Data Source untuk menetapkan dataset
yang akan digunakan TChartSeries. Pilih Data Set, kemudian pilih
Tabel2 pada ComboBox Dataset. ComboBox Labels digunakan
untuk mengeset nilai x grafik. Pilih field SaleDate dari daftar fields

210

komponen Table2 dan pilih field AmountPaid sebagai nilai y grafik
pada ComboBox Bar sehingga sekarang subtab Data Source
menjadi seperti Gambar 3.2.

Gambar 3.2 Kotak dialog Editing Chart untuk subtab Data Source

Form FLinked ditampilkan dengan menekan komponen
TSpeedButton BShow yang terpasang pada form FOtherDemo di
mana komponen TGroupBox GBFeatures telah ditampilkan dan
komponen TRadioButton RLingked dipilih. Buka kembali prosedur
BShowClick pada unit UotherDemo, kemudian tambahkan kode
program untuk menampilkan form FLingked.
begin
end else begin
FDigital.ShowModal;
if RLinked.Checked then

211

FLinked.ShowModal;
end;
end;

Pastikan bahwa di folder D:ProgramDatabase telah ada file
database bernama customer.db, order.db, dan items.db. File
database tersebut disertakan dalam CD.

Prosedur Event OnDataChange pada Komponen TDataSource
(DataSource1)
Event ini terjadi ketika ada perubahan data pada dataset karena
proses scrolling data atau edit data. Klik ganda sel di sebelah
kanan event OnDataChange pada komponen TDataSource
DataSource1.
procedure TFLinked.DataSource1DataChange(Sender: TObject;
Field: TField);
begin
DBChart1.CheckDataSource(Series1);
end;

Metode CheckDataSource akan me-refresh semua data pada
TchartSeries, baik dari database Query, Table, atau sumber data
TChartSeries lain. Metode ini dapat dipanggil secara rutin jika kita
ingin menambahkan atau memodifikasi data yang ditampilkan
secara realtime pada TChartSeries. Jadi, data yang diplot pada
TChartSeries Series1 akan berubah ketika ada perubahan data
pada dataset Tabel2.

3.8 Membuat Grafik Mini yang Resizeable dan
Garis Divider
Ukuran komponen TChart dapat diubah sesuai perubahan ukuran
form induknya. Garis divider merupakan garis pembatas antara
titik baru dan titik lama yang diplot dalam TChartSeries. Buat
sebuah form baru dengan nama FMini dan simpan dalam unit
UMini. Pada form tersebut, tambahkan sebuah komponen TTimer,
2 (dua) buah komponen TPanel dan 4 buah komponen TChart.
Ubah property-nya seperti tabel berikut ini. Untuk property yang
mempunyai nilai lebih dari satu, nilai masing-masing dipisahkan

212

oleh tanda titik koma. Sesuaikan berdasarkan urutan property
Name.
TForm BorderStyle bsSizeToolWin
Caption Mini Small Chart Topic
Height 148
Name FMini
Width 202
System)
Interval 1
Name Timer1

TPanel (tab Align alLeft; alClient
Standard)
Color clWhite
sebanyak 2
buah Name Panel1; Panel2
Width 97
TChart (tab Align alTop; alClient; alTop;
Additional) alClient
sebanyak 2
Height 56
buah. Pasang
pada Panel1, Name Chart1; Chart2; Chart3;
sisanya pada Chart4
Panel2

Untuk mengedit komponen TChart, klik ganda komponen tersebut
kemudian buat sebuah TChartSeries bertipe Bar 2 Dimensi dengan
nama BarSeries1 pada Chart1, dua buah TChartSeries bertipe Line
3 Dimensi dengan nama LineSeries1, dan LineSeries2 pada
Chart2. Kedua komponen TChart tersebut terpasang pada Panel1.
Pada Chart3, buat sebuah TChartSeries bertipe Pie 3 Dimensi

213

dengan nama PieSeries1, sedangkan untuk Chart4, buat sebuah
TChartSeries bertipe Line 2 Dimensi dengan nama LineSeries3 dan
sebuah TChartSeries bertipe Area 2 Dimensi dengan nama
AreaSeries1.
Klik subtab Axis dan hilangkan tanda centang pada CheckBox
Show Axis untuk semua komponen TChart. Property yang lain
dapat diubah sesuai kebutuhan.
Sebelum membuat prosedur dalam unit ini, buka kembali unit
UotherDemo, kemudian tambahkan beberapa kode pada prosedur
BShowClick untuk menampilkan form FMini melalui form
FOtherDemo.
begin
end else begin
FDigital.ShowModal;
FLinked.ShowModal;
if RMini.Checked then
FMini.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FMini)
Nilai beberapa variabel dan plot data pada TChartSeries dilakukan
dalam prosedur event OnCreate. Deklarasikan variabel
ValueXChart2 dan ValueXChart4 bertipe Longint pada bagian
Public unit. Variabel pertama digunakan untuk menggambar garis
divider vertikal pada komponen TChart Chart2 dan variabel yang
kedua pada Chart4. Banyaknya data yang akan diplot pada
beberapa TChartSeries berdasarkan konstanta NumData. Beri nilai
30 pada konstanta tersebut dan ketikkan tepat di bawah kompiler
seperti berikut ini.
implementation

{$R *.dfm}

214

Const NumData = 30;

Kemudian klik ganda sel di sebelah kanan event OnCreate form
FMini dan tulis kode programnya.
procedure TFMini.FormCreate(Sender: TObject);
begin
ValueXChart2:= -1;
ValueXChart4:= NumData div 2;
BarSeries1.FillSampleValues(6);
PieSeries1.FillSampleValues(8);
LineSeries1.FillSampleValues(NumData);
AreaSeries1.FillSampleValues(NumData);
end;

Posisi awal garis divider vertikal pada komponen TChart Chart2
berada di luar kotak grafik, sedangkan pada Chart4 berada tepat di
tengah karena banyaknya data yang diplot pada TChartSeries
AreaSeries1 dan LineSeries3 berdasarkan nilai konstanta
NumData (30 data). Metode FillSampleValues akan memplot nilai
acak pada suatu TChartSeries dengan rentang data sebanyak
angka dalam tanda kurung.

Prosedur Event OnResize pada TForm (FMini)
Kode program yang dideklarasikan pada event OnResize akan
segera dijalankan ketika ukuran form diubah. Klik ganda sel di
sebelah kanan event tersebut, kemudian ketikkan kodenya.
procedure TFMini.FormResize(Sender: TObject);
begin
Panel1.Width:= ClientWidth div 2;
Chart1.Height:= ClientHeight div 2;
Chart3.Height:= ClientHeight div 2;
end;

Property Align komponen TPanel Panel1 bernilai alLeft sehingga
jika form di-resize maka property Height akan mengikuti
perubahan ukuran form. Property Width-nya ditentukan sebagai
setengah dari perubahan nilai property ClientWidth form. Ukuran
komponen TPanel Panel2 secara otomatis akan mengikuti
perubahan ukuran form dan komponen Panel1 karena property
Align-nya bernilai alClient, begitu juga dengan ukuran komponen
TChart Chart2 yang akan mengikuti perubahan ukuran Panel1 dan
komponen Chart1. Ukuran Chart4 juga akan mengikuti perubahan

215

ukuran Panel2 dan komponen Chart3 karena property Align kedua
komponen TChart tersebut (Chart2 dan Chart4) bernilai alClient.
Pada komponen TChart Chart1 dan Chart3, nilai property Align-
nya adalah alTop dan perubahan ukuran Panel1 dan Panel2 hanya
akan mengubah lebar (property Width) kedua komponen TChart
tersebut sementara tingginya (property Height) tetap. Untuk
menyesuaikan ukurannya, property Height komponen TChart
Chart1 ditentukan sebagai setengah dari nilai property ClientHeight
komponen TPanel Panel1 dan property Height komponen Chart3
juga ditentukan sebagai setengah dari nilai property ClientHeight
komponen Panel2.

Prosedur Event OnClose dan OnShow pada TForm (FMini)
Event OnClose terjadi ketika form FMini ditutup, sedangkan event
OnShow akan dijalankan setiap kali form ditampilkan. Klik ganda
sel di sebelah kanan masing-masing event sehingga pada jendela
Code Editor muncul dua buah prosedur.
procedure TFMini.FormClose(Sender: TObject; var Action:
TCloseAction);
begin
end;

procedure TFMini.FormShow(Sender: TObject);
begin
end;

Saat desain property Enabled komponen TTimer Timer1 bernilai
False, komponen TTimer tersebut akan diaktifkan setiap kali form
ditampilkan dan dinonaktifkan kembali jika form ditutup.

Animasi plot data pada TChartSeries dilakukan dalam event
OnTimer komponen TTimer Timer1. Klik ganda komponen TTimer
tersebut, kemudian buat sebuah prosedur lokal RefreshChart pada
prosedur yang muncul.
procedure TFMini.Timer1Timer(Sender: TObject);

procedure RefreshChart(AOwner: TChart;

216

var ValueXChart: Longint);
var
a: Longint;
LastValue: Double;
begin
Inc(ValueXChart);
if ValueXChart >= NumData then ValueXChart:= 0;
for a:= 0 to AOwner.SeriesCount-1 do
begin
if ValueXChart = 0 then
begin
with AOwner do begin
LeftAxis.Automatic:= True;
LeftAxis.SetMinMax(MinYValue(LeftAxis),
MaxYValue(LeftAxis));
end;
LastValue:= AOwner.Series[a].YValues.Last;
end else
LastValue:= AOwner.Series[a].YValue[ValueXChart-1];

AOwner.Series[a].YValue[ValueXChart]:= LastValue +
Random(ChartSamplesMax) -
(ChartSamplesMax div 2);
end;
end;
var
DataBar: Longint;
begin
RefreshChart(Chart2, ValueXChart2);
RefreshChart(Chart4, ValueXChart4);

with PieSeries1 do
RotationAngle:= (RotationAngle+1) mod 359;

with BarSeries1 do begin
DataBar:= Random(Count);
YValue[DataBar]:= YValue[DataBar]*(80.0+Random(40))/100.0;
end;
end;

Prosedur lokal RefreshChart berguna untuk mengubah nilai suatu
TChartSeries setiap detik berdasarkan posisi nilai x-nya (variabel
ValueXChart). Setiap detik nilai variabel ValueXChart akan
bertambah 1 (satu) melalui prosedur Inc. Nilai variabel tersebut
dikembalikan pada nilai 0 (nol) jika telah sama dengan banyaknya
data (konstanta NumData). Jika posisi x grafik kembali ke awal
(bernilai 0) maka dengan metode SetMinMax, nilai skala minimum
dan maksimum sumbu kiri grafik diisi dengan nilai minimum dan
maksimum sumbu kiri grafik tersebut. Nilai y yang terakhir
disimpan dalam variabel LastValue. Jika posisi x grafik tidak 0
(nol) maka nilai variabel LastValue sama dengan nilai y pada

217

posisi x saat itu. Nilai variabel LastValue tersebut ditambah dengan
suatu nilai acak menjadi nilai y grafik pada posisi x yang sekarang.
Seluruh TChartSeries yang terdapat pada komponen TChart
Chart2 dan Chart4 akan diplot dengan prosedur lokal tersebut, di
mana nilai x untuk TChartSeries pada Chart2 berasal dari nilai
variabel ValueXChart2 sedangkan pada Chart4 berasal dari nilai
variabel ValueXChart4. Dengan kata lain, variabel ValueXChart
pada prosedur lokal RefreshChart diganti dengan ValueXChart2
atau ValueXChart4, bergantung pada nilai variabel AOwner-nya.
TChartSeries bertipe Pie yang terdapat dalam Chart1 akan terus
berputar dengan sudut putar sama dengan nilai sisa pembagian
sudut putar saat itu (setelah ditambah 1 derajat) terhadap 359
derajat. Nilai y yang diplot pada TChartSeries bertipe bar dan
berasal dari nilai y saat itu dikalikan dengan 80% nilai acak antara
0 sampai 39.

Prosedur Event OnAfterDrawValue pada TChartSeries Komponen
TChart (LineSeries2 dan LineSeries3)
Setelah data diplot pada TChartSeries LineSeries2 dan
LineSeries3, sebuah garis divider vertikal segera digambar pada
komponen TChart di mana kedua TChartSeries tersebut berada
(Chart2 dan Chart4). Klik ganda sel di sebelah kanan event
OnAfterDrawValue pada masing-masing TChartSeries tersebut.
procedure TFMini.LineSeries2AfterDrawValues(Sender: TObject);
begin
if ValueXChart2 >= 0 then
Pen.Color:= clRed;
DoVertLine(Series[0].CalcXPos(ValueXChart2),
ChartRect.Top+1,
ChartRect.Bottom-1);
end;
end;

procedure TFMini.LineSeries3AfterDrawValues(Sender: TObject);
begin
if ValueXChart4 >= 0 then
with Chart4,Canvas do begin
Pen.Color:= clBlue;
DoVertLine(Series[0].CalcXPos(ValueXChart4),
ChartRect.Top+1,
ChartRect.Bottom-1);
end;

218

end;

Garis divider vertikal berwarna merah digambar pada TChartSeries
LineSeries2 dan berwarna biru pada TChartSeries LineSeries3
dengan metode DoVertLine. Metode DoVertLine ditulis dengan
syntax:
procedure DoVertLine (X,Y0,Y1:Integer); virtual; abstract;

Metode ini akan menggambar garis vertikal dari Y0 sampai Y1
pada posisi horisontal X. Variabel Y0 merupakan posisi atas kotak
grafik ditambah 1 pixel; variabel Y1 diisi dari nilai posisi bawah
kotak grafik setelah dikurangi 1 pixel; dan posisi horisontal X
diperoleh menggunakan metode CalXPos berdasarkan nilai x
masing-masing TChartSeries.

3.9 Membuat Halaman Grafik
TChartSeries yang telah diplot dapat dibagi dalam beberapa
halaman bergantung jumlah total data dan jumlah data per
halaman. Halaman-halaman tersebut kemudian dapat ditelusuri
dengan metode-metode scroll grafik. Buat sebuah form baru
dengan nama FPaging dan simpan dalam unit UPaging. Pada form
tersebut, letakkan sebuah komponen TChart, sebuah komponen
TPanel, sebuah komponen TSpinEdit, sebuah komponen
TCheckBox, 2 (dua) buah komponen TLabel, dan 4 (empat) buah
komponen TSpeedButton. Ubah property komponen-komponen
tersebut seperti tabel berikut ini. Untuk property yang mempunyai
nilai lebih dari satu, masing-masing nilai dipisahkan oleh tanda
titik koma. Sesuaikan berdasarkan urutan property Name.
TForm AutoSize True

Caption Linked Table Topic

Name FLinked

219

Standard)
Color clWhite
Height 90

Left 0

Name Panel1
Top 407
Width 540
TSpinEdit (tab Left 235
Samples).
MaxValue 100000
Pasang pada
Panel1 MinValue 0

Name SEPaging

Top 8
TCheckBox Caption Scale Last Page
(tab Standard).
Left 290
Pasang dalam
Panel1 Name CScale
Top 10
Tlabel (tab Caption Points Per Page :; (bebas)
Standard)
sebanyak 2 Left 131; 181
buah. Pasang
Name Label1; LCurrent
dalam Panel1
Top 11; 38
Transparent True
TSpeedButton Caption &First; &Previous; &Next; &Last
(tab Additional)
sebanyak 4 Flat True
buah. Pasang
Glyph Klik ganda sel di sebelah kanan
dalam Panel1
property ini, load gambar
BFirst.bmp; BPrevious.bmp;
BNext.bmp; BLast.bmp

220

Height 22
Left 69; 165; 261; 357
Name BFirst; BPrevious; BNext; BLast

Top 58

Width 88

Biarkan nilai property yang lain sesuai default-nya. Untuk
komponen TChart, klik ganda komponen tersebut kemudian pilih
subtab Series pada tab Chart. Tekan tombol Add... untuk
menambahkan sebuah TChartSeries bertipe Line 2 Dimensi dan
beri nama Series1. Ubah property yang lain sesuai dengan
kebutuhan.
Form FPaging akan ditampilkan melalui form FOtherDemo ketika
pengguna menekan komponen TSpeedButton BShow di mana
komponen TGroupBox GBFeatures telah ditampilkan dan
komponen TRadioButton RPaging dipilih. Klik ganda komponen
TSpeedButton tersebut dan tambahkan kode untuk menampilkan
form FPaging pada prosedur BShowClick.
begin
end else begin
FDigital.ShowModal;
FLinked.ShowModal;
FMini.ShowModal;
if RPaging.Checked then
FPaging.ShowModal;
end;
end;

221

Prosedur Event OnCreate pada TForm (FPaging)
Event OnCreate form hanya akan dijalankan sekali saat form
dibangun. Klik ganda sel di sebelah kanan event tersebut,
kemudian ketikkan kode programnya.
procedure TFPaging.FormCreate(Sender: TObject);
begin
SEPaging.Value:= 18;
Chart1PageChange(Chart1);
end;

Data sebanyak 100 diplot dalam TChartSeries dengan metode
FillSampleValues. Property Value komponen TSpinEdit SEPaging
diinisialisasi dengan nilai 18. Nilai property tersebut menunjukkan
banyaknya data per halaman sebagai pengganti SpinEdit Points
per Page pada subtab Paging (property MaxPointsPerPage) yang
nilainya dapat diubah secara run-time. Prosedur
Chart1PageChange merupakan prosedur event OnPageChange
pada komponen TChart Chart1.

Prosedur Event OnPageChange pada Komponen TChart (Chart1)
Event OnPageChange terjadi ketika property Page komponen
TChart telah diubah dan sebelum halaman grafik tersebut berubah.
Property MaxPointsPerPage (SpinEdit Points per Page pada subtab
Paging) harus lebih besar dari 0 (nol) untuk mengaktifkan
mekanisme pemberian nomor halaman secara otomatis. Klik
ganda sel di sebelah kanan event tersebut.
procedure TFPaging.Chart1PageChange(Sender: TObject);
begin
Chart1.UndoZoom;
LCurrent.Caption:= 'Current/Total : '+
IntToStr(Chart1.Page)+'/'+IntToStr(Chart1.NumPages);
BFirst.Enabled:= BPrevious.Enabled;
BPrevious.Enabled:= Chart1.Page > 1;
BNext.Enabled:= Chart1.Page < Chart1.NumPages;
BLast.Enabled:= BNext.Enabled;
end;

Untuk menghitung banyaknya halaman grafik dengan benar,
komponen TChart harus tidak dalam keadaan
diperbesar/diperkecil, jadi coba panggil metode UndoZoom.

222

Informasi suatu halaman terhadap total halaman grafik
ditampilkan melalui property Caption komponen TLabel. Property
Page komponen TChart mengeset halaman grafik saat ini,
sedangkan property NumPages menunjukkan total halaman grafik.
Untuk grafik yang mempunyai halaman lebih dari satu, komponen
TSpeedButton BFirst dapat diakses tergantung aktif/tidaknya
komponen BPrevious. Komponen BPrevious akan aktif jika
halaman grafik yang sekarang ditampilkan bukan halaman
pertama. Dan komponen BNext akan aktif jika halaman grafik
yang sekarang ditampilkan bukan halaman terakhirnya, sedang
aktif/tidaknya komponen BLast tergantung pada aktif/tidaknya
komponen BNext. Jika grafik hanya terdiri atas satu halaman
maka keempat komponen TSpeedButton tersebut tidak aktif.

Prosedur Event OnChange pada Komponen TSpinEdit (SEPaging)
Komponen TSpinEdit SEPaging merupakan pengganti
SpinEdit Points per Page pada subtab Paging, perubahan nilainya
akan mempengaruhi banyaknya data per halaman (nilai property
MaxPointsPerPage komponen TChart). Klik ganda sel di sebelah
kanan event OnChange komponen TSpinEdit tersebut kemudian
ketikkan kode programnya pada prosedur SEPagingChange yang
muncul.

procedure TFPaging.SEPagingChange(Sender: TObject);
begin
Chart1.MaxPointsPerPage:= SEPaging.Value;
Chart1PageChange(Chart1);
end;

Halaman grafik mungkin akan berubah setiap kali ada perubahan
nilai property Value komponen TSpinEdit SEPaging sehingga
prosedur Chart1PageChange perlu dipanggil kembali untuk
menyesuaikan keadaan beberapa komponen.

223

Prosedur Event OnClick pada Komponen TCheckBox (CScale)
Jika saat mengedit komponen TChart Anda tidak menandai
CheckBox Scale Last Page pada subtab Paging maka halaman
terakhir akan ditampilkan dengan range sumbu horisontal grafik
sama dengan halaman yang lain. Jika sebaliknya maka skala
halaman terakhir grafik akan diatur berdasarkan banyaknya titik
yang tampak pada halaman terakhir tersebut. Komponen
TCheckBox CScale berfungsi untuk mengontrol property
ScaleLastPage komponen TChart Chart1. Klik ganda komponen
TCheckBox tersebut.
procedure TFPaging.CScaleClick(Sender: TObject);
begin
Chart1.ScaleLastPage:= CScale.Checked;
end;

Prosedur Event OnClick pada Komponen TSpeedButton (BFirst,
BPrevious, BNext, dan BLast)
Untuk menampilkan suatu halaman ke halaman lain, manfaatkan
keempat komponen TSpeedButton tersebut. Blok keempat
komponen tersebut dan isi sel di sebelah kanan event OnClick
dengan nama prosedur ButtonClick, kemudian tekan tombol Enter.
procedure TFPaging.ButtonClick(Sender: TObject);
begin
if Sender = BFirst then
Chart1.Page:= 1 else
if Sender = BPrevious then
Chart1.PreviousPage else
if Sender = BNext then
Chart1.NextPage else
Chart1.Page:= Chart1.NumPages;
end;

Jika pengguna menekan komponen BFirst maka halaman
pertama grafik akan ditampikan. Jika BPrevious ditekan maka
metode PreviousPage akan membawa ke halaman sebelumnya,
sedangkan untuk menampilkan halaman selanjutnya, panggil
metode NextPage, yaitu ketika pengguna menekan komponen
BNext. Halaman yang terakhir akan ditampilkan ketika pengguna
menekan komponen BLast.

224

3.10 Menampilkan Nilai Statistik dalam
TChartSeries Bertipe Line
Nilai statistik data dapat dibuat dengan mengeset property Data
Source suatu TChartSeries dengan suatu fungsi statistik seperti
Average, High, dan Low. Buat sebuah form baru lagi, beri nama
FstatisticBar, dan simpan dalam unit UStatisticBar. Kemudian,
tambahkan sebuah komponen TChart, sebuah komponen TPanel,
sebuah komponen TTimer, 3 (tiga) buah komponen
TSpeedButton, dan 3 (tiga) komponen TCheckBox. Ubah property
komponen-komponen tersebut seperti tabel berikut ini. Untuk
property yang mempunyai nilai lebih dari satu, masing-masing
nilai dipisahkan oleh tanda titik koma. Sesuaikan berdasarkan
urutan property Name.
Nama
Nama Object Nilai
Property
TForm AutoSize True
Caption Statistic Bar Series Topic
Name FStatisticBar
Standard)
Color clWhite
Height 72
Left 0
Name Panel1
Top 407

Width 540
System)
Interval 100

225

Name Timer1
TSpeedButton Caption &Print Graph; Copy to
(tab Additional) Clipboard; &Run
sebanyak 3
Cursor crHandPoint
buah. Pasang
dalam Panel1. Flat True
Height 22; 22; 54

Left 280; 280; 427
Name BPrint; BCopy; BRun
Top 10; 10; 42
Width 113; 113; 102

TCheckBox Caption View 3D; Two Bar Series; Bar
(tab Standard) Visible
sebanyak 3
Checked False; False; True
buah. Pasang
dalam Panel1. Left 15
Name CView; CTwoBar; CBarVisible
Top 10; 30; 50

Biarkan nilai property yang lain sesuai default-nya. Untuk
komponen TChart, tambahkan sebuah TChartSeries bertipe Bar 3
Dimensi, lalu beri nama Series1. Tambahkan juga 3 (tiga) buah
TChartSeries bertipe Line 3 dimensi dengan nama BiggestSeries,
AverageSeries, dan SmallestSeries. Ubah judul keempat
TChartSeries tersebut dengan menekan tombol Title pada subtab
Series (Series, Biggest, Average, dan Smallest). Tampilkan legend
grafik dengan memberi tanda centang pada CheckBox Visible
pada subtab Legend. Sesuaikan property yang lain dengan
kebutuhan.
Untuk menampilkan form FstatisticBar, tambahkan perintah pada
prosedur BShowClick. Buka kembali unit UOtherDemo dan klik
ganda komponen TSpeedButton BShow sehingga kursor jendela

226

Code Editor akan berada pada prosedur tersebut. Sekarang
prosedur BShowClick menjadi seperti berikut ini.
begin
end else begin
FDigital.ShowModal;
FLinked.ShowModal;
FMini.ShowModal;
FPaging.ShowModal;
if RStatisticBar.Checked then
FStatisticBar.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FStatisticBar)
Prosedur ini berisi inisialisasi beberapa property ketika form
pertama kali dibangun. Klik ganda sel di sebelah kanan event
OnCreate, kemudian ketikkan kode program berikut.
procedure TFStatisticBar.FormCreate(Sender: TObject);
begin
TeeEraseBack:= False;
NewBar:= nil;
Chart1.View3D:= CView.Checked;
Chart1.Chart3DPercent:= 35;

Series1.Fillsamplevalues(6);
Series1.Dark3D:= Chart1.IsScreenHighColor;
end;

Deklarasikan terlebih dahulu variabel NewBar bertipe TBarSeries
dalam bagian public unit. Variabel ini dipakai untuk membuat
sebuah TChartSeries bertipe Bar secara run-time sehingga pada
event OnCreate diberi nilai nil. Tampilan grafik dalam 3D
bergantung pada nilai property Checked komponen TCheckBox
Cview. Property Chart3DPercent ditentukan bernilai 35%. Data
sebanyak 6 (enam) titik diplot pada TChartSeries Series1 dengan
metode FillSampleValues. Property Dark3D Series1 (CheckBox

227

Dark Bar 3D Sides pada subtab Format) nilainya ditentukan
berdasarkan mode warna grafik yang dipakai dan bernilai True jika
dipakai mode lebih dari 256 warna dengan metode
IsScreenHighColor.

Prosedur Event OnAfterDraw pada Komponen TChart (Chart1)
Event OnAfterDraw hanya akan dipanggil setelah komponen
TChart tersebut telah menggambar semua TChartSeries yang
terdapat di dalamnya. Event ini berisi kode untuk menampilkan
teks pada masing-masing TChartSeries statistik yang
menginformasikan nilai statistik data. Klik ganda sel di sebelah
event OnAfterDraw komponen TChart tersebut, kemudian ketikkan
kode programnya.
procedure TFStatisticBar.Chart1AfterDraw(Sender: TObject);
begin
if not CTwoBar.Checked then
Brush.Style:= bsClear;
Font.PixelsPerInch:= Screen.PixelsPerInch;
Font.Size:= 10;
Font.Style:= [fsBold,fsItalic];
Font.Color:= AverageSeries.SeriesColor;
TextOut(ChartXCenter,
AverageSeries.CalcYPos(0),
AverageSeries.Title+' '+
AverageSeries.ValueMarkText[0]);

Font.Color:= BiggestSeries.SeriesColor;
BiggestSeries.CalcYPos(0),
BiggestSeries.Title+' '+
BiggestSeries.ValueMarkText[0]);
Font.Color:= SmallestSeries.SeriesColor;
SmallestSeries.CalcYPos(0),
SmallestSeries.Title+' '+
SmallestSeries.ValueMarkText[0]);
end;
end;

Event ini diberlakukan jika komponen TCheckBox CTwoBar tidak
dicentang. Pola TBrush ditentukan bernilai bsClear untuk
membersihkan pola sebelumnya. Property PixelsPerInch digunakan
untuk memastikan bahwa font yang disalin dari kanvas ke printer
mempunyai ukuran yang sama. Faktor konversi antara pixel dan

228

inci untuk font tersebut mengambil nilai yang sama dengan nilai
pada layar monitor. Huruf yang dipakai untuk menginformasikan
nilai statistik dalam TChartSeries statistik berukuran 10 pixel
dalam huruf tebal dan miring. Warna huruf diambil dari warna
masing-masing TChartSeries tersebut. Untuk menuliskan teks
dalam kanvas (komponen TChart Chart1), digunakan metode
TextOut yang mempunyai syntax:
procedure TextOut(X, Y: Integer; const Text: string);

Penulisan teks tersebut (isi variabel Text) dilakukan pada
koordinat (X, Y). Koordinat X untuk semua teks ditentukan dari
nilai tengah koordinat horisontal grafik yang diperoleh dengan
metode ChartXCenter. Nilai yang dihasilkan metode ini tidak sama
dengan property Width dibagi dua karena margin grafik, margin
sumbu, lebar legend grafik, dan sebagainya bukan bagian dari
ukuran horisontal grafik. Nilai Y berasal dari koordinat vertikal
yang merupakan hasil pemanggilan metode CalYPos pada masing-
masing TChartSeries statistik. Teks yang ditampilkan terdiri atas
judul masing-masing TChartSeries tersebut (property Title
TChartSeries) dan nilai Mark-nya (property ValueMarkText
TChartSeries).

Prosedur Event OnGetLegendText pada Komponen TChart
(Chart1)
Teks informasi nilai statistik pada prosedur event OnAfterDraw di
atas hanya ditampilkan ketika komponen TCheckBox CTwoBar
tidak dicentang. Untuk menginformasikan nilai statistik jika
komponen TCheckBox tersebut dicentang, gunakan legend grafik
dengan mengganti nilai property LegendText melalui event
OnGetLegendText. Klik ganda sel di sebelah kanan event
OnGetLegendText pada komponen TChart Chart1.
procedure TFStatisticBar.Chart1GetLegendText(Sender:
TCustomAxisPanel;LegendStyle: TLegendStyle; Index:
Integer; var LegendText: String);
begin
if CTwoBar.Checked then
LegendText:= Chart1.Series[Index].Title+' : '+LegendText
else LegendText:= Chart1.Series[Index].Title;
end;

229

Jika property Checked komponen TCheckBox CTwoBar bernilai
True, teks yang ditampilkan pada legend grafik terdiri atas judul
setiap TChartSeries ditambah nilai property LegendText-nya. Jika
sebaliknya, legend grafik hanya menampilkan judul masing-
masing TChartSeries.

Simulasi plot data pada TChartSeries Series1 dilakukan
menggunakan komponen TTimer Timer1. Klik ganda komponen
TTimer tersebut sehingga pada event OnTimer muncul sebuah
nama prosedur Timer1Timer.
procedure TFStatisticBar.Timer1Timer(Sender: TObject);
var
t: Longint;
begin
t:= Random(Series1.Count);
Series1.YValue[t]:= Series1.YValue[t]+Random(50)-25;
if Random(100) < 8 then
Series1.BarStyle:= TBarStyle(Random(1 +
Ord(High(TBarStyle))));
if Random(100) < 2 then
CView.Checked:= not CView.Checked;
end;

Nilai Y yang diplot pada indeks t berasal dari nilai Y tersebut
ditambah dengan suatu fungsi nilai acak. Variabel t berasal dari
nilai acak banyaknya data dalam TChartSeries Series1, yaitu 6
data. Style TChartSeries Series1 akan berubah jika jumlah nilai
acak dengan rentang data 100 kurang dari nilai 8. Fungsi Ord
akan menghasilkan posisi ordinal dari suatu eksepsi Ordinal-type
(dalam tanda kurung). Fungsi High menghasilkan nilai tertinggi
dari range bertipe TBarStyle.
Jika nilai acak hasil deklarasi fungsi nilai Y tersebut kurang dari
nilai 2 maka secara otomatis tanda centang pada komponen
TCheckBox akan dihilangkan kembali.

230

Prosedur Event OnClick pada Komponen TSpeedButton (BRun,
BPrint, dan BCopy)
Event OnClick komponen TSpeedButton BRun berisi kode untuk
mengaktifkan dan menonaktifkan komponen TTimer, sedangkan
komponen BPrint digunakan untuk mencetak grafik. Komponen
BCopy berguna untuk menyalin gambar grafik dalam clipboard
Windows. Klik ganda masing-masing komponen TSpeedButton
tersebut sehingga muncul tiga buah prosedur dan ketikkan kode
programnya.
procedure TFStatisticBar.BRunClick(Sender: TObject);
begin
end else begin
end
end;

procedure TFStatisticBar.BPrintClick(Sender: TObject);
begin
Chart1.PrintLandscape;
end;

procedure TFStatisticBar.BCopyClick(Sender: TObject);
begin
Chart1.CopyToClipboardMetafile(True);
ShowMessage('Grafik telah disalin dalam Clipboard');
end;

Pada prosedur BRunClick, komponen TTimer akan aktif ketika
property Caption komponen TSpeedButton BRun bernilai &Run.
Property Caption tersebut akan berubah ketika pengguna menekan
komponen BRun sekaligus mengaktifkan/menonaktifkan
komponen TTimer Timer1.
Metode PrintLandscape akan dipanggil ketika pengguna menekan
komponen TSpeedButton BPrint. Metode tersebut akan mengeset
printer pada orientasi Landscape (posisi kertas horisontal),
kemudian metode Print akan dipanggil untuk mencetak gambar
grafik.
Metode CopyToClipboardMetafile akan menyalin seluruh daerah
grafik ke clipboard dalam format metafile. Gambar grafik tersebut
kemudian dapat di-paste ke aplikasi lain, misalnya Microsoft Word.

231

Prosedur Event OnClick pada Komponen TCheckBox (CView,
CTwoBar, dan CBarVisible)
Komponen TCheckBox yang terpasang pada form akan
mengontrol property View3D (CheckBox 3D pada subtab 3D)
komponen TChart, membuat/menghapus TChartSeries baru
bertipe Bar, dan menampilkan/menyembunyikan TChartSeries
Series1. Klik ganda masing-masing komponen TCheckBox
sehingga tiga buah prosedur CViewClick, CTwoBarClick,
CBarVisibleClick muncul.
procedure TFStatisticBar.CViewClick(Sender: TObject);
begin
Chart1.View3d:= CView.Checked;
end;

procedure TFStatisticBar.CTwoBarClick(Sender: TObject);
begin
if CTwoBar.Checked then begin
NewBar:= TBarSeries.Create(Self);
NewBar.ParentChart:= Chart1;
NewBar.Title:= 'New Series';
NewBar.BarStyle:= bsPyramid;
NewBar.FillSampleValues(Series1.Count);

AverageSeries.DataSources.Add(NewBar);
NewBar.AddLinkedSeries(AverageSeries);

BiggestSeries.DataSources.Add(NewBar);
NewBar.AddLinkedSeries(BiggestSeries);
SmallestSeries.DataSources.Add(NewBar);
NewBar.AddLinkedSeries(SmallestSeries);
end else begin
NewBar.Free;
NewBar:= nil;
end;
Series1.RefreshSeries;
end;

procedure TFStatisticBar.CBarVisibleClick(Sender: TObject);
begin
Series1.Active:= CBarVisible.Checked;
if Assigned(NewBar) then
NewBar.Active:= CBarVisible.Checked;
end;

Grafik akan ditampilkan dalam bentuk 3 dimensi jika property
Checked komponen TCheckBox CView bernilai True.
Pada prosedur CTwoBarClick, sebuah TChartSeries baru bertipe
Bar bernama NewBar akan dibuat jika pengguna memberi tanda

232

centang pada komponen CTwoBar dengan memanggil konstruktor
Create. TChartSeries baru tersebut dapat menjadi bagian dari
komponen Chart1 dengan mengeset Chart1 pada property
ParentChart-nya. Property Title-nya bernilai New Series dan
mempunyai style bar berbentuk piramid. Banyaknya data yang
diplot pada TChartSeries tersebut sama dengan jumlah data pada
TChartSeries Series1. Untuk menghitung kembali nilai statistik,
tambahkan TChartSeries NewBar tersebut pada property
DataSource masing-masing TChartSeries statistik. Jika komponen
TCheckBox CTwoBar tidak dicentang maka TChartSeries NewBar
dihapus kembali dengan metode Free. Kemudian, metode
RefreshSeries akan me-refresh TChartSeries Series1.
Pada prosedur CBarVisibleClick, fungsi Assigned mengecek nilai
pointer nil pada variabel NewBar. Jika nilainya tidak nil maka
ditampilkan/tidaknya TChartSeries NewBar bergantung pada nilai
property Checked komponen TCheckBox CbarVisible. Hal ini
berlaku juga untuk TChartSeries Series1.

3.11 Membuat Osiloskop dengan Komponen
TImage
Selain dengan komponen TChart atau TDBChart, grafik juga dapat
dibuat dengan komponen TImage. Untuk membangun sebuah
aplikasi pengukuran data sederhana (Osciloscope), buat sebuah
form baru dengan nama FOsciloscope dan simpan unit dalam
UOsciloscope. Form tersebut membutuhkan 3 (tiga) buah
komponen TPanel, sebuah komponen TImage, sebuah komponen
TTimer, sebuah komponen TStringGrid, sebuah komponen TLabel,
sebuah komponen TGroupBox, 2 (dua) buah komponen
TRadioButton, dan 6 (enam) buah komponen TSpeedButton. Ubah
property komponen-komponen tersebut seperti tabel berikut ini.
Untuk property yang mempunyai nilai lebih dari satu, masing-
masing nilai dipisahkan oleh tanda titik koma. Sesuaikan
berdasarkan urutan property Name.
TForm AutoSize True

233

Caption Osciloscope with TImage
Topic
Name FOsciloscope

Standard)
Color clWhite
Height 418
Left 0; 122; 122
Name Panel1; PGraph; PData
Top 0
Visible True; False; False

Width 120; 705; 513
Timage (tab Cursor crHourGlass
Additional).
Height 418
Pasang pada
Pgraph. Left 0
Name IOsciloscope
Top 0

Width 705
TStringGrid ColCount 4
(tab
Color clWhite
Additional).
Pasang pada Ctl3D False
Pdata.
DefaultColWidth 110
DefaultRowHeight 20
FixedColor $00EBBA9C

234

Height 380
Left 26
Name SGData
RowCount 701
ScrollBars ssVertical

Top 21
Width 465
System)
Interval 1

TLabel (tab Caption Channel Input
Standard).
Left 8
Pasang pada
Panel1. Name Lable1
Top 5
WordWrap True
TGroupBox Caption View
(tab
Color clWhite
Standard).
Pasang pada Height 68
Panel1.
Left 10
Name GBView
Top 225
Width 95
TRadioButton Caption Graph; Data
(Standard).
Checked True; False
Pasang pada
GBView. Color clWhite
Left 18

235

Name RGraph; RData
Top 21; 41
TSpeedButton Caption Channel &1; Channel &2;
(tab Channel &3; Channel &4;
Additional) &Run; &Save
sebanyak 6
Cursor crHandPoint
buah. Pasang
dalam Panel1. Flat True
Height 25; 25; 25; 25; 40; 40

Left 10
Name BChannel1; BChannel2;
BChannel3; BChannel4;
BRun; BSave
Top 69; 99; 130; 161; 309; 365
Width 95

Biarkan nilai property yang lain sesuai default-nya.
Untuk memanggil form Fosciloscope, tambahkan kode program
prosedur BShowClick pada unit UOtherDemo sehingga prosedur
tersebut menjadi seperti berikut ini.
begin
end else begin
FDigital.ShowModal;
FLinked.ShowModal;
FMini.ShowModal;
FPaging.ShowModal;
if RStatisticBar.Checked then
FStatisticBar.ShowModal;

236

if ROsciloscope.Checked then
FOsciloscope.ShowModal;
end;
end;

Sistem pengambilan data dibuat seperti pada Sistem Akuisisi Data,
yaitu dari antarmuka ADC, tetapi menggunakan ADC 12 bit.
Sebagai simulasi, data berasal dari data acak dengan rentang
4.096 data. Buat prosedur ConvertData dan ReadData seperti di
bawah ini.
procedure ConvertData(Addres:word);
begin
DataADC:= Random(4096);
end;

procedure ReadData;
var
i, a: Integer;
begin
for i:= 1 to 4 do
begin
for a:= 1 to MaxData do
begin
DataADC:= 0;
ConvertData(Addres[i]);
Data[i,a]:= DataADC;
end;
end;
end;

Variabel MaxData merupakan konstanta yang dipakai untuk
menentukan banyaknya data yang diplot per scanning. Sistem
hanya memakai 4 (empat) buah Channel input dan data acak
DataADC disimpan sementara dalam variabel Data untuk setiap
channel input berdasarkan alamatnya (nilai variabel Address).
Deklarasikan konstanta MaxData dengan nilai 700 dan beberapa
variabel yang diperlukan pada bagian private dan var unit
sehingga kedua bagian tersebut menjadi:
private
{ Private declarations }
BufIOsciloscope: TBitmap;
CBackGround,CTitle, CScaleAxis, CAxis, CGrid, CPoint,
CLegend : TColor;
const
MaxData = 700;
var
FOsciloscope: TFOsciloscope;
Data: array [1..4,1..700] of Cardinal;
Addres: array [1..4] of word;
View, DataADC: Word;

237

Variabel BufIOsciloscope yang bertipe TBitmap berfungsi sebagai
buffer gambar grafik yang akan diisikan pada komponen Timage,
sedangkan variabel CBackGround, CTitle, CScaleAxis, CAxis,
CGrid, CPoint, dan CLegend merupakan buffer warna yang dipakai
untuk menggambar grafik. Nilai variabel View menunjukkan
channel input yang sedang aktif.
Untuk menggambar grafik pada komponen Timage, buat sebuah
prosedur private dengan nama DrawGraph. Deklarasikan prosedur
tersebut pada bagian private unit dan ketikkan kode programnya.
procedure TFOsciloscope. DrawGraph (Sender: TObject);
var
i,a : integer;
BitFix,MaxScreen,Left,Bottom : Word;
R : TRect;
begin
MaxScreen:= 660;
Left:= 30;
Bottom:= 350;

R:= Rect(0, 0, BufIOsciloscope.Width,
BufIOsciloscope.Height);
BufIOsciloscope.Canvas.Brush.Color := CBackground;
BufIOsciloscope.Canvas.Brush.Style := bsSolid;
BufIOsciloscope.Canvas.FillRect(R);

with BufIOsciloscope.Canvas do begin
Font.Name:= 'Arial';
Pen.Color:= CAxis;
Pen.Width:= 2;
MoveTo(Left+3, Bottom);
LineTo(MaxScreen+Left, Bottom);
MoveTo(Left+3, Bottom);
LineTo(Left+3, Bottom-255);

Font.Color:= CTitle;
Font.Size:= 15;
TextOut(Left+260, Bottom-330, 'Osciloscope');
Font.Color:= CLegend;
Font.Size:= 11;
TextOut(Left+275, Bottom-305, 'for Channel '+
IntToStr(View));
Pen.Width:= 1;
for i:= 1 to 10 do
begin
Pen.Color:= CGrid;
Pen.Style:= psDot;
MoveTo(Left+5, Bottom-(25*i));
LineTo(MaxScreen+Left, Bottom-(25*i));

Font.Color:= CScaleAxis;
Font.Size:= 10;

238

TextOut(Left-23, Bottom-(25*i), IntToStr(i)+' v');
end;

if Sender = Timer1 then begin
Pen.Color:= CPoint;
Pen.Style:= psSolid;
BitFix:= Data[View,1] shr 4 ;
MoveTo(Left+1, Bottom-BitFix);
for a:= 1 to MaxScreen do
begin
BitFix:= Data[View,a] shr 4 ;
LineTo(a+Left+6, Bottom-BitFix);
MoveTo(a+Left+6, Bottom-BitFix);
end;
end;
end;
IOsciloscope.Canvas.Draw(0,0,BufIOsciloscope);
end;

Konstanta MaxScreen menunjukkan lebar layar grafik dalam pixel.
Variabel Left berhubungan dengan sumbu kiri grafik, sedangkan
variabel Bottom berhubungan dengan sumbu bawah grafik. Untuk
membuat kotak persegi empat, gunakan fungsi Rect. Hasilnya
disimpan dalam variabel R. Syntax fungsi Rect adalah:
function Rect(ALeft, ATop, ARight, ABottom: Integer):
TRect; overload;

Titik kiri dan atas kotak persegi empat ada pada posisi 0 pixel dari
kanvas. Titik kanan kotak tersebut mengambil nilai lebar buffer
BufIOsciloscope dan titik bawah sama dengan nilai tinggi buffer
tersebut. Property width dan height buffer BufIOsciloscope
ditentukan pada event OnCreate form FOsciloscope.
Warna yang disikan sebagai background grafik diambil dari nilai
variabel CBackground. Pola brush yang dipakai adalah solid
(penuh). Metode FillRect akan mengisi kotak persegi empat
tersebut dengan warna dan pola brush yang telah ditentukan. Kode
program tersebut berfungsi untuk menghapus gambar grafik yang
mungkin telah ada dalam kanvas (komponen TImage)
Setelah gambar grafik dibersihkan, kemudian kanvas digambar
ulang. Font yang digunakan pada grafik seluruhnya berjenis Arial.
Untuk menggambar garis sumbu grafik, ambil nilai variabel warna
CAxis dengan ketebalan garis 2 pixel. Garis sumbu horisontal
dimulai dari koordinat (33, 350) sampai koordinat (680, 350)
dengan metode MoveTo dan LineTo. Garis sumbu vertikal dimulai
dari koordinat (33, 350) sampai koordinat (33, 95).

239

Selanjutnya, tuliskan judul grafik dengan warna font dari nilai
variabel CTitle dengan berukuran 15 pixel. Penulisan judul grafik
dengan metode TextOut dimulai dari koordinat (290, 20) dengan
teks Osciloscope. Legend grafik yang menginformasikan channel
input yang sedang aktif menggunakan font berwarna sesuai
dengan nilai variabel CLegend, berukuran 11 pixel, dan ada pada
koordinat (305, 45).
Ketebalan garis kisi-kisi (grid) dan garis data grafik adalah 1 pixel.
Garis kisi-kisi dibuat hanya sebanyak 10 garis mendatar dengan
warna garis berasal dari nilai variabel CGrid dan dilukis terputus-
putus, contohnya pada koordinat (35, 325) sampai koordinat
(680, 325) untuk garis kisi-kisi yang petama. Untuk garis kisi-kisi
yang kedua, letakkan pada koordinat (35, 300) sampai (680,
300). Demikian seterusnya untuk 8 (delapan) garis kisi-kisi yang
tersisa dengan perbedaan koordinat y sebesar 25 pixel
dibandingkan garis sebelumnya.
Huruf skala sumbu vertikal grafik berwarna sama dengan nilai
CScaleAxis dan berukuran 10 pixel. Penulisan skala sumbu
tersebut dimulai pada koordinat x 7 pixel, sedangkan koordinat y
sama dengan koordinat y garis kisi-kisi untuk setiap titiknya.
Seperti pada garis kisi-kisi, juga dibuat 10 titik skala sumbu.
Pelukisan garis data hanya dilakukan jika sender prosedur
DrawGraph adalah komponen Timer1. Garis data digambar
dengan pola solid tidak teputus-putus dan berwarna sesuai nilai
variabel CPoint. Data yang digambar sebelumnya digeser ke
kanan dengan operator shr sebanyak jumlah channel input (dalam
satuan bit) untuk menghindari pertukaran pelukisan data hasil
konversi ADC (data random simulasi). Pergeseran data tersebut
disimpan dalam variabel BitFix yang diinisialisasikan pada nilai
pertama data konversi tersebut. Inisialisasi tersebut dipakai untuk
koordinat pelukisan garis data pertama, yaitu dimulai dari
koordinat (32, 350-nilai BitFix) sampai koordinat (33, 350-nilai
BitFix). Kemudian, titik yang kedua dimulai dari (33, 350-nilai
BitFix) sampai (34, 350-nilai BitFix). Demikian seterusnya untuk
700 titik data per scanning.
Pelukisan grafik tersebut dilakukan pada buffer bitmap
BufIOsciloscope. Dengan metode Draw, grafik tersebut kemudian

240

digambar dalam kanvas, yaitu komponen TImage Iosciloscope,
dimulai dari posisi kiri atas kanvas (0, 0).

Prosedur Event OnCreate dan OnDestroy pada TForm
(FOsciloscope)
Event OnCreate berisi kode-kode untuk menginisialisasi beberapa
variabel dan komponen. Klik ganda sel di sebelah kanan event
OnCreate form, kemudian ketikkan kodenya.
procedure TFOsciloscope.FormCreate(Sender: TObject);
var
a : Integer;
begin
CBackground:= clWhite;
CAxis:= clBlack;
CGrid:= clSilver;
CScaleAxis:= clMaroon;
CLegend:= clFuchsia;
CPoint:= clRed;
CTitle:= clRed;
BufIOsciloscope := TBitmap.Create;
BufIOsciloscope.Width := IOsciloscope.Width;
BufIOsciloscope.Height := IOsciloscope.Height;
begin
SGData.Cells[0,a]:= IntToStr(a);
SGData.Cells[0,0]:= ' Count Data ';
SGData.Cells[1,0]:= ' Data (Decimal) ';
SGData.Cells[2,0]:= ' Data (Hexadecimal)';
SGData.Cells[3,0]:= ' Data (Volt)';
end;
DrawGraph (Sender);
RadioButtonClick(RGraph);
end;

Variabel-variabel buffer bertipe TColor diinisialisasikan dengan
warna tertentu, sedangkan lebar dan tinggi variabel buffer
BufIOsciloscope ditentukan sama dengan nilai property Width dan
Height komponen TImage IOsciloscope. Variabel BufIOsciloscope
dibangun bertipe TBitmap dengan konstruktor Create. Setiap baris
pada sel pertama komponen TStringGrid SGData diisi dengan
nomor data, dimulai dari 1 sampai 700 (nilai konstanta MaxData).
Untuk mengisi komponen TImage dengan grafik tanpa garis data,
dipanggil prosedur DrawGraph dengan sender selain komponen
Timer1 (dapat diisi dengan mengetik Sender). Pemanggilan
prosedur RadioButtonClick ber-sender RGraph bertujuan untuk
menampilkan panel grafik (komponen TPanel PGraph).

241

Event OnDestroy form digunakan untuk membebaskan setiap
object yang dibangun dalam event OnCreate form. Klik ganda
event tersebut dan deklarasikan kodenya.
procedure TFOsciloscope.FormDestroy(Sender: TObject);
begin
BufIOsciloscope.Free;
end;

Metode Free akan membebaskan object bertipe TBitmap
BufIOsciloscope dari memori yang dihubungkan dengannya.

Prosedur Event OnClick pada Komponen TRadioButton (RGraph,
dan RData)
Gambar grafik dan data teks yang ditampilkan ke layar ditentukan
berdasarkan nilai property Checked komponen TRadioButton
RGraph dan RData. Blok kedua komponen tersebut dan isi sel di
sebelah kanan event OnClick dengan nama prosedur
RadioButtonClick, kemudian tekan tombol Enter. Ketikkan kode
program berikut pada prosedur yang muncul.
procedure TFOsciloscope.RadioButtonClick(Sender: TObject);
begin
PGraph.Visible:= False;
PData.Visible:= False;
if Sender = RGraph then
PGraph.Visible:= True else
PData.Visible:= True;
end;

Gambar grafik yang terletak pada komponen TPanel PGarph akan
ditampilkan ketika pengguna mengklik komponen TRadioButton
RGraph. Jika pengguna mengklik komponen RData maka data
teks yang terpasang pada PData akan ditampilkan.

Proses pembacaan data dan pelukisan grafik serta penentuan data
teks dilakukan dengan memanfaatkan komponen TTimer Timer1.
Klik ganda komponen TTimer tersebut sehingga pada jendela
Code Editor muncul sebuah prosedur. Ketikkan kode programnya.
procedure TFOsciloscope.Timer1Timer(Sender: TObject);
var
a : Integer;

242

Volt : extended;
begin
ReadData;
if (View > 0) and (PGraph.Visible) then
DrawGraph (Timer1);
if (View>0) and (PData.Visible) then
begin
Volt:= (Data[View,a]/4096)*10;
SGData.Cells[0,0]:= 'Data Channel '+IntToStr(View);
SGData.Cells[1,a]:= IntToStr(Data[View,a]);
SGData.Cells[2,a]:= IntToHex(Data[View,a],4);
SGData.Cells[3,a]:= FloatToStrf(Volt,FFGeneral,6,5);
end;
end;

Jika property Enabled komponen TTimer Timer1 bernilai True
maka proses pembacaan data akan segera dilakukan. Pelukisan
grafik akan dilakukan dengan memanggil prosedur DrawGraph
ber-sender komponen Timer1 ketika variabel View bernilai lebih
dari 0 dan komponen TPanel PGraph telah ditampilkan.
Variabel Volt berguna untuk menyimpan nilai hasil konversi dari
bilangan desimal menjadi bersatuan Volt. Nilai variabel Volt
kemudian menjadi isi sel keempat komponen TStringGrid SGData
untuk setiap titik data. Sel ketiganya berisi hasil konversi dari
bilangan desimal menjadi bilangan heksadesimal. Nilai aslinya
(bilangan desimal) ditampilkan dalam sel kedua komponen
SGData. Sel pertamanya pada event OnCreate form telah
ditentukan untuk berisi nomor data. Data teks tersebut akan
ditampilkan ketika variabel View bernilai lebih dari 0 dan
komponen TPanel PData telah ditampilkan.

Prosedur Event OnClick pada Komponen TSpeedButton
(BChannel1, BChannel2, BChannel3, BChannel4, BRun, dan
BSave)
Komponen TSpeedButton BChannel1, BChannel2, BChannel3,
dan BChannel4 mempunyai fungsi yang sama, yaitu memberi nilai
variabel View sebagai informasi channel input mana yang sedang
aktif. Buat sebuah prosedur bersama dengan nama BchannelClick,
kemudian ketikkan kode programnya seperti berikut.
procedure TFOsciloscope.BChannelClick(Sender: TObject);
begin
BChannel1.Font.Color:= clRed;
BChannel1.Font.Size:= 8;

243


if Sender = BChannel1 then begin
View:= 1;
BChannel1.Font.Color:= clGreen;
end else
View:= 2;
end else
View:= 3;
end else begin
View:= 4;
end
end;

Nilai variabel View dan warna serta ukuran huruf komponen
TSpeedButton akan berubah jika ditekan pengguna.
Untuk mengontrol aktifitas komponen TTimer Timer1, digunakan
event OnClick komponen TSpeedButton BRun. Klik ganda
komponen TSpeedButton tersebut dan ketikkan kode program
berikut.
procedure TFOsciloscope.BRunClick(Sender: TObject);
begin
end else begin
end
end;

Komponen TTimer Timer1 hanya akan aktif ketika pengguna
menekan komponen TSpeedButton BRun dengan property
Caption-nya saat itu bernilai &Run.
Komponen TSpeedButton yang terakhir, yaitu BSave, berfungi
untuk menyimpan file gambar grafik dalam suatu folder. Klik

244

ganda komponen TSpeedButton tersebut dan ketikkan kode
programnya.
procedure TFOsciloscope.BSaveClick(Sender: TObject);
var
a: integer;
begin
if not DirectoryExists('D:Data') then
if not CreateDir('D:Data') then
raise Exception.Create('Program gagal membuat direktori '+
'kerja ''D:Data''!');
SetCurrentDir('D:Data');

for a:= 1 to 4 do
begin
view:= a;
DrawGraph (Timer1);
BufIOsciloscope.SaveToFile('Graph'+IntToStr(a)+'.bmp');
end;
end;

Folder tempat penyimpanan file gambar dicek terlebih dahulu
keberadaannya dengan fungsi DirectoryExists. Jika tidak ada
maka akan dibuatkan dengan fungsi CreateDir. Folder tersebut
kemudian ditentukan sebagai direktori aktif saat itu dengan fungsi
SetCurrentDir. Kemudian, proses penyimpanan file gambar untuk
setiap channel input tersebut dilakukan dengan memanggil
metode SaveToFile. Pemanggilan prosedur DrawGraph ber-sender
komponen Timer1 bertujuan untuk memastikan kanvas variabel
BufIOsciloscope telah berisi gambar grafik lengkap dengan garis
datanya. File gambar yang disimpan berektensi Bmp dan nama
file diawali dengan string Graph, dilanjutkan dengan nilai variabel
View.

3.12 Membuat File Setup Aplikasi Sistem
Akuisisi Data
Suatu aplikasi yang telah dikompilasi otomatis akan menghasilkan
suatu file EXE. Tanpa Borland Delphi, kita masih dapat
menjalankan file EXE tersebut jika file-file pendukung aplikasi
tersedia dalam suatu folder atau direktori tertentu. File EXE
tersebut dapat disalin ke komputer lain bersama dengan file
pendukungnya dengan nama folder seperti yang telah ditentukan.
Pada aplikasi Sistem Akuisisi Data, file pendukung berupa file
gambar dikodekan berada dalam folder D:Program. File database

245

bagi unit ULingked (form Flinked) ditentukan ada dalam folder
D:ProgramDatabase.
Selain dengan menyalin, file EXE beserta file pendukungnya dapat
dipindahkan ke komputer lain dengan menginstal file setup (di
dalamnya terdapat file .EXE dan file pendukungnya) yang dibuat
melalui software InstallShield Express Borland Limited Delphi.
Software tersebut tersedia dalam paket Borland Delphi. Instal dulu
software tersebut jika belum ada dalam komputer Anda. Jika
sudah, jalankan sehingga pada layar monitor tampil InstallShield
Express seperti pada Gambar 3.3.

Gambar 3.3 Tampilan software InstallShield Express

Sebelum file Setup dibuat, klik menu Tools | Options sehingga
muncul kotak dialog Options seperti Gambar 3.4. Kotak dialog ini
dipakai untuk mengedit setting global file setup dan terdiri atas 4
(empat) tab: tab General, tab File Locations, tab InstallShield
Updates, dan tab File Extensions. Pilih tab File Locations, lalu isi
isian Project Location dengan direktori tempat file setup akan
diletakkan, yaitu D:SetupSoftware, lalu tekan tombol OK. Sebuah

246

konfirmasi tentang pembuatan direktori tersebut akan muncul jika
belum ada dalam harddisk. Pilih tombol Yes.
Kembali ke jendela InstallShield Express (Gambar 3.3), klik menu
Create a new project.... Pada kotak tengah, klik icon Blank Setup
Project dan ubah path direktori dan nama file dalam isian Project
Name and Location dengan D:SetupSoftwareSAD.ism.
Kemudian tekan tombol Create untuk membuat file setup baru
dengan nama SAD. Jika ingin mengedit atau melengkapi file setup
yang telah ada, pilih menu Open a project.

Gambar 3.4 Kotak Dialog Options pada tab File Locations

Suatu file setup mempunyai 7 (tujuh) bagian. Oleh karena
property setiap bagian cukup banyak maka akan dibahas property
yang penting saja, yaitu:

Organize Your Setup
1. General Information
Merupakan infomasi dasar tentang file setup, perusahaan (jika
ada), dan aplikasi hasil instalasi. Terdiri atas tiga property:

247

a. Product Properties
Berisi informasi tentang aplikasi hasil instalasi.
1) Product Name: menunjukkan nama aplikasi hasil
instalasi. Masukkan teks SAD Program sebagai
nama produk. Teks yang dimasukkan dalam
property ini tidak boleh mengandung karakter: / :
* ? " < > | . –
2) Product Version: menunjukkan nomor versi aplikasi
dan harus terdiri atas angka dalam format aa.bb.cccc
dengan a menggambarkan nomor versi utama, b
menggambarkan nomor versi tambahan, dan c
menggambarkan nomor pembuatan. Nilai aa dan bb
harus kurang dari 256 dan cccc harus kurang dari
65.535.
3) Product Code: memasukkan string GUID sebagai
identitas unik dari aplikasi. Untuk memudahkan
pembuatan GUID, tekan tombol Generate GID di
bawah kotak property.
4) Upgrade Code: memasukkan sring GUID yang dapat
dipakai untuk meng-upgrade aplikasi. Seperti pada
propert Product Code, untuk memudahkan pembuatan
GUID maka tekan tombol Generate GID di bawah
kotak property.
5) INSTALLDIR: menunjukkan lokasi folder aplikasi hasil
instalasi pada komputer lain. Pada aplikasi Sistem
Akusisi Data, file pendukung yang dikodekan harus
berada dalam folder D:Program, maka beri nilai
property INSTALLDIR dengan path tersebut.
6) DATABASEDIR: menunjukkan lokasi folder untuk file-
file database aplikasi hasil instalasi. File database
untuk unit ULinked (form FLinked) diset berada dalam
folder D:ProgramDatabase, maka isi nilai property
DATABASEDIR dengan nilai [INSTALLDIR]Database.
7) Default Font: memilih font yang digunakan dalam file
Setup. Pilih font arial dengan ukuran 8 pixel.

248

b. Summary Information Stream
Berisi informasi tentang perusahaan (jika ada) dan
aplikasi yang akan diinstal.
1) Author: menunjukkan nama pembuat file setup.
2) Authoring Comments: memasukkan keterangan
tentang file setup dari pembuatnya. Keterangan ini
hanya untuk pembuatnya saja dan tidak ditampilkan
ke pengguna aplikasi.
3) Subjects: memasukkan nama software di mana file
setup ini dibuat.
4) Keywords: menunjukkan daftar kata kunci (dipisahkan
oleh tanda koma) yang menggambarkan file setup.
Informasi yang dimasukkan akan ditampilkan ketika
Anda mengklik kanan mouse pada file setup (.msi),
memilih Property pada menu pop-up yang muncul,
kemudian menekan tab Summary.
5) Schema: berisi versi minimum installer yang
dibutuhkan file setup. Sebagai contoh, jika file setup
membutuhkan Installer setidaknya dengan versi 2.0
maka isi property Schema dengan nilai 200.
c. Add/Remove Program
Untuk memunculkan aplikasi hasil instalasi beserta
informasinya dalam panel Add/Remove Program pada
sistem Window 2000, ME, dan XP.
1) Use Add/Remove Program: menampilkan aplikasi
hasil instalalasi dalam panel Add/Remove Program
jika dipilih Yes.
2) Disable Change Button: jika diset Yes maka tombol
Change dalam panel Add/Remove Program akan
disembunyikan. Tombol ini berfungsi untuk
mengubah option aplikasi setelah diinstal.
3) Disable Remove Button: tombol Remove
mengizinkan pengguna menghapus aplikasi hasil

249

instalasi dari komputer. Pilih No untuk menampilkan
tombol ini dalam panel Add/Remove Program.
4) Disable Repair Button: pilih Yes untuk
menyembunyikan tombol Repair dalam panel
Add/Remove Program. Tombol ini mengizinkan
pengguna menjalankan Installer untuk memperbaiki
aplikasi jika ada file yang terhapus atau rusak.
5) Display Icon: menampilkan icon aplikasi hasil
instalasi dalam panel Add/Remove Program.
Caranya, klik sekali pada sel isian di sebelahnya
kemudian tekan tombol untuk mencari file .ICO
atau file .EXE yang menjadi sumber icon.
6) Readme: menunjukkan nama file Readme (.txt)
untuk file setup. Nama ini akan ditampilkan dalam
kotak dialog Support Information pada panel
Add/Remove Program.
7) Publisher, menunjukkan nama perusahaan atau
organisasi yang membuat file setup.
8) Publisher/Product URL: menunjukkan alamat web
dari perusahaan atau file setup. Alamat ini
ditampilkan dalam hyperlink kotak dialog Support
Information pada panel Add/Remove Program.
9) Product Update URL: menunjukkan link untuk
mendapatkan informasi tentang update atau
download versi terakhirnya, ditampilkan dalam
hyperlink kotak dialog Support Information pada
panel Add/Remove Program.
10) Support Contact: menunjukkan nama orang atau
departemen di mana pengguna dapat menghubungi
technical support.
11) Support URL: menunjukkan alamat website di mana
pengguna dapat mencari informasi technical support
tentang aplikasi.

250

12) Support Phone Number: menunjukkan nomor
telepon dukungan teknis aplikasi ini.
2. Features
Feature default, yaitu Always Install, tidak dapat diubah atau
dihapus dari file setup. Kita juga tidak dapat menambahkan
subfeatures di dalamnya. Feature ini terdiri atas file yang
harus diinstal sebagai bagian dari file setup.
a. Description: deskripsi feature yang akan ditampilkan
dalam kotak dialog Custom Setup jika pengguna
mengklik feature tersebut.
b. Required: secara default bernilai Yes sehingga pada kotak
dialog Custom Setup pengguna tidak mempunyai pilihan
dan features akan diinstal.
c. Remote Installation: menentukan apakah file feature akan
diinstal dalam sistem (harddisk) atau dijalankan dari
suatu medium, misalnya CD-ROM. Secara default bernilai
Favor Local, artinya file yang dipilih dalam Features akan
diinstal dalam sistem.
d. Visible: menentukan bagaimana feature akan ditampilkan
dalam kotak dialog Custom Setup. Property ini
mempunyai tiga pilihan nilai, yaitu: Visible and Collapsed
(feature akan ditampilkan dengan subfeatures Colllapsed
sebagai default), Visible and Expanded (feature akan
ditampilkan bersama subfeatures Expanded sebagai
default), dan Not Visible (feature akan ditampilkan dalam
kotak dialog Custom Setup).
e. Advertised: mengizinkan atau tidak suatu feature untuk
advertise.
f. Comments: keterangan tentang feature.
g. REG File to Merge at Build: menggabungkan file .reg
dengan register feature.
Untuk menambahkan feature baru, klik kanan mouse pada
bagian icon Features (di kotak tengah), kemudian klik menu
New Feature Ins pada menu pop-up yang muncul. Buat

251

sebuah feature baru dengan nama BDE. Feature ini dipakai
untuk tempat penggabungan modul BDE pada property
Object/Merge Moduls (bagian dari property Specify
Application Data). Berikan deskripsi feature pada property
Description dan biarkan property yang lain sesuai default-nya.
3. Setup Types
Mengonfigurasi tipe setup yang akan ditampilkan selama
instalasi. Berikut ini adalah definisi dari tipe setup:
a. Typical: tipe setup yang normal, meliputi banyak atau
semua feature program.
b. Minimal: terdiri atas feature yang harus ada untuk
menjalankan aplikasi hasil instalasi.
c. Custom: mengizinkan pengguna memilih feature yang
ingin diinstal.
Untuk menyembunyikan suatu tipe setup dalam kotak dialog
Setup Type, hilangkan tanda centang pada tipe setup tersebut
(bagian Setup Types). Deskripsi setiap tipe setup diberikan
pada property Description (kotak kanan atas). Pilih feature
yang akan diinstal untuk setiap tipe setup dengan memberi
tanda centang pada daftar feature yang ditampilkan pada
bagian Features installed for ... setup type: (kotak tengah
bawah).
Nama tipe setup dapat diubah dengan mengklik kanan mouse
pada tipe setup tersebut sehingga muncul menu pop-up. Pilih
menu Rename dan ganti namanya sesuai keinginan Anda.
Menu Move Up dan Move Down digunakan untuk mengubah
urutan tipe setup yang dipilih.
4. Upgrade Path
Opsi ini digunakan untuk memperbarui file setup yang lama.
Semua file dalam versi lama akan dihapus dan diganti dengan
semua file versi baru. Nilai property Product Code dan Product
Version yang baru harus berbeda dengan yang lama. Akan
tetapi, nilai property Upgrade Code-nya harus sama dengan
versi terdahulu.

252

Untuk menambahkan upgrade aplikasi, klik kanan mouse
pada bagian Upgrade Path (di kotak tengah), kemudian klik
menu New Upgrade Entry pada menu pop-up yang muncul.
Pada layar monitor, muncul kotak dialog Open. Cari file .MSI
atau file Setup.EXE yang terdiri atas file .MSI yang akan
menjadi upgrade, kemudian tekan tombol Open. Sebuah
Upgrade akan ditambahkan pada file setup.

Specify Application Data
1. Files
Menambahkan file-file aplikasi pada file setup. Tujuan utama
program setup adalah mentransfer file dari medium sumber
(misalnya CD) ke target tujuan (komputer lain). Property Files
terbagi dalam 4 (empat) kotak: 2 (dua) kotak sebelah kiri
berisi folder dan 2 (dua) kotak sebelah kanan menampilkan
file yang terletak di dalam folder tersebut. Di atas keempat
kotak tersebut tedapat ListBox Features:. Sebelum
menambahkan file, pilih dulu feature yang akan diisi pada
ListBox Features:. Secara default, ListBox Features: bernilai
Always Install.
a. Kotak kiri atas Source computerÊs folders: berisi folder di
mana file aplikasi dan pendukungnya yang akan
ditambahkan pada file setup. Pilih folder tempat aplikasi
yang akan dimasukkan dalam file setup. Sebagai contoh,
pilih D:Program.
b. Kotak kiri bawah Destination computerÊs folders:
merupakan folder sebagai tempat aplikasi hasil instalasi
yang ditentukan dalam property General Information (isi
property INSTALLDIR). Pilih folder Program[INSTALLDIR]
untuk menampung file .EXE, file .HLP, dan file .TXT.
Untuk menampung file database bagi unit ULingked, pilih
folder Database[DATABASEDIR] yang terletak di folder
Program[INSTALLDIR]. Klik tanda + sehingga folder yang
terletak di dalamnya akan ditampilkan.
c. Kotak kanan atas Source computerÊs files: menampilkan
file yang merupakan isi folder yang dipilih dalam kotak

253

Source computerÊs folders. Untuk menambahkan file
tersebut dalam file setup, pilih file dalam kotak ini, yaitu
file aplikasi berektensi EXE (Demo.Exe), file Help
(Help.hlp), file Readme.txt, dan file pendukung (file
gambar berektensi bmp), kemudian seret file-file tersebut
ke kotak Destination computerÊs files (dalam folder
Program[INSTALLDIR]). Untuk mengisi folder
Database[DATABASEDIR], seret semua file customer,
orders, items yang berekstensi .DB, .PX, .X*, dan Y*.
d. Kotak kiri bawah Destination computerÊs files:
menampilkan semua file yang ditambahkan ke folder
tujuan yang dipilih pada jendela Destination computerÊs
folders. Klik kanan mouse pada suatu file di kotak ini
untuk memperlihatkan menu pop-up untuk mengedit file
aplikasi.
2. Files and Features
Seluruh file aplikasi yang ditambahkan pada file setup akan
diperlihatkan dengan jelas pada bagian ini. Jika file setup
mempunyai lebih dari satu feature maka klik feature tersebut
untuk melihat isinya. File-file tersebut masih dapat diedit
dengan mengklik kanan file sehingga menu pop-up muncul.
3. Object/Moduls Merge
Menambahkan modul yang diperlukan bagi file yang akan
diinstalasi. Modul tersebut harus diasosiasikan dengan feature
yang ada. Aplikasi Sistem Akuisisi Data menggunakan file
database sehingga untuk menjalankannya memerlukan
Borland Database Engine (BDE) Administrator dalam sistem
operasi Windows. Oleh karena itu, tambahkan modul BDE
dengan memberi tanda centang pada CheckBox BDE_ENT.
Modul BDE_ENT hanya diasosiasikan dengan feature BDE
(beri tanda centang). Hilangkan tanda centang untuk feature
Always Install pada bagian Conditional Installation (kotak
kanan atas).
Pada saat instalasi dan kotak dialog Setup Type telah tampil,
pilih tipe setup Custom untuk menentukan apakah feature
BDE akan diinstal atau tidak.

254

4. Dependencies
Mempunyai fungsi memasukkan file-file di luar file aplikasi
yang diperlukan secara otomatis ketika aplikasi tersebut
dijalankan jika versi program InstallShield yang Anda gunakan
adalah full edition. Jika tidak, gunakan cara di atas, yaitu
menggabungkan suatu modul ke dalam file setup pada suatu
feature.

Configure the Target System
1. Shortcut/Folders
Membuat shortcut aplikasi pada komputer. Secara default,
InstallShield Express menawarkan empat lokasi shortcut yang
dapat dipilih. Menu Program dan Startup diletakkan pada Start
menu. Menurut standar industri dan Microsoft, shortcut
diletakkan dalam suatu folder Program. Folder Startup hanya
berisi shortcut aplikasi yang akan dijalankan setiap kali
menjalankan Windows. Pilihan selanjutnya, folder Send To,
akan diakses ketika pengguna mengklik kanan mouse pada
suatu file. Jika shortcut aplikasi dibuat pada folder Send To,
pengguna dapat mengklik kanan suatu file kemudian
mengirimkannya ke aplikasi tersebut untuk dibuka. Pilihan
yang terakhir, yaitu shortcut diletakkan pada Dekstop
komputer, ditampilkan dalam bentuk shortcut icon.
Untuk membuatnya, pilih lokasi shortcut, kemudian klik
kanan mouse sehingga menu pop-up muncul. Pilih menu New
Shortcut untuk membuat shortcut standar. Menu New
Advertised Shortcut berguna untuk membuat shortcut
advertise yang akan menjalankan Windows Installer jika ada
suatu file yang hilang untuk memperbaikinya. Menu yang
ketiga, yaitu New Shortcut to Preexisting file, membuat
shortcut suatu file yang tidak diinstal dalam file setup,
misalnya membuat shortcut Internet Explorer. Menu yang
terakhir, yaitu New Folder, digunakan untuk membuat folder
sebagai tempat bagi suatu shortcut.
Jika memilih dua menu yang pertama, sebuah kotak dialog
Browse for Shortcut Target akan muncul. Cari file EXE dengan

255

menekan folder di kotak beberapa kali sehingga menjadi
seperti Gambar 3.5, kemudian tekan tombol Open.

Gambar 3.5 Kotak dialog Browse for Shortcut Target

Ubah nama dan property shortcut (kotak kanan atas) sesuai
keinginan. Property Target menunjukkan file yang dipanggil
dengan shortcut tersebut. Property Run menunjukkan
bagaimana aplikasi akan ditampilkan ketika shortcut diklik
ganda. Property Working Directory menunjukkan direktori
kerja dari program aplikasi. Property Hot Key mengizinkan
kombinasi tombol keyboard untuk mengakses shorcut.
Caranya, klik sekali sel isiannya, kemudian tekan tombol
dan tekan kombinasi tombol Keyboard yang diinginkan pada
kotak dialog Hot Key yang muncul, lalu tekan tombol OK.
2. Registry
Installer secara otomatis akan membuatkan suatu register
berdasarkan nilai-nilai yang diberikan pada property General
Information. Biarkan sesuai default-nya
3. ODBC Resource
Mencocokkan driver, sumber data, dan translator yang diinstal
pada aplikasi. Jika ingin menginstal suatu ODBC Resource
yang terdapat dalam daftar, beri tanda centang pada ODBC
Resource yang dipilih. Jika tidak ada dalam daftar, klik kanan
icon Driver and DSNs, kemudian klik menu New Driver Ins

256

pada menu pop-up yang muncul. Masukkan nama baru untuk
Driver atau DSN tersebut dan ubah property-nya (kotak
tengah bawah). Setelah itu, asosiasikan ODBC Resource
tersebut dengan suatu feature file setup. Aplikasi Sistem
Akuisisi Data tidak memerlukan ODBC Resource sehingga
tidak perlu memberi tanda centang pada daftar Driver and
DSNs.
4. INI File Changes
Mengedit file .INI pada suatu sistem operasi sangat beresiko,
terutama jika file tersebut digunakan untuk fungsi standar
seperti file Boot.INI. File setup untuk aplikasi Sistem Akuisisi
Data tidak perlu mengubah property ini.
5. File Extensions
File Extension mengizinkan kita untuk menghubungkan suatu
file tertentu ke aplikasi. Jika file tersebut diklik ganda maka
aplikasi akan dijalankan dan file tersebut dibuka. Untuk
membuatnya, klik kanan mouse pada File Extensions,
kemudian pilih menu New Extension Ins yang muncul. Secara
default, opsi ini bernama Ext# (# merupakan nomor urut).
Masukkan nama ektensi tanpa titik (misalnya txt) dan ubah
beberapa property-nya (kotak kanan atas).

Customize the Setup Appearance
1. Dialogs
Merupakan kotak dialog yang muncul pada instalasi file setup.
InstallShield Express menyediakan 12 (dua belas) kotak
dialog sebagai navigasi selama instalasi. Untuk
membatasinya, hilangkan tanda centang pada kotak dialog
yang tidak ingin ditampilkan. Gambar pada setiap kotak
dialog dapat diubah dengan gambar lain bertipe Bitmap.
Secara umum, gambar tersebut terbagi dalam tiga jenis,yaitu
untuk Banner dengan ukuran 499x58, Image dengan ukuran
499x312, dan Splash dengan ukuran 465x281. Pengaturan
gambar tersebut dapat dilakukan secara global, caranya klik
icon Dialogs (kotak tengah atas), masukkan gambar
Image.bmp pada property Global Dialog Image dan gambar

257

Banner.bmp pada property Global Dialog Banner. Perubahan
gambar tersebut juga dapat dilakukan pada masing-masing
kotak dialog. Berikut ini property masing-masing kotak
dialog:
a. Splash Bitmap
Kotak dialog yang muncul pertama kali ketika file setup
dijalankan dan biasanya berisi gambar logo perusahaan.
Terdiri atas 2 (dua) property:
1) Splash Bitmap: berisi file bitmap (bmp) yang akan
ditampilkan dalam kotak dialog ini. Masukkan folder
dan nama filenya atau klik sekali sel isiannya dan
tombol , kemudian cari file bitmap-nya. Gambar
harus berukuran 465x281.
2) Sunken: pilih Yes jika ingin menampilkan gambar
splash cekung ke dalam dan pilih No untuk
menampilkan gambar rata dengan permukaan kotak
dialog Splash Bitmap.
b. Install Welcome
Kotak dialog ini mempunyai dua tujuan, yaitu
memberitahu pengguna bahwa file setup ini sedang
dijalankan dengan menampilkan nama aplikasi yang
merupakan nilai property Product Name (bagian General
Information) pada pesan welcome dan menampilkan
informasi hak cipta file setup tersebut. Kotak dialog ini
tidak dapat dihilangkan dari proses navigasi instalasi.
1) Bitmap Image: berisi gambar bitmap dengan ukuran
499x312.
2) Show Copyright: pilih Yes jika ingin menampilkan
informasi hak cipta untuk file setup.
3) Copyright Text: teks informasi hak cipta akan
ditampilkan jika property Show Copyright diset Yes.

258

c. License Agreement
Menampilkan End-User License Agreement (EULA).
Pengguna harus setuju dengan lisensi tersebut sebelum
melanjutkan instalasi. Secara default diset tidak setuju.
1) Binner Bitmap: berisi gambar binner dengan ukuran
499x58.
2) License File: isi dengan path lengkap dan nama file
lisensi atau klik sekali sel isiannya kemudian tekan
tombol untuk mencari file lisensi tersebut. File
merupakan file dokumen dengan ektensi rtf.
d. Readme
Menampilkan file readme aplikasi. Merupakan kotak
dialog pilihan dan secara default tidak dipilih.
1) Binner Bitmap: berisi gambar binner dengan ukuran
499x58.
2) Read File: isi dengan path lengkap dan nama file
readme atau klik sekali sel isiannya kemudian tekan
tombol untuk mencari file tersebut. File readme
juga berupa file dokumen dengan ektensi rtf.
e. Customer Information
Fungsinya adalah untuk mengumpulkan informasi
tentang pengguna: nama, perusahaan, dan nomor seri.
Kotak dialog ini dapat dihubungkan dengan suatu DLL
untuk memeriksa nomor seri untuk mencegah
penggunaan program ini secara tidak sah. Sebenarnya
kotak dialog ini tidak diperlukan, tetapi secara default
dipilih.
1) Banner Bitmap: berisi gambar binner dengan ukuran
499x58.
2) Show Serial Number: jika dipilih Yes maka isian nomor
seri akan ditampilkan.
3) Serial Number Template: memasukkan format nomor
seri dari file setup dan memfilter nomor seri

259

berdasarkan format. Misalnya, nomor serinya adalah
Rumono-0078-1234RS789 maka nilai property ini
ditulis ????-###-####??###. Tanda tanya (?) mewakili
karakter alfanumerik, sedangkan tanda pagar (#)
menunjukkan angka.
4) Serial Number Validation DLL: memasukkan path
lengkap dan nama file .DLL yang berisi fungsi validasi
nomor seri file setup. Klik sekali sel isiannya kemudian
tekan tombol untuk mencari file DLL tersebut.
Contoh kode program untuk file DLL dapat dilihat
pada C:Program FilesInstallShieldExpressSamples
ValidateSerialNumber.
Kode pada file ValidateSN.cpp menunjukkan bahwa
nomor seri terbagi dalam 3 (tiga) bagian yang dipisahkan
oleh tanda minus (nilai variabel TOKEN_SEPARATOR
dalam file ValidateSN.h). Bagian pertama harus diisi
dengan nilai variabel SERIALNUM_FIELD1 dalam file
ValidateSN.h, yaitu Field1. Karakter tersebut dapat ditulis
dalam huruf besar atau kecil. Bagian kedua diisi dengan
empat angka yang habis dibagi dengan 5 (lima),
misalnya 1505. Pada bagian ketiga, tidak ada
penyaringan input, artinya semua nilai akan diterima
pada bagian ini.
1) Validate Function: memasukkan nama fungsi dalam
file DLL yang akan memeriksa nomor seri yang
diberikan oleh pengguna. Isi dengan nilai ValidateSN
jika Anda menggunakan kode program seperti pada
file ValidateSN.cpp.
2) Success Return Value: memasukkan nilai yang
dihasilkan oleh fungsi validasi setelah berhasil. Pada
contoh kode program ValidateSN.cpp, menghasilkan
nilai 1 (nilai variabel VALIDATION_SUCCESS pada file
ValidateSN.h) jika berhasil dan -1 jika gagal. Nilai
variabel tersebut dapat diubah asal tidak 0. Oleh
karena itu, masukkan nilai 1 untuk property Seccess
Return Value.

260

3) Retry Limit: mengeset berapa kali pengguna diizinkan
mencoba memasukkan nomor seri. Sebagai contoh,
jika property ini diberi nilai 3 (tiga) maka pengguna
hanya diberikan kesempatan sebanyak 3 kali untuk
mencoba memasukkan nomor serinya. Jika pengisian
kali ketiga tetap salah maka setup akan ditutup.
4) Show All Users Option: pilih No jika aplikasi hasil
instalasi dapat dipakai untuk semua pengguna
komputer sebagai default. Jika dipilih Yes maka saat
instalasi pengguna dapat memilih apakah aplikasi
hasil instalasi dapat dipakai untuk semua pengguna
atau hanya untuk pengguna saat ini (pada Windows
NT, Windows 2000, atau Windows XP).
f. Destination Folder
Menampilkan folder tujuan dari file setup dan sebuah
tombol untuk mengubah lokasi folder tujuan tersebut.
Kotak dialog ini merupakan pilihan dan secara default
tidak dipilih.
1) Banner Bitmap: berisi gambar Banner berukuran
499x58.
2) Show Change Destination: pilih Yes jika ingin
menampilkan tombol Change yang mengizinkan
pengguna menentukan folder tujuan yang baru.
g. Database Folder
Menampilkan lokasi tujuan dari file-file database file
setup. Kotak dialog ini juga pilihan dan secara default
tidak dipilih.
499x58.

261

h. Setup Type
Menampilkan variasi konfigurasi setup yang didefinisikan
pada property Setup Types. Kotak dialog ini secara
otomatis akan disertakan dalam file setup jika
mempunyai lebih dari satu tipe setup. Jika hanya
mempunyai satu pilihan tipe setup, kotak dialog ini tidak
ditampilkan.
499x58.
i. Custom Setup
Hanya akan ditampilkan ketika pengguna memilih tipe
setup Custom Setup. Pada kotak dialog ini pengguna
dapat memilih feature yang ingin diinstal.
499x58.
j. Ready to Install
Merupakan kotak dialog yang muncul sebelum proses
pemindahan file dilakukan. Pengguna masih dapat
mengubah beberapa pilihan setup sebelum menginstal
aplikasi. Kotak dialog ini merupakan pilihan dan secara
default dipilih.
499x58.
2) Show Current Settings: pilih Yes jika ingin
menampilkan ringkasan setting instalasi pengguna
dalam suatu kotak statis (tidak dapat diedit).
k. Setup Progress
Menampilkan semua kegiatan seperti proses mentransfer
file yang dilakukan selama instalasi. Kotak dialog ini tidak
diperlukan.

262

499x58.
2) Show Progress Bar: Progress bar merupakan indikasi
banyaknya proses instalasi telah diselesaikan. Pilih
Yes jika ingin menampilkan Progress bar.
l. Setup Complete Success
Akan ditampilkan ketika proses intalasi telah berhasil
dilakukan. Kotak dialog ini selain menginformasikan
keberhasilan instalasi juga memberi kesempatan
pengguna menjalankan aplikasi atau membaca file
Readme-nya.
1) Bitmap Image: berisi gambar Image berukuran
499x312.
2) Show Launch Program: pilih Yes jika ingin memberi
kesempatan pengguna menjalankan aplikasi setelah
proses instalasi selesai.
3) Program File: memilih file eksekusi yang akan
dijalankan jika pengguna memberi tanda centang
pada CheckBox Launch the program pada kotak
dialog ini.
4) Show Readme: jika ingin memberi kesempatan
pengguna membaca file Readme setelah proses
instalasi selesai, pilih Yes.
5) Readme File: memasukkan path lengkap dan nama
file yang akan dihubungkan dengan CheckBox Show
the readme file pada kotak dialog ini.

Enable Automatic Updates
1. Update Service
Menyediakan kemampuan file setup dapat meng-upgrade
software secara otomatis. Property ini akan memberitahu dan
menyampaikan ke pengguna tentang upgrade aplikasi. Untuk
menambahkan kemampuan ini, beri nilai Yes pada property
Enable Update Service dan tentukan frekuensi (dalam satuan

263

hari) pengecekan upgrade file pada property Upgrade Check
Interval.

Define Setup Requirements and Actions
1. Requirement
Menetapkan target sistem yang diperlukan, baik hardware
maupun software bagi file setup. Jika nilai-nilai dalam
property ini tidak dipenuhi maka proses instalasi akan
dibatalkan.
a. OS Version: memilih sistem operasi komputer yang
diizinkan oleh file setup. Gunakan pilihan Any OS (kotak
kanan bawah) jika file setup dapat dijalankan pada setiap
sistem operasi.
b. Processor: memilih frekuensi minimum prosesor yang
diperlukan untuk menjalankan aplikasi.
c. RAM: memilih jumlah RAM minimum yang diperlukan
untuk menjalankan aplikasi.
d. Screen Resolution: memilih resolusi minimum monitor
yang diperlukan untuk menjalankan file setup.
e. Color Depth: memilih warna minimum yang diperlukan
untuk menjalankan aplikasi.

Prepare for Release
1. Build Your Releas
Informasi yang disusun pada setiap property akan digunakan
InstallShield dalam membuat file setup. Ada beberapa tipe
media (kotak tengah) yang dapat dipakai untuk membuat file
setup. Pilih media SingleImage. Jika memilih media ini, file
setup diletakkan pada harddisk komputer dan ukurannya
tidak terbatas (hanya bergantung pada kapasitas harddisk).
a. Compress Media: pilih Yes jika ingin memampatkan file
setup dalam file .CAB. File .MSI akan dimampatkan
sebelum dimasukkan dalam file Setup.exe.

264

b. Optimize for Media Size: jika dipilih Yes maka ukuran file
setup menjadi lebih kecil.
c. MSI Engine Version: memilih versi MSI Engine yang ingin
dimasukkan dalam aplikasi.
d. MSI Engine Location: menetapkan di mana instaler MSI
Engine InstMsiA.exe dan InstMsiW.exe akan diletakkan.
e. Include Setup.exe: menyertakan file Setup.exe dalam file
setup.
f. Password Protect Launcher: pilih Yes jika untuk membuka
file setup penguna harus memasukkan password.
g. Launcher Password: memasukkan password bagi file
setup. Password bersifat case sensitive, jadi nilai suatu
karakter dalam huruf besar tidak sama dengan dalam
huruf kecil.
h. Copy Media to Target Machine: pilih Yes untuk menyalin
isi media instalasi dan mengaktifkan dukungan Window
Installer seperti feature Advertisment dan perbaikkan
aplikasi.
i. Location for Copying Media: menentukan lokasi pada
komputer target di mana instalasi tersebut akan disalin.
j. Include MSI Engine(s): jika ingin menyertakan MSI
Engine dalam file setup, tentukan Engine yang akan
dimasukkan dari daftar. Jika tidak, pilih None.
k. Delay MSI Engine Reboot: pilih Yes jika ingin menunda
reboot sebagai hasil instalasi dari MSI Engine setelah
setup selesai dilakukan. Jika dipilih No maka reboot akan
dilakukan setelah selesai menginstal MSI Engine dan
sebelum menginstal file setup.
l. Suppress Launcher Warning: beberapa versi Windows
hanya akan mengizinkan update dengan paket service
dari Windows Installer Service dan akan membangkitkan
pesan peringatan. Pada keadaan ini, pengguna harus
mengklik OK untuk melanjutkan instalasi. Pilih Yes untuk
menyembunyikan pesan peringatan tersebut.

265

m. Generate Autorun.inf File: pilih Yes jika ingin membuat
file autorun yang akan segera menjalankan file setup
ketika media (misalnya CD) dimasukkan. Buat sebuah
file teks dengan aplikasi Notepad (biasanya shortcut
Notepad terletak pada menu Program | Accessories).
Ketikkan kode berikut:
[autorun]
open = filename

filename merupakan nama file yang akan dijalankan.
Ganti dengan Setup.exe jika file setup menyertakan file
Setup.exe. Simpan file teks tersebut dengan nama
Autorun.inf, lalu salin file teks ini bersama dengan file
Setup.exe yang dihasilkan dari kompilasi file setup dalam
media CD sehingga saat CD tersebut dimasukkan ke
CD-ROM, file Setup.exe akan segera dijalankan.
Untuk membuat file Setup.exe, kompilasi file setup tersebut
dengan mengklik menu Build | Build SingleImage. File Setup.exe
yang terbentuk, diletakkan pada folder D:SetupSoftwareSAD
ExpressSingleImageDiskImagesDISK1. Menu Build | Test
SingleImage digunakan untuk mengetes file Setup.exe yang
terbentuk tersebut, sedangkan menu Build | Run SingleImage
berguna untuk menjalankan file Setup.exe melalui aplikasi
InstallShield Express.

266

Membangun sistem akuisisi data berbasis database dengan delphi

More Related Content

More from Ilan Surf ﺕ (20)

Membangun sistem akuisisi data berbasis database dengan delphi