VOL .06 NO .01, PP . 17-22 P -ISSN : 2548-9534 | E -ISSN : 2548-9550

## Pengembangan Portal Manasik Haji Pada Website Islamic Vibes
Irfanda Naufal Ghifari a , Hari Setiaji, S.Kom., M.Eng. b
a Universitas Islam Indonesia, Yogyakarta
b Universitas Islam Indonesia, Yogyakarta

## I NFORMASI A RTIKEL

## ABSTRACT
Sejarah Artikel: Diterima Redaksi: 14 Juni 22
Revisi Akhir: 13 Juli 22 Diterbitkan Online : 18 Juli 22
Haji  merupakan  rukun  islam  ke-5  dan  kewajiban  bagi  umat  Islam  yang mampu. Dalam mempersiapkan keberangkatan, calon jamaah haji diberikan pengarahan/pembekalan namun hal ini dinilai belum efektif. Dengan adanya perkembangan  teknologi  seperti  komputer  dan smartphone, pencarian informasi  tentang  haji  dapat  menjadi  efektif,  sehingga  dibutuhkan  sistem berbasis website yang  memuat  panduan  ibadah  haji.  Dilihat  dari  kajian pustaka,  mayoritas  sistem,  perangkat  lunak,  atau  aplikasi  yang  berkaitan dengan manasik haji berbasis mobile . Maka dari itu, tim pengembang dari Islamic  Vibes  membangun  portal  manasik  haji  berbasis website .  Islamic Vibes adalah startup yang berfokus pada penyedia layanan untuk agen travel haji  dan  umrah.  Dengan  portal  ini  diharapkan  dapat  mempermudah  calon jamaah untuk lebih paham dalam melakukan prosesi ibadah haji. Sistem ini dibangun menggunakan framework Laravel dengan metode pengembangan aplikasi waterfall . Waterfall memiliki  4  tahapan,  yaitu  analisis  kebutuhan sistem, perancangan dan desain sistem, implementasi, dan pengujian sistem. Metode waterfall dipilih karena memiliki rangkaian alur kerja sistem yang jelas dan terstruktur. Hasil dari penelitian ini berupa sistem portal manasik haji berbasis website .
DOI: https://doi.org/10.46961/jommit.v6i1

## K ATA K UNCI
Manasik Haji, Website, Islamic Vibes, Framework, Laravel, Waterfall

## K ORESPONDENSI
Irfanda Naufal Ghifari Program Studi Informatika Fakultas Teknologi Industri, Universitas Islam Indonesia
Jalan Kaliurang KM 14,5 Yogyakarta 55581 Email: 18523019@students.uii.ac.id

## 1. PENDAHULUAN
Negara  Indonesia  merupakan  negara  dengan  jumlah  penduduk beragama  Islam  terbanyak  di  dunia.  Dengan  mayoritas penduduknya  muslim,  Indonesia  selalu  menyelenggarakan ibadah  haji  setiap  tahunnya  [1].  Namun,  dua  tahun  terakhir  ini pemberangkatan  calon  jamaah  haji  ditiadakan,  karena  dampak dari pandemi yang terjadi.
Sebelum haji dilaksanakan, calon jamaah harus punya bekal atau pemahaman.  Dengan  ini,  perlu  adanya  manasik  haji  sebagai bimbingan  yang  dilakukan  calon  jamaah  sebelum  pelaksanaan
ibadah  haji.  Manasik  haji  bertujuan  supaya  calon  jamaah  dapat memahami aturan dan tata cara dalam haji [2].
Calon  jamaah  biasanya  mendapatkan  informasi  tentang  ibadah haji melalui mulut ke mulut, media cetak, brosur, baliho, internet, dan  media  sosial.  Tetapi  faktanya,  informasi  yang  diberikan  ke calon  jamaah  haji  masih  kurang  lengkap  sehingga  banyak masyarakat yang masih bingung tentang ibadah haji.
Di zaman sekarang, dengan adanya internet sebagai media untuk menjangkau  semua  informasi  dengan  cepat.  Perusahaan  dan pemilik usaha dapat mengembangkan target pasarnya. Walaupun internet  memiliki  peranan  penting,  tantangan  tetap  ada  bagi pemilik  usaha  untuk  bagaimana  memenangkan  pasar  salah
VOL .06 NO .01, PP . 17-22 P -ISSN : 2548-9534 | E -ISSN : 2548-9550
satunya dengan media pemasaran dengan menggunakan website . Dengan  melakukan  promosi  melalui website tidak  ada  batasan waktu  dan  tempat  selain  itu  bisa  dilakukan  siapa  saja  baik perusahaan yang besar maupun perusahaan kecil [3].
Karena  itu,  penulis  membuat website yang  berfokus  untuk mempromosikan agen travel haji dan berisikan semua informasi tentang manasik haji. Fitur pada website ini yaitu tata cara dalam haji,  niat,  dan  doa-doa  selama  pelaksanaan  ibadah  haji  dalam bentuk tulisan maupun video. Diharapkan dengan adanya website portal manasik haji ini dapat memberikan pemahaman pada calon jamaah  sebelum  mereka  melaksanakan  ibadah  haji  yang sebenarnya.

## 2. PENELITIAN TERDAHULU
Penulis  akan  memberikan  beberapa  penelitian  lainnya  yang berkaitan  dengan  topik  aplikasi  haji,  yang  mencakup  konten untuk panduan mengenai ibadah haji.
Dalam penelitian yang dilakukan oleh Kemal Dega Pasha dengan membangun  sebuah  aplikasi  haji  dan  umrah  berbasis android / mobile yang  berfokus  pada  aplikasi  tuntunan  pedoman untuk ibadah haji dan umrah [4]. Peneliti menggunakan metode waterfall [5]  pada  saat  pembuatan  aplikasi  ini.  Pada  aplikasi tersebut  terdapat  beberapa  konten  tentang  panduan  haji  yang mencakup informasi dengan gambar, video, suara, dan teks. Serta memiliki  konten  mengenai  larangan  ketika  berihram,  doa-doa tambahan ketika jamaah berada di Mekkah dan Madinah.
Penelitian  lain  yang  serupa  dilakukan  oleh  Deddy  Sucipta Syahril, R. Rizal Isnanto, dan Rinta Kridalukmana yang membuat aplikasi panduan ibadah haji berbasis mobile khususnya android . Aplikasi ini hanya memuat informasi tentang panduan haji berupa teks saja, tidak terdapat gambar, suara, maupun video [6].
Pengembangan aplikasi manasik haji dan umrah berbasis android lainnya  dilakukan  oleh  Muchamad  Usman,  Imam  Saufik Suasana,  dan  Arsito  Ari  Kuncoro  ini  memuat  informasi  berupa teks, gambar, dan video [7].

