Modul Pemrograman Visual 1 2011

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

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

DAFTAR ISIDAFTAR 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


3

ATURAN PENGERJAAN LATIHAN1. 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.

PENILAIANKeterangan Selesai Pertamakali Selesai Kedua dst. Hadir tapi tidak selesai Izin/Sakit/Alpa 70 0 Min Max 100 85 75 65 Status Lulus Tidak Lulus Nilai 66 - 100 0 - 65

DAFTAR SHORTCUTShortcut 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 DELPHIIntegrated 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


5

4. Form Editor

5. Code Editor

6. Object TreeView


6

7. Object Inspector


7

PROPERTY DAN EVENTProperty1. Dalam modul ini perubahan property komponen dituliskan dalam bentuk table seperti ini :

Komponen Label1 GroupBox1 Label2 Edit1 Label1, Label2

Tab Standard Standard Standard Standard

Parent Form1 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.


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.


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 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.


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.


12

Hue Sat Lum

Events1. 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!


14

VARIABEL, PROCEDURE DAN FUNCTIONDeklarasi Variabel1. 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.


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 Function1. 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.


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.


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 Property Caption Font.Color Font.Style Caption Font.Color Font.Style Text Text Caption Value Nama clRed [fsBold, fsItalic] Alamat clBlue [fsBold, fsItalic]

Label2

Standard

FLatihan1

Edit1 Edit2 Button1

Standard Standard Standard

FLatihan1 FLatihan1 FLatihan1

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.


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 Tab Parent Property Caption Name Position Caption Caption Caption Text Value Latihan 2 FLatihan2 poDesktopCenter Bilangan 1 Bilangan 2 Hasil 0

Label1 Label2 Label3 Edit1

Standard Standard Standard Standard

Form1 Form1 Form1 Form1


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 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;

Edit1 Edit2

OnKeyPress

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;


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).


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.


23

Latihan 4 : Tugas 1


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 Property Caption Name Position BorderStyle Caption Alignment Font.Name Font.Size Caption Caption Value Latihan 5 FLatihan3 poDesktopCenter bsSingle Daftar Riwayat Hidup taCenter Trebuchet MS 18 Nama Tempat, Tanggal Lahir

Label1

Standard

Form1

Label2 Label3

Standard Standard

Form1 Form1


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

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

Komponen FLatihan3

Event OnCreate

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');


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 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;

Button2

OnClick

Button3

OnClick


27

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


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 :


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 Property Caption Name Position Color Caption Font.Style Caption Caption Caption Caption Caption Caption Caption Caption Caption Caption Items 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

Label1 Label2 Label3 Label4 Label5 Label6 Label7 Label8 Label9 Label10 Label11 Combobox1

Standard Standard Standard Standard Standard Standard Standard Standard Standard Standard Standard Standard

ListBox1

Style Items

RadioButton1 RadioButton2 CheckBox1 SpinEdit1 Button1 Button2 Button3

Standard Standard Standard Samples Standard Standard Standard

Caption Caption Caption MaxValue Caption Caption Caption

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;


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

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 = 123 * 360 = 13.500,= 44.280,= 57.780,= 1.733,= 59.513,=0 = 59.513,-

Total Biaya Listrik Pajak Penerangan Jalan Umum (3%) Materai Total Tagihan

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.


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.


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 :


42

File Exit

Shape Rectangle Round Rectangle Ellipse Polygon Property Caption Name Position Items Value Latihan 12 FLatihan12 poDesktopCenter (Menu)

Komponen Form1

Tab

MainMenu1 Statusbar1

Standard Win32

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

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

System System System

Form2 PageControl1 PageControl1 PageControl1 PageControl1 TabSheet1 TabSheet2 TabSheet3

Style Align Caption Caption Caption Caption Align Align Align

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


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);


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 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);

PaintBox2

OnPaint

PaintBox3

OnPaint


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 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);

SpinEdit1 Combobox1 ColorBox2 Combobox2

onChange onChange onChange onChange


46

9. Kembali ke FLatihan12, buat event onClick pada masing-masing MenuItem, ketikkan statement berikut ini :Komponen Exit1 Event 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;

Rectangle1

onClick

RoundRectangle1

onClick

Ellipse1

onClick

Polygon1

onClick

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


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 Label2 Label3 Edit1, Edit2 Tab Standard Standard Standard Standard Parent Form1 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 Tab Standard Parent Form1 Property Items Value Administrasi Keuangan Kepegawaian Pemasaran Bagian 2 Penghasilan

GroupBox1

Standard

Form1

Caption Columns Caption

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 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 BitBtn2 BitBtn3 BitBtn4 Tab Additional Additional Additional Additional Parent Form1 Form1 Form1 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 :


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;


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 StringGrid1 Tab Additional Additional Parent Form2 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.


51

13. Buat event-event berikut pada masing-masing komponen :Komponen Form2 Event OnCreate 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;

onShow


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.


53

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


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 :


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 Enabled

Value Judul Lagu False [fsBold] Waktu Repeat Shuffle StayOnTop True 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 Picture Picture Picture Picture Picture Picture Picture Picture Picture Picture Value True crHandPoint True 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 :


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 Image2, Image3, Image4, Image5, Image6 Image2 Image3 Image4 Image5 Image6 Tab Additional Parent Form2 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 Tab Dialog Parent 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

OpenDialog2

Dialog

Form2

Filter *.pls Filter *.pls

SaveDialog1

Dialog

Form2

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


57

17. Buat event berikut pada masing-masing komponen seperti pada table di bawah ini :Komponen Form2 Event onCreate 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;

Image1

onMouseDown

Image2

onClick

Image3

onClick


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 :


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 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;

Form1

Pause

Form1

Resume


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;


61

