Aplikasi berikut ini merupakan implementasi beberapa
fungsi grafik yang ada dalam Delphi seperti penggunaan Pen
dan Brush untuk menggambar bentuk-bentuk dasar. Aplikasi
terdiri dari 3 buah form, Form1 dalam bentuk MDI sebagai
form utama, Form2 untuk menampilkan image atau
menggambar bentuk-bentuk dasar dan Form3 untuk
menampilkan demo Random Shape.
Langkah-langkah :
1. Buat aplikasi baru, klik File – New – Application.
2. Pilih Form1 pada Object TreeView, Ubah property seperti pada table di bawah ini :
Komponen Tab Parent Property Value
Form1 Caption Image Viewer
FormStyle fsMDIForm WindowState wsMaximized 3. Tambahkan StatusBar1 dari tab Win32.
4. Tambahkan MainMenu1 dari tab Standard. Klik dua kali MainMenu1 untuk membuka menu editor. Buat mainmenu dengan struktur seperti di bawah ini :
Menu SubMenu Property Value
File Caption &File
New Picture Caption &New Picture… ShortCut Ctrl+N
Open Picture Caption &Open Picture… Shortcut Ctrl+O
--- Caption - Exit Caption E&xit
Demo Caption &Demo
Random Shapes Caption &Random Shapes…
Windows Caption &windows
Cascade Caption &Cascade Tile Vertical Caption Tile &Vertical… Tile Horizontal Caption Tile &Horizontal
5. Tambahkan OpenPictureDialog1 dari tab Dialogs, ubah property seperti pada table di bawah ini :
Komponen Tab Parent Property Value OpenPictureDialog1 Dialogs Form1 Title Open Picture
6. Pada tahap ini seharusnya Form1 mempunyai layout seperti gambar di bawah ini :
7. Klik menu File – Save All, untuk menyimpan Project1 dan Unit1. 8. Buat form baru (Form2), klik menu File – New – Form.
9. Pilih Form2 pada Object TreeView, ubah property seperti pada table di bawah ini :
Komponen Tab Parent Property Value
Form2 Caption
FormStyle fsMDIChild WindowState wsMaximized 10. Tambahkan 3 buah Toolbar dari tab Win32.
11. Tambahkan 1 buah StatusBar dari tab Win32. Klik dua kali StatusBar1 untuk membuka jendela Panel Editor, klik kanan pada area kosong Panel Editor, pilih Add untuk menambahkan panel baru. Tambahkan 3 buah panel (lihat gambar berikut).
Ubah property masing-masing panel seperti pada table dibawah ini : Komponen Property Value
StatusBar1.Panels[0] Text Dimensi : Width 150 StatusBar1.Panels[1] Text Posisi :
Width 150 StatusBar1.Panels[2] Text Ukuran :
Width 150
12. Tambahkan 5 buah SpeedButton dari tab Additional ke dalam ToolBar1, ubah property seperti pada table di bawah ini :
Komponen Parent Property Value SpeedButton1 ToolBar1 Glyph Save.bmp SpeedButton2 ToolBar1 Glyph Rectangle.bmp SpeedButton3 ToolBar1 Glyph RoundRect.bmp SpeedButton4 ToolBar1 Glyph Ellipse.bmp SpeedButton5 ToolBar1 Glyph Lines.bmp SpeedButton1, SpeedButton2, SpeedButton3, SpeedButton4, SpeedButton5 Flat True SpeedButton2, SpeedButton3, SpeedButton4, SpeedButton5 GroupIndex 1
SpeedButton2 Down True
13. Tambahkan ColorBox1 dari tab Additional ke dalam ToolBar2, ubah property seperti pada table di bawah ini :
Komponen Parent Property Value ColorBox1 ToolBar2 Selected clBlack
14. Tambahkan 2 buah Combobox dari tab Standard ke dalam ToolBar2, ubah property seperti table di bawah ini :
Komponen Parent Property Value Combobox1 ToolBar2 Items psSolid
psDash psDot psDashColor psDashDotDot psClear psInsideFrame ItemIndex 0 Style csOwnerDrawVariable Combobox2 ToolBar2 Items pmBlack
pmWhite pmNop pmNot pmCopy pmNotCopy pmMergePenNot pmMaskPenNot pmMergeNotPen pmMaskNotPen pmMerge pmNotMerge pmMask
Komponen Parent Property Value pmXOR pmNotXOR Style csDropDownList ItemIndex 4
15. Tambahkan SpinEdit1 dari tab Samples ke dalam ToolBar2, ubah property seperti table di bawah ini :
Komponen Parent Property Value SpinEdit1 ToolBar2 MaxValue 10
MinValue 1
16. Tambahkan ColorBox2 dari tab Additional ke dalam ToolBar3, ubah property seperti table di bawah ini :
Komponen Parent Property Value ColorBox1 ToolBar2 Selected clRed
17. Tambahkan Combobox3 dari tab Additional ke dalam ToolBar3, ubah property seperti table di bawah ini :
Komponen Parent Property Value Combobox1 ToolBar2 Items bsSolid
bsClear bsHorizontal bsVertical bsBDiagonal bsCross bsDiagCross Style csDropDownList ItemIndex 0
18. Tambahkan ScrollBox1 dari tab Additional ke Form2, ubah property seperti table di bawah ini :
Komponen Parent Property Value ScrollBox1 Form2 Align alClient
19. Tambahkan Image1 dari tab Additional ke dalam ScrollBox1, ubah property seperti table di bawah ini :
Komponen Parent Property Value Image1 ScrollBox1 Align alClient
20. Tambahkan SavePictureDialog1 dari tab Dialogs ke Form2, ubah property seperti table di bawah ini :
Komponen Parent Property Value SavePictureDialog1 Form2 Title Save Picture
21. Pada tahap ini seharusnya Form2 mempunyai layout seperti gambar di bawah ini :
22. Pilih Combobox1 pada Object TreeView, buat event OnDrawItem, ketikkan perintah seperti table di bawah ini :
Komponen Event Code
Combobox1 onDrawItem procedure TForm2.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
Rect: TRect; State: TOwnerDrawState); begin With Combobox1.Canvas do Begin Pen.Color := ColorBox1.Selected; Pen.Style := TPenStyle(Index); MoveTo(Rect.Left + 1, Rect.Top + 5); LineTo(50, Rect.Top + 5);
TextOut(60, Rect.Top + 1, Combobox1.Items[Index]); End;
end;
23. Pilih SpeedButton1 pada Object TreeView, buat event OnClick, ketikkan perintah seperti table di bawah ini ;
Komponen Event Code
SpeedButton1 onClick procedure TForm2.SpeedButton1Click(Sender: TObject); begin SavePictureDialog1.FileName := Caption; If SavePictureDialog1.Execute then Begin Image1.Picture.SaveToFile(SavePictureDialog1.FileName); Caption := SavePictureDialog1.FileName; End; end;
24. Pilih Form2 pada Object TreeView, buat event onClose, OnCloseQuery dan onShow, ketikkan perintah seperti table di bawah ini :
Komponen Event Code
Form2 OnClose procedure TForm2.FormClose(Sender: TObject; var Action: TCloseAction);
begin
Action := caFree; end;
OnCloseQuery procedure TForm2.FormCloseQuery(Sender: TObject; var CanClose: Boolean);
begin
If Caption = 'Untitled.txt' then SpeedButton1Click(self) else
Begin
If Image1.Picture.Graphic is TBitmap then Case MessageDlg('Simpan?', mtConfirmation, mbYesNoCancel, 0) of mrYes : SpeedButton1Click(Self); mrNo : CanClose := True; mrCancel : CanClose := False; End;
End; end;
onShow procedure TForm2.FormShow(Sender: TObject); begin StatusBar1.Panels[0].Text := 'Dimensi : ' + inttostr(Image1.Width) + ' x ' + inttostr(Image1.Height); end;
25. Tambahkan Variabel SP dan CP dengan type data TPoint pada blok Private, lihat gambar berikut :
26. Buat Procedure DrawShape pada blok Private (lihat gambar di atas), tekan Ctrl+Shift+C untuk membuat blok procedure, ketikan perintah seperti table di bawah ini :
Komponen Procedure Code
Form2 DrawShape procedure TForm2.DrawShape; begin
Komponen Procedure Code
With Image1.Canvas do Begin
If SpeedButton2.Down then
Rectangle(SP.X, SP.Y, CP.X, CP.Y); If SpeedButton3.Down then
RoundRect(SP.X, SP.Y, CP.X, CP.Y, 30, 30); If SpeedButton4.Down then
Ellipse(SP.X, SP.Y, CP.X, CP.Y); If SpeedButton5.Down then Begin MoveTo(SP.X, SP.Y); LineTo(CP.X, CP.Y); End; End; end;
27. Pilih Image1 pada Object TreeView, buat event OnMouseDown, OnMouseMove dan OnMouseUp, ketikkan perintah seperti table di bawah ini :
Komponen Event Code
Image1 OnMouseDown procedure TForm2.Image1MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer); begin
If Image1.Picture.Graphic is TBitmap then With Image1.Canvas do Begin SP := Point(X, Y); CP := Point(X, Y); Pen.Width := 1; Pen.Style := psDot; Pen.Color := clBlack; Brush.Style := bsClear; Pen.Mode := pmNotXOR; DrawShape; End; end;
OnMouseMove procedure TForm2.Image1MouseMove(Sender: TObject; Shift: TShiftState; X,
Y: Integer); begin
If (Image1.Picture.Graphic is TBitmap) and SpeedButton2.Down or SpeedButton3.Down or SpeedButton4.Down or SpeedButton5.Down then Begin
If ssLeft in Shift then Begin DrawShape; CP := Point(X, Y); DrawShape; End; StatusBar1.Panels[2].Text := 'Ukuran : ' + inttostr(abs(CP.X - SP.X)) + ' x ' + inttostr(abs(CP.Y - SP.Y));
Komponen Event Code End;
StatusBar1.Panels[1].Text := 'Posisi : ' + inttostr(X) + ', ' + inttostr(Y); end;
OnMouseUp procedure TForm2.Image1MouseUp(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer); begin
If Image1.Picture.Graphic is TBitmap then With Image1.Canvas do Begin DrawShape; CP := Point(X, Y); Pen.Width := SpinEdit1.Value; Pen.Color := ColorBox1.Selected; Pen.Style := TPenStyle(Combobox1.ItemIndex); Pen.Mode := TPenMode(Combobox2.ItemIndex); Brush.Color := ColorBox2.Selected; Brush.Style := TBrushStyle(Combobox3.ItemIndex); DrawShape; End; end;
28. Klik menu File – Save All, untuk menyimpan Project dan seluruh Unit. 29. Klik menu File – New – Form, untuk membuat form baru (Form3).
30. Pilih Form3 pada Object TreeView, ubah property seperti table di bawah ini ;
Komponen Parent Property Value
Form3 Caption Random Shapes
FormStyle fsMDIChild WindowState wsMaximized
31. Tambahkan PaintBox1 dan Timer1 dari tab System, ubah property seperti table di bawah ini :
Komponen Parent Property Value PaintBox1 Form3 Align alClient
Timer1 Form3 Interval 10
32. Pada tahap ini seharusnya Form3 mempunyai layout seperti gambar di bawah ini :
33. Buat variable PosX, PosY, Panjang, Lebar, dan shape dengan type data Integer pada blok Private, lihat gambar berikut :
34. Pilih Form3 pada Object TreeView, buat event OnClose dan OnCreate, ketikkan perintah seperti table di bawah ini :
Komponen Event Code
Form OnClose procedure TForm3.FormClose(Sender: TObject; var Action: TCloseAction);
begin
Action := caFree; end;
OnCreate procedure TForm3.FormCreate(Sender: TObject); begin
Randomize; end;
35. Pilih Timer1 pada Object TreeView, buat event OnTimer, ketikkan perintah seperti table di bawah ini :
Komponen Event Code
Timer1 OnTimer procedure TForm3.Timer1Timer(Sender: TObject); begin
With PaintBox1.Canvas do Begin
Pen.Width := Random(5);
Pen.Mode := TPenMode(Random(15));
Pen.Color := RGB(Random(255), Random(255), Random(255));
Komponen Event Code Random(255)); Shape := Random(3); PosX := Random(Width); PosY := Random(Height); Panjang := Random(200)+ 50; Lebar := Random(200) + 50; Case Shape of
0 : Rectangle(PosX, PosY, PosX + Panjang, PosY + Lebar); 1 : RoundRect(PosX, PosY, PosX + Panjang, PosY + Lebar, Random(30), Random(30));
2 : Ellipse(PosX, PosY, PosX + Panjang, PosY + Lebar); End;
End; end;
36. Klik menu File – Save All untuk menyimpan Project dan seluruh Unit. 37. Kembali ke Form1. Klik menu View – Forms, pilih Form1, klik OK untuk
melanjutkan.
38. Klik File – Use unit, pilih Unit2 dan Unit3, klik OK untuk melanjutkan. 39. Buat event OnClick untuk tiap menuitem, ketikkan perintah seperti
table di bawah ini : Komponen Event Code
NewPicture1 OnClick procedure TForm1.NewPicture1Click(Sender: TObject); begin
Application.CreateForm(TForm2, Form2); Form2.Caption := 'Untitled.bmp';
end;
OpenPicture1 OnClick procedure TForm1.OpenPicture1Click(Sender: TObject); begin If OpenPictureDialog1.Execute then With Form2 do Begin Application.CreateForm(TForm2, Form2); Caption := OpenPictureDialog1.FileName; With Image1 do Begin Picture.LoadFromFile(OpenPictureDialog1.FileName); Align := alNone; End; End; end;
Exit1 OnClick procedure TForm1.Keluar1Click(Sender: TObject); begin
Close; end;
RandomShape1 OnClick procedure TForm1.RandomShapes1Click(Sender: TObject); begin
Application.CreateForm(TForm3, Form3); end;
Cascade1 OnClick procedure TForm1.Cascade1Click(Sender: TObject); begin
Cascade; end;
Komponen Event Code
TileVertical1 OnClick procedure TForm1.ileVertically1Click(Sender: TObject); begin
TileMode := tbVertical; Tile;
end;
TileHorizontal1 OnClick procedure TForm1.ileHorizontally1Click(Sender: TObject); begin
TileMode := tbHorizontal; Tile;
end;
40. Klik File – Save All untuk menyimpan Project dan seluruh Unit. 41. Uji dan jalankan aplikasi.
PROYEK SISTEM INFORMASI
RENTAL VCD/DVD
Proyek ini merupakan tugas akhir semester 3 yang akan dijadikan salah
satu komponen nilai akhir semester matakuliah Pemrograman Visual 1.
Kebutuhan Fungsional :
1. Member
- Member dapat melakukan pencarian koleksi dan membaca informasi atau melihat preview koleksi film.
- Member yang terdaftar dapat melihat histori transaksi yang pernah dilakukannya.
2. Karyawan
- Karyawan bisa melakukan login ke dalam aplikasi.
- Karyawan dapat memasukkan transaksi peminjaman dan pengembalian koleksi.
- Karyawan dapat melihat laporan transaksi harian. - Karyawan dapat melakukan manajemen data member. - Karyawan dapat melakukan manajemen data koleksi. - Karyawan dapat melakukan pencarian data koleksi - Karyawan dapat melakukan pencarian data member. - Karyawan dapat melihat histori transaksi member. 3. Pemilik/Administrator
- Pemilik/Administrator dapat melakukan login ke aplikasi.
- Pemilik/Administrator dapat melihat laporan transaksi per periode. - Pemilik/Administrator dapat melakukan manajemen data Karyawan,
Koleksi dan Member
- Pemilik/Administrator dapat melihat laporan pendapatan.
Matriks Penggunaan Form
Form Unit Fungsi
Pengguna
Member Karyawan Pemilik / Admin
FUtama UFUtama Form Utama Ya Ya Ya
FLogin UFLogin Login Tidak Ya Ya
FSetup UFSetup Setup Tidak Tidak Ya
FMember UFMember Data Pelanggan Ya, View Only
Ya Ya
FKoleksi UFKoleksi Data Koleksi Ya, View Only
Ya Ya
FPemasok UFPemasok Data Pemasok Tidak Tidak Ya
FKaryawan UFKaryawan Data Karyawan Tidak Tidak Ya
FPinjam UFPinjam Transaksi Peminjaman
Tidak Ya Ya
Form Unit Fungsi
Pengguna
Member Karyawan Pemilik / Admin Pengembalian
FDMember UFDMember Daftar Pelanggan Ya Ya Ya
FDKoleksi UFDKoleksi Daftar Koleksi Ya Ya Ya
FLPinjam UFLPinjam Laporan Transaksi Peminjaman
Tidak Ya, Terbatas
Ya FLKembali UFLKembali Laporan Transaksi
Pengembalian
Tidak Ya, Terbatas
Ya FLKoleksi UFLKoleksi Laporan Koleksi
belum Kembali
Tidak Ya Ya
FLPendapatan UFLPendapatan Laporan Pendapatan Tidak Tidak Ya
FStatistik UFLStatistik Statistik Ya Ya Ya
FAbout UFAbout About Ya Ya Ya