V. Bab IV Perancangan Sistem

Transkripsi

1 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

2 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

3 HttpServlet SearchPage imagefinder : SearchEngine out : PrintWriter processrequest() pageheader() pagefooter() pagehome() pagebrowse() pagequery() pagesearchname() viewimage() PrintWriter Database connection : Connection result : ResultSet dbstring : String driver : String user : String password : String AdminPage updater : DataUpdater out : PrintWriter processrequest() pageheader() pagefooter() pagehome() pageinsert() pagedelete() pageedit() 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 encode() findbestmatch() rgbtogray() blocksample() quantize() getsum() getsum2() inttohexstring() BufferedImage DataUpdater fractalcoder login() insertdoc() editdoc() deletedoc() 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 [ ] Document 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

4 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

5 : User : SearchPage : SearchEngine : ImageDB processrequest() 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 Tipe Batasan Keterangan category_id int(6) primary key, not null, kode kategori auto increment category_name varchar(50) not null nama kategori 35

6 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, kode document auto increment 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 kode fraktal 36

7 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 nama user yang berwenang null 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. 37

8 Tabel IV.6. Antarmuka pengguna Jenis pengguna Antarmuka Kelas Keterangan SearchPage SearchPage user melihat citra sesuai kategori User yang dipilih, mencari file berdasarkan nama atau mencari berdasarkan kemiripan citra Administrator 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 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 Name#1 Info#1 Image#2 Name#2 Info#2 Image#3 Name#2 Info#2 Kategori Citra category_name #1 category_name #2 category_name #3.. category_name n query_link Image#4 query_link query_link Image#5 Image#6 Gambar IV.4. Rancangan antarmuka SearchPage 38

9 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

10 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

11 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

12 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

13 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