## SISTEM  INFORMASI  TRANSAKSI  JUAL  BELI PRODUK ATK DAN PROYEK PERCETAKAN BERBASIS  WEB DI
CV. TRISON  MEDIA  PRINT
Handy Wiguna Putra 1 , Hersanto Fajri 2
Universitas Ibn Khaldun Bogor E-mail: handywiguna@gmail.com 1

## Abstrak
Sistem  informasi  dan  teknologi  komputer  berkembang  sangat  pesat  sejalan  dengan  besarnya kebutuhan  terhadap  informasi.  Perubahan  dan  dinamika  industri  yang  semakin  cepat  seiring dengan  perkembangan  teknologi  dan  informasi  sehingga  memerlukan  kualitas  sistem  informasi yang  akurat,  cepat  dan  tepat.  Dengan  segala  kegiatan  bisnis  yang  mengharuskan  terjadinya transaksi  antara  penjual  dan  pembeli  maka  hal  itu  akan  berpengaruh  terhadap  pasokan  atau persediaan  stok  barang  yang  ada  pada  suatu  perusahaan  atau  organisasi.  Sistem  Informasi  ini dibangun dengan bahasa pemrograman PHP dan database MySQL untuk mempermudah penulis dalam  pengembangan,  sistem  informasi  ini  menggunakan  framework  Laravel  versi  7  sebagai backend  dan  Vue.js  untuk  frontend.  Adapun  tujuan  penelitian  ialah  membangun  dan implementasi  sistem  informasi  berbasi  web  yang  dapat  mempermudah  berbagai  proses  bisnis yang  ada  pada  CV  Trison  Media  Print,  diantaranya:  Mengelola  pencatatan  pemasukan  dan pengeluaran barang, Melaporkan persediaan barang secara realtime, mengelola dan melaporkan baik transaksi penjualan alat tulis kantor maupun transaksi dalam bidang percetakan, mengelola data  pembayaran  proyek  percetakan,  mengelola  dokumen,  status,  dan  spesifikasi  proyek percetakan.  Setelah  diperoleh  tujuan  penelitian,  maka  diperoleh  manfaat  penelitian  bagi  CV Trison Media Print yaitu membantu mempermudah perusahaan dalam mengelola data persediaan barang  dan  transaksi  didalamnya  melalui  otomatisasi  penghitungan  yang  dilakukan  sistem informasi.

## Kata kunci: sistem informasi, framework

## Abstract
Information  systems  and  computer  technology  are  developing  very  rapidly  in  line  with  the magnitude  of  the  need  for  information.  The  changes  and  dynamics  of  the  industry  are accelerating  in  line  with  the  development  of  technology  and  information  so  that  it  requires quality information systems that are accurate, fast and precise. With all business activities that require transactions between sellers and buyers, it will affect the supply or stock of goods in a company  or  organization.  This  information  system  is  built  using  the  PHP  programming language and MySQL database to make it easier for writers to develop, this information system uses the Laravel framework version 7 as the backend and Vue.js for the frontend. The purpose of the research is to build and implement a web-based information system that can simplify various business  processes  that  exist  in  CV  Trison  Media  Print,  including:  Managing  the  recording  of
incoming and outgoing goods, Reporting real-time inventory of goods, managing and reporting both  office  stationery  sales  transactions  and  sales  transactions.  transactions  in  the  printing sector, managing payment data for printing projects, managing documents, status, and printing project  specifications.  After  obtaining  the  research  objectives,  the  benefits  of  research  for  CV Trison  Media  Print  are  obtained,  namely  helping  facilitate  companies  in  managing  inventory data  and  transactions  in  it  through  automation  of  calculations  carried  out  by  information systems.
Keywords: information system, framework

## 1. PENDAHULUAN
Sistem  informasi  dan  teknologi  komputer berkembang  sangat  pesat  sejalan  dengan besarnya  kebutuhan  terhadap  informasi. Perkembangan  teknologi  infomasi  tidak lepas dari pesatnya perkembangan teknologi komputer  karena  komputer  merupakan media  yang  dapat  memberikan  kemudahan bagi  manusia  dalam  menyelesaikan  suatu pekerjaan.  Perubahan  dan  dinamika  industri yang semakin cepat seiring dengan perkembangan  teknologi  dan  informasi sehingga memerlukan kualitas sistem informasi  yang  akurat,  cepat  dan  tepat. Sistem  informasi  adalah  salah  satu  contoh produk  teknologi  yang  berkembang  pesat yang  dapat  membantu  manusia  dalam mengolah  data  serta  menyajikan  sebuah informasi yang berkualitas.
Dengan segala kegiatan bisnis yang mengharuskan  terjadinya  transaksi  antara penjual  dan  pembeli  maka  hal  itu  akan berpengaruh terhadap pasokan atau persediaan stok barang yang ada pada suatu perusahaan  atau  organisasi.  CV  Trison Media  Print  merupakan  perusahaan  yang berada  di  Ruko  Kumpala  No.  21,  Jl.  KSR. Dadi  Kusmayadi  -  Cibinong,  salah  satu perusahan  yang  bergerak  dalam  bidang perdagangan alat tulis kantor dan percetakan yang  berdiri  sejak  tahun  2017  yang  hingga
kini  hampir  semua  kegiatan  bisnis  yang dilakukan  masih  menggunakan  cara  yang konvensional  yakni  melakukan  pencatatan pada  kertas  baik  itu  pencatatan  barang masuk dan barang keluar, transaksi penjualan  barang,  dan  menyalin  di  Ms. Excel  pada  periode  tertentu.  Hal  ini  rentan sekali  dengan  resiko  kesalahan  pada manusia  seperti  salah  menuliskan  data  atau bahkan  kehilangan  data  karena  kelalaian dalam menyimpan data.
Permasalahan  lain  yang  dialami  oleh perusahaan  yaitu  minimnya  pencatatan transaksi  dibidang  percetakan  sehingga menyulitkan  pengumpulan  informasi  jika customer ingin melakukan pencetakan ulang dengan spesifikasi yang sama. Penyimpanan file cetak yang tidak teratur pun menyulitkan pencarian  file  jika  dibutuhkan  kembali. Sebagian  besar  proyek  percetakan  pada  CV Trison  Media  print  menggunakan  sistem pembayaran secara berkala, dengan minimnya pecatatan yang dilakukan mengakibatkan kerugian perusahaan.
Dengan  segala  permasalahan  yang  timbul dari berbagai proses manual yang dilakukan pada  perusahaan  ini  maka  dibuatlah  sebuah sistem  informasi  yang  dapat  mengelola  dan mencatat berbagai transaksi pada CV Trison Media  Print.  Sistem  Informasi  ini  dibangun dengan  bahasa  pemrograman  PHP  dan database  MySQL  untuk  mempermudah
penulis dalam pengembangan, sistem informasi  ini  menggunakan  framework Laravel  versi  7  sebagai  backend  dan  Vue.js untuk  frontend.  Adapun  tujuan  penelitian ialah  membangun  dan  implementasi  sistem informasi berbasi web yang dapat mempermudah  berbagai  proses  bisnis  yang ada pada CV Trison Media Print, diantaranya: Mengelola pencatatan pemasukan dan pengeluaran barang,
Melaporkan persediaan barang secara realtime,  mengelola  dan  melaporkan  baik transaksi penjualan alat tulis kantor maupun transaksi dalam bidang percetakan, mengelola data pembayaran proyek percetakan, mengelola dokumen, status, dan spesifikasi proyek percetakan. Setelah diperoleh  tujuan  penelitian,  maka  diperoleh manfaat  penelitian  bagi  CV  Trison  Media Print yaitu membantu mempermudah perusahaan
dalam mengelola
data persediaan barang dan transaksi didalamnya melalui  otomatisasi  penghitungan  yang dilakukan sistem informasi.

## 2. METODE PENELITIAN
Metode  penelitian  yang  diterapkan  pada pengembangan  sistem  ini  adalah  dengan metode waterfall. Fase-fase dalam Waterfall Model  menurut  referensi  Pressman  :
Gambar 1. Metode Waterfall pressman

## 1. Communication (Project Initiation & Requirements Gathering)
Sebelum  memulai  pekerjaan  yang bersifat  teknis,  sangat  diperlukan adanya komunikasi dengan customer demi  memahami  dan  mencapai tujuan  yang  ingin  dicapai.  Hasil  dari
komunikasi tersebut adalah inisialisasi proyek, seperti
menganalisis permasalahan yang
dihadapi  dan  mengumpulkan  data- data yang diperlukan, serta membantu  mendefinisikan  fitur  dan fungsi  software.  Pengumpulan  data- data tambahan bisa juga diambil dari jurnal, artikel, dan internet.
2. Planning  (Estimating,  Scheduling,

## Tracking)
Tahap  berikutnya  adalah  tahapan perencanaan yang menjelaskan tentang  estimasi  tugas-tugas  teknis yang  akan  dilakukan,  resiko  -  resiko yang  dapat  terjadi,  sumber  daya yang  diperlukan  dalam  membuat sistem,  produk  kerja  yang  ingin dihasilkan,  penjadwalan  kerja  yang akan  dilaksanakan,  dan  tracking proses pengerjaan  sistem.
3. Modeling (Analysis & Design)
Tahapan ini adalah tahap
perancangan dan permodelan arsitektur  sistem  yang berfokus  pada perancangan  struktur  data,  arsitektur software,  tampilan  interface,  dan algoritma program. Tujuannya untuk lebih  memahami  gambaran  besar dari apa yang akan dikerjakan.

## 4. Construction (Code & Test)
Tahapan Construction ini merupakan proses  penerjemahan  bentuk  desain menjadi  kode  atau  bentuk/bahasa yang  dapat  dibaca  oleh  mesin.
Setelah pengkodean selesai,
dilakukan  pengujian  terhadap sistem dan  juga  kode  yang  sudah  dibuat.
Tujuannya untuk menemukan
kesalahan  yang  mungkin  terjadi
untuk nantinya diperbaiki. 5. Deployment (Delivery, Support,
Feedback) Tahapan  Deployment  merupakan
tahapan  implementasi  software  ke customer, pemeliharaan software secara  berkala,  perbaikan  software, evaluasi software, dan pengembangan software  berdasarkan  umpan  balik yang  diberikan  agar  sistem  dapat tetap berjalan dan berkembang sesuai dengan fungsinya. (Pressman, 2015:17)

## 3. HASIL DAN PEMBAHASAN

## 1) Halaman Login
Halaman  login  merupakan  pintu  akses  bagi pengguna  untuk  dapat  memasuki  sistem sesuai  dengan  hak  akses  yang  dimiliki. Berikut tampilan halaman login dapat dilihat pada gambar 2

## Gambar 2. halaman login

## 2) Halaman Dashboard
Halaman  dashboard  merupakan  halaman pertama yang dilihat pengguna saat berhasil login. Halaman dasboard ini berisi ringkasan dari  berbagai  modul  yang  tersedia  dalam sistem  ini.  Setiap  pengguna  memiliki halaman  dashboard  yang  berbeda  sesuai dengan  hak  akses  yang  dimiliki.  Berikut adalah  tampilan  halaman  dashboard  sesuai dengan hak akses pengguna.
a) Tampilan Halaman Dashboard Manager
Gambar 3. Halaman Dashboard manager
b) Tampilan  Halaman  Dashboard  Staf
Administrasi Gambar 4. Halaman dashboard staf administrasi c) Tampilan Halaman Dashboard Sales Gambar 4. Halaman Dashboard sales
d) Tampilan  Halaman  Dashboard  Staf
Produksi Gambar 5. Halaman dashboard produksi e) Tampilan Halaman Dashboard Pramuniaga
Gambar 6. Halaman dashboard
pramuniaga 3) Halaman Penjualan Produk Halaman penjualan produk merupakan halaman dimana pengguna dapat melakukan
pengolahan  data  penjualan,  mulai dari  melihat  seluruh  data  penjualan, menambah  data  penjualan,  mengedit data  penjualan,  dan  menghapus  data penjualan.  Pengguna  yang  dapat
mengakses halaman ini adalah manager, pramuniaga dan staf administrasi  dengan  hak  akses  yang berbeda  pada  setiap  aktor.  Berikut
beberapa  tampilan  dari  halaman penjualan produk:

## a)
Tampilan  Halaman  Penjualan
Produk.
gambar 7. Halaman penjualan produk
b) Tampilan Form Tambah Data Penjualan Produk Gambar 8. Form tambah data penjualan c) Tampilan  Form  Edit  Data Penjualan Produk
Gambar 9. Form edit data penjualan
d) Tampilan  Konfimasi  Hapus
Data Penjualan Produk Gambar 10. Konfirmasi hapus data penjualan 4) Halaman Pembelian Produk
Halaman  pembelian  produk  merupakan halaman dimana pengguna dapat melakukan pengolahan  data  pembelian,  mulai  dari melihat  seluruh  data  pembelian,  menambah data  pembelian,  mengedit  data  pembelian, dan  menghapus  data  pembelian.  Pengguna yang  dapat  mengakses  halaman  ini  adalah manager  dan  staf  administrasi.  Berikut beberapa  tampilan  dari  halaman  pembelian produk:
a) Tampilan Halaman Pembelian Produk.
Gambar 11. Halaman pembeli produk
b) Tampilan Form Tambah Data Pembelian Produk Gambar 12. Data pembelian produk c) Tampilan Form Edit Data Pembelian Produk Gambar 13. Form edit pembelian produk d) Tampilan  Konfimasi  Hapus  Data Pembelian Produk
Gambar 14. Konfirmasi hapus data
pembelian produk 5) Halaman Produk
Halaman produk merupakan halaman
dimana pengguna dapat melakukan
pengolahan  data  produk  ATK,  mulai  dari melihat seluruh data produk ATK,
menambah data produk ATK, mengedit data produk  ATK,  dan  menghapus  data  produk ATK.  Pengguna  yang  dapat  mengakses halaman ini adalah semua aktor dengan hak akses  yang  berbeda  pada  setiap  aktor. Berikut  beberapa  tampilan  dari  halaman produk ATK :
a) Tampilan Halaman Produk Gambar 15. Halaman pembelian produk b) Tampilan Form Tambah Data Produk
Gambar 16. Form tambah data produk
c) Tampilan Form Edit Data Produk
Gambar 17. Form edit data produk
d) Tampilan  Konfimasi  Hapus  Data
Produk Gambar 18. Konfirmasi hapus data pembelian produk e) Tampilan Lihat Foto Produk Gambar 19. Tampilan lihat produk 6)

## Halaman Proyek
Halaman proyek merupakan halaman
dimana pengguna dapat melakukan
pengolahan  data  proyek  percetakan,  mulai dari melihat seluruh data proyek percetakan, menambah data proyek percetakan, mengedit data proyek percetakan, menghapus  data  proyek  percetakan,  melihat
data dokumen proyek percetakan, menambah data dokumen proyek percetakan, menghapus data dokumen proyek percetakan, mengunduh data dokumen  proyek  percetakan,  melihat  data pembayaran  proyek  percetakan,  menambah data  pembayaran  proyek  percetakan,  dan menghapus data pembayaran proyek percetakan. Pengguna yang dapat mengakses halaman ini adalah manager, staf administrasi, sales, dan staf produksi dengan hak  akses  yang  berbeda  pada  setiap  aktor. Berikut  beberapa  tampilan  dari  halaman proyek percetakan : a) Tampilan Halaman Proyek Percetakan Gambar 20. Halaman proyek percetakan b) Tampilan Form Tambah Data Proyek Percetakan Gambar 21. Form tambah data proyek
c) Tampilan  Form  Edit  Data  Proyek
Percetakan
Gambar 22. Form edit data proyek
e) Tampilan  Lihat  Data  Dokumen
Proyek Percetakan Gambar  24. Lihat  data  dokumen  proyek percetakan d) Tampilan Konfimasi Hapus Data
Proyek Percetakan
Gambar 23. Konfirmasi hapus data

