1. Desain tampilan antar muka
Desain sistem informasi sangat menentukan kualitas. Berdasarkan kebutuhan informasi dari calon pengguna, desain antarmuka dirancang untuk menghasilkan tampilan yang menarik. Perangkat warna berbeda diberikan untuk menunjukkan menu pasif dan menu aktif. Tata letak rancangan diatur agar halaman terlihat simetri.
Layout dan animasi dirancang menggunakan Macromedia Flash MX 2004 dan Swift 3D. Software lain yang juga digunakan yaitu teks editor seperti notepad untuk menyimpan data teks yang menjadi input bagi
software utama yaitu Macromedia Flash MX 2004.
Beberapa hal yang menjadi dasar dalam pembuatan animasi pada
software Macromedia Flash MX 2004 adalah frame, layer, symbol, dan obyek. Frame merupakan kerangka-kerangka kerja sistem yang berisikan obyek-obyek. Penempatan akan obyek-obyek yang ada pada sistem diatur dalam pengaturan layer. Symbol merupakan bentuk obyek yang memiliki kelebihan-kelebihan khusus. Terdapat 3 jenis symbol, yaitu movie clip, button, dan graphic. Obyek merupakan data yang kita masukkan ke dalam sistem. Obyek yang digunakan pada sistem informasi ini terdiri dari suara dengan ekstensi MP3, gambar dengan ekstensi GIF dan JPEG, serta teks yang dimasukkan dengan text tool. Terdapat 3 jenis teks yang dihasilkan text tool, yaitu static text untuk teks yang bersifat statis, dynamic text
input text untuk teks yang dapat diisi dengan data yang bersifat simulasi dan memiliki pengaruh terhadap data apa yang dimasukkan kedalam input text tersebut. Kemampuan software ini dalam memasukkan data berupa obyek tidak hanya sekedar berkas-berkas yang berekstensi diatas, namun juga dapat memasukkan obyek berekstensi lainnya, terutama obyek yang dibuat pada satu perusahaan yang sama yaitu Macromedia Inc.
Sistem ini terdiri dari 7 berkas, SIRMAPP yang berekstensi EXE, mcOpening yang berekstensi SWF, mcAwal yang berekstensi SWF, mcBahan/mcNama/mcTeknologi/mcProduk yang berekstensi SWF, mp3 player yang berekstensi SWF, slide show yang berekstensi SWF, serta
welcome yang berekstensi SWF. Tampilan ketika berkas SIRMAPP dijalankan dapat dilihat pada Gambar 3.
Gambar 3. Tampilan ketika berkas SIRMAPP dijalankan.
Frame dibuat untuk memudahkan pengguna dalam menggunakan sistem. Pembuatan halaman utama pada sistem informasi menggunakan dua frame, frame atas dan frame bawah. Frame atas terdiri dari dua bagian, yaitu gambar header dan menu navigasi. Sedangkan frame bawah terdiri dari halaman content (isi). Hanya frame bawah yang mengalami perubahan tampilan jika terjadi pergantian halaman. Frame halaman utama dapat dilihat pada Gambar 4.
Gambar 4. Frame halaman utama.
Sistem ini bertujuan untuk mempermudah pengguna dalam mencari data yang dibutuhkan. Untuk itu data dibagi menjadi empat menu utama, yaitu nama peneliti, produk, teknologi, dan bahan baku.
a. Menu nama peneliti
Menu nama peneliti berisi data abstrak beserta keterangannya yang disusun berdasarkan nama penelitinya. Susunan tersebut kemudian dikelompokkan sesuai dengan huruf alphabet awal sehingga menjadi sub menu. Terdapat 26 sub menu yang disusun secara alfabetik yaitu sub menu a sampai sub menu z. Pengguna dapat langsung mengklik teks menu yang sudah di-link ke 26 sub menu yang berupa huruf a sampai z. Untuk memunculkan data, pengguna dapat mengklik salah satu dari 26 huruf alphabet tersebut. Tampilan menu nama peneliti dapat dilihat pada Gambar 5.
Gambar 5. Tampilan menu nama peneliti.
Gambar header
Menu navigasi
halaman
b. Menu produk
Menu produk berisi data abstrak beserta keterangannya yang disusun berdasarkan produk. Susunan tersebut kemudian dikelompokkan sesuai dengan huruf alphabet awal sehingga menjadi sub menu. Terdapat 26 sub menu yang disusun secara alfabetik yaitu sub menu a sampai sub menu z. Pengguna dapat langsung mengklik teks menu yang sudah di-link ke 26 sub menu yang berupa huruf a sampai z. Untuk memunculkan data, pengguna dapat mengklik salah satu dari ke-26 huruf alphabet tersebut. Tampilan menu produk dapat dilihat pada Gambar 6.
Gambar 6. Tampilan menu produk. c. Menu teknologi
Menu teknologi berisi data abstrak beserta keterangannya yang disusun berdasarkan teknologi. Susunan tersebut kemudian dikelompokkan sesuai dengan huruf alphabet awal sehingga menjadi sub menu. Terdapat 26 sub menu yang disusun secara alfabetik yaitu sub menu a sampai sub menu z. Pengguna dapat langsung mengklik teks menu yang sudah di-link ke 26 sub menu yang berupa huruf a sampai z. Untuk memunculkan data, pengguna dapat mengklik salah satu dari 26 huruf alphabet tersebut. Tampilan menu teknologi dapat dilihat pada Gambar 7.
Gambar 7. Tampilan menu teknologi. d. Menu bahan baku
Menu bahan baku berisi data abstrak beserta keterangannya yang disusun berdasarkan bahan baku. Susunan tersebut kemudian dikelompokkan sesuai dengan huruf alphabet awal sehingga menjadi sub menu. Terdapat 26 sub menu yaitu sub menu a sampai sub menu z. Pengguna dapat langsung mengklik teks menu yang sudah di-link ke 26 sub menu yang berupa huruf a sampai z. Untuk memunculkan data, pengguna dapat mengklik salah satu dari 26 huruf alphabet tersebut. Tampilan menu bahan baku dapat dilihat pada Gambar 8.
2. Desain Basis Data
Secara garis besar, data sistem informasi penelitian produk pangan ini dibagi menjadi 4 kelompok agar memudahkan pengguna dalam hal pencarian data di sistem informasi tersebut. 4 kelompok tersebut antara lain produk, teknologi dan bahan baku.
b. Nama peneliti
Peneliti yang terdapat dalam sistem informasi ini merupakan peneliti/mahasiswa TPG IPB yang lulus pada tahun 1997 dan 1999. Nama peneliti ditulis dalam bentuk huruf kapital agar lebih mencolok atau lebih jelas dilihat.
c. Produk
Produk-produk yang terdapat dalam data sistem informasi ini antara lain anti mikroba, anti oksidan, antibodi monoklonal, asam lemak gamma linoleat, asam lemak tak jenuh, asam palmitat, flavor daging ayam, beras, biogum, β-karoten, buah minimal proses, bubuk, cabe giling, cocoa butter equivalent,cookies, degradasi β–karoten,
edible coating, edible film, empek-empek, endonuklease restriksi, enyek-enyek, es krim, Eschericia coli, etil 2-metilbutanoat, flavor, fruit leather, gula merah, ikan asap, insektisida, karamel susu, kecap, kerupuk udang goreng, komponen volatil, komposisi asam lemak dan asam amino otak, konsentrat, kultur kering, lemak terlindungi, manggis kaleng, margarin, minuman fermentasi, minuman asam laktat, minuman bervitamin B12, minuman kasei, minyak atsiri, minyak goreng, nasi, nira, nira aren, pati, peptida penurun tekanan darah, pindang, pindang presto, poliester, proliferasi sel limfosit, protease, sukrosa, roti, sale goreng, sambal lingkung, sari jahe, selada krop, senyawa antigregasi platelet, serbuk effervescent, serbuk sari buah, sosis fermentasi, tape kering, tauco, teknik penggaraman, telur ayam ras, tepung ubi jalar instan, tape kering, teh botol, dan vinylditlhin. d. Teknologi
Teknologi terapan dalam penelitian yang dibahas dalam sistem informasi ini antara lain aglutinasi, bioteknologi, kloning,
kromatografi, hidrolisis, pemanasan, coated chemical, denaturasi kimia, deteksi patogen, difusi agar, ekstraksi, destilasi, pengeringan
drum dryer, edible film, effervescent, ekplorasi, ekstraksi, evaporasi, manusia percobaan, pemasakan, penyulingan, inkubasi, fermentasi, pengasapan, freezer, pengeringan beku, hewan percobaan, hidrolisis, isolasi kromatografi, karamelisasi, kristalisasi, manusia uji, spray, mikroenkapsulasi, minimal proses, pelapisan, pemanggangan, pemasakan tekanan tinggi, pembekuan, pembotolan, pengalengan, pengasapan cair, pengawetan, penyerap oksigen, perendaman, produksi biomassa, sulfurisasi, dan tikus percobaan.
e. Bahan baku
Bahan baku yang digunakan pada penelitian yang dibahas dalam sistem informasi ini antara lain alginat, protein kedelai, atung, ikan kembung, asam 2-metilbutanoat, etanol, manggis, asam askorbat,
Bacillus pumilus, Bacillus substilis, bakteri asam laktat, wortel, bawang putih, beras, insektisida, biji nangka, bunga cengkeh, buah kemukus, bungkil kedelai, kasein, beras berprotein, limbah cair tahu, sayur, buah vitamin C, cabe, carboxymethylcellulose, sorbitol, daging sapi, Lactobacillus brevis, daun jeruk purut, daun sirih, daun teh, gula, dedak padi, olein sawit, E.coli, Enterobacter sp., Erwinia sp., garam, masakan, Hansenulla anomala, ikan belida, ikan gabus, ikan kembung, ikan mas, isolate protein kedelai, pektin, jahe, jeruk nipis, jeruk siam, kacang hijau, kacang merah, kapang mucor, onggok, kareganan, protein kedelai, kayu kusambi, nira, kayu ralu, kelapa, kencur, ketan, kunyit, minyak kedelai, kapang mortirella sp., kapang mucor circinelloides, minyak sawit merah, kerupuk, L. bulgaricus, S. thermophillus, lemak limbah sawit, limbah cair tahu, lempuyang, temu hitam, lengkuas, masakan, makanan jajanan, mangga Kweni, margarin, mencit, mikroba hansenulla anomala, minyak dari kapang, minyak kelapa, minyak sawit, minyak sawit merah, minyak sawit pucat, pisang angling, musa, nira kelapa, parafin, telur, pisang, poliester sukrosa minyak kelapa, rambutan, Rhodobacter sp., ribosa, sistem, metal
linoleat, sawit, selada krop, singkong, sukrosa poliester asam lemak, susu sapi, talas Bogor, talas Lampung, tempe, tepung Garut, terigu, tepung ketan, tepung ubi jalar, ubi jalar, xanthomonas, dan yoghurt. Program Macromedia Flash MX 2004 memiliki dua cara dalam penggunaan basis data, yaitu dengan library dan pemanggilan suatu berkas dengan menggunakan skrip.
a. Library
Library merupakan tempat yang dapat ditampilkan dalam window
secara khusus untuk mengatur obyek-obyek yang digunakan dalam sistem. Berikut merupakan isi library pada masing-masing berkas yang digunakan dan telah dikelompokkan ke dalam folder dalam yang dibuat untuk mempermudah pengelompokan. Suatu obyek akan disimpan secara otomatis ke dalam library oleh program jika obyek tersebut langsung ditempatkan pada lembar kerja meskipun obyek tersebut tidak ditempatkan di library terlebih dahulu. Gambar tampilan
library pada sistem ini dapat dilihat pada Gambar 9. Stuktur direktori pada sistem adalah sebagai berikut: 1) SIRMAPP a) Folder mcBlink b) Foder mcPanah c) sirmapp.swft d) tombol navigasi 2) mcAwal a) Background b) Fireworks Object c) mcBlink d) mcBlink e) mcLogo f) mcPanah g) Menu 3) mcBahan a) background
b) blink c) gambar d) mcScroll e) sound f) sub menu 4) mcNama a) background b) blink c) gambar d) mcScroll e) sound f) sub menu 5) mcProduk a) background b) blink c) gambar d) mcScroll e) sound f) sub menu 6) mcTeknologi a) background b) blink c) gambar d) mcScroll e) sound f) sub menu 7) mp3 player
Gambar 9. Tampilan library. b. Skrip
Skrip digunakan untuk membuat relasi antara suatu objek ataupun
file dengan objek/file lainnya. Dengan skrip, sistem memungkinkan untuk berelasi dengan basis data. Pada sistem ini, penggunaan skrip yang berelasi dengan basis data dapat dibagi menjadi dua garis besar, yaitu proses loading menu dan proses loading sub menu.
Menu dalam sistem ini terdiri dari empat file, yaitu mcBahan.SWF, mcNama.SWF, mcProduk.SWF, dan mcTeknologi.SWF. Salah satu dari file ini akan diload sesuai dengan menu yang diklik oleh pengguna. Skrip proses loading menu dapat dilihat pada Lampiran 1. Sub menu terdiri dari 26 file pada setiap menu. Dalam sub menu terdapat proses loading data abstrak, data status, dan info jumlah data. Skrip proses loading data abstrak, data status, dan info jumlah data dapat dilihat pada Lampiran 2. Dari segi animasi tambahan, teks “selamat datang” diload dengan menggunakan skrip pula. Selain itu, skrip juga digunakan untuk mendownload lagu dari suatu folder “mp3” yang disejajarkan posisinya dengan berkas mp3 player.SWF atau dalam satu lokasi yang sama seperti yang terlihat pada Gambar 10. Apabila file EXE tidak sejajar dengan berkas mp3 player.SWF, maka proses download lagu tidak dapat terjadi. Dari segi animasi tambahan,
tanggal dan jam yang terdapat dalam file waktu.SWF diload dengan menggunakan skrip. Begitu pula halnya dengan file welcome.SWF yang menampung animasi teks “selamat datang”. Skrip download lagu dan animasi teks ini dapat dilihat pada Lampiran 3.
Gambar 10. Folder mp3 sejajar dengan mp3 player.SWF.
3. Desain proses
Bahasa pemrograman yang mendukung perintah-perintah dalam Macromedia Flash MX 2004 telah disediakan secara khusus oleh software
tersebut yaitu ActionScript 2.0. Bahasa ini merupakan bahasa versi terbaru pada Macromedia Flash MX 2004, yang memiliki beberapa keunggulan lebih dibanding versi sebelumnya yaitu ActionScript 1.0.
Pada tampilan SIRMAPP.EXE terdapat tombol “masuk” yang jika diklik maka mcOpening.SWF dipanggil dan langsung berjalan. Ketika mcOpening.SWF telah berjalan secara penuh, yaitu pada saat seluruh
frame dilalui, maka mp3 player.SWF juga akan berjalan secara otomatis. Begitu pula ketika tombol “keluar” pada mcOpening.SWF diklik maka mcEnding.SWF dipanggil. Proses pemanggilan berkas berekstensi SWF ini diatur secara khusus dengan menggunakan variabel yang dibuat dengan
ActionScript 2.0 dengan jenis variabel “loadClip”. Ketika proses loadClip
sesuai dengan rancangan. Skrip untuk melakukan loadClip dapat dilihat pada Lampiran 4, sedangkan diagram alir sistem dapat dilihat pada Lampiran 5.