Cara Membuat CRUD Codeigniter 3 Sederhana dan Mudah

Cara Membuat CRUD Codeigniter 3 Sederhana dan Mudah - Pada artikel sebelumnya, kita sudah membahas mulai cara install codeigniter. memahami konsep MVC pada codeigniter dan Mengenal File Konfigurasi codeigniter. Pada artikel kali ini kita akan Membuat CRUD Codeigniter. Nah, saya rasa kalian sudah siap untuk lanjut ke membuat Create, Read, Update, dan Delete (CRUD) pada codeigniter.

Kalau kalian belum baca artikel-artikel sebelumnya, saya sarankan untuk baca terlebih dahulu ya.

Karena artikel-artikel sebelumnya berisikan hal-hal dasar untuk lanjut ke tahap selanjutnya. Terlebih lagi, di tutorial membuat crud kali ini akan sangat banyak dibahas.

Sudah banyak artikel di blog / website lain yang membahas cara membuat crud di codeigniter. Namun, bukan berarti saya takut kalau artikel kali ini salah saing hehe. Karena, sedari awal memang saya sudah memulai sesi Belajar Codeigniter dari awal.

Jadi, rasanya tak afdol jika saya tak lanjutkan sesi Belajar Codeigniter ini karena takut salah saing dengan kompetitor lain hehe.

Sesuai judul, kali ini kita akan membuat tampilan yang sederhana saja. Yang penting, kalian paham dengan cara kerja CRUD di codeigniter dan mengerti syntax / aturan dari perintah-perintahnya.

Oh iya, saya ingatkan lagi buat baca artikel – artikel Belajar Codeigniter sebelumnya. Terutama artikel memahami konsep MVC, karena pemahaman akan konsep MVC akan sangat digunakan di tutorial membuat crud kali ini.

Langkah- Langkah Membuat CRUD Codeigniter

Untuk membuat CRUD Codeigniter ini kita harus melewati beberapa langkah mulai dari menyiapkan file assets sampai dengan menyempurnakan tampilan dari tablenya.

Sebelum itu, pastikan kalian sudah install codeigniter terlebih dahulu ya. Untuk kalian yang belum tahu cara install codeigniter, kalian bisa liat di artikel sebelumnya di link berikut ini :

Install Codeigniter dengan Mudah

Menyiapkan File Assets

Langkah pertama, siapkan beberapa file assets / resources yang akan digunakan pada tutorial ini. Mudah aja kok, pada tutorial ini kita hanya akan pakai Boostrap 4 dan Jquery seperti biasa.

Jika kalian belum punya Boostrap 4 dan Jquery kalian bisa download pada link di bawah ini :

Nah, setelah selesai kalian download. Buatlah folder assets di codeigniter kemudian taruh menjadi 2 bagian yakni CSS dan JS.

Isi dari folder CSS :

Isi dari Folder JS :

Sudah ? , saya asumsikan kalian sudah paham ilmu dasar dari CSS dan JS sedikit ya :).

Setting Base_URL

Buka, config.php kemudian ubah bagian base_url menjadi

http://localhost/nama_projekmu/

Bisa lihat contohnya di gambar berikut ini :

Setting Autoload.php

Buka file /config/autoload.php dan ubah beberapa poin menjadi seperti berikut ini :

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

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

Fungsi dari langkah ini yaitu untuk auto mengenerate library database dan helper URL pada projek kita kali ini. Baca selengkapnya di Artikel File Konfigurasi Codeigniter lebih lengkapnya bisa dibaca disini :

Mengenal File Konfigurasi Codeigniter

Menyiapkan Database

Buka phpmyadmin kemudian pilih SQL, lalu jalankan QUERY di bawah ini :

-- phpMyAdmin SQL Dump
-- version 4.7.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Oct 20, 2019 at 08:42 AM
-- Server version: 10.1.22-MariaDB
-- PHP Version: 7.1.4

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_sekolah`
--

-- --------------------------------------------------------

--
-- Table structure for table `tb_siswa`
--

CREATE TABLE `tb_siswa` (
`id` int(5) NOT NULL,
`noinduk` int(5) NOT NULL,
`nama` varchar(50) NOT NULL,
`hobi` varchar(30) DEFAULT NULL,
`alamat` varchar(100) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tb_siswa`
--

INSERT INTO `tb_siswa` (`id`, `noinduk`, `nama`, `hobi`, `alamat`) VALUES
(1, 1001, 'Wawan Abdurrahman', 'Menyanyi', 'Jalan Merdeka'),
(2, 1002, 'Maman Sulaiman', 'Renang', 'Jalan Sejahtera'),
(3, 1003, 'Saipul Anwar', 'Basket', 'Jalan Gotong Royong'),
(4, 1004, 'Dadang Suradang', 'Badminton', 'Jalan Kesempurnaan'),
(5, 1005, 'Gadis Sulistyaningtyas', 'Memasak', 'Jalan Kebajikan'),
(9, 1007, 'Alan Suryajana', 'Dagang', 'Jalan Investasi');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tb_siswa`
--
ALTER TABLE `tb_siswa`
ADD PRIMARY KEY (`id`),
ADD UNIQUE KEY `noinduk` (`noinduk`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tb_siswa`
--
ALTER TABLE `tb_siswa`
MODIFY `id` int(5) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Query tersebut akan menghasilkan tb_siswa dengan struktur seperti berikut :

Setting Database.php

Database.php merupakan sebuah file yang berguna untuk menghubungkan Codeigniter dengan database.

Atur database.php dengan konfigurasi seperti berikut :

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'db_sekolah',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);

Sedikit membahas,

hostname = alamat dari server database kita.

username = username dari server database untuk keperluan autentikasi.

password = password dari server database untuk keperluan autentikasi.

database = nama dari database yang akan kita akses.

Menghapus Index.php

Secara default, untuk mengakses Controller selain default controller yang disetting di File Konfigurasi routes.php, kita perlu menambahkan /index.php/Nama_Controller di URL untuk mengakses controller tersebut.

Seperti gambar di bawah ini :

Bagi saya sendiri, hal ini sangatlah mengganggu karena memperrumit kita dalam pengalihan URL / URL Forwarding. Tujuan dari menghapus Index.php yakni mempermudah kita dalam pengalihan URL ke controller dan sebagainya.

Yuk langsung mulai,

Setting di Config.php

Langkah pertama untuk menghapus index.php yakni mengatur lewat file config kemudian mengubah bagian index_page bagian :

$config['index_page'] = 'index.php';

Ubah menjadi,

$config['index_page'] = '';

Copy dan Ubah file .htaccess

Copy file .htaccess yang berada di /application, kemudian ubah isinya menjadi

RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

Taruh file htaccess yang telah dicopy tadi disini, kemudian ubah isinya dengan kode di atas.

Buatlah File Controller, Model, dan View

Langkah selanjutnya yaitu membuat file Controller, Model, dan View.

Membuat File Controller

Buat sebuah file baru di /controller isi dengan struktur seperti berikut :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class C_Index extends CI_Controller {

function __construct(){
parent::__construct();
$this->load->model('M_Index');
}
}

Kemudian save dan beri nama C_Index.

Membuat File Model

Buatlah file baru di /model , isi dengan struktur seperti berikut :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class M_Index extends CI_Model {
}
Simpan dengan nama M_Index.php

Membuat File View

Buat sebuah FIle di /view, simpan dengan nama V_Index.php

Lanjut ke langkah berikutnya ya.

Setting Routes.php

Routes.php merupakan sebuah file untuk mengatur rute link untuk mengakses sebuah controller.

Buka /config/routes.php kemudian atur seperti berikut :

$route['default_controller'] = 'C_Index';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

$route['C_Index/(:any)'] = 'C_Index/$1';
$route['C_Index/(:any)/(:any)'] = 'C_Index/$1/$2';
$route['C_Index/(:any)/(:any)/(:any)'] = 'C_Index/$1/$2/$3';

Sedikit dijelaskan ya,

$route[‘default_controller’] = ‘C_Index’; artinya controller default kita ketika akses base_url yaitu C_Index.

$route[‘C_Index/(:any)’] = ‘C_Index/$1’; artinya ketika kita mengarah ke link base_url(‘C_Index/namaFungsi’) , kita akan mengakses Controller C_Index pada fungsi namaFungsi.

Lebih lengkapnya kalian bisa akses link berikut ini untuk mengetahui URL Routing pada codeigniter lebih lengkap.

Mengisi Controller C_Index

