Perancangan dan Implementasi (Manuputty, dkk)

Perancangan Sistem Inventori Kantor Menggunakan

Framework RIA (Rich Internet Application)
(Studi Kasus: BISTEK – FTI UKSW)

1)
Priska Alfa Mardanik, 2)Wiranto H. Utomo, 3)Frederik Samuel Papilaya

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
Email : 1)p1215ka@yahoo.com, 2)wiranto.uksw@gmail.com,
3)
samuel.papilaya@gmail.com

Abstract

The inventori information system such as recording and book

keeping in BISTEK Salatiga is still done manually or it is still in a form of
paper. So, it is difficult to know the amount of goods owned by the company.
A computerization and integrated system which is designed using
technology-based RIA (Rich Internet Application) and integrated of the
database using the action script Flash, PHP script, and the web server by
AppServ. It can be used to design the inventori system which can be
access in three interfaces by desktop, web browser and mobile.

Keywords : Office inventori, RIA

1. Pendahuluan

Perkembangan teknologi memang tidak pernah surut dari masa ke masa sejalan
dengan perkembangan ilmu pengetahuan, sehingga kemampuan komputer untuk
membantu manusia dan menyelesaikan masalah semakin meningkat, baik
permasalahan yang sederhana maupun permasalahan yang komplek sekalipun dalam
berbagai aspek. Selain digunakan untuk menyimpan data, komputer juga menyajikan
data ke dalam bentuk yang lebih mudah dipahami dan lebih akurat kepada user.
Informasi yang cepat dan akurat menjadi hal yang penting dalam membuat suatu
keputusan yang membantu dalam peningkatan kinerja dan perkembangan sebuah
perusahaan. Maka dari itu di dalam perusahaan diperlukan manajemen yang baik,
salah satunya dalam memanajemen barang inventori kantor mereka dalam mendukung
kinerja para staf kantor. Manajemen inventori perlu dikelola dengan baik agar
pekerjaan perawatan barang inventori dapat menjadi lebih mudah karena dengan
pengadaan pencatatan inventoriasi perusahaan dapat mendaftar semua fasilitas yang
ada di seluruh bagian, termasuk gedung dan isinya. Maka diperlukan sebuah teknologi

89
Jurnal Teknologi Informasi-Aiti, Vol. 8. No.1, Februari 2011 : 1 - 100

berupa aplikasi yang dapat membantu dalam pengelolaan barang-barang inventori

kantor. Dalam penelitian ini penulis memilih Satya Wacana Bussines Technology
Center-FTI UKSW (BISTEK) yang merupakan salah satu perusahaan yang sedang
berkembang di kota Salatiga sebagai objek penelitian. Perusahaan ini memfasilitasi
pengembangan bisnis teknologi di kalangan mahasiswa UKSW dalam aspek
manajerial, pelatihan bidang teknologi informasi, pemanfaatan hasil riset (kerjasama
dengan Puslit TIK FTI UKSW), pemasaran produk dan jasa, permodalan, dan
lain-lain. Dengan dukungan fasilitas perkantoran yang memadai serta jaringan dengan
berbagai pihak pendukung. Namun sistem informasi dalam pengelolaan maupun
pencatatan barang inventori di BISTEK masih menggunakan metode manual yaitu
pencatatan dan pembukuan yang ditulis pada form kertas kemudian disimpan dalam
berkas. Kondisi ini mengakibatkan proses pengolahan data menjadi kurang baik,
misalnya dalam pencarian data karena harus membuka berkas satu per satu sehingga
perlu waktu yang mungkin cukup lama saat mencari keberadaan data tersebut
disimpan. Kendala lainnya adalah mengalami kesulitan untuk mengetahui berapa
banyak atau apa saja barang yang telah dimiliki perusahaan karena harus menghitung
satu per satu, atau mungkin data tersebut bisa hilang atau rusak karena ada bencana
maupun hal yang tidak diinginkan.Alangkah baiknya jika proses pengolahan data
barang inventori dilakukan dengan sistem terkomputerisasi serta dengan menggunakan
aplikasi yang menggambarkan antar muka bagi pengguna dalam entry dan pencarian
data yang terhubung dengan database. Maka untuk mempermudah proses
pengolahan data barang inventori pada kantor perusahaan diperlukan sebuah
program aplikasi yang mampu untuk mengolah data barang inventori tersebut,
sehingga proses data barang inventori dapat secara langsung dilihat dan ditemukan
informasi yang tersimpan dalam database. Dengan aplikasi inventori kantor ini
diharapkan agar dapat lebih cepat dalam pencarian informasi data inventori yang
dimiliki kantor dan informasi yang tersimpan dalam database tersebut dapat diolah
sehingga dapat dicetak sebagai laporan guna mendukung keputusan perusahaan
nantinya. Secara garis besar BISTEK merupakan perusahaan yang bergerak alam
bidang teknologi informasi, selayaknya dalam pengelolaan data seperti inventori
diperlukan sebuah pengelolaan yang menerapkan sistem komputerisasi sehingga
dapat membantu proses inventoriasi dengan menerapkan tertib administrasi inventori.
Dalam merancang sistem informasi inventoriasi barang tersebut dilakukan
tahapan-tahapan pembangunan aplikasi diantaranya adalah sistem yang dirancang
akan menerapkan teknologi baru bernama RIA (Rich Internet Application).
Pemilihan framework dengan memakai RIA ini dilatarbelakangi oleh keunggulan
RIA yang berbeda dengan framework lainnya yaitu suatu aplikasi web yang berfungsi
layaknya aplikasi multimedia di desktop atau dengan kata lain memiliki fitur dan
menerapkan fungsi-fungsi layaknya aplikasi multimedia berbasis desktop. RIA adalah
suatu teknologi yang menggabungkan kelebihan-kelebihan dari aplikasi berbasis web
dan desktop. Sifatnya tidak tergantung terhadap suatu sistem operasi menjadikan
RIA bisa menjangkau pengguna komputer lebih banyak lagi. Pada dasarnya penulis
ingin menerapkan sebuah teknologi baru untuk merancang sebuah sistem pada aplikasi
inventori kantor. Dengan adanya perancangan sistem ini dapat menjadi masukan
serta bahan pertimbangan dalam membangun sistem informasi inventoriasi barang di
BISTEK serta menjadi tambahan wawasan bagi pembaca dan penulis tentang
90
 Perancangan Sistem (Papilaya, dkk)

perancangan sistem inventoriasi barang dengan menggunakan RIA. Dengan begitu

teknologi komputer masih menjadi solusi terbaik karena inovasi, keakuratan, serta
kecepatannya dalam mengolah suatu data menjadi informasi yang berguna.

2. Kajian Pustaka

Pengertian Rich Internet Application adalah suatu teknologi yang

menggabungkan kelebihan-kelebihan dari aplikasi berbasis web dan desktop.[1]
RIA menyajikan antarmuka visual yang cantik dan interaktif. Sifatnya tidak tergantung
terhadap suatu sistem operasi menjadikan RIA bisa menjangkau pengguna komputer
lebih banyak lagi. DefinisiAdobe mengenai RIA yaitu tentang bagaimana suatu aplikasi
web yang berfungsi layaknya aplikasi multimedia di desktop PC dengan akses tanpa
batas ke berbagai jaringan komputer lainnya. Dengan kata lain, RIA adalah aplikasi
web yang sebagian besar karakteristik dari aplikasi desktop. Contoh RIA framework
adalah Curl, GWT, Adobe Flash/Adobe Flex/AIR, Java/JavaFX, Mozilla XUL dan
Microsoft Silverlight. Diagram Ria dapat digambarkan pada Gambar 1, dimana
diagram tersebut menggambarkan bahwa teknologi RIA menggabungkan antara
Desktop Application, Web Application dan Communication Technologies.

Gambar 1 Diagram RIA

RIA dapat dikatakan sebuah teknologi yang baru karena pada

perkembangannya nama Rich Internet Application diperkenalkan pada bulan Maret
2002 oleh Macromedia (sekarang bernama ADOBE). Namun konsep RIA
sebenarnya sudah lama dipakai seperti Remote Scripting, oleh Microsoft, circa
pada tahun 1998, X Internet, oleh Forrester Research pada Oktober 2000, Rich
(web) clients, Rich web application. Beberapa karakteristik RIA secara umum,
antara lain (a) Responsif. Sebagai aplikasi web, RIA memiliki perbedaan yang amat
mencolok dengan web konvensional. Aplikasi yang dibangun dengan konsep RIA
ini tidak me-reload halaman ketika suatu tombol atau link diklik karena hanya meng-
update bagian-bagian tertentu ketika kita melakukan suatu aksi. Sementara pada
web konvensional, halaman akan di-update secara keseluruhan ketika kita
melakukan suatu aksi; (b) Dapat melakukan banyak hal. Dengan memanfaatkan
RIA, aplikasi yang dirancang ini dapat melakukan sesuatu seperti apa yang dilakukan
pada sebuah aplikasi desktop. Tingkat interaktifitas yang tinggi memungkinkan

91
Jurnal Teknologi Informasi-Aiti, Vol. 8. No.1, Februari 2011 : 1 - 100

developer untuk memindahkan fitur-fitur pada sebuah aplikasi desktop ke dalam

aplikasi web. Komponen yang terdapat pada software pendukung RIA lebih lengkap
ketimbang komponen yang dimiliki oleh software untuk membangun web biasanya.
Sudah banyak aplikasi RIA yang dimanfaatkan seperti word processor, instant
mesengger, dan sebagainya; (c.) Menjangkau user yang lebih banyak. Aplikasi RIA
yang akan dirancang ini bisa dijalankan pada sistem operasi apapun dengan spesifikasi
hardware yang tidak harus tinggi. Asalkan sistem operasi itu bisa menjalankan
browser dan flash player maka aplikasi RIA dapat dijalankan dengan baik. Dengan
begitu aplikasi dapat digunakan oleh pengguna yang memakai sistem operasi apa
saja; (d.) Komunikasi Menjadi Lebih Mudah. Dengan menerapkan RIA pada aplikasi
ini, developer bisa memanfaatkan banyak media untuk melakukan sesuatu. Misalnya
Chatting berbasis teks, misalnya melalui Yahoo! Web Mesengger, Gmail Chat,
Ebuddy, Meebo, Facebook Chat. Disamping itu ada juga Audio-Video Conference
melalui Gmail Video Chat, dll.
Ada beberapa perangkat teknologi untuk membangun aplikasi berbasis RIA,
yaitu AJAX dan Javascript, AJAX merupakan singkatan dari Asynchronous
Javascript and XML. Teknologi ini adalah pemain lama yang juga masih setiap
digunakan oleh perusahaan besar pembuat aplikasi berbasis RIA. Beberapa contoh
aplikasi berbasis AJAX yang mudah kita jumpai di internet adalah Wordpress,
Facebook, dan beberapa produk Google seperti Gmail, Calendar, Docs, Maps.
Flash, sangat banyak kita jumpai di internet. Beberapa diantaranya dalam bentuk
iklan, animasi, situs profil hingga aplikasi yang sifatnya spesifik. Aplikasi berbasis
Flash ini sifatnya browser friendly, jadi aplikasi Flash ini bisa dijalan di setiap
browser asalkan pada browser itu telah terinstal Flash Player yang sesuai. Java,
sama seperti Flash, aplikasi berbasis Java membutuhkan aplikasi tambahan yang
disebut Java Runtime Environment (JRE) agar bisa berjalan dengan lancar pada
browser. Saat ini, aplikasi berbasis Java belum bisa bersaing dengan aplikasi lain
yang berbasis AJAX maupun Flash. Silverlight, merupakan produk buatan Microsoft
yang digunakan untuk membuat aplikasi berbasis RIA. Sama seperti Java dan Flash,
untuk menjalankan aplikasi berbasis Silverlight dibutuhkan suatu plugin. Saat ini,
sudah banyak situs-situs yang sudah memanfaatkan teknologi ini untuk membangun
aplikasi RIA. Walaupun demikian, popularitasnya masih kalah jika dibandingkan
dengan AJAX dan Flash. JavaFX, produk yang dinamakan JavaFX ini menawarkan
interaktivitas, animasi dan tipe pemograman yang konsisten dengan AJAX, Flash
dan teknologi Silverlight Microsoft yang baru. JavaFX ini merupakan sebuah
tambahan baru untuk platform Java yang menjanjikan pemakaian konsisten
dari desktop ke alat-alat portabel. JavaFX  ini memungkinkan  RIA untuk tampil di
layar mobile device, desktop, televisi dan sebagainya. Pada penelitian ini penulis
memilih Flash untuk membangun aplikasi teknologi RIA. Jadi, RIA adalah suatu
teknologi yang akan memberikan pengalaman yang berbeda dari sebelumnya bagi
pengguna internet karena RIA menggabungkan kelebihan dari aplikasi berbasis web
dan aplikasi berbasis desktop. RIA memungkinkan kita untuk melakukan sesuatu
seperti apa yang kita lakukan pada aplikasi desktop namun tidak lepas dari aktifitas
online bersama pengguna internet lainnya seperti chatting, video conference, serta
berbagi informasi.

92
 Perancangan Sistem (Papilaya, dkk)

3. Metode Penelitian

Metode yang dipakai untuk membuat sistem dan perancangan yang dilakukan
dalam membangun aplikasi sistem inventori dengan teknologi RIA adalah model
prototyping. Secara umum tahapan pada dapat dijelaskan dan d ilihat pada Gambar
2.
1. Tahap pertama pengumpulan kebutuhan pengguna yang dievaluasi oleh pelanggan
dan digunakan untuk mengelola kembali kebutuhan dari perangkat lunak yang
dikembangkan. Proses iterasi terjadi sebanyak dua kali, setelah prototipe
disesuaikan dengan kebutuhan pelanggan, pada pihak pengembang aplikasi makin
mengerti keinginan pemakai.
2. Tahap perancangan sistem dilakukan dengan menggunakan menggambarkan
aliran data serta alur sistem dengan menggunakan UML.
3. Tahap implementasi ini akan menerapkan bagaimana pengkodean yang dilakukan
dalam membuat sebuah aplikasi yang telah dirancang sebelumnya.

Gambar 2 Bagan Prototype Model

4. Perancangan dan Pengujian Sistem

Sebelum mengimplementasikan, sistem harus didesainkan terlebih dahulu.

Dengan adanya desain sistem diharapkan dapat membantu proses pengembangan
dari pembuata aplikasi. Pada bagian ini akan dibahas diagram use case, activity
diagram dan class diagram. Use Case Diagram, diagram ini menggambarkan
fungsionalitas yang diharapkan sebuah sistem, use case diagram merepresentasikan
sebuah interaksi antar actor dan sistem. Use case merupakan langkah-langkah yang
diikuti User dalam memanfaatkan sistem dengan kata lain dapat menggambarkan
secara garis besar sistem yang akan dikembangkan. Sedangkan actor merupakan
orang, organisasi atau sistem lain yang dapat menginisialisasi sebuah instance dari
use case. Diagram use case perancangan sistem untuk aplikasi inventori kantor
dapat dilihat pada Gambar 3.

93
Jurnal Teknologi Informasi-Aiti, Vol. 8. No.1, Februari 2011 : 1 - 100

mencari data barang

<<incl ude>>

mel ihat data

pegawai BISTEK dosen

<<i ncl ude>>

<<i ncl ude>>
tam bah data tam bah data

<<incl ude>>
<<include>>

edit data mengol ah data inventaris m engolah data kategori edi t data
sekretari s BIST EK

<<include>>
<<incl ude>>
hapus data hapus data

<<i ncl ude>> mengol ah data vendor <<incl ude>>

<<i ncl ude>>

hapus data edi t data tambah data

Gambar 3 Use Case Diagram

Activity Diagram adalah diagram yang memperlihatkan aliran dari suatu

aktifitas ke aktifitas lainnya dalam suatu sistem. Gambar 4 adalah activity diagram
dari Transaksi penjualan tunai.

user komput er

me na mp il kan
sta rt fo rm utam a

m em il ih m enu
se arch

m en am pi lka n
for m sea rch

me ng in pu tka n kataku nci s al ah

be rda sa rkan ka teg ori

cek va li di ta s

be na r

m en am pi lka n
da ta

e nd

Gambar 4 Diagram Aktifitas Cari Data

Dari Gambar 4 menerangkan aktifitas mencari data. Dimulai dari user masuk ke
sistem kemudian komputer menampilkan form utama. Dengan memilih menu search
maka User dapat melakukan pencarian data sekaligus melihat data dengan
memasukkan kata kunci. Sistem akan memeriksa apakah keyword yang diinputkan
cocok dengan data di database atau tidak. Apabila query tidak ditemukan maka

94
dengan memasukkan query dan parameter pencarian. Hasil yang diharapkan adalah
aplikasi inventori kantor ini akan menampilkan daftar barang yang sesuai dengan
masukan yang diberikan oleh user. Skenario pengujian fungsionalitas proses
pencarian barang dapat dilihat pada Tabel 2. Secara umum, hasil pengujian yang
diperoleh yaitu pertama komponen- komponen yang berkaitan dengan use case
“Cari Barang” telah sesuai dengan spesifikasi yang didefinisikan. Kedua, integrasi
tiap-tiap komponen tetap memenuhi spesifikasi yang telah didefinisikan.

Tabel 2 Skenario dan Hasil Pengujian Use Case “Cari Barang”

identifikasi U-F-01 dan U-F-02

Deskripsi Pengujian untuk melakukan proses
pencarian barang inventori
Prosedur Pengujian 1. Masukkan query pencarian pada
kotak masukan yang sudah tersimpan
dalam database
2. Pilih parameter pencarian
berdasarkan nama atau merk barang
inventori
3. Tekan tombol “Cari”
Masukan 1. Query pencarian
2. Parameter nama atau merk barang
inventori
3. Aksi klik tombol “Cari” oleh
pengguna
Keluaran yang Diharapkan Daftar barang inventori kantor yang
dicari pengguna berhasil ditampilkan
Kriteria Evaluasi Hasil Daftar barang inventori kantor yang
dicari pengguna berhasil ditampilkan
Hasil yang Didapat Daftar barang inventori kantor yang
dicari pengguna berhasil ditampilkan
Kesimpulan Diterima

5. Hasil dan Pembahasan

Desain antarmuka sistem dan tabel data yang telah dirancang pada bab
sebelumnya kemudian diimplementasikan dan setelah tahap implementasi berhasil
maka selanjutnya setiap unit proses akan diuji untuk mengetahui kesesuaian fungsinya
dengan tujuan yang ingin dicapai. Dalam perancangan sistem, coding ditulis dengan
bahasa pemrograman action script dan PHP. Sedangkan untuk pengujian unit
dilakukan dengan menggunakan black box testing. Antar muka yang dikembangkan
dibuat dalam satu projek dengan menggunakan software pembangun aplikasi berupa
Adobe Flash CS3 Profesional, selain dalam format file .swf pada flash file juga
dapat di-publish kedalam beberapa bentuk file seperti format .exe yang berbasis
desktop dan .html yang dapat dijalankan dengan menggunakan browser. Aplikasi
yang dibangun ini juga dapat di akses melalui web mobile yang akan ditampilkan

95
Jurnal Teknologi Informasi-Aiti, Vol. 8. No.1, Februari 2011 : 1 - 100

lokasi
kode _lo kasi : String
nam a_lokas i : Strin g
ket_ lokasi

tam ba h_l okas i()

i nventaris uba h_ loka si()
id : String hap us _lo kasi()
nama_ item : Strin g 1
katego ri : Strin g katego ri
me rk_tipe : String ko de_ kateg : Strin g
sn : String n m_kateg ori : Stri ng
tg l_ trm : Strin g 1 ke t_ka te g
ti pe : Stri ng
kon dis i_ brg : Strin g 1 tam bah _da ta ()
deskripsi : String u ba h_d ata()
cop yrig ht : String 1 h ap us_ data()
garans i : Strin g
id _vend or : String vend or
qty : Integ er 1 kod e_ven dor : Strin g
hrg : Stri ng na ma-vend or : Strin g
to t : Strin g 1 ph on e : String
em ai l : Stri ng
ta mbah_ data() al am at : String
ubah_da ta ()
hapus_d ata() ta mb ah_ ko de ()
ub ah _kode ()
ha pu s_kod e()

Gambar 6 Class Diagram

7. Pengujian Sistem

Pengujian terhadap perancangan aplikasi inventori kantor ini untuk

mengujicobakan penerapan rangkaian aktifitas proses perancangan aplikasi inventori
kantor studi kasus BISTEK. Spesifikasi lingkungan perangkat lunak yang digunakan
dalam pengujian sama dengan spesifikasi lingkungan perangkat lunak yang digunakan
dalam proses perancangan perangkat lunak. Konsep Black Box Testing atau kotak
hitam digunakan untuk merepresentasikan yang cara kerja didalamnya tidak tersedia
untuk diinspeksi. Di dalam kotak hitam, item yang diuji dianggap “gelap” karena
logiknya tidak diketahui, yang diketahui hanya apa yang masuk dan apa yang keluar
dari kotak hitam.[2] Pada pengujian kotak hitam, kasus-kasus pengujian berdasarkan
pada spesifikasi sistem. Rencana pengujian dapat dimulai sedini mungkin dari proses
pengembangan aplikasi. Pada pengujian ini akan dicoba beragam masukan dan
memeriksa keluaran yang dihasilkan sehingga akan dapat dipelajari apa yang dilakukan
kotak, namun tidak dapat mengetahui sama sekali mengenai cara konversi
dilakukan.Skenario Pengujian atau rencana pengujian yang akan dilakukan dapat
dilihat pada Tabel 1.

Tabel 1 Rencana Pengujian Fungsionalitas Perangkat Lunak

Jenis
No. Use Case Pengujian Identifikasi
Pengujian
1. Search Book 1. Skenario Normal Black box U-F-01

Pengujian yang dilakukan pada perangkat lunak inventori kantor studi kasus BISTEK
adalah pengujian fungsionalitas proses pencarian barang inventori. Pengujian dilakukan

96
 Perancangan Sistem (Papilaya, dkk)

denganakan
sistem menggunakan
menampilkan emulator.
kembali
Pemakaian
form cariketiga
data.format
Apabila
filedata
aplikasi
ditemukan
ini merupakan
maka
pengimplementasian
sistem menampilkandari datakonsep RIA. Form
yang dicari. Halaman
Sedangkan Utamaaktifitas
diagram dalam perancangannya
untuk melihat
memiliki
data. fungsi untuk lihat dan cari data barang inventori, input data barang inventori,
input dan lihat jenis
Sequence kategori,adalah
Diagram input dan lihatkhusus
secara data lokasi, input danbehavior
menjabarkan lihat data vendor.
sebuah
Adapun
skenariotampilan
tunggal.halaman
Gambarutama aplikasi pada
5 menjelaskan bahwadesktop adalah
pada saat Gambar
masuk 7, sedangkan
ke form inventori
untuk tampilan web serupa dengan tampilan antarmuka pada desktop.
user akan melihat data yang tersimpan dalam database. Controller cari barang
membaca semua record inventori ke database kemudian menampilkan data tersebut
ke form inventori. Kemudian contoller “caribarang” membaca record berdasar
input-an, jika ada data yang sesuai dengan input-an maka data tersebut tertampil
pada form cari dan lihat barang inventori.

: form Cari : Inventaris : caribarang

1: openDB

2: baca data inventaris

3: baca s em ua record inventaris

4: tam pil data inventaris

5: caridata ses uai input

6: baca record data s es uai input

7: clos eDB
Gambar 7 Form Utama Desktop dan Web
8: tampil data inventaris yang dicari

Sedangkan halaman utama yang akses melalui teknologi mobile dapat dilihat
pada Gambar 8, yang mana disimulasikan pada sebuah emulator yang tersedia pada
program Flash.Form Inventori.

Gambar 5 Diagram Sequence Cari Data Inventori

Class diagram adalah diagram yang memperlihatkan himpunan kelas–kelas,

kolaborasi serta relasi antara use case dengan aktor. Gambar 6 adalah gambar
class diagram dari proses user dan admin. Yang menggambarkan struktur dan
deskripsi class, class merupakan sebuah spesifikasi yang jika diinstansiasi akan
menghasilkan sebuah objek dan merupakan inti dari pengembangan sistem. Diagram
tersebut menjelaskan bahwa terdapat empat kelas yaitu kelas inventori, kelas kategori,
kelas vendor, dan kelas lokasi yang memiliki nilai atau atribut masing-masing.
Gambar 8 Form Utama Mobile

Jika memilih tombol “inventori”, user akan menemui form inventori dimana
user dapat menyimpan data barang, mengubah data maupun menghapus data barang
inventori. Disamping itu juga dapat menambahkan jenis kategori dengan memilih
tombol “add” yang digambarkan dengan tanda tambah (plus) yang terletak disamping
combo box kategori. Begitu juga halnya dengan penambahan lokasi maupun ven-
dor dapat memilih tombol “add” yang digambarkan dengan tanda tambah yang
terletak disamping combo box lokasi atau vendor jika belum ada pilihan yang sesuai.

97
Jurnal Teknologi Informasi-Aiti, Vol. 8. No.1, Februari 2011 : 1 - 100

Terdapat pilihan tombol “reset” untuk mengosongkan data yang tampil pada tiap
kolom supaya dapat menambahkan data baru ke dalam kolom. Tombol “simpan”
digunakan untuk menyimpan data barang yang telah diisikan dalam setiap kolom.
Sedangkan beberapa tombol “move” yang digambarkan dengan anak panah
merupakan tombol menampilkan data dari awal sampai akhir. Tombol-tombol tersebut
berguna memilih data yang ingin diubah atau diperbaharui kemudian pilih tombol
“ubah” untuk mengeksekusinya. Disamping itu tombol “move” berguna juga untuk
mencari data barang mana yang ingin dihapus, kemudian pilih tombol “hapus” untuk
menghapus data barang. Hasil tampilannya dapat lebih jelas pada Gambar 9.

Gambar 9 Form Inventori pada Desktop dan Web

Aliran data yang terjadi pada saat penyimpanan data barang diawali dengan
user memasukkan data baru ke dalam kolom yang tersedia kemudian pada saat
memilih tombol “simpan”, data tersebut dieksekusikan ke dalam perintah SQL yang
menghubungkan inputan dari form dengan database MySQL yang terdapat pada
“add_item.php”. Apabila user memilih “hapus” maka id yang tertampil pada form
dieksekusikan ke alamat “delete_item.php” dimana terdapat perintah SQL untuk
menghapus. Begitu pula saat user menginginkan perubahan data pada data tertentu
user dapat memilih “edit” yang kemudian dieksekusikan langsung pada
“edit_item.php” untuk memproses pembaharuan data pada perintah SQL update.
Form Vendor. Form ini memberikan informasi mengenai data perusahaan yang
telah bekerjasama dengan BISTEK seperti dalam memberikan beberapa sarana
seperti komputer misalanya guna mendukung aktifitas yang dijalankan oleh BISTEK
dan juga data toko-toko tempat pembelian barang-barang yang diperlukan kantor.
Terdapat pilihan tombol “reset” untuk mengosongkan data yang tampil pada tiap
kolom supaya dapat menambahkan data baru ke dalam kolom yang ada. Tombol
“simpan” digunakan untuk menyimpan data yang telah diisikan disetiap kolom. Data
yang telah tersimpan dalam database dapat dilihat dalam tabel data. Sedangkan
beberapa tombol “move” yang digambarkan dengan anak panah merupakan tombol
menampilkan data vendor yang tersimpan dari awal sampai akhir. Tombol-tombol

98
 Perancangan Sistem (Papilaya, dkk)

tersebut berguna memilih data yang ingin diubah atau diperbaharui kemudian pilih
tombol “ubah” untuk mengeksekusinya. Disamping itu tombol “move” berguna juga
untuk mencari data vendor mana yang ingin dihapus, kemudian pilih tombol “hapus”
untuk menghapus data vendor. Hasil tampilannya dapat dilihat pada Gambar 10.

Gambar 10 Form Vendor pada Desktop atau Web

Aliran data yang terjadi pada saat penyimpanan data vendor diawali dengan
user memasukkan data baru ke dalam kolom yang tersedia kemudian pada saat
memilih tombol “simpan”, data tersebut dieksekusikan ke dalam perintah SQL yang
menghubungkan input-an dari form dengan database MySQL yang terdapat pada
“add_vendor.php” sehingga data yang telah dimasukkan user dapat tersimpan.

Gambar 11 Form Vendor pada Mobile

99
Jurnal Teknologi Informasi-Aiti, Vol. 8. No.1, Februari 2011 : 1 - 100

Apabila user memilih “hapus” maka id yang tertampil pada form dieksekusikan ke
alamat “delete_vendor.php” dimana terdapat perintah SQL untuk menghapus. Begitu
pula saat user menginginkan perubahan data pada data tertentu user dapat memilih
“edit” yang kemudian dieksekusikan langsung ke dalam “edit_vendor.php” untuk
memproses pembaharuan data pada perintah SQL update. Jika diakses melalui
mobile dapat dilihat pada Gambar 11.
Form Lokasi, memberikan informasi mengenai data lokasi atau diruang mana
barang inventori berada. Sama halnya dengan beberapa fungsi pada form inventori
dan vendor, pada form lokasi terdapat juga pilihan tombol “reset” untuk
mengosongkan data yang tampil pada tiap kolom supaya dapat menambahkan data
baru ke dalam kolom yang ada. Tombol “simpan” digunakan untuk menyimpan data
lokasi yang telah diisikan disetiap kolom. Data yang telah tersimpan dalam data-
base dapat dilihat dalam tabel data. Beberapa tombol “move” yang digambarkan
dengan anak panah merupakan tombol menampilkan data lokasi yang tersimpan
dari data awal sampai data paling akhir sesuai urutan id-nya. Tombol-tombol tersebut
berguna memilih data lokasi mana yang ingin diubah atau diperbaharui kemudian
pilih tombol “ubah” untuk mengeksekusinya. Disamping itu tombol “move” berguna
juga untuk mencari data lokasi mana yang ingin dihapus, kemudian pilih tombol
“hapus” untuk menghapus data lokasi yang diinginkan. Hasil tampilannya dapat dilihat
pada Gambar 12.

Gambar 12 Form Lokasi pada Desktop dan Web

Pada lokasi, aliran data yang terjadi pada saat penyimpanan data lokasi yaitu diawali
dengan user memasukkan data baru ke dalam kolom yang tersedia kemudian pada
saat memilih tombol “simpan”, data tersebut dieksekusikan ke dalam perintah SQL
yang menghubungkan input-an dari form dengan database MySQL yang terdapat
pada “add_lokasi.php” sehingga data yang telah dimasukkan user dapat tersimpan.
Apabila user memilih “hapus” maka id yang tertampil pada form dieksekusikan ke
alamat “delete_lokasi.php” dimana terdapat perintah SQL untuk menghapus. Begitu
pula saat user menginginkan perubahan data pada data tertentu user dapat memilih
“edit” yang kemudian dieksekusikan langsung ke dalam “edit_lokasi.php” untuk

100