TA : Rancang Bangun Antarmuka Aplikasi Pepak Bahasa Jawa Berbasis Android.

TUGAS AKHIR COVER

Nama : Freditia Musthafa NIM : 07.41010.0288 Program : S1 (Strata Satu) Jurusan : Sistem Informasi

SEKOLAH TINGGI

MANAJEMEN INFORMATIKA & TEKNIK KOMPUTER SURABAYA

ABSTRAK

Permasalah dalam penelitian ini adalah bagaimana merancang dan membangun aplikasi pepak bahasa Jawa berbasis Android yang menampilkan antarmuka sesuai dengan Constantine and Lockwood’s user interface design principles. Teori yang terkait terdapat 2 aspek yaitu aspek psikologi yang meliputi teori pemilihan warna, bentuk dan bahasa. Sedangkan aspek tipografi meliputi pemilihan jenis font.

Tujuan dari penelitian ini adalah menghasilkan sebuah aplikasi pepak bahasa Jawa berbasis Android yang antarmukanya memenuhi prinsip Constantine and Lockwood’s user interface design principles. Prinsip desain yang digunakan adalah The structure principle, The simplicity principle, The visibility principle, dan The feedback principle.

Hasil penelitian ini menunjukkan bahwa: Antarmuka aplikasi pepak bahasa Jawa sudah sesuai dengan tujuan. Hasil uji kompatibilitas tipe smartphone

pada Samsung Galaxy SIII, HTC Sensation, Sony Experia J aplikasi dapat berjalan dengan lancar dan tidak terjadi kesalahan pada uji coba fitur dalam aplikasi. Dari hasil uji kompatibilitas aplikasi terhadap sistem operasi disimpulkan bahwa aplikasi dapat berjalan sempurna pada sistem operasi Android Jelly Bean

dan KitKat. Tetapi pada versi Android ICS hasilnya berjalan tetapi textbox

pencarian menutupi icon pencarian.

Kata Kunci : Antarmuka aplikasi, pepak bahasa Jawa, Android.

DAFTAR ISI

Halaman

ABSTRAK ... vi

KATA PENGANTAR ... vii

DAFTAR ISI ... ix

DAFTAR TABEL ... xii

DAFTAR GAMBAR ... xiii

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang Masalah ... 1

1.2 Perumusan Masalah ... 2

1.3 Pembatasan Masalah ... 3

1.4 Tujuan ... 3

1.5 Sistematika Penulisan ... 3

BAB II LANDASAN TEORI ... 5

2.1 Pepak Bahasa Jawa ... 5

2.2 Android .. ... 5

2.3 Interaksi Manusia & Komputer (IMK) ... 8

2.3.1 Aspek Ilmu Komputer ... 10

2.3.2 Aspek Psikologi ... 11

2.3.3 Aspek Tipografi ... 14

2.4 Logika Latihan Soal ... 14

2.5 JavaScript ... 15

2.5.1 JQuery Mobile ... 15

2.6 CSS ... 16

Halaman

2.7 HTML ... 16

2.8 PHP ... 17

2.9 Testing dan Implementasi Sistem ... 18

BAB III ANALISIS DAN PERANCANGAN SISTEM ... 20

3.1 Analisis Permasalahan ... 20

3.1.1 Identifikasi Masalah ... 20

3.1.2 Identifikasi Kebutuhan ... 21

3.2 Perancangan Sistem ... 22

3.2.1 Use Case Diagram ... 24

3.2.2 Activity Diagram ... 26

3.2.3 Sequence Diagram ... 31

3.2.4 Class Diagram ... 35

3.2.5 Struktur Tabel ... 38

3.2.6 Perancangan Antarmuka ... 40

3.3 Desain Uji Coba ... 51

3.3.1 Uji Coba Kesesuaian Antarmuka Aplikasi ... 51

3.3.2 Uji Coba Kompatibilitas Aplikasi ... 52

BAB IV IMPLEMENTASI DAN EVALUASI ... 54

4.1 Implementasi ... 54

4.1.1 Kebutuhan Perangkat Keras ... 54

4.1.2 Kebutuhan Perangkat Lunak ... 54

4.1.3 Pembuatan Aplikasi ... 54

4.1.4 Implementasi Aplikasi ... 55

Halaman

4.2 Evaluasi ... 78

4.2.1 Uji Coba Kesesuaian Antarmuka Aplikasi ... 78

4.2.2 Uji Coba Kompatibilitas Aplikasi ... 82

4.2.3 Analisa Hasil Uji Coba Aplikasi ... 85

BAB V PENUTUP ... 88

5.1 Kesimpulan ... 88

5.2 Saran ... 88

DAFTAR PUSTAKA ... 89

DAFTAR TABEL

Halaman

Tabel 3.1 Daftar Data Indikator ... 21

Tabel 3.2 Kesesuaian Rancangan Antarmuka ... 22

Tabel 3.3 Daftar Use Case Diagram ... 25

Tabel 3.4 Struktur Tabel Kategori ... 38

Tabel 3.5 Struktur Tabel Sub_Kategori ... 38

Tabel 3.6 Struktur Tabel Detil_Sub_Kategori ... 39

Tabel 3.7 Struktur Tabel Soal_latihan ... 39

Tabel 3.8 Desain Uji Coba Kesesuaian Antarmuka ... 51

Tabel 4.1 Hasil Uji Coba Kesesuaian Antarmuka ... 79

Tabel 4.2 Spesifikasi Smartphone ... 83

Tabel 4.3 Daftar Fitur yang Diujikan ... 83

Tabel 4.4 Hasil Uji Coba Fitur ... 83

Tabel 4.5 Uji Aplikasi pada Sistem Operasi ... 84

DAFTAR GAMBAR

Halaman Gambar 3.1 Struktur Navigasi Aplikasi Antarmuka Pepak Bahasa Jawa

Berbasis Android ... 24

Gambar 3.2 Use Case Diagram Aplikasi Antarmuka Pepak Bahasa Jawa Berbasis Android ... 25

Gambar 3.3 Activity Diagram Melihat Kategori ... 27

Gambar 3.4 Activity Diagram Melihat Sub Kategori ... 28

Gambar 3.5 Activity Diagram Melihat Detil Sub Kategori ... 29

Gambar 3.6 Activity Diagram Mengerjakan Latihan Soal ... 30

Gambar 3.7 Activity Diagram Mencari Kata ... 31

Gambar 3.8 Sequence Diagram Melihat Kategori ... 32

Gambar 3.9 Sequence Diagram Melihat Sub Kategori ... 32

Gambar 3.10 Sequence Diagram Melihat Detil Sub Kategori ... 33

Gambar 3.11 Sequence Diagram Mengerjakan Latihan Soal ... 34

Gambar 3.12 Sequence Diagram Mencari Kata ... 34

Gambar 3.13 ClassDiagram Main ... 35

Gambar 3.14 Class Diagram Kategori ... 36

Gambar 3.15 Class Diagram Sub Kategori ... 36

Gambar 3.16 Class Diagram Detil Sub Kategori ... 37

Gambar 3.17 Class Diagram Soal Latihan ... 37

Gambar 3.18 Rancangan Tampilan Pembuka ... 40

Gambar 3.19 Rancangan Tampilan Menu Utama ... 41

Gambar 3.20 Rancangan Tampilan Sub Menu Rupa Kawruh ... 42

Gambar 3.21 Rancangan Tampilan Detil Sub Menu Rupa Kawruh ... 42

Halaman

Gambar 3.22 Rancangan Tampilan Sub Menu Kawruh Basa ... 43

Gambar 3.23 Rancangan Tampilan Detil Sub Menu Kawruh Basa ... 44

Gambar 3.24 Rancangan Tampilan Sub Menu Kasusastraan ... 45

Gambar 3.25 Rancangan Tampilan Detil Sub Menu Kasusastraan ... 45

Gambar 3.26 Rancangan Tampilan Sub Menu Pewayangan ... 46

Gambar 3.27 Rancangan Tampilan Detil Sub Menu Pewayangan ... 47

Gambar 3.28 Rancangan Tampilan OutputPopup Teks ... 48

Gambar 3.29 Rancangan Tampilan OutputPopup Gambar ... 48

Gambar 3.30 Rancangan Tampilan OutputPopup Suara ... 48

Gambar 3.31 Rancangan Tampilan Latihan Soal ... 49

Gambar 3.32 Rancangan Tampilan Hasil Latihan Soal ... 49

Gambar 3.33 Rancangan Tampilan Pencarian ... 50

Gambar 3.34 Rancangan Tampilan Error Handling Latihan Soal ... 50

Gambar 3.35 Rancangan Tampilan Error Handling Pencarian ... 51

Gambar 4.1 Tampilan Pembuka ... 55

Gambar 4.2 Tampilan Menu Utama ... 56

Gambar 4.3 Tampilan Sub Menu Rupa Kawruh ... 57

Gambar 4.4 Tampilan Error Handling Pencarian Sub Menu Rupa Kawruh 57 Gambar 4.5 Tampilan Hasil Pencarian Sub Menu Rupa Kawruh ... 58

Gambar 4.6 Tampilan Detil Sub Menu Rupa Kawruh ... 59

Gambar 4.7 Tampilan Error Handling Pencarian Detil Sub Menu Rupa Kawruh ... 59

Gambar 4.8 Tampilan Hasil Pencarian Detil Sub Menu Rupa Kawruh ... 60

Gambar 4.9 Tampilan Sub Menu Kawruh Basa ... 61

Halaman Gambar 4.10 Tampilan Error Handling Pencarian Sub Menu Kawruh Basa 61

Gambar 4.11 Tampilan Hasil Pencarian Sub Menu Kawruh Basa ... 62

Gambar 4.12 Tampilan Detil Sub Menu Kawruh Basa ... 63

Gambar 4.13 Tampilan Error Handling Pencarian Detil Sub Menu Kawruh Basa ... 63

Gambar 4.14 Tampilan Hasil Pencarian Detil Sub Menu Kawruh Basa ... 64

Gambar 4.15 Tampilan Sub Menu Kasusastraan ... 65

Gambar 4.16 Tampilan Error Handling Pencarian Sub Menu Kasusastraan 65 Gambar 4.17 Tampilan Hasil Pencarian Sub Menu Rupa Kasusastraan ... 66

Gambar 4.18 Tampilan Detil Sub Menu Kasusastraan ... 67

Gambar 4.19 Tampilan Error Handling Pencarian Detil Sub Menu Kasusastraan ... 67

Gambar 4.20 Tampilan Hasil Pencarian Detil Sub Menu Kasusastraan ... 68

Gambar 4.21 Tampilan Sub Menu Pewayangan ... 69

Gambar 4.22 Tampilan ErrorHandling Pencarian Sub Menu Pewayangan . 69 Gambar 4.23 Tampilan Hasil Pencarian Sub Menu Pewayangan ... 70

Gambar 4.24 Tampilan Detil Sub Menu Pewayangan ... 71

Gambar 4.25 Tampilan Error Handling Pencarian Detil Sub Menu Pewayangan ... 71

Gambar 4.26 Tampilan Hasil Pencarian Detil Sub Menu Pewayangan ... 72

Gambar 4.27 Tampilan OutputPopup Teks ... 73

Gambar 4.28 Tampilan OutputPopup Gambar ... 73

Gambar 4.29 Tampilan OutputPopup Suara ... 74

Gambar 4.30 Tampilan Latihan Soal ... 74

Gambar 4.31 Tampilan Error Handling Latihan Soal ... 75

Halaman

Gambar 4.32 Tampilan Hasil Latihan Soal ... 76

Gambar 4.33 Tampilan Sub Menu Pencarian ... 76

Gambar 4.34 Tampilan Hasil Pencarian ... 77

Gambar 4.35 Tampilan Error Handling Pencarian ... 78

Gambar 4.36 Hasil Warna Hijau Kategori Rupa Kawruh ... 80

Gambar 4.37 Hasil Warna Merah Kategori Kawruh Basa ... 80

Gambar 4.38 Hasil Warna Kuning Kasusastraan ... 80

Gambar 4.39 Hasil Warna Cokelat Kategori Pewayangan ... 81

Gambar 4.40 Hasil Warna Kuning Kategori Latihan Soal ... 81

Gambar 4.41 Hasil Warna Kuning Kategori Pencarian ... 81

Gambar 4.42 Hasil Informasi Menggunakan Bahasa Indonesia ... 82

Gambar 4.43 Hasil Bentuk Loading Indikator Bulat ... 82

Gambar 4.44 Hasil Ilustrasi Gambar ... 82

1.1 Latar Belakang Masalah

Antarmuka adalah bagian paling penting dari setiap sistem komputer. Antarmuka merupakan faktor yang tidak dapat dikesampingkan dalam pengembangan aplikasi. Antarmuka aplikasi adalah segala sesuatu yang pengguna dapat lihat dan berinteraksi (Android, 2013). Antarmuka merupakan bagian dari komputer dan perangkat lunaknya yang dapat dilihat, didengar, disentuh, dan diajak bicara, baik secara langsung maupun dengan proses pemahaman tertentu. Tujuan dari desain adalah sederhana, untuk membuat bekerja dengan komputer menjadi mudah, produktif, dan menyenangkan. Antarmuka yang baik adalah yang membuat pengguna berkonsentrasi pada informasi dan tugas yang dilaksanakan, dan bukan berkonsentrasi pada mekanisme yang digunakan untuk menampilkan informasi dan melaksanakan tugas (Galitz 2002).

Salah satu sistem operasi mobile yang memiliki Antarmuka yang menarik adalah Android. Antarmuka smartphone Android sangat interaktif, atraktif dan tidak pernah bosan untuk dijelajahi. Android menyediakan berbagai komponen

prebuild antarmuka seperti obyek layout yang terstruktur dan kontrol antarmuka yang memungkinkan orang untuk membangun antarmuka pengguna grafis untuk aplikasi. Android juga menyediakan modul khusus untuk antarmuka seperti dialog, pemberitahuan, dan menu (Android, 2013). Karena itu, saat ini pengguna

Android meningkat empat kali lipat dibanding dengan tahun 2011 lalu. Pada tahun 2011, pengguna perangkat berbasis Android hanya sekitar 100 juta orang saja dan

2

untuk tahun 2012 pengguna Android meningkat menjadi kurang lebih 400 juta pengguna (Merdeka, 2012).

Pada penelitian ini, keunggulan antarmuka Android digunakan untuk membuat tampilan antarmuka aplikasi pepak bahasa Jawa. Buku pepak bahasa Jawa yang dijadikan bahan penelitian masih berisi teks hitam putih dan tidak berwarna, sehingga pepak dianggap kurang menarik. Disisi lain buku pepak mengandung banyak sekali pengetahuan dasar tentang bahasa Jawa. Hal tersebut membuat masyarakat, terutama generasi muda kurang tertarik terhadap buku pepak. Dikhawatirkan pepak akan terlupakan dan punah bila materi pepak selalu disajikan dengan tampilan yang kurang menarik.

Berdasarkan uraian diatas, maka dibuat aplikasi antarmuka pepak bahasa Jawa berbasis Android. Aplikasi ini diterapkan untuk membantu mengatasi tampilan antarmuka buku pepak bahasa Jawa. Tampilan antarmuka yang digunakan sesuai dengan aturan yang diterapkan pada prinsip desain antarmuka

Constantine and Lockwood’s user interface design principles. Aplikasi ini juga dapat memudahkan pengguna untuk menggunakan pepak bahasa Jawa dan dapat membantu masyarakat dalam melestarikan bahasa Jawa.

1.2 Perumusan Masalah

Berdasarkan uaraian pada latar belakang masalah maka perumusan masalah adalah bagaimana merancang dan membangun antarmuka aplikasi pepak bahasa Jawa berbasis Android yang menampilkan antarmuka menurut Constantine and Lockwood’s user interface design principles.

1.3 Pembatasan Masalah

Batasan masalah yang diambil berdasarkan rumusan masalah tersebut adalah:

1. Pepak bahasa Jawa yang digunakan sebagai referensi dalam aplikasi ini adalah karangan M. Abi Tofani.

2. Tidak mencakup tentang Tembang dan Hanacaraka 3. Tidak mencakup pelafalan kata

4. Aplikasi ini ditujukan untuk smartphone yang menggunakan sistem operasi

Android.

5. Aplikasi dianjurkan untuk digunakan pada sistem operasi versi 4.0 (ICS: Ice Cream Sandwich) dan yang lebih baru.

6. Prinsip desain antarmuka Constantine and Lockwood’s user interface design principles yang dipakai adalah The structure principle, The simplicity principle, The visibility principle, dan The feedback principle.

1.4 Tujuan

Dengan mengacu pada perumusan masalah maka tujuan yang hendak dicapai dalam Tugas Akhir ini adalah menghasilkan antarmuka yang memenuhi

Constantine and Lockwood’s user interface design principlesuntuk aplikasi pepak bahasa Jawa berbasis Android.

1.5 Sistematika Penulisan

Sistematika penulisan yang digunakan dalam penulisan tugas akhir ini adalah sebagai berikut:

4

BAB I : PENDAHULUAN

Bab ini merupakan pendahuluan dari karya tulis tugas akhir yang membahas mengenai latar belakang masalah, perumusan masalah, pembatasan masalah, tujuan, dan sistematika penulisan.

BAB II : LANDASAN TEORI

Bab ini menjelaskan teori yang mendukung pokok pembahasan tugas akhir yang meliputi pengertian pepak, Android, interaksi manusia dan komputer, testing dan implementasi sistem.

BAB III : ANALISIS DAN PERANCANGAN SISTEM

Bab ini menjelaskan mengenai analisis dan perancangan sistem yang terdiri atas penjelasan dari analisa permasalahan, perancangan sistem, dan desain uji coba aplikasi antarmuka pepak bahasa Jawa berbasis

Android.

BAB IV : IMPLEMENTASI DAN EVALUASI

Bab ini menjelaskan tentang implementasi program, berisi langkah-langkah implementasi program dan hasil implementasi program, serta analisis terhadap kinerja aplikasi tersebut.

BAB V : PENUTUP

Bab ini berisi kesimpulan yang menjawab pernyataan dalam perumusan masalah dan beberapa saran yang bermanfaat dalam pengembangan program di waktu mendatang.

2.1 Pepak Bahasa Jawa

Pepak adalah kata bahasa Jawa yang jika diterjemahkan ke dalam bahasa Indonesia artinya pengetahuan. Buku pepak adalah sebuah buku penunjang mata pelajaran muatan lokal bahasa Jawa untuk SD dan SMP. Buku pepak berisi kumpulan sari-sari atau isi dari bahasa Jawa.

Bahasa Jawa adalah bahasa yang digunakan penduduk bersuku bangsa Jawa di Jawa Tengah, Yogyakarta, dan Jawa Timur. Selain itu, bahasa Jawa juga digunakan oleh penduduk yang tinggal di beberapa daerah lain seperti Banten (Serang, Cilegon, dan Tanggerang) serta Jawa Barat (Karawang, Subang, Indramayu, dan Cirebon).

Buku pepak bahasa Jawa mengandung banyak sekali pengetahuan dasar tentang bahasa Jawa. Buku pepak bahasa Jawa ini mengenalkan berbagai hal dalam bahasa Jawa, mulai dari araning wit, araning kewan, araning wong, pepindhan, sanepa, saloka, cangkriman, wangsalan, paramasastra, gamelan hingga pengenalan tokoh-tokoh pewayangan (Tofani, 2012).

2.2 Android

Menurut Harahap (2011) Android adalah sebuah sistem operasi untuk perangkat mobile berbasis linux yang mencakup sistem operasi, middleware dan aplikasi. Android menyediakan platform yang terbuka bagi para pengembang untuk menciptakan aplikasi mereka.

Jenis-Jenis dan varian Android:

6

a. Android versi 1.1 dirilis pada 9 Maret 2009. Android versi ini dilengkapi dengan pembaharuan estetis pada aplikasi, jam, Voice Search (pencarian suara), pengiriman pesan dengan Gmail, dan pemberitahuan email.

b. Android versi 1.5 (Cupcake) pada pertengahan Maret 2009. Terdapat beberapa pemberharuan termasuk juga penambahan beberapa fitur dalam ponsel versi ini yakni kemampuan merekam dan menonton video dengan modus kamera, mengunggah video ke youtube dan gambar picasa langsung dari telepon, dukungan Bluetooth A2DP, kemampuan terhubung secara otomatis ke headset Bluetooth, animasi layar, dan keyboard pada layar yang dapat disesuaikan dengan sistem.

c. Android versi 1.6 (Donut) dirilis pada September dengan menampilkan proses pencarian yang lebih baik dibanding sebelumnya, penggunaan baterai indikator dan kontrol applet VPN. Fitur lainnya adalah galeri yang memungkinkan pengguna untuk memilih foto yang akan dihapus, kamera,

camcorder dan galeri yang diintegrasikan; CDMA/EVDO, 802.1x, VPN,

Gestures dan text to speech engine; kemampuan dial kontak, teknologi

pengadaan resolusi VWGA, teknologi text to change speech.

d. Android versi 2.0/2.1 (Eclair) dirilis pada 3 Desember 2009. Perubahan yang dilakukan adalah pengoptimalan hardware, peningkatan google maps 3.1.2,

perubahan UI dengan browser baru dan dukungan HTML5. Daftar kontak yang baru, dukungan flash untuk kamera 3.2 MP, digital zoom, dan mengadakan kompetisi aplikasi terbaik (killer apps).

e. Android versi 2.2 (Froyo: Frozen Yoghurt) dirilis pada Mei 2010. Perubahan yang dilakukan berupa penambahan dukungan terhadap adobe flash 10.1,

kecepatan kinerja dan aplikasi 2 sampai 5 kali lebih cepat, integrasi V8 engine

script yang dipakai google chrome yang digunakan untuk mempercepat

kemampuan rendering pada browser, pemasangan aplikasi dalam SDCard, kemampuan wifihostspot portable, dan kemampuan auto update pada aplikasi

Android market.

f. Android versi 2.3 (Gingerbread) dirilis pada 6 Desember 2010. Perubahan umum yang dilakukan adalah meningkatkan kemampuan permainan(gaming). Peningkatan fungsi copy paste, layar antar muka di desain ulang, dukungan format video VP8 dan WebM, efek audio baru(reverb,equalization,bass

boost), dukungan kemampuan Near Field Communication (NFC), dan

dukungan jumlah kamera yang lebih dari satu.

g. Android versi 3.0 (Honeycomb) Android versi ini dirancang khusus untuk

tablet. Android versi ini mendukung ukuran layar yang lebih besar. Antar muka juga berbeda karena didesain untuk tablet. Honeycomb juga mendukung untuk multi processor dan juga akselerasi perangkat keras untuk grafis.

h. Android versi 4.0 (ICS: Ice Cream Sandwich) diumumkan pada tanggal 19 Oktober 2011, membawa fitur Honeycomb untuk smartphone dan menambahkan fitur baru termasuk membuka kunci dengan pengenalan wajah, jaringan data pemantauan penggunaan dan kontrol, terpadu kontak jaringan sosial, perangkat tambahan fotografi, mencari email secara offline, dan berbagi informasi dengan menggunakan NFC.

i. Android versi 4.1 ( Jelly Bean) dirilis pada 9 Juli 2012. Penambahan fitur di antaranya antarmuka pengguna yang lebih halus, peningkatan aksesibilitas, teks dua bahasa dan dukungan bahasa lainnya, papan ketik yang bisa

8

dimodifikasi oleh pengguna, perluasan notifikasi, kemampuan untuk mematikan notifikasi pada aplikasi tertentu, shortcut dan widget secara otomatis bisa disusun ulang atau diatur ukurannya.

j. Android versi 4.4 (KitKat) dirilis pada tanggal 31 Oktober 2013. Penambahan fitur di antaranya pembaruan antarmuka dengan bar status dan navigasi transparan pada layar depan, optimalisasi kinerja pada perangkat dengan spesifikasi yang lebih rendah, kerangka kerja pencetakan, NFC Host Card Emulation sebagai emulator.

Dari banyak versi Android yang ada, versi 4.1 (Jelly Bean) atau lebih tinggi yang mendukung platforms JQuery Mobile 1.4 (JQuery Mobile, 2014). Antarmuka smartphone Android tidak pernah bosan untuk dijelajahi. Android

menyediakan berbagai komponen prebuild antarmuka seperti obyek layout yang terstruktur dan kontrol antarmuka yang memungkinkan orang untuk membangun antarmuka aplikasi. Android juga menyediakan modul khusus untuk antarmuka seperti dialog, pemberitahuan, dan menu (Android, 2013).

2.3 Interaksi Manusia & Komputer (IMK)

Menurut Santoso (1997) IMK adalah suatu ilmu yang mempelajari perencanaan dan desain tentang cara manusia dan komputer saling bekerja sama, sehingga manusia dapat merasa puas dengan cara yang paling efektif. Tujuan utama disusunnya berbagai cara interaksi manusia dan komputer pada dasarnya adalah untuk memudahkan manusia dalam mengoperasikan komputer dan mendapatkan berbagai umpan balik yang ia perlukan selama ia bekerja pada sebuah sistem komputer. Ruang lingkup IMK adalah perancangan dan evaluasi antarmuka pemakai (user interface). Komponen IMK (HIC) :

• Manusia (Human) Sebagai pengguna sistem dan subjek manajemen sistem komputer. Indera manusia (penglihatan, pendengaran, sentuhan). Bagaimana sistem nyaman dilihat oleh pengguna. Dalam multimedia, penyajian dilakukan secara visual dan audio sehingga agar lebih menarik dan komunikatif penyajiannya harus memperhatikan penglihatan dan pendengaran. Untuk layar

touchscreen, bagaimana sistem dibuat agar mudah digunakan. (step by step harus jelas).

• Antar muka (Interface) Sebagai jembatan antara subjek dan objek. Sesuatu yang menjadi jembatan antara manusia dengan sistem, saat user memasukkan data ke sistem (input) dan menerima informasi dari sistem (output).

• Komputer (computer) Sebagai objek yang di manajemen sekaligus membantu pekerjaan subjek. Layar monitor sebagai “wajah” berinteraksi dengan komputer. Sebagai input untuk masuk ke dalam sistem, yaitu mouse, keyboard. CPU akan memproses input dari manusia menjadi output berupa informasi yang ditampilkan lewat monitor.

Untuk membuat antarmuka yang baik dibutuhkan pemahaman beberapa bidang ilmu, di antaranya adalah:

1) Teknik elektronika & ilmu komputer memberikan kerangka kerja untuk dapat merancang sistem HCI.

2) Psikologi memahami sifat & kebiasaan, persepsi & pengolahan kognitif, keterampilan motorik pengguna.

10

2.3.1 Aspek Ilmu Komputer

Untuk mendukung desainer dalam pertimbangan pengguna, sejumlah panduan telah diterbitkan selama bertahun-tahun. Panduan tersebut bertujuan untuk mengarahkan desainer dengan membuat mereka tetap di jalur untuk mengembangkan kualitas antarmuka pengguna sesuai dengan standar yang ada. Menurut Picking, Grout, McGinn, Crisp, & Grout (2010) terdapat beberapa panduan desain antarmuka di antaranya adalah Shneiderman’s eight golden rules of interface design, Constantine and Lockwood’s user interface design principles

dan Nielsen’s usability heuristics.

Prinsip dari Constantine and Lockwood’s user interface design principles

yaitu:

1) The structure principle (prinsip struktur)

Rancangan user interface seorang UI Designer harus terorganisasi. Menurut Kamus Besar Bahasa Indonesia, arti kata terorganisasi adalah telah disusun dan diatur di suatu kesatuan dalam konteks ini penempatan button

disesuaikan dengan kategori. Tampilan yang konsisten yaitu warna sama, bentuk button sama, jenis font sama.

2) The simplicity principle (prinsip kesederhanaan)

Tampilan antarmuka yang sederhana yang berkomunikasi dengan bahasa pengguna yaitu informasi menggunakan bahasa Indonesia

3) The visibility principle (prinsip visibilitas)

Rancangan harus memberikan informasi ketika aplikasi telah merespon yaitu terdapat loading Indicator.

4) The feedback principle (prinsip timbal balik)

Rancangan harus tetap memberitahui pengguna atas segala aksi atau segala tindakan yaitu terdapat error handling.

2.3.2 Aspek Psikologi

Aspek Psikologi dalam IMK adalah memahami sifat, kebiasaan, persepsi & pengolahan kognitif, serta keterampilan motorik pengguna yang meliputi: 1) Warna

Menurut Kobayashi, Ogata, & Lowitz (1999) anak-anak dan remaja tertarik terhadap warna cerah. Yang termasuk warna cerah adalah merah, kuning, hijau, biru, ungu dan juga warna-warna muda. Warna dapat didefinisikan secara obyektif/fisik sebagai sifat cahaya yang dipancarkan, atau secara subyektif/psikologis sebagai bagian dari pengalaman indera penglihatan. Lebih lanjut dikatakan oleh Dreyfuss (1972), bahwa warna digunakan dalam simbol-simbol grafis untuk mempertegas maksud dari simbol-simbol-simbol-simbol tersebut. Indeks warna merupakan suatu usaha untuk mengidentifikasi corak warna yang serasi untuk aplikasi (Danger, 1992).

a. Kelompok Hijau

Hijau merupakan latar belakang yang kalem, sejuk, segar dan lembut. Hijau sangat serasi dipadukan dengan kuning, biru dan cokelat tetapi condong memodifikasi warna lainnya. Dikarenakan sifatnya yang alamiah, hijau merupakan warna yang penting dan dapat mendominasi mata tanpa mengganggunya. Variasi warna muda dapat menarik muda-mudi.

12

b. Kelompok Merah

Warna yang paling mudah untuk diidentifikasi dan paling menarik perhatian. Menarik muda-mudi dan orang tua, tetapi sangat baik ditujukan pada muda-mudi. Merah kuning paling istimewa mendapatkan perhatian. Merah di atas hijau, hijau di atas merah, dan merah di atas kuning merupakan kombinasi yang paling terbaca.

c. Kelompok Kuning

Kuning serasi dengan oranye dan cokelat, dan juga dengan hijau. Kuning tampak tajam, bersudut dan renyah. Mata terfokus pada kuning secara jelas tanpa menyimpang dan tampak jelas di tempat gelap. Orang muda menyukai bidang kuning yang luas dan kuning sangat menarik muda-mudi, khususnya yang masih muda sekali. Bagus sekali untuk menarik perhatian, tetapi hindari kuning kasar. d. Kelompok Cokelat

Cokelat adalah warna netral yang dapat bercampur dengan baik bersama

warna apapun. Cokelat adalah warna komposit, dibuat dengan menggabungkan

merah, kuning dan hitam. Dalam model warna RGB , yang menggunakan warna merah, hijau dan biru. Kehadiran warna cokelat yang redup menyeimbangkan warna cerah yang ada. Cokelat memiliki sifat warna yang menenangkan.

e. Kelompok Biru

Biru serasi dengan violet dan hijau. Dapat terlihat segar dan jernih tetapi bisa menjadi lebih kalem dan redup jika kurang cermat penggunaannya. Biru redup kelihatan sangat kalem. menarik muda-mudi, mereka menyenangi biru yang mencolok.

f. Kelompok Ungu

Warna ungu adalah campuran warna merah dan biru, dengan menggunakan warna ungu kita bisa memberikan kesan menarik dan unik pada aplikasi, baik untuk digunakan secara overall atau hanya sebagai pemanis saja.

Menurut Santoso (2009) menggunakan warna secara berlebihan tidak dianjurkan. Barangkali aturan yang terbaik adalah menggunakan warna secara berpasangan. Penggunaan warna terutama ditujukan untuk menarik perhatian atau untuk pengelompokan informasi. Kelompokkan elemen-elemen yang saling berkaitan dengan latar belakang yang sama. Warna yang sama diartikan membawa pesan yang serupa. Kecerahan akan menarik perhatian. Warna hangat dan dingin sering digunakan untuk menunjukkan tingkat tindakan. Warna yang hangat biasanya digunakan untuk menunjukkan adanya tindakan atau tanggapan yang diperlukan. Warna yang dingin biasanya digunakan untuk menunjukkan status atau informasi latar belakang.

2) Bahasa

Anak-anak dan remaja Indonesia berkomunikasi menggunakan bahasa Indonesia. Bahasa Indonesia merupakan bahasa umum yang mereka gunakan dalam penyampaian informasi. Karena di sekolah mereka mendapatkan mata pelajaran bahasa Indonesia. Penyampaian informasi menggunakan bahasa Indonesia akan lebih cepat diterima oleh mereka.

3) Bentuk

Menurut Clements & Sarama (2000) anak-anak lebih akurat mengidentifikasi bentuk-bentuk melingkar. Bentuk melingkar yang lebih disukai

14

anak-anak adalah bentuk yang bulat ataupun tumpul di tiap-tiap ujungnya (Nusantara & Irawan, 2012).

2.3.3 Aspek Tipografi

Menurut Kusrianto (2004) tipografi adalah ilmu tentang huruf yang mempelajari bentuk huruf, di mana huruf, angka, tanda baca, dan sebagainya tidak hanya dilihat sebagai simbol dari suara tetapi terutama dilihat sebagai suatu bentuk desain. Tipografi digunakan untuk membuat desain yang indah dan berkomunikasi. Jenis huruf yang cocok untuk anak-anak dan remaja adalah jenis huruf yang mudah terbaca (Fonts.com).

Dalam sebuah rancangan tipografi, sebisa mungkin minimalkan jumlah jenis huruf yang akan dipakai dengan cara memanfaatkan keluarga huruf yang tersedia. Sans-serif adalah huruf yang paling tepat untuk digunakan. Keluarga

sans-serif memiliki tingkat keterbacaan yang baik. Karena huruf ini tetap nyaman dibaca di layar monitor. Sans-serif juga cocok untuk judul, karena mereka cukup menonjol dan mudah dibaca dari jauh.

Penggunaan huruf besar semua sebagai judul atau subjudul memang tidak terhindarkan, dan ini memang memiliki kekuatan tersendiri jika dipergunakan pada teks yang tidak terlalu panjang. Kata-kata yang diketikkan dengan huruf besar dapat memberi tekanan maupun aksen pada makna.

2.4 Logika Latihan Soal

Terdapat kumpulan soal pada tabel dengan id soal 1- 20. Proses selanjutnya pada PHP adalah membuat kumpulan angka acak sejumlah 5 dari angka 1-20, kumpulan angka tersebut tidak boleh memiliki id soal yang sama

dan disimpan pada array. Selanjutnya mengambil angka acak, setelah mendapat 1 nilai angka acak kemudian dicek di dalam array apakah data acak yang baru didapatkan sudah ada di array, kalau belum ada langsung disimpan di dalam

array tetapi kalau sudah ada maka akan di ulang proses mengambil nilai acak. Proses tersebut diulang sampai jumlah data nilai acak yang disimpan di array berjumlah 5. Selanjutnya setelah mendapatkan 5 nilai di dalam array, nilai tersebut dijadikan string. String digunakan untuk mengambil soal berdasarkan id soal menggunakan query select *. Setelah itu akan ditampilkan ke layar dengan menggunakan JQuery Mobile. Random soal pada PHP menggunakan mt_rand() function.

2.5 JavaScript

JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Secara fungsional, JavaScript digunakan untuk menyediakan akses

script pada objek yang dibenamkan. Contoh sederhana dari penggunaan

JavaScript adalah membuka halaman popup, fungsi validasi pada form sebelum data dikirimkan ke server, dan lain lain. JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil (Negrino & Smith, 2007).

2.5.1 JQuery Mobile

JQuery adalah sebuah framework berbasiskan JavaScript. JQuery sama

dengan JavaScript library yaitu kumpulan kode atau fungsi JavaScript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascrip.

JQuery pertama kali dirilis pada tahun 2006 oleh John Resig dan JQuery mobile

16

JQuery Mobile adalah sistem antarmuka pengguna berbasis HTML5

dirancang untuk membuat situs web responsif dan aplikasi yang dapat diakses pada semua smartphone, tablet dan desktop yang perangkat. Hal ini dibangun pada JQuery Mobile rock-solid dan yayasan JQuery Mobile UI, dan menawarkan navigasi Ajax dengan transisi halaman, sentuh acara, dan berbagai widget. Kode ringan dibangun dengan peningkatan progresif, dan fleksibel (JQuery Mobile, 2014).

2.6 CSS

Menurut Saputra & Agustin (2011) CSS atau yang memiliki kepanjangan

Cascading Style Sheet merupakan suatu bahasa pemrograman web yang

digunakan untuk mengendalikan dan membangun berbagai komponen dalam web

sehingga tampilan web akan lebih rapi, terstruktur, dan seragam. CSS difungsikan sebagai penopang atau pendukung, dan pelengkap dari file HTML yang berperan dalam penataan kerangka dan layout. CSS mampu berjalan di berbagai platform, maksudnya dapat dijalankan pada berbagai macam sistem operasi dan web browser.

2.7 HTML

Menurut sidik & Pohan (2007) HTML kependekan dari Hyper Text

Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat

dengan editor teks sembarang. Dokumen ini dikenal sebagai web page. Dokumen ini pada umumnya berisi informasi atau interface aplikasi di dalam internet.

Dokumen html disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Beberapa contoh

elemen adalah: head, body, table, paragraf, dan list. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya.

2.8 PHP

Menurut dokumen resmi PHP, PHP merupakan singkatan dari PHP

Hypertext Preprocessor. PHP merupakan bahasa berbentuk skrip yang

ditempatkan di dalam server dan diproses di server. Secara khusus, PHP dirancang untuk membentuk aplikasi web dinamis. Artinya, PHP dapat membentuk suatu tampilan berdasarkan permintaan terkini. Misalnya, pengguna dapat menampilkan isi suatu database pada halaman web. Pada prinsipnya PHP mempunyai fungsi yang sama dengan skrip-skrip seperti ASP (Active Server Page), ColdFusion, ataupun Perl. Namun perlu diketahui bahwa PHP sebenarnya dapat dipakai secara command line, artinya skrip PHP dapat dijalankan tanpa melibatkan web server maupun webbrowser.

Salah satu kelebihan dari PHP adalah kemampuan untuk berkomunikasi dengan berbagai database terkenal. Dengan demikian, menampilkan data yang bersifat dinamis yang diambil dari database merupakan hal yang mudah untuk diimplementasikan. Itulah sebabnya sering dikatakan bahwa PHP sangat cocok untuk membangun halaman-halaman web dimanis.

Pada saat ini PHP sudah dapat berkomunikasi dengan berbagai database

meskipun dengan kelengkapan yang berbeda-beda. Beberapa jenis database yang dapat terhubung dengan PHP di antaranya adalah (Kadir, 2008):

1) Informix

2) Microsoft Access

18

4) MySQL

5) Oracle

2.9 Testing dan Implementasi Sistem

Menurut (Pressman, 2001) Testing merupakan elemen penting untuk jaminan kualitas perangkat lunak dan merupakan tinjauan akhir dari spesifikasi, desain, dan pembuatan kode. Dalam standart ANSI/IEEE 1059, testing adalah proses menganalisa suatu entitas software untuk mendeteksi perbedaan antara kondisi yang ada dengan kondisi yang diinginkan (defects/error/bugs) dan mengevaluasi fitur-fitur dari entitas software.

Beberapa pandangan praktisi tentang testing adalah sebagai berikut :

• Melakukan cek pada program terhadap spesifikasi

• Menemukan bug pada program.

• Menentukan penerimaan dari pengguna.

• Memastikan suatu sistem siap digunakan.

• Memperlihatkan bahwa program berkerja dengan benar.

• Membuktikan bahwa error tidak terjadi.

• Mengetahui akan keterbatasan sistem.

• Mempelajari apa yang tak dapat dilakukan oleh sistem.

• Melakukan evaluasi kemampuan sistem.

• Verifikasi dokumen.

• Memastikan bahwa pekerjaan telah diselesaikan.

Menurut Beizer (1995) Black-Box Testing terfokus pada spesifikasi fungsional dari perangkat lunak. Tester dapat mendefinisikan kumpulan kondisi input dan melakukan pengetesan pada spesifikasi fungsional program. Black Box

Testing bukanlah solusi alternatif dari White-Box Testing tapi lebih merupakan pelengkap untuk menguji hal-hal yang tidak dicakup oleh White-Box Testing.

Black-Box Testing cenderung untuk menemukan hal-hal berikut:

• Fungsi yang tidak benar atau tidak ada

• Kesalahan antarmuka (interface errors)

• Kesalahan pada struktur data dan akses basis data

• Kesalahan performasi (performance errors) • Kesalahan inisialisasi dan terminasi.

BAB III

ANALISIS DAN PERANCANGAN SISTEM

Metodologi penelitian pada Tugas Akhir dengan judul Rancang Bangun Antarmuka Aplikasi Pepak Bahasa Jawa Berbasis Android mencakup beberapa hal, yaitu: analisis permasalahan, perancangan sistem dan desain uji coba.

3.1 Analisis Permasalahan

Dalam menganalisis permasalahan antarmuka aplikasi pepak bahasa Jawa berbasis Android perlu mengidentifikasi masalah terlebih dahulu. Setelah mengidentifikasi masalah, kemudian menganalisis kebutuhan pengguna yang merupakan kalangan anak-anak dan remaja.

3.1.1 Identifikasi Masalah

Pepak adalah kata bahasa Jawa yang jika diterjemahkan ke bahasa Indonesia artinya pengetahuan. Pepak pada umumnya menjadi penunjang mata pelajaran muatan lokal bahasa Jawa untuk SD dan SMP dalam bentuk buku, yang berisi kumpulan sari-sari atau isi dari bahasa Jawa. Setelah mengamati salah satu buku pepak karangan M. Tofani dan Suryo Subroto maka IMK pepak saat ini memiliki karakteristik seperti hanya berisi teks, warna hitam putih dan juga minim gambar.

Seiring perkembangan teknologi saat ini, materi pepak dapat disajikan dalam bentuk aplikasi pada smartphone. Tetapi karakteristik dalam buku tersebut tidak sesuai dengan teori dalam pembuatan aplikasi. Suatu aplikasi harus memiliki tampilan yang konsisten, terdapat informasi dalam bahasa Indonesia, adanya respons dan juga feedback dari aplikasi.

3.1.2 Identifikasi Kebutuhan

Berdasarkan identifikasi permasalahan, dapat disimpulkan bahwa diperlukan suatu aplikasi yang memuat materi pepak yang memiliki antarmuka mengacu pada teori dari Constantine and Lockwood’s user interface design principles. Dalam mengidentifikasi kebutuhan, harus diketahui pengguna yang berinteraksi langsung dengan sistem, yaitu kalangan anak-anak dan remaja. Di bawah ini adalah tabel yang menunjukkan indikator yang digunakan dalam membuat antarmuka sesuai dengan teori.

Tabel 3.1 Data Indikator Aspek

IMK

Constantine and Lockwood’s user interface design principles. The structure principle The simplicity principle The visibility principle The feedback principle Aspek Psikologi Warna (hijau, merah, kuning, cokelat, biru, ungu) Bentuk Button

berujung tumpul Menggunakan informasi bahasa Indonesia Bentuk loading indikator bulat Informasi menggunakan bahasa Indonesia, ilustrasi gambar dan suara Aspek Tipografi

Jenis font (sans-serif) di semua menu, sub menu, detil sub menu

Jenis font yang digunakan untuk informasi adalah sans-serif

- Jenis font

yang digunakan pada error handling

adalah sans-serif

Aplikasi ini dibangun dengan menggunakan HTML dan JQueryMobile.

HTML digunakan untuk membuat tampilan pada aplikasi antarmuka pepak bahasa Jawa. JQueryMobile digunakan untuk code program aplikasi antarmuka pepak bahasa Jawa yang akan dipasang pada smartphone.Keunggulan HTML dan

22

aplikasi dan bersifat open source, sehingga modul yang ada akan terus dikembangkan oleh banyaknya developer.

3.2 Perancangan Sistem

Berdasarkan analisis yang telah dilakukan, maka perancangan antarmuka dikalsifikasikan menjadi 3 yaitu:

1. Menu

Berisi kategori – kategori yang terdapat dalam pepak yaitu: rupa kawruh, kawruh basa, kesusastraan, pewayangan, latihan soal dan pencarian.

2. Sub Menu

Berisi sub kategori yang sesuai dengan kategori dalam pepak di antaranya yaitu: arane anak kewan, swarane kewan, arane wit, arane woh dll.

3. Detil Sub Menu

Berisi detil dari sub kategori dalam pepak di antaranya yaitu: anak ampal, anak asu, anak gajah dll.

Rancangan sistem tersebut akan disesuaikan dengan teori antarmuka yang digunakan. Untuk lebih jelasnya dapat dilihat pada tabel 3.2.

Tabel 3.2 Kesesuaian Rancangan Antarmuka Kesesuaian rancangan

Antarmuka

Indikator

Menu - bentuk button pada sisi ujungnya tumpul - warna hijau pada background

- warna hijau pada kategori rupa kawruh - warna merah pada kategori kawruh basa - warna kuning pada kategori kesusastraan - warna cokelat pada kategori pewayangan - warna biru pada kategori latihan soal - warna ungu pada kategori pencarian kata - menggunakan informasi bahasa Indonesia - bentuk loading indicator bulat

Tabel 3.2 (Lanjutan) Kesesuaian rancangan

IMK

Indikator

Sub Menu - bentuk button pada sisi ujungnya tumpul - warna hijau pada background

- warna hijau pada kategori rupa kawruh - warna merah pada kategori kawruh basa - warna kuning pada kategori kesusastraan - warna cokelat pada kategori pewayangan - warna biru pada kategori latihan soal - warna ungu pada kategori pencarian kata - menggunakan informasi bahasa Indonesia - bentuk loading indicator bulat

- menggunakan jenis font sans-serif

Detil Sub Menu - bentuk button pada sisi ujungnya tumpul - warna hijau pada background

- warna hijau pada kategori rupa kawruh - warna merah pada kategori kawruh basa - warna kuning pada kategori kesusastraan - warna cokelat pada kategori pewayangan - warna biru pada kategori latihan soal - warna ungu pada kategori pencarian kata - menggunakan informasi bahasa Indonesia - bentuk loading indicator bulat

- menggunakan jenis font sans-serif - ilustrasi gambar sesuai dengan isi konten - ilustrasi suara sesuai dengan isi konten

Berdasarkan rancangan di atas aplikasi pepak bahasa Jawa ini mempunyai struktur navigasi yang menu utama adalah pusat navigasi yang merupakan penghubung ke semua fitur pada aplikasi. Menu kategori bisa dipilih melalui menu awal terlebih dahulu. Navigasi dapat dilakukan dengan menggunakan sentuhan pada layar dikarenakan sistem operasi Android sudah mendukung fitur layar sentuh kapasitif. Sistem navigasi aplikasi ini digambarkan seperti pada gambar 3.1.

