Tutorial Codeigniter 4 - Membuat CRUD (Create Read Update dan Delete) + Datatables di Codeigniter 4

byAndrian Ade Rizma -

Selamat datang di website Copypastekode, pada tutorial kali ini kita akan belajar bagaimana cara atau membuat CRUD + datatables di Codeigniter 4.

Requirements : Sebelum mengikuti tutorial nya ada beberapa persyaratan yang harus dipenuhi terlebih dahulu

Bagi yang sudah memenuhi persyaratan langsung saja kita mulai tutorialnya

Langkah-langkah membuat CRUD di Codeigniter 4 :

  1. Membuat database & table
  2. Setting & Koneksi Databse
  3. Membuat file Models
  4. Membuat file Controllers
  5. Membuat file Views
  6. Membuat method Tambah, Edit, Simpan & hapus pada Controler Crud.php
  7. Setting BaseController.php
  8. Integrasi Datatables

Membuat Database & Tabel

Buka XAMPP Control Panel, jalankan Apache dan MySQL, lalu buka phpMyAdmin dengan akses link berikut pada web browser http://localhost/phpmyadmin/, kemudian tambahkan / buat database baru, disini saya akan menamai Database dengan nama crud, seperti petunjuk gambar dibawah :


 setelah membuat database dengan nama crud jalankan query SQL berikut :

-- phpMyAdmin SQL Dump
-- version 4.9.0.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 02 Apr 2022 pada 14.12
-- Versi server: 10.3.16-MariaDB
-- Versi PHP: 7.3.6

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

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

--
-- Struktur dari tabel `anggota`
--

