Install absensi qr code online di docker

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

INSTALASI

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 Dockerfile

3. Edit file docker-compose.yml untuk menyesuaikan port

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

nano docker-compose.yml

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 docker compose up -d --build)

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

5. 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/

6. 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

Menghentikan Container

Untuk menghentikan container:

docker-compose down

Rubah Password superadmin

CodeIgniter Shield 1.4.0 memiliki perintah khusus untuk mengganti password pengguna. Jadi, kita tidak perlu mengedit database secara manual atau menjalankan seeder ulang.

Langkah 1 — Ganti password superadmin

Jalankan perintah ini langsung dari terminal container aplikasi Anda:

php spark shield:user password -n superadmin

Perintah tersebut akan mencari pengguna dengan username superadmin, lalu menjalankan proses penggantian password melalui mekanisme Shield.

Langkah 2 — Masukkan password baru

Ikuti instruksi yang muncul di terminal. Jika diminta, masukkan password baru dan konfirmasikan sesuai prompt.

Gunakan password yang kuat, misalnya kombinasi huruf besar dan kecil, angka, serta simbol. Jangan menggunakan contoh password yang dipublikasikan sebagai password akun sebenarnya.

Langkah 3 — Uji login

Buka halaman login aplikasi absensi.

Masuk menggunakan username superadmin.

Gunakan password baru yang tadi ditetapkan.

Pastikan halaman admin dan data absensi tetap dapat diakses.

Catatan penting: Perintah ini hanya mengganti password akun, bukan menghapus data absensi atau menjalankan ulang seeder.

Ganti username dan email superadmin

1. Ganti username superadmin Jalankan perintah berikut di terminal container aplikasi:

php spark shield:user changename -n superadmin --new-name adminsekolah

Ganti adminsekolah dengan username baru yang Anda inginkan.

2. Ganti email akun

Setelah username berhasil diubah, jalankan:

php spark shield:user changeemail -n adminsekolah --new-email [email protected]

Sesuaikan:

adminsekolah dengan username baru yang sudah ditetapkan.

[email protected] dengan email yang ingin digunakan.

Penting: Gunakan email yang valid dan belum dipakai akun lain. Jika email tersebut sudah terdaftar, Shield dapat menolak perubahan.

3. Verifikasi perubahan

Jalankan:

php spark shield:user list -n admin_sekolah

Pastikan username dan email sudah sesuai. Setelah itu, coba login menggunakan username baru dan password yang sebelumnya Anda ubah.

Perubahan ini tidak menghapus data absensi dan tidak memerlukan seeder ulang.

Perbaikan file App.php untuk akses https dari cloudflare lebih lancar

1. Cari tahu ip alamat sumber melalui domain cloudflare yang masuk ke Apache docker dengan cara jalankan perintah berikut:

docker logs --tail 30 [id container]

2. Jika sudah mengetahui ip nya , misal : 172.18.0.1

PERLU DI EDIT

1. Periksa header HTTPS yang diterima aplikasi Jalankan perintah berikut untuk membuat file pemeriksaan sementara: docker exec 716d599d8d6b bash -c 'cat > /var/www/html/public/proxy-check.php <<'\PHP'\ <?php header("Content-Type: text/plain"); echo "REMOTE_ADDR=" . ($_SERVER["REMOTE_ADDR"] ?? "-") . PHP_EOL; echo "HTTPS=" . ($_SERVER["HTTPS"] ?? "-") . PHP_EOL; echo "HTTP_X_FORWARDED_PROTO=" . ($_SERVER["HTTP_X_FORWARDED_PROTO"] ?? "-") . PHP_EOL; echo "HTTP_HOST=" . ($_SERVER["HTTP_HOST"] ?? "-") . PHP_EOL; PHP'

2. Buka alamat pemeriksaan Buka melalui browser:

https://absensmadon.elearningfakfak.my.id/proxy-check.php

Hasil yang diharapkan kurang lebih: REMOTE_ADDR=172.18.0.1 HTTPS=- HTTP_X_FORWARDED_PROTO=https HTTP_HOST=absensmadon.elearningfakfak.my.id

Kirimkan hasil yang muncul di browser. 3. Hapus file pemeriksaan setelah digunakan Setelah hasilnya diperoleh, jalankan: docker exec 716d599d8d6b rm -f /var/www/html/public/proxy-check.php

Mengapa pemeriksaan ini diperlukan?

Masalah utama yang sudah kita temukan adalah aplikasi menghasilkan URL http:// ketika dibuka melalui HTTPS. Kita akan memperbaiki app/Config/App.php agar: - Akses melalui domain Cloudflare tetap menghasilkan URL HTTPS. - Akses melalui IP lokal tetap menggunakan HTTP. - Hanya proxy yang dipercaya yang boleh menentukan protokol melalui X-Forwarded-Proto. - Database dan data absensi tidak disentuh. Jangan ubah App.php dahulu sampai hasil pemeriksaan header diterima.

hasil pemeriksaan : REMOTE_ADDR=172.18.0.1 HTTPS=- HTTP_X_FORWARDED_PROTO=https HTTP_HOST=absensmadon.elearningfakfak.my.id

Hasil pemeriksaan sudah memastikan penyebab masalah dan jalur perbaikannya. Header HTTPS terdeteksi dengan benar Parameter Hasil Keterangan REMOTE_ADDR 172.18.0.1 Alamat proxy yang menghubungi Apache HTTPS - Apache menerima koneksi HTTP dari Tunnel HTTP_X_FORWARDED_PROTO https Cloudflare menyampaikan bahwa koneksi pengguna menggunakan HTTPS HTTP_HOST absensmadon.elearningfakfak.my.id Domain aplikasi

Jadi, kita tidak perlu mengubah konfigurasi Cloudflare Tunnel. Perbaikannya berada pada app/Config/App.php: aplikasi harus memperhitungkan X-Forwarded-Proto, tetapi hanya jika permintaan berasal dari proxy tepercaya 172.18.0.1.

Kita juga akan mempertahankan akses langsung melalui IP lokal menggunakan HTTP. 1. Backup file App.php Di server Ubuntu smadbos, jalankan: cd /var/www/html/absensi-sekolah-qr-code

cp app/Config/App.php app/Config/App.php.backup-20261104

Pastikan backup berhasil: ls -l app/Config/App.php*

2. Ubah konfigurasi app/Config/App.php Buka file: /var/www/html/absensi-sekolah-qr-code/app/Config/App.php

Cari deklarasi berikut: public array $proxyIPs = [];

Ganti menjadi: public array $proxyIPs = ['172.18.0.1'];

Kemudian cari fungsi __construct() yang sebelumnya Anda kirim. Ganti seluruh fungsi tersebut dengan kode berikut: public function __construct() {

   parent::__construct();

   // Untuk proses CLI, gunakan URL lokal.
   if (is_cli() || !isset($_SERVER['HTTP_HOST'])) {
       $this->baseURL = 'http://localhost:8080/';
       return;
   }

   $host = $_SERVER['HTTP_HOST'];

   // Periksa apakah koneksi langsung menggunakan HTTPS.
   $isHttps = (
       isset($_SERVER['HTTPS']) &&
       strtolower($_SERVER['HTTPS']) !== 'off'
   );

   // Hanya percaya X-Forwarded-Proto dari proxy yang telah ditentukan.
   $remoteAddr = $_SERVER['REMOTE_ADDR'] ?? ;

   if ($remoteAddr === '172.18.0.1') {
       $forwardedProto = strtolower(
           trim(explode(',', $_SERVER['HTTP_X_FORWARDED_PROTO'] ?? )[0])
       );

       if ($forwardedProto === 'https') {
           $isHttps = true;
       }
   }

   $protocol = $isHttps ? 'https' : 'http';

   $this->baseURL = $protocol . '://' . $host . '/';

}

Penting: Jangan mengubah bagian lain dalam App.php. Jangan mengubah .env.docker, database, maupun konfigurasi Docker. 3. Uji aplikasi tanpa restart container Setelah menyimpan file, jalankan: curl -sL https://absensmadon.elearningfakfak.my.id/login | grep -inE 'baseURL:|serviceWorker.register|city-profile.jpg'

Hasil yang diharapkan adalah URL menggunakan https://, misalnya: baseURL: 'https://absensmadon.elearningfakfak.my.id/',

dan: navigator.serviceWorker.register('https://absensmadon.elearningfakfak.my.id/sw.js')

4. Pastikan akses IP lokal tetap HTTP Jalankan: curl -sL http://127.0.0.1:8080/login | grep -inE 'baseURL:|serviceWorker.register'

Hasil yang diharapkan: baseURL: 'http://127.0.0.1:8080/',

Dengan demikian: - Domain Cloudflare menghasilkan URL HTTPS. - Akses langsung melalui IP lokal tetap HTTP. - Header HTTPS dari sumber selain proxy 172.18.0.1 tidak dipercaya. 5. Uji melalui browser Setelah kedua pengujian berhasil: 1. Tutup tab aplikasi absensi. 2. Buka kembali https://absensmadon.elearningfakfak.my.id. 3. Tekan Ctrl + Shift + R untuk memuat ulang halaman. 4. Coba login dan buka halaman admin, data siswa, serta fitur presensi. Jangan restart atau rebuild Docker. Perubahan file PHP pada bind mount langsung terbaca oleh aplikasi.

Kirimkan hasil pengujian langkah 3 dan 4. Setelah HTTPS beres, kita lanjut memperbaiki Service Worker agar cache tidak menyebabkan halaman atau data absensi menjadi kedaluwarsa.

baik luwat cloudflare maupun lokal muncul di halaman browser seperti ini : Displayed at 10:00:26 — PHP: 8.4.26 — CodeIgniter: 4.7.4 -- Environment: development CodeIgniter\Exceptions\ConfigException You must set an array with Proxy IP address key and HTTP header name value in Config\App::$proxyIPs.

SYSTEMPATH/HTTP/RequestTrait.php at line 76

- Backtrace - Server - Request - Response - Files - Memory 1. SYSTEMPATH/Config/Services.php : 701   —  CodeIgniter\HTTP\Request->getIPAddress () 2. SYSTEMPATH/Config/BaseService.php : 325   —  CodeIgniter\Config\Services::session ( ) 3. SYSTEMPATH/Config/BaseService.php : 264   —  CodeIgniter\Config\BaseService::__callStatic ( ) 4. SYSTEMPATH/Config/Services.php : 668   —  CodeIgniter\Config\BaseService::getSharedInstance ( ) 5. SYSTEMPATH/Config/BaseService.php : 334   —  CodeIgniter\Config\Services::session () 6. SYSTEMPATH/Config/BaseService.php : 203   —  CodeIgniter\Config\BaseService::__callStatic ( ) 7. SYSTEMPATH/Common.php : 1096   —  CodeIgniter\Config\BaseService::get ( ) 8. SYSTEMPATH/Common.php : 1069   —   service() 9. VENDORPATH/codeigniter4/shield/src/Authentication/Authenticators/Session.php : 742   —   session() 10. VENDORPATH/codeigniter4/shield/src/Authentication/Authenticators/Session.php : 760   —  CodeIgniter\Shield\Authentication\Authenticators\Session->getSessionUserInfo () 11. VENDORPATH/codeigniter4/shield/src/Authentication/Authenticators/Session.php : 422   —  CodeIgniter\Shield\Authentication\Authenticators\Session->getSessionUserKey ( ) 12. VENDORPATH/codeigniter4/shield/src/Authentication/Authenticators/Session.php : 406   —  CodeIgniter\Shield\Authentication\Authenticators\Session->checkUserState () 13. VENDORPATH/codeigniter4/shield/src/Filters/SessionAuth.php : 54   —  CodeIgniter\Shield\Authentication\Authenticators\Session->loggedIn () 14. SYSTEMPATH/Filters/Filters.php : 241   —  CodeIgniter\Shield\Filters\SessionAuth->before ( ) 15. SYSTEMPATH/Filters/Filters.php : 221   —  CodeIgniter\Filters\Filters->runBefore ( ) 16. SYSTEMPATH/CodeIgniter.php : 488   —  CodeIgniter\Filters\Filters->run ( ) 17. SYSTEMPATH/CodeIgniter.php : 363   —  CodeIgniter\CodeIgniter->handleRequest ( ) 18. SYSTEMPATH/Boot.php : 417   —  CodeIgniter\CodeIgniter->run () 19. SYSTEMPATH/Boot.php : 68   —  CodeIgniter\Boot::runCodeIgniter ( ) 20. FCPATH/index.php : 56   —  CodeIgniter\Boot::bootWeb ( )

Error tersebut muncul karena format konfigurasi $proxyIPs yang saya berikan sebelumnya tidak sesuai dengan CodeIgniter 4.7.4.

Pada versi ini, $proxyIPs harus berbentuk array asosiatif, yaitu alamat IP proxy sebagai key dan nama header sebagai value. Jadi, format: public array $proxyIPs = ['172.18.0.1'];

memang salah dan menyebabkan aplikasi gagal memproses session, baik melalui Cloudflare maupun akses lokal. 1. Perbaiki konfigurasi $proxyIPs Buka file: /var/www/html/absensi-sekolah-qr-code/app/Config/App.php

Cari: public array $proxyIPs = ['172.18.0.1'];

Ganti menjadi: public array $proxyIPs = [

   '172.18.0.1' => 'X-Forwarded-For',

];

Ini merupakan format yang sesuai untuk konfigurasi proxy CodeIgniter 4.7.4. 2. Periksa sintaks PHP Jalankan di server: php -l /var/www/html/absensi-sekolah-qr-code/app/Config/App.php

Hasil yang benar: No syntax errors detected in App.php

3. Uji kembali aplikasi Buka kedua alamat berikut: - Cloudflare: https://absensmadon.elearningfakfak.my.id/login - Lokal: http://192.168.10.189:8080/login Jika halaman login sudah tampil, uji login dan halaman admin.

Tidak perlu restart Docker atau menjalankan migrasi database. 4. Jika masih muncul error Kirimkan hasil perintah ini: grep -n -A5 -B3 'proxyIPs' /var/www/html/absensi-sekolah-qr-code/app/Config/App.php

Satu hal tambahan: setelah aplikasi kembali normal, kita perlu mengubah CI_ENVIRONMENT dari development menjadi production agar detail error dan backtrace tidak tampil kepada pengunjung. Namun, kita selesaikan masalah proxy terlebih dahulu.