## RANCANG BANGUN SISTEM INFORMASI MANAJEMEN PUJASERA BERBASIS WEB
Ahmad Habib, Skom., MM., 1 , Ardy Rendra Rakasiwi 2
1 Prodi Teknik Informatika, Fakultas Teknik, Universitas 17 Agustus 1945 Surabaya Jl. Semolowaru 45 Surabaya 60118 E-mail : 1 habib@untag-sby.ac.id

## ABSTRAK
Sistem  informasi  manajemen  pujasera  berbasis  web  merupakan  sebuah software berbasis  web yang  pada  dasarnya  difungsikan  untuk  pemesanan  makanan  dan  minuman  pada  sebuah  kantin. Dengan  sistem  informasi  manajemen  pujasera  proses  jual  beli  jadi  lebih  mudah  karena  bisa dilakukan melalui perangkat komputer yang terhubung ke internet. Sebelum bisa melakukan suatu proses  pemesanan,  pembeli  diharuskan  untuk  melakukan  pendaftaran  (bila  belum  menjadi member) dan juga  mengisi token lebih dahulu. Token adalah uang digital  yang digunakan dalam proses  jual  beli  pada  sistem software pujasera.  Sebelum  pemilik  kantin  bisa  menjual  menu makanannya, pemilik kantin diharuskan untuk mendaftarkan kantinnya dan mengisi menu apa saja yang akan dijual supaya member calon pembeli dapat memesan menu makanan atau minuman dari menu  yang  di  sediakan  oleh  kantin  tersebut.  Pemilik  kantin  juga  dapat  mengetahui  pendapatan yang telah diterimanya secara langsung yang dihitung oleh sistem pujasera saat itu juga.
Kata kunci : Sistem informasi manajemen, pujasera, web, internet, token.

## ABSTRACT
Web-based  pujasera  management  information  system  is  a  web-based  software  that  is  basically enabled for ordering food and drinks at a canteen. With pujasera management information system buying and selling process is easier because it can be done through a computer device connected to the internet. Before you can make an order process, buyer is required to register (if not yet become member)  and  also  fill  the  token  first.  Token  is  digital  money  used  in  the  process  of  buying  and selling on pujasera software system. Before the canteen owner can sell his food menu, the cafeteria owner is required to register his canteen and fill out any menu that will be sold so that prospective buyers can order the food or drink menu from the menu provided by the canteen. The owner of the canteen  can  also  know  the  revenue  that  has  been  received  directly  calculated  by  the  system pujasera right away.
Keywords : Management information system, pujasera, web, internet, token.

## PENDAHULUAN
Dalam  kehidupan  sehari-hari  di  era digital  saat  ini  manusia  tidak  lepas  dari peranan suatu teknologi yang dikembangkan  untuk  menjawab  setiap masalah-masalah yang ada dalam kehidupan manusia. Dalam berkomunikasi misalnya  jika  masih  menggunakan  surat untuk  berkirim  kabar  seperti  dulu,  maka terdapat  masalah  jarak    yang  sangat  jauh dan  waktu    yang  lama  lalu  menerima balasan suratnya  juga membutuhkan waktu.  Tetapi  kini  sudah  tidak  menjadi masalah  lagi  karena  adanya  teknologi dalam bidang komunikasi, seperti Telepon dan internet.
Era  internet  mempermudah  setiap manusia  untuk  berkomunikasi  dengan cepat bagaikan menghapus batasan– batasan  antar  Negara  maupun  antar  benua yang jaraknya bisa mencapai puluhan ribu kilometer.  Lalu  dalam  perkembangannya berkomunikasi  tidak  dibatasi  hanya  antara dua  orang  saja,  seperti Yahoo  Conference pada Yahoo Messenger . Seiring perkembangan
internet, pemrograman  web  dari  waktu  kewaktu juga  mengalami  perkembangan  yang pesat. Web saat init idak hanya merupakan sebuah  halaman  online  yang  hanya  dapat dibaca  saja  atau  cenderung web  statis , namun  telah  berkembang  menjadi  web yang lebih dinamis dan interaktif.
Di  dalam  suatu  proses  pembelajaran misalnya,  terdapat  beberapa  masalah seperti  kurangnya  kemampuan  belajar mandiri  dan  daya  serap  dari  para mahasiswa, lalu sistem informasie- learning  pun  diciptakan.  Ada  banyak contoh sistem informasi lain yang berbasis web  seperti e-commerce atau  yang  lebih dikenal sebagai online shop yang digunakan  untuk  mempermudah  manusia dalam  hal  jual  beli  tanpa  harus  keluar rumah. Pada online shop kita bisa menjual barang  dan  membeli  barang  dengan  lebih mudah.
Dalam  berbagai  perkembangannya, online  shop tidak  hanya  menjual  barang atau  jasa saja tapi juga bisa digunakan
untuk  menjual  makanan  atau  minuman pada  sebuah  kantin  seperti  contohnya Pujasera  berbasis  Web.  Bila  seseorang pergike  kantin  untuk  membeli  suatu makanan ataupun minuman, orang tersebut harus  ikut  mengantri  didepan  kasir  dan kadang  merasakan  kekecewaan  karena kantin  tersebut  penuh  oleh  pembeli  yang makan  ditempat,  mendapatkan  kembalian berupa  permen  atau  hal  lain  seperti makanan  atau  minuman  yang  ingin dipesan telah habis terjual.
Untuk manjawab permasalahan tersebut  Pujasera  dapat  dijadikan  sumber informasi  yang  mempermudah  untuk memesan menu makanan ataupun minuman  tanpa  harus  berjalan  kekantin yang  diinginkan  dan  juga  tanpa  harus merasakan antrian yang panjang.[1]

## TINJAUAN PUSTAKA

## A. Deskripsi Sistem
Sistem informasi manajemen pujasera merupakan software yang  berguna  untuk memesan  makanan  atau  minuman  dari sebuah  kantin  yang  telah  terdaftar  melalui sebuah Web  Browser .  Dalam  upaya peningkatan pelayanan dan mempermudah penjualan  makanan  dan  minuman,  ada beberapa  Kantin  yang  menjual  makanan dan minuman melalui internet, bahkan ada yang melalui sms pun juga ada.
Banyak  diantara  pedagang–pedagang makanan  dan  minuman  yang  memanfaat- kan  internet  untuk  memasarkan  makanan dan  minumannya  supaya  cepat  terjual. Namun itu hanya sekedar memasarkannya saja,  pemesanannya  pun  biasanya  harus melalui telepon.
Dalam pembuatannya Software
Pujasera menggunakan bahasa pemrogram- an HTML, CSS, JS, PHP dan SQL sebagai databasenya.[2]

## B. Diagram Konteks
Diagram konteks adalah  diagram alir data dan sebuah informasi yang menggambarkan sistem dalam satu lingkaran  dana  menggambarkan  proses dalam suatu sistem secara keseluruhan.[2]

## Gambar 1. Diagram Konteks Pujasera [3]
Data Flow Diagram adalah penggambaran dari berbagai alur prosesyang terjadi. Bukan Member Kantin Admin Pembeli 1. Registrasi dt_anggota 2. Login Data Login 3. Input Menu Data Login Data Menu Data Kantin 4.Melihat Menu dt_menu Data Kantin Data Pesan 5. Pesan Menu dt_pesan dt_ketpesan 6. Melihat Pesanan Data Pesan Data Pesan Data Kantin Data Kantin 7. Memproses Pesanan 8. Membayar Pesanan Daftar Menu 9. Melihat Laporan Data Registrasi Data Registrasi Data Login Data Menu Data Pembeli Data Kantin Data Pembeli, Data Kantin Data Laporan Data Pembayaran Data Pesanan Data Pesanan Data Pemba yaran Data Pembayaran

## Gambar 2 DFD Level 1 Pujasera
DFD  Level  1  Data  Flow  Diagram (DFD)  level  1  merupakan  pengembangan system  yang  akan  menggambarkan  arus data  yang  akan  dirancang.  Pengembangan sistem  akan  dimulai  dari  proses login hingga proses laporan.
1 DFD Level  2 Proses 1
User  Umum  melakukan  pendaftaran pada system dengan  memilih  sebagai member  atau  kantin  dan  memasukkan nama,  alamat,  no.  telepon,  kata  sandi, no.ktp  dan  juga  file  gambar  KTP.  User Umum  akan  memperoleh  ID  pada  akhir proses ini.
Bukan Member 1.1. Memilih Kategori Pilih Kategori Member dt_anggota 1.2. Mengisikan Nama, Alamat, No Telp, Kata Sandi, No KTP dan Gambar KTP Mengisi data Pendaftaran Data Pendaftaran, File Gambar ID Member 1.3. Menunggu Konfirmasi Admin Menunggu Konfirmasi

## Gambar 3 DFD Level 2 proses1

## 2  DFD Level 2 Proses 2
Pengguna  melakukan  login  pada sistem dengan ID dan password yang telah diberikan,  jika  ID  dan password cocok dengan  data  pada database maka  masing- masing pengguna akan dibawa pada menu masing-masing.
Kantin Admin Pembeli 2.1 Masukkan ID dan Password ID, Password ID, Password ID, Password 2.2 Verifikasi User dt_anggota Data, Login ID, Password 2.3 User Home Page ID, Kategori ID, Password tidak cocok

## Gambar 4 DFD Level 2 Proses 2
3 DFD Level 2 Proses 3
Kantin  melakukan  beberapa  proses seperti  menambah  menu,  mengedit  menu, menghapus serta memeriksa stok menu.
Kantin 3.1 Memasukkan Kategori Menu, Nama, Harga, Keterangan dan Gambar Makanan 3.3 Memeriksa Stok Menu Mengisi Data Menu dt_menu Memeriksa Stok Menu Data Menu, File Gambar stok 3.2 Mengedi atau Menghapust Menu No index No index

## Gambar 5 DFD Level 2 Proses 3

## 4 DFD Level 2 Proses 4
Pembeli  melihat  menu  makanan  dan minuman,  proses  ini  dilakukan  sebelum pembeli memesan menu.
Pembeli
ID Kantin, Kategori Menu 4.1 Memilih Kantin, Kategori Menu Nama Menu, harga, stok dt_menu

## Gambar 6 DFD Level 2 proses 4
5 DFD Level 2 Proses 5
Pembeli melakukan pemesanan menu lalu  system  akan  memeriksa  token  yang dimiliki  pembeli  mencukupi  atau  tidak. Saat  token  yang  dimiliki  mencukupi, sistem  mengirimkan  permintaan  pesanan kepada kantin.
Pembeli 5.1 Memilih Menu No index 5.3 Memesan Menu Data menu 5.2 Periksa stok Menu dan Jumlah Token Data pesanan dt_pesan dt_menu dt_anggota token Harga menu dt_ketpesan Data Pemesanan dt_menu Nama menu, harga, stok, gambar menu Stok kosong atau token kurang Id anggota, no index

## Gambar 7 DFD Level 2 proses 5
6 DFD Level 2 Proses 6
Proses  ini  membatu  kantin  untuk melakukan pengecekan adanya pemesanan atau  tidak. Dimulai dengan id kantin yang digunakan  untuk  menjalankan  proses  cek pesanan  yang  akan  ditampilkan  pada daftar pesan.
Kantin dt_pesan id Kantin 6.1 Memeriksa Pesanan Id kantin, id pesan dt_ketpesan Id pesan 6.2 Menampilkan Pesanan

## Gambar 8 DFD Level 2 proses 6
7 DFD Level 2 Proses 8
Sistem  pada  halaman  milik  pembeli melakukan beberapa proses seperti mengecek  status  pesanan  dari  menu  yang
dipesan. Bila menu telah diterima, pembeli melakukan  proses  pembayaran  sesuai harga pesanannya.
Pembeli 8.1 Memeriksa Status Pesanan Id anggota 8.2 Bayar Pesanan Id pesan, Id kantin dt_ketpesan dt_pesan Id anggota Id_pesan Data ketpesan Data pesan Id pesan, id kantin Id pesan saldo dt_anggota

## Gambar 9 DFD Level 2 proses 8
C. ERD ( Entity Relation Diagram )
Entity Relationsip Diagram merupakan model  data  berupa  notasi  grafis  dalam permodelan data konseptual yang menggambarkan hubungan antara penyimpanan. Model data sendiri merupakan  sekumpulan  cara,  peralatan untuk  mendeskripsikan  data-data  yang berhubungan  satu sama  lain,  serta  batasan konsistensi.  Model  data  terdiri  dari hubungan entitas dan model relasional.
dt_anggota dt_kantin dt_ketpesan dt_pesan dt_menu dt_email Id_anggota tipe_anggota nama alamat no_telp saldo no_ktp ktp gambar konfirmasi mail id email verify tgl id pemilik status profile Id_pesam Id_anggota Tgl_pesan Keterangan_tmp Id_pesan Id_kantin No_index nama kuantitas harga status Id_anggota no_index Nama_menu jenis stok harga keterangan gambar Id_saldo Id_anggota Tgl_beli Id_admin saldo bayar dt_belisaldo Sebagai kantin memiliki 1..1 1..1 Memiliki Melakukan Pemesanan 1..M 1..M M..M M..M Melakukan verifikasi email Memiliki Sebagai Pembeli mengisi token M..1 M..1 M..M M..M M..M M..M
Gambar 10. ERD Pujasera

## D. Struktur Basis Data
Dari  DFD  dan  ERD  diatas  dapat dibuat tabel-tabel beserta tipe data, ukuran dan key nya.  Adapun  tabel-table  yang dihasilkan adalah sebagai berikut:
1 Tabel dt_anggota
2 Tabel dt_kantin 3 Tabel dt_ketpesan 4 Tabel dt_pesan 5 Tabel dt_email 6 Tabel dt_menu
7 Tabel dt_belisaldo 8 Tabel dt_resetkunci 9 Tabel dt_aktifitasemail

## HASIL DAN PEMBAHASAN
A. Implementasi Software dan Hardware Perangkat  keras  yang  digunakan untuk  menguji  coba  system  pujasera  ini memiliki spesifikasi sebagai berikut:
1. ProcessorIntel i3
2. Hardisk 500 GB 3. Memory 6GB 4. Nvidia GEFORCE 610M
Dalam  pembuatan  sistem  Pujasera, selain  perangkat  keras  dibutuhkan  juga beberapa  perangkat  lunak  yang  nantinya akan digunkan dalam proses pembuatannya.  Perangkat  lunak  tersebut adalah: 1. Sistem Operasi Win 10 64 bit 2. Notepad sebagai editor cadangan 3. Notepad ++ sebagai editor web 4. Adobe Dreamweaver sebagai editor web
5. Xampp sebagai web server dan  data
server 6. SQLyog 7. Mozila Firefox sebagai web browser 8. Serta  koneksi  internet  sebagai  media untuk mengakses website dan mengupload file gambar
B. Antar Muka
1. Menu Login
Gambar 11  Menu Login
Gambar 12 Fitur Pendaftaran pada Menu Login
Gambar 13 Fitur Lupa Password dan ID
Pada  Gambar  11  adalah  tampilan Menu login yang  memiliki  beberapa  fitur seperti  fitur  lupa  ID  atau Password (Gambar  13),  fitur  Pendaftaran  (Gambar 12),dan juga fitur Menu Favorite berdasarkan penghitungan jumlah
penjualan terbanyak.
2. Menu Home Admin
Gambar 15 Fitur Pembuatan Admin baru
Gambar 16 Fitur List Member
Gambar 17 Fitur Pembuatan Member baru
Gambar 18 Fitur Pembelian Token
Gambar 19  Fitur Edit Member

## Gambar 20 Fitur Laporan Master
Gambar 20 adalah contoh antar muka dari fitur laporan.
3. Menu Home Kantin

## Gambar 21 Menu Home Kantin

## 4. Menu Daftar Menu Kantin
Menu  Daftar  menu  kantin  adalah halaman yang digunakan
untuk menampilkan  menu,  menambah  menu, merubah  isi  menu  dan  mencentang  stok apabila stok tersedia.

## Gambar 22 Menu Daftar Menu Kantin

## 5. Menu Laporan Kantin
Pada  Halaman  ini,  kantin  dapat memperoleh  informasi  penghasilan  yang dihitung  oleh  system  dan  juga  informasi pemesanan  yang  telah  sampai  ketangan pembeli.

## Gambar 23 Laporan Bentuk Chart
6. Menu Home Pembeli Menu Home pembeli memiliki beberapa  panel  fitur  seperti  menu favorite member,  menu  favorit  hari  ini, history menu  yang  telah  dipesan  dan  juga history pemesanan  hari  ini.  Pada  bagian  kanan terdapat informasi History Pengisian saldo yang telah dilakukan.[4]

## Gambar 24 Menu Home Pembeli
7. Menu Daftar Menu Pembeli
Pada menu ini terdapat beberapa fitur seperti  daftar  menu,  panel  daftar  pesanan pembeli.
Gambar 25 Menu daftar menu Pembeli

## C. Uji Coba
NO INPUT TARGET PENGAM ATAN FORM REGISTER 1 klik tombol daftar registrasi sesuai yang diharapkan 2 klik tombol reset reset kolom sesuai yang diharapkan FORM LOGIN 3 klik tombol sign-in data login benar sesuai yang diharapkan FORM LUPA ID PASSWORD 4 klik tombol kirim kirim password atau id sesuai yang diharapkan 5 klik tombol reset reset kolom sesuai yang diharapkan FORM ADMIN 6 klik tombol buat admin buat admin baru sesuai yang diharapkan 7 klik tombol list member menampilk an daftar member sesuai yang diharapkan 8 klik tombol tambah member menambah member baru sesuai yang diharapkan 9 klik tombol edit member mengubah data member sesuai yang diharapkan 10 klik tombol beli token mengisi token member yang beli sesuai yang diharapkan 11 klik tombol pemasuka n kantin menampilk an data pendapatan kantin sesuai yang diharapkan

