Tutorial Membuat CRUD Dengan Framework CodeIgniter

Pada tutorial kali ini kita bersama-sama akan belajar bagaimana membuat sebuah CRUD
(Create, Read, Update, Delete) menggunakan framework CodeIgniter.
CodeIgniter adalah sebuah web framework yang dikembangkan dengan bahasa pemrogramman
PHP, CodeIgniter sendiri merupakan framework yang sangat populer sekali di indonesia, banyak
developer / programmer mengembangkan aplikasi maupun websitenya menggunakan framwork
ini, CodeIgniter juga dikenal sebagai framework berukuran kecil dan memiliki kecepatan yang
dibilang sangat cepat.
CodeIgniter Menggunakan Konsep MVC (Model-View-Controller) adalah sebuah metode
untuk membuat sebuah aplikasi dengan memisahkan data (Model) dari tampilan (View) dan cara
bagaimana memprosesnya (Controller).
Oke langsung saja kita mulai, silahkan download codeigniter di situs resminya
www.codeigniter.com atau bisa ke repositorinya https://github.com/bcit-ci/CodeIgniter. Setelah
berhasil didownload, silahkan extract dan copykan ke htdocs (jika menggunakan xampp) teman-
teman.
Konfigurasi Aplikasi
Oke untuk pertama kita akan menkonfigurasi aplikasi kita seperti, mengatur alamat
aplikasi(base_url), database, autoload, dll.
Langsung saja buka file database.php di application/config/database.php, ubah menjadi
seperti ini:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '', //sesuaikan password phpmyadmin teman-teman
'database' => 'ci_crud',
'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
);
Selanjutnya buka file autoload.php di folder application/config dan ubah bagian kode
berikut ini:
// config autoload libraries
$autoload['libraries'] = array('');

Menjadi seperti ini:

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

//config autoload helper

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

Menjadi seperti ini:

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

Selanjutnya buka file config.php di application/config/config.php, ubah bagian kode-

kode dibawah ini:
$config['base_url'] = "";

Menjadi seperti berikut ini

$config['base_url'] = "http://".$_SERVER['HTTP_HOST'].
str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);

$config['encryption_key'] = '';

Menjadi seperti berikut ini

$config['encryption_key'] = 'CodeIgniterCrudBasic';

$config['csrf_protection'] = FALSE;
$config['csrf_token_name'] = 'csrf_token_name';
$config['csrf_cookie_name'] = 'csrf_cookie_name';
$config['csrf_expire'] = 7200;
$config['csrf_regenerate'] = TRUE;
$config['csrf_exclude_uris'] = array();

Menjadi seperti berikut ini

$config['csrf_protection'] = TRUE;
$config['csrf_token_name'] = 'csrf_token';
$config['csrf_cookie_name'] = 'csrf_cookie';
$config['csrf_expire'] = 7200;
$config['csrf_regenerate'] = TRUE;
$config['csrf_exclude_uris'] = array();

Selanjutnya, buatlah sebuah database baru di, http://localhost/phpmyadmin, beri nama

databasenya dengan ci_crud kemudian import script berikut ini kedalam menu SQL.
-- phpMyAdmin SQL Dump
-- version 4.8.0
-- https://www.phpmyadmin.net/
--
-- Host: localhost
-- Generation Time: May 17, 2018 at 05:35 AM
-- Server version: 5.7.9
-- PHP Version: 7.2.2

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: `ci_crud`
--

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

--
-- Table structure for table `tbl_buku`
--

CREATE TABLE `tbl_buku` (

`id_buku` int(11) NOT NULL,
`no_isbn` varchar(100) NOT NULL,
`nama_buku` varchar(100) NOT NULL,
`tanggal_terbit` date NOT NULL,
`pengarang` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_buku`
--

INSERT INTO `tbl_buku` (`id_buku`, `no_isbn`, `nama_buku`, `tanggal_terbit`,

`pengarang`) VALUES
(2, '0002349876', 'Pandai Framework CodeIgniter 1 Minggu', '2018-05-22', 'Fika
Ridaul Maulayya'),
(4, '0002349444', 'Jago JavaScript', '2018-05-24', 'Rizqi Maulana'),
(5, '0002343909', 'Menguasai Framework Ruby on Rails', '2018-05-26', 'Cahyadi
Triyansyah'),
(6, '0002349097', 'Mendalami Vue JS ', '2018-02-19', 'Yudi Purwanto');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_buku`
--
ALTER TABLE `tbl_buku`
ADD PRIMARY KEY (`id_buku`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_buku`
--
ALTER TABLE `tbl_buku`
MODIFY `id_buku` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
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 */;

Membuat Aplikasi
Selanjutnya kita buat sebuah controller baru di folder application/controllers, simpan
dengan nama Buku.php, kemudian masukkan kode berikut ini:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Buku extends CI_Controller {

public function __construct(){

parent ::__construct();

//load model
$this->load->model('model_buku');

public function index()

{
$data = array(

'title' => 'Data Buku',

'data_buku' => $this->model_buku->get_all(),

);

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

public function tambah()

{
$data = array(

'title' => 'Tambah Data Buku'

);

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

public function simpan()

{
 $data = array(

'no_isbn' => $this->input->post("no_isbn"),

'nama_buku' => $this->input->post("nama_buku"),
'tanggal_terbit' => $this->input->post("tanggal_terbit"),
'pengarang' => $this->input->post("pengarang"),

);

$this->model_buku->simpan($data);

$this->session->set_flashdata('notif', '<div class="alert alert-

success alert-dismissible"> Success! data berhasil disimpan didatabase.
</div>');

//redirect
redirect('buku/');

public function edit($id_buku)

{
$id_buku = $this->uri->segment(3);

$data = array(

'title' => 'Edit Data Buku',

'data_buku' => $this->model_buku->edit($id_buku)

);

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

public function update()

{
$id['id_buku'] = $this->input->post("id_buku");
$data = array(

'no_isbn' => $this->input->post("no_isbn"),

'nama_buku' => $this->input->post("nama_buku"),
'tanggal_terbit' => $this->input->post("tanggal_terbit"),
'pengarang' => $this->input->post("pengarang"),

);

$this->model_buku->update($data, $id);

$this->session->set_flashdata('notif', '<div class="alert alert-

success alert-dismissible"> Success! data berhasil diupdate didatabase.
</div>');

//redirect
redirect('buku/');

}
 public function hapus($id_buku)
{
$id['id_buku'] = $this->uri->segment(3);

$this->model_buku->hapus($id);

//redirect
redirect('buku/');

Selanjutnya kita buat sebuah mode baru di folder application/models, simpan dengan nama
Model_buku.php, kemudian masukkan kode berikut ini:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Model_buku extends CI_model{

public function get_all()

{
$query = $this->db->select("*")
->from('tbl_buku')
->order_by('id_buku', 'DESC')
->get();
return $query->result();
}

public function simpan($data)

{

$query = $this->db->insert("tbl_buku", $data);

if($query){
return true;
}else{
return false;
}

public function edit($id_buku)

{

$query = $this->db->where("id_buku", $id_buku)

->get("tbl_buku");

if($query){
return $query->row();
}else{
return false;
}

}
 public function update($data, $id)
{

$query = $this->db->update("tbl_buku", $data, $id);

if($query){
return true;
}else{
return false;
}

public function hapus($id)

{

$query = $this->db->delete("tbl_buku", $id);

if($query){
return true;
}else{
return false;
}

Setelah itu kita buat 3 buah file view untuk tampilan aplikasi kita di folder application/views,
buatlah 3 file yaitu:
 data_buku.php
 tambah_buku.php
 edit_buku.php
Buka file data_buku.php, kemudian masukkan kode berikut ini:
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title ?></title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/
bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
</head>
<body>

<div class="container" style="margin-top: 80px">

<?php echo $this->session->flashdata('notif') ?>
<a href="<?php echo base_url() ?>buku/tambah/" class="btn btn-md btn-
success">Tambah Buku</a>
<hr>
<!-- table -->
 <div class="table-responsive">
<table id="table" class="table table-striped table-bordered table-
hover">
<thead>
<tr>
<th>No.</th>
<th>No ISBN</th>
<th>Nama Buku</th>
<th>Tanggal Terbit</th>
<th>Pengarang</th>
<th>Options</th>
</tr>
</thead>
<tbody>

<?php
$no = 1;
foreach($data_buku as $hasil){
?>

<tr>
<td><?php echo $no++ ?></td>
<td><?php echo $hasil->no_isbn ?></td>
<td><?php echo $hasil->nama_buku ?></td>
<td><?php echo $hasil->tanggal_terbit ?></td>
<td><?php echo $hasil->pengarang ?></td>
<td>
<a href="<?php echo base_url() ?>buku/edit/<?php echo
$hasil->id_buku ?>" class="btn btn-sm btn-success">Edit</a>
<a href="<?php echo base_url() ?>buku/hapus/<?php echo
$hasil->id_buku ?>" class="btn btn-sm btn-danger">Hapus</a>
</td>
</tr>

<?php } ?>

</tbody>
</table>
</div>

</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-

3.3.1.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/
bootstrap.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></
script>
<script>
$('#table').DataTable( {
autoFill: true
} );
</script>
</body>
</html>

Apabila aplikasi dijalankan dengan mengetikkan alamat,

http://localhost/folder-project/index.php/buku, kurang lebih tampilannya akan seperti ini:

Selanjutnya Buka file tambah_buku.php, kemudian masukkan kode berikut ini:

<!DOCTYPE html>
<html>
<head>
<title><?php echo $title ?></title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/
bootstrap.min.css">
</head>
<body>

<div class="container" style="margin-top: 80px">

<div class="col-md-12">
<?php echo form_open('buku/simpan') ?>

<div class="form-group">
<label for="text">No ISBN</label>
<input type="text" name="no_isbn" class="form-control"
placeholder="Masukkan No. ISBN">
</div>

<div class="form-group">
<label for="text">Nama Buku</label>
<input type="text" name="nama_buku" class="form-control"
placeholder="Masukkan Nama Buku">
</div>

<div class="form-group">
<label for="text">Tanggal Terbit</label>
 <input type="date" name="tanggal_terbit" class="form-control"
>
</div>

<div class="form-group">
<label for="text">Pengarang</label>
<input type="text" name="pengarang" class="form-control" >
</div>

<button type="submit" class="btn btn-md

btn-success">Simpan</button>
<button type="reset" class="btn btn-md
btn-warning">reset</button>
<?php echo form_close() ?>
</div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-

3.3.1.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/
bootstrap.min.js"></script>
</body>
</html>

Apabila aplikasi dijalankan dengan mengetikkan alamat,

http://localhost/folder-project/index.php/buku/tambah, kurang lebih tampilannya akan seperti
ini:

Selanjutnya Buka file edit_buku.php, kemudian masukkan kode berikut ini:

<!DOCTYPE html>
<html>
<head>
<title><?php echo $title ?></title>
 <link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/
bootstrap.min.css">
</head>
<body>

<div class="container" style="margin-top: 80px">

<div class="col-md-12">
<?php echo form_open('buku/update') ?>

<div class="form-group">
<label for="text">No ISBN</label>
<input type="text" name="no_isbn" value="<?php echo
$data_buku->no_isbn ?>" class="form-control" placeholder="Masukkan No. ISBN">
<input type="hidden" value="<?php echo $data_buku->id_buku ?>"
name="id_buku">
</div>

<div class="form-group">
<label for="text">Nama Buku</label>
<input type="text" name="nama_buku" value="<?php echo
$data_buku->nama_buku ?>" class="form-control" placeholder="Masukkan Nama
Buku">
</div>

<div class="form-group">
<label for="text">Tanggal Terbit</label>
<input type="date" name="tanggal_terbit" value="<?php echo
$data_buku->tanggal_terbit ?>" class="form-control" >
</div>

<div class="form-group">
<label for="text">Pengarang</label>
<input type="text" name="pengarang" value="<?php echo
$data_buku->pengarang ?>" class="form-control" >
</div>

<button type="submit" class="btn btn-md

btn-success">Update</button>
<button type="reset" class="btn btn-md
btn-warning">reset</button>
<?php echo form_close() ?>
</div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-

3.3.1.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/
bootstrap.min.js"></script>
</body>
</html>

Apabila aplikasi dijalankan dengan mengetikkan alamat,

http://localhost/folder-project/index.php/buku/edit/2, kurang lebih tampilannya akan seperti ini:
Untuk source code silahkan download di https://github.com/maulayyacyber/crud-codeigniter