## PENGEMBANGAN APLIKASI ALQURAN ONLINE DENGAN MEMANFAATKAN REST API
Izza Wildan Ridhoni 1 , Muhammad Sholeh 2 , Untung Joko Basuki 3
1,2) Program Studi  Informatika, Fakultas Teknologi Informasi dan Bisnis
3) Program Studi  Teknik Mesin, Fakultas Teknologi Industri Institut Sains & Teknologi AKPRIND Yogyakarta
e-mail: , 1) izzawildan88@gmail.com , 2) muhash@akprind.ac.id, 3) unjungjb@akprind.ac.id Korespondensi Author  : muhash@akprind.ac.id

## ABSTRAK
Penggunaan Alquran online saat ini sudah menjadi salah satu cara dalam melantunkan ayat suci Al quran.  Penggunaan  Alquran  digital  baik  yang  berbasis  desktop,  mobile  maupun  website  memberikan kemudahan dan kepraktisan bagi penggunanya.  Tujuan dari penelitian ini adalah mengembangkan Al quran online dengan menggunakan REST API ( Representational State Transfer Application Program Interface ). API   merupakan antarmuka yang menjadi perantara antara sistem aplikasi yang berbeda. Format dari REST API yang akan diolah berupa file JSON, file JSON ini menyimpan data-data yang terkait alquran seperti nama surat,  arti  surat,  banyak  surat  dan  informasinya lainnya.  Hasil  dari  File  JSON  akan  diolah dan  disesuaikan dengan desain sistem yang direncanakan. Sumber data dari rest API diambil dari https://github.com/bachors/Al-Quran-ID-API.  Metode penelitian dilakukan menggunakan metode waterfall , dengan  menggunakan  metode  ini  proses  penelitian  diawali  dari  analisis  sistem,  membuat  desain  sistem, implementasi dengan melakukan koding, pengujian terutama dari kelengkapan sistem dan penerapan. Aplikasi dikembangkan berbasis HTML dan dengan menerapkan CSS dan Javascript. Hasil penelitian berupa aplikasi untuk membaca  Alquran  dengan  dilengkapi  dengan  informasi  yang  terkait  dengan  suatu  surat, tulisan  ayat dalam bahasa Arab beserta terjemahannya. Aplikasi juga dilengkapi dengan suara yang akan menyesuaikan dengan surat yang akan dipilih. Aplikasi sudah diunggah dan dapat dibaca melalui   quran.izzawildan.my.id.
Kata Kunci : Aplikasi, Al Quran, REST API, CSS, Javacsript

## ABSTRACT
The use of the Qur'an online has now become one way of reciting the holy verses of the Qur'an. The use of digital Qur'ans based on desktop, mobile and website provides convenience and practicality for users. The purpose of this research is to develop an online Al-Quran using the REST API (Representational State Transfer Application Program Interface). An API is an interface that acts as an intermediary between different application systems. The format of the REST API that will be processed is in the form of a JSON file, this JSON file stores data related to the Koran such as the name of the letter, the meaning of the letter, many letters and other information. The results of the JSON file will be processed and adjusted to the planned system design. The  data  source  of  the  rest  API  is  taken  from  https://github.com/bachors/Al-Quran-ID-API.  The  research method is carried out using the waterfall method, using this method the research process begins with system analysis, making system design, implementation by coding, testing especially from system completeness and implementation. The application is developed based on HTML and by applying CSS and Javascript. The results of the study are in the form of an application to read the Koran equipped with information related to a letter, writing verses in Arabic and their translation. The application is also equipped with a sound that will adjust to  the  letter  to  be  selected.  The  application  has  been  uploaded  and  can  be  read  through quran.izzawildan.my.id.
Keywords: Application, Al Quran, REST API, CSS, Javacscript

## 1. PENDAHULUAN
Penggunaan  teknologi  informasi    saat ini sudah menjadi kebutuhan pokok, kebutuhan  informasi  yang  diinginkan  saat  ini cukup  dicari  dengan  menggunakan  internet. Dengan  menggunakan  mesin  pencari  seperti Google,  Bing  ,  kebutuhan  informasi  dengan mudah  akan  ditemukan.      informasi  yang selama  ini  ada  di  dalam  bentuk  fisik  seperti berita, buku dan lainnya, di era digitalisasi saat ini sudah mulai beralih ke bentuk digital.
Seiring    dengan    perkembangan teknologi  informasi,  Al-Qur’an  saat  ini  tidak hanya  dalam  bentuk  kitab  dalam  bentuk  fisik tetapi  sudah  dibuat    dalam    bentuk    digital. Digitalisasi   Al Quran di kembangkan dalam bentuk  aplikasi  yang  dapat  diakses  baik melalui smartphone maupun berbasis website. Software  dan    aplikasi  Al-Qur’an  digital didistribusikan    pada  masyarakat  tanpa melakukan  pembayaran.    Fasilitas  yang  ada pada  aplikasi  Al  Quran    pada  umumnya terdapat  fasilitas  untuk    membaca,    mencari ayat, mencari  kata tertentu serta  terjemahan.
Penggunaan  Alquran  online  saat  ini sudah  menjadi  salah  satu  cara  dalam melantunkan ayat  suci Al  quran. Penggunaan Alquran  digital  baik  yang  berbasis  desktop, mobile maupun website memberikan kemudahan dan kepraktisan bagi penggunanya.  Penggunaan  Al  Quran  digital dapat  menjadi  alternatif  dalam  mempelajari bacaan  maupun  isi  dan  arti  dari  Al  Quran. Digitalisasi Al quran tidak hanya
menampilkan  teks  atau  arti  dalam  bahasa Indonesia  tetapi  juga  dilengkapi  dengan berbagai fasilitas seperti cara membaca, suara lantunan ayat suci dan hal lainnya. Implementasi  dalam  pembuatan  al  quran digital  menggunakan  berbagai  teknologi  dan berbagai  software.  Salah  satu  implementasi adalah  dengan  menggunakan  REST  API. REST      merupakan  aturan  standar  dalam arsitektur  komunikasi  yang  berbasis  web  dan sering diterapkan dalam proses pengembangan layanan  yang  menggunakan  layanan      web. Secara  umum  layanan  web  ini  menggunakan Hypertext Transfer Protocol (HTTP)  sebagai protocol  dalam  proses      komunikasi  data. Langkah  awal  dalam  penggunaan  REST  API
adalah penggunaan proses otentikasi. Dengan menggunakan  API,  2  sistem  yang  berbeda dapat  saling  berhubungan  atau  menggunakan data  yang  ada  di  tempat  lain.  (Pane  et  al., 2020),  (Abdulloh,  2020).  Data  yang  diambil dari  dalam  bentuk  format  JSON  dengan menggunakan  Javascript.    JSON ( JavaScript Object  Notation )  adalah  sebuah  format  yang digunakan  untuk  menyimpan  data  dan digunakan  dalam  proses  tukar  menukar  data. Data  dalam  bentuk  JSON  akan  dibaca  sistem lain  sehingga  memudahkan  dalam  pertukaran data  (Abdulloh,  2020).  Penelitian  lain dilakukan  Wardhana, yang menggunakan rest api  untuk  pengelolaan    prestasi  mahasiswa (Wardhana  et  al.,  2020),  (Handayani  & Rosnelly, 2021)   merancang dan membangun sistem yang dapat digunakan untuk melakukan pencarian jurnal dengan memanfaatkan menggunakan  rest  api  dan  aplikasi  yang dibangun  diaplikasikan  berbasis  android. Penelitian  yang  menggunakan  rest  api  dalam proses pengambilan data atau data digunakan di  berbagai  plafon  diantaranya    penggunaan rest  api    untuk  pengembangan  aplikasi pencarian jasa layanan pertukangan (Choirudin  et  al.,  2019).  (Yanti  &  Rihyanti, 2021)  mengembangkan  aplikasi  yang  dapat menginformasikan film dengan memanfaatkan TMDb API. Penelitian lain yang menggunakan  rest  api  yang  lain  diteliti  oleh (Umami & Ningrum, 2021), (Kurniawan et al., 2013),  (Afriansyah  et  al.,  2021),  (Safitri  & Putro, 2021).
Proses  pengambilan  dan  pengolahan data  dalam  bentuk  JSON  menjadi  Al  quran menggunakan Javascript. Javascript
merupakan  salah  bahasa  pemrograman  yang digunakan dalam pengelolaan website. Penggunaan Javascript akan membuat tampilan  website  lebih  dinamis  dan  interaktif (Supardi, 2021), (Enterprise, 2021).
Penggunaan  Javascript  dalam  pengembangan aplikasi website diantaranya digunakan dalam penelitian (Mariko, 2019), (Yani et al., 2018).
Hasil  penelusuran  pustaka,  penelitian yang  terkait  dengan  rest  api  dan  Al  Quran digital sudah dilakukan dengan berbagai tema. Gerhana, mengembangkan aplikasi yang dapat melakukan  deteksi  Al  quran  dengan  suara
(Gerhana  et  al.,  2018),  Nurul,  dalam penelitiannya mengembangkan aplikasi pembelajaran  al  quran    dalam  bentuk  game  . Aplikasi ini ditujukan pada anak-anak sebagai sarana  dalam  mempelajari  Al  Quran.  Fitur yang  ada  diantaranya    Alquran  dan  huruf hijaiyah,  fitur  ini  dapat  digunakan  sebagai sarana  pembelajaran  dalam  mengenal  huruf hijaiyah    yang  dikemas  dalam  bentuk permainan  game  (Nurul  Izza  et  al.,  2020). Wijaksono  mengembangkan  aplikasi    yang dapat  digunakan  Sebagai  alat  bantu  dalam mencari  rujukan  ayat  Al  quran.  yang  terkait dengan tema tertentu. Aplikasi secara otomatis akan  menampilkan  rujukan  surat  yang  dicari pengguna. Dengan aplikasi ini para pengguna dapat  menemukan    dengan  cepat  dalam mencari      rujukan  pada  suatu  tema    surat sehingga  proses  pencarian  dapat  dilakukan secara  cepat  dan  efisien  (Wisaksono  et  al., 2018).
Berdasar pada tinjauan pustaka, penelitian yang dilakukan diantaranya bagaimana  mengambil  data  dari  server  lain dengan  menggunakan  Rest  API.  Data  yang diambil berupa JSON dan diolah menjadi AL Quran  digital.  Proses  pengolahan  JSON  ke aplikasi  Al  Quran  digital  menggunakan Javascript.  Batasan  dalam  pengembangan aplikasi  adalah  aplikasi  yang  dikembangkan berbasis website, aplikasi dapat menampilkan nama  surat,  isi  surat  baik  dalam  bahasa  arab maupun  terjemahan  serta  ada  pilihan  untuk membunyikan suara lantunan surat.

## 2. METODE
Metode penelitian yang  digunakan adalah dengan  menggunakan  metode  waterfall. Dengan  metode  ini  proses  penelitian  diawali dengan  analisis  sistem,  desain  sistem, implementasi dan evaluasi. Tahapan penelitian dengan  menggunakan  metode  ada  pada gambar 1.
Gambar 1 Metode Waterfall Kebutuhan dalam penelitian ini diantaranya  perangkat  komputer,  internet untuk  menguji  sistem  dalam  mengambil  data yang  ada  di  server  yang  berbeda.  Kebutuhan perangkat  lunak  yang  diperlukan  diantaranya digunakan  untuk  proses  perancangan  desain user  interface dan  perangkat  lunak  yang digunakan  untuk  implementasi  pembuatan aplikasi  Al  quran.    Proses  perancangan menggunakan  Figma.  Figma  merupakan aplikasi  online  yang  dapat  digunakan  untuk melakukan  desain    antara  muka  ( user interface ).  Software  yang  digunakan  untuk mengimplementasikan  hasil  desain  user interface  dalam  website    menggunakan  CSS dan  Javascriot.  CSS  untuk  menampilkan halaman  website  lebih  menarik,  Javascript digunakan  untuk  proses  olah  data  JSON  ke aplikasi Al Quran digital .

