57
Catatan Kuliah Pemprograman Visual disusun oleh Nanda Arista Rizki, M.Si. JURUSAN MATEMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS MULAWARMAN 2016

Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Embed Size (px)

Citation preview

Page 1: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Catatan Kuliah

Pemprograman Visual

disusun oleh

Nanda Arista Rizki, M.Si.

JURUSAN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS MULAWARMAN

2016

Page 2: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Daftar Isi

Daftar Isi ii

1 Pemprograman Dasar 1

1.1 Memulai Program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.2 Variabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.3 Kondisi Cabang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.4 Perulangan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.5 Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

1.6 Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2 Pemprograman Terstruktur 11

2.1 Procedure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.2 Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.3 Unit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3 Graphical User Interface (GUI) 17

3.1 Komponen Standar I . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.1.1 Komponen Label dan Button . . . . . . . . . . . . . . . . . . 17

3.1.2 Komponen Edit box . . . . . . . . . . . . . . . . . . . . . . . 21

i

Page 3: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

DAFTAR ISI ii

3.1.3 Komponen List box . . . . . . . . . . . . . . . . . . . . . . . . 26

3.2 Komponen Standar II . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3.2.1 Komponen Memo . . . . . . . . . . . . . . . . . . . . . . . . . 28

3.2.2 Komponen Group box dan Radio button . . . . . . . . . . . . 30

3.2.3 Komponen Check box . . . . . . . . . . . . . . . . . . . . . . . 33

3.3 Komponen Dialog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

3.3.1 Komponen Color dialog . . . . . . . . . . . . . . . . . . . . . 36

3.3.2 Komponen Font dialog . . . . . . . . . . . . . . . . . . . . . . 37

3.3.3 Komponen Open dialog dan Save dialog . . . . . . . . . . . . 38

3.4 Komponen Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

3.4.1 Komponen TChart . . . . . . . . . . . . . . . . . . . . . . . . 41

3.4.2 Komponen TListChartSource dan TRandomChartSource . . . 43

3.4.3 Komponen TUserDefinedChartSource . . . . . . . . . . . . . . 46

3.5 Materi Tambahan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Daftar Pustaka 54

Page 4: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

BAB 1

Pemprograman Dasar

Semua materi dalam pemprograman visual ini menggunakan software bernama

Lazarus. Lazarus adalah open-source software yang menyediakan Integrated De-

velopment Environment (IDE). Dalam mengeksekusi kode, Lazarus menggunakan

kompiler Free Pascal. Lazarus dapat diunduh secara gratis di http://www.lazarus-

ide.org/. Lazarus merilis versi 1.6 pada Februari 2016.

Gambar 1.1: Splash screen Lazarus versi 1.6

1.1 Memulai Program

Untuk memulai program baru, klik File/New/Project/New Project/Program atau

Project/New Project/Program. Setelah itu, akan muncul kode berikut pada jendela

Source Editor.

1

Page 5: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

1 program Project1;

2

3 {$mode objfpc}{$H+}4

5 uses

6 {$IFDEF UNIX}{$IFDEF UseCThreads}7 cthreads,

8 {$ENDIF}{$ENDIF}9 Classes

10 { you can add units after this };11

12 {$IFDEF WINDOWS}{$R project1.rc}{$ENDIF}13

14 begin

15 end.

Simpan sebagai first.lpr lalu masukkan statemen-statemen berikut di antara begin

dan end :

1 Writeln('This is Free Pascal and Lazarus');

2 Writeln('Press enter key to close');

3 Readln;

Tekan F9 untuk menjalankan program.

Latihan:

Ketik perintah-perintah berikut:

1. Writeln(’This is a number: ’, 15);

2. Writeln(’This is a number: ’, 3 + 2);

3. Writeln(’5 * 2 = ’, 5 * 2);

4. Writeln(’This is real number: ’, 7.2);

5. Writeln(’One, Two, Three : ’, 1, 2, 3);

6. Writeln(10, ’ * ’, 3 , ’ = ’, 10 * 3);

Pemprograman Visual 2 Nanda Arista Rizki, M.Si.

Page 6: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Tips: Gunakan ”Ctrl+space” untuk memudahkan pengetikan.

1.2 Variabel

Berikut adalah contoh mendeklarasi dan menggunakan variabel.

1 program FirstVar;

2

3 {$mode objfpc}{$H+}4

5 uses

6 {$IFDEF UNIX}{$IFDEF UseCThreads}7 cthreads,

8 {$ENDIF}{$ENDIF}9 Classes

10 { you can add units after this };11

12 var

13 x: Integer;

14 begin

15 x:= 5;

16 Writeln(x * 2);

17 Writeln('Press enter key to close');

18 Readln;

19 end.

Selain integer, tipe variabel lain yang dapat digunakan adalah real dan string. Agar

lebih interaktif dan fleksibel, program yang dibuat dapat ditambahkan perintah

Readln .

1 var

2 x: Integer;

3 begin

4 Write('Please input any number:'); Readln(x);

5 Writeln('You have entered: ', x);

6 Writeln('Press enter key to close'); Readln;

7 end.

Pemprograman Visual 3 Nanda Arista Rizki, M.Si.

Page 7: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Tabel 1.1: Rentang Nilai dan Memori yang Dibutuhkan

Type Minimum Maksimum Ukuran memori (Byte)Byte 0 255 1ShortInt -128 127 1SmallInt -32768 32767 2Word 0 65535 2Integer -2147483648 2147483647 4LongInt -2147483648 2147483647 4Cardinal 0 4294967295 4Int64 -9,22337 ×1018 9,22337 ×1018 8

Suatu program dikatakan efisien jika memiliki ukuran file yang kecil. Tabel (1.1)

berisi tipe-tipe bilangan, rentang nilai, dan memori yang dibutuhkan. Informasi

yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low ,

High , dan SizeOf .

1 program Types;

2

3 {$mode objfpc}{$H+}4

5 uses

6 {$IFDEF UNIX}{$IFDEF UseCThreads}7 cthreads,

8 {$ENDIF}{$ENDIF}9 Classes;

10

11 begin

12 Writeln('Byte: Size = ', SizeOf(Byte),

13 ', Minimum value = ', Low(Byte), ', Maximum value = ',

14 High(Byte));

15

16 Writeln('Integer: Size = ', SizeOf(Integer),

17 ', Minimum value = ', Low(Integer), ', Maximum value = ',

18 High(Integer));

19

20 Write('Press enter key to close');

21 Readln;

22 end.

Pemprograman Visual 4 Nanda Arista Rizki, M.Si.

Page 8: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

1.3 Kondisi Cabang

Berikut adalah contoh kondisi if .

1 var

2 Temp: Single;

3 ACIsOn: Byte;

4

5 begin

6 Write('Please enter Temperature of this room : ');

7 Readln(Temp);

8 Write('Is air conditioner on? if it is (On) write 1,',

9 ' if it is (Off) write 0 : ');

10 Readln(ACIsOn);

11

12 if (ACIsOn = 1) and (Temp > 22) then

13 Writeln('Do nothing, we still need cooling')

14 else

15 if (ACIsOn = 1) and (Temp < 18) then

16 Writeln('Please turn off air−conditioner')17 else

18 if (ACIsOn = 0) and (Temp < 18) then

19 Writeln('Do nothing, it is still cold')

20 else

21 if (ACIsOn = 0) and (Temp > 22) then

22 Writeln('Please turn on air−conditioner')23 else

24 Writeln('Please enter a valid values');

25

26 Write('Press enter key to close');

27 Readln;

28 end.

Berikut adalah contoh statemen Case .. of .

1 var

2 Mark: Integer;

3

4 begin

Pemprograman Visual 5 Nanda Arista Rizki, M.Si.

Page 9: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

