BAB IV IMPLEMENTASI DAN PENGUJIAN

(1)

BAB IV

IMPLEMENTASI DAN PENGUJIAN

4.1 Implementasi Sistem

Implementasi sistem merupakan prosedur lanjutan setelah melakukan perancangan sistem yang sebelumnya telah disetujui. Dalam proses penyelesaian, implementasi sistem mengikuti alur perancangan yang telah dibuat sebelumnya. Berikut dari implementasi sistem setiap halaman yang ditunjukkan dalam bentuk screenshoot:

a. Halaman Home

Pada halaman home terdapat fitur maps kita dapat mencari lokasi status lahan mana yang ingin diketahui oleh user. Selain itu terdapat juga fitur berita acara terbaru yang dapat diklik oleh user apabila ingin membaca berita acara tersebut yang dapat dilihat pada gambar 4.1 sebagai berikut:

Gambar 4. 1 Menu Home

b. Halaman Maps

Pada halaman maps merupakan halaman visualisasi peta status lahan kritis, user dapat mencari lokasi lahan manakah yang user ingin lihat. Di dalam halaman maps status lahan terdapat beberapa filtering yaitu kabupaten, kecamatan, desa, gradasi, kategori kawasan,

(2)

kawasan, fungsi, erosi, dan semua lahan. Fitur filtering user dapat memilah lahan sesuai dengan filter yang ingin digunakan dapat dilihat pada gambar 4.2 sebagai berikut:

Gambar 4. 2 Menu Maps

c. Halaman Grafik

Pada halaman grafik, user dapat melihat setiap grafik dan tabel grafik lahan dari status lahan tersebut yang dapat dilihat pada gambar 4.3 sebagai berikut:

(3)

d. Halaman Download

Pada halaman download terdapat fitur download yang memungkinkan user untuk download file yang tersedia di sistem yang dapat dilihat pada gambar 4.4 sebagai berikut:

Gambar 4. 4 Menu Download

e. Halaman Berita

Halaman berita merupakan fitur yang memungkinkan user untuk membaca beberapa berita acara terbaru sesuai dengan berita yang dipilih oleh usir yang dapat dilihat pada gambar 4.5 sebagai berikut:

(4)

f. Halaman Tentang

Halaman tentang merupakan profile dari penulis yang dapat dilihat pada gambar 4.6 sebagai berikut:

Gambar 4. 6 Halaman Tentang

g. Halaman Login Admin

Halaman login merupakan halaman pertama sebelum masuk ke dalam halaman admin. Admin diwajibkan untuk login terlebih dahulu agar dapat memasuki halaman amin yang dapat dilihat pada gambar 4.7 sebagai berikut:

(5)

h. Halaman Dashboard

Halaman Dashboard merupakan halaman pertama ketika admin masuk ke dalam halaman amin yang dapat dilihat pada gambar 4.8 sebagai berikut:

Gambar 4. 8 Halaman Dashboard

i. Halaman Olah Data Lahan

Halaman olah data lahan merupakan halaman admin untuk mengolah setiap data lahan admin dapat menambah, mengedit serta menghapus data lahan atau admin dapat langsung upload data geojson secara langsung yang dapat dilihat pada gambar 4.9 sebagai berikut:

(6)

j. Halaman Kabupaten

Halaman kabupaten merupakan halaman daftar kabupaten yang ada di DIY. Halaman admin dapat melakukan perubahan kabupaten dan menambah daftar kabupaten DIY yang dapat dilihat pada gambar 4.10 sebagai berikut:

Gambar 4. 10 Halaman Kabupaten

k. Halaman Kategori

Halaman kategori merupakan halaman daftar kategori kekritisan lahan. Pada halaman ini admin dapat melakukan perubahan kategori kekritisan lahan, mengubah nama kekritisan lahan, dan dapat menghapus nama kategori kekritisan lahan yang dapat dilihat pada gambar 4.11 sebagai berikut:

(7)

l. Halaman Jenis Penutupan Lahan

Halaman jenis penutupan lahan merupakan daftar isi jenis lahan. Pada halaman ini admin dapat melakukan perubahan data, penghapusan data, dan juga penambahan setiap daftar jenis lahan yang dapat dilihat pada gambar 4.12 sebagai berikut:

Gambar 4. 12 Halaman Jenis Penutupan Lahan

m. Halaman File Download

Halaman file download merupakan halaman daftar file yang dapat di download oleh user yang dikelola oleh admin. Pada halaman ini admin dapat melakukan penambahan daftar file yang dapat di download, mengubah file download, dan menghapus file download yang dapat dilihat pada gambar 4.13 sebagai berikut:

(8)

n. Halaman Berita (admin)

Halaman berita (admin) merupakan halaman untuk mengelola setiap data berita yang ditampilkan pada halaman berita user. Pada halaman ini admin dapat melakukan penambahan daftar berita acara, perubahan berita acara, dan penghapusan berita acara yang dapat dilihat pada gambar 4.14 sebagai berikut

Gambar 4. 14 Halaman Berita

o. Halaman Log Out

Halaman log out merupakan halaman untuk keluar dari halaman admin yang dapat dilihat pada gambar 4.15. sebagai berikut:

(9)

4.2 Implementasi Google Maps API

Google Maps API merupakan library yang berbentuk JavaScript. Untuk mendapatkan data spasial peta DIY maka dapat memanfaatkan Google Maps API. Output dari Google Maps API adalah gambaran letak persebaran wilayah DIY secara detail di dalam satu website SIG. Berikut tahapan yang dikerjakan:

a. Hal pertama kali harus dilakukan adalah menyiapkan seluruh data shapefile, setelah itu mengubah file dengan format shapefile ke geojson. Berikut tahapan pembuatan file shapefile ke geojson yang dapat dilihat pada gambar 4.16 sebagai berikut:

Gambar 4. 16 Pembuatan File .shp ke dalam format .geojson

Dalam pembuatan shapefile ke geojson dapat menggunakan software QGIS. Langkah-langkah yang harus dilakukan sebagai berikut:

1. Tambah vector layer yaitu file lakris_bpdas.shp, kemudian open attribute table dan lakukan filtering data sesuai dengan data yang diinginkan. Setelah itu jangan lupa untuk melakukan save as dan save only selected feature dengan format lakris_bpdas_edit.shp.

2. Hapus layer yang tidak digunakan selain layer lakris_bpdas_edit.shp dan tambahkan satu layer DesaIndonesia.shp

3. Lakukan intersection data lakris_bpdas_edit.shp dengan DesaIndonesia.shp. Setelah proses intersection data selesai. Jangan lupa untuk menyimpan data “Save Featured As” dengan format Desa_fix_geometry.shp.

(10)

4. Removed semua layer kecuali Desa_fix_geometry.shp.

5. Simpan layer Desa_fix_geomtry.shp dengan format yang berbeda “Save featuredAs” dengan format geojson.

Berikut hasil dari pembuatan shapefile ke geojson dapat dilihat pada gambar 4.17.

Gambar 4. 17 Hasil File dengan format .geojson

b. Menampilkan peta Provinsi DIY dengan polygon pemetaan lahan kritis pertanian yang dapat dilihat pada kode javascript digambar 4.18 sebagai berikut:

(11)

var map;

