Dengan adanya bahasa pemrograman PHP dan database MySQL (atau database lain), pembuatan maps akan lebih mudah terutama dalam menampilkan titik-titik yang bersifat dinamis. PHP dapat kita guanakan sebagai proses dalam pengambilan data pada database, sedangkan MySQL dapat digunakan dalam penyimpanan lokasi. Membuat Database CREATE TABLE `tabel_data` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `latitude` decimal(10,7) NOT NULL, `longitude` decimal(10,7) NOT NULL, `keterangan` varchar(255) NOT NULL, `kategori` enum('SPBU','ATM','BANK') NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; Membuat Koneksi Database dan Fungsi CRUD Buat file koneksi dengan nama file conf.php, file ini berisi koneksi ke database dan fungsi untuk CRUD pada aplikasi. Silahkan ketik kode program dibawah ini.<?php /** * Dibuat Oleh Hady Eka Saputra || www.java-sc.com */ class konfigurasi { public function __construct() { try { $host = "localhost"; $db = "tutor_gmaps"; $user = "root"; $pass = ""; $this->db = new PDO('mysql:host='.$host.';dbname='.$db.'',''.$user.'',''.$pass.''); $this->db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // echo "Berhasil terkoneksi !"; } catch (PDOException $e) { echo $e->getMessage(); } } public function getXMLData($tabel){ $getXMLData = $this->db->prepare("SELECT * FROM $tabel"); $getXMLData->execute(); return $getXMLData; } public function tampil($tabel , $id){ $tampil = $this->db->prepare("SELECT * FROM $tabel ORDER BY $id DESC"); $tampil->execute(); return $tampil; } public function tampilBerdasarkanData($tabel , $kondisi ,$id){ $tampil = $this->db->prepare("SELECT * FROM $tabel WHERE $kondisi='$id'"); $tampil->execute(); return $tampil; } public function tambah($tabel , $latitude,$longitude,$keterangan,$kategori){ $tambah = $this->db->prepare("INSERT INTO $tabel (id, latitude, longitude, keterangan, kategori) VALUES (NULL,'$latitude','$longitude','$keterangan','$kategori') "); $tambah->execute(); return $tambah; } public function ubah($tabel , $latitude,$longitude,$keterangan,$kategori,$kondisi,$nilai){ $ubah = $this->db->prepare("UPDATE $tabel SET latitude='$latitude', longitude='$longitude', keterangan='$keterangan', kategori='$kategori' WHERE $kondisi='$nilai'"); $ubah->execute(); return $ubah; } public function hapus($tabel , $kondisi,$nilai){ $hapus = $this->db->prepare("DELETE FROM $tabel WHERE $kondisi='$nilai'"); $hapus->execute(); return $hapus; } } ?> Membuat File Data XML <?php include 'conf.php'; $konfigurasi = new konfigurasi(); $getData = $konfigurasi->getXMLData('tabel_data'); header("Content-type: text/xml"); try { echo "<markers>"; while ($result = $getData->fetch(PDO::FETCH_OBJ)) { if ($getData->rowCount() < 1) { echo "<marker Data Kosong />"; } else { echo "<marker "; echo "a='" . $result->id. "' "; echo "b='" . $result->latitude. "' "; echo "c='" . $result->longitude. "' "; echo "d='" . $result->keterangan. "' "; echo "e='" . $result->kategori. "' "; echo "/>"; } } echo "</markers>"; } catch (PDOException $e) { echo $e->getMessage(); } ?> Design dan Komponen Pada pembuatan design CRUD yang digunakan dalam pembuatan aplikasi maps, anda dapat menggunakan file komponen berikutDownload Komponen File Header ><head> <title>Java Sc Developer</title> <link rel="stylesheet" type="text/css" href="assets/bootstrap.css"> <link rel="stylesheet" type="text/css" href="assets/dataTables.bootstrap.css"> <script type="text/javascript" src="assets/jquery-1.11.1.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=ISI DENGAN API KEY ANDA&callback=initMap"> </script> </head> File Footer File footer ini berisi semua script yang akan digunakan pada aplikasi. buatlah sebuah file footer.php dan ketikan kode program dibawah ini.<script src="https://use.fontawesome.com/2642b88c56.js"></script> <script type="text/javascript" src="assets/bootstrap.js"></script> <script type="text/javascript" src="assets/jquery.dataTables.js"></script> <script type="text/javascript" src="assets/dataTables.bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#table').DataTable({ responsive: true, paging: true, }); }); </script> Membuat Halaman Utama <!DOCTYPE html> <?php if (isset($_GET['page']) == null) { header("location:index.php?page=home"); } include 'conf.php'; $konfigurasi = new konfigurasi(); ?> <html> <?php include 'header.php'; ?> <body style="margin-top:10px"> <div class="container"> <?php switch ($_GET['page']) { case 'kelola': include 'input.php'; break; default: include 'home.php'; break; } ?> </div> </body> <?php include 'footer.php'; ?> </html> Membuat Page Home Buatlah sebuah file bernama home.php dalam folder dan kemudian masukan source code berikut ini.<style type="text/css"> .gm-style-iw {color: #000000;margin: 0 0 0 0} .gmnoprint div {color: #000000;} </style> <script type="text/javascript"> function initMap() { var map; var styleGMaps = [ { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "invert_lightness": true }, { "gamma": 1.96 }, { "lightness": -65 }, { "saturation": 53 }, { "hue": "#00e5ff" }, { "weight": 0.2 }, { "color": "#dd6630" } ] },{ "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "invert_lightness": true }, { "lightness": 33 }, { "gamma": 0.84 }, { "hue": "#0008ff" }, { "visibility": "on" }, { "saturation": 38 }, { "weight": 2.2 }, { "color": "#4f90f4" } ] },{ "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [ { "visibility": "on" }, { "invert_lightness": true }, { "color": "#ffb147" }, { "saturation": 23 }, { "hue": "#ff9100" }, { "lightness": -30 }, { "gamma": 4.09 }, { "weight": 2.1 } ] },{ "featureType": "landscape.natural", "elementType": "geometry.fill", "stylers": [ { "visibility": "on" }, { "lightness": -14 }, { "color": "#5cae8e" }, { "weight": 0.4 }, { "saturation": 34 }, { "gamma": 1.42 } ] } ]; var styled = new google.maps.StyledMapType(styleGMaps, {name: "Styled Map"}); var mapOptions = { center: {lat: 0.5163256, lng: 101.4437629}, zoom:12, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] }, mapTypeControl: false, zoomControl: false, scaleControl: false, streetViewControl: false, rotateControl: false, fullscreenControl: false }; var mapAwal = { center: {lat: 0.5163256, lng: 101.4437629}, zoom: 12 , mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'),mapOptions); map.mapTypes.set('map_style', styled); map.setMapTypeId('map_style'); var infoWindow = new google.maps.InfoWindow; downloadUrl("koordinat.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var latitude = parseFloat(markers[i].getAttribute("b")); var longitude = parseFloat(markers[i].getAttribute("c")); var keterangan = markers[i].getAttribute("d"); var kategori = markers[i].getAttribute("e"); var icon = 'assets/'+kategori+'.png' || {}; var marker = new google.maps.Marker({ map: map, position: {lat:latitude,lng:longitude}, icon: icon, }); bindInfoWindow(marker, map, infoWindow, keterangan); } }); } function bindInfoWindow(marker, map, infoWindow, keterangan) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(keterangan); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} </script> <div class="row"> <div class="col-md-12"> <div class="panel panel-success"> <div class="panel-heading"> <center><h4>LOKASI PELAYANAN UMUM DI KOTA PEKANBARU</h4></center> </div> <div class="panel-body"> <a href="index.php?page=kelola" class="btn btn-warning">Halaman Kelola</a> <button class="btn btn-danger" onclick="location.reload()">Refresh Maps</button></br> </br> <div id="map" style="width:100%;height:450px" ></div> </div> </div> </div> </div> Membuat Page CRUD Terakhir adalah kode program untuk crud-nya, buatlah file dengan nama input.php dan isikan dengan kode program dibawah ini.<div class="col-md-12">
<div class="row">
<center><h3>Tutorials By Java Source Code</h3></center>
<p class="alert alert-info"><strong>Kelola Data Lokasi</strong> <a href="index.php?page=kelola&aksi=tambah" class="btn btn-primary"><i class="fa fa-plus"></i> Tambah</a> <a href="index.php?page=home" class="btn btn-success"><i class="fa fa-arrow-left"></i> Kembali</a></p>
</div>
<div class="row">
<?php
if ($_GET['page'] == 'kelola' && isset($_GET['hapus']) == 'true' && !empty($_GET['data']) ) {
try {
$delete = $konfigurasi->hapus('tabel_data','id',$_GET['data']);
if ($delete) {
echo "<script>alert('Data Lokasi Berhasil Dihapus');window.location.href = 'index.php?page=kelola'</script>";
}
}
catch (PDOException $e) {
echo $e->getMessage();
}
}
else if ($_GET['page'] == 'kelola' && isset($_GET['aksi']) == 'tambah' && empty($_GET['data'])) {
if (isset($_POST['simpan'])) {
try {
$insert = $konfigurasi->tambah('tabel_data',$_POST['latitude'],$_POST['longitude'],$_POST['keterangan'],$_POST['kategori']);
if ($insert) {
echo "<script>alert('Data Lokasi Berhasil Disimpan');window.location.href = 'index.php?page=kelola'</script>";
}
}
catch (PDOException $e) {
echo $e->getMessage();
}
}
?>
<script type="text/javascript">
function updateMarkerPosition(latLng) {
document.getElementById('latitude').value = [latLng.lat()]
document.getElementById('longitude').value = [latLng.lng()]
}
function initMap(){
var map = new google.maps.Map(document.getElementById('maps'), {
zoom: 14,
center: new google.maps.LatLng(0.5163256, 101.4437629),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false, zoomControl: true,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false
});
var latLng = new google.maps.LatLng(0.5163256, 101.4437629);
var marker = new google.maps.Marker({
position : latLng,
title : 'lokasi',
map : map,
streetViewControl: false,
draggable : true,
});
updateMarkerPosition(latLng);
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
}
</script>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-6">
<form class="form-horizontal" method="POST" action="">
<div class="form-group">
<div class="col-md-12">
<input type="text" placeholder="Latitude" name="latitude" id="latitude" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" placeholder="Longitude" name="longitude" id="longitude" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<textarea class="form-control" name="keterangan" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<select class="form-control" name="kategori">
<option>ATM</option>
<option>BANK</option>
<option>SPBU</option>
</select>
</div>
</div>
<input type="submit" class="btn btn-success" name="simpan" value="SIMPAN">
<a href="index.php?page=kelola" class="btn btn-warning">BATAL</a>
</form>
</div>
<div class="col-md-6">
<div id="maps" style="width:100%;height:300px"></div>
</div>
</div>
</div>
</div>
<?php
}
else if ($_GET['page'] == 'kelola' && isset($_GET['aksi']) == 'edit' && !empty($_GET['data'])) {
$read = $konfigurasi->tampilBerdasarkanData('tabel_data','id',$_GET['data']);
$result = $read->fetch();
if (isset($_POST['ubah'])) {
try {
$update = $konfigurasi->ubah('tabel_data' , $_POST['latitude'],$_POST['longitude'],$_POST['keterangan'],$_POST['kategori'],'id',$_GET['data']);
if ($update) {
echo "<script>alert('Data Lokasi Berhasil Diubah');window.location.href = 'index.php?page=kelola'</script>";
}
}
catch (PDOException $e) {
echo $e->getMessage();
}
}
?>
<script type="text/javascript">
function updateMarkerPosition(latLng) {
document.getElementById('latitude').value = [latLng.lat()]
document.getElementById('longitude').value = [latLng.lng()]
}
function initMap(){
var map = new google.maps.Map(document.getElementById('maps'), {
zoom: 14,
center: new google.maps.LatLng(<?php echo $result['latitude'];?>, <?php echo $result['longitude']; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
zoomControl: true,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false
});
var latLng = new google.maps.LatLng(<?php echo $result['latitude'];?>, <?php echo $result['longitude']; ?>);
var marker = new google.maps.Marker({
position : latLng,
title : 'lokasi',
map : map,
streetViewControl: false,
draggable : true,
});
updateMarkerPosition(latLng);
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
}
</script>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-6">
<form class="form-horizontal" method="POST" action="">
<div class="form-group">
<div class="col-md-12">
<input type="text" placeholder="Latitude" name="latitude" id="latitude" class="form-control" value="<?php echo $result['latitude']; ?>">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" placeholder="Longitude" name="longitude" id="longitude" class="form-control" value="<?php echo $result['longitude']; ?>">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<textarea class="form-control" name="keterangan" rows="3"><?php echo $result['keterangan']; ?></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<select class="form-control" name="kategori">
<?php
if ($result['kategori'] == "ATM") {
echo "
<option selected>ATM</option>
<option>BANK</option>
<option>SPBU</option>
";
}
else if ($result['kategori'] == "BANK") {
echo "
<option>ATM</option>
<option selected>BANK</option>
<option>SPBU</option>
";
}
else {
echo "
<option>ATM</option>
<option>BANK</option>
<option selected>SPBU</option>";
}
?>
</select>
</div>
</div>
<input type="submit" class="btn btn-success" name="ubah" value="UBAH">
<a href="index.php?page=kelola" class="btn btn-warning">BATAL</a>
</form>
</div>
<div class="col-md-6">
<div id="maps" style="width:100%;height:300px"></div>
</div>
</div>
</div>
</div>
<?php
}
?>
<table id="table" class="table table-responsive table-bordered table-striped">
<thead>
<th width="5%">No</th>
<th width="15%">Latitude</th>
<th width="15%">Longitude</th>
<th width="10%">Kategori</th>
<th>Keterangan</th>
<th width="5%">Ubah</th>
<th width="5%">Hapus</th>
</thead>
<tbody>
<?php
$read = $konfigurasi->tampil('tabel_data','id');
$no = 1;
while ($result = $read->fetch()) {
?>
&;nbsp <tr>
<td><?php echo $no++; ?></td>
<td><?php echo $result['latitude'];?></td>
<td><?php echo $result['longitude'];?></td>
<td><?php echo $result['kategori'];?></td>
<td><?php echo $result['keterangan'];?></td>
<td><a href="index.php?page=kelola&aksi=edit&data=<?php echo $result['id']; ?>" class="btn btn-info"><i class='fa fa-edit'></i></a></td>
  <td><a href="index.php?page=kelola&hapus=true&data=<?php echo $result['id']; ?>" class="btn btn-danger"><i class='fa fa-remove'></i></a></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div> Hasil Adapun hasil dari aplikasi ini seperti dibawah ini atau anda dapat akses pada laman berikut >> Demo << |