e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com

## Designing a Inventory Information System and Web-Based Transaction Recording
(Case Study at the Sinar Berkah Agung Building Store)
Perancangan Sistem Informasi Persediaan Barang Dan Pencatatan Transaksi Berbasis Web ( Studi Kasus Di Toko Bangunan Sinar Berkah Agung)
Mulyanah 1 , Ifan Junaedi 2 , Anton Zulkarnain Sianipar 3
The Study Program in Information System 1,
Departement of Information System 2
Department of Informatics Engineering. STMIK Jayakarta 1,2,3
e-mail: liamlynh@gmail.com 1 , ifanjunaedi8@gmail.com 2 , antonz.jayakarta@gmail.com 3
Received: March 15, 2022 Revised: July 15, 2022 Accepted:
August 8, 2022 Issue Period: Vol.6  No.2  (2022), Pp. 300-321
Abstrak: Toko  Bangunan  Sinar  Berkah  Agung  adalah    salah    satu perusahaan  menengah  ke  bawah  yang  bergerak  di  bidang  penjualan bahan  bangunan  yang  dimana  pencatatan  stok  barang  pada  toko bangunan sinar berkah agung masih dilakukan secara manual. Artinya dari  segi  pencatatan  dan  pengolahan  data  masih  menggunakan selembar  kertas  (paper  based  system)  dengan  tulis  tangan  yang menyebabkan terjadinya kesalahan pencatatan laporan data. Transaksi penjualan  juga  masih  dilakukan  secara  manual  terhadap  pencatatan nota  yang  memungkinkan  terjadinya  kesalahan  pencatatan  hingga hilangnya catatan. Pencatatan dan pengelolaan data barang yang masih bersifat manual banyak sekali masalah seperti kekeliruan dalam proses pencatatan.  Dengan  adanya  permasalahan  itu  mengakibatkan  waktu dan  tenaga  yang  dikeluarkan  menjadi  lebih  besar.  Untuk menyelesaikan  masalah  tersebut,  maka  perusahaan  membutuhkan sistem  informasi  pencatatan  persediaan  barang,  transaksi  penjualan, dan  laporan  penjualan.  Dengan  adanya  sistem  ini  dapat  dilakukan pendataan  persediaan  barang  dan  proses  transakasi  penjualan  secara
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
bersamaan  dan  terprogram,  menjaga  keamanan  data  serta  dapat menghasilkan  suatu  laporan  yang  diinginkan  oleh  perusahaan, sehingga  jika  data-data  tersebut  akan  digunakan  sewaktu-waktu  maka sangatlah  mudah  untuk  mendapatkannya  dan  tidak    memakan    waktu yang lama.
Kata kunci: Penjualan; Transaksi; Sistem; Web;
Abstract: Sinar  Berkah  Agung  Building  Store  is  one  of  the  lower- middle-class  companies  engaged  in  the  sale  of  building  materials, where  the  recording  of  stock  of  goods  at  the  Sinar  Berkah  Agung building  store  is  still  done  manually.  This  means  that  in  terms  of recording  and  processing  data  still  using  a  piece  of  paper  (paper based  system)  in  handwriting  which  causes  errors  in  recording  data reports. Sales transactions are also still carried out manually on note recording which allows for recording errors to be lost. The recording and management of goods data that is still manual has many problems, such  as  errors  in  the  recording  process.  With  this  problem,  the  time and energy spent will be greater. To solve this problem, the company needs  an  information  system  for  recording  inventory,  sales transactions,  and  sales  reports.  With  this  system,  it  is  possible  to collect  inventory  data  and  process  sales  transactions  simultaneously and  programmatically,  maintain  data  security  and  can  produce  a report desired by the company, so that if the data will be used at any time it is very easy to get it and does not take time. long time.
Keywords: Sales; Transaction; System; Web;

## I. PENDAHULUAN
Saat  ini  dunia  sudah  mengalami  perkembangan  dari  segala  aspek,  salah  satunya  ialah perkembangan teknologi.  Peran serta teknologi pun menjadikan pengolahan suatu infromasi menjadi  lebih  mudah.  Berkembangnnya  kemajuan  teknologi  ini  juga  membuat  suatu perusahaan  berlomba  lomba  dalam  melakukan  usaha  pemasaranataupun  mempertahankan usahanya.  Dalam  aktivitas  kegiatan  usaha  sudah  mulai  mengalami  dampaknya  sehingga segala  aktivitas  yang  manual  sudah  mulai  dialihkan  dengan  komputerisasi.  Pemanfaatan komputer menjadi alat teknologi  informasi  yang sangat   dibutuhkan keberadaannya, karena menghasilkan  informasi  yang  efektif,  efesien,  dan  akurat.  Sistem  teknologi  informasi  juga dimanfaatkan  oleh  pengusaha  menengah  kebawah  yang  ingin  mengembangkan  usahanya dengan mempersiapkan teknologi informasi yang mampu bersaing dengan kompetitor.
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Toko  Bangunan  Sinar  Berkah  Agung  adalah    salah    satu  perusahaan  menengah  ke  bawah yang bergerak di bidang penjualan bahan bangunan yang dimana pencatatan stok barang pada toko  bangunan  sinar  berkah  agung  masih  dilakukan  secara  manual.  Artinya  dari  segi pencatatan  dan  pengolahan  data  masih  menggunakan  selembar  kertas  (paper  based  system) dengan tulis tangan  yang menyebabkan terjadinya kesalahan  pencatatan laporan data. Tidak ada  informasi  khusus  yang  menginformasikan  tentang  jumlah  stok  barang  sehingga  tidak jarang  ketika  stok  sudah  habis  pemilik toko  baru  mengetahui  ketika terjadi  proses  transaksi sehingga mengecewakan pelanggan. Permasalahan transaksi penjualan juga masih dilakukan secara manual terhadap pencatatan nota yang memungkinkan terjadinya kesalahan pencatatan hingga  hilangnya  catatan.  Pencatatan  dan  pengelolaan  data  barang  yang  masih  bersifat manual  banyak  sekali  masalah  seperti  kekeliruan  dalam  proses  pencatatan.  Dengan  adanya permasalahan itu mengakibatkan waktu dan tenaga yang dikeluarkan menjadi lebih besar[1]. Tujuan pencatatan transaksi selain bertujuan untuk melihat dan menyimpan histori transaksi juga untuk melihat stok, melihat laba rugi dari hasil transaksi selama periode berjalan.
Untuk  menyelesaikan  masalah  tersebut,  maka  perusahaan  membutuhkan  sistem  informasi pencatatan  persediaan  barang,  transaksi  penjualan,  dan  laporan  penjualan.  Dengan  adanya sistem  ini  dapat  dilakukan  pendataan  persediaan  barang  dan  proses  transakasi  penjualan secara  bersamaan  dan  terprogram,  menjaga  keamanan  data  serta  dapat  menghasilkan  suatu laporan  yang  diinginkan  oleh  perusahaan,  sehingga  jika  data-data  tersebut  akan  digunakan sewaktu-waktu  maka  sangatlah  mudah  untuk  mendapatkannya  dan  tidak    memakan    waktu yang lama.

## II. METODE DAN MATERI

## 1. Perancangan
Perancangan  merupakan  tahapan  yang  berupa  penggambaran,  perencanaan  dan  pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan  berfungsi,  termasuk  menyangkut  mengkonfigurasikan  dari  komponen-komponen perangkat lunak dan perangkat keras suatu sistem[2].
Dalam  tahap  perancangan  suatu  sistem,  terdapat  beberapa  hal  yang  dilakukan.  Berikut  ini merupakan contoh apa saja hal-hal yang dilakukan dalam tahap perancangan : a. Perancangan Alur Sistem b. Perancangan Sistem Basis Data c. Perancangan Tampilan
2. Sistem
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Sistem  Informasi  merupakan  suatu  asosiasi  terdiri  dari  beberapa  modul  yang  saling terintegrasi dimana menyajikan informasi dan pengolahan data untuk disajikan sesuai dengan kebutuhan  user,  database,  source  code  dan  model  design  mewakili  dari  untaian  suatu rancangan  sistem  informasi  berguna  untuk  mempermudah  dalam  pengembangan  dan maintenance[3].

## 3. Informasi
Informasi    merupakan    hasil    pengolahan    data    sehingga    menjadi    bentuk    yang    penting bagi  penerimanya  dan  mempunyai  kegunaan  sebagai  dasar  dalam  pengambilan  keputusan yang dapat dirasakan akibatnya secara langsung saat itu juga atau secara tidak langsung pada saat mendatang. Untuk memperoleh informasi, diperlukan adanya data yang akan diolah dan unit pengolahan[4].

## 4. Persediaan
Persediaan  adalah  sekumpulan  barang  yang  disimpan  untuk  dijual  dalam  operasi  bisnis perusahaan  dan  dapat  digunakan  dalam  proses  produksi  atau  dapat  digunakan  untuk  tujuan tertentu[5].
Sistem  persediaan  merupakan  sistem  yang  digunakan  untuk  mengelola  persediaan  gudang. Sistem  informasi  persediaan  adalah  sistem  yang  digunakan  untuk  mengumpulkan  dan memelihara data yang menjelaskan persediaan komoditas, mengubah data menjadi informasi dan melaporkan kepada pengguna[6].

## 5. Transaksi
Transaksi adalah suatu aktivitas perusahaan yang dapat  menimbulkan perubahan pada posisi harta  atau  keuangan  perusahaan  tersebut.  Aktivitas  transaksi  tersebut  misalnya  membeli, menjual, membayar gaji pegawai, dan membayar berbagai jenis biaya lainnya[7].

## 6. Penjualan
Penjualan  merupakan  salah  satu  pendapatan  perusahaan  dan  kegiatan  perusahaan  atau bertemunya  penjual  dan  pembeli  untuk  melakukan  pertukaran  barang  dengan  cara  menjual produk atau jasa guna untuk memenuhi kebutuhan perusahaan serta untuk mencapai laba baik secara  kredit  maupun  secara  tunai  sesuai  dengan  yang  sudah  disepakati  bersama  dengan pembayaran yang sah[8].

## 7. Database
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Database  atau  basis  data  merupakan  kumpulan  dari  data  yang  saling  berhubungan  satu dengan  yang  lainnya,  digunakan  perangkat  lunak  tertentu  untuk  memanipulasinya[9]. Database  atau  basis  data  biasanya  dikeola  menggunakan  sebuah Database  Management System (DMBS).  Contoh  dari  DBMS  diantaranya MySQL , Postgre  SQL , Maria  DB , Microsoft SQL Server , Oracle , MongoDB , dan lain sebagainya

## 8. Website
Website merupakan  kumpulan  halaman  dalam  suatu  domain  yang  memuat  tentang  berbagai informasi  agar  dapat  dibaca  dan  dilihat  oleh  pengguna  internet.  Dengan  adanya website ,banyak  informasi  yang  dapat  disebar  luaskan  agar  sampai  pada  pengguna informasi[10].

## 9. XAMPP
XAMPP adalah perangkat lunak open source, yang mendukung untuk banyak sistem operasi, yang  merupakan  kompilasi  dari  beberapa  program[11].XAMPP  merupakan  software gabungan  dari  beberapa  software  lainnya  dengan  fungsi  yang  sama  yakni  menunjang pembuatan web dengan menyediakan web server lokal yang dapat ditanamkan pada PC atau laptop[12].

## 10. HTML
HTML merupakan bahasa pemprograman web yang memberitahukan peramban web (web browser) bagaimana menyusun dan menyajikan konten di halaman web[13].

## 11. CSS
CSS  adalah  suatu  Bahasa  pemprograman  web  yang  digunakan  untuk  mengendalikan  dan membangun  berbagai  komponen  dalam  web  sehingga  tampilan  web  akan  lebih  rapi, terstruktur, dan seragam[13].

## 12. Boostrap
Bootstrap  merupakan  kerangka  kerja  untuk  tampilan  yang  memiliki  kemampuan  untuk membuat halaman web secara responsive[14].

## III. METODE PENELITIAN
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Metode  penelitian  yang  digunakan  pada  penelitian  ini  adalah  metode  kualitatif.  Metode kualitatif  sebagai  prosedur  penelitian  yang  menghasilkan  data  deskriptif  berupa  kata-kata tertulis  atau  lisan  dari  orang-orang  atau  perilaku  yang  dapat  diamati.  Penelitian  kualitatif dilakukan  pada  kondisi alamiah  dan  bersifat  penemuan.  Dalampenelitian  diperlukan  adanya suatu data sebagai hasil akhirdari penelitian.
Penerapan  pendekatan  kualitatif  dengan  pertimbangan  kemungkinan  data  yang  diperoleh  di lapangan berupa data dalam bentuk fakta yang perlu adanya analisis secara mendalam. Maka pendekatan  kualitatif  akan  lebih  mendorong  pada  pencapaian  data  yang  bersifat  lebih mendalam  terutama  dengan  keterlibatan  peneliti  sendiri  di  lapangan.  Dalam  penelitian kualitatif,  peneliti  menjadi  instrument  utama  dalam  mengumpulkan  data  yang  dapat berhubungan langsung dengan instrument atau objek penelitian.
Penelitian  ini  menggunakan  sebuah  metodologi  untuk  membangun  sistem  yaitu  model Waterfall.  Metode waterfall merupakan satu  dari sekian jenis model pengembangan aplikasi yang  termasuk  dalam  siklus  hidup  klasik  yang  menekankan  pada  urutan  dan  tahap  sistem secara  terstruktur  dan  sistematis.  Untuk  model  pengembangan  ini  mirip  dengan  air  terjun, dimana  setiap  tahapan  dijalankan  secara berurutan  dari  atas  ke  bawah.    Model  ini  memiliki beberapa tahapan didalamnya, yaitu :

## 1. Analisis Kebutuhan (Requirement)
Analisis  kebutuhan  untuk  memahami  perangkat  lunak  yang  diharapkan  oleh  pengguna  dan batasan perangkat lunak tersebut. Pada tahap ini terdapat proses pengumpulan data. Informasi yang didapat kemudian dianalisis untuk mendapatkan data yang dibutuhkan oleh pengguna. Untuk  pengumpulan  data  yang  konkrit  peneliti  melaksanakanbeberapa  teknik  pengumpulan data, sebagai berikut:

## a. Observasi
Observasi  adalah  teknik  pengumpulan  data  yang  dilakukan  melalui  pengamatan,  dengan disertai  pencatatan-pencatatan  terhadap  keadaan atau  perilaku  obyek  sasaran.  Dalam  hal  ini peneliti melakukan pengamatan langsung ke Toko Bangunan Sinar Berkah Agung mengenai proses persediaan barang dan pencatatan manual transaksi penjualan.
b. Wawancara Wawancara merupakan metode pengumpulan data dengan cara bertanya langsung(berkomunikasi  langsung)  dengan  responden.  Dalamberwawancara  terdapat  proses interaksi antara pewawancara dengan respoden. Peneliti akan mewawancara pemilik toko dan karyawan  terkait  permasalahan  yang  dialami,  dan  kebutuhan-kebutuhan  dalam  proses perancangan sistem persediaan barang dan pencatatan transaksi.
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com

## 2. Perancangan Sistem (Software Design)
Tahap ini merupakan tahap perancangan sistem yang bertujuan untuk memberikan gambaran lengkap  tentang  apa  yang  harus  dikerjakan  dan  bagaimana  membuat  sistem  seperti  yang diinginkan pengguna. Berikut merupakan proses yang akan dilakukan :
a. Perancangan Alur Proses Sistem b. Perancangan Basis Data c. Perancangan Antarmuka

## 3. Implementasi (Implementation)
Tahap  ini  berisi  tentang  hasil  dari  perancangan  yang  akan  diterjemahkan  kedalam  sebuah bahasa  yang  bisa  dibaca  oleh  komputer  yaitu  bahasa  pemrograman.  Dalam  hal  ini  peneliti menggunakan bahasa pemrograman PHP, HTML, dan CSS.
Pengujian Program (System Testing)
Pada  tahap  ini  peneliti  melakukan  pengujian  terhadap  sistem  dan  desain  yang  yang  telah dibuat. Pengujian ini bertujuan untuk mengetahui apakah sistem tesebut sudah sesuai dengan yang diinginkan oleh pengguna dan apakah masih terdapat kesalahan atau tidak.

## 4. Pemeliharaan (Maintenance)
Pada tahap ini sistem yang sudah dibuat bisa dijalankan atau dioperasikan oleh penggunanya, setelah itu akan dilakukan pemeliharaan. Pemeliharaan yang dilakukan terkait dengan hal-hal berikut  seperti  perbaikan  kesalahan,  perbaikan  implementasi  unit  sistem  atau  peningkatan jasa sistem sesuai kebutuhan baru.

## IV. HASIL DAN PEMBAHASAN
Analisa  kebutuhan  adalah  suatu  proses  untuk  mendapatkan  informasi  spesfikasi  tentang perangkat  lunak  yang  diinginkan.  Analisa  kebutuhan  yang  dilakukan  terhadap  perangkat lunak akan menghasilkan spesifikasi perangkat lunak yang diantara lain sebagai berikut :

## 1. Analisa Kebutuhan
a.    Super Admin
-     Memiliki akun untuk login. -     Memiliki akun untuk mengganti password.
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
-          Memiliki  akses  untuk  mengoprasikan  master  produk,  master  keranjang,  data  transaksi dan master laporan.
-     Memiliki akses untuk membuat user baru.
-     Memiliki akses untuk konfigurasi toko.
b.    Admin
-      Memiliki akun untuk login
-      Memiliki akses untuk mengganti password dan email
-      Memiliki akses untuk master produk, master keranjang, data transaksi dan master laporan.

## 2. Design (Perancangan)
a. Flowchart Sistem
Gambar 1. Flowchart Sistem
Pada  gambar  1.  merupakan  penjelasan  alur  tentang flowchart antara customer dan  kasir, dalam  menentukan  alur  pemesananproduk  dari  pemesanan  produk  hingga  alur  pembayaran dan penerimaan barang.
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
b. Flowchart Super Admin
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com

## Gambar 2. Flowchart Super Admin
Pada gambar 2.  merupakan penjelasan alur flowchart superadmin dalam menentukan proses login yang  digunakan  oleh admin  agar  masuk  kedalam  sistem  program,  dengan  melakukan verifikasi username dan password , merupakan proses untuk hak akses pada sistem sehingga admin dapat menggunakan sistem tersebut untuk melakukan tugas sebagai superadmin.
c. Use Case Diagram Sistem Super Admin
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Gambar 3. Use Case Diagram Super Admin
Use  case diagram  diatas  menggambarkan  interaksi antara  superadmin  dan  sistem. Use  case ini  menggambarkan  proses-proses  dan  hubungan  yang  terjadi antara  superadmin  dan  sistem program  di  dalam  sistem  yang  diusulkan.  Diagram use  case sistem  yang  diusulkan melakukan aktifitas seperti menambah produk, melakukan laporan dan melakukan transaksi.
d. Class Diagram
Gambar 4. Class Diagram
Berdasarkan  gambar  4.  adalah  gambar Class  diagram,  Class  diaram merupakan  gambaran struktur  yang  terlihat  dari  sistem. Seperti  gambar  4.  terdapat  5  tabel  yaitu user ,  transaksi, produk, katagori produk, barang masuk dan keranjang.
e. Activity Diagram Login
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
User melakukan login, kemudian sistem akan memverifikasi username dan password yang di masukan user sebagai aktor. Seperti pada gambar 5. ini adalah Activity Diagram login yang diusulkan login untuk semua aktor untuk masuk ke dalam sistem program.
f. Rancangan Tampilan Login
Gambar 6. Rancangan Tampilan Login
Rancangan  tanpilan  login  digunakan  untuk  pada  saat  pertama  kali  user  menjalankan  sistem maka  terlebih  dahulu  harus  melakukan  login  dengan  mengisikan  username  dan  password masing-masing.  Jika  username  dan  password  yang  diisikan  benar,  maka  sistem  akan menampilkan menu utama sesuai dengan hak akses.
g. Rancangan Tampilan Dashboard Superadmin
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Gambar 7. Rancangan Tampilan Dashboard Superadmin
Rancangan  tampilan Dashboard superadmin  digunakan  untuk  pada  saat  pertama  kali user menjalankan  sistem  maka  terlebih  dahulu  harus  melakukan  login  dengan  mengisikan username dan password masing-masing.  Jika username dan password yang  diisikan  benar, maka sistem akan menampilkan menu utama sesuai.