Pada tahap sebelumnya, kita sudah membuat controller dengan nama C_Index beserta strukturnya. Nah, pada tahap ini isi C_Index tersebut dengan kode sebagai berikut :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class C_Index extends CI_Controller {

function __construct(){ // Construct merupakan fungsi yang dijalankan pertama kali ketika controller dijalankan
parent::__construct();
$this->load->model('M_Index'); // auto load model M_Index
}

public function index()
{
$dataSiswa = $this->M_Index->ambilData(); // Menyimpan hasil dari fungsi ambilData di M_Index pada variabel dataSiswa;

$data['siswa'] = $dataSiswa; // Mengoper variabel dataSiswa ke View V_Index

$this->load->view('V_Index', $data);
}

public function tambahData()
{
$noinduk = $this->input->post('no_induk'); // Menangkap hasil dari Input no_induk
$nama = $this->input->post('nama'); // Menangkap hasil dari Input nama
$hobi = $this->input->post('hobi'); // Menangkap hasil dari Input hobi
$alamat = $this->input->post('alamat'); // Menangkap hasil dari Input alamat

$data = ["noinduk" => $noinduk,
"nama" => $nama,
"hobi" => $hobi,
"alamat" => $alamat
]; // Menyimpan hasil dari noinduk,nama,hobi, dan alamat pada array;

$this->M_Index->tambahData($data); //Memanggil fungsi tambahData pada M_Index sambil membawa $data;
redirect();

}

public function editData($noinduk){

$data['siswa_edit'] = $this->M_Index->ambilDataByNoinduk($noinduk); //menampun hasil dari fungsi ambilDataByNoinduk($noinduk) ke variabel $data['siswa_edit']
$this->load->view('V_Edit',$data);
}

public function updateData($noinduk){
$nama = $this->input->post('nama');
$hobi = $this->input->post('hobi');
$alamat = $this->input->post('alamat');
$data = ["noinduk" => $noinduk,
"nama" => $nama,
"hobi" => $hobi,
"alamat" => $alamat
];
// echo "<pre>";
// print_r($data);
// exit();
$this->M_Index->updateData($data,$noinduk); //Memanggil fungsi updateData pada M_Index sambil mengoper $data dan $noinduk ke fungsi updateData pada M_Index
redirect();
}

public function deleteData($noinduk){
$this->M_Index->deleteData($noinduk); //Memanggil fungsi deleteData pada M_Index sembari membawa parameter $noinduk.
redirect();
}

}

Pada kode tersebut sudah saya tambahkan keterangan dari masing – masing kode. Kalau misalnya kurang jelas, bisa tanya di kolom komentar ya 🙂

Mengisi Model M_Index

Pada tahap sebelumnya juga, kita sudah membuat Model dengan nama M_Index bukan?. Nah, isi model tersebut dengan kode sebagai berikut :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class M_Index extends CI_Model {

public function ambilData(){
return $this->db->get('tb_siswa')->result_array(); //Mengembalikan hasil dari Get tb_siswa dalam bentuk array ke fungsi ambilData.
}

public function tambahData($data){
$this->db->insert('tb_siswa',$data);
}

public function ambilDataByNoinduk($noinduk){
$this->db->where('noinduk',$noinduk);
return $this->db->get('tb_siswa')->result_array(); //Mengembalikan hasil dari Get tb_siswa dalam bentuk array ke fungsi ambilDataByNoinduk($noinduk).
}

public function updateData($data,$noinduk){
$this->db->where('noinduk',$noinduk);
$this->db->update('tb_siswa',$data); //Melakukan update pada tb_siswa dengan data dari $data yang didapat dari controller.
}

public function deleteData($noinduk){
$this->db->where('noinduk',$noinduk); // persamaan kolom noinduk dengan variabel noinduk yang didapat dari controller
$this->db->delete('tb_siswa'); //Menghapus baris pada tb siswa dengan kondisi seperti di atas.
}
}

$this-db->where(‘noinduk’,$noinduk) itu artinya kondisi ketika kolom noinduk sama dengan variabel noinduk.

Dalam SQL sama saja seperti :

WHERE noinduk='$noinduk'

Pada kode tersebut juga sudah saya berikan keterangan, dipahami ya 🙂

Mengisi View V_Index

Isi V_Index yang sebelumnya sudah kita buat dengan kode sebagai berikut

<!DOCTYPE html>
<html>
<head>
<title>Tutorial CRUD Codeigniter</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>">
<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-3.4.1.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
</head>
<body>
<div class="container">

