Cara menggunakan get location php

Cara menggunakan get location php

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.

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> #mapid { height: 100%; } .jumbotron{ height: 100%; border-radius: 0; } body{ background-color: #ebe7e1; } </style> </head> <body> <div class="row"> <div class="col-4"> <div class="jumbotron"> <h2>Add Location</h2> <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"> <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.

<link rel="stylesheet" href="https://unpkg.com//dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm//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.

<script src="https://unpkg.com//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.

Cara menggunakan get location php
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> var mymap = L.map('mapid').setView([-2.9547949, 104.6929233], 13); L.tileLayer( 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmFiaWxjaGVuIiwiYSI6ImNrOWZzeXh5bzA1eTQzZGxpZTQ0cjIxZ2UifQ.1YMI-9pZhxALpQ_7x2MxHw', { attribution: 'Map data &copy; <a href="https: maxZoom: 20, id: 'mapbox/streets-v11', 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.

Cara menggunakan get location php
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.

        

var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("koordinatnya adalah " + e.latlng .toString() ) .openOn(mymap); document.getElementById('latlong').value = e.latlng } mymap.on('click', onMapClick);

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.

Cara menggunakan get location php
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'); $tampil = mysqli_query($mysqli, "select * from lokasi"); while($hasil = mysqli_fetch_array($tampil)){ ?> L.marker([<?php echo str_replace(['[', ']', 'LatLng', '(', ')'], '', $hasil['lat_long']); ?>]).addTo(mymap) .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 $connect = mysqli_connect('localhost', 'root', '', 'latihan'); $lat_long = $_POST['latlong']; $nama_tempat = $_POST['nama_tempat']; $kategori = $_POST['kategori']; $keterangan = $_POST['keterangan']; $insert = mysqli_query($connect, "insert into lokasi set lat_long='$lat_long', nama_tempat='$nama_tempat', kategori='$kategori', keterangan='$keterangan' "); 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.

Cara menggunakan get location php
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>

    
    <link rel="stylesheet" href="https://unpkg.com//dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />

    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <style>
        
        #mapid {
            height: 100%;
        }
        .jumbotron{
            height: 100%;
            border-radius: 0;
        }
        body{
            background-color: #ebe7e1;
        }
    </style>
</head>

<body>
     <div class="row"> 
        <div class="col-4"> 
            <div class="jumbotron"> 
            <h2>Add Location</h2>
            <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"> 
            
            <div id="mapid"></div>
        </div>
    </div>



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

    <script>
        
        var mymap = L.map('mapid').setView([-2.9547949, 104.6929233], 13);   
        
        L.tileLayer(
            'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmFiaWxjaGVuIiwiYSI6ImNrOWZzeXh5bzA1eTQzZGxpZTQ0cjIxZ2UifQ.1YMI-9pZhxALpQ_7x2MxHw', {
                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', 
                tileSize: 512,
                zoomOffset: -1,
                accessToken: 'your.mapbox.access.token'
            }).addTo(mymap);


        
        var popup = L.popup();

        
        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("koordinatnya adalah " + e.latlng
                    .toString()
                    ) 
                .openOn(mymap);

            document.getElementById('latlong').value = e.latlng 
        }
        mymap.on('click', onMapClick); 

        

        <?php
        
        $mysqli = mysqli_connect('localhost', 'root', '', 'latihan');   
        $tampil = mysqli_query($mysqli, "select * from lokasi"); 
        while($hasil = mysqli_fetch_array($tampil)){ ?> 

        
        
        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 $connect = mysqli_connect('localhost', 'root', '', 'latihan'); $lat_long = $_POST['latlong']; $nama_tempat = $_POST['nama_tempat']; $kategori = $_POST['kategori']; $keterangan = $_POST['keterangan']; $insert = mysqli_query($connect, "insert into lokasi set lat_long='$lat_long', nama_tempat='$nama_tempat', kategori='$kategori', keterangan='$keterangan' "); 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 😁