Tugas Modul 2-3. <?php //Header File XML header("content-type: text/xml"); include("koneksi.php");

Ukuran: px

Mulai penontonan dengan halaman:

Download "Tugas Modul 2-3. <?php //Header File XML header("content-type: text/xml"); include("koneksi.php");"

Susanto Gunardi
7 tahun lalu
Tontonan:

1 A. DataLokasi Tugas Modul 2-3 <?php //Header File XML header("content-type: text/xml"); include("koneksi.php"); // Parsing Karakter-Karakter Khusus 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; // Memilih semua baris pada tabel 'markers' if(isset($_get['idmark']) &&!empty($_get['idmark'])) $query = "SELECT * FROM markers WHERE id = '$_GET[idmark]'"; else // Memilih semua baris pada tabel 'markers' $query = "SELECT * FROM markers WHERE 1"; $result = mysqli_query($conn,$query); if (!$result) die('invalid query: '. mysql_error()); // Parent node XML echo '<markers>';

2 // Iterasi baris, masing-masing menghasilkan node-node XML while ($row = mysqli_fetch_array($result)) // Menambahkan ke node dokumen XML echo '<marker '; echo 'name="'. parsetoxml($row['name']). '" '; echo 'address="'. parsetoxml($row['address']). '" '; echo 'lat="'. $row['lat']. '" '; echo 'lng="'. $row['lng']. '" '; echo 'category="'. $row['category']. '" '; echo '/>'; // Akhir File XML (tag penutup node) echo '</markers>'; B. Proses data <?php include("koneksi.php"); $nama = $_POST['nama']; $alamat = $_POST['alamat']; $x = $_POST['x']; $y = $_POST['y']; $kategori = $_POST['kategori']; $idmarker = $_POST['idmarker']; //menangani aksi penambahan data markers if (isset($_post['action']) && $_POST['action']=="add") $cekq = mysqli_query($conn,"insert INTO markers(name,address,lat,lng,category) VALUES('$nama','$alamat','$x','$y','$kategori')")

3 or die ("query gagal dijalankan: ".mysql_error()); if ($cekq) echo '"status":"1"'; else echo '"status":"0"'; exit; //menangani aksi perubahan data markers else if(isset($_post['action']) && $_POST['action']=="update") $cekq = mysqli_query($conn,"update markers SET name='$nama', address='$alamat', lat='$x', lng='$y', category='$kategori' WHERE id='$idmarker'") or die ("query gagal dijalankan: ".mysql_error()); echo '"status":"1"'; exit; //menangani aksi penghapusan data markers else if(isset($_get['action']) && $_GET['action']=="delete") $id = $_GET['id']; $cekq = mysqli_query($conn,"delete from markers where id='$id'") or die ("query gagal dijalankan: ".mysql_error());

4 if(mysqli_affected_rows($conn) == 1) //jika jumlah baris data yang dikenai operasi delete == 1 echo '"status":"1"'; else echo '"status":"0"'; exit;?> C. Javascript Google Maps API <script type="text/javascript" src=" alse"></script> <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript"> //Mendefinisikan alamat icons yang akan digunakan var customicons = hospital: icon: 'icons/hospital.png', hotel: icon: 'icons/hotel.png', university: icon: 'icons/university.png' ; function load()

5 var map = new google.maps.map(document.getelementbyid("map"), center: new google.maps.latlng( , ), zoom: 14, maptypeid: google.maps.maptypeid.roadmap ); var infowindow = new google.maps.infowindow; // Bagian ini digunakan untuk mendapatkan data format XML yang dibentuk dalam datalokasi.php // berbasis Ajax $.ajax( url: "datalokasi.php", type: "GET", datatype: "xml", success:function(data) //alert (data); var xml = data; var markers = xml.documentelement.getelementsbytagname("marker"); for (var i = 0; i < markers.length; i++) var name = markers[i].getattribute("name"); var address = markers[i].getattribute("address"); var type = markers[i].getattribute("category"); var point = new google.maps.latlng( parsefloat(markers[i].getattribute("lat")), parsefloat(markers[i].getattribute("lng"))); var html = "<b>" + name + "</b><br/>" + address; var icon = customicons[type] ;

