✓ Cara Membuat Website Al-Quran Menggunakan PHP

Cara Membuat Website Al-Quran Menggunakan PHP


Oke pada kesempatan kali ini kita akan belajar membuat website al-quran menggunakan pemrograman php. website yang saya buat kali ini pastinya OpenSource dan bisa kita edit-edit atau modifikasi sesuka kita.

bukan hanya itu disamping ingin berbagi, saya ingin mendapatkan sedikit keberkahkan dalam memulai blog ini. jadi saya sengaja posting membuat website al-quran ini.
Tampilannya simple tentu saja kodenyapun simple, dan siapkan terlebih dahulu alat-alatnya.


  1. Hosting [ Untuk Public ] / Xampp [ Personal ]
  2. Notepad++ / Sublime Text
  3. Source Al-Quran PHP
  • Hosting / Xampp
Digunakan sebagai alat menampung data-data yang diperlukan oleh sebuah website dan sehingga dapat diakses lewat Internet. agar website yang kita kerjakan bisa terlihat oleh kita maupun orang lain berbeda dengan Xampp, yang hanya bisa dilihat oleh personal maupun Local Connection.

jika tidak punya hosting jangan khawatir, karna dijaman sekarang sudah terdapat aplikasi sebagai alat pembaca bahasa pemrograman yang tentunya Pembaca Program PHP, yaitu Xampp. Fungsi Xampp sama seperti halnya Hosting namun perbedaan hosting dengan Xampp jelas berbeda. Karena hosting bisa dibuka oleh public berbeda dengan Xampp yang hanya bisa diakses oleh jaringan local saja.




  • Notepad++ / SublimeText
Kenapa kita harus gunakan notepad++ atau sublimtext saat menulis programan?. kenapa tidak pake notepad bawaan Windows saja?. dalam menulis program atau ngoding berbeda dengan ketika kita menulis naskah pidato maupun puisi. ada beberapa fiture yang tidak ada dalam notepad biasa yaitu membaca tag pemgroman, Notepad++ dapat membaca mana Kode program yang salah dan benar.
  • Source Al-Quran
Untuk sourcenya awalnya saya mengambil dari google juga namun tampilan dengan alakadarnya. namun kali ini saya akan membagikan yang telah saya decode. anda bisa mendownloadnya dibawah Ini 


Sebelumnya saya pernah share script ini di grup Facebook yang bernama SGB Team, dan filenya masih ada pada grup SGB Team yang dulu. dan saya berpikir berbagi kok setengah-setengah makanya saya share disini.

Tutorial Install Script

Pada kali ini saya akan memberikan tutorial menggunakan Xampp kenapa harus Xampp? tidak hosting saja, tentunya para pengguna Hosting Cpanel sudah terbiasa menggunakan Xampp sehingga dia pindah ke hosting. tetapi untuk Xampp kebalikannya bukan?


  • Buka Xampp Dan nyalakan Apache Dan MySQL 
  • Download Al-Quran PHP kemudian 
  • Extract File Tersebut Kedalam Disk C:/xampp/htdocs/ Taruh File disitu.
  • Kemudian edit bagian index.php kemudian edit dan sesuaikan

<?php// PHP permanent URL redirectionheader("Location: http://localhost/quran/alquran", true, 301);exit();?><script type="text/javascript"><!--if (screen.width <= 699) {document.location = "http://localhost/quran/mobile";}//--></script>

Edit Kode yang berwarna merah itu dengan domain website agan jika menggunakan hosting, dan abaikan jika menggunakan Xampp. dan kemungkinan ada perbedaan folder jadi saya sebelum extract membuat folder quran dulu kemudian extract di folder tersebut.


  • Masuk C:\xampp\htdocs\quran\alquran kemudian edit index.php
    dan sesuaikan dengan folder file kita dengan mengarah ke folder welcome
Maka akan muncul halaman depannya seperti gambar diatas. dan kenapa backgroundnya Abu-abu seperti itu? sengaja gan untuk background tersebut bisa kita ubah sesuka kita kok dan tentunya web ini sudah responsive.
  • Lanjut kita edit bagian quran.php 

  • Sesuaikan telebih dahulu bagian URL webnya. untuk mempercepat kita gunakan CTRL + F
  • dan jangan lupa ganti bagian Database juga seperti gambar di bawah ini atau anda bica cari kata ini agar langsung masuk ke bagian database yang perlu di Edit.

Kita bisa gunakan kata idquranw_1 untuk menemukan bagian yang perlu di edit, untuk database saya lupa belom menyisipkan kedalam filenya. dan anda bisa download filenya dibawah ini

