Pernahkah kamu mendengar istilah CRUD? Setelah terjun ke dunia Pemrograman, sering kali saya mendengar istilah CRUD. Apalagi setelah mencoba membuat aplikasi yang berhubungan database, maka kita akan sering berinteraksi dengan 'CRUD'. Ya, CRUD yang merupakan singkatan dari create, read, update dan delete, ini memang termasuk fitur yang sering kita jumpai apabila terdapat proses manipulasi database. Tampak seperti fitur yang penting, memang. Oleh karena itu, sebagai tutorial pertama di blog saya dan karena di postingan sebelumnya tentang CodeIgniter, maka kita akan membahas tentang Simple CRUD CodeIgniter. Jadi, kita akan membuat sebuah project CRUD sederhana dengan CodeIgniter.
Tutorial Simple CRUD CodeIgniter ini didesain sehingga bisa diimplementasikan dengan mudah dan memudahkan untuk memahami CRUD menggunakan framework CodeIgniter. Cocok untuk kamu yang baru belajar framework CodeIgniter. Di dalam tutorial ini juga akan membahas persiapan apa saja yang diperlukan sebelum memulai project, study kasus project dan juga langkah-langkah dalam membangun project CRUD sederhana CodeIgniter. Dan sebagai study kasus, kita akan membangun project CRUD sederhana CodeIgniter untuk mengelola data Mahasiswa. Lalu, apa saja langkah-langkah dalam membangun project CRUD sederhana COdeIgniter? Try this out ya!
[1] Persiapan
Ya, sebelum memulai. Kita cek dulu apa saja yang kita gunakan dalam pembuatan simple CRUD CodeIgniter. Berikut ini adalah minimum spesifikasi yang saya gunakan:
[a] PHP 5.5.35
[b] MySQL / MariaDB
[c] Webserver Apache
[d] CodeIgniter versi 3.1.0
Yep, untuk a,b dan c sudah tersedia dalam XAMPP versi 5.5.35.
Untuk CodeIgniter, kamu bisa download langsung di web official CodeIgniter [Here]. Setelah kamu download, extract CodeIgniter, lalu pindahkan folder CodeIgniter (hasil extract) ke document root (di folder xampp/htdocs). Kemudian, rename folder CodeIgniter (hasil extract) jadi
crud_ci
.[2] Membuat Database
Nah, sekarang buka
phpMyAdmin
, lalu kita buat database dengan nama dbci3
. Selanjutnya, kita buat tabel dengan nama tabel_mahasiswa
. Nah, untuk membuat tabel, klik menu SQL di phpMyAdmin
, lalu run perintah SQL di bawah ini: CREATE TABLE `tabel_mahasiswa` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`nim` varchar(15) NOT NULL,
`nama` varchar(30) NOT NULL,
`jenis_kelamin` enum('PRIA','WANITA') NOT NULL,
`tempat_lahir` varchar(50) NOT NULL,
`tanggal_lahir` date NOT NULL,
`alamat` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Klik tombol 'go' di kanan bawah untuk running perintah SQL di atas. Nah, kita berhasil membuat
tabel_mahasiswa
dan di bawah ini adalah struktur tabelnya:[3] Konfigurasi Database dan Base Url
Langkah Selanjutnya adalah konfigurasi base_url dari aplikasi web yang sedang dibangun. Di dalam contoh ini digunakan localhost, dalam aplikasi sesungguhnya, nanti diubah menjadi alamat website (misalnya, kalau blog ini dibangun menggunakan CodeIgniter..maka, base urlnya jadi https://recodeku.blogspot.com).
Nah, sekarang buka text editor kesayanganmu. Lalu buka file config.php yang ada di direktori crud_ci/application/config.
Cek line ke 26, ubah:
$config['base_url'] = '';
menjadi:
$config['base_url'] = 'http://localhost/crud_ci';
Save kembali file config.php
Setelah konfigurasi base url, selanjutnya adalah mengatur konfigurasi database. Nah, sekarang buka kembali teks editor kesayanganmu, lalu buka file database.php, masih di direktori yang sama kaya file config.php, yaitu crud_ci/application/config. Cek line 76, lalu isi konfigurasi database seperti gambar di bawah ini:
Kalau sudah selesai, save kembali file database.php
Langkah berikutnya adalah menghubungkan database yang sudah kita atur konfigurasinya dengan cara mengaktifkan library database. Library database ini yang nantinya digunakan untuk menghandle segala aktifitas yang berhubungan dengan database dalam Framework CodeIgniter.
Untuk mengaktifkan library database, buka file autoload.php di dalam direktori crud_ci/application/config. Cek line ke 61, lalu isi array dengan database. Seperti gambar di bawah:
[4] Membuat Model (Mahasiswa_model.php)
Seperti yang kita ketahui tentang konsep MVC, model digunakan untuk menangani aneka aktifitas yang berhubungan dengan manipulasi data dalam database. Nah, di dalam file Mahasiswa_model terdapat 5 method yaitu:
[a] get() :: Mengambil data dari tabel_mahasiswa
[b] get_nim() :: Mengambil data mahasiswa berdasarkan nim dari tabel_mahasiswa.
[c] insert() :: Menambah data mahasiswa ke dalam tabel_mahasiswa.
[d] delete() :: Menghapus data dari tabel_mahasiswa berdasarkan nim.
[e] update_data() :: Mengupdate data mahasiswa dengan nim sebagai parameter
Sekarang buka kembali teks editor kesayanganmu, lalu ketik script di bawah ini:
<?php
class Mahasiswa_model extends CI_Model {
function get()
{
return $this->db->get('tabel_mahasiswa');
}
function get_nim($nim)
{
$this->db->where('nim', $nim);
$this->db->select("*");
$this->db->from("tabel_mahasiswa");
return $this->db->get();
}
function insert($data)
{
$this->db->insert('tabel_mahasiswa', $data);
}
function delete($nim)
{
$this->db->where('nim', $nim);
$this->db->delete('tabel_mahasiswa');
}
function update_data($data, $syarat)
{
$this->db->where($syarat);
$this->db->update('tabel_mahasiswa', $data);
}
}
Kalau sudah diketik, save file dengan nama Mahasiswa_model.php di direktori crud_ci/application/models.
[5] Membuat View
Ada empat file view yang akan kita buat, yaitu:
[a] add.php :: Menampilkan form untuk menambah data,
[b] add_berhasil.php :: Menampilkan pesan jika proses berhasil.
[c] edit.php :: Menampilkan form untuk mengubah data dan
[d] view.php :: Menampilkan daftar mahasiswa / data yang ada dalam database.
Keempat file tersebut kita simpan di folder dengan nama 'crud_ci'. Jadi, sebelum ngoding, sekarang kita buat folder views 'crud_ci' di direktori crud_ci/application/views.
Kalau sudah, sekarang buka kembali teks editor kesayanganmu, lalu ketik script di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>
TAMBAH Data MAHASISWA
</title>
</head>
<body>
<?php echo form_open('crud_ci/form_insert'); ?>
<table border=0 width="45%" cellpadding="5" cellspacing="0">
<tr bgcolor="silver">
<td Colspan="3" align="center"><H3>DATA MAHASISWA</H3></td>
</tr>
<tr>
<td>NIM</td>
<td>:</td>
<td><input type="text" name="nim" value="<?php echo set_value('nim'); ?>" size="50"><?php echo form_error('nim'); ?></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" value="<?php echo set_value('nama'); ?>" size="50"><?php echo form_error('nama'); ?></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<input type="radio" name="jeniskelamin" checked value="PRIA">PRIA
<input type="radio" name="jeniskelamin" value="WANITA">WANITA
</td><?php echo form_error('jeniskelamin'); ?>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>:</td>
<td><input type="text" name="tempat_lahir" value="<?php echo set_value('tempat_lahir'); ?>" size="50"><?php echo form_error('tempat_lahir'); ?></td>
</tr>
<tr>
<td>Tanggal lahir</td>
<td>:</td>
<td><input type="text" name="tanggal_lahir" value="<?php echo set_value('tanggal_lahir'); ?>" size="50"><?php echo form_error('tanggal_lahir'); ?></td>
</tr>
<tr>
<td></td>
<td></td>
<td><em>Format tanggal yyyy-mm-dd contoh: 1996-12-15</em></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="alamat" rows="2" value="<?php echo set_value('alamat'); ?>" cols="52"></textarea><?php echo form_error('alamat'); ?></td>
</tr>
<tr align="center">
<td colspan="3">
<input type="submit" value="TAMBAH">
<input type="reset" value="BATAL">
[<a href="<?php echo base_url(); ?>index.php/crud_ci">Lihat Data Mahasiswa</a>]
</td>
</tr>
</table>
<?php echo form_close(); ?>
</body>
</html>
Lalu, save file dengan nama add.php di folder views 'crud_ci' yang sudah kita buat.
Selanjutnya, kita akan buat file add_berhasil.php. Sekarang kita ketik lagi script di bawah ini:
<!doctype html>
<html>
<head>
<title>
DATA MAHASISWA
</title>
</head>
<body>
<p><?php echo $msg; ?></p>
<p><?php echo anchor('crud_ci','Kembali'); ?></p>
</body>
</html>
Lalu, save file dengan nama add_berhasil.php. Yep, filenya disave di folder views 'crud_ci'.
Berikutnya, kita buat file edit.php. Buka kembali teks editor, lalu ketik script di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>
Ubah Data Mahasiswa
</title>
</head>
<body>
<?php
$nim = $data_mahasiswa['nim'];
$nama = $data_mahasiswa['nama'];
$tempat_lahir = $data_mahasiswa['tempat_lahir'];
$tanggal_lahir = $data_mahasiswa['tanggal_lahir'];
$alamat = $data_mahasiswa['alamat'];
$jeniskelamin = $data_mahasiswa['jenis_kelamin'];
?>
<?php echo form_open('crud_ci/ubah_data'); ?>
<table border=0 width="45%" cellpadding="5" cellspacing="0">
<tr bgcolor="silver">
<td Colspan="3" align="center"><H3>DATA MAHASISWA</H3></td>
</tr>
<tr>
<td>NIM</td>
<td>:</td>
<td><input type="text" name="nim" value="<?php echo $nim; ?>" size="50"><?php echo form_error('nim'); ?></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" value="<?php echo $nama; ?>" size="50"><?php echo form_error('nama'); ?></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<input type="radio" name="jeniskelamin" <?php if($jeniskelamin == 'PRIA'){ echo 'checked';} ?> value="PRIA">PRIA
<input type="radio" name="jeniskelamin" <?php if($jeniskelamin == 'WANITA'){ echo 'checked';} ?> value="WANITA">WANITA
</td><?php echo form_error('jeniskelamin'); ?>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>:</td>
<td><input type="text" name="tempat_lahir" value="<?php echo $tempat_lahir; ?>" size="50"><?php echo form_error('tempat_lahir'); ?></td>
</tr>
<tr>
<td>Tanggal lahir</td>
<td>:</td>
<td><input type="text" name="tanggal_lahir" value="<?php echo $tanggal_lahir; ?>" size="50"><?php echo form_error('tanggal_lahir'); ?></td>
</tr>
<tr>
<td></td>
<td></td>
<td>Format tanggal yyyy-mm-dd contoh: 1996-12-15</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="alamat" rows="2" cols="52"><?php echo $alamat; ?></textarea><?php echo form_error('alamat'); ?></td>
</tr>
<tr align="center">
<td colspan="3">
<input type="submit" value="Ubah">
<input type="reset" value="Batal">
[<a href="<?php echo base_url(); ?>index.php/crud_ci">Lihat Data Mahasiswa</a>]
</td>
</tr>
</table>
<?php echo form_close(); ?>
</body>
</html>
Save file dengan nama edit.php di folder views yang sama yaitu 'crud_ci'.
Dan sekarang kita akan buat file view.php. Yuk, kita ketik lagi scriptnya!
<!DOCTYPE html>
<html>
<head>
<title>
Tampil Data Mahasiswa
</title>
</head>
<body>
<H3>Data Mahasiswa</H3>
<table border=1 width=80% cellpadding=2 cellspacing=0>
<tr bgcolor=silver align=center>
<td>Nim</td>
<td>Nama</td>
<td>Jenis Kelamin</td>
<td>Tempat Lahir</td>
<td>Tanggal Lahir</td>
<td>Alamat</td>
<td colspan=2>AKSI</td>
</tr>
<?php
if ($jumlah_data > 0) {
foreach ($data_mahasiswa as $row)
{ ?>
<tr align=center>
<td><?php echo $row['nim'];?></td>
<td><?php echo $row['nama'];?></td>
<td><?php echo $row['jenis_kelamin'];?></td>
<td><?php echo $row['tempat_lahir'];?></td>
<td><?php echo $row['tanggal_lahir'];?></td>
<td><?php echo $row['alamat'];?></td>
<td><a href="<?php echo base_url(); ?>index.php/crud_ci/ubah/<?php echo $row['nim']; ?>">Ubah</a></td>
<td><a href="<?php echo base_url(); ?>index.php/crud_ci/hapus/<?php echo $row['nim']; ?>">Hapus</a></td>
</tr>
<?php
}
} else { ?>
<tr align='center'>
<td colspan=7>Data Mahasiswa kosong</td>
</tr>
<?php } ?>
</table>
<p>Jumlah data : <?php echo $jumlah_data;?> [<a href="<?php echo base_url(); ?>index.php/crud_ci/form_insert">Tambah Data</a>] </p>
</body>
</html>
Save filenya dengan nama view.php di folder views 'crud_ci'.
Jadi, nanti di folder views 'crud_ci' ada empat file seperti gambar di bawah ini:
[6] Membuat File Controller (Crud_ci.php)
Ya, ini file terakhir yang kita buat di praktik kali ini. Seperti yang kita ketahui, file controller dalam CodeIgniter menangani aneka proses atau business logic dan juga generate web page. Nah, sekarang buka kembali teks editor kesayanganmu, lalu ketik script di bawah ini:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Crud_ci extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper('url');
$this->load->helper('form');
$this->load->library('form_validation');
$this->load->model('mahasiswa_model');
}
public function index()
{
$data['data_mahasiswa'] = $this->mahasiswa_model->get()->result_array();
$data['jumlah_data'] = $this->mahasiswa_model->get()->num_rows();
$this->load->view('crud_ci/view',$data);
}
public function form_insert()
{
$this->form_validation->set_rules('nim','NIM','required');
$this->form_validation->set_rules('nama','Nama','required');
$this->form_validation->set_rules('jeniskelamin','Jenis Kelamin','required');
$this->form_validation->set_rules('tempat_lahir','Tempat Lahir','required');
$this->form_validation->set_rules('tanggal_lahir','Tanggal Lahir','required');
$this->form_validation->set_rules('alamat','Alamat','required');
if ($this->form_validation->run() === FALSE)
{
$this->load->view('crud_ci/add');
}
else
{
$data['nim'] = $this->input->post('nim');
$data['nama'] = $this->input->post('nama');
$data['tempat_lahir'] = $this->input->post('tempat_lahir');
$data['tanggal_lahir'] = $this->input->post('tanggal_lahir');
$data['jenis_kelamin'] = $this->input->post('jeniskelamin');
$data['alamat'] = $this->input->post('alamat');
$this->mahasiswa_model->insert($data);
$data['msg'] = 'Data berhasil disimpan';
$this->load->view('crud_ci/add_berhasil',$data);
}
}
public function ubah($nim)
{
$data['data_mahasiswa'] = $this->mahasiswa_model->get_nim($nim)->row_array();
$this->load->view('crud_ci/edit',$data);
}
public function ubah_data()
{
$syarat['nim'] = $this->input->post('nim');
$data['nama'] = $this->input->post('nama');
$data['tempat_lahir'] = $this->input->post('tempat_lahir');
$data['tanggal_lahir'] = $this->input->post('tanggal_lahir');
$data['jenis_kelamin'] = $this->input->post('jeniskelamin');
$data['alamat'] = $this->input->post('alamat');
$this->mahasiswa_model->update_data($data, $syarat);
$data['msg'] = 'Data berhasil diubah';
$this->load->view('crud_ci/add_berhasil',$data);
}
public function hapus($nim)
{
$data['data_mahasiswa'] = $this->mahasiswa_model->delete($nim);
$data['msg'] = 'Data berhasil dihapus';
$this->load->view('crud_ci/add_berhasil',$data);
}
}
Save file dengan nama Crud_ci di direktori crud_ci/application/controllers.
Nah, sebelum uji coba aplikasi, sekarang kita cek dulu yang sudah kita buat. Sekarang kita punya folder dengan struktur folder adalah seperti di bawah ini (folder CI yang lain tidak ditampilkan):
crud_ci
-application
--controllers
---Crud_ci.php
--models
---Mahasiswa_model.php
--views
---crud_ci
----add.php
----add_berhasil.php
----edit.php
----view.php
Di folder models ada file Mahasiswa_model.php. Folder views ada folder crud_ci dengan empat file views, yaitu add.php, add_berhasil.php, edit.php dan view.php. Dan folder controllers ada file controller dengan nama Crud_ci.php.
[7] Uji Coba Project
Di langkah terakhir ini, kita akan mencoba project Simple CRUD CodeIgniter yang baru saja kita buat. Sebagai pengingat, project yang dibangun dengan framework CodeIgniter dapat diakses dengan mengetik link dengan pola:
example.com/class/function/ID
Jadi untuk mengakses project yang kita buat, kita ketik link berikut di browser:
http://localhost/crud_ci/index.php/crud_ci
Kalau berhasil, akan muncul daftar mahasiswa seperti pada gambar di bawah ini:
Kok, belum ada daftar mahasiswanya? iya, kan belum kita isi..
Untuk menambahkan data, klik link 'Tambah Data' untuk membuka form data mahasiswa.
Coba klik tombol ‘TAMBAH’ untuk menguji form validation program. Jika form dikosongkan, maka akan muncul pesan error seperti di gambar di bawah ini.
Selanjutnya kita coba isi data mahasiswa di dalam form. Apabila sudah diisi, klik tombol ‘TAMBAH’.
Akan muncul pemberitahuan kalau data yang kamu isi itu sudah berhasil disimpan.
Setelah itu coba klik ‘kembali’ untuk kembali ke halaman awal. Data yang sudah ditambahkan ke dalam database akan tampil di tabel daftar Mahasiswa.
Untuk mengubah data mahasiswa, klik ‘ubah’ di kolom AKSI. Browser akan meload halaman form untuk mengubah data. Kita coba ubah datanya, lalu klik tombol ‘Ubah’. Sehingga muncul tampilan pemberitahuan data berhasil di ubah. Klik link ‘Kembali’ untuk kembali ke halaman awal. Dapat terlihat data yang sudah diubah.
Dan terakhir, untuk menghapus data coba klik ‘hapus’ di kolom AKSI. Maka, akan muncul tampilan pemberitahuan data berhasil dihapus.
***
Ya, semoga tutorial Simple CRUD CodeIgniter ini bisa memudahkanmu untuk memahami dasar-dasar membuat aplikasi dengan fitur CRUD menggunakan framework CodeIgniter. Memberikan gambaran tentang basic design pattern dalam CodeIgniter, sehingga dapat kamu kembangkan menjadi aplikasi yang lebih baik.
Terima kasih sudah ikut menyimak tutorial di blog saya. Sampai berjumpa lagi di edisi tutorial berikutnya. Apabila ada pertanyaan, kritik, saran, request atau ingin berkontribusi bisa disampaikan melalui kolom komentar atau melalui email gungunpriatna02@gmail.com.
Boleh dishare, apabila bermanfaat. Happy coding!
***
Referensi:
Web Official CodeIgniter @ https://codeigniter.com
Documentasi CodeIgniter @ https://codeigniter.com/user_guide/