Install Sofware
(Xampp, PostgreSQL, PostGIS, phpPgAdmin, dan GeoServer)
A. Install Xampp
Xampp merupakan software yang opensource yang dapat didownload di XAMPP
Installers and Downloads for Apache Friends. Adapun langkah-langkah
menginstallnya sebagai berikut;
1. Double klik Xampp dan klik next
2. Klik next, lagi
3. Tentukan direktori dan folder yang digunakan dan klik next
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
4. Tentukan bahasa yang digunakan dan klik next dan klik next lagi
5. Xampp ready diinstall dan Klik next
6. Klik finish, proses install selesai
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
A.1. Masalah Dan Solusi Dalam Penginstallan Xampp
a. Apache tidak running
1. Buka control panel
2. Klik Program dan Programs and Features
3. Kemudian klik lagi Turn Windows features on or off
4. Klik Internet Information Services branch
5. Pastikan World Wide Web Services option tidak tercentang
6. Klik Ok
7. Restart PC.
8. Jalankan Xampp Control Panel
9. Jalankan Apache
b. Port-nya bentrok (kode port sudah digunakan sama software yang lain)
Solusinya, port Xampp diganti. Berikut langkah-langkahnya;
1. Buka XAMPP Control Panel
2. Dibaris Apache, klik Config
3. Pilih Apache ([Link]) option
4. Gunakan tombol control ctrl+ f, cari port-80 dan ganti dengan nilai yang beda
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
5. Klik tombol ctrl+ s (simpan)
Cara lain dari tahapan yang diatas, yaitu meng-stop World Wide Web Publishing Service.
1. Start dan running-kan service
2. Double klik World Wide Web Publishing Service
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
3. Klik Stop
4. Kemudian ganti startup type ke Manual
5. Klick OK
6. Buka kembali XAMPP Control Panel dan jalankan Apache
B. Install PostgreSQL
PostgreSQL dapat didownload di link berikut, Download PostgreSQL Database for
Windows, Linux and MacOS & 32-bit or 64-bit Versions | EDB ([Link]).
Agar postgresql terintegrasi dengan Xampp, maka tempat penginstalannya didalam
folder luaran install-an Xampp.
1. Double klik setup postgreSQL,
2. Install PostgreSQL di direktori C:\Xampp64\PostgreSQL\11
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
3. Klik Next
4. Buat password, klik next
5. Tentukan port (pastikan portnya tidak sedang digunakan), kemudian klik next
dan next lagi
6. Cek summary installannya, pastikan semuanya sudah benar, kemuadian klik
next dan klik lagi.
7. Setelah selesai, hilangkan centang pada stack builder dan klik finish.
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
8. Konfigurasi ekstensi database postgresql di Xampp. Buka folder
Xampp64/[Link], hilangkan komen baris 930 dan 932
9. Copy file [Link] dari c:/Xampp/php/[Link], kemudian di-paste di
c:/Xampp/apache/bin/
10. Cek hasilnya dengan meng double klik icon pgadmin, jika masih error seperti
berikut;
11. Hapus folder pgAdmin di folder C:\Users\Hp\AppData\Roaming
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
12. Kembali double klik icon
13. Saat sedang proses, klik kanan icon disisi kanan bawah screen
14. Klik configure dan ganti port numbern-ya, kemudian klik oke.
15. Shut down server dengan mengklik yes.
16. Kemudian klik kanan icon pgAdmin dan pilih Run as Administrator
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
17. Pastikan hasilnya seperti sebagai berikut;
18. Silahkan masukan password yang sudah dibuat pada saat proses penginstallan.
C. Install PostGIS
1. Double klik setup postgis dan klik Agree dan centang creat spatial database
2. Install postGIS di dalam folder PostgreSQL (C:\Xampp64\PostgreSQL\11) dan
buat passwordnya
3. Buat database (ex:db_spatial)
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
4. Setelah poses install selesai, klik ok
5. Jika [Link] tidak terinstall akan mucul pesan error berikut;
6. Untuk mengatasi permasalahan tersebut, buka folder
C:\Xampp64\PostgreSQL\11\bin\
copy file [Link] dan pastekan di C:\Program
Files\PostgreSQL\11\bin\postgisgui
7. Jalan icon postGIS kembali, pastikan hasilnya sebagai berikut
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
D. Install phpPgAdmin
Download software phppgadmin di link berikut Release phpPgAdmin 7.13.0 ·
phppgadmin/phppgadmin ([Link]).
1. Ekstrak file phpPgAdmin 7.13.0 di C:\Xampp64 dan sederhanakan namanya
menjadi phpPgAdmin
2. Edit file [Link] di folder C:\Xampp64\phpPgAdmin\conf
$conf['servers'][0]['host'] = ''; menjadi $conf['servers'][0]['host'] = 'localhost';
$conf['servers'][0]['pg_dump_path'] = '/usr/bin/pg_dump'; Menjadi
$conf['servers'][0]['pg_dump_path'] = ' C:\\Xampp64\\pgsql\\11\\bin\\pg_dump.exe’;
$conf['servers'][0]['pg_dumpall_path'] = '/usr/bin/pg_dumpall';Menjadi
$conf['servers'][0]['pg_dumpall_path'] = ' C:\\Xampp64\\pgsql\\11\\bin\\pg_dumpall.exe’;
$conf['extra_login_security'] = true; menjadi $conf['extra_login_security'] = false;
3. Kemudian buka file [Link] di folder c:\Xampp64\apache\conf\extra\
4. Tambahkan koding berikut;
Alias /phppgadmin "C:/Xampp64/phppgadmin/"
<directory "C:/Xampp64/phppgadmin">
AllowOverride AuthConfig
Require all granted
</directory>
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
5. Pastikan hasilnya seperti berikut;
E. Download dan Install Geoserver
1. Download java [Link]
2. Install java tersebut
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
3. Buka menu edit the system environment variables di start
4. Klik environment variables dan klik new pada system variables
5. Buat variable seperti gambar berikut
6. Download geoserver di link berikut [Link]
7. Double klik setup geoserver
8. Klik next, I Agree, next dan next lagi. Sesuaikan folder java-nya
9. Bagian geoserver data directory, pilih settingan default
10. Buat username dan passwordnya
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
11. Buat port baru
12. Pilih Run manually
13. Klik install
14. Klik start geoserver
15. Buka url [Link] dan pastikan hasilnya seperti
berikut
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
Memulai Membangun WebGIS
(Install CodeIgniter, Template AdminLTE 3, dan Leaflet)
A. Install CodeIgniter
1. Run Xampp Control Panel dan klik start pada baris apache
2. Paste CodeIgniter di direktori C:\xampp64\htdocs
3. Rename sesuai dengan tema webgis (ex: disasters)
4. Akses melalui browser dengan [Link]
5. Konfigurasi [Link] menggunakan text editor (VScode)
$autoload['libraries'] = array();
Menjadi
$autoload['libraries'] = array('session','form_validation','upload');
$autoload['helper'] = array();
Menjadi
$autoload['helper'] = array('url', 'file','form');
6. Konfigurasi [Link]
$config['base_url'] = '';
Menjadi
$config['base_url'] = '[Link]
config['index_page'] = '[Link]';
Menjadi
$config['index_page'] = '';
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
7. Buat file .htaccess dan isi dengan koding berikut;
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ [Link]/$1 [L]
Fungsi file .htaccess sebagai penghapus [Link] di url.
8. Cek root project dengan browser dan pastikan tidak error.
B. Install Template AdminLTE 3
1. Download template AdminLTE 3 di link Releases · ColorlibHQ/AdminLTE
([Link])
2. Buat folder asset di folder C:\xampp64\htdocs\disasters, dan pastekan template
AdminLTE 3 tersebut.
3. Rename template AdminLTE 3 menjadi template
4. Buat folder di view dengan nama layout (penamaan bebas) dan isi dengan file
berikut;
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
5. Tambahkan koding yang di bawah pada File [Link]
<?php
if ($visual) {
$this->load->view($visual);
}
6. Tambahkan koding yang di bawah pada File [Link]
<?php
require_once('[Link]');
require_once('[Link]');
require_once('[Link]');
require_once('[Link]');
require_once('[Link]');
7. Buka folder config, edit coding di file [Link] (di baris 52)
$route['default_controller'] = 'welcome';
Menjadi
$route['default_controller'] = 'home';
8. Buka folder controller, buat file [Link], isi dengan koding berikut;
9. Buka folder view, buat file [Link], isi dengan keterangan berikut (opsional);
10. Refresh root project di browser, pastikan hasilnya sudah seperti dibawah ini;
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
11. Model layout yang digunakan adalah top-nav, maka koding yang akan dicopas dari di
file [Link]. Berikut bentuk layoutnya;
Supaya proses penginstallan lebih efektif dan mudah dipahami, maka bagian koding/fitur
yang tidak dibutuhkan kita hapus dulu.
12. Menghapus fitur Search. Hapus koding yang terblock di dalam file top-
[Link]
13. Refresh browser, sehingga menghasilkan layout seperti berikut
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
14. Hapus coding fitur notifikasi dan auto-nav
Hapus koding yang di antara
<!-- Right navbar links -->
dengan
<!-- Content Wrapper. Contains page content -->
Kecuali </nav>
15. Refresh browser, sehingga menghasilkan layout seperti berikut
Sudah terhapus
16. Menghapus fitur/kolom yang ditandai dengan garis orange di
atas;
Hapus koding yang di antara
<!-- /. content-header -->
dengan
<!-- Cotrol Sidebar -->
Kecuali </nav>
17. Refresh browser, sehingga menghasilkan layout seperti berikut
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
18. Setelah bentuk layout sudah sesuai dengan yang kita inginkan, maka file
yang ada di folder layout ([Link], [Link], [Link],
dan [Link]) diisi satu persatu cut. Yang pertama, buka file top-
[Link] dan cut koding berikut;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>AdminLTE 3 | Top Navigation</title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="../../plugins/fontawesome-free/css/[Link]">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/[Link]">
<!-- Google Font: Source Sans Pro -->
<link href="[Link] rel="styleshee
t">
</head>
pindahkan ke dalam [Link]
19. Kembali buka file [Link], cut lagi koding berikut dan paste kan di
[Link];
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../../plugins/jquery/[Link]"></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/[Link]"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/[Link]"></script>
20. Tambahkan koding berikut pada setiap libraries di halaman [Link]
<?=base_url()?>asset/template/
21. Sehingga librariesnya menjadi sebagai berikut;
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
22. Refresh browser pastikan hasilnya sebagai berikut;
23. Buka lagi file [Link], cut koding berikut;
<body class="hold-transition layout-top-nav">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand-md navbar-light navbar-white">
<div class="container">
<a href="../../[Link]" class="navbar-brand">
<img src="../../dist/img/[Link]" alt="AdminLTE Logo" class="brand-image img-
circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<button class="navbar-toggler order-1" type="button" data-toggle="collapse" data-
target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
pastekan di file [Link]
24. Tambahkan koding ini <?=base_url()?>asset/template
Pada koding nav dan logo
<a href="../../[Link]" class="navbar-brand">
<img src="../../dist/img/[Link]" alt="AdminLTE Logo" class="brand-image img-
circle elevation-3"
25. Refresh browser pastikan hasilnya sebagai berikut;
26. Buka file [Link] cut koding berikut,
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline"> Anything you want </div>
<!-- Default to the left -->
<strong>Copyright © 2014-
2019 <a href="[Link] All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
</body>
</html>
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
pindahkan ke dalam file [Link]
27. Refresh browser pastikan hasilnya sebagai berikut;
28. Satu-satunya file di folder layout yang belum ada kodingnya, yaitu [Link]. oleh
karena itu, sisa koding yang di [Link] di cut dan pastekan di [Link].
29. Refresh browser pastikan hasilnya sebagai berikut;
C. Install [Link]
Langkah penginstallan [Link] sangat sederhana, yaitu dapat dilakukan melalui
penginstallan dari suatu plug in. Adapun langkah-langkahnya sebagai berikut;
1. Tentukan plug in apa yang ingin diinstall (ex: [Link] ).
2. Download plug in [Link] di link berikut;
[Link]
3. Ekstrak plug in tersebut di direktori C:\xampp64\htdocs\disasters\asset
4. Copy libraries [Link] di [Link]
<link rel="stylesheet" href="[Link] />
<script src="[Link]
5. Pastekan di [Link]
6. Buka folder C:\xampp64\htdocs\disasters\asset\[Link]-
master\examples\[Link]
7. Copy koding di baris 6 s/d 12 (kecuali libraries google) dan pastekan [Link]
8. Tambahkan koding <?=base_url()?>asset/[Link]-master
di libraries [Link] dan dilibraries [Link].
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
9. Tambahkan koding berikut di dalam viewhome;
<div class="content">
<div id="map" style="width: 100%; height: 650px;"></div>
</div>
10. Copy koding javascript di [Link], yaitu di baris 6 s.d158 dan pastekan di
[Link]
6 | <script>
Beserta semua isinya
158 | </script>
11. Khusus koding google dihapus yaitu;
// Google layers
var g_roadmap = new [Link]('ROADMAP');
var g_satellite = new [Link]('SATELLITE');
var g_terrain = new [Link]('TERRAIN');
// Google layers
var g_roadmap = new [Link]('ROADMAP');
var g_satellite = new [Link]('SATELLITE');
var g_terrain = new [Link]('TERRAIN');
12. Refresh browser pastikan hasilnya sebagai berikut;
13. Hilangkan komen koding berikut;
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
14. Hapus koding notifikasi berikut;
var popup = [Link]()
.setLatLng([-16, -54])
.setContent("The data that appears in this application are fictitious and do not represent actual
data!")
.openOn(map);
15. Satukan basemaps-nya
16. Khusus koding [Link] adalah opsional
17. Pastikan hasilnya seperti berikut;
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
18. Ganti coordinat center dan zoomnya sesuai dengan wilayah yang dipetakan
menjadi
a. Menambahkan basemaps yang baru
1. Tentukan basemaps, misalnya GoogleMpas, GoogleSatelliteHybrid, GoogleRoads,
dan EsriGraydark
2. Copy koding berikut dan pastekan di [Link]
3. Masukan koding berikut ke bagian layercontrol, tepatnya dibagian var baseMaps dan
[Link]
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
4. Cek hasilnya, dan pastikan hasilnya seperti gambar dibawah ini.
b. Menampilkan Fitur Mata Angin
1. Download icon mata angin
2. Tambahkan kedalam C:\xampp64\htdocs\disasters\asset (disini kami beri nama
‘demo’)
3. Tambahkan koding berikut kedalam [Link]
var north = [Link]({position: "bottomright"});
[Link] = function(map) {
var div = [Link]("div", "info legend");
[Link] = '<img src="<?=base_url()?>asset/demo/[Link]">';
return div; } [Link](map);
4. Cek hasilnya
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
c. Menampilkan Peta Orientasi
1. Download plug in nya di [Link]
2. Simpan C:\xampp64\htdocs\disasters\asset
3. Buka [Link] di C:\xampp64\htdocs\disasters\asset\Leaflet-MiniMap-master.
Pindahkan koding berikut ke [Link]
<!-- Minimap Plugins -->
<link rel="stylesheet" href="<?=base_url()?>asset/Leaflet-MiniMap-
master/src/[Link]" />
<script src="<?=base_url()?>asset/Leaflet-MiniMap-
master/src/[Link]" type="text/javascript"></script>
4. Buka [Link] di C:\xampp64\htdocs\disasters\asset\Leaflet-MiniMap-master.
Pindahkan koding berikut ke [Link]
var osmUrl='[Link]
var osm2 = new [Link](osmUrl, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });
var miniMap = new [Link](osm2, { toggleDisplay: true }).addTo(map);
5. Cek hasilnya
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
d. Menampilkan fitur scale bar
1. Masukan koding berikut kedalam [Link]
[Link]({metric: true}).addTo(map);
e. Menampilkan fitur pengukuran
1. Buka file [Link], masukan koding berikut;
<!-- Leaflet Draw -->
<link rel="stylesheet" href="[Link] />
<script src="[Link]
2. Buka file [Link], masukan koding berikut;
var drawnItems = [Link]()
[Link](new [Link]({
edit: {
featureGroup: drawnItems,
poly: {allowIntersection: false}},
draw: {
polygon: {
allowIntersection: false,
showArea: true
}}
}));
[Link]([Link], function (event) {
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
var layer = [Link];
[Link](layer);
});
3. Cek hasilnya
f. Menampilkan fitur tool pencarian lokasi(geocoder)
1. Buka [Link] masukan koding berikut;
<!-- Leaflet Geocoder -->
<link rel="stylesheet" href="[Link] />
<script src="[Link]
2. Buka [Link] masukan koding berikut;
[Link]().addTo(map);
3. Cek hasilnya
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
g. Menampilkan fitur Zoom to Layer
1. Buka [Link], masukan koding berikut;
<!-- Leaflet Zoom To Layer -->
<link rel="stylesheet" href="[Link]
<script src="[Link]
2. Buka [Link], masukan koding berikut;
var homebutton= [Link]('fa-home fa-lg', function()
{[Link]([-0.395, 100.823],7);}, 'home position',{ position: 'topright'});
[Link](map);
koordinat wajib sama dengan koordinat center wilayah yang dipetakan.
3. Cek hasilnya,
h. Menampilkan fitur full screen
1. Buka file [Link] tambahkan coding fullscreenControl: true, di atas koordinat
center.
2. Buka file [Link] tambahkan koding berikut;
<script src='[Link]
fullscreen/v1.0.1/[Link]'></script>
<link href='[Link]
fullscreen/v1.0.1/[Link]' rel='stylesheet' />
3. Cek hasilnya,
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
i. Menampilkan koordinat pointer
1. Download file plug in-nya di [Link]
2. Simpan di folder asset
3. Buka file [Link] tambahkan koding berikut;
<!-- Leaflet Coordinate -->
<script type="text/javascript" src="<?=base_url()?>asset/[Link]-
master/dist/[Link]"></script>
<link rel="stylesheet" href="<?=base_url()?>asset/[Link]-
master/dist/[Link]"/>
4. Buka file [Link] tambahkan koding berikut di atas koding scale bar;
[Link]({
position:"bottomleft",
useDMS:true,
labelTemplateLat:"N {y}",
labelTemplateLng:"E {x}",
useLatLngOrder:true
}).addTo(map);
5. Cek hasilnya,
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
Memperbaiki Tampilan Layout
(Judul, Logo, Warna Header dan Menu)
a. Judul
1. Buka file [Link]
Diganti dengan
hasilnya
2. Buka [Link]
<title>AdminLTE 3 | Top Navigation</title>
diganti dengan
<title>WebGIS | <?=$judul?></title>
Hasilnya
3. Buka [Link]
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
<span class="brand-text font-weight-light">AdminLTE 3</span>
Diganti dengan
<span class="brand-text font-weight-light">WebGIS|DMS</span>
hasilnya
b. Mengganti Logo
1. Buka file forder img (C:\xampp64\htdocs\disasters\asset\template\dist\img).
Tambahkan logo yang ingin dipakai, ex: [Link]
2. Buka [Link]
diganti dengan
<img src="<?=base_url()?>asset/template/dist/img/[Link]" alt="AdminLTE Logo" class="brand-
image img-circle elevation-3"
Hasilnya
c. Mengganti warna header (Top Nav)
1. Buka file [Link]
<nav class="main-header navbar navbar-expand-md navbar-light navbar-white">
Diganti dengan
<nav class="main-header navbar navbar-expand-md navbar-light navbar-navy">
hasilnya
d. Menganti warna menu
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916
1. Buka file [Link],
<span style="color:orange;"class="brand-text font-weight-light">WebGIS|DMS</span>
Diganti dengan/ditambah koding style=”color:orange”
<span style="color:orange;"class="brand-text font-weight-light">WebGIS|DMS</span>
hasilnya,
2. Buka file [Link] ( tambahkan koding style=”color:orange” pada setiap koding
menu)
<a href="[Link]" style="color:orange" class="nav-link">Home</a>
<a href="#" style="color:orange" class="nav-link">Contact</a>
<a id="dropdownSubMenu1"href="#" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false" style="color:orange"class="nav-link dropdown-toggle">Dropdown</a>
hasilnya
e. Menambah tombol menu login
Buka file [Link] tambahkan koding berikut;
<!-- Right navbar links -->
<ul class="order-1 order-md-3 navbar-nav navbar-no-expand ml-auto">
<li class="nav-item">
<a style="color:orange"href=""><i class="fas fa-compass"></i> Login</a>
</li>
</ul>
hasilnya
Roni Haryadi Saputra, [Link]., [Link]. WA : 0823-8812-8916