CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

CI Tuts #3 CRUD Sederhana

Setup Awal

Siapkan source code CodeIgniter di localhost. Apabila masih bingung gimana caranya, silakan
baca terlebih dahulu modul [CI Tuts #2 - Program Pertama dengan Codeigniter]
Buat database dengan nama codeigniter
Buat tabel dengan nama mahasiswa
Pada tabel mahasiswa, buat field berikut
Nama Field
Tipe Field
id
INT(11)
AUTO INCREMENT
PRIMARY
nim
VARCHAR(8)
nama
VARCHAR(50)
Catatan: nama database, nama tabel dan nama field huruf kecil semua

Buka file codeigniter/application/config/database.php lalu edit baris berikut:

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'codeigniter';
Catatan: username dan password sesuaikan dengan setting mysql pada saat pertama instal xampp. Secara default
setting untuk XAMPP seperti di atas.

Dalam modul ini kita akan belajar cara menampilkan data dari database ke browser, menambahkan
data, mengedit data dan menghapus data. File yang terlibat dalam modul ini diantaranya adalah:
application
|-- config
|-- autoload.php
|-- database.php
|-- controllers
|-- mahasiswa.php
|-- models
|-- mahasiswa_m.php
|-- views
|-- mahasiswa
|-- list.php
|-- detail.php
|-- form_tambah.php
|-- form_edit.php
Kita lihat, ada 8 file yang terlibat dalam program yang akan kita buat, 6 diantaranya kita buat sendiri.
File yang harus dibuat diantaranya adalah satu file controller bernama mahasiswa.php, satu file model
bernama mahasiswa_m.php, dan 4 file view yang disimpan di dalam subfolder bernama mahasiswa.
1

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

Menampilkan Daftar Data

Untuk pertama kali kita akan mencoba memanggil data dari database dan menampilkannya di dalam
aplikasi kita. Coba isikan beberapa data menggunakan phpMyAdmin. Berikut data yang saya isikan ke
dalam tabel mahasiswa:
id
nim
nama
[kosongkan]
0808538
Toni Haryanto
[kosongkan]
0907018
Andiyangita Widiagani
Codeigniter telah menyediakan library untuk memudahkan mengakses database. Untuk dapat
menggunakan library database, kita harus memuat terlebih dahulu library tersebut di dalam controller
atau model menggunakan sintaks $this->load->database();. Tapi supaya lebih sederhana, kita
akan memuat semua library dan helper standar di dalam file application/config/autoload.php. Buka
file tersebut kemudian edit beberapa baris berikut:
$autoload['libraries'] = array('database');

// baris 55

$autoload['helper'] = array('url');

// baris 67

Helper URL juga kita load di dalam file autoload. Helper ini berisi beberapa function yang sangat
membantu dalam memudahkan keperluan managemen URL.
Setelah itu buat sebuah file di dalam folder models/ dengan nama mahasiswa_m.php
models/mahasiswa_m.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Mahasiswa_m extends CI_Model {
/* get_all()
*
* fungsi ini mengambil semua data mahasiswa dari tabel
* mengembalikan satu atau beberapa data dalam bentuk objek
*
*/
public function get_all()
{
return $this->db->get('mahasiswa')->result();
}
}

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

Kemudian buat satu file di dalam folder controllers/ dengan nama mahasiswa.php
controllers/mahasiswa.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Mahasiswa extends CI_Controller {
function __construct()
{
parent::__construct();
// load class model mahasiswa_m
$this->load->model('mahasiswa_m');
}
/* index()
*
* fungsi default untuk controller
* dijalankan bila kita tidak menspesifikkan pemanggilan fungsi pada url
* fungsi ini menampilkan halaman daftar semua data mahasiswa
*
*/
public function index()
{
// ambil semua data mahasiswa
// lalu masukkan ke dalam index variabel $data
$data['mahasiswa'] = $this->mahasiswa_m->get_all();
// load view daftar mahasiswa
// dengan menyisipkan variabel $data
// untuk dipasang di dalam template view
$this->load->view('mahasiswa/list', $data);
}

Kita lihat disini fungsi index memanggil fungsi get_all() dari dalam model dan menyimpan hasilnya di
dalam variabel $data[mahasiswa]. Variabel $data kemudian dimuat ke dalam view bernama list untuk
kemudian ditampilkan di layar browser. Untuk itu kita buat dahulu file list.php di dalam folder
views/mahasiswa/.
views/mahasiswa/list.php
<html>
<body>
<h1>Daftar Mahasiswa</h1>
<table border="1">
<tr>
<th>No</th>
<th>NIM</th>
3

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

<th>Nama</th>
</tr>
<?php $i = 1; foreach ($mahasiswa as $value){ ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $value->nim; ?></td>
<td><?php echo $value->nama; ?></td>
</tr>
<?php $i++; }; ?>
</table>
</body>
</html>

Di dalam file view list.php kita memanggil variabel $mahasiswa yang tidak lain adalah representasi dari
indeks array $data[mahasiswa] yang dimuat dari controller. Isi dari variabel $mahasiswa itu kita loop
menggunakan sintaks foreach() dan menampilkan data dari tiap baris data mahasiswa ke dalam baris di
dalam tabel.
Sekarang coba panggil dari browser http://localhost/codeigniter/mahasiswa/index. Bila tampilannya
seperti ini berarti Kamu berhasil mengambil data dari database dan menampilkannya ke browser. ;)

Setelah Kamu berhasil menampilkan data di atas, kita akan coba menampilkan data individual dari
setiap data. Kalo tadi kita menampilkan semua data di dalam sebuah tabel, sekarang kita hanya akan
menampilkan detail satu data yang kita pilih di dalam satu halaman.
Tambahkan satu fungsi di dalam class model mahasiswa_m di dalam file models/mahasiswa_m.php
untuk mengambil satu data berdasarkan field id.

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

models/mahasiswa_m.php
/* get_by_id()
*
* fungsi ini mengambil data satu mahasiswa berdasarkan id
* mengembalikan satu baris data dalam bentuk objek
* parameter:
* $id
id data mahasiswa pada tabel kolom id
*
*/
public function get_by_id($id)
{
$this->db->where('id', $id);
return $this->db->get('mahasiswa')->row();
}

Kemudian tambahkan satu fungsi di dalam class controller di dalam file controllers/mahasiswa.php
untuk menampilkan halaman detail data.
controllers/mahasiswa.php
/* detail()
*
* fungsi ini menampilkan halaman detail data satu mahasiswa
* yang diacu oleh $id pada parameter
*
*/
public function detail($id = false)
{
// apabila fungsi ini dipanggil tanpa menyertakan parameter $id
// maka tampilkan halaman 404 Not Found
if(! $id) show_404();
// ambil satu data mahasiswa yang ber-id $id
// lalu simpan di dalam indeks pada variabel $data
$data['detail'] = $this->mahasiswa_m->get_by_id($id);
// load view detail mahasiswa
// dengan menyisipkan variabel $data
// untuk dipasang di dalam template view
$this->load->view('mahasiswa/detail', $data);
}

Fungsi detail di atas mengecek terlebih dahulu apakah parameter id diisi atau tidak. Kalo tidak diisi
maka kita tampilkan halaman error 404 Page not Found. Bila parameter $id diisi kita ambil satu data
mahasiswa menggunakan fungsi get_by_id() dari model, data mahasiswa yang ber-id $id. Data tersebut
kemudian disimpan di dalam variabel array $data[detail] dan memuatnya ke dalam view
mahasiswa/detail untuk ditampilkan.

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

Berarti kita harus membuat file view detail.php di dalam folder views/mahasiswa/.
views/mahasiswa/detail.php
<html>
<body>
<h1>Detail Data</h1>
<table border="1">
<tr>
<th>NIM</th>
<td><?php echo $detail->nim; ?></td>
</tr>
<tr>
<th>Nama</th>
<td><?php echo $detail->nama; ?></td>
</tr>
</table>
<hr>
<a href="<?php echo site_url('mahasiswa/index'); ?>">kembali</a>
</body>
</html>

Biar gampang manggil halaman detail untuk setiap datanya, kita akan membuat tautan untuk detail
setiap baris data. Buka file views/mahasiswa/list.php dan edit seperti kode yang dicetak tebal berwarna
oranye berikut.
views/mahasiswa/list.php
<html>
<body>
<h1>Daftar Mahasiswa</h1>
<table border="1">
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
<th></th>
</tr>
<?php $i = 1; foreach ($mahasiswa as $value){ ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $value->nim; ?></td>
<td><?php echo $value->nama; ?></td>
<td>
<a href="<?php echo site_url('mahasiswa/detail/'.$value->id); ?>">
Detail</a>
</td>
6

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

</tr>
<?php $i++; }; ?>
</table>
</body>
</html>

Sekarang buka lagi halaman http://localhost/codeigniter/mahasiswa/index di browser dan mestinya

tampilannya sudah seperti ini.

Coba klik salahsatu tautan Detail. Bila kodenya benar, maka seharusnya halaman berubah dan tampil
seperti ini.

Congrats! Kamu sudah bisa menampilkan data dari database ke browser. :D

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

Menambahkan Data Baru

Di bagian sebelumnya kita sudah membuat fitur untuk menampilkan data dari database. Sekarang kita
akan membuat fitur tambah data. Kita akan membuat satu form yang bisa kita gunakan untuk
menambahkan baris data ke dalam database.
Pertama, buka file controllers/mahasiswa.php dan tambahkan dua fungsi berikut di dalam class
Mahasiswa.
controllers/mahasiswa.php
/* form_tambah()
*
* fungsi ini menampilkan halaman form tambah mahasiswa
*
*/
public function form_tambah()
{
// load view form_tambah
$this->load->view('mahasiswa/form_tambah');
}
/* tambah()
*
* fungsi ini menangkap data mahasiswa yang dikirim via POST form
* untuk disimpan sebagai data baru pada tabel
*
*/
public function tambah()
{
// jika data post tidak ada
// maka tampilkan halaman 404 Page not Found
if(! $this->input->post()) show_404();
// tangkap data nim dan nama dari POST form
// lalu simpan ke indekx data dengan nama indeks
// yang sama dengan nama kolomnya
$data = array(
'nim' => $this->input->post('nim'),
'nama' => $this->input->post('nama')
);
// kirim $data ke model untuk disimpan di database
$this->mahasiswa_m->tambah($data);
// kembali ke halaman list mahasiswa
redirect('mahasiswa/index');
}
8

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

Fungsi form_tambah() gunanya untuk menampilkan form tambah. Sedangkan fungsi tambah() gunanya
untuk menangkap data yang disubmit dari form tambah.
Untuk fungsi form_tambah() kita memerlukan satu view untuk menampilkan form tambah data.
views/mahasiswa/form_tambah.php
<html>
<body>
<h1>Tambah Data Mahasiswa</h1>
<form action="<?php echo site_url('mahasiswa/tambah'); ?>" method="POST">
<table>
<tr>
<td>NIM : </td>
<td><input type="text" size="8" name="nim"></td>
</tr>
<tr>
<td>Nama : </td>
<td><input type="text" size="20" name="nama"></td>
</tr>
<tr>
<td>
<button type="submit">Simpan Data</button>
</td>
</tr>
</table>
</form>
<hr>
<a href="<?php echo site_url('mahasiswa/index'); ?>">kembali</a>
</body>
</html>

Coba panggil dari browser http://localhost/codeigniter/mahasiswa/form_tambah. Form tambah data

mahasiswa mestinya muncul seperti ini.

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

Setelah fungsi tambah() dimasukkan juga ke controller Mahasiswa, kita masih harus menyiapkan satu
fungsi di model supaya datanya bisa disimpan ke database.
models/mahasiswa_m.php
/* tambah()
*
* fungsi ini menyimpan data mahasiswa ke dalam tabel
* parameter:
* $data
data yang akan disimpan, bentuknya array('namakolom'=>'nilai')
*
* mengembalikan data berupa int id mahasiswa yang baru disimpan
*
*/
public function tambah($data)
{
$this->db->insert('mahasiswa', $data);
return $this->db->insert_id();
}

Setelah ini mestinya kita sudah bisa submit data baru. Coba isi form tambah data tersebut kemudian
tekan tombol Simpan Data. Apabila berhasil, maka halaman akan dialihkan ke halaman daftar data
mahasiswa dengan penambahan data baru yang kita sudah masukkan.
Supaya gampang memanggil halaman form tambah data, kita tambahkan tautan untuk halaman
tersebut di file views/mahasiswa/list.php.
views/mahasiswa/list.php
<html>
<body>
<h1>Daftar Mahasiswa</h1>
<div>
<a href="<?php echo site_url('mahasiswa/form_tambah'); ?>">
Tambah Data Mahasiswa</a>
</div>
<hr>
<table border="1">
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
<th></th>
</tr>
<?php $i = 1; foreach ($mahasiswa as $value){ ?>
<tr>
10

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

<td><?php echo $i; ?></td>

<td><?php echo $value->nim; ?></td>
<td><?php echo $value->nama; ?></td>
<td>
<a href="<?php echo site_url('mahasiswa/detail/'.$value->id); ?>">
Detail</a>
</td>
</tr>
<?php $i++; }; ?>
</table>
</body>
</html>

Akan muncul tautan bertuliskan Tambah Data Mahasiswa di bawah judul yang bila diklik akan muncul
halaman form tambah data.

Mengedit Data Lama

Sekarang kita buat fitur untuk mengedit data yang sudah ada. Untuk itu, kita siapkan dulu tautan di
setiap baris data untuk menampilkan halaman form edit data. Tambahkan pada file
views/mahasiswa/list.php seperti kode yang dicetak tebal oranye di bawah ini.
views/mahasiswa/list.php
<html>
<body>
<h1>Daftar Mahasiswa</h1>
<div>
<a href="<?php echo site_url('mahasiswa/form_tambah'); ?>">
Tambah Data Mahasiswa</a>
</div>
<hr>
<table border="1">
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
<th></th>
</tr>
<?php $i = 1; foreach ($mahasiswa as $value){ ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $value->nim; ?></td>
<td><?php echo $value->nama; ?></td>
11

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

<td>
<a href="<?php echo site_url('mahasiswa/detail/'.$value->id); ?>">
Detail</a>
<a href="<?php echo site_url('mahasiswa/form_edit/'.$value->id); ?>">
Edit</a>
</td>
</tr>
<?php $i++; }; ?>
</table>
</body>
</html>

Setelah itu, tambahkan dua fungsi berikut pada controller Mahasiswa.

controllers/mahasiswa.php
/* form_edit()
*
* fungsi ini menampilkan form edit data
* untuk data mahasiswa ber-id $id
*
*/
public function form_edit($id = false)
{
// jika parameter $id tidak disertakan dalam pemanggilan halaman
// maka tampilkan halaman 404 Page not Found
if(! $id) show_404();
// ambil dulu data mahasiswa ber-id $id
// untuk dipasang di dalam form edit
$data['detail'] = $this->mahasiswa_m->get_by_id($id);
// load view form_edit
// dengan menyisipkan variabel $data
// untuk dipasang pada form edit
$this->load->view('mahasiswa/form_edit', $data);
}
/* edit()
*
* fungsi ini menangkap data mahasiswa yang dikirim via POST form
* untuk disimpan sebagai pembaharuan data mahasiswa ber-id $id
*
*/
public function edit()
{
// kalo data POST tidak ada
// maka tampilkan halaman 404 Page not Found
if(! $id = $this->input->post('id')) show_404();
12

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

// tangkap data nim dan nama dari POST form

// lalu simpan ke indeks data dengan nama indeks
// yang sama dengan nama kolomnya
$data = array(
'nim' => $this->input->post('nim'),
'nama' => $this->input->post('nama')
);
// kirim $id sebagai identitas data yang akan diupdate
// dan $data ke model untuk dperbaharui di database
$this->mahasiswa_m->update($id, $data);
// kembali ke halaman list mahasiswa
redirect('mahasiswa/index');
}

Ada dua fungsi yang ditambahkan, fungsi form_edit() dan fungsi edit(). Fungsi form_edit() digunakan
untuk menampilkan form edit data. Bedanya dengan form tambah data yang hanya menampilkan form
kosong, form edit ini menampilkan form beserta data yang sudah ada yang mau diedit. Itu berarti kita
harus mengambil dulu satu data dari database yang mau diedit berdasarkan id yang diset pada
parameter $id fungsi tersebut, kemudian memasangnya di dalam form edit data. Form edit datanya
seperti berikut.
views/mahasiswa/form_edit.php
<html>
<body>
<h1>Edit Data Mahasiswa</h1>
<form action="<?php echo site_url('mahasiswa/edit/'.$detail->id); ?>"
method="POST">
<table>
<tr>
<td>NIM : </td>
<td><input type="text" size="8" name="nim"
value="<?php echo $detail->nim; ?>"></td>
</tr>
<tr>
<td>Nama : </td>
<td><input type="text" size="20" name="nama"
value="<?php echo $detail->nama; ?>"></td>
</tr>
<tr>
<td>
<input type="hidden" name="id" value="<?php echo $detail->id; ?>">
<button type="submit">Update Data</button>
</td>
</tr>
</table>
</form>
13

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

<hr>
<a href="<?php echo site_url('mahasiswa/index'); ?>">kembali</a>
</body>
</html>

Perhatikan pada form di atas, kita memasang data pada setiap fieldnya supaya ketika form edit ini
dipanggil, browser akan menampilkan form edit dengan field yang sudah terisi data yang terdahulu.
Perhatikan juga bahwa kita menambahkan <input type=hidden> untuk menyimpan nilai id data yang
sedang diedit. Field ini nantinya akan mengirimkan nilai id dan digunakan sebagai acuan data yang akan
diedit di database.
Setelah data yang disubmit ditangkap oleh fungsi edit() pada controller, fungsi ini akan menyimpan
pembaharuan data menggunakan fungsi update() yang ada pada model mahasiswa_m. Maka kita harus
menambahkan fungsi update() pada model seperti berikut.
models/mahasiswa_m.php
/* update()
*
* fungsi ini memperbaharui data mahasiswa ber-id $id
* mengembalikan data berupa int banyaknya data yang berhasil diupdate
* parameter:
* $id
id data mahasiswa pada tabel kolom id sebagai acuan data yang akan diupdate
* $data
data yang akan diperbaharui, bentuknya array('namakolom'=>'nilai')
*
*/
public function update($id, $data)
{
$this->db->where('id', $id)
->update('mahasiswa', $data);
// kembalikan nilai banyaknya data yang terupdate
return $this->db->affected_rows();
}

Selesai. Sekarang klik salahsatu tautan Edit dari halaman daftar mahasiswa untuk menampilkan
halaman edit data yang dipilih. Setelah muncul form edit data, coba ganti nama atau nim pada form
lalu tekan tombol Update Data. Bila tidak ada masalah, browser akan mengalihkan ke halaman daftar
data mahasiswa dengan menampilkan data terbaru.
Sip. Tinggal satu fitur lagi, fitur yang paling gampang, hapus data. :)

14

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

Menghapus Data
Ini fitur yang paling gampang karena hanya memerlukan satu fungsi di controller dan satu fungsi di
model. Fungsi ini tidak berlaku sebagai halaman yang ditampilkan secara mandiri sehingga tidak
memerlukan file view.
Mekanisme penghapusan data adalah, controller menginstruksikan penghapusan data menggunakan id
sebagai patokan data yang dihapus, dengan memanggil fungsi pada model untuk menghapus data
berdasarkan id yang dimasukkan.
Kita siapkan dulu tautan untuk menghapus data pada setiap baris pada daftar data mahasiswa.
views/mahasiswa/list.php
<html>
<body>
<h1>Daftar Mahasiswa</h1>
<div>
<a href="<?php echo site_url('mahasiswa/form_tambah'); ?>">
Tambah Data Mahasiswa</a>
</div>
<hr>
<table border="1">
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
<th></th>
</tr>
<?php $i = 1; foreach ($mahasiswa as $value){ ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $value->nim; ?></td>
<td><?php echo $value->nama; ?></td>
<td>
<a href="<?php echo site_url('mahasiswa/detail/'.$value->id); ?>">
Detail</a>
<a href="<?php echo site_url('mahasiswa/form_edit/'.$value->id); ?>">
Edit</a>
<a href="<?php echo site_url('mahasiswa/hapus/'.$value->id); ?>"
onclick="return confirm('Anda yakin akan menghapus data ini?')">
Hapus</a>
</td>
</tr>
<?php $i++; }; ?>
</table>
15

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

</body>
</html>

Hasil akhir tampilan daftar data mahasiswa setelah ditambah tautan hapus data menjadi seperti ini

Langkah terakhir adalah menambahkan fungsi hapus() pada controller dan model.
controllers/mahasiswa.php
/* hapus()
*
* fungsi ini berfungsi menghapus data mahasiswa
* yang diacu oleh $id pada parameter
*
*/
public function hapus($id = false)
{
// apabila fungsi ini dipanggil tanpa menyertakan parameter $id
// maka tampilkan halaman 404 Not Found
if(! $id) show_404();
// hapus data mahasiswa ber-id $id
$this->mahasiswa_m->hapus($id);
// kembali ke halaman sebelumnya
redirect('mahasiswa/index');
}

models/mahasiswa_m.php
/*
*
*
*
*

hapus()
fungsi ini menghapus data mahasiswa ber-id $id
mengembalikan data berupa int banyaknya data yang berhasil dihapus
parameter:
16

CI Tuts #3 CRUD Sederhana

Modul by: @toharyan

* $id
id data mahasiswa pada tabel kolom id sebagai acuan data yang akan dihapus
*
*/
public function hapus($id)
{
$this->db->where('id', $id)
->delete('mahasiswa');
// kembalikan nilai banyaknya data yang terhapus
return $this->db->affected_rows();
}

Selesai sudah. Silakan dicek tautan hapusnya. Kalo berhasil maka baris data yang dihapus akan hilang
dari daftar. Selamat! Kamu sudah menyelesaikan modul tutorial CRUD sederhana menggunakan
CodeIgniter! Setelah ini kamu bisa membuat aplikasi apapun dengan CodeIgniter :D

17