Perancangan Aplikasi Inventory Berbasis Web dengan …...Jalan Menggunakan Visual Basic.Net 2008...
Transcript of Perancangan Aplikasi Inventory Berbasis Web dengan …...Jalan Menggunakan Visual Basic.Net 2008...
Perancangan Aplikasi Inventory Berbasis Web dengan
Teknologi Barcode Menggunakan Library DataTables
( Studi Kasus : Kantor DPRD Kota Salatiga )
Artikel Ilmiah Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti:
Riski Sasmita (672013164).
Ramos Somya, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Mei 2017
Perancangan Aplikasi Inventory Berbasis Web Dengan
Teknologi Barcode Menggunakan Library DataTables
(Studi Kasus: Kantor DPRD Kota Salatiga)
1) Riski Sasmita,
2) Ramos Somya
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
Email: 1)
sasmita.riski@gmail., 2)
Abstract
Provincial Legislative Council (DPRD) of Salatiga City is a local people's
representative body which domiciled as an element of the district or city government.
Secretariat of Parliament Salatiga City has an important role that is facilitate the duties
and functions of the DPRD to realize the orderly administration and performance
accountability, to manifest the smooth implementation of duties and functions of
Parliament. In the process of recapitulation of goods using a blank form that will be filled
by an officer during checking the goods, for inputting the goods are still using Microsoft
Excel so it takes a long time to create data entry and search the goods. In this research,
developing a web-based inventory applications with barcode technology using library
datatables. The test results indicate that the inventory application has been qualified as
an application that can make it easier for staff to search and input the goods that are
efficient and easy to use.
Keywords: Application Inventory, Barcode, Library Datatables, PHP
Abstrak
Dewan Perwakilan Rakyat Daerah (DPRD) Kota Salatiga merupakan lembaga
perwakilan rakyat daerah yang berkedudukan sebagai unsur penyelenggara pemerintahan
daerah kabupaten atau kota. Sekretariat DPRD Kota Salatiga mempunyai peran penting
yaitu memfasilitasi tugas dan fungsi DPRD, mewujudkan tertib administrasi dan
akuntabilitas kinerja, mewujudkan kelancaran pelaksanaan tugas dan fungsi DPRD. Pada
proses rekapitulasi barang menggunakan form kosong yang akan diisi oleh petugas
selama melakukan pengecekan barang, untuk penginputan barang masih menggunakan
Microsoft Excel sehingga memerlukan waktu yang lama dalam penginputan maupun
pencarian barang. Pada penelitian ini dilakukan pembuatan aplikasi inventory berbasis
web dengan teknologi barcode menggunakan library datatables. Hasil pengujian aplikasi
menunjukkan bahwa aplikasi inventory telah memenuhi syarat sebagai aplikasi yang
dapat mempermudah petugas dan staf untuk pencarian serta penginputan barang yang
efisien dan mudah digunakan.
Kata Kunci: Aplikasi Inventory, Barcode, Library Datatables, PHP
1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen
Satya Wacana Salatiga. 2) Staf Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.
1
1. Pendahuluan
Dewan Perwakilan Rakyat Daerah (DPRD) Kota Salatiga merupakan
lembaga perwakilan rakyat daerah yang berkedudukan sebagai unsur
penyelenggara pemerintahan daerah kabupaten atau kota. DPRD Kota Salatiga
mempunyai tugas pokok memperkuat tata Pemerintahan Daerah Otonomi yang
harmonis, dinamis, adil, dan sejahtera. Pada Kantor DPRD Kota Salatiga memiliki
beberapa bagian dalam pengoperasionalan di Kantor yaitu Badan Musyawarah,
Badan Anggaran, Badan Legislasi, Badan Kehormatan, Fraksi, Komisi A, Komisi
B, Komisi C, dan Sekretariat DPRD. Sekretariat DPRD Kota Salatiga mempunyai
peran penting yaitu memfasilitasi tugas dan fungsi DPRD, mewujudkan tertib
administrasi dan akuntabilitas kinerja, mewujudkan kelancaran pelaksanaan tugas
dan fungsi DPRD.
Salah satu tugas Sekretariat DPRD Kota Salatiga adalah melakukan
rekapitulasi barang kantor seperti, alat rumah tangga, alat transportasi, alat media,
alat bangunan, alat komputer, alat cetak, alat tulis kantor. Dari ketujuh jenis
barang yang ada Contoh satu kali rekapitulasi mencatat satu jenis barang yang
dilakukan Sekretariat DPRD Kota Salatiga akan melalui beberapa proses yang
telah ditetapkan oleh Sekretariat DPRD Kota Salatiga. Pada proses rekapitulasi
terdapat dua petugas pencatat di lapangan dan satu petugas penginput data
menggunakan Microsoft Excel. Pertama, petugas memindai barang yang akan
dicari untuk dicatat seperti, jenis barang, jumlah barang, harga barang, dan kondisi
barang. Kedua petugas melakukan pengecekan barang untuk melihat kondisi
barang yang akan dicatat, kemudian ditulis pada lembar kosong yang dibawa oleh
petugas. Pada saat pencatatan hanya dilakukan oleh dua petugas selanjutnya,
petugas menyerahkan lembar yang berisi barang yang telah melalui pengecekan
secara langsung ke bagian pencatatan data. Terakhir Petugas menginput data di
Microsoft Excel sesuai data yang diberikan oleh petugas.
Berdasarkan proses yang dilakukan dalam rekapitulasi, kendala yang ada
dalam pengarsipan adalah proses pencatatan untuk sekali rekapituasi satu jenis
barang memerlukan waktu lebih dari enam puluh menit, padahal terdapat seratus
lebih barang dari tujuh jenis barang dan pencarian data yang sulit karena dalam
satu file terdapat berbagai data barang, adapun barang yang tidak terinput karena
tidak memiliki pengenal, terdapat pula barang yang tidak tercatat karena tidak
diketahui lokasinya. Hal tersebut yang menjadi masalah dalam proses pengarsipan
di kantor karena dalam waktu tiga bulan setelah rekapitulasi pernah terjadinya
kehilangan barang satu buah alat media dan sulit dilacak karena tidak memiliki
keterangan terakhir dimana barang tersebut berada.
Berdasarkan latar belakang masalah yang terjadi, akan dilakukan penelitian
yang memiliki tujuan menggunakan teknologi untuk mengatasi masalah yang ada
yaitu dengan dilakukan perancangan Aplikasi Inventory tersebut. Teknologi
barcode digunakan untuk primary kode barang sebagai label berisi yang berisi
informasi barang yang ada di kantor DPRD kota Salatiga. Pemilihan
menggunakan teknologi barcode karena di dalamnya memiliki seperti enkripsi
tersendiri yang hanya bisa dibaca oleh alat pemindai khusus sehingga dengan
kode barcode saja dapat menyimpan data dari suatu barang, sedangkan
2
penggunaan library datatables digunakan untuk mempercepat loading data dalam
jumlah lebih dari seratus data barang, serta mempermudah proses search dan
ordering barang. Pada library datatables penggunaan lebih untuk menampilkan
data dalam bentuk table yang memiliki berbagai fungsi seperti print data dalam
bentuk excel, PDF sebagai laporan, dapat melakukan ordering data, dapat
melakukan searching data, dapat membuat page secara otomatis, dapat melakukan
pengelompokan data dari coloum, serta mempercepat loading data.
Rumusan masalah dari penelitian ini yaitu bagaimana menggunakan
teknologi barcode dan library datatables untuk mempercepat rekapitulasi barang
serta meminimalisir kehilangan barang di kantor DPRD Kota Salatiga. Fokus dari
penelitian ini sendiri adalah menyelesaikan permasalahan yang dihadapi
pengelola ke-arsipan barang dalam penyimpanan data sehingga dalam penelitian
ini memiliki batasan.
2. Tinjauan Pustaka
Salah satu penelitian berjudul Sistem Informasi Inventori Gudang Untuk
Mengontrol Persediaan Barang Pada Gudang (Studi Kasus PT.Alaisys Sidoarjo).
Penelitian ini membahas mengenai perancangan sistem informasi inventory guna
mempercepat proses manajemen barang di gudang [1]. Penelitian ini bertujuan
menggunakan web application karena dapat menyediakan informasi yang cepat,
tepat dan akurat mengenai data maupun laporan, serta memudahkan proses
dipenyampaian laporan ke kantor pusat.
Penelitian kedua berjudul Perancangan Aplikasi Pendaftaran Pasien Rawat
Jalan Menggunakan Visual Basic.Net 2008 Dengan Deteksi Kartu Pasien Via
Barcode Berbasis Android. Penelitian ini membahas mengenai perancangan
aplikasi pendaftaran pasien rawat jalan dengan teknologi barcode dimana hasil
dari penelitian ini menjelaskan penggunakan teknologi barcode guna untuk
pengidentifikasi ID kartu pasien. Jadi dengan memanfaatkan teknologi barcode
yang ada dikartu pasien dideteksi menggunakan barcode scanner pada OS android
akan mendapatkan kecocokan data barcode dari database. Sehingga akan
membantu meningkatkan proses pelayanan kepada pasien, proses jauh lebih
praktis dibanding dengan proses pendaftaran di loby [2].
Berdasarkan penelitian yang pernah dilakukan terkait dengan barcode
penelitian terdahulu terfokus pada penggunakan barcode sebagai label, akan tetapi
belum menunjukkan mempercepat proses pekerjaan maka akan dilakukan
penelitian yang membahas tentang Perancangan Aplikasi inventory menggunakan
teknologi barcode dan library datatables untuk mempercepat rekapitulasi barang
dan pencarian barang, serta meminimalisir kehilangan barang di kantor DPRD
Kota Salatiga. Aplikasi yang dihasilkan diharapkan dapat mempermudah
pelaporan, pengolahan dan pengarsipan, serta penggunaan framework bootstrap
membuat tampilan aplikasi menjadi lebih menarik sehingga dapat meningkatkan
kinerja Staf DPRD Kota Salatiga.
Web merupakan kumpulan dari halaman-halaman web yang berhubungan
dengan file lain yang terkait. Website terdapat suatu halaman yang dikenal dengan
sebutan home page. Home page adalah sebuah halaman yang pertama kali dilihat
3
ketika seseorang mengunjungi website. Pada home page, pengunjung dapat
mengklik hyperlink untuk pindah ke halaman lain yang terdapat dalam website
tersebut [11].
Bar coding adalah sebuah bentuk artificial identifier. Barcode merupakan
sebuah kode mesin yang dapat dibaca. Barcode terdiri dari sebuah bentuk bar dan
spasi (hitam dan putih) dalam rasio yang didefinisikan yang merepresentasikan
karakter alphanumeric [7]. Umumnya Barcode berbentuk garis-garis vertikal tipis
tebal yang terpisah oleh jarak tertentu. Tapi kini ada beberapa variasi berbentuk
pola-pola tertentu, lingkaran konsentris, atau tersembunyi dalam sebuah gambar.
Barcode dibaca dengan menggunakan sebah alat baca optik yang disebut barcode
reader. Pada prinsipnya barcode reader hanya sebuah alat input biasa seperti
halnya keyboard atau scanner tapi peran manusia sebagai operator sangat
minimum. Bentuk kerja scanning barcode ini dapat di lihat di Gambar 12.
Gambar 12 Barcode Proses Scanning Dan Print[14]
Berdasarkan bagan pada Gambar 12 dapat dijelaskan Barcode Proses
Scanning Dan Print. Pada proses scanning barcode menggunakan barcode reader
data yang dibaca akan diproses dalam program, dimana program tersebut
melakukan verifikasi kode barcode pada server local area network atau internet
guna untuk mencari kecocokan data. Staf dapat melihat secara langsung data apa
saja yang discan oleh petugas dengan munggunakan smartphone atau
komputer[14].
DataTables adalah plugin yang di bangun dari jquery untuk menampilkan
data dalam bentuk tabel dan sudah terintegrasi search form dan pagination untuk
penomoran data pada tabel. Sehingga tidak perlu lagi membuat form pencarian
pada aplikasi, dan tidak perlu lagi membuat pagination sendiri. Kelebihan dari
datatables ini adalah dia telah mengintegrasikan pagination dan search form pada
tabel data yang di buat. Fitur tersebut dapat di jalankan dengan menggunakan
fungsi tertentu dan semua sudah di berikan oleh dataTables [3].
3. Metode dan Perancangan Sistem
Pada penelitian ini, akan dilakukan beberapa tahapan penelitian yang secara
garis besar terbagi ke dalam lima tahapan, yaitu : 1) Analisis kebutuhan dan
pengumpulan data yang diperlukan; 2) Perancangan Sistem; 3) Perancangan
aplikasi/program; 4) Implementasi dan pengujian sistem, serta analisis hasil
4
pengujian; dan 5) Penulisan laporan hasil penelitian. Tahapan yang dilakukan
dalam penelitian ini dapat dilihat pada Gambar 1.
Gambar 1 Gambar Alur Proses Penelitian
(Sumber : Data Primer, 2015)
Berdasarkan bagan pada Gambar 1 dapat dijelaskan bahwa tahapan
penelitian yang dilakukan adalah sebagai berikut: tahap pertama: analisis dan
pengumpulan data, yaitu melakukan analisis tentang apa saja yang dibutuhkan
oleh petugas Sekretari DRPD juga kendala-kendala yang dihadapi oleh petugas
dalam melaksanakan tugasnya. Tahap kedua: Perancangan sistem meliputi
perancangan proses menggunakan Unified Modelling Language (UML) misalnya
perancangan use case diagram, sequence diagram, class diagram. Perancangan
database yaitu perancangan tabel-tabel database yang berfungsi menyimpan data
yang dibutuhkan oleh aplikasi inventory. Perancangan antarmuka yaitu sebagai
interaksi antara user dengan sistem, berupa interface aplikasi inventory dibuat
aplikasi untuk petugas Sekretariat DPRD kota Salatiga.
Tahap perancangan aplikasi terdapat desain sistem, perancangan arsitektur
dan preancangan proses. Terdapat dua pengguna sistem untuk aplikasi Inventory,
pertama adalah petugas Sekretariat DRPD sebagai user dan staf di Sekretariat
DRPD sebagai admin. User dapat melakukan aktifitas sebagai berikut: 1) User
dapat memilih daftar barang yang ada pada halaman scan barang yang berisi
infomasi barang; 2) User dapat melakukan update akun; 3) User dapat melihat
pengumuman pada halaman pengumuman; 4) User dapat mencetak laporan
barang.
Admin dapat melakukan aktifitas sebagai berikut: 1) Admin dapat melihat
dan mengelola user; 2) Admin dapat menambah, melihat dan mengelola data
barang; 3) Admin dapat melihat dan mencetak laporan barang; 4) Admin dapat
menambah dan mengelola pengumuman; 5) Admin dapat mengupdate data
barang.
Analisis kebutuhan perangkat keras dan spesifikasi perangkat lunak yang
digunakan dalam membangun aplikasi inventory ini yaitu: Prosesor Intel Core i5,
4.00 GHz, RAM 4 GB dan SSD 500 GB. Sedangkan perangkat lunak yang
digunakan adalah sistem operasi Windows 10 Creator Media, Sublime Text,
Wamp Server (Apache dan MySQL), Web browser (dalam penelitian ini
digunakan Mozilla Firefox) dan Rational Rose untuk membuat UML(Unified
Model Language) sistem, dan Barcode Reader.
5
Prosedur penggunaan aplikasi inventory sebagai berikut: 1) User membuka
web browser kemudian menuliskan alamat web aplikasi; 2) User login
menggunakan username dan password yang diberikan admin; 3) User yang sudah
login dapat melihat halaman dashboard yang memiliki menu pilihan dari tombol
yang berupa link menuju halaman lain, antara lain scan barang, profile, laporan
hasil barang dan pengumuman; 4) User yang sudah login dapat melakukan kelola
akun melalui menu profile; 5) User yang sudah login dapat melakukan scan
barang untuk melihat informassi barang; 6) User dapat keluar dari aplikasi
inventory dengan melakukan klik pada tombol logout.
Metode pengembangan yang akan digunakan dalam penelitian ini adalah
prototype model. Prototype model merupakan sebuah proses untuk membangun
sebuah sistem berdasarkan dari kebutuhan pengguna. Metode ini dilakukan secara
bertahap, yaitu dengan mengembangkan suatu prototype yang sederhana terlebih
dahulu baru kemudian dikembangkan dari waktu ke waktu sampai perangkat
lunak selesai dikembangkan. Prototype merupakan bentuk dasar atau model awal
dari suatu sistem atau subsistem [13]. Tahap-tahap dalam metode Prototype
ditunjukkan pada Gambar 2.
Gambar 2 Metode Prototype [13]
Metode prototype diawali dengan pengumpulan data kebutuhan.
Pengumpulan kebutuhan dilakukan dengan cara komunikasi dengan pengguna
aplikasi, yang dapat berupa wawancara atau kuesioner. Pada penelitian dilakukan
pencarian ketubutuhan aplikasi sesuai dengan masalah yang ada dalam proses
rekapitulasi sebelumnya, selanjunya membangun model prototype sesuai dengan
gambaran aplikasi. Model prototype yang sudah dibuat kemudian diuji oleh Staf
dan petugas. Hasil pengujian kemudian menjadi acuan apakah aplikasi yang
dibuat sudah memenuhi kebutuhan pengguna. Tahapan yang dilakukan pada
metode prototype dalam membangun aplikasi inventory adalah listen to customer,
build/revise mock-up dan customer test-drive mock-up.
Tahap listen to customer dilakukan untuk mengetahui dan menerjemahkan
semua permasalahan serta kebutuhan perangkat lunak dan kebutuhan sistem yang
dibangun. Analisis kebutuhan dilakukan dengan melakukan pencarian data serta
informasi yang dibutuhkan oleh sistem. Ada empat analisis kebutuhan dalam
perancangan sistem yaitu analisis kebutuhan sistem, analisis kebutuhan data,
analisis kebutuhan perangkat keras dan analisis kebutuhan perangkat lunak.
Supaya sistem yang dibuat dapat memenuhi kebutuhan pengguna, maka
diperlukan suatu analisis kebutuhan aplikasi. Analisis kebutuhan aplikasi ini
dilakukan wawancara dengan Staf dan petugas Sekretariat DPRD Kota Salatiga.
Berdasarkan hasil wawancara, contoh uji yang akan diujikan di kantor Sekretariat
6
DPRD Kota Salatiga akan melewati beberapa proses yang telah ditetapkan oleh
petugas Sekretariat DPRD Kota Salatiga. Pertama, petugas memindai barang yang
akan dicari untuk dicatat seperti, jenis barang, jumlah barang, harga barang, dan
kondisi barang. Kedua petugas melakukan pengecekan barang untuk melihat
kondisi barang yang akan dicatat, kemudian ditulis pada lembar kosong yang
dibawa oleh petugas. Pada saat pencatatan hanya dilakukan oleh dua petugas
selanjutnya, petugas menyerahkan lembar yang berisi barang yang telah melalui
pengecekan secara langusng ke bagian pencatatan data. Terakhir Petugas
menginput data di Microsoft Excel sesuai data yang di berikan oleh petugas. Oleh
karena itu dibutuhkan sebuah aplikasi yang dapat memenuhi kebutuhan sebagai
berikut: a) kebutuhan admin mencakup dapat mengelola data hasil pencatatan,
mengelola data barang, dapat mengelola user, dapat mengelola data pengumuman.
b) kebutuhan petugas laboratorium dapat scan barang guna melihat informasi
detail barang.
Pada tahap build/revise mock-up dilakukan pembuatan prototype aplikasi
inventory. Sumber berupa kebutuhan aplikasi dan form uji sampel petugas
Sekretariat DPRD Kota Salatiga. Form yang telah ada diimplementasikan
kedalam aplikasi inventory. Perancangan sistem mulai dibuat menggunakan UML.
Pada prototype pertama sistem dibangun menggunakan PHP, Framework
Bootstrap, dan Framework Jquery UI untuk desain antarmuka. Kelemahan pada
prototype pertama yaitu aplikasi Inventory belum dapat menampilkan hasil scan
barcode dan beberapa fungsi yang ada pada aplikasi inventory belum dapat
digunakan. Kelemahan pada prototype pertama kemudian menjadi acuan untuk
melakukan perbaikan pada prototype kedua. Perbaikan prototype kedua yaitu
perbaikan dan penambahan fungsi hasil scan barcode dan tambah pengumuman
pada aplikasi inventory. Kelemahan pada prototype kedua yaitu aplikasi inventory
masih belum dapat mencetak laporan hasil barang. Kelemahan tersebut kemudian
diperbaiki pada prototype ketiga dan keempat.
Tahapan customer test-drives mock-up dilakukan untuk untuk mengetahui
apa saja yang masih menjadi kekurangan aplikasi dan apa saja yang sudah
memenuhi kebutuhan aplikasi. Jika masih terdapat kekurangan dalam aplikasi,
maka dilakukan perbaikan. Apabila aplikasi inventory sudah sesuai dengan
kebutuhan, maka proses selesai.
Perancangan sistem dalam penelitian ini dibuat dalam bentuk diagram
UML, meliputi use case diagram, activity diagram, sequence diagram dan class
diagram. Berikut ini akan dijelaskan masing-masing diagram yang telah dibuat.
Gambar 3 Use Case Diagram Sistem
7
Gambar 3 merupakan use case diagram dari aplikasi yang dibuat. Terdapat
2 (dua) aktor dalam aplikasi, yaitu aktor admin dan user. Aktor admin merupakan
pemilik hak akses tertinggi, admin disini adalah Staf Sekretariat DPRD Kota
Salatiga di mana dapat melakukan pengelolaan data barang, data kategori barang,
data laporan barang, data barcode, data user dan data pengumuman. Aktor user
merupakan pemilik hak akses kedua dengan tingkat dibawah kendali admin, user
disini adalah petugas umum Sekretariat DPRD Kota Salatiga. Hak akses user
memiliki 2 (dua) use case, yaitu mengelola data scan barang, mencetak laporan,
dan melihat pengumuman.
Gambar 4 Activity Diagram Scan Barang
Gambar 4 merupakan activity diagram dari proses mencari data barang
dengan melakukan scan kode barang. Activity dimulai dari memilih menu scan
barang kemudian petugas Sekretariat mengisi data form scan barang yang terdiri
dari data kode barang. Data kemudian akan disimpan dalam database setelah
petugas menekan tombol submit dalam bentuk history, kemudian data yang di cari
akan ditampilkan ke petugas.
Gambar 5 Activity Diagram pengumuman
Gambar 5 merupakan activity diagram dari proses melihat pengumuman
dari admin. Activity dimulai dari memilih menu pengumuman, kemudian menekan
tombol pengumuman. Data pengumuman kemudian akan dicari dalam database
setelah petugas menekan tombol pengumuman, kemudian data pengumuman
akan ditampilkan ke petugas.
8
Gambar 6 Activity Diagram Tambah Data Barang
Gambar 6 merupakan activity diagram dari proses menginput data barang.
Activity dimulai dari memilih menu barang, kemudian menekan tombol tambah
barang kemudian petugas Sekretariat mengisi data form tambah barang yang
terdiri dari data kode barang, nama barang, nomer register, merk, kondisi, harga,
ukuran, tahun, bahan, cara perolehan, jumlah barang, gambar dan keterangan.
Data barang kemudian akan disimpan dalam database setelah petugas menekan
tombol submit, kemudian data barang yang disimpan akan ditampilkan ke
petugas.
Gambar 7 Sequence Diagram Tambah Data Barang
Gambar 7 merupakan sequence diagram untuk melakukan tambah data
barang. Admin mengisikan data barang dengan memasukan kode barang, nama
barang, nomer register, merk, kondisi, harga, ukuran, tahun, bahan, cara
perolehan, jumlah barang, gambar dan keterangan. Seletah Admin melakukan klik
tombol submit data akan disimpan kedalam database, kemdian data yang
disimpan akan ditampikan di halaman menu barang.
Gambar 8 Sequence Diagram Tambah Data Kategori
Gambar 8 merupakan sequence diagram untuk melakukan tambah data
barang. Admin mengisikan data barang dengan memasukan kode barang, nama
barang, nomer register, merk, kondisi, harga, ukuran, tahun, bahan, cara
perolehan, jumlah barang, gambar dan keterangan. Seletah Admin melakukan klik
9
tombol submit data akan disimpan kedalam database, kemudian data yang
disimpan akan ditampikan di halaman menu barang.
Gambar10 Sequence Diagram Tambah Data Merk
Gambar10 merupakan sequence diagram untuk melakukan tambah data
Merk. Admin mengisikan data merk dengan memasukan attribute merk. Seletah
Admin melakukan klik tombol submit data akan disimpan kedalam database,
kemdian data yang disimpan akan ditampikan di halaman menu merk.
Gambar 11 Class Diagram Aplikasi
Gambar 11 merupakan penggambaran dari modul-modul yang ada di dalam
sistem. Berdasarkan Gambar 11, terdapat lima class yang digunakan dalam sistem
ini, yaitu kategori, kode_barang, merk, barcode dan user. Setiap class memiliki
fungsi/method masing-masing. Method insert() digunakan untuk memasukan data.
Method update() digunakan untuk melakukan update data, terakhir method
delete() untuk menghapus data. Class yang digunakan pada aplikasi ini terdiri dari
tiga jenis yaitu entity class, controller, dan boundary class. Entity class berisikan
informasi mengenai beberapa class yang digunakan seperti atribut dan fungsi yang
digunakan dalam class yang bersangkutan, misal pada class kode_barang terdapat
entity class yang berisikan atribut kode_barang dan kategori selain itu juga
terdapat fungsi insert(), update() dan delete(). Kemudian controller, class ini
berisikan fungsi untuk mengolah data, pada class kode_barang terdapat
controller_kategori yang berisikan beberapa fungsi seperti get_data(),
tambahKategori(), ubahKategori() dan hapusKategori(). Class yang terakhir
adalah boundary, class ini berinteraksi langsung dengan pengguna, atau bisa
dibilang user interface, pada class penjadwalan boundary direpresentasikan
sebagai class Interface_inventaris. Konfigurasi yang sama juga dilakukan pada
class yang lainya yang ada pada sistem ini.
10
Gambar12 FlowChart Diagram Scan Barcode Barang
Gambar12 merupakan flowchart diagram untuk melakukan scan barcode
barang. User yang telah login mengisikan kode barcode dengan menggunakan
barcode reader atau diinput secara langsung, data barcode yang discan akan
secara langung dicari didatabase inventory untuk melihat kecocokan kode barcode
tersebut, kemudian data yang valid akan secara langusng di tampilkan sesuai kode
barcode yang ada dibarang, sedangkan data yang tidak cocok tidak akan
ditampilkan. Pada saat proses scan barcode secara langsung juga melakukan
insert pada table last scan barcode.
4. Pembahasan dan Hasil Pengujian
Implementasi dari perancangan aplikasi inventory DPRD Kota Salatiga
dilakukan dengan Php Native. Terdapat beberapa pengaturan yang harus
dilakukan pertama kali saat pembuatan, yaitu pengaturan koneksi ke database.
Pengaturan koneksi basis data dilakukan pada file koneksi. Pengaturan ini
ditunjukkan pada Kode Program 1. Kode Program 1 Koneksi Php Native
Kode Program 1 merupakan konfigurasi untuk koneksi dengan database
MySql. Konfigurasi ini terdapat dalam file koneksi pada folder project inventory.
Pada konfigurasi ini dilakukan pengisian untuk nama database yang digunakan,
$server,$database, $username dan $password.
1. <?php
2. $server = "localhost";
3. $username = "root";
4. $password = "";
5. $database = "db_inventaris";
6. // Koneksi dan memilih database di server
7. mysql_connect($server,$username,$password) or die("Koneksi gagal");
8. mysql_select_db($database) or die("Database tidak bisa diakses. Periksa
server!");
9. $connection = mysqli_connect("localhost","root","","db_inventaris");
11
Gambar 14 Halaman Dashboard Admin
Gambar 14 merupakan halaman dashboard admin yang menampilkan chart
data jumlah barang yang ada di kantor DPRD Kota Salatiga. Untuk menampilan
chart menggunakan plugin chartJS. Kode Program 3 Fungsi Menampilkan Data Chart
Kode Program 3 merupakan fungsi JavasSript untuk menampilkan data
chart dan konfigurasi tampilan warna chart. Baris tiga dan enam adalah fungsi
untuk mengambil data dari tb_inventaris, sedangkan baris tujuh dan dua belas
merupakan konfigurasi warna background dan border pada chart bar.
Gambar 15 Halaman Tambah Data Barang
Gambar 15 adalah halaman tambah data barang. Pada halaman ini admin
mengisikan data meliputi nomor registrasi, nama barang, gambar, kode barang,
barcode, jenis barang, kategori, tahun, cara perolehan, bahan, merk, ukuran,
jumlah barang, dan kondisi. Ada beberapa form yang wajib diisi, khusus untuk
form kategori setidaknya harus diisi oleh satu data.
1. type: 'bar',
2. data : {
3. labels: [<?php while ($b = mysqli_fetch_array($bulan)) { echo '"' .
$b['nama_barang'] . '",';}?>],
4. datasets: [{
5. label: 'jumlah barang',
6. data: [<?php while ($p = mysqli_fetch_array($penghasilan)) { echo '"' .
$p['jumlah_barang'] . '",';}?>],
7. backgroundColor: [
8. 'rgba(255, 99, 132, 0.2)',
9. 'rgba(54, 162, 235, 0.2)',
10. 'rgba(255, 206, 86, 0.2)'
11. ],
12
Gambar 16 Halaman Daftar Barang
Gambar 16 adalah halaman daftar barang. Halaman ini menampilkan semua
daftar barang yang telah ditambah. Pada halaman ini terdapat fungsi untuk
mencari barang, tombol detail berfungsi untuk melihat detail lebih lanjut dari
barang tersebut.
Gambar 17 Halaman Scan Barang
Gambar 17 adalah halaman scan barang. Pada halaman ini ditampilkan scan
barang yang dilakukan oleh petugas, setelah discan data akan masuk pada table
last scan dan list scan barcode. Proses scan dilakukan dengan cara petugas
menginput kode barcode barang menggunakan barcode reader atau diketik secara
langusung, selanjutnya menekan tombol submit. Setelah disubmit makan barang
akan langsung masuk pada table list scan barang secara otomatis. Pada table list
scan barcode memunculkan kecocokan barcode dengan data barang yang telah
ditambah oleh staf, maka memunculkan data keterangan pada table list scan
barcode guna mempermudah pencarian dan pencocokan data. Kode Program4 Fungsi Insert Scan Barcode
Kode Program 4 merupakan fungsi Insert Scan Barcode data, guna untuk
menyimpan data barcode yang telah discan oleh petugas. Pada proses ini data
yang telah discan akan masuk ke database pada tb_barcode.
1. <?php
2. error_reporting(E_ALL ^ E_DEPRECATED);
3. $link=mysql_connect("localhost","root","");
4. mysql_select_db("db_inventaris",$link);
5. if(isset($_POST['submit'])){
6. $barcode = $_POST['barcode'];
7. $query = mysql_query(" INSERT INTO tb_barcode VALUES
('','$barcode',now())");
8. header("LOCATION:main1.php?module1=barang");
9. }
13
Gambar 20 Contoh Label Barcode Barang di DPRD.
Gambar 20 adalah contoh label barcode barang di DPRD kota salatiga yang
akan discan. Pada label barcode barang berbeda-beda, ada yang bertype EAN 8,
code 39, dan code 128. Pada dasarnya cara scanning masih sama namun bentuk
Bar dari barcode agak berbeda, untuk barcode bisa dibuat langsung diaplikasi
inventory yang telah dibuat pada menu barcode admin.
Gambar 21 Label Barcode Nomer Seri Discan Menggunakan Barcode Reader.
Gambar 21 adalah label barcode nomer seri discan menggunakan barcode
reader. Pembaca/Scanner barcode merupakan perangkat yang secara optis
memindai sebuah barcode dan menterjemahkan data yang ada dalam barcode dari
pola barcode ke dalam data yang bisa dipakai oleh computer atau perangkat lain.
Pada saat proses scanning code bar dalam barcode tersebut akan muncul dikotak
inputan barcode pada menu scan barcode.
Gambar 22 Hasil Baca Code Bar Dalam Barcode.
Gambar 22 adalah hasil baca code bar dalam barcode. Pada halaman ini
memunculkan code bar dalam barcode yang telah discan, code tersebut
merupakan isi dari nomer seri barang di kantor DPRD Kota salatiga. Selanjutnya
14
petugas menekan tombol submit untuk diproses, jika menggunakan barcode
reader akan otomatis tersubmit.
Gambar 23 Hasil Last Scan Barcode.
Gambar 23 adalah hasil last scan barcode. Pada saat barang discan maka
akan muncul pada tabel last scan. Pada tabel ini menampilkan id, barcode,
tanggal, dan jam scanning, sehingga bisa melihat history scan barang. Kode Program5 Fungsi Menampilkan Last Scan Barcode
Kode Program 5 merupakan fungsi Menampilkan Last Scan Barcode data,
guna untuk menampilkan data barcode yang telah discan. Pada saat scan barcode
selesai data kode barcode disimpan di tb_barcode kemudian di tampilkan ditable
last scan barcode menggunakan query sql select * from tb_barcode, data tersebut
bisa dijadikan sebagai history scanning barang kantor DRPD kota Salatiga.
Gambar 24 Hasil List Scan Barang
Gambar 24 adalah hasil list scan barang. Pada saat barang discan maka akan
dicocokan datanya antara tb_barcode dengan tb_inventaris, untuk barcode yang
sama dengan tb_barcode dan tb_inventaris maka akan tampil datanya sesuai
barang tersebut. Sedangkan barcode yang tidak sama maka hanya akan masuk
ditabel list scan barcode saja. Pada table list scan barcode petugas dapat melihat
barang yang discan, didalam table tersebut menampilkan informasi kode barang,
1. <div class="tbl-content">
2. <table cellpadding="0" cellspacing="0" border="0">
3. <tbody>
4. <?php
5. $hasil = mysql_query("SELECT * FROM tb_barcode ORDER BY id desc");
6. while ($r=mysql_fetch_array($hasil)){
7. echo "
8. <tr >
9. <td>$r[id]</td>
10. <td>$r[barcode]</td>
11. <td>$r[date]</td>
12. </tr>";}
13. echo "
14. </tbody>
15. </table>
16. </div>
15
barcode, nama/jenis barang, nomer register, merk/type, jumlah barang,
keterangan, tanggal, dan jam, sehingga petugas mudah dalam mendapatkan
informasi barang yang scan. Kode Program5 Fungsi Menampilkan List Scan Barcode
Kode Program 5 merupakan fungsi Menampilkan List Scan Barcode data,
guna untuk menampilkan data barcode dengan menggunakan join table
tb_inventaris dengan tb_barcode. Fungsi join sangat berguna karena data dua
table tersebut memiliki attribut yang sama maka bisa di joinkan, jadi barang yang
telah discan akan dicocokan barcodenya sesuai data pada tb_inventaris dan data
yang cocok akan di tampilkan pada table list scan barcode. Kode Program6 Fungsi Row Grouping Laporan Barang Menggunakan Library Datatables
Kode Program 6 merupakan fungsi Row Grouping Laporan Barang
Menggunakan Library Datatables, guna untuk menampilkan data laporan barang
sesuai kategori yang ada, maka digunakan library datatables untuk membuat
tampilan data sesuai dengan kategori. Pada penggunaan fungsi row grouping
dilaporan barang terdapat dua belas coloum yang dimana pada coloum kedua yang
1. $(document).ready(function() {
2. var table = $('#datatables').DataTable({
3. responsive: {
4. details: {
5. display: $.fn.dataTable.Responsive.display.modal( {
6. header: function ( row ) {
7. var data = row.data();
8. return 'Details for '+data[0]+' '+data[1];}} ),
9. renderer: $.fn.dataTable.Responsive.renderer.tableAll()}},
10. "columnDefs": [
11. { "visible": false, "targets": 1 }],
12. "order": [[ 1, 'asc' ]],
13. "displayLength": 10,
14. "drawCallback": function ( settings ) {
15. var api = this.api();
16. var rows = api.rows( {page:'current'} ).nodes();
17. var last=null;
18. api.column(1, {page:'current'} ).data().each( function ( group, i ) {
19. if ( last !== group ) {
1. <tr>
2. <th >Kode barang</th>
3. <th >Barcode</th>
4. <th >Nama Barang/Jenis Barang</th>
5. <th >Nomer Register</th>
6. <th >Merk/Type</th>
7. <th >jumlah barang</th>
8. <th >Keterangan</th>
9. <th >tanggal</th>
10. <?php
11. $hasil = mysql_query("SELECT kode_barang, tb_inventaris.barcode,
nama_barang, nomor_register, merk, jumlah_barang, keterangan, date FROM
tb_barcode INNER JOIN tb_inventaris ON tb_barcode.barcode =
tb_inventaris.barcode");
12. while ($r=mysql_fetch_array($hasil)){
13. echo "tr >
14. <td>$r[kode_barang]</td>
15. <td>$r[barcode]</td>
16. <td>$r[nama_barang]</td>
17. <td>$r[nomor_register]</td>
18. <td>$r[merk]</td>
19. <td>$r[jumlah_barang]</td>
20. <td>$r[keterangan]</td>
21. <td>$r[date]</td>
22. </tr>";}
23. ?>
16
merupakan coloum kategori menjadi row grouping, pada setiap kategori yang ada
akan menjadi row sebagai pemisah antar kategori barang.
Gambar 19 Halaman Laporan Barang
Gambar 19 adalah halaman laporan barang. Pada halaman ini ditampilkan
laporan barang yang dilakukan oleh petugas, data barang yang tampilkan dapat
langsung dicetak dalam bentuk excel, pdf, dan dapat dicopy langsung sesuai data
yang dicari, untuk fungsi cetak dan tampilan row grouping menggunakan library
datatables. Pada penggunaan fungsi dari library datatables mempermudah
petugas dalam melakukan cetak laporan, ordering laporan, dan searching data
laporan.
Pengujian sistem dilakukan dengan menguji fungsi-fungsi dari sistem yang
telah dibuat untuk mencari kesalahan/bug pada sistem. Pengujian sistem
dilakukan agar sistem yang dibuat berjalan sesuai dengan yang diharapkan dan
dapat memenuhi kebutuhan pengguna. Pengujian sistem ini menggunakan dua
teknik pengujian yaitu pengujian alpha dan pengujian beta.
Pengujian alpha menggunakan metode blackbox yaitu pengujian fungsi-
fungsi sistem secara langsung tanpa memperhatikan alur eksekusi program.
Pengujian ini dilakukan dengan memperhatikan apakah fungsi telah berjalan
sesuai rancangan dan sesuai yang diharapkan. Tabel 1 adalah hasil pengujian dari
sistem yang telah dilakukan. Tabel 1 Hasil Pengujian Blackbox
Fungsi yang diuji Kondisi Output yang
diharapkan
Output yang
dihasilkan sistem
Status
Pengujian
Login Username dan password benar
Username dan password
salah maupun kosong
Sukses login
Gagal login
Sukses login
Gagal login
Valid
Tambah Data Barang Form diisi dengan benar Form wajib diisi kosong
Sukses tambah data Gagal tambah data
Sukses tambah data Gagal tambah data
Valid
Ubah Data Barang Form diisi dengan benar Sukses ubah data Sukses ubah data Valid
Hapus Data Barang Pilih salah satu data Sukses hapus data Sukses hapus data Valid
Tambah Pengumuman Form diisi dengan benar Sukses tambah data Sukses tambah data Valid
Ubah pengumuman Form diisi dengan benar Sukses ubah data Sukses ubah data Valid
Hapus pengumuman Pilih salah satu data Sukses hapus data Sukses hapus data Valid
Menampilkan data
barang
Buka halaman daftar
pekerjaan
Sukses menampilkan
data
Sukses menampilkan
data
Valid
Menampilkan data barcode
Membuka halaman hasil uji
Sukses menampilkan data
Sukses menampilkan data
Valid
Menampilkan data
Laporan
Membuka halaman arsip Sukses menampilkan
data
Sukses menampilkan
data
Valid
Menampilkan data pengumuman
Buka halaman pengumuman
Sukses menampilkan data
Sukses menampilkan data
Valid
Menampilkan data user Buka halaman user Sukses menampilkan Sukses menampilkan Valid
17
data data
Ubah data user Data user diisi dengan
benar
Sukses ubah data Sukses ubah data Valid
Scan Barang Scan diisi dengan benar Sukses Scan data Sukses Scan data Valid
Berdasarkan pengujian yang dilakukan pada aplikasi web dapat dilihat status
pengujian dari setiap fungsi valid, maka disimpulkan bahwa aplikasi ini berjalan
dengan baik dan sesuai yang diharapkan. Pengujian beta adalah pengujian yang
dilakukan oleh orang yang tidak ikut dalam pembuatan aplikasi atau calon
pengguna aplikasi. Pengujian beta dilakukan dengan menggunakan kuesioner,
yaitu dengan melakukan tanya jawab melalui telfon kepada sample user. Sample
user berjumlah 15 responden dan dipilih secara acak, sample user pada pengujian
ini adalah petugas Sekretariat DPRD Kota Salatiga yang menggunakan aplikasi
Inventory. Hasil jawaban kuesioner dapat dilihat pada Tabel 2. Tabel 2 Hasil Jawaban Kuesioner
No Pernyataan STS TS CS S SS
1 Aplikasi aplikasi ini mudah digunakan 0 0 2 8 5
2 Tampilan, huruf dan gambar dari aplikasi ini dapat dilihat
dengan jelas
0 0 5 5 5
3 Menu-menu pada aplikasi ini mudah dipahami dan tidak
membingungkan
1 0 4 3 7
4 Aplikasi ini membantu dalam melakukan pengelolaan scan
barang
0 0 0 10 5
5 Aplikasi ini membantu dalam melakukan pengelolaan data
barang
0 1 5 4 5
6 Aplikasi ini bermanfaat untuk menyimpan arsip data barang 0 3 5 3 4
Setelah semua jawaban diketahui maka yang dilakukan adalah menghitung
presentase jawaban responden yang telah mengisi kuesioner. Berikut rumus untuk
menghitung index persentase jawaban responden.
Rumus Index % = ∑ Skor:Y*100% (1)
Rumus 1 adalah rumus untuk menghitung presentase jawaban responden.
Hasil analisa untuk pertanyaan pertama didapatkan index 84,00% responden
setuju jika aplikasi inventory mudah digunakan. Untuk pertanyaan kedua 80,00%
responden setuju bahwa huruf dan gambar pada aplikasi inventory dapat dilihat
dengan jelas. Untuk pertanyaan ketiga 80,00% responden setuju bahwa menu
pada aplikasi inventory mudah untuk dipahami dan tidak membingungkan. Untuk
pertanyaan keempat 86,70% responden setuju bahwa aplikasi inventory membantu
dalam melakukan pengelolaan scan barang. Untuk pertanyaan kelima 76,00%
responden setuju bahwa aplikasi inventory membantu dalam melakukan
pengelolaan data barang. Untuk pertanyaan keenam 70,67% responden setuju
bahwa aplikasi sistem informasi laboratorium bermanfaat untuk menyimpan arsip
data barang.
Pengujian diujikan kepada 15 pengguna di kantor DPRD kota Salatiga,
adapun hal-hal yang diujikan yaitu cara penginputan data barang beserta fungsi-
fungsinya dan cara scanning barang. Pada hasil pengujian mendapatkan respon
bahwa untuk penginputan barang lebih mudah dikarenakan mudahnya pengisian
form input barang serta pelihan kode pada setiap barang, serta mudahnya
penggunaan scan barcode dalam melakukan pencarian barang. Pengujian manfaat
juga dilakukan dengan wawancara kepada Staf Sekretariat DPRD Kota Salatiga.
Berdasarkan wawancara dengan Staf Sekretariat DPRD Kota Salatiga, dengan
18
adanya aplikasi Inventory memudahkan Staf Sekretariat DPRD Kota Salatiga
dalam melakukan pengawasan pekerjaan petugas Sekretariat DPRD Kota Salatiga
dan dalam melakukan pencarian data barang dengan mengunakan fitur scan
barang menjadi semakin cepat dua menit dari proses waktu yang lalu lima menit
untuk setiap barang, sedangkan proses penyimpanan data barang lebih cepat
empat puluh menit dari proses sebelumnya memakan waktu enam puluh menit
untuk satu jenis barang, serta pencarian arsip data barang yang ada di kantor.
Selain itu petugas juga dimudahkan dengan adanya fitur pengumuman.
5. Simpulan
Berdasarkan penelitian yang telah dilakukan, maka dapat diambil
kesimpulan bahwa perancangan aplikasi inventory di kantor DPRD Kota Salatiga
dapat dirancang menggunakan Php Native, barcode, dan library datatables .
Penggunaan aplikasi inventory dapat diterapkan untuk mempermudah petugas
Sekretariat DPRD Kota Salatiga dalam melakukan pencatatan dan pencarian
barang. Adanya teknologi barcode dan library datatables mempercepat proses
penyimpanan atau pencatatan barang yaitu memakan waktu hanya dua puluh
menit untuk setiap jenis barang dari proses terdahulu memakan waktu enam puluh
menit untuk setiap barang. Pada rekapitulasi data menjadi lebih efisien dalam
pembuatan laporan barang, serta bisa meminimalisir kelihangan barang yang
pernah terjadi karena dalam data barang terdapat detail keterangan lokasi barang
terakhir dan kapan terakhir discan oleh petugas sehingga setiap barang dapat
dipantau lokasinya setiap waktu.
Hasil pengujian juga menunjukkan bahwa pengembangan aplikasi
inventory mampu membantu dalam proses pencatatan data barang di DPRD Kota
Salatiga, dan adanya fitur untuk melakukan pencarian scan barang. Dengan
adanya aplikasi inventory juga mempermudah Staf Sekretariat DPRD Kota
Salatiga untuk menyampaikan informasi melalui fitur pengumuman.
6. Pustaka
[1] Agusvianto Hendra, 2017. Sistem Informasi Inventori Gudang Untuk
Mengontrol Persediaan Barang Pada Gudang (Studi Kasus PT.Alaisys
Sidoarjo). JIEET(1). Januari 2017. ISSN 2549-869X.
[2] Fitriana N Dewi, 2013. Perancangan Aplikasi Pendaftaran Pasien Rawat
Jalan Menggunakan Visual Basic.Net 2008 Dengan Deteksi Kartu Pasien
Via Barcode Berbasis Android. SINTEKS(2). Juni 2013. ISSN 1907-2007.
[3] DPRD kota Salatiga, 2017. Visi Misi DPRD. Diakses tanggal 1 Februari
2017 dari http://dprd-salatigakota.go.id/.
[4] JQueryScript, 2017. Full-width jQuery. Diakses tanggal 5 Februari 2017
dari http://www.jqueryscript.net.
[5] DataTables, 2017. DataTables. Diakses tanggal 7 Februari 2017 dari
https://datatables.net.
[6] PHP Module, 2017. Module system. Diakses tanggal 5 Februari 2017 dari
http://www.dreamincode.net/ .
19
[7] Indrawaty, Youllia, 2001, Sebuah Gagasan Penggunaan Sistem Pengkodean
Baris(Barcode) Sebagai Kunci Pendeteksian Uang Secara Otomatis.
Surakarta : Universitas Muhammadiyah Surakarta.
[8] Ramadijanti, N dan Setiawardhana. 2010. Implementasi Pengolahan Citra
Untuk Identifikasi Produk Kemasan Berdasarkan Label Kemasannya.
Surabaya : Institut Teknologi Sepuluh Nopember.
[9] Albert Haryadi, 2012, Perancangan Sistem Identifikasi Barcode Untuk
Deteksi ID Produk Menggunakan Webcam. Padang : Universitas Andalas.
[10] Dinas Kearsiapan dan Perpustakaan Daerah Kabupaten Bekasi, 2016. Arsip
Berbasis Teknologi Infomasi dan Komunikasi (TIK) Dalam Pembangunan
Nasional. Diakses tanggal 15 Mei 2017 dari https://basipda.bekasikab.go.id.
[11] HM, Jogiyanto, 1995. Sistem Teknologi informasi. Andi, Yogyakarta.
[12] Vandika Arnes Y, 2011, Perancangan Sistem Informasi Manajemen
Inventory dengan Menggunakan Ms. Visual Foxpro 6.0 Pada Kantor Dinas
Badan Pusat Statistik (Bps) Lampung Selatan, Lampung: Universitas
Bandar.
[13] Pressman, R. S., 2001. Software engineering: a practitioner’s approach.
Amerika Serikat: R.S. Pressman and Associates.
[14] Real-Time Work-in-Process and Materials Tracking Systems, 2017.
BellHawk Standard Edition - Work-in-Process and Inventory Tracking
Software. Diakses tanggal 15 Mei 2017 dari http://www.bellhawk.com/.