Membuat Rest API CRUD Menggunakan Laravel Sanctum

CRUD Laravel Sanctum - Melanjutkan artikel tentang penggunaan sanctum package di laravel yang sebelumnya sudah pernah saya bagikan, pada artikel ini saya akan melanjutkannya dan akan membahas tentang membuat Rest API CRUD menggunakan sanctum package di laravel.

Baca juga: Membuat Rest API Authentication di Laravel 9 menggunakan Sanctum Package

Jika kamu belum mengikuti artikel laravel sanctum yang telah dibagikan sebelumnya, mungkin kamu perlu mengikutinya terlebih dahulu, karena pada artikel ini saya tidak akan menjelaskan dari awal mulai install laravel sampai berhasil login dan mendapatkan token.

Baiklah, mari kita langsung saja ke langkah-langkahnya di bawah ini 👇

Step 1: Setup Model & Migration

php artisan make:model Article -m

Oke, yang pertama kita perlu membuat model dan migration baru. Jalankan perintah artisan seperti di atas untuk generate file Article model dan articles migration.

public function up()
{
    Schema::create('articles', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id');
        $table->string('cover');
        $table->string('title');
        $table->string('slug');
        $table->longText('content');
        $table->timestamps();
    });
}

Kemudian, buka file articles migration yang baru saja digenerate tersebut. File tersebut terletak di direktori database/migrations/{timestamp}_create_articles_table.php. Edit method up pada file tersebut menjadi seperti kode di atas. Disini, kita membuat field user_id yang merupakan foreign key dengan table users.

protected $fillable = [
    'user_id',
    'cover',
    'title',
    'slug',
    'content',
];

// or
// protected $guarded = [];

Jika file articles migration sudah disetup, lanjutkan dengan menyesuaikan file Article model. Tambahkan method $fillable seperti contoh di atas agar dapat mendukung mass assignment nantinya.

php artisan migrate

Selanjutnya, jalankan perintah php artisan migrate untuk memigrasi file articles migration ke database.

/**
 * Get the articles for the user.
 *
 * @return \Illuminate\Database\Eloquent\Relations\HasMany<Article>
 */
public function articles()
{
    return $this->hasMany(Article::class);
}

Oke, kita lanjutkan dengan membuat relasi antara User model dengan Article model. Yang pertama, buka file User model, kemudian tambahkan relasi hasMany relationship ke Article model dengan kode seperti di atas.

public function user()
{
    return $this->belongsTo(User::class);
}

Kemudian, buka file Article model dan tambahkan relasi dengan User model dengan kode seperti di atas.

Step 2: Generate API Resources

php artisan make:resource ArticleResource

Seperti yang telah saya sebutkan di awal, pada artikel ini saya juga akan mengimplementasikan eloquent api resources. Untuk membuat file api resources, kita bisa menjalankan perintah artisan seperti di atas. Perintah tersebut akan membuatkan kita file ArticleResource dan terletak didirektori app/Http/Resources.

public function toArray($request)
{
    return [
        'id'        => $this->id,
        'cover'     => $this->cover,
        'title'     => $this->title,
        'slug'      => $this->slug,
        'content'   => $this->content,
    ];
}

Buka file yang baru saja digenerate tersebut, pada function toArray silahkan ubah menjadi seperti contoh kode di atas. Jika kamu ingin menampilkan nama user yang membuat article tersebut, kamu bisa menambahkan 'user' => $this->user->name.

Step 3: Setup ArticleController

php artisan make:controller API/ArticleController

Pada step ketiga ini, kita perlu membuat controller baru. Silakan jalankan perintah artisan seperti di atas untuk membuat file ArticleController.php.

use App\Http\Resources\ArticleResource;
...
...
...
public function index()
{
    $articles = auth()->user()->articles()
                ->where('title', 'like', '%' . request('keyword') . '%')
                ->paginate(10);

    return response()->json([
        'message'   => 'success',
        'data'      => ArticleResource::collection($articles),
    ]);
}

Jika, file atau class ArticleController sudah berhasil dibuat, sekarang buka file tersebut dan tambahkan function index dengan kode seperti di atas. Pada function ini, kita akan menampilkan article-article yang telah dibuat oleh user yang telah diautentikasi tersebut. Dan untuk responsenya, kita akan menggunakan ArticleResource::collection dengan data yang diambil dari variable $articles.

