SlideShare a Scribd company logo
Graphical User Interface 1
BAB I
PENDAHULUAN
A. Definisi GUI
Pengertian GUI adalah Graphical User Interface dalam dunia
komputer. Pada komputer terdapat GUI atau antarmuka pengguna secara
grafis. Istilah ini bukan hal yang lumrah pada saat awal kemunculan
komputer. Namun setelah komputer generasi keempat mulai diciptakan,
munculnya televisi berwarna yang mendorong pada penciptaan layar monitor
berwarna serta evolusi pada perangkat penampil gambar (graphic adapter
atau graphic card atau video card) membuat komputer mulai mendapatkan
suatu sistem baru.
Secara sederhana, GUI adalah suatu media virtual yang dapat
membuat pengguna memberikan perintah tertentu pada komputer tanpa
mengetik perintah tersebut, namun menggunakan gambar yang tersedia.
Pengguna tidak mengetikkan perintah seperti pada komputer dengan Shell
atau teks. Dengan GUI, perintah dapat dikonversi menjadi ikon dalam layar
monitor yang dapat diklik untuk memulai fungsinya.
B. Sejarah GUI
Pada awal diciptakannya, komputer dijalankan dengan menggunakan
perintah yang diketik pada layar monitor menggunakan keyboard. Hal ini
berlaku untuk semua program ataupun perintah-perintah tertentu yang
berhubungan dengan sistem informasi. Hal ini tentu saja dirasa tidak praktis
dan kurang canggih. Selain itu hanya orang-orang tertentu saja yang bisa
mengoperasikannya. Oleh karena itu para ahli terdorong untuk dapat
menciptakan sesuatu yang dapat digunakan oleh orang kebanyakan dengan
cara yang praktis dan mudah diingat.
Akhirnya lahirlah yang disebut dengan GUI atau Graphical User
Interface. GUI adalah seperangkat aplikasi yang menampilkan semua menu,
ikon dan alat penunjuk lainnya yang menggantikan perintah ketik di shell.
Graphical User Interface 2
Hal ini membuat pengguna komputer menjadi lebih mudah mengoperasikan
sebuah perangkat daripada mengingat perintah yang menggunakan teks pada
sebuah kotak komando tertentu. Hal ini didasarkan bahwa manusia lebih
mudah mengingat gambar dibanding tulisan. GUI pertama kali digunakan
dalam komputer yang diproduksi oleh Apple yakni Machintosh dengan Steve
Jobs sebagai penggagasnya. Namun belakangan sistem operasi lain
mengikutinya, seperti misalnya Microsoft dengan GUI Windows-nya yang
menjadi tren setter penggunaan start menu dan taskbar.
C. Menu View
Menu View berisi perintah yang digunakan untuk menampilkan atau
menyembunyikan jendela–jendela tertentu dalam Delphi 7.
Submenu Fungsi
Project Manager Menampilkan kotak dialog project manager yang
digunakan untuk mengelola struktur hirarki dari
suatu project
Object Inspector Menampilkan jendela object inspector yang
digunakan untuk mengubah nilai properti dan
membuka events procedure komponen–komponen
yang digunakan dalam form
Object TreeView Menampilkan jendela objet tree view yang digunakan
untuk menampilkan diagram pohon objek yang
terdapat dalam form
Aligment Palette Menampilkan toolbar align yang berisi tombol
perintah untuk mengatur perataaan komponen–
komponen yang terdapat dalam suatu form
To Do List Menampilkan item–item tugas yang dibutuhkan
untuk melengkapi pekerjaan dalam project yang
berlaku. Anda dapat mengurutkan item–item tersebut
sesuai dengan urutan abjad, status, atau berdasarkan
prioritas dengan mengklik kolom yang di sediakan
Browser Menampilkan kotak dialog project browser
Code Explorer Menampilkan kotak dialog code explorer
Component List Menampilkan kotak dialog komponen yang berisi
daftar nama komponen Delphi 7
Windows List Menampilkan daftar nama jendela yang sedang
dalam kondisi aktif yang dapat anda pilih
Additional
Message Info
Menampilkan kotak dialog Message Hints
Debug Windows Menampilkan kotak dialog Debug
Graphical User Interface 3
Desktops Menampilkan submenu Desktops yang berfungsi
untuk mengolah dekstops
Toggle form/unit Berpindah dari form designer ke code editor dan
sebaliknya
Units Menampilkan dan mengaktifkan daftar nama unit
yang terdapat dalam project
Forms Menampilkan dan mengaktifkan daftar nama form
yang terdapat dalam project
New edit Window Membuka jendela code editor baru
Toolbar Menampilkan daftar nama toolbar yang sedang
diaktifkan atau disembuyikan
Tabel 1.2 Menu View
D. Keutamaan dan Kekurangan GUI
GUI merupakan antarmuka pada sistem operasi komputer yang
menggunakan menu grafis. Adapun keutamaan dan kekurangan yang
dimiliki :
Tabel 1.3 Keutamaan dan Kekurangan GUI
Keutamaan GUI Kekurangan GUI
1. Desain Grafis lebih menarik. 1. Memakan memory yang sangat
besar.
2. GUI memungkinkan user untuk
berinteraksi dengan komputer
secara lebih baik.
2. Bergantung pada perangkat keras.
3. Memudahkan pengguna. 3. Membutuhkan banyak tempat pada
layar komputer.
4. Menarik minat pengguna. 4. Tidak fleksibel.
5. Resolusi gambar yang tinggi. 5. Membutuhkan proses lebih lama.
Graphical User Interface 4
BAB II
DESKRIPSI KERJA
Terdapat sebuah kasus yang harus diselesaikan oleh praktikan yaitu
membuat program aplikasi untuk melakukan operasi hitung pertambahan,
pengurangan, perkalian dan pembagiaN dengan kata lain membuat sebuah
kalkulator sederhana. Untuk menyelesaikan kasus tersebut, praktikan akan
menggunakan sistem media grafis GUI dengan Delphi 7. Adapun langkah-
langkah yang dilakukan oleh praktikan adalah sebagai berikut:
1. Arahkan pointer ke arah pojok kanan display PC (dalam pengoperasian
ini praktikkan menggunakan Windows 8), kemudian klik Search lalu
ketik“Delphi” di kotak pencarian tersebut. Lihat Gambar 2.1 berikut :
Gambar 2.1 Membuka Aplikasi Delphi 7
2. Maka akan muncul tampilan seperti Gambar 2.2 berikut :
Gambar 2.2 Lembar Kerja Borland Delphi 7
Graphical User Interface 5
3. Pada Object Inspector pada kolom properties di form, ubahlah berikut :
a. Border Icons (biMinimize = false, biMaximazie = false). Seperti
Gambar 2.3 berikut :
Gambar 2.3 Border Icons pada Object Inspector
b. Dari Position = poDesigned Position = poScreenCenter.
Lihat Gambar 2.5 dibawah :
Gambar 2.4 Merubah position pada properties
4. Tambahkan 11 buah komponen Label, 9 buah komponen Edit pada
komponen pallete standard. Tampak seperti Gambar 2.5 dibawah ini :
Gambar 2.5 Komponen Label dan Edit
Label Edit
Graphical User Interface 6
5. Tambahkan juga 1 buah komponen BitBtn dan 1 buah komponen
speedbutton pada komponen pallete Additional. Lihat Gambar 2.6
dibawah ini :
Gambar 2.6 Komponen BitBtn dan SpeedButton
6. Setelah semua komponen yang dibutuhkan diaktifkan maka akan
ditampilkan dalam Object TreeView. Lihat Gambar 2.7 dibawah ini :
Gambar 2.7 Tampilan semua komponen yang diaktifkan
7. Aturlah posisi komponen-komponen yang ada pada form seperti
Gambar 2.8 dibawah ini :
Gambar 2.8 Posisi pada form
BitBtn dan SpeedButton
Edit
Speedbutton
Label
BitBt
n
Graphical User Interface 7
8. Ubah caption pada Label di properties, Label1= “Angka Ke-1”, Label2=
“Angka Ke-2”, Label3=“Angka Ke-3”, Label4= “Angka Ke-4”, Label5=
“Angka Ke-5”, Label6= “+”, Label7= “-“, Label8= “x”, Label9= “/”,
Label10=“Operasi Perhitungan Matematika”, dan terakhir untuk
Label11= “Kalkulator Shofura”.
9. Pada BitBtn ubah properties Kind pada Object Inspector menjadi
bkCancel dan ubah properties caption menjadi “Hitung”. Lihat Gambar
2.9 dibawah ini :
Gambar 2.9 Merubah nilai properties BitBtn
10. Pada speedbutton ubah properties Flat pada Object Inspector = True dan
ubah Caption = Tutup dan layout=blGlyphRight, untuk mengambil
gambar yang akan diletakkan, klik properties Glyph dan klik tombol L
ad. Gambar tersebut di directory: “System:C/Program Files/Common
Files/Borland Shared/Images/Button”.Lihat Gambar 2.10 dibawah ini:
Gambar 2.10 Merubah nilai properties speedbutton
Graphical User Interface 8
11. Setelah semua komponen proses dipenuhi dari nomor 3 sampai dengan
nomor 10, maka akan terlihat tampilan seperti dibawah ini :
Gambar 2.11 Tampilan pada form
12. Double-click pada Form dan tulis kode seperti dibawah ini :
Gambar 2.12 Kode program event procedure FormCreate
Graphical User Interface 9
13. Klik komponen “Edit1” pada form, kemudian klik events pada Object
Inspector. Cari instruksi OnKeyPress dan double-click instruksi tersebut.
Lakukan instruksi yang sama hingga Edit6. Lihat Gambar 2.13
dibawah ini :
Gambar 2.13 Komponen Evenst OnKeyPress pada Edit
14. Setelah mendouble-click OnKeyPress tadi, kemudian tuliskan kode
program untuk Edit seperti dibawah ini :
Gambar 2.14 Kode program untuk Edit
Graphical User Interface 10
15. Klik komponen BitBtn pada form, kemudian klik events pada Object
Inspector. Cari instruksi OnKeyPress dan double-click instruksi tersebut.
Lihat Gambar 2.15 dibawah ini :
Gambar 2.15 Komponen Events OnKeyPress pada BitBtn
16. Setelah mendouble-click OnKeyPress tadi, kemudian masukkan syntak
sesuai aplikasi yang akan dibuat seperti dibawah ini :
Gambar 2.16Syntak untuk aplikasi yang dibuat
17. Klik komponen speedbutton pada form, dan klik events pada Object
Inspector kemudian cari instruksi yaitu OnClick lalu double-click.
Lihat Gambar 2.17 dibawah ini :
Graphical User Interface 11
Gambar 2.17 Komponen Events OnClick pada SpeedButton
18. Setelah mendouble-click OnClick tadi, kemudian masukkan perintah
seperti dibawah ini :
Gambar 2.18 perintah untuk speedbutton
19. Tambahkan BitBtn pada Additional Palette. Kemudian ubah caption
menjadi “Reset” lalu Klik OnClick pada Events di Object Inspector.
Lihat Gambar 2.19 dibawah ini :
Gambar 2.19 Merubah nilai pada properties dan events
20. Dan tuliskan kode program untuk reset seperti Gambar 2.20 berikut :
Gambar 2.20 Kode program untuk reset
Graphical User Interface 12
21. Pada saat Anda memulai Delphi 7, code editor ini tidak kelihatan. Untuk
menampilkannya klik icon Toggle pada toolbar sehingga code editor
ditampilkan seperti Gambar 2.21 berikut :
Gambar 2.21 Keseluruhan komponen yang digunakan dalam program
22. Pada form properties Object Inspector, klik colour clMaroon
font Ms Sans Serif OK. Lihat Gambar 2.22dibawah ini :
Gambar 2.22 Proses Editing pada layar form
Graphical User Interface 13
23. Setelah meng-input-kan syntax langkah selanjutnya adalah penginputan
data dengan mengklik F9 pada keyboard atau klik Run pada Toolbar.
Gambar 2.23 Toolbar Run
24. Komputer akan menampilakan output dari syntak yang telah di-input-kan.
Gambar 2.24 Tampilan Hasil Running
25. Lalu masukkan data sesuai kebutuhan, setelah data dimasukkan maka
akan mendapatkan hasil seperti Gambar 2.25 berikut :
Gambar 2.25 Tampilan Output
Graphical User Interface 14
26. Untuk menyimpan aplikasi klik Save All lalu tulis nama untuk Unit1
klik pada kolom File name, misalnya Modu10_GUI lalu klik Save
seperti pada Gambar 2.6 dibawah ini :
Gambar 2.26 Menyimpan Unit1
27. Kemudian tulis nama untuk Project1 klik pada kolom File name,
misalnya PModu10_GUI lalu klik Save seperti pada gambar dibawah
ini :
Gambar 2.27 Menyimpan Project1
Graphical User Interface 15
BAB III
PEMBAHASAN
Dari hasil pemaparan deskripsi kerja pada bab II diatas, berikut adalah
bahasa program yang digunakan dalam Delphi 7 untuk membuat aplikasi
program operasi perhitungan matematika atau kalkulator sederhana pada
permasalahan di atas :
1. Form designer merupakan suatu objek yang dapat dipakai sebagai tempat
untuk merancang program aplikasi. Form berbentuk sebuah lembar kosong
yang dapat diisi dengan komponen-komponen yang diambil dari
Component Palette. Dalam sebuah form terdapat titik-titik yang disebut
grid yang berguna untuk membantu pengaturan tata letak objek yang
dipasang pada form. Pada saat praktikkan memulai Delphi, Delphi akan
memberikan sebuah form kosong yang diberi nama Form1, seperti pada
Gambar 3.1 di bawah ini :
Gambar 3.1 Form Kosong
2. Setiap komponen dan setiap form mempunyai sekumpulan properties
(seperti warna, ukuran, posisi, judul (caption) yang dapat dimodifikasi
pada IDE Delphi atau dalam kode program), dan sekumpulan event (seperti
klik mouse, penekanan tombol) dimana dapat menentukan beberapa
perilaku tambahan. Objek Inspector menampilkan properties dan event
untuk komponen yang sedang dipilih dan memperbolehkan praktikkan
Graphical User Interface 16
untuk mengganti nilai properti atau memilih respon terhadap suatu event
yang terjadi.
Gambar 3.2 Object Inspector
3. Komponen adalah blok-blok bagian yang akan membentuk suatu aplikasi
Delphi. Komponen-komponen tersebut dapat dilihat pada window
Component Palette. Untuk menempatkan sebuah komponen ke sebuah
windows, cukup dengan mengklik komponen dari component palette
kemudian mengklik lokasi tempat penempatan komponen tersebut di dalam
form. Setiap komponen mempunyai atribut tertentu yang memungkinkan
bagi praktikkan untuk mengatur aplikasi ketika waktu desain (design time)
atau waktu dijalankan (run time). Component palette dapat dilihat pada
gambar di bawah ini :
Gambar 3.3 Component Palette
Di bagian atas Object Inspector ada window Object TreeView.
Awalnya window ini hanya terdiri dari nama Form. Tetapi ketika anda
menambahkan sebuah komponen ke form tersebut, maka object baru
Graphical User Interface 17
tersebut akan terdaftar di dalam Object TreeView di bagian bawah form.
Object TreeView akan menampilkan diagram pohon yang mencerminkan
hubungan parent-child dari komponen-komponen. Seperti yang terlihat
pada Gambar 3.3 praktikkan menambahkan 9 Edit, 11 Label , 1 buah
speedbutton dan 1 buah BitBtn.
Gambar 3.3 Object TreeView
4. unit modul10_GUI;
interface
uses
Windows, Messages, SysUtils, Variants, Classes, Graphics,
Controls, Forms, Dialogs, StdCtrls, Buttons;
Nama file unit atau keseluruhan program adalah modul10_GUI.
Judul unit penting untuk dibuat karena dapat membedakan antara satu
program dengan program yang lainnya, serta untuk memudahkan praktikan
bila dicari sewaktu-waktu. Program selalu diikuti dengan nama unit yang
akan dibuat. Pada list program tertulis “modul10_GUI”.
Nama unit ditulis sesuai dengan keinginan praktikan. Praktikan
menuliskan nama program .Untuk mengakhiri nama unit, akhiri dengan
tanda titik koma (;), tanda titik koma akan terus digunakan dalam
menyelesaikan perintah pada setiap barisnya. Interface menunjukkan
program itu bersifat tatap muka.
Graphical User Interface 18
Sedangkan uses menandakan kata-kata yang dibawahnya adalah
sebuah pustaka atau library komponen yang digunakan. Bagian interface
(dimulai dengan antarmuka) memberitahu compiler apa bagian dari
modul tersedia untuk modul lain. Bagian ini daftar (setelah kata uses)
modul library yang digunakan oleh modul ini. Ada juga deskripsi bentuk
yang dibentuk oleh Delphi, yang mengikuti jenis kata.
5. type
TForm1 = class(TForm)
Label1: TLabel;
Label2: TLabel;
Label3: TLabel;
Label4: TLabel;
Label5: TLabel;
Label6: TLabel;
Label7: TLabel;
Label8: TLabel;
Label9: TLabel;
Edit1: TEdit;
Edit2: TEdit;
Edit3: TEdit;
Edit4: TEdit;
Edit5: TEdit;
Edit6: TEdit;
Edit7: TEdit;
Edit8: TEdit;
Edit9: TEdit;
SpeedButton1: TSpeedButton;
BitBtn1: TBitBtn;
Label10: TLabel;
Label11: TLabel;
BitBtn2: TBitBtn;
procedure Edit1KeyPress(Sender: TObject; var Key: Char);
procedure Edit2KeyPress(Sender: TObject; var Key: Char);
procedure Edit3KeyPress(Sender: TObject; var Key: Char);
procedure Edit4KeyPress(Sender: TObject; var Key: Char);
procedure Edit5KeyPress(Sender: TObject; var Key: Char);
Graphical User Interface 19
procedure FormCreate(Sender: TObject);
procedure BitBtn1Click(Sender: TObject);
procedure SpeedButton1Click(Sender: TObject);
procedure BitBtn2Click(Sender: TObject);
Pada bagian type menunjukkan komponen yang digunakan dan
prosedur yang digunakan untuk komponen pada unit. Procedure akan
otomatis keluar ketika sebuah action dipakai pada edit atau button atau
speedbutton dan lain-lain. Apabila salah satu pada type dihapus maka
program tak bisa dikompail.
6. private
{ Private declarations }
public
{ Public declarations }
end;
Pada private bermakna bagian untuk deklarasi yang bersifat
khusus.Pada public mengandung arti bahwa itu merupakan bagian untuk
deklarasi yang bersifat umum. Sedangkan “end;” merupakan akhir dari
program, namun tanda titik koma akan terus digunakan dalam
menyelesaikan perintah pada setiap barisnya.
7. var
Form1: TForm1;
implementation
{$R *.dfm}
Bagian mulai menerapkan direktif {$ R * DFM}, memberitahu
compiler bahwa proses menghasilkan file executable harus digunakan
untuk menggambarkan bentuk. Deskripsi bentuk adalah pada file dengan
ekstensi DFM, yang namanya sesuai dengan nama modul. File definisi
Form dihasilkan berdasarkan pada bentuk penampilan lingkungan Delphi.
Petunjuk {$ R * DFM} event prosedur berikut untuk bentuk dan
komponennya. Praktikkan dapat menempatkan prosedur yang sama dan
fungsi lainnya.
Graphical User Interface 20
8. procedure TForm1.Edit1KeyPress(Sender: TObject; var Key:
Char);
begin
if key=#13 then
Edit2.SetFocus;
end;
procedure TForm1.Edit2KeyPress(Sender: TObject; var Key:
Char);
begin
if key=#13 then
Edit3.SetFocus;
end;
procedure TForm1.Edit3KeyPress(Sender: TObject; var Key:
Char);
begin
if key=#13 then
Edit4.SetFocus;
end;
procedure TForm1.Edit4KeyPress(Sender: TObject; var Key:
Char);
begin
if key=#13 then
Edit5.SetFocus;
end;
procedure TForm1.Edit5KeyPress(Sender: TObject; var Key:
Char);
begin
if key=#13 then
Edit6.SetFocus;
end;
Syntak diatas memperlihatkan kode program untuk keseluruhan
Edit. Kode program adalah sederetan pernyataan-pernyataan atau
instruksi-instruksi untuk mengerjakan sesuatu, dan ditulis dalam code
editor atau unit, tepatnya pada bagian events procedure. Kode program ini
akan dikerjakan bila terjadi suatu events terhadap komponen. Sebelum
menulis kode program, maka events procedure harus dipanggil.Untuk
membuka events procedure, dalam kasus ini events yang terjadi adalah
OnKeyPress.
Bagian ini merupakan procedure yang digunakan dalam Edit 1.
“Edit1KeyPress” artinya ketika telah di_inputkan datanya dapat langsung
[1]
[2]
[3]
[4]
[5]
Graphical User Interface 21
di-Enter menuju kolom Edit selanjutnya. Parameter formal dalam
procedure kasus ini antara lain “sender” dengan tipe data “Tobject” dan
“key” dengan tipe data Char. Dalam kasus ini menggunakan pencabangan
if-then. Pencabangan if-then merupakan sebuah kondisi yang
menghasilkan nilai True jika benar dan False jika salah.
[1] Bagian ini memuat pencabangan if-then. “if key=#13 then”
meupakan pencabangan yang sudah ditetapkan”. “Edit2.SetFocus” artinya
ketika di kolom Edit1 nanti setelah di inputkan suatu data maka akan dapat
di-enter secara langsung dengan memfokuskan hanya pada Edit2. [2]
Bagian ini sama seperti sebelumnya “Edit3.SetFocus” artinya ketika di
kolom Edit2 nanti setelah di inputkan suatu data maka akan dapat di-enter
secara langsung dengan memfokuskan hanya pada Edit3.[3]
“Edit4.SetFocus” artinya ketika di kolom Edit3 nanti setelah di inputkan
suatu data maka akan dapat di-enter secara langsung dengan
memfokuskan hanya pada Edit4.
[4] Dalam “Edit5.SetFocus” artinya ketika di kolom Edit4 nanti
setelah di inputkan suatu data maka akan dapat di-enter secara langsung
dengan memfokuskan hanya pada Edit5.[5] “Edit6.SetFocus” artinya
ketika di kolom Edit5 nanti setelah di inputkan suatu data maka akan dapat
di-enter secara langsung dengan memfokuskan hanya pada Edit6.
5. procedure TForm1.FormCreate(Sender: TObject);
begin
Edit1.Text := '';
Edit2.Text := '';
Edit3.Text := '';
Edit4.Text := '';
Edit5.Text := '';
Edit6.Text := '';
Edit7.Text := '';
Edit8.Text := '';
Edit9.Text := '';
end;
Graphical User Interface 22
Pada program aplikasi diatas, bila double-click pada form dengan
menginputkan kode program diatas maka hasil yang diinginkan adalah
mengosongkan properti text komponen Edit1 hingga Edit9.
6. procedure TForm1.BitBtn1Click(Sender: TObject);
var
a, b, c, d, e, f, g, h, i : real;
begin
a:= StrToFloat(Edit1.Text);
b:= StrToFloat(Edit2.Text);
c:= StrToFloat(Edit3.Text);
d:= StrToFloat(Edit4.Text);
e:= StrToFloat(Edit5.Text);
f:= a+b+c+d+e;
g:= a-b-c-d-e;
h:= a*b*c*d*e;
i:= a/b/c/d/e;
Edit6.Text := FloatToStr (f);
Edit7.Text := FloatToStr (g);
Edit8.Text := FloatToStr (h);
Edit9.Text := FloatToStr (i);
end;
Gambar 3.7 Syntak operasi penjumlahan,pengurangan,pekalian dan
pembagian
Pada program aplikasi diatas, bila double-click pada BitBtn maka
yang akan muncul adalah procedure untuk BitBtn.[1] Var digunakan untuk
mendeklarasikan semua simbol yang akan terus digunakan pada program
yang ingin dibuat. Untuk a mendeklarasikan “Angka Ke-1”, b= “Angka
Ke-2”, c=”Angka Ke-3”, d=”Angka Ke-4”, e=”Angka Ke-5”,
f=”Penjumlahan”, g=”Pengurangan”, h=”Perkalian” dan i=”pembagian”.
[2] Pada bagian diatas terdapat fungsi StrToFloat. Setiap data yang
kita masukkan bertipe data string. Dengan fungsi StrToFloat akan
digunakan untuk mengubah data tipe string (teks) menjadi real. Untuk a
hingga e itu akan didefinisikan di Edit1 hingga Edit5. [3] Bagian ini
[1]
[2]
[3]
[4]
Graphical User Interface 23
merupakan syntak untuk operasi perhitungan. Variabel “f” merupakan
hasil penjumlahan, Variabel “g” merupakan hasil pengurangan, variabel “h”
merupakan hasil perkalian dan variabel “i” merupakan hasil pembagian.
[4] Pada bagian rumus diatas “Edit6.Text” hingga “Edit9.Text”
terdapat pernyataan Fungsi FloatToStr yang digunakan untuk mengubah
data tipe real menjadi string.”Edit6.Text” hingga “Edit9.Text” digunakan
untuk menampilkan hasil dari penjumlahan hingga pembagian. Variabel “f”
yang merupakan hasil penjumlahan maka hasilnya akan ditampilkan di
Edit6, untuk variabel “g” yang merupakan hasil pengurangan maka
hasilnya akan ditampilkan di Edit7, untuk variabel “h” yang merupakan
hasil perkalian maka hasilnya akan ditampilkan di Edit8 dan variabel “i”
yang merupakan hasil pembagian maka hasilnya akan di tampilkan di
Edit9.
8. Langkah selanjutnya adalah menjalankan program dengan mengklik F9
pada keyboard atau klik Run pada Toolbar.
Gambar 3.8 Toolbar Run
Menu Run digunakan untuk menjalankan program dan melihat
jalannya program. Praktikan juga dapat memantau jalannya program
dengan memperhatikan prosedur yang dijalankan. Run atau F9 berfungsi
untuk mengkompilasi dan menjalankan program aplikasi yang telah
praktikan buat.
Jika muncul lembar kerja hitam pada layar maka artinya
perhitungan yang praktikan lakukan benar. Namun jika setelah menekan
tombol F9 dan ternyata terdapat blok merah pada baris tertentu, itu artinya
ada kesalahan dalam meng-input data. Setelah mengisikan data yang ingin
dicari, maka akan muncul hasil yang diinginkan. Lihat gambar dibawah
ini :
Graphical User Interface 24
Gambar 3.9 Tampilan Output Lengkapnya
Graphical User Interface 25
BAB IV
PENUTUP
Setelah praktikan melakukan praktikum untuk menyelesaikan suatu kasus
menggunakan program Delphi 7 dalam membuat suatu aplikasi menggunakan
GUI maka praktikan mendapatkan kesimpulan sebagai berikut :
1. GUI (Graphical User Interface) merupakan suatu komponen penting di dalam
aplikasi komputer modern.
2. GUI dapat memudahkan pengguna ketika menggunakan aplikasi, selain itu
GUI juga berfungsi untuk menambah nilai estetika suatu aplikasi.
3. Di zaman sekarang ini tidak ada multimedia interaktif tanpa GUI.
4. Sebagai user tidak boleh mengubah yang ada di dalam type karena segala yang
telah ada didalam type adalah sesuatu yang otomatis disediakan Delphi 7. Dan
apabila diganti dapat menyebabkan gagalnya suatu program.
5. Delphi mendefinisikan sejumlah event pada setiap komponennya.
6. Membuat kalkulator sederhana dengan menggunakan Delphi 7, lebih mudah,
cepat, efektif, dan efisien karena fitur yang disediakan cukup lengkap.

