Menambahkan dan menampilkan data dari database ke peta google map

Halo sahabat programmer..
Mari kita lanjutkan lagi belajar kita tentang membuat web gis dengan memanfaatkan google map. tutorial ini adalah lanjutan dari dua tutorial kita sebelumnya yaitu Dasar Pemrograman web GIS dengan Google Map API v3 dan Menambahkan fungsi klik kanan untuk menambahkan marker Pada google map api v3 Jika anda belum membaca saya sarankan untuk menyempatkan membacanya terlebih dahulu.

Baiklah, pada tulisan kali ini programmer goblog bakalan membahas tentang menyimpan dan mengambil data koordinat titik pada database mysql menggunakan PHP sebagai bahasa pemrograman server side nya.

Pada tutorial sebelumnya kita telah membahas tentang apa itu web gis dan juga membahas bagaimana menambahkan titik pada peta. pada tutorial kali ini kita akan belajar bagaimana menyimpan data koordinat titik tersebut beserta keteranganya kedalam database mysql.

Pertama kita akan meyiapkan database nya terlebih dahulu, silahkan sobat buat database dan table nya menggunakan sintak sql berikut.
  

create database belajargis;
use belajargis;
create table tempat(
    id_tempat int not null auto_increment primary key,
    latlng varchar(100) not null,
    nama_tempat varchar(100) not null,
    keterangan_tempat text
    )

nah kira kira seperti gambar dibawah ini struktur database yang kita buat.

baiklan, selanjutnya kita akan menambahkan form untuk tambah data pada script map.html kita dari tutorial sebelumnya.

tambahkan baris kode berikut di tempat yang bertanda biru seperti gambar dibawah ini.

 var form = '<h4>Tambah Data</h4><form id="formtambahdata" method="post" action="simpan.php"><br><input type="text" id="nama" placeholder="nama tempat" name="nama"><br><textarea id="keterangan" name="keterangan" placeholder="Isi Keterangan tempat"></textarea><br><input type="text" id="latlng" name="latlng" value="'+lat+','+lng+'"><br><input type="submit" value="Simpan"></form>';  

Refresh halaman web kita, hasilnya kira-kira seperti gambar dibawah ini.

nah selanjutnya kita akan membuat sebuah file simpan.php untuk menyimpan data dalam form tersebut ke database.

 <?php  
 mysql_connect('localhost','root',''); // membuka koneksi ke database mysql  
 mysql_select_db('belajargis'); //memilih database yang akan digunakan  
 $nama_tempat = $_POST['nama']; // mengambil data dari form  
 $keterangan = $_POST['keterangan'];// mengambil data dari form  
 $latlng = $_POST['latlng'];// mengambil data dari form  
 $query = "insert into tempat (nama_tempat,keterangan_tempat,latlng) values('$nama_tempat','$keterangan','$latlng')";// query untuk insert data ke database  
 if(mysql_query($query)){  
      header('location:map.html'); // mengarahkan ke halaman map.html lagi setelah data berhasil tersimpan  
 }  
 ?>  

mari kita coba inputkan data.
caranya pada peta kita klik kanan, klik ok kemudian akan muncul sebuah marker baru. arahkan kursor mouse ke marker yang baru tersebut. dan akan tampil form seperti gambar dibwah ini.
Inputkan data pada kolom nama tempat dan keterangan.

Selanjutnya kita cek di database mysql kita apakah data berhasil tersimpan.

ya, data tersimpan dengan benar.
dengan cara yang sama coba kita tambahkan beberapa data lagi,

kok di peta belum muncul yah data yang kita tambahkan??? muncul pertanyaan seperti ini di benak anda?
Ya, itu karena kita belum menambahkan script untuk mengambil data ini dari database.
Selanjutnya kita akan menampilkan data dari database ke peta.
pertama kita rename dulu file map.html kita agar menjadi map.php

selanjutnya kita akan menyisipkan beberapa baris kode php kedalam file map.php tersebut.
buka file map.php dan cari baris kode yang ditandai dalam kotak putih.

 kemudian ganti dengan kode berikut.

  <?php  
           mysql_connect('localhost','root','');  
           mysql_select_db('belajargis');  
           $query="select * from tempat";  
           $datas = mysql_query($query);  
           while ($data=mysql_fetch_array($datas)) {  
             ?>  
             ["<?php echo $data['nama_tempat'];?>", <?php echo $data['latlng']; ?> ,1, "<h4><?php echo $data['nama_tempat'];?></h4><p><?php echo $data['keterangan_tempat'];?></p>"],  
             <?php  
           }  
         ?>  

sehingga menjadi seperti gambar berikut ini.

Baiklah jika sudah, mari kita buka file map.php kita tadi dengan menggunakan browser kesayangan sobat masing masing.
kira kira hasilnya seperti gambar dibawah ini.

nah, sekarang data yang tampil sudah sesuai dengan data yang kita tambahkan tadi,,
sebagai catatan, file simpan.php dan map.php harus berada dalam satu folder/directory ya, dan harus didalam web server, dalam kasus penulis kedua file ini berada didalam folder 'belajargis' didalam folder htdocs pada web server xampp..

Tambahan, jangan lupa ganti text header('location:map.html'); di file simpan.php menjadi header('location:map.php');

Baiklah, sampai disini kita sudah bisa menambahkan dan menampilkan data dari database ke peta google map.
Bagi yang membutuhkan file lengkapnya silahkan download disini
Jika sobat programmer merasa tulisan ini bermanfaat, jangan lupa untuk share agar orang lain juga bisa dengan mudah menemukan tulisan ini. terimakasih telah berkunjung dan belajar bersama Programmer GoBlog..