Tutorial Membuat Aplikasi CRUD Sederhana di PHP CodeIgniter

30 July 2017 09:04:54

Tutorial Membuat Aplikasi CRUD Sederhana di PHP CodeIgniter

CRUD merupakan sebuah istilah pada aplikasi yang memiliki fungsi pengolahan database dasar yang terdiri dari Create, Read, Update, dan Delete. Untuk menguasai teknik CRUD di CodeIgniter dengan baik, jangan lupa cek tutorial dasar di post sebelum-sebelumnya.. 

 

Pembuatan Database

Pertama-tama, buat sebuah database baru dengan nama bebas, lalu buat sebuah tabel dengan nama tb_karyawan. Tabel ini adalah tabel latihan yang akan kita gunakan untuk contoh aplikasi CRUD di PHP CodeIgniter kali ini. Copy script SQL berikut ini untuk pembuatan database dan data contoh :

CREATE TABLE tb_karyawan
(
	id INT PRIMARY KEY AUTO_INCREMENT,
	name VARCHAR(50),
	alamat VARCHAR(100),
	email VARCHAR(100),
	flag INT(1)
);

INSERT INTO tb_karyawan VALUES
(NULL, 'Christian Rosandhy', 'Jl Bedugul no 49', 'me@tianrosandhy.com', 1),
(NULL, 'Onyol Gunawan', 'Jl Baturiti no 35', 'me@onyol.com', 1),
(NULL, 'Semvag Vochonk', 'Jl Sesetan no 29', 'me@semvag.com', 1),
(NULL, 'Ray Michele', 'Jl Sampoerna no 141', 'me@ray.com', 1);

Setelah database dibuat, jangan lupa atur pengaturan koneksi databasenya di application/config/database.php.. Cukup isi di index user, password, dan dbname saja yang sesuai.

 

Pembuatan Controller dan View Dasar

Sekarang buat sebuah controller baru dengan nama Data.php, di method index() kita akan memanggil view dengan nama data_karyawan. Coding controller dan view seperti ini..

..
Class Data extends CI_Controller{
	public function index(){
		$this->load->view("data_karyawan",$data);
	}

}
<!doctype html>
<html lang="en">
<head>
	<base href="<?=base_url()?>">
	<meta charset="UTF-8">
	<title>Latihan CRUD</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

<div class="container">
	<h1>Latihan CRUD</h1>

	<a href="data/add" class="btn btn-primary">Tambah Data Karyawan</a>

	<table class="table">
		<thead>
			<tr>
				<th>#</th>
				<th>Nama Karyawan</th>
				<th>Alamat</th>
				<th>Email</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<!-- ISI DATA AKAN MUNCUL DISINI -->
			
		</tbody>
	</table>
</div>
	
</body>
</html>

 

Sampai disini, apabila kita mengakses controller data di http://localhost/ci_project/data , maka tampilannya adalah seperti berikut ini : 

CRUD Awal

 

 

Step 1 : Membuat CRUD Read

Karena sekarang kita sudah akan berurusan dengan pengolahan data, maka sekarang adalah waktu yang tepat untuk membuat sebuah model. Buat sebuah file dengan nama model_data.php di application/models/. Pertama-tama kita akan membuat sebuah method untuk membaca data di database. SQL untuk sudah pasti menggunakan query SELECT. Isi file model_data.php dengan script ini : 

//Model_data.php
defined('BASEPATH') OR exit('No direct script access allowed');

Class Model_data extends CI_Model{

	public function load_karyawan(){
		$sql = $this->db->query("SELECT * FROM tb_karyawan WHERE flag = 1");
		return $sql->result_array();
	}

}

Sebuah query dijalankan di CodeIgniter dengan menggunakan library db dan method query(). Hasil pengolahan query tersebut dapat dikembalikan dalam 2 bentuk, yaitu result_array() yang menampung data banyak baris, dan row_array() yang menampung data 1 baris. Karena data karyawan yang muncul bisa jadi lebih dari 1 baris, maka fungsi return yg digunakan untuk mengolah adalah result_array().

Sekarang kita akan kembali ke controller Data untuk memanggil model yang baru saja kita buat. Ubah method index() di Controller Data seperti berikut ini,, 

...
	public function index(){
		$this->load->model("model_data");
		$data['list_karyawan'] = $this->model_data->load_karyawan();

		$this->load->view("data_karyawan",$data);
	}
...

Sebelum sebuah model dapat digunakan di controller, model tersebut harus diload dulu sesuai dengan nama model yang ingin digunakan. Hasil pengolahan di method load_karyawan() tersebut disimpan di variabel $data dengan index ['list_karyawan']. Setelah itu variabel $data akan dikirim ke view data_karyawan agar menjadi variabel $list_karyawan. View data_karyawan sekarang sudah bisa kita sisipi script untuk memanggil isi datanya..

<!doctype html>
<html lang="en">
<head>
	<base href="<?=base_url()?>">
	<meta charset="UTF-8">
	<title>Latihan CRUD</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

<div class="container">
	<h1>Latihan CRUD</h1>

	<a href="data/add" class="btn btn-primary">Tambah Data Karyawan</a>
	<table class="table">
		<thead>
			<tr>
				<th>#</th>
				<th>Nama Karyawan</th>
				<th>Alamat</th>
				<th>Email</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<!-- ISI DATA AKAN MUNCUL DISINI -->
			<?php
			$no = 1; //untuk menampilkan no
			foreach($list_karyawan as $row){
				echo "
				<tr>
					<td>$no</td>
					<td>$row[name]</td>
					<td>$row[alamat]</td>
					<td>$row[email]</td>
					<td>
						<a href='data/edit/$row[id]' class='btn btn-sm btn-info'>Update</a>
						<a href='data/delete/$row[id]' class='btn btn-sm btn-danger'>Hapus</a>
					</td>
				</tr>
				";
				$no++;
			}
			?>
		</tbody>
	</table>
</div>
</body>
</html>

Pengulangan menggunakan fungsi foreach dari variabel yang dikirim controller. dalam perulangan foreach tersebut, nama variabel lokal dalamnya yang digunakan adalah $row. $row diisi index sesuai dengan nama field di tabel. Kalau berbeda sedikit aja pasti error, jadi harus cek hati-hati.. Sampai disini, tampilannya adalah seperti ini : 

Error Database

Ummm,, barangkali ada yang ketemu error ini? Ini adalah error yang muncul karena library $db tidak dikenal. Untuk mengatasinya, buka application/config/autoload.php. di bagian library, tambahkan array "database" agar library $db bisa digunakan. 

$autoload['library'] = array('database');

Kalau sudah dilakukan, atau tidak ada masalah dalam proses sebelumnya, maka fungsi Read sudah berhasil dijalankan..

Read hasil

 

 

Step 2 : Membuat CRUD Create

Setelah Read sukses dijalankan, sekarang kita akan membuat controller dan view baru sebagai form Create / Insert data. 

//lanjutan controller Data.php

...
	public function add(){
		$this->load->model("model_data");
		$data['tipe'] = "Add";

		$this->load->view("form_karyawan",$data);
	}
...
<!doctype html>
<html lang="en">
<head>
	<base href="<?=base_url()?>">
	<meta charset="UTF-8">
	<title>Latihan CRUD</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<h1><?=$tipe?> Karyawan</h1>
		
		<form method="post" class="form-horizontal">
			<div class="form-group">
				<label class="control-label col-sm-2">
					Nama
				</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" name="nama" value="">
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2">
					Alamat					
				</label>
				<div class="col-sm-10">
					<textarea name="alamat" class="form-control"></textarea>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2">
					Email					
				</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" name="email" value="">
				</div>
			</div>
			<center>
				<button name="tombol_submit" class="btn btn-primary">
					Simpan
				</button>
			</center>


		</form>
	</div>
</body>
</html>

$data['tipe'] itu untuk apa? yah, anggap saja itu sebagai variabel bantuan untuk menentukan form_karyawan sedang digunakan dalam keadaan Tambah Data (Add) atau Ubah Data (Edit). Karena view form_karyawan.php tersebut akan digunakan untuk fungsi add data dan edit data secara bersamaan. Form actionnya sengaja tidak dibuat, agar proses data ketika tombol btn diklik diproses dalam halaman controller yang sama. Biar nggak error, pastikan masing-masing attribute name di seluruh tag input, textarea, dan button sudah diisi ya..

Add Karyawan Form

Dengan asumsi variabel inputan yang diperlukan untuk proses input data adalah hanya $_POST, maka kita akan membuat model untuk memproses input data di model_data.php

...
	public function simpan($post){
		//pastikan nama index post yang dipanggil sama seperti di form input
		$nama = $this->db->escape($post['nama']);
		$alamat = $this->db->escape($post['alamat']);
		$email = $this->db->escape($post['email']);

		$sql = $this->db->query("INSERT INTO tb_karyawan VALUES (NULL, $nama, $alamat, $email, 1)");
		if($sql)
			return true;
		return false;
	}
...

fungsi $this->db->escape() adalah sebuah fungsi yang digunakan untuk escaping dan memberi tanda petik pada inputan. Tujuannya adalah supaya query berjalan lebih aman dan terhindar dari SQL Injection. Selebihnya, query INSERT dilakukan dengan fungsi $this->db->query() seperti biasa, dan mengembalikan nilai true jika sudah berjalan dengan baik. Sekarang, setelah model dibuat, kita atur agar controller data method add memanggil model tersebut hanya jika tombol button dengan name tombol_submit diklik.

...

	public function add(){
		$this->load->model("model_data");
		$data['tipe'] = "Add";

		if(isset($_POST['tombol_submit'])){
			//proses simpan dilakukan
			$this->model_data->simpan($_POST);
			redirect("data");
		}

		$this->load->view("form_karyawan",$data);
	}
...

fungsi isset()nya PHP ini akan sangat berguna sekali di CI untuk kedepannya. isset() akan mengecek apakah variabel yang disebutkan didalamnya tersebut ada atau tidak. Bila ada, maka model_data akan dipanggil dengan inputan $_POST. Setelah itu fungsi redirect() digunakan untuk mengirim pengguna kembali ke halaman data (http://localhost/ci_project/data). Silakan dicoba dulu, jika sudah, maka data yang kita input di kolom tadi akan masuk ke database, dan terlihat di tampilan data karyawan sebelumnya.

 

 

Step 3 : Membuat CRUD Update 

Di PHP biasa pun, membuat update itu susah-susah gampang. susah karena harus ada pengecekan id unik, tapi gampang karena bisa copy paste script dari fungsi Insert data. Untung saja CodeIgniter menggunakan konsep MVC, sehingga view form_karyawan yang digunakan di fungsi tambah data tadi bisa juga digunakan untuk fungsi update. Tentunya dengan sedikit perubahan. Iya, cuma sedikit.. Pertama-tama kita buat dulu controller method edit seperti ini : 

...
	public function edit($id){
		$this->load->model("model_data");
		$data['tipe'] = "Edit";

		$this->load->view("form_karyawan",$data);
	}
...

Sampai disini saja, tampilannya adalah seperti berikut kalau kita mengklik tombol Update Data : 

Form Edit Masih KosongMerasa ada yang aneh? Ya, form update / edit pada umumnya adalah menampilkan nilai default di kolom yang sudah ada sesuai dengan yang diisi di database. Artinya, kita perlu membuat model baru untuk mendapatkan data apa saja yang dimiliki karyawan dengan id sekian? ID Sekian tersebut untungnya bisa kita ambil dari parameter $id pada controller. 

...
	public function get_default($id){
		$sql = $this->db->query("SELECT * FROM tb_karyawan WHERE id = ".intval($id));
		if($sql->num_rows() > 0)
			return $sql->row_array();
		return false;
	}
...

Kalau di Read tadi, output query dipanggil dengan fungsi result_array() karena baris data yang muncul banyak. Tapi karena saat ini kita hanya memanggil data dengan 1 ID saja, artinya kita harus menggunakan row_array() yang akan menampilkan data 1 baris. Sekarang, panggil method tersebut, dan simpan dalam variabel $data['default'] untuk dikirim ke view form_karyawan.

...
	$data['default'] = $this->model_data->get_default($id);
	//yang penting diletakkan sebelum load view
...

Nah, bagian selanjutnya ini agak tricky.. $data['default'] ketika dikirim ke view akan menjadi $default kan? Artinya data nama diakses dengan $default['name'], data alamat diakses dengan $default['alamat'], dan data email diakses dengan $default['email']. Masalahnya adalah, kalau kita mengisi sembarangan di view tersebut untuk update data, maka tampilan di tambah data akan error karena variabel $default tidak dipanggil. Kok bisa? Ya karena viewnya cuma 1, tapi dipake di 2 controller (add dan edit). Disinilah peran fungsi PHP isset sangat berguna..

Di semua tag ada attribute valuenya kan? kita sisipkan tag PHP disana menjadi seperti ini : 

<input type="text" class="form-control" name="nama" value="<?=isset($default['name'])? $default['name'] : ""?>">

Hal yang sama juga dilakukan dengan Textarea alamat, dan input email.. Pastikan nama index di $default[''] menyesuaikan dengan nama di database ya..

Sampai sini, jika pemanggilan sudah dilakukan dengan tepat, maka data yang bersangkutan akan muncul secara default ketika kita mengklik edit. 

Tampilan Edit Karyawan

Last step, mirip seperti di insert tadi,, kali ini dengan asumsi inputan untuk update yang dibutuhkan adalah $_POST dan $id yang bersangkutan. Sekarang buat model untuk update data agar dipanggil dengan cara yang sama seperti method add sebelumnya..

...
	public function update($post, $id){
		//parameter $id wajib digunakan agar program tahu ID mana yang ingin diubah datanya.
		$nama = $this->db->escape($post['nama']);
		$alamat = $this->db->escape($post['alamat']);
		$email = $this->db->escape($post['email']);

		$sql = $this->db->query("UPDATE tb_karyawan SET name = $nama, alamat = $alamat, email = $email WHERE id = ".intval($id));

		return true;
	}
...

Dan jangan lupa di controller data method edit kita sisipkan pengecekan tombol juga dengan nama model update.

...
		if(isset($_POST['tombol_submit'])){
			$this->model_data->update($_POST, $id);
			redirect("data");
		}
...

Sampai disini kalau setiap langkah-langkahnya diikuti dengan lengkap, pasti datanya bisa ngupdate kok.

 

 

Last Step : CRUD Delete 

Akhirnya udah di tahap terakhir juga.. CRUD Delete adalah yang paling gampang dibanding sisa-sisanya tadi.. Kita hanya perlu membuat model query hapus yang tepat saja.. Buat method baru di model_data

...	
	public function hapus($id){
		$sql = $this->db->query("UPDATE tb_karyawan SET flag = 0 WHERE id = ".intval($id));
	}
...

Lho? query hapus kok pake fungsi update? Iya.. jadi data yang dihapus itu nggak harus pake query delete.. Cukup ubah flagnya dari 1 menjadi 0 saja.. Toh di query select bagian pertama tadi memanggil dengan SELECT * FROM tb_karyawan WHERE flag = 1; Artinya, tabel dengan flag 0 nggak akan ditampilkan dan dianggap sudah terhapus. Cara hapus ini terbilang sangat aman, karena ketika kita salah menghapus berarti datanya masih bisa dikembalikan hanya dengan mengubah flagnya saja. Sekarang kita buat controller hapus yang memanggil model tersebut dan kemudian redirect ke halaman awal.

...
	public function delete($id){
		$this->load->model("model_data");
		$this->model_data->hapus($id);
		redirect("data");
	}
...

Hapus Data

Seperti inilah yang terjadi ketika tombol delete ditekan..

 

 

Demikian tutorial CRUD sederhana dengan CodeIgniter. Untuk yang sudah mencoba tapi masih error-erroran, bisa download file demo jadinya aja disini.. 

18 September 2018 21:59:40 Joy Malam bagus postingan, tp alangkah baiknya tutorilnya bisa di copy paste agar bisa di praktekkan, dan apabila page tidak bs di copas jng nulis di artikel suruh copas create table data base. ingalah ilmu semakin bertambah dan semakin bermanfaat bila di salurkan dan di gunakan orang lain, jng takut kepinteran kita di ambil orang lain. thnks
18 October 2018 13:49:00 Vincensius bedanya buat CRUD pake CI dan laravel apa aja ya? gampangan yang mana kak?
19 October 2018 14:57:23 Administrator Beda banget.. CodeIgniter itu framework sederhana, lebih cocok untuk aplikasi skala kecil menengah, sedangkan Laravel lebih cocok untuk skala menengah keatas. Kalau saya nyoba pribadi sih, ya jelas lebih enak Laravel karena lebih rapi dan lebih lengkap. Tapi kalau konsep OOPnya masih belum terlalu fasih, disaranin bermain-main di CI aja dulu.. :)
3
0
SHARE

Contact Me