Perancangan Sistem Inventori Kantor Menggunakan...

89

Perancangan Sistem Inventori Kantor MenggunakanFramework RIA (Rich Internet Application)

(Studi Kasus: BISTEK – FTI UKSW)

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

Fakultas Teknologi InformasiUniversitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, IndonesiaEmail : 1)[email protected], 2)[email protected],

3)[email protected]

Abstract

The inventori information system such as recording and bookkeeping in BISTEK Salatiga is still done manually or it is still in a form ofpaper. So, it is difficult to know the amount of goods owned by the company.A computerization and integrated system which is designed usingtechnology-based RIA (Rich Internet Application) and integrated of thedatabase using the action script Flash, PHP script, and the web server byAppServ. It can be used to design the inventori system which can beaccess 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 sejalandengan perkembangan ilmu pengetahuan, sehingga kemampuan komputer untukmembantu manusia dan menyelesaikan masalah semakin meningkat, baikpermasalahan yang sederhana maupun permasalahan yang komplek sekalipun dalamberbagai aspek. Selain digunakan untuk menyimpan data, komputer juga menyajikandata ke dalam bentuk yang lebih mudah dipahami dan lebih akurat kepada user.Informasi yang cepat dan akurat menjadi hal yang penting dalam membuat suatukeputusan yang membantu dalam peningkatan kinerja dan perkembangan sebuahperusahaan. Maka dari itu di dalam perusahaan diperlukan manajemen yang baik,salah satunya dalam memanajemen barang inventori kantor mereka dalam mendukungkinerja para staf kantor. Manajemen inventori perlu dikelola dengan baik agarpekerjaan perawatan barang inventori dapat menjadi lebih mudah karena denganpengadaan pencatatan inventoriasi perusahaan dapat mendaftar semua fasilitas yangada di seluruh bagian, termasuk gedung dan isinya. Maka diperlukan sebuah teknologi

Perancangan dan Implementasi (Manuputty, dkk)

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

90

berupa aplikasi yang dapat membantu dalam pengelolaan barang-barang inventorikantor. Dalam penelitian ini penulis memilih Satya Wacana Bussines TechnologyCenter-FTI UKSW (BISTEK) yang merupakan salah satu perusahaan yang sedangberkembang di kota Salatiga sebagai objek penelitian. Perusahaan ini memfasilitasipengembangan bisnis teknologi di kalangan mahasiswa UKSW dalam aspekmanajerial, pelatihan bidang teknologi informasi, pemanfaatan hasil riset (kerjasamadengan Puslit TIK FTI UKSW), pemasaran produk dan jasa, permodalan, danlain-lain. Dengan dukungan fasilitas perkantoran yang memadai serta jaringan denganberbagai pihak pendukung. Namun sistem informasi dalam pengelolaan maupunpencatatan barang inventori di BISTEK masih menggunakan metode manual yaitupencatatan dan pembukuan yang ditulis pada form kertas kemudian disimpan dalamberkas. Kondisi ini mengakibatkan proses pengolahan data menjadi kurang baik,misalnya dalam pencarian data karena harus membuka berkas satu per satu sehinggaperlu waktu yang mungkin cukup lama saat mencari keberadaan data tersebutdisimpan. Kendala lainnya adalah mengalami kesulitan untuk mengetahui berapabanyak atau apa saja barang yang telah dimiliki perusahaan karena harus menghitungsatu per satu, atau mungkin data tersebut bisa hilang atau rusak karena ada bencanamaupun hal yang tidak diinginkan.Alangkah baiknya jika proses pengolahan databarang inventori dilakukan dengan sistem terkomputerisasi serta dengan menggunakanaplikasi yang menggambarkan antar muka bagi pengguna dalam entry dan pencariandata yang terhubung dengan database. Maka untuk mempermudah prosespengolahan data barang inventori pada kantor perusahaan diperlukan sebuahprogram aplikasi yang mampu untuk mengolah data barang inventori tersebut,sehingga proses data barang inventori dapat secara langsung dilihat dan ditemukaninformasi yang tersimpan dalam database. Dengan aplikasi inventori kantor inidiharapkan agar dapat lebih cepat dalam pencarian informasi data inventori yangdimiliki kantor dan informasi yang tersimpan dalam database tersebut dapat diolahsehingga dapat dicetak sebagai laporan guna mendukung keputusan perusahaannantinya. Secara garis besar BISTEK merupakan perusahaan yang bergerak alambidang teknologi informasi, selayaknya dalam pengelolaan data seperti inventoridiperlukan sebuah pengelolaan yang menerapkan sistem komputerisasi sehinggadapat membantu proses inventoriasi dengan menerapkan tertib administrasi inventori.

Dalam merancang sistem informasi inventoriasi barang tersebut dilakukantahapan-tahapan pembangunan aplikasi diantaranya adalah sistem yang dirancangakan menerapkan teknologi baru bernama RIA (Rich Internet Application).Pemilihan framework dengan memakai RIA ini dilatarbelakangi oleh keunggulanRIA yang berbeda dengan framework lainnya yaitu suatu aplikasi web yang berfungsilayaknya aplikasi multimedia di desktop atau dengan kata lain memiliki fitur danmenerapkan fungsi-fungsi layaknya aplikasi multimedia berbasis desktop. RIA adalahsuatu teknologi yang menggabungkan kelebihan-kelebihan dari aplikasi berbasis webdan desktop. Sifatnya tidak tergantung terhadap suatu sistem operasi menjadikanRIA bisa menjangkau pengguna komputer lebih banyak lagi. Pada dasarnya penulisingin menerapkan sebuah teknologi baru untuk merancang sebuah sistem pada aplikasiinventori kantor. Dengan adanya perancangan sistem ini dapat menjadi masukanserta bahan pertimbangan dalam membangun sistem informasi inventoriasi barang diBISTEK serta menjadi tambahan wawasan bagi pembaca dan penulis tentang

91

Perancangan Sistem (Papilaya, dkk)

perancangan sistem inventoriasi barang dengan menggunakan RIA. Dengan begituteknologi komputer masih menjadi solusi terbaik karena inovasi, keakuratan, sertakecepatannya dalam mengolah suatu data menjadi informasi yang berguna.

2. Kajian Pustaka

Pengertian Rich Internet Application adalah suatu teknologi yangmenggabungkan kelebihan-kelebihan dari aplikasi berbasis web dan desktop.[1]RIA menyajikan antarmuka visual yang cantik dan interaktif. Sifatnya tidak tergantungterhadap suatu sistem operasi menjadikan RIA bisa menjangkau pengguna komputerlebih banyak lagi. Definisi Adobe mengenai RIA yaitu tentang bagaimana suatu aplikasiweb yang berfungsi layaknya aplikasi multimedia di desktop PC dengan akses tanpabatas ke berbagai jaringan komputer lainnya. Dengan kata lain, RIA adalah aplikasiweb yang sebagian besar karakteristik dari aplikasi desktop. Contoh RIA frameworkadalah Curl, GWT, Adobe Flash/Adobe Flex/AIR, Java/JavaFX, Mozilla XUL danMicrosoft Silverlight. Diagram Ria dapat digambarkan pada Gambar 1, dimanadiagram tersebut menggambarkan bahwa teknologi RIA menggabungkan antaraDesktop Application, Web Application dan Communication Technologies.

Gambar 1 Diagram RIA

RIA dapat dikatakan sebuah teknologi yang baru karena padaperkembangannya nama Rich Internet Application diperkenalkan pada bulan Maret2002 oleh Macromedia (sekarang bernama ADOBE). Namun konsep RIAsebenarnya sudah lama dipakai seperti Remote Scripting, oleh Microsoft, circapada 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 amatmencolok dengan web konvensional. Aplikasi yang dibangun dengan konsep RIAini tidak me-reload halaman ketika suatu tombol atau link diklik karena hanya meng-update bagian-bagian tertentu ketika kita melakukan suatu aksi. Sementara padaweb konvensional, halaman akan di-update secara keseluruhan ketika kitamelakukan suatu aksi; (b) Dapat melakukan banyak hal. Dengan memanfaatkanRIA, aplikasi yang dirancang ini dapat melakukan sesuatu seperti apa yang dilakukanpada sebuah aplikasi desktop. Tingkat interaktifitas yang tinggi memungkinkan


92

developer untuk memindahkan fitur-fitur pada sebuah aplikasi desktop ke dalamaplikasi web. Komponen yang terdapat pada software pendukung RIA lebih lengkapketimbang komponen yang dimiliki oleh software untuk membangun web biasanya.Sudah banyak aplikasi RIA yang dimanfaatkan seperti word processor, instantmesengger, dan sebagainya; (c.) Menjangkau user yang lebih banyak. Aplikasi RIAyang akan dirancang ini bisa dijalankan pada sistem operasi apapun dengan spesifikasihardware yang tidak harus tinggi. Asalkan sistem operasi itu bisa menjalankanbrowser dan flash player maka aplikasi RIA dapat dijalankan dengan baik. Denganbegitu aplikasi dapat digunakan oleh pengguna yang memakai sistem operasi apasaja; (d.) Komunikasi Menjadi Lebih Mudah. Dengan menerapkan RIA pada aplikasiini, developer bisa memanfaatkan banyak media untuk melakukan sesuatu. MisalnyaChatting berbasis teks, misalnya melalui Yahoo! Web Mesengger, Gmail Chat,Ebuddy, Meebo, Facebook Chat. Disamping itu ada juga Audio-Video Conferencemelalui Gmail Video Chat, dll.

Ada beberapa perangkat teknologi untuk membangun aplikasi berbasis RIA,yaitu AJAX dan Javascript, AJAX merupakan singkatan dari AsynchronousJavascript and XML. Teknologi ini adalah pemain lama yang juga masih setiapdigunakan oleh perusahaan besar pembuat aplikasi berbasis RIA. Beberapa contohaplikasi 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 bentukiklan, animasi, situs profil hingga aplikasi yang sifatnya spesifik. Aplikasi berbasisFlash ini sifatnya browser friendly, jadi aplikasi Flash ini bisa dijalan di setiapbrowser asalkan pada browser itu telah terinstal Flash Player yang sesuai. Java,sama seperti Flash, aplikasi berbasis Java membutuhkan aplikasi tambahan yangdisebut Java Runtime Environment (JRE) agar bisa berjalan dengan lancar padabrowser. Saat ini, aplikasi berbasis Java belum bisa bersaing dengan aplikasi lainyang berbasis AJAX maupun Flash. Silverlight, merupakan produk buatan Microsoftyang 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 membangunaplikasi RIA. Walaupun demikian, popularitasnya masih kalah jika dibandingkandengan AJAX dan Flash. JavaFX, produk yang dinamakan JavaFX ini menawarkaninteraktivitas, animasi dan tipe pemograman yang konsisten dengan AJAX, Flashdan teknologi Silverlight Microsoft yang baru. JavaFX ini merupakan sebuahtambahan baru untuk platform Java yang menjanjikan pemakaian konsistendari desktop ke alat-alat portabel. JavaFX ini memungkinkan RIA untuk tampil dilayar mobile device, desktop, televisi dan sebagainya. Pada penelitian ini penulismemilih Flash untuk membangun aplikasi teknologi RIA. Jadi, RIA adalah suatuteknologi yang akan memberikan pengalaman yang berbeda dari sebelumnya bagipengguna internet karena RIA menggabungkan kelebihan dari aplikasi berbasis webdan aplikasi berbasis desktop. RIA memungkinkan kita untuk melakukan sesuatuseperti apa yang kita lakukan pada aplikasi desktop namun tidak lepas dari aktifitasonline bersama pengguna internet lainnya seperti chatting, video conference, sertaberbagi informasi.

93

3. Metode Penelitian

Metode yang dipakai untuk membuat sistem dan perancangan yang dilakukandalam membangun aplikasi sistem inventori dengan teknologi RIA adalah modelprototyping. Secara umum tahapan pada dapat dijelaskan dan d ilihat pada Gambar2.1. Tahap pertama pengumpulan kebutuhan pengguna yang dievaluasi oleh pelanggan

dan digunakan untuk mengelola kembali kebutuhan dari perangkat lunak yangdikembangkan. Proses iterasi terjadi sebanyak dua kali, setelah prototipedisesuaikan dengan kebutuhan pelanggan, pada pihak pengembang aplikasi makinmengerti keinginan pemakai.

2. Tahap perancangan sistem dilakukan dengan menggunakan menggambarkanaliran data serta alur sistem dengan menggunakan UML.

3. Tahap implementasi ini akan menerapkan bagaimana pengkodean yang dilakukandalam 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 pengembangandari pembuata aplikasi. Pada bagian ini akan dibahas diagram use case, activitydiagram dan class diagram. Use Case Diagram, diagram ini menggambarkanfungsionalitas yang diharapkan sebuah sistem, use case diagram merepresentasikansebuah interaksi antar actor dan sistem. Use case merupakan langkah-langkah yangdiikuti User dalam memanfaatkan sistem dengan kata lain dapat menggambarkansecara garis besar sistem yang akan dikembangkan. Sedangkan actor merupakanorang, organisasi atau sistem lain yang dapat menginisialisasi sebuah instance dariuse case. Diagram use case perancangan sistem untuk aplikasi inventori kantordapat dilihat pada Gambar 3.



94

tambah data

edit data

hapus data

mencari data barang

tambah data

edi t data

hapus data

mengolah data inventaris

<<include>>

<<include>>

<<include>>

mengolah data kategori

<<include>>

<<include>>

<<include>>

mengolah data vendor

tambah dataedi t datahapus data

<<include>>

<<include>>

<<include>>

sekretaris BISTEK

pegawai BISTEK dosenmel ihat data

<<include>>

Gambar 3 Use Case Diagram

Activity Diagram adalah diagram yang memperlihatkan aliran dari suatuaktifitas ke aktifitas lainnya dalam suatu sistem. Gambar 4 adalah activity diagramdari Transaksi penjualan tunai.

sta rt

m em il ih m enu search

meng inpu tkan kataku nci be rdasa rkan ka tegori

menamp ilkan fo rm utam a

m enam pi lkan for m sea rch

end

m enam pi lkan da ta

cek va lidi tas

s alah

bena r

komputeruser

Gambar 4 Diagram Aktifitas Cari Data

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

95

dengan memasukkan query dan parameter pencarian. Hasil yang diharapkan adalahaplikasi inventori kantor ini akan menampilkan daftar barang yang sesuai denganmasukan yang diberikan oleh user. Skenario pengujian fungsionalitas prosespencarian barang dapat dilihat pada Tabel 2. Secara umum, hasil pengujian yangdiperoleh yaitu pertama komponen- komponen yang berkaitan dengan use case“Cari Barang” telah sesuai dengan spesifikasi yang didefinisikan. Kedua, integrasitiap-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 babsebelumnya kemudian diimplementasikan dan setelah tahap implementasi berhasilmaka selanjutnya setiap unit proses akan diuji untuk mengetahui kesesuaian fungsinyadengan tujuan yang ingin dicapai. Dalam perancangan sistem, coding ditulis denganbahasa pemrograman action script dan PHP. Sedangkan untuk pengujian unitdilakukan dengan menggunakan black box testing. Antar muka yang dikembangkandibuat dalam satu projek dengan menggunakan software pembangun aplikasi berupaAdobe Flash CS3 Profesional, selain dalam format file .swf pada flash file jugadapat di-publish kedalam beberapa bentuk file seperti format .exe yang berbasisdesktop dan .html yang dapat dijalankan dengan menggunakan browser. Aplikasiyang dibangun ini juga dapat di akses melalui web mobile yang akan ditampilkan


96

kategorikode_kateg : Stringnm_kategori : Stri ngke t_ka teg

tam bah_data ()ubah_data()hapus_data()

lokasikode_lokasi : Stringnam a_lokas i : Stringket_ lokasi

tam bah_l okas i()ubah_ lokasi()hapus _lokasi()

vendorkode_vendor : Stringnama-vendor : Stringphone : Stringem ai l : Stri ngal am at : String

tambah_kode()ubah_kode()hapus_kode()

i nventarisid : Stringnama_ item : Stringkategori : Stringmerk_tipe : Stringsn : Stringtg l_ trm : Stringti pe : Stri ngkondis i_brg : Stringdeskripsi : Stringcopyright : Stringgarans i : Stringid_vendor : Stringqty : Integerhrg : Stri ngto t : String

tambah_data()ubah_data ()hapus_data()

1

1

1

1

1

1

1

1

1

1

1

1

Gambar 6 Class Diagram

7. Pengujian Sistem

Pengujian terhadap perancangan aplikasi inventori kantor ini untukmengujicobakan penerapan rangkaian aktifitas proses perancangan aplikasi inventorikantor studi kasus BISTEK. Spesifikasi lingkungan perangkat lunak yang digunakandalam pengujian sama dengan spesifikasi lingkungan perangkat lunak yang digunakandalam proses perancangan perangkat lunak. Konsep Black Box Testing atau kotakhitam digunakan untuk merepresentasikan yang cara kerja didalamnya tidak tersediauntuk diinspeksi. Di dalam kotak hitam, item yang diuji dianggap “gelap” karenalogiknya tidak diketahui, yang diketahui hanya apa yang masuk dan apa yang keluardari kotak hitam.[2] Pada pengujian kotak hitam, kasus-kasus pengujian berdasarkanpada spesifikasi sistem. Rencana pengujian dapat dimulai sedini mungkin dari prosespengembangan aplikasi. Pada pengujian ini akan dicoba beragam masukan danmemeriksa keluaran yang dihasilkan sehingga akan dapat dipelajari apa yang dilakukankotak, namun tidak dapat mengetahui sama sekali mengenai cara konversidilakukan.Skenario Pengujian atau rencana pengujian yang akan dilakukan dapatdilihat pada Tabel 1.

Tabel 1 Rencana Pengujian Fungsionalitas Perangkat Lunak

No. Use Case Pengujian Jenis Pengujian Identifikasi

1. Search Book 1. Skenario Normal Black box U-F-01

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

97

sistem akan menampilkan kembali form cari data. Apabila data ditemukan makasistem menampilkan data yang dicari. Sedangkan diagram aktifitas untuk melihatdata.

Sequence Diagram adalah secara khusus menjabarkan behavior sebuahskenario tunggal. Gambar 5 menjelaskan bahwa pada saat masuk ke form inventoriuser akan melihat data yang tersimpan dalam database. Controller cari barangmembaca semua record inventori ke database kemudian menampilkan data tersebutke form inventori. Kemudian contoller “caribarang” membaca record berdasarinput-an, jika ada data yang sesuai dengan input-an maka data tersebut tertampilpada form cari dan lihat barang inventori.

: formCari : caribarang : Inventaris

2: baca data inventaris

3: baca semua record inventaris

4: tampil data inventaris

5: caridata sesuai input

6: baca record data sesuai input

8: tampil data inventaris yang dicari

1: openDB

7: closeDB

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 gambarclass diagram dari proses user dan admin. Yang menggambarkan struktur dandeskripsi class, class merupakan sebuah spesifikasi yang jika diinstansiasi akanmenghasilkan sebuah objek dan merupakan inti dari pengembangan sistem. Diagramtersebut menjelaskan bahwa terdapat empat kelas yaitu kelas inventori, kelas kategori,kelas vendor, dan kelas lokasi yang memiliki nilai atau atribut masing-masing.

dengan menggunakan emulator. Pemakaian ketiga format file aplikasi ini merupakanpengimplementasian dari konsep RIA. Form Halaman Utama dalam perancangannyamemiliki fungsi untuk lihat dan cari data barang inventori, input data barang inventori,input dan lihat jenis kategori, input dan lihat data lokasi, input dan lihat data vendor.Adapun tampilan halaman utama aplikasi pada desktop adalah Gambar 7, sedangkanuntuk tampilan web serupa dengan tampilan antarmuka pada desktop.

Gambar 7 Form Utama Desktop dan Web

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

Gambar 8 Form Utama Mobile

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



98

Terdapat pilihan tombol “reset” untuk mengosongkan data yang tampil pada tiapkolom 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 panahmerupakan tombol menampilkan data dari awal sampai akhir. Tombol-tombol tersebutberguna memilih data yang ingin diubah atau diperbaharui kemudian pilih tombol“ubah” untuk mengeksekusinya. Disamping itu tombol “move” berguna juga untukmencari data barang mana yang ingin dihapus, kemudian pilih tombol “hapus” untukmenghapus 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 denganuser memasukkan data baru ke dalam kolom yang tersedia kemudian pada saatmemilih tombol “simpan”, data tersebut dieksekusikan ke dalam perintah SQL yangmenghubungkan inputan dari form dengan database MySQL yang terdapat pada“add_item.php”. Apabila user memilih “hapus” maka id yang tertampil pada formdieksekusikan ke alamat “delete_item.php” dimana terdapat perintah SQL untukmenghapus. Begitu pula saat user menginginkan perubahan data pada data tertentuuser 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 yangtelah bekerjasama dengan BISTEK seperti dalam memberikan beberapa saranaseperti komputer misalanya guna mendukung aktifitas yang dijalankan oleh BISTEKdan juga data toko-toko tempat pembelian barang-barang yang diperlukan kantor.Terdapat pilihan tombol “reset” untuk mengosongkan data yang tampil pada tiapkolom supaya dapat menambahkan data baru ke dalam kolom yang ada. Tombol“simpan” digunakan untuk menyimpan data yang telah diisikan disetiap kolom. Datayang telah tersimpan dalam database dapat dilihat dalam tabel data. Sedangkanbeberapa tombol “move” yang digambarkan dengan anak panah merupakan tombolmenampilkan data vendor yang tersimpan dari awal sampai akhir. Tombol-tombol

99

tersebut berguna memilih data yang ingin diubah atau diperbaharui kemudian pilihtombol “ubah” untuk mengeksekusinya. Disamping itu tombol “move” berguna jugauntuk 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 denganuser memasukkan data baru ke dalam kolom yang tersedia kemudian pada saatmemilih tombol “simpan”, data tersebut dieksekusikan ke dalam perintah SQL yangmenghubungkan 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



100

Apabila user memilih “hapus” maka id yang tertampil pada form dieksekusikan kealamat “delete_vendor.php” dimana terdapat perintah SQL untuk menghapus. Begitupula saat user menginginkan perubahan data pada data tertentu user dapat memilih“edit” yang kemudian dieksekusikan langsung ke dalam “edit_vendor.php” untukmemproses pembaharuan data pada perintah SQL update. Jika diakses melaluimobile dapat dilihat pada Gambar 11.

Form Lokasi, memberikan informasi mengenai data lokasi atau diruang manabarang inventori berada. Sama halnya dengan beberapa fungsi pada form inventoridan vendor, pada form lokasi terdapat juga pilihan tombol “reset” untukmengosongkan data yang tampil pada tiap kolom supaya dapat menambahkan databaru ke dalam kolom yang ada. Tombol “simpan” digunakan untuk menyimpan datalokasi yang telah diisikan disetiap kolom. Data yang telah tersimpan dalam data-base dapat dilihat dalam tabel data. Beberapa tombol “move” yang digambarkandengan anak panah merupakan tombol menampilkan data lokasi yang tersimpandari data awal sampai data paling akhir sesuai urutan id-nya. Tombol-tombol tersebutberguna memilih data lokasi mana yang ingin diubah atau diperbaharui kemudianpilih tombol “ubah” untuk mengeksekusinya. Disamping itu tombol “move” bergunajuga untuk mencari data lokasi mana yang ingin dihapus, kemudian pilih tombol“hapus” untuk menghapus data lokasi yang diinginkan. Hasil tampilannya dapat dilihatpada Gambar 12.

Gambar 12 Form Lokasi pada Desktop dan Web

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

Perancangan Sistem Inventori Kantor Menggunakan...

Documents

Transcript of Perancangan Sistem Inventori Kantor Menggunakan...