Anda di halaman 1dari 39

Delphi adalah pemrograman yang memiliki lingkungan pengembangan yang terpadu atau IDE (Integrated Development Environment), yang

memungkinkan pemrograman secara visual merancang tampilan untuk para user (antarmuka pemakai) dan menuliskan listing program atau kode.

Langkah-langkah mengaktifkan Delphi Anda diasumsikan sudah menginstall Delphi pada Windows Anda. Delphi yang kita gunakan pada tutorial ini adalah Delphi XE5. Untuk mengaktifkan IDE Delphi, klik menu start | ketik Delphi XE5 pada bagian search programs and files, program pilihan akan dimunculkan| klik program Delphi XE5, tunggu hingga program aktif dan menampilkan jendela utama Delphi.

Tampilan Delphi XE5

Membuat project baru Aplikasi atau program yang kita buat dalam Delphi menggunakan istilah project. Untuk membuat project baru, langkahnya: Klik menu File Pilih New Pilih VCL Form Application Delphi, layar Form Design akan ditampilkan

Tampilan layar Form Design

Pemrograman Visual

Page 1

Bagian-bagian jendela utama Delphi XE5 1. Structure Merupakan sebuah diagram pohon yang menggambarkan hubungan logis menghubungkan semua komponen yang terdapat dalam suatu proyek program. Komponen tersebut meliputi form, modul atau frame. Fungsinya digunakan untuk menampilkan seluruh daftar komponen program dalm sebuah aplikasi program sesuai dengan penempatnnya. 2. Object Inspector Merupakan jendela yang digunakan untuk
Gambar Jendela Structure

mengatur tampilan komponen pada form, misal bagaimana command mengubah button tulisan button Simpan, pada atau

menjadi

menghapus tulisan pada label dan mengganti nama menjadi Nama Mahasiswa pada atau sebuah

memberikan
Gambar Jendela Object Inspector

perintah

tertentu

komponen sehingga ada interaksi ketika program dijalankan.

Secara Umum Object Inspector terbagi menadi 2, yaitu : a. Properties Digunakan untuk mengatur tampilan pada sebuah komponen baik itu meliputi penggantian nama, warna, jenis huruf, border dan lainlain. b. Events Merupakan jendela properties yang digunakan untuk

memberikan fungsi yang lebih detail dari fungsi sebenarnya. Misalnya ketika tombol Simpan di klik maka program akan menjalankan perintah penyimpanan data. Dari kalimat tersebut ada event clik untuk mengeksekusi sebuah tombol
Gambar Jendela Properties dan Evebts

simpan. Perintah event clik tersebut dapat diberikan melalui jendela events.

Pemrograman Visual

Page 2

3. Form Designer Merupakan tempat yang digunakan untuk

merancang semua aplikasi program yang diambil dari komponen pallete.

Gambar Jendela Form

4. Component Pallete Merupakan kumpulan icon yang digunakan untuk merancang suatu aplikasi pada untuk membentuk sebuah aplikasi user interface. Dalam komponen pallete semua icon dikelompokan dalam berbagai komponen sesuai dengan fungsi dan kegunaannya.

Gambar Jendela Component Pallete

No 1. 2.

Icon

Nama TChart TDBChart

Fungsi Membuat Grafik Untuk menampilkan data dalam sebuah Grafik menggunakan Data Base

3.

TSeriesDataSet

Tempat Menyimpan Data yang nantinya diambil ke chart

4.

TChartDataSet

Tempat menyimpan data yang datanya diambil dari chart

5. 6. 7.

TDBCrossTabSource TButtonColor TButtonPen Sebagai tombol untuk pemilihan warna menghubungkan tombol ini pada TchartPen Properti

Pemrograman Visual

Page 3

8.

TButtonGradient

Tombol untuk pengaturan gradient yang disini digunakan sebagai pengatur gradasi warna

9. 10.

TDraw3D TComboFlat Fungsinya sama dengan ComboBox pada

Component Standard 11. TImageFiltered pengendalian gambar yang menyediakan properti tambahan yang disebut "Filter" bahwa kita dapat mendesain untuk menambahkan efek ke gambar seperti blur, menyesuaikan warna, dll 12. TTeeGDIPlus

