commit semua
This commit is contained in:
azgrey
@@ -1,148 +1,99 @@
|
||||
# Tugas WebGIS — PHP & Leaflet
|
||||
# WebGIS Portal — Pontianak
|
||||
|
||||
Kumpulan tugas WebGIS berbasis PHP + MySQL, dijalankan menggunakan **XAMPP** (Apache + MySQL).
|
||||
Portal pemetaan interaktif berbasis React + Leaflet.js untuk empat proyek WebGIS:
|
||||
|
||||
| # | Proyek | Fitur |
|
||||
| --- | -------------------- | ------------------------------------- |
|
||||
| 01 | SPBU Map | Tambah / hapus / geser marker SPBU |
|
||||
| 02 | WebGIS Jalan & Tanah | Gambar polyline & polygon, CRUD penuh |
|
||||
| 03 | Kepadatan Penduduk | Choropleth per kecamatan Pontianak |
|
||||
| 04 | SPBU + Layer Control | Seperti P01 + toggle layer 24 jam |
|
||||
|
||||
---
|
||||
|
||||
## Cara Menjalankan
|
||||
## Cara Deploy
|
||||
|
||||
### 1. Prasyarat
|
||||
|
||||
- [XAMPP](https://www.apachefriends.org/) sudah terinstall
|
||||
- Apache dan MySQL sudah aktif (buka XAMPP Control Panel → klik **Start** pada keduanya)
|
||||
|
||||
### 2. Letakkan folder project
|
||||
|
||||
Salin folder `tugas/` ke dalam direktori `htdocs` milik XAMPP:
|
||||
|
||||
| OS | Path htdocs |
|
||||
| ------- | ----------------------------------- |
|
||||
| Windows | `C:\xampp\htdocs\tugas\` |
|
||||
| Linux | `/opt/lampp/htdocs/tugas/` |
|
||||
| macOS | `/Applications/XAMPP/htdocs/tugas/` |
|
||||
|
||||
Struktur yang diharapkan:
|
||||
|
||||
```
|
||||
htdocs/
|
||||
└── tugas/
|
||||
├── 01/
|
||||
│ ├── index.php
|
||||
│ └── spbu_map.sql
|
||||
├── 02/
|
||||
│ ├── index.php
|
||||
│ └── webgis_db.sql
|
||||
├── 03/
|
||||
│ ├── index.php
|
||||
│ ├── pontianak.js
|
||||
│ ├── pontianak.json
|
||||
│ └── us-states.js
|
||||
└── 04/
|
||||
├── index.php
|
||||
└── spbu_map.sql
|
||||
```
|
||||
|
||||
### 3. Import database (untuk tugas yang menggunakan database)
|
||||
|
||||
Buka **phpMyAdmin** di `http://localhost/phpmyadmin`, lalu import file SQL:
|
||||
|
||||
| Tugas | File SQL | Database |
|
||||
| ----- | ------------------ | ----------- |
|
||||
| 01 | `01/spbu_map.sql` | `spbu_map` |
|
||||
| 02 | `02/webgis_db.sql` | `webgis_db` |
|
||||
| 04 | `04/spbu_map.sql` | `spbu_map` |
|
||||
|
||||
> Tugas 03 **tidak memerlukan database** — data sudah ada di file `.js` dan `.json`.
|
||||
|
||||
Cara import via phpMyAdmin:
|
||||
|
||||
1. Buka `http://localhost/phpmyadmin`
|
||||
2. Klik tab **Import** di menu atas
|
||||
3. Pilih file `.sql` yang sesuai
|
||||
4. Klik **Go / Kirim**
|
||||
|
||||
Atau bisa juga melalui MySQL CLI:
|
||||
### 1 — Install & jalankan lokal
|
||||
|
||||
```bash
|
||||
mysql -u root -p < tugas/01/spbu_map.sql
|
||||
mysql -u root -p < tugas/02/webgis_db.sql
|
||||
# Masuk ke folder project
|
||||
cd semua-tugas
|
||||
|
||||
# Install dependencies (Node.js ≥ 18 diperlukan)
|
||||
npm install
|
||||
|
||||
# Jalankan development server
|
||||
npm run dev
|
||||
# → Buka http://localhost:5173
|
||||
```
|
||||
|
||||
### 2 — Build untuk produksi
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
# Output ada di folder dist/
|
||||
```
|
||||
|
||||
### 3 — Deploy ke Vercel (gratis, paling mudah)
|
||||
|
||||
```bash
|
||||
npm install -g vercel
|
||||
vercel # ikuti petunjuk, pilih "Vite" framework
|
||||
```
|
||||
|
||||
### 4 — Deploy ke Netlify
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
# Drag-and-drop folder dist/ ke https://app.netlify.com/drop
|
||||
```
|
||||
|
||||
### 5 — Deploy ke GitHub Pages
|
||||
|
||||
```bash
|
||||
# 1. Push project ini ke GitHub repository
|
||||
# 2. Di vite.config.js tambahkan: base: '/<nama-repo>/'
|
||||
# 3. npm run build
|
||||
# 4. Deploy folder dist/ sebagai GitHub Pages
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Daftar Tugas
|
||||
## Database MySQL
|
||||
|
||||
### Tugas 01 — SPBU Map Pontianak
|
||||
File `webgis-portal.sql` berisi schema lengkap untuk semua proyek.
|
||||
|
||||
**URL:** `http://localhost/tugas/01/index.php`
|
||||
**Database:** `spbu_map`
|
||||
|
||||
Peta interaktif SPBU di Pontianak menggunakan Leaflet.js. Fitur:
|
||||
|
||||
- Tambah SPBU dengan klik pada peta (isi nama, nomor WA, status 24 jam)
|
||||
- Marker berwarna: **hijau** = buka 24 jam, **merah** = tidak 24 jam
|
||||
- Drag marker untuk pindah lokasi (otomatis tersimpan)
|
||||
- Hapus data SPBU
|
||||
- Popup dengan info detail dan link WhatsApp
|
||||
|
||||
---
|
||||
|
||||
### Tugas 02 — WebGIS Jalan dan Parsil Tanah
|
||||
|
||||
**URL:** `http://localhost/tugas/02/index.php`
|
||||
**Database:** `webgis_db`
|
||||
|
||||
WebGIS untuk manajemen data spasial jalan dan parsil tanah. Fitur:
|
||||
|
||||
- Gambar **polyline** (jalan) dan **polygon** (parsil tanah) langsung di peta
|
||||
- Undo titik saat menggambar
|
||||
- CRUD atribut: nama, status jalan (Nasional/Provinsi/Kabupaten), status kepemilikan (SHM/HGB/HGU/HP)
|
||||
- Edit geometri (seret titik untuk ubah bentuk)
|
||||
- Kalkulasi otomatis panjang jalan (meter) dan luas tanah (m²)
|
||||
- Legenda warna per status
|
||||
|
||||
---
|
||||
|
||||
### Tugas 03 — Peta Kepadatan Penduduk Pontianak
|
||||
|
||||
**URL:** `http://localhost/tugas/03/index.php`
|
||||
**Database:** Tidak diperlukan
|
||||
|
||||
Peta choropleth kepadatan penduduk per kecamatan di Pontianak menggunakan data GeoJSON lokal. Fitur:
|
||||
|
||||
- Visualisasi gradasi warna berdasarkan kepadatan penduduk
|
||||
- Data koordinat UTM (Zone 49N) dikonversi ke WGS84 via Proj4js
|
||||
- Info panel saat hover kecamatan
|
||||
- Legenda kepadatan
|
||||
|
||||
---
|
||||
|
||||
### Tugas 04 — SPBU Map (Extended)
|
||||
|
||||
**URL:** `http://localhost/tugas/04/index.php`
|
||||
**Database:** `spbu_map` (sama dengan Tugas 01)
|
||||
|
||||
Versi lanjutan dari Tugas 01 dengan fitur tambahan pada tampilan dan fungsionalitas peta SPBU Pontianak.
|
||||
|
||||
---
|
||||
|
||||
## Konfigurasi Database
|
||||
|
||||
Semua file PHP menggunakan koneksi default XAMPP:
|
||||
|
||||
```php
|
||||
$conn = new mysqli("localhost", "root", "", "nama_database");
|
||||
```bash
|
||||
mysql -u root -p < webgis-portal.sql
|
||||
```
|
||||
|
||||
Jika password MySQL Anda berbeda dari default (kosong), ubah parameter ketiga sesuai password Anda pada masing-masing file `index.php`.
|
||||
> **Catatan:** Versi front-end ini menggunakan data statis (embedded).
|
||||
> Untuk menghubungkan ke MySQL nyata, tambahkan REST API (Express.js / Laravel)
|
||||
> dan ganti data di `spbuDataRef` dengan fetch ke endpoint API Anda.
|
||||
|
||||
---
|
||||
|
||||
## Teknologi yang Digunakan
|
||||
## Struktur File
|
||||
|
||||
- **PHP** — backend & CRUD database
|
||||
- **MySQL** — penyimpanan data spasial
|
||||
- **Leaflet.js** — library peta interaktif
|
||||
- **Leaflet-Editable** — edit geometri di peta (Tugas 02)
|
||||
- **Proj4js** — konversi proyeksi koordinat (Tugas 03)
|
||||
- **OpenStreetMap** — tile layer peta dasar
|
||||
```
|
||||
webgis-portal/
|
||||
├── index.html ← entry point HTML
|
||||
├── vite.config.js ← konfigurasi Vite
|
||||
├── package.json ← dependencies
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
└── src/
|
||||
├── main.jsx ← React root
|
||||
└── App.jsx ← semua komponen (Landing + 4 proyek)
|
||||
```
|
||||
|
||||
## Stack
|
||||
|
||||
- **React 18** — UI framework
|
||||
- **Vite 5** — build tool
|
||||
- **Leaflet.js 1.9.4** — peta interaktif (dimuat via CDN)
|
||||
- **OpenStreetMap** — tile basemap
|
||||
|
||||
---
|
||||
|
||||
_Dikembangkan untuk Tugas WebGIS · Pontianak, Kalimantan Barat_
|
||||
|
||||
Reference in New Issue
Block a user