Identitas dosen POKOK BAHASAN RAGAM KOMPONEN MENGENAL TIMER. Pallete adalah tool

(1)

Identitas

Identitas dosen dosen

Suherman Suherman, ST , ST Address

Address : Cilegon : Cilegon Mobile

Mobile : 087 877 486 821 : 087 877 486 821 Email

Email : [email protected] : [email protected] Ym

Ym : leeput : leeput

Blog Blog : http://leeput.wordpress.com : http://leeput.wordpress.com

http://suherman628.wordpress.com http://suherman628.wordpress.com

POKOK BAHASAN POKOK BAHASAN

PEMANFAATAN KOMPONEN PEMANFAATAN KOMPONEN Tujuan

Tujuan Pembelajaran Pembelajaran Khusus Khusus (TPK): (TPK):

Setelah

Setelah mempelajari mempelajari pokok pokok bahasan bahasan Pemanfaatan

Pemanfaatan komponen, komponen , maka maka mahasiswa mahasiswa dapat

dapat mendemonstrasikan mendemonstrasikan tentang tentang komponen komponen timer, tool bar, status bar,

timer, tool bar, status bar, dan dan progress bar progress bar dengan

dengan benar benar (C3) (C3)

RAGAM KOMPONEN RAGAM KOMPONEN

Komponen

Komponen dalam dalam Delphi Delphi

Komponen- Komponen -komponen komponen yang yang dijadikan dijadikan sebagai

sebagai bahan bahan untuk untuk membuat membuat project

project dalam dalam delphi delphi dimuat dimuat dalam dalam sebuah

sebuah container yang container yang dinamakan dinamakan dengan

dengan Component Pallete Component Pallete

Component Component Pallete Pallete adalah adalah tool tool yang

yang berupa berupa kumpulan kumpulan Tab./page Tab./page

Tab Tab- -tab tab tersebut tersebut berisi berisi banyak banyak komponen

komponen yang memiliki yang memiliki kegunaan

kegunaan tersendiri tersendiri (tergantung ( tergantung kebutuhan

kebutuhan project) project)

Sehubungan Sehubungan dengan dengan banyaknya banyaknya komponen

komponen dalam dalam kumpulan kumpulan tab tab- - tab,

tab, maka maka dalam dalam pokok pokok bahasan bahasan ini

ini hanya hanya mencakup mencakup komponen komponen : : 1. Timer

1. Timer 2. Tool bar 2. Tool bar 3. Status Bar 3. Status Bar dan dan 4. Progress Bar 4. Progress Bar

MENGENAL TIMER MENGENAL TIMER

Timer adalah Timer adalah salah salah satu satu komponen komponen yang

yang di di dapat dapat dari dari Tab System Tab System

Komponen Komponen ini ini digunakan digunakan untuk untuk memicu

memicu terjadinya terjadinya suatu suatu event event berdasarkan

berdasarkan selang selang waktu waktu tertentu tertentu, , event

event tersebut tersebut adalah adalah On Timer On Timer

Gbr. Gbr . Komponen Komponen

(2)

Property yang sering Property yang sering digunakan digunakan dari dari komponen

komponen ini ini adalah adalah : : 1. Enabled

1. Enabled 2. Interval 2. Interval

Property Enabled menyatakan Property Enabled menyatakan aktif aktif dan dan tidaknya

tidaknya timer. Nilainya timer. Nilainya bertipe bertipe boolean boolean (true/false)

(true/false)

Bila Bila enabled true, maka enabled true, maka timer aktif timer aktif. Dan . Dan false,

false, maka maka timer tidak timer tidak aktif aktif

Property Interval menyatakan Property Interval menyatakan lamanya lamanya selang

selang waktu waktu antara antara satu satu event On event On Timer

Timer dengan dengan event On Timer event On Timer berikutnya

berikutnya. . Waktu Waktu tersebut tersebut dinyatakan dinyatakan dalam

dalam satuan satuan milidetik, milidetik , defaultnya defaultnya 1000

1000 md md = 1 = 1 detik detik. .

Buat Buat aplikasi aplikasi baru baru (form baru (form baru) )

Letakan Letakan komponen komponen label label

Letakan Letakan komponen komponen Check Box (dari Check Box ( dari Tab Standard)

Tab Standard) ubah ubah property property caption

caption menjadi menjadi ON ON

Letakan Letakan komponen komponen timer timer ubah ubah property Enabled

property Enabled menjadi menjadi False False

Klik Klik ganda ganda timer, isi timer, isi dengan dengan kode kode berikut

berikut : : procedure procedure

TForm1.Timer1Timer(Sender:

TObject TObject); );

begin begin

LABEL1.Caption:=

TIMETOSTR(TIME);

end; end;

Klik Klik ganda ganda check box, check box, isi isi dengan dengan kode kode berikut

