Tujuan Perancangan Sistem Gambaran Umum Sistem Yang Diusulkan

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