37
BAB IV HASIL DAN PEMBAHASAN
4.1. Perancangan Sistem
Menurut Jogiyanto 2001:196, Perancangan Sistem dapat didefinisikan sebagai penggambaran, perencanaan, dan pembuatan sketsa atau pengaturan dari
beberapa elemen yang terpisah kedalam satu kesatuan yang utuh dan berfungsi. Pengertian lain mengenenai perancangan sistem menurut Jogiyanto 2001:196,
Perancangan sistem menentukan bagaimana suatu sistem akan menyelesaikan apa yang harus diselesaikan. Tahap ini menyangkut konfigurasi dari komponen-
komponen perangkat lunak dan perangkat keras dari suatu sistem sehingga setelah instalasi dari sistem akan benar-benar memuaskan rancangan bangun yang telah
ditetapkan pada akhir tahap analisa sistem.
4.1.1. Tujuan Perancangan Sistem
Menurut Jogiyanto 2001:209, terdapat dua tujuan utama perancangan sistem yaitu, untuk memenuhi kebutuhan para pemakai sistem dan untuk
memberikan gambaran yang jelas dan rancang bangun yang lengkap kepada programmer. Kedua tujuan ini lebih berfokus kepada perancangan atau desain
sistem yang terperinci yaitu pembuatan rancang bangun yang jelas dan lengkap yang nantinya digunakan untuk pembuatan suatu program komputer.
4.1.2. Gambaran Umum Sistem Yang Diusulkan
Aplikasi pembelajaran bahasa arab berbasis android ini dapat digambarkan sebagai salah satu bentuk pembelajaran yang dapat menjawab masalah-masalah
38
yang terdapat pada pembelajaran bahasa arab di program pesantren mahasiswa PPM baik mengenai pembelajaran bahasa arab itu sendiri maupun mengenai
waktu pembelajaran.
Gambar 4.1. Gambaran Umum Sistem Yang Diusulkan 4.1.3.
Perancangan Prosedur Yang Diusulkan
Perancangan prosedur merupakan tahap awal ketika akan membuat suatu sistem, pada perancangan prosedur ini akan terlihat proses-proses yang akan
dilakukan pada saat pembuatan sistem. Berikut ini prosedur yang diusulkan oleh penulis, sebagai berikut :
1. User membuka aplikasi pembelajaran bahasa arab.
2. User memilih salah satu menu yang telah disiapkan pada navigation drawer
disebelah kiri. Menu yang tersedia pada aplikasi pembelajaran bahasa arab diantaranya, yaitu Kata, Kosakata, Percakapan, Uji Kemampuan dan
Tentang Arab. 3.
Apabila user memilih menu kata, maka user akan diperlihatkan mengenai penjelasan kata dalam bahasa arab dan terdapat tiga jenis kata dalam bahasa
arab, yaitu isim, fiil dan har’f.
39
4. Apabila user memilih menu kosakata, maka user akan diperlihatkan macam-
macam kosakata yang biasa digunakan sehari-hari. cth: angka, hewan, dll. 5.
Apabila user memilih menu percakapan, maka user akan diperlihatkan mengenai percakapan-percakapan dasar yang biasa terjadi di kehidupan
sehari-hari. cth: percakapan saat berkenalan, dll. 6.
Apabila user memilih menu uji kemampuan, maka user akan diperlihatkan dua pilihan, yaitu mulai mengikuti uji kemampuan dan pengecekan score.
7. Apabila user memilih menu tentang arab, maka user akan diperlihatkan
mengenai budaya, lokasi penting, ciri khas, kuliner dan kota-kota di arab.
4.1.3.1.Use Case Diagram
Use case diagram merupakan abstraksi dari interaksi antara sistem dengan aktor, dimana aktor dengan use case saling berhubungan didalam suatu sistem.
Use case merupakan konstruksi untuk menjelaskan kepada user bagaimana sistem bekerja. Berikut ini Use Case Diagram aplikasi pembelajaran bahasa arab :
Gambar 4.2. Use Case Diagram
System
User Menampilkan Kata
Menampilkan Kosakata Pencarian Kosakata
Mengeluarkan Suara Menampilkan Percakapan
Uji Kemampuan Menampilkan Tentang Arab
40
4.1.3.1.1.Skenario Use Case
Skenario Use case merupakan narasi tentang aktivitas dalam suatu use case diagram. Berikut ini skenario use case dalam sistem yang berjalan :
1. Skenario Menampilkan Kata
Tabel 4.1. Skenario Menampilkan Kata Identifikasi
Nomor
1
Nama Menampilkan Kata
Tujuan Memperlihatkan informasi kata dalam bahasa arab
Deskripsi
Proses untuk menampilkan informasi kata yang terbagi menjadi 3 bagian : Isim Isim Alam, Isim Dhamir, Isim Mudzakar dan
Muannats, Isim Ditinjau Dari Segi Jumlah, Isim Isyarah, Isim Maushul, Fiil Fiil Madhi, Fiil Mudhari, Fiil Amr dan Harf.
Aktor User
Skenario Utama Kondisi Awal :
User membuka Halaman Beranda.
Aksi Aktor Reaksi Sistem
1. Memilih Menu Kata
2. Menampilkan 3 jenis kata dalam
bahasa arab 3.
Memilih salah 1 dari 3 jenis kata dalam bahasa arab
4. Menampilkan informasi jenis kata
dalam bahasa arab yang telah dipilih 5.
Melihat informasi jenis kata yang telah dipilih
Kondisi Akhir :
User dapat melihat informasi dan contoh mengenai jenis kata dalam bahasa arab yang telah dipilih.
2. Skenario Menampilkan Kosakata
Tabel 4.2. Skenario Menampilkan Kosakata Identifikasi
Nomor 2
Nama
Menampilka Kosakata
Tujuan Memperlihatkan informasi mengenai kosakata.
Deskripsi Proses untuk menampilkan informasi kosakata yang terbagi
menjadi 9 kategori yaitu angka, hewan, buah, warna, keluarga, anggota tubuh, transportasi, benda dan pekerjaan.
Aktor User
Skenario Utama Kondisi Awal :
User membuka Halaman Beranda.
Aksi Aktor Reaksi Sistem
1. Memilih Menu Kosakata
2. Menampilkan 9 kategori kosakata
41
3. Memilih salah 1 dari 9 kategori
kosakata 4.
Menampilkan informasi kosakata yang telah dipilih
5. Melihat informasi kosakata
yang telah dipilih
Kondisi Akhir : User dapat melihat informasi kosakata dalam bahasa arab,
bahasa Indonesia dan bahasa inggris sesuai dengan kategori kosakata yang telah dipilih.
3. Skenario Pencarian Kosakata
Tabel 4.3.
Skenario Pencarian Kosakata
Identifikasi Nomor
3
Nama
Pencarian Kosakata
Tujuan Mencari dan menampilkan kosakata yang diinginkan
Deskripsi Proses pencarian kosakata untuk menampilkan informasi
kosakata yang telah dicari
Aktor User
Skenario Utama Kondisi Awal :
User membuka Halaman Beranda. Aksi Aktor
Reaksi Sistem
1. Memilih Menu Kosakata
2. Menampilkan 9 kategori kosakata
3. Memilih salah 1 dari 9 kategori
kosakata 4.
Menampilkan informasi kosakata yang telah dipilih
5. Melihat informasi mengenai
kategori percakapan yang telah dipilih
6. Melakukan pencarian kosakata
yang diinginkan 7.
Menampilkan informasi kosakata yang diinginkan user
8. Melihat kosakata yang telah
dicari
Kondisi Akhir : User dapat melihat informasi kosakata sesuai dengan
kategori kosakata yang telah dicari.
4. Skenario Mengeluarkan Suara
Tabel 4.4. Skenario Mengeluarkan Suara Identifikasi
Nomor 4
Nama Mengeluarkan Suara
Tujuan
Mendengarkan suara pada kosakata yang telah dipilih
Deskripsi Proses untuk mengeluarkan suara
Aktor User
Skenario Utama Kondisi Awal :
User membuka Halaman Beranda.
42
Aksi Aktor Reaksi Sistem
1. Memilih Menu Kosakata
2. Menampilkan 9 kategori kosakata
3. Memilih salah 1 dari 9
kategori kosakata 4.
Menampilkan informasi mengenai kategori kosakata yang telah dipilih
5. Melihat informasi mengenai
kategori kosakata yang telah dipilih
6. Memilih kosakata yang akan
didengarkan 7.
Mengeluarkan suara dari kosakata yang telah dipilih oleh user
8. Mendengarkan suara dari
kosakata yang telah dipilih
Kondisi Akhir : User dapat mendengarkan suara dari kosakata yang dipilih.
5. Skenario Menampilkan Percakapan
Tabel 4.5. Skenario Menampilkan Percakapan
Identifikasi Nomor
5
Nama Menampilkan Percakapan
Tujuan Memperlihatkan informasi mengenai percakapan
Deskripsi
Proses untuk menampilkan informasi percakapan
Aktor User
Skenario Utama Kondisi Awal :
User membuka Halaman Beranda.
Aksi Aktor Reaksi Sistem
1. Memilih Menu Percakapan
2. Menampilkan 5 kategori percakapan
3. Memilih salah 1 dari 5
kategori percakapan 4.
Menampilkan informasi percakapan yang telah dipilih
5. Melihat informasi percakapan
yang telah dipilih
Kondisi Akhir : User dapat melihat informasi percakapan dalam 42ahasa
arab dan bahasa Indonesia.
6. Skenario Uji Kemampuan
Tabel 4.6. Skenario Uji Kemampuan
Identifikasi Nomor
6
Nama
Uji Kemampuan
Tujuan User dapat menjawab pertanyaan dalam bahasa arab
Deskripsi Proses yang menggambarkan kejadian penjawaban soal uji
kemampuan oleh user dan menampilkan hasil uji kemampuan yang telah dilakukan oleh user.
Aktor User
43
Skenario Utama Kondisi Awal :
User membuka Halaman Beranda. Aksi Aktor
Reaksi Sistem
1. Memilih menu uji kemampuan
2. Menampilkan menu mulai
3. Memilih menu mulai
4. Apabila user memilih menu mulai,
maka user akan ditampilkan pertanyaan dalam bahasa arab
5. Menjawab setiap soal yang
diberikan dengan memilih salah 1 jawaban yang benar dari 4
jawaban 6.
Menampilkan score dari uji kemampuan yang telah dijalani
disertai dialog box mengenai nama 7.
Melihat score uji kemampuan dan menginputkan nama pada
dialog box 8.
Menyimpan score
Kondisi Akhir : User mengetahui score dari uji kemampuan yang
dijalaninya.
7. Skenario Menampilkan Tentang Arab
Tabel 4.7. Skenario Menampilkan Tentang Arab
Identifikasi Nomor
7
Nama Tentang Arab
Tujuan
Memperlihatkan informasi mengenai arab saudi sebagai motivasi bagi user agar tertarik mempelajari bahasa arab.
Deskripsi
Proses untuk menampilkan informasi tentang arab yang terbagi menjadi 5 kategori yaitu, kuliner, ciri khas arab saudi, lokasi-
lokasi penting di arab saudi, indonesia di arab dan tempat kursus bahasa arab.
Aktor User
Skenario Utama Kondisi Awal :
User membuka Halaman Beranda.
Aksi Aktor Reaksi Sistem
1. Memilih menu tentang arab
2. Menampilkan 5 kategori tentang arab
3. Memilih salah 1 dari 5
kategori tentang arab 4.
Menampilkan informasi mengenai kategori tentang arab yang telah
dipilih 5.
Melihat informasi mengenai kategori tentang arab yang
telah dipilih
Kondisi Akhir : User dapat melihat informasi tentang arab sesuai dengan
kategori tentang arab yang telah dipilih.
44
4.1.3.2.Activity Diagram
Adi Nugroho 2005:61 Activity diagram adalah salah satu cara untuk memperlihatkan aliran kendali dari suatu aktifitas ke aktifitas lainnya dalam suatu
use case. Adapun activity diagram yang sedang berjalan adalah sebagai berikut :
4.1.3.2.1.Activity Diagram Menampilkan Kata
Gambar 4.3. Activity Diagram Menampilkan Kata 4.1.3.2.2.Activity Diagram Menampilkan Kosakata
Gambar 4.4. Activity Diagram Menampilkan Kosakata
User Sistem
Memilih Menu Kata Menampilkan 3 Jenis Kata Dlm Bhs Arab
Memilih Salah 1 Dari 3 Jenis Kata Mengecek Data 3 Jenis Kata Sesuai Pilihan
Menampilkan Informasi 3 Jenis Kata Sesuai Pilihan Melihat Informasi 3 Jenis Kata Sesuai Pilihan
User Sistem
Memilih Menu Kosakata Menampilkan 9 Kategori Kosakata
Memilih Salah Satu Dari 9 Kategori Kosakata Menampilkan Informasi Kosakata Sesuai Pilihan
Melihat Informasi Kosakata Sesuai Pilihan
45
4.1.3.2.3.Activity Diagram Pencarian Kosakata
Gambar 4.5. Activity Diagram Pencarian Kosakata 4.1.3.2.4.Activity Diagram Mengeluarkan Suara
Gambar 4.6. Activity Diagram Mengeluarkan Suara
sistem user
Memilih menu kosakata Menampilkan 9 kategori kosakata
Memilih salah 1 dari 9 kategori kosakata Menampilkan informasi kategori kosakata sesuai pilihan
Melihat informasi kosakata sesuai pilihan Melakukan pencarian kosakata yang diinginkan
Menampilkan kosakata yang diinginkan user Melihat kosakata yang diinginkan
sistem user
Memilih menu kosakata Menampilkan 9 kategori kosakata
Memilih salah 1 dari 9 kategori kosakata Menampilkan informasi kategori kosakata sesuai pilihan
Melihat informasi kosakata sesuai pilihan Memilih kosakata yang akan didengarkan
Mengeluarkan suara dari kosakata yang telah dipilih Mendengarkan suara dari kosakata yang telah dipilih
46
4.1.3.2.5.Activity Diagram Percakapan
Gambar 4.7. Activity Diagram Menampilkan Percakapan
4.1.3.2.6.Activity Diagram Uji Kemampuan
Gambar 4.8. Activity Diagram Menampilkan Uji Kemampuan
User Sistem
Memilih Menu Percakapan Menampilkan 5 Kategori Percakapan
Memilih Salah Satu Dari 5 Kategori Percakapan Menampilkan Informasi Percakapan Sesuai Pilihan
Melihat Informasi Percakapan Sesuai Piihan
User Sistem
Memilih Menu Uji Kemampuan Menampilkan Uji Kemampuan Dalam Bentuk Soal
Mengerjakan Soal Uji Kemampuan Menyelesaikan Soal Uji Kemampuan
Memproses Hasil Jawaban Soal Uji Kemampuan User Menampilkan Hasil Score Dari Soal Uji Kemampuan
Melihat Hasil Score Dari Soal Uji Kemampuan
47
4.1.3.2.7.Activity Diagram Tentang Arab
Gambar 4.9. Activity Diagram Menampilkan Tentang Arab 4.1.3.3.Sequence Diagram
Adi Nugroho 2005:92, sequence diagram adalah interaksi diagram yang memperlihatkan event-event yang berurutan sepanjang berjalannya waktu. Selain
itu sequence diagram merupakan salah satu diagram interaksi yang menjelaskan bagaimana suatu operasi itu dilakukan.
4.1.3.3.1.Sequence Diagram Kata
Gambar 4.10. Sequence Diagram Menampilkan Kata
User Sistem
Memilih Menu Tentang Arab Menampilkan 5 Kategori Tentang Arab
Memilih Salah Satu Dari 5 Kategori Tentang Arab Mengecek Data 5 Kategori Tentang Arab Sesuai Pilihan
Menampilkan Informasi 5 Kategori Tentang Arab Sesuai Pilihan Melihat Informasi 5 Kategori Tentang Arab Sesuai Pilihan
User Sistem
1 : Memilih Menu Kata 2 : Menampilkan 3 Jenis Kata Dlm Bahasa Arab
3 : Memilih Salah 1 Dari 3 Jenis Kata Dlm Bahasa Arab 4 : Mengecek Data 3 Jenis Kata Dalam Bahasa Arab Sesuai Pilihan
5 : Menampilkan Informasi 3 Jenis Kata Sesuai Pilihan 6 : Melihat Informasi 3 Jenis Kata Sesuai Pilihan
48
4.1.3.3.2.Sequence Diagram Kosakata
Gambar 4.11. Sequence Diagram Menampilkan Kosakata 4.1.3.3.3.Sequence Diagram Pencarian Kosakata
Gambar 4.12. Sequence Diagram Pencarian Kosakata
User Sistem
1 : Memilih Menu Kosakata
2 : Menampilkan 9 Kategori Kosakata 3 : Memilih Salah Satu Dari 9 Kategori Kosakata
4 : Menampilkan Informasi Kosakata Sesuai Pilihan 5 : Melihat Informasi Kosakata Sesuai Pilihan
User Sistem
1 : Memilih Menu Kosakata 2 : Menampilkan 9 Kategori Kosakata
3 : Memilih salah 1 dari 9 kategori kosakata 4 : Menampilkan informasi kosakata sesuai pilihan
5 : Melihat informasi kosakata sesuai pilihan 6 : Melakukan pencarian kosakata yang diinginkan
7 : Menampilkan kosakata yang diinginkna user 8 : Melihat kosakata yang telah dicari
49
4.1.3.3.4.Sequence Diagram Mengeluarkan Suara
Gambar 4.13. Sequence Diagram Mengeluarkan Suara 4.1.3.3.5.Sequence Diagram Menampilkan Percakapan
Gambar 4.14. Sequence Diagram Percakapan
User Sistem
1 : Memilih Menu Kosakata 2 : Menampilkan 9 Kategori Kosakata
3 : Memilih salah 1 dari 9 kategori kosakata 4 : Menampilkan informasi kosakata sesuai pilihan
5 : Melihat informasi kosakata sesuai pilihan 6 : Memilih kosakata yang akan didengarkan
7 : Mengeluarkan suara dari kosakata yang telah dipilih user 8 : Mendengarkan suara dari kosakata
User Sistem
1 : Memilih Menu Percakapan 2 : Menampilkan 5 Kategori Percakapan
3 : Memilih Salah Satu Dari 5 Kategori Percakapan 4 : Menampilkan Isi Informasi Percakapan Sesuai Pilihan
5 : Melihat Isi Informasi Percakapan Sesuai Pilihan
50
4.1.3.3.6.Sequence Diagram Uji Kemampuan
Gambar 4.15. Sequence Diagram Uji Kemampuan 4.1.3.3.7.Sequence Diagram Tentang Arab
Gambar 4.16. Sequence Diagram Tentang Arab
User Sistem
1 : Memilih Menu Uji Kemampuan
2 : Menampilkan Uji Kemampuan Dalam Bentuk Soal 3 : Mengerjakan Soal Uji Kemampuan
4 : Menyelesaikan Soal Uji Kemampuan 5 : Memproses Hasil Jawaban Soal Uji Kemampuan Dari User
6 : Menampilkan Hasil Score Dari Soal Uji Kemampuan 7 : Melihat Hasil Score Dari Soal Uji Kemampuan
User Sistem
1 : Memilih Menu Tentang Arab
2 : Menampilkan 5 Kategori Tentang Arab 3 : Memilih Salah 1 Dari 5 Kategori Tentang Arab
4 : Mengecek Data 5 Kategori Tentang Arab Sesuai Pilihan
5 : Menampilkan Informasi 5 Kategori Tentang Arab Sesuai Pilihan 6 : Melihat Informasi 5 Kategori Tentang Arab Sesuai Pilihan
51
4.1.3.4.Class Diagram
Class Diagram menggambarkan struktur dan deskripsi class, package dan object beserta hubungan satu sama. Class diagram juga dapat memberikan
pandangan global atas sebuah sistem. Berikut adalah class diagram aplikasi pembelajaran bahasa arab :
Gambar 4.17. Class Diagram
4.1.3.5.Component Diagram
Komponen merupakan implementasi software dari sebuah class. Komponen bisa berupa source code, komponen biner, file exe, dan lain-lain.
Sebuah komponen berisi informasi tentang logic class atau class yang di implementasikan sehingga membuat pemetaan dari logical view ke component
view. Berikut adalah component diagram aplikasi pembelajaran bahasa arab :
Splash Screen
+onCreate
Aplikasi Pembelajaran Bhs. Arab
+i: Intent +onClickItemListener
+onCreate +onClick
Kata
+onCreate +onClick
Kosakata
+onCreate +onClick
Percakapan
+onCreate +onClick
Uji Kemampuan
+onCreate +onClick
Tentang Arab
+onCreate +onClick
Isi Kata
+onCreate +onClick
Isi Kosakata
+onCreate +onClick
Isi Percakapan
+onCreate +onClick
Isi Uji Kemampuan
+onCreate +onClick
Isi Tentang Arab
+onCreate +onClick
52
Gambar 4.18. Component Diagram 4.1.3.6.Deployment Diagram
Deployment diagram menunjukan tata letak sebuah sistem secara fisik, menampakkan bagian-bagian software yang berjalan pada bagian-bagian
hardware yang digunakan untuk mengimplementasikan sebuah sistem dan keterhubungan Antara komponen-komponen hardware tersebut. Berikut
deployment diagram aplikasi pembelajaran bahasa arab :
Gambar 4.19. Deployment Diagram
AndroidApp.Apk
Sistem Informasi Pembelajaran Bahasa Arab Kata.xml
Kata.Java Kata.Class
Kosakata.xml Kosakata.Java
Kosakata.Class Percakapan.xml
Percakapan.Java Percakapan.Class
Uji Kemampuan.xml Uji Kemampuan.Java
Uji Kemampuan.Class Tentang Arab.xml
Tentang Arab.Java Tentang Arab.Class
MySQL JSON
Web Service API
MySQL Apache
PHP MySQL
Apache PHP
Mobile Application
AndroidApp.apk Aplikasi Pembelajaran Bahasa Arab
AndroidApp.apk Aplikasi Pembelajaran Bahasa Arab
JSON
53
4.2. Perancangan Antar Muka