Belajar Codeigniter #Part 7: Login and Session

Diposting oleh pada tanggal
0

Belajar Codeigniter #Part 4 : CRUD-Create and Read

Diposting oleh pada tanggal


Logo Codeigniter, sumber cangkalinfo.blogspot.com


Assalamu alaikum warohmatullahi wabarokatuh.

Bagaimana kabar pembaca semuanya? Saya harap baik-baik selalu.

CRUD Codeigniter (Create and Read) - Kali ini kita memasuki tutorial ke 4, tutorial ini masih lanjutan dari yang kita bahas sebelumnya yaitu mengenai templating menggunakan Bootstrap, emmm bagi kalian yang nyasar di tutorial ini kalian bisa membaca tutorial part 3 yang berjudul Templating Menggunakan Bootstrap. Biar tambah nyambung kalian mesti baca dari awal Part 1.

 

Pada tutorial kali ini kita akan membahas mengenai CRUD (Create Read Update Delete). Tapi untuk kali ini kita hanya membahas mengenai Create dan Read data, Update dan Delete InsyaAllah akan saya bahas di artikel selanjutnya biar tidak terlalu Panjang.

Oya kita juga akan menggunakan AJAX untuk CRUD, yang fungsinya bisa melakukan request ke server secara asynchronous dan tidak perlu refresh halaman setiap habis input, ubah atau delete data.

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


  1. Membuat Model
  2. Membuat Controller
  3. Membuat Form dan Javascript (AJAX)
  4. Membuat tabel untuk menampilkan data
  5. Kesimpulan

1.    Membuat Model

Seperti yang sudah saya jelaskan sebelumnya bahwa peran model adalah melakukan transaksi dengan database, dan di tutorial kali ini saya tidak akan benyak membahas mengenai pengertian lagi, saya akan lebih banyak membahas penjelasan kode yang saya gunakan.

Ikuti langkahnya:

 

a.    Buat file model

Buka file project kalian kemudian menuji ke direktori application/models di dalam folder models buat file dengan nama Siswa_model.php.

 

b.    Menuliskan fungsi getAll(), getById() dan save()

Sebenarnya untuk nama fungsi bebas saja yang penting merepresentasikan kegunaan fungsi itu sendiri, 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
<?php 
/**
 * 
 */
class Siswa_model extends CI_Model
{
	
	function __construct()
	{
		parent::__construct();
		$this->load->database();
	}

	function getAll()
	{
		$this->db->select('*');
		$this->db->from('siswa');
		$data = $this->db->get();
		return $data->result_array();
	}

	function getById($id)
	{
		$this->db->select('*');
		$this->db->from('siswa');
		$this->db->where('id',$id);
		$data = $this->db->get();
		return $data;
	}

	function save($data)
	{
		$query = $this->db->insert('siswa',$data);
		return $query;
	}
}


 ?>

 

Penjelasan:

-      Langkah awal kita membuat sebuah Class yang namanya kita buat sama persis dengan nama filenya yaitu Class Siswa_model yang meng extends kelas induknya yaitu CI_Model, ini kelas bawaan dari Codeigniter.

-      Kemudian di dalam construct kita meload library database yang akan memudahkan kita dalam menulis query nantinya.

-      Di fungsi getAll() tuliskan query select * from siswa karena kita menggunakan library database() maka penulisannya jadi seperti di atas, fungsi ini mengembalikan data hasil query dalam bentuk array.

-      Hal yang sama dengan getById() hanya saja kita tambahkan parameter $id dan menuliskan query select * from siswa where id = $id dengan nilai $id berdasarkan value yang di pass dari controller.

-      Untuk function save() penulisan query insertnya mengikuti aturan di Codeigniter seperti di atas, adapun data yang diinputkan akan ditampung di parameter $data, fungsi ini mengembalikan nilai Boolean berupa true atau false yang ditampung pada variable $query.

 

2.    Membuat Controller

Di dalam controller kita akan membuat beberapa fungsi, kita masih menggunakan controller Admin yang sudah kita buat di tutorial sebelumnya, tuliskan kode berikut di application/controllers/Admin.php :

 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
59
60
61
62
63
64
65
66
67
68
69
<?php 
/**
 * 
 */
class Admin extends CI_Controller
{
	
	function __construct()
	{
		parent::__construct();
		$this->load->model('Siswa_model','sm');
	}

	function index()
	{
		$data = array( 'title' => 'Daftar Siswa',
					'isi' => 'siswa/list');

		$this->data['siswa'] = $this->allSiswa();

		$this->load->view('layout/wrapper', $data, $this->data);
	}

	function refreshTabel()
	{
		$this->data['siswa'] = $this->allSiswa();
		$this->load->view('siswa/tabel',$this->data);
	}

	function allSiswa()
	{
		$request = $this->sm->getAll();
		return $request;
	}

	function siswaById()
	{
		$id = $this->input->post('id');
		$request = $this->sm->getById($id);
		// var_dump($request);exit();
		echo json_encode($request->result());
	}

	function save()
	{
		$data = array(	'nama' => $this->input->post('nama'),
						'nim' => $this->input->post('nim'),
						'foto' => 'foto'
					);

		$request = $this->sm->save($data);
		
		if ($request) {
			$result = array(
				'status' => 'success',
				'message' => 'Input Success'
			);
		}else{
			$result = array(
				'status' => 'failed',
				'message' => 'Input Failed'
			);
		}
		echo json_encode($result);
	}
}


 ?>

Penjelasan:

-      Buat class dengan nama Admin yang meng exstends kelas indukannya yaitu CI_Coontroller, kelas ini juga bawaan dari Codeigniter.

-      Load Siswa_model dalam __construct() disini saya menggunakan nama alias ‘sm’ untuk Siswa_model yang saya letakkan di parameter kedua. Oya __construct() ini adalah konstruktor yang mana semua yang ada di dalamnya akan di load ketika class Admin dipanggil.

-      Kemudian di index() kita fokuskan untuk menampilkan data di view saja, karena kita membutuhkan data maka kita juga akan mempassing data ke view, kita membuat array dengan nama $this->data[] yang salah satu indexnya adalah ‘siswa’ , dan valuenya kita ambilkan dari fungsi allSiswa(). Setelah itu datanya kita passing di parameter ketiga pada script $this->load->view(‘layout/wrapper’, $data, $this->data);

-      Selanjutnya fungsi refreshTabel() ini berfungsi untuk memanggil tabel yang menampilkan data siswa, jika di fungsi index() kita menampilkan wrappernya atau kesemua halaman, maka di fungsi refreshTabel() kita hanya memanggil tabelnya saja, tujuannya buat merefresh ketika transaksi ajax selesai, jadi kita hanya merefresh tabelnya saja, tidak me reload semua halaman.

-      Untuk fungsi allSiswa() kita mengirim permintaan ke model tepatnya ke fungsi getAll() yang berada di model Siswa_model yang Namanya sudah saya aliaskan menjadi sm. Fungsi ini mengembalikan data hasil query.

-      Kemudian di fungsi siswaById() konsepnya sama dengan allSiswa() hanya saja kita mengirimkan variable $id ke fungsi getById() yang berada di model sm. Adapun variable $id ini kita dapatkan dari inputan form post. Fungsi ini akan menampilkan data dalam bentuk JSON, kenapa tidak ada return dan datanya dalam bentuk JSON ? karena yang akan mengkonsumsi fungsi ini nantinya adalah script ajax Javascript. Sebenarnya fungsi ini untuk keperluan update data namun sekalian saya buat karena style saya setelah membuat get all biasanya sekalian bikin get by id hehe.

-      Selanjutnya fungsi save(), di fungsi ini kita menangkap inputan sta dalam variable array $data, untuk foto sementara kita kasih value ‘foto’ terlebih dahulu karena kita akan membuat fungsi upload foto nantinya.

