Transcript
TUGAS SISTEM INFORMASI GEOGRAFIS
MENAMPILKAN MARKER RUMAH SAKIT NEGERI DAN SWASTA
di DAERAH NGANJUK DENGAN MENGGUNAKAN PHP
DI SUSUSN OLEH :
1. Eiska Rohmania Zein (G41130
2. Megawati (G41130358)
3. Irma Fasluki Subula R. (G41130391)
4. Rina Prafitriani (G41130358)
GOLONGAN A
PROGRAM STUDI REKAM MEDIK
JURUSAN KESEHATAN
POLITEKNIK NEGERI JEMBER
Berikut langkah-langkah untuk menampilkan marker rumah sakit negeri dan
swasta di daerah nganjuk dengan menggunakan php :
1. Pertama yang harus kita lukukan yaitu men Start Xampp. Selanjutnya
kita buat database pada phpMyAdmin dengan alamat “
http://localhost/phpmyadmin “ ,tabel serta isi data yang akan kita
tampilkan, sesuai contoh diatas kita membuat database “nganjuk”,
dengan tabel “fasyankes” dengan atribut “id, Nama, Alamat, Lat, Lng,
Type”. Untuk id menggunakan tipe “INT (15)”, Nama menggunakan
tipe “VARCHAR (50)”, Alamat menggunakan tipe “VARCHAR (50)”,
Lat menggunakan tipe “FLOAT (10,6), Lng menggunakan tipe
“FLOAT (10,6) dan Type menggunakan tipe “VARCHAR (20)”.
Seperti gambar dibawah ini :
2. Langkah selanjutya insert data yang akan di tampilkan pada table
“fasyankes” yang telah dibuat. Seperti gambar dibawah ini
3. Kemudian membuat file untuk mengakses database , kemudian simpan
dengan nama koneksi.php . Berikut syntaxnya :
<? $server="localhost"; $username="root"; $password="passwordphpmyadminmu"; $database="namadatabasemuapa?"; ?>
4. Langkah selanjutnya membuat file untuk mengubah data MySQL
menjadi XML, kemudian simpan dengan nama
phpsqlajax_genxml.php . berikut scriptnya :
<?php
require("koneksi.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;
}
// Opens a connection to a MySQL server
$connection=mysql_connect ($server, $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM faskes WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'nama="' . parseToXML($row['nama']) . '" ';
echo 'alamat="' . parseToXML($row['alamat']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'tipe="' . $row['tipe'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
Keterangan :
$connection=mysql_connect ('localhost', 'root', ''); ’root’ adalah
nama user name phpmyadmin, dan ‘’ menunjukkan password.
$db_selected = mysql_select_db('nganjuk', $connection);
‘nganjuk’ menunjukkan database pada phpmyadmin
$query = "SELECT * FROM fasyankes WHERE 1"; fasyankes
menunjukkan nama table yang telah dibuat.
Jangan lupa untuk disimpah menjadi satu folder dengan file
koneksi.php
5. Kemudian buka file xml untuk memastikan apa data mysql sudah
terkonversi dengan membuka pada localhost, hingga muncul seperti
tampilan dibawah ini.
6. Langkah selanjutnya membuat file untuk menampilkan peta, simpan dengan
nama index.php . Berikut scriptnya :
<!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"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>Peta Persebaran Rumah Sakit di Nganjuk</title><script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAA8G9ZUehlmgHFYSk0eHkvMxSMGSzrQzuxP9i0yI8OwKXwu_vyNhQuc40vTW0co5ModYSrK6lCkwof0Q" type="text/javascript"></script><script type="text/javascript">//<![CDATA[var iconBlue = new GIcon();iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';iconBlue.iconSize = new GSize(12, 20);iconBlue.shadowSize = new GSize(22, 20);iconBlue.iconAnchor = new GPoint(6, 20);iconBlue.infoWindowAnchor = new GPoint(5, 1);var iconRed = new GIcon();iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';iconRed.iconSize = new GSize(12, 20);iconRed.shadowSize = new GSize(22, 20);iconRed.iconAnchor = new GPoint(6, 20);iconRed.infoWindowAnchor = new GPoint(5, 1);var customIcons = [];customIcons["Rumah Sakit Negeri"] = iconBlue;customIcons["Rumah Sakit Swasta"] = iconRed;function load() {if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.setCenter(new GLatLng(-7.603100,111.892319), 13);GDownloadUrl("phpsqlajax_genxml.php", function(data) {var xml = GXml.parse(data);var markers = xml.documentElement.getElementsByTagName("marker");for (var i = 0; i < markers.length; i++) {var Nama = markers[i].getAttribute("Nama");var Alamat = markers[i].getAttribute("Alamat");var Type = markers[i].getAttribute("Type");var point = new GLatLng(parseFloat(markers[i].getAttribute("Lat")),parseFloat(markers[i].getAttribute("Lng")));var marker = createMarker(point, Nama, Alamat, Type);map.addOverlay(marker);}});}}function createMarker(point, Nama, Alamat, Type) {var marker = new GMarker(point, customIcons[Type]);var html = "<b>" + Nama + "</b> <br/>" + Alamat;GEvent.addListener(marker, 'click', function() {marker.openInfoWindowHtml(html);});return marker;}
//]]></script></head><body onload="load()" onunload="GUnload()" bgcolor=#ADE8E6><center><H1> Peta Persebaran Rumah Sakit di Nganjuk </H1><div id="map" style="width: 500px; height: 500px"></div></center></body></html>
Keterangan : var customIcons = [];
customIcons["Rumah Sakit Negeri"] = iconBlue; menunjukkan
marker pada map untuk Type fasyankes Rumah Sakit Negeri
berwarna Biru
customIcons["Rumah Sakit Swasta"] = iconRed; menunjukkan
marker pada map untuk Type fasyankes Rumah Sakit Swasta
berwarna Merah.
Jangan lupa untuk menyimpan pada folder yang sama dengan file
sebelumnya.
7. Setelah itu buka file index.php dengan cara mengetikkan
localhost/nganjuk/index.php
Keterangan :
Nganjuk pada localhost/nganjuk/index.php , nganjuk merupakan
nama folder dimana tempat semua file (ke tiga file tersebut).
Marker biru RS negeri
Marker merah RS swasta
8. Untuk menampilkan info windows, maka kita harus mengklik marker
tersebut hingga muncul tampilan seperti dibawah ini :
top related