BAB 4
IMPLEMENTASI DAN PENGUJIAN
Pada bab implementasi dan pengujian ini akan diuraikan penjelasan mengenai implementasi dari perancangan yang telah dibuat dan pembahasan hasil pengujian
terhadap implementasi.
4.1. Implementasi
Tahap implementasi merupakan tahapan lanjutan setelah tahap analisis dan tahap perancangan telah selesai. Hal yang telah dipaparkan pada bab sebelumnya akan
diimplementasikan pada tahap ini menggunakan bahasa pemrograman Java dan SQLite sebagai media penyimpan data. Perangkat lunak yang digunakan untuk Java
adalah NetBeans IDE versi 8.0.2. Sedangkan perangkat lunak yang digunakan untuk menyimpan data adalah SQLite Database Browser 2.0 b1.
4.1.1 Halaman Utama
Halaman utama adalah halaman awal saat aplikasi dijalankan. Halaman utama dapat dilihat pada Gambar 4.1.
Gambar 4.1. Halaman Awal
Universitas Sumatera Utara
49
Pada Gambar 4.1. terdapat 3 button, yaitu : mulai pencarian, bantuan dan tentang. Button mulai pencarian akan dilanjutkan ke halaman mulai pencarian dimana
pengguna dapat memilih metode pemanggilan citra yang diinginkan dan meng-input- kan citra query ke database. Button bantuan akan dilanjutkan ke halaman bantuan dan
button tentang akan dilanjutkan ke halaman tentang.
4.1.2 Halaman Mulai Pencarian
Halaman mulai pencarian merupakan halaman dimana pengguna dapat memilih metode pemanggilan citra yang diinginkan. Halaman mulai pencarian dapat dilihat
pada Gambar 4.2.
Gambar 4.2. Halaman Mulai Pencarian
Pada Gambar 4.2. terdapat 2 tabbedPane, yaitu : HSV dimana pengguna dapat melakukan pemanggilan citra berdasarkan fitur warna citra menggunakan
deteksi warna HSV dan Sobel dimana pengguna dapat melakukan pemanggilan citra berdasarkan fitur bentuk menggunakan Operator Sobel. Pada halaman ini juga
terdapat menuBar File yang berisi menuItem ‘Input Citra ke Database’ untuk
menampilkan halaman input citra ke database.
Universitas Sumatera Utara
50
4.1.3 Halaman Input Citra ke Database
Halaman ini merupakan halaman dimana pengguna dapat meng-input-kan citra ke dalam database. Halaman input citra ke database dapat dilihat pada Gambar 4.3.
Gambar 4.3. Halaman Input Citra ke Database
4.1.4 Halaman Bantuan
Halaman bantuan berfungsi untuk menampilkan panduan singkat tentang cara penggunaan aplikasi ini. Halaman bantuan dapat dilihat pada Gambar 4.4.
Gambar 4.4. Halaman Bantuan
Universitas Sumatera Utara
51
4.1.5 Halaman Tentang
Halaman tentang berfungsi untuk menampilkan informasi singkat tentang peneliti, judul penelitian, logo universitas, program studi, dan fakultas penulis. Halaman
tentang dapat dilihat pada Gambar 4.5.
Gambar 4.5. Halaman Tentang
4.1.6 Proses Pemanggilan Citra Berdasarkan Fitur Bentuk
Proses pemanggilan citra berdasarkan fitur bentuk dengan contoh file citra PlumFlower5.jpg berdimensi 500 x 500 piksel adalah sebagai berikut.
Gambar 4.6. Citra PlumFlower5.jpg
Universitas Sumatera Utara
52
Citra PlumFlower5.jpg terdiri dari 250.000 piksel dimana tiap piksel memiliki 3 komponen warna yaitu merahR, hijauG dan biruB. Setiap komponen
warna memiliki jangkauan nilai antara 0 sampai 255. Tabel piksel dari citra PlumFlower5.jpg dapat dilihat pada Tabel 4.1. berikut ini.
Tabel 4.1. Piksel Citra PlumFlower5.jpg
1 2
3 4
... ...
499 R
G B
12 21
16 11
20 15
11 20
15 11
20 15
11 20
15 .
. 6
13 6
1 R
G B
12 21
16 11
20 15
11 20
15 11
20 15
11 20
15 .
. 6
13 6
2 R
G B
12 21
16 11
20 15
11 20
15 11
20 15
11 20
15 .
. 6
13 6
3 R
G B
12 21
16 11
20 15
11 20
15 11
20 15
11 20
15 .
. 6
13 6
4 R
G B
12 21
16 11
20 15
11 20
15 11
20 15
11 20
15 .
. 6
13 6
... .
. .
. .
. .
. .
... .
. .
. .
. .
. .
499 R
G B
10 17
9 10
17 9
10 17
9 10
17 9
10 17
9 .
. 201
212 234
Citra RGB dikonversi menjadi citra grayscale dengan persamaan 2.1. Hasil grayscale
citra PlumFlower5.jpg dapat dilihat pada Gambar 4.7. dan tabel piksel citra grayscale
dapat dilihat pada Tabel 4.2.
Gambar 4.7. Hasil Grayscale Citra PlumFlower5.jpg
Universitas Sumatera Utara
53
Tabel 4.2. Piksel Hasil Grayscale Citra PlumFlower5.jpg
1 2
3 4
... ...
499 16
15 15
15 15
. .
8 1
16 15
15 15
15 .
. 8
2 16
15 15
15 15
. .
8 3
16 15
15 15
15 .
. 8
4 16
15 15
15 15
. .
8 ...
. .
. .
. .
. .
... .
. .
. .
. .
. 499
12 12
12 12
12 .
. 216
Kemudian dilakukan deteksi tepi pada citra hasil grayscale menggunakan Operator Sobel dengan cara melakukan operasi konvolusi arah horizontal dan vertikal.
Hasil konvolusi dihitung dengan persamaan 2.1 sehingga menghasilkan nilai magnitudo. Matriks nilai magnitudo dapat dilihat pada Tabel 4.3.
Tabel 4.3. Matriks Nilai Magnitudo
... 345
346 347
348 349
350 ...
499 .
. ...
. .
. .
. .
. .
. .
176 .
66 56
34 .
177 .
69 46
42 83
. 178
. 50
53 .
179 .
28 22
28 .
180 .
59 42
69 .
... .
. .
. .
. .
. .
. 499
. .
Universitas Sumatera Utara
54
Jika nilai magnitudo lebih besar dari nilai threshold maka piksel bernilai 1. Pada sistem ini threshold bernilai 128, jika nilai magnitudo bernilai lebih dari 128
maka piksel dianggap tepi. Citra PlumFlower5.jpg hasil deteksi tepi menggunakan Operator Sobel dapat dilihat pada Gambar 4.8.
Gambar 4.8. Citra PlumFlower5.jpg dengan Operator Sobel
Tahap selanjutnya adalah integral proyeksi yaitu integral baris dan kolom dari piksel. Integral proyeksi dihitung dengan persamaan 2.2. dan persamaan 2.3.
Seluruh nilai fitur hasil integral proyeksi disusun dalam bentuk vektor. Kemudian dilakukan perhitungan jarak dengan Euclidean Distance.
P = { 0, 0, 0, 0, 8, 10, 13, 15, 16, 17, ... , 36, 33, 30, 33, 36, 40, 32, 30, 0}
Q = { 0, 0, 0, 0, 0, 6, 13, 8, 8, 10, ... , 0, 0, 0, 0, 0, 0, 0, 0, 0}
d = P
i
- Q
i 2
n i=1
= 457,31827
Jarak vektor fitur bentuk citra PlumFlower5.jpg P dengan citra RoseFlower7.jpg Q adalah 457,31827. Hasil perhitungan euclidean distance antara
citra query dengan citra database diurutkan dari yang terkecil hingga terbesar. Vektor fitur citra dengan nilai euclidean distance terkecil adalah citra yang paling mirip.
Universitas Sumatera Utara
55
4.1.7 Proses Pemanggilan Citra Berdasarkan Fitur Warna
Proses pemanggilan citra berdasarkan fitur warna dengan contoh file citra PlumFlower5.jpg berdimensi 500 x 500 piksel adalah sebagai berikut.
Gambar 4.9. Citra PlumFlower5.jpg
Citra PlumFlower5.jpg terdiri dari 250.000 piksel dimana tiap piksel memiliki 3 komponen warna yaitu merahR, hijauG dan biruB. Setiap komponen
warna memiliki jangkauan nilai antara 0 sampai 255. Tabel piksel dari citra PlumFlower5.jpg dapat dilihat pada Tabel 4.4. dan Tabel 4.5 berikut ini.
Tabel 4.4. Piksel Citra PlumFlower5.jpg 1
1 2
3 4
... ...
499 R
G B
12 21
16 11
20 15
11 20
15 11
20 15
11 20
15 .
. 6
13 6
1 R
G B
12 21
16 11
20 15
11 20
15 11
20 15
11 20
15 .
. 6
13 6
2 R
G B
12 21
16 11
20 15
11 20
15 11
20 15
11 20
15 .
. 6
13 6
3 R
G B
12 21
16 11
20 15
11 20
15 11
20 15
11 20
15 .
. 6
13 6
Universitas Sumatera Utara
56
Tabel 4.5. Piksel Citra PlumFlower5.jpg 2
Citra RGB dikonversi menjadi citra HSV dengan persamaan 2.9 sampai 2.11. Tabel hasil konversi citra HSV dapat dilihat pada Tabel 4.6. Selanjutnya dilakukan
perhitungan kuantisasi masing-masing komponen warna. Pada penelitian ini, komponen hue dikuantisasi menjadi 18 bagian, saturation dikuantisasi menjadi 3
bagian dan value dikuantisasi menjadi 3 bagian.
Tabel 4.6. Piksel HSV Citra PlumFlower5.jpg
1 2
3 4
... ...
499 H
S V
147 43
8 147
45 8
147 45
8 147
45 8
147 45
8 .
. 120
54 5
1 H
S V
147 43
8 147
45 8
147 45
8 147
45 8
147 45
8 .
. 120
54 5
2 H
S V
147 43
8 147
45 8
147 45
8 147
45 8
147 45
8 .
. 120
54 5
3 H
S V
147 43
8 147
45 8
147 45
8 147
45 8
147 45
8 .
. 120
54 5
4 H
S V
147 43
8 147
45 8
147 45
8 147
45 8
147 45
8 .
. 120
54 5
... .
. .
. .
. .
. .
... .
. .
. .
. .
. .
499 H
S V
113 47
8 113
47 8
113 47
8 113
47 8
113 47
8 .
. 220
14 92
4 R
G B
12 21
16 11
20 15
11 20
15 11
20 15
11 20
15 .
. 6
13 6
... .
. .
. .
. .
. .
... .
. .
. .
. .
. .
499 R
G B
10 17
9 10
17 9
10 17
9 10
17 9
10 17
9 .
. 201
212 234
Universitas Sumatera Utara
57
Piksel 0, 0 = H x 18 360 , S x 3 100, V x 3 100 = 147 x 18 360 , 43 x 3 100, 8 x 3 100
= 7, 1, 0 Fitur warna disusun dengan menggunakan sebuah histogram. Dengan
demikian vektor fitur warna dinyatakan menggunakan histogram HSV-162 bin, yaitu vektor fitur warna yang terdiri dari 162 elemen. Kuantisasi ruang warna dari
histogram HSV-162 bin diperlihatkan pada Tabel 4.7. sampai dengan Tabel 4.9. Nilai H terdiri dari 0, 117, 217, 317, 417, ... 1717. Nilai S terdiri dari 0, 12, 22. Nilai V
terdiri dari 0, 12, 22. Kuantisasi ruang warna disusun dengan cara mengkombinasikan nilai dari H, S dan V.
Pada piksel 0,0 nilai H termasuk kedalam bagian 717, nilai S termasuk kedalam bagian 12, dan nilai V termasuk kedalam bagian 0. Berdasarkan Tabel
Kuantisasi Ruang Warna dari Histogram HSV-162 bin, piksel 0,0 termasuk kategori bin 67.
Tabel 4.7. Kuantisasi Ruang Warna dari Histogram HSV-162 Bin 1
Bin H
S V
Bin H
S V
Bin H
S V
1 13
0.05882 0.5
25 0.11765
1 2
0.5 14
0.05882 0.5
0.5 26
0.11765 1
0.5 3
1 15
0.05882 0.5
1 27
0.11765 1
1 4
0.5 16
0.05882 1
28 0.17647
5 0.5 0.5
17 0.05882
1 0.5
29 0.17647
0.5 6
0.5 1
18 0.05882
1 1
30 0.17647
1 7
1 19
0.11765 31
0.17647 0.5
8 1
0.5 20
0.11765 0.5
32 0.17647
0.5 0.5
9 1
1 21
0.11765 1
33 0.17647
0.5 1
10 0.05882
22 0.11765
0.5 34
0.17647 1
11 0.05882
0.5 23
0.11765 0.5
0.5 35
0.17647 1
0.5 12
0.05882 1
24 0.11765
0.5 1
36 0.17647
1 1
Universitas Sumatera Utara
58
Tabel 4.8. Kuantisasi Ruang Warna dari Histogram HSV-162 Bin 2
Bin H
S V
Bin H
S V
Bin H
S V
37 0.23529
67 0.41176
0.5 97
0.58824 1
38 0.23529
0.5 68
0.41176 0.5
0.5 98
0.58824 1
0.5 39
0.23529 1
69 0.41176
0.5 1
99 0.58824
1 1
40 0.23529
0.5 70
0.41176 1
100 0.64706
41 0.23529
0.5 0.5 71
0.41176 1
0.5 101
0.64706 0.5
42 0.23529
0.5 1
72 0.41176
1 1
102 0.64706
1 43
0.23529 1
73 0.47059
103 0.64706
0.5 44
0.23529 1
0.5 74
0.47059 0.5
104 0.64706
0.5 0.5
45 0.23529
1 1
75 0.47059
1 105
0.64706 0.5
1 46
0.29412 76
0.47059 0.5 106
0.64706 1
47 0.29412
0.5 77
0.47059 0.5 0.5
107 0.64706
1 0.5
48 0.29412
1 78
0.47059 0.5 1
108 0.64706
1 1
49 0.29412
0.5 79
0.47059 1
109 0.70588
50 0.29412
0.5 0.5 80
0.47059 1
0.5 110
0.70588 0.5
51 0.29412
0.5 1
81 0.47059
1 1
111 0.70588
1 52
0.29412 1
82 0.52941
112 0.70588
0.5 53
0.29412 1
0.5 83
0.52941 0.5
113 0.70588
0.5 0.5
54 0.29412
1 1
84 0.52941
1 114
0.70588 0.5
1 55
0.35294 85
0.52941 0.5 115
0.70588 1
56 0.35294
0.5 86
0.52941 0.5 0.5
116 0.70588
1 0.5
57 0.35294
1 87
0.52941 0.5 1
117 0.70588
1 1
58 0.35294 0.5
88 0.52941
1 118
0.76471 59
0.35294 0.5 0.5 89
0.52941 1
0.5 119
0.76471 0.5
60 0.35294 0.5
1 90
0.52941 1
1 120
0.76471 1
61 0.35294
1 91
0.58824 121
0.76471 0.5
62 0.35294
1 0.5
92 0.58824
0.5 122
0.76471 0.5
0.5 63
0.35294 1
1 93
0.58824 1
123 0.76471
0.5 1
64 0.41176
94 0.58824 0.5
124 0.76471
1 65
0.41176 0.5
95 0.58824 0.5
0.5 125
0.76471 1
0.5 66
0.41176 1
96 0.58824 0.5
1 126
0.76471 1
1
Universitas Sumatera Utara
59
Tabel 4.9. Kuantisasi Ruang Warna dari Histogram HSV-162 Bin 3
Histogram warna disusun berdasarkan ruang warna HSV sesuai dengan kuantisasi pada Tabel 4.7. sampai Tabel 4.9. Pengelompokan tiap elemen warna pada
batas kuantisasi dilakukan dengan mengukur jarak minimum. Hasil kuantisasi yang telah dinormalisasi dari tiap bin akan membentuk histogram HSV-162 seperti pada
Tabel 4.10. sampai Tabel 4.12.
Tabel 4.10. Histogram HSV-162 Bin 1
Bin Jumlah
Bin Jumlah
Bin Jumlah
1 4127
9 17
3 2
35 10
4 18
11 3
107 11
14 19
40 4
156 12
49 20
38 5
362 13
528 21
491 6
14 414
22 539
7 11
15 4
23 104
8 16
40 24
463 Bin
H S
V Bin
H S
V Bin
H S
V 127
0.23529 139
0.88235 0.5 151
0.94118 1
128 0.82353
0.5 140
0.88235 0.5 0.5
152 0.94118
1 0.5
129 0.82353
1 141
0.88235 0.5 1
153 0.94118
1 1
130 0.82353 0.5
142 0.88235
1 154
1 131
0.82353 0.5 0.5 143
0.88235 1
0.5 155
1 0.5
132 0.82353 0.5
1 144
0.88235 1
1 156
1 1
133 0.82353
1 145
0.94118 157
1 0.5
134 0.82353
1 0.5
146 0.94118
0.5 158
1 0.5
0.5 135
0.82353 1
1 147
0.94118 1
159 1
0.5 1
136 0.88235
148 0.94118 0.5
160 1
1 137
0.88235 0.5
149 0.94118 0.5
0.5 161
1 1
0.5 138
0.88235 1
150 0.94118 0.5
1 162
1 1
1
Universitas Sumatera Utara
60
Tabel 4.11. Histogram HSV-162 Bin 2
Bin Jumlah
Bin Jumlah
Bin Jumlah
25 85
56 144
87 1
26 28
57 531
88 1321
27 3263
58 39380
89 1
28 618
59 109
90 29
109 60
91 31
30 3547
61 53872
92 150
31 2147
62 14
93 1395
32 373
63 94
826 33
7935 64
191 95
401 34
329 65
164 96
41 35
66 757
97 1233
36 7611
67 6265
98 92
37 179
68 187
99 38
1781 69
34 100
76 39
1651 70
5275 101
454 40
3833 71
102 23478
41 1504
72 103
495 42
56 73
1781 104
1096 43
1670 74
108 105
14169 44
119 75
687 106
544 45
76 6593
107 186
46 392
77 92
108 47
163 78
59 109
346 48
639 79
13166 110
119 49
5728 80
1 111
13185 50
948 81
112 117
51 8
82 3
113 131
52 5241
83 56
114 1509
53 279
84 298
115 61
54 85
1052 116
3 55
18 86
41 117
Universitas Sumatera Utara
61
Tabel 4.12. Histogram HSV-162 Bin 3
Hasil kuantisasi dari tiap bin di normalisasi dengan cara membagi nilai probabilitas total kemunculan dengan jumlah piksel dalam citra. Semua nilai fitur
hasil normalisasi disusun dalam bentuk vektor. Kemudian dilakukan perhitungan jarak dengan Euclidean Distance.
P = { 1.6508, 0.014, 0.0428, 0.0624, 0.1448, ... , 0.0}
Q = { 0.0456, 0.0084, 0.1396, 0.0212, 0.0204, ... , 0.1824}
d = P
i
-Q
i 2
n i=1
= 29.59526
Jarak vektor fitur warna citra PlumFlower5.jpg P dengan citra PlumFlower4.jpg Q adalah 29.59526. Hasil perhitungan euclidean distance antara
citra query dengan citra database diurutkan dari yang terkecil hingga terbesar. Vektor fitur citra dengan nilai euclidean distance terkecil adalah citra yang paling mirip.
Bin Jumlah
Bin Jumlah
Bin Jumlah
118 133
133 148
11 119
203 134
149 57
120 182
135 150
121 95
136 1
151 122
24 137
43 152
123 138
6 153
124 7
139 154
247 125
140 11
155 23
126 141
156 30
127 25
142 157
230 128
23 143
158 4
129 31
144 159
130 18
145 22
160 131
146 46
161 132
147 16
162
Universitas Sumatera Utara
62
4.2. Pengujian
