Tutorial Install Software

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, S.Si., M.Sc. 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

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 (httpd.conf) option

4. Gunakan tombol control ctrl+ f, cari port-80 dan ganti dengan nilai yang beda

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

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 (enterprisedb.com).
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

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.

8. Konfigurasi ekstensi database postgresql di Xampp. Buka folder
Xampp64/php.ini, hilangkan komen baris 930 dan 932
9. Copy file libpq.dll dari c:/Xampp/php/libpq.dll, 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

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

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)

4. Setelah poses install selesai, klik ok
5. Jika libintl-9.dll tidak terinstall akan mucul pesan error berikut;
6. Untuk mengatasi permasalahan tersebut, buka folder

C:\Xampp64\PostgreSQL\11\bin\
copy file libintl-9.dll dan pastekan di C:\Program
Files\PostgreSQL\11\bin\postgisgui
7. Jalan icon postGIS kembali, pastikan hasilnya sebagai berikut

D. Install phpPgAdmin
Download software phppgadmin di link berikut Release phpPgAdmin 7.13.0 ·
phppgadmin/phppgadmin (github.com).
1. Ekstrak file phpPgAdmin 7.13.0 di C:\Xampp64 dan sederhanakan namanya

menjadi phpPgAdmin
2. Edit file config.inc.php 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 httpd-Xampp.conf 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>

5. Pastikan hasilnya seperti berikut;
E. Download dan Install Geoserver

1. Download java https://www.java.com/en/download/
2. Install java tersebut

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 http://geoserver.org/download/

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

11. Buat port baru
12. Pilih Run manually
13. Klik install
14. Klik start geoserver
15. Buka url http://localhost:8181/geoserver/web/ dan pastikan hasilnya seperti

berikut

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 http://localhost/disasters/
5. Konfigurasi autoload.php 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 config.php
$config['base_url'] = '';
Menjadi
$config['base_url'] = 'http://localhost/disasters/';
config['index_page'] = 'index.php';
Menjadi
$config['index_page'] = '';

7. Buat file .htaccess dan isi dengan koding berikut;
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
Fungsi file .htaccess sebagai penghapus index.php 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
(github.com)
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;

5. Tambahkan koding yang di bawah pada File viewcontent.php
<?php
if ($visual) {
$this->load->view($visual);
}
6. Tambahkan koding yang di bawah pada File viewunion.php

<?php
require_once('viewhead.php');
require_once('viewheader.php');
require_once('viewnav.php');
require_once('viewcontent.php');
require_once('viewfooter.php');
7. Buka folder config, edit coding di file routes.php (di baris 52)
$route['default_controller'] = 'welcome';
Menjadi
$route['default_controller'] = 'home';
8. Buka folder controller, buat file Home.php, isi dengan koding berikut;
9. Buka folder view, buat file viewhome.php, isi dengan keterangan berikut (opsional);
10. Refresh root project di browser, pastikan hasilnya sudah seperti dibawah ini;

11. Model layout yang digunakan adalah top-nav, maka koding yang akan dicopas dari di
file top-nav.html. 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-
nav.html
13. Refresh browser, sehingga menghasilkan layout seperti berikut

14. Hapus coding fitur notifikasi dan auto-nav
Hapus koding yang di antara

dengan

Kecuali </nav>
Sudah terhapus
16. Menghapus fitur/kolom yang ditandai dengan garis orange di

atas;
Hapus koding yang di antara

dengan

Kecuali </nav>

18. Setelah bentuk layout sudah sesuai dengan yang kita inginkan, maka file
yang ada di folder layout (viewhead.php, viewheader.php, viewfooter.php,
dan viewnav.php) diisi satu persatu cut. Yang pertama, buka file top-
nav.html 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>

<link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">

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

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="styleshee
t">
</head>
pindahkan ke dalam viewhead.php
19. Kembali buka file top-nav.html, cut lagi koding berikut dan paste kan di
viewhead.php;


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

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

<script src="../../dist/js/adminlte.min.js"></script>
20. Tambahkan koding berikut pada setiap libraries di halaman viewhead.php
<?=base_url()?>asset/template/
21. Sehingga librariesnya menjadi sebagai berikut;

22. Refresh browser pastikan hasilnya sebagai berikut;
23. Buka lagi file top-nav.html, cut koding berikut;

<body class="hold-transition layout-top-nav">
<div class="wrapper">

<nav class="main-header navbar navbar-expand-md navbar-light navbar-white">
<div class="container">
<a href="../../index3.html" class="navbar-brand">
<img src="../../dist/img/AdminLTELogo.png" 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 viewheader.php

24. Tambahkan koding ini <?=base_url()?>asset/template
Pada koding nav dan logo
<a href="../../index3.html" class="navbar-brand">
<img src="../../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-
circle elevation-3"
26. Buka file top-nav.html cut koding berikut,


<footer class="main-footer">

