# Tutorial Hari 1: Setup Environment

## 🎯 Tujuan
- Mengenal tools yang dibutuhkan untuk pengembangan WebGIS
- Menginstall dan mengkonfigurasi Laragon
- Membuat struktur folder project
- Membuka project di Visual Studio Code

---

## 📚 Teori: Tools Pengembangan Web

### Apa saja yang dibutuhkan?

Untuk membuat aplikasi web, kita membutuhkan beberapa tools:

| Tool | Fungsi | Kita Pakai |
|------|--------|------------|
| **Web Server** | Menjalankan file PHP | Apache (via Laragon) |
| **Database** | Menyimpan data | MySQL (via Laragon) |
| **Code Editor** | Menulis kode | Visual Studio Code |
| **Browser** | Melihat hasil | Chrome/Firefox |

### Kenapa Laragon?

Laragon adalah paket all-in-one yang berisi Apache, MySQL, dan PHP. Lebih ringan dari XAMPP dan mudah digunakan.

| Fitur | Laragon | XAMPP |
|-------|---------|-------|
| Ukuran | ~100MB | ~500MB |
| Start/Stop | Cepat (1-2 detik) | Lambat |
| Auto Virtual Host | ✅ Ya | ❌ Tidak |
| Portable | ✅ Ya | ❌ Tidak |

---

## 1. Install Laragon

### Langkah 1: Download Laragon

1. Buka browser, pergi ke: `https://laragon.org/download/`
2. Pilih **Laragon Full** (berisi Apache, MySQL, PHP, Node.js)
3. Download dan install

### Langkah 2: Jalankan Laragon

1. Buka aplikasi **Laragon**
2. Klik **Start All** atau klik kanan icon → Start All
3. Tunggu sampai Apache dan MySQL berwarna hijau

> 💡 Laragon otomatis membuat folder `C:\laragon\www\` sebagai document root. Semua project web kita taruh di sana.

---

## 2. Install Visual Studio Code

### Langkah 1: Download VS Code

1. Buka: `https://code.visualstudio.com/`
2. Download untuk Windows/Mac/Linux
3. Install seperti biasa

### Langkah 2: Install Extensions (Opsional)

Buka VS Code → klik icon Extensions di sidebar → cari dan install:

| Extension | Fungsi |
|-----------|--------|
| **PHP Intelephense** | Autocomplete untuk PHP |
| **Auto Close Tag** | Otomatis tutup tag HTML |
| **Prettier** | Format kode otomatis |

---

## 3. Buat Struktur Folder Project

### Langkah 1: Buka File Explorer

1. Buka **File Explorer** di Windows
2. Navigasi ke `C:\laragon\www\`

### Langkah 2: Buat Folder Utama

1. Klik kanan → **New** → **Folder**
2. Beri nama: `pemetaan-desa`
3. Tekan Enter

### Langkah 3: Buat Sub-folder

Masuk ke folder `pemetaan-desa`, lalu buat folder-folder berikut:

```
📁 pemetaan-desa/
├── 📁 assets/           ← File CSS, JS, gambar
│   ├── 📁 css/          ← File stylesheet
│   └── 📁 js/           ← File JavaScript
├── 📁 config/           ← Konfigurasi (database)
├── 📁 database/         ← File SQL
├── 📁 lib/              ← Library PHP
├── 📁 pages/            ← Halaman-halaman web
└── 📁 process/          ← File proses (logout, dll)
```

**Cara membuat:**
1. Klik kanan → New → Folder → ketik `assets` → Enter
2. Ulangi untuk: `config`, `database`, `lib`, `pages`, `process`
3. Masuk ke folder `assets`, buat: `css` dan `js`

---

## 4. Buka Project di VS Code

### Langkah 1: Open Folder

1. Buka **Visual Studio Code**
2. Klik **File** → **Open Folder...**
3. Pilih folder `C:\laragon\www\pemetaan-desa`
4. Klik **Select Folder**

### Langkah 2: Lihat Struktur

Di panel kiri VS Code (Explorer), Anda akan melihat:

```
📁 PEMETAAN-DESA
├── 📁 assets
│   ├── 📁 css
│   └── 📁 js
├── 📁 config
├── 📁 database
├── 📁 lib
├── 📁 pages
└── 📁 process
```

> 💡 **Shortcut VS Code yang Berguna:**
> | Shortcut | Fungsi |
> |----------|--------|
> | `Ctrl + S` | Simpan file |
> | `Ctrl + Shift + N` | Buka window baru |
> | `Ctrl + ~` | Buka terminal |
> | `Ctrl + P` | Quick open file |

---

## 5. Test Laragon

### Langkah 1: Buat file test

1. Di VS Code, klik kanan folder `pemetaan-desa`
2. Pilih **New File**
3. Beri nama: `test.php`
4. Tulis kode berikut:

```php
<?php
// File test sederhana untuk memastikan PHP berjalan
echo "<h1>🎉 PHP Berhasil!</h1>";
echo "<p>Laragon berjalan dengan baik.</p>";
echo "<p>PHP Version: " . phpversion() . "</p>";
echo "<p>Server: " . $_SERVER['SERVER_SOFTWARE'] . "</p>";
```

### Langkah 2: Akses via Browser

1. Pastikan Laragon sudah **Start All**
2. Buka browser
3. Ketik: `http://localhost/pemetaan-desa/test.php`
4. Tekan Enter

### Hasil yang Diharapkan:

```
🎉 PHP Berhasil!
Laragon berjalan dengan baik.
PHP Version: 8.x.x
Server: Apache/2.4.x
```

> ⚠️ **Jika Error:**
> - Pastikan Laragon sudah Start All
> - Cek apakah folder ada di `C:\laragon\www\pemetaan-desa`
> - Refresh browser (Ctrl + F5)

---

## 📁 Struktur Akhir Hari 1

```
📁 C:\laragon\www\pemetaan-desa\
├── 📁 assets/
│   ├── 📁 css/           (kosong)
│   └── 📁 js/            (kosong)
├── 📁 config/            (kosong)
├── 📁 database/          (kosong)
├── 📁 lib/               (kosong)
├── 📁 pages/             (kosong)
├── 📁 process/           (kosong)
└── 📄 test.php           ← File test
```

---

**[Hari 2: Database & Schema](hari2.md) →**
