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!

Komentar

Unknown mengatakan…
Mas arie, saya sudah ikuti seluruh langkah di atas tapi pas dipanggil aplikasi crudnya muncul notofikasi seperti ini

An uncaught Exception was encountered

Type: Error

Message: Call to undefined function site_url()

Filename: C:\xampp\htdocs\crud\application\views\head.php

Line Number: 10

Backtrace:

File: C:\xampp\htdocs\crud\application\controllers\Welcome.php
Line: 40
Function: view

File: C:\xampp\htdocs\crud\index.php
Line: 315
Function: require_once
arinugraha mengatakan…
Itu karena ada langkah yang terlewat mas, coba baca kembali pada bagian "Konfigurasi" mas terkait dengan "autoload" :)
Unknown mengatakan…
terima kasih bang ari
Adi Sutrisno mengatakan…
Komentar ini telah dihapus oleh pengarang.
Adi Sutrisno mengatakan…
mas, kalo gak pakai sqllite3 gimana misalnya make phpmyadmin, dbdrivernya:'mysqli' bukan pdo
ICHA 12166678 mengatakan…
ko gak bisa di jalankan ya mash
untuk memangil ya
localhost/index.php/welcome
itu bukan ya mas ???
manfaat ilmu mengatakan…
data basenya bagaimana?
Unknown mengatakan…
If you're trying hard to lose pounds then you absolutely need to get on this brand new tailor-made keto diet.

To produce this keto diet service, licenced nutritionists, personal trainers, and professional cooks have united to produce keto meal plans that are productive, painless, money-efficient, and delicious.

From their first launch in early 2019, hundreds of clients have already remodeled their body and well-being with the benefits a good keto diet can offer.

Speaking of benefits: in this link, you'll discover eight scientifically-certified ones offered by the keto diet.
muhammad solehuddin mengatakan…
muhammad solehuddin said :
halo mas, terima kasih turtorialnya
James J Burkhardt mengatakan…
Your blog post gave me valuable insights and opened my eyes to new perspectives. I appreciate you sharing your knowledge and expertise in such a concise and engaging manner. Check out this profile ==. An individual's ability to perceive and distinguish colors appears to be assessed by this profile.
Todd William mengatakan…
This piece is a true gem. Not only is it educational, but it is also well-organized and simple to read. Thank you for making learning fun. Don't miss this useful article Farnsworth Lantern Test. Your quality of life can be improved by having a better understanding of your vision.

Postingan populer dari blog ini

Instalasi library YAZ di PHP

An (Relatively) Easy Way for Installing Social Feed Manager on Mac OSX