Beranda / Codeigniter

Best Practice Tutorial CRUD Codeigniter 4

Oleh theasgard29 Posting Komentar


bagi anda yang sudah memiliki sebuah web yang menggunakan Codeigniter 3 tidak memungkinkan dapat diupgrade menggunakan  versi ini hal tersebut disampaikan pada laman resmi dokumentasi codeigniter 4 yang menyebutkan bahwa : CodeIgniter 4 is a rewrite of the framework and is not backwards compatible. untuk mengubah nya menjadi Codeingiter 4 tentu saja anda harus menulis ulang kode program tersebut.

Pada tutorial kali ini kita akan bahas bagaimana cara membuat aplikasi CRUD (Create,Read,Update,Delete) menggunakan best practice / cara terbaik yang telah dijelaskan di laman resmi dokumentasi codeingiter 4, pembuatan aplikasi mengguankan best practice berarti kita akan memanfaatkan fasilitas yang disarankan pada penggunaan Model, View dan Controller. 

langsung kita mulai saja untuk membuat aplikasi Best Practice CRUD pada Codeigniter 4, berikut langkah-langkah yang akan kita lakukan dalam pembuatan aplikasi web saat ini :
  1. Instalasi Codeigniter 4
  2. Membuat Database
  3. Menampilkan Data
  4. Simpan Data
  5. Ubah Data
  6. Hapus Data

Instalasi Codeigniter 4

untuk melakukan instalasi kita terdapat beberapa cara yaitu secara manual atau menggunakan composer jika menggunakan instalasi secara manual anda dapat download secara langsung pada link berikut : https://codeigniter.com/download, karena pada tutorial kali ini kita menggunakan best practice maka untuk instalasi kita akan menggunakan composer, composer merupakan dependency manager pada php yang akan memudahkan kita ketika melakukan instalasi terutama jika kita akan menginstal ThirdParty atau aplikasi pihak ketiga maka akan langsung terintegrasi dengan aplikasi yang kita buat, jika anda belum instal composer dapat anda download terlebih dahulu di : https://getcomposer.org/download/. perintah composer untuk melakukan instalasi sebagai berikut : 

      composer create-project codeigniter4/appstarter blog--no-dev
blog adalah nama projek yang  kita buat,  penambahan akhiran --no-dev berarti kita tidak menginstall phpunit yang digunakan untuk unit testing, karena pada tutorial kali ini tidak akan kita bahas.

Codeinigter 4 saat ini sudah memiliki server tersendiri yang sudah terintegrasi dengan aplikasi bawaan nya sehingga kita tidak perlu menempatkan pada local folder htdocs jika anda menggunakan xampp, bisa disimpan dimana saja bebas. untuk menjalankan, berikut adalah tampilan ketika melakukan instalasi menggunakan composer :

untuk menjalankan aplikasi tersebut kita dapat menggunakan perintah sebagai berikut kita perlu masuk dulu kedalam folder blog dengan perintah cd blog: 

php spark serve
hasilnya sebagai berikut :

Membuat Database

database yang akan kita gunakan adalah MySQL atau Mariadb, untuk membuat database anda dapat buat secara manual menggunakan phpmyadmin atau tools yang lain seprti SQLYog,Navicat,HeidiSQL.
namun sesuai dengan best practice kita akan menggunakan migration, dengan menggunakan migration kita dapat membuat sebuah table tanpa membuka tools diatas, sehingga kita bisa lebih fokus terhadap pada tool yang kita gunakan, kali ini kita akan menggunakan visual studio code sebagai tools.

silahkan buka terlebih dahulu project menggunakan visual studio code, setelah itu kita akan membuat database dan sebuah table menggunaan migration, database yang akan kita buat akan diberi nama blog, dan table dengan nama posts. untuk membuat table kita perlu membuat file migration dengan perintah sebagai berikut: 

  php spark migrate:create posts