5. Code Editor Bagian dari delphi yang digunakan untuk menuliskan kode program. Pada bagian code editor terdapat 3 bagian utama yaitu = bagian paling kiri yang berisi berupa angka menunjukan baris dan kolom. Keterangan modified menunjukan bahwa telah terjadi modifikasi terhapap baris program. Dan paling kanan menunjukan status keyboard tentang tombol insert atau over write. 6. Code Explorer Jendela yang digunakan untuk menampilkan seluruh variabel, type, dan rountine yang didefinisikan pada sebuah unit.
Gambar Jendela CodeEditor

Gambar Jendela Code Explorer

Pemrograman Visual

Page 4

Langkah menyimpan project Simpan rancangan proyek program aplikasi yang masih kosong tersebut dengan perintah File Save All sehingga tampil kotak dialog Save Unit1 As seperti yang tampak pada gambar di bawah :

Pilih lokasi penyimpanan, kemudian kotak dialog berikutnya akan muncul adalah kotak dialog Save Project1 As seperti yang tampak pada gambar di bawah ini :

Setelam menyimpan file Unit dan Project ke harddisk, maka Delphi akan membentuk filefile berikut : project1.dpr, file project yang berisi program utama dr aplikasi unit1.pas, file unit yang digunakan utk menangani kejadian pada form unit1.dfm, file yang berisi daftar komponen berikut properti nya

Pemrograman Visual

Page 5

Aplikasi Grafik Penerimaan Mahasiswa Baru (Nur Fadillah K) a. Hasil Program Grafik Garis

Grafik Batang

Grafik Lingkaran

Pemrograman Visual

Page 6

b. Desain Form

c. Desain Properties Object TGroupBox TLabel TLabel TLabel TLabel TLabel TEdit TEdit TEdit TEdit TEdit TButton TButton TButton TChart TForm Name GroupBox1 Label1 Label2 Label3 Label4 Label5 Edit1 Edit2 Edit3 Edit4 Edit5 Button1 Button2 Button3 Chart1 Form1 Caption 2009 2010 2011 2012 2013 Garis Batang Lingkaran Form1

Menampilkan Tampilan Grafik Untuk menampilkan grafik pada TChart: klik 2 kali TChart sehingga muncul tampilan seperti dibawah ini.

Pemrograman Visual

Page 7

Klik tombol Add, kemudian pilih Chart yang diinginkan. Untuk menambahkan lebih dari 1 chart, klik kembali tombol Add.

Tampilan setelah menambahkan Chart

Pemrograman Visual

Page 8

d. Listing Program Untuk menginput procedure dari object-object, klik kiri 2 kali pada object tersebut.

Menampilkan judul grafik procedure TForm1.FormCreate(Sender: TObject); begin Chart1.Title.Text.Add('Grafik Baru') end; Penerimaan Mahasiswa //Menampilkan judul grafik

Menampilkan grafik Garis procedure TForm1.Button1Click(Sender: TObject); begin Chart1.Series[1].Clear; grafik 1 (grafik batang) Chart1.Series[2].Clear; grafik 2 (grafik lingkaran) //Menampilkan Grafik Garis => Chart1.Series[0] Chart1.Series[0].Add(StrToFloat(Edit1.Text),'2009',clred); //Menampilkan data yang diinputkan pada Edit1.Text dengan grafik garis berwarna merah Chart1.Series[0].Add(StrToFloat(Edit2.Text),'2010',clred); //Menampilkan data yang diinputkan pada Edit2.Text dengan grafik garis berwarna merah Chart1.Series[0].Add(StrToFloat(Edit3.Text),'2011',clred); //Menampilkan data yang diinputkan pada Edit3.Text dengan grafik garis berwarna merah Chart1.Series[0].Add(StrToFloat(Edit4.Text),'2012',clred); //Menampilkan data yang diinputkan pada Edit4.Text dengan grafik garis berwarna merah
Pemrograman Visual Page 9

//Menyembunyikan //Menyembunyikan

tampilan tampilan

Chart1.Series[0].Add(StrToFloat(Edit5.Text),'2013',clred); //Menampilkan data yang diinputkan pada Edit5.Text dengan grafik garis berwarna merah end;

Menampilkan grafik Batang procedure TForm1.Button2Click(Sender: TObject); begin Chart1.Series[0].Clear; grafik 0 (grafik garis) Chart1.Series[2].Clear; grafik 2 (grafik lingkaran) //Menampilkan Grafik Batang => Chart1.Series[1] Chart1.Series[1].Add(StrToFloat(Edit1.Text),'2009',clred); //Menampilkan data yang diinputkan pada Edit1.Text dengan grafik batang berwarna merah untuk tahun 2009 Chart1.Series[1].Add(StrToFloat(Edit2.Text),'2010',clyello w); //Menampilkan data yang diinputkan pada Edit2.Text dengan grafik batang berwarna kuning untuk tahun 2010 Chart1.Series[1].Add(StrToFloat(Edit3.Text),'2011',clgreen ); //Menampilkan data yang diinputkan pada Edit3.Text dengan grafik batang berwarna hijau untuk tahun 2011 Chart1.Series[1].Add(StrToFloat(Edit4.Text),'2012',clblue) ; //Menampilkan data yang diinputkan pada Edit4.Text dengan grafik batang berwarna biru untuk tahun 2012 Chart1.Series[1].Add(StrToFloat(Edit5.Text),'2013',clgray) ; //Menampilkan data yang diinputkan pada Edit5.Text dengan grafik batang berwarna abu-abu untuk tahun 2013
Pemrograman Visual Page 10

//Menyembunyikan //Menyembunyikan

tampilan tampilan

end;

Menampilkan grafik Lingkaran procedure TForm1.Button3Click(Sender: TObject); begin Chart1.Series[0].Clear; grafik 0 (grafik garis) Chart1.Series[1].Clear; grafik 1 (grafik batang) //Menampilkan Grafik Lingkaran => Chart1.Series[2] Chart1.Series[2].Add(StrToFloat(Edit1.Text),'2009',clred); //Menampilkan data yang diinputkan pada Edit1.Text dengan grafik lingkaran berwarna merah untuk tahun 2009 Chart1.Series[2].Add(StrToFloat(Edit2.Text),'2010',clyello w); //Menampilkan data yang diinputkan pada Edit2.Text dengan grafik lingkaran berwarna kuning untuk tahun 2010 Chart1.Series[2].Add(StrToFloat(Edit3.Text),'2011',clgreen ); //Menampilkan data yang diinputkan pada Edit3.Text dengan grafik lingkaran berwarna hijau untuk tahun 2011 Chart1.Series[2].Add(StrToFloat(Edit4.Text),'2012',clblue) ; //Menampilkan data yang diinputkan pada Edit4.Text dengan grafik lingkaran berwarna biru untuk tahun 2012 Chart1.Series[2].Add(StrToFloat(Edit5.Text),'2013',clgray) ; //Menampilkan data yang diinputkan pada Edit5.Text dengan grafik lingkaran berwarna abu-abu untuk tahun 2013 end;
Pemrograman Visual Page 11

//Menyembunyikan //Menyembunyikan

tampilan tampilan

Langkah mengeksekusi program Setelah proses listing program selesai, program dapat dieksekusi dengan mengklik icon atau menekan tombol F9 pada keyboard.

Mengubah Warna (Wahyuni)

Background Aplikasi Grafik Penerimaan Mahasiswa Baru

Mengubah warna backround Form1 dan warna latar Chart

1) Tambahkan TButtonColor pada Form dengan memilih pada komponen Pallette TeeChart Lite

2) Ubah Caption pada Object Inspector. Pada aplikasi ini, Caption ButtonColor1 diubah menjadi Warna Latar dan ButtonColor2 menjadi Warna Chart.

3) Klik dua kali pada TButtonColor untuk mengisi kode perintah yang akan dilakukan setelah TButtonColor di klik. Listing program semuanya sama dengan
Pemrograman Visual Page 12

Program Grafik

Penerimaan Mahasiswa Baru, hanya ada beberapa tambahan

