belajar crud codeigniter 3

Belajar Create, Read, Update, Delete Codeigniter 3

Leave a Comment / Codeigniter, PHP / By

Pada tutorial kali ini kita akan belajar CRUD Codeigniter 3. CRUD merupakan create, read, update, delete dalam mengatur suatu data yang nantinya akan ditampilkan. Hal ini merupakan dasar yang harus dipahami untuk setiap belajar bahasa pemrograman

Codeigniter 3 merupakan framework PHP yang dapat digunakan untuk membuat sebuah aplikasi berbasis website. Codeigniter sangat berguna sekali bagi pengembang website karena sangat mudah digunakan dan sudah tersedia dokumentasi penggunaanya.

Sebelum kita membuat CRUD Codeigniter 3, kita perlu mendownload framework Codeigniter 3 terlebih dahulu.

Download Codeigniter 3

Sebelum mendownload codeigniter 3 pastikan kalian sudah mendownload XAMPP terlebih dahulu. Jika XAMPP sudah terinstall, selanjutnya kalian download codeigniter di sini. Klik tombol download di bagian codeigniter 3.

Pindahkan hasil download ke dalam xampp/htdocs. Kemudian, kalian extract file dan ubah namanya menjadi crud-codeigniter3. Buka folder tersebut ke dalam text editor kalian dan ini merupakan struktur folder awal dari codeigniter 3.

struktur folder codeigniter 3

BACA JUGA : 16 TEXT EDITOR PC TERBAIK UNTUK PEMULA 2019

Buka http://localhost/crud-codeigniter3/ di browser kalian. Disana nantinya akan terdapat tulisan welcome to codeigniter.

Buat Database di phpMyAdmin

Database yang akan digunakan kali ini yaitu mysql. Kalian bisa membuka http://localhost/phpmyadmin/ dan klik baru disebelah kiri. Beri nama database dengan belajar-crud. Jika sudah klik buat dan selamat database berhasil dibuat.

Selanjutnya masukkan query berikut ke dalam database yang barusan dibuat. Caranya dengan membuka bagian sql, lalu copy query berikut ini dan paste ke dalam sql. Jika sudah klik tombol kirim.

CREATE TABLE  employee (
  id INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  name VARCHAR(45) NOT NULL,
  lastname VARCHAR(45),
  dept VARCHAR(45) DEFAULT 'sales',
  PRIMARY KEY (id)
)

Buka application/config/database.php dan isi username dengan root dan database dengan belajar-crud.

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'belajar-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
);

Setup Config

Hal pertama yang perlu kita lakukan adalah merubah base_url() sesuai url folder kita. Untuk mengubahnya pertama buka file application/config/config.php dan ubah seperti berikut ini

$config['base_url'] = 'http://localhost/crud-codeigniter3/';
$config['index_page'] = '';

Bagian base_url diisi dengan url yang digunakan dan index_page dikosongi karena kita akan menghapus index.php di dalam url. Misalnya http://localhost/crud-codeigniter3/index.php menjadi http://localhost/crud-codeigniter3/.

Kita harus perlu menambahi file .htaccess menjalankan config diatas. Pertama kita akan membuat file .htaccess di dalam folder application. Setelah itu, isi dengan code berikut

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

Dan untuk bagian terakhirnya kita akan setup autoload. Autoload bisa dibuka di application/config/autoload.php. Setelah itu kita akan mengubah beberapa autoload.

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

Disini kita menggunakan libraries database untuk mengelola data yang nantinya digunakan dalam CRUD. Session nanti digunakan untuk mengirimkan pesan berhasil atau gagal dan form validation digunakan untuk melakukan pengecekan untuk setiap inputan sebelum disimpan. Sedangkan di helper kita hanya mengisikan url saja.

Buat Controller

Controller digunakan untuk menghandle crud (create, read, update, delete). Untuk membuat controller kalian terlebih dahulu membuka application/controllers. Setelah itu, buat file baru dengan nama Employee.php

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

class Employee extends CI_Controller
{
  public function __construct()
  {
    parent::__construct();
    $this->load->model('Employee_model');
  }

  public function index()
  {
    $data['employees'] = $this->Employee_model->get_employee();
    $this->load->view('employee/index', $data);
  }

  public function add()
  {
    $this->form_validation->set_rules('name', 'First Name', 'required|trim');
    $this->form_validation->set_rules('lastname', 'Last Name', 'required|trim');
    $this->form_validation->set_rules('dept', 'Department', 'required|trim');

    if ($this->form_validation->run() == FALSE) {
      $this->load->view('employee/add');
    } else {
      $this->Employee_model->add_employee();
      $this->session->set_flashdata('message', '<div class="alert alert-success" role="alert">Data karyawan baru berhasil ditambahkan</div>');
      redirect('employee');
    }
  }

  public function edit()
  {
    $this->form_validation->set_rules('name', 'First Name', 'required|trim');
    $this->form_validation->set_rules('lastname', 'Last Name', 'required|trim');
    $this->form_validation->set_rules('dept', 'Department', 'required|trim');

    if ($this->form_validation->run() == FALSE) {
      $id = $this->input->get('id');
      $data['employee'] = $this->Employee_model->get_employee_detail($id);
      $this->load->view('employee/edit', $data);
    } else {
      $this->Employee_model->edit_employee();
      $this->session->set_flashdata('message', '<div class="alert alert-success" role="alert">Data karyawan berhasil diubah</div>');
      redirect('employee');
    }
  }

  public function delete()
  {
    $this->Employee_model->delete_employee();
    $this->session->set_flashdata('message', '<div class="alert alert-success" role="alert">Data karyawan berhasil dihapus</div>');
    redirect('employee');
  }
}

Disini kita telah membuat fungsi dari setiap CRUD yaitu index() akan menampilkan data dari database, add() akan menambahkan data baru, edit() akan merubah data, dan delete akan menghapus data dari database.

Buat Models

Kita juga perlu membuat models terlebih dahulu agar bisa terhubung dengan database. Caranya kalian ke application/models dan buat file dengan nama Employee_model.php

<?php

class Employee_model extends CI_Model
{
  public function get_employee()
  {
    return  $this->db->get('employee')->result_array();
  }

  public function get_employee_detail($id)
  {
    return $this->db->get_where('employee', ['id' => $id])->row_array();
  }

  public function add_employee()
  {
    $data = [
      'name' => $this->input->post('name'),
      'lastname' => $this->input->post("lastname"),
      'dept' => $this->input->post("dept")
    ];

    $this->db->insert('employee', $data);
  }

  public function edit_employee()
  {
    $data = [
      'name' => $this->input->post('name'),
      'lastname' => $this->input->post("lastname"),
      'dept' => $this->input->post("dept")
    ];

    $this->db->where('id', $this->input->get('id'));
    $this->db->update('employee', $data);
  }

  public function delete_employee()
  {
    $this->db->delete('employee', ['id' => $this->input->get('id')]);
  }
}

Kita telah membuat beberapa fungsi untuk bisa mengelola database. Misalnya get_employee() disini nantinya akan menampilkan semua daftar karyawan dengan bentuk array.

Buat Views

Setelah berhasil membuat controller dan models, selanjutnya kita akan membuat views yang nantinya digunakan sebagai tampilan. Buka application/views kemudian buat folder baru dengan nama employee. Di dalam folder tersebut buat 3 file dengan nama index.php, add.php, dan edit.php

Untuk index.php akan menampilkan daftar karyawan. add.php akan menampilkan fitur tambah karyawan dan terakhir edit.php akan menampilkan fitur ubah data karyawan.

Pertama kita akan membuat tampilan pada index.php dahulu

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>Belajar CRUD Codeigniter</title>
</head>

<body>
  <div class="container">
    <h1 class="text-center mt-5">Belajar CRUD Codeigniter</h1>

    <?= $this->session->flashdata('message') ?>

    <a href="<?= base_url('employee/add') ?>" class="btn btn-primary">
      Tambah Karyawan
    </a>

    <table class="table mt-5">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Nama Depan</th>
          <th scope="col">Nama Belakang</th>
          <th scope="col">Departemen</th>
          <th scope="col">Setting</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($employees as $emp) : ?>
          <tr>
            <td><?= $emp['id'] ?></td>
            <td><?= $emp['name'] ?></td>
            <td><?= $emp['lastname'] ?></td>
            <td><?= $emp['dept'] ?></td>
            <td>
              <a href="<?= base_url('employee/edit?id=') . $emp['id'] ?>" class="btn btn-warning">Ubah</a>
              <a href="<?= base_url('employee/delete?id=') . $emp['id'] ?>" class="btn btn-danger">Hapus</a>
            </td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>

</html>

Dengan bantuan bootstrap 5 kita akan membuat tabel yang nantinya berisi data karyawan dan beberapa tombol untuk tambah, ubah dan hapus.

Selanjutnya, kita akan membuat tampilan untuk fitur tambah. Disini kita akan membuat form dengan beberapa inputan sebagai berikut.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>Belajar Create Codeigniter</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="card mt-3">
          <div class="card-body">
            <form action="<?= base_url('employee/add') ?>" method="post">
              <div class="form-group mb-3">
                <div class="input-group">
                  <input name="name" id="name" type="text" class="form-control" placeholder="Nama Depan" value="<?= set_value('name') ?>">
                </div>
                <?= form_error('name', '<small class="text-danger pl-3">', '</small>'); ?>
              </div>

              <div class="form-group mb-3">
                <div class="input-group">
                  <input name="lastname" id="lastname" type="text" class="form-control" placeholder="Nama Belakang" value="<?= set_value('lastname') ?>">
                </div>
                <?= form_error('lastname', '<small class="text-danger pl-3">', '</small>'); ?>
              </div>

              <div class="form-group mb-3">
                <div class="input-group">
                  <input name="dept" id="dept" type="text" class="form-control" placeholder="Departemen" value="<?= set_value('dept') ?>">
                </div>
                <?= form_error('dept', '<small class="text-danger pl-3">', '</small>'); ?>
              </div>

              <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block">Tambah</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>

</html>

Bagian terakhir kita akan membuat tampilan untuk ubah data karyawan. Kalian bisa membuka terlebih dahulu file edit.php

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>Belajar Update Codeigniter</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="card mt-3">
          <div class="card-body">
            <form action="<?= base_url('employee/edit?' . $employee['id']) ?>" method="post">
              <div class="form-group mb-3">
                <div class="input-group">
                  <input name="name" id="name" type="text" class="form-control" placeholder="Nama Depan" value="<?= $employee['name'] ?>">
                </div>
                <?= form_error('name', '<small class="text-danger pl-3">', '</small>'); ?>
              </div>

              <div class="form-group mb-3">
                <div class="input-group">
                  <input name="lastname" id="lastname" type="text" class="form-control" placeholder="Nama Belakang" value="<?= $employee['lastname'] ?>">
                </div>
                <?= form_error('lastname', '<small class="text-danger pl-3">', '</small>'); ?>
              </div>

              <div class="form-group mb-3">
                <div class="input-group">
                  <input name="dept" id="dept" type="text" class="form-control" placeholder="Departemen" value="<?= $employee['dept'] ?>">
                </div>
                <?= form_error('dept', '<small class="text-danger pl-3">', '</small>'); ?>
              </div>

              <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block">Edit</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>

</html>

Tidak jauh beda dengan tampilan tambah karyawan, disini kita hanya menambahkan data karyawan terlebih dahulu di setiap inputan.

BACA JUGA : MEMBUAT UPLOAD FILE DI CODEIGNITER 3

Edit Routes

Agar controller yang tadi kita buat bisa digunakan. Kita harus edit terlebih dahulu default controller di routes.

Pertama, kalian buka application/config/routes.php dan ubah bagian default controller menjadi nama controller yang kalian buat tadi dengan huruf kecil semua.

$route['default_controller'] = 'employee';

Dan lihat tampilan websitenya akan berubah. Selamat kalian telah berhasil belajar CRUD Codeigniter 3. Jika ada kesulitan kalian bisa tanyakan di kolom komentar dibawah sini.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top