Setelah itu data kita kirimkan ke model tepatnya ke fungsi save() , setelah itu kita membuat sebuah kondisi jika requestnya berhasil maka variable $result akan menyimpan nilai status = success , dan message = Input Success, jika gagal maka status = failed dan pesannya Input Failed. Setelah itu variable array $result kita echo dalam bentuk JSON, karena $result ini nanti juga akan dikonsumsi oleh Javascript.

 

 

3.    Membuat Form dan Javascript (AJAX request)

a.    Membuat Form

Selanjutnya buka file modal.php yang berada di application/views/layout/modal.php karena rencananya semua form kita nanti akan menggunakan modal dan kita letakkan di file modal.php termasuk modal konfirmasi delete. Scriptnya adalah 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
<!-- 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 -->

Penjelasan:

Saya tidak akan memberikan banyak penjelasan di script html karena asumsi saya kalian sudah paham dengan HTML tag html dan atributnya, tapi bagian pentingnya di form ini kalian melihat ada tiga button yaitu button save ,update dan cancel karena rencananya kita akan menggunakan satu form ini untuk proses input dan update data.

Dan di button save ketika event onclick maka akan diarahkan ke fungsi add() yaitu fungsi javascript untuk simpan data. Adapun untuk button update ketika event onclick akan diarahkan ke fungsi update() di file javascript.

 b.    Membuat AJAX Request

Semua script Javascript nantinya akan kita letakkan di application/views/layout/js.php , tapi nanti kalian bisa memodifikasi lagi supaya lebih modular untuk sementara ini saya letakkan semua di js.php, langsung saja ketikkan 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script type="text/javascript">
	$(document).ready(function(){
		$('#success-message').hide()
		refreshTabel();
	})

	function refreshTabel(){
		$('#listSiswa').load("<?php echo site_url('admin/refreshTabel') ?>");
	}

	function submit(x){
		if (x=='add') {
			$('#btn-add').show();
			$('#btn-add').html('Add <i class="fa fa-paper-plane-o ml-1"></i>');
			$('#btn-add').attr('disabled',false);
			$('#btn-update').hide();
			$('#modal-title').html('<b>Add Siswa</b>');

			$("[name='id']").val('');
			$("[name='nama']").val('');
			$("[name='nim']").val('');
			// $('#nama_alert, #nim_alert').hide()
		}else{
			$('#btn-add').hide();
			$('#btn-update').show();
			$('#btn-update').attr('disabled',false);
			$('#btn-update').html('Update <i class="fa fa-paper-plane-o ml-1"></i>');
			$('#modal-title').html('<b>Update Siswa</b>');
			// $('#nama_alert, #nim_alert').hide()

			$.ajax({
				type:"POST",
				data:'id='+x,
				url:'<?php echo base_url('index.php/admin/siswaById') ?>',
				dataType:'JSON',
				success: function(data){
					console.log(data)
					$('[name="nama"]').val(data[0].nama);
					$('[name="nim"]').val(data[0].nim);
					$('[name="id"]').val(data[0].id);
				}
			})
		}
	}

	function add(){
		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-add').html("<i class='fa fa-spinner fa-spin'></i> Saving...");
			$('#btn-add').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/save') ?>',
				dataType : 'JSON',
				success : function(hasil){
					console.log(hasil)
					if (hasil.status == 'success'){
						$("#modalSiswa").modal('hide');
						refreshTabel();
						$("#success-message").html(hasil.message).fadeIn().delay(5000).fadeOut()
					}
				}
			})
		}
	}
</script>

Penjelasannya:

-      Paling atas kita membuat function ketika dokumen diload maka kita akan menghilangkan pesan , dan memanggil fungsi refreshTabel()

-      Selanjutnya kita membuat fungsi refreshTabel itu sendiri, yang mana isinya kita mengisi tag html yang mempunyai id ‘listSiswa’ dengan tabel yang akan kita buat nanti, adapun yang bertugas untuk memanggil view tabelnya adalah fungsi refreshTabel yang berada di controller Admin.

-      Kemudian kita membuat fungsi submit() yang mana fungsinya untuk memanipulasi beberapa dom yang berada di form di modal.php termasuk set title mengosongkan semua field jika kita mengirimkan value add pada parameter x ketika kita akan menambahkan data, kemudian ketika kita akan mengubah data maka akan melakukan ajax request ke admin/siswaById dan mengisikan data hasil querynya ke field field form yang berada di modal.php

-      Selanjutya adalah fungsi save() fungsi ini untuk mengirim data dari form ke controller, sebelum data dikirim dilakukan validasi terlebih dahulu jika nama atau nim kosong maka akan mengeluarkan peringatan yang mana peringatan itu dilakukan dengan cara memanipulasi dom html berdasarkan id nya, tmabahan informasi untuk menginisialisasi id maka menggunakan tanda #.

 

Setelah lolos validasi maka kita akan menyimpan semua datanya di variable formData, kita menggunakan FormData untuk mengambil semua inputan form yang mana formnya nanti kita beri id formSiswa

 

Setelah itu kita melakukan ajax request ke controller admin/save untuk mengirim data, setelah sukses maka akan menyembunyikan modal dan menampilkan pesan sukses.

 

4.    Membuat Tabel untuk Menampilkan Data

Langkah selanjutnya adalah membuat view untuk menampilkan datanya, langkahnya seperti berikut:

a.    Buka file application/views/siswa/list.php dan ubah kodenya seperti berikut ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="content-wrapper">
	<section class="content-header">
		<h1>
			List Siswa
			<a class="btn btn-info btn-xs pull-right" href="#modalSiswa" onclick="submit('add')" data-toggle="modal">
				<i class="fa fa-plus"></i> <span>Add Siswa</span>
			</a>
		</h1>

	</section>

	<p id="success-message" class="text-center text-success"></p>
	<section class="content" id="listSiswa">

	</section>
</div>

Penjelasan:

-      Komponen pentingnya adalah button submit yang ketika di klik akan mengeksekusi function submit() yang baru saja kita buat di file js.php, dengan mengirimkan parameter ‘add’, kemudian pada hrefnya kita merujuk ke id modal #modalSiswa yang artinya apabila di klik akan memunculkan modal form input data siswa

-      Kemudian kita menyediakan tempat untuk menampilkan pesan di tag p dengan id success-message

-      Selanjutnya kita sediakan sebuah section untuk meletakkan tabelnya, namun kosongi saja dulu dan beri id listSiswa

 

b.    Selanjutnya buat file baru dengan nama tabel.php  di application/views/siswa/tabel.php kemudian ketikkan kode 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
<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:

-      Pada dasarnya kita hanya menampilkan data dalam tabel menggunakan perulangan foreach, adapun datanya kita peroleh dari $this->data[‘siswa’] yang mana itu adalah data yang kita passing cari controller admin/index maupun admin/refreshTabel

-      Kemudian di button update ketika di klik akan menampilkan form modal, di waktu yang bersamaan akan memanggil fungsi submit namun parameter yang dikirim bukan ‘add’ melainkan sebuah id, yang mana id tersebut akan digunakan sebagai parameter untuk melakukan ajax request ke controller admin/siswaById dan hasil datanya akan dimasukkan ke dalam field field form.

-      Untuk button delete akan saya jelaskan di artikel selanjutnya InsyaAllah hehe

 

5.    Kesimpulan

Kesimpulannya kalian simpulkan sendiri ya, saya harap tulisan saya mudah dipahami, namun jika ada kesulitan kalian bisa tanyakan di kolom komentar.

Adapun demo hasilnya seperti berikut:




Untuk selanjutnya kita akan membahas Update dan Delete di artikel selanjutnya yang berjudul Belajar Codeigniter #Part5: CRUD-Update dan Delete,

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


Web Developer, passionate in PHP, Python and NodeJS

Komentar

Posting Komentar