5 Write('Please enter student mark: ');

6 Readln(Mark);

7 Writeln;

8

9 case Mark of

10 0 .. 39 : Writeln('Student grade is: F');

11 40 .. 49: Writeln('Student grade is: E');

12 50 .. 59: Writeln('Student grade is: D');

13 60 .. 69: Writeln('Student grade is: C');

14 70 .. 84: Writeln('Student grade is: B');

15 85 .. 100: Writeln('Student grade is: A');

16 else

17 Writeln('Wrong mark');

18 end;

19

20 Write('Press enter key to close');

21 Readln;

22 end.

Statemen Case .. of juga dapat digunakan dalam contoh berikut.

1 var

2 Key: Char;

3

4 begin

5 Write('Please enter any English letter: ');

6 Readln(Key);

7 Writeln;

8 case Key of

9 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p':

10 Writeln('This is in the second row in keyboard');

11

12 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l':

13 Writeln('This is in the third row in keyboard');

14

15 'z', 'x', 'c', 'v', 'b', 'n', 'm':

16 Writeln('This is in the fourth row in keyboard');

17 else

18 Writeln('Unknown letter');

19 end;

20

Pemprograman Visual 6 Nanda Arista Rizki, M.Si.

Page 10: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

21 Write('Press enter key to close');

22 Readln;

23 end.

1.4 Perulangan

Berikut adalah contoh perulangan For .

1 var

2 Fac, Num, i: Integer;

3

4 begin

5 Write('Please input any number: ');

6 Readln(Num);

7 Fac:= 1;

8 for i:= Num downto 1 do

9 Fac:= Fac * i;

10 Writeln('Factorial of ', Num ,' is ', Fac);

11 Writeln('Press enter key to close');

12 Readln;

13 end.

Berikut adalah contoh perulangan Repeat Until .

1 var

2 Num : Integer;

3

4 begin

5 repeat

6 Write('Please input a number: ');

7 Readln(Num);

8 until Num ≤ 0;

9 Writeln('Finished, please press enter key to close');

10 Readln;

11 end.

Berikut adalah contoh perulangan While .

Pemprograman Visual 7 Nanda Arista Rizki, M.Si.

Page 11: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

1 var

2 Fac, Num, i: Integer;

3

4 begin

5 Write('Please input any number: ');

6 Readln(Num);

7 Fac:= 1;

8 i:= Num;

9 while i > 1 do

10 begin

11 Fac:= Fac * i;

12 i:= i − 1;

13 end;

14 Writeln('Factorial of ', Num ,' is ', Fac);

15

16 Writeln('Press enter key to close');

17 Readln;

18 end.

1.5 Array

Berikut adalah contoh Array .

1 var

2 Marks: array [1 .. 10] of Integer;

3 i: Integer;

4 Max, Min: Integer;

5

6 begin

7 for i:= 1 to 10 do

8 begin

9 Write('Input student number ', i, ' mark: ');

10 Readln(Marks[i]);

11 end;

12 Max:= Marks[1];

13 Min:= Marks[1];

14 for i:= 1 to 10 do

15 begin

Pemprograman Visual 8 Nanda Arista Rizki, M.Si.

Page 12: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

16 // Check if current Mark is maximum mark or not

17 if Marks[i] > Max then

18 Max:= Marks[i];

19

20 // Check if current value is minimum mark or not

21 if Marks[i] < Min then

22 Min:= Marks[i];

23

24 Write('Student number ', i, ' mark is : ', Marks[i]);

25 if Marks[i] ≥ 40 then

26 Writeln(' Pass')

27 else

28 Writeln(' Fail');

29 end;

30

31 Writeln('Max mark is: ', Max);

32 Writeln('Min mark is: ', Min);

33 Writeln('Press enter key to close');

34 Readln;

35 end.

1.6 Record

Berikut adalah contoh Record .

1 program Cars;

2

3 {$mode objfpc}{$H+}4

5 uses

6 {$IFDEF UNIX}{$IFDEF UseCThreads}7 cthreads,

8 {$ENDIF}{$ENDIF}9 Classes

10 { you can add units after this };11

12 type

13 TCar = record

Pemprograman Visual 9 Nanda Arista Rizki, M.Si.

Page 13: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

14 ModelName: string;

15 Engine: Single;

16 ModelYear: Integer;

17 end;

18

19 var

20 Car: TCar;

21

22 begin

23 Write('Input car Model Name: ');

24 Readln(Car.ModelName);

25 Write('Input car Engine size: ');

26 Readln(Car.Engine);

27 Write('Input car Model year: ');

28 Readln(Car.ModelYear);

29

30 Writeln;

31 Writeln('Car information: ');

32 Writeln('Model Name : ', Car.ModelName);

33 Writeln('Engine size : ', Car.Engine);

34 Writeln('Model Year : ', Car.ModelYear);

35

36 Write('Press enter key to close..');

37 Readln;

38 end.

Pemprograman Visual 10 Nanda Arista Rizki, M.Si.

Page 14: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

BAB 2

Pemprograman Terstruktur

Aplikasi-aplikasi yang besar menjadi unreadable dan unmaintainable ketika meng-

gunakan kode tak terstruktur dalam satu file. Dalam pemprograman terstruktur,

source code aplikasi dapat dibagi menjadi bagian yang lebih kecil, yang dinamakan

procedure dan function . Lalu dari procedure dan function tersebut dapat di-

gabung yang menghubungkan ke satu subjek dalam file kode tersendiri, yang disebut

unit.

2.1 Procedure

Berikut adalah contoh penggunaan procedure .

1 procedure Menu;

2 begin

3 Writeln('Welcome to Pascal Restaurant. Please select your order');

4 Writeln('1 − Chicken (10$)');

5 Writeln('2 − Fish (7$)');

6 Writeln('3 − Meat (8$)');

7 Writeln('4 Salad (2$)');

8 Writeln('5 − Orange Juice (1$)');

9 Writeln('6 − Milk (1$)');

10 Writeln;

11 end;

11

Page 15: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

12

13 procedure GetOrder(AName: string; Minutes: Integer);

14 begin

15 Writeln('You have ordered : ', AName, ', this will take ',

16 Minutes, ' minutes');

17 end;

18

19 // Main application

20

21 var

22 Meal: Byte;

23

24 begin

25 Menu;

26

27 Write('Please enter your selection: ');

28 Readln(Meal);

29

30 case Meal of

31 1: GetOrder('Chicken', 15);

32 2: GetOrder('Fish', 12);

33 3: GetOrder('Meat', 18);

34 4: GetOrder('Salad', 5);

35 5: GetOrder('Orange juice', 2);

36 6: GetOrder('Milk', 1);

37 else

38 Writeln('Wrong entry');

39 end;

40 Write('Press enter key to close');

41 Readln;

42 end.

2.2 Function

Berikut adalah contoh penggunaan function .

1 procedure Menu;

2 begin

Pemprograman Visual 12 Nanda Arista Rizki, M.Si.

Page 16: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

3 Writeln('Welcome to Pascal Restaurant. Please select your order');

4 Writeln('1 − Chicken (10$)');

5 Writeln('2 − Fish (7$)');

6 Writeln('3 − Meat (8$)');

7 Writeln('4 Salad (2$)');

8 Writeln('5 − Orange Juice (1$)');

9 Writeln('6 − Milk (1$)');

10 Writeln('X − nothing');

11 Writeln;

12 end;

13

14 function GetOrder(AName: string; Minutes, Price: Integer): Integer;

15 begin

16 Writeln('You have ordered: ', AName, ' this will take ',

17 Minutes, ' minutes');

18 Result:= Price;

19 end;

20

21 var

22 Selection: Char;

23 Price: Integer;

24 Total: Integer;

25

26 begin

27 Total:= 0;

28 repeat

29 Menu;

30 Write('Please enter your selection: ');

31 Readln(Selection);

32

33 case Selection of

34 '1': Price:= GetOrder('Checken', 15, 10);

35 '2': Price:= GetOrder('Fish', 12, 7);

36 '3': Price:= GetOrder('Meat', 18, 8);

37 '4': Price:= GetOrder('Salad', 5, 2);

38 '5': Price:= GetOrder('Orange juice', 2, 1);

39 '6': Price:= GetOrder('Milk', 1, 1);

40 'x', 'X': Writeln('Thanks');

41 else

42 begin

43 Writeln('Wrong entry');

44 Price:= 0;

Pemprograman Visual 13 Nanda Arista Rizki, M.Si.

Page 17: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

45 end;

46 end;

47

48 Total:= Total + Price;

49

50 until (Selection = 'x') or (Selection = 'X');

51 Writeln('Total price = ', Total);

52 Write('Press enter key to close');

53 Readln;

54 end.

2.3 Unit

Materi selanjutnya adalah unit. Untuk membuat unit, dapat melalui File/New Unit

atau File/New/Module/Pascal unit, lalu Lazarus membuat template berikut:

1 unit Unit1;

2

3 {$mode objfpc}{$H+}4

5 interface

6

7 uses

8 Classes, SysUtils;

9

10 implementation

11

12 end.

Setelah berhasil membuat unit baru, sebaiknya simpan dengan nama spesi-

fik, seperti Test. Sehingga kode tersebut akan disimpan dalam file yang bernama

”Test.pas”. Selanjutnya mulai tulis prosedur, fungsi, dan kode yang digunakan kem-

bali. Berikut adalah contoh unit.

1 unit Test;

2

Pemprograman Visual 14 Nanda Arista Rizki, M.Si.

Page 18: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

3 {$mode objfpc}{$H+}4

5 interface

6

7 uses

8 Classes, SysUtils;

9

10 const

11 GallonPrice = 6.5;

12

13 function GetKilometers(Payment, Consumption: Integer): Single;

14

15 implementation

16

17 function GetKilometers(Payment, Consumption: Integer): Single;

18 begin

19 Result:= (Payment / GallonPrice) * Consumption;

20 end;

21

22 end.

Untuk menggunakan unit, harus membuat program baru dalam direktori yang

sama dengan unit. Lalu tambahkan unit ini dalam klausa uses . Perhatikan contoh

berikut.

1 program PetrolConsumption;

2

3 {$mode objfpc}{$H+}4

5 uses

6 {$IFDEF UNIX}{$IFDEF UseCThreads}7 cthreads,

8 {$ENDIF}{$ENDIF}9 Classes, SysUtils

10 { you can add units after this }, Test;

11

12 var

13 Payment: Integer;

14 Consumption: Integer;

15 Kilos: Single;

Pemprograman Visual 15 Nanda Arista Rizki, M.Si.

Page 19: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

16

17 begin

18 Write('How much did you pay for your car''s petrol: ');

19 Readln(Payment);

20 Write('What is the consumption of your car (Kilos per one ...

Gallon) ');

21 Readln(Consumption);

22

23 Kilos:= GetKilometers(Payment , Consumption);

24

25 Writeln('This petrol will keep your car running for: ',

26 Format('%0.1f', [Kilos]), ' Kilometers');

27 Write('Press enter');

28 Readln;

29 end.

Pemprograman Visual 16 Nanda Arista Rizki, M.Si.

Page 20: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

BAB 3

Graphical User Interface (GUI)

Untuk membuat GUI, klik File/New/Project/New Project/Application atau klik

Project/New Project/Application. Lalu Lazarus menampilkan form yang masih

kosong seperti pada Gambar (3.1).

Gambar 3.1: Form baru

3.1 Komponen Standar I

3.1.1 Komponen Label dan Button

Setelah membuat aplikasi baru seperti Gambar (3.1), selanjutnya taruh dua Button

dan sebuah Label dari komponen standar pada form. Setelah itu, ubah properti-

properti Button dan Label pada jendela Object Inspector. Jika tidak muncul dalam

17

Page 21: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Gambar 3.2: Standard component page

jendela Lazarus, klik Windows/Object Inspector dari menu utama atau tekan F11.

Gambar 3.3: Object inspector

Untuk Button1, pilih Events tab dan double click the OnClick event. Kemudian

buat kode berikut dalam unit utama.

1 procedure TForm1.Button1Click(Sender: TObject);

2 begin

3 ShowMessage('Anda telah mengklik Button1 :)');

4 end;

Lakukan hal yang sama untuk Button2, namun dengan kode berikut.

1 procedure TForm1.Button2Click(Sender: TObject);

2 begin

3 ShowMessage('Terimakasih :)');

4 Close;

5 end;

Berikut adalah contoh desain form dan unit yang telah terbentuk.

Pemprograman Visual 18 Nanda Arista Rizki, M.Si.

Page 22: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Gambar 3.4: Contoh desain form

1 unit Unit1;

2

3 {$mode objfpc}{$H+}4

5 interface

6

7 uses

8 Classes, SysUtils, FileUtil, Forms, Controls, Graphics, ...

Dialogs, StdCtrls;

9

10 type

11

12 { TForm1 }13

14 TForm1 = class(TForm)

15 Button1: TButton;

16 Button2: TButton;

17 Label1: TLabel;

18 procedure Button1Click(Sender: TObject);

19 procedure Button2Click(Sender: TObject);

20 private

21 { private declarations }22 public

23 { public declarations }24 end;

25

26 var

27 Form1: TForm1;

28

29 implementation

30

31 {$R *.lfm}32

Pemprograman Visual 19 Nanda Arista Rizki, M.Si.

Page 23: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

33 { TForm1 }34

35 procedure TForm1.Button1Click(Sender: TObject);

36 begin

37 ShowMessage('Anda telah mengklik Button1 :)');

38 end;

39

40 procedure TForm1.Button2Click(Sender: TObject);

41 begin

42 ShowMessage('Terimakasih :)');

43 Close;

44 end;

45

46 end.

Memodifikasi program

Ubah prosedur untuk Button1 sebagai berikut:

1 procedure TForm1.Button1Click(Sender: TObject);

2 begin

3 if Button1.tag = 0 then

4 begin

5 Button1.caption := 'Press again';

6 Button1.tag := 1;

7 end else

8 begin

9 Button1.caption := 'Press';

10 Button1.tag := 0;

11 end;

12 end;

Latihan

Dengan memanfaatkan Object properties, buatlah aplikasi dengan menggunakan

Button , yang dapat mengubah warna form dan font pada Label .

Pemprograman Visual 20 Nanda Arista Rizki, M.Si.

Page 24: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

3.1.2 Komponen Edit box

Aplikasi pada bagian ini dapat diinput, lalu dengan mengklik Button , pesan akan

tertampil dalam suatu Label . Untuk membuat aplikasi ini, buat form baru dan

letakkan 2 Label , 1 EditBox , dan 1 Button pada form. Dengan menggunakan

Object Inspector, ubahlah properti dari komponen yang ada sesuai pada Gambar

(3.5). Selanjutnya letakkan kode berikut dalam OnClick event :

1 procedure TfmMain.Button1Click(Sender: TObject);

2 begin

3 Namamu.caption:='Hello ' + edNama.Text;

4 end;

Gambar 3.5: Contoh desain form

Berikut adalah contoh unit yang telah terbentuk.

1 unit unit2;

2

3 {$mode objfpc}{$H+}4

5 interface

6

7 uses

8 Classes, SysUtils, FileUtil, Forms, Controls, Graphics, ...

Dialogs, StdCtrls;

9

10 type

11

12 { TfmMain }13

14 TfmMain = class(TForm)

Pemprograman Visual 21 Nanda Arista Rizki, M.Si.

Page 25: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

15 Button1: TButton;

16 edNama: TEdit;

17 Label1: TLabel;

18 Namamu: TLabel;

19 procedure Button1Click(Sender: TObject);

20 private

21 { private declarations }22 public

23 { public declarations }24 end;

25

26 var

27 fmMain: TfmMain;

28

29 implementation

30

31 {$R *.lfm}32

33 { TfmMain }34

35 procedure TfmMain.Button1Click(Sender: TObject);

36 begin

37 Namamu.caption:='Hello ' + edNama.Text;

38 end;

39

40 end.

Memodifikasi program

Tambahkan unit ”LCLType” dalam klausa uses , lalu tambahkan event KeyDown

pada komponen EditBox dan masukkan kode berikut:

1 if key=vk return then

2 Button1.click;

Perhatikan perubahan yang terjadi! Selanjutnya, ubah prosedur untuk Button1

sebagai berikut:

1 procedure TfmMain.edNamaChange(Sender: TObject);

2 begin

Pemprograman Visual 22 Nanda Arista Rizki, M.Si.

Page 26: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

3 Namamu.caption:='Hello ' + edNama.Text;

4 end;

Perhatikan kembali perubahan yang terjadi!

Komponen edit box juga dapat digunakan dalam membuat kalkulator seder-

hana. Berikut adalah langkah-langkah yang digunakan:

1. Buat aplikasi baru dan letakkan 4 Label , 4 Button , dan 2 EditBox pada

form seperti pada Gambar (3.6).

Gambar 3.6: Contoh desain form

2. Ubah nama dari salah satu Label menjadi LabelHasil.

3. Ubah nama-nama tombol tersebut dengan: BTambah, BKurang, BKali, dan

BBagi dengan masing-masing Caption-nya adalah ”+”, ”-”, ”*”, dan ”/”.

4. Ubah nama Edit1 menjadi Nil1 dan Edit2 menjadi Nil2.

Selanjutnya adalah menyesuaikan kode berikut.

1 unit unit2a;

2

3 {$mode objfpc}{$H+}4

5 interface

6

7 uses

8 Classes, SysUtils, FileUtil, Forms, Controls, Graphics, ...

Dialogs, StdCtrls, Buttons;

9

Pemprograman Visual 23 Nanda Arista Rizki, M.Si.

Page 27: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

10 type

11

12 { TForm1 }13

14 TForm1 = class(TForm)

15 BTambah: TButton;

16 BKurang: TButton;

17 BKali: TButton;

18 BBagi: TButton;

19 Nil1: TEdit;

20 Nil2: TEdit;

21 Label1: TLabel;

22 Label2: TLabel;

23 Label3: TLabel;

24 LabelHasil: TLabel;

25 procedure BBagiClick(Sender: TObject);

26 procedure BKaliClick(Sender: TObject);

27 procedure BKurangClick(Sender: TObject);

28 procedure BTambahClick(Sender: TObject);

29 private

30 { private declarations }31 public

32 { public declarations }33 end;

34

35 var

36 Form1: TForm1;

37

38 implementation

39

40 {$R *.lfm}41

42 { TForm1 }43

44 procedure TForm1.BTambahClick(Sender: TObject);

45 var

46 a,b:real;

47 tambah: real;

48 begin

49 a:=strtofloat(Nil1.text);

50 b:=strtofloat(Nil2.text);

51 tambah:=a+b;

Pemprograman Visual 24 Nanda Arista Rizki, M.Si.

Page 28: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

52 LabelHasil.Caption:=floattostr(tambah);

53 end;

54

55 procedure TForm1.BKurangClick(Sender: TObject);

56 var

57 a,b:real;

58 kurang: real;

59 begin

60 a:=strtofloat(Nil1.text);

61 b:=strtofloat(Nil2.text);

62 kurang:=a−b;63 LabelHasil.Caption:=floattostr(kurang);

64 end;

65

66 procedure TForm1.BKaliClick(Sender: TObject);

67 var

68 a,b:real;

69 kali: real;

70 begin

71 a:=strtofloat(Nil1.text);

72 b:=strtofloat(Nil2.text);

73 kali:=a*b;

74 LabelHasil.Caption:=floattostr(kali);

75 end;

76

77 procedure TForm1.BBagiClick(Sender: TObject);

78 var

79 a,b:real;

80 begin

81 a:=strtofloat(Nil1.text);

82 b:=strtofloat(Nil2.text);

83 if (b = 0) then

84 begin

85 ShowMessage('Tidak bisa dibagi 0');

86 LabelHasil.Caption:='Tidak bisa dibagi 0';

87 end

88 else

89 LabelHasil.Caption:=floattostr(a/b);

90 end;

91

92 end.

Pemprograman Visual 25 Nanda Arista Rizki, M.Si.

Page 29: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

3.1.3 Komponen List box

Materi yang dipelajari pada bagian ini adalah menambah, menghapus, dan mem-

bersihkan teks di dalam list box. Ikuti langkah-langkah berikut:

1. Buat aplikasi baru dan letakkan 4 Button , EditBox , dan ListBox pada

form.

2. Ubah nama-nama tombol tersebut dengan: btAdd, btClear, btDelete, btClose.

3. Ubah Caption tombol-tombol tersebut dengan mengikuti Gambar (3.7).

Gambar 3.7: Contoh desain form

Selanjutnya adalah menyesuaikan kode berikut.

1 unit unit3;

2

3 {$mode objfpc}{$H+}4

5 interface

6

7 uses

8 Classes, SysUtils, FileUtil, Forms, Controls, Graphics, ...

Dialogs, StdCtrls;

9

10 type

11

12 { TForm1 }13

14 TForm1 = class(TForm)

Pemprograman Visual 26 Nanda Arista Rizki, M.Si.

Page 30: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

15 btAdd: TButton;

16 btClear: TButton;

17 btDelete: TButton;

18 btClose: TButton;

19 Edit1: TEdit;

20 ListBox1: TListBox;

21 procedure btAddClick(Sender: TObject);

22 procedure btClearClick(Sender: TObject);

23 procedure btCloseClick(Sender: TObject);

24 procedure btDeleteClick(Sender: TObject);

25 private

26 { private declarations }27 public

28 { public declarations }29 end;

30

31 var

32 Form1: TForm1;

33

34 implementation

35

36 {$R *.lfm}37

38 { TForm1 }39

40 procedure TForm1.btAddClick(Sender: TObject);

41 begin

42 ListBox1.Items.Add(Edit1.Text);

43 end;

44

45 procedure TForm1.btClearClick(Sender: TObject);

46 begin

47 ListBox1.Clear;

48 end;

49

50 procedure TForm1.btDeleteClick(Sender: TObject);

51 var

52 Index: Integer;

53 begin

54 Index:= ListBox1.ItemIndex;

55 if Index <> −1 then

56 ListBox1.Items.Delete(Index);

Pemprograman Visual 27 Nanda Arista Rizki, M.Si.

Page 31: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

57 end;

58

59 procedure TForm1.btCloseClick(Sender: TObject);

60 begin

61 Close;

62 end;

63

64 end.

3.2 Komponen Standar II

3.2.1 Komponen Memo

Selain Edit Box , komponen yang dapat diedit teksnya adalah Memo. Komponen

Memo dapat menulis teks yang lebih dari 1 baris. Pada bagian ini, komponen

tersebut digunakan dalam membuat aplikasi yang dapat menyimpan judul berita.

Untuk lebih jelasnya, buat aplikasi baru lalu tambahkan 2 Button , 1 Label , 1

Memo dan atur propertinya:

1. Untuk Button1, Caption=Add Title.

2. Untuk Button2, Caption=Save, Anchors : Left=False, Right=True.

3. Untuk Edit1, Text=

4. Untuk Memo1, ScrollBars=ssBoth, ReadOnly=True, Anchors : Top=True,

Left=True, Right=True, Bottom=True.

Sesuaikan komponen-komponen tersebut dengan mengikuti Gambar (3.8).

Selanjutnya adalah menyesuaikan kode berikut.

1 unit unit5;

2

3 {$mode objfpc}{$H+}4

5 interface

Pemprograman Visual 28 Nanda Arista Rizki, M.Si.

Page 32: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Gambar 3.8: Contoh desain form

6

7 uses

8 Classes, SysUtils, FileUtil, Forms, Controls, Graphics, ...

Dialogs, StdCtrls;

9

10 type

11

12 { TForm1 }13

14 TForm1 = class(TForm)

15 Button1: TButton;

16 Button2: TButton;

17 Edit1: TEdit;

18 Label1: TLabel;

19 Memo1: TMemo;

20 procedure Button1Click(Sender: TObject);

21 procedure Button2Click(Sender: TObject);

22 procedure FormClose(Sender: TObject; var CloseAction: ...

TCloseAction);

23 procedure FormCreate(Sender: TObject);

24 private

25 { private declarations }26 public

27 { public declarations }28 end;

29

30 var

31 Form1: TForm1;

32

33 implementation

Pemprograman Visual 29 Nanda Arista Rizki, M.Si.

Page 33: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

34

35 {$R *.lfm}36

37 { TForm1 }38

39 procedure TForm1.Button1Click(Sender: TObject);

40 begin

41 Memo1.Lines.Insert(0,FormatDateTime('yyyy−mm−dd hh:nn', Now) + ...

': ' + Edit1.Text);

42 end;

43

44 procedure TForm1.Button2Click(Sender: TObject);

45 begin

46 Memo1.Lines.SaveToFile('news.txt');

47 end;

48

49 procedure TForm1.FormClose(Sender: TObject; var CloseAction: ...

TCloseAction);

50 begin

51 Memo1.Lines.SaveToFile('news.txt');

52 end;

53

54 procedure TForm1.FormCreate(Sender: TObject);

55 begin

56 if FileExists('news.txt') then ...

Memo1.Lines.LoadFromFile('news.txt');

57 end;

58

59 end.

3.2.2 Komponen Group box dan Radio button

Pada bagian ini, komponen utama yang akan dikenalkan adalah Radio Button .

Komponen ini digunakan jika harus menentukan satu dari beberapa pilihan. Adapun

langkah-langkah yang harus diikuti adalah sebagai berikut:

1. Buat aplikasi baru dan tambahkan 4 Label , 3 Edit Box , dan 1 Button .

2. Ubah ketiga Edit Box tersebut dengan nama EPinjam, EBunga, dan EAng-

Pemprograman Visual 30 Nanda Arista Rizki, M.Si.

Page 34: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

sur. Untuk EPinjam dan EBunga, aktifkan NumbersOnly dan kosongkan Text

pada properties. Untuk EAngsur, aktifkan ReadOnly dan kosongkan Text pada

properties.

3. Letakkan 1 GroupBox dan taruh 3 Radio Button didalamnya. Ubah Cap-

tion untuk masing-masing Radio Button dengan nama: 6 bulan, 1 tahun,

dan 2 tahun.

4. Sesuaikan komponen-komponen tersebut dengan mengikuti Gambar (3.9).

Gambar 3.9: Contoh desain form

Selanjutnya adalah menyesuaikan kode berikut.

1 unit unit7;

2

3 {$mode objfpc}{$H+}4

5 interface

6

7 uses

8 Classes, SysUtils, FileUtil, Forms, Controls, Graphics, ...

Dialogs, StdCtrls;

9

10 type

11

12 { TForm1 }13

14 TForm1 = class(TForm)

15 Button1: TButton;

16 EPinjam: TEdit;

17 EBunga: TEdit;

18 EAngsur: TEdit;

19 GroupBox1: TGroupBox;

Pemprograman Visual 31 Nanda Arista Rizki, M.Si.

Page 35: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

20 Label1: TLabel;

21 Label2: TLabel;

22 Label3: TLabel;

23 Label4: TLabel;

24 RadioButton1: TRadioButton;

25 RadioButton2: TRadioButton;

26 RadioButton3: TRadioButton;

27 procedure Button1Click(Sender: TObject);

28 private

29 { private declarations }30 public

31 { public declarations }32 end;

33

34 var

35 Form1: TForm1;

36

37 implementation

38

39 {$R *.lfm}40

41 { TForm1 }42

43 procedure TForm1.Button1Click(Sender: TObject);

44 var

45 lama:byte;

46 cicilanpokok,bunga,angsur:real;

47 begin

48 if RadioButton1.Checked then lama:=6;

49 if RadioButton2.Checked then lama:=10;

50 if RadioButton3.Checked then lama:=24;

51 cicilanpokok:=strtofloat(EPinjam.text)/lama;

52 bunga:=strtofloat(EPinjam.text)*(strtofloat(EBunga.text)/100)/lama;

53 angsur:=cicilanpokok+bunga;

54 EAngsur.Text:=floattostr(angsur);

55 end;

56

57 end.

Pemprograman Visual 32 Nanda Arista Rizki, M.Si.

Page 36: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

3.2.3 Komponen Check box

Berbeda dengan Radio Button , komponen Check Box dapat digunakan untuk

menentukan pilihan yang lebih dari satu. Adapun langkah-langkah yang harus di-

ikuti adalah sebagai berikut:

1. Buat aplikasi baru dan tambahkan 2 Group Box dan 1 Button .

2. Taruh 3 Check Box di dalam Group Box pertama.

3. Taruh 6 Check Box dan 6 Edit di dalam Group Box kedua.

4. Pilih salah satu komponen, lalu double click TabOrder pada properties, dan

urutkan komponen-komponen sesuai dengan Gambar (3.10b).

5. Sesuaikan komponen-komponen tersebut dengan mengikuti Gambar (3.10a).

(a) (b)

Gambar 3.10: Contoh desain form dan TabOrder

Selanjutnya adalah menyesuaikan kode berikut.

1 unit unit8;

2

3 {$mode objfpc}{$H+}4

5 interface

6

Pemprograman Visual 33 Nanda Arista Rizki, M.Si.

Page 37: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

7 uses

8 Classes, SysUtils, FileUtil, Forms, Controls, Graphics, ...

Dialogs, StdCtrls;

9

10 type

11

12 { TForm1 }13

14 TForm1 = class(TForm)

15 Button1: TButton;

16 CheckBox1: TCheckBox;

17 CheckBox2: TCheckBox;

18 CheckBox3: TCheckBox;

19 CheckBox4: TCheckBox;

20 CheckBox5: TCheckBox;

21 CheckBox6: TCheckBox;

22 CheckBox7: TCheckBox;

23 CheckBox8: TCheckBox;

24 CheckBox9: TCheckBox;

25 Edit1: TEdit;

26 Edit2: TEdit;

27 Edit3: TEdit;

28 Edit4: TEdit;

29 Edit5: TEdit;

30 Edit6: TEdit;

31 GroupBox1: TGroupBox;

32 GroupBox2: TGroupBox;

33 Label1: TLabel;

34 procedure Button1Click(Sender: TObject);

35 private

36 { private declarations }37 public

38 { public declarations }39 end;

40

41 var

42 Form1: TForm1;

43

44 implementation

45

46 {$R *.lfm}47

Pemprograman Visual 34 Nanda Arista Rizki, M.Si.

Page 38: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

48 { TForm1 }49

50 procedure TForm1.Button1Click(Sender: TObject);

51 var

52 biayapaket, biayaminum:Real;

53 minum1, minum2, minum3, minum4, minum5, minum6:Real;

