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 HHue, data warna SSaturation dan data warna VValue. 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 menginputkan 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 diinputkan.
2. Button ‘Pilih Citra’ berfungsi untuk menampilkan windows explorer guna
memilih citra yang akan diinputkan 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
