G I S

Tugas 5
Sis. Informasi Geografis Web dan Mobile

INSERT, UPDATE & DELETE DATA MARKER

OLEH:

Mentari Harmadya 1104505058

JURUSAN TEKNOLOGI INFORMASI
FAKULTAS TEKNIK UNIVERSITAS UDAYANA
2014
Pada tugas kali ini, kita dibebaskan dalam memilih symbol marker yang
ingin digunakan, symbol tersebut dapat berupan simbol rumah, orang, bangunan,
dan lain-lain. Sebelum membuat tampilan marker yang dapat melakukan insert,
update & delete data marker, diperlukan image marker yang ingin digunakan.
Image ini akan ditampilkan sebagai tanda marker didalam map. Berikut
merupakan image marker yang akan digunakan :

Gambar 1. Image Marker

Setelah image marker yang digunakan ditentukan, proses selanjutnya
adalah membuat halaman utama web. Tampilan utama ini disimpan dengan nama
index.php.
A. Index.php
Berikut ini merupakan kode program dari index.php:
<html>

<head>
<title></title>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"
></script>
<script src="jquery.js"></script>

<script src="gmaps-cluster.js"></script>
<script src="markerclusterer.js"></script>
<style>
#infoDiv{
position:absolute;
background:rgba(0, 0, 0, 0.5);
width:705px;
height:450px;
top: 5;
left:5;
display:none;
}
</style>
</head>

<body>
<div id="peta" style="width:700px; height:400px">

</div>
<div id="infoDiv">
<table align="center">
<br><br>
<td style="color:#FFF"
style="font:bold">Nama</td><td><input type="text" id="nama"></td>
<tr>
<td style="color:#FFF"
style="font:bold">Alamat</td><td><input type="text"
id="alamat"></td>
</tr>
<br><br>
</table>
<center>
<table>
<td><button id="ok">OK</button></td>
<td><button id="cancel">Cancel</button></td>
</table></center>
</div>
<input id="btnZIn" type="button" value="Zoom-In">
<input id="btnZOut" type="button" value="Zoom-Out">
<input id="showHideMarker" type="button" value="Hide">
<input id="delAllMarker" type="button" value="Delete All">

<div id="koordinat"></div>
<div id="nummarker"></div>
</body>

</html>
Kode Program 1. Index.php

Kode program diatas akan menampilkan halaman yang berisi table dengan
field nama dan alamat, informasi marker, informasi koordinat, serta 4 button
yaitu:
Button Zoom in memiliki fungsi untuk memperbesar tampilan map.
Zoom out memiliki fungsi memperkecil tampilan map.
Hide memiliki fungsi untuk menghilangkan/menyembunyikan marker
Delete all memiliki fungsi untuk menghapus seluruh marker.

Selain kode program index.php diatas, terdapat kode program yang lain,
yang berfungsi sebagai penghubungr antara database yang digunakan dengan
halaman utama yang didalamnya terdapat pula perintah-perintah query sql yang
akan digunakan, semua itu disimpan dalam web-service.php.

B. Web-service.php
Berikut merupakan kode program dari web-service.php:
<?php
error_reporting(0);

//query ke database
function query($sql)
{
$link = mysql_connect("localhost","root","");
if($link)
{
mysql_select_db("db_petarumah");
return mysql_query($sql);
}
}

