Diana, Febrianti Jurnal Informatika, Vol. 17, No.

1, Juni 2017

IMPLEMENTASI MODEL VIEW CONTROLLER (MVC) PADA APLIKASI DOA

HARIAN UNTUK ANAK MUSLIM BERBASIS ANDROID
Diana1, Febrianti2
1,2
Program Studi Teknik Informatika, Fakultas Teknik
Universitas Muhammadiyah Bengkulu
Jl. Bali PO BOX 118 Telp. (0736) 227665, Fax (0736)26161, Bengkulu 38119
1
anaiboel@gmail.com, 2 febrianti@gmail.com

Abstract
Prayer is a means to communicate between slave by Allah in certain circumstances. In
addition, as a spirit of prayer worship or religious sari as ever accepted in those sayings by
Rasulullah SAW. Today many children are not aware of any various kinds of daily prayer
because of their lack of understandingabout the prayer in daily life and also the teaching of
teachersand from the child's parents. Model-View-Controller (MVC) is a concept used to
encapsulate the data along with processing (model)isolate it from manipulating (controller)
and display (view) torepresented on a user interface. The purpose of this study iscreate
design applications daily prayers for Muslim children based on Androidthat uses the MVC
method. The methodology used in the studyThis is a model RAD (Rapid Application
Development). From the analysis,design, testing and implementation of programs that have
been carried out against Children Daily Prayer app can be inferred application runswith
both fit for purpose and planning penelitian.Model View Controller can be implemented in
application development andcertainly more structured program or application.

Keyword: MVC, daily prayer, muslim kids, android

Abstrak

Doa merupakan salah satu sarana untuk berkomunikasi antara hamba dengan Allah SWT
dalam keadaan tertentu. Di samping itu, doa sebagai roh ibadah atau sari ibadah sebagaimana
yang pernah disabdakan olehRasulullah SAW. Saat ini banyak anak-anak yang tidak
mengetahui adanya berbagai macam doa harian dikarenakan kurangnya pemahaman mereka
tentang adanya doa di kehidupan sehari-hari dan juga pengajaran dari guru maupun dari
orang tua si anak. Tujuan penelitian ini adalah membuat desain aplikasi do’a harian untuk
anak muslim berbasis android yang menggunakan metode MVC. Model-View-Controller
(MVC) adalah konsep yang digunakan untuk meng-enkapsulasi data bersama dengan
pemrosesan (model),mengisolasi dari proses manipulasi (controller) dan tampilan (view)
untuk direpresentasikan pada sebuah user interface. Dari hasil analisa,perancangan,
pengujian dan implementasi program yang telah dilakukan terhadap aplikasi Doa Harian
Anak ini disimpulkan Model View Controller dapat diterapkan dalam pengembangan aplikasi
dan tentunya program atau aplikasi lebih terstruktur.

Kata kunci: MVC, doa harian, anak muslim, android

Informatics and Business Institute Darmajaya 11

Diana, Febrianti Jurnal Informatika, Vol. 17, No.1, Juni 2017

I. PENDAHULUAN kurangnya informasi tentang doa baik dari

Pada era modern saat ini, teknologi guru maupun dari orang tua anak.
informasi mengalamikemajuan yang Aplikasi doa harian anak muslim berbasis
begitu pesat, terutama di dunia mobile android menggunakan Model-View-
teknologi. Saat ini banyak produsen handal Controller (MVC). MVC adalah sebuah
yang terus mengembangkan konsep yangdiperkenalkan oleh penemu
fungsihandphone. Mereka menciptakan Smalltalk (Trygve Reenskaug) untuk
telepon pintar yang lebih dikenal dengan mengenkapsulasi data bersama dengan
sebutan smartphone. Teknologi pemrosesan (model), mengisolasi
smartphone ini tentunya didukung dariproses manipulasi (controller) dan
olehoperasi sistem yang juga terus tampilan (view) untuk
dikembangkan supaya fitur-fitur direpresentasikanpada tampilan
smartphone terus bertambah. Sistem muka[2].Rancang bangun sistem
operasi yang sangat berkembangsaat ini aplikasido’a harian anak muslim
adalah android. Sistem operasi android berarsitektur (MVC) inimenerapkan
memiliki banyak fiturdiantaranya metodologi SDLC (System Development
penggunaan sistem database yang sangat Life Cycle) denganmenggunakan
baik. pendekatan berorientasi
Segala aktifitas yang kian padat objek.Pengembangan yangdilakukan yaitu
menjadikan sebagian orang iterative dan incremental. Hasil penelitian
memilikitingkat mobilitas yang tinggi. ini diharapkan dapat memberikan alternatif
Seiring dengan berkembangnyateknologi, bagi para guru, orang tua dan anak-anak
manusia cenderung lupa akan kewajiban dalam belajar doa dan memudahkananak-
dalam beragama.Salah satunya membaca anak membaca doa-doa harian tanpa harus
doa.Doa merupakan permohonan langsung bingung mencari ataumembeli buku
kepada Allah SWT agardiberikan dengan mengeluarkan biaya dan waktu.
kebaikan, keberkahan, kemudahan,
kesehatan dan jalankeluar dari kesulitan II. LANDASAN TEORI
dan lain-lain [1]. 1. Doa
Disekitar kita banyak sekali doa Doa dalam bahasa Indonesia
harianyang bisa anak-anak amalkan di merupakan kata serapan dari bahasa
dalamkehidupan sehari-hari. Saat ini Arab, yaitu ‫ اﻟ ﺪﻋﺎء‬. Doa berasal dari
banyak anak-anak yang tidak mengetahui kata bahasa Arab ( ‫ – دﻋﺎء ﯾ ﺪﻋﻮ دﻋﺎ‬- )
berbagai macam doa harian dikarenakan yang berarti memohon atau meminta

Informatics and Business Institute Darmajaya 12

Diana, Febrianti Jurnal Informatika, Vol. 17, No.1, Juni 2017

(M. Khalilurrahman al-mahfani, a. Model, digunakan untuk mengelola

2006:27). Ia merupakan derivasi dari informasi dan memberitahu
kata ‫ دﻋﺎ‬yang merupakan fi’il madhi pengamat ketika ada perubahan
yang sekaligus menjadi akar katanya. informasi. Model mengandung data
Sementara kata ‫اﻟ ﺪﻋﺎء‬ itu sendiri dan fungsi yang berhubungan
merupakan bentuk mashdar. dengan pemrosesan data.
b. View, bertanggung jawab untuk
Sedang menurut istilah doa merupakan
pemetaan grafis kesebuah
suatu media komunikasi antara seorang
perangkat.
hamba dengan Sang Khaliq dalam
c. Controller, menerima input dari
rangka memohon dan meminta hajat
pengguna dan mendistribusikan
hidup di dunia dan di akhirat, mengeluh
model dan view untuk melakukan
dan mengadu atas permasalahan yang
aksi berdasarkan masukan tersebut.
dihadapi, atau memohon perlindungan
Sehingga controller bertanggung
dari segala macam marabahaya [2].
jawab untuk pemetaan aksi
2. Model-View-Controller (MVC)
pengguna akhir terhadap respon
Model-View-Controller (MVC) adalah
aplikasi.
sebuah konsep yang diperkenalkan oleh
penemu Smalltalk (Trygve Reenskaug)
untuk meng-enkapsulasi data bersama
dengan pemrosesan (model),
mengisolasi dari proses manipulasi
(controller) dan tampilan (view) untuk
direpresentasikan pada tampilanmuka Gambar 1. Bagian MVC
[3].
MVC mengikuti pendekatan yang Model, View, dan Controller ketiganya
paling umum dari layering. Layering berkaitan erat, oleh karena itu ketiganya
hanyalah sebuah logika yang membagi harus merujuk satu sama lain.
kode kedalam fungsi di kelas yang Arsitektur MVC memiliki manfaat
berbeda. Keuntungan utama dalam yaitu pemisahan antara model dan view
pendekatan ini adalah penggunaan memungkinkan beberapa view
ulang (reusability) kode. Definisi dari menggunakan model yang sama.
arsitektur MVC dibagi menjadi tiga Akibatnya komponen model sebuah
lapisan [4]: aplikasi lebih mudah untuk diterapkan,

