WEBGIS Menggunakan Google Map, MySQL dan PHP

by Bayu Yanuargi, SSi

NOTE : POSTINGAN INI SAYA ULANG KARENA ADA BEBERAPA FEEDBACK MENGENAI PETA YANG TIDAK BISA TAMPIL (Silahkan di koreksi untuk Key API Script yang ada pada Index.html script : "https://maps.googleapis.com/maps/api/js?key=GOOGLE API KEY ANDA&callback=initMap" )

Bagi hampir semua orang, resume adalah sesuatu yang sangat penting, baik itu bagi pencari kerja, project ataupun professional. Sebagai seorang yang berjiwa Peta, maka harusnya resume atau portfolio kita bisa diimplementasikan kedalam peta, terutama peta digital berbasis WEB, seperti dalam portfolio saya dalam http://bayuyanuargi.000webhostapp.com. Dalam kesempatan kali ini saya akan membahas secara mendasar bagaimana menampilkan pengalaman project kedalam bentuk spasial menggunakan Google Map API's.

Konsep utama dalam tutorial kali ini adalah menampilkan data atau daftar project yang pernah kita kerjakan dalam bentuk spasial berbasis webgis dengan menampilkan informasi detil dalam bentuk infowindow seperti gambar di bawah ini.

Baik kita mulai dari pembuatan database untuk project kita ini menggunakan MySQL database. Sebenarnya kita bisa saja membuat KML dengan menggunakan ArcGIS tapi database tersebut bersifat statis, artinya jika akan melakukan update kita harus mengulang langkah dari awal.Dengan menggunakan MySQL maka kita bisa melakukan update, seperti penambahan data project, delete ataupun update dengan webbased setiap saat dan dimana saja.

Untuk membuat database MySQL, kita bisa melakukan secara offline di komputer kita menggunakan XAMPP, atau kita bisa menggunakan fasilitas webhosting baik yang berbayar maupun yang gratis seperti 000webhostapp.com seperti yang penulis gunakan.

Pada kesempatan ini kita akan menggunakan XAMPP untuk membuat database lokal di komputer kita, untuk itu kita perlu mendownload XAMPP silahkan download disini  Jika sudah download dan install silahkan running XAMPP control panel dan start APACHE dan MYSQL seperti gambar di bawah ini

 

Setelah berhasil di running dan distart, silahkan buka browser anda dan ketik http://localhost/phpmyadmin/ sehingga akan muncul seperti gambar di bawah ini 

 
Baik, setelah itu kita bergeser sedikit ke Data kita, untuk lebih mudahnya kita list dulu project yang pernah kita kerjakan menggunakan excel, untuk latihan ini, silahkan gunakan excel saya sebagai contoh Download di SINI . Dalam excel tersebut bisa dilihat banyak informasi mengenai project kita, mulai dari nama project hingga Koordinat.

Jika anda lihat pada kolom photo, disitu saya menggunakan dropbox sebagai fasilitas penyimpanan foto. Sebenarnya kita bisa menyimpan foto dihosting 000webhostapp, tapi itu akan mengurangi jatah space kita yang sedikit karena gratisan. Anda bebas menggunakan webhosting anda atau mau menggunakan dropbox seperti saya.

Jika anda menggunakan dropbox, maka hyperlink yang akan digunakan harus sedikit di modifikasi, saat kita share tautan / link menggunakan dropbox, maka dropbox akan memberi kita link seperti ini https://www.dropbox.com/s/r54tyig422wcz84/Asterbintan.JPG?dl=0 . Link tersebut adalah link untuk mendownload bukan link untuk menampilkan, sedangkan yang kita butuhkan adalah link untuk menampilkan foto bukan mendownload foto.

Untuk itu kita perlu merubah komposisi link tersebut menjadi : https://dl.dropboxusercontent.com/s/r54tyig422wcz84/Asterbintan.JPG . Pada link tersebut kita mengganti https://www/dropbox.com dengan https://dl.dropboxusercontent.com dan menghapus ?dl=0

Kita akan membuat database baru menggunakan phpmyadmi, klik new pada menu, lalu masukkan nama database, dalam hal ini kita akan namakan "Project"

 

Lalu setelah database Project sudah dibuat, kemudian kita akan mengimport file excel yang sudah kita buat tadi kedalam database Project kita yang baru, silahkan ikuti langkah di bawah ini :

1. Sebelum kita import file project list yang kita miliki, kita perlu menconvert file excel kita kedalam bentuk CSV, silahkan convert dulu
2. Setelah berhasil terconvert,pilih database Project (klik)
3. Klik pada IMPORT
4. Klik "Pilih File" untuk memilih file yang akan di import (CSV)
5. Scroll ke bawah Check "The first line contains the table column name......."
6. Check "Update data when duplicate...................."
7. Klik GO / KIRIM

Hasil dari import tersebut adalah sekarang kita telah mempunya database project kita dalam MySQL. Anda dapat melakukan untuk semua jenis database. Hasilnya seperti gambar di bawah ini, kita bisa melakukan add data, update dan delete data menggunakan MySQL dan realtime langsung update kedalam webgis kita

 

Baik setelah kita selesai melakukan pembuatan database menggunakan MySQL, kita akan melakukan pemrograman PHP menggunakan PHP editor, atau notepad++ lalu kita upload ke webhost kita. Oya sebelumnya kita harus memperoleh credential key untuk GOOGLE API's    Silahkan ikuti langkah-langkahnya lalu "enabled" kan key untuk

1. Klik pada menu lalu pilih API Manager
2. Klik pada Library
3. Klik pada Google Map JavaScript API
4. Klik Enable pada bagian atas
5. Lalu klik Credential untuk mendapat credential API Key

Pastikan JAVASCRIPT MAP API di aktifkan, silahkan masuk ke menu "Library" dan ikuti langkah berikut :

Setelah semua siap, selanjutnya kita akan melakukan coding untuk membuat webgis portfolio kita. Silahkan gunakan PHP atau HTML Editor untuk melakukan coding tersebut, yang paling gampang silahkan gunakan notepad++. 

Untuk membuat webgis berdasarkan database yang telah kita buat minimal kita memerlukan tiga file :

1. php_dbinfo.php yang digunakan sebagai pemberi akses ke dalam database mysql kita, simpan di folder ..:/xampp/htdocs/map (buat new folder "map" di dalam htdocs folder)
2. dbexport.php yang akan digunakan sebagai converter database simpan di folder ..:/xampp/htdocs/map
3. index.html sebagai file webgis kita untuk menampilkan petanya simpan di folder ..:/xampp/htdocs/map

Prinsip kerjanya adalah :

php_dbinfo.php ini berisi tentang credential yang telah kita buat untuk database kita tadi, yang meliputi Username, Password, database name. Silahkan gunakan script PHP dibawah ini simpan dengan nama dbinfo.php pada notepad++

<?php
$username="root";
$password="root";
$database="project";
?>

dbexport.php adalah file yang digunakan untuk melakukan convert data mysql menjadi XML yang kemudian akan dibaca oleh index.html sebagai titik-titik data dan ditampilkan dalam webgis kita. Secara umum dbexport ini tidak menghasilkan file tapi dia sebagai tool pembacaan oleh file HTML kita. Silahkan copy paste script di bawah ini. 

<?php
require("php_dbinfo.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}

// Opens a connection to a MySQL server
$connection=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysqli_error());
}

// Set the active MySQL database
$db_selected = mysqli_select_db($connection , $database);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysqli_connect_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM table_p WHERE 1";
$result = mysqli_query($connection , $query);
if (!$result) {
  die('Invalid query: ' . mysqli_connect_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<table_p>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
  // Add to XML document node
  echo '<project ';
  echo 'Project="' . parseToXML($row['Project']) . '" ';
  echo 'Project2="' . parseToXML($row['Project2']) . '" ';
  echo 'Scope="' . $row['Scope'] . '" ';
  echo 'Area="' . $row['Area'] . '" ';
  echo 'Position="' . $row['Position'] . '" ';
  echo 'Company="' . $row['Company'] . '" ';
  echo 'Years="' . $row['Years'] . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'Photo="' . $row['Photo'] . '" ';
  echo '/>';
}

// End XML file
echo '</table_p>';

?>

Mari kita bahas mengenai script di atas sedikit saja, kita mulai dari baris kedua kita bisa lihat script : require("php_dbinfo.php") artinya untuk menjalankan applikasi ini dia akan melihat mengakses file "php_dbinfo.php" yang dalam hal ini akan digunakan sebagai pintu masuk kedalam database MySQL kita. Jika anda menggunakan nama lain selain "php_dbinfo.php" maka silahkan ganti namanya sesuai dengan file name yang anda gunakan.

Sekarang pada baris 26 dan seterusnya kita harus menentukan nama table yang akan kita gunakan dalam operasi ini, dalam contoh saya menggunakan nama "table_p", nama table ini dapat anda temukan pada mysql anda seperti pada gambar di bawah ini.

Silahkan ubah nama table sesuai dengan table yang anda miliki pada baris ke 26 dan seterusnya.

 

Setelah converter dibuat, sekarang waktunya kita membuat webgis dengan nama index.html. Sebenarnya namanya tidak harus index.html apalagi jika webgis ini bukanlah main page dari website kita. Index.html adalah file yang akan dibuka pertama kali jika kita mengetikkan alamat website, contohnya jika kita membuka http://bayuyanuargi.000webhostapp.com maka kita sebenarnya sedang membuka file index.html yang ada. Jadi itu default.

Jadi jika halaman utama dari website kita bukanlah webgis yang sedang kita buat, maka kita bebas menggunakan nama yang lain, misalnya map.html, peta.html dsb, dan kita buatkan link di halaman utama website kita untuk membuka file tersebut.

Baik tidak usah basa-basi, kita langsung saja membuat webgis kita yang dalam hal ini kita namakan index.html . 

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Professional Portfolio Bayu Yanuargi</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      var customLabel = {
        Province: {
          label: 'P'
        },
        Regency: {
          label: 'R'
        },
        National: {
          label: 'N'
        },
        District: {
          label: 'D'
        }      
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-1.3327011, 114.5706969),
          zoom: 5
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('dbexport.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('project');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var Project = markerElem.getAttribute('Project');
              var Project2 = markerElem.getAttribute('Project2');
              var Scope = markerElem.getAttribute('Scope');
              var Area = markerElem.getAttribute('Area');
              var Position = markerElem.getAttribute('Position');
              var Company = markerElem.getAttribute('Company');
              var Years = markerElem.getAttribute('Years');
              var marker_image = markerElem.getAttribute('Photo');    
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');                
                
              var x = document.createElement('IMG');   
              x.src = marker_image            
              x.setAttribute('width', '300');
              x.setAttribute('width', '200');
              document.body.appendChild(x);
              infowincontent.appendChild(x);
              infowincontent.appendChild(document.createElement('br'));            


              var strong = document.createElement('strong');
              strong.textContent = Project
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));
            
              var strong = document.createElement('strong');
              strong.textContent = Project2
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));
            
              var text = document.createElement('text');
              text.textContent = Area
              infowincontent.appendChild(text);
              infowincontent.appendChild(document.createElement('br'));
            
              var text = document.createElement('text');
              text.textContent = Position
              infowincontent.appendChild(text);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = Company
              infowincontent.appendChild(text);
              infowincontent.appendChild(document.createElement('br'));
            
            
              var icon = customLabel[Scope] || {};
              var marker = new google.maps.Marker({
            
                map: map,
                position: point,
                label: icon.label

              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                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>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=GOOGLE API KEY&callback=initMap">
    </script>
  </body>
</html>

Silahkan copy paste script di atas, jika sudah mari kita bahas beberapa hal penting dalam script tersebut.

Yang pertama pada baris 25 - 38 anda akan melihat  script yang dibuka dengan "var customLabel = { " dimana script ini akan membuat label pada peta kita berdasarkan kategori yang ada dalam kolom scope. Anda bisa mengganti label sesuai keinginan anda dengan mengganti nama labelnya sesuai dengan attribute yang ada dalam kolom yang anda inginkan. 

Kebetulan attribute dalam kolom scope terdiri dari "Province, Regency, National, dan District" . Untuk menentukan nama kolom silahkan dilihat pada baris 101 dengan script "var icon = customLabel[Scope] || {};"  [Scope] adalah judul / nama kolom, jika anda ingin mengganti label yang ditampilkan, silahkan ganti nama kolom yang diinginkan.

Kita lanjutkan pada baris 42 - 43 yang berisi script sebagai berikut ini "center:  new google.maps.LatLng(-1.3327011, 114.5706969), zoom: 5 ". Script tersebut adalah untuk menentukan koordinat center dari peta yang akan dibuka termasuk juga leve zooming nya, semakin kecil angka zoom nya semakin tinggi sudut viewnya.

Pada baris ke 48 "downloadUrl('dbexport.php', function(data) { " adalah script untuk membuka file dbexport.php yang sudah kita buat sebelumnya.

Pastikan penamaan variablenya harus diperhatikan konektifitas antara index.html dan dbexport.php

Kemudian pada baris ke 52 - 59 adalah informasi nama table yang akan kita gunakan untuk menampilkan marker dan info window. Info window adalah informasi yang ditampilkan saat kita melakukan klik pada marker yang ada seperti gambar di bawah ini.

Untuk baris ke 60 - 62 adalah lokasi dari marker atau titik-titik data kita berdasarkan kolom latitude dan longitude yang ada dalam database kita.

Selanjutnya pada baris ke 64 - 98 adalah informasi apa saja yang ingin ditampilkan saat info window tampil.

Yang terpenting adalah pada baris ke 138,   "src="https://maps.googleapis.com/maps/api/js?key=GOOGLE API KEY=initMap">" silahkan masukkan google api key yang sudah kita buat udah kita buat. Hapus kata GOOGLE API KEY dan masukkan key anda.

Silahkan simpan semua file kedalam folder ..:\xampp\htdocs\map

Dan selesai, silahkan coba, jika ada kesulitan silahkan comment di bawah ini. atau email saya di bayu.yanuargi@outlook.com. 

Contoh hasilnya akan seperti ini.

Terima Kasih, jika berkenan mohon di share ke rekan2x lainnya