berikut : :

procedure TForm1.CheckBox1Click(Sender:

TObject

TObject););

begin

CASE CHECKBOX1.Checked OF CASE CHECKBOX1.Checked OF

TRUE : TIMER1.ENABLED:= TRUE;

FALSE: TIMER1.ENABLED:=

FALSE;

END;

end;

end.

(3)

MENGENAL TOOL BAR MENGENAL TOOL BAR

Tool bar = Speed bar atau Tool bar = Speed bar atau Control Bar Control Bar

Kegunaannya Kegunaannya adalah adalah untuk untuk menyingkat

menyingkat pengaksesan pengaksesan terhadap terhadap tugas

tugas- -tugas tugas yang tersedia yang tersedia pada pada menu menu aplikasi

aplikasi

Komponen Komponen ini ini dapat dapat di di ambil ambil dari dari Tab Tab Win32.

Win32. Gbr Gbr Tool bar Tool bar

Untuk Untuk membuat membuat tool bar tool bar maka maka biasanya

biasanya dipadukan dipadukan dengan dengan komponen komponen Cool bar (

Cool bar (diambil diambil dari dari tab win32). tab win32).

Komponen Komponen Cool bar merupakan Cool bar merupakan wadah wadah bagi

bagi komponen komponen lain seperti lain seperti combo box combo box atau

atau bahkan bahkan tool bar tool bar

Ikuti Ikuti perintah perintah ini ini : :

Buat Buat Aplikasi Aplikasi baru baru (form baru (form baru) )

Tambahkan Tambahkan komponen komponen Cool bar Cool bar

Letakan Letakan 1 combo box pada 1 combo box pada cool bar cool bar

Atur Atur property AutoSize property AutoSize milik milik Cool bar Cool bar menjadi

menjadi True True perhatikan perhatikan pada pada ukuran

ukuran cool bar cool bar

Tambahkan Tambahkan komponen komponen tool bar dan tool bar dan letakkan

letakkan di di dalam dalam cool bar cool bar

Klik Klik kanan kanan pada pada tool bar tool bar pilih pilih new new button (

button (ulangi ulangi sampai sampai 3 x) 3 x)

Coba Coba Running Running perhatikan perhatikan dari dari komponen

komponen yang yang telah telah dibuat dibuat

Kembali Kembali lagi lagi ke ke modus desain modus desain… …

Aktifkan Aktifkan tool bar tool bar pilih pilih property Flat property Flat ubah ubah menjadi menjadi true true

Coba Coba Running (perhatikan Running ( perhatikan pada pada tool tool bar) bar)

Kembali Kembali ke ke modus modus desain desain… …

Menambahkan

Menambahkan gambar gambar pada pada Tool Bar Tool Bar

Tambahkan Tambahkan komponen komponen image list image list (

(dari dari tab win32) tab win32) tempatkan tempatkan dimana dimana saja saja

Klik Klik ganda ganda image list image list klik klik Tombol Tombol Add (

Add (untuk untuk menambah menambah gambar) gambar ) pilih

pilih gambar gambar yang berekstensi yang berekstensi (.bmp (.bmp atau

atau .ico . ico) )

Pilih Pilih sampai sampai dengan dengan 3 gambar 3 gambar

(4)

Bila Bila sudah sudah memilih memilih 3 3 gambar gambar, , klik klik OK OK

Aktifkan Aktifkan tool bar tool bar pilih pilih property property Images

Images isi isi dengan dengan ImageList1 ImageList1 perhatikan

perhatikan pada pada tool bar tool bar

Coba Coba Running (perhatikan Running ( perhatikan perubahan perubahan yang

yang terjadi terjadi) )

Kembali Kembali ke ke modus modus desain desain… …

Tool bar

Tool bar dapat dapat dipindah dipindah tempat

tempat

Tool bar dapat Tool bar dapat dipindah dipindah ke ke luar luar dari dari cool bar,

cool bar, yaitu yaitu dengan dengan mengganti mengganti property :

property :

1. DragKind 1. DragKind dkDock dkDock 2.

2. DragMode DragMode dmAutomatic dmAutomatic

Coba Coba Running (perhatikan Running ( perhatikan perubahannya

perubahannya) )

Kembali Kembali ke ke modus desain modus desain… …

Aktifkan Aktifkan cool bar cool bar pilih pilih property property DockSite

DockSite True True

Coba Coba Running (perhatikan Running ( perhatikan perubahannya

perubahannya) )

Kembali Kembali lagi lagi ke ke modus desain modus desain… …

Menampilkan Menampilkan dan dan menyembunyikan

menyembunyikan bidang bidang

Letakan Letakan komponen komponen Popup Menu Popup Menu dari dari tab Standard tab Standard

Klik Klik 2x Popup Menu, 2x Popup Menu, buat buat menu menu seperti

