Cara Membuat Aplikasi Input Data dan Menampilkan Lokasi pada Peta Leaflet Js dengan Php

Share:

Halo semuanya, kembali lagi di sahretech. Kali ini kita akan membas tutorial yang tidak kalah seru, yaitu cara membuat peta, input data lokasi, dan menampilkan lokasi dengan menggunakan library leaflet js. Tutorial kali ini merupakan lanjutan dari tutorial penggunaan library leaflet js dasar yang telah saya buat sebelumnya, bagi kalian yang baru tahu dan ingin tahu cara menggunakan library ini silahkan menuju link berikut ini https://www.sahretech.com/2020/09/cara-membuat-peta-digital-dengan.html


Apa yang Akan Kita Buat?

Pada tutorial kali ini kita akan membuat sebuah aplikasi sederhana menggunakan bahasa pemrograman php, database mysql dan library leaflet js. Nantinya akan ada 2 kolom di dalam halaman web yang kita buat. Kolom sebelah kiri akan memuat form input data dan kolom sebelah kanan akan memuat petanya. Di dalam peta tersebut akan ada marker(penanda) yang jika diklik akan memunculkan pop-up data yang kita inputkan sebelumnya.


Cara Membuat Aplikasi Input Data dan Menampilkan Data Lokasi 

Siapkan terlebih dahulu  php dan mysql kalian, gunakan pakat web service seperti xampp untuk memulai mengerjakan tutorial ini.

1. Buat File index.php

Buatlah sebuah folder baru dengan nama latihan_input_lokasi di dalam folder htdocs. lalu buat sebuah file dengan nama index.php di dalamnya. Copy script di bawah ini dan pastekan di dalam file index.php. Untuk penjelasannya saya cantumkan di script di bawah ini.



<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Latihan Membuat Peta</title> <style> /* ukuran peta */ #mapid { height: 100%; } .jumbotron{ height: 100%; border-radius: 0; } body{ background-color: #ebe7e1; } </style> </head> <body> <div class="row"> <!-- class row digunakan sebelum membuat column --> <div class="col-4"> <!-- ukuruan layar dengan bootstrap adalah 12 kolom, bagian kiri dibuat sebesar 4 kolom--> <div class="jumbotron"> <!-- untuk membuat semacam container berwarna abu --> <h1>Add Location</h1> <hr> <form action="proses.php" method="post"> <div class="form-group"> <label for="exampleFormControlInput1">Latitude, Longitude</label> <input type="text" class="form-control" id="latlong" name="latlong"> </div> <div class="form-group"> <label for="exampleFormControlInput1">Nama Tempat</label> <input type="text" class="form-control" name="nama_tempat"> </div> <div class="form-group"> <label for="exampleFormControlInput1">Kategori Tempat</label> <select class="form-control" name="kategori" id=""> <option value="">--Kategori Tempat--</option> <option value="rumah makan">Rumah Makan</option> <option value="pom bensin">Pom Bensin</option> <option value="Fasilitas Umum">Fasilitas Umum</option> <option value="Pasar/Mall">Pasar/Mall</option> <option value="rumah sakit">Rumah Sakit</option> <option value="Sekolah">Sekolah</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput1">Keterangan</label> <textarea class="form-control" name="keterangan" cols="30" rows="5"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-info">Add</button> </div> </form> </div> </div> <div class="col-8"> <!-- ukuruan layar dengan bootstrap adalah 12 kolom, bagian kiri dibuat sebesar 4 kolom--> <!-- peta akan ditampilkan dengan id = mapid --> <div id="mapid"></div> </div> </div> </body> </html>

Jika kalian jalankan halaman index di atas, maka kalian akan melihat tampilan web yang berantakan. Kenapa berantakan?, karena bootsrap cdn nya belum kita import. Bootstrap cdn akan kita import pada tahap selanjuntya.


2. Import Library CDN

Selanjutnya kita akan import resource bootstrap dan leaflet js dengan menggunakan cdn. Untuk menggunakan cdn kalian perlu terhubung dengan internet karena library yang akan kita gunakan resourcenya tidak disimpan di local komputer.

Copy script di bawah ini dan pastekan sebelum tag </head>. Script di bawah ini berisi style css bootstrap dan leaflet js untuk mempercantik tampilan web yang akan kita but.



<!-- leaflet css --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <!-- bootstrap cdn --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

Copy script di bawah ini dan pastekan sebelum tag </body> pada file index.php. Script di bawah ini berisi fungsi-fungsi javascript leaflet js.



<!-- leaflet js --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


3. Buat Database dan Tabel

Selanjuntnya buatlah sebuah database dengan nama latihan dan buat tabel di dalamnya dengan nama lokasi. Untuk struktur tabelnya bisa kalian lihat pada gambar di bawah ini.

tabel lokasi -sahretech
Tabel lokasi




4. Buat Fungsi Untuk Menampilkan Peta

Selanjutnya, untuk bisa menampilkan peta kita perlu menambahkan beberapa script di bawah ini pada file index.php. Copy script di bawah ini dan pastekan di bawah library cdn sebelumnya. Untuk penjelasannya saya sertakan di bagian atas dan samping kanan script



<script> // set lokasi latitude dan longitude, lokasinya kota palembang var mymap = L.map('mapid').setView([-2.9547949, 104.6929233], 13); //setting maps menggunakan api mapbox bukan google maps, daftar dan dapatkan token L.tileLayer( 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 20, id: 'mapbox/streets-v11', //menggunakan peta model streets-v11 kalian bisa melihat jenis-jenis peta lainnnya di web resmi mapbox tileSize: 512, zoomOffset: -1, accessToken: 'your.mapbox.access.token' }).addTo(mymap); </script>

Lalu save project dan coba jalankan di browser, maka hasilnya akan tampak seperti gambar di bawah ini. Selanjutna kita akan membuat fungsi popup saat peta diklik dan untuk form input yang ada di sebelah kiri halaman belum dapat berfungsi karena file prosesnya belum kita buat.

tampilan peta -sahretech
Tampilan peta




5. Buat Fungsi Untuk Memunculkan Popup Latitude dan Longitude

Copy script di bawah ini dan pastkan tepat sebelum tag </script> paling terakhir pada file index.php.

        


// buat variabel berisi fugnsi L.popup var popup = L.popup(); // buat fungsi popup saat map diklik function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("koordinatnya adalah " + e.latlng .toString() ) //set isi konten yang ingin ditampilkan, kali ini kita akan menampilkan latitude dan longitude .openOn(mymap); document.getElementById('latlong').value = e.latlng //value pada form latitde, longitude akan berganti secara otomatis } mymap.on('click', onMapClick); //jalankan fungsi

Lalu save project kalian dan coba jalankan di browser, maka hasilnya akan tampak seperti gambar di bawah ini. Coba kalian klik di sembarang tempat pada bagian peta maka sebuah popup dengan info latitude dan longitude akan muncul. 

Kalian juga coba perhatikan form input yang ada di samping halaman, form tersebut akan berganti secara dinamis ketika kita mengklik suatu tempat di dalam peta. data tersebut akan kita gunakan nantinya untuk memberikan marker pada sebuah peta.

sahretech
Tes popup tampil latitude, longitude



Dan untuk form input yang berada di sebelah kiri halaman belum dapat berfungsi karena file prosesnya belum kita buat.File proses akan kita buat pada tahap ke-7


6. Buat Fungsi Untuk Memunculkan Data Lokasi dari Database

Selanjutnya, untuk dapat menampilkan data lokasi seperti nama tempat, kategori tempat, dan keterangan tempat maka kita perlu menambahkan script berikut ini tepat sebelum tag </script> paling akhir pada file index.php.



<?php $mysqli = mysqli_connect('localhost', 'root', '', 'latihan'); //koneksi ke database $tampil = mysqli_query($mysqli, "select * from lokasi"); //ambil data dari tabel lokasi while($hasil = mysqli_fetch_array($tampil)){ ?> //melooping data menggunakan while //menggunakan fungsi L.marker(lat, long) untuk menampilkan latitude dan longitude //menggunakan fungsi str_replace() untuk menghilankan karakter yang tidak dibutuhkan L.marker([<?php echo str_replace(['[', ']', 'LatLng', '(', ')'], '', $hasil['lat_long']); ?>]).addTo(mymap) //data ditampilkan di dalam bindPopup( data ) dan dapat dikustomisasi dengan html .bindPopup(`<?php echo 'nama tempat:'.$hasil['nama_tempat'].'|kategori:'.$hasil['kategori'].'|keteragan:'.$hasil['keterangan']; ?>`) <?php } ?>


