V.
Bab IV Perancangan Sistem
V.1 Perancangan Arsitektur Sistem
Arsitektur dalam konteks sistem komputer adalah struktur dari sistem yang terdiri dari komponen perangkat lunak, hubungan antar komponen tersebut dan antarmuka komponen dengan komponen diluar sistem [9]. Model arsitektur yang dipilih untuk sistem SPECKTRAL adalah data-centered architecture. Pemilihan model arsitektur ini didasarkan pada karakteristik sistem yang fungsi utamanya adalah p encari data atau search engine. Pada model arsitektur ini, database atau data store merupakan pusat dari sistem dan diakses oleh komponen lain untuk melakukan query, tambah, hapus atau edit data. Sistem SPECKTRAL ini akan dikembangan dalam lingkungan berbasis web sehingga rancangan arsitekturnya melibatkan web server sebagai salah satu komponennya yang berperan untuk mengatur komunikasi client berbasis web dengan aplikasi di server dan database server. Arsitektur sistem SPECKTRAL dinyatakan dalam Gambar IV-1.
Gambar IV.1. Diagram arsitektur SPECKTRAL
31
V.2 Perancangan Kelas
Rancangan kelas-kelas penyusun sistem ini dibangun berdasarkan hasil identifikasi kelas pada tahap analisis yaitu dengan memperhatikan tipe dari masing-masing kelas apakah kelas tipe boundary, control atau entity. Masingmasing tipe kelas tersebut memerlukan penanganan yang berlainan dalam menerjemahkannya ke dalam bentuk rancangan kelas. Kelas-kelas utama bertipe boundary yang menangani antarmuka sistem pada tahap analisis telah teridentifikasi, pada tahap perancangan terkadang diperlukan kelas-kelas tambahan untuk mendukung realisasi antarmuka yang diinginkan. Dalam suatu sistem, realisasi antarmuka bergantung pada arsitektur sistem dan lingkungan pengembangan (development tool) sehingga hal tersebut harus menjadi pertimbangan dalam perancangan kelas bertipe boundary. Dalam merancang kelas bertipe control hasil identifikasi pada tahap analisis, yang perlu diperhatikan adalah kompleksitas dari fungsi yang dimiliki dan faktor distribusi kelas. Jika kompleksitas fungsi suatu kelas sangat sederhana maka kemungkinan dapat diwakili hanya sebagai suatu operasi dari kelas lain yang berhubungan, tidak harus membentuk satu kelas sendiri. Faktor distribusi mempengaruhi jumlah kelas yang akan dibuat, misalkan jika kelas akan digunakan dalam client dan server Kelas bertipe entity merupakan kelas yang bersifat pasif dan persisten. Dalam merancang kelas bertipe ini yang perlu diperhatikan adalah bahwa kelas harus dapat menyimpan suatu kondisi (state) hasil dari suatu operasi dengan benar. 1. Diagram Kelas
Berdasarkan pertimbangan-pertimbangan dalam merancang suatu kelas secara umum yang telah diuraikan di atas, maka hasil rancangan kelas untuk SPECKTRAL dengan masing-masing atribut dan operasinya dapat dinyatakan dalam diagram kelas pada Gambar IV.2.
32
HttpServlet
AdminPage
SearchPage imageFinder : SearchEngine out : PrintWriter processRequest() pageHeader() pageFooter() pageHome() pageBrowse() pageQuery() pageSearchName() viewImage()
updater : DataUpdater out : PrintWriter
PrintWriter
processRequest() pageHeader() pageFooter() pageHome() pageInsert() pageDelete() pageEdit()
Database connection : Connection result : ResultSet dbString : String driver : String user : String password : String
Connection
ResultSet
SearchEngine fractalCoder : FractalCoder viewCategory() viewDocByCategory() searchImageFile() imageQuery() getCodeFromInv() getDocVector() calcDotProduct() sortDocument() getRowsCount()
FractalCoder image : BufferedImage imageMatrix : short [ ] imWidth : int imHeight : int blockSize : int
BufferedImage
encode() findBestMatch() rgbToGray() blockSample() quantize() getSum() getSum2() intToHexString()
DataUpdater fractalCoder login() insertDoc() editDoc() deleteDoc()
Document Category category_id : int(6) category_name : varchar(50)
Admin username : String password : String
ImageDB admin : Admin category : Category document : Document invertedfile : InvertedFile dictionary : String [ ]
doc_id : int(8) doc_name : varchar(100) category_id : int(6) path : varchar(255) InvertedFile code : char(10) doc_id : int(8)
Gambar IV.2. Diagram kelas
Kelas-kelas yang tidak dicantumkan atributnya yaitu HttpServlet, PrintWriter, Connection, ResultSet dan BufferdImage adalah kelas bawaan yang telah disediakan oleh bahasa pemrograman yang dipilih untuk implementasi sistem yaitu bahasa Java.
33
2. Deskripsi Atribut dan Operasi
Masing-masing kelas yang dihasilkan pada tahap ini memiliki atribut dan operasi yang sesuai dengan fungsi kelas tersebut. Dalam menentukan atribut hal yang perlu diperhatikan adalan nama harus sesuai dengan entitas yang diwakilinya, tipe data, persistensi, jangkauan nilai, nilai awal dan visibility atau batasan akses oleh kelas lain. Sama halnya dengan atribut, dalam menentukan operasi juga memperhatikan hal-hal tersebut di atas ditambah dengan faktor tanggung jawab (responsibility) atau apa yang harus dilakukan operasi tersebut dan operation signature yang merupakan deskripsi parameter-parameter yang digunakan oleh operasi. Deskripsi atribut dan operasi dari sistem SPECKTRAL dapat dilihat pada Lampiran B. 3. Interaksi Antar Kelas
Struktur kelas yang telah dibentuk menggambarkan sistem secara statis. Dalam struktur
tersebut
belum
tergambar
interaksi
antar
kelas
yang
dapat
menggambarkan keadaan sistem secara dinamis sehingga kelakuan (behaviour) dari sistem dapat diprediksi. Untuk menggambarkan interaksi kelas dalam sistem digunakan Sequence Diagram yang menggambarkan interaksi dalam grafik dua dimensi dimana sumbu vertikal mewakili dimensi waktu dan sumbu horisontal mewakili obyek-obyek yang terlibat dalam interaksi. Interaksi dalam diagram ini diwakili oleh pesan (message) yang dikirim oleh masing-masing obyek yang terlibat [12]. Gambar IV-3 memperlihatkan sequence diagram untuk use case Browse Citra, diagram lengkap untuk masing-masing use case dapat dilihat pada Lampiran C.
34
: User : SearchPage processRequest()
: SearchEngine
: ImageDB
pageBrowse Kategori viewDocByCategory() Document DocumentList pageBrowse
Gambar IV.3. Sequence diagram untuk use case Browse Citra
V.3 Perancangan Data
Perancangan data di lakukan untuk kelas bertipe entity, yang dapat menyimpan informasi dalam jangka waktu relatif lama. Dalam sistem SPECKTRAL ini perancangan data dilakukan untuk kelas ImageDB. Entity ImageDB dapat dipecah menjadi beberapa kelas yang nantinya masing-masing direalisasikan ke bentuk tabel dalam basis data. Kelas-kelas tersebut mewakili informasi mengenai dokumen citra yaitu nama, kategori, lokasi file dan indeks yang digunakan. Hasil rancangan struktur data yang digunakan dalam SPECKTRAL adalah : 1. Struktur data Category
Kelas Category menyimpan informasi mengenai kategori citra yang ada dalam sistem. Kategori citra oleh administrator dapat ditambah dan diedit namanya, tetapi tidak dapat dihapus jika masih ada dokumen citra yang masuk dalam kategori tersebut. Deskripsi struktur data kelas Category dinyatakan dalam Tabel IV.1 Tabel IV.1. Deskripsi data kelas Category Nama field category_id category_name
Tipe int(6)
Batasan Keterangan primary key, not null, kode kategori auto increment varchar(50) not null nama kategori
35
Field category_id adalah kunci utama yang bersifat tunggal (primary key) dan nilainya otomatis diisi secara terurut oleh sistem basis berdasarkan urutan masuknya data (auto increment) 2. Struktur data Document
Kelas Document menyimpan informasi mengenai dokumen citra yang ada dalam sistem. Dokumen citra oleh administrator dapat ditambah, diedit namanya atau dihapus. Deskripsi struktur data kelas Document dinyatakan dalam Tabel IV.2 Tabel IV.2. Deskripsi data Kelas Document Nama field doc_id
Tipe int(8)
Batasan primary key, not null, auto increment doc_name varchar(100) not null category_id int(6) foreign key, not null path varchar(255) not null
Keterangan kode document nama dokumen kode kategori dokumen path lokasi dokumen
Field doc_id adalah kunci utama yang bersifat tunggal (primary key) dan nilainya otomatis diisi secara terurut oleh sistem basis berdasarkan urutan masuknya data (auto increment). Field category_id merupakan kunci referensi yang mengacu pada nilai category_id yang telah ada pada kelas Category. 3. Struktur data InvertedIndex
Kelas InvertedIndex menyimpan informasi mengenai indeks berupa kode-kode fraktal dari dokumen citra yang ada dalam sistem. Pengisian data InvertedIndex dilakukan oleh sistem pada waktu pemasukan dokumen. Deskripsi struktur data kelas InvertedIndex dinyatakan dalam Tabel IV.4 Tabel IV.4 . Deskripsi Kelas InvertedIndex Nama field s o doc_id
Tipe double double int(8)
Batasan not null not null foreign key, not null
36
Keterangan nilai s kode fraktal nila o kode fraktal kode dokumen yang memuat kode fraktal
Field doc_id merupakan kunci referensi yang mengacu pada nilai doc_id yang telah ada pada kelas Document. 4. Struktur data Admin
Kelas Admin menyimpan informasi mengenai administrator yang berwenang mengelola sistem. Sistem melakukan pengecekan kewenangan untuk login ke sistem sebagai admin berdasarkan data yang tersimpan dalam kelas Admin ini. Deskripsi struktur data kelas Admin dinyatakan dalam Tabel IV.5 Tabel IV.5 . Deskripsi Kelas Admin Nama field username password
Tipe Batasan varchar(20) primary key, null varchar(10) not null
Keterangan not nama user yang berwenang sebagai administrator password user
V.4 Perancangan Antarmuka
Tujuan utama perancangan antarmuka adalah menciptakan komunikasi yang efektif antara sistem dengan pengguna dan komponen pendukung lain. Rancangan antarmuka harus memiliki konsistensi isi dan berorientasi pada kemudahan pengoperasian oleh pengguna. Antarmuka pengguna pada SPECKTRAL dirancang berbasis web sehingga tampilan antarmuka berupa halaman web (web page). Selain dengan
pengguna, SPECKTRAL memiliki antarmuka dengan
perangkat lunak pendukung lainnya. Antarmuka pengguna pada SPECKTRAL secara garis besar dibagi menjadi dua yaitu antarmuka untuk pengguna biasa atau disebut user dan antarmuka untuk administrator. Daftar hasil rancangan antarmuka untuk kedua jenis pengguna SPECKTRAL dinyatakan dalam Tabel IV.6.
37
Tabel IV.6. Antarmuka pengguna Jenis pengguna
Antarmuka SearchPage
Kelas SearchPage
Keterangan user melihat citra sesuai kategori yang dipilih, mencari file berdasarkan nama atau mencari berdasarkan kemiripan citra
QueryResultPage
SearchPage
query kode
User
LoginPage
menampilkan hasil berdasrkan kesamaam fraktal AdminPage login admin
Administrator InsertCategoryPage AdminPage admin memasukkan jenis kategori baru EditCategoryPage AdminPage admin mengedit kategori InsertDocPage AdminPage admin memasukkan dokumen baru EditDocPage AdminPage admin mengedit dokumen DeleteDocPage AdminPage admin menghapus dokumen
1. Antarmuka SearchPage
Antarmuka SearchPage merupakan antarmuka utama bagi user untuk melakukan pencarian berdasarkan kategori yang dipilih atau berdasarkan nama file citra yang diinginkan. Setelah sistem menampilkan hasil dari pencarian di atas, user dapat melakukan query lebih lanjut yaitu query berdasarkan kemiripan citra dengan memilih link yang berada di bawah salah satu citra. Rancangan antarmuka SearchPage dapat dilihat pada Gambar IV.4.
specktral Pencarian File File
keyword
cari Image#1
Kategori Citra category_name #1 category_name #2 category_name #3 . . category_name n
Name#1 Info#1
query_link
Image#2
query_link
Name#2 Info#2
Image#3
query_link
Image#4
Image#6 Image#5
Gambar IV.4. Rancangan antarmuka SearchPage
38
Name#2 Info#2
Obyek-obyek penyusun antarmuka SearchPage dapat dijelaskan sebagai berikut : (1) Specktral, logo aplikasi bertipe Image (2) Pencarian File, File, Kategori Citra dan Info, label bertipe teks (3) Keyword, input bertipe TexField untuk masukan keyword pencarian nama file (4) Cari, Button untuk melakukan pencarian (5) Category_name, link untuk menampilkan citra berdasarkan kategori (6) Citra, tampilan image yang tersimpan di dalam basis data
2. Antarmuka LoginPage
Antarmuka ini merupakan antarmuka bagi administrator sistem untuk melakukan login ke sistem untuk selanjutnya dapat melakukan proses update data koleksi citra. Untuk melakukan login ke sistem, administrator diminta memasukkan username dan password yang dimiliki untuk dicocokkan dengan data administrator yang berwenang. Jika cocok maka akan masuk ke halaman menu untuk administrator, jika tidak maka pengguna diminta mencoba untuk login kembali. Rancangan antarmuka LoginPage dapat dilihat pada Gambar IV.5.
Gambar IV.5. Rancangan antarmuka LoginPage
Obyek-obyek penyusun antarmuka LoginPage dapat dijelaskan sebagai berikut : (1) Nama User dan Password, label bertipe teks (2) username, input bertipe TextField untuk masukan nama user (3) passwd, input bertipe PasswordField untuk masukan password.
3. Antarmuka InsertCategoryPage
Antarmuka ini digunakan administrator untuk menambahkan kategori baru setelah terlebih dahulu login ke sistem. Administrator mengisi nama kategori yang akan
39
dimasukkan dengan pada textfield yang tersedia. Rancangan antarmuka InsertCategorPage dapat dilihat pada Gambar IV.6.
Gambar IV-6 Rancangan antarmuka InsertCategoryPage
Obyek-obyek penyusun antarmuka InsertCategoryPage dapat dijelaskan sebagai berikut: (1) Nama Kategori, label bertipe teks (2) category_name, input bertipe TextField untuk masukan nama kategori (3) Tambah, Button untuk menambahkan kategori baru
4. Antarmuka EditCategoryPage
Antarmuka ini digunakan administrator untuk mengedit kategori citra setelah terlebih dahulu login ke sistem. Administrator memilih nama kategori yang akan diedit dari tabel daftar kategori, kemudian memasukkan nama kategori yang baru pada textfield yang tersedia. Rancangan antarmuka EditCategorPage dapat dilihat pada Gambar IV.7.
Gambar IV.7. Rancangan antarmuka EditCategoryPage
40
Obyek-obyek penyusun antarmuka EditCategoryPage adalah sebagai berikut: (1) Nama Kategori, label bertipe teks (2) Category_name, input bertipe TextField untuk masukan nama kategori (3) Edit, Button untuk menyimpan hasil edit nama kategori
5. Antarmuka InsertDocPage
Antarmuka ini digunakan administrator untuk menambahkan dokumen citra baru setelah terlebih dahulu login ke sistem. Administrator memilih file yang akan dimasukkan dengan mengklik tombol Browse. Kemudian memilih kategori citra untuk dokumen tersebut menggunakan obyek ComboBox yang tersedia. Rancangan antarmuka InsertDocPage dapat dilihat pada Gambar IV.8.
Gambar IV.8. Rancangan antarmuka InsertDocPage
Obyek-obyek penyusun antarmuka InsertDocPage adalah sebagai berikut: (1) Lokasi Dokumen dan Kategori, label bertipe teks. (2) Path, input bertipe TextField untuk masukan lokasi file (3) Browse, Button untuk melakukan pemilihan lokasi file (4) category_name, ComboBox berisi daftar nama kategori (5) Tambah, Button untuk menambah dokumen baru
6. Antarmuka EditDocPage
Antarmuka ini digunakan administrator untuk mengedit dokumen citra setelah terlebih dahulu login ke sistem. Administrator memilih dokumen yang akan diedit dari tabel daftar dokumen, kemudian memasukkan nama dokumen yang baru pada TextField yang tersedia atau dapat merubah kategori dokumen melalui obyek ComboBox yang tersedia. Rancangan antarmuka EditDocPage dapat dilihat pada Gambar IV.9.
41
Gambar IV.9. Rancangan antarmuka EditDocPage
Obyek-obyek penyusun antarmuka EditDocPage dapat dijelaskan sebagai berikut: (1) Nama Dokumen dan Kategori, label bertipe teks (2) doc_name, input bertipe TextField untuk masukan nama dokumen (3) category_name, ComboBox berisi daftar nama kategori (4) link_edit, link untuk memilih dokumen yang akan diedit (5) Edit, Button untuk menyimpan hasil edit nama dokumen
7. Antarmuka DeleteDocPage
Antarmuka ini digunakan administrator untuk menghapus dokumen citra setelah terlebih dahulu login ke sistem. Administrator memilih dokumen yang akan dihapus dari tabel dokumen, kemudian mengklik link untuk menghapus dokumen. Rancangan antarmuka DeleteDocPage dapat dilihat pada Gambar IV.10.
Gambar IV.10. Rancangan antarmuka DeleteDocPage
42
Obyek-obyek penyusun antarmuka DeleteDocPage dapat dijelaskan sebagai berikut: (1) Tabel Dokumen, tampilan tabel berisi informasi dokumen yang ada dalam basis data (2) link_delete, link untuk menghapus dokumen.
8. Antarmuka Perangkat Lunak
SPEKCTRAL membutuhkan beberapa perangkat lunak pendukung agar dapat berjalan dengan baik. Perangkat lunak tersebut meliputi perangkat lunak database server untuk mengatur penyimpanan data, web server yang merupakan lingkungan tempat aplikasi berjalan, web browser yang digunakan pengguna untuk mengakses sistem. Antarmuka sistem dengan perangkat lunak tersebut telah disediakan oleh framework bahasa pemrograman yang akan digunakan.
43
