T1 672011048 Full text

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

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.

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 webmodern[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

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

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

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.

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

Menampilkan Menu Services

Pilih Menu Resep Pembuatan

Menampilkan Resep Pembuatan Mengirim Request ke Database

Request Data

Pilih Resep

Menampilkan Resep Pilihan

14 View Katalog Produk +nama_produk +harga +jumlah +gambar +ulasan_produk Menu Resep +nama_resep +gambar_jadi +bahan +proses_pembuatan Permainan +nama_resep +nama_bahan +gambar_bahan +gambar_jamu Informasi Jamu +apa_itu_jamu +sejarah_jamu +ragam_dan_manfaat Model Produk +id_produk +nama_produk +harga +jumlah +gambar +ulasan_produk Resep +id_resep +nama_resep +gambar_jadi +bahan +proses_pembuatan Jamu +id_jamu +nama_jamu +gambar_jamu Bahan +id_bahan +id_jamu +nama_bahan +gambar_bahan Controller KatalogProses +LihatKatalogProduk() ResepProses +LihatDaftarResep() BahanProses +Permainan() JamuProses +MemilihResepPermainan() Gambar 9 Activity Diagram Melihat Ragam Manfaat

Gambar 9 menggambarkan aktivitas user ketika melihat ragam manfaat jamu. User memilih menu ragam manfaat pada menu utama kemudian sistem

akan mengirim request ke database, kemudian akan menampilkan kumpulan

ragam manfaat jamu. Pada menu ini akan ditampilkan ragam manfaat jamu dan bahan jamu yang dihimpun dari buku Tanaman Obat Indonesia [11].

Gambar 10 Class Diagram

Menampilkan Menu Services

Pilih Menu Ragam Manfaat Jamu

Request Database

Request Data

Menampilkan Ragam Manfaat

15

Gambar 10 merupakan class diagram dari aplikasi media sosialisasi jamu.

Class diagram terdiri dari model, view dan controller. Model adalah penghubung antara fungsi dengan database. View adalah tampilan/user interface dari aplikasi.

Controller adalah penggerak yang berfungsi menerima perintah dari view lalu

meneruskan ke model.

Deployment diagram adalah susunan fisik sebuah sistem, menunjukkan tata letak

bagian-bagian software yang berjalan pada bagian-bagian hardware. Deployment

diagram pada aplikasi ini dapat dilihat pada Gambar 10.

Database Server Web Server

PHP User (Aplikasi Web)

Admin (Aplikasi Web)

Gambar 11 Deployment Diagram

Gambar 11 menggambarkan deployment diagram aplikasi media sosialisasi

jamu. Terdapat dua aplikasi web yaitu aplikasi user dapat di akses user dan aplikasi admin, sebagai pengelola. web server dan PHP digunakan untuk menghubungkan antara database dengan aplikasi.

4. Hasil dan Pembahasan

Penelitian ini menghasilkan dua aplikasi web. Aplikasi web user ditujukan

untuk pengguna yang akan mengakses website, sedangkan web admin ditujukan

untuk mengelola website sosialisasi jamu. Dengan menggunakan HTML5 dan

CSS3 tampilan website dinamis dan responsive, sehingga dapat diakses melalui berbagai perangkat seperti laptop, handphone, atau tablet, juga dengan berbagai

jenis browser. Akses Video dapat dipercepat dengan adanya embed dari Youtube,

tanpa tambahan framework lain sehingga tidak membutuhkan waktu lama untuk

di buka di browser. Penggunaan drag and drop dalam permainan sederhana akan

mempermudah user untuk lebih mengetahui bahan apa saja yang di gunakan

dalam pembuatan jamu.

Kode Program 1Script Penyesuaian Lebar Layar

01 02 03

...

<meta name="viewport" content="width=device-width, initial-scale=1"> ...

Untuk menghasilkan tampilan responsive, maka sxript penyesuaian ini

digunakan terlebih dahulu pada class index (head) . Responsive berarti tampilan akan tetap rapi dan akan menyesuaikan ukuran layar saat di akses. Tampilan

responsive ini merupakan keunggulan dari HTML5 yang disesuaikan dengan CSS3.

16

Kode Program 2Script Responsive

01 02 03 04 05 06 07 08 09 10 ...

@media screen and (max-width: 767px) { .table-responsive {

width: 100%;

margin-bottom: 15px; overflow-y: hidden;

-ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd;

} ...

Kode Program 2 melengkapi Kode Program 1. Kode program 2 menentukan

lebar maksimal untuk media dan tabel agar dapat menjadi responsive. Juga

dengan tambahan border dari CSS3. Script responsive terdapat pada CSS

kemudian harus dipanggil pada halaman website, dengan ini tampilan website akan menjadi responsive dan dinamis.

Gambar 11 Tampilan ResponsiveWeb User

Kode Program 3Script Jenis Browser

01 02 03 04 05 ...

-webkit-transition-property: height, visibility; -o-transition-property: height, visibility; transition-property: height, visibility; ...

Kode Program 3 digunakan untuk browser chrome dan opera. Kode ini

digunakan supaya dapat dibuka tidak hanya dengan 1 browser saja. Multibrowser

merupakan keunggulan dari HTML5. Multibrowser merupakan keunggulan HTML5 namun juga mempuyai kelemahan. Kelemahan tersebut adalah tidak

compatible dengan browser lawas seperti IE(Internet Explorer). Kode Program 4Script Zoom Effect

01 02 03 04 05 06 07 08 ... img.zoom-img {

transform: scale(1, 1);

-webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); ...

Kode Program 4 merupakan script CSS3 yang digunakan untuk

menambahkan zoom effect saat kursor diarahkan pada gambar tersebut. Zoom

effect akan menambah kesan menarik pada website dan juga mempermudah

interaksi user dengan aplikasi. CSS memberikan tambahan efek baru pada website,

17

Gambar 12 Tampilan Zoom Effect

Gambar 12 jika diperhatikan secara sekilas maka tidak nampak perubahan yang berarti, tetapi jika memperhatikan dengan seksama maka terdapat perbedaan

letak gambar dan Zoom Effect. Perbedaan ini akan lebih terlihat saat akses website

ini dilakukan. Penggunaan warna latar yang tidak mencolok akan menambahkan

kesan, dan memperjelas zoom effect yang merupakan keunggulan dari CSS3.

Kode Program 5Script effect Pada Tampilan Menu Services

01 02 03 04 05 06 07 08 09 10 11 12 13 14 17 18 ... .hi-icon { display: inline-block; font-size: 1em; cursor: pointer; margin: 30px; width: 120px; height: 120px; padding:3em 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); } ...

Kode Program 5 adalah script CSS3 yang digunakan untuk memberikan efek

rotasi dan bayangan pada menu utama. Script yang digunakan adalaha rotate, 45deg adalah sudut kemiringan saat konten berotasi. Kode program tersebut juga

mencakup script multibrowser. Script tersebut diperuntukkan untuk Chrome,

Mozila, dan Opera. Efek tersebut dapat dilihat pada gambar 13.

18

Kode Program 6Script Embed Video

01 02 03 04

...

<iframe width="420" height="245"

src="http://www.youtube.com/embed/rsQ05Jfeq1g"></iframe> ...

Kode Program 6 merupakan script yang digunakan untuk mengakses video

yang telah di upload ke youtube, sehingga akan memudahkan user serta dapat menghemat waktu saat video diputar. Frame digunakan untuk menempatkan video

sedangkan script embed digunakan untuk mengambil video dari youtube.

Tampilan video dapat dilihat pada gambar 14.

Gambar 14 Tampilan Video Pada Web User

Kode Program 7Script Permainan Drag and Drop

01 02 03 04 05 06 07 08 09 10

...

function allowDrop(ev) { ev.preventDefault(); }

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id); }

function drop(ev, clear) { ev.preventDefault(); ...

Kode Program 7 adalah potongan script yang digunakan dalam pembuatan

permainan drag and drop resep. Drag and drop adalah fungsi yang disediakan HTML5 untuk mempermudah memindahkan obyek pada tempat yang diinginkan.

Pada permainan ini user dapat memilih resep apa yang akan dimainkan.

Kemudian akan ditampilkan deretan gambar bahan jamu untuk resep tersebut juga beberapa gambar pengecoh. Jika jawaban benar, bahan jamu sesuai dengan resep maka akan muncul alert, begitu juga jika jawaban salah user dapat mengulangi permainan.

19

Gambar 15 Tampilan Permainan Drag and Drop Bahan Jamu

Gambar 15 adalah tampilan utama permainan drag drop HTML5. Pilihan

gambar disediakan di bagian bawah dan dapat dipindah ke kotak yang sudah disediakan. Permainan ini akan menambahkan gambar random untuk mengecoh

user. Penambahan gambar pengecoh juga akan selalu teracak saat user

memainkan permainan berikutnya. Tampilan alert pada permainan dapat dilihat

pada Gambar 15.

Gambar 15 Tampilan Hasil Pilihan Bahan Jamu

Setelah pembahasan aplikasi user maka pembahasan berikutnya adalah

tampilan admin sebagai pengelola website sosialisasi jamu. Admin digunakan untuk mempermudah pengelolaan data. Admin membuat pengelolaan data lebih efektif dan juga efisien karena hanya perlu menambahkan melalui database dan

tidak ditulis langsung pada script. Tampilan pertama website admin adalah form

20

Gambar 16 Tampilan Login Admin

Gambar 16 merupakan tampilan login pada halaman admin. Login harus selalu dilakukan sebelum admin melakukan perubahan data. Setelah melakukan

login maka akan masuk pada menu home. Terdapat beberapa pilihan pengelolaan data, beberapa diantaranya adalah pengelolaan resep, manfaat dan juga katalog

bahan jamu. Tampilan menu home dapat dilihat pada gambar 17.

Gambar 17 Tampilan Home Admin

Gambar 17 menunjukkan menu-menu yang ada pada halaman admin. Admin dapat melakukan pengelolaan data berupa tambah, ubah, dan hapus. Berikut

adalah tampilan data produk yang terdapat pada Gambar 18, button tambah, hapus

dan ubah disediakan untuk memudahkan admin untuk mengelola data.

21

Setelah kedua aplikasi selesai maka tahap selanjutnya adalah pengujian

aplikasi. Pengujiam dilakukan untuk mencari kesalahan-kesalahan/bug yang

mungkin terjadi pada sistem. Menggunakan metode blackbox. Metode ini menguji

fungsi-fungsi aplikasi secara langsung tanpa memperhatikan program yang berjalan dibalik aplikasi. Apakah aplikasi telah berjalan sesuai harapan, rancangan, apakah telah memenuhi kebutuhan pengguna atau tidak. Pengujian akan ditunjukkan pada tabel 1 dan tabel 2.

Tabel 1 Hasil Pengujian Aplikasi Web Admin

Fungsi yang diuji Kondisi Output yang

diharapkan Output yang dihasilkan sistem Status Pengujian Login

Username dan password

benar

Username dan password

salah maupun kosong

Sukses login

Gagal login

Sukses login

Gagal login

Valid

Tambah data resep

Form diisi dengan benar

Form diisi beberapa atau kosong

Sukses tambah data Gagal tambah data

Sukses tambah data Gagal tambah data Valid

Ubah data resep Form diisi dengan benar Sukses ubah data Sukses ubah data Valid

Hapus data resep Konfirmasi dengan benar Sukses hapus data Sukses hapus data Valid

Load data resep Sukses load data Sukses load data Valid

Load data manfaat Sukses load data Sukses load data Valid

Load data admin Sukses load data Sukses load data Valid

Load data bahan Sukses load data Sukses load data Valid

Berdasarkan pengujian yang dilakukan pada aplikasi web dapat dilihat status

pengujian dari setiap fungsi valid. Pengelolaan data dapat dilakukan dengan baik.

Tidak terdapat adanya error/bug dalam aplikasi. Pengujian ini dapat disimpulkan

bahwa aplikasi ini berjalan dengan baik dan sesuai yang diharapkan. Pengujian

selanjutnya juga dilakukan pada website user. Pengujian dilakukan guna

mendapatkan hasil yang sesuai dengan harapan aplikasi dan dapat memenuhi kebutuhan atau menjawab permasalahan yang ada.

Tabel 2 Hasil Pengujian Aplikasi Web User

Fungsi yang diuji Kondisi Output yang

diharapkan

Output yang dihasilkan sistem

Status Pengujian

Lihat katalog bahan Memilih menu dengan benar

Sukses menampilkan katalog bahan

Sukses menampilkan

katalog bahan Valid

Memainkan Permainan

Memilih menu dengan benar

Sukses menampilkan permainan

Sukses menampilkan

permainan Valid

Lihat informasi jamu Memilih menu dengan benar

Sukses menampilkan informasi jamu

Sukses menampilkan

informasi jamu Valid

Lihat resep pembuatan

Memilih menu dengan benar

Sukses menampilkan resep pembuatan

Sukses menampilkan

resep pembuatan Valid

Lihat sejarah jamu Memilih menu dengan benar

Sukses menampilkan sejarah jamu

Sukses menampilkan

sejarah jamu Valid

Lihat manfaat jamu Memilih menu dengan benar

Sukses menampilkan manfaat

Sukses menampilkan

manfaat Valid

Lihat Video Proses pembuatan

Memilih menu dengan benar

Sukses menampilkan Video

Sukses menampilkan

22

Berdasarkan pengujian yang dilakukan pada aplikasi web user dapat dilihat

status pengujian dari setiap fungsi valid, maka disimpulkan bahwa aplikasi ini

berjalan dengan baik dan sesuai yang diharapkan.Selain dengan metode blackbox

pengujian ditambah dengan pengujian beta. Pengujian beta adalah pengujian yang

dilakukan oleh orang yang tidak ikut dalam pembuatan aplikasi atau calon

pengguna aplikasi. Pengujian beta dilakukan dengan menggunakan kuesioner,

yaitu dengan membagikan kuesioner kepada sampleuser. Sampleuser berjumlah

30 responden dan dipilih secara acak, sample user pada pengujian ini adalah orang yang bertempat tinggal di kota Salatiga dan Semarang. Hasil jawaban kuesioner dapat dilihat pada Tabel 3.

Tabel 3 Hasil Jawaban Kuesioner

No Pernyataan STS TS CS S SS

1 Aplikasi sistem sosialisasi jamu ini mudah digunakan 0 0 0 19 11

2 Tampilan dan huruf dari aplikasi ini dapat dilihat dengan jelas

0 1 3 15 11

3 Menu-menu pada aplikasi ini mudah dipahami dan tidak membingungkan

0 1 5 14 10

4 Aplikasi ini membantu dan mempermudah masyarakat untuk mengetahui informasi seputar jamu dan mengenal aneka toga

0 0 2 13 16

Setelah semua jawaban diketahui maka yang dilakukan adalah menghitung presentase jawaban responden yang telah mengisi kuesioner. Perhitungan dilakukan menggunakan skala Likert, di mana masing-masing jawaban diberi skor 1-5 dengan penjelasan sebagai berikut:

1. Sangat Tidak Setuju (STS) = 1

2. Tidak Setuju (TS) = 2

3. Cukup Setuju (CS) = 3

4. Setuju (S) = 4

5. Sangat Setuju (SS) = 5

Hasil analisis data untuk pertanyaan 1 menunjukkan sebanyak 37% responden menjawab sangat setuju, 63% responden menjawab setuju. Jadi disimpulkan bahwa aplikasi ini mudah untuk digunakan.

Hasil analisis data untuk pertanyaan 2 menunjukkan sebanyak 37% responden menjawab sangat setuju, 50% responden menjawab setuju, 10% responden menjawab cukup setuju dan 3% responden menjawab tidak setuju. Jadi disimpulkan bahwa tampilan aplikasi ini dapat dilihat dengan jelas.

Hasil analisis data untuk pertanyaan 3 menunjukkan sebanyak 34% responden menjawab sangat setuju, 47% responden menjawab setuju, 16% responden menjawab cukup setuju dan 3% responden menjawab tidak setuju. Jadi disimpulkan bahwa menu-menu pada aplikasi ini mudah dipahami dan tidak membingungkan.

Hasil analisis data untuk pertanyaan 4 menunjukkan sebanyak 54% responden menjawab sangat setuju, 44% responden menjawab setuju dan 2% responden menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini membantu dan mempermudah masyarakat untuk lebih mengenal aneka toga dan jamu.

23

5. Simpulan

Berdasarkan penelitian yang dilakukan disimpulkan bahwa HTML5 dan

CSS3 adalah teknologi yang dapat digunakan untuk membangun aplikasi web

yang dapat berjalan pada multi platform browser, responsive dan dinamis sesuai ukuran layar saat diakses. Walaupun bukan teknologi baru HTML5 dan CSS3

masih efektif digunakan dalam pembuatan sebuah website. Pemakaian fungsi drag

and drop memudahkan user dalam memindahkan gambar. Aplikasi dapat digunakan dan diakses tanpa batasan waktu dan tempat.

Penelitian ini menghasilkan aplikasi Sistem Informasi Media Sosialisasi Jamu yang dapat membantu pengguna umum untuk mengetahui informasi-informasi umum tentang jamu dan dapat membuat jamu sendiri dengan panduan resep yang ada. Aplikasi ini dapat menyelesaikan masalah yang terjadi dalam kesulitan melakukan akses informasi tanpa mengeluarkan banyak biaya dan tenaga, tanpa batasan waktu dan tempat.

6. Pustaka

[1] Biofarmaka IPB, 2013, Quality of Herbal Medicine Plants and Traditional

Medicine, Institut Pertanian Bogor, Bogor.

[2] Badan Penelitian dan Pengembangan Kesehatan Kementerian Kesehatan RI,

2010, Riset Kesehatan Dasar.

[3] Pusat Penelitian dan Pengembangan Perdagangan Dalam Negeri, 2009,

Kajian Potensi Pengembangan Pasar Jamu, Kementerian Perdagangan.

[4] Shinoda, Evrina, 2013, Pengembangan Jamu Sebagai Warisan Budaya.

[5] Sudaryanto, dkk, Strategi Pemberdayaan UMKM Menghadapi Pasar Bebas

ASEAN.

[6] Adi Permana, Hapsoro,dkk, Eksplorasi HTML5 Dengan Studi Kasus Jejaring

Sosial Untuk Pembelajaran Kolaboratif, Surabaya:ITS.

[7] Kristiana, Yohanes, 2013, Perancangan dan Implementasi Media Ajar

Wayang Mahabarata Menggunakan HTML5 dan CSS3, Universitas Kristen Satya Wacana, Salatiga.

[8] Pakereng, M. A. Ineke, dkk, 2012, Analisis dan Perbandingan HTML4.01

dan HTML5 (Studi Kasus: Web Online Music Store),Program Studi Teknik Informatika FTI-UKSW, Salatiga.

[9] Shelyana,2012,available at:

https://shelyana.files.wordpress.com/2012/05/pengertian-jquery-html5-css3.pdf, Diakses pada 20 desember 2015.

[10]Redaksi, Agromedia, 2008, Buku Pintar Tanaman Obat, PT. Agromedia

Pustaka.

[11]Prof. DR. (HC). H. W. Isnandar, 2008, Kumpulan 1001 Ramuan Obat

18

Kode Program 6Script Embed Video

01 02 03 04

...

<iframe width="420" height="245"

src="http://www.youtube.com/embed/rsQ05Jfeq1g"></iframe> ...

Kode Program 6 merupakan script yang digunakan untuk mengakses video yang telah di upload ke youtube, sehingga akan memudahkan user serta dapat menghemat waktu saat video diputar. Frame digunakan untuk menempatkan video sedangkan script embed digunakan untuk mengambil video dari youtube. Tampilan video dapat dilihat pada gambar 14.

Gambar 14 Tampilan Video Pada Web User Kode Program 7Script Permainan Drag and Drop

01 02 03 04 05 06 07 08 09 10

...

function allowDrop(ev) { ev.preventDefault(); }

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id); }

function drop(ev, clear) { ev.preventDefault(); ...

Kode Program 7 adalah potongan script yang digunakan dalam pembuatan permainan drag and drop resep. Drag and drop adalah fungsi yang disediakan HTML5 untuk mempermudah memindahkan obyek pada tempat yang diinginkan. Pada permainan ini user dapat memilih resep apa yang akan dimainkan. Kemudian akan ditampilkan deretan gambar bahan jamu untuk resep tersebut juga beberapa gambar pengecoh. Jika jawaban benar, bahan jamu sesuai dengan resep maka akan muncul alert, begitu juga jika jawaban salah user dapat mengulangi permainan.

19

Gambar 15 Tampilan Permainan Drag and Drop Bahan Jamu

Gambar 15 adalah tampilan utama permainan drag drop HTML5. Pilihan gambar disediakan di bagian bawah dan dapat dipindah ke kotak yang sudah disediakan. Permainan ini akan menambahkan gambar random untuk mengecoh user. Penambahan gambar pengecoh juga akan selalu teracak saat user memainkan permainan berikutnya. Tampilan alert pada permainan dapat dilihat pada Gambar 15.

Gambar 15 Tampilan Hasil Pilihan Bahan Jamu

Setelah pembahasan aplikasi user maka pembahasan berikutnya adalah tampilan admin sebagai pengelola website sosialisasi jamu. Admin digunakan untuk mempermudah pengelolaan data. Admin membuat pengelolaan data lebih efektif dan juga efisien karena hanya perlu menambahkan melalui database dan tidak ditulis langsung pada script. Tampilan pertama website admin adalah form login, dapat dilihat pada Gambar 16.

20

Gambar 16 Tampilan Login Admin

Gambar 16 merupakan tampilan login pada halaman admin. Login harus selalu dilakukan sebelum admin melakukan perubahan data. Setelah melakukan login maka akan masuk pada menu home. Terdapat beberapa pilihan pengelolaan data, beberapa diantaranya adalah pengelolaan resep, manfaat dan juga katalog bahan jamu. Tampilan menu home dapat dilihat pada gambar 17.

Gambar 17 Tampilan Home Admin

Gambar 17 menunjukkan menu-menu yang ada pada halaman admin. Admin dapat melakukan pengelolaan data berupa tambah, ubah, dan hapus. Berikut adalah tampilan data produk yang terdapat pada Gambar 18, button tambah, hapus dan ubah disediakan untuk memudahkan admin untuk mengelola data.

21

Setelah kedua aplikasi selesai maka tahap selanjutnya adalah pengujian aplikasi. Pengujiam dilakukan untuk mencari kesalahan-kesalahan/bug yang mungkin terjadi pada sistem. Menggunakan metode blackbox. Metode ini menguji fungsi-fungsi aplikasi secara langsung tanpa memperhatikan program yang berjalan dibalik aplikasi. Apakah aplikasi telah berjalan sesuai harapan, rancangan, apakah telah memenuhi kebutuhan pengguna atau tidak. Pengujian akan ditunjukkan pada tabel 1 dan tabel 2.

Tabel 1 Hasil Pengujian Aplikasi Web Admin

Fungsi yang diuji Kondisi Output yang diharapkan

Output yang dihasilkan sistem

Status Pengujian

Login

Username dan password benar

Username dan password salah maupun kosong

Sukses login Gagal login

Sukses login Gagal login

Valid

Tambah data resep

Form diisi dengan benar Form diisi beberapa atau kosong

Sukses tambah data Gagal tambah data

Sukses tambah data Gagal tambah data Valid Ubah data resep Form diisi dengan benar Sukses ubah data Sukses ubah data Valid Hapus data resep Konfirmasi dengan benar Sukses hapus data Sukses hapus data Valid

Load data resep Sukses load data Sukses load data Valid

Load data manfaat Sukses load data Sukses load data Valid

Load data admin Sukses load data Sukses load data Valid

Load data bahan Sukses load data Sukses load data Valid

Berdasarkan pengujian yang dilakukan pada aplikasi web dapat dilihat status pengujian dari setiap fungsi valid. Pengelolaan data dapat dilakukan dengan baik. Tidak terdapat adanya error/bug dalam aplikasi. Pengujian ini dapat disimpulkan bahwa aplikasi ini berjalan dengan baik dan sesuai yang diharapkan. Pengujian selanjutnya juga dilakukan pada website user. Pengujian dilakukan guna mendapatkan hasil yang sesuai dengan harapan aplikasi dan dapat memenuhi kebutuhan atau menjawab permasalahan yang ada.

Tabel 2 Hasil Pengujian Aplikasi Web User Fungsi yang diuji Kondisi Output yang

diharapkan

Output yang dihasilkan sistem

Status Pengujian

Lihat katalog bahan Memilih menu dengan benar

Sukses menampilkan katalog bahan

Sukses menampilkan

katalog bahan Valid Memainkan

Permainan

Memilih menu dengan benar

Sukses menampilkan permainan

Sukses menampilkan

permainan Valid

Lihat informasi jamu Memilih menu dengan benar

Sukses menampilkan informasi jamu

Sukses menampilkan

informasi jamu Valid Lihat resep

pembuatan

Memilih menu dengan benar

Sukses menampilkan resep pembuatan

Sukses menampilkan

resep pembuatan Valid Lihat sejarah jamu Memilih menu dengan

benar

Sukses menampilkan sejarah jamu

Sukses menampilkan

sejarah jamu Valid Lihat manfaat jamu Memilih menu dengan

benar

Sukses menampilkan manfaat

Sukses menampilkan

manfaat Valid

Lihat Video Proses pembuatan

Memilih menu dengan benar

Sukses menampilkan Video

Sukses menampilkan

22

Berdasarkan pengujian yang dilakukan pada aplikasi web user dapat dilihat status pengujian dari setiap fungsi valid, maka disimpulkan bahwa aplikasi ini berjalan dengan baik dan sesuai yang diharapkan.Selain dengan metode blackbox pengujian ditambah dengan pengujian beta. Pengujian beta adalah pengujian yang dilakukan oleh orang yang tidak ikut dalam pembuatan aplikasi atau calon pengguna aplikasi. Pengujian beta dilakukan dengan menggunakan kuesioner, yaitu dengan membagikan kuesioner kepada sampleuser. Sampleuser berjumlah 30 responden dan dipilih secara acak, sample user pada pengujian ini adalah orang yang bertempat tinggal di kota Salatiga dan Semarang. Hasil jawaban kuesioner dapat dilihat pada Tabel 3.

Tabel 3 Hasil Jawaban Kuesioner

No Pernyataan STS TS CS S SS

1 Aplikasi sistem sosialisasi jamu ini mudah digunakan 0 0 0 19 11 2 Tampilan dan huruf dari aplikasi ini dapat dilihat dengan

jelas

0 1 3 15 11

3 Menu-menu pada aplikasi ini mudah dipahami dan tidak membingungkan

0 1 5 14 10

4 Aplikasi ini membantu dan mempermudah masyarakat untuk mengetahui informasi seputar jamu dan mengenal aneka toga

0 0 2 13 16

Setelah semua jawaban diketahui maka yang dilakukan adalah menghitung presentase jawaban responden yang telah mengisi kuesioner. Perhitungan dilakukan menggunakan skala Likert, di mana masing-masing jawaban diberi skor 1-5 dengan penjelasan sebagai berikut:

1. Sangat Tidak Setuju (STS) = 1

2. Tidak Setuju (TS) = 2

3. Cukup Setuju (CS) = 3

4. Setuju (S) = 4

5. Sangat Setuju (SS) = 5

Hasil analisis data untuk pertanyaan 1 menunjukkan sebanyak 37% responden menjawab sangat setuju, 63% responden menjawab setuju. Jadi disimpulkan bahwa aplikasi ini mudah untuk digunakan.

Hasil analisis data untuk pertanyaan 2 menunjukkan sebanyak 37% responden menjawab sangat setuju, 50% responden menjawab setuju, 10% responden menjawab cukup setuju dan 3% responden menjawab tidak setuju. Jadi disimpulkan bahwa tampilan aplikasi ini dapat dilihat dengan jelas.

Hasil analisis data untuk pertanyaan 3 menunjukkan sebanyak 34% responden menjawab sangat setuju, 47% responden menjawab setuju, 16% responden menjawab cukup setuju dan 3% responden menjawab tidak setuju. Jadi disimpulkan bahwa menu-menu pada aplikasi ini mudah dipahami dan tidak membingungkan.

Hasil analisis data untuk pertanyaan 4 menunjukkan sebanyak 54% responden menjawab sangat setuju, 44% responden menjawab setuju dan 2% responden menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini membantu dan mempermudah masyarakat untuk lebih mengenal aneka toga dan jamu.

23

5. Simpulan

Berdasarkan penelitian yang dilakukan disimpulkan bahwa HTML5 dan CSS3 adalah teknologi yang dapat digunakan untuk membangun aplikasi web yang dapat berjalan pada multi platform browser, responsive dan dinamis sesuai ukuran layar saat diakses. Walaupun bukan teknologi baru HTML5 dan CSS3 masih efektif digunakan dalam pembuatan sebuah website. Pemakaian fungsi drag and drop memudahkan user dalam memindahkan gambar. Aplikasi dapat digunakan dan diakses tanpa batasan waktu dan tempat.

Penelitian ini menghasilkan aplikasi Sistem Informasi Media Sosialisasi Jamu yang dapat membantu pengguna umum untuk mengetahui informasi-informasi umum tentang jamu dan dapat membuat jamu sendiri dengan panduan resep yang ada. Aplikasi ini dapat menyelesaikan masalah yang terjadi dalam kesulitan melakukan akses informasi tanpa mengeluarkan banyak biaya dan tenaga, tanpa batasan waktu dan tempat.

6. Pustaka

[1] Biofarmaka IPB, 2013, Quality of Herbal Medicine Plants and Traditional Medicine, Institut Pertanian Bogor, Bogor.

[2] Badan Penelitian dan Pengembangan Kesehatan Kementerian Kesehatan RI, 2010, Riset Kesehatan Dasar.

[3] Pusat Penelitian dan Pengembangan Perdagangan Dalam Negeri, 2009, Kajian Potensi Pengembangan Pasar Jamu, Kementerian Perdagangan. [4] Shinoda, Evrina, 2013, Pengembangan Jamu Sebagai Warisan Budaya. [5] Sudaryanto, dkk, Strategi Pemberdayaan UMKM Menghadapi Pasar Bebas

ASEAN.

[6] Adi Permana, Hapsoro,dkk, Eksplorasi HTML5 Dengan Studi Kasus Jejaring Sosial Untuk Pembelajaran Kolaboratif, Surabaya:ITS.

[7] Kristiana, Yohanes, 2013, Perancangan dan Implementasi Media Ajar Wayang Mahabarata Menggunakan HTML5 dan CSS3, Universitas Kristen Satya Wacana, Salatiga.

[8] Pakereng, M. A. Ineke, dkk, 2012, Analisis dan Perbandingan HTML4.01 dan HTML5 (Studi Kasus: Web Online Music Store),Program Studi Teknik Informatika FTI-UKSW, Salatiga.

[9] Shelyana,2012,available at:

https://shelyana.files.wordpress.com/2012/05/pengertian-jquery-html5-css3.pdf, Diakses pada 20 desember 2015.

[10]Redaksi, Agromedia, 2008, Buku Pintar Tanaman Obat, PT. Agromedia Pustaka.

[11]Prof. DR. (HC). H. W. Isnandar, 2008, Kumpulan 1001 Ramuan Obat Tradisional Indonesia, PJ. Dayang Sumbi.