CREATE TABLE `anggota` (
  `id_anggota` int(11) NOT NULL,
  `username` varchar(30) NOT NULL,
  `password` varchar(225) NOT NULL,
  `nama` varchar(225) NOT NULL,
  `tempat_lahir` varchar(150) NOT NULL,
  `tanggal_lahir` date NOT NULL,
  `jenis_kelamin` enum('Laki-laki','Perempuan','','') NOT NULL,
  `prodi` enum('Matematika','Sistem Informasi','Statistika') NOT NULL,
  `alamat` varchar(50) DEFAULT NULL,
  `email` varchar(30) DEFAULT NULL,
  `no_hp` char(13) DEFAULT NULL,
  `gambar` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `anggota`
--

INSERT INTO `anggota` (`id_anggota`, `username`, `password`, `nama`, `tempat_lahir`, `tanggal_lahir`, `jenis_kelamin`, `prodi`, `alamat`, `email`, `no_hp`, `gambar`) VALUES
(42, 'andrian26', '$2y$10$RBiyuqDDXAbrMcGdoeLRM.zf7G0NJ3x3d9nFxFnq8xzG2iN.8eicS', 'Andrian Ade Risma', 'Jayapura', '2021-05-02', 'Perempuan', 'Sistem Informasi', 'ARSO XI', 'andrian@gmail.com', '081344844767', '980758833_technology-asus-rog-hd-wallpaper-preview (1).jpg'),
(229, 'admin', '$2y$10$OEtMF4PDtzIJ7CZjsniWYu6nBoY0IxXd9KDyZ7CQNbAaOMIJh1Ika', 'Rara sawaki', 'Manokwari', '2021-11-30', 'Perempuan', 'Matematika', 'jhgfcvb', 'aan.andrianaa@gmail.com', '0987678', '2138470806_6251892.png'),
(230, 'admin76', '$2y$10$/Ge03tJTTtD3JzbfJ/5bHeu8N8fTKea9ta5GlPZMn2krJTnVSFJh.', 'ma\'ruf amin', 'Manokwari', '2021-11-30', 'Laki-laki', 'Sistem Informasi', 'jayapura', 'andrian@gmail.com', '0813121110', '1124144250_Logo_Uncen_Web_color-1-300x296.png'),
(234, 'admin8989', '$2y$10$pMeON8qtmw8yziLE9l6KXeqUtN5k5.sVArM5GjBaBjJMCJB0E24WG', 'ma\'jid', 'Genyem', '2021-11-23', 'Perempuan', 'Matematika', 'lk', 'aan@gmail.com', '098767', '1040231792_4318372888_6bc76694-dd86-4363-8010-703f6207d8f3.png'),
(235, 'kisman', '$2y$10$/N8EJnh9Ef4LttM8Q1tXkOVSAVqx4xdAWJ.E5ao.7.8F9Ft3OU6xy', 'Kevin', 'Arso', '2021-12-02', 'Laki-laki', 'Statistika', 'hihi', 'kevin@gmail.com', '098767', '1714198350_Kamera1.jpg'),
(236, 'niko', '$2y$10$MxzU37P0ZgNpdFg0fBQaEOVUhryfVKbrIkVn6Eo4qOXFL0fqSMg4S', 'nikolas', 'Serui', '1998-11-22', 'Laki-laki', 'Matematika', 'jojo', 'niko@gmail.com', '0813121110', '2008295359_tes.PNG'),
(237, 'yan007', '$2y$10$.k.Agx7ubjxFrealFK83yuHjiHVnA32jA8muYU5Yn2ml1vpeZqw0y', 'yanto', 'Serui', '1997-11-01', 'Laki-laki', 'Matematika', 'haha', 'yan@gmail.com', '098765', '1563091944_6251849.png'),
(238, 'admin', '$2y$10$xNGkt4EhUd4LXUQOHY8lNuNghAQ6nt/NHLFRQUwMocxHO0GGQC0yC', 'Andrian Ade Risma', 'Jayapura1', '2022-03-01', 'Laki-laki', 'Matematika', 'cwec', 'admin@gmail.com', '09876787', '212438973_asus-rog-zephyrus-g14.png'),
(239, 'Tes', '$2y$10$cbKr.i0VAPeLYkHHnU6QfuvhyAQ.3QvAgIFQTidfm17xCc8qwB9hy', 'Tes', 'Tes', '2022-03-31', 'Perempuan', 'Matematika', 'Uprus', 'admin@gmail.com', '081344844767', '1789346019_1489181115.jpg');

--
-- Indexes for dumped tables
--

--
-- Indeks untuk tabel `anggota`
--
ALTER TABLE `anggota`
  ADD PRIMARY KEY (`id_anggota`);

--
-- AUTO_INCREMENT untuk tabel yang dibuang
--

--
-- AUTO_INCREMENT untuk tabel `anggota`
--
ALTER TABLE `anggota`
  MODIFY `id_anggota` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=240;
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 */;


Klik database crud kemudian temukan menu SQL lalu pastekan Query SQL diatas :pada menu SQL di phpMyAdmin, seperti petunjuk berikut :



Jika sudah mengikuti seperti langkah-langkah diatas, refresh halama phpMyAdmin maka akan muncul tabel anggota seperti gambar dibawah.

Setting & Koneksi Database

Setelah membuat Database dan Tabel seperti langkah diatas, sekarang kita akan mengkoneksikan atau menghubungkan Database yang telah kita buat pada project Codeigniter 4 kita.

Buka project Codeigniter 4 teman-teman pada Code Editor, disini saya menggunakan vs code, saya merekomendasikan teman-teman untuk menggunakan VS Code atau Visual Studio Code ini sebagai code editor yang akan gunakan.

Temukan file dengan nama env, lalu copy file tersebut, sehingga menjadi 2 file, kemudian rename salah 1 file env tersebut menjadi .env seperti petunjuk gambar berikut :


Setelah itu buka file .env, lalu modifikasi seperti contoh gambar berikut :

Sebelum di modifikasi :

Sesudah di modifikasi :

Membuat Models

Langkah ke-3 adalah membuat file Model disini saya membuat file Model dengan nama Model_crud, bebas kalian bisa gunakan nama apa saja tapi huruf awalnya harus huruf besar.

Buka folder app/Models , kemudian tambahkan file baru dengan nama Model_crud, seperti gambar berikut :

lalu ketikan atau copy lalu paste-kan script dibawah ini pada file Model_crud, saya sarankan untuk teman-teman yang masih pemula untuk mengetik, karena dengan kita sering mengetik script atau koding, dengan begitu lama-kelamaan akan terbiasa dalam mengetikan sintax coding.

<?php
 
namespace App\Models;
 
use CodeIgniter\Model;
 
class Model_crud extends Model
{
    protected $table      = 'anggota';
    protected $primaryKey = 'id_anggota';
    protected $useAutoIncrement = true;
    protected $allowedFields = ['username','nama','tempat_lahir', 'tanggal_lahir','jenis_kelamin','prodi','alamat','email','no_hp','foto'];
}

Penjelasan :
  • $table adalah untuk nama tabel yang akan digunakan atau yang akan diakses oleh Model.
  • $primaryKey adalah nama kolom untuk primary key.
  • $useAutoIncrement untuk mengaktifkan auto increment pada primary key.
  • $allowedFields berisi daftar nama kolom yang boleh kita dari database.

Sebenarnya masih banyak konfigurasi Model lainnya, kalian bisa melihat pada dokumentasi dari Codeigniter 4 berikut Dokumentasi Model CI 4

Membuat Controllers

Langkah ke-4 adalah membuat file Controller, disini saya memberi nama Controllernya dengan nama Crud.php, sama halnya dengan Model pemberian nama Controller harus menggunakan huruf kapital atau huruf besar pada huruf awalan-nya.

Buka folder app/Controllers, kemudian tambahkan file dengan nama Crud.php, seperti gambar dibawah :

Crud.php

Lalu isikan kode berikut pada file Crud.php : 

<?php
 
namespace App\Controllers;
 
use App\Models\Model_crud;
 
class Crud extends BaseController
{
 
    public function __construct()
    {
        $this->anggota = new Model_crud();
    }
 
    public function index()
    {
        $data = [
            'anggota' => $this->anggota->findAll()
        ];
 
        return view('crud/data_crud', $data);
    }
}


Membuat Views

Langkah ke-5 membuat Views, cari folder dengan nama Views kemudian tambahkan folder baru dengan nama crud, lalu tambahkan file pada folder crud dengan nama data_crud.php seperti contoh gambar dibawah ini :

data_crud.php

kemudian isikan kode dibawah ini pada data_crud.php :

<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Crud</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
  rel="stylesheet" crossorigin="anonymous" 
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"> 

</head>

<body>

 <h4 class="text-center mt-5">Crud + Datatables</h4>

 <div class="container-fluid mt-5">

  <div class="card">
   <div class="card-header">
    <!-- Button trigger modal -->
    <a href="<?= base_url('crud/tambah'); ?>" type="button" 
       class="btn-sm btn btn-primary">
     Tambah Data
    </a>
   </div>
   <div class="card-body">
    <div class="table-responsive">
     <table class="table table-striped text-center">
      <thead class="text-white bg-primary text-capitalize">
       <tr>
        <th>No</th>
        <th>username</th>
        <th>nama</th>
        <th>tempat lahir</th>
        <th>tanggal lahir</th>
        <th>jenis kelamin</th>
        <th>aksi</th>
       </tr>
      </thead>
      <tbody>
       <!-- Ketika data kosong tampilkan ini -->
       <?php if (empty($anggota)) : ?>
        <td colspan="6">
         <div align="center" class="alert alert-danger" role="alert">
          Data tidak ditemukan
         </div>
        </td>
       <?php endif; ?>

       <?php foreach ($anggota as $key => $data) : ?>

        <tr>
         <td><?= $key + 1 ?></td>
         <td><?= $data['username']; ?></td>
         <td><?= $data['nama']; ?></td>
         <td><?= $data['tempat_lahir']; ?></td>
         <td><?= $data['tanggal_lahir']; ?></td>
         <td><?= $data['jenis_kelamin']; ?></td>
         <td>
          <a href="<?= base_url('crud/edit/' . $data['id_anggota']); ?>" 
             class="btn btn-sm btn-primary">Edit</a>
          <a href="<?= base_url('crud/hapus/' . $data['id_anggota']); ?>" 
             class="btn btn-sm btn-danger mx-1">Delete</a>
         </td>
        </tr>

       <?php endforeach; ?>



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

</body>
</html>

Setelah semua langkah-langkah diatas telah teman-teman ikuti tanpa ada yang terlewatkan, sekarang waktunya mengecek atau testing pada project CRUD di Codeigniter 4 ini, apakah ada yang error atau tidak.

Seperti biasa kita jalankan project nya terlebih dahulu dengan mengaktifkan server development dengan cara klik kanan pada folder project lalu pilih Open in Windows Terminal atau Git Bash Here untuk yang menggunakan GIT, kemudian ketikan php spark serve dan tunggu sampai muncul tulisan CodeIgniter development server started on http://localhost:8080


Jika server nya berhasil dijalankan, langsung saja kita jalankan aplikasi Crud Codeigniter kita pada web browser lalu ketikan URL berikut localhost:8080/crud


Maka akan tampil seperti gambar berikut : 

gambar tabel crud


sampai sini kita telah berhasil Membuat Read atau menampilkan data, selanjutnya Kita akan membuat fitur Create Update dan Delete

Membuat method Tambah, Edit, Simpan & hapus pada Controler Crud.php

Setelah berhasil menampilkan data dari database selanjutnya kita akan membuat Create, Update dan Delete, tanpa perlu berlama-lama lagi, langsung saja kita buka kembali file Controller Crud.php kita dan tambahkan method baru dengan nama tambah, edit, hapus dan simpan, kemudian tambahkan juga : $this->validation = \Config\Services::validation() pada public function __construct(), sehingga file Crud.php menjadi sebagai berikut :

<?php
 
namespace App\Controllers;
 
use App\Models\Model_crud;
 
class Crud extends BaseController
{
 
    public function __construct()
    {
        $this->validation = \Config\Services::validation();
        $this->anggota = new Model_crud();
    }
 
    public function index()
    {
        $data = [
            'anggota' => $this->anggota->findAll()
        ];
 
        return view('crud/data_crud', $data);
    }
 
    public function tambah()
    {
 
        $data = [
            'title' => 'Tambah Data Mahasiswa',
            'validation' => $this->validation,
        ];
 
        return view('crud/tambah_data', $data);
    }
 
    public function edit($id_anggota)
    {
        $data = [
            'title' => 'Edit',
            'validation' => \Config\Services::validation(),
            'anggota' => $this->anggota->where('id_anggota', $id_anggota)->first(),
        ];
 
        return view('crud/edit_data', $data);
    }
 
    public function simpan()
    {
        if (!$this->validate([
            'username' => [
                'rules' => 'required|is_unique[anggota.username,id_anggota,{id_anggota}]',
                'errors' => [
                    'required' => '{field} wajib diisi!',
                    'is_unique' => '{field} sudah terdaftar',
                ]
            ],
            'nama' => [
                'rules' => 'required',
                'errors' => [
                    'required' => '{field} wajib diisi!',
                ]
            ],
            'tempat_lahir' => [
                'rules' => 'required',
                'errors' => [
                    'required' => '{field} wajib diisi!',
                ]
            ],
            'tanggal_lahir' => [
                'rules' => 'required',
                'errors' => [
                    'required' => '{field} wajib diisi!',
                ]
            ],
            'jenis_kelamin' => [
                'rules' => 'required',
                'errors' => [
                    'required' => '{field} wajib diisi!',
                ]
            ],
            'prodi' => [
                'rules' => 'required',
                'errors' => [
                    'required' => '{field} wajib diisi!',
                ]
            ],
 
            'alamat' => [
                'rules' => 'required',
                'errors' => [
                    'required' => '{field} wajib diisi!',
                ]
            ],
 
            'email' => [
                'rules' => 'required|valid_email|is_unique[anggota.email,id_anggota,{id_anggota}]',
                'errors' => [
                    'required' => '{field} wajib diisi!',
                    'is_unique' => '{field} sudah terdaftar',
                    'email' => '{field} Masukan email yang valid!',
                ]
            ],
            'no_hp' => [
                'rules' => 'required|numeric',
                'errors' => [
                    'required' => '{field} wajib diisi!',
                    'numeric' => '{field} hanya boleh disi dengan angka!',
                ]
            ],
 
        ])) {
 
            $typeSubmit =  $this->request->getVar('submit');
 
            if ($typeSubmit == "tambah") {
                return redirect()->to('crud/tambah')->withInput()->with('validation', $this->validation);
            } else if ($typeSubmit == "edit") {
                return redirect()->to('crud/edit/' . $this->request->getVar('id_anggota'))->withInput()->with('anggota', $this->anggota->where('id_anggota', $this->request->getVar('id_anggota'))->first(), 'validation', $this->validation);
            }
        }
 
        $id_anggota             = $this->request->getVar('id_anggota');
        $username               = $this->request->getVar('username');
        $nama                   = $this->request->getVar('nama');
        $tempat_lahir           = $this->request->getVar('tempat_lahir');
        $tanggal_lahir          = $this->request->getVar('tanggal_lahir');
        $jenis_kelamin          = $this->request->getVar('jenis_kelamin');
        $prodi                  = $this->request->getVar('prodi');
        $alamat                 = $this->request->getVar('alamat');
        $email                  = $this->request->getVar('email');
        $no_hp                  = $this->request->getVar('no_hp');
 
        if (!empty($id_anggota)) {
            $simpan =  $this->anggota->update($id_anggota, [
                'username'      => $username,
                'nama'          => $nama,
                'tempat_lahir'  => $tempat_lahir,
                'tanggal_lahir' => $tanggal_lahir,
                'jenis_kelamin' => $jenis_kelamin,
                'prodi'         => $prodi,
                'alamat'        => $alamat,
                'email'         => $email,
                'no_hp'         => $no_hp,
            ]);
            $response = "Data Berhasil di Update";
        } else {
            $simpan =  $this->anggota->save([
                'username'      => $username,
                'nama'          => $nama,
                'tempat_lahir'  => $tempat_lahir,
                'tanggal_lahir' => $tanggal_lahir,
                'jenis_kelamin' => $jenis_kelamin,
                'prodi'         => $prodi,
                'alamat'        => $alamat,
                'email'         => $email,
                'no_hp'         => $no_hp,
            ]);
            $response = "Data Berhasil di Tambahkan";
        }
        if ($simpan) {
            session()->setFlashdata('success', $response);
            return redirect()->to('crud');
        } else {
            session()->setFlashdata('error', 'Proses Gagal Dilakukan!');
            return redirect()->to('crud');
        }
    }
 
    public function hapus($id_anggota)
    {
        $this->anggota->delete($id_anggota);
        session()->setFlashdata('success', 'Data Berhasil di Hapus!');
        return redirect()->to('crud');
    }
}


Setting BaseController.php

Langkah selanjutnya adalah tambahkan session() dan juga helper 'form' pada BaseController.php


tambahkan beberapa baris kode pada base controller sehingga menjadi seperti gambar dibawah : 


setelah menambahkan session dan helper pada BaseController kita lanjut ke bagian Views.

Tambahkan 2 file baru pada folder Views/crud, dengan nama "tambah_data.php" dan "edit_data.php", sehingga dalam folder Views/crud terdapat file "data_crud.php", "edit_data.php",  dan "tambah_data.php". Seperti gambar dibawah :



Kemudian tambahkan kode dibawah ke dalam file tambah_data.php

<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Crud</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
 rel="stylesheet"  crossorigin="anonymous" 
 integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3">

</head>

<body>
 <div class="container-fluid mt-5">
  <div class="card">
   <div class="card-header py-0">
    <div class="alert" role="alert">
     <div class="row">
      <a type="button" class="text-danger col-md-2" onclick="goBack()">
      <i class="fas fa-angle-double-left"> Kembali</i>
     </a>
      <div class="col-md-8 text-gray-900 text-center">
       <h5 class="contact-gw"> <i class="fas fa-fw fa-user-graduate"></i> 
            Form Tambah Data </h5>
      </div>
     </div>
    </div>
   </div>

   <div class="card-body">
    <form action="<?= base_url('crud/simpan'); ?>" method="post" autocomplete="off">
     <?= csrf_field(); ?>
     <div class="input-group mb-3">
      <span class="input-group-text">Username</span>
      <input type="text" class="form-control 
      <?= ($validation->hasError('username')) ? 'is-invalid' : 'is-valid'; ?>" 
      name="username" value="<?= set_value('username'); ?>" 
      placeholder="Enter Username">
      <div class="invalid-feedback">
       <?= $validation->getError('username'); ?>
      </div>
     </div>
     <div class="input-group mb-3">
      <span class="input-group-text">Nama</span>
      <input type="text" class="form-control 
      <?= ($validation->hasError('nama')) ? 'is-invalid' : 'is-valid'; ?>" 
      value="<?= set_value('nama'); ?>" name="nama" placeholder="Enter Nama">
      <div class="invalid-feedback">
       <?= $validation->getError('nama'); ?>
      </div>
     </div>
     <div class="input-group mb-3">
      <span class="input-group-text">Tempat_Lahir</span>
      <input type="text" class="form-control 
<?= ($validation->hasError('tempat_lahir')) ? 'is-invalid' : 'is-valid'; ?>" 
      value="<?= set_value('tempat_lahir'); ?>" name="tempat_lahir" 
      placeholder="Enter Tempat Lahir">
      <div class="invalid-feedback">
       <?= $validation->getError('tempat_lahir'); ?>
      </div>
     </div>
     <div class="input-group mb-3">
      <span class="input-group-text">Tanggal Lahir</span>
      <input type="date" class="form-control 
<?= ($validation->hasError('tanggal_lahir')) ? 'is-invalid' : 'is-valid'; ?>" 
      value="<?= set_value('tanggal_lahir'); ?>" 
      name="tanggal_lahir" placeholder="Enter Tanggal Lahir">
      <div class="invalid-feedback">
       <?= $validation->getError('tanggal_lahir'); ?>
      </div>
     </div>
     <div class="input-group mb-3 mx-auto">
      <span class="input-group-text">Jenis Kelamin</span>&nbsp&nbsp&nbsp&nbsp
      <span><input type="radio" class="form-check-input" name="jenis_kelamin" 
        value="Laki-laki"> Laki-laki &nbsp&nbsp&nbsp&nbsp</span>
      <span><input type="radio" class="form-check-input" name="jenis_kelamin" 
        value="Perempuan"> Perempuan &nbsp&nbsp&nbsp&nbsp</span>
      <div class="text-danger small">
       <?= $validation->getError('jenis_kelamin'); ?>
      </div>
     </div>
     <div class="input-group mb-3">
      <span class="input-group-text">Program Study</span>
      <select name="prodi" class="form-select custom-select 
<?= ($validation->hasError('prodi')) ? 'is-invalid' : 'is-valid'; ?>">
       <option value="">--- Pilih Program Studi ---</option>
       <option value="Matematika">Matematika</option>
       <option value="Statistika">Statistika</option>
       <option value="Sistem Informasi">Sistem Informasi</option>
      </select>
      <div class="invalid-feedback">
       <?= $validation->getError('prodi'); ?>
      </div>
     </div>
     <div class="input-group mb-3">
      <span class="input-group-text">Email</span>
      <input type="email" class="form-control 
<?= ($validation->hasError('email')) ? 'is-invalid' : 'is-valid'; ?>" 
      value="<?= set_value('email'); ?>" name="email" placeholder="Enter email">
      <div class="invalid-feedback">
       <?= $validation->getError('email'); ?>
      </div>
     </div>
     <div class="input-group mb-3">
      <span class="input-group-text">Alamat</span>
      <textarea type="text" class="form-control 
<?= ($validation->hasError('alamat')) ? 'is-invalid' : 'is-valid'; ?>" 
      value="<?= set_value('alamat'); ?>" name="alamat" 
      placeholder="Enter alamat"></textarea>
      <div class="invalid-feedback">
       <?= $validation->getError('alamat'); ?>
      </div>
     </div>
     <div class="input-group mb-3">
      <span class="input-group-text">HP</span>
      <input type="number" class="form-control 
<?= ($validation->hasError('no_hp')) ? 'is-invalid' : 'is-valid'; ?>" 
      value="<?= set_value('no_hp'); ?>" name="no_hp" placeholder="Enter no_hp">
      <div class="invalid-feedback">
       <?= $validation->getError('no_hp'); ?>
      </div>
     </div>

     <div align="center">
      <button type="submit" name="submit" value="tambah" 
        class="btn btn-sm btn-primary">Simpan</button>
     </div>
    </form>
   </div>

  </div>

 </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"     
  crossorigin="anonymous"></script>
</body>
</html>

dan tambahkan kode dibawah kedalam file edit_data.php

<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Crud</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
     rel="stylesheet" crossorigin="anonymous" 
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3">
</head>

<body>
 <div class="container-fluid mt-5">
  <div class="card">
   <div class="card-header py-0">
    <div class="alert" role="alert">
     <div class="row">
      <a type="button" class="text-danger col-md-2" onclick="goBack()">
        <i class="fas fa-angle-double-left"> Kembali</i>
      </a>
      <div class="col-md-8 text-gray-900 text-center">
       <h5 class="contact-gw">
        <i class="fas fa-fw fa-user-graduate"></i> Form Edit Data
       </h5>
      </div>
     </div>
    </div>
   </div>

   <div class="card-body">
    <form action="<?= base_url('crud/simpan'); ?>" method="post">
     <div class="mb-3">
      <label for="exampleInputUsername" class="form-label">Username</label>
      <input type="hidden" name="id_anggota" 
      value="<?= $anggota['id_anggota']; ?>" class="form-control" id="">
      <input type="text" name="username" 
      value="<?= (old('username')) ? old('username') : $anggota['username']; ?>" 
      class="form-control 
      <?= ($validation->hasError('username')) ? 'is-invalid' : 'is-valid'; ?>" id="">
      <div class=" invalid-feedback">
       <?= $validation->getError('username'); ?>
      </div>
     </div>
     <div class="mb-3">
      <label for="exampleInputNama" class="form-label">Nama</label>
      <input type="text" name="nama" \
      value="<?= (old('nama')) ? old('nama') : $anggota['nama']; ?>" class="form-control 
       <?= ($validation->hasError('nama')) ? 'is-invalid' : 'is-valid'; ?>" id="">
      <div class=" invalid-feedback">
       <?= $validation->getError('nama'); ?>
      </div>
     </div>
     <div class="mb-3">
      <label for="exampleInputTempatLahir" class="form-label">Tempat Lahir</label>
      <input type="text" name="tempat_lahir" 
      value="<?= (old('tempat_lahir')) ? old('tempat_lahir') : $anggota['tempat_lahir']; ?>" 
      class="form-control 
      <?= ($validation->hasError('tempat_lahir')) ? 'is-invalid' : 'is-valid'; ?>" id="">
      <div class=" invalid-feedback">
       <?= $validation->getError('tempat_lahir'); ?>
      </div>
     </div>
     <div class=" mb-3">
      <label for="exampleInputTanggalLahir" class="form-label">Tanggal_Lahir</label>
      <input type="date" name="tanggal_lahir" 
      value="<?= (old('tanggal_lahir')) ? old('tanggal_lahir') : $anggota['tanggal_lahir']; ?>" 
      class="form-control 
      <?= ($validation->hasError('tanggal_lahir')) ? 'is-invalid' : 'is-valid'; ?>" id="">
      <div class=" invalid-feedback">
       <?= $validation->getError('tanggal_lahir'); ?>
      </div>
     </div>
     <div class="mb-1">
      <label for="exampleInputJenisKelamin" class="form-label">Jenis Kelamin :
         &emsp;&emsp;&emsp;</label>
      <?php
      if ($anggota['jenis_kelamin'] == "Laki-laki") {
       echo '<input type="radio" id="Laki-laki1" class="form-check-input" 
        name="jenis_kelamin" value="Laki-laki" checked="checked">
       <label class="form-check-label" for="Laki-laki1"> Laki-laki </label>&emsp;';
       echo '<input type="radio" id="Perempuan1" class="form-check-input" 
        name="jenis_kelamin" value="Perempuan"> 
       <label class="form-check-label" for="Perempuan1"> Perempuan  </label> &emsp;';
      } else {
       echo '<input type="radio" id="Laki-laki2" class="form-check-input" 
        name="jenis_kelamin" value="Laki-laki">
       <label class="form-check-label" for="Laki-laki2"> Laki-laki </label> &emsp;';
       echo '<input type="radio" id="Perempuan2" class="form-check-input" 
        name="jenis_kelamin" value="Perempuan" checked="checked"> 
       <label class="form-check-label" for="Perempuan2"> Perempuan  </label> &emsp;';
      }
      ?>

      <div class=" invalid-feedback">
       <?= $validation->getError('jenis_kelamin'); ?>
      </div>
      <div class="mb-3">
       <label for="exampleInputProdi" class="form-label">Prodi</label>
       <select name="prodi" class="form-control custom-select" required>
        <option <?php if ($anggota['prodi'] == "Matematika") {
                 echo "selected";
                } ?> value="Matematika">Matematika</option>

        <option <?php if ($anggota['prodi']  == "Sistem Informasi") {
                 echo "selected";
                } ?> value="Sistem Informasi">Sistem Informasi</option>

        <option <?php if ($anggota['prodi'] == "Statistika") {
                 echo "selected";
                } ?> value="Statistika">Statistika</option>
       </select>
      </div>
      <div class="mb-3">
       <label for="exampleInputProdi" class="form-label">Alamat</label>
       <div class="form-floating">
        <textarea class="form-control 
        <?= ($validation->hasError('alamat')) ? 'is-invalid' : 'is-valid'; ?>" 
        name=" alamat" value="<?= (old('alamat')) ? old('alamat') : $anggota['alamat']; ?>" 
        id="floatingTextarea"></textarea>
        <label for="floatingTextarea"><?= $anggota['alamat']; ?></label>
        <div class="invalid-feedback">
         <?= $validation->getError('alamat'); ?>
        </div>
       </div>
      </div>
      <div class="mb-3">
       <label for="exampleInputEmail" class="form-label">Email</label>
       <input type="text" name="email" value="<?= (old('email')) ? old('email') : $anggota['email']; ?>" 
       class="form-control" id="">
      </div>
      <div class="mb-3">
       <label for="exampleInputHP" class="form-label">HP</label>
       <input type="number" name="no_hp" value="<?= (old('no_hp')) ? old('no_hp') : $anggota['no_hp']; ?>" 
       class="form-control" id="">
      </div>
      <button type="submit" name="submit" value="edit" class="btn btn-primary">Submit</button>
    </form>
   </div>
  </div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
 integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 
 crossorigin="anonymous"></script>
</body>
</html>

Setelah teman-teman telah mengikuti langkah-langkah diatas secara keseluruhan, sekarang saatnya waktunya kita uji coba aplikasi crud kita pada browser, kemudian tekan atau klik tombol tambah data seperti langkah berikut :

 
maka akan tampil halaman tambah data :


Disini kita akan uji coba form tambah data kita apakah sudah berjalan dengan baik atau belum, teman-teman coba untuk menambahkan data baru

Contoh :



Setelah kita menekan tombol simpan maka kita akan di arahkan ke halaman data_crud.php. Dan disini form tambah datanya sudah berhasil ya teman-teman sudah ada data username helloword, kemudian ada notif atau alert "Data Berhasil ditambahkan". Dengan ini proses tambah data kita berhasil dijalankan.

Selanjutnya kita akan uji coba form edit data, klik tombol "Edit", karena tombol editnya ada banyak jadi pilih data apa saja yang mau diedit isinya.Setelah menukan tombol Edit maka akan diarahkan ke halaman form edit data seperti contoh berikut :



Disini saya akan mengganti tulisan helloword menjadi helloword 2, teman-teman bebas untuk mengasi datanya sesuai keniginan, setelah itu klik tombol Submit


Dari gambar diatas menunjukan bahwa form edit datanya juga sudah berhasil ya teman-teman, terlihat dari data sebelumnya bertuliskan kata "helloword" berhasil kita ubah menjadi "helloword 2" dan muncul notifikasi  "Data Berhasil di Update".

langkah selanjutnya adalah uji coba hapus data. Teman-teman bisa memilih data mana saja yang mau dihapus dengan cara klik tombol Delete.



Sampai sini aplikasi CRUD kita sudah jadi teman-teman, tapi belum selesai sampai disini, lah kok belum selesai? iya, karena sampai sini kita baru berhasil melakukan CRUD data saja belum dengan Datatablesnya, lalu bagaimana cara membuat datatables. Tentunya caranya sangat mudah! 

Okeyy langsung kita gasken untuk manambahkan Datatables pada aplikasi CRUD kita, saya ingatkan lagi bagi teman-teman yang belum memiliki plugins Datatablesnya silahkan download pada link diatas.

Langkah yang perlu kita lakukan adalah bukan kembali file data_curd.php kita pada folder Views/crud, kemudian Ctrl+F ketikkan <table , lalu tambahkan id="dataTable


lalu tambahkan kode dibawah dianatar tag <head> dan </head>

<link href="<?= base_url('datatables/dataTables.bootstrap4.css') ?>" rel="stylesheet">

seperti contoh berikut:


setelah itu geser kebawah sampai menemukan tag </body> dan </html>, lalu tambahkan kode dibawah

<script src="<?= base_url('jquery/jquery.min.js') ?>"></script>
<script src="<?= base_url('datatables/jquery.dataTables.js') ?>"></script>
<script src="<?= base_url('datatables/dataTables.bootstrap4.js') ?>"></script>
<script src="<?= base_url('js/demo/datatables-demo.js') ?>"></script>

sebelum Tag </body> dan </html>, seperti langkah dibawah :


Step terakhir adalah extract file datatables.zip, jquery.zip dan js.zip yang telah didownload pada link diatas 


setelah file file berhasil di extract pindahkan folder datatables, jquery dan js ke dalam project kita pada folder public 


Setelah itu kembali ke web browser untuk menjalankan aplikasi crud kita dengan me-refresh tab yang digunakan untuk menampilkan halaman data crud maka hasilnya akan seperti gambar dibawah :


ohhh iya teman-teman, hampir lupa perlu diketahui jika pada project ini kita menggunakan bootstrap 5 css dengan cara akses melalui internet, pastikan teman-teman harus ter-koneksi internet sebelum menjalankan project-nya, jika teman-teman ingin menggunakan bootstrap 5 css secara offline teman-teman download terlebih dahulu file bootstrap 5 css, kemudian copy dan paste-kan file bootstrap 5 css pada folder public di project codeigniter 4 teman-teman dan terakhir tambahkan juga <link> dan <script> untuk mengakses file bootstrap 5 css  tersebut.

Sampai disini Aplikasi CRUD + Datatables kita sudah selesai. Gimana teman-teman apakah ada yang bermasalah pada kodingannya, jika ada yang ingin di tanyakan, jangan ragu untuk bertanya pada kolom komentar. Sampai jumpa pada tutorial-tutorial berikutnya semoga bermanfaat bye..byee ^^





Tags

2 Komentar

  1. Unknown10 April 2022 pukul 00.22

    Boleh minta filenya bang? Untuk tugas

    BalasHapus
  2. SandyPutraSamosir20 Mei 2022 pukul 01.01

    Very good tutorial.
    Thank you so much.
    Please create more toturials about Ci4.

    Reply

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak