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

Menampilkan Menu Services

Pilih Menu Resep Pembuatan

Menampilkan Resep Pembuatan

Mengirim Request ke Database

Request Data

Pilih Resep

Menampilkan Resep Pilihan

User Sistem Database

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

User Sistem Database

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 1 Script 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 2 Script 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 Responsive Web User

Kode Program 3 Script 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 4 Script 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,

tampilan dari zoom effec dapat dilihat pada Gambar 12.

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

Gambar 13 Tampilan Efek Menu Bar

18

Kode Program 6 Script 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 7 Script 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.

Gambar 18 Tampilan Kelola Data Produk

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

Video Valid

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 sample user. Sample user 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.