B.

Studi Kasus II – Input Processing I

Pada studi kasus II ini kita akan membahas beberapa komponen yang terkait
dengan input dan output. Seperti yang kita ketahui bahwa dalam aplikasi under
Windows banyak sekali jenis-jenis komponen yang dapat digunakan untuk
keperluan input dan output suatu nilai. Beberapa diantaranya adalah:

• Edit
• Memo
• Check Box
• Radio Button
• List Box
• Combo Box
• Scroll Bar

Untuk studi kasus ni kita akan membuat project sederhana yang di dalamnya
terdapat komponen-komponen di atas khususnya EDIT, MEMO, CHECK BOX.
Untuk Project ini kita membutuhkan form lebih dari satu (multi form). Untuk
memudahkan pemahaman, setiap komponen di atas diletakkan dalam satu form
tersendiri. Apabila kita ingin menyisipkan form baru, caranya klik menu FILE >
NEW FORM

STEP ONE – DESAIN FORM

1. Form Pertama – Form Utama

Dalam form ini akan diberikan menu utama. Form ini akan di load pertama
kali ketika project dijalankan. Pada form ini, user akan memilih menu apa
yang diinginkan. Selanjutnya akan tampil form baru sesuai menu yang
dipilihnya. Berikut ini adalah tampilan desainnya:

Berikut ini daftar komponen yang digunakan dan propertinya:

Jenis Komponen Properti Value

Form1 Caption Input – Output Processing
Name FormUtama
Height 202
Width 348
MainMenu1 Items [ ... ]
Label1 Caption Dibuat oleh: ....
Left 300

1
 BitButton1 Kind bkOK
Caption Ubah Warna Form
Name TombolWarna
Timer1 Name Timer1
Interval 5
ColorDialog1 Name PaletWarna
Image1 Picture [ ... ]

Keterangan:
Untuk MainMenu, desainlah menu seperti berikut ini

NB: Untuk menambahkan Short Cut, pilih properti SHORT CUT dan tentukan
nama short cutnya.

Save unit ini dengan klik menu FILE > SAVE, beri nama file UNITUTAMA.PAS

2. Form Kedua – Form untuk komponen Edit

Desainlah form seperti berikut ini

Berikut ini adalah tabel komponen yang digunakan dan propertinya

Jenis Komponen Properti Value

Form1 Caption Komponen Edit
Name FormEdit
Label1 Caption Masukkan Bilangan 1
Label2 Caption Masukkan Bilangan 2
Label3 Caption Hasil Penjumlahan

2
 Edit1 Name EditBil1
Text (kosongkan)
Edit2 Name EditBil2
Text (kosongkan)
Edit3 Name EditHslJml
Text (kosongkan)
Button1 Caption Jumlahkan
Name BtnJumlah
Button2 Caption Hapus
Name BtnHapus

Save unit ini dengan klik menu FILE > SAVE, beri nama file UNITEDIT.PAS

3. Form Ketiga – Form untuk komponen Memo

Desainlah form seperti di bawah ini

Berikut ini adalah tabel komponen yang digunakan dan propertinya

Jenis Komponen Properti Value

Form1 Caption Komponen Memo
Name FormMemo
Edit1 Name EditStringMemo
Text (kosongkan)
Memo1 Name Memo1
Lines [...] Kosongkan
Button1 Caption Tambahkan
Name TmbhStr
Button2 Caption Hapus
Name HpsStr

Save unit ini dengan nama file UNITMEMO.PAS

3
4. Form Keempat – Form untuk komponen Check Box

Desain formnya:

Tabel komponen dan propertinya

Jenis Komponen Properti Value

Form1 Caption Komponen Check Box
Name FormCheckBox
CheckBox1 Caption Pilihan Satu
CheckBox2 Caption Pilihan Dua
CheckBox3 Caption Pilihan Tiga
CheckBox4 Caption Pilihan Empat
Memo1 Name Memo2
Lines [...] Kosongkan
Button1 Caption Pilih
Name Button1
Button2 Caption Hapus
Name Button2