Tambahan. Karena kita sudah menggunakan eloquent relationship, untuk menampilkan data-data milik user yang sedang login, kita bisa menggunakan auth()->user()->articles() dari pada menggunakan Article::where('user_id',auth()->id)

$articles = Article::query()
            ->where('title', 'like', '%' . request('keyword') . '%')
            ->paginate(10);

Jika kamu ingin menampilkan semua data articles atau bukan hanya article yang dibuat oleh user yang sedang login, kamu bisa mengubahnya dengan kode seperti di atas.

public function store(Request $request)
{
    $cover      = $request->file('cover');
    $fileName   = time().'_'.$cover->getClientOriginalName();
    $filePath   = $cover->storeAs('images/articles', $fileName, 'public'); 

    $article = auth()->user()->articles()->create([
        'cover'     => $filePath,
        'title'     => $request->title,
        'slug'      => \Str::slug($request->title),
        'content'   => $request->content,
    ]);

    return response()->json([
        'message'   => 'success',
        'data'      => new ArticleResource($article),
    ]);
}

Selanjutnya function store. Seperti pada umumnya, function ini berfungsi untuk menangkap request yang dikirimkan dan akan menambahkannya ke table di database. Untuk file cover, akan kita tempatkan di folder images/articles.

public function show($id)
{
    $article = auth()->user()->articles()->find($id);

    if (!$article) {
        return response()->json([
            'message'   => 'error',
            'data'      => 'Article not found',
        ]);
    }

    return response()->json([
        'message'   => 'success',
        'data'      => new ArticleResource($article),
    ]);
}

Kemudian kita tambahkan lagi function show, yang berfungsi untuk menampilkan data article dengan id tertentu. Jika article dengan id tersebut tidak ditemukan, maka response akan menampilkan message error dengan data article not found.

public function update(Request $request, $id)
{
    $article = auth()->user()->articles()->find($id);

    if (!$article) {
        return response()->json([
            'message'   => 'error',
            'data'      => 'Article not found',
        ]);
    }

    $cover      = $request->file('cover');
    if ($cover) {
        \Storage::delete('public/'.$article->cover);
        $fileName   = time().'_'.$cover->getClientOriginalName();
        $filePath   = $cover->storeAs('images/articles', $fileName, 'public');
    } else {
        $filePath   = $article->cover;
    }
    

    $article->update([
        'cover'     => $filePath,
        'title'     => $request->title ?? $article->title,
        'slug'      => $request->title ? \Str::slug($request->title) : $article->slug,
        'content'   => $request->content ?? $article->content,
    ]);

    return response()->json([
        'message'   => 'success',
        'data'      => new ArticleResource($article),
    ]);
}

Selanjutnya function update. Function ini berfungsi untuk memperbarui data article dengan id tertentu. Jika ada request cover baru, maka akan menghapus file cover lama di storage dan akan menambahkan file cover baru.

public function destroy($id)
{
    $article = auth()->user()->articles()->find($id);

    if (!$article) {
        return response()->json([
            'message'   => 'error',
            'data'      => 'Article not found',
        ]);
    }

    \Storage::delete('public/'.$article->cover);
    $article->delete();

    return response()->json([
        'message'   => 'success',
    ]);
}

Dan yang terakhir adalah function destroy. Function ini berfungsi untuk menghapus file cover di storage dan data article dengan id tertentu.

Step 4: Add new Route

use App\Http\Controllers\API\ArticleController;
...
...
...
Route::resource('/articles', ArticleController::class)->middleware('auth:sanctum');

Oke, setelah selesai melakukan setup pada ArticleController, selanjutnya kita perlu menambahkan route baru. Buka file routes/api.php, lalu tambahkan route resource seperti kode di atas. Dan jangan lupa untuk mengimport class ArticleController. 

Step 5: Testing

Okey, setelah menyelesaikan langkah-langkah di atas, sekarang waktunya untuk testing.

1. Getting Started

Silahkan buka postman, cobalah untuk login untuk mendapatkan token. Jika kamu sudah mendapatkan token, kamu bisa membuat folder baru dengan nama misalnya "article", kemudian tambahkan request baru dengan nama index. Pilih method GET dan isi URL dengan 127.0.0.1:{port}/api/articles atau laravel-sanctum.test/api/articles. Pada tab Authorization, pilih type bearer token, lalu inputkan token yang kamu dapatkan setelah berhasil login.

Silahkan coba klik Send, maka hasilnya hanyalah empty array, karena memang belum melakukan input article.

Tips

Sedikit tips, jika teman-teman belum mengetahuinya. Jika kamu mempunyai request yang banyak dan tidak ingin menuliskan nama domain dan token yang panjang pada masing-masing request tersebut, kamu bisa menggunakan variables atau environment pada postman. Caranya, klik folder collection, pada tab variables, teman-teman bisa menambahkan variable seperti di atas.

Jadi sekarang, setiap membuat request baru, kita hanya tinggal menuliskan seperti gambar di atas. Jauh lebih simple kan?

2. Add new Article

Oke, mari kita lanjutkan dengan mencoba fitur create article. Buat request baru dengan nama misalnya store, pilih method POST dan isi URL dengan seperti gambar di atas. Jika kamu sudah mulai menggunakan postman variable, isi URL dengan {{variable}}/article. Namun jika belum menggunakan, kamu bisa mengisinya dengan laravel-sanctum.test/api/articles. Pada tab Authorization, jangan lupa ditambahkan token.

Kemudian, lanjut pada body, tambahkan key untuk cover, title dan content serta masing-masing valuenya. Jika sudah menambahkan key dan value, klik Send. Jika berhasil, maka response yang ditampilkan akan seperti gambar di atas.

3. Get Articles

Oke, setelah berhasil menambahkan article baru, mari kita coba lihat article-article yang telah dibuat. Pada request index yang sebelumnya telah kita buat, jika kita klik Send lagi, maka hasilnya bukan empty array lagi, melainkan data-data article yang telah dibuat oleh akun tersebut. Disini kita bisa sekalian mencoba fitur pencarian. Tambahkan params dengan key "keyword", lalu inputkan value yang ingin dicari seperti gambar di atas lalu klik Send lagi.

4. Show Article

Selain bisa menampilkan semua article yang telah dibuat, kita juga dapat menampilkan article dengan id tertentu. Teman-teman bisa membuat request baru dengan nama misalnya "show", pilih method GET dan isi URL dengan /articles/{article_id}. Jangan lupa untuk menambahkan token pada tab authorization, lalu klik Send, maka hasilnya akan menampilkan article dengan id yang telah ditentukan.

5. Update Article

Selanjutnya, kita akan mencoba fitur update. Silahkan buat request baru dengan method POST, isi URL dengan articles/{article_id} dan jangan lupa untuk menambahkan token. Pada tab body, silahkan tambahkan key _method yang bernilai PUT dan key-key lain yang ingin diperbarui pada article tersebut. Kemudian klik Send, maka data article dengan id tersebut akan berubah, dan jika dicek pada storage/app/public/images/articles file cover sebelumnya akan berganti dengan file cover baru.

6. Delete Article

Terakhir, mari kita coba fitur delete. Buat request baru dengan method DELETE, isi URL dengan /articles/{article_id} dan jangan lupa untuk menambahkan token. Jika article dengan id tersebut merupakan article yang dibuat oleh akun kamu, maka ketika diklik Send data article dan file cover akan terhapus. Namun jika article dengan id tersebut bukan milik kamu, maka response yang ditampilkan "article not found".

Sampai disini kita telah berhasil membuat rest API CRUD, dengan mengimplementasikan eloquent relationship serta eloquent API resources menggunakan laravel sanctum. Dari artikel ini, teman-teman bisa mengimplementasikanya dalam mode production, jika sedang bekerja dengan Front End Developer atau sedang membuat sistem dengan front end framework seperti nextjs, nuxtjs, flutter dan lain-lain.

Baiklah, cukup sekian artikel kali ini. Semoga artikel ini dapat membantu teman-teman. Jika kalian punya saran, kritik, masukan atau apapun itu yang ingin didiskusikan, silahkan tulis komentar kalian pada form komentar di bawah ini. Sampai jumpa di artikel berikutnya 👋

 

Credit: Software illustrations by Storyset

Published on March 26, 2022
Last updated on March 20, 2025