54 begin

55 biayapaket:=0;

56 if CheckBox1.Checked then biayapaket:=45;

57 if CheckBox2.Checked then biayapaket:=60;

58 if CheckBox3.Checked then biayapaket:=70;

59

60 if (CheckBox1.Checked and CheckBox2.Checked) then ...

biayapaket:=45+60;

61 if (CheckBox1.Checked and CheckBox3.Checked) then ...

biayapaket:=45+70;

62 if (CheckBox2.Checked and CheckBox3.Checked) then ...

biayapaket:=60+70;

63

64 if (CheckBox1.Checked and CheckBox2.Checked and CheckBox3.Checked)

65 then biayapaket:=45+60+70;

66

67 if CheckBox4.Checked = true then

68 minum1:=15*strtofloat(Edit1.text)

69 else

70 minum1:=0;

71 if CheckBox5.Checked = true then

72 minum2:=10*strtofloat(Edit2.text)

73 else

74 minum2:=0;

75 if CheckBox6.Checked = true then

76 minum3:=9*strtofloat(Edit3.text)

77 else

78 minum3:=0;

79 if CheckBox7.Checked = true then

80 minum4:=4*strtofloat(Edit4.text)

81 else

82 minum4:=0;

83 if CheckBox8.Checked = true then

84 minum5:=3*strtofloat(Edit5.text)

85 else

86 minum5:=0;

Pemprograman Visual 35 Nanda Arista Rizki, M.Si.

Page 39: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

87 if CheckBox9.Checked = true then

88 minum6:=3*strtofloat(Edit6.text)

89 else

90 minum6:=0;

91

92 biayaminum:=minum1+minum2+minum3+minum4+minum5+minum6;

93

94 ShowMessage('Total biaya yang harus dibayar adalah Rp '

95 + floattostr((biayapaket+biayaminum)*1000));

96 end;

97

98 end.

3.3 Komponen Dialog

3.3.1 Komponen Color dialog

Jika komponen Dialog diaktifkan, maka muncul jendela interaktif yang dapat mem-

bantu user mengatur sesuai permintaan. Berikut adalah contoh sederhana meng-

gunakan komponen Color Dialog . Siapkan 1 Button dan 1 Color Dialog , lalu

letakkan seperti pada Gambar(3.11).

Gambar 3.11: Contoh desain form

Double click the Button, lalu masukkan kode berikut:

1 Procedure TForm1.Button1Click(Sender: TObject);

2 begin

Pemprograman Visual 36 Nanda Arista Rizki, M.Si.

Page 40: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

3 if colordialog1.Execute then

4 form1.Color:=(colordialog1.Color);

5 end;

Ketika running, maka tampil dialog seperti Gambar(3.12).

Gambar 3.12: Dialog warna

3.3.2 Komponen Font dialog

Seperti halnya Color Dialog, komponen Font Dialog juga menampilkan suatu

dialog. Untuk lebih jelasnya, ikuti langkah-langkah berikut:

1. Siapkan aplikasi baru dan taruh Memo, Font Dialog , dan Button di atas

form.

2. Letakkan komponen-komponen tersebut seperti Gambar (3.13).

3. Double click the Button, lalu masukkan kode berikut:

1 Procedure TForm1.Button1Click(Sender: TObject);

2 begin

3 if fontdialog1.Execute then

4 memo1.Font:=fontdialog1.Font;

5 end;

Ketika running, maka tampil dialog seperti Gambar(3.14).

Pemprograman Visual 37 Nanda Arista Rizki, M.Si.

Page 41: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Gambar 3.13: Contoh desain form

Gambar 3.14: Dialog font

3.3.3 Komponen Open dialog dan Save dialog

Materi selanjutnya adalah membuat aplikasi text editor sederhana dengan meman-

faatkan komponen Open dialog dan Save dialog . Ikuti langkah-langkah berikut:

1. Buat aplikasi baru dan letakkan komponen-komponen berikut seperti pada

Gambar (3.15):

(a) TMainMenu

(b) TMemo: ubah align property-nya ke alClient dan ScrollBars ke ssBoth

(c) TOpenDialog dan TSaveDialog .

Pemprograman Visual 38 Nanda Arista Rizki, M.Si.

Page 42: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Gambar 3.15: Contoh desain form

2. Double click pada komponen MainMenu1 lalu tambah menu File dengan sub

menu yang berisi Open File, Save File, dan Close sehingga tampak seperti

Gambar (3.16).

Gambar 3.16: Menu editor

Selanjutnya adalah menyesuaikan kode berikut.

1 unit unit4;

2

3 {$mode objfpc}{$H+}4

5 interface

6

7 uses

8 Classes, SysUtils, FileUtil, Forms, Controls, Graphics, ...

Dialogs, Menus,

9 StdCtrls;

10

Pemprograman Visual 39 Nanda Arista Rizki, M.Si.

Page 43: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

11 type

12

13 { TForm1 }14

15 TForm1 = class(TForm)

16 MainMenu1: TMainMenu;

17 Memo1: TMemo;

18 MenuItem1: TMenuItem;

19 MenuItem2: TMenuItem;

20 MenuItem3: TMenuItem;

21 MenuItem4: TMenuItem;

22 OpenDialog1: TOpenDialog;

23 SaveDialog1: TSaveDialog;

24 procedure MenuItem2Click(Sender: TObject);

25 procedure MenuItem3Click(Sender: TObject);

26 procedure MenuItem4Click(Sender: TObject);

27 private

28 { private declarations }29 public

30 { public declarations }31 end;

32

33 var

34 Form1: TForm1;

35

36 implementation

37

38 {$R *.lfm}39

40 { TForm1 }41

42 procedure TForm1.MenuItem2Click(Sender: TObject);

43 begin

44 if OpenDialog1.Execute then

45 Memo1.Lines.LoadFromFile(OpenDialog1.FileName);

46 end;

47

48 procedure TForm1.MenuItem3Click(Sender: TObject);

49 begin

50 if SaveDialog1.Execute then

51 Memo1.Lines.SaveToFile(SaveDialog1.FileName);

52 end;

Pemprograman Visual 40 Nanda Arista Rizki, M.Si.

Page 44: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

53

54 procedure TForm1.MenuItem4Click(Sender: TObject);

55 begin

56 Close;

57 end;

58

59 end.

3.4 Komponen Chart

3.4.1 Komponen TChart

Dalam materi ini, beberapa fungsi matematik dasar ditampilkan secara visual de-

ngan menggunakan komponen Chart . Sebelum memulai, ada dua istilah penting

yang harus dijelaskan yaitu ”series” dan ”chart”. Diagram seperti Gambar (3.19)

adalah chart dan setiap fungsi yang ditampilkan sebagai kurva disebut series. Ber-

ikut adalah langkah-langkah yang dilakukan untuk membuat grafik:

1. Buat aplikasi baru dan taruh komponen Chart sehingga muncul diagram

kosong seperti Gambar (3.17).

Gambar 3.17: Tampilan awal form

2. Double-click on the Chart, sehingga muncul edit series seperti pada Gambar

(3.18). Lalu pilih line series dan ulangi langkah yang sama sehingga ada 3

line series.

Pemprograman Visual 41 Nanda Arista Rizki, M.Si.

Page 45: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Gambar 3.18: Jendela edit series

3. Beri nama ketiga series tersebut dengan SinSeries, CosSeries, dan SinCos-

Series. Beri warna berbeda untuk masing-masing series dengan mengubah

properti SeriesColor .

4. Ketik kode berikut:

1 procedure TForm1.FormCreate(Sender: TObject);

2 const

3 N = 100;

4 MIN = −10;5 MAX = 10;

6 var

7 i: Integer;

8 x: Double;

9 begin

10 for i:=0 to N−1 do

11 begin

12 x := MIN + (MAX − MIN) * i /(N − 1);

13 SinSeries.AddXY(x, sin(x));

14 CosSeries.AddXY(x, cos(x));

15 SinCosSeries.AddXY(x, sin(x)*cos(x));

16 end;

17 end;

Pemprograman Visual 42 Nanda Arista Rizki, M.Si.

Page 46: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

5. Aktifkan sub-properti visible dalam properti Legend.

6. Beri title untuk masing-masing series dengan nama ”y=sin(x)”, ”y=cos(x)”,

dan ”y=sin(x)*cos(x)”.

7. Pada properti Legend, ubah Alignment menjadi laBottomCenter dan Column-

Count menjadi 3.

8. Ubah properti Align pada chart menjadi alClient.

9. Untuk memberi nama pada sumbu horisontal, ubah Caption pada sub-komponen

Buttom dalam AxisList, dengan nama ”sumbu x”. Ubah visible menjadi true

dan font style menjadi bold. Dengan cara yang sama, tampilkan nama ”sumbu

y” untuk sub-komponen Left.

10. Selanjutnya adalah menyesuaikan dengan Gambar (3.19).

Gambar 3.19: Contoh desain form

3.4.2 Komponen TListChartSource dan TRandomChart-

Source

Meskipun Lazarus dapat membuat beberapa chart, namun tipe bar series lebih

sulit dibanding dengan tipe series yang lain. Hal ini dikarenakan ada beberapa

kemungkinan untuk lebar jarak yang digunakan, yaitu:

1. Side-by-side bar series

2. Stacked bar series

Pemprograman Visual 43 Nanda Arista Rizki, M.Si.

Page 47: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

3. Stacked bar series normalized to 100%

4. Vertical bar series

5. Horizontal bar series

Dalam bagian ini, ditunjukkan ide dasar membuat chart dengan beberapa bar se-

ries yang disusun secara side-by-side. Berikut adalah langkah-langkah yang perlu

diperhatikan:

1. Buat aplikasi baru dan taruh komponen TChart pada form. Ubah properti

Align menjadi alClient.

2. Taruh 3 komponen TRandomChartSource (komponen ini dapat diganti

dengan komponen ChartSources jika telah mempunyai data). Beri nama

ketiga komponen ini dengan RedChartSource, BlueChartSource, YellowChart-

Source.

3. Ubah properti ketiga komponen RandomChartSource : PointsNumber = 4,

XMin = 1, XMax = 4, YMin = 0 dan YMax = 100.

4. Double-click pada komponen TChart dan tambahkan 3 bar series.

5. Pada komponen Chart1BarSeries1 , ubah properti: Source menjadi Red-

ChartSource, SeriesColor menjadi clRed, Name menjadi RedBarSeries, dan

title menjadi red. Sesuaikan juga untuk komponen Chart1BarSeries2 dan

Chart1BarSeries3 .

6. Ubah properti Legend.Visible pada komponen TChart menjadi true, sehingga

tampilan form akan seperti pada Gambar (3.20).

7. Untuk masing-masing TBarSeries, ubah properti-properti berikut:

(a) RedBarSeries : BarOffsetPercent = -25, BarWidthPercent = 25.

(b) BlueBarSeries : BarOffsetPercent = 0, BarWidthPercent = 25.

(c) YellowBarSeries : BarOffsetPercent = 25, BarWidthPercent = 25.

Sehingga tampilan form menjadi seperti pada Gambar (3.21).

Pemprograman Visual 44 Nanda Arista Rizki, M.Si.

Page 48: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Gambar 3.20: Contoh desain form

Gambar 3.21: Contoh desain form

8. Tambahkan komponen TListChartSource pada form dan ubah namanya

menjadi LabelsChartSource. Pada properti DataPoint, klik tanda ”...” untuk

memunculkan data point editor, lalu masukkan data seperti pada Gambar

(3.22). Dalam kolom ”X”, menyatakan nilai-nilai koordinat x dari setiap bar

group (dalam hal ini, kolom ”Y” dapat diabaikan). Kolom ”Text” menyatakan

teks yang akan muncul untuk setiap bar group. Dalam hal ini diasumsikan

bahwa data-data series menyatakan nilai-nilai musiman kuartal (Q1, Q2, Q3,

dan Q4).

9. Ubah properti BottomAxis.Marks.Source pada komponen TChart menjadi

LabelsChartSource dan Style menjadi smsLabel. Sehingga tampilan form men-

jadi seperti pada Gambar (3.23).

10. Untuk menjadikan bar series menjadi horisontal, ubah properti ketiga kom-

ponen bar series : AxisIndexX menjadi Left dan AxisIndexY menjadi Bottom.

Pada komponen TChart , ubah properti LeftAxis.Marks.Source menjadi La-

belsChartSource dan Style menjadi smsLabel.

Pemprograman Visual 45 Nanda Arista Rizki, M.Si.

Page 49: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Gambar 3.22: DataPoints editor

Gambar 3.23: Contoh desain form

3.4.3 Komponen TUserDefinedChartSource

Pada bagian ini, data yang digunakan untuk membuat grafik, berasal dari file de-

ngan nama ”population.txt”. Data tersebut merupakan populasi dunia yang diambil

dari situs http://www.census.gov yang terdiri dari ”Age”, ”Both Sexes”, ”Popula-

tion”, ”Male Population”, ”Female Population”, dan ”Sex Ratio”. Perlu diingat

bahwa file ”population.txt” harus diletakkan pada direktori yang sama dengan file-

file aplikasi yang akan dibuat.

Untuk memulai, buat aplikasi baru lalu segera simpan. Buat unit baru ber-

nama ”population.pas” dengan kode berikut:

1 unit population;

2

3 {$mode objfpc}{$H+}

Pemprograman Visual 46 Nanda Arista Rizki, M.Si.

Page 50: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

4

5 interface

6

7 uses

8 Classes, SysUtils;

9

10 type

11 TPopulationRecord = record

12 Age: Integer;

13 Total: Double;

14 Male: Double;

15 Female: Double;

16 Ratio: Double;

17 end;

18

19 type

20 TPopulationArray = array of TPopulationRecord;

21

22 procedure LoadPopulationData(const AFileName: String; var Data: ...

TPopulationArray);

23

24

25 implementation

26

27 procedure LoadPopulationData(const AFileName: String; var Data: ...

TPopulationArray);

28

29 function StripThousandSep(const s: String): String;

30 var

31 i: Integer;

32 begin

33 Result := s;

34 for i:=Length(Result) downto 1 do

35 if Result[i] = ',' then

36 Delete(Result, i, 1);

37 end;

38

39 var

40 List1, List2: TStringList;

41 i, j, n: Integer;

42 s: String;

43 ds: char;

Pemprograman Visual 47 Nanda Arista Rizki, M.Si.

Page 51: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

44 begin

45 ds := FormatSettings.DecimalSeparator;

46 List1 := TStringList.Create;

47 try

48 List1.LoadFromFile(AFileName);

49 n := List1.Count;

50 SetLength(Data, n−2);51 FormatSettings.DecimalSeparator := '.';

52 List2 := TStringList.Create;

53 try

54 List2.Delimiter := #9;

55 List2.StrictDelimiter := true;

56 j := 0;

57 for i:=2 to n−1 do begin

58 List2.DelimitedText := List1[i];

59 s := List1[i];

60 with Data[j] do begin

61 if i < n−1 then

62 Age := StrToInt(trim(List2[0]))

63 else

64 Age := 100;

65 Total := StrToFloat(StripThousandSep(trim(List2[1])));

66 Male := StrToFloat(StripThousandSep(trim(List2[2])));

67 Female := StrToFloat(StripThousandSep(trim(List2[3])));

68 Ratio := StrToFloat(trim(List2[4]));

69 end;

70 inc(j);

71 end;

72 finally

73 List2.Free;

74 end;

75 finally

76 FormatSettings.DecimalSeparator := ds;

77 List1.Free;

78 end;

79 end;

80

81 end.

Tambahkan unit population dalam daftar uses untuk mengakses prosedur Load-

PopulationData. Tambahkan variabel PopulationData dengan tipe TPopulation-

Pemprograman Visual 48 Nanda Arista Rizki, M.Si.

Page 52: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Array ke dalam bagian private, sehingga aplikasi sudah siap untuk memanggil pro-

sedur LoadPopulationData dari OnCreate event untuk form.

Komponen Panel dan Combo Box sangat berguna dalam aplikasi ini, ka-

rena file yang akan dibaca berisi beberapa kategori yaitu ”total”, ”male”, ”female

population”, dan ”Sex Ratio”. Sehingga tambahkan komponen Panel pada form,

ubah properti align menjadi alTop dan hapus teks untuk Caption . Untuk kompo-

nen Combo Box :

1. Letakkan diatas komponen Panel .

2. Atur properti Style menjadi csDropdownList.

3. Tambahkan ”Total population”, ”Male population”, ”Female population”, dan

”Ratio male/female (%)” ke properti Items.

4. Ubah properti ItemIndex menjadi 0.

Letakkan komponen TChart pada form dan atur propertinya:

1. Align=alClient, BackColor=clWhite, Grid.Color=clSilver

2. BottomAxis.Visible=true, BottomAxis.Title.Caption=Age, LeftAxis.Visible=true,

LeftAxis.Title.Caption=Total population, Title.Text=World population

3. Ubah semua font style menjadi fsBold.

Tambahkan TAreaSeries ke komponen TChart lalu ubah properti: SeriesColor

menjadi clSkyBlue, AreaLinesPen menjadi psClear, dan ConnectType menjadi ct-

Line. Letakkan komponen utama TUserDefinedChartSource pada form, lalu

ubah Source pada Chart1AreaSeries1 menjadi UserDefinedChartSource1. Selanjut-

nya adalah menyesuaikan kode berikut.

1 unit unit14;

2

3 {$mode objfpc}{$H+}4

5 interface

Pemprograman Visual 49 Nanda Arista Rizki, M.Si.

Page 53: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

6

7 uses

8 Classes, SysUtils, FileUtil, TAGraph, TASeries, TASources, ...

Forms, Controls,

9 Graphics, Dialogs, ExtCtrls, StdCtrls, population, TACustomSource;

10

11 type

12

13 { TForm1 }14

15 TForm1 = class(TForm)

16 Chart1: TChart;

17 Chart1AreaSeries1: TAreaSeries;

18 ComboBox1: TComboBox;

19 Panel1: TPanel;

20 UserDefinedChartSource1: TUserDefinedChartSource;

21 procedure ComboBox1Select(Sender: TObject);

22 procedure FormCreate(Sender: TObject);

23 procedure UserDefinedChartSource1GetChartDataItem(

24 ASource: TUserDefinedChartSource; AIndex: Integer;

25 var AItem: TChartDataItem);

26 private

27 { private declarations }28 PopulationData: TPopulationArray;

29 public

30 { public declarations }31 end;

32

33 var

34 Form1: TForm1;

35

36 implementation

37

38 {$R *.lfm}39

40 const

41 POPULATION FILE = 'population.txt';

42

43 { TForm1 }44

45 procedure TForm1.FormCreate(Sender: TObject);

46 begin

Pemprograman Visual 50 Nanda Arista Rizki, M.Si.

Page 54: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

47 LoadPopulationData(POPULATION FILE, PopulationData);

48 UserDefinedChartSource1.PointsNumber := Length(PopulationData);

49 Chart1.LeftAxis.Title.Caption := ...

Combobox1.Items[Combobox1.ItemIndex];

50 end;

51

52 procedure TForm1.UserDefinedChartSource1GetChartDataItem(

53 ASource: TUserDefinedChartSource; AIndex: Integer; var AItem: ...

TChartDataItem);

54 begin

55 AItem.X := PopulationData[AIndex].Age;

56 case Combobox1.ItemIndex of

57 0: AItem.Y := PopulationData[AIndex].Total;

58 1: AItem.Y := PopulationData[AIndex].Male;

59 2: AItem.Y := PopulationData[AIndex].Female;

60 3: AItem.Y := PopulationData[AIndex].Ratio;

61 end;

62 end;

63

64 procedure TForm1.ComboBox1Select(Sender: TObject);

65 begin

66 Chart1.LeftAxis.Title.Caption := ...

Combobox1.Items[Combobox1.ItemIndex];

67 UserDefinedChartSource1.Reset;

68 end;

69

70 end.

3.5 Materi Tambahan

Mengganti font Label dengan Combo box

Berikut adalah langkah-langkahnya:

1. Tambahkan 1 Label dan 1 ComboBox pada form.

2. Aktifkan properti ReadOnly untuk komponen ComboBox .

3. Tambahkan kode berikut

Pemprograman Visual 51 Nanda Arista Rizki, M.Si.

Page 55: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

1 procedure TForm1.FormCreate(Sender: TObject);

2 begin

3 ComboBox1.Items.AddStrings(Screen.Fonts);

4 end;

5

6 procedure TForm1.ComboBox1Change(Sender: TObject);

7 begin

8 Label1.Font.Name := ComboBox1.Items.Strings[ ...

(ComboBox1.Items.IndexOf(ComboBox1.Text))];

9 end;

Multi form

Pada bagian sebelumnya, form yang digunakan hanya satu. Namun dalam aplikasi

nyata, seringkali dibutuhkan form yang lebih dari satu. Adapun langkah-langkah

yang digunakan untuk membuat aplikasi yang multi form adalah sebagai berikut:

1. Buat aplikasi baru dan simpan dalam folder baru dengan nama secondform.

2. Simpan unit utama sebagai main.pas, dan namakan komponen form sebagai

fmMain. Lalu simpan project dengan nama secondform.lpi.

3. Tambahkan form baru dengan mengklik File/New Form. Simpan unit ba-

ru dengan nama second.pas, dan beri nama untuk komponen form sebagai

fmSecond.

4. Tambahkan sebuah Label dalam form kedua dengan Caption property : ’Se-

cond Form’.

5. Kembali pada form utama dan letakkan sebuah Button .

6. Tambahkan kode berikut setelah implementation section pada unit uta-

ma:

1 uses second;

7. Buat OnClick event pada Button , lalu tulis kode berikut:

Pemprograman Visual 52 Nanda Arista Rizki, M.Si.

Page 56: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

1 fmSecond.Show;

atau

1 fmSecond.ShowModal;

Mengurangi ukuran file eksekusi

Tanpa disadari, besarnya ukuran executable file yang telah dibuat oleh Lazarus men-

jadi tidak efisien ketika memory komputer yang tersedia sangat sedikit. Jika ingin

mengurangi ukuran file tersebut, klik Project/Project Options/Debugging, lalu dis-

able pilihan ”Generate debugging info for GDB”. Selanjutnya Rebuild project.

GDB (GNU debugger) merupakan debugger standar untuk Lazarus.

Pemprograman Visual 53 Nanda Arista Rizki, M.Si.

Page 57: Pemprograman Visualmath.fmipa.unmul.ac.id/nanda/pemvis.pdf · 1.6 Record ... yang tertera pada Tabel (1.1) dapat diperoleh dengan menggunakan fungsi Low, High, dan ... Lalu dari procedure

Daftar Pustaka

1. http://wiki.lazarus.freepascal.org

2. Motaz Abdel Azeem. (2013). Start Programming Using Object Pascal .

54