coding untuk ButtonColor-nya. Kode program dapat dilihat sebagai berikut :

//kode untuk button yang digunakan mengubah warna form procedure TForm1.ButtonColor1Click(Sender: TObject); begin form1.Color := ButtonColor1.SymbolColor; //Ketika ButtonColor1 di klik akan muncul pilihan warnanya End;

//kode untuk button yang digunakan mengubah warna latar chartnya procedure TForm1.ButtonColor2Click(Sender: TObject); begin Chart1.Color:= ButtonColor2.SymbolColor; //akan muncul pilihan warna untuk latar chart end;

4) Setelah program di run, maka akan muncul tampilan seperti diatas. Pilih warna sesuai keinginan. Hasilnya akan muncul sebagai berikut :

Pemrograman Visual

Page 13

Desain Properties dari aplikasi diatas pada umumnya sama dengan aplikasi Grafik Penerimaan Mahasiswa Baru. Hanya ada penambahan sebagai berikut : Object TButtonColor TButtonColor Name ButtonColor1 ButtonColor2 Caption Warna Latar Warna Chart

Aplikasi Operasi Aritmatika Menggunakan ComboFlat (A. Rezky Panca Putra) 1. Hasil program

2. Desain Form

3. Desain Properties Object TLabel TLabel TLabel TLabel TLabel Name Label1 Label2 Label3 Label4 Label5 Caption Angka 1 Operasi Angka 2 = Hasil

Pemrograman Visual

Page 14

TEdit TEdit TEdit TButton TButton TComboFlat

Edit1 Edit2 Edit3 Button1 Button2 ComboFlat1

OK CLEAR -

4. Listing Program unit ComboFlat; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls, VCLTee.TeCanvas; type TForm1 = class(TForm) Button1: TButton; Button2: TButton; Edit1: TEdit; Edit2: TEdit; Edit3: TEdit; Label1: TLabel; Label2: TLabel; Label3: TLabel; Label4: TLabel; ComboFlat1: TComboFlat; Label5: TLabel; procedure Button1Click(Sender: TObject); procedure Button2Click(Sender: TObject); private { Private declarations }
Pemrograman Visual Page 15

public { Public declarations } end; var Form1: TForm1; implementation {$R *.dfm} //Pengeksekusian Setelah Tombol OK di Klik procedure TForm1.Button1Click(Sender: TObject); var x : real; begin if comboflat1.ItemIndex = 0 then begin x:=strtofloat(edit1.Text)+strtofloat(edit2.Text); edit3.Text:=''+floattostr(x); end else if comboflat1.ItemIndex = 1 then begin x:=strtofloat(edit1.Text)-strtofloat(edit2.Text); edit3.Text:=''+floattostr(x); end else if comboflat1.ItemIndex = 2 then begin x:=strtofloat(edit1.Text)*strtofloat(edit2.Text); edit3.Text:=''+floattostr(x); end else if comboflat1.ItemIndex = 3 then begin x:=strtofloat(edit1.Text)/strtofloat(edit2.Text); edit3.Text:=''+floattostr(x); end
Pemrograman Visual Page 16

end; //Pengeksekusian Setelah Tombol CLEAR di Klik procedure TForm1.Button2Click(Sender: TObject); begin edit1.clear; edit2.Clear; edit3.Clear; end; end.

Penggunaan TButtonPen pada Component TeeChartStd (Agung Adityo ) Program yang akan dibuat kali ini ialah sebuah program yang akan menampilkan fungsi dari penggunaan TButtonPen. Komponen ini biasanya digunakan pada Chart Editor dialogs. Penggunaan TbuttonPen ini sebenarnya sama seperti penggunaan Tbutton pada Componen standart, tetapi TbuttonPen ini memiliki fungsi menghubungkan tombol ini pada TchartPen Properti. Tombol berbentuk grafik dengan garis pada samping kanan tombol. Untuk penjelasan yang lebih lanjut bisa mengikuti tutorial dibawah ini. Langkah 1 Buatlah sebuah project baru, pilih menu file ->new ->VCL form application.

Pemrograman Visual

Page 17

