Jumat, 18 April 2014

Sistem Informasi Geografis Web dan Mobile

Menampilkan Data Database pada Alert dan Menggunakan Fungsi Presisi Longtitute


Tugas empat kali ini masih menyambung dari tugas ketiga sebelumnya. Nama pemilik rumah, alamat pemilik rumah yang telah disimpan dalam MySQL sekarang coba ditampilkan kedalam peta. Ketika marker dikilik, akan muncul alert yang menampilkan nama pemilik rumah dan alamat pemilik rumah. sedangkan untuk longitude, digunakan presisi (fungsi round) untuk membulatkan angka dibelakang kom (enam angka dibelakang koma). Berikut adalah data yang telah disimpan pada MySQL.
Kontainer peta yang telah dibuat pada tugas tiga kemudian ditambahkan button show dan hide untuk menampilkan dan menyembunyikan peta.
<html>

<head>
  <title></title>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script src="jquery.js"></script>
  <script src="maps.js"></script>
</head>

<body>
      <div id="petaku" style="width:600px; height:500px">
      </div>
      <button type="button" id="showHide">Hide</button>
     
</body>

</html>
Kode Program 1 Kontainer Peta dengan Button Show Hide

Langkah selanjutnya adalah menambahkan kode program pada file simpandata.php untuk membulatkan  nilai longitude menjadi enam angka dibelakang koma dan menyimpan data dalam bentuk array kemudian menampilkan data tersebut pemilik rumah ketika sebuah marker di klik (pada file maps.js).
<?php
error_reporting(0);
$host = "localhost";
$username = "root";
$password = "";
$namadatabase = "db_pemetaan"; //tiga baris kode program diatas merupakan koneksi ke database db_pemetaan
$koneksi = mysql_connect($host,$username,$password) or die("koneksi gagal".mysql_error()); //notifikasi jika koneksi gagal
mysql_selectdb($namadatabase,$koneksi) or die("Database Error".mysql_error()); 


if($_REQUEST['r']=="alamat")
      {
            $lati=$_REQUEST['lat']*1000000;
            $latint=round($lati);
            $latraw=$latint/1000000;
            //echo $latraw;
            $longi=$_REQUEST['lng']*1000000;
            $longint=round($longi);
            $longraw=$longint/1000000;
           
            echo "Latitute : ".$latraw." dan Longtitute : ".$longraw."
            "; //menampilkan dan membulatkan nilai longitude menggunakan fungsi round
           
            $response=mysql_query("SELECT Alamat_Pemilik, Nama_Pemilik FROM tb_pemetaanrumah WHERE Latitute=".$latraw." AND Longtitute=".$longraw);
            //menngambil nama dan alamat pemilikdari database
            $arr=array();
            while($b=mysql_fetch_array($response)) //nilai dari nama dan alamat pemilik dihimpun dalam bentuk array dan ditampilkan ke alert
            {
                  $arr[]=$b;
            }
            $encode=json_encode($arr);
            $decode=json_decode($encode);
            for($j=0;$j<count($decode);$j++)
            {
                  echo "Nama_Pemilik : ".$decode[$j]->Nama_Pemilik."
                  "."Alamat Pemilik : ".$decode[$j]->Alamat_Pemilik;
            }
           
      }
      else
      {
            $result = mysql_query("SELECT * FROM tb_pemetaanrumah");
            $data = array();
           
            if (!$result) {
                  echo "Koneksi ke database gagal ! ";
                  exit;
            }
           
            if (mysql_num_rows($result) == 0) {
                  echo "Database kosong";
                  exit;
            }
           
            while ($row = mysql_fetch_array($result))
            {
                  $data[]=$row;
            }
            echo json_encode($data);
      }

?>
Kode Program 2 Menyimpan Nama dan Alamat Rumah untuk Ditampilkan pada Peta

            Buat file JavaScript untuk membuat fungsi menampilkan marker dan menambahkan event ketika marker diklik. Event tersebut kan menampilkan sebuah alert yang menampilkan nama pemilik rumah dan alamat pemilik rumah. Kode Program 3 adalah menampilkan marker sesuai dengan latitude dan longtitude dan melakukan event.

// JavaScript Document

$(document).ready(function(){
      var gmaps=google.maps;
      var arrMarker=[];
      var mapOptions={
      zoom: 18,
      //disableDefaultUI:true,
      draggable:false,
      center:new gmaps.LatLng(-8.79359,115.158623)
      }; //ini menampilkan peta, dengan -8.79359,115.158623 sebagai centernya, jadi yang muncul di peta hanya sekitaran latitude longitude itu.
           
      map = new
gmaps.Map(document.getElementById('petaku'),mapOptions); //mengambil peta tsb dan ditampilkan di kontainer
           
      $.get('simpandata.php',function(output){
         for(i=0;i<output.length;i++){
             var marker = new gmaps.Marker({ //menampilkan marker
             position:new
gmaps.LatLng(output[i].Latitute,output[i].Longtitute),
             map:map,
             title:output[i].Alamat_Pemilik //menampilkan informasi di window ketika kursor digeser ke arah marker, muncul data alamat pemilik rumah
      });
                                          gmaps.event.addListener(marker,'click',function(event)
      {
      for(j=0;j<arrMarker.length;j++)
            {
                             if(arrMarker[j].getPosition()==event.latLng)
                  {
     $.get('simpandata.php?r=alamat&lat='+event.latLng.lat()+'&lng='+event.latLng.lng(),function(output)
                        {
                              alert(output);
});
                                    //alert(event.latLng);
                                    //arrMarker[j].setMap(null);
                                    //arrMarker.splice(j,1);
                              break;
                        }
                  }
            });  
                  arrMarker.push(marker);
                       
            /*var informasi=new google.maps.InfoWindow({
            position:new
google.maps.LatLng(output[i].Latitute,output[i].Longtitute),
            }); //membuat info window
                       
                        google.maps.event.addListener(marker,'click',function(event){
      informasi.setPosition(event.latLng);
      informasi.setContent(event.latLng.toString());
      informasi.open(muncul); //menampilkan informasi di window ketika marker di klik
                  });
                        */
           
            }
       },'json');
     
      var isShow=true;
     
      $('#showHide').click(function()
      {
            for(i=0;i<arrMarker.length;i++)
            {
                  if(isShow)
                  {
                        arrMarker[i].setMap(null);
                  }
                  else
                  {
                        arrMarker[i].setMap(map);
                  }
                 
            }
            isShow=!isShow;
           
      });
           
});
                                          Kode Program 2 Menampilkan Marker dan Fungsi Event

0 komentar:

Posting Komentar