Cara Membuat Web GIS dengan menggunakan PHP dan Database
Pada malam yang dingin ini belajar coding akan memberikan tutorial atau langkah-langkah cara membuat sebuah web GIS dengan menggunakan PHP dan database. Tutorial kali ini merupakan lanjutan dari tutorial sebelumnya yaitu cara membuat web GIS menggunakan metode array.
Baiklah langsung kita bahas aja langkah-langkahnya
Langkah-langkah pembuatannya sebagai berikut :
1. Hiduokan Apache dan MySQL dari aplikasi Xampp jika belum terinstall kalian harus install aplikasi tersebut terlebih dahulu.
2. Buka browser dan ketikkan localhost/phpmyadmin dan akan tampil halaman utama PhpMyAdmin
3. Buat database dengan cara klik new pada menu sidebar dan beri nama database sesuai dengan keinginan kalian kemudian tekan buat/create.
4. Buat tabel untuk databasenya dengan cara new kemudian berikan nama tabel dan jumlah atribut atau kolomnya
5. Tambahkan data titik koordinat pada tabel yang telah dibuat caranya klik menu tambahkan/insert pada menu navbar kemudian isikan data sesuai nama attribut tabelnya
6. Buat koneksi.php dengan text editor kalian masing
- <?php
- $host = 'localhost';
- $user = 'root';
- $pass = '';
- $db = 'db_gis';
- $conn = mysqli_connect($host,$user,$pass,$db);
- if(!$conn) {
- die("Connetion Failed :" . mysqli_connect_error());
- }
- ?>
7. Buat Index.php dengan text editor kalian source code nya sebagai berikut :
(NB: jangan : Lupa ganti API Key yang terletak pada bagian bawah source code)
- <!DOCTYPE html>
- <html>
- <head>
- <title>Praktikum 2</title>
- <meta charset="utf-8"><!--parsing code-->
- <meta name="viewport" content="initial-scale=1.0"> <!--web mobile-->
- <style>
- #map{/* modifikasi element html yang ber-id map*/
- height: 100%;
- }
- html, body{
- height: 100%;
- margin: 0;
- padding: 0;
- }
- </style>
- </head>
- <body>
- <div id="map"></div>
- <script>
- var map;
- function initMap() {
- // DATA koordinat dalam bntuk array
- //(nama,tempat,garis)
- <?php
- include "koneksi.php";
- $sql = "SELECT * FROM tb_lokasi";
- $result = $conn -> query($sql);
- ?>
- var locations = [
- <?php
- while($row = $result->fetch_assoc()) {
- echo "['".$row['nama']."',".$row['garis_lintang'].",".$row['garis_bujur'].",'".$row['icon']."'],";
- }
- ?>
- ];
- map = new google.maps.Map(document.getElementById('map'),{
- center: {lat: -3.7990165, lng: 114.779605},
- zoom: 10
- });
- //inisialisasi marker dan infowindow kosong
- var marker;
- var infowindow = new google.maps.InfoWindow();
- for (var i=0; i<locations.length; i++) { // lakukan perulangan untuk load dari array
- marker = new google.maps.Marker({
- position : new google.maps.LatLng(locations[i][1],locations[i][2]),
- icon : locations[i][3],
- map: map
- });
- google.maps.event.addListener(marker, 'click', (function(marker, i){
- return function() {
- infowindow.setContent(""+locations[i][0]);
- infowindow.open(map, marker);
- }
- })(marker, i));
- }
- }
- </script>
- <script
- src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_WykUgS8xTkHlZ9Ll7fpIfiuq39_1fL8&callback=initMap" async defer></script>
- </body>
- </html>
8. Jalankan index.php melalui browser kalian dengan cara buat sebuah folder baru dan masukkan index.php dan koneksi.php jika ingi memberikan gambar atau icon masukkan file tersebut dalam folder yang dibuat tadi kemudian pindahkan folder tersebut pada folder htdoc yang ada pada folder Xampp, kemudian pada browser ketikkan localhost/nama_folder_yang_dibuat_tadi.
contoh : localhost/webGIS_database.
9. Tampilan akhir dari web GIS nya sebagai berikut :
sekian tutorial cara membuat web GIS dengan menggunakan PHP dan database. Semoga tutorial iersebut dapat bermanfaat bagi kita semua jika terdapat kritik dan saran silahkan berikan komentar kalian pada kolom komentar. Terima Kasih...!!!
0 Comments
EmoticonEmoticon