Kali ini saya tuliskan sedikit bagamana membuat peta google yang terkoneksi dengan database. Tutorial ini saya tulis untuk kamu yang sudah familiar dengan bahasa pemprograman PHP/My SQL , dan khususnya yang mamiliki keinginan untuk belajar bagaimana menggunakan Google Maps dengan sebuah database MySQL. Setelah menyelesaikan tutorial ini, kamu akan mempunyai sebuah Google Map yang berbasiskan database dari lokasi-lokasi markernya dan tentunya dapat kamu kembangkan lebih jauh lagi seperti menambahkan halaman user atau admin melengkapi dengan username dan password membuat sebuah situs komunitas sederhana yang dapat menampilkan dimana saja rumah setiap user/penggunanya (yang ditampilkan dalam bentuk peta) itu semua bukan hal yang sulit tentunya, yang penting logika dan ide kalian :D , tapi dalam tutorial ini saya akan membuat yang paling dasar dulu. Peta yang akan saya buat berikut adalah peta kota Yogyakarta dan akan saya bedakan dalam dua tipe marker yakni marker untuk lokasi wisata dan museum. setiap tipe marker akan saya bedakan iconnya. Dalam Peta Sebuah jendela info dengan nama dan alamat dari lokasi akan ditampilkan diatas marker ketika marker tsb di klik. Dan nanti hasilnya akan seperti gambar berikut.. 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` (
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 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 :
// Opens a connection to a MySQL server 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"> <script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAA8G9ZUehlmgHFYSk0eHkvMxSMGSzrQzuxP9i0yI8OwKXwu_vyNhQuc40vTW0co5ModYSrK6lCkwof0Q" type="text/javascript"></script> <script type="text/javascript"> var iconBlue = new GIcon();
var iconRed = new GIcon(); var customIcons = []; function load() { GDownloadUrl("phpsqlajax_genxml.php", function(data) { function createMarker(point, nama, alamat, tipe) { </head> <body onload="load()" onunload="GUnload()"> 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) |