## IMPLEMENTASI ARSITEKTUR APLIKASI MVC PADA PERANCANGAN APLIKASI BANK SAMPAH BERBASIS WEB
Sirojul Munir a , Ahmad Rio Adriansyah a , Radon Dhelika b , Riyan Wahyudi a
a STT Terpadu Nurul Fikri Depok, Program Studi Informatika, Kampus B2 Jl. Lenteng Agung Raya No.20, Indonesia
b Departemen Teknik Mesin, Fakultas Teknik, Universitas Indonesia, Kampus UI Depok, Indonesia
Korespondesi penulis: rojulman@nurulfikri.ac.id , arasy@nurulfikri.ac.id

## Abstrak
Kota Depok sebagai kota satelit dari ibu kota Jakarta menghasilkan sampah sekitar 1200 ton per harinya, untuk pengelolaan sampah pemerintah kota depok mencetuskan program pengelolaan sampah terpadu (SIPESAT)  yang  salah  satu  memberdayakan  bank  sampah  yang  ada  dalam  setiap  kelurahan.  Sistem informasi  dibutuhkan  untuk  pengelolaan  transaksi  nasabah  bank  sampah,  penelitian  ini  membuat rancangan sistem aplikasi bank sampah mengunakan arsitektur aplikasi model view controller (MVC). Perancangan  desain  aplikasi  menggunakan  UML  diagram,  dan  implementasi  MVC  diterapkan menggunakan  kerangka  kerja  aplikasi  berbasis  web  PHP  Yii2  Framework.    Hasil  penelitian  berupa prototype aplikasi bank sampah berbasis web dimana hasil uji fungsional aplikasi menggunakan metode pengujian black box didapat fungsional aplikasi telah berjalan 100%. Kata Kunci: mvc, web framework, bank sampah

## 1. Pendahuluan
Kota  Depok  adalah  kota  satelit  yang  berada di  selatan  kota  Jakarta,  penduduk  kota  Depok berdasarkan data BPS tahun 2017 berjumlah 2,25 juta [1].  Penduduk  depok  menghasilkan  sekitar  1200  ton sampah  per  hari,  pemerintah  kota  depok  dalam pengelolaan sampahnya mencetuskan program pengelolaan sampah terpadu (SIPESAT). Di dalamnya terdapat  tiga  pendekatan  yaitu  pendekatan  Tempat Pembuangan  Akhir  (TPA),  skala  kawasan,  dan  skala masyarakat.  Sebagian  dari  sampah  tersebut  sudah diproses  oleh  bank  sampah  (skala  masyarakat)  dan UPS (skala kawasan) kota Depok [2].
Dari data hasil penelitian RS Dewi [3] yang diambil  dari  keluruhan  Tugu,  kota  Depok,  saat  ini terdapat  28  buah  bank  sampah  yang  tersebar  di beberapa  RW.  Seluruh  bank  sampah  tersebut menerima  4  jenis  sampah  anorganik  untuk  dijual kembali,  yaitu:  Kertas,  Plastik,  Logam,  dan  Kaca. didapat  sampah  rumah  tangga  di  RW  11  kelurahan Tugu  berpotensi  menghasilkan  Rp  51.634.000  (Rp 4.762.000  diantaranya  diperoleh  dari  plastik)  dalam setahun (pada tahun 2008).
Bank  sampah  tersebut  dijalankan  mandiri oleh para penggiat dan kader. Mereka mengumpulkan sampah  yang  sudah  terpilah  di  rumah  dari  nasabah setiap  pekannya,  ditimbang,  dan  dicatat  dalam  buku catatan. Sampah tersebut lalu dikirimkan ke pengepul untuk dijual. Dari hasil penjualan tersebut, kompensasi  yang didapat dibagi kepada nasabah dan pengelola.
Sebuah  sistem  informasi  dibutuhkan  untuk mendukung  pengelolaan  dan  pencatatan  transaksi nasabah  bank  sampah.  Tujuan  umum  penelitian  ini adalah  untuk  membuat  sistem  aplikasi  bank  sampah berbasis  web  yang  dapat  memudahkan  proses pencatatan  transaksi  pada  bank  sampah,  sedangkan tujuan  khusus  dari  penelitian  ini  adalah  bagaimana menerapkan arsitektur aplikasi model view controller (MVC)  pada  perancangan  aplikasi  berbasis  web dengan studi kasus bank sampah pada keluruhan tugu kota Depok.

## 2. Tinjauan Pustaka
Pola  desain  Model  View  Controller  atau disingkat  MVC  diperkenalkan  pertama  kali  oleh
Trygve  Reenskaug  Pada  awal  tahun  1970  di  Xerox Parc,  menurut  beliau  tujuan  utama  dari  MVC  adalah sebagai  jembatan  penghubung  antara human  user’s mental  model dengan  model  digital  yang  ada  pada sistem komputer [4].
Pada  tahun  1988,  paradigma  MVC  secara rinci  dijelaskan  oleh  Krasner  dan  Paus  pada implementasi  perancangan  antar  muka  aplikasi menggunakan Smalltalk-80, dikatakan terdapat manfaat  besar  dalam  membangun  aplikasi  dengan pendekatan  modular,  yaitu  dengan  cara  mengisolasi unit  fungsional  dari  unit  yang  lainnya,  sehingga memudahkan  proses  memahami  desain,  dan  proses modifikasi  setiap  unit  aplikasi  yang  dapat  dilakukan tanpa harus mengetahui banyak hal dari unit lainnya. Dengan  MVC  aplikasi  dibagi  menjadi  tiga  kategori: model  sebagai  domain  utama  aplikasi,  view  atau presentasi data dari model, dan interaksi user [5].
MVC  (Model-View-Controller)  adalah  pola desain  perangkat  lunak  yang  dibangun  di  diatas  ke- terhubungan  antara  tiga  komponen  utama,  dalam bahasa pemrograman seperti PHP fokus utama adalah pada  paradigma  pemrograman  berorientasi  objek (OOP),  dimana  tiga  komponen  model,  view  dan controller tidak saling terikat kuat [6].
Dalam  MVC,  model  adalah  tempat  semua logika  bisnis  suatu  aplikasi  disimpan.  Logika  bisnis berupa  sesuatu  yang  spesifik  bagaimana  aplikasi menyimpan  data,  atau  dapat  juga  menggunakan layanan  pihak  ketiga  untuk  memenuhi  persyaratan bisnisnya.  Jika  aplikasi  harus  mengakses  informasi dalam  database  seperti  mengambil  data  atau melakukan  perubahan  data  maka  kode  untuk melakukan itu akan disimpan dalam model.
View  atau  tampilan  adalah  tempat  semua elemen  antarmuka  pengguna  aplikasi  disimpan,  di dalamnya termasuk markup HTML, style sheet CSS, dan  file  JavaScript.  Apapun  yang  dilihat  oleh pengguna  atau  yang  berinteraksi  dengan  pengguna dapat disimpan dalam tampilan.
Controller adalah komponen yang menghubungkan  antara  model  dan  view  secara bersamaan.  Controller  mengisolasi  logika  bisnis sebuah  model  dari  elemen  view  sebagai  antarmuka pengguna.  Controller  juga  menangani  bagaimana aplikasi  akan  merespon  interaksi  pengguna  dengan
view. Controller adalah titik masuk pertama ke dalam tiga  komponen  MVC  dalam  aplikasi,  karena  request aplikasi  pertama  kali  dilewatkan  ke  controller,  yang kemudian  akan instantiate model  dan  view  yang diperlukan  untuk  memenuhi  permintaan  ke  aplikasi [6].

## Gambar  1. Model – View dan Controller
Pada  implementasi  pengembangan  aplikasi berbasis web dengan bahasa pemrograman PHP yang menggunakan  konsep  MVC  dibutuhkan  sebuah framework  aplikasi,  menurut  Larry  Ullman  menggu- nakan  aplikasi  framework  secara  normal  akan memudahkan  80%  pekerjaan,  hanya  20%  dari pekerjaan  yang  butuh  tantangan  untuk  diselesaikan. Artinya framework akan sangat meningkatkan waktu dan  biaya  pengembangan  aplikasi  serta  menjamin performa dari aplikasi [7].
Pada  proses  analisis  dan  desain  aplikasi, penelitian  ini  menggunakan  diagram  UML  (Unified Modeling Language) untuk menterjemahkan permasalahan  di  dunia  nyata  ke  dalam  pemodelan komputer.    UML  adalah  kumpulan  diagram  untuk menentukan  berbagai  aspek  seperti  persyaratan  dan desain  sistem  perangkat  lunak.  UML  juga  adalah seperangkat  notasi  standar  untuk  visualisasi  dan pembangunan  artefak  sistem  perangkat  lunak  serta untuk  pemodelan  bisnis  dan  sistem  non-perangkat lunak lainnya [8].
UML  telah  menjadi  standar  de  facto  untuk desain dan pengembangan sistem dengan pendekatan berorientasi objek (OO) terlepas dari kenyataan bahwa semantiknya bersifat semi-formal yang memungkinkan ambiguitas dalam desain system [9].
Pada proses pengujian dari prototype aplikasi yang  dibuat,  penelitian  ini  melakukan  uji  fungsional aplikasi dengan menggunakan metode pengujian black box.  Pengujian  Black  Box  adalah  strategi  pengujian fungsional  aplikasi  yang  menggunakan  spesifikasi
atau  perilaku  yang  diperlukan  dari  perangkat  lunak sebagai  titik  awal  untuk  merancang  kasus  uji  [10]. Pengujian black-box secara konseptual lebih sederhana  dan  dapat  dengan  mudah  diotomatisasi. Pemilihan  black-box  testing  adalah  strategi  yang umum  diikuti  untuk  menguji  berbagai  sistem perangkat lunak [11].

## 3. Metodelogi Penelitian
Metodelogi  penelitian  yang  dilakukan  pada penelitian  ini  adalah  bersifat  kualitatif  deskriptif, pengambilan data dilakukan melalui proses wawancara  dan  observasi  lapangan,  dilanjutkan dengan  analisis  permasalahan,  pengembangan  model serta dilanjutkan pembuatan prototype aplikasi untuk kemudian dilakukan pengujian sistem.
Gambar  2. Tahapan Penelitian

## 3.1. Observasi
Observasi  lapangan  dan  wawancara  terkait kebutuhan  pengguna  aplikasi  bank  sampah  berbasis web dilakukan pada 9 bank sampah di kelurahan tugu cimanggis  kota  depok.  Wawancara  dilakukan  ke penggiat bank sampah yaitu penanggung jawab bank sampah dan  nasabah bank sampah. Dalam proses ini dikumpulkan  data  berupa  alur  bisnis  proses  yang dilakukan pada aktivitas kegiatan bank sampah.
3.2. Analisis Masalah
Hasil  analisis  masalah  yang  didapat  dari tahapan  observasi  adalah  bagaimana  proses  bisnis transakasi  yang  terjadi  antara  nasabah  dan  bank sampah dapat tercatat dengan baik dan data transaksi dapat  diakses  dengan  cepat  manakala  dibutuhkan. Solusi  yang  diusulkan  adalah  pembuatan  sistem aplikasi berbasis web yang dapat diakses oleh nasabah dan bank sampah secara realtime.
3.3 Pemodelan sistem
Dari  hasil  analisa  permasalahan  kemudian dibuat pemodelan  sistem, terdapat dua bagian sistem besar,  yaitu  sistem  yang  berfokus  pada  user  nasabah
(landing page system) dan sistem yang berfokus pada user bank  sampah  (transaction  system).  Pemodelan sistem secara ringkas digambarkan dalam diagram use case untuk menggambarkan modul-modul pada sistem dan  diagram  relasi  antar  entitas  proses  bisnis  yaitu diagram  entity  relationship  (ERD)  sebagai  desain penyimpanan data dalam sistem database.
3.4 Pengembangan aplikasi
Pada tahapan ini dilakukan proses perancangan  dan  pembuatan  aplikasi  berdasarkan pemodelan sistem yang telah dilakukan. Perancangan desain  berupa  mockup  aplikasi,  untuk  kemudian dilakukan  implementasi  program  menggunakan platform  aplikasi  berbasis  web  yang  terhubung  ke sistem database.

## 3.5 Pengujian aplikasi
Pada  tahapan  ini  prototype  aplikasi  yang sudah dibuat akan diuji apakah fungsional dari modul- modul  aplikasi  dapat  berjalan  atau  berfungsi  dengan baik. Pengujian menggunakan metode blacbox testing.
Gambar  3. Use Case Landing Page System
Gambar  4. Use Case Transaction System
Gambar  5. ERD aplikasi bank sampah

## 4. Implementasi Arsitektur MVC
Pengembangan sistem aplikasi bank sampah berbasis  web  menggunakan  pendekatan  arsitektur MVC yaitu dengan memisahkan lapisan data (model), lapisan  tampilan  (view)  dan  lapisan  penghubung antara  data  dan  tampilan  (controller).  Dengan penerapan  arsitektur  ini  diharapkan  pengembangan aplikasi  dapat  bersifat  modular  dan  memberikan
kemudahan  dalam  proses  maitenance  kode  program serta mendapatkan performa aplikasi yang baik [7].
Gambar  6. Implementasi MVC dalam struktur direktori Yii2 Framework
Pada  penelitian  ini  digunakan  PHP  Yii2 Framework dalam implementasi MVC. Yii2
framework adalah kerangka kerja yang menggunakan murni  dari  konsep  pemrograman  berorientasi  objek (OOP), dan secara de facto menggunakan pola desain MVC.  Yii  juga  dapat  bekerja  dengan  bermacam database  dimana  akses  databasenya  menggunakan Object Relational Mapping (ORM) melalui class yang disebut ActiveRecord [7].

## 5. Hasil dan Pembahasan
Dari proses pengembangan aplikasi dihasilkan  sebuah  prototype  aplikasi  berbasis  web melingkupi  beberapa  fitur  aplikasi  bank  sampah. Akses  aplikasi  dibagi  menjadi  3  bagian  besar,  yaitu akses  user  tamu,  akses  user  nasabah  dan  akses  user admin atau pemilik bank sampah.
Gambar  7. Halaman Landing Page User
Gambar  8. Halaman user bank sampah

## Gambar  9. Halaman administrasi bank sampah
Berikut  ini  hasil  pengujian  fungsional terhadap  prototype  aplikasi  bank  sampah  dengan menggunakan blackbox testing.
Tujuan Use Case Im ple men tasi Hasil Uji Akses User Bank Sampah Akses User Nasab ah Kemud ahan akses oleh Penggu -na View Home page Ya sesuai sesuai Registrasi Ya sesuai sesuai Pencarian Bank Sampah Ya sesuai sesuai Profil Bank Sampah Ya sesuai sesuai Login Ya sesuai sesuai View Profil User Ya sesuai sesuai View Laporan Transaksi Ya sesuai sesuai Kemud ahan View Nasabah Ya Sesuai Kelola Tarif Ya Sesuai
transak si  bank sampah Kelola Jadwal Ya Sesuai Approval Nasabah Baru Ya Sesuai Input Transaksi Nasabah Ya Sesuai Rekap Transaksi Harian Ya Sesuai View Laporan Ya Sesuai
Dari  hasil  pengujian  fungsional  pada prototype aplikasi bank sampah berbasis web didapat pada  semua  fitur  aplikasi  yang  diimplementasikan telah  berjalan  dengan  baik  dan  sesuai  dengan kebutuhan user.

## 7. SIMPULAN
Dari  penelitian  implementasi  arsitektur aplikasi MVC pada perancangan aplikasi bank sampah berbasis web, diperoleh kesimpulan bahwa pengembangan  aplikasi  dilakukan  melalui  tahapan pengumpulan data dengan observasi dan wawancara,
analisis dan pemodelan sistem, implementasi pengkodean  program  menggunakan  web  mvc framework, dan melalui pengujian fungsional aplikasi didapat seluruh fitur aplikasi dapat berjalan dan sesuai dengan kebutuhan user.

## 8. UCAPAN TERIMA KASIH
Penulis  mengucapkan  terima  kasih  kepada Kementerian  Riset Teknologi dan Pendidikan Tinggi Republik  Indonesia  serta  Direktorat  Riset  dan Pengabdian  Masyarakat  atas  supportnya.  Paper  ini merupakan  bagian  dari  Hibah  Program  Kemitraan Masyarakat.  Selain  itu  penulis  juga  mengucapkan terima  kasih  kepada  Sekolah  Tinggi  Teknologi Terpadu  Nurul  Fikri  yang  telah  membantu  dari  sisi sarana  dan  prasarana  sehingga  penelitian  ini  dapat terlaksana dengan baik.

## 9. DAFTAR PUSTAKA
• https://depokkota.bps.go.id , di akses oktober 2018.
• Bappeda  Depok,  Ringkasan  Eksekutif  Kajian Pengelolaan Persampahan Kota Depok.
• J.  Wang,  “Fundamentals  of  erbium-doped  fiber amplifiers  arrays  (Periodical  style—Submitted for  publication),” IEEE  J.  Quantum  Electron. , didaftarkan untuk dipublikasikan.
• Trygve  Reenska, http://heim.ifi.uio.no/~trygver/ themes/mvc/mvc-index.html
• Glenn E. Krasner, Stephen T. Pope, “A cookbook for using the model-view controller user interface paradigm  in  Smalltalk-80”,  Journal  of  Object- Oriented  Programming,  vol.  1,  no.  3,  1988,  pp. 26-49
• Chris Pitt, Pro PHP MVC, Apress, 2012
• Larry Ullman, The Yii Book (2 nd ed.), larry.pub,
2015
• K.  E.  Hamdy,  M.  A.  Elsoud  and  A.  M.  El- Halawany,  “UML-Web  Engineering  Framework for  Modeling  Web  Application,” Journal  of Software  Engineering ,  Vol.  5,  No.  2,  2011,  pp.
49-63. doi:10.3923/jse.2011.49.63
• X.  He,  “Formalizing  UML  Class  Diagrams:  A Hierarchi- cal Predicate Transition Net
Approach,” Proceedings  of  Twenty-Fourth Annual  International  Computer  Software  and Applications  Conference , Taipei, 25-27 October 2000,  pp.  217-222.  doi:10.1109/CMPSAC.2000. 884721
• B.  Beizer.  Software  Testing  Techniques.  Van Nostrand Reinhold, New York, NY, 2nd edition,
1990
• Harish  V.  Kantamneni,  Sanjay  R.  Pillai, Yashwant  K.  Malaiya,  “Structurally  Guided Black  Box  Testing”,  Departement  of  computer science Colorado state university

## Biodata Penulis:
Sirojul Munir, memperoleh gelar Sarjana Matematika (S.Si)  Jurusan  Matematika  Universitas  Indonesia Depok,  dan  gelar  Magister  Komputer  (M.Kom) Program  Pasca  Sarjana  Magister  Ilmu  Komputer Universitas  Budi  Luhur  Jakarta.  Saat  ini  menjadi dosen  sekaligus  menjabat  wakil  ketua  I  bidang akademik di kampus STT Terpadu Nurul Fikri Depok, Jawa Barat.
Ahmad  Rio  Adriansyah,  memperoleh  gelar  sarjana sains (S.Si) dari program studi matematika ITB. Gelar magister diperoleh dari program double degree antara ITB dan Kanazawa University di bidang Computational  Science  tahun  2013.  Saat  ini  menjadi dosen  dan  menjabat  kaprodi  Teknik  Informatika  di STT Terpadu Nurul Fikri, Depok.
Radon  Dhelika,  memperoleh  gelar  sarjana  bachelor engineering  (Eng)  dari  Nanyang  Technological University  Singapura.  Gelar  master  dan  doktorial (Phd) didapat dari Tokyo Institute of Technology. Saat ini  menjadi  dosen  di  program  studi  Teknik  Mesin Universitas Indonesia, Depok.
Riyan  Wahyudi,  mahasiswa  program  studi  Teknik Informatika STT Terpadu Nurul Fikri angkatan 2015.