## 3. HASIL DAN PEMBAHASAN Desain user interface (UI)
Desain user interface digunakan untuk memberikan gambaran dalam proses pengembangan  aplikasi.  Desain  ini  dirancang mulai dari halaman depan sampai ke halaman yang  menampilkan  surat  Al  Quran.  Aplikasi yang  digunakan  adalah  Figma.  Gambar 2 , menampilkan  deasin  user  interface  yang dirancang dengan aplikasi Figma.
Gambar 2 Desain User interface
halaman depan Gambar 2, merupakan desain halaman depan . Detail dari halaman depan menampilkan    daftar  surat.  Penampilan  surat Al  Qiran  ini  mempermudah  pengguna  dalam membaca atau menyimak suara dari alunan Al
Quran. Gambar 3, desain halaman depan yang dilengkapi  dengan  kumpulan  surat-surat  Al Quran.
Gambar 3 Desain User interface halaman detail

## Hasil pengembangan Aplikasi
Tampilan  awal  dari  aplikasi  akan menampilkan semua surat Al Quran. Tampilan akan  menginformasikan  nama  surat  (Dalam bahasa Arab dan Indonesia) dan arti dari surat. Laman untuk mempergunakan Al quran online ada di laman quran.izzawildan.my.id. . Gambar 4, halaman depan quran.izzawildan.my.id
Gambar 4 Tampilan halaman depan quran.izzawildan.my.id Halaman depan ini digunakan pengguna  untuk  memilih  surat  yang  akan dibaca.  Kumpulan  nama  surat,  ditampilkan dalam  bentuk  dalam  bentuk  bahasa  Arab  dan bahasa  Indonesia.  Gambar  5,  tampilan kumpulan surat yang ada di halaman depan
Gambar 5 Tampilan kumpulan surat yang ada
di halaman depan Aplikasi dikembangkan berbasis HTML  dengan  menggunakan  Javascript  dan CSS.CSS digunakan untuk melakukan pengaturan  tampilan.    CSS  yang  digunakan ada 2, yaitu audioplayer.css untuk melakukan pengaturan  tampilan  pemutaran  audio  dan style.css  pengaturan  tampilan  secara  umum. Potongan  skrip    audioplayer.css  ditampilkan pada tabel 1 Skrip audioplayer.css Tabel 1 Skrip audioplayer.css skrip Keterangan .audioplayer { Nama css display: flex; Memungkinkan  untuk  pengaturan  layout,  posisi  dan  tampilan dari suatu konten yang ukurannya belum diketahui atau bernilai dinamis flex-direction: row; Digunakan untuk mengatur arah alur dari items yang ada pada container flex. box-sizing: border-box; Memperbaiki  suatu  elemen  box/kotak  agar  sesuai  dengan properti width dan height. margin: 1em 0; Memberikan ruang space diluar elemen padding: 0 24px; Memberikan ruang space di dalam elemen width: 100%; Mengatur lebar class audioplayer menjadi 100% height: 96px; Mengatur  tinggi class audioplayer menjadi 100% align-items: center; Mendefinisikan item-item pada container flex ke tengah border: 1px solid #dde2e6; Membuat  garis  tepi  dengan  tebal  1px  typenya  solid  dengan warna hexsa #dde2e6 border-radius: 4px; Memberikan sudut lengkung dengan ukuran 4 px background: #fff;     } Memberikan warna background dengan kode hexa #fff
Style.css  secara  umum  digunakan untuk melakukan pengaturan halaman website, seperti pengaturan warna, font ,posisi teks dan
lainnya.  Potongan  sytle.css  ditampilkan  pada tabel 2.
Tabel 2 Skrip style.css skrip Keterangan .jumbotron .p-garis, .jumbotron .p-garis2 { position: absolute; } Elemen diposisikan relatif terhadap elemen leluhur yang diposisikan pertama (bukan statis) .jumbotron .p-garis { left: 0; Mengatur left ke 0 top: 10%; Mengatur top menjadi 10% } .jumbotron .p-garis2 { right: 0; Mengatur rightnya 0
}
.jumbotron h1 { font-size: 50px; Mengatur ukuran font ke 50px font-family: "Quicksand", sans-serif; Mengatur  font  h1  menjadi  ‘Quicksand’  ,  jika  tidak  ada atur font family ke sans serif font-weight: 600; Mengatur ketebalan h1 menjadi 600 color: white; Merubah warna h1 ke putih } .jumbotron span { font-family: "Montserrat", sans-serif; Mengatur font span ke ‘Montserrat’ , jika tidak ada atur font family ke sans serif font-size: 20px;   } Mengubah ukuran font menjadi 20 px

## Proses REST API
Proses menampilkan semua surat yang ada di Al Quran pada halaman depan diambil dari server lain yang menyediakan data, yaitu diambil  dari    data  di https://al-quran- 8d642.firebaseio.com/data.json .Proses pengambilan data dilakukan dengan menggunakan REST API. Proses pengambilan data dalam bentuk JSON dan dari data JSON ini  akan  ditampilkan  sesuai  hasil  desain.  File JSON ditampilkan pada gambar 3 JSON.

## Gambar 6 Proses Pengambilan data  JSON
Hasil  proses  pengambilan  data  yang pada  laman  tersebut  akan  mengambil  surat- sura Al Quran. Contoh daya JSON adalah
{ arti: "Pembukaan",
asma: "ةحتافلا", audio:
"http://ia802609.us.archive.org/13/items/quraninindonesia/ 001AlFaatihah.mp3", ayat: 7, keterangan:  "Surat  <i>Al  Faatihah</i>  (Pembukaan)  yang diturunkan di Mekah dan terdiri dari 7 ayat adalah surat yang pertama-tama  diturunkan  dengan  lengkap    diantara  surat- surat yang ada dalam Al Quran dan termasuk golongan surat Makkiyyah.  Surat  ini  disebut  <i>Al  Faatihah</i> (Pembukaan),  karena  dengan  surat  inilah  dibuka  dan dimulainya  Al  Quran.  Dinamakan  <i>Ummul  Quran</i> (induk  Al  Quran)  atau  <i>Ummul  Kitaab</i>  (induk  Al Kitaab)  karena  dia  merupakan  induk  dari  semua  isi  Al Quran,  dan  karena  itu  diwajibkan  membacanya  pada  tiap- tiap  sembahyang.<br>  Dinamakan  pula  <i>As  Sab'ul matsaany</i>  (tujuh  yang  berulang-ulang)  karena  ayatnya tujuh dan dibaca berulang-ulang dalam sholat.", nama: "Al Fatihah", nomor: "1", rukuk: "1",
type: "mekah", urut: "5" },
Skrip  Javascript  yang  melakukan proses  pengambilan  data  JSON  kumpulan surat Al Quran disajikan pada tabel 3.

## Tabel 3 Skrip Pengambilan Data JSOn
skrip Keterangan $.getJSON('https://al-quran- 8d642.firebaseio.com/data.json',function (data) { mengambil  data  json  dari  https://al-quran- 8d642.firebaseio.com/data.json
let menu = data;
simpan data json ke dalam variabel menu $.each(menu, function (i, data) { $('#daftar-surat').append(
'<div  class="col-12  col-md-5    isi  mx-2  my-2"  ><a href="detail.html?no='  +data.nomor  +'"><div  class  = "row">  <div  class="col-8">  <h3>'  +data.nomor  +  '.  '  + data.asma + ' </h3><span>' + data.nama +'</span></div><div  class="col-4  align-self-center  text-
right"><span>' + data.arti +'</span></div></div></a> </div>'  );
tampilkan data json satu persatu kedalam daftar surat

## Tampilan Halaman Detail
Halaman  detail  merupakan  halaman yang  menampilkan  surat  secara  komplet. Proses  menampilkan  surat  sesuai  dengan pilihan  pengguna  yang  dipilih  pada  halaman utama.  Pada  halaman  utama,  jika  pengguna memilih surat maka, skrip akan mengarahkan ke halaman detail.  Pada halaman detail, proses akan mengambil data dari https://api.npoint.io/99c279bb173a6e28359c/s urat/...(nomer surat) . Tampilan halaman detail ada pada gambar
Gambar 7 Tampilan Halaman Detail
Aplikasi  yang  dikembangkan  dapat juga  menampilkan  suara  lantunan  surat  yang dipilih. Gambar 6, proses pemilihan surat dan memilih  suara  yang  akan  melantunkan  suara dari ayat Al Quran
Gambar 8  Pemilihan suara lantunan ayat Al Quran
Tampilan pada halaman depan merupakan  hasil  pengambilan  file  dalam bentuk JSON. JSON ada pada gambar 9.

## Gambar 9 JSON Detail Halaman
Hasil  proses  pengambilan  data  yang pada  laman  tersebut  akan  mengambil  surat- sura7  Al  Quran  sesuai  data  surat  yang  akan diambil. Contoh data JSON adalah
{ ar:  " ِمْسِب َِاللّ ِن َٰ مْح َرلا ِمي ِح َرلا ا ي ا هُّي أ نيِذَلا اوُن مآ اوُف ْو أ ِدوُقُعْلاِب ۚ ُأ ْتَل ِح ْمُك ل ُة ميِه ب ِما عْن  ْلْا َلِّإ ا م َٰى لْتُي ْمُكْي ل ع رْي غ يِ ل ِحُم ِدْيَصلا ْمُتْن أ  و م ُرُح َنِإ َاللّ ُمُكْح ي ا م
ُدي ِرُي
", id: "Hai orang-orang yang beriman, penuhilah aqad-aqad itu. Dihalalkan bagimu binatang ternak, kecuali yang akan dibacakan  kepadamu.  (Yang  demikian  itu)  dengan  tidak menghalalkan  berburu  ketika  kamu  sedang  mengerjakan haji.  Sesungguhnya  Allah  menetapkan  hukum-hukum menurut yang dikehendaki-Nya.", nomor: "1" },
{ ar: "
نيِذَلا  و  اوُر ف ك اوُبَذ ك  و ا نِتا يآِب   كِئَٰ لوُأ  ُبا حْص أ  ِمي ِح جْلا", id:  "Adapun  orang-orang  yang  kafir  dan  mendustakan ayat-ayat Kami, mereka itu adalah penghuni neraka.", tr: "wa<strong>a</strong>lla<u>dz</u>iina kafaruu waka<u>dzdz</u>abuu bi nomor: "10"
},
Skrip  Javascript  yang  melakukan proses  pengambilan  data  JSON  isi  surat  Al Quran ada tabel 4.

## Tabel 4 Pengambilan data JSON detail surat
Skrip
Keterangan
function getUrlVars(param = null) { if (param !== null) { var vars = [], hash;
var
hashes = window.location.href.slice(window.location.href .indexOf('?') + 1).split('&'); for (var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars[param]; } else { return null; } }
function  untuk  mendapatkan  data  yang  dikirimkan berdasarkan parameter yang dikirimkan melalui url let no = getUrlVars('no'); let no = getUrlVars('no') akan mengembalikan nilai nomer  surat  al  quran    dari    function  getUrlVars    .
nomer  surat  ini  digunakan  untuk  mengambil  data surat alquran sesuai nomer yang dikirim melalui url $.getJSON('https://api.npoint.io/99c279bb173a6
e28359c/surat/' + no, function (data) { let menu = data;
$.each(menu, function (i, data) { $('#daftar-ayat').append(
'  <div  class="col-12  mt-3  isiayat"><div class="row"><div class="col-2 text- left"><span>' + data.nomor + '</span></div><div class="col-10 text- right"><h3>' + data.ar + '</h3><span>' + data.id + '</span></div></div></div>' ); });  });
mengambil  data  di  json  sesuai  dengan  nomer  surat alquran  yang  dikirimkan  melaui  url.  program mengappend    atau  menambahkan  setiap  ayat  dari ayat 1 sampai terakhir  ke dalam elemen div dengan menampilkan nomor ayat , isi ayat dan arti ayat yang ditampilkan
$.getJSON('https://al-quran- 8d642.firebaseio.com/data.json',  function  (data) {    $(function () { $('audio').audioPlayer(); }); let menu = data; $.each(menu, function (i, data) { var nomor = data.nomor; if (nomor == no) { $('#desc').html('<h1>' + data.nama + '</h1><span>(  '  +  data.arti  +  '  |    '  +  data.type  + ')</span><br>');
$('#audioquran').html('
<audio preload="auto" controls><source src="' + data.audio + '"></audio>'); } }); });
Mengambil  data  audio  dari  api https://al-quran- 8d642.firebaseio.com/data.json kemudian menampilkan  data  audionya  sesuai  dengan  nomor surat

## 4. PENUTUP

## 4.1. Kesimpulan
Aplikasi  Al  Quran  yang  dikembangkan dapat  menjadi  salah  satu    alternatif  sebagai media  untuk  melantunkan  ayat-ayat  suci.
Aplikasi
dikembangkan
dengan memanfaatkan REST API. Data-data mengenai AL Quran diambil https://github.com/bachors/Al-Quran-ID-API dan dikembangkan menjadi aplikasi tersendiri.
Aplikasi yang dikembangkan dapat menampilkan  semua  surat  dan  menampilkan semua  ayat    sesuai  dengan  surat  yang  dipilih pengguna  .Fasilitas  lain  yang  ada  dalam aplikasi  adalah  terjemahan  dan  alunan  suara sesuai surat yang dipilih.

## 4.2. Saran
Aplikasi  ini  masih  berbasis  website  dan selanjutkan  dapat  dikembangkan  berbasis android.  Dengan  adanya  aplikasi  berbasis website  maupun  berbasis  mobile  tentunya memberikan pilihan pengguna dalam keinginan melantunkan ayat suci Al Quran.

## 5. DAFTAR PUSTAKA
Abdulloh,  R.  (2020). Menguasai  React  JS Untuk Pemula Panduan belajar JavaScript  dari  dasar  hingga  membuat aplikasi web modern . Afriansyah,  R.,  Sholeh,  M.,  &  Andayati,  D. (2021). Perancangan Aplikasi Pemrograman  Antarmuka  Berbasis  Web Menggunakan Gaya Arsitektur Representasi  Untuk  Sistem  Presensi
Sekolah. Jurnal SCRIPT , 9 (1), 84–93. Choirudin,  R.,  Adil,  A.,  Studi,  P.,  & Informatika, T. (2019). IMPLEMENTASI REST  API  WEB  SERVICE  DALAM MEMBANGUN  APLIKASI . 18 (2),  284– 293.
Enterprise,  J.  (2021). HTML5  dan  Javascript untuk Pemula . Elex Media Komputindo. Gerhana, Y. A., Atmadja, A. R., Maylawati, D. S.,  Rahman,  A.,  Nufus,  K.,  Qodim,  H., Busr,  &  Ramdhani,  M.  A.  (2018). Computer  speech  recognition  to  text  for recite  Holy  Quran. IOP  Conference
Series: Materials Science and Engineering , 434 (1). https://doi.org/10.1088/1757-
899X/434/1/012044 Handayani,  F.  S.,  &  Rosnelly,  R.  (2021).
Perancangan  Aplikasi  Galeri  E-Jurnal Dengan  REST  API  Berbasis  Android. Infosys  (Information  System)  Journal ,
5 (2), 161. https://doi.org/10.22303/infosys.5.2.202 1.161-171 Kurniawan, Y. K., Oslan, Y., & Kristanto, H. (2013).  Implementasi  Rest  -  Api  Untuk Portal Akademik Ukdw Berbasis
Android. Jurnal EKSIS , 6 , 29–40.
Mariko,  S.  (2019).  Aplikasi  website  berbasis
HTML dan JavaScript untuk menyelesaikan fungsi integral pada mata kuliah kalkulus. Jurnal Inovasi Teknologi Pendidikan , 6 (1), 80–91. https://doi.org/10.21831/jitp.v6i1.22280
Nurul Izza, A. A., Azzahra, A., & Maharani, S.
(2020). Desain Aplikasi Alquran Berbasis Android  “Sahabat  Nusa.” Al-Fikri:
Jurnal  Studi  Dan  Penelitian  Pendidikan Islam , 3 (2), 13. https://doi.org/10.30659/jspi.v3i2.10016 Pane, S. F., Hardy, I. H., & Sujad, E. C. (2020).
Pengembangan  Smart  Conveyor  Pada Tracking  Barang  Berbasis  IOT .  Kreatif Industri Nusantara.
Safitri,  R.  K.,  &  Putro,  H.  P.  (2021).
Implementasi REST API untuk Komunikasi Antara ReactJS dan NodeJS (Studi  Kasus :  Modul  Manajemen  User Solusi247). Automata , 2 (1), 0–4.
https://journal.uii.ac.id/AUTOMATA/art icle/view/17381
Supardi,  Y.  (2021). Semua  Bisa  Menjadi Programmer JavaScript & Node.js . Elex Media Komputindo.
Umami,  Z.,  &  Ningrum,  N.  K.  (2021). Pengujian  Implementasi  Rest  Api  Pada Website  Sistem  Pencarian  Informasi Produk  Fashion  Di  Shopee. Jurnal SITECH : Sistem Informasi Dan Teknologi , 3 (2), 69–82. https://doi.org/10.24176/sitech.v3i2.5671
Wardhana, W. G., Arwani, I., & Rahayudi, B.
(2020).  Implementasi  Teknologi  Restful
Web  Service  Dalam  Pengembangan Sistem  Informasi  Perekaman  Prestasi
Mahasiswa  Berbasis  Website  (  Studi Kasus :  Fakultas  Teknologi  Pertanian Universitas Brawijaya ). Jurnal Pengembangan Teknologi Informasi Dan
Ilmu  Komputer , 4 (2),  680–689.  http://j- ptiik.ub.ac.id/index.php/j- ptiik/article/view/7024 Wisaksono,  A.,  Farihah,  A.,  &  Ariyanti,  N.
(2018).  Aplikasi  Tematis  Al-Qur’an Berbasis  Web. AKSIOLOGIYA :  Jurnal Pengabdian  Kepada  Masyarakat , 2 (2),
139.
https://doi.org/10.30651/aks.v2i2.1266
Yani, A., Saputra, B., & Jurnal, R. T. (2018).
Rancang  Bangun  Sistem  Informasi Evaluasi  Siswa  Dan  Kehadiran  Guru Berbasis Web. Petir , 11 (2). https://doi.org/10.33322/petir.v11i2.344 Yanti, S. N., & Rihyanti, E. (2021). Penerapan
Rest  API  untuk  Sistem  Informasi  Film Secara Daring. Jurnal Informatika Universitas Pamulang , 6 (1), 195.
https://doi.org/10.32493/informatika.v6i 1.10033