buka file yang barusan kita buat, file tersbut berada pada folder app/Database/Migration, buka file tersebut kemudian modifikasi menjadi seperti berikut : 

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Posts extends Migration
{
 public function up()
 {
  $this->forge->addField([
   'id'            => [
    'type'              => 'BIGINT',
    'constraint'        => 20,
    'unsigned'          => TRUE,
    'auto_increment'    => TRUE
   ],
   'title'              => [
    'type'              => 'VARCHAR',
    'constraint'        => '100',
   ],
   'content'                  => [
    'type'              => 'VARCHAR',
    'constraint'        => '100',
   ],
  ]);
  $this->forge->addKey('id', TRUE);
  $this->forge->createTable('posts');
 }

 public function down()
 {
  $this->forge->dropTable('posts');
 }
}
Sebelum menjalankan migrasi kita perlu melakukan konfigurasi agar database terkoneksi dengan aplikasi yang kita buat, untuk melakukan konfigurasi cari file dengan nama env kemudian rename menjadi .env stelah itu cari code berikut : Jalankan perintah migration dengan perintah sebagai berikut :   

# database.tests.hostname = localhost
# database.tests.database = ci4
# database.tests.username = root
# database.tests.password = root
# database.tests.DBDriver = MySQLi

Rubah menjadi berikut :

database.default.hostname = localhost
database.default.database = blog
database.default.username = root
database.default.password = 
database.default.DBDriver = MySQLi

Setelah itu buka cmd jalankan perintah migrasi seperti berikut : 

php spark migrate
Jika berhasil secara otomatis tabel posts akan ditambahkan pada database blog anda. setelah kita berhasil membuat database blog dan sebuah tabel posts selanjutnya kita akan mengisi dulu data pada table posts, codeigniter menyediakan sebuah fitur untuk mengisi data dummy atau sample data menggunakan seeder, jadi kita tidak perlu membuka database untuk menambah data yang perlu kita lakukan adalah membuat sebuah file seeder kemudian diisi dengan data yang kita inginkan.
untuk membuat file seeder kita dapat menambahkan pada direktori app/Database/Seeds tambahkan sebuah file php dengan nama PostsSeeder.php kemudian isi file tersebut sebagai berikut :
<?php

namespace App\Database\Seeds;

class PostsSeeder extends \CodeIgniter\Database\Seeder
{
    public function run()
    {
        $data = [
            'title'      => 'Contoh Title',
            'content'    => 'Contoh Content',

        ];
        $this->db->table('posts')->insert($data);
    }
}
setelah membuat file tesebut kita langsung eksekusi saja dengan perintah : 

php spark db:seed PostsSeeder
silahkan cek database anda jika berhasil akan muncul sebuah baris data sesuai dengan code yang kita buat diatas. selanjutnya kita akan membuat beberapa file diantaranya adalah :
  1. Layout, atau template digunakan untuk mengatur tata latak tampilan yang akan digunakan sebagai template. sehingga dapat kita gunakan berulang-ulang.
  2. PostModel,digunakan untuk pengaturan proses-proses yang akan digunakan kita juga dapat menambahkan fungsi-fungsi lain pada file tersebut, model sangat penting karena langsung berhubungan dengan database,
  3. Posts, digunakan sebagai Controller untuk mengatur halaman yang akan dipanggil atau ditampilkan.
  4. View, digunakan untuk menampilkan dan mengatur halaman, file view akan berjalan diatas template yang ktia buat pada poin satu diatas.
codeigniter 4 juga sudah menyediakan pengisian kolom yang akan terinput secara otomatis yaitu : kolom tanggal input, tanggal update dan tanggal delete, sebelumnya kita belum membuat kolom-kolom tersebut maka sekarang silahkan tambahkan sebuah file baru pada folder app\Database\Migrations menggunkan cmd dengan perintah sebagai berikut :


    php spark migrate:create AlterPosts