A. Menyiapkan Data Al Quran

Langkah pertama yaitu menyiapkan data Al Quran baik Al Quran dalam bahasa Arab (original) maupun terjemahan dalam bahasa Indonesia. Tentu saja, kita tidak perlu mengetik sendiri data Al Quran beserta terjemahannya sebanyak ribuan baris. Saat ini sudah ada beberapa situs online yang menyediakan data-data Al Quran digital yang bisa kita download secara cuma-cuma (gratis). Salah satunya adalah disini http://www.qurandatabase.org/

Pada alamat website itu, kita bisa men-download data Al Quran versi bahasa Arab (original) ataupun versi terjemahannya dalam berbagai macam bahasa. Kita juga bisa men-download data-data tersebut dalam berbagai format, mulai dari format text, format excel sampai dengan format script MySQL.
Berikut ini saya screenshoot cara download data Al Quran versi bahasa arab dan versi terjemahan bahasa Indonesia. Adapun format data yang saya dowanload dalam bentuk script MySQL. Untuk lebih jelasnya, silahkan dilihat gambar 1 berikut ini.


Gambar 1 : Download Data Al Quran Dalam Bahasa Arab (Book Original)
Pada bagian Table Structure for online generation, disitu table name (nama table), ID column name sampai dengan Text column name saya rubah sesuai dengan selera saya. Nanti script MySQL yang kita dapatkan konfigurasi nama table dan nama kolom sesuai dengan apa yang kita ketikkan di bagian 

Table structure ini. Agar nanti ada kesesuaian dengan contoh program PHP-nya, maka konfigurasi Table structure-nya saya isi seperti berikut ini :
  • Table name : ArabicQuran
  • ID column name : index
  • QuranDB ID column : DatabaseID (catatan : kolom ini tidak saya gunakan, tetapi kita download saja krn memang tidak ada pilihan lain selain ikut ter-download)
  • Surah column name : surat
  • Verse column name : ayat
  • Text column name : text
Gambar 2 berikut ini menjelaskan hasil dowanload data Al Quran versi bahsa arab tersebut. 

Gambar 2 : Hasil Download Data Al Quran versi Bahasa Arab (Original)

Hal yang sama juga bisa kita lakukan untuk men-download terjemahan Al Quran. Dalam contoh kali ini, saya download juga terjemahan Al Quran versi bahasa Indonesia. Table name saya isi “IndonesianQuran”

 sedangkan Table structure-nya saya samakan dengan table structure Al Quran bahasa Arab seperti yang sudah saya jelaskan diatas. Gambar 3 berikut ini menunjukkan cara download-nya. 


Gambar 3 : Download Terjemahan Al Quran dalam Bahasa Indonesia

B. Menyimpan Data Al QUran ke Database

Kita lanjutkan langkah kedua yaitu menyimpan data-data Al Quran tersebut dalam database kita. Langkah awal kita perlu menyiapkan database baru. Pada contoh kali ini, nama database yang saya buat adalah “quran”. Gambar 4 berikut ini menjelaskan database yang saya gunakan dalam aplikasi Al Quran digital ini.

Gambar 4 : Konfigurasi Database Al Quran Digital

Setelah database-nya selesai kita buat, maka kita tinggal meng-import data Al Quran yang sudah kita download tadi kedalam database kita. O iya dalam table tersebut ada tambahan 1 (satu) table yaitu table DaftarSurat. Table ini berisi data daftar Surat-surat Al Quran mulai dari Surat Al Fatihah sampai dengan Surat An Nas sebanyak 144 surat. Jangan khawatir script daftar surat tersebut, sudah saya sediakan dan bisa di-download   Daftar Surat

dan kalian sesuaikan seperti di atas pada folder Mobile C:/Xampp/htdocs/quran/mobile agar tampilan mobile anda berjalan dengan baik. maaf karena banyak file tambahan karena itu bisa anda manfaatkan sebagai tambahan fiture hehe. jika ada pertanyaan bisa koment dibawah, dan akan saya balas secepatnya. terima kasih

4 Komentar untuk "Cara Membuat Website Al-Quran Menggunakan PHP"

  1. Terima kasih infonya sangat bermanfaat, kunjungi website kami juga di http://jos.co.id/
    Semoga sukses selalu :)

    BalasHapus
  2. Link databasenya tidak bisa pak di klik

    BalasHapus
  3. Pak Database Alquran PHP nya belum ada ya?

    BalasHapus

Komentarlah Dengan Relavant

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel