Aplikasi GIS Geographic Information system berbasis codeigniter (polyline) final

Ikuti langkah-langkah di video, artikel diupdate secepatnya

Pada bagian terakhir tulisan yang membahas aplikasi gis codeigniter, kita akan mencoba menggunakan polyline dari googlemaps (baca : simple polyline). Bagian koordinat jalan kita akan membuat menggunakan polyline sebagai penanda jalan.

Beberapa library dari codeigniter akan kita pake, diantaranya library session dan cart. Jadi kita harus ngedit file config.php di dalam folder config.

File config.php edit bagian ini.

$config['encryption_key'] = 'ISI SEMBARANG';

Abis ngedit file config.php sekarang kita lanjut buat file model_koordinatjalan.php di dalam folder model.

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

class Model_koordinatjalan extends CI_Model {

    public function create(){
        foreach ($this->cart->contents() as $koordinat) {
            $data = array('id_jalan' => $this->input->post('id_jalan'),
                'latitude'=>$koordinat['latitude'],
                'longitude'=>$koordinat['longitude']);
            $query = $this->db->insert('koordinatjalan', $data);
        }
        return $query;
    }
    public function getAll(){
        $query = $this->db->get('koordinatjalan');//mengambil semua data koordinat jalan
        return $query;
    }
    public function getbyidjalan($id){
        $this->db->where('id_jalan', $id);
        $query = $this->db->get('koordinatjalan');//mengambil semua data koordinat jalan
        return $query;
    }
    public function read($id){
        $this->db->where('id_koordinatjalan', $id);//mengambil data koordinat jalan berdasarkan id_koordinatjalan
        $query = $this->db->get('koordinatjalan');
        return $query;
    }
    public function update(){
        $data = array('id_jalan'=>$this->input->post('id_jalan'),
            'latitude'=>$this->input->post('latitude'),
            'longitude'=>$this->input->post('longitude'));
        $this->db->where('id_koordinatjalan', $this->input->post('id_koordinatjalan'));//mengupdate berdasarkan id_koordinatjalan
        $query = $this->db->update('koordinatjalan', $data);
        return $query;
    }
    public function delete(){
        $this->db->where('id_koordinatjalan', $this->input->post('id_koordinatjalan'));//menghapus berdasarkan id_koordinatjalan
        $query = $this->db->delete('koordinatjalan');
        return $query;
    }
    public function deletebyidjalan($id){
        $this->db->where('id_jalan', $id);//menghapus berdasarkan id_koordinatjalan
        $query = $this->db->delete('koordinatjalan');
        return $query;
    }

}

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

Kemudian file koordinatjalanform.php.ย  di dalam folder view.

<!--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','#simpandaftarkoordinatjalan',simpandaftarkoordinatjalan)
.on('click','#hapuspolylinejalan',hapuspolylinejalan)
.on('click','#viewpolylinejalan',viewpolylinejalan);
    var poly;
    var map;

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

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

        var polyOptions = {
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3
        };
        poly = new google.maps.Polyline(polyOptions);
        poly.setMap(map);

        // 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();
          var datakoordinat = {'latitude':lat, 'longitude':lng};
          $.ajax({
              url : '<?php echo site_url("admin/tambahkoordinatjalan") ?>',
              data : datakoordinat,
              dataType : 'json',
              type : 'POST',
              success : function(data,status){
                  if (data.status!='error') {
                      $('#daftarkoordinat').load('<?php echo current_url()."/ #daftarkoordinat > *" ?>');
                  }else{
                      alert(data.msg);
                  }
              }
          })
          //$('#latitude').val(lat);
          //$('#longitude').val(lng);
          //alert(lat +" dan "+lng);
        });
    }

    /**
     * Handles click events on a map, and adds a new point to the Polyline.
     * @param {google.maps.MouseEvent} event
     */
    function addLatLng(event) {

        var path = poly.getPath();

        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear.
        path.push(event.latLng);

        // Add a new marker at the new plotted point on the polyline.
        var marker = new google.maps.Marker({
        position: event.latLng,
        title: '#' + path.getLength(),
        map: map
        });
    }
    function clearmap(e){
        e.preventDefault();
        $.ajax({
            url : '<?php echo site_url("admin/hapusdaftarkoordinatjalan") ?>',
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                      $('#daftarkoordinat').load('<?php echo current_url()."/ #daftarkoordinat > *" ?>');
                  }else{
                      alert(data.msg);
                  }
            }
        })
            var mapOptions = {
            zoom: 14,
            // Center the map on Chicago, USA.
            center: new google.maps.LatLng(-6.805701340471898, 110.92556476593018)
          };

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

          var polyOptions = {
            strokeColor: '#000000',
            strokeOpacity: 1.0,
            strokeWeight: 3
          };
          poly = new google.maps.Polyline(polyOptions);
          poly.setMap(null);
          initialize();
    }
    function simpandaftarkoordinatjalan(e){
        e.preventDefault();
        var datakoordinat = {'id_jalan':$('#id_jalan').val()};
        console.log(datakoordinat);
        $.ajax({
            url : '<?php echo site_url("admin/simpandaftarkoordinatjalan") ?>',
            dataType : 'json',
            data : datakoordinat,
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('#daftarkoordinat').load('<?php echo current_url()."/ #daftarkoordinat > *" ?>');
                    $('#daftarkoordinatjalan').load('<?php echo current_url()."/ #daftarkoordinatjalan > *" ?>');
                    alert(data.msg);
                    clearmap(e);
                }else{
                    alert(data.msg);
                }
            }
        })
    }
    function hapuspolylinejalan(e){
        e.preventDefault();
        var datakoordinat = {'id_jalan':$(this).data('iddatajalan')};
        console.log(datakoordinat);
        $.ajax({
            url : '<?php echo site_url("admin/hapuspolylinejalan") ?>',
            data : datakoordinat,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    alert(data.msg);
                    $('#daftarkoordinatjalan').load('<?php echo current_url()."/ #daftarkoordinatjalan > *" ?>');
                    clearmap(e);
                }else{
                    alert(data.msg);
                }
            }
        })
    }
    function viewpolylinejalan(e){
        e.preventDefault();
        var datakoordinat = {'id_jalan':$(this).data('iddatajalan')};
        console.log(datakoordinat);
        $.ajax({
            url : '<?php echo site_url("admin/viewpolylinejalan") ?>',
            data : datakoordinat,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    clearmap(e);
                    //load polyline
                    $.each(data.msg,function(m,n){
                        var lat = n["latitude"];
                        var lng = n["longitude"];
                        console.log(m,n);
                        $.each(data.datajalan,function(k,v){
                            createpolylinedatajalan(data.msg,v['namajalan'],lat,lng);
                        })
                        return false;
                    })
                    //end load polyline
                }else{
                    alert(data.msg);
                }
            }
        })
    }
    function createpolylinedatajalan(datakoordinat,nama,lat,lon){
        var mapOptions = {
        zoom: 14,
        //get center latlong
        center: new google.maps.LatLng(lat, lon),
        //mapTypeId: google.maps.MapTypeId.TERRAIN
        //end get center latlong
        };

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

        var listkoordinat = [];
        $.each(datakoordinat,function(k,v){
          listkoordinat.push(new google.maps.LatLng(parseFloat(v['latitude']), parseFloat(v['longitude'])));
        })
        var pathKoordinat = new google.maps.Polyline({
        path: listkoordinat,
        geodesic: true,
        strokeOpacity: 1.0,
        });

        pathKoordinat.setMap(map);

    }

    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;">
                    <table class="table">
                        <th>No</th>
                        <th>Lat</th>
                        <th>Long</th>
                        <th></th>
                        <tbody id="daftarkoordinat">
                            <?php if($this->cart->contents()!=null){
                                foreach ($this->cart->contents() as $koordinat) {
                                    if($koordinat['jenis']=='jalan'){
                                        echo '<tr><td>'.$koordinat["id"].'</td><td>'.$koordinat["latitude"].'</td><td>'.$koordinat["longitude"].'</td></tr>';
                                    }
                                }
                            } ?>
                        </tbody>
                    </table>
                    <form action="#">
                        <div class="form-group">
                            <label for="datajalan">Data Jalan</label>
                            <?php if ($itemdatajalan->num_rows()!=null) {
                                echo '<select name="id_jalan" id="id_jalan" class="form-control">';
                                foreach ($itemdatajalan->result() as $datajalan) {
                                    echo "<option value='".$datajalan->id_jalan."'>".$datajalan->namajalan."</option>";
                                }
                                echo '</select>';
                            }else{
                                echo anchor('admin/jalan', '<span class="glyphicon glyphicon-plus"></span> Tambah Data Jalan', 'class="btn btn-info form-control"');
                            } ?>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-info btn-sm" id="simpandaftarkoordinatjalan"><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 Polyline Data Jalan</div>
                <div class="panel-body" style="min-height:400px">
                    <table class="table">
                        <th>No</th>
                        <th>Data Jalan</th>
                        <th>Latitude</th>
                        <th>Longitude</th>
                        <th></th>
                        <tbody id="daftarkoordinatjalan">
                            <?php
                            if ($itemkoordinatjalan->num_rows()!=null) {
                                $no = 1;
                                foreach ($itemdatajalan->result() as $jalan) {
                                    echo "<tr>";
                                    echo "<td>";
                                    echo $no++;
                                    echo "</td>";
                                    echo "<td>";
                                    echo $jalan->namajalan;
                                    echo "</td>";
                                    echo "<td>";
                                    foreach ($itemkoordinatjalan->result() as $koordinat) {
                                        if ($koordinat->id_jalan==$jalan->id_jalan) {
                                            echo $koordinat->latitude."</br>";
                                        }
                                    }
                                    echo "</td>";
                                    echo "<td>";
                                    foreach ($itemkoordinatjalan->result() as $koordinat) {
                                        if ($koordinat->id_jalan==$jalan->id_jalan) {
                                            echo $koordinat->longitude."</br>";
                                        }
                                    }
                                    echo "</td>";
                                    echo "<td>";
                                    echo '<button class="btn-info btn btn-sm" id="viewpolylinejalan" data-iddatajalan="'.$jalan->id_jalan.'"><span class="glyphicon-globe glyphicon"></span> View Polyline</button> ';
                                    echo '<button class="btn-danger btn btn-sm" id="hapuspolylinejalan" data-iddatajalan="'.$jalan->id_jalan.'"><span class="glyphicon-remove glyphicon"></span></button>';
                                    echo "</td>";
                                    echo "</tr>";
                                }
                            }
                             ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Terakhir file admin.php di folder controller tambahi beberapa baris code.

