Aplikasi GIS Geographic Information system berbasis web (codeigniter) – bagian VI

31 Dec, 2020 | Ditulis oleh : Fadlur Rohman

Rekomendasi Kelas
Membangun Toko Online Menggunakan Laravel

Laravel adalah salah framework php dengan pengguna terbanyak. Dengan banyaknya pengguna otomatis ketika kita menghadapi error akan lebih mudah menemukan solusin...

Halo, sekarang kita akan membuat CRUD data jembatan. Sama seperti pada CRUD data jalan, CRUD data jembatan juga berada dalam folder admin. Baik itu file controller maupun file viewsnya. CRUD Jembatan disini hanya dibutuhkan file controller Jembatan.php dan file views formjembatan.php.

# Jembatan.php

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

class Jembatan extends CI_Controller{

    public function __construct()
    {
        parent::__construct();
        //kita load model yang dibutuhkan, yaitu model jembatan
        $this->load->model(array('model_jembatan'));
        $this->load->helper('url');
        $this->load->library('form_validation');
    }

    function index()
    {
        $data = array('content' => 'admin/formjembatan',//kita buat file formjembatan di dalam folder views/admin
        'itemjembatan'=>$this->model_jembatan->getAll());
        $this->load->view('templates/template-admin', $data);
    }
}

Buat juga folder admin di folder views dan tambahkan file formjembatan.php di dalam folder admin tadi.

# formjalan.php

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-sm-4">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-list-alt"></span> Form Jembatan</h3>
              </div>
              <div class="panel-body">
                  <form action="#">
                      <div class="form-group">
                        <label for="namajembatan">Nama Jembatan</label>
                        <input type="text" class="form-control" id="namajembatan" placeholder="">
                        <input type="hidden" name="id_jembatan" id="id_jembatan" value="">
                      </div>
                      <div class="form-group">
                        <label for="keterangan">Keterangan</label>
                        <textarea name="keterangan" class="form-control" id="keterangan"></textarea>
                      </div>
                      <div class="form-group">
                        <button type="button" name="simpanjembatan" id="simpanjembatan" class="btn btn-primary">Simpan</button>
                        <button type="button" name="resetjembatan"  id="resetjembatan" class="btn btn-warning">Reset</button>
                        <button type="button" name="updatejembatan" id="updatejembatan" class="btn btn-info" disabled="true">Update</button>
                      </div>
                  </form>
              </div>
            </div>
        </div>
        <div class="col-md-8 col-sm-8">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Daftar Jembatan</h3>
              </div>
              <div class="panel-body">
                  <table class="table table-bordered">
                      <th>No</th>
                      <th>Nama Jembatan</th>
                      <th>Keterangan</th>
                      <th></th>
                      <tbody id="daftarjembatan">
                          <?php
                          $no = 1;
                          foreach ($itemjembatan->result() as $jembatan) {
                              ?>
                              <tr>
                                  <td><?php echo $no;?></td>
                                  <td><?php echo $jembatan->namajembatan;?></td>
                                  <td><?php echo $jembatan->keterangan;?></td>
                                  <td>
                                      <button type="button" class="btn btn-sm btn-info" data-idjembatan="<?php echo $jembatan->id_jembatan;?>" name="editjembatan<?php echo $jembatan->id_jembatan;?>" id="editjembatan"><span class="glyphicon glyphicon-edit"></span></button>
                                      <button type="button" class="btn btn-sm btn-danger" data-idjembatan="<?php echo $jembatan->id_jembatan;?>" name="deletejembatan<?php echo $jembatan->id_jembatan;?>" id="deletejembatan"><span class="glyphicon glyphicon-trash"></span></button>
                                  </td>
                              </tr>
                              <?php
                              $no++;
                          }
                           ?>
                      </tbody>
                  </table>
              </div>
            </div>
        </div>
    </div>
</div>

Kemudian akses dengan alamat : localhost/simplegis/index.php/admin/jembatan

Sehingga tampak halaman seperti berikut :

Untuk memproses CRUD kita buat function untuk create, read, update, dan delete.

Pada bagian paling bawah file formjembatan.php tambahkan script seperti berikut :

# function simpan dan reset

 

