Cara Membuat Web Baca Hadis dengan HTML, CSS, JavaScript, dan MyQuran API

Website baca hadis dapat dibuat tanpa menggunakan framework yang rumit. Dengan HTML, CSS, JavaScript, dan layanan API, kita sudah bisa membuat sebuah web yang menampilkan teks Arab, terjemahan Indonesia, derajat hadis, takhrij, hingga hikmah yang terkandung di dalamnya.

Metode ini cocok untuk pemula karena proyek dapat dijalankan langsung melalui file index.html. Pengguna tidak harus memasang Node.js, React, atau aplikasi server khusus.

Dalam pengembangan web 296 Hadis, data hadis diambil dari MyQuran API v3. Sementara itu, HTML digunakan untuk membangun struktur halaman, CSS mengatur tampilannya, dan JavaScript menangani pengambilan serta pengolahan data dari API.

Gambaran Web Baca Hadis yang Dibuat

Web baca hadis ini dirancang sebagai tempat untuk membaca dan menemukan hadis secara praktis. Beberapa fitur yang dapat diterapkan antara lain:

• Menampilkan hadis secara acak

• Menjelajahi koleksi hadis

• Mencari hadis berdasarkan kata kunci

• Menampilkan teks Arab dan terjemahan Indonesia

• Menampilkan derajat dan takhrij hadis

• Menampilkan hikmah atau pelajaran hadis

• Navigasi ke hadis sebelumnya dan berikutnya

• Menyimpan hadis sebagai bookmark

• Menyalin dan membagikan hadis

• Mengatur ukuran teks Arab

• Mengaktifkan mode terang atau gelap

• Menyimpan pengaturan pengguna di browser

Semua fitur tersebut dapat dibuat menggunakan JavaScript biasa tanpa harus menggunakan database sendiri.

Mengapa Menggunakan API?

API atau Application Programming Interface memungkinkan sebuah website mengambil data dari sistem lain secara otomatis.

Tanpa API, kita harus menyimpan ribuan teks hadis secara manual di dalam proyek. Cara tersebut tidak efisien karena ukuran file menjadi besar dan proses pengelolaan datanya lebih sulit.

Dengan API, JavaScript hanya perlu mengirimkan permintaan ke alamat tertentu. Server kemudian mengembalikan data hadis dalam format JSON.

Contoh pola permintaannya:

fetch("https://api.myquran.com/v3/hadis/enc/random")
  .then(response => response.json())
  .then(result => {
    console.log(result.data);
  });

Kode tersebut digunakan untuk mengambil satu hadis secara acak. Data yang diperoleh kemudian dapat ditempatkan ke dalam elemen HTML.

MyQuran API untuk Web Baca Hadis

MyQuran API v3 menyediakan beberapa endpoint yang dapat digunakan untuk membangun web baca hadis.

Beberapa endpoint pentingnya meliputi:

/hadis/enc/random
/hadis/enc/explore
/hadis/enc/cari/{kata-kunci}
/hadis/enc/show/{id}
/hadis/enc/next/{id}
/hadis/enc/prev/{id}

Fungsi masing-masing endpoint tersebut adalah:

• random untuk mengambil hadis secara acak

• explore untuk menjelajahi koleksi hadis

• cari untuk mencari hadis berdasarkan kata kunci

• show untuk menampilkan detail hadis berdasarkan ID

• next untuk mengambil hadis berikutnya

• prev untuk mengambil hadis sebelumnya

Informasi lengkap mengenai layanan ini dapat dilihat melalui dokumentasi MyQuran API v3.

Struktur Data Hadis

Data detail yang dikembalikan oleh API dapat berisi beberapa informasi berikut:

{
  id: 3861,
  text: {
    ar: "Teks hadis berbahasa Arab",
    id: "Terjemahan hadis dalam bahasa Indonesia"
  },
  grade: "Hadis sahih",
  takhrij: "Muttafaq 'alaih",
  hikmah: "Hikmah dan pelajaran hadis",
  prev: 3855,
  next: 3863
}

Struktur tersebut sangat membantu karena website tidak hanya dapat menampilkan teks dan terjemahan. Pengembang juga dapat menambahkan derajat, takhrij, serta pelajaran yang terkandung di dalam hadis.

Akan tetapi, informasi yang berasal dari API tetap sebaiknya diposisikan sebagai sarana membaca dan belajar. Untuk pembahasan hukum atau kajian yang lebih mendalam, pengguna perlu merujuk kepada kitab dan guru yang kompeten.

Struktur Folder Proyek

Agar proyek terlihat lebih rapi, file HTML, CSS, dan JavaScript sebaiknya dipisahkan.

Contoh struktur foldernya:

296 Hadis/
├── index.html
├── favicon.svg
├── css/
│   └── style.css
├── js/
│   ├── config.js
│   ├── api.js
│   ├── storage.js
│   ├── render.js
│   └── app.js
└── README.md

File index.html menjadi halaman utama. Tampilan disimpan di dalam style.css, sedangkan proses pengambilan dan pengolahan data ditempatkan di dalam folder JavaScript.

Pembagian seperti ini membuat kode lebih mudah dibaca, diperbaiki, dan dikembangkan.

Membuat Fungsi Pengambilan Data

Alamat dasar API sebaiknya disimpan di dalam satu konfigurasi.

const API_BASE = "https://api.myquran.com/v3";

Setelah itu, buat fungsi untuk mengambil data:

async function getData(endpoint) {
  const response = await fetch(API_BASE + endpoint);

  if (!response.ok) {
    throw new Error("Data hadis tidak dapat dimuat.");
  }

  const result = await response.json();

  if (!result.status) {
    throw new Error(result.message || "Data tidak tersedia.");
  }

  return result.data;
}

Fungsi tersebut dapat digunakan kembali untuk berbagai kebutuhan.

Contohnya, mengambil hadis acak:

async function getRandomHadis() {
  return getData("/hadis/enc/random");
}

Mengambil detail hadis:

async function getDetailHadis(id) {
  return getData(`/hadis/enc/show/${id}`);
}

Sementara itu, pencarian hadis dapat dilakukan dengan kode berikut:

async function searchHadis(keyword, page = 1) {
  const query = encodeURIComponent(keyword);

  return getData(
    `/hadis/enc/cari/${query}?page=${page}`
  );
}

Penggunaan encodeURIComponent() penting agar kata kunci yang mengandung spasi atau karakter khusus tetap aman dikirim melalui URL.

Menyimpan Hadis Menggunakan LocalStorage

Fitur bookmark dapat dibuat tanpa database. Kita dapat memanfaatkan localStorage yang tersedia pada browser.

Contoh menyimpan data:

const hadisTersimpan = [];

localStorage.setItem(
  "hadis296.saved",
  JSON.stringify(hadisTersimpan)
);

Untuk membacanya kembali:

const hadisTersimpan = JSON.parse(
  localStorage.getItem("hadis296.saved") || "[]"
);

Data bookmark akan disimpan pada browser pengguna. Kekurangannya, data tidak otomatis berpindah ke perangkat lain dan dapat hilang apabila pengguna membersihkan data browser.

Namun, untuk web sederhana tanpa sistem login, cara ini sudah cukup praktis.

Membuat Tampilan Nyaman Dibaca

Web baca hadis harus mengutamakan keterbacaan, terutama pada bagian teks Arab.

Gunakan atribut arah teks dari kanan ke kiri:

<p class="hadis-arab" dir="rtl" lang="ar">
  Teks hadis Arab
</p>

Contoh CSS-nya:

.hadis-arab {
  font-family: "Amiri", serif;
  font-size: 2rem;
  line-height: 2;
  text-align: right;
  direction: rtl;
}

Font Arab seperti Amiri dapat membantu teks terlihat lebih nyaman. Selain itu, jarak antarbaris perlu dibuat cukup lebar karena teks Arab berharakat membutuhkan ruang vertikal lebih besar.

Untuk warna, kombinasi ivory, putih hangat, marun tua, dan emas redup dapat menghadirkan suasana membaca yang tenang. Hindari warna yang terlalu kontras atau dekorasi berlebihan karena dapat mengganggu fokus pengguna.

Menambahkan Mode Gelap

Mode gelap dapat dibuat menggunakan CSS variable.

:root {
  --background: #f8f4ec;
  --surface: #fffdf8;
  --text: #2b2523;
}

body.dark {
  --background: #1b1716;
  --surface: #251f1e;
  --text: #f5ede3;
}

Kemudian, JavaScript digunakan untuk menambahkan atau menghapus class dark.

document.body.classList.toggle("dark");

Pilihan tema juga dapat disimpan menggunakan localStorage agar tidak kembali ke pengaturan awal setiap kali halaman dibuka.

Menyembunyikan Informasi Sumber di Footer

Informasi sumber tetap penting, tetapi tidak harus selalu memenuhi tampilan footer. HTML memiliki elemen <details> yang dapat dibuka dan ditutup oleh pengguna.

<details>
  <summary>Informasi sumber</summary>

  <p>
    Sumber teks, terjemahan, metadata, derajat,
    takhrij, dan hikmah:
    <a href="https://api.myquran.com/v3/doc">
      MyQuran API v3
    </a>.
  </p>
</details>

Dengan cara ini, atribusi sumber tetap tersedia tanpa mendominasi tampilan halaman.

Menambahkan Favicon

Favicon adalah ikon kecil yang muncul pada tab browser. Untuk memasangnya, tambahkan kode berikut ke dalam elemen <head>:

<link rel="icon" type="image/svg+xml" href="favicon.svg">

Kemudian buat file favicon.svg di folder yang sama dengan index.html.

Contoh favicon sederhana:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect width="64" height="64" rx="16" fill="#6d3038"/>
  <path
    d="M18 18c5-2 10-1 14 3v28c-4-4-9-5-14-3V18Z"
    fill="#fff8ec"
  />
  <path
    d="M46 18c-5-2-10-1-14 3v28c4-4 9-5 14-3V18Z"
    fill="#fff8ec"
  />
  <path
    d="M32 21v28"
    fill="none"
    stroke="#b28a4a"
    stroke-width="2"
  />
</svg>

Apabila favicon belum berubah, lakukan hard refresh menggunakan Ctrl + F5. Browser biasanya menyimpan favicon cukup lama di dalam cache.

Perbandingan MyQuran API dan Ahmad Sanusi API

Selain MyQuran API, terdapat Ahmad Sanusi Open API yang menyediakan lebih dari 60.000 hadis dari sepuluh koleksi kitab.

Koleksinya mencakup antara lain:

• Shahih Bukhari

• Shahih Muslim

• Sunan Abu Daud

• Sunan Tirmidzi

• Sunan Nasa’i

• Sunan Ibnu Majah

• Musnad Ahmad

• Musnad Syafi’i

• Riyadhus Shalihin

Ahmad Sanusi API lebih unggul dari sisi jumlah koleksi dan pengelompokan berdasarkan kitab. Dokumentasi hadisnya menyediakan endpoint daftar kitab, pencarian, pagination, detail berdasarkan nomor, dan hadis harian. Informasi selengkapnya dapat dilihat melalui dokumentasi Hadits Ahmad Sanusi API.

Namun, API tersebut menggunakan API key yang harus dikirim melalui header X-API-Key.

Jika API key dipasang langsung di dalam JavaScript frontend, kuncinya dapat dilihat melalui Developer Tools. Oleh karena itu, penggunaannya lebih aman jika melalui backend atau server proxy.

Untuk proyek HTML yang ingin dijalankan langsung, MyQuran API lebih sederhana karena endpoint yang digunakan tidak mewajibkan penyimpanan API key di JavaScript. Selain itu, datanya sudah dilengkapi dengan derajat, takhrij, dan hikmah.

Apabila proyek dikembangkan menggunakan backend, kedua API tersebut dapat digabungkan:

• MyQuran API untuk ensiklopedia hadis, derajat, takhrij, dan hikmah

• Ahmad Sanusi API untuk koleksi hadis berdasarkan kitab

Penggabungan ini dapat menghasilkan web hadis yang lebih lengkap.

Cara Menjalankan Proyek di Komputer

Setelah semua file disiapkan, buka index.html menggunakan Chrome, Edge, atau Firefox.

Karena data diambil dari API, perangkat harus terhubung ke internet.

Pada beberapa kondisi, browser dapat membatasi permintaan API ketika file dibuka melalui alamat file://. Jika hal tersebut terjadi, jalankan server lokal sederhana menggunakan Python:

python -m http.server 8000

Setelah itu, buka alamat berikut:

http://localhost:8000

Perintah tersebut harus dijalankan dari dalam folder proyek.

Hal yang Perlu Diperhatikan

Ketergantungan terhadap API pihak ketiga memiliki beberapa konsekuensi. Website dapat mengalami gangguan apabila server API sedang tidak tersedia, endpoint berubah, atau batas penggunaan diterapkan.

Karena itu, sebaiknya web menyediakan:

• Tampilan loading saat data diambil

• Pesan kesalahan yang mudah dipahami

• Tombol untuk mencoba kembali

• Batas waktu permintaan

• Cache data sementara

• Dokumentasi sumber data

• Konfigurasi alamat API yang mudah diubah

Struktur kode yang baik akan memudahkan proses migrasi apabila suatu saat harus mengganti layanan API.

Kesimpulan

Web baca hadis dapat dibuat menggunakan HTML, CSS, dan JavaScript tanpa framework. API membantu menyediakan data hadis secara otomatis sehingga pengembang tidak perlu menyimpan ribuan teks secara manual.

Untuk proyek sederhana yang dijalankan langsung dari index.html, MyQuran API v3 menjadi pilihan yang praktis karena menyediakan teks Arab, terjemahan, derajat, takhrij, hikmah, pencarian, dan navigasi hadis.

Sementara itu, Ahmad Sanusi API menarik untuk pengembangan lanjutan karena mempunyai koleksi lebih dari 60.000 hadis yang dikelompokkan berdasarkan kitab. Penggunaannya akan lebih aman jika website sudah memiliki backend untuk melindungi API key.

Dari proyek sederhana ini, fitur dapat dikembangkan lebih lanjut menjadi koleksi hadis berdasarkan kitab, sinkronisasi bookmark, pencarian lanjutan, aplikasi Android berbasis WebView, atau bagian dari platform layanan Islami yang lebih besar.