MODUL PELATIHAN WEBGIS LANJUTAN 1

Roni Haryadi Saputra, [Link]

Kota Padang 19 Agustus 2021

ii

DAFTAR ISI

Bab I Pengenalan Software Xampp, Codeigniter, [Link],

Qgis, PostgreSQL, PostGIS, dan Geoserver ......................................................................... 1

Bab II Install Sofware (Xampp, PostgreSQL, PostGIS, phpPgAdmin, dan GeoServer) ............. 6

Bab III Konfigurasi Framework dan Pemasangan Template

(CodeIgniter dan AdminLTE 3) ....................................................................................... 20

Bab IV Memasang Library [Link] Beserta Plugin-nya .......................................................... 31

Bab V Publish Data GeoJSON Dalam Bentuk Titik, Garis, Luasan dan
Raster Menggunakan QGIS, PostGIS, PostrgreSQL, dan GeoServer ............................. 40

Bab VI Street View ........................................................................................................................ 62

Bab VII Hot Spot (Active Fire) ...................................................................................................... 64

Bab VIII Creat, Read, Update dan Delete (CRUD) Untuk Pemetaan Berbasis WebGIS .......... 70

Bab IX Memperbaiki Tampilan Dashboard ............................................................................... 115

Referensi ...................................................................................................................................... 121

ii | H a l a m a n Roni Haryadi Saputra., [Link].

1

Bab I Pengenalan Software Xampp, Codeigniter,

[Link], Qgis, PostgreSQL, PostGIS, dan Geoserver

A. Xampp

XAMPP adalah sebuah paket perangkat lunak (software) komputer yang sistem
penamaannya diambil dari akronim kata Apache, MariaDB/MySQL, PHP, dan Perl. Sementara
imbuhan huruf “X” yang terdapat pada awal kata berasal dari istilah cross platform sebagai
simbol bahwa aplikasi ini bisa dijalankan di empat sistem operasi berbeda, seperti OS Linux,
OS Windows, Mac OS, dan juga Solaris.

Jika dijabarkan secara gamblang, masing-masing huruf yang ada di dalam nama
XAMPP memiliki arti sebagai berikut ini:
X = Cross Platform
Merupakan kode penanda untuk software cross platform atau yang bisa berjalan di
banyak sistem operasi, seperti Windows, xampp for mac, dan untuk Linux. Semua itu
bersifat free download xampp.
A = Apache
Apache adalah aplikasi web server yang bersifat gratis dan bisa dikembangkan oleh
banyak orang (open source).
M = MySQL / MariaDB
MySQL atau MariaDB merupakan aplikasi database server yang dikembangkan oleh
orang yang sama. MySQL berperan dalam mengolah, mengedit, dan menghapus daftar
melalui database.
P = PHP
Huruf “P” yang pertama dari akronim kata XAMPP adalah inisial untuk menunjukkan
eksistensi bahasa pemograman PHP. Bahasa pemograman ini biasanya digunakan
untuk membuat website dinamis, contohnya dalam website berbasis CMS WordPress.
P = Perl
Sementara itu, untuk huruf P selanjutnya merupakan singkatan dari bahasa
pemrograman Perl yang kerap digunakan untuk memenuhi berbagai macam kebutuhan.
Perl ini bisa berjalan di dalam banyak sistem operasi sehingga sangat fleksibel dan
banyak digunakan.

1|H al ama n Roni Haryadi Saputra., [Link].

2

Fungsi Xampp
1. Sebagai server lokal untuk website yang sedang dalam pengembangan
2. Menampilkan konten yang terdapat pada website tanpa harus terkoneksi dengan
internet
3. Bekerja secara offline dan sebagai server lokal, web yang terdapat di dalamnya
tidak dapat diakses oleh banyak orang
4. Interface yang sangat friendly membuat aplikasi ini sangat cocok digunakan untuk
belajar baik di kalangan siswa ataupun mahasiswa
5. Dapat digunakan sebagai preview untuk website yang sedang dikembangkan
sebelum di hosting untuk diakses secara umum.

B. CodeIgniter
Codeigniter adalah sebuah framework php yang bersifat open source dan menggunakan
metode MVC (Model, View, Controller). MVC adalah teknik atau konsep yang memisahkan
komponen utama menjadi tiga komponen yaitu model, view dan controller.

Peggunaan framework codeigniter bertujuan sama seperti framework lainnya yaitu

untuk memudahkan membangun sebuah web tanpa harus membuatnya dari awal, yaitu
menggunakan Template. Template dapat dipasang apabila codeigniter telah dikonfigurasi,
yaitu di halaman [Link], [Link], dan [Link]. Setelah template terpasang didalam
codeigniter, langkah selanjutnya memasang [Link] didalam template. Adapun alur prosesnya
seperti gambar di bawah.

2|H al ama n Roni Haryadi Saputra., [Link].

3

C. [Link] dan Qgis

Leaflet merupakan library javascript open source yang berguna untuk menampilkan
peta berbasis web dengan mudah. Standar data vektor [Link] berupa geojson. Geojson
dirancang untuk menyajikan fitur geografis sederhana, bersama dengan atribut non-spasialnya.
Salah satu software yang dapat digunakan merubah format data shapefile menjadi geojson
adalah Qgis.
Qgis merupakan software gis dekstop yang open source. Di Qgis terdapat banyak plugin
yang support dalam pembuatan webgis leaflet. Adapun plugin-plugin tersebut sebagai berikut;

1. ColortoAttribute
Sebagai penyimpan kode warna kedalam atribute tabel

2. Qmetatiles
Untuk merubah data raster menjadi tiles

3. Qgis2web
Untuk membuat webgis secara langlung tanpa ngoding

4. MySql Importer
Untuk memasukan data spasial kedalam database MySQL

5. DB Manager
Untuk memasukan data vector kedalam PostGIS, GeoPackage, Oracle Spatial, dan
SpatialLite

6. Quick Map Service

Penyedia berbagai macam basemap
7. PostGIS Raster Import
Untuk memasukan data raster kedalam database PostGIS

Sederhananya, Qgis ini sangat powerfull digunakan untuk membangun webgis. Tidak
hanya bisa digunakan untuk membangun data spasial, tetapi juga menyediakan berbagai plugin
yang interaktif. Kelebihan lainnya, Qgis dapat membaca data spasial pada database meskipun
sudah terhosting (publish).

3|H al ama n Roni Haryadi Saputra., [Link].

4

D. PstgreSQL dan PostGIS

PostgreSQL adalah sebuah sistem basis data yang dapat dugunakan secara bebas
menurut Perjanjian lisensi BSD. Perangkat lunak ini merupakan salah satu basis data yang
paling banyak digunakan saat ini, selain MySQL dan Oracle.

Melalui plugin PostGIS, PostgreSQL dapat menyimpan data berupa objek geometrik
berupa point (titik), garis (line), dan area (polygon) selain dari table-tabel atribut (berserta
objek-objek lainnya seperti halnya view, rule, constraint, indeks, fungsi / prosedur, dan lain
sejenisnya) sebagaimana basis data biasa.

PostGIS merupakan plugin PostgreSQL, yang berguna sebagai spatial database engine,
dan pengelolaan (fungsional) unsur-unsur spasial bagi DBMS objek relasional PostgreSQL.
Secara praktis, PostGIS berperan sebagai penyedia layanan spasial bagi DBMS ini.
Memungkinkan PostgreSQL untuk digunakan sebagai backend basis data spasial untuk
perangkat lunak SIG. Singkatnya, PostGIS juga menambahkan tipe-tipe (kumpulan) SQL
(query), operator, dan fungsi-fungsi (analisis) yang kemudian menyebabkan DBMS
PostgreSQL menjadi bersifat “Spatially-enabled”. PostgreSQL merupakan salah satu basis
data terbaik untuk keperluan SIG.

E. GeoServer
GeoServer adalah sebuah perangkat lunak mapserver yang open source ditulis di dalam
bahasa pemrograman JAVA yang memungkinkan pengguna untuk berbagi dan mengedit data
geospatial. Dirancang untuk interoperabilitas, menyajikan data dari semua sumber data spatial
utama dengan menggunakan standar terbuka.

Karena menjadi proyek berbasis komunitas, GeoServer dikembangkan, diuji, dan

didukung oleh berbagai kelompok individu dan organisasi dari seluruh dunia. GeoServer
adalah implementasi referensi dari Open Geospatial Consortium (OGC) Web Feature Service
(WFS) dan Web Coverage Service (WCS) standar, 18 serta telah memenuhi persyaratan
bersertifikat Web Map Service (WMS). GeoServer menitikberatkan pada kemudahan
penggunaan dan standar dalam menyajikan data geospatial lewat web.

4|H al ama n Roni Haryadi Saputra., [Link].

5

GeoServer memungkinkan kita untuk menampilkan informasi spatial kepada dunia.

Menerapkan Web Map Service (WMS) standar, GeoServer dapat membuat peta dalam
berbagai format output seperti gambar/citra atau data geospatial. GeoServer dibangun di atas
Geotools, open source Java GIS toolkit.

GeoServer juga sesuai dengan Web Feature Service (WFS) standar, yang
memungkinkan berbagi dan pengeditan data yang digunakan untuk membuat peta. Orang lain
dapat memasukkan data ke dalam situs web dan aplikasi, membebaskan perijinan sehingga
memungkinkan transparansi yang lebih besar.

5|H al ama n Roni Haryadi Saputra., [Link].

6

Bab II 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

6|H al ama n Roni Haryadi Saputra., [Link].

7

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

7|H al ama n Roni Haryadi Saputra., [Link].

8

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

8|H al ama n Roni Haryadi Saputra., [Link].

9

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

9|H al ama n Roni Haryadi Saputra., [Link].

10

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

10 | H a l a m a n Roni Haryadi Saputra., [Link].

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.

11 | H a l a m a n Roni Haryadi Saputra., [Link].

12

7. Setelah selesai, hilangkan centang pada stack builder dan klik finish.

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;

12 | H a l a m a n Roni Haryadi Saputra., [Link].

13

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.

13 | H a l a m a n Roni Haryadi Saputra., [Link].

14

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

14 | H a l a m a n Roni Haryadi Saputra., [Link].

15

3. Buat database (ex:db_spatial)

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

15 | H a l a m a n Roni Haryadi Saputra., [Link].

16

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

16 | H a l a m a n Roni Haryadi Saputra., [Link].

17

<directory "C:/Xampp64/phppgadmin">
AllowOverride AuthConfig
Require all granted
</directory>

5. Pastikan hasilnya seperti berikut;

E. Download dan Install Geoserver

1. Download java [Link]

17 | H a l a m a n Roni Haryadi Saputra., [Link].

18

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 [Link]

7. Double klik setup geoserver
8. Klik next, I Agree, next dan next lagi. Sesuaikan folder java-nya

18 | H a l a m a n Roni Haryadi Saputra., [Link].

19

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 [Link] dan pastikan hasilnya seperti

berikut

19 | H a l a m a n Roni Haryadi Saputra., [Link].

20

Bab III Konfigurasi Framework dan Pemasangan Template

(CodeIgniter dan AdminLTE 3)

A. Install CodeIgniter
1. Run Xampp Control Panel dan klik start pada baris apache
2. Copy dan Paste CodeIgniter di direktori C:\xampp64\htdocs
3. Rename sesuai dengan tema webgis (ex: ina-activefire)

4. Akses melalui browser dengan [Link] ina-activefire /

5. Buka perangkat lunak Vscode

6. Pilih file, open folder dan pilih root project kita (ina-activefire)

7. Buka folder Application\config\[Link]

8. Konfigurasi di bagian 'libraries' dan 'helper'
20 | H a l a m a n Roni Haryadi Saputra., [Link].
21

$autoload['libraries'] = array();
Menjadi
$autoload['libraries'] = array('session','form_validation','upload');

$autoload['helper'] = array();
Menjadi
$autoload['helper'] = array('url', 'file','form');

9. Buka folder Application\config\[Link]

10. Konfigurasi dibagian ‘base_url’ dan ‘index_page’
$config['base_url'] = '';
Menjadi
$config['base_url'] = '[Link]

config['index_page'] = '[Link]';
Menjadi
$config['index_page'] = '';

11. Buat file .htaccess (klik kanan di bawah [Link], pilih new file. Beri nama file
tersebut, yaitu .htaccess)

12. Copy koding berikut dan paste kan kedalam halaman .htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ [Link]/$1 [L]

13. Muat ulang/refresh browsernya dan pastikan tidak error. Jika perubahan sudah
tersimpan semuanya dan tidak terdapat error di browser, itu artinya bahwa
konfigurasi yang dilakukan sudah berhasil.

21 | H a l a m a n Roni Haryadi Saputra., [Link].

22

B. Pemasangan Template AdminLTE 3

1. Buat folder assets di dalam folder ina-activefire

2. Download template AdminLTE 3 di link Releases · ColorlibHQ/AdminLTE

([Link])
3. Copy dan paste kan template AdminLTE 3 tersebut ke dalam folder assets
4. Rename template AdminLTE 3 menjadi template

5. Pastikan browser sudah bisa membaca root project dengan tautan link [Link]
activefire/assets/template/

22 | H a l a m a n Roni Haryadi Saputra., [Link].

23

6. Model template yang digunakan adalah fixed Navbar

7. Buka folder layout dengan Vscode dan buat file [Link], [Link],
[Link], [Link], [Link] dan [Link].

8. Tambahkan koding yang di bawah pada halaman [Link]

23 | H a l a m a n Roni Haryadi Saputra., [Link].

24

<?php
if ($content) {
$this->load->view($content);
}

9. Tambahkan koding yang di bawah pada halaman [Link]

<?php
require_once('[Link]');
require_once('[Link]');
require_once('[Link]');
require_once('[Link]');
require_once('[Link]');
10. Buka folder Application/config/[Link], edit coding pada baris 52
$route['default_controller'] = 'welcome';
Menjadi
$route['default_controller'] = 'home';

11. Buat Halaman [Link] di dalam folder controller dengan cara meng-klik kanan
folder Controller dan pilih new file. Beri nama file tersebut dengan nama [Link].
Isi dengan koding berikut;
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller {
public function index()
{
$data= array(
'judul' => 'WebGIS Trainning',
'content' => 'peta_leaflet'
);
$this->load->view('layout/viewunion', $data, FALSE);
}
}
/* End of file [Link] */

Berdasarkan susunan koding di atas menunjukkan bahwa nama functionnya berupa index, dan halaman
yang dideklarasikan bernama 'peta_leaflet'.Oleh karena itu, langkah selanjutnya adalah membuat halaman
'peta_leaflet'.didalam folder views.

24 | H a l a m a n Roni Haryadi Saputra., [Link].

25

12. Klik kanan folder Views dan pilih new file. Beri nama file tersebut dengan nama
peta_leaflet.php
13. Isi dengan keterangan berikut
<h1>Penanda Installan Template</h1>

14. Refresh root project di browser, pastikan hasilnya sudah seperti dibawah ini;

Yang baru diselesaikan baru sebatas;

 Konfigurasi CodeIgniter
 Memindahkan template ke dalam (root project) ina-active_fire dan,
 Membuat halaman yang terdiri atas [Link], [Link], [Link],
dan [Link]
Tahapan selanjutnya pemasangan template dengan cara memindahkan koding template
ke halaman [Link], [Link], [Link], dan [Link],

Untuk mencegah adanya duplikasi koding, maka pemindahan koding template

menggunakan tombol Cut (Ctrl+x).

25 | H a l a m a n Roni Haryadi Saputra., [Link].

26

15. Buka folder assets\template\pages\layout\[Link] dengan VScode

16. Cut koding antara baris

<!DOCTYPE html>
Sampai dengan
</head>
Pindahkan ke halaman [Link]

Contoh Hasil

17. Cut koding antara baris

<!-- jQuery -->
Sampai dengan
<script src="../../dist/js/[Link]"></script>
Pindahkan ke halaman [Link] dan tidak boleh melewati </head>
18. Tambahkan koding berikut pada setiap libraries di halaman [Link]
<?=base_url()?>assets/template

26 | H a l a m a n Roni Haryadi Saputra., [Link].

27

Contoh Hasil

19. Refresh browser dan pastikan hasilnya seperti yang di bawah ini;

Bentuk keterangan teksnya yang berubah menandakan

librariesnya sudah terinstall

20. Kembali buka folder assets\template\pages\layout\[Link] . Cut koding

dari baris
<div class="card-footer">

Sampai dengan
</html>
Pindahkan ke halaman [Link]

27 | H a l a m a n Roni Haryadi Saputra., [Link].

28

Contoh Hasil

21. Refresh browser dan pastikan hasilnya seperti dibawah ini

22. Kembali buka folder assets\template\pages\layout\[Link] . Cut koding

dari baris
<body class="hold-transition sidebar-mini layout-navbar-fixed">
Sampai dengan
</form>
Pindahkan ke halaman [Link]

Contoh Hasil

28 | H a l a m a n Roni Haryadi Saputra., [Link].

29

23. Refresh browser dan pastikan hasilnya seperti dibawah ini

24. Kembali buka folder assets\template\pages\layout\[Link] . Hapus

koding berikut
<div class="card-body">
Start creating your amazing application!
</div>
<!-- /.card-body -->
Selanjutnya, sisa koding yang di halaman [Link] di Cut dan di pindahkan ke
halaman [Link]

Contoh Hasil

25. Refresh browser dan pastikan hasilnya seperti dibawah ini

29 | H a l a m a n Roni Haryadi Saputra., [Link].

30

Hasil sementara pengolahan masih belum lengkap, yaitu logo belum terpasang. Jadi sebelum
lanjut ketahap selanjutnya, logo terlebih dahulu di tampilkan.
a. Buka halaman [Link]
b. Tambahkan koding yang di bawah
<?=base_url()?>assets/template
pada baris berikut
<img src="../../dist/img/[Link]" alt="AdminLTE Logo" class="brand-image img-
circle elevation-3" style="opacity: .8">

<img src../../dist/img/[Link]" class="img-circle elevation-2" alt="User Image">

Sehingga menjadi

<img src="<?=base_url()?>assets/template/dist/img/[Link]" alt="AdminLTE Logo" cla

ss="brand-image img-circle elevation-3" style="opacity: .8">

<img src="<?=base_url()?>assets/template/dist/img/[Link]" class="img-

circle elevation-2" alt="User Image">

30 | H a l a m a n Roni Haryadi Saputra., [Link].

31

Bab IV Memasang Library [Link]

Beserta Plugin-nya

A. Memasang Library [Link]

1. Kosongkan halaman peta_leaflet.php, selanjunya isi dengan koding berikut;
<div class="card-body">
<div id="map" style="width: 100%; height: 730px; color:black;"></div>
</div>

Contoh Hasil
2. Copy koding berikut;
<link rel="stylesheet" href="[Link] />
<script src="[Link]

3. Pastekan ke halaman [Link]

Contoh Hasil
4. Kembali ke halaman peta_leaflet.php dan tambahkan dengan koding berikut,
<script>
var map = [Link]('map', {
center: [-1.7912605, 116.42311],
zoom: 5,
layers:[]
});
var GoogleSatelliteHybrid= [Link]('[Link] {
maxZoom: 22,
attribution: 'WebGIS Trainning by Roni Haryadi'
}).addTo(map);
</script>

31 | H a l a m a n Roni Haryadi Saputra., [Link].

32

Contoh Hasil

5. Refresh browser dan pastikan hasilnya seperti berikut;

B. Memasang Plugin [Link]

Berdasarkan jenisnya,Plugin [Link] terbagi tiga (3) yaitu;
Plug in leaflet yang dibentuk javascript
Plug in leaflet yang dibentuk javascript dan library offline
Plug in leaflet yang dibentuk javascript dan library online

a. Langkah-langkah memasang plugin [Link] yang dibentuk javascript

Sebagai contoh, plug in yang digunakan berupa Skala

1. Buka halaman demo berikut; [Link]

[Link]
2. Tekan Ctrl+U
3. Copy koding yang ada kata scale diantara <script>.........dengan </script>, yaitu
koding berikut;
[Link]({maxWidth: 150}).addTo(map);

32 | H a l a m a n Roni Haryadi Saputra., [Link].

33

4. Pastekan ke dalam peta_leaflet.php

Contoh Hasil

5. Refresh browser dan pastikan hasilnya seperti berikut;

b. Langkah-langkah memasang plugin [Link] yang dibentuk javascript dan library

offline
Contoh kasus plugin yang digunakan terdiri atas [Link] dan Basemap
providers

1. Buka halaman website berikut [Link] dan pilih menu

Layer Switching Controls
2. Pilih mode plugin [Link]
([Link]
3. Pilih code

4. Pilih Download ZIP

5. Simpan didalam folder assets

33 | H a l a m a n Roni Haryadi Saputra., [Link].

34

6. Klik kanan file tersebut dan plih Extract Here. Jika sudah selesai, hapus file ZIP
tersebut agar size root project tidak besar.
7. Buka halaman demo plugin tersebut dengan link berrikut
[Link]
8. Tekan tombol Ctrl+U
9. Copy library yang ada kata StyledLayerControl, yaitu koding berikut;
<link rel="stylesheet" href="../css/[Link]" />
<script src="../src/[Link]"></script>

Aktifkan library tersebut hingga menjadi seperti berikut;

<link rel="stylesheet" href="<?=base_url()?>assets/[Link]-master/css/[Link]" />

<script src="<?=base_url()?>assets/[Link]-master/src/[Link]"></script>

10. Buka halaman peta_leaflet.php dan pastekan koding berikut;

var baseMaps = [
{
groupName : " Base Maps",
expanded : true,
layers : {
"Satellite" : GoogleSatelliteHybrid,
}
}

];

var overlays = [
{
groupName : "Peta Dasar",
expanded : true,
layers : { }
}
];

var options = {
container_width : "300px",
group_maxHeight : "80px",
//container_maxHeight : "350px",
exclusive : false,
collapsed : true,
position: 'topright'
};

var control = [Link](baseMaps, overlays,

options);
[Link](control);

34 | H a l a m a n Roni Haryadi Saputra., [Link].

35

11. Refresh browser dan pastikan hasilnya seperti berikut;

Contoh kasus plugin selanjutnya adalah menambah basemap melalui plugin leaflet provider
1. Buka halaman website berikut;
[Link]

2. Tentukan basemap yang ingin ditambahkan. Ex: [Link]

3. Copy plain javaScript-nya
var OpenStreetMap_Mapnik = [Link]('[Link] {
maxZoom: 19,
attribution: '&copy; <a href="[Link]
contributors'
});

4. dan pastekan ke dalam peta_leaflet.php

35 | H a l a m a n Roni Haryadi Saputra., [Link].
36

5. Copy koding berikut dan pastekan kedalam peta_leaflet.php

"Open Street Map Mapnik":OpenStreetMap_Mapnik

Contoh Hasil

6. Refresh browser dan pastikan hasilnya seperti berikut;

c. Langkah – langkah memasang plug in leaflet yang dibentuk javascript dan library
online

Contoh plugin yang digunakan adalah Geocoding dan Leaflet Routing Machine

1. Buka halaman website [Link]

36 | H a l a m a n Roni Haryadi Saputra., [Link].

37

2. Pilih menu geocoding dan pilih tipe Leaflet Control Geocoder

[Link]
3. Scroling ke bawah dan copy coding berikut
<link rel="stylesheet" href="[Link] />
<script src="[Link]
4. Pastekan ke halaman [Link]

5. Copy koding berikut;

[Link]().addTo(map);
6. Pastekan ke halaman peta_leaflet.php

7. Refresh browser dan pastikan hasil seperti berikut;

37 | H a l a m a n Roni Haryadi Saputra., [Link].

38

Langkah-langkah menampilkan plugin Leaflet Routing Machine

1. Buka halaman [Link]
2. Copy koding berikut;
<link rel="stylesheet" href="[Link] />

<script src="[Link]

3. Pastekan ke halaman [Link]

4. Copy koding berikut dan pastekan ke halaman peta_leaflet.php

[Link]({
routeWhileDragging: true,
geocoder: [Link]()
}).addTo(map);

38 | H a l a m a n Roni Haryadi Saputra., [Link].

39

5. Refresh browser dan pastikan hasil seperti berikut;

39 | H a l a m a n Roni Haryadi Saputra., [Link].

40

Bab V Publish Data

GeoJSON Dalam Bentuk Titik, Garis, Luasan dan Raster Menggunakan
(QGIS, PostGIS, PostrgreSQL, dan GeoServer)

A. Menampilkan GeoJSON Titik

a. Konfigurasi database
1. Tambahkan 'database' ke halaman [Link] pada baris 61

2. Jalankan perangkat lunak PgAdmin4, pastikan database yang akan digunakan.

Ex: spasial

3. Lanjutkan konfigurasi dihalaman [Link] seperti dibawah ini;

40 | H a l a m a n Roni Haryadi Saputra., [Link].

41

b. Download Marker
1. Download marker disini [Link]
2. Simpan marker didalam folder assets

c. Menambahkan data titik kedalam database (postgresql)

1. Jalankan Qgis
2. Koneksikan ke database spasial.

41 | H a l a m a n Roni Haryadi Saputra., [Link].

42

3. Klik menu db manager

4. Pilih postgis dan database spasial

5. Pilih schema public dan pilih menu import layer/file..

 tentukan data yang di publish
 jadikan id sebagai primary key
 pastikan koordinat data berupa desimal degree
 pilih tombol ok

42 | H a l a m a n Roni Haryadi Saputra., [Link].

43

6. Pastikan data titik shapefile sudah masuk ke dalam database

d. Menghubungkan database postgresql dengan geoserver

1. Double klik tombol Started di Geoserver

2. Masuk/Login
3. Buat workspace, ex: spasial_nusantara

4. Double klik tombol save

5. Buat Stores, mengklik Stores dan Add new Store

43 | H a l a m a n Roni Haryadi Saputra., [Link].

44

6. Pilih PostGIS

7. Isi form Stores

8. Pilih menu Layers

9. Dikolom add_layer_from, pilih store yang dibuat sebelumnya, exs: spasial_nusantara

44 | H a l a m a n Roni Haryadi Saputra., [Link].

45

10. Pada baris layer Fasilitas Kesehatan 25K (44), pilih publish
11. Isi form Layer

12. Double klik tombol save dan lanjut pilih menu Layer Preview
13. Scroling ke baris layer yang dipublish dan pilih geojson

45 | H a l a m a n Roni Haryadi Saputra., [Link].

46

e. Menampilkan data titik ke dalam library leaflet

1. Buat halaman [Link] di dalam folder assets
2. Isi dengan koding berikut;

