TeeChart Lite

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 Langkah-langkah mengaktifkan mengaktifkan Delphi

Anda diasumsikan sudah menginstall Delphi pada Windows Anda. Delphi yang kita gunakan pada tutorial ini adalah Delphi XE5. Untuk 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 –  Application  –  Delphi,  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.

Gambar Jendela Structure

2. Object Inspector Merupakan

jendela

yang

digunakan

untuk

mengatur tampilan komponen pada form, misal  bagaimana

mengubah

command

button

tulisan

menjadi

button

pada

Simpan,

atau

menghapus tulisan pada label dan mengganti nama

menjadi

memberikan

Nama

perintah

Mahasiswa

tertentu

pada

atau sebuah

komponen sehingga ada interaksi ketika program Gambar Jendela Object Inspector

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

Icon

Nama

Fungsi

1.

TChart

Membuat Grafik

2.

TDBChart

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.

TDBCrossTabSource

6.

TButtonColor

Sebagai tombol untuk pemilihan warna

7.

TButtonPen

menghubungkan menghubungkan

tombol

ini

pada

TchartPen

Properti

Pemrograman Visual

Page 3

8.

TButtonGradient

Tombol untuk pengaturan gradient yang disini digunakan sebagai pengatur gradasi warna

9.

TDraw3D

10.

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 kir i yang berisi berupa angka menunjukan baris dan kolom. Keterangan modified menunjukan bahwa telah terjadi modifikasi terhapap baris program. Dan  paling kanan menunjukan status keyboard

Gambar Jendela CodeEditor

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

Name

Caption

TGroupBox

GroupBox1

-

TLabel

Label1

2009

TLabel

Label2

2010

TLabel

Label3

2011

TLabel

Label4

2012

TLabel

Label5

2013

TEdit

Edit1

-

TEdit

Edit2

-

TEdit

Edit3

-

TEdit

Edit4

-

TEdit

Edit5

-

TButton

Button1

Garis

TButton

Button2

Batang

TButton

Button3

Lingkaran

TChart

Chart1

-

TForm

Form1

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

Penerimaan

Mahasiswa

//Menampilkan judul grafik

end;

Menampilkan grafik Garis procedure TForm1.Button1Click(Sender: TObject); begin Chart1.Series[1].Clear;

//Menyembunyikan

tampilan

//Menyembunyikan

tampilan

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

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;

//Menyembunyikan

tampilan

//Menyembunyikan

tampilan

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

end;

Menampilkan grafik Lingkaran procedure TForm1.Button3Click(Sender: TObject); begin Chart1.Series[0].Clear;

//Menyembunyikan

tampilan

//Menyembunyikan

tampilan

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

Langkah mengeksekusi program

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

Mengubah Warna

Background Aplikasi Grafik Penerimaan Mahasiswa Baru

(Wahyuni)

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

Name

Caption

TButtonColor

ButtonColor1

Warna Latar

TButtonColor

ButtonColor2

Warna Chart

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

1. Hasil program

2. Desain Form

3. Desain Properties Object

Name

Caption

TLabel

Label1

Angka 1

TLabel

Label2

Operasi

TLabel

Label3

Angka 2

TLabel

Label4

=

TLabel

Label5

Hasil

Pemrograman Visual

Page 14

TEdit

Edit1

-

TEdit

Edit2

-

TEdit

Edit3

-

TButton

Button1

OK

TButton

Button2

CLEAR

TComboFlat

ComboFlat1

-

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

Name

ADOConnection

ADOConnection1

ADOtable

ADOTable1

DataSource

DataSource1

DBGrid

DBGrid1

DBChart

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