Document

Hal - 1RANCANG BANGUN APLIKASI PEMBELAJARANIQRA BERBASIS ANDROID Kgs. M. Hendra(Sinobihendra@gmail.com), Adinda Ramadhany(adira.jronaldy@gmail.com) Nyimas Artina(tina_kity2007@yahoo.co.id),Willy(dominikuswilly@yahoo.com)Jurusan Teknik InformatikaSTMIK GI MDPAbstrak: Aplikasi pembelajaran adalah media yang dapat digunakan untuk menyampaikan isi materiyang melibatkan perangkat bergerak seperti ponsel berbasis android. Iqra adalah salah satu metode yangdigunakan untuk belajar membaca Alquran. Iqrandroid adalah aplikasi yang dibuat sebagai dasarmembaca Alquran yang interaktif dan komunikatif. Metodologi yang digunakan dalam pembuatanaplikasi ini ialah metodologiwaterfall.Tujuan dari pembuatan aplikasi ini diharapkan dapat membantuanak-anak untuk bisa mengenal huruf-huruf hijaiyah, gambar objek disertai dengan nama objek dalambahasa Arab dan Indonesia, dapat membedakan harakat dan cara pengucapannya. Aplikasi ini jugadilengkapi dengan fitur lainnya yaitu arah kiblat dan belajar iqra sebagai fitur menulis huruf hijaiyahdengan menggunakandraw canvas.Kata Kunci : Android, Iqra, Alquran, Iqrandroid, Waterfall, Draw Canvas.Abstract: Learning application is a ways that can be used to convey the content of the material thatinvolves mobile devices such as Android-based phones. Iqra is one of method that used to learn readingthe Quran. Iqrandroid application is made as a basis for reading the Quran interactively andcommunicatively. Methods used for this application is the waterfall methodology. The purpose of thisapplication is expected to help children to learn letters hijaiyah, image objects along with the objectname in Arabic and Indonesian, and can distinguish between the pronunciation of vowels. Theapplication also comes with other features, such as the direction of the Qibla and learn iqra as featurewriting letters hijaiyah use draw canvas.Key Words :Android, Iqra, Quran, Iqrandroid, Waterfall, Draw Canvas.1PENDAHULUANAplikasipembelajaranadalahmediayangdapatdigunakanuntukmenyampaikan isi materi yang melibatkanperangkat bergerak seperti ponsel,laptopdantabletPC.Mengingatbegitupentingnya fungsi Alquran bagi hidup dankehidupan manusia maka sudah seharusnyabila anak-anak mempelajarinya sejak dini.Banyak cara yang digunakan untuk belajarmembaca Alquran,salah satunya adalahmetode iqra.Seiring dengan perkembangan dankebutuhan teknologi saat ini pembelajaraniqra dapat dibuat menjadi lebih praktis danmenarik di ponsel berbasis android. Denganmenggunakan pembelajaran iqra berbasisandroid anak-anak diharapkan merasa tidakbosanuntukmempelajaridasar-dasarmembaca Alqurandanbagi anakyangmemiliki orang tua yang sibuk, mereka bisabelajarsendirimembacaAlquran.Berdasarkan uraian di atas maka penulismengambil skripsi dengan judul RancangBangunAplikasiPembelajaranIqraBerbasis Android.2LANDASAN TEORI2.1Mobile Learning (M-Learning)MobileLearning(M-Learning)memiliki arti yang berbeda-beda untukmasing-masingkomunitas.Beberapadefinisitentangm-learningdapat

Hal - 2disebutkansebagaiberikut(Ashari&Istiyanto 2009, h. 87) :a.M-Learningadalahsegalajenispembelajaran yang mana pembelajartidak di lokasi yang tetap atau sudahditentukan,ataupunpembelajarandimanapembelajarmengambilmanfaat dari teknologimobile.b.M-Learningmerupakan akuisisi dariberbagai pengetahuandankeahlianlewatpenggunaanteknologimobile,dimana sajadankapansaja,yangmenghasilkanperubahandalamtingkah laku.2.2Open SourceSebagai MediaPembelajaranMenurutsebuahasosiasi MediaLiteracy di Kanada yang terdiri dari guru-guru dan praktisi dunia pendidikan, mediapembelajarandapatdiartikansebagaimediumataupengantaryangmenjadijembatan untukmemahamisuatu prosespembelajaran. Lebihlanjut mereka jugamenyampaikanbahwakebutuhanakanpendidikanyangmemperhatikanmediapembelajaran sangat penting, karena hanyadengan demikianstudent(mahasiswa) akanlebih memahami tentang inti dari materiyang disampaikan (Victor 2005, h. 135)2.3AndroidAndroidmerupakansubsetperangkat lunak untuk perangkatmobileyang meliputi sistem operasi,middlewaredanaplikasi inti yangdi-releaseolehgoogle. Sedangkan Android SDK(SoftwareDevelopment Kit)menyediakanToolsdanAPIyangdiperlukanuntukmengembangkanaplikasi padaplatformandroiddenganmenggunakanbahasapemrograman Java.2.4IqraDalam pandangan Quraish Shihabkata iqra terambil dari akar kata yangberarti menghimpun. Dari menghimpunlahir aneka makna seperti menyampaikan,menelaah,mendalami,meneliti,mengetahui ciri sesuatu dan membaca tekstertulis maupun tidak (Mudhoffar 2011, h.56)2.5UMLUML(UnifiedModellingLanguage)adalahsalahsatualatbantuyang sangat handal di dunia pengembangansistem yang berorientasi obyek.2.6MetodologiWaterfallDalammengembangkanaplikasiini,metodologi yangdigunakanadalahmodelairterjun(waterfall).Modelwaterfallini adalahmodelklasikyangsistematis dan urut (Sudarmawan 2007, h.154)Gambar 1 : MetodeWaterfalla.Analisis Syarat dan Ketentuan(Requirements definition)Mengumpulkanapayangdibutuhkansecaralengkapuntukkemudiandianalisisgunamendefinisikan kebutuhan yang harusdipenuhi olehprogramyangakandibangun. Fase ini harus dikerjakansecaralengkapuntukbisamenghasilkan desain yang lengkap.b.Sistem dan Desain Perangkat Lunak(System and software design)Setelahapayangdibutuhkanselesaidikumpulkandansudahlengkapmakadesainkemudiandikerjakan.

