diff --git a/Tugas2/index.html b/Tugas2/index.html
new file mode 100644
index 0000000..4086ce5
--- /dev/null
+++ b/Tugas2/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="utf-8">
+<title>Tugas 2 - Jalan dan Kavling</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geometryutil/0.10.2/leaflet.geometryutil.min.js"></script>
+<style>
+html, body {height:100%; margin:0; font-family: Arial, Helvetica, sans-serif;}
+#map {height:100%;}
+input, select {width:100%; margin-bottom:5px; padding:4px;}
+button {margin-top:5px; cursor:pointer;}
+.back-link {
+  position: fixed; z-index: 9999; left: 12px; top: 12px;
+  background: white; color: #111827; padding: 9px 12px;
+  border-radius: 10px; text-decoration: none; font-weight: 700;
+  box-shadow: 0 3px 14px rgba(0,0,0,.18); font-size: 13px;
+}
+.legend { background:white; padding:10px; line-height:18px; color:#333; border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,.3); }
+.legend i { width:18px; height:18px; float:left; margin-right:8px; opacity:.8; }
+</style>
+</head>
+<body>
+<a class="back-link" href="../">← Landing Page</a>
+<div id="map"></div>
+<script>
+const map = L.map('map').setView([-0.02, 109.34], 13);
+L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+
+const drawnItems=new L.FeatureGroup();
+map.addLayer(drawnItems);
+const drawControl=new L.Control.Draw({ edit:{featureGroup:drawnItems}, draw:{marker:false,polyline:true,polygon:true,circle:false,circlemarker:false,rectangle:false} });
+map.addControl(drawControl);
+
+function formJalan(latlngs){
+return `<b>Input Jalan</b><br>Nama:<input id="nama_jalan"><br>Status:<select id="status_jalan"><option>Nasional</option><option>Provinsi</option><option>Kabupaten</option></select><br><button onclick='simpanJalan(${JSON.stringify(latlngs)})'>Simpan</button>`;
+}
+function formKavling(latlngs){
+return `<b>Input Kavling</b><br>Pemilik:<input id="pemilik"><br>Status:<select id="status_kavling"><option>SHM</option><option>HGB</option><option>HGU</option><option>HP</option></select><br><button onclick='simpanKavling(${JSON.stringify(latlngs)})'>Simpan</button>`;
+}
+
+map.on(L.Draw.Event.CREATED,function(e){
+  const layer=e.layer; drawnItems.addLayer(layer);
+  if(e.layerType==='polyline'){
+    const latlngs=layer.getLatLngs();
+    L.popup().setLatLng(layer.getBounds().getCenter()).setContent(formJalan(latlngs)).openOn(map);
+  }
+  if(e.layerType==='polygon'){
+    const latlngs=layer.getLatLngs()[0];
+    L.popup().setLatLng(layer.getBounds().getCenter()).setContent(formKavling(latlngs)).openOn(map);
+  }
+});
+
+function simpanJalan(latlngs){
+  const nama=document.getElementById('nama_jalan').value;
+  const status=document.getElementById('status_jalan').value;
+  let panjang=0;
+  for(let i=0;i<latlngs.length-1;i++) panjang+=map.distance(latlngs[i],latlngs[i+1]);
+  fetch('../simpan_jalan.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`nama=${encodeURIComponent(nama)}&status=${encodeURIComponent(status)}&panjang=${panjang}&geom=${encodeURIComponent(JSON.stringify(latlngs))}`}).then(()=>location.reload());
+}
+
+function simpanKavling(latlngs){
+  const pemilik=document.getElementById('pemilik').value;
+  const status=document.getElementById('status_kavling').value;
+  let luas=L.GeometryUtil.geodesicArea(latlngs);
+  fetch('../simpan_kavling.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`pemilik=${encodeURIComponent(pemilik)}&status=${encodeURIComponent(status)}&luas=${luas}&geom=${encodeURIComponent(JSON.stringify(latlngs))}`}).then(()=>location.reload());
+}
+
+fetch('../ambil_jalan.php').then(res=>res.json()).then(data=>{
+  data.forEach(d=>{
+    const coords=JSON.parse(d.geom);
+    let warna='blue'; if(d.status=='Nasional') warna='red'; if(d.status=='Provinsi') warna='green'; if(d.status=='Kabupaten') warna='orange';
+    L.polyline(coords,{color:warna}).addTo(map).bindPopup(`<b>${d.nama}</b><br>Status: Jalan ${d.status}<br>Panjang: ${parseFloat(d.panjang).toFixed(2)} meter<br><br><button onclick="editJalan(${d.id},'${String(d.nama).replace(/'/g,'')}','${d.status}',${coords[0].lat},${coords[0].lng})">Edit</button><button onclick="hapusJalan(${d.id})">Hapus</button>`);
+  });
+});
+
+fetch('../ambil_kavling.php').then(res=>res.json()).then(data=>{
+  data.forEach(d=>{
+    const coords=JSON.parse(d.geom);
+    let warna='purple'; if(d.status=='SHM') warna='green'; if(d.status=='HGB') warna='blue'; if(d.status=='HGU') warna='orange'; if(d.status=='HP') warna='red';
+    L.polygon(coords,{color:warna}).addTo(map).bindPopup(`<b>${d.pemilik}</b><br>Status: ${d.status}<br>Luas: ${parseFloat(d.luas).toFixed(2)} m²<br><br><button onclick="editKavling(${d.id},'${String(d.pemilik).replace(/'/g,'')}','${d.status}',${coords[0].lat},${coords[0].lng})">Edit</button><button onclick="hapusKavling(${d.id})">Hapus</button>`);
+  });
+});
+
+function editJalan(id,nama,status,lat,lng){
+  const form=`<b>Edit Jalan</b><br>Nama:<input id="nama_jalan" value="${nama}"><br><select id="status_jalan"><option ${status=='Nasional'?'selected':''}>Nasional</option><option ${status=='Provinsi'?'selected':''}>Provinsi</option><option ${status=='Kabupaten'?'selected':''}>Kabupaten</option></select><br><button onclick="updateJalan(${id})">Update</button>`;
+  L.popup().setLatLng([lat,lng]).setContent(form).openOn(map);
+}
+function updateJalan(id){
+  const nama=document.getElementById('nama_jalan').value;
+  const status=document.getElementById('status_jalan').value;
+  fetch('../update_jalan.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`id=${id}&nama=${encodeURIComponent(nama)}&status=${encodeURIComponent(status)}`}).then(()=>location.reload());
+}
+function hapusJalan(id){ if(confirm('Hapus jalan?')) fetch('../hapus_jalan.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`id=${id}`}).then(()=>location.reload()); }
+
+function editKavling(id,pemilik,status,lat,lng){
+  const form=`<b>Edit Kavling</b><br>Pemilik:<input id="pemilik" value="${pemilik}"><br><select id="status_kavling"><option ${status=='SHM'?'selected':''}>SHM</option><option ${status=='HGB'?'selected':''}>HGB</option><option ${status=='HGU'?'selected':''}>HGU</option><option ${status=='HP'?'selected':''}>HP</option></select><br><button onclick="updateKavling(${id})">Update</button>`;
+  L.popup().setLatLng([lat,lng]).setContent(form).openOn(map);
+}
+function updateKavling(id){
+  const pemilik=document.getElementById('pemilik').value;
+  const status=document.getElementById('status_kavling').value;
+  fetch('../update_kavling.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`id=${id}&pemilik=${encodeURIComponent(pemilik)}&status=${encodeURIComponent(status)}`}).then(()=>location.reload());
+}
+function hapusKavling(id){ if(confirm('Hapus kavling?')) fetch('../hapus_kavling.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`id=${id}`}).then(()=>location.reload()); }
+
+const legend = L.control({position:'bottomright'});
+legend.onAdd=function(){ const div=L.DomUtil.create('div','legend'); div.innerHTML='<b>Legenda</b><br><b>Jalan</b><br><i style="background:red"></i> Nasional<br><i style="background:green"></i> Provinsi<br><i style="background:orange"></i> Kabupaten<br><br><b>Kavling</b><br><i style="background:green"></i> SHM<br><i style="background:blue"></i> HGB<br><i style="background:orange"></i> HGU<br><i style="background:red"></i> HP'; return div; };
+legend.addTo(map);
+</script>
+</body>
+</html>