## h. Rancangan Tampilan Data Produk
Gambar 8. Rancangan Tampilan Data Produk
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Berdasarkan gambar 8. Halaman ini adalah halaman rancangan master produk, halaman yang menampilkan menu yang dapat diakses oleh semua user . Hasil dari rancangan halaman ini akan dapat menambahkan produk baru.

## i. Rancangan Tampilan Barang Masuk
Gambar 9. Rancangan Tampilan Barang Masuk
Tampilan  gambar  9.  adalah  rancangan  tampilan  barang  masuk  berisi  tentang  tampilan penambahan barang yang baru masuk dari luar.
Gambar 9. Rancangan Tampilan Barang Masuk
j. Rancangan Tampilan Keranjang
Gambar 10. Rancangan Tampilan Keranjang
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Pada  tampilan  ini  terdapat  rancangan  tampilan  keranjang, form ini  berfungsi  untuk  aktor menambahkan barang yang sesuai pilihan customer atau pembeli.
k. Rancangan Tampilan Transaksi

## Gambar 11. Tampilan Transaksi
Berdasarkan  gambar  11.  terdapat  rancangan  tampilan  master  transaksi. Form ini  berfungsi untuk  superadmin  dan  kasir  menambahkan  transaksi  baru. Form ini  dapat  melihat  invoice atautanda bukti melakukan manajemen uang masuk.

## l. Rancangan Master Laporan Penjualan
Gambar 12. Rancangan Master Laporan
Pada  gambar  12  merupakan  perancangan  halaman  tampilan  laporan  penjualan.  Halaman ini berisi  data  data  laporan  yang  akan  dicetak  oleh  superadmin  dan  kasir  tersebut.  Superadmin dan kasir tersebut juga dapat mencetak laporan tersebut berupa pfd atau lainnya.
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
m. Rancangan Master Laporan Barang Masuk
Gambar 13. Master Laporan Barang Masuk
Gambar  13  merupakan  perancangan  halaman  master  laporan  barang  masuk.  Halaman  ini berisi data laporan barang masuk yang akan dicetak oleh superadmin dan kasir pada perhari dan perbulan.

## 3. User Interface
a. Layout Login
Gambar 14. Layout Login
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Layout halaman login merupakan  halaman  utama  user  (superadmin  dan  kasir)  sebelum menggunakan  sistem.  Halaman  ini  berisi  halaman username dan password yang  harus  diisi dengan benar. Halaman login dapat dilihat pada gambar 14.

## b. Layout Dashboard SuperAdmin
Gambar 15. Layout Dashboard Superadmin
Tampilan dashboard superadmin  pada  gambar  15.  yang  akan  sering  digunakan  meliputi menu master produk, master keranjang, data transaksi, menbambahkan user baru dan master laporan. Menu tersebut dapat berfungsi untuk mengatur produk atau transaksi secara lengkap dengan tampilan yang ada.
c. Layout Data Produk
Gambar 16. Layout Data Produk
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Pada  gambar  16.berisi  tentang  data  produk  yang  menjelaskan  tentang  setiap user dapat menambahkan  nama  produk,  katagori  produk,  harga  jual  produk,  status  produk.  Untuk tampilan  setiap  user  dapat  melihat  tampilan  tanggal input, diproses  oleh  dan  aksi  untuk merubah jika terjadi kesalahan saat input awal.

## d. Layout Data Barang Masuk
Gambar 17. Layout Master Barang Masuk
Gambar  17.  berisi  tentang  data  barang  masuk  yang  menjelaskan  tentang  setiap  user  dapat menambahkan  barang  masuk.  Yang  berisikan  nama  katagori,  nama  produk,  banyaknya produk, harga beli sartuan, diproses oleh dan tanggal input.

## e. Layout Data Keranjang
Gambar 18. Layout Data Keranjang
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Halaman  master  keranjang  gambar  18.  ini  merupakan  halaman  yang  akan  muncul jika user mengklik  buat  keranjang  baru.  Dihalaman  ini user dipersilahkan  untuk  mengisi  barang  apa saja yang dipilih atau beli oleh pelanggan.

## f. Layout Data Transaksi
Gambar 19. Layout Data Transaksi
Pada  halaman  master  transaksi  gambar  19.  ini  merupakan  halaman  yang  akan  muncul  jika user mengklik check out pada saat master keranjang. Dihalaman ini user dipersilahkan untuk melihat  tanggal  transaksi,  kode  keranjang, qty yang  dibel,  total  harga,  diproses  oleh  dan melihat invoice barang.
g. Layout Master Laporan Penjualan
Gambar 20. Layout Master Laporan Penjualan
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Halaman  gambar  20  menu layout master  laporan  yang  berisi  tentang  data  dari  laporan penjualan  perhari  dan  perbulan.  Laporan  ini  bisa  disimpan  dan  dicetak  untuk  setiap user dalam bentuk file pdf.

## 4. Pembahasan Dan Analisis
Pada  bab  ini  peneliti  akan  menguraikan  mengenai  hasil  penelitian  dan  pembahasan  melalui analisis  dan  pembahasan.  Hasil  pembahasan  dan  analisis  penelitian  ini  diperoleh  dengan wawancara  yang  mendalam  dengan  informan  dalam  bentuk  observasi  langsung  dan  apabila datanya  sudah  terkumpul  kemudian  dianalisis.  Dalam  proses  pengembangan  untuk mendapatkan  pembasahan  dan  analisis  yang  ektif,  untuk  itu  peneliti  melakukan  kegiatan seperti  analisis  pada  setiap  uji  coba  dengan  menggunakan  perangkat  sistem  yang  telah disusun dan dikembangkan serta instrumen-instrumen sebagai alat ukur keefektifan perangkat pembelajaran dengan aturan dan kriteria sistem yang cocok untuk program ini.

## V. KESIMPULAN
Berdasarkan  penerapan  dan  pengujian  aplikasi  pada  Toko  Bangunan  Sinar  Berkah  Agung pada proses pembelian dan data pelanggan dapat disimpulkan bahwa :
1.  Dengan  adanya  sistem  ini  dapat  mempermudah  proses  penjualan  karena  transaksi  yang dilakukan di bantu dengan system yang terkomputerisasi.
2. Dengan adanya sistem ini membuat admin menjadi lebih mudah dalam membuat laporan.
3. Dengan adanya sistem ini dapat membuat kasir mengetahui jumlah stok yang tersedia secara cepat dan realtime.

## REFERENSI
[1] A. C. Nasution, V. Yasin, M. Zarlis, and E. Elviwani, “Manajemen Sistem Pengolahan Data Akademik Terintegrasi Berbasis Business Inteligence Dengan Metode Grid Data,” in Prosiding Seminar Nasional Riset Information Science (SENARIS) , 2022, vol. 4, no. 2, pp. 251–258. doi: http://dx.doi.org/10.30645/senaris.v4i2.234.
[2] F. Kesumaningtyas and R. Handayani, “Perancangan Sistem Pakar Diagnosa Penyakit Ayam Dengan Metode Forward Chaining,” J I M P - J. Inform. Merdeka Pasuruan , vol. 1, no. 2, pp. 59–63, 2020, doi:
10.37438/jimp.v1i2.21.
[3] T. Hidayat and M. Muttaqin, “Pengujian Sistem Informasi Pendaftaran dan Pembayaran Wisuda Online menggunakan Black Box Testing dengan Metode Equivalence Partitioning dan Boundary Value Analysis,” J. Tek. Inform. UNIS JUTIS , vol. 6, no. 1, pp. 2252–5351, 2018.
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed)
Vol.6 No.2,  Desember  2022
Journal of Information System, Informatics and Computing Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
[4] P. E. S. dan L. S. Sudjiman, “KOMPUTER DALAM PROSES PENGAMBILAN KEPUTUSAN Paul Eduard Sudjiman dan Lorina Siregar Sudjiman COMPUTER BASED MANAGEMENT INFORMATION SYSTEM,” J. TeIKa, vol. 8, pp. 55–67, 2018.
[5] M. R. Yanuarsyah, M. Muhaqiqin, and ..., “Arsitektur Informasi Pada Sistem Pengelolaan Persediaan Barang (Studi Kasus: Upt Puskesmas Rawat Inap Pardasuka Pringsewu),” J. Teknol. dan … , vol. 2, no. 2, pp. 61–68, 2021.
[6] M. A. Swasono and A. T. Prastowo, “Pengendalian Persediaan Barang,” vol. 2, no. 1, pp. 134–143, 2021.
[7] M. F. Zulkarnaen, M. R. Artawan, and M. T. A. Zaen, “Jurnal Ilmiah IKIP Mataram,” J. Ilm. IKIP Mataram | , vol. 8, no. 1, p. 2021, 2021.
[8] A. Sitorus, Maria Christina & Kuriawan, “Pengaruh Penjualan Tunai Dan Penjualan Kredit Terhadap Profitabilitas Perusahaan Pada PD Gloria Bandung,” J. Financ. , vol. 2, no. 1, pp. 13–23, 2021.
[9] M. Sholeh, R. Y. Rachmawati, and E. Susanti, “Pemodelan Basis data Graph dengan Neo4j (Studi Kasus : Basis Data Sistem Informasi Penjualan pada UMKM),” J. Teknol. Inf. dan Terap. , vol. 7, no. 1, pp. 25–32, 2020, doi: 10.25047/jtit.v7i1.129.
[10] M. Septiani, R. Aulianita, V. Sofica, and N. Hasan, “Sistem Informasi Penjualan Kayu Kusen Berbasis Website,” Bianglala Inform. , vol. 9, no. 2, pp. 103–107, 2021, doi: 10.31294/bi.v9i2.11603.
[11] E. N. Hartiwati, “Aplikasi Inventori Barang Menggunakan Java Dengan Phpmyadmin,” Cross-border , vol. 5, no. 1, pp. 601–610, 2022.
[12] M. Angelin and H. P. Prasetiya, “Sistem Informasi Manajemen pada Toko Bangunan (Studi Kasus: TB Al- haidar Kabupaten Malang),” Pros. Semin. Nas. Univ. Ma Chung , vol. 1, pp. 44–60, 2021, doi: 10.33479/snumc.v1i.223.
[13] Sudaria, A. S. Putra, and Y. Novembrianto, “Sistem Manajemen Pelayanan Pelanggan Menggunakan PHP Dan MySQL ( Studi Kasus pada Toko Surya ),” Tekinfo , vol. 22, no. 1, pp. 100–117, 2021.
[14] Aipina D and Witriyono H, “Pemanfaatan Framework Laravel Dan Framework Bootstrap Pada Pembangunan Aplikasi Penjualan Hijab Berbasis Web,” J. Media Infotama , vol. 18, no. 1, pp. 18–87, 2021.