1 Perancangan dan Implementasi Media Sosialisasi Jamu Berbasis Web dengan HTML5 dan CSS3 Artikel Ilmiah Diajukan kepada Fakultas Teknologi Informasi untuk memperoleh Gelar Sarjana Komputer Peneliti: Margaretha Tri Ardiastuti (672011048) Suprihadi, S.Si., M.Kom. Christine Dewi, S.Kom., M.Cs. Program Studi Tehnik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga Mei 2016
23
Embed
Perancangan dan Implementasi Media Sosialisasi Jamu ...repository.uksw.edu/bitstream/123456789/11368/2/T1_672011048_Full... · Identifikasi Masalah ini dilakukan dengan pengamatan
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
Perancangan dan Implementasi Media Sosialisasi Jamu
Berbasis Web dengan HTML5 dan CSS3
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti:
Margaretha Tri Ardiastuti (672011048)
Suprihadi, S.Si., M.Kom.
Christine Dewi, S.Kom., M.Cs.
Program Studi Tehnik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Mei 2016
2
3
4
5
6
7
1. Pendahuluan
Indonesia adalah negara yang mempunyai sumber daya alam berlimpah, salah
satunya pada bidang pertanian. WHO memperkirakan dari sekitar 20.000 jenis
tumbuhan, 14-28% dapat dikembangkan menjadi obat [1]. Kekayaan alam ini
telah dimanfaatkan dan digunakan sebagai bahan baku pembuatan jamu sebagai
pengobatan tradisional. Terbuat dari tanaman alami membuat jamu tidak
mengandung bahan kimia berbahaya. Jamu telah menjadi bagian budaya
Indonesia dan merupakan bagian dari sejarah Indonesia. Adanya arus globalisasi
sangatlah berperan dalam mengikis budaya-budaya negeri dan penerus bangsa
untuk dipertahankan. Jamu akan terus berkembang dengan adanya penerus bangsa
yang peduli akan keberadaannya. Khasiat jamu telah diakui oleh 83,23 %
konsumen namun, hanya 17,4% konsumen diatas usia 15 tahun yang meracik
sendiri dan mengkonsumsi jamu secara rutin [2].
Berdasarkan data tersebut tentu terdapat alasan mengapa responden tidak
mengkonsumsi jamu secara rutin atau senggan untuk mencoba. Diperoleh 4
(empat) kelompok utama yaitu: masalah budaya, masalah ketidakjelasan
informasi (tentang komposisi dan dosis), masalah ketidaknyamanan, serta masalah
ketidakpercayaan[3]. Berbagai permasalahan tersebut memerlukan adanya media
yang menyediakan informasi seputar jamu. Meskipun Indonesia masih merupakan
negara yang berkembang, dengan populasi yang meningkat setiap tahunnya maka
untuk mempermudah sosialisasi jamu ini dapat menggunakan media online yaitu
dalam sebuah website. Website dapat diakses dan dapat mencakup semua
kalangan, dengan menggunakan HTML5 dan CSS3 tampilan website akan
dinamis, responsive (akan menyesuaikan layar perangkat saat diakses), juga
memiliki tampilan yang menarik. Penggunaan media online/website didukung
juga oleh Gambar 1 yang menunjukkan tingginya data pengguna internet di
Indonesia.
Gambar 1 Data Pengguna Internet di Indonesia Oleh Bank Dunia
8
2. Tinjauan Pustaka
Meskipun bukan teknologi baru, penggunaan dan manfaat HTML5 dan CSS3
telah dapat dirasakan banyak orang. Pada penelitian Eksplorasi HTML5 dengan
studi kasus Jejaring Sosial Untuk Pembelajaran Kolaboratif menyatakan bahwa
fitur-fitur HTML5 dapat diimplementasikan dengan menggunakan kode-kode
Javascript pada sisi client. Drag-and-drop dapat dilakukan dengan baik sehingga
data yang diinginkan mampu dipindah ke tempat yang dimaksud saat drop
dilakukan. Tetapi kekurangan drag-and-drop dan HTML5 masih didukung
sebagian besar perambah web modern[4].
Penggunaan HTML5 dan CSS3 sebagai media pembelajaran salah satunya
adalah website wayang mahabarata. Menggunakan HTML5 elemen sectioning
(semantics), multimedia untuk audio dan video tanpa script yang panjang, dengan
CSS3 tidak diperlukan kode program berulang untuk tampilan yang sama. Adanya
website ini membuat siswa dapat belajar secara mandiri dengan video dan grafis
yang ditampilkan dengan baik, juga dapat digunakan di sekolah sebagai sarana
pelestarian budaya wayang [5].
Keunggulan dari HTML 5 beberapa di antaranya adalah kode pemrograman
yang lebih sederhana dan dinamis akan memberikan kemudahan bagi
pengembang (developer), didukung dengan adanya elemen-elemen baru seperti
Semantik (header, nav, footer dll.). Tidak seperti versi sebelumnya yang
menggunakan bantuan Flash atau Silverlight, Javascript HTML5 tetap dapat
menampilkan gambar maupun video dengan kualitas tinggi tanpa bantuan plugin
lain. Selain itu terdapat pula chace aplikasi online, halaman website akan tetap
dapat di refresh meskipun server dalam keadaan mati, beban server berkurang
tetapi load tetap berjalan dengan cepat. Tetapi dengan berbagai kelebihan yang
dimiliki HTML 5 masih memiliki kekurangan pada keterbatasan browser modern
untuk akses [6].
Cascading Style Sheet (CSS) digunakan dalam kode HTML yang dapat
membuat dan mengendalikan kumpulan komponen atau style menjadi lebih
terstruktur, menarik dan mudah dikelola. Seperti HTML5 CSS dikembangkan
oleh W3C (World Wide Web Consortium).
Beberapa keunggulan dari CSS3 yaitu adanya transformasi 2D atau 3D dan
dapat memberikan sudut bayangan, efek ini juga dapat digunakan untuk teks,
tabel, kolom maupun grafis. Menyediakan pilihan font yang lebih beragam dengan
visual warna dan dapat mengurangi ukuran file yang akan di upload dan tidak
membutuhkan plugin atau software tambahan lainnya. Tidak seperti versi
sebelumnya yang menggunakan tag berulang untuk tampilan yang sama tidak
berlaku untuk CSS3, hal ini akan memberikan efektifitas waktu dengan script
sederhana. Berbagai keunggulan yang disediakan membuat tampilan website
menjadi lebih menarik dan interaktif [7].
9
3. Metode Penelitian
Penelitian adalah serangkaian kegiatan ilmiah untuk dapat memecahkan suatu
masalah dengan melalui beberapa tahap. Penjelasan dan jawaban tehadap
permasalahan tersebut dapat bersifat abstrak dan umum[8].Tahapan penelitian
yang digunakan dalam merancang website media sosialisasi jamu ini dapat dilihat
pada Gambar 2 berikut:
Gambar 2 Tahapan Penelitian
Identifikasi Masalah ini dilakukan dengan pengamatan dan penelitian tentang
masalah apa saja yang selama ini menghambat tingkat konsumsi dan
perkembangan jamu. Pengamatan dilakukan dengan mengunjungi penjual bahan
jamu dan memberikan kuisioner pada masyarakat umum di kota Salatiga dan
Semarang. Tahap selanjutnya yaitu identifikasi kebutuhan Sistem. Berdasarkan
permasalahan yang terjadi dapat dilakukan pengumpulan data yang akan
digunakan dalam sistem, yaitu berupa hak akses, ruang lingkup sistem, sasaran
pengguna serta hal-hal apa saja yang akan dan dapat dilakukan jika sistem ini
telah berjalan. Perancangan Sistem merupakan penerapan dari identifikasi
kebutuhan sistem, dalam tahap perancangan sistem menggunakan Unified
Modeling Language (UML) meliputi usecase diagram, activity diagram, sequence
diagram, class diagram dan deployment diagram. Setelah perancangan diagram,
selanjutnya juga dilakukan perancangan database guna menampung data dan
rancangan tampilan website. Pembuatan website merupakan penerapan dari
rancangan-rancangan sistem dan diaplikasikan dalam pembuatan website.
Pembuatan website menggunakan HTML5 dan CSS3, karena berbasis web maka
untuk menghubungkan aplikasi dengan database menggunakan tambahan
framework berupa PHP. Menyesuaikan dengan permasalahan maka dalam
HTML5 audio, video serta drag and drop digunakan. Audio dan video digunakan
sebagai media promosi, sedangkan sebagai media sosialisasi bahan jamu akan
Identifikasi Masalah
Identifikasi
Kebutuhan Sistem
Perancangan Sistem
Pembuatan Website
Implentasi dan
Pengujian Sistem
10
disediakan permainan bahan jamu dengan drag and drop. Berdasarkan pengguna,
dibedakan menjadi 2 yaitu admin sebagai pengelola website dan user yang
mengakses website. Penggunaan HTML5 dan CSS3 diharapkan dapat sesuai
dengan berbagai media elektronik pengguna, tampilan yang dinamis dan
responsive. Implementasi dan Pengujian Sistem dilakukan untuk mengetahui
apakah sistem dapat berjalan dengan baik dan sesuai dengan perancangan yang
dilakukan. Pengujian pada aplikasi dilakukan sehingga kesalahan sistem dapat
diketahui dan diselesaikan dengan baik.
Perancangan sistem dan desain awal aplikasi menggunakan Unified Modeling
Language (UML). UML terdiri dari Use Case Diagram, Activity Diagram,
Sequence Diagram, dan Deployment Diagram menggunakan aplikasi Star UML.
Metode pengembangan sistem yang digunakan dalam penelitian ini adalah
metode prototype. Prototype adalah pengembangan dan pengujian secara cepat
dan berulang karena menyederhanakan desain sistem[9]. Penggunaan metode ini
akan mempercepat proses pembuatan aplikasi, karena jika terdapat
ketidaksesuaian atau kesalahan dapat segera dilakukan perbaikan sehingga sistem
dapat memenuhi dan menyelesaikan permasalahan yang ada yaitu menyediakan
media sosialisasi jamu.
Gambar 3 Metode Pengembangan Sistem
Pada tahap ini aplikasi yang telah sementara selesai dievaluasi. Evaluasi
berupa pengaksesan website melalui device samsung galaxy grand neo plus dan
dengan akses melalui laptop. Pengujian untuk semua menu dan fitur/fungsi pada
aplikasi, jika ditemukan bug/error maka akan dilakukan kembali proses analisis,
proses analisis dilakukan untuk menemukan kesalahan yang menyebabkan
erorr/bug pada aplikasi dan melakukan perbaikan dan pengujian sampai aplikasi
dapat berjalan dengan baik dan tanpa ada bug/error. Bentuk perancangan aplikasi
dalam UML ditunjukkan pada Gambar 4:
11
user
Lihat katalog bahan jamu
Lihat video proses pembuatan
memainkan permainan
Lihat informasi jamu
Lihat resep pembuatan
Lihat ragam manfaat jamu
Gambar 4 Use Case Diagram User
Gambar 4 menunjukkan bahwa pada aplikasi sistem sosialisasi jamu, user
dapat melihat katalog bahan jamu, memainkan permainan resep sederhana,
melihat informasi seputar jamu yang meliputi apa itu jamu, sejarah jamu, resep
jamu, serta ragam dan manfaat jamu untuk kesehatan, user juga dapat melihat
video proses pembuatan jamu sederhana. Untuk mempermudah pengelolaan data
pada website user maka digunakan aplikasi admin. Use case diagram admin dapat
dilihat pada Gambar 5.
admin
kelola katalog bahan
kelola data resep
ubah
tambah
hapus
tambah resep
<<extend>>
<<extend>>
<<extend>>
<<extend>>
hapus resep
ubah resep
<<extend>>
<<extend>>
kelola data manfaat
ubah data manfaat
hapus data manfaat
tambah data manfaat
<<extend>>
<<extend>>
<<extend>>
Gambar 5 Use Case Diagram Admin
12
menampilkan menu utama
pilih menu permainan
mengirim request ke database
request data
menampilkan pilihan resep
memilih resep
mengirim request ke database
request data
menampilkan permainan
Gambar 5 menunjukkan bahwa pada aplikasi sistem sosialisasi, admin dapat
melakukan kelola data admin, kelola katalog bahan, kelola data resep, kelola data
jamu. Pengelolaan data meliputi tambah data, ubah data dan hapus data dapat
lebih efektif dan efisien. Activity diagram menggambarkan aktifitas user dalam
aplikasi. Berikut adalah activity diagram user dalam aplikasi.
Gambar 6 Activity Diagram Memainkan Permainan Bahan Resep
Gambar 6 menggambarkan aktivitas user ketika memainkan permainan bahan
resep. User terlebih dahulu memilih menu permainan pada menu utama kemudian
setelah sistem mengirimkan request ke database maka database akan
menampilkan resep yang dapat dipilih oleh user, setelah itu sistem akan
menampilkan bahan dan kotak yang disediakan. Dengan menggunakan drag and
drop HTML5.
User Sistem Database
13
Gambar 7 Activity Diagram Lihat Resep Jamu
Gambar 7 menggambarkan aktivitas user ketika melihat resep jamu. Pada
menu utama user memilih menu resep pembuatan, kemudian sistem akan
mengirim request ke database, kemudian akan menampilkan kumpulan resep
yang dapat dipilih oleh user. Terdapat pilihan resep yang dapat disesuaikan
dengan kebutuhna user. Resep dihinpun dari berbagai buku kesehatan dan
resep Buku Pintar Tanaman Obat Oleh Redaksi AgroMedia [10].