function initMap1() {

map_awal = new google.maps.Map(document.getElementById('map'), { zoom: 10,

center: {lat: -7.779543, lng: 110.370807} });

map = new google.maps.Map(document.getElementById('map'), { zoom: 10,

center: {lat: -7.779543, lng: 110.370807} });

var legend = document.getElementById('legend'); <?php

foreach ($kategori as $key => $arrKat) { ?>

var div = document.createElement('div');

div.innerHTML = '<span style="color:<?php echo $arrKat['warna'];?>"><?php echo $arrKat['nama'];?></span>'; legend.appendChild(div); <?php } ?> map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); } function initMap(link='') { $body = $("body"); $body.addClass("loading"); If (link!=''){

//UNTUK LOAD TABEL var kab = $("#id_kab").val(); var kec = $("#id_kec").val(); var desa = $("#id_desa").val();

(12)

var url = 'peta_json.php'+link;

// NOTE: This uses cross-domain XHR, and may not work on older browsers. $.getJSON(url,function(json){

//HAPUS POLYGON SEBELUMNYA map.data.forEach(function(feature) {

// If you want, check here for some constraints. map.data.remove(feature);

(13)

});

if ( json.length == 0 ) { alert("Data Not Found!!!"); }else{

//map.setMap(null); //map.setMap(map_awal); map.data.loadGeoJson(url);

map.data.setStyle(function (feature) { var color = feature.getProperty('color'); return { fillColor: color, strokeWeight: 1, fillOpacity:0.8 }; }); } $body.removeClass("loading"); }); }

// When the user clicks, set 'isColorful', changing the color of the letters. map.data.addListener('click', function(event) {

event.feature.setProperty('isColorful', true); });

// When the user hovers, tempt them to click by outlining the letters. // Call revertStyle() to remove all overrides. This will use the style rules // defined in the function passed to setStyle()

map.data.addListener('mouseover', function(event) { map.data.revertStyle();

map.data.overrideStyle(event.feature, {strokeWeight: 4}); document.getElementById('info-box').innerHTML = "Kabupaten = "+event.feature.getProperty('id_kab')

(14)

+ "<br >"

+ "Kecamatan = "+event.feature.getProperty('id_kecamatan') + "<br >"

+ "Desa = "+event.feature.getProperty('id_desa') + "<br >"

+ "Tingkat Kekritisan = "+event.feature.getProperty('id_kategori') + "<br >" + "Kawasan = "+event.feature.getProperty('ket_pl') + "<br >" + "Erosi = "+event.feature.getProperty('erosi') + "<br >" + "Gradasi = "+event.feature.getProperty('degradasi') + "<br >"

+ "kawasan kategori = "+event.feature.getProperty('kawasan_k') + "<br >" + "Fungsi = "+event.feature.getProperty('fungsi') + "<br >" + "Color = "+event.feature.getProperty('color') ; }); map.data.addListener('mouseout', function(event) { map.data.revertStyle(); document.getElementById('info-box').innerHTML = "?"; }); } </script>

Gambar 4. 18 Menampilkan Peta Lahan kritis pertanian DIY dengan javasccript

c. Melakukan autentikasi program ke dalam google maps JavaScript API dengan menggunakan API Key. Untuk mendapatkan API Key, Program terlebih dahulu mendaftarkan pada Google Maps API yang dapat kita lihat pada link berikut ini, https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding _backend,directions_backend,distance_matrix_backend,elevation_backend,places_backe

(15)

nd&reusekey=true&hl=id&pli=1 . Setelah melakukan pendaftaran dan mendapatkan API Key, API Key hanya perlu ditambahkan ke dalam script. Kode program Google Maps JavaScript API dapat dilihat pada gambar 4.17.

<script async defer

src="https://maps.googleapis.com/maps/api/js?key=<?php echo keyMAP;?>&v=3.exp&sensor=false&callback=initMap1">

</script>

Gambar 4. 19 Menambahkan API ke dalam Javascript Penjelasan:

1. Script Memuat URL dan KeyMaps yang telah ditetapkan

2. Async digunakan browser untuk melanjutkan rendering pada bagian halaman yang memuat API

3. Parameter key merupakan key API yang didapatkan.

4. Parameter callback akan mengeksekusi initMap jikalau API yang dimuat sudah lengkap

d. Menampilkan warna pada peta dapat dilihat pada gambar 4.18

map.data.loadGeoJson(url);

map.data.setStyle(function (feature) { var color = feature.getProperty('color'); return { fillColor: color, strokeWeight: 1, fillOpacity:0.8 }; });

Gambar 4. 20 Menampilkan Warna Pada Peta Penjelasan:

1. Map.data.loadGeoJson(url) berguna untuk mengambil data json yang sudah dibuat ke dalam maps

2. Map.data.setStyle berguna untuk memberikan style di setiap garis

(16)

4.3 Pengujian Sistem

Pengujian sistem adalah pengujian fungsionalitas sistem menggunakan metode kuesioner. Dalam metode ini menggunakan skala likert. Kuesioner yang dibagikan berjumlah 21 kuesioner. Terdapat 1 orang penguji yang bertindak sebagai admin di kantor DAS Opak Yogyakarta dan 20 kuesioner dibagikan kepada masyarakat umum (pengunjung website). Untuk penentuan skor itu sendiri berdasarkan interval dan hasil kuesioner adalah sebagai berikut:

a. Interpretasi Skor Berdasarkan Interval

1. Angka 0% - 20% : Sangat Tidak Setuju (STS) 2. Angka 21% - 40% 11 : Tidak Setuju (TS)

3. Angka 41% - 60% : Netral (N) 4. Angka 61% - 80% : Setuju (S) 5. Angka 81% - 100% : Sangat Setuju (SS) b. Penentuan Skor

1. Sangat Tidak Setuju (STS) memiliki skor 1 2. Tidak Setuju (ST) memiliki skor 2

3. Netral (N) memiliki skor 3 4. Setuju (S memiliki skor 4

5. Sangat Setuju (SS) memiliki skor 5 c. Hasil Kuesioner

1. Pada Tabel 4.1 merupakan hasil kuesioner tampilan sistem yang bertindak sebagai admin, sebagai berikut:

Tabel 4. 1 Kuesioner Admin

No Pernyataan STS TS N S SS Skor

1 Website "halaman admin" mudah

untuk dipahami 0 0 0 0 1 5

2

Website pada "halaman pengunjung" mudah dipahami dan

digunakan

0 0 0 0 1 5

3

Fitur yang tersedia di "halaman pengunjung" cukup lengkap dan

informatif jika digunakan pengunjung

(17)

No Pernyataan STS TS N S SS Skor

4

Fitur yang tersedia di "halaman admin" cukup lengkap dan

informatif

0 0 0 1 0 4

5

Upload data pada menu "olah data lahan" di "halaman admin" mudah

dipahami dan digunakan

0 0 0 0 1 5

6

Website "Pemetaan Lahan Kritis Pertanian DIY" ini dapat membantu

memudahkan kinerja BPDAS OPAK Yogyakarta dalam

melakukan survei lahan

0 0 0 0 1 5

7

Website "Pemetaan Lahan Kritis Pertanian DIY" ini sangat berguna

untuk masyarakat ataupun kantor BPDAS Opak DIY" ke depannya

0 0 0 0 1 5

8

Website ini membantu "BPDAS OPAK DIY" dalam melakukan sosialisasi lahan yang ada di DIY

0 0 0 0 1 5 Total Skor 38 𝐻𝑎𝑠𝑖𝑙 𝐴𝑘ℎ𝑖𝑟 =𝑇𝑜𝑡𝑎𝑙 𝑆𝑘𝑜𝑟. 100 𝑌 = 38 40. 100 = 95%

Hasil skor akhir kuesioner yang didapatkan untuk halaman admin yang hanya berjumlah 1 orang adalah 38 menyatakan bahwa admin sangat setuju bahwasanya tampilan dan fungsionalitas dari website ini menarik, mudah dipahami, dan mudah untuk digunakan dengan persentase 95% dari total yang didapat dari perhitungan rumus di atas dengan total skor 38 dikali 100 dibagi 40.

2. Pada Tabel 4.2 merupakan hasil kuesioner tampilan sistem yang bertindak sebagai pengunjung, sebagai berikut:

(18)

Tabel 4. 2 Kuesioner Pengunjung

No Pernyataan STS TS N S SS SKOR

1

Website "Pemetaan Lahan Kritis DIY" ini memiliki tampilan yang

menarik

0 2 0 13 5 81

2

Website " Pemetaan Lahan Kritis DIY" mudah untuk dipahami dan

digunakan

0 0 0 8 12 92

3 Fitur tersedia pada menu "Maps"

cukup lengkap dan informatif 0 0 1 12 7 86

4 Informasi pada menu "grafik"

mudah dipahami dan dimengerti 0 1 0 8 11 89

5 Menu "download" mudah dipahami

dan dapat digunakan 0 0 0 5 15 95

6

Seluruh fitur "pencarian" yang tersedia sudah cukup memenuhi

kebutuhan pengguna 0 0 3 11 6 83 Total Skor 526 𝐻𝑎𝑠𝑖𝑙 𝐴𝑘ℎ𝑖𝑟 =𝑇𝑜𝑡𝑎𝑙 𝑆𝑘𝑜𝑟. 100 𝑌 = 526 600. 100 = 87.6%

Dari hasil akhir 20 kuesioner total skor yang didapatkan adalah 526. dapat dinyatakan bahwasanya halaman pengunjung mudah untuk dipahami dan digunakan, serta fitur yang tersedia cukup informatif dengan persentase 87% yang didapat dari perhitungan rumus di atas dengan total skor 526 dikali 100 dibagi 600.

4.4 Hasil Implementasi Sistem

Dari Hasil implementasi sistem dan pengujian yang dilakukan melalui kuesioner dapat disimpulkan bahwasanya Sistem Informasi Geografis untuk Pemetaan Lahan Kritis Pertanian di DIY dinyatakan sebagai berikut:

Informasi yang terkandung dalam sistem disajikan dalam bentuk peta dengan output berupa geometry yang membentuk polygon. Setiap geometry tersebut menandakan letak lahan sesuai dengan warna dan status lahan itu sendiri. Selain itu, fitur yang tersedia cukup mudah

(19)

digunakan. Di setiap fitur pencarian pengguna tinggal memilih lokasi mana saja yang ingin disajikan dan mengklik tombol loads maps atau cari di menu grafik. Dengan adanya fitur filter tersebut, pengguna dapat melakukan pencarian data dengan tujuan yang mereka inginkan secara lebih cepat dibandingkan harus melakukan pencarian data secara manual. Selain itu, sistem juga menyediakan penjelasan data maps dan grafik melalui tabel yang tersedia di bawah maps dan grafik. Selanjutnya fitur berita, fitur berita dapat digunakan pengguna untuk membaca setiap berita acara terbaru yang tersedia di dalam maps. Selanjutnya fitur Download yang sangat membantu apabila pengunjung ingin download setiap data yang tersedia di dalam sistem.

Pihak BPDAS Yogyakarta menyatakan bahwasanya sistem ini sangat berguna untuk ke depannya dan mereka sangat setuju apabila sistem ini lebih dikembangkan lagi untuk ke depannya supaya dapat dipergunakan lebih mudah dengan dibuat sesimpel mungkin. Fitur yang tersedia dalam sistem dapat dikatakan cukup informatif dan semua fitur dapat dipergunakan dengan mudah. Pastinya sistem ini mempunyai beberapa kekurangan yang mungkin dapat dikembangkan lagi untuk ke depannya. Berikut kekurangan dari sistem ini:

a. Belum ada notifikasi berita terbaru untuk pengunjung b. Belum terdapat kolom komentar untuk masukkan admin

c. Belum terdapat fitur atau menu yang menampilkan laporan perubahan data setiap tahunnya

d. Menambah data luas keliling obyek geometry lahan .