Cara Update Data Codeigniter dengan Modal Bootstrap
06 Oktober 2016
22 Komentar
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.
- Cara Cepat Membuat Login dengan Codeigniter
- Cara Gampang Menghilangkan index.php pada Codeigniter
- Cara Membuat CRUD Codeigniter : Menampilkan Data
- Cara Mudah Input Data Codeigniter dengan Modal Bootstrap
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">×</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">×</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">×</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">×</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 </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 </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 </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
pke modal memang bisa lebih menghemat code dan form,,
BalasHapustapi akan lebih bagus lagi jika dikombinasikan dengan ajax
siaap, untuk selanjutnya nanti saya akan coba buat untuk ajaxnya, terima kasih masukannyaa :)
BalasHapusKalau deletenya gimana master ?
BalasHapuskalau ada combobox dinamis di form editnya gmana yaa??
BalasHapusthx gan bermanfaat sekali
BalasHapussaya udh ngikutin tutorial diatas, tpi ko datanya gk muncul saat edit yah..
BalasHapusbisa juga, tinggal masukin saja comboboxnya, sama kayak cara normal kok
BalasHapusmasih dalam tahap pengerjaan, mohon ditunggu ya
BalasHapusgan pas update kok digua engga keambil id nya ya?knp yaa gan?help
BalasHapusTrima kasih mas. Semoga terus diupdate tutorial ini.
BalasHapuspas update data mengarah ke id yang pertama terus gan kenapa ya?
BalasHapusgan buat tutorial yg bagian editnya dong
BalasHapusmaster buat tutorial yg bagian deletenya juga ya..
BalasHapusmin permisi modalnya tidak mau keluar? bagaimana solusinya terimakasih
BalasHapuscoba perhatikan di bagian ini Tambah. data targetnya harus sesuai dengan id yang di bagian . semoga membantu. terima kasih
BalasHapuskok 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 ?
BalasHapusbang kalau mau nampilin detail data ke modal berdasarkan ID gimana ya ?.... ?
BalasHapusbagaimana cara set value di dropdown list (select) ?
BalasHapusgan, klo untuk foto sma combo box gmna?
BalasHapusGan, 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$this->db->update('orang', $data);
BalasHapusorang .maksudnya apa ya dan variabel di dari mana
di tombol edit href="javasrcipt:;" itu maksudnya apa ya...?
BalasHapus