<div class="card bg-primary">
<div class="card-header"><strong>CRUD KompiKaleng</strong></div>
</div>
<div style="margin-top: 10px;">
<button style="float: right;margin-bottom: 10px;" class="btn btn-success" data-toggle="modal" data-target="#modalTambah">Tambah Data</button>
<div class="table-responsive">
<table class="table table-striped table-bordered" style="border: 1px solid black;">
<thead>
<tr>
<th style="width: 5%;">No</th>
<th style="width: 10%">No Induk</th>
<th>Nama</th>
<th>Hobi</th>
<th>Alamat</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$no=0;
foreach ($siswa as $key => $data):
$no++;
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $data['noinduk']; ?></td>
<td><?php echo $data['nama']; ?></td>
<td><?php echo $data['hobi']; ?></td>
<td><?php echo $data['alamat']; ?></td>
<td><span><a class="btn btn-primary" href="<?php echo base_url('C_Index/editData/'.$data['noinduk']) ?>">Edit</a>
<a class="btn btn-danger" href="<?php echo base_url('C_Index/deleteData/'.$data['noinduk']) ?>">Delete</a>
</span>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>


<div class="modal fade" id="modalTambah">
<div class="modal-dialog">
<div class="modal-content">


<div class="modal-header">
<h4 class="modal-title">Tambah Data Siswa</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>


<div class="modal-body">
<form method="post" action="<?php echo base_url('C_Index/tambahData') ?>">
<div class="form-group">
<label for="noinduk">Noinduk</label>
<input required="required" class="form-control" type="number" id="noinduk" name="no_induk" />
</div>
<div class="form-group">
<label for="noinduk">Nama</label>
<input required="required" class="form-control" type="text" id="noinduk" name="nama" />
</div>
<div class="form-group">
<label for="noinduk">Hobi</label>
<input required="required" class="form-control" type="text" id="noinduk" name="hobi" />
</div>
<div class="form-group">
<label for="noinduk">Alamat</label>
<input required="required" class="form-control" type="text" id="noinduk" name="alamat" />
</div>

</div>


<div class="modal-footer">
<button class="btn btn-success" type="submit">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
</div>
</form>
</div>
</div>
</div>

</body>

</html>

Buat View Baru V_Edit

V_Edit digunakan sebagai tampilan ketika kita akan melakukan edit data. Buatlah file baru di /views kemudian simpan dengan nama V_Edit.

Isi V_Edit dengan kode sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<title>Edit Data Siswa</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>">
<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-3.4.1.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
</head>
<body>
<div class="container" style="margin: 20px;">
<div class="card">
<div class="card-header bg-primary">
<strong>Edit Data Siswa</strong>
</div>
<div class="card-body">
<?php foreach ($siswa_edit as $key => $data):
?>
<form method="post" action="<?php echo base_url('C_Index/updateData/'.$data['noinduk']) ?>">
<div class="form-group">
<label for="noinduk">No Induk</label>
<input readonly="readonly" type="text" name="noinduk" id="noinduk" class="form-control" value="<?php echo $data['noinduk'] ?>" />
</div>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" name="nama" id="nama" class="form-control" value="<?php echo $data['nama'] ?>" />
</div>
<div class="form-group">
<label for="hobi">Hobi</label>
<input type="text" name="hobi" id="hobi" class="form-control" value="<?php echo $data['hobi'] ?>" />
</div>
<div class="form-group">
<label for="alamat">Alamat</label>
<input type="text" name="alamat" id="alamat" class="form-control" value="<?php echo $data['alamat'] ?>" />
</div>

<button class="btn btn-success" type="submit" onclick="return confirm('Yakin data anda sudah benar?')">Submit</button>
<a class="btn btn-danger" href="<?php echo base_url() ?>">Batal</a>
</form>
<?php endforeach; ?>
</div>
</div>
</div>
</body>
</html>

Selesai, Jalankan Projek CRUDnya !

Sampai sini, projek CRUD kita sudah bisa dicoba. SIlahkan akses CRUD yang sudah kita buat tadi pada link

http://localhost/nama_projek/

Screenshot

Nah, Berikut tadi merupakan Panduan Lengkap membuat CRUD Codeigniter. Jika kurang jelas atau mau tanya-tanya bisa disampaikan lewat kolom komentar ya.

Semoga artikel ini bermanfaat ya.

Cara Membuat CRUD Codeigniter 3 Sederhana dan Mudah