45 BAB IV ANALISIS PERANCANGAN DAN IMPLEMENTASI 4.1 Analisis Sistem Analisis sistem merupakan penguraian dari suatu sistem yang utuh ke dalam bagianbagian komponennya dengan maksud untuk mengidentifikasi dan mengevaluasi permasalahan. Analisis sistem bertujuan untuk mendapatkan pemahaman secara keseluruhan tentang sistem yang akan dibuat berdasarkan masukan dari pihak-pihak dan juga pengalaman analis yang berkepentingan dengan sistem tersebut. Berdasarkan identifikasi masalah dapat disimpulkan bahwa tujuan pembuatan aplikasi sebagai berikut: 1. Dibangunnya aplikasi panduan shalat dan doa harian berbasis android untuk mempermudah dalam pembelajaran tata cara shalat. 2. Membangun pembelajaran interaktif yang cukup menarik dalam pembelajaran tata cara shalat. 3. Sebagian besar buku menjadi sarana pembelajaran untuk mendapatkan informasi atau ilmu. Dan pada saat ini banyak dari kalangan umum buku-buku tuntunan tentang tata cara shalat yang ada sekarang masih bersifat konvensional dan biasanya penyampaian informasi melalui buku berupa teks dan gambar saja. Untuk itu dibuatlah aplikasi yang dapat melengkapi kekurangan buku dengan memanfaatkan teknologi pada perangkat mobile berbasis android. 4. Banyak aplikasi sejenis yang telah tersedia di internet atau pada google playstore yakni salah satu diantaranya yang penulis amati, aplikasi yang berjudul Panduan Sholat diterbitkan oleh Asyatech Solutionsm. Dimana dalam aplikasi tersebut penulis dapati masih banyak terdapat kekurangan yang menyebabkan pengguna akan mengalami kesulitan untuk memahaminya lebih detail, misalnya; a. Tidak terdapat keterangan mengenai hukum-hukum dalam shalat. b. Tidak menjelaskan nama dari tiap-tiap gerakan dalam shalat. 45
46 c. Tidak banyak yang memfasilitas gambar atau video dari gerakan-gerakan shalat, sehingga masyarakat pengguna kesulitan untuk memahami gerakan shalat secara detail. d. Tidak terdapat bacaan shalat yang ditulis dalam bahasa indonesia atau terjemahannya, hal ini menyebabkan masyarakat pengguna yang belum bisa membaca Al-Qur an mengalami kesulitan dalam membaca dan memahaminya. Berikut gambar detail salah satu aplikasi panduan shalat pada google playstore. Gambar 4.1. Aplikasi Panduan Shalat 4.1.1 Analisis Masalah Analisis masalah yang didapatkan dari hasil penelitian adalah mengenai proses pembelajaran shalat dan kumpulan doa sehari-hari yang terkadang mengalami kesulitan untuk meluangkan waktu mempelajarinya, sehingga faktor kesibukan menjadi salah satu kendala kesulitan untuk meluangkan waktu melakukan pembelajaran, maka dari itu dengan perkembangan teknologi yang semakin maju, hal tersebut dapat dijadikan media solusi yang dapat menjawab semua kesulitan tersebut. Dimana dengan dibangunnya Aplikasi Panduan Shalat dan Do a Harian Berbasis Android dapat menjadi salah satu media alternatif praktis yang dapat digunakan oleh siapapun, dimanapun dan kapanpun.
47 4.1.2 Analisis Kebutuhan Analisis kebutuhan meliputi analisis dan kebutuhan perangkat lunak, analisis dan kebutuhan perangkat keras, serta analisis dan kebutuhan User. 4.1.2.1 Analisis dan Kebutuhan Perangkat Lunak Untuk Perangkat lunak (software) dalam sebuah sistem merupakan perintah-perintah yang diberikan kepada perangkat keras (hardware) agar bisa saling berinteraksi diantara keduanya. Perangkat lunak yang digunakan untuk membangun aplikasi panduan shalat dan do a harian berbasis android ini adalah sebagai berikut: 1. Sistem Operasi Windows 10, 2. Android Studio, 3. Adobe Photoshop, 4. Audacity dan 5. Sublime Text 4.1.2.2 Analisis dan Kebutuhan Perangkat Keras Untuk Komputer atau ponsel terdiri dari perangkat keras (hardware) dan perangkat lunak (software) yang saling berinteraksi. Perangkat lunak memberikan instruksi-instruksi kepada perangkat keras untuk melakukan suatu tugas tertentu, sehingga dapat menjalankan suatu sistem di dalamnya. Spesifikasi perangkat keras yang digunakan pada aplikasi panduan shalat dan do a harian berbasis android ini yaitu seperti tabel 4.1. berikut: Tabel 4.1. Spesifikasi Perangkat Keras (Hardware) Spesifikasi Keterangan Sistem: Operasi Sistem Bahasa Sistem Manufaktur Sistem Model Windows 10 Home 32-bit Inggris Acer Aspire 4352
48 Prosesor Memori RAM Versi DirectX Intel(R) Caleron(R) CPU B815 1.60GHz 6144MB (6GB) DirectX 12 Tampilan: Grafik Manufaktur Monitor VGA Intel(R) HD Graphics Intel Corporation 14 Resolusi 1366 x 768 pixel 1760MB Sound: Perangkat Lainnya: Speaker Speakers (2-High Definition Audio Device) Mouse Keyboard Kabel data USB 4.1.2.3 Analisis dan Kebutuhan User User sangat dibutuhkan dalam penggunaan aplikasi panduan shalat dan do a harian berbasis android selain perangkat lunak dan perangkat keras. Adapun spesifikasi User yang dibutuhkan: 1. Mampu mengoperasikan perangkat yang berbasis android. 2. Mampu mengoperasikan aplikasi. 3. Memiliki perangkat yang berbasis android.
49 4.2 Metode Pengembangan Aplikasi 4.2.1 Konsep (Concept) Aplikasi Panduan Shalat dan Doa Harian ini berbentuk file berekstensi *.apk yang bisa dijalankan pada ponsel berbasis android. Aplikasi ini di khususkan untuk masyarakat Islam dalam mempelajari tata cara shalat sesuai buku Panduan Shalat Terlengkap (Teguh Sutanto & Ulin Nuha M, 2015) yang menjadi sumber langsung dalam penulisan tugas akhir ini. Deskripsi konsep aplikasi ini adalah sebagai berikut: Judul User Fungsi Jenis Aplikasi Gambar Audio Video Teks Interaktif : Aplikasi Panduan Shalat Dan Doa Harian Berbasis Android : Umum, khususnya masyarakat Islam : Sebagai alat bantu interaktif yang memiliki kemampuan menampilkan teks, gambar, audio dan video gerakan shalat, hukum-hukum shalat serta bacaannya. : Mobile Aplication. : Menggunakan file berformat JPG dan PNG yang bersumber dari internet dan dari buat sendiri oleh penulis menggunakan Adobe Photoshop CS6 : Menggunakan file berformat MP3 dan bersumber dari internet yang penulis edit kembali oleh penulis dengan software Audacity. : Bersumber langsung dari internet. : Bersumber dari internet dan dari Teguh Sutanto dan Ulin Nuha M sesuai dalam bukunya yang berjudul Panduan Shalat Terlengkap Penerbit Pustaka Baru Press: Yogyakarta, 2015. : Memungkinkan pengguna berpindah atau menuju halaman berikutnya yang diinginkan. 4.2.2 Perancangan (Design) Tahap ini merupakan perancangan aplikasi yang berupa perancangan storyboard, perancangan flowchart, struktur navigasi, diagram transisi atau STD (State Transition Diagram), dan perancangan antar muka (user interfaace).
50 4.2.2.1 Perancangan Storyboard Perancangan stroryboard aplikasi ini adalah sebagai berikut: Storyboard Modul : 1 Halaman : Intro Nama File : Panduan Shalat Gambar : headerimage, button, icon Audio : - Navigasi SKIP NEXT : Menuju Halaman Home/ Menu Utama : Menuju Halaman Home/ Menu Utama Gambar 4.2. Storyboard Intro Storyboard Modul : 2 Halaman : Menu Utama Nama File : Panduan Shalat Navigasi Panduan Shalat : Menuju Menu Panduan Shalat Panduan Thaharah : Menuju Menu Panduan Thaharah Doa Harian Kompas Keluar : Menuju Menu Doa harian : Menuju Halaman Kompas : Menutup Aplikasi Gambar 4.3. Storyboard Menu Utama
51 Storyboard Modul : 3 Halaman Gambar : Menu Pilihan Panduan Shalat : background, button, icon Navigasi Hal Penting Shalat Panduan Shalat Fardu Panduan Shalat Sunnah Juz Amma Doa Sesudah Shalat Asmaul Husna : Halaman Hal Penting Dalam Shalat : Menuju Panduan Shalat Fardu : Menuju Panduan Shalat Sunnah : Menuju Menu Juz Amma : Menuju Halaman Doa Sesudah Shalat : Menuju Halaman Asmaul Husna Gambar 4.4. Storyboard Menu Pilihan Panduan Shalat Storyboard Modul : 4 Halaman : Panduan Shalat Fardu Nama File : Panduan Shalat Gambar : background, button, icon Audio : - Navigasi Klik Video : Menjalankan Video Panduan Shalat Fardu Gambar 4.5. Storyboard Panduan Shalat Fardu
52 Storyboard Modul : 5 Halaman : Menu Panduan Thaharah Nama File : Panduan Shalat Gambar : background, button, icon Audio : - Navigasi Info Thaharah Tata Cara Wudhu : Menuju Halaman Info Thaharah : Menuju Halaman Tata Cara Wudhu Tata Cara Tayamum : Menuju Halaman Tata Cara Tayamum Tata Cara Mandi Wajib : Menuju Halaman Tata Cara Mandi Wajib Gambar 4.6. Storyboard Menu Panduan Thaharah Storyboard Modul : 6 Halaman : Tata Cara Berwudhu Nama File : Panduan Shalat Gambar : background, button, icon Audio : - Navigasi Klik Video : Menjalankan Video Panduan Shalat Fardu Gambar 4.7. Storyboard Tata Cara Berwudhu
53 Storyboard Modul : 7 Halaman : Menu Shalawat Nabi Nama File : Panduan Shalat Gambar : background, button, icon Audio : - Navigasi Shalawat Nabi : Menuju Halaman Shalawat Nabi Gambar 4.8. Storyboard Menu Shalawat Nabi Storyboard Modul : 8 Halaman : Materi Shalawat Nabi Nama File : Panduan Shalat Gambar : background, button, icon Audio : - Navigasi Klik Button Audio : Mendengarkan Suara Shalawat Nabi Gambar 4.9. Storyboard Materi Shalawat Nabi
54 Storyboard Modul : 9 Halaman : Menu Doa Harian Nama File : Panduan Shalat Gambar : background, button, icon Audio : - Navigasi Doa Harian : Menuju Halaman Materi Doa Harian Gambar 4.10. Storyboard Menu Doa Harian Storyboard Modul : 10 Halaman : Materi Doa Harian Nama File : Panduan Shalat Gambar : background, button, icon Audio : - Navigasi Klik Button Audio : Mendengarkan Suara Doa Harian Gambar 4.11. Storyboard Materi Doa Harian
55 Storyboard Modul : 11 Halaman : Menu Panduan Thaharah Nama File : Panduan Shalat Gambar : background, button, icon Audio : - Navigasi FeedBack Share Credit : Menuju Halaman FeedBack : Menuju Halaman Share : Menuju Halaman Credit My Sosmed : Menuju Halaman Sosmed Gambar 4.12. Storyboard About Me Storyboard Modul : 12 Halaman : Kompas Nama File : Panduan Shalat Gambar : background, button, icon Audio : - Navigasi - Ket : Halaman kompas ini untuk mengetahui arah/kiblat Gambar 4.13. Storyboard Kompas
56 Storyboard Modul : 13 Halaman : Keluar Aplikasi Nama File : Panduan Shalat Gambar : background, button, icon Audio : - Navigasi Ya Tidak : Keluar Aplikasi : Tetap Menjalankan Aplikasi Gambar 4.14. Storyboard Keluar
57 4.2.2.2 Perancangan Bagan Alir (Flowchart) Perancangan flowchart aplikasi ini adalah sebagai berikut: Gambar 4.15. Flowchart Menu Utama
58 Flowchart menu utama diatas menjelaskan bahwa dalam Menu Utama berisi 7 proses menuju menu selanjutnya, jika user memilih ya maka akan terhubung ke menu yang diinginkan dan jika tidak maka user bisa memilih menu lainnya atau keluar aplikasi. Gambar 4.16. Flowchart Panduan Shalat
59 Gambar 4.17. Flowchart Panduan Shalat Fardu
60 Gambar 4.18. Flowchart Panduan Shalat Sunnah
61 Gambar 4.19. Flowchart Juz Amma Gambar 4.20. Flowchart Panduan Thaharah
62 Gambar 4.21. Flowchart Shalawat Nabi
63 Gambar 4.22. Flowchart Doa Harian Gambar 4.23. Flowchart About Me
64 4.2.2.3 Perancangan Struktur Navigasi Perancangan struktur navigasi aplikasi ini adalah sebagai berikut: Gambar 4.24. Struktur Navigasi Dari struktur navigasi diatas menjelaskan bahwa tampilan awal dari aplikasi ini adalah halaman intro atau pembuka, dalam halaman intro terdapat tombol untuk menuju menu utama. Pada halaman menu utama terdapat beberapa pilihan menu yaitu: Home, Panduan Shalat, Panduan Thaharah, Shalawat Nabi, Doa Harian, Kompas, About Me dan menu Keluar.
65 4.2.2.4 Perancangan Diagram Transisi atau STD (State Transition Diagram) Perancangan STD aplikasi ini adalah sebagai berikut: Gambar 4.25. STD Menu Utama Pada rancangan STD bahwa dalam halaman menu utama terdapat 15 proses dimana proses tersebut dapat dipilih oleh pengguna sesuai keinginan.
66 Gambar 4.26. STD Panduan Shalat Gambar 4.27. STD Panduan Thaharah
67 Gambar 4.28. STD Shalawat Nabi Gambar 4.29. STD Doa Harian
68 Gambar 4.30. STD About Me 4.2.2.5 Perancangan Antarmuka (User Interface) Perancangan antarmuka aplikasi ini adalah sebagai berikut: 1. Tampilan Intro Tampilan intro yaitu dimana tampilan pembuka yang berisi button click Skip dan Next untuk menuju halaman utama. Gambar 4.31. Tampilan Intro
69 2. Tampilan Menu Utama Menu utama merupakan tampilan pusat utama dari aplikasi ini. Pada bagian tampilan ini memuat beberapa elemen penting, yaitu diantaranya: a. Home, yang berisi bantuan aplikasi untuk mengarahkan pengguna dalam pemakain aplikasi. b. Panduan Shalat, yang berisi materi panduan shalat. c. Panduan Thaharah, yang berisi materi panduan thaharah. d. Shalawat Nabi, yang berisi materi shalawat nabi. e. Doa Harian, yang berisi materi doa harian. f. Kompas, petujuk arah atau kiblat. g. About Me, berisi profil penulis. h. Keluar, keluar aplikasi. Gambar 4.32. Tampilan Menu Utama
70 3. Tampilan Halaman Panduan Shalat Pada halaman panduan shalat terdapat beberapa materi yaitu, hal penting dalam shalat, panduan shalat fardu, panduan shalat sunnah, juz amma, doa setelah shalat, asmaul husna dan panduan adzan. Gambar 4.33. Tampilan Halaman Panduan Shalat 4. Tampilan Halaman Panduan Thaharah Pada halaman panduan thaharah terdapat beberapa materi yaitu, info thaharah, cara wudhu, cara tayamum dan cara mandi wajib. Gambar 4.34. Tampilan Halaman Panduan Thaharah
71 5. Tampilan Halaman About Me Pada halaman about me berisi profile penulis dan feed back, share aplikasi, dan credit. Gambar 4.35. Tampilan Halaman About Me 6. Tampilan Pilihan Keluar Aplikasi Pada tampilan ini maka pengguna bisa memilih ya jika ingin keluar dari aplikasi. Gambar 4.36. Tampilan Pilihan Keluar Aplikasi
72 4.2.3 Pengumpulan Bahan (Material Collecting) Pengumpulan bahan-bahan untuk kebutuhan aplikasi ini seperti file-file teks, gambar, video dan suara.yang diperoleh dari berbagai sumber, namun sebagian besar dibuat oleh penulis. 4.2.3.1 Teks Isi materi Aplikasi Panduan Shalat dan Doa Harian berupa teks penulis mengambil dari buku karangan Teguh Sutanto dan Ulin Nuha M, yang berjudul Panduan Shalat Terlengkap Penerbit Pustaka Baru Press: Yogyakarta, 2015. 4.2.3.2 Gambar Tampilan gambar seperti background dasar dari aplikasi ini penulis buat sendiri menggunakan software Adobe Photoshop CS6 dan beberapa gambar mengambil dari internet berbagai sumber dan sebagian dari koleksi pribadi yang penulis buat sendiri. 4.2.3.3 Video Tampilan informasi video dari aplikasi ini yang berformat MP4, penulis mengambil dari berbagai sumber di internet seperti www.youtube.com dan juga dari koleksi pribadi penulis yang diedit kembali untuk kebutuhan pembuatan Aplikasi Panduan Shalat dan Doa Harian Berbasis Android. 4.2.3.4 Suara Audio atau suara pada aplikasi ini diperoleh dari berbagai sumber dan koleksi pribadi yang penulis edit kembali menggunakan software Audacity untuk penyesuaian kebutuhan pembuatan aplikasi ini. 4.2.4 Pembuatan (Assembly) Pada tahap ini dimana tahap sebelumnya atau tahap pengumpulan bahan sudah terpenuhi maka tahap ini akan di implementasikan menggunakan software Android Studio, Adobe Photoshop, Audacity dan SublimeText. Dengan Android Studio penulis melakukan pengkodingan menggunakan bahasa pemrograman java yang akan menghasilkan aplikasi berekstensi *.apk (Aplikasi Panduan Shalat dan Doa Harian.apk), sehingga aplikasi ini dapat
73 dijalankan pada ponsel berbasis Android dengan minimum versi android Gingerbread (API 10: Android 2.2.3). Seperti pada gambar berikut: Gambar 4.37. Tampilan Android Studio Selanjutnya dengan menggunakan Adobe Photoshop penulis membuat gambar (background), logo dan icon yang dibutuhkan dalam pembuatan aplikasi, seperti gabar berikut: Gambar 4.38. Tampilan Adobe Photoshop
74 4.2.5 Pengujian (Testing) Untuk mengetahui apakah aplikasi dapat berjalan sesuai dengan tujuan yang diharapkan maka perlu dilakukan pengujian, langkah pengujian dapat dilihat pada tabel 4.2 berikut ini: Tabel 4.2. Black Box Testing No Tombol/Menu Funsional Hasil 1 Halaman Intro Menampilkan halaman pembuka 2 Menu Utama Menampilkan navigasi Menu yang terletak disisi kiri atas. Pada navigasi drawer terdapat 8 list menu 3 Menu Panduan Shalat Menampilkan list pilihan panduan shalat 4 Menu Panduan Thaharah Menampilkan list pilihan panduan thaharah 5 Menu Shalawat Nabi Menampilkan list pilihan shalawat nabi 6 Menu Doa harian Menampilkan list pilihan doa harian 7 Menu Abot me Menampilkan halaman profil penulis 8 Menu Kompas Menampilkan halaman petunjuk arah/kompas Berfungsi dengan baik Berfungsi dengan baik Berfungsi dengan baik Berfungsi dengan baik Berfungsi dengan baik Berfungsi dengan baik Berfungsi dengan baik Berfungsi dengan baik
75 9 Menu Keluar Menampilkan pilihan keluar aplikasi Berfungsi dengan baik Pengujian aplikasi ini penulis juga melakukan secara langsung dengan dua cara, yaitu dengan emulator yang sudah tersedia di software Android Studio dan yang kedua dengan cara pengujian langsung pada ponsel android (real device). 4.2.5.1 Pengujian Ponsel (real device) Penulis melakukan pengujian aplikasi ini langsung pada ponsel android (real device). Pengujian ini dilakukan untuk mengetahui apakah aplikasi sudah berjalan baik dan sesuai yang di harapkan atau belum. Pengujian ini menurut penulis lebih efektif karena mengurangi pemakaian RAM komputer yang leih besar, yang berdampak pada kecepatan proses pengujian. Untuk pengujian penulis menggunakan ponsel Xiaomi Redmi Note 3 yang berbasis android, gambarnya bisa dilihat pada gambar 4.39 berikut: Gambar 4.39. Tampilan Pengujian Dengan Ponsel
76 4.2.5.2 Pengujian Emulator Selanjutnya penulis melakukan pengujian aplikasi pada AVD (Android Virtual Device) atau emulator android. Pengujian ini dilakukan untuk mengetahui apakah aplikasi sudah berjalan baik dan sesuai yang di harapkan atau belum. Gambar 4.40. Tampilan Pengujian Dengan Emuator (AVD) 4.2.6 Distribusi (Distribution) Setelah tahap pengujian sudah dilakaukan dan aplikasi sudah berjalan sesuai harapan, penulis selanjutnya mendistribusikan aplikasi Panduan Shalat dan Doa Harian secara langsung antar perangkat ponsel ke ponsel lainnya yang berbasis android. 4.2.6.1 Spesifikasi Perangkat Keras (Ponsel) Agar aplikasi Panduan Shalat dan Doa Harian ini berjalan dengan baik, maka user disarankan menggunakan perangkat keras (ponsel) dengan spesifikasi seperti pada tabel 4.3 berikut: Tabel 4.3. Spesifikasi Perangkat Keras (Ponsel) Spesifikasi Keterangan Layar Size min: 4.0
77 Resolution min: 480x800 Density min: hdpi OS Android Version Android Min: Gingerbread Recommended: Lollipop+ Memory Kosong Memory RAM 17MB 512MB 4.2.6.2 Cara Menggunakan Aplikasi Yang pertama user harus sudah menginstal aplikasi Panduan Shalat dan Doa Harian pada ponsel. Selanjutnya user menjalankan aplikasi, maka pada aplikasi akan tampil halaman intro dengan tombol perintah ke halaman menu utama. Pada menu utama user bebas memilih aksi selanjutnya yang akan dipilih, sehingga materi-materi yang tersedia pada aplikasi bisa ditampilkan. 4.2.6.3 Tampilan Aplikasi Pada Ponsel Hasil akhir aplikasi Panduan Shalat dan Doa Harian bisa dilihat pada beberapa tampilan berikut: Gambar 4.41. Tampilan Halaman Pembuka/Intro
78 Gambar 4.42. Tampilan Halaman Home dan Menu Utama Gambar 4.43. Tampilan Menu Panduan Shalat dan Menu Thaharah
79 Gambar 4.44. Tampilan Menu Shalawat Nabi dan Menu Doa Harian Gambar 4.45. Tampilan Halaman About Me dan Kompas