fix: import wasnt working properly

Dockerfile

@@ -0,0 +1,22 @@
+FROM php:8.2-apache
+
+# Install PHP extensions & enable Apache modules
+RUN docker-php-ext-install mysqli pdo pdo_mysql \
+    && a2enmod rewrite headers
+
+# Allow .htaccess overrides and enable rewrite for all directories
+RUN sed -i 's|AllowOverride None|AllowOverride All|g' /etc/apache2/apache2.conf \
+    && echo "ServerName localhost" >> /etc/apache2/apache2.conf
+
+# Set working directory
+WORKDIR /var/www/html
+
+# Copy application files
+COPY . /var/www/html/
+
+# Set proper permissions for web server
+RUN chown -R www-data:www-data /var/www/html \
+    && find /var/www/html -type d -exec chmod 755 {} \; \
+    && find /var/www/html -type f -exec chmod 644 {} \;
+
+EXPOSE 80

docker-compose.yml

@@ -0,0 +1,30 @@
+services:
+  app:
+    build: .
+    restart: unless-stopped
+    ports:
+      - "8084:80"
+    environment:
+      DB_HOST: db
+      DB_USER: root
+      DB_PASS: miaDatabase123
+    depends_on:
+      db:
+        condition: service_healthy
+
+  db:
+    image: mariadb:11.4
+    restart: unless-stopped
+    environment:
+      MARIADB_ROOT_PASSWORD: miaDatabase123
+    volumes:
+      - db_data_mia:/var/lib/mysql
+    healthcheck:
+      test: ["CMD-SHELL", "mariadb-admin ping -h localhost -uroot -pmiaDatabase123 --silent"]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+      start_period: 30s
+
+volumes:
+  db_data_mia:

index.html

@@ -311,7 +311,7 @@
                         dan Pengambil Kepijakan) serta visualisasi peta heatmap dan sebaran penduduk miskin secara
                         langsung.</p>
                 </div>
-                <a href="http://y4coccc4kkocggw8wcgow0wc.203.24.51.230.sslip.io" class="btn-link btn-primary">
+                <a href="poverty-map/" class="btn-link btn-primary">
                     Buka Aplikasi <span>&rarr;</span>
                 </a>
             </div>
@@ -324,7 +324,7 @@
                     <p>Visualisasi sebaran stasiun pengisian bahan bakar umum (SPBU) di wilayah Pontianak dan sekitarnya
                         menggunakan layer kontrol interaktif peta Leaflet.js.</p>
                 </div>
-                <a href="http://pogc8wgggk4oow0ck8wccwsw.203.24.51.230.sslip.io" class="btn-link btn-secondary">
+                <a href="spbu_layer/" class="btn-link btn-secondary">
                     Buka Project <span>&rarr;</span>
                 </a>
             </div>
@@ -337,7 +337,21 @@
                     <p>Peta visualisasi infrastruktur jalan tanah menggunakan pemetaan garis polylines serta poligon
                         kecamatan untuk menganalisis perkembangan jalan daerah.</p>
                 </div>
-                <a href="http://t00c8cc4ssc804soskcso80k.203.24.51.230.sslip.io" class="btn-link btn-secondary">
+                <a href="jalan_tanah/" class="btn-link btn-secondary">
+                    Buka Project <span>&rarr;</span>
+                </a>
+            </div>
+
+            <!-- 4. Pontianak Penduduk -->
+            <div class="card">
+                <div class="card-header">
+                    <span class="badge badge-class">Project Kelas</span>
+                    <h2>Peta Kepadatan Penduduk Pontianak</h2>
+                    <p>Peta choropleth kepadatan penduduk per kecamatan di Kota Pontianak menggunakan data
+                        geospasial, dengan visualisasi warna berdasarkan jumlah penduduk dan info interaktif
+                        saat kursor diarahkan ke wilayah.</p>
+                </div>
+                <a href="pontianak-penduduk/" class="btn-link btn-secondary">
                     Buka Project <span>&rarr;</span>
                 </a>
             </div>
@@ -347,7 +361,7 @@
     <!-- Footer -->
     <footer>
         <p>&copy; 2026 Informatika Universitas Tanjungpura. All rights reserved.</p>
-        <p>Kode Sumber tersimpan di Gitea: <a href="REPLACE_WITH_GITEA_REPO_URL" class="repo-link">Repository Gitea
+        <p>Kode Sumber tersimpan di Gitea: <a href="https://git.ifuntanhub.dev/miaaurl/UAS_WebGIS_MiaAurelia_D1041231036" class="repo-link">Repository Gitea
                 Project</a></p>
     </footer>
 

pontianak-penduduk/index.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Peta Kepadatan Penduduk Pontianak</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    
+    <style>
+        #map { height: 600px; width: 100%; }
+        
+        /* Style untuk Info Control (Kotak di pojok kanan atas) */
+        .info {
+            padding: 6px 8px;
+            font: 14px/16px Arial, Helvetica, sans-serif;
+            background: white;
+            background: rgba(255,255,255,0.8);
+            box-shadow: 0 0 15px rgba(0,0,0,0.2);
+            border-radius: 5px;
+        }
+        .info h4 { margin: 0 0 5px; color: #777; }
+
+        /* Style untuk Legend (Kotak di pojok kanan bawah) */
+        .legend {
+            line-height: 18px;
+            color: #555;
+            background: white;
+            padding: 10px;
+            border-radius: 5px;
+            box-shadow: 0 0 15px rgba(0,0,0,0.2);
+        }
+        .legend i {
+            width: 18px;
+            height: 18px;
+            float: left;
+            margin-right: 8px;
+            opacity: 0.7;
+        }
+    </style>
+</head>
+<body>
+
+<div id="map"></div>
+
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+
+<script src="kecamatan.js"></script>
+
+<script>
+    // Inisialisasi Peta - Set view ke koordinat Pontianak
+    var map = L.map('map').setView([-0.02, 109.33], 12);
+
+    // Tambahkan Basemap (OpenStreetMap)
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; OpenStreetMap contributors'
+    }).addTo(map);
+
+    // 4. Fungsi Pewarnaan berdasarkan Jumlah Penduduk
+    function getColor(d) {
+        return d > 130000 ? '#800026' :
+            d > 100000 ? '#BD0026' :
+            d > 75000  ? '#E31A1C' :
+                            '#FFEDA0';
+    }
+
+    // 5. Fungsi Style untuk Polygon
+    function style(feature) {
+        return {
+            fillColor: getColor(feature.properties.Penduduk), 
+            weight: 2,
+            opacity: 1,
+            color: 'white',
+            dashArray: '3',
+            fillOpacity: 0.7
+        };
+    }
+
+    // 6. Fungsi Interaksi (Hover)
+    function highlightFeature(e) {
+        var layer = e.target;
+        layer.setStyle({
+            weight: 5,
+            color: '#666',
+            dashArray: '',
+            fillOpacity: 0.7
+        });
+        layer.bringToFront();
+        info.update(layer.feature.properties);
+    }
+
+    var geojson;
+    function resetHighlight(e) {
+        geojson.resetStyle(e.target);
+        info.update();
+    }
+
+    function zoomToFeature(e) {
+        map.fitBounds(e.target.getBounds());
+    }
+
+    function onEachFeature(feature, layer) {
+        layer.on({
+            mouseover: highlightFeature,
+            mouseout: resetHighlight,
+            click: zoomToFeature
+        });
+    }
+
+    // Tambahkan data ke peta
+    geojson = L.geoJson(statesData, {
+        style: style,
+        onEachFeature: onEachFeature
+    }).addTo(map);
+
+    // 7. Menambahkan Custom Info Control
+    var info = L.control();
+
+    info.onAdd = function (map) {
+        this._div = L.DomUtil.create('div', 'info');
+        this.update();
+        return this._div;
+    };
+
+    info.update = function (props) {
+        this._div.innerHTML = '<h4>Jumlah Penduduk Pontianak</h4>' +  (props ?
+            '<b>' + props.Ket + '</b><br />' + 
+            (props.Penduduk ? props.Penduduk.toLocaleString('id-ID') : '0') + ' jiwa'
+            : 'Dekatkan mouse ke wilayah');
+    };
+
+    info.addTo(map);
+
+    // 8. Menambahkan Legend
+    var legend = L.control({position: 'bottomright'});
+
+    legend.onAdd = function (map) {
+        var div = L.DomUtil.create('div', 'info legend'),
+            grades = [0, 75000, 100000, 130000], // Sesuaikan dengan fungsi getColor
+            labels = [];
+
+        for (var i = 0; i < grades.length; i++) {
+            div.innerHTML +=
+                '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
+                grades[i].toLocaleString('id-ID') + (grades[i + 1] ? '&ndash;' + grades[i + 1].toLocaleString('id-ID') + '<br>' : '+');
+        }
+        return div;
+    };
+
+    legend.addTo(map);
+
+</script>
+</body>
+</html>

poverty-map/api.php

@@ -46,10 +46,15 @@ function updateCoverage($conn) {
 
     $penduduk = $conn->query("SELECT * FROM penduduk_miskin");
     while ($p = $penduduk->fetch_assoc()) {
+        if ($p['lat'] === null || $p['lng'] === null) continue;
+
         $terdekat_id = "NULL";
         $jarak_min   = INF;
         
         foreach ($rumah_ibadah_list as $ri) {
+            if ($ri['lat'] === null || $ri['lng'] === null) continue;
+            if ((float)$ri['lat'] === 0.0 && (float)$ri['lng'] === 0.0) continue;
+
             $jarak = hitungJarak($p['lat'], $p['lng'], $ri['lat'], $ri['lng']);
             if ($jarak <= $ri['radius'] && $jarak < $jarak_min) {
                 $jarak_min   = $jarak;
@@ -527,24 +532,46 @@ if ($action == 'delete_user' && $_SERVER['REQUEST_METHOD'] == 'POST') {
 // ── GET GEOCODING QUEUE ───────────────────────────────────────────────────────
 if ($action == 'get_geocoding_queue') {
     requireAdmin($role);
-    $res = $conn->query("
+    $rows = [];
-        SELECT id, nama_kepala, jumlah_anggota, alamat, status_geocoding
+
+    $res1 = $conn->query("
+        SELECT id, nama_kepala AS nama, alamat, status_geocoding
         FROM penduduk_miskin
         WHERE lat IS NULL OR lng IS NULL
         ORDER BY id DESC
     ");
-    $rows = [];
+    while ($row = $res1->fetch_assoc()) {
-    while ($row = $res->fetch_assoc()) $rows[] = $row;
+        $row['tipe'] = 'penduduk';
+        $rows[] = $row;
+    }
+
+    $res2 = $conn->query("
+        SELECT id, nama, alamat, NULL AS status_geocoding
+        FROM rumah_ibadah
+        WHERE (lat IS NULL OR lng IS NULL) OR (lat = 0 AND lng = 0)
+        ORDER BY id DESC
+    ");
+    while ($row = $res2->fetch_assoc()) {
+        $row['tipe'] = 'ri';
+        $rows[] = $row;
+    }
+
     echo json_encode($rows);
 }
 
 // ── UPDATE LOKASI (dari antrean geocoding) ────────────────────────────────────
 if ($action == 'update_lokasi' && $_SERVER['REQUEST_METHOD'] == 'POST') {
     requireAdmin($role);
-    $id  = (int)$_POST['id'];
+    $id   = (int)$_POST['id'];
-    $lat = (float)$_POST['lat'];
+    $lat  = (float)$_POST['lat'];
-    $lng = (float)$_POST['lng'];
+    $lng  = (float)$_POST['lng'];
-    $conn->query("UPDATE penduduk_miskin SET lat=$lat, lng=$lng, status_geocoding='sukses' WHERE id=$id");
+    $tipe = $_POST['tipe'] ?? 'penduduk';
+
+    if ($tipe === 'ri') {
+        $conn->query("UPDATE rumah_ibadah SET lat=$lat, lng=$lng WHERE id=$id");
+    } else {
+        $conn->query("UPDATE penduduk_miskin SET lat=$lat, lng=$lng, status_geocoding='sukses' WHERE id=$id");
+    }
     updateCoverage($conn);
     echo json_encode(['status' => 'success']);
 }

poverty-map/import.php

@@ -151,7 +151,7 @@ while (($row = fgetcsv($handle, 0, $delim)) !== false) {
 
         // Simpan tanpa koordinat — admin klik peta untuk melengkapi
         $conn->query("INSERT INTO rumah_ibadah (nama, jenis, alamat, radius, lat, lng)
-                      VALUES ('$nama', '$jenis', '$alamat', $radius, NULL, NULL)");
+                      VALUES ('$nama', '$jenis', '$alamat', $radius, 0, 0)");
         $sukses++;
         sse('row', ['num'=>$row_num,'total'=>$total,'status'=>'sukses','nama'=>$row[0],
                     'msg'=>"$jenis · radius {$radius}m · koordinat perlu dilengkapi manual"]);

poverty-map/index.php

@@ -336,7 +336,7 @@ $is_koordinator = ($role === 'koordinator');
                     <span class="text-amber-500 flex-shrink-0 mt-0.5">&#9888;</span>
                     <div class="text-[11px] text-amber-800">
                         <span class="font-bold" id="stat-belum-validasi">0</span> data belum punya koordinat
-                        (hasil import CSV yang gagal geocoding).
+                        (hasil import CSV, koordinat belum dilengkapi).
                         <?php if ($is_admin): ?>
                         <button onclick="switchTab('wilayah')" class="underline font-semibold hover:text-amber-900 ml-1">Lihat Antrean →</button>
                         <?php endif; ?>
@@ -388,7 +388,7 @@ $is_koordinator = ($role === 'koordinator');
                     <span id="chevron-antrean" class="chevron text-amber-400 text-xs">&#9660;</span>
                 </button>
                 <div id="collapse-antrean" class="collapse-body closed">
-                    <p class="text-[10px] text-amber-700 px-3 pb-2">Data ini gagal di-geocoding otomatis. Klik "Bidik di Peta" lalu klik lokasi rumah yang sesuai.</p>
+                    <p class="text-[10px] text-amber-700 px-3 pb-2">Data hasil import CSV belum punya koordinat. Klik "Bidik di Peta" lalu klik lokasi yang sesuai.</p>
                     <div id="list-antrean" class="px-3 pb-3 space-y-1.5"></div>
                 </div>
             </section>
@@ -725,14 +725,14 @@ $is_koordinator = ($role === 'koordinator');
                     <div class="font-semibold text-slate-600 mb-1">Format kolom (Penduduk):</div>
                     <div class="font-mono bg-white border border-slate-100 rounded px-2 py-1 text-slate-700">Nama KK · Jml Anggota · Alamat · RT · RW · Kelurahan · Kecamatan</div>
                     <div class="mt-1">• Baris pertama (header) diabaikan &nbsp;• Delimiter koma atau titik koma</div>
-                    <div>• Jika geocoding gagal → masuk Antrean Validasi Lokasi</div>
+                    <div>• Koordinat tidak di-geocode otomatis → lengkapi via "Bidik di Peta" pada Antrean Validasi Lokasi</div>
                 </div>
                 <div id="import-format-ri" class="hidden mt-3 bg-slate-50 border border-slate-200 rounded-lg p-2.5 text-[10px] text-slate-500 space-y-0.5">
                     <div class="font-semibold text-slate-600 mb-1">Format kolom (Rumah Ibadah):</div>
                     <div class="font-mono bg-white border border-slate-100 rounded px-2 py-1 text-slate-700">Nama · Jenis · Alamat · Radius(opsional)</div>
                     <div class="mt-1">• Jenis: Masjid / Gereja Protestan / Gereja Katolik / Vihara / Pura / Kelenteng</div>
                     <div>• Jenis kosong → default Masjid &nbsp;• Radius kosong → default 500m</div>
-                    <div class="text-amber-600 font-semibold">• RI yang gagal geocoding tidak diinsert</div>
+                    <div class="text-amber-600 font-semibold">• Semua RI diinsert tanpa koordinat → lengkapi via "Bidik di Peta" pada Antrean Validasi Lokasi</div>
                 </div>
                 <button id="btn-start-import" onclick="startImport()" disabled
                     class="w-full mt-3 bg-blue-600 hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed text-white font-bold text-sm py-2.5 rounded-lg transition">
@@ -1604,7 +1604,7 @@ document.getElementById('exif-file-input').addEventListener('change', async func
                             </p>
                             <input type="text"   id="kepala"  placeholder="Nama Kepala Keluarga *" class="w-full mb-1 p-1 text-xs border rounded">
                             <input type="number" id="anggota" placeholder="Jumlah Anggota KK *"    class="w-full mb-1 p-1 text-xs border rounded">
-                            <input type="hidden" id="alamat_pm" value="${alamat.replace(/"/g,'&quot;')}">
+                            <textarea id="alamat_pm" rows="2" class="w-full mb-1 p-1 text-xs border rounded">${alamat}</textarea>
                             <label class="text-[10px] text-slate-500 block mt-1 mb-0.5">
                                 Foto Rumah
                                 <span class="text-violet-600 font-semibold">(terisi otomatis dari foto GPS &#10003;)</span>
@@ -1666,7 +1666,7 @@ map.on('click',function(e){
                 <div id="formPM"${!isPM?' class="hidden"':''}>
                     <input type="text"   id="kepala"  placeholder="Nama Kepala Keluarga" class="w-full mb-1 p-1 text-xs border rounded">
                     <input type="number" id="anggota" placeholder="Jumlah Anggota KK"    class="w-full mb-1 p-1 text-xs border rounded">
-                    <input type="hidden" id="alamat_pm" value="${alamat.replace(/"/g,'&quot;')}">
+                    <textarea id="alamat_pm" rows="2" class="w-full mb-1 p-1 text-xs border rounded">${alamat}</textarea>
                     <label class="text-[10px] text-slate-500 block mt-1 mb-0.5">Foto Rumah (opsional)</label>
                     <input type="file" id="foto_rumah_input" accept="image/*" class="w-full text-[10px] p-0.5 border border-slate-300 rounded bg-white">
                 </div>
@@ -1922,15 +1922,15 @@ window.loadGecodingQueue = () => {
             list.innerHTML = rows.map(r => `
                 <div class="group relative flex items-center gap-2 bg-white rounded-lg border border-amber-200 px-2 py-1.5 hover:border-amber-300 transition">
                     <div class="min-w-0 flex-1">
-                        <div class="text-xs font-semibold text-slate-800 truncate pr-5">${r.nama_kepala}</div>
+                        <div class="text-xs font-semibold text-slate-800 truncate pr-5">${r.nama}${r.tipe==='ri' ? ' <span class=\"text-amber-500\">(RI)</span>' : ''}</div>
                         <div class="text-[10px] text-slate-400 truncate">${r.alamat||'Alamat tidak tersedia'}</div>
                     </div>
-                    <button onclick="openBidikMode(${r.id},'${escQ(r.nama_kepala)}')"
+                    <button onclick="openBidikMode(${r.id},'${escQ(r.nama)}','${r.tipe}')"
                         class="flex-shrink-0 text-[10px] font-bold px-2 py-1 bg-amber-500 hover:bg-amber-600 text-white rounded-lg transition whitespace-nowrap">
                         &#127919; Bidik
                     </button>
                     <!-- Tombol hapus, muncul saat hover -->
-                    <button onclick="hapusAntrean(${r.id},'${escQ(r.nama_kepala)}')"
+                    <button onclick="hapusAntrean(${r.id},'${escQ(r.nama)}','${r.tipe}')"
                         class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity
                                w-4 h-4 flex items-center justify-center rounded-full
                                bg-red-100 hover:bg-red-500 text-red-500 hover:text-white text-[9px] font-bold leading-none"
@@ -1939,22 +1939,25 @@ window.loadGecodingQueue = () => {
         });
 };
 
-window.hapusAntrean = (id, nama) => {
+window.hapusAntrean = (id, nama, tipe) => {
     if (!confirm(`Hapus data "${nama}"?\nData ini akan dihapus permanen dari database.`)) return;
     const fd = new FormData(); fd.append('id', id);
-    fetch('api.php?action=delete_pm', {method:'POST', body:fd})
+    const endpoint = tipe === 'ri' ? 'delete_ri' : 'delete_pm';
+    fetch(`api.php?action=${endpoint}`, {method:'POST', body:fd})
         .then(r => r.json())
         .then(() => { loadData(); loadGecodingQueue(); });
 };
 
 // ── BIDIK MODE ────────────────────────────────────────────────────────
 let _bidikPmId = null;
+let _bidikTipe = 'penduduk';
 
-window.openBidikMode = (id, nama) => {
+window.openBidikMode = (id, nama, tipe) => {
     _bidikPmId = id;
+    _bidikTipe = tipe || 'penduduk';
     document.getElementById('map').classList.add('map-crosshair');
     document.getElementById('add-mode-toast-icon').innerHTML = '&#127919;';
-    document.getElementById('add-mode-toast-text').textContent = `Bidik lokasi rumah: ${nama}`;
+    document.getElementById('add-mode-toast-text').textContent = `Bidik lokasi: ${nama}`;
     document.getElementById('add-mode-toast').classList.remove('hidden');
     // Pastikan tab wilayah terbuka supaya user bisa lihat antrian
     if (activeTab !== 'wilayah') switchTab('wilayah');
@@ -1962,6 +1965,7 @@ window.openBidikMode = (id, nama) => {
 
 window.cancelBidikMode = () => {
     _bidikPmId = null;
+    _bidikTipe = 'penduduk';
     document.getElementById('map').classList.remove('map-crosshair');
     document.getElementById('add-mode-toast').classList.add('hidden');
 };
@@ -1971,9 +1975,10 @@ map.on('click', function(e) {
     if (!_bidikPmId) return;
     const {lat, lng} = e.latlng;
     const id = _bidikPmId;
+    const tipe = _bidikTipe;
     cancelBidikMode();
     const fd = new FormData();
-    fd.append('id', id); fd.append('lat', lat); fd.append('lng', lng);
+    fd.append('id', id); fd.append('lat', lat); fd.append('lng', lng); fd.append('tipe', tipe);
     fetch('api.php?action=update_lokasi', {method:'POST', body:fd})
         .then(r => r.json())
         .then(() => { loadData(); loadGecodingQueue(); });

poverty-map/koneksi.php

@@ -10,14 +10,17 @@ if ($conn->connect_error) {
     die("Koneksi MySQL gagal: " . $conn->connect_error);
 }
 
-// 2. Cek apakah database sudah ada
+// 2. Cek apakah database sudah ada (tanpa exception jika belum ada)
-$db_selected = $conn->select_db($db);
+$dbCheck = $conn->query("SHOW DATABASES LIKE '$db'");
+$db_selected = ($dbCheck && $dbCheck->num_rows > 0);
 
-if (!$db_selected) {
+if ($db_selected) {
+    $conn->select_db($db);
+} else {
     // 3. Buat database baru jika belum ada
     if ($conn->query("CREATE DATABASE `$db` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci")) {
         $conn->select_db($db);
-        
+
         // 4. Baca dan eksekusi setup.sql
         $sqlPath = __DIR__ . '/setup.sql';
         if (file_exists($sqlPath)) {
@@ -37,5 +40,4 @@ if (!$db_selected) {
 }
 
 // 5. Konfigurasi encoding UTF-8
-$conn->set_charset("utf8mb4");
+$conn->set_charset("utf8mb4");
-?>