ANALISA DATA DAN MASALAH DALAM PERANCANGAN INTERFACE E- LOCATION KAFE
Anisya 1) , Dede Wira Trise Putra 2)
1,2) Institut Teknologi Padang Email : nisa.anisya@gmail.com 1) , dedewtp339@yahoo.com 2)

## ABSTRAK
Payakumbuh memiliki jumlah masyarakat 78.702 jiwa di usia remaja dan orang dewasa yang membuat bisnis kafe menjadi banyak bermunculan dengan desain tampilan kafe yang begitu menarik dan nyaman serta fasilitas  yang  bagus.  Hal  ini  membuat  masyarakat  menjadi  ragu  dalam  memilih  kafe  mana  yang  mau  di kunjungi  karena  kafe  dengan  tampilan  yang  bagus  dan  nyaman  pasti  harga  menunya  juga  mahal.  Dan terkadang ada masyarakat yang sudah mendapatkan informasi tentang sebuah kafe dari informasi yang beredar di  lingkungan  sekitar  dengan  tampilan  yang  sesuai  dan  harga  yang  pas  untuk  dirinya  akan  tetapi  tidak mengetahui  dimana  lokasi  kafe  tersebut.  Sehingga  tujuan  dari  penelitian  ini  adalah  merancang  interface halaman peta persebaran kafe dan halaman informasi penting kafe yang ada di kota Payakumbuh yang berbasis website. Metode yang digunakan dengan system life cycle dengan memfokuskan pada analisa masalah dan data yang diperoleh dari hasil studi literature, wawancara, dan observasi. Hasil yang diperoleh dari penelitian ini berupa rancangan antarmuka ( interface ) sistem e-location kafe
Kata Kunci : kafe, e-location , website .

## ABSTRACT
Payakumbuh has a population of 78,702 people with teenagers and adults, which makes many internet cafe businesses appear with a very attractive and comfortable internet cafe display design and good facilities. This makes people hesitate in choosing which cafe they want to visit because cafes with a nice and comfortable appearance must have expensive menu prices. And there are people who get information about the internet cafe from the information circulating in the surrounding environment with the appropriate appearance and the right price for themselves but do not know where the internet cafe is. So the purpose of this research is to design a web site-based interface for the map page of the spread of internet cafes and important information pages for internet cafes in the city of Payakumbuh. The method used is a system life cycle with a focus on problem analysis and data obtained from the results of literature studies, interviews, and observations. The results obtained from this study are in the form of an e-location cafe system interface design.
Keywords: cafe, e-location, website

## 1. PENDAHULUAN
Kafe  menurut  Kamus  Besar  Bahasa Indonesia  merupakan sebuah restoran di mana makanan sederhana dan biasanya cukup murah disajikan  dan  ini  salah  satu  lifestyle  bagi kebanyakan masyarakat mulai dari usia remaja sampai  dewasa  sangat  suka  untuk  berkumpul atau  makan  di  luar  rumah  sambil  mencoba suasana  baru  atau  hanya  sekedar  untuk bersantai  saja  ( Pencarian  -  KBBI  Daring ,  no date)  Sama  halnya  seperti  Kota  lain  di  Kota Payakumbuh  juga  memiliki  banyak  peminat untuk  berkunjung  ke  sebuah  kafe.  Kota payakumbuh  ini  berlaku  sebagai  studi  kasus dalam penelitian ini.
Dengan  populasi  masyarakat  sebanyak 135.573 jiwa, yang memiliki jumlah masyarakat  di  usia  remaja  sebanyak  44.239 jiwa, dan orang dewasa sebanyak 34.463 jiwa ( Badan  Pusat  Statistik ,  no  date).  Karena memiliki  jumlah  masyarakat  di  usia  remaja dan  orang  dewasa  yang  begitu  banyak membuat bisnis kafe menjadi banyak bermunculan  dengan  desain  tampilan  kafe yang begitu menarik dan nyaman serta fasilitas yang  bagus.  Hal  ini  membuat  masyarakat menjadi ragu dalam memilih kafe mana yang mau di kunjungi karena kafe dengan tampilan yang bagus dan nyaman pasti harga menunya juga  mahal.  Dan  terkadang  ada  masyarakat yang  sudah  mendapatkan  informasi  tentang sebuah  kafe  dari  informasi  yang  beredar  di lingkungan  sekitar  dengan  tampilan  yang sesuai dan harga yang pas untuk dirinya akan tetapi  tidak  mengetahui  dimana  lokasi  kafe tersebut,  karena  informasi  itu  didapatkan hanya  dari  kabar  yang  beredar  di  lingkungan sekitar dan tentu saja informasi seperti itu tidak akurat dan kurang terpercaya. Agar masyarakat  dapat  mengetahui  informasi  dan lokasi  tentang  sebuah  kafe  yang  ada  di  Kota Payakumbuh,  maka  penulis  ingin  merancang interface  dari  sebuah  sistem E-Location kafe berbasis  web  untuk  mengetahui  informasi yang  dibutuhkan  dari  setiap  kafe  dan  dapat mengetahui  lokasi  tentang  setiap  kafe  yang berada di Kota Payakumbuh.
User  interface atau  antarmuka  pengguna merupakan  bagaimana  cara  sebuah  program
berinteraksi  dengan  pengguna  .  Fungsi  dari user interface atau UI adalah menghubungkan dan  menerjemahkan  informasi  dari  sistem  ke pengguna  atau  sebaliknya.  Salah  satu  cara dalam  menyusun user  interface ini  adalah dengan  menganalisa  data  yang  ada,  dan menganalisa database yang dibutuhkan (Maulana, 2020).
Tujuan  dari  penelitian  ini  merancang interface  halaman  peta  persebaran  kafe  dan halaman  informasi  penting  kafe  yang  ada  di kota  Payakumbuh  seperti  alamat,  nama  kafe, telepon, media, jumlah meja, wifi, permainan, musholla, live akuistik,  parkir,  deskripsi  kafe dan daftar menu berdasarkan dari analisa data dan permasalahan yang ditemui.

## 2. METODE
Adapun  metodologi  penelitian  yang digunakan  pada  penelitian  ini  adalah system life  cycle . System  life  cycle adalah  suatu paradigma  perangkat  lunak  yang  menuntut suatu sistem yang sistematis, mulai dari suatu level  sistem  kemudian  terus  maju  ke  level berikutnya. Adapun tahapan Classic life cycle adalah sebagai berikut (Laura P. Taylor, 2013):
a. Requirements  identification  and  analysis (Identifikasi dan analisis persyaratan)
Analisis dilakukan terhadap data yang ada serta  mengumpulkan  kebutuhan-kebutuhan perangkat  lunak  yang  akan  dibangun. Merupakan  tahap  awal  untuk  pendefinisian masalah  hingga  rencana  penyelesaian  teknis pengembangan  perangkat  lunak  dilakukan. Dalam  penelitian  ini,  data  yang  dikumpulkan oleh penulis yaitu dalam bentuk data kualitatif yang  diperoleh  dari  hasil  wawancara  dengan Masyarakat  dan  pemilik  kafe  dan  hasil observasi  pada  kafe  yang  menjadi  tempat penelitan.
b. Planning  and  procurement  (Perencanaan dan pengadaan)
Adapun proses yang dilakukan pada tahap ini adalah mendekomposisi modul sistem yang akan  dikembangkan,  penetapan  rancangan masukan  dan  keluaran  yang  diperlukan, penetapan struktur data yang dipilih,
penetapan  prosedur  kerja  internal,  dalam penetapan  formula  pengolahan  data  dan representasi  interface  (Wiguna,  Swastika  and Satwika,  2019).  Pada  penelitian  ini,  penulis membuat  rancangan  antarmuka  aplikasi e- location dengan menggunakan tools Balsamiq Mockup.  Selain  itu,  Penulis  juga  membuat rancangan  sistem  Context  Diagram  dan rancangan  database  menggunakan  ERD. Selain itu, data tersebut juga penulis gunakan sebagai  pertimbangan  untuk  fitur    apa  saja nantinya yang akan  disediakan pada aplikasi e-location yang disesuaikan dengan kebutuhan pada kafe.
c. Development and testing (Pengembangan dan pengujian)
Pada  tahapan  ini  mencakup  penulisan program.  Proses  ini  dilakukan  setelah  tahap perencanaan dimana proses ini merubah desain menjadi program utuh yang mampu dipahami oleh komputer secara mekanis. Pada proses ini penulis  menggunakan  aplikasi  pemetaan Google  Maps  API.  Google  Maps  sendiri menggunakan  JavaScript  secara  ekstensif. Beberapa  tujuan  dari  penggunaan  Google Maps  API  adalah  untuk  melihat  lokasi, mencari alamat, mendapatkan petunjuk mengemudi dan lain sebaginya. Hampir semua hal  yang  berhubungan  dengan  peta  dapat memanfaatkan Google Maps (Purba, 2021).
Setelah program dapat digunakan, selanjutnya dilakukan proses pengujian dengan memfokuskan pada logika internal dari perangkat lunak, fungsi eksternal dan mencari segala  kemungkinan  masalah  yang  akan terjadi. Termasuk dari masalah program yang selesai  dibangun  apakah  terdapat  kesalahan baik itu dari sisi bug ataupun dari sisi keluaran yang  tidak  sesuai  di  tahapan  sebelumnya. Pengujian  yang  dipakai  pada  penelitian  ini berbasis black-box. pengujian yang dilakukan untuk  mengamati  hasil  input  dan  output  dari perangkat  lunak  tanpa  mengetahui  struktur kode dari perangkat lunak (Nidhra, 2012).
Tahapan-tahapan diatas sangat berpengaruh  pada  interface  yang  akan dirancang  dikarenakan  interface  ini  nantinya
akan menentukan luaran tampilan sistem yang akan  disajikan  ke  pengguna.  Walaupun  nanti dipembahasan tidak membahas hingga proses penulisan program dan pengujian.

