TUGAS SISTEM INFORMASI GEOGRAFIS
“Marker dan Info Window”
Mata Kuliah : Sistem Informasi Geografis (SIG)
Dosen Pengampu : I Made Arsa Suyadnya, ST., M.Eng.
Nama Mahasiswa :
Cokorda Gde Wahyu Pramana
(1605541080)
PROGRAM STUDI TEKNIK ELEKTRO
FAKULTAS TEKNIK
UNIVERSITAS UDAYANA
2018
Soal
1. Cobalah kode yang disertakan pada folder tutorial ini: “Tutor-SIGWeb-02”. Kode
tersebut dapat digunakan untuk menambahkan dan menampilkan data marker yang
tersimpan pada database. Perhatikan alur kode tersebut dan selanjutnya
kembangkan kode sederhana tersebut sebagai berikut :
• Tambahkan draggable markers untuk mempermudah input data lokasi saat
penambahan data
• Tambahkan fungsi tampil seluruh data, fungsi ubah dan hapus data untuk data
lokasi yang sudah ditambahkan
Ketentuan:
• Menggunakan format dokumen HTML 5
• Desain dan tampilan dapat dirubah
• Upload tugas anda pada web hosting pribadi dengan nama folder: “modul02”
paling lambat sehari sebelum kuliah minggu depan.
• Buatlah laporan pembahasan mengenai kode yang telah dibuat dan kemudian
upload laporan pembahasan tersebut pada folder: “modul02”, format file dalam
pdf.
Penyelesaian
<?php
include 'koneksi.php';
$res = mysqli_query($conn,"SELECT * FROM markers");
while ($row = mysqli_fetch_array($res)) {
?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['address']; ?></td>
<td><?php echo $row['lat']; ?></td>
<td><?php echo $row['lng']; ?></td>
<td><?php echo $row['category']; ?></td>
<td>
<a href="update.php?id=<?php echo
$row['id']; ?>">Edit</a> |
<a href="delete.php?id=<?php echo $row['id']; ?>"
onClick="return confirm('Yakin Delete Data Ini?')">Delete</a>
</td>
</tr>
<?php
}
?>
var marker = new google.maps.Marker({
position: latlong,
map: map,
draggable: true
});
updateMarkerPosition(latlong);
google.maps.event.addListener(marker,'drag',function(event){
updateMarkerPosition(marker.getPosition());
});
function updateMarkerPosition(latlong){
document.getElementById('x').value = [latlong.lat()]
document.getElementById('y').value = [latlong.lng()]
}
<?php
include "koneksi.php";
if (isset($_GET['id'])){
$id = mysqli_real_escape_string($conn,$_GET['id']);
if(isset($_POST['act'])){
$id = mysqli_real_escape_string($conn,$_POST['id']);
$name = $_POST['nama'];
$address = $_POST['alamat'];
$lat = $_POST['x'];
$lng = $_POST['y'];
$category = $_POST['kategori'];
$sql = "UPDATE markers SET name='$name',
address='$address',lat='$lat',lng='$lng' , category='$category'
Code
ini
digunakan
untuk
menampilkan keseluruhan data
yang ada pada database. Hal ini
dapat dilihat dari $res yang dibuat
dan pemanggilan data dari setiap
baris tabel.
Code ini digunakan untuk membuat
draggable marker dan memberi
nilai pada kolom latitude dan
longitude pada tambah.php agar
nantinya dapat mempermudah
untuk memasukan data lokasi.
Code
ini
digunakan
untuk
melakukan edit pada data yang ada
di database, hal ini dapat dilihat
dengan SQL yang telah dibuat.
WHERE id='$id'";
$ex = mysqli_query($conn,$sql) or die("Updatenya
Gagal :v");
$result = mysqli_affected_rows($conn);
if($result>0){
echo "<script>alert('Update Berhasil');
location.href='index.php';</script>";
}else {
echo "<script>alert('Update Data
Gagal); </script>";
}
}
}
$res = mysqli_query($conn, "SELECT * FROM
`markers` WHERE id='$id'");
$row = mysqli_fetch_array($res);
?>
<?php
include "koneksi.php";
if(isset($_GET['id'])){
$id = mysqli_real_escape_string($conn,$_GET['id']);
$sql = "DELETE FROM markers WHERE id='$id'";
$ex = mysqli_query($conn,$sql) or die("Delete data
gagal cuy!!");
$result = mysqli_affected_rows($conn);
if($result>0)
{
echo"<script>alert('Delete Data Berhasil!');
location.href='index.php';</script>";
}
else
{
echo "<script>alert('Delete Tidak Dapat
Dijalankan!');</script>";
}
}
?>
Code
ini
digunakan
untuk
menghapus data yang sudah masuk
ke database, hal ini dapat dilihat
pada SQL yang sudah dibuat.
Tampilan Output :
Gambar 1. Tampilan Halaman Utama/Index
Tampilan diatas merupakan tampilan halam awal, yang hanya menampilkan sebuah peta dan
marker saja. Di menu index terdapat tiga options yaitu Home, Add, dan Update. Masing-masing menu
tersebut jika diklik akan membawa user ke sebuah halaman. Jika memilih Add maka akan dibawa ke
sebuah halaman untuk menambahkan data lokasi pada peta. Jika memilih menu Update maka user
akan dibawa ke sebuah halaman untuk mengedit data pada peta. Jika user memilih Home maka user
akan dibawa ke halam index atau halaman utama.
Gambar 2. Tampilan Halaman Tambah Lokasi
Tampilan diatas merupakan tampilan halam tambah lokasi. Pada halaman ini user bisa
menambahkan lokasi yang diinginkan. Disini saya menambahkan dragable marker agar dapat dengan
mudah mengambil data posisi dari koordinat yang akan ditambahkan sehingga data lebih akurat. Agar
koordinat yang didapatkan oleh marker dapat masuk ke textfield tersebut menggunakan “function
updateMarkerPosition”. Disni user akan diminta unutk mengisi data pada form secara lengkap berupa
koordinat X, Y, Nama, Alamat, dan Katagori. Ketika mengklik tombol “Simpan Data” maka data yang
kita tambahkan pada form tadi akan tersimpan di database dan akan ditampilkan pada halaman index.
Gambar 3.. Tampilan Halaman Update
Gambar diatas adalah tampilan dari halaman update lokasi. Pada halaman ini ditampilkan juga
semua data-data lokasi berupa tabel yang telah ditambahkan sebelumnya pada database. Disini kita
dapat melakukan aksi “edit” untuk menyunting data dan “delete “untuk menghapus data-data yang kita
inginkan.
Gambar 4.. Proses Delete Data
Ketika kita memilih opsi “delete” maka akan muncul popup pada window untuk
memastikan pada user apakah yakin mendelete data.
Gambar 5.. Proses Delete Data
Ketika kita mengkonformasi untuk menghapus data, maka data di database akan
terhapus dan menampilkan popup window “Delete Data Berhasil, Selamat !!!”. Dan user akan
diarahkan langsung menuju tampilan halam index.
Gambar 6.. Proses Edit Data
Gambar diatas merupakan tampilan halambaru pada web yaitu edit data untuk
melakukan proses sunting pada data yang kita inginkan. Disini kita dapat merubah dan
memperbaiki data pada database sesuai dengan yang kita inginkan. Setelah selesai mengisi data
pada form lali tekan tombol “update”
Gambar 7.. Proses Edit Data
Ketika menekan tombol “Update” maka akan muncul popup window seperti gambar
diatas. Lalu klik oke, dan data akan dirubah dan disimpan di database.
Gambar 8.. Proses Edit Data
Ketika proses edit data selesai akan muncul popup window seperti gambar diatas artinya
data sudah berhasil disimpan di database dan ditampilkan pada halaman index. Ketika klik oke
maka akan dibawa langsung ke dalam halaman index