24 Menu Rupa-rupa Kawruh Latihan Soal Pewayangan Kasusastraan Kawruh Basa

1. Tembung ngoko-krama-krama inggil 2. Tembung padha tegese 3. Tembung kosok balen 4. Tembung saroja 5. Tembung plutan 6. Tembung entar 7. Tembung garba 8. Tembung dasa nama 9. Yogyaswara 10. Tembung basa kawi 11. Tembung camboran wutuh

12. Tembung camboran cekak-wancah-tugel 13. Tembung kerata basa

14. Tembung rura basa 15. Tegese tembung-tembung 16. Tembung mbangetake 17. Tembung sanalika

1. Arane anak kewan 2. Arane turunane kewan 3. Swarane Kewan 4. Swara ngundang kewan 5. Kabiyasan solahe kewan 6. Arane gaman kewan 7. Sebutane mangan 8. Ulese/rupane kewan 9. Arane wit 10. Arane godhong 11. Arane Kembang 12. Arane pentil 13. Arane woh 14. Arane Isi 15. Arane anak wong 16. Urut-urutane turunan 17. Urutane sadulur 18. Prenahe sadulur 19. Arane wong 20. Wilangan 21. Candrane manungso 22. Cacade awak

23. Tumrap kabiyasaane awak 24. Pepindhan

25. Sanepan 26. Arane panggawean 27. Arane panggonan 28. Rasane apa 29. Amabune apa 30. Tanpa apa 31. Kaya apa

1. Paribasan, bebasan, sanepan, saloka 2. Purwakanthi 3. Wangsalan 4. Parikan 5. Cangkriman 6. Tembang 1. Gamelan

2. Arane ratu lan negarane 3. Arane pandhita lan pertapane 4. Arane satriya lan kasatriyane 5. Arane gaman

6. Arane abdi kinasih

Pencarian

Gambar 3.1 Struktur Navigasi Aplikasi Antarmuka Pepak Bahasa Jawa Berbasis Android

3.2.1 Use Case Diagram

Setelah merancang struktur navigasi selanjutnya merancang use case diagram. Use case diagram memberikan tinjauan grafis dari semua atau beberapa

actor, use case, dan interaksi di antara keduanya untuk suatu sistem. Use case diagram aplikasi ini digambarkan seperti pada gambar 3.2.

Gambar 3.2 Use Case Diagram Aplikasi Antarmuka Pepak Bahasa Jawa Berbasis Android

Dalam use case diagram tersebut dapat terlihat beberapa use case yang merupakan aktivitas yang dapat dilakukan oleh pengguna. Terdapat beberapa use case yaitu use case melihat kategori, use case melihat sub kategori, use case

melihat detil sub kategori, use case mencari kata, dan use case mengerjakan latihan soal.

Tabel 3.3 Daftar Use Case Diagram

Aktor Use Case Keterangan

Pengguna _{Melihat Kategori Proses untuk mengakses menu kategori} Meihat sub

kategori Proses untuk mengakses menu sub kategori. Melihat detil sub

kategori

Proses untuk mengakses menu detil sub kategori.

Mengerjakan Latihan soal

Latihan soal dapat menampilkan evaluasi dari isi pepak berupa soal-soal pilihan ganda. Mencari kata Proses yang digunakan untuk melakukan

pencarian kata yang ada di aplikasi.

Melihat Detil Sub Kategori Melihat Kategori

Mencari kata

Mengerjakan Latihan Soal Melihat Sub Kategori

26

3.2.2 Activity Diagram

Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir. Activity diagram dapat menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi.

Activity diagram merupakan state diagram khusus, di mana sebagian besar state adalah action dan sebagian besar transisi di-trigger oleh selesainya

state sebelumnya (internal processing). Oleh karena itu activity diagram tidak menggambarkan behaviour internal sebuah sistem (dan interaksi antar subsistem) secara eksak, tetapi lebih menggambarkan proses-proses dan jalur-jalur aktivitas dari level atas secara umum. Activity diagram pada aplikasi ini dibagi menjadi beberapa activity diagram sebagai berikut:

A. Activity Diagram Melihat Kategori

Activity diagram melihat kategori menggambarkan aktivitas yang

dilakukan pengguna dan sistem pada aplikasi. Setelah masuk ke menu utama pengguna bisa memilih kategori yang ada. Setelah melakukan pemilihan kategori, aplikasi akan menampilkan beberapa pilihan sub kategori dan pengguna dapat memilih sub kategori sesuai yang diinginkan setelah itu aplikasi akan menampilkan sub kategori yang dipilih pengguna. Activity diagram dapat dilihat pada gambar 3.3.

Gambar 3.3 Activity Diagram Melihat Kategori B. Activity Diagram Melihat Sub Kategori

Activity diagram melihat sub kategori menggambarkan aktivitas yang dilakukan pengguna dan sistem pada aplikasi. Setelah aplikasi menampilkan sub kategori yang ada pengguna dapat memilih sub kategori sesuai yang diinginkan. Setelah itu aplikasi akan menampilkan detil sub kategori dan pengguna bisa memilih detil yang akan dipilih. Activity diagram dapat dilihat pada gambar 3.4.

28

Gambar 3.4 Activity Diagram Melihat Sub Kategori C. Activity Diagram Melihat Detil Sub Kategori

Activity diagram lihat detil sub kategori menggambarkan aktivitas yang dilakukan pengguna dan sistem pada aplikasi. Setelah aplikasi menampilkan detil sub kategori yang ada pengguna dapat memilih detil sub kategori sesuai yang diinginkan. Setelah itu aplikasi akan menampilkan output detil sub kategori.

Gambar 3.5 Activity Diagram Melihat Detil Sub Kategori D. Activity Diagram Mengerjakan Latihan Soal

Activity diagram mengerjakan latihan soal dapat melakukan proses

menampilkan latihan soal berupa pilihan ganda. Pengguna dapat memilih kategori latihan soal pada menu utama Activity diagram latihan soal dapat dilihat pada gambar 3.6.

30

Gambar 3.6 Activity Diagram Mengerjakan Latihan Soal

E. Activity Diagram Mencari Kata

Activity diagram mencari kata menggambarkan aktivitas yang dilakukan oleh pengguna dan sistem pencarian kata pada aplikasi. Saat melakukan proses pencarian kata, pengguna harus memasukkan kata yang ingin dicari dan sistem akan menampilkan kata yang dicari. Activity diagram mencarian kata dapat dilihat pada gambar 3.7.

Gambar 3.7 Activity Diagram Mencari Kata 3.2.3 Sequence Diagram

Sequence diagram dapat menggambarkan jalannya suatu proses yang

melibatkan objek dari class dalam aplikasi. Untuk lebih detilnya dijelaskan sebagai berikut:

Sequence Diagram Melihat Kategori

Sequence diagram melihat kategori menjelaskan bagaimana proses ketika pengguna memilih kategori. Setelah melakukan pemilihan kategori, aplikasi akan menampilkan beberapa pilihan sub kategori dan pengguna dapat memilih sesuai yang diinginkan. Sequence diagram dapat dilihat pada gambar 3.8.

32

Gambar 3.8 Sequence Diagram Melihat Kategori Sequence Diagram Melihat Sub Kategori

Sequence diagram melihat sub kategori menjelaskan bagaimana proses ketika pengguna memilih sub kategori. Setelah melakukan pemilihan sub kategori, aplikasi akan menampilkan beberapa pilihan detil sub kategori dan pengguna dapat memilih sesuai yang diinginkan. Sequence diagram dapat dilihat pada gambar 3.9.

Gambar 3.9 Sequence Diagram Melihat Sub Kategori

: Pengguna : Kategori : Form : DataKategori

Kategori( )

getId( ) getNamaKategori( ) getNamaKategoriIndo( )

displayKategori( )

Result( )

: Pengguna : Sub Kategori : Form : DataSubKategori SubKategori( )

getNamaSubKategori( ) getIdKategori( ) setKataKunci( )

displaySubKategori( ) Result( )

Sequence Diagram Melihat Detil Sub Kategori

Sequence diagram melihat detil sub kategori menjelaskan bagaimana proses ketika pengguna memilih detil sub kategori. Setelah melakukan pemilihan detil sub kategori, aplikasi akan menampilkan output dari detil sub menu yang dipilih. Sequence diagram dapat dilihat pada gambar 3.10.

Gambar 3.10 Sequence Diagram Melihat Detil Sub Kategori Sequence Diagram Mengerjakan Latihan Soal

Sequence diagram mengerjakan latihan soal menjelaskan bagaimana

proses ketika pengguna memilih menu latihan soal. Pengguna dapat menjawab pertanyaan yang terdapat pada menu latihan soal. Sequence diagram tersebut dapat dilihat pada gambar 3.11.

: Pengguna : Detil Sub Kategori : Form : DataDetilSubKategori

DetilSubKategori( )

getIdSubKategori( )

getIsi( ) getArti( ) setKataKunci( )

displayIsi( ) displayArti( )

34

Gambar 3.11 Sequence Diagram Mengerjakan Latihan Soal Sequence Diagram Mencari Kata

Sequence diagram mencarian kata menjelaskan bagaimana proses ketika pengguna melakukan pencarian kata. Saat melakukan proses pencarian kata, pengguna harus memasukkan kata yang ingin dicari dan sistem akan menampilkan kata yang dicari. Sequence diagram pencarian kata dapat dilihat pada gambar 3.12.

Gambar 3.12 Sequence Diagram Mencari Kata

: Pengguna : Latihan Soal : Form : DataLatihanSoal

LatihanSoal( ) _{getSoal( )}

jawabSoal( )

displayHasilLat( )

Result( )

: Pengguna : Pencarian Kata : Form : DataPencarian

1: Pencarian( )

2: setkatakunci( )

5: Result

4: displayHasilPencarian( ) 3: getPencarian( )

3.2.4 Class Diagram

Class diagram merupakan sebuah diagram yang memvisualisasikan

setiap kelas yang dibuat. Class diagram memperlihatkan hubungan antar kelas dan penjelasan detil tiap kelas yang digunakan. Melalui class diagram dapat diketahui variabel-variabel yang ada dalam kelas tersebut serta operasi-operasi yang dapat dilakukan oleh masing-masing kelas. Class diagram pada aplikasi ini dibagi menjadi beberapa class diagram sebagai berikut:

A. Class Diagram Main

Kelas Main digunakan sebagai form utama pada mobile application. Kelas ini mengkoordinasikan beberapa operasi seperti inisialisasi data awal saat aplikasi dijalankan, penentuan tampilan awal aplikasi, dan lainnya. Dengan kata lain kelas ini digunakan sebagai penghubung dengan kelas-kelas yang lain. Untuk lebih jelasnya dapat dilihat pada gambar 3.13.

36

B. Class Diagram Kategori

Class diagram kategori merupakan class yang digunakan menampilkan kategori. Class diagram kategori pada aplikasi ini dapat dilihat pada gambar 3.14.

Gambar 3.14 Class Diagram Kategori C. Class Diagram Sub Kategori

Class diagram sub kategori merupakan class yang digunakan

menampilkan sub kategori. Class diagram sub kategori pada aplikasi ini dapat dilihat pada gambar 3.15.

D. Class Diagram Detil Sub Kategori

Class diagram detil sub kategori merupakan class yang digunakan

menampilkan detil sub kategori. Class diagram detil sub kategori pada aplikasi ini dapat dilihat pada gambar 3.16.

Gambar 3.16 Class Diagram Detil Sub Kategori E. Class Diagram Soal Latihan

Class diagram latihan soal merupakan class yang digunakan menampilkan latihan soal. Class diagram latihan soal pada aplikasi ini dapat dilihat pada gambar 3.17

38

3.2.5 Struktur Tabel

Tabel-tabel yang digunakan dalam aplikasi antarmuka pepak bahasa Jawa adalah sebagai berikut:

1. Nama Tabel : Kategori

Fungsi : Menyimpan data kategori. Tabel kategori terdiri dari 3

field yaitu ID_Kategori dan Nama_Kategori, Nama_Kategori_Indo. Tabel 3.4 Struktur Tabel Kategori

Nama Kolom Tipe Ukuran Keterangan

ID_Kategori Integer 20 PK

Nama_Kategori Text - Nama Bab Bahasa Jawa

Nama_Kategori_Indo Text - Nama Bab Bahasa Indonesia

2. Nama Tabel : Sub_Kategori

Fungsi : Menyimpan data-data sub kategori. Tabel sub kategori terdiri dari 4 field yaitu ID_Sub_Kategori, ID_Kategori, Nama_Sub_Kategori, dan Nama_Sub_Kategori_Indo.

Tabel 3.5 Struktur Tabel Sub_Kategori

Nama Kolom Tipe Ukuran Keterangan

ID_Sub_Kategori Integer 20 PK

ID_Kategori Integer 20 FK

Nama_Sub_Kategori Text - Nama Sub Bahasa Jawa

3. Nama Tabel : Detil_Sub_Kategori

Fungsi : Menyimpan data-data isi dari pepak. Tabel terdiri dari 8

field yaitu ID_Detil_Isi, ID_Sub_Kategori, ID_Kategori, Isi, Arti, Suara, Gambar1, Gambar2.

Tabel 3.6 Struktur Tabel Detil_Sub_Kategori

4. Nama Tabel : Soal_Latihan

Fungsi : Menyimpan data-data Isi. Tabel Post2 terdiri dari 6 field

yaitu ID_Soal, Soal, Jwb_A, Jwb_B, Jwb_C, Jwb_D, Jwb_Benar. Tabel 3.7 Struktur Tabel Soal_latihan

Nama Kolom Tipe Ukuran Keterangan

ID_Soal Integer 20 PK

ID_DETIL_ISI Integer 20 FK

Soal Text - Soal latihan

Nama Kolom Tipe Ukuran Keterangan

ID_Detil_Isi Integer 20 PK

ID_Sub_Kategori Integer 20 FK

ID_Kategori Integer 20 FK

Isi Text - Isi Bahasa Jawa

Arti Text - Isi Bahasa Indonesia

Suara Text - Suara

Gambar1 Text - Gambar

40

Tabel 3.7 (Lanjutan)

Nama Kolom Tipe Ukuran Keterangan

Jwb_A Text - Pilihan jawaban A

Jwb_B Text - Pilihan jawaban B

Jwb_C Text - Pilihan jawaban C

Jwb_D Text - Pilihan jawaban D

Jwb_Benar Text - Pilihan jawaban benar

3.2.6 Perancangan Antarmuka

Perancangan antarmuka memvisualisasikan tampilan dari aplikasi. Antarmuka aplikasi pepak bahasa Jawa dibagi menjadi beberapa bagian sebagai berikut:

A. Rancangan Tampilan Pembuka

Rancangan tampilan pembuka adalah rancangan tampilan saat aplikasi pertama dimulai. Pada rancangan tampilan pembuka terdapat sebuah label yang berisi nama aplikasi serta gambar logo aplikasi. Rancangan tampilan pembuka dapat dilihat pada gambar 3.18.

Logo

Warna background hijau

B. Rancangan Tampilan Menu Utama

Rancangan tampilan menu utama merupakan rancangan tampilan saat menu utama ditampilkan. Halaman ini menampilkan 6 menu yaitu menu rupa kawruh, kawruh basa, kasusastraan, pewayangan, dan latihan soal. Rancangan tampilan menu utama dapat dilihat pada gambar 3.19.

Logo Pencarian Kawruh Basa Rupa Kawruh Kasusastraan Latihan Soal

Warna background hijau

Pewayangan Warna ungu Warna hijau Warna merah Warna kuning Warna cokelat Warna biru

Informasi bahasa Indonesia

Jenis font Sans-Serif

Gambar 3.19 Rancangan Tampilan Menu Utama C. Rancangan Tampilan Sub Menu Rupa Kawruh

Rancangan tampilan sub menu rupa kawruh merupakan rancangan tampilan setelah pengguna memilih menu rupa kawruh pada menu utama. Halaman ini menampilkan sub menu arane anak kewan, arane turunane kewan, swarane kewan, swara ngundang kewan, kabiyasan solahe kewan, arane gaman kewan, sebutane mangan, ulese/rupane kewan, arane wit, arane godhong, arane kembang, arane pentil, arane woh, arane isi, arane anak wong, prenahe sadulur, arane wong, wilangan, candrane manungsa, cacade awak, tumrap kabiasaane awak, arane panggaweyan, arane panggonan, pepindhan. Rancangan tampilan sub menu dapat dilihat pada gambar 3.20.

42

Pencarian...

Sub Menu 1

Sub Menu 10 Sub Menu 9 Sub Menu 8 Sub Menu 7 Sub Menu 6 Sub Menu 5 Sub Menu 4 Sub Menu 3 Sub Menu 2

Judul Menu

Warna background hijau

Warna border

button Hijau

Informasi bahasa Indonesia

Jenis font Sans-Serif

Warna border textbox Ungu

Gambar 3.20 Rancangan Tampilan Sub Menu Rupa Kawruh D. Rancangan Tampilan Detil Sub Menu Rupa Kawruh

Rancangan tampilan detil sub menu merupakan rancangan tampilan saat detil dari sub menu ditampilkan. Halaman ini menampilkan detil sub menu rupa kawruh, daftar detil sub menu diantaranya adalah anak ampal, anak sapi, swara sapi dll. Jika salah satu dari list detil sub menu pada halaman ini ditekan akan muncul popup berupa tampilan isi dari detil yang dipilih Rancangan tampilan detil sub menu utama dapat dilihat pada gambar 3.21.

Jika ditekan muncul pop-up Pencarian...

Detil Sub Menu 1

Detil Sub Menu 10 Detil Sub Menu 9 Detil Sub Menu 8 Detil Sub Menu 7 Detil Sub Menu 6 Detil Sub Menu 5 Detil Sub Menu 4 Detil Sub Menu 3 Detil Sub Menu 2 Judul Sub Menu

ISI DETIL

Warna border button Hijau Warna background hijau

Warna border textbox Ungu

Informasi bahasa Indonesia Jenis font Sans-Serif

E. Rancangan Tampilan Sub Menu Kawruh Basa

Rancangan tampilan sub menu kawruh basa merupakan rancangan tampilan setelah pengguna memilih menu sub menu kawruh basa pada menu utama. Halaman ini menampilkan sub menu pepindhan, sanepan, tembung ngoko-krama-krama inggil (perangane awak), tembung ngoko-ngoko-krama-krama inggil (tembung-tembung liyane), tembung padha tegese, tembung kosok balen, tembung saroja, tembung plutan, tembung entar, tembung garba, tembung dasa nama, yogyaswara, tembung basa kawi, tembung camboran wutuh, tembung camboran cekak/camboran wancah/camboran tugel, kereta basa, tembung rurabasa, tegese tembung-tembung, tembung mbangetake, tembung sanalika, asane apa, ambune apa, tanpa apa, kaya apa. Rancangan tampilan sub menu dapat dilihat pada gambar 3.22.

Pencarian...

Sub Menu 1

Sub Menu 10 Sub Menu 9 Sub Menu 8 Sub Menu 7 Sub Menu 6 Sub Menu 5 Sub Menu 4 Sub Menu 3 Sub Menu 2

Judul Menu

Warna background hijau

Warna border

button Merah

Informasi bahasa Indonesia

Jenis font Sans-Serif

Warna border textbox Ungu

Gambar 3.22 Rancangan Tampilan Sub Menu Kawruh Basa F. Rancangan Tampilan Detil Sub Menu Kawruh Basa

Rancangan tampilan detil sub menu merupakan rancangan tampilan saat detil dari sub menu kawruh basa ditampilkan. Halaman ini menampilkan detil sub menu kawruh basa, daftar halaman detil sub menu kawruh basa di antaranya

44

adalah abang kumpul padha abang, abange, agunge, akehe pepati, akehe pepati, akehe lelara dll. Jika salah satu dari list detil sub menu pada halaman ini ditekan akan muncul popup berupa tampilan isi dari detil yang dipilih. Rancangan tampilan detil sub menu utama dapat dilihat pada gambar 3.23.

Jika ditekan muncul pop-up

Pencarian...

Detil Sub Menu 1

Detil Sub Menu 10 Detil Sub Menu 9 Detil Sub Menu 8 Detil Sub Menu 7 Detil Sub Menu 6 Detil Sub Menu 5 Detil Sub Menu 4 Detil Sub Menu 3 Detil Sub Menu 2

Judul Sub Menu

ISI DETIL

Warna border button merah Warna background hijau

Warna border textbox Ungu

Informasi bahasa Indonesia

Jenis font Sans-Serif

Gambar 3.23 Rancangan Tampilan Detil Sub Menu Kawruh Basa G. Rancangan Tampilan Sub Menu Kasusastraan

Rancangan tampilan sub menu rupa kasusastraan merupakan rancangan tampilan setelah pengguna memilih menu kasusastraan pada menu utama. Halaman ini menampilkan sub menu paribasan - bebasan - sanepan – saloka, paramasastra, silah-silahing tembung, purwakanthi, wangsalan, parikan, cangkriman, gamelan, gambar gamelan. Rancangan tampilan sub menu dapat dilihat pada gambar 3.24.

Pencarian...

Sub Menu 1

Sub Menu 10 Sub Menu 9 Sub Menu 8 Sub Menu 7 Sub Menu 6 Sub Menu 5 Sub Menu 4 Sub Menu 3 Sub Menu 2

Judul Menu Warna background hijau

Warna border button Kuning

Informasi bahasa Indonesia

Jenis font Sans-Serif

Warna border textbox Ungu

Gambar 3.24 Rancangan Tampilan Sub Menu Kasusastraan H. Rancangan Tampilan Detil Sub Menu Kasusastraan

Rancangan tampilan detil sub menu kasusastraan merupakan rancangan tampilan saat detil dari sub menu kasuastraan ditampilkan. daftar halaman detil sub menu kawruh basa diantarnya adalah adhang-adhang tetese embun, adigang-adigung-adiguna dll. Jika salah satu dari list detil sub menu pada halaman ini ditekan akan muncul popup berupa tampilan isi dari detil yang dipilih. Rancangan tampilan detil sub menu utama dapat dilihat pada gambar 3.25.

Jika ditekan muncul pop-up Pencarian...

Detil Sub Menu 1

Detil Sub Menu 10 Detil Sub Menu 9 Detil Sub Menu 8 Detil Sub Menu 7 Detil Sub Menu 6 Detil Sub Menu 5 Detil Sub Menu 4 Detil Sub Menu 3 Detil Sub Menu 2 Judul Sub Menu

ISI DETIL

Warna border button Kuning Warna background hijau

Warna border textbox Ungu

Informasi bahasa Indonesia Jenis font Sans-Serif

46

I. Rancangan Tampilan Sub Menu Pewayangan

Rancangan tampilan sub menu pewayangan merupakan rancangan tampilan setelah pengguna memilih menu rupa kawruh pada menu utama. Halaman ini menampilkan sub menu arane ratu lan negarane, arane pandhita lan partapane, arane satriya lan kasatriyane, arane gaman, arane abdi kinasih. Rancangan tampilan sub menu dapat dilihat pada gambar 3.26.

Pencarian...

Sub Menu 1

Sub Menu 10 Sub Menu 9 Sub Menu 8 Sub Menu 7 Sub Menu 6 Sub Menu 5 Sub Menu 4 Sub Menu 3 Sub Menu 2

Judul Menu

Warna background hijau

Warna border

button Cokelat

Informasi bahasa Indonesia

Jenis font Sans-Serif

Warna border textbox Ungu

Gambar 3.26 Rancangan Tampilan Sub Menu Pewayangan J. Rancangan Tampilan Detil Sub Menu Pewayangan

Rancangan tampilan detil sub menu pewayangan merupakan rancangan tampilan saat detil dari sub menu ditampilkan. Halaman ini menampilkan detil sub menu Prabu Arjuna Sasrabahu, Prabu Baladewa, Prabu Basudewa, Prabu Basukarna (Karna), Prabu Bomanarakasura, Prabu Dasamuka, Prabu Dasarata, Prabu Drupada, Prabu Drestarata, Prabu Kresna, Prabu Maswapati, Prabu Niwatakawaca, Prabu Pandhu Dewanata, Prabu Parikesit, Prabu Puntadewa, Prabu Ramawijaya, Prabu Salya, Prabu Sugriwa, Prabu Suyudana, Begawan Abiyasa, Begawan Mintaraga, Pandhita Durna, Resi Anoman, Resi Bisma, Resi Palasara, Resi Subali, R. Abimanyu, R. Anoman, R. Antareja,R. Arjuna, R.

Aswatama, R. Bimasena, R. Drestajumena, R. Dursasana, R. Gathutkaca, R. Janaka, R. Jayadrata, R. Kumbakarna, R. Lesmana Mandra Kumara, R. Nakula, R. Sadewa, R. Samba, R. Setyaki, R. Sengkuni, R. Werkudara, R. Arjuna, P. Baladewa, P. Basukarna, R. Bimasena, R. Gathutkaca, P. Puntadewa, P. Kresna, Resi Durna, R. Anoman, R. Gathutkaca, R. Janaka, R. Salya, R. Subali, Abdhine Pandhawa, Abdhine P. Suyudana, Abdhine B. Abiyasa, Abdhine Ratu Sabrang. Jika salah satu dari list detil sub menu pada halaman ini ditekan akan muncul

popup berupa tampilan isi dari detil yang dipilih. Rancangan tampilan detil sub menu utama dapat dilihat pada gambar 3.27.

Jika ditekan muncul pop-up Pencarian...

Detil Sub Menu 1

Detil Sub Menu 10 Detil Sub Menu 9 Detil Sub Menu 8 Detil Sub Menu 7 Detil Sub Menu 6 Detil Sub Menu 5 Detil Sub Menu 4 Detil Sub Menu 3 Detil Sub Menu 2 Judul Sub Menu

ISI DETIL

Warna border button Cokelat Warna background hijau

Warna border textbox Ungu

Informasi bahasa Indonesia Jenis font Sans-Serif

Gambar 3.27 Rancangan Tampilan Detil Sub Menu Pewayangan K. Rancangan Tampilan Isi Detil

Rancangan tampilan isi detil merupakan rancangan tampilan yang digunakan untuk menampilkan isi dari detil sub menu. Pada rancangan ini terdapat 3 jenis isi detil yaitu isi detil bergambar, isi detil bersuara, isi detil teks. Rancangan tampilan popup teks dapat dilihat pada gambar 3.28, tampilan popup

48

bergambar dapat dilihat pada gambar 3.29, dan tampilan popup bersuara dapat dilihat pada gambar 3.30.

isi Text

Warna background Hijau

Judul

Warna sesuai warna kategori

Gambar 3.28 Rancangan Tampilan OutputPopup Teks

Gambar Gambar

Keterangan Gambar Judul

Warna background Hijau

Warna sesuai warna kategori

Gambar 3.29 Rancangan Tampilan OutputPopup Gambar

Gambar Judul

Warna background Hijau

Warna sesuai warna kategori

Keterangan Icon play

Judul

L. Rancangan Tampilan Menu Latihan Soal

Rancangan tampilan menu latihan soal merupakan rancangan yang menampilkan isi dari menu latihan soal pada pepak. Latihan soal berupa pilihan ganda yang ditampilkan dalam list. Rancangan tampilan menu latihan soal dapat dilihat pada gambar 3.31. Rancangan tampilan hasil latihan soal dapat dilihat pada gambar 3.32. Latihan Soal 1. ... A. ... B. ... C. ... D. ... 2. ... A. ... B. ... C. ... D. ... 3. ... A. ...

Warna background

Hijau Warna Biru

Gambar 3.31 Rancangan Tampilan Latihan Soal

Latihan Soal

Warna background

Hijau Warna Hijau

1. ... Jawabanmu A. ... Sing bener B. ... 2. ... Jawabanmu A. ... Sing bener B. ... 3. ... Jawabanmu A. ... Sing bener B. ... 4. ... Jawabanmu A. ... Sing bener B. ...

50

M. Rancangan Tampilan Pencarian

Rancangan tampilan pencarian merupakan rancangan tampilan yang digunakan untuk melakukan pencarian kata dengan masukkan kata yang dicari. Pada rancangan ini terdapat textbox, textbox ini merupakan tempat untuk menuliskan kata yang ingin dicari. Hasil yang akan tampil di bawah textbox

dalam bentuk list. Rancangan tampilan pencarian dapat dilihat pada gambar 3.33. Pencarian... ... ... ... ... ... ... ... ... ... ... ... ...

Warna background Hijau

Warna Hijau

Gambar 3.33 Rancangan Tampilan Pencarian N. Rancangan Tampilan Error Handling

Rancangan popup error handling digunakan untuk menampilkan informasi pada aplikasi jika untuk pengguna. Rancangan tampilan error handling

pada halaman latihan soal dapat dilihat pada gambar 3.34.

Soal harus dijawab semua

Informasi menggunakan bahasa Indonesia

Rancangan tampilan error handling pada pencarian dapat dilihat pada gambar 3.35.

Kata yang dicari tidak ada

Informasi menggunakan bahasa Indonesia

Gambar 3.35 Rancangan Tampilan ErrorHandling Pencarian 3.3 Desain Uji Coba

Desain uji coba bertujuan untuk memastikan bahwa aplikasi telah dibuat dengan benar sesuai dengan kebutuhan atau tujuan yang diharapkan. Kekurangan atau kelemahan sistem pada tahap ini akan dievaluasi sebelum diimplementasikan. Proses pengujian menggunakan black box testing yaitu aplikasi akan diuji dengan melakukan berbagai percobaan untuk membuktikan bahwa aplikasi yang telah dibuat sudah sesuai dengan tujuan. Uji coba yang akan dilakukan antara lain: 3.3.1. Uji Coba Kesesuaian Antarmuka Aplikasi

Proses uji coba ini dilakukan untuk mengetahui apakah antarmuka aplikasi sudah sesuai dengan teori yang digunakan. Uji coba ini menggunakan indikator pada tabel 3.1. Pada uji coba kesesuaian, pengujian yang dilakukan yakni memastikan bahwa warna, ukuran button dan jenis font yang digunakan. Desain untuk uji coba konsistensi dapat dilihat pada Tabel 3.8.

Tabel 3.8 Desain Uji Coba Kesesuaian Antarmuka Tes

Case ID

Indikator Output Yang

Diharapkan Implementasi 1 bentuk button pada

sisi ujungnya tumpul

Lihat tabel 3.2 Menampilkan hasil

screenshoot dari aplikasi sesuai dengan teori antarmuka

2 warna hijau pada

background

Lihat tabel 3.2 Menampilkan hasil

52

dengan teori antarmuka 3 warna hijau pada

kategori rupa kawruh

Lihat tabel 3.2 Menampilkan hasil

screenshoot dari aplikasi sesuai dengan teori antarmuka

Tabel 3.8 (Lanjutan) Tes

Case ID

Indikator Output Yang

Diharapkan Implementasi 4 warna merah pada

kategori kawruh basa

Lihat tabel 3.2 Menampilkan hasil

screenshoot dari aplikasi sesuai dengan teori antarmuka

5 warna kuning pada kategori kesusastraan

Lihat tabel 3.2 Menampilkan hasil

screenshoot dari aplikasi sesuai dengan teori antarmuka

6 warna cokelat pada kategori pewayangan

Lihat tabel 3.2 Menampilkan hasil

screenshoot dari aplikasi sesuai dengan teori antarmuka

7 warna biru pada kategori latihan soal

Lihat tabel 3.2 Menampilkan hasil

screenshoot dari aplikasi sesuai dengan teori antarmuka

8 warna ungu pada kategori pencarian

Lihat tabel 3.2 Menampilkan hasil

screenshoot dari aplikasi sesuai dengan teori antarmuka

9 menggunakan informasi bahasa Indonesia

Lihat tabel 3.2 Menampilkan hasil

screenshoot dari aplikasi sesuai dengan teori antarmuka

10 bentuk loading

indicator bulat

Lihat tabel 3.2 Menampilkan hasil

screenshoot dari aplikasi sesuai dengan teori antarmuka

11

menggunakan jenis

font sans-serif

Lihat tabel 3.2 Menampilkan hasil

screenshoot dari aplikasi sesuai dengan teori antarmuka

12 ilustrasi gambar Lihat tabel 3.2 Menampilkan hasil

screenshoot dari aplikasi sesuai dengan teori antarmuka

3.3.2. Uji Coba Kompatibilitas Aplikasi

Proses uji coba ini dilakukan untuk mengetahui tingkat kompatibilitas aplikasi. Uji coba kompatibilitas dibagi menjadi 2 yaitu:

Evaluasi ini dilakukan untuk mengetahui tingkat kompatibilitas aplikasi. Uji coba ini dilakukan dengan menjalankan aplikasi ini pada beberapa tipe

samartphone yang telah ditentukan. Uji coba dilakukan terhadap tiga tipe

smartphone yang berbeda yaitu Samsung Galaxy SIII, Sony Experia J, dan HTC

Sentation.

b) Uji Coba Aplikasi pada Sistem Operasi

Evaluasi aplikasi pada sistem operasi dilakukan dengan cara menjalankan aplikasi pepak bahasa Jawa di berbagai macam sistem operasi. Sistem operasi yang digunakan pada evaluasi ini adalah ICS, Jelly Bean, dan KitKat. Dalam uji ini smartphone yang digunakan adalah HTC sentation.

BAB IV

IMPLEMENTASI DAN EVALUASI

4.1 Implementasi

Implementasi program adalah implementasi dari analisa dan desain aplikasi yang telah dibuat sebelumnya, sehingga diharapkan dengan adanya implementasi ini dapat dipahami jalannya aplikasi antarmuka pepak bahasa Jawa. 4.1.1 Kebutuhan Perangkat Keras

Rancang bangun antarmuka aplikasi pepak bahasa Jawa berbasis Android

ini membutuhkan persyaratan minimal perangkat keras atau smartphone sebagai berikut:

• Screen Size : 4.0 inches

• RAM : 512 MB

4.1.2 Kebutuhan Perangkat Lunak

Kebutuhan perangkat lunak digunakan untuk penunjang aplikasi pepak bahasa Jawa berbasis Android ini adalah:

• Sistem operasi : Android versi 4.0 (ICS: Ice Cream Sandwich)

4.1.3 Pembuatan Aplikasi

Aplikasi ini dibuat dengan menggunakan bahasa pemrograman PHP untuk membaca data di database dan merubah data menjadi tipe json array.

JQuery Mobile digunakan untuk code program aplikasi antarmuka pepak bahasa Jawa yang akan dipasang pada smartphone. HTML dan CSS digunakan untuk membuat tampilan pada aplikasi antarmuka pepak bahasa Jawa.

4.1.4 Implementasi Aplikasi

Pada bagian implementasi sistem ini akan dijelaskan mengenai penggunaan dari aplikasi yang dibuat. Penjelasan aplikasi yang dibuat meliputi tampilan aplikasi, fungsi kontrol dalam aplikasi, serta cara penggunaannya.

A. Tampilan Halaman Pembuka

Tampilan halaman pembuka merupakan halaman pertama yang muncul ketika aplikasi dijalankan. Halaman pembuka memiliki logo aplikasi yang berisi judul dan gambar. Halaman pembuka pada aplikasi ini hanya berjalan 2 detik kemudian aplikasi masuk ke dalam menu utama. Tampilan halaman pembuka dapat dilihat pada gambar 4.1.

