TiaraChontesa/Tugas_SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "/"

Browse Source
This commit is contained in:
TiaraChontesa
2026-06-10 10:06:38 +00:00
parent 5587f9cdb4
commit 54f97123d5
5 changed files with 391 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+11
View File
@@ -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
README_DEPLOY_COOLIFY.md
+44
View File
@@ -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.
index.html
+223 -316
View File
@@ -1,316 +1,223 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="id"> <html lang="id">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portal WebGIS & Poverty Mapping — Tiara Chontesa</title> <title>Landing Page Tugas SIG - Tiara Chontesa</title>
<style> <style>
:root { :root {
--primary-color: #2b5c8f; --bg: #f5f7fb;
--primary-dark: #1e3f63; --card: #ffffff;
--secondary-color: #4a90e2; --text: #172033;
--accent-color: #e28743; --muted: #64748b;
--text-main: #2c3e50; --primary: #2563eb;
--text-muted: #7f8c8d; --primary-dark: #1d4ed8;
--bg-light: #f4f7f6; --accent: #f97316;
--bg-card: #ffffff; --border: #e5e7eb;
--border-color: #e2e8f0; }
}
* { box-sizing: border-box; }
* { body {
box-sizing: border-box; margin: 0;
margin: 0; font-family: Arial, Helvetica, sans-serif;
padding: 0; background: var(--bg);
} color: var(--text);
line-height: 1.6;
body { }
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-light); header {
color: var(--text-main); background: linear-gradient(135deg, #0f172a, #1d4ed8);
line-height: 1.6; color: white;
} padding: 56px 20px;
text-align: center;
header { }
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
color: #ffffff; header h1 {
padding: 60px 20px; margin: 0 0 10px;
text-align: center; font-size: clamp(28px, 4vw, 44px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
}
header p {
.header-container { margin: 0 auto;
max-width: 1000px; max-width: 760px;
margin: 0 auto; color: #dbeafe;
} }
header h1 { .identity {
font-size: 2.5rem; display: inline-flex;
margin-bottom: 10px; gap: 14px;
font-weight: 700; flex-wrap: wrap;
letter-spacing: -0.5px; justify-content: center;
} margin-top: 22px;
font-size: 14px;
header p { }
font-size: 1.1rem;
opacity: 0.9; .identity span {
margin-bottom: 25px; background: rgba(255,255,255,.12);
} border: 1px solid rgba(255,255,255,.18);
padding: 8px 12px;
.meta-info { border-radius: 999px;
display: inline-flex; }
gap: 20px;
background: rgba(255, 255, 255, 0.1); main {
padding: 10px 25px; max-width: 1120px;
border-radius: 30px; margin: 0 auto;
font-size: 0.95rem; padding: 34px 20px 56px;
border: 1px solid rgba(255, 255, 255, 0.2); }
}
.note {
.meta-info span strong { background: #fff;
color: #ffeb3b; border: 1px solid var(--border);
} border-left: 5px solid var(--primary);
border-radius: 14px;
main { padding: 20px;
max-width: 1200px; margin-bottom: 24px;
margin: 40px auto; box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
padding: 0 20px; }
}
.grid {
.overview-section { display: grid;
background: var(--bg-card); grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
border-radius: 12px; gap: 18px;
padding: 30px; }
margin-bottom: 40px;
box-shadow: 0 4px 6px rgba(0,0,0,0.02); .card {
border-left: 5px solid var(--secondary-color); background: var(--card);
} border: 1px solid var(--border);
border-radius: 16px;
.overview-section h2 { padding: 22px;
margin-bottom: 15px; min-height: 260px;
color: var(--primary-color); display: flex;
} flex-direction: column;
box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
.grid-container { }
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); .badge {
gap: 25px; display: inline-block;
margin-bottom: 40px; width: fit-content;
} background: #dbeafe;
color: #1d4ed8;
.card { font-weight: 700;
background: var(--bg-card); font-size: 12px;
border-radius: 12px; padding: 5px 10px;
border: 1px solid var(--border-color); border-radius: 999px;
overflow: hidden; margin-bottom: 14px;
box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex; .card h2 {
flex-direction: column; margin: 0 0 10px;
} font-size: 20px;
}
.card:hover {
transform: translateY(-5px); .card p {
box-shadow: 0 10px 20px rgba(0,0,0,0.08); margin: 0 0 16px;
} color: var(--muted);
font-size: 14px;
.card-header { }
background: #f8fafc;
padding: 20px; .card ul {
border-bottom: 1px solid var(--border-color); margin: 0 0 20px;
position: relative; padding-left: 18px;
} color: var(--muted);
font-size: 13px;
.task-badge { }
position: absolute;
top: 20px; .btn {
right: 20px; display: block;
background: var(--primary-color); margin-top: auto;
color: white; padding: 11px 14px;
padding: 4px 12px; text-align: center;
border-radius: 20px; border-radius: 10px;
font-size: 0.75rem; text-decoration: none;
font-weight: 600; background: var(--primary);
text-transform: uppercase; color: white;
} font-weight: 700;
}
.card-header h3 {
font-size: 1.25rem; .btn:hover { background: var(--primary-dark); }
color: var(--primary-dark); .btn.accent { background: var(--accent); }
margin-top: 10px; .btn.accent:hover { background: #ea580c; }
}
footer {
.card-body { text-align: center;
padding: 20px; color: var(--muted);
flex-grow: 1; padding: 24px 20px;
} border-top: 1px solid var(--border);
background: #fff;
.card-body p { font-size: 13px;
font-size: 0.95rem; }
color: var(--text-main); </style>
margin-bottom: 15px; </head>
} <body>
<header>
.table-list { <h1>Landing Page Tugas SIG</h1>
list-style: none; <p>Kumpulan tugas WebGIS dalam satu halaman utama agar mudah diakses melalui deployment Coolify.</p>
margin-top: 10px; <div class="identity">
padding-left: 15px; <span>Nama: <strong>Tiara Chontesa</strong></span>
} <span>NIM: <strong>D1041231070</strong></span>
<span>Database: <strong>db_poverty_mapping</strong></span>
.table-list li { </div>
font-size: 0.85rem; </header>
color: var(--text-muted);
padding: 4px 0; <main>
position: relative; <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>
.card-footer { </section>
padding: 20px;
background: #f8fafc; <section class="grid">
border-top: 1px solid var(--border-color); <article class="card">
} <span class="badge">Tugas 1</span>
<h2>WebGIS Data Jalan</h2>
.btn { <p>Modul pemetaan dan pengelolaan geometri polyline untuk jaringan jalan.</p>
display: block; <ul>
text-align: center; <li>Polyline / LineString</li>
background: var(--primary-color); <li>Data jalan</li>
color: #ffffff; <li>Visualisasi Leaflet</li>
padding: 10px 20px; </ul>
border-radius: 6px; <a class="btn" href="Tugas1/">Buka Tugas 1</a>
text-decoration: none; </article>
font-weight: 600;
font-size: 0.95rem; <article class="card">
transition: background 0.2s ease; <span class="badge">Tugas 2</span>
} <h2>WebGIS Polygon & GeoJSON</h2>
<p>Modul pemetaan wilayah, kecamatan, batas administrasi, dan data spasial berbasis GeoJSON.</p>
.btn:hover { <ul>
background: var(--primary-dark); <li>Polygon wilayah</li>
} <li>Layer GeoJSON</li>
<li>Data kecamatan</li>
.btn-accent { </ul>
background: var(--accent-color); <a class="btn" href="Tugas2/">Buka Tugas 2</a>
} </article>
.btn-accent:hover { <article class="card">
background: #d07431; <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>
footer { <ul>
text-align: center; <li>Marker / Point</li>
padding: 30px 20px; <li>Layer control</li>
color: var(--text-muted); <li>Populasi kecamatan</li>
font-size: 0.9rem; </ul>
border-top: 1px solid var(--border-color); <a class="btn" href="Tugas3/">Buka Tugas 3</a>
margin-top: 60px; </article>
background-color: #ffffff;
} <article class="card">
<span class="badge">Tugas 4</span>
@media (max-width: 768px) { <h2>Poverty Mapping</h2>
header h1 { font-size: 2rem; } <p>Modul pemetaan kemiskinan dan bantuan sosial dengan data rumah miskin, rumah ibadah, dan bantuan tersalur.</p>
.meta-info { flex-direction: column; gap: 5px; border-radius: 15px; } <ul>
.grid-container { grid-template-columns: 1fr; } <li>Rumah miskin</li>
} <li>Rumah ibadah</li>
</style> <li>Bantuan tersalur</li>
</head> </ul>
<body> <a class="btn accent" href="Tugas4/">Buka Tugas 4</a>
</article>
<header> </section>
<div class="header-container"> </main>
<h1>Sistem Pemetaan Spasial Terpadu</h1>
<p>Integrasi WebGIS Geometri Sigma & Analisis Titik Kerawanan Kemiskinan (Poverty Mapping)</p> <footer>
<div class="meta-info"> &copy; 2026 Tiara Chontesa - Tugas SIG WebGIS
<span>Nama: <strong>Tiara Chontesa</strong></span> </footer>
<span>NIM: <strong>D1041231070</strong></span> </body>
<span>Database induk: <strong>db_poverty_mapping</strong></span> </html>
</div>
</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>
<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>
</ul>
</div>
<div class="card-footer">
<a href="Tugas1/" class="btn">Buka Modul Tugas 1</a>
</div>
</div>
<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>
</ul>
</div>
<div class="card-footer">
<a href="Tugas2/" class="btn">Buka Modul Tugas 2</a>
</div>
</div>
<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>
</ul>
</div>
<div class="card-footer">
<a href="Tugas3/" class="btn">Buka Modul Tugas 3</a>
</div>
</div>
<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>
</ul>
</div>
<div class="card-footer" style="background-color: #fffaf5;">
<a href="Tugas4/" class="btn btn-accent">Buka Aplikasi Utama</a>
</div>
</div>
</div>
</main>
<footer>
<p>&copy; 2026 Proyek Terintegrasi WebGIS Spasial. Dirancang oleh Tiara Chontesa (D1041231070).</p>
</footer>
</body>
</html>
install_database.php
+57
View File
@@ -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();
?>
koneksi.php
+56 -73
View File
@@ -1,73 +1,56 @@
<?php <?php
// ============================================================================ // koneksi.php - versi deploy Coolify untuk Tugas_SIG Tiara
// koneksi.php - KONEKSI UTAMA INTEGRATED (ANTI-ERROR FOLDER PATH) if (session_status() === PHP_SESSION_NONE) {
// Sistem WebGIS Poverty Mapping & Geometri Sigma session_start();
// Penyusun: Tiara Chontesa (D1041231070) }
// ============================================================================
$host = getenv('DB_HOST') ?: 'localhost';
// 1. KREDENSIAL DATABASE LOCALHOST (XAMPP) $user = getenv('DB_USER') ?: 'root';
define('DB_HOST', 'localhost'); $pass = getenv('DB_PASS') ?: (getenv('DB_PASSWORD') ?: '');
define('DB_USER', 'root'); $db = getenv('DB_NAME') ?: 'db_poverty_mapping';
define('DB_PASS', ''); // Kosongkan jika menggunakan XAMPP standar lokal $port = (int)(getenv('DB_PORT') ?: 3306);
define('DB_NAME', 'db_poverty_mapping'); // Mengarah ke nama database gabungan baru
$conn = new mysqli($host, $user, $pass, $db, $port);
// Eksekusi Koneksi MySQLi
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); if ($conn->connect_error) {
http_response_code(500);
// Validasi Kegagalan Koneksi die(json_encode([
if ($conn->connect_error) { 'status' => 'error',
http_response_code(500); 'message' => 'Koneksi database gagal: ' . $conn->connect_error
die(json_encode([ ]));
'status' => 'error', }
'message' => 'Koneksi database gagal: ' . $conn->connect_error
])); $conn->set_charset('utf8mb4');
}
function getRedirectPath($targetFile) {
// Set Charset ke UTF-8 agar aman membaca data koordinat spasial/GeoJSON $currentDir = basename(dirname($_SERVER['SCRIPT_FILENAME']));
$conn->set_charset('utf8mb4'); if (stripos($currentDir, 'Tugas') !== false || stripos($currentDir, 'tugas') !== false || $currentDir === 'includes') {
return '../' . $targetFile;
}
// 2. DETEKSI LOKASI PATH RELATIF (Cerdas mencegah error No Such File / Wrong Redirect) return $targetFile;
if (!function_exists('getRedirectPath')) { }
function getRedirectPath($targetFile) {
// Ambil nama folder tempat file PHP yang sedang berjalan berada function cekLogin() {
$currentDir = basename(dirname($_SERVER['SCRIPT_FILENAME'])); if (session_status() === PHP_SESSION_NONE) {
session_start();
// 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 (!isset($_SESSION['user_id'])) {
if (strpos($currentDir, 'tugas') !== false || $currentDir === 'includes') { header('Location: ' . getRedirectPath('login.php'));
return '../' . $targetFile; exit;
} }
return $targetFile; }
}
} function cekRole($role_wajib) {
if (session_status() === PHP_SESSION_NONE) {
session_start();
// 3. FUNGSI OTENTIKASI GLOBAL (Bisa langsung dipanggil di semua folder tugas Anda) }
if (!function_exists('cekLogin')) { if (!isset($_SESSION['role']) || $_SESSION['role'] !== $role_wajib) {
function cekLogin() { header('Location: ' . getRedirectPath('dashboard.php?error=unauthorized'));
if (session_status() === PHP_SESSION_NONE) { exit;
session_start(); }
} }
// Jika belum ada session user_id, tendang paksa ke halaman login.php dengan path yang benar
if (!isset($_SESSION['user_id'])) { function bersih($str, $conn) {
$loginPath = getRedirectPath('login.php'); return $conn->real_escape_string(htmlspecialchars(strip_tags(trim($str))));
header("Location: " . $loginPath); }
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);
exit;
}
}
}