Berikut adalah 4 tahap dalam tutorial ini :
1. Membuat table database
2. Mengisi data/record ke dalam database
3. Menmpilkan data XML dengan PHP
4. Membuat Peta
1. Membuat sebuah table database
Database, sudah tahukan apa itu database, database berisi data/record dari suatu web, semua web dinamis pasti memilki database, facebook, yahoo, twitter, dll mempunyai database, bisa kamu bayangkan facebook memiliki database yang berisi jutaan bahkan milyaran data dari setiap penggunanya dari seluruh dunia bgitu juga dengan twitter google+ dll. Saya anggap disini kamu sudah mengerti (tentunya) bagaimana cara membuat sebuah database. Oke buat database dengan nama maps, kemudian buat tabel dengan nama marker buat 6 buah field dalam tabel tersebut yang terdiri dari id, nama, alamat, lat, lng, tipe , script SQL nya seperti berikut (tinggal kopas aja script berikut tabel langsung jadi)..
CREATE TABLE `markers` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nama` VARCHAR( 60 ) NOT NULL ,
`alamat` VARCHAR( 80 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`lng` FLOAT( 10, 6 ) NOT NULL ,
`tipe` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;
Struktur databasenya akan nampak seperti gambar berikut...
Saya jelaskan fiel-field diatas :
Id >> berisi numeric untuk identitas unik dari setiap lokasi
Alamat >> berisi alamat lokasi
Lat >> latitude lokasi
Lng >> longitude lokasi
Tipe >> tipe lokasi (wisata / museum)
2. Mengisi data/record ke dalam database
Kemudia isi table marker dengan data (scriptnya) seperti berikut :
INSERT INTO `markers` (`id`, `nama`, `alamat`, `lat`, `lng`, `tipe`) VALUES
(1, 'Museum Benteng Vredeburg', 'Jl. Jend. A. Yani No.6 , Yogyakarta', -7.800330, 110.365967, 'museum'),
(2, 'Museum Biologi UGM', 'Jl. Sultan Agung No. 22, Yogyakarta.', -7.801969, 110.374374, 'museum'),
(3, 'Museum Affandi', 'Jl. Laksda Adisutjipto 167 Yogyakarta', -7.783037, 110.396164, 'museum'),
(4, 'Museum Wayang Kekayon', 'Jl. Raya Yogya-Wonosari Km. 7, Kec. Banguntapan, Bantul', -7.814852, 110.413033, 'museum'),
(5, 'Gembira Loka', 'Jl. Kebun Raya no. 2 Yogyakarta.', -7.803342, -110.397629, 'wisata'),
(6, 'Tugu Yogyakarta', 'Perempatan Jl. Pangeran Mangkubumi', -7.782958, 110.367043, 'wisata'),
(7, 'Monumen Jogja Kembali', 'Jl. Lingkar Utara, Jongkang, Sariharjo, Ngaglik, Sleman, YK', -7.749448, 110.369568, 'wisata'),
(8, 'Kraton Yogyakarta', 'Alun-alun utara, yogyakarta', -7.805708, 110.364113, 'wisata'),
(9, 'Malioboro', 'Jl. Malioboro, Yogyakarta', -7.793238, 110.365723, 'wisata');
Database beserta table dan data-datanya telah dibuat :D ..
3. Membuat berkas XML dengan PHP
Pertama kita buat dahulu file php agar web kita nanti dapat terhubung dengan database. Script phpnya seperti berikut :
$server = "localhost";
$username = "root";
$password = "";
$database = "maps";
// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");?>
simpan script diatas dengan nama koneksi.php
Menggunakan Echo PHP untuk output XML
Dan berikut adalah script untuk menampilkan berkas xml dengan echo php :
<?php
require("koneksi.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'nama="' . parseToXML($row['nama']) . '" ';
echo 'alamat="' . parseToXML($row['alamat']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'tipe="' . $row['tipe'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
Simpan script diatas dalam bentuk file php dengan nama phpsqlajax_genxml.php
OK sekarang kita cek apakah berkas diatas sudah berjalan semestinya tanpa ada error sedikitpun.. langsung aja buka file phpsqlajax_genxml.php dengan browsermu (localhost jangan lupa).
Kalo di browser muncul data-datanya seperti gambar berikut berarti data dalam bentuk XML sukses dibuat..
Gambarnya sbb :
4. Membuat Peta
Ini adalah tahap terakhir setelah tahap-tahap sebelumnya semua sukses dijalankan. Langsung saja.. simak baik-baik, pelajari dan prakteka :p ..
Untuk membuat petanya Script lengkapnya seperti berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Blognetizen : Google Maps PHP/MySQL Tutorial </title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAA8G9ZUehlmgHFYSk0eHkvMxSMGSzrQzuxP9i0yI8OwKXwu_vyNhQuc40vTW0co5ModYSrK6lCkwof0Q" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["wisata"] = iconBlue;
customIcons["museum"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(-7.805708, 110.364113), 13);
GDownloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var nama = markers[i].getAttribute("nama");
var alamat = markers[i].getAttribute("alamat");
var tipe = markers[i].getAttribute("tipe");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, nama, alamat, tipe);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, nama, alamat, tipe) {
var marker = new GMarker(point, customIcons[tipe]);
var html = "<b>" + nama + "</b> <br/>" + alamat;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>
Simpan script diatas dengan nama index.php
Selesai.. sekarang upload ketiga file diatas yang terdiri dari
index.php ,
koneksi.php , dan
phpsqlajax_genxml.php ke webhostingmu dan juga database seperti yang telah dibuat diatas.. Hasilnya akan nampak seperti pada link berikut >>
http://fbox.freetzi.com/blogmap.php ..
(hdra)