More Related Content

PPTX
Transformasi linier " Matematika Geodesi "
PPS
Fungsi Vektor ( Kalkulus 2 )
PPT
03 limit dan kekontinuan
PPT
Bilangan kompleks lengkap
PPTX
Modul 7 basis dan dimensi
PPT
Metode numerik persamaan non linier
PPTX
Matematika Diskrit Relasi Rekursif
PPTX
Transformasi Laplace (bag.1)
Transformasi linier " Matematika Geodesi "
Fungsi Vektor ( Kalkulus 2 )
03 limit dan kekontinuan
Bilangan kompleks lengkap
Modul 7 basis dan dimensi
Metode numerik persamaan non linier
Matematika Diskrit Relasi Rekursif
Transformasi Laplace (bag.1)

What's hot (20)

PPTX
PPTX
Ruang Vektor ( Aljabar Linear Elementer )
DOCX
Peubah acak diskrit dan kontinu
PPTX
4 Menggambar Grafik Fungsi Dengan Matlab
PPTX
Modul 3 transformasi laplace
PPTX
Bilangan kompleks
PDF
Persamaandifferensial
PDF
Transformasi laplace
PPS
Bab 8. Fungsi Transenden ( Kalkulus 1 )
PDF
pewarnaan graf
DOCX
Metode simpleks dua fase
PDF
Analisis bab1 bab2
PPTX
Pertemuan 3 turunan dan aturan rantai
PPTX
Transformasi elementer
PPTX
Turunan numerik
PPT
Bab 2 perhitungan galat
PPTX
Materi 3 Finite State Automata
PPS
Fungsi Dua Peubah ( Kalkulus 2 )
DOCX
Makalah metode posisi palsu
PPT
5. rantai-markov-diskrit
Ruang Vektor ( Aljabar Linear Elementer )
Peubah acak diskrit dan kontinu
4 Menggambar Grafik Fungsi Dengan Matlab
Modul 3 transformasi laplace
Bilangan kompleks
Persamaandifferensial
Transformasi laplace
Bab 8. Fungsi Transenden ( Kalkulus 1 )
pewarnaan graf
Metode simpleks dua fase
Analisis bab1 bab2
Pertemuan 3 turunan dan aturan rantai
Transformasi elementer
Turunan numerik
Bab 2 perhitungan galat
Materi 3 Finite State Automata
Fungsi Dua Peubah ( Kalkulus 2 )
Makalah metode posisi palsu
5. rantai-markov-diskrit
Ad

Similar to Laporan Praktikum Algoritma Pemrograman Modul VI-GUI (20)

PDF
Penuntun imk informatika_2015
PPTX
Tampilan GUI di NetBeans.pptx
PDF
Modul 1 konsep dasar pemrograman delphi
PDF
PDF
Modul pemrograman-1-revisi
PDF
Delphi part 1.pdf
PPT
pertemuan-8 mahasiswhhhhhgggggggggga.ppt
PDF
modul-delphi-7.pdf
PDF
Membuat Sistem Informasi Penjualan Retail dengan SQL Server dan VB 6
PDF
PDF
Modul delphi 7
PDF
Modul delphi-7
PDF
9093 fd01
DOCX
Module Delphi
PPTX
IMK - Pertemuan 9 (GUI) Desain Grafis.pptx
DOC
20110323 modul1 vb
PPTX
Pelajaran GUI (Antarmuka Pengguna) Informatika Kelas 7.pptx
PDF
Modul delphi
PPT
ppt_IMK-design-interface
Penuntun imk informatika_2015
Tampilan GUI di NetBeans.pptx
Modul 1 konsep dasar pemrograman delphi
Modul pemrograman-1-revisi
Delphi part 1.pdf
pertemuan-8 mahasiswhhhhhgggggggggga.ppt
modul-delphi-7.pdf
Membuat Sistem Informasi Penjualan Retail dengan SQL Server dan VB 6
Modul delphi 7
Modul delphi-7
9093 fd01
Module Delphi
IMK - Pertemuan 9 (GUI) Desain Grafis.pptx
20110323 modul1 vb
Pelajaran GUI (Antarmuka Pengguna) Informatika Kelas 7.pptx
Modul delphi
ppt_IMK-design-interface
Ad

