Kris/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:
Kris
2026-06-09 12:48:14 +00:00
parent 1ffd8f9824
commit 231ec4cd66
5 changed files with 379 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.dockerignore
+3
View File
@@ -0,0 +1,3 @@
.git
.gitignore
README_DEPLOY.md
Dockerfile
+9
View File
@@ -0,0 +1,9 @@
FROM php:8.2-apache
RUN docker-php-ext-install mysqli pdo pdo_mysql
COPY . /var/www/html/
RUN chown -R www-data:www-data /var/www/html
EXPOSE 80
README.md
+109
View File
@@ -0,0 +1,109 @@
# Tugas SIG WebGIS Gabungan
Project ini adalah gabungan dari Tugas01 sampai Tugas04 SIG dalam satu aplikasi.
Root `index.html` menjadi landing page, sedangkan tiap tugas berada dalam subfolder.
## Struktur Folder
```text
Tugas_SIG_gabungan/
├── index.html
├── tugas01/
├── tugas02/
├── tugas03/
├── tugas04/
├── database/
│ ├── tugas_sig.sql
│ ├── tugas_sig_xampp.sql
│ ├── tugas01_original.sql
│ ├── tugas02_original.sql
│ └── tugas03_original.sql
├── database.sql
└── Dockerfile
```
## Link Setelah Deploy
Jika domain deploy kamu adalah:
```text
https://domain-coolify-kamu
```
Maka link tugasnya:
```text
https://domain-coolify-kamu/
https://domain-coolify-kamu/tugas01/
https://domain-coolify-kamu/tugas02/
https://domain-coolify-kamu/tugas03/
https://domain-coolify-kamu/tugas04/
```
## Database
Project ini dibuat agar cukup memakai 1 database:
```text
webgis_tugas_sig
```
Tabel yang digunakan:
```text
tugas01_spbu
tugas02_data_spasial
tugas03_spbu
```
Tugas04 tidak memakai database karena menggunakan file `Kecamatan.json`.
## Cara Pakai di XAMPP
1. Copy folder project ini ke:
```text
C:/xampp/htdocs/Tugas_SIG_gabungan/
```
2. Jalankan Apache dan MySQL.
3. Buka phpMyAdmin.
4. Import file:
```text
database.sql
```
5. Buka browser:
```text
http://localhost/Tugas_SIG_gabungan/
```
## Cara Deploy di Coolify
1. Upload/push semua isi folder ini ke repo `Tugas_SIG`.
2. Di Coolify, buat project baru.
3. Tambahkan resource Application dari repo `Tugas_SIG`.
4. Pilih build pack Dockerfile.
5. Port aplikasi: `80`.
6. Tambahkan 1 database MySQL/MariaDB.
7. Import file `database/tugas_sig.sql` ke database yang dibuat di Coolify.
8. Tambahkan environment variable aplikasi:
```env
DB_HOST=nama_service_database
DB_PORT=3306
DB_NAME=webgis_tugas_sig
DB_USER=user_database
DB_PASS=password_database
```
9. Deploy aplikasi.
## Catatan
- UAS SIG tidak dimasukkan ke landing page ini.
- UAS tetap dideploy terpisah dari repo `UAS_SIG`.
- File `database/tugas_sig.sql` tidak membuat database baru, cocok untuk import ke database yang sudah dibuat Coolify.
- File `database.sql` dan `database/tugas_sig_xampp.sql` cocok untuk XAMPP/phpMyAdmin lokal.
database.sql
+52
View File
@@ -0,0 +1,52 @@
CREATE DATABASE IF NOT EXISTS webgis_tugas_sig CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE webgis_tugas_sig;
DROP TABLE IF EXISTS tugas01_spbu;
CREATE TABLE tugas01_spbu (
id INT AUTO_INCREMENT PRIMARY KEY,
nama_spbu VARCHAR(150) NOT NULL,
alamat TEXT NULL,
status_24_jam ENUM('Ya', 'Tidak') NOT NULL DEFAULT 'Tidak',
kontak VARCHAR(50) NULL,
geojson LONGTEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
INSERT INTO tugas01_spbu (nama_spbu, alamat, status_24_jam, kontak, geojson) VALUES
('SPBU Ahmad Yani', 'Jl. Ahmad Yani, Pontianak', 'Ya', '081234567890', '{"type":"Point","coordinates":[109.3425,-0.0442]}'),
('SPBU Gajah Mada', 'Jl. Gajah Mada, Pontianak', 'Tidak', '081234567891', '{"type":"Point","coordinates":[109.3338,-0.0271]}');
DROP TABLE IF EXISTS tugas02_data_spasial;
CREATE TABLE tugas02_data_spasial (
id INT AUTO_INCREMENT PRIMARY KEY,
nama VARCHAR(150) NOT NULL,
jenis_objek ENUM('Jalan', 'Tanah') NOT NULL,
status VARCHAR(100) NOT NULL,
ukuran DOUBLE NOT NULL DEFAULT 0,
geojson LONGTEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
INSERT INTO tugas02_data_spasial (nama, jenis_objek, status, ukuran, geojson) VALUES
('Contoh Jalan Ahmad Yani', 'Jalan', 'Jalan Nasional', 1250.00, '{"type":"LineString","coordinates":[[109.334,-0.055],[109.342,-0.047],[109.351,-0.043]]}'),
('Contoh Tanah Kavling A', 'Tanah', 'SHM', 8500.00, '{"type":"Polygon","coordinates":[[[109.337,-0.032],[109.342,-0.032],[109.342,-0.028],[109.337,-0.028],[109.337,-0.032]]]}');
DROP TABLE IF EXISTS tugas03_spbu;
CREATE TABLE tugas03_spbu (
id INT AUTO_INCREMENT PRIMARY KEY,
nama_spbu VARCHAR(150) NOT NULL,
alamat TEXT NULL,
status_24_jam ENUM('Ya', 'Tidak') NOT NULL DEFAULT 'Tidak',
kontak VARCHAR(50) NULL,
geojson LONGTEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
INSERT INTO tugas03_spbu (nama_spbu, alamat, status_24_jam, kontak, geojson) VALUES
('SPBU Ahmad Yani', 'Jl. Ahmad Yani, Pontianak', 'Ya', '081234567890', '{"type":"Point","coordinates":[109.3425,-0.0442]}'),
('SPBU Gajah Mada', 'Jl. Gajah Mada, Pontianak', 'Tidak', '081234567891', '{"type":"Point","coordinates":[109.3338,-0.0271]}'),
('SPBU Imam Bonjol', 'Jl. Imam Bonjol, Pontianak', 'Ya', '081234567892', '{"type":"Point","coordinates":[109.3448,-0.0316]}'),
('SPBU Tanjung Raya', 'Jl. Tanjung Raya II, Pontianak', 'Tidak', '081234567893', '{"type":"Point","coordinates":[109.3741,-0.0292]}');
index.html
+206
View File
@@ -0,0 +1,206 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page Tugas SIG - Kris Natalis</title>
<style>
:root {
--bg: #f6f8fc;
--card: #ffffff;
--text: #172033;
--muted: #667085;
--line: #e5e7eb;
--primary: #2563eb;
--primary-dark: #1d4ed8;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Arial, sans-serif;
background: radial-gradient(circle at top left, #dbeafe 0, transparent 32%), var(--bg);
color: var(--text);
}
.wrapper {
width: min(1100px, calc(100% - 32px));
margin: 0 auto;
padding: 42px 0;
}
.hero {
display: grid;
grid-template-columns: 1.4fr .8fr;
gap: 24px;
align-items: stretch;
margin-bottom: 24px;
}
.panel, .card {
background: rgba(255,255,255,.92);
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: 0 12px 32px rgba(15,23,42,.08);
}
.panel { padding: 32px; }
.badge {
display: inline-flex;
padding: 8px 12px;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8;
font-size: 13px;
font-weight: 700;
margin-bottom: 16px;
}
h1 {
margin: 0;
font-size: clamp(30px, 5vw, 52px);
letter-spacing: -1.4px;
line-height: 1.04;
}
.subtitle {
margin: 16px 0 0;
font-size: 16px;
color: var(--muted);
line-height: 1.7;
max-width: 720px;
}
.info {
padding: 26px;
display: flex;
flex-direction: column;
justify-content: center;
}
.info-row {
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.info-row:last-child { border-bottom: 0; }
.label {
display: block;
font-size: 12px;
color: var(--muted);
margin-bottom: 4px;
}
.value { font-weight: 700; }
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.card {
padding: 22px;
display: flex;
flex-direction: column;
min-height: 260px;
}
.number {
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
background: #eff6ff;
color: var(--primary);
font-weight: 800;
margin-bottom: 16px;
}
.card h2 {
margin: 0;
font-size: 18px;
line-height: 1.3;
}
.card p {
color: var(--muted);
line-height: 1.6;
font-size: 14px;
flex: 1;
}
.button {
display: inline-flex;
justify-content: center;
text-decoration: none;
background: var(--primary);
color: white;
padding: 11px 14px;
border-radius: 12px;
font-weight: 700;
transition: .2s;
}
.button:hover { background: var(--primary-dark); transform: translateY(-1px); }
footer {
margin-top: 22px;
color: var(--muted);
text-align: center;
font-size: 13px;
}
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; }
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.wrapper { width: min(100% - 22px, 1100px); padding: 22px 0; }
.panel, .info, .card { border-radius: 16px; }
.panel { padding: 24px; }
.grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<main class="wrapper">
<section class="hero">
<div class="panel">
<span class="badge">Mata Kuliah Sistem Informasi Geografis</span>
<h1>Landing Page Tugas WebGIS</h1>
<p class="subtitle">
Halaman ini berisi kumpulan tugas WebGIS yang digabung dalam satu aplikasi,
sehingga cukup dideploy satu kali di Coolify dan setiap tugas dapat dibuka melalui subfolder.
</p>
</div>
<aside class="info panel">
<div class="info-row">
<span class="label">Nama</span>
<span class="value">Kris Natalis</span>
</div>
<div class="info-row">
<span class="label">Project</span>
<span class="value">Tugas SIG WebGIS</span>
</div>
<div class="info-row">
<span class="label">Jumlah Tugas</span>
<span class="value">4 Project</span>
</div>
</aside>
</section>
<section class="grid">
<article class="card">
<div class="number">01</div>
<h2>WebGIS Pemetaan SPBU</h2>
<p>Menampilkan dan mengelola titik lokasi SPBU menggunakan marker Leaflet dan database.</p>
<a class="button" href="tugas01/">Buka Tugas 01</a>
</article>
<article class="card">
<div class="number">02</div>
<h2>Manajemen Jalan dan Tanah</h2>
<p>Mengelola data jalan berbentuk polyline dan data tanah berbentuk polygon.</p>
<a class="button" href="tugas02/">Buka Tugas 02</a>
</article>
<article class="card">
<div class="number">03</div>
<h2>Layer Groups & Control</h2>
<p>Menampilkan layer SPBU berdasarkan kategori buka 24 jam dan tidak 24 jam.</p>
<a class="button" href="tugas03/">Buka Tugas 03</a>
</article>
<article class="card">
<div class="number">04</div>
<h2>GeoJSON Kecamatan Pontianak</h2>
<p>Menampilkan batas kecamatan, nama kecamatan, dan jumlah populasi dari file GeoJSON.</p>
<a class="button" href="tugas04/">Buka Tugas 04</a>
</article>
</section>
<footer>
UAS SIG dideploy terpisah dan tidak dimasukkan ke landing page tugas.
</footer>
</main>
</body>
</html>