Modul Pemrograman Visual 1 2011

MODUL KULIAH PEMROGRAMAN VISUAL 1 Disusun Oleh : RONNY FASLAH, S.KOM

LABORATORIUM KOMPUTER BISNIS POLITEKNIK NEGERI BANJARMASIN JURUSAN ADMINISTRASI BISNIS BANJARMASIN 2009 Pemrograman Visual 1 – Ronny Faslah - 2010

1

DAFTAR ISI DAFTAR ISI ..................................................................... 2 ATURAN PENGERJAAN LATIHAN .................................................. 4 PENILAIAN ..................................................................... 4 DAFTAR SHORTCUT ................................................................ 4 IDE DELPHI ..................................................................... 5 PROPERTY DAN EVENT ............................................................ 8 VARIABEL, PROCEDURE DAN FUNCTION....................................... 15 Latihan Latihan Latihan Latihan Latihan Latihan Latihan Latihan Latihan Latihan Latihan Latihan Latihan Latihan Latihan Latihan

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

: : : : : : : : : : : : : : : :

Hello World! .................................................... 18 Kalkulator ....................................................... 20 Kalkulator Lagi! ................................................ 23 Tugas 1 .......................................................... 24 Curriculum Vitae ............................................... 25 Gaji Karyawan .................................................. 29 Discount! ........................................................ 32 Tarif Operator Telekomunikasi .............................. 33 Horoscope ....................................................... 35 Jangan bilang siapa-siapa! ................................... 38 Listrik Untuk Kehidupan yang Lebih Baik .................. 39 Grafik ............................................................ 42 Data Pegawai ................................................... 48 Music Player .................................................... 55 Text Editor ...................................................... 65 Image Viewer ................................................... 73

PROYEK SISTEM INFORMASI RENTAL VCD/DVD ............................... 84 Latihan 17 : Membuat Database Rental .................................... 86 Latihan 18 : Membuat Form Utama ........................................ 92 Latihan 19 : Membuat Form Login .......................................... 99 Latihan 20 : Membuat Form Setup ........................................ 104 Latihan 21 : Membuat Form Member ...................................... 107 Latihan 22 : Membuat QuickReport Kartu Member ..................... 118 Latihan 23 : Membuat Form Koleksi ....................................... 122 Latihan 24 : Membuat Form Pemasok ..................................... 133 Latihan 25 : Membuat Form Karyawan.................................... 137 Latihan 26 : Membuat Form Peminjaman ................................ 142 Latihan 27 : Membuat QuickReport Nota Peminjaman ................. 155 Latihan 28 : Membuat Form Pengembalian .............................. 161 Latihan 29 : Membuat QuickReport Nota Pengembalian ............... 173 Latihan 30 : Membuat Form Daftar Member ............................. 180 Latihan 31 : Membuat Form Daftar Koleksi .............................. 187 Latihan 32 : Membuat Form Statistik ..................................... 195 Latihan 33 : Membuat Form Laporan Peminjaman ...................... 207 Latihan 34 : Membuat QuickReport Laporan Peminjaman ............. 214 Latihan 35 : Membuat Form Laporan Pengembalian .................... 219

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

2

Latihan Latihan Latihan Latihan Latihan Latihan

36 37 38 39 40 41

: : : : : :

Membuat QuickReport Laporan Pengembalian ........... 226 Membuat Form Laporan Koleksi Belum Kembali ......... 231 Membuat QuickReport Laporan Koleksi Belum Kembali. 237 Membuat Form Laporan Pendapatan ...................... 243 Membuat Form About ........................................ 250 Membuat Form Splash ........................................ 253

FREQUENTLY ASK QUESTION (FAQ)........................................... 255

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

3

ATURAN PENGERJAAN LATIHAN 1. Baca petunjuk dengan seksama. 2. Kerjakan latihan sesuai dengan urutan langkah-langkah yang tertulis. Pastikan setiap langkah tidak tertinggal atau terlewat dikerjakan. 3. Setelah mengetikkan perintah biasakan menekan Ctrl+F9 untuk mengcompile dan mengecek kesalahan penulisan perintah. 4. Simpan masing-masing latihan dalam folder yang terpisah. 5. Simpanlah pekerjaan Anda secara regular untuk mencegah kehilangan data akibat mati lampu. 6. Segera minta penjelasan kepada dosen/instruktur apabila ada yang tidak dimengerti. 7. Segera lapor kepada dosen/instruktur apabila aplikasi sudah berjalan dengan benar untuk mendapatkan penilaian hasil latihan.

PENILAIAN Keterangan

Min

Max

Status

Nilai

Selesai Pertamakali

100

Lulus

66 - 100

Selesai Kedua dst.

85

Tidak Lulus

0 - 65

Hadir tapi tidak selesai

70

75

Izin/Sakit/Alpa

0

65

DAFTAR SHORTCUT Shortcut Ctrl+F9 F9

Keterangan Compile atau pengecekan kesalahan Run, menjalankan aplikasi. Untuk menutup aplikasi yang sedang berjalan tekan Ctrl+F4. Ctrl+F2 Program Reset, kalau terjadi kesalahan. Ctrl+Shift+S Save All, menyimpan project dan semua unit. F11 Menampilkan Object Inspector. F12 Menampilkan Form Designer atau Unit Editor. Ctrl+F12 Menampilkan Unit Editor Shift+F12 Menampilkan Form Designer. F7 / F8 Trace, menelusuri jalannya aplikasi. F5 Watch, mengamati perubahan variable. Ctrl+Alt+F11 Menampilkan Project Manager.

Pemrograman Visual 1 – Ronny Faslah - 2010

4

IDE DELPHI Integrated Development Environment (IDE) Delphi merupakan aplikasi pengembangan system informasi dalam lingkungan visual yang terintegrasi. Delphi mempunyai code editor, compiler dan debugger yang terintegrasi bahkan Delphi juga mendukung berbagai platform system database.

Berikut adalah bagian-bagian dalam IDE Delphi : 1. Menu

2. Toolbar

3. Tab Komponen / Component Pallette

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

5

4. Form Editor

5. Code Editor

6. Object TreeView

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

6

7. Object Inspector

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

7

PROPERTY DAN EVENT Property 1. Dalam modul ini perubahan property komponen dituliskan dalam bentuk table seperti ini :

Komponen Label1

Tab Standard

Parent Form1

GroupBox1 Label2 Edit1 Label1, Label2

Standard Standard Standard

Form1 GroupBox1 GroupBox1

Property Font.Color Font.Style.fsBold Caption Caption Text Font.Style.fsItalic

Value clBlack True Departemen Bagian True

a. Kolom Komponen menyatakan komponen yang akan diubah propertynya, jadi pastikan komponen tersebut telah terpilih dengan benar. b. Kolom Tab menyatakan dimana komponen tersebut berada dalam komponen palet, pada contoh di atas komponen Label terdapat dalam tab Standard. c. Kolom Parent menyatakan dimana komponen tersebut harus diletakkan. Pada contoh di atas Label1 dan GroupBox1 diletakkan di Form1 sedangkan Label2 dan Edit1 harus diletakkan di dalam GroupBox1. d. Kolom Property menunjukkan property atau subproperty apa yang harus diubah. Property suatu komponen ditampilkan dalam Object Inspector. e. Kolom Value menunjukkan nilai yang harus dipilih, diubah atau diisikan pada property yang bersangkutan. f. Apabila dalam kolom Komponen terdapat lebih dari satu komponen ditulis bersamaan, hal ini berarti komponen-komponen tersebut harus dipilih baru diubah nilai propertynya. Pada contoh table di atas (baris ke lima), pilih Label1 dan Label2 kemudian ubah nilai property Font.Style.fsItalic menjadu True. 2. Untuk menambahkan komponen ke dalam suatu form, pilih tab dimana komponen berada.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

8

Arahkan kursor mouse di atas komponen, tunggu beberapa saat untuk menampilkan nama komponen. Kemudian lakukan salah satu langkah berikut untuk menambahkan komponen ke Form : a. Klik dua kali komponen yang dipilih. Delphi akan menambahkan komponen tersebut pada tengah-tengah form. b. Klik komponen yang akan ditambahkan, klik di form untuk menambahkan. Delphi secara otomatis akan menampilkan komponen dalam ukuran default, jadi tidak perlu didrag seperti pada aplikasi Visual Basic. 3. Sebelum mengubah property suatu komponen, pastikan komponen tersebut sudah dipilih dengan benar. Untuk memilih komponen lakukan salah satu cara di bawah ini : a. Langsung dipilih pada form.

b. Memilih melalui Object TreeView.

c. Memilih melalui Object Inspector.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

9

4. Sedapat mungkin pilih nilai property dari pilihan yang tersedia. Komponen Form1

Tab

Parent

Property Position

Value poDesktopCenter

5. Tanda + di depan nama property menunjukkan adanya subproperty dibawahnya, klik tanda + untuk membuka subproperty. Komponen Label1

Tab Standard

Parent Form1

Property Font.Color Font.Style.fsBold

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value clBlack True

10

6. Tombol Ellipsis […] pada property menunjukkan adanya wizard atau jendela untuk pengisian nilai property. Klik tombol ellipsis untuk membuka jendela wizard.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

11

7. Khusus property warna, warna yang ditampilkan dalam pilihan adalah warna-warna standard ditambah dengan warna yang berlaku pada color scheme windows. Untuk membuat warna baru, klik dua kali pada nilai warna di Object Inspector untuk membuka jendela warna.

Klik tombol Define Custom Color, atur level Hue, Sat dan Lum atau atur level Red, Green dan Blue. Klik Add to Custom Color, klik OK untuk melanjutkan.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

12

Hue Sat

Lum

Events 1. Setiap komponen mempunyai event masing-masing. Event terletak pada tab Event di Object Inspector.

2. Event merupakan procedure standard yang digunakan untuk memberikan reaksi terhadap suatu tindakan user, misalkan event OnClick merupakan reaksi yang akan kita berikan apabila user mengklik suatu object. 3. Untuk membuat event, pilih komponen, klik tab Event pada Object Inspector, klik dua kali di samping kanan nama event untuk membuka jendela editor, ketikkan perintah diantara blok begin .. end.

Pemrograman Visual 1 – Ronny Faslah - 2010

13

Tugas : 1. Buat program sederhana untuk memasukkan Nama, Tempat Lahir, Tanggal Lahir, Agama, Pendidikan Terakhir, Alamat, dan Kota. Lakukan pengujian untuk Nama, Tanggal Lahir, Alamat dan Kota wajib diisi. 2. Tugas dikumpul pada pertemuan teori berikutnya!

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

14

VARIABEL, PROCEDURE DAN FUNCTION Deklarasi Variabel 1. Setiap variable yang digunakan dalam aplikasi harus dideklarasikan berikut dengan type datanya. 2. Variabel dapat dideklarasikan pada berbagai level antara lain : a. Pada Local Procedure, variable yang dideklarasikan pada level ini hanya dikenali pada procedure atau function ini saja. Pada gambar di bawah ini, variable I hanya bisa dipakai pada procedure tersebut.

b. Pada blok Private, variable yang dideklarasikan pada level ini hanya akan dikenali oleh semua procedure/function yang ada pada Unit tersebut. Pada gambar berikut, variable I hanya bisa dipakai dalam procedure/function di dalam Unit2.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

15

c. Pada blok Public, variable yang dideklarasikan pada blok ini bisa dikenali oleh procedure/function yang ada di dalam Unit yang sama dan Unit lain yang menggunakan Unit tersebut. Pada gambar berikut, variable I bisa dipakai baik oleh Unit2 maupun Unit1.

Membuat Procedure atau Function 1. Procedure merupakan pengelompokan perintah untuk membuat program lebih mudah dibaca, dipahami atau dimodifikasi. 2. Function sama seperti procedure akan tetapi mempunyai nilai hasil (result value). 3. Dalam Delphi, Event selalu dibuat dalam bentuk procedure, sedangkan function terdapat dalam method yang dimiliki oleh suatu komponen.

4. Seperti halnya variable, procedure atau function juga harus dideklarasikan. Deklarasi procedure meliputi nama procedure dan parameter yang akan digunakan, sedangkan function meliputi nama function, parameter dan type data yang akan dihasilkan.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

16

5. Procedure dan Function dapat dideklarasikan pada blok Private, Public atau pada local procedure/function lain. 6. Untuk membuat procedure/function pada blok Private/Public, ketikkan kata [procedure][function] diikuti nama procedure/function yang akan dibuat.

Tekan tombol Ctrl+Shift+C procedure/function.

di

keyboard

untuk

membuat

blok

Ketikkan perintah/statement diantara blok Begin..End.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

17

Latihan 1 : Hello World!

Membuat aplikasi untuk menampilkan input nama dan alamat. Apabila tombol submit ditekan, kalau nama dan alamat diisi maka tampilkan pesan ‘Terima Kasih’ jika tidak maka tampilan pesan ‘Nama dan Alamat harus diisi’. Langkah-langkah : 1. Klik Start – All Programs – Borland Delphi 6 – Delphi 6 untuk menjalankan Borland Delphi 6. 2. Pilih Form1 pada Object TreeView, ubah property seperti pada table di bawah ini : Komponen Form1

Tab

Parent

Property Caption Name Position

Value Latihan 1 FLatihan1 poDesktopCenter

3. Klik menu File – Save All untuk menyimpan project, simpan Unit1 menjadi UFLatihan1.pas dan Project1 menjadi Latihan1.dpr. Simpan dalam folder Latihan1. 4. Tambahkan 2 buah Label, 2 buah Edit dan 1 buah Button dari tab Standard ke dalam FLatihan1, atur property seperti table di bawah ini : Komponen Label1

Tab Standard

Parent FLatihan1

Label2

Standard

FLatihan1

Edit1 Edit2 Button1

Standard Standard Standard

FLatihan1 FLatihan1 FLatihan1

Property Caption Font.Color Font.Style Caption Font.Color Font.Style Text Text Caption

Value Nama clRed [fsBold, fsItalic] Alamat clBlue [fsBold, fsItalic]

Submit

5. Atur layout Form1 seperti gambar di bawah ini :

6. Pilih Button1 pada Object TreeView, klik tab Event pada Object Inspector, klik dua kali event onClick untuk membuka jendela editor. Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

18

7. Ketikkan perintah berikut pada blok procedure yang baru dibuat. Komponen Button1

Event OnClick

Code procedure TForm1.Button1Click(Sender: TObject); begin If (Edit1.Text '') And (Edit2.Text '') then MessageDlg('Terima Kasih', mtInformation, [mbOK], 0) Else MessageDlg('Nama dan Alamat Harus Diisi', mtError, [mbOK], 0); end;

8. Tekan Ctrl + F9 untuk compile, atau F9 untuk menjalankan. 9. Simpan hasil pekerjaan dengan langkah sebagai berikut : a. Buat folder dengan nama Latihan1. b. Klik File – Save All. c. Ganti nama file Unit1 menjadi ULatihan1.Pas, klik Save untuk menyimpan unit tersebut. d. Ganti nama file Project1 menjadi Latihan1.dpr, klik Save untuk menyimpan project tersebut.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

19

Latihan 2 : Kalkulator

Membuat aplikasi kalkulator sederhana untuk operasi pembagian.

Langkah-langkah : 1. Klik File – New – Application untuk membuat aplikasi baru. 2. Ubah property Form1 seperti table di bawah ini : Komponen Form1

Tab

Parent

Property Caption Name Position

Value ‘Latihan 2’ FLatihan2 poDesktopCenter

3. Tambahkan 3 buah Label dan 3 buah Edit dari tab Standard, atur property 4. Tambahkan komponen pada form untuk membuat tampilan seperti di bawah ini :

5. Ubah property komponen berikut ini pada saat runtime melalui event OnCreate Form1 (lihat Latihan 1 point 3) : Komponen Form1

Label1 Label2 Label3 Edit1

Tab

Standard Standard Standard Standard

Parent

Form1 Form1 Form1 Form1

Property Caption Name Position Caption Caption Caption Text

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value ‘Latihan 2’ FLatihan2 poDesktopCenter ‘Bilangan 1’ ‘Bilangan 2’ ‘Hasil’ ‘0’

20

Edit2 Edit3 Button1

Standard Standard Standard

Form1 Form1 Form1

Text Text Caption

‘0’ ‘0’ ‘Bagi’

6. Buat event OnClick pada Button1 : Komponen Button1

Event OnClick

Edit1 Edit2

OnKeyPress

Code procedure TFLatihan2.Button1Click(Sender: TObject); Var X, Y : Integer; Z : Real; begin X := strtoint(Edit1.Text); Y := strtoint(Edit2.Text); Z := X / Y; Edit3.Text := Floattostr(Z); end; procedure TFLatihan2.Edit1KeyPress(Sender: TObject; var Key: Char); begin if not (Key in ['0'..'9','.',#8]) then Key := #0; end;

7. Tekan F9 untuk menjalankan. 8. Apabila aplikasi dijalankan dan bilangan kedua diisi dengan 0 maka akan terjadi muncul pesan error ‘Floating Point Division by Zero’ atau error karena adanya pembagian dengan angka 0. Untuk memperbaiki hal tersebut ubah event OnClick Button1 seperti di bawah ini : Komponen Button1

Event OnClick

Code procedure TFLatihan2.Button1Click(Sender: TObject); Var X, Y : Integer; Z : Real; begin X := strtoint(Edit1.Text); Y := strtoint(Edit2.Text); If Y 0 then Begin Z := X / Y; Edit3.Text := Floattostr(Z); End Else ShowMessage('Bilangan 2 = 0'); end;

9. Untuk melakukan formatting bilangan real pada hasil pembagian dapat digunakan fungsi FormatFLoat(Format, Bilangan), ubah event OnClick Button1 menjadi : Komponen Button1

Event OnClick

Code procedure TFLatihan2.Button1Click(Sender: TObject); Var X, Y : Integer; Z : Real;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

21

begin X := strtoint(Edit1.Text); Y := strtoint(Edit2.Text); If Y 0 then Begin Z := X / Y; Edit3.Text := FormatFLoat(‘0.00’, Z); End Else ShowMessage('Bilangan 2 = 0'); end;

10. Simpan dalam folder Latihan 2, ubah nama Unit1 menjadi ULatihan2.pas dan Project1 menjadi Latihan2.dpr (lihat Latihan 1 point 6).

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

22

Latihan 3 : Kalkulator Lagi!

Melengkapi kalkulator pada latihan 2 dengan menambahkan button untuk operasi Kali, Tambah dan Kurang.

Langkah-langkah : 1. Tambahkan 3 button untuk operasi Kali, Tambah dan Kurang. 2. Buat event OnClick pada masing-masing button yang baru ditambahkan (lihat Latihan 2 point 4). 3. Simpan dalam folder Latihan 3. 4. Bandingkan jawaban Anda dengan jawaban pada bagian akhir modul ini.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

23

Latihan 4 : Tugas 1

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

24

Latihan 5 : Curriculum Vitae

Membuat aplikasi untuk memasukkan data Riwayat Hidup Karyawan. Langkah-langkah : 1. Buat aplikasi baru (lihat Latihan 2 point 1). 2. Tambahkan komponen pada Form1, ubah property masing-masing komponen seperti pada table di bawah ini :

3. Buat event OnCreate pada Form1, ubah property masing-masing komponen seperti pada table di bawah ini. Listing program dapat dilihat pada table di bawahnya, perhatikan cara mengisikan items pada Combobox1 dan ListBox1. Komponen Form1

Tab

Parent

Label1

Standard

Form1

Label2 Label3

Standard Standard

Form1 Form1

Property Caption Name Position BorderStyle Caption Alignment Font.Name Font.Size Caption Caption

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value ‘Latihan 5’ FLatihan3 poDesktopCenter bsSingle ‘Daftar Riwayat Hidup’ taCenter ‘Trebuchet MS’ 18 ‘Nama’ ‘Tempat, Tanggal Lahir’

25

Komponen DateTimePicker1 Label4 RadioButton1 RadioButton2 Label5 Combobox1

Tab Win32 Standard Standard Standard Standard Standard

Parent Form1 Form1 Form1 Form1 Form1 Form1

Property Date Caption Caption Caption Caption Items

Label6 ListBox1

Standard Standard

Form1 Form1

Style Caption Items

Label7 Label8 Edit3 Button1 Button2 Button3

Standard Standard Standard Standard Standard Standard

Form1 Form1 Form1 Form1 Form1 Form1

Sorted Caption Caption MaxLength Caption Caption Caption

Komponen FLatihan3

Event OnCreate

Value Now ‘Jenis Kelamin’ ‘Pria’ ‘Wanita’ ‘Agama’ ‘Islam’ ‘Katolik’ ‘Protestan’ ‘Hindu’ ‘Budha’ csDropDownList ‘Pekerjaan’ ‘PNS’ ‘Swasta’ ‘TNI/Polri’ ‘Petani/Nelayan’ ‘Lainnya’ True; ‘Alamat’ ‘Kodepos’ 5 ‘Save’ ‘Reset’ ‘Close’

Code procedure TFLatihan3.FormCreate(Sender: TObject); begin Caption := 'Latihan 5'; Position := poDesktopCenter; BorderStyle := bsSingle; Label1.Caption := 'Daftar Riwayat Hidup'; Label1.Alignment := taCenter; Label1.Font.Name := 'Trebuchet MS'; Label1.Font.Size := 18; Label2.Caption := 'Nama'; Label3.Caption := 'Tempat, Tanggal Lahir'; //Menampilkan tanggal sekarang. DateTimePicker1.Date := Now; Label4.Caption := 'Jenis Kelamin'; RadioButton1.Caption := 'Pria'; RadioButton2.Caption := 'Wanita'; Label5.Caption := 'Agama'; //Menambahkan pilihan pada Combobox1 Combobox1.Items.Add('Islam'); Combobox1.Items.Add('Katolik'); Combobox1.Items.Add('Protestan'); Combobox1.Items.Add('Hindu'); Combobox1.Items.Add('Budha');

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

26

Combobox1.Style := csDropDownList; Label6.Caption := 'Pekerjaan'; //Menambahkan pilihan pada Listbox1 ListBox1.Items.Add('PNS'); ListBox1.Items.Add('Swasta'); ListBox1.Items.Add('TNI/POLRI'); ListBox1.Items.Add('Petani/Nelayan'); ListBox1.Items.Add('Lainnya'); ListBox1.Sorted := True; Label7.Caption := 'Alamat'; Label8.Caption := 'Kodepos'; Edit3.MaxLength := 5; Button1.Caption := 'Save'; Button2.Caption := 'Reset'; Button3.Caption := 'Close'; //Prosedur untuk mengosongkan form, lihat point 4. ResetForm; End;

4. Buat procedure ResetForm untuk menghapus isian form dengan langkah sebagai berikut : a. Ketikkan ‘procedure ResetForm;’ pada blok private/public. b. Tekan Ctrl + Shift + C untuk membuat blok procedure. c. Ketikkan statement di bawah ini : Komponen FLatihan3

Procedure ResetForm

Code procedure TFLatihan3.ResetForm; begin Edit1.Text := ''; Edit2.Text := ''; DateTimePicker1.Date := Now; Memo1.Text := ''; Edit3.Text := ''; End;

5. Buat Event On Click untuk Button1, Button2 dan Button3. Komponen Button1

Event OnClick

Button2

OnClick

Button3

OnClick

Code procedure TFLatihan3.Button1Click(Sender: TObject); begin ShowMessage('Terima Kasih ' + Edit1.Text + #13 + 'Anda telah mengisi Daftar Riwayat Hidup'); end; procedure TFLatihan3.Button2Click(Sender: TObject); begin ResetForm end; procedure TFLatihan3.Button3Click(Sender: TObject); begin Application.Terminate; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

27

6. Tekan F9 untuk menjalankan. 7. Simpan dalam folder Latihan 5.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

28

Latihan 6 : Gaji Karyawan

PT. Nusantara Jaya mempunyai 3 Departemen yaitu Administrasi, Keuangan dan Marketing. Untuk jenjang karier karyawan terdapat 4 Golongan yaitu I, II, III, dan IV. Departemen dan Golongan menentukan Gaji Pokok karyawan seperti pada table berikut ini : Administrasi Keuangan Marketing

I 750000 1000000 1250000

II 1000000 1250000 1500000

III 1250000 1500000 1750000

IV 1500000 1750000 2000000

Hanya Karyawan pria yang menikah mendapatkan Tunjangan Istri dan Tunjangan Anak. Tunjangan Istri sebesar 10% dari Gaji Pokok. Tunjangan Anak dihitung berdasarkan jumlah anak dengan aturan maksimal 2 anak yang diperhitungkan sebesar 5% dari Gaji Pokok. Total Gaji adalah gabungan Gaji Pokok, Tunjangan Istri dan Tunjangan Anak. Langkah-langkah : 1. Buat aplikasi baru (lihat Latihan 2 point 1), tambahkan komponen dan atur tata letaknya seperti gambar di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

29

2. Ubah property masing-masing komponen seperti pada table di bawah ini, lakukan perubahan menggunakan metode Design Time yaitu langsung melakukan perubahan nilai property pada Object Inspector : Komponen Form1

Tab

Label1

Standard

Label2 Label3 Label4 Label5 Label6 Label7 Label8 Label9 Label10 Label11 Combobox1

Standard Standard Standard Standard Standard Standard Standard Standard Standard Standard Standard

Property Caption Name Position Color Caption Font.Style Caption Caption Caption Caption Caption Caption Caption Caption Caption Caption Items

Style Items

ListBox1

RadioButton1 RadioButton2 CheckBox1 SpinEdit1 Button1 Button2 Button3

Standard Standard Standard Samples Standard Standard Standard

Caption Caption Caption MaxValue Caption Caption Caption

Value ‘Latihan 6’ FLatihan6 poDesktopCenter $00FF80FF ‘PERHITUNGAN GAJI KARYAWAN’ [fsBold] ‘Nama’ ‘Departemen’ ‘Golongan’ ‘Jenis Kelamin’ ‘Status’ ‘Jumlah Anak’ ‘Gaji Pokok’ ‘Tunjangan Istri’ ‘Tunjangan Anak’ ‘Total Gaji’ ‘Administrasi’ ‘Keuangan’ ‘Marketing’ csDropDownList I II III IV ‘Pria’ ‘Wanita’ ‘Menikah’ 10 ‘Hitung’ ‘Reset’ ‘Close’

3. Buat event On Click untuk Button1, Button2, Button3 : Komponen Button1

Event OnClick

Code procedure TFLatihan6.Button1Click(Sender: TObject); Const GajiPokok : Array [0..2,0..3] of Real = ((750000, 1000000, 1250000, 1500000), (1000000, 1250000, 1500000, 1750000), (1250000, 1500000, 1750000, 2000000)); var GP, TI, TA, TG : Real; begin GP := GajiPokok[Combobox1.ItemIndex,ListBox1.ItemIndex]; TI := 0; TA := 0; TG := 0;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

30

Button2

OnClick

Button3

OnClick

If CheckBox1.Checked And RadioButton1.Checked Then Begin TI := GP * 10 /100; If strtoint(SpinEdit1.Text) 60 0 – 30 31 – 60 > 60 0 – 30 31 – 60 > 60 0 – 30 31 – 60 > 60 0 – 30 31 – 60 > 60 0 – 30 31 – 60 > 60 0 – 30 31 – 60 > 60 0 – 30

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Biaya Pemakaian (Rp/Kwh) 123 265 360 200 295 360 169 360 495 275 445 495 385 445 495 254 420 470 420 465 515 470

39

31 – 60 > 60

473 523

Contoh perhitungan : Misalkan golongan Sosial dengan daya 900 Watt dan jumlah pemakaian 123 Kwh maka : Biaya Beban Biaya Pemakaian 123

= 900 / 1000 * 15000

= 13.500,-

= 123 * 360

= 44.280,-

Total Biaya Listrik Pajak Penerangan Jalan Umum (3%)

= 57.780,= 1.733,= 59.513,-

Materai Total Tagihan

=0 = 59.513,-

Catatan : 1. Pajak penerangan jalan umum (PPJU) sebesar 3% dari tagihan listrik. 2. Jika total biaya listrik + PPJU < 250.000 maka Materai = 0, Jika total biaya listrik + PPJU antara 250.000 – 1.000.000 maka Materai = 3000, Jika total biaya listrik + PPJU > 1.000.000 maka Materai = 6000.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

40

Langkah-langkah : 1. Buat aplikasi baru, tambahkan komponen dan atur tata letak komponen seperti contoh. 2. Gunakan struktur data Array untuk menyimpan data Biaya Beban dan Biaya Pemakaian. 3. Buat event onClick pada RadioGroup1 untuk mengupdate perubahan item Daya pada RadioGroup2. 4. Buat event onClick pada Button1 untuk melakukan perhitungan tarif. 5. Uji aplikasi, pilih Golongan, pilih Daya dan isi jumlah pemakaian, klik button hitung untuk melihat hasil perhitungan. 6. Simpan dalam folder Latihan 11.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

41

Latihan 12 : Grafik

Membuat berbagai bentuk grafik bentuk dasar dan turunannya. Pada aplikasi juga dapat dipilih warna garis, ketebalan garis, style garis, warna latar dan style latar. Untuk menampilkan grafik digunakan menubar yang menyediakan pilihan tampilan masing-masing bentuk grafik. Grafik ditampilkan pada form terpisah dan terbagi dalam empat buah tabsheet.

Langkah-langkah : 1. Buat aplikasi baru, tambahkan komponen MainMenu (ada pada tab Standard), double klik untuk membuka Menu Designer, buat MenuItem dan atur property komponen lain seperti dibawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

42

File Exit

Komponen Form1

MainMenu1 Statusbar1

Tab

Standard Win32

Shape Rectangle … Round Rectangle … Ellipse … Polygon … Property Caption Name Position Items

Value ‘Latihan 12’ FLatihan12 poDesktopCenter (Menu)

2. Klik menu File – New – Form, untuk membuat form baru (Form2). Tambahkan komponen dan atur property seperti pada table di bawah ini : Komponen Form2

Tab

Parent

Property Caption Name Position Height Width

Value ‘Standard Shape’ FGrafik poDesktopCenter 513 416

clBlack 1 psSolid psDash psDot psDashDot psDashDotDot psClear csDropDownList clRed bsClear bsSolid bsCross bsHorizontal bsBDiagonal bsFDiagonal bsDiagCross bsVertical csDropDownList alClient ‘Rectangle’ ‘Round Rectangle’ ‘Ellipse’ ‘Polygon’ alClient alClient alClient

Toolbar1 Toolbar2 ColorBox1 SpinEdit1 Combobox1

Win32 Win32 Additional Sample Standard

Form2 Form2 Toolbar1 Toolbar1 Toolbar1

Selected Value Items

ColorBox2 Combobox2

Additional Standard

Toolbar2 Toolbar2

Style Selected Items

PageControl1 TabSheet1 TabSheet2 TabSheet3 TabSheet4 PaintBox1 PaintBox2 PaintBox3

Win32

Form2 PageControl1 PageControl1 PageControl1 PageControl1 TabSheet1 TabSheet2 TabSheet3

Style Align Caption Caption Caption Caption Align Align Align

System System System

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

43

Komponen PaintBox4

Tab System

Parent TabSheet4

Property Align

Value alClient

3. Buat function PenStyle pada Form2, ketikkan ‘function PenStyle(S:Integer):TPenStyle;’ di blok private, tekan Ctrl + Shift + C, ketikkan statement berikut : Komponen FGrafik

Procedure PenStyle

Code function TFGrafik.PenStyle(S: Integer): TPenStyle; var PS : TPenStyle; begin Case S Of 0 : PS := psSolid; 1 : PS := psDash; 2 : PS := psDot; 3 : PS := psDashDot; 4 : PS := psDashDotDot; 5 : PS := psClear; End; Result := PS; end;

4. Buat function BrushStyle pada Form2, ketikkan ‘function BrushStyle(S:Integer):TBrushStyle;’ di blok private, tekan Ctrl + Shift + C, ketikkan statement berikut : Komponen FGrafik

Procedure BrushStyle

Code function TFGrafik.BrushStyle(S: Integer): TBrushStyle; var BS : TBrushStyle; begin Case S Of 0 : BS := bsClear; 1 : BS := bsSolid; 2 : BS := bsCross; 3 : BS := bsHorizontal; 4 : BS := bsBDiagonal; 5 : BS := bsFDiagonal; 6 : BS := bsDiagCross; 7 : BS := bsVertical; End; Result := BS; End;

5. Buat variable baru pada blok public dengan nama ‘Shape:Integer’ untuk menampung pilihan bentuk yang ingin ditampilkan. 6. Buat event onCreate dan onShow pada Form2, ketikkan statement berikut ini : Komponen FGrafik

Event oCreate

Code procedure TFGrafik.FormCreate(Sender: TObject);

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

44

onShow

begin Shape := 1; PageControl1.ActivePage := TabSheet1; end; procedure TFGrafik.FormShow(Sender: TObject); begin Case Shape Of 1 : PageControl1.ActivePage := TabSheet1; 2 : PageControl1.ActivePage := TabSheet2; 3 : PageControl1.ActivePage := TabSheet3; 4 : PageControl1.ActivePage := TabSheet4; End; end;

7. Buat event onPaint pada komponen PaintBox1, PaintBox2, PaintBox3 dan PaintBox4 di Form2, ketikkan statement berikut ini : Komponen PaintBox1

Event OnPaint

PaintBox2

OnPaint

PaintBox3

OnPaint

Code procedure TFGrafik.PaintBox1Paint(Sender: TObject); begin With PaintBox1 do Begin Canvas.Pen.Color := ColorBox1.Selected; Canvas.Pen.Width := SpinEdit1.Value; Canvas.Pen.Style := PenStyle(ComboBox1.ItemIndex); Canvas.Brush.Color := ColorBox2.Selected; Canvas.Brush.Style := BrushStyle(Combobox2.ItemIndex); Canvas.Rectangle(20, 20, PaintBox1.Width - 20, PaintBox1.Height - 20); End; end; procedure TFGrafik.PaintBox2Paint(Sender: TObject); begin With PaintBox2 do Begin Canvas.Pen.Color := ColorBox1.Selected; Canvas.Pen.Width := SpinEdit1.Value; Canvas.Pen.Style := PenStyle(ComboBox1.ItemIndex); Canvas.Brush.Color := ColorBox2.Selected; Canvas.Brush.Style := BrushStyle(Combobox2.ItemIndex); Canvas.RoundRect(20, 20, PaintBox2.Width - 20, PaintBox2.Height - 20, 30, 30); End; end; procedure TFGrafik.PaintBox3Paint(Sender: TObject); begin With PaintBox3 do Begin Canvas.Pen.Color := ColorBox1.Selected; Canvas.Pen.Width := SpinEdit1.Value; Canvas.Pen.Style := PenStyle(ComboBox1.ItemIndex); Canvas.Brush.Color := ColorBox2.Selected; Canvas.Brush.Style := BrushStyle(Combobox2.ItemIndex); Canvas.Ellipse(20, 20, PaintBox3.Width - 20, PaintBox3.Height - 20);

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

45

End; end;

PaintBox4

OnPaint

procedure TFGrafik.PaintBox4Paint(Sender: TObject); Const PI = 22/7; var P : Array[0..360] of TPoint; a, R, count, CenterX, CenterY : Integer; c : real; begin Count := 8; C := 2*PI/Count; R := (PaintBox4.Width - 40) div 2; CenterX := PaintBox4.Width div 2; CenterY := PaintBox4.Height Div 2; For A := 0 to Count - 1 do Begin P[A].X := CenterX - Round(R * Cos(A*C+PI/2)); P[A].Y := CenterY - Round(R * Sin(A*C+PI/2)); End; With PaintBox4 do Begin Canvas.Pen.Color := ColorBox1.Selected; Canvas.Pen.Width := SpinEdit1.Value; Canvas.Pen.Style := PenStyle(ComboBox1.ItemIndex); Canvas.Brush.Color := ColorBox2.Selected; Canvas.Brush.Style := BrushStyle(Combobox2.ItemIndex); Canvas.Polygon(Slice(P, Count)); End; end;

8. Buat event onChange untuk komponen ColorBox1, SpinEdit1, Ketikkan statement Combobox1, ColorBox2 dan Combobox2. berikut ini : Komponen ColorBox1

Event OnChange

SpinEdit1 Combobox1 ColorBox2 Combobox2

onChange onChange onChange onChange

Code procedure TForm2.ColorBox1Change(Sender: TObject); begin Case PageControl1.TabIndex of 0 : PaintBox1Paint(Self); 1 : PaintBox2Paint(Self); 2 : PaintBox3Paint(Self); 3 : PaintBox4Paint(Self); End; end; ColorBox1Change(Self); ColorBox1Change(Self); ColorBox1Change(Self); ColorBox1Cahnge(Self);

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

46

9. Kembali ke FLatihan12, buat event onClick pada masing-masing MenuItem, ketikkan statement berikut ini : Komponen Exit1

Event onClick

Rectangle1

onClick

RoundRectangle1

onClick

Ellipse1

onClick

Polygon1

onClick

Code procedure TFLatihan12.Exit1Click(Sender: TObject); begin Application.Terminate; end; procedure TFLatihan12.Rectangle1Click(Sender: TObject); begin FGrafik.Shape := 1; FGrafik.ShowModal; end; procedure TFLatihan12.RoundRectangle1Click(Sender: TObject); begin FGrafik.Shape := 2; FGrafik.ShowModal; end; procedure TFLatihan12.Ellipse1Click(Sender: TObject); begin FGrafik.Shape := 3; FGrafik.ShowModal; end; procedure TFLatihan12.Polygon1Click(Sender: TObject); begin FGrafik.Shape := 4; FGrafik.ShowModal; end;

10. Tekan F9 untuk menjalankan. 11. Klik File – Save All untuk menyimpan semua unit dan project, simpan dalam folder Latihan 12.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

47

Latihan 13 : Data Pegawai

Aplikasi ini menggunakan konsep Array dan Record untuk menyimpan data Karyawan secara temporer. Aplikasi menggunakan dua buah form, Form1 untuk memasukkan data karyawan dan Form2 untuk menampilkan data dalam bentuk table pada komponen TStringGrid. Folder Button = C:\Program Files\Common Files\Borland Shared\Images\Buttons Langkah-langkah : 1. Buat aplikasi baru, klik File – New – Application … 2. Tambahkan 3 buah Label dan 2 buah Edit dari tab Standard, ubah property seperti table di bawah ini : Komponen Label1

Tab Standard

Parent Form1

Label2 Label3 Edit1, Edit2

Standard Standard Standard

Form1 Form1 Form1

Property Caption Font.Style Caption Caption Text

Value Data Karyawan [fsBold] NIK Nama

3. Tambahkan RadioGroup1 dan GroupBox1 dari tab Standard, ubah property seperti table di bawah ini : Komponen RadioGroup1

GroupBox1

Tab Standard

Standard

Parent Form1

Property Items

Form1

Caption Columns Caption

Value Administrasi Keuangan Kepegawaian Pemasaran Bagian 2 Penghasilan

4. Tambahkan 3 buah Label dan 3 buah Edit dari tab Standard ke dalam GroupBox1. Ubah property seperti table di bawah ini : Komponen Label4 Label5 Label6 Edit3 Edit4 Edit5

Tab Standard Standard Standard Standard Standard Standard

Parent GroupBox1 GroupBox1 GroupBox1 GroupBox1 GroupBox1 GroupBox1

Property Caption Caption Caption Text Text Text

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value Gaji Pokok Tunjangan Total Gaji 0 0 0

48

5. Tambahkan 4 buah BitBtn dari tab Additional. Ubah property seperti table di bawah ini : Komponen BitBtn1

Tab Additional

Parent Form1

BitBtn2

Additional

Form1

BitBtn3

Additional

Form1

BitBtn4

Additional

Form1

Property Caption Glyph Caption Glyph Caption Glyph Caption Glyph

Value Simpan Filesave.bmp Reset Retry.bmp Close Dooropen.bmp Daftar Foldrdoc.bmp

6. Atur layout Form1 seperti gambar di bawah ini :

7. Deklarasikan type Record KaryawanRec didalam blok type pada unit1. Lihat gambar di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

49

8. Deklarasikan variable Array sebanyak 10 elemen [0..9] dengan type KaryawanRec dan variable NoUrut dengan type Integer pada blok Var. Lihat gambar di bawah ini :

9. Buat event-event berikut pada masing-masing komponen : Komponen Form1

Event OnCreate

Code procedure TForm1.FormCreate(Sender: TObject); begin NoUrut := 0; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

50

Komponen Edit3, Edit4

Event OnChange

BitBtn2

onClick

BitBtn1

OnClick

BitBtn3

onClick

Code procedure TForm1.Edit3Change(Sender: TObject); Var G, T : Real; Begin If Edit3.Text ‘’ then G := strtofloat(Edit3.Text) Else G := 0; If Edit4.Text ‘’ then T := strtofloat(Edit4.Text) Else T := 0; Edit5.Text := FormatFloat(',0', G + T); end; procedure TForm1.BitBtn2Click(Sender: TObject); begin Edit1.Text := ''; Edit2.Text := ''; RadioGroup1.ItemIndex := -1; Edit3.Text := '0'; Edit4.Text := '0'; Edit5.Text := '0'; end; procedure TForm1.BitBtn1Click(Sender: TObject); begin If MessageDlg('Simpan Data?', mtConfirmation, [mbYes, mbNo], 0) = mrYes then Begin Karyawan[NoUrut].NIK := Edit1.Text; Karyawan[NoUrut].Nama := Edit2.Text; Karyawan[NoUrut].KodeBagian := RadioGroup1.ItemIndex; Karyawan[NoUrut].GajiPokok := strtofloat(Edit3.Text); Karyawan[NoUrut].Tunjangan := strtofloat(Edit4.Text); NoUrut := NoUrut + 1; BitBtn2Click(Self); End; end; procedure TForm1.BitBtn3Click(Sender: TObject); begin Close; end;

10. Klik menu File – New – Form untuk membuat form baru (Form2). 11. Tambahkan 1 buah BitBtn dan 1 buah StringGrid dari tab Additional. Ubah property seperti table di bawah ini : Komponen BitBtn1

Tab Additional

Parent Form2

StringGrid1

Additional

Form2

Property Caption Glyph ColCount RowCount

Value Close Dooropen.bmp 7 11

12. Klik menu File – Use Unit, kemudian pilih Unit1. Klik OK untuk melanjutkan.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

51

13. Buat event-event berikut pada masing-masing komponen : Komponen Form2

Event OnCreate

onShow

Code procedure TForm2.FormCreate(Sender: TObject); begin With StringGrid1 do Begin Cells[0,0] := 'NO.'; Cells[1,0] := 'NIK'; Cells[2,0] := 'NAMA'; Cells[3,0] := 'BAGIAN'; Cells[4,0] := 'GAJI POKOK'; Cells[5,0] := 'TUNJANGAN'; Cells[6,0] := 'TOTAL'; End; end; procedure TForm2.FormShow(Sender: TObject); Var Baris : Integer; begin For Baris := 0 to NoUrut - 1 do Begin With StringGrid1 do Begin Cells[0, Baris + 1] := inttostr(Baris + 1); Cells[1, Baris + 1] := Karyawan[Baris].NIK; Cells[2, Baris + 1] := Karyawan[Baris].Nama; Cells[3, Baris + 1] := Form1.RadioGroup1.Items[Karyawan[Baris].KodeBagian]; Cells[4, Baris + 1] := FormatFloat(',0', Karyawan[Baris].GajiPokok); Cells[5, Baris + 1] := FormatFloat(',0', Karyawan[Baris].Tunjangan); Cells[6, Baris + 1] := FormatFloat(',0', Karyawan[Baris].GajiPokok + Karyawan[Baris].Tunjangan); End;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

52

Komponen

Event

BitBtn1

onClick

Code End; end; procedure TForm2.BitBtn1Click(Sender: TObject); begin Close; end;

14. Kembali ke Form1, klik menu File – Use Unit, pilih Unit2. Klik OK untuk melanjutkan (lihat point 12). 15. Buat event onClick pada komponen BitBtn4, ketikkan perintah seperti table di bawah ini : Komponen BitBtn4

Event onClick

Code procedure TForm1.BitBtn4Click(Sender: TObject); begin Form2.ShowModal; end;

16. Jalankan dan uji aplikasi. Isi NIK dan Nama, pilih Bagian, Isi Gaji Pokok dan Tunjangan. Klik Simpan untuk menyimpan data karyawan. Klik Reset untuk mengosongkan form. Klik Daftar untuk menampilkan data yang telah dimasukkan dalam bentuk tabulasi.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

53

17. Klik File – Save All untuk menyimpan semua unit dan project, simpan dalam folder Latihan 13.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

54

Latihan 14 : Music Player

Aplikasi berikut ini merupakan contoh pembuatan form dengan berbagai bentuk dan contoh penerapan komponen MediaPlayer untuk memainkan file music dengan ekstensi *.mp3, *.wav dan *.mid. Aplikasi akan terdiri dari 2 buah form yaitu form1 untuk interface mp3 player dan form2 untuk interface playlist. Langkah-langkah : 1. Buat dua buah gambar berikut menggunakan Microsoft Paint atau aplikasi lain. Gambar pertama (Form1.bmp) untuk interface mp3 player dan gambar kedua (Form2.bmp) untuk interface playlist (daftar lagu).

Contoh gambar form dan button ada pada folder ‘Materi Latihan 13, 14 dan 15’.

2. Buat aplikasi baru, klik File – New – Applications … 3. Ubah property Form1 seperti pada table di bawah ini : Komponen Form1

Tab

Parent

Property AlphaBlend AlphaBlendValue Autosize BorderStyle TransparentColor TransparentColorValue

Value True 250 True bsNone True clWhite

4. Tambahkan Image1, ubah property Image1 seperti pada table di bawah ini : Komponen Image1

Tab Additional

Parent Form1

Property Autosize Picture

Value True Form1.bmp

5. Tambahkan 5 buah Label, ubah property masing-masing komponen seperti table di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

55

Komponen Label1

Tab Standard

Parent Form1

Label2 Label3 Label4 Label5 Label1, Label2, Label3, Label4, Label5 Label3, Label4, Label5

Standard Standard Standard Standard

Form1 Form1 Form1 Form1

Property Caption AutoSize Font.Style Caption Caption Caption Caption Transparent

Value Judul Lagu False [fsBold] Waktu Repeat Shuffle StayOnTop True

Enabled

False

6. Tambahkan ProgressBar1 dari tab Win32. 7. Tambahkan MediaPlayer1 dari tab System. Ubah property berikut : Komponen MediaPlayer1

Tab System

Parent Form1

Property Visible

Value False

8. Tambahkan Timer1 dari tab System. Ubah property berikut : Komponen Timer1

Tab System

Parent Form1

Property Enabled

Value False

9. Tambahkan 10 buah Image, ubah property masing-masing komponen seperti table di bawah ini : Komponen Image2, Image3, Image4, Image5, Image6, Image7, Image8, Image9, Image10, Image11 Image2 Image3 Image4 Image5 Image6 Image7 Image8 Image9 Image10 Image11

Tab Additional

Parent Form1

Property Autosize Cursor Transparent

Value True crHandPoint True

Picture Picture Picture Picture Picture Picture Picture Picture Picture Picture

8play24.bmp 8Pause24.bmp 8stop24.bmp 8backward24.bmp 8forward24.bmp 8chat24.bmp 8refresh24.bmp 8stats24.bmp 8app24.bmp 8close24.bmp

10. Atur layout masing-masing komponen seperti gambar di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

56

11. Buat form baru (Form2), klik menu File – New – Form. 12. Ubah property pada Form2 seperti pada table di bawah ini : Komponen Form2

Tab

Parent

Property AlphaBlend AlphaBlendValue Autosize BorderStyle TransparentColor TransparentColorValue

Value True 250 True bsNone True clWhite

13. Tambahkan 6 buah komponen Image, ubah property masing-masing komponen seperti pada table di bawah ini : Komponen Image1

Tab Additional

Parent Form2

Image2, Image3, Image4, Image5, Image6 Image2 Image3 Image4 Image5 Image6

Property Autosize Picture Autosize Cursor Transparent Picture Picture Picture Picture Picture

Value True Form2.bmp True crHandPoint True 8addfile24.bmp 8trash24.bmp 8floppy24.bmp 8foldermove24.bmp 8close24.bmp

14. Tambahkan komponen ListBox1 dari tab Standard, ubah property ListBox1 seperti pada table di bawah ini : Komponen ListBox1

Tab Standard

Parent Form2

Property Color Ctl3D

Value $00C080FF False

15. Tambahkan 2 buah komponen OpenDialog dan 1 buah SaveDialog dari tab Dialog, ubah property masing-masing komponen seperti pada table di bawah ini : Komponen OpenDialog1

OpenDialog2

SaveDialog1

Tab Dialog

Dialog

Dialog

Parent Form2

Form2

Form2

Property DefaultExt Filter Options. ofAllowMultiSelect DefaultExt Filter DefaultExt Filter

Value *.mp3 Filter Name File Musik (*.mp3, *.wav, *.mid) True *.pls Filter Name File Playlist (*.pls) *.pls Filter Name File Playlist (*.pls)

Filter *.mp3; *.wav; *.mid

Filter *.pls Filter *.pls

16. Atur layout Form2 seperti pada gambar di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

57

17. Buat event berikut pada masing-masing komponen seperti pada table di bawah ini : Komponen Form2

Event onCreate

Image1

onMouseDown

Image2

onClick

Image3

onClick

Code procedure TForm2.FormCreate(Sender: TObject); begin Left := Form1.Left; Top := Form1.Top + Form1.Height; end; procedure TForm2.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin ReleaseCapture; Perform(WM_SYSCOMMAND, $F012, 0); end; procedure TForm2.Image2Click(Sender: TObject); Var NoUrut : Integer; begin If OpenDialog1.Execute then Begin NoUrut := ListBox1.Items.Count - 1; ListBox1.Items.AddStrings(OpenDialog1.Files); If ListBox1.Items.Count > 0 then ListBox1.ItemIndex := NoUrut + 1; End; end; procedure TForm2.Image3Click(Sender: TObject); begin If ListBox1.ItemIndex >= 0 then ListBox1.Items.Delete(ListBox1.ItemIndex); end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

58

Komponen Image4

Event onClick

Image5

onClick

Image6

onClick

Code procedure TForm2.Image4Click(Sender: TObject); begin If SaveDialog1.Execute then ListBox1.Items.SaveToFile(SaveDialog1.FileName); end; procedure TForm2.Image5Click(Sender: TObject); begin If OpenDialog2.Execute then Begin ListBox1.Items.LoadFromFile(OpenDialog2.FileName); If ListBox1.Items.Count > 0 then ListBox1.ItemIndex := 0; End; end; procedure TForm2.Image6Click(Sender: TObject); begin Close; end;

18. Kembali ke Form1. Gunakan Project Manager (Ctrl+Alt+F11) atau pilih Unit1 pada Code Editor kemudian tekan F12.

19. Tambahkan variable State dengan type Integer pada blok Public, lihat gambar berikut :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

59

20. Buat procedure Play, Pause, Resume, Stop, Next dan Prev pada blok Public (lihat gambar di point 19), tekan Ctrl+Shift+C untuk membuat blok procedure dan ketikkan perintah berikut ini : Komponen Form1

Procedure Play

Form1

Pause

Form1

Resume

Code procedure TForm1.Play; begin With Form2 do Begin If ListBox1.ItemIndex -1 then Begin MediaPlayer1.FileName := ListBox1.Items[ListBox1.ItemIndex]; MediaPlayer1.Open; Form1.Label1.Caption := MediaPlayer1.FileName; Timer1.Enabled := True; ProgressBar1.Max := MediaPlayer1.Length; MediaPlayer1.Notify := True; State := 1; MediaPlayer1.Play; End; End; end; procedure TForm1.Pause; begin If State = 1 then Begin State := 2; Timer1.Enabled := False; MediaPlayer1.Pause; End; end; procedure TForm1.Resume; begin If State = 2 then Begin State := 1;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

60

Komponen

Procedure

Form1

Stop

Form1

Next

Form1

Prev

Code Timer1.Enabled := True; MediaPlayer1.Resume; End; end; procedure TForm1.Stop; begin If State = 1 then Begin State := 0; Timer1.Enabled := False; MediaPlayer1.Stop; End; end; procedure TForm1.Next; begin If State in [0, 1, 2] then Begin With Form2.ListBox1 do Begin If ItemIndex = (Items.Count - 1) then Begin If Label3.Enabled then ItemIndex := 0 else ItemIndex := -1; End else ItemIndex := ItemIndex + 1; If Label4.Enabled then ItemIndex := Random(Items.Count - 1); End; Play; End; end; procedure TForm1.Prev; begin With Form2.ListBox1 do Begin If ItemIndex = 0 then ItemIndex := Items.Count - 1 else ItemIndex := ItemIndex - 1; If Label4.Enabled then ItemIndex := Random(Items.Count - 1); End; Play; end;

21. Buat function Int2TimeStr(I : Integer):String; pada blok Public (lihat gambar di point 19). Tekan Ctrl+Shift+C untuk membuat blok function, ketikkan perintah berikut ini : Komponen Form1

Function Int2TimeStr

Code function TForm1.Int2TimeStr(I: Integer): String; begin I := I Div 1000; Result := FormatFloat('00', I Div 3600) + ':' + FormatFloat('00', I Div 60) + ':' + FormatFloat('00', I Mod 60); end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

61

22. Buat event berikut pada masing-masing komponen seperti pada table di bawah ini : Komponen Form1

Event OnCreate

onShow

Timer1

OnTimer

Image1

onMouse Down

Image2

onClick

Image3

onClick

Image4

onClick

Image5

onClick

Image6

onClick

Code procedure TForm1.FormCreate(Sender: TObject); begin MediaPlayer1.TimeFormat := tfMilliseconds; State := 0; Randomize; end; procedure TForm1.FormShow(Sender: TObject); begin Form2.Show; end; procedure TForm1.Timer1Timer(Sender: TObject); begin Label2.Caption := Int2TimeStr(MediaPlayer1.Position) + ' / ' + Int2TimeStr(MediaPlayer1.Length); ProgressBar1.Position := MediaPlayer1.Position; If (State = 1) And (MediaPlayer1.Position >= MediaPlayer1.Length) then Begin Stop; Next; End; end; procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin ReleaseCapture; Perform(WM_SYSCOMMAND, $F012, 0); end; procedure TForm1.Image2Click(Sender: TObject); begin If State in [0, 1] then Play else Resume; end; procedure TForm1.Image3Click(Sender: TObject); begin Pause; end; procedure TForm1.Image4Click(Sender: TObject); begin Stop; end; procedure TForm1.Image5Click(Sender: TObject); begin Prev; end; procedure TForm1.Image6Click(Sender: TObject); begin Next;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

62

Komponen

Event

Image7

onClick

Image8

onClick

Image9

onClick

Image10

onClick

Image11

onClick

Code end; procedure TForm1.Image7Click(Sender: TObject); begin Form2.Show; end; procedure TForm1.Image8Click(Sender: TObject); begin Label3.Enabled := not Label3.Enabled; end; procedure TForm1.Image9Click(Sender: TObject); begin Label4.Enabled := not Label4.Enabled; end; procedure TForm1.Image10Click(Sender: TObject); begin Label5.Enabled := Not Label5.Enabled; If Label5.Enabled then FormStyle := fsStayOnTop else FormStyle := fsNormal; end; procedure TForm1.Image11Click(Sender: TObject); begin Close; end;

23. Kembali ke Form2. 24. Buat event onDblClick pada ListBox1 seperti pada table di bawah ini : Komponen ListBox1

Event onDblClick

Code procedure TForm2.ListBox1DblClick(Sender: TObject); begin Form1.Play; end;

25. Simpan seluruh project, klik menu File – Save All, simpan dalam folder Latihan14. 26. Uji dan jalankan aplikasi, perhatikan saat pengujian pada beberapa action tampil CPU Windows, tekan F9 (Run) untuk melanjutkan. CPU Windows hanya muncul pada saat desain, kalau dijalankan langsung dari file execution hal ini tidak akan tampil.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

63

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

64

Latihan 15 : Text Editor

Aplikasi berikut ini merupakan contoh implementasi komponen RichText, Action Manager, Action Menubar dan Action Toolbar. Aplikasi Text Editor ini menggunakan konsep MDI (Multi Document Interface). Langkah-langkah : 1. Buat aplikasi baru, klik File – New – Application. 2. Ubah property Form1 seperti pada table di bawah ini : Komponen Form1

Tab

Parent

Property Caption FormStyle WindowState

Value Text Editor fsMDIForm wsMaximized

3. Tambahkan StatusBar1 dari tab Win32. 4. Buka file Contoh.pas, copy dan paste komponen ImageList1 ke Form1. 5. Tambahkan komponen ActionManager1 dari tab Additional, ubah property seperti table di bawah ini : Komponen ActionManager1

Tab Additional

Parent Form1

Property Images

Value ImageList1

6. Klik dua kali komponen ActionManager1. Klik tombol Action, pilih New Action untuk membuat Action1.

7. Pilih Action1 pada Object TreeView, ubah property seperti pada table di bawah ini : Komponen Action1

Property Caption Category

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value New… File

65

Komponen

Property ImageIndex Name

Value 6 FileNew1

8. Masih di ActionManager1, klik tombol Action (lihat gambar point 6), pilih New Standard Action untuk membuka jendela Standard Action Classes, pada section File pilih TFileOpen, TFileExit, TWindowCascade, TWindowTileHorizontal, dan TWindowTileVertical (gunakan tombol Ctrl untuk multiselect). Klik OK untuk melanjutkan.

9. Tambahkan komponen ActionMainMenuBar1 dari tab Additional. 10. Klik dua kali ActionManager1. Drag and drop File dari Category ke ActionMainMenuBar1. Drag and drop Window dari Category ke ActionMainMenuBar1.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

66

11. Tambahkan komponen ActionToolBar1 dari tab Additional. 12. Klik dua kali ActionManager1. Drag and drop New… dari Actions ke ActionToolBar1. Drag and drop Open… dari Actions ke ActionToolBar1. Drag and drop Exit dari Actions ke ActionToolBar1.

13. Pilih FileOpen1 pada Object TreeView.

14. Ubah property pada FileOpen1 seperti pada table di bawah ini : Komponen FileOpen1

Property Dialog.DefaultExt Dialog.Filter

Value *.txt Filter Name File Teks (*.txt) Semua File (*.*)

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Filter *.txt *.*

67

Komponen

Property Dialog.Title

Value Buka File

15. Pada tahap ini seharusnya Form1 mempunyai layout seperti gambar di bawah ini :

16. Buat form baru (Form2), klik menu File – New – Form. 17. Copy dan Paste ImageList1 dari Form1 ke Form2. 18. Tambahkan komponen StatusBar1 dari tab Win32. 19. Tambahkan komponen RichEdit1 dari tab Win32. 20. Tambahkan komponen ActionManager1 dari tab Additional. 21. Ubah property masing-masing komponen seperti table di bawah ini : Komponen Form2 RichEdit1

Tab

Parent

Win32

Form2

ActionManager1

Additional

Form2

Property FormStyle Align ScrollBars Lines Image

Value fsMDIChild alClient ssBoth ‘’ ImageList1

22. Klik dua kali komponen ActionManager1. 23. Klik tombol Action (lihat point 6), pilih New Standard Action, tambahkan TEditCut, TEditCopy, TEditPaste, TEditUndo, TEditDelete, TRichEditBold, TRichEditItalic, TRichEditUnderline, TRichEditStrikeOut, TRichEditBullets, TRichEditAlignLeft, TRichEditAlignRight, TRichEditAlignCenter, TFileSaveAs, TColorSelect dan TFontEdit. Klik OK untuk melanjutkan. 24. Tambahkan komponen ActionToolBar1 dari tab Additional. 25. Klik dua kali komponen ActionManager1. 26. Drag dan drop Actions Save As, Cut, Paste, Undo, Delete, Bold, Italic, Underline, Strikeout, Bullets, Align Left, Align Center, Align Rigt, Select Color, dan Select Font dari masing-masing Category ke ActionToolBar1. 27. Pilih FileSaveAs1 pada Object TreeView, ubah property seperti pada table di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

68

Komponen FileSaveAs1

Property Dialog.DefaultExt Dialog.Filter

Dialog.Title

Value *.txt Filter Name File Teks (*.txt) Semua File (*.*) Simpan

Filter *.txt *.*

28. Pada tahap ini seharusnya Form2 mempunyai layout seperti gambar di bawah ini :

29. Klik menu Project – Options untuk membuka jendela Project Options. Pada tab Forms, pindahkan Form2 dari Auto-Create Forms ke Available Forms seperti pada gambar di bawah ini, klik OK untuk melanjutkan

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

69

30. Pilih ColorSelect1 pada Object TreeView, buat event BeforeExecute dan onAccept, ketikkan perintah seperti pada table di bawah ini : Komponen ColorSelect1

Event BeforExecute

onAccept

Code procedure TForm2.ColorSelect1BeforeExecute(Sender: TObject); begin ColorSelect1.Dialog.Color := RichEdit1.SelAttributes.Color; end; procedure TForm2.ColorSelect1Accept(Sender: TObject); begin RichEdit1.SelAttributes.Color := ColorSelect1.Dialog.Color; end;

31. Pilih FontEdit1 pada Object TreeView, buat event BeforeExecute dan onAccept, ketikkan perintah seperti pada table di bawah ini : Komponen FontEdit1

Event BeforExecute

onAccept

Code procedure TForm2.FontEdit1BeforeExecute(Sender: TObject); begin With FontEdit1.Dialog do Begin Font.Name := RichEdit1.SelAttributes.Name; Font.Color := RichEdit1.SelAttributes.Color; Font.Style := RichEdit1.SelAttributes.Style; Font.Size := RichEdit1.SelAttributes.Size; End; end; procedure TForm2.FontEdit1Accept(Sender: TObject); begin With RichEdit1 do Begin SelAttributes.Name := FontEdit1.Dialog.Font.Name; SelAttributes.Color := FontEdit1.Dialog.Font.Color; SelAttributes.Style := FontEdit1.Dialog.Font.Style; SelAttributes.Size := FontEdit1.Dialog.Font.Size; end; end;

32. Pilih FileSaveAs1 pada Object TreeView, buat event BeforeExecute dan onAccept, ketikkan perintah seperti pada table di bawah ini : Komponen FileSaveAs1

Event BeforExecute

onAccept

Code procedure TForm2.FileSaveAs1BeforeExecute(Sender: TObject); begin If Caption = 'Untitled.txt' then FileSaveAs1.Dialog.FileName := Caption; end; procedure TForm2.FileSaveAs1Accept(Sender: TObject); begin RichEdit1.Lines.SaveToFile(FileSaveAs1.Dialog.FileName); Caption := FileSaveAs1.Dialog.FileName; end;

33. Pilih Form2 pada Object TreeView, buat event onClose onCloseQuery, ketikkan perintah seperti pada table di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

dan

70

Komponen Form2

Event onClose

onClose Query

Code procedure TForm2.FormClose(Sender: TObject; var Action: TCloseAction); begin Action := caFree; end; procedure TForm2.FormCloseQuery(Sender: TObject; var CanClose: Boolean); begin If RichEdit1.Modified then Begin If Caption = 'Untitled.txt' then FileSaveAs1.Execute else Case MessageDlg('Simpan?', mtConfirmation, mbYesNoCancel, 0) of mrYes : RichEdit1.Lines.SaveToFile(Caption); mrNo : CanClose := True; mrCancel : CanClose := False; End; End; end;

34. Kembali ke Form1. 35. Pastikan Anda sudah berada pada Form1, klik menu File – Use Unit.., pilih Unit2, klik OK untuk melanjutkan. 36. Pilih FileNew1 pada Object TreeView, buat event onExecute, ketikkan perintah seperti pada table di bawah ini : Komponen FileNew1

Event onExecute

Code procedure TForm1.FileNew1Execute(Sender: TObject); begin Application.CreateForm(TForm2, Form2); Form2.Caption := 'Untitled.txt'; end;

37. Pilih FileOpen1 pada Object TreeView, buat event onAccept, ketikkan perintah seperti pada table di bawah ini : Komponen FileOpen1

Event onAccept

Code procedure TForm1.FileOpen1Accept(Sender: TObject); begin Application.CreateForm(TForm2, Form2); With Form2 do Begin Caption := FileOpen1.Dialog.FileName; RichEdit1.Lines.LoadFromFile(FileOpen1.Dialog.FileName); RichEdit1.Modified := False; end; end;

38. Klik Form1 pada Object TreeView, buat event onShow, ketikkan perintah seperti pada table di bawah ini : Komponen Form1

Event onShow

Code procedure TForm1.FormShow(Sender: TObject); begin

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

71

Komponen

Event

Code FileNew1Execute(Self); end;

39. Jalankan dan uji aplikasi. Pertama kali aplikasi akan menampilkan jendela editor kosong dengan nama ‘Untitled.txt’. Pilih menu File – Open… untuk membuka file teks. File akan dibuka pada jendela tersendiri. Pilih menu Window Cascade dan Window Tile untuk mengatur susunan jendela yang dibuka.

40. Simpan dalam folder Latihan 15.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

72

Latihan 16 : Image Viewer

Aplikasi berikut ini merupakan implementasi beberapa fungsi grafik yang ada dalam Delphi seperti penggunaan Pen dan Brush untuk menggambar bentuk-bentuk dasar. Aplikasi terdiri dari 3 buah form, Form1 dalam bentuk MDI sebagai form utama, Form2 untuk menampilkan image atau menggambar bentuk-bentuk dasar dan Form3 untuk menampilkan demo Random Shape. Langkah-langkah : 1. Buat aplikasi baru, klik File – New – Application. 2. Pilih Form1 pada Object TreeView, Ubah property seperti pada table di bawah ini : Komponen Form1

Tab

Parent

Property Caption FormStyle WindowState

Value Image Viewer fsMDIForm wsMaximized

3. Tambahkan StatusBar1 dari tab Win32. 4. Tambahkan MainMenu1 dari tab Standard. Klik dua kali MainMenu1 untuk membuka menu editor. Buat mainmenu dengan struktur seperti di bawah ini : Menu File

SubMenu New Picture Open Picture -----------------Exit

Demo Random Shapes Windows Cascade Tile Vertical Tile Horizontal

Property Caption Caption ShortCut Caption Shortcut Caption Caption Caption Caption Caption Caption Caption Caption

Value &File &New Picture… Ctrl+N &Open Picture… Ctrl+O E&xit &Demo &Random Shapes… &windows &Cascade Tile &Vertical… Tile &Horizontal

5. Tambahkan OpenPictureDialog1 dari tab Dialogs, ubah property seperti pada table di bawah ini : Komponen OpenPictureDialog1

Tab Dialogs

Parent Form1

Property Title

Value Open Picture

6. Pada tahap ini seharusnya Form1 mempunyai layout seperti gambar di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

73

7. Klik menu File – Save All, untuk menyimpan Project1 dan Unit1. 8. Buat form baru (Form2), klik menu File – New – Form. 9. Pilih Form2 pada Object TreeView, ubah property seperti pada table di bawah ini : Komponen Form2

Tab

Parent

Property Caption FormStyle WindowState

Value fsMDIChild wsMaximized

10. Tambahkan 3 buah Toolbar dari tab Win32. 11. Tambahkan 1 buah StatusBar dari tab Win32. Klik dua kali StatusBar1 untuk membuka jendela Panel Editor, klik kanan pada area kosong Panel Editor, pilih Add untuk menambahkan panel baru. Tambahkan 3 buah panel (lihat gambar berikut).

Ubah property masing-masing panel seperti pada table dibawah ini : Komponen StatusBar1.Panels[0] StatusBar1.Panels[1] StatusBar1.Panels[2]

Property Text Width Text Width Text

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value Dimensi : 150 Posisi : 150 Ukuran :

74

Width

150

12. Tambahkan 5 buah SpeedButton dari tab Additional ke dalam ToolBar1, ubah property seperti pada table di bawah ini : Komponen SpeedButton1 SpeedButton2 SpeedButton3 SpeedButton4 SpeedButton5 SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4, SpeedButton5 SpeedButton2, SpeedButton3, SpeedButton4, SpeedButton5 SpeedButton2

Parent ToolBar1 ToolBar1 ToolBar1 ToolBar1 ToolBar1

Property Glyph Glyph Glyph Glyph Glyph Flat

Value Save.bmp Rectangle.bmp RoundRect.bmp Ellipse.bmp Lines.bmp True

GroupIndex

1

Down

True

13. Tambahkan ColorBox1 dari tab Additional ke dalam ToolBar2, ubah property seperti pada table di bawah ini : Komponen ColorBox1

Parent ToolBar2

Property Selected

Value clBlack

14. Tambahkan 2 buah Combobox dari tab Standard ke dalam ToolBar2, ubah property seperti table di bawah ini : Komponen Combobox1

Combobox2

Parent ToolBar2

Property Items

ToolBar2

ItemIndex Style Items

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value psSolid psDash psDot psDashColor psDashDotDot psClear psInsideFrame 0 csOwnerDrawVariable pmBlack pmWhite pmNop pmNot pmCopy pmNotCopy pmMergePenNot pmMaskPenNot pmMergeNotPen pmMaskNotPen pmMerge pmNotMerge pmMask pmNotMask

75

Komponen

Parent

Property

Style ItemIndex

Value pmXOR pmNotXOR csDropDownList 4

15. Tambahkan SpinEdit1 dari tab Samples ke dalam ToolBar2, ubah property seperti table di bawah ini : Komponen SpinEdit1

Parent ToolBar2

Property MaxValue MinValue

Value 10 1

16. Tambahkan ColorBox2 dari tab Additional ke dalam ToolBar3, ubah property seperti table di bawah ini : Komponen ColorBox1

Parent ToolBar2

Property Selected

Value clRed

17. Tambahkan Combobox3 dari tab Additional ke dalam ToolBar3, ubah property seperti table di bawah ini : Komponen Combobox1

Parent ToolBar2

Property Items

Style ItemIndex

Value bsSolid bsClear bsHorizontal bsVertical bsBDiagonal bsCross bsDiagCross csDropDownList 0

18. Tambahkan ScrollBox1 dari tab Additional ke Form2, ubah property seperti table di bawah ini : Komponen ScrollBox1

Parent Form2

Property Align

Value alClient

19. Tambahkan Image1 dari tab Additional ke dalam ScrollBox1, ubah property seperti table di bawah ini : Komponen Image1

Parent ScrollBox1

Property Align

Value alClient

20. Tambahkan SavePictureDialog1 dari tab Dialogs ke Form2, ubah property seperti table di bawah ini : Komponen SavePictureDialog1

Parent Form2

Property Title

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value Save Picture

76

21. Pada tahap ini seharusnya Form2 mempunyai layout seperti gambar di bawah ini :

22. Pilih Combobox1 pada Object TreeView, buat event OnDrawItem, ketikkan perintah seperti table di bawah ini : Komponen Combobox1

Event onDrawItem

Code procedure TForm2.ComboBox1DrawItem(Control: TWinControl; Index: Integer; Rect: TRect; State: TOwnerDrawState); begin With Combobox1.Canvas do Begin Pen.Color := ColorBox1.Selected; Pen.Style := TPenStyle(Index); MoveTo(Rect.Left + 1, Rect.Top + 5); LineTo(50, Rect.Top + 5); TextOut(60, Rect.Top + 1, Combobox1.Items[Index]); End; end;

23. Pilih SpeedButton1 pada Object TreeView, buat event OnClick, ketikkan perintah seperti table di bawah ini ; Komponen SpeedButton1

Event onClick

Code procedure TForm2.SpeedButton1Click(Sender: TObject); begin SavePictureDialog1.FileName := Caption; If SavePictureDialog1.Execute then Begin Image1.Picture.SaveToFile(SavePictureDialog1.FileName); Caption := SavePictureDialog1.FileName; End; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

77

24. Pilih Form2 pada Object TreeView, buat event onClose, OnCloseQuery dan onShow, ketikkan perintah seperti table di bawah ini : Komponen Form2

Event OnClose

OnCloseQuery

onShow

Code procedure TForm2.FormClose(Sender: TObject; var Action: TCloseAction); begin Action := caFree; end; procedure TForm2.FormCloseQuery(Sender: TObject; var CanClose: Boolean); begin If Caption = 'Untitled.txt' then SpeedButton1Click(self) else Begin If Image1.Picture.Graphic is TBitmap then Case MessageDlg('Simpan?', mtConfirmation, mbYesNoCancel, 0) of mrYes : SpeedButton1Click(Self); mrNo : CanClose := True; mrCancel : CanClose := False; End; End; end; procedure TForm2.FormShow(Sender: TObject); begin StatusBar1.Panels[0].Text := 'Dimensi : ' + inttostr(Image1.Width) + ' x ' + inttostr(Image1.Height); end;

25. Tambahkan Variabel SP dan CP dengan type data TPoint pada blok Private, lihat gambar berikut :

26. Buat Procedure DrawShape pada blok Private (lihat gambar di atas), tekan Ctrl+Shift+C untuk membuat blok procedure, ketikan perintah seperti table di bawah ini : Komponen Form2

Procedure DrawShape

Code procedure TForm2.DrawShape; begin

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

78

Komponen

Procedure

Code With Image1.Canvas do Begin If SpeedButton2.Down then Rectangle(SP.X, SP.Y, CP.X, CP.Y); If SpeedButton3.Down then RoundRect(SP.X, SP.Y, CP.X, CP.Y, 30, 30); If SpeedButton4.Down then Ellipse(SP.X, SP.Y, CP.X, CP.Y); If SpeedButton5.Down then Begin MoveTo(SP.X, SP.Y); LineTo(CP.X, CP.Y); End; End; end;

27. Pilih Image1 pada Object TreeView, buat event OnMouseDown, OnMouseMove dan OnMouseUp, ketikkan perintah seperti table di bawah ini : Komponen Image1

Event OnMouseDown

OnMouseMove

Code procedure TForm2.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin If Image1.Picture.Graphic is TBitmap then With Image1.Canvas do Begin SP := Point(X, Y); CP := Point(X, Y); Pen.Width := 1; Pen.Style := psDot; Pen.Color := clBlack; Brush.Style := bsClear; Pen.Mode := pmNotXOR; DrawShape; End; end; procedure TForm2.Image1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer); begin If (Image1.Picture.Graphic is TBitmap) and SpeedButton2.Down or SpeedButton3.Down or SpeedButton4.Down or SpeedButton5.Down then Begin If ssLeft in Shift then Begin DrawShape; CP := Point(X, Y); DrawShape; End; StatusBar1.Panels[2].Text := 'Ukuran : ' + inttostr(abs(CP.X - SP.X)) + ' x ' + inttostr(abs(CP.Y - SP.Y));

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

79

Komponen

Event

OnMouseUp

Code End; StatusBar1.Panels[1].Text := 'Posisi : ' + inttostr(X) + ', ' + inttostr(Y); end; procedure TForm2.Image1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin If Image1.Picture.Graphic is TBitmap then With Image1.Canvas do Begin DrawShape; CP := Point(X, Y); Pen.Width := SpinEdit1.Value; Pen.Color := ColorBox1.Selected; Pen.Style := TPenStyle(Combobox1.ItemIndex); Pen.Mode := TPenMode(Combobox2.ItemIndex); Brush.Color := ColorBox2.Selected; Brush.Style := TBrushStyle(Combobox3.ItemIndex); DrawShape; End; end;

28. Klik menu File – Save All, untuk menyimpan Project dan seluruh Unit. 29. Klik menu File – New – Form, untuk membuat form baru (Form3). 30. Pilih Form3 pada Object TreeView, ubah property seperti table di bawah ini ; Komponen Form3

Parent

Property Caption FormStyle WindowState

Value Random Shapes fsMDIChild wsMaximized

31. Tambahkan PaintBox1 dan Timer1 dari tab System, ubah property seperti table di bawah ini : Komponen PaintBox1 Timer1

Parent Form3 Form3

Property Align Interval

Value alClient 10

32. Pada tahap ini seharusnya Form3 mempunyai layout seperti gambar di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

80

33. Buat variable PosX, PosY, Panjang, Lebar, dan shape dengan type data Integer pada blok Private, lihat gambar berikut :

34. Pilih Form3 pada Object TreeView, buat event OnClose dan OnCreate, ketikkan perintah seperti table di bawah ini : Komponen Form

Event OnClose

OnCreate

Code procedure TForm3.FormClose(Sender: TObject; var Action: TCloseAction); begin Action := caFree; end; procedure TForm3.FormCreate(Sender: TObject); begin Randomize; end;

35. Pilih Timer1 pada Object TreeView, buat event OnTimer, ketikkan perintah seperti table di bawah ini : Komponen Timer1

Event OnTimer

Code procedure TForm3.Timer1Timer(Sender: TObject); begin With PaintBox1.Canvas do Begin Pen.Width := Random(5); Pen.Mode := TPenMode(Random(15)); Pen.Color := RGB(Random(255), Random(255), Random(255)); Brush.Color := RGB(Random(255), Random(255),

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

81

Komponen

Event

Code Random(255)); Shape := Random(3); PosX := Random(Width); PosY := Random(Height); Panjang := Random(200)+ 50; Lebar := Random(200) + 50; Case Shape of 0 : Rectangle(PosX, PosY, PosX + Panjang, PosY + Lebar); 1 : RoundRect(PosX, PosY, PosX + Panjang, PosY + Lebar, Random(30), Random(30)); 2 : Ellipse(PosX, PosY, PosX + Panjang, PosY + Lebar); End; End; end;

36. Klik menu File – Save All untuk menyimpan Project dan seluruh Unit. 37. Kembali ke Form1. Klik menu View – Forms, pilih Form1, klik OK untuk melanjutkan. 38. Klik File – Use unit, pilih Unit2 dan Unit3, klik OK untuk melanjutkan. 39. Buat event OnClick untuk tiap menuitem, ketikkan perintah seperti table di bawah ini : Komponen NewPicture1

Event OnClick

OpenPicture1

OnClick

Exit1

OnClick

RandomShape1

OnClick

Cascade1

OnClick

Code procedure TForm1.NewPicture1Click(Sender: TObject); begin Application.CreateForm(TForm2, Form2); Form2.Caption := 'Untitled.bmp'; end; procedure TForm1.OpenPicture1Click(Sender: TObject); begin If OpenPictureDialog1.Execute then With Form2 do Begin Application.CreateForm(TForm2, Form2); Caption := OpenPictureDialog1.FileName; With Image1 do Begin Picture.LoadFromFile(OpenPictureDialog1.FileName); Align := alNone; End; End; end; procedure TForm1.Keluar1Click(Sender: TObject); begin Close; end; procedure TForm1.RandomShapes1Click(Sender: TObject); begin Application.CreateForm(TForm3, Form3); end; procedure TForm1.Cascade1Click(Sender: TObject); begin Cascade; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

82

Komponen TileVertical1

Event OnClick

TileHorizontal1

OnClick

Code procedure TForm1.ileVertically1Click(Sender: TObject); begin TileMode := tbVertical; Tile; end; procedure TForm1.ileHorizontally1Click(Sender: TObject); begin TileMode := tbHorizontal; Tile; end;

40. Klik File – Save All untuk menyimpan Project dan seluruh Unit. 41. Uji dan jalankan aplikasi.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

83

PROYEK SISTEM INFORMASI RENTAL VCD/DVD Proyek ini merupakan tugas akhir semester 3 yang akan dijadikan salah satu komponen nilai akhir semester matakuliah Pemrograman Visual 1. Kebutuhan Fungsional : 1. Member - Member dapat melakukan pencarian koleksi dan membaca informasi atau melihat preview koleksi film. - Member yang terdaftar dapat melihat histori transaksi yang pernah dilakukannya. 2. Karyawan - Karyawan bisa melakukan login ke dalam aplikasi. - Karyawan dapat memasukkan transaksi peminjaman dan pengembalian koleksi. - Karyawan dapat melihat laporan transaksi harian. - Karyawan dapat melakukan manajemen data member. - Karyawan dapat melakukan manajemen data koleksi. - Karyawan dapat melakukan pencarian data koleksi - Karyawan dapat melakukan pencarian data member. - Karyawan dapat melihat histori transaksi member. 3. Pemilik/Administrator - Pemilik/Administrator dapat melakukan login ke aplikasi. - Pemilik/Administrator dapat melihat laporan transaksi per periode. - Pemilik/Administrator dapat melakukan manajemen data Karyawan, Koleksi dan Member - Pemilik/Administrator dapat melihat laporan pendapatan.

Matriks Penggunaan Form Pengguna Form

Unit

Fungsi

FUtama FLogin FSetup FMember

UFUtama UFLogin UFSetup UFMember

Form Utama Login Setup Data Pelanggan

FKoleksi

UFKoleksi

Data Koleksi

FPemasok FKaryawan FPinjam

UFPemasok UFKaryawan UFPinjam

FKembali

UFKembali

Data Pemasok Data Karyawan Transaksi Peminjaman Transaksi

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Member

Karyawan

Ya Tidak Tidak Ya, View Only Ya, View Only Tidak Tidak Tidak

Ya Ya Tidak Ya

Pemilik / Admin Ya Ya Ya Ya

Ya

Ya

Tidak Tidak Ya

Ya Ya Ya

Tidak

Ya

Ya

84

Pengguna Form

Unit

FDMember FDKoleksi FLPinjam

UFDMember UFDKoleksi UFLPinjam

FLKembali

UFLKembali

FLKoleksi

UFLKoleksi

FLPendapatan FStatistik FAbout

UFLPendapatan UFLStatistik UFAbout

Fungsi Pengembalian Daftar Pelanggan Daftar Koleksi Laporan Transaksi Peminjaman Laporan Transaksi Pengembalian Laporan Koleksi belum Kembali Laporan Pendapatan Statistik About

Pemilik / Admin

Member

Karyawan

Ya Ya Tidak

Ya Ya Ya

Tidak

Ya Ya Ya, Terbatas Ya, Terbatas Ya

Tidak Ya Ya

Tidak Ya Ya

Ya Ya Ya

Tidak

Ya Ya

Entity Relationship Diagram (ERD)

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

85

Latihan 17 : Membuat Database Rental

Aplikasi yang digunakan untuk merancang database rental adalah Microsoft Access 2003. Database rental terdiri dari table Pelanggan, Koleksi, Karyawan, Pemasok, Pinjam, DPinjam, Kembali dan Setup. Langkah-langkah : 1. Buat folder dengan nama Rental. 2. Jalankan aplikasi Microsoft Access 2003, klik Start – All Programs – Microsoft Office – Microsoft Access 2003. 3. Buat database baru, klik menu File – New…, pilih Blank Database (lihat gambar di bawah ini).

4. Pilih folder Rental dimana file database akan disimpan (folder yang telah dibuat pada point 1), isi File Name dengan Rental.mdb, klik tombol Create untuk membuat database (lihat gambar berikut).

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

86

5. Buat table baru, klik dua kali Create Table in Design View (lihat gambar berikut).

6. Isi FieldName, pilih Datatype dan atur Field Properties seperti table di bawah ini : Field Name MemberID Nama Alamat Kota TandaPengenal

Data Type AutoNumber Text Text Text Text

Field Properties FieldSize FieldSize FieldSize FieldSize FieldSize

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value Long Integer 30 50 30 3

Ket. PK

87

Field Name NoTandaPengenal TeleponRumah Handphone TglDaftar Status Passwords Photo

Data Type Text Text Text Date/Time Text Text OLE Object

Field Properties FieldSize FieldSize FieldSize Format FieldSize Fieldsize

Value 30 30 30 ShortDate 10 10

Ket.

7. Tentukan MemberID sebagai Primary Key, klik kanan pada baris MemberID kemudian pilih Primary Key (lihat gambar di atas). 8. Simpan table, pilih menu File – Save… atau tekan Ctrl+S, isi Table Name dengan Member, klik OK untuk melanjutkan (lihat gambar berikut).

9. Buat table baru (table Koleksi), isi Field Name, pilih data type dan atur Field Properties seperti table di bawah ini, tentukan KoleksiID sebagai Primary Key dan simpan dengan nama table Koleksi (lihat point 4 s/d 7). Field Name KoleksiID

Data Type AutoNumber

Field Properties FieldSize

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value Long Integer

Ket. PK

88

Field Name Judul PemeranUtama Kategori JenisKoleksi TglBeli HargaBeli PemasokID LamaSewa HargaSewa HargaDenda Jumlah Cover Preview KaryawanID

Data Type Text Text Text Text Date/Time Currency Number Number Currency Currency Number OLE Object Text Number

Field Properties FieldSize FieldSize FieldSize FieldSize Format

Value 50 100 20 10 ShortDate

FieldSize FieldSize

Long Integer Long Integer

FieldSize

Long Integer

FieldSize FieldSize

200 Long Integer

Ket.

10. Buat table baru (table Karyawan), isi Field Name, pilih data type dan atur Field Properties seperti table di bawah ini, tentukan KaryawanID sebagai Primary Key dan simpan dengan nama table Karyawan (lihat point 4 s/d 7). Field Name KaryawanID Nama Alamat Kota Handphone HakAkses Passwords Photo

Data Type AutoNumber Text Text Text Text Number Text OLEObject

Field Properties FieldSize FieldSize FieldSize FieldSize FieldSize FieldSize FieldSize

Value Long Integer 30 50 30 30 Long Integer 10

Ket. PK

11. Buat table baru (table Pemasok), isi Field Name, pilih data type dan atur Field Properties seperti table di bawah ini, tentukan PemasokID sebagai Primary Key dan simpan dengan nama table Pemasok (lihat point 4 s/d 7). Field Name PemasokID Nama Alamat Kota Telepon

Data Type AutoNumber Text Text Text Text

Field Properties FieldSize FieldSize FieldSize FieldSize FieldSize

Value Long Integer 30 50 30 30

Ket. PK

12. Buat table baru (table Pinjam), isi Field Name, pilih data type dan atur Field Properties seperti table di bawah ini, tentukan PinjamID sebagai Primary Key dan simpan dengan nama table Pinjam (lihat point 4 s/d 7). Field Name PinjamID TglPinjam MemberID TotalSewa KaryawanID

Data Type AutoNumber Date/Time Number Currency Number

Field Properties FieldSize Format FieldSize

Value Long Integer ShortDate Long Integer

FieldSize

Long Integer

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Ket. PK

89

13. Buat table baru (table DPinjam), isi Field Name, pilih data type dan atur Field Properties seperti table di bawah ini, tentukan DPinjamID sebagai Primary Key dan simpan dengan nama table DPinjam (lihat point 4 s/d 7). Field Name DPinjamID PinjamID KoleksiID HargaSewa TglHarusKembali KembaliID HargaDenda

Data Type AutoNumber Number Number Currency Date/Time Number Currency

Field Properties FieldSize FieldSize FieldSize

Value Long Integer Long Integer Long Integer

Format FieldSize

ShortDate Long Integer

Ket. PK

14. Buat table baru (table Kembali), isi Field Name, pilih data type dan atur Field Properties seperti table di bawah ini, tentukan KembaliID sebagai Primary Key dan simpan dengan nama table Kembali (lihat point 4 s/d 7). Field Name KembaliID TglKembali MemberID TotalDenda KaryawanID

Data Type AutoNumber Date/Time Number Currency Number

Field Properties FieldSize Format FieldSize

Value Long Integer ShortDate Long Integer

Field Size

Long Integer

Ket. PK

15. Buat table baru (table Rental), isi Field Name, pilih data type dan atur Field Properties seperti table di bawah ini dan simpan dengan nama table Rental (lihat point 4 s/d 7). Field Name Nama Alamat Telepon Pemilik

Data Type Text Text Text Text

Field Properties FieldSize FieldSize FieldSize FieldSize

Value 30 50 30 30

Ket.

16. Pada tahap ini seharusnya Anda telah memiliki 8 buah table seperti pada gambar di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

90

17. Tutup aplikasi Microsoft Access.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

91

Latihan 18 : Membuat Form Utama

Form utama pada aplikasi ini berfungsi untuk menampilkan menu, toolbar, informasi waktu sekaligus untuk mendefinisikan koneksi ke database Rental yang kita buat pada latihan terdahulu. Langkah-langkah : 1. Pastikan file database Rental.mdb berada pada folder Rental yang telah dibuat pada Latihan 17 point 1. 2. Jalankan aplikasi Delphi. 3. Pilih Form1 pada Object TreeView, ubah property seperti pada table di bawah ini : Komponen Form1

Property Caption Color Name WindowState

Value Aplikasi Rental v1.0 (beta) clWhite FUtama wsMaximized

4. Pilih menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UFUtama.pas dan Project1 menjadi Rental.dpr, simpan dalam folder Rental. 5. Tambahkan MainMenu1 dari tab Standard. Klik dua kali MainMenu1 untuk membuka menu editor. Buat mainmenu dengan struktur seperti di bawah ini : Menu File

SubMenu Login Logout -----------------Setup

-----------------Exit Data Member Koleksi -----------------Pemasok -----------------Karyawan Transaksi

Property Caption Caption ShortCut Caption Enable Caption Caption Shortcut Enable Caption Caption Caption Enable Caption Shortcut Caption Shortcut Caption Caption Shortcut Caption Caption Shortcut Caption

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value &File &Login… Ctrl+L Logout False &Setup… Ctrl+S False E&xit &Data False Membe&r Ctrl+R K&oleksi… Ctrl+O Pe&masok… Ctrl+M Karya&wan Ctrl+W &Transaksi

92

Menu

SubMenu Peminjaman Pengembalian

Pencarian Daftar Member Daftar Koleksi -----------------Laporan Transaksi Peminjaman Transaksi Pengembalian Koleksi belum Kembali -----------------Pendapatan Help! About

Property Enable Caption Shortcut Caption Shortcut Caption Caption Caption Caption Caption Enable Caption Caption Caption Caption Caption Caption Caption

Value False &Peminjaman… Ctrl+P Pengem&balian… Ctrl+B &Pencarian &Daftar Member… Daftar &Koleksi… &Laporan False Transaksi Peminjaman… Transaksi Pengembalian… Koleksi Belum Kembali … Pendapatan… &Help! &About

6. Tambahkan ToolBar1 dari tab Win32. Ubah property seperti table di bawah ini : Komponen ToolBar1

Tab Win32

Parent FUtama

Property Autosize ButtonHeight ButtonWidth Color

Value True 44 46 clBtnFace

7. Tambahkan 7 buah SpeedButton dari tab Additional, ubah property seperti table di bawah ini : Komponen SpeedButton1

Tab Win32

Parent ToolBar1

SpeedButton2

Win32

ToolBar1

SpeedButton3

Win32

ToolBar1

SpeedButton4

Win32

ToolBar1

SpeedButton5

Win32

ToolBar1

SpeedButton6

Win32

ToolBar1

SpeedButton7

Win32

ToolBar1

SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4 SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4, SpeedButton5, SpeedButton6, SpeedButton7

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Property Glyph Hint Glyph Hint Glyph Hint Glyph Hint Glyph Hint Glyph Hint Glyph Hint Enable

Value Adduser.bmp Member Baru FavAdd.bmp Koleksi Baru AddFile.bmp Peminjaman DeleteFile.bmp Pengembalian Userid.bmp Daftar Member Pictures.bmp Daftar Koleksi Websearch.bmp Statistik False

Flat Height Width ShowHint

True 44 46 True

93

8. Tambahkan StatusBar1 dari tab Win32. Klik dua kali StatusBar1 untuk membuka Panel Editor, tambahkan 3 buah panel dan ubah property masing-masing panel seperti table di bawah ini : Komponen StatusBar1.Panels[0] StatusBar1.Panels[1] StatusBar1.Panels[2]

Property Text Width Text Width Text Width

Value Tanggal : 150 User : 150 Aplikasi Rental 150

9. Tambahkan Image1 dari tab Additional, ubah property seperti pada table di bawah ini : Komponen Image1

Tab Additional

Parent FUtama

Property Align Center Picture

Value alClient True Rental.bmp

10. Tambahkan Timer1 dari tab System. 11. Tambahkan ADOConnection1 dari tab ADO, ubah property seperti table di bawah ini : Komponen ADOConnection1

Tab ADO

Parent FUtama

Property LoginPrompt

Value False

12. Klik dua kali ADOConnection1 untuk membuka Connection String Editor, klik tombol Build untuk membuat koneksi.

13. Pilih Microsoft Jet 4.0 OLE DB Provider, klik Next untuk melanjutkan.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

94

14. Ketikkan Rental.mdb pada Select or enter Database Name, pastikan database Rental.mdb ada pada folder yang sama dengan program yang sedang dibuat. Klik Test Connection untuk menguji koneksi.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

95

15. Tambahkan ADOTable1 dari tab ADO, ubah property seperti table di bawah ini : Komponen ADOTable1

Tab ADO

Parent FUtama

Property Connection Name TableName

Value ADOConnection1 Rental Rental

16. Pada object Treeview, klik dua kali Rental untuk membuka field editor. Klik kanan pada field editor, kemudian pilih Add All Fields…

17. Pada tahap ini seharusnya FUtama mempunyai layout seperti gambar di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

96

18. Tambahkan variable KaryawanID dan HakAkses dengan type Integer, variable NamaKaryawan, NamaRental, AlamatRental, TelpRental dengan type String pada blok Public di unit UFUtama, lihat gambar berikut :

19. Pilih Timer1 pada Object TreeView, buat event onTimer, ketikkan perintah seperti table di bawah ini : Komponen Timer1

Event onTimer

Code procedure TFUtama.Timer1Timer(Sender: TObject); Const Hari : Array [1..7] of String = ('Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum''at', 'Sabtu'); begin StatusBar1.Panels[0].Text := Hari[DayofWeek(Now)] + ', ' + DateToStr(Now) + ' ' + TimeToStr(Now); StatusBar1.Panels[1].Text := 'User : ' + NamaKaryawan; end;

20. Pilih FUtama pada Object Tree, buat event onCreate dan onClose, ketikkan perintah seperti table di bawah ini : Komponen FUtama

Event onCreate

onClose

onCloseQuery

Code procedure TFUtama.FormCreate(Sender: TObject); begin ADOConnection1.Connected := True; Rental.Open; NamaRental := RentalNama.Value; AlamatRental := RentalAlamat.Value; TelpRental := RentalTelepon.Value; Rental.Close; Timer1Timer(Self); StatusBar1.Panels[2].Text := NamaRental + ', ' + AlamatRental + ' ' + TelpRental; end; procedure TFUtama.FormClose(Sender: TObject; var Action: TCloseAction); begin ADOConnection1.Connected := False; end; procedure TFUtama.FormCloseQuery(Sender: TObject; var CanClose: Boolean);

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

97

Komponen

Event

Code begin CanClose := MessageDlg('Tutup Aplikasi?', mtConfirmation, [mbYes, mbNo], 0) = mrYes; end;

21. Simpan, jalankan dan uji aplikasi.

NEW Perbaikan : 1. Lakukan perbaikan Latihan 17 (Membuat Database Rental) : Point 9. 2. Lakukan perbaikan Latihan 18 (Membuat Form Utama) : Point 5, 7 dan 18 .

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

98

Latihan 19 : Membuat Form Login

Form Login digunakan untuk membatasi akses setiap user. Hak akses terdiri dari 0 untuk Member, 1 untuk Operator dan 2 untuk Pemilik/Administrator. Form Login akan menampilkan daftar Nama Karyawan dalam bentuk Combobox dan password. Langkah-langkah : 1. Jalankan aplikasi Microsoft Access 2003. 2. Buka file Rental.mdb yang telah dibuat pada Latihan 17. 3. Pilih object Tables, kemudian klik dua kali table Karyawan untuk menambahkan data karyawan, tambahkan data karyawan seperti pada gambar di bawah ini :

4. 5. 6. 7.

Simpan file Rental.mdb dan tutup aplikasi Microsoft Access. Jalankan aplikasi Delphi, buka project Rental.dpr. Buat form baru, klik menu File – New – Form. Ubah property form yang baru dibuat seperti pada table di bawah ini : Komponen Form1

Property Caption BorderStyle Name Position

Value Login bsDialog FLogin poDesktopCenter

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

99

8. Pilih menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UFLogin.pas dalam folder Rental. 9. Klik menu File – Use Unit…, pilih FUtama, klik OK untuk melanjutkan. 10. Tambahkan Image1 dari tab Additional, ubah property seperti table di bawah ini : Komponen Image1

Tab Additional

Parent FLogin

Property Autosize Picture Transparent

Value True Key.bmp True

11. Tambahkan Label1 dan GroupBox1 dari tab Standard, ubah property seperti table di bawah ini : Komponen Label1

Tab Standard

Parent FLogin

Property Caption

GroupBox1

Standard

FLogin

Wordwrap Caption

Value Pilih nama karyawan dan masukkan password, klik Login True

12. Tambahkan 2 buah Label, 1 buah Combobox dan 1 buah Edit dari tab Standard ke dalam GroupBox1, ubah property seperti table di bawah ini : Komponen Label2 Label3 Combobox1 Edit1

Tab Standard Standard Standard Standard

Parent GroupBox1 GroupBox1 GroupBox1 GroupBox1

Property Caption Caption Style PassWordChar Text

Value Nama Karyawan Password csDropDownList *

13. Tambahkan 2 buah BitBtn dari tab Additional ke dalam GroupBox1, ubah property seperti table di bawah ini : Komponen BitBtn1

Tab Additional

Parent GroupBox1

BitBtn2

Additional

GroupBox1

Property Caption Glyph Modalresult Caption Glyph ModalResult

Value Login Login.bmp mrOK Batal Batal.bmp mrCancel

14. Tambahkan ADOTable1 dari tab ADO, ubah property seperti table di bawah ini : Komponen ADOTable1

Tab ADO

Parent FLogin

Property Connection Name TableName

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value FUtama.ADOConnection1 Karyawan Karyawan

100

15. Buat field persistent table Karyawan, klik dua kali Karyawan pada Object TreeView untuk membuka Field Editor, klik kanan pada Field Editor pilih Add All Fields (lihat Latihan 18 Point 16). 16. Pada tahap ini seharusnya FLogin mempunyai layout seperti gambar di bawah ini :

17. Pilih FLogin pada Object TreeView, buat event onShow dan onClose Komponen FLogin

Event onShow

onClose

Code procedure TFLogin.FormShow(Sender: TObject); begin Karyawan.Open; Combobox1.Clear; Edit1.Clear; While not Karyawan.Eof do Begin Combobox1.Items.Add(KaryawanNama.Value); Karyawan.Next; End; end; procedure TFLogin.FormClose(Sender: TObject; var Action: TCloseAction); begin Karyawan.Close; end;

18. Pilih BitBtn1 pada Object Treeview, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen BitBtn1

Event onClick

Code procedure TFLogin.BitBtn1Click(Sender: TObject); begin If Karyawan.Locate('Nama',Combobox1.Text, []) and (Edit1.Text = KaryawanPasswords.Value) then Begin FUtama.KaryawanID := KaryawanKaryawanID.Value; FUtama.NamaKaryawan := KaryawanNama.Value; FUtama.HakAkses := KaryawanHakAkses.Value; End Else Begin MessageDlg('Password tidak cocok!', mtError, [mbOK], 0); Modalresult := mrNone; End; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

101

19. Pilih Edit1 pada Object TreeView, buat event onKeyPress, ketikkan perintah seperti table di bawah ini : Komponen Edit1

Event onKeyPress

Code procedure TFLogin.Edit1KeyPress(Sender: TObject; var Key: Char); begin If Key = #13 then BitBtn1Click(Self); end;

20. Kembali ke form FUtama, klik menu View – Forms, pilih FUtama, klik OK untuk melanjutkan. 21. Klik menu File – Use Unit, pilih UFLogin, klik OK untuk melanjutkan. 22. Buat procedure EnableMenu pada blok private, tekan Ctrl+Shift+C untuk membuat blok procedure, ketikkan perintah seperti pada table di bawah ini : Komponen FUtama

Procedure EnableMenu

Code procedure TFUtama.EnableMenu; begin Logout1.Enabled := HakAkses in [1,2]; Setup1.Enabled := HakAkses in [2]; Data1.Enabled := HakAkses in [1,2]; Member1.Enabled := HakAkses in [1,2]; Koleksi1.Enabled := HakAkses in [1,2]; Pemasok1.Enabled := HakAkses in [2]; Karyawan1.Enabled := HakAkses in [2]; ransaksi1.Enabled := HakAkses in [1,2]; Laporan1.Enabled := HakAkses in [1,2]; Pendapatan1.Enabled := HakAkses in [2]; SpeedButton1.Enabled := HakAkses in [1,2]; SpeedButton2.Enabled := HakAkses in [1,2]; SpeedButton3.Enabled := HakAkses in [1,2]; SpeedButton4.Enabled := HakAkses in [1,2]; end;

23. Pilih Login1 pada Object Treeview, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen Login1

Event onClick

Code procedure TFUtama.Login1Click(Sender: TObject); begin If FLogin.ShowModal = mrOK then EnableMenu; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

102

24. Pilih Logout1 pada ObjectTreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen Logout1

Event onClick

Code procedure TFUtama.Logout1Click(Sender: TObject); begin If MessageDlg('Logout?', mtConfirmation, [mbYes, mbNo], 0) = mrYes then Begin HakAkses := 0; KaryawanID := 0; NamaKaryawan := ''; EnableMenu; End; end;

25. Simpan, jalankan dan uji aplikasi.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

103

Latihan 20 : Membuat Form Setup

Form Setup digunakan untuk mengelola data yang berkaitan dengan Rental seperti Nama Rental, Alamat, telepon dan Nama Pemilik Rental. Langkah-langkah : 1. Jalankan aplikasi Delphi, buka project Rental.dpr. 2. Buat form baru, klik menu File – New – Form. 3. Ubah property form yang baru dibuat seperti pada table di bawah ini : Komponen Form1

Property Caption BorderStyle Name Position

Value Setup bsDialog FSetup poDesktopCenter

4. Pilih menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UFSetup.pas dalam folder Rental. 5. Klik menu File – Use Unit…, pilih FUtama, klik OK untuk melanjutkan. 6. Tambahkan Image1 dari tab Additional, ubah property seperti table di bawah ini : Komponen Image1

Tab Additional

Parent FSetup

Property Autosize Picture Transparent

Value True Configure.bmp True

7. Tambahkan GroupBox1 dari tab Standard, ubah property seperti table di bawah ini : Komponen GroupBox1

Tab Standard

Parent FSetup

Property Caption

Value

8. Tambahkan ADOTable1 dari tab ADO, ubah property seperti table di bawah ini : Komponen ADOTable1

Tab ADO

Parent FSetup

Property Connection Name TableName

Value FUtama.ADOConnection1 Rental Rental

9. Buat field persistent table Rental, klik dua kali Rental pada Object TreeView untuk membuka Field Editor, klik kanan pada Field Editor pilih Add All Fields (lihat Latihan 18 Point 16). 10. Masih di Field Editor table Rental, pastikan semua field telah terpilih (kalau belum terpilih, klik kanan Field Editor, pilih Select All), kemudian drag and drop seluruh field ke dalam GroupBox1. 11. Tambahkan 2 buah BitBtn dari tab Additional, ubah property seperti table di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

104

Komponen BitBtn1

Tab Additional

Parent GroupBox1

BitBtn2

Additional

GroupBox1

Property Caption Glyph ModalResult Caption Glyph ModalResult

Value Simpan Simpan.bmp mrYes Batal Batal.bmp mrCancel

12. Atur layout form FSetup seperti gambar di bawah ini :

13. Pilih FSetup pada Object TreeView, buat event onShow dan onClose, ketikkan perintah seperti table di bawah ini : Komponen FSetup

Event onShow

OnClose

Code procedure TFSetup.FormShow(Sender: TObject); begin Rental.Open; end; procedure TFSetup.FormClose(Sender: TObject; var Action: TCloseAction); begin Rental.Close; end;

14. Pilih Datasource1 pada Object TreeView, buat event onStateChange, ketikkan perintah seperti table di bawah ini : Komponen DataSource1

Event onStateChange

Code procedure TFSetup.DataSource1StateChange(Sender: TObject); begin BitBtn1.Enabled := Rental.State in dsEditModes; end;

15. Pilih BitBtn1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen BitBtn1

Event onClick

Code procedure TFSetup.BitBtn1Click(Sender: TObject); begin Rental.Post; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

105

16. Pilih BitBtn2 pada Object TreeView, buat event OnClick, ketikkan perintah seperti table di bawah ini : Komponen BitBtn2

Event OnClick

Code procedure TFSetup.BitBtn2Click(Sender: TObject); begin Rental.Cancel; end;

17. Kembali ke form FUtama, klik menu View – Forms…, pilih FUtama, klik OK untuk melanjutkan. 18. Klik menu File – Use Unit, pilih FSetup, klik OK untuk melanjutkan. 19. Pilih Setup1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen Setup1

Event onClick

Code procedure TFUtama.Setup1Click(Sender: TObject); begin FSetup.ShowModal; end;

20. Simpan, jalankan dan uji aplikasi.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

106

Latihan 21 : Membuat Form Member

Form Member digunakan untuk mengelola data member. Form Member juga digunakan untuk menampilkan histori transaksi tiap member. Data dan histori transaksi ditampilkan dalam tab yang terpisah. Langkah-langkah : 1. Pastikan project Rental.dpr telah dibuka. 2. Buat form baru, klik menu File – New – Form. 3. Ubah property form yang baru dibuat seperti pada table di bawah ini : Komponen Form1

Property Caption BorderStyle Name Position

Value Member bsDialog FMember poDesktopCenter

4. Pilih menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UFMember.pas dalam folder Rental. 5. Klik menu File – Use Unit…, pilih UFUtama, klik OK untuk melanjutkan. 6. Tambahkan PageControl1 dari tab Win32, ubah property seperti table di bawah ini : Komponen PageControl1

Tab Win32

Parent FMember

Property Align

Value alClient

7. Tambahkan dua buah TabSheet dengan cara mengklik kanan komponen PageControl1, kemudian pilih New Page. Atur property seperti table di bawah ini : Komponen TabSheet1 TabSheet2

Parent PageControl1 PageControl1

Property Caption Caption

Value Data Member Histori Transaksi

8. Tambahkan GroupBox1 dari tab Standard ke dalam Tabsheet1, ubah property seperti table di bawah ini : Komponen GroupBox1

Tab Standard

Parent TabSheet1

Property Align Caption

Value alClient

9. Tambahkan Toolbar1 dari tab Win32 ke dalam GroupBox1, ubah property seperti table di bawah ini : Komponen ToolBar1

Tab Win32

Parent GroupBox1

Property Autosize ButtonHeight ButtonWidth

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value True 44 46

107

10. Tambahkan 4 buah SpeedButton dari tab Additional ke dalam ToolBar1, atur property seperti table di bawah ini : Komponen SpeedButton1

Tab Additional

Parent ToolBar1

SpeedButton2

Additional

ToolBar1

SpeedButton3

Additional

ToolBar1

SpeedButton4

Additional

ToolBar1

SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4

Property Caption Glyph Tag Caption Glyph Tag Caption Glyph Tag Caption Glyph Tag Layout Width Flat Height

Value Simpan Simpan.bmp 1 Hapus Hapus.bmp 2 Kartu Printer.bmp 3 Batal Batal.bmp 4 blTop 46 True 44

11. Tambahkan ADOTable1 dari tab ADO, atur property seperti table di bawah ini : Komponen ADOTable1

Tab ADO

Parent FMember

Property Connection Name TableName

Value FUtama.ADOConnection1 Member Member

12. Buat persistent field table Member, klik dua kali Member pada Object TreeView untuk membuka Field Editor, klik kanan pada field editor pilih Add All Fields (lihat latihan 18 point 16). 13. Masih di field editor table Member, pastikan semua field telah terpilih (kalau belum, klik kanan Field Editor, pilih Select All), kemudian lakukan drag and drop seluruh field ke dalam GroupBox1. 14. Hapus DBEdit5 dari GroupBox1, gantikan dengan DBCombobox1 dari tab Data Control, ubah property seperti table di bawah ini : Komponen DBCombobox1

Tab Data Control

Parent GroupBox1

Property DataSource DataField Items

Value DataSource1 TandaPengenal KTP SIM

15. Hapus DBEdit9 dari GroupBox1, gantikan dengan DateTimePicker1 dari tab Win32. 16. Hapus DBEdit10 dari GroupBox1, gantikan dengan DBCombobox2 dari tab Data Control, ubah property seperti table di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

108

Komponen DBCombobox2

Tab Data Control

Parent GroupBox1

Property DataSource DataField Items

Value DataSource1 Status AKTIF TIDAK AKTIF

17. Ubah property untuk komponen Data Control seperti table di bawah ini : Komponen DBEdit1, DBEdit11 DBEdit1, DBEdit2, DBEdit3, DBEdit4, DBCombobox1, DBEdit6, DBEdit7, DBEdit8, DBCombobox2, DBEdit11 DBImage1

Property Enabled CharCase

Value False ecUpperCase

Center Stretch

True True

18. Tambahkan OpenPictureDialog1 dari tab Dialogs. 19. Tambahkan BitBtn1 dari tab Additional ke dalam GroupBox1, atur property seperti table di bawah ini : Komponen BitBtn1

Tab Additional

Parent GroupBox1

Property Caption Glyph

Value Cari … Cari.bmp

20. Tambahkan DBNavigator1 dari tab Data Control ke dalam GroupBox1, atur property seperti table di bawah ini : Komponen DBNavigator1

Tab Data Control

Parent GroupBox1

Property Align Datasource Flat VisibleButtons.nbInsert VisibleButtons.nbDelete VisibleButtons.nbEdit VisibleButtons.nbPost VisibleButtons.nbCancel VisibleButtons.nbRefresh

Value alBottom Datasource1 True False False False False False False

21. Tambahkan ADOQuery1 dari tab ADO, atur property seperti table di bawah ini : Komponen ADOQuery1

Tab ADO

Parent FMember

Property Connection Datasource Name SQL

Value FUtama.ADOConnection1 DataSource1 qTransaksi Select Pinjam.TglPinjam, DPinjam.KoleksiID, (Select Koleksi.Judul From Koleksi Where DPinjam.KoleksiID = Koleksi.KoleksiID) as Judul,

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

109

(Select Kembali.TglKembali From Kembali Where DPinjam.KembaliID = Kembali.KembaliID) as TglKembali From Pinjam, DPinjam Where (Pinjam.PinjamID = DPinjam.PinjamID) and (Pinjam.MemberID = :MemberID) Order by Pinjam.TglPinjam

22. Pilih qTransaksi pada Object Treeview, klik tombol ellipsis pada property Parameters untuk membuka jendela Edit Parameters, pilih MemberID (lihat gambar), ubah property seperti table di bawah ini : Komponen TParameters[0]

Property DataType

Value ftInteger

23. Buat persistent field untuk query qTransaksi, klik dua kali qTransaksi pada Object TreeView untuk membuka field editor, kemudian klik kanan pada field editor dan pilih Add All Fields. Kalau gagal, coba periksa kembali property SQL pada qTransaksi, mungkin ada kesalahan penulisan script. 24. Tambahkan Datasource2 dari tab Data Access, ubah property seperti table di bawah ini : Komponen Datasource2

Tab Data Access

Parent FMember

Property Dataset

Value qTransaksi

25. Atur layout form FMember seperti gambar di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

110

26. Atur urutan tab pada GroupBox1 dengan cara klik kanan GroupBox1, pilih Tab Order, kemudian atur urutan tab dengan urutan seperti gambar berikut :

27. Tambahkan variable MemberID dengan type Integer pada blok Public di unit UFMember, lihat gambar berikut :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

111

28. Pilih FMember pada Object TreeView, buat event OnCreate, OnShow dan OnClose, ketikkan perintah seperti table di bawah ini : Komponen FMember

Event onCreate

onShow

onClose

Code procedure TFMember.FormCreate(Sender: TObject); begin MemberID := 0; PageControl1.ActivePageIndex := 0; end; procedure TFMember.FormShow(Sender: TObject); begin Randomize; Member.Open; qTransaksi.Open; If MemberID > 0 then Member.Locate('MemberID', MemberID, []) else Member.Insert; If FUtama.HakAkses = 0 then DBEdit11.PasswordChar := '*' else DBEdit11.PasswordChar := #0; end; procedure TFMember.FormClose(Sender: TObject; var Action: TCloseAction); begin MemberID := 0; qTransaksi.Close; Member.Close; end;

29. Pilih SpeedButton1, SpeedButton2, SpeedButton3 dan SpeedButton4 pada Object TreeView, buat event OnClick, ketikkan perintah seperti table di bawah ini : Komponen SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4

Event onClick

Code procedure TFMember.SpeedButton1Click(Sender: TObject); begin Case (Sender as TSpeedButton).Tag of 1 : Member.Post; 2 : Member.Delete; 3:; 4 : Member.Cancel; End; If (Sender as TSpeedButton).Tag in [2,4] then Close; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

112

30. Pilih Member pada Object TreeView, buat event AfterScroll, BeforeDelete, BeforePost dan onNewRecord, ketikkan perintah seperti table di bawah ini : Komponen Member

Event AfterScroll

BeforeDelete

BeforePost

onNewRecord

Code procedure TFMember.MemberAfterScroll(DataSet: TDataSet); begin DateTimePicker1.Date := MemberTglDaftar.Value; end; procedure TFMember.MemberBeforeDelete(DataSet: TDataSet); begin If MessageDlg('Hapus data?',mtConfirmation, [mbYes, mbNo], 0) = mrNo then Abort; end; procedure TFMember.MemberBeforePost(DataSet: TDataSet); begin MemberTglDaftar.Value := DateTimePicker1.Date; end; procedure TFMember.MemberNewRecord(DataSet: TDataSet); begin If DBEdit2.Enabled then ActiveControl := DBEdit2; MemberKota.Value := 'BANJARMASIN'; MemberTandaPengenal.Value := 'KTP'; MemberTglDaftar.Value := Now; MemberStatus.Value := 'AKTIF'; MemberPasswords.Value := FormatFloat('0000', Random(9999)); end;

31. Pilih Datasource1 pada Object TreeView, buat event onStateChange, ketikkan perintah seperti table di bawah ini : Komponen DataSource1

Event onStateChange

Code procedure TFMember.DataSource1StateChange(Sender: TObject); begin SpeedButton1.Enabled := (Member.State in dsEditModes) and (FUtama.HakAkses in [1,2]); SpeedButton2.Enabled := (Member.State in [dsBrowse]) and (FUtama.HakAkses in [1,2]); SpeedButton3.Enabled := (Member.State in [dsBrowse]) and (FUtama.HakAkses in [1,2]); BitBtn1.Enabled := (FUtama.HakAkses in [1,2]); DBEdit2.Enabled := FUtama.HakAkses in [1,2]; DBEdit3.Enabled := FUtama.HakAkses in [1,2]; DBEdit4.Enabled := FUtama.HakAkses in [1,2]; DBCombobox1.Enabled := FUtama.HakAkses in [1,2]; DBEdit6.Enabled := FUtama.HakAkses in [1,2]; DBEdit7.Enabled := FUtama.HakAkses in [1,2]; DBEdit8.Enabled := FUtama.HakAkses in [1,2]; DateTimePicker1.Enabled := FUtama.HakAkses in [1,2]; DBCombobox2.Enabled := FUtama.HakAkses in [1,2]; DBNavigator1.Enabled := FUtama.HakAkses in [1,2]; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

113

32. Pilih BitBtn1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen BitBtn1

Event onClick

Code procedure TFMember.BitBtn1Click(Sender: TObject); begin With OpenPictureDialog1 do Begin If Execute then Begin If Member.State in [dsBrowse] then Member.Edit; DBImage1.Picture.LoadFromFile(FileName); End; End; end;

33. Pilih TabSheet2 pada Object TreeView. 34. Tambahkan DBGrid1 dari tab Data Control ke dalam TabSheet2, ubah property seperti table di bawah ini : Komponen DBGrid1

Tab Data Control

Parent TabSheet2

Property Align Datasource

Value alClient DataSource2

35. Klik dua kali DBGrid1 pada Object TreeView untuk membuka Column Editor. Klik kanan pada Column Editor, pilih Add All Fields (lihat gambar dibawah ini). Atur property untuk masing-masing kolom seperti table di bawah ini :

Komponen DBGrid1.Columns[0]

DBGrid1.Columns[1]

Property Title.Alignment Title.Caption Title.Font.Style.fsBold Width Title.Alignment Title.Caption Title.Font.Style.fsBold

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value taCenter Tgl Pinjam True 100 taCenter #Koleksi True

114

Komponen DBGrid1.Columns[2]

DBGrid1.Columns[3]

Property Width Title.Alignment Title.Caption Title.Font.Style.fsBold Width Title.Alignment Title.Caption Title.Font.Style.fsBold Width

Value 60 taCenter Judul True 250 taCenter Tgl Kembali True 100

36. Pada tahap ini seharusnya FMember mempunyai tampilan seperti gambar berikut ini :

37. Kembali ke form FUtama, klik menu View – Form…, pilih FUtama, klik OK untuk melanjutkan. 38. Klik menu File – Use Unit, pilih FMember, klik OK untuk melanjutkan. 39. Pilih Member1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen Member1

Event onClick

Code procedure TFUtama.Member1Click(Sender: TObject); begin FMember.ShowModal; end;

40. Pilih SpeedButton1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen SpeedButton1

Event onClick

Code procedure TFUtama.SpeedButton1Click(Sender: TObject); begin FMember.ShowModal; end;

41. Simpan, jalankan dan uji aplikasi.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

115

Tugas : 1. Selesaikan Latihan 17, 18, 19, 20, dan 21. 2. Masukkan minimal 10 data member member lengkap dengan foto melalui form Member. 3. Tugas akan diperiksa pada pertemuan berikutnya.

Perbaikan (Khusus kelas 3E dan 3G) :

NEW

1. Lakukan perbaikan pada Latihan 21 (Membuat Form Member) : Point 10, 20, 21 - 24, 26, 28, 29, 31 dan 32.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

116

Cara Instalasi QuickReport di Delphi 7.0

QuickReport merupakan komponen yang dapat digunakan untuk membuat laporan dengan berbagai macam bentuk. Seperti pendahulunya, QuickReport juga disertakan dalam Delphi 7.0 tetapi tidak secara otomatis terpasang pada proses instalasi Delphi 7.0. Berikut adalah langkah-langkah instalasi QuickReport pada Delphi 7.0 : 1. Jalankan aplikasi Delphi. 2. Klik menu Components – Install Packages, klik Add untuk menambahkan paket baru.

3. Cari file dcltqr70.bpl pada lokasi C:\Program Files\Borland\Delphi7\Bin. Klik Open untuk membuka file tersebut. Klik OK untuk menutup Project Options.

4. Pada tahap ini seharusnya komponen QuickReport sudah terpasang dengan baik.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

117

Latihan 22 : Membuat QuickReport Kartu Member

Kartu member dibuat menggunakan komponen QuickReport. Pastikan QuickReport sudah terpasang pada Delphi 7.0, karena QuickReport tidak otomatis terpasang pada instalasi Delphi 7.0. Jika belum lihat dokumen instalasi QuickReport di Delphi 7.0. Langkah-langkah : 1. Pastikan project Rental.dpr telah dibuka. 2. Buat Report baru, klik menu File – New – Others, pada tab New pilih Reports, klik OK untuk melanjutkan.

3. Klik menu File – Use Unit, pilih UFUtama, klik OK untuk melanjutkan. 4. Tambahkan ADOQuery1 dari tab ADO, ubah property seperti table di bawah ini : Komponen ADOQuery1

Tab ADO

Parent QuickReport1

Property Connection Name SQL

Value FUtama.ADOConnection1 qMember Select Member.* From Member Where (Member.MemberID = :MemberID)

5. Pilih qMember pada Object TreeView, klik tombol ellipsis pada property Parameters untuk membuka jendela Edit Parameters, pilih MemberID, ubah property seperty table di bawah ini : Komponen TParameters[0]

Property DataType

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value ftInteger

118

6. Buat persistent field untuk qMember, klik dua kali qMember pada Object TreeView, klik kanan di field editor, pilih Add All Fields. 7. Pilih QuickReport1 pada Object TreeView, ubah property seperti table di bawah ini : Komponen QuickReport1

Property Dataset Name

Value qMember QRKartuMember

8. Klik menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UQRKartuMember.pas dalam folder Rental. 9. Klik dua kali QRKartuMember pada Object TreeView untuk membuka jendela Report Settings. 10. Pada jendela Report Settings, ubah Units menjadi MM, klik Apply. 11. Masih pada jendela Report Settings, ubah setting lainnya seperti gambar berikut ini, setelah selesai klik OK untuk melanjutkan :

12. Tambahkan 14 buah QRLabel dari tab QReports ke dalam TitleBand1, ubah property seperti table dibawah ini : Komponen QRLabel1

Tab QReports

Parent TitleBand1

Property Alignment AlignToBand AutoSize Caption Font.Size

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value taCenter True True KARTU MEMBER 10

119

Komponen

Tab

Parent TitleBand1 TitleBand1 TitleBand1 TitleBand1 TitleBand1 TitleBand1

Property Font.Style.fsBold Caption Caption Caption Caption Caption Caption

Value True #Member Nama Member Alamat Telepon Handphone :

QRLabel2 QRLabel3 QRLabel4 QRLabel5 QRLabel6 QRLabel7, QRLabel8, QRLabel9, QRLabel10, QRLabel11 QRLabel12 QRLabel13 QRLabel14

QReports QReports QReports QReports QReports QReports

QReports QReports QReports

TitleBand1 TitleBand1 TitleBand1

Caption Caption Caption

NamaRental AlamatRental TelpRental

13. Tambahkan 5 buah QRDBText dan 1 buah QRDBImage dari tab QReports ke dalam TitleBand1, ubah property seperti table di bawah ini :

Komponen QRDBText1, QRDBText2, QRDBText3, QRDBText4, QRDBText5, QRDBImage1 QRDBText1 QRDBText2 QRDBText3 QRDBText4 QRDBText5 QRDBImage1

Tab

Parent

Property Dataset

Value qMember

QReports QReports QReports QReports QReports QReports

TitleBand1 TitleBand1 TitleBand1 TitleBand1 TitleBand1 TitleBand1

DataField DataField DataField DataField DataField DataField Stretch

MembeID Nama Alamat TeleponRumah Handphone Photo True

14. Atur layout QRKartuMember seperti gambar di bawah ini :

15. Kembali ke form FMember, klik menu View – Form, pilih FMember, klik OK untuk melanjutkan.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

120

16. Klik menu File – Use Unit, pilih UQRKartuMember, klik OK untuk melanjutkan. 17. Buat procedure CetakKartu pada blok private, tekan Ctrl+Shift+C untuk membuat blok procedure, ketikkan perintah seperti pada table di bawah ini : Komponen FMember

Procedure CetakKartu

Code procedure TFMember.CetakKartu; begin With QRKartuMember do Begin qMember.Close; qMember.Parameters[0].Value := MemberMemberID.Value; qMember.Open; QRLabel12.Caption := FUtama.NamaRental; QRLabel13.Caption := FUtama.AlamatRental; QRLabel14.Caption := FUtama.TelpRental; Preview; End; end;

18. Pilih SpeedButton3 pada Object TreeView, perbarui event onClick seperti table di bawah ini : Komponen SpeedButton3

Event onClick

Code procedure TFMember.SpeedButton1Click(Sender: TObject); begin Case (Sender as TSpeedButton).Tag of 1 : Member.Post; 2 : Member.Delete; 3 : CetakKartu; 4 : Member.Cancel; End; If (Sender as TSpeedButton).Tag in [2,4] then Close; end;

19. Simpan, jalankan dan uji aplikasi.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

121

Latihan 23 : Membuat Form Koleksi

Form koleksi digunakan untuk mengelola data koleksi yang meliputi judul, kategori, jenis koleksi, harga sewa, harga denda serta jumlah koleksi. Form Koleksi juga menyimpan gambar cover koleksi serta dapat menampilkan preview dalam bentuk video pendek. Selain itu Form Koleksi juga menyajikan histori transaksi untuk tiap koleksi. Langkah-langkah : 1. Pastikan project Rental.dpr telah dibuka. 2. Buat Form baru, klik menu File – New – Form. 3. Ubah property form yang baru dibuat seperti pada table di bawah ini : Komponen Form1

Property Caption BorderStyle Name Position

Value Koleksi bsDialog FKoleksi poDesktopCenter

4. Klik menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UFKoleksi.pas dalam folder Rental. 5. Klik menu File – Use Unit, pilih FUtama, klik OK untuk melanjutkan. 6. Tambahkan PageControl1 dari tab Win32, ubah property seperti table di bawah ini : Komponen PageControl1

Tab Win32

Parent FKoleksi

Property Align

Value alClient

7. Tambahkan dua buah TabSheet dengan cara mengklik kanan komponen PageControl1, kemudian pilih New Page. Atur property seperti table di bawah ini ; Komponen TabSheet1 TabSheet2

Parent PageControl1 PageControl1

Property Caption Caption

Value Data Koleksi Histori Transaksi

8. Tambahkan GroupBox1 dari tab Standard ke dalam TabSheet1, ubah property seperti table di bawah ini : Komponen GroupBox1

Tab Standard

Parent TabSheet1

Property Align Caption

Value alClient

9. Tambahkan ToolBar1 dari tab Win32 ke dalam GroupBox1, ubah property seperti table di bawah ini : Komponen ToolBar1

Tab Win32

Parent GroupBox1

Property Autosize ButtonHeight

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value True 44

122

Komponen

Tab

Parent

Property ButtonWidth

Value 46

10. Tambahkan 3 buah SpeedButton dari tab Additional ke dalam ToolBar1, atur property seperti table di bawah ini : Komponen SpeedButton1

Tab Additional

Parent ToolBar1

SpeedButton2

Additional

ToolBar1

SpeedButton3

Additional

ToolBar1

SpeedButton1, SpeedButton2, SpeedButton3

Property Caption Glyph Tag Caption Glyph Tag Caption Glyph Tag Layout Width Flat Height

Value Simpan Simpan.bmp 1 Hapus Hapus.bmp 2 Batal Batal.bmp 3 blTop 46 True 44

11. Tambahkan 3 buah ADOTable dari tab ADO, atur property seperti table di bawah ini : Komponen ADOTable1

Tab ADO

Parent FKoleksi

ADOTable2

ADO

FKoleksi

ADOTable3

ADO

FKoleksi

Property Connection Name TableName Connection Name TableName Connection Name TableName

Value FUtama.ADOConnection1 Koleksi Koleksi FUtama.ADOConnection1 Karyawan Karyawan FUtama.ADOConnection1 Pemasok Pemasok

12. Buat persistent field untuk table Koleksi, klik dua kali Koleksi pada Object TreeView untuk membuka field editor, klik kanan pada field editor pilih Add All Fields. 13. Buat persistent field untuk table Karyawan, klik dua kali Karyawan pada Object TreeView untuk membuka field editor, klik kanan pada field editor pilih Add All Fields. 14. Buat persistent field untuk table Pemasok, klik dua kali Pemasok pada Object TreeView untuk membuka field editor, klik kanan pada field editor pilih Add All Fields. Berikut hasil langkah ke 12, 13, dan 14 :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

123

15. Tambahkan field baru NamaPemasok pada table Koleksi dengan cara klik dua kali Koleksi untuk membuka field editor, kemudian pilih New Field untuk membuka jendela New Field, lihat gambar berikut :

Isi informasi seperti pada table di bawah ini (lihat gambar di atas) : Field NamaPemasok

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value NamaPemasok String 30 Lookup PemasokID Pemasok PemasokID Nama

16. Tambahkan field baru NamaKaryawan pada table koleksi, klik dua kali Koleksi pada Object TreeView untuk membuka field editor, klik kanan pada field editor kemudian pilih New Fields. Lengkapi informasi pada jendela New Field seperti pada table di bawah ini (lihat langkah 15) :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

124

Field NamaKaryawan

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value NamaKaryawan String 30 Lookup KaryawanID Karyawan KaryawanID Nama

17. Klik dua kali Koleksi untuk membuka field editor, lakukan drag and drop field KoleksiID, Judul dan PemeranUtama ke dalam GroupBox1. 18. Tambahkan 3 buah Label dari tab Standard, ubah property seperti table di bawah ini : Komponen Label3 Label4 Label5

Tab Standard Standard Standard

Parent GroupBox1 GroupBox1 GroupBox1

Property Caption Caption Caption

Value Kategori Jenis Koleksi Tgl Beli

19. Tambahkan 2 buah DBCombobox1 dari tab Data Control ke dalam GroupBox1, ubah property seperti table di bawah ini : Komponen DBCombobox1, DBCombobox2

Tab

Parent

DBCombobox1

DataControl

GroupBox1

DBCombobox2

DataControl

GroupBox1

Property Datasource Sorted Style Datafield Items

Datafield Items

Value Datasource1 True csDropdownlist Kategori ACTION DRAMA DRAMA MUSICAL HOROR HOROR KOMEDI KARTUN KOMEDI KOMEDI ROMANTIS LAIN-LAIN JenisKoleksi CD CD AUDIO CD MP3 DVD

20. Tambahkan 1 buah DateTimePicker dari tab Win32 ke dalam GroupBox1. 21. Klik dua kali Koleksi untuk membuka field editor, lakukan drag and drop field HargaBeli, PemasokID, NamaPemasok, LamaSewa, HargaSewa, HargaDenda, Jumlah, KaryawanID, NamaKaryawan, Cover dan Preview secara berurutan ke dalam GroupBox1. 22. Ubah property untuk komponen berikut : Komponen DBEdit1, DBEdit10, DBLookupCombobox2

Property Enabled

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value False

125

Komponen DBEdit1, DBEdit2, DBCombobox1, DBCombobox2, DBEdit3, DBEdit4, DBEdit5, DBEdit6, DBEdit7, DBEdit8, DBEdit9, DBEdit11 DBImage1

Property Charcase

Value ecUpperCase

Stretch

True

23. Tambahkan 2 buah BitBtn dari tab Additional ke dalam GroupBox1, atur property seperti table di bawah ini : Komponen BitBtn1 BitBtn2 BitBtn1, BitBtn2

Tab Additional Additional

Parent GroupBox1 GroupBox1

Property Caption Caption Glyph

Value Cover … Video … Cari.bmp

24. Tambahkan 1 buah Panel dari tab Standard ke dalam GroupBox1. 25. Tambahkan 1 buah MediaPlayer dari tab System ke dalam GroupBox1, atur property seperti table di bawah ini : Komponen MediaPlayer1

Tab System

Parent GroupBox1

Property Display VisibleButtons.btNext VisibleButtons.btPrev VisibleButtons.btStep VisibleButtons.btBack VisibleButtons.btRecord VisibleButtons.btEject

Value Panel1 False False False False False False

26. Tambahkan DBNavigator1 dari tab DataControl ke dalam GroupBox1, atur property seperti table di bawah ini : Komponen DBNavigator1

Tab Data Control

Parent GroupBox1

Property Align Datasource Flat VisibleButtons.nbInsert VisibleButtons.nbDelete VisibleButtons.nbEdit VisibleButtons.nbPost VisibleButtons.nbCancel VisibleButtons.nbRefresh

Value alBottom Datasource1 True False False False False False False

27. Tambahkan OpenPictureDialog1 dari tab Dialogs ke dalam GroupBox1. 28. Tambahkan OpenDialog1 dari tab Dialogs ke dalam GroupBox1, atur property seperti table di bawah ini : Komponen OpenDialog1

Tab Dialogs

Parent GroupBox1

Property Filter

Value Filter Name File Video (*.wmv,

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Filter *.wmv; *.avi;

126

Komponen

Tab

Parent

Property Title

Value *.avi, *.mpg) Cari Video

*.mpg

29. Tambahkan ADOQuery1 dari tab ADO, atur property seperti table di bawah ini : Komponen ADOQuery1

Tab ADO

Parent FMember

Property Connection Datasource Name SQL

Value FUtama.ADOConnection1 DataSource1 qTransaksi Select Pinjam.TglPinjam, Pinjam.MemberID, (Select Member.Nama From Member Where Pinjam.MemberID = Member.MemberID) as NamaMember, DPinjam.TglHarusKembali, (Select Kembali.TglKembali From Kembali Where DPinjam.KembaliID = Kembali.KembaliID) as TglKembali From Pinjam, DPinjam Where (Pinjam.PinjamID = DPinjam.PinjamID) and (DPinjam.KoleksiID = :KoleksiID) Order by Pinjam.TglPinjam

30. Pilih qTransaksi pada Object TreeView, klik tombol ellipsis pada property Parameters untuk membuka jendela Edit Parameters, pilih KoleksiID, ubah property seperti table di bawah ini : Komponen TParameters[0]

Property DataType

Value ftInteger

31. Buat persistent field untuk query qTransaksi, klik dua kali qTransaksi pada Object TreeView untuk membuka field editor, kemudian klik kanan pada field editor dan pilih Add All Fields. 32. Tambahkan Datasource2 dari tab Data Access, ubah property seperti table di bawah ini : Komponen Datasource2

Tab Data Access

Parent FMember

Property Dataset

Value qTransaksi

33. Atur layout form FKoleksi seperti gambar di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

127

34. Tambahkan variable KoleksiID dengan type Integer pada blok Public di unit UFKoleksi, lihat gambar berikut :

35. Pilih FKoleksi pada Object TreeView, buat event onCreate, OnShow dan OnClose, ketikkan perintah seperti table di bawah ini : Komponen FKoleksi

Event onCreate

onShow

Code procedure TFKoleksi.FormCreate(Sender: TObject); begin KoleksiID := 0; PageControl1.ActivePageIndex := 0; end; procedure TFKoleksi.FormShow(Sender: TObject); begin Koleksi.Open; Karyawan.Open; Pemasok.Open; qTransaksi.Open; If KoleksiID > 0 then Koleksi.Locate('KoleksiID', KoleksiID, []) else Koleksi.Insert; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

128

Komponen

Event onClose

Code procedure TFKoleksi.FormClose(Sender: TObject; var Action: TCloseAction); begin KoleksiID := 0; qTransaksi.Close; Karyawan.Close; Pemasok.Close; Koleksi.Close; MediaPlayer1.Close; end;

36. Pilih SpeedButton1, SpeedButton2 dan SpeedButton3 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen SpeedButton1, SpeedButton2, SpeedButton3

Event onClick

Code procedure TFKoleksi.SpeedButton1Click(Sender: TObject); begin Case (Sender as TSpeedButton).Tag of 1 : Koleksi.Post; 2 : Koleksi.Delete; 3 : Koleksi.Cancel; End; If (Sender as TSpeedButton).Tag 1 then Close; end;

37. Pilih Koleksi pada Object TreeView, buat event AfterScroll, BeforeDelete, BeforePost dan onNewRecord, ketikkan perintah seperti table di bawah ini : Komponen Koleksi

Event AfterScroll

BeforeDelete

BeforePost

Code procedure TFKoleksi.KoleksiAfterScroll(DataSet: TDataSet); begin MediaPlayer1.Close; DateTimePicker1.Date := KoleksiTglBeli.Value; If FileExists(KoleksiPreview.Value) then Begin MediaPlayer1.FileName := KoleksiPreview.Value; MediaPlayer1.Open; MediaPlayer1.DisplayRect := Rect(10,10,Panel1.Width - 20, Panel1.Height - 20); End Else MediaPlayer1.FileName := ''; end; procedure TFKoleksi.KoleksiBeforeDelete(DataSet: TDataSet); begin If MessageDlg('Hapus data?',mtConfirmation, [mbYes, mbNo], 0) = mrNo then Abort; end; procedure TFKoleksi.KoleksiBeforePost(DataSet: TDataSet); begin KoleksiTglBeli.Value := DateTimePicker1.Date; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

129

Komponen

Event onNewRecord

Code procedure TFKoleksi.KoleksiNewRecord(DataSet: TDataSet); begin If DBEdit2.Enabled then ActiveControl := DBEdit2; KoleksiTglBeli.Value := Now; DateTimePicker1.Date := KoleksiTglBeli.Value; KoleksiHargaBeli.Value := 0; KoleksiLamaSewa.Value := 2; KoleksiHargaSewa.Value := 3000; KoleksiHargaDenda.Value := 3000; KoleksiJumlah.Value := 1; KoleksiKaryawanID.Value := FUtama.KaryawanID; end;

38. Pilih Datasource1 pada Object TreeView, buat event onStateChange, ketikkan perintah seperti table di bawah ini : Komponen DataSource1

Event onStateChange

Code procedure TFKoleksi.DataSource1StateChange(Sender: TObject); begin SpeedButton1.Enabled := (Koleksi.State in dsEditModes) and (FUtama.HakAkses in [1,2]); SpeedButton2.Enabled := (Koleksi.State in [dsBrowse]) and (FUtama.HakAkses in [1,2]); DBEdit2.Enabled := FUtama.HakAkses in [1,2]; DBCombobox1.Enabled := FUtama.HakAkses in [1,2]; DBCombobox2.Enabled := FUtama.HakAkses in [1,2]; DateTimePicker1.Enabled := FUtama.HakAkses in [1,2]; DBEdit3.Enabled := FUtama.HakAkses in [1,2]; DBEdit4.Enabled := FUtama.HakAkses in [1,2]; DBLookUpCombobox1.Enabled := FUtama.HakAkses in [1,2]; DBEdit5.Enabled := FUtama.HakAkses in [1,2]; DBEdit6.Enabled := FUtama.HakAkses in [1,2]; DBEdit7.Enabled := FUtama.HakAkses in [1,2]; DBEdit8.Enabled := FUtama.HakAkses in [1,2]; DBEdit10.Enabled := FUtama.HakAkses in [1,2]; DBImage1.Enabled := FUtama.HakAkses in [1,2]; BitBtn1.Enabled := FUtama.HakAkses in [1,2]; BitBtn2.Enabled := FUtama.HakAkses in [1,2] end;

39. Pilih BitBtn1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen BitBtn1

Event onClick

Code procedure TFKoleksi.BitBtn1Click(Sender: TObject); begin With OpenPictureDialog1 do Begin If Execute then Begin If Koleksi.State in [dsBrowse] then Koleksi.Edit; DBImage1.Picture.LoadFromFile(FileName); End; End;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

130

Komponen

Event

Code end;

40. Pilih BitBtn2 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen BitBtn2

Event onClick

Code procedure TFKoleksi.BitBtn2Click(Sender: TObject); begin With OpenDialog1 do Begin If Execute then Begin If Koleksi.State in [dsBrowse] then Koleksi.Edit; KoleksiPreview.Value := FileName; MediaPlayer1.FileName := FileName; MediaPlayer1.Open; MediaPlayer1.DisplayRect := Rect(10, 10, Panel1.Width - 20, Panel1.Height - 20); End; End; end;

41. Pilih TabSheet2 pada Object TreeView. 42. Tambahkan DBGrid1 dari tab Data Control ke dalam TabSheet2, ubah property seperti table di bawah ini : Komponen DBGrid1

Tab Data Control

Parent TabSheet2

Property Align Datasource

Value alClient DataSource2

43. Klik dua kali DBGrid1 pada Object TreeView untuk membuka Column Editor. Klik kanan pada Column Editor, pilih Add All Fields. Atur property masing-masing kolom seperti table di bawah ini : Komponen DBGrid1.Columns[0]

DBGrid1.Columns[1]

DBGrid1.Columns[2]

DBGrid1.Columns[3]

DBGrid1.Columns[4]

Property Title.Alignment Title.Caption Title.Font.Style.fsBold Width Title.Alignment Title.Caption Title.Font.Style.fsBold Width Title.Alignment Title.Caption Title.Font.Style.fsBold Width Title.Alignment Title.Caption Title.Font.Style.fsBold Width Title.Alignment

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value taCenter Tgl Pinjam True 100 taCenter #Member True 60 taCenter Nama Member True 250 taCenter Tgl Harus Kembali True 120 taCenter

131

Komponen

Property Title.Caption Title.Font.Style.fsBold Width

Value Tgl Kembali True 100

44. Pada tahap ini seharusnya FKoleksi mempunyai tampilan seperti gambar di bawah ini :

45. Kembali ke form FUtama, klik menu View – Form, pilih FUtama, klik OK untuk melanjutkan. 46. Klik menu File – Use Unit, pilih FKoleksi, klik OK untuk melanjutkan. 47. Pilih Koleksi1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen Koleksi1

Event onClick

Code procedure TFUtama.Koleksi1Click(Sender: TObject); begin FKoleksi.ShowModal; end;

48. Pilih SpeedButton2 pada Object TreeView, buat event OnClick, ketikkan perintah seperti table di bawah ini : Komponen SpeedButton2

Event onClick

Code procedure TFUtama.SpeedButton2Click(Sender: TObject); begin FKoleksi.ShowModal; end;

49. Simpan, jalankan dan uji aplikasi.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

132

Latihan 24 : Membuat Form Pemasok

Form pemasok digunakan untuk mengelola data pemasok yang meliputi nama, alamat, kota dan no. telepon. Table pemasok merupakan table master yang hanya boleh dibuka dengan hak akses pemilik/administrator. Langkah-langkah : 1. Pastikan project Rental.dpr telah dibuka. 2. Buat form baru, klik menu File – New – Form. 3. Ubah property form yang baru dibuat seperti pada table di bawah ini : Komponen Form1

Property Caption BorderStyle Name Position

Value Pemasok bsDialog FPemasok poDesktopCenter

4. Klik menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UFPemasok.pas dalam folder rental. 5. Klik menu File – Use Unit, pilih UFUtama, klik OK untuk melanjutkan. 6. Tambahkan GroupBox1 dari tab Standard ke dalam FPemasok, ubah property seperti table di bawah ini : Komponen GroupBox1

Tab Standard

Parent FPemasok

Property Align Caption

Value alClient

7. Tambahkan ToolBar1 dari tab Win32 ke dalam GroupBox1, ubah property seperti table di bawah ini : Komponen ToolBar1

Tab Win32

Parent GroupBox1

Property Autosize ButtonHeight ButtonWidth

Value True 44 46

8. Tambahkan 4 buah SpeedButton dari tab Additional ke dalam ToolBar1, atur property seperti table di bawah ini : Komponen SpeedButton1

Tab Additional

Parent ToolBar1

SpeedButton1

Additional

ToolBar1

SpeedButton2

Additional

ToolBar1

SpeedButton3

Additional

ToolBar1

Property Caption Glyph Tag Caption Glyph Tag Caption Glyph Tag Caption Glyph

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value Baru Baru.bmp 1 Simpan Simpan.bmp 2 Hapus Hapus.bmp 3 Batal Batal.bmp

133

Tag Layout Width Flat Height

SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4

4 blTop 46 True 44

9. Tambahkan 2 buah GroupBox dari tab Standard ke dalam GroupBox1, atur property seperti table di bawah ini : Komponen GroupBox2

Tab Standard

Parent GroupBox1

GroupBox3

Standard

GroupBox1

Property Align Caption Align Caption

Value alLeft alClient

10. Tambahkan ADOTable1 dari tab ADO, atur property seperti table di bawah ini : Komponen ADOTable1

Tab ADO

Parent FPemasok

Property Connection Name TableName

Value FUtama.ADOConnection1 Pemasok Pemasok

11. Buat persistent field untuk table Pemasok, klik dua kali Pemasok pada Object TreeView, klik kanan pada field editor, pilih Add All Fields. 12. Masih di field editor table Pemasok, pilih semua field (jika belum, klik kanan pada field editor, pilih Select All), lakukan drag and drop seluruh field ke GroupBox3. 13. Ubah property untuk komponen Data Control seperti table di bawah ini : Komponen DBEdit1 DBEdit1, DBEdit2, DBEdit3, DBEdit4, DBEdit5

Property Enabled CharCase

Value False ecUpperCase

14. Tambahkan DBGrid1 dari tab Data Control ke dalam GroupBox2, atur property seperti table di bawah ini : Komponen DBGrid1

Tab Data Control

Parent GroupBox2

Property Align Datasource Options.dgRowSelect Options.dgAlwaysShowSelection Options.dgEditing

Value alClient Datasource1 False False True

15. Klik dua kali DBGrid1 untuk membuka Column Editor, klik kanan pada Column Editor, pilih Add All Fields. Dari daftar kolom yang ada, hapus semua kolom kecuali PemasokID dan Nama. Atur property masingmasing kolom seperti table di bawah ini : Komponen

Property

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value

134

Komponen DBGrid1.Columns[0]

DBGrid1.Columns[1]

Property Title.Alignment Title.Caption Title.Font.Style.fsBold Width Title.Alignment Title.Caption Title.Font.Style.fsBold Width

Value taCenter PemasokID True 100 taCenter Nama Pemasok True 60

16. Atur layout form FPemasok seperti gambar di bawah ini :

17. Pilih FPemasok pada Object TreeView, buat event onShow dan onClose, ketikkan perintah seperti table di bawah ini : Komponen FPemasok

Event onShow

onClose

Code procedure TFPemasok.FormShow(Sender: TObject); begin Pemasok.Open; end; procedure TFPemasok.FormClose(Sender: TObject; var Action: TCloseAction); begin Pemasok.Close; end;

18. Pilih SpeedButton1, SpeedButton2, SpeedButton3 dan SpeedButton4 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4

Event onClick

Code procedure TFPemasok.SpeedButton2Click(Sender: TObject); begin Case (Sender as TSpeedButton).Tag of 1 : Pemasok.Insert; 2 : Pemasok.Post; 3 : Pemasok.Delete;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

135

Komponen

Event

Code 4 : Pemasok.Cancel; End; end;

19. Pilih Pemasok pada Object TreeView, buat event onNewRecord, ketikkan perintah seperti table di bawah ini : Komponen Member

Event onNewRecord

Code procedure TFPemasok.PemasokNewRecord(DataSet: TDataSet); begin PemasokKota.Value := 'BANJARMASIN'; end;

20. Pilih Datasource1 pada Object TreeView, buat event onStateChange, ketikkan perintah seperti table di bawah ini : Komponen DataSource1

Event onStateChange

Code procedure TFPemasok.DataSource1StateChange(Sender: TObject); begin SpeedButton1.Enabled := (Pemasok.State in [dsBrowse]) and (FUtama.HakAkses in [2]); SpeedButton2.Enabled := (Pemasok.State in dsEditModes) and (FUtama.HakAkses in [2]); SpeedButton3.Enabled := (Pemasok.State in [dsBrowse]) and (FUtama.HakAkses in [2]); SpeedButton4.Enabled := (Pemasok.State in dsEditModes) and (FUtama.HakAkses in [2]); DBEdit2.Enabled := FUtama.HakAkses in [2]; DBEdit3.Enabled := FUtama.HakAkses in [2]; DBEdit4.Enabled := FUtama.HakAkses in [2]; DBEdit5.Enabled := FUtama.HakAkses in [2]; end;

21. Kembali ke form FUtama, klik menu View – Forms, pilih FUtama, klik OK untuk melanjutkan. 22. Klik menu File – Use Unit, pilih FPemasok, klik OK untuk melanjutkan. 23. Pilih Pemasok1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen Pemasok1

Event onClick

Code procedure TFUtama.Pemasok1Click(Sender: TObject); begin FPemasok.ShowModal; end;

24. Simpan, jalankan dan uji aplikasi.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

136

Latihan 25 : Membuat Form Karyawan

Form karyawan digunakan untuk mengelola data karyawan yang meliputi nama, alamat, dan no. telepon. Table karyawan merupakan table master yang hanya boleh dibuka dengan hak akses pemilik/administrator. Form karyawan juga digunakan untuk mengatur hak akses dan password yang akan digunakan karyawan untuk login ke dalam aplikasi. Langkah-langkah : 1. Pastikan project Rental.dpr telah dibuka. 2. Buat form baru, klik menu File – New – Form. 3. Ubah property form yang baru dibuat seperti pada table di bawah ini : Komponen Form1

Property Caption BorderStyle Name Position

Value Karyawan bsDialog FKaryawan poDesktopCenter

4. Klik menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UFKaryawan.pas dalam folder rental. 5. Klik menu File – Use Unit, pilih UFUtama, klik OK untuk melanjutkan. 6. Tambahkan GroupBox1 dari tab Standard ke dalam FKaryawan, ubah property seperti table di bawah ini : Komponen GroupBox1

Tab Standard

Parent FKaryawan

Property Align Caption

Value alClient

7. Copy dan paste ToolBar1 dari form FPemasok ke dalam GroupBox1. 8. Tambahkan 2 buah GroupBox dari tab Standard ke dalam GroupBox1, atur property seperti table di bawah ini : Komponen GroupBox2

Tab Standard

Parent GroupBox1

GroupBox3

Standard

GroupBox1

Property Align Caption Align Caption

Value alLeft alClient

9. Tambahkan ADOTable1 dari tab ADO, atur property seperti table di bawah ini : Komponen ADOTable1

Tab ADO

Parent FKaryawan

Property Connection Name TableName

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value FUtama.ADOConnection1 Karyawan Karyawan

137

10. Buat persistent field untuk table Karyawan, klik dua kali Karyawan pada Object TreeView, klik kanan pada field editor, pilih Add All Fields. 11. Masih di field editor table Karyawan, pilih semua field (jika belum, klik kanan pada field editor, pilih Select All), lakukan drag and drop seluruh field ke GroupBox3. 12. Ubah property untuk komponen Data Control seperti table di bawah ini : Komponen DBEdit1 DBEdit1, DBEdit2, DBEdit3, DBEdit4, DBEdit5, DBEdit6, DBEdit7 DBImage1

Property Enabled CharCase

Value False ecUpperCase

Stretch

True

13. Tambahkan OpenPictureDialog1 dari tab Dialogs. 14. Tambahkan BitBtn1 dari tab Additional ke dalam GroupBox3, atur property seperti table di bawah ini : Komponen BitBtn1

Tab Additional

Parent GroupBox3

Property Caption Glyph

Value Cari … Cari.bmp

15. Tambahkan DBGrid1 dari tab Data Control ke dalam GroupBox2, atur property seperti table di bawah ini : Komponen DBGrid1

Tab Data Control

Parent GroupBox2

Property Align Datasource Options.dgRowSelect Options.dgAlwaysShowSelection Options.dgEditing

Value alClient Datasource1 False False True

16. Klik dua kali DBGrid1 untuk membuka Column Editor, klik kanan pada Column Editor, pilih Add All Fields. Dari daftar kolom yang ada, hapus semua kolom kecuali KaryawanID dan Nama. Atur property masingmasing kolom seperti table di bawah ini : Komponen DBGrid1.Columns[0]

DBGrid1.Columns[1]

Property Title.Alignment Title.Caption Title.Font.Style.fsBold Width Title.Alignment Title.Caption Title.Font.Style.fsBold Width

Value taCenter KaryawanID True 100 taCenter Nama Karyawan True 60

17. Atur layout form FKaryawan seperti gambar di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

138

18. Pilih FKaryawan pada Object TreeView, buat event onShow dan onClose, ketikkan perintah seperti table di bawah ini : Komponen FPemasok

Event onShow

onClose

Code procedure TFKaryawan.FormShow(Sender: TObject); begin Randomize; Karyawan.Open; end; procedure TFKaryawan.FormClose(Sender: TObject; var Action: TCloseAction); begin Karyawan.Close; end;

19. Pilih SpeedButton1, SpeedButton2, SpeedButton3 dan SpeedButton4 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4

Event onClick

Code procedure TFKaryawan.SpeedButton1Click(Sender: TObject); begin Case (Sender as TSpeedButton).Tag of 1 : Karyawan.Insert; 2 : Karyawan.Post; 3 : Karyawan.Delete; 4 : Karyawan.Cancel; End; end;

20. Pilih Karyawan pada Object TreeView, buat event onNewRecord, ketikkan perintah seperti table di bawah ini : Komponen

Event

Code

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

139

Komponen Member

Event onNewRecord

Code procedure TFKaryawan.KaryawanNewRecord(DataSet: TDataSet); begin KaryawanKota.Value := 'BANJARMASIN'; KaryawanHakAkses.Value := 1; KaryawanPasswords.Value := FormatFloat('0000', Random(9999)); end;

21. Pilih Datasource1 pada Object TreeView, buat event onStateChange, ketikkan perintah seperti table di bawah ini : Komponen DataSource1

Event onStateChange

Code procedure TFKaryawan.DataSource1StateChange(Sender: TObject); begin SpeedButton1.Enabled := (Karyawan.State in [dsBrowse]) and (FUtama.HakAkses in [2]); SpeedButton2.Enabled := (Karyawan.State in dsEditModes) and (FUtama.HakAkses in [2]); SpeedButton3.Enabled := (Karyawan.State in [dsBrowse]) and (FUtama.HakAkses in [2]); SpeedButton4.Enabled := (Karyawan.State in dsEditModes) and (FUtama.HakAkses in [2]); DBEdit2.Enabled := FUtama.HakAkses in [2]; DBEdit3.Enabled := FUtama.HakAkses in [2]; DBEdit4.Enabled := FUtama.HakAkses in [2]; DBEdit5.Enabled := FUtama.HakAkses in [2]; DBEdit6.Enabled := FUtama.HakAkses in [2]; DBEdit7.Enabled := FUtama.HakAkses in [2]; DBImage1.Enabled := FUtama.HakAkses in [2]; end;

22. Pilih BitBtn1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen BitBtn1

Event onClick

Code procedure TFKaryawan.BitBtn1Click(Sender: TObject); begin With OpenPictureDialog1 do Begin If Execute then Begin If Karyawan.State in [dsBrowse] then Karyawan.Edit; DBImage1.Picture.LoadFromFile(FileName); End; End; end;

23. Kembali ke form FUtama, klik menu View – Forms, pilih FUtama, klik OK untuk melanjutkan. 24. Klik menu File – Use Unit, pilih FPemasok, klik OK untuk melanjutkan. 25. Pilih Karyawan1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

140

Komponen Karyawan1

Event onClick

Code procedure TFUtama.Karyawan1Click(Sender: TObject); begin FKaryawan.ShowModal; end;

26. Simpan, jalankan dan uji aplikasi.

Tugas di rumah :

NEW

1. Sempurnakan Latihan 17, 18, 19, 20 dan 21. 2. Selesaikan Latihan 22, 23, 24 dan 25. 3. Masukkan minimal 15 data koleksi lengkap dengan cover dan preview video (kalau ada) melalui form Koleksi. 4. Masukkan minimal 5 data pemasok melalui form Pemasok. 5. Masukkan minimal 5 data karyawan lengkap dengan foto melalui form Karyawan. 6. Tugas akan diperiksa satu persatu pada pertemuan berikutnya. 7. Tolong dicatat dan disampaikan apabila ditemukan adanya kekeliruan pada modul ini.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

141

Latihan 26 : Membuat Form Peminjaman

Form Peminjaman digunakan untuk melakukan transaksi peminjaman. Form ini menggunakan konsep master detail gabungan dari table Pinjam dan DPinjam. Pada form ini metode input transaksi dibuat semudah mungkin. Selain itu pada form ini disediakan fasilitas pencarian dan informasi jumlah stok koleksi yang tersedia. Langkah-langkah : 1. Pastikan project Rental.dpr telah dibuka. 2. Buat form baru, klik menu File – New – Form. 3. Ubah property form yang baru dibuat seperti pada table di bawah ini : Komponen Form1

Property Caption BorderStyle Name Position WindowState

Value Peminjaman bsSingle FPinjam poDesktopCenter wsMaximized

4. Klik menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UFPinjam.pas dalam folder Rental. 5. Klik menu File – Use Unit, pilih UFUtama, klik OK untuk melanjutkan. 6. Copy dan Paste ToolBar1 dari form FMember ke dalam FPinjam, atur kembali property seperti table di bawah ini : Komponen SpeedButton3 SpeedButton4

Tab Additional Additional

Parent ToolBar1 ToolBar1

Property Caption Caption

Value Nota Tutup

7. Tambahkan 3 buah Groupbox dari tab Standard ke dalam FPinjam, atur property seperti table di bawah ini : Komponen GroupBox1

Tab Standard

Parent FPinjam

GroupBox2

Standard

FPinjam

GroupBox3

Standard

FPinjam

Property Align Caption Align Caption Align Caption

Value alTop alLeft Koleksi Yang Dipinjam alBottom

8. Tambahkan 1 buah Splitter dari tab Additional ke dalam FPinjam. 9. Tambahkan 1 buah GroupBox dari tab Standar ke dalam FPinjam, atur property seperti table di bawah ini : Komponen GroupBox4

Tab Standard

Parent FPinjam

Property Align Caption

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value alClient Pencarian Koleksi

142

10. Tambahkan 2 buah ADOTable dan 4 buah ADOQuery, atur property seperti table di bawah ini : Komponen ADOTable1, ADOTable2, ADOQuery1, ADOQuery2, ADOQuery3, ADOQuery4 ADOTable1

Tab

Parent

Property Connection

Value FUtama.ADOConnection1

ADO

FPinjam

ADOTable2

ADO

FPinjam

ADOQuery1

ADO

FPinjam

Name TableName Name TableName Name SQL

ADOQuery2

ADO

FPinjam

Name SQL

ADOQuery3

ADO

FPinjam

Name SQL

ADOQuery4

ADO

FPinjam

Name SQL

Pinjam Pinjam DPinjam DPinjam qMember Select Member.MemberID, Member.Nama, Member.Alamat, Member.Kota, Member.Handphone From Member Order by Member.Nama qKaryawan Select Karyawan.KaryawanID, Karyawan.Nama From Karyawan Order by Karyawan.Nama qKoleksi Select Koleksi.KoleksiID, Koleksi.Judul, Koleksi.HargaSewa, Koleksi.LamaSewa From Koleksi Order by Koleksi.Judul qStock Select Koleksi.KoleksiID, Koleksi.Judul, Koleksi.PemeranUtama, Koleksi.Kategori, Koleksi.JenisKoleksi, (Koleksi.Jumlah (Select Count(DPinjam.DPinjamID) From Pinjam, DPinjam Where (Pinjam.PinjamID = DPinjam.PinjamID) and (DPinjam.KoleksiID = Koleksi.KoleksiID) and (DPinjam.KembaliID = 0))) as stock From Koleksi Where (Koleksi.Judul like :Judul) Or (Koleksi.PemeranUtama like :PemeranUtama) Or (Koleksi.Kategori like :Kategori) Or (Koleksi.JenisKoleksi like :JenisKoleksi)

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

143

Komponen

Tab

Parent

Property

Value Order by Koleksi.Judul, Koleksi.PemeranUtama

11. Pilih qStock pada Object TreeView, klik tombol ellipsis pada property Parameters untuk membuka jendela Edit Parameters, ubah property seperti table di bawah ini : Komponen TParameters[0] TParameters[1] TParameters[2] TParameters[3]

Property DataType DataType DataType DataType

Value ftWideString ftWideString ftWideString ftWideString

12. Buat persistent field table Pinjam, klik dua kali Pinjam pada Object TreeView untuk membuka field editor, klik kanan dan pilih Add All Fields. 13. Dengan cara yang sama dengan point 12, buat persistent field table DPinjam, qMember, qKaryawan, qKoleksi dan qStock. 14. Klik dua kali Pinjam pada Object TreeView untuk membuka field editor, pilih field TotalSewa, ubah property seperti table di bawah ini : Komponen PinjamTotalSewa

Property Currency

Value True

15. Klik dua kali DPinjam pada Object TreeView untuk membuka field editor, pilih field HargaSewa, ubah property seperti table di bawah ini : Komponen DPinjamHargaSewa

Property Currency

Value True

16. Tambahkan 3 buah DataSource dari tab Data Access, ubah property seperti table di bawah ini ; Komponen Datasource1 DataSource2 DataSource3

Tab Data Access Data Access Data Access

Parent FPinjam FPinjam FPinjam

Property Dataset Dataset Dataset

Value Pinjam DPinjam qStock

17. Buat hubungan master detail antara table Pinjam dan DPinjam, Pilih table DPinjam pada Object TreeView, ubah property seperti table di bawah ini : Komponen DPinjam

Property MasterSource

Value Datasource1

18. Pilih table DPinjam pada Object TreeView, klik tombol ellipsis pada property MasterField untuk membuka Field Link Designer. Pilih PinjamID pada Detail Fields dan PinjamID pada Master Fields. Klik Add untuk menambahkan ke dalam Joined Fields. Klik OK untuk melanjutkan.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

144

19. Tambahkan field baru NamaMember pada table Pinjam, klik dua kali Pinjam pada Object TreeView untuk membuka field editor, klik kanan dan pilih New Fields, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field NamaMember

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value NamaMember String 30 Lookup MemberID qMember MemberID Nama

20. Tambahkan field baru Alamat pada table Pinjam, sama seperti point 19, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field Alamat

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value Alamat String 50 Lookup MemberID qMember MemberID Alamat

21. Tambahkan field baru Kota pada table Pinjam, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field Kota

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value Kota String 30 Lookup MemberID

145

Dataset Lookup Keys Result Field

qMember MemberID Kota

22. Tambahkan field baru Handphone pada table Pinjam, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field Handphone

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value Handphone String 30 Lookup MemberID qMember MemberID Handphone

23. Tambahkan field baru NamaKaryawan pada table Pinjam, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field NamaKaryawan

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value NamaKaryawan String 30 Lookup KaryawanID qKaryawan KaryawanID Nama

24. Klik dua kali DPinjam pada Object TreeView untuk membuka Field Editor, tambahkan field baru JudulKoleksi pada table DPinjam, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field JudulKoleksi

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value JudulKoleksi String 100 Lookup KoleksiID qKoleksi KoleksiID Judul

25. Tambahkan field baru HargaSewaKoleksi pada table DPinjam, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field HargaSewaKoleksi

Section Field Properties Field type Lookup Definition

Property Name Type Field type Key Fields Dataset

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value HargaSewaKoleksi Currency Lookup KoleksiID qKoleksi

146

Lookup Keys Result Field

KoleksiID HargaSewa

26. Tambahkan field baru LamaSewaKoleksi pada table DPinjam, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field LamaSewaKoleksi

Section Field Properties Field type Lookup Definition

Property Name Type Field type Key Fields Dataset Lookup Keys Result Field

Value LamaSewaKoleksi Integer Lookup KoleksiID qKoleksi KoleksiID LamaSewa

27. Klik dua kali Pinjam pada Object TreeView untuk membuka field Editor. Pilih field PinjamID, TglPinjam, MemberID, NamaMember, Alamat, Kota dan Handphone, lakukan drag and drop ke dalam GroupBox1. 28. Tambahkan DBGrid1 dari tab Data Control ke dalam GroupBox2, atur property seperti table di bawah ini : Komponen DBGrid1

Tab Data Control

Parent GroupBox2

Property Align Datasource Options.dgRowSelect Options.dgAlwaysShowSelection

Value alClient DataSource2 True True

29. Klik dua kali DBGrid1 pada Object TreeView untuk membuka Column Editor, tambahkan 4 buah column dengan mengklik kanan Column Editor, pilih Add, ubah property masing-masing kolom seperti table di bawah ini : Komponen DBGrid1.Columns[0] DBGrid1.Columns[1] DBGrid1.Columns[2] DBGrid1.Columns[3] DBGrid1.Columns[0], DBGrid1.Columns[1], DBGrid1.Columns[2], DBGrid1.Columns[3]

Property FieldName Title.Caption FieldName Title.Caption FieldName Title.Caption FieldName Title.Caption Title.Alignment Title.Font.Style.fsBold

Value KoleksiID ID JudulKoleksi Judul Koleksi TglHarusKembali Tgl Harus Kembali HargaSewa Harga Sewa taCenter True

30. Klik dua kali Pinjam pada Object TreeView untuk membuka field editor, lakukan drag dan drop field NamaKaryawan dan TotalSewa ke dalam GroupBox3. 31. Tambahkan DBNavigator1 dari tab Data Control ke dalam GroupBox3, atur property seperti table di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

147

Komponen DBNavigator1

Tab Data Control

Parent GroupBox3

Property Align Datasource Flat VisibleButtons.nbInsert VisibleButtons.nbDelete VisibleButtons.nbEdit VisibleButtons.nbPost VisibleButtons.nbCancel VisibleButtons.nbRefresh

Value alBottom Datasource1 True False False False False False False

32. Tambahkan ToolBar2 dari tab Win32 ke dalam GroupBox4, atur property seperti table di bawah ini : Komponen ToolBar2

Tab Win32

Parent GroupBox4

Property Align

Value alBottom

33. Tambahkan Edit1 dari tab Standard ke dalam ToolBar2, atur property seperti table di bawah ini : Komponen Edit1

Tab Standard

Parent ToolBar2

Property Text

Value

34. Tambahkan DBGrid2 dari tab Data Control ke dalam GroupBox4, atur property seperti table di bawah ini : Komponen DBGrid2

Tab Data Control

Parent GroupBox4

Property Align Datasource Options.dgRowSelect Options.dgAlwaysShowSelection Options.dgEditing

Value alClient DataSource3 False False True

35. Klik dua kali DBGrid2 untuk membuka column editor, klik kanan pada column editor, kemudian pilih Add All Fields, atur susunan column seperti gambar di bawah ini :

Ubah property masing-masing kolom seperti table di bawah ini : Komponen DBGrid2.Columns[0] DBGrid2.Columns[1] DBGrid2.Columns[2]

Property Title.Caption Title.Caption Title.Caption

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value ID Judul Koleksi Stock

148

Komponen DBGrid2.Columns[3] DBGrid2.Columns[4] DBGrid2.Columns[5] DBGrid2.Columns[0], DBGrid2.Columns[1], DBGrid2.Columns[2], DBGrid2.Columns[3], DBGrid2.Columns[4], DBGrid2.Columns[5]

Property Title.Caption Title.Caption Title.Caption Title.Alignment Title.Font.Style.fsBold

Value Pemeran Utama Kategori Jenis Koleksi taCenter True

36. Atur property untuk komponen Data Control seperti table di bawah ini : Komponen DBEdit1, DBLookUpCombobox2, DBLookupCombobox3, DBLookupCombobox4, DBLookUpCombobox5, DBEdit4

Property Enabled

Value False

37. Atur layout form FPinjam seperti gambar di bawah ini :

38. Tambahkan unit DateUtils pada blok Uses di unit UFPinjam, lihat gambar berikut :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

149

39. Tambahkan variable PinjamID dengan type Integer pada blok Public di unit UFPinjam.

40. Buat procedure UpdateqStock dan procedure UpdateTotalSewa pada blok Private di unit UFPinjam, tekan Ctrl+Shift+C untuk membuat blok procedure (lihat gambar di atas), ketikkan perintah seperti table di bawah ini : Komponen FPinjam

Event UpdateqStock

UpdateTotalSewa

Code procedure TFPinjam.UpdateqStock; begin qStock.Close; qStock.Parameters[0].Value := '%' + Edit1.Text + qStock.Parameters[1].Value := '%' + Edit1.Text + qStock.Parameters[2].Value := '%' + Edit1.Text + qStock.Parameters[3].Value := '%' + Edit1.Text + qStock.Open; end; procedure TFPinjam.UpdateTotalSewa; var TempTotal: Real; PrevRecord: TBookmark; begin PrevRecord := DPinjam.GetBookmark; try DPinjam.DisableControls; DPinjam.First; TempTotal := 0; while not DPinjam.EOF do

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

'%'; '%'; '%'; '%';

150

Komponen

Event

Code begin TempTotal := TempTotal + DPinjamHargaSewa.Value; DPinjam.Next; end; If not (Pinjam.State in dsEditModes) then Pinjam.Edit; PinjamTotalSewa.Value := TempTotal; finally DPinjam.EnableControls; if PrevRecord nil then begin DPinjam.GoToBookmark(PrevRecord); DPinjam.FreeBookmark(PrevRecord); end; end; end;

41. Pilih FPinjam pada Object TreeView, buat event onCreate, onShow dan onClose, ketikkan perintah seperti table di bawah ini :

Komponen FKoleksi

Event onCreate

onShow

onClose

Code procedure TFPinjam.FormCreate(Sender: TObject); begin PinjamID := 0; end; procedure TFPinjam.FormShow(Sender: TObject); begin Pinjam.Open; DPinjam.Open; qMember.Open; qKaryawan.Open; qKoleksi.Open; UpdateqStock; If PinjamID > 0 then Pinjam.Locate('PinjamID', PinjamID, []) else Pinjam.Insert; end; procedure TFPinjam.FormClose(Sender: TObject; var Action: TCloseAction); begin Pinjam.Close; DPinjam.Close; qMember.Close; qKaryawan.Close; qKoleksi.Close; qStock.Close; end;

42. Pilih SpeedButton1, SpeedButton2, SpeedButton3 dan SpeedButton4 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen

Event

Code

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

151

Komponen SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4

Event onClick

Code procedure TFPinjam.SpeedButton1Click(Sender: TObject); begin Case (Sender as TSpeedButton).Tag of 1 : Pinjam.Post; 2 : Pinjam.Delete; 3:; 4 : Pinjam.Cancel; End; If (Sender as TSpeedButton).Tag in [2,4] then Close; end;

43. Pilih Pinjam pada Object TreeView, buat event BeforeDelete dan onNewRecord, ketikkan perintah seperti table di bawah ini : Komponen Pinjam

Event BeforeDelete

onNewRecord

Code procedure TFPinjam.PinjamBeforeDelete(DataSet: TDataSet); begin If MessageDlg('Hapus data?',mtConfirmation, [mbYes, mbNo], 0) = mrNo then Abort; end; procedure TFPinjam.PinjamNewRecord(DataSet: TDataSet); begin If DBEdit3.Enabled then ActiveControl := DBEdit3; PinjamTglPinjam.Value := Today; PinjamTotalSewa.Value := 0; PinjamKaryawanID.Value := FUtama.KaryawanID; end;

44. Pilih DPinjam pada Object TreeView, buat event AfterDelete, AfterPost, BeforeDelete dan onNewRecord, ketikkan perintah seperti table di bawah ini : Komponen DPinjam

Event AfterDelete

AfterPost

BeforeDelete

onNewRecord

Code procedure TFPinjam.DPinjamAfterDelete(DataSet: TDataSet); begin UpdateTotalSewa; end; procedure TFPinjam.DPinjamAfterPost(DataSet: TDataSet); begin UpdateTotalSewa; end; procedure TFPinjam.DPinjamBeforeDelete(DataSet: TDataSet); begin If MessageDlg('Hapus data?',mtConfirmation, [mbYes, mbNo], 0) = mrNo then Abort else UpdateqStock; end; procedure TFPinjam.DPinjamNewRecord(DataSet: TDataSet); begin DPinjamPinjamID.Value := PinjamPinjamID.Value; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

152

45. Pilih Datasource1 pada Object TreeView, buat event onStateChange, ketikkan perintah seperti table di bawah ini : Komponen DataSource1

Event onStateChange

Code procedure TFPinjam.DataSource1StateChange(Sender: TObject); begin SpeedButton1.Enabled := (Pinjam.State in dsEditModes) and (FUtama.HakAkses in [1,2]); SpeedButton2.Enabled := (Pinjam.State in [dsBrowse]) and (FUtama.HakAkses in [1,2]); SpeedButton3.Enabled := (Pinjam.State in [dsBrowse]) and (FUtama.HakAkses in [1,2]); DBEdit3.Enabled := FUtama.HakAkses in [1,2]; DBLookUpCombobox1.Enabled := FUtama.HakAkses in [1,2]; DBGrid1.Enabled := FUtama.HakAkses in [1,2]; DBGrid2.Enabled := FUtama.HakAkses in [1,2]; Edit1.Enabled := FUtama.HakAkses in [1,2]; DBNavigator1.Enabled := FUtama.HakAkses in [2]; end;

46. Pilih DBGrid1 pada Object TreeView, buat event onDblClick, ketikkan perintah seperti table di bawah ini : Komponen DBGrid1

Event onDblClick

Code procedure TFPinjam.DBGrid1DblClick(Sender: TObject); begin DPinjam.Delete; end;

47. Pilih DBGrid2 pada Object TreeView, buat event onDblClick, ketikkan perintah seperti table di bawah ini : Komponen DBGrid2

Event onDblClick

Code procedure TFPinjam.DBGrid2DblClick(Sender: TObject); begin If PinjamMemberID.Value = 0 then Begin MessageDlg('Silakan Pilih Member!', mtInformation, [mbOK], 0); Abort; End; If qStockStock.Value > 0 then Begin If Pinjam.State in dsEditModes then Pinjam.Post; DPinjam.Insert; DPinjamKoleksiID.Value := qStockKoleksiID.Value; DPinjamHargaSewa.Value := DPinjamHargaSewaKoleksi.Value; DPinjamTglHarusKembali.Value := PinjamTglPinjam.Value + DPinjamLamaSewaKoleksi.Value; DPinjamKembaliID.Value := 0; DPinjam.Post; UpdateqStock; End

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

153

Komponen

Event

Code Else MessageDlg('Stock koleksi kosong!', mtInformation, [mbOK], 0); end;

48. Pilih Edit1 pada Object TreeView, buat event onKeyPress, ketikkan perintah seperti table di bawah ini : Komponen Edit1

Event onKeyPress

Code procedure TFPinjam.Edit1KeyPress(Sender: TObject; var Key: Char); begin If Key = #13 then UpdateqStock; end;

49. Kembali ke form FUtama, klik View – Forms, pilih FUtama, klik OK untuk melanjutkan. 50. Klik menu File – Use Unit, pilih FPinjam, klik OK untuk melanjutkan. 51. Pilih Peminjaman1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen Peminjaman1

Event onClick

Code procedure TFUtama.Peminjaman1Click(Sender: TObject); begin FPinjam.ShowModal; end;

52. Pilih SpeedButton3 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen SpeedButton3

Event onClick

Code procedure TFUtama.SpeedButton3Click(Sender: TObject); begin FPinjam.ShowModal; end;

53. Simpan, jalankan dan uji aplikasi.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

154

Latihan 27 : Membuat QuickReport Nota Peminjaman

Nota Peminjaman adalah bukti transaksi peminjaman yang dilakukan oleh Member. Nota Peminjaman menggunakan kertas ukuran A5 dengan posisi Landscape. Langkah-langkah : 1. Pastikan project Rental.dpr telah dibuka. 2. Buat Report baru, klik menu File – New – Others, pada tab New pilih Reports, klik OK untuk melanjutkan. 3. Klik menu File – Use Unit, pilih UFUtama, klik OK untuk melanjutkan. 4. Tambahkan ADOQuery1 dari tab ADO, ubah property seperti table di bawah ini : Komponen ADOQuery1

Tab ADO

Parent QuickReport1

Property Connection Name SQL

Value FUtama.ADOConnection1 qPinjam Select Pinjam.*, Member.Nama as NamaMember, Member.Alamat, Member.Kota, Member.Handphone, Karyawan.Nama as NamaKaryawan, DPinjam.*, Koleksi.Judul, Koleksi.JenisKoleksi From Pinjam, Member, Karyawan, DPinjam, Koleksi Where (Pinjam.MemberID = Member.MemberID) and (Pinjam.KaryawanID = Karyawan.KaryawanID) and (Pinjam.PinjamID = DPinjam.PinjamID) and (DPinjam.KoleksiID = Koleksi.KoleksiID) and (Pinjam.PinjamID = :PinjamID) Order by DPinjam.DPinjamID

5. Pilih qPinjam pada Object TreeView, klik tombol ellipsis pada property Parameters untuk membuka jendela Edit Parameters, ubah property seperty table di bawah ini : Komponen TParameters[0]

Property DataType

Value ftInteger

6. Buat persistent field untuk qPinjam, klik dua kali qPinjam pada Object TreeView, klik kanan dan pilih Add All Fields. 7. Pilih QuickReport1 pada Object TreeView, ubah property seperti table di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

155

Komponen QuickReport1

Property Dataset Name

Value qPinjam QRNotaPinjam

8. Klik menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UQRNotaPinjam.pas dalam folder Rental. 9. Klik dua kali QRNotaPinjam pada Object TreeView untuk membuka jendela Report Settings. Ubah Units dari Inch menjadi MM, klik Apply. Settings Report Settings

Section Other

Property Units

Value MM

10. Masih pada jendela Report Settings, ubah setting lainnya seperti gambar berikut, klik OK untuk melanjutkan. Settings Report Settings

Section Paper size Margin

Other Bands

Property Paper size Orientation Top Bottom Left Right Font Size PageHeader ColumnHeader DetailBand Summary Print first page header Print last page footer

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value A5 148 x 210 mm Landscape 5.00 5.00 5.00 5.00 Trebuchet MS 10 True True True True True True

156

11. Tambahkan 22 buah QRLabel dari tab QReports ke PageHeaderBand1, ubah property seperti table di bawah ini :

dalam

Komponen QRLabel1 QRLabel2 QRLabel3 QRLabel1, QRLabel2, QRLabel3 QRLabel4

Tab QReports QReports QReports

Parent PageHeaderBand1 PageHeaderBand1 PageHeaderBand1

Property Caption Caption Caption Font.Style.fsBold

Value NamaRental AlamatRental TelpRental True

QReports

PageHeaderBand1

QRLabel5 QRLabel6 QRLabel7 QRLabel8 QRLabel9 QRLabel10 QRLabel11 QRLabel12 QRLabel13 QRLabel14 s/d QRLabel22

QReports QReports QReports QReports QReports QReports QReports QReports QReports QReports

PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1

Caption Font.Style.fsUnderline Font.Style.fsBold Caption Caption Caption Caption Caption Caption Caption Caption Caption Caption

NOTA PEMINJAMAN True True PinjamID Tanggal KaryawanID Nama Karyawan MemberID Nama Alamat Kota Handphone :

12. Tambahkan 9 buah QDBText dari tab QReports ke PageHeaderBand1, ubah property seperti table di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

dalam

157

Komponen QRDBText1 s/d QRDBText9 QRDBText1 QRDBText2 QRDBText3 QRDBText4 QRDBText5 QRDBText6 QRDBText7 QRDBText8 QRDBText9

Tab

Parent

Property Dataset

Value qPinjam

QReports QReports QReports QReports QReports QReports QReports QReports QReports

PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1 PageHeaderBand1

DataField DataField DataField DataField DataField DataField DataField DataField DataField

Pinjam.PinjamID TglPinjam KaryawanID NamaKaryawan MemberID NamaMember Alamat Kota Handphone

13. Pilih ColumnHeaderBand1 pada Object TreeView, ubah property seperti table di bawah ini : Komponen ColumnHeaderBand1

Property Frame.DrawBottom Frame.DrawTop Height

Value True True 32

14. Tambahkan 6 buah QRLabel dari tab QReports ke ColumnHeaderBand1, ubah property seperti table di bawah ini : Komponen QRLabel23 QRLabel24 QRLabel25 QRLabel26 QRLabel27 QRLabel28 QRLabel23, QRLabel24, QRLabel28

Tab QReports QReports QReports QReports QReports QReports

Parent ColumnHeaderBand1 ColumnHeaderBand1 ColumnHeaderBand1 ColumnHeaderBand1 ColumnHeaderBand1 ColumnHeaderBand1

Property Caption Caption Caption Caption Caption Caption Alignment

dalam

Value No. KoleksiID Judul Koleksi Jenis Koleksi Tgl. Harus Kembali Harga Sewa taRightJustify

15. Pilih DetailBand1 pada Object TreeView, ubah property seperti table di bawah ini : Komponen DetailBand1

Property Height

Value 19

16. Tambahkan 1 buah QRSysData, 4 buah QRDBText dan 1 buah QRExpr dari tab QReports ke dalam DetailBand1, ubah property seperti table di bawah ini : Komponen QRSysData1 QRDBText10, QRDBText11, QRDBText12, QRDBText13

Tab QReports QReports

Parent DetailBand1 DetailBand1

Property Data Dataset

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value qrsDetailNo qPinjam

158

Komponen QRDBText10 QRDBText11 QRDBText12 QRDBText13 QRExpr1

Tab

Parent

QReports

DetailBand1

QRSysData1, QRDBText10, QRExpr1 QRSysData1, QRDBText10, QRDBText11, QRDBtext12, QRDBText13, QRExpr1

Property DataField DataField DataField DataField Expression Alignment

Value KoleksiID Judul JenisKoleksi TglHarusKembali FORMATNUMERIC(',0', qPinjam.HargaSewa) taRightJustify

Autosize

False

17. Pilih SummaryBand1 pada Object TreeView, ubah property seperti table di bawah ini : Komponen SummaryBand1

Property Frame.DrawTop Height

Value True 40

18. Tambahkan 3 buah QRLabel, 1 buah QRSysData dan 1 buah QRExpr dari tab QReports ke dalam SummaryBand1, ubah property seperti table di bawah ini : Komponen QRLabel29 QRLabel30 QRSysData2 QRLabel31 QRExpr2

Tab QReports QReports QReports QReports QReports

Parent SummaryBand1 SummaryBand1 SummaryBand1 SummaryBand1 SummaryBand1

Property Caption Caption Data Caption Expression Autosize Alignment

Value Dicetak : qrsDateTime Total Sewa FORMATNUMERIC(',0', SUM(qPinjam.HargaSewa)) False taRightJustify

19. Atur layout QRNotaPinjam seperti gambar berikut ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

159

20. Kembali ke form FPinjam, klik menu View – Form, pilih FPinjam, klik OK untuk melanjutkan. 21. Klik menu File – Use Unit, pilih UQRNotaPinjam, klik OK untuk melanjutkan. 22. Buat procedure CetakNotaPinjam pada blok Private, tekan Ctrl+Shift+C untuk membuat blok procedure, ketikkan perintah seperti table di bawah ini : Komponen FPinjam

Procedure CetakNotaP injam

Code procedure TFPinjam.CetakNotaPinjam; begin With QRNotaPinjam do Begin qPinjam.Close; qPinjam.Parameters[0].Value := PinjamPinjamID.Value; qPinjam.Open; QRLabel1.Caption := FUtama.NamaRental; QRLabel2.Caption := FUtama.AlamatRental; QRLabel3.Caption := FUtama.TelpRental; Preview; End; end;

23. Pilih SpeedButton3 pada Object TreeView, perbarui event onClick seperti table di bawah ini : Komponen SpeedButton3

Event onClick

Code procedure TFPinjam.SpeedButton1Click(Sender: TObject); begin Case (Sender as TSpeedButton).Tag of 1 : Pinjam.Post; 2 : Pinjam.Delete; 3 : CetakNotaPinjam; 4 : Pinjam.Cancel; End; If (Sender as TSpeedButton).Tag in [2,4] then Close; end;

24. Simpan, jalankan dan uji aplikasi.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

160

Latihan 28 : Membuat Form Pengembalian

Form Pengembalian digunakan untuk melakukan transaksi pengembalian. Seperti Form Peminjaman, form ini juga menggunakan konsep master detail gabungan dari table Kembali dan DPinjam. Pada form ini metode input transaksi dibuat semudah mungkin. Pada bagian kanan terdapat daftar koleksi yang belum dikembalikan oleh member bersangkutan. Langkah-langkah : 1. Pastikan project Rental.dpr telah dibuka. 2. Buat form baru, klik menu File – New – Form. 3. Ubah property form yang baru dibuat seperti pada table di bawah ini : Komponen Form1

Property Caption BorderStyle Name Position WindowState

Value Pengembalian bsSingle FKembali poDesktopCenter wsMaximized

4. Klik menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UFKembali.pas dalam folder Rental. 5. Klik menu File – Use Unit, pilih UFUtama, klik OK untuk melanjutkan. 6. Copy dan Paste ToolBar1 dari form FPinjam ke dalam FKembali. 7. Tambahkan 3 buah GroupBox1 dari tab Standard ke dalam FKembali, atur property seperti table di bawah ini : Komponen GroupBox1

Tab Standard

Parent FKembali

GroupBox2

Standard

FKembali

GroupBox3

Standard

FKembali

Property Align Caption Align Caption Align Caption

Value alTop alLeft Koleksi Yang Dikembalikan alBottom

8. Tambahkan 1 buah Splitter dari tab Additional ke dalam FKembali. 9. Tambahkan 1 buah GroupBox dari tab Standard ke dalam FKembali, atur property seperti table di bawah ini : Komponen GroupBox4

Tab Standard

Parent FPinjam

Property Align Caption

Value alClient Koleksi Belum Kembali

10. Tambahkan 3 buah ADOTable dan 4 buah ADOQuery atur property seperti table di bawah ini : Komponen

Tab

Parent

Property

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value

161

Komponen ADOTable1, ADOTable2, ADOTable3, ADOQuery1, ADOQuery2, ADOQuery3, ADOQuery4 ADOTable1

Tab

Parent

Property Connection

Value FUtama.ADOConnection1

ADO

FKembali

ADOTable2

ADO

FKembali

ADOTable3

ADO

FKembali

ADOQuery1

ADO

FKembali

Name TableName Name TableName Name CursorLocation TableName Name SQL

ADOQuery2

ADO

FKembali

Name SQL

ADOQuery3

ADO

FKembali

Name SQL

ADOQuery4

ADO

FKembali

Name SQL

Kembali Kembali DKembali DPinjam DPinjam clUseServer DPinjam qMember Select Member.MemberID, Member.Nama, Member.Alamat, Member.Kota, Member.Handphone From Member Order by Member.Nama qKaryawan Select Karyawan.KaryawanID, Karyawan.Nama From Karyawan Order by Karyawan.Nama qKoleksi Select Koleksi.KoleksiID, Koleksi.Judul From Koleksi Order by Koleksi.Judul qBKembali Select Pinjam.PinjamID, Pinjam.TglPinjam, Pinjam.MemberID, DPinjam.DPinjamID, DPinjam.KoleksiID, Koleksi.Judul, Koleksi.HargaDenda, DPinjam.TglHarusKembali From Pinjam, DPinjam, Koleksi Where (Pinjam.PinjamID = DPinjam.PinjamID) and (DPinjam.KoleksiID = Koleksi.KoleksiID) and (DPinjam.KembaliID = 0) and (Pinjam.MemberID = :MemberID)

11. Pilih qBKembali pada Object TreeView, klik tombol ellipsis pada property Parameters untuk membuka jendela Edit Parameters, ubah property seperti table di bawah ini :

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

162

Komponen TParameters[0]

Property DataType

Value ftInteger

12. Buat persistent field table Kembali, klik dua kali Kembali pada Object TreeView untuk membuka field editor, klik kanan dan pilih Add All Fields. 13. Dengan cara yang sama dengan point 12, buat persistent field table DKembali, DPinjam, qMember, qKaryawan, qKoleksi dan qBKembali. 14. Klik dua kali Kembali pada Object TreeView untuk membuka field editor, pilih field TotalDenda, ubah property seperti table di bawah ini : Komponen KembaliTotalDenda

Property Currency

Value True

15. Klik dua kali DKembali pada Object TreeView untuk membuka field editor, pilih field HargaDenda, ubah property seperti table di bawah ini : Komponen DKembaliHargaDenda

Property Currency

Value True

16. Tambahkan 3 buah DataSource dari tab Data Acces, ubah property seperti table di bawah ini : Komponen Datasource1 DataSource2 DataSource3

Tab Data Access Data Access Data Access

Parent FKembali FKembali FKembali

Property Dataset Dataset Dataset

Value Kembali DKembali qBKembali

17. Buat hubungan master detail antara table Kembali dan DKembali, pilih table DKembali pada Object TreeView, ubah property seperti table di bawah ini : Komponen DKembali

Property MasterSource

Value Datasource1

18. Pilih table DKembali pada Object TreeView, klik tombol elipsisi pada property MasterField untuk membuka Field Link Designer. Pilih KembaliID pada Detail Fields dan KembaliID pada Master Fields. Klik Add untuk menambahkan ke dalam Joined Fields. Klik OK untuk melanjutkan.

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

163

19. Tambahkan field baru NamaMember pada table Kembali, klik dua kali Kembali pada Object TreeView untuk membuka Field Editor, klik kanan dan pilih New Fields, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field NamaMember

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value NamaMember String 30 Lookup MemberID qMember MemberID Nama

20. Tambahkan field baru Alamat pada table Kembali, sama seperti point 19, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field Alamat

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value Alamat String 50 Lookup MemberID qMember MemberID Alamat

21. Tambahkan field baru Kota pada table Kembali, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field Kota

Section Field Properties

Property Name Type Size

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value Kota String 30

164

Field type Lookup Definition

Field type Key Fields Dataset Lookup Keys Result Field

Lookup MemberID qMember MemberID Kota

22. Tambahkan field baru Handphone pada table Kembali, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field Handphone

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value Handphone String 30 Lookup MemberID qMember MemberID Handphone

23. Tambahkan field baru NamaKaryawan pada table Kembali, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field NamaKaryawan

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value NamaKaryawan String 30 Lookup KaryawanID qKaryawan KaryawanID Nama

24. Klik dua kali DKembali pada Object TreeView untuk membuka Field Editor, tambahkan field baru JudulKoleksi pada table DKoleksi, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field JudulKoleksi

Section Field Properties

Field type Lookup Definition

Property Name Type Size Field type Key Fields Dataset Lookup Keys Result Field

Value JudulKoleksi String 100 Lookup KoleksiID qKoleksi KoleksiID Judul

25. Klik dua kali qBKembali pada Object TreeView untuk membuka field editor, tambahkan field baru Telat pada table qBKembali, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field Telat

Section Field Properties

Property Name Type

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value Telat Integer

165

Field type

Field type

Calculated

26. Tambahkan field baru Denda pada table qBKembali, lengkapi informasi pada jendela New Field seperti table di bawah ini : Field Denda

Section Field Properties Field type

Property Name Type Field type

Value Denda Currency Calculated

27. Masih pada field editor table qBKembali, pilih field Denda, ubah property seperti table di bawah ini : Komponen qBKembaliDenda

Property Currency

Value True

28. Klik dua kali Kembali pada Object TreeView untuk membuka field editor. Pilih field KembaliID, TglKembali, MemberID, NamaMember, Alamat, Kota dan Handphone, lakukan drag and drop ke dalam GroupBox1. 29. Tambahkan DBGrid1 dari tab Data Control ke dalam GroupBox2, atur property seperti table di bawah ini : Komponen DBGrid1

Tab Data Control

Parent GroupBox2

Property Align Datasource Options.dgRowSelect Options.dgAlwaysShowSelection Options.dgEditing

Value alClient DataSource2 False False True

30. Klik dua kali DBGrid1 pada Object TreeView untuk membuka Column Editor, tambahkan 4 buah dengan mengklik kanan pada Column Editor, pilih Add. Ubah property masing-masing kolom seperti table di bawah ini : Komponen DBGrid1.Columns[0] DBGrid1.Columns[1] DBGrid1.Columns[2] DBGrid1.Columns[3] DBGrid1.Columns[0], DBGrid1.Columns[1], DBGrid1.Columns[2], DBGrid1.Columns[3]

Property FieldName Title.Caption FieldName Title.Caption FieldName Title.Caption FieldName Title.Caption Title.Alignment Title.Font.Style.fsBold

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value KoleksiID ID JudulKoleksi Judul Koleksi TglHarusKembali Tgl Harus Kembali Denda Denda taCenter True

166

31. Klik dua kali table Kembali pada Object TreeView untuk membuka field editor, pilih field Nama Karyawan dan TotalDenda, lakukan drag and drop ke dalam GroupBox3. 32. Tambahkan DBNavigator1 dari tab Data Control ke dalam GroupBox3, atur property seperti table di bawah ini : Komponen DBNavigator1

Tab Data Control

Parent GroupBox3

Property Align Datasource Flat VisibleButtons.nbInsert VisibleButtons.nbDelete VisibleButtons.nbEdit VisibleButtons.nbPost VisibleButtons.nbCancel VisibleButtons.nbRefresh

Value alBottom Datasource1 True False False False False False False

33. Tambahkan DBGrid2 dari tab Data Control ke dalam GroupBox4, atur property seperti table di bawah ini : Komponen DBGrid2

Tab Data Control

Parent GroupBox4

Property Align Datasource Options.dgRowSelect Options.dgAlwaysShowSelection

Value alClient DataSource3 True True

34. Klik dua kali DBGrid2 pada Object TreeView untuk membuka Column Editor, tambahkan 6 buah kolom, ubah property masing-masing kolom seperti table di bawah ini : Komponen DBGrid2.Columns[0] DBGrid2.Columns[1] DBGrid2.Columns[2] DBGrid2.Columns[3] DBGrid2.Columns[4] DBGrid2.Columns[5] DBGrid2.Columns[0], DBGrid2.Columns[1], DBGrid2.Columns[2], DBGrid2.Columns[3], DBGrid2.Columns[4], DBGrid2.Columns[5]

Property FieldName Title.Caption FieldName Title.Caption FieldName Title.Caption FieldName Title.Caption FieldName Title.Caption FieldName Title.Caption Title.Alignment Title.Font.Style.fsBold

Value TglPinjam Tgl Pinjam KoleksiID ID Judul Judul Koleksi TglHarusKembali Tgl Harus Kembali Telat Telat Denda Denda taCenter True

35. Atur property untuk komponen Data Control seperti table di bawah ini : Komponen

Property

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

Value

167

DBEdit1, DBLookUpCombobox2, DBLookupCombobox3, DBLookupCombobox4, DBLookUpCombobox5, DBEdit4

Enabled

False

36. Atur layout form FKembali seperti gambar di bawah ini :

37. Tambahkan unit DateUtils pada blok Uses di unit UFKembali, lihat Latihan 27 point 38. 38. Tambahkan variable KembaliID dengan type Integer pada blok Public di unit UFKembali, lihat Latihan 27 point 39. 39. Buat procedure UpdateqBKembali dan Procedure UpdateTotalDenda pada blok Private di unit UFKembali, tekan Ctrl+Shift+C untuk membuat blok procedure tersebut (lihat Latihan 27 point 40), ketikkan perintah seperti table di bawah ini : Komponen FKembali

Event UpdateqBKembali

UpdateTotalDenda

Code procedure TFKembali.UpdateqBKembali; begin qBKembali.Close; If DBEdit3.Text = '' then qBKembali.Parameters[0].Value := 0 else qBKembali.Parameters[0].Value := strtoint(DBEdit3.Text); qBKembali.Open; end; procedure TFKembali.UpdateTotalDenda; var TempTotal: Real; PrevRecord: TBookmark; begin

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

168

Komponen

Event

Code PrevRecord := DKembali.GetBookmark; try DKembali.DisableControls; DKembali.First; TempTotal := 0; while not DKembali.EOF do begin TempTotal := TempTotal + DKembaliHargaDenda.Value; DKembali.Next; end; If not (Kembali.State in dsEditModes) then Kembali.Edit; KembaliTotalDenda.Value := TempTotal; finally DKembali.EnableControls; if PrevRecord nil then begin DKembali.GoToBookmark(PrevRecord); DKembali.FreeBookmark(PrevRecord); end; end; end;

40. Pilih FKembali pada Object TreeView, buat event onCreate, onShow dan onClose, ketikkan perintah seperti table di bawah ini : Komponen FKembali

Event onCreate

onShow

onClose

Code procedure TFKembali.FormCreate(Sender: TObject); begin KembaliID := 0; end; procedure TFKembali.FormShow(Sender: TObject); begin Kembali.Open; DKembali.Open; DPinjam.Open; qMember.Open; qKaryawan.Open; qKoleksi.Open; UpdateqBKembali; If KembaliID > 0 then Kembali.Locate('KembaliID', KembaliID, []) else Kembali.Insert; end; procedure TFKembali.FormClose(Sender: TObject; var Action: TCloseAction); begin Kembali.Close; DPinjam.Close; DKembali.Close; qMember.Close; qKaryawan.Close; qKoleksi.Close; qBKembali.Close; end;

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

169

41. Pilih SpeedButton1, SpeedButton2, SpeedButton3 dan SpeedButton4 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini : Komponen SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4

Event onClick

Code procedure TFKembali.SpeedButton1Click(Sender: TObject); begin Case (Sender as TSpeedButton).Tag of 1 : Kembali.Post; 2 : Kembali.Delete; 3:; 4 : Kembali.Cancel; End; If (Sender as TSpeedButton).Tag in [2,4] then Close; end;

42. Pilih DBEdit3 pada Object TreeView, buat event onChange, ketikkan perintah seperti table di bawah ini : Komponen DBEdit3

Event onChange

Code procedure TFkembali.DBEdit3Change(Sender: TObject); begin UpdateqBKembali; end;

43. Pilih table Kembali pada Object TreeView, buat event AfterScroll, BeforeDelete dan onNewRecord, ketikkan perintah seperti table di bawah ini : Komponen Kembali

Event AfterScroll

BeforeDelete

onNewRecord

Code procedure TFKembali.KembaliAfterScroll(DataSet: TDataSet); begin UpdateqBKembali; end; procedure TFKembali.KembaliBeforeDelete(DataSet: TDataSet); begin If MessageDlg('Hapus data?',mtConfirmation, [mbYes, mbNo], 0) = mrNo then Abort; end; procedure TFKembali.KembaliNewRecord(DataSet: TDataSet); begin If DBEdit3.Enabled then ActiveControl := DBEdit3; KembaliTglKembali.Value := Today; KembaliTotalDenda.Value := 0; KembaliKaryawanID.Value := FUtama.KaryawanID; end;

44. Pilih qBKembali pada Object TreeView, buat event onCalcFields, ketikkan perintah seperti table di bawah ini : Komponen qBKembali

Event onCalcFields

Code procedure TFKembali.qBKembaliCalcFields(DataSet: TDataSet); var

Pemrograman Visual 1 – Ronny Faslah - 2010 06/09/2011 21:51:34

170

Komponen

Event

Code Telat : Integer; begin Telat := Trunc(Today - qBKembaliTglHarusKembali.Value); If Telat = :TglAwal) and (Pinjam.TglPinjam = :TglAwal) and (Kembali.TglKembali