More from Shofura Kamal (19)

DOCX
Laporan Praktikum Analisis Regresi Terapan Modul VI-Regresi Logistik
DOCX
Laporan Praktikum Analisis Regresi Terapan Modul V-Regresi Non Linear
DOCX
Laporan Praktikum Analisis Regresi Terapan Modul IV-Variabel Dummy
DOCX
Laporan Praktikum Analisis Regresi Terapan Modul III-Regresi Linear Berganda
DOCX
Laporan Praktikum Analisis Regresi Terapan-Regresi Sederhana
DOCX
Laporan Praktikum Analisis Data Eksploratif-Statistika Dasar Dengan SPSS
DOCX
Laporan Praktikum Analisis Data Eksploratif-Microsoft Excel
DOCX
Laporan Praktikum Basis Data Modul VI-Membuat Website
DOCX
Laporan Praktikum Basis Data Modul IV-Membuat Database Pada PHPMYADMIN
DOCX
Laporan Praktikum Basis Data Modul III-Manipulasi Data
DOCX
Laporan Praktikum Basis Data Modul II-Primary Key
DOCX
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
DOCX
Laporan Makalah Pembuatan Website E-Commerce-Basis Data
PPTX
Presentasi Pembuatan Website E-Commerce
DOCX
Laporan Praktikum Algoritma Pemrograman Modul V-Menghitung Median
DOCX
Laporan Praktikum Algoritma Pemrograman Modul IV-Aplikasi Variabel Berindex
DOCX
Laporan Praktikum ALPRO-Berhitung Rumus Statistika
DOCX
Laporan Praktikum Algoritma Pemrograman Modul II
DOCX
Laporan Praktikum Algoritma Pemrograman Modul I
Laporan Praktikum Analisis Regresi Terapan Modul VI-Regresi Logistik
Laporan Praktikum Analisis Regresi Terapan Modul V-Regresi Non Linear
Laporan Praktikum Analisis Regresi Terapan Modul IV-Variabel Dummy
Laporan Praktikum Analisis Regresi Terapan Modul III-Regresi Linear Berganda
Laporan Praktikum Analisis Regresi Terapan-Regresi Sederhana
Laporan Praktikum Analisis Data Eksploratif-Statistika Dasar Dengan SPSS
Laporan Praktikum Analisis Data Eksploratif-Microsoft Excel
Laporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul IV-Membuat Database Pada PHPMYADMIN
Laporan Praktikum Basis Data Modul III-Manipulasi Data
Laporan Praktikum Basis Data Modul II-Primary Key
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
Laporan Makalah Pembuatan Website E-Commerce-Basis Data
Presentasi Pembuatan Website E-Commerce
Laporan Praktikum Algoritma Pemrograman Modul V-Menghitung Median
Laporan Praktikum Algoritma Pemrograman Modul IV-Aplikasi Variabel Berindex
Laporan Praktikum ALPRO-Berhitung Rumus Statistika
Laporan Praktikum Algoritma Pemrograman Modul II
Laporan Praktikum Algoritma Pemrograman Modul I

