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
1
2
3
4
5
6
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
7
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].
8
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: Identifikasi Masalah
Identifikasi Kebutuhan Sistem Perancangan Sistem
Pembuatan Website
Implentasi dan Pengujian Sistem 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 9
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:
10
Lihat katalog bahan jamu
Lihat informasi jamu
Lihat resep pembuatan user
Lihat ragam manfaat jamu
memainkan permainan
Lihat video proses pembuatan
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. tambah ubah
<<extend>>
hapus
<<extend>> kelola katalog bahan
<<extend>>
<<extend>>
tambah resep
admin kelola data resep
<<extend>> hapus resep <<extend>>
kelola data manfaat ubah resep
<<extend>>
tambah data manfaat
<<extend>> <<extend>>
ubah data manfaat
hapus data manfaat
Gambar 5 Use Case Diagram Admin
11
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. User
Sistem
Database
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 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.
12
User
Sistem
Database
Menampilkan Menu Services
Pilih Menu Resep Pembuatan Mengirim Request ke Database Request Data Menampilkan Resep Pembuatan
Pilih Resep
Menampilkan Resep Pilihan
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].
13
User
Sistem
Database
Menampilkan Menu Services
Pilih Menu Ragam Manfaat Jamu
Request Database
Request Data
Menampilkan Ragam Manfaat
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]. View
Katalog Produk +nama_produk +harga +jumlah +gambar +ulasan_produk
Menu Resep
Permainan
Informasi Jamu
+nama_resep +gambar_jadi +bahan +proses_pembuatan
+nama_resep +nama_bahan +gambar_bahan +gambar_jamu
+apa_itu_jamu +sejarah_jamu +ragam_dan_manfaat
Controller
KatalogProses +LihatKatalogProduk()
ResepProses +LihatDaftarResep()
BahanProses +Permainan() Model JamuProses Produk
Resep
Bahan
Jamu
+id_produk +nama_produk +harga +jumlah +gambar +ulasan_produk
+id_resep +nama_resep +gambar_jadi +bahan +proses_pembuatan
+id_bahan +id_jamu +nama_bahan +gambar_bahan
+MemilihResepPermainan()
+id_jamu +nama_jamu +gambar_jamu
Gambar 10 Class Diagram
14
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. Web Server
User (Aplikasi Web)
Database Server PHP
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.
15
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. 16
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
17
Kode Program 6 Script Embed Video 01 02 03 04
... <iframe width="420" height="245" src="http://www.youtube.com/embed/rsQ05Jfeq1g"> ...
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.
18
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.
19
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
20
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
Login
Tambah data resep
Ubah data resep Hapus data resep Load data resep Load data manfaat Load data admin Load data bahan
Kondisi Username dan password benar Username dan password salah maupun kosong Form diisi dengan benar Form diisi beberapa atau kosong Form diisi dengan benar Konfirmasi dengan benar
Output yang diharapkan
Output yang dihasilkan sistem
Status Pengujian
Sukses login
Sukses login
Gagal login
Gagal login
Sukses tambah data Gagal tambah data
Sukses tambah data Gagal tambah data
Valid
Sukses ubah data Sukses hapus data Sukses load data Sukses load data Sukses load data Sukses load data
Sukses ubah data Sukses hapus data Sukses load data Sukses load data Sukses load data Sukses load data
Valid Valid Valid Valid Valid Valid
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 Sukses menampilkan katalog bahan
Lihat katalog bahan
Memilih menu dengan benar
Sukses menampilkan katalog bahan
Memainkan Permainan
Memilih menu dengan benar
Sukses menampilkan permainan
Lihat informasi jamu
Memilih menu dengan benar
Lihat resep pembuatan
Status Pengujian Valid
Sukses menampilkan permainan
Valid
Sukses menampilkan informasi jamu
Sukses menampilkan informasi jamu
Valid
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
21
Valid
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 1
Pernyataan Aplikasi sistem sosialisasi jamu ini mudah digunakan
STS 0
TS 0
CS 0
S 19
SS 11
2
Tampilan dan huruf dari aplikasi ini dapat dilihat dengan jelas Menu-menu pada aplikasi ini mudah dipahami dan tidak membingungkan Aplikasi ini membantu dan mempermudah masyarakat untuk mengetahui informasi seputar jamu dan mengenal aneka toga
0
1
3
15
11
0
1
5
14
10
0
0
2
13
16
3 4
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 4. Setuju (S) 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. 22
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 informasiinformasi 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-html5css3.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.
23