## f) Tampilan Form Tambah Data Dokumen Proyek Percetakan
Gambar 25 . Form tambah data dokumen proyek percetaka
g) Tampilan Konfimasi Hapus Data Dokumen Proyek Percetakan Gambar 26. Konfirmasi hapus data dokumen h) Tampilan Lihat Data Pembayaran
Proyek Percetakan
Gambar 27. Lihat data pembayaran proyek
percetakan i) Tampilan Form Tambah Data Pembayaran Proyek Percetakan Gambar 28. Konfirmasi tambah data pembayaran  proyek percetakan
j) Tampilan  Konfimasi  Hapus  Data
Pembayaran Proyek Percetakan
Gambar 29. Konfirmasi hapus data
dokumen proyek percetakan 7) Halaman Kategori Produk Halaman kategori produk merupakan halaman dimana pengguna dapat melakukan pengolahan  data  pengelompokan  produk ATK  berdasarkan  kategori  produk  ATK, mulai  dari  melihat  seluruh  data  kategori produk  ATK,  menambah  data  kategori produk ATK, mengedit data kategori produk ATK,  dan  menghapusndata  kategori  produk
ATK.  Pengguna  yang  dapat  mengakses halaman  ini  adalah  manager.  Berikut beberapa  tampilan  dari  halaman  kategori produk ATK :
a) Tampilan Halaman Kategori Produk Gambar 30. Halaman kategori produk b) Tampilan Form Tambah Data Kategori Produk Gambar 31. Form tambah data ketegori produk c) Tampilan  Form  Edit  Data  Kategori Produk
Gambar 32. Form edit data kategori produk d) Tampilan  Konfimasi  Hapus  Data Kategori Produk
Gambar 33. Konfirmasi hapus data kategori
produk 8) Halaman Supplier
Halaman  supplier  merupakan  halaman dimana
pengguna dapat melakukan pengolahan data supplier, mulai dari melihat seluruh  data  supplier,  menambah  data supplier,  mengedit  data  supplier,  dan menghapus  data  supplier.  Pengguna  yang dapat  mengakses  halaman  ini  adalah  semua aktor  dengan  hak  akses  yang  berbeda  pada tiap  aktor.  Berikut  beberapa  tampilan  dari halaman supplier :
a) Tampilan Halaman Supplier
Gambar 34. Halam supplier b) Tampilan Form Tambah Data Supplier Gambar 35. Form tambah data supplier c) Tampilan Form Edit Data Supplier
Gambar 36 . Form edit data supplier
d) Tampilan  Konfimasi  Hapus  Data Supplier
Gambar 37. Konfirmasi Hapus Data
Supplier 9) Halaman Pelanggan Halaman  pelanggan  merupakan  halaman dimana pengguna dapat melakukan
pengolahan  data  pelanggan,  mulai  dari melihat  seluruh  data  pelanggan,  menambah data  pelanggan,  mengedit  data  pelanggan, dan  menghapus  data  pelanggan.  Pengguna yang  dapat  mengakses  halaman  ini  adalah semua aktor dengan hak akses yang berbeda pada  tiap  aktor.  Berikut  beberapa  tampilan dari halaman pelanggan :
a) Tampilan Halaman Pelanggan
Gambar 38 . Halaman pelanggan b) Tampilan Form Tambah Data
Pelanggan
Gambar 39 . Form tambah data pelanggan
c) Tampilan Form Edit Data Pelanggan
Gambar 40. Form edit pelanggan
d) Tampilan  Konfimasi  Hapus  Data
Pelanggan
Gambar 41. Hapus data pelanggan 10) Halaman Manajemen Pengguna Halaman  manajemen  pengguna  merupakan halaman  khusus  manager  dimana  manager dapat melakukan pengolahan data pengguna sistem, mulai dari melihat seluruh pengguna sistem, menambah pengguna sistem, mengedit  data  pengguna  sistem,  dan menghapus pengguna sistem. Berikut beberapa tampilan dari halaman manajemen pengguna : a) Tampilan Halaman Manajemen Pengguna Gambar 42 . Halaman manajemen pengguna b) Tampilan Form Tambah Pengguna
Gambar 43 . Form tambah pengguna
c) Tampilan Form Edit Data Pengguna
Gambar 44. Form edit data pengguna d) Tampilan Konfimasi Hapus Pengguna Gambar 45 . Konfirmasi hapus pengguna 11) Halaman Pengaturan Pengguna Halaman  pengaturan  pengguna  merupakan halaman  dimana  setiap  pengguna  dapat melakukan perubahan data pengguna sistem, mulai  dari  merubah  nama,  email,  dan
password untuk login. Berikut tampilan dari halaman  pengaturan  pengguna  dapat  dilihat pada gambar 4.6
Gambar 46. Tampilan pengaturan pengguna

## 4. KESIMPULAN
Mengacu  pada  hasil  dan  pembahasan,  maka dapat ditarik kesimpulan sebagai berikut : 1. Pembangungan  Sistem  Informasi Transaksi Jual Beli Produk ATK dan Proyek Percetakan  Berbasis  Web  di  CV.  Trison
Media
Print telah dilakukan dan diimplementasikan  dari  hasil  rancangan yang  telah  dibuat  dalam  analisis  kebutuhan, Diagram  Konteks,  dan  UML  Diagram serperti  Use  Case  Diagram,  Activity Diagram,  Sequence  Diagram,  dan  Class Diagram.
5. DAFTAR PUSTAKA
[1]
Anggraeni,  E.Y.  dan  Rita
Irviani.  2017.  Pengantar  sistem  informasi.
Yogyakarta: Andi. [2] Sa’ad, Muhammad Ibnu. 2020. Otodidak Web Programming: Membuat  Website  Edutainment.  Jakarta: Elex Media Komputindo. [3] Hidayat, Rahmat. 2017. "Aplikasi  Penjualan  Jam  Tangan  Secara Online Studi Kasus: Toko JAMBORESHOP." Jurnal Teknik Komputer 3, no. 2 (hal. 90-96). [4] Fauzan, Mohamad Nurkamal.
2020.  Membuat  Sistem  Approval  Anggaran Pelatihan     Dengan      Php,      Codeigniter,
Dan  Bootstrap.  Bandung:  Kreatif  Industri Nusantara.
[5] Supardi, Yuniar & Sulaeman, 2019,  Semua  Bisa  Menjadi  Programmer Laravel Basic. Jakarta: Elex Media Komputindo. [6] Surya,  Candra  dan  Miftahul Jannah.  2020.  Desain  Web  bagi  Pemula. Jakarta: Elex Media Komputindo. [7] Hidayat, Rahmat. 2017. "Aplikasi  Penjualan  Jam  Tangan  Secara Online Studi Kasus: Toko JAMBORESHOP." Jurnal Teknik Komputer 3, no. 2 (hal. 90-96). [8]
Putra, Aditya Herdinata, Dian Pramana,  dan  Ni  Luh  Putri  Srinadi.  2019. “Sistem  Manajemen  Arsip  Menggunakan Framework  Laravel  Dan  Vue.Js  (Studi Kasus  :  BPKAD  Provinsi  Bali)”.  Jurnal Sistem  Dan  Informatika  (JSI)  13  (2),  97- 104.
https://jsi.stikom- bali.ac.id/index.php/jsi/article/view/214. [9] Irianto, Dwika Rahman,
Moh.  Abdullah  Anshori,  and  Putri  Elfa Mas’udi. 2020. “Design and Build Ordering Data  Communication  Systems  On  Drive Thru  Android  Based  ETU  Polinema Bakery”.  Jurnal  Jartel:  Jurnal  Jaringan Telekomunikasi 10 (3):144-49. https://doi.org/10.33795/jartel.v10i3.58. [10] Arief,  M.Rudyanto.  2011. ”Pemograman  Web  Dinamis  Menggunakan PHP dan MySQL”. Yogyakarta [11] Prihandoyo, M. Teguh. 2018. "Unified Modeling Language (UML) Model Untuk  Pengembangan  Sistem  Informasi Akademik Berbasis Web." Jurnal Informatika:  Jurnal  Pengembangan  IT  3.1 (hlm. 126-129). [12] Udi,  Udi.  2017.  "Penerapan
Metode  SDLC  Waterfall  Dalam  Pembuatan Sistem  Informasi  Akademik  Berbasis  Web Studi  Kasus  Pondok  Pesantren  Al-  Habib Sholeh  Kabupaten  Kubu  Raya,  Kalimantan Barat."  Jurnal  Teknologi  Dan  Manajemen Informatika 4, no. 1.