if($_REQUEST[flag]=="fSavePoint")
{
$_POST[lat] = round($_POST[lat]*10e5)/10e5;
$_POST[lng] = round($_POST[lng]*10e5)/10e5;
if(query("INSERT INTO tb_data (lat,lng,nama,alamat)
VALUES
('$_POST[lat]','$_POST[lng]','$_POST[nama]','$_POST[alamat]')"))
{
echo "DATA SAVED";
}
else
{
echo "ERROR !!! "+mysql_error();
}
}

if($_REQUEST[flag]=="update")
{
if(query("UPDATE tb_data SET
nama='$_POST[nama]',alamat='$_POST[alamat]' WHERE lat=$_POST[lat]
AND lng=$_POST[lng]"))
{
echo "UPDATE SUCCESS !";
}
else
{
echo "ERROR !";
}
}

if($_REQUEST[flag]=="fLoadAllPoints")
{
$array_points = array();
$res = query("SELECT * FROM tb_data");
while($row = mysql_fetch_array($res))
{
$point =
array("lat"=>$row[lat],"lng"=>$row[lng]);
$array_points[] = $point;
}
echo json_encode($array_points);
}

if($_REQUEST[flag]=="fdelAll")
{
if(query("TRUNCATE tb_data"))
{
echo "WELL DONE !!";
}
else
{
echo "ERROR !";
}
}

if($_REQUEST[flag]=="fDelPoint")
{
if(query("DELETE FROM tb_data WHERE lat='$_POST[lat]'
AND lng='$_POST[lng]'"))
{
echo "DONE!";
}
else
{
echo "ERROR !";
}
}

if($_REQUEST[flag]=="fGetInfo")
{
$res = query("SELECT nama, alamat FROM tb_data WHERE
lat='$_POST[lat]' AND lng='$_POST[lng]'");
$loadi=array();
if($res)
{
$row = mysql_fetch_array($res);
?>

<table width="200px" border="1">
<tr align="center"><td
colspan=2>Info</td></tr>
<tr><td width="50">Nama </td><td><input
type="text" id="upnama" value="<?php echo $row[nama]; ?>"/></td>
</tr>
<tr><td width="50">Alamat </td><td><input
type="text" id="upalamat" value="<?php echo $row[alamat];
?>"/></td></tr>
</table>
<input type="button" id="update" value="Update"
/></td><td><input type="button" id="cancel" value="Cancel" />

<?php

}
else
{
echo "ERROR !";
}
}

?>
Kode Program 2. Web-service.php

Kode program web-service.php diatas memiliki banyak perintah yang akan
digunakan dalam tugas ini, perintah tersebut adalah koneksi database, perintah
add, delete point, get info, dan delete all. Berikut penjelasan masing-masing
perintah yang kode program nya memiliki fungsi tersendiri:
1. Perintah Koneksi Ke Database
<?php
error_reporting(0);

//query ke database
function query($sql)
{
$link = mysql_connect("localhost","root","");
if($link)
{
mysql_select_db("db_petarumah");
return mysql_query($sql);
}
}
Kode Program 3. Koneksi Ke Database

Kode program diatas digunakan untuk mengkoneksikan database yang
digunakan yaitu db_petarumah dengan halaman web. Berikut merupakan data
yang terdapat dalam db_petarumah.

Gambar 2. Tampilan Data db_petarumah pada tb_data

2. Perintah Add Point
Kode program dibawah ini digunakan untuk menambahkan informasi/data
pada saat menambahkan marker pada map. Berikut kode program perintah add
point:
if($_REQUEST[flag]=="fSavePoint")
{
if(query("INSERT INTO tb_data (lat,lng,nama,alamat)
VALUES
('$_POST[lat]','$_POST[lng]','$_POST[nama]','$_POST[alamat]')"))
{
echo "DATA SAVED";
}
else
{
echo "ERROR !!! "+mysql_error();
}
}
Kode Program 4. Perintah Add Point

Perintah diatas menunjukan adanya query insert pada tb_data yang
berfungsi untuk meninputkan/memasukkan data pada tb_data. Jika proses berhasil
maka akan muncul tampilan DATA SAVED, jika tidak berhasil maka akan
muncul tampilan ERROR !.

3. Perintah Update Info
Pada proses update info ini terjadi proses update info/data yang sudah
disimpan sebelumnya. Berikut kode program perintah update info:
if($_REQUEST[flag]=="update")
{
if(query("UPDATE tb_data SET
nama='$_POST[nama]',alamat='$_POST[alamat]' WHERE lat=$_POST[lat]
AND lng=$_POST[lng]"))
{
echo "UPDATE SUCCESS !";
}
else
{
echo "ERROR !";
}
}
Kode Program 5. Perintah Update Info

Di dalam proses ini terdapat perintah query update pada tb_data. Jika
query berhasil maka akan muncul tampilan UPDATE SUCCESS, jika tidak
maka akan muncul tampilan ERROR !.

4. Perintah Menampilkan Seluruh Point Marker
Perintah ini digunakan untuk menampilkan point marker pada map.
Perintah diatas menunjukan query select pada tb_data. Query select digunakan
untuk menampilkan informasi yang ada pada point tersebut. Berikut kode program
perintah menampilkan seluruh point marker:
if($_REQUEST[flag]=="fLoadAllPoints")
{
$array_points = array();
$res = query("SELECT * FROM tb_data");
while($row = mysql_fetch_array($res))
{
$point =
array("lat"=>$row[lat],"lng"=>$row[lng]);
$array_points[] = $point;
}
echo json_encode($array_points);
}
Kode Program 6. Perintah Menampilkan Seluruh Point Marker

5. Perintah Menghapus Semua Point Marker
Perintah ini digunakan untuk menghapus semua point marker pada map.
Query yang digunakan adalah truncate pada tb_data. Jika query berhasil maka
muncul tampilan WELL DONE, jika tidak maka muncul tampilan ERROR !.
Berikut merupakan kode program perintah menghapus semua point marker:
if($_REQUEST[flag]=="fdelAll")
{
if(query("TRUNCATE tb_data"))
{
echo "WELL DONE !!";
}
else
{
echo "ERROR !";
}
}
Kode Program 7. Perintah Menghapus Semua Point Marker

6. Perintah Menghapus Point Marker
Perintah ini digunakan untuk menghapus salah satu point marker saja pada
map, tidak semua point marker seperti pada perintah Menghapus Semua Point
Marker. Jika query berhasil maka muncul tampilan DONE ! Jika tidak maka
muncul tampilan ERROR !. Berikut merupakan kode program perintah
menghapus point marker:
if($_REQUEST[flag]=="fDelPoint")
{
if(query("DELETE FROM tb_data WHERE lat='$_POST[lat]'
AND lng='$_POST[lng]'"))
{
echo "DONE!";
}
else
{
echo "ERROR !";
}
}
Kode Program 8. Perintah Menghapus Point Marker

7. Perintah Menampilkan Info
Perintah ini digunakan untuk menampilkan informasi yang ada pada titik
point marker. Informasi ini akan uncul saat point marker di klik, maka akan
muncul jendela form yang berisi nama dan alamat pada titik latitude dan
longitude, jika tidak ada tampilan info maka akan muncul tampilan ERROR !.
Berikut merupakan perintah menampilkan info pada marker:
if($_REQUEST[flag]=="fGetInfo")
{
$res = query("SELECT nama, alamat FROM tb_data WHERE
lat='$_POST[lat]' AND lng='$_POST[lng]'");
$loadi=array();
if($res)
{
$row = mysql_fetch_array($res);
?>

<table width="200px" border="1">
<tr align="center"><td
colspan=2>Info</td></tr>
<tr><td width="50">Nama </td><td><input
type="text" id="upnama" value="<?php echo $row[nama]; ?>"/></td>
</tr>
<tr><td width="50">Alamat </td><td><input
type="text" id="upalamat" value="<?php echo $row[alamat];
?>"/></td></tr>
</table>
<input type="button" id="update" value="Update"
/></td><td><input type="button" id="cancel" value="Cancel" />

<?php

}
else
{
echo "ERROR !";
}
}
Kode Program 9. Perintah Menampilkan Info

Selain dua kode program yang telah dijelaskan diatas yaitu index.php dan
web-service.php, digunakan pula jquery, markerclausterer, dan java script.

C. gmaps-cluster.js
Dibawah ini akan dipaparkan kode program dari gmaps-cluster.js, yang
merupakan java script yang mengatur fungsi perintah-perintah pada web-
service.php. kode program ini berisi fungsi map, fungsi masing-masing button
pada index,php serta fungsi marker. Fungsi marker ini mencakup delete point, add
point, get info, dan update info. Berikut merupakan kode program dari gmaps-
cluster.js sebagai perintah java script.
$(document).ready(function(){
var is_clusterclicked = false;
var gmaps = google.maps;
var image = {
url: 'neon.png'
};
var mapOptions = {
zoom: 19,
disableDefaultUI:true,
draggable:true,
center: new gmaps.LatLng(-8.671366,115.204207)
};
map = new
gmaps.Map(document.getElementById('peta'),mapOptions);
infoWindow = new gmaps.InfoWindow();

//marker cluster library
var arrMarker = new
MarkerClusterer(map,false,{'gridSize':20,'averageCenter':true,'max
Zoom':18});

function addMarker(latLng){
var marker = new gmaps.Marker({
position:latLng,
map:map,
icon:image
});

//get info from database
gmaps.event.addListener(marker,'click',function(event)
{
$.post('web-
service.php',{"flag":"fGetInfo","lat":+event.latLng.lat(),"lng":+e
vent.latLng.lng()},function(data)
{
//alert(data);
infoWindow.setPosition(event.latLng);
infoWindow.setContent(data);
infoWindow.open(map);
});

$(document).on('click', '#update',function(e)
{
var
nama=document.getElementById('upnama').value;
var
alamat=document.getElementById('upalamat').value;
$.post('web-
service.php',{"flag":"update","lat":+latLng.lat(),"lng":+latLng.ln
g(),"nama":''+nama+'',"alamat":''+alamat+''},function(data)
{
alert(data);
infoWindow.close();
});
e.handled = true;
});
$(document).on('click', '#cancel',function(e)
{
infoWindow.close();
});
});

$('#upd').click(function()
{
alert('a');
});

//delete marker
gmaps.event.addListener(marker,'rightclick',function(){
for(i=0;i<arrMarker.markers_.length;i++){
if(arrMarker.markers_[i]==marker){
//proses penghapusan
arrMarker.markers_[i].setMap(null);
arrMarker.markers_.splice(i,1);

$('#nummarker').text(arrMarker.markers_.length);
$.post('web-
service.php',{"flag":"fDelPoint","lat":+latLng.lat(),"lng":+latLng
.lng()},function(data){
alert(data);
});
break;
}
}
});
arrMarker.markers_.push(marker);
$('#nummarker').text(arrMarker.markers_.length);
}

//event click on map
gmaps.event.addListener(map,'click',function(event)
{
if(!is_clusterclicked)
{
$('#infoDiv').fadeIn();

/*$('#ok').click(function()
{
var
nama=document.getElementById('nama').value;
var
alamat=document.getElementById('alamat').value;
$.post('web-
service.php',{"flag":"fSavePoint","lat":+event.latLng.lat(),"lng":
+event.latLng.lng(),"nama":''+nama+'',"alamat":''+alamat+''},funct
ion(data){
alert(data);
addMarker(event.latLng);
});

$('#infoDiv').fadeOut();
});

}*/
$("#ok").unbind('click').click(function()
{
var
nama=document.getElementById('nama').value;
var
alamat=document.getElementById('alamat').value;
$.post('web-
service.php',{"flag":"fSavePoint","lat":+event.latLng.lat(),"lng":
+event.latLng.lng(),"nama":''+nama+'',"alamat":''+alamat+''},funct
ion(data){
alert(data);
addMarker(event.latLng);
});

});

$("#cancel").unbind('click').click(function()
{
});
}
is_clusterclicked = false;
});

//cluster is on click ?
gmaps.event.addListener(arrMarker,'clusterclick',function(cl
uster){
is_clusterclicked = true;
});

//event pergeseran mouse
gmaps.event.addListener(map,'mousemove',function(event){
$('#koordinat').text(event.latLng.toString());
});

//load all marker from database /json
$.post('web-
service.php',{"flag":"fLoadAllPoints"},function(data){
for(i=0;i<data.length;i++){
addMarker(new
gmaps.LatLng(data[i].lat,data[i].lng));
}
},'json');

$('#btnZIn').click(function(){
map.setZoom(map.getZoom()+1);
});
$('#btnZOut').click(function(){
map.setZoom(map.getZoom()-1);
});
var isShow = true;
$('#showHideMarker').click(function(){
for(i=0;i<arrMarker.markers_.length;i++){
if(isShow){
arrMarker.markers_[i].setMap(null);
}else{
arrMarker.markers_[i].setMap(map);
}
}
if(isShow){
$('#showHideMarker').val('Show');
}else{
$('#showHideMarker').val('Hide');
}
isShow = !isShow;

});
});
Kode Program 10. Gmaps-cluster.js

TAMPILAN PROGRAM
a) Tampilan awal :

Gambar 3. Tampilan Utama

Tampilan utama diatas menampilkan map yang berisi point marker yang
datanya didapat dari database. Terdapat 10 data pada database sehingga terdapat
10 point marker juga pada map.

b) Tampilan Add Marker

Gambar 4. Tampilan Add Marker
Tampilan diatas merupakan perintah add marker. Apabila cursor mengklik
bagian dari map, maka akan muncul tampilan seperti diatas.
Tampilan dibawah ini merupakan tampilan ketika kita menambahkan
marker dan mengisi datanya.

Gambar 5. Tampilan Mengisi Info Pada Add Marker

Ketika info/data dirasa sudah benar maka klik OK untuk melanjutkan
melakukan add marker, apabila data sudah tersimpan maka muncul tampilan
seperti dibawah ini:

Gambar 6. Tampilan Data Tersimpan
Setelah data tersimpan, maka akan muncul marker baru pada map,
tampilannya adalah sebagai berikut:

Gambar 7. Tampilan Marker yang Baru Ditambahkan

Apabila pada map terdapat penambahan marker, maka terdapat
penambahan data pula pada database, yaitu dapat dilihat pada id ke 11. Berikut
tampilannya:

Gambar 8. Tampilan Pernambahan Data Pada Database

c) Update Info Marker
Tampilan dibawah ini merupakan proses update informasi point marker.
Pertama, pilih marker yang akan diupdate datanya, dalam hal ini saya memilih
marker Sate Padang Syukur, seperti gambar dibawah ini:

Gambar 9. Tampilan Marker

Setelah memilik marker yang akan di update datanya, maka diinputkanlah
data baru yang ingin digunakan, dalam hal ini saya mengganti Sate Padang
Syukur dengan Sate Padang dan Ketupat Sayur Syukur, seperti gambar dibawah
ini:

Gambar 10. Tampilan Pada Saat Update Data

Apabila update data sudah selesai maka klik Button Update pada tampilan
diatas dan akan muncul tampilan seperti dibawah ini:

Gambar 11. Tampilan Update Data Sukses

Setelah update data pada tampilan map berhasil dilakukan, maka data pada
database akan ter-update juga, berikut tampilan database yang terupdate:

Gambar 12. Tampilan Data yang Baru Pada Database

d) Floating Point
Tampilan dibawah ini adalah tampilan floating point marker. Floating
point ini berfungsi untuk mencegah terjadinya penumpukan marker.

Gambar 13. Floating Point
e) Menghapus Point Marker
Tampilan dibawah ini adalah tampilan delete sukses. Proses delete terjadi
apabila user mengklik kanan pada salah satu point marker. Jika proses delete
berhasil maka akan muncul tampilan dibawah ini.

Gambar 14. Tampilan Delete Point Marker Berhasil

Untuk membuktikan bahwa point marker diatas sudah terhapus adalah
dapat dilihat pada tampilan sebelum menghapus point marker. Dapat dilihat pada
gambar dibawah ini bahwa marker yang dihapus adalah marker yang berisi data
mengenai Tri Star Motor. Tampilannya adalah:

G I S

Diunggah oleh

Informasi Dokumen

Deskripsi:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Deskripsi:

Hak Cipta:

Format Tersedia

G I S

Judul Asli:

Diunggah oleh

Deskripsi:

Hak Cipta:

Format Tersedia

Tugas 5

Sis. Informasi Geografis Web dan Mobile

Anda mungkin juga menyukai