• Tidak ada hasil yang ditemukan

Membuat Form Koleksi

Dalam dokumen MODUL KULIAH PEMROGRAMAN VISUAL 1 (Halaman 122-133)

Form koleksi digunakan untuk mengelola data koleksi yang

meliputi judul, kategori, jenis koleksi, harga sewa, harga

denda serta jumlah koleksi. Form Koleksi juga menyimpan

gambar cover koleksi serta dapat menampilkan preview

dalam bentuk video pendek. Selain itu Form Koleksi juga

menyajikan histori transaksi untuk tiap koleksi.

Langkah-langkah :

1. Pastikan project Rental.dpr telah dibuka. 2. Buat Form baru, klik menu File – New – Form.

3. Ubah property form yang baru dibuat seperti pada table di bawah ini : Komponen Property Value

Form1 Caption Koleksi BorderStyle bsDialog Name FKoleksi

Position poDesktopCenter

4. Klik menu File – Save All untuk menyimpan project. Simpan Unit1 menjadi UFKoleksi.pas dalam folder Rental.

5. Klik menu File – Use Unit, pilih FUtama, klik OK untuk melanjutkan. 6. Tambahkan PageControl1 dari tab Win32, ubah property seperti table di

bawah ini :

Komponen Tab Parent Property Value PageControl1 Win32 FKoleksi Align alClient

7. Tambahkan dua buah TabSheet dengan cara mengklik kanan komponen PageControl1, kemudian pilih New Page. Atur property seperti table di bawah ini ;

Komponen Parent Property Value TabSheet1 PageControl1 Caption Data Koleksi TabSheet2 PageControl1 Caption Histori Transaksi

8. Tambahkan GroupBox1 dari tab Standard ke dalam TabSheet1, ubah property seperti table di bawah ini :

Komponen Tab Parent Property Value GroupBox1 Standard TabSheet1 Align alClient

Caption

9. Tambahkan ToolBar1 dari tab Win32 ke dalam GroupBox1, ubah property seperti table di bawah ini :

Komponen Tab Parent Property Value ToolBar1 Win32 GroupBox1 Autosize True

Komponen Tab Parent Property Value ButtonWidth 46

10. Tambahkan 3 buah SpeedButton dari tab Additional ke dalam ToolBar1, atur property seperti table di bawah ini :

Komponen Tab Parent Property Value SpeedButton1 Additional ToolBar1 Caption Simpan

Glyph Simpan.bmp

Tag 1

SpeedButton2 Additional ToolBar1 Caption Hapus Glyph Hapus.bmp

Tag 2

SpeedButton3 Additional ToolBar1 Caption Batal Glyph Batal.bmp Tag 3 SpeedButton1, SpeedButton2, SpeedButton3 Layout blTop Width 46 Flat True Height 44

11. Tambahkan 3 buah ADOTable dari tab ADO, atur property seperti table di bawah ini :

Komponen Tab Parent Property Value

ADOTable1 ADO FKoleksi Connection FUtama.ADOConnection1 Name Koleksi

TableName Koleksi

ADOTable2 ADO FKoleksi Connection FUtama.ADOConnection1

Name Karyawan

TableName Karyawan

ADOTable3 ADO FKoleksi Connection FUtama.ADOConnection1

Name Pemasok

TableName Pemasok

12. Buat persistent field untuk table Koleksi, klik dua kali Koleksi pada Object TreeView untuk membuka field editor, klik kanan pada field editor pilih Add All Fields.

13. Buat persistent field untuk table Karyawan, klik dua kali Karyawan pada Object TreeView untuk membuka field editor, klik kanan pada field editor pilih Add All Fields.

14. Buat persistent field untuk table Pemasok, klik dua kali Pemasok pada Object TreeView untuk membuka field editor, klik kanan pada field editor pilih Add All Fields. Berikut hasil langkah ke 12, 13, dan 14 :

15. Tambahkan field baru NamaPemasok pada table Koleksi dengan cara klik dua kali Koleksi untuk membuka field editor, kemudian pilih New Field untuk membuka jendela New Field, lihat gambar berikut :

Isi informasi seperti pada table di bawah ini (lihat gambar di atas) : Field Section Property Value

NamaPemasok Field Properties Name NamaPemasok Type String

Size 30

Field type Field type Lookup Lookup Definition Key Fields PemasokID

Dataset Pemasok Lookup Keys PemasokID Result Field Nama

16. Tambahkan field baru NamaKaryawan pada table koleksi, klik dua kali Koleksi pada Object TreeView untuk membuka field editor, klik kanan pada field editor kemudian pilih New Fields. Lengkapi informasi pada jendela New Field seperti pada table di bawah ini (lihat langkah 15) :