6 google.maps.marker( infowindow, html); ); var marker = new map: map, position: point, icon: icon.icon ); bindinfowindow(marker, map, //menempatkan dan menampilkan info window function bindinfowindow(marker, map, infowindow, html) google.maps.event.addlistener(marker, 'click', function() infowindow.setcontent(html); infowindow.open(map, marker); ); </script> D. HTML <body onload="load()"> <center> <h4>marker Icons pada Beberapa Lokasi</h4> <div id="map"></div> <div id="isi"> <a href="index.php">home</a> <a href="tambah.php">tambah</a> <a href="semuadata.php">semua Data</a> </div>

7 </center> </body> E. Penjelasan Data Lokasi Script function parsetoxml($htmlstr) $xmlstr=str_replace('<','<',$htmlstr); Penjelasan Untuk memparsing karakter-karakter khusus $xmlstr=str_replace('>','>',$xmlstr); $xmlstr=str_replace('"','"',$xmlstr); $xmlstr=str_replace("'","'",$xmlstr); $xmlstr=str_replace("&",'&',$xmlstr); return $xmlstr; if(isset($_get['idmark']) &&!empty($_get['idmark'])) $query = "SELECT * FROM markers WHERE id = '$_GET[idmark]'"; el $query = "SELECT * FROM markers WHERE 1"; $result = mysqli_query($conn,$query); if (!$result) die('invalid query: '. mysql_error()); echo '<markers>'; while ($row = mysqli_fetch_array($result)) echo '<marker '; echo 'name="'. parsetoxml($row['name']). '" '; Untuk memilih semua baris pada table markers Untuk merusult sql query untuk membuat iterasi baris, masing-masing menghasilkan nodenode xml

8 echo 'address="'. parsetoxml($row['address']). '" '; echo 'lat="'. $row['lat']. '" '; echo 'lng="'. $row['lng']. '" '; echo 'category="'. $row['category']. '" '; echo '/>'; echo '</markers>'; F. Penjelasan Proses Data Script $nama = $_POST['nama']; $alamat = $_POST['alamat']; $x = $_POST['x']; $y = $_POST['y']; $kategori = $_POST['kategori']; $idmarker = $_POST['idmarker']; if (isset($_post['action']) && $_POST['action']=="add") $cekq = mysqli_query($conn,"insert INTO markers(name,address,lat,lng,categ ory) VALUES('$nama','$alamat','$x','$y','$kategori')") or die ("query gagal dijalankan: ".mysql_error()); if ($cekq) echo '"status":"1"'; else echo '"status":"0"'; Penjelasan Untuk menangkap method POST dari form Untuk menangani aksi penambahan data markers

9 exit; else if(isset($_post['action']) && $_POST['action']=="update") $cekq = mysqli_query($conn,"update markers SET name='$nama', Untuk menangani aksi perubahan data markers address='$alamat', lat='$x', lng='$y', i' category='$kategor WHERE id='$idmarker'") or die ("query gagal dijalankan: ".mysql_error()); echo '"status":"1"'; exit; else if(isset($_get['action']) && $_GET['action']=="delete") $id = $_GET['id']; $cekq = mysqli_query($conn,"delete from markers where id='$id'") or die ("query gagal Unutk menangani aksi penghapusan data markers

10 dijalankan: ".mysql_error()); if(mysqli_affected _rows($conn) == 1) //jika jumlah baris data yang dikenai operasi delete == 1 echo '"status":"1"'; else echo '"status":"0"'; exit; G. Penjelasan Google Maps Api Script <script type="text/javascript" src=" ps/api/js?sensor=false"></script> var customicons = hospital: icon: 'icons/hospital.png', hotel: icon: 'icons/hotel.png', university: icon: 'icons/university.png' ; function load() var map = new google.maps.map(document.getelemen tbyid("map"), Penjelasan Untuk menampilkan google maps api Untuk mendefinisikan icon yang akan digunakan dari datalokasi.php Untuk menampilkan google maps Untuk mendeskripsikan variable maps dan menentukan letak latitude

11 center: new google.maps.latlng( , ), zoom: 14, maptypeid: google.maps.maptypeid.roadmap ); var infowindow = new google.maps.infowindow; $.ajax( url: "datalokasi.php", "xml", ata) type: "GET", datatype: success:function(d //alert (data); var xml = data; var markers = xml.documentelement.getelementsbyt agname("marker"); for (var i = 0; i < markers.length; i++) dan longitude dengan map type roadmap Untuk mendeskripsikan variable info windows - Untuk menampilkan icon dari data lokasi dan ditangkap dengan method get yang di parsing ke xml - Untuk pertukaran data dalam bentuk xml dari prosesdata.php var name = markers[i].getattribute("name"); var address = markers[i].getattribute("address") ; var type = markers[i].getattribute("category" );

12 var point = new google.maps.latlng( parsefloat(markers[i].getattribute ("lat")), parsefloat(markers[i].getattribute ("lng"))); var html = "<b>" + name + "</b><br/>" + address; var icon = customicons[type] ; var marker = new google.maps.marker( map: map, position: point, icon: icon.icon ); google.maps.event.addlistener(mark er, 'click', function() infowindow.setcontent(html); infowindow.open(map, marker); ); <body onload="load()"> <div id="map"></div> - Untuk membuat event marker click - Untuk menampilkan info window dalam marker Untuk menjalankan fungsi load pada javascript Untuk menampilkan id map dan ditampilkan dalam web

dokumen-dokumen yang mirip

Menampilkan Markers Google Maps API dengan PHP dan MySQL

Menampilkan Markers Google Maps API dengan PHP dan MySQL Oleh: Hasyemi Rafsanjani Asyari Hai-hai teman-teman jagocoding. Kali ini sedikit lebih advance, tapi tetap masih pada topik tentang Google Maps!