Informatics and Business Institute Darmajaya 13

Diana, Febrianti Jurnal Informatika, Vol. 17, No.1, Juni 2017

diuji dan dipelihara, karena semua kebutuhan(requirement), validasi,

akses ke model berjalan melalui pelatihan, kepemilikan (user
komponen ini [5]. ownership) sebuahsistem informasi
Konsep Model View Controller (MVC) yang diperoleh melalui investigasi,
bertujuan agar sebuah aplikasi dapat analisis, desain,implementasi, dan
mudah dipelihara olehorang-orang di perawatan software. Metode SDLC
dalam tim pengembangan yang berbeda yang meliputi beberapa fase yaitu Fase
spesifikasi pekerjaan,misalnya database analisis, pada fase iniadalah
administrator (DBA) untuk mengurusi memecahkan masalah yang terjadi
masalah basis data,blok controller dalam pembuatan aplikasi.
untuk programmer, dan blok view untuk Faseperancangan, pada fase ini adalah
desainer antarmuka(interface designer) dengan melakukan perancangan
[6]. strukturtampilan menu dan tampilan isi
3. Software Development Life Cycle doa dan audio pada aplikasi.
(SDLC) Faseimplementasi, pada fase ini adalah
System Development Life pembuatan aplikasi berbasis
Cycle(SDLC)merupakan siklus androidtersebut dengan menerapkan
pengembangan sistem teknik hasil perencanaan. Fase uji coba, pada
(engineering system development). fase iniadalah dengan melakukan uji
SDLC berfungsi untuk menggambarkan coba pada aplikasi dan uji coba
tahapan-tahapan utama dan langkah- kepadapengguna [7].
langkah dari setiap tahapan yangsecara 4. Android
garis besar terbagi dalam empat Android adalah sebuah sistem operasi
kegiatan utama, yaitu initiation, untuk Smartphone dan Tablet. Sistem
analysis, design dan implementation. operasi dapat diilustrasikan sebagai
Setiap kegiatan dalam SDLC “jembatan” anatara piranti (device) dan
dapatdijelaskan melalui tujuan penggunanya, sehingga pengguna bisa
(purpose) dan hasil kegiatannya berinteraksi dengan device-nya dan
(deliverable). SDLCdidefinisikan oleh menjalankan aplikasi-aplikasi yang
Departemen Kehakiman AS sebagai tersedia pada device. Didunia personal
sebuah prosespengembangan software komputer, sistem operasi yang banyak
yang digunakan oleh analyst system, dipakai adalah Windows, Mac dan
untukmengembangkan sebuah sistem Linux [8].
informasi. SDLC mencakup

Informatics and Business Institute Darmajaya 14

Diana, Febrianti Jurnal Informatika, Vol. 17, No.1, Juni 2017

III. METODE PENELITIAN Pada menu ini, terdapat tampilan

daftar doa-doa yang ada di database.
Model pengembangan sistem yang
d. Login Admin
digunakan untuk membangun aplikasi ini
Menu ini merupakan menu yang
adalah Rapid Application Development
digunakan untuk admin dalam
(RAD).
menambahkan data doa dan hapus
doa.
e. Help/Bantuan
Menu help/ bantuan digunakan untuk
membantu para user dalam
menggunakan aplikasi.
f. About/Tentang

Gambar 2. Model RAD Menu about/ tentang digunakan

sebagai informasi yang membuat

1. Arsitektur Sistem program aplikasi.

Berikut adalah Gambar struktur menu
dari aplikasi yang dibangun.

Gambar 3. Arsitektur Sistem

2. Struktur Menu Aplikasi

a. Splash Screen
Splash screen merupakan tampilan
Gambar 4. Struktur Menu Aplikasi
awal masuk masuk aplikasi.
Halaman ini berupa splash
yangmenunjukan latar belakang
image.
b. Menu Utama
Pada halaman menu utama terdapat
empat button, yaitu menu doa, login
admin, help/bantuan, about/ tentang.
c. Menu Doa
Informatics and Business Institute Darmajaya 15
Diana, Febrianti Jurnal Informatika, Vol. 17, No.1, Juni 2017

3. Rancangan Database

Gambar 5.Splash Screen

IV. HASIL DAN PEMBAHASAN

1. Hasil
Aplikasi di bangun berbasisAndroid
dengan Eclipse IDE dan Plugin ADT.
Splash screen (Gambar 5) adalah
tampilan pertama program sebelum
masuk ke menu utama. Menu utama
terdiri dari empattombol yang masing-
masing memiliki fungsi berbeda
(Gambar 6). Pada menu Do’a-Do’a, Gambar6. Menu Utama
pengguna dapat memilih do’a harian
anak-anak. Do’a-do’a tersebut di
tampilkan dengankomponen ListView
android dan populasi doa-doa
merupakan data do’a-do’ayang
tersimpan pada database (Gambar 7).
Tap satu kali pada do’a yang akan
ditampilkan sehingga muncul tampilan
do’a seperti Gambar 8.

Informatics and Business Institute Darmajaya 16

Diana, Febrianti Jurnal Informatika, Vol. 17, No.1, Juni 2017

Gambar 7. Daftar Doa-doa

Gambar 8. Tampilan Doa

Pada tampilan doa, aplikasi

menampilkan doa yang dipilih pada
daftar do’a-do’ayang tampil
sebelumnya. Pada tampilan doa ini
terdapat main tab diposisi bawah layar
yang memiliki tiga opsi untuk doa yang
tampil. Tiga opsitersebut adalah
Bookmark yang berfungsi untuk
menandai doa ke dalambuku penanda,
opsi Note yang berfungsi sebagai
catatan untuk doa yang ditampilkan,
dan opsi Cek sebagai tanda bahwa doa
sudah di baca atau dihafal.

Informatics and Business Institute Darmajaya 17

Diana, Febrianti Jurnal Informatika, Vol. 17, No.1, Juni 2017

Pada Menu Admin ini, pengguna yang yang akan di akses. Jika adminmemilih
terdaftar sebagai admin data doa, maka akan muncul daftar doa-
harusmemasukan informasi akun yang doa yang tersimpan padadatabase
di perlukan aplikasi yaitu berupa aplikasi. Untuk menambah doa baru
usernamedan password yang terdaftar dapat dilakukan denganmenyentuh
sebelumnya. Setelah informasi di tombol “ + “ di sudut kanan atas layar.
lengkapiselanjutnya tekan OK untuk Data doa juga dapat di editmaupun di
mengecek atau memvalidasi informasi hapus.
adminapakah input yang di masukan
cocok dengan database. Jika login
berhasilakan tampil pop-up untuk
memilih menu admin yang akan di
akses. Menuadmin tersebut dapat di
lihat pada gambar di bawah ini.

Gambar 10. Tampilan Tambah Doa

2. Pembahasan
Model View Controller di terapkan pada
package dan class-classaplikasi doa
harian ini.
1) Class-class model tersimpan pada
package com.umb.doa.model.*
2) Class-class pengontrol atau
controller tersimpan pada package
com.umb.doa.controller.*
Gambar 9. Menu Admin
3) Komponen View atau userinterface
tersimpan pada package res/layout.*.
Setelah admin berhasil login,
4) Package com.umb.doa.doa.*
selanjutnya admin memilih menu apa
merupakan package yang berisi

Informatics and Business Institute Darmajaya 18

Diana, Febrianti Jurnal Informatika, Vol. 17, No.1, Juni 2017

classpengakses data dari database.

DAO adalah singkatan dari Data Akses
Object.
5) Package com.umb.doa.utils.* berisi
class-class pendukung.

b. View
Setelah pembuatan model, di buat View
yang berfungsi sebagai wadah
atautempat menampilkan informasi
yang di hasilkan oleh model tersebut.
Viewpada aplikasi android terletak pada
Gambar 8.Package Project Doa Harian
folder res/layout. Berikut merupakan
a. Model satucontoh View yang menampilkan
Pada bagian model ini, terdapat method informasi doa yang di hasilkan Model.
berupa prosedur dan functionyang
berfungsi untuk mendapatkan informasi
dan mengolahnya sepertimelihat,
menambahkan data, mengedit dan
menghapus data. Modelmengakses
informasi dari database melalui DAO.
Berikut ini satu contohModel yang ada
pada aplikasi doa harian untuk anak
muslim ini.

c. Controller
Controller bekerja sesuai dengan
request yang di terima dari View.
Ketikauser memberi perintah melalui
View, Controller bekerja sesuai
intruksiterhubung ke model dan

Informatics and Business Institute Darmajaya 19

Diana, Febrianti Jurnal Informatika, Vol. 17, No.1, Juni 2017

mengembalikan value ke View. Pada

gambar di atasdi jelaskan kode pada
class DoaCtrl atau singkatan dari Doa
Controller. Padabaris pertama
menjelaskan bahwa class ini berada
pada package Controllerselanjutnya
mengimport library android lalu
memberi nama class yaituDoaCtrl.
Pada class controller, class DoaCtrl
meng-inherit Activity dimanaActivity ini
merupakan class yang memanagement
aktivitas Layout sehinggamembuktikan
bahwa class Controller ini terhubung
V. KESIMPULAN
dengan View. Di dalamclass tersebut
Dari hasil analisa, perancangan, pengujian
juga di deklarasikan class DoaMdl yang
dan implementasi programyang telah
merupakan Modelyang sebelumnya
dilakukan terhadap aplikasi Doa Harian
telah di jelaskan dan membuat
Anak, dapat disimpulkansebagai berikut :
Controller ini terhubungdengan Model.
1. Metode Model View Controller(MVC)
Pada method prosedur onCreate() di
dapat di terapkan dalampengembangan
jelaskan proses pengambilan informasi
aplikasi dan tentunya program atau
dari Model dan di tampilkan ke View.
aplikasi lebihterstruktur.
Baris kode
2. Hasilpengujian dari berbagai aspek
setContentView(R.layout.lihat_doa);
aplikasi telah sesuai denganperencanaan
merupakan penentuan View apa yang
dan tujuan penelitian.
terhubung dengan Controller ini, pada
kode tersebut menentukan layout REFERENSI
lihat_doa sebagai View dari Controller
[1] Prakosa ZRS. 2016. Aplikasi Doa
ini. Sehari-hari Bagi Umat Muslim
Berbasis Android. Fakultas
Teknologi Informasi. Universitas
Stikubank. Semarang.
[2] Karnoto M. Aplikasi Pembelajaran
Doa Harian dan Hadist Berbasis
Android pada SDN 37 Pangkal
Pinang.

Informatics and Business Institute Darmajaya 20

Diana, Febrianti Jurnal Informatika, Vol. 17, No.1, Juni 2017

[3] Deacon, J., 2009. Model-View-

Controller.
http://www.jdl.co.uk/briefings/index.
Diakses tanggal 10 Agustus 2017.
[4] Burbeck, S., 1992. Application
Programmings in Smaltalk's 80 ™:
How To Use MVC. [Online]
http://stwww.cs.illinois.edu/users/sm
arch/stdocs/mvc.html.
Diakses tanggal 14 Agustus 2017.
[5] Balani, N., 2002. Web services
architecture using MVC style.
http://www.webifysolutions.com?su
bject=Web services architecture
using MVC style.
Diakses tanggal 14 Agustus 2017.
[6] Rosa A.S dan M.Shalahuddin. 2011.
Modul Pembelajaran Rekayasa
PerangkatLunak (Terstruktur dan
Berorientasi Objek. Bandung.
[7] Nurul AI. 2014. Aplikasi Doa-Doa
Harian Anak Muslim Berbasis
Android.
[8] Satyaputra A dan Aritonang EM.
2014.Beginning Android
Programming with ADT Bundle.
Jakarta. PT.Elex Media Komputindo.

Informatics and Business Institute Darmajaya 21