Belajar Codeigniter #Part 7: Login and Session

Diposting oleh pada tanggal
0

Belajar Codeigniter #Part 5: CRUD-Update and Delete

Diposting oleh pada tanggal
Logo Codeigniter, sumber cangkalinfo.blogspot.com


Assalamu alaikum warohmatullahi wabarokatuh.

 

CRUD Codeigniter (Update and Delete) - Pembaca yang Budiman, jumpa lagi di Gabutnotes. Senang sekali kita masih diberi kesempatan untuk berbagi ilmu semoga kalian mendapat manfaat dari sedikit yang kami bagikan ini.

 

Saat ini kita masih melanjutkan tutorial Belajar Codeigniter pada bagian CRUD, jika sebelumnya kita sudah membahas bagaimana cara untuk menampilkan data atau Read dan cara menambahkan data ke dalam database atau Create di Belajar Codeigniter #Part4 CRUD-Create and Read maka sekarang kita akan melanjutkannya dengan cara mengupdate dan menghapus data.

Di bawah ini garis besar isi artikel ini, simak terus gan:

1.    Membuat Model

2.    Membuat Controller

3.    Membuat Javascript (AJAX)

4.    Kesimpulan

 

1.    Membuat Model

 

Untuk membuat model kita masih menggunakan file model yang Siswa_model.php, hanya saja kita akan menambahkan dua function untuk mengubah data dan untuk menghapus data.

 

Ikuti langkahnya:

 

a.    Membuat fungsi Update

 

Buka model kita di application/models/Siswa_model.php. kemudian tuliskan kode berikut di bawah blok kode function add() yang sudah kita buat pada tutorial sebelumnya:

 

1
2
3
4
5
6
function update($data)
	{
		$this->db->where('id',$data['id']);
		$query = $this->db->update('siswa',$data);
		return $query;
	}

 

Penjelasan:

-      Pada function update kita beri parameter $data yang kita gunakan untuk menampung data yang dikirimkan dari controllers

 

-      Kemudian kita melakukan query menggunakan query builder dari Codeigniter, yang pertama kita menuliskan kondisinya terlebih dahulu dengan klausa where dan valuenya adalah $data[‘id’]. Karena $data adalah sebuah array maka untuk mendapatkan value id penulisannya jadi $data[‘id’].

 

-      Kemudian tuliskan query update dengan parameter pertama adalah nama tabel ‘siswa’ dan parameter kedua adalah data atau value nya.

 

b.    Membuat function Delete

 

Untuk melakukan query delete ke database maka tuliskan kodenya seperti berikut tepat di bawah blok kode function update (sebenarnya penempatannya bebas saja, tapi biar urut):

 

1
2
3
4
5
function delete($id)
	{
		$this->db->where('id',$id);
		$query = $this->db->delete('siswa');
	}

 

Penjelasan:

-      Pada function delete kita juga menggunakan parameter $id untuk menampung value id yang dikirimkan dari controllers.

 

-      Kemudian kita tuliskan kondisinya terlebih dahulu menggunakan klausa where dengan value id (nama field di dalam tabel) adalah $id (menampung id siswa yang akan dihapus).

 

-      Selanjutnya tuliskan query deletenya dengan parameter ‘siswa’ (nama tabel).

 

2.    Membuat Controller

 

Di dalam controllers kita akan membuat fungsi update dan delete juga, kita masih menggunakan controllers Admin yang sudah kita buat di tutorial sebelumnya.

 

a.    Membuat function Update

 

Tuliskan kode berikut di application/controllers/Admin.php tepat di bawah fungsi save:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
function update()
	{
		$data = array(	'id' => $this->input->post('id'),
						'nama' => $this->input->post('nama'),
						'nim' => $this->input->post('nim'),
						'foto' => 'foto'
					);
		$request = $this->sm->update($data);

		if ($request) {
			$result = array(
				'status' => 'success',
				'message' => 'Update Success'
			);
		}else{
			$result = array(
				'status' => 'failed',
				'message' => 'Update Failed'
			);
		}
		echo json_encode($result);
	}

Penjelasan:

-      Fungsi ini mirip sekali dengan fungsi add hanya saja perbedaannya kita juga menampung id pada variable array $data yang didapat dari inputan form.

 

-      Setelah itu kita melakukan request ke fungsi update di Siswa_model.

 

-      Setelah itu kita mengirimkan status dan message ke Javascript (fungsi update) dalam bentuk JSON sesuai dengan kondisi, jika berhasil atau true maka statusnya success dan jika false maka statusnya failed.

 

b.    Membuat function Delete

 

Untuk fungsi delete tuliskan kode di bawah ini di bawah blok kode function update:

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
function delete($id){
		if (isset($id)) {
			try
			{
				$request = $this->sm->delete($id);
				$result = array(
					'status' => 'success',
					'message' => 'Delete Success'
				);
				echo json_encode($result);
			}
			catch(Exception $e){

			}
		}else{
			$result = array(
				'status' => 'failed',
				'message' => 'Please provide an id'
			);
			echo json_encode($result);
		}
	}

 

Penjelasan:

-      Pada function delete kita juga menggunakan parameter $id untuk menampung id siswa yang akan dihapus.

 

-      Kemudian kita melakukan pengecekan jika value dari id tidak kosong maka melakukan request ke function delete pada Siswa_model.php kemudian mengirimkan pesan success ke Javascript dalam bentuk JSON jika proses update sudah berhasil.

 

-      Jika id kosong maka mengirimkan status failed dan message Please provide an id

 

3.    Membuat Javascript (AJAX request)

 

Sebelum mambuat script Javascript saya ingin memastikan beberapa hal terlebih dahulu di beberapa file berikut ini:

 

a.    application/views/siswa/tabel.php

 

Tuliskan kodenya seperti berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-body">
				<table id="example3" class="table table-bordered table-stripped display responsive wrap" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th>No</th>
							<th>Nama</th>
							<th>NIM</th>
							<th>Foto</th>
							<th>Aksi</th>
						</tr>
					</thead>
					<tbody>
						<?php 
						$i=1;
						foreach ($this->data['siswa'] as $key => $value): ?>
							<tr>
								<td><?php echo $i ?></td>
								<td><?php echo $value['nama'] ?></td>
								<td><?php echo $value['nim'] ?></td>
								<td><?php echo $value['foto'] ?></td>
								<td>
									<a class="btn btn-xs text-success" href="#modalSiswa" onclick="submit(<?php echo $value['id'] ?>)" data-toggle="modal">
										<i class="glyphicon glyphicon-edit"></i>Update
									</a><br>
									<a onClick="deleteConfirm('<?php echo site_url('admin/delete/'.$value['id']) ?>')"
										href="#!" class="btn btn-xs text-danger">
										<i class="glyphicon glyphicon-trash"></i>Delete
									</a>
								</td>
							</tr>
							<?php $i++; endforeach ?>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

Penjelasan:

-      secara keseluruhan tidak ada yang berubah dari kode sebelumnya hanya saja saya akan menekankan pada button update dan delete.

 

-      Pada button update ketika kita klik maka akan menjalankan function submit dan mengirimkan parameter berupa id siswa sekaligus memanggil form modal.

 

-      Pada button delete ketika di klik maka akan menjalankna fungsi deleteConfirm() dan mengirimkan parameter berupa url yang disertai id.

 

b.    application/views/layout/modal.php

 

Tuliskan kodenya seperti di bawah ini:

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!-- form siswa -->
<div class="modal fade" id="modalSiswa" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
	<div class="modal-content">
		<div class="modal-header text-center" style="background-color: lightblue">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			<h4 id="modal-title" class="modal-title w-100 font-weight-bold"><b>SISWA</b></h4>
		</div>
		<form actionrole="form" onSubmit="return false" enctype="multipart/form-data" id="formSiswa">
			<input type="hidden" name="id" id="id" value="">
			<div class="modal-body">
				<div class="form-group">
					<label>Nama</label>
					<input type="text" class="form-control" id="nama" name="nama" placeholder="Nama" placeholder="Nama Siswa">
				</div>
				<p id="nama_alert" style="color: red"></p>

				<div class="form-group">
					<label>NIM</label>
					<input type="text" class="form-control" id="nim" name="nim" placeholder="NIM" placeholder="NIM">
				</div>
				<p id="nim_alert" style="color: red"></p>
			</div>
			<div class="modal-footer d-flex justify-content-center">
				<button class="btn btn-light" data-dismiss="modal">Cancel <i class="fa fa-times ml-1"></i></button>
				<button class="btn btn-info" id="btn-update" onclick="update()">Update <i class="fa fa-paper-plane-o ml-1"></i></button>
				<button class="btn btn-info" id="btn-add" onclick="add()">Save <i class="fa fa-paper-plane-o ml-1"></i></button>
			</div>
		</form>
	</div>
</div>
</div>
<!-- end of form siswa -->

<!-- modal delete -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Would you like to delete this data ?</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
      	<b>The data will deleted permanently!</b>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a id="btn-delete" class="btn btn-danger" href="#">Delete</a>
      </div>
    </div>
  </div>
</div>
<!-- end of modal delete -->

Penjelasan:

-      sebenarnya tidak ada yang berubah hanya saja saya akan menjelaskan pada modal form tambah siswa yang mempunyai id modalSiswa pada button update ketika ada event onclick maka memanggil fungsi update().

 

-      Selanjutnya pada modal deleteModal pastikan pada button Delete mempunyai id btn-delete

Selanjutnya kita akan membuat fungsi AJAX requestnya di file application/views/layout/js.php:

a.    Function Update

 

Di bawah blok kode add() pada file application/views/layout/js.php tuliskan kode seperti berikut:

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function update(){
		if ($('#nama').val()=='') {
			$('#nama_alert').text('This field can not be empty').fadeIn().delay(5000).fadeOut()
		}else if($('#nim').val()==''){
			$('#nim_alert').text('This field can not be empty').fadeIn().delay(5000).fadeOut()
		}else{
			$('#btn-update').html("<i class='fa fa-spinner fa-spin'></i> Updating...");
			$('#btn-update').attr('disabled',true);
			var formData = new FormData($('#formSiswa')[0]);

			$.ajax({
				type:'POST',
				data: formData,
				contentType: false,
				processData: false,
				url: '<?php echo base_url('index.php/admin/update') ?>',
				dataType: 'JSON',
				success: function(hasil){
					if (hasil.status == 'success') {
						$('#modalSiswa').modal('hide')
						refreshTabel()
						$("#success-message").html(hasil.message).fadeIn().delay(5000).fadeOut()
						$("[name='id']").val('');
						$("[name='nama']").val('');
						$("[name='nim']").val('');
					}
				}
			})
		}
	}

 

Penjelasan:

-      Seperti fungsi add() pertama kita validasi terlebih dahulu inputan dari form, jika data sudah lengkap maka kita melakukan ajax request, hanya saja url nya berbeda, yaitu kita arahkan ke index.php/admin/update.

 

-      Adapun keseluruhan kode di fungsi add dan fungsi update hampir sama.

 

b.    Membuat function Delete

 

Kemudian tepat di bawah blok kode fungsi update tuliskan kode javascript di bawah ini:

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
function deleteConfirm(url){
		$('#deleteModal').modal();

		$('#btn-delete').on('click',function(){
			$.ajax({
				type:'POST',
				contentType: false,
				processData: false,
				url: url,
				dataType: 'JSON',
				success: function(hasil){
					if (hasil.status == 'success') {
						$('#deleteModal').modal('hide')
						refreshTabel()
						$("#success-message").html(hasil.message).fadeIn().delay(5000).fadeOut()
					}
				}
			})
		})
	}

 

Penjelasan:

-      Saya menamainya deleteConfirm karena fungsi ini menjadi satu antara konfirmasi delete dan request delete itu sendiri.

 

-      Fungsi deleteConfirm mempunyai parameter url yang menampung url yang kita kirimkan dari event button delete di file tabel.php.

 

-      Ketika button delete yang berada di file tabel.php di klik maka akan memunculkan modal deleteModal. Kemudian di dalam modal konfirmasi ada button delete lagi yang mempunyai id btn-delete ,   ketika button delete di klik maka akan menjalankan AJAX request.

 

-      Pada AJAX request ini tidak mengirimkan data hanya saja memanggil url yang sudah kita sematkan dalam parameter yaitu menuju index.php/admin/delete/id.

 

4.    Kesimpulan

Kesimpulannya dengan menggunakan AJAX memungkinkan kita untuk melakukan request ke server secara asynchronous sehingga untuk proses CRUD tidak perlu reload untuk menampilkan perubahan datanya.

 

Untuk selanjutnya kita akan membahas Upload Foto di artikel selanjutnya yang berjudul Belajar Codeigniter #Part6: Upload Foto.

 

Terimakasih sudah membaca, untuk mendapatkan info terbaru mengenai artikel yang saya posting kalian bisa klik ‘Langganan’ di pojok kiri atas.


Lokasi: Indonesia
Web Developer, passionate in PHP, Python and NodeJS

Komentar

Posting Komentar