LAPORAN TUGAS

SISTEM INFORMASI GEOGRAFIS

Disusun Oleh :

Fery Setiawanto (1657201001925)

Fazrianoor Kaurie (1657201001907)

Akhmad Sugiannur (1657201001909)

Wira Pradana (165720100)

Ali Mukhlis (165720100)

UNIVERSITAS DARWAN ALI SAMPIT

KABUPATEN KOTAWARINGIN TUMUR
TAHUN 2018
 LEMBAR PENGESAHAN

Judul : “ Pemetaan Sistem Informasi Geografis

Perguruan Tinggi Yang Berada di Sampit “

Dosen : Suraji

Penyusun :

1. Fery Setiawanto (1657201001925)

2. Fazrianoor Kaurie (1657201001907)

3. Akhmad Sugiannur (1657201001909)

4. Wira Pradana (16572010019xx)

5. Ali Mukhlis (16572010019xx)

Kelas : FIKOM 5D

MENGETAHUI

Dosen Sistem Informasi Geografis

Suraji

1
 Kata Pengantar

Puji syukur kehadirat Tuhan Yang Maha Esa atas segala limpahan Rahmat, Inayah,

Taufik dan Hinayahnya sehingga kami dapat menyelesaikan penyusunan laporan tugas ini

dalam bentuk maupun isinya yang sangat sederhana. Semoga laporan ini dapat dipergunakan

sebagai salah satu acuan, petunjuk maupun pedoman bagi pembaca.

Harapan saya semoga laporan ini membantu menambah pengetahuan dan pengalaman

bagi para pembaca, sehingga kami dapat memperbaiki bentuk maupun isi laporan ini

sehingga kedepannya dapat lebih baik.

Laporan ini kami akui masih banyak kekurangan karena pengalaman yang saya miliki

sangat kurang. Oleh kerena itu saya harapkan kepada para pembaca untuk memberikan

masukan-masukan yang bersifat membangun untuk kesempurnaan laporan ini.

Sampit, 16 Desember 2018

Penyusun

2
 DAFTAR ISI

LEMBARAN PENGESAHAN..................................................................................................1
KATA PENGANTAR...............................................................................................................2
DAFTAR ISI..............................................................................................................................3
BAB I.........................................................................................................................................4
PENDAHULUAN......................................................................................................................4
1.1 LATAR BELAKANG.................................................................................................4
1.2 TUJUAN......................................................................................................................5
1.3 MANFAAT................................................................................................................5
BAB II........................................................................................................................................6
PEMBAHASAN........................................................................................................................6
2.1 SCRENSHOT PROGRAM........................................................................................6
2.1 HALAMAN LOKASI................................................................................................6
2.1 SOURCE CODE........................................................................................................7
BAB III.....................................................................................................................................22
PENUTUP................................................................................................................................22
3.1 KESIMPULAN.........................................................................................................22
3.2 SARAN/....................................................................................................................22

3
 BAB I

PENDAHULUAN

LATAR BELAKANG

Semakin berkembangnya Ilmu Pengetahuan dan Teknologi (IPTEK), dan

diiringi juga dengan perkembangan zaman yang cepat, sehingga tidak menutup

kemungkinan berpengaruh pada pola kehidupan manusia yang semakin maju terutama

pada aspek kehidupan keseharian, dalam menggunakan ilmu teknologi,

khususnya penggunaan teknologi telepon selular dan website.

Website merupakan suatu bentuk aplikasi yang dibuat dengan menggunakan

bahasa pemrograman PHP (Hypertext Preprocessor) bahasa ini digunakan untuk

membuat aplikasi yang dapat digunakan pada website. Dengan menggunakan PHP

sebagai penghubung antara HTML,JAVASCRIPT dan CSS sebagai tampilan yang

dapat memperindah dan mempercantik suatu website.

Mengingat semakin padatnya aktifitas di kehidupan zaman modern ini, maka

tidak dipungkiri lagi peran website ini sangat penting. Website bisa diakses

dimanapun dan kapanpun melalui apapun. Sepeti yang kita ketahui untuk

memudahkan masalah tersebut, fitur website mulai banyak diciptakan dengan

pertimbangan banyaknya kebutuhan dan kepentingan. kebutuhan manusia mencari

letak lokasi perguruan tinggi dan lain sebagainya.

Berdasarkan permasalahan yang timbul tersebut, maka penyusun akan

mencoba untuk membuat suatu aplikasi Pemetaan Sistem Informasi Geografis

Perguruan Tinggi di Sampit, dengan menggunakan website. Dengan interface  aplikasi

yang mudah digunakan bagi pengguna untuk mengakses aplikasi tersebut.

4
TUJUAN

Tujuan Umum :

Adapun tujuan umum dari penulisan ini adalah

1. Menambah pengetahuan lebih dalam lagi tentang aplikasi berbasis

website yang dibuat

Tujuan Khusus :

Tujuan khusus dari penulisan ini adalah sebagai berikut:

1. Untuk mengetahui bagaimana prosedur pembuatan aplikasi berbasis

web dengan menggunakan sistem pemetaan.

MANFAAT

Adapun manfaat dari pembuatan laporan ini adalah untuk mempermudah pengguna

baik melalui website dekstop, maupun mobile bisa mencari lokasi Perguruan tinggi

yang berada di kabupaten kotawaringin timur khususnya kota sampit yang ingin

mereka cari.

5
 BAB II

PEMBAHASAN

Screnshot Program

Halaman Index

Gambar. 1 Halaman Index

Halaman Lokasi

Gambar. 1 Halaman Index

SOURCE CODE

6
Halaman Index.php

2 <?php

3 $title = "Sistem Informasi Geografis PERGURUAN TINGGI DI SAMPIT";

4 include_once "header.php"; ?>

5 <div class="row">

6 <div class="col-md-12">

7 <div class="panel panel-info panel-dashboard">

8 <div class="panel-heading centered">

9 <h2 class="panel-title"><strong> - Welcome Message

- </strong></h2>

10 </div>

11 <div class="panel-body">

12 <div class="centered">

13 <h4>Selamat Datang di Sistem Informasi Geografis

Perguruan Tinggi di Sampit Kalimantan Tengah Indonesia.</h4>

14 <h4>Silahkan memilih menu diatas untuk

melanjutkan.</h4>

15 </div>

16 </div>

17 </div>

18 </div>

19 </div>

20 </div>

21 </div>

22 <?php include_once "footer.php"; ?>

Halaman Lokasi.php

7
23 <?php

24 $title = "Peta Perguruan Tinggi diSampit";

25 include_once "header.php";

26 ?>

27 <div class="row">

28 <div class="col-md-12">

29 <div class="panel panel-info panel-dashboard centered">

30 <div class="panel-heading">

31 <h2 class="panel-title"><strong> - TAMPILAN PETA -

</strong></h2>

32 <div id="map">

33 <div id="popup" class="ol-popup">

34 <a href="#" id="popup-closer" class="ol-popup-

closer"></a>

35 <div id="popup-content"></div>

36 </div>

37 </div>

38 <script src="resources/qgis2web_expressions.js"></script>

39 <script src="resources/polyfills.js"></script>

40 <script src="./resources/functions.js"></script>

41 <script src="./resources/ol.js"></script>

42 <script src="./resources/ol3-layerswitcher.js"></script>

43 <script src="layers/Hutan_1.js"></script><script

src="layers/Sungai_2.js"></script><script

src="layers/TamanKota_3.js"></script><script

src="layers/Perumahan_4.js"></script><script

src="layers/PerguruanTinggi_5.js"></script><script

src="layers/Jln_prof_6.js"></script><script

8
 src="layers/Jln_Kab_7.js"></script><script

src="layers/Kampus_8.js"></script>

44 <script src="styles/Hutan_1_style.js"></script><script

src="styles/Sungai_2_style.js"></script><script

src="styles/TamanKota_3_style.js"></script><script

src="styles/Perumahan_4_style.js"></script><script

