Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

33
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 Graphical User Interface 1

Transcript of Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

Page 1: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 1

Page 2: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 FungsiProject 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 7Windows List Menampilkan daftar nama jendela yang sedang

dalam kondisi aktif yang dapat anda pilihAdditional Message Info

Menampilkan kotak dialog Message Hints

Debug Windows Menampilkan kotak dialog Debug

Graphical User Interface 2

Page 3: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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

:

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.

Tabel 1.3 Keutamaan dan Kekurangan GUI

BAB II

Graphical User Interface 3

Page 4: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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

3. Pada Object Inspector pada kolom properties di form, ubahlah berikut :

Graphical User Interface 4

Page 5: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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

Graphical User Interface 5

Label Edit

Page 6: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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

Graphical User Interface 6

BitBtn dan SpeedButton

Edit

Speedbutton

Label

BitBtn

Page 7: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 7

Page 8: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 8

Page 9: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 9

Page 10: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 10

Page 11: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 11

Page 12: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 12

Page 13: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 :

Graphical User Interface 13

Page 14: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

Gambar 2.25 Tampilan Output

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 14

Page 15: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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

Graphical User Interface 15

Page 16: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

untuk komponen yang sedang dipilih dan memperbolehkan praktikkan

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

Graphical User Interface 16

Page 17: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

menambahkan sebuah komponen ke form tersebut, maka object baru

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

Page 18: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 18

Page 19: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 19

Page 20: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

8. procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char);

beginif key=#13 thenEdit2.SetFocus;end;

procedure TForm1.Edit2KeyPress(Sender: TObject; var Key: Char);beginif key=#13 thenEdit3.SetFocus;end;

procedure TForm1.Edit3KeyPress(Sender: TObject; var Key: Char);beginif key=#13 thenEdit4.SetFocus;end;procedure TForm1.Edit4KeyPress(Sender: TObject; var Key: Char);beginif key=#13 thenEdit5.SetFocus;end;procedure TForm1.Edit5KeyPress(Sender: TObject; var Key: Char);beginif key=#13 thenEdit6.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

Graphical User Interface 20

[1]

[2]

[3]

[4]

[5]

Page 21: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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 21

Page 22: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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

Graphical User Interface 22

[1]

[2]

[3]

[4]

Page 23: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

hingga e itu akan didefinisikan di Edit1 hingga Edit5. [3] Bagian ini

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

Graphical User Interface 23

Page 24: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

dicari, maka akan muncul hasil yang diinginkan. Lihat gambar dibawah ini

:

Gambar 3.9 Tampilan Output Lengkapnya

Graphical User Interface 24

Page 25: Laporan Praktikum Algoritma Pemrograman Modul VI-GUI

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.

Graphical User Interface 25