BAB III ANALISIS DAN PERANCANGAN SISTEM
Pada pengembangan suatu sistem diperlakukan analisis dan perancangan sistem yang tepat, sehingga proses pembuatan sistem dapat berjalan dengan lancar dan sesuai seperti yang diinginkan. Setelah dilakukan analisis perlu adanya desain sistem (design interface) yang bertujuan untuk memberikan gambaran tentang jalannya sistem tersebut. Bab ini berisi tentang uraian analisis mengenai proses kerja dari Algoritma KnuthMorris-Pratt dalam pencarian yang mengimplementasikan word suggestion yang terdiri dari analisis masalah, analisis persyaratan, Unified Modeling Language (UML) dan perancangan interface aplikasi, perancangan sistem, dan rancangan desain interface aplikasi yang akan dibuat.
3.1 Analisis Masalah Perkembangan teknologi semakin hari semakin berkembang dengan pesat. Kemajuan teknologi memunculkan banyak aplikasi-aplikasi berbasis web yang dapat menampilkan berbagai macam informasi digital. Aplikasi- aplikasi berbasis web ini tidak menutup kemungkinan terdapat kemiripan informasi yang diberikan. Aplikasi pencarian word suggestion membandingkan kemiripan teks yang dimasukkan untuk pencarian data informasi dengan data yang telah disimpan dalam database. Aplikasi sebelumnya masih menggunakan parameter query yang manual, misalkan terdapat permasalahan ketika terdapat data inputan judul dan tahun yang diinputkan adalah judul “A” dan tahun “2015”, padahal data yang pengunjung cari itu adalah judul “A” tahun “2014”, maka sistem tidak akan menampilkan data informasi yang pengunjung butuhkan.
43
http://digilib.mercubuana.ac.id/
Kebutuhan dari aplikasi yaitu :
Input User memberikan masukan teks informasi yang ingin dicari. Contoh : Search :
Ozona
Proses Word suggestion pada aplikasi ini digunakan untuk menampilkan sugesti berdasarkan pengurutan kata yang dicari dengan data yang telah disimpan. Algoritma Knuth Morris adalah salah satu algoritma pencocokan string (String Matching) yang digunakan dalam fitur pencarian dengan pengurutan hasil terdekat pada kata yang ingin kita cari dalam bentuk presentase. Algoritma ini melakukan pencarian dengan cara menghitung dimulai dari ketidakcocokan ditemukan, dan dari ketidakcocokan tersebut akan dihitung dari mana pencarian selanjutnya sebaiknya dimulai. Algoritma Knuth-MorrisPratt menggunakan fungsi pembatas untuk menghitung urutan keberapa perbandingan harus dilakukan yang dihitung dengan menghitung panjang prefix yang terdapat pada sebuah pattern yang sama dengan suffix-nya. KMP dapat menghemat perbandingan pergeseran yang dilakukan, yang selanjutnya akan meningkatkan kecepatan pencarian. Penentuan kemiripan pada proses ini digunakan untuk menentukan besar presentase kemiripan informasi yang dicari dengan data yang telah tersimpan apakah sesuai atau kah tidak.
Output Presentase kemiripan merupakan hasil keluaran dari proses algoritma Knuth-Morris-Pratt dalam bentuk angka. Dalam pencocokan string matching menggunakan algoritma KMP ini, pattern yang dicocokkan menggunakan hasil output an berupa indeks, sehingga pattern dianggap cocok atau ada pada suatu kalimat kalau benar-benar memenuhi pattern yang dimasukkan. 44
http://digilib.mercubuana.ac.id/
Contoh : 1. Dira Mengukur zona kedalaman laut Indonesia 2015 (0%) 2. Nadia Lapisan ozon 2015 mulai menipis 2014 (0%) 3. Leleyong Tozona dalam luar angkasa 2013 (100%) 4. Tami Ozonated olive oil 2012 (100%)
3.2 Analisis Persyaratan Untuk membangun sebuah sistem, perlu dilakukan sebuah tahap analisis kebutuhan sistem. Analisis kebutuhan sistem dapat dikelompokkan menjadi dua bagian yaitu : kebutuhan fungsional dan kebutuhan non-fungsional. 3.2.1 Persyaratan Fungsional Persyaratan fungsional sistem adalah aktifitas dan pelayanan yang harus dimiliki oleh sebuah sistem berupa input, proses, output, maupun penyimpanan data. Adapun Persyaratan Fungsional yang dibutuhkan yaitu : 1. Pengguna memasukkan input berupa huruf 2. Sistem melakukan pencocokan
string melalui setiap huruf yang
diketikkan 3. Sistem harus mampu menampilkan word suggestion yang mendekati seperti input yang diketikkan 3.2.2 Persyaratan Non-Fungsional Persyaratan non-fungsional sistem merupakan persyaratan apa yang harus dilakukan sistem. Beberapa persyaratan non-fungsional yang harus dipenuhi oleh sistem yang dirancang adalah sebagai berikut : 1. Performa Sistem yang akan dibangun harus dapat menunjukkan hasil dari proses pencarian word suggestion
45
http://digilib.mercubuana.ac.id/
2. Mudah dipelajari dan digunakan Sistem yang akan dibangun harus sederhana dan mudah dipelajari oleh pengguna (user) 3. Dokumentasi Sistem yang akan dibangun dapat menyimpan saran kata yang ditambahkan oleh pengguna (user) ke dalam database 4. Kontrol Sistem yang akan dibangun harus memiliki pesan not found jika kata yang diketikkan pengguna (user) tidak ada di dalam database kita 5. Hemat biaya Sistem yang akan dibangun tidak memerlukan perangkat tambahan dalam proses eksekusinya
3.3 Pemodelan Sistem Pemodelan sistem dilakukan untuk memperoleh gambaran yang lebih jelas tentang objek apa saja yang akan berinteraksi dengan sistem, serta hal-hal apa saja yang harus dilakukan oleh sebuah sistem sehingga sistem dapat berfungsi dengan baik sesuai dengan kegunaannya. Pada penelitian ini digunakan UML (Unified Modeling Language) sebagai bahasa pemodelan untuk mendesain dan merancang Sistem Pencarian word suggestion dengan menggunakan algoritma Knuth-Morris-Pratt (KMP). Model UML yang digunakan antara lain use case diagram, activity diagram, class diagram, dan sequence diagram. 3.3.1 Use Case Diagram Use case merupakan fungsionalitas dari suatu sistem, sehingga pengguna sistem paham dan mengerti mengenai kegunaan sistem yang akan dibangun. Use case berperan menggambarkan interaksi antar komponen-komponen yang berperan dalam sistem yang akan dirancang.
46
http://digilib.mercubuana.ac.id/
System
memasukkan karakter string pada textbox pencarian
Mengunggah berkas pdf
Mengundah berkas Student
Administrator
melakukan pengaturan direktori
melakukan pengaturan pengguna
Gambar 3.1 Use Case Diagram Sistem Use case pada gambar 3.1 menjelaskan aksi yang dapat dilakukan oleh administrator dan user (student), dimana administrator dapat melakukan upload data, pencarian word suggestion dan akan mengecek kata tersebut ada atau tidak ada pada form pencarian, download file dan preview file, pengaturan user dan rolenya, penambahan direktori sebagai tempat penyimpanan data berkas, sedangkan user dapat melakukan pencarian word suggestion dan akan mengecek kata tersebut ada atau tidak ada pada form pencarian, download file dan open file. Tabel 3.1 Tabel Use Case Proses Pencarian Word suggestion Name
Proses Pencarian Word suggestion
Actors
Pengguna yang telah ditentukan
Description
Use Case ini mendeskripsikan pencarian kata dengan algoritma Knuth-Morris-Pratt dan word suggestion pada kotak pencarian
Basic Flow
Pengguna memasukkan inputan karakter berupa huruf
Alternate Flow
Pengguna dapat memilih alternatif saran Knuth-Morris-Pratt
Pre-Condition
-
Post-Condition
Pengguna mengetahui hasil iterasi, presentase alternatif KnuthMorris-Pratt
47
http://digilib.mercubuana.ac.id/
3.3.2 Activity Diagram Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang atau menggambarkan proses paralel yang mungkin terjadi dalam beberapa eksekusi. Berikut adalah gambar dari activity diagram dibangun. User / Administrator
System
Mulai
Menampilkan halaman awal
Input karakter pada kolom pencarian
Pencarian kata
Total = 0 persentase = 0
Array = Potong karakter pencarian berdasarkan delimiter
I=0 i < array.size()
Prefix function
Map = getDataFromDatabase()
Index = String matching function
Result = 0%
Result = 100%
Total = total + result
Persentase = total / (array.size() * 100)
Enter
Menampilkan 5 atau 10 data word suggestion
Menampilkan data yang mengandung keyword atau kata inputan
Gambar 3.2 Activity Diagram Pencarian Berkas
48
http://digilib.mercubuana.ac.id/
Tabel 3.2 Pencarian Data Nama
Activity Pencarian kata pada textbox pencarian
Diagram Aktor
Pengguna , administrator
Deskripsi
Activity ini mendeskripsikan proses sistem pada aplikasi pencarian untuk mendapatkan presentase kemiripan
Prakondisi Bidang
Sudah masuk ke tampilan utama khas
suatu kejadian
Kegiatan
Respon sistem
Menginputkan kata yang ingin Sistem menampilkan halaman dicari
yang dipilih Sistem
menggunakan
autocomplete
untuk
menampilkan sugesti kata Menampilkan
hasil
iterasi
(persentase) dalam pencarian berdasarkan kata yang dicari Pasca Kondisi
Menampilkan word suggestion dan hasil yang dicari dalam bentuk presentase
User / Administrator
System
Mulai
Menampilkan list file hasil pencarian
Download file yg diinginkan
Proses download
Gambar 3.3 Activity Diagram Download Berkas 49
http://digilib.mercubuana.ac.id/
Tabel 3.3 Download berkas Nama
Activity Download Berkas
Diagram Aktor
Pengguna, Administrator
Deskripsi
Activity
ini
mendeskripsikan
proses
pengambilan
berkas
berdasarkan judul yang dipilih Prakondisi
Tampilan halaman form download data berkas beserta deskripsi detail berkas
Bidang
khas
Kegiatan
suatu kejadian
Respon sistem
User memilih icon save pada Sistem menyediakan fungsi penyimpanan
form download
berkas
juga
preview berkas sebelum di download Pasca Kondisi
Menampilkan pesan sukses
Administrator
System
Mulai
Menampilkan halaman awal
Pilih menu input data baru
Menampilkan form input data buku baru
Input data buku baru
Simpan
Upload file
Validasi file sudah lengkap?
Simpan semua file yg diupload
Gambar 3.4 Activity Diagram Upload Berkas
50
http://digilib.mercubuana.ac.id/
Tabel 3.4 Upload berkas Nama
Activity Upload Berkas
Diagram Aktor
Administrator
Deskripsi
Activity ini mendeskripsikan proses penyimpanan multiple berkas berdasarkan kategorinya (Thesis, Under graduate thesis, etc)
Prakondisi
Tampilan halaman form input data berkas beserta authornya dan button upload multiple berkas
Bidang
khas
suatu kejadian
Kegiatan
Respon sistem
Memasukkan data-data sesuai Sistem menyimpan data ke form “Add New Berkas”
dalam database
Upload berkas
Sistem
menyediakan
multiple upload Pasca Kondisi
Menampilkan pesan sukses
51
http://digilib.mercubuana.ac.id/
3.3.3 Class Diagram Diagram kelas adalah diagram UML yang menggambarkan kelas-kelas dalam sebuah sistem dan hubungannya antara satu dengan yang lain, serta dimasukkan pula atribut dan operasi. Berikut adalah gambar dari class diagram yang dibangun : Filedir BaseModel -id : Long -createdTime : Date -title : String -createdBy : String -fileType : CategoryEnumeration -updatedTime : Date -directory : Directory -updatedBy : String -author : String -authoriser : String -publisher : String extend -authorizeTime : Date -status : String +getId() : Filedir -version : Integer +toString()() : String +equals(Object o)() : Boolean FileDetail +hashCode()() : Integer -id : Long -filedir : Filedir -fileSize : Long -fileName : String «interface» +getId() : Long FiledirDao +getAllActive() : Filedir «interface» FiledirService +getAllActive() : Filedir
CategoryEnumeration -categoryName : String
Exp : THESIS("Thesis"),UNDER_GRADUAT E_THESIS("Under Graduate Thesis"),JOURNALS("Journals") URLMapping -id : Long -destination : String -urlMapp : String
«interface» DirectoryDao +getAllActive() : Directory +getDirectoriesByCategory(in category : String) : Directory +checkExistingDirectory(in directory : Directory, in status : String) : Boolean +getDirectoryActive(in category : CategoryEnumeration) : Directory «interface» DirectoryService +getAllActive() : Directory +getDirectoriesByCategory(in category : String) : Directory +checkExistingDirectory(in directory : Directory, in status : String) : Boolean +getDirectoryActive(in category : CategoryEnumeration) : Directory
FileController +viewFile() : String +addFile() : String +editFile() : String +uploadFile() : String +downloadFile() : String +deleteFile() : String
Directory -id : Long -location : URLMapping -category : CategoryEnumeration -year : Integer +getId() : Directory
«interface» GenericDao +get(in id : Long) : object +save(in model : object) : object +getAll() : object +remove(in id : Long)
«interface» GenericService +get(in id : Long) : object +save(in model : object) : object +getAll() : object +remove(in id : Long)
KMPController +searchKMP() : String
DirectoryController +addDirectory() : Directory +editDirectory() : Directory +deleteDirectory() : String
«interface» kmpService +searchFile(in keyword : String) : object +searchFileAutocomplete(in keyword : String) : object
FiledirDto -id : Long -title : String -category : CategoryEnumeration -author : String -publisher : String -percentage : Decimal +compareTo(in filedirDto : FiledirDto) : int
Gambar 3.5 class diagram system
52
http://digilib.mercubuana.ac.id/
KMPPlus -pattern : String -next +searchIndex() : Integer
3.3.4 Sequence Diagram Sequence diagram merupakan diagram yang menggambarkan interaksi antar objek dan menjelaskan bagaimana suatu operasi dilakukan. Diagram ini juga menunjukkan serangkaian pesan yang dipertukarkan oleh objek. Dalam sistem yang akan dibangun, interaksi dilakukan antar pengguna dan sistem. Sequence diagram sistem dapat dilihat pada gambar berikut : Upload File (Successed)
Actor1 Administrator
formUpload
FileController
FileService
Database
Choose formUpload() Choose file to upload
saveFile()
saveFile()
:title, :successMsg, :ListFile
checkFileAlreadyExist() :title, :successMsg
:title
getListFile()
getListFile()
:ListFile
:ListFile
saveFile()
Gambar 3.6 Upload berkas (successed)
Upload File (Failed)
Actor1 Administrator
formUpload
FileController
FileService
Database
Choose formUpload() Choose file to upload saveFile()
:title, :failedMsg, :ListFile
saveFile() :title, :failedMsg
checkFileAlreadyExist()
getListFile()
getListFile()
:ListFile
:ListFile
Gambar 3.7 Upload berkas (failed)
53
http://digilib.mercubuana.ac.id/
Download File
Actor1 Administrator/User
formDownload
Choose file from list file
FileController
FileService
Database
downloadFile(id)
downloadFile(id)
getFileById(id)
:file
:file
:file
Gambar 3.8 Download berkas
Search File
Actor1 Administrator/User
listFilePage
file.js
FileController
FileService
Database
getAllDataFile()
getAllDataFile()
:listFile input text for seach file
wordSuggestion()
wordSuggestion()
:listFile
Total=0 Persentase=0 Array = splitInputText(text) getPrefixFunction(array)
Looping
:map Index = getStringMatching(Map,listFile)
Result = if(index!=null)?100 : 0
:result
Total = total + result :listFile with persentase Persentase (%) = (total/(array.size()*100)) * 100
Gambar 3.9 Search file use word suggestion and KMP algorithm
54
http://digilib.mercubuana.ac.id/
3.4 Perancangan Sistem Berdasarkan gambaran dari hasil analisis proses maka dibangun suatu model rancangan flowchart sistem dan juga rancangan antar muka sistem. 3.4.1 Perancangan Database (Basis Data) Dalam penelitian ini, database yang dirancang dibuat dalam berkas tersendiri menggunakan MySQL.
Gambar 3.10 Database sistem
3.4.2 Perancangan Antarmuka (Interface) Antarmuka (Interface) berguna untuk mempermudah pengguna ketika mengakses sebuah aplikasi, antarmuka sistem juga merupakan suatu alur komunikasi antara user dengan sistem (Khadijah, 2013). Antarmuka dapat disebut juga sebagai wajah dari suatu aplikasi, sehingga ketika seorang user atau pengguna pertama kali mengakses suatu aplikasi, maka bagian pertama yang akan muncul adalah antarmuka (interface). Berikut ini akan digambarkan tentang rancangan tampilan halaman pada sistem yang akan dibuat.
3.4.2.1 Rancangan Halaman Awal User dan Administrator Halaman awal ini berisi menu utama aplikasi yaitu berisi inputan teks dan menu list box yang akan dipilih dalam pengujian word suggestion. Gambar 3.12 menunjukkan rancangan interface halaman awal user.
55
http://digilib.mercubuana.ac.id/
1 2
4 3
5
Gambar 3.11 Rancangan Halaman Awal User
Tabel 3.5 Rancangan Halaman Awal User No
Keterangan
1
Merupakan static text untuk menampilkan judul skripsi
2
Merupakan teks field untuk menginputkan kata yang ingin dicari
3
Merupakan List box tempat hasil pencarian berdasarkan teks yang diinputkan disertai persentase kemiripan
4
Download, Link menuju form detail untuk mendownload berkas
5
Besar persentase kemiripan dari hasil pencarian data
56
http://digilib.mercubuana.ac.id/
3.4.2.2 Rancangan Halaman Upload Halaman upload merupakan halaman yang menampilkan form upload berkas yang akan disimpan pada database. Gambar 3.13 menunjukkan rancangan interface halaman upload berkas.
1
3
2
Gambar 3.12 Rancangan Halaman Upload
Tabel 3.6 Rancangan Halaman Upload No
Keterangan
1
Merupakan data untuk menampilkan deskripsi dari jenis data
2
Merupakan list dari berkas yang telah diunggah.
3
Merupakan form unggah berkas yang akan di simpan
57
http://digilib.mercubuana.ac.id/
3.4.2.3 Rancangan Halaman Download Halaman download merupakan halaman yang menampilkan tentang deskripsi detail dari berkas dengan kategori yang dipilih dan link save untuk menyimpan berkas tersebut serta preview untuk menampilkan isi dari berkas tersebut. Gambar 3.14 menunjukkan rancangan interface halaman download.
1 3
2
Gambar 3.13 Rancangan Halaman Download
Tabel 3.7 Rancangan Halaman Download No
Keterangan
1
Merupakan data untuk menampilkan deskripsi dari jenis data
2
Merupakan list dari berkas yang dapat disimpan dengan cara di download
3
Merupakan preview untuk menampilkan isi berkas yang dipilih
58
http://digilib.mercubuana.ac.id/
3.4.2.4 Rancangan Halaman User Halaman
user
merupakan
halaman
yang
menampilkan
tentang
penganturan user login dan hak akese yang dimiliki. Gambar 3.15 menunjukkan rancangan interface halaman user.
1
2
Gambar 3.14 Rancangan Halaman User
Tabel 3.8 Rancangan Halaman User No
Keterangan
1
Merupakan data untuk pendaftaran user login
2
Merupakan jenis role yang dipakai oleh user login sebagai penentu menu apa saja yang dapat diakses.
59
http://digilib.mercubuana.ac.id/
3.4.2.5 Rancangan halaman Direktori Halaman direktori merupakan halaman yang menampilkan pendaftaran tentang direktori untuk penyimpanan berkas tersebut berdasarkan kategorinya. Gambar 3.16 menunjukkan rancangan interface halaman direktori.
1
Gambar 3.15 Rancangan Halaman Direktori
Tabel 3.9 Rancangan Halaman Direktori No 1
Keterangan Merupakan
data untuk pendaftaran pembuatan direktori penyimpanan
berkas yang diupload oleh administrator
60
http://digilib.mercubuana.ac.id/