Field Section Property Value

NamaKaryawan Field Properties Name NamaKaryawan Type String

Size 30

Field type Field type Lookup Lookup Definition Key Fields KaryawanID

Dataset Karyawan Lookup Keys KaryawanID Result Field Nama

17. Klik dua kali Koleksi untuk membuka field editor, lakukan drag and drop field KoleksiID, Judul dan PemeranUtama ke dalam GroupBox1.

18. Tambahkan 3 buah Label dari tab Standard, ubah property seperti table di bawah ini :

Komponen Tab Parent Property Value Label3 Standard GroupBox1 Caption Kategori Label4 Standard GroupBox1 Caption Jenis Koleksi Label5 Standard GroupBox1 Caption Tgl Beli

19. Tambahkan 2 buah DBCombobox1 dari tab Data Control ke dalam GroupBox1, ubah property seperti table di bawah ini :

Komponen Tab Parent Property Value DBCombobox1,

DBCombobox2

Datasource Datasource1 Sorted True

Style csDropdownlist DBCombobox1 DataControl GroupBox1 Datafield Kategori

Items ACTION DRAMA DRAMA MUSICAL HOROR HOROR KOMEDI KARTUN KOMEDI KOMEDI ROMANTIS LAIN-LAIN

DBCombobox2 DataControl GroupBox1 Datafield JenisKoleksi Items CD

CD AUDIO CD MP3 DVD

20. Tambahkan 1 buah DateTimePicker dari tab Win32 ke dalam GroupBox1. 21. Klik dua kali Koleksi untuk membuka field editor, lakukan drag and drop

field HargaBeli, PemasokID, NamaPemasok, LamaSewa, HargaSewa, HargaDenda, Jumlah, KaryawanID, NamaKaryawan, Cover dan Preview secara berurutan ke dalam GroupBox1.

22. Ubah property untuk komponen berikut :

Komponen Property Value DBEdit1, DBEdit10, Enabled False

Komponen Property Value DBEdit1, DBEdit2, DBCombobox1, DBCombobox2, DBEdit3, DBEdit4, DBEdit5, DBEdit6, DBEdit7, DBEdit8, DBEdit9, DBEdit11 Charcase ecUpperCase

DBImage1 Stretch True

23. Tambahkan 2 buah BitBtn dari tab Additional ke dalam GroupBox1, atur property seperti table di bawah ini :

Komponen Tab Parent Property Value BitBtn1 Additional GroupBox1 Caption Cover … BitBtn2 Additional GroupBox1 Caption Video … BitBtn1,

BitBtn2

Glyph Cari.bmp

24. Tambahkan 1 buah Panel dari tab Standard ke dalam GroupBox1.

25. Tambahkan 1 buah MediaPlayer dari tab System ke dalam GroupBox1, atur property seperti table di bawah ini :

Komponen Tab Parent Property Value MediaPlayer1 System GroupBox1 Display Panel1

VisibleButtons.btNext False VisibleButtons.btPrev False VisibleButtons.btStep False VisibleButtons.btBack False VisibleButtons.btRecord False VisibleButtons.btEject False

26. Tambahkan DBNavigator1 dari tab DataControl ke dalam GroupBox1, atur property seperti table di bawah ini :

Komponen Tab Parent Property Value

DBNavigator1 Data Control GroupBox1 Align alBottom

Datasource Datasource1 Flat True VisibleButtons.nbInsert False VisibleButtons.nbDelete False VisibleButtons.nbEdit False VisibleButtons.nbPost False VisibleButtons.nbCancel False VisibleButtons.nbRefresh False 27. Tambahkan OpenPictureDialog1 dari tab Dialogs ke dalam GroupBox1. 28. Tambahkan OpenDialog1 dari tab Dialogs ke dalam GroupBox1, atur

property seperti table di bawah ini :

Komponen Tab Parent Property Value

OpenDialog1 Dialogs GroupBox1 Filter Filter Name Filter File Video (*.wmv, *.wmv; *.avi;

Komponen Tab Parent Property Value

*.avi, *.mpg) *.mpg Title Cari Video

29. Tambahkan ADOQuery1 dari tab ADO, atur property seperti table di bawah ini :

Komponen Tab Parent Property Value

ADOQuery1 ADO FMember Connection FUtama.ADOConnection1 Datasource DataSource1

Name qTransaksi

SQL Select Pinjam.TglPinjam, Pinjam.MemberID,

(Select Member.Nama From Member Where Pinjam.MemberID = Member.MemberID) as

NamaMember,

