Vol. 4 No. 2 (Oktober 2020)

## SISTEM INFORMASI LAPORAN PENJUALAN BERBASIS WEBSITE PADA PT. WIDYA WASKITA WIJAYA CABANG CILACAP

## Carolina Ety Widjayanti
Program Studi Komputerisasi Akuntansi, STIKOM Yos Sudarso, Purwokerto, Indonesia Email: carolinaety@stikomyos.ac.id
DOI: https://doi.org/10.46880/jmika.Vol4No2.pp156-167

## ABSTRACT
PT.  Widya  Waskita  Wijaya  Cilacap  Branch  is  an  official  agent  of  PT.  Pertamina  (Persero)  which  is headquartered in Semarang. This company is engaged in the sale of non-subsidized fuel for the industrial sector, transportation, contractors, mining, plantations, ships, and so on. The main problems that exist at PT. Widya Waskita Wijaya Cilacap Branch is a fuel sales reporting process that uses a document delivery agent so it takes several days to get to the Semarang head office. With this problem, the Semarang head office wanted a web- based information system that could speed up the reporting process of fuel sales from the Cilacap branch office to  the  Semarang  head  office.  The  system  development  method  used  is  the  waterfall  model  with  system development tools in the form of context diagrams, DFD, normalization, and ERD. Meanwhile, the making of this information system uses the PHP programming language, using Dreamweaver software as the editor and Navicat as the database. By using this information system, the process of making fuel bidding letters and fuel sales receipts is more effective and accelerates the reporting process of fuel sales to the Semarang head office. Keyword: Information Systems, Sales Reports, Waterfall Model, Web Based.

## ABSTRAK
PT. Widya Waskita Wijaya Cabang Cilacap merupakan agen resmi dari PT. Pertamina (Persero) yang berkantor pusat di Semarang. Perusahaan ini bergerak di bidang penjualan bahan bakar non subsidi untuk sektor industri, transportasi,  kontraktor,  pertambangan,  perkebunan,  kapal  dan  lain sebagainya. Permasalahan utama yang ada pada  PT.  Widya  Waskita  Wijaya  Cabang  Cilacap  adalah  proses  pelaporan  penjualan  bahan  bakar  yang menggunakan  agen  pengiriman  dokumen  sehingga  memerlukan  waktu  beberapa  hari  untuk  sampai  ke  kantor pusat Semarang. Dengan adanya masalah ini, maka kantor pusat Semarang menginginkan adanya suatu sistem informasi  berbasis  web  yang  dapat  mempercepat  proses  pelaporan  penjualan  bahan  bakar  dari  kantor  cabang Cilacap  ke  kantor  pusat  Semarang.  Metode  pengembangan  sistem  yang  digunakan  adalah  model waterfall dengan  alat  bantu  pengembangan  sistem  berupa  diagram  konteks,  DFD,  normalisasi,  dan  ERD.  Sedangkan pembuatan sistem informasi ini menggunakan bahasa pemrograman PHP, menggunakan software Dreamweaver sebagai editornya dan Navicat sebagai  database-nya.  Dengan  menggunakan  sistem  informasi  ini,  maka  proses pembuatan  surat  penawaran  bahan  bakar  dan  kwitansi  penjualan  bahan  bakar  lebih  efektif  serta  mempercepat proses pelaporan penjualan bahan bakar ke kantor pusat Semarang.
Kata Kunci: Sistem Informasi, Laporan Penjualan, Model Waterfall, Berbasis Web.

## PENDAHULUAN
Dalam  era  globalisasi  seperti  ini,  teknologi informasi  berkembang  dengan  cepat,  seiring  dengan kebutuhan  manusia  yang  terus  bertambah.  Manusia mengenal  teknologi  yang  semakin  maju  untuk mempermudah melakukan kegiatan dalam kehidupan. Saat  ini  kita  telah  mengenal  suatu  teknologi  canggih yang  disebut  dengan  internet.  Dengan  menggunakan internet  kita  dapat  terhubung  satu  sama  lain  dalam berbagai  negara  yang  berbeda.  Internet  dapat mempermudah komunikasi dan penyampaian informasi  yang  dibutuhkan  manusia  tanpa  mengenal
jarak dan waktu.
Pada  saat  ini  peran  sistem  informasi  dalam perusahaan  cukup  penting.  Banyak  perusahaan berlomba-lomba untuk meningkatkan sistem informasinya  karena  dengan  sistem  informasi perusahaan  dapat  meningkatkan  efektifitas  dan efisiensi  proses  bisnis,  salah  satunya  adalah  sistem informasi berbasis web . Dengan menggunakan sistem informasi  berbasis web ,  perusahaan  dapat  dengan mudah  memasarkan  produknya  secara  luas  sehingga keuntungan perusahaan dapat meningkat. Tidak hanya memudahkan pemasaran produk, dengan
Vol. 4 No. 2 (Oktober 2020)
ISSN: 2620-4339 (media online)
menggunakan  sistem  informasi  berbasis web ,  maka perusahaan  dapat  menghemat  biaya  operasional  dan memudahkan  pelaporan  proses  bisnis  karena  dapat diakses kapan saja dan di mana saja.
PT.  Widya  Waskita  Wijaya  Cabang  Cilacap merupakan  agen  resmi  dari  PT.  Pertamina  (Persero) yang  berkantor  pusat  di  Semarang.  Perusahaan  ini bergerak di bidang penjualan bahan bakar non subsidi untuk  sektor  industri,  transportasi,  kontraktor, pertambangan, perkebunan, kapal dan lain sebagainya.
Dalam  melakukan  kegiatannya,  PT.  Widya Waskita  Wijaya  Cabang  Cilacap  masih menggunakan sistem  manual  baik  dalam  pembuatan  semua  jenis surat, pembuatan kwitansi, pencatatan pemasukan dan pengeluaran kas, perhitungan harga jual bahan bakar, penyimpanan  data  yang  berkaitan  dengan  penjualan, maupun  dalam  pelaporan  informasi  penjualan  ke kantor  pusat  Semarang.  Pembuatan  semua  jenis  surat dan  pembuatan  kwitansi  dilakukan  menggunakan Microsoft Word dengan cara mengetik secara manual. Segala pemasukan dan pengeluaran kas yang terjadi di perusahaan  dicatat  dan  dihitung  secara  manual menggunakan Microsoft  Excel .  Untuk  menentukan harga  jual  bahan  bakar  PT.  Widya  Waskita  Wijaya Cabang  Cilacap  masih  menggunakan  kalkulator  dan data  yang  berkaitan  dengan  penjualan  bahan  bakar disimpan  secara  manual  dalam Microsoft  Excel . Pelaporan informasi penjualan bahan bakar ke kantor pusat  Semarang  dilakukan  melalui  agen  pengiriman dokumen  sehingga  membutuhkan  waktu  dan  biaya yang  cukup  banyak.  Hal  ini  tentunya  tidak  efektif karena  waktu  yang  dibutuhkan  sekitar  2-4  hari  agar dokumen  tersebut  dapat  sampai  di  kantor  pusat Semarang  dan  sangat  beresiko  dalam  hal  kerahasiaan dokumen.  Oleh  karena  itu  kantor  pusat  Semarang menginginkan  suatu  aplikasi  yang  dapat  memantau banyaknya  penjualan  bahan  bakar  di  kantor  cabang Cilacap yang dapat dilakukan kapan saja dan di mana saja.
Dengan  adanya  sistem  informasi  berbasis web ,  maka akan memudahkan kantor pusat Semarang dalam memantau penjualan yang ada di kantor cabang Cilacap.  Dengan  demikian,  PT.  Widya  Waskita Wijaya Cabang Cilacap dapat mengurangi biaya yang dikeluarkan  dan  waktu  yang  dibutuhkan  dalam pelaporan penjualan ke kantor pusat.

## KAJIAN LITERATUR Penelitian Sebelumnya
Penelitian  yang  dilakukan  oleh  Farhan  dan Nuraini  tentang  Sistem  Informasi  Penjualan  Berbasis Web  Pada  PT.  Mustika  Jati  bahwa  kegiatan  bisnis yang  dilakukan  kurang  terstruktur  dan  bersifat
konvensional  terutama  pada  saat  proses  pembuatan laporan  penjualan  dan  unsur-unsur  yang  terlibat  di dalamnya.  Sehingga  perusahaan  membutuhkan  suatu sistem  informasi  sebagai  alat  bantu  pencatatan  data, pengolahan  data,  dan  melakukan  integrasi  data. Metode  pengembangan  yang  digunakan  untuk merancang  sistem  menggunakan  pendekatan  Rapid Application  Development  (RAD).  Hasil  dari penelitian  ini  berupa  Sistem  Informasi  Penjualan  PT. Mustika  Jati  berbasis  web  yang  mampu  melakukan pencatatan,  pengolahan,  dan  mengintegrasi  data  serta menjadi  tempat  penyimpanan  data  yang  terstruktur sehingga  dapat  meningkatkan  efektifitas  dan  efisiensi kinerja  maupun  waktu.  Berdasarkan  hasil  pengujian dan  evaluasi  dari  penelitian,  sistem  yang  telah dibangun  mampu  memberikan  informasi  lengkap mengenai  penjualan,  stok  barang,  dan  pelanggan  di PT. Mustika Jati (Ramdhan & Purwandari, 2018).
Sedangkan pada penelitian berjudul penerapan  CRM  pada  sistem  informasi  pemesanan dan  penjualan  pada  toko  buku  Gapura  berbasis  web didapatkan  kesimpulan  bahwa  penerapan  sistem informasi  memberikan  laporan  penjualan  dan  income yang  cepat  (Tambunan,  Manalu,  &  Naibaho,  2018). Penelitian  lainnya  yang  berjudul  Sistem  informasi penjualan  berbasis  web  pada  PT.  Cahaya  Sejahtera Sentosa  Blitar,  yang  merupakan  sistem  informasi penjualan  online  tiwul  instan  pada  PT.  Cahaya Sejahtera  Sentosa  Blitar.  Kegiatan  jual  beli  yang masih  manual  dan  pemasaran  serta  promosi  yang masih  terbatas  untuk  itu  diperlukan  sebuah  sistem informasi  yang  dapat  memperluas  pemasaran  dan mempermudah  transaksi  penjualan  sehingga  lebih hemat,  cepat  dan  mudah  tanpa  terhalang  oleh  jarak dan  waktu.  Pembuatan  program  web  ini  bermanfaat bagi  masyarakat  yaitu  dapat  malakukan  pemesanan dan  pembelian  produk  tiwul  Instan  melalui  internet dengan  cepat  dan  mudah.  Dengan  adanya  aplikasi sistem  informasi  pemesanan  produk  ini  dapat memudahkan  pelanggan  dalam  pencarian  informasi tiwul  instan  dengan  pemesanan  produk  yang  cukup mudah  dengan  bergabung  menjadi  pelanggan  atau member  di  dalam  sistem  informasi  ini  dan pembayaran dilakukan melalui transfer bank (Prasetyo & Susanti, 2016).

## METODOLOGI PENELITIAN
Dalam  mengembangkan  sistem  penulis menggunakan metode waterfall atau model alur hidup klasik  ( classic  life  cycle ).  Metode waterfall menyediakan  pendekatan  alur  hidup  perangkat  lunak secara  sekuensial  atau  terurut  dimulai  dari  analisis, desain  sistem,  pengkodean  sistem,  uji  coba  program,
Vol. 4 No. 2 (Oktober 2020)
dan  implementasi  sistem  (Sukamto  &  Shalahuddin, 2015). Berikut adalah gambar model waterfall :
Gambar 1. Ilustrasi Model Waterfall 1. Analisis
Analisis  digunakan  dengan  maksud  untuk mengidentifikasi  dan  mengevaluasi  masalah  yang terjadi dan kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikannya.
2. Desain Sistem
Desain  sistem  adalah  persiapan  rancang bangun yang menggambarkan bagaimana suatu sistem dibentuk.  Desain  sistem  berupa  penggambaran  dan pembuatan sketsa.
3. Pengkodean Program
Menerjemahkan  hasil  proses  perancangan menjadi  sebuah  bentuk  program  komputer  yang dimengerti oleh mesin komputer.
4. Uji Coba Sistem Ujicoba software merupakan  elemen  yang kritis  dari  SQA  ( Software  Quality  Assurance) dan mempresentasikan  tinjauan  ulang  yang  menyeluruh terhadap spesifikasi, desain dan pengkodean. Ujicoba digunakan  untuk  mengevaluasi apakah terdapat error pada program atau tidak.
5. Implementasi Sistem.
Tahap  implementasi  adalah  tahap  dimana semua  elemen  dan  aktivitas  sistem  disatukan  dengan langkah-langkah sebagai berikut:
a. Menyiapkan Fasilitas Fisik. Fasilitas-fasilitas  fisik  yang  disiapkan  antara lain  komputer  dan peripheral -nya,  termasuk keamanan fisik untuk menjaga berlangsungnya peralatan dalam jangka waktu yang lama.
b. Menyiapkan Pemakai. Pemakai  disiapkan  dengan  terlebih  dahulu yaitu  dengan  memberikan  pelatihan  secara prosedural  maupun  tutorial  mengenai  sistem informasi  sesuai  fungsi  tugasnya.  Tujuannya adalah  agar  para  pemakai  mengerti  dan mengusai  operasi  sistem  dan  cara  kerja  sistem serta apa saja yang diperoleh dari sistem.
c. Melakukan Simulasi Kegiatan  simulasi  berupa  pengujian  sistem secara  nyata  yang  melibatkan  personil  yang
sesungguhnya.
Analisis Sistem yang Sedang Berjalan Berdasarkan hasil pengamatan dan wawancara  yang  telah  dilakukan  di  PT.  Widya Waskita  Wijaya  Cabang  Cilacap,  kegiatan  penjualan bahan bakar masih menggunakan sistem manual baik dalam menghitung harga jual bahan bakar, pembuatan surat  penawaran,  mencatat  transaksi  penjualan,  dan pelaporan  penjualan  bahan  bakar  ke  kantor  pusat Semarang.
Pertama,  surat  penawaran  dibuat  dengan mencantumkan  harga  jual  bahan  bakar  yang ditawarkan  dan  diberikan  kepada  para  pelanggan. Harga jual bahan bakar yang akan ditawarkan dihitung terlebih  dahulu  menggunakan  kalkulator,  setelah  itu surat  penawaran  diketik  secara  manual.  Dengan menggunakan Microsoft  Word. Pelanggan  yang  akan memesan  bahan  bakar  harus  melampirkan  surat pesanan beserta surat penawaran yang telah diberikan oleh  PT.  Widya  Waskita  Wijaya  Cabang  Cilacap. Setelah  surat  pesanan  dan  surat  penawaran  diterima oleh  PT.  Widya  Waskita  Wijaya  Cabang  Cilacap, bahan  bakar  yang  dipesan  pelanggan  akan  segera  di proses  ke  PT.  Pertamina  (Persero)  dan  selanjutnya akan  dikirim  ke  alamat  tujuan.  Bahan  bakar  dikirim dengan melampirkan faktur penjualan untuk diberikan kepada  pemesan.  Faktur  penjualan  tersebut  dibuat secara manual dengan diketik menggunakan Microsoft Word .  Data  penjualan  bahan  bakar  direkap menggunakan Microsoft  Excel. Pembuatan  laporan penjualan  juga  masih  manggunakan Microsoft  Word. Proses pelaporan penjualan bahan bakar kepada kantor pusat  Semarang  menggunakan  agen  pengiriman dokumen.
Entitas  pelanggan  mendapatkan output berupa  surat  penawaran  dan  faktur  penjualan  dari entitas  admin  &  kasir.  Entitas manager cabang Cilacap meng- input data user dan mendapatkan output laporan  penjualan  bahan  bakar  dari  entitas  admin  & kasir.  Entitas  direktur  Semarang  mendapat output laporan  penjualan  bahan  bakar  dari  entitas manager cabang Cilacap.

## Deskripsi Sistem yang Akan Dibangun
Sistem informasi yang akan dibangun penulis adalah  sistem  informasi  berbasis web untuk mempercepat proses pelaporan penjualan bahan bakar kantor  cabang  Cilacap  ke  kantor  pusat  Semarang. Sistem ini tidak hanya mempercepat proses pelaporan penjualan  saja,  tetapi  juga  mempercepat  perhitungan harga  jual  bahan  bakar,  pembuatan  surat  penawaran, dan pembuatan faktur penjualan.
Vol. 4 No. 2 (Oktober 2020)
Bagian  yang  berperan  penting  dalam  sistem ini  adalah  admin  &  kasir  dan manager cabang Cilacap.  Admin  &  kasir  bertugas  untuk  meng input data pelanggan, data harga jual bahan bakar, transaksi penjualan,  pembuatan  surat  penawaran,  pembuatan faktur  penjualan,  dan  pembuatan  laporan  penjualan. Manager Cabang  Cilacap  bertugas  untuk  meng- input data user dan  mengoreksi  laporan  penjualan  yang telah dibuat oleh admin dan kasir sebelum dikirim ke Direktur Semarang.
Data Flow Diagram (DFD)
Menurut  Dengen  dan  Hatta  (2009:49) Data Flow  Diagram (DFD)  merupakan  alat  permodelan dari  proses  analisis  kebutuhan  perangkat  lunak.  DFD menjelaskan  gambaran  dari  mana  data  masuk  dan dimana  data  akan  disimpan.  Sebelum  membuat DFD, terlebih  dahulu  membuat  diagram  konteks  dan  bagan berjenjang.
Gambar 2 Diagram Konteks

## Bagan Berjenjang
Bagan berjenjang pada sistem informasi laporan penjualan pada PT. Widya Waskita Wijaya cabang Cilacap berbasis web dapat dilihat pada gambar berikut:
Normalisasi Normalisasi merupakan proses pengelompokkan data menjadi tabel yang menunjukkan entity dan relasinya. Proses normalisasi selalu  diuji  pada  beberapa  kondisi  seperti  proses menambah (insert) ,  menghapus (delete) ,  mengubah (update) , dan melihat (review) . Normalisasi bertujuan untuk  mengurangi  keanekaragaman  data  dan terjadinya kesalahan dalam proses insert , delete , dan update .

## Bentuk Tidak Normal
Normalisasi bentuk tidak normal merupakan kumpulan  data  yang  dimasukkan  tanpa  mengikuti aturan  tertentu.  Dalam  bentuk  tidak  normal  data dapat saja tidak lengkap atau terduplikasi.
Gambar 4. Normalisasi Bentuk Tidak Normal

## Bentuk Normal Pertama
Normalisasi bentuk normal pertama
mempunyai  ciri-ciri  yaitu  data  dikumpulkan  dalam satu record dan  tidak  ada  atribut  yang  bernilai ganda (multivalue) .
Gambar 5. Normalisasi Bentuk Pertama

## Bentuk Normal Kedua
Sebelum  membuat  normalisasi  bentuk  normal kedua, pastikan bahwa bentuk data telah memenuhi kriteria  bentuk  normal  pertama.  Dalam  bentuk normal kedua setiap field harus mempunyai primary key yang  bersifat  unik  dan  dapat  mewakili  atribut
lain.
Gambar 6. Normalisasi Bentuk Kedua

## Bentuk Normal Ketiga
Pada  normalisasi  bentuk  normal  ketiga terdapat  relasi  untuk  menghubungkan  tiap field . Semua  atribut  yang  bukan primary  key tidak  dapat berelasi  dengan field lain,  dengan  kata  lain  atribut yang  bukan primary  key harus  bergantung  hanya kepada primary key .
Gambar 7. Normalisasi Bentuk Ketiga
Perancangan Sistem Entity Relationship Diagram (ERD) Entity Relationship
Diagram (ERD)
merupakan  gambaran  hubungan  antar  entitas  yang satu  dengan  yang  lain  yang  saling  berhubungan  dan saling  berinteraksi  satu  dengan  yang  lain.  Gambar ERD sebagai berikut:
Gambar 8. Entity Relationship Diagram (ERD)
Desain Tabel
1. Tabel Data User
Tabel  data user mempunyai primary key yaitu id_ user dan  memiliki  fungsi  untuk  menyimpan data user . Tabel 1 . Tabel Data User
Tabel Data User Nama Field Tipe Data Length id_user* varchar 10 Nama varchar 50 Telepon varchar 20 Alamat varchar 50 username varchar 25 password varchar 10 Status varchar 20 2. Tabel Data Status Tabel data status mempunyai primary key yaitu id_status dan memiliki fungsi untuk memisahkan hak akses pada sistem.
Tabel 2. Tabel Data Status
Tabel Data Penjualan Nama Field Tipe Data Length id_kwitansi* varchar 10 id_penawaran varchar 10 tanggal date nama varchar 50 alamat varchar 50 harga_akhir double Liter Int Total double Ppn Int harga_ppn double Pbbkb Int harga_pbbkb double 3. Tabel Data Pelanggan Tabel  data  pelanggan  mempunyai primary key yaitu  id_pelanggan  dan  memiliki  fungsi  untuk menyimpan seluruh data pelanggan.
Vol. 4 No. 2 (Oktober 2020)
Tabel 3. Tabel Data Pelanggan Tabel Data Pelanggan Nama Field Tipe Data Length id_pelanggan* varchar 10 Nama varchar 50 Alamat varchar 50 Pic varchar 50 pbbkb varchar 5 no_tlp Int npwp Int 4. Tabel Data Harga Tabel  data  harga  mempunyai primary key yaitu id_harga  dan  memiliki  fungsi  untuk  menyimpan data harga
Tabel 4. Tabel Data Harga Tabel Data Harga Nama Field Tipe Data Length id_harga* varchar 10 tanggal date harga float 5. Tabel Data Penawaran
Tabel  data  penawaran  mempunyai primary key yaitu  id_penawaran  dan  memiliki  fungsi  untuk menyimpan data surat penawaran bahan bakar.
Tabel 5. Tabel Data Penawaran
` Nama Field Tipe Data Length id_penawaran* varchar 10 id_pelanggan varchar 10 nama varchar 50 alamat varchar 50 Pic varchar 50 diskon int id_harga varchar 10 Ppn int harga_ppn double Pbbkb int harga_pbbkb double Oat double harga_akhir double
6. Tabel Data Penjualan
Tabel  data  penjualan  mempunyai primary key yaitu  id_kwitansi  dan  memiliki  fungsi  untuk menyimpan data transaksi penjualan bahan bakar.
Tabel 6. Tabel Data Penjualan
7.
7.   Tabel Data Invoice
Tabel  data invoice mempunyai primary key yaitu id_ invoice dan  memiliki  fungsi  untuk  menyimpan data faktur penjualan bahan bakar.
Tabel 7. Tabel Data Invoice Tabel Data Invoice Nama Field Tipe Data Length id_invoice* varchar 10 id_kwitansi varchar 10 nama varchar 50 alamat varchar 50 no_po varchar 20 Tanggal date Ppn int harga_ppn double Pbbkb int harga_pbbkb double Liter int harga_akhir double Oat double Total double HASIL DAN PEMBAHASAN Implementasi User Interface Form Login Form  login berfungsi  sebagai  tampilan  awal untuk dapat mengakses form-form yang ada di dalam sistem.
Gambar 8. Tampilan Login
Tabel Data Penjualan Nama Field Tipe Data Length id_kwitansi* varchar 10 id_penawaran varchar 10 tanggal date nama varchar 50 alamat varchar 50 harga_akhir double Liter Int Total double
Ppn Int harga_ppn double Pbbkb Int harga_pbbkb double Oat double
Gambar 9. Tampilan Jika Password/Username Salah
Form Menu Utama Form menu  utama  merupakan form yang menampilkan  seluruh  menu  yang  ada  di  sistem. Setelah user melakukan login dan  berhasil  maka secara  otomatis  langsung  menuju  ke  menu  utama. Menu  utama  yang  akan  tampil  tergantung  dari  status jabatan user .
a. Menu Utama – Admin
Terdapat  menu  8  menu  yang  ditampilkan  pada halaman  menu  utama  –  admin  dan  dapat  diakses oleh  admin  yaitu  data  pelanggan,  data  harga, pembuatan  surat  penawaran,  surat  penawaran all include , surat penawaran rinci, transaksi penjualan bahan bakar, kwitansi penjualan bahan bakar, dan logout .
Gambar 10. Tampilan Menu Utama – Admin
b. Menu Utama – Manager Cilacap Terdapat  menu  10  menu  yang  ditampilkan  pada halaman menu utama – manager Cilacap dan dapat diakses oleh manager Cilacap yaitu data user , data pelanggan, data harga, pembuatan surat penawaran,  surat  penawaran all  include ,  surat penawaran  rinci,  transaksi  penjualan  bahan  bakar, kwitansi penjualan bahan bakar, laporan penjualan bahan bakar, dan logout .
Gambar 11. Tampilan Menu Utama – Manager Cilacap
c. Menu Utama – Direktur Semarang Hanya  menu  laporan  penjualan  bahan  bakar  dan logout yang  ditampilkan  pada  halaman  menu utama  –  direktur  Semarang  dan  dapat  diakses oleh direktur Semarang.
Gambar 12. Tampilan Menu Utama – Direktur Semarang
Form Menu Data User Form ini  berisi  data  yang  dapat  mengakses sistem.  Terdapat  tombol  tambah  data  baru, edit data, hapus data, dan refresh .
Gambar 13. Tampilan Menu Data User
Untuk menambah user baru klik tombol Data
Vol. 4 No. 2 (Oktober 2020)
Baru, maka akan muncul kotak dialog pengisian data user . Isi seluruh kolom data yang diperlukan. Setelah selesai  klik  tombol Save untuk  menyimpan  data  baru dan  tombol Cancel untuk  membatalkannya.  Jika  data yang telah ditambahkan tidak muncul dalam datagrid klik tombol Refresh untuk memperbaharui data.
Gambar 14. Tampilan Tambah Data User Untuk  mengubah  data  yang  telah  disimpan,  caranya pilih  data  yang  akan  diubah  lalu  klik  tombol Edit Data, maka akan muncul kotak dialog seperti gambar di  bawah  ini.  Setelah  data  yang  diinginkan  telah diubah klik tombol Save dan klik tombol Cancel untuk menggagalkannya. Jika data yang diubah tidak muncul dalam datagrid klik  tombol Refresh untuk memperbaharui data.
Gambar 15. Tampilan Edit Data User Untuk  menghapus  data  yang  ada,  caranya pilih  data  yang  akan  dihapus  pada datagrid lalu klik tombol  Hapus  Data,  maka  akan  muncul  kotak  dialog untuk   mengkonfirmasi   apakah  data tersebut benar ingin  dihapus.  Jika  benar  ingin  dihapus  klik  tombol Ok  dan  klik  tombol Cancel untuk  menggagalkan penghapusan  data.  Jika  data  yang  dihapus  masih muncul  dalam datagrid klik  tombol Refresh untuk memperbaharui data.
Gambar 16. Tampilan Hapus Data User
Form Data Pelanggan Form ini  berisi  data  pelanggan  perusahaan. Terdapat  tombol  tambah  data  baru, edit data,  hapus data,  dan refresh .  Terdapat  batasan  hak  akses  pada data pelanggan yaitu jika admin melakukan kesalahan dalam  meng- input -kan  PBBKB,  maka  admin  tidak dapat  mengubahnya.  Yang  dapat  mengubah  PBBKB yang  telah  di- input -kan  hanya manager Cilacap.  Hal ini dilakukan untuk menghindari terjadinya kecurangan  yang  dilakukan  admin  dan  kesalahan dalam  perhitungan  harga  jual  bahan  bakar.  Tarif PBBKB  disesuaikan  dengan  jenis  perusahaan pelanggan.  Tarif  PBBKB  perusahaan  jenis  industri yaitu 0,858%, perusahaan jenis tambang & kapal yaitu 5%, dan perusahaan selain jenis yang telah disebutkan diatas yaitu 0%.
Gambar 17. Tampilan Menu Data Pelanggan
Untuk menambah pelanggan baru klik tombol Data Baru, maka akan muncul kotak dialog pengisian data  pelanggan  baru.  Isi  seluruh  kolom  data  yang diperlukan.  Setelah  selesai  klik  tombol Save untuk menyimpan  data  baru  dan  tombol Cancel untuk membatalkannya.  Jika  data  yang  telah  ditambahkan tidak  muncul  dalam datagrid klik  tombol Refresh untuk memperbaharui data.
ISSN: 2620-4339 (media online)
Gambar 18. Tampilan Tambah Data Pelanggan
Untuk  mengubah  data  yang  telah  disimpan, caranya  pilih  data  yang  akan  diubah  lalu  klik  tombol Edit Data,  maka  akan  muncul  kotak  dialog  seperti gambar  di  bawah  ini.  Setelah  data  yang  diinginkan telah diubah klik tombol Save dan klik tombol Cancel untuk  membatalkannya.  Jika  data  yang  diubah  tidak muncul  dalam datagrid klik  tombol Refresh untuk memperbaharui data.
Gambar 19. Tampilan Edit Data Pelanggan
Untuk  menghapus  data  yang  ada,  caranya pilih  data  yang  akan  dihapus  lalu  klik  tombol  Hapus Data,  maka  akan  muncul  kotak  dialog  untuk mengkonfirmasi  apakah  data  tersebut  benar  ingin dihapus. Jika benar ingin dihapus klik tombol Ok dan klik  tombol Cancel untuk  membatalkan  penghapusan data.  Jika  data  yang  dihapus  masih  muncul  dalam datagrid klik  tombol Refresh untuk  memperbaharui data.
Form Data Harga Form ini  berisi  data  harga  keekonomian bahan  bakar  yang  berlaku  di  pasaran.  Informasi  data harga keekonomian bahan bakar dapat berubah setiap 2 minggu  sekali  yaitu  setiap  tanggal  1  dan  15. Perubahan  harga  ini  sesuai  dengan  ketentuan  PT. Pertamina  (Persero).  Pada form ini  terdapat  tombol tambah data baru, edit data, hapus data, dan refresh .
Gambar 20. Tampilan Menu Data Harga
Untuk  menambah  data  harga  baru  klik tombol  Data  Baru,  maka  akan  muncul  kotak  dialog pengisian data harga baru. Isi seluruh kolom data yang diperlukan.  Setelah  selesai  klik  tombol Save untuk menyimpan  data  baru  dan  klik  tombol Cancel untuk membatalkannya.  Jika  data  yang  telah  ditambahkan tidak  muncul  dalam datagrid klik  tombol Refresh untuk memperbaharui data.
Gambar 21. Tampilan Tambah Data Harga
Untuk  mengubah  data  yang  telah  disimpan, caranya  pilih  data  yang  akan  diubah  lalu  klik  tombol Edit Data,  maka  akan  muncul  kotak  dialog  seperti gambar  di  bawah  ini.  Setelah  data  yang  diinginkan telah diubah klik tombol Save dan klik tombol Cancel untuk  membatalkannya.  Jika  data  yang  diubah  tidak muncul  dalam datagrid klik  tombol Refresh untuk memperbaharui data.
Untuk menghapus data yang ada, caranya pilih data yang akan dihapus lalu klik tombol Hapus  Data, maka  akan  muncul  kotak  dialog  untuk  mengkon- firmasi apakah data tersebut benar ingin dihapus. Jika benar  ingin  dihapus  klik  tombol  Ok  dan  klik  tombol Cancel untuk  membatalkan  penghapusan  data.  Jika data yang dihapus masih muncul dalam datagrid klik tombol Refresh untuk memperbaharui data.
Gambar 23. Tampilan Hapus Data Harga Form Surat Penawaran Pada  menu  transaksi  surat  penawaran  berisi data  pelanggan  yang  akan  digunakan  sebagai  tujuan dikirimnya  surat  penawaran  bahan  bakar.  Terdapat search  engine untuk  memudahkan  pencarian  data pelanggan  yang  akan  digunakan  dalam  surat penawaran.
Gambar 24. Tampilan Menu Transaksi Surat Penawaran
Untuk  membuat  surat  penawaran  terlebih dahulu  memilih  pelanggan  sebagai  tujuan  surat penawaran  akan  dikirim.  Caranya  klik  tombol  Detail pada  pelanggan  yang  telah  dipilih,  maka  secara otomatis  akan  muncul  kotak  dialog  pengisian  data surat penawaran seperti di bawah ini. Setelah seluruh kolom terisi, klik tombol Simpan untuk menyimpannya  dan  klik  tombol  Kembali  untuk membatalkannya.
Gambar 25. Tampilan Form Input Surat Penawaran
Form Penjualan
Pada  menu  transaksi  penjualan  berisi  data pelanggan  yang  membeli  bahan  bakar.  Terdapat search  engine untuk  memudahkan  pencarian  data pelanggan  yang  akan  digunakan  dalam  transaksi penjualan.
Gambar 26. Tampilan Menu Transaksi Penjualan
Untuk melakukan transaksi penjualan terlebih dahulu  memilih  pelanggan  sebagai  pembeli  bahan bakar.  Caranya  klik  tombol  Detail  pada  pelanggan yang telah dipilih, maka secara otomatis akan muncul kotak dialog transaksi penjualan bahan bakar seperti di bawah  ini.  Setelah  seluruh  kolom  terisi,  klik  tombol Simpan  untuk  menyimpannya  dan  klik  tombol Kembali untuk membatalkannya.
Gambar 27. Tampilan Form Input Transaksi Penjualan
Form Surat Penawaran All Include dan Surat Penawaran Rinci
Vol. 4 No. 2 (Oktober 2020)
Pada  menu  laporan  surat  penawaran all include berisi  data  surat  penawaran  yang  telah  di- input -kan  pada  menu  transaksi  penawaran.  Di  dalam form ini  terdapat search  engine untuk  memudahkan pencarian data surat penawaran.
Gambar 28. Tampilan Menu Surat Penawaran All Include dan Surat Penawaran Rinci
Klik  tombol Review pada  data  penawaran untuk  melihat  dan  mengecek  kebenaran  surat penawaran sebelum dicetak. Klik icon print pada pojok kanan atas untuk mencetak surat penawaran.
Gambar 29. Tampilan Surat Penawaran All Include
Gambar 30. Tampilan Surat Penawaran Rinci
Form Kwitansi Penjualan
Pada  menu  pembuatan  kwitansi  penjualan bahan  bakar  berisi  data  penjualan  bahan  bakar  yang telah  di- input -kan  pada  menu  transaksi  penjualan.  Di dalam form ini  terdapat search  engine untuk memudahkan pencarian data penjualan bahan bakar.
Gambar 31. Tampilan Menu Kwitansi Penjualan
Klik  tombol Review pada  data  penjualan bahan  bakar  untuk  melihat  dan  mengecek  kebenaran kwitansi  penjualan  sebelum  dicetak.  Klik icon  print pada  pojok  kanan  atas  untuk  mencetak  kwitansi penjualan.
Gambar 32. Tampilan Kwitansi Penjualan
Form Laporan Penjualan
Pada  menu  laporan  penjualan  bahan  bakar hanya terdapat kolom tanggal dari dan tanggal sampai data penjualan yang akan dicetak.
Gambar 33. Tampilan Menu Laporan Penjualan
Isikan  kolom  dari  tanggal  berapa  dan  kolom sampai  tanggal  berapa  data  penjualan  akan  dicetak. Setelah mengisi range tanggal penjualan bahan bakar yang diinginkan untuk dicetak, klik tombol Cari untuk melihat  dan  mengecek  kebenaran  dari  laporan penjualan bahan bakar.
Vol. 4 No. 2 (Oktober 2020)
ISSN: 2620-4339 (media online)
Gambar 34. Tampilan Laporan Penjualan

## Form Logout
Jika  menu logout diklik,  maka  artinya user telah menutup  sistem  yang  sedang  berjalan  dan  secara otomatis kembali ke tampilan login .
Gambar 35 Tampilan Menu Logout

## KESIMPULAN
Sistem  yang  selama  berjalan  di  perusahaan ini  masih  manual,  terutama  dalam  hal  pengiriman laporan  yang  dikirim  via  Pos  ke  Kantor  Cabang Semarang., sehingga tidak bisa real time diterima oleh Kantor Cabang Semarang.
Berdasarkan  hasil  analisis  dan  pembuatan sistem yang dilakukan, maka dapat disimpulkan bahwa Sistem Informasi Laporan Penjualan Berbasis Website Pada  PT.  Widya  Waskita  Wijaya  Cabang    Cilacap sebagai berikut:
1. Dapat  mempercepat  proses  pembuatan  surat penawaran,  transaksi  penjualan  bahan  bakar,  dan pelaporan  penjualan  bahan  bakar  ke  kantor  pusat Semarang.
2. Membantu  kantor  cabang  Cilacap  dalam menyimpan  data  yang  berkaitan  dengan  transaksi penjualan  seperti  data  pelanggan,  data  harga keekonomian  bahan  bakar,  data  surat  penawaran, dan transaksi penjualan.
3. Dapat  mengurangi  biaya  yang  dikeluarkan  kantor cabang  Cilacap  untuk  proses  pelaporan  ke  kantor pusat Semarang tentang penjualan bahan bakar.
4. Membantu  kantor  pusat  Semarang  dalam melakukan kegiatan pengawasan terhadap
penjualan  bahan  bakar  yang  dilakukan  kantor cabang Cilacap.

## DAFTAR PUSTAKA
Prasetyo, A., & Susanti, R. (2016). Sistem Informasi Penjualan Berbasis Web Pada PT. Cahaya Sejahtera Sentosa Blitar. Jurnal Ilmiah Teknologi Informasi Asia , 10 (2), 1–16.
Ramdhan, F., & Purwandari, N. (2018). Sistem Informasi Penjualan Berbasis Web pada PT. Mustika Jati. Kalbiscientia , 5 (1), 43–57.
Sukamto, R. A., & Shalahuddin, M. (2015). Rekayasa Perangkat Lunak: Terstruktur dan Berorientasi Objek . Bandung: Informatika.
Tambunan, C., Manalu, D. R., & Naibaho, J. F. (2018). Penerapan Customer Relationship Management Pada Sistem Informasi Pemesanan Dan Penjualan Pada Toko Buku Gapura Berbasis Web. Jurnal METHODIKA , 4 (1), 27– 31.