Salah satu kelompok software web server yang umum digunakan adalah jenis LAMP (Linux, Apache, MySQL, dan PHP) karena memang sudah sangat populer di dunia hosting. Untuk mengatur pengaturan mesin dari PHP, kita perlu mengedit file php.ini. Soalnya letak filenya bisa beda tergantung cara kita install dan sistem operasi apa
Jadi saya akan menulis kemungkinan di mana saja di lokasi file php. Ini ada di server Anda
/etc/php.ini
/etc/php5/apache2/php.ini
/etc/php5/cli/php.ini
/usr/local/lib/php.ini
C:\xampp\php\php.ini untuk XAMPP (Windows)
C:\wamp\bin\apache\Apache2.4.4\bin\php.ini untuk WAMP (Windows) yang berada di lokasi Apache untuk website sedangkan di folder PHP untuk versi command prompt
Bagaimana jika Anda tidak dapat menemukan php. apakah ini di salah satu lokasi di atas?
Lokasi GEO. Oke, ini yang akan penulis coba jelaskan tentang geolokasi menggunakan php. Mungkin ada beberapa pertanyaan bagus tentang bagaimana situs asing seperti media sosial dapat mengubah bahasa, mata uang, atau hal lain yang berkaitan dengan lokasi. Ya. bahwa dengan memanfaatkan geolocation
Dengan menggunakan geolokasi, informasi pengakses situs dapat diketahui IP-nya, yang nantinya dapat memberikan informasi tentang pengakses situs.
Oke, tidak terlalu panjang untuk menjelaskan. Ada plugin geolokasi yang disebut geoplugin. tentunya dengan menggunakan bahasa pemrograman PHP
untuk menggunakannya Anda dapat mengunduh plugin kelas DI SINI
Setelah mengunduh kelas, salin saja ke notepad dan simpan dengan nama Anda sendiri. dalam hal ini misalnya. geoplugin. kelas. php
Kemudian buat file php lain dan salin file di bawah ini
<?php
require_once('geoplugin.class.php');
$geoplugin = new geoPlugin();
// If we wanted to change the base currency, we would uncomment the following line
// $geoplugin->currency = 'EUR';
$geoplugin->locate();
echo "Geolocation results for {$geoplugin->ip}:
\n".
"City: {$geoplugin->city}
\n".
"Region: {$geoplugin->region}
\n".
"Area Code: {$geoplugin->areaCode}
\n".
"DMA Code: {$geoplugin->dmaCode}
\n".
"Country Name: {$geoplugin->countryName}
\n".
"Country Code: {$geoplugin->countryCode}
\n".
"Longitude: {$geoplugin->longitude}
\n".
"Latitude: {$geoplugin->latitude}
\n".
"Currency Code: {$geoplugin->currencyCode}
\n".
"Currency Symbol: {$geoplugin->currencySymbol}
\n".
"Exchange Rate: {$geoplugin->currencyConverter}
\n";
if ( $geoplugin->currency != $geoplugin->currencyCode ) {
//our visitor is not using the same currency as the base currency
echo "At todays rate, US$100 will cost you " . $geoplugin->convert(100) ."
\n";
}
/* find places nearby */
$nearby = $geoplugin->nearby();
if ( isset($nearby[0]['geoplugin_place']) ) {
echo "
Halo semuanya, kembali lagi di sahretech. Kali ini kita akan membahas tutorial yang tidak kalah seru yaitu cara membuat peta, menginput data lokasi, dan menampilkan lokasi menggunakan library leaflet js. Tutorial ini merupakan lanjutan dari tutorial basic leaflet js library yang sudah saya buat sebelumnya, bagi anda yang masih baru dan ingin mengetahui cara menggunakan library ini silahkan menuju link berikut https. // www. sahretech. com/2020/09/how-to-make-a-digital-map-with. html
Apa yang akan kita lakukan?
Pada tutorial kali ini kita akan membuat aplikasi sederhana dengan menggunakan bahasa pemrograman php, database mysql dan library leaflet js. Nantinya akan ada 2 kolom di halaman web yang kita buat. Kolom kiri berisi formulir input data dan kolom kanan berisi peta. Di peta akan ada penanda yang jika diklik akan muncul data yang kita input sebelumnya.
Cara Membuat Aplikasi Input Data dan Menampilkan Data Lokasi
Siapkan php dan mysql anda terlebih dahulu, gunakan web service package seperti xampp untuk mulai mengerjakan tutorial ini
1. Buat file indeks. php
Buat folder baru dengan nama training_input_location di dalam folder htdocs. lalu buat file dengan nama index. php di dalamnya. Salin skrip di bawah ini dan tempel di file indeks. php. Untuk penjelasannya saya lampirkan script dibawah ini
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="row"><!-- class row digunakan sebelum membuat column --><divclass="col-4"><!-- ukuruan layar dengan bootstrap adalah 12 kolom, bagian kiri dibuat sebesar 4 kolom--><divclass="jumbotron"><!-- untuk membuat semacam container berwarna abu --><h1>Add Location</h1><hr><formaction="proses.php"method="post"><divclass="form-group"><labelfor="exampleFormControlInput1">Latitude, Longitude</label><inputtype="text"class="form-control"id="latlong"name="latlong"></div><divclass="form-group"><labelfor="exampleFormControlInput1">Nama Tempat</label><inputtype="text"class="form-control"name="nama_tempat"></div><divclass="form-group"><labelfor="exampleFormControlInput1">Kategori Tempat</label><selectclass="form-control"name="kategori"id=""><optionvalue="">--Kategori Tempat--</option><optionvalue="rumah makan">Rumah Makan</option><optionvalue="pom bensin">Pom Bensin</option><optionvalue="Fasilitas Umum">Fasilitas Umum</option><optionvalue="Pasar/Mall">Pasar/Mall</option><optionvalue="rumah sakit">Rumah Sakit</option><optionvalue="Sekolah">Sekolah</option></select></div><divclass="form-group"><labelfor="exampleFormControlInput1">Keterangan</label><textareaclass="form-control"name="keterangan"cols="30"rows="5"></textarea></div><divclass="form-group"><buttontype="submit"class="btn btn-info">Add</button></div></form></div></div><divclass="col-8"><!-- ukuruan layar dengan bootstrap adalah 12 kolom, bagian kiri dibuat sebesar 4 kolom--><!-- peta akan ditampilkan dengan id = mapid --><divid="mapid"></div></div></div></body></html>
Jika Anda menjalankan halaman index di atas, maka Anda akan melihat tampilan web yang berantakan. Mengapa berantakan?, karena kami belum mengimpor bootsrap CDN. Bootstrap cdn akan diimpor pada tahap selanjutnya
2. Impor CDN Perpustakaan
Selanjutnya kita akan import bootstrap resource dan leaflet js menggunakan cdn. Untuk menggunakan cdn harus terkoneksi dengan internet karena resource library yang akan kita gunakan tidak tersimpan di komputer lokal
Salin skrip di bawah ini dan tempelkan sebelum tag . Skrip dibawah ini berisi bootstrap style css dan js leaflet untuk mempercantik tampilan web yang akan kita boot
Selanjutnya buat database dengan nama pelatihan dan buat tabel di dalamnya dengan nama lokasi. Anda dapat melihat struktur tabel pada gambar di bawah ini
Tabel lokasi
4. Buat Fungsi untuk Menampilkan Peta
Selanjutnya, untuk dapat menampilkan peta kita perlu menambahkan beberapa skrip di bawah ini ke dalam file indeks. php. Salin skrip di bawah ini dan tempel di bawah pustaka cdn sebelumnya. Untuk penjelasannya saya cantumkan di bagian atas dan kanan script
Kemudian simpan project tersebut dan coba jalankan di browser, maka hasilnya akan terlihat seperti gambar di bawah ini. Selanjutnya kita akan membuat fungsi popup ketika map diklik dan untuk form input di sisi kiri halaman belum bisa bekerja karena kita belum membuat file prosesnya.
Tampilan peta
5. Buat Fungsi untuk Memunculkan Lintang dan Bujur
Salin skrip di bawah ini dan tempel tepat sebelum tag terakhir di file indeks. php
// buat variabel berisi fugnsi L.popup var popup = L.popup();
// buat fungsi popup saat map diklikfunctiononMapClick(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
Kemudian simpan proyek Anda dan coba jalankan di browser, maka hasilnya akan terlihat seperti gambar di bawah ini. Coba klik di mana saja di peta dan sembulan dengan informasi lintang dan bujur akan muncul.
Anda juga harus mencoba memperhatikan formulir input di sisi halaman, formulir akan berubah secara dinamis ketika kita mengklik di suatu tempat di peta. Kami akan menggunakan data nanti untuk memberikan penanda pada peta
Tes munculan yang menunjukkan lintang, bujur
Dan untuk form input di halaman sebelah kiri belum bisa jalan karena file prosesnya belum kita buat. Kami akan membuat file proses di level 7
6. Buat Fungsi untuk Mengambil Data Lokasi dari Database
Selanjutnya untuk dapat menampilkan data lokasi seperti nama tempat, kategori tempat, dan deskripsi tempat, kita perlu menambahkan script berikut tepat sebelum tag terakhir 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 lokasiwhile($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([<?phpecho str_replace(['[', ']', 'LatLng', '(', ')'], '', $hasil['lat_long']); ?>]).addTo(mymap)
//data ditampilkan di dalam bindPopup( data ) dan dapat dikustomisasi dengan html
.bindPopup(`<?phpecho'nama tempat:'.$hasil['nama_tempat'].'|kategori:'.$hasil['kategori'].'|keteragan:'.$hasil['keterangan']; ?>`)
<?php } ?>
_
Jika dijalankan, maka hasilnya akan sama dengan proses sebelumnya. Penambahan fungsi pada langkah ini akan menampilkan data yang diperoleh dari database, namun karena data tersebut belum tersedia maka peta tidak menampilkan penanda 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 kirim dari form. Buat file baru dengan nama proses. php dan 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");
?>
_
Simpan proyek Anda dan coba jalankan di browser. Pengujian mengisi data dengan mengklik sembarang tempat pada peta, kemudian mengisi nama tempat, kategori tempat, dan deskripsi tempat dan klik add untuk menambahkan data. Jika berhasil maka tampilan demo akan seperti gambar di bawah ini
Masukkan data lokasi
Skrip Lengkap
Bagi yang merasa kesulitan mengikuti langkah-langkah penulisan script di atas, saya berikan koding lengkapnya agar bisa dibandingkan. Dalam tutorial ini ada dua file yang saya gunakan
<?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");
?>
_
Ini adalah tutorial cara membuat aplikasi input data dan menampilkan lokasi pada js leaflet map dengan php. Semoga artikel ini bermanfaat bagi pembaca sekalian, kurang lebihnya saya mohon maaf, dan jika ada script yang membingungkan silahkan bertanya pada kolom komentar dibawah. Sampai jumpa di tutorial menarik lainnya. Selamat Coding 😁
