Top Banner
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
17

Sig Nganjuk

Jan 28, 2016

Download

Documents

megawati

sig nganjuk
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Sig Nganjuk

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

Page 2: Sig Nganjuk

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 :

Page 3: Sig Nganjuk

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?"; ?>

Page 4: Sig Nganjuk

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('<','&lt;',$htmlStr);

$xmlStr=str_replace('>','&gt;',$xmlStr);

$xmlStr=str_replace('"','&quot;',$xmlStr);

$xmlStr=str_replace("'",'&#39;',$xmlStr);

$xmlStr=str_replace("&",'&amp;',$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) {

Page 5: Sig Nganjuk

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>';

?>

Page 6: Sig Nganjuk

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.

Page 7: Sig Nganjuk

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&amp;v=2&amp;sensor=true&amp;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';

Page 8: Sig Nganjuk

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;}

Page 9: Sig Nganjuk

//]]></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

Page 10: Sig Nganjuk

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

Page 11: Sig Nganjuk

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 :

Page 12: Sig Nganjuk
Page 13: Sig Nganjuk