APLIKASI ENSIKLOPEDIA KARAKTER WAYANG KULIT PURWA BERBASIS WEB Laporan Tugas Akhir Diajukan Untuk Memenuhi Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang Riky Indarta NIM. 201010370311201 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2015
LEMBAR PERSEMBAHAN Puji syukur kepada Allah SWT atas rahmat dan karunia nya sehingga penulis dapat menyelesaikan Tugas Akhir ini. Penulis menyampaikan ucapan terima kasih yang sebesar-besarnya kepada : 1. ALLAH SWT yang memberikan kelancaran dalam pengerjaan tugas akhir ini. 2. Kepada Bapak dan Ibu tercinta yang rela memberikan segalanya demi kelulusan anak tercintanya. 3. Kepada kakak laki-laki dan kakak perempuan saya yang selalu memberikan nasehat, doa, dan semangat sehingga terselesaikan tugas akhir ini. 4. Ellyana Tristya Martha, S.E yang sudah mendoakan dan selalu memberikan semangat, serta memotivasi saya sehingga terselesaikannya tugas akhir ini. 5. Bapak Yuda Munarko, S.Kom, M.Sc yang dengan sabar membimbing saya dalam menyelesaikan tugas akhir ini. 6. Bapak Ilyas Nuryasin, S.Kom, M.Kom yang dengan sabar membimbing saya dalam menyelesaikan tugas akhir ini. 7. Sahabat saya Irfan, Galih Swasono Jati, Setya Hadianto, Dwiky Satria, Luber Pambudi Raharjo, Rudini, Hafiz Arizki, dan Zakaria Apriliyanto yang tergabung dalam geng kapak pink yang selalu menemani saya dalam suka maupun duka. 8. Mbak Yayan Marthasari kasir kantin asri yang selalu memberikan kopi dan semangat serta doa. 9. Seluruh keluarga besar yang sudah mendoakan dan memberi semangat dan mendukung pengerjaan tugas akhir ini. 10. Seluruh teman-teman Informatika E yang istimewah dan fantastis yang selalu bersama mulai awal kuliah sampai saat ini. 11. Dan semua pihak yang telah membantu menyelesaikan Tugas Skripsi ini baik secara langsung maupun tidak langsung. vi
KATA PENGANTAR Dengan memanjatkan puji syukur kehadirat Allah SWT atas limpahan rahmat dan hidayah-nya sehingga penulis dapat menyelesaikan tugas akhir yang berjudul: APLIKASI ENSIKLOPEDIA KARAKTER WAYANG KULIT PURWA BERBASIS WEB Di dalam tulisan ini disajikan pokok-pokok bahasan tentang ensiklopedia digital yang meliputi informasi tentang beberapa gambar karakter wayang kulit purwa dan cara memaikan wayang kulit secara umum. Peneliti menyadari masih banyak kekurangan dan keterbatasan dalam penulisan tugas akhir ini. Untuk itu, penulis sangat mengaharapkan saran yang membangun agar tulisan ini dapat berguna untuk perkembangan ilmu pengetahuan kedepan. Malang, 15 januari 2015 Penulis Riky Indarta vii
DAFTAR ISI LEMBAR PERSETUJUAN... i LEMBAR PENGESAHAN... ii LEMBAR PERNYATAAN... iii ABSTRAK... iv ABSTRACT... v LEMBAR PERSEMBAHAN... vi KATA PENGANTAR... vii DAFTAR ISI... viii DAFTAR GAMBAR... xi DAFTAR TABEL... xiv BAB I PENDAHULUAN 1.1 Latar Belakang... 1 1.2 Rumusan Masalah... 2 1.3 Tujuan... 2 1.4 Batasan Masalah... 2 1.5 Metodologi... 2 1.5.1 Metode Pengumpulan Data... 2 1.5.2 Perancangan Sistem... 3 1.5.3 Pengujian... 3 1.5.4 Penulisan Laporan... 3 1.5.5 Sistematika Penulisan... 3 BAB II LANDASAN TEORI 2.1 Wayang Kulit Purwa... 5 2.2 Pengertian Website... 6 2.3 HTML 5... 8 2.4 Ensiklopedia... 9 BAB III ANALISA DAN PERANCANGAN SISTEM 3.1 Analisa Sistem... 12 3.1.1 Deskripsi Umum Aplikasi... 12 3.1.2 Analisa Kebutuhan Sistem... 13 viii
3.2 Perancangan Sistem... 13 3.2.1 Use-Case Diagram... 14 3.2.2 Actifity Diagram... 15 3.2.3 Sequence Diagram... 22 3.3 Desain Interface... 24 BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Sistem... 29 4.1.1 Lingkungan Implementasi... 29 4.1.2 Implementasi Antarmuka... 30 4.1.2.1 Halaman Awal... 30 4.1.2.2 Menu Cerita... 30 4.1.2.3 Menu Tutorial... 50 4.1.2.3.1 Sub Menu Textual... 31 4.1.2.3.2 Sub Menu Video... 31 4.1.2.4 Menu Galery... 32 4.1.2.5 Menu Games... 33 4.1.2.5.1 Sub Menu Tebak Gambar... 31 4.1.2.5.2 Sub Menu Pencocokan Gambar... 36 4.1.2.6 Halaman Login Admin... 37 4.1.2.7 Halaman Awal Admin... 38 4.1.2.8 Menu Galery... 38 4.1.2.9 Menu Cerita... 41 4.2 Pengujian Sistem... 44 4.2.1 Pengujian Fungsionalitas Aplikasi... 44 4.2.2 Pengujian Usability... 45 BAB V KESIMPULAN DAN SARAN 5.1 Kesimpulan... 47 5.2 Saran... 47 DAFTAR PUSTAKA... 48 LAMPIRAN... 49 ix
DAFTAR GAMBAR Gambar Halaman Gambar 3.1 Use Case... 14 Gambar 3.2 Activity Diagram Login Admin... 15 Gambar 3.3 Activity Diagram Kelola Data Cerita (Insert)... 16 Gambar 3.4 Activity Diagram Kelola Data Cerita (Update)... 16 Gambar 3.5 Activity Diagram Kelola Data Cerita (Delete)... 17 Gambar 3.6 Activity Diagram Kelola Data Galery (Insert)... 17 Gambar 3.7 Activity Diagram Kelola Data Galery (Update)... 18 Gambar 3.8 Activity Diagram Kelola Data Galery (Delete)... 18 Gambar 3.9 Activity Diagram View Data Home... 19 Gambar 3.10 Activity Diagram View Data Galery... 19 Gambar 3.11 Activity Diagram View Data Cerita... 20 Gambar 3.12 Activity Diagram View Data Tutorial Memainkan... 20 Gambar 3.13 Activity Diagram View Data About... 21 Gambar 3.14 Activity Diagram View Game Tebak Gambar... 21 Gambar 3.15 Activity Diagram View Game Pencocokan Gambar... 22 Gambar 3.16 Sequence Diagram Login Admin... 22 Gambar 3.17 Sequence Diagram Kelola Data Cerita... 23 Gambar 3.18 Sequence Diagram Kelola Data Galery... 23 Gambar 3.19 Sequence Diagram User View Data... 24 x
Gambar 3.20 Tampilan Interface Halaman Home... 24 Gambar 3.21 Tampilan Interface Halaman Cerita... 25 Gambar 3.22 Tampilan Interface Halaman Galery... 25 Gambar 3.23 Tampilan Interface Halaman Tutorial... 26 Gambar 3.24 Tampilan Interface Halaman About... 26 Gambar 3.25 Tampilan Interface Halaman Game Tebak Gambar... 27 Gambar 3.26 Tampilan Interface Halaman Game Pencocokan Gambar... 27 Gambar 3.27 Tampilan Interface Halaman Login... 28 Gambar 3.28 Tampilan Interface Halaman Admin... 28 Gambar 4.1 Menu Home... 30 Gambar 4.2 Menu Cerita... 30 Gambar 4.3 Sub Menu Textual... 31 Gambar 4.4 Sub Menu Video... 32 Gambar 4.5 Script Menampilkan Video... 32 Gambar 4.6 Menu Galery... 33 Gambar 4.7 Script Galery... 33 Gambar 4.8 Menu Tebak Gambar... 34 Gambar 4.9 Script Random Soal... 34 Gambar 4.10 Hasil Dari Jawaban Kuis... 35 Gambar 4.11 Script Proses Koreksi Dan Nilai... 35 Gambar 4.12 Game Pencocokan Gambar... 36 Gambar 4.13 Script Pengocokan Gambar... 36 xi
Gambar 4.14 Hasil Nilai Game Pencocokan Gambar... 37 Gambar 4.15 Script Proses Pencocokan Gambar... 37 Gambar 4.16 Login Admin... 37 Gambar 4.16 Script Proses Login... 38 Gambar 4.18 Halaman Awal Admin... 38 Gambar 4.19 Tabel Database Galery... 39 Gambar 4.20 Script Tabel Database Galery... 39 Gambar 4.21 Form Tambah Galery... 39 Gambar 4.22 Script Tambah Cerita... 40 Gambar 4.23 Form Update Galery... 40 Gambar 4.24 Script Update Galery... 40 Gambar 4.25 Scrript Proses Create, Update, dan Delete Galery... 41 Gambar 4.26 Tabel Database Cerita... 41 Gambar 4.27 Script Tabel Database Cerita... 42 Gambar 4.28 Form Tambah Cerita... 42 Gambar 4.29 Script Tambah Cerita... 42 Gambar 4.30 Form Update Galery... 43 Gambar 4.31 Script Update Galery... 43 Gambar 4.32 Scrript Proses Create, Update, dan Delete Cerita... 43 xii
DAFTAR TABEL Tabel Halaman Tabel 3.1 Kebutuhan Sistem... 13 Tabel 3.2 Penjelasan Use Case... 14 Tabel 4.1 Spesifikasi... 29 Tabel 4.2 Pengujian Fungsionalitas Aplikasi... 44 Tabel 4.3 Penilaian Responden Mahasiswa UMM Jurusan Teknik Informatika... 46 Tabel 4.4 Persentase nilai berdasarkan aspek... 46 xiii
DAFTAR PUSTAKA [2] Wayang kulit. Diakses pada tanggal 5 mei 2014. http://www.museumwayang.com/wayang%20kulit.html [3] Wayang Purwa. Diakses pada tanggal 6 mei 2014. http://id.wikipedia.org/wiki/wayang_purwa [4] Html 5 dan kelebihannya. Diakses pada tanggal 5 mei 2014. http://mkr-site.blogspot.com/2012/07/apa-itu-html5-dan-kelebihannya.html [5] Makalah mengenal html 5. Di unduh pada 12 oktober 2014. https://www.academia.edu/5242952/makalah_mengenal_html5_ Disusun_untuk_Memenuhi_Tugas_Mata_Kuliah_Teknologi_Informasi_da n_komunikasi_yang_diampu_oleh_septia_lutfi [6] Sejarah website dan teknologi html. Diakses pada tanggal 10 oktober 2014. [1] Kesenian wayang kulit purwa islam. Diakses pada tanggal 5 mei 2014. http://topiknugroho.wordpress.com/2011/12/15/kesenian-wayang-kulitdalam-islam/ http://shareilmu-komputer.blogspot.com/2013/03/sejarah-website-danteknologiterbaru.html?showcomment=1412913922098#c79022330214391 12953 [7] Perbedaan web statis dan web dinamis. Diakses pada 10 Oktober 2014 http://www.carawebs.info/2013/03/pengertian-perbedaan-web-statis-danweb-dinamis.html [8] Ensiklopedia. Diakses pada 12. Oktober 2014. http://mahayuperpusinfo2009.wordpress.com/category/ensiklopedia/ 48