Tutorial Lengkap CRUD CodeIgniter 4 dan Vue JS (Full Stack)

Pada tutorial ini Anda akan belajar bagaimana membuat aplikasi Create-Read-Update-Delete (CRUD) menggunakan CodeIgniter 4 di sisi backend dan Vue JS di sisi frontend.

Tidak hanya itu,

Saya juga akan berbagi kepada Anda bagaimana penggunaan Bulma CSS untuk style User Interface (UI).

Dengan demikian, aplikasi yang dibangun menjadi lebih elegan, responsive, dan user friendly.

Mari kita mulai.

Step #1. Install CodeIgniter 4

Untuk menginstal CodeIgniter 4 dapat dilakukan dengan 2 cara yaitu: Instalasi manual dan Instalasi menggunakan composer.

Pada tutorial ini, saya akan menggunakan composer.

Jika Anda belum memiliki composer, silahkan kunjungi URL berikut untuk mendownload composer, kemudian install di komputer Anda:

https://getcomposer.org/

Setelah composer terinstall di komputer Anda dan untuk memastikan composer terinstall dengan baik di komputer Anda, buka terminal atau Command Prompt (CMD).

Kemudian ketikan perintah berikut:

composer -v

Seperti gambar berikut:

composer

Setelah composer terinstal dengan baik di komputer Anda, kemudian Anda dapat membuat project CodeIgniter 4 menggunakan composer.

Buat sebuah folder di web server Anda, disini saya beri nama “fullstack”.

Jika Anda menggunakan WAMPSERVER, buat di folder:

C:/wamp64/www

Jika Anda menggunakan XAMPP, buat di folder:

C:/xampp/htdocs

Pada tutorial ini, saya menggunakan XAMPP.

Kemudian buka folder “fullstack” tersebut menggunakan Code Editor, disini saya menggunakan Visual Studio Code.

Setelah itu, integrasikan dengan terminal pada VS Code.

Kemudian ketikan perintah berikut pada terminal untuk membuat project CodeIgniter 4:

composer create-project codeigniter4/appstarter backend

Tunggu sampai proses instalasinya selesai.

Setelah instalasi selesai, masuk ke folder “backend” dengan mengetikan perintah berikut pada terminal:

cd backend

Kemudian ketikan perintah berikut pada terminal untuk menjalankan project:

php spark serve

Jika berjalan dengan baik, maka akan tampil tampilan seperti berikut:

php spark serve

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!

Step #2. Buat Database dan Table

Buat sebuah database baru pada MySQL, Anda dapat menggunakan tools seperti SQLyog, PHPMyAdmin atau sejenisnya.

Disini saya membuat database dengan nama “fullstack_db”.

Jika Anda membuat database dengan nama yang sama itu lebih baik.

Untuk membuat database pada MySQL, dapat dilakukan dengan mengeksekusi query berikut:

CREATE DATABASE fullstack_db;

Perintah SQL diatas akan membuat sebuah database dengan nama “fullstack_db”.

Selanjutnya, buat koneksi antara database dengan project CodeIgniter.

Temukan file env pada root project, kemudian rename (ganti nama) menjadi .env dan open file tersebut.

Kemudian temukan kode berikut:

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

Ubah menjadi seperti berikut:

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

Selanjutnya adalah pembuatan table pada database “fullstack_db”.

Pada tutorial ini, saya akan menggunakan fitur migration pada CodeIgniter 4 untuk pembuatan table.

Ketikan perintah berikut pada Terminal/Command Prompt:

php spark make:migration Products

Kemudian Enter, maka CodeIgniter akan membuat sebuah file berinisial “Products” pada folder “app/Database/Migrations”.

Seperti gambar berikut:

migrations

Buka file tersebut, kemudian ketikan kode berikut:

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Products extends Migration
{
    public function up()
    {
        $this->forge->addField([
            'id' => [
                'type' => 'INT',
                'constraint' => 5,
                'auto_increment' => true
            ],
            'title' => [
                'type' => 'VARCHAR',
                'constraint' => 200,
            ],
            'price' => [
                'type' => 'INT',
                'constraint' => 11,
            ]
        ]);
        $this->forge->addKey('id', true);
        $this->forge->createTable('products');
    }

    public function down()
    {
        //
    }
}

Pada kode diatas, kita hanya menambahkan kode pada function up().

Function up, berfungsi untuk membuat table di database dengan field yang ditetapkan.

Pada kasus diatas, kita membuat sebuah table dengan nama “products” dengan field id, title, dan price beserta type data dan atribut lainnya.

Jika Anda tidak terbiasa dengan migration, mungkin terlihat rumit, tapi sebenarnya tidak.

Selanjutnya, ketikan perintah berikut pada Terminal/Command Prompt:

php spark migrate

Kemudian Enter, maka CodeIgniter akan otomatis membuat table “products” dengan field id, title, dan price di dalam database “fullstack_db”.

Step #3. Models

Pada tutorial ini, hanya dibutuhkan satu file model yaitu “ProductModel.php”.

Buat sebuah file model bernama “ProductModel.php” pada folder “app/Models”, kemudian ketikan kode berikut:

<?php

namespace App\Models;

use CodeIgniter\Model;

class ProductModel extends Model
{
    protected $DBGroup              = 'default';
    protected $table                = 'products';
    protected $primaryKey           = 'id';
    protected $useAutoIncrement     = true;
    protected $insertID             = 0;
    protected $returnType           = 'array';
    protected $useSoftDeletes       = false;
    protected $protectFields        = true;
    protected $allowedFields        = ['title','price'];

    // Dates
    protected $useTimestamps        = false;
    protected $dateFormat           = 'datetime';
    protected $createdField         = 'created_at';
    protected $updatedField         = 'updated_at';
    protected $deletedField         = 'deleted_at';

    // Validation
    protected $validationRules      = [];
    protected $validationMessages   = [];
    protected $skipValidation       = false;
    protected $cleanValidationRules = true;

    // Callbacks
    protected $allowCallbacks       = true;
    protected $beforeInsert         = [];
    protected $afterInsert          = [];
    protected $beforeUpdate         = [];
    protected $afterUpdate          = [];
    protected $beforeFind           = [];
    protected $afterFind            = [];
    protected $beforeDelete         = [];
    protected $afterDelete          = [];
}

Step #4. Controllers

Buat sebuah file controller bernama “Product.php” pada folder “app/Controllers”, kemudian ketikan kode berikut:

<?php

namespace App\Controllers;

use CodeIgniter\RESTful\ResourceController;
use CodeIgniter\API\ResponseTrait;
use App\Models\ProductModel;

class Product extends ResourceController
{
    /**
     * Return an array of resource objects, themselves in array format
     *
     * @return mixed
     */
    use ResponseTrait;
    public function index()
    {
        $model = new ProductModel();
        $data = $model->findAll();
        if(!$data) return $this->failNotFound('Data Tidak Ditemukan');
        return $this->respond($data);
    }

    /**
     * Return the properties of a resource object
     *
     * @return mixed
     */
    public function show($id = null)
    {
        $model = new ProductModel();
        $data = $model->find(['id' => $id]);
        if(!$data) return $this->failNotFound('Data Tidak Ditemukan');
        return $this->respond($data[0]);
    }

    /**
     * Create a new resource object, from "posted" parameters
     *
     * @return mixed
     */
    public function create()
    {
        $json = $this->request->getJSON();
        $data = [
            'title' => $json->title,
            'price' => $json->price
        ];
        $model = new ProductModel();
        $product = $model->insert($data);
        if(!$product) return $this->fail('Gagal tersimpan', 400);
        return $this->respondCreated($product);
    }

    /**
     * Add or update a model resource, from "posted" properties
     *
     * @return mixed
     */
    public function update($id = null)
    {
        $json = $this->request->getJSON();
        $data = [
            'title' => $json->title,
            'price' => $json->price
        ];
        $model = new ProductModel();
        $cekId = $model->find(['id' => $id]);
        if(!$cekId) return $this->fail('Data Tidak ditemukan', 404);
        $product = $model->update($id, $data);
        if(!$product) return $this->fail('Gagal terupdate', 400);
        return $this->respond($product);
    }

    /**
     * Delete the designated resource object from the model
     *
     * @return mixed
     */
    public function delete($id = null)
    {
        $model = new ProductModel();
        $cekId = $model->find(['id' => $id]);
        if(!$cekId) return $this->fail('Data Tidak ditemukan', 404);
        $product = $model->delete($id);
        if(!$product) return $this->fail('Gagal terhapus', 400);
        return $this->respondDeleted('Data Berhasil Terhapus');
    }
}

Step #5. Konfigurasi Routes.php

Lakukan sedikit konfigurasi pada file Routes.php yang terdapat pada folder “app/Config”.

Buka file “Routes.php” pada folder “app/Config”, kemudian temukan kode berikut:

$routes->get('/', 'Home::index');

Kemudian, ganti menjadi berikut:

$routes->resource('products');

Step #6. CORS (Cross-Origin Resources Sharing)

Ini penting!

Agar resources dapat diakses di luar domain, kita perlu mengizinkan CORS.

Untuk mengizinkan CORS, buat file bernama “Cors.php” pada folder “app/Filters”.

Kemudian ketikan kode berikut:

<?php

namespace App\Filters;

use CodeIgniter\Filters\FilterInterface;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;

class Cors implements FilterInterface
{
    public function before(RequestInterface $request, $arguments = null)
    {
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Headers: X-API-KEY, Origin,X-Requested-With, Content-Type, Accept, Access-Control-Requested-Method, Authorization");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
        $method = $_SERVER['REQUEST_METHOD'];
        if($method == "OPTIONS"){
            die();
        }
    }
    
    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {
        //
    }
}

Selanjutnya buka file “Filters.php” yang terdapat pada folder “app/Config”.

Kemudian temukan kode berikut:

public $aliases = [
        'csrf'     => CSRF::class,
        'toolbar'  => DebugToolbar::class,
        'honeypot' => Honeypot::class
    ];

Kemudian tambahkan cors filter seperti berikut:

public $aliases = [
        'csrf'     => CSRF::class,
        'toolbar'  => DebugToolbar::class,
        'honeypot' => Honeypot::class,
        'cors'     => App\Filters\Cors::class,
    ];

Selanjutnya definisikan “cors” pada public $globals seperti berikut:

public $globals = [
        'before' => [
            'cors'
            //'honeypot'
            // 'csrf',
        ],
        'after'  => [
            'toolbar',
            //'honeypot'
        ],
    ];

Step #7. Vue CLI (Frontend)

Pada tutorial ini, saya akan menggunakan Vue CLI (Command Line Interface) untuk frontend.

Anda dapat menginstal Vue CLI menggunakan NPM (Node Package Manager) atau menggunakan YARN.

Pada tutorial ini, saya akan menggunakan NPM.

Untuk menginstal NPM, Anda hanya perlu menginstall Node.js.

Silahkan download Node.js pada link berikut dan install di komputer Anda:

https://nodejs.org

Untuk memastikan Node.js telah terinstall di komputer Anda, ketikan perintah berikut pada CMD (Command Prompt) atau Terminal:

node –v

Kemudian, pastikan NPM juga terinstall dengan baik dengan mengetikan perintah berikut pada CMD (Command Prompt) atau Terminal:

npm –v

Perhatikan gambar berikut untuk lebih jelasnya:

node npm

Kemudian install Vue CLI dengan mengetikan perintah berikut pada CMD atau Terminal:

npm install –g @vue/cli

Perintah diatas akan menginstall Vue CLI secara global di komputer Anda.

Setelah Anda menginstall Vue CLI, dan untuk memastikan Vue CLI terinstall dengan baik di komputer Anda, ketikan perintah berikut pada CMD atau Terminal:

vue --version

Seperti gambar berikut:

vue version

Selanjutnya buka terminal baru pada VS Code, dan ketikan perintah berikut untuk membuat project Vue JS:

vue create frontend

Pastikan Anda berada pada folder “fullstack”, seperti gambar berikut:

vue project

Kemudian pilih => “Manually select features”.

Seperti gambar berikut:

features

Kemudian, pilih “Choose Vue version, Babel, dan Router” kemudian Enter.

Seperti gambar berikut:

vue babel router

Kemudian pilih Vue versi 3.x, kemudian Enter seterusnya.

Maka Vue CLI akan membuat project baru untuk Anda.

Jika instalasi selesai, maka terdapat folder “backend” dan “frontend” di dalam folder “fullstack”.

Seperti gambar berikut:

project folder

Folder “backend” adalah project yang kita buat sebelumnya menggunakan CodeIgniter 4, sedangkan “frontend” adalah project yang kita buat menggunakan Vue CLI.

Kemudian, masuk ke folder “frontend” dengan mengetikan perintah berikut pada terminal:

cd frontend

Selanjutnya, install dependensi yang kita butuhkan dengan mengetikan perintah berikut pada terminal:

npm install axios bulma

Perintah diatas akan menginstall axios dan bulma css.

Axios memudahkan kita berinteraksi dengan API, sedangkan bulma CSS akan mempermudah kita untuk membuat user interface (UI).

Untuk memastikan project Vue JS kita berjalan dengan baik, ketikan perintah berikut pada terminal:

npm run serve

Seperti gambar berikut:

npm run serve

Pada gambar diatas terlihat bahwa frontend berjalan di port: 8081, sedangkan backend kita sebelumnya berjalan di port: 8080.

Step #8. Show dan Delete Data (READ & DELETE)

Buka file “App.vue” yang terdapat pada folder “frontend/src”, kemudian ubah menjadi seperti berikut:

<template>
  <div class="container is-max-desktop">
    <router-view />
  </div>
</template>

<style>
@import "~bulma/css/bulma.css";
</style>

Setelah itu, buka file “main.js” yang terdapat pada folder “frontend/src”, kemudian ubah menjadi seperti berikut:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// import axios
import axios from 'axios'
// define baseURL
axios.defaults.baseURL = 'http://localhost:8080/'

createApp(App).use(router).mount('#app')

Selanjutnya, buat sebuah file components bernama “Product.vue” di dalam folder “frontend/src/components”.

Kemudian ketikan kode berikut:

<template>
  <div>
    <h1 class="title">Product List</h1>
    <router-link :to="{ name: 'AddProduct' }" class="button is-primary"
      >Add New</router-link
    >
    <table class="table is-striped is-fullwidth">
      <thead>
        <tr>
          <th>Title</th>
          <th>Price</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.title }}</td>
          <td>{{ product.price }}</td>
          <td>
            <router-link
              :to="{ name: 'EditProduct', params: { id: product.id } }"
              class="button is-info is-small"
              >Edit</router-link
            >
            <button
              class="button is-danger is-small"
              @click="deleteProduct(product.id)"
            >
              Delete
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Product",
  data() {
    return {
      products: [],
    };
  },
  created() {
    this.getProducts();
  },
  methods: {
    async getProducts() {
      try {
        const response = await axios.get("product");
        this.products = response.data;
      } catch (error) {
        console.log(error);
      }
    },
    async deleteProduct(id) {
      try {
        await axios.delete(`product/${id}`);
        this.getProducts();
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style>
</style>

Kemudian buat sebuah file lagi bernama “ProductList.vue” pada folder “frontend/src/views”, kemudian ketikan kode berikut:

<template>
  <Product />
</template>

<script>
import Product from "@/components/Product.vue";
export default {
  name: "ProductList",
  components: {
    Product,
  },
};
</script>

<style>
</style>

Setelah itu, buka file “index.js” yang terdapat pada folder “frontend/src/router”, kemudian ubah menjadi seperti berikut:

import { createRouter, createWebHistory } from 'vue-router'
import ProductList from '../views/ProductList.vue'

const routes = [
  {
    path: '/',
    name: 'ProductList',
    component: ProductList
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Untuk mamastikan semuanya berjalan dengan baik, kembali ke browser dan kunjungi URL berikut:

http://localhost:8081/

Jika berjalan dengan baik, maka akan tampil seperti gambar berikut:

product lists

Jika Anda klik salah satu dari tombol “Delete”, maka salah satu dari data tersebut akan terhapus.

Step #9. POST Data (CREATE)

Buat sebuat file components bernama “AddFrom.vue” di dalam folder “frontend/src/components”.

Kemudian ketikan kode berikut:

<template>
  <div>
    <h1 class="title">Add New Product</h1>
    <form @submit.prevent="saveProduct">
      <div class="field">
        <label class="label">Title</label>
        <div class="control">
          <input
            type="text"
            v-model="title"
            class="input"
            placeholder="Title"
          />
        </div>
      </div>
      <div class="field">
        <label class="label">Price</label>
        <div class="control">
          <input
            type="text"
            v-model="price"
            class="input"
            placeholder="Price"
          />
        </div>
      </div>
      <div class="field">
        <div class="control">
          <button class="button is-primary">Save</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "AddForm",
  data() {
    return {
      title: "",
      price: "",
    };
  },
  methods: {
    async saveProduct() {
      try {
        await axios.post("product", {
          title: this.title,
          price: this.price,
        });
        (this.title = ""), (this.price = ""), this.$router.push("/");
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style>
</style>

Kemudian buat sebuah file lagi bernama “AddProduct.vue” pada folder “frontend/src/views”, kemudian ketikan kode berikut:

<template>
  <AddForm />
</template>

<script>
import AddForm from "@/components/AddForm.vue";
export default {
  name: "AddProduct",
  components: {
    AddForm,
  },
};
</script>

<style>
</style>

Setelah itu, buka file “index.js” yang terdapat pada folder “frontend/src/router”, kemudian ubah menjadi seperti berikut:

import { createRouter, createWebHistory } from 'vue-router'
import ProductList from '../views/ProductList.vue'
import AddProduct from '../views/AddProduct.vue'

const routes = [
  {
    path: '/',
    name: 'ProductList',
    component: ProductList
  },
  {
    path: '/add',
    name: 'AddProduct',
    component: AddProduct
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Kembali ke browser, kemudian klik tombol “Add New” atau kunjungi URL berikut:

http://localhost:8081/add

Jika berjalan dengan baik, maka akan tampil form seperti gambar berikut:

add product

Masukan “Title” dan “Price”, kemudian klik tombol “Save”.

Jika berjalan dengan baik, maka terlihat tambahan satu data seperti gambar berikut:

products

Step #10. UPDATE Data (UPDATE)

Buat sebuat file components bernama “EditFrom.vue” di dalam folder “frontend/src/components”.

Kemudian ketikan kode berikut:

<template>
  <div>
    <h1 class="title">Update Product</h1>
    <form @submit.prevent="updateProduct">
      <div class="field">
        <label class="label">Title</label>
        <div class="control">
          <input
            type="text"
            v-model="title"
            class="input"
            placeholder="Title"
          />
        </div>
      </div>
      <div class="field">
        <label class="label">Price</label>
        <div class="control">
          <input
            type="text"
            v-model="price"
            class="input"
            placeholder="Price"
          />
        </div>
      </div>
      <div class="field">
        <div class="control">
          <button class="button is-primary">Update</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "EditForm",
  data() {
    return {
      title: "",
      price: "",
    };
  },
  created() {
    this.getProductById();
  },
  methods: {
    async getProductById() {
      try {
        const response = await axios.get(`product/${this.$route.params.id}`);
        (this.title = response.data.title), (this.price = response.data.price);
      } catch (error) {
        console.log(error);
      }
    },
    async updateProduct() {
      try {
        await axios.put(`product/${this.$route.params.id}`, {
          title: this.title,
          price: this.price,
        });
        (this.title = ""), (this.price = ""), this.$router.push("/");
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style>
</style>

Kemudian buat sebuah file view bernama “EditProduct.vue” pada folder “frontend/src/views”, kemudian ketikan kode berikut:

<template>
  <EditForm />
</template>

<script>
import EditForm from "@/components/EditForm.vue";
export default {
  name: "EditProduct",
  components: {
    EditForm,
  },
};
</script>

<style>
</style>

Setelah itu, buka file “index.js” yang terdapat pada folder “frontend/src/router”, kemudian ubah menjadi seperti berikut:

import { createRouter, createWebHistory } from 'vue-router'
import ProductList from '../views/ProductList.vue'
import AddProduct from '../views/AddProduct.vue'
import EditProduct from '../views/EditProduct.vue'

const routes = [
  {
    path: '/',
    name: 'ProductList',
    component: ProductList
  },
  {
    path: '/add',
    name: 'AddProduct',
    component: AddProduct
  },
  {
    path: '/edit/:id',
    name: 'EditProduct',
    component: EditProduct
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Kembali ke browser, kemudian klik salah satu dari tombol “Edit”, maka akan tampil form edit seperti gambar berikut:

edit product