Template Aplikasi Web CRUD Sederhana dengan CodeIgniter

CodeIgniter (CI) adalah framework MVC berbasis PHP favorit saya, terserah deh orang-orang mau bilang sudah ketinggalan zaman, kurang elegan, kurang "artistis" lah 🤣🤣🤣. Cepat, konfigurasi minimal, tanpa harus menggunakan perintah command-line (eeeehhhmmmm 😬), learning-curve relatif landai dibandingkan framework MVC lain, dan dokumentasi yang mantap dan mudah dimengerti adalah sebagian dari kelebihan CI yang saya suka (subjektif pastinya). Beberapa aplikasi Open Source yang saya kembangkan seperti Pustakawan dan Arteri menggunakan CI sebagai framework-nya. Karena operasi CRUD (Create-Read-Update-Delete) adalah operasi paling umum dalam sebuah sistem informasi maka kali ini saya akan menuliskan aplikasi web untuk operasi CRUD minimalistik dengan CI yang mungkin bisa bermanfaat sebagai template bagi teman-teman dalam mengembangkan aplikasi lain. Untuk contoh aplikasi CRUD yang kita bangun adalah aplikasi data users dengan tiga buah field/ruas: id, nama dan email.

Konfigurasi

Karena ini contoh yang minimalistik maka untuk database lagi-lagi kita gunakan SQLite3. Untuk menggunakan SQLite3 sebagai storage penyimpanan data, maka kita perlu mengkonfigurasi CI dengan membuka file application/config/database.php dan menuliskan konfigurasi database seperti ini:

application/config/database.php

$db['default'] = array(
 'dsn' => 'sqlite:./db/db.sq3',
 'hostname' => 'localhost',
 'username' => '',
 'password' => '',
 'database' => '',
 'dbdriver' => 'pdo',
 '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
);

Buatlah sebuah folder dengan nama db pada direktori root CI, karena folder ini akan digunakan sebagai tempat untuk menyimpan file database SQLite3 aplikasi ini. Selanjutnya bukalah file konfigurasi application/config/autoload.php dan ubahlah baris dengan tulisan $autoload['helper'] = array(); menjadi $autoload['helper'] = array('url');.

Controller

Kita tidak perlu buat file controller khusus, langsung saja kita ubah file controller bawaan CI yaitu application/controllers/Welcome.php dan ubah isi kode di dalamnya dengan editor teks dengan kode berikut ini:

application/controllers/Welcome.php

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

class Welcome extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->database();
    }

    public function index()
    {
        // buat tabel 'users' apabila belum ada
        $this->db->query('CREATE TABLE IF NOT EXISTS users (id VARCHAR PRIMARY KEY, nama VARCHAR, email VARCHAR UNIQUE)');
        // apakah ada pencarian data spesifik dengan kata kunci tertentu?
        $search = $this->input->get('search');
        if (!empty($search)) {
            $this->db->like('id', $search, 'both'); 
            $this->db->or_like('nama', $search, 'both'); 
            $this->db->or_like('email', $search, 'both'); 
        }
        $users = $this->db->get('users');
        $data['result'] = $users->result_array();
        $data['num_rows'] = $users->num_rows();
        $this->load->view('head');
        $this->load->view('read', $data);
        $this->load->view('foot');
    }

    public function save()
    {
        $input['id'] = $this->input->post('id');
        $input['nama'] = $this->input->post('nama');
        $input['email'] = $this->input->post('email');
        $updateID = $this->input->post('updateID');
        if (!empty($updateID)) {
            $this->db->where('id', $updateID);
            $this->db->update('users', $input);
        } else {
            $this->db->insert('users', $input);
        }
        redirect('/welcome/index');
    }

    public function create()
    {
        $this->load->view('head');
        $this->load->view('create');
        $this->load->view('foot');
    }

    public function update($id)
    {
        $this->db->where('id', $id);
        $data['update'] = $this->db->get('users')->row_array();
        $this->load->view('head');
        $this->load->view('create', $data);
        $this->load->view('foot');
    }

    public function delete($id)
    {
        $this->db->where('id', $id);
        $data['delete'] = $this->db->get('users')->row_array();
        $this->load->view('head');
        $this->load->view('delete', $data);
        $this->load->view('foot');
    }

    public function real_delete()
    {
        $id = $this->input->post('id');
        $this->db->where('id', $id);
        $this->db->delete('users');
        redirect('/welcome/');
    }
}

Views

Untuk view buatlah file-file PHP dengan nama-nama berikut: create.php, delete.php, foot.php, head.php, read.php dan isikan masing-masing file tersebut dengan kode-kode sebagai berikut:

application/views/head.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CRUD</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="<?php echo site_url('/welcome/') ?>">CRUD</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="menu">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a href="<?php echo site_url('/welcome/') ?>" class="nav-link">List</a>
      </li>
      <li class="nav-item">
        <a href="<?php echo site_url('/welcome/create') ?>" class="nav-link">Create New User</a>
      </li>
    </ul>
  </div>
</nav>

application/views/foot.php

<!-- tambahkan file library javascript apabila dibutuhkan pada bagian ini -->
</body>
</html>

application/views/read.php

<?php
/**
 * View untuk menampilkan daftar/list data (Read)
 * beserta dengan form yang memungkinkan pencarian data spesifik dengan kata kunci
 * 
 */
?>
<br/>
<div class="container">

    <div class="card">
        <div class="card-body">
            <form method="get" action="<?php echo site_url('/welcome/') ?>" class="form-inline">
                <div class="form-group">
                    <input type="text" class="form-control" name="search" id="search" placeholder="Kata Kunci Pencarian">
                  </div>  
                <button type="submit" class="btn btn-primary">Cari</button>
            </form>
        </div>
    </div>

    <br/>

    <div class="alert alert-info">Ditemukan data dalam jumlah <strong><?php echo $num_rows ?></strong></div>
    <table class="table table-bordered">
        <tr>
            <th>ID</th><th>Nama</th><th>E-mail</th>
            <th style="width: 1%;"> </th><th style="width: 1%;"> </th>
        </tr>
        <?php foreach ($result as $r) {
            echo '<tr>';
            echo '<td>'.$r['id'].'</td><td>'.$r['nama'].'</td><td>'.$r['email'].'</td>';
            echo '<td><a href="'.site_url('/welcome/update/'.$r['id']).'" class="btn btn-primary">Edit</a></td>';
            echo '<td><a href="'.site_url('/welcome/delete/'.$r['id']).'" class="btn btn-danger">Delete</a></td>';
            echo '</tr>';
        }
        ?>
    </table>

</div>

application/views/create.php

<?php
/**
 * View untuk form penambahan (Create) data dan sekaligus pengubahan (Update) data
 * 
 */
// periksa apakah kita sedang dalam mode 'Update'
if (!isset($update)) {
    $update = array('id' => '', 'nama' => '', 'email' => '');
} else {
    $update_flag = '<input type="hidden" name="updateID" value="'.$update['id'].'">';
}
?>
<br/>
<div class="container">

    <?php if (isset($update_flag)) { 
        echo '<div class="alert alert-info">Anda akan mengubah data user <strong>'.$update['nama'].'</strong></div>';
      } ?>
    <div class="card">
        <div class="card-body">
            <form method="post" action="<?php echo site_url('/welcome/save') ?>">
              <div class="form-group">
                <label for="id">ID</label>
                <input type="text" class="form-control" name="id" id="id" value="<?php echo $update['id'] ?>" placeholder="ID User">
              </div>
              <div class="form-group">
                <label for="nama">Nama</label>
                <input type="text" class="form-control" name="nama" id="nama" value="<?php echo $update['nama'] ?>" placeholder="Nama">
              </div>
              <div class="form-group">
                <label for="email">E-mail</label>
                <input type="email" class="form-control" name="email" id="email" value="<?php echo $update['email'] ?>" placeholder="E-mail">
              </div>
              <?php if (isset($update_flag)) { 
                  echo $update_flag; 
                } ?>
              <button type="submit" class="btn btn-primary">Save</button>
            </form>
        </div>
    </div>

</div>

application/views/delete.php

<?php
/**
 * View untuk proses konfirmasi penghapusan data (Delete)
 * 
 */
?>
<br />
<div class="container">

    <div class="card">
        <div class="card-body">
            <form method="post" action="<?php echo site_url('/welcome/real_delete') ?>">
                <p>Apakah anda yakin ingin menghapus user <strong><?php echo $delete['nama'] ?></strong></p>
                <input type="hidden" name="id" value="<?php echo $delete['id'] ?>">
                <a class="btn btn-primary" href="<?php echo site_url('/welcome/') ?>">BATAL</a>
                <button type="submit" class="btn btn-danger">DELETE</button>
            </form>
        </div>
    </div>

</div>

Selesai! Apabila semua kode sudah ditulis dengan benar maka kita akan melihat antar muka aplikasi kita seperti berikut ini:

Selamat mencoba dan semoga bermanfaat!