MODUL I

PENGENALAN APLIKASI DELPHI DAN

MENGGAMBAR SUMBUKOORDINAT

A. Tujuan
1. Mahasiswa mampu untuk menjalankan aplikasi delphi dengan baik dan
benar
2. Mahasiswa dapat mengenal bagian-bagian dari aplikasi delphi dan
mampu untukmenambahkan komponen kedalam sebuag form
3. Mahasiswa mampu untuk menyimpan dan menjalankan aplikasi
dengan baik danbenar
4. Mahasiswa mampu untuk membuat garis sederhana dengan
menggunkan fungsicanvas

B. Software dan peralatan yang dipergunakan

1. Aplikasi Delphi 7
2. Microsoft Office Word 2016

C. Dasar Teori
Delphi merupakan suatu bahasa pemrograman yang menggunakan
visualisasi dalam penggunaannya.Delphi juga merupakan suatu
program berbasis bahasa Pascal yang berjalan dalam lingkungan
Windows. Delphi juga merupakan sebuah perangkat lunak
pengembangan program yang terintegrasi, yang meliputi fungsi untuk
penulisan program, kompilasi sampai dengan pelacakan kesalahan
(debugging). Delphi adalah suatu bahasa pemrograman yang telah
memanfaatkan metode pemrograman Object Oriented Programming
(OOP).
Secara default elemen IDE terdiri atas beberapa bagian, yaitu Menu
Bar, Tool Bar,Component Palette, Object Treeview, Object Inspector,
Form Designer, dan Code Editor.

1. Menu Bar digunakan untuk memilih perintah (Command) yang

diberikan kepada Delphi untuk melakukan suatu pekerjaan tertentu,
misalnya menyimpan file,menampilkan elemen tertentu, menginstal
komponen baru dan lain-lain.

2. Tool Bar berisi icon (gambar kecil) yang mengilustrasikan perintah

yang diberikan,misalnya icon disket untuk perintah menyimpan file,
icon buku untuk perintahbantuan(Help).

3. Component Palette berisi icon yang menunjukan komponen yang dapat

ditambahkanke dalam form yang kita buat, baik komponent visual
seperti button (tombol), text box, combo box dan lain-lain.

4. Form Designer merupakan jendela untuk mendesain tampilan aplikasi

yang kita buat. Bentuk dasar dari tampilan program yang dibuat
menggunakan Delphi ini adalah berbentuk form. Didalam form ini
dapat ditempatkan komponen-komponen visual dan non visual.

1
5. Code Explorer digunakan untuk menambahkan dan mengedit program
yang kita buat.Dalam Delphi, beberapa bagian program akan dibuat
secara otomatis ketika kita memulai membuat sebuah proyek. Ada juga
bagian program yang akan dibuat otomatis ketika kita buat suatu event
pada komponent yang ditambahkan ke form.

6. Object TreeView berisi daftar komponen (disebut juga objek) yang kita
tambahkan dalam form yang dibuat di Form Editor.

7. Object Inspector Berisi daftar property dan event dari komponen yang
sedang dipilihdi form editor. Object Inspector mempunyai 2 buah tab
yaitu tab Properties dan Events. Property komponen dapat diubah
dengan mengetikan pada bagian kanan dariobject inspector. Setiap
komponen dapat memiliki event untuk menentukan perilakunya
apabila dilakukan hal tertentu pada komponen tersebut.

Komponen pada Delphi terdiri atas komponen visual dan komponen

2
 non visual. Komponen visual akan ditampilkan apa adanya dalam form
yang dibuat, sedangkan komponen visual tidak terlihat pada waktu
dieksukusi.

D. PreTest
1. Sebutkan dan jelaskan cara menambahkan komponen ke dalam sebuah form!
2. Jelaskan beberapa cara untuk menjalankan program yang sudah dibat di
delphi!
3. Sebutkan dan jelaskan 3 Properties yang ada pada komponen form!

E. Praktikum
Praktikum 1
1. Buka program Delphi 7 dengan mengklik icon Delphi 7 yang ada
komputer/laptop.
2. Sebelum merancang dan membuat kode program disarankan untuk
menyimpan proyekbaru. Klik File  Save Project As…
3. Muncul kotak dialog Save Unit1 As beri nama dengan nama Modul1.pas
dan beri namaProject1.dpr kemudian klik Save.

Gambar 1.1 Kotak Dialog Save Unit1 As

4. Kemudian akan tampil area kerja dari delphi yaitu form designer dan
code editor. Jalankan aplikasi dengan mengklik menu Run  run atau
bisa juga dengan menekan tombol F9. Jika berhasil dan berjalan akan
tampil sebuah form kosong. Kemudian kliktombol x.

Gambar 1.2 Form1 setelah dijalankan

3
5. Rancanglah form1 seperti gambar 1.3 dengan menggunakan komponen
Popupmenu pada pallete standar:

Gambar 1.3 Desain Tampilan Form 1

6. Tambahkan label1 dan rubah untuk captionya menjadi “BELAJAR
GRAFIKAKOMPUTER DENGAN DELPHI SANGAT MUDAH
DAN MENARIK”

7. Klik pada Menu File kemudian klik Exit kemudian masukan kode
program dibawahini:

8. Klik Menu Operasi kemudian klik Merah kemudian masukan kode

program dibawahini:

9. Klik Menu Operasi kemudian klik Hijau kemudian masukan kode

program dibawahini:

10. Klik Menu Operasi kemudian klik Kuning kemudian masukan kode
program dibawahini:

11. Klik Menu Operasi kemudian klik Hitam kemudian masukan kode
program dibawahini:

12. Jalankan program dengan menekan tombol F9 atau dengan cara mengklik

4
 menu Run
 run
13. Perhatikan dan amati hasil dari program yang dibuat

Praktikum 2
1. Tambahkan form 2 pada Project1.dpr dengan cara klik menu File
kemudian pilih NewForm. Kemudian klik save.

2. Rancanglah Form2 seperti gambar dibawah ini

3. Klik komponen Edit3 kemudian pada properties pilih Enabled menjadi False
4. Klik menu Operasi kemudian klik Penjumlahan kemudian masukan
kode program dibawah ini:

5. Klik menu Operasi kemudian klik Pengurangan kemudian masukan

kode program dibawah ini:

6. Tambahkan dan buatkan kode program untuk perkalian dan pembagian

7. Jalankan program dengan menekan tombol F9 atau dengan mengklik menu Run
 run
8. Perhatikan dan amati dari hasil program yang dibuat

5
Praktikum 3

1. Tambahkan form 3 pada Project1.dpr dengan cara klik menu File

kemudian pilih NewForm. Kemudian klik save.

2. Rancanglah Form seperti gambar dibawah ini, dengan menambahkan

objek Buton1, Button2, Button3, Button4, Button5, Button6,.
Kemudian Pada objek Button1 atur properti caption ganti dengan
SumbuX. Button2 ganti dengan SumbuY. Button3 gantidengan Titik1.
Button4 ganti dengan Titik2. Button5 ganti dengan Refresh. Kemudian
tambahkan label 1 dengan caption “SUMBU KOORDINAT DAN
TITIK”.

3. Klik Button SumbuX dan masukan kode program dibawah ini:

4. Klik Button SumbuY dan masukan kode program dibawah ini:

5. Klik Button Titik1 dan masukan kode program dibawah ini:

6. Klik Button Titik2 dan masukan kode program dibawah ini:

6
7. Klik Button refresh dan masukan kode program dibawah ini:

8. Jalankan program dengan menekan tombol F9 atau dengan mengklik menu Run
run
9. Perhatikan dan amati dari hasil program yang dibuat

F. PostTest
1. Buatlah sebuah form 4 yang berisi komponen-komponen seperti dibawah
ini:

Keterangan:
Buat aplikasi baru dengan nama form4, kemudian tambahkan komponen
listbox, buttondan label

G. Pertanyaan dan Tugas

1. Jelaskan fungsi dari komponen listbox
2. Buatlah laporan praktikum dari praktikum modul 1 ini.

7
 MODUL 2
MENGGAMBAR OBJEK PRIMITIF

A. Tujuan
1. Mahasiswa mampu untuk menggambar titik, garis, rectangle,
ellipse, arc,roundrect, polygon sederhana menggunakan bahasa
pemrograman Delphi
2. Mahasiswa dapat mengenal dan menggunkan fungsi canvas.moveto
3. Mahasiswa dapat mengenal dan mengunakan fungsi canvas.lineto

B. Software dan peralatan yang dipergunakan