Gambar 4.1 Tampilan Pembuka B. Tampilan Halaman Menu Utama

Tampilan halaman menu utama merupakan tampilan yang menampilkan menu utama yang ada pada aplikasi ini. Aplikasi ini memiliki enam menu utama

56

yaitu rupa-rupa kawruh, kawruh basa, kasusastraan, pewayangan, tuladha dan panelusuran. Tampilan halaman menu utama dapat dilihat pada gambar 4.2.

s

Gambar 4.2 Tampilan Menu Utama C. Tampilan Halaman Sub Menu Rupa Kawruh

Tampilan halaman sub menu ini menampilkan isi dari menu utama yang dipilih. Sub menu rupa kawruh di antaranya adalah arane anak kewan,arane turunan kewan, swarane kewan, swarane ngundang kewan, kabiyasan solahe kewan, arane gaman kewan, sebutan mangan, ulese/ rupane kawan dll. Pada tampilan halaman ini aplikasi memberikan beberapa pilihan sub menu. Tampilan halaman sub menu rupa kawruh dapat dilihat pada gambar 4.3.

Gambar 4.3 Tampilan Sub Menu Rupa Kawruh

Jika pengguna memasukkan kata yang ingin di cari pada textbox pencarian dan tidak ada datanya maka muncul error handling. Tampilan error handling

pada sub menu rupa kawruh dapat dilihat pada gambar 4.4.

58

Jika pengguna memasukkan kata yang ingin di cari pada textbox

pencarian maka ditampilkan hasil pencarian dalam bentuk list, pengguna dapat memilih list yang diinginkan dan aplikasi menampilkan halaman selanjutnya. Tampilan halaman hasil pencarian pada sub menu rupa kawruh dapat dilihat pada gambar 4.5.

Gambar 4.5 Tampilan Hasil Pencarian Sub Menu Rupa Kawruh D. Tampilan Halaman Detil Sub Menu Rupa Kawruh

Ketika pengguna memilih salah satu list di halaman sub menu rupa kawruh maka aplikasi menampilkan halaman detil sub menu, yang berisi isi dari

list yang dipilih. Tampilan halaman detil sub menu rupa kawruh dapat dilihat pada gambar 4.6.

85

4.2.3. Analisa Hasil Uji Coba Aplikasi

Pada sub bab ini ditampilkan analisa dari hasil uji coba yang telah dilakukan pada aplikasi dengan hasil sebagai berikut:

1. Uji Coba Antarmuka Aplikasi

Untuk mengetahui apakah antarmuka aplikasi pepak bahasa Jawa sudah sesuai dengan prinsip dari Constantine and Lockwood’s user interface design

principles, data yang dibutuhkan adalah data indikator dan data kesesuaian

antarmuka. Data indikator yang diperlukan adalah aspek psikologi yang meliputi warna hijau, merah, kuning, cokelat, biru, ungu, informasi yang digunakan berupa teks, suara dan gambar, bahasa yang digunakan untuk informasi adalah bahasa Indonesia, bentuk button yang digunakan berujung tumpul dan aspek tipografi yang meliputi jenis font yang digunakan adalah sans-serif. Data indikator bisa didapat pada tabel indikator (tabel 3.1).

Data Indikator digunakan untuk acuan dalam membuat antarmuka sesuai dengan teori. Data tersebut diperoleh dengan cara mengidentifikasi kebutuhan pengguna aplikasi pepak bahasa Jawa. Setelah itu akan dilakukan perancangan sistem yang akan disesuaikan dengan teori antarmuka. Perancangan antarmuka dikalsifikasikan menjadi 3 yaitu: Menu berisi kategori – kategori yang terdapat dalam pepak yaitu: rupa kawruh, kawruh basa, kesusastraan, pewayangan, latihan soal dan pencarian. Sub menu berisi sub kategori di antaranya adalah: arane anak kewan, swarane kewan, arane wit, arane woh dll. Detil sub menu berisi detil dari sub kategori dalam pepak di antaranya adalah: anak ampal, anak asu, anak gajah ilustrasi gambar dan ilustrasi suara. Tabel kesesuaian antarmuka bisa didapat pada tabel 3.2.

86

Uji coba dilakukan dengan cara menjalankan aplikasi pepak bahasa Jawa dan mencocokkan dengan data indikator yang ada. Dari hasil pengujian tersebut dapat dikatakan bahwa antarmuka aplikasi pepak bahasa Jawa sudah sesuai dengan tujuan. Ilustrasi gambar juga sudah menjelaskan isi content dan ilustrasi suara juga sudah menghasilkan suara sesuai keterangan content. Hasil uji coba dapat dilihat pada tabel 4.1

2. Uji Coba Kompatibilitas Aplikasi

Uji coba dilakukan terhadap tiga tipe Smartphone yang berbeda dan juga terhadap tiga versi sistem operasi Android yang berbeda. Smartphone yang digunakan yaitu Samsung Galaxy SIII, Sony Experia J, dan HTC Sentation. Sistem operasi yang digunakan yaitu ICS, Jelly Bean, Kitkat.

Dari hasil uji kompatibilitas tipe smartphone adalah pada Samsung Galaxy SIII, HTC Sensation dan Sony Experia J aplikasi dapat berjalan dengan lancar dan tidak terjadi kesalahan pada uji coba fitur dalam aplikasi. Dari hasil uji kompatibilitas aplikasi terhadap sistem operasi disimpulkan bahwa aplikasi ini dapat berjalan sempurna pada sistem operasi Android Jelly Bean dan KitKat. Dari hasil pengujian tersebut dapat dikatakan bahwa tidak terdapat masalah pada versi

Android Jelly Bean dan Android KitKat. Tetapi pada versi Android ICS hasilnya

berjalan tetapi textbox pencarian menutupi icon pencarian. Hal tersebut disebabkan karena dalam pembuatan aplikasi pepak bahasa Jawa menggunakan

platformsJQuery Mobile 1.4. Dari banyak versi Android yang ada, versi 4.1 (Jelly

Bean) atau lebih tinggi yang mendukung platformsJQuery Mobile 1.4.

Berdasarkan analisa di atas dapat disimpulkan bahwa untuk menghasilkan antarmuka pepak bahasa Jawa berbasis Android sesuai dengan prinsip

87

Constantine and Lockwood’s user interface design principles dibutuhkan data

indikator yang memiliki 2 aspek yaitu aspek psikologi dan aspek tipografi. Aspek psikologi meliputi warna hijau, merah, kuning, cokelat, biru, ungu, informasi yang digunakan berupa teks, suara dan gambar, bahasa yang digunakan untuk informasi adalah bahasa Indonesia, bentuk button yang digunakan berujung tumpul dan aspek tipografi yang meliputi jenis font yang digunakan adalah sans-serif. Dalam perancangan aplikasi ini diklasifikasi menjadi 3 yaitu menu, sub menu dan detil sub menu.

Hal yang harus diperhatikan dalam penelitian ini adalah penggunaan versi sistem operasi Androoid yang digunakan. Karena antarmuka aplikasi pepak bahasa Jawa berbasis Android dapat berjalan dengan sempurna jika menggunakan sistem operasi Android minimal versi 4.1 (Jelly Bean). Pada versi Android ICS hasilnya berjalan tetapi textbox pencarian menutupi icon pencarian. _{Karena dalam} pembuatan aplikasi pepak bahasa Jawa menggunakan platforms JQuery Mobile 1.4. Oleh sebab itu, Disarankan menggunakan smartphone Android yang menggunakan sistem operasi Android minimal versi 4.1 (Jelly Bean).

BAB V PENUTUP

5.1 Kesimpulan

Setelah melakukan analisis, perancangan, uji coba dan evaluasi, maka dapat diambil kesimpulan yaitu untuk menghasilkan antarmuka pepak bahasa Jawa berbasis Android yang sesuai dengan prinsip Constantine and Lockwood’s

user interface design principles dibutuhkan data indikator yang memiliki 2 aspek

yaitu aspek psikologi yang meliputi warna hijau untuk background dan kategori rupa kawruh, warna merah untuk kategori kawruh basa, warna kuning untuk kategori kesusastraan, warna cokelat untuk kategori pewayangan, warna biru untuk kategori latihan soal, dan warna ungu untuk kategori pencarian, bahasa yang digunakan untuk informasi adalah bahasa Indonesia, bentuk button yang digunakan berujung tumpul. Aspek tipografi yaitu jenis font yang digunakan adalah sans-serif. Dalam perancangan sistem aplikasi diklasifikasikan menjadi 3 yaitu menu, sub menu dan detil sub menu. Dalam perancangan sistem aplikasi diklasifikasikan menjadi 3 yaitu menu yang berisi kategori, sub menu yang berisi sub kategori dan detil sub menu yang berisi detil sub kategori.

5.2 Saran

Untuk meningkatkan kemampuan dari aplikasi antarmuka pepak bahasa Jawa, disarankan menggunakan smartphone Android yang menggunakan sistem operasi Android minimal versi 4.1 (Jelly Bean).

DAFTAR PUSTAKA

Android. (2013). Icon Design Guidelines. Dipetik 3 1, 2013, dari Android Developers: http://developer.android.com

Android. (2013). User Interface | Android Developers. Dipetik 1 8, 2013, dari Android Developers: http://developer.android.com

Beizer, B. (1995). Black-box Testing : Techniques for Functional Testing of

Software and Systems. (US): John Wiley & Sons, Inc.

Clements, D. H., & Sarama, J. (2000). Young Children's Ideas About. The

National Council of Teachers of Mathematics .

Danger, E. P. (1992). memilih warna kemasan. jakarta: PT. Karya Unipress. Dreyfuss, H. (1972). Symbol Sourcebook. New York: Van Nostrand Reinhold Co. Fonts.com. (2014). Home: Learn About Fonts & Typography > Typography for

Children. Dipetik maret 19, 2014, dari Fonts.com: http://fonts.com

JQuery Mobile. (2014). About : JQuery Mobile. Dipetik 7 13, 2013, dari JQuery Mobile: http://jquerymobile.com

Kobayashi, S., Ogata, K., & Lowitz, L. (1999). Colorist: A Practicel Handbook

for Personal and Profesional Use. USA: Kodansha.

Kusrianto, A. (2004). Tipografi Komputer untuk Desainer Grafis. Yogyakarta: Andi.

Merdeka. (2012). Pengguna Android di tahun 2012 meningkat 4x lipat. Dipetik 2 18, 2013, dari Merdeka.com: http://www.merdeka.com

Negrino, T., & Smith, D. (2007). JavaScript And Ajax. Barkeley: Peachpit Press. Nusantara, D. B., & Irawan, A. H. (2012). Perancangan Boardgame Sebagai

Media Pembelajaran Ilmu Pengetahuan Alam Untuk Anak SD Kelas 1.

Jurnal Sains & Seni Publikasi Online Mahasiswa ITS ISSN 2301-928X .

Picking, R., Grout, V., McGinn, J., Crisp, J., & Grout, H. (2010). Simplicity, consistency, universality, flexibility and familiarity: The Scuff Principles for developing user Interfaces for Ambient computer Systems.

International Journal of Ambient Computing and Intelligence , 40-49.

90

Pressman, R. S. (2001). Software Engineering: A Practitioner's Approach. New York: McGraw-Hill.

Santoso, I. (2009). Interaksi Manusia dan Komputer Edisi 2. Yogyakarta: Andi. Santoso, I. (1997). Interaksi Manusia dan Komputer teori dan Praktek.

Yogyakarta: Andi.

Saputra, A., & Agustin, F. (2011). Pemrograman CSS untuk Pemula. Jakarta: PT Elex Media Komputindo.

Sidik, B., & Pohan, H. I. (2007). Pemrograman WEB dengan HTML. Bandung: Informatika.