//crud koordinat jalan ()
    public function koordinatjalan(){
        $data = array('content' => 'admin/koordinatjalanform',
            'itemdatajalan'=>$this->model_jalan->getAll(),
            'itemkoordinatjalan'=>$this->model_koordinatjalan->getAll());
        $this->load->view('templates/template', $data, FALSE);
    }
    function tambahkoordinatjalan()
    {
        if(!$this->input->is_ajax_request())
        {
            show_404();
        }else
        {
            if($this->cart->contents()==null){
                $data = array(
                'id'      => 1,
                'qty'     => 1,
                'price'   => 1,
                'jenis'      => 'jalan',
                'name'    => 1,
                'latitude'=> $this->input->post('latitude'),
                'longitude'=> $this->input->post('longitude')
                );

                $this->cart->insert($data);
                $status = "success";
                $msg = "<div class='alert alert-success'>Data berhasil disimpan</div>";
            }else{
                $urut = 0;
                foreach ($this->cart->contents() as $jalan) {
                    $urut +=1;
                }
                $data = array(
                        'id'      => $urut + 1,
                        'qty'     => 1,
                        'price'   => 1,
                        'jenis'      => 'jalan',
                        'name'    => $urut + 1,
                        'latitude'=> $this->input->post('latitude'),
                        'longitude'=> $this->input->post('longitude')
                    );

                $this->cart->insert($data);
                $status = "success";
                $msg = "<div class='alert alert-success'>Data berhasil disimpan</div>";
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function hapusdaftarkoordinatjalan(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            $hapus = $this->cart->destroy();
            $status = 'success';
            $msg = 'data koordinat berhasil dihapus';

            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function simpandaftarkoordinatjalan(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            $this->load->library('form_validation');
            $this->form_validation->set_rules('id_jalan', 'Data Jalan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                if ($this->model_koordinatjalan->getbyidjalan($this->input->post('id_jalan'))->num_rows()!=null) {
                    $status = 'error';
                    $msg = 'polyline jalan yang bersangkutan sudah ada, hapus terlebih dahulu';
                }else{
                    if ($this->model_koordinatjalan->create()) {
                        $status = 'success';
                        $msg = 'data berhasil disimpan';
                        $this->cart->destroy();
                    }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 hapuspolylinejalan(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            if ($this->model_koordinatjalan->deletebyidjalan($this->input->post('id_jalan'))) {
                $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 viewpolylinejalan(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            if ($this->model_koordinatjalan->getbyidjalan($this->input->post('id_jalan'))->num_rows()!=null){
                $status = 'success';
                $msg = $this->model_koordinatjalan->getbyidjalan($this->input->post('id_jalan'))->result();
                $datajalan = $this->model_jalan->read($this->input->post('id_jalan'))->result();
            }else{
                $status = 'error';
                $msg = 'data tidak ditemukan';
                $datajalan = null;
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg,'datajalan'=>$datajalan)));
        }
    }
    //end crud koordinat jalan

Kalo udah semua sekarang kita coba buka dengan mengakses http://localhost/simplegis/index.php/admin/koordinatjalan

Sehingga tampilannya kayak gini.

polyline

14 thoughts on “Aplikasi GIS Geographic Information system berbasis codeigniter (polyline) final

  1. jonh Balas

    mas mau nanya… bagian array koordinat nya kq cuma bisa menyimpan 7 titik koordinat saja. Kira2 untuk lebih dari 7 bagaimana? trims

  2. Glady Balas

    boleh minta source codenya mas yang udah jadi lengkap?
    kalo boleh kirim email yoo mas. makasih

    • fadlur PenulisBalas

      diikuti saja langkah2nya mas. Sudah detail sekali kok, ada videonya juga.

  3. jovito Balas

    mas mau tanya kalo polyline pake 3 warna berbeda bisa ga ya? mkasih sblmnya…

    • fadlur PenulisBalas

      kalo per polyline bisa, tinggal ditambahi parameter warna saja. Jadi kalo yang di artikel warnanya diset default hitam, kalo mau berbeda warnanya diisi sesuai parameter.

      • jovito Balas

        makasih banyak mas, tapi mohon pencerahan scriptnya ๐Ÿ™‚ contoh kasus saya untuk 3 jenis pipa air dengan polyline 3 warna yang beda.

  4. Vito Balas

    maaf mas mau tanya ni untuk viewnya kenapa selalu keluar “Nama Jalan field is required” n waktu hapus juga sama, kecuali di bagian pilihan nama jalannya diisi baru bisa dihapus, mohon pencerahannya mas….

Tinggalkan Balasan

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