Hal - 3c.Implementasi dan Pengujian Unit(Implementation and unit testing)Desain program diterjemahkan kedalamkode-kodedenganmenggunakanbahasapemrogramanyang sudah ditentukan. Program yangdibangun langsung diuji secara unit,apakah sudah bekerja dengan baik.d.IntegrasidanPengujianSistem(Integration and system testing)Penyatuanunit-unitprogramuntukkemudiandiujisecarakeseluruhan(system testing).e.OperasidanPemeliharaan(Operation and maintenance)Mengoperasikanprogramdilingkungannyadanmelakukanpemeliharaan, seperti penyesuaian atauperubahanuntukadaptasidengansituasi yang sebenarnya.3PERANCANGAN PERANGKATLUNAK3.1DiagramUse CaseDiagramusecasemerupakangambarandari beberapa interaksi antarkomponenyangterdapatpada aplikasitersebut yang diperkenalkanoleh sistemyang akan dibangun. Aktor/pengguna dapatmengakses menu utama yang terdiri daritiga pilihan menu yaitu huruf hijaiyah, arahkiblat dan belajar iqra.Gambar 2 : DiagramUse casepadaAplikasi Pembelajaran iqra3.2Diagram KelasDiagramkelas adalah inti dariproses pemodelan objek.Diagram kelasmerupakankumpulankelas-kelas objek.Pada diagram kelasiniakandijelaskantentangkelas-kelas yangterdapat padasistem aplikasi pembelajaran iqra. Melaluidiagramkelastersebut,penulisakanmerancangsistemaplikasidenganmenggambarkan beberapa kelas yang akandigunakanpadaaplikasitersebut.Sebagaimana yang akandijelaskan padaGambar 3. Splash +onCreate (BundlesavedInstanceState ) () : void+run ()() : void Menu +ImageButtonbt_baca,bt_kiblat,bt_belajar,bt_exit; +onCreate (BundlesavedInstanceState ){Super.onCreate(SavedInstanceState);+setContentView(R.layout.main); Huruf Hijaiyah Arah Kiblat Belajar Iqra +ArrayList _graphics = newArrayList() ;+ImageButtonbabesar,bah,biy,buy,plh,tul;+Paint mPaint;+String tag = Event; +double lotMosque ;+double lonMosque;+float[] mValues;+LocationListener locListenD ;+LocationManager lm;+SampleView mView;+Sensor mSensor;+SensorManagermSensorManager;+String TAG=Compass; +ArrayList _graphics = newArrayList() ;+Button nx1;+DrawingThread _thread;+ImageButton aa,baa,taa;+Paint mPaint;+Path path;+SurfaceView mSurfaceView; +onCreate (BundlesavedInstanceState ) () : void+setContentView(R.layout.belajar1); mSensorManager =(SensorManager)getSystemService(Context.SENSOR_SERVICE) +onCreate (Bundle savedInstanceState )() : void+setContentView(R.layout.layout_draw); Gambar 3 : Diagram Kelas padaAplikasi Pembelajaran Iqra3.3Diagram AktivitasDiagramaktivitaslebihmemfokuskan diri pada eksekusi danalur sistem daripada bagaimana sistemitudirakit.Diagramaktivitasmenunjukkan aktivitassistemdalambentuk kumpulan aksi-aksi.3.3.1Diagram Aktivitas mengakseshuruf hijaiyahPadadiagramaktivitasmengakses huruf hijaiyah menggambarkankejadian pengguna mengakses menu hurufhijaiyah.

Hal - 4 Tampil halaman utama Input pilihan Pilih Huruf Hijaiyah Tampil Huruf Hijaiyah Pilih keluar Ya TidakYaPenggunaAplikasiTidak Gambar 4 : Diagram AktivitasMengakses Huruf Hijaiyah3.3.2Diagram Aktivitas MengaksesArah kiblatPada diagram aktivitas mengaksesarah kiblat, menggambarkan kejadianpengguna mengakses menu arah kiblat. Tampil halaman utama Input pilihan Pilih Arah Kiblat Tampil Arah Kiblat Pilih keluar Ya TidakYaPenggunaAplikasiTidak Gambar 5 : Diagram AktivitasMengakses Arah Kiblat3.3.3Diagram Aktivitas MengaksesBelajar IqraPada diagram aktivitas mengaksesbelajar iqra, menggambarkankejadianpengguna mengakses menu belajar iqra. Tampil halaman utama Input pilihan Pilih Belajar Iqra Tampil Iqra Pilih keluar Ya TidakYaPenggunaAplikasiTidak Gambar 6 : Diagram AktivitasMengakses Belajar Iqra3.4Diagram SekuensialDiagramsekuensialdigunakanuntuk menggambarkanperilakupadasebuahskenario.Diagraminimenunjukkansejumlahcontohobjekdan pesanyang diletakkandiantaraobjek-objek ini di dalamuse case.3.4.1Diagram Sekuensial MengaksesHuruf hijaiyahDiagram dibawah ini menjelaskanobjekapasajayangterlibatdanberhubungandenganakseshurufhijaiyah yang merupakan bagian darimenu yang ada pada aplikasi tersebut.Gambar 7 : Diagram SekuensialMengakses Huruf Hijaiyah3.4.2Diagram Sekuensial MengaksesIqraDiagram dibawah ini menjelaskanobjekapasajayangterlibatdan

Hal - 5berhubungandengan akses iqra yangmerupakan bagian dari menu yang adapada aplikasi tersebut.Gambar 8 : Diagram SekuensialMengakses Iqra3.4.3Diagram Sekuensial MengaksesArah kiblatDiagram akan menjelaskan objek-objekyang terlibat danberhubungandenganaksesarahkiblatyangmerupakan bagian dari menu yang adapada aplikasi tersebut.Gambar 9 : Diagram SekuensialMengakses Arah kiblat4.RANCANGAN ANTARMUKA4.1TampilanSplash ScreenTampilaninimerupakantampilanpembukapadaaplikasi.Sistemakanmenampilkansplashscreen.Splashscreenadalahsuatukondisiyangdigunakanuntukmenggambarkanimageatau gambaryang muncul pada saat sebuah aplikasiatau program dalam prosesloading.Splash screenini digunakanpadaaplikasisebagaifeedbackbahwaaplikasi tersebut dalam prosesloading.Gambar dalamsplashscreenakanhilang ketika jendela aplikasi utamamuncul. Pada aplikasi yang dibuat adaduasplash screenyang akan munculsepertipada Gambar10 dan11.Gambar 10menampilkansplashscreenyang berisi logo STMIK MDPsebagai tampilan pertama program danGambar 11 merupakansplash screenkedua sebagai tampilan kedua programsebelum masuk ke tampilan utama.Gambar 10 : AntarmukaSplash ScreenGambar 11 : AntarmukaSplash Screen4.2Tampilan Halaman Menu UtamaSetelah sistem menampilkansplashscreen, sistem akan menampilkan menuutama yangterlihatsepertitampilan

Hal - 6pada Gambar 12. Tampilan menu utamaterdiri dariempat menu yaituhurufhijaiyah, arah kiblat, belajar iqra dankeluar.Gambar 12 : Antarmuka MenuUtama4.3Tampilan Menu Huruf HijaiyahPada menu huruf hijaiyah penggunabisa melihat informasi mengenai huruf-hurufhijaiyah. Cara membacahurufhijaiyahdanmenulis hurufhijaiyah.Selain itu pengguna juga dapat memilihhurufyangdiinginkanuntukditampilkan melalui tombol pilih yangsudahdisediakantanpaharusmelanjutkanke tampilanberikutnya.Tampilanformhurufhijaiyahdapatdilihat pada Gambar 13. pengguna bisalangsung memilih huruf yang diinginkanmelaluitable rowpadatable layoutyangdisediakan.Gambar 13 : Pilih Huruf HijaiyahFitur menulis terlihat pada Gambar 14penggunabisamemanfaatkandrawcanvasuntuk belajar menulis hurufhijaiyah.Gambar 14 : Tulis Huruf Hijaiyah4.4Tampilan Menu Belajar IqraTampilan ini merupakan halamantampilan yang memuat rangkaian huruf-huruf hijaiyah yang terdapat dalam iqra.Disini terdapat 6 (enam) pilihanbuttoniqra 1 sampai iqra 6. Tampilan menubelajar iqra dapat dilihat pada Gambar15.

Hal - 7Gambar 15 : AntarmukaMenu Belajar IqraApabilabuttoniqra 1 diklik maka akanmunculhalamaniqrasepertipadaGambar16 dimana terdapat 3hurufhijaiyah yang ada di iqra 1. Diatasnyaterdapat4pilihanbuttonyaitumainmenu,next, pilih iqra dan menulis.Mainmenuberfungsiuntukkembalikehalamanutama,nextberfungsi untukmelanjutkan kehalaman berikutnya padaiqra1,pilihiqraberfungsiuntukkembali kehalaman menu belajar iqradan menulis sebagai fitur untuk goresanhuruf.Gambar 16 : AntarmukaIqra 1Buttonmenulis tampak pada Gambar 17sebagai fitur untuk menulis huruf yangada disetiap tampilan belajar iqra 1sampai 6.Gambar 17 : Fitur Menulisdi Belajar Iqra4.5Tampilan Menu Arah KiblatPada halaman menu arahkiblat ini merupakan menu yangmenampilkan tanda sebagai penunjukuntuk menentukan arah kiblat di suatutempat. Tampilan menu arah kiblattampak seperti pada Gambar 18.Gambar 18 : Antarmuka MenuArah Kiblat5PENUTUP5.1KesimpulanPada bab ini dipaparkankesimpulan dari pengerjaan skripsiiniberdasarkanhasilprosespengembangandanpengimplementasian, yaitu :1.Aplikasiinimemanfaatkanteknologiponselsehinggamenjadilebihinteraktifdankomunikatif.2.Aplikasi ini dilengkapi dengangambar yang menarikkarena

Hal - 8gambarhurufhijaiyahbisadipilihdalamaplikasidanmenimbulkan suara.3.Dengan aplikasi ini diharapkandapatmembantuanak-anakmengenaicarapengucapanhuruf yang baik dan benar.5.2 SaranSaranyangdapatdirekomendasikanolehpenulisdalammenyelesaikanskripsiiniadalah sebagai berikut :1.Aplikasiyangakandikembangkanuntukkedepannyadiharapkandapatdigunakandilayarresolusibesar.2.Aplikasiyangakandikembangkanuntukselanjutnyadiharapkandapatditambahkanfiturpermainanseperti menyusun gambar iqra(puzzle)untuk anak-anak.3.Aplikasiinisebaiknyaditambahkanbuttonhapus padafitur menulis.DAFTAR PUSTAKA[1]Alam, Tombak 2011,Ilmu Tajwid,Amzah, Jakarta.[2]Andry. 2011,Android A sampai Z,PCPlus, Jakarta.[3]Arifianto, Teguh 2011,MembuatInterface Aplikasi Android LebihKeren denganLWUIT,Andi Offset, Yogyakarta.[4]Basuni,A.Mudhoffar2011,PendidikanDalamPerspektifAlquran, Diambil 6September2012,darihttp://jurnal.smam1gresik.sch.id/wp-content/uploads/2011/09/Jurnal-INSPIRASI-Vol-2-No-2-Mei-2011.pdf#page=51[5]HermawanS,Stephanie2011,Mudah Membuat Aplikasi Android,Andi,Yogyakarta.[6]Imbar,RadiantVictor2006,SoftwareOpenSourcedanTeknologinya.(Majalah IlmiahMaranatha Vol. 29 TH 13 Januari2006).RedaksiLPPMUKM,Bandung.[7]Komputer, Wahana 2012,MembuatAplikasi Android untuk Tablet danHandphone,PTElexMedia Komputindo, Jakarta.[8]Moh. Roqib. 2009,Dari Iqrasampai Quantum: Upaya KreatifPengembangan StrategiPembelajaran,Diambil4September2012,darihttp://ejournal.stainpurwokerto.ac.id/index.php/insania/article/view/242/22[9]Mulyadi. 2010,Membuat Aplikasiuntuk Android, Multimedia Center,Yogyakarta.[10]Mulyana,Eueung2012,AppInventor:CiptakanSendiriAplikasi Androidmu,Andi,Yogyakarta.[11]Munawar. 2005,Pemodelan VisualdenganUML,GrahaIlmu,Yogyakarta.[12]Nakata, Yuki 2009,ConstructingNewStagesofEducationforMuslim Children:Impacts of The Dissemination ofThe Iqro MethodTextbookonIslamicEducationinIndonesiaandMalaysia.Diambil 4 September 2012, darihttp://educare-ijes.com/educarefiles/File/yuki.jpg.pdf[13]Papilaya, Victor N 2005,OpenSourceSebagaiMediaPembelajaran. (Jurnal Ilmiah

Hal - 9Aiti. Vol. 2 No. 2 Agustus 2005).Redaksi LPPM UGM, Yogyakarta.[14]Safaat H, Nazruddin 2012,AndroidPemrogramanAplikasiMobileSmartphonedanTabletPcBerbasisAndroidEdisiRevisi,Informatika, Bandung.[15]Sudarman,DayAriyus2007,Interaksi Manusia dan Komputer,Andy, Yogyakarta.[16]Supardi, Yuniar 2005,36 JBK :Pemrograman Java 2, Elex MediaKomputindo, Jakarta.[17]Sutrisno,Ashari&JaziEkoIstiyanto,2009.Perspektif&TantanganPengembanganM-Learning.(JurnalIlmiahInformatika Vol. 5No. 1 Juni2009).Redaksi Unika Maranatha,Bandung.