<script>
    $(document).on('click','#simpanjembatan',simpanjembatan)
    .on('click','#resetjembatan',resetjembatan)
    .on('click','#updatejembatan',updatejembatan)
    .on('click','#editjembatan',editjembatan)
    .on('click','#deletejembatan',deletejembatan);
    function simpanjembatan() {//simpan jembatan
        var datajembatan = {'namajembatan':$('#namajembatan').val(),
        'keterangan':$('#keterangan').val()};console.log(datajembatan);
        $.ajax({
            url : '<?php echo site_url("admin/jembatan/create");?>',
            data : datajembatan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('#daftarjembatan').load('<?php echo current_url()." #daftarjembatan > *";?>');
                    resetjembatan();//form langsung dikosongkan pas selesai input data
                }else{
                    alert(data.msg);
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
            }
        })
    }
    function resetjembatan() {//reset form jembatan
        $('#namajembatan').val('');
        $('#keterangan').val('');
        $('#id_jembatan').val('');
        $('#simpanjembatan').attr('disabled',false);
        $('#updatejembatan').attr('disabled',true);
    }
</script>

Buka kembali file Jembatan.php dan tambahkan function create();

# function create()

 

function create(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('namajembatan', 'Nama Jembatan', 'trim|required');
            $this->form_validation->set_rules('keterangan', 'Keterangan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                if ($this->model_jembatan->create()) {
                    $status = 'success';
                    $msg = "Data jembatan berhasil disimpan";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat menyimpan data jembatan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }

# function editjembatan()

 

function editjembatan() {//edit jembatan
        var id = $(this).data('idjembatan');
        var datajembatan = {'id_jembatan':id};console.log(datajembatan);
        $('input[name=editjembatan'+id+']').attr('disabled',true);//biar ga di klik dua kali, maka di disabled
        $.ajax({
            url : '<?php echo site_url("admin/jembatan/edit");?>',
            data : datajembatan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('input[name=editjembatan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
                    $('#simpanjembatan').attr('disabled',true);
                    $('#updatejembatan').attr('disabled',false);
                    $.each(data.msg,function(k,v){
                        $('#id_jembatan').val(v['id_jembatan']);
                        $('#namajembatan').val(v['namajembatan']);
                        $('#keterangan').val(v['keterangan']);
                    })
                }else{
                    alert(data.msg);
                    $('input[name=editjembatan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
                $('input[name=editjembatan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
            }
        })
    }

Tambahkan juga function edit() pada file controller Jembatan.php

# function edit()

function edit(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('id_jembatan', 'ID Jembatan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jembatan');
                if ($this->model_jembatan->read($id)->num_rows()!=null) {
                    $status = 'success';
                    $msg = $this->model_jembatan->read($id)->result();
                }else{
                    $status = 'error';
                    $msg = "Data jembatan tidak ditemukan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }

# function updatejembatan()

function updatejembatan() {//update jembatan
        var datajembatan = {'namajembatan':$('#namajembatan').val(),
        'keterangan':$('#keterangan').val(),
        'id_jembatan':$('#id_jembatan').val()};console.log(datajembatan);
        $.ajax({
            url : '<?php echo site_url("admin/jembatan/update");?>',
            data : datajembatan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('#daftarjembatan').load('<?php echo current_url()." #daftarjembatan > *";?>');
                    resetjembatan();//form langsung dikosongkan pas selesai input data
                }else{
                    alert(data.msg);
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
            }
        })
    }

Tambahkan juga function update() pada file controller Jembatan.php

# function update()

function update(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('namajembatan', 'Nama Jembatan', 'trim|required');
            $this->form_validation->set_rules('keterangan', 'Keterangan', 'trim|required');
            $this->form_validation->set_rules('id_jembatan', 'ID Jembatan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jembatan');
                if ($this->model_jembatan->update($id)) {
                    $status = 'success';
                    $msg = "Data jembatan berhasil diupdate";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat mengupdate data jembatan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }

terakhir tambahkan function deletejembatan pada formjembatan.php

# function deletejembatan()

function deletejembatan() {//delete jembatan
        if (confirm("Anda yakin akan menghapus data jembatan ini?")) {
            var id = $(this).data('idjembatan');
            var datajembatan = {'id_jembatan':id};console.log(datajembatan);
            $.ajax({
                url : '<?php echo site_url("admin/jembatan/delete");?>',
                data : datajembatan,
                dataType : 'json',
                type : 'POST',
                success : function(data,status){
                    if (data.status!='error') {
                        $('#daftarjembatan').load('<?php echo current_url()." #daftarjembatan > *";?>');
                        resetjembatan();//form langsung dikosongkan pas selesai input data
                    }else{
                        alert(data.msg);
                    }
                },
                error : function(x,t,m){
                    alert(x.responseText);
                }
            })
        }
    }

Begitu juga file Jembatan.php tambahkan function delete()

# function delete()

 

function delete(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('id_jembatan', 'ID Jembatan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jembatan');
                if ($this->model_jembatan->delete($id)) {
                    $status = 'success';
                    $msg = "Data jembatan berhasil dihapus";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat menghapus data jembatan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }

Setelah selesai menambahkan function tersebut maka file formjembatan.php akan menjadi seperti berikut :

# formjembatan.php

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-sm-4">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-list-alt"></span> Form Jembatan</h3>
              </div>
              <div class="panel-body">
                  <form action="#">
                      <div class="form-group">
                        <label for="namajembatan">Nama Jembatan</label>
                        <input type="text" class="form-control" id="namajembatan" placeholder="">
                        <input type="hidden" name="id_jembatan" id="id_jembatan" value="">
                      </div>
                      <div class="form-group">
                        <label for="keterangan">Keterangan</label>
                        <textarea name="keterangan" class="form-control" id="keterangan"></textarea>
                      </div>
                      <div class="form-group">
                        <button type="button" name="simpanjembatan" id="simpanjembatan" class="btn btn-primary">Simpan</button>
                        <button type="button" name="resetjembatan"  id="resetjembatan" class="btn btn-warning">Reset</button>
                        <button type="button" name="updatejembatan" id="updatejembatan" class="btn btn-info" disabled="true">Update</button>
                      </div>
                  </form>
              </div>
            </div>
        </div>
        <div class="col-md-8 col-sm-8">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Daftar Jembatan</h3>
              </div>
              <div class="panel-body">
                  <table class="table table-bordered">
                      <th>No</th>
                      <th>Nama Jembatan</th>
                      <th>Keterangan</th>
                      <th></th>
                      <tbody id="daftarjembatan">
                          <?php
                          $no = 1;
                          foreach ($itemjembatan->result() as $jembatan) {
                              ?>
                              <tr>
                                  <td><?php echo $no;?></td>
                                  <td><?php echo $jembatan->namajembatan;?></td>
                                  <td><?php echo $jembatan->keterangan;?></td>
                                  <td>
                                      <button type="button" class="btn btn-sm btn-info" data-idjembatan="<?php echo $jembatan->id_jembatan;?>" name="editjembatan<?php echo $jembatan->id_jembatan;?>" id="editjembatan"><span class="glyphicon glyphicon-edit"></span></button>
                                      <button type="button" class="btn btn-sm btn-danger" data-idjembatan="<?php echo $jembatan->id_jembatan;?>" name="deletejembatan<?php echo $jembatan->id_jembatan;?>" id="deletejembatan"><span class="glyphicon glyphicon-trash"></span></button>
                                  </td>
                              </tr>
                              <?php
                              $no++;
                          }
                           ?>
                      </tbody>
                  </table>
              </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).on('click','#simpanjembatan',simpanjembatan)
    .on('click','#resetjembatan',resetjembatan)
    .on('click','#updatejembatan',updatejembatan)
    .on('click','#editjembatan',editjembatan)
    .on('click','#deletejembatan',deletejembatan);
    function simpanjembatan() {//simpan jembatan
        var datajembatan = {'namajembatan':$('#namajembatan').val(),
        'keterangan':$('#keterangan').val()};console.log(datajembatan);
        $.ajax({
            url : '<?php echo site_url("admin/jembatan/create");?>',
            data : datajembatan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('#daftarjembatan').load('<?php echo current_url()." #daftarjembatan > *";?>');
                    resetjembatan();//form langsung dikosongkan pas selesai input data
                }else{
                    alert(data.msg);
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
            }
        })
    }
    function resetjembatan() {//reset form jembatan
        $('#namajembatan').val('');
        $('#keterangan').val('');
        $('#id_jembatan').val('');
        $('#simpanjembatan').attr('disabled',false);
        $('#updatejembatan').attr('disabled',true);
    }
    function updatejembatan() {//update jembatan
        var datajembatan = {'namajembatan':$('#namajembatan').val(),
        'keterangan':$('#keterangan').val(),
        'id_jembatan':$('#id_jembatan').val()};console.log(datajembatan);
        $.ajax({
            url : '<?php echo site_url("admin/jembatan/update");?>',
            data : datajembatan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('#daftarjembatan').load('<?php echo current_url()." #daftarjembatan > *";?>');
                    resetjembatan();//form langsung dikosongkan pas selesai input data
                }else{
                    alert(data.msg);
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
            }
        })
    }
    function editjembatan() {//edit jembatan
        var id = $(this).data('idjembatan');
        var datajembatan = {'id_jembatan':id};console.log(datajembatan);
        $('input[name=editjembatan'+id+']').attr('disabled',true);//biar ga di klik dua kali, maka di disabled
        $.ajax({
            url : '<?php echo site_url("admin/jembatan/edit");?>',
            data : datajembatan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('input[name=editjembatan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
                    $('#simpanjembatan').attr('disabled',true);
                    $('#updatejembatan').attr('disabled',false);
                    $.each(data.msg,function(k,v){
                        $('#id_jembatan').val(v['id_jembatan']);
                        $('#namajembatan').val(v['namajembatan']);
                        $('#keterangan').val(v['keterangan']);
                    })
                }else{
                    alert(data.msg);
                    $('input[name=editjembatan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
                $('input[name=editjembatan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
            }
        })
    }
    function deletejembatan() {//delete jembatan
        if (confirm("Anda yakin akan menghapus data jembatan ini?")) {
            var id = $(this).data('idjembatan');
            var datajembatan = {'id_jembatan':id};console.log(datajembatan);
            $.ajax({
                url : '<?php echo site_url("admin/jembatan/delete");?>',
                data : datajembatan,
                dataType : 'json',
                type : 'POST',
                success : function(data,status){
                    if (data.status!='error') {
                        $('#daftarjembatan').load('<?php echo current_url()." #daftarjembatan > *";?>');
                        resetjembatan();//form langsung dikosongkan pas selesai input data
                    }else{
                        alert(data.msg);
                    }
                },
                error : function(x,t,m){
                    alert(x.responseText);
                }
            })
        }
    }
</script>

Dan file Jembatan.php akan menjadi seperti berikut :

# Jembatan.php

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

class Jembatan extends CI_Controller{

    public function __construct()
    {
        parent::__construct();
        //kita load model yang dibutuhkan, yaitu model jembatan
        $this->load->model(array('model_jembatan'));
        $this->load->helper('url');
        $this->load->library('form_validation');
    }

    function index()
    {
        $data = array('content' => 'admin/formjembatan',//kita buat file formjembatan di dalam folder views/admin
        'itemjembatan'=>$this->model_jembatan->getAll());
        $this->load->view('templates/template-admin', $data);
    }
    function create(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('namajembatan', 'Nama Jembatan', 'trim|required');
            $this->form_validation->set_rules('keterangan', 'Keterangan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                if ($this->model_jembatan->create()) {
                    $status = 'success';
                    $msg = "Data jembatan berhasil disimpan";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat menyimpan data jembatan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function edit(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('id_jembatan', 'ID Jembatan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jembatan');
                if ($this->model_jembatan->read($id)->num_rows()!=null) {
                    $status = 'success';
                    $msg = $this->model_jembatan->read($id)->result();
                }else{
                    $status = 'error';
                    $msg = "Data jembatan tidak ditemukan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function update(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('namajembatan', 'Nama Jembatan', 'trim|required');
            $this->form_validation->set_rules('keterangan', 'Keterangan', 'trim|required');
            $this->form_validation->set_rules('id_jembatan', 'ID Jembatan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jembatan');
                if ($this->model_jembatan->update($id)) {
                    $status = 'success';
                    $msg = "Data jembatan berhasil diupdate";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat mengupdate data jembatan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function delete(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('id_jembatan', 'ID Jembatan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jembatan');
                if ($this->model_jembatan->delete($id)) {
                    $status = 'success';
                    $msg = "Data jembatan berhasil dihapus";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat menghapus data jembatan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }

}

Proses CRUD Jembatan telah selesai, selanjutnya kita akan membuat sistem login menggunakan ion_auth library.

Terima kasih.




Related Post :

Restful API Menggunakan Laravel Framework

31 Dec, 2020 - Fadlur Rohman

Laravel telah dilengkapi fitur untuk membuat backend API, diantaranya:...

Sistem registrasi menggunakan codeigniter ion auth

31 Dec, 2020 - Fadlur Rohman

Sistem login untuk aplikasi simplegis sudah kita buat sebelumnya, untu...

Membuat sistem login menggunakan codeigniter ion auth

31 Dec, 2020 - Fadlur Rohman

Pada aplikasi simple gis yang kita buat, pengguna dapat mengakses hala...

Membuat Grafik Menggunakan CanvasJs

31 Dec, 2020 - Fadlur Rohman

Grafik digunakan untuk menampilkan ringkasan dari sekumpulan data, bia...

Rest Web Service Codeigniter Bagian Keempat (API KEY)

31 Dec, 2020 - Fadlur Rohman

Setelah kita membuat&nbsp;database&nbsp;untuk menyimpan data hasil mon...

Rest Web Service Codeigniter Bagian Ketiga (Database)

31 Dec, 2020 - Fadlur Rohman

Bagian Pertama Bagian Kedua Pada bagian ini kita akan mensetting konek...

Mau Bikin Aplikasi Web & Aplikasi Android?

Saya membuka jasa pembuatan aplikasi web dan android untuk aplikasi seperti toko online, monitoring (IoT), interface mesin absensi atau kasir

Silahkan kontak link di bawah ini untuk teknis dan harganya