Langkah 2 Masukkan fungsi TbuttonPen pada pada komponen TeeChart std atau bisa menggunakan fungsi search pada bar tool palette

Langkah 3

Pemrograman Visual

Page 18

Klik 2 kali pada Tombol ButtonPen kemudian ketikkkan ButtonPen1.LinkPen( Series1.LinePen


); seperti gambar dibawah

Kegunaan Code ButtonPen1.LinkPen( Series1.LinePen ); adalah seperti yang saya jelaskan diatas , yaitu
sebagai LINK atau penghubung pada TchartPen.

Dikarenakan TchartPen tidak tersedia dalam komponen TeeChart maka program tersebut tidak bisa dijalankan. Tutorial memberi gradiasi warna pada kotak diagram chart dengan menggunakan komponen TButtonGradient pada palette TeeChart Lite (Gifta Elima)
1. Perhatikan pada pojok kanan bawah terdapat beberapa pilihan tool palette. Pada tutorial ini, akan digunakan palette TeeChart Lite dengan memilih salah satu komponennya,yaitu TButtonGradient.

Pemrograman Visual

Page 19

2. S e l a n j u tnya, membuat tampilan desain pada form1 dengan cara mengklik komponen TButtonGradient, kemudian menggesernya ke form1 seperti yang terlihat pada gambar berikut.

3. Pada tutorial ini akan dilakukan pemberian tiga gradasi warna dengan menggunakan ButtonGradient pada kotak diagram Tchart, jadi dibutuhkan komponen tambahan yaitu TChart.

Pemrograman Visual

Page 20

4. Setelah desain selesai, selanjutnya memberi source code pada masing-masing ButtonGradient. Pemberian kode dilakukan dengan cara mengklik dua kali pada Button Gradient sehingga akan menampilkan halaman seperti berikut.

5. Isi masing-masing prosedur dengan memberi kode seperti berikut untuk menampilkan gradasi biru, merah, dan ungu.

6. Untuk pemberian judul dapat ditambahkan komponen lain seperti Tlabel yg terdapat pada palette standard dan pemberian nama button dengan mengganti captionnya.

mengubah nama button gradient

Pemrograman Visual

Page 21

TLabel =Memberi judul

7. Setelah pemberian kode selesai, tekan F9 pada keyboard untuk menjalankan program, sehingga akan menampilkan jendela seperti berikut. Hasil running p11. Hasil running program untuk menampilkan gradasi biru, merah, dan ungu dapat dilihat pada gambar berikut.

8.

Hasil running program untuk menampilkan gradasi biru, merah, dan ungu dapat dilihat pada gambar berikut.

Gradasi Merah

Pemrograman Visual

Page 22

Gradasi Ungu

Gradasi Biru

Aplikasi Menampilkan DBChart yang diakses dari Ms. Access (Vega Vatima) 1. Membuat Database dengan format .mdb di Ms. Access a. Memasukkan tiap Variabel yang akan menjadi label pada grid, beserta tipe dari Variabel tersebut (Design View)

Pemrograman Visual

Page 23

b. Memasukkan tiap Items di Variabel (Worksheet View)

c. Menyimpan file dalam format .mdb (Microsoft Access 2003) 2. Membuat tampilan pada Delphi 7 a. Memasukkan Tools: AdoConnection yang terdapat pada Tool Pallette ADO DataSource yang terdapat pada Tool Pallette Data Access AdoTable yang terdapat pada Tool Pallete ADO DBGrid yang terdapat pada Data Controls DBChart yang terdapat pada Data Controls

3. Menghubungkan ADOConnection dengan Ms. Access 1) Klik sebanyak dua kali icon AdoConnection, sehingga akan muncul tampilan seperti ini. Kemudian klik Bulid.

Pemrograman Visual

Page 24

2) Pilih Microsoft Jet 4.0 Ole DB Provider, kemudian next.

3) Pilih database yang telah dibuat sebelumnya. Setelah itu Test Connection, dan OK.

Pemrograman Visual

Page 25

4. Beralih ke ADOTable. Perubahan di Object Inspector: Untuk Connection, pilih ADOConnection. Untuk Table, pilih nama tabel yang telah dibuat di ms.Access. Untuk Active, pilih True.

5. Beralih ke DataSource. Menentukan DataSet yang berada di Object Inspector menjadi ADOTable.

Pemrograman Visual

Page 26

6. Beralih ke DBGrid. Menentukan DataSource yang berada di Object Indspector menjadi DataSource.

Secara Otomatis tampilan akan berubah menjadi seperti ini:

7. Mengubah Pengaturan DBChart 1) Klik sebanyak dua kali DBChart yang berada pada form, sehingga muncul tampilan seperti ini:

Pemrograman Visual

Page 27

2) Klik tombol Add, kemudian memilih Chart berbentuk Bar.

3) Klik Titles dan ubah judul Chart sesuai keinginan.

4) Klik Series, Kemudian Data Sources.

Pemrograman Visual

Page 28

5) Ubah Random Values menjadi DataSet, kemudian pilih ubah Dataset nya menjadi ADOTable. Tentukan X sebagai tahun untuk Variabel yang akan menempati sumbu X, dan Y sebagai pemasukan per tahun yang akan menempati sumbu Y. Kemudian Close.

8.

Sehingga tampilan di form akan berubah menjadi seperti ini:

Pemrograman Visual

Page 29

Desain Properties Object ADOConnection ADOtable DataSource DBGrid DBChart Name ADOConnection1 ADOTable1 DataSource1 DBGrid1 Dbchart1

Cara Menggunakan ChartDataSet (Fuad Furqan) Berdasarkan Project DBChart yang sudah ada, adapula pengaturan pengambilan nilai yang menggunakan ChartDataSet.

1. Masukkan Icon ChartDataSet dalam Form 2. Perubahan di Object Inspector: a. Menentukan Chart, dengan Chart sebelumnya yang telh dibuat

Pemrograman Visual

Page 30

b. Mengubah bagian Active dari False, menjadi True.

3. Tambahkan DBChart baru pada form

4. Ubah Pengaturan DBChart: a. Klik sebanyak dua kaliDBChart yang terdapat pada form, sehingga muncul tampilan seperti ini:

Pemrograman Visual

Page 31

b. Klik Series, kemudian tombol Add yang berada di sebelah kanan sehingga muncul tampilan seperti ini.

c. Klik bagian Bar kemudian OK. d. Klik Bagian Series disebelah Kiri, kemudian pilih Series yang sedang aktif (Series 2), kemudian klik Data Source.

Pemrograman Visual

Page 32

e. Ubah Random menjadi DataSet.

f. Ubah pengaturan sesuai dengan tampilan dibawah ini:

Pemrograman Visual

Page 33

g. Setelah itu klik Apply dan DBChart2 akan berubah mengikuti Chart yang pertama.

Cara Menggunakan SeriesDataSet (Sulham) Berdasarkan Project DBChart yang sudah ada, adapula pengaturan pengambilan nilai yang menggunakan ChartDataSet.

Pemrograman Visual

Page 34

1. Masukkan Icon SeriesDataSet dalam Form

2. Perubahan di Object Inspector: a. Menentukan Series, dengan Series sebelumnya yang telah dibuat

b. Mengubah bagian Active dari False, menjadi True.

3. Tambahkan DBChart baru pada form

Pemrograman Visual

Page 35

4. Ubah Pengaturan DBChart: a. Klik sebanyak dua kaliDBChart yang terdapat pada form, sehingga muncul tampilan seperti ini:

b. Klik Series, kemudian tombol Add yang berada di sebelah kanan sehingga muncul tampilan seperti ini.

Pemrograman Visual

Page 36

c. Klik bagian Bar kemudian OK. d. Klik Bagian Series disebelah Kiri, kemudian pilih Series yang sedang aktif (Series 3), kemudian klik Data Source.

Pemrograman Visual

Page 37

e. Ubah Random menjadi DataSet.

f. Ubah pengaturan sesuai dengan tampilan dibawah ini:

Pemrograman Visual

Page 38

g. Setelah itu klik Apply dan DBChart2 akan berubah mengikuti Chart yang pertama.

Pemrograman Visual

Page 39

Anda mungkin juga menyukai