## 2.1 Metode Pengumpulan Data
a. Studi Literatur
Studi  literatur  yang  di  lakukan  adalah dengan  cara  mempelajari  dan  memahami jurnal,  mengutip  teori-teori  dari  sejumlah literatur  yang  berkaitan  dengan  topik  web, maupun buku yang berkaitan dengan aplikasi berbasis web.
b. Wawancara Wawancara yang dilakukan adalah dengan cara mengumpulkan data dengan cara tanya jawab atau konsultasi dengan aktor yang berhubungan  langsung  dengan  permasalahan yang  dibahas.  Metode  wawancara  yang penulis lakukan bebas mengajukan pertanyaan terkait  dengan  data  yang  ingin  dikumpulkan dan  responden  juga  dapat  memberikan jawaban  dengan  lebih  jelas  dan  detail (Sugiono, 2013).
c. Metode pengamatan (Observasi)
Dalam  hal ini  penulis melakukan pengamatan  terhadap  setiap  kafe  yang  ada  di Kota  Payakumbuh  baik  melalui  internet maupun datang langsung ke lokasi kafe untuk mencari informasi tentang kafe yang berada di Kota payakumbuh.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Analisa Data
Dari data yang telah berhasil dikumpulkan oleh  penulis.  Dilakukan  proses  analisa terhadap  data  dengan  tujuan  diperolehnya sebuah  rancangan  Database,  yang  tertuang dalam  Entity  Relationship  Diagram  (ERD). ERD  merupakan  suatu  bentuk  diagram  yang menjelaskan hubungan antar objek-objek data yang  mempunyai  hubungan  antar  relasi (Tabrani,  Suhardi  and  Priyandaru,  2021). Berikut  tampilan  ERD  untuk  menjelaskan hubungan  antar  data  dalam  basis  data  yang mempunyai hubungan antar relasi.
Id_admin_kafe
Admin_kafe Nama_admin Id_admin Kafe Id_kafe Nama_kafe Musholah Telepon Media wifi Live_akustik Alamat La titude Longitude Gambar Dafta r Menu memiliki Id_menu Nama_menu Id_kafe permainan Jumlah_meja Id_kategori Kategori Kaf e memiliki Id_kategori Kategori_kafe Parkir Deskripsi Harga_menu Foto_menu Id_admin_kafe Jumlah_meja_k osong Id_admin Admin userna me password Te lp_admin Le vel Id_kecamatan Kecamatan memiliki Id_kecamatan Id_kab_kota Nama_kecamatan Model_kafe Memasukkan data 1 Mamasukkan data 1 N N
Gambar 1. Entity Relationship Diagram 3.2 Context Diagram
Pada rancangan ini menjelaskan level user yang berhak mengakses sistem nantinya. Pada
gambar 3 menjelaskan bahwa ada 3 level user, yakni sebagai admin, sebagai admin kafe, dan sebagai pengunjung.
ADMIN SISTEM INFORMASI E- LOCATION KAFE PENGUNJUNG Login Menambah admin kafe Mengedite admin kafe Menghapus admin kafe Melihat informasi kafe yang sudah diinputkan amin kafe Melihat  Halaman depan Melihat Peta Persebaran Kafe Melihat Informasi Kafe Melihat Menu Kafe Menampilkan  Halaman depan Menampilkan Peta Persebaran Kafe Menampilkan Informasi Kafe Menampilkan Menu Kafe Melihat  Halaman depan Melihat Peta Persebaran Kafe Melihat Informasi Kafe Melihat Menu ADMIN KAFE Login Menginput data peta persebaran kafe Menginput informasi kafe Menginput menu kafe Mengupdate data kafe Mengedite data kafe Mengahapus kafe Mengubah password Melihat  Halaman depan Melihat Peta Persebaran Kafe Melihat Informasi Kafe Melihat Menu
Gambar 2. Context Diagram
Dari  gambar  2  menjelaskan  bahwa  level user  admin  dan  admin  kafe  yang  melakukan proses  login  untuk  bisa  melakukan  pekerjaan yang ada di sistem.
Perbedaan  antara  admin  dengan  admin kafe  dilihat  dari  tingkat  hak  aksesnya,  admin bisa disebut sebagai superuser dari sistem ini. Di  level  admin  ini  mampu  mengelola  admin dari  kafe,  dimana  admin  kafe  merupakan pengelola  dari  kafe  itu  sendiri.  Dilihat  dari gambar  2  juga  menjelaskan  bahwa  level pengunjung  tidak  harus  login  jika  ingin melihat informasi yang ada pada sistem.
3.3 Rancangan Interface
1. Sebagai admin
a. Rancangan Halaman Awal Admin Aplikasi
Tampilan  halaman  awal  admin  saat setelah  melakukan  proses  login  ke  dalam sistem.
Gambar 3. Tampilan Awal Admin Aplikasi
b. Rancangan  Halaman  Admin  Aplikasi
Dashboard Admin Kafe
Tampilan halaman admin aplikasi dashboard  admin  kafe  merupakan  tempat admin aplikasi melihat, menambah mengedite dan menghapus admin kafe yang bergabung ke sistem.
Gambar 4. Rancangan Admin Aplikasi
Admin Kafe c. Rancangan Admin Aplikasi Menu Kecamatan Rancangan halaman admin aplikasi menu kecamatan  merupakan  tempat  admin  aplikasi melihat  data  kecamatan  yang  ada  di  kota Payakumbuh yang telah ditambahkan, berikut gambar rancangannya.

## Gambar 5. Rancangan Admin Aplikasi Menu Kecamatan
d. Rancangan Admin Aplikasi Menu Kategori
Rancangan admin aplikasi menu kategori merupakan tempat admin aplikasi melihat data kategori yang sudah di tambahkan.
Gambar 6. Rancangan Admin Aplikasi Menu
Kategori
e. Rancangan  Halaman  Admin  Aplikasi Dashboard Kafe
Rancangan admin aplikasi dashboard kafe merupakan tempat admin aplikasi melihat data kafe yang sudah ditambahkan oleh admin kafe.
Gambar 7. Rancangan Halaman Admin Aplikasi Dashboard Kafe
2. Sebagai admin kafe
a. Rancangan Halaman Awal Admin Kafe
Rancangan  halaman  awal  admin  kafe merupakan  halaman  awal  ketika  admin  kafe melakukan login ke dalam sistem.
Gambar 8. Rancangan Halaman Awal Admin kafe
b. Rancangan  Halaman  Admin  Kafe  data Kafe
Rancagan  halaman  admin  kafe  data  kafe merupakan  tempat  admin  kafe  melihat  data kafe  yang  telah  ditambahkan,  merubah  data admin kafe dan menghapus data.
Gambar 9. Rancangan Halaman Admin Kafe Data Kafe c. Rancangan  Halaman  Admin  kafe  Menu Kafe
Rancangan  halaman  admin  kafe  menu merupakan  tempat  admin  kafe  melihat  data menu  yang  telah  ditambahkannya  berikut tampilan rancangannya.

## Gambar 10. Rancangan Halaman Admin Kafe Menu Kafe
d. Rancangan Halaman Admin Kafe Tambah Menu Kafe
Rancangan  halaman  admin  kafe  tambah menu  kafe  merupakan  tempat  admin  kafe menambahkan  data  menu  kafe  yang  akan ditambahkan.
Gambar 11. Rancangan Tambah Menu Kafe
e. Rancangan  Halaman  Admin  Kafe  Edite Menu Kafe
Rancangan  halaman  admin  kafe  edite menu  kafe  merupakan  tempat  admin  kafe mengedite  data  menu  kafe,  berikut  tampilan rancangannya.
Gambar 12. Rancangan Admin Kafe Edite

## Menu Kafe
3. Sebagai pengunjung a. Rancangan Tampilan Awal Pengunjung
Merupaka tampilan halaman awal aplikasi yang  dilihat  oleh  pengunjung  saat  membuka website E-Location Kafe Kota Payakumbuh.
Gambar 13. Tampilan Awal Pengunjung
b. Rancangan  Tampilan  Peta  Persebaran
Kafe
Tampilan  saat  pengguna  web  menekan menu  peta  persebaran  kafe  maka  akan manmpilkan peta persebaran kafe yang ada di kota Payakumbuh.
Gambar 14. Tampilan menu peta persebaran kafe c. Rancangan Tampilan Dashboard informasi kafe
Setelah  pengguna  web  menekan  tombol menu  informasi  kafe  maka  akan  langsung keluar  informasi  yang  di  butukan  dan  ikon lokasi untuk melihat lokasi detail kafe.
Gambar 15. Tampilan Button Informasi Kafe
d. Rancangan Tampilan Menu dan Harga
Tampilan  saat  pengguna  web  menekan gambar  menu  dan  harga  yang  mana  disini pengunjung  bisa  melihat  foto-foto  menu  dan harga yang ada di kafe yang di pilih.
Gambar  16.  Tampilan  gambar  menu  dan harga

## 4. PENUTUP

## 4.1. Kesimpulan
Berdasarkan seluruh tahapan hasil
penelitian yang dilakukan
untuk  analisis  requirement  terhadap perancangan e-location kafe,  maka  dapat disimpulkan  di  tahapan  ini  dimulai  dengan menganalisa data yang telah berhasil diperoleh hingga  muncul Entity  Relationship  Diagram , Context Diagram yang menjelaskan level user yang akan mengakses sistem, serta rancangan interface dari  sistem  untuk  3  level user yang dirancang dari tahapan sebelumnya. Rancangan interface ini  menggambarkan rancangan  informasi  yang  akan  ditampilkan untuk pengguna sistem.

## 4.2. Saran
Pada paper ini telah menjelaskan requirement  yang  telah  berhasil  didapatkan untuk  bisa  diimplementasikan  maka  harus dilakukan proses pembangunan sistem dengan tetap memperhatikan prinsip e-location .

## 5. DAFTAR PUSTAKA
Badan Pusat Statistik (no date) https://payakumbuhkota.bps.go.id/ . Available at:
https://payakumbuhkota.bps.go.id/subject
/26/indeks-pembangunan-manusia.html (Accessed: 10 February 2022). Laura P. Taylor (2013) ‘Chapter 16 - Preparing the System Security Plan’, in Taylor, L. P. (ed.) 9780124058712 . FISMA Compliance  Handbook,  Syngress,  pp. 167–199. doi: https://doi.org/10.1016/B978-0-12- 405871-2.00016-6. Maulana,  R.  T.  (2020)  ‘Perancangan  User Interface User Experience Dengan Metode User  Centered  Design  Pada  Perancangan User  Interface  User  Experience  Dengan Metode User Centered Design Pada’.
Nidhra, S. (2012) ‘Black Box and White Box Testing  Techniques  -  A  Literature Review’, International Journal of
Embedded Systems and Applications , 2(2), pp. 29–50. doi: 10.5121/ijesa.2012.2204.
Pencarian  -  KBBI  Daring (no  date) kbbi.kemdikbud.go.id . Available at: https://kbbi.kemdikbud.go.id/  (Accessed: 14 March 2022).
Purba,  F.  (2021)  ‘LITERATURE  REVIEW: BIDANG PENERAPAN SISTEM INFORMASI  GEOGRAFIS  DENGAN MENGIMPLEMENTASIKAN GOOGLE MAPS API’.
Sugiono  (2013) Statistika  untuk  Penelitian . Bandung: Alfabeta.
Tabrani,  M.,  Suhardi  and  Priyandaru,  H.
(2021)  ‘Sistem  Informasi  Manajemen
Berbasis  Website  Pada  UNL  Studio Dengan Menggunakan
Framework
Codeigniter’, Jurnal  Ilmiah  M-Progress ,
11(1), pp. 13–21.
Wiguna,  P.  D.  A.,  Swastika,  I.  P.  A.  and Satwika,  I.  P.  (2019)  ‘Rancang  Bangun Aplikasi Point of Sales Distro Management System dengan Menggunakan  Framework  React  Native’, Jurnal  Nasional  Teknologi  dan  Sistem Informasi ,  4(3),  pp.  149–159.  doi: 10.25077/teknosi.v4i3.2018.149-159.