Tutorial CRUD Laravel dan Nuxt Js #2 : Membuat RESTful API di Laravel


Tutorial CRUD Laravel dan Nuxt Js #2 : Membuat RESTful API di Laravel

Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar banyak hal tentang bagaimana cara installasi Laravel, menjalankan dan membuat model beserta migrationnya. Di artikel kali ini kita semua akan belajar membuat RESTful API menggunakan Laravel.

Di dalam Laravel ada fitur yang akan mempermudah kita dalam pembuatan sebuah Rest API, yaitu API Resources. Dengan menggunakan fitur ini, maka kita dapat melakukan tranformasi antara model ke dalam response JSON yang akan di tampilkan ke user.

Langkah 1 - Membuat Post Resources

Pertama, kita akan membuat resource class baru untuk data Post. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan tentunya di dalam project Laravel.

php artisan make:resource PostResource

Jika perintah di atas berhasil, maka kita akan dibuatkan 1 file baru dengan nama PostResource.php di dalam folder app/Http/Resources/PostResource.php. Disini kita tidak perlu melakukan perubahan kode apapun di dalam file ini, tapi jika kita mengembangkan aplikasi dengan sekala besar, maka kita bisa melakukan penyesuaian di dalam file resource ini.

Langkah 2 - Membuat Controller API Post

Setelah berhasil membuat PostResource, kita lanjutkan untuk membuat controller baru yang kita gunakan sebagai API nantinya. Silahkan jalankan perintah berikut ini di dalam terminal/CMD :

php artisan make:controller Api\\PostController -r

Di atas kita membuat sebuah controller baru dengan nama PostController.php yang berada di dalam folder app/Http/Controllers/Api dan kita tambahkan flag -r yang artinya adalah resource controller, yaitu kita akan dibuatkan method-method di dalam controller tersebut sesuai dengan standart Laravel. Seperti :

  • function index
  • function create
  • function store
  • function show
  • function edit
  • function update
  • function destroy

Kita lanjutkan untuk menambahkan beberapa kode di dalam controller PostController.php agar dapat digunakan untuk proses CRUD nantinya. Silahkan buka file controller tersebut dan ubah kode-nya menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers\Api;

use App\Models\Post;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Http\Resources\PostResource;
use Illuminate\Support\Facades\Validator;

class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return new PostResource(Post::all());
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //set validation
        $validator = Validator::make($request->all(), [
            'title'   => 'required',
            'content' => 'required',
        ]);

        //response error validation
        if ($validator->fails()) {
            return response()->json($validator->errors(), 400);
        }

        //save to database
        $post = Post::create([
            'title'     => $request->title,
            'content'   => $request->content
        ]);

        return new PostResource($post);
    }

    /**
     * Display the specified resource.
     *
     * @param  Post $post
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
        return new PostResource($post);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  Post $post
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Post $post)
    {
        //set validation
        $validator = Validator::make($request->all(), [
            'title'   => 'required',
            'content' => 'required',
        ]);

        //response error validation
        if ($validator->fails()) {
            return response()->json($validator->errors(), 400);
        }

        //update to database
        $post->update([
            'title'     => $request->title,
            'content'   => $request->content
        ]);

        return new PostResource($post);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  Post $post
     * @return \Illuminate\Http\Response
     */
    public function destroy(Post $post)
    {
        $post->delete();
        
        return new PostResource($post);
    }
}

Dari penambahan kode di atas, pertama kita melakukan import model Post terlebih dahulu.

use App\Models\Post;

kemudian kita import juga PostResource yang sebelumnya sudah kita buat.

use App\Http\Resources\PostResource;

Dan selanjutnya kita import Facades Validator yang akan kita gunakan sebagai validasi di dalam Rest API nantinya.

use Illuminate\Support\Facades\Validator;

function index

Di dalam method ini kita melakukan sebuah return ke dalam PostResource yang di dalamnya kita memanggil model Post untuk mendapatkan data dari database. Dan dari model tersebut akan diubah ke dalam format JSON.

return new PostResource(Post::all());

function store

Method ini akan kita gunakan untuk melakukan insert data ke dalam database. Dan sebelum data diinsert, kita melakukan sebuah kondisi untuk validasi data, apakah data yang di input benar-benar sudah sesuai dengan yang diharapkan.

//set validation
$validator = Validator::make($request->all(), [
     'title'   => 'required',
     'content' => 'required',
]);

Di atas, kita set untuk title dan content menjadi required yang artinya kedua attribute tersebut harus wajib diisi nilainya.

Jika validasi di atas tidak terpenuhi, maka akan mengembalikan sebuah validasi error dengan status code 400, kurang lebih seperti berikut ini :

//response error validation
if ($validator->fails()) {
   return response()->json($validator->errors(), 400);
}

Dan jika validasi di atas terpenuhi, maka kita akan melakukan insert data ke dalam database menggunakan kode seperti berikut ini :

//save to database
$post = Post::create([
   'title'     => $request->title,
   'content'   => $request->content
]);

Setelah itu, kita parsing variable $post di atas ke dalam PostResource agar dapat mengembalikan ke dalam format JSON.

return new PostResource($post);

function show

Method ini akan digunakan untuk menampilkan detail dari data post, jika kita perhatikan di dalam method ini kita berikan model injection di dalam parameter-nya, ini sama saja dengan kita mencari data post berdasarkan ID yang di dapatkan dari parameter. Kemudian kita parsing ke dalam PostResource agar dapat mengembalikan dalam format JSON.

return new PostResource($post);

function update

Method ini digunakan untuk mengupdate data post ke dalam database dan di dalam method ini sama seperti di method store yaitu menggunakan validasi terlebih dahulu untuk memastikan data yang akan diupdate benar-benar sesuai dengan yang diharapkan.

//set validation
$validator = Validator::make($request->all(), [
    'title'   => 'required',
    'content' => 'required',
]);

Jika validasi di atas tidak terpenuhi, maka akan menampilkan sebuah validasi error, kurang lebih kode-nya seperti berikut ini :

//response error validation
if ($validator->fails()) {
   return response()->json($validator->errors(), 400);
}

Tapi, jika validasi terpenuhi dan artinya kita dapat melakukan update data post, kurang lebih kode-nya seperti berikut ini :

//update to database
$post->update([
   'title'     => $request->title,
   'content'   => $request->content
]);

Setelah data berhasil diupdate, maka kita parsing variable $post ke dalam PostResource agar dapat mengembalikan dalam format JSON.

return new PostResource($post);

function destroy

Method ini digunakan untuk menghapus data post dari database, seperti halnya method show, disini kita membuat model injection Post $post di dalam paramater. Dan jika data berhasil ditemukan, maka akan melakukan delete data ke dalam database.

$post->delete();

Dan terakhir kita parsing variable $post yang berisi data post yang sudah berhasil dihapus ke dalam PostResource, ini bertujuan agar response JSON-nya tidak bernilai kosong.

return new PostResource($post);

Langkah 3 - Membuat Route API Post

Setelah berhasil membuat controller beserta fungsi-fungsinya, maka sekarang kita lanjutkan untuk mendefinisikan sebuah route agar controller yang kita buat di atas dapat digunakan.

Silahkan buka file routes/api.php kemudian tambahkan kode berikut ini :

/**
 * route resource posts
 */
Route::apiResource('/posts', App\Http\Controllers\Api\PostController::class);

Untuk melihat apakah route yang kita buat berhasil, kita bisa memverifikasinya dengan perintah berikut ini :

php artisan route:list

Langkah 4 - Uji Coba RESTful API

Sekarang kita lanjutkan untuk melakukan uji coba Rest API yang sudah kita buat di atas, disini kita akan menggunakan tools tambahan untuk proses debugging API-nya. SIlahkan dowload Postman disitus resminya : https://www.postman.com/downloads dan silahkan disesuaikan dengan sistem operasi masing-masing.

Uji Coba Get Data

Pertama kita akan lakukan uji coba untuk mendapatkan data post terlebih dahulu. Silahkan buka Postman dan masukkan URL berikut ini : http://localhost:8000/api/posts kemudian untuk method-nya adalah GET. Setelah itu, silahkan klik Send dan jika berhasil maka kurang lebih seperti berikut ini :

Di atas, kita mendapatkan response dengan output "data": [] karena memang kita belum memiliki adata apapun untuk ditampilkan.

Uji Coba Store / Simpan Data

Sekarang kita lanjutkan untuk proses uji coba memasukkan data ke dalam database, pertama disini kita coba untuk memasukkan data tanpa mengisi input apapun. Silahkan masukkan URL berikut ini di Postman : http://localhost:8000/api/posts dan untuk method-nya adalah POST. Kemudian kita klik Send dan kurang lebih kita akan mendapatkan sebuah response berupa validasi error seperti berikut:

DI atas kita mendapatkan response berupa validasi yang mewajibkan kita untuk mengisi data title dan juga content. Sekarang kita coba lagi, silahkan buka tab Body dan pilih form-data, kemudian isi key dan value seperti berikut ini :

KEY VALUE
title Belajar Laravel di SantriKoding
content Belajar Laravel di SantriKoding sangat menyenangkan

Setelah itu, silahkan klik Send lagi. Dan jika berhasil maka kita mendapatkan response kurang lebih seperti berikut ini :

Di atas kita berhasil memasukkan data ke dalam database dan mendapatkan response berupa data yang kita masukkan.

Uji Coba Detail Data

Sekarang kita akan uji coba untuk menampilkan detail data, di atas setelah data yang kita masukkan memiliki ID 1, jadi kita akan coba menampilkan data berdasarkan ID 1 tersebut.

SIlahkan masukkan URL berikut ini di Postman : http://localhost:8000/api/posts/1 dan untuk method-nya silahkan pilih GET. Kemudian klik Send dan jika berhasil maka kurang lebih hasilnya seperti berikut ini :

Di atas kita berhasil menampilkan data post yang memiliki ID 1.

Uji Coba Update Data

Sekarang kita lakukan uji coba untuk mengupdate data, disini kita akan update data post yang memiliki ID 1, silahkan masukkan URL berikut ini di Postman : http://localhost:8000/api/posts/1 dan untuk method-nya silahkan pilih PUT.

Kemudian klik tab Body dan pilih x-www-form-urlencoded dan masukkan key dan value berikut ini :

KEY VALUE
title Belajar Laravel di SantriKoding - Edit
content Belajar Laravel di SantriKoding sangat menyenangkan - Edit

Di atas kita tambahkan kata - Edit untuk value dari title dan content, ini digunakan untuk memastikan apakah data kita nanti berhasil terupdate atau tidak.

Sekarang, silahkan klik Send dan jika berhasil maka kita akan mendapatkan response dengan data post yang sudah diperbarui. Kurang lebih seperti berikut ini :

Di atas bisa kita perhatikan, kita mendapatkan response data dengan di tambahkan kata - Edit yang artinya proses update data kita telah berhasil.

Uji Coba Delete Data

Terakhir kita akan uji coba untuk menghapus data post dengan ID 1, silahkan masukkan URL berikut ini di Postman : http://localhost:8000/api/posts/1 dan untuk method-nya silahkan pilih DELETE. Kemudian klik Send dan jika berhasil maka kita akan mendapatkan response seperti berikut ini :

Sekarang silahkan coba get data lagi, maka data sudah tidak ditemukan, karena kita sudah melakukan proses delete data diatas.

Sampai disini pembahasan bagaimana cara membuat RESTful API di Laravel, di artikel selanjutnya kita bersama-sama akan belajar bagaimana cara melakukan installasi dan konfigurasi untuk Nuxt Js.

Terima Kasih



Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami