Perancangan Sistem Deskripsi
Sistem informasi agroindustri tanaman obat (SIATOK) merupakan sebuah website yang dirancang untuk menyajikan informasi terpadu dan terintegerasi tentang agroindustri tanaman obat kepada stakeholder terkait. SIATOK dapat dimanfaatkan oleh beberapa stakeholder dalam pengembangan agroindustri tanaman obat yaitu perusahaan dan konsumen dalam mencari informasi tentang agroindustri tanaman obat.
Informasi yang ditampilkan dalam situs SIATOK berupa informasi tentang komoditas tanaman obat yang meliputi profil komoditas, khasiat komoditas, kandungan komoditas, serta gambar komoditas tanaman obat. Kemudian informasi tetang produk olahan yang meliputi profil produk, khasiat produk, harga produk, dan gambar produk. Selain itu, dalam situs SIATOK ini juga disajikan informasi tentang pengolahan produk yang meliputi proses pengolahan dan diagram alirnya.
SIATOK terdiri dari beberapa layer utama yaitu sistem manajemen dialog (user interface), pusat pengolahan, dan sistem manajemen basis data (Gambar 3). Sistem manajemen dialog dirancang untuk mempermudah interaksi antar muka antara pengguna dan sistem SIATOK. Pada sistem manajemen dialog, pengguna dapat melakukan interaksi dengan sistem dengan menggunakan pointer untuk mengarahkan dan klik untuk melakukan perintah. Sistem manajemen dialog dapat
9
menerima masukan (input) dari pengguna dan menampilkan keluaran (output) dari sistem. Masukan dari pengguna dapat berupa perintah dan data. Sedangkan keluaran dari sistem dapat berupa informasi dalam bentuk pernyataan, tabel, dan informasi dalam bentuk cetak.
Gambar 3 Konfigurasi Model SIATOK
Pusat pengolahan merupakan modul utama yang berfungsi untuk mengendalikan akses antara sistem manajemen dialog dengan sistem manajemen basis data. Pusat pengolahan juga berperan dalam mengintegrasikan elemen elemen sistem lain menjadi satu kesatuan sistem SIATOK. Sistem Manajeman Basis Data merupakan modul yang berfungsi sebagai pusat pengelolaan data yang kemudian diproses pada pusat pengolahan dan ditampilkan sebagai informasi pada sistem manajemen dialog (user interface).
Desain Proses Sistem
Perancangan proses dilakukan dengan cara menganalisa aliran-aliran data yang terjadi di dalam sistem. Hasil analisis aliran data dalam sistem kemudian digambarkan dalam bentuk data flow diagram (DFD). DFD merupakan gambaran sistem dalam bentuk jaringan atau grafis dari sudut pandang data yang diproses. DFD terdiri dari notasi penyimpanan (data store), proses (process), aliran data (flow data), dan sumber masukan (entity) (Yakub 2012). DFD ini menunjukkan
PENGGUNA
SISTEM MANAJEMEN DIALOG
PUSAT PENGOLAHAN
SISTEM MANAJEMEN BASIS DATA
DATA PROSES PENGOLAHAN DATA KOMODITAS DATA PRODUK DATA PROFIL PERUSAHAAN
10
aliran informasi masuk dan keluar pada sistem dengan konsep dekomposisi dimana subbagian dapat dijelaskan lebih rinci pada tingkatan di bawahnya.
Data Usaha *)
Profil Perusahaan, Profil komoditas, khasiat komoditas, gambar komoditi, profil produk, khasiat produk, harga produk, gambar produk, proses pengolahan, diagram alir
Keterangan : Entitas Aliran data Proses Data Store
Gambar 4 Data Flow Diagram Level 0 SIATOK
Model DFD level 0 merupakan gambaran dari keseluruhan sistem dalam satu proses dengan sumber dan tujuan data secara jelas. Pada DFD level 0 SIATOK (Gambar 4), proses utama sistem digambarkan dengan nama SIATOK dengan empat entitas utama yaitu admin, pengguna (user), PT. SS, dan pustaka. Aliran data dari entitas admin ke proses utama berfungsi untuk menambah, menghapus, dan memperbaharui data. Sedangkan Aliran data dari proses utama menjadi feedback bagi entitas admin. Aliran data dari proses utama ke entitas pengguna berupa informasi komoditi, produk olahan, dan proses pengolahan. Sedangkan aliran data dari pengguna ke proses utama adalah umpan balik (feedback). Aliran data dari PT. SS ke proses utama berupa data usaha yang mencakup profil perusahaan, profil komoditas, khasiat komoditas, gambar komoditas, profil produk, khasiat dari produk, harga produk, gambar produk, dan proses pengolahan. Sedangkan aliran data dari entitas pustaka adalah data pendukung yang dibutuhkan untuk melengkapi data dari entitas PT. SS.
11
Gambar 5 Data Flow Diagram Level 1 SIATOK
Data Flow Diagram (DFD) level 1 merupakan dekomposisi dari diagram aliran data level 0 untuk menjelaskan proses utama pada sistem ke dalam sub-proses yang lebih rinci (Faqih et al 2011). Pada DFD level 1 SIATOK (Gambar 5 ), proses yang terjadi dalam sistem mengalami dekomposisi sehingga menjadi lebih terperinci. Seluruh proses pada DFD level 1 memiliki keterkaitan dengan dengan proses lainnya. Interaksi secara tidak langsung terjadi antara administrator dengan pengguna. Interaksi ini terjadi melalui data yang dimasukkan oleh administrator kedalam sistem, diolah oleh sistem, kemudian ditampilkan kepada pengguna dalam bentuk informasi. Pada DFD level 1 SIATOK menunjukkan bahwa terjadi interaksi antara proses dalam sistem dengan seluruh database. Database dalam sistem SIATOK meliputi data profil perusahaan, data komoditas, data produk olahan, dan proses pengolahan.
Data Flow Diagram (DFD) level 2 merupakan dekomposisi dari diagram aliran data level 1 untuk menjelaskan subproses pada sistem yang lebih rinci. DFD level 2 SIATOK dijabarkan dari subproses dari diagram aliran data level 1 yaitu proses input data, proses update data, dan proses pencarian. DFD level 2 proses input data dapat dilihat pada Gambar 6.
12
Gambar 6 Data Flow Diagram Level 2 Proses Input Data
Pada DFD level 2 proses input data, terlihat bahwa peng-input-an data dilakukan oleh seorang admin kemudian data disimpan dalam database pada tabel yang sudah ditentukan. Data kemudian ditampilkan dan bentuk informasi pada halaman antarmuka sistem dengan perintah klik. Proses yang terjadi pada DFD level 2 proses update data hampir sama dengan proses input data, yaitu admin menngubah data yang telah di-input sebelumnya, kemudian data di-update di database, dan ditampilkan dalam bentuk informasi pada antarmuka sistem. DFD level 2 proses update data dapat dilihat pada Gambar 7.
Gambar 7 Data Flow Diagram Level 2 Proses Update Data
Pada DFD level 2 proses pencarian, aliran data dimulai dari pengguna pengguna. Pengguna memasukkan kata kunci pada kolom pencarian, sistem akan melakukan proses searching melalui pusat pengolahan kedalam database.
13
Kamudian, hasilnya akan ditampilkan sesuai dengan query yang dimasukkan. Proses aliran data yang terjadi dapat dilihat pada gambar 8.
Gambar 8 Data Flow Diagram Level 2 Proses Pencarian
Desain Basis Data Sistem
Basis data didefinisikan sebagai himpunan kelompok data (arsip) saling berhubungan yang diorganisir sedemikian rupa agar dapat kembali dengan mudah (Fathansyah 2002). Perancangan Model basis data dimulai dengan analisis aliran data dalam sistem, kemudian dilanjutkan dengan perancangan model data konseptual, dan implementasi model data konseptual menjadi model data fisik. Analisis aliran data dan proses pada DFD level 2 sudah cukup menggambarkan keseluruhan model SIATOK sehingga DFD level 2 yang telah dianalisa dapat digunakan sebagai dasar penyusunan model data konseptual (Lampiran 1) yang menggambarkan hubungan antar entitas di dalam sistem.
Tahap selanjutnya yaitu mengimplementasikan model data konseptual menjadi model data fisik. Berbeda dengan model data konseptual yang menggambarkan hubungan antar entitas, pada model data fisik menggambarkan hubungan antar tabel dalam database. Model data fisik disusun dengan format database MySql berdasarkan model data konseptual yang telah disusun sebelumnya. Model data fisik SIATOK dapat dilihat pada lampiran 2.
Pengelolaan basis data memerlukan perangkat lunak yang disebut Database Management System (DBMS) yang merupakan koleksi terpadu dari program yang digunakan untuk mengakses dan merawat basis data. Menurut Post (1999), DBMS memiliki keuntungan sebagai berikut : menjadi sumber daya bersama dari berbagai program aplikasi atau pengguna. Salah satu program manajemen basis data adalah MySQL. MySQL merupakan manajemen yang bersifat open source. MySQL merupakan suatu sistem basis data yang menyimpan data dalam tabel terpisah.
14
Desain Antarmuka Sistem Informasi
Desain antarmuka sistem informasi agroindustri tanaman obat disesuaikan dengan kebutuhan yang telah dianalisis. Menurut analisis kebutuhan, terdapat lima kelompok informasi utama yang dibutuhkan oleh setiap stakeholders. Maka, menu dari sistem informasi ini dibagi menjadi lima menu utama yaitu, menu profil perusahaan, komoditas tanaman obat, produk olahan, dan proses pengolahan. Selain itu, antarmuka juga dilengkapi dengan menu tambahan yaitu menu about siatok, dan menu pencarian (Gambar 9).
Gambar 9 Desain antarmuka SIATOK
Implementasi sistem
Website adalah jaringan informasi yang menggunakan protokol (Hyper Text Transfer Protocol) dan FTP (File Transfer Protocol). Sumberdaya yang berguna dalam protokol diidentifikasi oleh pengenal global berupa alamat URL (Uniform Resource Locator). Website dapat diakses melalui interface sederhana dan mudah digunakan. Informasi ini biasanya disajikan dalam bentuk hypertext atau multimedia, dan disediakan oleh server yang berlokasi di berbagai penjuru dunia (Farid 2002).
Halaman web terbagi menjadi dua macam, yaitu halaman statis dan halaman dinamis. Halaman web statis biasanya merupakan HTML yang diketik melalui teks editor yang disimpan dalam bentuk format data *.html atau *.htm. HTML merupakan bahasa tanda yang digunakan untuk membangun dokumen World Wide Web (www) (Werbach 1996). Penggunaan HTML dalam sistem informasi
Profil Perusahaan Produk Olahan Komoditas Proses Pengolahan About Slider Footer About SIATOK Wisata Edukasi PT. SS Pencarian Login Post
SIATOK
15
ini adalah pada penyususan konten (informasi). Sedangkan halaman web dinamis dibangun dengan menggunakan bahasa PHP (Personal Hypertext Preprocessor). PHP merupakan sebuah bahasan pemograman yang menyatu dengan tag-tag HTML. PHP dieksekusi di server, dan dalam pembuatan web dinamis. Tujuan dari bahasa scripting ini adalah membuat aplikasi-aplikasi yang dijalankan pada teknologi web. Aplikasi umumnya akan memberikan hasil pada web browser, tetapi prosesnya di web server (Farid 2002). Sistem informasi agroindustri tanaman obat (SIATOK) dibangun dengan menggunakan Content Management System (CMS) WordPress 4.3.1 dengan template Asteria, lisensi General Public License (GPL) yang berbasis PHP. CMS adalah suatu sistem yang dapat melakukan publishing, editing, modifying, deleting, dan mengorganisasi konten secara terpusat (Andre 2015).
Pemograman dilakukan pada localhost server (intranet server) yang diakomodasikan oleh perangkat XAMPP v3.2.1 yang mengintegerasikan skrip bahasa pemograman PHP dan Database Management System MySql. Konten disusun berdasarkan data yang diperoleh dari PT. SS dan sumber pustaka yang kemudian diubah menjadi format HTML dan diinput kedalam basis data melalui ekstensi Wordpress Content Editor.
Sistem informasi Agroindustri tanaman obat berbasis web ini diimplementasi pada local hosting dengan nama direktori “siatok” di c:xampp/htdocs. Setelah sistem informasi diimplementasi pada layanan local hosting server, sistem informasi diuji aksesibilitasnya menggunakan web browser. Pada pengujian ini dilakukan pada web browser google chrome dengan alamat domain http://localhost/siatok. Tampilan beranda SIATOK dapat dilihat pada gambar 11.
Gambar 10 Tampilan beranda website SIATOK
Beranda program SIATOK (Gambar 10) menampilkan menu-menu yang dikelompokkan dari kelompok informasi yang ingin disajikan. Program komputer SIATOK terdiri dari empat kelompok informasi yaitu informasi profil perusahaan, informasi komoditas, informasi produk olahan, dan informasi proses pengolahan.
16
Informasi yang disajikan dalam program komputer SIATOK dapat diakses oleh administrator dan pengguna umum. Administrator merupakan sebuah akun yang memiliki hak akses penuh terhadap seluruh informasi yang tersedia. Administrator juga memiliki kewenangan dalam memasukkan data, memperbaharui data, dan menghapus data dalam program komputer SIATOK.
Pengguna sistem adalah konsumen yang dapat mengakses informasi komoditas tanaman obat, informasi produk olahan, dan informasi proses pengolahan. Informasi yang tersedia dalam sistem SIATOK dapat ditambah oleh administrator sistem melalui halaman input data yang disediakan oleh CMS WordPress 4.3.1 pada alamat URL http://localhost/siatokwp-admin/post-new.php. Untuk melakukan input data, administrator sistem dapat memiliki menu “posts”, kemudian memilih submenu “Add new”. Pada proses input data (Gambar 11), admin sistem harus mengisi field judul dan field isi. Pada field isi input data komoditas, admin harus mengisi data-data seperti profil komoditas, khasiat, dan gambar komoditas. Sedangkan pada field isi input data produk, admin harus mengisi data-data seperti profil produk, khasiat produk, harga produk, dan gambar produk. Untuk field isi pada proses input data proses pengolahan diisi dengan diagram alir proes.
Gambar 11 Tampilan halaman input data SIATOK
Setelah mengisi field input data, administrator sistem menekan tombol
“publish” untuk menyimpan data yang telah diiput dan mempublikasikannya.
Halaman input data ini hanya dapat diakses oleh administrator sistem. Setelah data di publikasikan, administrator sistem juga dapat memperbaharui data pada
17
Gambar 12 Tampilan halaman update data SIATOK
Pengguna dapat melihat informasi daftar komoditas yang tersedia dalam
program komputer SIATOK melalui menu “komoditas” atau melalui alamat
localhost/siatok/komoditas. Jika menu ini dipilih, maka akan ditampilkan informasi daftar komoditas yang tersedia dalam database SIATOK (Gambar 13). Misalnya, pengguna ingin mendapatkan informasi tentang komoditas bunga rosela, maka pengguna dapat mengakses melalui link yang tersedia pada kolom “detail”,
sehingga pengguna akan dialihkan ke halaman komoditas Bunga rosela pada alamat URL http://localhost/siatok/komoditas/bunga-rosela.
18
Gambar 14 Tampilan halaman komoditas bunga rosela
Pada halaman komoditas bunga rosela, pengguna dapat melihat informasi profil komoditas bunga rosela, gambar komoditas bunga rosela, dan khasiat dari komoditas bunga rosela (Gambar 14). Melalui halaman ini pengguna juga dapat mengakses produk olahan dari bunga rosela yang terdapat di PT. SS dengan
menekan tombol “produk bunga rosela” (Gambar 15).
Gambar 15 Tampilan tombol produk olahan dari halaman komoditas bunga rosela
Apabila pengguna menekan tombol “produk olahan bunga rosela”, maka
pengguna akan dialihkan ke halaman produk-produk olahan dari komoditas Bunga rosela yang terdapat di PT.SS dengan alamat URL http://localhost/siatok/tag/produk-bunga-rosela.
19
Gambar 16 Tampilan pilihan produk olahan dari komoditas bunga rosela Gambar 16 menunjukkan bahwa di PT.SS terdapat dua jenis produk olahan dari komoditas bunga rosela, yaitu sirup bunga rosela dan teh bunga rosela. Apabila pengguna ingin mengetahui informasi lebih lanjut tentang produk sirup bunga rosela, dapat dilakukan dengan menekan gambar produk sirup bunga rosela.
Gambar 17 Tampilan halaman produk sirup bunga rosela
Dengan menekan gambar produk bunga rosela, maka pengguna akan dialihkan ke halaman produk bunga rosela (Gambar 17) dengan alamat URL http://localhost/siatok/sirup-bunga-rosela. Pada halaman ini, pengguna dapat memperoleh informasi tentang produk sirup bunga rosela yang meliputi gambar produk, profil produk, khasiat produk, dan harga produk. Bagi pengguna yang
20
ingin melihat proses pengolahan komoditas tanaman obat menjadi produk sirup
bunga rosela dapat menekan tombol “proses pengolahan bunga rosela” di akhir
halaman produk bunga rosela (Gambar 18).
Gambar 18 Tampilan tombol proses pengolahan bunga rosela
Setelah menekan tombol “proses pengolahan bunga rosela”, pengguna akan
dialihkan ke halaman proses pengolahan sirup bunga rosela dengan alamat URL htpp://localhost/siatok/pengolahan-sirup-bunga-rosela (Gambar 19). Informasi yang terdapat pada halaman ini berupa bahan-bahan yang digunakan, cara pembuatan, dan diagram alir proses pengolahan dari komoditas bunga rosela hingga menjadi produk sirup bunga rosela.
Gambar 19 Tampilan halaman proses pengolahan sirup bunga rosela
Selain itu, sistem SIATOK juga memiliki fitur pencarian yang dapat digunakan oleh pengguna untuk mencari informasi yang dibutuhkan. Pengguna dapat mengakses menu pencarian dengan menekan menu pencarian pada halaman depan program SIATOK (Gambar 20) atau pada alamat http://localhost/siatok/?s.
21
Gambar 20 Tampilan pilihan menu pencarian
Setelah memilih menu pencarian, pengguna dapat memasukkan kata kunci pencarian sesuai dengan kebutuhan informasi yang ingin dicari. Misalnya pengguna ingin mencari tanaman obat apa saja yang dapat mengatasi penyakit diabetes. Maka kata kunci yang dimasukkan pada menu pencarian adalah
“diabetes” (Gambar 21). Kemudian tekan tombol “search”.
Gambar 21 Tampilan menu pencarian
Setelah menekan tombol “search”, maka sistem akan mencari ke dalam basis
data, data mana saja yang mengandung query“diabetes” akan ditampilkan seperti pada Gambar 22.
22
Gambar 22 Tampilan hasil pencarian
Kelebihan dan Kekurangan
Sistem informasi agroindustri ini memiliki beberapa kelebihan dan kekurangan setelah diimplementasikan. Adapun kelebihan sistem informasi ini ini antara lain:
a. data yang digunakan adalah data aktual dari PT. SS dan dapat diperbaharui dan ditambah oleh administrator sistem dengan mudah
b. menyediakan informasi yang terintegerasi dari PT. SS yang dapat diakses dengan mudah oleh pengguna.
c. memiliki fitur pencarian berdasarkan kelompok nama komoditas, nama produk, penyakit, dan khasiat sehingga memudahkan pengguna untuk mendapatkan informasi yang sesuai kebutuhan pengguna.
Selain kelebihan, sistem informasi ini juga memiliki kekurangan setelah diimplementasikan, yaitu :
a. sistem informasi belum dilengkapi dengan pemilihan komoditas unggulan atau produk unggulan
b. dibutuhkan banyak perbaikan dari segi tampilan antarmuka
Implikasi penerapan SIATOK untuk PT. SS
Penerapan sistem informasi di PT. SS diharapkan dapat menjadi solusi atas sulitnya pihak konsumen dalam mengakses informasi dari PT. SS. Jika sebelumnya akses informasi untuk PT. SS harus langsung berkunjung ke perusahaan. Maka setelah penerapan sistem informasi ini, konsumen dapat memperoleh informasi yang dibutuhkan dengan cepat dan mudah.
Penerapan sistem informasi ini juga diharapkan dapat dijadikan sebagai media iklan untuk meningkatkan penjualan produk PT. SS. Konsumen dapat membagikan profil produk ke jaringan media sosial dengan tombol share yang disediakan sistem. Sistem informasi ini juga dapat dijadikan sebagai tempat
23
penyimpanan data berbagai ramuan yang telah diproduksi untuk produksi selanjutnya. Untuk keamanan, informasi ini hanya dapat diakses oleh administrator saja yang merupakan karyawan dari PT. SS sendiri.
Penerapan sistem informasi ini juga dapat memudahkan pengunjung untuk mendapatkan gambaran kebun tanaman obat di PT. SS dan akses jalan menuju PT. SS karena sudah disediakan peta dengan API Google Maps dengan koordinat PT. SS. Peta ini dapat diakses pada halaman profil perusahaan dengan alamat http://localhost/siatok/profil-perusahaan.