src="styles/PerguruanTinggi_5_style.js"></script><script

src="styles/Jln_prof_6_style.js"></script><script

src="styles/Jln_Kab_7_style.js"></script><script

src="styles/Kampus_8_style.js"></script>

45 <script src="./layers/layers.js"

type="text/javascript"></script>

46 <script src="./resources/qgis2web.js"></script>

47 <script src="./resources/Autolinker.min.js"></script>

48 <a href="file:///C:/xampp/htdocs/bootstrap/index.html"

width="600" height="450" frameborder="0" style="border:0"

allowfullscreen></a>

49 </div>

50 </div>

51 </div>

52 </div>

53 </div>

54 </div>

55 <?php include_once "footer.php"; ?>

56 <?php

57 $title = "DAFTAR UNIVERSITAS YANG BERADA DI SAMPIT";

58 include_once "header.php";

9
59 include_once "koneksi.php"; ?>

60

61 <div class="row">

62 <div class="col-md-12">

63 <div class="panel panel-info panel-dashboard">

64 <div class="panel-heading centered">

65 <h2 class="panel-title"><strong> - <?php echo $title ?> -

</strong></h2>

66 </div>

67 <div class="panel-body">

68 <table class="table table-bordered table-striped table-

admin">

69 <thead>

70 <tr>

71 <th width="10%" bgcolor="#FFFF00">No.</th>

72 <th width="30%" bgcolor="#FFFF00">Nama Perguruan

Tinggi</th>

73 <th width="13%" bgcolor="#FFFF00">Alamat</th>

74 <th width="27%" bgcolor="#FFFF00">Jurusan</th>

75 </tr>

76 </thead>

77 <tbody>

78 <?php

79

$data=file_get_contents('http://localhost/bootstrap/ambildata.php');

80 $no=1;

81 if(json_decode($data,true)){

82 $obj = json_decode($data);

10
83 foreach($obj->results as $item){

84 ?>

85 <tr>

86 <td bgcolor="#00FF00"><?php echo $no; ?></td>

87 <td bgcolor="#00FF00"><?php echo $item->nama_kampus; ?

></td>

88 <td bgcolor="#00FF00"><?php echo $item->alamat; ?></td>

89 <td bgcolor="#00FF00"><?php echo $item->jurusan; ?

></td>

90 <td bgcolor="#00FF00" class="ctr">

91 <div class="btn-group">

92 <a target="_blank" href="detail.php?id=<?php echo

$item->id_uni; ?>" rel="tooltip" data-original-title="Lihat File" data-

placement="top" class="btn btn-primary">

93 <i class="fa fa-map-marker"> </i> Detail dan

Lokasi</a>&nbsp;

94 </div>

95 </td>

96 </tr>

97 <?php $no++; }}

98

99 else{

100 echo "data tidak ada.";

101 } ?>

102

103 </tbody>

104 </table>

105 </div>

11
106 </div>

107 </div>

108 </div>

109 </div>

110 </div>

111

112 <?php include_once "footer.php" ?>

113 <?php

114 $id = $_GET['id'];

115 include_once "ambildata_id.php";

116 $obj = json_decode($data);

117 $titles="nama_kampus";

118 $ids="id_uni";

119 $al="alamat";

120 $jur="jurusan";

121

122 foreach($obj->results as $item){

123 $titles.=$item->nama_kampus;

124 $ids=$item->id_uni;

125 $al=$item->alamat;

126 $jur=$item->jurusan;

127

128 }

129

130 $title = "Detail dan Lokasi : ".$titles;

131 include_once "header.php"; ?>

132

12
133 <script src="file:///C:/xampp/htdocs/bootstrap/index.html"></script>

134

135 <script>

136

137 function initialize() {

138 var myLatlng = new google.maps.LatLng(<?php echo $lat ?>,<?php

echo $long ?>);

139 var mapOptions = {

140 zoom: 10,

141 center: myLatlng

142 };

143

144 var map = new google.maps.Map(document.getElementById('map-

canvas'), mapOptions);

145

146 var contentString = '<div id="content">'+

147 '<div id="siteNotice">'+

148 '</div>'+

149 '<h1 id="firstHeading" class="firstHeading"><?php echo $titles

?></h1>'+

150 '<div id="bodyContent">'+

151 '<p><?php echo $alamat ?></p>'+

152 '</div>'+

153 '</div>';

154

155 var infowindow = new google.maps.InfoWindow({

156 content: contentString

157 });

13
158

159 var marker = new google.maps.Marker({

160 position: myLatlng,

161 map: map,

162 title: 'Maps Info',

163 icon:'img/spbu.jpg'

164 });

165 google.maps.event.addListener(marker, 'click', function() {

166 infowindow.open(map,marker);

167 });

168 }

169

170 google.maps.event.addDomListener(window, 'load', initialize);

171

172 </script>

173 <div class="row">

174 <div class="col-md-5">

175 <div class="panel panel-info panel-dashboard">

176 <div class="panel-heading centered">

177 <h2 class="panel-title"><strong> - Lokasi -

</strong></h4>

178 </div>

179 <div class="panel-body">

180 <div id="map-canvas"

style="width:100%;height:380px;"></div>

181 </div>

182 </div>

183 </div>

14
184 <div class="col-md-7">

185 <div class="panel panel-info panel-dashboard">

186 <div class="panel-heading centered">

187 <h2 class="panel-title"><strong> - Detail -

</strong></h4>

188 </div>

189 <div class="panel-body">

190 <table class="table">

191 <tr>

192 <th>Item</th>

193 <th>Detail</th>

194 </tr>

195 <tr>

196 <td>Nama Perguruan Tinggi</td>

197 <td><h4><?php echo $titles ?></h4></td>

198 </tr>

199 <tr>

200 <td>Alamat</td>

201 <td><h4><?php echo $alamat ?></h4></td>

202 </tr>

203 <tr>

204 <td>Jurusan</td>

205 <td><h4><?php echo $jurusan ?></h4></td>

206 </tr>

207

208 </table>

209 </div>

210 </div>

15
211 </div>

212

213

214 </div>

215 </div>

216 </div>

217 <?php include_once "footer.php"; ?>

218 <div class="footer footer1">

219 <div class="container">

220 <div class="row">

221 <div class="col-md-4 col-md-offset-4">

222 <img src="img/logo-unda-sampit.png" width="72"

height="72" />

223 <h4 class="white">Sistem Informasi Geografis Perguruan

Tinggi Di Sampit</h4>

224 <h3 class="white">Kalimantan Tengah Indonesia</h3>

225 <ul class="list-inline">

226 <li><a href="" class="link-footer">Beranda</a></li>

227 <li><a href="" class="link-footer">Petunjuk

Penggunaan</a></li>

228 <li><a href="" class="link-footer">Tentang</a></li>

229 </ul>

230 <h5 class="white">Copyright &copy; Perguruan Tinggi Sampit

(Universitas Darwan Ali) 2018</h5>

231 </div>

232 </div>

233 </div>

234 </div>

16
235

236 <!-- Modal -->

237 <div class="modal fade" id="about" tabindex="-1" role="dialog" aria-

labelledby="myModalLabel" aria-hidden="true">

238 <div class="modal-dialog">

239 <div class="modal-content">

240 <div class="modal-header">

241 <button type="button" class="close" data-

dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-

only">Close</span></button>

242 <h4 class="modal-title" id="myModalLabel">About</h4>

243 </div>

244 <div class="modal-body">

245 <h4>SISTEM INFORMASI GEOGRAFIS PERGURUAN TINGGI YANG BERADA

DI KABUPATEN KOTAWARINGIN TIMUR BERBASIS WEBGIS</h4>

246 <p>Program ini dibuat oleh Kelompok :

247 <p>Fery

Setiawanto (1657201001925)</p>

248 <p>Fazriyanor Kaurie

(1657201001907)</p>

249 <p>Wira Pradana

(1657201001928)</p>

250 <p>Akhmad Sugiannur

(1657201001909)</p>

251 <p>Ali Mukhlis

(1657201001932)</p>

252 Yang mana pembuatan program ini bertujuan sebagai tugas UAS

mata kuliah GIS tahun 2018.</p>

17
253 <p>Semoga melalui program ini dapat memberikan manfaat dan

informasi berupa nama-nama, jurusan, dan lokasi perguruan tinggi yang

ada di Kabupaten Kotawaringin Timur kepada pengujung.</p>

254 </div>

255 </div>

256 </div>

257 </div>

258

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

260 <script src="js/bootstrap-hover-dropdown.js"></script>

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

262 <script src="js/jquery.dataTables.min.js"></script>

263 <script src="js/datatable-bootstrap.js"></script>

264

265 </body>

266 </html>

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

<title><?php echo $title; ?></title>

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

<link rel="stylesheet" href="css/font-awesome.min.css">

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

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

18
 <script

src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>

<div class="container">

<div class="row">

<div class="tengah">

<div class="head-depan tengah">

<div class="row">

<div class="col-md-1">

<img class="img-responsive margin-b10" src="img/logo-unda-

sampit.png" width="100" height="100" alt="Logo Universitas Darwan Ali" />

</div>

<div class="col-md-11">

<h1 class="judul-head">Sistem Informasi Geografis

Perguruan Tinggi di Sampit Kalimantan Tengah Indonesia</h1>

<p><i class="fa fa-map-marker fa-fw"></i> Sistem Informasi

Tentang Perguruan Tinggi Yang Berada di Kalimantan Tengah Khususnya Kota

Sampit Kabupaten Kotawaringin Timur</p>

</div>

</div>

<hr class="hr1 margin-b-10" />

</div>

</div>

</div>

</div>

<div class="container margin-b70">

<nav class="navbar navbar-default navbar-utama" role="navigation">

19
 <!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-

toggle="collapse" data-target=".navbar-ex1-collapse">

<span class="sr-only">Status</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<!-- Collect the nav links, forms, and other content for toggling

-->

<div class="collapse navbar-collapse navbar-ex1-collapse">

<ul class="nav navbar-nav">

<li><a href="index.php"><i class="fa fa-home"></i> HALAMAN

DEPAN</a></li>

<li><a href="data.php"><i class="fa fa-list-ul"></i> DAFTAR

PERGURUAN TINGGI DI SAMPIT</a></li>

<li><a href="peta.php"><i class="fa fa-map-marker"></i> PETA

PERGURUAN TINGGI DI SAMPIT</a></li>

<li><a href="about.php" data-toggle="modal" data-

target="#about"><i class="fa fa-user"></i> ABOUT</a></li>

</ul>

</div><!-- /.navbar-collapse -->

</nav>

267

20
Koneksi.php

268 <?php

269 $koneksi =

mysqli_connect("localhost","root","","gis");

270

271 // Check connection

272 if (mysqli_connect_errno()){

273 echo "Koneksi database gagal : " .

mysqli_connect_error();

274 }

275

276 ?>

BAB III

PENUTUP

KESIMPULAN

Dengan laporan Sistem Informasi Geografis ini, maka dapat disimpulkan mengenai

Informasi geografis dikota Sampit bahwa cukup banyak sekali perguruan tinggi yang

berada di kabupaten kotawaringin timur di antaranya meliputi universitas darawan ali

sampit, sekolah tinggi ilmu ekonomi, sekolah keguruan dan ilmu Pendidikan, sekolah

tinggi ilmu hokum, akademi keperawatan, akadami kebidanan, dan lpp quantum.

SARAN

21
 Menurut kami, masih banyak hal-hal disampit yang perlu diperbaiki demi menyambut

era globalisasi. Termasuk dibidang teknologi dan informasi oleh karena itu demi

membuat sampit menjadi lebih maju di perlukannya perkembangan inovasi dan sdm

yang memadai agar sampit mampu bersaing dengan kota-kota lain yang berada di luar

pulau sampit itu sendiri.

22