kemudian masukan coding berikut : 

    <?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class AlterPosts extends Migration
{
 public function up()
 {
  $field = [
   'created_at'              => [
    'type'              => 'DATE',
   ],
   'updated_at'                  => [
    'type'              => 'DATE',
   ],
   'deleted_at'                  => [
    'type'              => 'DATE',
   ],
  ];
  $this->forge->addColumn('posts', $field);
 }
    
    public function down()
 {
  $this->forge->dropTable('posts');
 }
}
jalankan kembali perintah migrate agar kolom yang kita buat terupdate dengan perintah : 

   php spark migrate:refresh

layout

buatlah file dengan nama layout.php pada folder Views, kemudian masukan coding berikut : 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog - <?php echo $this->getData()['headerTitle'] ?? ''; ?> </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Blog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="<?= base_url('posts') ?>">Posts<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?= base_url('about') ?>">About</a>
                </li>
            </ul>
            <h4>APIKASI BLOG SEDERHANA</h4>
        </div>
    </nav>
    <div class="container">
        <?php
        $session = session();
        if ($session->has('status')) : ?>
            <div class="mt-2 alert alert-primary" role="alert">
                <?= $session->getFlashdata('status'); ?>
            </div>
        <?php endif ?>
        <?= $this->renderSection('content') ?>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>
untuk mengatur tampilan layout diatas  kita menggunakan bootstrap 4 agar halaman yang dibuat bisa lebih rapih, yang perlu kita perhatikan pada layout ini terdapat perintah renderSection yang berada pada class container , perintah tersebut berguna untuk merender halaman yang ada pada view. sehingga penulisan script pada view kita tidak perlu lagi menulisakan script html secara utuh, cara pemanggilan nya akan dijelaskan nanti pada pembuatan view.

PostModel

Berikut adalah coding dari PostModel.php yang berada pada folder Models. 

<?php

namespace App\Models;

use CodeIgniter\Model;

class PostsModel extends Model
{
    protected $table = "posts";
    protected $allowedFields = ['title', 'content'];
    protected $returnType     = 'array';
    protected $useSoftDeletes = true;

    protected $useTimestamps = true;
    protected $createdField  = 'created_at';
    protected $updatedField  = 'updated_at';
    protected $deletedField  = 'deleted_at';

    protected $validationRules = [
        'title'       => 'required|alpha_numeric_space|min_length[3]max_length[255]',
        'content'        => 'required|min_length[3]|max_length[255]',
    ];

    protected $validationMessages = [
        'title' => [
            'required' => 'tidak boleh kosong',
            'alpha_numeric_space' => 'tidak boleh berisi karakter',
            'min_length' => 'minimal tiga karakter',
        ],
        'content' => [
            'required' => 'tidak boleh kosong',
            'min_length' => 'minimal tiga karakter',
        ],
    ];
}
Coding diatas terdapat beberapa inisialsasi beberapa variabel yang mempunyai keegunaan nya masing-masing diantaranya adalah :
  1. $table.digunakan untuk medefinisikan nama tabel yang kita buat pada database,
  2. $allowedFields, adalah nama-nama kolom yang diijinkan untuk  kita input, selain kolom yang akan diinput secara otomatis terinput seperti created_at,updated_at dan deleted_at.
  3. $createdField, adalah inisialisasi untuk penginputan kolom created_at secara otomatis, sehingga kita tidak perlu lagi menambahkan nya pada form input.
  4. $updatedField, adalah inisialisasi untuk penginputan kolom updated_at secara otomatis, sehingga kita tidak perlu lagi menambahkan nya pada form input.
  5. $deletedField, adalah inisialisasi untuk penginputan kolom deleted_at secara otomatis, sehingga kita tidak perlu lagi menambahkan nya pada form input.
  6. $returnType, untuk menentukan jenis data yang dihasilkan oleh model, pada variabel diatas kita isi denga array berarti output yang akan dihsilkan berupa array.
  7.  $useSoftDeletes, jika kita mengaktifkan variabel ini menjadi true maka data yang ada pada tabel sebenarnya tidak akan dihapus hanya status tanggalnya pada kolom deleted_at akan terupdate, sehingga data yang tampil sebenarnya adalah yang kolom created_at nya tidak terisi atau null . tetapi jika kita menginginkan data benar-benar dihapus, kita ubah saja menjadi false atau kita tidak perlu mendefinisikannya.
  8. $validationRules, adalah aturan-aturan validasi yang berlaku untuk tiap kolom.
  9. $validationMessages,berguna untuk memodifikasi pesan yang akan muncul jika terjadi kesalahan input. jika kita tidak membuatnya maka akan muncul secara default menggunakan bahsa inggris.

Posts

adalah file controller yang berada pada folder Controller dengan nama Posts.php berikut adalah coding dari file tesebut :

<?php

namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\PostsModel;

class Posts extends Controller
{

    protected $postModel;
    public function __construct()
    {
        $this->postModel = new PostsModel();
        helper('form');
    }

    public function index()
    {
        $posts = $this->postModel->findAll();
        $data = [
            'headerTitle' => 'Daftar Post',
            'posts' => $posts,
        ];
        echo view('posts/index', $data);
    }

    public function add()
    {
        if ($this->request->getMethod() === 'post') {
            $data = $this->request->getPost();
            if ($this->postModel->save($data)) {
                $session = session();
                $session->setFlashdata('status', 'Artikel baru telah ditambahkan.');
                return redirect()->to(base_url('posts'));
            }
            $errors = $this->postModel->errors();
            return view('posts/add', [
                'errors' =>  $errors,
                'headerTitle' => 'Tambah Posts',
            ]);
        }

        return view('posts/add', ['headerTitle' => 'Tambah Posts',]);
    }
    public function edit($id)
    {
        $model = $this->postModel->find($id);
        if ($this->request->getMethod() === 'post') {
            $data = $this->request->getPost();
            $data['id']     = $data['id'] ?? '';
            $data['title']  = $data['title'] ?? '';
            $data['content'] = $data['content'] ?? '';
            if ($this->postModel->save($data)) {
                $session = session();
                $session->setFlashdata('status', 'Artikel baru telah diubah');
                return redirect()->to(base_url('posts'));
            }
        }
        $errors = $this->postModel->errors();
        return view('posts/edit', [
            'headerTitle' => 'Edit Artikel',
            'errors' =>  $errors,
            'posts' => $model
        ]);
    }

    public function delete($id)
    {
        $delete = $this->postModel->delete($id);
        if ($delete == true) {
            $session = session();
            $session->setFlashdata('status', 'artikel telah dihapus');
            return redirect()->to(base_url('posts'));
        }
    }
}

Jika kita perhatikan pada coding diatas terdapat beberapa fungsi/function yaitu :
  1. _construct, digunakan sebagai constructor yang akan dijalankan ketika halaman diload pertama kali.
  2. index, digunakan untuk menampilkan data pada database 
  3. add, digunakan untuk menambahkan form input data.
  4. edit, digunakan untuk menampilkan data yang akan diedit.
  5. delete, digunakan untuk menghapus data.

Views

Pada folder Views kita akan membuat folder baru dengan nama posts, kemudian pada folder tersebut akan ditambahkan beberapa file yang berguna untuk mengatur tampilan, diantanya adalah :
  1. index, digunakan untuk menampilkan data posts yang berasal dari controller pada function index.
  2. add, digunakan untuk halaman input data posts,
  3. edit, digunakan untuk halaman edit.
demikian Best Practice Tutorial CRUD codeigniter 4, jika ada yang mau ditanyakan silahkan isi pada kolom komentar. terimakasih.

source code aplikasi bisa didownload disini Download



Posting Komentar untuk "Best Practice Tutorial CRUD Codeigniter 4"

Posting Komentar