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 tampilanuser 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 IEInternet Explorer.
Kode Program 4 Script Zoom Effect
01 02
03 04
05 06
07 08
... img.zoom-img {
transform: scale1, 1; -webkit-transform: scale1, 1;
-moz-transform: scale1, 1; -ms-transform: scale1, 1;
-o-transform: scale1, 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: rotate45deg; -webkit-transform: rotate45deg;
-o-transform: rotate45deg; -moz-transform: rotate45deg;
-ms-transform: rotate45deg; }
...
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.comembedrsQ05Jfeq1giframe ...
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 allowDropev {
ev.preventDefault; }
function dragev { ev.dataTransfer.setDatatext, ev.target.id;
} function dropev, 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-kesalahanbug 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 errorbug 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
19 11
2 Tampilan dan huruf dari aplikasi ini dapat dilihat dengan
jelas 1
3 15
11 3
Menu-menu pada aplikasi ini mudah dipahami dan tidak membingungkan
1 5
14 10
4 Aplikasi ini membantu dan mempermudah masyarakat untuk
mengetahui informasi seputar jamu dan mengenal aneka toga
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
