INTEGRASI PHP DAN MYSQL PADA GOOGLE MAP API

Catatan ini dikutip dari Google Developer (2009) yang merupakan langkah dasar untuk membangun sebuah aplikasi maps yang generate melalui bahasa pemrograman PHP dan Mysql.

Membangun Tabel Lokasi

Ketika kita membangun sebuah table di dalam Mysql yang ditujukan untuk pengembangan Google maps aplication kita harus memperhatikan beberapa aspek yakni dengen menyediakan kolom lat (latitude dalam bahasa indonesia berarti garis lintang) dan long (longitude berarti garis bujur),  kita dapat menspesifikasikan atribut tersebut sebagai float dengan ukuran (10,6). Itu berarti terdapat angka sebanyak 6 digit setelah desimal (tanda titik digunakan sebagai pengganti koma). Dan maksimal 4 digit sebelum desimal sebagai contoh -123.456789 derajat. Tabel tersebut juga harus memiliki idsebagai atribut yang didefinisikan sebagai primary key, dan juga atribut yang digunakan untuk menjelaskan tipe atau jenis tempat sebagai contoh restoran dan bar. Berikut adalah tampilan database melalui antarmuka yang terdapat dalam PhpMyadmin sebagimana tanpak pada gambar 2.5 ,

Gambar Membuat Tabel Dengan Menentukan parameter atribut (developer.google.com,2007)

Jika tidak memiliki akses pada phpMyadmin maka dapat menggunakan script berikut pada mysql commands,

CREATE TABLE `markers` (
 `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
 `name` VARCHAR( 60 ) NOT NULL ,
 `address` VARCHAR( 80 ) NOT NULL ,
 `lat` FLOAT( 10, 6 ) NOT NULL ,
 `lng` FLOAT( 10, 6 ) NOT NULL ,
 `type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

Mengisi Data Kedalam Tabel

Setelah membuat tabel ,maka waktunya untuk mengisinya dengan data. Berikut adalah 10 sample data tempat di Seatlle yang telah tersedia dibawah ini kita dapat mengimport kedalam tabel dengan beberapa jenis format, termasuk dengan menggunakan CSV(comma-sparated values). Microsoft Excel dan google Spreedsheet adalah salah satu aplikasi yang dapat melakukan eksport kedalam format CSV, sehingga akan lebih mudah melakukan exporting dan importing dari data dalam spreedsheets kedalam Mysql melalui format CSV.

Berikut adalah contoh data dalam format CSV,

Pan Africa Market,"1521 1st Ave, Seattle, WA", 47.608941,-122.340145,restaurant
Buddha Thai & Bar,"2222 2nd Ave, Seattle, WA", 47.613591,-122.344394,bar
The Melting Pot,"14 Mercer St, Seattle, WA", 47.624562,-122.356442,restaurant
Ipanema Grill,"1225 1st Ave, Seattle, WA", 47.606366,-122.337656,restaurant
Sake House,"2230 1st Ave, Seattle, WA", 47.612825,-122.34567,bar
Crab Pot,"1301 Alaskan Way, Seattle, WA", 47.605961,-122.34036,restaurant
Mama's Mexican Kitchen,"2234 2nd Ave, Seattle, WA", 47.613975,-122.345467,bar
Wingdome,"1416 E Olive Way, Seattle, WA", 47.617215,-122.326584,bar
Piroshky Piroshky,"1908 Pike pl, Seattle, WA", 47.610127,-122.342838,restaurant

Berikut adalah gambar mengenai cara mengimport csv kedalam Mysql:

Gambar  Proses Import File CSV kedalam Mysql (developer.google.com,2007)

Jika tidak memiliki fasilitas phpMyadmin maka dapat menggunakan script berikut pada SQL Commands,

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Pan Africa Market', '1521 1st Ave, Seattle, WA', '47.608941', '-122.340145', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Buddha Thai & Bar', '2222 2nd Ave, Seattle, WA', '47.613591', '-122.344394', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('The Melting Pot', '14 Mercer St, Seattle, WA', '47.624562', '-122.356442', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Ipanema Grill', '1225 1st Ave, Seattle, WA', '47.606366', '-122.337656', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Sake House', '2230 1st Ave, Seattle, WA', '47.612825', '-122.34567', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Crab Pot', '1301 Alaskan Way, Seattle, WA', '47.605961', '-122.34036', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Mama\'s Mexican Kitchen', '2234 2nd Ave, Seattle, WA', '47.613975', '-122.345467', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Wingdome', '1416 E Olive Way, Seattle, WA', '47.617215', '-122.326584', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Piroshky Piroshky', '1908 Pike pl, Seattle, WA', '47.610127', '-122.342838', 'restaurant');

Memproduksi Script XML dari PHP 

Pada titik ini kita harus membuat tabel marker yang berisi sample data. dan menulis beberapa stament PHP untuk mengexport data dalam tabel MySQL kedalam XML yang dapat dipanggil melalui asynchronous javascript dikenal sebagai AJAX. (Google Developer, 2013).
Pertama kita harus memasukan script berisi informasi koneksi kedalam file terpisah, hal ini pada umunya dilakukan untuk menjaga kerahasiaan informasi yang tidak ingin dibagikan.berikut contohnya:

<?
$username="username";
$password="password";
$database="username-databaseName";
?>

Proses parsing Mysql dengan menggunakan Echo pada PHP

Ketika menggunakan fungsi echo dalam melakukan conversi data dari Mysql ke XML , anda membutuhkan sebuah function yang berfungsi untuk mengencode beberapa special entities karakter seperti (<,>,”,’) agar lebih bersahabat dengan XML.

   
Dalam PHP, ketika pertama kali melakukan koneksi kedalam database maka kita akan mengeksekusi sebuah statmen SELECT * (‘*’ bermakna memilih semua) query yang berada dalam tabel marker . lalu mencetak (echo out) parent node marker kedalam XML,  dan mengulangi sisanya sehingga semua baris dieksekusi. Untuk setiap baris didalam tabel (setiap lokasi), kita membutuhkan sebuah function untuk melakukan parsing terhadap setiap special entities seperti yang terdapat pada alamat lokasi dan menutupnya dengan menggunakan tag marker (Google Developer, 2013).Script php yang dimaksudkan adalah seperti berikut (phpsqlajax_genxml.php):

<?php
require("phpsqlajax_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;
}

// Membuka koneksi
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
 die('Not connected : ' . mysql_error());
}

