BAB III
ANALISIS DAN PERANCANGAN
Bab ini akan menjelaskan sistem analisis dan perancangan pada aplikasi Pencarian Hadits Riyadhus shalihin, tahap pertama adalah analisis dan dilanjutkan dengan perancangan aplikasi.
3.1
Analisis Sistem Tahapan analisis dalah tahapan awal dalam pembuatan aplikasi. Pada
tahap ini penulis menganalisa kebutuhan kebutuhan aplikasi. Analisa dilakukan pada data-data yang dibutuhkan aplikasi, sehingga dapat diketahui spesifikasi kebutuhan apa saja yang dibutuhkan untuk membangun aplikasi Pencarian Hadits Riyadhus Shalihin. Pada saat kita ingin mempelajari hadits atau mencari sebuah hadits kita harus membuka kitab yang mempunyai lebih dari 500 halaman. Penulis temukan pada remaja masjid Jami Al-makmur yang berada pada lingkungan tempat tinggal, hanya beberapa remaja memiliki sebuah kitab atau malas membawa kitab ketika pembahasan dalam majelis atau pengajian rutin. Bagi remaja penting sekali untuk mempelajari hadits, untuk mengetahui hukum-hukum islam dalam kehidupan agar tidak terjerumus oleh tindak yang tidak baik atau dilarang oleh agama islam. Remaja masjid pada saat ini hampir 80 % memiliki atau menggunakan handphone smartphone. Tak jarang perkembangan teknologi disalahgunakan sehingga berdampak negative bagi penggunanya. Untuk membatasi hal buruk serta menggunakan smartphone lebih bermafaat pada remaja masjid, penulis mencoba membuat aplikasi pencarian hadits, sebagai media dalam mempelajari hadits serta memudah pencarian hadits.
30
31
3.2
Analisa Kebutuhan Dalam melakukan penelitian, dibutuhkan beberapa komponen
yang
mendukung terhadap keberhasilan peneliltian ini yaitu : 1. Perangkat lunak (software) a. Sistem operasi Windows 7 Profesional SP 1 b. Software Eclipse Juno Build id: M2013204-1200 c. Xampp 1.7.7 d. Adobe Photoshop CS 6 e. Notepad++ f. FileZilla g. Android SDK h. Ms. Visio 2007 i. JQuery V1.11.1 j. Bootstrap V3.2.0 2. Perangkat keras (hardware) a. Notebook Pribadi b. Smartphone Android minimal versi 3.0
3.3
Perancangan Sistem Aplikasi pencarian hadits dibuat berdasarkan Bootstrap dan Jquery
Mobile, sedangkan untuk bahasa pemrogramannya menggunakan HTML5 dan Eclipse sebagai Aplikasi Editor, serta Adobe photoshop untuk membuat icon pada aplikasi. Perancangan sistem merupakan tahap awal dari perancangan perangkat lunak. Perancangan ini dilakukan untuk mengetahui kondisi sistem secara umum. Perancangan sistem meliputi Cara kerja sistem, Use case diagram, Activity Diagram dan sequence diagram.
32
3.3.1
Cara Kerja Sistem Aplikasi pencarian hadits berjalan secara online. Aplikasi pencarian hadits
ini menggunakan teknik webview pada smartphone sehingga hanya menampilkan web yang telah di hosting sebelumnya ke internet mengunakan hosting yang disediakan oleh google.
3.3.2 Perancangan Use Case Diagram Use Case diagram adalah menggambarkan fungsionalitas dari sebuah sistem perangkat lunak yang sistem tersebut berinteraksi dengan dunia luar. Pada aplikasi Data Kereta Api ini dapat diketahui bahwa aktor utamanya adalah user (User). Maka didapatkan 1 use case diagram. beberapa skenario yang memperlihatkan interaksi interaksi use case diagram dengan actor use case diagram.
Gambar 3.1 use case Aplikasi Pencarian Hadits
Berikut ini adalah deskripsi dari use case diagram pada gambar 3.1 diatas:
33
Tabel 3.1
Use case menu utama
Nama
Menu Utama
Aktor
User Aplikasi
Deskripsi
User memilih salah satu menu pada halaman menu utama. 1. User memilih aplikasi hadits. 2. Pada aplikasi terdapat 4 image button menu :
Skenario
Hadits
Search
Info
Tentang Kitab
3. User memilih menu yang tersedia. 4. Aplikasi akan memunculkan isi menu yang dipilih. Kondisi Awal Kondisi Akhir
User menerima halaman awal yang berisi menu Utama
1. User memilih menu yang tersedia pada menu utama
Tabel 3.2
Nama
Hadits.
Aktor
User Aplikasi.
Deskripsi
Use case menu Hadits
User memilih image button hadits yang berisi tentang hadits Riyadhus shalihin. 1. User memilih memilih image button hadits. 2. Pada aplikasi terdapat submenu bab dalam hadits.
Skenario
3. User memilih salah satu bab yang tersedia. 4. Pada aplikasi terdapat submenu hadits. 5. User memilih salah satu hadits yang tersedia. 6. Aplikasi akan memunculkan detil hadits yang dipilih.
34
Kondisi
User menerima halaman awal yang berisi submenu bab dalam
Awal
hadits.
Kondisi
1. User memilih detil hadits dari menu hadits.
Akhir
2. Aplikasi menampilkan halaman Detil Hadits.
Tabel 3.3
Nama
Search
Aktor
User Aplikasi
Deskripsi
Use case menu Search
User memilih menu search yang tujuannya mencari hadits sesuai dengan kata yang diinput oleh user. 1. User memilih menu search 2. Aplikasi akan memunculkan kolom text box dan button
Skenario
search 3. User memasukan kata yang akan di cari. 4. Aplikasi akan memunculkan hadits sesuai dengan kata yang diinput oleh user
Kondisi
User menerima halaman awal yang berisi kolom text box dan
Awal
button search.
Kondisi
Aplikasi menampilkan hadits yang sesuai dengan kata yang
Akhir
diinput oleh user.
Tabel 3.4
Nama
Info aplikasi
Aktor
User Aplikasi
Deskripsi
Use case Menu Info Aplikasi
User memilih menu info yang menjelaskan tentang cara penggunaan aplikasi dan fungsi tombol pada aplikasi.
35
1. User memilih menu info Skenario
2. Aplikasi akan memunculkan
penjelasan tentang cara
penggunaan aplikasi.
Kondisi Awal User menerima halaman awal yang berisi menu info aplikasi. Kondisi Akhir
1. Aplikasi menampilkan penjelasan tentang cara penggunaan aplikasi.
Tabel 3.5
Nama
Tentang Hadits
Aktor
User Aplikasi
Deskripsi
Use case Menu Tentang Kitab
User memilih menu Tentang Kitab untuk mengetahui penjelasan kitab Riyadhus Shalihin 1. User memilih menu Tentang Kitab
Skenario
2. Aplikasi akan memunculkan halaman penjelasan kitab Riyadhus Shalihin
Kondisi Awal Kondisi Akhir
3.3.3
User menerima halaman awal yang berisi menu Tentang Kitab. 1. Aplikasi menampilkan halaman Tentang Kitab Riyadhus Shalihin.
Perancangan Activity Diagram Diagram aktifitas menggambarkan berbagai aliran aktifitas dalam sistem
yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana suatu aktifitas berakhir.Setiap langkah adalah
36
sebuah keadaan dalam melakukan sesuatu. Gambar 3.2 sampai 3.5 adalah activity diagram dari aplikasi yang akan dibuat.
Gambar 3.2 Diagram activity Menu Utama
Pada gambar diatas user akan dibawa ke halaman menu utama yang terdapat 4 button image , yaitu menu hadits, menu search, menu info serta menu Tentang Hadits. Untuk keluar dari aplikasi adalah dengan menggunakan tombol back pada Handphone. Setelah itu user mendapatkan popup yang berisi pertanyaan konfirmasi serta tombol yes/no. Untuk keluar atau menutup aplikasi user memilih tombol YES, dan untuk tetap menggunakan aplikasi user memilih tombol NO.
37
Gambar 3.3
Diagram Activity Menu Hadits
Pada gambar 3.3 di atas menjelaskan aplikasi saat memulai user memilih menu hadits. Setelah itu user mendapatkan submenu bab dan user menentukan bab yang akan dilihat kemudian memilih hadits pada submenu hadits. Aplikasi akan menampilkan detil hadits yang telah dipilih oleh user. Pada header halaman submenu bab, submenu hadits serta detil hadits terdapat tombol Sebelumnya. Tombol tersebut berfungsi kembali ke menu sebelumnya. Untuk keluar dari aplikasi adalah dengan menggunakan tombol back pada Handphone. Setelah itu user mendapatkan popup yang berisi pertanyaan konfirmasi serta tombol yes/no. Untuk keluar atau menutup aplikasi user memilih tombol YES, dan untuk tetap menggunakan aplikasi user memilih tombol NO.
38
Gambar 3.4 Diagram Activity Menu Search
Pada gambar 3.4 di atas menjelaskan aplikasi saat memulai user men-tap ke menu search. Setelah itu user mendapatkan halaman search, user harus memasukan kata yang ingin dicari kemudian menekan tombol search. Aplikasi akan melakukan pencarian hadits sesuai dengan kata yang dimasukan oleh user, kemudian menampilkannnya. Jika aplikasi tidak menampilkan satu pun hadits dikarenakan database yang disediakan oleh pembuat terbatas. User memilih hadits yang telah ditampilkan, untuk meliat detil hadits user harus memilih kalimat selengkapnya kemudian aplikasi akan menampilkan detil hadits yang diinginkan oleh user. User bisa langsung menggunakan tombol sebelumnnya pada header yang akan kembali ke halaman sebelumnya. Untuk keluar dari aplikasi adalah dengan menggunakan tombol back pada Handphone. Setelah itu user
39
mendapatkan popup yang berisi pertanyaan konfirmasi serta tombol yes/no. Untuk keluar atau menutup aplikasi user memilih tombol YES, dan untuk tetap menggunakan aplikasi user memilih tombol NO.
Gambar 3.5 Diagram Activity Menu Info Aplikasi
Pada gambar 3.5 di atas menjelaskan aplikasi saat memulai user men-tap ke menu info. Setelah itu user mendapatkan halaman info dimana menjelaskan cara penggunaan aplikasi. User bisa langsung menggunakan tombol Sebelumnnya pada header yang akan kembali ke halaman sebelumnya. Untuk keluar dari aplikasi adalah dengan menggunakan tombol back pada Handphone. Setelah itu
40
user mendapatkan popup yang berisi pertanyaan konfirmasi serta tombol yes/no. Untuk keluar atau menutup aplikasi user memilih tombol YES, dan untuk tetap menggunakan aplikasi user memilih tombol NO.
Gambar 3.6 Diagram Activity Menu Tentang Kitab
Pada gambar 3.6 di atas menjelaskan aplikasi saat memulai user memilih menu Tentang Kitab. Aplikasi akan menampilkan halaman Tentang Kitab yang berisi penjelasan kitab Riyadhus Shalihin. Untuk keluar dari aplikasi adalah dengan menggunakan tombol back pada Handphone.
Setelah itu user
mendapatkan popup yang berisi pertanyaan konfirmasi serta tombol yes/no. Untuk keluar atau menutup aplikasi user memilih tombol YES, dan untuk tetap menggunakan aplikasi user memilih tombol NO.
41
3.3.4
Perancangan Sequence Diagram Sebuah sequence diagram secara khusus menjabarkan aktivitas sebuah
skenario tunggal. Diagram tersebut menunjukan sejumlah objek contoh dan pesan-pesan melalui objek-objek di dalam use case diagram (Fowler, 2005:81). Dari bentuk use case yang telah digambarkan sebelumnya, dapat dibuat sequence diagram.
Pada tahap ini aktor yang berperan adalah user itu sendiri, untuk
melihat proses lebih jelasnya dapat dilihat sequence diagram dibawah ini:
Gambar 3.7 Diagram Sequence Aplikasi Pencarian Hadits
Gambar diatas menggambarkan proses yang sedang terjadi saat user membuka halaman utama aplikasi pencarian hadits. Prosesnya dimulai saat user membuka halaman menu utama dan kemudian user bisa membuka halaman menu hadits, menu search, menu info dan menu tentang kitab. Kemudian masuk ke
42
dalam halaman yang dipilih maka sistem akan menampilkan halaman yang dipilih oleh user. Disini aktor yang berperan masih user aplikasi pencarian hadits, berikut adalah sequence diagram pada halaman menu hadits.
Gambar 3.8 Diagram Sequence Menu Hadits
Gambar di atas menjelaskan saat user membuka halaman halaman menu hadits kemudian memilih bab dalam submenu bab, dan user memilih hadits kemudian aplikasi menampilkan detil hadits sesuai hadits yang di pilih pada submenu hadits.
43
Gambar 3.9 Diagram Sequence Menu Search
Gambar di atas menjelaskan saat user membuka halaman menu search. User memilih menu search kemudian user menginput / memasukan kata yang akan dicari, lalu menekan tombol search, maka aplikasi akan mencari hadits sesuai kata yang diinput oleh user. User memilih kalimat selengkapnya untuk membuka detil hadits yang dikehendaki oleh user.
44
Gambar 3.10 Diagram Sequence Menu Info Aplikasi
Gambar di atas menjelaskan saat user membuka halaman menu info. User memilih menu info kemudian aplikasi menampilkan halaman info tentang penggunaan aplikasi.
45
Gambar 3.11 Diagram Sequence Menu Tentang Kitab
Gambar di atas menjelaskan saat user membuka halaman keluar . Pertama user masuk halaman menu utama kemudian memilih menu exit, kemudian aplikasi menampilkan pilihan Yes atau No, jika Yes maka akan keluar dari aplikasi, jika No maka akan kembali ke menu utama.
3.3.5
Perancangan Antarmuka (User Interface) Perancangan antarmuka ( User Interface ) merupakan rancangan disain
awal dari aplikasi yang dibangun. Perancangan antar muka mendeskripsikan rencana tampilan dari setiap tampilan yang akan digunakan pada aplikasi Pencarian Hadits Riyadhus Shalihin. Satu kolom User interface mewakili satu tampilan di layar handphone.
46
Tabel 3.6
User Interface Aplikasi Pecarian Hadits
No. Visual
Keterangan
1.
Nama Halaman : Halaman menu utama 1. Header – Bagian ini tempat dari judul aplikasi 2.
Icon
– button menu yang
tersedia pada aplikasi
Gambar 3.12 Halaman Menu Utama Aplikasi 2.
Nama Halaman : Submenu hadits header
1
Header : judul dari aplikasi
2 Sebelumnya : tombol kembali Sebelumnya hadits Bab Bab Bab Bab Gambar 3.13 Halaman Submenu Bab
ke halaman sebelumnya 3 hadits : judul menu 4 bab
: daftar submenu bab
47
3.
header
Nama Halaman : Submenu hadits 1. Header : Judul dari aplikasi
Sebelumnya
2. Sebelumnya: Tombol untuk kembali ke menu sebelumnya
Bab 1
3. Bab : judul menu
hadits
4. Hadits : daftar submenu hadits
hadits hadits hadits hadits Gambar 3.14 Halaman Submenu Hadits 4.
Nama Halaman : Halaman detil header
hadits 1. Header : Bagian dari tempat
Sebelumnya Huruf arab
judul aplikasi 2. Sebelumnya: Tombol untuk kembali ke menu sebelumnya. 3. Huruf arab : Menampilkan hadits.
Arti hadits
4. Arti hadits : Menampilkan arti hadits Indonesia.
Gambar 3.15 Halaman Detil Hadits
dalam
bahasa
48
5.
Nama Halaman : menu search header
1. Header : Bagian dari tempat judul aplikasi
Sebelumnnya
2. Sebelumnya: Tombol untuk kembali
input
search
ke
halaman
sebelumnya 3. Input : text box untuk user mengetikan hadits yang ingin dicari 4. Search
:
tombol
untuk
melakukan pencarian hadits Gambar
3.16
Halaman
menu
search 6.
Nama Halaman : hasil pencarian 1. Header : Bagian dari judul
header
aplikasi Sebelumnya input
2. Sebelumnya : Tombol untuk search
kembali ke menu sebelumnya 3. Input : text box untuk user
Hasil pencarian
mengetikan hadits yang ingin dicari 4. Search
:
tombol
untuk
melakukan pencarian hadits 5. Hasil
pencarian
menampilkan
hadits
: sesuai
dengan kata yang diinput oleh pengguna
49
7.
Nama
Halaman
:
Halaman
konfirmasi pertanyaan / dialog alert
Dialog alert
1. Dialog
alert
konfirmasi YES
NO
:
untuk
pertanyaan menutup
aplikasi 2. Yes : button untuk keluar aplikasi 3. No :
button untuk
menggunakan aplikasi
Gambar 3.17 Halaman Dialog Alert
tetap