## Sistem Informasi Proses dan Hasil Produksi Berbasis Web
Grant Ivan Nicholas Andrie 1 , Handoko 2 , Hartanto Kusuma Wardana 3
Program Studi Teknik Komputer, Fakultas Teknik Elektronika dan Komputer, Universitas Kristen Satya Wacana, Salatiga
1 miyaskr98@gmail.com, 2 handoko@staff.uksw.edu, 3 hartanto.kusuma@staff.uksw.edu

## Abstrak
Efisiensi menjadi salah satu kunci utama bagi perusahaan untuk dapat berkembang di era industri  4.0.  Perusahaan  manufaktur  yang  masih  menggunakan  kertas  sebagai  pencatatan hasil  produksi,  akan  sulit  untuk  mendapatkan  informasi  yang  cepat  dan  akurat.  Pada makalah  ini  dirancang  dan  direalisasikan  sebuah  sistem  informasi  untuk  mencatat  proses dan  hasil  produksi  serta  mengolahnya  menjadi  informasi  yang  dapat  digunakan  oleh perusahaan  untuk  mendukung  pengambilan  keputusan.    Sistem  ini  dibuat  menggunakan bahasa  pemrograman  PHP  dan  hasilnya  berupa  aplikasi web .  Informasi  yang  ditampilkan berupa  tabel  dan  laporan  dari  dokumen  yang  bersangkutan.  Sistem  informasi  yang drancang  dapat  meningkatkan  efisiensi  pencatatan  dan  pengolahan  informasi  proses produksi sampai 2 (dua) kali lipat.
Kata kunci: Sistem Informasi, Produksi, aplikasi web, Basis Data

## Abstract
Efficiency is one of the main keys for a company to be able to develop in the industrial era 4.0. In the manufacturing industry,  which still uses paper as production records, will have difficulties to obtain fast and accurate information. In this paper, an information system is designed  and  realized  to  record  production  processes  and  results  and  process  them  into information that can be used by companies to support decision making. This system is made using PHP language and the result is a web application. Information will be displayed in the form of tables and reports from the relevant documents. The designed information system can  increase the  efficiency  of recording and  processing  production  process  information up to 2 (two) times.
Keywords: Information System, Production, Web Application, Database

## 1. Pendahuluan
Di  era  industri  4.0  ini  banyak  perusahaan  yang  menggunakan  sistem  komputer sebagai  metode  untuk  mengakses  informasi  dari  data-data  proses  produksinya.  Data yang dimasukkan dalam database dan akan ditampilkan report dalam bentuk grafik atau tabel pada aplikasi web.
PT  X  merupakan  perusahaan  yang  bergerak  di  bidang  industri  manufaktur  atap gelombang  dan silica  board .  Berdasar  hasil  pengamatan  lapangan  dan  hasil  wawancara yang  dilakukan  penulis,  terdapat  beberapa  permasalahan,  yaitu  kurangnya  efisiensi
Techné Jurnal Ilmiah Elektroteknika Vol. 22 No. 1 April 2023 Hal 21 - 32
dalam  pencatatan  hasil  produksi  karena  perusahaan  masih  dilakukan  secara  manual menggunakan  kertas,  dimana  jika  perusahaan  ingin  mendapatkan  data  hasil  produksi harus  mencari  dan  menyimpulkan  secara  manual  juga.  Selama  ini  waktu  yang dibutuhkan untuk pencatatan data (termasuk melakukan perhitungan) adalah sekitar 2-3 menit dan untuk pencarian laporan hasil produksi sekitar 1-2 menit.
Produksi  adalah  proses  pengubahan  bahan  baku  menjadi  barang  jadi  untuk menambah nilai guna suatu benda [1]. Proses ini terdiri dari :
1. Perencanaan  dan  Persiapan  Bahan,  yaitu  proses  perencanaan  sesuai kebutuhan  produksi  seperti  penentuan  produk  yang  akan  dibuat,  jumlah bahan baku, serta tenaga kerja yang diperlukan.
2. Pembuatan  barang  jadi,  proses  produksi  dari  bahan  baku  yang  sudah disimpan pada tahap persiapan barang
3. Pencatatan  Proses  Produksi,  mencatat  atau  mendata  proses  dan  hasil produksi serta bahan-bahan yang terpakai
Melihat  permasalahan  di  atas,  dirancang  sebuah  sistem  informasi  untuk memudahkan  pengelola  mengakses  informasi  produksi  perusahaan.  Aplikasi  ini dirancang  untuk  memudahkan  pemilik  perusahaan  maupun  koordinator  pelaksana mengakses  informasi  hasil  produksi.    Sistem  informasi  dibuat  berbasis web karena aplikasi web dapat  dipakai  di  banyak  perangkat  (PC,  Laptop,  Tab,  Handphone),  dan banyak sistem operasi (Windows, Linux, Mac, Android). Serta dapat diakses dimana saja selama terhubung pada internet.

## 2. Perancangan Sistem
Diagram sistem dapat dilihat pada Gambar 1.

## Gambar 1. Diagram Sistem
Aplikasi web dibuat  menggunakan  bahasa  pemrograman  PHP  [2],[3]. User akan mengirimkan request ke web server yang ada pada perusahaan, lalu web server meneruskan request kepada web  service yang  akan  mengambil  data  yang  diperlukan  oleh user dari database . Data akan diubah menjadi JSON pada webservice dan dikirimkan ke user .
Pertama-tama user akan masuk ke dalam form autentikasi untuk login . Aplikasi akan mengirimkan username dan password ke server untuk diautentikasi. Setelah berhasil login, user akan masuk ke halaman main menu , pada halaman ini user dapat meilhat tab-tab yang berhubungan dengan produksi.
Terdapat 3 (tiga) jenis user yang mempunyai tingkat kewenangan yang berbeda yaitu user biasa, supervisor, dan admin. Di  dalam  3  (tiga)  jenis user ini  juga  akan  dibagi  lagi
kedalam  beberapa  departemen,  yaitu  Departemen  Produksi, Quality  Control  (QC) ,  dan Gudang. Artinya tiap-tiap departemen akan memilikki user dan supervisor nya sendiri.
Setelah  melakukan login,  User mempunyai  kewenangan  yang  berbeda.  Gambar  2 menunjukkan  bahwa user biasa  dapat  melihat  data  dan  mengisi form , user biasa  juga dapat  memodifikasi  data  yang  ada  tetapi  harus  melalui  validasi  yang  dapat  dilakukan oleh supervisor. Jika  data  dimodifikasi  oleh supervisor secara  langsung,  maka  data  tidak perlu divalidasi lagi. Selain validasi, supervisor juga dapat mengisi form dan melihat tabel atau grafik. Admin bertugas untuk membuat user atau supervisor baru, mengubah jabatan dari user menjadi supervisor dan sebaliknya, serta menghapus user atau supervisor .
Gambar 2. Diagram use-case user
(a) (b)
Gambar 3.a. Diagram Alir proses pengolahan data; b. Diagram alir cara kerja webservice
Techné Jurnal Ilmiah Elektroteknika Vol. 22 No. 1 April 2023 Hal 21 - 32
Setelah masuk ke main menu, user dapat memilih tab dan mengolah data yang terkait dengan tab tersebut.  Adapun tab informasi  produksi  yang  disediakan  adalah  proses penggilingan  kertas,  proses  penggilingan  silika,  mixing  adonan  bahan  baku,  catatan penggunaan bahan, proses pencetakan, proses pelepasan hasil cetakan, proses finishing, serah terima dan indentifikasi produk.
Semua input user, dalam hal ini disebut sebagai request , akan dikirimkan ke webservice sebagai HTTP Request yang akan mengakses database lalu mengembalikan datanya dalam bentuk JSON dan akan ditampilkan ke user seperti pada Gambar 3a. [4],[5]
Sedangkan  pada  Gambar  3b,  saat user mengirimkan HTTP  Request, webservice akan menerima URI (Uniform Resource Identifier), yang merupakan alamat menunjukkan lokasi resources pada server dan Body yang berisi parameter-parameter yang akan dipakai. Lalu webservice akan  melakukan query di database sesuai  dengan  parameter  yang  diberikan, setelah itu data hasil query dikirimkan kembali ke user dalam bentuk JSON. [6]
Database dalam aplikasi ini menggunakan PostgreSQL [7]. Gambar 4 merupakan ERD ( Entity Relationship Diagram ) sistem.
Gambar 4. ERD sistem

## 3. Hasil dan Pengujian
Pengujian  sistem  meliputi  pengujian  fungsi  tiap  halaman,  kompatibilitas  sistem dengan  browser  dan device ,  serta  kecepatan  dan  kestabilan webservice .  Pengujian  fungsi tiap  halaman  dilakukan  dengan  cara  mencoba  menjalankan  fungsi  yang  terkait  dengan beberapa  parameter  yang  berbeda  [8]-[10].  Gambar  5  adalah  tampilan  antarmuka halaman muka jika user berhasil login
Gambar 5. Halaman main menu

## 3.1. Proses Penggilingan Kertas
Pada halaman ini ditampilkan informasi yang berkaitan dengan proses penggilingan kertas  seperti  Nomor  Bukti,  Waktu  mulai  dan  selesai  penggilingan,  Jumlah  Giling, Jumlah Palet, Jumlah Persediaan, Bon Permintaan, Stock Akhir, Shift dan Mesin (Gambar 6).
Gambar 6. Halaman Proses Giling Kertas
User dapat membuat data/dokumen baru dengan menekan tombol Mulai Giling yang nantinya saat penggilingan selesai user akan memasukkan data-data penggilingan seperti pada Gambar 7. User juga dapat mem filter dokumen-dokumen yang ditampilkan di tabel berdasar  tanggal  menggunakan  tombol  Cari.  Terdapat  juga textbox search sehingga user dapat memasukkan keyword untuk pencarian data. User dapat mensortir data-data secara ascending maupun descending dengan cara meng-klik icon arah atas/bawah di setiap nama kolom.
Aplikasi juga sudah dilengkapi dengan proteksi, misal ketika user memasukkan data yang tidak sesuai dengan format, seperti mengisi data yang bukan angka.

## Gambar 7. Halaman Isi Data Penggilingan

## 3.2. Proses Pelepasan Hasil Cetakan
Pada  halaman  ini  disediakan  informasi  mengenai  nomor  bukti  dokumen  (BKT), tanggal  pembuatan,  shift  dan  mesin  yang  mengerjakan,  serta  barang  apa  yang diproduksi. Detail dari dokumen dapat dilihat dengan menekan tombol Detail di sebelah kanan.
Terdapat Terdapat informasi mengenai nomor bukti asal (dalam hal ini berasal dari Proses  Cetak)  yang  dipakai,  serta  jumlah  (barang  yang  baik)  dan  barang  yang  kosong dan reject .
Gambar 8. Halaman Proses Pelepasan Hasil Cetakan
Gambar 9. Detail Proses Pelepasan Hasil Cetakan

## 3.3. Serah Terima
Halaman Serah Terima ini dapat diakses oleh ketiga departemen user; Produksi, QC , dan  Gudang.  Dimana user QC  dan  Gudang  akan  memverifikasi  dokumen  yang bersangkutan dan tercatat dalam dokumen tersebut. Untuk verifikasi user harus menekan tombol Detail terlebih dahulu.

## Gambar 10. Halaman Serah Terima

## Gambar 11. Detail Serah Terima
Pada  Gambar  11  terlihat  tampilan  dari  detail  serah  terima  dimana user terlogin berasal dari departemen QC. Terdapat tombol verifikasi yang akan digunakan oleh user untuk memverifikasi dokumen tersebut.

## 3.4. Fitur Supervisor
Supervisor bertugas  untuk  memverifikasi  dokumen-dokumen  yang  ada  pada  proses produksi.
Gambar 12. Halaman Proses Giling Silika Supervisor

## 3.5. Fitur Admin
Admin dapat melihat daftar user, serta dapat menambah, mengubah artibut user , serta menghapus user.
Gambar 13. Fitur Admin

## 3.6. Pengujian Sistem
Pengujian  sistem  dilakukan  oleh  untuk  memastikan  apakah  sistem  yang  dibangun sudah  berfungsi  dengan  benar.  Pengujian  dilakukan  dengan  metode blackbox ,  dimana pengujian  dilakukan  dengan  melakukan  pengamatan  pada  hasil  eksekusi  melalui beberapa  kondisi  atau  data  uji  [11].  Hasil  pengujian  fungsi-fungsi  sistem  dapat  dilihat pada Tabel 1.
Sistem juga diuji coba di berbagai web browser untuk melihat apakah browser tersebut kompatibel  dan  di  berbagai  perangkat/ device untuk  melihat  baik  tidaknya  tampilan sistem. Pengujian device menggunakan fitur device emulation pada inspect element browser.
Tabel 1. Hasil Pengujian Fungsi-fungsi Sistem Nama fungsi Kondisi Output yang diharapkan Output Status Login Username dan password benar Masuk ke main menu Masuk ke main menu Valid Login Username dan/atau password salah Kembali ke form, tampilkan tulisan username/password salah Kembali ke form, tampilkan tulisan username/password salah Valid Form tambah data Form diisi dengan benar Data disimpan dan ditampilkan Data disimpan dan ditampilkan Valid Form tambah data Form tidak diisi Kembali ke form, tampilkan tulisan harus diisi Kembali ke form, tampilkan tulisan harus diisi Valid Form tambah data Isi form tidak sesuai format Kembali ke form, tampilkan tulisan data harus berupa angka Kembali ke form, tampilkan tulisan data harus berupa angka Valid Filter data berdasar tanggal Tanggal sesudah lebih besar dari tanggal sebelum Tampilkan tulisan tanggal tidak valid Tampilkan tulisan tanggal tidak valid Valid Edit data Form diisi dengan benar Data diupdate dan ditampilkan Data diupdate dan ditampilkan Valid Edit/Hapus data Umur data lebih dari 1 hari Disable tombol edit/hapus Disable tombol edit/hapus Valid Edit/Hapus data Data telah terverfikasi oleh supervisor Disable tombol edit/hapus Disable tombol edit/hapus Valid Tabel 2. Pengujian web browser Web Browser Status Microsoft Edge v.91 kompatibel Google Chrome v.91 kompatibel Firefox v.89 kompatibel Opera v.76 kompatibel Safari v14.1 kompatibel Tabel 3. Pengujian device Device Tampilan PC/Laptop (1440px) Daftar menu, tabel dan fitur tertampil pada 1 halaman Tablet (768px) Daftar menu tertampil pada sebelah kiri, tabel tertampil sebagian dan dapat di-scroll Handphone Besar (425px) Daftar menu tidak ditampilkan, digantikan dengan tombol di kiri atas, tabel tertampil sebagian dan dapat di-scroll Handphone Sedang (375px) Daftar menu tidak ditampilkan, digantikan dengan tombol di kiri atas, tabel tertampil sebagian dan dapat di-scroll Handphone Kecil (320px) Daftar menu tidak ditampilkan, digantikan dengan tombol di kiri atas, tabel tertampil sebagian dan dapat di-scroll
Gambar 14. Tampilan sistem pada Laptop
Gambar 15 Tampilan sistem pada Tablet
(a) (b)
Gambar 16 a. Tampilan sistem pada Handphone besar; b. Tampilan sistem pada handphone kecil
Sistem  juga  diuji  kecepatan  dan  kestablian  dalam  mengakses  data  dari webservice. Pengujian  ini  dilakukan  dengan  cara  sistem  mengajukan  sebuah request dan  menerima response berupa JSON dengan ukuran 371 bytes dan jaringan internet dengan kecepatan 10Mbps.
Tabel 4. Pengujian webservice No Pengujian Waktu response (detik) No Pengujian Waktu response (detik) 1 6.41776 6 7.005207 2 6.308899 7 6.713932 3 3.840612 8 6.399403 4 6.364535 9 14.238797 5 6.567326 10 6.364601
Dapat  dilihat  bahwa  koneksi  relatif  stabil  walaupun  ada  saat  dimana  koneksinya lebih cepat ataupun lebih lambat dari biasanya dengan rata-rata waktu 7.022116 detik.
Diujikan  juga  berapa  rata-rata  waktu  yang  dibutuhkan  oleh user untuk  mengisi sebuah form didalam apilkasi
Tabel 5. Pengujian pengisian form Jenis user Waktu (detik) Latar belakang, IT, mengerti web , memahami device (Laptop, Android, dll.) 10 Tidak berlatar belakang IT, mengerti web, memahami device. 10 Tidak berlatar belakang IT, kurang mengerti web, kurang memahami device 20
Dari percobaan kecepatan webservice dan pengisian form diatas dapat diambil waktu rerata user untuk melakukan suatu fungsi pada aplikasi yaitu :
Waktu = request form (webservice) + isi form + kirim form (webservice)
Berdasar  tabel  di  atas  waktu  rata-rata webservice adalah  7  detik  dan  waktu  terlama pengisian form adalah  20  detik,  maka  waktu  yang  dibutuhkan  untuk  melakukan  suatu fungsi di aplikasi paling lama sekitar 34 detik

## 4. Kesimpulan
Aplikasi web yang dirancang dapat digunakan oleh user untuk mengakses informasi produksi perusahaan. Aplikasi ini dapat meningkatkan efisiensi karena user tidak perlu lagi  melakukan  perhitungan  data,  perhitungan  dilakukan  secara  otomatis  oleh  sistem, lalu user dapat mencari laporan-laporan dokumen yang diinginkan dengan cepat, karena data  telah  tersimpan  dalam database ,  hanya  membutuhkan  waktu  beberapa  detik  untuk mencari laporan yang diinginkan. User tidak perlu lagi mencari lagi laporan bentuk fisik (kertas), keabsahan data tetap terjaga bilamana terjadi perubahan atau penghapusan data pada  dokumen,  jika  suatu  data  diubah,  maka  secara  otomatis  data-data  yang terkait/terkoneksi  ikut  berubah,  dan  mengurangi  penggunaan  kertas,  membuat perusahaan semakin ramah lingkungan.
Pengujian  yang  dilakukan  menggunakan  sistem  operasi  Windows  dan  Android menggunakan browser, seperti Chrome, Edge, Firefox dan Opera berhasil 100%
Techné Jurnal Ilmiah Elektroteknika Vol. 22 No. 1 April 2023 Hal 21 - 32
Dalam  proses  pengambilan  maupun  pengiriman  data  berupa  JSON  menggunakan webservice dipengaruhi  oleh  kecepatan  internet  dan server ,  dari  hasil  pengujian  dapat dilihat bahwa sistem relatif stabil.
Untuk  proses  pencatatan  maupun  pengambilan  laporan  data  hasil  produksi,  waktu yang  dibutuhkan  oleh user untuk  mengisi form serta response dari webservice adalah sekitar  34  detik.  Jika  dibandingkan  dengan  proses  pencatatan  secara  manual  yang membutuhkan  waktu  lebih  dari  1  menit,  aplikasi  ini  dapat  memangkas  waktu  proses pencatatan  dan  pengambilan  laporan  lebih  dari  30  detik,  sehingga  meningkatkan efisiensi pencatatan dan pengambilan laporan hingga 2 (dua) kali lipat.

## Daftar Pustaka
[1] Sickles, Robin., Zelenyuk, Valentin., Measurement of Productivity and Efficiency, 2019
[2]  Natalya  Prokofyeva.,  Victoria  Boltunova.,. Analysis  and  Practical  Application  of  PHP Frameworks  in  Development  of  Web  Infromation  Systems,  Procedia  Computer  Science Vol. 14 , 2016 [3] Tatroe, Kevin., MacIntyre, Peter, Programming PHP 4th Edition , O ’ Reilly Media, 2021
[4]  Botwe,  David.,  Davis,  Joseph., A  Comparative  Study  of  Web  Development  Technologies Using Open Source and Proprietary Software, 2015
[5]  W3C, Web  Services  Architecture [Online], https://www.w3.org/TR/2004/NOTE- ws-arch-20040211/#relwwwrest , diakses Mei 2020
[6] Introducing JSON [Online], https://www.json.org/json-en.html , diakses Mei 2020
[7] Obe, Regina, PostgreSQL : Up and Running, Third Edition, 2017
[8]  Baktiar  Krisna  Mukti  Nugroho.,  Handoko.,  Hartanto  Kusuma  Wardana.,.  MoBI, Sistem Informasi berbasis Android, Techné Jurnal Ilmiah Elektroteknika Vol. 18 No. 2, Oktober 2019
[9]  Yandi  Tubagus.,  Dini  Hamidin.,  Santoso.,.  Aplikasi  Pengelolaan  Proyek  PT  WTAP Bandung berbasis web, Jurnal Teknologi dan Informasi (JATI) Vol. 5 No 1, 2015.
[10]   Jody  Barata  Dwi  Pradipta.,  Augie  David  Manuputty.,.  Rancang  Bangun  Sistem Informasi  berbasis  web  dengan  penerapan  metode  Waterfall, Journal  of  Information Systems and Informatics Vol. 3 No 1, 2021.
[11] Myers, Glenford J.., The Art of Software Testing 3rd Edition , Wiley, 2015