Cara Update Data Codeigniter dengan Modal Bootstrap

Update data sudah pasti dibutuhkan dalam suatu manajemen sistem informasi. Update data codeigniter digunakan untuk melakukan perubahan data jika ada kesalahan dalam input data codeigniter. Ada berbagai macam cara yang digunakan untuk melakukan update data melalui codeigniter, ada yang membuat halaman baru, ada yang menggunakan ajax, ada pula yang menggunakan popup modal bootstrap seperti yang akan kita bahas saat ini, dan masih banyak cara-cara yang lainnya.

Pertama kali saya belajar menggunakan modal bootstrap ini untuk update data codeigniter, saya sangat kebingungan karena data yang ingin diubah tidak muncul ke dalam form, tidak tahu bagaimana caranya, sudah banyak saya cari tutorial kesana kemari tetap saja tidak dapat. Untuk itu, agar teman-teman tidak mengalami yang sudah saya alami, maka dari itu saya membuat tutorial ini. Lalu Apa kelebihannya jika kita menggunakan modal boostrap? Secara garis besar kita tidak perlu membuat banyak halaman baru untuk melakukan input maupun update data. Untuk itu simak dan pahami dengan baik tutorial kali ini tentang Cara Update Data Codeigniter dengan Modal Bootstrap.


Persiapan Update Data Codeigniter dengan Modal Bootstrap

Tutorial ini adalah tutorial yang melanjutkan dari pembahasan sebelumnya tentang CRUD codeigniter, setelah menampilkan data, insert data, sekarang saatnya update data. Lalu apa saja persiapan yang dibutuhkan untuk tutorial kali ini? Berikut adalah hal yang harus dipersiapkan untuk tutorial kali ini.

Baca dan implementasi tutorial sebelumnya tentang CRUD Codeigniter.
Hanya itu saja yang diperlukan dalam persiapan Update Data Codeigniter dengan Modal Bootstrap, tidak sulit dan juga tidak begitu mudah.

Tutorial Update Data Codeigniter dengan Modal Bootstrap

Setelah semua persiapan dilakukan, sekarang saatnya untuk melanjutkan tutorial ini.

Controller

Pertama-tama bukalah file controller dengan nama admin.php yang berada di applications/controller. Kemudian tambahkan script ini dibawah fungsi tambah.