## 3. REVIEW APLIKASI SEJENIS
Penulis akan menampilkan beberapa aplikasi mengenai panduan manasik haji pada platform mobile dan website . Setiap aplikasi pasti  memiliki  kelebihan,  kekurangan,  dan  ciri  khas  masing- masing.
Aplikasi  pertama  adalah  aplikasi  berbasis mobile tentang panduan  manasik  haji  yang  dirilis  langsung  oleh  Kementerian Agama  Republik  Indonesia  dengan  nama  aplikasi  Haji  Pintar secara keseluruhan aplikasi Haji Pintar sudah baik, tetapi masih ada kekurangannya antara lain aplikasi ini belum ada informasi manasik  haji  berupa  video,  banyak  pengguna  yang  masih kesulitan  untuk  daftar  akun  baru,  dan  kesulitan  untuk  mencari nomor porsi calon jamaah.
Aplikasi mobile lainnya adalah Bekal Haji dan Umroh untuk isi materi  manasik  haji  sudah  lengkap  dan  bagus,  namun  banyak pengguna  yang  mengeluh  karena  setelah  memperbarui  aplikasi tidak bisa dibuka kembali.
Selanjutnya  aplikasi  manasik  haji  berbasis website yang  dipilih oleh penulis adalah Bekal Islam dan situs resmi yang dikeluarkan oleh  Kementerian  Agama  Republik  Indonesia.  Dalam website yang dibuat Bekal Islam, panduan untuk ibadah haji dan umrah sangat  lengkap  dan  rapi  dengan  memetakan  setiap  poinnya. Informasi yang disajikan pada website ini berupa teks latin dan huruf arab, namun belum ada data berupa gambar, suara, video, maupun  animasi  pendukung.  Bekal  Islam  juga  memberikan informasi  mengenai  pertanyaan  yang  sering  ditanyakan  oleh calon jamaah haji.
Aplikasi website kedua  yaitu  situs  manasik  haji online yang dibuat  oleh  Kemenag  Indonesia. Website ini  memiliki  7  menu yang berbeda, seperti tuntunan manasik haji masa pandemi, data dan  profil  KBIHU  (Kelompok  Bimbingan  Ibadah  Haji  dan Umrah),  tuntunan  manasik  di  situasi  normal,  doa  dan  dzikir, ringkasan doa, konsultasi terkait manasik, dan manasik haji untuk perempuan.  Pada  website  ini,  apabila  setiap  menu  yang  dipilih akan  otomatis  mengunduh  dokumen  dengan  format  .pdf ( Portable Document Format ).

## Gambar 1. Logo Aplikasi Panduan Haji
Dari  pemaparan  penulis  tentang  aplikasi mobile dan website di atas  kurang  lengkap  dan  tidak  ada  fitur  berita  terkini  terkait dengan informasi seputar haji. Maka dari itu, tim Islamic Vibes membuat  portal  manasik  haji  berbasis website dengan menambahkan  fitur  berita  pada  sistemnya.  Portal  manasik  haji terdapat tiga menu utama, yaitu artikel, video, dan berita seputar ibadah haji. Tipe informasi pada portal manasik haji berupa teks, video, animasi, gambar, dan audio.

## 4. KONSEP PERANCANGAN
Penelitian  ini  menerapkan  metode waterfall .  Metode waterfall merupakan  pengembangan  suatu  sistem  yang  diterapkan  secara sistematik  dan  sekuensial  [5].  Penelitian  ini  melalui  4  tahapan, yaitu analisis kebutuhan sistem, perancangan dan desain sistem, implementasi,  serta  pengujian  sistem  yang  dapat  dilihat  pada Gambar 2.
VOL .06 NO .01, PP . 17-22 P -ISSN : 2548-9534 | E -ISSN : 2548-9550

## Gambar 2. Tahapan Penelitian

## 4.1. Analisis Kebutuhan Sistem
Tahapan  ini  akan  membahas  tentang  cara  kerja  sistem  serta aktivitas  yang  terjadi  dalam  sistem  yang  akan  dibangun  yaitu portal manasik haji dengan framework Laravel dimana sistem ini bertujuan  sebagai  panduan  untuk  para  calon  jamaah  dalam melaksanakan ibadah haji.

## 4.2. Perancangan dan Desain Sistem
Selanjutnya, tahap perancangan dan desain sistem dilakukan oleh tim frontend Islamic  Vibes.  Pada  tahapan  ini,  perancangan  dan desain  sistem  dibuat  dalam  bentuk  purwarupa  melalui  aplikasi Figma.  Tahap  pertama  dalam  perancangan  adalah  membuat diagram UML ( Unified Modelling Language ) berupa diagram use case untuk  2  aktor,  yaitu  agen  travel  haji  &  umrah  dan  calon jamaah. Tahapan kedua, yaitu membuat diagram aktivitas yang berfungsi untuk memodelkan berbagai proses  yang terjadi pada sistem.  Tahapan  terakhir  adalah  membuat  diagram  relasi  tabel basis data.

