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

Tampilan Delphi XE5Anda 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.

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

Gambar Jendela StructureBagian-bagian jendela utama Delphi XE51. StructureMerupakan 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

Gambar Jendela Object InspectorMerupakan jendela yang digunakan untuk mengatur tampilan komponen pada form, misal bagaimana mengubah tulisan button pada command button menjadi Simpan, atau menghapus tulisan pada label dan mengganti nama menjadi Nama Mahasiswa atau memberikan perintah tertentu pada sebuah komponen sehingga ada interaksi ketika program dijalankan.

Gambar Jendela Properties dan EvebtsSecara Umum Object Inspector terbagi menadi 2, yaitu :a. PropertiesDigunakan untuk mengatur tampilan pada sebuah komponen baik itu meliputi penggantian nama, warna, jenis huruf, border dan lainlain.b. EventsMerupakan 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 simpan. Perintah event clik tersebut dapat diberikan melalui jendela events.

3. Gambar Jendela FormForm DesignerMerupakan tempat yang digunakan untuk merancang semua aplikasi program yang diambil dari komponen pallete.

4. Component Pallete

Gambar Jendela Component PalleteMerupakan 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.

NoIconNama Fungsi

1.

TChartMembuat Grafik

2.

TDBChartUntuk menampilkan data dalam sebuahGrafik menggunakan Data Base

3.

TSeriesDataSetTempat Menyimpan Data yang nantinya diambil ke chart

4.

TChartDataSetTempat menyimpan data yang datanya diambil dari chart

5.

TDBCrossTabSource

6.

TButtonColorSebagai tombol untuk pemilihan warna

7.

TButtonPenmenghubungkan tombol ini pada TchartPen Properti

8.

TButtonGradientTombol untuk pengaturan gradient yang disini digunakan sebagai pengatur gradasi warna

9.

TDraw3D

10.

TComboFlatFungsinya sama dengan ComboBox pada Component Standard

11.

TImageFilteredpengendalian 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. Gambar Jendela CodeEditorCode 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

Gambar Jendela Code ExplorerJendela yang digunakan untuk menampilkan seluruh variabel, type, dan rountine yang didefinisikan pada sebuah unit.

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

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

Grafik Batang

Grafik Lingkaran

b. Desain Form

c. Desain Properties ObjectNameCaption

TGroupBoxGroupBox1-

TLabelLabel12009

TLabelLabel22010

TLabelLabel32011

TLabelLabel42012

TLabelLabel52013

TEditEdit1-

TEditEdit2-

TEditEdit3-

TEditEdit4-

TEditEdit5-

TButtonButton1Garis

TButtonButton2Batang

TButtonButton3Lingkaran

TChartChart1-

TFormForm1Form1

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

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

Tampilan setelah menambahkan Chart

d. Listing ProgramUntuk menginput procedure dari object-object, klik kiri 2 kali pada object tersebut. Menampilkan judul grafikprocedure TForm1.FormCreate(Sender: TObject);begin Chart1.Title.Text.Add('Grafik Penerimaan Mahasiswa Baru') //Menampilkan judul grafikend;

Menampilkan grafik Garisprocedure TForm1.Button1Click(Sender: TObject);begin Chart1.Series[1].Clear; //Menyembunyikan tampilan grafik 1 (grafik batang) Chart1.Series[2].Clear; //Menyembunyikan tampilan 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 Chart1.Series[0].Add(StrToFloat(Edit5.Text),'2013',clred); //Menampilkan data yang diinputkan pada Edit5.Text dengan grafik garis berwarna merahend;

Menampilkan grafik Batangprocedure TForm1.Button2Click(Sender: TObject);begin Chart1.Series[0].Clear; //Menyembunyikan tampilan grafik 0 (grafik garis) Chart1.Series[2].Clear; //Menyembunyikan tampilan 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',clyellow); //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

end;

Menampilkan grafik Lingkaran procedure TForm1.Button3Click(Sender: TObject);begin Chart1.Series[0].Clear; //Menyembunyikan tampilan grafik 0 (grafik garis) Chart1.Series[1].Clear; //Menyembunyikan tampilan 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',clyellow); //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;Langkah mengeksekusi programSetelah 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 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 formprocedure TForm1.ButtonColor1Click(Sender: TObject);beginform1.Color := ButtonColor1.SymbolColor;//Ketika ButtonColor1 di klik akan muncul pilihan warnanyaEnd;

//kode untuk button yang digunakan mengubah warna latar chartnyaprocedure TForm1.ButtonColor2Click(Sender: TObject);beginChart1.Color:= ButtonColor2.SymbolColor;//akan muncul pilihan warna untuk latar chartend;

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

Desain Properties dari aplikasi diatas pada umumnya sama dengan aplikasi Grafik Penerimaan Mahasiswa Baru. Hanya ada penambahan sebagai berikut :ObjectNameCaption

TButtonColorButtonColor1Warna Latar

TButtonColorButtonColor2Warna Chart

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

2. Desain Form

3. Desain PropertiesObjectNameCaption

TLabelLabel1Angka 1

TLabelLabel2Operasi

TLabelLabel3Angka 2

TLabelLabel4=

TLabelLabel5Hasil

TEditEdit1-

TEditEdit2-

TEditEdit3-

TButtonButton1OK

TButtonButton2CLEAR

TComboFlatComboFlat1-

4. Listing Programunit 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 } public { Public declarations } end;

var Form1: TForm1;

implementation

{$R *.dfm}//Pengeksekusian Setelah Tombol OK di Klikprocedure TForm1.Button1Click(Sender: TObject);varx : real;beginif 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); endend;//Pengeksekusian Setelah Tombol CLEAR di Klikprocedure TForm1.Button2Click(Sender: TObject);beginedit1.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 1Buatlah sebuah project baru, pilih menu file ->new ->VCL form application.

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

Langkah 3Klik 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.

2. Selanjutnya, 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.

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

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

Gradasi Ungu

Gradasi Biru

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

1. Memasukkan tiap Items di Variabel (Worksheet View)

1. Menyimpan file dalam format .mdb (Microsoft Access 2003)1. Membuat tampilan pada Delphi 71. 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

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

1. Pilih Microsoft Jet 4.0 Ole DB Provider, kemudian next.

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

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

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

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

Secara Otomatis tampilan akan berubah menjadi seperti ini:

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

1. Klik tombol Add, kemudian memilih Chart berbentuk Bar.

1. Klik Titles dan ubah judul Chart sesuai keinginan.

1. Klik Series, Kemudian Data Sources.

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

1. Sehingga tampilan di form akan berubah menjadi seperti ini:

Desain PropertiesObjectName

ADOConnectionADOConnection1

ADOtableADOTable1

DataSourceDataSource1

DBGridDBGrid1

DBChartDbchart1

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

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:

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.

e. Ubah Random menjadi DataSet.

f. Ubah pengaturan sesuai dengan tampilan dibawah ini:

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

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.

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

e. Ubah Random menjadi DataSet.

f. Ubah pengaturan sesuai dengan tampilan dibawah ini:

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

Pemrograman VisualPage 13