seperti nampak nampak pada pada gambar gambar

(5)

Aktifkan Aktifkan form1 form1 pilih pilih property property Popup Menu

Popup Menu isi isi dengan dengan PopupMenu1 PopupMenu1

Coba Coba Running (perhatikan Running ( perhatikan perubahan perubahan yang

yang terjadi terjadi) )

Kembali Kembali lagi lagi ke ke modus desain modus desain… …

STATUS BAR STATUS BAR

Komponen Komponen ini ini digunakan digunakan untuk untuk menampilkan

menampilkan status dari status dari sebuah sebuah kejadian

kejadian, , misal misal : : untuk untuk menampilkan menampilkan jam,

jam, tanggal tanggal, , atau atau keterangan keterangan apa apa saja

saja yang yang dibutuhkan dibutuhkan

Komponen Komponen ini ini berjenis berjenis teks teks

Status bar diperoleh Status bar diperoleh dari dari Tab Win32 Tab Win32

Melanjutkan Melanjutkan dari dari project Tool bar… project Tool bar …

Letakan Letakan komponen komponen status bar status bar

Klik Klik ganda ganda status bar status bar akan akan muncul muncul kotak

kotak Editing Statusbar1.panels Editing Statusbar1.panels

Klik Klik 2x 2x Tombol Tombol Add New (ins) Add New (ins)

Tutup Tutup Editing st Editing st… …. .

Perhatikan Perhatikan pada pada status bar status bar

Tambahkan Tambahkan komponen komponen Timer Timer

Klik Klik ganda ganda timer, tulis timer, tulis kode kode berikut berikut : :

statusbar1.Panels[0].Text:=

'Jam : '+

'Jam : '+timetostr timetostr (time); (time);

Aktifkan Aktifkan form dan form dan pilih pilih Event Event OnCreate OnCreate

Tulis Tulis kode kode berikut berikut : :

statusbar1.Panels[1].Text:=

'Tanggal ' Tanggal : '+formatdatetime : '+ formatdatetime( ( 'dd ' dd mmmm mmmm yyyy',date yyyy',date); );

Coba Coba Running dan Running dan perhatikan… perhatikan …

PROGRESS BAR PROGRESS BAR

Komponen Komponen ini ini biasanya biasanya digunakan digunakan pada pada waktu waktu menunggu menunggu suatu suatu proses proses yang

yang sedang sedang berjalan berjalan yang ditandai yang ditandai dengan

dengan berjalannya berjalannya progress progress berwarna

berwarna hijau hijau

Komponen Komponen ini ini didapat didapat dari dari Tab Win32 Tab Win32

(6)

Progress ini Progress ini dapat dapat dijalankan dijalankan dengan dengan menggunakan

menggunakan Event OnTimer Event OnTimer milik milik komponen

komponen timer timer

Praktek Praktek masih masih melanjutkan melanjutkan dari dari desain desain komponen

komponen… …

Letakan Letakan komponen komponen group box group box tempatkan tempatkan di di atas atas status bar (atur status bar ( atur besar besar dan dan lebarnya lebarnya) ) ubah ubah Caption Caption menjadi menjadi Progress Bar Progress Bar

Letakan Letakan di di dalam dalam group box komponen group box komponen progress bar (

progress bar (atur atur panjangnya panjangnya) )

Letakan Letakan komponen komponen label label di di bawah bawah progress progress bar bar

Letakan Letakan komponen komponen button button di di bawah bawah progress bar

progress bar ubah ubah caption caption menjadi menjadi PROSES

PROSES

Setelah Setelah itu itu, , maka maka di di dapat dapat desain desain berikut

berikut : :

Letakan Letakan komponen komponen timer di timer di samping samping kanan

kanan timer 1 timer 1 ubah ubah property property Enabled

Enabled menjadi menjadi False False

Klik Klik ganda ganda timer 2, isikan timer 2, isikan dengan dengan kode kode berikut

berikut : :

Klik Klik ganda ganda Button PROSES Button PROSES

Isi Isi dengan dengan kode kode berikut berikut : :

(7)

Property yang harus Property yang harus diperhatikan diperhatikan pada pada komponen

komponen Progress Bar Progress Bar adalah adalah : : 1. Min

1. Min 2. Max 2. Max 3. Position 3. Position 4. Step 4. Step

TUGAS KELOMPOK TUGAS KELOMPOK

Buat Buat program program desain desain komponen komponen yang yang disertai

disertai dengan dengan tutorialnya, tutorialnya , batasan batasan komponen

komponen : :

1. Selain 1. Selain dari dari yang yang telah telah di di bahas bahas 2. Komponen 2. Komponen yang dibuat yang dibuat minimal 3 minimal 3

TERIMA KASIH TERIMA KASIH Wassalam

Wassalam ……….. ……… ..