## Aplikasi Pemesanan Menu Makanan Berbasis Web Resposive
Munawarah 1) , Muhyiddin Zainul Arifin 2) , Nurul Yaqin 3)
1-2) Program Studi Sistem Informasi, Universitas KH. A. Wahab Hasbullah
3) Program Studi Informatika, Universitas KH. A. Wahab Hasbullah
Correspondence Author: someone@adomain.ac.id
Info Artikel :

## ABSTRACT
Sejarah Artikel : Menerima : 04 Okt 2021 Revisi : 29 Nov 2021 Diterima : 08 Des 2021 Online : 05 Jan 2022 Keyword : Responsive  Web, UML (Unified Modeling Language),  PHP,
Bootstrap Framework
Mie Endess is a noodle shop in Jombang, specifically at Jalan Governor Suryo No 11 A Gg. II, Jombang Kec. Jombang. Mie Endess is a restaurant that has many  customers.  However,  Mie  Endess  still  uses  the  manual  method  for ordering food and drinks, where waiters use paper and pen/pencil as media to record and order food and drinks ordered by customers. Therefore we need a responsive  web-based  information  system  that  can  speed  up  the  process  of submitting order lists from customers. Field condition analysis was carried out through  interviews  and  old-system  literature  studies.  The  analysis  results  of the  food  menu  ordering  application  built  on  a  web  basis  will  be  described using  UML  (Unified  Modeling  Language)  notation,  Activity  Diagram,  and ERD  to  be  further  implemented  using  the  PHP  programming  language  and database  using  MySQL.  The  Bootstrap  Framework  is  also  used  from  the application  design  side  to  provide  application  flexibility  when  accessed  with devices with a smaller resolution. In addition, this application is equipped with a non-cash payment feature which is very efficient in payments.

## INTISARI
Kata Kunci :
Web Responsive,
UML (Unified Modeling Language), PHP, Bootstrap Framework Mie  Endess  adalah  salah  satu  kedai  mie  yang  berada  di  Jombang,  tepatnya berada di Jalan Gubernur Suryo No 11A Gg. II , Jombatan Kec.Jombang. Mie Endess  merupakan  rumah  makan  yang  memiliki  banyak  pelanggan.  Namun Mie Endess masih menggunakan  cara manual untuk pemesanan makanan dan minuman dimana pelayan menggunakan kertas dan pena/pensil sebagai media untuk mencatat dan memesan makanan dan minuman yang dipesan pelanggan. Oleh  karena  itu  dibutuhkan  sistem  informasi  yang  berbasis  web  responsive yang dapat mempercepat proses penyampaian daftar pesanan dari pelanggan. Analisis kondisi lapangan dilakukan dengan cara wawancara dan studi literatur sistem  lama.  Dari  hasil  Analisa  aplikasi  pemesanan  menu  makanan  dibangun berbasis  web  yang  akan  digambarkan  menggunakan  notasi  UML  (Unified Modeling  Language),  Activity  Diagaram  dan  ERD  untuk  selanjutnya diimplementasikan  dengan  menggunakan  bahasa  pemrograman  PHP  serta basis  data  menggunakan  MySQL.  Digunakan  pula  Bootstrap  Framework  dari sisi  desain  aplikasi  untuk  memberikan  fleksibilitas  aplikasi  ketika  diakses dengan device  yang resolusinya lebih kecil.  Selain  itu  aplikasi ini di lengkapi dengan fitur pembayaran non tunai yang sangat efisen dalam pembayaran.

## 1. PENDAHULUAN
Mengetahui  perkembangan  bisnis  di  Mie  Endess  Jombang  ini  sedang  berkembang  dengan baik,  karyawan  yang  berada  di  Mie  Endess  Jombang  memberikan  pendapat  kepada  pemilik  Mie Endess dalam mengelola rumah makan ini secara akurat terkait dengan kenaikan jumlah pelanggan yang  semakin  banyak.  Meringkas  hasil  dari  wawancara  kepada  pemilik  dan  karyawan  di  Coffee Pudak,  bahwa  di  setiap  periode  atau  akhir  tahun  memiliki  permasalahan  yang  sama  dalam menjalankan  bisnis  yang  mereka  jalankan.  Mie  Endess  Jombang  ini  membutuhkan  sistem  yang dapat memberikan solusi kinerja mereka untuk lebih efisien dalam menangani permasalahan. Berdasarkan hasil dari wawancara dengan pengelola Mie Endess diantaranya yaitu:
1. Proses  pemesanan  makanan  dan  minuman  pelanggan  masih  menggunakan  cara  konvensional, yaitu  dengan  mencatat  pemesanan  dan  transaksi  pembayaran  ke  dalam  buku  catatan,  sehingga perlu pengeluaran khusus untuk pengadaan kertas.
2. Proses  perhitungan  untuk  mendapatkan  hasil  pemasukan  keuangan,  pemilik  Coffee  Pudak membutuhkan  waktu  yang  cukup  lama  dan  ketelitian  dalam  menghitung  jumlah  pemasukan keuangan sesuai periode yang ditentukan.
3. Nota  pemesanan  pelanggan  tidak  berurut  dibagian  dapur  disebabkan  terjadinya  penumpukan nota pemesanan pelanggan, terutama pada saat ramai pelanggan.
4. Pelayan mencari nota pesanan yang tidak berurut dibagian dapur ketika pelanggan ingin pindah tempat meja. Sehingga membutuhkan waktu khusus untuk mencari nota pesanan dan mengganti nomor meja.
Saat  ini  dengan  adanya  teknologi  aplikasi  mobile  web,  diusulkan  solusi  kepada  pemilik  dan pengelola  Mie  Endess  dengan  dibangunnya  aplikasi  sebagai  alternatif  untuk  menyelesaikan masalah dan permintaan yang ada di atas serta mengurangi proses pencetakan secara berulang yaitu kertas untuk mencatat pesanan pelanggan.
Pemesanan  menu  dilakukan  oleh  pelanggan  menggunakan  web  dimaksudkan  agar  pelanggan dapat  langsung  melihat  menu  serta  stok  menu  yang  masih  tersedia.  Dan  dapat  pula  melihat ketersediaan meja yang kosong yang  bisa ditempati. Pelanggan juga diberi fitur pembayaran  non tunai  sehingga  pelanggan  tidak  harus  membayar  dengan  uang  tunai.  Berdasarkan  uraian  tersebut, penulis  dalam  penelitian  ini  akan  membuat  aplikasi  pemesanan  menu  pada  restoran  berbasis  web yang dapat membantu memudahkan pelanggan dalam melakukan proses pemesanan makanan dan minuman beserta pembayaran.

## 2. ANALISIS DAN PERANCANGAN
a. Analisis Kebutuhan Sistem
1) Kebutuhan Perangkat Keras
Adapun kebutuhan keras untuk membagun aplikasi ini adalah PC/ Laptop dengan spesifikasi  OS  Windows  10  64  bit,  RAM  minimal  4  GB,  ruang  hardisk  yang  tersisa minimal  2  GB,  VGA,  keyboard  dan  mouse.  Juga  membutuhkan  android  dengan  OS Marsmellow.  Adapun  kebutuhan  untuk  dapat  mengaplikasikan  aplikasi  adalah  server/PC yang  dionlinekan  untuk  menyimpan  data  website  yang  akan  diakses  oleh  admin  dengan
spesifikasi  minimal  penyimpanyan  yang  tersisa  adalah  2GB.  Laptop/PC  yang  terkoneksi dengan  jaringan  internet  untuk  mengakses  website  dan  android  dengan  spesifikasi  RAM minimal 512 MB yang digunakan oleh client menerima notifikasi.
2) Kebutuhan Perangkat Lunak
Pembuatan  aplikasi  pemesanan  menu  makanan  berbasis  web  responsive membutuhkan beberapa software. Diantaranya adalah :
a) PHP sebagai Perangkat lunak Bahasa Pemrograman
b) Perangkat lunak XAMPP sebagai web server
c) MySQL sebagai perangkat lunak database
d) Sistem Operasi Windows 10 sebagai sistem operasinya
e) PhpMyAdmin sebagai editor database
f) Google Chrome sebagai web browser
g) Sublime Text 3 sebagai editor teks
Sedangkan  untuk  pengaplikasian  membutuhkan  perangkat  lunak  seperti  server, sistem operasi (windows/linux), PHP dan juga MySQL.
b. Metode Pengumpulan Data
Pengumpulan data dilakukan dengan berbagai metode, antara lain :
1) Studi Literatur
Studi literatur adalah metode pengumpulan data dengan cara mengumpulkan literatur, jurnal,  paper  dan  bacaan-bacaan  yang  diperlukan  untuk  membangun  “Aplikasi Pemesanan Menu Makanan Berbasis Web Responsive”
2) Wawancara
Oservasi  adalah  metode  pengumpulan  data  dengan  mengajukan  pertanyaan  langsung ke narasumber untuk mendapatkan informasi , agar peneliti dapat mengetahui apa saja yang  dibutuhkan  untuk  membangun  “Aplikasi  Pemesanan  Menu  Makanan  Berbasis Web Responsive”
c. Perancangan Proses Sistem
Pada perancangan proses sistem, peneiti menggunakan ERD untuk menggambarkan  rancangan  alur  proses  sistem  dengan  melibatkan  entitas-entiras  secara keseluruhan. Berikut gambar ERD sistem :

## Gambar 1 Activity Diagram Order Makanan
Gambar  diatas  menjelaskan  aktivitas  pemesanan  makanan,  memulai  aplikasi admin,  user  dan  kasir  mempunyai  aktivitas  yang  sam  yaitu  login  apa  bila  login  sukses maka  akan  tampil  dashboard  dari  masing  –  masing  aktor.  Pokok  utama  adalah  proses pesanan, setelah berada pada dashboard user maka akan tampil pilihan menu dan ada status tersedia  atau  tidak.  Apabila  tersedia  akan  lanjut  pada  mengirim  data  pesanan  dan membayar  tagihan  pesanan.  Kasir  akan  menerima  data  pesanan  dari  user  dan  menerima pembayaran.  Setelah  pembayaran  dilakukan  maka  data  pesanan  akan  masuk  pada  sistem yang  ada  pada  dapur  dan  data  rekap  pesanan  dan  pembayaran  akan  tersimpan  pada database.  Dapur  akan  menerima  daftar  list  pesanan  dan  memprosesnya,  apabila  sudah selsai maka dapur akan mengkonfirmasi kebagian kasir dan user.
d. Perancangan Interface
Perancangan Interface adalah perancangan tampilan aplikasi. Berdasarkan platform yang digunakan, sistem mempunyai banyak tampilan. Beberapa diantaranya adalah :
a. Desain Halaman Login : pada halaman ini digunakan oleh semua user namun memakai id masing – masing. Untuk klien harus mendaftar terlebih dahulu terdaftar.
Gambar 2 Halaman Login
b. Desain Halaman Utama Klien : Pada halaman utama klien terdapat daftar menu, daftar pesanan, dan nota pembayaran.
Gambar 3 Halaman Utama Klien
c. Desain Halaman Utama Admin : Halaman admin adalah untuk mengedit, tambah, dan hapus data yang dibutuhkan.

## Gambar 4 Halaman Admin
3. HASIL DAN PEMBAHASAN
a. Implementasi
Setelah  sistem  dianalisis  dan  didesain,  maka  langkah  selanjutnya  adalah melakukan  implementasi  sistem  pada  Bahasa  pemrogaman.  Sehingga  sistem  siap  untuk dioperasionalkan dan pengguna dapat meberikan saran atau masukan untuk pengembangan dimasa depan.
a. Uji Coba Sistem
Untuk  menguji  sistem,  peneliti  menggunakan  metode  black  box.  Pengujian  black box merupakan pengujian progam berdasarkan fungsi dari progam. Berikut table uji  coba sistem dengan metode blackbox
Tabel 1 Hasil pengujian sistem No. Menu/Perintah Pengujian Hasil 1. Login admin Masuk halaman utama. Berhasil 2. Login Klien Masuk halaman utama Berhasil 3. Login Kasir Masuk halaman utama Berhasil 4. Input data admin Data berhasil disimpan Berhasil 5. Input data klien Data berhasil disimpan Berhasil 6. Input data kasir Data berhasil disimpan Berhasil 7. Tambah, kategori Data berhasil disimpan Berhasil 8. Tambah no meja Data berhasil disimpan Berhasil 9. Tambah menu Data berhasil disimpan Berhasil 10.  Data pesanan menu Data berhasil disimpan Berhasil
b. Implementasi User Interface
User  interface adalah  tampilan  hasil  implementasi  dari  analisis  dan  perancangan desain. Berikut beberapa tampilan user interface sistem :
a. Tampilan halaman login
Halaman login ini merupakan halaman yang ditampilkan pertama kali ketika aplikasi dijalankan, adapun tampilan halaman login sebagaimana pada gambar 5 berikut ini :
Gambar 5 Tampilan halaman Login
b. Tampilan halaman dashboard
Halaman dashboard merupakan halaman yang akan ditampilkan jika sudah berhasil memasukkan username dan password yang benar, adapun halaman dashboard sebagaimana pada gambar 6 berikut ini :
c. Tampilan Halaman Utama Klien
Halaman  klien  merupakan  halaman  untuk  melakukan  pemesanan  pada  para pengunjung.  Halaman  ini  menampilkan  daftar  makanan  beserta  harga  serta  tombol pemesanan. Adapun tampilan halaman utama klien sebagaimana gambar 7 berikut ini :
Gambar 7. Halaman Utama Klien
d. Halaman Utama kasir
Halaman ini merupakan halaman yang muncul pada user dengan level kasir dimana pada halaman ini dapat memunculkan tagihan yang dibuat pada halaman klient dan proses pembayarannya, adapun tampilan halaman kasir sebagaimana pada gambar 8 berikut ini :
Gambar 8. Tampilan Halaman Utama Kasir
e. Halaman Utama Dapur
Halaman dapur merupakan halaman penerimaan pesanan yang ditujukan pada koki di dapur untuk memproses pesanan yang masuk. Adapun halaman dapur sebagaimana tersaji pada gambar 9 berikut ini :
Gambar 9. Tampilan Halaman Utama Dapur

