Tutorial GIS (crud) Laravel dan leaflet js
Part 1 (Instalasi laravel dan package lainnya)
Halo salam kenal ini adalah tulisan pertama saya tentang laravel yang membahas tutorial pembuatan sistem informasi geografis atau gis. Apa itu sistem informasi geografis ?
Menurut wikipedia Sistem Informasi Geografis adalah suatu sistem informasi yang mengelola seluruh data dengan referensi geografi. Nama lain dari sistem informasi geografis yaitu sistem informasi keruangan, sistem analisa data keruangan, dan sistem informasi sumber daya alam. Selain itu, sistem informasi geografis juga diartikan sebagai suatu sistem yang mengelola data geografis dengan mengandalkan komputer.
Jadi berdasarkan penjelasan di atas,pada tutorial ini kita akan membuat sistem informasi geografis dan mengelola data apa saja yang akan di olah pada sistem tersebut dan menampilkan hasil dari pengolahan data sesuai dengan kebutuhan user.
Ada beberapa hal yang harus di siapkan di antaranya :
Install laravel silahkan kunjungi laravel.com untuk petunjuk instalasi disini saya menggunakan laravel versi 7.Untuk nama projectnya saya menggunakan nama laravel-gis silahkan di sesuaikan dengan nama yang kalian inginkan.
Install scaffolding auth laravel ketikkan perintah berikut composer require laravel/ui setelah itu jalankan perintah ini di terminal php artisan ui bootstrap -–auth setelah menjalankan perintah tersebut jalankan perintah berikut untuk mengambil dependancy yang dibutuhkan dan mengcompilenya npm install && npm run dev dan tunggu hingga proses compilenya selesai.
Selanjutnya kita akan melakukan instalasi package Laravel Notify ketikkan perintah berikut composer require mckenziearts/laravel-notify setelah proses instalasi selesai jalankan perintah berikut untuk publish konfigurasi file dan assetnya php artisan vendor:publish -–provider=”Mckenziearts\Notify\LaravelNotifyServiceProvider”.
Yang terakhir kita akan melakukan instalasi DataTable pada project kita dan package yang digunakan adalah package dari Laravel DataTabel dari yajra silahkan ketikkan perintah berikut composer require yajra/laravel-datatables-oracle:”~9.0” setelah proses instalasi selesai jalankan kembali perintah untuk mempublish file konfigurasi dan assetsnya php artisan vendor:publish –tag=datatables.
Tahap persiapan dan konfigurasi serta instalasi package untuk project gis ini sudah selesai pada part tutorial selanjutnya kita akan melakukan konfigurasi pada database, membuat model dan controller dan juga membuat komponen view yang di butuhkan.
Untuk yang ingin menggunakan laravel 9 kunjungi link berikut Gis Laravel 9
Part 2 (Konfigurasi database dan komponen yang dibutuhkan)
Pada tutorial kali ini kita melakukan konfigurasi pada database project kita serta membuat komponen seperti model, view dan controller yang dibutuhkan.
Baik langsung saja yang pertama silahkan buka file .env teman-teman dan atur untuk nama,user dan password databasenya seperti di bawah ini.
Silahkan sesuaikan dengan konfigurasi database kalian masing-masing untuk nama database username dan passwordnya.
Selanjutnya jalankan perintah artisan di terminal seperti gambar di bawah ini untuk men-generate file model dan migrationnya jangan lupa untuk menambahkan flag -m untuk langsung men-generate file migrationnya.
setelah itu buka file migration yang baru saja dibuat lalu tambahkan beberapa field yang diperlukan
Sebelum menjalankan php artisan migrate buka file model Place.php dan tambahkan method mass assignment berikut, setelah itu jalankan perintah php artisan migrate.
Setelah melakukan konfigurasi pada database selanjutnya kita akan membuat file controller yang dibutuhkan yaitu
DataController : controller untuk datatable serverside jalankan perintah berikut php artisan make:controller DataController
PlaceController : controller untuk melakukan fungsi c.r.u.d data.Untuk controller ini kita akan menggunakan resource controller perintahnya php artisan make:controller PlaceController -r
PlaceMapController : controller unttuk menampilkan map beserta keterangan lainnya php artisan make:controller PlaceMapController.
Yang terakhir kita akan membuat beberapa view tambahkan folder places pada direktori resources/views/ kemudian di dalam folder places tambahkan 6 blade view berikut
Sekian untuk part ini pada part selanjutnya kita akan memulai coding untuk aplikasi gis kita…
Untuk yang ingin menggunakan laravel 9 kunjungi link berikut Gis Laravel 9
Part 3 (Membuat komponen Create dan Read)
Pada part ini kita akan membuat komponen create dan read untuk web gis kita untuk part ini cukup panjang prosesnya jadi harap dibaca dengan seksama tapi sebelum itu pada folder config tambahkan file leafletsetup.php dan tambahkan baris kode berikut.
Dan tambahkan lagi satu controller PlaceController dan tempatkan pada folder Controller/Api caranya dengan menjalankan perintah artisan seperti ini php artisan make:controller Api\\PlaceController.
Jalankan kembali perintah artisan untuk membuat API resource dan resource collection yang pertama php artisan make:resource Place yang kedua php artisan make:resource PlaceCollection.
Place dan PlaceCollection digunakan untuk pengelolaan API yang dimana datanya akan dibuat dalam bentuk JSON (JavaScript Object Notation) disini kita akan menggunakan GeoJSON yang merupakan format standar terbuka yang dirancang untuk mewakili sebuah fitur geografis sederhana bersama dengan atribut lainnya seperti LINE dan Point bahkan Navigasi.
Sekarang buka file PlaceController pada folder controllers/Api dan tambahkan kode berikut
penjelasan : pada kode di atas kita akan mengambil semua data dari tabel place kemudian membuat GeoJson dari data tabel tersebut
buka controller PlaceController dan tambahkan view pada method index dan create berikut ini
lalu buka folder routes kemudian buka file api terlebih dahulu kemudian sesuaikan seperti di bawah ini
setelah itu buka file routes web dan sesuaikan seperti dibawah ini
Buka file bootstrap.js pada folder resources/js
kemudian sesuaikan seperti gambar di bawah ini
jika axios belum diinstall silahkan install terlebih dahulu jalankan perintah npm install axios pastikan node dan npm sudah terpasang di PC/Laptop untuk menjalankan perintah tersebut.Buka file app.blade pada folder layouts dan tambahkan @yield(‘styles’) dan @notifyCss dan juga @notifyJs
masih pada file app tambahkan route berikut di bagian dropdown menu
buka file PlaceMapController dan tambahkan kode berikut
kemudian pada file map.blade tambahkan kode seperti berikut
penjelasan : pada file map.blade kita membuat tag <div> dengan id-nya mapid untuk menampilkan leaflet map yang dimana kita melakukan load file css di bagian section (‘styles’) dan js di bagian push (‘scripts’) dan pada card body kita menambahkan tag <x:notify-messages/> untuk me load tampilan laravel notify yang akan di jalankan dari controller jika berhasil tampilan halaman depan akan seperti gambar berikut
selanjutnya buka file index dan tambahkan style layout dan kode berikut
penjelasan : pada bagian card kita melakukan load komponen laravel notify <x:notify:messages/> untuk menampilkan notifikasi.
Pada card-body terdapat sebuah tag <a> dengan class button dimana tag tersebut mengarah ke route create untuk membuat inputan data places.Terdapat tag </form> di bagian akhir tag </div> dimana form ini akan kita trigger dari buttons.blade untuk melakukan delete data untuk sekarang abaikan saja dulu bagian itu.
Yang terakhir pada bagian @push DataTables dan scripts meload komponen css dan js untuk datatables dan juga menjalankan function serverSide-nya
Buka file DataController lalu tambahkan method places untuk melakukan load data ke datatable pada halaman index.blade
penjelasan : pada method ini kita melakukan eager loading untuk meload data yang ada pada tabel places.Di bagian addColumn kita menambahkan name action dan terdapat blade view places buttons di dalamnya dan mengubahnya menjadi bentuk HTML dengan perintah →rawColumns
tampilan index akan tampak seperti ini
kemudian tambahkan kode berikut pada view blade create
penjelasan : pada bagian @push(‘scripts) kita kembali meload css dan js leaflet disini terdapat variable marker yang mana variabel tersebut akan membuat marker sesuai koordinat yang di telah ditentukan pada file leafletsetup.php di dalam folder config.Fungsi updateMarker ketika terjadi event klik akan mendapatkan nilai latitude dan longitude kemudian nilai tersebut akan di tampung pada variabel updateMarkerByInputs kemudian di inputkan pada properti latitude dan longitude yang sudah di definisikan view blade create
buka kembali PlaceController lalu tambahkan beberapa baris kode berikut
sebelum menjalankan fungsi storenya buka lagi file buttons.blade dan map.blade pada blade buttons sesuaikan seperti di bawah ini
penjelasan : pada buttons blade ini kita menambahkan 3 buttons yaitu edit,detail, dan delete dan meload dependencies sweet alert2 beserta javascriptnya untuk method edit,detail dan delete akan di bahas pada part selanjutnya
kemudian pada file blade map tambahkan baris kode berikut
penjelasan : pada kode tersebut kita menampilkan data marker dari data yang kita input pada form create dan juga menambahkan tampilan popup ketika marker di klik dengan geoJson.
untuk dependencies datatable dan sweet alert2 saya letakkan di folder public dan untuk filenya silahkan download dari link berikut https://drive.google.com/file/d/1QqHQD07G5a9u_vUN2eDbuK9x2yu1uFc3/view?usp=sharing
Untuk pembuatan create dan read data sudah selesai semoga bisa di ikuti dengan baik.Jika terjadi error silahkan berkomentar di bawah atau bisa hubungi saya via email eripratama1@gmail.com via telegram https://t.me/eripratama dan pada part selanjuntya kita akan membuat fungsi detail untuk menampilkan detail data dari lokasi yang di input pada halaman admin
Untuk yang ingin menggunakan laravel 9 kunjungi link berikut Gis Laravel 9
Part 4 (Membuat komponen Detail)
Pada part ini kita hanya akan membuat tampilan detail dari data lokasi yang kita inputkan hasil akhirnya akan terlihat seperti ini
buka kembali PlaceController kemudian tambahkan script berikut pada method show.
penjelasan : pada method tersebut kita melakukan binding ke model place hal yang sama akan kita lakukan juga pada method edit dan delete yang akan dibahas pada part selanjutnya.
selanjutnya buka file detail.blade dan tambahkan script berikut
penjelasan : disini kita masih melakukan hal yang sama seperti pada file map.blade. Yaitu mengakses geojson beserta propertinya dari PlaceController pada folder API
Jika benar maka tampilannya akan seperti gambar diatas.jika terjadi error silahkan berkomentar atau kontak saya.
Sekian untuk part ini…
Untuk yang ingin menggunakan laravel 9 kunjungi link berikut Gis Laravel 9
Part 5 (Membuat komponen Edit dan delete lokasi)
Buka file PlaceController tambahkan script berikut pada method edit, update dan delete.
penjelasan : pada method tesebut kita menggunakan route model binding untuk melakukan dependency injection pada model berdasarkan parameter yang dikirim yaitu id baik pada method edit update dan juga delete.
Buka file edit.blade.php pada folder places dan tambahkan script berikut :
Sekian untuk part ini pada part selanjutnya kita akan menambahkan fungsi pencarian di halaman utama dari web gis yang kita buat…
Untuk yang ingin menggunakan laravel 9 kunjungi link berikut Gis Laravel 9
Part 6 (Membuat fungsi pencarian lokasi pada Map leaflet)
Untuk menambahkan fungsi pencarian kita akan menggunakan kontrol pencarian dari Stefano Cudini dan kontrol pencarian yang di gunakan adalah search text by method pada file map.blade.php tambahkan satu inputan untuk melakukan metode pencarian jadi ketika user menginputkan nama tempat yang sudah ada di database, data tersebut akan muncul dan ketika data di klik akan langsung mengarahkan ke latitude dan longitude beradasarkan data yang ada pada database kurang lebih hasil akhirnya seperti ini :
silahkan copy isi file map.blade dibawah ini dan perbarui file yang sudah ada sebelumnya
Ganti cdnjs css dan js untuk leaflet search dengan kode berikut :
CSS : https://cdnjs.cloudflare.com/ajax/libs/leaflet-search/3.0.9/leaflet-search.min.css
JS : https://cdnjs.cloudflare.com/ajax/libs/leaflet-search/3.0.9/leaflet-search.src.js
Penjelasan : pada baris ke 6 kita menambahkan properti inputanuntuk melakukan pencarian data pada section styles di baris 22 kita meload css dari leaflet-search dan pada bagian push scripts di baris 35 kita meload file js dari leaflet-search tersebut. Pada baris 64 kita melakukan perulangan untuk mendapatkan data dari tabel place kemudian data tersebut kita jadikan dalam bentuk data array pada baris selanjutnya.
kita membuat layer baru nutuk menampilkan elemen pencarian kemudian menambahkannya pada map. Pada baris 85 kita kembali melakukan perulangan dari array data di baris 64 dimana pada data tersebut terdapat nilai seperti longitude, latitude dan place name kemudian di baris 93 kita membuat method keyup pada properti input textsearch dimana method tersebut akn berjalan ketika kita melakukan inputan pada properti tersebut dan kita masukkan hasilnya pada variabel controlSearch.
Jika menemui masalah pada saat pembuatan bisa kontak saya via telegram https://t.me/eripratama
Sumber referensi : https://awesomeopensource.com/project/nafiesl/laravel-leaflet-example
source code : https://github.com/eripratama1/laravel-gisLeaflet.git
search control : https://labs.easyblog.it/maps/leaflet-search/
Laravel Notify :https://github.com/mckenziearts/laravel-notify
DataTable : https://github.com/yajra/laravel-datatables
Tutorial Lainnya : https://samplekoding.com/
Demo GeoJson : https://youtu.be/Cs4Qq6E8YTE
Demo leaflet routing : https://youtu.be/B3jwZbYe0Jo
Untuk yang ingin menggunakan laravel 9 kunjungi link berikut Gis Laravel 9
Untuk yang ingin menggunakan laravel 10 cek youtube channel ini