<div class="float-right d-none d-sm-inline"> Anything you want </div>

<strong>Copyright © 2014-
2019 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>
</div>

</body>
</html>

pindahkan ke dalam file viewfooter.php
28. Satu-satunya file di folder layout yang belum ada kodingnya, yaitu viewnav.php. oleh
karena itu, sisa koding yang di top-nav.html di cut dan pastekan di viewnav.php.
C. Install Leaflet.js
Langkah penginstallan Leaflet.js 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: Leaflet.StyledLayerControl ).

2. Download plug in Leaflet.StyledLayerControl di link berikut;
https://github.com/davicustodio/Leaflet.StyledLayerControl
3. Ekstrak plug in tersebut di direktori C:\xampp64\htdocs\disasters\asset
4. Copy libraries leaflet.js di https://leafletjs.com/download.html
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
5. Pastekan di viewhead.php
6. Buka folder C:\xampp64\htdocs\disasters\asset\Leaflet.StyledLayerControl-
master\examples\example2.html
7. Copy koding di baris 6 s/d 12 (kecuali libraries google) dan pastekan diviewhead.php
8. Tambahkan koding <?=base_url()?>asset/Leaflet.StyledLayerControl-master
di libraries Leaflet.StyledLayerControl dan dilibraries bing.js.

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 example2.html, yaitu di baris 6 s.d158 dan pastekan di
viewhome.php
6 | <script>
Beserta semua isinya
158 | </script>
11. Khusus koding google dihapus yaitu;
// Google layers
var g_roadmap = new L.Google('ROADMAP');
var g_satellite = new L.Google('SATELLITE');
var g_terrain = new L.Google('TERRAIN');
// Google layers
var g_roadmap = new L.Google('ROADMAP');
var g_satellite = new L.Google('SATELLITE');
var g_terrain = new L.Google('TERRAIN');
13. Hilangkan komen koding berikut;

14. Hapus koding notifikasi berikut;
var popup = L.popup()
.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 control.addBaselayer adalah opsional

17. Pastikan hasilnya seperti berikut;

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 viewhome.php
3. Masukan koding berikut ke bagian layercontrol, tepatnya dibagian var baseMaps dan
control.addBaseLayer

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 viewhome.php

var north = L.control({position: "bottomright"});
north.onAdd = function(map) {
var div = L.DomUtil.create("div", "info legend");
div.innerHTML = '<img src="<?=base_url()?>asset/demo/nautical.png">';
return div; } north.addTo(map);
4. Cek hasilnya

c. Menampilkan Peta Orientasi
1. Download plug in nya di https://github.com/Norkart/Leaflet-MiniMap
2. Simpan C:\xampp64\htdocs\disasters\asset
3. Buka example.html di C:\xampp64\htdocs\disasters\asset\Leaflet-MiniMap-master.

Pindahkan koding berikut ke viewhead.php

<link rel="stylesheet" href="<?=base_url()?>asset/Leaflet-MiniMap-
master/src/Control.MiniMap.css" />
<script src="<?=base_url()?>asset/Leaflet-MiniMap-
master/src/Control.MiniMap.js" type="text/javascript"></script>
4. Buka example.html di C:\xampp64\htdocs\disasters\asset\Leaflet-MiniMap-master.
Pindahkan koding berikut ke viewhome.php
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
var osm2 = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });
var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);
5. Cek hasilnya

d. Menampilkan fitur scale bar
1. Masukan koding berikut kedalam viehome.php
L.control.scale({metric: true}).addTo(map);
e. Menampilkan fitur pengukuran

1. Buka file viewhead.php, masukan koding berikut;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
2. Buka file viewhome.php, masukan koding berikut;
var drawnItems = L.featureGroup()
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems,
poly: {allowIntersection: false}},
draw: {
polygon: {
allowIntersection: false,
showArea: true
}}
}));
map.on(L.Draw.Event.CREATED, function (event) {

var layer = event.layer;
drawnItems.addLayer(layer);
});
3. Cek hasilnya
f. Menampilkan fitur tool pencarian lokasi(geocoder)

1. Buka viewhead.php masukan koding berikut;

<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
2. Buka viewhome.php masukan koding berikut;
L.Control.geocoder().addTo(map);
3. Cek hasilnya

g. Menampilkan fitur Zoom to Layer
1. Buka viewhead.php, masukan koding berikut;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
2. Buka viewhome.php, masukan koding berikut;
var homebutton= L.easyButton('fa-home fa-lg', function()
{map.setView([-0.395, 100.823],7);}, 'home position',{ position: 'topright'});
homebutton.addTo(map);
koordinat wajib sama dengan koordinat center wilayah yang dipetakan.
3. Cek hasilnya,
h. Menampilkan fitur full screen

1. Buka file viehome.php tambahkan coding fullscreenControl: true, di atas koordinat
center.
2. Buka file viewhead.php tambahkan koding berikut;

<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-
fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-
fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
3. Cek hasilnya,

i. Menampilkan koordinat pointer
1. Download file plug in-nya di https://github.com/MrMufflon/Leaflet.Coordinates
2. Simpan di folder asset
3. Buka file viewhead.php tambahkan koding berikut;


<script type="text/javascript" src="<?=base_url()?>asset/Leaflet.Coordinates-
master/dist/Leaflet.Coordinates-0.1.5.min.js"></script>
<link rel="stylesheet" href="<?=base_url()?>asset/Leaflet.Coordinates-
master/dist/Leaflet.Coordinates-0.1.5.css"/>
4. Buka file viewhome.php tambahkan koding berikut di atas koding scale bar;
L.control.coordinates({
position:"bottomleft",
useDMS:true,
labelTemplateLat:"N {y}",
labelTemplateLng:"E {x}",
useLatLngOrder:true
}).addTo(map);
5. Cek hasilnya,

Memperbaiki Tampilan Layout
(Judul, Logo, Warna Header dan Menu)
a. Judul
1. Buka file viewnav.php
Diganti dengan
hasilnya
2. Buka viewhead.php
<title>AdminLTE 3 | Top Navigation</title>
diganti dengan
<title>WebGIS | <?=$judul?></title>
Hasilnya
3. Buka viewheader.php

<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: dms.png
2. Buka viewheader.php
diganti dengan
<img src="<?=base_url()?>asset/template/dist/img/dms.png" alt="AdminLTE Logo" class="brand-
image img-circle elevation-3"
Hasilnya
c. Mengganti warna header (Top Nav)

1. Buka file viewheader.php
<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

1. Buka file viewheader.php,
<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 vienav.php ( tambahkan koding style=”color:orange” pada setiap koding

menu)
<a href="index3.html" 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 viewnav.php tambahkan koding berikut;

<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

Tutorial Install Software

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial Install Software

Diunggah oleh

Hak Cipta:

Format Tersedia

Install Sofware

(Xampp, PostgreSQL, PostGIS, phpPgAdmin, dan GeoServer)

1. Double klik Xampp dan klik next

2. Klik next, lagi

3. Tentukan direktori dan folder yang digunakan dan klik next

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

5. Xampp ready diinstall dan Klik next

6. Klik finish, proses install selesai

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

4. Klik Internet Information Services branch

3. Pilih Apache (httpd.conf) option

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

1. Double klik setup postgreSQL,

2. Install PostgreSQL di direktori C:\Xampp64\PostgreSQL\11

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

4. Buat password, klik next

6. Cek summary installannya, pastikan semuanya sudah benar, kemuadian klik

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

9. Copy file libpq.dll dari c:/Xampp/php/libpq.dll, kemudian di-paste di

11. Hapus folder pgAdmin di folder C:\Users\Hp\AppData\Roaming

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

15. Shut down server dengan mengklik yes.

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

2. Install postGIS di dalam folder PostgreSQL (C:\Xampp64\PostgreSQL\11) dan

3. Buat database (ex:db_spatial)

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

5. Jika libintl-9.dll tidak terinstall akan mucul pesan error berikut;

6. Untuk mengatasi permasalahan tersebut, buka folder

7. Jalan icon postGIS kembali, pastikan hasilnya sebagai berikut

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

1. Ekstrak file phpPgAdmin 7.13.0 di C:\Xampp64 dan sederhanakan namanya

2. Edit file config.inc.php di folder C:\Xampp64\phpPgAdmin\conf

3. Kemudian buka file httpd-Xampp.conf di folder c:\Xampp64\apache\conf\extra\

4. Tambahkan koding berikut;

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

E. Download dan Install Geoserver

2. Install java tersebut

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

4. Klik environment variables dan klik new pada system variables

5. Buat variable seperti gambar berikut

6. Download geoserver di link berikut http://geoserver.org/download/

9. Bagian geoserver data directory, pilih settingan default

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

14. Klik start geoserver

15. Buka url http://localhost:8181/geoserver/web/ dan pastikan hasilnya seperti

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

4. Akses melalui browser dengan http://localhost/disasters/

5. Konfigurasi autoload.php menggunakan text editor (VScode)

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

B. Install Template AdminLTE 3

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

6. Tambahkan koding yang di bawah pada File viewunion.php

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

13. Refresh browser, sehingga menghasilkan layout seperti berikut

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

16. Menghapus fitur/kolom yang ditandai dengan garis orange di

17. Refresh browser, sehingga menghasilkan layout seperti berikut

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

21. Sehingga librariesnya menjadi sebagai berikut;

Roni Haryadi Saputra, S.Si., M.Sc. WA : 0823-8812-8916

23. Buka lagi file top-nav.html, cut koding berikut;

pastekan di file viewheader.php

26. Buka file top-nav.html cut koding berikut,