## 4. KESIMPULAN
Setelah  dilakukan  analisis,  perancangan  dan  pembuatan  Aplikasi  Pemesanan  Menu Makanan maka dapat diambil kesimpulan sebagai berikut :
1. Aplikasi  ini  berfungsi  untuk  mengoptimalkan  pelayanan  dan  mengurangi  penggunaan kertas sebagai media pemesanan dengan menggunakan web yang diharapkan lebih efisien dalam pelayanan.
2. Aplikasi  Pemesanan  Menu  Makanan  ini  dibangun  dengan  bahasa  pemrograman  PHP  dan MySQL sebagai database.
3. Aplikasi Pemesanan Menu Makanan bertujuan untuk membantu pengelolah rumah makan dalam pelayanan pemesanan menu kepada pelanggan.
4. Dibangun  dengan  menggunakan  web  responsive  dan  menggunakan  template  boostrap, sehingga bila diterapkan dimobile tetap dinamis.

## 5. DAFTAR PUSTAKA
Dr. Kusnendi, M. (2016). Konsep Dasar Sistem Informasi .
Fadilah,  A.  A.  (2013).  Rancang  Bangun  Aplikasi  Pemesanan  Makanan  Dengan  Php  Dan  Mysql.
Universitas Gunadarma ; JAKARTA TIMUR .
FITRIANDI,  A.  Y.  (2013).  RANCANG  BANGUN  APLIKASI  E-ORDER  SERVICE  ATAU PEMESANAN MAKANAN DAN MINUMAN. UNIVERSITAS ISLAM NEGERI SULTAN SYARIF KASIM RIAU ; PEKANBARU.
Ilahiyyah,  I.,  Sanjaya,  M.  B.,  &  Rosely,  I.  E.  (2018).  APLIKASI  PEMESANAN  MAKANAN DAN MINUMAN BERBASIS WEB MOBILE . Universitas Telkom ; BANDUNG , 122.
Inayati,  I.,  Hidayatulloh,  M.  N.,  &  Kamisutara,  M.  (2015).  APLIKASI  PEMESANAN MAKANAN  BERBASIS  WEB  (Studi  Kasus:  RM  Lesehan  Berkah  Ilaahi  Gresik). Universitas Narotama Surabaya , Hal 80 - 86.
Rachmawati,  V.,  Yulianti,  &  Nasution,  H.  (2016). Rancang  Bangun  Aplikasi  Pemesanan  Menu Pada Restoran Berbasis Web , Universitas Tanjungpura .
Tanpure,  S.  S.,  Shidankar  ,  P.  R.,  &  Joshi  ,  M.  M.  (2013). Automatic  Food  Sorting  System  with real-time , Pune University. Volume 3, Edisi 2, Februari ; Hal 220 - 225.
Widyastuti,  K.,  Handayani,  P.  W.,  &  Wilarso  ,  I.  (2017).  TANTANGAN  DAN  HAMBATAN IMPLEMENTASI  PRODUK  UANG  ELEKTRONIK  DI  INDONESIA  :  STUDI  KASUS PT XYZ. Universitas Indonesia Jl. Salemba Raya No.4 , Hal 38-48.