1. Aplikasi Delphi 7
2. Microsoft Office Word 2016

C. Dasar Teori
Pada pemrograman Delphi dapat dibangun bentuk-bentuk objek
primitif seperti garis, lingkaran, kotak dan objek lainnya. Titik
merupakan suatu ide yang abstrak. Sebuah titik digambarkan dengan
memakai tanda noktah, kemudian dibubuhi dengan nama titik itu.
Sebuah titik hanya dapat ditentukan oleh letaknya, tetapi tidak
mempunyai ukuran. Titik adalah bentuk grafis paling sederhana.
Garis merupakan himpunan titik-titik yang anggotanya terdiri dari
lebih dari satu buah titik. Garis dibuat dengan menentukan dua buah
endpoint yaitu titik awal dan titik akhir. Garis mempunyai beberapa
tipe garis (linetype), diantaranya garis tebal (solid line), garis putus-
putus (dashed line), dan garis titik-titik (dotted line).
Delphi menyediakan fasilitas untuk menggambar menggunakan
canvas.Obyek canvas tetap digunakan untuk menempatkan gambar
yang akan dibuat. Selain menempatkan gambar, obyek canvas juga
memiliki properti untuk warna, ukuran garis, dan jenis font. Objek
canvas memiliki beberapa method lain untuk menggambar:

Kode program canvas yang sering digunakan adalah:

Canvas.Moveto(x,y) : digunakan untuk menempatkan
posisi awal garisCanvas.Lineto(x,y) : digunakan
untuk menempatkan posisi akhir garis

Semua nilai koordinat bernilai positif dan merupakan suatu

bialngan buat. Aturankoordinat pada canvas adalah sebagai

Arah Koordinat X Membesar

Titik(0,0)

Arah Koordinat Y Membesar

berikut:
Gambar 2.1.
Koordinat pada
canvas

8
 Objek canvas memiliki beberapa method yang daat digunakan untuk
menggambardiantaranya adalah:

Method Keterangan
Arc Menggambar lengkungan
Ellipse Menggambar lingkaran
Moveto Menentukan posisi awal garis
Lineto Menentukan posisi akhir garis
Rectangle Membuat kotak
Roundrect Membuat kotak yang memiliki sudut yang melengkung
Polygon Menggambar polygon

D. PreTest
a. Jelaskan fungsi dari canvas.moveto dan canvas.lineto!
b. Apakah penulisan kode program di delphi harus menggunakan
huruf kecil semuaatau tidak, jelaskan
c. Sebutkan beberapa obyek yang bisa dibentuk dari garis dan titik!

E. Praktikum
Praktikum 1
a. Buka program Delphi 7 dengan mengklik icon Delphi 7 yang ada
komputer/laptop.
b. Sebelum merancang dan membuat kode program disarankan untuk
menyimpan proyekbaru. Klik File  Save Project As…
c. Muncul kotak dialog Save Unit1 As beri nama dengan nama
Praktikum1.pas dan berinama Project1.dpr kemudian klik Save.

Gambar 2.2 Kotak Dialog Save Unit1 As

d. Kemudian akan tampil area kerja dari delphi yaitu form designer dan
code editor. Jalankan aplikasi dengan mengklik menu Run  run atau
bisa juga dengan menekan tombol F9. Jika berhasil dan berjalan akan
tampil sebuah form kosong. Kemudian kliktombol x.
e. Rancanglah form1 seperti gambar 2.3:

9
 Gambar 2.3 Desain Tampilan Form 1
f. Klik pada menu File kemudin klik keluar kemudian masukan kode
program dibawah ini:

g. Klik pada menu Operasi Garis kemudian klik Garis Vertikal kemudian
masukan kodeprogram dibawah ini:

h. Klik pada menu Operasi Garis kemudian klik Garis Horizontal

kemudian masukankode program dibawah ini:

i. Klik pada menu Operasi Garis kemudian klik Garis Diagonal1

kemudian masukankode program dibawah ini:

j. Klik pada menu Operasi Garis kemudian klik Garis Diagonal2

kemudian masukankode program dibawah ini:

10
k. Jalankan program dengan menekan tombol F9 atau dengan cara mengklik
menu Run
 run
l. Perhatikan dan amati hasil dari program yang dibuat

Praktikum 2
1. Pada form1 tambahkan menu Operasi Obyek yang terdiri dari
Rectangle, Ellipse, Arc,RoundRect, Polygon. Perhatikan gambar 2.4.

