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.
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. Masing-masing 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.
FractalCoder image : BufferedImage imageMatrix : short [ ] imWidth : int imHeight : int blockSize : int encode() findBestMatch() rgbToGray() blockSample() quantize() getSum() getSum2() intToHexString() DataUpdater fractalCoder login() insertDoc() editDoc() deleteDoc() AdminPage updater : DataUpdater out : PrintWriter processRequest() pageHeader() pageFooter() pageHome() pageInsert() pageDelete() pageEdit() SearchPage imageFinder : SearchEngine out : PrintWriter processRequest() pageHeader() pageFooter() pageHome() pageBrowse() pageQuery() pageSearchName() viewImage() SearchEngine fractalCoder : FractalCoder viewCategory() viewDocByCategory() searchIm ageFile() imageQuery() getCodeFromInv() getDocVector() calcDotProduct() sortDocument() getRowsCount() ImageDB admin : Admin category : Category docum ent : Document invertedfile : InvertedFile dictionary : String [ ] Admin username : String password : String Category category_id : int(6) category_name : varchar(50) Document doc_id : int(8) doc_name : varchar(100) category_id : int(6) path : varchar(255) InvertedFile code : char(10) doc_id : int(8) PrintWriter ResultSet BufferedImage Connection HttpServlet Database connection : Connection result : ResultSet dbString : String driver : String user : String password : String
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.
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
: User
: User : SearchPage : SearchPage : SearchEngine : SearchEngine : ImageDB : ImageDB
Document processRequest() pageBrowse Kategori viewDocByCategory() 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 Tipe Batasan Keterangan
category_id int(6) primary key, not null,
auto increment
kode kategori
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 Tipe Batasan Keterangan
doc_id int(8) primary key, not null,
auto increment
kode document
doc_name varchar(100) not null nama dokumen
category_id int(6) foreign key, not null kode kategori dokumen
path varchar(255) not null 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 Tipe Batasan Keterangan
s double not null nilai s kode fraktal
o double not null nila o kode fraktal
doc_id int(8) foreign key, not null kode dokumen yang memuat
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 Tipe Batasan Keterangan
username varchar(20) primary key, not
null
nama user yang berwenang sebagai administrator
password varchar(10) not null 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.
Tabel IV.6. Antarmuka pengguna
Jenis pengguna Antarmuka Kelas Keterangan
SearchPage SearchPage user melihat citra sesuai kategori
yang dipilih, mencari file berdasarkan nama atau mencari berdasarkan kemiripan citra User
QueryResultPage SearchPage menampilkan hasil query
berdasrkan kesamaam kode fraktal
LoginPage AdminPage login admin
InsertCategoryPage AdminPage admin memasukkan jenis kategori baru
EditCategoryPage AdminPage admin mengedit kategori
InsertDocPage AdminPage admin memasukkan dokumen
baru
EditDocPage AdminPage admin mengedit dokumen
Administrator
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 Kategori Citra category_name #1 category_name #2 category_name #3 . . category_name n Image#1 Image#4 Image#6 Image#5 Name#1 query_link Info#1 Image#2 Name#2 query_link Info#2 Image#3 Name#2 query_link Info#2 Pencarian File
File keyword cari
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
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.
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. 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.
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.
