Praktikum II Pemrograman Visual Bekerja dengan FORM dan EVENTS A. Pengantar tentang FORM Form adalah inti dari program visual dimana merupakan daerah kerja utama dimana kita akan mendesign program-program aplikasi. Form dapat dianggap sebagi sebuah window. Defaultnya, Delphi memberikan sebuah form pada saat setiap project dan menampilkan sebuah form kosong pada saat memulai Delphi. Gambar 1. Delphi memberikan sebuah form kosong saat Memulai aplikasi Form digunakan untuk meletakkan komponen, kontrol dan lain-lain. Informasi mengenai form disimpan dalam dua file, yaitu file.dfm dan.pas. File.dfm berisi informasi mengenai tampilan form, ukuran, lokasi dan seterusnya. Sedangkan.pas berisi kode program yang digunakan untuk mengontrol form. Form merupakan object pada program visual, implementasinya dalam sebuah aplikasi misalnya anda membuat form, maka form tersebut memiliki property, method, dan event. Sebagaimana pemrograman visual lain, object bersifat event driven progamming.
Gambar 2. form sebagai object Kunci pokok pemrograman event-driven adalah bagaimana menentukan event harus ditangani lebih lanjut. Saat bekerja dengan Sistem Operasi Windows banyak sekali event yang muncul, namun hanya event tertentu yang harus diproses, yaitu yang berhubungan dengan aplikasi yang akan dibangun. Semua lingkungan event-driven, termasuk Delphi, dapat menangani semua event penekanan tombol pada keyboard, tinggal bagaimana menentukan proses yang akan dikerjakan oleh form bila sebuah tombol pada keyboard ditekan. Kejadian-kejadian yang serupa dalam pemrograman event-driven dapat dijumpai dalam kehidupan sehari-hari. Contohnya : 1. Televisi menyala setelah tombol power ditekan 2. Seorang teman menelpon. Sebagai tanggapan dari sinyal yang masuk, maka telepon anda berdering. B. Properti pada FORM Sebuah object dapat diakses melalui propertinya. Properti object pada Delphi mempunyai nilai yang dapat diubah pada saat disain tanpa perlu menuliskan program. Jika anda ingin merubah properti sebuah object saat aplikasi dijalankan, anda harus menggunakan program untuk merubah nilai properti tersebut. Properti sebuah object pada Delphi dapat diakses melalui jendela object inspector dengan menekan tombol F11 atau melalui menu View Object Inspector Properties. Properti-properti pada object form yang sering digunakan adalah sebagai berikut :
1. Caption : digunakan untuk mengubah judul form. 2. Color : digunakan untuk mengubah warna latar belakang form. 3. Position : digunakan untuk mengatur peletakan form pada saat form tersebut ditampilkan ketika aplikasi dijalankan. 4. BorderIcons : digunakan untuk menentukan icon yang akan ditampilkan saat form dijalankan (terletak di sisi kanan atas : minimize dan maximize). 5. ClientHeight dan ClientWidth : digunakan untuk menentukan ukuran daerah form bila keduanya lebih lebar dari dimensi layar yang sebenarnya. Biasanya form ini digunakan untuk melihat hasil laporan di layar sebelum dicetak. 6. Height dan Width : digunakan untuk menentukan ukuran form sebenarnya. 7. Cursor : digunakan untuk menentukan bentuk kursor mouse saat kursor mouse berada di atas form tersebut. 8. Font : digunakan untuk menentukan tipe huruf yang digunakan oleh semua VCL yang ditambahkan ke dalam form tersebut. 9. Menu : digunakan untuk menentukan komponen VCL mainmenu pada form tersebut. 10. Name : digunakan untuk menentukan nama dari sebuah form. 11. PopUp Menu : digunakan untuk menentukan komponen VCL PopUpMenu pada form tersebut (diakses melalui tombol kanan mouse) 12. KeyPreview : digunakan untuk menentukan event tertentu saat tombol keyboard ditekan. 13. Visible : digunakan untuk menentukan apakah form ditampikan atau disembunyikan. Biasa digunakan ketika membuat aplikasi dengan menggunakan lebih dari satu form. C. Events dan Methods pada FORM Events adalah kejadian yang dapat dialami oleh object. Reaksi setiap komponen terhadap event yang muncul harus didefinisikan dalam prosedur tertentu. Contoh bila tombol F11 ditekan saat form sedang terfokus akan didefinisikan memanggil form lain atau merubah warna latar form.
Penanganan Events dapat diatur melalui jendela object inspector events. Kemudian pilih sebuah event. Untuk mengisikan reaksi tertentu pada event, dapat dilakukan dengan cara, yaitu : 1. Klik ganda pada kolom nilai event tertentu, maka Delphi akan membuat kerangka procedure bagi penanganan events tersebut. Gambar 3. mengatur penanganan events procedure TForm1.FormKeyDown(Sender: TObject; var Key: Word; Shift: TShiftState); begin {tuliskan kode program untuk mengatur penanganan events onkeydown anda disini} end; Listing 1. Kerangka procedure penangan events Events pada object form yang sering digunakan adalah sebagai berikut : 1. OnCreate : menangani kejadian pada form utama saat aplikasi dijalankan. 2. OnShow : menangani kejadian pada form saat ditampilkan. 3. OnCloseQuery : menangani kejadian saat icon close pada form ditekan. 4. OnKeyDown : menangani kejadian pada saat tombol tertentu pada keyboard ditekan. 5. OnClick : menangani kejadian pada saat tombol kiri mouse ditekan di atas form. D. Langkah-Langkah Praktikum Pada praktikum kali ini, akan dibuat sebuah aplikasi sederhana yang berguna untuk menyimpan data dan menampilkan data yang telah disimpan. 1. Membuat form isian data. a) Buat form baru, file New form. b) Komponen-komponen yang digunakan pada form ini adalah : Komponen Properti Isi Form 1 Caption Isian Data Name frmisiandata Position podesktopcenter KeyPreview True Label1 Caption Nomor Mahasiswa
Label2 Caption Nama Lengkap Label3 Caption Alamat Label4 Caption Program Studi Edit Name ednim Text {kosong} Edit Name ednama Text {kosong} Edit Name edalamat Text {kosong} Edit Name edprodi Text {kosong} Panel Caption Profil Programmer (tekan F11) Button Name btnsimpan Caption SIMPAN MainMenu1 Items File Keluar Data Isian Data Tampilkan Data Profil Tambahkan item-item menu pada komponen MainMenu1, seperti pada gambar berikut : Sehingga tampilan desain formnya seperti gambar berikut :
2. Membuat form tampilan data a) Buat form baru, file New form. b) Komponen-komponen yang digunakan pada form ini adalah : Komponen Properti Isi Form 2 Caption Tampilan Data Name frmtampildata Position podesktopcenter KeyPreview True Label1 Caption Nomor Mahasiswa Label2 Caption Nama Lengkap Label3 Caption Alamat Label4 Caption Program Studi Label Name lblnim Caption Nomor Mahasiswa Label Name lblnama Caption Nama Lengkap Label Name lblalamat Caption Alamat Label Name lblprodi Caption Program Studi Button Name btntampil Caption Tampilkan Data Sehingga tampilan desain formnya seperti gambar berikut : 3. Membuat form bantuan a) Buat form baru, file New form. b) Komponen-komponen yang digunakan pada form ini adalah : Komponen Properti Isi Form 3 Caption About Name frmabout
Position podesktopcenter Memo1 Aligment tacenter Praktikum Pemrograman Visual 2 Lines Membuat aplikasi penyimpanan data sederhana Teknik Informatika UMP Sehingga tampilan desain formnya seperti gambar berikut : 4. Membuat form login a) Buat form baru, file New form. b) Komponen-komponen yang digunakan pada form ini adalah : Komponen Properti Isi Form 4 Caption Login Name frmlogin Position podesktopcenter Label1 Caption User name Label2 Caption Password Edit Name eduser Edit Name edpassword PasswordChar * Button Name btncancel Caption Cancel Button Name btnlogin Caption Login Sehingga tampilan desain formnya seperti gambar berikut : 5. Hubungkan form2 pada form1, melalui menu File Use Unit, pilih unit2 kemudian tekan OK
6. Hubungkan form3 pada form1. 7. Hubungkan form4 pada form1. 8. Buat unit baru untuk menyimpan variabel global (variabel yang dapat diakses semua form, File New Unit. Simpan dengan nama unit5.pas 9. Lengkapi kode program pada unit5, seperti pada gambat berikut : unit Unit5; interface var NIM : String; Nama : String; Alamat : String; Prodi : String; implementation end. 10. Hubungkan form1 dan form2 ke unit5. 11. Atur MainForm (form yang ditampilkan saat aplikasi dijalankan), melalui menu project Options Forms. Pilih frmlogin. 12. Tambahkan kode event OnKeyPress pada komponen TfrmLogin.edUser. Kode program ini digunakan, ketika menekan tombol Enter (kode ASCII Enter = #13) maka cursor akan berpindah ke edpassword. if key=#13 then begin
edpassword.setfocus; end; 13. Tambahkan event OnKeyPress pada komponen TfrmLogin.edPassword. if key=#13 then begin btnlogin.setfocus; end; 14. Tambahkan event OnClick pada komponen TfrmLogin.btnLogin. 15. Tambahkan event OnClick pada komponen TfrmLogin.btnCancel. NB : Dilanjutkan Pada Praktikum Selanjutnya (langkah 1 s/d 15 harus sudah diselesaikan