Bab 3
PERANCANGAN SISTEM
3.1. Perancangan Aplikasi
Sistem aplikasi pengingat shalat, pencari arah kiblat dan posisi masjid ini diberi nama Tasbih, sehingga untuk selanjutnya penyebutan sistem aplikasi pengingat shalat dan
arah kiblat ini adalah Tasbih.Aplikasi Tasbih memiliki beberapa buah form yang dirancang untuk mempermudah penggunaannya. Form-form tersebut dirancang
sesederhana mungkin yang bertujuan untuk mengurangi ketidak-jelasan informasi yang akan diberikan aplikasi ini.
3.1.1. Form Jendela Utama
Form jendela utama merupakan form utama yang terdapat dalam aplikasi Tasbih. Form ini merupakan form yang akan pertama kali muncul saat program di jalankan.
Form ini memiliki 5 buah Menu yang akan muncul saat tombol Menu pada handphone android di tekan Menu-Menu tersebut berfungsi seperti shortcut untuk mengarahkan
user ke form-form lain, yang ada pada aplikasi Tasbih.
Universitas Sumatera Utara
Gambar 3.1 Desain Layar Tampilan Menu Utama
Keterangan Gambar: 1.
Teks dan Gambar Berisi teks Pencari Kiblat dan gambar Ka’bah.
2. Teks dan Gambar
Berisi teks Jadwal Shalat dan gambar Jam. 3.
Teks dan Gambar Berisi teks Cari Masjid dan gambar Masjid.
4. Teks dan Gambar
Berisi teks Tentang Program dan gambar tanda tanya 5.
Teks dan Gambar Berisi teks Keluar dan gambar Pintu Keluar
Universitas Sumatera Utara
3.1.2. Form Pencari Kiblat
Form ini berisi informasi tentang posisi kiblat yang dalam prakteknya form ini akan Menunjukkan arah kiblat dari posisi user berada.
Gambar 3.2 Desain Layar Tampilan Pencari Posisi Kiblat
Keterangan: 1. Kompas Kiblat
Merupakan tampilan dua dimensi yang akan Menujukkan arah kiblat.
Universitas Sumatera Utara
3.1.3. Form Jadwal Shalat
Form ini berisi informasi tentang jadwal shalat pada daerah user berada. Form ini berisikan waktu shalat wajid mulai dari waktu shalat subuh sampai isya. Dalam form
ini terdapat sebuah Menu pengaturan pengingat jadwal shalat yang akan mendirect user ke form atur pengingat waktu shalat jika Menu di tekan.
Gambar 3.3 Desain Layar Tampilan Jadwal Shalat
Keterangan Gambar: 1.
Latar Belakang Latar belakang ini akan dibuat berisikan gambar berbentuk masjid.
2. Teks
Merupakan jadwal shalat yang akan ditampilkan berupa teks secara berurut dari subuh hingga isya, dimana disebelah kanannya berisikan teks informasi
jam shalat.
Universitas Sumatera Utara
3.1.3.1. Form Atur Pengingat Waktu Shalat
Form ini berisi dua text view jam dan menit waktu shalat terdekat dan dua tombol start dan stop untuk menghidupkan dan menghentikan modul notifikasi alarm.
Gambar 3.4 Desain Layar Tampilan Atur Pengingat Waktu Shalat
Keterangan: 1.
Judul Merupakan judul dari form yaitu Atur Pengingat Waktu Shalat
2. Teks
Berisikan Jam dan Menit waktu shalat Terdekat. 3.
Button Button TriggerPemicu yang akan mengatur alarm pengingat waktu shalat
sesuai dengan yang diisikan oleh user. 4.
Button
Universitas Sumatera Utara
Button TriggerPemicu yang akan menghentikan alarm pengingat yang telah di setting sebelumnya.
5. Latar Belakang
Latar belakang ini akan dibuat berisikan gambar berbentuk masjid
3.1.2. Form Pencari Posisi Mesjid
Form ini berisi tampilan Google Map yang di dalamnya berada marker-marker yang menandai posisi kita dan posisi masjid-masjid yang berada di sekitar user.
Gambar 3.5 Desain Layar Tampilan Pencari Posisi Masjid Terdekat
Keterangan: 1.
Map Merupakan map dari google yang berisi marker posisi kita saat ini dan posisi
masjid-masjid di sekitar kita
Universitas Sumatera Utara
3.1.3. Form Tentang Program
Tampilan antar muka tentang program dibuat dengan tampilan layaknya tampilan web. Sehingga dalam implementasi nantinya menggunakan kode program HTML. Hal
ini dilakukan untuk memudahkan pengguna dalam menghubungi pengembang. Adapun desain perancangan antarmuka tentang program adalah sebagai berikut:
Gambar 3.6 Desain Layar Tampilan Tentang Program
Keterangan Gambar: 1.
Teks Berisi teks penjelasan mengenai aplikasi tasbih.
2. Gambar
Berisi gambar Tasbih 3.
Teks
Universitas Sumatera Utara
Berisi informasi mengenai fitur-fitur yang tersedia pada aplikasi. 4.
Teks Berisi teks ucapan terima kasih terhadap pihak-pihak yang ikut terlibat dalam
pengembangan aplikasi. 5.
Teks Berisi teks informasi umum mengenai pengembang, alamat sistus dan
dukungan email langsung kepada pengembang.
3.2. Diagram Alir Flowchart
Diagram Alir atau Flowchart merupakan serangkaian bagan-bagan yangmenggambarkan alur program. Pada diagram alir ini digambarkan urutan
prosedurdalam program Tasbih.
Gambar 3.7 Diagram Alir Sistem
Universitas Sumatera Utara
Kategori