Acara 9 - Menggunakan MySQL Dan PHP Dengan Google Maps
Acara 9 - Menggunakan MySQL Dan PHP Dengan Google Maps
Acara 9
Menggunakan MySQL dan PHP dengan Google Maps
Latihan ini memperlihatkan cara menampilkan informasi dari database MySQL di peta
Google menggunakan Google Maps JavaScript API. Latihan ini sesuai untuk orang yang
sudah memiliki pengetahuan menengah tentang MySQL, PHP, dan XML.
Peta di Latihan ini menampilkan dua jenis marker untuk membedakan antara lokasi
restoran dengan bar. Sebuah database dalam MySQL menyimpan informasi tentang
lokasi marker individual seperti tipe tempat (apakah berupa restoran atau bar), nama,
alamat, dan koordinat geografisnya. Peta mengambil informasi ini dari database, melalui
file XML yang berfungsi sebagai perantara antara database dengan peta. Anda bisa
menggunakan pernyataan PHP untuk mengekspor informasi marker dari database ke file
XML.
Klik marker pada peta di bawah ini untuk menampilkan jendela info dengan nama dan
alamat lokasi. Marker memiliki label 'R' atau 'B' dan menampilkan lokasi restoran dan bar.
Contoh berikut menampilkan keseluruhan kode yang Anda perlukan untuk membuat peta
ini.
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.863276, 151.207977),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.x
ml', function(data) {
var xml = data.responseXML;
var markers =
xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
Arahkan ke atas kanan blok kode untuk menyalin kode atau membukanya dalam
JSFiddle.
<!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>Using MySQL and PHP with Google Maps</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 = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.863276, 151.207977),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key= YOUR_API_KEY &callbac
k=initMap">
</script>
</body>
</html>
Memulai
Pasang, siapkan, dan konfigurasi server MySQL dengan PHP di komputer Anda.
Mengisi tabel
Anda bisa mengimpor data marker ke dalam database SQL menggunakan fungsionalitas
'Import' di antarmuka phpMyAdmin yang memungkinkan Anda mengimpor data dalam
beragam format.
Di bawah ini adalah data marker untuk peta di Latihan ini, dalam format .csv. (simpan
dalam excel dengan ekstensi .csv)
Anda juga bisa menggunakan perintah SQL di bawah ini untuk mengimpor data marker
ke dalam tabel SQL.
Menggunakan file XML sebagai perantara database dengan peta Google Anda
memungkinkan pemuatan laman awal yang lebih cepat dan aplikasi peta yang lebih
fleksibel. Ini membuat debugging lebih mudah karena Anda bisa memverifikasi keluaran
XML dari database dan parsing JavaScript XML secara independen. Anda juga bisa
menjalankan peta seluruhnya hanya berdasarkan file XML statis dan tidak menggunakan
database MySQL.
Jika Anda belum pernah menggunakan PHP untuk terhubung ke database MySQL,
kunjungi php.net dan baca tentang mysql_connect, mysql_select_db, my_sql_query,
dan mysql_error.
Anda bisa menggunakan mana pun dari ketiga teknik yang berbeda di bawah ini untuk
mengeluarkan data tabel SQL sebagai XML dengan PHP.
Saat menggunakan browser publik untuk mengakses database menggunakan file PHP,
penting untuk memastikan kredensial database Anda aman. Anda bisa melakukannya
dengan menempatkan informasi koneksi database Anda di file PHP terpisah dari kode
PHP utama. File yang berisi kredensial Anda harus tampak seperti yang di bawah ini,
tetapi berisi informasi database Anda sendiri.
<?php
$username="username";
$password="password";
$database="username-databaseName";
?>
Fungsi XML DOM PHP akan mengelola detail kecil, seperti meloloskan entitas khusus di
XML, dan memudahkan pembuatan XML dengan struktur yang lebih kompleks. Anda
bisa menggunakan fungsi XML DOM untuk membuat simpul XML, menambah simpul
turunan, dan membuat keluaran dokumen XML ke layar. Untuk mengetahui apakah PHP
server Anda telah mengaktifkan fungsionalitas XML DOM, periksa konfigurasi atau coba
mulai domxml_new_doc().
Di bawah ini adalah file PHP yang dihubungkan ke database MySQL dan mengeluarkan
XML ke browser.
<?php
require("phpsqlajax_dbinfo.php");
header("Content-type: text/xml");
$newnode->set_attribute("name", $row['name']);
$newnode->set_attribute("address", $row['address']);
$newnode->set_attribute("lat", $row['lat']);
$newnode->set_attribute("lng", $row['lng']);
$newnode->set_attribute("type", $row['type']);
}
$xmlfile = $doc->dump_mem();
echo $xmlfile;
?>
Dalam file di atas, kode PHP melakukan inisialisasi dokumen XML baru terlebih dulu dan
membuat simpul induk "marker". Simpul ini kemudian terhubung ke database,
mengeksekusi kueri SELECT * (pilih semua) pada tabel marker dan melakukan iterasi
pada hasilnya. Untuk setiap baris dalam tabel (setiap lokasi), kode membuat simpul XML
baru dengan atribut baris sebagai atribut XML dan menambahkannya ke simpul induk.
Bagian terakhir kode kemudian mengeluarkan XML ke layar browser.
Catatan: Jika database Anda berisi karakter internasional, atau Anda perlu memaksakan
keluaran UTF-8, Anda bisa menggunakan utf8_encode pada keluaran data.
<?php
require("phpsqlajax_dbinfo.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;
}
header("Content-type: text/xml");
?>
Kode di atas menghubungkan database dan mengeksekusi kueri SELECT * (pilih semua)
pada tabel marker. Kode kemudian menjalankan echo simpul markers induk dan
melakukan iterasi pada hasil kueri. Kode kemudian menjalankan echo simpul XML untuk
marker di setiap baris tabel (untuk setiap lokasi). Ini mengirimkan bidang nama dan
alamat melalui fungsi parseToXML terlebih dulu, dalam hal terdapat entitas khusus di
dalamnya. Skrip diakhiri dengan menjalankan echo yang mengeluarkan
tag markers penutup.
Catatan: Anda bisa menggunakan utf8_encode pada keluaran data XML jika database
Anda berisi karakter internasional, atau jika Anda ingin memaksakan keluaran UTF-8.
require("phpsqlajax_dbinfo.php");
header("Content-type: text/xml");
echo $dom->saveXML();
?>
Kode di atas melakukan inisialisasi dokumen XML baru dan membuat simpul induk
"marker". Simpul ini kemudian terhubung ke database, mengeksekusi kueri SELECT
* (pilih semua) pada tabel marker dan melakukan iterasi pada hasilnya. Kode kemudian
membuat simpul XML untuk setiap baris dalam tabel (untuk setiap lokasi), dengan atribut
baris sebagai atribut XML dan menambahkannya ke simpul induk. Kode kemudian
mengeluarkan XML ke layar browser.
Catatan: Jika database Anda berisi karakter internasional, atau Anda perlu memaksakan
keluaran UTF-8, Anda bisa menggunakan utf8_encode pada keluaran data.
<markers>
<marker name="Love.Fish" address="580 Darling Street, Rozelle, NSW" lat="-
33.861034" lng="151.171936" type="restaurant"/>
<marker name="Young Henrys" address="76 Wilford Street, Newtown, NSW"
lat="-33.898113" lng="151.174469" type="bar"/>
<marker name="Hunter Gatherer" address="Greenwood Plaza, 36 Blue St, North
Sydney NSW" lat="-33.840282" lng="151.207474" type="bar"/>
<marker name="The Potting Shed" address="7A, 2 Huntley Street, Alexandria,
NSW" lat="-33.910751" lng="151.194168" type="bar"/>
Jika browser Anda tidak menampilkan data marker dari database Anda sebagai keluaran
XML, coba jalankan debug dengan menghilangkan baris di file yang menyetel header ke
tipe materi text/xml. Baris ini bisa menyebabkan browser Anda mencoba mem-parse
XML dan menyulitkan Anda melihat pesan debug.
Membuat peta
Bagian ini menampilkan cara mengembangkan contoh peta di Latihan ini menggunakan
JavaScript dan file XML keluaran.
.
Buat sebuah file baru dalam editor teks dan simpan sebagai index.html. Bacalah
bagian-bagian berikut untuk memahami kode yang bisa Anda tambahkan ke file ini.
Definisikan fungsi Anda sendiri untuk memuat file dan memanggil downloadUrl().
Fungsi mengambil dua parameter:
1. url menetapkan jalur ke file XML atau ke skrip PHP Anda yang membuat file, tergantung
pada apakah Anda ingin memperbarui file XML secara dinamis saat database berubah.
Peta di Latihan ini memanggil file XML statis untuk data marker.
Ini biasanya cara yang paling mudah untuk menempatkan file XML ini di dalam direktori
yang sama dengan file HTML sehingga Anda bisa mengacu padanya menurut nama file.
2. callback menunjukkan fungsi yang dipanggil skrip saat XML kembali ke JavaScript.
Kode di bawah ini menampilkan deklarasi fungsi.
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);
}
};
downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.x
ml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
Menggabungkan semuanya
Buka file index.html di browser. Saat laman dimuat, fungsi initMap mempersiapkan
peta, kemudian memanggil fungsi downloadUrl. Fungsi ini menjalankan iterasi pada
semua elemen marker dan mengambil atribut nama, alamat, tipe, dan latLng untuk
setiap elemen marker.
Kode kemudian membuat marker, menambahkan marker pada peta, dan
menggabungkan jendela info ke setiap marker untuk menampilkan keterangan saat
diklik.
Informasi selengkapnya
Jika Anda ingin membuat plot marker pada peta menggunakan data lokasi Anda
sendiri, Anda bisa menggunakan layanan geocoding batch untuk mengonversi alamat
menjadi garis lintang dan garis bujur untuk marker Anda.