22. Buat event berikut pada masing-masing komponen seperti pada table di bawah ini :Komponen Form1 Event OnCreate 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;

onShow

Timer1

OnTimer

Image1

onMouse Down

Image2

onClick

Image3

onClick

Image4

onClick

Image5

onClick

Image6

onClick


62

Komponen Image7

Event 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.


63


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 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.


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 (*.*)

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 Win32 Parent Form2 Property FormStyle Align ScrollBars Lines Image Value fsMDIChild alClient ssBoth ImageList1

ActionManager1

Additional

Form2

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 :


68

Komponen FileSaveAs1

Property Dialog.DefaultExt Dialog.Filter

Dialog.Title

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

Filter *.txt *.*


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


69

30. Pilih ColorSelect1 pada Object TreeView, buat event BeforeExecute dan onAccept, ketikkan perintah seperti pada table di bawah ini :Komponen ColorSelect1 Event BeforExecute 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;

onAccept

31. Pilih FontEdit1 pada Object TreeView, buat event BeforeExecute dan onAccept, ketikkan perintah seperti pada table di bawah ini :Komponen FontEdit1 Event BeforExecute 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;

onAccept

32. Pilih FileSaveAs1 pada Object TreeView, buat event BeforeExecute dan onAccept, ketikkan perintah seperti pada table di bawah ini :Komponen FileSaveAs1 Event BeforExecute 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;

onAccept

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

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


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.


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



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 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 Parent ToolBar2 Property Items Value psSolid psDash psDot psDashColor psDashDotDot psClear psInsideFrame 0 csOwnerDrawVariable pmBlack pmWhite pmNop pmNot pmCopy pmNotCopy pmMergePenNot pmMaskPenNot pmMergeNotPen pmMaskNotPen pmMerge pmNotMerge pmMask pmNotMask

Combobox2

ToolBar2

ItemIndex Style Items


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 Value bsSolid bsClear bsHorizontal bsVertical bsBDiagonal bsCross bsDiagCross csDropDownList 0

Style ItemIndex

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 Value Save Picture


76


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;


77

24. Pilih Form2 pada Object TreeView, buat event onClose, OnCloseQuery dan onShow, ketikkan perintah seperti table di bawah ini :Komponen Form2 Event OnClose 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;

OnCloseQuery

onShow

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


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 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));

OnMouseMove


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



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 Code procedure TForm3.FormClose(Sender: TObject; var Action: TCloseAction); begin Action := caFree; end; procedure TForm3.FormCreate(Sender: TObject); begin Randomize; end;

OnCreate

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),


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 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;

OpenPicture1

OnClick

Exit1

OnClick

RandomShape1

OnClick

Cascade1

OnClick


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.


83

PROYEK SISTEM INFORMASI RENTAL VCD/DVDProyek 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 FormPengguna Form FUtama FLogin FSetup FMember FKoleksi FPemasok FKaryawan FPinjam FKembali Unit UFUtama UFLogin UFSetup UFMember UFKoleksi UFPemasok UFKaryawan UFPinjam UFKembali Fungsi Form Utama Login Setup Data Pelanggan Data Koleksi Data Pemasok Data Karyawan Transaksi Peminjaman Transaksi Member Ya Tidak Tidak Ya, View Only Ya, View Only Tidak Tidak Tidak Tidak Karyawan Ya Ya Tidak Ya Ya Tidak Tidak Ya Ya Pemilik / Admin Ya Ya Ya Ya Ya Ya Ya Ya Ya


84

Pengguna Form Unit Fungsi Pengembalian Daftar Pelanggan Daftar Koleksi Laporan Transaksi Peminjaman Laporan Transaksi Pengembalian Laporan Koleksi belum Kembali Laporan Pendapatan Statistik About Member Ya Ya Tidak Tidak Tidak Tidak Ya Ya Karyawan Ya Ya Ya, Terbatas Ya, Terbatas Ya Tidak Ya Ya Pemilik / Admin Ya Ya Ya Ya Ya Ya Ya Ya

FDMember FDKoleksi FLPinjam FLKembali FLKoleksi FLPendapatan FStatistik FAbout

UFDMember UFDKoleksi UFLPinjam UFLKembali UFLKoleksi UFLPendapatan UFLStatistik UFAbout

Entity Relationship Diagram (ERD)


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).


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 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 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 FieldSize FieldSize

Value 50 100 20 10 ShortDate Long Integer Long Integer

Ket.

FieldSize FieldSize FieldSize

Long Integer 200 Long Integer

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 FieldSize Value Long Integer ShortDate Long Integer Long Integer 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 Format FieldSize Value Long Integer Long Integer Long Integer 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 Field Size Value Long Integer ShortDate Long Integer 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 :


90

17. Tutup aplikasi Microsoft Access.


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 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 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

-----------------Exit Data Member Koleksi -----------------Pemasok -----------------Karyawan 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 SpeedButton2 SpeedButton3 SpeedButton4 SpeedButton5 SpeedButton6 SpeedButton7 SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4 SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4, SpeedButton5, SpeedButton6, SpeedButton7 Tab Win32 Win32 Win32 Win32 Win32 Win32 Win32 Parent ToolBar1 ToolBar1 ToolBar1 ToolBar1 ToolBar1 ToolBar1 ToolBar1 Property Glyph Hint Glyph Hint Glyph Hint Glyph Hint Glyph Hint Glyph Hint Glyph Hint Enable Flat Height Width ShowHint 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 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.


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.


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 :


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 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);

onClose

onCloseQuery


97

Komponen

Event

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

21. Simpan, jalankan dan uji aplikasi.

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


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 Posit

Modul Pemrograman Visual 1 2011

Documents

Transcript of Modul Pemrograman Visual 1 2011