Tujuan desain aplikasi ini adalah memodifikasi web untuk budidaya cabai merah yang telah dikaji pada penelitian sebelumnya menjadi sebuah aplikasi berbasis mobile cross-platform. Kebutuhan fungsional sistem tidak mengalami banyak perubahan, sedangkan kebutuhan non-fungsional sistem dimodifikasi agar memiliki tiga komponen penting pada desain web responsif.
Kebutuhan Fungsional
Berdasarkan penelitian terdahulu yang dilakukan oleh Supriyanto (2011) tentang sistem konsultasi online agribisnis cabai (Capsicum annuum L.), kebutuhan fungsional sistem mencakup :
1. Teknologi budidaya cabai, 2. Pemilihan varietas unggul, 3. Penentuan dosis pupuk dasar, 4. Pengendalian hama, 5. Pengendalian penyakit, 6. Pascapanen, 7. Analisis usaha, 8. Prakiraan cuaca, 9. Kebijakan pemerintah, 10.Informasi harga pasar.
Sesuai kebutuhan fungsional dari sistem budidaya cabai merah diatas maka kebutuhan fungsional yang telah dibuat sebelumnya ditransfer ke dalam bentuk cross-platform website, dengan sedikit modifikasi pada database dengan memperbarui data varietas cabai merah (Capsicum annuum L.), modul prakiraan cuaca yang lebih ter-update selama seminggu, serta interface website lebih bersahabat.
8
Kebutuhan Non-fungsional
Lembaga survei The Pew Research Center pada bulan Mei 2013 melakukan survei terhadap preferensi penggunaan perangkat untuk mengakses internet yang menyatakan bahwa sebanyak 63% pemakai internet, menggunakan ponsel mereka untuk mengakses internet dan sepertiga (34%) dari mereka yang menggunakan ponsel untuk mengakses internet lebih memilih ponsel dibandingkan dengan perangkat yang lain seperti, desktop, laptop¸ atau komputer tablet. Banyaknya jumlah pemakai internet yang mengakses via ponsel dibandingkan dengan perangkat lainnya menyebabkan masalah ketika website yang diakses dibuat hanya ditujukan untuk platform tertentu saja, maka pengembang atau perancang seringkali harus membuat beberapa versi website untuk mengatasi masalah tersebut (Gardner 2011). Berdasarkan data kebutuhan tersebut maka kebutuhan non-fungsional sistem yang dibutuhkan pengguna adalah kemampuan adaptasi aplikasi diberbagai platform perangkat mobile.
Desain/Perancangan Aplikasi
Tampilan dan desain aplikasi diambil dari template yang banyak tersedia di internet dengan melakukan modifikasi di dalamnya. Modifikasi dilakukan sesuai dengan kebutuhan fungsional sistem yang telah dibangun.
Desain Web Responsif
Desain/perancangan aplikasi dilakukan melalui pendekatan desain web responsif. Desain web responsif memiliki 3 komonen penting yaitu :
1. Fluid Layout
Fluid layout ini mengatur layout website agar dapat menyesuaikan dengan kondisi browser. Fluid Layout bertugas untuk menyekalakan halaman website agar halaman website tetap mengisi penuh layar perangkat/browser pada berbagai ukuran.
9
Gambar 3 Tampilan perangkat selular (mobile)
Gambar 2 dan Gambar 3 merupakan perbandingan tampilan pada ukuran layar yang berbeda. Gambar 2 dan Gambar 3 menunjukan bahwa website tampil dalam layar penuh berapapun ukuran layar browser. Fluid layout memiliki fluid grid yang memungkinkan tampilan web beradaptasi sesuai dengan lingkungan. Setiap elemen dalam perancangan fluid layout, ditentukan berdasarkan perbandingan relatif antara tinggi dan lebar halaman yang proporsional terhadap jendela browser, bukan berdasarkan dimensi berbasis pixel (fix grid) seperti halaman web pada umumnya.
Sebagai contoh dalam merancang halaman web dengan ukuran 960 pixel dengan konten area berukuran 685 pixel dan menu area 215 pixel dengan margin 20 pixel, maka persentase proporsionalnya secara sederhana dapat disajikan pada persamaan 1 : Fluid grid = ������ ���� � ���� ∗100 % (1) Sehingga : Konten area = 685 ���� 960 ���� ∗100 % = 71.4 % Menu area = 215 ���� 960 ���� ∗100 % = 22.4 % Margin = 20 ���� 960 ���� ∗100 % = 2.08 %
10
Keterangan : target area merupakan ukuran area yang diinginkan dan context adalah ukuran penuh halaman web.
Sehingga didapatkan hasil 71.4 % untuk ukuran konten area, 22.4 % untuk menu area dan margin sebesar 2.08 %.
2. Flexible Media
Media yang terdapat di dalam website yang responsif harus ditempatkan dalam fluid layout agar media (gambar ataupun video) ikut terskala secara proporsional terhadap jendela browser. Gambar kepala (header) website merupakan contoh dari konten media yang paling vital. Ukuran gambar harus di tetapkan dalam flexible media untuk mencegah gambar terpotong atau tertutup oleh jendela browser yang mengecil. Ukuran gambar dapat ditetapkan dalam:
i) max-width : 100% atau max-height : 100%
Sintaksis ini diaplikasikan jika ukuran jendela browser sama atau lebih besar dari set nilai yang digunakan.
ii) min-width : 100% atau min-height : 100%
Sintaksis ini diaplikasikan jika ukuran jendela browser sama atau lebih kecil dari set nilai yang digunakan.
iii) width : 100%
Sintaksis ini diaplikasikan agar gambar memiliki ukuran lebar yang sama dengan jendela browser.
Pada penelitian ini digunakan kontrol media (gambar) menggunakan sintaksis pada nomor tiga terutama pada bagian header. Contoh kontrol sintaksis pada penelitian ini terdapat pada Lampiran 1.
3. Media Queries
Media queries merupakan alat bantu dalam mendesain web responsif. Media quaries memungkinkan browser menampilkan gaya yang berbeda dengan sudut pandang berbeda sesuai dengan syarat spesifik yang telah ditentukan sebelumnya. Deklarasi media queries ditentukan berdasarkan target minimal atau maksimal besarnya ukuran layar perangkat, tidak seperti fluid layout dengan flexible media didalamnya yang menggunakan ukuran relatif. Berikut adalah kondisi umum pada media queries :
i) min-device-width atau min-device-height ii) max-device-width atau max-device-height
min-device-width atau min-device-height digunakan jika ukuran layar perangkat sama dengan atau lebih besar dari nilai yang ditentukan, sedangkan max-device-width atau max-device-height digunakan jika ukuran layar perangkat sama dengan atau lebih kecil dari nilai yang ditentukan.
Smartphone pada umumnya mempunyai media queries dengan resolusi perangkat mencapai 480 × 854, seperti pada iphone dan Android. Perangkat yang digunakan untuk mengakses web memiliki nilai kisaran resolusi sendiri. Hal ini tidak layak untuk menggabungkan semua resolusi yang mungkin ke dalam desain, tetapi pengelompokan nilai kisaran resolusi seperti pada Tabel 2 ke dalam kategori bisa memutuskan untuk memfokuskan desain.
11
Tabel 2 Pengelompokan nilai kisaran resolusi.
Jenis Perangkat Lebar resolusi atau orientasi
Smartphone Kurang dari 570px
Tablet Mendukung orientasi
Small-screen laptop and desktop 570px – 1280px
Widescreen monitor Lebih besar dari 1280px
Sumber : Gardner BS. 2011
Menambahkan media queries pada nilai resolusi yang ditentukan pada Tabel 2, perancang dapat secara efektif menentukan layout dan konten untuk context perangkat. Sebagai contoh, Motorola DROID2 dengan resolusi layar 480 × 854 pixel, dan nilai yang ditentukan pada deklarasi min-device-width dan max-device-width sebesar 320 × 569 pixel maka ukuran halaman website akan berubah menjadi 320 × 854 pixel atau 480 × 320 pixel. Pada layar iPhone 4 yang menampilkan resolusi tinggi (640 × 960) pixel media queries pada CSS akan menyesuaikan di 320 × 480 pixel dengan rasio pixel 2. Salah satu contoh media queries dari sistem disajikan pada Gambar 4 dan Gambar 5.
Sintaksis media queries pada penelitian ini dibuat pada file CSS yang dapat dilihat pada Lampiran 2.
12
Gambar 5 Contoh media queries pada menu prakiraan cuaca (landscape) Desain Basis Data
Desain object relational database menerangkan mengenai hubungan data data yang digunakan dalam pengembangan sistem ini. Tabel-tabel yang digunakan pada sistem ini menyimpan informasi-informasi mengenai pemilihan varietas, teknologi budidaya cabai merah, hama dan penyakit. Desain hubungan relasi antar tabel-tabel tersebut ditunjukkan seperti pada Lampiran 4.
Desain Antarmuka (User Interface)
Desain antarmuka aplikasi memiliki tiga menu utama yaitu menu cabai, menu konsultasi dan menu about. Halaman konsultasi memiliki 6 submenu diantaranya pemilihan varietas unggul, budidaya, analisis usaha, prakiraan cuaca, kebijakan pemerintah dan informasi harga pasar. Submenu budidaya terdiri 5 sub-submenu di dalamnya, diantaranya penentuan dosis pupuk, pengendalian penyakit, pengendalian hama, teknologi budidaya cabai, dan pascapanen. Struktur menu aplikasi bisa dilihat seperti pada Gambar 6.
13
Gambar 6 Struktur menu aplikasi Pengujian
Uji Kompatibilitas
Pada tahap ini dilakukan uji kompatibilitas aplikasi di berbagai web browser, web browser yang dipilih adalah Internet Eksplorer, Mozila Firefox, dan Google Chrome, serta implementasi sistem fungsional. Perbedaan hasil uji kompatibilitas dapat dilihat pada Gambar 7, Gambar 8 dan Gambar 9.
14
Gambar 7 Tampilan pada Google Chrome versi desktop
15
Gambar 9 Tampilan pada Internet Explorer versi desktop
Pada Internet explorer tampilan terlihat sedikit berbeda, ini dikarenakan CSS media queries pada Internet Explorer yang berbeda dengan Mozilla Firefox dan Google Chrome. Selain diuji pada tampilan desktop, aplikasi juga diuji pada tingkat ukuran layar yang berbeda-beda seperti pada Gambar 10 dan 11.
16
Gambar 11 Perbandingan ukuran layar aplikasi pada aplikasi Dreamweaver Selain pada desktop web browser, aplikasi juga di uji pada browser bawaan sistem operasi perangkat selular (smartphone), yaitu Android, iOS dan Windows phone. Browser bawaan untuk perangkat selular (smartphone) biasanya menggunakan zoom default yang berbeda-beda. Uji kompatibilitas pada browser bawaan masing-masing platform telepon selular dilakukan pada Windows Phone dan Apple, yaitu pada Internet Explorer 11 di Windows Phone 8.1 dan Safari 7 pada iphone 4s (Gambar 12 dan Gambar 13).
17
Gambar 13 Uji kompatibilitas pada Internet Explorer 11 Implementasi sistem
Setelah dilakukan uji kompatibilitas sistem, sistem diimplementasikan kedalam server agar modul-modul fungsional dapat diakses oleh pengguna. Modul-modul fungsional sistem terdapat di dalam submenu konsultasi pada halaman utama (Gambar 14). Menu-menu fungsional disesuaikan dengan kebutuhan fungsional sistem.
Gambar 14 Halaman utama
Menu konsultasi terdiri dari menu-menu pemilihan varietas unggul, budidaya, analisis usaha, prakiraan cuaca, kebijakan pemerintah, informasi harga pasar. Pemilihan varietas unggul (Gambar 15) ditentukan berdasarkan parameter ketinggian lokasi dengan keluaran jenis varietas apa saja yang cocok untuk dibudidayakan.
18
Gambar 15 Form pemilihan varietas unggul
Gambar 16 Tampilan hasil pemilihan varietas
Gambar 16 menunjukkan hasil rekomendasi benih cabai berdasarkan kondisi lokasi. Rekomendasi yang diberikan berupa nama benih, produktivitas cabai, dan jenis cabai, pada halaman analisis usaha tani (Gambar 17) terdiri dari form yang harus diisi oleh pengguna untuk menjalankan perhitungan usaha tani. Parameter usaha tani ditentukan dengan produktivitas jenih benih cabai dengan asumsi populasi tanaman yang digunakan 17.000 pohon/ha, analisis usaha tani dihitung untuk satu musim tanam (Supriyanto 2011).
19
Gambar 17 Halaman analisis usaha
Gambar 18 Tampilan hasil analisis usaha
Gambar 18 menunjukkan hasil konsultasi analisis usaha tani. Berdasarkan hasil analisis, didapatkan total pendapatan sebesar 72 juta rupiah dengan keuntungan Rp29 067 600. B/C rasio dari hasil perhitungan adalah 1.68 sedangkan BEP harga sebesar Rp7 152/kg dan BEP produksi Rp3 576 kg.
Halaman prakiraan cuaca (Gambar 19) pada menu konsultasi ini menggunakan sebuah widget forecast.io dimana widget ini terkoneksi ke internet untuk melihat prakiraan cuaca secara realtime selama seminggu pada suatu daerah.
20
Gambar 19 Halaman prakiraan cuaca
Selain menu prakiraan cuaca pada menu konsultasi juga terdapat menu kebijakan pemerintah dan informasi harga pasar. Menu kebijakan pemerintah (Gambar 20) berisi tentang rencana kerja dan strategi pembangunan hortikultura Kementrian Pertanian Indonesia yang mengacu pada pasal-pasal dalam Undang-Undang No 13 tahun 2010 tentang hortikultura. Terdapat 6 pasal yang menjadi acuan dalam pembangunan hortikultura tahun 2015, yaitu pasal 40, 42, 43, 44, 45 dan 47.
21
Gambar 21 Halaman isi kebijakan pemerintah
Pengguna dapat memilih pasal-pasal tersebut untuk dibaca. Setelah pengguna memilih informasi yang diinginkan, maka pengguna masuk ke halaman selanjutnya (Gambar 21) yang menjelasakan isi dari pasal-pasal dalam Undang-Undang No 13 tahun 2010 tentang hortikulutura, sedangkan untuk halaman informasi harga pasar pada aplikasi ini masih tersedia secara statis, informasi yang ditampilkan tidak bisa dilihat secara real time. Informasi halaman ini merujuk dari website Direktorat Jendral Pengolahan dan Pemasaran Hasil Pertanian, Kementerian Pertanian Republik Indonesia (2015) yang tersedia pada halaman Pelayanan Informasi Pasar (http://pip.kementan.org/). Halaman informasi harga pasar dapat dilihat pada Gambar 22.
22
Menu budidaya memiliki 5 submenu di dalamnya, yaitu penentuan dosis pupuk, pengendalian penyakit, pengendalian hama, teknologi budidaya cabai, dan pascapanen. Menu penentuan dosis pupuk pada aplikasi ini merupakan penentuan dosis pupuk organik. Basis pengetahuan yang dipakai pada sistem mengacu pada basis pengetahuan yang telah dibuat sebelumnya oleh Maulana (2014). Perhitungan dilakukan dengan memasukkan beberapa parameter sesuai kebutuhan dan kondisi yang diinginkan. Parameter tersebut adalah jenis pemupukan, luas lahan, jenis tanah, pH tanah, hasil PUTK (perangkat uji tanah kering), jenis pupuk organik, jenis pupuk majemuk, pupuk tunggal N, P dan K. Halaman penetuan dosis pupuk dasar ini terdiri dari 2 halaman, halaman utama (Gambar 23) merupakan halaman input dan halaman hasil (Gambar 24) merupakan halaman hasil perhitungan.
Gambar 23 Halaman input penentuan dosis pupuk
23 Menu konsultasi penyakit dan hama diimplementasikan dengan memberikan pilihan kepada pengguna, mengenai hama apa yang menyerang dan gejala-gejala penyakit apa yang muncul mulai dari penanaman hingga panen. Pada pengendalian penyakit, gejala-gejala ditanyakan secara berurut mengikuti alur hingga mencapai kesimpulan akhir, sedangkan untuk pengendalian hama, diberikan pilihan kondisi ciri-ciri fisik serangan hama yang menyerang tanaman cabai. Urutan menu pengendalian penyakit dapat dilihat pada Gambar 25 dan Gambar 26 sementara untuk hasil kesimpulan diagnosa dapat dilihat pada Gambar 27.
Gambar 25 Menu pengendalian penyakit
24
Gambar 27 Halaman kesimpulan diagnosa penyakit
Halaman urutan pengendalian hama dapat dilihat pada Gambar 28 dan Gambar 29. Gambar 29 menampilkan halaman penjelasan tentang hama yang dipilih dan cara pengendaliannya.
25
Gambar 29 Halaman penjelasan pengendalian hama
Dua submenu terakhir pada menu budidaya adalah menu teknologi budidaya cabai dan pascapanen. Menu teknologi budidaya cabai berisi SOP (standard operational procedure) di lapangan pada penanaman cabai, didalamnya berisi pertanyaan permasalahan yang terjadi di lapangan. Gambar 30 dan 31 merupakan tampilan user interface dari menu teknologi budidaya cabai.
26
Gambar 31 Halaman rekomendasi teknologi budidaya cabai
Menu pascapanen terdiri dari dua bagian, yaitu pascapanen primer dan sekunder, pada halaman ini berisi informasi penanganan pascapanen dan daftar kelas mutu cabai berdasarkan SNI (Standar Nasional Indonesia). Halaman pascapanen dapat dilihat pada Gambar 32, 33 dan 34.
27
Gambar 33 Halaman pascapanen primer
Gambar 34 Halaman standar mutu cabai Kelebihan dan Kekurangan Sistem
Tampilan yang responsif dan fleksibel yang dimiliki oleh aplikasi web budidaya cabai merah (Capsicum annuum L.) menjadi keunggulan dari aplikasi ini. Tampilan yang responsif dan fleksibel memudahkan pengguna dalam berinteraksi dengan informasi yang disediakan, selain menambah pengalaman pengguna dalam berinteraksi, informasi yang disampaikan juga lebih efektif dan efisien.
Masih terdapat beberapa kekurangan dari aplikasi web budidaya cabai merah (Capsicum annuum L.) ini, seperti ketidaksesuaian template di beberapa modul membuat kemampuan menampilkan informasi pada perangkat yang memiliki ukuran layar dibawah 5 inchi (berkisar 480 × 854 pixel) menjadi kurang
28
efisien, belum mengikuti kaidah perancangan web interface seperti ditujukan untuk pengguna, utilitas dan kemudahan dipelajari, sesuai dengan spesifikasi kebutuhan, mengetahui dan mematuhi batasan media website dan internet, website harus mematuhi prinsip GUI, navigasi sebagai sarana untuk mendapatkan informasi, dan tampilan yang baik. Aplikasi ini tidak mengikuti prinsip GUI yang telah dikenal dekat oleh pengguna, karena tujuan dari desain antarmuka aplikasi ini adalah mobile first, dimana proses desain dimulai dengan perangkat mobile dan set default tampilan perangkat mobile.