Jika dijalankan, maka hasilnya akan sama seperti proses sebelumnya. Penambahan fungsi pada step kali ini akan menampilkan data yang didapatkan dari database, tapi karena datanya belum ada maka peta tidak menampilkan tanda(marker) apapun.



7. Terakhir!, Buat File proses.php

Tahap terakhir dari tutorial ini adalah membuat file proses dan isinya. File proses ini berfungsi untuk menyimpan data yang kita kirimkan dari form. Buatlah sebuah file baru dengan nama proses.php lalu isi file tersebut dengan script di bawah ini.



<?php //koneksi $connect = mysqli_connect('localhost', 'root', '', 'latihan'); //set variabel $lat_long = $_POST['latlong']; $nama_tempat = $_POST['nama_tempat']; $kategori = $_POST['kategori']; $keterangan = $_POST['keterangan']; //input data $insert = mysqli_query($connect, "insert into lokasi set lat_long='$lat_long', nama_tempat='$nama_tempat', kategori='$kategori', keterangan='$keterangan' "); //kembali header("Location: index.php"); ?>

Save project kalian dan selanjutnya coba jalankan di browser. Testing untuk mengisi data dengan menklik sembarang tempat di dalam peta, lalu isi nama tempat, kategori tempat, dan keterangan tempat lalu klik add untuk menambahkan data. Jika kalian berhasil maka demonya akan tampak seperti gambar di bawah ini.

input data lokasi sahretech
Input data lokasi




Script Lengkap

Bagi yang merasa kesulitan mengikuti tahapan penulisan script di atas saya sediakan full codingannya agar bisa kalian compare. Pada tutorial kali ini ada dua file yang saya gunakan.

index.php



<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Latihan Membuat Peta</title> <!-- leaflet css --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <!-- bootstrap cdn --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <style> /* ukuran peta */ #mapid { height: 100%; } .jumbotron{ height: 100%; border-radius: 0; } body{ background-color: #ebe7e1; } </style> </head> <body> <div class="row"> <!-- class row digunakan sebelum membuat column --> <div class="col-4"> <!-- ukuruan layar dengan bootstrap adalah 12 kolom, bagian kiri dibuat sebesar 4 kolom--> <div class="jumbotron"> <!-- untuk membuat semacam container berwarna abu --> <h1>Add Location</h1> <hr> <form action="proses.php" method="post"> <div class="form-group"> <label for="exampleFormControlInput1">Latitude, Longitude</label> <input type="text" class="form-control" id="latlong" name="latlong"> </div> <div class="form-group"> <label for="exampleFormControlInput1">Nama Tempat</label> <input type="text" class="form-control" name="nama_tempat"> </div> <div class="form-group"> <label for="exampleFormControlInput1">Kategori Tempat</label> <select class="form-control" name="kategori" id=""> <option value="">--Kategori Tempat--</option> <option value="rumah makan">Rumah Makan</option> <option value="pom bensin">Pom Bensin</option> <option value="Fasilitas Umum">Fasilitas Umum</option> <option value="Pasar/Mall">Pasar/Mall</option> <option value="rumah sakit">Rumah Sakit</option> <option value="Sekolah">Sekolah</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput1">Keterangan</label> <textarea class="form-control" name="keterangan" cols="30" rows="5"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-info">Add</button> </div> </form> </div> </div> <div class="col-8"> <!-- ukuruan layar dengan bootstrap adalah 12 kolom, bagian kiri dibuat sebesar 4 kolom--> <!-- peta akan ditampilkan dengan id = mapid --> <div id="mapid"></div> </div> </div> <!-- leaflet js --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script> // set lokasi latitude dan longitude, lokasinya kota palembang var mymap = L.map('mapid').setView([-2.9547949, 104.6929233], 13); //setting maps menggunakan api mapbox bukan google maps, daftar dan dapatkan token L.tileLayer( 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 20, id: 'mapbox/streets-v11', //menggunakan peta model streets-v11 kalian bisa melihat jenis-jenis peta lainnnya di web resmi mapbox tileSize: 512, zoomOffset: -1, accessToken: 'your.mapbox.access.token' }).addTo(mymap); // buat variabel berisi fugnsi L.popup var popup = L.popup(); // buat fungsi popup saat map diklik function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("koordinatnya adalah " + e.latlng .toString() ) //set isi konten yang ingin ditampilkan, kali ini kita akan menampilkan latitude dan longitude .openOn(mymap); document.getElementById('latlong').value = e.latlng //value pada form latitde, longitude akan berganti secara otomatis } mymap.on('click', onMapClick); //jalankan fungsi <?php $mysqli = mysqli_connect('localhost', 'root', '', 'latihan'); //koneksi ke database $tampil = mysqli_query($mysqli, "select * from lokasi"); //ambil data dari tabel lokasi while($hasil = mysqli_fetch_array($tampil)){ ?> //melooping data menggunakan while //menggunakan fungsi L.marker(lat, long) untuk menampilkan latitude dan longitude //menggunakan fungsi str_replace() untuk menghilankan karakter yang tidak dibutuhkan L.marker([<?php echo str_replace(['[', ']', 'LatLng', '(', ')'], '', $hasil['lat_long']); ?>]).addTo(mymap) //data ditampilkan di dalam bindPopup( data ) dan dapat dikustomisasi dengan html .bindPopup(`<?php echo 'nama tempat:'.$hasil['nama_tempat'].'|kategori:'.$hasil['kategori'].'|keteragan:'.$hasil['keterangan']; ?>`) <?php } ?>
</script> </body> </html>