// Set database yang aktif
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
 die ('Can\'t use db : ' . mysql_error());
}

// Memilih semua baris pada tabel marker
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
 die('Invalid query: ' . mysql_error());
}

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

// Memulai XML dengan mencetak parent marker
echo '<markers>';

// Melakukan pengulangan untuk setiap node dibawah parent marker
while ($row = @mysql_fetch_assoc($result)){
 // Menambahkan kedalam XML
 echo '<marker ';
 echo 'name="' . parseToXML($row['name']) . '" ';
 echo 'address="' . parseToXML($row['address']) . '" ';
 echo 'lat="' . $row['lat'] . '" ';
 echo 'lng="' . $row['lng'] . '" ';
 echo 'type="' . $row['type'] . '" ';
 echo '/>';
}

// End XML
echo '</markers>';

?>

Mengecek XML yang Dihasilkan 
Panggil file phpsqlajax_genxml.php kedalam broswer untuk mengecek apakah hasil parsing sudah  valid. berikut adalah merupakan hasil cetak XML yang valid .

<markers>
<marker name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant"/>
<marker name="Buddha Thai & Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/>
<marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant"/>
<marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.606365" lng="-122.337654" type="restaurant"/>
<marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.612823" lng="-122.345673" type="bar"/>

<marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.605961" lng="-122.340363" type="restaurant"/>
<marker name="Mama's Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.613976" lng="-122.345467" type="bar"/>
<marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.617214" lng="-122.326584" type="bar"/>
<marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.610126" lng="-122.342834" type="restaurant"/>
</markers>

Membangun Maps 
Ketika hasil XML valid dan bekerja, maka langkah selanjutnya adalah membuat maps dengan menggunakan javascript sesuai dengan keperluan user. Dibawah ini adalah contoh script berikut hasilnya :

<!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>PHP/MySQL & Google Maps Example</title>
   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

   <script type="text/javascript">
   //<![CDATA[
   var customIcons = {
     restaurant: {
       icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
       shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
     },
     bar: {
       icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
       shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
     }
   };


   function load() {
     var map = new google.maps.Map(document.getElementById("map"), {
       center: new google.maps.LatLng(47.6145, -122.3418),
       zoom: 13,
       mapTypeId: 'roadmap'
     });
     var infoWindow = new google.maps.InfoWindow;

     // Rubah nama ini sesuai sengan script php yg menghasilkan script XML
     downloadUrl("phpsqlajax_genxml.php", function(data) {
       var xml = data.responseXML;
       var markers = xml.documentElement.getElementsByTagName("marker");
       for (var i = 0; i < markers.length; i++) {
         var name = markers[i].getAttribute("name");
         var address = markers[i].getAttribute("address");
         var type = markers[i].getAttribute("type");
         var point = new google.maps.LatLng(
             parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
         var html = "<b>" + name + "</b> <br/>" + address;
         var icon = customIcons[type] || {};
         var marker = new google.maps.Marker({
           map: map,
           position: point,
           icon: icon.icon,
           shadow: icon.shadow
         });
         bindInfoWindow(marker, map, infoWindow, html);

       }
     });
   }
   function bindInfoWindow(marker, map, infoWindow, html) {
     google.maps.event.addListener(marker, 'click', function() {
       infoWindow.setContent(html);
       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>
 </head>
 <body onload="load()">
   <div id="map" style="width: 500px; height: 300px"></div>
 </body>
</html>