28
2. Mudah digunakan dan dipelajari
Sistem yang dibangun memiliki tampilan sederhana dan
user friendly.
3. Dokumentasi
Sistem yang dibangun memiliki panduan penggunaan. 4.
Hemat biaya Sistem yang dibangun tidak memerlukan perangkat tambahan dalam proses
jalannya sistem.
3.1.3 Analisis Proses
Dalam sistem ini digunakan Operator Sobel dan deteksi warna HSV untuk proses ekstraksi fitur pada citra berformat jpeg. Operator Sobel digunakan untuk ekstraksi
fitur bentuk sedangkan deteksi warna HSV untuk ekstraksi fitur warna. Citra
query
dan citra pada
database
yang telah di ekstraksi akan menghasilkan vektor fitur. Setelah itu dilakukan penghitungan
jarak kesamaan antara vektor fitur citra
query
dengan vektor fitur citra dalam
database
menggunakan
Euclidean Distance
. Hasil yang diperoleh dari metode
Euclidean Distance
akan diurutkan. Citra dengan jarak kesamaan tertinggi akan di tampilkan sebagai
output.
3.2 Perancangan Sistem
Perancangan sistem dilakukan untuk memberikan gambaran mengenai sistem yang akan dibangun sehingga mempermudah dalam melakukan implementasi ataupun
evaluasi. Sistem dirancang dengan membuat
flowchart
,
pseudocode
,
use-case diagram
,
activity diagram
,
sequence diagram
, perancangan
database
dan perancangan antarmuka
interface
.
Universitas Sumatera Utara
29
Mulai P
q
1
,q
2
, ..., q
n
p
1
, p
2
, ..., p
n
d = p
i
-q
i n
i=1
Q
Selesai Hasil
Asscending
d
3.2.1 Flowchart
Flowchart
atau diagram alir merupakan gambar atau bagan yang memperlihatkan urutan dan hubungan antar proses dengan pernyataannya Zarlis Handrizal, 2008.
Pada penelitian ini, terdapat empat
flowchart
, yaitu :
flowchart Content Based Image Retrieval
,
flowchart
ekstraksi fitur bentuk,
flowchart
ekstraksi fitur warna dan
flowchart
sistem secara keseluruhan.
3.2.1.1 Flowchart Content Based Image Retrieval
Flowchart Content Based Image Retrieval
secara keseluruhan dapat dilihat pada Gambar 3.2.
Gambar 3.2.
Flowchart Content Based Image Retrieval
Berdasarkan Gambar 3.2. dapat dilihat tahap awal dalam sistem pemanggilan citra berdasarkan konten adalah meng-
input
-kan citra
query
P kemudian citra
query
diekstraksi sehingga menghasilkan vektor fitur citra p
1
, p
2
, ..., p
n
. Citra yang telah di-
input
-kan dalam
database
Q juga diekstraksi sehingga menghasilkan vektor fitur
Universitas Sumatera Utara
30
ya tidak
citra q
1
, q
2
, ..., q
n
. Fitur bentuk diekstraksi dengan Operator Sobel dan fitur warna diekstraksi dengan deteksi warna HSV. Kemudian dilakukan
Similarity Comparison
, yaitu mengukur jarak kesamaan antara citra
query
dengan citra dalam
database
menggunakan
Euclidean Distance
d . Jarak kesamaan antara citra
query
dengan citra dalam
database
akan diurutkan. Citra dengan jarak kesamaan tertinggi akan di tampilkan sebagai
output
.
3.2.1.2 Flowchart Ekstraksi Fitur Bentuk
Flowchart
ekstraksi fitur bentuk menggunakan Operator Sobel dapat dilihat pada Gambar 3.3.
Gambar 3.3.
Flowchart
Ekstraksi Fitur Bentuk dengan Operator Sobel
Berdasarkan Gambar 3.3. dapat dilihat proses ekstraksi fitur bentuk menggunakan Operator Sobel. Pada tahap awal nilai RGB tiap piksel diekstraksi
kemudian dilakukan konversi nilai RGB ke
grayscale
. Tahap selanjutnya dilakukan operasi konvolusi arah horizontal dan vertikal sehingga diperoleh matriks
Selesai hj=
xi,j
N baris i=1
hi= xi,j
N kolom j=1
A
Tepi dianggap 0 rgbG[i][j]
=128 Tepi dianggap 1
Mulai Ambil nilai r , g , b
G = r + g + b3 Gx[i][j] = G[i+1][j-1] + 2G[i+1][j] +
G[i+1][j+1] - G[i-1][j-1] - 2G[i-1][j] - G[i-1][j+1]
Gy[i][j] = G[i-1][j+1] + 2G [i][j+1] + G[i+1][j+1] - G[i-1][j-1] - 2G[i][j-1] -
G[i+1][j-1] rgbG[i][j] =|Gx[i][j]| + |Gy[i][j]|
A
Universitas Sumatera Utara
31
tidak
ya
gradien arah horizontal dan matriks gradien arah vertikal. Nilai magnitudo akan
diperoleh berdasarkan gabungan kedua gradien arah tersebut. Kemudian nilai magnitudo dibandingkan dengan nilai
threshold
yang ditetapkan. Jika nilai magnitudo lebih besar dari nilai
threshold
maka piksel tersebut dianggap sebagai tepi bernilai 1. Tahap akhir dilakukan perhitungan integral proyeksi untuk mendeteksi batas dari
daerah citra.
3.2.1.3 Flowchart Ekstraksi Fitur Warna
Flowchart
ekstraksi fitur warna menggunakan deteksi warna HSV dapat dilihat pada Gambar 3.4.
Gambar 3.4.
Flowchart
Ekstraksi Fitur Warna dengan Deteksi Warna HSV
h = hue17 s = saturation2
v = value2 A
Mulai Ambil nilai R , G , B
r = R255 ; g = G255 ; b = B255
H= ° jika ∆=0
60° ⨯
g-b ∆
mod6 jika C
max
=r 60°
⨯ 2+ b-r
∆ 60°
⨯ 4+ r-g
∆ jika C
max
=g jika C
max
=b
S = ∆
C
max
jika C
max
=0 jika C
max
≠0 V = C
max
A hue = H
⨯ 18360 saturation = S
⨯ 3100 value = V
⨯ 3100 int x=0; x162 ; x++
h == hBinValue s == sBinValue
v == vBinValue
Hasil [x] + = 1 Hasil Piksel Citra
Selesai
Universitas Sumatera Utara
32
Berdasarkan Gambar 3.4. dapat dilihat proses ekstraksi fitur warna menggunakan deteksi warna HSV. Pada tahap awal nilai RGB tiap piksel diekstraksi
kemudian dilakukan konversi nilai RGB ke HSV. Hasil dari konversi akan diperoleh data warna H
Hue
, data warna S
Saturation
dan data warna V
Value
. Berdasarkan warna HSV tersebut, histogram HSV disusun sesuai dengan kuantisasi.
Pengelompokan setiap elemen warna kedalam batas kuantisasi dilakukan dengan mengukur jarak minimum. Tahap selanjutnya dilakukan normalisasi sesuai dengan
jumlah piksel citra untuk memperoleh vektor fitur warna.
3.2.1.4 Flowchart Sistem Secara Keseluruhan
Flowchart
sistem secara keseluruhan dapat dilihat pada Gambar 3.5.
Gambar 3.5.
Flowchart
Sistem Secara Keseluruhan
Universitas Sumatera Utara
33
Berdasarkan Gambar 3.5. dapat dilihat
flowchart
sistem secara keseluruhan memiliki tiga parameter pilihan yang dapat dipilih pada sistem, yaitu halaman
bantuan, halaman tentang dan halaman mulai pencarian. Pada halaman mulai pencarian terdapat dua parameter pilihan yang dapat dipilih sistem, yaitu halaman
Operator Sobel dan halaman deteksi warna HSV.
3.2.2 Pseudocode
Pseudocode
merupakan kode yang mirip dengan instruksi kode program yang sebenarnya.
Pseudocode
berisi langkah-langkah untuk menyelesaikan suatu permasalahan yang bentuknya sedikit berbeda dari algoritma. Pada penelitian ini,
terdapat dua
pseudocode
, yaitu :
pseudocode
ekstraksi fitur bentuk dan
pseudocode
ekstraksi fitur warna.
3.2.2.1 Pseudocode
Ekstraksi Fitur Bentuk 1.
Ekstraksi Nilai RGB
int pixel = getImg.getRGBi, j; int r = pixel160xff;
int g = pixel80xff; int b = pixel0xff;
2. Konversi RGB ke
Grayscale
rgbGrayValue[i][j] = r+g+b3;
3. Konvolusi Horizontal dan Vertikal
Gx[i][j]= rgbGrayValue[i+1][j-1] + 2rgbGrayValue[i+1][j] +rgbGrayValue[i+1][j+1] - rgbGrayValue[i-1][j-1]
-2rgbGrayValue[i-1][j] - rgbGrayValue[i-1][j+1]; Gy[i][j]= rgbGrayValue[i-1][j+1] + 2rgbGrayValue[i][j+1]
+rgbGrayValue[i+1][j+1] - rgbGrayValue[i-1][j-1] -2rgbGrayValue[i][j-1]-gbGrayValue[i+1][j-1];
rgbG[i][j] = Math.absGx[i][j] + Math.absGy[i][j];
Universitas Sumatera Utara
34
4. Membandingkan Nilai Magnitudo dengan Nilai
Threshold
ifrgbG[i][j]=128.0{ rgbG[i][j] = 0.0;
intPro[i][j] = 0; }
else{ rgbG[i][j] = 255;
intPro[i][j] = 1; }
5. Hitung Integral Proyeksi
forint i=0 ; iwidth ; i++{ int temp = 0;
forint j=0 ; jheight ; j++{ temp += intPro[i][j];
} integralPro += Integer.toStringtemp+ ;
} forint i=0 ; iheight ; i++{
int temp=0; forint j=0 ; jwidth ; j++{
temp += intPro[j][i]; }
ifi==height-1 integralPro += Integer.toStringtemp;
else integralPro += Integer.toStringtemp+ ;
}
3.2.2.2 Pseudocode
Ekstraksi Fitur Warna 1.
Ekstraksi Nilai RGB
int pixel = getImg.getRGBi,j; double r = pixel160xff;
double g = pixel80xff; double b = pixel0xff;
Universitas Sumatera Utara
35
2. Konversi RGB ke HSV
vValue = cMax100.0; ifcMax == 0{
sValue = 0; }
else{ sValue = deltacMax100;
} ifdelta==0{
hValue = 0.0; }
else{ ifcMax == r1{
hValue = 60 g1-b1delta6 ; }
else ifcMax == g1{ hValue = 60 b1-r1delta+2 ;
} else ifcMax == b1{
hValue = 60 r1-g1delta+4 ; }
else{ hValue = 0.0;
} }
ifhValue0{ hValue+=360.0;
}
3. Menentukan Letak Bin
hValue = Math.roundhValue18360; sValue = Math.roundsValue3100;
vValue = Math.roundvValue3100;
Universitas Sumatera Utara
36
4. Kuantisasi
forint x=0 ; x162 ; x++{ ifhValue == hBinValue[x]{
ifsValue == sBinValue[x]{ ifvValue == vBinValue[x]{
result[x]+=1; found=true;
break; }
} }
}
5. Normalisasi
forint i=0 ; i162 ; i++{ result[i]=
Double.valueOfdf.formatresult[i]100widthheight; }
3.2.3 Use Case Diagram
Use case
adalah rangkaian atau uraian sekelompok yang saling terkait dan membentuk sebuah sistem secara teratur yang dilakukan oleh aktor.
Use case
digunakan untuk membentuk tingkah laku benda dalam sebuah model serta direalisasikan dengan
kolaborasi Whitten, 2004.
Use case diagram
merupakan representasi interaksi yang terjadi antara pengguna dengan sistem.
Use case diagram
pada penelitian ini dapat dilihat pada Gambar 3.6.
Universitas Sumatera Utara
37
Gambar 3.6.
Use Case Diagram
Sistem
Penjelasan dari setiap
use case
yang terdapat pada diagram
use case
dapat dilihat pada
use case narrative
.
Use case narrative
dari
use case diagram
sistem pada Gambar 3.6. dapat dilihat pada Tabel 3.1. dan Tabel 3.2. berikut ini.
Tabel 3.1.
Use Case Narrative
Pemanggilan Citra
Nama
Use Case
Pemanggilan Citra Aktor
Pengguna
Deskripsi
Use case
ini mendeskripsikan bagaimana proses pemanggilan citra dalam
database
berdasarkan citra
query
yang di-
input-
kan kepada sistem
Alur Dasar Kegiatan Pengguna
Respon Sistem 1. Mengakses sistem
1. Menampilkan halaman utama 2. Klik tombol mulai
pencarian 2. Menampilkan halaman mulai
pencarian 3. Memilih metode ekstraksi
fitur yang digunakan 3. Menampilkan jendela ekstraksi
fitur yang telah ditentukan 4. Klik tombol pilih citra
4. Menampilkan
windows explorer
Universitas Sumatera Utara
38
5. Memilih citra
query
dan klik tombol
open
5. Menampilkan citra
query
yang telah dipilih
6. Klik tombol telusuri citra 6. Menampilkan hasil pemanggilan
citra Alur Alternatif
Tidak Ada Kondisi Sesudah
Sistem melakukan pemanggilan citra berdasarkan metode ekstraksi fitur citra yang dipilih pengguna
Tabel 3.2.
Use Case Narrative Input
Citra ke
Database
Nama
Use Case Input
Citra ke
Database
Aktor Pengguna
Deskripsi
Use case
ini mendeskripsikan bagaimana proses peng-
input-
an citra ke
database
Alur Dasar Kegiatan Pengguna
Respon Sistem 1. Klik
MenuItem input
citra ke
database
1. Menampilkan halaman
input
citra 2. Klik tombol pilih citra
2. Menampilkan
windows explorer
3. Memilih citra yang ingin di-
input-
kan dan klik tombol
open
3. Menampilkan daftar citra yang di-
input-
kan pada sistem
4. Klik tombol
input
citra 4. Menampilkan respon jika citra
berhasil di-
input-
kan Alur Alternatif
Tidak Ada Kondisi Sesudah
Sistem menyimpan citra dan fitur citra ke
database
Universitas Sumatera Utara
39
3.2.4 Activity Diagram
Activity diagram
menggambarkan proses bisnis atau urutan aktivitas dalam sebuah sistem Ambler, 2005. Pada penelitian ini, terdapat dua
activity diagram
, yaitu :
activity diagram
pemanggilan citra dan
activity diagram input
citra ke
database
.
Activity diagram
penelitian ini dapat dilihat pada Gambar 3.7. dan Gambar 3.8.
Gambar 3.7.
Activity Diagram
Pemanggilan Citra
Universitas Sumatera Utara
40
Gambar 3.8.
Activity Diagram Input
Citra ke
Database
Universitas Sumatera Utara
41
3.2.5 Sequence Diagram
Sequence diagram
diagram urutan adalah suatu diagram yang memperlihatkan interaksi
– interaksi antar objek di dalam sistem yang disusun pada sebuah urutan atau rangkaian waktu. Pada penelitian ini, terdapat dua
sequence diagram
, yaitu :
sequence diagram
pemanggilan citra dan
sequence diagram input
citra ke
database
.
Sequence diagram
penelitian ini dapat dilihat pada Gambar 3.9. dan Gambar 3.10.
Gambar 3.9.
Sequence Diagram
Pemanggilan Citra
Gambar 3.10.
Sequence Diagram Input
Citra ke
Database
Universitas Sumatera Utara
42
3.2.6 Perancangan Database
Database
atau basis data merupakan kumpulan dari data yang saling berhubungan satu dengan lainnya, yang tersimpan pada simpanan luar komputer dan digunakan
perangkat lunak tertentu untuk memanipulasinya Rapianti, 2011. Penyimpanan data yang dirancang untuk penelitian ini menggunakan
SQLite Database Browser
2.0 b1. SQLite
adalah
Relational Database Management Server
RDBMS alternatif yang memiliki kelebihan sebagai berikut :
1.
Portable
tidak memerlukan proses instalasi. 2.
Flat file
satu
database
satu
file
. 3.
Mendukung
transaction
dan
view
. 4.
Sangat cepat karena berupa
flat file
. 5.
Menggunakan bahasa
query
yang mirip dengan RDBMS pada umumnya.
SQLite juga bersifat
server less database
, dimana SQLite tidak memerlukan server tersendiri untuk dapat menjalankan fungsinya sehingga sangat cocok digunakan
sebagai
database
untuk aplikasi
mobile device
, pengembangan
website
berskala kecil hingga menengah, hingga pengembangan aplikasi berskala
enterprise
sebagai
database
pada aplikasi yang bersifat
prototype
atau demo. Kamus data adalah suatu daftar data elemen yang terorganisir dengan
defenisi yang tetap dan sesuai dengan sistem, sehingga pengguna dan analis sistem memiliki pengertian yang sama tentang
input
,
output
dan komponen penyimpanan data.
Database
yang digunakan terdiri dari tabel imageSobelMatching dan tabel imageHsvmatching. Rincian tabel yang digunakan dapat dilihat pada Tabel 3.3. dan
Tabel 3.4.
Tabel 3.3. Tabel imageSobelMatching
No Nama
Field
Tipe Keterangan
1 imagePath
Text Path Citra yang Digunakan
2 imageIntPro
Text Hasil Integral Proyeksi Operator Sobel
Universitas Sumatera Utara
43
Tabel 3.4. Tabel imageHsvMatching
No Nama
Field
Tipe Keterangan
1 imagePath
Text Path Citra yang Digunakan
2 hsvValue
Text Hasil Konversi Ruang Warna HSV
3.2.7 Perancangan Antarmuka
Aplikasi pemanggilan citra dirancang dengan menggunakan NetBeans IDE 8.0.2. Tahap perancangan antarmuka bertujuan untuk memudahkan proses implementasi dan
diharapkan tampilan dari sistem yang dihasilkan menjadi
user friendly
.
3.2.7.1 Halaman Utama
Halaman utama merupakan halaman awal dari aplikasi pemanggilan citra. Perancangan halaman utama aplikasi dapat dilihat pada Gambar 3.11.
Gambar 3.11. Perancangan Antarmuka Halaman Utama
Komponen yang digunakan untuk membangun antarmuka halaman utama pada Gambar 3.11. adalah sebagai berikut :
1.
Label
‘1’ berfungsi untuk menampilkan
background
halaman utama. 2.
Label
‘2’ berfungsi untuk menampilkan logo aplikasi.
Universitas Sumatera Utara
44
3.
Button
‘Mulai Pencarian’ berfungsi untuk menampilkan halaman mulai pencarian dimana pengguna dapat memilih metode pemanggilan citra yang
diinginkan dan meng-
input-
kan citra
query
ke
database
. 4.
Button
‘Bantuan’ berfungsi untuk menampilkan halaman bantuan. 5.
Button
‘Tentang’ berfungsi untuk menampilkan halaman tentang.
3.2.7.2 Halaman Mulai Pencarian
Halaman mulai pencarian merupakan halaman untuk melakukan pemanggilan citra sesuai dengan metode yang diinginkan. Perancangan halaman mulai pencarian dapat
dilihat pada Gambar 3.12.
Gambar 3.12. Perancangan Antarmuka Halaman Mulai Pencarian
Komponen yang digunakan untuk membangun antarmuka halaman mulai pencarian pada Gambar 3.12. adalah sebagai berikut :
1.
MenuBar
‘File’ berfungsi sebagai pilihan menu dan terdiri dari dua
menu item
. 2.
MenuItem
‘
Input
Citra ke
Database
’ berfungsi untuk menampilkan halaman
input
citra ke
database
.
Universitas Sumatera Utara
45
3.
MenuItem
‘Keluar’ berfungsi untuk keluar dari sistem. 4.
TabbedPane
‘HSV’ berfungsi sebagai jendela untuk melakukan pemanggilan citra berdasarkan fitur warna citra menggunakan deteksi warna HSV.
5.
TabbedPane
‘Sobel’ berfungsi sebagai jendela untuk melakukan pemanggilan citra berdasarkan fitur bentuk citra menggunakan Operator Sobel.
6.
Button
‘Pilih Citra’ berfungsi untuk menampilkan
windows explorer
guna memilih citra
query
dalam pemanggilan citra. 7.
Button
‘Cari Berdasarkan Warna’ berfungsi untuk melakukan pemanggilan citra berdasarkan warna.
8.
Label
‘8’ berfungsi untuk menampilkan citra
query
yang telah dipilih. 9.
Label
‘9’ berfungsi untuk menampilkan citra hasil pemanggilan sesuai dengan metode yang telah dipilih sebelumnya.
10.
Button
‘Pilih Prev’ berfungsi untuk menampilkan citra hasil sebelumnya. 11.
Button
‘Pilih Citra’ berfungsi untuk menampilkan citra hasil selanjutnya.
3.2.7.3 Halaman Input Citra ke Database
Halaman
input
citra ke
database
merupakan halaman untuk meng
input
kan citra ke
database
. Perancangan halaman mulai
input
citra ke
database
dapat dilihat pada Gambar 3.13.
Gambar 3.13. Perancangan Antarmuka Halaman
Input
Citra ke
Database
Universitas Sumatera Utara
46
Komponen yang digunakan untuk membangun antarmuka halaman
input
citra ke
database
pada Gambar 3.13. adalah sebagai berikut : 1.
List
berfungsi untuk menampilkan daftar citra yang akan di
input
kan. 2.
Button
‘Pilih Citra’ berfungsi untuk menampilkan
windows explorer
guna memilih citra yang akan di
input
kan ke
database
. 3.
Button
‘
Input
Citra’ berfungsi untuk menyimpan citra yang telah dipilih ke
database
.
3.2.7.4 Halaman Bantuan
Halaman bantuan merupakan halaman untuk menampilkan panduan singkat tentang cara penggunaan aplikasi ini. Perancangan halaman bantuan dapat dilihat pada
Gambar 3.14.
Gambar 3.14. Perancangan Antarmuka Halaman Bantuan
Komponen yang digunakan untuk membangun antarmuka halaman bantuan pada Gambar 3.14. adalah sebagai berikut :
1.
Label
‘1’ berfungsi untuk menampilkan
background
halaman bantuan. 2.
Label
‘2’ berfungsi untuk menampilkan logo aplikasi. 3.
ScrollPane
berfungsi untuk menampilkan panduan singkat penggunaan aplikasi.
Universitas Sumatera Utara
47
3.2.7.5 Halaman Tentang
Halaman tentang merupakan halaman untuk menampilkan informasi singkat tentang peneliti, judul penelitian, logo universitas, program studi, dan fakultas penulis.
Komponen yang digunakan untuk membangun antarmuka halaman tentang adalah
Label
yang berfungsi untuk menampilkan rincian informasi singkat peneliti. Perancangan halaman bantuan dapat dilihat pada Gambar 3.15.
Gambar 3.15. Perancangan Antarmuka Halaman Tentang
Universitas Sumatera Utara
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