proses.php



<?php //koneksi $connect = mysqli_connect('localhost', 'root', '', 'latihan'); //set variabel $lat_long = $_POST['latlong']; $nama_tempat = $_POST['nama_tempat']; $kategori = $_POST['kategori']; $keterangan = $_POST['keterangan']; //input data $insert = mysqli_query($connect, "insert into lokasi set lat_long='$lat_long', nama_tempat='$nama_tempat', kategori='$kategori', keterangan='$keterangan' "); //kembali header("Location: index.php"); ?>



Sekian tutorial cara membuat aplikasi input data dan menampilkan lokasi pada peta leaflet js dengan php. Semoga artikel ini bermanfaat bagi para pembaca sekalian, kurang lebihnya saya mohon maaf, dan apabila ada script yang membingunkan silahkan tanyakan di kolom komentar di bawah ini. Sampai jumpa di tutorial menarik lainnya. Happy Coding 😁


39 comments:

  1. mas kalo mau supaya data yg tampil itu bukan pop up tapi ada di sisi kiri gitu gimana ya?

    ReplyDelete
    Replies
    1. sebenarnya latitude dan longitudenya sudah tampil di bagian kiri, tapi jika mau menghapus popupnya silahkan hapus script ini popup
      .setLatLng(e.latlng)
      .setContent("koordinatnya adalah " + e.latlng
      .toString()
      ) //set isi konten yang ingin ditampilkan, kali ini kita akan menampilkan latitude dan longitude
      .openOn(mymap);

      Delete
  2. bagaimana membuat agar viewnya lansung dari db berdasarkan id

    ReplyDelete
    Replies
    1. tinggal buat tabel setview dengan kolom id, latitude dan longitude. Latitude dan longitude bisa didapatkan dari google maps. Lalu buat file untuk menampilkannya. Di dalam file tersebut buat list view, bisa menggunakan tabel atau card untuk mengurutkannya. setiap card atau setiap kolom menggunakan id unik dari database, buatlah link dimana jika diklik maka akan menampilkan peta yang lebih besar berdasarkan id

      Delete
  3. kalau error seperti ini kenapa ya kira2?

    Parse error: syntax error, unexpected '[', expecting ')' in D:\xampp\htdocs\belajar\leaflet\advance\index.php on line 121

    ReplyDelete
  4. Kalau untuk menampilkan nama lokasinya yang di klik apakah bisa kak?

    ReplyDelete
  5. kalau yang tampil loglang beserta nama lokasi nya apakah bisa kak?

    ReplyDelete
  6. ijin tanya kang. tampilan Map y gabisa Satelit yah Rumah2 y kelihatan gitu

    ReplyDelete
  7. Izin Tanya kang kira2 bisa ga yah tampilan map y mode Satelite biar rumah2 y kelihatan

    ReplyDelete
  8. banyakin lagi tutorial leafletnya mas

    ReplyDelete
    Replies
    1. ok insyaAllah dibuatin, tapi dibaca ya... hehe

      Delete
  9. kalau menampilkan nama lokasi atau alamat itu bagaimana ya?

    ReplyDelete
    Replies
    1. maksudnya gimana ya mas? soalnya contoh di atas sudah menampilkan data sesuai yang diinput

      Delete
    2. maksudnya begini. kalau contoh diatas kan kalau di klik munculnya latitude dan longitude. nah saya itu lagi cari kalau di klik muncul nama lokasi teresebut. misalnya nama jalan atau nama kota begitu. saya sudah cari-cari kemana-mana tapi tidak ketemu caranya.

      Delete
    3. seperti gambar gif paling terakhir di artikel ini bukan mas?

      Delete
    4. ya mirip seperti itu, hanya saja pada awal kita mengklik disalah satu area map tersebut, yang muncul itu seperti nama lokasinya gitu, bukan latitude dan longitude nya

      Delete
  10. oh, klo seperti itu pertama harus ada datanya dulu. bisa menggunakan api mapbox atau api google maps. baik api mapbox atau api goolge maps saya belum pernah pakai, tapi tutorialnya banyak di internet. Sedangkan artikel yang saya buat hanya menampilkan peta saja, datanya diinput dan dimasukan ke database. terima kasih atas kunjuhngan dan komentarnya :)

    ReplyDelete
  11. mas kalo lokasinya dari gps itu gimana ya mas?, jadi saat ini dibuat klik button dan aktifkan GPS saya udah coba bikin sesuai refrensi mas yang 1 lagi udah mau tampil dan ada data lokasinya tapi setelah di simpan namun datanya tidak masuk ke database.

    ReplyDelete
    Replies
    1. referensi saya yang mana ya mas?, terus errornya apa?, apakah proses simpan datanya sudah dibuat?, klo error tidak kelihatan bisa klik kanan, inspect element, klik tab console, terus kelihatan nanti errornya, copy errornya nanti komen disini lagi

      Delete
  12. Alhamdulillah sangat bermanfaat mas.
    izin bertanya mas, tujuan saya mau bikin lokal map, yang bisa di kasih penanda lalu di simpan kedalam database, nahh titik koordinatnya saya ambil dari X dan Y dalam subuah area yang dibuat . saya masiih kesulitan untuk bkin penandanya , Mohon bantuannya mas :) .

    ReplyDelete
  13. bang, jika membuat polygon gimana bang. yang datanya ambil juga dari database.

    ReplyDelete
    Replies
    1. kalo buat polygon saya belum pernah bang, hehehe

      Delete
  14. bang. kalau misalnya gini, contoh, pas dibuka maps yang kita buat, nah bisa ga bang itu otomatis langsung tuju ke lokasi kita sendiri / lokasi saat ini, kalau ada tutor codenya boleh di share bang. Trims bang

    ReplyDelete
    Replies
    1. ada dong bang, ini linknya https://www.sahretech.com/2021/10/cara-mengetahui-kordinat-saat-ini.html

      Delete
  15. bang, boleh minta bantuan gak? gmna caranya supaya "LatLng( )" bisa dihilangkan pada form add location->latitude, longtitude pas di klik mapsnya , saya pengennya cuman menampilkan "latitude, longtitude"nya aja atau " -........, ....... "

    ReplyDelete
  16. Terima kasih sangat bermanfaat.sukses selalu om

    ReplyDelete
  17. maaf om tokennya invalid. apakah ada token yang masih bisa dipakai?

    ReplyDelete
  18. kalo ga muncul muncul peta disampingnya itu kenapa ya kak soalna saya udah buak pake firefox kalii aja di chrome gabisa tapi tetep ga tampil.. tapi untuk kolom isiannya sudah tampil

    ReplyDelete
    Replies
    1. klik kanan inspect element -> di bagian console keliatan errornya

      Delete
    2. Uncaught ReferenceError: L is not defined
      at (index):32:15

      Delete
    3. ok mas, setelah saya cek bisa. Masnya tinggal copas yang bagian akhir saja full script index.php dan full script proses.php. Untuk error di atas, jika diklik akan mengarah ke line yang error. Saya mengira ada bagian yang terlaupakan. Dan terima kasih sudah berkunjung :)

      Delete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi