naufalzakyramadhan/D1041231071_UAS-Tugas_WebGISProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Initial commit - WebGIS Smart City Project by Naufal Zaky Ramadhan (D1041231071)

Browse Source
This commit is contained in:
naukyy
2026-06-13 00:00:33 +07:00
commit 2c123f5af2
163 changed files with 13007 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01/backend/api/jalan.php
+75
View File
@@ -0,0 +1,75 @@
<?php
/**
* jalan.php
* Tanggung Jawab: Menangani operasi CRUD untuk entitas Jalan (LineString).
*/
require_once '../core_config/database.php';
require_once '../utils/response_helper.php';
$pdo = Database::getConnection();
$method = $_SERVER['REQUEST_METHOD'];
switch ($method) {
case 'GET':
try {
$stmt = $pdo->query("SELECT id, nama, jenis_jalan, created_at, ST_AsGeoJSON(geom) as geojson FROM jalan");
$features = [];
while ($row = $stmt->fetch()) {
$features[] = [
'type' => 'Feature',
'geometry' => json_decode($row['geojson']),
'properties' => [
'id' => $row['id'],
'nama' => $row['nama'],
'jenis_jalan' => $row['jenis_jalan'],
'created_at' => $row['created_at']
]
];
}
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Jalan berhasil diambil');
} catch (PDOException $e) {
sendError('Gagal mengambil data Jalan: ' . $e->getMessage(), 500);
}
break;
case 'POST':
$input = json_decode(file_get_contents('php://input'), true);
if (!isset($input['nama']) || !isset($input['geometry'])) {
sendError('Nama dan geometri wajib diisi');
}
try {
$sql = "INSERT INTO jalan (nama, jenis_jalan, geom) VALUES (:nama, :jenis_jalan, ST_GeomFromGeoJSON(:geometry))";
$stmt = $pdo->prepare($sql);
$stmt->execute([
':nama' => $input['nama'],
':jenis_jalan' => $input['jenis_jalan'] ?? 'Lokal',
':geometry' => json_encode($input['geometry'])
]);
sendSuccess(['id' => $pdo->lastInsertId()], 'Data Jalan berhasil disimpan', 201);
} catch (PDOException $e) {
sendError('Gagal menyimpan Jalan: ' . $e->getMessage(), 500);
}
break;
case 'DELETE':
$id = $_GET['id'] ?? null;
if (!$id) {
sendError('ID Jalan wajib disertakan');
}
try {
$stmt = $pdo->prepare("DELETE FROM jalan WHERE id = :id");
$stmt->execute([':id' => $id]);
sendSuccess(null, 'Data Jalan berhasil dihapus');
} catch (PDOException $e) {
sendError('Gagal menghapus Jalan: ' . $e->getMessage(), 500);
}
break;
default:
sendError('Method not allowed', 405);
break;
}
?>
01/backend/api/kavling.php
+75
View File
@@ -0,0 +1,75 @@
<?php
/**
* kavling.php
* Tanggung Jawab: Menangani operasi CRUD untuk entitas Kavling (Polygon).
*/
require_once '../core_config/database.php';
require_once '../utils/response_helper.php';
$pdo = Database::getConnection();
$method = $_SERVER['REQUEST_METHOD'];
switch ($method) {
case 'GET':
try {
$stmt = $pdo->query("SELECT id, nama_pemilik, luas, created_at, ST_AsGeoJSON(geom) as geojson FROM kavling");
$features = [];
while ($row = $stmt->fetch()) {
$features[] = [
'type' => 'Feature',
'geometry' => json_decode($row['geojson']),
'properties' => [
'id' => $row['id'],
'nama_pemilik' => $row['nama_pemilik'],
'luas' => $row['luas'],
'created_at' => $row['created_at']
]
];
}
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Kavling berhasil diambil');
} catch (PDOException $e) {
sendError('Gagal mengambil data Kavling: ' . $e->getMessage(), 500);
}
break;
case 'POST':
$input = json_decode(file_get_contents('php://input'), true);
if (!isset($input['nama_pemilik']) || !isset($input['geometry'])) {
sendError('Nama pemilik dan geometri wajib diisi');
}
try {
$sql = "INSERT INTO kavling (nama_pemilik, luas, geom) VALUES (:nama_pemilik, :luas, ST_GeomFromGeoJSON(:geometry))";
$stmt = $pdo->prepare($sql);
$stmt->execute([
':nama_pemilik' => $input['nama_pemilik'],
':luas' => $input['luas'] ?? 0,
':geometry' => json_encode($input['geometry'])
]);
sendSuccess(['id' => $pdo->lastInsertId()], 'Data Kavling berhasil disimpan', 201);
} catch (PDOException $e) {
sendError('Gagal menyimpan Kavling: ' . $e->getMessage(), 500);
}
break;
case 'DELETE':
$id = $_GET['id'] ?? null;
if (!$id) {
sendError('ID Kavling wajib disertakan');
}
try {
$stmt = $pdo->prepare("DELETE FROM kavling WHERE id = :id");
$stmt->execute([':id' => $id]);
sendSuccess(null, 'Data Kavling berhasil dihapus');
} catch (PDOException $e) {
sendError('Gagal menghapus Kavling: ' . $e->getMessage(), 500);
}
break;
default:
sendError('Method not allowed', 405);
break;
}
?>
01/backend/api/spbu.php
+59
View File
@@ -0,0 +1,59 @@
<?php
require_once '../core_config/database.php';
require_once '../utils/response_helper.php';
$pdo = Database::getConnection();
$method = $_SERVER['REQUEST_METHOD'];
switch ($method) {
case 'GET':
try {
$stmt = $pdo->query("SELECT id, nama, deskripsi, buka_24_jam, created_at, ST_AsGeoJSON(geom) as geojson FROM spbu");
$features = [];
while ($row = $stmt->fetch()) {
$features[] = [
'type' => 'Feature',
'geometry' => json_decode($row['geojson']),
'properties' => [
'id' => $row['id'],
'nama' => $row['nama'],
'deskripsi' => $row['deskripsi'],
'buka_24_jam' => (bool)$row['buka_24_jam'],
'created_at' => $row['created_at']
]
];
}
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data SPBU berhasil diambil');
} catch (PDOException $e) { sendError('Gagal: ' . $e->getMessage(), 500); }
break;
case 'POST':
$input = json_decode(file_get_contents('php://input'), true);
if (!isset($input['nama']) || !isset($input['geometry'])) sendError('Validasi gagal');
try {
$sql = "INSERT INTO spbu (nama, deskripsi, buka_24_jam, geom) VALUES (:nama, :deskripsi, :buka_24_jam, ST_GeomFromGeoJSON(:geometry))";
$stmt = $pdo->prepare($sql);
$stmt->execute([
':nama' => $input['nama'],
':deskripsi' => $input['deskripsi'] ?? '',
':buka_24_jam' => isset($input['buka_24_jam']) && $input['buka_24_jam'] ? 1 : 0,
':geometry' => json_encode($input['geometry'])
]);
sendSuccess(['id' => $pdo->lastInsertId()], 'Disimpan', 201);
} catch (PDOException $e) { sendError('Gagal: ' . $e->getMessage(), 500); }
break;
case 'DELETE':
$id = $_GET['id'] ?? null;
if (!$id) sendError('ID dibutuhkan');
$stmt = $pdo->prepare("DELETE FROM spbu WHERE id = ?");
$stmt->execute([$id]);
sendSuccess(null, 'Dihapus');
break;
default:
sendError('Method not allowed', 405);
break;
}
?>
01/backend/config/db.php
+57
View File
@@ -0,0 +1,57 @@
<?php
/**
* Singleton PDO connection.
*
* Coolify: set DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, and DB_PASSWORD
* from the database service credentials.
*/
class Database {
private static $conn = null;
private static function env(string $key, string $default = ''): string {
$value = getenv($key);
return ($value === false || $value === '') ? $default : $value;
}
public static function getConnection() {
if (self::$conn === null) {
$dbUrl = self::env('DATABASE_URL');
if ($dbUrl) {
$parsed = parse_url($dbUrl);
$host = $parsed['host'] ?? '127.0.0.1';
$port = $parsed['port'] ?? '3306';
$username = $parsed['user'] ?? 'root';
$password = $parsed['pass'] ?? '';
$dbName = ltrim($parsed['path'], '/');
} else {
$host = self::env('DB_HOST', '127.0.0.1');
$port = self::env('DB_PORT', '3306');
$dbName = self::env('DB_DATABASE', 'webgis_db');
$username = self::env('DB_USERNAME', 'root');
$password = self::env('DB_PASSWORD', '');
}
self::$conn = new PDO(
"mysql:host={$host};port={$port};dbname={$dbName};charset=utf8mb4",
$username,
$password
);
self::$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
self::$conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
// Disable strict mode for GROUP BY to prevent 1055 errors in Coolify's MariaDB
self::$conn->exec("SET SESSION sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY',''))");
// Auto-initialize database if empty
$stmt = self::$conn->query("SHOW TABLES LIKE 'users'");
if ($stmt->rowCount() == 0) {
$sqlFile = __DIR__ . '/../../../database/webgis_db.sql';
if (file_exists($sqlFile)) {
$sql = file_get_contents($sqlFile);
self::$conn->exec($sql);
}
}
}
return self::$conn;
}
}
01/backend/utils/response_helper.php
+51
View File
@@ -0,0 +1,51 @@
<?php
/**
* response_helper.php
* Tanggung Jawab: Standarisasi format response JSON untuk semua API endpoint.
* Mencegah inkonsistensi struktur data yang dikembalikan ke frontend.
*/
header('Content-Type: application/json; charset=utf-8');
// Izinkan CORS (opsional, jika frontend dan backend di port yang beda)
$allowedOrigin = getenv('CORS_ALLOWED_ORIGIN');
if ($allowedOrigin !== false && $allowedOrigin !== '') {
header('Access-Control-Allow-Origin: ' . $allowedOrigin);
header('Vary: Origin');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');
}
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
exit(0);
}
/**
* Mengirim response sukses
* @param mixed $data Data yang ingin dikirim
* @param string $message Pesan sukses (opsional)
* @param int $statusCode HTTP Status Code (default: 200)
*/
function sendSuccess($data = null, $message = 'Success', $statusCode = 200) {
http_response_code($statusCode);
echo json_encode([
'status' => 'success',
'message' => $message,
'data' => $data
]);
exit();
}
/**
* Mengirim response error
* @param string $message Pesan error
* @param int $statusCode HTTP Status Code (default: 400)
*/
function sendError($message = 'Error', $statusCode = 400) {
http_response_code($statusCode);
echo json_encode([
'status' => 'error',
'message' => $message
]);
exit();
}
?>
01/frontend/css/base.css
+61
View File
@@ -0,0 +1,61 @@
/* base.css
* Tanggung Jawab: Reset CSS, definisi variabel warna premium, dan tipografi dasar.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root {
/* Color Palette - Minimalist & Elegant */
--primary: #4F46E5;
--primary-hover: #4338CA;
--secondary: #10B981;
--background: #F3F4F6;
--surface: #FFFFFF;
--surface-glass: rgba(255, 255, 255, 0.85);
--text-main: #111827;
--text-muted: #6B7280;
--border: #E5E7EB;
--danger: #EF4444;
/* Shadows & Effects */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--radius-md: 12px;
--radius-lg: 16px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--background);
color: var(--text-main);
display: flex;
height: 100vh;
overflow: hidden;
}
h1, h2, h3, h4 {
font-weight: 600;
color: var(--text-main);
}
/* Scrollbar minimalis */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #94A3B8;
}
01/frontend/css/form.css
+92
View File
@@ -0,0 +1,92 @@
/* form.css
* Tanggung Jawab: Styling komponen form (input, button, select).
*/
.form-group {
margin-bottom: 16px;
}
.form-label {
display: block;
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 6px;
color: var(--text-main);
}
.form-control {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-family: inherit;
font-size: 0.95rem;
transition: var(--transition);
background: var(--surface);
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
font-family: inherit;
font-weight: 600;
font-size: 0.9rem;
border-radius: var(--radius-md);
border: none;
cursor: pointer;
transition: var(--transition);
gap: 8px;
width: 100%;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-danger {
background: var(--danger);
color: white;
width: auto;
padding: 6px 12px;
font-size: 0.8rem;
}
.btn-danger:hover {
background: #DC2626;
}
/* Micro-animation for active state */
.btn:active {
transform: translateY(1px);
}
/* Form Container Animation */
#form-container {
background: var(--surface);
padding: 20px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
margin-bottom: 20px;
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
01/frontend/css/main.css
+205
View File
@@ -0,0 +1,205 @@
:root {
--primary: #6366F1;
--primary-hover: #4F46E5;
--bg-dark: #0F172A;
--bg-glass: rgba(15, 23, 42, 0.75);
--border-glass: rgba(255, 255, 255, 0.1);
--text-light: #F8FAFC;
--text-muted: #94A3B8;
--radius: 20px;
--shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
--font: 'Inter', sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font);
background: var(--bg-dark);
color: var(--text-light);
overflow: hidden;
}
#map {
width: 100vw;
height: 100vh;
z-index: 1;
}
/* Floating Dock */
.floating-dock {
position: absolute;
top: 24px;
left: 24px;
z-index: 1000;
background: var(--bg-glass);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--border-glass);
border-radius: var(--radius);
padding: 24px;
width: 340px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 20px;
max-height: calc(100vh - 48px);
overflow-y: auto;
}
/* Custom Scrollbar for Dock */
.floating-dock::-webkit-scrollbar { width: 6px; }
.floating-dock::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
.header h2 { margin: 0 0 8px 0; font-size: 1.4rem; font-weight: 700; background: linear-gradient(135deg, #818CF8, #C084FC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.header p { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
/* Buttons */
.menu-group { display: flex; flex-direction: column; gap: 10px; }
.menu-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.btn-action {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-glass);
color: var(--text-light);
padding: 14px 16px;
border-radius: 12px;
cursor: pointer;
font-weight: 500;
font-family: var(--font);
display: flex;
align-items: center;
gap: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 0.9rem;
text-align: left;
}
.btn-action svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-action:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(4px);
}
.btn-action.active {
background: var(--primary);
border-color: var(--primary);
box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
}
/* Button Variants */
.btn-spbu svg { color: #10B981; }
.btn-jalan svg { color: #F59E0B; }
.btn-kavling svg { color: #3B82F6; }
.btn-rumah svg { color: #8B5CF6; }
.btn-warga svg { color: #EF4444; }
/* Form Panel */
.form-panel {
background: rgba(0, 0, 0, 0.4);
border-radius: 12px;
padding: 16px;
border: 1px solid var(--border-glass);
display: flex;
flex-direction: column;
gap: 12px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.8rem; color: var(--text-muted); }
.form-control {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-glass);
padding: 10px 12px;
border-radius: 8px;
color: white;
font-family: var(--font);
font-size: 0.9rem;
outline: none;
transition: border 0.2s;
}
.form-control:focus { border-color: var(--primary); }
.checkbox-group {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.checkbox-group input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.checkbox-group span { font-size: 0.85rem; color: var(--text-light); }
.btn-submit {
background: var(--primary);
color: white;
border: none;
padding: 12px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.btn-submit:hover { background: var(--primary-hover); }
/* Leaflet Customizations */
.leaflet-draw-toolbar { display: none !important; }
.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow) !important; }
.leaflet-control-zoom a {
background: var(--bg-glass) !important;
color: var(--text-light) !important;
border-color: var(--border-glass) !important;
backdrop-filter: blur(10px);
}
.leaflet-control-zoom a:hover { background: var(--primary) !important; }
/* Leaflet Popup Premium */
.leaflet-popup-content-wrapper {
background: var(--bg-glass) !important;
backdrop-filter: blur(16px) !important;
border: 1px solid var(--border-glass) !important;
color: var(--text-light) !important;
border-radius: 16px !important;
box-shadow: var(--shadow) !important;
}
.leaflet-popup-tip { background: var(--bg-glass) !important; border: 1px solid var(--border-glass) !important; }
.leaflet-popup-content { margin: 16px !important; font-family: var(--font); }
.leaflet-popup-content h3 { margin: 0 0 8px 0; font-size: 1.1rem; border-bottom: 1px solid var(--border-glass); padding-bottom: 8px; }
.leaflet-popup-content p { margin: 4px 0; font-size: 0.9rem; color: var(--text-muted); }
.leaflet-popup-content .btn-delete {
background: rgba(239, 68, 68, 0.1);
color: #EF4444;
border: 1px solid rgba(239, 68, 68, 0.3);
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
margin-top: 12px;
width: 100%;
transition: all 0.2s;
}
.leaflet-popup-content .btn-delete:hover { background: #EF4444; color: white; }
/* Custom Map Marker Icon Animation */
.custom-icon div {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-icon:hover div {
transform: scale(1.1) translateY(-4px);
}
/* Toast Notification */
.toast-container {
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
display: flex; flex-direction: column; gap: 10px;
}
.toast {
background: var(--bg-glass); backdrop-filter: blur(16px);
border: 1px solid var(--border-glass); border-left: 4px solid var(--primary);
padding: 16px 20px; border-radius: 12px; color: white; font-size: 0.9rem;
box-shadow: var(--shadow); animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.error { border-left-color: #EF4444; }
.toast.success { border-left-color: #10B981; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
01/frontend/css/map.css
+73
View File
@@ -0,0 +1,73 @@
/* map.css
* Tanggung Jawab: Styling container peta, kontrol Leaflet, dan pop-up modern.
*/
.map-container {
flex: 1;
position: relative;
background: #E2E8F0;
}
#map {
width: 100%;
height: 100%;
z-index: 1;
}
/* Customizing Leaflet Controls */
.leaflet-control-zoom {
border: none !important;
box-shadow: var(--shadow-md) !important;
border-radius: var(--radius-md) !important;
overflow: hidden;
}
.leaflet-control-zoom a {
color: var(--text-main) !important;
background: var(--surface-glass) !important;
backdrop-filter: blur(8px);
transition: var(--transition);
}
.leaflet-control-zoom a:hover {
background: var(--surface) !important;
color: var(--primary) !important;
}
/* Sembunyikan Toolbar Default Leaflet Draw karena kita pakai Menu Kiri */
.leaflet-draw-toolbar {
display: none !important;
}
/* Custom Popup Modern */
.leaflet-popup-content-wrapper {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 4px;
}
.leaflet-popup-content {
margin: 14px;
font-family: 'Inter', sans-serif;
}
.popup-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-main);
margin-bottom: 6px;
border-bottom: 2px solid var(--primary);
padding-bottom: 4px;
display: inline-block;
}
.popup-desc {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 12px;
}
.popup-action {
display: flex;
justify-content: flex-end;
}
01/frontend/css/sidebar.css
+78
View File
@@ -0,0 +1,78 @@
/* sidebar.css
* Tanggung Jawab: Styling layout sidebar, navigasi, dan list item.
*/
.sidebar {
width: 350px;
background: var(--surface-glass);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
z-index: 1000;
box-shadow: var(--shadow-lg);
transition: var(--transition);
}
.sidebar-header {
padding: 24px;
border-bottom: 1px solid var(--border);
}
.sidebar-title {
font-size: 1.25rem;
font-weight: 700;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
.sidebar-subtitle {
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 4px;
}
.sidebar-content {
flex: 1;
overflow-y: auto;
padding: 24px;
}
/* Toast Notification */
.toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
}
.toast {
background: var(--surface);
color: var(--text-main);
padding: 12px 20px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
font-size: 0.9rem;
font-weight: 500;
transform: translateY(20px);
opacity: 0;
animation: slideIn 0.3s forwards ease-out;
border-left: 4px solid var(--primary);
}
.toast.error {
border-left-color: var(--danger);
}
@keyframes slideIn {
to {
transform: translateY(0);
opacity: 1;
}
}
01/frontend/index.html
+56
View File
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGIS - Pertemuan 01</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Peta -->
<div id="map"></div>
<!-- Floating Dock -->
<div class="floating-dock">
<div class="header">
<h2>P01: Geometri</h2>
<p>Sistem Informasi Geografis dengan arsitektur modern.</p>
</div>
<div class="menu-group">
<div class="menu-title">Alat Spasial</div>
<button id="btn-draw-spbu" class="btn-action btn-spbu">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.242-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Tambah SPBU
</button>
<button id="btn-draw-jalan" class="btn-action btn-jalan">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
Tambah Jalan
</button>
<button id="btn-draw-kavling" class="btn-action btn-kavling">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
Tambah Kavling
</button>
</div>
<!-- Dynamic Form Container -->
<div id="form-container" style="display: none;"></div>
</div>
<!-- Toast Notification Container -->
<div id="toast-container" class="toast-container"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script type="module" src="js/app.js"></script>
</body>
</html>
01/frontend/js/app.js
+92
View File
@@ -0,0 +1,92 @@
import { initMap } from './modules/map.js';
import { setupDrawControls } from './modules/draw.js';
import { renderForm } from './modules/form.js';
import { spbuService, jalanService, kavlingService } from './services/api.service.js';
let appMap;
let drawControl;
// Custom SVG Icons Generator
export const createIcon = (svgPath, color) => {
return L.divIcon({
className: 'custom-icon',
html: `<div style="background-color: ${color}; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.8); color: white;">
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">${svgPath}</svg>
</div>`,
iconSize: [34, 34],
iconAnchor: [17, 34],
popupAnchor: [0, -34]
});
};
export const iconSPBU = (is24h) => createIcon('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.242-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>', is24h ? '#10B981' : '#EF4444');
window.showToast = (msg, type='success') => {
const t = document.createElement('div');
t.className = `toast ${type}`;
t.innerHTML = msg;
document.getElementById('toast-container').appendChild(t);
setTimeout(() => { t.style.transform='translateX(100%)'; t.style.opacity=0; setTimeout(()=>t.remove(),300); }, 3000);
};
document.addEventListener('DOMContentLoaded', async () => {
appMap = initMap('map');
drawControl = setupDrawControls(appMap, handleGeometryCreated);
await loadAllData();
});
const loadAllData = async () => {
try {
const spbu = await spbuService.getAll();
L.geoJSON(spbu, {
pointToLayer: (f, latlng) => L.marker(latlng, { icon: iconSPBU(f.properties.buka_24_jam) }),
onEachFeature: (f, l) => bindPopup(l, 'spbu', f.properties)
}).addTo(appMap);
const jalan = await jalanService.getAll();
L.geoJSON(jalan, { style: { color: '#F59E0B', weight: 4 }, onEachFeature: (f, l) => bindPopup(l, 'jalan', f.properties) }).addTo(appMap);
const kavling = await kavlingService.getAll();
L.geoJSON(kavling, { style: { color: '#3B82F6', weight: 2, fillColor: '#3B82F6', fillOpacity: 0.3 }, onEachFeature: (f, l) => bindPopup(l, 'kavling', f.properties) }).addTo(appMap);
} catch (e) {
window.showToast("Gagal meload data: "+e.message, 'error');
}
};
const bindPopup = (layer, type, props) => {
const ext = props.buka_24_jam !== undefined ? `<p>Buka 24 Jam: <strong style="color:${props.buka_24_jam?'#10B981':'#EF4444'}">${props.buka_24_jam ? 'Ya' : 'Tidak'}</strong></p>` : '';
layer.bindPopup(`
<div class="popup-custom">
<h3>${props.nama}</h3>
<p>${props.deskripsi || ''}</p>
${ext}
<button class="btn-delete" onclick="window.deleteData('${type}', ${props.id})">Hapus Data</button>
</div>
`);
};
window.deleteData = async (type, id) => {
if(!confirm('Yakin ingin menghapus?')) return;
try {
if(type==='spbu') await spbuService.delete(id);
if(type==='jalan') await jalanService.delete(id);
if(type==='kavling') await kavlingService.delete(id);
window.showToast('Data dihapus');
setTimeout(()=>location.reload(), 800);
} catch(e) { window.showToast('Gagal hapus', 'error'); }
};
const handleGeometryCreated = (type, geometry, layer) => {
const tempLayer = L.geoJSON(geometry).addTo(appMap);
renderForm(type, geometry, async (payload) => {
try {
if(type==='spbu') await spbuService.create(payload);
if(type==='jalan') await jalanService.create(payload);
if(type==='kavling') await kavlingService.create(payload);
window.showToast('Berhasil disimpan');
setTimeout(()=>location.reload(), 800);
} catch(e) { window.showToast('Gagal simpan', 'error'); }
}, () => {
appMap.removeLayer(tempLayer);
});
};
01/frontend/js/config.js
+15
View File
@@ -0,0 +1,15 @@
/**
* config.js
* Tanggung Jawab: Menyimpan konstanta dan konfigurasi global aplikasi.
*/
export const CONFIG = {
BASE_URL: '/01/backend/api',
// Konstanta tipe fitur
FEATURE_TYPES: {
SPBU: 'Point',
JALAN: 'LineString',
KAVLING: 'Polygon'
}
};
01/frontend/js/modules/draw.js
+31
View File
@@ -0,0 +1,31 @@
export const setupDrawControls = (map, onGeometryCreated) => {
const drawControl = new L.Control.Draw({
draw: { marker: true, polyline: true, polygon: true, circle: false, circlemarker: false, rectangle: false }
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (event) {
const layer = event.layer;
const type = event.layerType;
// Peta draw default tipe: marker -> spbu, polyline -> jalan, polygon -> kavling
let customType = type;
if(type === 'marker') customType = 'spbu';
if(type === 'polyline') customType = 'jalan';
if(type === 'polygon') customType = 'kavling';
if(window.currentDrawType) customType = window.currentDrawType; // Untuk P2/P3
onGeometryCreated(customType, layer.toGeoJSON().geometry, layer);
});
// Custom Menu Handlers
const markerDrawer = new L.Draw.Marker(map, drawControl.options.draw.marker);
const polylineDrawer = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
const polygonDrawer = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
document.getElementById('btn-draw-spbu')?.addEventListener('click', () => { window.currentDrawType='spbu'; markerDrawer.enable(); });
document.getElementById('btn-draw-jalan')?.addEventListener('click', () => { window.currentDrawType='jalan'; polylineDrawer.enable(); });
document.getElementById('btn-draw-kavling')?.addEventListener('click', () => { window.currentDrawType='kavling'; polygonDrawer.enable(); });
return drawControl;
};
01/frontend/js/modules/form.js
+50
View File
@@ -0,0 +1,50 @@
export const renderForm = (type, geometry, onSubmit, onCancel) => {
const container = document.getElementById('form-container');
container.style.display = 'flex';
const extraFields = type === 'spbu' ? `
<div class="form-group">
<label class="checkbox-group">
<input type="checkbox" id="input-24jam">
<span>Buka 24 Jam</span>
</label>
</div>
` : '';
container.innerHTML = `
<div class="form-panel">
<h3 style="margin:0 0 10px 0; font-size:1rem; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:8px;">Simpan Data (${type.toUpperCase()})</h3>
<div class="form-group">
<input type="text" id="input-nama" class="form-control" placeholder="Nama / Label" required>
</div>
<div class="form-group">
<input type="text" id="input-deskripsi" class="form-control" placeholder="Deskripsi Singkat">
</div>
${extraFields}
<div style="display:flex; gap:10px; margin-top:8px;">
<button id="btn-save" class="btn-submit" style="flex:1;">Simpan</button>
<button id="btn-cancel" class="btn-submit" style="background:rgba(255,255,255,0.1); color:var(--text-light); flex:1;">Batal</button>
</div>
</div>
`;
document.getElementById('btn-save').addEventListener('click', () => {
const payload = {
type,
geometry,
nama: document.getElementById('input-nama').value,
deskripsi: document.getElementById('input-deskripsi').value,
};
if (type === 'spbu') payload.buka_24_jam = document.getElementById('input-24jam').checked;
onSubmit(payload);
container.style.display = 'none';
container.innerHTML = '';
});
document.getElementById('btn-cancel').addEventListener('click', () => {
if(onCancel) onCancel();
container.style.display = 'none';
container.innerHTML = '';
});
};
01/frontend/js/modules/map.js
+25
View File
@@ -0,0 +1,25 @@
/**
* map.js
* Tanggung Jawab: Inisialisasi peta Leaflet dasar dan base layer.
*/
export const initMap = (containerId) => {
// Pusat peta default (Universitas Tanjungpura, Pontianak)
const map = L.map(containerId, {
zoomControl: false
}).setView([-0.0583, 109.3448], 15);
// Pindahkan zoom control ke kanan bawah
L.control.zoom({
position: 'bottomright'
}).addTo(map);
// Tile Layer Premium (CartoDB Dark Matter untuk Glass UI)
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 20
}).addTo(map);
return map;
};
01/frontend/js/services/api.service.js
+49
View File
@@ -0,0 +1,49 @@
const getBaseUrl = () => {
const segments = window.location.pathname.split('/');
const targetIndex = segments.findIndex(seg => ['01', '02', '03', 'versi'].includes(seg));
if (targetIndex !== -1) {
return segments.slice(0, targetIndex).join('/');
}
return '';
};
export const BASE_URL = getBaseUrl();
const createService = (endpoint) => ({
getAll: async () => {
const res = await fetch(`${BASE_URL}/${endpoint}`);
const json = await res.json();
return json.data;
},
create: async (data) => {
const res = await fetch(`${BASE_URL}/${endpoint}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
const json = await res.json();
return json.data;
},
delete: async (id) => {
const res = await fetch(`${BASE_URL}/${endpoint}?id=${id}`, {
method: 'DELETE'
});
const json = await res.json();
return json.data;
}
});
// P01
export const spbuService = createService('01/backend/api/spbu.php');
export const jalanService = createService('01/backend/api/jalan.php');
export const kavlingService = createService('01/backend/api/kavling.php');
// P02
export const rumahIbadahService = createService('02/backend/api/rumah_ibadah.php');
export const wargaMiskinService = createService('02/backend/api/warga_miskin.php');
export const haversineService = {
getDalamRadius: async (id, radius) => {
const res = await fetch(`${BASE_URL}/02/backend/api/haversine.php?rumah_ibadah_id=${id}&radius_km=${radius}`);
const json = await res.json();
return json.data;
}
};
01/frontend/js/services/jalan.service.js
+28
View File
@@ -0,0 +1,28 @@
/**
* jalan.service.js
* Tanggung Jawab: Komunikasi HTTP ke endpoint API jalan.php
*/
import { CONFIG } from '../config.js';
export const jalanService = {
getAll: async () => {
const response = await fetch(`${CONFIG.BASE_URL}/jalan.php`);
return await response.json();
},
save: async (data) => {
const response = await fetch(`${CONFIG.BASE_URL}/jalan.php`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
return await response.json();
},
delete: async (id) => {
const response = await fetch(`${CONFIG.BASE_URL}/jalan.php?id=${id}`, {
method: 'DELETE'
});
return await response.json();
}
};
01/frontend/js/services/kavling.service.js
+28
View File
@@ -0,0 +1,28 @@
/**
* kavling.service.js
* Tanggung Jawab: Komunikasi HTTP ke endpoint API kavling.php
*/
import { CONFIG } from '../config.js';
export const kavlingService = {
getAll: async () => {
const response = await fetch(`${CONFIG.BASE_URL}/kavling.php`);
return await response.json();
},
save: async (data) => {
const response = await fetch(`${CONFIG.BASE_URL}/kavling.php`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
return await response.json();
},
delete: async (id) => {
const response = await fetch(`${CONFIG.BASE_URL}/kavling.php?id=${id}`, {
method: 'DELETE'
});
return await response.json();
}
};
01/frontend/js/services/spbu.service.js
+28
View File
@@ -0,0 +1,28 @@
/**
* spbu.service.js
* Tanggung Jawab: Komunikasi HTTP ke endpoint API spbu.php
*/
import { CONFIG } from '../config.js';
export const spbuService = {
getAll: async () => {
const response = await fetch(`${CONFIG.BASE_URL}/spbu.php`);
return await response.json();
},
save: async (data) => {
const response = await fetch(`${CONFIG.BASE_URL}/spbu.php`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
return await response.json();
},
delete: async (id) => {
const response = await fetch(`${CONFIG.BASE_URL}/spbu.php?id=${id}`, {
method: 'DELETE'
});
return await response.json();
}
};
01/frontend/js/utils/style.util.js
+34
View File
@@ -0,0 +1,34 @@
/**
* style.util.js
* Tanggung Jawab: Mendefinisikan style untuk GeoJSON berdasarkan properti.
*/
export const getGeoJsonStyle = (feature) => {
// Style default untuk Kavling (Polygon)
if (feature.geometry.type === 'Polygon') {
return {
color: '#10B981', // Secondary color
weight: 2,
opacity: 0.8,
fillColor: '#34D399',
fillOpacity: 0.4
};
}
// Style default untuk Jalan (LineString)
if (feature.geometry.type === 'LineString') {
const type = feature.properties.jenis_jalan;
let color = '#4F46E5'; // Primary color
if (type === 'Arteri') color = '#EF4444'; // Danger color
else if (type === 'Kolektor') color = '#F59E0B'; // Warning color
return {
color: color,
weight: 4,
opacity: 0.9
};
}
return {};
};
01/frontend/js/utils/ui.util.js
+32
View File
@@ -0,0 +1,32 @@
/**
* ui.util.js
* Tanggung Jawab: Manipulasi DOM umum seperti Toast notification.
*/
export const showToast = (message, type = 'success') => {
const container = document.getElementById('toast-container');
if (!container) return;
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.textContent = message;
container.appendChild(toast);
// Hapus toast setelah 3 detik
setTimeout(() => {
toast.style.opacity = '0';
toast.style.transform = 'translateY(20px)';
toast.style.transition = 'all 0.3s ease';
setTimeout(() => toast.remove(), 300);
}, 3000);
};
export const clearFormContainer = () => {
const container = document.getElementById('form-container');
if (container) {
container.innerHTML = '';
container.style.display = 'none';
}
};