Save unit ini dengan nama file UNITCHECKBOX.PAS

5. Form Kelima – Form untuk komponen RadioButton

Desain formnya:

4
 Tabel komponen dan propertinya

Jenis Komponen Properti Value

Form1 Caption Komponen Radio Button
Name FormRadio
RadioButton1 Caption Pilihan Satu
Name Radio1
RadioButton2 Caption Pilihan Dua
Name Radio2
RadioButton3 Caption Pilihan Tiga
Name Radio3
Memo1 Name Memo3
Lines [kosongkan]
Button1 Caption Proses
Button2 Caption Hapus

Save unit ini dengan nama file UNITRADIO.PAS

6. Form Keenam – Form untuk List Box

Desain formnya:

Tabel komponen dan propertinya

Jenis Komponen Properti Value

Form1 Caption Komponen List Box
Name FormListBox
ListBox1 Caption Pilihan Satu
Name ListBoxKiri
Items Item 1
Item 2
Item 3
Item 4
ListBox2 Name ListBoxKanan
Items [kosongkan]
Button1 Caption >>
Button2 Caption <<

Save unit ini dengan nama file UNITLISTBOX.PAS

5
7. Form Ketujuh – Form untuk ComboBox

Desain formnya:

Tabel komponen dan propertinya

Jenis Komponen Properti Value

Form1 Caption Komponen Combo Box
Name FormComboBox
ComboBox1 Items Pilihan 1
Pilihan 2
Pilihan 3
Pilihan 4
Name ComboPilihan
Style CsDropDownList
Edit1 Name Tampilan
Enabled False
Text [kosongkan]

Save unit ini dengan nama file UNITCOMBOBOX.PAS

8. Form Kedelapan – Form untuk ScrollBar

Desain formnya:

Tabel komponen dan propertinya

Jenis Komponen Properti Value

Form1 Caption Komponen Scroll Bar
Name FormScrollBar
Edit1 Name Bilangan1
Enabled False
Text [kosongkan]
Edit2 Name Bilangan2
Enabled False
Text [kosongkan]
Edit3 Name Hasil
Enabled False
Text [kosongkan]

6
 ScrollBar1 Kind SbHorizontal
LargeChange 10
Max 200
Min 0
SmallChange 1
Name ScrollBar1
ScrollBar2 Kind SbHorizontal
LargeChange 10
Max 200
Min 0
SmallChange 1
Name ScrollBar2
Label1 Caption +
Label2 Caption =

Save unit ini dengan nama file UNITSCROLLBAR.PAS

STEP TWO – EVENT HANDLING

Setelah desain semua form siap, kita akan buat program untuk event
handlingnya.

1. Form Utama

Skenarionya:

Ketika program di run, label bertulisan ‘Dibuat oleh: ...’ melakukan scrolling
dari kanan ke kiri terus menerus. Kita juga dapat mengganti warna form
utama dengan mengklik tombol UBAH WARNA FORM.

• Event OnClick pada tombol UBAH WARNA FORM

procedure TFormUtama.TombolWarnaClick(Sender: TObject);

begin
If colordialog1.Execute then
FormUtama.Color := Colordialog1.Color;
end;

• Event OnTimer pada Timer1

procedure TFormUtama.Timer1Timer(Sender: TObject);

begin
if label1.left = -150 then label1.Left := 360;
Label1.Left := Label1.Left-1;
end;

2. Form Edit

Untuk menampilkan form edit yang kita buat tadi, caranya klik menu VIEW >
FORMS atau tekan SHIFT+F12. Pilih FormEdit.
7
 Skenarionya:

Kita masukkan sebarang bilangan ke kotak bilangan pertama dan bilangan

kedua, kemudian apabila diklik tombol JUMLAHKAN, maka akan tampil hasil
penjumlahan di kotak hasil penjumlahan. Tombol HAPUS digunakan untuk
membersihkan isian semua kotak. Berikut ini adalah program untuk event
handlenya:

• Event OnClick pada komponen BtnJumlah.

procedure TFormEdit.BtnJumlahClick(Sender: TObject);

begin
EditHslJml.Text :=
FloatToStr(StrToFloat(EditBil1.Text)+
strtofloat(editbil2.Text));
end;

• Event OnClick pada komponen BtnHapus

procedure TFormEdit.BtnHapusClick(Sender: TObject);

begin
EditBil1.Clear;
EditBil2.Clear;
EditHslJml.Clear;
end;

Untuk menghubungkan FormUtama dengan FormEdit ini, langkahnya:

1. Buka FormUtama dengan klik VIEW > FORMS, pilih FormUtama
2. Klik menu Jenis Komponen pada FormUtama, lalu klik Edit
3. Tuliskan perintah FormEdit.Show; pada procedure yang muncul.

Selanjutnya untuk melihat hasilnya, klik RUN. Apabila dalam Delphi muncul
informasi yang mirip seperti di bawah ini

Anda klik YES. Kemudian klik RUN sekali lagi.

3. Form Memo

Skenarionya:

User diminta memasukkan sebarang string di kotak ‘MASUKKAN STRING’,

kemudian apabila diklik tombol TAMBAHKAN maka string tersebut dimasukkan
ke MEMO. User dapat kembali memasukkan string dan menambahkannya ke
MEMO. Begitu seterusnya. Tombol HAPUS digunakan untuk menghapus isi
MEMO keseluruhan.

8
 • Event OnClick pada tombol TAMBAHKAN

procedure TFormMemo.TmbhStrClick(Sender: TObject);

begin
Memo1.Lines.Add(EditStringMemo.Text);
end;

• Event OnClick pada tombol HAPUS

procedure TFormMemo.HpsStrClick(Sender: TObject);

begin
Memo1.Clear;
end;

Supaya kotak string menjadi kosong setiap kali user mau mengisi string
kembali, maka tambahkan event OnClick pada kotak string (EditStringMemo).

• Event OnClick pada EditStringMemo

procedure TFormMemo.EditStringMemoClick(Sender: TObject);

begin
EditStringMemo.Clear;
end;

Jangan lupa untuk menghubungkan form memo ini ke menu utama

(hubungkan ke menu MEMO). Caranya sama seperti sebelumnya.

4. Form Check Box

Skenarionya:

User diminta men-cek beberapa pilihan dari empat pilihan yang ada.
Selanjutnya klik tombol PILIH. Pilihan yang di-cek akan ditampilkan ke dalam
memo. Tombol HAPUS digunakan untuk membersihkan memo dan pilihan.

• Event OnClick pada tombol PILIH (Button1)

procedure TFormCheckBox.Button1Click(Sender: TObject);

begin
If Option1.Checked = TRUE Then
Memo2.Lines.Add('Anda memilih opsi 1');
If Option2.Checked = TRUE Then
Memo2.Lines.Add('Anda memilih opsi 2');
If Option3.Checked = TRUE Then
Memo2.Lines.Add('Anda memilih opsi 3');
If Option4.Checked = TRUE Then
Memo2.Lines.Add('Anda memilih opsi 4');
end;

9
 • Event OnClick pada tombol HAPUS (Button2)

procedure TFormCheckBox.Button2Click(Sender: TObject);

begin
Memo2.Clear;
Option1.Checked := FALSE;
Option2.Checked := FALSE;
Option3.Checked := FALSE;
Option4.Checked := FALSE;
end;

Hubungkan form check box ini ke menu utama (menu checkbox).

5. Form Radio Button

Skenarionya:

User memilih pilihan berupa radio button, selanjutnya klik tombol PROSES.
Setelah tombol tersebut diklik, pada bagian memo muncul text yang terkait
dengan pilihan. Tombol HAPUS untuk membersihkan memo dan radiobutton.

