Upload files to "/"

2026-06-10 10:06:38 +00:00
parent 5587f9cdb4
commit 54f97123d5
5 changed files with 391 additions and 389 deletions
@@ -0,0 +1,11 @@
+FROM php:8.2-apache
+
+RUN docker-php-ext-install mysqli pdo pdo_mysql
+
+RUN a2enmod rewrite
+
+COPY . /var/www/html/
+
+RUN chown -R www-data:www-data /var/www/html
+
+EXPOSE 80
@@ -0,0 +1,44 @@
+# Deploy Coolify - Tugas_SIG Tiara
+
+Repo ini dijadikan satu landing page untuk Tugas 1 sampai Tugas 4.
+
+## Struktur utama
+
+- `/` -> Landing page tugas
+- `/Tugas1/` -> Tugas 1
+- `/Tugas2/` -> Tugas 2
+- `/Tugas3/` -> Tugas 3
+- `/Tugas4/` -> Tugas 4
+
+## Coolify
+
+Buat 1 database MySQL/MariaDB dengan Initial Database:
+
+```text
+db_poverty_mapping
+```
+
+Buat 1 aplikasi dari repo ini:
+
+```text
+Build Pack: Dockerfile
+Ports Exposes: 80
+```
+
+Production Environment Variables:
+
+```env
+DB_HOST=host_database_internal
+DB_PORT=3306
+DB_NAME=db_poverty_mapping
+DB_USER=mysql
+DB_PASS=password_normal_user_database
+```
+
+Setelah deploy, buka:
+
+```text
+https://URL-TUGAS/install_database.php
+```
+
+Jika database berhasil diimport, hapus `install_database.php` lalu redeploy.
@@ -1,316 +1,223 @@
 <!DOCTYPE html>
 <html lang="id">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Portal WebGIS & Poverty Mapping — Tiara Chontesa</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Landing Page Tugas SIG - Tiara Chontesa</title>
  <style>
    :root {
-            --primary-color: #2b5c8f;
-            --primary-dark: #1e3f63;
-            --secondary-color: #4a90e2;
-            --accent-color: #e28743;
-            --text-main: #2c3e50;
-            --text-muted: #7f8c8d;
-            --bg-light: #f4f7f6;
-            --bg-card: #ffffff;
-            --border-color: #e2e8f0;
-        }
-
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
+      --bg: #f5f7fb;
+      --card: #ffffff;
+      --text: #172033;
+      --muted: #64748b;
+      --primary: #2563eb;
+      --primary-dark: #1d4ed8;
+      --accent: #f97316;
+      --border: #e5e7eb;
    }

+    * { box-sizing: border-box; }
    body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: var(--bg-light);