Gambar 2.4 Desain Tampilan Form 1

2. Tambahkan image1 dari pallete additional kedalam form1

Gambar 2.5 Image 1 pada form1

3. Klik Menu Operasi Obyek kemudian klik Rectangle kemudian masukan
kode programdi bawah ini:

4. Klik Menu Operasi Obyek kemudian klik Ellipse kemudian masukan

kode program dibawah ini:

11
5. Klik Menu Operasi Obyek kemudian klik RoundRect kemudian
masukan kodeprogram dibawah ini:

6. Klik Menu Operasi Obyek kemudian klik Polygon kemudian masukan

kode programdibawah ini:

7. Jalankan program dengan menekan tombol F9 atau dengan mengklik menu Run
 run
8. Perhatikan dan amati dari hasil program yang dibuat

Praktikum3
1. Pada form1 kita akan memberikan warna untuk rectangledan obyek yang
lainnya.
2. Klik menu Operasi Obyek kemudian klik rectangle kemudian
tambahkan kodeprogram dibawah ini:

3. Jalankan program dengan menekan tombol F9 atau dengan mengklik menu Run
 run
4. Tambahkan warna untuk objek lainnya
5. Perhatikan dan amati dari hasil program yang dibuat

F. PostTest
1. Buatlah sebuah form 2 yang berisi gambar sebuah kendaraan
menggunakan objekprimitif yang sudah dijelaskan.
2. Buatlah sumbu koordinat untuk sumbu X dan sumbu Y
.
G. Pertanyaan dan Tugas
1. Buatlah laporan dan resume praktikum dari praktikum modul 2 ini.

12
 MODUL 3
MENGGAMBAR GARIS
MENGGUNAKAN ALGORITMA DDA, BRESENHAM
DAN POLINOM

A. Tujuan
a. Mahasiswa dapat mengenal metode DDA,Bresenham, dan Polinom
b. Mahasiswa dapat membuat garis menggunakan algoritma DDA
c. Mahasiswa dapat membuat garis menggunakan algoritma Bresenham
d. Mahasiswa dapat membuat garis menggunakan algoritma Polinom

B. Software dan peralatan yang dipergunakan

a. Aplikasi Delphi 7
b. Microsoft Office Word 2016

C. Dasar Teori
Proses pembuatan garis di grafika komputer dapat menggunakan
algoritma DDA dan algoritma bresenham. Algoritma DDA adalah
algoritma pembentukan garis berdasarkan perhitungan x dan y,
menggunakan rumus y = m. x. Garis dibuat denganmenentukan dua
endpoint yaitu titik awal dan titik akhir. Setiap koordinat titik yang
membentuk garis diperoleh dari perhitungan, kemudian dikonversikan
menjadi nilaiinteger.
Digital Diferensial Analyser (DDA) adalah algoritma pembentukan
garis berdasarkan perhitungan dx maupun dy, menggunakan rumus
dy = m . dx
Garis dibuat menggunakan dua endpoint, yaitu titik awal dan titik
akhir. Setiap koordinat titik yang membentuk garis diperoleh dari
perhitungan, kemudian dikonversikan menjadi nilai integer. Langkah
Pembentukan Garis DDA:
a) Tentukan dua titik yang akan dihubungkan dalam pembentukan garis
b) Tentukan titik awal (x0,y0) dan titik akhir (x1,y1).
c) Hitung dx = x1- x0dan dy = y1 – y0
d) Tentukan step = max( |dx| , |dy| )
e) Hitung penambahan koordinat pixel XInc = dx / step dan YInc = dy / step
f) Koordinat selanjutnya (x+XInc, y+yInc)
g) Posisi pada layar ditentukan dengan pembulatan nilai koordinat tersebut
h) Ulangi langkah f dan g untuk menentukan posisi pixel berikutnya. sampai
x=x1
dan y=y1.

Algoritma Bressenham mengembangkan algoritma klasik yang

lebih menarik, karena hanya menggunakan perhitungan matematika
dengan bilangan integer. Dengan demikian tidak perlu membulatkan
nilai posisi setiap pixel setiap waktu. Algoritma garis Bressenhem
disebut juga midpoint line algorithm adalah algoritma konversi
penambahan nilai integer yang juga dapat diadaptasi untuk
menggambar sebuah lingkaran.
Langkah-Langkah membentuk garis menggunakan algoritma Bressenhem:
a. Tentukan dua titik yang akan dihubungkan.
b. Tentukan titik awal (X0, Y0) dan titik akhir (X1,Y1).
c. Hitung dx, dy, 2dy, dan 2dy-2dx.
d. Hitung parameter p0 = 2dy-dx
e. Untuk setiap xk sepanjang jalur garis, dimulai dengan k = 0
- bila pk<0 maka titik selanjutnya (xk+1, yk) dan pk+1 = pk +2dy

13
 - bila tidak maka titik selanjutnya adalah (xk +1, yk +1) dan pk+1 = pk
+2dy–2dx.
f. Ulangi langkah nomor e untuk menentukan posisi piksel
selanjutnya, sampai x =x1 dan y = y1
D. PreTest
1. Sebutkan dan jelaskan kelebihan dari algoritma DDA!
2. Sebutkan dan jelaskan kelebihan dari algoritma Polinom!
3. Sebutkan dan jelaskan kelebihan dari algoritma Bressenham!
4. Jelaskan perbedaan antara DDA, Polinom dan Bressenham!

E. Praktikum
Praktikum 1
a. Buka program Delphi 7 dengan mengklik icon Delphi 7 yang ada
komputer/laptop.
b. Sebelum merancang dan membuat kode program disarankan untuk
menyimpan proyekbaru. Klik File  Save Project As…
c. Muncul kotak dialog Save Unit1 As beri nama dengan nama
Praktikum1.pas dan berinama Project1.dpr kemudian klik Save.

Gambar 3.1 Kotak Dialog Save Unit1 As

d. Kemudian akan tampil area kerja dari delphi yaitu form designer dan
code editor. Jalankan aplikasi dengan mengklik menu Run  run atau
bisa juga dengan menekan tombol F9. Jika berhasil dan berjalan akan
tampil sebuah form kosong. Kemudian kliktombol x.
e. Rancanglah form1 seperti gambar 3.2:

14
 Gambar 3.2 Desain Tampilan Form 1
f. Isi tiap property adalah sebagai berikut
Komponen Properti Nilai
Form Name Form1
Caption Algoritma Garis
Width 340
Height 135
Label1 Caption Menggambar Garis
Menggunakan Algoritma
DDA, Bresenham, dan
Polinom
Label2 Caption X1
Label3 Caption Y1
Label4 Caption X2
Label5 Caption Y2
Label6 Caption Xawal
Label7 Caption Xakhir
Label8 Caption Nilai A =
Label9 Caption Nilai B =
Edit1 Name edX1
Text Kosongkan
Edit2 Name edY1
Text Kosongkan
Edit3 Name edX2
Text Kosongkan
Edit4 Name edY2
Text Kosongkan
Edit5 Name edXAwal
Text Kosongkan
Edit6 Name edXAkhir
Text Kosongkan
Edit7 Name edA
Text Kosongkan
Edit8 Name edB

15
 Text Kosongkan

g. Kemudian pilih Objek Form1, pada event OnPaint klik 2x disebelah

kanannya,kemudian ketikan kode program berikut:

h. Klik menu operasi kemudian klik DDA, setelah muncul halaman

CodeEditor, makatuliskan kode progam berikut:

i. Klik menu Operasi kemudian klik Bresenham, setelah muncul

halaman CodeEditor,maka tuliskan kode progam berikut:

16
j. Klik menu operasi kemudian klik Polinom, setelah muncul
halaman CodeEditor,maka tuliskan kode progam berikut:

k. Klik menu File kemudian klik Refresh, setelah muncul halaman

CodeEditor, makatuliskan kode progam berikut:

l. Klik menu File kemudian klik Exit, setelah muncul halaman CodeEditor,
maka tuliskankode progam berikut:

m. Jalankan program dengan menekan tombol F9 atau dengan cara mengklik

menu Run
 run

17
 Gambar 3.3 Hasil
program

n. Perhatikan dan amati hasil dari program yang dibuat

F. PostTest
1. Buatlah sebuah sebuah objek seperti gambar di bawah ini:

.
G. Pertanyaan dan Tugas
1. Buatlah langkah-langkah untuk membuat menu
2. Buatlah laporan dan resume praktikum dari praktikum modul 3 ini.

18