<?php
$url=file_get_contents("[Link]
me=spasial_nusantara%3AFasilitas%20Kesehatan%2025K%20%2844%29&outputFormat=application%2Fjson");
echo($url);
?>
3. Tambahkan koding berikut kedalam peta_leaflet.js (di bawah koding base
maps)
var faskes = new [Link]();
4. Tambahkan koding berikut kedalam peta_leaflet.js (di dalam grup Peta Dasar)
"Fasilitas Kesehatan": faskes

46 | H a l a m a n Roni Haryadi Saputra., [Link].

47

5. Tambahkan koding berikut kedalam peta_leaflet.js (bagian bawah)

$.getJSON("<?=base_url()?>assets/[Link]",function(data){
var ratIcon = [Link]({
iconUrl: '<?=base_url()?>assets/[Link]',
iconSize: [60,50]
});
[Link](data,{
pointToLayer: function(feature,latlng){
var marker = [Link](latlng,{icon: ratIcon});
[Link]("<table class='table table-striped table-bordered table-condensed'>" +
"<tr><th>Name</th><td>" + [Link] + "</td></tr>" +
"<tr><th>Global ID</th><td>" + [Link] + "</td></tr>" +
"<table>");
return marker;
}
}).addTo(faskes);
});

6. Refresh browser dan pastikan hasilnya seperti yang di bawah ini

47 | H a l a m a n Roni Haryadi Saputra., [Link].

48

Data titik GeoJSON sudah berhasil dipublish diwebgis leaflet, akan tetapi butuh waktu yang
lama untuk menampilkannya, serta tampilannya juga belum bagus. Solusi atas masalah ini
adalah plugin marker cluster
1. Download library marker cluster disini
[Link]
2. Ekstrak ke dalam folder assets

3. Copy dan pastekan koding berikut ke dalam [Link]

<link rel="stylesheet" href="<?=base_url()?>assets/[Link]" />

<link rel="stylesheet" href="<?=base_url()?>assets/[Link]" />
<script src="<?=base_url()?>assets/[Link]"></script>
4. Modikasi koding var faskes
var faskes = new [Link]();
Menjadi
var faskes = [Link]();
5. Refresh browser dan pastikan hasilnya seperti di bawah ini;

48 | H a l a m a n Roni Haryadi Saputra., [Link].

49

B. Menampilkan GeoJSON Garis

Sebagai contoh, data yang digunakan berupa jaringan sungai.
a. Menentukan warna geojson
1. Jalankan QGIS
2. Tambahkan data sungai_degree dan tentukan simbologi warnanya

3. Pilih plugin color to atribute

4. Baris Attribute name (new) ketikan color

5. Pilih ok

49 | H a l a m a n Roni Haryadi Saputra., [Link].

50

b. Publish data GeoJSON garis ke dalam database PostgreSQL

1. Jalankan QGIS
2. Pilih DB ManagerPostGISSpasialPublicImport Layer/File

3. Input data Shapefile Polyline (exs:Sungai_degree)

4. Schema  public
5. Primary Key id
6. Source SRID  EPSG:4326-WGS 84
7. Targer SRID  EPSG:4326-WGS 84
8. Centang Creat Spatial Index
9. Pilih ok

c. Publish data dari PostgreSQL ke GeoServer.

1. Login
2. Pilih Layer dan Add a new Layers
3. Di kolom Add layer from pilih spasial_nusantara:spasial

4. Pilih publish di baris sungai_degree

50 | H a l a m a n Roni Haryadi Saputra., [Link].

51

5. Scrolling kebawah dan pilih Compute from data dan Compute from native bounds

6. Pilih save

d. Publish data GeoJSON garis dari GeoServer ke [Link]

1. Pilih menu Layer Preview
2. Di baris sungai_degreeselect one GeoJSON

3. Copy url dari halaman GeoJSON tersebut

51 | H a l a m a n Roni Haryadi Saputra., [Link].

52

4. Kembali ke halaman Vscode, buat halaman [Link] didalam folder assets

5. Pastekan berikut di halaman [Link]
<?php
$url=file_get_contents();
echo($url);
?>
6. Pastekan url tadi di dalam kurung baris $url......

<?php
$url=file_get_contents("[Link]
eature&typeName=spasial_nusantara%3Asungai_degree&maxFeatures=50&outputFormat=application%2Fjson");
echo($url);
?>

7. Hapus &maxFeatures=50&

Pindah kehalaman peta_leaflet deklarasikan data tersebut

1. Buat varible sungai seperti dibawah ini
var sungai = new [Link]();
2. Pastekan koding berikut ke dalam grup peta dasar
"Jaringan Sungai": sungai

3. Pastekan koding berikut kedalam peta_leaflet.php

$.getJSON("<?=base_url()?>assets/[Link]",function(color){
[Link]( color, {
style: function(feature){
var color= [Link];
return { color: "#999", weight: 2, color: color, fillOpacity: .6 };
},
onEachFeature: function( feature, layer ){
[Link]("<table class='table table-striped table-bordered table-condensed'>" +
"<tr><th>Name</th><td>" + [Link] + "</td></tr>" +
"<tr><th>Global ID</th><td>" + [Link] + "</td></tr>" +
"<table>"),that = this;
[Link]('mouseover', function (e) {
[Link]({
weight: 2,
color: 'cyan',
dashArray: '',
fillOpacity: 0.8
});

52 | H a l a m a n Roni Haryadi Saputra., [Link].

53

if (![Link] && ![Link]) {

[Link]();
}

[Link]([Link]);
});
[Link]('mouseout', function (e) {
[Link]({
weight: 2,
color: [Link],
dashArray: '',
fillOpacity: 0.8
});
});
}
}).addTo(sungai);
});

4. Refresh browser dan pastikan hasilnya seperti berikut;

53 | H a l a m a n Roni Haryadi Saputra., [Link].

54

C. Menampilkan GeoJSON Luasan (Polygon)

a. Menentukan warna geojson
1. Jalankan QGIS
2. Tambahkan data provinsi_polygon dan tentukan simbologi warnanya

3. Pilih plugin color to atribute

4. Baris Attribute name (new) ketikan color

5. Pilih ok

54 | H a l a m a n Roni Haryadi Saputra., [Link].

55

a. Publish data GeoJSON garis ke dalam database PostgreSQL

1. Jalankan QGIS
2. Pilih DB ManagerPostGISSpasialPublic Import Layer/File

3. Input data Shapefile Polyline (exs:provinsi_polygon)

4. Schema  public
5. Primary Key id
6. Source SRID  EPSG:4326-WGS 84
7. Targer SRID  EPSG:4326-WGS 84
8. Centang Creat Spatial Index
9. Pilih ok

b. Publish data dari PostgreSQL ke GeoServer.

1. Login
2. Pilih Layer dan Add a new Layers
3. Di kolom Add layer from pilih spasial_nusantara:spasial

4. Di baris Provinsi_polygon pilih Publish

5. Scrolling kebawah dan pilih Compute from data dan Compute from native bounds

55 | H a l a m a n Roni Haryadi Saputra., [Link].

56

6. Pilih save

c. Publish data GeoJSON garis dari GeoServer ke [Link]

8. Pilih menu Layer Preview
9. Di baris Provinsi_Polygonselect one GeoJSON

10. Copy url dari halaman GeoJSON tersebut

56 | H a l a m a n Roni Haryadi Saputra., [Link].

57

11. Kembali ke halaman Vscode, buat halaman [Link] didalam folder assets
12. Pastekan koding berikut di halaman [Link] tersebut.
<?php
$url=file_get_contents();
echo($url);
?>
13. Pastekan url tadi di dalam kurung baris $url......

<?php
$url=file_get_contents("[Link]
0&request=GetFeature&typeName=spasial_nusantara%3AProvinsi_Polygon&outputFormat=application%2Fjson");
echo($url);
?>
14. Hapus &maxFeatures=50

Pindah kehalaman peta_leaflet deklarasikan data tersebut

5. Buat varible provinsi seperti dibawah ini
var provinsi = new [Link]();
6. Pastekan koding berikut ke dalam grup peta dasar
"Administrasi": provinsi

57 | H a l a m a n Roni Haryadi Saputra., [Link].

58

7. Pastekan koding berikut kedalam peta_leaflet.php

$.getJSON("<?=base_url()?>assets/[Link]",function(color){
[Link]( color, {
style: function(feature){
var color= [Link];
return { color: "#999", weight: 2, color: color, fillOpacity: .6 };
},
onEachFeature: function( feature, layer ){
[Link]("<table class='table table-striped table-bordered table-condensed'>" +
"<tr><th>Nama Provinsi</th><td>" + [Link] + "</td></tr>" +
"<tr><th>Kode Warna</th><td>" + [Link] + "</td></tr>" +
"<table>"),that = this;
[Link]('mouseover', function (e) {
[Link]({
weight: 2,
color: 'cyan',
dashArray: '',
fillOpacity: 0.8
});
if (![Link] && ![Link]) {
[Link]();
}
[Link]([Link]);
});
[Link]('mouseout', function (e) {
[Link]({
weight: 2,
color: [Link],
dashArray: '',
fillOpacity: 0.8
});
});
}
}).addTo(provinsi);
});

58 | H a l a m a n Roni Haryadi Saputra., [Link].

59

8. Refresh browser dan pastikan hasilnya seperti berikut;

D. Menampilkan Data Raster

1. Jakankan QGIS
2. Tambahkan data Raster

3. Jalankan plugin QMetaTiles

4. Directory citra (folder kosong)
5. Tileset Name citra
6. Maximum Zoom18 (harus sesuai dengan kualitas data)
7. Centang kotak Write Leaflet-base viewer dan pilih OK
59 | H a l a m a n Roni Haryadi Saputra., [Link].
60

8. Double klik [Link]

9. Tekan tombol Ctrl+U

10. Copy koding berikut dan pastekan ke halaman peta_leaflet.php

11. Modifikasi koding tersebut seperti di bawah ini;

var mytile =[Link]('[Link]

liZxJa?dl=0/citra/{z}/{x}/{y}.png', {
maxZoom: 18,
tms: false,
attribution: 'Generated by QTiles'
}).addTo(raster);

60 | H a l a m a n Roni Haryadi Saputra., [Link].

61

12. Untuk koding variable layer, copy koding di bawah ini dan pastekan ke dalam
peta_leaflet.php
var raster = new [Link]();
13. Copy berikut dan pastekan ke dalam peta_leaflet.php
"Raster": raster

14. Refresh browser dan pastikan hasilnya seperti dibawah ini;

61 | H a l a m a n Roni Haryadi Saputra., [Link].

62

Bab VI Street View

Street views merupakan salah satu fitur dari google maps. Kegunaan street views diwebgis
adalah untuk menvisualisasikan kondisi jalan dalam bentuk 3D, bahkan bisa juga dilihat kondisi
disekitarnya. Street views tersebut bisa ditambahkan kedalam webgis leaflet. adapun langkah-
langkahnya sebagai berikut;
1. Copy dan paste library berikut ke dalam [Link]

<script src="[Link] ></script>

<script src="[Link]

2. Copy dan paste koding berikut ke dalam peta_leaflet.php

var g_roadmap = new [Link]('ROADMAP');

var g_satellite = new [Link]('SATELLITE');
var g_terrain = new [Link]('TERRAIN');

3. Copy dan paste koding berikut ke dalam peta_leaflet.php, di bagian layer kontrol

"Google Satellite" : g_satellite,

"Road Map" : g_roadmap,
"Terreno" : g_terrain,

62 | H a l a m a n Roni Haryadi Saputra., [Link].

63

4. Refresh browser dan pastikan hasilnya seperti berikut;

5. Drag icon untuk melihat tanpilan Street View

63 | H a l a m a n Roni Haryadi Saputra., [Link].

64

Bab VII Hot Spot (Active Fire)

A. Data
Data yang digunakan berupa active fire dari Visible Infrared Imaging Radiometer
Suite (VIIRS). Data tersebut dapat didownload di [Link]
dan di QGis. Jika di Website NASA data disediakan berdasarkan waktu perekamannya yaitu,
selama 24 jam terakhir, 48 jam terakhir serta 7 hari terakhir. Jika didownload melalui Qgis,
waktu perekamannya diterangkan di dalam tabel atribut. Sebagai contoh kasus, data yang
digunakan diambil dari Qgis. Adapun langkah-langkahnya sebagai berikut;
a. Dowload data
1. Buka Qgis
2. Install Plugin ActiveFire

3. Double klik Plugin ActiveFire pilih VIIRS

4. Select data yang berada di Indonesia
5. Ekspor data tersebut dengan luaran berupa Shapefile

64 | H a l a m a n Roni Haryadi Saputra., [Link].

65

b. Import data ke PostgreSQL

1. Buka Database DB manager di Qgis

2. Pilih PostGISSpasialPublic import layer/file..

3. Input arahkan ke data yang akan diupload

4. SchemaPublic
5. Primary Key Id
6. Source SRIDEPSG:4326-WGS84
7. Target SRIDEPSG:4326-WGS84
8. Pilih Ok

65 | H a l a m a n Roni Haryadi Saputra., [Link].

66

c. Memastikan Data Tersebut Di PostgreSQL

1. Buka link berikut [Link]

2. Login
3. Pilih database spasialpublic activefireBrowse

Hasil di menu browse menunjukkan bahwa data sudah bisa digunakan/dideklarasikan ke

[Link]
d. Mendeklarasikan Data Active Fire ke [Link]

1. Buka Vscode
2. Buat Halaman di dalam Folder Model (exs: Model_activefire.php)

66 | H a l a m a n Roni Haryadi Saputra., [Link].

67

3. Copy dan paste koding berikut ke dalam halaman Model_active.php

<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Model_activefire extends CI_Model// nama class harus sesuai dengan nama file
{
public function get_all_data()
{
$this->db->select('*');
$this->db->from('activefire');// Tabel yang digunakan
$this->db->order_by('id', 'desc');// Id yang di tabel
return $this->db->get()->result();
}
}

4. Pindah ke halaman [Link], copy dan pastekan koding berikut;

public function __construct()

{
parent::__construct();
//Load Dependencies
$this->load->model('model_activefire');// model yang diload
}
5. Copy dan pastekan koding berikut ke halaman [Link]. Untuk penempatannya
bisa merujuk gambar yang dibawah.

'activefire'=> $this->model_activefire->get_all_data(),

Hasil Step 4

Hasil Step 5

67 | H a l a m a n Roni Haryadi Saputra., [Link].

68

6. Download plugin leaflet heatmap disini

[Link]
7. Copy dan paste koding berikut di [Link]
<script src="<?=base_url()?>assets/[Link]"></script>
8. Copy dan paste koding berikut di peta_leaflet.php
var fire = new [Link]();

9. Copy dan paste koding berikut di peta_leaflet.php

"Hotspot": fire,

10. Copy dan paste koding berikut di peta_leaflet.php

[Link]([
<?php foreach ($activefire as $key => $value) { ?>
[<?= $value->latitude ?>, <?= $value->longitude ?>, 1000],
<?php }?>
], {radius: 25}).addTo(fire);

68 | H a l a m a n Roni Haryadi Saputra., [Link].

69

11. Refresh browser dan pastikan hasinya seperti berikut;

69 | H a l a m a n Roni Haryadi Saputra., [Link].

70

Bab VIII Creat, Read, Update dan Delete (CRUD)

Untuk Pemetaan Berbasis WebGIS

A. Tool Digitas Point (Titik)

a. Membuat Tabel

1. Buka PgAdmin
2. Login

3. Buka serverPostgreSQL 13DatabaseSpasial SchemaPublic

Table

4. Klik kanan tableCreattable

70 | H a l a m a n Roni Haryadi Saputra., [Link].

71

5. Tentukan nama tabelnya

6. Buat field/kolom seperti gambar berikut;

7. Isi satu baris, dengan klik kanan tbl_sumurscriptsINSERT Script

Sehingga menghasilkan halaman berikut;

Isi seperti gambar berikut;

71 | H a l a m a n Roni Haryadi Saputra., [Link].

72

b. Membuat Halaman Tampil Data (Read)

1. Buka Vscode
2. Buat Halaman di dalam Folder Model (exs: Model_sumur.php)
3. Isi dengan koding berikut;
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Model_sumur extends CI_Model { // nama class harus sesuai dengan nama file

public function tampil_data()

{
$this->db->select('*');
$this->db->from('tbl_sumur');// Tabel yang digunakan
$this->db->order_by('id_sumur', 'desc');// Id yang di tabel
return $this->db->get()->result();
}

/* End of file Model [Link] */

4. Buat Halaman di dalam Folder Controller (exs: [Link])
5. Isi dengan koding berikut;
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Sumur extends CI_Controller {
public function __construct()
{
parent::__construct();
//Load Dependencies
$this->load->model('model_sumur');// model yang diload
}
public function index()
{
$data= array(
'judul' => 'WebGIS Trainning',
'sumur'=> $this->model_sumur->tampil_data(),
'content' => 'sumur/data'
);
$this->load->view('layout/viewunion', $data, FALSE);
}
}
/* End of file [Link] */

6. Buat folder baru didalam folder Views, yaitu klik kananpilih new folderberi nama
dengan kata ’sumur’
7. Di folder sumur tersebut, buat halaman baru bernam’data’

8. Copy dan paste koding berikut ke dalam halaman [Link]

<div class="card-body">
<table class="table table-bordered text-sm" id="example1">
<thead class="text-center">

72 | H a l a m a n Roni Haryadi Saputra., [Link].

73

<tr>
<th>No</th>
<th>Nama</th>
<th>Longitude</th>
<th>Latitude</th>
<th>Gambar</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $no = 1;
foreach ($sumur as $key => $value) { ?>
<tr>
<td><?= $no++ ?></td>
<td><?= $value->nama?></td>
<td><?= $value->longitude?></td>
<td><?= $value->latitude?></td>
<td><img src="<?= base_url('assets/gambar/' . $value->gambar) ?>"Width="100px"></td>
<td class="text-center">
<a href="<?= base_url() ?>" class="btn btn-sm btn-warning"><i class="fas fa-
edit"></i></a>
<a href="<?= base_url() ?>" class="btn btn-sm btn-
danger" onclick="return confirm('Apakah Anda Yakin Ingin Hapus Data ini..?')"><i class="fas fa-
trash"></i></a>
<a href="<?= base_url() ?>" class="btn btn-sm btn-success"><i class="fas fa-
plus"></i> Add Data</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>

Selanjutnya, mengaktifkan tombol menu

9. Buka [Link] edit koding seperti berikut;
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout Options
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
Menjadi
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-database"></i>
<p>
Database
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">3</span>
</p>
</a>

<li class="nav-item">
<a href="../layout/[Link]" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
Menjadi
<li class="nav-item">
<a href="<?=base_url('sumur')?>" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Sumur</p>
</a>
</li>

73 | H a l a m a n Roni Haryadi Saputra., [Link].

74

10. Refresh browser dan double klik menu sumur

Data yang didalam database spasial (PostgreSQL) sudah berhasil ditampilkan ditabel. Jika ditinjau
lebih dalam, tabelnya masih sederhana. Untuk itu, perlu diinstall plugin data table net.

11. Copy dan paste koding berikut kedalam [Link]

<!-- DataTables -->
<link rel="stylesheet" href="<?=base_url()?>assets/template/plugins/datatables-bs4/css/[Link]">
<link rel="stylesheet" href="<?=base_url()?>assets/template/plugins/datatables-responsive/css/[Link]">
<!-- DataTables -->
<script src="<?=base_url()?>assets/template/plugins/datatables/[Link]"></script>
<script src="<?=base_url()?>assets/template/plugins/datatables-bs4/js/[Link]"></script>
<script src="<?=base_url()?>assets/template/plugins/datatables-responsive/js/[Link]"></script>
<script src="<?=base_url()?>assets/template/plugins/datatables-responsive/js/[Link]"></script>

12. Copy dan paste koding berikut kedalam [Link]

<script>
$(function() {
$("#example1").DataTable({
"responsive": true,
"autoWidth": false,
});
$('#example2').DataTable({

74 | H a l a m a n Roni Haryadi Saputra., [Link].

75

"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
</script>
13. Refresh browser dan pastikan hasilnya seperti berikut;

c. Membuat Tambah Data (add data)

1. Buka halaman Model_sumur.php di dalam folder Model, tambahkan koding berikut;
public function add($data)
{
$this->db->insert('tbl_sumur', $data);
}

2. Buka halaman [Link] di dalam folder Controller, tambahkan koding berikut;

// Add a new item
public function add()
{
$this->form_validation->set_rules('nama', 'Nama Sumur', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('longitude', 'Longitude', 'required', array(

75 | H a l a m a n Roni Haryadi Saputra., [Link].

76

'required' => '%s Harus Diisi !!!'

));
$this->form_validation->set_rules('latitude', 'latitude', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('marker', 'Marker', 'required', array(
'required' => '%s Harus Diisi !!!'
));
if ($this->form_validation->run() == TRUE) {
$config['upload_path'] = './assets/gambar/';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 4000;
$this->upload->initialize($config);
if (!$this->upload->do_upload('gambar')) {
$data = array(
'judul' => 'Add Data',
'error_upload' => $this->upload->display_errors(),
'content' => 'sumur/add'
);
$this->load->view('layout/viewunion', $data, FALSE);
} else {
$upload_data = array('uploads' => $this->upload->data());
$config['image_library'] = 'gd2';
$config['source_image'] = './assets/gambar/' . $upload_data['uploads']['file_name'];
$this->load->library('image_lib', $config);
$data = array(
'nama' => $this->input->post('nama'),
'latitude' => $this->input->post('latitude'),
'longitude' => $this->input->post('longitude'),
'marker' => $this->input->post('marker'),
'gambar' => $upload_data['uploads']['file_name'],
);
$this->model_sumur->add($data);
$this->session->set_flashdata('pesan', 'Data Berhasil Disimpan !!!');
redirect('sumur');
}
}
$data = array(
'judul' => 'Add Data',
'content' => 'sumur/add'
);
$this->load->view('layout/viewunion', $data, FALSE);
}
3. Buat folder ‘gambar’ di dalam folder assets

4. Tambahkan marker ke dalam folder assets ([Link], [Link], dan

[Link])

5. Buat halaman [Link] di dalam folder sumur(application/views/sumur), tambahkan

koding berikut;
<div class="card-body">
<div class="row">
<div class="col-sm-7">
<!-- peta -->
<div id="map" style="width: 100%; height: 600px;"></div>
<!-- end peta -->

76 | H a l a m a n Roni Haryadi Saputra., [Link].

77

</div>

<div class="col-sm-5">
<?php
echo validation_errors('<div class="alert alert-warning alert-
dismissible"><button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>', '</div>');
if (isset($error_upload)) { echo '<div class="alert alert-danger alert-
dismissible"> <button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>' . $error_upload . '</div>';
}
echo form_open_multipart('sumur/add');
?>

<div class="form-group">
<label>Nama Sumur</label>
<input name="nama" placeholder="Nama Sumur" type="text" class="form-control">
</div>

<div class="form-group">
<label>Latitude</label>
<input id="Latitude" name="latitude" placeholder="Latitude" type="text" class="form-control">
</div>

<div class="form-group">
<label>Longitude</label>
<input name="longitude" id="Longitude" placeholder="Longitude" class="form-control">
</div>

<div class="form-group">
<label>Gambar</label>
<input type="file" name="gambar" class="form-control" required>
</div>

<div class="form-group">
<label>Marker</maker>
<select name="marker" class="form-control">
<option value="">--Pilih--</option>
<option value="[Link]">Marker 1</option>
<option value="[Link]">Marker 2</option>
<option value="[Link]">Marker 3</option>
</select>
</div>

<div>
<button type="submit" class="btn btn-info">Simpan</button>
<button type="reset" class="btn btn-success">Reset</button>
</div>

<?php
echo form_close(); ?>
</div>
</div>

</div>
</div>
</div>

<script>
var peta1 = [Link]('[Link]
IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data &copy; <a href="[Link] contributors, ' +
'<a href="[Link] ' +
'Imagery © <a href="[Link]
id: 'mapbox/streets-v11'
});

var peta2 = [Link]('[Link] {

attribution: 'google'
});

var peta3 = [Link]('[Link] {

attribution: '&copy; <a href="[Link] contributors'
});

var map = [Link]('map', {

center: [-1.7912605, 116.42311],
zoom: 4,
layers: [peta2]
});

var baseLayers = {
"Grayscale": peta1,
"Satelite": peta2,
"Streets": peta3

77 | H a l a m a n Roni Haryadi Saputra., [Link].

78

};

var overlays = {};

[Link](baseLayers).addTo(map);

var curLocation=[0,0];
if (curLocation[0]==0 && curLocation[1]==0) {
curLocation =[-1.7912605, 116.42311];
}

[Link](false);
var marker = new [Link](curLocation, {
draggable:'true'
});

[Link]('dragend', function(event) {
var position = [Link]();
[Link](position,{
draggable : 'true'
}).bindPopup(position).update();
$("#Latitude").val([Link]);
$("#Longitude").val([Link]).keyup();
});

$("#Latitude, #Longitude").change(function(){
var position =[parseInt($("#Latitude").val()), parseInt($("#Longitude").val())];
[Link](position, {
draggable : 'true'
}).bindPopup(position).update();
[Link](position);
});
[Link](marker);

</script>

Selanjutnya, meng aktifkan tombol menu

6. Buka halaman [Link], modifikasi koding berikut
<a href="<?= base_url() ?>" class="btn btn-sm btn-success"><i class="fas fa-plus"></i> </a>
Menjadi
<a href="<?= base_url('sumur/add') ?>" class="btn btn-sm btn-success"><i class="fas fa-plus"></i> </a>

7. Double klik menu sumuradd

d. Membuat Edit Data

1. Buka halaman Model_sumur.php di dalam Folder Model
(aplication/model/model_sumur.php)
2. Copy dan paste koding berikut kedalam model_sumur.php

78 | H a l a m a n Roni Haryadi Saputra., [Link].

79

public function detail($id_sumur)

{
$this->db->select('*');
$this->db->from('tbl_sumur');
$this->db->where('id_sumur', $id_sumur);
return $this->db->get()->row();
}

public function edit($data)

{
$this->db->where('id_sumur', $data['id_sumur']);
$this->db->update('tbl_sumur', $data);
}

3. Buka halaman [Link] di dalam Folder Controller (aplication/Controller/[Link])

4. Copy dan paste koding berikut kedalam [Link]

// Edit a new item

public function edit($id_sumur= null)
{
$this->form_validation->set_rules('nama', 'Nama Sumur', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('longitude', 'Longitude', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('latitude', 'latitude', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('marker', 'Marker', 'required', array(
'required' => '%s Harus Diisi !!!'
));
if ($this->form_validation->run() == TRUE) {
$config['upload_path'] = './assets/gambar/';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 4000;
$this->upload->initialize($config);
if (!$this->upload->do_upload('gambar')) {
$data = array(
'judul' => 'edit Data',
'error_upload' => $this->upload->display_errors(),
'sumur' => $this->model_sumur->detail($id_sumur),
'content' => 'sumur/edit'
);
$this->load->view('layout/viewunion', $data, FALSE);
} else {
$upload_data = array('uploads' => $this->upload->data());
$config['image_library'] = 'gd2';
$config['source_image'] = './assets/gambar/' . $upload_data['uploads']['file_name'];
$this->load->library('image_lib', $config);
$data = array(
'id_sumur'=>$id_sumur,
'nama' => $this->input->post('nama'),
'latitude' => $this->input->post('latitude'),
'longitude' => $this->input->post('longitude'),
'marker' => $this->input->post('marker'),
'gambar' => $upload_data['uploads']['file_name'],
);

79 | H a l a m a n Roni Haryadi Saputra., [Link].

80

$this->model_sumur->edit($data);
$this->session->set_flashdata('pesan', 'Data Berhasil diperbarui !!!');
redirect('sumur');
}

$data = array(
'id_sumur'=>$id_sumur,
'nama' => $this->input->post('nama'),
'latitude' => $this->input->post('latitude'),
'longitude' => $this->input->post('longitude'),
'marker' => $this->input->post('marker'),
);
$this->model_sumur->edit($data);
$this->session->set_flashdata('pesan', 'Data Berhasil diperbarui !!!');
redirect('sumur');
}
$data = array(
'judul' => 'edit Data',
'sumur' => $this->model_sumur->detail($id_sumur),
'content' => 'sumur/edit'
);
$this->load->view('layout/viewunion', $data, FALSE);
}

5. Buka Folder Sumur didalam folder Views (Aplication/Views/[Link])

6. Buat Halaman [Link]
7. Copy dan paste dengan koding berikut;

<div class="card-body">
<div class="row">
<div class="col-sm-7">
<!-- peta -->
<div id="map" style="width: 100%; height: 600px;"></div>
<!-- end peta -->
</div>

<div class="col-sm-5">
<?php
echo validation_errors('<div class="alert alert-warning alert-
dismissible"><button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>', '</div>');
if (isset($error_upload)) { echo '<div class="alert alert-danger alert-
dismissible"> <button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>' . $error_upload . '</div>';
}
echo form_open_multipart('sumur/edit/' . $sumur->id_sumur);
?>

<div class="form-group">
<label>Nama Sumur</label>
<input name="nama" value="<?= $sumur->nama ?>" type="text" class="form-control">
</div>

<div class="form-group">
<label>Latitude</label>
<input id="Latitude" value="<?= $sumur->latitude ?>" name="latitude" type="text" class="form-
control">
</div>

<div class="form-group">
<label>Longitude</label>
<input name="longitude" id="Longitude" value="<?= $sumur->longitude ?>" class="form-control">
</div>

<div class="form-group">
<label>Gambar</label>
<img src="<?= base_url('assets/gambar/'.$sumur->gambar) ?>" width="120px">
</div>
<div class="form-group">
<label>Ganti Gambar</label>
<input type="file" name="gambar" class="form-control" required>
</div>

<div class="form-group">
<label>Marker</maker>
<select name="marker" class="form-control">
<option value="<?= $sumur->marker ?>"><?= $sumur->marker ?></option>
<option value="[Link]">Marker 1</option>
<option value="[Link]">Marker 2</option>
<option value="[Link]">Marker 2</option>
</select>

80 | H a l a m a n Roni Haryadi Saputra., [Link].

81

</div>

<div>
<button type="submit" class="btn btn-info">Simpan</button>
<button type="reset" class="btn btn-success">Reset</button>
</div>

<?php
echo form_close(); ?>
</div>
</div>
</div>

<script>
var peta1 = [Link]('[Link]
IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data &copy; <a href="[Link] contributors, ' +
'<a href="[Link] ' +
'Imagery © <a href="[Link]
id: 'mapbox/streets-v11'
});

var peta2 = [Link]('[Link] {

attribution: 'google'
});

var peta3 = [Link]('[Link] {

attribution: '&copy; <a href="[Link] contributors'
});

var map = [Link]('map', {

center: [<?= $sumur->latitude ?>, <?= $sumur->longitude ?>],
zoom: 16,
layers: [peta2]
});

var baseLayers = {
"Grayscale": peta1,
"Satelite": peta2,
"Streets": peta3
};
var overlays = {};

[Link](baseLayers).addTo(map);

var curLocation=[0,0];
if (curLocation[0]==0 && curLocation[1]==0) {
curLocation = [<?= $sumur->latitude ?>, <?= $sumur->longitude ?>];
}

[Link](false);
var marker = new [Link](curLocation, {
draggable:'true'
});

[Link]('dragend', function(event) {
var position = [Link]();
[Link](position,{
draggable : 'true'
}).bindPopup(position).update();
$("#Latitude").val([Link]);
$("#Longitude").val([Link]).keyup();
});

$("#Latitude, #Longitude").change(function(){
var position =[parseInt($("#Latitude").val()), parseInt($("#Longitude").val())];
[Link](position, {
draggable : 'true'
}).bindPopup(position).update();
[Link](position);
});
[Link](marker);

</script>
8. Mengaktifkan tombol edit dengan memodifikasi koding [Link]
(application/views/sumur/[Link])berikut;

<a href="<?= base_url() ?>" class="btn btn-sm btn-warning"><i class="fas fa-

edit"></i></a>

81 | H a l a m a n Roni Haryadi Saputra., [Link].

82

Menjadi

<a href="<?= base_url('sumur/edit/' . $value->id_sumur) ?>" class="btn btn-

sm btn-warning"><i class="fas fa-edit"></i></a>

9. Double klik tombol edit di menu sumur

10. Pastikan hasilnya seperti berikut

e. Membuat Hapus Data

1. Buka halaman Model_sumur.php di dalam Folder Model
(aplication/model/model_sumur.php)
2. Copy dan paste koding berikut kedalam model_sumur.php
public function delete($data)
{
$this->db->where('id_sumur', $data['id_sumur']);
$this->db->delete('tbl_sumur', $data);
}

82 | H a l a m a n Roni Haryadi Saputra., [Link].

83

3. Buka halaman [Link] di dalam Folder Controller (Application/Controller/[Link])

4. Copy dan paste koding berikut kedalam [Link]
//Delete one item
public function delete($id_sumur)
{
$data = array('id_sumur' => $id_sumur);
$this->model_sumur->delete($data);
$this->session->set_flashdata('sukses', 'Data Berhasil Dihapus !!!');
redirect('sumur');
}

5. Mengaktifkan tombol delete dengan memodifikasi koding [Link]

(application/views/sumur/[Link])berikut;
<a href="<?= base_url() ?>" class="btn btn-sm btn-

danger" onclick="return confirm('Apakah Anda Yakin Ingin Hapus Data ini..?')"><i class="fas fa-trash"></i></a>

Menjadi

<a href="<?= base_url('sumur/delete/' . $value->id_sumur) ?>" class="btn btn-sm btn-

danger" onclick="return confirm('Apakah Anda Yakin Ingin Hapus Data ini..?')"><i class="fas fa-trash"></i></a>

6. Double klik tombol delete di menu sumur , dan pastikan datanya berhasil dihapus
f. Menampilkan Data Di Peta
1. Buka Halaman [Link] di dalam Folder Controller
(Application/controller/[Link])
2. Tambahkan koding berikut di dalam function construct halaman [Link]

$this->load->model('model_sumur');// model yang diload

3. Tambahkan koding berikut di dalam function index halaman [Link]
'sumur'=> $this->model_sumur->tampil_data(),

83 | H a l a m a n Roni Haryadi Saputra., [Link].

84

4. Buka halaman peta [Link], copy dan pastekan koding berikut;

var sumur = new [Link]();

5. Masih di halaman peta [Link], copy dan pastekan koding berikut;

,{
groupName : "Pemetaan Secara Online",
expanded : true,
layers : { "Sumur": sumur
}
}

6. Masih di halaman peta [Link], copy dan pastekan koding berikut;

<?php foreach ($sumur as $key => $value) { ?>
[Link]([<?= $value->latitude ?>, <?= $value->longitude ?>], {
icon: [Link]({
iconUrl: '<?= base_url('assets/' . $value->marker) ?>',
iconSize: [30, 36], // size of the icon
})
}).addTo(sumur).bindPopup("<table class='table table-striped table-bordered table-condensed'>" +
"<tr><th>Nama</th><td>" + "<?= $value->nama?>" + "</td></tr>" +
"<tr><th>Longitude</th><td>" + "<?= $value->longitude?>" + "</td></tr>" +
"<tr><th>Latitude</th><td>" + "<?= $value->latitude?>" + "</td></tr>" +
"<tr><th>Foto</th><td>" + "<img src='<?= base_url('assets/gambar/' . $value->gambar) ?>'width='180px'>" + "</td></tr>" +
"<table>");
<?php } ?>

84 | H a l a m a n Roni Haryadi Saputra., [Link].

85

Cek hasilnya
7. Buka link [Link]
8. Klik layerControl dan pilih Layer Sumur

B. Tool Digitas Polyline (Garis)

a. Membuat Tabel

1. Buka PgAdmin
2. Login

85 | H a l a m a n Roni Haryadi Saputra., [Link].

86

3. Buka serverPostgreSQL 13DatabaseSpasial SchemaPublic

Table

4. Klik kanan tableCreattabletentukan nama tabelnya

5. Buat field/kolom seperti gambar berikut;

86 | H a l a m a n Roni Haryadi Saputra., [Link].

87

Isi satu baris sebagai penanda apakah postgresql dengan webgis sudah terkoneksi atau belum.
6. Klik kanan tbl_jalur_evakuasiscriptsinsert scripts

Sehingga menghasilkan halaman berikut;

Isi seperti gambar berikut;

b. Membuat Halaman Tampil Data (Read)

1. Buka Vscode
2. Buat Halaman di dalam Folder Model (exs: Model_evakuasi.php)
3. Isi dengan koding berikut;
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Model_evakuasi extends CI_Model { // nama class harus sesuai dengan nama file

public function tampil_data()

{

87 | H a l a m a n Roni Haryadi Saputra., [Link].

88

$this->db->select('*');
$this->db->from('tbl_jalur_evakuasi');// Tabel yang digunakan
$this->db->order_by('id_jalur_evakuasi', 'desc');// Id yang di tabel
return $this->db->get()->result();
}
}

/* End of file Model [Link] */

4. Buat Halaman di dalam Folder Controller (exs: [Link])
5. Isi dengan koding berikut;
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Evakuasi extends CI_Controller {

public function __construct()

{
parent::__construct();
//Load Dependencies
$this->load->model('model_evakuasi');// model yang diload
}

public function index()

{
$data= array(
'judul' => 'WebGIS Trainning',
'evakuasi'=> $this->model_evakuasi->tampil_data(),
'content' => 'evakuasi/data'
);
$this->load->view('layout/viewunion', $data, FALSE);
}
}
/* End of file [Link] */
6. Buat folder baru didalam folder Views, yaitu klik kananpilih new folderberi nama
dengan kata ’evakuasi’
7. Di folder evakuasi tersebut, buat halaman baru bernam’data’

8. Copy dan paste koding berikut ke halaman [Link] yang di dalam folder evakuasi
<div class="card-body">
<table class="table table-bordered text-sm" id="example1">
<thead class="text-center">
<tr>
<th>No</th>
<th>Nama</th>
<th>Warna</th>
<th>Gambar</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $no = 1;
foreach ($evakuasi as $key => $value) { ?>
<tr>
<td><?= $no++ ?></td>
<td><?= $value->nama?></td>
<td><?= $value->warna?></td>

88 | H a l a m a n Roni Haryadi Saputra., [Link].

89

<td><img src="<?= base_url('assets/gambar/' . $value->gambar) ?>"Width="100px"></td>

<td class="text-center">
<a href="<?= base_url() ?>" class="btn btn-sm btn-warning"><i class="fas fa-
edit"></i></a>
<a href="<?= base_url() ?>" class="btn btn-sm btn-
danger" onclick="return confirm('Apakah Anda Yakin Ingin Hapus Data ini..?')"><i class="fas fa-
trash"></i></a>
<a href="<?= base_url() ?>" class="btn btn-sm btn-success"><i class="fas fa-
plus"></i> </a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>

<script>
$(function() {
$("#example1").DataTable({
"responsive": true,
"autoWidth": false,
});
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
</script>
Selanjutnya meng aktifkan menu Jalur Evakuasi di halaman [Link]
9. Modifikasi koding berikut;
<li class="nav-item">
<a href="../layout/[Link]" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation + Sidebar</p>
</a>
</li>
Menjadi
<li class="nav-item">
<a href="<?=base_url('evakuasi')?>" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Jalur Evakuasi</p>
</a>
</li>
10. Refresh link [Link]
11. Double klik menu Jalur Evakuasi dan pastikan hasimya seperti berikut

89 | H a l a m a n Roni Haryadi Saputra., [Link].

90

Tahapan selajutnya adalah membuat tool add data. Namun sebelumnya, perlu diinstall plugin
color picker dan leaflet-drawing. Berikut langkah-langkahnya.
1. Copy dan paste koding berikut di halaman [Link]
<!-- Bootstrap Color Picker -->
<link rel="stylesheet" href="<?=base_url()?>assets/template/plugins/bootstrap-colorpicker/css/[Link]">
<!-- bootstrap color picker -->
<script src="<?=base_url()?>assets/template/plugins/bootstrap-colorpicker/js/[Link]"></script>

<!-- Leaflet Draw -->

<link rel="stylesheet" href="[Link] />
<script src="[Link]

c. Membuat Tambah Data (add data)

1. Buka halaman Model_evakuasi.php di dalam folder Model, tambahkan koding berikut;
public function add($data)
{
$this->db->insert('tbl_jalur_evakuasi', $data);
}
2. Buka halaman Evakuasi di dalam folder (Application/Controller/[Link]),
copy dan paste koding berikut;
// Add a new item
public function add()
{
$this->form_validation->set_rules('nama', 'Nama evakuasi', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('warna', 'Warna', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('geojson', 'GeoJSON', 'required', array(
'required' => '%s Harus Diisi !!!'
));
if ($this->form_validation->run() == TRUE) {
$config['upload_path'] = './assets/gambar/';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 4000;
$this->upload->initialize($config);
if (!$this->upload->do_upload('gambar')) {
$data = array(
'judul' => 'Add Data',
'error_upload' => $this->upload->display_errors(),
'content' => 'evakuasi/add'
);
$this->load->view('layout/viewunion', $data, FALSE);
} else {
$upload_data = array('uploads' => $this->upload->data());
$config['image_library'] = 'gd2';
$config['source_image'] = './assets/gambar/' . $upload_data['uploads']['file_name'];
$this->load->library('image_lib', $config);
$data = array(
'nama' => $this->input->post('nama'),
'warna' => $this->input->post('warna'),
'geojson' => $this->input->post('geojson'),
'gambar' => $upload_data['uploads']['file_name'],
);
$this->model_evakuasi->add($data);
$this->session->set_flashdata('pesan', 'Data Berhasil Disimpan !!!');
redirect('evakuasi');
}
}
$data = array(
'judul' => 'Add Data',
'content' => 'evakuasi/add'
);
$this->load->view('layout/viewunion', $data, FALSE);
}

90 | H a l a m a n Roni Haryadi Saputra., [Link].

91

3. Buka folder evakuasi, buat halaman [Link].

4. Copy dan paste kan koding berikut ke dalam halaman [Link]
<div class="card-body">
<div class="row">
<div class="col-sm-7">
<!-- peta -->
<div id="map" style="width: 100%; height: 600px;"></div>
<!-- end peta -->
</div>

<div class="col-sm-5">
<?php
echo validation_errors('<div class="alert alert-warning alert-
dismissible"><button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>', '</div>');
if (isset($error_upload)) { echo '<div class="alert alert-danger alert-
dismissible"> <button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>' . $error_upload . '</div>';
}
echo form_open_multipart('evakuasi/add');
?>

<div class="form-group">
<label>Nama Jalur Evakuasi</label>
<input name="nama" placeholder="Nama Jalur Evakuasi" type="text" class="form-control">
</div>

<div class="form-group">
<label>GeoJSON</label>
<textarea name="geojson" rows="4" class="form-control"></textarea>
</div>

<div class="form-group">
<label>Warna </label>
<div class="input-group my-colorpicker2">
<input type="text" name="warna" class="form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-square"></i></span>
</div>
</div>
</div>

<div class="form-group">
<label>Gambar</label>
<input type="file" name="gambar" class="form-control" required>
</div>

<div>
<button type="submit" class="btn btn-info">Simpan</button>
<button type="reset" class="btn btn-success">Reset</button>
</div>

<?php
echo form_close(); ?>
</div>
</div>

</div>
</div>
</div>

<script>
var peta1 = [Link]('[Link]
IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data &copy; <a href="[Link] contributors, ' +
'<a href="[Link] ' +
'Imagery © <a href="[Link]
id: 'mapbox/streets-v11'
});

var peta2 = [Link]('[Link] {

attribution: 'google'
});

var peta3 = [Link]('[Link] {

attribution: '&copy; <a href="[Link] contributors'
});

var map = [Link]('map', {

center: [-1.7912605, 116.42311],

91 | H a l a m a n Roni Haryadi Saputra., [Link].

92

zoom: 4,
layers: [peta2]
});

var baseLayers = {
"Grayscale": peta1,
"Satelite": peta2,
"Streets": peta3
};

var overlays = {

};

[Link](baseLayers).addTo(map);

// FeatureGroup is to store editable layers

var drawnItems = new [Link]();
[Link](drawnItems);
var drawControl = new [Link]({
draw: {
polygon: false,
marker: false,
circle: false,
circlemarker: false,
rectangle: false,
polyline: true,
},
edit: {
featureGroup: drawnItems
}
});
[Link](drawControl);

//membuat draw
[Link]('draw:created', function(event) {
var layer = [Link];
var feature = [Link] = [Link] || {};
[Link] = [Link] || "Feature";
var props = [Link] = [Link] || {};
[Link](layer);
$("[name=geojson]").html([Link]([Link]()));
});

//edit draw
[Link]('draw:edited', function(e) {
$("[name=geojson]").html([Link]([Link]()));
});

//delete draw
[Link]('draw:deleted', function(e) {
$("[name=geojson]").html([Link]([Link]()));
});
</script>

<script>
$(function() {

//color picker with addon

$('.my-colorpicker2').colorpicker()

$('.my-colorpicker2').on('colorpickerChange', function(event) {
$('.my-colorpicker2 .fa-square').css('color', [Link]());
});

})
</script>

5. Selanjutnya mengaktifkan tombol Add Data dengan memodifikasi koding yang

berada di halaman [Link] (Application/views/evakuasi/[Link])

<a href="<?= base_url() ?>" class="btn btn-sm btn-success"><i class="fas fa-

plus"></i> </a>
Menjadi

<a href="<?= base_url('evakuasi/add') ?>" class="btn btn-sm btn-success"><i class="fas fa-

plus"></i> </a>

92 | H a l a m a n Roni Haryadi Saputra., [Link].

93

6. Double klik tombol di halaman Jalur Evakuasi

d. Membuat Edit Data

1. Buka halaman Model_evakuasi.php di dalam Folder Model
(aplication/model/model_evakuasi.php)
2. Copy dan paste koding berikut kedalam model_evakuasi.php
public function detail($id_jalur_evakuasi)
{
$this->db->select('*');
$this->db->from('tbl_jalur_evakuasi');
$this->db->where('id_jalur_evakuasi', $id_jalur_evakuasi);
return $this->db->get()->row();
}

public function edit($data)

{
$this->db->where('id_jalur_evakuasi', $data['id_jalur_evakuasi']);
$this->db->update('tbl_jalur_evakuasi', $data);
}
3. Buka halaman [Link] dan di dalam Folder Controller
(Application/Controller/[Link])
4. Copy dan paste koding berikut kedalam [Link]
// Add a new item
public function edit($id_jalur_evakuasi= null)
{

93 | H a l a m a n Roni Haryadi Saputra., [Link].

94

$this->form_validation->set_rules('nama', 'Nama evakuasi', 'required', array(

'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('warna', 'Warna', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('geojson', 'GeoJSON', 'required', array(
'required' => '%s Harus Diisi !!!'
));
if ($this->form_validation->run() == TRUE) {
$config['upload_path'] = './assets/gambar/';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 4000;
$this->upload->initialize($config);
if (!$this->upload->do_upload('gambar')) {
$data = array(
'judul' => 'edit Data',
'error_upload' => $this->upload->display_errors(),
'evakuasi' => $this->model_evakuasi->detail($id_jalur_evakuasi),
'content' => 'evakuasi/edit'
);
$this->load->view('layout/viewunion', $data, FALSE);
} else {
$upload_data = array('uploads' => $this->upload->data());
$config['image_library'] = 'gd2';
$config['source_image'] = './assets/gambar/' . $upload_data['uploads']['file_name'];
$this->load->library('image_lib', $config);
$data = array(
'id_jalur_evakuasi'=>$id_jalur_evakuasi,
'nama' => $this->input->post('nama'),
'warna' => $this->input->post('warna'),
'geojson' => $this->input->post('geojson'),
'gambar' => $upload_data['uploads']['file_name'],
);
$this->model_evakuasi->edit($data);
$this->session->set_flashdata('pesan', 'Data Berhasil diperbarui !!!');
redirect('evakuasi');
}

$data = array(
'id_jalur_evakuasi'=>$id_jalur_evakuasi,
'nama' => $this->input->post('nama'),
'warna' => $this->input->post('warna'),
'geojson' => $this->input->post('geojson'),
);
$this->model_evakuasi->edit($data);
$this->session->set_flashdata('pesan', 'Data Berhasil diperbarui !!!');
redirect('evakuasi');
}
$data = array(
'judul' => 'edit Data',
'evakuasi' => $this->model_evakuasi->detail($id_jalur_evakuasi),
'content' => 'evakuasi/edit'
);
$this->load->view('layout/viewunion', $data, FALSE);
}

5. Buat Halaman [Link] di dalam folder evakuasi (Application/views/evakuasi),

copy dan paste koding berikut;
<div class="card-body">
<div class="row">
<div class="col-sm-7">
<!-- peta -->
<div id="map" style="width: 100%; height: 600px;"></div>
<!-- end peta -->
</div>

<div class="col-sm-5">
<?php
echo validation_errors('<div class="alert alert-warning alert-
dismissible"><button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>', '</div>');

94 | H a l a m a n Roni Haryadi Saputra., [Link].

95

if (isset($error_upload)) { echo '<div class="alert alert-danger alert-

dismissible"> <button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>' . $error_upload . '</div>';
}
echo form_open_multipart('evakuasi/edit/'.$evakuasi->id_jalur_evakuasi);
?>

<div class="form-group">
<label>Nama Jalur Evakuasi</label>
<input name="nama" value="<?= $evakuasi->nama ?>" type="text" class="form-control">
</div>

<div class="form-group">
<label>GeoJSON</label>
<textarea name="geojson" rows="4" class="form-control"><?= $evakuasi->geojson ?></textarea>
</div>

<div class="form-group">
<label>Warna </label>
<div class="input-group my-colorpicker2">
<input type="text" name="warna" value="<?= $evakuasi->warna ?>" class="form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-square"></i></span>
</div>
</div>
</div>

<div class="form-group">
<label>Gambar</label>
<img src="<?= base_url('assets/gambar/'.$evakuasi->gambar) ?>" width="120px">
</div>
<div class="form-group">
<label>Ganti Gambar</label>
<input type="file" name="gambar" class="form-control" >
</div>
<div>
<button type="submit" class="btn btn-info">Simpan</button>
<button type="reset" class="btn btn-success">Reset</button>
</div>

<?php
echo form_close(); ?>
</div>
</div>

</div>
</div>
</div>

<script>
var peta1 = [Link]('[Link]
IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data &copy; <a href="[Link] contributors, ' +
'<a href="[Link] ' +
'Imagery © <a href="[Link]
id: 'mapbox/streets-v11'
});

var peta2 = [Link]('[Link] {

attribution: 'google'
});

var peta3 = [Link]('[Link] {

attribution: '&copy; <a href="[Link] contributors'
});

var map = [Link]('map', {

center: [-1.7912605, 116.42311],
zoom: 4,
layers: [peta2]
});

var baseLayers = {
"Grayscale": peta1,
"Satelite": peta2,
"Streets": peta3
};

var overlays = { };

[Link](baseLayers).addTo(map);

// FeatureGroup is to store editable layers

var drawnItems = new [Link](<?= $evakuasi->geojson ?>);
[Link](drawnItems);

95 | H a l a m a n Roni Haryadi Saputra., [Link].

96

var drawControl = new [Link]({

draw: {
polygon: false,
marker: false,
circle: false,
circlemarker: false,
rectangle: false,
polyline: true,
},
edit: {
featureGroup: drawnItems
}
});
[Link](drawControl);

//membuat draw
[Link]('draw:created', function(event) {
var layer = [Link];
var feature = [Link] = [Link] || {};
[Link] = [Link] || "Feature";
var props = [Link] = [Link] || {};
[Link](layer);
$("[name=geojson]").html([Link]([Link]()));
});

//edit draw
[Link]('draw:edited', function(e) {
$("[name=geojson]").html([Link]([Link]()));
});

//delete draw
[Link]('draw:deleted', function(e) {
$("[name=geojson]").html([Link]([Link]()));
});

[Link]([Link]());
</script>

<script>
$(function() {

//color picker with addon

$('.my-colorpicker2').colorpicker()

$('.my-colorpicker2').on('colorpickerChange', function(event) {
$('.my-colorpicker2 .fa-square').css('color', [Link]());
});

})
</script>
Selanjutnya meng aktifkan tombol edit dengan memodifikasi koding [Link] yang didalam
folder evakuasi.

<a href="<?= base_url() ?>" class="btn btn-sm btn-warning"><i class="fas fa-edit"></i></a>

Menjadi

<a href="<?= base_url('evakuasi/edit/' . $value->id_jalur_evakuasi) ?>" class="btn btn-

sm btn-warning"><i class="fas fa-edit"></i></a>

6. Cek hasilnya dengan mendouble klik menu jalur evakuasiklik tombol

96 | H a l a m a n Roni Haryadi Saputra., [Link].

97

e. Membuat Hapus Data

1. Buka halaman Model_evakuasi.php di dalam Folder Model
(aplication/model/model_evakuasi.php)
2. Copy dan paste koding berikut kedalam model_evakuasi.php
public function delete($data)
{
$this->db->where('id_jalur_evakuasi', $data['id_jalur_evakuasi']);
$this->db->delete('tbl_jalur_evakuasi', $data);
}

3. Buka halaman [Link] di dalam Folder Controller (Application/Controller/

[Link])
4. Copy dan paste koding berikut kedalam [Link]
public function delete($id_jalur_evakuasi)
{
$data = array('id_jalur_evakuasi' => $id_jalur_evakuasi);
$this->model_evakuasi->delete($data);
$this->session->set_flashdata('sukses', 'Data Berhasil Dihapus !!!');
redirect('evakuasi');
}

5. Mengaktifkan tombol delete dengan memodifikasi koding [Link]

(application/views/evakuasi/[Link]) berikut;
<a href="<?= base_url() ?>" class="btn btn-sm btn-

danger" onclick="return confirm('Apakah Anda Yakin Ingin Hapus Data ini..?')"><i class="fas fa-trash"></i></a>

Menjadi

<a href="<?= base_url('evakuasi/delete/' . $value->id_jalur_evakuasi) ?>" class="btn btn-sm btn-

danger" onclick="return confirm('Apakah Anda Yakin Ingin Hapus Data ini..?')"><i class="fas fa-trash"></i></a>

6. Double klik tombol delete di menu evakuasi , dan pastikan datanya berhasil
dihapus

f. Menampilkan Data Di Peta

1. Buka Halaman [Link] di dalam Folder Controller
(Application/controller/[Link])

97 | H a l a m a n Roni Haryadi Saputra., [Link].

98

2. Tambahkan koding berikut di dalam function construct halaman [Link]

$this->load->model('model_evakuasi');// model yang diload
3. Tambahkan koding berikut di dalam function index halaman [Link]
'evakuasi'=> $this->model_evakuasi->tampil_data(),

4. Buka halaman peta [Link], copy dan pastekan koding berikut;

var jalur = new [Link]();

5. Masih di halaman peta [Link], copy dan pastekan koding berikut;

"Jalur Evakuasi": jalur

6. Masih di halaman peta [Link], copy dan pastekan koding berikut;

<?php foreach ($evakuasi as $key => $value) { ?>
evakuasi = [Link](<?= $value->geojson; ?>, {
style: {
color: "<?= $value->warna ?>"
},
}).addTo(jalur);
[Link](function(layer) {
[Link]("<table class='table table-striped table-bordered table-condensed'>" +
"<tr><th>Nama</th><td>" + "<?= $value->nama?>" + "</td></tr>" +
"<tr><th>Warna</th><td>" + "<?= $value->warna?>" + "</td></tr>" +
"<tr><th>Foto</th><td>" + "<img src='<?= base_url('assets/gambar/' . $value->gambar) ?>'width='180px'>" + "</td></tr>" +
"<table>");
});
<?php } ?>

98 | H a l a m a n Roni Haryadi Saputra., [Link].

99

Cek hasilnya
7. Buka link [Link]
8. Klik layerControl dan pilih Layer Jalur Evakuasi

C. Tool Digitas Polygon (Luasan/Area)

a. Membuat Tabel

1. Buka PgAdmin
2. Login

3. Buka serverPostgreSQL 13DatabaseSpasial SchemaPublic

Table

99 | H a l a m a n Roni Haryadi Saputra., [Link].

100

4. Klik kanan tableCreattable

5. Tentukan nama tabelnya dan kolomnya (ex:tbl_area_kebakaran)

100 | H a l a m a n Roni Haryadi Saputra.,

[Link].
101

6. Isi satu baris, dengan klik kanan tbl_area_kebakaranscriptsINSERT

Script

Sehingga menghasilkan halaman berikut;

Isi seperti gambar berikut;

101 | H a l a m a n Roni Haryadi Saputra.,

[Link].
102

b. Membuat Halaman Tampil Data (Read)

1. Buka Vscode
2. Buat Halaman di dalam Folder Model (exs: Model_kebakaran.php)
3. Isi dengan koding berikut;
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Model_kebakaran extends CI_Model { // nama class harus sesuai dengan nama file

public function tampil_data()

{
$this->db->select('*');
$this->db->from('tbl_area_kebakaran');// Tabel yang digunakan
$this->db->order_by('id_kebakaran', 'desc');// Id yang di tabel
return $this->db->get()->result();
}
}
/* End of file Model [Link] */
4. Buat Halaman di dalam Folder Controller (exs: [Link])
5. Isi dengan koding berikut;
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Kebakaran extends CI_Controller {

public function __construct()

{
parent::__construct();
//Load Dependencies
$this->load->model('model_kebakaran');// model yang diload
}

public function index()

{
$data= array(
'judul' => 'WebGIS Trainning',
'kebakaran'=> $this->model_kebakaran->tampil_data(),
'content' => 'kebakaran/data'
);
$this->load->view('layout/viewunion', $data, FALSE);
}
}
/* End of file [Link] */
6. Buat folder baru didalam folder Views, yaitu klik kananpilih new folderberi nama
dengan kata ’kebakaran’
7. Di folder kebakaran tersebut, buat halaman baru bernama’[Link]’

8. Copy dan paste koding berikut ke halaman [Link] yang di dalam folder evakuasi
<div class="card-body">
<table class="table table-bordered text-sm" id="example1">
<thead class="text-center">
<tr>

102 | H a l a m a n Roni Haryadi Saputra.,

[Link].
103

<th>No</th>
<th>Lokasi</th>
<th>Luas</th>
<th>Warna</th>
<th>Gambar</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $no = 1;
foreach ($kebakaran as $key => $value) { ?>
<tr>
<td><?= $no++ ?></td>
<td><?= $value->lokasi?></td>
<td><?= $value->luas?></td>
<td><?= $value->warna?></td>
<td><img src="<?= base_url('assets/gambar/' . $value->gambar) ?>"Width="100px"></td>
<td class="text-center">
<a href="<?= base_url() ?>" class="btn btn-sm btn-warning"><i class="fas fa-
edit"></i></a>
<a href="<?= base_url() ?>" class="btn btn-sm btn-
danger" onclick="return confirm('Apakah Anda Yakin Ingin Hapus Data ini..?')"><i class="fas fa-
trash"></i></a>
<a href="<?= base_url() ?>" class="btn btn-sm btn-success"><i class="fas fa-
plus"></i> </a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>

<script>
$(function() {
$("#example1").DataTable({
"responsive": true,
"autoWidth": false,
});
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
</script>

Selanjutnya meng aktifkan menu Area Kebakaran di halaman [Link]

9. Modifikasi koding berikut;
<li class="nav-item">
<a href="../layout/[Link]" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Boxed</p>
</a>
</li>
Menjadi
<li class="nav-item">
<a href ="<?=base_url('kebakaran')?>" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Area Kebakaran</p>
</a>
</li>

103 | H a l a m a n Roni Haryadi Saputra.,

[Link].
104

10. Refresh link [Link]

11. Double klik menu Area Kebakaran dan pastikan hasilnya seperti berikut

c. Membuat Tambah Data (add data)

7. Buka halaman Model_kebakaran.php di dalam folder Model, tambahkan koding berikut;
public function add($data)
{
$this->db->insert('tbl_area_kebakaran', $data);
}
8. Buka halaman Kebakaran di dalam folder
(Application/Controller/[Link]), copy dan paste koding berikut;
// Add a new item
public function add()
{
$this->form_validation->set_rules('lokasi', 'Lokasi Kebakaran', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('luas', 'Luas', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('warna', 'Warna', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('geojson', 'GeoJSON', 'required', array(
'required' => '%s Harus Diisi !!!'
));
if ($this->form_validation->run() == TRUE) {
$config['upload_path'] = './assets/gambar/';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 4000;
$this->upload->initialize($config);
if (!$this->upload->do_upload('gambar')) {
$data = array(
'judul' => 'Add Data',
'error_upload' => $this->upload->display_errors(),
'content' => 'kebakaran/add'
);
$this->load->view('layout/viewunion', $data, FALSE);
} else {
$upload_data = array('uploads' => $this->upload->data());

104 | H a l a m a n Roni Haryadi Saputra.,

[Link].
105

$config['image_library'] = 'gd2';
$config['source_image'] = './assets/gambar/' . $upload_data['uploads']['file_name'];
$this->load->library('image_lib', $config);
$data = array(
'lokasi' => $this->input->post('lokasi'),
'luas' => $this->input->post('luas'),
'warna' => $this->input->post('warna'),
'geojson' => $this->input->post('geojson'),
'gambar' => $upload_data['uploads']['file_name'],
);
$this->model_kebakaran->add($data);
$this->session->set_flashdata('pesan', 'Data Berhasil Disimpan !!!');
redirect('kebakaran');
}
}
$data = array(
'judul' => 'Add Data',
'content' => 'kebakaran/add'
);
$this->load->view('layout/viewunion', $data, FALSE);
}
9. Buka folder kebakaran, buat halaman [Link].
10. Copy dan paste kan koding berikut ke dalam halaman [Link]
<div class="card-body">
<div class="row">
<div class="col-sm-7">
<!-- peta -->
<div id="map" style="width: 100%; height: 600px;"></div>
<!-- end peta -->
</div>

<div class="col-sm-5">
<?php
echo validation_errors('<div class="alert alert-warning alert-
dismissible"><button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>', '</div>');
if (isset($error_upload)) { echo '<div class="alert alert-danger alert-
dismissible"> <button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>' . $error_upload . '</div>';
}
echo form_open_multipart('kebakaran/add');
?>

<div class="form-group">
<label>Lokasi</label>
<input name="lokasi" placeholder="Lokasi Kebakaran" type="text" class="form-
control">
</div>

<div class="form-group">
<label>Luas</label>
<input name="luas" placeholder="Luas Kebakaran" type="text" class="form-control">
</div>

<div class="form-group">
<label>GeoJSON</label>
<textarea name="geojson" rows="4" class="form-control"></textarea>
</div>

<div class="form-group">
<label>Warna </label>
<div class="input-group my-colorpicker2">
<input type="text" name="warna" class="form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-square"></i></span>
</div>
</div>
</div>

<div class="form-group">
<label>Gambar</label>

105 | H a l a m a n Roni Haryadi Saputra.,

[Link].
106

<input type="file" name="gambar" class="form-control" required>

</div>

<div>
<button type="submit" class="btn btn-info">Simpan</button>
<button type="reset" class="btn btn-success">Reset</button>
</div>

<?php
echo form_close(); ?>
</div>
</div>

</div>
</div>
</div>

<script>
var peta1 = [Link]('[Link]
yJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data &copy; <a href="[Link] contr
ibutors, ' +
'<a href="[Link] ' +
'Imagery © <a href="[Link]
id: 'mapbox/streets-v11'
});

var peta2 = [Link]('[Link] {

attribution: 'google'
});

var peta3 = [Link]('[Link] {

attribution: '&copy; <a href="[Link] contr
ibutors'
});

var map = [Link]('map', {

center: [-1.7912605, 116.42311],
zoom: 4,
layers: [peta2]
});

var baseLayers = {
"Grayscale": peta1,
"Satelite": peta2,
"Streets": peta3
};

var overlays = {

};

[Link](baseLayers).addTo(map);

// FeatureGroup is to store editable layers

var drawnItems = new [Link]();
[Link](drawnItems);
var drawControl = new [Link]({
draw: {
polygon: true,
marker: false,
circle: true,
circlemarker: false,
rectangle: true,
polyline: false,
},
edit: {
featureGroup: drawnItems
}
});
[Link](drawControl);

106 | H a l a m a n Roni Haryadi Saputra.,

[Link].
107

//membuat draw
[Link]('draw:created', function(event) {
var layer = [Link];
var feature = [Link] = [Link] || {};
[Link] = [Link] || "Feature";
var props = [Link] = [Link] || {};
[Link](layer);
$("[name=geojson]").html([Link]([Link]()));
});

//edit draw
[Link]('draw:edited', function(e) {
$("[name=geojson]").html([Link]([Link]()));
});

//delete draw
[Link]('draw:deleted', function(e) {
$("[name=geojson]").html([Link]([Link]()));
});
</script>

<script>
$(function() {

//color picker with addon

$('.my-colorpicker2').colorpicker()

$('.my-colorpicker2').on('colorpickerChange', function(event) {
$('.my-colorpicker2 .fa-square').css('color', [Link]());
});

})
</script>

11. Selanjutnya mengaktifkan koding menu Add Data dengan memodifikasi koding
yang berada di halaman [Link] (Application/views/kebakaran/[Link])
<a href="<?= base_url() ?>" class="btn btn-sm btn-success"><i class="fas fa-
plus"></i> </a>
Menjadi

<a href="<?= base_url('kebakaran/add') ?>" class="btn btn-sm btn-success"><i class="fas fa-

plus"></i> </a>

12. Double klik tombol di halaman Jalur Evakuasi

107 | H a l a m a n Roni Haryadi Saputra.,

[Link].
108

d. Membuat Edit Data

1. Buka halaman Model_kebakaran.php di dalam Folder Model
(aplication/model/model_kebakaran.php)
2. Copy dan paste koding berikut kedalam model_kebakaran.php
public function detail($id_kebakaran)
{
$this->db->select('*');
$this->db->from('tbl_area_kebakaran');
$this->db->where('id_kebakaran', $id_kebakaran);
return $this->db->get()->row();
}

public function edit($data)

{
$this->db->where('id_kebakaran', $data['id_kebakaran']);
$this->db->update('tbl_area_kebakaran', $data);
}
3. Buka halaman [Link] dan di dalam Folder Controller
(Application/Controller/[Link])
4. Copy dan paste koding berikut kedalam [Link]
// Add a new item
public function edit($id_kebakaran= null)
{
$this->form_validation->set_rules('lokasi', 'Lokasi Kebakaran', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('luas', 'Luas', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('warna', 'Warna', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('geojson', 'GeoJSON', 'required', array(
'required' => '%s Harus Diisi !!!'
));
if ($this->form_validation->run() == TRUE) {
$config['upload_path'] = './assets/gambar/';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 4000;
$this->upload->initialize($config);
if (!$this->upload->do_upload('gambar')) {
$data = array(
'judul' => 'edit Data',
'error_upload' => $this->upload->display_errors(),
'kebakaran' => $this->model_kebakaran->detail($id_kebakaran),
'content' => 'kebakaran/edit'
);
$this->load->view('layout/viewunion', $data, FALSE);
} else {
$upload_data = array('uploads' => $this->upload->data());

108 | H a l a m a n Roni Haryadi Saputra.,

[Link].
109

$config['image_library'] = 'gd2';
$config['source_image'] = './assets/gambar/' . $upload_data['uploads']['file_name'];
$this->load->library('image_lib', $config);
$data = array(
'id_kebakaran'=>$id_kebakaran,
'lokasi' => $this->input->post('lokasi'),
'luas' => $this->input->post('luas'),
'warna' => $this->input->post('warna'),
'geojson' => $this->input->post('geojson'),
'gambar' => $upload_data['uploads']['file_name'],
);
$this->model_kebakaran->edit($data);
$this->session->set_flashdata('pesan', 'Data Berhasil diperbarui !!!');
redirect('kebakaran');
}

$data = array(
'id_kebakaran'=>$id_kebakaran,
'lokasi' => $this->input->post('lokasi'),
'luas' => $this->input->post('luas'),
'warna' => $this->input->post('warna'),
'geojson' => $this->input->post('geojson')
);
$this->model_kebakaran->edit($data);
$this->session->set_flashdata('pesan', 'Data Berhasil diperbarui !!!');
redirect('kebakaran');
}
$data = array(
'judul' => 'edit Data',
'kebakaran' => $this->model_kebakaran->detail($id_kebakaran),
'content' => 'kebakaran/edit'
);
$this->load->view('layout/viewunion', $data, FALSE);
}

5. Buat Halaman [Link] di dalam folder kebakaran (Application/views/kebakaran),

copy dan paste koding berikut;
<div class="card-body">
<div class="row">
<div class="col-sm-7">
<!-- peta -->
<div id="map" style="width: 100%; height: 600px;"></div>
<!-- end peta -->
</div>

<div class="col-sm-5">
<?php
echo validation_errors('<div class="alert alert-warning alert-
dismissible"><button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>', '</div>');
if (isset($error_upload)) { echo '<div class="alert alert-danger alert-
dismissible"> <button type="button" class="close" data-dismiss="alert" aria-
hidden="true">&times;</button>' . $error_upload . '</div>';
}
echo form_open_multipart('kebakaran/edit/'.$kebakaran->id_kebakaran);
?>

<div class="form-group">
<label>Lokasi</label>
<input name="lokasi" value="<?= $kebakaran->lokasi ?>" type="text" class="form-control">
</div>
<div class="form-group">
<label>Luas</label>
<input name="luas" value="<?= $kebakaran->luas ?>" type="text" class="form-control">
</div>
<div class="form-group">
<label>GeoJSON</label>
<textarea name="geojson" rows="4" class="form-control"><?= $kebakaran->geojson ?></textarea>
</div>
<div class="form-group">
<label>Warna </label>
<div class="input-group my-colorpicker2">
<input type="text" name="warna" value="<?= $kebakaran->warna ?>" class="form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-square"></i></span>
</div>

109 | H a l a m a n Roni Haryadi Saputra.,

[Link].
110

</div>
</div>
<div class="form-group">
<label>Gambar</label>
<img src="<?= base_url('assets/gambar/'.$kebakaran->gambar) ?>" width="120px">
</div>
<div class="form-group">
<label>Ganti Gambar</label>
<input type="file" name="gambar" class="form-control" >
</div>

<div>
<button type="submit" class="btn btn-info">Simpan</button>
<button type="reset" class="btn btn-success">Reset</button>
</div>

<?php
echo form_close(); ?>
</div>
</div>

</div>
</div>
</div>

<script>
var peta1 = [Link]('[Link]
IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data &copy; <a href="[Link] contributors, ' +
'<a href="[Link] ' +
'Imagery © <a href="[Link]
id: 'mapbox/streets-v11'
});

var peta2 = [Link]('[Link] {

attribution: 'google'
});

var peta3 = [Link]('[Link] {

attribution: '&copy; <a href="[Link] contributors'
});

var map = [Link]('map', {

center: [-1.7912605, 116.42311],
zoom: 4,
layers: [peta2]
});

var baseLayers = {
"Grayscale": peta1,
"Satelite": peta2,
"Streets": peta3
};

var overlays = {};

[Link](baseLayers).addTo(map);

// FeatureGroup is to store editable layers

var drawnItems = new [Link](<?= $kebakaran->geojson ?>);
[Link](drawnItems);
var drawControl = new [Link]({
draw: {
polygon: true,
marker: false,
circle: true,
circlemarker: false,
rectangle: true,
polyline: false,
},
edit: {
featureGroup: drawnItems
}
});
[Link](drawControl);

//membuat draw
[Link]('draw:created', function(event) {
var layer = [Link];
var feature = [Link] = [Link] || {};
[Link] = [Link] || "Feature";
var props = [Link] = [Link] || {};
[Link](layer);
$("[name=geojson]").html([Link]([Link]()));

110 | H a l a m a n Roni Haryadi Saputra.,

[Link].
111

});

//edit draw
[Link]('draw:edited', function(e) {
$("[name=geojson]").html([Link]([Link]()));
});

//delete draw
[Link]('draw:deleted', function(e) {
$("[name=geojson]").html([Link]([Link]()));
});

[Link]([Link]());
</script>

<script>
$(function() {

//color picker with addon

$('.my-colorpicker2').colorpicker()

$('.my-colorpicker2').on('colorpickerChange', function(event) {
$('.my-colorpicker2 .fa-square').css('color', [Link]());
});

})
</script>

Selanjutnya meng aktifkan tombol edit dengan memodifikasi koding [Link] yang didalam
folder kebakaran.

<a href="<?= base_url() ?>" class="btn btn-sm btn-warning"><i class="fas fa-edit"></i></a>

Menjadi
<a href="<?= base_url(kebakaran/edit/' . $value->id_kebakaran) ?>" class="btn btn-sm btn-
warning"><i class="fas fa-edit"></i></a>

6. Cek hasilnya dengan mendouble klik menu jalur evakuasiklik tombol

e. Membuat Hapus Data

1. Buka halaman Model_kebakaran.php di dalam Folder Model
(aplication/model/model_kebakaran.php)
2. Copy dan paste koding berikut kedalam model_kebakaran.php
public function delete($data)
{
$this->db->where('id_kebakaran', $data['id_kebakaran']);
$this->db->delete('tbl_area_kebakaran', $data);
}
111 | H a l a m a n Roni Haryadi Saputra.,
[Link].
112

3. Buka halaman [Link] di dalam Folder Controller (Application/Controller/

[Link])
4. Copy dan paste koding berikut kedalam [Link]
//Delete one item
public function delete($id_kebakaran)
{
$data = array('id_kebakaran' => $id_kebakaran);
$this->model_kebakaran->delete($data);
$this->session->set_flashdata('sukses', 'Data Berhasil Dihapus !!!');
redirect('kebakaran');
}

5. Mengaktifkan tombol delete dengan memodifikasi koding [Link]

(application/views/evakuasi/[Link]) berikut;
<a href="<?= base_url() ?>" class="btn btn-sm btn-

danger" onclick="return confirm('Apakah Anda Yakin Ingin Hapus Data ini..?')"><i class="fas fa-trash"></i></a>
Menjadi
<a href="<?= base_url('kebakaran/delete/' . $value->id_kebakaran) ?>" class="btn btn-sm btn-
danger" onclick="return confirm('Apakah Anda Yakin Ingin Hapus Data ini..?')"><i class="fas fa-trash"></i></a>

6. Double klik tombol delete di menu Area Kebakaran , dan pastikan datanya
berhasil dihapus

f. Menampilkan Data Di Peta

9. Buka Halaman [Link] di dalam Folder Controller
(Application/controller/[Link])
10. Tambahkan koding berikut di dalam function construct halaman [Link]

$this->load->model('model_kebakaran');// model yang diload

11. Tambahkan koding berikut di dalam function index halaman [Link]
'kebakaran'=> $this->model_kebakaran->tampil_data(),

112 | H a l a m a n Roni Haryadi Saputra.,

[Link].
113

12. Buka halaman peta [Link], copy dan pastekan koding berikut;
var kebakaran = new [Link]();

13. Masih di halaman peta [Link], copy dan pastekan koding berikut;
"Area Kebakaran": kebakaran

14. Masih di halaman peta [Link], copy dan pastekan koding berikut;
<?php foreach ($kebakaran as $key => $value) { ?>
kebakaran = [Link](<?= $value->geojson; ?>, {
style: {
color: 'white',
dashArray: '3',
lineCap: 'butt',
lineJoin: 'miter',
fillColor: '<?= $value->warna ?>',
fillOpacity: 1.0,
},
}).addTo(kebakaran);
[Link](function(layer) {
[Link]("<table class='table table-striped table-bordered table-condensed'>" +
"<tr><th>Lokasi</th><td>" + "<?= $value->lokasi?>" + "</td></tr>" +
"<tr><th>Luas</th><td>" + "<?= $value->luas?>" + "</td></tr>" +
"<tr><th>Warna</th><td>" + "<?= $value->warna?>" + "</td></tr>" +
"<tr><th>Foto</th><td>" + "<img src='<?= base_url('assets/gambar/' . $value-
>gambar) ?>'width='180px'>" + "</td></tr>" +
"<table>");
});
<?php } ?>

113 | H a l a m a n Roni Haryadi Saputra.,

[Link].
114

Cek hasilnya
15. Buka link [Link]
16. Klik layerControl dan pilih Layer Area Kebakaran

114 | H a l a m a n Roni Haryadi Saputra.,

[Link].
115

Bab IX Memperbaiki Tampilan Dashboard

A. Penyederhanaan Koding
a. [Link]
1. Buka halaman [Link]. Hapus koding menu home, contact, fitur
pencarian, atau pastikan koding yang tersisa seperti gambar berikut;

b. [Link]
1. Buka halaman [Link]. Hapus isi koding
<ul class="navbar-nav ml-auto">
.
.
. Hapus
.
.
.
</ul>

115 | H a l a m a n Roni Haryadi Saputra.,

[Link].
116

2. Hapus koding berikut

<!-- Sidebar user (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="../.../ssets/template/dist/img/[Link]" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">Alexander Pierce</a>
</div>
</div>

3. Selanjutnya menghapus koding selain menu database, widget, dan logo di

[Link]. Sebagai acuan, berikut dilampirkan koding yang tersisa;

116 | H a l a m a n Roni Haryadi Saputra.,

[Link].
117

Hapus koding mulai dari

<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-chart-pie"></i>
<p>
Charts
<i class="right fas fa-angle-left"></i>
</p>
</a>
Sampai dengan
</li> (sebelum </ul>)

117 | H a l a m a n Roni Haryadi Saputra.,

[Link].
118

Hapus koding mulai dari

Mulai dari
<section class="content-header">
Sampai dengan
</section>
Sehingga koding yang tersisa sebagai berikut;

<!-- Right navbar links -->

<ul class="navbar-nav ml-auto">

</ul>
</nav>
<!-- /.navbar -->

<!-- Main Sidebar Container -->

<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="../../[Link]" class="brand-link elevation-4">
<img src="<?=base_url()?>assets/template/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>

<!-- Sidebar -->

<div class="sidebar">

<!-- Sidebar Menu -->

<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-
widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class with font-
awesome or any other icon font library -->

<li class="nav-item">
<a href="" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Widgets
<span class="right badge badge-danger"></span>
</p>
</a>
</li>
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-database"></i>
<p>
Database
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">3</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="<?=base_url('sumur')?>" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Sumur</p>
</a>
</li>
<li class="nav-item">
<a href="<?=base_url('evakuasi')?>" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Jalur Evakuasi</p>
</a>
</li>
<li class="nav-item">
<a href="<?=base_url('kebakaran')?>" class="nav-link">

118 | H a l a m a n Roni Haryadi Saputra.,

[Link].
119

<i class="far fa-circle nav-icon"></i>

<p>Area Kebakaran</p>
</a>
</li>

</ul>
</li>

</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>

<!-- Content Wrapper. Contains page content -->

<div class="content-wrapper">
<!-- Content Header (Page header) -->

<!-- Main content -->

<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!-- Default box -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Title</h3>

<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-
widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-card-
widget="remove" data-toggle="tooltip" title="Remove">
<i class="fas fa-times"></i></button>
</div>
</div>

119 | H a l a m a n Roni Haryadi Saputra.,

[Link].
120

B. Memperbaiki Tampilan
a. Logo
Logo yang digunakan dengan sama dengan logo plugin activefire
1. Dowload logo activefire di link
[Link]
2. Simpan didalam folder assets dengan nama [Link]
3. Modifikasi koding berikut
<a href="../../[Link]" class="brand-link elevation-4">
<img src="<?=base_url()?>assets/template/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>
Menjadi
<a href="<?=base_url()?>" class="brand-link elevation-4">
<img src="<?=base_url()?>assets/[Link]" alt="AdminLTE Logo" class="brand-image img-circle elevation-
3" style="opacity: .8">
<span class="brand-text font-weight-light">Ina Active Fire</span>
</a>

<li class="nav-item">
<a href="" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Widgets
<span class="right badge badge-danger"></span>
</p>
</a>
</li>
Menajdi
<li class="nav-item">
<a href="<?=base_url()?>" class="nav-link">
<i class="nav-icon fas fa-map"></i>
<p> Maps
<span class="right badge badge-danger"></span>
</p>
</a>
</li>

120 | H a l a m a n Roni Haryadi Saputra.,

[Link].
121

Referensi
[Link]
[Link]
[Link]

[Link]
[Link]
[Link]
[Link]
kisspng-compass-rose-cardinal-direction-wicw-compass-
[Link] (900×920) ([Link])
[Link]
[Link]

121 | H a l a m a n Roni Haryadi Saputra.,

[Link].
122

122 | H a l a m a n Roni Haryadi Saputra.,

[Link].