## SISTEM INVENTORI BARANG DENGAN TEKNOLOGI AJAX

## Anna Fitriya
Fakultas Teknik, Program Studi Teknik Informatika Universitas Muria Kudus Email: annafitriya@yahoo.com
Mukhamad Nurkamid Fakultas Teknik, Program Studi Teknik Informatika Universitas Muria Kudus Email: nurkamid@gmail.com

## Tutik Khotimah
Fakultas Teknik, Program Studi Teknik Informatika Universitas Muria Kudus Email: tutik.khotimah@gmail.com

## ABSTRAK
Sistem inventori barang pada pertokoan telah banyak dikembangkan untuk meningkatkan efektivitas dan efisiensi. Pada Toko Karya Indah, kegiatan yang berkaitan dengan inventori barang masih dilakukan secara  manual  sehingga  pihak  toko  kesulitan  untuk  mengetahui  data  barang  yang  masih  tersedia,  habis, atau hampir habis. Selain itu, proses yang dilakukan membutuhkan waktu yang relatif lama. Oleh karena itu, diperlukan sistem inventori barang. Sistem dibangun dengan bahasa pemrograman PHP dan database MySQL.  Sistem  disertai  teknologi AJAX ( Asynchronous  JavaScript  And  XML ),  khususnya AJAX autocomplete dan AJAX validasi.  Hasil  yang  diperoleh  adalah  pengolahan  data  pada  sistem  inventori barang dengan menggunakan AJAX dapat dilakukan dengan lebih cepat dari pada tanpa AJAX .
Kata kunci: sistem inventori, AJAX.

## ABSTRACT
Goods inventory system in the shops has been developed to improve the effectiveness and efficiency. In Karya Indah Store, activities that related to the inventory of goods are still done manually so that store difficult  to  know  the  data  items  are  available,  data  item  exhausted,  or  data  item  nearly  exhausted.  In addition, the process is done requires a relatively  long time. Therefore, they necessary  goods inventory system. This system is built by using PHP as the programming language and MySQL as database. This system is equipped with AJAX (Asynchronous JavaScript And XML) technology, especially autocomplete and  validation.    The  result  is  a  data  processing  in  good  inventory  system  by  using  AJAX  can  be  done more quickly.
Keywords: inventory system, AJAX.

## 1. PENDAHULUAN
Sistem inventori barang [1][2][3][4][5] telah banyak dikembangkan untuk meningkatkan efektivitas dan efisiensi. Inventori atau persediaan adalah sejumlah bahan/barang yang disediakan oleh perusahaan, baik  berupa  barang  jadi,  bahan  mentah,  maupun  barang  dalam  proses  yang  disediakan  untuk  menjaga kelancaran  operasi  perusahaan  guna  memenuhi  permintaan  konsumen  setiap  waktu  [6].  Dari  pengertian tersebut maka perusahaan jasa tidak memiliki persediaan, perusahaan dagang hanya memiliki persediaan barang dagang, sedangkan perusahaan industri memiliki 3 jenis persediaan yaitu persediaan bahan baku, persediaan  dalam  proses,  dan  persediaan  barang  jadi.  Sistem  inventori/persediaan  barang  merupakan suatu sistem yang menjelaskan bagaimana transaksi penerimaan barang dan transaksi penggunaan barang yang  berisi  tentang  status  stok  barang  itu  sendiri  yang  dapat  membantu  meningkatkan  produktivitas perusahaan
Toko  Karya  Indah  adalah  salah  satu  toko  yang  belum  menerapkan  sistem  inventori  barang.  Pada Toko Karya Indah, penjualan dan pembelian dilakukan dengan pencatatan di buku penjualan atau hanya berupa nota saja. Barang  yang  masuk dan barang  yang  keluar tidak didata secara terstruktur.  Akibatnya pihak  toko  akan  kesulitan  untuk  mengetahui  barang  apa  saja  yang  masih  tersedia,  dan  barang  apa  saja
yang  sudah  habis  atau  hampir  habis  sehingga  perlu  melakukan  penambahan  stok  barang.  Untuk mengetahui  informasi  tersebut,  pihak  toko  harus  menghitung  jumlah  barang  satu  per  satu  sehingga membutuhkan waktu yang lama. Informasi yang sulit dan lama diperoleh ini akan berakibat pada proses pengambilan  keputusan  yang  lama  dan  atau  kurang  tepat,  terutama  pengambilan  keputusan  untuk menambah atau tidak menambah stok baru. Barang yang kurang laku tidak perlu dilakukan penambahan stok,  sedangkan  barang  yang  laku  harus  dilakukan  penambahan  stok  sebelum  barang  itu  habis.  Apabila pihak toko salah mengambil keputusan, maka toko akan mengalami kerugian.
Untuk  mengatasi  masalah  tersebut,  diperlukan  sistem  inventori  barang  pada  Toko  Karya  Indah. Dengan sistem tersebut, transaksi penjualan dan pembelian dapat dikelola melalui sistem. Informasi yang diperlukan  dapat  lebih  cepat  dan  mudah  diperoleh  sehingga  keputusan  dapat  diambil  lebih  cepat  dan tepat.
Asynchronous  JavaScript  And  XML ( AJAX )  [7][8]  adalah  penggabungan  dari JavaScript dan XML yang  membuat  aplikasi  web  lebih  interaktif.  Tujuannya  adalah  untuk  memindahkan  sebagian  besar interaksi pada komputer web surfer , melakukan pertukaran data dengan server di belakang layar, sehingga halaman  web  tidak  harus  dibaca  ulang  secara  keseluruhan  setiap  kali  seorang  pengguna  melakukan perubahan. Sistem yang menggunakan teknologi AJAX dapat jauh lebih cepat dibandingkan dengan web tradisional biasa.
Pada  penelitian  ini,  sistem  inventori  dibangun  dengan  menerapkan  teknologi AJAX .  Dengan teknologi AJAX diharapkan  informasi  yang  ditampilkan  lebih  optimal  dan  sistem  yang  dihasilkan  lebih ringan  dan  mudah  diakses.  Ada  pun  teknologi AJAX yang  digunakan  adalah AJAX autocomplete dan AJAX validasi. AJAX autocomplete terdapat  dalam  transaksi  penjualan  dan  transaksi  pembelian  yang digunakan  untuk  memanggil  data  barang  tanpa  harus  me- load seluruh  halaman.  Sedangkan AJAX validasi  berfungsi  untuk  memberikan  validasi  yang  lebih  cepat  pada  form  penginputan  data  dan penginputan transaksi untuk memastika bahwa data yang dimasukkan adalah data yang valid.

## 2. METODE PENELITIAN
Penelitian ini dilaksanakan dengan langkah-langkah penelitian sebagai berikut:
a. Pengumpulan data
Ada beberapa metode yang digunakan untuk melakukan pengumpulan data, antara lain:
1) Observasi
Observasi dilakukan dengan melakukan pengamatan pada objek studi, yaitu Toko Karya Indah yang terletak di Jalan AKBP R Agil Kusumadya No 89 Kudus. Ada pun kegiatan yang diamati adalah  kegiatan  pembelian barang  melalui suplier , pencatatan barang  yang masuk,  pencatatan  stok  barang,  transaksi  penjualan  kepada  konsumen,  dan  pencatatan barang yang keluar.
2) Wawancara ( Interview )
Metode  ini  dilakukan  dengan  melakukan  tanya  jawab  secara  langsung kepada  pihak- pihak yang terlibat, seperti pemilik toko dan petugas penjaga toko.
3) Dokumentasi
Metode ini dilakukan dengan mengumpulkan dokumen-dokumen  yang berkaitan dengan inventori barang, seperti struk pembelian dan penjualan, kartu stok barang.
4) Literatur
Metode ini dilakukan untuk  mengumpulkan  materi-materi  yang berkaitan dengan  sistem inventori.
b. Analisis
Pada tahap analisis, ada beberapa kegiatan yang dilakukan. Pertama adalah melakukan analisis terhadap  objek  studi,  yaitu  Toko  Karya  Indah.  Kegiatan  ini  dilakukan  untuk  mengetahui bagaimana  sistem  inventori  yang  sedang  berjalan  di  Toko  Karya  Indah  dan  masalah  apa  saja yang  terjadi.  Setelah  merumuskan  masalah  yang  ada,  langkah  selanjutnya  adalah  mencari solusi. Setelah menentukan solusi yang dipilih, langkah berikutnya adalah melakukan analisis kebutuhan,  baik  kebutuhan  data  dan  informasi,  mau  pun  kebutuhan  infrastruktur  yang diperlukan untuk sistem inventori.
c. Perancangan
Pada  tahap  perancangan,  ada  beberapa  hal  yang  dilakukan,  yaitu  perancangan  sistem, perancangan database ,  dan  perancangan interface .  Perancangan  sistem  dilakukan  untuk menggambarkan  alur  proses  dari  sistem  inventori  yang  baru.  Perancangan  sistem  dilakukan dengan  menggunakan Data  Flow  Diagram ( DFD )  [9] . Sedangkan  perancangan database
dilakukan  untuk  menghasilkan  tempat  penyimpanan  data  yang  sesuai  dengan  kebutuhan. Perancangan database diawali  dengan  membuat Entity  Relationship  Diagram ( ERD )[10] kemudian  melakukan  transformasi  ke  tabel.  Setelah  proses  transformasi  dari ERD ke  tabel, proses  selanjutnya  adalah  melakukan  normalisasi  [10]  terhadap  tabel-tabel  yang  berasal  dari relasi.  Proses  ini  dilakukan  untuk  menghasilkan  tabel-tabel  yang  normal.  Pada  perancangan interface ,  yang  dilakukan  adalah  menyusun  tampilan form untuk  proses  penginputan  data, seperti: form input data master barang, form transaksi penjualan dan pembelian. Selain itu juga merancang  tampilan  dari  informasi  yang  ingin  dihasilkan  dari  sistem,  seperti  informasi  stok barang.
d. Implementasi
Tahap  implementasi  adalah  tahap  pengkodean  terhadap  rancangan-rancangan  yang  telah didefinisikan  sehingga  akan  membentuk  sistem  inventori  sesuai  dengan  yang  diharapkan. Pengkodean  sistem  dilakukan  dengan  menggunakan  bahasa  pemprograman  PHP.  Rancangan database juga diubah menjadi sebuah basis data yang dapat digunakan untuk menyimpan data sesuai kebutuhan. Pada sistem ini, basis data dibuat dengan MySQL.
e. Pegujian
Setelah  diperoleh  aplikasi  sistem  inventori,  tahap  selanjutnya  adalah  ke  pengujian  untuk menguji fitur-fitur pada sistem dengan menggunakan pengujian blackbox .
Ada pun kerangka pemikiran dari penelitian ini dapat dilihat pada gambar 1.
Gambar 1. Kerangka Pemikiran

## 3. HASIL DAN PEMBAHASAN

## 3.1 Gambaran Sistem Inventori Barang dengan Teknologi AJAX
Pada penelitian sistem inventori barang ini tidak hanya menggunakan web model biasa (tradisional), tetapi  web  yang  disertai  dengan  teknologi Asynchronous  JavaScript  And  XML ( AJAX )[7].  Pada  web tradisional, browser membuat  sebuah HTTP request yang  dikirim  ke server ,  misalnya  index.html.  Pada model ini, server mengirimkan response berisi seluruh halaman termasuk header , logo, navigasi, footer , dll. Ketika mengeklik next maka akan menampilkan halaman baru (artinya, header , logo, footer , navigasi dikirim  ulang)  dan  seterusnya  akan  mengirimkan  data  halaman  baru  setiap  diminta request dari user . Halaman seperti ini tidak menjadi masalah ketika data yang ditampilkan tidak memerlukan response yang cepat.  Namun,  akan  menjadi  masalah  jika user menginginkan response yang  cepat,  misalnya  ketika dipilih drop-down tertentu  maka  dapat  ditampilkan  berubah  menurut  nilai  dari drop-down .  Arsitektur model tradisional dapat dilihat pada gambar 2.
Web yang  disertai  model AJAX akan  berkomunikasi  dengan server tanpa  harus  me- refresh semua halaman. Konsep ini berbeda dengan aplikasi web sistem tradisional. Dalam  model AJAX , aksi dari sisi klien dibagi menjadi dua bagian, yaitu layer user interface dan layer AJAX . Arsitektur model AJAX dapat dilihat pada gambar 3.
Gambar 3. Arsitektur Model AJAX [7]
Ketika user mengeklik  sebuah link atau  mengirimkan  sebuah form maka input tersebut  akan ditangani oleh layer AJAX dan diinteraksikan dengan server , kemudian meng- update user interface ( UI ). Jadi, dalam AJAX , internal si UI secara logika terpisah dengan interaksi jaringan. Pendekatan yang digunakan AJAX adalah bagaimana mengirimkan jumlah data yang kecil dari dan ke server atas request dari user . Model aplikasi web tradisional dimana browser akan me- respons sendiri atas  inisialisasi request ,  memproses request dari web server .  Dalam AJAX terdapat layer yang  diberi nama AJAX engine untuk  menangani  komunikasi. AJAX Engine adalah  sebuah  obyek JavaScript atau function yang dipanggil ketika informasi diperlukan dari server . Proses yang dilakukan mesin AJAX ( AJAX Engine ) adalah menerima respons dari server , melakukan parsing data  dan  melakukan  sedikit  perubahan  untuk  keperluan  menampilkan  informasi.  Oleh  karena proses mengirimkan sedikit informasi, jika dibanding dengan model aplikasi web tradisional, maka user interface di- update lebih cepat dan user mampu melakukan pekerjaannya dengan cepat [7][8]. Data  Flow  Diagram [9]  adalah  suatu  diagram  yang  menggambarkan  suatu  arus  data  pada  sistem. Gambar  5  adalah Data  Flow  Diagram pada  sistem  inventori  barang.  Dalam  sistem  inventori,  terdapat lima entitas eksternal, yaitu kepala, gudang, kasir, supplier , dan pelanggan. Ada  pun  tabel  yang  dihasilkan  antara  lain  :  tabel  user,  tabel  kategori,  tabel  barang,  tabel  supplier, tabel  pembelian,  tabel  penjualan,  tabel  pelanggan,  tabel  kerusakan,  tabel  pembelian_detail,  dan  tabel penjualan_detail. Sedangkan relasi dari masing-masing tabel dapat dilihat pada gambar 4.
Gambar 4. Relasi Tabel Sistem Inventori Barang
1
Proses olah data 2 Proses transaksi 3 Proses laporan Kepala Pelanggan Supplier Gudang Kasir barang kategori kerusakan supplier user pelanggan pembelian penjualan lihat_lap_data_barang lihat_lap_data_kategori lihat_lap_data_kerusakan lihat_lap_data_pelanggan lihat_lap_data_pembelian lihat_lap_data_penjualan lihat_lap_data_supplier lihat_lap_data_user laporan_data_barang laporan_data_kategori laporan_data_kerusakan laporan_data_pelanggan laporan_data_pembelian laporan_data_penjualan laporan_data_supplier laporan_data_user bayar bukti_bayar faktur_pembelian pembayaran_faktur data_pembelian informasi_data_pembelian data_penjualan informasi_data_penjualan data_pelanggan informasi_data_pelanggan data_user data_supplier data_kerusakan data_kategori data_barang informasi_data_user informasi_data_supplier informasi_data_kerusakan informasi_data_kategori informasi_data_barang penjualan pembelian pelanggan user supplier kerusakan kategori barang barang pembelian pelanggan user supplier kerusakan kategori penjualan

## Gambar 5. DFD Sistem Inventori Barang

## 3.2 Implementasi Sistem Dengan AJAX
Dalam  sistem  inventori  ini,  ada  3  level  hak  akses,  yaitu  kepala,  gudang,  dan  kasir.  Level  gudang bertugas  menginputkan  data  barang  yang  masuk  melalui  transaksi  pembelian,  sedangkan  level  kasir bertugas menginputkan data barang yang keluar melalui transaksi penjualan. Level kepala hanya melihat informasi barang yang masuk dan informasi barang yang keluar.
Setelah user sukses  melakukan  peng- input -an  di  halaman login menggunakan  hak  akses  gudang, maka halaman menu sistem dengan hak akses gudang akan menampilkan data stok barang yang hampir habis dengan jumlah minimal barang yang sudah ditentukan seperti pada gambar 6.
Gambar 6. Halaman Utama Hak Akses Gudang
Jika user gudang  ingin  menambah  data  barang,  maka user gudang  akan  menuju  halaman  tambah data barang yang dapat dilihat pada gambar 7.

## Gambar 7. Halaman Input Data Barang
Pada  halaman  tambah  data  barang  terdapat  tiga field yaitu  kode  barang,  nama  barang,  dan  nama kategori. User gudang hanya mengisi nama barang, dan nama kategori karena bagian kode barang sudah otomatis  bertambah  satu  waktu  awal  membuka  halaman  data  barang.  Jika  nama  barang  tidak  di- input , maka akan muncul pesan validasi seperti pada gambar 8.
Gambar 8. Validasi Input Data Barang Yang Kosong
Jika user gudang ingin  menambah data supplier ,  maka user gudang akan  menuju halaman tambah data supplier yang dapat dilihat pada gambar 9.
Gambar 9. Halaman Input Data Supplier
Pada halaman tambah data supplier terdapat empat field yaitu kode supplier , nama supplier , alamat supplier ,  dan  nomor  telepon supplier . User gudang  hanya  mengisi  nama supplier ,  alamat supplier ,  dan nomor telepon supplier karena bagian kode supplier sudah otomatis bertambah satu waktu awal membuka halaman  data supplier .  Jika  data supplier tidak  di- input lengkap,  maka  akan  muncul  pesan  validasi seperti pada gambar 10.
AJAX validasi data masih kosong

## Gambar 10. Validasi Input Data Supplier
Pada form transaksi pembelian terdapat peng- input -an dua  tabel,  yang pertama peng- input -an pada tabel  pembelian  detail,  dan  kemudian  peng- input -an  pada  tabel  pembelian.  Langkah  pertama  yang dilakukan user gudang  adalah  meng- input -kan  kode  barang  dan  otomatis  akan  muncul  detail  dari  kode barang  yang  telah  di- input -kan.  Di  dalam form transaksi  pembelian,  terdapat  AJAX autocomplete yang berfungsi mempermudah user gudang dalam melakukan pencarian data barang secara otomatis dan cepat. Setelah melakukan peng- input -an kode barang, user gudang meng- input -kan jumlah barang yang masuk, kemudian  klik button “Tambah”  dan  tersimpan  di  dalam  tabel  pembelian  detail.  Jika  terjadi  kesalahan peng- input -an,  maka klik button “Remove”  maka data  yang tersimpan pada tabel pembelian detail akan terhapus.  Jika  tidak,  maka  dilanjutkan  dengan  proses  peng- input -an  nama supplier dan  nomor  faktur supplier kemudian  klik button “Simpan”  maka  data  akan  tersimpan  ke  dalam  tabel  pembelian.  Menu transaksi pembelian pada hak akses gudang dapat dilihat pada gambar 11.
Gambar 11. Form Transaksi Pembelian
Pada form transaksi  penjualan  terdapat  peng- input -an  dua  tabel,  yang  pertama  peng- input -an  pada tabel  penjualan  detail,  dan  kemudian  peng- input -an  pada  tabel  penjualan.  Langkah  pertama  yang dilakukan user kasir  adalah  meng- input -kan  kode  barang  dan  otomatis  akan  muncul  detail  dari  kode barang  yang  telah  di- input -kan.  Di  dalam form transaksi  penjualan,  terdapat AJAX  autocomplete yang berfungsi  mempermudah user kasir  dalam  melakukan  pencarian  data  barang  secara  otomatis  dan  cepat. Setelah  melakukan  peng- input -an  kode  barang, user kasir  meng- input -kan  jumlah  barang  yang  keluar, kemudian  klik button “Tambah”  dan  tersimpan  di  dalam  tabel  penjualan  detail.  Jika  terjadi  kesalahan peng- input -an,  maka  klik button “Remove”  maka  data  yang  tersimpan  pada  tabel  penjualan  detail  akan terhapus. Jika tidak maka dilanjutkan dengan proses peng- input -an nama pelanggan kemudian klik button “Simpan” maka data akan tersimpan ke dalam tabel penjualan. Menu transaksi Penjualan pada user kasir dapat dilihat pada Gambar 12.
AJAX validasi data harus berupa angka
AJAX autocompete pencarian detail
barang AJAX validasi data harus berupa angka
Gambar 12. Form Transaksi Penjualan

## 4. KESIMPULAN
Dari hasil penelitian ini dapat disimpulkan sebagai berikut:
1) Sistem inventori barang dapat meningkatkan efektivitas dan efisiensi.
Dengan adanya sistem ini, pihak toko dapat memperoleh informasi tentang barang yang masih tersedia, barang  yang  habis atau barang  yang  hampir habis dengan  mudah dan cepat. Dengan informasi  yang mudah dan cepat ini, pihak toko dapat  mengambil  keputusan lebih awal  untuk  menambah stok baru bagi  barang  yang  habis  atau  hampir  habis  melalui  transaksi  pembelian.  Pihak  toko  juga  dapat mengambil keputusan untuk tidak menambah stok baru untuk barang yang masih banyak.
2) Penggunaan teknologi AJAX dapat membuat sistem lebih ringan diakses.
Teknolgi AJAX yang  digunakan  dalam  sistem  inventori  toko  adalah AJAX autocomplete dan AJAX validasi. AJAX autocomplete terdapat  pada  form  transaksi  penjualan  dan  transaksi  pembelian, sedangkan AJAX validasi  terdapat  pada  semua form . AJAX autocomplete digunakan  dalam pemanggilan  data  barang  tanpa  me- load seluruh  halaman  sehingga  lebih  ringan  diakses.  Sedangkan AJAX validasi digunakan untuk memberikan validasi terhadap inputan untuk memastikan bahwa data yang dimasukkan adalah data yang valid.

## DAFTAR PUSTAKA
[1] Krisnawan,  W,  2008.  “Sistem  Informasi  Persediaan  Barang  Mebel  dengan  Menggunakan  Visual Basic.Net: Studi Kasus CV Cipta Nuansa Nusantara Jepara”, Skripsi , Fakultas Teknologi Informasi Stikubank, Semarang
[2] Alfian, R. 2013.  “Sistem Inventory Stock Barang: Studi Kasus CV Berkah Alam”, Skripsi , Fakultas Teknologi Industri Universitas Pembangunan Nasional, Jawa Timur
[3] Prasetyo,  Y.  2007.  “Komputerisasi  Sistem  Persediaan  Barang:  Studi  Kasus  Grahadita  Komputer Sukoharjo” . Tugas  Akhir ,  Fakultas  Matematika  dan  Ilmu  Alam  Universitasn  Sebelas  Maret, Surakarta.
[4] Yuhendra,  dan  Poerwanta,  Rendi,  2013,  “Perancangan  Sistem  Inventory  Spare  Parts  Mobil  pada CV. Auto Parts Toyota Berbasis Aplikasi Java”, Jurnal TEKNOIF , Vol 1, No.2, Edisi Oktober 2013
[5] Noviandi, BM, Destiani, Dini, dan Partono, 2012, “Perancangan Sistem Informasi Inventori Barang di Bank Sampah Garut”, Jurnal Algoritma , Vol 9 No 32
[6] Margaretha,  Farah,  2004, Teori  dan  Aplikasi  Manajemen  Keuanga:  Investasi  dan  Sumber  Dana Jangka Pendek , Jakarta, Grasindo
[7] Sunyoto,  A.  2007. AJAX  -  Membangun  Web  dengan  Teknologi ASYNCHRONOUSE  JavaScript  & XML , Andi Offset, Yogyakarta
[8] Dell’  Aringa,  T.  2006. Bring  Your  Website  to  Live  with  AJAX  and  DHTML. DMXzone.com, Netherlands
[9] Kendall, Kenneth E & Julie E Kendall. 2011. Systems Analisys and Design Eight Edition. Prentice Hall
[10] Ramakrishnan, Raghu & Johannes Gehrke. 2003. Database Management System Third Edition. Mc Graw Hill
AJAX autocompete pencarian detail barang
AJAX validasi data harus berupa angka