DPinjam.TglHarusKembali, (Select Kembali.TglKembali From Kembali Where DPinjam.KembaliID = Kembali.KembaliID) as

TglKembali

From Pinjam, DPinjam Where

(Pinjam.PinjamID = DPinjam.PinjamID) and

(DPinjam.KoleksiID = :KoleksiID) Order by Pinjam.TglPinjam

30. Pilih qTransaksi pada Object TreeView, klik tombol ellipsis pada property Parameters untuk membuka jendela Edit Parameters, pilih KoleksiID, ubah property seperti table di bawah ini :

Komponen Property Value TParameters[0] DataType ftInteger

31. Buat persistent field untuk query qTransaksi, klik dua kali qTransaksi pada Object TreeView untuk membuka field editor, kemudian klik kanan pada field editor dan pilih Add All Fields.

32. Tambahkan Datasource2 dari tab Data Access, ubah property seperti table di bawah ini :

Komponen Tab Parent Property Value Datasource2 Data Access FMember Dataset qTransaksi 33. Atur layout form FKoleksi seperti gambar di bawah ini :

34. Tambahkan variable KoleksiID dengan type Integer pada blok Public di unit UFKoleksi, lihat gambar berikut :

35. Pilih FKoleksi pada Object TreeView, buat event onCreate, OnShow dan OnClose, ketikkan perintah seperti table di bawah ini :

Komponen Event Code

FKoleksi onCreate procedure TFKoleksi.FormCreate(Sender: TObject); begin

KoleksiID := 0;

PageControl1.ActivePageIndex := 0; end;

onShow procedure TFKoleksi.FormShow(Sender: TObject); begin

Koleksi.Open; Karyawan.Open; Pemasok.Open; qTransaksi.Open;

If KoleksiID > 0 then Koleksi.Locate('KoleksiID', KoleksiID, []) else Koleksi.Insert;

Komponen Event Code

onClose procedure TFKoleksi.FormClose(Sender: TObject; var Action: TCloseAction); begin KoleksiID := 0; qTransaksi.Close; Karyawan.Close; Pemasok.Close; Koleksi.Close; MediaPlayer1.Close; end;

36. Pilih SpeedButton1, SpeedButton2 dan SpeedButton3 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini :

Komponen Event Code SpeedButton1,

SpeedButton2, SpeedButton3

onClick procedure TFKoleksi.SpeedButton1Click(Sender: TObject); begin

Case (Sender as TSpeedButton).Tag of 1 : Koleksi.Post;

2 : Koleksi.Delete; 3 : Koleksi.Cancel; End;

If (Sender as TSpeedButton).Tag <> 1 then Close; end;

37. Pilih Koleksi pada Object TreeView, buat event AfterScroll, BeforeDelete, BeforePost dan onNewRecord, ketikkan perintah seperti table di bawah ini :

Komponen Event Code

Koleksi AfterScroll procedure TFKoleksi.KoleksiAfterScroll(DataSet: TDataSet); begin MediaPlayer1.Close; DateTimePicker1.Date := KoleksiTglBeli.Value; If FileExists(KoleksiPreview.Value) then Begin MediaPlayer1.FileName := KoleksiPreview.Value; MediaPlayer1.Open; MediaPlayer1.DisplayRect := Rect(10,10,Panel1.Width - 20, Panel1.Height - 20);

End Else MediaPlayer1.FileName := ''; end;

BeforeDelete procedure TFKoleksi.KoleksiBeforeDelete(DataSet: TDataSet); begin

If MessageDlg('Hapus data?',mtConfirmation, [mbYes, mbNo], 0) = mrNo

then Abort; end;

BeforePost procedure TFKoleksi.KoleksiBeforePost(DataSet: TDataSet); begin

Komponen Event Code

onNewRecord procedure TFKoleksi.KoleksiNewRecord(DataSet: TDataSet); begin

If DBEdit2.Enabled then ActiveControl := DBEdit2; KoleksiTglBeli.Value := Now; DateTimePicker1.Date := KoleksiTglBeli.Value; KoleksiHargaBeli.Value := 0; KoleksiLamaSewa.Value := 2; KoleksiHargaSewa.Value := 3000; KoleksiHargaDenda.Value := 3000; KoleksiJumlah.Value := 1; KoleksiKaryawanID.Value := FUtama.KaryawanID; end;

38. Pilih Datasource1 pada Object TreeView, buat event onStateChange, ketikkan perintah seperti table di bawah ini :

Komponen Event Code

DataSource1 onStateChange procedure TFKoleksi.DataSource1StateChange(Sender: TObject); begin

SpeedButton1.Enabled := (Koleksi.State in dsEditModes) and (FUtama.HakAkses in [1,2]); SpeedButton2.Enabled := (Koleksi.State in [dsBrowse]) and (FUtama.HakAkses in [1,2]); DBEdit2.Enabled := FUtama.HakAkses in [1,2]; DBCombobox1.Enabled := FUtama.HakAkses in [1,2]; DBCombobox2.Enabled := FUtama.HakAkses in [1,2]; DateTimePicker1.Enabled := FUtama.HakAkses in [1,2]; DBEdit3.Enabled := FUtama.HakAkses in [1,2]; DBEdit4.Enabled := FUtama.HakAkses in [1,2]; DBLookUpCombobox1.Enabled := FUtama.HakAkses in [1,2]; DBEdit5.Enabled := FUtama.HakAkses in [1,2]; DBEdit6.Enabled := FUtama.HakAkses in [1,2]; DBEdit7.Enabled := FUtama.HakAkses in [1,2]; DBEdit8.Enabled := FUtama.HakAkses in [1,2]; DBEdit10.Enabled := FUtama.HakAkses in [1,2]; DBImage1.Enabled := FUtama.HakAkses in [1,2]; BitBtn1.Enabled := FUtama.HakAkses in [1,2]; BitBtn2.Enabled := FUtama.HakAkses in [1,2] end;

39. Pilih BitBtn1 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini :

Komponen Event Code

BitBtn1 onClick procedure TFKoleksi.BitBtn1Click(Sender: TObject); begin

With OpenPictureDialog1 do Begin

If Execute then Begin

If Koleksi.State in [dsBrowse] then Koleksi.Edit; DBImage1.Picture.LoadFromFile(FileName); End;

Komponen Event Code end;

40. Pilih BitBtn2 pada Object TreeView, buat event onClick, ketikkan perintah seperti table di bawah ini :

Komponen Event Code

BitBtn2 onClick procedure TFKoleksi.BitBtn2Click(Sender: TObject); begin

With OpenDialog1 do Begin

If Execute then Begin

If Koleksi.State in [dsBrowse] then Koleksi.Edit; KoleksiPreview.Value := FileName; MediaPlayer1.FileName := FileName; MediaPlayer1.Open; MediaPlayer1.DisplayRect := Rect(10, 10, Panel1.Width - 20, Panel1.Height - 20); End; End; end;

41. Pilih TabSheet2 pada Object TreeView.

42. Tambahkan DBGrid1 dari tab Data Control ke dalam TabSheet2, ubah property seperti table di bawah ini :

Komponen Tab Parent Property Value DBGrid1 Data Control TabSheet2 Align alClient

Datasource DataSource2

43. Klik dua kali DBGrid1 pada Object TreeView untuk membuka Column Editor. Klik kanan pada Column Editor, pilih Add All Fields. Atur property masing-masing kolom seperti table di bawah ini :

Komponen Property Value

DBGrid1.Columns[0] Title.Alignment taCenter Title.Caption Tgl Pinjam Title.Font.Style.fsBold True

Width 100

DBGrid1.Columns[1] Title.Alignment taCenter Title.Caption #Member Title.Font.Style.fsBold True

Width 60

DBGrid1.Columns[2] Title.Alignment taCenter Title.Caption Nama Member Title.Font.Style.fsBold True

Width 250

DBGrid1.Columns[3] Title.Alignment taCenter

Title.Caption Tgl Harus Kembali Title.Font.Style.fsBold True

Komponen Property Value Title.Caption Tgl Kembali Title.Font.Style.fsBold True

Width 100

44. Pada tahap ini seharusnya FKoleksi mempunyai tampilan seperti gambar di bawah ini :

45. Kembali ke form FUtama, klik menu View – Form, pilih FUtama, klik OK untuk melanjutkan.

46. Klik menu File – Use Unit, pilih FKoleksi, klik OK untuk melanjutkan. 47. Pilih Koleksi1 pada Object TreeView, buat event onClick, ketikkan

perintah seperti table di bawah ini : Komponen Event Code

Koleksi1 onClick procedure TFUtama.Koleksi1Click(Sender: TObject); begin

FKoleksi.ShowModal; end;

48. Pilih SpeedButton2 pada Object TreeView, buat event OnClick, ketikkan perintah seperti table di bawah ini :

Komponen Event Code

SpeedButton2 onClick procedure TFUtama.SpeedButton2Click(Sender: TObject); begin

FKoleksi.ShowModal; end;

Dalam dokumen MODUL KULIAH PEMROGRAMAN VISUAL 1 (Halaman 122-133)