fix: add choropleth link to landing page

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/koneksi.php

@@ -10,10 +10,13 @@ if ($conn->connect_error) {
     die("Koneksi MySQL gagal: " . $conn->connect_error);
 }
 
-// 2. Cek apakah database sudah ada
-$db_selected = $conn->select_db($db);
+// 2. Cek apakah database sudah ada (tanpa exception jika belum ada)
+$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);
@@ -38,4 +41,3 @@ if (!$db_selected) {
 
 // 5. Konfigurasi encoding UTF-8
 $conn->set_charset("utf8mb4");
-?>