Edit data dengan modal bootstrap codeigniter

Untuk melengkapi tutorial CRUD dengan codeigniter yang telah kita bahas pada bab-bab sebelumnya, maka tutorial kali ini kita akan membahas bagaimana mengupdate dan menghapus data dengan codeigniter dan ajax.

Update Data Codeigniter
Update data kali ini kita memanfaatkan controller Crud.php dan file view kelas.php yang sudah ada, mengupdate data berarti kita butuh sebuah form untuk menampilkan data yang kita panggil dari database MySQL yang kita pilih berdasarkan id nya.

- Advertisement -

Membuat Form Update Dengan Codeigniter
Buka file view kelas.php dan tambahkan from edit seperti berikut.

<!-- modal edit data -->
<div class="modal fade bs-example-modal-lg modal-edit" id="modal_edit" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xs">
  <div class="modal-content">

    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span>
      </button>
      <h4 class="modal-title" id="myModalLabel">Edit Data</h4>
    </div>
    <div class="modal-body">

    <form class="form-horizontal form-label-left" name="frm_edit" id="frm_edit" method="POST" action='<?php echo base_url()."crud/simpan_edit"; ?>'>
		<div class="item form-group">
		    <label class="control-label col-md-3 col-sm-3 col-xs-12">Kelas</label>
		    <div class="col-md-9 col-sm-9 col-xs-12">
				<input class="form-control" name="kelas" id="kelas" required="required" >
		    </div>
		</div>		
      	<div class="ln_solid"></div>
		<div class="form-group">
		    <div class="col-md-10 col-sm-10 col-xs-12 col-md-offset-10">
				<input type="hidden" name="id" id="id">
			  	<button type="submit" class="btn btn-success">Simpan</button>
		    </div>
		</div>
	</form> 
	
    </div>
  </div>
</div>
</div>

Kemudian jangan lupa tambahkan script javascript seperti berikut

//edit data
	 $('.edit').on("click",function() {
		 var id = $(this).attr('data-id');
		 $.ajax({						
				url : "<?php echo site_url('crud/edit/')?>"+id,
				type: "GET",
				dataType: "JSON",
				success: function(data)
				{	
					$('#id').val(data.id_kelas);						
					$('#kelas').val(data.kelas);						
					$('.modal-edit').modal('show'); 							
				}
			});	
	 });

Tahap selanjutnya adalah menambahkan method edit pada controller Crud.php, method edit ini nantinya digunakan untuk meng query ambil data dari database. Buka file controller Crud.php dan tambahkan code seperti berikut.

public function edit($id)
	{
		$sql ="SELECT * from tbl_kelas
				WHERE id_kelas=".$id."";
		$data= $this->db->query($sql)->row_array();
		echo json_encode($data);
	}

Sampai tahap ini kita telah berhasil memanggil data dari database dan menampilkannya pada form edit data. Selanjutnya kita perlu menambahkan method simpan_edit yang berguna untuk menyimpan update data ke dalam database.

Berikut adalah method simpan_edit() nya.

public function simpan_edit()
	{
		$id = $this->input->post('id');
		$data = array(
			'kelas'=> $this->input->post('kelas')
			);
		$this->db->update("tbl_kelas",$data,array("id_kelas"=>$id));
		redirect('crud/kelas','refres');
	}

Oke, sampai tahap ini kita telah berhasil memanggil data ke dalam form edit dan menyimpannya ke dalam database.

Menghapus Data Dengan Codeigniter
Untuk menghapus data maka pada file view kelas akan kita tambahkan code javascript untuk menjalankan hapus data. Buka file view kelas.php dan tambahkan javascript berikut.

//hapus data
	 $('.hapus').on("click",function() {
		 var id = $(this).attr('data-id');
		 $.ajax({
				url : "<?php echo site_url('crud/hapus/')?>"+id,
				type: "POST",
				success: function(data)
				{	
					window.location ="<?php echo site_url('crud/kelas')?>";							
				}
			 });	
	 });

Sehingga file view kelas.php setelah mengalami penambahan beberapa sintak html maupun javascript, maka tampilan lengkapnya akan berubah seperti berikut.

  <div class="">
	<div class="page-title">
	  <div class="title_right">
		<div class="col-md-12 col-sm-12 col-xs-12 form-group pull-right top_search">
		  <h3><?php echo (!empty($title)?$title:'');?></h3>
		</div>
	  </div>
	</div>

	<div class="clearfix"></div>

	<div class="row">
	  
	  <div class="col-md-12 col-sm-12 col-xs-12">
		<div class="x_panel">
		  <div class="x_title">
			<button class="btn btn-success" data-toggle="modal" data-target=".modal-add"  ><i class="fa fa-plus"></i> Tambah</button>
			<div class="clearfix"></div>
		  </div>
		  <div class="x_content">						
			<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
			  <thead>
				<tr>
				  <th width="10px">No.</th>
				  <th>Kelas</th>
				  <th>Aksi</th>
				</tr>
			  </thead>
			  <tbody>
				<?php echo $table;?>				
			  </tbody>
			</table>
			
			
		  </div>
		</div>
	  </div>
	</div>
  </div>
<!-- modal add data -->
<div class="modal fade bs-example-modal-lg modal-add" id="modal_add" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xs">
  <div class="modal-content">

    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span>
      </button>
      <h4 class="modal-title" id="myModalLabel">Tambah Data</h4>
    </div>
    <div class="modal-body">

    <form class="form-horizontal form-label-left" name="frm_add" id="frm_add" method="POST" action='<?php echo base_url()."crud/simpan_kelas"; ?>'>
		<div class="item form-group">
		    <label class="control-label col-md-3 col-sm-3 col-xs-12">Kelas</label>
		    <div class="col-md-9 col-sm-9 col-xs-12">
				<input class="form-control" name="kelas" required="required" >
		    </div>
		</div>		
      	<div class="ln_solid"></div>
		<div class="form-group">
		    <div class="col-md-10 col-sm-10 col-xs-12 col-md-offset-10">
			  	<button type="submit" class="btn btn-success">Simpan</button>
		    </div>
		</div>
	</form>
      
    </div>
  </div>
</div>
</div>

<!-- modal edit data -->
<div class="modal fade bs-example-modal-lg modal-edit" id="modal_edit" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xs">
  <div class="modal-content">

    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span>
      </button>
      <h4 class="modal-title" id="myModalLabel">Edit Data</h4>
    </div>
    <div class="modal-body">

    <form class="form-horizontal form-label-left" name="frm_edit" id="frm_edit" method="POST" action='<?php echo base_url()."crud/simpan_edit"; ?>'>
		<div class="item form-group">
		    <label class="control-label col-md-3 col-sm-3 col-xs-12">Kelas</label>
		    <div class="col-md-9 col-sm-9 col-xs-12">
				<input class="form-control" name="kelas" id="kelas" required="required" >
		    </div>
		</div>		
      	<div class="ln_solid"></div>
		<div class="form-group">
		    <div class="col-md-10 col-sm-10 col-xs-12 col-md-offset-10">
				<input type="hidden" name="id" id="id">
			  	<button type="submit" class="btn btn-success">Simpan</button>
		    </div>
		</div>
	</form> 
	
    </div>
  </div>
</div>
</div>
<script src="<?php echo base_url();?>assets/vendors/jquery/dist/jquery.min.js"></script>
<script>
 $(document).ready(function() {
	 //edit data
	 $('.edit').on("click",function() {
		 var id = $(this).attr('data-id');
		 $.ajax({						
				url : "<?php echo site_url('crud/edit/')?>"+id,
				type: "GET",
				dataType: "JSON",
				success: function(data)
				{	
					$('#id').val(data.id_kelas);						
					$('#kelas').val(data.kelas);						
					$('.modal-edit').modal('show'); 							
				}
			});	
	 });
	 //hapus data
	 $('.hapus').on("click",function() {
		 var id = $(this).attr('data-id');
		 $.ajax({
				url : "<?php echo site_url('crud/hapus/')?>"+id,
				type: "POST",
				success: function(data)
				{	
					window.location ="<?php echo site_url('crud/kelas')?>";							
				}
			 });	
	 });
 });
</script>

Tahap selanjutnya adalah kita perlu menambahkan method hapus pada controller Crud.php. Buka file controller Crud.php dan tambahkan methid seperti berikut.

public function hapus($id)
	{
		$this->db->delete("tbl_kelas",array("id_kelas"=>$id));			
	}

Sehingga setelah mengalami beberapa penambahan beberapa method, maka tampilan lengkap struktur code file controller Crud.php akan menjadi seperti berikut.

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

class Crud extends CI_Controller {

	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see https://codeigniter.com/user_guide/general/urls.html
	 */
	public function index()
	{
		$this->kelas();
	}
	
	public function kelas()
	{
		$data = array();
		$data['title'] ='Data Kelas CRUD (Create Read Update Delete Kelas)';
		$sql ="SELECT * from tbl_kelas order by id_kelas ASC";
		$hsl = $this->db->query($sql);		
		$data['table'] = '';
		$no=1;
		foreach($hsl->result_array() as $row){
			$data['table'] .= '<tr>
								  <td>'.$no++.'</td>
								  <td>'.$row['kelas'].'</td>
								  <td>
									<button type="button" class="btn btn-xs btn-success edit" data-id="'.$row['id_kelas'].'"><i class="fa fa-pencil"></i></button>				  
									<button type="button" class="btn btn-xs btn-danger hapus" data-id="'.$row['id_kelas'].'"><i class="fa fa-trash"></i></button>				  
								  </td>				  
								</tr>';
		}
		$data['content'] = 'crud/kelas';
		$this->load->view('dashboard/template',$data);
	}
	
	public function simpan_kelas()
	{
		$data = array(
					'kelas'=> $this->input->post('kelas')
				);
		$this->db->insert("tbl_kelas",$data);
		redirect('crud/kelas','refres');
	}	
	
	public function edit($id)
	{
		$sql ="SELECT * from tbl_kelas
				WHERE id_kelas=".$id."";
		$data= $this->db->query($sql)->row_array();
		echo json_encode($data);
	}
	
	public function simpan_edit()
	{
		$id = $this->input->post('id');
		$data = array(
					'kelas'=> $this->input->post('kelas')
				);
		$this->db->update("tbl_kelas",$data,array("id_kelas"=>$id));
		redirect('crud/kelas','refres');
	}
	
	public function hapus($id)
	{
		$this->db->delete("tbl_kelas",array("id_kelas"=>$id));			
	}
}

Sampai disini kita telah berhasil menyelesaikan CRUD update dan hapus data dengan codeigniter. Semoga tutorial kali ini bermanfaat dan membantu teman-teman dalam membuat aplikasi CRUD pada codeigniter. Terimakasih…