Source code aplikasi gis dengan PHP

Source code aplikasi gis dengan PHP merupakan aplikasi gis yang berbasis website yang dibuat dengan PHP & MySQLI Source code ini bisa didapat dengan gratis dan bisa mudah untuk di pelajari, tetapi sebelum membahas aplikasi ini secara mendalam, silahkan subscribe dulu channel youtube serba ngoding.

Tentang source code aplikasi gis

Aplikasi ini dibuat menggunakan kunci api dari google maps dan php dan MySQLI, aplikasi ini menyediakan fitur standar aplikasi pada umum nya yaitu create,read,update dan delete. Fitur create aplikasi ini menambahkan titik dengan 4 kategori yaitu Rumah,Caffe,Kantor, dan Instansi.

Gambar diatas adalah tampilan untuk menambahkan marker di aplikasi ini, marker muncul sesuai dengan type yang anda pilih, untuk menjalankan fungsi create marker ini silahkan klik kanak di mosue anda maka form nya akan muncul secara otomatis,

Persiapan install aplikasi gis dengan php

Sebelum mendownload aplikasi web gis ini silahkan perisapkan kebutuhan di bawah ini

PHP Versi 7 Keatas
API Google MAP, untuk api google maps kami tidak sediakan silahkan buat kunci api google map anda sendiri disini

untuk link download tersedia dibawah postingan ini.

Cara install source code aplikasi gis dengan php

Untuk menginstall aplikasi ini sangat lah gampang, jika aplikasi sudah di download, ikuti step di bawah ini:

ekstrak folder ke dalam htdocs anda.
import terlebih dahulu database nya, jika anda belum mengetahui cara import database silahkan baca disini dan untuk database nya sudah tersedia ketika anda mendownload aplikasi nya.
selanjutnya ubah terlebih dahulu index.example.php menjadi index.php, untuk source nya kira-kira seperti dibawah ini

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <title>WEB GIS</title>
        <style>
            #form {
                width: 300px;
                min-height: 500px;
                margin-top: 20px;
                margin-right: 50px;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 9999;
                background-color: #fff;
            }
        </style>
    </head>
    <body>
       <div>
       <div id="form">
       </div>
        <div id="map" style="height: 100vh"></div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <!-- my js -->
        <script src="https://maps.googleapis.com/maps/api/js?key=KODE API GOOGLE MAPS ANDA&sensor=false"></script>
        <script src="js/script.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>

<!doctype html>

<head>

<style>

#form {

width: 300px;

min-height: 500px;

margin-top: 20px;

margin-right: 50px;

position: absolute;

top: 0;

right: 0;

z-index: 9999;

background-color: #fff;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

cari source code seperit di bawah ini

<script src="https://maps.googleapis.com/maps/api/js?key=KODE API GOOGLE MAPS ANDA&sensor=false"></script>

1	<script src="https://maps.googleapis.com/maps/api/js?key=KODE API GOOGLE MAPS ANDA&sensor=false"></script>

Silahkan ubah dengan kode api yang ada peroleh dari google.
Selanjutnya silahkan buka file silahkan buka file script.js yang ada di dalam folder js dan temukan script di bawah ini

var center = {
            lat: -0.0555459,
            lng: 109.3483099
        }

var center = {

lat: -0.0555459,

lng: 109.3483099

}

Silahkan ganti lat dan lang nya sesuai dengan lokasi anda.

Untuk link download aplikasi ini silahkan klik disini. Silahkan gunakan aplikasi ini untuk anda belajar, jika ada yang ingin di tanyakan mengenai aplikasi ini silahkan bertanya di komentar, dan jangan lupa untuk di share aplikasi nya juga dan tidak kalah penting silahkan subscribe channel serba ngoding.

2 Replies to “Source code aplikasi gis dengan PHP”

sayid adam berkata:
Oktober 16, 2019 pukul 3:04 pm
berarti harus bayar untuk mendaptkan api key mapsnya bang ?
Balas
1. Krismon berkata:
  Oktober 16, 2019 pukul 8:07 pm
  untuk kunci api bisa didapat secara gratis dari google tetapi harus membuat “Create billing account” terlebih dahulu, kunjungi https://console.cloud.google.com/ untuk memperjelas
  Balas

Source code aplikasi gis dengan PHP

Tentang source code aplikasi gis

Persiapan install aplikasi gis dengan php

Cara install source code aplikasi gis dengan php

Published by Krismon

2 Replies to “Source code aplikasi gis dengan PHP”

Tinggalkan Balasan Batalkan balasan