infowindow.open(map, this) - Laboratory of Geographic Information

MODUL 6
MEMBANGUN WEB GIS DENGAN FITUR SEDERHANA
A. Tujuan Praktikum

Praktikan dapat mengetahui cara membangun Web GIS dengan fitur sederhana.

Praktikan mengetahui beberapa fitur yang bisa dibuat dalam Web GIS.
B. Tools
a. XAMPP ( mendukung PHP5 ) atau MS4W
b. PostgreSQL dan Postgis
c. Browser Chrome atau Mozilla Firefox ( Mendukung HTML5 dan CSS3 )
d. Text Editor ( Notepad++ atau Sublime Text )
C. Landasan Teori
1. Geographic Information System (GIS)
Geographic Information System (GIS) merupakan sistem yang dirancang untuk
bekerja dengan data yang tereferensi secara spasial atau koordinat-koordinat geografi.
GIS memiliki kemampuan untuk melakukan pengolahan data dan melakukan operasioperasi tertentu dengan menampilkan dan menganalisa data. Aplikasi GIS saat ini tumbuh
tidak hanya secara jumlah aplikasi namun juga bertambah dari jenis keragaman
aplikasinya. Pengembangan aplikasi GIS kedepannya mengarah kepada aplikasi berbasis
Web yang dikenal dengan Web GIS. Hal ini disebabkan karena pengembangan aplikasi di
lingkungan jaringan telah menunjukan potensi yang besar dalam kaitannya dengan geo
informasi. Sebagai contoh adalah adanya peta online sebuah kota dimana pengguna dapat
dengan mudah mencari lokasi yang diinginkan secara online melalui jaringan
intranet/internet tanpa mengenal batas geografi penggunanya. Secara umum Sistem
Informasi Geografis dikembangkan berdasarkan pada prinsip input/masukan data,
manajemen, analisis dan representasi data.
Aplikasi berada disisi client yang berkomunikasi dengan Server sebagai penyedia
data melalui web Protokol seperti HTTP (Hyper Text Transfer Protocol). Aplikasi seperti
ini bisa dikembangkan dengan web browser (Mozzila Firefox, Opera, Internet Explorer,
dll). Untuk menampilkan dan berinteraksi dengan data GIS, sebuah browser
membutuhkan Pug-In atau Java Applet atau bahkan keduanya. Web Server bertanggung
jawab terhadap proses permintaan dari client dan mengirimkan tanggapan terhadap
respon tersebut. Dalam arsitektur web, sebuah web server juga mengatur komunikasi
dengan server side GIS Komponen. Server side GIS komponen bertanggung jawab
terhadap koneksi kepada database spasial seperti menerjemahkan query kedalam SQL
dan membuat representasi yang diteruskan ke server. Dalam kenyataannya Side Server
GIS Komponen berupa software libraries yang menawarkan layanan khusus untuk
analisis spasial pada data. Selain komponen, hal lain yang juga sangat penting adalah
aspek fungsional yang terletak di sisi client atau di server sebagai berikut.
a) Manajemen Data
Untuk melakukan menajeman data geografis paling tidak dibutuhkan
sebuah DBMS (Databese Management System). Pemodelan berorientasi objek
menjadi sangat dibutuhkan karena pemodelan basisdata relational tidak mampu
melakukan penyimpanan data spasial. Pada analisis spasial sistem manajemen
database memberikan beberapa keragaman. Ada beberapa keragaman applikasi
yang dapat digunakan sebagai database seperti Oracle Spatial, PostgreSQL,
Informix, DB2, Ingres dan yang paling popular saat ini adalah MySQL.
b) Mendesain GUI
Untuk berinteraksi, berkomunikasi dan mendapatkan informasi perlu
dirancang sebuah Graphical User Interface (GUI). GUI berinteraksi langsung
dengan user. Karena informasi geografis biasanya sangat kompleks maka akan
ditemui banyak kesulitan dalam pengarsipannya. Menciptakan aspek Dunia Virtual
menjadi hal penting dalam mendesain GUI. Karakteristik untuk menciptakan dunia
virtual adalah Level of Detail (LOD).
Algoritma khusus dibutuhkan untuk mampu menampilkan se-invisible
mungkin tampilan. Penggunaan PHP dan VRML (Virtual Reality Modeling
Language) adalah sebuah ideal perancangan GUI untuk aplikasi Web GIS. PHP
menjadi bahasa yang paling popular untuk menciptakan web dinamis pada saat ini.
VRML dikenalkan oleh Konsorsium Web3D untuk menghasilkan tampilan peta
interaktif dalam web.
c) Detail Proses
Objek Geo Spasial terdiri dari informasi data spasial dan data non spasial.
Informasi Spasial dapat divisualisasikan dengan mengkonversinya VRML dan data
non Spasial ditampilkan secara dinamis di halaman HTML. Gambar berikut
menunjukkan proses request data standart. Request memanggil desain dari PHP
yang berinteraksi dengan database.
2. Dasar Komunikasi Client-server Web
Dua pendekatan yang menunjukkan kemungkinan distribusi fungsional pada
sistem client/server:
a) Thin Client, memfokuskan diri pada sisi server, hampir semua proses dan analisa data
dilaukan berdasarkan request dari sisi server. Data hasil pemrosesan dikirimkan ke
client dalam format HTML yang didalamnya terdapat file gambar sehingga dapat
dilihat di browser, pada pendekatan ini interaksi pengguna terbatas dan tidak fleksibel.
b) Thick/Fat Client, pemrosesan data dilakukan disisi client, data dikirim dari server ke
client dalam bentuk data vektor yang disederhanakan. Pemrosesan dan penggambaran
kembali dilakukan di sisi client, cara ini menjadikan user dapat berinteraksi lebih
interaktif dan fleksibel.
3. Client Side Script ing
Client side script ing merupakan salah satu jenis bahasa pemrograman web yang
proses pengolahannya dilakukan di sisi client. Proses penerjemahan atau pengolahannya
dilakukan oleh web browser sebagai client-nya, didalam web browser sudah terdapat
library yang mampu menerjemahkan semua perintah dihalaman web yang menggunakan
client side script ing. Library ini juga disebut web engine yang dimiliki setiap web browser,
namun web engine yang berbeda-beda terkadang membuat tampilan layout web sering
berbeda disetiap browser, untuk menghindari itu sebaiknya gunakan web browser yang
telah disertifikasi oleh World Wide Web Consortium (W3C).
Contoh dari client side script ing ini antara lain: HTML, XHTML, CSS,
JavaScript, XML, JQUERY.
4. Server-side Web Programming
Server side script ing merupakan bahasa pemrograman web yang pengolahannya
dilakukan dalam server, maksudnya ialah web server yang sudah telah terintegrasi oleh
web engine. Disini peran web engine ialah memproses semua script yang ada termasuk
kategori client side scripting. Web engine biasanya harus diinstal dalam komputer terlebih
dahulu dari bagian terpisah web server. Contoh dari server side scripting ialah: Active
Server Pages (ASP), Hypertext Preprocessor (PHP), Java Sever Pages (JSP), ColdFusion,
Active Server Page (ASP), Java Server Page (JSP), Lasso, SSI.
5. Penjelasan Program
a) Menampilkan Map
Fungsi berikut adalah untuk menampilkan peta dan digitasi dengan javascript:
<script type="text/javascript">
//variabel-variabel yang digunakan untuk fungsi-fungsi
var infowindow; //variabel window
var geomarker; //variabel marker
var markerarray = [];
//variabel array
var map;
//variabel map
var objek; //variabel objek
var directionsService;
//variabel service
var directionDisplay; //variabel display
var usegeolocation;
//variabel geolokasi
var server='http://localhost/Webgis/webserver/';
//data sumber
dari postgresql yang sudah ditampilkan melaluui browser
var markerarraygeo=[];
var circlearray=[];
var layernya;
//fungsi pemanggilan geolocation dan basemap secara otomatis
function initialize() {
geolocation();
basemap();
}
//fungsi pemanggilan basemap (peta dasar)
function basemap() {
google.maps.visualRefresh = true;
map = new
google.maps.Map(document.getElementById('map_canvas'), {
zoom: 16,
center: new google.maps.LatLng(-0.914813, 100.458801),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
loadLayer();
};
//fungsi pemanggilan data layer
function loadLayer(){
layernya = new google.maps.Data();
layernya.loadGeoJson(server+'layer.php');
layernya.setMap(map);
}
b) Menampilkan Info Marker
1) Langka pertama yang harus kita lakukan adalah membuat map
function basemap() {
google.maps.visualRefresh = true;
map = new
google.maps.Map(document.getElementById('map_canvas'), {
zoom: 16,
center: new google.maps.LatLng(-0.914813, 100.458801),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
loadLayer();
};
2) Setelah map ditampilkan, selanjutnya kita membuat markerdi atas map dibuat tadi
berdasarkan koordinat tertentu (yang kita masukkan di dalam database / posisi kita
sekarang)
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: latLng,
map: map,
animation: google.maps.Animation.DROP
});
3) Buat info window berupa pop up yang memuat foto/ info tentang objek yang di
marker
markerarray.push(marker);
var isiinfo="<div style='width:200px; minheight:100px;'><b><center><h2>"+nama+"</h2></center></b>
<a><center><img src='"+server+"/"+gambar+"''style='height:150px'
'width=100px ></img></center></a><br>
<center><p>"+alamat+"</p></center></div>";
createInfoWindow(marker, isiinfo);
}
c) Menampilkan Info Window Sebelah Kiri
var gambar=data.properties.image; //menmpilkan informasi pada
pencarian
$('.listdaftar').append('<p><b><a class="fancybox"
href="#berita'+id+'"">'+nama+'</a></b></p><p>'+alamat+'</p><br>');
$('#berita').append('<div id="berita'+id+'"
style="width:600px;display:none;textalign:justify;"><h2><b><center>'+nama+'</b></h2><center><p>'+alamat+'<
/p></center><br> <center><img src="'+server+'/'+gambar+'"
style="width:80%;"></center><br><center><p
style="margin:5px;">'+deskripsi+'</p></center></div>');
d) File PHP untuk Pengambilan Data
Carijenis.php
<?php
include ('config.php');
$tipe=$_GET["tipe"];
$sql=pg_query("select id_jenis,jenis from tipe,jenis where
jenis.id_tipe=tipe.id_tipe AND tipe='$tipe'");
$dataarray=array();
while($row = pg_fetch_array($sql))
{
$dataidjenis=$row['id_jenis'];
$datajenis=$row['jenis'];
$dataarray[]=array('id_jenis'=>$dataidjenis,'jenis'=>$datajenis);
}
echo json_encode ($dataarray);
?>
Caripeta.php
<?php
require("config.php");
$caritext = $_GET["idjenis"];
$querysearch="SELECT row_to_json(fc) FROM ( SELECT
'FeatureCollection' As type, array_to_json(array_agg(f)) As features
FROM (SELECT 'Feature' As type , ST_AsGeoJSON(loc.the_geom)::json As
geometry , row_to_json((SELECT l FROM (SELECT
id,nama,alamat,deskripsi,image,id_jenis, row_to_json((SELECT k FROM
(SELECT ST_X(ST_CENTROID(the_geom)) AS lng,
ST_Y(ST_CENTROID(the_geom)) AS lat) AS k)) AS center) As l )) As
properties FROM data As loc WHERE id_jenis='$caritext') As f ) As
fc";
$hasil=pg_query($querysearch);
while($data=pg_fetch_array($hasil))
{
$load=$data['row_to_json'];
$tulis="loaddata(".$load.");";
}
echo $tulis;
?>
Caritipe.php
<?php
include ('config.php');
$dataarray=array();
$sql=pg_query("select * from tipe");
while($row = pg_fetch_array($sql))
{
$data=$row['tipe'];
$dataarray[]=$data;
}
echo json_encode ($dataarray);
?>
Config.php
<?php
$host="localhost";
$user="postgres";
$password="root";
$port="5432";
$dbname="unand";
$link= pg_connect("host=".$host." port=".$port." dbname=".$dbname."
user=".$user." password=".$password) or die("Koneksi gagal");
?>
Layer.php
<?php
include("config.php");
$sql = "select ST_asgeojson(the_geom) AS geometry,
id,nama,alamat,deskripsi,image,id_jenis FROM data";
$result = pg_query($sql);
$hasil = array(
'type'
=> 'FeatureCollection',
'features' => array()
);
while ($isinya = pg_fetch_assoc($result)) {
$features = array(
'type' => 'Feature',
'geometry' => json_decode($isinya['geometry']),
'properties' => array(
'id' => $isinya['id'],
'nama' => $isinya['nama'],
'alamat' => $isinya['alamat']
)
);
array_push($hasil['features'], $features);
}
echo json_encode($hasil);
?>
6. Script yang Digunakan
a) File Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Kelompok 1">
<title>SISTEM INFORMASI GEOGRAFIS UNIVERSITAS ANDALAS</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script'
rel='stylesheet' type='text/css'>
<link
href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400ita
lic,700italic' rel='stylesheet' type='text/css'>
<link
href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,70
0' rel='stylesheet' type='text/css'>
<!--Grab the Stylesheets-->
<link
href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400'
rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/flexslider.css" rel="stylesheet"
type="text/css">
<meta name="viewport" content="width=device-width; initialscale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of
your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<script type="text/javascript" src="js/jquery.js" ></script>
<!--Grab JS Files-->
<script type="text/javascript" src="js/jquery.flexslider.js"
></script>
<script type="text/javascript">
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display
-->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" datatoggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#pagetop">SISTEM INFORMASI GEOGRAFIS UNIVERSITAS ANDALAS</a>
</div>
<!-- Collect the nav links, forms, and other content for
toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbarcollapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll"
href='index.php'>Home</a>
</li>
<li>
<a class="page-scroll"
href='?p=map'>Peta</a>
</li>
<li>
<a class="page-scroll"
href="#about">About</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="intro-text">
<div class="intro-heading">Universitas Andalas</div>
<a href='?p=map' class="page-scroll btn btnxl">Start</a>
</div>
</div>
</header>
<!-- Services Section -->
<section id='?p=map'>
<div class="container map-container">
<?php
$page = (isset($_GET['p']))? $_GET['p'] : "main";
switch ($page) {
case 'map': include "map.php"; break;
}
?>
</div>
</section>
<!-<section id="about">
<div class="container">-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © Habibi
Hsb</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li><a href="https://twitter.com/"><i
class="fa fa-twitter"></i></a>
</li>
<li><a href="https://www.facebook.com/"><i
class="fa fa-facebook"></i></a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li><a href="#">Privacy Policy</a>
</li>
<li><a href="#">Terms of Use</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio
projects! -->
<!-- Portfolio Modal 1 -->
<!-- jQuery -->
<!--<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryeasing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
</body>
</html>
b) File Map.php
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script
src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visu
alization"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery.edatagrid.js"></script>
<!--Fancybox-->
<script type="text/javascript" src="fancy/jquery.mousewheel3.0.6.pack.js"></script> <!-- Sertakan JQuery mousewheel untuk image
gallery!-->
<script type="text/javascript"
src="fancy/source/jquery.fancybox.js?v=2.1.5"></script> <!-- Sertakan
JQuery fancybox dan cssnya-->
<link rel="stylesheet" type="text/css"
href="fancy/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
$(function(){
$('.fancybox').fancybox();
$.ajax({
url: server+'/caritipe.php', data: "", dataType: 'json',
success: function(rows)
{
for (var i in rows)
{
var row = rows[i];
$('#selecttipe').append('<option
value="'+row+'">'+row+'</option>');
}
}
});
$(document).on('change','#selecttipe',function()
{
var
tipe=document.getElementById("selecttipe").options[document.getElementBy
Id("selecttipe").selectedIndex].value;
$('#selectjenis').html("");
$.ajax({
url:
server+'/carijenis.php?tipe='+tipe+'', data: "", dataType: 'json',
success: function(rows)
{
for (var i in rows)
{
var row =
rows[i];
var
idjenis=row.id_jenis;
var
jenis=row.jenis;
$('#selectjenis').append('<option
value="'+idjenis+'">'+jenis+'</option>');
}
}
});
});
});
</script>
<script type="text/javascript">
var infowindow;
var geomarker;
var markerarray = [];
var map;
var objek;
var directionsService;
var directionDisplay;
var usegeolocation;
var server='http://localhost/Webgis/webserver/';
var markerarraygeo=[];
var circlearray=[];
var layernya;
function initialize() {
geolocation();
basemap();
}
function basemap() {
google.maps.visualRefresh = true;
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: new google.maps.LatLng(-0.914813, 100.458801),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
loadLayer();
};
function loadLayer(){
layernya = new google.maps.Data();
layernya.loadGeoJson(server+'layer.php');
layernya.setMap(map);
}
function loaddata(results){
if(results.features === null)
{
alert("Data yang dicari tidak ada");
}
else
{
for (var i = 0; i < results.features.length; i++) {
var data = results.features[i];
var coords = data.geometry.coordinates;
var id = data.properties.id;
var nama = data.properties.nama;
var alamat= data.properties.alamat;
var deskripsi=data.properties.deskripsi;
var titiktengah = data.properties.center
var latitude = titiktengah.lat;
var longitude = titiktengah.lng;
var latLng = new google.maps.LatLng(latitude,longitude);
var gambar=data.properties.image; //menmpilkan
informasi pada pencarian
$('.listdaftar').append('<p><b><a class="fancybox"
href="#berita'+id+'"">'+nama+'</a></b></p><p>'+alamat+'</p><br>');
$('#berita').append('<div id="berita'+id+'"
style="width:600px;display:none;textalign:justify;"><h2><b><center>'+nama+'</b></h2><center><p>'+alamat+'</p
></center><br><center><img src="'+server+'/'+gambar+'"
style="width:80%;"></center><br><center><p
style="margin:5px;">'+deskripsi+'</p></center></div>');
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: latLng,
map: map,
animation: google.maps.Animation.DROP
});
markerarray.push(marker); //menmpilkan informasi pada marking
var isiinfo="<div style='width:200px; minheight:100px;'><b><center><h2>"+nama+"</h2></center></b><br><center><p>"
+alamat+"</p></center></div>";
createInfoWindow(marker, isiinfo);
}
}
$('.buttongetdirection').click(function(){
$("#daftar").prepend('<div
id="paneldirection"></div>');
var k=this.id;
var titikawal=geomarker.getPosition();
var titikakhir=markerarray[k].getPosition();
calcRoute(titikawal,titikakhir);
clearmarker();
$('.listdaftar').html('');
});
}
var infowindow = new google.maps.InfoWindow();
function createInfoWindow(marker, isiinfo) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(isiinfo);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function clearmarkergeo(){
for (var i = 0; i < markerarraygeo.length; i++) {
markerarraygeo[i].setMap(null);
}
aygeo=[];
}
function clearmarker(){
for (var i = 0; i < markerarray.length; i++) {
markerarray[i].setMap(null);
}
markerarray=[];
}
function clearroute(){
directionsDisplay.setMap(null);
}
function geolocation(){
navigator.geolocation.getCurrentPosition(geolocationSuccess,
geolocationError);
}
function geolocationSuccess(posisi){
var pos=new
google.maps.LatLng(posisi.coords.latitude,posisi.coords.longitude);
geomarker = new google.maps.Marker({
map: map,
position: pos,
animation: google.maps.Animation.DROP
});
map.panTo(pos);
infowindow = new google.maps.InfoWindow();
infowindow.setContent('Your Position');
infowindow.open(map, geomarker);
usegeolocation=true;
}
function geolocationError(err){
usegeolocation=false;
}
</script>
<script type="text/javascript">
$(function(){
$('#cari').click(function(){
$('#paneldirection').html('');
clearmarker();
$(".listdaftar").html("");
var hasil =
document.getElementById("selectjenis").value;
var script1 = document.createElement('script');
script1.src = server+'/caripeta.php?idjenis='+hasil+'';
document.getElementsByTagName('head')[0].appendChild(script1);
clearroute();
});
});
</script>
<div class="seventeen columns">
<div class="h-border">
<div class="searchbox">
<h2><b>Pilih Jenis Fasilitas :</b></h2><br />
<select name="selecttipe" id="selecttipe" class="smalltext" placeholder="Kata kunci" >
<option>- Jenis Fasilitas -</option>
</select>
<select name="selectjenis" id="selectjenis" class="smalltext" placeholder="Jenis">
<option>- Pilihan -</option>
</select>
<!-- <input type="text" name="nama_cari" id="nama_cari"
class="small-text" placeholder="Cari Nama" required/>-->
<button id="cari" class="btn green" >SEARCH</button>
</div>
</div>
</div>
<div id="berita">
</div>
<section class="latest-work row">
<div class="left">
<div class="control-group">
<div class="controls">
<div id="daftar">
<div class="listdaftar">
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="control-group">
<div id="map_canvas" style=""></div>
</div>
</div>
</section>
D. Cara Praktikum
Pertama-tama kita harus Restore Database terlebih dahulu, tabel-tabel dalam database tidak
hanya dibuat dari awal, namun juga dapat dibuat dari Restore database lain.
1. Pertama harus membuat database yang bernama “unand”.
Klik kanan pada Database, pilih New Database, maka akan muncul seperti gambar
berikut:
Isikan pada kolom Properties, Name untuk nama Database, Owner:
postgres. Sesuai gambar di atas.
Isikan juga data pada kolom Definision seperti gambar berikut ini, kemudian kli k
OK. Maka sebuah database sudah tersimpan dalam postgreSQL. Maka akan tampil
pada seperti berikut.
2. Setelah itu klik kanan pada database yang telah dibuat, pilih Restore, maka akan muncul
seperti gambar berikut ini.
Isikan Format yaitu Custom or tar, Filename yaitu letak dan nama database yang akan
di restore dengan file ekstensi .backup, Rolename yaitu postgres. Lalu klik restore.
3. Jika restore berhasil, maka akan muncul gambar berikut ini, dan klik Done
4. Hasil dari Restore database tersebut adalah seperti berikut
5. Aktifkan XAMPP terlebih dahulu.
6. Kemudian buka folder XAMPP yang disimpan pada Local Disk (C:), pilih htdocs, dan
kemudian extrak file yg diberikan ke dalam folder baru dengan nama webgis.
7. Buka file htdocs\webgis\webserver\config.php sesuaikan dengan host, user, password,
dbname yang dimiliki praktikan.
<?php
$host="localhost";
$user="postgres";
$password="root";
$port="5432";
$dbname="unand";
$link= pg_connect("host=".$host." port=".$port." dbname=".$dbname."
user=".$user." password=".$password) or die("Koneksi gagal");
?>
8. Kemudian save File tersebut dan tampilkan halaman melalui browser.
E. Instruksi Praktikum
1. Buka file htdocs\webgis\webclient\index.php tambahkan title halaman web nya dengan
nama dan no bp paraktikan seperti pada gambar dibawah ini.
2. Buka file htdocs\webgis\webclient\map.php kemudian ubah zoom menjadi 16 dan
ganti koordinat center menjadi koordinat gedung FTI, cari koordinat gedung FTI
menggunakan google map.
3. Kemudian save File tersebut dan tampilkan melalui browser