-            color: var(--text-main);
+      margin: 0;
+      font-family: Arial, Helvetica, sans-serif;
+      background: var(--bg);
+      color: var(--text);
      line-height: 1.6;
    }

    header {
-            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
-            color: #ffffff;
-            padding: 60px 20px;
+      background: linear-gradient(135deg, #0f172a, #1d4ed8);
+      color: white;
+      padding: 56px 20px;
      text-align: center;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-        }
-
-        .header-container {
-            max-width: 1000px;
-            margin: 0 auto;
    }

    header h1 {
-            font-size: 2.5rem;
-            margin-bottom: 10px;
-            font-weight: 700;
-            letter-spacing: -0.5px;
+      margin: 0 0 10px;
+      font-size: clamp(28px, 4vw, 44px);
    }

    header p {
-            font-size: 1.1rem;
-            opacity: 0.9;
-            margin-bottom: 25px;
+      margin: 0 auto;
+      max-width: 760px;
+      color: #dbeafe;
    }

-        .meta-info {
+    .identity {
      display: inline-flex;
-            gap: 20px;
-            background: rgba(255, 255, 255, 0.1);
-            padding: 10px 25px;
-            border-radius: 30px;
-            font-size: 0.95rem;
-            border: 1px solid rgba(255, 255, 255, 0.2);
+      gap: 14px;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-top: 22px;
+      font-size: 14px;
    }

-        .meta-info span strong {
-            color: #ffeb3b;
+    .identity span {
+      background: rgba(255,255,255,.12);
+      border: 1px solid rgba(255,255,255,.18);
+      padding: 8px 12px;
+      border-radius: 999px;
    }

    main {
-            max-width: 1200px;
-            margin: 40px auto;
-            padding: 0 20px;
+      max-width: 1120px;
+      margin: 0 auto;
+      padding: 34px 20px 56px;
    }

-        .overview-section {
-            background: var(--bg-card);
-            border-radius: 12px;
-            padding: 30px;
-            margin-bottom: 40px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.02);
-            border-left: 5px solid var(--secondary-color);
+    .note {
+      background: #fff;
+      border: 1px solid var(--border);
+      border-left: 5px solid var(--primary);
+      border-radius: 14px;
+      padding: 20px;
+      margin-bottom: 24px;
+      box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    }

-        .overview-section h2 {
-            margin-bottom: 15px;
-            color: var(--primary-color);
-        }
-
-        .grid-container {
+    .grid {
      display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 25px;
-            margin-bottom: 40px;
+      grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
+      gap: 18px;
    }

    .card {
-            background: var(--bg-card);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            overflow: hidden;
-            box-shadow: 0 4px 10px rgba(0,0,0,0.03);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 22px;
+      min-height: 260px;
      display: flex;
      flex-direction: column;
+      box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    }

-        .card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
+    .badge {
+      display: inline-block;
+      width: fit-content;
+      background: #dbeafe;
+      color: #1d4ed8;
+      font-weight: 700;
+      font-size: 12px;
+      padding: 5px 10px;
+      border-radius: 999px;
+      margin-bottom: 14px;
    }

-        .card-header {
-            background: #f8fafc;
-            padding: 20px;
-            border-bottom: 1px solid var(--border-color);
-            position: relative;
+    .card h2 {
+      margin: 0 0 10px;
+      font-size: 20px;
    }

-        .task-badge {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            background: var(--primary-color);
-            color: white;
-            padding: 4px 12px;
-            border-radius: 20px;
-            font-size: 0.75rem;
-            font-weight: 600;
-            text-transform: uppercase;
+    .card p {
+      margin: 0 0 16px;
+      color: var(--muted);
+      font-size: 14px;
    }

-        .card-header h3 {
-            font-size: 1.25rem;
-            color: var(--primary-dark);
-            margin-top: 10px;
-        }
-
-        .card-body {
-            padding: 20px;
-            flex-grow: 1;
-        }
-
-        .card-body p {
-            font-size: 0.95rem;
-            color: var(--text-main);
-            margin-bottom: 15px;
-        }
-
-        .table-list {
-            list-style: none;
-            margin-top: 10px;
-            padding-left: 15px;
-        }
-
-        .table-list li {
-            font-size: 0.85rem;
-            color: var(--text-muted);
-            padding: 4px 0;
-            position: relative;
-        }
-
-        .card-footer {
-            padding: 20px;
-            background: #f8fafc;
-            border-top: 1px solid var(--border-color);
+    .card ul {
+      margin: 0 0 20px;
+      padding-left: 18px;
+      color: var(--muted);
+      font-size: 13px;
    }

    .btn {
      display: block;
+      margin-top: auto;
+      padding: 11px 14px;
      text-align: center;
-            background: var(--primary-color);
-            color: #ffffff;
-            padding: 10px 20px;
-            border-radius: 6px;
+      border-radius: 10px;
      text-decoration: none;
-            font-weight: 600;
-            font-size: 0.95rem;
-            transition: background 0.2s ease;
+      background: var(--primary);
+      color: white;
+      font-weight: 700;
    }

-        .btn:hover {
-            background: var(--primary-dark);
-        }
-
-        .btn-accent {
-            background: var(--accent-color);
-        }
-
-        .btn-accent:hover {
-            background: #d07431;
-        }
+    .btn:hover { background: var(--primary-dark); }
+    .btn.accent { background: var(--accent); }
+    .btn.accent:hover { background: #ea580c; }

    footer {
      text-align: center;
-            padding: 30px 20px;
-            color: var(--text-muted);
-            font-size: 0.9rem;
-            border-top: 1px solid var(--border-color);
-            margin-top: 60px;
-            background-color: #ffffff;
-        }
-
-        @media (max-width: 768px) {
-            header h1 { font-size: 2rem; }
-            .meta-info { flex-direction: column; gap: 5px; border-radius: 15px; }
-            .grid-container { grid-template-columns: 1fr; }
+      color: var(--muted);
+      padding: 24px 20px;
+      border-top: 1px solid var(--border);
+      background: #fff;
+      font-size: 13px;
    }
  </style>
 </head>
 <body>
-
  <header>
-        <div class="header-container">
-            <h1>Sistem Pemetaan Spasial Terpadu</h1>
-            <p>Integrasi WebGIS Geometri Sigma & Analisis Titik Kerawanan Kemiskinan (Poverty Mapping)</p>
-            <div class="meta-info">
+    <h1>Landing Page Tugas SIG</h1>
+    <p>Kumpulan tugas WebGIS dalam satu halaman utama agar mudah diakses melalui deployment Coolify.</p>
+    <div class="identity">
      <span>Nama: <strong>Tiara Chontesa</strong></span>
      <span>NIM: <strong>D1041231070</strong></span>
-                <span>Database induk: <strong>db_poverty_mapping</strong></span>
-            </div>
+      <span>Database: <strong>db_poverty_mapping</strong></span>
    </div>
  </header>

  <main>
-        <section class="overview-section">
-            <h2>Tentang Proyek Integrasi</h2>
-            <p>Repositori ini dirancang khusus untuk mengonsolidasikan 4 tugas WebGIS ke dalam satu arsitektur terintegrasi. Dengan memanfaatkan satu database utama, seluruh modul kerja spasial mulai dari pengelolaan jaringan infrastruktur (jalan, persil, titik fasilitas umum) hingga penentuan zonasi Keluarga Penerima Manfaat (KPM) bantuan sosial dapat diakses secara langsung dan dinamis.</p>
+    <section class="note">
+      <strong>Daftar Project Tugas</strong>
+      <p style="margin: 8px 0 0; color: var(--muted);">Halaman ini hanya untuk tugas kelas. Project UAS tetap dideploy terpisah.</p>
    </section>

-        <div class="grid-container">
-            
-            <div class="card">
-                <div class="card-header">
-                    <span class="task-badge">Tugas 1</span>
-                    <h3>Manajemen Geometri Polyline (Jaringan Jalan)</h3>
-                </div>
-                <div class="card-body">
-                    <p>Modul pemetaan spasial linear yang berfungsi untuk merekam, menghitung panjang secara otomatis menggunakan sistem koordinat Leaflet, serta memetakan data jaringan jalan berdasarkan klasifikasinya.</p>
-                    <ul class="table-list">
-                        <li>• Tabel Database: <code>data_jalan</code></li>
-                        <li>• Format Spasial: GeoJSON LineString</li>
-                        <li>• Klasifikasi: Nasional, Provinsi, Kabupaten</li>
+    <section class="grid">
+      <article class="card">
+        <span class="badge">Tugas 1</span>
+        <h2>WebGIS Data Jalan</h2>
+        <p>Modul pemetaan dan pengelolaan geometri polyline untuk jaringan jalan.</p>
+        <ul>
+          <li>Polyline / LineString</li>
+          <li>Data jalan</li>
+          <li>Visualisasi Leaflet</li>
        </ul>
-                </div>
-                <div class="card-footer">
-                    <a href="Tugas1/" class="btn">Buka Modul Tugas 1</a>
-                </div>
-            </div>
+        <a class="btn" href="Tugas1/">Buka Tugas 1</a>
+      </article>

-            <div class="card">
-                <div class="card-header">
-                    <span class="task-badge">Tugas 2</span>
-                    <h3>Zonasi Wilayah Polygon (Data Parsil Lahan)</h3>
-                </div>
-                <div class="card-body">
-                    <p>Modul analisis area yang memetakan batas-batas persil wilayah lahan atau pemukiman warga, lengkap dengan kalkulasi luas otomatis dalam satuan meter persegi (m²).</p>
-                    <ul class="table-list">
-                        <li>• Tabel Database: <code>data_parsil</code></li>
-                        <li>• Format Spasial: GeoJSON Polygon</li>
-                        <li>• Fungsi Utama: Batas administratif & tata guna lahan</li>
+      <article class="card">
+        <span class="badge">Tugas 2</span>
+        <h2>WebGIS Polygon & GeoJSON</h2>
+        <p>Modul pemetaan wilayah, kecamatan, batas administrasi, dan data spasial berbasis GeoJSON.</p>
+        <ul>
+          <li>Polygon wilayah</li>
+          <li>Layer GeoJSON</li>
+          <li>Data kecamatan</li>
        </ul>
-                </div>
-                <div class="card-footer">
-                    <a href="Tugas2/" class="btn">Buka Modul Tugas 2</a>
-                </div>
-            </div>
+        <a class="btn" href="Tugas2/">Buka Tugas 2</a>
+      </article>

-            <div class="card">
-                <div class="card-header">
-                    <span class="task-badge">Tugas 3</span>
-                    <h3>Peta Sebaran Titik (Marker Fasilitas Umum)</h3>
-                </div>
-                <div class="card-body">
-                    <p>Modul penanda objek vital yang mengelola persebaran koordinat fasilitas umum, infrastruktur kota, serta objek-objek spasial berformat point lainnya di dalam peta interaktif.</p>
-                    <ul class="table-list">
-                        <li>• Tabel Database: <code>data_point</code>, <code>geometri_sigma</code></li>
-                        <li>• Format Spasial: GeoJSON Point / Marker</li>
-                        <li>• Fungsi Utama: Manajemen marker & kustomisasi icon</li>
+      <article class="card">
+        <span class="badge">Tugas 3</span>
+        <h2>Layer Control & Data Point</h2>
+        <p>Modul layer control untuk menampilkan data point dan layer tematik pada peta.</p>
+        <ul>
+          <li>Marker / Point</li>
+          <li>Layer control</li>
+          <li>Populasi kecamatan</li>
        </ul>
-                </div>
-                <div class="card-footer">
-                    <a href="Tugas3/" class="btn">Buka Modul Tugas 3</a>
-                </div>
-            </div>
+        <a class="btn" href="Tugas3/">Buka Tugas 3</a>
+      </article>

-            <div class="card" style="border: 1px solid var(--accent-color);">
-                <div class="card-header" style="background-color: #fffaf5;">
-                    <span class="task-badge" style="background-color: var(--accent-color);">Tugas 4</span>
-                    <h3>WebGIS Poverty Mapping (Bantuan Sosial)</h3>
-                </div>
-                <div class="card-body">
-                    <p>Sistem informasi geografis tingkat lanjut untuk penanggulangan kemiskinan. Menampilkan radius bantuan rumah ibadah (buffer), status sebaran KPM, manajemen logistik bencana, serta kontrol akses 4 role pengguna.</p>
-                    <ul class="table-list">
-                        <li>• Tabel Database: <code>users</code>, <code>rumah_miskin</code>, <code>rumah_ibadah</code>, <code>bantuan_tersalur</code></li>
-                        <li>• Fitur Kunci: Buffer spasial, Manajemen 4 Role User</li>
-                        <li>• Status Bantuan: Deteksi Blank Spot area otomatis</li>
+      <article class="card">
+        <span class="badge">Tugas 4</span>
+        <h2>Poverty Mapping</h2>
+        <p>Modul pemetaan kemiskinan dan bantuan sosial dengan data rumah miskin, rumah ibadah, dan bantuan tersalur.</p>
+        <ul>
+          <li>Rumah miskin</li>
+          <li>Rumah ibadah</li>
+          <li>Bantuan tersalur</li>
        </ul>
-                </div>
-                <div class="card-footer" style="background-color: #fffaf5;">
-                    <a href="Tugas4/" class="btn btn-accent">Buka Aplikasi Utama</a>
-                </div>
-            </div>
-
-        </div>
+        <a class="btn accent" href="Tugas4/">Buka Tugas 4</a>
+      </article>
+    </section>
  </main>

  <footer>
-        <p>&copy; 2026 Proyek Terintegrasi WebGIS Spasial. Dirancang oleh Tiara Chontesa (D1041231070).</p>
+    &copy; 2026 Tiara Chontesa - Tugas SIG WebGIS
  </footer>
-
 </body>
 </html>
@@ -0,0 +1,57 @@
+<?php
+// install_database.php - installer sementara database Tugas_SIG Tiara
+// HAPUS file ini setelah database berhasil diimport.
+
+set_time_limit(300);
+
+$host = getenv('DB_HOST') ?: 'localhost';
+$user = getenv('DB_USER') ?: 'root';
+$pass = getenv('DB_PASS') ?: (getenv('DB_PASSWORD') ?: '');
+$db   = getenv('DB_NAME') ?: 'db_poverty_mapping';
+$port = (int)(getenv('DB_PORT') ?: 3306);
+
+echo "<h2>Install Database Tugas SIG Tiara</h2>";
+echo "<p>Target koneksi: <b>" . htmlspecialchars($host) . ":" . htmlspecialchars((string)$port) . "</b>, database: <b>" . htmlspecialchars($db) . "</b>, user: <b>" . htmlspecialchars($user) . "</b></p>";
+
+$conn = new mysqli($host, $user, $pass, $db, $port);
+
+if ($conn->connect_error) {
+    die("<p style='color:red'>Koneksi gagal: " . htmlspecialchars($conn->connect_error) . "</p>");
+}
+
+$sqlFile = __DIR__ . "/database.sql";
+if (!file_exists($sqlFile)) {
+    die("<p style='color:red'>File SQL tidak ditemukan: " . htmlspecialchars($sqlFile) . "</p>");
+}
+
+$sql = file_get_contents($sqlFile);
+
+// Coolify normal user biasanya tidak butuh/ tidak punya izin CREATE DATABASE.
+// Database sudah dibuat dari field Initial Database, jadi baris CREATE DATABASE dan USE diabaikan.
+$sql = preg_replace('/CREATE\\s+DATABASE\\s+IF\\s+NOT\\s+EXISTS\\s+`?[^`\\s;]+`?.*?;/is', '', $sql);
+$sql = preg_replace('/USE\\s+`?[^`\\s;]+`?\\s*;/is', '', $sql);
+
+// Jika dump hasil copy menjadi komentar seperti "-- 1.\nTABEL ... CREATE TABLE",
+// buang label teks agar SQL tidak error.
+$sql = preg_replace('/--\\s*\\d+\\.\\s*TABEL[^\\n]*\\n/is', '', $sql);
+$sql = preg_replace('/\\bTABEL\\s+(PENGGUNA|RUMAH|BENCANA|DATA)[^;]*?(CREATE\\s+TABLE)/is', '$2', $sql);
+
+if ($conn->multi_query($sql)) {
+    do {
+        if ($result = $conn->store_result()) {
+            $result->free();
+        }
+    } while ($conn->more_results() && $conn->next_result());
+
+    if ($conn->errno) {
+        echo "<p style='color:red'>Ada error saat import: " . htmlspecialchars($conn->error) . "</p>";
+    } else {
+        echo "<p style='color:green;font-weight:bold'>Database berhasil diimport.</p>";
+        echo "<p>Setelah ini, hapus file <code>install_database.php</code> dari repo lalu redeploy.</p>";
+    }
+} else {
+    echo "<p style='color:red'>Import gagal: " . htmlspecialchars($conn->error) . "</p>";
+}
+
+$conn->close();
+?>
@@ -1,20 +1,17 @@
 <?php
-// ============================================================================
-//  koneksi.php - KONEKSI UTAMA INTEGRATED (ANTI-ERROR FOLDER PATH)
-//  Sistem WebGIS Poverty Mapping & Geometri Sigma
-//  Penyusun: Tiara Chontesa (D1041231070)
-// ============================================================================
+// koneksi.php - versi deploy Coolify untuk Tugas_SIG Tiara
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}

-// 1. KREDENSIAL DATABASE LOCALHOST (XAMPP)
-define('DB_HOST', 'localhost');
-define('DB_USER', 'root');
-define('DB_PASS', '');          // Kosongkan jika menggunakan XAMPP standar lokal
-define('DB_NAME', 'db_poverty_mapping'); // Mengarah ke nama database gabungan baru
+$host = getenv('DB_HOST') ?: 'localhost';
+$user = getenv('DB_USER') ?: 'root';
+$pass = getenv('DB_PASS') ?: (getenv('DB_PASSWORD') ?: '');
+$db   = getenv('DB_NAME') ?: 'db_poverty_mapping';
+$port = (int)(getenv('DB_PORT') ?: 3306);

-// Eksekusi Koneksi MySQLi
-$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
+$conn = new mysqli($host, $user, $pass, $db, $port);

-// Validasi Kegagalan Koneksi
 if ($conn->connect_error) {
    http_response_code(500);
    die(json_encode([
@@ -23,51 +20,37 @@ if ($conn->connect_error) {
    ]));
 }

-// Set Charset ke UTF-8 agar aman membaca data koordinat spasial/GeoJSON
 $conn->set_charset('utf8mb4');

-
-// 2. DETEKSI LOKASI PATH RELATIF (Cerdas mencegah error No Such File / Wrong Redirect)
-if (!function_exists('getRedirectPath')) {
 function getRedirectPath($targetFile) {
-        // Ambil nama folder tempat file PHP yang sedang berjalan berada
    $currentDir = basename(dirname($_SERVER['SCRIPT_FILENAME']));
-        
-        // Jika file pengakses ada di dalam subfolder tugas (misal: tugas1_polyline, tugas2_polygon)
-        // atau berada di dalam folder 'includes', mundurkan path satu tingkat ke luar menggunakan '../'
-        if (strpos($currentDir, 'tugas') !== false || $currentDir === 'includes') {
+    if (stripos($currentDir, 'Tugas') !== false || stripos($currentDir, 'tugas') !== false || $currentDir === 'includes') {
        return '../' . $targetFile;
    }
    return $targetFile;
 }
-}

-
-// 3. FUNGSI OTENTIKASI GLOBAL (Bisa langsung dipanggil di semua folder tugas Anda)
-if (!function_exists('cekLogin')) {
 function cekLogin() {
    if (session_status() === PHP_SESSION_NONE) {
        session_start();
    }
-        // Jika belum ada session user_id, tendang paksa ke halaman login.php dengan path yang benar
    if (!isset($_SESSION['user_id'])) {
-            $loginPath = getRedirectPath('login.php');
-            header("Location: " . $loginPath);
+        header('Location: ' . getRedirectPath('login.php'));
        exit;
    }
 }
-}

-if (!function_exists('cekRole')) {
 function cekRole($role_wajib) {
    if (session_status() === PHP_SESSION_NONE) {
        session_start();
    }
-        // Jika role user tidak sesuai dengan kriteria halaman, tendang ke dashboard utama
    if (!isset($_SESSION['role']) || $_SESSION['role'] !== $role_wajib) {
-            $dashboardPath = getRedirectPath('dashboard.php?error=unauthorized');
-            header("Location: " . $dashboardPath);
+        header('Location: ' . getRedirectPath('dashboard.php?error=unauthorized'));
        exit;
    }
 }
+
+function bersih($str, $conn) {
+    return $conn->real_escape_string(htmlspecialchars(strip_tags(trim($str))));
 }
+?>