CRUD Codeigniter dan Ajax, Update Data

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website,pada kesempatan kali ini saya akan melanjutkan artikel sebelumnya tentang CRUD Codeigniter dan Ajax, Delete Data dan yang terakhir kita akan membuat CRUD Codeigniter dan Ajax, Update Data proses terakhir ini memang agak panjang ya teman – teman. 🙂

Pertama kita tambahkan button update nya terlebih dahulu di dalam fungsi data_customer()

CRUD Codeigniter dan Ajax, Update Data

Kemudian kita buat proses menampilkan data pada modal

//GET update
    $('#show_data').on('click','.item_update',function()
{
            var id=$(this).attr('data');
            $.ajax({
            type : "GET",
            url  : "<?php echo base_url()?>index.php/data_customer/get_update",
            dataType : "JSON",
            data : {id:id},
              success: function(data){
                  $.each(data,function(id,nama_customer, telepon, alamat,kota,total_belanja){
                      $('#modal_update').modal('show');
                      $('[name="nama"]').val(data.nama_customer);
                      $('[name="tlp"]').val(data.telepon);
                      $('[name="almt"]').val(data.alamat);
                      $('[name="kota"]').val(data.kota);
                      $('[name="total"]').val(data.total_belanja);
                      $('#id_update').val(data.id);
                  });
              }
            });
        });

Buat metod di dalam file Controller/Data_customer.php dengan nama get_update() seduai request ajaxnya

function get_update()
{
        $id=$this->input->get('id');
        $data=$this->main_model->get_by_id('data_customer',$id);
        echo json_encode($data);
    }

Dan buat metod di dalam Models/Main_model.php dengan nama get_by_id()

public function get_by_id($table,$id)
	{
		return $this->db->get_where($table, array('id' => $id))->row();
    }

Dan berikan modal bootstrapnya pada view nya

<!--MODAL Update-->
  <div class="modal fade" id="modal_update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel">Update Data</h4>
              </div>
              <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="nama">Nama</label>
                    <input type="text" class="form-control" name="nama" id="nama" placeholder="Masukkan Nama" required autofocus>
                  </div>
                  <div class="form-group">
                    <label for="tlp">Telepon</label>
                    <input type="text" class="form-control" name="tlp" id="tlp" placeholder="Masukkan Nomor Telepon" required autofocus>
                  </div>
                  <div class="form-group">
                    <label for="alamat">Alamat</label>
                    <input type="text" class="form-control" name="almt" id="alamat" placeholder="Masukkan Alamat" required autofocus>
                  </div>
                  <div class="form-group">
                    <label for="kota">Kota</label>
                    <input type="text" class="form-control" name="kota" id="kota" placeholder="Masukkan Kota" required autofocus>
                  </div>
                  <div class="form-group">
                    <label for="total">Total Belanja</label>
                    <input type="text" class="form-control" name="total" id="total" placeholder="Masukkan Total Belanja" required autofocus>
                    <input type="hidden" id="id_update" name="id_update">
                  </div>
                  <button type="submit" class="btn btn-primary" id="update">Update</button>
                </form>
              </div>
          </div>
      </div>
  </div>

Langkah terakhir adalah buat proses update nya

//update data
$(document).on('click','#update',function(e){
        e.preventDefault()
        var nama= $('[name="nama"]').val();
        var nama= $('[name="nama"]').val();
        var tlp=$('[name="tlp"]').val();
        var alamat= $('[name="almt"]').val();
        var kota=$('[name="kota"]').val();
        var total=$('[name="total"]').val();
        var id_update=$('[name="id_update"]').val();
        $.ajax({
            type : "POST",
            url  : "<?php echo base_url()?>index.php/data_customer/update",
            data : {nama:nama , tlp:tlp, alamat:alamat,kota:kota,total:total,id_update:id_update},
            success: function(data){
                $('.modal').modal('hide');
                data_customer();
            }
        });
    });

Kemudian kita buat metod di dalam Controller dan Models nya

function update()
{
    	$id = $this->input->post('id_update');
		$data = array(
	        'nama_customer' => $this->input->post('nama'),
	        'telepon' 		=> $this->input->post('tlp'),
	        'alamat' 		=> $this->input->post('alamat'),
	        'kota' 			=> $this->input->post('kota'),
	        'total_belanja'	=>$this->input->post('total')
		);

        $this->main_model->update_data('data_customer',$data,$id);
    }
public function update_data($table,$data,$id)
	{
		$this->db->where('id', $id);
		return $this->db->update($table, $data);
    }

Jika sudah save dan jalankan pada browsernya, saya akan coba klik button update pada data dengan nama ‘Reno’

CRUD Codeigniter dan Ajax, Update Data

Kemudian saya akan update pada setiap value form updatenya

CRUD Codeigniter dan Ajax, Update Data

Nah demikianlah fitur CRUD Codeigniter dan Ajax, Update Data dan di gabungkan dengan artikel sebelumnya sehingga fitur CRUD dengan Ajax dan Codeigniter berhasil kita buat. Tentu kita akan berjumpa kembali pada artikel selanjutnya, yang nantinya kita akan belajar membuat fitur CRUD live dengan ajax dan codeigniter. Semoga bermanfaat dan sampai jumpa.

 

Hernowo Author

Leave a Reply

Your email address will not be published. Required fields are marked *