function ubah(){
 $id = $this->input->post('id');
    $data = array(
        'nama'  => $this->input->post('nama'),
        'alamat' => $this->input->post('alamat'),
        'pekerjaan' => $this->input->post('pekerjaan')
    );
    $this->model_admin->ubah($data,$id);
    $this->session->set_flashdata('notif','<div class="alert alert-success" role="alert"> Data Berhasil diubah <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
    redirect('admin');
}

Fungsi diatas berguna untuk melakukan mengambil data dari input pengguna dan melakukan updating. Saya akan jelaskan sedikit, pertama-tama id akan dimasukkan kedalam variable id dengan cara :


$id = $this->input->post('id');

Kemudian Input Data dari pengguna akan dimasukkan kedalam array $data melalui :
    $data = array(
        'nama'  => $this->input->post('nama'),
        'alamat' => $this->input->post('alamat'),
        'pekerjaan' => $this->input->post('pekerjaan')
    );

Setelah itu data dan id akan dikirim ke model untuk updating data ke database dan akan kembali lagi ke halaman admin dengan cara berikut :


    $this->model_admin->ubah($data,$id);
    $this->session->set_flashdata('notif','<div class="alert alert-success" role="alert"> Data Berhasil diubah <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
    redirect('admin');

Setelah digabung dengan fungsi sebelumnya maka akan menjadi seperti berikut ini.

Source Code Controller Admin.php


<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Admin extends CI_Controller{
 function __construct(){
  parent::__construct();
  $this->load->model('model_admin');
  $session = $this->session->userdata('login'); 
        if($session != 'login'){
            $this->load->view('view_login');
        }
 }
 function index(){
  $data=array(
   'data' => $this->model_admin->orang()
  );
  $this->load->view('view_admin',$data);
 }
 function tambah(){
        $data = array(
            'nama'  => $this->input->post('nama'),
            'alamat' => $this->input->post('alamat'),
            'pekerjaan' => $this->input->post('pekerjaan')
        );
        $this->model_admin->tambah($data);
        $this->session->set_flashdata('notif','<div class="alert alert-success" role="alert"> Data Berhasil ditambahkan <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
        redirect('admin');
    }
    function ubah(){
     $id = $this->input->post('id');
        $data = array(
            'nama'  => $this->input->post('nama'),
            'alamat' => $this->input->post('alamat'),
            'pekerjaan' => $this->input->post('pekerjaan')
        );
        $this->model_admin->ubah($data,$id);
        $this->session->set_flashdata('notif','<div class="alert alert-success" role="alert"> Data Berhasil diubah <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
        redirect('admin');
    }
}

Model

Hal berikutnya yang harus dilakukan adalah menambah fungsi model yang digunakan untuk update database. Sekarang buka model_admin.php yang berada di applications/model, kemudian tambahkan script ini dibawah fungsi tambah.


function ubah($data, $id){
    $this->db->where('id',$id);
    $this->db->update('orang', $data);
    return TRUE;
}

Saya jelaskan sedikit, sekarang lihatlah parameter pada fungsi ubah ada $data dan $id, kedua variabel tersebut di dapat dari controller ubah sebelumnya yang berisi data yang di input oleh pengguna. Kemudian tabel orang akan di update dengan kondisi dimana terdapat data dengan id yang sama.

Setelah digabung dengan file sebelumnya maka akan menjadi seperti berikut ini.


<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Model_admin extends CI_Model{
    function __construct(){
        parent::__construct();
    }
    function orang(){
        $query = $this->db->get('orang');
        return $query->result_array();
    }
    function tambah($data){
        $this->db->insert('orang', $data);
        return TRUE;
    }
    function ubah($data, $id){
        $this->db->where('id',$id);
        $this->db->update('orang', $data);
        return TRUE;
    }
}


View

Nah, untuk bagian view akan sedikit lebih banyak ada beberapa hal yang harus dilakukan. Sekarang bukalah view_admin.php yang berada di applications/view.

Button Update Data Codeigniter

Pertama-tama kita buat button yang digunakan untuk mengubah datanya nanti, dengan cara, cari dan gantilah script dibawah ini :


<a href="#" class="btn btn-info">Ubah</a>

Menjadi
<a 
    href="javascript:;"
    data-id="<?php echo $dt['id'] ?>"
    data-nama="<?php echo $dt['nama'] ?>"
    data-alamat="<?php echo $dt['alamat'] ?>"
    data-pekerjaan="<?php echo $dt['pekerjaan'] ?>"
    data-toggle="modal" data-target="#edit-data">
    <button  data-toggle="modal" data-target="#ubah-data" class="btn btn-info">Ubah</button>
</a>

Script diatas digunakan untuk membuat button yang berfungsi untuk memanggil popup modal bootstrap dengan id edit-data dan menyimpan variabel-variabel data agar dapat muncul di form modal nantinya.

Modal Update Data Codeigniter

Kemudian sama seperti tutorial sebelumnya, kita buat script untuk membuat modal akan tetapi saat ini setiap inputnya diberikan id. Letakkan script untuk membuat modal dibawah modal tambah yang sudah kita buat sebelumnya, buatlah script modal ubah menjadi seperti berikut ini.


<!-- Modal Ubah -->
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="edit-data" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">Ubah Data</h4>
            </div>
            <form class="form-horizontal" action="<?php echo base_url('admin/ubah')?>" method="post" enctype="multipart/form-data" role="form">
             <div class="modal-body">
                     <div class="form-group">
                         <label class="col-lg-2 col-sm-2 control-label">Nama</label>
                         <div class="col-lg-10">
                          <input type="hidden" id="id" name="id">
                             <input type="text" class="form-control" id="nama" name="nama" placeholder="Tuliskan Nama">
                         </div>
                     </div>
                     <div class="form-group">
                         <label class="col-lg-2 col-sm-2 control-label">Alamat</label>
                         <div class="col-lg-10">
                          <textarea class="form-control" id="alamat" name="alamat" placeholder="Tuliskan Alamat"></textarea>
                         </div>
                     </div>
                     <div class="form-group">
                         <label class="col-lg-2 col-sm-2 control-label">Pekerjaan</label>
                         <div class="col-lg-10">
                             <input type="text" class="form-control" id="pekerjaan" name="pekerjaan" placeholder="Tuliskan Pekerjaan">
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer">
                     <button class="btn btn-info" type="submit"> Simpan&nbsp;</button>
                     <button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
                 </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- END Modal Ubah -->


jQuery Update Data Codeigniter

Kemudian yang terakhir yaitu membuat script berupa jQuery yang digunakan untuk passing data dari button yang kita buat tadi ke modal bootstrap. Letakkan dibawah modal ubah yang sudah dibuat sebelumnya. Buat seperti berikut ini.

source code

<script>
    $(document).ready(function() {
        // Untuk sunting
        $('#edit-data').on('show.bs.modal', function (event) {
            var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
            var modal          = $(this)

            // Isi nilai pada field
            modal.find('#id').attr("value",div.data('id'));
            modal.find('#nama').attr("value",div.data('nama'));
            modal.find('#alamat').html(div.data('alamat'));
            modal.find('#pekerjaan').attr("value",div.data('pekerjaan'));
        });
    });
</script>


Penjelasan

Saya jelaskan sedikit, script diatas khusus dibuat hanya untuk modal yang mempunyai id edit-data, kemudian perhatikan pada tombol yang kita buat :


data-id="<?php echo $dt['id'] ?>"
data-nama="<?php echo $dt['nama'] ?>"
data-alamat="<?php echo $dt['alamat'] ?>"
data-pekerjaan="<?php echo $dt['pekerjaan'] ?>"

disana terdapat data-id, data-nama, data-alamat, dan data-pekerjaan. Variabel-variabel inilah yang nantinya digunakan untuk mendapatkan datanya di jQuery yang sudah dibuat. Sekarang perhatikan script yang ada di jQuery ini.


modal.find('#id').attr("value",div.data('id'));
modal.find('#nama').attr("value",div.data('nama'));
modal.find('#alamat').html(div.data('alamat'));
modal.find('#pekerjaan').attr("value",div.data('pekerjaan'));

Maksud dari script diatas adalah dia akan mencari id yang sama yang terdapat di input modal kemudian dia akan menuliskan data yang didapat dari tombol sebelumnya. Contohnya :

Misalnya script jQuery yang dijalankan adalah yang ini


modal.find('#nama').attr("value",div.data('nama'));

Maka pada modal bootstrap dia akan mencari id="nama" seperti dibawah ini
<input type="text" class="form-control" id="nama" name="nama" placeholder="Tuliskan Nama">

Kemudian akan mengambil data pada tombol
data-nama="<?php echo $dt['nama'] ?>"

dan menuliskannya pada input diatas. Bagaimana sudah paham bukan alurnya? Maka setelah semuanya digabung akan menjadi seperti berikut ini.

Source Code full view_admin.php

<!DOCTYPE html>
<html>
<head>
 <title>Membuat CRUD Dengan CodeIgniter | https://sugrahaku.com</title>
 <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap.min.css')?>">
 <script src="<?php echo base_url('assets/js/jquery-3.1.1.min.js');?>"></script>
 <script src="<?php echo base_url('assets/js/bootstrap.min.js');?>"></script>
</head>
<body>
 <div class="container">
  <h1 class="text-center">Data Orang</h1>
  <p class="text-center">Selamat Datang, <?php echo $this->session->userdata("username"); ?></p>
  <div class="form-group text-right">
   <a data-toggle="modal" data-target="#tambah-data" class="btn btn-primary">Tambah</a>
   <a class="btn btn-warning" href="<?php echo base_url('index.php/login/logout'); ?>">Logout</a>
  </div>
  <?=$this->session->flashdata('notif')?>
  <table class="table table-striped table-bordered">
   <thead>
    <tr>
     <th>No.</th>
     <th>Nama</th>
     <th>Alamat</th>
     <th>Pekerjaan</th>
     <th>Aksi</th>
    </tr>
   </thead>
   <tbody>
    <?php $no=0; foreach ($data as $dt){ ?>
    <tr>
     <td><?php echo ++$no;?></td>
     <td><?php echo $dt['nama'];?></td>
     <td><?php echo $dt['alamat'];?></td>
     <td><?php echo $dt['pekerjaan'];?></td>
     <td>
      <a 
                            href="javascript:;"
                            data-id="<?php echo $dt['id'] ?>"
                            data-nama="<?php echo $dt['nama'] ?>"
                            data-alamat="<?php echo $dt['alamat'] ?>"
                            data-pekerjaan="<?php echo $dt['pekerjaan'] ?>"
                            data-toggle="modal" data-target="#edit-data">
                            <button  data-toggle="modal" data-target="#ubah-data" class="btn btn-info">Ubah</button>
                        </a>
      <a href="#" class="btn btn-danger">Hapus</a>
     </td>
    </tr>
    <?php } ?>
   </tbody>
  </table>
 </div>
 <!-- Modal Tambah -->
 <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="tambah-data" class="modal fade">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                 <h4 class="modal-title">Tambah Data</h4>
             </div>
             <form class="form-horizontal" action="<?php echo base_url('admin/tambah')?>" method="post" enctype="multipart/form-data" role="form">
              <div class="modal-body">
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Nama</label>
                          <div class="col-lg-10">
                              <input type="text" class="form-control" name="nama" placeholder="Tuliskan Nama">
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Alamat</label>
                          <div class="col-lg-10">
                           <textarea class="form-control" name="alamat" placeholder="Tuliskan Alamat"></textarea>
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Pekerjaan</label>
                          <div class="col-lg-10">
                              <input type="text" class="form-control" name="pekerjaan" placeholder="Tuliskan Pekerjaan">
                          </div>
                      </div>
                  </div>
                  <div class="modal-footer">
                      <button class="btn btn-info" type="submit"> Simpan&nbsp;</button>
                      <button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
                  </div>
                 </form>
             </div>
         </div>
     </div>
 </div>
 <!-- END Modal Tambah -->
 <!-- Modal Ubah -->
 <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="edit-data" class="modal fade">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                 <h4 class="modal-title">Ubah Data</h4>
             </div>
             <form class="form-horizontal" action="<?php echo base_url('admin/ubah')?>" method="post" enctype="multipart/form-data" role="form">
              <div class="modal-body">
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Nama</label>
                          <div class="col-lg-10">
                           <input type="hidden" id="id" name="id">
                              <input type="text" class="form-control" id="nama" name="nama" placeholder="Tuliskan Nama">
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Alamat</label>
                          <div class="col-lg-10">
                           <textarea class="form-control" id="alamat" name="alamat" placeholder="Tuliskan Alamat"></textarea>
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Pekerjaan</label>
                          <div class="col-lg-10">
                              <input type="text" class="form-control" id="pekerjaan" name="pekerjaan" placeholder="Tuliskan Pekerjaan">
                          </div>
                      </div>
                  </div>
                  <div class="modal-footer">
                      <button class="btn btn-info" type="submit"> Simpan&nbsp;</button>
                      <button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
                  </div>
                 </form>
             </div>
         </div>
     </div>
 </div>
 <!-- END Modal Ubah -->
 <script>
     $(document).ready(function() {
         // Untuk sunting
         $('#edit-data').on('show.bs.modal', function (event) {
             var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
             var modal          = $(this)

             // Isi nilai pada field
             modal.find('#id').attr("value",div.data('id'));
             modal.find('#nama').attr("value",div.data('nama'));
             modal.find('#alamat').html(div.data('alamat'));
             modal.find('#pekerjaan').attr("value",div.data('pekerjaan'));
         });
     });
 </script>
</body>
</html>

Demo Update Data Codeigniter


Sekarang mari kita coba jalankan, petama-tama tuliskan pada url localhost/login, seilahkan login seperti biasanya kemudian lakukan update data seperti dibawah ini.



Kesimpulan

Bagaimana sudah paham bukan bagaimana caranya Update data Codeigniter dengan Modal Bootstrap? Waktu pertama kali dulu saya menggunakan foreach pada modalnya, jadi jika datanya ada 1000 maka sistem yang saya buat dahulu akan membuat browser yang digunakan crash. Itulah pengalaman saya, dan saya membagikan agar tidak ada yang mengalami kejadian yang seperti saya.

Baiklah akhir kata, jika ada yang ingin disampaikan atau ditanyakan dapat langsung bertanya di kolom komentar. Jika ada kesalahan saya mohon maaf, kepada Tuhan saya mohon ampun. Sekian dan Terima Kasih

22 Komentar untuk "Cara Update Data Codeigniter dengan Modal Bootstrap"

  1. pke modal memang bisa lebih menghemat code dan form,,
    tapi akan lebih bagus lagi jika dikombinasikan dengan ajax

    BalasHapus
  2. siaap, untuk selanjutnya nanti saya akan coba buat untuk ajaxnya, terima kasih masukannyaa :)

    BalasHapus
  3. Kalau deletenya gimana master ?

    BalasHapus
  4. kalau ada combobox dinamis di form editnya gmana yaa??

    BalasHapus
  5. thx gan bermanfaat sekali

    BalasHapus
  6. saya udh ngikutin tutorial diatas, tpi ko datanya gk muncul saat edit yah..

    BalasHapus
  7. bisa juga, tinggal masukin saja comboboxnya, sama kayak cara normal kok

    BalasHapus
  8. masih dalam tahap pengerjaan, mohon ditunggu ya

    BalasHapus
  9. gan pas update kok digua engga keambil id nya ya?knp yaa gan?help

    BalasHapus
  10. Trima kasih mas. Semoga terus diupdate tutorial ini.

    BalasHapus
  11. pas update data mengarah ke id yang pertama terus gan kenapa ya?

    BalasHapus
  12. gan buat tutorial yg bagian editnya dong

    BalasHapus
  13. master buat tutorial yg bagian deletenya juga ya..

    BalasHapus
  14. Alwi Assegaff16 Mei 2017 22.03

    min permisi modalnya tidak mau keluar? bagaimana solusinya terimakasih

    BalasHapus
  15. coba perhatikan di bagian ini Tambah. data targetnya harus sesuai dengan id yang di bagian . semoga membantu. terima kasih

    BalasHapus
  16. kok masih error ya , atau ini salah atau saya yg salah ? ini pake bootsrap versi berapa ? itu di view yg bagian button edit , data-targetnya #ubah-data atau edit-data ya ?

    BalasHapus
  17. bang kalau mau nampilin detail data ke modal berdasarkan ID gimana ya ?.... ?

    BalasHapus
  18. bagaimana cara set value di dropdown list (select) ?

    BalasHapus
  19. Bima Febriansyah18 Mei 2019 17.45

    gan, klo untuk foto sma combo box gmna?

    BalasHapus
  20. Gan, untuk yang ada combobox / dropdownnya sudah dibikin nggak? soalnya coba cara diatas bisa, cuma kalau ada comboboxnya datanya tidak terselek otomatis sesuai name. Terima kasih gan

    BalasHapus
  21. $this->db->update('orang', $data);
    orang .maksudnya apa ya dan variabel di dari mana

    BalasHapus
  22. di tombol edit href="javasrcipt:;" itu maksudnya apa ya...?

    BalasHapus

Jika ada pertanyaan, Mari kita diskusikan :)

Note : Komentar yang mengandung "SARA, Pornografi, Merugikan, Tidak Sopan, Berkata Kasar, Memasukan Link Aktif" akan saya hapus untuk menghindari SPAM. Berkomentarlah dengan komentar yang RELEVAN dengan artikel.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel