Halo teman-teman semuanya, pada tahap kali ini kita akan membuat Restful API di CodeIgniter untuk proses CRUD yang nanti akan di lakukan dengan Vue Js.
Setelah sebelumnya kita sudah berhasil membuat project CodeIgniter baru dan sekaligus membuat migration table, maka sekarang kita akan membuat sebuah controller, model dan route untuk Rest API tersebut. Langsung saja kita mulai.
Langkah 1 - Membuat Model
Silahkan buat sebuah model baru dengan nama PostModel.php di dalam folder app/Models/ kemudian masukkan kode berikut ini :
PostModel.php
<?php namespace App\Models;
use CodeIgniter\Model;
class PostModel extends Model
{
/**
* table name
*/
protected $table = "posts";
/**
* allowed Field
*/
protected $allowedFields = [
'title',
'content'
];
}
Di atas kita membuat sebuah Model baru dengan nama PostModel, kemudian di dalam Model tersebut kita menambahkan beberapa protected properties, diantaranya :
-
$table - ini di gunakan untuk memberi tahu Model bahwa kita akan menggunakan table dengan nama posts
-
$allowedFields - ini digunakan sebagai mass assigment, jadi column mana saja yang diizinan untuk melakukan manipulasi data.
Langkah 2 - Membuat Controller
Selanjutnya kita akan membuat controller untuk proses CRUD nantinya, silahkan buat file baru dengan nama Post.php di dalam folder app/Controllers/ kemudian masukkan kode berikut ini :
Post.php
<?php
namespace App\Controllers;
use CodeIgniter\RESTful\ResourceController;
class Post extends ResourceController
{
protected $modelName = 'App\Models\PostModel';
protected $format = 'json';
/**
* index function
* @method : GET
*/
public function index()
{
return $this->respond([
'statusCode' => 200,
'message' => 'OK',
'data' => $this->model->orderBy('id', 'DESC')->findAll()
], 200);
}
/**
* show function
* @method : GET with params ID
*/
public function show($id = null)
{
return $this->respond([
'statusCode' => 200,
'message' => 'OK',
'data' => $this->model->find($id)
], 200);
}
/**
* create function
* @method : POST
*/
public function create()
{
if ($this->request)
{
//get request from Vue Js
if($this->request->getJSON()) {
$json = $this->request->getJSON();
$post = $this->model->insert([
'title' => $json->title,
'content' => $json->content
]);
} else {
//get request from Postman and more
$post = $this->model->insert([
'title' => $this->request->getPost('title'),
'content' => $this->request->getPost('content')
]);
}
return $this->respond([
'statusCode' => 201,
'message' => 'Data Berhasil Disimpan!',
], 201);
}
}
/**
* update function
* @method : PUT or PATCH
*/
public function update($id = null)
{
//model
$post = $this->model;
if ($this->request)
{
//get request from Vue Js
if($this->request->getJSON()) {
$json = $this->request->getJSON();
$post->update($json->id, [
'title' => $json->title,
'content' => $json->content
]);
} else {
//get request from Postman and more
$data = $this->request->getRawInput();
$post->update($id, $data);
}
return $this->respond([
'statusCode' => 200,
'message' => 'Data Berhasil Diupdate!',
], 200);
}
}
/**
* edit function
* @method : DELETE with params ID
*/
public function delete($id = null)
{
$post = $this->model->find($id);
if($post) {
$this->model->delete($id);
return $this->respond([
'statusCode' => 200,
'message' => 'Data Berhasil Dihapus!',
], 200);
}
}
}
Di atas kita menambahkan 5 function/method yang akan kita gunakan untuk proses membuat CRUD dengan Vue Js nanti, berikut ini beberapa penjelasan untuk 5 function/method di atas.
Sebelumnya di atas kita mengimport ResourcesController terlebih dahulu, ResourcesController ini kita akan gunakan untuk membangun sebuah Rest API di CodeIgniter menjadi lebih mudah.
use CodeIgniter\RESTful\ResourceController;
Kemudian kita juga membuat 2 protected properties, yaitu :
protected $modelName = 'App\Models\PostModel';
protected $format = 'json';
Untuk propreties $modelName adalah model mana yang akan kita gunakan di dalam coontroller ini, di atas kita memanggil dari path app/Models/PostModel.php.
Kemudian untuk $format adalah return response yang akan kita gunakan untuk menampilkan data, disini kita menggunakan format JSON, kita juga bisa merubahnya ke dalam format XML. Sesuai dengan kebutuhan.
Kemudian untuk function index di atas kita return data posts dengan di urutkan berdaasarkan ID posts yang paling terbaru dan tentunya ke dalam format JSON.
Untuk function show di atas kita membutuhkan sebuah parameters ID dari data post, fungsi ini akan kita gunakan untuk menampilkan detail data post dan untuk implementasi di Vue Js kita akan gunakan fungsi ini untuk menampilkan data yang akan di edit.
Selanjutnya ada function create, disini kita membuat fungsi ini memiliki 2 kondisi yaitu menyimpan data dari request Vue Js dan menyimpan data dari request Postman atau yang lainnya. Karena hasil request dari Vue Js berupa Object JSON jadi kita menangkap request tersebut dengan $this->request->getJSON(). Dan untuk request dari Postman atau yang lain kita cukup menangkap request tersebut menggunakan $this->request->getPost().
Dan untuk function update di atas kita juga membutuhkan parameters ID dari data post, karena ID ini akan dijadikan acuan untuk meng-update data ke dalam database. Sama seprti function create, disini kita membuat 2 kondisi request yaitu dari Vue Js dan Postman atau yang lain.
Untuk request dari Vue Js karena data yang dikirim berupa Object JSON kita bisa mengkapnya menggunakan $this->request->getJSON() dan untuk request dari Postman atau yang lain kita harus menggunakan seperti berikut ini $this->request->getRawInput, request ini kusus digunakan jika kita menggunakan Resources Route dan function update saja.
Kemudian yang terakhir ada function delete, fungsi ini juga membutuhkan sebuah parameters ID dari post, karena ID tersebut akan di jadikan acuan untuk melakukan delete data berdasarkan ID.
Langkah 3 - Menambahkan Route
Setelah kita berhasil membuat controller, sekarang kita lanjutkan menambahkan sebuah routes, nah kali ini kita akan implementasikan yang namanya Resources Route.
Dengan Resources Route kita bisa membuat RESTFul routes dengan lebih cepat hanya dengan method resources(). Dengan menggunakan ini kita akan dibuatkan 5 route yang bisa menghandle full CRUD, seperti menampilkan data, input data, edit dan update data sampai hapus data. langsung saja kita mulai.
Silahkan buka file app/Config/Routes.php kemudian masukkan kode berikut ini di bawah route home.
$routes->resource('api/post', ['controller' =>'Post']);
Route di atas maka secara otomatis akan membuatkan route seperti berikut ini di dalam aplikasi kita.
$routes->get('api/post/new', 'Post::new');
$routes->post('api/post', 'Post::create');
$routes->get('api/post', 'Post::index');
$routes->get('api/post/(:segment)', 'Post::show/$1');
$routes->get('api/post/(:segment)/edit', 'Post::edit/$1');
$routes->put('api/post/(:segment)', 'Post::update/$1');
$routes->patch('api/post/(:segment)', 'Post::update/$1');
$routes->delete('api/post/(:segment)', 'Post::delete/$1');
Langkah 4 - Uji Coba Restful API
Untuk pengujian Restful API kali ini kita akan menggunakan tools yang bernama Postman, silahakn teman-teman bisa meengunduhnya di https://www.postman.com/ langsung saja kita mulai tahap uji cobanya.
Menambah / Input Data ke Database
Untuk menambahkan data silahkan masukkan http://localhost:8080/api/post dan untuk methodnya silahkan menggunakan POST, karena kita akan mengirimkan sebuah data ke server, sekarang sliahkan klik tab body pada Postman dan pilih form-data, dan tambahkan key dengan nama title dan content beserta valunya. kurang lebih seperti berikut ini :
Jika berhasil maka kurang lebih kita akan mendapatkan response format seeprti berikut ini :
{
"statusCode": 201,
"message": "Data Berhasil Disimpan!",
}
Menampilkan Data dari Database
Silahkan masukkan http://localhost:8080/api/post dan menggunakan method GET di dalam Postman, kurang lebih seperti berikut ini :
Jika berhasil teman-teman akan mendapatkan response data dalam bentuk JSON kurang lebih seperti berikut ini :
{
"statusCode": 200,
"message": "OK",
"data": [
{
"id": "1",
"title": "Judul Post 1",
"content": "Konten Post 1"
}
]
}
Update Data ke Database
Sekarang teman-teman bisa mencobanya langsung dengan Postman, silahkan masukkan http://localhost:8000/api/post/1 pada bagian URL dan jangan lupa menggunakan method PUT.
Di atas kita mencoba meng-update data post dengan ID 1. Sebelum kita klik Send, silahkan klik tab body pada Postman dan pilih x-www-form-urlencode, dan tambahkan key dengan nama, title dan content beserta valunya yang ingin di update. Atau seperti gambar berikut ini :
Jika berhasil, teman-teman akan melihat response dengan format JSON seperti berikut ini :
{
"statusCode": 200,
"message": "Data Berhasil Diupdate!",
}
Hapus Data dari Database
Sekarang kita akan mencoba uji coba untuk hapus data dari Database, sekarang teman-teman bisa mencobanya langsung dengan Postman, silahkan masukkan http://localhost:8000/api/posts/1 pada bagian URL dan jangan lupa menggunakan method DELETE.
Di atas kita mencoba menghapus data post dengan ID 1, kurang lebih seperti gambar berikut ini :
Jika berhasil, teman-teman akan melihat response dengan format JSON seperti berikut ini :
{
"statusCode": 200,
"message": "Data Berhasil Dihapus!",
}
Source Code
CodeIgniter Restful API : https://github.com/SantriKoding-com/CodeIgniter4-Restful-API
Vue Js : https://github.com/SantriKoding-com/Vue-Js-CodeIgniter