Tutorial Laravel 8 dan Vue Js 3 #2: Membuat RESTful API di Laravel 8


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Halo teman-teman semuanya, di artikel sebelumnya kita semua telah belajar banyak, mulai dari installasi Laravel sampai proses menjalankan migration. Pada tutorial kali ini, kita semua akan belajar bersama-sama bagaimana cara membuat RESTful API di dalam ravel 8.

Di dalam RESTful API kali ini, kita akan membuat beberapa fungsi, yaitu menampilkan data, input data, edit data dan delete dapat. API inilah yang akan kita gunakan di dalam Vue Js nanti.

Langkah 1 - Membuat Controller Post

Sekarang, kita akan membuat controller baru, silahkan jalankan perintah di bawah ini di dalam terminal/CMD :

php artisan make:controller PostController

Jika perintah di atas berhasil, maka kita akan mendapatkan file baru di dalam folder app/Http/Controllers/PostController.php kemudian, silahkan buka file tersebut dan masukkan ubah menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class PostController extends Controller
{    
    /**
     * index
     *
     * @return void
     */
    public function index()
    {
        //get data from table posts
        $posts = Post::latest()->get();

        //make response JSON
        return response()->json([
            'success' => true,
            'message' => 'List Data Post',
            'data'    => $posts  
        ], 200);

    }
    
     /**
     * show
     *
     * @param  mixed $id
     * @return void
     */
    public function show($id)
    {
        //find post by ID
        $post = Post::findOrfail($id);

        //make response JSON
        return response()->json([
            'success' => true,
            'message' => 'Detail Data Post',
            'data'    => $post 
        ], 200);

    }
    
    /**
     * store
     *
     * @param  mixed $request
     * @return void
     */
    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
        ]);

        //success save to database
        if($post) {

            return response()->json([
                'success' => true,
                'message' => 'Post Created',
                'data'    => $post  
            ], 201);

        } 

        //failed save to database
        return response()->json([
            'success' => false,
            'message' => 'Post Failed to Save',
        ], 409);

    }
    
    /**
     * update
     *
     * @param  mixed $request
     * @param  mixed $post
     * @return void
     */
    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);
        }

        //find post by ID
        $post = Post::findOrFail($post->id);

        if($post) {

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

            return response()->json([
                'success' => true,
                'message' => 'Post Updated',
                'data'    => $post  
            ], 200);

        }

        //data post not found
        return response()->json([
            'success' => false,
            'message' => 'Post Not Found',
        ], 404);

    }
    
    /**
     * destroy
     *
     * @param  mixed $id
     * @return void
     */
    public function destroy($id)
    {
        //find post by ID
        $post = Post::findOrfail($id);

        if($post) {

            //delete post
            $post->delete();

            return response()->json([
                'success' => true,
                'message' => 'Post Deleted',
            ], 200);

        }

        //data post not found
        return response()->json([
            'success' => false,
            'message' => 'Post Not Found',
        ], 404);
    }
}

Di atas, pertama kita import model Post terlebih dahulu.

use App\Models\Post;

Kemudian, kita juga import Facades Validator, ini akan kita gunakan untuk proses validasi di dalam RESTful API nanti.

use Illuminate\Support\Facades\Validator;

Di dalam class PostController kita membuat 5 function/method, yaitu :

  • function index
  • function show
  • function store
  • function update
  • funcstion destroy

Funtion Index

Function Index digunakan untuk menampilkan data post. Kurang lebih seperti berikut ini :

//get data from table posts
$posts = Post::latest()->get();

//make response JSON
return response()->json([
    'success' => true,
    'message' => 'List Data Post',
    'data'    => $posts  			// <-- data post
], 200);

Function Show

Function Show digunakan untuk menampilkan detail dari data post, ini nanti akan dimanfaatkan untuk menampilkan data di dalam form edit.

//find post by ID
$post = Post::findOrfail($id);

//make response JSON
return response()->json([
   'success' => true,
   'message' => 'Detail Data Post',
   'data'    => $post 
], 200);

Function Store

Function Store digunakan untuk proses menyimpan data post, disini kita juga menerapkan sebuah validasi, dimana validasi ini akan memastikan bahwa data yang akan di masukkan ke dalam database sesuai dengan yang diharapkan.

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

Di atas, kita set field title dan content menggunakan jenis validation rule required, yang artinya field tersebut wajib diisi dan tidak boleh kosong.

Kemudian, kita juga akan menampilkan sebuah response jika validasi di atas tidak terpenuhi, kurang lebih seperti berikut ini :

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

Dan, jika validasi di atas sudah terpenuhi, sekarang kita akan melakukan proses insert data ke dalam database, kurang lebih seperti berikut ini :

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

Kemudian, kita buat sebuah kondisi untuk memerika, apakah data post tersebut berhasil disimpan atau tidak, jika berhasil disimpan, maka kita akan membuat success response seperti berikut ini :

//success save to database
if($post) {

  return response()->json([
     'success' => true,
     'message' => 'Post Created',
     'data'    => $post  
  ], 201);

} 

Dan, jika data post gagal disimpan, maka kita akan membuat response seperti berikut ini :

//failed save to database
return response()->json([
   'success' => false,
   'message' => 'Post Failed to Save',
], 409);

Function Update

Function Update aakan digunakan untuk melakukan proses update data post, disini kita juga menggunakan sebuah validasi, untuk memerika apakah data yang di masukkan 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 membuat error response validasi, kurang lebih seperti berikut ini :

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

Kemudian, untuk proses update data, kita akan mencari data post berdasarkan ID, dimana ID ini akan didapatkan dari parameter di dalam URL.

//find post by ID
$post = Post::findOrFail($post->id);

Jika data post di temukan, maka kita akan lakukan update data post berdasarkan ID post tersebut.

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

return response()->json([
   'success' => true,
   'message' => 'Post Updated',
   'data'    => $post  
], 200);

Tapi, jika data post tidak ditemukan, maka kita akan membuat response 404 atau page not founde di dalam API, kurang lebih seperti berikut ini :

//data post not found
return response()->json([
    'success' => false,
    'message' => 'Post Not Found',
], 404)

Function Destroy

Function Destroy akan digunakan untuk mengahpus data post, disini kita juga akan mencari data post berdasarkan ID yang di dapatkan dari URL.

//find post by ID
$post = Post::findOrfail($id);

Jika data post ditemukan, maka kita akan lakukan proses delete ke dalam database.

//delete post
$post->delete();

return response()->json([
    'success' => true,
    'message' => 'Post Deleted',
], 200);

Tapi, jika data post tidak ditemukan, maka kita akan buat response 404 atau page not found, Kurang lebih seperti berikut ini :

//data post not found
return response()->json([
   'success' => false,
   'message' => 'Post Not Found',
], 404);

Langkah 2 - Membuat Route API Post

Sekarang, kita lanjutkan untuk membuat route untuk menampilkan RESTful API. Silahkan buka file routes/api.php kemudian ubah kode-nya menjadi seperit berikut ini :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

/**
 * route resource post
 */
Route::resource('/post', PostController::class);

Di atas, pertama kita set agar route api ini menggunakan namespace dari folder App\Http\Controllers. Kemudian kita buat route baru dengan jenis resource. Kurang lebih seperti berikut ini :

/**
 * route resource post
 */
Route::resource('/post', PostController::class);

Dengan menggunakan route jenis resource, maka semua route kita akan otomatis dibuatkan, seperti index, create, store, edit, update dan destroy. Jadi kita tidak perlu manual membuat route satu-satu dari setiap function.

Untuk melihat hasil menggunakan route jenis resource, kita bisa jalankan perintah berikut ini :

php artisan route:list

Maka, hasilnya kurang lebih seperti berikut ini :

Bisa teman-teman lihat, di atas semua route sudah otomatis dibuatkan tanpa perlu kita membuatnya satu-satu.

Langkah 3 - Uji Coba RESTful API Index

Sekarang, kita akan lakukan uji coba RESTful API kita, pertama kita akan uji coba untuk proses menampilkan data. Untuk tools pengujian kita akan gunakan Postman, jika belum mempunyai, silahkan bisa mengunduhnya di link berikut ini : https://www.postman.com/downloads/

Sekarang, silahkan buka Postman dan masukkan URL berikut ini : http://localhost:8000/api/post dan untuk method, silahkan pilih GET dan klik Send, jika berhasil maka kurang lebih seperti berikut ini :

Karena belum mempunyai data post, maka hasilnya adalah array, seperti yang teman-teman lihat di gambar atas.

Langkah 4 - Uji Coba RESTful API Input

Sekarang, kita akan lakukan proses uji coba untuk memasukkan data ke dalam database, silahkan buka Postman kemudian masukkan URL berikut ini : http://localhost:8000/api/post dan untuk method, silahkan pilih POST, karena kita akan mengirimkan data ke server, dan klik Send, maka kita akan mendapatkan error validasi seperti berikut ini :

Error tersebut muncul, karena kita belum memasukkan data apapun di dalam tab Body. Sekarang, silahkan klik tab Body kemudian pilih form-data dan masukkan contoh data di dalam key dan value seperti berikut ini :

KEY VALUE
title Title Post 1
content Content Post 1

Setelah itu klik Send, maka kita akan mendapatkan hasil response success, kurang lebih seperti berikut ini :

Langkah 5 - Uji Coba RESTful API Detail/Show

Sekarang, kita akan belajar untuk proses uji coba detail data post, silahkan buka Postman kemudian masukkan URL berikut ini : http://localhost:8000/api/post/1 dan untuk method, silahkan pilih GET. kemudian klik Send.

Jika berhasil, kurang lebih response-nya seperti berikut ini :

Langkah 6 - Uji Coba RESTful API Update

Sekarang, kita akan belajar untuk proses uji coba update data post, silahkan buka Postman kemudian masukkan URL berikut ini : http://localhost:8000/api/post/1 dan untuk method, silahkan pilih PUT.

Di atas kita contohkan menggunakan data post yang memiliki ID 1. Selanjutnya, silahkan klik tab Body kemudian pilih x-www-form-urlencoded dan masukkan value dan key seperti berikut ini :

KEY VALUE
title Title Post 1 - Edited
content Content Post 1 - Edited

Di atas, kita update data post dengan ID 1 dan menambahkan kata - edited di dalam title dan content-nya. Sekarang, silahkan klik Send, jika berhasil maka kurang lebih hasilnya seperti berikut ini :

Langkah 7 - Uji Coba RESTful API Delete

Terakhir, kita akan lakukan uji coba untuk API delete, silahkan buka Postman kemudian masukkan URL berikut ini : http://localhost:8000/api/post/1 dan untuk method, silahkan pilih DELETE. Disini kita akan menghapus data post dengan ID 1. SIlahkan klik Send, jika berhasil maka kita akan mendapatkan response seperti berikut ini :

Sampai disini belajar kita tentang bagaimana cara membuat RESTful API di Laravel 8, di artikel selanjutnya kita semua akan belajar bagaimana cara installasi Vue Js 3 dan menjalankan-nya.

Terima Kasih.


EBOOK - Membangun Website Sekolah Degan Laravel dan Vue Js : https://santrikoding.com/ebook/laravel-vue

EBOOK - Membangun Toko Online dengan Laravel dan Livewire : https://santrikoding.com/ebook/toko-online-laravel-livewire


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com
KEBIJAKAN KOMENTAR

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

KOMENTAR