Aplikasi GIS Geographic Information system berbasis codeigniter (marker) bagian VII

Ikuti langkah pada video (2 sesi), artikel akan diupdate secepatnya

Pada bagian ke-8, kita akan membuat marker (baca : simple marker google maps). Bagian ini kita akan membuat marker untuk setiap nama jembatan yang sudah kita buat. pertama kita buat file model_koordinatjembatan.php di folder model.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Model_koordinatjembatan extends CI_Model {

    public function create(){
        $data = array('id_jembatan' => $this->input->post('id_jembatan'),
            'latitude'=>$this->input->post('latitude'),
            'longitude'=>$this->input->post('longitude'));
        $query = $this->db->insert('koordinatjembatan', $data);
        return $query;
    }
    public function getAll(){
        $query = $this->db->get('koordinatjembatan');//mengambil semua data koordinat jembatan
        return $query;
    }
    public function getbyidjembatan($id){
        $this->db->where('id_jembatan', $id);
        $query = $this->db->get('koordinatjembatan');
        return $query;
    }
    public function read($id){
        $this->db->where('id_koordinatjembatan', $id);//mengambil data koordinat jembatan berdasarkan id_koordinatjembatan
        $query = $this->db->get('koordinatjembatan');
        return $query;
    }
    public function update(){
        $data = array('id_jembatan'=>$this->input->post('id_jembatan'),
            'latitude'=>$this->input->post('latitude'),
            'longitude'=>$this->input->post('longitude'));
        $this->db->where('id_koordinatjembatan', $this->input->post('id_koordinatjembatan'));//mengupdate berdasarkan id_koordinatjembatan
        $query = $this->db->update('koordinatjembatan', $data);
        return $query;
    }
    public function delete(){
        $this->db->where('id_koordinatjembatan', $this->input->post('id_koordinatjembatan'));//menghapus berdasarkan id_koordinatjembatan
        $query = $this->db->delete('koordinatjembatan');
        return $query;
    }
    public function deletebyidjembatan($id){
        $this->db->where('id_jembatan', $id);
        $query = $this->db->delete('koordinatjembatan');
        return $query;
    }

}

/* End of file model_koordinatjembatan.php */
/* Location: ./application/models/model_koordinatjembatan.php */

Selain itu juga buat file koordinatjembatanform.php di folder view/admin.

<!--script google map-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
$(document).on('click','#clearmap',clearmap)
.on('click','#simpandaftarkoordinatjembatan',simpandaftarkoordinatjembatan)
.on('click','#hapusmarkerjembatan',hapusmarkerjembatan)
.on('click','#viewmarkerjembatan',viewmarkerjembatan);
    var map;
    var markers = [];

    function initialize() {
        var mapOptions = {
        zoom: 14,
        // Center di kantor kabupaten kudus
        center: new google.maps.LatLng(-6.806428778495534, 110.84213197231293)
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        // Add a listener for the click event
        google.maps.event.addListener(map, 'rightclick', addLatLng);
        google.maps.event.addListener(map, "rightclick", function(event) {
          var lat = event.latLng.lat();
          var lng = event.latLng.lng();
          $('#latitude').val(lat);
          $('#longitude').val(lng);
          //alert(lat +" dan "+lng);
        });
    }

    /**
     * Handles click events on a map, and adds a new point to the marker.
     * @param {google.maps.MouseEvent} event
     */
    function addLatLng(event) {
        var marker = new google.maps.Marker({
        position: event.latLng,
        title: 'Simple GIS',
        map: map
        });
        markers.push(marker);
    }
    //membersihkan peta dari marker
    function clearmap(e){
        e.preventDefault();
        $('#latitude').val('');
        $('#longitude').val('');
        setMapOnAll(null);
    }
    //buat hapus marker
    function setMapOnAll(map) {
      for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
      }
      markers = [];
    }
    //end buat hapus marker

    function simpandaftarkoordinatjembatan(e){
        e.preventDefault();
        var datakoordinat = {'id_jembatan':$('#id_jembatan').val(),'latitude':$('#latitude').val(),'longitude':$('#longitude').val()};
        console.log(datakoordinat);
        $.ajax({
            url : '<?php echo site_url("admin/simpandaftarkoordinatjembatan") ?>',
            dataType : 'json',
            data : datakoordinat,
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('#daftarkoordinatjembatan').load('<?php echo current_url()."/ #daftarkoordinatjembatan > *" ?>');
                    alert(data.msg);
                    clearmap(e);
                }else{
                    alert(data.msg);
                }
            }
        })
    }
    function hapusmarkerjembatan(e){
        e.preventDefault();
        var datakoordinat = {'id_jembatan':$(this).data('iddatajembatan')};
        $.ajax({
            url : '<?php echo site_url("admin/hapusmarkerjembatan") ?>',
            data : datakoordinat,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    alert(data.msg);
                    $('#daftarkoordinatjembatan').load('<?php echo current_url()."/ #daftarkoordinatjembatan > *" ?>');
                    clearmap(e);
                }else{
                    alert(data.msg);
                }
            }
        })
    }
    function viewmarkerjembatan(e){
        e.preventDefault();
        var datakoordinat = {'id_jembatan':$(this).data('iddatajembatan')};
        $.ajax({
            url : '<?php echo site_url("admin/viewmarkerjembatan") ?>',
            data : datakoordinat,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    clearmap(e);
                    //load marker
                    $.each(data.msg,function(m,n){
                        var myLatLng = {lat: parseFloat(n["latitude"]), lng: parseFloat(n["longitude"])};
                        console.log(m,n);
                        $.each(data.datajembatan,function(k,v){
                            addMarker(v['namajembatan'],myLatLng);
                        })
                        return false;
                    })
                    //end load marker
                }else{
                    alert(data.msg);
                }
            }
        })
    }
    // Menampilkan marker lokasi jembatan
    function addMarker(nama,location) {
        var marker = new google.maps.Marker({
            position: location,
            map: map,
            title : nama
        });
        markers.push(marker);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!--end script google map-->
<div class="container">
    <div class="row">
        <div class="col-md-8 col-sm-8">
            <div class="panel panel-primary">
                <div class="panel-heading"><span class="glyphicon glyphicon-globe"></span> Peta</div>
                <div class="panel-body" style="height:300px;" id="map-canvas">
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-4">
            <div class="panel panel-primary">
                <div class="panel-heading"><span class="glyphicon glyphicon-list"></span> Daftar Koordinat</div>
                <div class="panel-body" style="min-height:300px;">
                    <form action="#">
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label for="latitude">Latitude</label>
                                    <input type="text" class="form-control" name="latitude" id="latitude">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label for="longitude">Longitude</label>
                                    <input type="text" class="form-control" name="longitude" id="longitude">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="datajembatan">Data jembatan</label>
                            <?php if ($itemdatajembatan->num_rows()!=null) {
                                echo '<select name="id_jembatan" id="id_jembatan" class="form-control">';
                                foreach ($itemdatajembatan->result() as $datajembatan) {
                                    echo "<option value='".$datajembatan->id_jembatan."'>".$datajembatan->namajembatan."</option>";
                                }
                                echo '</select>';
                            }else{
                                echo anchor('admin/jembatan', '<span class="glyphicon glyphicon-plus"></span> Tambah Data jembatan', 'class="btn btn-info form-control"');
                            } ?>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-info btn-sm" id="simpandaftarkoordinatjembatan"><span class="glyphicon glyphicon-save"></span> Simpan</button>
                            <button class="btn btn-info btn-sm" id="clearmap"><span class="glyphicon glyphicon-globe"></span> ClearMap</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-sm-12">
            <div class="panel panel-primary">
                <div class="panel-heading"><span class="glyphicon glyphicon-th-list"></span> Daftar Koordinat marker Data jembatan</div>
                <div class="panel-body" style="min-height:400px">
                    <table class="table">
                        <th>No</th>
                        <th>Data jembatan</th>
                        <th>Latitude</th>
                        <th>Longitude</th>
                        <th></th>
                        <tbody id="daftarkoordinatjembatan">
                            <?php
                            if ($itemkoordinatjembatan->num_rows()!=null) {
                                $no = 1;
                                foreach ($itemdatajembatan->result() as $jembatan) {
                                    echo "<tr>";
                                    echo "<td>";
                                    echo $no++;
                                    echo "</td>";
                                    echo "<td>";
                                    echo $jembatan->namajembatan;
                                    echo "</td>";
                                    echo "<td>";
                                    foreach ($itemkoordinatjembatan->result() as $koordinat) {
                                        if ($koordinat->id_jembatan==$jembatan->id_jembatan) {
                                            echo $koordinat->latitude."</br>";
                                        }
                                    }
                                    echo "</td>";
                                    echo "<td>";
                                    foreach ($itemkoordinatjembatan->result() as $koordinat) {
                                        if ($koordinat->id_jembatan==$jembatan->id_jembatan) {
                                            echo $koordinat->longitude."</br>";
                                        }
                                    }
                                    echo "</td>";
                                    echo "<td>";
                                    echo '<button class="btn-info btn btn-sm" id="viewmarkerjembatan" data-iddatajembatan="'.$jembatan->id_jembatan.'"><span class="glyphicon-globe glyphicon"></span> View marker</button> ';
                                    echo '<button class="btn-danger btn btn-sm" id="hapusmarkerjembatan" data-iddatajembatan="'.$jembatan->id_jembatan.'"><span class="glyphicon-remove glyphicon"></span></button>';
                                    echo "</td>";
                                    echo "</tr>";
                                }
                            }
                             ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Sedangkan pada file admin.php tambahi skrip kayak gini :

//crud koordinat jembatan
    public function koordinatjembatan(){
        $data = array('content' => 'admin/koordinatjembatanform',
            'itemdatajembatan'=>$this->model_jembatan->getAll(),
            'itemkoordinatjembatan'=>$this->model_koordinatjembatan->getAll());
        $this->load->view('templates/template', $data, FALSE);
    }
    function simpandaftarkoordinatjembatan(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            $this->load->library('form_validation');
            $this->form_validation->set_rules('id_jembatan', 'Data jembatan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                if ($this->model_koordinatjembatan->getbyidjembatan($this->input->post('id_jembatan'))->num_rows()!=null) {
                    $status = 'error';
                    $msg = 'marker jembatan yang bersangkutan sudah ada, hapus terlebih dahulu';
                }else{
                    if ($this->model_koordinatjembatan->create()) {
                        $status = 'success';
                        $msg = 'data berhasil disimpan';
                    }else{
                        $status = 'error';
                        $msg = 'terjadi kesalahan saat menyimpan koordinat';
                    }
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function hapusmarkerjembatan(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            if ($this->model_koordinatjembatan->deletebyidjembatan($this->input->post('id_jembatan'))) {
                $status = 'success';
                $msg = 'data berhasil dihapus';
            }else{
                $status = 'error';
                $msg = 'terjadi kesalahan saat menghapus data';
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function viewmarkerjembatan(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            if ($this->model_koordinatjembatan->getbyidjembatan($this->input->post('id_jembatan'))->num_rows()!=null){
                $status = 'success';
                $msg = $this->model_koordinatjembatan->getbyidjembatan($this->input->post('id_jembatan'))->result();
                $datajembatan = $this->model_jembatan->read($this->input->post('id_jembatan'))->result();
            }else{
                $status = 'error';
                $msg = 'data tidak ditemukan';
                $datajembatan = null;
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg,'datajembatan'=>$datajembatan)));
        }
    }
    //end crud koordinat jembatan

Sehingga saat kita akses di http://localhost/simplegis/index.php/admin/koordinatjembatan. tampilannya akan jadi kayak gini.

marker

60 thoughts on “Aplikasi GIS Geographic Information system berbasis codeigniter (marker) bagian VII

  1. deviana Balas

    Mas, saya coba GIS-Codeigniter di website mas. Knp ngk muncul peta ketika dklik view marker dari tabel?

  2. paldwi Balas

    bang, pas mau ambil koordinat klik kanan kok nga berfungsi ya, sya udah ikut videonya padahal?

    • fadlur PenulisBalas

      Coba dicek di console browsernya mas, soale kan pake jquery jadi kalo ada error biasanya tampil di console browsernya.

  3. paldwi Balas

    ni errornya
    ReferenceError: addLatLng is not defined
    koordinatjembatan:132:9
    Prefixed Fullscreen API is deprecated. Please use unprefixed API for fullscreen. For more help https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API controls.js:19:54
    “Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys” util.js:210:33
    “Google Maps API warning: SignedInDeprecated https://developers.google.com/maps/documentation/javascript/error-messages#signed-in-deprecated” util.js:210:33

    • fadlur PenulisBalas

      “ReferenceError: addLatLng is not defined”

      Mungkin kamu kelupaan bikin function addLatLng. coba cek lagi.

  4. paldwi Balas

    udah bang makasih, function addLatLng udah dibikin, cuma salah penulisan addLatLng.

  5. Inddra Balas

    bang kordinatjembatanya kok ga ada? artikelnya beda sama yang di video yang bagian ini bang?

  6. Adhy Balas

    Mas, mau tanya kalau muncul pesan gini “caught SyntaxError: Unexpected token )” pas di klik untuk view, kenapa ya?

  7. agus Balas

    kalau tombol simpanya g FUNGSI , KENAPA YAGAN , PADAHAL EROR E G ADA

    • fadlur PenulisBalas

      Coba liat diconsole browsernya mas. Pasti ada notif errornya.

      • Masfar Balas

        util.js:249 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
        LC.j @ util.js:249
        (anonymous) @ js?v=3.exp&signed_in=true:146
        (anonymous) @ js?v=3.exp&signed_in=true:62
        (anonymous) @ js?v=3.exp&signed_in=true:60
        (anonymous) @ js?v=3.exp&signed_in=true:62
        (anonymous) @ js?v=3.exp&signed_in=true:124
        (anonymous) @ js?v=3.exp&signed_in=true:60
        (anonymous) @ js?v=3.exp&signed_in=true:124
        ae @ js?v=3.exp&signed_in=true:62
        $d.na @ js?v=3.exp&signed_in=true:124
        (anonymous) @ stats.js:1
        util.js:249 Google Maps API warning: SignedInNotSupported https://developers.google.com/maps/documentation/javascript/error-messages#signed-in-not-supported
        LC.j @ util.js:249
        (anonymous) @ js?v=3.exp&signed_in=true:146
        (anonymous) @ js?v=3.exp&signed_in=true:62
        (anonymous) @ js?v=3.exp&signed_in=true:60
        (anonymous) @ js?v=3.exp&signed_in=true:62
        (anonymous) @ js?v=3.exp&signed_in=true:124
        (anonymous) @ js?v=3.exp&signed_in=true:60
        (anonymous) @ js?v=3.exp&signed_in=true:124
        ae @ js?v=3.exp&signed_in=true:62
        $d.na @ js?v=3.exp&signed_in=true:124
        (anonymous) @ stats.js:1

        itu error nya mas, ga mau nyimpan, mohon bantuannya mas fadlur ?

  8. Zorigt Balas

    Message: Undefined variable: itemdatajembatan
    having this error. Could you help out?

  9. Zorigt Balas

    Fixed the previous problem but now i am having Failed to load resource: the server responded with a status of 500 (Internal Server Error) while saving.

    • fadlur PenulisBalas

      Cek lagi base_url di dalam file config.php. kemudian admin itu controller apa folder? Intinya url-nya g ditemukan.

      • chessa Balas

        admin folder,
        itu saya melihat di video anda marker google api 2 dibagian untuk menyimpan marker,
        untuk admin.php, itu dibuat gimana dan dimana ya?

        • fadlur PenulisBalas

          Itu bikin folder dengan nama admin di dalam folder controller, abis itu bikin file Koordinatjembatan.php nah di dalam file Koordinatjembatan.php itu ada function buat nyimpen marker.

  10. apri Balas

    mas link download source code nya dong lagi ada tugas kuliah ni..

  11. apri Balas

    Mas pencerahannya dong
    error di sini mass

    $(document).on(‘click’,’#clearmap’,clearmap)
    .on(‘click’,’#simpandaftarkoordinatjembatan’,simpandaftarkoordinatjembatan)
    .on(‘click’,’#hapusmarkerjembatan’,hapusmarkerjembatan)
    .on(‘click’,’#viewmarkerjembatan’,viewmarkerjembatan);

  12. syabrina Balas

    kenapa view marker nya ga bisa ya? keluarnya notif dari localhost yang kosong? ga muncul markernya di peta?

    • fadlur PenulisBalas

      Coba diinspect terus buka console. Ada pesan error apaan.

  13. Fakhri Balas

    Error Number: 1146

    Table ‘simplegis.koordinatjembatan’ doesn’t exist

    SELECT * FROM `koordinatjembatan`

    Filename: C:/xampp/htdocs/simplegis/system/database/DB_driver.php

    Line Number: 691

    Gan, kok error gitu malah ya? mohon bantuan nya gan.. makasii..

    • fadlur PenulisBalas

      Udah bikin database? Kalo udah file .sql diimport mas

  14. irfan Balas

    GIS seperti ini versi laravelnya dong , masih bingung translate dalam ci ke laravel , bingung di model dan controllernya

  15. irfan Balas

    markernya kalo di klik kanan udah muncul , tapi kordinatnya ngga, trus cara nyimpen kordinat gimana ya kalo setelah muncul tpi dalam java script muncul dalam window

    • fadlur PenulisBalas

      maksudnya gimana mas? kok dalam javascript muncul dalam window?

  16. Maman Mulyaman Balas

    Saran buat website ini untuk di tambah fitur search biar semakin mudah dan dropdown menu ,semoga lebih baik lagi om.terimakasih om

      • Faqih Mu'min Balas

        A PHP Error was encountered

        Severity: Notice

        Message: Undefined variable: itemkoordinat

        Filename: admin/formkoordinatjembatan.php

        Line Number: 71

        Backtrace:

        File: C:\xampp\htdocs\simpelgis\application\views\admin\formkoordinatjembatan.php
        Line: 71
        Function: _error_handler

        File: C:\xampp\htdocs\simpelgis\application\views\templates\template-admin.php
        Line: 3
        Function: view

        File: C:\xampp\htdocs\simpelgis\application\controllers\admin\Koordinatjembatan.php
        Line: 20
        Function: view

        File: C:\xampp\htdocs\simpelgis\index.php
        Line: 315
        Function: require_once

        kalo ini apanya yg kurang mas?

        • fadlur PenulisBalas

          Ini sampe bagian mana mas? Nanti saya cekkan. Yang itemkoordinat itu karena di controllernya blm dibuat variabel dengan nama itemkoordinat.

          • Faqih Mu'min

            sampe daftar marker jembatan mas , kalo variabel itemkoordinat itu disimpen dmna mas?

          • fadlur Penulis

            File controller Koordinatjembatan.php kalo g salah ingat.

          • fadlur Penulis

            Cek lagi mas variabel $data, di dalamnya udah ada variabel itemkoordinat blm. Ikutin aja diblognya mas.

  17. arief Balas

    mas yg file admin.php itu sudah ada atau di buat baru ya??
    kalo saya buat baru munculnya seperti ini:
    Fatal error: Class ‘CI_Model’ not found in C:\xampp\htdocs\simplegis\application\controllers\admin\koordinatjembatan.php on line 4
    A PHP Error was encountered

    Severity: Error

    Message: Class ‘CI_Model’ not found

    Filename: admin/koordinatjembatan.php

    Line Number: 4

    Backtrace:

    terima kasih

  18. arieilham11 Balas

    TypeError: (intermediate value).apply is not a function [Learn More]
    jquery.js:4669:14
    maksudnya apa ini mas ??

  19. Lis Supriyanto Balas

    Kang ini knp yah Table ‘gis_codeigniter.koordinatjembatan’ doesn’t exist

Tinggalkan Balasan

This site uses Akismet to reduce spam. Learn how your comment data is processed.