## 4.3. Implementasi Sistem
Setelah proses perancangan dan desain sistem selesai, dilanjutkan dengan  proses  implementasi.  Tahapan  ini  akan  dilakukan pengembangan  sistem  yaitu  pembuatan  portal  manasik  haji berbasis website dengan  menggunakan framework Laravel. Tahap implementasi dimulai dengan instalasi framework Laravel dan  dilanjutkan  dengan  membuat  basis  data  menggunakan MySQL . Sistem portal manasik haji ini dibangun dengan bahasa pemrograman  PHP  yang  ditulis  pada  aplikasi Microsoft  Visual Studio Code . Hasil dari tahap implementasi adalah sistem portal manasik haji berbasis website .
4.4. Pengujian Sistem
Tahapan  terakhir  yaitu  proses  pengujian  sistem.  Pada  tahap  ini sistem yang sudah diimplementasikan akan dilakukan pengujian yang bertujuan untuk memastikan bahwa sistem berjalan dengan baik dan sesuai dengan rancangan awal serta semua fungsi sistem bekerja.

## 5. HASIL DAN PEMBAHASAN
Pada  pembahasan  ini  menjelaskan  hasil  dari  implementasi  dan pengujian  dari  sistem  portal  manasik  haji.  Dalam  sistem  ini terdapat  2  aktor,  yaitu admin yang  merupakan  pihak  agen  haji umrah dan user yang merupakan calon jamaah haji dan umrah.

## 5.1. Perancangan Solusi
Selain  mengembangkan website untuk  agen  haji  umrah  dalam meningkatkan  penjualan  paket  haji,  Islamic  Vibes  juga mengembangkan website khusus  berupa  portal  manasik  haji untuk para calon jamaah sebelum melaksanakan kegiatan ibadah haji  yang  sebenarnya.  Dalam  portal  manasik  haji  ini  terdapat  3 menu utama pada navigation bar , yaitu artikel, konten, dan berita.
5.1.1. Menu Artikel
Pada  menu  artikel,  memuat  informasi  tentang  tata  cara  dalam melakukan  manasik  haji,  antara  lain  ihram,  niat,  wukuf,  mabit, lempar  jumrah,  thawaf,  sa’i,  dan  tahallul  yang  dikemas  dalam bentuk beberapa kartu sesuai submenu yang ada. Dalam masing- masing  kartu,  terdapat  tipe  data  berupa  gambar,  judul,  dan deskripsi singkat terkait kegiatan dalam bentuk teks. Selain itu, ada juga menu niat dan doa yang terdapat di bawah kartu berupa playlist .
Playlist ini merupakan kumpulan video panduan dalam manasik haji.  Berikut  beberapa  video  panduan  yang  ada,  yaitu  panduan haji, miqat, ihram, talbiyah, thawaf, sa’i, wukuf, mabit, melontar jumrah,  tahallul,  dam,  nafal,  dan  badal  haji.  Pada playlist menampilkan  judul  panduan  dan  tombol  yang  apabila  dipilih akan langsung menuju ke halaman konten berupa video.

## 5.1.2. Menu Konten
Di  menu  konten  ini,  video  panduan  manasik  haji  akan ditampilkan  dan  otomatis  terputar  sesuai  judul  yang  dipilih. Selain  menampilkan  video,  pada  halaman  ini  ditampilkan  juga playlist untuk video yang lainnya.
5.1.3. Menu Berita
Pada  menu  berita,  halaman  atas website menampilkan  judul dengan  nama  “Berita  Terbaru”  yang  berisi terkait  kabar  terkini mengenai  haji.  Di  berita  terbaru,  informasi  ditampilkan  dalam bentuk  beberapa slide dengan  adanya  gambar  dan  judul  berita serta  dapat  diklik  untuk  melihat  lebih  lengkap  isi  dari  berita tersebut.
Kemudian, dibawahnya terdapat judul lagi yaitu “Pojok Artikel” yang  dikemas  dalam  bentuk  kolom  dengan  jumlah  3  kolom. Setiap kolom memuat tentang judul berita, deskripsi singkat, dan tombol untuk menampilkan isi lengkap dari berita tersebut.
Analisis Kebutuhan Sistem
Perancangan dan Desain Sistem Implementasi Pengujian
VOL .06 NO .01, PP . 17-22 P -ISSN : 2548-9534 | E -ISSN : 2548-9550

## 5.2. Implementasi Sistem
Implementasi  sistem  yang  dilakukan  yaitu  mengembangkan portal  manasik  haji  yang  telah  dirancang.  Sistem  ini menggunakan framework Laravel  sebagai  kerangka  dalam pembuatan website dengan memanfaatkan fitur blade yang sudah tersedia  pada framework Laravel  untuk  membuat  tampilan antarmuka. Pada bagian back-end , sistem ini memanfaatkan fitur dari framework Laravel seperti fitur view , route , dan controller untuk membangun website . Portal manasik haji ini menggunakan bahasa  pemrograman  PHP  sedangkan  penyimpanan  data  dari sistem ini menggunakan Database Management System MySQL .

## Gambar 3. Halaman Artikel
Gambar  3  menunjukkan  tampilan  halaman  sistem  dalam  menu artikel  dimana  pada  halaman  ini  terdapat  beberapa  sub  menu mengenai panduan dalam beribadah haji. Setiap sub menu berisi gambar,  judul  kegiatan,  dan  deskripsi  singkat  tentang  kegiatan tersebut.  Halaman  ini  juga  berisi  niat  dan  doa  selama  proses ibadah haji berlangsung berbentuk playlist video.
Gambar 4. Halaman Konten
Gambar  4  menunjukkan  tampilan  halaman  sistem  dalam  menu konten dimana halaman ini berisi informasi tentang ibadah haji mulai  dari  niat  doa  haji,  tata  cara  haji,  dan  sebagainya  yang disajikan dalam bentuk video.

## Gambar 5. Halaman Berita
Gambar  5  menunjukkan  tampilan  halaman  sistem  dalam  menu berita dimana pada halaman ini pihak agen haji dan umrah dapat menampilkan beberapa berita terkini tentang informasi haji dan bahkan  agen  dapat  menyisipkan  iklan  dan  promo-promo  yang berkaitan  dengan  perusahaannya  sehingga  dapat  menarik  minat masyarakat untuk mendaftar haji maupun umrah.

## 5.3 Pengujian Sistem
Pengujian sistem ini dilakukan untuk menguji semua fungsi yang ada  pada  sistem.  Pengujian  yang  dilakukan  adalah blackbox testing . Blackbox testing dilakukan guna mengetahui bahwa fitur dan  fungsi  dalam  sistem  bekerja  dengan  semestinya.  Pengujian dilakukan  dengan  cara  melihat  semua  fungsi  pada  sistem, kemudian  membandingkan  hasil  pengujian  dengan  hasil  yang diharapkan. Hasil dari blackbox testing ditampilkan pada Tabel 1.
Tabel 1. Hasil Blackbox Testing No. Deskripsi Hasil yang Diharapkan Hasil dari Sistem 1 Admin/User melakukan pendaftaran Sukses medaftar Sesuai  yang diharapkan 2 Admin/User melakukan login Sukses login Sesuai  yang diharapkan 3 Admin melakukan penambahan data artikel Data artikel tersimpan dalam database dan
ditampilkan  dalam
Sesuai  yang diharapkan
VOL .06 NO .01, PP . 17-22 P -ISSN : 2548-9534 | E -ISSN : 2548-9550
dashboard serta  di halaman artikel 4 Admin melakukan  edit data artikel Data artikel berubah di database dan perubahan ditampilkan  dalam dashboard serta  di halaman artikel Sesuai  yang diharapkan 5 Admin menghapus data artikel Data artikel terhapus dari database dan  tidak muncul dalam dashboard serta  di halaman artikel Sesuai  yang diharapkan 6 Admin melakukan penambahan data konten Data konten tersimpan dalam database dan ditampilkan  dalam dashboard serta  di halaman konten Sesuai  yang diharapkan 7 Admin melakukan  edit data konten Data konten berubah di database dan perubahan ditampilkan  dalam dashboard serta  di halaman konten Sesuai  yang diharapkan 8 Admin menghapus data konten Data konten terhapus dari database dan  tidak muncul dalam dashboard serta  di halaman konten Sesuai  yang diharapkan 9 Admin melakukan penambahan data berita Data berita tersimpan dalam database dan ditampilkan  dalam dashboard serta  di halaman berita Sesuai  yang diharapkan 10 Admin melakukan  edit data berita Data berita berubah di database dan perubahan ditampilkan  dalam dashboard serta  di halaman berita Sesuai  yang diharapkan 11 Admin menghapus data berita Data berita terhapus dari database dan  tidak muncul dalam dashboard serta  di halaman berita Sesuai  yang diharapkan

## 6. KESIMPULAN DAN SARAN
Dalam  penelitian  ini  dibuat  sistem  portal  manasik  haji menggunakan framework Laravel  dengan  metode waterfall berbasis website . Framework Laravel  memiliki  banyak kelebihan,  antara  lain  cepat,  mudah  digunakan,  dan  memiliki dokumentasi yang lengkap. Berdasarkan hasil dari pembahasan, maka dapat diambil kesimpulan bahwa sistem portal manasik haji dapat  digunakan  sebagai  panduan  untuk  calon  jamaah  haji sebelum  melaksanakan  ibadah  sebenarnya  serta  sebagai  media bagi perusahaan untuk mempromosikan/mengiklankan usahanya.
Dengan adanya sistem portal manasik haji ini dapat memudahkan calon jamaah dalam mendapatkan informasi seputar ibadah haji. Pemberian data berupa teks, gambar, audio, dan video diharapkan bisa  membantu  calon  jamaah  untuk  lebih  memahami  tentang ibadah haji.
Berdasarkan  hasil  pengujian  Portal  Manasik  Haji  pada Website Islamic  Vibes,  dapat  diberikan  beberapa  saran  seperti menambahkan informasi berupa animasi, menambah fitur berupa kuis  untuk  calon  jamaah  agar  lebih  memahami  sebelum melaksanakan ibadah haji yang sebenarnya, dan memungkinkan untuk bisa mendukung bahasa-bahasa lainnya.

## DAFTAR PUSTAKA
[1] Afidah, Vivi Nurul, dan Syahril Romli. “Strategi Pemasaran Paket  Ibadah  Haji  dan  Umroh  Dalam  Merekrut  Jamaah  di PT.  Sela  Express  Tour  Kota  Pekanbaru.”  Jurnal  Riset Mahasiswa  Dakwah  dan  Komunikasi,  vol.  1,  no.  3,  Juli 2019.
[2] Wulandari, Sri. “Pengaruh Pelaksanaan Bimbingan Manasik Haji Terhadap Pemahaman Ibadah Haji di Kota Parepare.” IAIN Parepare, 2019.
[3] Lamazido, M Aziz. “Strategi Promosi Jasa Perjalanan Haji dan  Umroh  Melalui  Media  Website.”  UIN  Walisongo Semarang, 2016.
[4] Pasha, Kemal Dega. “Aplikasi Pedoman Tuntunan Haji dan Umroh  Berbasis  Android.”  Universitas  Islam  Indonesia, 2017.
[5] Sasmito, Ginanjar Wiro. “Penerapan Metode Waterfall Pada Desain  Sistem  Informasi  Geografis  Industri  Kabupaten Tegal.” Jurnal Pengembangan IT, vol. 2, no.1, Januari 2017.
[6] Syahril,  Deddy  Sucipta,  et  al.  “Aplikasi  Panduan  Ibadah Haji  Berbasis  Android.”  Jurnal  Teknologi  dan  Sistem Komputer, vol. 4, no. 3, Agustus 2016.
[7] Usman,  Muchamad,  et  al.  “Sistem  Informasi  Panduan Manasik Haji dan Umrah Berbasis Android.” Ebisnis, vol. 1, no. 1, Desember 2017.
VOL .06 NO .01, PP . 17-22 P -ISSN : 2548-9534 | E -ISSN : 2548-9550

## BIODATA PENULIS
Irfanda Naufal Ghifari Mahasiswa  Program  Studi  Informatika Universitas Islam Indonesia, Yogyakarta