• Event ONCLICK pada tombol PROSES

procedure TFormRadio.Button1Click(Sender: TObject);

begin
If Radio1.Checked = TRUE then
Memo3.Lines.Add('Anda Memilih Opsi 1');
If Radio2.Checked = TRUE then
Memo3.Lines.Add('Anda Memilih Opsi 2');
If Radio3.Checked = TRUE then
Memo3.Lines.Add('Anda Memilih Opsi 3');
end;

• Event ONCLICK pada tombol HAPUS

procedure TFormRadio.Button2Click(Sender: TObject);

begin
Memo3.Clear;
Radio1.Checked := FALSE;
Radio2.Checked := FALSE;
Radio3.Checked := FALSE;
end;

6. Form List Box

Skenarionya:

User memilih pilihan pada daftar/list yang ada disebelah kiri. Tombol >>
digunakan untuk memindahkan pilihan dari list kiri ke list kanan. Sedangkan
tombol << digunakan untuk sebaliknya.

10
 • Event ONCLICK pada tombol >>

procedure TFormListBox.Button1Click(Sender: TObject);

begin
ListBoxKanan.Items.Add(ListBoxKiri.Items[ListBoxKiri.ItemIndex]);
ListBoxKiri.Items.Delete(ListBoxKiri.Itemindex);
ListBoxKanan.Sorted := TRUE;
end;
• Event ONCLICK pada tombol <<

procedure TFormListBox.Button2Click(Sender: TObject);

begin
ListBoxKiri.Items.Add(ListBoxKanan.Items[ListBoxKanan.ItemIndex]);
ListBoxKanan.Items.Delete(ListBoxKanan.Itemindex);
ListBoxKiri.Sorted := TRUE;
end;

7. Form Combo Box

Skenarionya:

User memilih pilihan pada ComboBox, setelah dipilih kotak edit akan
menampilkan teks pilihannya.

• Event ONCHANGE pada ComboBox

procedure TFormComboBox.ComboPilihanChange(Sender: TObject);

begin
Tampilan.Text := ComboPilihan.Items[Combopilihan.ItemIndex];
end;

Catatan:
ONCHANGE merupakan salah satu dari event yang muncul ketika suatu
obyek diubah valuenya.

8. Form Scroll Bar

Skenarionnya:

User diminta menggeser-geser dua buah scroll bar. Apabila masing-masing

scrollbar digeser maka akan terjadi perubahan nilai pada kotak text. Kotak
teks paling kanan akan menampilkan hasil penjumlahan nilai dari dua kotak
teks di sebelah kirinya.

• Event ONACTIVATE pada FormScrollBar

procedure TFormScrollBar.FormActivate(Sender: TObject);

begin
Bilangan1.Text := IntToStr(ScrollBar1.Position);
Bilangan2.Text := IntToStr(ScrollBar2.Position);
Hasil.Text :=
IntToStr(StrToInt(Bilangan1.Text)+StrToInt(Bilangan2.Text));
end;

11
 Keterangan ONCHANGE:
Event ini digunakan untuk menampilkan penjumlahan ketika pertama kali
form scrollbar diaktifkan (ditampilkan).

• Event ONCHANGE pada ScrollBar Kiri

procedure TFormScrollBar.ScrollBar1Change(Sender: TObject);

begin
Bilangan1.Text := IntToStr(ScrollBar1.Position);
Hasil.Text :=
IntToStr(StrToInt(Bilangan1.Text)+StrToInt(Bilangan2.Text));
end;

• Event ONCHANGE pada ScrollBar Kanan

procedure TFormScrollBar.ScrollBar2Change(Sender: TObject);

begin
Bilangan2.Text := IntToStr(ScrollBar2.Position);
Hasil.Text :=
IntToStr(StrToInt(Bilangan1.Text)+StrToInt(Bilangan2.Text));
end;

12