## FORM KANTIN
12 klik tombol closed mengubah status kantin menjadi tutup sesuai yang diharapkan 13 klik tombol open mengubah status kantin menjadi buka sesuai yang diharapkan 14 klik tombol beranda ke halaman awal kantin sesuai yang diharapkan 15 klik tombol menu ke halaman menu kantin sesuai yang diharapkan 16 klik tombol laporan ke halaman laporan kantin sesuai yang diharapkan 17 klik tombol simpan menyimpan menu sesuai yang diharapkan 18 klik tombol reset mengosong kan kolom sesuai yang diharapkan 19 klik tombol kirim pesanan mengirim pesanan dan mengubah status pesanan sesuai yang diharapkan 20 klik tombol hitung menghitung pendapatan dari tanggal yang telah ditentukan sesuai yang diharapkan FORM MEMBER 21 klik tombol beranda ke halaman awal member sesuai yang diharapkan 22 klik tombol menu ke halaman pemesanan menu sesuai yang diharapkan 23 klik tombol bayar mengubah status pesanan dan membayar pesanan sesuai yang diharapkan 24 klik tombol pesanan anda menampilk an pesanan sesuai yang diharapkan 25 klik tombol pemberita huan pmberitahu an status pesanan yang gagal sesuai yang diharapkan 26 klik tombol beli memilih jumlah pesanan sesuai yang diharapkan 27 klik tombol + menambah kan menu kedalam daftar pesanan sesuai yang diharapkan 28 klik tombol pesan memesan menu sesuai yang diharapkan 29 klik tombol batal membatalk an pesanan sesuai yang diharapkan

## SIMPULAN
Dengan diselesaikannya sistem Pujasera  berbasis  web,  dapat  disimpulkan bahwa: 1. Pujasera  telah  berhasil  dikembangkan dan dijalankan pada localhost XAMPP . 2. Sistem  ini  dapat  membantu  Pembeli dan Kantin melakukan transaksi pemesanan menu. 3. Sistem yang berbasi web, memudahkan member untuk mengaksesnya menggunakan device apapun  selama terhubung dengan internet. Kelebihan: 1.  Sistem menggunakan ajax yang memudahkan pengiriman dan penerimaan  data  tanpa  harus  berulang kali reload halaman.
2.  Panel  daftar  pesanan  pada  kantin menampilkan daftar-daftar pesanan pada kantin yang di pesan.
3.  Tersedia info kantin buka atau tutup.
4.  Terdapat  pemberitahuan  stok  menu habis.
5.  Apabila pembeli sudah memesan menu, tapi  menutersebut  habis  maka  pembeli akan  mendapat  notifikasi  stok  habis pada halaman Home pembeli.
6.  Tersedia  laporan  pendapatan  untuk
kantin.
7.  Master bisa
melihat laporan
penghasilan dari setiap kantin.
Kekurangan:
1.  Tidak tersedianya fitur kapasitas
pesanan  yang  dapat  dilakukan  oleh kantin karena keterbatasan stok.
2.  Proses  pencairan  uang  dari Admin kekantin belum tercatat pada sistem.
3.  Antar muka untuk perangkat
smartphone masih belum sempurna.
Saran  –  saran  yang  dapat  diberikan  untuk sistem  Pujasera berbasis web adalah :
1.  Kedepannya perlu dilakukan pengkajian ulang bila muncul masalah- masalah  baru  dalam    sistem  pujasera berbasis Web.
2.  Sistem  ini  dapat  dikembangkan  lagi dengan  batasan  masalah  yang  lebih luas.  Dan  dapat  dilakukan  perbaikan terhadap  kekurangan  yang  ditemui dalam penggunaannya.

## DAFTAR PUSTAKA
[1]  “Canteen  Portland,  Oregon  USA,”
Canteen .  [Online].  Tersedia  pada:
http://www.canteenpdx.com/. [Diakses: 09-Agu-2017]. [2]  muthmainnahIT2010, “Diagram Konteks,  Diagram  0  &  Flowmap Sistem Informasi Administrasi Rumah Sakit,” Teknik  Informatika  Unhalu . [Online]. Tersedia pada: https://mutmalast.wordpress.com/201 2/07/03/apsi/. [Diakses: 02-Nov-2017].
[3]  “Contoh-Contoh  Diagram  Konteks Sistem  Informasi.”  [Online].  Tersedia pada:
http://anasthea.blogspot.com//2010/04
/contoh-contoh-diagram-konteks- %20sistem. [Diakses: 11-Nov-2017].
[4]  “Ajax Tutorial.pdf.” [Online]. Tersedia pada:
http://www.tutorialspoint.com/ajax/aja x_tutorial.pdf.
[Diakses: 09-Des-2017].