Cara Melakukan Build quran-web

TeknoCerdas.com – Salam cerdas untuk kita semua. Saya cukup sering mendapatkan email tentang bagaimana melakukan build project quran-web yang saya deploy di website https://quranweb.id. Tulisan kali ini adalah tutorial melakukan build quran-web.

Yang perlu diperhatikan adalah ketika melakukan build quran-web perlu project lain yang harus didownloan yaitu quran-json. Tanpa quran-json build tidak dapat dilakukan.

Hal yang dibutuhkan.

• PHP yang bisa diakses lewat command line
• Git atau cURL untuk download project dari GitHub

Daftar Isi

• Download Project quran-json
• Download Project quran-web
• Build quran-web untuk localhost
• Build quran-web untuk Domain Tertentu

Download Project quran-json

Saya asumsikan proses build ini menggunakan MacOS atau Linux. Jika menggunakan Windows maka sesuaikan perintah yang diperlukan. Saran saya gunakan Windows Subsystem Linux (WSL) atau instal Linux pada VirtualBox.

Buat sebuah direktori misal di $HOME dengan nama myproject untuk menampung quran-json dan quran-web nantinya.

$ mkdir myproject
$ cd myproject

Setelah itu download project quran-json dari GitHub.

$ git clone https://github.com/rioastamal/quran-json.git

Cloning into 'quran-json'...
remote: Enumerating objects: 529, done.
remote: Total 529 (delta 0), reused 0 (delta 0), pack-reused 529
Receiving objects: 100% (529/529), 4.89 MiB | 926.00 KiB/s, done.
Resolving deltas: 100% (271/271), done.
Checking connectivity... done.

Harusnya sekarang pada direktori myproject ada direktori baru yaitu quran-json.

$ ls -l

total 0
drwxr-xr-x  6 rioastamal  wheel  192 Oct 24 15:51 quran-json

Lanjutkan ke langkah berikutnya yaitu quran-web.

Download Project quran-web

Pastikan masih berada pada direktori myproject. Lakukan download dengan Git.

$ git clone https://github.com/rioastamal/quran-web.git

Cloning into 'quran-web'...
remote: Enumerating objects: 36, done.
remote: Counting objects: 100% (36/36), done.
remote: Compressing objects: 100% (26/26), done.
remote: Total 434 (delta 13), reused 25 (delta 10), pack-reused 398
Receiving objects: 100% (434/434), 279.28 KiB | 218.00 KiB/s, done.
Resolving deltas: 100% (223/223), done.
Checking connectivity... done.

Sekarang cek isi dari direktori myproject harusnya berisi dua direktori yaitu quran-json dan quran-web.

$ ls -l

total 0
drwxr-xr-x  6 rioastamal  wheel  192 Oct 24 15:51 quran-json
drwxr-xr-x  9 rioastamal  wheel  288 Oct 24 15:53 quran-web

Download selesai dilakukan saatnya melakukan build.

Build quran-web untuk localhost

Contoh build yang pertama adalah dengan melakukan build untuk pengetesan di localhost. Pertama masuk terlebih dahulu ke dalam direktori quran-web.

$ cd quran-web

Sekarang coba lihat isi dari direktori build/ harusnya masih kosong.

$ ls -l build/

Saya akan menggunakan web server bawaan dari PHP bukan Apache atau Nginx. Web server akan dijalankan pada host localhost port 8080 atau http://localhost:8080 sehingga ini akan dijadikan base URL saat melakukan build.

Set beberapa konfigurasi yang diperlukan yaitu letak direktori quran-json. ../quran-json berarti direktori berada level atas satu kali.

Untuk murottal menggunakan mp3 dari URL quranweb.id/murottal.

$ export QURAN_JSON_DIR=../quran-json
$ export QURAN_BASE_URL=http://localhost:8080
$ export QURAN_BASE_MUROTTAL_URL=https://quranweb.id/murottal

Untuk melakukan build lakukan perintah berikut.

$ php src/generator/generator.php
Generating website...done.

Sekarang cek isi dari direktori build/ harusnya sekarang sudah terisi file-file HTML hasil build dari quran-web.

$ ls -l build/

total 0
drwxr-xr-x  122 rioastamal  wheel  3904 Oct 24 16:11 public

Semua file yang harus diupload ke web server adalah yang berada pada direktori public/.

$ ls -l build/public/

[...CUT...]
drwxr-xr-x   11 rioastamal  wheel     352 Oct 24 16:11 98
drwxr-xr-x   11 rioastamal  wheel     352 Oct 24 16:11 99
-rw-r--r--    1 rioastamal  wheel   15406 Oct 24 16:11 favicon.ico
drwxr-xr-x    3 rioastamal  wheel      96 Oct 24 16:11 fonts
-rw-r--r--    1 rioastamal  wheel   84803 Oct 24 16:11 index.html
-rw-r--r--    1 rioastamal  wheel      67 Oct 24 16:11 robots.txt
-rw-r--r--    1 rioastamal  wheel  836975 Oct 24 16:11 sitemap.xml
drwxr-xr-x    3 rioastamal  wheel      96 Oct 24 16:11 tentang

Sekarang jalankan PHP web server pada localhost port 80 dengan document root mengarah ke direktori build/public/.

$ php -S 0.0.0.0:8080 -t build/public/

Listening on http://0.0.0.0:8080
Document root is /private/tmp/myproject/quran-web/build/public
Press Ctrl-C to quit.

Sekarang buka web browser seperti Chrome, Firefox atau Safari dan arahkan ke http://localhost:8080.

Build quran-web untuk Domain Tertentu

Yang harus diganti jika ingin menggunakan domain tertentu hanyalah konfigurasi QURAN_BASE_URL. Selebihnya harusnya tidak perlu ada perubahan.

Pada contoh ini misalkan kita akan menggunakan domain quranweb.id maka konfigurasinya adalah sebagai berikut.

$ export QURAN_JSON_DIR=../quran-json
$ export QURAN_BASE_URL=https://quranweb.id
$ export QURAN_BASE_MUROTTAL_URL=https://quranweb.id/murottal

Jika memiliki Google Analytics ID juga bisa disertakan.

$ export QURAN_ANALYTICS_ID=ID_ANALYTICS_ANDA

Setelah itu lakukan build seperti sebelumnya.

$ php src/generator/generator.php
Generating website...done.

Setelah build selesai seluruh file yang ada pada direktori build/public/ dapat diupload ke web server atau hosting.