## PENGEMBANGAN APLIKASI BERBASIS RESPONSIVE WEBSITE MENGGUNAKAN METODE EXTREME PROGRAMMING

## Abstract
[Application Development Based on Responsive Website using Extreme Programming Method] The use of information  technology,  especially  computer  network-based  applications,  is  currently  increasingly widespread.  This  is  indicated  by  the  number  of  educational  institutions  that  have  begun  to  apply  this technology  to  solve  various  problems  faced.  One  of  the  educational  institutions  currently  committed  to implementing information technology is the Almuslim Integrated Islamic Boarding School. This study aims to develop an information system for the registration of prospective new students at the Almuslim Integrated Islamic Boarding School based on a responsive website using the Extreme Programming (XP) method. This method  is  used  to  achieve  the  ultimate  goal  of  system  development  quickly  and  effectively.  Development Based  on  the  system  implemented,  this  method  is  able  to  accommodate  the  system  development  process quickly with a focus on the process of writing program code. The results obtained are a responsive website- based information system for registration of prospective new students which was developed in a short time. This result is different from the development of the previous system using the waterfall model.
Keywords: Application; Extreme Programming; System Development; Responsive Websites.

## Abstrak
Penggunaan teknologi informasi khususnya aplikasi berbasis jaringan komputer saat ini semakin meluas. Hal ini  ditandai  dengan  banyaknya  institusi  pendidikan  yang  mulai  menerapkan  teknologi  ini  untuk menyelesaikan berbagai persoalan yang sedang dihadapi. Salah satu institusi pendidikan yang saat ini juga komitmen  untuk  menerapkan  teknologi  informasi  adalah  Pesantren  Terpadu  Almuslim.  Penelitian  ini bertujuan untuk melakukan pengembangan sistem informasi pendaftaran calon santri baru Pesantren Terpadu Almuslim berbasis responsive website dengan menggunakan metode Extreme Programming (XP). Metode ini  digunakan  untuk  mencapai  tujuan  akhir  pengembangan  sistem  secara  cepat  dan  efektif.  Berdasarkan pengembangan  sistme  yang  dilakukan,  metode  ini  mampu  mengakomodasi  proses  pengembangan  sistem secara cepat dengan fokus pada proses penulisan code program. Adapun hasil yang didapatkan yaitu sistem informasi  berbasis  responsive  website  untuk  pendaftaran  calon  santri  baru  yang  berhasil  dikembangkan dalam  waktu  yang  singkat.  Hal  ini  berbeda  hasilnya  dengan  pengembangan  sistem  terdahulu  yang menggunakan model waterfall.
Kata Kunci: Aplikasi; Extreme Programming; Pengembangan Sistem; Responsive Website.

## 1. Pendahuluan
Meluasnya  penggunaan  sistem  informasi  pada  berbagai  instansi  baik  instansi  pemerintahan  maupun instansi non pemerintahan menandakan perkembangan teknologi yang semakin hari semakin masif. Berbagai perusahaan dan lembaga-lembaga yang ada di Indonesia khususnya bersaing dalam menerapkan teknologi informasi dalam meningkatkan kualitas pelayanannya. Salah satu contoh nya adalah di bidang pendidikan, dimana lembaga pendidikan di Indonesia hari ini dituntut supaya mengadopsi penggunaan berbagai aplikasi

## Dedy Armiady
1) Program Studi Sistem Informasi, Fakultas Ilmu Komputer, Universitas Almuslim
2) Program Studi Informatika, Fakultas Ilmu Komputer, Universitas Almuslim Jl. Almuslim - Paya Cut Kecamatan Peusangan Kab. Bireuen - Aceh
e-mail : dedy.armiady@gmail.com
komputer sebagai produk teknologi di masa industri 4.0 seperti sekarang ini (Silahuddin 2015; Hanum & Suprayekti 2019; Tesa et al. 2021) . Lembaga pendidikan yang menggelar pendidikan diberbagai jenjang saat  ini  bahkan  telah  diatur  secara  tidak  langsung  oleh  kementerian  yang  berwenang  untuk  aktif  dalam penggunaan  teknologi  informasi.  Meskipun  aturan  ini  belum  diwajibkan  secara  baku,  namun  pemerintah melalui  lembaga  akreditasi  tertentu  akan  memberikan  penghargaan  khusus  bagi  lembaga  pendidikan  di Indonesia yang menjalankan proses pendidikan berbasis teknologi informasi (Syamsuar & Reflianto 2018; Zen 2018).
Pesantren  Terpadu  Almuslim  merupakan  salah  satu  lembaga  yang  memiliki  komitmen  tinggi  dalam meningkatkan  kualitas  lembaga  pendidikannya,  salah  satunya  melalui  pemanfaatan  teknologi  informasi berbasis  komputer.  Salah  satu  fokus  pengembangan  aplikasi  berbasis  teknologi  informasi  saat  ini  pada Pesantren Terpadu Almuslim adalah sistem informasi penerimaan santri baru. Aplikasi ini dibangun dengan menggunakan  bahasa  pemrograman  web,  dimana  sudah  banyak  metode  pengembangan  sistem  yang digunakan  seperti  metode  Waterfall  dinilai  masih  belum  mampu  memenuhi  kebutuhan  pengguna  secara efektif dan efisien (2014; Widiyanto 2018; Gustina & Leidiyana 2020). Hal ini dikarenakan metode Waterfall memiliki  kelemahan  pada  efisiensi  waktu  pengembangan  sistem,  dikarenakan  metode  ini  terlalu berfokus kepada  proses  pengembangan  sistem,  sedangkan  dari  sisi  pengguna  aplikasi  yang  sedang  dikembangkan diharapkan untuk dapat segera digunakan (Mluyati 2019; Stinjak & Masya 2021). Berdasarkan permasalahan tersebut,  penulis  mencoba  untuk  melakukan  penerapan  suatu  metode  pengembangan  sistem  yang  biasa disebut  dengan  metode  extreme  programming,  dimana  pada  metode  ini  sistem  dikembangkan  dengan berorientasi kepada user atau pengguna (Azizah, Ambarsari & Hanafi 2015; Lestari 2019; Sayfulloh 2021; Kurniawan  2022).  Penerapan  metode  ini  dilakukan  pada  kasus  penerimaan  santri  baru  pada  Pesantren Terpadu  Almuslim,  dengan  aplikasi  berbasis  web  responsive  menggunakan  bahasa  pemrograman  PHP MySQL serta framework Codeigniter.

## 2. Metode
Metode penelitian yang digunakan dibagi menjadi dua jenis, yaitu metode pengumpulan data serta metode pengembangan sistem. Adapun metode pengumpulan data yang penulis gunakan adalah sebagai berikut:
1. Observasi, penulis melakukan pengamatan terhadap model atau aturan bisnis yang ada dalam kasus penerimaan santri baru pada Pesantren Terpadu Almuslim.
2. Wawancara, pada tahap ini penulis melakukan wawancara langsung dengan pemangku kepentingan pengembangan sistem informasi penerimaan santri baru untuk mengetahui secara jelas terkait proses penerimaan sehingga memudahkan penulis dalam memetakan kebutuhan sistem serta rancangan dari sistem penerimaan santri baru Pesantren Terpadu Almuslim.
3. Studi pustaka, pada tahap ini penulis melakukan pengumpulan data pustaka untuk mendukung proses pengembangan  sistem  informasi  khususnya  pada  metode  pengembangan  sistem  yang  akan digunakan.
Adapun metode yang digunakan dalam pengembangan sistem adalah metode extreme programming (XP). Metode  extreme programming  merupakan metode yang  fokus kepada penulisan coding  aplikasi, sehingga memudahkan  proses  pengembangan  sistem  yang  lebih  fleksibel.  Adapun  gambaran  dari  metode  extreme programming dapat dilihat pada gambar berikut:
Gambar 1. Metode Extreme Programming (XP) Sumber: (Borman, Priandika & Edison 2020)
Adapun  rincian  tahapan  dari  metode  extreme  programming  alur  diatas  adalah  sebagai  berikut: (Suryantara 2017)
1. Planning, dimana pada tahap ini dilakukan analisis secara mendalam untuk memahami model bisnis dari aplikasi yang akan dikembangkan dan output yang ingin dicapai. Selain itu pada tahap ini juga ditentukan alur pengembangan aplikasi.
2. Design, dimana pada tahap ini dilakukan design secara sederhana menggunakan use case diagram, class diagram  serta activity diagram. Perancangan pada metode extreme programming jauh lebih sederhana jika dibandingkan dengan metode waterfall yang fokus pada kesempurnaan tiap proses yang dilalui.
3. Coding,  dimana  tahap  ini  merupakan  fokus  dari  mtode  extreme  programming.  Pada  tahap  ini dilakukan penerjemahan dari bahasa manusia yang berupa hasil perancangan dari tahap sebelumnya, menjadi bahasa yang dimengerti oleh mesin (bahasa program). Bahasa pemrograman pada tahap ini dibagi menjadi dua jenis, yaitu back-end dan front-end.
4. Testing,  dimana  pada  tahap  ini  dilakukan  pengujian  yang  berfokus  kepada  usability,  yaitu berorientasi kepada kepuasan pengguna atau kesesuaian dengan kebutuhan user.

## 3. Hasil dan Pembahasan
1. Analisis Sistem Berjalan
Aplikasi penerimaan santri baru yang dibangun pada Pesantren Terpadu Almuslim menggunakan model extreme  programming  dengan  menggunakan  bahasa  PHP  MySQL  serta  framework  Codeigniter  agar mendapatkan  hasil  yang  sesuai  dengan  yang  diinginkan.  Adapun  hasil  yang  diinginkan  yaitu  aplikasi penerimaan santri baru berbasis web responsive, sehingga dapat berjalan dengan baik pada berbagai platform perangkat teknologi seperti PC, laptop, handphone dan tablet.
Aplikasi ini dapat diakses oleh user yang terdiri dari panitia, admin aplikasi serta calon santri. Menu yang dapat diakses oleh panitia adalah sebagai berikut:
a. Penjadwalan penerimaan santri baru
b. Pembukaan masa penerimaan dan pendaftaran santri baru
c. Berinteraksi dengan calon santri, terkait masalah yang dihadapi saat melakukan pendaftaran
d. Membuat pengumuman secara online pada aplikasi web
e. Membuat jadwal wawancara untuk santri baru
f. Melakukan registrasi manual untuk calon santri baru
g. Melakukan pengelolaan data pembayaran registrasi santri baru
h. Pembuatan laporan
Sedangkan pada sisi user calon santri, menu yang dapat diakses adalah sebagai berikut:
a. Melakukan regitrasi data dan upload berkas yang dibutuhkan
b. Melakukan pemutakhiran data (Update/Revisi)
c. Print bukti pendaftaran santri baru
d. Chat online dengan panitia
e. Melihat informasi dan pengumuman lainnya
2. Desain Sistem
Context diagram  atau diagram  konteks menggambarkan sistem kerja secara keseluruhan terhadap user yang  terlibat  secara  langsung  dalam  sistem.  Adapun  diagram  konteks  sistem  informasi  penerimaan  santri baru Pesantren Terpadu Almuslim dapat dilihat pada gambar berikut ini:
Diagram tersebut menjelaskan keterlibatan dan hubungan aliran data antara beberapa entitas yang terlibat langsung di dalam sistem. Entitas pimpinan dapat menentukan kebijakan yang akan dijadikan acuan dalam pelaksanaan penerimaan santri baru, entitas panitia dapat membuat jadwal penerimaan serta pengumuman, entitas  pendaftar  dapat  melakukan  input  informasi  berupa  data  diri  dan  berbagai  berkas  yang  dibutuhkan. Disamping  itu  semua  entitas  juga  mendapatkan  putput  data  yang  beragam,  mulai  dari  laporan,  infomasi pengumuman dan kebijakan serta informasi jadwal, output bukti pendaftaran dan lain sebagainya.
Pada bagian desain sistem, juga dilakukan perancangan lain seperti perancangan DFD level 0 dan level 1, perancangan database, perancangan interface dan berbagai perancangan lainnya. Hasil dari perancangan tersebut kemudian digunakan sebagai dasar untuk melakukan implementasi kedalam bentuk kode program yang dilakukan pada tahap berikutnya.
3. Coding (Implementasi)
Pada tahap ini dilakukan implementasi hasil rancangan yang ada pada tahap sebelumnya ke dalam code program. Tahapan ini dibagi menjadi dua janis coding, yaitu back-end coding dan front-end coding. Dalam kasus web programming, maksud ari back-end coding merupakan implemantasi atau penulisan code program untuk  interface  atau  sesuatu  programming  yang  tidak  terlihat  oleh  user,  seperti  coding  untuk  koneksi database,  pembuatan  model  dengan  framework,  coding  yang  berhubungan  dengan  proses  CRUD  (Create, Read, Update, Delete) dan proses-proses banc-end lainnya. Sedangkan proses front-end coding merupakan penulisan kode program untuk melahirkan user interface yang dapat dilihat langsung oleh user atau pengguna sistem. Proses front-end coding biasanya dilakukan untuk membuat tampilan website yang akan dilihat secara langsung oleh user.
1) Coding form login
Proses  penulisan  kode  program  untuk  form  login  dilakukan  untuk  melakukan  desain  antar  muka yang dapat diakses oleh user untuk masuk ke dalam sistem. Adapun potongan kode program untuk form login dapat dilihat pada gambar berikut:
Gambar 3. Bagian Kode Program Form Login
Adapun hasil tampilan dari proses penulisan kode tersebut dapat dilihat pada gambar dibawah ini:

## Gambar 4. Hasil Coding Form Login
2) Coding Dashboard Admin
Pada tahap ini, dilakukan penulisan code HTML yang dipadukan dengan PHP dan MySQL untuk menampilkan  interface  pada  aplikasi  browser  pengguna.  Adapun  potongan  kode  program  untuk dashboard admin dapat dilihat pada gambar berikut:
Gambar 5. Potongan Coding untuk Dashboard Admin
Berdasarkan kode program yang ditulis untuk dashboard admin, maka dapat dilihat hasil tampilan user interface melalui browser seperti pada gambar berikut:
3) Coding Halaman Data Calon Santri
Data yang tersimpan pada database harus dapat diakses dengan mudah melalui suatu interface yang  menarik.  Berikut  ini  merupakan  koding  untuk  melihat  data  calon  santri  pada  Pesantren Terpadu Almuslim.
Gambar 7. Coding Tampilan Lihat Data Calon Santri
Berdasarkan  coding  tersebut,  maka  didapatkan  tampilan  user  interface  untuk  melihat  data  calon santri Pesantren Terpadu Almuslim adalah sebagai berikut:
Gambar 8. Tampilan Interface Lihat Data Calon Santri
4) Coding untuk Interface Detail Calon Santri
Disamping melihat data santri secara keseluruhan, sistem yang dibangun juga memungkinkan user untuk melihat data santri secara detail untuk setiap santri yang melamar. Adapun potongan kode program untuk interface detail calon satri adalah sebagai berikut:
Gambar 9. Kode Program Interface Detail Calon Santri
Berdasarkan kode yang dituliskan tersebut, maka didapatkan hasil interface detail calon santri baru Pesantren Terpadu Almuslim adalah sebagai berikut:
Gambar 10. Interface Detail Calon Santri
Dalam sistem yang dibangun ini juga memungkinkan user calon santri maupun user panitia untuk melakukan  cetak  laporan  registrasi  untuk  keperluan  invoice  atau  pembayaran.  Adapun  tampilan detail  pembayaran  berbasis  invoice  yang  ada  pada  aplikasi  registrasi  calons  antri  baru  Pesantren Terpadu Almuslim adalah sebagai berikut:
Gambar 11. Laporan / Invoice Pembayaran

## 4. Kesimpulan
Berdasarkan pembahasan yang telah dilakukan pada bagian sebelumnya, maka dari penelitian ini dapat ditarik beberapa kesimpulan, diantaranya adalah:
1. Pengembangan  aplikasi  dengan  metode  Extreme  Programming  (XP)  dapat  mempercepat  proses pengembangan sistem informasi pendaftaran calon santri baru pada Pesantren Terpadu Almuslim.
2. Sistem  informasi  pendaftaran  calon  santri  baru  yang  dibangun  berbasis  responsive  website,  yang artinya website yang dibangun secara responsive berjalan pada berbagai platform seperti komputer, laptop, tablet, smartphone dan berbagai perangkat lainnya.
3. Responsive  website  bekerja  dengan  menyesuaikan  bidang  layar  perangkat  pengguna,  sehingga informasi yang ditampilkan bersifat responsive dengan menyesuaikan bentuk dan model informasi yang tampil.

## Daftar Pustaka
Azizah,  F.N.,  Ambarsari,  N.  &  Hanafi,  R.,  2015,  “MEMBANGUN  WEB  SERVICE  PADA  SISTEM
INFORMASI PERIZINAN ANGKUTAN UMUM DENGAN METODE EXTREME PROGRAMMING  (STUDI  KASUS  DINAS  PERHUBUNGAN  KABUPATEN  BANDUNG BARAT),” Jurnal Rekayasa Sistem & Industri (JRSI) , 2(04).
Borman, R.I., Priandika, A.T. & Edison, A.R., 2020, “Implementasi Metode Pengembangan Sistem Extreme Programming  (XP)  pada  Aplikasi  Investasi  Peternakan,” Jurnal  Sistem  dan  Teknologi  Informasi (Justin) , 8(3).
Gustina,  R.  &  Leidiyana,  H.,  2020,  “SISTEM  INFORMASI  PENGGAJIAN  KARYAWAN  BERBASIS WEB MENGGUNAKAN FRAMEWORK LARAVEL,” JSiI (Jurnal Sistem Informasi) , 7(1).
Hanum,  F.F.  &  Suprayekti,  2019,  “PENERAPAN  TEKNOLOGI  PENDIDIKAN  DI  LEMBAGA PENDIDIKAN NONFORMAL,” JIV-Jurnal Ilmiah Visi , 14(1).
Kurniawan,  R.,  2022,  “Perancangan  dan  Implementasi  Sistem  Otentikasi  OAuth  2.0  dan  PKCE  Berbasis Extreme Programming (XP),” Jurnal Pendidikan dan Teknologi Indonesia , 2(2).
Lestari, D., 2019, “Analisa Dan Perancangan Aplikasi Sistem Pelayanan Klinik Gigi (Studi Kasus: Dental Echo Clinic),” JSAI (Journal Scientific and Applied Informatics) , 2(1).
Mluyati,  S.S.,  2019,  “RANCANG  BANGUN  SISTEM  INFORMASI  PENYEWAAN  WEDDING ORGANIZER BERBASIS WEB DENGAN PHP DAN MYSQL PADA KIKI RIAS,” Jurnal Teknik , 7(2).
Sayfulloh, A., 2021, “Perancangan Program Penjualan Mainan Berbasis Web Menggunakan Metode Extreme Programming,” remik , 5(2).
Silahuddin,  S.,  2015,  “Penerapan  E-Learning  dalam  Inovasi  Pendidikan,” CIRCUIT:  Jurnal  Ilmiah Pendidikan Teknik Elektro , 1(1).
Stinjak,  M.L.  &  Masya,  F.,  2021,  “PERANCANGAN  DAN  IMPLEMENTASI  SISTEM  INFORMASI INVENTORY  BERBASIS  WEBSITE  MENGGUNAKAN  ITERATIVE  WATERFALL,” Rabit : Jurnal Teknologi dan Sistem Informasi Univrab , 6(2).
Suryantara, I.G.N., 2017, “Merancang Applikasi dengan Metodologi Extreme Programming,” PT Elex Media Komputindo , (May 2017).
Syamsuar & Reflianto, 2018, “Pendidikan dan Tantangan Pembelajaran Berbasis Teknologi Informasi di Era Revolusi Industri 4.0,” Jurnal Ilmiah Teknologi Pendidikan , 6(2).
Tesa, S.N., Komalasari, H., Budiman, A., Tari, D.P., Indonesia, U.P., Setiabudhi, J., Bandung, K. & Barat, J.,  2021,  “Studi  Kasus  Pembelajaran  Tari  Melalui  Daring  Di  Sekolah  Indonesia  Kota  Kinabalu Malaysia,” Ringkang , 1(1).
Widiyanto,  W.W.,  2018,  “Analisa  Metodologi  Pengembangan  Sistem  Dengan  Perbandingan  Model Perangkat Lunak Sistem Informasi Kepegawaian Menggunakan Waterfall Development Model, Model Prototype, Dan Model Rapid Application Development (Rad),” Jurnal  Informa Politeknik Indonusa Surakarta ISSN , 4(1).
Zen, Z.,  2018,  “Inovasi  Pendidikan  Berbasis  Teknologi  Informasi :  Menuju  Pendidikan  Masa  Depan,” e- Tech : Jurnal Ilmiah Teknologi Pendidikan , 6(2).
2014,  “Mengintip  dasar  pengembangan  sistem  informasi  dengan  metode  Agile.  Why  Agile  Rocks?,” JURNAL SISTEM INFORMASI UNIVERSITAS SURYADARMA , 6(1).