Recently uploaded (20)

PDF
PPT IPS Geografi SMA Kelas X_Bab 1 Pengantar Geografi_May.pdf
PPTX
MATERI MPLS TENTANG KURIKULUM DAN KEGIATAN PEMBELAJARAN
PDF
ANALISIS SOALAN BAHASA MELAYU SPM 2021-2024 (1).pdf
PPTX
Rancangan Kegiatan Kokurikuler SMP N 1 Karanggede
PPTX
5. Bahan Bacaan Asinkronus Modul 5_ Perencanaan Pembelajaran.pptx
DOCX
CONTOH RANCANGAN MODUL PROYEK KOKURIKULER SMA 1.docx
PPTX
Modul 2. Berpikir Komputasional sebagai Dasar Koding untuk Kecerdasan Artifis...
PDF
2. Capaian-Pembelajaran-Koding-Dan-Kecerdasan-Artifisial-Pusbuk.pdf
DOCX
Modul Ajar Deep Learning Bahasa Inggris Kelas 12 SMA Terbaru 2025
PPTX
XI BAB 7 SISTEM PERNAPASAN pada kelas xi
PPTX
PPT MATERI KODING DAN KECERDASAN ARTIFISIAL UNTUK PEMBELAJARAN
PPTX
Bahan Tayang OJT Pembelajaran Mendalam KS
PPTX
Bahan Presentasi Persamaan Elips .pptx
PPTX
Paparan Penyesuaian Juknis BOSP Tahun 2025
PDF
Lembar Kerja Mahasiswa Konsep Sistem Operasi
PPT
SEJARAH kelas 12 SEMESTER SATU DAN DUA.ppt
PDF
3. Buku Sekolah Sehat, sekolah sehat bagi madrasah
PPTX
PPT Kurikulum Berbasis Cinta tahun 2025.
PPTX
Modul 4 Asesmen-dalam-Pembelajaran-Mendalam.pptx
PDF
Pengenalan Undang-undang pengakap laut.pdf
PPT IPS Geografi SMA Kelas X_Bab 1 Pengantar Geografi_May.pdf
MATERI MPLS TENTANG KURIKULUM DAN KEGIATAN PEMBELAJARAN
ANALISIS SOALAN BAHASA MELAYU SPM 2021-2024 (1).pdf
Rancangan Kegiatan Kokurikuler SMP N 1 Karanggede
5. Bahan Bacaan Asinkronus Modul 5_ Perencanaan Pembelajaran.pptx
CONTOH RANCANGAN MODUL PROYEK KOKURIKULER SMA 1.docx
Modul 2. Berpikir Komputasional sebagai Dasar Koding untuk Kecerdasan Artifis...
2. Capaian-Pembelajaran-Koding-Dan-Kecerdasan-Artifisial-Pusbuk.pdf
Modul Ajar Deep Learning Bahasa Inggris Kelas 12 SMA Terbaru 2025
XI BAB 7 SISTEM PERNAPASAN pada kelas xi
PPT MATERI KODING DAN KECERDASAN ARTIFISIAL UNTUK PEMBELAJARAN
Bahan Tayang OJT Pembelajaran Mendalam KS
Bahan Presentasi Persamaan Elips .pptx
Paparan Penyesuaian Juknis BOSP Tahun 2025
Lembar Kerja Mahasiswa Konsep Sistem Operasi
SEJARAH kelas 12 SEMESTER SATU DAN DUA.ppt
3. Buku Sekolah Sehat, sekolah sehat bagi madrasah
PPT Kurikulum Berbasis Cinta tahun 2025.
Modul 4 Asesmen-dalam-Pembelajaran-Mendalam.pptx
Pengenalan Undang-undang pengakap laut.pdf

Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

  • 1. Graphical User Interface 1 BAB I PENDAHULUAN A. Definisi GUI Pengertian GUI adalah Graphical User Interface dalam dunia komputer. Pada komputer terdapat GUI atau antarmuka pengguna secara grafis. Istilah ini bukan hal yang lumrah pada saat awal kemunculan komputer. Namun setelah komputer generasi keempat mulai diciptakan, munculnya televisi berwarna yang mendorong pada penciptaan layar monitor berwarna serta evolusi pada perangkat penampil gambar (graphic adapter atau graphic card atau video card) membuat komputer mulai mendapatkan suatu sistem baru. Secara sederhana, GUI adalah suatu media virtual yang dapat membuat pengguna memberikan perintah tertentu pada komputer tanpa mengetik perintah tersebut, namun menggunakan gambar yang tersedia. Pengguna tidak mengetikkan perintah seperti pada komputer dengan Shell atau teks. Dengan GUI, perintah dapat dikonversi menjadi ikon dalam layar monitor yang dapat diklik untuk memulai fungsinya. B. Sejarah GUI Pada awal diciptakannya, komputer dijalankan dengan menggunakan perintah yang diketik pada layar monitor menggunakan keyboard. Hal ini berlaku untuk semua program ataupun perintah-perintah tertentu yang berhubungan dengan sistem informasi. Hal ini tentu saja dirasa tidak praktis dan kurang canggih. Selain itu hanya orang-orang tertentu saja yang bisa mengoperasikannya. Oleh karena itu para ahli terdorong untuk dapat menciptakan sesuatu yang dapat digunakan oleh orang kebanyakan dengan cara yang praktis dan mudah diingat. Akhirnya lahirlah yang disebut dengan GUI atau Graphical User Interface. GUI adalah seperangkat aplikasi yang menampilkan semua menu, ikon dan alat penunjuk lainnya yang menggantikan perintah ketik di shell.
  • 2. Graphical User Interface 2 Hal ini membuat pengguna komputer menjadi lebih mudah mengoperasikan sebuah perangkat daripada mengingat perintah yang menggunakan teks pada sebuah kotak komando tertentu. Hal ini didasarkan bahwa manusia lebih mudah mengingat gambar dibanding tulisan. GUI pertama kali digunakan dalam komputer yang diproduksi oleh Apple yakni Machintosh dengan Steve Jobs sebagai penggagasnya. Namun belakangan sistem operasi lain mengikutinya, seperti misalnya Microsoft dengan GUI Windows-nya yang menjadi tren setter penggunaan start menu dan taskbar. C. Menu View Menu View berisi perintah yang digunakan untuk menampilkan atau menyembunyikan jendela–jendela tertentu dalam Delphi 7. Submenu Fungsi Project Manager Menampilkan kotak dialog project manager yang digunakan untuk mengelola struktur hirarki dari suatu project Object Inspector Menampilkan jendela object inspector yang digunakan untuk mengubah nilai properti dan membuka events procedure komponen–komponen yang digunakan dalam form Object TreeView Menampilkan jendela objet tree view yang digunakan untuk menampilkan diagram pohon objek yang terdapat dalam form Aligment Palette Menampilkan toolbar align yang berisi tombol perintah untuk mengatur perataaan komponen– komponen yang terdapat dalam suatu form To Do List Menampilkan item–item tugas yang dibutuhkan untuk melengkapi pekerjaan dalam project yang berlaku. Anda dapat mengurutkan item–item tersebut sesuai dengan urutan abjad, status, atau berdasarkan prioritas dengan mengklik kolom yang di sediakan Browser Menampilkan kotak dialog project browser Code Explorer Menampilkan kotak dialog code explorer Component List Menampilkan kotak dialog komponen yang berisi daftar nama komponen Delphi 7 Windows List Menampilkan daftar nama jendela yang sedang dalam kondisi aktif yang dapat anda pilih Additional Message Info Menampilkan kotak dialog Message Hints Debug Windows Menampilkan kotak dialog Debug
  • 3. Graphical User Interface 3 Desktops Menampilkan submenu Desktops yang berfungsi untuk mengolah dekstops Toggle form/unit Berpindah dari form designer ke code editor dan sebaliknya Units Menampilkan dan mengaktifkan daftar nama unit yang terdapat dalam project Forms Menampilkan dan mengaktifkan daftar nama form yang terdapat dalam project New edit Window Membuka jendela code editor baru Toolbar Menampilkan daftar nama toolbar yang sedang diaktifkan atau disembuyikan Tabel 1.2 Menu View D. Keutamaan dan Kekurangan GUI GUI merupakan antarmuka pada sistem operasi komputer yang menggunakan menu grafis. Adapun keutamaan dan kekurangan yang dimiliki : Tabel 1.3 Keutamaan dan Kekurangan GUI Keutamaan GUI Kekurangan GUI 1. Desain Grafis lebih menarik. 1. Memakan memory yang sangat besar. 2. GUI memungkinkan user untuk berinteraksi dengan komputer secara lebih baik. 2. Bergantung pada perangkat keras. 3. Memudahkan pengguna. 3. Membutuhkan banyak tempat pada layar komputer. 4. Menarik minat pengguna. 4. Tidak fleksibel. 5. Resolusi gambar yang tinggi. 5. Membutuhkan proses lebih lama.
  • 4. Graphical User Interface 4 BAB II DESKRIPSI KERJA Terdapat sebuah kasus yang harus diselesaikan oleh praktikan yaitu membuat program aplikasi untuk melakukan operasi hitung pertambahan, pengurangan, perkalian dan pembagiaN dengan kata lain membuat sebuah kalkulator sederhana. Untuk menyelesaikan kasus tersebut, praktikan akan menggunakan sistem media grafis GUI dengan Delphi 7. Adapun langkah- langkah yang dilakukan oleh praktikan adalah sebagai berikut: 1. Arahkan pointer ke arah pojok kanan display PC (dalam pengoperasian ini praktikkan menggunakan Windows 8), kemudian klik Search lalu ketik“Delphi” di kotak pencarian tersebut. Lihat Gambar 2.1 berikut : Gambar 2.1 Membuka Aplikasi Delphi 7 2. Maka akan muncul tampilan seperti Gambar 2.2 berikut : Gambar 2.2 Lembar Kerja Borland Delphi 7
  • 5. Graphical User Interface 5 3. Pada Object Inspector pada kolom properties di form, ubahlah berikut : a. Border Icons (biMinimize = false, biMaximazie = false). Seperti Gambar 2.3 berikut : Gambar 2.3 Border Icons pada Object Inspector b. Dari Position = poDesigned Position = poScreenCenter. Lihat Gambar 2.5 dibawah : Gambar 2.4 Merubah position pada properties 4. Tambahkan 11 buah komponen Label, 9 buah komponen Edit pada komponen pallete standard. Tampak seperti Gambar 2.5 dibawah ini : Gambar 2.5 Komponen Label dan Edit Label Edit
  • 6. Graphical User Interface 6 5. Tambahkan juga 1 buah komponen BitBtn dan 1 buah komponen speedbutton pada komponen pallete Additional. Lihat Gambar 2.6 dibawah ini : Gambar 2.6 Komponen BitBtn dan SpeedButton 6. Setelah semua komponen yang dibutuhkan diaktifkan maka akan ditampilkan dalam Object TreeView. Lihat Gambar 2.7 dibawah ini : Gambar 2.7 Tampilan semua komponen yang diaktifkan 7. Aturlah posisi komponen-komponen yang ada pada form seperti Gambar 2.8 dibawah ini : Gambar 2.8 Posisi pada form BitBtn dan SpeedButton Edit Speedbutton Label BitBt n
  • 7. Graphical User Interface 7 8. Ubah caption pada Label di properties, Label1= “Angka Ke-1”, Label2= “Angka Ke-2”, Label3=“Angka Ke-3”, Label4= “Angka Ke-4”, Label5= “Angka Ke-5”, Label6= “+”, Label7= “-“, Label8= “x”, Label9= “/”, Label10=“Operasi Perhitungan Matematika”, dan terakhir untuk Label11= “Kalkulator Shofura”. 9. Pada BitBtn ubah properties Kind pada Object Inspector menjadi bkCancel dan ubah properties caption menjadi “Hitung”. Lihat Gambar 2.9 dibawah ini : Gambar 2.9 Merubah nilai properties BitBtn 10. Pada speedbutton ubah properties Flat pada Object Inspector = True dan ubah Caption = Tutup dan layout=blGlyphRight, untuk mengambil gambar yang akan diletakkan, klik properties Glyph dan klik tombol L ad. Gambar tersebut di directory: “System:C/Program Files/Common Files/Borland Shared/Images/Button”.Lihat Gambar 2.10 dibawah ini: Gambar 2.10 Merubah nilai properties speedbutton
  • 8. Graphical User Interface 8 11. Setelah semua komponen proses dipenuhi dari nomor 3 sampai dengan nomor 10, maka akan terlihat tampilan seperti dibawah ini : Gambar 2.11 Tampilan pada form 12. Double-click pada Form dan tulis kode seperti dibawah ini : Gambar 2.12 Kode program event procedure FormCreate
  • 9. Graphical User Interface 9 13. Klik komponen “Edit1” pada form, kemudian klik events pada Object Inspector. Cari instruksi OnKeyPress dan double-click instruksi tersebut. Lakukan instruksi yang sama hingga Edit6. Lihat Gambar 2.13 dibawah ini : Gambar 2.13 Komponen Evenst OnKeyPress pada Edit 14. Setelah mendouble-click OnKeyPress tadi, kemudian tuliskan kode program untuk Edit seperti dibawah ini : Gambar 2.14 Kode program untuk Edit
  • 10. Graphical User Interface 10 15. Klik komponen BitBtn pada form, kemudian klik events pada Object Inspector. Cari instruksi OnKeyPress dan double-click instruksi tersebut. Lihat Gambar 2.15 dibawah ini : Gambar 2.15 Komponen Events OnKeyPress pada BitBtn 16. Setelah mendouble-click OnKeyPress tadi, kemudian masukkan syntak sesuai aplikasi yang akan dibuat seperti dibawah ini : Gambar 2.16Syntak untuk aplikasi yang dibuat 17. Klik komponen speedbutton pada form, dan klik events pada Object Inspector kemudian cari instruksi yaitu OnClick lalu double-click. Lihat Gambar 2.17 dibawah ini :
  • 11. Graphical User Interface 11 Gambar 2.17 Komponen Events OnClick pada SpeedButton 18. Setelah mendouble-click OnClick tadi, kemudian masukkan perintah seperti dibawah ini : Gambar 2.18 perintah untuk speedbutton 19. Tambahkan BitBtn pada Additional Palette. Kemudian ubah caption menjadi “Reset” lalu Klik OnClick pada Events di Object Inspector. Lihat Gambar 2.19 dibawah ini : Gambar 2.19 Merubah nilai pada properties dan events 20. Dan tuliskan kode program untuk reset seperti Gambar 2.20 berikut : Gambar 2.20 Kode program untuk reset
  • 12. Graphical User Interface 12 21. Pada saat Anda memulai Delphi 7, code editor ini tidak kelihatan. Untuk menampilkannya klik icon Toggle pada toolbar sehingga code editor ditampilkan seperti Gambar 2.21 berikut : Gambar 2.21 Keseluruhan komponen yang digunakan dalam program 22. Pada form properties Object Inspector, klik colour clMaroon font Ms Sans Serif OK. Lihat Gambar 2.22dibawah ini : Gambar 2.22 Proses Editing pada layar form
  • 13. Graphical User Interface 13 23. Setelah meng-input-kan syntax langkah selanjutnya adalah penginputan data dengan mengklik F9 pada keyboard atau klik Run pada Toolbar. Gambar 2.23 Toolbar Run 24. Komputer akan menampilakan output dari syntak yang telah di-input-kan. Gambar 2.24 Tampilan Hasil Running 25. Lalu masukkan data sesuai kebutuhan, setelah data dimasukkan maka akan mendapatkan hasil seperti Gambar 2.25 berikut : Gambar 2.25 Tampilan Output
  • 14. Graphical User Interface 14 26. Untuk menyimpan aplikasi klik Save All lalu tulis nama untuk Unit1 klik pada kolom File name, misalnya Modu10_GUI lalu klik Save seperti pada Gambar 2.6 dibawah ini : Gambar 2.26 Menyimpan Unit1 27. Kemudian tulis nama untuk Project1 klik pada kolom File name, misalnya PModu10_GUI lalu klik Save seperti pada gambar dibawah ini : Gambar 2.27 Menyimpan Project1
  • 15. Graphical User Interface 15 BAB III PEMBAHASAN Dari hasil pemaparan deskripsi kerja pada bab II diatas, berikut adalah bahasa program yang digunakan dalam Delphi 7 untuk membuat aplikasi program operasi perhitungan matematika atau kalkulator sederhana pada permasalahan di atas : 1. Form designer merupakan suatu objek yang dapat dipakai sebagai tempat untuk merancang program aplikasi. Form berbentuk sebuah lembar kosong yang dapat diisi dengan komponen-komponen yang diambil dari Component Palette. Dalam sebuah form terdapat titik-titik yang disebut grid yang berguna untuk membantu pengaturan tata letak objek yang dipasang pada form. Pada saat praktikkan memulai Delphi, Delphi akan memberikan sebuah form kosong yang diberi nama Form1, seperti pada Gambar 3.1 di bawah ini : Gambar 3.1 Form Kosong 2. Setiap komponen dan setiap form mempunyai sekumpulan properties (seperti warna, ukuran, posisi, judul (caption) yang dapat dimodifikasi pada IDE Delphi atau dalam kode program), dan sekumpulan event (seperti klik mouse, penekanan tombol) dimana dapat menentukan beberapa perilaku tambahan. Objek Inspector menampilkan properties dan event untuk komponen yang sedang dipilih dan memperbolehkan praktikkan
  • 16. Graphical User Interface 16 untuk mengganti nilai properti atau memilih respon terhadap suatu event yang terjadi. Gambar 3.2 Object Inspector 3. Komponen adalah blok-blok bagian yang akan membentuk suatu aplikasi Delphi. Komponen-komponen tersebut dapat dilihat pada window Component Palette. Untuk menempatkan sebuah komponen ke sebuah windows, cukup dengan mengklik komponen dari component palette kemudian mengklik lokasi tempat penempatan komponen tersebut di dalam form. Setiap komponen mempunyai atribut tertentu yang memungkinkan bagi praktikkan untuk mengatur aplikasi ketika waktu desain (design time) atau waktu dijalankan (run time). Component palette dapat dilihat pada gambar di bawah ini : Gambar 3.3 Component Palette Di bagian atas Object Inspector ada window Object TreeView. Awalnya window ini hanya terdiri dari nama Form. Tetapi ketika anda menambahkan sebuah komponen ke form tersebut, maka object baru
  • 17. Graphical User Interface 17 tersebut akan terdaftar di dalam Object TreeView di bagian bawah form. Object TreeView akan menampilkan diagram pohon yang mencerminkan hubungan parent-child dari komponen-komponen. Seperti yang terlihat pada Gambar 3.3 praktikkan menambahkan 9 Edit, 11 Label , 1 buah speedbutton dan 1 buah BitBtn. Gambar 3.3 Object TreeView 4. unit modul10_GUI; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls, Buttons; Nama file unit atau keseluruhan program adalah modul10_GUI. Judul unit penting untuk dibuat karena dapat membedakan antara satu program dengan program yang lainnya, serta untuk memudahkan praktikan bila dicari sewaktu-waktu. Program selalu diikuti dengan nama unit yang akan dibuat. Pada list program tertulis “modul10_GUI”. Nama unit ditulis sesuai dengan keinginan praktikan. Praktikan menuliskan nama program .Untuk mengakhiri nama unit, akhiri dengan tanda titik koma (;), tanda titik koma akan terus digunakan dalam menyelesaikan perintah pada setiap barisnya. Interface menunjukkan program itu bersifat tatap muka.
  • 18. Graphical User Interface 18 Sedangkan uses menandakan kata-kata yang dibawahnya adalah sebuah pustaka atau library komponen yang digunakan. Bagian interface (dimulai dengan antarmuka) memberitahu compiler apa bagian dari modul tersedia untuk modul lain. Bagian ini daftar (setelah kata uses) modul library yang digunakan oleh modul ini. Ada juga deskripsi bentuk yang dibentuk oleh Delphi, yang mengikuti jenis kata. 5. type TForm1 = class(TForm) Label1: TLabel; Label2: TLabel; Label3: TLabel; Label4: TLabel; Label5: TLabel; Label6: TLabel; Label7: TLabel; Label8: TLabel; Label9: TLabel; Edit1: TEdit; Edit2: TEdit; Edit3: TEdit; Edit4: TEdit; Edit5: TEdit; Edit6: TEdit; Edit7: TEdit; Edit8: TEdit; Edit9: TEdit; SpeedButton1: TSpeedButton; BitBtn1: TBitBtn; Label10: TLabel; Label11: TLabel; BitBtn2: TBitBtn; procedure Edit1KeyPress(Sender: TObject; var Key: Char); procedure Edit2KeyPress(Sender: TObject; var Key: Char); procedure Edit3KeyPress(Sender: TObject; var Key: Char); procedure Edit4KeyPress(Sender: TObject; var Key: Char); procedure Edit5KeyPress(Sender: TObject; var Key: Char);
  • 19. Graphical User Interface 19 procedure FormCreate(Sender: TObject); procedure BitBtn1Click(Sender: TObject); procedure SpeedButton1Click(Sender: TObject); procedure BitBtn2Click(Sender: TObject); Pada bagian type menunjukkan komponen yang digunakan dan prosedur yang digunakan untuk komponen pada unit. Procedure akan otomatis keluar ketika sebuah action dipakai pada edit atau button atau speedbutton dan lain-lain. Apabila salah satu pada type dihapus maka program tak bisa dikompail. 6. private { Private declarations } public { Public declarations } end; Pada private bermakna bagian untuk deklarasi yang bersifat khusus.Pada public mengandung arti bahwa itu merupakan bagian untuk deklarasi yang bersifat umum. Sedangkan “end;” merupakan akhir dari program, namun tanda titik koma akan terus digunakan dalam menyelesaikan perintah pada setiap barisnya. 7. var Form1: TForm1; implementation {$R *.dfm} Bagian mulai menerapkan direktif {$ R * DFM}, memberitahu compiler bahwa proses menghasilkan file executable harus digunakan untuk menggambarkan bentuk. Deskripsi bentuk adalah pada file dengan ekstensi DFM, yang namanya sesuai dengan nama modul. File definisi Form dihasilkan berdasarkan pada bentuk penampilan lingkungan Delphi. Petunjuk {$ R * DFM} event prosedur berikut untuk bentuk dan komponennya. Praktikkan dapat menempatkan prosedur yang sama dan fungsi lainnya.
  • 20. Graphical User Interface 20 8. procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char); begin if key=#13 then Edit2.SetFocus; end; procedure TForm1.Edit2KeyPress(Sender: TObject; var Key: Char); begin if key=#13 then Edit3.SetFocus; end; procedure TForm1.Edit3KeyPress(Sender: TObject; var Key: Char); begin if key=#13 then Edit4.SetFocus; end; procedure TForm1.Edit4KeyPress(Sender: TObject; var Key: Char); begin if key=#13 then Edit5.SetFocus; end; procedure TForm1.Edit5KeyPress(Sender: TObject; var Key: Char); begin if key=#13 then Edit6.SetFocus; end; Syntak diatas memperlihatkan kode program untuk keseluruhan Edit. Kode program adalah sederetan pernyataan-pernyataan atau instruksi-instruksi untuk mengerjakan sesuatu, dan ditulis dalam code editor atau unit, tepatnya pada bagian events procedure. Kode program ini akan dikerjakan bila terjadi suatu events terhadap komponen. Sebelum menulis kode program, maka events procedure harus dipanggil.Untuk membuka events procedure, dalam kasus ini events yang terjadi adalah OnKeyPress. Bagian ini merupakan procedure yang digunakan dalam Edit 1. “Edit1KeyPress” artinya ketika telah di_inputkan datanya dapat langsung [1] [2] [3] [4] [5]
  • 21. Graphical User Interface 21 di-Enter menuju kolom Edit selanjutnya. Parameter formal dalam procedure kasus ini antara lain “sender” dengan tipe data “Tobject” dan “key” dengan tipe data Char. Dalam kasus ini menggunakan pencabangan if-then. Pencabangan if-then merupakan sebuah kondisi yang menghasilkan nilai True jika benar dan False jika salah. [1] Bagian ini memuat pencabangan if-then. “if key=#13 then” meupakan pencabangan yang sudah ditetapkan”. “Edit2.SetFocus” artinya ketika di kolom Edit1 nanti setelah di inputkan suatu data maka akan dapat di-enter secara langsung dengan memfokuskan hanya pada Edit2. [2] Bagian ini sama seperti sebelumnya “Edit3.SetFocus” artinya ketika di kolom Edit2 nanti setelah di inputkan suatu data maka akan dapat di-enter secara langsung dengan memfokuskan hanya pada Edit3.[3] “Edit4.SetFocus” artinya ketika di kolom Edit3 nanti setelah di inputkan suatu data maka akan dapat di-enter secara langsung dengan memfokuskan hanya pada Edit4. [4] Dalam “Edit5.SetFocus” artinya ketika di kolom Edit4 nanti setelah di inputkan suatu data maka akan dapat di-enter secara langsung dengan memfokuskan hanya pada Edit5.[5] “Edit6.SetFocus” artinya ketika di kolom Edit5 nanti setelah di inputkan suatu data maka akan dapat di-enter secara langsung dengan memfokuskan hanya pada Edit6. 5. procedure TForm1.FormCreate(Sender: TObject); begin Edit1.Text := ''; Edit2.Text := ''; Edit3.Text := ''; Edit4.Text := ''; Edit5.Text := ''; Edit6.Text := ''; Edit7.Text := ''; Edit8.Text := ''; Edit9.Text := ''; end;
  • 22. Graphical User Interface 22 Pada program aplikasi diatas, bila double-click pada form dengan menginputkan kode program diatas maka hasil yang diinginkan adalah mengosongkan properti text komponen Edit1 hingga Edit9. 6. procedure TForm1.BitBtn1Click(Sender: TObject); var a, b, c, d, e, f, g, h, i : real; begin a:= StrToFloat(Edit1.Text); b:= StrToFloat(Edit2.Text); c:= StrToFloat(Edit3.Text); d:= StrToFloat(Edit4.Text); e:= StrToFloat(Edit5.Text); f:= a+b+c+d+e; g:= a-b-c-d-e; h:= a*b*c*d*e; i:= a/b/c/d/e; Edit6.Text := FloatToStr (f); Edit7.Text := FloatToStr (g); Edit8.Text := FloatToStr (h); Edit9.Text := FloatToStr (i); end; Gambar 3.7 Syntak operasi penjumlahan,pengurangan,pekalian dan pembagian Pada program aplikasi diatas, bila double-click pada BitBtn maka yang akan muncul adalah procedure untuk BitBtn.[1] Var digunakan untuk mendeklarasikan semua simbol yang akan terus digunakan pada program yang ingin dibuat. Untuk a mendeklarasikan “Angka Ke-1”, b= “Angka Ke-2”, c=”Angka Ke-3”, d=”Angka Ke-4”, e=”Angka Ke-5”, f=”Penjumlahan”, g=”Pengurangan”, h=”Perkalian” dan i=”pembagian”. [2] Pada bagian diatas terdapat fungsi StrToFloat. Setiap data yang kita masukkan bertipe data string. Dengan fungsi StrToFloat akan digunakan untuk mengubah data tipe string (teks) menjadi real. Untuk a hingga e itu akan didefinisikan di Edit1 hingga Edit5. [3] Bagian ini [1] [2] [3] [4]
  • 23. Graphical User Interface 23 merupakan syntak untuk operasi perhitungan. Variabel “f” merupakan hasil penjumlahan, Variabel “g” merupakan hasil pengurangan, variabel “h” merupakan hasil perkalian dan variabel “i” merupakan hasil pembagian. [4] Pada bagian rumus diatas “Edit6.Text” hingga “Edit9.Text” terdapat pernyataan Fungsi FloatToStr yang digunakan untuk mengubah data tipe real menjadi string.”Edit6.Text” hingga “Edit9.Text” digunakan untuk menampilkan hasil dari penjumlahan hingga pembagian. Variabel “f” yang merupakan hasil penjumlahan maka hasilnya akan ditampilkan di Edit6, untuk variabel “g” yang merupakan hasil pengurangan maka hasilnya akan ditampilkan di Edit7, untuk variabel “h” yang merupakan hasil perkalian maka hasilnya akan ditampilkan di Edit8 dan variabel “i” yang merupakan hasil pembagian maka hasilnya akan di tampilkan di Edit9. 8. Langkah selanjutnya adalah menjalankan program dengan mengklik F9 pada keyboard atau klik Run pada Toolbar. Gambar 3.8 Toolbar Run Menu Run digunakan untuk menjalankan program dan melihat jalannya program. Praktikan juga dapat memantau jalannya program dengan memperhatikan prosedur yang dijalankan. Run atau F9 berfungsi untuk mengkompilasi dan menjalankan program aplikasi yang telah praktikan buat. Jika muncul lembar kerja hitam pada layar maka artinya perhitungan yang praktikan lakukan benar. Namun jika setelah menekan tombol F9 dan ternyata terdapat blok merah pada baris tertentu, itu artinya ada kesalahan dalam meng-input data. Setelah mengisikan data yang ingin dicari, maka akan muncul hasil yang diinginkan. Lihat gambar dibawah ini :
  • 24. Graphical User Interface 24 Gambar 3.9 Tampilan Output Lengkapnya
  • 25. Graphical User Interface 25 BAB IV PENUTUP Setelah praktikan melakukan praktikum untuk menyelesaikan suatu kasus menggunakan program Delphi 7 dalam membuat suatu aplikasi menggunakan GUI maka praktikan mendapatkan kesimpulan sebagai berikut : 1. GUI (Graphical User Interface) merupakan suatu komponen penting di dalam aplikasi komputer modern. 2. GUI dapat memudahkan pengguna ketika menggunakan aplikasi, selain itu GUI juga berfungsi untuk menambah nilai estetika suatu aplikasi. 3. Di zaman sekarang ini tidak ada multimedia interaktif tanpa GUI. 4. Sebagai user tidak boleh mengubah yang ada di dalam type karena segala yang telah ada didalam type adalah sesuatu yang otomatis disediakan Delphi 7. Dan apabila diganti dapat menyebabkan gagalnya suatu program. 5. Delphi mendefinisikan sejumlah event pada setiap komponennya. 6. Membuat kalkulator sederhana dengan menggunakan Delphi 7, lebih mudah, cepat, efektif, dan efisien karena fitur yang disediakan cukup lengkap.