Tutorial GIS Laravel 9 dan leaflet Js
Part #1 Instalasi dan Konfigurasi Laravel Serta Leaflet Js
Pada tutorial kali ini kita akan membuat Geographical Information Sytem (GIS) Sistem informasi Geografis menggunakan laravel dan leaflet Js sebagai media untuk menampilkan mapnya.
Sebelumnya saya sudah pernah membuat tutorial serupa tapi menggunakan laravel versi 7 Untuk kali ini kita akan membuatnya menggunakan laravel versi 9 dan versi terbaru dari leaflet js.
Kali ini pembuatannya akan lebih mudah daripada tutorial sebelumnya. Untuk hasilnya bisa kunjungi link berikut DEMO.
Selain itu saya juga membuat web gis dengan fungsi membuat route atau rute dari lokasi user ke spot atau tempat tujuan dan juga leaflet geojson dengan laravel silahkan kunjungi link berikut untuk melihat demonya Video demo leaflet routing atau Video demo leaflet geojson
Web demo leaflet routing
Web demo leaflet geojson
Dan Jika teman-teman atau pembaca berminat silahkan support saya via trakteer yang akan kalian dapatkan disini source code aplikasi gis dengan routing (Versi Laravel Terbaru) serta langkah pembuatan aplikasi gis tersebut atau langkah clone dari repo github project tersebut.
Sekarang langsung saja lakukan instalasi laravel serta package yang akan digunakan seperti laravel ui untuk auth scaffoldingnya laravel helpers dan laravel datatable :
- composer require laravel/ui
- composer require laravel/helpers (optional)
- composer require yajra/laravel-datatables-oracle “~9.0”
Selanjutnya coba jalankan project tersebut dengan perintah php artisan serve maka kita akan mendapatkan tampilan seperti berikut
Yang terakhir buat file blade dengan nama map.blade.php dan tambahkan kode berikut untuk menampilkan peta dari leaflet js
Untuk part selanjutnya kita akan membuat file model dan migration serta konfigurasi lainnya..
Tutorial GIS Laravel 9 dan leaflet Js (Part #2)
Part #2 Buat model, migration, controller dan view
Untuk kali ini kita akan melakukan konfigurasi pada file model dan migration yang diperlukan. Disini kita akan membuat file model dan migration, yaitu space dan centerpoint.
Pertama silahkan jalankan command berikut pada terminal untuk membuat file model beserta file migrationnnya.
- php artisan make:model Space -m
- php artisan make:model CentrePoint -m
tambahkan field berikut pada file migration space
Selanjutnya kita akan membuat file controller yaitu SpaceController, CentrePointController dan DataController. Jalankan command berikut
- php artisan make:controller SpaceController -r
- php artisan make:controller CentreController -r
- php artisan make:controller DataController
keterangan flag r ( -r ) pada file controller space artinya kita akan menggunakan resource controller dimana kita tidak perlu membuat method seperti index, create dan yang lainnya karena method tersebut sudah dibuat secara otomatis oleh laravel.
Terakhir buka file DataController kemudian tambahkan method centrepoint dan spaces berikut pada DataController.
Setelah itu buat 2 folder centrepoint dan space pada folder resources/views tambahkan beberapa file view berikut pada masing-masing folder yang kita buat tadi yaitu centrepoint dan space :
- index.blade.php
- create.blade.php
- edit.blade.php
- action.blade.php
Sekian tutorial kali ini. Untuk tutorial selanjutnya kita akan membuat fungsi c.r.u.d centrepoint.
Tutorial GIS Laravel 9 dan leaflet Js (Part #3)
Part #3 Membuat C.R.U.D centre point
Pada part ini kita akan membuat crud category. Buat sebuah folder pada folder view dan beri nama centrepoint lalu tambahkan beberapa file blade berikut
- index.blade.php
- create.blade.php
- edit.blade.php
- action.blade.php
Buka file model dan migration lalu tambahkan kode seperti gambar berikut pada file model
Buat Route baru pada file web.php yaitu route resource centrepoint dan route DataController seperti di bawah ini :
Sekarang tambahkan kode-kode berikut pada file blade di folder centrepoint
index.blade.php (centrepoint)
create.blade.php (centrepoint)
edit.blade.php (centrepoint)
action.blade.php (centrepoint)
Yang terakhir buka file CentrePointController dan tambahkan kode seperti berikut pada setiap methodnya :
Jika semua langkah sudah dilakukan dengan benar maka sekarang kita bisa menambahkan titik koordinatnya yaitu latitude dan longitudenya. Pada tutorial selanjutnya kita akan C.R.U.D space.
Tutorial GIS Laravel 9 dan leaflet Js (Part #4)
Part #4 Membuat C.R.U.D Space
Pada bagian ini kita kan membuat fungsi crud space dimana kita akan menyimpan titik koordinat space, menambahkan keterangan pada space dan menambahkan gambar pada space tersebut.
Langkah pertama tambahkan 2 route baru yaitu route resource untuk Space dan route untuk datatable dari tabel space. Seperti di bawah :
Kemudian tambahkan kode berikut pada file view space yang telah kita buat sebelumnya :
index.blade.php
create.blade.php
edit.blade.php
action.blade.php
Selanjutnya buka file SpaceController lalu tambahkan setiap kode berikut pada method yang ada :
Sekarang coba jalankan project tersebut, jika tidak ada masalah maka kita akan mendapatkan tampilan seperti pada contoh demo.
Jika terdapat error pada saat mengikuti tutorial ini silahkan berkomentar di bawah atau hubungi saya via Telegram https://t.me/eripratama
Untuk tutorial selanjutnya kita akan menampilkan semua data space pada file view map.blade.php
Tutorial GIS Laravel 9 dan leaflet Js (Part #5)
Part #5 Menampilkan data space pada view Map.blade.php
Setelah di dua part sebelumnya kita membuat fungsi c.r.u.d pada backend untuk centrepoint dan space, pada part ini kita akan menampilkan hasil inputan space tersebut di halaman frontendnya dan menambahkan plugin pencarian pada map seperti di demo.
Langkah pertama buat controller baru dengan nama mapController. Dengan menjalankan command berikut :
php artisan make:controller MapController.
Setelahnya buat route baru seperti di bawah ini :
Buka file MapController.php lalu tambahkan kode berikut :
Ubah source code pada file map.blade.php seperti berikut :
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
Jika semua langkah di ikuti dengan baik maka sekarang kita sudah bisa menampilkan semua marker / space yang kita buat dan juga menampilkan tombol pencarian data space.
Tutorial selanjutnya kita akan membuat view detail dari halaman space yang kita pilih.
Tutorial GIS Laravel 9 dan leaflet Js (Part #6)
Part #6 Menampilkan detail data space
Part terakhir kita akan membuat view detail space untuk menampilkan detail informasi dari space yag kita pilih pada saat marker di klik.
Buat file baru dan beri nama detail.blade.php. Setelah itu tambahkan kode berikut pada file tersebut.
Terakhir buka file MapController dan tambahkan pada method show untuk menampikan single data dari tabel space.
Jika semua langkah diikuti dengan baik maka kita akan mendapatkan hasil yang sama dengan yang ada pada demo.
Sekian untuk Tutorial ini jika ada yang ingin di tanyakan dari tutorial ini silahkan tulis komentar di bawah atau hubungi saya via telegram…
Tutorial Lainnya : https://samplekoding.vercel.app/
link repository github : https://github.com/eripratama1/gis-laravel-leaflet.git
Demo GeoJson : https://youtu.be/Cs4Qq6E8YTE
Demo leaflet routing : https://youtu.be/B3jwZbYe0Jo
Untuk yang ingin menggunakan laravel 10 cek youtube channel ini