Menampilkan Data
LATIHAN 1
Menampilkan Data
ARSys Software Developed/AbdRohim
9
Menampilkan Data
Latihan 1. a Buatlah program seperti berikut ini:
Lakukan hal hal berikut ini. 1. Bukalah project baru 2. Tempatkan pada form tersebut satu buah Table, DataSource, DBGrid dan satu buah BitBtn 3. Simpanlah project tersebut dengan nama Unit= Latih1a, nama Project Latihan1a 4. Isikan nilai-nilai pada properti sbb: Komponen Properti Nilai Latihan 1a Menampilkan data dengan Form Caption DBGrid fmLatih1a Name poScreenCenter Position Table DatabBaseName DBKURSUS Name TbPegawai TableName EMPLOYEE.DB Active true DataSource DataSet TbPegawai Name dsPegawai DBGrid DataSource dsPegawai BitBtn Kind bkClose 5. Simpan kembali program ini kembali. 6. Jalankan Programnya
ARSys Software Developed/AbdRohim
10
Menampilkan Data
Mengatur Tampilan Grid Dalam DBGrid terdapat dua bagian yang pertama bagian judul dan yang kedua bagia data. Bagian-bagian ini bisa diatur bentuk tampilanya seperti warna yang ditampilkan, jenis dan ukuran judul atau data yang digunakan, posisi judul atau data bahkan kita bisa mengatur misalnya menandai dengan warna lain bila nilai data berada pada tingkat tertentu. Untuk mengatur bagian judul dan bagian data tersebut terlebih dahulu field-field yang akan ditampilkan pada grid (Secara default semua field) dimasukan pada Field Editor. Pada Field Editor ini penagturan untuk judul dan menampilkan data dilakukan. Untuk memanggil atau menampilkan Field Editor pada daerah grid klik kanan pada mouse anda pilih menu Columns Editor sehingga tampil sbb:
Mengatur Tampilan Data lakukanlah langkah-langkah berikut ini: 1. Kembali kepada tampilan Form (jika sedang berada dalah tampilan Unit atau Source Program) 2. Klik kana pada DBGrid pilih menu Columns Editor. 3. Klik button AddAll Fields 4. Klik pada baris pertama EmpNo. Isikan untuk properti sbb: Komponen Properti Nilai DBGrid : Aligment TaCenter Columns Editor +Font MS Sans Serif 12 (Klik pada button …) 5. Run kembali Program anda ! Perhatikan apakah ada perubahan ??? 6. Lakukan pengaturan untuk field field yang lainya (silahkan menurut kehendak anda) 7. jangan lupa simpan kembali programnya.
ARSys Software Developed/AbdRohim
11
Menampilkan Data
Mengatur Tampilan Judul lakukanlah langkah-langkah berikut ini: 1. Klik kanan pada DBGrid pilih menu Columns Editor. 2. Klik pada baris pertama EmpNo. Isikan untuk properti sbb: Komponen Properti Nilai DBGrid : +Tittle (Double klik pada Columns Editor kata ini) TaCenter - Aligment No. Pegawai - Caption MS Sans Serif 12 Bold - +Font 3. Run kembali Program anda ! Perhatikan apakah ada perubahan ??? 4. Lakukan pengaturan untuk judul-judul field yang lainya (silahkan menurut kehendak anda) 5. jangan lupa simpan kembali programnya.
Menyorot Satu Record pada Grid Saat ini pada grid yang disorot atau aktif hanya sebuah field saja ditandai dengan warna yang berbeda (tergantung pada setting warna di windowsnya). Pada field tersebut bisa dilakukan proses editing. Nah jika dinginkan yang disorot seluruh field atau satu record maka lakukanlah langkah langkah berikut ini: 1. Aktifkan DbGrid. Klik pada daerah DBGrid tersebut. 2. Pada properti isikan hal berikut ini: Komponen Properti Nilai DBGrid +Option (Double klik pada kata tersebut) - dgRowSelect True - dgAlwayShow True 3. Simpan kembali programnya 4. Run programn anda ! Jika pada grid yang disorot satu record maka proses editing pada record tersebut tidak bisa lagi dilakukan
ARSys Software Developed/AbdRohim
12
Menampilkan Data
Menambah DBNavigator Tambahkan pada form sebuah DBNavigator seperti berikut ini:
lakukan langkah-langkah berikut ini: 1. Geser Table dengan datasource ke sebelah kanan 2. Tambahkan komponen DBNavigator tempatkan diatas DBGrid 3. Isikan pada properti sbb: Komponen Properti Nilai DsPegawai DBNavigator DataSource Ke Awal Record Hints Ke Record Sebelumnya Ke Record Sesudahnya Ke Akhir Record True ShowHint 4. Simpan kembali programnya 5. Run Programnya !!! 6. Coba anda tempatkan mouse pada tombol-tombol ini : 7. Coba anda klik tombol tombol tersebut ! apa yang terjadi pada grid
apa yan g terjadi ?
Mengatur Tombol DBNavigator DBNavigator terdiri dari 10 buah tombol yang mempunyai fungsi dan kegunaan masingmasing. Secara fungsi tombol tersebut bisa dibagi dalam dua kelompok, kelompok pertama tombol-tombol
berguna untuk melakukan navigasi atau perpindahan posisi
record sedang kelompok ke dua manipulasi terhadap data.
untuk melakukan proses
Tombol-tombol tersebut bisa diatur untuk dimunculkan atau tidak pada program kita. Tergantung kebutuhan
ARSys Software Developed/AbdRohim
13
Menampilkan Data
Lakukanlah langkah-langkah berikut ini: 1. Aktifkan DBNavigator. Klik pada DBNAvigator tersebut. 2. Pada properti isikan hal berikut ini: Komponen Properti DBNavigator +VisibleButton (Double klik pada kata tersebut) False - nbInsert False - nbDelete False - nbEdit False - nbPost False - nbCancel False - nbRefresh 3. Atur ukuran DBNavigator pada form (diperkecil) 4. Simpan kembali programnya 5. Run programn anda !
ARSys Software Developed/AbdRohim
Nilai
14
Menampilkan Data
Latihan 1. b Buatlah program seperti berikut ini:
Lakukan hal hal berikut ini. 1. Bukalah project baru. Klik menu File | New Aplication 2. Tempatkan pada form tersebut 1 buah Table, 1 buah DataSource, 1 buah DBNavigator, 5 buah Label, 5 buah DBEdit dan 1 buah BitBtn 3. Simpanlah project tersebut dengan nama Unit= Latih1b, nama Project Latihan1b 4. Isikan nilai-nilai pada properti sbb: Komponen Properti Nilai Latihan 1 b Menampilkan data Form Caption dengan DBEdit fmLatih1b Name poScreenCenter Position DBKURSUS Table DatabBaseName TbPegawai Name TableName EMPLOYEE.DB Active true DataSource DataSet TbPegawai Name dsPegawai DBNavigator DataSource dsPegawai Label1 Caption Emp No. Label2 Caption Last Name Label3 Caption First Name Label4 Caption Phone Ext Label5 Caption Hire Date Label6 Caption Salary DBEdit1 DataSource DsPegawai DataField EmpNo DBEdit2 DataSource DsPegawai DataField LastName DBEdit3 DataSource DsPegawai DataField FirstName DBEdit4 DataSource DsPegawai
ARSys Software Developed/AbdRohim
15
Menampilkan Data
DBEdit5 DBEdit6 BitBtn
DataField DataSource DataField DataSource DataField Kind
PhoneExt DsPegawai HireDate DsPegawai Salary BkClose
5. Simpan kembali program ini kembali. 6. Jalankan Programnya
Membuat Navigator sendiri Pada object Tbale terdapat beberapa perintah atau prosedur yang bisa digunakan untuk melakukan pemindahan posisi record yang aktif. Perintah-perintah tersebut diantaranya adalah First, Next, Last, Prior. Pada object table tersebut masih banyak perintah lainnya yang bisa dimanfaatkan untuk pembuatan program aplikasi. Rubahlah from Latih1b seperti berikut ini:
Lakukan langkah-langkah berikut ini: 1. Tempatkan 1 buah Panel, dan 4 buah Button 2. Isikan nilai-nilai pada properti sbb: Komponen Properti Panel Caption Button1 Caption Name Button2 Caption Name Button3 Caption Name Button4 Caption Name
ARSys Software Developed/AbdRohim
Nilai Kosongkan &Pertama btnPertama &Sebelum btnSebelum Ses&udah btnSesudah &Terakhir btnTerakhir
16
Menampilkan Data
3. Pada Form latih1b double klik button Pertama. Tuliskan program berikut ini: procedure TfmLatih1b.btnPertamaClick(Sender: TObject); begin tbPegawai.First; end; 4. Pada Form latih1b double klik button Sebelum. Tuliskan program berikut ini: procedure TfmLatih1b.btnSebelumClick(Sender: TObject); begin tbPegawai.Prior; end; 5. Pada Form latih1b double klik button Sesudah. Tuliskan program berikut ini: procedure TfmLatih1b.btnSesudahClick(Sender: TObject); begin tbPegawai.Next; end; 6. Pada Form latih1b double klik button Tekakhir. Tuliskan program berikut ini: procedure TfmLatih1b.btnTerakhirClick(Sender: TObject); begin tbPegawai.Last; end; 7. Simpan kembali programnya. 8. Run-lah program anda 9. Klik tombol-tombol yang baru anda buat. Apakah hasil yang didapat ???
ARSys Software Developed/AbdRohim
17
Menampilkan Data
Latihan 1. c Buatlah program seperti gambar berikut ini.
tempatkanlah pada form tersebut 2 buah panel, 5 buah label, 2 buah DBEdit, 1 buah DbMemo, 1 buah DBImage, 1 buah Table, 1 buah DataSource, 5 buah BitBtn dan 1 buah CheckBox. Data tentang ikan ini ada pada DBKURSUS pada file BIOLIFE.DB Selamat Mencoba.
ARSys Software Developed/AbdRohim
18
Menampilkan Data
TIP Hari ini Pada latihan 1a terdapat ada field first name dan last name. Mungkin ada terbersik sebuah pertanyaan bagaimana mengabungkan dua field tersebut menjadi satu field, field nama saja misalnya, hal ini dikarenakan di Indonesia tidak mengenal struktur nama seperti itu. Untuk keperluan itu pada delphi telah menyediakan sebuah fasilitas yang diberi istilah variabel field. Variabel field ini mendeklarasikan sebuah field yang ada pada struktur sebuah tabel menjadi sebuah variabel yang jenisnya sama dengan variabel field. Nama variabel field dibuat sama dengan nama fieldnya. Keunggulan lain selain membuat variabel field yang telah ada di file juga bisa dibuat sebuah variabel field tersendiri yang tidak terdapat pada struktur file tersebut. Untuk mempermudah dalam membuatan sebuah variabel field Delphi telah membuah sebuah editor yang diberi nama Field Editor. Dengan menggunakan field editor ini membuat dan menciptakan variabel field akan sangat mudah. Variabel field ini akan dideklarasikan langsung atau ditulis langsung pada source program pada bagian deklarasi varabel (.Pas). berikut ini contoh source program yang belum ada variabel field dengan yang ada variabel field type TfmLatih1a = class(TForm) tbPegawai: TTable; dsPegawai: TDataSource; DBGrid1: TDBGrid; BitBtn1: TBitBtn; DBNavigator1: TDBNavigator;
type TfmLatih1a = class(TForm) tbPegawai: TTable; dsPegawai: TDataSource; DBGrid1: TDBGrid; BitBtn1: TBitBtn; DBNavigator1: TDBNavigator; tbPegawaiEmpNo: TIntegerField; tbPegawaiLastName: TStringField; tbPegawaiFirstName: TStringField; tbPegawaiPhoneExt: TStringField; tbPegawaiHireDate: TDateTimeField; tbPegawaiSalary: TFloatField; Bold = variabel field
ARSys Software Developed/AbdRohim
19
Menampilkan Data
Marilah kita coba variabel field ini pada program latihan 1a Lakukan langkah-langkah berikut ini: 1. Buka project/program Latihan1a. gunakan Menu File | Open atau Menu File | ReOpen 2. Aktifkan komponen tabel pada form tersebut dengan cara mengklik pada tabel tersebut. 3. Klik pada komponen tabel tersebut sehingga muncul sebuah pop-up menu. Pilihlah menu Fields Editor 4. Pada Fields Editor tersebut klik kanan sehingga muncul sebuah pop-up menu. Pilihlah menu adds Field 5. Terlihat seluruh Field tersorot semua. Klik tombol OK Sampai langkah ini anda telah selesai mendeklarasikan variabel field sesuai dengan yang ada pada struktur filenya.
Berikutnya akan dibuat variabel field yang baru. 6. klik kanan pada Field Editor tersebut sehingga muncul sebuah pop-up menu pilih menu New Field 7. Akan tampil sebuah form seperti berikut ini:
8. Isikan pada Name = Nama, Type = String kemudian klik tombol OK 9. Hati-hati simpanlah program dengan nama lain . klik menu File | Save As Project isikan pada nama project Latihan1d. kemudian klik kembali menu File | Save As isikan pada nama unit Latih1d
Variabel field yang baru telah terbentuk tetapi masih kosong. Untuk mengisinya dan supaya selalu ter-update setiap ada perubahan secara otomatis diisi pada Events OnCalculaton Field pada object Table. Lanjutkan langkah berikut 10. Aktifkan komponen tabel pegawai (klik pada komponen tersebut) 11. Klik page Events pada Object Inspector. 12. Double klik pada baris OnCalculation Field 13. Tuliskan program berikut ini procedure TfmLatih1a.tbPegawaiCalcFields(DataSet: TDataSet); begin tbPegawaiNama.Value:=tbPegawaiFirstName.Value+’ ‘+
ARSys Software Developed/AbdRohim
20
Menampilkan Data
14. 15. 16. 17. 18. 19. 20. 21. 22. 23.
tbPegawaiLastName.Value; end; Simpan kembali programnya. Kembalikan ke tampilan Form gunakan tombol Toggle Form/Unit pada SpeedBar. Aktifkan DBGrid dengan cara mengklik pada daerah DBGrid tersebut. Klik kanan pada DBGrid tersbut sehingga muncul pop-up menu pilih menu Columns Editor Klik tombol Add pada Columns Editor tersebut kemudian sorotlah (dengan mengklik) pada TColumn Pada properti isikan FieldName = Nama Pindahkan pisisi Field Nama tersebut sehingga berada pada baris kedua dengan menggunakan tombol Move Up Hapus lah Field FirstName dan Field LastName pada editor tersebut dengan cara sorot terlebih dahulu field yang dimaksud kemudian klik tombol Delete Simpan Kembali programnya Silahkan di Run sekarang.
ARSys Software Developed/AbdRohim
21