TUGAS PRAKTIKUM GIS

2020/2021
NIM : 1911521002 Kelas : 02
Nama : Ginda Teguh Modul : IX
Imani
Tgl : 16 November Asisten Modul : Athifah Zahra
Prak 2020 (Perbaikan
tanggal 12
Desember 2020)
Dosen : Rahmatika Pratama Santi, MT
Pengampu

JAWABAN TUGAS

Screenshoot setiap Langkah

Langka Hasil Screenshoot

h

1
2

3
4

5
 6

Screenshoot Tampilan Fungsional

Source Code

Map.php
 <!-- Google Maps API Key - Use your own API key to enable the map feature.
More information on the Google Maps API can be found at
https://developers.google.com/maps/ -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyDgpfxdQ0Ep_nieNjV64u4yXWeSFHAT4BE&callback=initMap"></script>

<!-- jQuery -->

<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->

<script src="js/bootstrap.min.js"></script>

<!-- Plugin JavaScript -->

<script src="js/jquery.easing.min.js"></script>

<!-- Custom Theme JavaScript -->

<script src="js/grayscale.js"></script>

<!--Fancybox-->
<script type="text/javascript" src="fancy/jquery.mousewheel-
3.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 pencarian -->

<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.getElementById("
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/modul9/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: 18,
center: new google.maps.LatLng(-0.45285,100.40504),
mapTypeId: google.maps.MapTypeId.HYBRID
});
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.gid;
var nama_pemil = data.properties.nama_pemil;
var alamat= data.properties.alamat;
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
console.log(results);
$('.listdaftar').append('<p><b><a class="fancybox"
href="#berita'+id+'"">'+nama_pemil+'</a></b></p><p>Travel Mode : <select
id="travelmode"><option value="DRIVING">Driving</option><option
value="WALKING">Walking</option><option
value="BICYCLING">Bicycling</option><option
value="TRANSIT">Transit</option></select></p><button id="'+i+'"
class="buttongetdirection">Get Direction</button><br><br><div
class="panel"></div>');
$('#berita').append('<div id="berita'+id+'"
style="width:600px;display:none;text-
align:justify;"><h2><b><center>'+nama_pemil+'</b></h2><br><br><center><img
src="'+server+'/'+gambar+'" style="width:80%;"></center><br><br><p
style="margin:5px;"></p></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,
icon: "http://icons.iconarchive.com/icons/icons-
land/vista-map-markers/32/Map-Marker-Marker-Outside-Azure-icon.png",
title: nama_pemil
//shadow: iconBase + 'schools_maps.shadow.png'
});
 markerarray.push(marker); //menampilkan informasi pada
marking
var isiinfo="<div style='width:300px; min-
height:100px;'><b><h2><center>"+nama_pemil+"</center></h2></b><center><img
src='"+server+"/"+gambar+"'
style='width:100%;'></center><br><center><p>"+alamat+"</p></center></div>";
createInfoWindow(marker, isiinfo);
map.setCenter(titiktengah);
}
}

$('.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('');
$('#berita').appendTo("body").modal(show);
});
}

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 calcRoute(start, end) {

var travelmode =
document.getElementById("travelmode").options[document.getElementById("trave
lmode").selectedIndex].value;
directionsService = new google.maps.DirectionsService();
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode[travelmode],
unitSystem: google.maps.UnitSystem.METRIC,
provideRouteAlternatives: true
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
 });
directionsDisplay = new google.maps.DirectionsRenderer({draggable:
false});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('paneldirection'));
}

function clearmarkergeo(){
for (var i = 0; i < markerarraygeo.length; i++) {
markerarraygeo[i].setMap(null);
}
markerarraygeo=[];
}

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(-0.45285,100.40504);
var image = 'http://icons.iconarchive.com/icons/icons-land/vista-map-
markers/32/Map-Marker-Ball-Pink-icon.png';
geomarker = new google.maps.Marker({
map: map,
position: pos,
icon: image,
animation: google.maps.Animation.DROP
});
map.panTo(pos);
infowindow = new google.maps.InfoWindow();
infowindow.setContent('Posisi Anda Sekarang');
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');
var search = document.getElementById("cari")
script1.src = server+'/caripeta.php?idjenis='+hasil+'';
document.getElementsByTagName('head')[0].appendChild(script1);
clearroute();
});
});

</script>

<!-- membuat pencarian dan peta -->

<div class="container">
<div class="col-md-8 col-lg-offset-2">
<div class="searchbox" style="text-align: center;">
<h2>Pilih Tipe Objek :</h2>
<select class="custom-select" name="selecttipe" id="selecttipe"
class="custom-select" placeholder="Kata kunci" style="color: black;">
<option>- Tipe -</option>
</select>
<select class="custom-select" name="selectjenis" id="selectjenis"
placeholder="Jenis" style="color: black;">
<option>- Pilihan -</option>
</select>
<button id="cari" class="btn blue" >SEARCH</button>
</div>
</div>
</div>
<br>
<div id="berita"></div>

<div class="col-md-4">
<div class="control-group">
<div class="controls">
<div id="daftar" style="float: left;">
 <div class="listdaftar"></div>
</div>
</div>
</div>
</div>

<div class="col-md-8">
<div class="control-group" style="float: right;">
<div id="map_canvas" style="height: 500px; width: 800px;"></div>
</div>
</div>

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["id_jenis"];

$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.geom)::json As geometry ,
row_to_json((SELECT l FROM (SELECT
gid,nama_pemil,alamat,img,id_jenis,
row_to_json((SELECT k FROM (SELECT
ST_X(ST_CENTROID(geom)) AS lng, ST_Y(ST_CENTROID(geom))
AS lat) AS k)) AS center) As l )) As properties FROM
pgis02_region 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";
$pass = "ginda";
$port = "5433";
$dbname = "modul9_1002";
$conn = pg_connect("host=".$host." port=".$port." dbname=".$dbname."
user=".$user." password=".$pass)
or die("Gagal");
?>

Layer.php
<?php
include("config.php");
$sql = "SELECT ST_asgeojson(geom) AS geometry,
gid,nama_pemil,alamat,img,id_jenis FROM pgis02_region";
$result = pg_query($sql);
var_dump($isinya = pg_fetch_assoc($result));
$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['gid'],
'nama' => $isinya['nama_pemil'],
'alamat' => $isinya['alamat'],

)
);
array_push($hasil['features'], $features);
}
echo json_encode($hasil);
?>

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="">

<title>Geographic Information Sistem Andalas University</title>

<!-- Bootstrap Core CSS -->

<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->

<link href="css/grayscale.css" rel="stylesheet">

<!-- Custom Fonts -->

 <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link href="http://fonts.googleapis.com/css?
family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700"
rel="stylesheet" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media
queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file://
-->
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script
src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

<!-- Navigation -->

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"></i> <span
class="light">GIS</span> Universitas Andalas
</a>
</div>

<!-- Collect the nav links, forms, and other content for
toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-
collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from
about link when scrolled up past about section -->
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#peta">Map</a>
 </li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

<!-- Intro Header -->

<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">GIS</h1>
<p class="intro-text">Sistem Informasi
Geografis<br>Universitas Andalas<br>Laboratory of Geographic Information
System</p>
<a href="#peta" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>

<div></div>
<!-- Map Section -->
<div id="peta" class="container content-section" style="width: 1350px;">
<?php
include 'map.php';
?>
</div>

<!-- About Section -->

<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<br>
<h2>About</h2>
<p>Praktikum Modul 9 Sistem Informasi Geografis</p>
</div>
 </div>
</section>

<!-- Footer -->

<footer>
<div class="container text-center">
<p>Copyright &copy; Ginda</p>
</div>
</footer>

</body>
</html>
https://drive.google.com/drive/folders/1jw_Gp5Flkj4HYN510_YgE_kNLhnbwGI2?usp=sharing