Install absensi qr code online di docker

Sumber : https://github.com/ikhsan3adi/absensi-sekolah-qr-code

1. Clone repository

git clone https://github.com/ikhsan3adi/absensi-sekolah-qr-code.git
cd absensi-sekolah-qr-code

2. Edit Dockerfile untuk menyesuaikan waktu dan versi php nya nya

nano /absensi-sekolah-qr-code/Dockerfile

3. Edit file yamlnya untuk menyesuaikan port

Jika di host server utama sudah menggunakan port 3306 untuk database, maka di file yaml ini port databasenya bisa dirubah ke 3308 misalnya, demikian juga port 8081, dan 8082, dan jangan lupa setting waktunyanya Asia/Jayapura

nano docker-compose.yaml

4. Untuk menjalankan aplikasi menggunakan Docker, pastikan Docker dan Docker Compose sudah terinstal di komputer Anda. Jalankan Container Jalankan perintah berikut di root project:

docker-compose up -d --build  ( di server yang lebih lama gunakan dokcer compose up -d --build)

Perintah ini akan membangun image dan menjalankan container untuk aplikasi web, database, dan phpMyAdmin.

2. Akses Aplikasi

Aplikasi Utama: Akses melalui browser di http://localhost:8080 (ini port default), jika sudah ada yang pakai port 8080, bisa di rumah file yaml di atas sebelum menjalankan containernya

phpMyAdmin: Akses melalui browser di http://localhost:8081/

3. Konfigurasi

Aplikasi sudah dikonfigurasi untuk terhubung dengan database container secara otomatis. jika tidak terkoneksi secara otomatis, maka harus masuk ke container aplikasi absensi nya aplikasinya dengan perintah 

docker exec -it [nama_container/ID] bash

Setelah di dalam container aplikasi, jalankan perintah berikut :

php spark migrate --all ( untuk migrasi php nya)
php spark db:seed DatabaseSeeder (untuk seeder data awal ke aplikasinya)

Akses Aplikasi absensi qr code online di docker melalui Cloudflare

Langkah 1 — Pastikan DNS Cloudflare aktif sebagai Proxy

Di Cloudflare buka:

Websites → smpyppksantodonboscofakfak.sch.id → DNS → Records

Cari:

absen.smpyppksantodonboscofakfak.sch.id

Pastikan kolom Proxy status:

🟠 Proxied

Bukan:

⚪ DNS only

Transform Rules hanya berlaku untuk trafik yang melewati proxy Cloudflare.

Langkah 2 — Aktifkan Automatic HTTPS Rewrites

Masuk:

SSL/TLS → Edge Certificates

Cari:

Automatic HTTPS Rewrites

Ubah menjadi:

ON

Cloudflare memang menyediakan fitur ini untuk mengubah referensi HTTP menjadi HTTPS jika resource tersebut tersedia melalui HTTPS.

Kemudian cari:

Always Use HTTPS

Kalau belum aktif:

ON

Ini membuat pengunjung yang membuka:

http://absen.smpyppksantodonboscofakfak.sch.id

diarahkan ke:

https://absen.smpyppksantodonboscofakfak.sch.id

Namun Always Use HTTPS saja tidak cukup untuk kasus Anda, karena error Anda berasal dari AJAX HTTP yang dipanggil dari halaman HTTPS.

Langkah 3 — Buat Response Header Transform Rule

Sekarang masuk:

Rules → Transform Rules

Kemudian pilih:

Response Header Transform Rules

Klik:

Create rule

Cloudflare saat ini menyediakan pembuatan rule ini langsung dari dashboard.

Langkah 4 — Beri nama rule

Isi:

Nama: HTTPS Upgrade - Absensi

Langkah 5 — Tentukan URL yang terkena rule

Pada bagian:

When incoming requests match

pilih:

Custom filter expression

Masukkan expression:

(http.host eq "absen.smpyppksantodonboscofakfak.sch.id")

Jadi rule hanya berlaku untuk aplikasi absensi tersebut, bukan seluruh website/domain Anda.

Cloudflare memang menggunakan expression seperti ini untuk membatasi Response Header Transform Rule berdasarkan hostname.

Langkah 6 — Tambahkan Response Header

Pada bagian:

Modify response header

pilih:

Add static

Kemudian:

Header name Content-Security-Policy Value upgrade-insecure-requests

Jadi hasil akhirnya:

Content-Security-Policy: upgrade-insecure-requests

Saya sengaja menyarankan Add static, bukan Set static, supaya kita tidak menimpa CSP yang mungkin sudah dibuat oleh aplikasi.

Cloudflare mendukung operasi Add static, yang menambahkan header tanpa menghapus header dengan nama yang sama.

Langkah 7 — Hasil konfigurasi harus seperti ini

Secara keseluruhan:

Rule name: HTTPS Upgrade - Absensi

When incoming requests match:

(http.host eq "absen.smpyppksantodonboscofakfak.sch.id")

Modify response header:

Operation: Add static

Header name: Content-Security-Policy

Value: upgrade-insecure-requests

Kemudian klik:

Deploy

Cloudflare akan menerapkan Response Header Transform Rule pada response yang dikirim kepada browser.

Langkah 8 — Tunggu sebentar, lalu cek dari server

Setelah rule aktif, jalankan:

curl -I https://absen.smpyppksantodonboscofakfak.sch.id/admin/guru

Cari:

Content-Security-Policy: upgrade-insecure-requests

Kalau muncul, berarti rule Cloudflare sudah berhasil.

Hasilnya kurang lebih:

HTTP/2 200 ... content-security-policy: upgrade-insecure-requests ...

Status HTTP-nya mungkin berbeda tergantung aplikasi, yang penting header tersebut muncul.

Revisi File Scan.php untuk Scan Barcode lebih lancar

Jika scan barcode tidak terlalu lancar, setelah scan pertama, scan berikutnya biasanya error dan harus di refresh supaya lancar. Error yang muncul biasanya : TypeError: Cannot read properties of undefined (reading 'open') maka ganti file scan.php yang berada di folder : :/var/www/html/app/Views/scan, dengan versi berikut : 
https://github.com/kevinkayla/absen-sekolah-qr-code/blob/main/scan.php

4. Menghentikan Container Untuk menghentikan container:

docker-compose down