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

(1)

TUGAS AKHIR

COVER

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

SEKOLAH TINGGI

MANAJEMEN INFORMATIKA & TEKNIK KOMPUTER SURABAYA

(2)

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.

(3)

(4)

Halaman

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

(5)

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

(6)

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

(7)

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.11 Sequence Diagram Mengerjakan Latihan Soal ... 34

(8)

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.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

(9)

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

(10)

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

(11)

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

(12)

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

(13)

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

(14)

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

(15)

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:

(16)

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).

(17)

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.

(18)

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)

(19)

• 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.

(20)

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)

(21)

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

(22)

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

(23)

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

(24)

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

(25)

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

(26)

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.

(27)

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

(28)

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.

(29)

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

(30)

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.

(31)

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

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

(32)

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

(33)

Tabel 3.2 (Lanjutan) Kesesuaian rancangan

IMK

Indikator

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

- menggunakan jenis font sans-serif

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

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

(34)

24

1. Paribasan, bebasan, sanepan, saloka 2. Purwakanthi

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

(35)

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.

(36)

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

(37)

Gambar 3.3 Activity Diagram Melihat Kategori

B. Activity Diagram Melihat Sub Kategori

(38)

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.

(39)

Gambar 3.5 Activity Diagram Melihat Detil Sub Kategori

D. Activity Diagram Mengerjakan Latihan Soal

Activity diagram mengerjakan latihan soal dapat melakukan proses

(40)

30

Gambar 3.6 Activity Diagram Mengerjakan Latihan Soal

E. Activity Diagram Mencari Kata

(41)

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

(42)

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( )

(43)

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( )

(44)

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

(45)

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.

(46)

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.

(47)

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

(48)

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

ID_Sub_Kategori Integer 20 PK

ID_Kategori Integer 20 FK

Nama_Sub_Kategori Text - Nama Sub Bahasa Jawa

(49)

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

ID_Soal Integer 20 PK

ID_DETIL_ISI Integer 20 FK

Soal Text - Soal latihan

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

(50)

40

Tabel 3.7 (Lanjutan)

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

(51)

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

Pewayangan

Gambar 3.19 Rancangan Tampilan Menu Utama

C. Rancangan Tampilan Sub Menu Rupa Kawruh

(52)

42

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 Warna background hijau

Warna border textbox Ungu

Informasi bahasa Indonesia Jenis font Sans-Serif

(53)

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...

Warna border

button Merah

Gambar 3.22 Rancangan Tampilan Sub Menu Kawruh Basa

F. Rancangan Tampilan Detil Sub Menu Kawruh Basa

(54)

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.

Gambar 3.23 Rancangan Tampilan Detil Sub Menu Kawruh Basa

G. Rancangan Tampilan Sub Menu Kasusastraan

(55)

Pencarian... Warna background hijau

Warna border button Kuning

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.

Informasi bahasa Indonesia Jenis font Sans-Serif

(56)

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...

Warna border

button Cokelat

Gambar 3.26 Rancangan Tampilan Sub Menu Pewayangan

J. Rancangan Tampilan Detil Sub Menu Pewayangan

(57)

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

Gambar 3.27 Rancangan Tampilan Detil Sub Menu Pewayangan

K. Rancangan Tampilan Isi Detil

(58)

48

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

isi

Gambar 3.28 Rancangan Tampilan OutputPopup Teks

Gambar

Gambar 3.29 Rancangan Tampilan OutputPopup Gambar

Gambar

(59)

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.

Gambar 3.31 Rancangan Tampilan Latihan Soal

Latihan Soal

(60)

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

(61)

Rancangan tampilan error handling pada pencarian dapat dilihat pada

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

(62)

52

dengan teori antarmuka 3 warna hijau pada

kategori rupa kawruh

Tabel 3.8 (Lanjutan) Tes

Case ID

Indikator Output Yang

Diharapkan Implementasi 4 warna merah pada

kategori kawruh basa

5 warna kuning pada kategori kesusastraan

6 warna cokelat pada kategori pewayangan

7 warna biru pada kategori latihan soal

8 warna ungu pada kategori pencarian

9 menggunakan informasi bahasa Indonesia

10 bentuk loading

indicator bulat

11

menggunakan jenis

font sans-serif

12 ilustrasi gambar Lihat tabel 3.2 Menampilkan hasil

3.3.2. Uji Coba Kompatibilitas Aplikasi

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

(63)

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

(64)

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.

(65)

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

(66)

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

(67)

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.

(68)

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

(69)

Gambar 4.6 Tampilan Detil 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 detil sub menu rupa kawruh dapat dilihat pada gambar 4.7.

(70)

60

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

Gambar 4.8 Tampilan Hasil Pencarian detil Sub Menu rupa kawruh.

E. Tampilan Halaman Sub Menu Kawruh Basa

(71)

Gambar 4.9 Tampilan Sub Menu Kawruh Basa

Jika pengguna memasukkan kata yang ingin di cari pada textbox pencarian dan tidak ada datanya maka menampilkan error handling. Tampilan error handling pada sub menu kawruh basa dapat dilihat pada gambar 4.10.

(72)

62

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 kawruh basa dapat dilihat pada gambar 4.11.

Gambar 4.11 Tampilan Hasil Pencarian Sub Menu Kawruh Basa

F. Tampilan Halaman Detil Sub Menu Kawruh Basa

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

(73)

Gambar 4.12 Tampilan Detil Sub Menu Kawruh Basa

pada detil sub menu kawruh basa dapat dilihat pada gambar 4.13.

(74)

64

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

Gambar 4.14 Tampilan Hasil Pencarian Detil Sub Menu Kawruh Basa

G. Tampilan Halaman Sub Menu Kasusastraan

(75)

Gambar 4.15 Tampilan Sub Menu Kasusastraan

pencarian pada sub menu kasusastraan dapat dilihat pada gambar 4.16.

(76)

66

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 kasusastraan dapat dilihat pada gambar 4.17.

Gambar 4.17 Tampilan Hasil Pencarian Sub Menu Kasusastraan

H. Tampilan Halaman Detil Sub Menu Rupa Kawruh

(77)

Gambar 4.18 Tampilan Detil Sub Menu Kasusastraan

pada detil sub menu kasusastraan dapat dilihat pada gambar 4.19.

(78)

68

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

Gambar 4.20 Tampilan Hasil Pencarian detil Sub Menu Kasusastraan

I. Tampilan Halaman Sub Menu Pewayangan

(79)

Gambar 4.21 Tampilan Sub Menu Pewayangan

pada sub menu pewayangan dapat dilihat pada gambar 4.22.

(80)

70

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 pewayangan dapat dilihat pada gambar 4.23.

Gambar 4.23 Tampilan Hasil Pencarian Sub Menu pewayangan

J. Tampilan Halaman Detil Sub Menu Pewayangan

(81)

Gambar 4.24 Tampilan Detil Sub Menu Pewayangan

pencarian pada detil sub menu pewayangan dapat dilihat pada gambar 4.25.